Λίστες (lists)

Σε πολλά έγγραφα απαιτείται η παρουσίαση ή η καταγραφή στοιχείων σε μορφή λίστας. Για παράδειγμα, μια λίστα από ονόματα ή μια λίστα από προϊόντα. Τα στοιχεία μιας λίστας μπορεί να είναι αριθμημένα ordered list ή μη αριθμημένα unordered list. Τα στοιχεία των μη αριθμημένων λιστών εμφανίζονται με μια κουκίδα (bullet).

Ας δούμε πρώτα πως μπορούμε να δημιουργήσουμε μια αριθμημένη λίστα.

Η λίστα <ol> (ordered list)

Με την ετικέτα <ol> μπορείτε να δημιουργήσετε μια λίστα με τα στοιχεία της αριθμημένα. Τα στοιχεία της κάθε λίστας ορίζονται με την ετικέτα <li> (list item).

Στο παρακάτω παράδειγμα έχουν παραληφθεί οι ετικέτες html, head και body για λόγους συντομίας

<ol>
	<li>Πρώτο στοιχείο</li>
	<li>Δεύτερο στοιχείο</li>
	<li>Τρίτο στοιχείο</li>
</ol>
  1. Πρώτο στοιχείο
  2. Δεύτερο στοιχείο
  3. Τρίτο στοιχείο

Όπως βλέπετε στο παράδειγμα, για τη δημιουργία μιας αριθμημένης λίστας, χρειάζονται οι ετικέτες <ol> και </ol> με τις οποίες ορίζεται η αρχή και το τέλος μιας λίστας και η ετικέτα <li> (List Item) για να οριστεί ξεχωριστά κάθε ένα στοιχείο της λίστας.

Παρατηρήστε επίσης ότι η αρίθμηση των στοιχείων της λίστας (1 2 3 ...) γίνεται αυτόματα.

Όπως όλες οι ετικέτες, έτσι και η <ol> δέχεται ιδιότητες με τις οποίες μπορείτε να αλλάξετε τη μορφή μιας λίστας. Δύο από τις βασικές ιδιότητες που χρησιμοποιούνται αποκλειστικά στην ετικέτα <ol> είναι η start και η type.

Ιδιότητες της ετικέτας <ol>

Για την ετικέτα ol οι ιδιότητες είναι: type, start και reversed.

Η ιδιότητα start

Η αρίθμηση κάθε λίστας αρχίζει από τον αριθμό 1. Εάν θέλετε η αρίθμηση να αρχίζει από κάποιον άλλο αριθμό, τότε χρησιμοποιείτε την ιδιότητα start. Δείτε το παράδειγμα που ακολουθεί.

<ol start="10">
	<li>Πρώτο στοιχείο</li>
	<li>Δεύτερο στοιχείο</li>
	<li>Τρίτο στοιχείο</li>
</ol>
  1. Πρώτο στοιχείο
  2. Δεύτερο στοιχείο
  3. Τρίτο στοιχείο

Εδώ, στην ετικέτα <ol> έχει προστεθεί η ιδιότητα start με τιμή 10.

<ol start="10">

Αυτό σημαίνει οτι η αρίθμηση των στοιχείων της συγκεκριμένης αριθμημέμη λίστας θα ξεκινάει από το 10.

Η ιδιότητα type

Η ιδιότητα type ορίζει το είδος της αρίθμησης. Αυτή μπορεί να είναι:

  • type=A (Αρίθμηση με κεφαλαία λατινικά)
  • type=a (Αρίθμηση με πεζά λατινικά)
  • type=I (Ρωμαϊκή αρίθμηση με κεφαλαία)
  • type=i (Ρωμαϊκή αρίθμηση με πεζά)
  • type=1 (Αραβική αρίθμηση)
<ol type="i">
	<li>Πρώτο στοιχείο</li>
	<li>Δεύτερο στοιχείο</li>
	<li>Τρίτο στοιχείο</li>
</ol>
  1. Πρώτο στοιχείο
  2. Δεύτερο στοιχείο
  3. Τρίτο στοιχείο

Εδώ, στην ετικέτα <ol> έχει προστεθεί η ιδιότητα type με τιμή i.

<ol type="i">

Αυτό σημαίνει οτι η αρίθμηση των στοιχείων της συγκεκριμένης αριθμημένης λίστας θα είναι λατινική.

Το ερώτημα που θα μπορούσε να τεθεί εδώ σαν άσκηση είναι:

Πως μπορώ να έχω μια λίστα με λατινική αρίθμηση και να ξεκινάει την αρίθμηση από το 10;

Η απάντηση είναι: Συνδυασμός των ιδιοτήτων type και start. Δείτε το παράδειγμα που ακολουθεί.

<ol type="i" start="10">
	<li>Πρώτο στοιχείο</li>
	<li>Δεύτερο στοιχείο</li>
	<li>Τρίτο στοιχείο</li>
</ol>
  1. Πρώτο στοιχείο
  2. Δεύτερο στοιχείο
  3. Τρίτο στοιχείο

Η προκαθορισμένη αρίθμηση είναι η Αραβική.

Η ιδιότητα reversed

Η ιδιότητα reversed είναι τύπου bool και ενμφανίζει την αρίθμηση σε φθίνουσα σειρά.

Η λίστα <ul> (unordered list)

Τα στοιχεία της λίστας αυτής εμφανίζονται με κουκκίδες.

<ul>
	<li>Πρώτο στοιχείο</li>
	<li>Δεύτερο στοιχείο</li>
	<li>Τρίτο στοιχείο</li>
</ul>
  • Πρώτο στοιχείο
  • Δεύτερο στοιχείο
  • Τρίτο στοιχείο

Παρατηρήστε ότι για κάθε στοιχείο της λίστας απαιτείται η ετικέτα <li>.

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

Ιδιότητες της ετικέτας <ul>

Για την ετικέτα ul η ιδιότητα είναι η: type.

Η ιδιότητα type

Η ιδιότητα type ορίζει το είδος της κουκίδας. Αυτή μπορεί να είναι:

  • type=circle (Κυκλική κενή κουκίδα)
  • type=disk (Κυκλική κουκίδα)
  • type=square (Τετράγωνη κουκίδα)
<ul type="square">
	<li>Πρώτο στοιχείο
	<li>Δεύτερο στοιχείο
	<li>Τρίτο στοιχείο
</ul>
  • Πρώτο στοιχείο
  • Δεύτερο στοιχείο
  • Τρίτο στοιχείο

Η λίστα περιγραφής (Description List)

Οι λίστες περιγραφής χρησιμοποιούνται για καταχώρηση λιστών όπως λεξικά ή γλωσσάρια

Χρησιμοποιούμε τρεις ετικέτες για αυτές τις λίστες:

  • dl (description list): Λειτουργεί ως περιέκτης της λίστας
  • dt (description term): Χρησιμοποιείται για την καταχώρηση του όρου (term).
  • dd (description definition): Χρησιμοποιείται για τον ορισμό ή επεξήγηση του όρου
<dl>
	<dt>HTML</dt>
		<dd>HTML is the standard markup language for Web pages</dd>
	<dt>CSS</dt>
		<dd>CSS is the language we use to style an HTML document</dd>
</dl>
HTML
HTML is the standard markup language for Web pages
CSS
CSS is the language we use to style an HTML document

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