# Proiectul Terrarium Partea 1: Introducere în HTML ```mermaid journey title Călătoria ta de învățare HTML section Bază Creează fișier HTML: 3: Student Adaugă DOCTYPE: 4: Student Structurează documentul: 5: Student section Conținut Adaugă metadata: 4: Student Include imagini: 5: Student Organizează aspectul: 5: Student section Semantică Folosește etichete corecte: 4: Student Îmbunătățește accesibilitatea: 5: Student Construiește terariu: 5: Student ``` ![Introducere în HTML](../../../../translated_images/ro/webdev101-html.4389c2067af68e98.webp) > Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac) HTML, sau HyperText Markup Language, este fundația fiecărui site web pe care l-ai vizitat vreodată. Gândește-te la HTML ca scheletul care oferă structură paginilor web – definește unde merge conținutul, cum este organizat și ce reprezintă fiecare element. În timp ce CSS va „îmbrăca” mai târziu HTML-ul tău cu culori și layout-uri, iar JavaScript îl va anima cu interactivitate, HTML oferă structura esențială care face tot restul posibil. În această lecție, vei crea structura HTML pentru o interfață virtuală de terrariu. Acest proiect practic te va învăța conceptele fundamentale de HTML în timp ce construiești ceva vizual atractiv. Vei învăța cum să organizezi conținutul folosind elemente semantice, să lucrezi cu imagini și să creezi baza pentru o aplicație web interactivă. La sfârșitul acestei lecții, vei avea o pagină HTML funcțională care afișează imagini cu plante în coloane organizate, gata pentru stilizare în lecția următoare. Nu-ți face griji dacă arată simplu la început – asta face exact HTML-ul înainte ca CSS să adauge rafinamentul vizual. ```mermaid mindmap root((Fundamente HTML)) Structure Declarația DOCTYPE Elementul HTML Secțiunea Head Conținutul Body Elements Etichete & Atribute Etichete închise automat Elemente imbricate Block vs Inline Content Elemente de text Imagini Containere (div) Liste Semantics Etichete semnificative Accesibilitate Cititoare de ecran Beneficii SEO Best Practices Îmbinare corectă Marcaj valid Text alternativ descriptiv Structură organizată ``` ## Chestionar Pre-Lecție [Chestionar pre-lectură](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **Urmărește și învață**: Vizualizează acest videoclip util de prezentare > > [![Video Fundamente HTML](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## Configurarea Proiectului Tău Înainte să intrăm în codul HTML, să configurăm un spațiu de lucru adecvat pentru proiectul tău de terrarium. Crearea unei structuri organizate de fișiere de la început este un obicei crucial care te va ajuta pe tot parcursul călătoriei tale în dezvoltarea web. ### Sarcină: Creează Structura Proiectului Tău Vei crea un folder dedicat pentru proiectul terrarium și vei adăuga primul tău fișier HTML. Iată două abordări pe care le poți folosi: **Opțiunea 1: Folosind Visual Studio Code** 1. Deschide Visual Studio Code 2. Apasă pe "File" → "Open Folder" sau folosește `Ctrl+K, Ctrl+O` (Windows/Linux) sau `Cmd+K, Cmd+O` (Mac) 3. Creează un folder nou numit `terrarium` și selectează-l 4. În panoul Explorer, apasă pe pictograma "New File" 5. Denumește fișierul `index.html` ![Explorator VS Code arătând crearea unui fișier nou](../../../../translated_images/ro/vs-code-index.e2986cf919471eb9.webp) **Opțiunea 2: Folosind Comenzi în Terminal** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **Iată ce realizează aceste comenzi:** - **Creează** un director nou numit `terrarium` pentru proiectul tău - **Navighează** în directorul terrarium - **Creează** un fișier gol `index.html` - **Deschide** fișierul în Visual Studio Code pentru editare > 💡 **Sfat Pro**: Numele fișierului `index.html` este special în dezvoltarea web. Când cineva vizitează un site, browserele caută automat `index.html` ca pagină implicită de afișare. Asta înseamnă că o adresă URL ca `https://mysite.com/projects/` va servi automat fișierul `index.html` din folderul `projects` fără a fi nevoie să specifici numele fișierului în URL. ## Înțelegerea Structurii Documentului HTML Fiecare document HTML urmează o structură specifică pe care browserele trebuie să o înțeleagă și să o afișeze corect. Gândește-te la această structură ca la o scrisoare formală – are elemente obligatorii într-o ordine anume care ajută destinatarul (în acest caz, browserul) să proceseze conținutul corect. ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] C --> E["<meta charset>"] C --> F["<meta viewport>"] B --> G["<body>"] G --> H["<h1> Titlu"] G --> I["<div> Containere"] G --> J["<img> Imagini"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` Să începem prin a adăuga fundația esențială de care are nevoie orice document HTML. ### Declarația DOCTYPE și Elementul Rădăcină Primele două linii din orice fișier HTML servesc ca „introducere” a documentului pentru browser: ```html <!DOCTYPE html> <html></html> ``` **Ce face acest cod:** - **Declară** tipul documentului ca HTML5 folosind `<!DOCTYPE html>` - **Creează** elementul rădăcină `<html>` care va conține tot conținutul paginii - **Stabilește** standarde web moderne pentru redare corectă în browser - **Asigură** afișare consistentă în diferite browsere și dispozitive > 💡 **Sfat VS Code**: Plasează mouse-ul peste orice etichetă HTML în VS Code pentru a vedea informații utile din MDN Web Docs, inclusiv exemple de utilizare și detalii despre compatibilitatea browserelor. > 📚 **Află mai multe**: Declarația DOCTYPE împiedică browserele să intre în „mod quirks,” folosit pentru a susține site-uri foarte vechi. Dezvoltarea web modernă folosește simpla declarație `<!DOCTYPE html>` pentru a asigura [redare conformă cu standardele](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ### 🔄 **Verificare Pedagogică** **Pauză și Reflectare**: Înainte să continui, asigură-te că înțelegi: - ✅ De ce fiecare document HTML are nevoie de declarația DOCTYPE - ✅ Ce conține elementul rădăcină `<html>` - ✅ Cum ajută această structură browserele să redea paginile corect **Autotest Rapid**: Poți explica în propriile cuvinte ce înseamnă „redare conformă cu standardele”? ## Adăugarea Metadatelor Esențiale Documentului Secțiunea `<head>` a unui document HTML conține informații cruciale de care au nevoie browserele și motoarele de căutare, dar pe care vizitatorii nu le văd direct pe pagină. Gândește-te la ea ca la informațiile „din culise” care ajută pagina ta să funcționeze corect și să apară corespunzător pe diverse dispozitive și platforme. Aceste metadate spun browserelor cum să afișeze pagina ta, ce codare a caracterelor să folosească și cum să gestioneze diferitele dimensiuni ale ecranului – toate esențiale pentru a crea pagini web profesionale și accesibile. ### Sarcină: Adaugă Secțiunea Head a Documentului Inserează această secțiune `<head>` între etichetele tale de deschidere și închidere `<html>`: ```html <head> <title>Welcome to my Virtual Terrarium ``` **Ce realizează fiecare element:** - **Setează** titlul paginii care apare în tab-urile browserului și în rezultatele căutărilor - **Specifică** codarea caracterelor UTF-8 pentru afișarea corectă a textului la nivel mondial - **Asigură** compatibilitatea cu versiunile moderne de Internet Explorer - **Configurează** designul responsiv prin setarea viewport-ului care se potrivește cu lățimea dispozitivului - **Controlează** nivelul inițial de zoom pentru a afișa conținutul la dimensiunea naturală > 🤔 **Gândește-te la asta**: Ce s-ar întâmpla dacă setezi meta tag-ul viewport astfel: ``? Aceasta ar forța pagina să aibă întotdeauna 600 pixeli lățime, stricând designul responsiv! Află mai multe despre [configurarea corectă a viewport-ului](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). ## Construirea Corpului Documentului Elementul `` conține tot conținutul vizibil al paginii tale web – tot ce utilizatorii vor vedea și cu ce vor interacționa. În timp ce secțiunea `` oferă instrucțiuni browserului, secțiunea `` conține conținutul propriu-zis: text, imagini, butoane și alte elemente care creează interfața ta. Să adăugăm structura corpului și să înțelegem cum funcționează etichetele HTML împreună pentru a crea conținut semnificativ. ### Înțelegerea Structurii Etichetelor HTML HTML folosește etichete pereche pentru a defini elemente. Majoritatea etichetelor au o etichetă de deschidere, ca `

`, și o etichetă de închidere, ca `

`, cu conținut între ele: `

Bună, lume!

`. Aceasta creează un element paragraf care conține textul „Bună, lume!”. ### Sarcină: Adaugă Elementul Body Actualizează fișierul tău HTML pentru a include elementul ``: ```html Welcome to my Virtual Terrarium ``` **Ce oferă această structură completă:** - **Stabilește** cadrul de bază al documentului HTML5 - **Include** metadate esențiale pentru redare corectă în browser - **Creează** un corp gol pregătit pentru conținutul vizibil - **Urmează** cele mai bune practici moderne de dezvoltare web Acum ești gata să adaugi elementele vizibile ale terrariumului tău. Vom folosi elemente `
` ca containere pentru a organiza diferitele secțiuni de conținut și elemente `` pentru a afișa imaginile plantelor. ### Lucrul cu Imagini și Containere pentru Layout Imaginile sunt speciale în HTML pentru că folosesc etichete „self-closing”. Spre deosebire de elemente ca `

` care înconjoară conținut, eticheta `` conține toate informațiile de care are nevoie în interiorul etichetei folosind atribute precum `src` pentru calea fișierului imaginii și `alt` pentru accesibilitate. Înainte să adaugi imagini în HTML, trebuie să organizezi corect fișierele proiectului tău, creând un folder de imagini și adăugând graficele cu plante. **Mai întâi, pregătește imaginile:** 1. Creează un folder numit `images` în interiorul folderului proiectului terrarium 2. Descarcă imaginile cu plante din [folderul soluției](../../../../3-terrarium/solution/images) (14 imagini cu plante în total) 3. Copiază toate imaginile cu plante în noul folder `images` ### Sarcină: Creează Layout-ul pentru Afișarea Plantelor Adaugă acum imaginile plantelor organizate în două coloane între etichetele tale ``: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **Pas cu pas, iată ce face acest cod:** - **Creează** un container principal al paginii cu `id="page"` care ține tot conținutul - **Stabilește** două containere coloane: `left-container` și `right-container` - **Organizează** 7 plante în coloana stângă și 7 plante în coloana dreaptă - **Încapsulează** fiecare imagine de plantă într-un `
` numit `plant-holder` pentru poziționare individuală - **Aplică** clase consistente pentru stilizarea CSS din lecția următoare - **Atribuie** ID-uri unice fiecărei imagini pentru interacțiuni JavaScript ulterioare - **Include** căi corecte către folderul de imagini > 🤔 **Gândește-te la asta**: Observă că toate imaginile au în prezent același text alt „plant”. Aceasta nu este ideal pentru accesibilitate. Utilizatorii de cititoare de ecran ar auzi „plantă” repetat de 14 ori fără a ști ce plantă specifică arată fiecare imagine. Poți să te gândești la texte alt mai bune și mai descriptive pentru fiecare imagine? > 📝 **Tipuri de Elemente HTML**: Elementele `
` sunt „block-level” și ocupă lățimea completă, în timp ce elementele `` sunt „inline” și ocupă doar lățimea necesară. Ce crezi că s-ar întâmpla dacă ai schimba toate aceste etichete `
` în ``? ### 🔄 **Verificare Pedagogică** **Înțelegerea Structurii**: Ia un moment să revizuiești structura HTML: - ✅ Poți identifica containerele principale din layout? - ✅ Înțelegi de ce fiecare imagine are un ID unic? - ✅ Cum ai descrie scopul div-urilor `plant-holder`? **Inspecție Vizuală**: Deschide fișierul tău HTML într-un browser. Ar trebui să vezi: - O listă simplă de imagini cu plante - Imaginile organizate în două coloane - Un layout simplu, fără stilizare **Amintește-ți**: Această aparență simplă este exact ce ar trebui să arate HTML-ul înainte de stilizarea CSS! Cu acest markup adăugat, plantele vor apărea pe ecran, deși încă nu vor arăta finisate – acest lucru îl face CSS în lecția următoare! Pentru moment, ai o fundație solidă HTML care organizează corect conținutul și respectă bunele practici pentru accesibilitate. ## Utilizarea HTML-ului Semantic pentru Accesibilitate HTML semantic înseamnă alegerea elementelor HTML bazată pe semnificația și scopul lor, nu doar pe aspectul lor. Când folosești markup semantic, comunici structura și sensul conținutului tău către browsere, motoarele de căutare și tehnologiile asistive precum cititoarele de ecran. ```mermaid flowchart TD A[Trebuie să adaugi conținut?] --> B{Ce tip?} B -->|Titlu principal| C["

"] B -->|Subtitlu| D["

,

, etc."] B -->|Paragraf| E["

"] B -->|Listă| F["

    ,
      "] B -->|Navigație| G["