Μάθημα : Α' Λυκείου | Εφαρμογές Πληροφορικής -

Κωδικός : EL49190

Α' Λυκείου | Εφαρμογές Πληροφορικής -

EL49190  -  ΝΙΚΟΣ ΛΥΜΠΕΡΤΑΣ

Ενότητες μαθήματος - 04. HTML - Λίστες (Lists) (<ul> <ol> <li>)

04. HTML - Λίστες (Lists) (<ul> <ol> <li>)

03. HTML - χαρακτηριστικά των... 05. HTML - Πίνακες (Tables) (<...

Μετά τα πρώτα μαθήματα πρέπει να είμαστε εξοικειωμένοι με τα παρακάτω:

  • Τι είναι μια ιστοσελίδα, ένας ιστότοπος και ο Παγκόσμιος ιστός
  • Τι είναι η γλώσσα html
  • Τι είναι ένα element και ποια είναι η δομή του (start tag - content - end tag)
  • Τα κυριότερα html elements (<html>, <head> και <body>)
  • Πως ορίζουμε τον τίτλο της σελίδας, επικεφαλίδες και πως θα προσθέσουμε παραγράφους
  • Τι είναι τα attributes και πως τους δίνουμε τιμές
  • Πως επιλέγουμε ένα από τα διαθέσιμα χρώματα της html
  • Πως αποθηκεύουμε τις ιστοσελίδες μας και πως μπορούμε να δούμε το αποτέλεσμα αλλά και να επεξεργαστούμε ένα ήδη υπάρχον html αρχείο

Αυτό που βλέπετε από πάνω είναι μια λίστα της html. Κάθε καινούργια κουκίδα με το κείμενο που τη συνοδεύει αποτελεί και ένα νέο στοιχείο της λίστας. Στη λίστα αυτή (με τις κουκίδες ή άλλο αντίστοιχο σύμβολο) δεν παίζει ρόλο η σειρά των διάφορων στοιχείων που περιέχει, οπότε είναι μια Unordered List. Για να εντάξουμε μια τέτοια λίστα στη σελίδα μας πρέπει να χρησιμοποιήσουμε το element <ul> .. </ul>. Ανάμεσά τους πρέπει να προσθέσουμε τα στοιχεία που θέλουμε να έχει η λίστα με τα <li> .. </li> (List Item)

 

Παράδειγμα:

<ul>

    <li>Α' Λυκείου </li>

    <li>Β' Λυκείου </li>

    <li>Γ' Λυκείου </li>

</ul>

 

Αποτέλεσμα:

  • Α' Λυκείου
  • Β' Λυκείου
  • Γ' Λυκείου

 

Σε μία λίστα έχουμε τη δυνατότητα να εμφανίσουμε αριθμημένα τα στοιχεία της (αντί για κουκίδα να έχουν μπροστά αύξοντα αριθμό). Για να το πετύχουμε αυτό, πρέπει να χρησιμοποιήσουμε το <ol> .. </ol> (Ordered List) αντί του <ul>. Τα στοιχεία της λίστας δεν χρειάζονται κάποια αλλαγή, έτσι:

 

Παράδειγμα:

<ol>

    <li>Α' Λυκείου </li>

    <li>Β' Λυκείου </li>

    <li>Γ' Λυκείου </li>

</ol>

 

Αποτέλεσμα:   

  1. Α' Λυκείου   
  2. Β' Λυκείου
  3. Γ' Λυκείου

Άσκηση:

Δοκιμάστε να προσθέσετε και να αφαιρέσετε στοιχεία στις λίστες που θα βρείτε στο w3schools καθώς και να μετατρέψετε τις λίστες από unordered σε ordered και το αντίστροφο.

 

Προσπαθήστε να προσθέσετε λίστες στις σελίδες σας!