Σε αυτό το άρθρο παρουσιάζουμε τη δυνατότητα που μας δίνει η γλώσσα 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 λίστας
Η ιδιότητα 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.
Μια συνηθισμένη δημοφιλής επιλογή είναι να παρουσιάσουμε τα στοιχεία της λίστας οριζόντα.
Αυτό συνηθίζεται σε περιπτώσεις που θέλουμε να έχουμε οριζόντιο 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.
