Invatare Atomica

Structura unui site web si HTML de baza

Progres lectie:
0%
🎯

Obiectivul lectiei

Vei intelege ce este un site web, cum este structurat si vei scrie primele pagini HTML corecte sintactic — competenta centrala a programei TIC cls. XII filiera tehnologica (OMECI 5099/2009, cap. I: Instrumente si structura unui site web).

Dupa aceasta lectie vei putea:

  • Sa descrii componentele unui site web (pagini, fisiere, server, browser) si relatia dintre ele
  • Sa identifici si sa explici rolul etichetelor HTML esentiale: html, head, body, title, meta
  • Sa structurezi corect un document HTML cu declaratia DOCTYPE si ierarhia de elemente
  • Sa explici diferenta dintre HTML (structura), CSS (aspect) si JavaScript (comportament)
  • Sa identifici elementele de baza ale unui URL si sa intelegi conceptul de hyperlink
  • Sa explici ce este SEO si de ce conteaza titlul paginii si meta-descrierea
  • Sa creezi o pagina HTML simpla cu titlu, heading si un paragraf de continut

Incearca singur!

Provocare (profil Tehnologic):

Inainte de a incepe, gandeste-te: cand deschizi un site web (de exemplu un magazin online sau un site de servicii tehnice), ce vezi si ce crezi ca se afla in spate? Ce fisiere, ce tehnologii, ce actori (server, browser, utilizator) sunt implicati? Noteaza ipotezele tale mai jos.

💡 Ai nevoie de un indiciu?

Gandeste-te la o carte tiparita: ea are un cuprins, capitole, imagini. Un site web functioneaza similar — are o structura (HTML), un aspect vizual (CSS) si uneori actiuni interactive (JavaScript).

Cand scrii o adresa in browser, computerul tau cere fisierele de pe un server. Browserul le primeste si le afiseaza pentru tine.

1

1. Ce este un site web — structura si componentele sale

Un site web este o colectie de pagini web accesibile printr-o retea (Internet sau intranet), identificate printr-un domeniu (ex: exemplu.ro). Fiecare pagina este un fisier HTML stocat pe un server web.
Actorii unui site web

Server web — calculator permanent conectat la Internet care stocheaza fisierele site-ului si le livreaza la cerere (Apache, Nginx, IIS sunt exemple de software de server).
Client (browser) — programul cu care utilizatorul acceseaza site-ul: Chrome, Firefox, Edge, Safari. Primeste fisierele de la server si le randeaza (afiseaza).
Protocolul HTTP/HTTPS — regulile de comunicare intre browser si server. S (Secure) inseamna ca datele sunt criptate.

Tipuri de fisiere dintr-un site

.html — structura si continutul paginii (text, titluri, liste, tabele, linkuri)
.css — aspectul vizual: culori, fonturi, dimensiuni, layout
.js — comportamentul interactiv: validare formulare, animatii, reactii la click
.jpg / .png / .svg — imagini
.pdf — documente descarcabile

Analogie tehnica

Un site este ca o cladire tehnica: scheletul structural = HTML; vopseaua, placile, amenajarea = CSS; instalatia electrica si automatizarile = JavaScript. Serverul este depozitul de unde clientul comanda materialele; browserul este santierul unde totul se asambleaza vizual.

2

2. Structura de baza a unui document HTML

Orice pagina HTML valida respecta o structura ierarhica precisa. Etichetele (tag-urile) HTML marcheaza semantic fiecare portiune de continut.
Scheletul minim al unui document HTML5

<!DOCTYPE html> — declaratie de tip; nu este eticheta HTML, ci instructiune pentru browser (HTML5)
<html lang="ro"> — elementul radacina; atributul lang declara limba (important pentru SEO si accesibilitate)
<head> ... </head> — metadate despre pagina, invizibile vizitatorului
<body> ... </body> — continutul vizibil: texte, imagini, linkuri

Continutul sectiunii head

<meta charset="UTF-8"> — codificarea caracterelor; UTF-8 suporta diacriticele romanesti
<meta name="viewport" content="width=device-width, initial-scale=1.0"> — esential pentru afisarea corecta pe telefon
<title>Titlul Paginii</title> — textul afisat in tab-ul browserului si in rezultatele Google
<link rel="stylesheet" href="stil.css"> — importa foaia de stil CSS
<meta name="description" content="..."> — descrierea afisata in Google (important SEO)

Reguli de sintaxa HTML

Etichetele se deschid cu <tag> si se inchid cu </tag> (exceptie: elemente fara continut, ca meta, br, img).
Etichetele se incuibeaza (nesting): copilul trebuie inchis inainte de a inchide parintele.
Atributele furnizeaza informatii suplimentare: <img src="foto.jpg" alt="Descriere">
HTML nu este case-sensitive, dar conventia moderna este litere mici (lowercase).

3

3. Elemente HTML esentiale de continut

In interiorul <body> se folosesc elemente pentru structurarea continutului. Fiecare element are un rol semantic precis.
Titluri (headings)

HTML ofera 6 niveluri de titluri: <h1> (cel mai important) pana la <h6> (cel mai putin important).
h1: titlul principal al paginii — se foloseste o singura data per pagina.
h2: sectiuni majore; h3: subsectiuni.
Ordinea ierarhica trebuie respectata. Titlurile sunt citite de motoarele de cautare.

Paragrafe si text

<p>...</p> — paragraf de text
<strong>...</strong> — text cu importanta semantica (afisat bold)
<em>...</em> — text accentuat semantic (afisat italic)
<br> — salt la rand (fara a crea paragraf nou)
<hr> — linie orizontala de separare

Linkuri — ancora HTML

<a href="url">text vizibil</a> — hyperlink. href contine adresa destinatiei.
Link absolut: href="https://exemplu.ro/pagina.html" — adresa completa, accesibila de oriunde.
Link relativ: href="pagina.html" sau href="../pagina.html" — relativ la fisierul curent.
target="_blank" — deschide linkul intr-un tab nou.

Imagini

<img src="imagine.jpg" alt="Descriere alternativa">
src — calea catre fisierul imagine
alt — text alternativ: afisat daca imaginea nu se incarca; citit de screen-readere; indexat de Google
Dimensiunea imaginii afecteaza viteza de incarcare a paginii (SEO si UX)

4

4. Triada web: HTML, CSS si JavaScript

Un site web modern este construit din trei tehnologii complementare, fiecare cu un rol distinct. Aceasta separare se numeste Separation of Concerns (separarea preocuparilor).
HTML — structura si semantica

HyperText Markup Language defineste CE este pe pagina si CE INSEAMNA fiecare element: acesta este un titlu, acesta este un paragraf, acesta este un link. HTML nu se ocupa de cum arata elementele.

CSS — aspectul vizual

Cascading Style Sheets defineste CUM ARATA elementele: culori, fonturi, dimensiuni, margini, pozitionare, animatii. Un CSS separat poate transforma acelasi HTML intr-un site complet diferit vizual. Exemplu: h1 { color: #3b82f6; font-size: 2rem; }

JavaScript — comportamentul interactiv

JavaScript defineste CE FACE pagina cand utilizatorul interactioneaza cu ea: valideaza un formular, afiseaza un meniu la click, incarca date noi fara a reincarca pagina. Este singurul limbaj de programare rulat nativ de browsere.

Analogie tehnica

Gandeste-te la un panou electric industrial: HTML = schema electrica (ce componente exista si cum sunt conectate); CSS = designul fizic al panoului (culori RAL, etichete, layout vizual); JavaScript = automatul programabil (comportamentul la semnale si conditii).

5

5. URL si structura unui site — organizarea fisierelor

Un URL (Uniform Resource Locator) identifica unic o resursa pe web. Intelegerea URL-ului este esentiala pentru a lucra cu linkuri relative si absolute in HTML.
Anatomia unui URL

https://www.exemplu.ro/produse/catalog.html#sectiune1

https:// — schema/protocolul: modul de comunicare (HTTP securizat)
www.exemplu.ro — domeniu: identifica serverul; .ro este extensia de tara
/produse/catalog.html — calea: fisierul si folderul pe server
#sectiune1 — ancora (fragment): pozitia in pagina; optional

Organizarea fisierelor unui site

Un site real are zeci sau sute de fisiere. Conventia este sa le organizam in foldere logice:
site/ (radacina)
  index.html — pagina principala (Home); serverul o incarca automat la accesarea domeniului
  despre.html, contact.html, produse.html — pagini secundare
  css/ — folder pentru foile de stil
  js/ — folder pentru scripturi JavaScript
  imagini/ — folder pentru imagini

Linkuri relative vs. absolute

Absolute: href="https://exemplu.ro/despre.html" — functioneaza de oriunde, includ domeniul complet.
Relative: href="despre.html" (in acelasi folder) sau href="../imagini/logo.png" (.. = un nivel mai sus).
Linkurile relative sunt preferabile pentru resursele din acelasi site (functioneaza indiferent de domeniu).

6

6. SEO — optimizarea unui site pentru motoarele de cautare

SEO (Search Engine Optimization) reprezinta tehnicile prin care un site apare cat mai sus in rezultatele Google sau Bing. Exista doua categorii: SEO on-page (in codul HTML al paginii, controlat direct de developer) si SEO off-page (linkuri externe, notorietate).
Elementele HTML cu impact direct asupra SEO

<title>Titlul Paginii — Brandul Firmei</title> — cel mai important element SEO; 50-60 caractere; Google il afiseaza ca titlu clickabil in rezultate
<meta name="description" content="..."> — 150-160 caractere; afisata sub titlu in Google; influenteaza rata de click
<h1> — un singur h1 per pagina, contine cuvintele cheie principale
alt pe imagini — descrie imaginea; indexat de Google Images
URL curat: /servicii/instalatii-electrice este mai bun SEO decat /page?id=47

Viteza de incarcare — factor SEO

Google penalizeaza site-urile lente. Factorii care afecteaza viteza:
Dimensiunea imaginilor: comprima imaginile inainte de a le incarca pe server.
Numarul de fisiere: prea multe fisiere CSS/JS separate cresc numarul de cereri HTTP.
Hosting-ul: un server lent = site lent indiferent de optimizarile de cod.

Context tehnic: SEO pentru un site de firma

Un site de servicii tehnice (instalatii, auto, constructii) cu titlu bun, descriere clara si imagini cu atribute alt corespunzatoare va fi gasit mai usor de potentialii clienti care cauta exact acele servicii in zona geografica respectiva. SEO nu este optional — este diferenta intre un site vizibil si unul invizibil.

7

7. Recapitulare — structura unui site web si HTML de baza

Aceasta lectie acopera capitolul I din programa TIC cls. XII filiera tehnologica (OMECI 5099/2009): Instrumente si structura unui site web. Rezumat structurat:
Componentele unui site web

Server web = stocheaza si livreaza fisierele
Browser (client) = primeste si randeaza fisierele
Protocol HTTP/HTTPS = regulile de comunicare (S = Secure = criptat)
Fisiere: .html (structura), .css (aspect), .js (comportament), imagini (.jpg/.png), .pdf

Structura documentului HTML5

DOCTYPE + html lang + head (metadate: charset, viewport, title, meta description, link CSS) + body (continut vizibil: headings, paragrafe, linkuri, imagini)
Etichetele se deschid si se inchid; atributele furnizeaza informatii suplimentare.

Elemente HTML esentiale in body

h1-h6 = titluri (ierarhie; h1 o data per pagina)
p = paragraf | strong = important (bold) | em = accentuat (italic)
a href = hyperlink (absolut vs. relativ)
img src alt = imagine (alt = SEO + accesibilitate)

SEO — elemente cheie

title (50-60 car.) + meta description (150-160 car.) + un singur h1 + atribute alt pe imagini + URL curat = fundatia SEO on-page.

Exercitii practice

Exercitiul 1 (Nivel minim) — Structura HTML de baza

Scrie scheletul complet al unui document HTML5 valid pentru pagina principala a unui atelier auto: DOCTYPE corect, elementul html cu atribut lang, sectiunea head cu meta charset, meta viewport si un title potrivit, si sectiunea body cu un titlu h1 si un scurt paragraf de prezentare. Comenteaza fiecare eticheta cu rolul ei (comentariile HTML se scriu <!-- text -->).

Exercitiul 2 (Nivel standard) — Pagina cu linkuri si imagine

Extinde pagina HTML din Exercitiul 1. Adauga: (a) un link absolut catre site-ul oficial al unui furnizor de piese auto, deschis intr-un tab nou (target="_blank"); (b) un link relativ catre o pagina servicii.html din acelasi folder; (c) o imagine atelier.jpg cu un atribut alt descriptiv si dimensiunile specificate in HTML. Scrie si elementul meta name="description" cu o descriere de 150 de caractere potrivita pentru SEO.

Exercitiul 3 (Nivel performanta) — Analiza SEO si structura site

Un coleg a creat un site pentru firma sa de instalatii, dar pagina nu apare in Google la cautari relevante. Analizand codul HTML observi: title cu continut generic, lipsa meta description, doua elemente h1 pe aceeasi pagina, imagini fara atribut alt si URL-uri de tipul /page?id=12. (a) Identifica si explica fiecare problema SEO. (b) Propune varianta corectata pentru fiecare element. (c) Explica in 2-3 propozitii de ce separarea HTML/CSS/JS este mai buna decat scrierea stilurilor direct cu atributul style="" pe fiecare element.

Ce ai invatat astazi

  • Un site web = colectie de fisiere (HTML, CSS, JS, imagini) stocate pe un server si accesate prin browser via HTTP/HTTPS
  • Structura documentului HTML5: DOCTYPE, html lang, head (metadate), body (continut vizibil)
  • In head: meta charset, meta viewport, title, meta description, link CSS — invizibile vizitatorului, esentiale pentru browser si SEO
  • Elemente de continut in body: headings h1-h6 (ierarhie), p, strong, em, br, hr
  • Linkuri: a href cu adrese absolute si relative; imagini: img src alt
  • Triada web: HTML (structura), CSS (aspect), JavaScript (comportament) — roluri separate si complementare
  • URL = schema + domeniu + cale + ancora; linkuri relative vs. absolute
  • SEO on-page: title, meta description, h1 unic, alt pe imagini, URL curat, viteza de incarcare

Urmatoarea lectie

Continua cu Procesare de text — cum creezi, formatezi si predai documente text conform cerintelor probei D: stiluri, tabele, imagini si export PDF.

Continua →