Crearea paginilor web - limbajul HTML

Pagina principala   Curs Laborator Proiect
  Editorul Dreamweaver >>

Limbajul folosit pentru scrierea paginilor web este HTML (HyperText Markup Language). Acesta nu este un limbaj de programare, ci de "formatare" a textului, si foloseste asa numitele marcaje, numite TAG-uri in limba engleza.
Tagurile apar intre semnele < si >, si reprezinta comenzi ce spun navigatorului cum sa interpreteze textul dintre taguri (bold, italic, daca se defineste un tabel, o lista, inserarea unei imagini, etc.) si astfel poate afisa corespunzator pagina web.

Majoritatea tagurilor au doua parti: tagul de deschidere ce indica unde incepe textul si tagul de inchidere ce spune navigatorului unde se termina textul ce trebuie formatat conform tagului respectiv. Tagurile de inchidere incep cu semnul / (slash) chiar dupa simbolul < . De exemplu:

tagul <BODY> indica unde incepe continutul paginii web,
iar tagul </BODY> indica sfarsitul continutului paginii web.

In acest fel navigatorul stie ca tot ce se afla intre aceste tag-uri este continutul paginii web si il va afisa in fereastra browser-ului.

Mai jos aveti un exemplu al codului sursa HTML, care va afisa textul:

Aceasta este o pagina de test

Scrieti acest cod cu editorul de text Notepad (in meniul Start->Programs->Documents->Notepad). Dupa scrierea codului fisierul trebuie salvat cu extensia html, de exemplu test.html
Dupa scrierea fisierului il incarcati cu navigatorul (Internet Explorer, Netscape, Opera), ca sa verificati daca intr-adevar se afiseaza ce v-ati propus.

Fisierul sursa HTML Explicarea TAG-urilor


<HTML> tag ce indica inceputul documentului HTML
<HEAD> tag ce indica "antetul" documentului, cum ar fi titlul, autorul, cuvintele de cautare, etc.
<TITLE>Pagina de test</TITLE> indica titul documentului, ceea ce apare in bara de sus a navigatorului
</HEAD> inchiderea tag-ului HEAD
<BODY> tag ce indica inceputul continutului paginii web. Tot ce este intre aceste taguri va fi afisat de catre navigator, corespunzator cu restul tag-urilor folosite.
This is a web page! continutul paginii web
</BODY> Inchiderea tag-ului BODY
</HTML> sfarsitul documentului HTML

Tabel 1

Multe dintre taguri au parametrii care indica formatari suplimentare ale textului. Mai jos aveti codul studiat, modificat astfel incat fundalul paginii sa fie de culoare rosie, si textul sa apara cu caractere mai mari, fontul Arial si culoarea albastra. Observati continutul tagurilor BODY si folosirea tagurilor FONT si B.

Fisierul sursa HTML Explicarea TAG-urilor


<HTML>
<HEAD>
<TITLE>Pagina de test</TITLE>
</HEAD> inchiderea tag-ului HEAD
<BODY bgcolor="red"> s-a folosit parametrul bgcolor pentru a schimba fundalul paginii
<FONT color="blue" size="+2" face="Arial"> tagul FONT, cu parametrii corespunzatori (size, color, face) indica cum sa apara textul care este cuprins intre aceste taguri
This is a test page! textul ce este formatat de tag-ul FONT, si care in acest caz este in acelasi timp continutul paginii web.
</FONT> inchiderea tagului FONT, se termina efectul acestui tag.
</BODY>
</HTML>

Tabel 2

Dupa cum ati observat in exemplul de mai sus culoarea fontului si a fundalului se poate da cu denumirea din limba engleza (red, blue, etc.), sau se poate folosi codul hexazecimal al culorii. Codurile pentru diferitele culori le gasiti la adresa de mai jos:

Harta RGB

In acest caz, in loc de optiunea "red", se foloseste numele codului, precedat de semnul #. De exemplu pentru culoarea rosie se scrie #FF0000.

Tagul utilizat
 Efectul


<b>Text scris cu bold</b> Text scris cu bold
<b><i>Text scris cu bold si italic</i></b> Text scris cu bold si italic
<b><u>Text scris cu bold si subliniat</u></b> Text scris cu bold

<table border=1 cellspacing=5 cellpadding=5>
<tr>
<td>prima coloana primul rand</td>
<td>a doua coloana primul rand</td>
</tr>
<tr>
<td>prima coloana al doilea rand</td>
<td>a doua coloana al doilea rand</td>
</tr>
</table>

Un tabel cu doua coloane si doua randuri
prima coloana primul rand a doua coloana primul rand
prima coloana al doilea rand a doua coloana al doilea rand
<ol>
<li>primul element din lista
<li>al doilea element
<li>al treilea element
</ol>
  1. primul element din lista
  2. al doilea element
  3. al treilea element

Tabel 3

Editarea paginilor web in acest mod este destul de dificila si ineficienta in cazul realizarii unei pagini mai complexe, si presupune cunoasterea amanuntita a tagurilor limbajului HTML (vezi tabel 3). Descrierea limbajului il puteti gasi la urmatoarele adrese:

Descrierea tag-urilor HTML la Netscape | Copie (mirror) pe serverul local

Descrierea tag-urilor la consortiul WWW (mai tehnic) | Mirror local

Mai jos aveti o alta adresa pentru invatarea limbajului HTML, explicat in exemple:

HTML prin exemple | Mirror local

O alta modalitate este de a folosi un editor HTML, asemanator editoarelor de text. In acestea utilizatorul scrie doar continutul paginii web, iar tagurile sunt introduse de editor in momentul formatarii textului de catre utilizator, folosind meniurile si icoanele editorului.

  Editorul Dreamweaver >>