Bazele limbajului HTML

      Comments

HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afișate într-un browser (sau navigator).

HTML este un limbaj de tip Client-Side.

Acest limbaj este format din marcaje,  cunoscute si sub numele de tag-uri.

In mod normal, fiecare marcaj are un tag de inceput si un tag de sfarsit, dar exista si exceptii.

Pe fiecare marcaj se pot seta diverse atribute.

Pe fiecare atribut se pot seta diverse proprietati CSS.

Mai jos dau un exemplu de marcaj care are tag de inceput si tag de sfarsit, tagul care reprezinta un paragraf nou, tagul P

tagul de inceput: <p>

tagul de sfarsit: </p>

Din exemplul de mai sus, se observa ca un tag este incorporat intre caracterul < si >

Tagul de sfarsit are caracterul / inainte de litera care reprezinta un paragraf nou.

Un alt exemplu de marcaj care are tag de inceput si tag de sfarsit este DIV:

tagul de inceput: <div>

tagul de sfarsit: </div>

In urmatorul exemplu, vom seta un atribut pe tagul DIV:

<div id=’identificator_unicat’></div>

In exemplul de mai sus, am setat valoarea atributului id ca fiind identificator_unic.

Acum, sa afisam ceva pe ecran. Urmatorul exemplu va afisa textul 12345 pe ecran:

<div>12345</div>

Din exemplul de mai sus, deducem ca avem un tag de tip div si ca pe ecran va fi afisat textul 12345.

Mentionam mai sus ca limbajul HTML este de tip Client-Side.

Sper ca deja te-ai intrebat: De ce nu apare si tagul div pe ecran ?

Tagurile nu sunt afisate pe ecran ca text pur. Ele ocupa un spatiu in pagina, definesc o anumita structura, iar acea structura este randata de catre browser pe ecran. Pentru a vedea exact zona care este ocupata de un tag, se poate seta un contur de culoare rosie.

Continutul tagurilor este ceea ce vede utilizatorul pe ecran, in cazul nostru continutul fiind 12345.

Un exemplu foarte simplu din viata reala:

Imagineaza-ti ca ai in fata o fila A4 de matematica.

Aceasta fila este impartita in patrate.

Deseneaza un dreptunghi lat de 20 de patrate si inalt de 35 de patrate, dupa care, scrie textul 12345 in acest dreptunghi.

Sper ca ai facut legatura. Cand vorbim de programare web, fila A4 este raportata la zona in care afisam datele in browser.

Ecranul monitorului este o matrice compusa din pixeli de diferite culori.

Zona in care randam datele in browser, este parte din ecran, deci este tot o matrice de diferite culori.

Fiecare tag, este o structura, posibil un dreptunghi, structura care o putem pozitiona unde dorim pe interfata.

Partea interesanta este ca aceste taguri se pot mixa intre ele.

Partea frumoasa este ca se pot si pozitiona oriunde pentru a dezvolta diverse structuri.

Cand spun structuri, ma refer la tot felul de pagini web, pagini web pe care atunci cand le vezi, ramai cu o senzatie de WOW !

Un exemplu simplu de mixare al tag-urilor:

<div>

<p>

text in paragraf nou

</p>

</div>

Dupa cum vezi, nu prea conteaza modul in care este scris codul html.

Fie ca este scris pe o singura linie, fie ca este impartit pe mai multe linii, sa te asiguri ca tagurile sunt scrise corect. Daca tagurile sunt scrise corect, codul html va fi randat la fel de orice browser, oricum ai scrie codul.

Aceasta regula se aplica si la pagina html, pagina fiind compusa din diverse structuri.

Eu va mai recomand sa scrieti orice cod intr-un mod ordonat.