Invatare Atomica

Instrumente si structura unui site web

Progres lectie:
0%
🎯

Obiectivul lectiei

Vei intelege ce instrumente se folosesc pentru crearea site-urilor web, care sunt tipurile de site-uri (statice si dinamice), cum este structurata o pagina web si care sunt criteriile care fac un site eficient — conform programei TIC cls. XII, filiera tehnologica (OMECI 5099/2009).

Dupa aceasta lectie vei putea:

  • Sa identifici si sa descrii principalele categorii de instrumente pentru crearea site-urilor web
  • Sa explici diferenta dintre un site static si unul dinamic/interactiv
  • Sa descrii structura unei pagini web si rolul elementelor sale principale
  • Sa enumeri criteriile de calitate ale unui site web (viteza, lizibilitate, acuratete, design)
  • Sa explici ce este SEO si de ce este important pentru un site

Incearca singur!

Provocare:

Gandeste-te la un site web pe care il accesezi des (ex: site-ul scolii, al unui service auto, al unui magazin online). Scrie mai jos: (1) ce tip crezi ca este — static sau dinamic, (2) ce instrumente crezi ca s-au folosit la crearea lui, (3) un lucru care ti se pare bun si un lucru care l-ai imbunatati.

💡 Ai nevoie de un indiciu?

Un site static afiseaza acelasi continut pentru toti utilizatorii; nu are login, cosul de cumparaturi sau continut actualizat automat. Un site dinamic genereaza continut diferit in functie de utilizator sau de actiunile sale.

Instrumentele de creare variaza: un editor de text simplu (Notepad++) permite scrierea directa a codului HTML/CSS; un editor specializat (VS Code, Adobe Dreamweaver) ofera asistenta la cod; un CMS (WordPress, Joomla) permite crearea fara cod.

1

1. Tipuri de site-uri web: static vs. dinamic

Un site web este un ansamblu de pagini web accesibile printr-un browser la o adresa (URL). In functie de modul in care este generat continutul, site-urile se impart in doua mari categorii: statice si dinamice/interactive.
Site static

Fisierele HTML si CSS sunt create in prealabil si livrate identic oricarui utilizator care le cere. Continutul nu se modifica in functie de utilizator sau actiunile sale. Avantaje: rapid, simplu de gestionat, nu necesita server special. Dezavantaje: actualizarea manuala a fiecarei pagini, fara personalizare.

Exemple: pagina de prezentare a unui service auto cu date de contact si galerie foto; brosura digitala a unui liceu cu orarul scolii.

Site dinamic / interactiv

Serverul genereaza paginile HTML la cerere, de obicei din date stocate intr-o baza de date. Continutul poate fi diferit pentru fiecare utilizator (ex: contul personal, istoricul comenzilor). Avantaje: actualizare usoara a continutului, personalizare, interactiune cu utilizatorul. Dezavantaje: necesita server cu limbaj de programare server-side (PHP, Python, Node.js) si baza de date.

Exemple: magazin online (afiseaza produse din BD, cosul tau personal), platforma e-learning (lectii adaptate profilului tau), site de stiri (continut actualizat automat).

2

2. Instrumente pentru crearea site-urilor web

Crearea unui site web implica trei categorii principale de instrumente: editoare de text/cod, editoare de imagini si sisteme de gestionare a continutului (CMS). Alegerea depinde de complexitatea proiectului si de cunostintele echipei.
Editoare de text si cod HTML
  • Notepad / Notepad++ — editoare de text simple; pot fi folosite pentru a scrie direct cod HTML/CSS; Notepad++ ofera colorare sintaxa si numerotare linii
  • VS Code (Visual Studio Code) — editor profesional gratuit (Microsoft); completare automata, extensii, previzualizare live; folosit de profesionisti
  • Adobe Dreamweaver — editor comercial cu interfata vizuala si cod simultan (WYSIWYG + cod); ofera previzualizare in diferite rezolutii
Editoare de imagini

Imaginile de pe site trebuie optimizate pentru web (dimensiune redusa, format potrivit). Instrumente uzuale:

  • Adobe Photoshop — editare profesionala raster; export optimizat pentru web (JPG, PNG, WebP)
  • GIMP — alternativa gratuita la Photoshop; editare raster completa
  • Adobe Illustrator / Inkscape — grafica vectoriala (SVG), ideala pentru logo-uri si iconuri scalabile
  • Paint.NET — editor simplu, util pentru redimensionari si optimizari rapide
Sisteme de gestionare a continutului (CMS)

Un CMS (Content Management System) permite crearea si administrarea unui site fara a scrie cod HTML manual. Continutul (texte, imagini, pagini) este stocat intr-o baza de date si afisat prin teme (sabloane grafice).

  • WordPress — cel mai raspandit CMS; gratuit, cu mii de teme si pluginuri
  • Joomla — CMS gratuit, mai complex, potrivit pentru portaluri si site-uri institutionale
  • Wix / Squarespace — platforme cloud cu editare drag-and-drop; nu necesita instalare
3

3. Structura unei pagini web HTML

O pagina web este scrisa in HTML (HyperText Markup Language) — limbaj de marcare care descrie structura continutului. Elementele HTML sunt definite prin etichete (taguri) cu forma <eticheta>...</eticheta>. Orice pagina HTML valida are o structura de baza fixa.
Structura de baza a unui fisier HTML

<!DOCTYPE html> — declara tipul documentului (HTML5); prima linie din fisier.
<html lang="ro"> — radacina documentului; atributul lang indica limba.
<head> — metadate: meta charset, title, link stylesheet.
<body> — continut vizibil: header, nav, main, footer.

Rolul elementelor principale
  • <!DOCTYPE html> — declara tipul documentului (HTML5); trebuie sa fie prima linie din fisier
  • <html> — radacina documentului; atributul lang indica limba paginii
  • <head> — metadate (titlu, charset, linkuri CSS, descriere SEO); nu este vizibil direct in browser
  • <body> — continutul vizibil al paginii: text, imagini, linkuri, tabele, formulare
  • <header> / <nav> / <main> / <footer> — elemente semantice HTML5 care dau sens sectiunilor paginii (ajuta si la SEO)
CSS — aspectul vizual al paginii

CSS (Cascading Style Sheets) defineste aspectul vizual al elementelor HTML: culori, fonturi, dimensiuni, spatieri, pozitii. Fisierul CSS este separat de HTML si se leaga prin eticheta <link> in <head>. Separarea HTML (structura) de CSS (prezentare) este o buna practica.

4

4. SEO si criterii de calitate ale unui site web

Un site web bun trebuie sa fie rapid, lizibil, acurat si bine proiectat vizual. In plus, trebuie sa fie usor de gasit prin motoarele de cautare (SEO). Aceste criterii determina succesul unui site in utilizarea reala.
Criteriile de calitate ale unui site web
  • Viteza de incarcare — paginile trebuie sa se incarce rapid (ideal sub 3 secunde). Se optimizeaza prin compresia imaginilor, minificarea CSS/JS, hosting rapid.
  • Raportul text / imagine — echilibrul intre continut text (indexat de motoarele de cautare) si imagini (atractive vizual).
  • Acuratetea informatiei — continutul trebuie sa fie corect, actualizat si verificabil.
  • Lizibilitatea — font suficient de mare (minim 16px), contrast bun, paragrafe scurte, titluri clare.
  • Design — paleta de culori constanta, fonturi compatibile, adaptat publicului tinta.
SEO — optimizarea pentru motoarele de cautare

SEO (Search Engine Optimization) reprezinta ansamblul tehnicilor prin care un site este facut vizibil si bine pozitionat in rezultatele motoarelor de cautare (Google, Bing).

Elemente SEO de baza:

  • Titlul paginii (<title>) — descrie precis continutul paginii; inclus in rezultatele Google
  • Meta description (<meta name="description">) — rezumatul paginii afisat sub titlu in Google
  • Titluri ierarhice (<h1>, <h2>...) — structureaza continutul
  • Cuvinte cheie — termenii cautati de publicul tinta trebuie sa apara natural in text
  • Atribut alt la imagini (<img alt="...">) — descriere text a imaginii; ajuta motoarele de cautare si accesibilitatea
5

5. Elemente de continut si ierarhia paginilor

Continutul unui site web este format din elemente diverse (text, liste, tabele, imagini, linkuri, animatii, formulare), organizate intr-o ierarhie de pagini conectate printr-un sistem de linkuri.
Elemente de continut HTML
  • Text si titluri — <p> paragraf; <h1>...<h6> titluri ierarhice (h1 = cel mai important)
  • Liste — <ul> lista cu puncte (neordonata); <ol> lista numerotata; <li> element de lista
  • Tabele — <table>, <tr> (rand), <th> (celula antet), <td> (celula date)
  • Imagini — <img src="..." alt="...">; JPG pentru fotografii, PNG pentru transparenta, SVG pentru vectorial, WebP pentru compresie moderna
  • Harti de imagini — imagini cu zone clicabile (hotspot-uri) definite prin <map> si <area>
  • Linkuri — <a href="...">; interne (catre alte pagini ale site-ului) sau externe (catre alt site)
  • Formulare — <form>, <input>, <textarea>, <button>
  • Animatie si multimedia — animatii CSS, <video>, <audio>
Ierarhia paginilor si sistemul de linkuri

Un site cu mai multe pagini trebuie organizat in ierarhie arborescenta: pagina principala (home) → sectiuni principale → sub-pagini. Exemplu pentru un service auto:

  • index.html (Home) — prezentare generala
  • servicii/: intretinere.html, reparatii.html, vulcanizare.html
  • despre.html — echipa si istoricul service-ului
  • contact.html — formular de contact, harta, program

Meniul de navigare (<nav>) trebuie sa fie prezent pe toate paginile. Linkurile interne folosesc cai relative.

6

6. Recapitulare — de la idee la site web functional

Crearea unui site web presupune parcurgerea unor etape clare, de la planificare la publicare. Cunoasterea instrumentelor, a structurii HTML si a criteriilor de calitate permite evaluarea si proiectarea corecta a unui site.
Etapele de creare a unui site web
  1. Planificarea — scop, public tinta, structura de pagini (sitemap), continuturi necesare
  2. Alegerea instrumentelor — editor de cod (VS Code, Notepad++) sau CMS (WordPress)
  3. Proiectarea vizuala — schita pagini (wireframe), paleta de culori, tipografie, layout responsiv
  4. Crearea continutului HTML/CSS — scrierea structurii HTML si stilizarea CSS
  5. Optimizarea imaginilor — compresie, redimensionare, format potrivit (JPG/PNG/WebP/SVG)
  6. Testarea — verificare in mai multe browsere, pe ecrane diferite; testarea vitezei
  7. Publicarea (hosting) — incarcarea fisierelor pe server; configurarea domeniului
  8. Optimizarea SEO — titluri, meta description, atribute alt, cuvinte cheie, URL clar
Lista de verificare pentru un site de calitate
  • Structura HTML valida: DOCTYPE prezent, head/body corecte, etichete inchise
  • Titlul paginii si meta description completate pe fiecare pagina
  • Toate imaginile au atribut alt descriptiv
  • Meniu de navigare prezent pe toate paginile si functional
  • Viteza de incarcare acceptabila (imagini comprimate)
  • Continut corect, actualizat si lizibil (font mare, contrast bun)
  • Site-ul arata bine si pe dispozitive mobile (design responsiv)

Greseli frecvente: imagini neoptimizate; lipsa atributului alt la imagini; linkuri rupte; continut neactualizat; lipsa meniu de navigare pe paginile interioare.

Exercitii practice

Exercitiul 1 (Nivel minim) — Structura HTML de baza

Creeaza un fisier index.html pentru site-ul unui atelier de tamplarie. Fisierul trebuie sa contina: DOCTYPE, elementele <html>, <head> (cu <meta charset> si <title>) si <body>. In body adauga: un titlu principal <h1> cu numele atelierului, un paragraf de prezentare (<p>) si o lista neordonata (<ul>) cu cel putin 3 servicii oferite. Deschide fisierul in browser si verifica ca se afiseaza corect.

Exercitiul 2 (Nivel standard) — Site cu mai multe pagini si navigare

Extinde site-ul de la exercitiul 1: creeaza inca doua fisiere — servicii.html si contact.html. In fiecare pagina adauga un meniu de navigare (<nav>) cu linkuri catre toate cele trei pagini. In servicii.html prezinta detaliat cele 3 servicii (fiecare cu titlu <h2> si paragraf). In contact.html adauga datele de contact folosind un tabel HTML. Verifica ca navigarea functioneaza intre toate paginile.

Exercitiul 3 (Nivel performanta) — Aplicarea criteriilor de calitate si SEO

Pornind de la site-ul creat anterior, aplica optimizarile SEO si de calitate: (1) adauga <meta name="description"> pe fiecare pagina; (2) foloseste titluri ierarhice corecte (un singur <h1> per pagina, <h2> pentru sectiuni); (3) adauga cel putin o imagine cu atribut alt descriptiv; (4) creaza un fisier stil.css si leaga-l prin <link>; defineste culoarea de fundal, fontul si culoarea textului; (5) analizeaza critic site-ul: viteza, raport text/imagine, lizibilitate — documenteaza intr-un comentariu HTML ce ai imbunatatit si de ce.

Ce ai invatat astazi

  • Site static = fisiere fixe HTML/CSS, acelasi continut pentru toti; site dinamic = continut generat la cerere din baza de date
  • Instrumente de creare: editoare de cod (VS Code, Notepad++, Dreamweaver), editoare de imagini (Photoshop, GIMP), CMS (WordPress, Joomla)
  • Structura HTML: DOCTYPE → html → head (metadate) + body (continut vizibil)
  • Elemente de continut: text/titluri, liste, tabele, imagini (cu alt), harti de imagini, linkuri, formulare, animatii, video/audio
  • Ierarhia paginilor: arbore (home → sectiuni → sub-pagini), meniu de navigare pe toate paginile
  • Criterii de calitate: viteza incarcare, raport text/imagine, acuratete, lizibilitate, design coerent
  • SEO: title, meta description, titluri h1-h6, cuvinte cheie, atribut alt la imagini, linkuri interne
  • Etape creare site: planificare → instrumente → design → HTML/CSS → optimizare imagini → testare → publicare → SEO

Urmatoarea lectie

Continua cu Prezentari electronice si comunicare digitala — crearea si formatarea profesionala a prezentarilor electronice, servicii de comunicare online.

Continua →