Υποενότητα 5.3: Χρήσιμα στοιχεία

Το στοιχείο div

Η ετικέτα <div> χρησιμοποιείται για την ομαδοποίηση μεγάλων περιοχών HTML με σκοπό την εφαρμογή CSS (ή JavaScript όπως θα δούμε αργότερα).

Στην ιστοσελίδα, εμφανίζεται λευκός χώρος πριν και μετά το στοιχείο div.

Μια κατάλληλη χρήση του στοιχείου <div> θα ήταν, αν θέλουμε να εφαρμόσουμε το ίδιο στυλ σε πολλαπλές παραγράφους της HTML. Για παράδειγμα, εάν θέλαμε 10 από τις παραγράφους μας να έχουν το ίδιο στυλ, θα μπορούσαμε να τις ομαδοποιήσουμε χρησιμοποιώντας το στοιχείο <div> και να εφαρμόσουμε την απαραίτητη κλάση μόνο μία φορά αντί για 10.

Παραδείγματα

Ο ακόλουθος κώδικας:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
        .cl1 {background:lightblue}
    </style> 
  </head>
  <body>
    <p>This is a paragraph before the div</p>
    <div>
        This is a div with no style
    </div>
    <p>This is a paragraph in the middle</p>
    <div class="cl1">
        <p>This is a p in a div with a blue background</p>
    </div>
  </body>
</html>

θα δημιουργήσει μια σελίδα που εμφανίζεται ως:

div class

Ο ακόλουθος κώδικας:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
        .cl1 {background:yellow; font-size:16pt; font-family:courier}
        .cl2 {background:lightblue; font-size:3em; font-family:Arial; width:30%}
    </style> 
  </head>
  <body>
    <p>This is a paragraph before the div</p>
    <div class="cl1">
        This is a div with a yellow background
    </div>
    <p>This is a paragraph in the middle</p>
    <div class="cl2">
        This is a div with a blue background
    </div>
  </body>
</html>

θα δημιουργήσει μια σελίδα που εμφανίζεται ως:

div width