History

softchris a7d39944e9 🌐 Update translations via Co-op Translator		1 month ago
..
README.md	🌐 Update translations via Co-op Translator	1 month ago
assignment.md	🌐 Update translations via Co-op Translator	1 month ago

README.md

Unescape Escape

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

Σκίτσο από την Tomomi Imura

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

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

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

Ερωτηματολόγιο πριν το μάθημα

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

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

Πριν βουτήξουμε στον κώδικα 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 ακολουθεί μια συγκεκριμένη δομή που οι περιηγητές χρειάζονται για να κατανοήσουν και να εμφανίσουν σωστά. Σκεφτείτε αυτή τη δομή σαν μια επίσημη επιστολή – έχει απαιτούμενα στοιχεία σε συγκεκριμένη σειρά που βοηθούν τον παραλήπτη (σε αυτή την περίπτωση, τον περιηγητή) να επεξεργαστεί σωστά το περιεχόμενο.

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

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

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

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

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

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

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

📚 Μάθετε Περισσότερα: Η δήλωση DOCTYPE αποτρέπει τους περιηγητές από το να εισέλθουν σε "quirks mode", που χρησιμοποιούνταν για την υποστήριξη πολύ παλιών ιστοσελίδων. Η σύγχρονη ανάπτυξη ιστού χρησιμοποιεί την απλή δήλωση <!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
Ρυθμίζει τον σχεδιασμό για να ταιριάζει με το πλάτος της συσκευής
Ελέγχει το αρχικό επίπεδο ζουμ για να εμφανίζει το περιεχόμενο σε φυσικό μέγεθος

🤔 Σκεφτείτε Αυτό: Τι θα συνέβαινε αν ορίζατε μια ετικέτα meta για το 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/plant1.d87946a2ca70cc4316bda6e6c3af7210fbe9ada5539a7885141a9ce0efaf7be3.el.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.el.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.el.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.el.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.el.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.el.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621a6c595bdf3939103568f9efc7d3b06a0f02a1ea66f479de0.el.png" />
		</div>
	</div>
	<div id="right-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/plant8.38d6428174ffa850a47cd1b81d528fa528adda7d23f3ae0bb42f4a27356ca5e6.el.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.el.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.el.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.el.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.el.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.el.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.el.png" />
		</div>
	</div>
</div>

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

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

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

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

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

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

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

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

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

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

<h1>My Terrarium</h1>

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

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

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

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

Μάθετε περισσότερα για agent mode εδώ.

Εξερεύνηση της Ιστορίας του HTML Challenge

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

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

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

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

Ερωτήσεις Αναστοχασμού:

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

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

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

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

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

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

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

Προτεινόμενες Διαδρομές Μάθησης:

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

Ερωτήσεις Αναστοχασμού:

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

Εργασία

Εξασκηθείτε στο HTML: Δημιουργήστε ένα mockup blog

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

README.md Unescape Escape

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

Ερωτηματολόγιο πριν το μάθημα

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

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

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

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

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

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

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

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

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

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

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

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

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

Εξερεύνηση της Ιστορίας του HTML Challenge

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

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

Εργασία

README.md

Unescape Escape