Lectia 2: Pagina web — structura HTML si stilizare CSS | Clasa a XI-a Stiinte ale naturii (TIC)

1

1. Structura de baza a unui document HTML

Un document HTML are intotdeauna aceeasi schela de baza. Browserul o citeste de sus in jos si construieste pagina vizuala pe ecran.

index.html — schela minimala

<!DOCTYPE html>
<html lang="ro">

<head>
  <!-- Informatii DESPRE pagina, nevazute de utilizator -->
  <meta charset="utf-8">
  <title>Experiment chimie cls 11</title>
</head>

<body>
  <!-- Continutul VAZUT de utilizator se scrie aici -->
  <h1>Rezultate experiment: reactia Cu cu HNO3</h1>
  <p>Temperatura de start a reactiei: 25 degC</p>
</body>

</html>

Ce face fiecare parte:

<!DOCTYPE html> — declara browserului ca fisierul e HTML5 (standardul actual)
<html lang="ro"> — radacina documentului; atributul lang ajuta cititoarele de ecran si motoarele de cautare
<head> — zona de metadate: charset, titlul tab-ului, legaturi la CSS; nu este vizibila pe pagina
<meta charset="utf-8"> — UTF-8 permite caractere romanesti (a, i, s, t) si simboluri stiintifice
<body> — tot ce e vizibil: texte, imagini, tabele, link-uri

Regula tagurilor: majoritatea au deschidere <p> si inchidere </p>. Exceptie: tagurile void (<img>, <meta>, <br>) nu au continut interior si nu se inchid separat.

2

2. Titluri si paragrafe — ierarhia continutului

HTML ofera 6 niveluri de titluri (<h1> pana la <h6>) si tagul <p> pentru paragrafe. Aceasta ierarhie organizeaza continutul exact cum capitolele si subcapitolele organizeaza un referat stiintific.

Structura ierarhica — raport de laborator biologie

<h1>Raport de laborator — Biologie cls 11</h1>

<h2>1. Scopul experimentului</h2>
<p>
  Observarea diviziunii celulare (mitoza) la radacina de ceapa
  <em>Allium cepa</em> la microscopul optic (marire 400x).
</p>

<h2>2. Materiale</h2>
<h3>2.1 Lista materiale</h3>
<p>
  Microscop optic, lame de sticla, colorant
  <strong>orceina acetica 2%</strong>, radacina de ceapa.
</p>

Taguri de formatare inline:
<strong> — text important (ingrasat semantic, nu doar vizual)
<em> — text accentuat (oblic; folosit pentru denumiri latine in biologie si chimie)
<br> — salt fortat la rand nou (tag void, fara inchidere separata)

Regula de aur: foloseste tagurile dupa sens, nu dupa aspect. <h1> inseamna "titlul principal al documentului", nu "text mare". CSS se ocupa de marimi si culori.

3

3. Imagini in HTML — tagul <img>

Tagul <img> insereaza o imagine in pagina. Este un tag void — nu are eticheta de inchidere. Are doua atribute obligatorii: src (calea catre fisier) si alt (text alternativ pentru accesibilitate).

Inserarea imaginilor — experiment de fizica (spectru)

<!-- Imagine dintr-un subfolder local -->
<img
  src="imagini/spectru-emisie-hidrogen.jpg"
  alt="Spectrul de emisie al hidrogenului: linii rosie, turcoaz si violeta"
  width="600"
  height="200"
>

<!-- Imagine de pe un server extern (URL absolut) -->
<img
  src="https://upload.wikimedia.org/wikipedia/commons/2/21/Simple_Periodic_Table_Chart-en.svg"
  alt="Tabelul periodic al elementelor"
  width="500"
>

Atributele tagului <img>:

src (source) — calea sau URL-ul imaginii; relativa (imagini/grafic.png) sau absoluta (https://...)
alt (alternative text) — descriere textuala; obligatoriu; afisat daca imaginea nu se incarca
width / height — dimensiunile in pixeli; browserul rezerva spatiu inainte de incarcare, prevenind sariturile de layout

Formate de imagine recomandate pentru web:

JPEG (.jpg) — fotografii, imagini cu gradient; compresie cu pierderi, fisiere mici
PNG (.png) — diagrame, scheme, imagini cu transparenta; compresie fara pierderi
SVG (.svg) — grafice vectoriale (diagrame stiintifice, scheme atomice); scalabile la orice rezolutie fara pierdere de calitate
WebP (.webp) — format modern; fisiere cu aprox. 30% mai mici decat JPEG la calitate echivalenta

4

4. Link-uri in HTML — tagul <a>

Tagul <a> (anchor) creeaza un hyperlink — un element accesibil pentru navigarea la alta pagina, la un alt loc din aceeasi pagina sau pentru descarcarea unui fisier. Atributul obligatoriu este href.

Tipuri de link-uri

<!-- 1. Link extern - deschis in tab nou -->
<a href="https://www.ncbi.nlm.nih.gov" target="_blank">
  Baza de date PubMed (NCBI)
</a>

<!-- 2. Link intern - catre alta pagina din acelasi site -->
<a href="rezultate.html">Vezi rezultatele complete</a>

<!-- 3. Ancora - salt la o sectiune din aceeasi pagina -->
<a href="#grafic-temperatura">Mergi la graficul de temperatura</a>

<!-- Sectiunea tinta (ID unic in pagina) -->
<h2 id="grafic-temperatura">Graficul variatiei temperaturii</h2>

Atributele tagului <a>:

href — destinatia: URL extern, fisier local sau ancora #id
target="_blank" — deschide link-ul intr-un tab nou (util pentru surse externe)
id pe elementul tinta — identifica unic un element; permite ancorele interne cu href="#id"

Buna practica: textul link-ului trebuie sa descrie destinatia. In loc de "Click here", scrie "Studiu complet privind fotosinteza (PDF)". Ajuta utilizatorii si indexarea de catre motoarele de cautare.

5

5. CSS de baza — selectori, proprietati, valori

CSS (Cascading Style Sheets) descrie cum arata elementele HTML: culori, fonturi, marimi, spatiere. Se scrie separat, intr-un fisier .css, legat in <head> cu tagul <link>.

stil.css — reguli CSS pentru raportul stiintific

/* Selector de tip: toti p din pagina */
p {
  font-size: 16px;
  line-height: 1.7;
  color: #333333;
}

/* Selector de clasa: elementele cu class="titlu-sectiune" */
.titlu-sectiune {
  font-size: 22px;
  color: #1a5276;
  border-bottom: 2px solid #2980b9;
  padding-bottom: 6px;
}

/* Selector de ID: elementul cu id="rezumat" */
#rezumat {
  background-color: #eaf4fb;
  border-left: 4px solid #2980b9;
  padding: 12px 16px;
}

/* Imagine: latimea maxima 100% din parinte, centrata */
img {
  max-width: 100%;
  display: block;
  margin: 1rem auto;
}

index.html — legatura la fisierul CSS extern

<head>
  <meta charset="utf-8">
  <title>Raport laborator biologie</title>
  <!-- Fisierul CSS extern, in acelasi folder -->
  <link rel="stylesheet" href="stil.css">
</head>

Cele trei tipuri de selectori de baza:

Selector de tip (p, h1, img) — aplica stilul la toate elementele de acel tip din pagina
Selector de clasa (.titlu-sectiune) — aplica stilul elementelor cu class="titlu-sectiune"; un element poate cumula mai multe clase
Selector de ID (#rezumat) — aplica stilul unui singur element cu id="rezumat"; ID-urile sunt unice in pagina

Proprietati CSS frecvente: color (culoarea textului), background-color (culoarea fondului), font-size (marimea fontului, ex: 16px), font-family (tipul fontului), font-weight (normal sau bold), margin (spatiu exterior), padding (spatiu interior), border (chenar), text-align (left, center sau right).

6

6. Pagina completa — raport de chimie (exemplu integrat)

Urmatorul exemplu reuneste toate elementele invatate: schela HTML completa, titluri ierarhice, paragrafe, o imagine si un link catre o sursa stiintifica, stilizate printr-un fisier CSS extern.

raport-chimie.css

body {
  font-family: Georgia, serif;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px;
  color: #212121;
  background-color: #fafafa;
}

h1 {
  color: #1b4f72;
  font-size: 28px;
  border-bottom: 3px solid #2e86c1;
  padding-bottom: 8px;
}

h2 {
  color: #21618c;
  font-size: 20px;
  margin-top: 28px;
}

p { line-height: 1.8; font-size: 15px; }

.date-masuratori {
  background: #eaf2f8;
  border-left: 4px solid #2e86c1;
  padding: 10px 14px;
  border-radius: 4px;
  margin: 1rem 0;
}

img {
  max-width: 100%;
  display: block;
  margin: 16px auto;
  border: 1px solid #ccc;
}

a { color: #1a5276; }
a:hover { text-decoration: underline; }

raport-chimie.html

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="utf-8">
  <title>Reactia cuprului cu acid azotic</title>
  <link rel="stylesheet" href="raport-chimie.css">
</head>
<body>

  <h1>Reactia cuprului cu acid azotic diluat</h1>

  <h2>Scopul experimentului</h2>
  <p>
    Studiul reactiei dintre cuprul metalic si
    <em>acid azotic diluat</em> (HNO3 30%)
    pentru identificarea produsilor de reactie.
  </p>

  <h2>Date experimentale</h2>
  <div class="date-masuratori">
    <p><strong>Temperatura initiala:</strong> 22 degC</p>
    <p><strong>Culoare solutie:</strong> albastru-verzui (ioni Cu2+)</p>
    <p><strong>Gaz degajat:</strong> NO, devine NO2 brun in contact cu aerul</p>
  </div>

  <h2>Ilustratie</h2>
  <img
    src="imagini/reactie-cu-hno3.jpg"
    alt="Vas Erlenmeyer cu solutie albastra si bule de gaz NO"
    width="480"
    height="320"
  >

  <h2>Surse bibliografice</h2>
  <p>
    <a href="https://www.rsc.org" target="_blank">
      Royal Society of Chemistry
    </a>
  </p>

</body>
</html>

Concluzia cheie: HTML = structura si continut; CSS = aspect vizual. Separarea permite schimbarea culorilor intregului site dintr-un singur fisier CSS, fara a modifica HTML-ul.

Pagina web: structura HTML si stilizare CSS

Obiectivul lectiei

Dupa aceasta lectie vei putea:

Incearca singur!

1. Structura de baza a unui document HTML

2. Titluri si paragrafe — ierarhia continutului

3. Imagini in HTML — tagul <img>

4. Link-uri in HTML — tagul <a>

5. CSS de baza — selectori, proprietati, valori

6. Pagina completa — raport de chimie (exemplu integrat)

Exercitii practice

Exercitiul 1 (Nivel minim) — Identifica structura HTML

Exercitiul 2 (Nivel standard) — Construieste pagina unui experiment de fizica

Exercitiul 3 (Nivel performanta) — Prezentare date de laborator

Ce ai invatat astazi

Finalul modulului M2