Invatare Atomica

Instrumente de creare a paginilor web

Ce program alegi cand trebuie sa pui o pagina pe internet — si de ce nu conteaza doar "sa mearga"

Progres lectie:
0%
🎯

De ce conteaza aceasta lectie

Acest modul, Crearea Documentelor Web, face parte din programa de Tehnologia Informatiei si a Comunicatiilor pentru clasa a XII-a, filiera tehnologica. La scoala sau acasa vei avea la dispozitie un calculator cu Windows, deci probabil Notepad, un editor HTML si pachetul Office. Trebuie sa stii dinainte care instrument produce cod curat, usor de corectat sub presiunea timpului, si care instrument iti baga in cod gunoi pe care nu apuci sa il cureti. Aceeasi alegere conteaza si dupa liceu: daca faci o pagina de prezentare pentru un atelier, un magazin sau un mic proiect personal, codul generat prost incarca mai greu si e mai greu de intretinut.

Dupa aceasta lectie vei putea:

  • Sa recunosti cele patru categorii de instrumente pentru creat pagini web si sa alegi instrumentul potrivit pentru fiecare sarcina
  • Sa scrii si sa salvezi corect un fisier HTML dintr-un editor de text simplu (Notepad), evitand greseala extensiei .txt
  • Sa explici ce avantaje aduce un editor HTML dedicat fata de un editor de text simplu
  • Sa exporti o pagina web din Microsoft Word si sa recunosti codul umflat pe care il genereaza
  • Sa exporti un tabel de date ca pagina web din Microsoft Excel si sa stii cand merita folosit rezultatul
  • Sa pregatesti o imagine pentru web cu un editor de imagini: redimensionare si export cu pastrarea raportului de aspect

Incearca singur!

Provocare — inainte sa citesti:

Lucrezi la un atelier de tamplarie si sefa iti cere o pagina simpla de prezentare: un titlu, doua paragrafe despre atelier, un tabel cu preturile la 5 produse (pe care il ai deja gata facut in Excel) si 3 fotografii cu mobilier, facute cu telefonul (fiecare de cateva MB). Ai pe calculator: Notepad, Microsoft Word, Microsoft Excel si un program numit Visual Studio Code, pe care nu l-ai mai deschis. Scrie mai jos, pe scurt, ce instrument ai folosi pentru fiecare bucata din pagina (text, tabel, poze) si de ce crezi tu, acum, ca ar merge cel mai bine.

💡 Ai nevoie de un indiciu?

Nu exista un singur instrument "corect" pentru toata pagina. Fiecare bucata (text, tabel, imagine) are un instrument care produce cel mai curat rezultat pentru sarcina aceea — si de multe ori nu e programul in care ai avut deja datele.

Subiectul lectiei de azi raspunde exact la aceasta intrebare!

1

Patru categorii de instrumente, un singur rezultat: un fisier .html

O pagina web este, la baza, un fisier text obisnuit cu extensia .html, care contine cod HTML (limbajul de marcare al continutului web). Fiecare bucata de marcaj, precum <p> sau <h1>, se numeste tag (eticheta) — un tag marcheaza inceputul sau sfarsitul unei parti din continut, iar browserul foloseste tagurile ca sa stie cum sa afiseze textul dintre ele. Orice program care poate scrie sau exporta text poate produce un fisier .html. In practica, foloseste una din patru categorii de instrumente, fiecare cu un rol diferit:
Cele patru categorii:

1. Editor de text simplu — Notepad: scrii codul HTML de mana, caracter cu caracter, fara niciun ajutor (fara culori, fara autocompletare).
2. Editor HTML dedicat — Visual Studio Code, Notepad++, Sublime Text: tot scris de mana, dar cu ajutor (culori, autocompletare, previzualizare).
3. Procesor de text / foaie de calcul cu "Salveaza ca pagina web" — Microsoft Word, Microsoft Excel: nu scrii cod, programul il genereaza automat dintr-un document deja facut.
4. Editor de imagini — GIMP, Paint.NET: nu produce cod HTML, dar pregateste fisierele imagine (foto, poze de produs) pe care codul le va afisa.

De retinut:

Primele trei categorii pot produce, teoretic, aceeasi pagina finala. Diferenta nu e "daca merge", ci cat de curat e codul din spate si cat de usor il poti apoi corecta sau modifica. Vei vedea in atomii urmatori de ce codul scris de mana castiga la acest criteriu.

2

Editorul de text simplu — codul scris cu mana ta, litera cu litera

Un editor de text simplu (Notepad pe Windows) salveaza exact caracterele pe care le scrii, fara sa adauge nimic in plus. Este cea mai directa cale de a scrie HTML: ce vezi in editor este exact ce ajunge in fisier. Notepad++ arata asemanator la prima vedere, dar are deja culori de sintaxa si alte ajutoare — de aceea il incadram, in atomul urmator, la categoria editoarelor dedicate, nu aici.
HTML minimal, scris in Notepad
<!DOCTYPE html> <html lang="ro"> <head> <meta charset="UTF-8"> <title>Atelier Tamplarie Popescu</title> </head> <body> <h1>Atelier de Tamplarie Popescu</h1> <p>Executam mobilier la comanda din lemn masiv.</p> </body> </html>
Pasii concreti in Notepad (Windows):

1. Deschizi Notepad (Start → scrii "Notepad" → Enter).
2. Scrii codul HTML in fereastra goala.
3. Meniu File → Save As.
4. In campul File name scrii index.html (nu doar "index").
5. In lista Save as type, schimbi din "Text Documents (*.txt)" in "All Files (*.*)" — pas obligatoriu, altfel Notepad adauga singur .txt la final.
6. Apesi Save. Fisierul rezultat, deschis cu dublu-clic, se deschide in browser ca pagina web, nu in Notepad.

Greseala frecventa:

Salvezi fisierul cu numele "pagina.html" dar lasi "Save as type" pe "Text Documents (*.txt)" — Notepad salveaza in realitate pagina.html.txt. Recunosti greseala in File Explorer: daca ai extensiile de fisier vizibile, numele complet arata dublul .html.txt; daca extensiile sunt ascunse, iconita fisierului este cea de Notepad (o foaie alba), nu iconita browserului. Remediu: redeschide Save As si alege corect "All Files".

3

Editorul HTML dedicat — acelasi cod scris de mana, cu ajutor

Un editor HTML dedicat (de exemplu Visual Studio Code sau Notepad++, ambele gratuite) este tot un editor de text, dar construit special pentru scris cod: recunoaste limbajul HTML si te ajuta in timp ce scrii. Nu genereaza cod in locul tau — tu ramai cel care scrie fiecare tag — dar reduce greselile si timpul de lucru. Aceasta categorie nu trebuie confundata cu un editor WYSIWYG online (de exemplu Wix sau Google Sites), care genereaza codul automat, fara sa mai scrii tu niciun tag — acela e un instrument diferit, potrivit cand nu ai nevoie de control pe cod, si nu face parte din aceasta lectie.
Ce face diferit fata de Notepad:

Colorare de sintaxa — tagurile, atributele si textul apar in culori diferite, asa cum vezi in blocurile de cod din aceasta lectie; greselile de scriere (tag neinchis) devin vizibile imediat.
Inchidere automata de taguri — cand scrii <p>, editorul adauga singur </p>.
Previzualizare live — cu o extensie precum "Live Server", pagina se deschide in browser si se actualizeaza automat de fiecare data cand salvezi fisierul, fara sa dai manual Refresh.
Structura de proiect — poti deschide un folder intreg (pagina + imagini + fisier de stil CSS — Cascading Style Sheets, limbajul care controleaza culorile, fonturile si aspectul vizual al paginii) si lucra cu toate fisierele in aceeasi fereastra.

Pasii concreti pentru previzualizare live in VS Code:

1. Deschizi VS Code, apoi File → Open Folder si alegi folderul cu proiectul tau.
2. Din panoul din stanga (Extensions, iconita de patrate), cauti "Live Server" si apesi Install (o singura data).
3. Deschizi fisierul index.html, apoi clic-dreapta in editor → "Open with Live Server".
4. Browserul se deschide automat cu pagina ta; de fiecare data cand salvezi (Ctrl+S), pagina din browser se reincarca singura.

4

"Salveaza ca pagina web" din procesorul de text (Word)

Microsoft Word poate exporta orice document ca fisier HTML, fara sa scrii tu vreun tag. Este rapid, dar codul generat nu este gandit pentru a fi citit sau modificat de om — este gandit ca documentul sa arate identic daca il redeschizi tot in Word.
Fragment real din codul generat de Word (Save As → Web Page)
<style> p.MsoNormal, li.MsoNormal, div.MsoNormal {margin:0cm; font-size:12.0pt; font-family:"Times New Roman";} </style> <!--[if gte mso 9]><xml> <w:WordDocument><w:View>Normal</w:View></w:WordDocument> </xml><![endif]--> <p class="MsoNormal">Executam mobilier la comanda din lemn masiv.<o:p></o:p></p>
De ce arata asa:

Acesta e adevaratul motiv pentru care fisierul e mai mare: fiecare paragraf primeste o clasa MsoNormal si un tag <o:p> gol, in plus fata de un bloc <style> si un bloc XML ascuns la inceputul fisierului — niciunul dintre ele vizibil in pagina, dar toate prezente in cod. Compara cu blocul de cod scris de mana din atomul 2: acolo nu exista nimic din toate astea.

Pasii in Word:

1. Ai documentul deschis in Word, cu textul deja formatat.
2. Meniu File → Save As.
3. Alegi locul unde salvezi, apoi din lista Save as type selectezi "Web Page (*.htm; *.html)" (varianta "Web Page, Filtered" produce ceva mai putin cod inutil decat "Web Page" simplu, dar tot mai mult decat scrisul de mana).
4. Apesi Save. Word creeaza fisierul .htm si, de multe ori, un folder alaturat cu fisiere suport (imagini, stiluri).

Exemplu numeric — diferenta de marime a fisierului:

Un articol scurt (un titlu si doua paragrafe, aproximativ 500 de cuvinte, fara nicio imagine) exportat din Word cu "Save As → Web Page" ajunge tipic la aproximativ 40-80 KB. Acelasi text, scris de mana in Notepad++ cu taguri simple (<h1>, <p>), ajunge la aproximativ 3 KB — de peste 10 ori mai putin, pentru exact acelasi continut vizibil in browser. Diferenta vine din stilurile si metadatele (informatii ascunse despre document, precum autorul sau programul care l-a creat) pe care Word le adauga pentru fiecare bucata de text, nu din text in sine.

Cand totusi are sens sa folosesti aceasta metoda:

Pentru un draft rapid, intern, care nu ajunge niciodata pe un site public — de exemplu sa trimiti cuiva o previzualizare in format web a unui document deja scris. Nu pentru pagina finala a unui site, mai ales daca urmeaza sa mai modifici codul manual dupa aceea.

5

"Salveaza ca pagina web" din foaia de calcul (Excel)

Microsoft Excel exporta un tabel intr-un fisier HTML care foloseste tagul <table> — exact structura pe care ai folosi-o si daca ai scrie tabelul de mana. Diferenta fata de Word este ca aici exportul chiar are sens practic: transformarea unui tabel de date intr-un tabel HTML este o sarcina mecanica, repetitiva, pe care merita sa o faci automat.
Fragment real generat de Excel (inainte de curatare)
<table border="0" cellpadding="0" cellspacing="0" width="192" style="border-collapse:collapse;width:144pt"> <tr class="xl65" height="20" style="mso-height-source:userset;height:15.0pt"> <td class="xl66" width="96" style="mso-width-source:userset;width:72pt">Produs</td> </tr> </table>
Compara: acelasi tabel, dupa curatare:

Fisierul de mai sus contine, pe langa <table>, si stiluri specifice Office (proprietati care incep cu mso-) si clase generate automat (nume de stil inventate de program, precum xl65, fara sens pentru cineva care citeste codul), nefolosite in restul site-ului. Regula practica: deschizi fisierul exportat intr-un editor de text, pastrezi doar structura <table><tr><td> cu datele, si stergi restul — apoi lipesti tabelul curatat in pagina ta scrisa de mana. Iata rezultatul curatat:

Structura de tabel HTML (curatata manual dupa export)
<table> <tr> <th>Produs</th> <th>Dimensiune</th> <th>Pret (lei)</th> </tr> <tr> <td>Masa bucatarie</td> <td>120x80 cm</td> <td>1350</td> </tr> </table>
Pasii in Excel:

1. Selectezi zona din tabel pe care vrei sa o exporti (sau lasi tot foaia, daca vrei tot).
2. Meniu File → Save As.
3. Din Save as type alegi "Web Page (*.htm; *.html)".
4. Daca ai selectat doar o zona, bifezi optiunea "Selection: [zona ta]" in loc de "Entire Workbook", ca sa nu exporti tot fisierul.
5. Apesi Save.

De ce merita totusi exportul din Excel:

Spre deosebire de Word, unde curatarea codului aproape ca anuleaza avantajul exportului automat, la Excel curatarea e rapida (stergi style=, class= si atributele numerice), iar ce ramane e exact tabelul de care ai nevoie — de aceea exportul din Excel merita folosit ca punct de plecare, spre deosebire de exportul din Word.

6

Editorul de imagini — nu produce cod, dar pregateste ce apare in pagina

Un editor de imagini (GIMP — gratuit si open-source, sau Paint.NET) nu scrie cod HTML, dar rezolva o problema pe care niciun editor de text nu o rezolva: o fotografie facuta cu telefonul are, de obicei, o rezolutie (dimensiune in pixeli) si o marime de fisier prea mari pentru o pagina web. Trimisa neredimensionata, incarca pagina foarte lent.
Exemplu numeric complet — redimensionare cu pastrarea proportiei:

O fotografie are 4000 x 3000 pixeli. Vrei ca pe site sa apara la o latime de 800 pixeli.
Factor de scalare = latime noua ÷ latime veche = 800 ÷ 4000 = 0,2
Inaltime noua = inaltime veche × factor = 3000 × 0,2 = 600 pixeli
Rezultat: fotografia redimensionata are 800 x 600 pixeli, cu acelasi raport de aspect 4:3 ca originalul (nu apare deformata, "turtita").

Pasii concreti in GIMP:

1. File → Open, alegi fotografia.
2. Meniu Image → Scale Image.
3. In campul Width scrii 800; daca lantul (iconita de zale) dintre Width si Height este activat, campul Height se calculeaza singur (in exemplul nostru, 600), pastrand proportia.
4. Apesi Scale.
5. Meniu File → Export As, scrii un nume terminat in .jpg (pentru fotografii) sau .png (pentru imagini cu transparenta sau text), apoi Export.
6. In fereastra de calitate JPEG care apare, o valoare de 75-85% pastreaza o calitate vizuala buna si reduce mult marimea fisierului fata de 100%; apesi Export.

De ce conteaza pentru site-ul final:

O fotografie de telefon nemodificata are adesea 3-5 MB. Redimensionata la 800 pixeli latime si exportata la calitate 80%, aceeasi fotografie ajunge de obicei sub 150 KB — de peste 20 de ori mai mica, fara pierdere vizibila de calitate pe ecran. Viteza de incarcare a paginii, subiectul lectiei 5 din acest modul, depinde direct de aceasta pregatire.

7

Recapitulare si conexiuni

Nu exista un singur instrument "cel mai bun" — exista instrumentul potrivit pentru fiecare bucata a paginii. Codul scris de mana (Notepad sau un editor dedicat) este mereu cel mai curat pentru structura si continutul propriu-zis al paginii. Word si Excel sunt utile ca surse de continut deja existent (text formatat, tabele de date), dar codul lor exportat trebuie curatat inainte de folosire. Editoarele de imagini nu produc cod, dar pregatesc fisierele fara de care pagina nu ar avea fotografii utilizabile.
InstrumentCe produceCand il folosesti pe bune
NotepadCod HTML exact cum il scrii, fara niciun ajutorStructura si continutul principal al paginii; utila cand nu ai alt editor la indemana
VS Code / Notepad++ (editoare dedicate)Acelasi cod, scris cu ajutor vizualAceeasi treaba ca Notepad, mai rapid si cu mai putine greseli
Word → Save As Web PageCod HTML umflat, cu stiluri OfficeDraft rapid intern; nu pentru pagina finala
Excel → Save As Web PageTabel <table>, cu cod suplimentar de curatatPunct de plecare pentru un tabel de date, apoi curatat manual
GIMP / Paint.NETFisiere imagine redimensionate si comprimateOrice fotografie inainte sa intre in pagina
Conexiune cu urmatoarea lectie:

Ai vazut acum cu ce scrii o pagina web. In lectia urmatoare inveti ce anume scrii intr-un document HTML: structura obligatorie (declaratia de tip, elementul radacina, zona de antet) pe care orice pagina, indiferent de instrument, trebuie sa o respecte.

De retinut, indiferent de context:

Cod scris de mana = usor de corectat rapid, fara elemente ascunse pe care nu le intelegi.
Extensie gresita (.html.txt) = pagina nu se deschide ca site, ci ca text — verifici mereu numele complet al fisierului.
Export din Word/Excel = punct de plecare, niciodata rezultat final fara curatare.
Redimensionare imagine: latime noua ÷ latime veche = factor; inaltime noua = inaltime veche × factor.

Exercitii practice

Exercitiul 1 (Nivel minim) — Instrumentul potrivit pentru fiecare sarcina

Ai urmatoarele cinci instrumente: Notepad, Visual Studio Code, Microsoft Word, Microsoft Excel, GIMP. Asociaza fiecare instrument cu categoria lui din lectie (editor de text simplu / editor HTML dedicat / procesor de text cu export web / foaie de calcul cu export web / editor de imagini) si scrie, pentru fiecare, un exemplu concret de sarcina pentru care l-ai folosi la construirea unei pagini web.

Vezi rezolvarea

Fiecare instrument se incadreaza intr-o categorie din lectie, cu o sarcina tipica pentru pagina web:

  1. Notepad - editor de text simplu; scrii de mana codul HTML de baza al paginii (structura index.html).
  2. Visual Studio Code - editor HTML dedicat; acelasi cod scris de mana, dar cu colorare de sintaxa si inchidere automata de taguri, util cand lucrezi la mai multe pagini.
  3. Microsoft Word - procesor de text cu export web; exporti rapid un text deja redactat (ex. un articol), cu Save As Web Page, apoi cureti codul.
  4. Microsoft Excel - foaie de calcul cu export web; transformi un tabel de preturi in cod <table> gata facut.
  5. GIMP - editor de imagini; redimensionezi si comprimi o fotografie inainte sa o pui pe pagina.

Exercitiul 2 (Nivel standard) — De la Excel si o poza, la pagina web

Ai un fisier Excel cu lista de preturi a atelierului (5 randuri, coloanele Produs / Dimensiune / Pret) si o fotografie de mobilier de 4000 x 3000 pixeli, facuta cu telefonul. Descrie, in ordine, pasii concreti pentru: a) a obtine codul HTML al tabelului de preturi pornind din Excel (numeste meniurile folosite); b) a pregati fotografia pentru site, astfel incat sa aiba latimea finala de 400 de pixeli, pastrand raportul de aspect — calculeaza si inaltimea rezultata.

Vezi rezolvarea

a) Din Excel la cod HTML: deschizi fisierul Excel, selectezi tabelul cu preturile, apoi Fisier -> Salveaza ca -> Pagina web (File > Save As > Web Page); alegi optiunea de a salva doar selectia, nu tot registrul. Excel genereaza un fisier .htm cu tagul <table>, pe care il cureti de stilurile mso- inainte de folosire pe site.

b) Redimensionare foto: factor de scalare = 400 / 4000 = 0,1. Inaltime noua = 3000 x 0,1 = 300 pixeli. Deschizi GIMP -> Image -> Scale Image, scrii 400 la Width, iar Height se ajusteaza singur la 300 (raport de aspect pastrat).

Exercitiul 3 (Nivel performanta) — Doua fisiere, acelasi continut vizibil

Un coleg a exportat un articol despre protejarea unei zone impadurite (un titlu si doua paragrafe, fara imagini) din Word, cu File → Save As → Web Page; fisierul rezultat are aproximativ 45 KB. Tu ai scris manual, in Notepad++, acelasi text (acelasi titlu, aceleasi doua paragrafe), iar fisierul tau are 3 KB. Explica: a) de ce difera atat de mult marimea celor doua fisiere, desi textul vizibil in browser este identic; b) ce gasesti probabil in codul exportat de Word daca il deschizi intr-un editor de text; c) pe care dintre cele doua fisiere l-ai pune pe site-ul final si cum leg alegerea ta de criteriile de calitate — viteza de incarcare — care se discuta in lectia 5 a acestui modul.

Vezi rezolvarea

Schita de rezolvare: a) diferenta de marime vine din faptul ca Word adauga, in plus fata de textul vizibil, un bloc <style> cu clase precum MsoNormal, comentarii XML ascunse si metadate despre document - niciunul vizibil in pagina, dar toate transferate de browser. b) in codul exportat cauti clase MsoNormal, taguri goale <o:p></o:p> si blocul de stiluri de la inceput. c) alegi fisierul de 3 KB scris manual: lectia 5 leaga direct viteza de incarcare de greutatea fisierelor transferate - un fisier de 15 ori mai mic se incarca mai repede, mai ales pe conexiune mobila slaba.

Criterii de evaluare: identificarea corecta a cauzei (cod suplimentar Office, nu text diferit), recunoasterea a cel putin doua elemente concrete din codul Word, legatura explicita cu viteza de incarcare din lectia 5.

Ce ai invatat astazi

  • Patru categorii de instrumente: editor de text simplu, editor HTML dedicat, procesor de text / foaie de calcul cu export web, editor de imagini
  • In Notepad, salvarea corecta cere "Save as type: All Files" si numele terminat explicit in .html, altfel rezulta .html.txt
  • Un editor HTML dedicat (VS Code) nu scrie codul in locul tau — coloreaza sintaxa, inchide taguri automat si poate previzualiza live cu Live Server
  • Word exporta pagini web umflate cu stiluri specifice Office — utile ca draft, nu ca pagina finala
  • Excel exporta tabele de date direct ca <table><tr><td>, dar codul trebuie curatat de proprietatile mso- inainte de folosire
  • Redimensionarea unei imagini pastrand proportia: inaltime noua = inaltime veche × (latime noua ÷ latime veche)
  • Codul scris de mana ramane cel mai curat si mai usor de corectat, indiferent de context

Vrei mai mult?

Provocare: Cauta pe calculator sau pe telefon o fotografie reala de cel putin 3000 de pixeli latime. Deschide-o in GIMP si noteaza marimea fisierului original, in KB. Redimensioneaz-o la 800 de pixeli latime pastrand proportia (formula din Atomul 6), salveaz-o sub alt nume si compara marimile. Cu cat la suta s-a micsorat fisierul?

De ce? Cand scrii <p> intr-un editor HTML dedicat, acesta adauga singur </p>. Notepad nu face asta, desi si el este tot un editor de text. Ce trebuie sa stie un program despre limbajul HTML ca sa poata inchide singur un tag?

Deschidere: In lista Save as type din Word, sub optiunea Web Page mai exista o linie: Web Page, Filtered. Este aceeasi salvare, dar trecuta printr-un filtru: Word scoate o parte din marcajul lui intern (blocul XML ascuns si multe proprietati care incep cu mso-), iar fisierul iese vizibil mai mic. Pretul este ca documentul nu mai revine identic in Word daca il redeschizi — de aceea Microsoft o tine ca varianta separata, nu ca varianta implicita. Salveaza acelasi document in ambele feluri si compara KB. Atentie: nici varianta filtrata nu da cod scris de mana; doar lasa mai putin de curatat.

Urmatoarea lectie

Continua cu Structura unei pagini HTML — declaratia de tip, elementul radacina si zona de antet pe care orice document HTML trebuie sa le contina.

Continua →