Lectia 2: Pagina web HTML si CSS | Clasa a XI-a Umanist (TIC)

1. Ce este HTML si structura unui document

HTML (HyperText Markup Language) este limbajul de marcare al web-ului. Nu este un limbaj de programare — infasori continut in taguri (etichete) care spun browser-ului ce rol are fiecare fragment: titlu, paragraf, imagine sau legatura.

Orice document HTML valid are patru parti obligatorii, in aceasta ordine:

<!-- 1. DOCTYPE: spune browser-ului ca e HTML5 -->
<!DOCTYPE html>

<!-- 2. Elementul radacina; lang ajuta motoarele de cautare -->
<html lang="ro">

  <!-- 3. Head: meta-informatii, NU vizibile in pagina -->
  <head>
    <meta charset="UTF-8">
    <title>Referat: Mihai Eminescu</title>
  </head>

  <!-- 4. Body: tot ce vede utilizatorul -->
  <body>
    <h1>Mihai Eminescu — Viata si opera</h1>
    <p>Eminescu s-a nascut la 15 ianuarie 1850 la Botosani.</p>
  </body>

</html>

Analogie sigura:

<head> este ca pagina de titlu a referatului (informatii despre document, nu continut propriu-zis); <body> este textul efectiv. <!DOCTYPE html> este ca specificatia formatului de depunere a lucrarii.

Tag-urile: <tagname> deschide, </tagname> inchide. Unele nu au tag de inchidere separat (<meta>, <img>).

2. Titluri (h1–h6), paragrafe (p) si accent semantic

HTML ofera sase niveluri de titlu ierarhice si un tag pentru paragraf — structura identica cu cea a unui eseu sau referat academic:

<!-- h1 = titlu principal (un singur h1 per pagina) -->
<h1>Revolutia Franceza (1789–1799)</h1>
<h2>Cauzele revolutiei</h2>
<h3>Criza economica si sociala</h3>

<p>
  Franta sfarsitului de secol XVIII suferea sub povara
  unei datorii publice uriase si a unor recolte dezastruoase.
</p>

<!-- Accent semantic in cadrul unui paragraf -->
<p>
  Ludovic al XVI-lea a convocat <strong>Starile Generale</strong>
  in mai <em>1789</em>, prima data dupa 175 de ani.
</p>

Cum arata in browser:

h1 are fontul cel mai mare, h2 mai mic etc. — exact ca ierarhia de titluri dintr-un manual. Paragrafele sunt separate prin spatiu vertical. Toate aspectele vizuale pot fi modificate prin CSS.

Regula: Un singur <h1> per pagina. Subtitlurile: <h2> = capitole, <h3> = sectiuni — la fel ca intr-un referat.

<strong> = bold cu importanta semantica | <em> = italic semantic (titluri de opere literare, termeni straini).

3. Imagini (img) si legaturi (a)

Doua taguri fac web-ul interactiv si vizual: <img> (imagine) si <a> (ancora / hiperlegatura).

Imaginea — fara tag de inchidere separat:

<!-- src = calea fisierului; alt = descriere text (obligatoriu) -->
<img
  src="eminescu.jpg"
  alt="Portret Mihai Eminescu, fotografie cca. 1869"
  width="300"
>

De ce este alt obligatoriu?

Atributul alt este citit de cititoarele de ecran pentru persoanele cu deficiente vizuale si apare cand imaginea nu se incarca. Motoarele de cautare il folosesc pentru a intelege continutul. La un referat de istoria artei, un alt bine redactat este echivalentul legendei unei ilustratii academice tiparite.

Legatura — tagul ancora <a>:

<!-- href = destinatia; target="_blank" = tab nou -->
<a href="https://ro.wikipedia.org/wiki/Mihai_Eminescu"
   target="_blank">
  Wikipedia — Mihai Eminescu
</a>

<!-- Legatura catre alta pagina din acelasi proiect -->
<a href="bibliografie.html">Bibliografie</a>

Cai absolute vs. cai relative:

Absoluta: https://exemplu.ro/foto.jpg — adresa completa, functioneaza de oriunde.

Relativa: foto.jpg sau ../imagini/foto.jpg — relativa la fisierul HTML curent. Recomandata pentru fisierele din acelasi proiect.

4. CSS — cum dai aspect vizual paginii

CSS (Cascading Style Sheets) controleaza aspectul vizual: culori, fonturi, dimensiuni, spatii. HTML spune ce este continutul; CSS spune cum arata.

Sintaxa CSS: selector (ce element) + proprietati intre acolade:

/* selector { proprietate: valoare; } */

p {
  color: #333333;
  font-size: 1.1rem;
  line-height: 1.7;
}

h1 {
  color: #1a3a6b;
  text-align: center;
  font-family: "Georgia", serif;
}

/* # vizeaza elementul cu id specificat */
#autor {
  font-style: italic;
  font-size: 0.9rem;
  color: #666;
}

Fisier CSS extern — metoda recomandata:

<head>
  <meta charset="UTF-8">
  <title>Referat</title>
  <link rel="stylesheet" href="stil.css">
</head>

Avantajul fisierului CSS extern:

Daca ai 10 pagini de referat si vrei sa schimbi culoarea titlurilor, modifici un singur stil.css — schimbarea se aplica automat la toate. Principiu identic cu stilurile Word: modifici "Titlu 1" o data si toate titlurile din document se actualizeaza simultan.

5. Proprietati CSS esentiale: culori, spatii, fonturi

Cateva proprietati CSS acopera marea majoritate a stilizarii unei pagini de tip referat sau prezentare de proiect:

/* ── CULORI ── */
body {
  background-color: #f8f4ef;   /* fundal crem deschis */
  color: #222222;            /* text aproape negru */
}

/* ── FONTURI ── */
h1, h2 {
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: bold;
}
p {
  font-family: "Arial", sans-serif;
  font-size: 16px;
  line-height: 1.6;   /* 1.5-1.8 = optim pentru citit */
}

/* ── SPATII ── */
.referat {
  padding: 24px;
  margin: 40px auto;   /* centreaza blocul pe orizontala */
  max-width: 750px;    /* latime maxima (lizibilitate optima) */
}

/* ── CHENAR ── */
blockquote {
  border-left: 4px solid #8b5cf6;
  padding-left: 16px;
  font-style: italic;
  color: #555;
}

Culori in CSS — trei formate uzuale:

Cuvinte cheie: red, blue, white — simplu, limitat la ~140 culori.

Hex (#RRGGBB): #1a3a6b = albastru inchis; #ffffff = alb; #000000 = negru. Fiecare pereche hex (00–ff) = intensitatea Rosu/Verde/Albastru (0–255).

RGB: rgb(26, 58, 107) = acelasi albastru, ca trei valori 0–255. Util cand lucrezi cu palete din programe grafice.

6. Exemplu complet — pagina de referat literar

Combinam tot ce am invatat: o pagina web pentru un referat despre Mihai Eminescu, cu structura HTML corecta, imagine, citat, link bibliografic si fisier CSS.

Fisierul HTML (eminescu.html):

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Referat: Mihai Eminescu</title>
  <link rel="stylesheet" href="stil.css">
</head>
<body>
  <div class="referat">
    <h1>Mihai Eminescu — Viata si opera</h1>
    <p id="autor">Referat: Popescu Maria, cls. a XI-a B</p>
    <img src="eminescu.jpg"
         alt="Portret Mihai Eminescu, fotografie cca. 1869"
         width="220">
    <h2>Date biografice</h2>
    <p>Mihai Eminescu s-a nascut la <strong>15 ianuarie 1850</strong>
    la Botosani. A studiat la Cernauti, Viena si Berlin.</p>
    <h2>Opera poetica</h2>
    <p>Poemul <em>Luceafarul</em> (1883) este capodopera
    liricii eminesciene si o creatie majora a romantismului european.</p>
    <blockquote>
      „Cobori in jos, luceafar bland, / Alunecand pe-o raza...”
    </blockquote>
    <h2>Bibliografie</h2>
    <p><a href="https://ro.wikipedia.org/wiki/Mihai_Eminescu"
        target="_blank">Wikipedia — Mihai Eminescu</a></p>
  </div>
</body>
</html>

Fisierul CSS (stil.css) — in acelasi folder:

body {
  background-color: #f8f4ef; color: #222;
  font-family: "Arial", sans-serif; font-size: 16px; line-height: 1.7;
}
.referat {
  max-width: 750px; margin: 40px auto; padding: 32px;
  background-color: #ffffff; border-radius: 8px;
}
h1 {
  font-family: "Georgia", serif; font-size: 2rem;
  color: #1a3a6b; text-align: center;
}
h2 {
  font-family: "Georgia", serif; color: #1a3a6b;
  border-bottom: 2px solid #c9b99a; padding-bottom: 6px; margin-top: 28px;
}
#autor { text-align: center; font-style: italic; color: #666; font-size: 0.9rem; }
img { display: block; margin: 0 auto 24px auto; border-radius: 4px; }
blockquote {
  border-left: 4px solid #8b5cf6; padding-left: 16px;
  font-style: italic; color: #555; margin: 16px 0;
}
a { color: #1a3a6b; text-decoration: underline; }

Cum testezi pe calculatorul tau:

1. Notepad → copiaza HTML → salveaza ca eminescu.html (Tip fisier: Toate fisierele, nu .txt).
2. Copiaza CSS → salveaza ca stil.css in acelasi folder.
3. Dublu-click pe eminescu.html — se deschide in browser cu stiluri aplicate.

7. Recapitulare — HTML si CSS in practica umanista

Paginile web: HTML (structura si continut) + CSS (prezentare vizuala). Separarea lor este intentionata: acelasi continut HTML poate fi stilizat diferit cu un alt CSS — la fel cum o opera literara poate fi editata cu design diferit de doua edituri.

Taguri HTML esentiale — referinta rapida

Tag	Rol	Exemplu de utilizare umanista
`<h1>-<h6>`	Titluri ierarhice	Titlu referat, capitol, sectiune
`<p>`	Paragraf de text	Corp referat, introducere, concluzii
`<img>`	Imagine (src + alt)	Portret autor, harta istorica, ilustratie
`<a>`	Hiperlegatura (href)	Sursa bibliografica, articol enciclopedic
`<strong>`	Bold semantic	Termen-cheie, data importanta, concept
`<em>`	Italic semantic	Titlu opera literara, termen strain
`<blockquote>`	Citat extins	Fragment literar, citat critic, declaratie

Proprietati CSS de referinta rapida:

color — culoare text | background-color — culoare fundal

font-family — fontul | font-size — marimea | font-weight — grosime | font-style — italic

text-align — aliniere (left / center / right / justify)

padding — spatiu interior | margin — spatiu exterior

border / border-left — chenar | max-width — latime maxima

line-height — distanta intre randuri (1.5–1.8 = optim pentru citit)

📚 Legatura cu celelalte discipline umaniste

O pagina web de referat este un document structurat — la fel ca un eseu academic: titlu (<h1>), capitole (<h2>), text argumentat (<p>), citate (<blockquote>), bibliografie cu linkuri (<a>). Structura HTML respecta normele de tehnoredactare academica. Competenta de a publica online un referat sau proiect de cercetare este utila in studiile universitare, jurnalism si comunicare institutionala.

Pagina web: HTML si CSS de baza

Obiectivul lectiei

Dupa aceasta lectie vei putea:

Incearca singur!

1. Ce este HTML si structura unui document

2. Titluri (h1–h6), paragrafe (p) si accent semantic

3. Imagini (img) si legaturi (a)

4. CSS — cum dai aspect vizual paginii

5. Proprietati CSS esentiale: culori, spatii, fonturi

6. Exemplu complet — pagina de referat literar

7. Recapitulare — HTML si CSS in practica umanista

Taguri HTML esentiale — referinta rapida

Exercitii practice

Exercitiul 1 (Nivel minim) — Identifica tagurile

Exercitiul 2 (Nivel standard) — Construieste o pagina HTML

Exercitiul 3 (Nivel performanta) — Adauga stilizare CSS

Ce ai invatat astazi

Urmatoarea etapa