Print bookPrint book

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

Site: ΕΛ/ΛΑΚ Moodle
Course: Σχεδιασμός WEB και Παραγωγή Ψηφιακού Περιεχομένου
Book: Υποενότητα 5.3: Χρήσιμα στοιχεία
Printed by: Guest user
Date: Tuesday, 23 April 2024, 8:05 PM

Description

  • Το στειχείο div 
  • Οι ιδιότητες float και clear 
  • Το στειχείο span 

Table of contents

Το στοιχείο 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

Επίπλευση (float) και Καθαρισμός (clear)

Έτσι, έχουμε τον γνωστό μας κώδικα:

Κώδικας:

<!DOCTYPE html>
<html lang="en">
  <head>
     <style>
       .cl1 {background:yellow; font-size:1em; font-family:courier; width:20%}
        .cl2 {background:lightblue; font-size:1em; font-family:courier; width:20% }
     </style> 
   </head>
   <body>
     <div class="cl1">
        This is a div with a yellow background 
     </div>
     <div class="cl2">
        This is a div with a blue background
     </div>
     <ol >
        <li>First item</li>
        <li>Second item</li>
     </ol>
   </body>
</html>

και την εμφάνισή του:

No float

Θέλουμε να επιτύχουμε την έξοδο που εμφανίζεται στην επόμενη εικόνα. Πρέπει να μετακινήσουμε το κίτρινο div εντελώς αριστερά και να μετακινηθεί- επιπλεύσει το μπλε div δίπλα σε αυτό.

The output

Για να το επιτύχουμε, θα χρησιμοποιήσουμε την ιδιότητα float που καθορίζει τον τρόπο με τον οποίο θα πρέπει να επιπλεύσει ένα στοιχείο.

Στον κώδικα μας, δημιουργούμε μια τάξη και την ονομάζουμε .leftfloat.

.floatLeft{float:left}
και την εφαρμόζουμε και στα δύο divs
<div class="cl1 floatLeft">
<div class="cl2 floatLeft">
Η έξοδος είναι 
Just float
Βλέπουμε ότι η λίστα έχει επίσης μετεγκατασταθεί. Δεν το θέλουμε. Για να διορθώσουμε αυτό θα χρησιμοποιήσουμε μια άλλη ιδιότητα CSS που ονομάζεται "clear".
Αυτό καθορίζει ποια στοιχεία μπορούν να επιπλέουν δίπλα στο στοιχείο εκκαθάρισης και από ποια πλευρά.
Έτσι, πηγαίνουμε στον κώδικα μας και δημιουργούμε μια τάξη με όνομα .clearLeft 
.clearLeft{clear: left}
και την εφαρμόζουμε στη λίστα:
<ol class="clearLeft">
We have achieved our desirable outcome.
Προκειμένου να συνεχίσουμε τη διαδικασία με περισσότερα στοιχεία html, πρέπει να εφαρμόσουμε τις κλάσεις.floatLeft και.clearLeft στη λίστα μας.
<ol class="floatLeft clearLeft">

Τελικός κώδικας:

<!DOCTYPE html>
<html lang="en">
  <head>
     <style>
       .floatLeft{float:left}
       .clearLeft{clear:left}
       .cl1 {background:yellow; font-size:1em; font-family:courier; width:20%}
       .cl2 {background:lightblue; font-size:1em; font-family:courier; width:20% }
     </style> 
  </head>
  <body>
     <div class="cl1 floatLeft">
         This is a div with a yellow background 
     </div>
     <div class="cl2 floatLeft">
         This is a div with a blue background
     </div>
     <ol class="floatLeft clearLeft" >
         <li>First item</li>
         <li>Second item</li>
     </ol>
  </body>
</html>
Περισσότερες πληροφορίες: https://www.w3schools.com/css/css_float.asp

Το στοιχείο span

Η ετικέτα <span> χρησιμοποιείται για την ομαδοποίηση μικρού μέρους ενός κειμένου.

Παρόμοια με το <div>,χρησιμοποιείται για την εφαρμογή κανόνων CSS ή JavaScript


Ωστόσο, σε αντίθεση με το <div>, το span είναι στοιχείο inline. TΑυτό σημαίνει ότι δεν επιφέρει αλλαγή γραμμής. Έτσι, μπορεί να χρησιμοποιηθεί μέσα σε οποιοδήποτε στοιχείο.

Παράδειγμα

Οι κανόνες CSS :

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      #cl1 {background:yellow;}
    </style> 
  </head>
  <body>
    <p>This is not span text <span>but this is</span> and this isn't</p>
    <p>This is not span text <span id ="cl1">but this is</span> and this isn't</p>
  </body>
</html>

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

span tag

Άσκηση

Περισσότερες πληροφορίες για τα στοιχεία div και span: https://www.w3schools.com/html/html_blocks.asp

Άσκηση

  1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice05.3.01.html στον φάκελο "Exercises".
  2. Χρησιμοποιήστε κώδικα από αυτήν την υποενότητα και επικολλήστε τον στο αρχείο αυτό.
  3. Επεξεργαστείτε το αρχείο. Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα:

Λύση:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .myol { margin:0px; padding-right:10px}
      .floatLeft{float:left}
      .cl1 {background:yellow; font-size:1em; font-family:courier; width:20%}
      .myspan{color:red; font-size:1.2em}
    </style> 
  </head>
  <body>
    <ol class="myol floatLeft " > <li>First item</li> <li>Second <span class="myspan">item</span></li> </ol>
    <div class="cl1 floatLeft">This is a div with a yellow background </div>
  </body>
</html>