Lectia 2: Pagina web - structura HTML si stilizare CSS

1

1. Ce este HTML si ce face el

Exemplu — asa arata textul unei pagini web:

Trei randuri scrise in Notepad si salvate ca cerc.html:

<h1>Cercul de orientare si topografie</h1>
<p>Ne antrenam sambata dimineata, in poligonul scolii.</p>
<img src="traseu.jpg" alt="Cadeti pe traseul aplicativ">

Deschise in browser, cele trei randuri devin un titlu mare, un paragraf normal si o fotografie. Tu nu ai desenat nimic — ai marcat ce este fiecare bucata, iar browserul a stiut cum sa o afiseze.

HTML (HyperText Markup Language — limbaj de marcare a hipertextului) este limbajul standard in care se scriu paginile web. Nu este un limbaj de programare: nu are instructiuni de calcul, nu ia decizii si nu repeta operatii. Este un limbaj de marcare — incadreaza fiecare bucata de continut intre etichete numite taguri, iar tagul spune ce rol are bucata respectiva: titlu, paragraf, imagine, legatura.

Cele trei straturi ale unei pagini web:

HTML — structura si continutul: ce exista pe pagina si in ce ordine
CSS — aspectul vizual: cum arata (culori, fonturi, dimensiuni, spatiere)
JavaScript — comportamentul: ce se intampla cand utilizatorul apasa un buton sau completeaza un formular

In aceasta lectie lucram cu primele doua straturi. JavaScript se studiaza separat.

Analogie din instructie: un ordin de zi are o forma fixa — antet, numar, titlu, puncte, semnatura. Cine il citeste stie imediat ce este fiecare parte, pentru ca forma o anunta. HTML face exact asta pentru browser: marcheaza rolul fiecarei bucati de text. Ce hartie se foloseste si cu ce font se tipareste este alta discutie — acolo intervine CSS.

De ce nu ai nevoie de niciun program special:

Un fisier HTML este un fisier text simplu cu extensia .html (de exemplu cerc.html)
Il poti scrie in Notepad, in Notepad++ sau in Visual Studio Code — toate salveaza text simplu
Il deschizi cu dublu clic si browserul il afiseaza; nu se instaleaza si nu se compileaza nimic
Ca sa vezi codul oricarei pagini din internet: clic dreapta in pagina → Vizualizare sursa pagina (in engleza: View page source)

2

2. Structura obligatorie a unui document HTML

Exemplu — scheletul complet al paginii cercului:

Orice pagina web pe care o vei scrie porneste de la aceste cateva randuri. Citeste-le intai, apoi vezi mai jos ce face fiecare.

HTML — scheletul unui document

<!-- Anunta browserul: documentul respecta standardul HTML5 -->
<!DOCTYPE html>

<html lang="ro">

<!-- HEAD: informatii DESPRE pagina, nu se vad in pagina -->
<head>
  <meta charset="UTF-8">
  <title>Cercul de orientare si topografie</title>
</head>

<!-- BODY: tot ce vede utilizatorul pe ecran -->
<body>
  <h1>Cercul de orientare si topografie</h1>
  <p>Antrenamente sambata, ora 09:00, in poligonul scolii.</p>
</body>

</html>

Un document HTML valid are patru piese obligatorii, in aceasta ordine. Ele nu sunt optionale si nu se pot interschimba: browserul le cauta exact acolo unde standardul HTML5 spune ca trebuie sa fie.

Ce face fiecare piesa:

<!DOCTYPE html> — prima linie din fisier. Nu este un tag propriu-zis, ci o declaratie: anunta browserul ca documentul respecta standardul HTML5. Fara ea, browserul intra intr-un mod de compatibilitate cu paginile vechi si poate afisa altfel decat te astepti.
<html lang="ro"> — elementul radacina, care cuprinde tot documentul. Atributul lang="ro" declara ca pagina este in romana; il folosesc motoarele de cautare si cititoarele de ecran pentru a alege pronuntia corecta.
<head> — informatii despre pagina: <meta charset="UTF-8"> (setul de caractere; UTF-8 acopera si diacriticele romanesti), <title> (textul din tabul browserului si din rezultatele cautarii) si legaturile catre fisierele CSS. Nimic din <head> nu apare in corpul paginii.
<body> — corpul paginii: tot ce scrii aici se afiseaza pe ecran — titluri, paragrafe, imagini, legaturi, tabele.

Regula tagurilor: fiecare tag de deschidere <tag> are unul de inchidere </tag>, iar tagurile se inchid in ordine inversa deschiderii — ca ordinea de raportare pe scara ierarhica. Exceptie fac tagurile void (fara continut), care nu se inchid niciodata: <meta>, <img>, <br>, <hr>.

Greseala frecventa: continutul scris in <head> in loc de <body>. Pagina se deschide, browserul nu da nicio eroare — dar ecranul ramane alb, pentru ca ce ai scris nu se afla in corpul paginii. Cand o pagina apare goala, primul lucru pe care il verifici este daca textul tau este intre <body> si </body>.

3

3. Titluri h1–h6 si paragrafe p

Exemplu — anunturile cercului, marcate:

Acelasi text pe care l-ai vazut pe panoul de pluta, scris acum in HTML. Observa cum coboara nivelul titlurilor pe masura ce intri in detaliu.

HTML — titluri si paragrafe

<body>

  <!-- h1: titlul principal, o singura data pe pagina -->
  <h1>Cercul de orientare si topografie</h1>

  <h2>Despre cerc</h2>
  <p>Invatam citirea hartii, folosirea busolei si deplasarea
  pe azimut. Participa cadeti din toti anii de studiu.</p>

  <h2>Program de instructie</h2>

  <!-- h3: subsectiune in interiorul unui h2 -->
  <h3>Sambata, 09:00 – teren</h3>
  <p>Traseu aplicativ in poligonul scolii, pe puncte de control.</p>

  <h3>Miercuri, 16:00 – sala</h3>
  <p>Lucru pe harta: <strong>curbe de nivel</strong>,
  coordonate si calcul de <em>azimut</em>.</p>

</body>

Textul unei pagini se organizeaza cu doua tipuri de elemente. Titlurile se scriu cu tagurile <h1> pana la <h6> (de la heading = titlu) si formeaza ierarhia paginii: <h1> este cel mai important, <h6> cel mai putin. Paragrafele se scriu cu <p> si sunt blocul obisnuit de text; browserul lasa automat spatiu inainte si dupa fiecare.

Reguli practice pentru titluri:

<h1> se pune o singura data pe pagina — este titlul intregii pagini, la fel cum un document are un singur titlu, nu cinci
<h2> marcheaza sectiunile mari, <h3> subsectiunile din interiorul lor — nu sari niveluri (de la <h1> direct la <h4>)
Ierarhia nu este decor: motoarele de cautare si cititoarele de ecran o folosesc ca sa inteleaga si sa parcurga pagina
Nu folosi un titlu doar pentru ca vrei litere mai mari — pentru marime exista CSS (font-size)

Evidentierea in interiorul unui paragraf:

<strong> — importanta ridicata; browserul il afiseaza ingrosat
<em> — accent (de la emphasis); browserul il afiseaza inclinat
<br> — trecere fortata la rand nou in interiorul aceluiasi paragraf; este tag void, nu se inchide

4

4. Imagini: tagul img si atributele lui

Exemplu — fotografia de la traseul aplicativ:

Fisierul traseu.jpg se afla in acelasi folder cu pagina. Un singur rand il aduce in pagina:

HTML — inserarea unei imagini

<!-- Imagine aflata in acelasi folder cu pagina HTML -->
<img src="traseu.jpg"
     alt="Cadeti cu busola pe traseul aplicativ"
     width="600">

<!-- Imagine dintr-un subfolder al proiectului -->
<img src="imagini/harta-poligon.png"
     alt="Harta poligonului cu punctele de control"
     width="400">

<img> insereaza o imagine in pagina. Este un tag void: nu cuprinde continut si nu are tag de inchidere — </img> nu exista si este gresit. Imaginea nu se copiaza in fisierul HTML; fisierul HTML doar spune unde se afla ea, iar browserul o aduce cand afiseaza pagina.

Atributele tagului img:

src (de la source = sursa) — calea catre fisierul imagine. Poate fi relativa (traseu.jpg — acelasi folder; imagini/harta.png — subfolder) sau absoluta (adresa completa care incepe cu https://)
alt (de la alternative text) — descrierea imaginii in cuvinte: se afiseaza daca fisierul lipseste sau nu se incarca si este citita de cititoarele de ecran. Este obligatorie pentru accesibilitate.
width si height — dimensiunile in pixeli. Daca pui doar width, inaltimea se calculeaza singura si imaginea nu se deformeaza.

Doua greseli care lasa in pagina o iconita rupta: numele fisierului scris altfel decat este pe disc (Traseu.JPG nu este acelasi lucru cu traseu.jpg pe un server web) si folderul gresit in src. Cand imaginea nu apare, verifica intai numele exact al fisierului, apoi calea.

Un alt text alternativ scris prost nu ajuta pe nimeni. alt="poza" sau alt="imagine1" nu spune nimic. Scrie ce se vede: alt="Cadeti cu busola pe traseul aplicativ". Cine nu vede fotografia primeste astfel exact informatia pe care o dadea ea.

5

5. Legaturi: tagul a si atributul href

Exemplu — cele cinci feluri de legaturi de pe pagina cercului:

Toate arata la fel in cod. Ce le deosebeste este ce anume ai scris in href.

HTML — tipuri de legaturi

<!-- 1. Catre alt site, deschis intr-un tab nou -->
<a href="https://www.mapn.ro" target="_blank">Ministerul Apararii Nationale</a>

<!-- 2. Catre alta pagina a ta, din acelasi folder -->
<a href="galerie.html">Galerie foto de la trasee</a>

<!-- 3. Catre o sectiune din aceeasi pagina (ancora) -->
<a href="#program">Sari la programul de instructie</a>

<!-- Tinta ancorei: acelasi nume, pus in atributul id -->
<h2 id="program">Program de instructie</h2>

<!-- 4. Deschide programul de email al utilizatorului -->
<a href="mailto:cerc.topografie@exemplu.ro">Scrie-ne</a>

<!-- 5. Pe telefon, porneste apelul cu un singur clic -->
<a href="tel:+40233000000">0233 000 000</a>

<a> (de la anchor = ancora) creeaza o legatura (hyperlink). Atributul href spune unde duce legatura, iar textul scris intre <a> si </a> este ce se vede in pagina. Legaturile sunt ceea ce transforma pagini separate intr-un site: fara ele, fiecare fisier ar ramane izolat.

Ce poate contine href:

Adresa completa — https://www.mapn.ro; obligatoriu cu https://, altfel browserul o cauta ca fisier in folderul tau
Cale relativa — galerie.html sau pagini/contact.html: alta pagina din propriul tau proiect
Ancora — #program: sare la elementul care are id="program" in aceeasi pagina; utila pe pagini lungi
mailto: si tel: — deschid programul de email, respectiv pornesc apelul pe telefon

Atributul target="_blank" deschide destinatia intr-un tab nou. Se foloseste pentru legaturi catre alte site-uri, ca vizitatorul sa nu piarda pagina ta. Pentru paginile propriului site nu se pune: altfel utilizatorul ramane cu zece taburi deschise.

Scrie texte de legatura care spun unde duc. „Clic aici” nu spune nimic cuiva care parcurge pagina cu un cititor de ecran, sarind din legatura in legatura. „Galerie foto de la trasee” spune.

6

6. Stilizare CSS de baza

Exemplu — trei reguli care schimba tot aspectul paginii:

Pagina cercului arata pana acum a text negru pe fond alb. Cu blocul de mai jos, adaugat in <head>, capata culorile scolii.

CSS — primele reguli, puse in head

<head>
  <meta charset="UTF-8">
  <title>Cercul de orientare si topografie</title>

  <style>
    body {
      background-color: #f2f4f0;      /* fundal gri-verzui deschis */
      color: #222222;                 /* culoarea literelor */
      font-family: Arial, sans-serif; /* fontul intregii pagini */
      font-size: 16px;
    }

    h1 {
      color: #1f3a2e;                 /* verde inchis, culoarea scolii */
      text-align: center;             /* titlu centrat */
    }

    h2 {
      color: #3d5a45;
      border-left: 5px solid #1f3a2e; /* linie verticala la stanga */
      padding-left: 10px;             /* spatiu intre linie si text */
    }
  </style>
</head>

CSS (Cascading Style Sheets — foi de stil in cascada) este limbajul care stabileste cum arata elementele descrise de HTML. Fiecare regula are forma selector { proprietate: valoare; }: selectorul spune pe ce elemente se aplica, proprietatea spune ce anume se schimba, iar valoarea spune cum. HTML raspunde la intrebarea „ce este?”, CSS la „cum arata?”.

Proprietati CSS de baza:

color — culoarea literelor (ex.: #222222, red)
background-color — culoarea fundalului elementului
font-family — tipul de font; se scriu mai multe, despartite prin virgula, iar browserul il ia pe primul disponibil (Arial, sans-serif)
font-size — marimea literelor (16px = 16 pixeli)
text-align — alinierea textului: left, center, right, justify
line-height — distanta dintre randuri (1.6 = de 1,6 ori inaltimea literei)

Culorile in cod hexazecimal:

O culoare scrisa #1f3a2e este formata din trei perechi de cifre hexazecimale: rosu (1f), verde (3a), albastru (2e). Fiecare pereche merge de la 00 (deloc) la ff (maximum). Asa se ajunge la #000000 = negru, #ffffff = alb, #ff0000 = rosu pur. Este acelasi model RGB pe care l-ai intalnit la lectia despre imaginea digitala.

Doua feluri de a lega CSS-ul de pagina. Blocul <style> din <head> se foloseste cand ai o singura pagina — e la indemana pentru invatat si pentru incercari. Cand site-ul are mai multe pagini, regulile se scriu intr-un fisier separat, de exemplu stil.css, iar in <head> se pune un singur rand: <link rel="stylesheet" href="stil.css">. Atunci o singura modificare in stil.css schimba aspectul tuturor paginilor deodata.

7

7. Recapitulare: pagina completa, cap-coada

Toate elementele invatate, reunite intr-un singur fisier care se deschide si functioneaza. Acesta este tiparul minim al oricarei pagini de prezentare — a unui cerc, a unei clase, a unei activitati sau a unei firme.

Exemplu integrat — cerc.html

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8">
  <title>Cercul de orientare si topografie</title>
  <style>
    body {
      background-color: #f2f4f0;
      color: #222222;
      font-family: Arial, sans-serif;
      font-size: 16px;
      line-height: 1.6;
    }
    h1 { color: #1f3a2e; text-align: center; }
    h2 { color: #3d5a45; border-left: 5px solid #1f3a2e; padding-left: 10px; }
    a  { color: #1a6eb5; }
  </style>
</head>

<body>

  <h1>Cercul de orientare si topografie</h1>

  <p><a href="#program">Sari la program</a></p>

  <h2>Despre cerc</h2>
  <p>Invatam citirea hartii, folosirea busolei si deplasarea pe
  azimut. Antrenamentele se incheie cu un <strong>traseu aplicativ</strong>
  pe puncte de control.</p>

  <img src="traseu.jpg"
       alt="Cadeti cu busola pe traseul aplicativ"
       width="600">

  <h2 id="program">Program de instructie</h2>
  <h3>Sambata, 09:00</h3>
  <p>Teren: traseu aplicativ in poligonul scolii.</p>
  <h3>Miercuri, 16:00</h3>
  <p>Sala: curbe de nivel, coordonate, calcul de azimut.</p>

  <h2>Inscrieri</h2>
  <p>Telefon: <a href="tel:+40233000000">0233 000 000</a></p>
  <p>Vezi si
  <a href="https://www.mapn.ro" target="_blank">site-ul MApN</a>.</p>

</body>
</html>

Scheletul obligatoriu (de memorat):

<!DOCTYPE html> — prima linie; anunta standardul HTML5
<html lang="ro"> — radacina documentului si limba paginii
<head> — <meta charset="UTF-8">, <title>, stiluri; nu se vede in pagina
<body> — tot continutul vizibil

Tagurile de continut:

<h1>–<h6> — titluri, in ierarhie; un singur <h1> pe pagina
<p> — paragraf; <strong> ingrosat, <em> inclinat
<img src alt width> — imagine; tag void, fara inchidere; alt obligatoriu
<a href> — legatura; href = destinatia, textul dintre taguri = ce se vede

CSS — forma si proprietatile de baza:

Forma regulii: selector { proprietate: valoare; }
Culori: color (literele) si background-color (fundalul)
Text: font-family, font-size, text-align, line-height
Legare: bloc <style> in <head> (o pagina) sau <link rel="stylesheet" href="stil.css"> (mai multe pagini)

De retinut: HTML si CSS sunt doua meserii diferite pe acelasi document. HTML declara ce este fiecare bucata de continut, CSS decide cum arata. Cand le tii separate, poti schimba complet aspectul unui site fara sa atingi un singur cuvant din text — si invers, poti schimba textul fara sa strici aspectul.

Pagina web: structura HTML si stilizare CSS de baza

Obiectivul lectiei

Dupa aceasta lectie vei putea:

Incearca singur!

1. Ce este HTML si ce face el

2. Structura obligatorie a unui document HTML

3. Titluri h1–h6 si paragrafe p

4. Imagini: tagul img si atributele lui

5. Legaturi: tagul a si atributul href

6. Stilizare CSS de baza

7. Recapitulare: pagina completa, cap-coada

Exercitii practice

Exercitiul 1 (Nivel minim) — Citeste codul si gaseste greselile

Exercitiul 2 (Nivel standard) — Pagina activitatii tale

Exercitiul 3 (Nivel performanta) — Pagina stilizata, cu navigare interna

Ce ai invatat astazi

Vrei mai mult?

Finalizarea modulului