Σχεδιασμός και Ανάπτυξη Ιστότοπων HTML: Λίστες Παρουσίαση 8 η 1 Βελώνης Γεώργιος Καθηγητής
Σημασία συμβόλων HTML5 tags. Obsolete tags: Μην αφήνετε αυτές τις ετικέτες στον κώδικά σας. Deprecated tags: Αντικαταστήστε αυτές τις ετικέτες πριν καταστούν παρωχημένες. Αυτό γίνεται για να εξασφαλιστεί η μελλοντική συμβατότητα. Restored/ Redefined tags in HTML5: Αναθεωρήστε αυτές τις ετικέτες στον κώδικά σας, όπως καθορίστηκαν στην HTML5 και ως εκ τούτου έχουν νέες έννοιες. 2
Σημασία συμβόλων HTML5 tags: ιδιότητα reversed Obsolete tags: ιδιότητα compact (<ol>) Deprecated tags: ιδιότητα type (<ul>) Restored/ Redefined tags in HTML5: <dl>, <dt>, <dt> 3
Χρήσιμοι Ορισμοί Deprecated και Obsolete Deprecated καλείται ένα στοιχείο ή παράμετρος που θεωρείται ξεπερασμένο. Τα deprecated στοιχεία μπορεί να καταστούν άνευ αντικειμένου στο μέλλον, αλλά οι browsers θα πρέπει να συνεχίσουν να τα υποστηρίζουν για λόγους συμβατότητας με παλαιότερες εκδόσεις. Obsolete καλείται ένα στοιχείο ή χαρακτηριστικό που δεν έχει καμία εγγύηση για τη μελλοντική του από τους browsers υποστήριξη και πλέον δεν ορίζεται στην προδιαγραφή W3C. 4
Βελώνης Γεώργιος - Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google Chrome 52.0 Mozilla FireFox 48.0 Yandex 16.7 Internet Explorer 11.0 Safari 5.1.7 Opera 39.0 5
Περιεχόμενα Λίστες Αριθμημένες λίστες (ordered lists) Μη αριθμημένες λίστες (unordered lists) Λίστες ορισμών (description lists) Ένθετες λίστες (nested lists) 6
Λίστες Ένα από τα πιο κοινά στοιχεία που συναντάται σε ένα HTML έγγραφο είναι οι λίστες (ή κατάλογοι), οι οποίες χωρίζονται στις αριθμημένες (ή διατεταγμένες), στις μη αριθμημένες (ή μη διατεταγμένες) και στις λίστες ορισμών. Οι λίστες μπορούν να παρουσιάσουν ομάδες από πληροφορίες σε πιο ευανάγνωστη μορφή, εισάγοντας οδηγίες, πίνακες περιεχομένων και γενικά στοιχεία που πρέπει να μπουν σε μια σειρά. 7
Αριθμημένες λίστες (ordered lists) Οι αριθμημένες λίστες παρουσιάζουν τα στοιχεία ενός καταλόγου με αύξουσα ή φθίνουσα αριθμητική σειρά. Μία αριθμημένη λίστα ορίζεται με την ετικέτα <ol> και κάθε στοιχείο της λίστας ορίζεται με την ετικέτα <li>. Δομή αριθμημένης λίστας: <ol> <!-- Ετικέτα έναρξης αριθμημένης λίστας --> <li> Στοιχείο λίστας</li> <!-- 1ο στοιχείο λίστας --> <li> Στοιχείο λίστας</li> <!-- 2ο στοιχείο λίστας -->.. <li> Στοιχείο λίστας</li> <!-- Τελευταίο στοιχείο λίστας --> </ol> <!-- Ετικέτα τέλους αριθμημένης λίστας --> 8
Αριθμημένες λίστες (ordered lists) Οι ετικέτα <ol> παίρνει τρεις παραμέτρους, την type, τη start και τη reversed. Σύνταξη: <ol type="τιμή" start="τιμή" reversed="reversed"> Η ιδιότητα type δηλώνει το είδος της αριθμητικής λίστας και παίρνει μία από τις παρακάτω τιμές: "1": Προεπιλογή. Τα στοιχεία της λίστας θα αριθμούνται με αριθμούς στο δεκαδικό σύστημα αρίθμησης (1,2, κ.λπ.). "A": Τα στοιχεία της λίστας θα αριθμούνται με κεφαλαία γράμματα. "a": Τα στοιχεία της λίστας θα αριθμούνται με πεζά γράμματα. "I": Τα στοιχεία της λίστας θα αριθμούνται με κεφαλαίους ρωμαϊκούς αριθμούς. "i": Τα στοιχεία της λίστας θα αριθμούνται με πεζούς ρωμαϊκούς αριθμούς. 9
Αριθμημένες λίστες (ordered lists) Σύνταξη CSS: <οl style="list-style-type:decimal upper-alpha lower-alpha upper-roman lower-roman"> Η ιδιότητα list-style-type δηλώνει το είδος της αριθμητικής λίστας και παίρνει μία από τις παρακάτω τιμές: decimal: Προεπιλογή. Τα στοιχεία της λίστας θα αριθμούνται με αριθμούς στο δεκαδικό. upper-alpha: Χρήση κεφαλαίων γραμμάτων. lower-alpha: Χρήση πεζών γραμμάτων. upper-roman: Ρωμαϊκά κεφαλαία νούμερα. lower-roman: Ρωμαϊκά πεζά νούμερα. 10 Σημείωση: Τα CSS θα παρουσιαστούν αναλυτικά σε επόμενα μαθήματα
Αριθμημένες λίστες (ordered lists) Η ιδιότητα start ορίζει την τιμή έναρξης της αρίθμησης και ανεξάρτητα από την τιμή της ιδιότητας type είναι πάντοτε ένας αριθμός (αν δε δηλωθεί είναι το 1). Η ιδιότητα reversed της HTML5, ορίζει τη σειρά της λίστας σε φθίνουσα αρίθμηση (6,5,...) αλλά δεν υποστηρίζεται από τους browsers Safari και IE. Παράδειγμα: <body> <h2>λίστα φρούτων</h2> <ol> <li>πορτοκάλι</li> <li>μανταρίνι</li> <li>μήλο</li> </ol> </body> reversed 11
Αριθμημένες λίστες (ordered lists) Παράδειγμα: <body> <h2>λίστα φρούτων</h2> <ol type="i" reversed="reversed"> <li>πορτοκάλι</li> <li>μανταρίνι</li> <li>μήλο</li> </ol> </body> ή <ol style="list-style-type:lower-roman"> 12
Αριθμημένες λίστες (ordered lists) Στις αρχικές εκδόσεις της HTML η ετικέτα <ol> υποστήριζε και την ιδιότητα compact, ή οποία όριζε ότι ο κατάλογος θα πρέπει να παρουσιάζεται μικρότερος από το κανονικό, με τη μείωση του διαστήματος μεταξύ των γραμμών και την εσοχή της λίστας. Η ιδιότητα αυτή δεν υποστηρίζεται από την HTML5 και από κανέναν από τους γνωστότερους browsers και στη θέση της χρησιμοποιούνται CSS. Σύνταξη: <ol compact="compact "> Σύνταξη CSS: <ol style="line-height: 80%"> 13 compact
Μη αριθμημένες λίστες (unordered lists) Οι μη αριθμημένες λίστες χρησιμοποιούνται για την παρουσίαση των στοιχείων τους, όταν αυτά δεν είναι απαραίτητο να είναι ταξινομημένα με κάποια σειρά. Μία μη αριθμημένη λίστα ορίζεται με την ετικέτα <ul> και κάθε στοιχείο της λίστας ορίζεται επίσης με την ετικέτα <li>. Δομή μη αριθμημένης λίστας: <ul> <!-- Ετικέτα έναρξης μη αριθμημένης λίστας --> <li> Στοιχείο λίστας</li> <!-- 1ο στοιχείο λίστας --> <li> Στοιχείο λίστας</li> <!-- 2ο στοιχείο λίστας -->.. <li> Στοιχείο λίστας</li> <!-- Τελευταίο στοιχείο λίστας --> </ul> <!-- Ετικέτα τέλους μη αριθμημένης λίστας --> 14
Μη αριθμημένες λίστες (unordered lists) Οι ετικέτα <ul> παίρνει μία μόνο παράμετρο, την ιδιότητα type, η οποία ορίζει το είδος του συμβόλου αλλά δεν υποστηρίζεται από την HTML5 και στη θέση της χρησιμοποιούνται CSS. Σύνταξη: <ul type="disc circle square none"> ή <li type="disc circle square none"> Σύνταξη CSS: <ul style="list-style-type:disc circle square none"> Τιμές της ιδιότητας type: disc: Προεπιλογή. Ένα γεμάτο κύκλο. circle: Ένα άδειο κύκλο. square: Ένα γεμάτο τετράγωνο. none: Καμία κουκίδα. 15
Μη αριθμημένες λίστες (unordered lists) Παράδειγμα: <body> <h2>λίστα φρούτων</h2> <ul type="square"> <li>πορτοκάλι</li> <li>μανταρίνι</li> <li>μήλο</li> </ul> </body> ή <ul style="list-style-type:square"> 16
Μη αριθμημένες λίστες (unordered lists) Παράδειγμα: <body> <h2>λίστα φρούτων</h2> <ul type="square"> <li>πορτοκάλι</li> <li type="circle">μανταρίνι</li> <li type="disc">μήλο</li> </ul> </body> ή <ul style="list-style-type:square"> 17
Λίστες ορισμών (description lists) Οι λίστες ορισμών, όπως φαίνεται και από την ονομασία τους, χρησιμοποιούνται για την παρουσίαση σε ιστοσελίδες ορισμών και των επεξηγήσεων τους. Για το λόγο αυτό ονομάζονται και ερμηνευτικοί κατάλογοι. Η δομή που έχει μια λίστα ορισμών είναι η εξής: <dl> <!-- Tag έναρξης λίστας ορμών --> <dt>όρος που θα επεξηγηθεί</dt> <!-- Tag όρου προς επεξήγηση--> <dd>επεξήγηση όρου</dd> <!-- Tag επεξήγησης --> <dt>όρος που θα επεξηγηθεί</dt> <!-- Tag όρου προς επεξήγηση--> <dd>επεξήγηση όρου</dd> <!-- Tagεπεξήγησης -->.. <dt>όρος που θα επεξηγηθεί</dt> <!-- Tag όρου προς επεξήγηση--> <dd>επεξήγηση όρου</dd> <!-- Tag επεξήγησης --> </dl> <! Tag λήξης λίστας ορμών --> 18
Λίστες ορισμών (description lists) Στην HTML 4.01, η ετικέτα <dl> ορίζει μια λίστα ορισμών, ενώ στην HTML 5 ορίζει μια λίστα περιγραφής. Ομοίως αλλάζει και η σημασία των ετικετών <dt> και <dd> που χρησιμοποιούνται σε συνδυασμό με την ετικέτα <dl>. Πιο συγκεκριμένα, η ετικέτα <dt> ορίζει έναν όρο/όνομα σε μια λίστα περιγραφής, ενώ η ετικέτα <dd> περιγράφει έναν όρο/όνομα σε μια λίστα περιγραφής. Μέσα σε μία ετικέτα <dd> μπορούν να μπούνε παράγραφοι, αλλαγές γραμμής, εικόνες, σύνδεσμοι, πίνακες, λίστες, κ.λπ. 19
Λίστες ορισμών (description lists) Παράδειγμα: <body> <dl> <dt>συσκευές εισόδου</dt> <dd>πληκτρολόγιο</dd> <dd>σαρωτής</dd> <dt>συσκευές εξόδου</dt> <dd>οθόνη</dd> <dd>εκτυπωτής</dd> </dl> </body> 20
Ένθετες λίστες (nested lists) Οι αριθμημένες και οι μη αριθμημένες λίστες, μπορούν να έχουν διαφορετικά επίπεδα. Η κάθε μία, μπορεί να κάνει υποεπίπεδα μέσα στη λίστα, με άλλες λίστες. Τα επίπεδα της λίστας δεν είναι ανάγκη να σχηματίζονται από λίστες του ιδίου τύπου. Μπορούν δηλαδή να δημιουργηθούν συνδυασμοί αριθμημένων με μη αριθμημένων λιστών. Το μείζον θέμα είναι η επαλήθευση της κάθε λίστας ώστε να τελειώνει σωστά και να είναι σωστή η ένωση. Ένθετες λίστες 21
Ένθετες λίστες (nested lists) Παράδειγμα: <body> <ul> <li>συσκευές εισόδου</li> <ul> <li>πληκτρολόγιο</li> <li>σαρωτής</li> </ul> <li>συσκευές εξόδου</li> <ul> <li>πληκτρολόγιο</li> <li>σαρωτής</li> </ul> </ul> </body> 22
Ένθετες λίστες (nested lists) Παράδειγμα: <body> <ol> <li>συσκευές εισόδου</li> <ol> <li>πληκτρολόγιο</li> <li>σαρωτής</li> </ol> <li>συσκευές εξόδου</li> <ol> <li>πληκτρολόγιο</li> <li>σαρωτής</li> </ol> </ol> </body> 23
Ένθετες λίστες (nested lists) Παράδειγμα: <body> <ol> <li>συσκευές εισόδου</li> <ul> <li>πληκτρολόγιο</li> <li>σαρωτής</li> </ul> <li>συσκευές εξόδου</li> <ul> <li>πληκτρολόγιο</li> <li>σαρωτής</li> </ul> </ol> </body> 24
Πηγές Προγραμματιστικά Εργαλεία για το Διαδίκτυο: Σχολικό βιβλίο W3schools (http://www.w3schools.com/html/html_lists.asp) E-Learning-education.gr (http://www.e-learningeducation.gr/λίστες-html/) Πανεπιστήμιο Μακεδονίας Γράφοντας HTML/Λίστες (http://www.it.uom.gr/project/html2/tut6.html) 25