Lecția 02 · HTML: tagurile de bază¶

Titluri: de la <h1> la <h6>¶

HTML are 6 nivele de titluri. Nu sunt doar pentru mărime — sunt semantice. Motoarele de căutare și cititoarele de ecran folosesc ierarhia lor pentru a înțelege structura paginii.

<h1>Titlul principal al paginii</h1>
<h2>Secțiune mare</h2>
<h3>Sub-secțiune</h3>
<h4>Detaliu</h4>

Exemplu de structură corectă pentru un articol:

<h1>Ghid de ciclism pentru începători</h1>
  <h2>Alegerea bicicletei</h2>
    <h3>Bicicletă de oraș</h3>
    <h3>Bicicletă de munte</h3>
  <h2>Echipamentul esențial</h2>
    <h3>Cască</h3>
    <h3>Lumini și reflectorizante</h3>

Nu sări peste nivele (<h1> → <h4> direct) doar pentru „arată frumos” — pentru asta avem CSS (lecțiile 06+).

Paragrafe¶

<p> înseamnă „paragraf”. Browser-ul pune automat spațiu înainte și după:

<p>Acesta este primul paragraf. Poate conține mai multe fraze, nu
   trebuie să rupi linia manual — browser-ul se ocupă de asta.</p>

<p>Al doilea paragraf. Spațiul dintre ele e natural.</p>

<!-- Greșit: -->
<p>Primul text</p>
<br><br>
<p>Al doilea text</p>

<!-- Corect: -->
<p>Primul text</p>
<p>Al doilea text</p>

Link-uri (<a>)¶

Link-ul (anchor) este inima web-ului — fără el nu s-ar chema „Web”.

Link simplu¶

<a href="https://ursoaia-edu.online">Ursoaia Edu</a>

• href (hypertext reference) = adresa destinație.
• Textul dintre <a> și </a> este ce vede utilizatorul.

URL absolut vs. relativ¶

<!-- Absolut: funcționează de oriunde -->
<a href="https://ro.wikipedia.org">Wikipedia</a>

<!-- Relativ: la alt fișier din același folder -->
<a href="despre.html">Despre noi</a>

<!-- Relativ: la fișier din folder-ul părinte -->
<a href="../index.html">Acasă</a>

<!-- Relativ: la fișier dintr-un subfolder -->
<a href="./proiecte/lista.html">Proiecte</a>

Tab nou: target="_blank" + securitate¶

<a href="https://example.com" target="_blank" rel="noopener">
  Deschide într-un tab nou
</a>

Link către o secțiune din aceeași pagină¶

Folosește un id și un #:

<nav>
  <a href="#istoric">Sari la Istoric</a>
</nav>

<!-- Mai jos în pagină: -->
<h2 id="istoric">Istoric</h2>
<p>În 1989...</p>

Link email¶

<a href="mailto:ana@exemplu.ro">Scrie-mi</a>

Deschide clientul de e-mail implicit cu adresa pre-completată.

Imagini (<img>)¶

<img src="assets/peisaj.jpg" alt="Vedere din Munții Apuseni" width="400">

• src (source) = calea către fișierul imagine.
• alt = descrierea imaginii (text alternativ).
• width / height (opțional) = dimensiuni în pixeli.

Format potrivit¶

Cale relativă — exemplu¶

Structura folder-ului:

site-meu/
├── index.html
└── imagini/
    └── peisaj.jpg

În index.html:

<img src="imagini/peisaj.jpg" alt="Peisaj montan">

Formatare de text¶

<strong> — important (implicit bold)¶

<p>Acest câmp este <strong>obligatoriu</strong>.</p>

<em> — accentuat (implicit italic)¶

<p>El chiar <em>voia</em> să meargă.</p>

<mark> — evidențiere¶

<p>Întâlnirea este <mark>marți, ora 15:00</mark>.</p>

Text cu fundal galben, ca un marker highlighter.

<code> — cod inline¶

<p>Scrie <code>print("salut")</code> în terminal.</p>

<br> — rupere de linie (folosește-l RAR)¶

Util în versuri, adrese poștale:

<p>Str. Republicii nr. 10<br>
400001, Cluj-Napoca<br>
România</p>

<hr> — separator orizontal¶

<h2>Capitolul 1</h2>
<p>...</p>
<hr>
<h2>Capitolul 2</h2>

<div> vs <span> — containere¶

Uneori vrei să grupezi elemente pentru stilizare sau interactivitate. Ai două containere neutre:

<div> — bloc¶

Ocupă tot rândul (merge cu alineat nou).

<div>
  <h2>Titlu card</h2>
  <p>Conținutul card-ului.</p>
</div>

<span> — inline¶

Ocupă doar cât textul lui (nu rupe linia).

<p>Prețul este <span>199 lei</span> doar azi.</p>

Erori frecvente¶

• Lipsește alt la imagini → problemă de accesibilitate și SEO.
• Mai multe <h1> per pagină → structură confuză.
• <br> abuzat în loc de paragrafe separate.
• Link-uri cu text generic: „click aici”, „mai multe” — folosește text descriptiv. Rău: <a href="url">aici</a>. Bine: <a href="url">raportul anual</a>.

Exerciții¶

Exercițiu 1 — Pagină completă¶

Creează o pagină cu: un <h1>, două <h2>, 3 paragrafe, 2 link-uri (unul intern spre o secțiune, unul extern cu target="_blank") și o imagine cu alt descriptiv.

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8">
  <title>Elena Marin – Despre mine</title>
</head>
<body>
  <h1>Elena Marin</h1>

  <nav>
    <a href="#hobby">Hobby-uri</a> ·
    <a href="https://ursoaia-edu.online" target="_blank" rel="noopener">
      Ursoaia Edu
    </a>
  </nav>

  <p>Sunt elevă la Liceul „Mihai Eminescu” din București.</p>

  <img src="imagini/profil.jpg" alt="Elena zâmbind într-un parc" width="200">

  <h2 id="hobby">Hobby-uri</h2>
  <p>Îmi place să pictez și să cânt la chitară.</p>
  <p>În weekend merg cu bicicleta prin parcul Herăstrău.</p>
</body>
</html>

Exercițiu 2 — Formatare în paragraf¶

Scrie un paragraf unde o parte e <strong>, alta <em>, iar un cuvânt-cheie e în <mark>.

<p>Radu spune că <strong>siguranța e pe primul loc</strong>,
   dar Ana este <em>absolut convinsă</em> că
   trebuie să ne grăbim. Termen limită:
   <mark>vineri, ora 18:00</mark>.</p>

Exercițiu 3 — Cuprins cu ancore¶

Fă un cuprins la începutul paginii cu 3 link-uri către secțiuni de mai jos (#intro, #capitol-1, #capitol-2).

<h1>Articolul meu</h1>
<nav>
  <p>Cuprins:</p>
  <ul>
    <li><a href="#intro">Introducere</a></li>
    <li><a href="#capitol-1">Capitolul 1</a></li>
    <li><a href="#capitol-2">Capitolul 2</a></li>
  </ul>
</nav>

<h2 id="intro">Introducere</h2>
<p>...</p>
<h2 id="capitol-1">Capitolul 1</h2>
<p>...</p>
<h2 id="capitol-2">Capitolul 2</h2>
<p>...</p>

Mini-proiect: „Echipa mea preferat㔶

Fă o pagină despre formația, echipa sportivă sau trupa ta preferată, cu:

• <h1> cu numele
• Secțiune „Despre” (<h2> + paragrafe)
• Secțiune „Membri” / „Jucători” (<h2> + paragrafe)
• Secțiune „Realizări” / „Discografie” (<h2> + paragrafe)
• O imagine cu alt descriptiv
• Un link către site-ul oficial (extern, tab nou)

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CFR Cluj – echipa mea</title>
</head>
<body>
  <h1>CFR 1907 Cluj</h1>
  <p>Site oficial:
    <a href="https://www.cfr1907.ro" target="_blank" rel="noopener">
      cfr1907.ro
    </a>
  </p>

  <img src="imagini/stadion.jpg" alt="Vedere de pe tribună a stadionului Dr. Constantin Rădulescu" width="500">

  <h2>Despre</h2>
  <p>Club de fotbal din Cluj-Napoca, fondat în 1907.
     Joacă pe stadionul „Dr. Constantin Rădulescu”.</p>

  <h2>Antrenor și lot</h2>
  <p>Mihai Popescu este antrenor principal. Căpitanul echipei
     este Andrei Ionescu.</p>

  <h2>Realizări</h2>
  <p>Multiplă campioană a României în ultimii ani.
     Participări frecvente în cupele europene.</p>
</body>
</html>

Rezumat¶

• Un singur <h1> per pagină; folosește <h2> – <h6> ierarhic.
• <p> pentru paragrafe; nu abuza de <br>.
• <a href="..." target="_blank" rel="noopener"> pentru tab nou.
• <img> cere mereu atributul alt.
• <strong> / <em> au înțeles, nu doar stil.
• <div> = container bloc; <span> = container inline.

Pasul următor: → Lecția 03: Liste și tabele