HTML pentru începători: Introducere și istorie

Începând cu articolul curent intrăm în Modulul 2 al Cursului gratuit de Front End Development în Română, și vorbim despre tehnologia HTML, istoria ei și motivul pentru care există, plus cum ajungi să scrii și tu HTML.

Ce este HTML = HyperText Markup Language

Pe scurt, e un limbaj de marcaj, o tehnologie web și un standard. În contextul unui website, HTML-ul reprezintă conținutul, structura conținutului și sensul conținutului, cum ziceam și în video-ul general despre tehnologii web și în articolul aferent acelui video.

HTML vine de la HyperText Markup Language. Ce înseamnă asta?

Textul cred că știe toată lumea ce e. Hyper Text-ul e o variantă de text care are meta-proprietăți și link-uri. Cuvântul „meta” vine din latină și înseamnă „despre”. Deci ce-nseamnă meta-proprietăți? Înseamnă proprietăți despre lucrul despre care e vorba (în cazul nostru, un text).

Dacă tot vorbim despre originea cuvintelor, link-urile vin ad literam din engleză și înseamnă legături între textul curent și alte texte. Faptul că un text se leagă de alt text printr-un link e în sine o meta-proprietate. Vom aprofunda în lecțiile următoare.

Acum putem deduce conceptul de bază al încapsulării informației în HTML: faptul că în urma acestei acțiuni rezultă un document text, o pagină de text, o pagină de conținut, o pagină de… HTML. Vom reveni la ea foarte curând. Însă dezasamblând acronimul ăsta am aflat că HTML-ul este despre documente sau pagini de conținut. Asta e important.

Ce urmează? Markup Language. Deci limbaj de markup sau de marcare, de etichetare. Cuvântul vine tot din engleză, evident, și-nseamnă procesul sau rezultatul pregătirii și corectării unui text pentru a fi imprimat. În cazul nostru, să fie imprimat sau afișat pe ecran. Un limbaj care face pregătirea asta, definește structura documentului – adică ce bucată de text e un titlu spre exemplu, ce altă bucată de text e o listă, un paragraf și așa mai departe. Așadar, HTML-ul e limbajul care pregătește textul de care am zis mai devreme, sau conținutul, ca să fim mai generoși cu definiția și să includem și imagini, video-uri și alte lucruri, să fie afișat pe un ecran. Fără HTML, conținutul de pe paginile de Internet ar arăta ca un document Word în care n-ai avea niciun fel de formatare: titluri, subtitluri, paragrafe, link-uri, liste, imagini, video-uri, butoane, etc. – niciuna n-ar exista, ar fi doar un bloc de text negru pe alb și atât.

Punând lucrurile astea cap la cap, ar trebui să te prinzi că HTML-ul definește forma pe care o ia și în care se scrie conținutul online. Și da, HTML-ul… se scrie, la fel ca textul, în jurul textului, practic. Asta-l face să fie un cod, un limbaj… formal, de la formă, de la structură, de la organizarea informației. Acum înțelegi de ce-am trecut prin acel video și acel articol de Arhitectură Informațională în cursul ăsta? Ca să înțelegi care sunt felurile diferite de organizare a informației, care se aplică direct în felul cum poți scrie HTML.

Tehnologia din spatele HTML-ului este una relativ simplă. Tu definești forma pe care o ia conținutul, iar browser-ul știe să identifice faptul că tu ai un document HTML pe care trebuie să-l citească, să-l proceseze și să-l randeze. Apoi, browserul aplică niște reguli prin care transformă codul scris de tine în pagina web pe care o vezi. Dacă-ți vine să crezi, inclusiv majoritatea aplicațiilor de mobil existente azi sunt în spate tot website-uri și deci au în structură tot HTML ca să dicteze structura informației din ele. Laolaltă cu alte tehnologii, cum sunt CSS-ul (care e un limbaj de styling care definește felul cum arată pagina web, design-ul ei) și JS-ul (care e un limbaj de scripting prin care faci HTML-ul dinamic și-l conectezi cu surse de date și servicii externe sau îl manipulezi și animezi după bunul plac), HTML-ul e o tehnologie de bază, una din cele mai importante pe care ar trebui să le știi dacă lucrezi în industria digitală, indiferent de ce meserie ai exact. În special dacă vrei să fii web developer, chiar și de back end, dar mai ales de front end.

Apropo, separarea asta între limbaje arată cât de important este principiul de „separation of concerns”, adică separarea ariilor cu care se preocupă fiecare din limbajele astea, și e bine de ținut minte că fiecare din ele trebuie folosit în felul cum a fost gândit (deși ai putea să deviezi de la regula asta, la cât de puternice au devenit în ziua de azi). Revenim la problema asta și o explicăm mai detaliat în viitor…

Ca să înțelegi niște aspecte utile din HTML e nevoie să-i afli puțin și istoria.

Mic istoric de HTML

La finalul anilor ‘80, fizicianul Tim Berners-Lee a pus bazele unui prototip de limbaj formal numit ENQUIRE, care să fie folosit în cadrul CERN (știi tu, locația aia din Elveția cu izbitorul de particole celebru) pentru ca oamenii de știință să standardizeze felul cum scriu documente și le împărtășesc unii cu alții. Din 1989 până în 1991 au existat tentative de generalizare care au culminat cu un document intitulat „Tag-uri HTML”, care e prima mențiune oficială a acronimului, și care conținea 18 elemente (din care 11 încă există în HTML-ul de astăzi în aproape aceeași formă, dintr-un total de 142). În 1993 a fost lansată prima variantă folosită public.

De atunci și până în 2017, când a apărut ultima versiune de HTML, varianta 5.2 (adică varianta a cincea, iterația a treia, fiindcă primele două au fost 5.0 și 5.1), limbajul a evoluat extraordinar de mult, a trecut prin mai multe faze, unele mai logice și mai ușor de folosit, altele mai puțin. Cert e că astăzi e cel mai bun moment din istorie să înveți HTML, pentru că limbajul în sfârșit s-a maturizat. Era și timpul, pentru că anul ăsta împlinește 30 de ani.

În plus, au existat și niște lupte destul de grele între creatorii de browsere și web developerii care foloseau limbajul. Creatorii de browsere voiau ca în browser-ul lor să te forțeze pe tine ca web developer să scrii lucrurile altfel decât în alte browsere ca să obții același rezultat, iar dezvoltatorii insistau ca toate lucrurile să aibă o singură variantă de scriere, un standard. Oameni ca Jeffrey Zeldman (despre care v-am mai povestit într-un video mai vechi) și alții ca el nu s-au lăsat până nu au fondat o organizație care cuprinde toți creatorii de browsere (prin 1998), și în care se discută și negociază standarde pentru toate tehnologiile web, numită WaSP – Web Standards Project, care s-a dezvoltat în Web Standards Working Group din cadrul W3C (World Wide Web Consortium).

În urma acestor lupte, developerii au ieșit învingători și astfel au apărut standarde și bune practici de folosire ale HTML-ului, pe care dacă le înveți astăzi, ai șanse maxime să stăpânești limbajul pentru totdeauna, indiferent ce schimbări mai apar în el pe viitor. Asta e una din părțile frumoase ale HTML-ului: faptul că e compatibil cu toate variantele lui anterioare și faptul că pune cărămizi noi peste baza construită acum multă vreme.

Asta și faptul că nu e un limbaj compilat, ci unul de markup declarativ, îl face și foarte robust. O să vorbim despre asta când intrăm în JavaScript, dar pe scurt: nu depinzi de un program care să decidă exact ce-ai vrut să zici și să îți spună dacă e corect sau nu (și implicit să nu meargă deloc dacă e incorect) – proces numit „compilare”. HTML-ul pur și simplu „merge”, și browser-ul e foarte permisiv când îl afișează. Chiar dacă greșești ceva în HTML, browser-ul interpretează ce recunoaște ca fiind corect și afișează oricum conținutul, ignorând partea pe care ai greșit-o… Vorbim mai în detaliu despre asta mai târziu, deși dacă ești curios sau curioasă să afli mai multe, ai o carte gratuită absolut excelentă pe tema asta, pe care recomand s-o citiți oricum, fiindcă intră în filosofia existenței web-ului în forma în care e el azi. E prima resursă din documentul meu cu resurse utile dacă vrei să-nveți web development. În momentul ăsta, însă, hai să vedem cum creezi documente HTML.

Editoare de HTML și setările necesare (UTF-8, LF)

Așa cum ziceam și în video-ul dedicat IDE-urilor și în articolul pe aceeași temă, ai nevoie de un editor text mai special ca să poți crea și modifica fișiere HTML, CSS și JavaScript (și nu numai) cu ușurință. Dacă n-ai urmărit video-ul sau n-ai citit articolul, te invit să pui pauză și să le parcurgi acum, pentru că e important.

Gata?

Bun, asta-nseamnă că ai deja instalat Visual Studio Code, sau VSCode cum e prescurtat – editorul nostru preferat, care-i gratuit și pe care-l vom folosi de acum înainte în toate lecțiile din acest curs. Tu poți folosi, dacă vrei, orice alt editor text, chiar și Notepad, dar îți va fi puțin mai greu.

În video-ul precedent ți-am arătat o tehnică prin care poți deschide VSCode într-un folder. Hai să ne uităm pe desktop, în folder-ul făcut data trecută și să-i mai dăm o dată click dreapta, Show more options în Windows 11, apoi Open in Code.

Odată deschis IDE-ul, ca să ne asigurăm că avem setările corecte de scriere a HTML-ului, trebuie să facem două lucruri:

1. Mergi în File > Preferences > Settings
   Tastează encoding în search bar-ul de sus
   În zona Files: Encoding și toate zonele de sub (definite de plugin-uri) selectează din dropdown opțiunea UTF-8
   
   De ce?
   
   Pentru că în felul ăsta vei standardiza folosirea celui mai generic set de caractere și simboluri de care vei avea vreodată nevoie în momentul în care codezi, și vei evita viitoare probleme potențiale legate de seturile astea de caractere. Explicația e mai lungă de atât, dar pentru moment, mergi pe mâna mea. Dacă ai curiozități legat de asta, scrie-mi în comentarii și voi reveni cu detalii adiționale.
   
   Poți valida faptul că ai făcut setările corecte deschizând fișierul făcut în articolul trecut și uitându-te în dreapta jos, unde ar trebui să ai pe undeva textul „UTF-8”, semn că encoding-ul acestui fișier e corect.
   
2. Mergi din nou (sau rămâi în) File > Preferences > Settings
   Tastează files.eol în search bar-ul de sus
   În zona Files: Eol (adică end of line – final de linie) selectează din dropdown opțiunea \n
   
   De ce?
   
   Fiecare sistem de operare are metode diferite de a defini sfârșitul de linie al unui fișier. Ăsta e un exemplu concret în care n-au existat oameni care să impună standarde creatorilor de sisteme de operare. Din cauza asta, Windows folosește standardul /r/n (/r înseamnă carriage return sau CR și /n înseamnă new line sau line feed sau LF), iar sistemele de operare bazate pe Unix, inclusiv Linux și MacOS folosesc standardul /n (adică doar new line sau line feed sau LF). Ca să poți munci în viitor cot la cot cu alți oameni cu alte sisteme de operare, standardul la care s-a decis toată lumea este /n sau LF și de-aia trebuie și tu să-l selectezi în IDE (chiar dacă ești pe Windows, IDE-ul va ști să aplice standardul ăsta fișierelor editate cu VSCode). Din nou, dacă ai curiozități legat de asta, scrie-mi în comentarii și voi reveni cu detalii adiționale.
   
   Și la fel ca data trecută, poți valida faptul că ai făcut setările corecte deschizând fișierul HTML făcut în cursul trecut și uitându-te în dreapta jos, unde ar trebui să ai pe undeva textul „LF”, semn că line ending-ul acestui fișier e corect.

Gata?

Excelent! În sfârșit, ne apucăm de coding. Dar nu înainte să despicăm firul în patru în ce privește cel mai de bază lucru din HTML: tag-ul sau elementul. Dar facem asta în episodul următor!

Recapitulare și temă

Felicitări, ai mai parcurs o lecție din curs! Azi am învățat despre HTML: ce este, de când există și la ce folosește. Apoi am făcut setările corecte care să ne permită să codăm în HTML eficient.

Ăsta e momentul perfect să îți dau o temă pentru acasă, care o să fie mai puțin practică decât cele anterioare.

• Citește primul capitol din cartea lui Jeremy Keith, Resilient Web Design, care e gratuită și pe care-o găsești la resilientwebdesign.com
• Verifică așa cum am făcut eu în video faptul că în proiectul codat împreună până acum ai setările corecte de Line ending (LF sau \n) și Character Encoding (UTF-8).

Resurse adiționale

Dacă vrei să aprofundezi noțiunile prezentate în articolul curent, poți citi următoarele resurse utile (în engleză):

• Bazele HTML-ului de la Mozilla Developer Network
• Definiția HTML-ului de la freeCodeCamp
• Despre standardul HTML de la World Wide Web Consortium

Toate cursurile de Front End Development pentru începători pe care le-am scris până acum

1. Modulul 1: Noțiuni introductive
   • Introducere în Front End
   • Ce este și cum funcționează un calculator?
   • Ce este Internetul?
   • Cum funcționează Internetul?
   • Introducere în tehnologiile Web: HTML, CSS și JavaScript
   • Arhitectura informațională, baza UX-ului și a HTML-ului
   • Pregătește-te să codezi: software pentru Front End
   • Bazele GIT și GitHub
2. Modulul 2: HTML pentru începători
   • Introducere și istoria HTML-ului (articolul curent)
   • Block vs inline, link-uri și semantica textului
   • Mai multe în curând…
3. Modulul 3: CSS pentru începători
   • În curând…
4. Modulul 4: HTML pentru avansați
   • În curând…
5. Modulul 5: CSS pentru avansați
   • În curând…
6. Modulul 6: JavaScript pentru începători
   • În curând…
7. Modulul 7: Alte noțiuni utile
   • În curând…

Scrie-mi mai jos în comentarii cum ți se pare cursul până acum și ce alte module ai vrea să mai adaug pe viitor!