Internet
Now Reading
6ο Μάθημα HTML-Δημιουργία Λιστών
0

6ο Μάθημα HTML-Δημιουργία Λιστών

by Ελένη Χαλικιά2 November, 2012

Περιγραφή Μαθήματος
Στο σημερινό μας μάθημα θα δείτε τις ετικέτες για δημιουργία λιστών, τη σημασιολογική τους έννοια, το πως μπορείτε να τις χρησιμοποιήσετε και μερικά παραδείγματα για να τις κατανοήσετε.
 
Εισαγωγή στις ετικέτες
Οι ετικέτες αυτές είναι για δημιουργία λιστών σε ιστοσελίδες HTML είτε είναι αριθμημένες λίστες, είτε μη αριθμημένες ή είτε με κουκκίδες.

Σημασιολογία ετικετών
<li> </i> : Η ετικέτα αυτή χρησιμοποιείτε στις λίστες για να ορίσει το κάθε

                στοιχείο της λίστας
<ol> </ol> : Η ετικέτα αυτή χρησιμοποιείτε για δημιουργία αριθμημένης λίστας
<ul> </ul> : Η ετικέτα αυτή χρησιμοποιείτε για δημιουργία λίστας με κουκκίδες
<dt> </dt> : Η ετικέτα αυτή χρησιμοποιείτε στις λίστες για να ορίσει κάθε στοιχείο
                   το οποίο βρίσκετε σε μια λίστα ορισμού
<dd> </dd> :Η ετικέτα αυτή χρησιμοποιείτε στις λίστες για να περιγράψει κάθε  
                    στοιχείο το οποίο βρίσκετε σε μια λίστα ορισμού

Παράδειγμα Αριθμημένης Λίστας
Σε αυτό το παράδειγμα θα δείτε πως μπορείτε να δημιουργήσετε μια αριθμημένη λίστα και ποιο συγκεκριμένα δείτε την εικόνα εδώ.


Κώδικας Παραδείγματος:
 <!DOCTYPE html>
<html>
  <head>
      <title>Αριθμημένη Λίστα</title>
   </head>
     <body>
         <h3>Μάρκες  Αυτοκινήτων</h3>
            <ol>
               <li>Ferrari</li>
               <li>Fiat </li>
               <li>Opel</li>
            </ol>
    </body>
</html>

Παράδειγμα Λίστας με κουκκίδες
Σε αυτό το παράδειγμα θα δείτε πως μπορείτε να δημιουργήσετε μια λίστα με κουκκίδες και ποιο συγκεκριμένα δείτε την παρακάτω εικόνα.


Κώδικας Παραδείγματος:
<!DOCTYPE html>
<html>
  <head>
      <title>Λίστα με κουκκίδες</title>
   </head>
     <body>
         <h3>Λειτουργικά Συστήματα Linux</h3>
            <ul>
               <li>openSUSE</li>
               <li>Ubuntu </li>
               <li>Fedora</li>
            </ul>
    </body>
</html>

Παράδειγμα μη Αριθμημένης Λίστας
Σε αυτό το παράδειγμα θα δείτε πως μπορείτε να δημιουργήσετε μια μη αριθμημένη λίστα και ποιο συγκεκριμένα δείτε την παρακάτω εικόνα.


Κώδικας Παραδείγματος:
<!DOCTYPE html>
<html>
  <head>
      <title>Μη Αριθμημένη Λίστα</title>
   </head>
     <body>
           <dt>Αποθηκευτικά μέσα:</dt>
           <dd>CD</dd>
         <dd>DVD</dd>         
           <dd>USB</dd>
           <dd>Hard Disk</dd>     
      </body>
</html>

Γενικό Παράδειγμα Λιστών
Σε αυτό το παράδειγμα θα δείτε το πως μπορείτε μέσα σε μια ιστοσελίδα HTML να έχετε τρεις διαφορετικές λίστες και ποιο συγκεκριμένα δείτε την παρακάτω εικόνα.

Κώδικας Παραδείγματος:

<!DOCTYPE html>
<html>
  <head>
      <title>Λίστες</title>
   </head>
     <body>
         <h3>Μάρκες  Αυτοκινήτων</h3>
            <ol>
               <li>Ferrari</li>
               <li>Fiat </li>
               <li>Opel</li>
            </ol>
       <br/>
       </br>
          <h3>Λειτουργικά Συστήματα Linux</h3>
            <ul>
               <li>openSUSE</li>
               <li>Ubuntu </li>
               <li>Fedora</li>
            </ul>
      <br/>
      <br/>
             <dt>Αποθηκευτικά μέσα:</dt>
                     <dd>CD</dd>
                    <dd>DVD</dd>         
                      <dd>USB</dd>
                    <dd>Hard Disk</dd>    
    </body>
</html>

Επίλογος
Στο επόμενο μάθημα μας για την HTML θα δείτε τις ετικέτες για επιλογή γραμματοσειρών σε κείμενα και ποιο συγκεκριμένα τα εξής:

  • Σημασιολογία των ετικετών
  • Χρήση των ετικετών 
  • Παραδείγματα ετικετών

Κατέβασμα Μαθήματος
Κατεβάστε το έκτο μας μάθημα HTML στον υπολογιστή σας εντελώς δωρεάν σε μορφή pdf.
Download

Συντάκτης
Ελένη Χαλικιά

Τεχνικός Τεχνολογίας Internet

Τεχνικός Εφαρμογών Πληροφορικής

Comments

comments