Έργο Terrarium Μέρος 1: Εισαγωγή στο HTML

journey
    title Το Ταξίδι Μάθησης του HTML Σας
    section Θεμέλιο
      Δημιουργία αρχείου HTML: 3: Student
      Προσθήκη DOCTYPE: 4: Student
      Δομή του εγγράφου: 5: Student
    section Περιεχόμενο
      Προσθήκη μεταδεδομένων: 4: Student
      Εισαγωγή εικόνων: 5: Student
      Οργάνωση διάταξης: 5: Student
    section Σημασιολογία
      Χρήση κατάλληλων ετικετών: 4: Student
      Βελτίωση προσβασιμότητας: 5: Student
      Δημιουργία τεραρίου: 5: Student

Σημείωση σκίτσου από την Tomomi Imura

Το HTML, ή HyperText Markup Language, είναι το θεμέλιο κάθε ιστότοπου που έχετε επισκεφθεί ποτέ. Σκεφτείτε το HTML ως το σκελετό που δίνει δομή στις ιστοσελίδες – καθορίζει πού πάει το περιεχόμενο, πώς οργανώνεται και τι αντιπροσωπεύει κάθε κομμάτι. Ενώ το CSS αργότερα θα "ντύσει" το HTML σας με χρώματα και διατάξεις, και η JavaScript θα του δώσει ζωή με διαδραστικότητα, το HTML παρέχει την ουσιαστική δομή που κάνει τα πάντα δυνατά.

Σε αυτό το μάθημα, θα δημιουργήσετε τη δομή HTML για μια εικονική διεπαφή terrarium. Αυτό το πρακτικό έργο θα σας διδάξει βασικές έννοιες HTML ενώ χτίζετε κάτι οπτικά ελκυστικό. Θα μάθετε πώς να οργανώνετε το περιεχόμενο χρησιμοποιώντας σημασιολογικά στοιχεία, να δουλεύετε με εικόνες και να δημιουργείτε το θεμέλιο για μια διαδραστική διαδικτυακή εφαρμογή.

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

mindmap
  root((Βασικά HTML))
    Structure
      Δήλωση DOCTYPE
      Στοιχείο HTML
      Ενότητα Κεφαλίδας
      Περιεχόμενο Σώματος
    Elements
      Ετικέτες & Χαρακτηριστικά
      Αυτοκλεινόμενες Ετικέτες
      Εμφωλευμένα Στοιχεία
      Μπλοκ vs Ενσωματωμένο
    Content
      Στοιχεία Κειμένου
      Εικόνες
      Κοντέινερ (div)
      Λίστες
    Semantics
      Σημαντικές Ετικέτες
      Προσβασιμότητα
      Αναγνώστες Οθόνης
      Οφέλη SEO
    Best Practices
      Σωστή Εμφώλευση
      Έγκυρη Σήμανση
      Περιγραφικό Κείμενο Alt
      Οργανωμένη Δομή

Προ-Διαλέξη Quiz

Προ-διάλεξη quiz

📺 Παρακολούθησε και Μάθε: Δες αυτή τη χρήσιμη σύντομη επισκόπηση βίντεο

Ρύθμιση του Έργου σου

Πριν βουτήξουμε στον κώδικα HTML, ας ρυθμίσουμε έναν κατάλληλο χώρο εργασίας για το έργο terrarium σου. Η δημιουργία μιας οργανωμένης δομής αρχείων από την αρχή είναι μια κρίσιμη συνήθεια που θα σου φανεί χρήσιμη καθ’ όλη τη διάρκεια του ταξιδιού σου στην ανάπτυξη ιστοσελίδων.

Εργασία: Δημιουργία Δομής Έργου

Θα δημιουργήσεις έναν αφιερωμένο φάκελο για το έργο terrarium και θα προσθέσεις το πρώτο σου αρχείο HTML. Εδώ είναι δύο προσεγγίσεις που μπορείς να χρησιμοποιήσεις:

Επιλογή 1: Χρήση Visual Studio Code

Άνοιξε το Visual Studio Code
Κάνε κλικ στο "File" → "Open Folder" ή χρησιμοποιήσε Ctrl+K, Ctrl+O (Windows/Linux) ή Cmd+K, Cmd+O (Mac)
Δημιούργησε έναν νέο φάκελο με όνομα terrarium και επίλεξέ τον
Στο παράθυρο Explorer, κάνε κλικ στο εικονίδιο "New File"
Ονόμασε το αρχείο σου index.html

Επιλογή 2: Χρήση Εντολών Τερματικού

mkdir terrarium
cd terrarium
touch index.html
code index.html

Τι επιτυγχάνουν αυτές οι εντολές:

Δημιουργεί έναν νέο κατάλογο με όνομα terrarium για το έργο σου
Μεταβαίνει στον κατάλογο terrarium
Δημιουργεί ένα κενό αρχείο index.html
Ανοίγει το αρχείο στο Visual Studio Code για επεξεργασία

💡 Προχώρησε έξυπνα: Το όνομα αρχείου index.html είναι ιδιαίτερο στην ανάπτυξη ιστοσελίδων. Όταν κάποιος επισκέπτεται έναν ιστότοπο, τα προγράμματα περιήγησης αναζητούν αυτόματα το index.html ως την προεπιλεγμένη σελίδα που θα εμφανίσουν. Αυτό σημαίνει ότι μια διεύθυνση URL όπως https://mysite.com/projects/ θα σερβίρει αυτόματα το αρχείο index.html από τον φάκελο projects χωρίς να απαιτείται να οριστεί το όνομα αρχείου στη διεύθυνση URL.

Κατανόηση της Δομής Εγγράφου HTML

Κάθε έγγραφο HTML ακολουθεί μια συγκεκριμένη δομή που τα προγράμματα περιήγησης χρειάζεται να καταλάβουν και να εμφανίσουν σωστά. Σκεφτείτε αυτή τη δομή σαν μια επίσημη επιστολή – έχει απαιτούμενα στοιχεία με συγκεκριμένη σειρά που βοηθούν τον παραλήπτη (στην προκειμένη περίπτωση το πρόγραμμα περιήγησης) να επεξεργαστεί σωστά το περιεχόμενο.

flowchart TD
    A["<!DOCTYPE html>"] --> B["<html>"]
    B --> C["<head>"]
    C --> D["<title>"]
    C --> E["<meta charset>"]
    C --> F["<meta viewport>"]
    B --> G["<body>"]
    G --> H["<h1> Επικεφαλίδα"]
    G --> I["<div> Κοντέινερς"]
    G --> J["<img> Εικόνες"]
    
    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style C fill:#fff3e0
    style G fill:#e8f5e8

Ας ξεκινήσουμε προσθέτοντας τα ουσιώδη θεμέλια που χρειάζεται κάθε έγγραφο HTML.

Η Δήλωση DOCTYPE και το Ριζικό Στοιχείο

Οι πρώτες δύο γραμμές οποιουδήποτε αρχείου HTML λειτουργούν ως η "εισαγωγή" του εγγράφου προς το πρόγραμμα περιήγησης:

<!DOCTYPE html>
<html></html>

Κατανόηση του τι κάνει αυτός ο κώδικας:

Δηλώνει τον τύπο εγγράφου ως HTML5 με το <!DOCTYPE html>
Δημιουργεί το ριζικό στοιχείο <html> που θα περιέχει όλο το περιεχόμενο της σελίδας
Εδραιώνει σύγχρονα διαδικτυακά πρότυπα για σωστή απόδοση από τα προγράμματα περιήγησης
Εξασφαλίζει συνεπή εμφάνιση σε διαφορετικά προγράμματα περιήγησης και συσκευές

💡 Συμβουλή VS Code: Περάστε το ποντίκι πάνω από οποιαδήποτε ετικέτα HTML στο VS Code για να δείτε χρήσιμες πληροφορίες από τα MDN Web Docs, περιλαμβάνοντας παραδείγματα χρήσης και λεπτομέρειες συμβατότητας προγραμμάτων περιήγησης.

📚 Μάθε Περισσότερα: Η δήλωση DOCTYPE αποτρέπει τα προγράμματα περιήγησης από το να εισέλθουν σε "quirks mode", που χρησιμοποιούνταν για υποστήριξη πολύ παλιών ιστοσελίδων. Η σύγχρονη ανάπτυξη ιστοσελίδων χρησιμοποιεί τη απλή δήλωση <!DOCTYPE html> για να εξασφαλίσει απόδοση σύμφωνα με τα πρότυπα.

🔄 Παιδαγωγικός Έλεγχος

Παύση και Σκέψη: Πριν συνεχίσετε, βεβαιωθείτε ότι καταλαβαίνετε:

✅ Γιατί κάθε έγγραφο HTML χρειάζεται δήλωση DOCTYPE
✅ Τι περιέχει το ριζικό στοιχείο <html>
✅ Πώς αυτή η δομή βοηθάει τα προγράμματα περιήγησης να αποδώσουν σωστά τις σελίδες

Γρήγορος Αυτοέλεγχος: Μπορείτε να εξηγήσετε με δικά σας λόγια τι σημαίνει "απόδοση σύμφωνα με τα πρότυπα";

Προσθήκη Βασικών Μεταδεδομένων Εγγράφου

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

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

Εργασία: Πρόσθεσε το Τμήμα Head του Εγγράφου

Εισάγετε αυτό το τμήμα <head> ανάμεσα στις ετικέτες ανοίγματος και κλεισίματος <html>:

<head>
	<title>Welcome to my Virtual Terrarium</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

Ανάλυση του τι επιτυγχάνει κάθε στοιχείο:

Ρυθμίζει τον τίτλο της σελίδας που εμφανίζεται σε καρτέλες προγραμμάτων περιήγησης και αποτελέσματα αναζήτησης
Ορίζει κωδικοποίηση χαρακτήρων UTF-8 για σωστή εμφάνιση κειμένου παγκοσμίως
Εξασφαλίζει συμβατότητα με σύγχρονες εκδόσεις του Internet Explorer
Ρυθμίζει τον ευαίσθητο σχεδιασμό θέτοντας το viewport να ταιριάζει με το πλάτος της συσκευής
Ελέγχει το αρχικό επίπεδο ζουμ για εμφάνιση περιεχομένου στο φυσιολογικό μέγεθος

🤔 Σκέψου το: Τι θα συνέβαινε αν ρύθμιζες το meta tag viewport έτσι: <meta name="viewport" content="width=600">; Αυτό θα ανάγκαζε τη σελίδα να είναι πάντα 600 pixels πλάτος, καταστρέφοντας το ευαίσθητο σχεδιασμό! Μάθε περισσότερα για σωστή ρύθμιση viewport.

Δημιουργία του Σώματος του Εγγράφου

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

Ας προσθέσουμε τη δομή του σώματος και ας κατανοήσουμε πώς οι ετικέτες HTML συνεργάζονται για να δημιουργήσουν ουσιαστικό περιεχόμενο.

Κατανόηση Δομής Ετικετών HTML

Το HTML χρησιμοποιεί ζευγάρια ετικετών για τον ορισμό στοιχείων. Οι περισσότερες ετικέτες έχουν μια ανοιχτή ετικέτα όπως <p> και μια κλειστή ετικέτα όπως </p>, με περιεχόμενο ανάμεσά τους: <p>Γειά σου, κόσμε!</p>. Αυτό δημιουργεί ένα στοιχείο παραγράφου που περιέχει το κείμενο "Γειά σου, κόσμε!".

Εργασία: Πρόσθεσε το Στοιχείο Body

Ενημέρωσε το αρχείο HTML σου για να συμπεριλάβει το στοιχείο <body>:

<!DOCTYPE html>
<html>
	<head>
		<title>Welcome to my Virtual Terrarium</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body></body>
</html>

Τι παρέχει αυτή η ολοκληρωμένη δομή:

Εδραιώνει το βασικό πλαίσιο εγγράφου HTML5
Περιλαμβάνει ουσιώδη μεταδεδομένα για σωστή απόδοση από το πρόγραμμα περιήγησης
Δημιουργεί ένα κενό σώμα έτοιμο για το ορατό σου περιεχόμενο
Ακολουθεί σύγχρονες βέλτιστες πρακτικές ανάπτυξης ιστού

Τώρα είσαι έτοιμος να προσθέσεις τα ορατά στοιχεία του terrarium σου. Θα χρησιμοποιήσουμε στοιχεία <div> ως δοχεία για να οργανώσουμε διαφορετικά τμήματα περιεχομένου, και στοιχεία <img> για να εμφανίσουμε τις εικόνες των φυτών.

Εργασία με Εικόνες και Δοχείς Διάταξης

Οι εικόνες είναι ειδικές στο HTML γιατί χρησιμοποιούν "αυτοκλειόμενες" ετικέτες. Σε αντίθεση με στοιχεία όπως <p></p> που τυλίγουν περιεχόμενο, η ετικέτα <img> περιέχει όλες τις πληροφορίες μέσα στην ίδια την ετικέτα χρησιμοποιώντας ιδιότητες όπως src για τη διαδρομή του αρχείου της εικόνας και alt για προσβασιμότητα.

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

Πρώτα, ρύθμισε τις εικόνες σου:

Δημιούργησε ένα φάκελο με όνομα images μέσα στο φάκελο του έργου terrarium
Κατέβασε τις εικόνες φυτών από το φάκελο λύσης (συνολικά 14 εικόνες φυτών)
Αντέγραψε όλες τις εικόνες φυτών στο νέο σου φάκελο images

Εργασία: Δημιουργία Διάταξης Εμφάνισης Φυτών

Τώρα πρόσθεσε τις εικόνες φυτών οργανωμένες σε δύο στήλες ανάμεσα στις ετικέτες <body></body>:

<div id="page">
	<div id="left-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/el/plant1.d87946a2ca70cc43.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/el/plant2.8daa1606c9c1ad89.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/el/plant3.8b0d484381a2a2a7.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/el/plant4.656e16ae1df37be2.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/el/plant5.2b41b9355f11ebcc.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/el/plant6.3d1827d03b656994.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/el/plant7.8152c302ac97f621.png" />
		</div>
	</div>
	<div id="right-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/el/plant8.38d6428174ffa850.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/el/plant9.f0e38d3327c37fc2.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/el/plant10.b159d6d6e985595f.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/el/plant11.2a03a1c2ec8ea84e.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/el/plant12.60e9b53e538fbaf3.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/el/plant13.07a51543c820bcf5.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/el/plant14.6e486371ba7d36ba.png" />
		</div>
	</div>
</div>

Βήμα βήμα, τι συμβαίνει σε αυτόν τον κώδικα:

Δημιουργεί έναν κύριο δοχέα σελίδας με id="page" για να κρατά όλο το περιεχόμενο
Εδραιώνει δύο δοχεία στηλών: left-container και right-container
Οργανώνει 7 φυτά στην αριστερή στήλη και 7 φυτά στη δεξιά στήλη
Τυλίγει κάθε εικόνα φυτού σε ένα plant-holder div για ατομική τοποθέτηση
Εφαρμόζει συνεπή ονόματα κλάσεων για στυλιζάρισμα CSS στο επόμενο μάθημα
Αναθέτει μοναδικά ID σε κάθε εικόνα φυτού για μελλοντική αλληλεπίδραση JavaScript
Περιλαμβάνει σωστές διαδρομές αρχείων προς το φάκελο εικόνων

🤔 Σκέψου το: Παρατήρησε ότι όλες οι εικόνες έχουν αυτή τη στιγμή το ίδιο alt κείμενο "plant". Αυτό δεν είναι ιδανικό για προσβασιμότητα. Οι χρήστες με αναγνώστες οθόνης θα ακούσουν "φυτό" επαναλαμβανόμενο 14 φορές χωρίς να γνωρίζουν ποιο συγκεκριμένο φυτό δείχνει κάθε εικόνα. Μπορείς να σκεφτείς καλύτερα, πιο περιγραφικά alt κείμενα για κάθε εικόνα;

📝 Τύποι Στοιχείων HTML: Τα στοιχεία <div> είναι "block-level" και καταλαμβάνουν όλο το πλάτος, ενώ τα στοιχεία <span> είναι "inline" και καταλαμβάνουν μόνο το απαραίτητο πλάτος. Τι πιστεύεις θα συνέβαινε αν άλλαζες όλες αυτές τις ετικέτες <div> σε <span>;

🔄 Παιδαγωγικός Έλεγχος

Κατανόηση Δομής: Πάρε μια στιγμή να επανεξετάσεις τη δομή HTML σου:

✅ Μπορείς να αναγνωρίσεις τα κύρια δοχεία στη διάταξή σου;
✅ Καταλαβαίνεις γιατί κάθε εικόνα έχει μοναδικό ID;
✅ Πώς θα περιέγραφες τον σκοπό των στοιχείων plant-holder;

Οπτικός Έλεγχος: Άνοιξε το αρχείο HTML σε ένα πρόγραμμα περιήγησης. Θα πρέπει να δεις:

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

Θυμήσου: Αυτή η απλή εμφάνιση είναι ακριβώς το πώς θα πρέπει να φαίνεται το HTML πριν το στυλιζάρισμα με CSS!

Με αυτό το markup προστιθέμενο, τα φυτά θα εμφανιστούν στην οθόνη, αν και δεν θα φαίνονται καλοφτιαγμένα ακόμα – γι’ αυτό υπάρχει το CSS στο επόμενο μάθημα! Για τώρα, έχεις ένα σταθερό θεμέλιο HTML που οργανώνει σωστά το περιεχόμενό σου και ακολουθεί τις βέλτιστες πρακτικές προσβασιμότητας.

Χρήση Σημασιολογικού HTML για Προσβασιμότητα

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

flowchart TD
    A[Χρειάζεται να προσθέσετε περιεχόμενο;] --> B{Τι τύπος;}
    B -->|Κύριος τίτλος| C["<h1>"]
    B -->|Υπότιτλος| D["<h2>, <h3>, κ.ά."]
    B -->|Παράγραφος| E["<p>"]
    B -->|Λίστα| F["<ul>, <ol>"]
    B -->|Πλοήγηση| G["<nav>"]
    B -->|Άρθρο| H["<article>"]
    B -->|Ενότητα| I["<section>"]
    B -->|Γενικός δοχέας| J["<div>"]
    
    C --> K[Οι αναγνώστες οθόνης ανακοινώνουν ως κύριο τίτλο]
    D --> L[Δημιουργεί σωστή ιεραρχία τίτλων]
    E --> M[Παρέχει σωστή απόσταση κειμένου]
    F --> N[Ενεργοποιεί συντομεύσεις πλοήγησης λίστας]
    G --> O[Ταυτοποιεί σημεία πλοήγησης]
    H --> P[Σηματοδοτεί ανεξάρτητο περιεχόμενο]
    I --> Q[Ομαδοποιεί σχετικό περιεχόμενο]
    J --> R[Χρησιμοποιήστε μόνο όταν δεν ταιριάζει κανένα σημασιολογικό tag]
    
    style C fill:#4caf50
    style D fill:#4caf50
    style E fill:#4caf50
    style F fill:#4caf50
    style G fill:#2196f3
    style H fill:#2196f3
    style I fill:#2196f3
    style J fill:#ff9800

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

Προσθήκη Σημασιολογικού Τίτλου Σελίδας

Ας προσθέσουμε έναν κατάλληλο τίτλο στη σελίδα terrarium σου. Εισήγαγε αυτή τη γραμμή αμέσως μετά την ετικέτα ανοίγματος <body>:

<h1>My Terrarium</h1>

Γιατί έχει σημασία το σημασιολογικό markup:

Βοηθά τους αναγνώστες οθόνης να πλοηγηθούν και να κατανοήσουν τη δομή της σελίδας
Βελτιώνει την βελτιστοποίηση μηχανών αναζήτησης (SEO) διευκρινίζοντας την ιεραρχία περιεχομένου
Ενισχύει την προσβασιμότητα για χρήστες με οπτικές ή γνωστικές διαφορές
Δημιουργεί καλύτερη εμπειρία χρήστη σε όλες τις συσκευές και πλατφόρμες
Ακολουθεί τα πρότυπα του ιστού και τις βέλτιστες πρακτικές για επαγγελματική ανάπτυξη

Παραδείγματα σημασιολογικών έναντι μη σημασιολογικών επιλογών:

Σκοπός	✅ Σημασιολογική Επιλογή	❌ Μη Σημασιολογική Επιλογή
Κύριος τίτλος	`<h1>Τίτλος</h1>`	`<div class="big-text">Τίτλος</div>`
Πλοήγηση	`<nav><ul><li></li></ul></nav>`	`<div class="menu"><div></div></div>`
Κουμπί	`<button>Κλίκ εδώ</button>`	`<span onclick="...">Κλίκ εδώ</span>`
Περιεχόμενο άρθρου	`<article><p></p></article>`	`<div class="content"><div></div></div>`

🎥 Δες το σε δράση: Παρακολούθησε πώς οι αναγνώστες οθόνης αλληλεπιδρούν με τις ιστοσελίδες για να καταλάβεις γιατί το σημασιολογικό markup είναι κρίσιμο για την προσβασιμότητα. Πρόσεξε πώς η σωστή δομή HTML βοηθά τους χρήστες να πλοηγούνται αποτελεσματικά.

Δημιουργία του Δοχείου Terrarium

Τώρα ας προσθέσουμε τη δομή HTML για το ίδιο το terrarium – το γυάλινο δοχείο όπου τελικά θα τοποθετηθούν τα φυτά. Αυτό το τμήμα παρουσιάζει μια σημαντική έννοια: το HTML παρέχει δομή, αλλά χωρίς στυλιζάρισμα CSS, αυτά τα στοιχεία δεν θα είναι ορατά ακόμη.

Το markup του terrarium χρησιμοποιεί περιγραφικά ονόματα κλάσεων που θα κάνουν το στυλιζάρισμα CSS διαισθητικό και εύκολο στη συντήρηση στο επόμενο μάθημα.

Εργασία: Πρόσθεσε τη Δομή του Terrarium

Εισήγαγε αυτό το markup πάνω από την τελευταία ετικέτα </div> (πριν το κλείσιμο του δοχείου σελίδας):

<div id="terrarium">
	<div class="jar-top"></div>
	<div class="jar-walls">
		<div class="jar-glossy-long"></div>
		<div class="jar-glossy-short"></div>
	</div>
	<div class="dirt"></div>
	<div class="jar-bottom"></div>
</div>

Κατανόηση αυτής της δομής terrarium:

Δημιουργεί ένα κύριο δοχείο terrarium με μοναδικό ID για στυλιζάρισμα
Ορίζει ξεχωριστά στοιχεία για κάθε οπτικό συστατικό (κορυφή, τοίχοι, χώμα, κάτω μέρος)
Περιλαμβάνει εμφωλευμένα στοιχεία για εφέ αντανάκλασης γυαλιού (γυαλιστερά στοιχεία)
Χρησιμοποιεί περιγραφικά ονόματα κλάσεων που δείχνουν με σαφήνεια τον σκοπό κάθε στοιχείου
Ετοιμάζει τη δομή για το στυλ CSS που θα δημιουργήσει την εμφάνιση γυάλινου τεράριουμ

🤔 Παρατηρείτε κάτι;: Παρότι προσθέσατε αυτό το markup, δεν βλέπετε κάτι νέο στη σελίδα! Αυτό δείχνει ακριβώς πώς το HTML παρέχει τη δομή ενώ το CSS παρέχει την εμφάνιση. Αυτά τα στοιχεία <div> υπάρχουν αλλά δεν έχουν ακόμα οπτικό στυλ – αυτό θα γίνει στο επόμενο μάθημα!

flowchart TD
    A[Έγγραφο HTML] --> B[Κεφαλίδα Εγγράφου]
    A --> C[Σώμα Εγγράφου]
    B --> D[Στοιχείο Τίτλου]
    B --> E[Meta Charset]
    B --> F[Meta Viewport]
    C --> G[Κύρια Επικεφαλίδα]
    C --> H[Δοχείο Σελίδας]
    H --> I[Αριστερό Δοχείο με 7 φυτά]
    H --> J[Δεξί Δοχείο με 7 φυτά]
    H --> K[Δομή Τερραρίου]
    
    style A fill:#e1f5fe
    style B fill:#fff3e0
    style C fill:#e8f5e8
    style H fill:#f3e5f5

🔄 Παιδαγωγικός Έλεγχος

Κατανόηση Δομής HTML: Πριν προχωρήσετε, βεβαιωθείτε ότι μπορείτε να:

✅ Εξηγήσετε τη διαφορά ανάμεσα στη δομή HTML και την οπτική εμφάνιση
✅ Αναγνωρίσετε τα σημεία διαφοράς μεταξύ σημασιολογικών και μη σημασιολογικών στοιχείων HTML
✅ Περιγράψετε πώς η σωστή σήμανση ωφελεί την προσβασιμότητα
✅ Αναγνωρίσετε την ολοκληρωμένη δομή του δέντρου του εγγράφου

Δοκιμάστε την Κατανόησή Σας: Προσπαθήστε να ανοίξετε το αρχείο HTML σας σε έναν περιηγητή με απενεργοποιημένη τη JavaScript και αφαιρώντας το CSS. Αυτό σας δείχνει την καθαρή σημασιολογική δομή που έχετε δημιουργήσει!

Πρόκληση GitHub Copilot Agent

Χρησιμοποιήστε τη λειτουργία Agent για να ολοκληρώσετε την παρακάτω πρόκληση:

Περιγραφή: Δημιουργήστε μια σημασιολογική δομή HTML για μια ενότητα οδηγού φροντίδας φυτών που θα μπορούσε να προστεθεί στο έργο τεράριουμ.

Πρόταση: Δημιουργήστε μια σημασιολογική ενότητα HTML που να περιλαμβάνει έναν κύριο τίτλο "Οδηγός Φροντίδας Φυτών", τρεις υποενότητες με τίτλους "Πότισμα", "Απαιτήσεις Φωτισμού" και "Φροντίδα Εδάφους", κάθε μία να περιέχει μια παράγραφο με πληροφορίες φροντίδας φυτών. Χρησιμοποιήστε σωστές σημασιολογικές ετικέτες HTML όπως <section>, <h2>, <h3>, και <p> για να δομήσετε το περιεχόμενο κατάλληλα.

Μάθετε περισσότερα για τη λειτουργία agent εδώ.

Πρόκληση Εξερεύνησης Ιστορίας HTML

Μάθετε για την εξέλιξη του Web

Το HTML έχει εξελιχθεί σημαντικά από τότε που ο Tim Berners-Lee δημιούργησε τον πρώτο περιηγητή στο CERN το 1990. Ορισμένες παλιότερες ετικέτες όπως το <marquee> είναι πλέον απαξιωμένες επειδή δεν λειτουργούν καλά με τα σύγχρονα πρότυπα προσβασιμότητας και τις αρχές responsive design.

Δοκιμάστε αυτό το Πείραμα:

Πρόχειρα βάλτε την ετικέτα <marquee> γύρω από τον τίτλο σας <h1>: <marquee><h1>My Terrarium</h1></marquee>
Ανοίξτε τη σελίδα σας σε ένα πρόγραμμα περιήγησης και παρατηρήστε το εφέ κύλισης
Σκεφτείτε γιατί αυτή η ετικέτα απαξιώθηκε (υπόδειξη: σκεφτείτε την εμπειρία χρήστη και την προσβασιμότητα)
Αφαιρέστε την ετικέτα <marquee> και επιστρέψτε σε σημασιολογική σήμανση

Ερωτήσεις για Σκέψη:

Πώς μπορεί ένας κύλινος τίτλος να επηρεάσει χρήστες με προβλήματα όρασης ή ευαισθησία στην κίνηση;
Ποιες σύγχρονες τεχνικές CSS θα μπορούσαν να πετύχουν παρόμοια οπτικά εφέ με πιο προσβάσιμο τρόπο;
Γιατί είναι σημαντικό να χρησιμοποιούμε τα τρέχοντα πρότυπα web αντί για απαξιωμένα στοιχεία;

Εξερευνήστε περισσότερα για τα παρωχημένα και απαξιωμένα στοιχεία HTML για να κατανοήσετε πώς εξελίσσονται τα πρότυπα web για να βελτιώσουν την εμπειρία χρήστη.

Κουίζ Μετά το Μάθημα

Κουίζ μετά το μάθημα

Ανασκόπηση & Αυτομελέτη

Εμβαθύνετε στη Γνώση σας για το HTML

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

Συνιστώμενες Διαδρομές Μάθησης:

Ιστορία και Εξέλιξη του HTML
- Ερευνήστε τη χρονογραμμή από το HTML 1.0 μέχρι το HTML5
- Εξερευνήστε γιατί ορισμένες ετικέτες απαξιώθηκαν (προσβασιμότητα, φιλικότητα σε κινητά, ευκολία συντήρησης)
- Μελετήστε τις αναδυόμενες λειτουργίες και προτάσεις HTML
Εμβάθυνση στο Σημασιολογικό HTML
- Μελετήστε την πλήρη λίστα των σημασιολογικών στοιχείων HTML5
- Εξασκηθείτε στο πότε πρέπει να χρησιμοποιείτε <article>, <section>, <aside>, και <main>
- Μάθετε για τα χαρακτηριστικά ARIA για βελτιωμένη προσβασιμότητα
Σύγχρονη Ανάπτυξη Web
- Εξερευνήστε δημιουργία responsive ιστοσελίδων στο Microsoft Learn
- Κατανοήστε πώς το HTML συνεργάζεται με CSS και JavaScript
- Μάθετε για βέλτιστες πρακτικές απόδοσης και SEO

Ερωτήσεις για Σκέψη:

Ποιες απαξιωμένες ετικέτες HTML ανακαλύψατε και γιατί αφαιρέθηκαν;
Ποιες νέες λειτουργίες HTML προτείνονται για μελλοντικές εκδόσεις;
Πώς συμβάλλει το σημασιολογικό HTML στην προσβασιμότητα και στο SEO;

⚡ Τι Μπορείτε να Κάνετε στα Επόμενα 5 Λεπτά

Ανοίξτε τα DevTools (F12) και εξετάστε τη δομή HTML ενός αγαπημένου σας ιστότοπου
Δημιουργήστε ένα απλό αρχείο HTML με βασικές ετικέτες: <h1>, <p>, και <img>
Επικυρώστε το HTML σας χρησιμοποιώντας τον W3C HTML Validator online
Δοκιμάστε να προσθέσετε ένα σχόλιο στο HTML σας με

🎯 Τι Μπορείτε να Επιτύχετε αυτή την Ώρα

Ολοκληρώστε το κουίζ μετά το μάθημα και μάθετε τις έννοιες του σημασιολογικού HTML
Δημιουργήστε μια απλή ιστοσελίδα για εσάς με σωστή δομή HTML
Πειραματιστείτε με διαφορετικά επίπεδα επικεφαλίδων και μορφοποίηση κειμένου
Προσθέστε εικόνες και συνδέσμους για να εξασκηθείτε στην ενσωμάτωση multimedia
Ερευνήστε λειτουργίες HTML5 που δεν έχετε δοκιμάσει ακόμα

📅 Η Εβδομαδιαία Διαδρομή HTML σας

Ολοκληρώστε την εργασία τεράριουμ με σημασιολογική σήμανση
Δημιουργήστε μια προσβάσιμη ιστοσελίδα με ετικέτες ARIA και ρόλους
Εξασκηθείτε στη δημιουργία φορμών με διάφορους τύπους εισόδου
Εξερευνήστε APIs HTML5 όπως το localStorage ή τη γεωεντοπισμό
Μελετήστε πρότυπα responsive HTML και κινητά πρώτα σχεδίαση
Ανασκοπήστε κώδικα HTML άλλων προγραμματιστών για βέλτιστες πρακτικές

🌟 Η Μηνιαία σας Βάση για το Web

Δημιουργήστε μια ιστοσελίδα portfolio που δείχνει την κυριαρχία σας στο HTML
Μάθετε HTML templating με ένα framework όπως το Handlebars
Συνεισφέρετε σε έργα ανοιχτού κώδικα βελτιώνοντας την HTML τεκμηρίωση
Εξοικειωθείτε με προχωρημένες έννοιες HTML όπως προσαρμοσμένα στοιχεία
Ενσωματώστε HTML με CSS frameworks και βιβλιοθήκες JavaScript
Καθοδηγήστε άλλους που μαθαίνουν τα βασικά του HTML

🎯 Ο Χρονοδιάγραμμα Κατάκτησης του HTML σας

timeline
    title Πρόοδος Μάθησης HTML
    
    section Βάση (5 λεπτά)
        Δομή Εγγράφου: Δήλωση DOCTYPE
                         : Ρίζα στοιχείου HTML
                         : Κατανόηση Head vs Body
        
    section Μεταδεδομένα (10 λεπτά)
        Απαραίτητα Meta Tags: Κωδικοποίηση χαρακτήρων
                           : Διαμόρφωση viewport
                           : Συμβατότητα προγράμματος περιήγησης
        
    section Δημιουργία Περιεχομένου (15 λεπτά)
        Ενσωμάτωση Εικόνων: Σωστές διαδρομές αρχείων
                         : Σημασία κειμένου alt
                         : Αυτοτελή tags
        
    section Οργάνωση Διάταξης (20 λεπτά)
        Στρατηγική Container: Στοιχεία Div για δομή
                          : Ονοματοδοσία κλάσης και ID
                          : Ιεραρχία εμφωλευμένων στοιχείων
        
    section Κυριότητα Σημασιολογίας (30 λεπτά)
        Σημαντική Σήμανση: Ιεραρχία επικεφαλίδων
                         : Πλοήγηση αναγνώστη οθόνης
                         : Βέλτιστες πρακτικές προσβασιμότητας
        
    section Προχωρημένες Έννοιες (1 ώρα)
        Χαρακτηριστικά HTML5: Σύγχρονα σημασιολογικά στοιχεία
                      : Χαρακτηριστικά ARIA
                      : Λήψη υπόψη απόδοσης
        
    section Επαγγελματικές Δεξιότητες (1 εβδομάδα)
        Οργάνωση Κώδικα: Μοντέλα δομής αρχείων
                         : Συντηρήσιμη σήμανση
                         : Συνεργασία ομάδας
        
    section Επίπεδο Ειδικού (1 μήνας)
        Σύγχρονα Πρότυπα Web: Προοδευτική βελτίωση
                            : Συμβατότητα πολλαπλών προγραμμάτων περιήγησης
                            : Ενημερώσεις προδιαγραφών HTML

🛠️ Περίληψη Εργαλειοθήκης HTML

Μετά την ολοκλήρωση αυτού του μαθήματος, έχετε τώρα:

Δομή Εγγράφου: Πλήρης βάση HTML5 με σωστό DOCTYPE
Σημασιολογική Σήμανση: Σημαντικές ετικέτες που βελτιώνουν την προσβασιμότητα και το SEO
Ενσωμάτωση Εικόνας: Σωστή οργάνωση αρχείων και πρακτικές alt κειμένου
Δοχεία Διάταξης: Στρατηγική χρήση div με περιγραφικά ονόματα κλάσεων
Επίγνωση Προσβασιμότητας: Κατανόηση πλοήγησης με screen reader
Σύγχρονα Πρότυπα: Τρέχουσες πρακτικές HTML5 και γνώση απαξιωμένων ετικετών
Βάση Έργου: Στερεά βάση για στυλ CSS και διαδραστικότητα JavaScript

Επόμενα Βήματα: Η δομή HTML σας είναι έτοιμη για στυλ CSS! Η σημασιολογική βάση που χτίσατε θα κάνει το επόμενο μάθημα πολύ πιο εύκολο να κατανοηθεί.

Εργασία

Πρακτική HTML: Δημιουργία προσομοίωσης blog

Αποποίηση ευθύνης:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI Co-op Translator. Παρόλο που προσπαθούμε για ακρίβεια, παρακαλούμε να λάβετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Έργο Terrarium Μέρος 1: Εισαγωγή στο HTML

Προ-Διαλέξη Quiz

Ρύθμιση του Έργου σου

Εργασία: Δημιουργία Δομής Έργου

Κατανόηση της Δομής Εγγράφου HTML

Η Δήλωση DOCTYPE και το Ριζικό Στοιχείο

🔄 Παιδαγωγικός Έλεγχος

Προσθήκη Βασικών Μεταδεδομένων Εγγράφου

Εργασία: Πρόσθεσε το Τμήμα Head του Εγγράφου

Δημιουργία του Σώματος του Εγγράφου

Κατανόηση Δομής Ετικετών HTML

Εργασία: Πρόσθεσε το Στοιχείο Body

Εργασία με Εικόνες και Δοχείς Διάταξης

Εργασία: Δημιουργία Διάταξης Εμφάνισης Φυτών

🔄 Παιδαγωγικός Έλεγχος

Χρήση Σημασιολογικού HTML για Προσβασιμότητα

Προσθήκη Σημασιολογικού Τίτλου Σελίδας

Δημιουργία του Δοχείου Terrarium

Εργασία: Πρόσθεσε τη Δομή του Terrarium

🔄 Παιδαγωγικός Έλεγχος

Πρόκληση GitHub Copilot Agent

Πρόκληση Εξερεύνησης Ιστορίας HTML

Κουίζ Μετά το Μάθημα

Ανασκόπηση & Αυτομελέτη

⚡ Τι Μπορείτε να Κάνετε στα Επόμενα 5 Λεπτά

🎯 Τι Μπορείτε να Επιτύχετε αυτή την Ώρα

📅 Η Εβδομαδιαία Διαδρομή HTML σας

🌟 Η Μηνιαία σας Βάση για το Web

🎯 Ο Χρονοδιάγραμμα Κατάκτησης του HTML σας

🛠️ Περίληψη Εργαλειοθήκης HTML

Εργασία

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

Έργο Terrarium Μέρος 1: Εισαγωγή στο HTML

Προ-Διαλέξη Quiz

Ρύθμιση του Έργου σου

Εργασία: Δημιουργία Δομής Έργου

Κατανόηση της Δομής Εγγράφου HTML

Η Δήλωση DOCTYPE και το Ριζικό Στοιχείο

🔄 Παιδαγωγικός Έλεγχος

Προσθήκη Βασικών Μεταδεδομένων Εγγράφου

Εργασία: Πρόσθεσε το Τμήμα Head του Εγγράφου

Δημιουργία του Σώματος του Εγγράφου

Κατανόηση Δομής Ετικετών HTML

Εργασία: Πρόσθεσε το Στοιχείο Body

Εργασία με Εικόνες και Δοχείς Διάταξης

Εργασία: Δημιουργία Διάταξης Εμφάνισης Φυτών

🔄 Παιδαγωγικός Έλεγχος

Χρήση Σημασιολογικού HTML για Προσβασιμότητα

Προσθήκη Σημασιολογικού Τίτλου Σελίδας

Δημιουργία του Δοχείου Terrarium

Εργασία: Πρόσθεσε τη Δομή του Terrarium

🔄 Παιδαγωγικός Έλεγχος

Πρόκληση GitHub Copilot Agent

Πρόκληση Εξερεύνησης Ιστορίας HTML

Κουίζ Μετά το Μάθημα

Ανασκόπηση & Αυτομελέτη

⚡ Τι Μπορείτε να Κάνετε στα Επόμενα 5 Λεπτά

🎯 Τι Μπορείτε να Επιτύχετε αυτή την Ώρα

📅 Η Εβδομαδιαία Διαδρομή HTML σας

🌟 Η Μηνιαία σας Βάση για το Web

🎯 Ο Χρονοδιάγραμμα Κατάκτησης του HTML σας

🛠️ Περίληψη Εργαλειοθήκης HTML

Εργασία