ΕΠΛ 012. Υπερκείµενα

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "ΕΠΛ 012. Υπερκείµενα"

Βαρ-ιησούς Παπαϊωάννου
8 χρόνια πριν
Προβολές:

1 ΕΠΛ 012 Υπερκείµενα Hypertext

2 Τι είναι το Υπερκείµενο Ένα κείµενο τύπου «Υπερκείµενο» (Hypertext) περιέχει ετικέτες που ονοµάζονται Links (σύνδεσµοι). Χρησιµεύουν: Μεταπήδηση σε άλλο σηµείο της ιστοσελίδας Μεταπήδηση σε άλλη ιστοσελίδα Συνδυάστε τα 2 πιο πάνω! Μεταπήδηση σε άλλες διαδικτυακούς χώρους (και συνδυάστε τα πιο πάνω)

Χρησιµεύουν: Μεταπήδηση σε άλλο σηµείο της ιστοσελίδας Μεταπήδηση σε άλλη

3 Υπερκείµενα Αποτελούνται από 2 χαρακτηριστικά: Σύνδεσµο (link): το κείµενο στη σελίδα µας Στόχο (target): η ιστοσελίδα που µας οδηγεί το link <a href= = url_of_target url_of_target > >descriptor_text descriptor_text</a> Το <Α> tag <a href= >Acme Computer s Web Site</a> <a href = ftp://ftp.example.com/pub/example.zip >Zipped copy of the files</a>

>descriptor_text descriptor_text</a> Το <Α> tag <a href= http://www.example.

4 Σύνδεσµοι: Απλούστερη µορφή href (hypertext reference): από πού ξεκινούµε <a href= click me </a> <a href=" take me to PittCS! </a> Μας πάει σε µια εξωτερική ιστοσελίδα Καθορίζουµε το URL <a href= names.html > τα ονόµατα </a> Μας πάει σε «τοπικές» σελίδες, του ιδίου δικτυακού τόπου

5 Target attribute Για να ανοίξει το link σε άλλο browser target= _blank attribute Για να ανοίξει το link στο ίδιο frame µε το link target= _self attribute <a href= target= _blank >New Window</a> εν µπορεί να χρησιµοποιηθεί µε strict HTML

link target= _self attribute <a href= http://www.example.

6 Τίτλοι (tooltips) για συνδέσµους Title attribute: More information can be found <a href= title= Example.com s WebSite >here</a>.

7 Σύνδεσµοι µέσα στην ίδια ιστοσελίδα Σύνδεσµοι τρίτου τύπου Για να βάλουµε σύνδεσµο στην αρχή της σελίδας, το οποίο να µας πάει στο τέλος της;;; Ας ρίξουµε άγκυρα (anchor)! Βάζουµε µια «άγκυρα» στο τέλος: <a name= theend theend > --- το τέλος --- </a> Και ένα συνδεσµό στην αρχή της <a href= # = #theend > click here to go to the end <a>

8 Σύνθετοι Σύνδεσµοι Ερώτηση: Μπορούµε να συνδυάσουµε τους 2 προηγούµενους τύπους; Μεταφορά στο µέσο κάποιας τοπικής σελίδας; <a href="page3.html#middle"> middle"> click me </a>

9 Χρήση Μονο ατιών (Paths) Ο σύνδεσµος κάνει απόλυτη κατάδειξη του αρχείου το οποίο στοχεύει! Γίνεται µε την χρήση των / µετά το URL, π.χ., <a href=" /~panos"> take me to Panos PittCS! </a>

Γίνεται µε την χρήση των / µετά το URL, π.χ., www.

10 Λίστες Lists

11 Λίστες / Κατάλογοι Ας βάλουµε τα πράγµατα στη σειρά!!! Τρεις Τύ οι ιατεταγµένοι κατάλογοι (ordered) 1. Ordered list Αριθµηµένη: 1. Blah blah 2. Blah blah Μη διατεταγµένοι κατάλογοι (unordered) Unordered list: Blah Blah Blah Blah Ερµηνευτικοί κατάλογοι (descriptive)

12 ιατεταγµένοι κατάλογοι (Ordered list) <ol> </ol> Ετικέτες που ορίζουν µια λίστα <li> </li> το κάθε αντικείµενο της Π.χ., λίστα µε ακεραίους αριθµούς <ol> <li> list item #1 </li> <li> list item #2 </li> <li> list item #2 </li> </ol>

Π.χ., λίστα µε ακεραίους αριθµούς <ol> <li> list item #1

13 Χαρακτηριστικά <ol> Type καθορίζει το τύπο της αρίθµησης type=1: : ακέραιοι αριθµοί type=a: : κεφαλαία γράµµατα του λατινικού αλφαβήτου type=a: µικρά γράµµατα του λατινικού αλφαβήτου type=i =I: : ο ρωµαϊκός τρόπος µέτρησης, µε κεφαλαίους λατινικούς χαρακτήρες type=i: : ο ρωµαϊκός τρόπος µέτρησης, µε µικρούς λατινικούς χαρακτήρες Start καθορίζει τη τιµή από την οποία ξεκινά η µέτρηση Start = Ακέραιος Π.χ., <ol type=i start=3> <! o-list.roman.html >

µε κεφαλαίους λατινικούς χαρακτήρες type=i: : ο ρωµαϊκός τρόπος µέτρησης, µε µικρούς λατινικούς χαρακτήρες Start

14 Μη διατεταγµένοι κατάλογοι (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 >

, λίστα µε συµπαγείς δίσκους (bulleted list) <ul> <li> list item #1

15 Χαρακτηριστικά <ul> Type καθορίζει τη µορφή του συµβόλου type=disc: συµπαγής δίσκος type=circle: κύκλοs type=square: συµπαγές τετράγωνο Π.χ., <ul type=circle circle> <! u-list.circle.html>

16 Ερµηνευτικοί κατάλογοι (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> list item #1 <dd> Πρώτος Όρος <dt> list item #2 <dd> εύτερος Όρος <dt> list item #3 </dl>

17 Παράδειγµα περιγραφικής λίστας Λεξικά, ιάλογοι, <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

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

Σχετικά έγγραφα

Χρηματοδότηση των Συλλόγων στην εποχή της κρίσης

Χρηματοδότηση των Συλλόγων στην εποχή της κρίσης Ελίνα Ρέπα Πρόεδρος Συλλόγου Γονέων και Κηδεμόνων Παιδιών με Χρόνιες Ρευματοπάθειες Μαρία Σταυρακίδου Φυσικοθεραπεύτρια Εξωτερική Συνεργάτης ΠΑΡΚΑ A Παιδιατρική