Υπάρχουν διαφορετικοί τύποι λιστών στο HTML. Καταρχήν, υπάρχουν οι λίστες με κουκκίδες. Σε αυτόν τον τύπο λίστας, τα μεμονωμένα στοιχεία της λίστας εξοπλίζονται με ένα σύμβολο κουκκίδας, το οποίο ονομάζεται Bullet.
Οι λίστες με κουκκίδες εισάγονται με το στοιχείο ul. Τα μεμονωμένα στοιχεία της λίστας χαρακτηρίζονται με το στοιχείο li.
<p>Τρέχοντα θέματα από το φόρουμ</p> <ul> <li>Το CSS δεν εκτελείται πλέον</li> <li>Showroom στυλ Χόλιγουντ της δεκαετίας του '40</li> <li>CSS αποκρυπτήσεων</li> <li>Σύνδεση/αποσύνδεση PHP</li> <li>Ο μικρός μου showroom - Ο αρχάριος ζητά συμβουλές!</li> </ul>
Εδώ είναι μια ματιά στο αποτέλεσμα στον περιηγητή:
Προ εκάστου μηνύματος εισάγεται ένα σύμβολο κουκκίδας. Ο τρόπος με τον οποίο αυτό εμφανίζεται προεπιλέγεται από τους περιηγητές. Υπάρχουν μεν γνωρίσματα που επηρεάζουν την εμφάνιση των λιστών, αυτά όμως δεν θα πρέπει πλέον να χρησιμοποιούνται πλέον. Αντ' αυτού, έρχονται σε παιχνίδι οι ιδιότητες CSS.
Οι λίστες με κουκκίδες μπορούν επίσης να εμφωλευτούν. Ρίξτε πρώτα μια ματιά στην παρακάτω εικόνα:
Εδώ γίνεται αντιληπτό τι σημαίνει μια τέτοια εμφύτευση.
Η σύνταξη για αυτό δείχνει κάπως έτσι:
<ul>
<li>Οδηγοί
<ul>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ul>
</li>
<li>Βιντεομαθήματα
<ul>
<li>3D</li>
<li>Σχεδίαση μέσων ενημέρωσης</li>
<li>Web</li>
</ul>
</li>
<li>Συμβουλές</li>
<li>Καταστήματα</li>
</ul>
Μέσα σε ένα στοιχείο λίστας μπορεί να υπάρχει και μια άλλη λίστα. Αυτή η λίστα δεν χρειάζεται απαραίτητα να είναι λίστα με κουκκίδες. Πράγματι, μπορούν να εισαχθούν και άλλοι τύποι λιστών - οι οποίοι θα παρουσιαστούν αργότερα σε αυτό το εγχειρίδιο.
Επιπλέον, στο HTML5 δεν είναι επιβεβλημένο να χρησιμοποιείται το κλείσιμο </li>. Ωστόσο, για καλύτερη αναγνωσιμότητα θα το έκλεινα πάντα. Συντακτικά σωστό θα ήταν όμως και κάτι τέτοιο:
<p>Τα τρέχοντα θέματα από το φόρουμ</p> <ul> <li>Το CSS δεν εκτελείται πλέον <li>Showroom στυλ Χόλιγουντ της δεκαετίας του '40 <li>CSS αποκρυπτήσεων <li>Σύνδεση/αποσύνδεση PHP <li>Ο μικρός μου showroom - Ο αρχάριος ζητά συμβουλές! </ul>
Αριθμημένες Λίστες
Εκτός από τις λίστες με κουκκίδες, μπορούν να οριστούν επίσης αριθμημένες λίστες. Και εδώ πρώτα ένα διάγραμμα που δείχνει τι σημαίνουν οι τέτοιες αριθμημένες λίστες στην πραγματικότητα.
Στα στοιχεία της λίστας πρόκειται να προεκτείνονται συνεχείς αριθμοί. Οι αριθμημένες λίστες εισάγονται με το στοιχείο ol.
Το ακόλουθο παράδειγμα δείχνει πώς μπορεί να χρησιμοποιηθεί αυτό το στοιχείο.
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>XML</li> </ol>
Όπως και στις λίστες με κουκκίδες, εδώ οι μεμονωμένες καταχωρήσεις χαρακτηρίζονται με το στοιχείο li.
Θεωρητικά είναι δυνατόν να εμφωλευτούν και οι λίστες με κουκκίδες.
<ol>
<li>Οδηγοί
<ol>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ol>
</li>
<li>Βιντεομαθήματα
<ol>
<li>3D</li>
<li>Σχεδίαση μέσων ενημέρωσης</li>
<li>Web</li>
</ol>
</li>
<li>Συμβουλές</li>
<li>Καταστήματα</li>
</ol>Το αποτέλεσμα στον περιηγητή όμως είναι απογοητευτικό.
Με αυτόν τον τρόπο, δεν επιτυγχάνεται αριθμούμενη λίστα με αυτό το σχήμα:
1. Οδηγοί 2D
1.1 3D
1.2 Web
- Βιντεομαθήματα 3D
2.1 Σχεδίαση μέσων ενημέρωσης
2.2 Web - Συμβουλές
- Καταστήματα
Κάτι τέτοιο δεν είναι δυνατό με απλό HTML. Πράγματι, απαιτείται CSS για να αριθμεί αυτόματα το περιεχόμενο μετά από τέτοιο σχήμα.
Λίστες Ορισμών
Ένας άλλος είδος λιστών είναι οι λίστες ορισμών. Και εδώ πρώτα ένα παράδειγμα για το πώς μια τέτοια λίστα φαίνεται τελικά στον περιηγητή:
Το βασικό πεδίο εφαρμογής των λιστών ορισμών είναι τα γλωσσάρια. Εδώ το σύνταγμα που οδήγησε στην παραπάνω παρουσίαση:
<dl>
<dt>AM</dt>
<dd>AM - Αεροπορικό Ταχυδρομείο</dd>
<dd>AM - Αεροναύαρχος</dd>
<dd>AM - Άμπεργκ</dd>
<dd>AM - Αμερίκιο</dd>
<dd>AM - Άμστετεν</dd>
<dt>AN</dt>
<dd>AN - παραπάνω ονόματισμένος</dd>
<dd>AN - Κόμβος Πρόσβασης</dd>
<dd>AN - Άνκονα</dd>
</dl>Στις λίστες ορισμών χρησιμοποιούνται πάντα τρία στοιχεία. Οι λίστες αυτές εισάγονται με το στοιχείο dl. Η εξωτερική δομή. Ο όρος που πρέπει να οριστεί μαρκάρεται με το στοιχείο dt. Αυτό είναι ο ίδιος ο ορισμός. Η περιγραφή του ορισμού δίνεται μέσω του στοιχείου dd.
Η ενσωμάτωση λιστών ορισμών είναι επίσης δυνατή. Λειτουργεί ακριβώς όπως φαίνεται στις άλλες παραλλαγές των λιστών.
Πώς ακριβώς εμφανίζονται οι λίστες ορισμών καθορίζεται ξανά από τους περιηγητές. Τελικά όμως μπορείτε να ορίσετε μόνοι σας μέσω του CSS τη διάταξη που επιθυμείτε.
Στις προηγούμενες εκδόσεις HTML υπήρχαν επίσης λίστες μενού και καταλόγων. Για το σκοπό αυτό χρησιμοποιούνταν τα δύο στοιχεία menu και dir. Το στοιχείο dir δεν περιλαμβάνεται πλέον στο HTML5. Διαφορετικά είναι το menu. Αυτό το στοιχείο επαναεισήχθη και σκοπεύεται να μπορεί να χρησιμοποιηθεί στο μέλλον για περιβάλλοντα μενού και γραμμές εργαλείων. Εδώ ένα παράδειγμα για το πώς το W3C φαντάζεται μια τυπική εφαρμογή menu:
<menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="fnew()">Νέο...</button> <button type="button" onclick="fopen()">Άνοιγμα...</button> <button type="button" onclick="fsave()">Αποθήκευση</button> <button type="button" onclick="fsaveas()">Αποθήκευση ως...</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="ecopy()">Αντιγραφή</button> <button type="button" onclick="ecut()">Αποκοπή</button> <button type="button" onclick="epaste()">Επικόλληση</button> </menu> </li> <li> <menu label="Help"> <li><a href="help.html">Βοήθεια</a></li> <li><a href="about.html">Σχετικά</a></li> </menu> </li> </menu>
Προς το παρόν, κανένας περιηγητής δεν υποστηρίζει αυτήν τη μορφή.
Για αυτό το λόγο το στοιχείο menu δεν πρέπει να χρησιμοποιηθεί ακόμα.
Διαμορφώνοντας Λίστες
Ένα σημείο αναφοράς σχετικά με τις λίστες. Σε πολλές ιστοσελίδες χρησιμοποιούνται HTML γνωρίσματα για τη διαμόρφωση των λιστών. Γι' αυτό μπορείτε να δημιουργήσετε, λόγου χάρη, την εμφάνιση του στοιχείου <ul type="square"> για να εμφανίζονται παραλληλόγραμμα πριν από τα στοιχεία των λιστών με κουκκίδες.
Επίσης, μπορείτε να καθορίσετε τον τρόπο αρίθμησης για τις λίστες με αρίθμηση.
<ol type="A">
Ωστόσο, θα πρέπει να λάβουμε υπόψη ότι δεν πρέπει να χρησιμοποιούμε τα πάντα ό,τι προσφέρεται. Πιο κατάλληλες είναι οι αντίστοιχες ιδιότητες CSS. Θα πρέπει όντως να τις χρησιμοποιήσετε για να προσαρμόσετε τις λίστες σύμφωνα με τις επιθυμίες σας. Αναλυτικές πληροφορίες σχετικά με το CSS ακολουθούν σε αυτήν τη σειρά.
