Introducere în HTML: Ce este HTML și cum funcționează o pagină web

Curs HTML complet

Ce este HTML am stabilit deja în tutorialul Dezvoltare web.
Dacă nu ați parcurs tutorialul, vă recomand să faceți acest lucru, înainte de a continua cu acest tutorial.

Pentru a construi site-uri web, ar trebui să cunoașteți HTML - tehnologia fundamentală folosită pentru a defini structura unei pagini web. HTML este folosit pentru a specifica dacă, conținutul dvs. web trebuie recunoscut ca un paragraf, listă, titlu, link, imagine, player multimedia, formular sau unul dintre multe alte elemente disponibile sau chiar un element nou pe care îl definiți.

Notiuni de baza HTML

Ce este DOM?

DOM este abrevierea pentru Document Object Model este un API(extrem de des utilizat) si defineste structura logica si standardizata a documentelor, o ierarhizare a elementelor si continutului din documente HTML sau XML.

DOM nu a fost specificat inițial - a apărut atunci când browserele au început să implementeze masiv JavaScript.

DOM este o modalitate de a reprezenta pagina web în mod ierarhic structurat, astfel încât programatorii și utilizatorii să parcurga mai ușor documentul. Cu DOM, putem accesa și manipula cu ușurință etichete, ID-uri, clase, atribute sau elemente folosind comenzi sau metode furnizate de obiectul Document.

Astfel structura DOM este o ierarhie de obiecte, compatibila cu a limbajului JavaScript sau cu a oricarui limbaj bazat pe obiecte.

Fiecare element al unui document poate fi privit, deci, ca un obiect, fiecare obiect avînd identitate si propriile sale functii.

Când un document HTML este încărcat într-un browser web, acesta devine un obiect(document object). Înainte ca browserul să redea pagina, trebuie să creeze arborii DOM și CSSOM. Drept urmare, trebuie să ne asigurăm că browserul primește cât mai repede atât codul HTML, cât și CSS.

Modul de functionare HTTP

HTTP oferă o tehnică de comunicare prin care paginile web se pot transmite de la un computer aflat la distanță spre propriul computer. Dacă se face o cerere catre un link sau o adresă de web cum ar fi Example.com, atunci se cere calculatorului gazda(host) să afișeze o pagină web (de ex.:index.html).

În prima fază numele (adresa) www.example.com este convertit de protocolul DNS într-o adresă IP. Urmează transferul prin protocolul TCP pe portul standard 80 al serverului HTTP, ca răspuns la cererea HTTP-GET.

Informații suplimentare ca de ex. indicații pentru browser, limba dorită ș.a. se pot adăuga în header-ul (antetul) pachetului HTTP. În urma cererii HTTP-GET urmează din partea serverului răspunsul cu datele cerute, ca de ex.: pagini în (X)HTML, cu fișiere atașate ca imagini, fișiere de stil (CSS), scripturi (Javascript), dar pot fi și pagini generate dinamic (SSI, JSP, PHP și ASP.NET).

Dacă dintr-un anumit motiv informațiile nu pot fi transmise, atunci serverul trimite înapoi un mesaj de eroare. Modul exact de desfășurare a acestei acțiuni (cerere și răspuns) este stabilit în specificațiile HTTP.

Navigarea si vizualizarea paginii sursa

Acest lucru se face usor cu click dreapta pe orice pagina web si apoi click "View page source" din meniul contextual. Codul afisat este reprezentarea paginii in limbaj HTML dar nu numai.

HTML in actiune

Crearea unei pagini simple in Notepad++:

O pagina HTML este ca o cladire:

<html> - Structura exterioară a clădirii. Încapsulează tot ce ține de pagina web. Este containerul principal.

<head> - Camera de control / panoul electric. Conține informații despre pagină: titlu, meta date, linkuri către stiluri, scripturi etc. Nu e vizibilă direct pe pagină.

<body> - Camerele și mobilierul. Tot ce vezi pe pagină: text, imagini, butoane, meniuri. Este conținutul vizibil.

🔧 Exemplu: Pagina HTML

<!DOCTYPE html>
<html dir="ltr" lang="ro">
 <head>
   <meta charset="utf-8">
   <meta name="description" content="Explorarea elementelor unei pagini HTML">
   <title>Prima pagina HTML</title> 
 </head>
  <body>
   <div class="container">
    <h1>Continutul paginii</h1>
    <p>Continutul unei pagini <b>HTML</b> apare in interiorul etichetei <strong>"body"</strong>. O pagina HTML contine numeroase elemente care permit structurarea si formatarea logica a unui document, elemente despre care vom discuta in detaliu.<p>
    </div>
  </body>
</html>

    .container {
      width: 90%;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

Descrierea elementelor principale

DTD(Doctype Declaration)

Doctype Declaration

Este nevoie de aceasta declaratie pentru a spune browserului web ce versiune de HTML este folosita, pentru ca acesta sa stie cum sa redea continutul paginii.

In redarea unui document browserul declanseaza Quirks Mode(modul de compatibilitate). Quirks Mode este un mod de operare a browserelor web, cum ar fi Internet Explorer (IE), Firefox si Opera etc.. Practic, modul Quirks înseamna ca un browser relativ modern simuleaza în mod intentionat multe bug-uri existente in browserele mai vechi.

Quirks Mode este declansata de doctype sniffing, de asemenea cunoscut sub numele de switching doctype. Aceasta înseamna ca browserul inspecteaza începutul unui document HTML pentru a vedea daca acesta contine o declaratie doctype valida conform specificatiilor.

Eticheta html lang="ro"

Eticheta html este absolut necesara, in timp ce atributul "lang=ro" care arata limba folosita in interiorul documentului, nu este absolut necesar. Practic, o pagina html începe cu instrucţiunea <html> şi se termină cu </html>.

Atributele furnizeaza informatii suplimentare despre elementele HTML.

Atributele HTML sunt cuvinte speciale folosite în tag-ul de deschidere pentru a controla comportamentul elementului. Atributele HTML sunt un modificator al unui tip de element HTML.

Un atribut fie modifica functionalitatea implicita a unui tip de element, fie ofera functionalitate anumitor tipuri de elemente care nu pot functiona corect fara ele. În sintaxa HTML, un atribut este adaugat la o eticheta de început HTML.

Unele atribute sunt specifice unui anumit element in timp ce altele sunt globale (pot fi folosite pentru orice element).

🔧 Exemplu de atribut functional

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8">
  <title>Atribut functional</title>
</head>
<body>
<div class="container">
   <h1>Exemplu de atribut functional specific</h1>
  <br>
   <pre><code>
    &lt;ol start="5"&gt; 
       &lt;li>Linia 1&lt;/li&gt;
       &lt;li>Linia 2&lt;/li&gt;
       &lt;li>Linia 3&lt;/li&gt;
    &lt;/ol&gt;
  </pre>
 
  <ol start="5">
   <li>Linia 1</li>
   <li>Linia 2</li>
   <li>Linia 3</li>
  </ol>

</div>
</body>
</html>

    .container {
      width: 90%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 1rem;
    }

Eticheta head

Aceasta eticheta contine titlul paginii intre etichetele <title> si </title>, etichetele <meta>, poate contine cod CSS, script-uri si link-uri catre fisiere externe. În browser nu se afişează nimic din aceasta secţiune.

Eticheta meta charset="utf-8"

Parametrul Charset

☞ Etichetele meta sunt self-closing, adica nu au nevoie de o eticheta de inchidere.

Standard character encoding charset="utf-8" este necesar pentru fiecare pagina si informeaza user agent(browserul web) despre formatul de date folosit si acesta alege codarea potrivita pentru a reda site-ul. HTML5 foloseşte numai UTF-8 (Unicode).

Acest sistem de codare este urmaşul codului ASCII, care avea 128 caractere şi a codului ISO-8859-1 de 256 caractere (utilizat de HTML4).

UTF-8 este o modalitate de codificare a caracterelor care poate fi la fel de compacta ca si ASCII, dar poate contine si orice caractere unicode (cu o crestere a dimensiunii fisierului). UTF reprezinta formatul de transformare Unicode. "8" înseamna ca foloseste blocuri intre 1 si 8 biti pentru a reprezenta un caracter.

1byte = 8 biti
A = 65 = 10 00001(ASCII-7biti) = 01000001(UTF-8-8biti, ASCII valid)
ALT + 65 = A(ASCII)

Codarea(Encoding) este procesul de conversie a datelor dintr-o forma în alta. Deoarece calculatoarele recunosc doar date binare, textul trebuie reprezentat într-o forma binara.

☞ Unele browsere (de ex. Chrome) remediază automat codări incorecte, deci în funcție de browserul pe care îl utilizați, este posibil să nu vedeți această problemă. Ar trebui totuși să setați o codificare a utf-8 pe pagina dvs. pentru a evita eventualele probleme în alte browsere.

Putem adauga in sectiunea head a documentului, o serie intreaga de alte etichete meta, fiecare cu rolul ei, mai mult sau mai putin important:

<meta name="author" content="Numele autorului paginii">
<meta name="description" content="Descriere cit mai fidela a continutului paginii.">

Exista si etichete meta, care sunt ignorate de motoarele de cautare, precum eticheta <meta name="keywords" content="cuvint cheie 1, cuvint cheie 2, etc.">. Aceasta eticheta a fost utilizata abuziv si agresiv in scopul influentarii rezultatelor de cautare, generate de motoarelor de cautare. Asadar, evitati utilizarea acestei etichete!

Lista completa a etichetelor meta

ASCII - American Standard Code for Information Interchange

Codul ASCII standard codifică caracterele folosind 7 biți, astfel că permite codificarea a 2⁷=128 caractere. Nu sunt prea multe! De fapt sunt codificate numai literele din alfabetul englez, cifrele de la 0 la 9, semnele de punctuație și operatorii, precum și alte simboluri.

Lipsesc cu desăvârșire literele specifice altor alfabete latine (așa numite litere cu diacritice, precum ar fi ă Ă î Î â Â ș Ș ț Ț ş Ş Ţ ţ , precum și literele din alte alfabete: chirilic, ebraic, arab, chinez, etc.

Pentru acestea se poate folosi codul ASCII extins, sau codul UNICODE.

De exemplu, codul ASCII pentru majuscula M este 77(ALT + 77 : M). Majoritatea calculatoarelor utilizeaza coduri ASCII pentru a reda textul, ceea ce face posibil transferul date de la un computer la altul.

Codul ASCII este folosit pentru a traduce textul codat al computerului în text care poate fi citit. ASCII este folosit ca metoda de a oferi tuturor computerelor aceeasi limba, permitându-le sa partajeze documente si fisiere.

ALT + 0176 : °
ALT + 0169 : ©
ALT + 0128 : €
ALT + 37 : %
ALT + 0174 : ®
CTRL + ALT + 5 : €

Eticheta meta name="description" content="..."

Cindva era foarte important pentru SEO dar acum motoarele de cautare sunt mult mai sofisticate si pentru ca a fost folosit abuziv in trecut, acum nu mai are o importanta atit de mare.

Eticheta title

Titlul paginii este obligatoriu pentru a evita afisarea in browser, a titlului implicit "Untitled Document".

Eticheta body

Body contine partea vizibila(corpul) a unui document si este frate(sibling) cu eticheta Head, se afla pe aceeasi treapta de importanta.

h2>Adăugarea pictogramelor personalizate

Pentru a îmbogăți designul site-ului, puteți adăuga referințe la pictogramele personalizate direct din metadate, iar acestea vor fi afișate în anumite contexte. Cel mai des utilizat dintre acestea este favicon(pictograma favorit, referindu-se la utilizarea sa în listele „favorite” sau „bookmarks” din browsere).

Favicon este utilizat de mai mulți ani. Este prima pictogramă de acest tip: o pictogramă pătrată de 16 pixeli folosită în mai multe locuri. Puteți vedea(în funcție de browser) favicon-ul afișat în fila browserului care conține fiecare pagină deschisă, si lângă paginile marcate în panoul de marcaje(bookmarks).

Un favicon poate fi adaugat documentului astfel:

Salvarea acestuia în format .ico, în același director cu pagina de index a site-ului. Majoritatea browserelor vor suporta si formate mai comune, cum ar fi .gif sau .png, dar folosirea formatului ICO vă va asigura că funcționează până la Internet Explorer 6.
Adăugând următoarea linie în blocul <head> HTML pentru a face referire la acesta:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Există multe alte tipuri de pictograme, care trebuie luate în considerare, dar, nu vă faceți griji prea multe cu privire la implementarea tuturor acestor tipuri de pictograme în acest moment - aceasta este o caracteristică destul de avansată.

Scopul principal aici, este de a vă informa, în cazul în care veți întâlni aceste pictograme, atunci cind studiati codul sursă al altor site-uri web.

Aplicarea CSS și JavaScript la HTML

Toate site-urile web din zilele noastre, utilizeaza CSS pentru a le face să arate bine și JavaScript pentru a imbogati funcționalitatea interactivă, precum playere video, hărți, jocuri și multe altele. Acestea sunt aplicate cel mai frecvent pe o pagină web, folosind elementul <link> și respectiv <script>.

Elementul <link> merge întotdeauna în interiorul sectiunii head a documentului. Acesta necesită două atribute, rel = "stylesheet", care indică faptul că este foaia de stil a documentului și href, care conține calea către fișierul de stiluri:

<link rel="stylesheet" href="style.css">

Elementul <script> nu trebuie neaparat plasat in sectiunea head, de fapt, de multe ori este mai bine să-l așezați în partea de jos a corpului documentului chiar înainte de eticheta </body>, pentru a vă asigura că tot conținutul HTML a fost citit de browser înainte de a încerca să exeute codul JavaScript (dacă JavaScript încearcă să acceseze un element dintr-un DOM care încă nu există, browserul va genera o eroare).

<script src="main.js"></script>

☞ Elementul <script> poate arăta ca un element gol, dar nu este, și are nevoie de o etichetă de închidere. În loc să incarcați un fișier extern, puteți alege, de asemenea, să puneți scriptul în pagina, în elementul script.

<script>
   codul javascript...
</script>

Setarea limbii primare a documentului

În sfârșit, merită menționat că puteți(și chiar ar trebui) să setați limba paginii documentului. Acest lucru se poate face prin adăugarea atributului lang la eticheta HTML de deschidere așa cum se vede mai jos:

<html lang="ro-RO">

Acest lucru este util în multe feluri. Documentul HTML va fi indexat mai eficient de către motoarele de căutare, si astfel să apară corect în rezultatele specifice limbii, de exemplu, și este util persoanelor cu deficiențe de vedere care utilizează cititori de ecran.

De asemenea, puteți seta subsecțiunile documentului, să fie indexate ca limbi diferite. De exemplu, am putea seta o subsecțiune de limbă japoneză să fie recunoscută ca japoneză, astfel:

<p>Exemplu in japoneza: <span lang="ja">ご飯が熱い。</span></p>

Aceste coduri de limba sunt definite de standardul ISO 639-1.

🧠 Quiz - HTML Introducere

Modele de continut ➔