html λίστες

Σε αυτό το άρθρο παρουσιάζουμε τη δυνατότητα που μας δίνει η γλώσσα HTML όσον αφορά τις λίστες στην κατασκευή ιστοσελίδων.
Οι λίστες που χρησιμοποιούνται στις ιστοσελίδες είναι δυο ειδών: ταξινομημένες και μη ταξινομημένες.

Μη ταξινομημένες html λίστες

Οι μη ταξινομημένες html λίστες ξεκινάνε με την ετικέτα <ul>. Κάθε στοιχείο της λίστας ξεκινάει με την ετικέτα <li>.
Τα στοιχεία της λίστας εμφανίζονται με κουκκίδες, όπως στο παράδειγμα που ακολουθεί:
—————————–
<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>

—————————–
Το αποτέλεσμα φαίνεται στην εικόνα:
μη ταξινομημένες html λίστες

Επιλογή συμβόλου μη ταξινομημένης html λίστας

Η ιδιότητα CSS list-style-type property μας επιτρέπει να καθορίσουμε τη μορφοποίηση του συμβόλου που μπαίνει στα αριστερά της λίστας.
Οι διαθέσιμες επιλογές είναι οι παρακάτω:

disc Τοποθετεί το σύμβολο της κουκίδας (είναι το προκαθορισμένο)
circle Τοποθετεί το σύμβολο του κύκλου
square Τοποθετεί το σύμβολο του τετραγώνου
none Δεν τοποθετεί κανένα σύμβολο (το αφήνει κενό)

Αναλόγως το είδος του περιεχομένου που δημοσιεύουμε όταν κατασκευάζουμε μια ιστοσελίδα μπρούμε να επιλέξουμε τον κατάλληλο τύπο μη ταξινομημένης html λίστας.
Αυτά φαίνονται στα παραδείγματα που ακολουθούν:

—————————–
<ul style=»list-style-type:disc»>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
—————————–
Εδώ βλέπουμε το αποτέλεσμα:

μη ταξινομημένη λίστα με κουκκίδες
μη ταξινομημένη λίστα με κουκκίδες

—————————–
<ul style=»list-style-type:circle»>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
—————————–
Παρακάτω βλέπουμε το αποτέλεσμα:
μη ταξινομημένη λίστα με κύκλους

—————————–
<ul style=»list-style-type:square»>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul
—————————–
Στη συνέχεια δείχνουμε το αποτέλεσμα:

μη ταξινομημένη λίστα με τετράγωνα
μη ταξινομημένη λίστα με τετράγωνα

—————————–
<ul style=»list-style-type:none»>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
—————————–
Ακολουθεί το αποτέλεσμα στο φυλλομετρητή:

μη ταξινομημένη λίστα με κενά
μη ταξινομημένη λίστα με κενά

Ταξινομημένη Λίστα

Μια ταξινομημένη λίστα ξεινάει με την ετικέτα <ol>. Κάθε στοιχείο της λίστας ξεκινάει με την ετικέτα <li>.
Η προκαθορισμένη επιλογή είναι τα στοιχεία λίστας να έχουν αριθμό στα αριστερά τους, όπως στο παράδειγμα που ακολουθεί:
—————————–
<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>
—————————–
Στη συνέχεια παρουσιάζουμε το αποτέλεσμα όπως φαίνεται στο φυλλομετρητή:
Ταξινομημένη Λίστα

Επιλογή τύπου αρίθμησης ταξινομημένης html λίστας

Η ιδιότητα type attribute της ετικέτας <ol> μας επιτρέπει να καθορίσουμε τον τύπο αρίθμησης για τον αριθμό που μπαίνει στα αριστερά της λίστας.
Οι διαθέσιμες επιλογές είναι οι παρακάτω:

type=»1″ Θα χρησιμοποιηθούν οι συνηθισμένοι αριθμοί (είναι το προκαθορισμένο)
type=»A» Θα χρησιμοποιηθούν κεφαλαία γράμματα
type=»a» Θα χρησιμοποιηθούν μικρά γράμματα
type=»I» Θα χρησιμοποιηθούν λατινικοί αριθμοί ως γράμματα γράμματα
type=»i» Θα χρησιμοποιηθούν λατινικοί αριθμοί ως μικρά γράμματα

Ακολουθούν παραδείγματα που δείχνουν τη χρήση του τύπου αρίθμησης:

Ταξινομημένη λίστα με αριθμούς

—————————–
<ol type=»1″>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
—————————–
Στη συνέχεια δείχνουμε το αποτέλεσμα:
Ταξινομημένη Λίστα με αριθμούς

Ταξινομημένη λίστα με κεφαλαία γράμματα

—————————–
<ol type=»A»>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
—————————–
Εδώ έχουμε το αποτέλεσμα:
Ταξινομημένη Λίστα με κεφαλαία γράμματα

Ταξινομημένη λίστα με μικρά γραάμματα

—————————–
<ol type=»a»>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
—————————–
Ακολουθεί το αποτέλεσμα:

Ταξινομημένη λίστα με μικρά γραάμματα
Ταξινομημένη λίστα με μικρά γραάμματα

Ταξινομημένη λίστα με κεφαλαίους λατινικούς αριθμούς

—————————–
<ol type=»I»>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
—————————–
Στη συνέχεια παρουσιάζουμε το αποτέλεσμα:
Ταξινομημένη λίστα με κεφαλαίους λατινικούς αριθμούς

Ταξινομημένη λίστα με μικρούς λατινικούς αριθμούς

—————————–
<ol type=»i»>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
—————————–
Στη συνέχεια φαίνεται το αποτέλεσμα:
Ταξινομημένη λίστα με μικρούς λατινικούς αριθμούς

HTML λίστες περιγραφής

Η γλώσσα HTML υποστηρίζει επίσης λίστες περιγραφής.

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

Η ετικέτα <dl> δηλώνει την έναρξη της λίστας περιγραφής.
Η ετικέτα <dt> χρησιμοποιείται για να δηλώσουμε το όνομα του όρου.
Η ετικέτα <dd> χρησιμοποιείται για την περιγραφή του όρου.
Ακολουθεί παράδειγμα με λίστα περιγραφής:
—————————–
<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

</body>
</html>
—————————–
Αποτέλεσμα:
HTML λίστες περιγραφής

Οριζόντιες λίστες

Οι λίστες στη γλώσσα html μπορούν να παρουσιαστούν με πολλούς τρόπους χρησιμοποιώντας HTML.
Μια συνηθισμένη δημοφιλής επιλογή είναι να παρουσιάσουμε τα στοιχεία της λίστας οριζόντα.
Αυτό συνηθίζεται σε περιπτώσεις που θέλουμε να έχουμε οριζόντιο menu, όπως στο παράδειγμα που ακολουθεί:
—————————–
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}
</style>
</head>
<body>

<ul>
<li><a href=»#home»>Home</a></li>
<li><a href=»#news»>News</a></li>
<li><a href=»#contact»>Contact</a></li>
<li><a href=»#about»>About</a></li>
</ul>

</body>
</html>
—————————–
Και προκύπτει το αποτέλεσμα:
οριζόντιες λίστες

Ποιοτική κατασκευή ιστοσελίδας

Όταν θέλουμε να κάνουμε ποιοτική κατασκευή ιστοσελίδας πρέπει να χρησιμοποιήσουμε όλες τις διαθέσιμες επιλογές της γλώσσας HTML αλλά και των CSS. Ένα πολύ καλό παράδειγμα είναι να εμφανίσουμε τα στοιχεία της ταξινομημένης λίστας σε οριζόντα διάταξη. Αυτό συνηθίζεται πολύ στα menu. Όλα τα στοιχεία της html έχουν τα μυστικά τους. Είναι δεκάδες άλλες λεπτομέρειες της γλώσσας html που χρειάζεται να γνωρίζουμε καλά όταν ξεκινάμε να κατασκευάσουμε μια ιστοσελίδα. Αυτές οι λεπτομέρειες είναι που κάνουν μια ιστοσελίδα να έχει επαγγελματική όψη και να κερδίζει τον επισκέπτη. Και αυτός είναι ο λόγος που η κατασκευή ιστοσελίδων απαιτεί άριστη γνώση της γλώσσας html.