Δημιουργία Ιστοσελίδων Κεφάλαιο 4 – Εισαγωγή στις λίστες

Δημοσιεύτηκε από τον/την codebrakes στις 27/08/201827/08/2018

Δημιουργία Ιστοσελίδων
Κεφάλαιο 4 - Εισαγωγή στις λίστες

Στο προηγούμενο κεφάλαιο αναφέραμε μερικά χρήσιμα HTML tags για μορφοποίηση κειμένου. Σε αυτό το κεφάλαιο θα κάνουμε μια εισαγωγή στις λίστες, τον τρόπο δηλαδή με τον οποίο μπορούμε να φτιάξουμε αριθμητικές λίστες, λίστες με bullets, λίστες με αλφαβητική σειρά κλπ.

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

Για να μπορέσουμε να δημιουργήσουμε μια αριθμητική λίστα χρησιμοποιούμε τα HTML tag <ol> και </ol>. Οτιδήποτε βρίσκεται εντός αυτού του HTML tag αποτελεί αντικείμενο αυτής της αριθμημένης λίστας και για να αποδώσουμε εναν αριθμό σε αυτό το αντικείμενο χρησιμοποιούμε τα HTML tag <li> και </li>.

<html>
   <head>
      <title> Αριθμητική λίστα </title>
   </head>

   <body>

      <p> Αριθμητική λίστα </p>
     
      <ol> <!-- Έναρξη αριθμητικής λίστας -->
        <li> Αντικείμενο 1 </li>    
        <li> Αντικείμενο 2 </li>    
        <li> Αντικείμενο 3 </li>    
        <li> Αντικείμενο 4 </li>
      </ol> <!-- Τέλος αριθμητικής λίστας -->
   
  </body>
</html>

Σε αυτό το σημείο καταφέραμε να φτιάξουμε μια αριθμημένη λίστα απο το 1 έως το 4. Τι θα συμβεί όμως αν εμείς θελήσουμε η αρίθμηση να μην ξεκινάει απο το προκαθορισμένο του που είναι το 1 αλλά με έναν συγκεκριμένο αριθμό. Για να το κάνουμε αυτό χρησιμοποιούμε την παράμετρο start=”#” μέσα στο HTML tag <ol> κι όπου αστερίσκος ο αριθμός με τον οποίο επιθυμούμε να αρχίσει η αρίθμηση των αντικειμένων της λίστας. Για παράδειγμα έστω η παρακάτω αρίθμηση σε μια ιστοσελίδα.

<html>
   <head>
      <title> Αριθμητική λίστα </title>
   </head>

   <body>

      <p> Αριθμητική λίστα </p>

      <ol start="5"> <!-- Έναρξη αριθμητικής λίστας -->
        <li> Αντικείμενο 1 </li>    
        <li> Αντικείμενο 2 </li>    
        <li> Αντικείμενο 3 </li>    
        <li> Αντικείμενο 4 </li>
      </ol> <!-- Τέλος αριθμητικής λίστας -->
   </body>
</html

Μπορούμε επίσης αντί για αριθμούς να έχουμε αλφαβητική αρίθμηση δηλαδή “a, b, c” κλπ. Έστω οτι εμείς θέλουμε να επεξεργαστούμε την ιστοσελίδα μας και να εμφανήσουμε τα περιεχόμενα με αλφαβητική αρίθμηση. Για να το κάνουμε αυτό γράφουμε τα εξής.

<html>
   <head>
      <title> Αλφαβητικά αριθμημένη λίστα </title>
   </head>

   <body>

      <p> Αλφαβητικά αριθμημένη λίστα </p>
     
      <!-- Έναρξη αλφαβητικά αριθμημένης λίστας -->
      <ol type="a"> 
        <li> Αντικείμενο 1 </li>    
        <li> Αντικείμενο 2 </li>    
        <li> Αντικείμενο 3 </li>    
        <li> Αντικείμενο 4 </li>
      </ol> 
      <!-- Τέλος αλφαβητικά αριθμημένης λίστας -->
   </body>
</html>

Παρατηρούμε στο HTML tag <ol> την παράμετρο type=”a” η οποία είναι με κίτρινο χρώμα. Η παράμετρος αυτή αποτελεί την ένδειξη ότι η λίστα αυτή είναι μια αλφαβητικά αριθμημένη λίστα. Το αποτέλεσμα που θα μας εφμανήσει είναι το εξής.

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

<html>
   <head>
      <title> Αλφαβητικά αριθμημένη λίστα </title>
   </head>

   <body>

    <p> Αλφαβητικά αριθμημένη λίστα </p> 
    <!-- Έναρξη αλφαβητικά αριθμημένης λίστας -->
  
     <ol type="A"> 
      <li> Αντικείμενο 1 </li>    
      <li> Αντικείμενο 2 </li>    
      <li> Αντικείμενο 3 </li>    
      <li> Αντικείμενο 4 </li>
     </ol> 
     <!-- Τέλος αλφαβητικά αριθμημένης λίστας -->
   
  </body>
</html>

Αλλάζοντας το σε κεφαλαίο A αλλάζει και την αλφαβητική αρίθμηση σε κεφαλαία γράμματα. Υπάρχουν διάφορες τιμές που μπορούμε να αποδώσουμε στην παράμετρο type=”” ο παρακάτω πίνακας δίνει όλες αυτές τις τιμές.

type=”1″ – Αρίθμητική λίστα.
type=”a” – Αλφαβητικά αριθμημένη λίστα.
type=”A” – Αλφαβητικά αριθμημένη λίστα (κεφαλαία γράμματα).
type=”Ι” – Αριθμητική λίστα με Λατινικούς αριθμούς (Κεφαλαία).
type=”i” – Αριθμητική λίστα με Λατινικούς αριθμούς.

Ίσως ο πιο συνήθης τύπος λίστας περιεχομένων τόσο σε έγγραφα word όσο και σε ιστοσελίδες. Έστω για παράδειγμα η παρακάτω λίστα με bullets.

Ας δούμε πως μπορούμε να υλοποιήσουμε μια τέτοια λίστα στον text editor μας.

<html>
   <head>
      <title> Λίστα με bullets </title>
   </head>

   <body>

     <p> Λίστα με bullets </p>
     
     <!-- Έναρξη λίστας με bullets -->
     <ul> 
        <li> Αντικείμενο 1 </li>    
        <li> Αντικείμενο 2 </li>    
        <li> Αντικείμενο 3 </li>    
        <li> Αντικείμενο 4 </li>
     </ul> 
     <!-- Τέλος λίστας με bullets -->
   </body>
</html>

Με το HTML tag <ul> </ul> ανοίγουμε μια λίστα με bullets και με τα HTML tags <li> </li> δημιουργούμε ένα bullet. Μπορούμε επίσης να επιλέξουμε και άλλα bullets πέραν των κλασσικών που υπάρχουν. Για να το κάνουμε αυτό χρησιμοποιούμε την παράμετρο type=”#τύπος bullet”. Όπου τύπος bullet βάζουμε ότι ακολουθεί στον παρακάτω πίνακα.

type=”disc” – Τα κλασσικά (default) bullets.
type=”circle” – Εσωτερικά κενός κύκλος.
type=”square” – Τετράγωνο σχήμα.

Ας δούμε καθένα απο αυτά και το αποτέλεσμα που θα μας δείξουν στον browser μας. Το πρώτο bullet το είδαμε παραπάνω καθότι είναι το προκαθορισμένο (default) παρόλα αυτά ας δούμε όλους τους τύπους bullets του παραπάνω πίνακα.

<html>
   <head>
      <title> Τύποι απο λίστες με bullets </title>
   </head>

   <body>

    <p> Τύποι απο λίστες με bullets </p>
     
    <!-- Έναρξη λίστας με default bullets -->
    <ul type="disc"> 
      <li> Αντικείμενο 1 </li>    
      <li> Αντικείμενο 2 </li>    
      <li> Αντικείμενο 3 </li>    
      <li> Αντικείμενο 4 </li>
     </ul> 
     <!-- Τέλος λίστας με default bullets -->
     
    <!-- Έναρξη λίστας με circle bullets -->
    <ul type="circle"> 
      <li> Αντικείμενο 1 </li>    
      <li> Αντικείμενο 2 </li>    
      <li> Αντικείμενο 3 </li>    
      <li> Αντικείμενο 4 </li>
     </ul> 
     <!-- Τέλος λίστας με circle bullets -->
      
     <!-- Έναρξη λίστας με square bullets -->  
      <ul type="square"> 
        <li> Αντικείμενο 1 </li>    
        <li> Αντικείμενο 2 </li>    
        <li> Αντικείμενο 3 </li>    
        <li> Αντικείμενο 4 </li>
     </ul> 
     <!-- Τέλος λίστας με square bullets -->
  
  </body>
</html>

Τι γίνεται όμως αν εμείς θέλουμε να φτιάξουμε μια λίστα η οποία να μας παρέχει περιγραφή για κάθε αντικείμενο που έχει, ποία θα ήταν η καλύτερη μέθοδος να εφαρμόσουμε ;
Για να το καταλάβουμε ας δούμε ένα παράδειγμα, έστω η παρακάτω ιστοσελίδα.

<html>
   <head>
      <title> Λίστα περιγραφής </title>
   </head>

   <body>

      <p> Λίστα αντικειμένων με περιγραφή </p>
      
      <!-- Έναρξη λίστας περιγραφής -->
      <dl> 
        <dt> Αντικείμενο 1 </dt>
        <dd> Εδώ είναι η περιγραφή του αντικείμενου 1 </dd>

        <dt> Αντικείμενο 2 </dt>
        <dd> Εδώ είναι η περιγραφή του αντικείμενου 2 </dd>

        <dt> Αντικείμενο 3 </dt>
        <dd> Εδώ είναι η περιγραφή του αντικείμενου 3 </dd>
      <dl> 
      <!-- Τέλος λίστας περιγραφής -->
   
   </body>
</html>

Τελευταία ενημέρωση: 17/08/2018

Δημιουργία Ιστοσελίδων Κεφάλαιο 4 – Εισαγωγή στις λίστες