Εισαγωγή στην HTML - Ο Σκελετός της Ιστοσελίδας

Κεφάλαιο 1: Εισαγωγή στην HTML (Tags, Elements & Attributes)

Ξέχνα για λίγο τις εντολές και τη μαύρη οθόνη του terminal. Από εδώ και πέρα, θα γράφουμε κώδικα που δημιουργεί κάτι οπτικό, κάτι που μπορούμε να δούμε και να αλληλεπιδράσουμε μαζί του στον browser.

Τι είναι η HTML;

Η HTML (HyperText Markup Language) δεν είναι μια γλώσσα προγραμματισμού, όπως πολλοί λανθασμένα πιστεύουν. Είναι μια γλώσσα σήμανσης (Markup Language). Τι σημαίνει αυτό;

Η δουλειά της HTML δεν είναι να κάνει υπολογισμούς ή να παίρνει αποφάσεις. Η μοναδική της δουλειά είναι να περιγράφει τη δομή και το περιεχόμενο μιας ιστοσελίδας. Λέει στον browser:

"Αυτό εδώ είναι ένας κύριος τίτλος."
"Αυτό το κείμενο είναι μια παράγραφος."
"Εδώ βάλε μια εικόνα."
"Αυτή η λέξη πρέπει να είναι ένας σύνδεσμος που οδηγεί σε άλλη σελίδα."

Σκεφτείτε την HTML σαν τον σκελετό ενός κτιρίου. Καθορίζει πού είναι οι τοίχοι, οι πόρτες, τα παράθυρα, οι όροφοι. Δεν ασχολείται με το χρώμα του τοίχου (αυτό είναι δουλειά του CSS) ούτε με το αν το ασανσέρ κινείται (αυτό είναι δουλειά της JavaScript). Απλά ορίζει τη δομή.

Τα θεμελιώδη δομικά υλικά: Tags, Elements, Attributes

Η HTML χρησιμοποιεί "ετικέτες" (tags) για να "σημαδέψει" το περιεχόμενο. Ας δούμε τα τρία βασικά της συστατικά.

Tags (Ετικέτες): Τα tags είναι λέξεις-κλειδιά που περικλείονται από γωνιακές αγκύλες (< >). Συνήθως έρχονται σε ζευγάρια: ένα tag ανοίγματος (<p>) και ένα tag κλεισίματος (</p>). Η κάθετος (/) στο tag κλεισίματος είναι που κάνει τη διαφορά.
Elements (Στοιχεία): Ένα element είναι ολόκληρο το πακέτο: το tag ανοίγματος, το περιεχόμενο που βρίσκεται ανάμεσα, και το tag κλεισίματος.
```
<p>Αυτό είναι το περιεχόμενο μιας παραγράφου.</p>
```
Στο παραπάνω παράδειγμα, όλη η γραμμή είναι το p element (paragraph element).
Attributes (Ιδιότητες): Τα attributes είναι επιπλέον πληροφορίες ή "ρυθμίσεις" που δίνουμε σε ένα HTML element. Τοποθετούνται πάντα μέσα στο tag ανοίγματος και έχουν τη μορφή name="value".

Ένα κλασικό παράδειγμα είναι το tag του συνδέσμου (<a> από το "anchor"):
```
<a href="https://www.google.com">Πήγαινέ με στην Google</a>
```
- Το element είναι το <a>.
- Το attribute είναι το href (Hypertext Reference).
- Η τιμή (value) του attribute είναι το "https://www.google.com". Αυτό το attribute λέει στον browser: "Αν κάποιος κάνει κλικ σε αυτό το κείμενο, πήγαινέ τον σε αυτή τη διεύθυνση".

Η Βασική Δομή Κάθε Ιστοσελίδας (Το Boilerplate)

Κάθε HTML αρχείο που θα φτιάξεις ποτέ, θα ξεκινάει με μια συγκεκριμένη, τυποποιημένη δομή. Δεν χρειάζεται να την αποστηθίσεις, ο VS Code μπορεί να στη δημιουργήσει αυτόματα γράφοντας ! και πατώντας Enter, αλλά είναι κρίσιμο να καταλαβαίνεις τι κάνει το κάθε κομμάτι.

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ο Τίτλος της Σελίδας μου</title>
</head>
<body>
    <!-- Εδώ μπαίνει όλο το ορατό περιεχόμενο! -->
</body>
</html>
  

Ας το σπάσουμε:

<!DOCTYPE html>: Δεν είναι tag. Είναι μια δήλωση που λέει στον browser "Πρόσεχε, αυτό το έγγραφο είναι γραμμένο σε σύγχρονη HTML5". Είναι πάντα η πρώτη γραμμή.
<html>: Είναι το "κοντέινερ" ρίζας. Όλα τα υπόλοιπα στοιχεία της σελίδας ζουν μέσα σε αυτό. Το attribute lang="el" είναι καλή πρακτική και δηλώνει ότι η γλώσσα της σελίδας είναι τα Ελληνικά.
<head>: Η "Σκέψη" της σελίδας. Περιέχει μετα-πληροφορίες (metadata) για τη σελίδα μας, πράγματα που ο χρήστης συνήθως δεν βλέπει απευθείας.
- <meta charset="UTF-8">: Εξασφαλίζει ότι οι ελληνικοί χαρακτήρες (και άλλοι ειδικοί χαρακτήρες) θα εμφανίζονται σωστά.
- <title>: Αυτό είναι το κείμενο που εμφανίζεται στην καρτέλα (tab) του browser. Είναι εξαιρετικά σημαντικό για το SEO (Search Engine Optimization).
<body>: Το "Σώμα" της σελίδας. Ό,τι βλέπει ο χρήστης στην οθόνη του - τίτλοι, παράγραφοι, εικόνες, λίστες, βίντεο - τοποθετείται μέσα στο <body>.

Ώρα για πράξη: Η πρώτη σου ιστοσελίδα!

Στον VS Code, μέσα στον φάκελο του project σου (my-first-git-project), δημιούργησε ένα νέο αρχείο και ονόμασέ το index.html. Το όνομα index.html είναι ειδικό: οι web servers το αναγνωρίζουν αυτόματα ως την αρχική σελίδα ενός φακέλου.

Αντέγραψε τον παρακάτω κώδικα και επικόλλησέ τον στο index.html αρχείο σου:

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Η πρώτη μου σελίδα</title>
</head>
<body>
    <h1>Γεια σου Κόσμε!</h1>
    <p>Αυτή είναι η πρώτη μου ιστοσελίδα. Χρησιμοποιώ HTML για να τη δομήσω.</p>
</body>
</html>
  

Σώσε το αρχείο (Ctrl+S ή Cmd+S).
Κάνε δεξί κλικ μέσα στον editor και επίλεξε "Open with Live Server" (θυμάσαι το extension που εγκαταστήσαμε;).

Θα ανοίξει αυτόματα ένα νέο tab στον browser σου και θα δεις τη σελίδα σου! Συγχαρητήρια! Μόλις δημιούργησες τον σκελετό της πρώτης σου ιστοσελίδας.

Κεφάλαιο 2: Τα βασικά HTML Tags (Επιπλώνουμε το σπίτι)

Το σπίτι μας (η ιστοσελίδα) έχει πλέον σκελετό και τα βασικά δωμάτια (<head> και <body>). Τώρα θα αρχίσουμε να προσθέτουμε τα έπιπλα: το κείμενο, τις εικόνες, τους συνδέσμους και τις λίστες που κάνουν μια σελίδα χρήσιμη. Όλα τα παρακάτω στοιχεία τοποθετούνται πάντα μέσα στο <body> tag.

2.1 Επικεφαλίδες και παράγραφοι: Η ιεραρχία του κειμένου

Επικεφαλίδες (<h1> έως <h6>): Οι επικεφαλίδες χρησιμοποιούνται για να δώσουν δομή και ιεραρχία στο περιεχόμενό σου. Δεν είναι απλά για να κάνουν το κείμενο μεγάλο ή έντονο.
- <h1>: Είναι η κύρια, μοναδική επικεφαλίδα της σελίδας. Κάθε σελίδα πρέπει να έχει μόνο μία <h1>. Σκεφτείτε την σαν τον τίτλο ενός βιβλίου.
- <h2>: Χρησιμοποιείται για τις κύριες ενότητες της σελίδας (σαν τα κεφάλαια του βιβλίου).
- <h3> έως <h6>: Χρησιμοποιούνται για υπο-ενότητες, με φθίνουσα σημασία.
```
<h1>Ο Κύριος τίτλος της σελίδας μου</h1>
<p>Αυτή είναι η εισαγωγική παράγραφος.</p>
<h2>Μια κύρια ενότητα</h2>
<p>Κείμενο που ανήκει σε αυτή την ενότητα.</p>
<h3>Μια Υπο-ενότητα</h3>
<p>Περισσότερο εξειδικευμένο κείμενο.</p>
```
Παράγραφοι (<p>): Το tag <p> (paragraph) είναι το πιο κοινό tag που θα συναντήσεις. Χρησιμοποιείται για να ομαδοποιεί κείμενο σε παραγράφους. Ο browser αυτόματα προσθέτει λίγο κενό χώρο πριν και μετά από κάθε παράγραφο.

2.2 Σύνδεσμοι (<a>): Οι πόρτες του διαδικτύου

Το tag <a> (anchor) είναι αυτό που κάνει το "HyperText" στην HTML πραγματικότητα. Δημιουργεί υπερσυνδέσμους (links) προς άλλες σελίδες ή πόρους.

<a href="https://www.wikipedia.org/">Επισκεφθείτε τη Wikipedia</a>
  

href (Hypertext Reference): Αυτό είναι το πιο σημαντικό attribute. Καθορίζει τον προορισμό του συνδέσμου.

Συμβουλή επαγγελματία: Τι γίνεται αν θέλεις ο σύνδεσμος να ανοίξει σε νέα καρτέλα (new tab) του browser; Χρησιμοποιούμε το attribute target="_blank". Είναι πολύ χρήσιμο για εξωτερικούς συνδέσμους, ώστε ο χρήστης να μην φεύγει από τη δική σου σελίδα.

<a href="https://www.wikipedia.org/" target="_blank">Η Wikipedia θα ανοίξει σε νέα καρτέλα</a>
  

2.3 Εικόνες (<img>): Δίνοντας ζωή στη σελίδα

Μια εικόνα αξίζει όσο χίλιες λέξεις, και το tag <img> (image) μας επιτρέπει να τις προσθέσουμε. Είναι ένα "αυτο-κλειόμενο" (self-closing) tag, που σημαίνει ότι δεν έχει tag κλεισίματος όπως το </p>.

<img src="path/to/my/image.jpg" alt="Περιγραφή της εικόνας">
  

src (Source): Αυτό το attribute είναι υποχρεωτικό. Είναι η "διαδρομή" προς το αρχείο της εικόνας. Μπορεί να είναι ένα τοπικό αρχείο στον υπολογιστή σου (π.χ., images/logo.png) ή μια πλήρης διεύθυνση URL από το διαδίκτυο.
alt (Alternative Text): Αυτό το attribute είναι απολύτως απαραίτητο. Παρέχει μια εναλλακτική περιγραφή της εικόνας:
1. Αν η εικόνα για κάποιο λόγο δεν φορτώσει, ο χρήστης θα δει αυτό το κείμενο.
2. Screen readers (προγράμματα για άτομα με προβλήματα όρασης) το διαβάζουν δυνατά.
3. Οι μηχανές αναζήτησης (Google) το χρησιμοποιούν για να καταλάβουν τι δείχνει η εικόνα.

2.4 Λίστες: Οργανώνοντας πληροφορίες

Όταν θέλεις να παρουσιάσεις μια σειρά από αντικείμενα, χρησιμοποιείς λίστες. Υπάρχουν δύο κύριοι τύποι:

Μη-Αριθμημένη Λίστα (<ul>): Unordered List. Χρησιμοποιεί "κουκκίδες" (bullets). Την χρησιμοποιείς όταν η σειρά των αντικειμένων δεν έχει σημασία.
```
<ul>
  <li>Γάλα</li>
  <li>Ψωμί</li>
  <li>Αυγά</li>
</ul>
```
Αριθμημένη Λίστα (<ol>): Ordered List. Χρησιμοποιεί αριθμούς (1, 2, 3…). Την χρησιμοποιείς όταν η σειρά είναι σημαντική (π.χ., οδηγίες, βήματα σε μια συνταγή).
```
<ol>
  <li>Προθέρμανε το φούρνο.</li>
  <li>Ανακάτεψε τα υλικά.</li>
  <li>Ψήσε για 20 λεπτά.</li>
</ol>
```
Και στις δύο περιπτώσεις, κάθε αντικείμενο της λίστας περικλείεται από το tag <li> (List Item).

Ώρα για Πράξη: Αναβαθμίζουμε τη σελίδα μας

Πάμε πίσω στο αρχείο index.html. Διέγραψε ό,τι υπάρχει μέσα στο <body> και αντικατάστησέ το με τον παρακάτω κώδικα, ο οποίος συνδυάζει όλα όσα μάθαμε. Βρες και μια εικόνα online και βάλε το URL της στο src attribute.

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Η πρώτη μου σελίδα</title>
</head>
<body>
    <h1>Το πρώτο μου ολοκληρωμένο site</h1>
    <p>Καλώς ήρθατε στη σελίδα μου! Εδώ θα μάθουμε τα βασικά tags της HTML.</p>

    <h2>Λίστα με ψώνια</h2>
    <p>Αυτά είναι τα πράγματα που πρέπει να αγοράσω:</p>
    <ul>
        <li>Καφές</li>
        <li>Τυρί</li>
        <li>Χυμός πορτοκάλι</li>
    </ul>

    <h2>Πώς φτιάχνουμε καφέ</h2>
    <p>Η σειρά είναι πολύ σημαντική!</p>
    <ol>
        <li>Βάζουμε νερό στη μηχανή.</li>
        <li>Προσθέτουμε τον καφέ.</li>
        <li>Πατάμε το κουμπί.</li>
    </ol>

    <h2>Μια όμορφη εικόνα</h2>
    <img src="https://images.unsplash.com/photo-1541167760496-1628856ab772" alt="Ένα φλιτζάνι καφέ γεμάτο με καφέ" width="500">
    <!-- Σημείωση: Πρόσθεσα και ένα attribute 'width' για να ελέγξω το μέγεθος της εικόνας -->

    <h2>Για περισσότερες πληροφορίες</h2>
    <p>Μπορείς πάντα να επισκεφθείς την <a href="https://www.w3schools.com/html/" target="_blank">W3Schools</a> για να μάθεις περισσότερα.</p>

</body>
</html>
  

Σώσε το αρχείο. Ο Live Server θα πρέπει να έχει ανανεώσει αυτόματα τον browser σου. Τώρα βλέπεις μια σελίδα με σωστή δομή, εικόνες, λίστες και συνδέσμους!

Κεφάλαιο 3: Semantic HTML5 (Γράφοντας HTML που "Βγάζει νόημα")

Στα πρώτα χρόνια του web, οι προγραμματιστές χρησιμοποιούσαν ένα tag για σχεδόν τα πάντα: το <div>. Ένα <div> (division) είναι απλά ένα γενικό, ορθογώνιο κουτί, ένα δοχείο χωρίς κανένα εγγενές νόημα. Μια τυπική παλιά ιστοσελίδα έμοιαζε κάπως έτσι στον κώδικά της:

<!-- Η παλιά, "χαζή" μέθοδος -->
<div id="header">...</div>
<div id="navigation">...</div>
<div id="main-content">...</div>
<div class="sidebar">...</div>
<div id="footer">...</div>
  

Αυτό λειτουργεί, αλλά έχει δύο τεράστια προβλήματα:

Δεν είναι ευανάγνωστο: Ένας άλλος προγραμματιστής (ή εσύ σε 6 μήνες) πρέπει να μαντέψει από τα id και class ονόματα τι ρόλο παίζει το κάθε κουτί.
Οι μηχανές δεν καταλαβαίνουν: Μια μηχανή αναζήτησης (Google) ή ένας screen reader για άτομα με προβλήματα όρασης βλέπει απλά μια "σούπα από κουτιά" (div-soup). Δεν ξέρει ποιο είναι το κυρίως περιεχόμενο, ποια η πλοήγηση, ποιο το υποσέλιδο.

Η λύση: Semantic HTML

Η HTML5 εισήγαγε νέα tags που λύνουν ακριβώς αυτό το πρόβλημα. Αυτά τα tags ονομάζονται "semantic" (σημασιολογικά) γιατί, εκτός από το να δημιουργούν ένα κουτί, περιγράφουν και τον σκοπό του περιεχομένου που βρίσκεται μέσα τους.

Η παραπάνω δομή, γραμμένη με σύγχρονο, semantic τρόπο, μοιάζει έτσι:

<!-- Η νέα, "έξυπνη" μέθοδος -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>
  

Βλέπετε τη διαφορά; Ο κώδικας τώρα "αυτο-περιγράφεται". Τόσο οι άνθρωποι όσο και οι μηχανές μπορούν να καταλάβουν αμέσως τη δομή της σελίδας.

Τα πιο σημαντικά Semantic Tags

Ας δούμε τα πιο βασικά "έξυπνα" κουτιά που πρέπει να χρησιμοποιείς:

<header>: Περιέχει την εισαγωγική πληροφορία ή τα στοιχεία πλοήγησης της σελίδας. Συνήθως περιλαμβάνει το λογότυπο του site, το <h1> της σελίδας και ίσως το βασικό μενού.
<footer>: Βρίσκεται στο τέλος της σελίδας και περιέχει πληροφορίες όπως στοιχεία πνευματικών δικαιωμάτων (copyright), συνδέσμους επικοινωνίας, χάρτη του site, κλπ.
<nav>: (Navigation) Αυτό το tag είναι ειδικά σχεδιασμένο για να περικλείει τους βασικούς συνδέσμους πλοήγησης του site (π.χ., το κεντρικό μενού "Αρχική", "Προϊόντα", "Επικοινωνία").
<main>: Το πιο σημαντικό tag. Περιέχει το κύριο, μοναδικό περιεχόμενο της σελίδας. Δεν πρέπει να περιέχει στοιχεία που επαναλαμβάνονται σε όλες τις σελίδες, όπως το header, το footer ή τα sidebars. Κάθε σελίδα πρέπει να έχει ένα και μόνο ένα <main> tag.
<section>: Ομαδοποιεί σχετικό περιεχόμενο. Σκεφτείτε το σαν ένα κεφάλαιο σε ένα βιβλίο. Συνήθως, κάθε <section> έχει μέσα τη δική της επικεφαλίδα (<h2>, <h3> κλπ).
<article>: Χρησιμοποιείται για αυτόνομο, αυτοτελές περιεχόμενο που θα μπορούσε να διαβαστεί ανεξάρτητα από την υπόλοιπη σελίδα. Κλασικά παραδείγματα είναι μια ανάρτηση σε blog, ένα άρθρο εφημερίδας, ή ένα σχόλιο χρήστη.
<aside>: Περιέχει περιεχόμενο που είναι "στο πλάι", σχετικό με το κυρίως περιεχόμενο αλλά όχι μέρος της βασικής του ροής. Ένα κλασικό παράδειγμα είναι το sidebar μιας σελίδας.

Γιατί είναι τόσο σημαντικό; (SEO & Accessibility)

SEO (Search Engine Optimization): Η Google λατρεύει το semantic HTML. Όταν χρησιμοποιείς το <main>, της λες "εδώ είναι η ουσία της σελίδας μου". Όταν χρησιμοποιείς το <nav>, την βοηθάς να καταλάβει τη δομή του site σου. Αυτό οδηγεί σε καλύτερη κατάταξη στα αποτελέσματα αναζήτησης.
Accessibility (Προσβασιμότητα): Ένας χρήστης με προβλήματα όρασης που χρησιμοποιεί έναν screen reader μπορεί να δώσει εντολές όπως "Πήγαινέ με στην κύρια πλοήγηση" ή "Διάβασε μου το κυρίως περιεχόμενο". Ο screen reader ξέρει πού να πάει ψάχνοντας τα tags <nav> και <main>. Με τα <div>, αυτό θα ήταν αδύνατο.

Πέθανε το <div>; Όχι! Το <div> είναι ακόμα απίστευτα χρήσιμο. Το χρησιμοποιούμε όταν θέλουμε να ομαδοποιήσουμε στοιχεία αποκλειστικά για λόγους styling (με CSS), χωρίς να θέλουμε να προσδώσουμε κάποιο συγκεκριμένο νόημα. Αν δεν μπορείς να περιγράψεις ένα κουτί με κάποιο από τα παραπάνω semantic tags, τότε το <div> είναι η σωστή επιλογή.

Ώρα για πράξη: Αναδομούμε τη σελίδα μας

Ας πάρουμε τον κώδικα από το προηγούμενο κεφάλαιο και ας τον "τυλίξουμε" με τα σωστά semantic tags για να του δώσουμε δομή και νόημα.

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Η πρώτη μου σελίδα</title>
</head>
<body>

    <header>
        <h1>Το πρώτο μου ολοκληρωμένο site</h1>
        <p>Καλώς ήρθατε στη σελίδα μου! Εδώ θα μάθουμε τα βασικά tags της HTML.</p>
    </header>

    <main>
        <section>
            <h2>Λίστα με ψώνια</h2>
            <p>Αυτά είναι τα πράγματα που πρέπει να αγοράσω:</p>
            <ul>
                <li>Καφές</li>
                <li>Τυρί</li>
                <li>Χυμός πορτοκάλι</li>
            </ul>
        </section>

        <section>
            <h2>Πώς φτιάχνουμε καφέ</h2>
            <p>Η σειρά είναι πολύ σημαντική!</p>
            <ol>
                <li>Βάζουμε νερό στη μηχανή.</li>
                <li>Προσθέτουμε τον καφέ.</li>
                <li>Πατάμε το κουμπί.</li>
            </ol>
        </section>

        <section>
            <h2>Μια όμορφη εικόνα</h2>
            <img src="https://images.unsplash.com/photo-1541167760496-1628856ab772" alt="Ένα φλιτζάνι καφέ γεμάτο με καφέ" width="500">
        </section>
    </main>

    <footer>
        <p>Για περισσότερες πληροφορίες, μπορείς πάντα να επισκεφθείς την <a href="https://www.w3schools.com/html/" target="_blank">W3Schools</a>.</p>
        <p>&copy; 2025 Το όνομά μου</p>
    </footer>

</body>
</html>
  

Κοιτάξτε τον browser. Τίποτα δεν άλλαξε οπτικά! Και αυτό είναι ακριβώς το νόημα. Το Semantic HTML δεν αφορά το πώς φαίνεται η σελίδα, αλλά το πώς είναι δομημένη "κάτω από το καπό". Μόλις κάνατε τη σελίδα σας άπειρα πιο φιλική προς τις μηχανές αναζήτησης και τους χρήστες με ειδικές ανάγκες.

Κεφάλαιο 4: Φόρμες (Forms) - Η αμφίδρομη επικοινωνία

Οι φόρμες είναι η γέφυρα που επιτρέπει στον χρήστη να στείλει δεδομένα προς τον server. Αποτελούνται από ένα "περιτύλιγμα", το tag <form>, και διάφορα πεδία εισαγωγής (input fields) μέσα σε αυτό.

Το Tag <form>: Το κοντέινερ

Όλα τα στοιχεία μιας φόρμας πρέπει να βρίσκονται μέσα σε ένα <form> element. Αυτό το tag έχει δύο πολύ σημαντικά attributes που καθορίζουν τι θα συμβεί όταν ο χρήστης πατήσει το κουμπί υποβολής:

action: Αυτό το attribute καθορίζει τη διεύθυνση URL (το "πού") στην οποία θα σταλούν τα δεδομένα της φόρμας για επεξεργασία. Συνήθως, είναι μια διεύθυνση σε έναν back-end server (π.χ., /submit-contact-form.php). Για τους σκοπούς του front-end, συχνά το αφήνουμε κενό ή βάζουμε #.
method: Καθορίζει τον τρόπο (τη μέθοδο HTTP) με τον οποίο θα σταλούν τα δεδομένα. Οι δύο πιο κοινές τιμές είναι:
- GET: Τα δεδομένα της φόρμας επισυνάπτονται απευθείας στο URL. Είναι ορατά στη μπάρα διευθύνσεων και λιγότερο ασφαλή. Χρησιμοποιείται συνήθως για φόρμες αναζήτησης.
- POST: Τα δεδομένα στέλνονται στο "σώμα" του HTTP request. Δεν είναι ορατά στο URL και είναι η προτιμώμενη μέθοδος για τις περισσότερες φόρμες (φόρμες επικοινωνίας, login, κλπ.).

<form action="/some-script.php" method="POST">
    <!-- Εδώ μέσα μπαίνουν όλα τα πεδία της φόρμας -->
</form>
  

Το Tag <input>: Ο Ελβετικός σουγιάς των φορμών

Το tag <input> είναι το πιο ευέλικτο στοιχείο. Ανάλογα με την τιμή του attribute type, μπορεί να μεταμορφωθεί σε πολλά διαφορετικά πεδία.

Κρίσιμα Attributes για τα Inputs:

type: Καθορίζει το είδος του πεδίου (θα δούμε παραδείγματα παρακάτω).
id: Ένα μοναδικό αναγνωριστικό για το input.
name: Το όνομα του πεδίου. Αυτό το όνομα χρησιμοποιείται ως "κλειδί" όταν τα δεδομένα στέλνονται στον server. π.χ. name="user_email" -> user_email=john@example.com. Είναι απαραίτητο για την υποβολή δεδομένων.
placeholder: Το γκρι κείμενο που εμφανίζεται μέσα στο πεδίο πριν ο χρήστης αρχίσει να γράφει, δίνοντας ένα παράδειγμα.
value: Η προκαθορισμένη τιμή του πεδίου.
required: Ένα boolean attribute (δεν χρειάζεται τιμή) που λέει στον browser ότι αυτό το πεδίο πρέπει οπωσδήποτε να συμπληρωθεί πριν την υποβολή.

Το Tag <label>: Η ετικέτα Για κάθε <input>, πρέπει πάντα να παρέχουμε μια ετικέτα με το tag <label>. Το <label> συνδέεται με το <input> μέσω του attribute for, το οποίο πρέπει να έχει την ίδια τιμή με το id του αντίστοιχου input. Αυτό είναι κρίσιμο για δύο λόγους:

Accessibility: Οι screen readers διαβάζουν το label όταν ο χρήστης φτάνει στο input.
User Experience: Ο χρήστης μπορεί να κάνει κλικ πάνω στην ετικέτα για να ενεργοποιήσει το πεδίο.

Τα πιο συνηθισμένα <input> types:

type="text": Για απλό κείμενο μιας γραμμής (π.χ., όνομα).

<label for="username">Όνομα Χρήστη:</label>
<input type="text" id="username" name="username" required>
  

type="email": Ειδικό για διευθύνσεις email. Σε κινητές συσκευές εμφανίζει αυτόματα το @ στο πληκτρολόγιο και ο browser μπορεί να κάνει βασικό έλεγχο αν η μορφή είναι έγκυρη.
```
<label for="user_email">Email:</label>
<input type="email" id="user_email" name="user_email" placeholder="name@example.com">
```
type="password": Όπως το text, αλλά οι χαρακτήρες που πληκτρολογεί ο χρήστης καλύπτονται με κουκκίδες.
```
<label for="user_pass">Κωδικός:</label>
<input type="password" id="user_pass" name="user_pass" required>
```
type="checkbox": Ένα κουτάκι τσεκαρίσματος για επιλογές on/off (π.χ., "Αποδέχομαι τους όρους").
```
<input type="checkbox" id="terms" name="terms">
<label for="terms">Συμφωνώ με τους όρους χρήσης</label>
```

type="radio": "Κουμπιά radio". Επιτρέπουν στον χρήστη να επιλέξει μία και μόνο μία από πολλές επιλογές. Όλα τα radio buttons που ανήκουν στην ίδια ομάδα πρέπει να έχουν το ίδιο name attribute.

<p>Επίλεξε μέθοδο πληρωμής:</p>
<input type="radio" id="credit" name="payment_method" value="credit_card">
<label for="credit">Πιστωτική κάρτα</label>

<input type="radio" id="paypal" name="payment_method" value="paypal_account">
<label for="paypal">PayPal</label>
  

type="submit": Δεν είναι πεδίο εισαγωγής, αλλά ένα κουμπί που, όταν πατηθεί, υποβάλλει τη φόρμα. Η τιμή του value attribute γίνεται το κείμενο πάνω στο κουμπί.
```
<input type="submit" value="Αποστολή">
```

Άλλα χρήσιμα στοιχεία φορμών:

<textarea>: Για εισαγωγή κειμένου πολλαπλών γραμμών (π.χ., πεδίο σχολίων ή μηνύματος).
```
<label for="message">Το μήνυμά σας:</label>
<textarea id="message" name="user_message" rows="5"></textarea>
```

<select>: Δημιουργεί ένα drop-down μενού επιλογών. Κάθε επιλογή ορίζεται με ένα <option> tag.

<label for="country">Χώρα:</label>
<select id="country" name="country">
    <option value="">--Επιλέξτε--</option>
    <option value="gr">Ελλάδα</option>
    <option value="cy">Κύπρος</option>
    <option value="other">Άλλο</option>
</select>
  

<button>: Μπορεί να χρησιμοποιηθεί αντί του <input type="submit">. Είναι πιο ευέλικτο γιατί μπορεί να περιέχει HTML μέσα του (π.χ., μια εικόνα).
```
<button type="submit">Υποβολή φόρμας</button>
```

Ώρα για πράξη: Δημιουργία φόρμας επικοινωνίας

Ας προσθέσουμε μια φόρμα επικοινωνίας στο project μας. Μπορούμε να τη βάλουμε μέσα σε μια νέα <section> στο <main> μας.

<!-- ... συνεχίζοντας από τον προηγούμενο κώδικα, μέσα στο <main> ... -->
<section>
    <h2>Επικοινωνήστε μαζί μας</h2>
    <form action="#" method="POST">
        <div>
            <label for="name">Ονοματεπώνυμο:</label><br>
            <input type="text" id="name" name="visitor_name" required>
        </div>
        <br>
        <div>
            <label for="email">Email:</label><br>
            <input type="email" id="email" name="visitor_email" required>
        </div>
        <br>
        <div>
            <label for="topic">Θέμα:</label><br>
            <select id="topic" name="topic">
                <option value="general">Γενική ερώτηση</option>
                <option value="support">Τεχνική υποστήριξη</option>
                <option value="sales">Πωλήσεις</option>
            </select>
        </div>
        <br>
        <div>
            <label for="comments">Το μήνυμά σας:</label><br>
            <textarea id="comments" name="visitor_comments" rows="4"></textarea>
        </div>
        <br>
        <div>
            <button type="submit">Αποστολή</button>
        </div>
    </form>
</section>
  

(Χρησιμοποίησα μερικά <div> για ομαδοποίηση και <br> για αλλαγή γραμμής για λόγους απλότητας. Με το CSS θα τα διαχειριστούμε πολύ καλύτερα!)

Αποθηκεύστε και δείτε το αποτέλεσμα! Έχετε τώρα μια πλήρως λειτουργική (από πλευράς HTML) φόρμα. Μπορείτε να κάνετε κλικ στα labels, να δείτε τα placeholders και αν προσπαθήσετε να την υποβάλετε χωρίς να συμπληρώσετε τα required πεδία, ο browser θα σας εμφανίσει ένα μήνυμα λάθους.

Κεφάλαιο 5: Mini Project - Στατική ιστοσελίδα βιογραφικού

Ο Στόχος: Να δημιουργήσουμε τον HTML σκελετό μιας απλής, προσωπικής ιστοσελίδας βιογραφικού. Η σελίδα θα έχει τις βασικές ενότητες που περιμένει κανείς: μια εισαγωγή, την εκπαίδευση/εμπειρία, τις δεξιότητες και μια φόρμα επικοινωνίας.

Η Δομή: Θα φτιάξουμε ένα μονοσέλιδο site (one-page site), όπου όλες οι πληροφορίες θα βρίσκονται στο ίδιο HTML αρχείο, το index.html. Θα χρησιμοποιήσουμε semantic tags για να δομήσουμε σωστά το περιεχόμενο.

Προετοιμασία:

Στον φάκελο του project μας (my-first-git-project), σβήνουμε ό,τι είχαμε γράψει μέχρι τώρα στο index.html. Θα ξεκινήσουμε από την αρχή με καθαρό καμβά.
Προαιρετικά, μπορείς να βρεις μια φωτογραφία πορτρέτου σου (ή μια οποιαδήποτε placeholder εικόνα) και να τη σώσεις μέσα σε έναν νέο φάκελο που θα ονομάσεις images μέσα στο project σου.

Πάμε να χτίσουμε βήμα-βήμα:

Βήμα 1: Το βασικό πλαίσιο (Boilerplate) & το Header Ξεκινάμε με τη βασική δομή και δημιουργούμε το <header> της σελίδας. Το header θα περιέχει το όνομά μας (ως κύριο τίτλο) και το βασικό μενού πλοήγησης (<nav>).

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Το βιογραφικό του/της [Το όνομά σου]</title>
</head>
<body>

    <header>
        <h1>Το όνομά σου</h1>
        <p>Web Developer & λάτρης της τεχνολογίας</p>
        <nav>
            <ul>
                <li><a href="#about">Σχετικά με μένα</a></li>
                <li><a href="#experience">Εμπειρία</a></li>
                <li><a href="#skills">Δεξιότητες</a></li>
                <li><a href="#contact">Επικοινωνία</a></li>
            </ul>
        </nav>
    </header>

</body>
</html>
  

Σημαντική Παρατήρηση: Πρόσεξε τα href στο μενού πλοήγησης. Όταν ένα href ξεκινάει με #, δημιουργεί έναν εσωτερικό σύνδεσμο (internal link) που "πηδάει" σε ένα άλλο element της ίδιας σελίδας, το οποίο έχει το αντίστοιχο id. Θα προσθέσουμε αυτά τα id στα επόμενα βήματα.

Βήμα 2: Το κύριο περιεχόμενο (<main>) Τώρα ξεκινάμε να γεμίζουμε το <main> με τις κύριες ενότητες (<section>). Κάθε <section> θα έχει ένα id που θα αντιστοιχεί στους συνδέσμους του μενού μας.

<!-- Συνεχίζουμε μετά το </header> -->
<main>

    <!-- Ενότητα: Σχετικά με μένα -->
    <section id="about">
        <h2>Σχετικά με μένα</h2>
        <img src="images/your-photo.jpg" alt="Μια φωτογραφία του/της [Το όνομά σου]" width="200">
        <p>Είμαι ένας/μία παθιασμένος/η προγραμματιστής/τρια με ιδιαίτερη αγάπη για τη δημιουργία καθαρών και λειτουργικών ιστοσελίδων. Μου αρέσει να λύνω προβλήματα και να μαθαίνω συνεχώς νέες τεχνολογίες.</p>
        <p>Στον ελεύθερό μου χρόνο, μου αρέσει...</p>
    </section>

    <!-- Ενότητα: Εμπειρία & Εκπαίδευση -->
    <section id="experience">
        <h2>Εμπειρία & Εκπαίδευση</h2>
        
        <article>
            <h3>Web Developer - Tech Company (2020 - Σήμερα)</h3>
            <ul>
                <li>Ανάπτυξη και συντήρηση front-end εφαρμογών.</li>
                <li>Συνεργασία με την ομάδα UX/UI για τη βελτίωση του user experience.</li>
            </ul>
        </article>

        <article>
            <h3>Πανεπιστήμιο Μακεδονίας - Τμήμα Εφαρμοσμένης Πληροφορικής (2020 - 2024)</h3>
            <p>Πτυχίο στην Επιστήμη των Υπολογιστών.</p>
        </article>

    </section>

    <!-- Ενότητα: Δεξιότητες -->
    <section id="skills">
        <h2>Δεξιότητες</h2>
        <ul>
            <li>HTML5 & CSS3</li>
            <li>JavaScript (ES6+)</li>
            <li>Git & GitHub</li>
            <li>Responsive Design</li>
        </ul>
    </section>

    <!-- Ενότητα: Επικοινωνία -->
    <section id="contact">
        <h2>Επικοινωνία</h2>
        <p>Θα χαρώ να ακούσω νέα σας!</p>
        <form action="#" method="post">
            <p>
                <label for="name">Όνομα:</label>
                <input type="text" id="name" name="name">
            </p>
            <p>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email">
            </p>
            <p>
                <label for="message">Μήνυμα:</label><br>
                <textarea id="message" name="message" rows="5"></textarea>
            </p>
            <button type="submit">Αποστολή</button>
        </form>
    </section>

</main>
<!-- Τέλος του <main> -->
  

Βήμα 3: Το υποσέλιδο (<footer>) Κλείνουμε τη σελίδα μας με ένα απλό footer που θα περιέχει το copyright και ίσως συνδέσμους προς social media.

<!-- Συνεχίζουμε μετά το </main> -->
<footer>
    <p>&copy; 2025 [Το όνομά σου]. Όλα τα δικαιώματα κατοχυρωμένα.</p>
    <!-- Μπορείς να προσθέσεις εδώ links για τα social media σου -->
</footer>

</body>
</html>
  

Το τελικό αρχείο & έλεγχος Αν έχεις ακολουθήσει τα βήματα, το index.html σου θα περιέχει τώρα μια πλήρη, δομημένη, semantic ιστοσελίδα. Σώσε το αρχείο και δες το στον browser σου μέσω του Live Server.

Τι θα παρατηρήσεις:

Η σελίδα είναι "άσχημη". Τα στοιχεία εμφανίζονται το ένα κάτω από το άλλο, χωρίς χρώματα ή ωραία διάταξη. Αυτό είναι φυσιολογικό! Θυμήσου, η HTML είναι μόνο ο σκελετός.
Αν κάνεις κλικ στους συνδέσμους στο μενού πλοήγησης (π.χ., στο "Δεξιότητες"), η σελίδα θα "κυλήσει" αυτόματα στην αντίστοιχη ενότητα. Αυτό γίνεται χάρη στους εσωτερικούς συνδέσμους που φτιάξαμε.

Επόμενο βήμα: Αποθήκευση στο Git! Έχουμε κάνει μια τεράστια πρόοδο! Είναι η ιδανική στιγμή να αποθηκεύσουμε τη δουλειά μας στο Git.

Άνοιξε το terminal στον φάκελο του project.
git add . (ή git add index.html images/)
git commit -m "Complete HTML structure for resume website"
git push

Συγχαρητήρια! Μόλις ολοκλήρωσες ολόκληρη την ενότητα της HTML. Έχεις πλέον τις απαραίτητες γνώσεις για να δομήσεις οποιοδήποτε είδος περιεχομένου για το web. Η βάση σου είναι απίστευτα στέρεη.