HTML-003 — HTML Στοιχεία: Επικεφαλίδες, Παράγραφοι και Σύνδεσμοι

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

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

Σε αυτό το μάθημα θα γνωρίσουμε τρία βασικά στοιχεία της HTML:

• Τις επικεφαλίδες (Headings).
• Τις παραγράφους (Paragraphs).
• Τους συνδέσμους (Links).

Στο τέλος θα μπορείς να δημιουργήσεις μια απλή ιστοσελίδα με τίτλους, κείμενο και συνδέσμους προς άλλες ιστοσελίδες.

---

1. Τι είναι ένα HTML Element;

Ένα HTML Element (στοιχείο HTML) είναι ένα από τα βασικά δομικά συστατικά μιας ιστοσελίδας.

Τα περισσότερα στοιχεία HTML αποτελούνται από τρία μέρη:

• Μια ετικέτα ανοίγματος (Opening Tag).
• Το περιεχόμενο (Content).
• Μια ετικέτα κλεισίματος (Closing Tag).

Για παράδειγμα:

<p>Αυτή είναι μια παράγραφος.</p>

Ας δούμε τι σημαίνει κάθε μέρος:

• <p>: Η ετικέτα ανοίγματος.
• Το κείμενο: Το περιεχόμενο της παραγράφου.
• </p>: Η ετικέτα κλεισίματος.

Ο browser διαβάζει τα στοιχεία HTML και εμφανίζει το περιεχόμενό τους στην οθόνη.

---

2. Επικεφαλίδες (Headings)

Οι επικεφαλίδες χρησιμοποιούνται για να οργανώνουμε το περιεχόμενο μιας ιστοσελίδας και να δημιουργούμε μια ξεκάθαρη ιεραρχία.

Η HTML διαθέτει έξι επίπεδα επικεφαλίδων, από το <h1> έως το <h6>.

<h1>Κύρια επικεφαλίδα</h1>
<h2>Επικεφαλίδα ενότητας</h2>
<h3>Υποενότητα</h3>
<h4>Επικεφαλίδα επιπέδου 4</h4>
<h5>Επικεφαλίδα επιπέδου 5</h5>
<h6>Επικεφαλίδα επιπέδου 6</h6>

Η <h1> είναι η σημαντικότερη επικεφαλίδα, ενώ η <h6> αντιστοιχεί στο χαμηλότερο επίπεδο.

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

---

3. Παράγραφοι (Paragraphs)

Το στοιχείο <p> χρησιμοποιείται για τη δημιουργία παραγράφων κειμένου.

Παράδειγμα:

<p>
  Η HTML είναι η γλώσσα που χρησιμοποιούμε
  για να οργανώνουμε το περιεχόμενο του Web.
</p>

<p>
  Κάθε ιστοσελίδα χρησιμοποιεί HTML με κάποιον τρόπο.
</p>

Κάθε παράγραφος εμφανίζεται ως ξεχωριστό τμήμα κειμένου.

---

4. Σύνδεσμοι (Links)

Οι σύνδεσμοι επιτρέπουν στους επισκέπτες μιας ιστοσελίδας να μεταβαίνουν σε άλλες σελίδες ή ιστοτόπους.

Για να δημιουργήσουμε έναν σύνδεσμο χρησιμοποιούμε το στοιχείο <a>.

Παράδειγμα:

<a href="https://www.google.com">
  Επισκέψου το Google
</a>

Ας αναλύσουμε τον κώδικα:

• <a>: Δημιουργεί έναν σύνδεσμο.
• href: Είναι ένα attribute (χαρακτηριστικό) που ορίζει τον προορισμό.
• Το κείμενο: Είναι αυτό που θα βλέπει και θα πατά ο επισκέπτης.
• </a>: Κλείνει τον σύνδεσμο.

Το χαρακτηριστικό href είναι αυτό που καθορίζει πού θα οδηγήσει ο σύνδεσμος.

---

5. Δημιουργούμε την πρώτη μας μικρή ιστοσελίδα

Τώρα ας συνδυάσουμε όσα μάθαμε και ας δημιουργήσουμε μια απλή ιστοσελίδα.

<h1>Καλώς ήρθες στην ιστοσελίδα μου!</h1>

<h2>Σχετικά με εμένα</h2>

<p>
  Γεια σου! Μαθαίνω HTML και δημιουργώ
  τις πρώτες μου ιστοσελίδες.
</p>

<h2>Η αγαπημένη μου ιστοσελίδα</h2>

<p>
  Ένας από τους αγαπημένους μου προορισμούς στο Web
  είναι το Google.
</p>

<a href="https://www.google.com">
  Επισκέψου το Google
</a>

Παρατήρησε πώς χρησιμοποιούμε τις επικεφαλίδες για την οργάνωση του περιεχομένου, τις παραγράφους για την παρουσίαση κειμένου και τους συνδέσμους για τη σύνδεση με άλλες ιστοσελίδες.

---

6. Ώρα για εξάσκηση!

Τώρα είναι η σειρά σου να πειραματιστείς στην Παιδική Χαρά!

Άσκηση 1 — Δημιούργησε επικεφαλίδες

Πρόσθεσε μια επικεφαλίδα <h1> με το όνομά σου και μια επικεφαλίδα <h2> με τίτλο «Σχετικά με εμένα».

Άσκηση 2 — Γράψε παραγράφους

Πρόσθεσε δύο παραγράφους στις οποίες θα περιγράφεις τον εαυτό σου ή τα ενδιαφέροντά σου.

Άσκηση 3 — Δημιούργησε έναν σύνδεσμο

Πρόσθεσε έναν σύνδεσμο προς την αγαπημένη σου ιστοσελίδα, χρησιμοποιώντας το στοιχείο <a> και το χαρακτηριστικό href.

Άσκηση 4 — Πειραματίσου!

Άλλαξε τα κείμενα των επικεφαλίδων και των παραγράφων. Πρόσθεσε έναν ακόμη σύνδεσμο και παρατήρησε το αποτέλεσμα.

---

7. Συνηθισμένα λάθη που πρέπει να αποφεύγεις

• Μην ξεχνάς τις ετικέτες κλεισίματος όπου απαιτούνται.
• Μην μπερδεύεις τα επίπεδα επικεφαλίδων h1 έως h6.
• Το href πρέπει να βρίσκεται μέσα στην ετικέτα ανοίγματος του <a>.
• Χρησιμοποίησε τις επικεφαλίδες με λογική σειρά και σωστή ιεραρχία.

---

8. Τι μάθαμε σε αυτό το μάθημα;

Σε αυτό το μάθημα γνωρίσαμε:

• Τι είναι ένα HTML Element.
• Πώς χρησιμοποιούμε τις επικεφαλίδες από <h1> έως <h6>.
• Πώς δημιουργούμε παραγράφους με το <p>.
• Πώς δημιουργούμε συνδέσμους με το <a>.
• Πώς λειτουργεί το χαρακτηριστικό href.

Τώρα έχεις τα πρώτα βασικά εργαλεία για να δημιουργήσεις μια απλή ιστοσελίδα!

Συνέχισε να πειραματίζεσαι, να μαθαίνεις και να δημιουργείς!

Τα λέμε στο επόμενο μάθημα του Jerry's CodeLab!

LEARN · EXPERIMENT · CREATE

<h1>Καλώς ήρθες στην ιστοσελίδα μου!</h1> <h2>Σχετικά με εμένα</h2> <p>Γεια σου! Μαθαίνω HTML και δημιουργώ τις πρώτες μου ιστοσελίδες.</p> <h2>Η αγαπημένη μου ιστοσελίδα</h2> <a href="https://www.google.com"> Επισκέψου το Google </a>