HTML, prescurtarea pentru Hyper Text Markup Language, este un limbaj de marcaje utilizat în dezvoltarea paginilor web, pagini care pot fi afișate într-un browser.
HTML este un limbaj de tip Client-Side.
Acest limbaj este format din marcaje, cunoscute și sub numele de tag-uri.
În mod normal, fiecare tag are o etichetă de început și o etichetă de sfârșit, dar există și excepții.
Pentru fiecare etichetă de început se pot seta diverse atribute. (Atenție! Atribute se pot seta numai în eticheta de început a unui tag !)
Pentru fiecare atribut se pot seta diverse valori și proprietăți.
În continuare dăm un exemplu de tag care are o etichetă de început și o etichetă de sfârșit, tag-ul P, tag care reprezintă un paragraf nou.
eticheta de început: <p>
eticheta de sfârșit: </p>
Din exemplul de mai sus, se observă că o etichetă este încorporată între caracterele < și >
Eticheta de sfârșit are caracterul / înainte de litera care reprezintă tag-ul.
Un alt exemplu de tag care are o etichetă de început și o etichetă de sfârșit este tag-ul DIV.
eticheta de început: <div>
eticheta de sfârsit: </div>
În următorul exemplu, vom seta un atribut pentru tag-ul DIV, atribut care trebuie setat în eticheta de început.
<div id=’identificator_unicat’></div>
În exemplul de mai sus, am setat valoarea atributului id ca fiind identificator_unic
Dezvoltatorul este cel care stabilește valoarea atributului, valoare care trebuie să respecte anumite norme.
Sunt permise caracterele englezești, precum: a-z A-Z 0-9 – _
Acum, să afișăm pe ecran un text.
Următorul exemplu va afișa textul 12345 pe ecran:
<div>12345</div>
Din exemplul de mai sus, deducem că avem un tag de tip div si că pe ecran va fi afișat textul 12345.
Menționam mai sus că limbajul HTML este de tip Client-Side.
Sper că deja te-ai intrebat: De ce nu apare și tagul div pe ecran ?
Tag-urile nu sunt afișate pe ecran ca text pur. Ele ocupă un spațiu in pagină, definesc o anumită structură, iar acea structură este randată de către browser pe ecran.
Pentru a vedea exact zona care este ocupată de un tag, se poate seta un contur de culoare roșie sau se pot folosi anumite tool-uri. Se vor oferi detalii în cursurile următoare.
Conținutul tagurilor este ceea ce vede utilizatorul pe ecran, în cazul nostru conținutul fiind 12345.
Un exemplu foarte simplu din viața reală:
Imaginează-ți că ai în față o filă A4, de matematică.
Această filă este împărțită în pătrate.
Desenează un dreptunghi cu lățimea de 20 de pătrate și înălțimea de 35 de pătrate, după care, scrie textul 12345 în acest dreptunghi.
Sper că ai facut legătura.
Când vorbim despre programarea web, în cazul nostru, fila A4 este pe post de monitor, fiind zona în care afișăm datele, exact ca în browser.
Ecranul monitorului este o matrice compusă din pixeli, iar pixelii pot fi colorați în diferite culori.
Zona în care randăm datele în browser, este parte din ecran, deci este tot o matrice de diferite culori.
Fiecare tag, este o structură, posibil un dreptunghi, structură pe care o putem poziționa unde dorim pe interfață.
Partea interesantă este că aceste tag-uri se pot mixa între ele.
Partea frumoasă este că se pot și poziționa oriunde, pentru a dezvolta diverse structuri.
Când spun structuri, mă refer la tot felul de pagini web, pagini web pe care atunci când le vezi rămâi cu o senzație de WOW!
Un exemplu simplu de mixare al tag-urilor:
<div>
<p>
text in paragraf nou
</p>
</div>
După cum vezi, nu contează modul în care este scris codul html.
Fie că este scris pe o singură linie, fie că este împărțit pe mai multe linii, să te asiguri că tag-urile sunt scrise corect și că este respectată sintaxa limbajului.
Dacă tag-urile sunt scrise corect, codul html va fi randat la fel de oricare browser, oricum ai scrie codul.
Acestea sunt toate informațiile pe care un tanăr dezvoltator trebuie să le asimileze la primul contact cu limbajul HTML.
La sfârșit de articol, eu vă recomand să scrieți codul într-un mod ordonat.
Vă recomand să continuați studiul accesând articolul Termenele „atribut” și „valoare” în limbajul HTML, apoi continuați cu articolul Limbajul PHP, iar apoi să continuați cu articolul cod HTML vs cod PHP.