MP Web Studio
HTMLTraseu de bază
10 / 120

LECȚIA 10 DIN 120

Repară structura unei pagini

Aplică împreună regulile esențiale din traseul HTML.

Sursă oficialăWHATWG HTML Living StandardRevizuit: 2026-08-26
PASUL 1 · ÎNVAȚĂ

Cum funcționează

Exercițiul final combină documentul, landmarkurile, imaginea și formularul.

Exemplu corect
<!doctype html>
<html lang="ro">
<head><meta charset="UTF-8"><title>Studio</title></head>
<body>
<header><h1>Studio web</h1></header>
<main><img src="studio.jpg" alt="Echipă care planifică un site"></main>
<footer><form><label for="email">Email</label><input id="email" name="email" type="email" required></form></footer>
</body>
</html>

Exemplul combină fundația documentului, regiunile semantice, imaginea descrisă și controlul de formular etichetat.

Greșeală frecventă
<div><h1>Studio</h1><h1>Contact</h1></div>
<img src="studio.jpg">
<input type="text">

Lipsesc regiunile semantice, există două h1, imaginea nu are alt, iar inputul nu are label sau configurare pentru email.

PASUL 2 · APLICĂ

Exercițiul tău

Repară documentul: landmarkuri, un h1, alt și email etichetat.

PASUL 3 · CONSTRUIEȘTE

Scrie și vezi rezultatul

index.htmlHTML
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ

Ce trebuie să treacă

0%neverificat
  • Documentul declară HTML5.
  • Documentul declară codarea.
  • Pagina folosește header, main și footer.
  • Pagina are un singur h1.
  • Imaginea are text alternativ.
  • Formularul are email configurat.
  • Emailul are label conectat.
Explică-mi logica rezolvării

Repară în ordine: fundația documentului, regiunile, ierarhia titlurilor, alternativa imaginii și relația label–input.