Εισαγωγή στις Λίστες (HTML Lists)
Η HTML μάς επιτρέπει να παρουσιάζουμε πληροφορίες σε μορφή λιστών.
Οι λίστες είναι ένας πολύ πρακτικός τρόπος για να οργανώνουμε περιεχόμενο, όπως οδηγίες, στοιχεία, προϊόντα ή συνδέσμους.
Υπάρχουν τρεις βασικοί τύποι λιστών στην HTML:
| Είδος λίστας |
Ετικέτα |
Περιγραφή |
| Ταξινομημένη λίστα |
<ol> |
Η σειρά των στοιχείων έχει σημασία (1, 2, 3…). |
| Μη ταξινομημένη λίστα |
<ul> |
Η σειρά δεν έχει σημασία (σημάδια κουκίδων). |
| Λίστα ορισμών |
<dl> |
Χρησιμοποιείται για ορισμούς ή περιγραφές όρων. |
🟢 1. Μη Ταξινομημένες Λίστες (Unordered Lists)
Οι λίστες αυτές ξεκινούν με την ετικέτα <ul>
Κάθε στοιχείο της λίστας δηλώνεται με <li> (list item).
🔹 Παράδειγμα:
Αποτέλεσμα:
👉 Από προεπιλογή, η HTML χρησιμοποιεί κουκίδες (•) μπροστά από κάθε στοιχείο.
🔵 2. Ταξινομημένες Λίστες (Ordered Lists)
Οι λίστες αυτές ξεκινούν με την ετικέτα <ol>
Κάθε στοιχείο δηλώνεται επίσης με <li>, αλλά τα στοιχεία αριθμούνται αυτόματα.
🔹 Παράδειγμα:
Αποτέλεσμα:
-
Προθέρμανε τον φούρνο.
-
Ανακάτεψε τα υλικά.
-
Ψήσε για 30 λεπτά.
👉 Μπορείς να αλλάξεις το είδος της αρίθμησης με το χαρακτηριστικό type:
-
type="A" για κεφαλαία γράμματα (A, B, C)
-
type="a" για πεζά γράμματα (a, b, c)
-
type="I" για ρωμαϊκούς αριθμούς (I, II, III)
🟣 3. Λίστες Ορισμών (Definition Lists)
Αυτή η λίστα χρησιμοποιείται για όρους και ορισμούς.
-
<dl> → αρχίζει τη λίστα ορισμών
-
<dt> → δηλώνει τον όρο (definition term)
-
<dd> → δηλώνει τον ορισμό (definition description)
🔹 Παράδειγμα:
Αποτέλεσμα:
HTML
Η γλώσσα δομής ιστοσελίδων.
CSS
Η γλώσσα μορφοποίησης και στυλ ιστοσελίδων.
🌈 Παράδειγμα Ολοκληρωμένης Σελίδας
✅ Τι πρέπει να θυμάσαι
-
Οι λίστες δημιουργούνται με τις ετικέτες <ul>, <ol>, <dl>.
-
Τα στοιχεία της λίστας δηλώνονται πάντα με <li> (εκτός από λίστες ορισμών).
-
Μπορείς να ενσωματώσεις λίστες μέσα σε άλλες λίστες (π.χ. υποκατηγορίες).
-
Με την CSS μπορείς να αλλάξεις το είδος κουκίδας, το χρώμα και τη στοίχιση.
Λάβε δράση – Πειραματίσου στο W3Schools
Μπορείς να δοκιμάσεις όσα έμαθες για τις λίστες ζωντανά, μέσα από το περιβάλλον του W3Schools.
Εκεί μπορείς να αλλάξεις τον κώδικα και να δεις αμέσως το αποτέλεσμα!
🔗 HTML Lists – Try it Yourself:
👉 https://www.w3schools.com/html/html_lists.asp
ΔΡΑΣΤΗΡΙΟΤΗΤΑ 1 – Εξερεύνησε στο W3Schools
🔗 Άνοιξε τον παρακάτω σύνδεσμο:
👉 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists
Στην αριστερή στήλη θα δεις τον κώδικα HTML με δύο λίστες:
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Στην δεξιά πλευρά βλέπεις το αποτέλεσμα της HTML σελίδας.
🧠 Βήμα 2 – Παρατήρησε
✏️ Ερωτήσεις:
- Τι παρατηρείς στη μορφή της μη ταξινομημένης λίστας (<ul>) σε σχέση με την ταξινομημένη (<ol>);
- Ποιο στοιχείο εμφανίζεται πρώτο και ποιο τελευταίο στη λίστα;
- Ποιο tag χρησιμοποιείται για κάθε στοιχείο της λίστας;
💻 Βήμα 3 – Πειραματίσου
Πάτα “Try it Yourself” και δοκίμασε να αλλάξεις:
1️⃣ Στη μη ταξινομημένη λίστα (<ul>):
- Άλλαξε τα στοιχεία σε φρούτα, π.χ.
- <li>Μήλο</li>
- <li>Πορτοκάλι</li>
- <li>Μπανάνα</li>
- Πρόσθεσε ένα ακόμη στοιχείο (π.χ. “Αχλάδι”).
2️⃣ Στην ταξινομημένη λίστα (<ol>):
- Άλλαξε τα στοιχεία σε βήματα μιας συνταγής, π.χ.
- <li>Ανακάτεψε τα υλικά</li>
- <li>Πρόσθεσε το νερό</li>
- <li>Ψήσε στο φούρνο</li>
3️⃣ Πάτησε RUN ▶️ και δες το αποτέλεσμα.
🎨 Προαιρετική πρόκληση
Δοκίμασε να αλλάξεις τον τρόπο αρίθμησης της ταξινομημένης λίστας:
<ol type=”A”>
<li>Ανακάτεψε</li>
<li>Πρόσθεσε</li>
<li>Ψήσε</li>
</ol>
❓ Πώς αλλάζει το αποτέλεσμα;
(Από αριθμούς → σε γράμματα)
🏁 Βήμα 4 – Συμπέρασμα
✍️ Γράψε :
- Ποια ετικέτα χρησιμοποιώ για μη ταξινομημένη λίστα;
- Ποια για ταξινομημένη λίστα;
Ποια για κάθε στοιχείο της λίστας;
Δραστηριότητα 2 – Αλλάζω μια λίστα
Στόχος: Να επεξεργαστείς υπάρχον κώδικα και να κατανοήσεις πώς αλλάζουν οι λίστες.
1️⃣ Δημιούργησε ένα νέο αρχείο με όνομα mylist.html
2️⃣ Αντέγραψε τον παρακάτω κώδικα:
| <!DOCTYPE html>
<html lang=”el”>
<head>
<meta charset=”UTF-8″>
<title>Η Λίστα μου</title>
</head>
<body>
<h2>Αγαπημένα ζώα</h2>
<ul>
<li>Σκύλος</li>
<li>Γάτα</li>
<li>Παπαγάλος</li>
</ul>
</body>
</html> |
3️⃣ Άλλαξε τη λίστα ώστε να δείχνει αγαπημένα φαγητά.
4️⃣ Πρόσθεσε ένα ακόμη στοιχείο στη λίστα.
5️⃣ Άλλαξε την ετικέτα <ul> σε <ol> και δες τη διαφορά στο αποτέλεσμα.
✏️ Σκέψου:
Πότε είναι καλύτερο να χρησιμοποιώ <ol> και πότε <ul>;
🌈 Δραστηριότητα 3 – Δημιούργησε τη δική σου λίστα!
Στόχος: Δημιούργησε μια προσωπική σελίδα που περιέχει πολλαπλές λίστες.
1️⃣ Δημιούργησε ένα νέο αρχείο με όνομα favorites.html
2️⃣ Πρόσθεσε τίτλο, επικεφαλίδες και λίστες με τα αγαπημένα σου πράγματα.
