ΕΠΛ 012 Υπερκείµενα Hypertext
Τι είναι το Υπερκείµενο Ένα κείµενο τύπου «Υπερκείµενο» (Hypertext) περιέχει ετικέτες που ονοµάζονται Links (σύνδεσµοι). Χρησιµεύουν: Μεταπήδηση σε άλλο σηµείο της ιστοσελίδας Μεταπήδηση σε άλλη ιστοσελίδα Συνδυάστε τα 2 πιο πάνω! Μεταπήδηση σε άλλες διαδικτυακούς χώρους (και συνδυάστε τα πιο πάνω)
Υπερκείµενα Αποτελούνται από 2 χαρακτηριστικά: Σύνδεσµο (link): το κείµενο στη σελίδα µας Στόχο (target): η ιστοσελίδα που µας οδηγεί το link <a href= = url_of_target url_of_target > >descriptor_text descriptor_text</a> Το <Α> tag <a href= http://www.example.com >Acme Computer s Web Site</a> <a href = ftp://ftp.example.com/pub/example.zip >Zipped copy of the files</a>
Σύνδεσµοι: Απλούστερη µορφή href (hypertext reference): από πού ξεκινούµε <a href=http://www.cnn.com http://www.cnn.com> click me </a> <a href="http://www.cs.pitt.edu"> take me to PittCS! </a> Μας πάει σε µια εξωτερική ιστοσελίδα Καθορίζουµε το URL <a href= names.html > τα ονόµατα </a> Μας πάει σε «τοπικές» σελίδες, του ιδίου δικτυακού τόπου
Target attribute Για να ανοίξει το link σε άλλο browser target= _blank attribute Για να ανοίξει το link στο ίδιο frame µε το link target= _self attribute <a href= http://www.example.com target= _blank >New Window</a> εν µπορεί να χρησιµοποιηθεί µε strict HTML
Τίτλοι (tooltips) για συνδέσµους Title attribute: More information can be found <a href= http://www.example.com title= Example.com s WebSite >here</a>.
Σύνδεσµοι µέσα στην ίδια ιστοσελίδα Σύνδεσµοι τρίτου τύπου Για να βάλουµε σύνδεσµο στην αρχή της σελίδας, το οποίο να µας πάει στο τέλος της;;; Ας ρίξουµε άγκυρα (anchor)! Βάζουµε µια «άγκυρα» στο τέλος: <a name= theend theend > --- το τέλος --- </a> Και ένα συνδεσµό στην αρχή της <a href= # = #theend > click here to go to the end <a>
Σύνθετοι Σύνδεσµοι Ερώτηση: Μπορούµε να συνδυάσουµε τους 2 προηγούµενους τύπους; Μεταφορά στο µέσο κάποιας τοπικής σελίδας; <a href="page3.html#middle"> middle"> click me </a>
Χρήση Μονο ατιών (Paths) Ο σύνδεσµος κάνει απόλυτη κατάδειξη του αρχείου το οποίο στοχεύει! Γίνεται µε την χρήση των / µετά το URL, π.χ., www.something.com <a href="http://www.cs.pitt.edu/~ /~panos"> take me to Panos page @ PittCS! </a>
Λίστες Lists
Λίστες / Κατάλογοι Ας βάλουµε τα πράγµατα στη σειρά!!! Τρεις Τύ οι ιατεταγµένοι κατάλογοι (ordered) 1. Ordered list Αριθµηµένη: 1. Blah blah 2. Blah blah Μη διατεταγµένοι κατάλογοι (unordered) Unordered list: Blah Blah Blah Blah Ερµηνευτικοί κατάλογοι (descriptive)
ιατεταγµένοι κατάλογοι (Ordered list) <ol> </ol> Ετικέτες που ορίζουν µια λίστα <li> </li> το κάθε αντικείµενο της Π.χ., λίστα µε ακεραίους αριθµούς <ol> <li> list item #1 </li> <li> list item #2 </li> <li> list item #2 </li> </ol>
Χαρακτηριστικά <ol> Type καθορίζει το τύπο της αρίθµησης type=1: : ακέραιοι αριθµοί type=a: : κεφαλαία γράµµατα του λατινικού αλφαβήτου type=a: µικρά γράµµατα του λατινικού αλφαβήτου type=i =I: : ο ρωµαϊκός τρόπος µέτρησης, µε κεφαλαίους λατινικούς χαρακτήρες type=i: : ο ρωµαϊκός τρόπος µέτρησης, µε µικρούς λατινικούς χαρακτήρες Start καθορίζει τη τιµή από την οποία ξεκινά η µέτρηση Start = Ακέραιος Π.χ., <ol type=i start=3> <! o-list.roman.html >
Μη διατεταγµένοι κατάλογοι (Unordered list) <ul> </ul> Ετικέτες που ορίζουν µια λίστα <li> </li> το κάθε αντικείµενο της λίστας Π.χ., λίστα µε συµπαγείς δίσκους (bulleted list) <ul> <li> list item #1 </li> <li> list item #2 </li> <li> list item #3 </li> </ul> <! u-list.discs.html >
Χαρακτηριστικά <ul> Type καθορίζει τη µορφή του συµβόλου type=disc: συµπαγής δίσκος type=circle: κύκλοs type=square: συµπαγές τετράγωνο Π.χ., <ul type=circle circle> <! u-list.circle.html>
Ερµηνευτικοί κατάλογοι (descriptive) <dl> </dl> Ορισµός λίστας <dt> (Definition Term): Ορισµός ενός όρου <dd> (Definition Description): ερµηνεία ενός όρου Π.χ., <dl> <dt> list item #1 <dd> Πρώτος Όρος <dt> list item #2 <dd> εύτερος Όρος <dt> list item #3 </dl> <dl> <dt> list item #1 <dd> Πρώτος Όρος <dd> First term <dt> list item #2 <dd> εύτερος Όρος <dt> list item #3 <dt> list item $4 </dl> <! d-list.html >
Παράδειγµα περιγραφικής λίστας Λεξικά, ιάλογοι, <DL> <DT>Do <DD>a deer, a female deer <DT>Re <DD>a drop of golden sun <DT>Mi <DD>a name I call myself <DT>Fa <DD>a long, long way to run <DT>Sol <DD>a needle pulling thread <DT>La <DD>a note to follow so <DT>Ti <DD>a drink with jam and bread </DL> Do Re Mi Fa Sol La Ti a deer, a female deer a drop of golden sun a name I call myself a long, long way to run a needle pulling thread a note to follow so a drink with jam and bread