HTML-002 — The Structure of an HTML Document

HTML-002 — The Structure of an HTML Document

Καλώς ήρθες ξανά στο Jerry's CodeLab!

Στο προηγούμενο μάθημα δημιουργήσαμε την πρώτη μας HTML σελίδα με ένα απλό μήνυμα: Hello, World!

Τώρα ήρθε η ώρα να γνωρίσουμε κάτι εξίσου σημαντικό: τη βασική δομή ενός HTML εγγράφου.

Κάθε ιστοσελίδα έχει έναν βασικό σκελετό. Μπορεί το περιεχόμενό της να είναι απλό ή εξαιρετικά σύνθετο, όμως η δομή της ξεκινά από τα ίδια βασικά στοιχεία.

1. Η βασική δομή μιας HTML σελίδας

Ας δούμε ένα ολοκληρωμένο παράδειγμα:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Structured Page</title>
</head>
<body>

    <h1>Welcome to Jerry's CodeLab!</h1>
    <p>This is my first structured HTML document.</p>

</body>
</html>

Ας εξετάσουμε τώρα κάθε στοιχείο ξεχωριστά.

2. Τι κάνει κάθε στοιχείο;

<!DOCTYPE html>

Δηλώνει ότι το έγγραφο χρησιμοποιεί HTML5 και βοηθά τον browser να εμφανίσει σωστά τη σελίδα.

<html lang="en">

Είναι το βασικό στοιχείο που περιλαμβάνει ολόκληρο το HTML έγγραφο.

Η ιδιότητα lang="en" δηλώνει ότι η κύρια γλώσσα του περιεχομένου είναι τα Αγγλικά. Για Ελληνικά χρησιμοποιούμε lang="el".

<head>

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

<meta charset="UTF-8">

Ορίζει την κωδικοποίηση χαρακτήρων. Με το UTF-8 μπορούμε να εμφανίζουμε σωστά ελληνικά, αγγλικά και πολλούς άλλους χαρακτήρες.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Βοηθά τη σελίδα να προσαρμόζεται σωστά στο πλάτος της οθόνης μιας συσκευής, όπως κινητό ή tablet.

<title>

Ορίζει τον τίτλο της σελίδας που εμφανίζεται συνήθως στην καρτέλα του browser.

<body>

Εδώ βρίσκεται το περιεχόμενο που βλέπει ο επισκέπτης της ιστοσελίδας: τίτλοι, παράγραφοι, εικόνες, σύνδεσμοι και πολλά άλλα.

3. Η δομή με μια ματιά

Μπορούμε να χωρίσουμε μια HTML σελίδα σε δύο βασικά μέρη:

• HEAD: Πληροφορίες και ρυθμίσεις για το έγγραφο.
• BODY: Το περιεχόμενο που εμφανίζεται στον επισκέπτη.

Σκέψου το head σαν τις πληροφορίες που περιγράφουν ένα βιβλίο και το body σαν τις σελίδες που διαβάζεις.

4. Ώρα για πειραματισμό!

Ήρθε η ώρα να δοκιμάσεις όσα μάθαμε στην πράξη!

RUN ON PLAYGROUND

Επίπεδο 1 — Παρατήρησε

Άλλαξε το κείμενο μέσα στο <title> και το κείμενο μέσα στο <h1>. Πάτησε Run και παρατήρησε πού εμφανίζεται το καθένα.

Επίπεδο 2 — Πειραματίσου

1. Άλλαξε το lang="en" σε lang="el".
2. Πρόσθεσε μία δεύτερη παράγραφο μέσα στο <body>.
3. Άλλαξε τον τίτλο της καρτέλας του browser.

Επίπεδο 3 — Δοκίμασε μόνος σου

Δημιούργησε μια μικρή προσωπική σελίδα που να περιλαμβάνει:

• Έναν τίτλο στην καρτέλα του browser.
• Έναν κεντρικό τίτλο με το όνομα της σελίδας σου.
• Δύο παραγράφους.
• Ελληνική γλώσσα στο στοιχείο <html>.

Μην κοιτάξεις αμέσως το παράδειγμα. Προσπάθησε πρώτα να το φτιάξεις μόνος σου!

5. Τι μάθαμε σήμερα;

• Τη βασική δομή ενός HTML εγγράφου.
• Τον ρόλο του <!DOCTYPE html>.
• Το στοιχείο <html> και την ιδιότητα lang.
• Τη διαφορά ανάμεσα στα <head> και <body>.
• Τη χρησιμότητα των meta στοιχείων.
• Τον ρόλο του <title>.

What's Next?

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

Θα μάθουμε πώς οργανώνουμε το κείμενο μιας ιστοσελίδας χρησιμοποιώντας τα στοιχεία <h1> έως <h6> και <p>.

Keep Learning. Keep Experimenting. Keep Creating.

Jerry's CodeLab — LEARN · EXPERIMENT · CREATE