Sunteți pe pagina 1din 7

Introducere in HTML

Autor: Alexandru CULIUC

Continut

1 Ce este HTML?
2 Tag-uri de baza
3 Formatam textului
4 Adaugam imagini
5 Pagina finala
6 Legam pagini Web

1. Ce este HTML?

HTML (HyperText Markup Language) este limbajul in care sint scrise paginile World Wide Web
(WWW). Termenii "document HTML" si "pagina Web" sint sinonime.

Sa descifram abrevierea. Hypertext reprezinta posibilitatea de a crea legaturi (in engleza - link) intre
diferite documente. Exemplu: Acest text este o legatura cu pagina mea personala. Markup Language
inseamna "limbaj de etichetare".

Este important de cunoscut ca HTML nu este un limbaj de programare. Puteti insusi bazele lui si crea
prima pagina Web in mai putin de o ora. Anume cu aceasta ne vom ocupa in continuare.

2. Tag-uri de baza

In varianta sa cea mai simpla, un document HTML reprezinta un melanj de informatie textuala si tag-
uri, care explica browser-ului cum sa vizualizeze acest text pe ecranul ordinatorului. Tag in engleza
este "eticheta". Pentru a le deosebi de text, tag-urile sint incluse in paranteze speciale, formate din
semnele "mai mic" si "mai mare": <aceasta_e_tag> In dependenta de continutul "etichetei" (ceea ce e
scris intre "<" si ">") textul este reprezentat diferit. Aici incheiem partea teoretica.

Sa intram in cel mai simlu editor de texte (in Windows se numeste Notepad) si sa culegem textul
primei pagini Web:

Bine ati venit!

Ma numesc Sandu.
Aceasta e prima mea pagina.
Imi plac the Beatles.

Salvati acest document cu extensiunea .html (de exemplu: sandu.html). Continutul acestui document
se numeste sursa HTML. Vizualizati documentul obtinut in fereastra browser-ului : pentru aceasta
executati un double-click pe fisierul dat in Windows Explorer (pentru sisteme Win 95, 98 si NT). Cred
ca ati obtinut aproximativ urmatorul rezultat.
Bine ati venit! Ma numesc Sandu. Aceasta e prima mea pagina. Imi plac the Beatles.

Rezultatul e departe de cel dorit... Browser-ul nu a inteles trecerea la rind nou.

Corectam greseala introducind primul tag: <P> - paragraf. Acolo unde introducem acest tag, browserul
va crea un nou paragraf, lasind o linie goala intre cel precedent si cel creat.

De fapt dorim sa lasam o linie goala intre primele doua rinduri, dar nu si intre rindurile 2 si 3. Trecerea
la un rind nou se face cu ajutorul tag-ului <BR>, denumirea caruia provine de la englezul break,
avindu-se in vedere ca el "rupe" rindul. Efectul - trecere la rind nou, fara a lasa o linie goala asa cum o
face <P>. Acum modificam textul in Notepad:

<P>Bine ati venit!


<P>Ma numesc Sandu
<BR>Aceasta e prima mea pagina.
<BR>Imi plac the Beatles.

Salvam fisierul si-l vizualizam in fereastra browser-ului:

Bine ati venit!

Pe mine ma cheama Sandu.


Aceasta este prima mea pagina.
Imi plac the Beatles.

Vedeti cum arata pagina aceasta in realitate. Tot ce ne-a ramas este sa facem ca pagina sa nu fie
intr-atit de strasnica...

3. Formatarea textului

Acum stim deja ce este HTML si am invatat primele 2 tag-uri. Sa incercam sa diversificam textul cu
care continuam lucrul:

De exemplu doresc sa evidentiez faptul ca vizitatorul paginii este binevenit si ca ma numesc Sandu.
Facem asa:

<P><I> Bine ati venit! </I>


<P>Ma numesc <B>Sandu</B>
<BR>Imi plac the Beatles.

Rezultatul:

Bine ati venit!

Ma numesc Sandu.
Aceasta este prima mea pagina.
Imi plac the Beatles.

Acum "Bine ati venit!" este scris in italic (oblic), iar numele meu este evidentiat prin bold (gros). Pentru
aceasta textul pe care am vrut sa-l evidentiem l-am inclus in tag-uri. In primul caz am "cuplat" italicul
cu tag-ul <I> si l-am "decuplat" cu </I>. Tot ce este inclus intre aceste 2 tag-uri este scris in italic.
Textul inclus intre tag-ul de deschidere <B> si cel de inchidere </B> este reprezentat in bold. Tag-ul de
inchidere se deosebeste de cel de deschidere prin bara de impartire (/).

De exemplu eu de curind am inceput sa ascult si Led Zeppelin si doresc ca toti sa observe extinderea
preferintelor mele muzicale. Pentru aceasta adaugam un rind nou si il scrim cu caractere mari in felul
urmator:

<P>Bine ati venit!


<P>Ma numesc Sandu.
<BR>Aceasta e prima mea pagina.
<BR>Imi plac the Beatles.
<BR><FONT SIZE="5">si Led Zeppelin!</FONT>

Obtinem:

Bine ati venit!

Ma numesc Sandu.
Aceasta e prima mea pagina.
Imi plac the Beatles.
si Led-Zeppelin
Aici am introdus un nou tag - <FONT> (caracter) si atributul sau SIZE (dimensiune). Acest atribut
indica care este dimensiunea textului ce este inclus intre tag-urile <FONT SIZE="numar"> si </FONT>.
Numarul indica dimensiunea caracterelor: 1 este cel mai mic, iar 6 - cel mai mare. Dimensiunea 3 este
considerata standarda (by default), care corespunde aproximativ dimensiunii de 11-12 points (puncte).

Sa vedem acum ce se intimpla cu titlurile. Sa zicem ca in urma audierii formatiei Led Zeppelin decid
sa divizez pagina in 2 capitole, fiecare fiind inceputa cu un titlu, si mai doresc sa fac o concluzie vis-a-
vis de preferintele mele muzicale.

Pentru aceasta utilizam familia de tag-uri, <Hx>. "H" provine de la "heading" (titlu). Iar in loc de "x" se
pune ordinul titlului. Astfel <H1> este un titlu de ordinul 1, adica cel mai important, <H2> este titlu de
ordinul 2, adica mai mic si tot asa pina la <H6>. Titlurile sint automat afisate in bold. Fiind intotdeauna
amplasate in paragrafe aparte, ele de asemenea nu necesita utilizarea tag-ului <P> pentru a le separa
de alte paragrafe:

Culegem:

<H1>Bine ati venit!</H1>

Ma numesc <B>Sandu</B>.
<BR>Imi plac formatiile:

<H2>The Beatles</H2>

<P>John Lennon, Paul McCartney, George Harrison, Ringo Starr

<H2>Led Zeppelin</H2>
<P>Jimmy Page, Robert Plant, John Paul Jones, John Bonham

<P><I>Sandu prefera muzica buna, el e bravo.</I>


Obtinem:

Bine ati venit!


Ma numesc Sandu.
Imi plac formatiile:

The Beatles
John Lennon, Paul McCartney, George Harrison, Ringo Starr

Led Zeppelin
Jimmy Page, Robert Plant, John Paul Jones, John Bonham

Sandu prefera muzica buna, el e bravo.

Daca Sandu e intr-adevar bravo si doreste sa evidentieze acest fapt, apoi urmatoarea modificare este
posibila:

Culegem:

<I>Sandu prefera muzica buna, el e <B>bravo</B></I>

Atrageti atentia la inserarea perechii de tag-uri <B>, </B> in perechea <I>, </I>. Mai intii deschidem
tag-ul italic (<I>), am scris partea care trebuie sa apara doar in italic si deschidem tag-ul bold (<I>).
Scriem textul necesar sa apara atit in bold , cit si in italic, dupa care inchidem tag-urile in ordine
inversa: mai intii bold (</B>) si apoi italic (</I>). Rezultatul:

Lui Sandu ii place muzica buna, el e bravo.

In final sa invatam a schimba culoarea textului. Se utilizeaza acelasi tag <FONT>, dar cu atributul
COLOR="valoare". Pentru inceput valorile puteti sa le scrieti in engleza (red, green, blue, etc.). De
exemplu:

<FONT COLOR="red">
<H1>Bine ati venit!</H1>
</FONT>

Vedeti rezultatul lucrului, dupa care cititi cum se incadrareaza imaginile in paginile Web.

4. Adaugam imagini

Pagina obtinuta nu e rea, insa ar fi nevoie si de putina grafica. E important de inteles ca imaginile nu
sint incluse direct in documentul HTML - aici indicam doar denumirea fisierului grafic respectiv. In
Internet exista 2 formate grafice acceptate: GIF (fisierele inscrise in acest format au extensiunea ".gif",
de exemplu "foto.gif") si JPEG (extensiunea ".jpg").
Sa incepem cu crearea imaginii. Am scanat coperta albumului "With the Beatles" si am modificat-o
putin intr-un program grafic. Rezultatul il salvam in fisierul "beatles.gif" in acelasi directoriu cu
documentul HTML.

Includerea imaginii in pagina Web este efectuata prin tag-ul <IMG>, denumirea caruia provine de la
"image". Pentru a indica sursa imaginii (denumirea fisierului grafic) utilizam atributul SRC, de la
englezul source (sursa). Codul final e prezeintat in felul urmator:

<P>
<IMG SRC="beatles.jpg">

Pentru a amplasa imaginea din rind nou am precedat tag-ul <IMG> cu un <P>. Pentru a grabi
incarcarea paginii, e de dorit sa specificam inaltmea (atributul WIDTH) si latimea (atributul HEIGHT)
imaginei exprimata in pixeli. De exemplu imaginea noastra are latimea de 280 pixeli si inaltimea 230
pixeli (280x230). In afara de aceasta, pentru cei care utilizeaza browsere textuale (exista si de astea!)
e bine de specificat un text alternativ (atributul ALT), care va aparea in aceste browsere in loc de
imagine. In asa caz includerea corecta a imaginii se va face astfel:

<P>
<IMG SRC="beatles.jpg" WIDTH="280" HEIGHT="230" ALT="The Beatles">

Rezultatul inserarii imaginii in document il puteti vedea aici.

Grafica pe Web este o tema complexa, care necesita o discutie aparte, in aceasta lectie am prezentat
doar elementele de baza.

5. Pagina finala

Acum, cind pagina include toata informatia dorita, s-ar parea ca nu ramine decit sa o amplasez pe
Web si sa astept mesaje de multumire din partea vizitatorilor pentru informatia detaliata referitor la
formatiile Beatles si Led Zeppelin. Dar sa nu ne grabim!

Fisierul HTML are o structura bine stabilita, care nu a fost insa incadrata si in pagina noastra.
Documentul trebuie sa inceapa cu tag-ul <HTML>, care indica browser-ului ca intr-adevar tot ceea ce
urmeaza e scris in HTML. La sfirsitul documentului se amplaseaza tag-ul </HTML>.

De obicei documentul HTML are un en-tete (header), inclus intre tag-urile <HEAD> si </HEAD>. Aici,
intre <TITLE> si </TITLE> este amplasat titlul paginii, care apare in bara de titlu a browser-ului.

Corpul documentului - toata informatia utila despre Beatles si Led Zeppelin - incepe chiar dupa tag-ul
</HEAD> (inchiderea en-tete-ului) si este inclusa intre tag-urile <BODY> si </BODY>.

Astfel obtinem urmatoarea structura pentru document.

<HTML>
<HEAD>
<TITLE>Titlul paginei</TITLE>
</HEAD>

<BODY>
Corpul documentului
</BODY>
</HTML>

Acum nu ne ramine decit sa oferim vizitatorilor paginii posibilitatea de a ne trimite mesaje. Aceasta se
face in modul urmator:
<P>Daca va place rock-ul clasic nu ezitati <A HREF="mailto:eu@mail.md"> sa-
mi scrieti</A>.

Rezultat:

Daca va place rock-ul clasic nu ezitati sa-mi scrieti.

Printre altele, acum ati utilizat un nou tag, ancora (<A>), cu ajutorul caruia sint facute legaturile intre
pagini Web. Mai amanuntit vom studia acest tag in ultima lectie, varianta prezentata aici este utilizata
pentru e-mail. La executarea unui click pe textul de legatura care se afla intre <A ...> si </A> (in loc de
"sa-mi scrieti" putea fi oricare text) apare fereastra de compunere a unui noi mesaj e-mail. Nu uitati sa
puneti in loc de eu@mail.md adresa Dvoastra e-mail.

Acum puteti vedea forma finala a paginii. Pentru a vizualiza sursa HTML in fereastra noua in care se
deschide pagina selectati "Page Source" (in Netscape Navigator) sau "Source" (in Microsoft Internet
Explorer) din meniul "View" al browserului.

6. Legam pagini Web

Puterea HTML-ului consta in posibilitatea de a lega documente. Pagina Dvs. poate avea legaturi cu
alte pagini scrise de Dvs. sau la alte pagini de pe WWW. La ultima lectie am introdus tag-ul <A>
(ancora), care sta la baza legarii documentelor.

Sa presupunem ca volumul informatiei despre Beatles a crescut considerabil, plus la asta mai doresc
sa includ ceva date despre Rolling Stones. In asa caz pagina principala ar putea cuprinde doar un
mesaj general si legaturi cu alte 3 documente HTML: unul despre Beatles (salvam informatia in fisierul
"beatles.html"), altul despre Led Zeppelin (ledzep.html) si al treilea despre Rolling Stones
(stones.html). Link-ul la "beatles.html" se creaza astfel:

<A HREF="beatles.html">cititi despre Beatles</A>

Rezultatul:

cititi despre Beatles.

Valoarea atributului HREF (hyper-reference) determina adresa fisierului cu care se face legatura, iar
textul intre <A ...> si </A> se numeste text de legatura - in fereastra browser-ului el de obicei apare
subliniat.

Aplicam acelasi procedeu la celelalte link-uri (spre paginile consacrate Led Zeppelin si Rolling Stones)
si sa nu uitam sa includem in celelalte pagini hiper-referinte la pagina de start (care in cazul dat am
numit-o "sandu.html") in felul urmator:

<A HREF="sandu.html">inapoi la pagina de start</A>

Cu toate ca informatia prezentata despre cele 3 formatii muzicale este "vasta", putem sa sfatuim
vizitatorii sa treaca pe la alte site-uri similare. In asa caz valoare atributului HREF trebuie sa indice
calea (path) deplin la pagina in cauza, care include numaidecit prefixul "http://". Pentru a crea o
legatura la www.ournet.md inseram urmatorul cod in fisierul sandu.html:

<A HREF="http://www.OurNet"> Vizitati Moldova Internet Resources</A>

Pentru a face acest link mai atractiv textul de legatura poate fi inlocuit cu o imagine:
<A HREF="http://www.ournet.md"> <IMG SRC="mir_button.gif" WIDTH="88"
HEIGHT="31" ALT="Moldova Internet Resources"></A>

Rezultat:

Dupa cum vedeti, in jurul imaginii apare o rama. Ea apare in jurul oricarei imagini-link. Pentru a o evita
adaugam in tag-ul <IMG> un nou atribut - BORDER - cu valoarea "0" (BORDER="0").

<A HREF="http://www.ournet.md"> <IMG SRC="mir_button.gif" WIDTH="88"


HEIGHT="31" ALT="Moldova Internet Resources" BORDER="0"></A>

Rezultat:

Aici puteti vedea oricare din cele 4 fisiere obtinute si sursele HTML respective:

sandu.html - pagina de start.


beatles.html - pagina Beatles.
ledzep.html - pagina Led Zeppelin.
stones.html - pagina Rolling Stones.