032.2 Μάθημα 1
Πιστοποιητικό: |
Web Development Essentials |
|---|---|
Έκδοση: |
1.0 |
Θέμα: |
032 Markup HTML Εγγράφου |
Σκοπός: |
032.2 HTML Semantics και Ιεραρχία Εγγράφου |
Μάθημα: |
1 απο 1 |
Εισαγωγή
Στο προηγούμενο μάθημα, μάθαμε ότι το HTML είναι μια markup γλώσσα [γλώσσα σήμανσης] που μπορεί να περιγράψει σημασιολογικά το περιεχόμενο ενός ιστότοπου. Ένα έγγραφο HTML περιέχει έναν αποκαλούμενο skeleton [σκελετό] που αποτελείται από τα HTML elements <html>, <head> και <body>. Ενώ το element <head> περιγράφει ένα μπλοκ μετα-πληροφοριών για το HTML έγγραφο που θα είναι αόρατο στον επισκέπτη του ιστότοπου, το element <body> μπορεί να περιέχει πολλά άλλα elements για τον καθορισμό της δομής και του περιεχομένου του HTML εγγράφου.
Σε αυτό το μάθημα, θα δούμε τη μορφοποίηση κειμένου, τα θεμελιώδη semantic elements του HTML και το σκοπό τους, και στον τρόπο δομής ενός εγγράφου HTML. Θα χρησιμοποιήσουμε μια λίστα αγορών ως παράδειγμά μας.
|
Note
|
Όλα τα επόμενα παραδείγματα κώδικα βρίσκονται μέσα στο element |
Κείμενο
Στο HTML, κανένα μπλοκ κειμένου δεν πρέπει να είναι γυμνό, να βρίσκεται έξω από ένα element. Ακόμη και μια σύντομη παράγραφος θα πρέπει να είναι τυλιγμένη στα HTML tags <p>, που αποτελεί σύντομο όνομα για το paragraph.
<p>Short text element spanning only one line.</p>
<p>A text element containing much longer text that may span across multiple lines, depending on the size of the web browser window.</p>Ανοιγμένος σε ένα πρόγραμμα περιήγησης, αυτός ο κώδικας HTML παράγει το αποτέλεσμα που εμφανίζεται στην Figure 1.
Από προεπιλογή, τα προγράμματα περιήγησης προσθέτουν κενά πριν και μετά τα <p> elements για βελτιωμένη αναγνωσιμότητα. Για το λόγο αυτό, το <p> ονομάζεται block element.
Headings
Το HTML ορίζει έξι επίπεδα headings για την περιγραφή και τη δομή του περιεχομένου ενός εγγράφου HTML. Αυτά τα headings επισημαίνονται από τα HTML tags <h1>, <h2>, <h3>, <h4>, <h5> και <h6>.
<h1>Heading level 1 to uniquely identify the page</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>Ένα πρόγραμμα περιήγησης αποδίδει αυτόν τον κώδικα HTML όπως φαίνεται στην Figure 2.
Εάν είστε εξοικειωμένοι με επεξεργαστές κειμένου όπως το LibreOffice ή το Microsoft Word, μπορεί να παρατηρήσετε κάποιες ομοιότητες στον τρόπο με τον οποίο ένα έγγραφο HTML χρησιμοποιεί διαφορετικά επίπεδα headings και πώς αποδίδονται στο πρόγραμμα περιήγησης. Από προεπιλογή, το HTML χρησιμοποιεί το μέγεθος για να υποδείξει την ιεραρχία και τη σημασία των headings και προσθέτει χώρο πριν και μετά από κάθε επικεφαλίδα για να τη διαχωρίσει οπτικά από το περιεχόμενο.
Ένα heading που χρησιμοποιεί το element <h1> βρίσκεται στην κορυφή της ιεραρχίας και επομένως θεωρείται το πιο σημαντικό heading που προσδιορίζει το περιεχόμενο της σελίδας. Είναι συγκρίσιμο με το <title> element που συζητήθηκε στο προηγούμενο μάθημα, αλλά εντός του περιεχομένου του HTML εγγράφου. Επακόλουθα heading elements μπορούν να χρησιμοποιηθούν για την περαιτέρω δόμηση του περιεχομένου. Βεβαιωθείτε ότι δεν παραλείπετε τα ενδιάμεσα επίπεδα headings. Η ιεραρχία των εγγράφων πρέπει να ξεκινά με <h1>, να συνεχίζει με <h2>, μετά <h3> και ούτω καθεξής. Δεν χρειάζεται να χρησιμοποιείτε κάθε heading element μέχρι το <h6> εάν το περιεχόμενό σας δεν το απαιτεί.
|
Note
|
Τα headings είναι σημαντικά εργαλεία για τη δόμηση ενός εγγράφου HTML, τόσο semantically όσο και οπτικά. Ωστόσο, τα headings δεν πρέπει ποτέ να χρησιμοποιούνται για την αύξηση του μεγέθους ενός κατά τα άλλα δομικά ασήμαντου κειμένου. Σύμφωνα με την ίδια αρχή, δεν πρέπει κανείς να κάνει μια σύντομη παράγραφο με bold ή italic για να μοιάζει με heading· χρησιμοποιήστε heading tags για να επισημάνετε headings. |
Ας ξεκινήσουμε τη δημιουργία του εγγράφου HTML της λίστας αγορών ορίζοντας το περίγραμμά του. Θα δημιουργήσουμε ένα <h1> element για να περιέχει τον τίτλο της σελίδας, σε αυτήν την περίπτωση Garden Party, ακολουθούμενο από σύντομες πληροφορίες τυλιγμένες σε ένα <p> element. Επιπλέον, χρησιμοποιούμε δύο <h2> elements για να εισαγάγουμε τις δύο ενότητες περιεχομένου Agenda και Please bring.
<h1>Garden Party</h1>
<p>Invitation to John's garden party on Saturday next week.</p>
<h2>Agenda</h2>
<h2>Please bring</h2>Ανοιγμένος σε πρόγραμμα περιήγησης, αυτός ο κώδικας HTML παράγει το αποτέλεσμα που εμφανίζεται στην Figure 3.
Αλλαγή Γραμμών
Μερικές φορές μπορεί να είναι απαραίτητο να προκληθεί ένα line break [αλλαγή γραμμής] χωρίς να εισαγάγετε άλλο ένα <p> element ή οποιοδήποτε παρόμοιο block element. Σε τέτοιες περιπτώσεις, μπορείτε να χρησιμοποιήσετε το <br> element που είναι αυτοκλειόμενο. Σημειώστε ότι θα πρέπει να χρησιμοποιείται μόνο για την εισαγωγή line breaks που ανήκουν στο περιεχόμενο, όπως συμβαίνει με ποιήματα, στίχους τραγουδιών ή διευθύνσεις. Εάν το περιεχόμενο διαχωρίζεται απο το νόημα, είναι προτιμότερο να χρησιμοποιήσετε ένα <p> element.
Για παράδειγμα, θα μπορούσαμε να χωρίσουμε το κείμενο στην παράγραφο πληροφοριών από το προηγούμενο παράδειγμά μας ως εξής:
<p>
Invitation to John's garden party.<br>
Saturday, next week.
</p>Σε ένα πρόγραμμα περιήγησης, αυτός ο κώδικας HTML παράγει το αποτέλεσμα που εμφανίζεται στην Figure 4.
Οριζόντιες Γραμμές
Το element <hr> ορίζει μια οριζόντια γραμμή, που ονομάζεται επίσης horizontal rule. Από προεπιλογή, εκτείνεται σε όλο το πλάτος του parent element. Το element <hr> μπορεί να σας βοηθήσει να ορίσετε μια θεματική αλλαγή στο περιεχόμενο ή να διαχωρίσετε τις ενότητες του εγγράφου. Το element είναι αυτοκλειόμενο και επομένως δεν έχει closing tag.
Για το παράδειγμά μας, θα μπορούσαμε να διαχωρίσουμε τα δύο headings:
<h1>Garden Party</h1>
<p>Invitation to John's garden party on Saturday next week.</p>
<h2>Agenda</h2>
<hr>
<h2>Please bring</h2>Η Figure 5 δείχνει το αποτέλεσμα αυτού του κώδικα.
Λίστες HTML
Στο HTML, μπορείτε να ορίσετε τρεις τύπους λιστών:
- Ordered lists [Ταξινομημένες λίστες]
-
όπου έχει σημασία η σειρά των elements της λίστας
- Unordered lists [Αταξινόμητες λίστες]
-
όπου η σειρά των elements της λίστας δεν είναι ιδιαίτερα σημαντική
- Description lists [Περιγραφικές λίστες]
-
για να περιγράψετε πιο προσεκτικά ορισμένους όρους
Η καθεμία περιέχει οποιονδήποτε αριθμό αντικειμένων λίστας. Θα περιγράψουμε κάθε τύπο λίστας.
Ordered Lists
Μια ordered list σε HTML, που υποδηλώνεται χρησιμοποιώντας το HTML element <ol>, είναι μια συλλογή οποιουδήποτε αριθμού αντικειμένων λίστας. Αυτό που κάνει αυτό το element ξεχωριστό είναι ότι η σειρά της λίστας των elements του είναι σχετική. Για να τονιστεί αυτό, τα προγράμματα περιήγησης από προεπιλογή, εμφανίζουν αριθμητικά πριν από τα αντικείμενα της child λίστας.
|
Note
|
Τα |
Για το παράδειγμά μας, μπορούμε να συμπληρώσουμε την ατζέντα για το garden party χρησιμοποιώντας ένα <ol> element με τον ακόλουθο κώδικα:
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>Barbecue</li>
<li>Dessert</li>
<li>Fireworks</li>
</ol>Σε ένα πρόγραμμα περιήγησης, αυτός ο κώδικας HTML παράγει το αποτέλεσμα που εμφανίζεται στην Figure 6.
Επιλογές
Όπως μπορείτε να δείτε σε αυτό το παράδειγμα, τα αντικείμενα της λίστας αριθμούνται με δεκαδικά αριθμητικά που ξεκινούν από το 1 από προεπιλογή. Ωστόσο, μπορείτε να αλλάξετε αυτήν τη συμπεριφορά καθορίζοντας το attribute type του tag <ol>. Οι έγκυρες τιμές για αυτό το attribute είναι 1 για δεκαδικά αριθμητικά, A για κεφαλαία γράμματα, a για πεζά γράμματα, l για λατινικά κεφαλαία αριθμητικά και i για λατινικά πεζά αριθμητικά.
Εάν θέλετε, μπορείτε επίσης να ορίσετε την αρχική τιμή χρησιμοποιώντας το attribute start του tag <ol>. Το attribute start λαμβάνει πάντα μια δεκαδική αριθμητική τιμή, ακόμα κι αν το attribute type ορίζει διαφορετικό τύπο αρίθμησης.
Για παράδειγμα, θα μπορούσαμε να προσαρμόσουμε την ordered list από το προηγούμενο παράδειγμα έτσι ώστε τα αντικείμενα της λίστας να έχουν πρόθεμα κεφαλαία γράμματα, ξεκινώντας από το γράμμα C, όπως φαίνεται στο ακόλουθο παράδειγμα:
<h2>Agenda</h2>
<ol type="A" start="3">
<li>Welcome</li>
<li>Barbecue</li>
<li>Dessert</li>
<li>Fireworks</li>
</ol>Σε ένα πρόγραμμα περιήγησης, αυτός ο κώδικας HTML εμφανίζεται ως Figure 7.
Η σειρά των αντικειμένων της λίστας μπορεί επίσης να αντιστραφεί χρησιμοποιώντας το attribute reversed χωρίς τιμή.
|
Note
|
Σε μια ordered list, μπορείτε επίσης να ορίσετε την αρχική τιμή ενός συγκεκριμένου αντικειμένου της λίστας χρησιμοποιώντας το attribute |
Unordered Lists
Μια unordered list περιέχει μια σειρά από αντικείμενα λίστας που, σε αντίθεση με αυτά σε μια ordered list, δεν έχουν ειδική σειρά ή ακολουθία. Το HTML element για αυτήν τη λίστα είναι <ul>. Για άλλη μια φορά, το <li> είναι το HTML element για την επισήμανση των αντικειμένων της λίστας του.
|
Note
|
Τα |
Για το παράδειγμα του ιστότοπού μας, μπορούμε να χρησιμοποιήσουμε την unordered list για να παραθέσουμε αντικείμενα που πρέπει να φέρουν οι καλεσμένοι στο garden party. Μπορούμε να το πετύχουμε αυτό με τον ακόλουθο HTML κώδικα:
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>Σε ένα πρόγραμμα περιήγησης, αυτός ο κώδικας HTML παράγει το αποτέλεσμα που εμφανίζεται στην Figure 8.
Από προεπιλογή, κάθε αντικείμενο της λίστας αναπαρίσταται χρησιμοποιώντας μια κουκκίδα. Μπορείτε να αλλάξετε την εμφάνισή του χρησιμοποιώντας CSS, το οποίο θα συζητηθεί σε επόμενα μαθήματα.
Nesting Λιστών
Είναι δυνατό το nesting λιστών μέσα σε άλλες λίστες, όπως ordered lists μέσα σε unordered lists και αντίστροφα. Για να επιτευχθεί αυτό, η nested λίστα πρέπει να είναι μέρος ενός element λίστας <li>, επειδή το <li> είναι το μόνο έγκυρο child element των unordered και ordered λιστών. Κατά το nesting, προσέξτε να μην επικαλύπτονται τα HTML tags.
Για το παράδειγμά μας, θα μπορούσαμε να προσθέσουμε ορισμένες πληροφορίες της ατζέντας που δημιουργήσαμε πριν, όπως φαίνεται στο ακόλουθο παράδειγμα:
<h2>Agenda</h2>
<ol type="A" start="3">
<li>Welcome</li>
<li>
Barbecue
<ul>
<li>Vegetables</li>
<li>Meat</li>
<li>Burgers, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li>Fireworks</li>
</ol>Ένα πρόγραμμα περιήγησης αποδίδει τον κώδικα όπως φαίνεται στην Figure 9.
Θα μπορούσατε να προχωρήσετε ακόμη περισσότερο και να κάνετε nesting, πολλών επιπέδων βαθύτερα. Θεωρητικά, δεν υπάρχει όριο στο πόσες λίστες μπορείτε να κάνετε nest. Ωστόσο, όταν το κάνετε αυτό, λάβετε υπόψη την αναγνωσιμότητα για τους επισκέπτες της ιστοσελίδας σας.
Description Lists
Μια description list ορίζεται χρησιμοποιώντας το element <dl> και αντιπροσωπεύει ένα λεξικό με keys και values. Το key είναι ένας όρος ή ένα όνομα που θέλετε να περιγράψετε και το value είναι η περιγραφή. Οι description lists μπορούν να κυμαίνονται από απλά key-value ζεύγη έως εκτενείς ορισμούς.
Ένα key (ή term) ορίζεται χρησιμοποιώντας το element <dt>, ενώ η περιγραφή του ορίζεται χρησιμοποιώντας το element <dd>.
Ένα παράδειγμα για μια τέτοια description list θα μπορούσε να είναι μια λίστα εξωτικών φρούτων που εξηγεί πώς μοιάζουν.
<h3>Exotic Fruits</h3>
<dl>
<dt>Banana</dt>
<dd>
A long, curved fruit that is yellow-skinned when ripe. The fruit's skin
may also have a soft green color when underripe and get brown spots when
overripe.
</dd>
<dt>Kiwi</dt>
<dd>
A small, oval fruit with green flesh, black seeds, and a brown, hairy
skin.
</dd>
<dt>Mango</dt>
<dd>
A fruit larger than a fist, with a green skin, orange flesh, and one big
seed. The skin may have spots ranging from green to yellow or red.
</dd>
</dl>Σε ένα πρόγραμμα περιήγησης, αυτό παράγει το αποτέλεσμα που εμφανίζεται στην Figure 10.
|
Note
|
Σε αντίθεση με τις ordered και unordered lists, σε μια description list, οποιοδήποτε HTML element είναι έγκυρο ως άμεσο child. Αυτό σας επιτρέπει να ομαδοποιήσετε elements και να τα διαμορφώσετε αλλού χρησιμοποιώντας CSS. |
Inline Μορφοποίηση Κειμένου
Στο HTML, μπορείτε να χρησιμοποιήσετε elements μορφοποίησης για να αλλάξετε την εμφάνιση του κειμένου. Αυτά τα elements μπορούν να κατηγοριοποιηθούν ως presentation elements [στοιχεία παρουσίασης] ή phrase elements [στοιχεία φράσης].
Presentation Elements
Τα βασικά presentation elements αλλάζουν τη γραμματοσειρά ή την εμφάνιση του κειμένου· αυτά είναι τα <b>, <i>, <u> και <tt>. Αυτά τα elements ορίστηκαν αρχικά πριν το CSS αφήσει το κείμενο να κάνει bold, italic γραφή κ.λπ. Υπάρχουν τώρα συνήθως καλύτεροι τρόποι για να αλλάξετε την εμφάνιση του κειμένου, αλλά θα εξακολουθείτε να βλέπετε αυτά τα στοιχεία μερικές φορές.
Bold Κείμενο
Για να κάνετε το κείμενο bold, μπορείτε να το τυλίξετε μέσα στο element <b> όπως φαίνεται στο παρακάτω παράδειγμα. Το αποτέλεσμα εμφανίζεται στην Figure 11.
This <b>word</b> is bold.
<b> χρησιμοποιείται για να γίνει έντονο το κείμενο.Σύμφωνα με την HTML5 προδιαγραφή, το element <b> θα πρέπει να χρησιμοποιείται μόνο όταν δεν υπάρχουν πιο κατάλληλα tags. Το element που παράγει το ίδιο output οπτικά, αλλά προσθέτει επιπλέον semantic σημασία στο επισημασμένο κείμενο, είναι το <strong>.
Italic Κείμενο
Για να κάνετε το κείμενο italicize, μπορείτε να το τυλίξετε μέσα στο element <i> όπως φαίνεται στο παρακάτω παράδειγμα. Το αποτέλεσμα εμφανίζεται στην Figure 12.
This <i>word</i> is in italics.
<i> χρησιμοποιείται για να γίνει πλάγιο το κείμενο.Σύμφωνα με την HTML5 προδιαγραφή, το element <i> θα πρέπει να χρησιμοποιείται μόνο όταν δεν υπάρχουν πιο κατάλληλα tags.
Underlined Κείμενο
Για να κάνετε το κείμενο underline, μπορείτε να το τυλίξετε μέσα στο element <u> όπως φαίνεται στο παρακάτω παράδειγμα. Το αποτέλεσμα εμφανίζεται στην Figure 13.
This <u>word</u> is underlined.
<u> χρησιμοποιείται για την υπογράμμιση του κειμένου.Σύμφωνα με την HTML5 προδιαγραφή, το element <u> θα πρέπει να χρησιμοποιείται μόνο όταν δεν υπάρχουν καλύτεροι τρόποι υπογράμμισης του κειμένου. Το CSS παρέχει μια σύγχρονη ενναλακτική.
Γραμματοσειρά Fixed-Width ή Monospaced
Για να εμφανίσετε κείμενο σε monospaced γραμματοσειρά (fixed-width), που χρησιμοποιείται συχνά για την εμφάνιση κώδικα υπολογιστή, μπορείτε να χρησιμοποιήσετε το element <tt> όπως φαίνεται στο παρακάτω παράδειγμα. Το αποτέλεσμα εμφανίζεται στην Figure 14.
This <tt>word</tt> is in fixed-width font.
<tt> χρησιμοποιείται για την εμφάνιση του κειμένου σε fixed-width γραμματοσειρά .Το tag <tt> δεν υποστηρίζεται σε HTML5. Τα προγράμματα περιήγησης εξακολουθούν να το αποδίδουν όπως αναμένεται. Ωστόσο, θα πρέπει να χρησιμοποιήσετε πιο κατάλληλα tags, τα οποία περιλαμβάνουν τα <code>, <kbd>, <var> και <samp>.
Phrase Elements
Τα phrase elements όχι μόνο αλλάζουν την εμφάνιση του κειμένου, αλλά προσθέτουν και semantic σημασία σε μια λέξη ή φράση. Χρησιμοποιώντας τα, μπορείτε να τονίσετε μια λέξη ή να την επισημάνετε ως σημαντική. Αυτά τα elements, σε αντίθεση με τα presentation elements, αναγνωρίζονται από τα screen readers, γεγονός που καθιστά το κείμενο πιο προσιτό σε επισκέπτες με προβλήματα όρασης και επιτρέπει στις μηχανές αναζήτησης να διαβάζουν και να αξιολογούν καλύτερα το περιεχόμενο της σελίδας. Τα phrase elements που χρησιμοποιούμε σε αυτό το μάθημα είναι <em>, <strong> και <code>.
Emphasized Κείμενο
Για να κάνετε emphasize το κείμενο, μπορείτε να το τυλίξετε μέσα στο element <em> όπως φαίνεται στο ακόλουθο παράδειγμα:
This <em>word</em> is emphasized.
<em> χρησιμοποιείται για να δοθεί έμφαση στο κείμενο.Όπως μπορείτε να δείτε, τα προγράμματα περιήγησης εμφανίζουν το <em> με τον ίδιο τρόπο όπως το <i>, αλλά το <em> προσθέτει semantic σημασία ως phrase element, το οποίο βελτιώνει την προσβασιμότητα για επισκέπτες με προβλήματα όρασης.
Strong Κείμενο
Για να επισημάνετε κείμενο ως σημαντικό, μπορείτε να το τυλίξετε μέσα στο element <strong> όπως φαίνεται στο παρακάτω παράδειγμα. Το αποτέλεσμα εμφανίζεται στην Figure 16.
This <strong>word</strong> is important.
<strong> χρησιμοποιείται για την επισήμανση του κειμένου ως σημαντικού.Όπως μπορείτε να δείτε, τα προγράμματα περιήγησης εμφανίζουν το <strong> με τον ίδιο τρόπο όπως το <b>, αλλά το <strong> προσθέτει semantic σημασία ως phrase element, το οποίο βελτιώνει την προσβασιμότητα για επισκέπτες με προβλήματα όρασης.
Κώδικας Υπολογιστή
Για να εισάγετε ένα κομμάτι κώδικα υπολογιστή, μπορείτε να το τυλίξετε μέσα στο element <code>, όπως φαίνεται στο παρακάτω παράδειγμα. Το αποτέλεσμα εμφανίζεται στην Figure 17.
The Markdown code <code># Heading</code> creates a heading at the highest level in the hierarchy.
<code> χρησιμοποιείται για την εισαγωγή ενός τμήματος κώδικα υπολογιστή.Επισημασμένο Κείμενο
Για να επισημάνετε κείμενο με κίτρινο φόντο, παρόμοιο με το στυλ ενός highlighter, μπορείτε να χρησιμοποιήσετε το element <mark> όπως φαίνεται στο παρακάτω παράδειγμα. Το αποτέλεσμα εμφανίζεται στην Figure 18.
This <mark>word</mark> is highlighted.
<mark> χρησιμοποιείται για την επισήμανση κειμένου με κίτρινο φόντο.Μορφοποίηση του Κειμένου της HTML Λίστας Αγορών
Με βάση τα προηγούμενα παραδείγματά μας, ας εισάγουμε μερικά phrase elements για να αλλάξουμε την εμφάνιση του κειμένου, προσθέτοντας ταυτόχρονα και semantic σημασία. Το αποτέλεσμα εμφανίζεται στην Figure 19.
<h1>Garden Party</h1>
<p>
Invitation to <strong>John's garden party</strong>.<br>
<strong>Saturday, next week.</strong>
</p>
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
<hr>
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
Σε αυτό το δείγμα εγγράφου HTML, οι πιο σημαντικές πληροφορίες σχετικά με το ίδιο το garden party επισημαίνονται ως σημαντικές χρησιμοποιώντας το element <strong>. Τα τρόφιμα που είναι διαθέσιμα για το μπάρμπεκιου τονίζονται χρησιμοποιώντας το element <em>. Τα πυροτεχνήματα απλώς επισημαίνονται χρησιμοποιώντας το element <mark>.
Ως άσκηση, μπορείτε να δοκιμάσετε να μορφοποιήσετε άλλα κομμάτια κειμένου χρησιμοποιώντας και άλλα elements μορφοποίησης.
Preformatted Κείμενο
Στα περισσότερα HTML elements, το white space [λευκός χώρος] συνήθως μειώνεται σε ένα μόνο διάστημα ή ακόμη και αγνοείται εντελώς. Ωστόσο, υπάρχει ένα HTML element με το όνομα <pre> που σας επιτρέπει να ορίσετε το λεγόμενο preformatted κείμενο. Το white space στο περιεχόμενο αυτού του element, συμπεριλαμβανομένων των διαστημάτων και των line breaks, διατηρείται και αποδίδεται στο πρόγραμμα περιήγησης. Επιπλέον, το κείμενο εμφανίζεται με γραμματοσειρά fixed-width, παρόμοια με το element <code>.
<pre>
field() {
shift $1 ; echo $1
}
</pre>
<pre> διατηρεί το white space.Ομαδοποίηση Elements
Κατά σύμβαση, τα HTML elements χωρίζονται σε δύο κατηγορίες:
- Block-Level Elements
-
Αυτά εμφανίζονται σε μια νέα γραμμή και καταλαμβάνουν όλο το διαθέσιμο πλάτος. Παραδείγματα block-level elements που έχουμε ήδη συζητήσει είναι τα
<p>,<ol>και<h2>. - Inline-Level Elements
-
Αυτά εμφανίζονται στην ίδια γραμμή με άλλα elements και κείμενο, καταλαμβάνοντας μόνο όσο χώρο απαιτεί το περιεχόμενό τους. Παραδείγματα inline-level elements είναι τα
<strong>,<em>και<i>.
|
Note
|
Το HTML5 έχει εισάγει πιο ακριβείς και συγκεκριμένες κατηγορίες elements, προσπαθώντας να αποφύγει τη σύγχυση με τα CSS block και τα inline πλαίσια. Για απλότητα, θα παραμείνουμε εδώ στη συμβατική υποδιαίρεση σε block και inline elements. |
Τα θεμελιώδη elements για την ομαδοποίηση πολλαπλών elements μαζί είναι τα elements <div> και <span>.
Το element <div> είναι ένα block-level container για άλλα HTML elements και δεν προσθέτει semantic αξία από μόνο του. Μπορείτε να χρησιμοποιήσετε αυτό το element για να διαιρέσετε ένα έγγραφο HTML σε ενότητες και να δομήσετε το περιεχόμενό σας, τόσο για την αναγνωσιμότητα του κώδικα όσο και για εφαρμογή στυλ CSS σε μια ομάδα elements, όπως θα μάθετε σε επόμενο μάθημα.
Από προεπιλογή, τα προγράμματα περιήγησης εισάγουν πάντα ένα line break πριν και μετά από κάθε <div> element, έτσι ώστε το καθένα να εμφανίζεται στη δική του γραμμή.
Αντίθετα, το element <span> χρησιμοποιείται ως container για κείμενο HTML και γενικά χρησιμοποιείται για την ομαδοποίηση άλλων inline elements προκειμένου να εφαρμοστούν στυλ χρησιμοποιώντας CSS σε μικρότερο τμήμα κειμένου.
Το element <span> συμπεριφέρεται ακριβώς όπως το κανονικό κείμενο και δεν ξεκινά σε νέα γραμμή. Είναι επομένως ένα inline element.
Το ακόλουθο παράδειγμα συγκρίνει την οπτική αναπαράσταση του semantic element <p> και των elements ομαδοποίησης <div> και <span>:
<p>Text within a paragraph</p>
<p>Another paragraph of text</p>
<hr>
<div>Text wrapped within a <code>div</code> element</div>
<div>Another <code>div</code> element with more text</div>
<hr>
<span>Span content</span>
<span>and more span content</span>Ένα πρόγραμμα περιήγησης αποδίδει τον κώδικα όπως φαίνεται στην Figure 21.
Είδαμε ήδη ότι από προεπιλογή, το πρόγραμμα περιήγησης προσθέτει κενά διαστήματα πριν και μετά τα <p> elements. Αυτή η πρόσθεση κενών διαστημάτων δεν εφαρμόζεται σε κανένα από τα elements ομαδοποίησης <div> και <span>. Ωστόσο, τα <div> elements μορφοποιούνται ως δικά τους κομμάτια, ενώ το κείμενο στα <span> elements εμφανίζεται στην ίδια γραμμή.
Δομή Σελίδας HTML
Έχουμε συζητήσει πώς να χρησιμοποιήσουμε HTML elements για να περιγράψουμε semantically το περιεχόμενο μιας ιστοσελίδας-με άλλα λόγια, για να μεταφέρουμε νόημα και πλαίσιο στο κείμενο. Μια άλλη ομάδα elements έχει σχεδιαστεί με σκοπό την περιγραφή του semantic structure μιας ιστοσελίδας, μιας έκφρασης ή της δομής της. Αυτά τα elements είναι block elements, δηλαδή συμπεριφέρονται οπτικά παρόμοια με ένα <div> element. Σκοπός τους είναι να ορίσουν την semantic δομή μιας ιστοσελίδας προσδιορίζοντας καλά καθορισμένες περιοχές όπως headers, footers και το κύριο περιεχόμενο της σελίδας. Αυτά τα elements επιτρέπουν τη semantic ομαδοποίηση του περιεχομένου έτσι ώστε να είναι κατανοητό και από έναν υπολογιστή, συμπεριλαμβανομένων των μηχανών αναζήτησης και των προγραμμάτων screen readers.
Το Element <header>
Το <header> element περιέχει εισαγωγικές πληροφορίες για το περιβάλλων semantic element μέσα σε ένα έγγραφο HTML. Ένα header είναι διαφορετικό από ένα heading, αλλά ένα header συχνά περιλαμβάνει ένα heading element (<h1>, … , <h6>).
Στην πράξη, αυτό το element χρησιμοποιείται συχνότερα για να αναπαραστήσει το header της σελίδας, όπως ένα banner με ένα logo. Μπορεί επίσης να χρησιμοποιηθεί για την εισαγωγή του περιεχομένου για οποιοδήποτε από τα ακόλουθα elements: <body>, <section>, <article>, <nav>, ή <aside>.
Ένα έγγραφο μπορεί να έχει πολλαπλά <header> elements, αλλά ένα <header> element δεν μπορεί να γίνει nested σε άλλο <header> element. Ούτε ένα <footer> element μπορεί να χρησιμοποιηθεί σε μέσα σε ένα <header>.
Για παράδειγμα, για να προσθέσουμε ένα header σελίδας στο παράδειγμά μας, μπορούμε να κάνουμε τα εξής:
<header>
<h1>Garden Party</h1>
</header>Δεν θα υπάρχουν ορατές αλλαγές στο έγγραφο HTML, καθώς το <h1> (όπως όλα τα άλλα heading elements) είναι ένα block-level element χωρίς περαιτέρω οπτικές ιδιότητες.
Το Element Περιεχομένου <main>
Το element <main> είναι ένα container για το κεντρικό περιεχόμενο μιας ιστοσελίδας. Δεν πρέπει να υπάρχουν περισσότερα από ένα <main> element σε ένα έγγραφο HTML.
Στο παράδειγμά μας, όλος ο κώδικας HTML που έχουμε γράψει μέχρι τώρα θα τοποθετηθεί μέσα στο element <main>.
<main>
<header>
<h1>Garden Party</h1>
</header>
<p>
Invitation to <strong>John's garden party</strong>.<br>
<strong>Saturday, next week.</strong>
</p>
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
<hr>
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
</main>Όπως το element <header>, το element <main> δεν προκαλεί οπτικές αλλαγές στο παράδειγμά μας.
Το Element <footer>
Το element <footer> περιέχει υποσημειώσεις [footnotes], για παράδειγμα πληροφορίες συγγραφής, στοιχεία επικοινωνίας ή σχετικά έγγραφα, για το περιβάλλων semantic element, π.χ. <section>, <nav> ή <aside>. Ένα έγγραφο μπορεί να έχει πολλαπλά <footer> elements που σας επιτρέπουν να περιγράφετε καλύτερα semantic elements. Ωστόσο, ένα element <footer> δεν μπορεί να γίνει nested μέσα σε ένα άλλο element <footer>, ούτε μπορεί να χρησιμοποιηθεί ένα element <header> μέσα σε ένα <footer>.
Για το παράδειγμά μας, μπορούμε να προσθέσουμε στοιχεία επικοινωνίας για τον οικοδεσπότη (John) όπως φαίνεται στο ακόλουθο παράδειγμα:
<footer>
<p>John Doe</p>
<p>john.doe@example.com</p>
</footer>Το Element <nav>
Το element <nav> περιγράφει μια κύρια μονάδα πλοήγησης, όπως ένα μενού, που περιέχει μια σειρά υπερσυνδέσμων.
|
Note
|
Δεν πρέπει όλοι οι υπερσύνδεσμοι να είναι τυλιγμένοι σε ένα element |
Επειδή οι υπερσύνδεσμοι δεν έχουν ακόμη καλυφθεί, το στοιχείο πλοήγησης δεν θα συμπεριληφθεί στο παράδειγμα αυτού του μαθήματος.
Το Element <aside>
Το element <aside> είναι ένα container για περιεχόμενο που δεν είναι απαραίτητο στην διάταξη του περιεχομένου της κύριας σελίδας, αλλά συνήθως σχετίζεται εμμέσως ή συμπληρωματικά. Αυτό το element χρησιμοποιείται συχνά για sidebars που εμφανίζουν δευτερεύουσες πληροφορίες, όπως ένα γλωσσάρι.
Για το παράδειγμά μας, μπορούμε να προσθέσουμε πληροφορίες διεύθυνσης και ταξιδιού, οι οποίες σχετίζονται μόνο έμμεσα με το υπόλοιπο περιεχόμενο, χρησιμοποιώντας το element <aside>.
<aside>
<p>
10, Main Street<br>
Newville
</p>
<p>Parking spaces available.</p>
</aside>Το Element <section>
Το element <section> ορίζει μια λογική ενότητα σε ένα έγγραφο που αποτελεί μέρος του περιβάλλων semantic element, αλλά δεν θα λειτουργούσε ως αυτόνομο περιεχόμενο, όπως ένα κεφάλαιο.
Στο εγγράφο του παραδείγματός μας, μπορούμε να τυλίξουμε τις ενότητες περιεχομένου για την ατζέντα και να φέρουμε ενότητες λιστών όπως φαίνεται στο ακόλουθο παράδειγμα:
<section>
<header>
<h2>Agenda</h2>
</header>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
</section>
<hr>
<section>
<header>
<h2>Please bring</h2>
</header>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
</section>Αυτό το παράδειγμα προσθέτει επίσης περαιτέρω <header> elements μέσα στις ενότητες, έτσι ώστε κάθε ενότητα να βρίσκεται εντός του δικού της <header> element.
Το Element <article>
Το element <article> ορίζει ανεξάρτητο και αυτόνομο περιεχόμενο που έχει νόημα από μόνο του χωρίς το υπόλοιπο μέρος της σελίδας. Το περιεχόμενό του μπορεί να αναδιανεμηθεί ή να επαναχρησιμοποιηθεί σε άλλο πλαίσιο. Τυπικά παραδείγματα ή υλικό κατάλληλο για ένα <article> element είναι μια ανάρτηση ιστολογίου, μια λίστα προϊόντων για ένα κατάστημα και μια διαφήμιση για ένα προϊόν. Η διαφήμιση θα μπορούσε τότε να υπάρχει τόσο απο μόνη της όσο και εντός μιας μεγαλύτερης σελίδας.
Στο παράδειγμά μας, μπορούμε να αντικαταστήσουμε το πρώτο <section> που τυλίγει την ατζέντα με ένα "<article>" element.
<article>
<header>
<h2>Agenda</h2>
</header>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
</article>Το <header> element που προσθέσαμε στο προηγούμενο παράδειγμα μπορεί να παραμείνει και εδώ, επειδή τα <article> elements ενδέχεται να έχουν τα δικά τους <header> elements.
Το Τελικό Παράδειγμα
Συνδυάζοντας όλα τα προηγούμενα παραδείγματα, το τελικό HTML έγγραφο για την πρόσκλησή μας έχει ως εξής:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Garden Party</title>
</head>
<body>
<main>
<h1>Garden Party</h1>
<p>
Invitation to <strong>John's garden party</strong>.<br>
<strong>Saturday, next week.</strong>
</p>
<article>
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
</article>
<hr>
<section>
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
</section>
</main>
<aside>
<p>
10, Main Street<br>
Newville
</p>
<p>Parking spaces available.</p>
</aside>
<footer>
<p>John Doe</p>
<p>john.doe@example.com</p>
</footer>
</body>
</html>Σε ένα πρόγραμμα περιήγησης, ολόκληρη η σελίδα αποδίδεται όπως φαίνεται στην Figure 22.
Καθοδηγούμενες Ασκήσεις
-
Για καθένα απο τα ακόλουθα tags, υποδείξτε τo αντίστοιχo closing tag:
<h5><br><ol><dd><hr><strong><tt><main> -
Για καθένα απο τα ακόλουθα tags, υποδείξτε εάν σηματοδοτεί την αρχή ενός block ή ενός inline element:
<h3><span><b><div><em><dl><li><nav><code><pre> -
Τι είδους λίστες μπορείτε να δημιουργήσετε στο HTML; Ποια tags πρέπει να χρησιμοποιήσετε για καθεμία από αυτές;
-
Ποια tags περικλείουν τα block elements που μπορείτε να χρησιμοποιήσετε για τη δόμηση μιας σελίδας HTML;
Ασκήσεις Εξερεύνησης
-
Δημιουργήστε μια βασική σελίδα HTML με τον τίτλο “Form Rules”. Θα χρησιμοποιήσετε αυτήν τη HTML σελίδα για όλες τις ασκήσεις εξερεύνησης, καθεμία από τις οποίες βασίζεται στις προηγούμενες. Στη συνέχεια, προσθέστε ένα heading επιπέδου 1 με το κείμενο “How to fill in the request form”, μια παράγραφο με το κείμενο “To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields:” και μια unordered list με τα ακόλουθα στοιχεία λίστας: “Name”, “Surname”, “Email Address”, “Nation”, “Country”, και “Zip/Postal Code”.
-
Βάλτε τα τρία πρώτα πεδία (“Name”, “Surname”, και “Email Address”) με bold, προσθέτοντας επίσης semantic σημασία. Στη συνέχεια, προσθέστε ένα heading επιπέδου 2 με το κείμενο “Required fields” και μια παράγραφο με το κείμενο “Bold fields are mandatory.”
-
Προσθέστε άλλο ένα heading επιπέδου 2 με το κείμενο “Steps to follow”, μια παράγραφο με το κείμενο “There are four steps to follow:”, και μια ordered list με τα ακόλουθα στοιχεία λίστας: “Fill in the fields”, “Click the Submit button”, “Check your e-mail and confirm your request by clicking on the link you receive”, και “Check your e-mail - You will receive the full HTML course in minutes”.
-
Χρησιμοποιώντας το
<div>, δημιουργήστε ένα block για κάθε ενότητα που ξεκινά με ένα heading επιπέδου 2. -
Χρησιμοποιώντας το
<div>, δημιουργήστε άλλο ένα block για την ενότητα που ξεκινά με το heading επιπέδου 1. Στη συνέχεια, χωρίστε αυτό το τμήμα από τα άλλα δύο με ένα horizontal line. -
Προσθέστε ένα header element με το κείμενο “Form Rules - 2021” και το footer element με το κείμενο “Copyright Note - 2021”. Τέλος, προσθέστε το κύριο element που πρέπει να περιέχει τα τρία
<div>blocks.
Σύνοψη
Σε αυτό το μάθημα μάθατε:
-
Πώς να δημιουργήσετε markup για τα περιεχόμενα σε ένα HTML έγγραφο
-
Την ιεραρχική δομή ενός κειμένου HTML
-
Τη διαφορά μεταξύ block και inline HTML elements
-
Πώς να δημιουργήσετε HTML έγγραφα με semantic δομή
Οι ακόλουθοι όροι συζητήθηκαν σε αυτό το μάθημα:
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>-
Τα heading tags.
<p>-
Το tag παραγράφου.
<ol>-
Το ordered list tag.
<ul>-
Το unordered list tag.
<li>-
Το tag λίστας αντικειμένων.
<dl>-
Το description list tag.
<dt>,<dd>-
Τα tags κάθε όρου και η περιγραφή για μια description list.
<pre>-
Το tag διατήρησης μορφοποίησης [preserve formatting].
<b>,<i>,<u>,<tt>,<em>,<strong>,<code>,<mark>-
Τα tags μορφοποίησης.
<div>,<span>-
Τα tags ομαδοποίησης.
<header>,<main>,<nav>,<aside>,<footer>-
Τα tags που χρησιμοποιούνται για να παρέχουν μια απλή δομή και διάταξη σε μια σελίδα HTML.
Απαντήσεις στις Καθοδηγούμενες Ασκήσεις
-
Για καθένα απο τα ακόλουθα tags, υποδείξτε τo αντίστοιχo closing tag:
<h5></h5><br>Δεν υπάρχει
<ol></ol><dd></dd><hr>Δεν υπάρχει
<strong></strong><tt></tt><main></main> -
Για καθένα απο τα ακόλουθα tags, υποδείξτε εάν σηματοδοτεί την αρχή ενός block ή ενός inline element:
<h3>Block Element
<span>Inline Element
<b>Inline Element
<div>Block Element
<em>Inline Element
<dl>Block Element
<li>Block Element
<nav>Block Element
<code>Inline Element
<pre>Block Element
-
Τι είδους λίστες μπορείτε να δημιουργήσετε στο HTML; Ποια tags πρέπει να χρησιμοποιήσετε για καθεμία από αυτές;
Στο HTML, μπορείτε να δημιουργήσετε τρεις τύπους λιστών: ordered lists που αποτελούνται από μια σειρά αριθμημένων αντικειμένων λίστας, unordered lists που αποτελούνται από μια σειρά αντικειμένων λίστας που δεν έχουν ειδική σειρά ή ακολουθία και description lists που αντιπροσωπεύουν καταχωρήσεις όπως σε ένα λεξικό ή εγκυκλοπαίδεια . Μια ordered list περικλείεται μεταξύ των tags
<ol>και</ol>, μια unordered list περικλείεται μεταξύ των tags<ul>και</ul>και μια description list περικλείεται μεταξύ των<dl>και</dl>tags. Κάθε αντικείμενο σε μια ordered ή unordered list περικλείεται μεταξύ των tags<li>και</li>, ενώ κάθε όρος σε μια description list περικλείεται μεταξύ των tags<dt>και</dt>και η περιγραφή του περικλείεται μεταξύ των tags<dd>και</dd>. -
Ποια tags περικλείουν τα block elements που μπορείτε να χρησιμοποιήσετε για τη δόμηση μιας σελίδας HTML;
Τα tags
<header>και</header>περικλείουν το header της σελίδας, τα tags<main>και</main>περικλείουν το κύριο περιεχόμενο της σελίδας HTML, τα tags<nav>και</nav>περικλείουν τη λεγόμενη γραμμή πλοήγησης [navigation bar], τα tags<aside>και</aside>περικλείουν το sidebar και τα tags<footer>και</footer>περικλείουν το footer της σελίδας.
Απαντήσεις στις Ασκήσεις Εξερεύνησης
-
Δημιουργήστε μια βασική σελίδα HTML με τον τίτλο “Form Rules”. Θα χρησιμοποιήσετε αυτήν τη HTML σελίδα για όλες τις ασκήσεις εξερεύνησης, καθεμία από τις οποίες βασίζεται στις προηγούμενες. Στη συνέχεια, προσθέστε ένα heading επιπέδου 1 με το κείμενο “How to fill in the request form”, μια παράγραφο με το κείμενο “To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields:” και μια unordered list με τα ακόλουθα στοιχεία λίστας: “Name”, “Surname”, “Email Address”, “Nation”, “Country”, και “Zip/Postal Code”.
<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li>Name</li> <li>Surname</li> <li>Email Address</li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> </body> </html> -
Βάλτε τα τρία πρώτα πεδία (“Name”, “Surname”, και “Email Address”) με bold, προσθέτοντας επίσης semantic σημασία. Στη συνέχεια, προσθέστε ένα heading επιπέδου 2 με το κείμενο “Required fields” και μια παράγραφο με το κείμενο “Bold fields are mandatory.”
<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li><strong> Name </strong></li> <li><strong> Surname </strong></li> <li><strong> Email Address </strong></li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> <h2>Required fields</h2> <p>Bold fields are mandatory.</p> </body> </html> -
Προσθέστε άλλο ένα heading επιπέδου 2 με το κείμενο “Steps to follow”, μια παράγραφο με το κείμενο “There are four steps to follow:”, και μια ordered list με τα ακόλουθα στοιχεία λίστας: “Fill in the fields”, “Click the Submit button”, “Check your e-mail and confirm your request by clicking on the link you receive”, και “Check your e-mail - You will receive the full HTML course in minutes”.
<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li><strong> Name </strong></li> <li><strong> Surname </strong></li> <li><strong> Email Address </strong></li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> <h2>Required fields</h2> <p>Bold fields are mandatory.</p> <h2>Steps to follow</h2> <p>There are four steps to follow:</p> <ol> <li>Fill in the fields</li> <li>Click the Submit button</li> <li> Check your e-mail and confirm your request by clicking on the link you receive </li> <li> Check your e-mail - You will receive the full HTML course in minutes </li> </ol> </body> </html> -
Χρησιμοποιώντας το
<div>, δημιουργήστε ένα block για κάθε ενότητα που ξεκινά με ένα heading επιπέδου 2.<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li><strong> Name </strong></li> <li><strong> Surname </strong></li> <li><strong> Email Address </strong></li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> <div> <h2>Required fields</h2> <p>Bold fields are mandatory.</p> </div> <div> <h2>Steps to follow</h2> <p>There are four steps to follow:</p> <ol> <li>Fill in the fields</li> <li>Click the Submit button</li> <li> Check your e-mail and confirm your request by clicking on the link you receive </li> <li> Check your e-mail - You will receive the full HTML course in minutes </li> </ol> </div> </body> </html> -
Χρησιμοποιώντας το
<div>, δημιουργήστε άλλο ένα block για την ενότητα που ξεκινά με το heading επιπέδου 1. Στη συνέχεια, χωρίστε αυτό το τμήμα από τα άλλα δύο με ένα horizontal line.<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <div> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li><strong> Name </strong></li> <li><strong> Surname </strong></li> <li><strong> Email Address </strong></li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> </div> <hr> <div> <h2>Required fields</h2> <p>Bold fields are mandatory.</p> </div> <div> <h2>Steps to follow</h2> <p>There are four steps to follow:</p> <ol> <li>Fill in the fields</li> <li>Click the Submit button</li> <li> Check your e-mail and confirm your request by clicking on the link you receive </li> <li> Check your e-mail - You will receive the full HTML course in minutes </li> </ol> </div> </body> </html> -
Προσθέστε ένα header element με το κείμενο “Form Rules - 2021” και το footer element με το κείμενο “Copyright Note - 2021”. Τέλος, προσθέστε το κύριο element που πρέπει να περιέχει τα τρία
<div>blocks.<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <header> <h1>Form Rules - 2021</h1> </header> <main> <div> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li><strong> Name </strong></li> <li><strong> Surname </strong></li> <li><strong> Email Address </strong></li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> </div> <hr> <div> <h2>Required fields</h2> <p>Bold fields are mandatory.</p> </div> <div> <h2>Steps to follow</h2> <p>There are four steps to follow:</p> <ol> <li>Fill in the fields</li> <li>Click the Submit button</li> <li> Check your e-mail and confirm your request by clicking on the link you receive </li> <li> Check your e-mail - You will receive the full HTML course in minutes </li> </ol> </div> </main> <footer> <p>Copyright Note - 2021</p> </footer> </body> </html>