Εισαγωγή

Στο προηγούμενο κεφάλαιο αναφέραμε μερικά χρήσιμα HTML tags για μορφοποίηση κειμένου. Σε αυτό το κεφάλαιο θα κάνουμε μια εισαγωγή στις λίστες, τον τρόπο δηλαδή με τον οποίο μπορούμε να φτιάξουμε αριθμητικές λίστες, λίστες με bullets, λίστες με αλφαβητική σειρά κλπ.


Αριθμητικές λίστες

Έστω ότι θέλουμε να δημηουργήσουμε μια αριθμητική λίστα όπως φαίνεται στην παρακάτω εικόνα.





Για να μπορέσουμε να δημιουργήσουμε μια αριθμητική λίστα χρησιμοποιούμε τα HTML tag <ol> και </ol>. Οτιδήποτε βρίσκεται εντός αυτού του HTML tag αποτελεί αντικείμενο αυτής της αριθμημένης λίστας και για να αποδώσουμε εναν αριθμό σε αυτό το αντικείμενο χρησιμοποιούμε τα HTML tag <li> και </li>.



Σε αυτό το σημείο καταφέραμε να φτιάξουμε μια αριθμημένη λίστα απο το 1 έως το 4. Τι θα συμβεί όμως αν εμείς θελήσουμε η αρίθμηση να μην ξεκινάει απο το προκαθορισμένο του που είναι το 1 αλλά με έναν συγκεκριμένο αριθμό. Για να το κάνουμε αυτό χρησιμοποιούμε την παράμετρο start="#" μέσα στο HTML tag <ol> κι όπου αστερίσκος ο αριθμός με τον οποίο επιθυμούμε να αρχίσει η αρίθμηση των αντικειμένων της λίστας. Για παράδειγμα έστω η παρακάτω αρίθμηση σε μια ιστοσελίδα.





Για να το κάνουμε λοιπόν αυτό θα επεξεργαστούμε το HTML έγγραφό μας ώς εξής.




Αλφαβητική αρίθμηση

Μπορούμε επίσης αντί για αριθμούς να έχουμε αλφαβητική αρίθμηση δηλαδή "a, b, c" κλπ. Έστω οτι εμείς θέλουμε να επεξεργαστούμε την ιστοσελίδα μας και να εμφανήσουμε τα περιεχόμενα με αλφαβητική αρίθμηση. Για να το κάνουμε αυτό γράφουμε τα εξής.



Παρατηρούμε στο HTML tag <ol> την παράμετρο type="a" η οποία είναι με κίτρινο χρώμα. Η παράμετρος αυτή αποτελεί την ένδειξη ότι η λίστα αυτή είναι μια αλφαβητικά αριθμημένη λίστα. Το αποτέλεσμα που θα μας εφμανήσει είναι το εξής.





Μπορούμε να κάνουμε το ίδιο επίσης και με κεφαλαία γράμματα. Για παράδειγμα έστω η παρακάτω αλφαβητική αρίθμηση.





Για να το κάνουμε αυτό αλλάζουμε την τιμή που έχουμε δώσει στην παράμετρο type="" κι αντί για μικρό a γράφουμε κεφαλαίο A.



Αλλάζοντας το σε κεφαλαίο A αλλάζει και την αλφαβητική αρίθμηση σε κεφαλαία γράμματα. Υπάρχουν διάφορες τιμές που μπορούμε να αποδώσουμε στην παράμετρο type="" ο παρακάτω πίνακας δίνει όλες αυτές τις τιμές.



Τιμή Περιγραφή
type="1" Αρίθμητική λίστα
type="a" Αλφαβητικά αριθμημένη λίστα
type="A" Αλφαβητικά αριθμημένη λίστα (κεφαλαία γράμματα)
type="Ι" Αριθμητική λίστα με Λατινικούς αριθμούς (Κεφαλαία)
type="i" Αριθμητική λίστα με Λατινικούς αριθμούς

Λίστες με bullets

Ίσως ο πιο συνήθης τύπος λίστας περιεχομένων τόσο σε έγγραφα word όσο και σε ιστοσελίδες. Έστω για παράδειγμα η παρακάτω λίστα με bullets.





Ας δούμε πως μπορούμε να υλοποιήσουμε μια τέτοια λίστα στον text editor μας.



Με το HTML tag <ul> </ul> ανοίγουμε μια λίστα με bullets και με τα HTML tags <li> </li> δημιουργούμε ένα bullet. Μπορούμε επίσης να επιλέξουμε και άλλα bullets πέραν των κλασσικών που υπάρχουν. Για να το κάνουμε αυτό χρησιμοποιούμε την παράμετρο type="#τύπος bullet". Όπου τύπος bullet βάζουμε ότι ακολουθεί στον παρακάτω πίνακα.



Τιμή Περιγραφή
type="disc" Τα κλασσικά (default) bullets.
type="circle" Εσωτερικά κενός κύκλος
type="square" Τετράγωνο σχήμα


Ας δούμε καθένα απο αυτά και το αποτέλεσμα που θα μας δείξουν στον browser μας. Το πρώτο bullet το είδαμε παραπάνω καθότι είναι το προκαθορισμένο (default) παρόλα αυτά ας δούμε όλους τους τύπους bullets του παραπάνω πίνακα.








Λίστες με περιγραφή αντικειμένων

Τι γίνεται όμως αν εμείς θέλουμε να φτιάξουμε μια λίστα η οποία να μας παρέχει περιγραφή για κάθε αντικείμενο που έχει, ποία θα ήταν η καλύτερη μέθοδος να εφαρμόσουμε ;
Για να το καταλάβουμε ας δούμε ένα παράδειγμα, έστω η παρακάτω ιστοσελίδα.



Για να φτιάξουμε αυτήν την λίστα θα γράψουμε τα εξής στον text editor μας.



Τελευταία ενημέρωση: 17/08/2018






Follow us

 ☰