 |
Μη Αριθμημένη Λίστα:
|
Οι λίστες μπορούν να παρουσιάσουν αντικείμενα απο πληροφορίες που είναι σε τέτοια μορφή που επιτρέπουν να διαβαστούν ευκολότερα. Μία λίστα είναι και αυτή η γραμμή που ακολουθεί.
Σχεδόν πάντα στον κυβερνοχώρο, οι ιστοσελίδες εμφανίζουν λίστες. Άλλοτε είναι αντικείμενα που προηγούνται σε μορφή σφαίρας (Μη αριθμημένες) και άλλοτε σε μορφή διαδοχικής αριθμητικής λίστας (Αριθμημένες).
Τέτοιες λίστες είναι εύκολες να τυποποιηθούν στην HTML, και μπορούν ακόμα να γίνουν σύνθετες (λίστες με λίστες), να παράγουν μία μορφή. Οι λίστες είναι ακόμα χρήσιμες, να δημιουργήσουν έναν κατάλογο ή έναν πίνακα που να περιέχει δεδομένα ή επικεφαλίδες.
Αυτές οι λίστες εμφανίζουν αντικείμενα με "βούλες" ή με άλλες μάρκες στην αρχή του κειμένου. Λέγονται <ul> .. </ul> ετικέτες στον κώδικα της HTML.
Δείτε το παρακάτω παράδειγμα:
|
Μη Αριθμημένη Λίστα:
|
Αυτός είναι ο κώδικας της:
<B>Μη Αριθμημένη Λίστα:</B>
<ul>
<li> Στοιχείο 1
<li> Στοιχείο 2
<li> Στοιχείο 3
</ul>
Η ετικέτα <ul> μαρκάρει την αρχή και το τέλος της λίστας, και η ετικέτα <li> δείχνει κάθε αντικείμενο.
Οι τακτοποιημένες λίστες είναι αυτές που τα αντικείμενα ξεκινούν με το "1.". Η μόνη διαφορά στην ετικέτα είναι οτι αλλάζει μόνο το ul σε ol.
Δείτε το παρακάτω παράδειγμα:
|
Αριθμημένη Λίστα:
|
Ο κώδικας αυτής της λίστας είναι ο εξής:
<B>Αριθμημένη Λίστα:</B>
<ol>
<li> Στοιχείο 1
<li> Στοιχείο 2
<li> Στοιχείο 3
</ol>
Οι αριθμημένες και οι μη αριθμημένες λίστες, μπορούν να έχουν διαφορετικά επίπεδα. Η κάθε μία, μπορεί να κάνει υποεπίπεδα μέσα στη λίστα, με άλλες λίστες (βλέπε παράδειγμα). Το μείζων θέμα είναι η επαλήθευση της κάθε λίστας ώστε να τελειώνει σωστά και να είναι σωστή η ένωση.
Μπορείτε να ξεκινήσετε με μια πολύπλοκη ματιά με αυτές τις ετικέτες <ol> <li> </ul> <li>, αλλά θυμηθείτε τη βασική δομή:
<ul>
<ol>
<li>
<li>
<li>
<li>
</ul>
</ol>
Ακολουθεί ένα παράδειγμα ατακτοποίητης λίστας, με υποεπίπεδα άλλες λίστες:
|
Σύνθετη μη αριθμημένη
λίστα
|
Παρατηρήστε ότι η βούλα αλλάζει σε κάθε επίπεδο.
Αυτός είναι ο κώδικας του παραδείγματος:
<B>Σύνθετη
μη αριθμημένη λίστα</B>
<ul>
<li>This is the first item
<li>This is the second item
<ul>
<li> This is the first subitem of the second
item
<ul>
<li> And this is a subitem of a
subitem
<li> Getting lost yet?
</ul>
<li> This is the second subitem of the second
item
<li> This is the third subitem of the second
item
</ul>
<li>This is the third item
</ul>
Δεν μπορείτε μόνο να περιλαμβάνετε αριθμημένες με αριθμημένες, αλλά και τους δύο τύπους ταυτόχρονα.
Δείτε το παρακάτω παράδειγμα:
|
Ένθετη λίστα με
αριθμημένη και μη-αριθμημένη λίστα
|
Αυτός είναι ο κώδικας του παραδείγματος. Προσέξτε πώς η HTML παραγραφεί για να είναι ευκολότερη η ανάγνωση του κώδικα:
<B>Ένθετη λίστα με
αριθμημένη και μη-αριθμημένη λίστα</B>
<ol>
<li>This is the first item
<li>This is the second item
<ul>
<li> This is the first
subitem of the second item
<ol>
<li>
And this is a numbered subitem of a subitem
<li>
And this is another numbered subitem of a subitem
<li>
Getting lost yet?
</ol>
<li> This is the second
subitem of the second item
<li> This is the third
subitem of the second item
</ul>
<li>This is the third item
</ol>
Σημείωση: Εάν δεν έχετε το κείμενο απο το προηγούμενο μάθημα, μπορείτε να το κατεβάσετε απο εδώ.
Ακολουθήστε τις επόμενες οδηγίες, για να προσθέσετε αριθμημένες και μη-αριθμημένες λίστες, στο HTML αρχείο.
Examples:
<ul>
<li>caldera
<li>vesicularity
<li>pahoehoe
<li>rheology
<li>lahar
</ul>
Your mission is to find information and
report on a volcano,
other than the ones listed above, that has erupted in the last
100 years. Your reports must include:
<ol>
<li>Type of volcano
<li>Geographic location
<li>Name, distance, and population of nearest major city
<li>Dates of most recent and most destructive eruptions.
<li>Other events associated with the recent eruptions
(earthquakes, floods, mudslides, etc)
</ol>
<p>
Then, write a one page description on the major hazards to humans
in the vicinity of this volcano. Speculate on what you would do
if you were in charge of minimizing the risk to the population.