Skip to content

README.md

Latest commit

 

History

History
587 lines (460 loc) · 30.8 KB

README.md

File metadata and controls

587 lines (460 loc) · 30.8 KB
Raw

Proiectul Terrarium Partea 1: Introducere în HTML

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
Loading

Introducere în HTML

Sketchnote de Tomomi Imura

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.

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ă
Loading

Chestionar Pre-Lecție

Chestionar pre-lectură

📺 Urmărește și învață: Vizualizează acest videoclip util de prezentare

Video Fundamente HTML

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

Opțiunea 2: Folosind Comenzi în Terminal

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.

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> 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
Loading

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:

<!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.

🔄 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>:

<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>

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: <meta name="viewport" content="width=600">? 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.

Construirea Corpului Documentului

Elementul <body> 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 <head> oferă instrucțiuni browserului, secțiunea <body> 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 <p>, și o etichetă de închidere, ca </p>, cu conținut între ele: <p>Bună, lume!</p>. 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 <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>

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 <div> ca containere pentru a organiza diferitele secțiuni de conținut și elemente <img> 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 <p></p> care înconjoară conținut, eticheta <img> 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 (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 <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/ro/plant1.d87946a2ca70cc43.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/ro/plant2.8daa1606c9c1ad89.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/ro/plant3.8b0d484381a2a2a7.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/ro/plant4.656e16ae1df37be2.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/ro/plant5.2b41b9355f11ebcc.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/ro/plant6.3d1827d03b656994.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/ro/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/ro/plant8.38d6428174ffa850.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/ro/plant9.f0e38d3327c37fc2.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/ro/plant10.b159d6d6e985595f.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/ro/plant11.2a03a1c2ec8ea84e.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/ro/plant12.60e9b53e538fbaf3.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/ro/plant13.07a51543c820bcf5.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/ro/plant14.6e486371ba7d36ba.png" />
		</div>
	</div>
</div>

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 <div> 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 <div> sunt „block-level” și ocupă lățimea completă, în timp ce elementele <span> sunt „inline” și ocupă doar lățimea necesară. Ce crezi că s-ar întâmpla dacă ai schimba toate aceste etichete <div> în <span>?

🔄 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.

flowchart TD
    A[Trebuie să adaugi conținut?] --> B{Ce tip?}
    B -->|Titlu principal| C["<h1>"]
    B -->|Subtitlu| D["<h2>, <h3>, etc."]
    B -->|Paragraf| E["<p>"]
    B -->|Listă| F["<ul>, <ol>"]
    B -->|Navigație| G["<nav>"]
    B -->|Articol| H["<article>"]
    B -->|Secțiune| I["<section>"]
    B -->|Container generic| J["<div>"]
    
    C --> K[Cititoarele de ecran anunță ca titlu principal]
    D --> L[Creează o ierarhie corectă a titlurilor]
    E --> M[Asigură spațiere corectă a textului]
    F --> N[Permite scurtături pentru navigarea listelor]
    G --> O[Identifică reperele de navigație]
    H --> P[Marchează conținut independent]
    I --> Q[Grupă conținut legat]
    J --> R[Folosește doar când nu se potrivește niciun tag semantic]
    
    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
Loading

Această abordare face site-urile tale mai accesibile pentru utilizatorii cu dizabilități și ajută motoarele de căutare să înțeleagă mai bine conținutul. Este un principiu fundamental al dezvoltării web moderne care creează experiențe mai bune pentru toată lumea.

Adăugarea unui Titlu Semantic pentru Pagină

Să adăugăm un titlu corespunzător paginii tale de terrarium. Inserează această linie imediat după eticheta ta de deschidere <body>:

<h1>My Terrarium</h1>

De ce contează markup-ul semantic:

  • Ajută cititoarele de ecran să navigheze și să înțeleagă structura paginii
  • Îmbunătățește optimizarea pentru motoarele de căutare (SEO) prin clarificarea ierarhiei conținutului
  • Crește accesibilitatea pentru utilizatorii cu deficiențe vizuale sau diferențe cognitive
  • Oferă experiențe mai bune utilizatorilor pe toate dispozitivele și platformele
  • Respectă standardele web și cele mai bune practici pentru dezvoltare profesională

Exemple de alegeri semantice vs. non-semantice:

Scop ✅ Alegere Semantică ❌ Alegere Non-Semantică
Titlu principal <h1>Title</h1> <div class="big-text">Title</div>
Navigație <nav><ul><li></li></ul></nav> <div class="menu"><div></div></div>
Buton <button>Click me</button> <span onclick="...">Click me</span>
Conținut articol <article><p></p></article> <div class="content"><div></div></div>

🎥 Vezi în acțiune: Urmărește cum interacționează cititoarele de ecran cu paginile web pentru a înțelege de ce markup-ul semantic este vital pentru accesibilitate. Observă cum structura corectă HTML ajută utilizatorii să navigheze eficient.

Crearea Containerului Terrariumului

Acum să adăugăm structura HTML pentru terrariumul propriu-zis – recipientul de sticlă unde plantele vor fi plasate în cele din urmă. Această secțiune demonstrează un concept important: HTML oferă structură, dar fără stilizare CSS, aceste elemente nu vor fi încă vizibile.

Markup-ul terrariumului folosește nume de clase descriptive care vor face stilizarea CSS intuitivă și ușor de întreținut în lecția următoare.

Sarcină: Adaugă Structura Terrariumului

Inserează acest markup deasupra ultimei etichete </div> (înainte de închiderea containerului paginii):

<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>

Ce realizează această structură pentru terrarium:

  • Creează un container principal pentru terrarium cu un ID unic pentru stilizare
  • Definește elemente separate pentru fiecare componentă vizuală (sus, pereți, pământ, jos)
  • Include elemente imbricate pentru efectele de reflexie a sticlei (elemente lucioase)
  • Folosește nume descriptive pentru clase care indică clar scopul fiecărui element
  • Pregătește structura pentru stilizarea CSS care va crea aspectul terariului de sticlă

🤔 Observi ceva?: Chiar dacă ai adăugat acest markup, nu vezi nimic nou pe pagină! Aceasta ilustrează perfect cum HTML oferă structură în timp ce CSS furnizează aspectul vizual. Aceste elemente <div> există, dar încă nu au stilizare vizuală – asta va veni în lecția următoare!

flowchart TD
    A[Document HTML] --> B[Capul Documentului]
    A --> C[Corpul Documentului]
    B --> D[Element Titlu]
    B --> E[Meta Charset]
    B --> F[Meta Viewport]
    C --> G[Antet Principal]
    C --> H[Container Pagină]
    H --> I[Container Stânga cu 7 plante]
    H --> J[Container Dreapta cu 7 plante]
    H --> K[Estructura Terariu]
    
    style A fill:#e1f5fe
    style B fill:#fff3e0
    style C fill:#e8f5e8
    style H fill:#f3e5f5
Loading

🔄 Verificare Pedagogică

Stăpânirea Structurii HTML: Înainte de a continua, asigură-te că poți:

  • ✅ Explica diferența dintre structura HTML și aspectul vizual
  • ✅ Identifica elementele HTML semantice vs. non-semantice
  • ✅ Descrie cum markup-ul corect ajută accesibilitatea
  • ✅ Recunoaște structura completă a arborelui documentului

Testarea Înțelegerii Tale: Încearcă să deschizi fișierul tău HTML într-un browser cu JavaScript dezactivat și CSS eliminat. Astfel vezi structura pur semantică pe care ai creat-o!

Provocarea Agent GitHub Copilot

Folosește modul Agent pentru a completa următoarea provocare:

Descriere: Creează o structură semantică HTML pentru o secțiune ghid de îngrijire a plantelor care să poată fi adăugată proiectului terariu.

Cerere: Creează o secțiune semantică HTML care să includă un titlu principal "Ghid de Îngrijire a Plantelor", trei subsecțiuni cu titluri „Udare”, „Cerințe de Lumină” și „Îngrijirea Solului”, fiecare conținând un paragraf cu informații despre îngrijirea plantelor. Folosește etichete HTML semantice corecte, precum <section>, <h2>, <h3> și <p> pentru a structura conținutul corespunzător.

Află mai multe despre modul agent.

Provocarea Istoriei HTML

Învață Despre Evoluția Web-ului

HTML a evoluat semnificativ de când Tim Berners-Lee a creat primul browser web la CERN în 1990. Unele etichete mai vechi, precum <marquee>, sunt acum învechite deoarece nu funcționează bine cu standardele moderne de accesibilitate și principiile designului responsiv.

Încearcă Experimentul:

  1. Înfășoară temporar titlul tău <h1> într-o etichetă <marquee>: <marquee><h1>My Terrarium</h1></marquee>
  2. Deschide pagina în browser și observă efectul de derulare
  3. Gândește-te de ce această etichetă a fost dezaprobata (indiciu: ia în considerare experiența utilizatorului și accesibilitatea)
  4. Elimină eticheta <marquee> și revino la markup semantic

Întrebări de Reflectare:

  • Cum ar putea afecta un titlu care derulează utilizatorii cu deficiențe vizuale sau sensibilitate la mișcare?
  • Ce tehnici CSS moderne ar putea obține efecte vizuale similare, dar mai accesibile?
  • De ce este important să folosești standardele web actuale în locul elementelor învechite?

Explorează mai multe despre elementele HTML învechite și dezaprobate pentru a înțelege cum evoluează standardele web pentru a îmbunătăți experiența utilizatorului.

Quiz Post-Lecție

Quiz post-lectură

Recapitulare & Auto-studiu

Adâncește-ți Cunoștințele HTML

HTML a fost fundamentul web-ului de peste 30 de ani, evoluând de la un simplu limbaj de marcare documentară la o platformă sofisticată pentru construirea aplicațiilor interactive. Înțelegerea acestei evoluții te ajută să apreciezi standardele web moderne și să iei decizii mai bune în dezvoltare.

Căi Recomandate de Învățare:

  1. Istoria și Evoluția HTML

    • Cercetează cronologia de la HTML 1.0 la HTML5
    • Explorează de ce anumite etichete au fost dezaprobate (accesibilitate, compatibilitate mobilă, întreținere)
    • Investigă caracteristici emergente și propuneri HTML

  2. HTML Semantic în Profunzime

    • Studiază lista completă a elementelor semantice HTML5
    • Exersează identificarea momentelor când să folosești <article>, <section>, <aside> și <main>
    • Învață despre atributele ARIA pentru accesibilitate sporită

  3. Dezvoltare Web Modernă

    • Explorează construirea site-urilor responsive pe Microsoft Learn
    • Înțelege cum HTML se integrează cu CSS și JavaScript
    • Află despre performanța web și cele mai bune practici SEO

Întrebări de Reflectare:

  • Ce etichete HTML dezaprobate ai descoperit și de ce au fost eliminate?
  • Ce noi caracteristici HTML se propun pentru versiunile viitoare?
  • Cum contribuie HTML semantic la accesibilitatea web și SEO?

⚡ Ce Poți Face în Următoarele 5 Minute

  • Deschide DevTools (F12) și inspectează structura HTML a site-ului tău preferat
  • Creează un fișier HTML simplu cu tag-uri de bază: <h1>, <p>, și <img>
  • Validează-ți HTML-ul folosind validatorul online W3C
  • Încearcă să adaugi un comentariu în HTML folosind <!-- comment -->

🎯 Ce Poți Realiza în Această Oră

  • Finalizează quizul post-lectură și revizuiește conceptele HTML semantice
  • Construiește o pagină simplă despre tine, folosind structura corectă HTML
  • Experimentează cu diferite niveluri de titluri și tag-uri de formatare a textului
  • Adaugă imagini și linkuri pentru a exersa integrarea multimedia
  • Cercetează caracteristici HTML5 pe care încă nu le-ai încercat

📅 Călătoria Ta de O Săptămână în HTML

  • Finalizează tema proiectului terariu cu markup semantic
  • Creează o pagină accesibilă folosind etichete și roluri ARIA
  • Exersează crearea formularelor cu diverse tipuri de input
  • Explorează API-urile HTML5 precum localStorage sau geolocație
  • Studiază pattern-uri HTML responsive și design mobile-first
  • Revizuiește codul HTML al altor dezvoltatori pentru bune practici

🌟 Fundamentele Tale Web de O Lună

  • Construiește un site de portofoliu care să-ți arate competența în HTML
  • Învață template-uri HTML cu un framework precum Handlebars
  • Contribuie la proiecte open source prin îmbunătățirea documentației HTML
  • Stăpânește concepte avansate HTML precum elemente personalizate
  • Integrează HTML cu framework-uri CSS și biblioteci JavaScript
  • Devino mentor pentru alții care învață fundamentele HTML

🎯 Timeline-ul Tău de Stăpânire a HTML

timeline
    title Progresul în Învățarea HTML
    
    section Bază (5 minute)
        Structura Documentului: Declarația DOCTYPE
                              : Elementul rădăcină HTML
                              : Înțelegerea Head vs Body
        
    section Metadata (10 minute)
        Meta Tag-uri Esențiale: Codificarea caracterelor
                              : Configurarea viewport-ului
                              : Compatibilitatea browserului
        
    section Crearea Conținutului (15 minute)
        Integrarea Imaginilor: Cai corecte ale fișierelor
                              : Importanța textului alternativ
                              : Tag-uri auto-închise
        
    section Organizarea Layout-ului (20 minute)
        Strategia Containerului: Elemente Div pentru structură
                              : Denumirea claselor și ID-urilor
                              : Ierarhia elementelor înglobate
        
    section Stăpânirea Semanticii (30 minute)
        Marcaj Semnificativ: Ierarhia titlurilor
                              : Navigarea pentru cititoare de ecran
                              : Cele mai bune practici pentru accesibilitate
        
    section Concepte Avansate (1 oră)
        Caracteristici HTML5: Elemente semantice moderne
                            : Atribute ARIA
                            : Considerații de performanță
        
    section Competențe Profesionale (1 săptămână)
        Organizarea Codului: Modele de structură a fișierelor
                              : Marcaje întreținute
                              : Colaborare în echipă
        
    section Nivel Expert (1 lună)
        Standardele Moderne Web: Îmbunătățire progresivă
                                : Compatibilitatea între browsere
                                : Actualizări ale specificațiilor HTML
Loading

🛠️ Rezumatul Trusei Tale de Scule HTML

După finalizarea acestei lecții, ai acum:

  • Structura Documentului: Fundament complet HTML5 cu DOCTYPE corect
  • Markup Semantic: Tag-uri semnificative care îmbunătățesc accesibilitatea și SEO
  • Integrarea Imaginilor: Organizare corectă a fișierelor și bune practici pentru textul alternativ
  • Containere de Layout: Folosirea strategică a div-urilor cu clase descriptive
  • Conștientizare a Accesibilității: Înțelegerea navigării cu cititoare de ecran
  • Standardele Moderne: Practici actuale HTML5 și cunoașterea tag-urilor dezaprobate
  • Baza Proiectului: Fundament solid pentru stilizarea CSS și interactivitate JavaScript

Pașii Următori: Structura ta HTML este pregătită pentru stilizarea CSS! Fundamentul semantic creat va face lecția următoare mult mai ușor de înțeles.

Temă

Exersează-ți HTML-ul: Construiește o simulare de blog

Declinare de responsabilitate:
Acest document a fost tradus folosind serviciul de traducere AI Co-op Translator. Deși ne străduim pentru acuratețe, vă rugăm să aveți în vedere că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa nativă trebuie considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm răspunderea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea ca urmare a utilizării acestei traduceri.