# Έργο Terrarium Μέρος 1: Εισαγωγή στο HTML ```mermaid 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 ``` ![Εισαγωγή στο HTML](../../../../translated_images/el/webdev101-html.4389c2067af68e98.webp) > Σημείωση σκίτσου από την [Tomomi Imura](https://twitter.com/girlie_mac) Το HTML, ή HyperText Markup Language, είναι το θεμέλιο κάθε ιστότοπου που έχετε επισκεφθεί ποτέ. Σκεφτείτε το HTML ως το σκελετό που δίνει δομή στις ιστοσελίδες – καθορίζει πού πάει το περιεχόμενο, πώς οργανώνεται και τι αντιπροσωπεύει κάθε κομμάτι. Ενώ το CSS αργότερα θα "ντύσει" το HTML σας με χρώματα και διατάξεις, και η JavaScript θα του δώσει ζωή με διαδραστικότητα, το HTML παρέχει την ουσιαστική δομή που κάνει τα πάντα δυνατά. Σε αυτό το μάθημα, θα δημιουργήσετε τη δομή HTML για μια εικονική διεπαφή terrarium. Αυτό το πρακτικό έργο θα σας διδάξει βασικές έννοιες HTML ενώ χτίζετε κάτι οπτικά ελκυστικό. Θα μάθετε πώς να οργανώνετε το περιεχόμενο χρησιμοποιώντας σημασιολογικά στοιχεία, να δουλεύετε με εικόνες και να δημιουργείτε το θεμέλιο για μια διαδραστική διαδικτυακή εφαρμογή. Στο τέλος αυτού του μαθήματος, θα έχετε μια λειτουργική σελίδα HTML που εμφανίζει εικόνες φυτών σε οργανωμένες στήλες, έτοιμη για στυλιζάρισμα στο επόμενο μάθημα. Μην ανησυχείτε αν φαίνεται απλή στην αρχή – αυτό ακριβώς πρέπει να κάνει το HTML πριν το CSS προσθέσει την οπτική τελειότητα. ```mermaid mindmap root((Βασικά HTML)) Structure Δήλωση DOCTYPE Στοιχείο HTML Ενότητα Κεφαλίδας Περιεχόμενο Σώματος Elements Ετικέτες & Χαρακτηριστικά Αυτοκλεινόμενες Ετικέτες Εμφωλευμένα Στοιχεία Μπλοκ vs Ενσωματωμένο Content Στοιχεία Κειμένου Εικόνες Κοντέινερ (div) Λίστες Semantics Σημαντικές Ετικέτες Προσβασιμότητα Αναγνώστες Οθόνης Οφέλη SEO Best Practices Σωστή Εμφώλευση Έγκυρη Σήμανση Περιγραφικό Κείμενο Alt Οργανωμένη Δομή ``` ## Προ-Διαλέξη Quiz [Προ-διάλεξη quiz](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **Παρακολούθησε και Μάθε**: Δες αυτή τη χρήσιμη σύντομη επισκόπηση βίντεο > > [![HTML Fundamentals Video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## Ρύθμιση του Έργου σου Πριν βουτήξουμε στον κώδικα HTML, ας ρυθμίσουμε έναν κατάλληλο χώρο εργασίας για το έργο terrarium σου. Η δημιουργία μιας οργανωμένης δομής αρχείων από την αρχή είναι μια κρίσιμη συνήθεια που θα σου φανεί χρήσιμη καθ’ όλη τη διάρκεια του ταξιδιού σου στην ανάπτυξη ιστοσελίδων. ### Εργασία: Δημιουργία Δομής Έργου Θα δημιουργήσεις έναν αφιερωμένο φάκελο για το έργο terrarium και θα προσθέσεις το πρώτο σου αρχείο HTML. Εδώ είναι δύο προσεγγίσεις που μπορείς να χρησιμοποιήσεις: **Επιλογή 1: Χρήση Visual Studio Code** 1. Άνοιξε το Visual Studio Code 2. Κάνε κλικ στο "File" → "Open Folder" ή χρησιμοποιήσε `Ctrl+K, Ctrl+O` (Windows/Linux) ή `Cmd+K, Cmd+O` (Mac) 3. Δημιούργησε έναν νέο φάκελο με όνομα `terrarium` και επίλεξέ τον 4. Στο παράθυρο Explorer, κάνε κλικ στο εικονίδιο "New File" 5. Ονόμασε το αρχείο σου `index.html` ![VS Code Explorer showing new file creation](../../../../translated_images/el/vs-code-index.e2986cf919471eb9.webp) **Επιλογή 2: Χρήση Εντολών Τερματικού** ```bash 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 ακολουθεί μια συγκεκριμένη δομή που τα προγράμματα περιήγησης χρειάζεται να καταλάβουν και να εμφανίσουν σωστά. Σκεφτείτε αυτή τη δομή σαν μια επίσημη επιστολή – έχει απαιτούμενα στοιχεία με συγκεκριμένη σειρά που βοηθούν τον παραλήπτη (στην προκειμένη περίπτωση το πρόγραμμα περιήγησης) να επεξεργαστεί σωστά το περιεχόμενο. ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] 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 λειτουργούν ως η "εισαγωγή" του εγγράφου προς το πρόγραμμα περιήγησης: ```html <!DOCTYPE html> <html></html> ``` **Κατανόηση του τι κάνει αυτός ο κώδικας:** - **Δηλώνει** τον τύπο εγγράφου ως HTML5 με το `<!DOCTYPE html>` - **Δημιουργεί** το ριζικό στοιχείο `<html>` που θα περιέχει όλο το περιεχόμενο της σελίδας - **Εδραιώνει** σύγχρονα διαδικτυακά πρότυπα για σωστή απόδοση από τα προγράμματα περιήγησης - **Εξασφαλίζει** συνεπή εμφάνιση σε διαφορετικά προγράμματα περιήγησης και συσκευές > 💡 **Συμβουλή VS Code**: Περάστε το ποντίκι πάνω από οποιαδήποτε ετικέτα HTML στο VS Code για να δείτε χρήσιμες πληροφορίες από τα MDN Web Docs, περιλαμβάνοντας παραδείγματα χρήσης και λεπτομέρειες συμβατότητας προγραμμάτων περιήγησης. > 📚 **Μάθε Περισσότερα**: Η δήλωση DOCTYPE αποτρέπει τα προγράμματα περιήγησης από το να εισέλθουν σε "quirks mode", που χρησιμοποιούνταν για υποστήριξη πολύ παλιών ιστοσελίδων. Η σύγχρονη ανάπτυξη ιστοσελίδων χρησιμοποιεί τη απλή δήλωση `<!DOCTYPE html>` για να εξασφαλίσει [απόδοση σύμφωνα με τα πρότυπα](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ### 🔄 **Παιδαγωγικός Έλεγχος** **Παύση και Σκέψη**: Πριν συνεχίσετε, βεβαιωθείτε ότι καταλαβαίνετε: - ✅ Γιατί κάθε έγγραφο HTML χρειάζεται δήλωση DOCTYPE - ✅ Τι περιέχει το ριζικό στοιχείο `<html>` - ✅ Πώς αυτή η δομή βοηθάει τα προγράμματα περιήγησης να αποδώσουν σωστά τις σελίδες **Γρήγορος Αυτοέλεγχος**: Μπορείτε να εξηγήσετε με δικά σας λόγια τι σημαίνει "απόδοση σύμφωνα με τα πρότυπα"; ## Προσθήκη Βασικών Μεταδεδομένων Εγγράφου Το τμήμα `<head>` ενός εγγράφου HTML περιέχει κρίσιμες πληροφορίες που τα προγράμματα περιήγησης και οι μηχανές αναζήτησης χρειάζονται, αλλά που οι επισκέπτες δεν βλέπουν άμεσα στη σελίδα. Σκεφτείτε το σαν την "πλάτη της σκηνής" πληροφορία που βοηθάει την ιστοσελίδα σας να λειτουργεί σωστά και να εμφανίζεται σωστά σε διαφορετικές συσκευές και πλατφόρμες. Αυτά τα μεταδεδομένα λένε στα προγράμματα περιήγησης πώς να εμφανίσουν τη σελίδα σας, ποια κωδικοποίηση χαρακτήρων να χρησιμοποιήσουν και πώς να χειριστούν διαφορετικά μεγέθη οθόνης – όλα ουσιώδη για τη δημιουργία επαγγελματικών, προσβάσιμων ιστοσελίδων. ### Εργασία: Πρόσθεσε το Τμήμα Head του Εγγράφου Εισάγετε αυτό το τμήμα `<head>` ανάμεσα στις ετικέτες ανοίγματος και κλεισίματος `<html>`: ```html <head> <title>Welcome to my Virtual Terrarium ``` **Ανάλυση του τι επιτυγχάνει κάθε στοιχείο:** - **Ρυθμίζει** τον τίτλο της σελίδας που εμφανίζεται σε καρτέλες προγραμμάτων περιήγησης και αποτελέσματα αναζήτησης - **Ορίζει** κωδικοποίηση χαρακτήρων UTF-8 για σωστή εμφάνιση κειμένου παγκοσμίως - **Εξασφαλίζει** συμβατότητα με σύγχρονες εκδόσεις του Internet Explorer - **Ρυθμίζει** τον ευαίσθητο σχεδιασμό θέτοντας το viewport να ταιριάζει με το πλάτος της συσκευής - **Ελέγχει** το αρχικό επίπεδο ζουμ για εμφάνιση περιεχομένου στο φυσιολογικό μέγεθος > 🤔 **Σκέψου το**: Τι θα συνέβαινε αν ρύθμιζες το meta tag viewport έτσι: ``; Αυτό θα ανάγκαζε τη σελίδα να είναι πάντα 600 pixels πλάτος, καταστρέφοντας το ευαίσθητο σχεδιασμό! Μάθε περισσότερα για [σωστή ρύθμιση viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). ## Δημιουργία του Σώματος του Εγγράφου Το στοιχείο `` περιέχει όλο το ορατό περιεχόμενο της ιστοσελίδας σου – όλα όσα οι χρήστες θα δουν και θα αλληλεπιδράσουν. Ενώ το τμήμα `` έδωσε οδηγίες στο πρόγραμμα περιήγησης, το τμήμα `` περιλαμβάνει το πραγματικό περιεχόμενο: κείμενο, εικόνες, κουμπιά και άλλα στοιχεία που δημιουργούν τη διεπαφή χρήστη. Ας προσθέσουμε τη δομή του σώματος και ας κατανοήσουμε πώς οι ετικέτες HTML συνεργάζονται για να δημιουργήσουν ουσιαστικό περιεχόμενο. ### Κατανόηση Δομής Ετικετών HTML Το HTML χρησιμοποιεί ζευγάρια ετικετών για τον ορισμό στοιχείων. Οι περισσότερες ετικέτες έχουν μια ανοιχτή ετικέτα όπως `

` και μια κλειστή ετικέτα όπως `

`, με περιεχόμενο ανάμεσά τους: `

Γειά σου, κόσμε!

`. Αυτό δημιουργεί ένα στοιχείο παραγράφου που περιέχει το κείμενο "Γειά σου, κόσμε!". ### Εργασία: Πρόσθεσε το Στοιχείο Body Ενημέρωσε το αρχείο HTML σου για να συμπεριλάβει το στοιχείο ``: ```html Welcome to my Virtual Terrarium ``` **Τι παρέχει αυτή η ολοκληρωμένη δομή:** - **Εδραιώνει** το βασικό πλαίσιο εγγράφου HTML5 - **Περιλαμβάνει** ουσιώδη μεταδεδομένα για σωστή απόδοση από το πρόγραμμα περιήγησης - **Δημιουργεί** ένα κενό σώμα έτοιμο για το ορατό σου περιεχόμενο - **Ακολουθεί** σύγχρονες βέλτιστες πρακτικές ανάπτυξης ιστού Τώρα είσαι έτοιμος να προσθέσεις τα ορατά στοιχεία του terrarium σου. Θα χρησιμοποιήσουμε στοιχεία `
` ως δοχεία για να οργανώσουμε διαφορετικά τμήματα περιεχομένου, και στοιχεία `` για να εμφανίσουμε τις εικόνες των φυτών. ### Εργασία με Εικόνες και Δοχείς Διάταξης Οι εικόνες είναι ειδικές στο HTML γιατί χρησιμοποιούν "αυτοκλειόμενες" ετικέτες. Σε αντίθεση με στοιχεία όπως `

` που τυλίγουν περιεχόμενο, η ετικέτα `` περιέχει όλες τις πληροφορίες μέσα στην ίδια την ετικέτα χρησιμοποιώντας ιδιότητες όπως `src` για τη διαδρομή του αρχείου της εικόνας και `alt` για προσβασιμότητα. Πριν προσθέσεις εικόνες στο HTML σου, πρέπει να οργανώσεις σωστά τα αρχεία του έργου δημιουργώντας έναν φάκελο εικόνων και προσθέτοντας τα γραφικά φυτών. **Πρώτα, ρύθμισε τις εικόνες σου:** 1. Δημιούργησε ένα φάκελο με όνομα `images` μέσα στο φάκελο του έργου terrarium 2. Κατέβασε τις εικόνες φυτών από το [φάκελο λύσης](../../../../3-terrarium/solution/images) (συνολικά 14 εικόνες φυτών) 3. Αντέγραψε όλες τις εικόνες φυτών στο νέο σου φάκελο `images` ### Εργασία: Δημιουργία Διάταξης Εμφάνισης Φυτών Τώρα πρόσθεσε τις εικόνες φυτών οργανωμένες σε δύο στήλες ανάμεσα στις ετικέτες ``: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **Βήμα βήμα, τι συμβαίνει σε αυτόν τον κώδικα:** - **Δημιουργεί** έναν κύριο δοχέα σελίδας με `id="page"` για να κρατά όλο το περιεχόμενο - **Εδραιώνει** δύο δοχεία στηλών: `left-container` και `right-container` - **Οργανώνει** 7 φυτά στην αριστερή στήλη και 7 φυτά στη δεξιά στήλη - **Τυλίγει** κάθε εικόνα φυτού σε ένα `plant-holder` div για ατομική τοποθέτηση - **Εφαρμόζει** συνεπή ονόματα κλάσεων για στυλιζάρισμα CSS στο επόμενο μάθημα - **Αναθέτει** μοναδικά ID σε κάθε εικόνα φυτού για μελλοντική αλληλεπίδραση JavaScript - **Περιλαμβάνει** σωστές διαδρομές αρχείων προς το φάκελο εικόνων > 🤔 **Σκέψου το**: Παρατήρησε ότι όλες οι εικόνες έχουν αυτή τη στιγμή το ίδιο alt κείμενο "plant". Αυτό δεν είναι ιδανικό για προσβασιμότητα. Οι χρήστες με αναγνώστες οθόνης θα ακούσουν "φυτό" επαναλαμβανόμενο 14 φορές χωρίς να γνωρίζουν ποιο συγκεκριμένο φυτό δείχνει κάθε εικόνα. Μπορείς να σκεφτείς καλύτερα, πιο περιγραφικά alt κείμενα για κάθε εικόνα; > 📝 **Τύποι Στοιχείων HTML**: Τα στοιχεία `
` είναι "block-level" και καταλαμβάνουν όλο το πλάτος, ενώ τα στοιχεία `` είναι "inline" και καταλαμβάνουν μόνο το απαραίτητο πλάτος. Τι πιστεύεις θα συνέβαινε αν άλλαζες όλες αυτές τις ετικέτες `
` σε ``; ### 🔄 **Παιδαγωγικός Έλεγχος** **Κατανόηση Δομής**: Πάρε μια στιγμή να επανεξετάσεις τη δομή HTML σου: - ✅ Μπορείς να αναγνωρίσεις τα κύρια δοχεία στη διάταξή σου; - ✅ Καταλαβαίνεις γιατί κάθε εικόνα έχει μοναδικό ID; - ✅ Πώς θα περιέγραφες τον σκοπό των στοιχείων `plant-holder`; **Οπτικός Έλεγχος**: Άνοιξε το αρχείο HTML σε ένα πρόγραμμα περιήγησης. Θα πρέπει να δεις: - Μια βασική λίστα εικόνων φυτών - Εικόνες οργανωμένες σε δύο στήλες - Απλή, χωρίς στυλιζάρισμα διάταξη **Θυμήσου**: Αυτή η απλή εμφάνιση είναι ακριβώς το πώς θα πρέπει να φαίνεται το HTML πριν το στυλιζάρισμα με CSS! Με αυτό το markup προστιθέμενο, τα φυτά θα εμφανιστούν στην οθόνη, αν και δεν θα φαίνονται καλοφτιαγμένα ακόμα – γι’ αυτό υπάρχει το CSS στο επόμενο μάθημα! Για τώρα, έχεις ένα σταθερό θεμέλιο HTML που οργανώνει σωστά το περιεχόμενό σου και ακολουθεί τις βέλτιστες πρακτικές προσβασιμότητας. ## Χρήση Σημασιολογικού HTML για Προσβασιμότητα Σημασιολογικό HTML σημαίνει να επιλέγεις τα HTML στοιχεία βάσει της σημασίας και του σκοπού τους, όχι μόνο της εμφάνισής τους. Όταν χρησιμοποιείς σημασιολογικό markup, επικοινωνείς τη δομή και το νόημα του περιεχομένου σου στα προγράμματα περιήγησης, τις μηχανές αναζήτησης και τις βοηθητικές τεχνολογίες όπως οι αναγνώστες οθόνης. ```mermaid flowchart TD A[Χρειάζεται να προσθέσετε περιεχόμενο;] --> B{Τι τύπος;} B -->|Κύριος τίτλος| C["

"] B -->|Υπότιτλος| D["

,

, κ.ά."] B -->|Παράγραφος| E["

"] B -->|Λίστα| F["

    ,
      "] B -->|Πλοήγηση| G["