Pagini web cu HTML și CSS

HTML descrie structura unei pagini, iar CSS îi stabilește prezentarea. Un document HTML are elemente precum head pentru metadate și body pentru conținutul afișat. Titlurile h1–h6 exprimă ierarhia, p marchează paragrafele, a creează legături, img inserează imagini cu descriere alternativă. Atributele oferă informații suplimentare: href indică destinația unui link, src sursa imaginii și alt un text util când imaginea nu este disponibilă. O pagină accesibilă are titluri în ordine logică, text lizibil și legături cu nume clar.

CSS selectează elemente și le asociază declarații proprietate–valoare. Selectorul de clasă începe cu punct, de exemplu .avertisment; un fișier CSS extern se leagă prin elementul link din head. Separarea conținutului de prezentare face întreținerea mai ușoară. Pentru accesibilitate, contrastul și navigarea cu tastatura contează la fel ca aspectul vizual. Înainte de publicare, verifici linkurile relative, imaginile și redarea la lățimi diferite.

Un document HTML începe cu declarația <!DOCTYPE html>, iar elementul html poartă atributul lang="ro", de care se folosesc cititoarele de ecran pentru pronunție. În head se pun meta charset="utf-8" (altfel diacriticele pot apărea deformate), titlul din title și legătura spre CSS. Elementele de structură header, nav, main și footer spun ce rol are fiecare zonă; div nu spune nimic și se folosește doar pentru grupare. Când două reguli CSS se aplică aceluiași element, câștigă cea cu selectorul mai specific (id înaintea clasei, clasa înaintea elementului); la specificitate egală câștigă regula scrisă ultima. Fiecare element este o cutie formată din conținut, spațiu interior (padding), chenar (border) și spațiu exterior (margin).

Exemplu lucrat 1: pagina unui proiect. Se cere o pagină cu titlu, un paragraf, o imagine și un link.

1. Scrii scheletul: <!DOCTYPE html>, <html lang="ro">, apoi head cu meta charset="utf-8" și <title>Proiect: Școala verde</title>.
2. În body adaugi <h1>Școala verde</h1> și un paragraf <p> care spune scopul proiectului.
3. Inserezi imaginea: <img src="copaci.jpg" alt="Elevi plantând copaci în curtea școlii">. Textul alt păstrează sensul când imaginea nu se încarcă.
4. Adaugi linkul <a href="contact.html">Scrie echipei proiectului</a>; textul linkului spune unde duce, spre deosebire de „click aici”.
5. Creezi stil.css cu regula h1 { color: #1b5e20; margin-bottom: 8px; } și îl legi în head prin <link rel="stylesheet" href="stil.css">.
6. Deschizi pagina fără imaginea încărcată, apoi parcurgi linkurile cu tasta Tab.

Exemplu lucrat 2: dimensiunea reală a unei cutii. Regula .card { width: 300px; padding: 20px; border: 2px solid; } produce, cu setarea implicită box-sizing: content-box, o cutie mai lată decât 300 px.

1. Lățimea de 300 px se referă doar la conținut.
2. Spațiul interior se adaugă pe ambele laturi: $2\cdot 20=40$ px.
3. Chenarul se adaugă pe ambele laturi: $2\cdot 2=4$ px.
4. Lățimea totală este $300+40+4=344$ px; trei cutii de acest fel nu încap pe un rând de 1000 px, deoarece $3\cdot 344=1032>1000$.
5. Cu box-sizing: border-box lățimea de 300 px include padding-ul și chenarul, iar trei cutii ocupă $3\cdot 300=900$ px.

Listele se scriu cu ul sau ol și elemente li, iar tabelele cu table, tr, th și td; celulele th au rol de antet și ajută cititoarele de ecran. Pentru adaptarea la ecrane mici se adaugă în head elementul <meta name="viewport" content="width=device-width, initial-scale=1">. Publicarea presupune încărcarea fișierelor pe un server de găzduire, păstrarea acelorași nume și foldere ca în varianta locală și verificarea adresei publice într-un alt browser.

Un document complet. Codul de mai jos adună elementele descrise mai sus într-o singură pagină.

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="utf-8">
  <title>Proiectul Pădurea școlii</title>
  <link rel="stylesheet" href="stil.css">
</head>
<body>
  <h1>Pădurea școlii</h1>
  <p class="avertisment">Plantarea are loc sâmbătă.</p>
  <h2>Ce ne trebuie</h2>
  <ul>
    <li>25 de puieți</li>
    <li>mănuși și lopeți</li>
  </ul>
  <a href="inscriere.html">Înscrie-te la plantare</a>
  <img src="puieti.jpg" alt="Elevi plantând puieți în curtea școlii">
</body>
</html>

Fără codarea utf-8, diacriticele pot apărea deformate. Titlul h1 apare o singură dată, iar secțiunile lui folosesc h2; nu se sare de la h1 la h4 doar pentru că h4 are litere mai mici, deoarece cititoarele de ecran folosesc nivelurile pentru navigare. Lista cu puncte este un element ul, iar fiecare punct este un li. Valoarea href din exemplu este o cale relativă, calculată față de folderul paginii curente; o adresă care începe cu https:// este absolută. Textul linkului spune unde duce, „Înscrie-te la plantare”, nu „apasă aici”, pentru că cititoarele de ecran pot citi lista linkurilor fără textul din jur.

Regulile CSS și prioritatea lor. Fișierul stil.css conține:

p { color: #333333; font-size: 1rem; }
.avertisment { color: #9b1c1c; font-weight: bold; }

Paragraful cu clasa avertisment se potrivește ambelor reguli. Culoarea vine din regula clasei, pentru că un selector de clasă este mai specific decât unul pe element, iar dimensiunea fontului vine din regula pentru p, fiindcă cealaltă regulă nu o stabilește. Când două reguli la fel de specifice se contrazic, câștigă cea scrisă mai târziu.

Contrastul. Ghidul WCAG 2.2, nivelul AA, cere un raport de cel puțin 4,5:1 între culoarea textului și fundal. Pe fundal alb, #333333 are raportul aproximativ 12,6:1 și #9b1c1c aproximativ 8,2:1, deci ambele sunt lizibile. Gri-ul #777777 are 4,48:1 și nu trece, iar #767676 are 4,54:1 și trece, ceea ce arată că aspectul „aproape bun” nu este suficient.

Greșeli frecvente

• Greșit: CSS definește semnificația unui titlu.
  Corect: HTML dă structura; CSS controlează aspectul.
• Greșit: alt este numele fișierului.
  Corect: alt descrie informația relevantă a imaginii.
• Greșit: elementele h1–h6 se aleg după mărimea literelor dorită.
  Corect: se aleg după nivelul în ierarhie; mărimea se stabilește în CSS.
• Greșit: Un link fără text vizibil este accesibil tuturor.
  Corect: legătura trebuie să aibă nume inteligibil.

Înainte și după