Μάθηµα 3 Περισσότερα για τη γλώσσα Περισσότερα για τη γλώσσα HTML
Περιεχόµενα Επικεφαλίδες (Headings) Παράγραφοι Λίστες Μορφοποίηση κειµένου Σύνδεσµοι
Επικεφαλίδες (Headings) Οι επικεφαλίδες επιτελούν τον ίδιο σκοπό όπως και σε ένα βιβλίο: καθοδηγούν τον αναγνώστη - εδώ το χρήστη - δείχνοντάς του τόσο τη δοµή της τρέχουσας σελίδας, όσο και αυτών που έπονται. Η HTML ορίζει 6 επίπεδα (µεγέθη) επικεφαλίδων. Τα tags των επικεφαλίδων συντάσσονται ως εξής: <H1>Heading level one</h1> Η µεγαλύτερη σε µέγεθος επικεφαλίδα είναι η <H1>, ακολουθούµενη από τις <H2>...<H6>.
Παράδειγµα εγγραφής επικεφαλίδων N o t e p a d Explorer
Παράγραφοι (Paragraph) Τα tag παραγράφων συντάσσονται ως εξής: <P>.</P> Το <P> υποδεικνύει την αρχή της παραγράφου ενώ το </P> tag τέλους είναι προαιρετικό. Netscape N o t e p a d
Λίστες (Lists) (1/4) Η HTML ορίζει τρία είδη λιστών: Αριθµηµένες λίστες (numbered ή ordered lists) Λίστες χωρίς αρίθµηση (bulleted ή unordered lists) Λίστες ορισµού ή (definitions lists)
Λίστες (Lists) (2/4) Αριθµηµένες λίστες(numbered ή ordered lists) Με τη λίστα αυτή δηµιουργούµε κατευθείαν µια λίστα από αριθµηµένα στοιχεία. Κάθε αριθµηµένη λίστα ξεκινά µε το tag <ol> ενώ το περιεχόµενο κάθε στοιχείου της λίστας ξεκινά µε το tag <li>. Κλείνουν αντίστοιχα µε </ol> και </li>. Explorer N o t e p a d
Λίστες (Lists) (3/4) Λίστες χωρίς αρίθµηση(bulleted ή unordered lists) Αυτή η λίστα εµφανίζει τα στοιχεία της µε βούλες (bullets). Κάθε µη αριθµηµένη λίστα ξεκινά µε το tag <ul> ενώ το περιεχόµενο του κάθε στοιχείου της λίστας ξεκινά µε το tag <li>. Κλείνουν αντίστοιχα µε </ul> και </li>. Mozilla Firefox N o t e p a d
Λίστες (Lists) (4/4) Λίστες ορισµού ή (definitions lists) Τις χρησιµοποιούµε εάν θέλουµε να ορίσουµε την έννοια µιας σειράς δεδοµένων. Κάθε λίστα αυτής της µορφής ξεκινά µε το tag <dl>. Το tag <dt> δηλώνει τον ορισµό του κάθε όρου και το <dd> την εξήγηση του Opera N o t e p a d
Μορφοποίηση κειµένου Στυλ χαρακτήρων Λογικά στυλ Φυσικά στυλ Προ-µορφοποιηµένο κείµενο Στοίχιση κειµένου Καθορισµός χαρακτηριστικών γραµµατοσειράς ιάφορα άλλα στοιχεία κειµένου
Μορφοποίηση κειµένου: Στυλ Χαρακτήρων Λογικά Στυλ Υποδεικνύουν τον τρόπο χρήσης ενός κειµένου (έµφαση, ορισµοί, αποσπάσµατα) Η εµφάνιση ενός τέτοιου κειµένου καθορίζεται επακριβώς από τον φυλλοµετρητή. Φυσικά Στυλ Υποδεικνύουν επακριβώς τον τρόπο µορφοποίησης του κειµένου(π.χ έντονη γραφή, υπογράµµιση) Η απεικόνισή τους δεν καθορίζεται από το φυλλοµετρητή. Χρησιµοποιούνται στην πράξη περισσότερο από ότι τα λογικά στυλ.
Στυλ χαρακτήρων: Λογικά στυλ (1/2) Υπάρχουν 8 tags λογικού στυλ: <EM>: Έµφαση <STRONG>: Έντονη γραφή. <DFN> : Ορισµός. <CODE>: είγµα κώδικα. <SAMP>: Κείµενο παραδείγµατος. <KBD>: Εισαγωγή κειµένου από το χρήστη. <VAR> : Όνοµα µεταβλητής. <CITE> : Απόσπασµα ή παραποµπή.
Στυλ χαρακτήρων: Λογικά στυλ (2/2) Παράδειγµα χρήσης λογικών στυλ: Explorer N o t e p a d
Στυλ χαρακτήρων: Φυσικά Στυλ (1/2) Υπάρχουν 9 tags φυσικού στυλ: <B> : Έντονη γραφή (Bold) <I> : Πλάγια γραφή (Italic) <TT> : Γραµµατοσειρά παρόµοια µε γραφοµηχανής <BIG> : µεγαλύτερο µέγεθος από το περιβάλλον κείµενο <SMALL> : Μικρότερο µέγεθος <SUB> : είκτες <SUP> : Εκθέτες <DEL> : ιακριτή διαγραφή (Strike Through) Προσοχή: Το tag: <U> : Υπογράµµιση (underline) δεν συνίσταται από τα πρότυπα HTML 4.01 και XHTML 1,γιατί οι χρήστες συγχέουν το υπογραµµισµένο κείµενο µε υπερσύνδεσµο (hyperlink).
Στυλ χαρακτήρων: Φυσικά Στυλ (2/2) Παράδειγµα απεικόνισης Mozilla Firefox Notepad
Λογικά και φυσικά στυλ - ιαφορες To αποτέλεσµα χρήσης λογικών και φυσικών στυλ µοιάζει το ιδιο, ωστόσο υπάρχουν διαφορές: Παραδειγµα: Bold: Ιδια απεικονιση σε ολους τους φυλλοµετρητες. Strong: Ενδεχοµένως διαφορετική απεικόνιση. Ωστόσο εδώ δηλώνουµε στο φυλλοµετρητή ότι πρόκειται για έντονο κείµενο διευκόλυνση προγραµµάτων ανάγνωσης οθόνης.σ
Μορφοποίηση κειµένου: Προ-µορφοποιηµένο κείµενο Προ-µορφοποιηµένο κείµενο: Κείµενο η εµφάνιση του οποίου διατηρείται όπως ακριβώς γράφεται, χωρίς να αγνοούνται τα κενά. ηµιουργείται µε χρήση του tag <PRE>...</PRE>. Απεικονίζεται µέσω µίας µη αναλογικής γραµµατοσειράς (π.χ courier). Κατάλληλο για : ηµιουργία εσοχών στο κείµενο ηµιουργία απλών πινάκων Εισαγωγή αποσπασµάτων κώδικα Μετατροπή µηνυµάτων ηλεκτρονικού ταχυδροµείου απευθείας σε HTML κώδικα.
Μορφοποίηση κειµένου: Προ-µορφοποιηµένο κείµενο Προσοχή : Εµφωλευµένα στο tag PRE µπορούν να είναι tags συνδέσµων ή αλλαγής του στυλ χαρακτήρων, αλλά όχι tags χαρακτηρισµού στοιχείων (επικεφαλίδες, παράγραφοι). Προτείνεται : Η χρήση κενών διαστηµάτων αντί στηλοθετών (tab). Η κάθε γραµµή να είναι µήκους 60 ή λιγότερων χαρακτήρων.
Μορφοποίηση κειµένου: Προ-µορφοποιηµένο κείµενο Παράδειγµα: Internet Explorer Notepad
Μορφοποίηση κειµένου: Στοίχιση Κειµένου Στοίχιση κειµένου: Η ακριβής διευθέτηση της θέσης του κειµένου σε µία ιστοσελίδα. Η στοίχιση γίνεται ως προς το αριστερό ή το δεξί περιθώριο, καθώς και ως προς το κέντρο της σελίδας. Περιλαµβάνει: Στοίχιση Μεµονωµένων Στοιχείων. Στοίχιση Οµάδων Στοιχείων.
Στοίχιση Κειµένου: Στοίχιση Μεµονωµένων Στοιχείων Στοίχιση µεµονωµένου HTML στοιχείου Ιδιότητα ALIGN στο tag του στοιχείου αυτού. Η ιδιότητα ALIGN µπορεί να πάρει τις εξής τιµές: LEFT : Στοίχιση στο αριστερό περιθώριο της σελίδας. RIGHT : Στοίχιση στο δεξιό περιθώριο της σελίδας. CENTER : Στοίχιση στο κέντρο της σελίδας. JUSTIFY : Οµοιόµορφη στοίχιση κειµένου.
Στοίχιση Κειµένου: Στοίχιση Μεµονωµένων Στοιχείων Παράδειγµα στοίχισης µεµονωµένων στοιχείων: Internet Explorer Notepad
Στοίχιση Κειµένου: Στοίχιση Οµάδων Στοιχείων Για τη στοίχιση µίας οµάδας από οποιαδήποτε tags της HTML χρησιµοποιείται το tag <DIV>.. </DIV>,το οποίο επηρεάζει όλα τα tags τα οποία περικλείει. Το tag <DIV> χρησιµοποιείται σε συνδυασµό µε την ιδιότητα ALIGN. Πλεονεκτήµατα: Αποφυγή της επανάληψης της ιδιότητας ALIGN σε κάθε ξεχωριστό tag. Το tag <DIV> στοιχίζει οποιαδήποτε οµάδα tags, ενώ η ιδιότητα ALIGN είναι διαθέσιµη σε λίγα µόνο tags.
Στοίχιση Κειµένου: Στοίχιση Οµάδων Στοιχείων Προσοχή: Εάν υπάρχουν επιπλέον ιδιότητες ALIGN µέσα στα tags που περικλείει το DIV, τότε αυτές υπερισχύουν. Το tag <DIV ALIGN=CENTER> ισοδυναµεί µε το tag <CENTER>.. </CENTER>.Ωστόσο για λόγους οµοιοµορφίας του κώδικα προτείνεται η χρήση του tag <DIV> ανεξάρτητα από τη στοίχιση.
Στοίχιση Κειµένου: Στοίχιση Οµάδων Στοιχείων Παράδειγµα 1 : Internet Explorer Notepad
Στοίχιση Κειµένου: Στοίχιση Οµάδων Στοιχείων Παράδειγµα 2: N o t e p a d Explorer
Μορφοποίηση κειµένου: Καθορισµός Χαρακτηριστικών Γραµµατοσειράς Καθορισµός χαρακτηριστικών γραµµατοσειράς µέσω του του tag <FONT> </FONT> και των ιδιοτήτων του. Ιδιότητες <FONT>: FACE : Τύπος Τιµές: όνοµα_γραµµατοσειράς: Παράδειγµα: face= Arial, Helvetica, sans-serif SIZE : Μέγεθος Τιµές: 1-7, default = 3 Παράδειγµα: size= 5 COLOR : Χρώµα Τιµές: ονοµα_χρώµατος Παράδειγµα: color = red
Μορφοποίηση κειµένου: Καθορισµός Χαρακτηριστικών Γραµµατοσειράς Παράδειγµα: Internet Explorer Notepad
Μορφοποίηση κειµένου: ιάφορα άλλα στοιχεία κειµένου Οριζόντιες γραµµές γραφικών Tag <HR /> (χωρίς tag τέλους) Ιδιότητες: Align: στοίχιση γραµµής(center, left ή right) Noshade: απεικόνιση ή όχι τρισδιάστατης σκίασης Size: το ύψος της γραµµής σε pixels ή % της οθόνης Width: το εύρος της γραµµής σε pixels ή % της οθόνης Αλλαγή γραµµής Tag <BR /> (χωρίς tag τέλους) Επανεκκίνηση κειµένου από την αµέσως επόµενη γραµµή.
Μορφοποίηση κειµένου: ιάφορα άλλα στοιχεία κειµένου Παράδειγµα χρήσης tags <BR/>, <HR/>: Internet Explorer Notepad
Σύνδεσµοι (links) To Tag<A> Είδη Συνδέσµων σε σελίδα µια άλλη κάπου στο Internet σε σελίδα που βρίσκεται στον ίδιο φάκελο σε σελίδα που βρίσκεται σε υποφάκελο σε σελίδα που βρίσκεται σε ανώτερο φάκελο σε σελίδα που βρίσκεται σε άλλο φάκελο από ένα σηµείο µιας σελίδας σε ένα άλλο από µια σελίδα σε ένα σηµείο µιας άλλης σελίδας Σύνδεσµος για την αποστολή e-mail
Σύνδεσµοι (Links) Με τους συνδέσµους µπορούµε να διασυνδέουµε όλες τις σελίδες µας στο Web, έτσι ώστε κάνοντας κλικ σε κείµενο (ή εικόνα) της µιας σελίδας να µεταφερόµαστε στην άλλη. Για να δηµιουργήσουµε έναν σύνδεσµο (link) στην HTML, χρειαζόµαστε τα εξής δύο πράγµατα : Το όνοµα του αρχείου στον τοπικό δίσκο (ή το URL του αρχείου), για το οποίο θέλουµε να δηµιουργήσουµε τον σύνδεσµο. Το κείµενο που θα λειτουργεί σαν ενεργό σηµείο επιλογής, δηλ. θα εµφανίζεται τονισµένο ή υπογραµµισµένο ή µε διαφορετικό χρώµα στο παράθυρο του φυλλοµετρητή και στο οποίο θα µπορούµε να κάνουµε κλικ για να ακολουθήσουµε τον σύνδεσµο.
To Tag<A> (1/2) Το ζεύγος των tags <A> </A> χρησιµοποιείται για τη δηµιουργία ενός συνδέσµου σε µια HTML σελίδα. Ανόµοια µε τα απλά tags στα οποία έχουµε αναφερθεί το tag <A> έχει ορισµένα επιπλέον χαρακτηριστικά, εκτός από το όνοµα (Α) περιέχει πληροφορίες σχετικές µε το σύνδεσµο. Συνεπώς αντί να γράφουµε µόνο το όνοµα του tag της αρχής µέσα στα <> έχουµε κάτι όπως το ακόλουθο: <A HREF="http://www.medialab.ntua.gr"> Η ιδιότητα HREF (Hypertext REFerence) χρησιµοποιείται για τον καθορισµό του ονόµατος ή του URL του αρχείου στο οποίο δείχνει ο σύνδεσµος
To Tag<A> (2/2) Όµοια µε τα περισσότερα tags της HTML, το tag δηµιουργίας συνδέσµων έχει αντίστοιχο tag τέλους, το </Α>. Όλο το κείµενο που υπάρχει ανάµεσα στα tags αρχής και τέλους γίνεται ο πραγµατικός σύνδεσµος, ο οποίος εµφανίζεται µε κάποιο είδος τονισµού στην οθόνη. Σ αυτό το κείµενο µπορούµε να κάνουµε κλικ στο Medialab για να µεταβούµε στο σηµείο που προσδιορίζεται στην ιδιότητα HREF. <A HREF="http://www.medialab.ntua.gr">Medialab</Α>.
Είδη Συνδέσµων 1. Σύνδεσµος από µια σελίδα σε µια άλλη κάπου στο Internet. 2. Σύνδεσµος από µια σελίδα σε µια άλλη που βρίσκεται στον ίδιο φάκελο (directory). 3. Σύνδεσµος από µια σελίδα σε µια άλλη που βρίσκεται σε υποφάκελο (subdirectory). 4. Σύνδεσµος από µια σελίδα σε µια άλλη που βρίσκεται σε ανώτερο φάκελο (directory). 5. Σύνδεσµος από µια σελίδα σε µια άλλη που βρίσκεται σε άλλο (γενικά) φάκελο (directory). 6. Σύνδεσµος από ένα σηµείο µιας σελίδας σε ένα άλλο. 7. Σύνδεσµος από µια σελίδα σε ένα σηµείο µιας άλλης σελίδας. 8. Σύνδεσµος για την αποστολή email (mailto: URL).
1. Σύνδεσµος από µια σελίδα σε µια άλλη κάπου στο Internet Ο κώδικας θα είναι: N o t e p a d Αυτό που θα βλέπει ο χρήστης θα είναι: E x p l o r e r Με κλικ πάνω στην λέξη Yahoo! ο browser θα καλεί την σελίδα http://www.yahoo.com
2. Σύνδεσµος από µια σελίδα σε µια άλλη που βρίσκεται στον ίδιο φάκελο (directory). Αν η σελίδα στην οποία παραπέµπουµε είναι στον ίδιο φάκελο (folder, directory) µε αυτή στην οποία εφαρµόζουµε τη σύνδεση, ο κώδικας θα είναι: <A HREF="όνοµα αρχείου">κείµενο παραποµπής</a> Για σύνδεση για παράδειγµα µε τη σελίδα links2.html ο κώδικας θα είναι: N o t e p a d Αυτό που θα βλέπει ο χρήστης θα είναι: N e o p l a n e t
3. Σύνδεσµος από µια σελίδα σε µια άλλη που βρίσκεται σε υποφάκελο (subfolder). Η γενική σύνταξη είναι: <Α ΗREF ="υποφάκελος/links2.html">κείµενο παραποµπής</a> Παράδειγµα: Υποθέτουµε πως η αρχική µας σελίδα έχει όνοµα links1.html και βρίσκεται στην θέση c:\wwwroot\mypages\e-learning Μια δεύτερη σελίδα έχει όνοµα mypage2.html και βρίσκεται στην θέση c:\wwwroot\mypages\e-learning\web-design Η παραποµπή από την links1.html στην links2.htm θα είναι <A HREF="web-design/links2.html"> κείµενο παραποµπής </A>
4. Σύνδεσµος από µια σελίδα σε µια άλλη που βρίσκεται σε ανώτερο φάκελο(directory). Η γενική σύνταξη είναι: <A HREF="../links2.html">κείµενο παραποµπής</α> Παράδειγµα: Υποθέτουµε πως η αρχική µας σελίδα έχει όνοµα links1.html και βρίσκεται στην θέση: c:\wwwroot\mypages\e-learning\web-design Μια δεύτερη σελίδα έχει όνοµα links2.html και βρίσκεται στην θέση c:\wwwroot\mypages\e-learning O σύνδεσµος από την links1.html στην links2.html θα είναι: <A HREF="../links2.html">κείµενο παραποµπής</α> Αν η links1.html βρίσκεται στην θέση c:\wwwroot\mypages\e-learning\web-design\week1 Ο σύνδεσµος από την links1.html στην links2.html θα είναι: <A HREF="../../links2.htm"> κείµενο παραποµπής </A>
5. Σύνδεσµος από µία σελίδα σε µια άλλη που βρίσκεται σε άλλο (γενικά) φάκελο (directory). Για παράδειγµα έστω πως έχουµε τις σελίδες: 1) links1.html στην διεύθυνση c:\wwwroot\mypages\e-learning\web-design\week1\exercises 2)links2.html στην διεύθυνση c:\wwwroot\mypages\e-learning\java\users Η παραποµπή από την links1.html στην links2.html θα είναι: <A HREF=../../../java/users/links2.html">κείµενο παραποµπής</α>
6. Σύνδεσµος από ένα σηµείο µιας σελίδας σε ένα άλλο. εσµοί (anchors) Ειδικά σηµεία µέσα σε έγγραφα στα οποία µπορούµε να µεταβούµε µε τη βοήθεια των συνδέσµων. Οι δεσµοί δηµιουργούνται µε την ιδιότητα NAME. <A NAME= name1"> Week 2 Advanced HTML </A> Όνοµα (identifier) µπορούµε να δώσουµε είτε σε µια µεµονωµένη λέξη είτε σε ολόκληρο κείµενο. Η παραποµπή στο σηµείο της σελίδας που έχει αυτό το όνοµα θα είναι: <A HREF= #name1">το κείµενο του συνδέσµου</α>
7. Σύνδεσµος από µια σελίδα σε ένα σηµείο µιας άλλης σελίδας. ηµιουργούµε ένα δεσµό στη συγκεκριµένη σελίδα µε την ιδιότητα Name οµοίως µε την προηγούµενη διαφάνεια. <A NAME= name1"> Week 2 Advanced HTML </A> Ο σύνδεσµος στο συγκεκριµένο σηµείο της σελίδας που έχει καθοριστεί µε την παράµετρο Name συντάσσεται ως εξής: <Α HREF="http://www.multimedia.ntua.gr/e-learning/webdesign.html#name1">το κείµενο της παραποµπής</a>
8. Σύνδεσµος για την αποστολή e-mail (mailto: URL). Η σύνταξη δηµιουργίας συνδέσµου για τη σύνταξη e-mail µε παραλήπτη τη διεύθυνση που επιθυµούµε είναι: <A HREF="mailto:medialab@ntua.gr">Γράψτε µας</a> Αν θέλουµε το παράθυρο αποστολής να έχει ήδη γραµµένο και το θέµα (subject) του mail αυτού, η σύνταξη που θα χρησιµοποιήσουµε είναι: <A HREF="mailto:medialab@ntua.gr?subject=Web Design"> Γράψτε µας</a>
Σχετικές και απόλυτες διαδροµές Έστω ότι θέλουµε να δηµιουργήσουµε ένα σύνδεσµο από τη σελίδα page.html στη σελίδα pag2.html. Απόλυτη διαδροµή: <a href="c:\documets and Settings\My Documents\mySite\folder1\page2.html ">Page2 link</a> Σχετική διαδροµή (page1 page2) <a href=" folder1/page2.html ">Page2 link</a> Σχετική διαδροµή (page2 page1) <a href=../page1.html ">Page1 link</a> page1.html C Documents and Settings user1 My Documents mysite folder1 Το σύµβολο../ χρησιµοποιείται για να «ανέβουµε» ένα επίπεδο φακέλου page2.html
Τελευταιες Παρατηρησεις Θυµηθείτε: Χρήση απλού προγράµµατος επεξεργασίας κειµένου (π.χ. Notepad) για εξοικείωση µε τη γλώσσα HTML.