HTML: List Tags

Δημοσιεύτηκε από τον alex

Υπάρχουν τριών ειδών λίστες, οι αριθμημένες, οι μη αριθμημένες και οι λίστες για ορισμούς.

Οι αριθμημένες λίστες ξεκινάνε με την ετικέτα ol, που είναι τα αρχικά της φράσης ordered list. Μέσα στην ol ετικέτα έχω τοποθετήσει τις li ετικέτες, η οποίες είναι τα αρχικά της λέξης line και μέσα στην κάθε li ετικέτα, έχω τοποθετήσει το κείμενο.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
     <title>website</title>
</head>

<body>
     <h1>Stories</h1>
     <p>Story, a recounting of a sequence of events</p>
             <ol>
             <li>short story</li>
             <li>long story</li>
             <li>books</li>
             </ol>
     <h2>Fairy Tales</h2>
     <p>A fairy tale is a type of short story that typically features folkloric
characters, such as fairies, goblins, elves, trolls, dwarves, giants or gnomes,
and usually magic or enchantments.</p>
     <h3>Cinderella</h3>
     <p>Cinderella and The Little Glass Slipper is a folk tale embodying a myth-element of unjust oppression/triumphant reward.</p>     <h3>Little Red Riding Hood</h3>
     <p>Little Red Riding Hood, also known as Little Red Cap, is a French fairy tale about a young girl and a Big Bad Wolf.</p>     <h2>Mythology</h2>
     <p>The term mythology can refer either to the study of myths, or to a body or collection of myths.</p>     <h2>Legends</h2>
     <p>A legend (Latin, legenda, "things to be read") is a narrative of human actions
that are perceived both by teller and listeners to take place within human history
and to possess certain qualities that give the tale verisimilitude.</p>
</body>
</html>

Αφού αποθηκεύσω το έγγραφο και κάνω κλικ στην ανανέωση, βλέπουμε ότι ο περιηγητής εμφανίζει την αριθμημένη λίστα.

html ol lists

Εάν θέλω να την κάνω μη αριθμημένη, τότε απλά θα αλλάξω το ol σε ul, το οποίο σημαίνει unordered list και θα αποθηκεύσω το έγγραφο μου.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
     <title>website</title>
</head>

<body>
     <h1>Stories</h1>
     <p>Story, a recounting of a sequence of events</p>
<ul>
<li>short story</li>
<li>long story</li>
<li>books</li>
</ul>
     <h2>Fairy Tales</h2>
     <p>A fairy tale is a type of short story that typically features folkloric
characters, such as fairies, goblins, elves, trolls, dwarves, giants or gnomes,
and usually magic or enchantments.</p>
     <h3>Cinderella</h3>
     <p>Cinderella and The Little Glass Slipper is a folk tale embodying a myth-element of unjust oppression/triumphant reward.</p>     <h3>Little Red Riding Hood</h3>
     <p>Little Red Riding Hood, also known as Little Red Cap, is a French fairy tale about a young girl and a Big Bad Wolf.</p>     <h2>Mythology</h2>
     <p>The term mythology can refer either to the study of myths, or to a body or collection of myths.</p>     <h2>Legends</h2>
     <p>A legend (Latin, legenda, "things to be read") is a narrative of human actions
that are perceived both by teller and listeners to take place within human history
and to possess certain qualities that give the tale verisimilitude.</p>
</body>
</html>

Αφού κάνω αποθήκευση, θα ανανεώσω τον περιηγητή μου και θα δω πως η λίστα έγινε μη αριθμημένη.

Το τελευταίο είδος λίστας, είναι τα definition lists, τα οποία χρησιμοποιούνται συνήθως για επεξήγηση όρων. Αρχικά θα ανοίξω μία dl ετικέτα και μέσα σε αυτή, θα ανοίξω μία dt ετικέτα, που σημαίνει definition term. Αφού περάσω τον τίτλο που θα έχει η dt ετικέτα, θα την κλείσω και από κάτω θα φτιάξω μία άλλη ετικέτα, την dd, η οποία χρησιμοποιείται για την επεξήγηση του όρου που γράψαμε παραπάνω. Έπειτα θα φτιάξω ένα ακόμη ζεύγος από dt και dd ετικέτες ακριβώς από κάτω.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
     <title>website</title>
</head>

<body>
     <h1>Stories</h1>
     <p>Story, a recounting of a sequence of events</p>
<ul>
<li>short story</li>
<li>long story</li>
<li>books</li>
</ul>
     <h2>Fairy Tales</h2>
     <p>A fairy tale is a type of short story that typically features folkloric
characters, such as fairies, goblins, elves, trolls, dwarves, giants or gnomes,
and usually magic or enchantments.</p>

     <dl>
     <dt>Cinderella</dt>
     <dd>Cinderella and The Little Glass Slipper is a folk tale embodying a myth-element of unjust oppression/triumphant reward.</dd>     <dt>Little Red Riding Hood</dt>
     <dd>Little Red Riding Hood, also known as Little Red Cap, is a French fairy tale about a young girl and a Big Bad Wolf.</dd>
     </dl>     <h3>Cinderella</h3>
     <p>Cinderella and The Little Glass Slipper is a folk tale embodying a myth-element of unjust oppression/triumphant reward.</p>     
     <h3>Little Red Riding Hood</h3>
     <p>Little Red Riding Hood, also known as Little Red Cap, is a French fairy tale about a young girl and a Big Bad Wolf.</p>     
     <h2>Mythology</h2>
     <p>The term mythology can refer either to the study of myths, or to a body or collection of myths.</p>
     <h2>Legends</h2>
     <p>A legend (Latin, legenda, "things to be read") is a narrative of human actions
that are perceived both by teller and listeners to take place within human history
and to possess certain qualities that give the tale verisimilitude.</p>

</body>
</html>

Θα αποθηκεύσω το έγγραφο μου και θα ανανεώσω τον περιηγητή μου. Βλέπουμε πως η definition list έχει αυτή τη μορφή.

Leave a Reply

Your email address will not be published.

 
 
 
εκπαιδευτικά βίντεο

Εκπαιδευτικά Βίντεο

Εκπαιδευτείτε μέσα από τα εντελώς δωρεάν βίντεο μας, πάνω σε web τεχνολογίες όπως HTML, CSS, Javascript και PHP.

 
δωρεάν themes

Δωρεάν Themes

Στη Supremo Hosting προσφέρουμε εντελώς δωρεάν premium wordpress themes για τις ανάγκες της ιστοσελίδας σας!

 
κατασκευή ιστοσελίδων

Κατασκευή Ιστοσελίδων

Επωφεληθείτε από τις εξαιρετικά χαμηλές τιμές που προσφέρουμε πάνω στην κατασκευή ιστοσελίδων και eshop.

cards

H supremohosting αναστέλλει την λειτουργία της και οι υπηρεσίες hosting και τα  domain name (.gr αλλά και .com, net κλπ) μεταφέρθηκαν στην εταιρεία INTECHS Hosting Solutions. Για οποιαδήποτε διευκρίνηση επικοινωνήστε μαζί μας στο 2104629566