ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΕΠΛ 425 Ανασκόπηση

Зарегистрируйтесь, чтобы просмотреть полный документ!

ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΕΠΛ 425

Ανασκόπηση • • Εισαγωγή στην HTML 4. 0. Στοιχεία και Σημαντήρες HTML Κατηγορήματα και τιμές κατηγορημάτων στην HTML 4. 0 Ειδικοί χαρακτήρες και σχόλια HTML 2

Η γλώσσα σήμανσης HTML • Αποτελεί ειδική περίπτωση (εφαρμογή) της SGML, προσαρμοσμένη στις ανάγκες της δημοσίευσης εγγράφων στο Διαδίκτυο. • Ιστορία: n Πρώτη εισήγηση τον Μάιο του 1989. n Πρώτη δημοσίευση τον Δεκέμβριο του 1991. n Ιούλιος 1994: HTML 2. 0 (ορισμός σαν ένα DTD της SGML) n Ιανουάριος 1997: ανακοίνωση της HTML 3. 2 από το WWW Consortium. n Δεκέμβριος 1997: πρώτη έκδοση της HTML 4. 0 - επεκτείνει την HTML 3. 2 όσον αφορά την διεθνοποίηση της γλώσσας, την υποστήριξη style sheets, πλαισίων. Αποδοχή από ISO (ISO 15445) 3

Η γλώσσα HTML • Η HTML (Hypertext Markup Language) είναι μια γλώσσα σήμανσης, η οποία έχει σχεδιασθεί με σκοπό: Τη στοιχειοθέτηση (μορφοτύπηση-formatting) ηλεκτρονικών κειμένων n Την αναμετάδοσή τους στο Διαδίκτυο n Την αναπαράστασή τους σε διαφορετικού είδους οθόνες • Η περιγραφή της στοιχειοθέτησης του κειμένου γίνεται με την εισαγωγή σημαντήρων-κωδίκων της HTML στο σώμα του εγγράφου. n • Οι περισσότεροι σημαντήρες της HTML χρησιμοποιούνται για την οργάνωση του περιεχομένου σε μία λογική-ιεραρχική δομή. Υπάρχουν ωστόσο και καθαρά μορφολογικοί χαρακτήρες (π. χ. , ). 4

Η γλώσσα HTML • Η HTML επιτρέπει την ενσωμάτωση υπερσυνδέσμων (links, δεικτών) προς άλλα κείμενα αλλά και αρχεία ήχου, εικόνων, κινουμένων σχεδίων κλπ. ‘Ετσι, μπορεί να χρησιμοποιηθεί για τον σχεδιασμό και την ανάπτυξη εφαρμογών υπερμέσων. • Η HTML είναι επεκτάσιμη γλώσσα, υπό την έννοια ότι σε αυτή μπορούν να προστεθούν νέες ιδιότητες και λειτουργίες, χωρίς να ακυρώνονται υπερκείμενα ανεπτυγμένα σε παλαιότερες εκδόσεις της. • Τα αρχεία HTML έχουν συνήθως κατάληξη. html ή. htm 5

Αρχεία HTML • Τα HTML αρχεία περιέχουν χαρακτήρες ASCII και μπορούν να δημιουργηθούν με έναν οποιονδήποτε επεξεργαστή κειμένου ASCII (editor), όπως ο vi και ο emacs, o notepad κλπ. • Υπάρχουν επίσης πληθώρα WYSIWYG εργαλείων συγγραφής HTML σε περιβάλλοντα Windows, UNIX και Apple, όπως Front. Page (Microsoft), Hot. Metal, Net. Object Fusion, Net • Είναι απαραίτητη η καλή γνώση των προδιαγραφών HTML, παράλληλα με την χρήση κάποιου ισχυρού εργαλείου συγγραφής εφαρμογών HTML. • Ο έλεγχος ενός αρχείου HTML μπορεί να γίνει «τοπικά» με τη χρήση φυλλομετρητή και χωρίς να είναι αναγκαία η εγκατάσταση του αρχείου σε διαθέτη ΠΠΠ. • Το καλύτερο εργαλείο εκμάθησης HTML. . . 6

HTML 4. 0 • Η εισήγηση του W 3 C για την HTML 4. 0 περιλαμβάνει τρία DTD: n Transitional DTD: πρέπει να χρησιμοποιείται για τη διερμηνεία αρχείων HTML και όχι για τη συγγραφή τους. Περιλαμβάνει σημαντήρες που καθορίζουν την μορφοτύπηση κειμένων (π. χ. , , <STRIKE>), η οποία στην ΗΤML 4. 0 πρέπει να γίνεται με χρήση CSS style sheets. n Strict DTD: χρησιμεύει για την συγγραφή και δημιουργία εγγράφων HTML 4. 0 - δηλαδή πρέπει να υλοποιείται σε editors, authoring tools κλπ n Frameset DTD: καθορίζει την δομή των αρχείων HTML που περιλαμβάνουν frames. 7

Strict HTML 4. 0 • «Ψαλιδισμένη» έκδοση της HTML 4. 0, η οποία δίνει έμφαση στη δομή παρά στην παρουσίαση. • Δεν συμπεριλαμβάνει υποβαθμισμένα (deprecated) στοιχεία και κατηγορήματα, πλαίσια (frames), και απολήξεις συνδέσμων. • Με την συγγραφή HTML 4. 0 Strict εγγράφων, δημιουργούμε έγγραφα με πλούσια δομή, τα οποία εύκολα συνδυάζονται και προσαρμόζονται σε style sheets και πλοηγούς διαφορετικών προδιαγραφών. • Καθώς πολλοί πλοηγοί δεν υποστηρίζουν style sheets και HTML 4. 0 Strict, τα έγγραφα σε HTML 4. 0 Strict δεν μορφοτυπούνται ικανοποιητικά σε μεγάλο αριθμό συστημάτων πελάτη. • http: //www. w 3. org/TR/REC-html 40/strict. dtd 8

Transitional και Frameset HTML 4. 0 • Transitional HTML 4. 0 n Προσθέτει στην HTML 4. 0 Strict κατηγορήματα παρουσίασης, υποβαθμισμένα στοιχεία (deprecated elements), και στόχους συνδέσμων. n http: //www. w 3. org/TR/REC-html 40/loose. dtd • HTML 4. 0 Frameset n Παραλλαγή του HTML 4. 0 Transitional για έγγραφα που χρησιμοποιούν πλαίσια (frames). n http: //www. w 3. org/TR/REC-html 40/frameset. dtd 9

Μετάβαση από transitional σε strict HTML 4. 0 HTML Document Converter CSS stylesheet 10

Στοιχεία και Σημαντήρες στην HTML • Τα στοιχεία καθορίζουν την δομή ενός εγγράφου HTML, όπως και στην SGML, Π. χ. , το στοιχείο P αναπαριστά μια παράγραφο ενώ το EM δίνει έμφαση σε ένα τμήμα του περιεχομένου. • Ένα στοιχείο ΗΤΜL αποτελείται από τρία μέρη: n Τον εναρκτήριο σημαντήρα (start tag) n Το περιεχόμενό του n Τον καταληκτικό σημαντήρα (end tag) • Π. χ. : This is emphasized text • Για ορισμένα στοιχεία μπορεί να παραλείπεται ο εναρκτήριος ή ο καταληκτικός σημαντήρας. Π. χ. , ο καταληκτικός σημαντήρας </LI> μπορεί να παραληφθεί, καθώς υπονοείται ότι συμπίπτει με το επόμενο <LI> ή το </UL>: <UL> <LI>First list item; no end tag <LI>Second list item; optional end tag included </UL> 11

Στοιχεία και Σημαντήρες HTML (συνέχεια) • «Άδεια» στοιχεία: n Δεν περιλαμβάνουν περιεχόμενο. n Χωρίς καταληκτικό σημαντήρα – αναπαριστώνται μόνο από τον εναρκτήριο σημαντήρα τους (π. χ. BR) • Τα ονόματα στοιχείων μπορούν να γραφούν είτε με κεφαλαία είτε με μικρά γράμματα: , <e. M>, • Η τοποθέτηση των στοιχείων σε ένα έγγραφο πρέπει να ακολουθεί τους δομικούς κανόνες της HTML. Για παράδειγμα: n Τα πεδία δύο σημαντήρων δεν μπορεί να τέμνονται. Π. χ. , το ακόλουθο είναι λάθος: <H 1>Αheading</H 1> with some emphasis n Το “φώλιασμα” (nesting) διαφορετικών σημαντήρων δεν επιτρέπεται για οποιουσδήποτε σημαντήρες. Π. χ. , μέσα στο πεδίο μιας επικεφαλίδας (heading) δεν μπορεί να υπάρχει παράγραφος , επιτρέπεται ωστόσο η χρήση σημαντήρα για ορισμό υπερσυνδέσμου. 12

Κατηγορήματα HTML • Καθορίζουν διάφορες ιδιότητες ενός στοιχείου. Π. χ. , το στοιχείο IMG έχει σαν κατηγορήματα: n το SRC, που προσδιορίζει την θέση του αρχείου μιας εικόνας n το ALT, που προσδιορίζει εναλλακτικό κείμενο που μπορεί να εμφανιστεί αντί της εικόνας n <IMG SRC="wdglogo. gif" ALT="Web Design Group"> • Τα κατηγορήματα προσδιορίζονται μόνο στους εναρκτήριους σημαντήρες στοιχείων και έχουν την μορφή: Attribute-name="Attribute-value". • Η τιμή του κατηγορήματος συμπεριλαμβάνεται ανάμεσα σε απλά ή διπλά εισαγωγικά. • Τα εισαγωγικά είναι προαιρετικά αν η τιμή του κατηγορήματος περιέχει μόνο γράμματα μεταξύ Α-Ζ, a-z, ψηφία (0 -9), παύλες “-” και τελείες “. ” • Τα ονόματα των κατηγορημάτων είναι case-insensitive ενώ οι τιμές τους case -sensitive. 13

Κατηγορίες τιμών κατηγορημάτων HTML • CDATA: σειρά χαρακτήρων, η οποία μπορεί να περιλαμβάνει και οντότητες. Αγνοούνται τα Line feeds ενώ τα CR και τα tab αντικαθίστανται με κενό. Οι τιμές CDATA είναι συνήθως case-sensitive. • ID και NAME: οι τιμές αυτές ξεκινούν με γράμμα A-Z ή a-z, ακολουθούνται από (A-Za-z), ψηφία (0 -9), hyphens ("-"), underscores ("_"), άνω και κάτω τελείες (": "), και τελείες (". "). Είναι case-sensitive. • IDREF, IDREFS: παραπέμπουν σε τιμές κατηγορημάτων ID άλλων στοιχείων. To IDREF παραπέμπει σε ένα στοιχείο ενώ το IDREFS σε πολλά. • Number: αποτελείται από τουλάχιστον ένα ψηφίο 0 -9. • Text: τιμές CDATA που αποσκοπούν στο να είναι αναγνώσιμες από ανθρώπους. • URI: απόλυτο ή σχετικό. • Color • Content. Type, Content. Types: οι τιμές αφορούν σε τύπους MIME. • Language. Code: RFC 1766 14

Κατηγορίες τιμών κατηγορημάτων HTML • Charset, Charsets: οι τιμές αυτές αφορούν κωδικοποιήσεις χαρακτήρων. Π. χ. ISO-8859 -1, SHIFT_JIS, and UTF-8. • Character: η τιμή αυτή αφορά σε έναν χαρακτήρα Unicode. • Datetime: η τιμή αυτή αφορά σε ημερομηνία σε μορφή: n YYYY-MM-DDThh: mm: ss. TZD n Το ΤΖ προσδιορίζει την χρονική ζώνη: • Z (case-sensitive), which indicates Universal Coordinated Time (UTC, basically the same as GMT); • +hh: mm, the time ahead of UTC in hours and minutes; • -hh: mm, the time behind UTC in hours and minutes. 15

Κατηγορίες τιμών κατηγορημάτων HTML • Media. Desc: screen (the default), for non-paged computer screens; tty, for fixed-pitch character grid displays (such as the display used by Lynx); tv, for television-type devices with low resolution and limited scrollability; projection, for projectors; handheld, for handheld devices (characterized by a small, monochrome display and limited bandwidth); print, for output to a printer; braille, for braille tactile feedback devices; aural, for speech synthesizers; all, for all devices. • Script: κλήσεις συναρτήσεων ή μικρές ακολουθίες εντολών που εκτελούνται στον πελάτη. • Style. Sheet: στυλ παρουσίασης • Frame. Target: n _blank renders the link in a new, unnamed window n _self renders the link in the current frame (useful for overriding a BASE TARGET) n _parent renders the link in the immediate FRAMESET parent n _top renders the link in the full, unframed window 16

Συνήθη Κατηγορήματα • Ένας αριθμός κατηγορημάτων της HTML 4. 0 είναι κοινός στα περισσότερα στοιχεία της γλώσσας. • Τα συνηθισμένα κατηγορήματα διαχωρίζονται σε: n Κοινά (core attributes) n Διεθνοποίησης (internationalization attributes) n Συμβάντα σκριπτ (scripting events) • Το DTD της ΗΤΜL 4. 0 χρησιμοποιεί οντότητες για τον καθορισμό των συνηθισμένων αυτών κατηγορημάτων της HTML 4. 0. • Η χρήση των οντοτήτων συνεπάγεται πιό σύντομα DTD. 17

Κοινά Κατηγορήματα • Ορισμός με οντότητα: <! ENTITY % COREATTRS “ID ID #IMPLIED CLASS CDATA #IMPLIED STYLE %STYLESHEET; #IMPLIED TITLE %TEXT; #IMPLIED”> 18

Κατηγόρημα ID • Ταυτίζει κατά μοναδικό τρόπο ένα στοιχείο HTML μέσα σε κάποιο έγγραφο. Δύο στοιχεία του ίδιου εγγράφου δεν μπορούν να έχουν το ίδιο ID. • Η τιμή του ID πρέπει να ξεκινά με ένα γράμμα στο διάστημα A-Z ή a-z και μπορεί να ακολουθείται από γράμματα (A-Za-z), ψηφία (0 -9), παύλες (”-"), underscores ("_"), άνω-και-κάτω τελείες (": "), και τελείες (". "). Π. χ: My first paragraph. My second paragaph. • Η ταυτότητα των παραγράφων στο παραπάνω παράδειγμα μπορεί να χρησιμοποιηθεί για τον καθορισμό κανόνων εμφάνισης γι’ αυτές ακριβώς τις παραγράφους. Π. χ. , το ακόλουθο Cascading Style Sheet καθορίζει χρώματα για τις δύο παραγράφους: P#firstp { color: navy; background: transparent } P#secondp { color: black; background: transparent } • Επίσης, η ταυτότητα ενός στοιχείου μπορεί να χρησιμοποιηθεί ώστε να καταστεί το στοιχείο απόληξη ενός υπερσυνδέσμου (οι περισσότεροι πλοηγοί δεν υποστηρίζουν αυτή τη δυνατότητα): See <A HREF="#firstp">the opening paragraph</A> for more information. 19

Κατηγόρημα CLASS • Προσδιορίζει ένα στοιχείο ως μέλος μιας ή περισσοτέρων κατηγοριών στοιχείων. Επιτρέπει στους συγγραφείς HTML να ορίζουν διαφορετικές κατηγορίες ενός συγκεκριμένου στοιχείου. Π. χ. : <CODE CLASS=Java> <CODE CLASS=Perl> • Πολλά στοιχεία μπορούν να ανήκουν στην ίδια CLASS και πολλές CLASS να χαρακτηρίζουν το ίδιο στοιχείο. • Οι περισσότεροι πλοηγοί δεν υποστηρίζουν πολλαπλές κλάσεις. Τα κατηγορήματα CLASS που αρχικοποιούνται με πολλές κλάσεις αγνοούνται. 20

Κατηγόρημα CLASS (συνέχεια) • Το CLASS είναι ιδιαίτερα χρήσιμο όταν συνδυάζεται με style sheets. Π. χ. : <DIV CLASS=navbar> <A href="http: //www. htmlhelp. com/">Home</A> | <A HREF=". /">Index</A> | <A href="http: //www. htmlhelp. com/search. html">Search</A> <A href="http: //www. htmlhelp. com/"> <IMG SRC="logo. gif" ALT="" TITLE="WDG Logo"> </A> </DIV> • Το ακόλουθο Cascading Style Sheet προτείνει μια παρουσίαση για τις παραπάνω παραγράφους: . navbar { margin-top: 2 em; padding-top: 1 em; border-top: solid thin navy }. navbar IMG { float: right } @media print {. navbar { display: none } } 21

Κατηγόρημα STYLE • Για απευθείας καθορισμό του μορφότυπου ενός στοιχείου. Επιτρέπει στους συγγραφείς HTML να καθορίζουν τον μορφότυπο ενός συγκεκριμένου στοιχείου HTML. Π. χ. : A popular font for on-screen reading is Verdana. • Όταν χρησιμοποιείται το κατηγόρημα STYLE, θα πρέπει να έχει προηγηθεί ο καθορισμός μιάς προσυμφωνημένης γλώσσας style sheet για το αντίστοιχο έγγραφο. • Ο καθορισμός αυτός γίνεται όταν αρχικοποιήσουμε την επικεφαλίδα Content. Style-Type του μηνύματος HTTP, με το οποίο μεταφέρεται το εν λόγω έγγραφο, στον τύπο MIME του χρησιμοποιούμενου style sheet language. • Αυτή η αρχικοποίηση γίνεται αυτόματα με την εισαγωγή στοιχείο HEAD του ακόλουθου στοιχείου ΜΕΤΑ: <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> • Ο καθορισμός της εμφάνισης μέσω των κατηγορημάτων CLASS ή ID είναι προτιμότερος γιατί τα ID και CLASS μπορούν επιλεκτικά να εφαρμοστούν σε διαφορετικούς τύπους και επιπλέον επιτρέπουν τον διαχωρισμό περιεχομένου από την παρουσίαση του. 22

Κατηγόρημα TITLE • Χρησιμοποιείται για την ανάθεση ενός τίτλου σε κάποιο στοιχείο HTML. • Ο τίτλος αυτός μπορεί να φανεί χρήσιμος σε συστήματα πλοηγών, αν και τα περισσότερα δεν υποστηρίζουν το κατηγόρημα TITLE. <A HREF="mailto: liam@htmlhelp. com" TITLE="Feedback on HTML 4. 0 Reference">liam@htmlhelp. com</A> <A HREF="http: //www. genome. wi. mit. edu/ftp/pub/soft/WWW/cgi_docs. html" TITLE="CGI. pm - a Perl 5 CGI Library">CGI. pm</A> <LINK REL=Alternate HREF="index. fr. html" HREFLANG=fr TITLE="Version franηaise"> <IMG SRC="yahtzee. gif" ALT="" TITLE="A Yahtzee animation"> Yahtzee is my favorite game! • Επίσης, είναι χρήσιμο με τα στοιχεία ABBR και ACRONYM: <ABBR TITLE="Parti Quιbιcois" LANG=fr-CA>PQ</ABBR> <ACRONYM TITLE="North Atlantic Treaty Org. ">NATO</ACRONYM> 23

Κατηγορήματα Δήλωσης Γλώσσας • Για την δήλωση της γλώσσας στην οποία είναι γραμμένο ένα έγγραφο. <!ENTITY % I 18 N “LANG %LANGUAGECODE; #IMPLIED DIR (LTR|RTL) #IMPLIED”> • I 18 N internationalization • Χρησιμότητα γιά: n Υποβοήθηση μηχανών αναζήτησης n Υποβοήθηση συνθετών φωνής (speech synthesizers) n Υποβοήθηση συστημάτων πελάτη για ορθή κωδικοποίηση εισαγωγικών, γραμματικών κανόνων κλπ. 24

Κατηγόρημα LANG • Καθορίζει την γλώσσα στην οποία είναι γραμμένα τα περιεχόμενα και στην οποία ορίζονται τα κατηγορήματα ενός στοιχείου, συμπεριλαμβανομένων και όλων των στοιχείων-απογόνων στα οποία δεν καθορίζεται το LANG. • Η κωδικοποίηση των γλωσσών γίνεται σύμφωνα με το RFC 1766. Π. χ. : en για Αγγλικά, en-US για Αμερικανικά-Αγγλικά, ja για Ιαπωνέζικα κλπ • Η χρήση του κατηγορήματος LANG διευκολύνει την διαφορετική παρουσίαση κειμένων που βρίσκονται στο ίδιο έγγραφο αλλά σε διαφορετικές γλώσσες. <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0//EN" "http: //www. w 3. org/TR/REC-html 40/strict. dtd"> <TITLE>Welcome - Bienvenue</TITLE> <H 1> Welcome Bienvenue</H 1> This paragraph is in English. Ce paragraphe est en franηais. • Η βασική γλώσσα ενός εγγράφου μπορεί να καθοριστεί με το κατηγόρημα LANG του στοιχείου HTML ή με την επικεφαλίδα Content-Language του HTTP. 25

Κατηγόρημα DIR • Καθορίζει την διεύθυνση ανάγνωσης του κειμένου: n DIR=ltr n DIR=rtl 26

Κατηγορήματα διαχείρισης συμβάντων • Πρόκειται για κατηγορήματα τα οποία χρησιμοποιούνται ως «άγκιστρα» για την σύνδεση προγραμμάτων σκρίπτ με ορισμένα συμβάντα στο πρόγραμμα του πλοηγού. <!ENTITY % EVENTS “ONCLICK %SCRIPT #IMPLIED ONDBLCLICK%SCRIPT #IMPLIED ONMOUSEDOWN %SCRIPT #IMPLIED ONMOUSEUP%SCRIPT #IMPLIED ONMOUSEOVER %SCRIPT #IMPLIED ONMOUSEOUT %SCRIPT #IMPLIED ONKEYPRESS %SCRIPT #IMPLIED” > 27

Κατηγορήματα διαχείρισης συμβάντων • Για πολλά στοιχεία HTML καθορίζεται αριθμός από κατηγορήματα, τα οποία «προσδένουν» συμβάντα στο σύστημα διαπροσωπείας του πελάτη με σκριπτ που εκτελούνται στην μεριά του πελάτη. • Οι «τιμές» των κατηγορημάτων είναι σκριπτ – δηλαδή κλήσεις συναρτήσεων ή μικρής σειράς από εντολές – που εκτελούνται όταν λάβει χώρα το καθοριζόμενο συμβάν. • Το ακόλουθο παράδειγμα δίνει κώδικα Java. Script για διαχείριση δύο συμβάντων σε ένα κομβίο αποστολής (submit button). <INPUT TYPE=submit ONMOUSEOVER='window. status="Did you fill in all required fields? "; ' ONMOUSEOUT='window. status=""; '> • Όταν ο δρομέας περάσει πάνω από το κομβίο αποστολής, το σκριπτ δίνει μήνυμα υπενθύμισης, το οποίο σβύνεται όταν ο δρομέας φύγει από το κομβίο. • Αν χρησιμοποιηθεί κατηγόρημα αυτής της μορφής, θα πρέπει να έχει προσδιορισθεί πριν η προτιμούμενη γλώσσα σκριπτ, μέσω της επικεφαλίδας Content-Script-Type του HTTP: <META HTTP-EQUIV="Content-Script-Type” CONTENT="text/javascript"> 28

Χρήση συνήθων κατηγορημάτων <!ΕΝΤΙΤΥ % ATTRS “%COREATTRS; %I 18 N; %EVENTS; ” > • Η οντότητα αυτή συγκεντρώνει κατηγορήματα που είναι κοινά σε πολλά στοιχεία της HTML, και μπορεί να χρησιμοποιηθεί στις δηλώσεις τους. Π. χ. : <!ELEMENT LINK - 0 EMPTY> <!ATTLIST LINK %ATTRS; CHARSET %CHARSET; #IMPLIED HREF %URI; #IMPLIED HREFLANG %LANGUAGECODE; #IMPLIED TYPE %CONTENTTYPE; #IMPLIED REL %LINKTYPES; #IMPLIED REV %LINKTYPES; #IMPLIED MEDIA %MEDIADESC; #IMPLIED TARGET %FRAMETARGET; #IMPLIED > 29

Βασική Δομή HTML εγγράφων <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0//EN" "http: //www. w 3. org/TR/REC-html 40/strict. dtd"> <HTML> <HEAD><TITLE>The document title</TITLE></HEAD> <BODY> <H 1>Main heading</H 1> Example of a simple HTML document. You can also insert undordered lists. Another paragraph. <UL> <LI>A list item. </LI> <LI>Another list item. </LI> </UL> </BODY> </HTML> 30

Βασική Δομή HTML εγγράφων • Το πρώτο πράγμα ο καθορισμός της έκδοσης της HTML που χρησιμοποιείται: <!DOCTYPE HTML PUBLIC “-//W 3 C//DTD HTML 4. 0//EN” “http: //www. w 3. org/TR/REC-html 40/strict. dtd”> <HTML> Document <HEAD> Document <BODY> 31

Βασικά στοιχεία HTML <HTML> </HTML> Ο σημαντήρας αυτός είναι το εξώτερο στοιχείο ενός υπερκειμένου HTML και σηματοδοτεί την ύπαρξη κώδικα HTML. Το πεδίο του σημαντήρα <ΗΤΜL> περικλείει τα δύο στοιχεία της δομής του κώδικα HTML: n Την επικεφαλίδα, η οποία περιέχει πληροφορίες σχετικές με το υπερκείμενο, όπως τίτλο, λέξεις κλειδιά, κλπ. n Το κυρίως περιεχόμενο, που περιλαμβάνει τα στοιχεία που στοιχειοθετούνται και αναπαρίστανται στην οθόνη ενός φυλλομετρητή. 32

Ιεραρχική Δομή Αρχείου HTML <HTML> <HEAD> <TITLE> <BODY> <H 1> <UL> <LI> 33

Επικεφαλίδα Εγγράφου HTML: το στοιχείο HEAD • Περιλαμβάνει πληροφορίες για το έγγραφο, όπως τον τίτλο του, λέξεις κλειδιά, περιγραφή και το style sheet που μπορεί να χρησιμοποιηθεί για την μορφοτύπησή του. • Η χρήση του στοιχείου HEAD είναι υποχρεωτική, αλλά η χρήση εναρκτήριου και καταληκτικού σημαντήρα είναι προαιρετική. • Το στοιχείο HEAD ακολουθείται από το στοιχείο BODY στην HTML 4. 0 Strict και στην HTML 4. 0 Transitional. Σε έγγραφα HTML 4. 0 Frameset, του HEAD έπεται το στοιχείο FRAMESET. • Τα περιεχόμενα του HEAD δεν εμφανίζονται στην οθόνη του πλοηγού, με εξαίρεση τον τίτλο (TITLE). • Αν παραλείψουμε το </HEAD>, το τέλος του στοιχείου HEAD συνάγεται από τον σημαντήρα BODY ή FRAMESET. • Το προαιρετικό κατηγόρημα PROFILE του HEAD παραπέμπει σε αρχείο με μεταδεδομένα του εγγράφου, το οποίο καθορίζει ιδιότητες που μπορούν να χρησιμοποιηθούν από τα κατηγορήματα META και LINK του HEAD. • Για τον καθορισμό μεταδεδομένων μπορεί να χρησιμοποιηθεί η προδιαγραφή RDF. 34

Επικεφαλίδα (HEAD) • Οι πληροφορίες αυτές χρησιμοποιούνται από αυτοματοποιημένα συστήματα πελατών (π. χ. Μηχανές αναζήτησης). • Γραμματική: <!ELEMENT HEAD 0 0 (TITLE & BASE? ) +(%HEAD. MISC; )> <!ATTLIST HEAD Inclusion %I 18 N; Tag omission PROFILE %URI; #IMPLIED > • Η οντότητα %HEAD. MISC επιτρέπει την εισαγωγή στοιχείων <SCRIPT>, <STYLE>, <META>, <LINK>, <OBJECT>. 35

Στοιχεία Επικεφαλίδας HTML • TITLE • BASE • STYLE • LINK • META • SCRIPT • OBJECT 36

Στοιχείο επικεφαλίδας: ΤΙTLE • Περικλείει τον τίτλο του εγγράφου HTML. • Εμφανίζεται στο παράθυρο του φυλλομετρητή κατά την αναπαραγωγή του εγγράφου (συνήθως στο άνω πλαίσιο). • Αποθηκεύεται και εμφανίζεται στα αρχεία σελιδοδεικτών (bookmarks). • Χρησιμοποιείται κατά την διαδικασία αναζήτησης-ευρετηρίασης των ιστοσελίδων ενός διαθέτη μηχανές αναζήτησης. • Ο τίτλος πρέπει να είναι ευσύνοπτος και περιεκτικός. 37

Στοιχείο επικεφαλίδας: BASE • «Άδειο» στοιχείο, εντάσσεται στα περιεχόμενα του HEAD. Καθορίζει το URI βάσης, το οποίο μπορεί να χρησιμοποιηθεί για την «επίλυση» των σχετικών URI που υπάρχουν μέσα στο έγγραφο ΗΤΜL. • Οι περισσότερες ιστοσελίδες δεν χρειάζονται ρητή δήλωση του URI βάσης τους καθώς το δικό τους URI αποτελεί το προφανές URI βάσης για ενδεχόμενα σχετικά URI. • Η ρητή δήλωση ενός URI βάσης είναι αναγκαία όταν το ίδιο έγγραφο μπορεί να ανακτηθεί από διαφορετικά URI και όταν κάποιο έγγραφο HTML αποστέλλεται μέσω π. χ. Email. • Κατηγορήματα: n HREF=URI (base URI reference) n TARGET=Frame. Target (frame to render links in) 38

Το στοιχείο επικεφαλίδας: STYLE • Τα stylesheets χρησιμοποιούνται στην HTML 4. 0 για να καθορίσουν τις κατευθυντήριες γραμμές όσον αφορά την μορφοτύπηση (παρουσίαση) εγγράφων. • Ένας από τους μηχανισμούς για τον καθορισμό των stylesheets παρέχεται από το στοιχείο STYLE, το οποίο εισάγεται στην επικεφαλίδα ενός εγγράφου. Το STYLE έχει την ακόλουθη γραμματική: <!ELEMENT STYLE - - %STYLESHEET; > <!ATTLIST STYLE %I 18 N; %CONTENTTYPE; #REQUIRED MEDIA %MEDIADESC; #IMPLIED TITLE %TEXT; #IMPLIED> 39

Το στοιχείο επικεφαλίδας: STYLE (συνέχεια) • Χρησιμοποιείται για την ενσωμάτωση (inlining) ενός style sheet σε ένα έγγραφο HTML. Εντάσσεται στα περιεχόμενα του στοιχείου HEAD. Στο περιεχόμενο του στοιχείου STYLE ενσωματώνεται ένα style sheet. • Κατηγορήματα: n TYPE=Content. Type (content-type of style language) n MEDIA=Media. Desc (media to apply style to) n TITLE=Text (title of style sheet) n LANG, DIR: internationalization attributes (for the TITLE) <STYLE TYPE="text/css" MEDIA=screen>  </STYLE> 40

Το στοιχείο επικεφαλίδας STYLE: TYPE και TITLE • Το (υποχρεωτικό) κατηγόρημα TYPE καθορίζει τον MIME τύπο της γλώσσας μορφοτύπησης (style language). Για Cascading Style Sheets, η τιμή του TYPE είναι text/css. • Το προαιρετικό κατηγόρημα TITLE δίνει κάποιο όνομα στο style sheet. Χωρίς όνομα, το style sheet εφαρμόζεται κάθε φορά που τα style sheets είναι ενεργοποιημένα. Με την ύπαρξη ονόματος, το style sheet εφαρμόζεται αυτόματα αλλά ο χρήστης μπορεί να επιλέξει να το απενεργοποιήσει. • Οι περισσότεροι πλοηγοί αγνοούν το κατηγόρημα TITLE. 41

Το στοιχείο επικεφαλίδας STYLE: MEDIA • Το κατηγόρημα MEDIA καθορίζει το μέσο στο οποίο πρέπει να εφαρμοστεί ένα style sheet. Έτσι ο συγγραφέας μπορεί να περιορίσει ένα style sheet σε συγκεκριμένες συσκευές εξόδου, όπως εκτυπωτές ή ηχητικούς πλοηγούς (aural browsers). • Το κατηγόρημα δέχεται ως τιμή μια λίστα από περιγραφείς μέσων: n screen (the default), for non-paged computer screens; tty, for fixed-pitch character grid displays (such as the display used by Lynx); tv, for television-type devices with low resolution and limited scrollability; projection, for projectors; handheld, for handheld devices (characterized by a small, monochrome display and limited bandwidth); print, for output to a printer; braille, for braille tactile feedback devices; aural, for speech synthesizers; all, for all devices. • Τα ενσωματωμένα style sheet πρέπει να χρησιμοποιούνται σε κάποιο συγκεκριμένο έγγραφο που έχει μοναδικό τρόπο παρουσίασης. Σε περίπτωση ομάδος εγγράφων που έχουν κοινή παρουσίαση είναι προτιμότερο να χρησιμοποιείται εξωτερικό style sheet. 42

Tο στοιχείο LINK της επικεφαλίδας HEAD • «Άδειο» στοιχείο. Πληροφορίες που αφορούν το στοιχείο αυτό ορίζονται στα κατηγορήματά του. • Προσδιορίζει συσχετίσεις ανάμεσα στο έγγραφο στο οποίο ενσωματώνεται και σε έναν αριθμό άλλων εγγράφων. • Στην επικεφαλίδα (HEAD) ενός αρχείου HTML μπορούμε να εντάξουμε έναν οποιονδήποτε αριθμό από στοιχεία LINK. • Οι περισσότεροι πλοηγοί δεν υποστηρίζουν το LINK, γι’ αυτό και οι συγγραφείς εφαρμογών HTML δεν πρέπει να θεωρούν ότι η χρήση του εξασφαλίζει την εμφάνιση των αντίστοιχων υπερσυνδέσμων στους χρήστες μέσω της διαπροσωπείας των πλοηγών. • Η χρήση των LINK γίνεται κυρίως για την διασύνδεση με αρχεία stylesheets. • Μελλοντικά το LINK μπορεί να χρησιμοποιηθεί για την έκφραση σημασιολογικών συσχετίσεων ανάμεσα σε έγγραφα. 43

Η σύνταξη του LINK <!ELEMENT LINK <!ATTLIST LINK %ATTRS; CHARSET HREFLANG TYPE REL REV MEDIA TARGET - 0 EMPTY> %CHARSET; #IMPLIED %URI; #IMPLIED %LANGUAGECODE; #IMPLIED %CONTENTTYPE; #IMPLIED %LINKTYPES; #IMPLIED %MEDIADESC; #IMPLIED %FRAMETARGET; #IMPLIED > 44

Κατηγορήματα LINK • CHARSET: Καθορίζει το αλφάβητο που χρησιμοποιείται στο έγγραφο απόληξης του LINK. • HREF: Καθορίζει το URI του συνδέσμου. • TYPE: Καθορίζει τον τύπο του περιεχομένου της απόληξης. Επιτρεπόμενες τιμές ορίζονται από την οντότητα %CONTENTTYPE. • REL: Προσδιορίζει την σχέση ανάμεσα στο τρέχον έγγραφο και την απόληξή του. Επιτρεπόμενες τιμές ορίζονται από την οντότητα %LINKTYPES. • REV: Προσδιορίζει την σχέση ανάμεσα στην απόληξή του LINK και στο τρέχον έγγραφο. Επιτρεπόμενες τιμές ορίζονται από την οντότητα %LINKTYPES. • MEDIA: Χρησιμοποιείται για να καθορίσει τον τύπο του μέσου (media type) για τον οποίο προαλείφεται το έγγραφο στο οποίο παραπέμπει το LINK. Με αυτό τον τρόπο επιτρέπουμε τη χρήση διαφορετικών media types για διαφορετικά stylesheets. • HREFLANG=Language. Code (language of link) • TARGET=Frame. Target (frame to render link in) 45

Link. Types στην ΗΤΜL • Link. Types: η τιμές τους αφορούν σε λίστα από κατηγορίες συνδέσμων. • Οι ακόλουθες κατηγορίες συνδέσμων ορίζονται στην HTML 4. 0, αν και οι συγγραφείς μπορούν να ορίσουν και άλλους τύπους: n Alternate: υποδηλώνει μια εναλλακτική έκδοση του εγγράφου. Όταν χρησιμοποιείται σε συνδυασμό με το κατηγόρημα HREFLANG του στοιχείου LINK, υπονοεί την παραπομπή σε μετάφραση του εγγράφου n Style. Sheet: υποδηλώνει παραπομπή σε εξωτερικό style sheet του εγγράφου. n Start specifies the first document in a collection. n Next specifies the next document in a suggested sequence of reading. Browsers such as Web. TV will preload documents identified as "next" to improve the perceived load time. n Prev specifies the previous document in a suggested sequence of reading. n Contents specifies a table of contents for the document. 46

Link. Types στην ΗΤΜL • • • Index gives an index for the document. Glossary gives a glossary of terms used in the document. Copyright specifies a document with copyright information. Chapter specifies the chapter of a collection of documents. Section specifies the section of a collection of documents. Subsection specifies a subsection of a collection of documents. Appendix gives an appendix for the collection of documents. Help specifies a help document. Bookmark refers to a key related document. The TITLE attribute provides a label for the bookmark. • Made link type, widely used as <LINK REV=Made HREF="mailto: liam@htmlhelp. com"> to provide a contact link for the document author, is notably missing from the list of link types defined in HTML 4. 0. 47

Κατηγορήματα REL και REV • Καθορίζουν την φύση της συσχέτισης ανάμεσα στο έγγραφο που περιλαμβάνει το στοιχείο LINK και τον πόρο προς τον οποίο το LINK παραπέμπει: n REL περιγράφει την συσχέτιση από το έγγραφο προς τον πόρο n REV περιγράφει την συσχέτιση από τον πόρο προς το έγγραφο • Π. χ. : n n <LINK REL=Index HREF=“index. html"> <LINK REV=Subsection HREF=“file. html"> • Συνηθισμένες συσχετίσεις είναι το επόμενο ή το προηγούμενο έγγραφο σε μια σειριακή ακολουθία εγγράφων, ένα έγγραφο με πληροφορίες copyright ή πληροφορίες για τον συγγραφέα. n n n <LINK REL=Prev HREF="base. html" TITLE="BASE - Document Base URI"> <LINK REL=Next HREF="meta. html" TITLE="META - Metadata"> <LINK REL=Copyright href="http: //www. htmlhelp. com/copyright. html" TITLE="Copyright Notice"> 48

Η χρήση του LINK για σύνδεση με style sheets • To LINK μπορεί να χρησιμοποιηθεί για την εφαρμογή ενός εξωτερικού style sheet σε κάποιο έγγραφο. • Το REL=Style. Sheet προσδιορίζει διασύνδεση με προτιμητέο style ενώ REL="Alternate Style. Sheet" προσδιορίζει διασύνδεση με εναλλακτικό style. • Το προτιμητέο style είναι αυτό που εφαρμόζεται αυτόματα σε ένα έγγραφο HTML. Το προτιμητέο style καθορίζεται από τον συνδυασμό του REL=Style. Sheet και του κατηγορήματος TITLE. • Το style ενός εγγράφου μπορεί να καθοριστεί μέσω πολλών style sheets: n <LINK REL=Style. Sheet HREF="basics. css" TITLE="Contemporary" TYPE="text/css"> n <LINK REL=Style. Sheet HREF="tables. css" TITLE="Contemporary" TYPE="text/css"> n <LINK REL=Style. Sheet HREF="forms. css" TITLE="Contemporary" TYPE="text/css"> • Στο παράδειγμα αυτό, τρία style sheets συνδυάζονται σε ένα "Contemporary" style που προσδιορίζεται ως το προτιμητέο style. 49

Το κατηγόρημα MEDIA του LINK • Καθορίζει το μέσο για το οποίο έχει σχεδιασθεί το έγγραφο της παραπομπής. • Το κατηγόρημα δέχεται ως τιμή μια λίστα από περιγραφείς μέσων: n screen (the default), for non-paged computer screens; tty, for fixed-pitch character grid displays (such as the display used by Lynx); tv, for television-type devices with low resolution and limited scrollability; projection, for projectors; handheld, for handheld devices (characterized by a small, monochrome display and limited bandwidth); print, for output to a printer; braille, for braille tactile feedback devices; aural, for speech synthesizers; all, for all devices. • Με τον συνδυασμό αυτού με το REL=Style. Sheet, ο συγγραφέας μπορεί να περιορίσει ένα style sheet για συγκεκριμένες τερματικές συσκευές. 50

Άλλα κατηγορήματα LINK • HREFLANG και CHARSET: προαιρετικά κατηγορήματα που προσδιορίζουν την κωδικοποίηση της παραπομπής σε γλώσσα και χαρακτήρες. • Χρησιμοποιούνται και σε συνδυασμό με την τιμή Alternate η οποία μπορεί να δοθεί στο κατηγόρημα REL: <LINK REL=Alternate HREF="index. fr. html" HREFLANG=fr TITLE="Version franηaise"> <LINK REL=Alternate HREF="index. ja. html" HREFLANG=ja CHARSET="SHIFT_JIS" TITLE="Japanese version"> <LINK REL=Alternate href="http: //www. htmlhelp. com/distribution/html 40. pdf" TYPE="application/pdf" MEDIA=print TITLE="PDF version"> 51

Μεταπληροφορίες Εγγράφων HTML • Μετα-πληροφορίες: το σύνολο των πληροφοριών που αφορούν κάποιο έγγραφο. Προσδιορίζονται από τα περιεχόμενα και τα κατηγορήματα του στοιχείου HEAD. • Το στοιχείο META της επικεφαλίδας χρησιμοποιείται σαν ένας γενικός μηχανισμός για την υποδήλωση και τον προσδιορισμό μεταπληροφοριών ενός εγγράφου: λέξεις κλειδιά, περιγραφή εγγράφου, όνομα συγγραφέα, κλπ. <!ELEMENT META - 0 EMPTY> <!ATTLIST META %I 18 N; HTTP-EQUIV NAME #IMPLIED CONTENT CDATA #REQUIRED SCHEME CDATA #IMPLIED> 52

Στοιχεία Επικεφαλλίδας HTML • TITLE • BASE • STYLE • LINK • META • SCRIPT 53

Κατηγορήματα του στοιχείου ΜΕΤΑ • NAME: προσδιορίζει το όνομα της ιδιότητας, το περιεχόμενο της οποίας προσδιορίζεται με το κατηγόρημα CONTENT. • Η τιμή του CONTENT μπορεί να συμπεριλαμβάνει κείμενο και οντότητες αλλ’ όχι σημαντήρες HTML. • Το προαιρετικο κατηγόρημα SCHEME καθορίζει τον μορφότυπο της τιμής του CONTENT. Π. χ. SCHEME="Month-Day-Year” αντί SCHEME="Day-Month-Year". • Δεν υπάρχει στάνταρντ λίστα από ιδιότητες META. Επαφίεται στον συγγραφέα να καθορίσει τις δικές του: <META NAME=author CONTENT="Liam Quinn"> 54

Η χρήση του ΜΕΤΑ από μηχανές αναζήτησης • Τα στοιχεία του META χρησιμοποιούνται συχνά από μηχανές αναζήτησης: <META NAME="description" CONTENT="A description of HTML 4. 0's META element for metadata. "> <META NAME="keywords" CONTENT="META, meta element, metadata, metainformation, meta data, meta information, keywords, description, refresh, Hyper. Text Markup Language, HTML 4, HTML 4. 0, Web Design Group, WDG, < meta> tag, < META> tag"> • Η περιγραφή που ορίζεται στο Content πρέπει να είναι σύντομη, για να μην περικόπτεται από τις μηχανές αναζήτησης. • Λέξεις κλειδιά χωρίζονται με κόμματα και μπορούν να είναι case sensitive για τις μηχανές αναζήτησης. • Συνήθως, οι μηχανές αναζήτησης επεξεργάζονται τους πρώτους 1000 χαρακτήρες από τον κατάλογο λέξεων κλειδιών. 55

Η χρήση του ΜΕΤΑ από μηχανές αναζήτησης • Ορισμένες μηχανές αναζήτησης υποστηρίζουν μια πρόταση για τον έλεγχο των μηχανών αναζήτησης (Web Robots Control). • Σύμφωνα με την πρόταση αυτή, το περιεχόμενο του CONTENT μπορεί να υποδείξει το βαθμό ευρετηριασμού ενός εγγράφου HTML. • Στην περίπτωση αυτή, το περιεχόμενο του CONTENT περιλαμβάνει οδηγίες μεταξύ των ακολούθων, προς τις αυτόματες μηχανές αναζήτησης: n index specifies that the page should be indexed while noindex specifies that it should not be indexed; n follow specifies that the page's links should be followed while nofollow specifies that they should not be followed; n all is equivalent to index, follow (the default value); n none is equivalent to noindex, nofollow. • Π. χ. , η ακόλουθη οδηγία προσδιορίζει ότι μια σελίδα δεν θα ευρετηριασθεί, αλλά θα ακολουθηθούν οι υπερσύνδεσμοί της: <META NAME=robots CONTENT="noindex, follow"> 56

Κατηγόρημα HTTP-EQUIV • Χρησιμοποιείται στη θέση του NAME. Ορισμένοι Δ/Θ εντάσσουν το CONTENT που ακολουθεί στην επικεφαλίδα HTTP του μηνύματος που μεταφέρει το έγγραφο HTML. Ακόμη κι αν δεν συμβεί αυτό, τα συστήματα πελάτη ερμηνεύουν την τιμή του CONTENT σαν να ανήκε στην επικεφαλίδα HTTP της απάντησης του Δ/Θ. Π. χ. : <META HTTP-EQUIV=Expires CONTENT="Sun, 22 Mar 1998 16: 18: 35 GMT"> n προσδιορίζει την λήξη του εγγράφου <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> n καθορίζει την γλώσσα σκριπτ στην πλευρά του πελάτη σε Java. Script <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> n προσδιορίζει τη γλώσσα ενσωματωμένων style sheet σε CSS. <META HTTP-EQUIV=Refresh CONTENT="10; URL=http: //www. htmlhelp. com/"> n Κατευθύνει τον πλοηγό να φορτώσει τη σελίδα http: //www. htmlhelp. com/ 10 δευτερόλεπτα μετά το πέρας του φορτώματος της τρέχουσας σελίδας. 57

SCRIPT • Με το στοιχείο SCRIPT μπορούμε να ορίσουμε σκριπτ προς χρήση στην ιστοσελίδα μας. • Το σκρίπτ είτε εντάσσεται στο σώμα του στοιχείου SCRIPT είτε καθορίζεται μέσω παραπομπής από το κατηγόρημα SRC του στοιχείου. <!ELEMENT SCRIPT - - %SCRIPT; > <!ATTLIST SCRIPT CHARSET %CHARSET; #IMPLIED TYPE %CONTENTTYPE; #REQUIRED LANGUAGE CDATA #IMPLIED SRC %URI #IMPLIED DEFER (DEFER) #IMPLIED EVENT CDATA #IMPLIED FOR %URI #IMPLIED > 58

Скачать презентацию ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΕΠΛ 425 Ανασκόπηση

19ed3cbcee10f389ff66f2edc29d9f41.ppt

Количество слайдов: 58