1.1Elementele limbajului HTML 4.

0 şi principalele lor atribute

HTML ( Hypertext Markup Language ) este un limbaj creat în scopul

de a descrie, în mod text, formatul paginilor Web; fişierele create în acest
limbaj vor fi interpretate de navigatoare, care vor afişa paginile în forma
dorită ( cu texte formatate, liste, tabele, formule, imagini, hiperlegături,
obiecte multimedia etc. ).
Limbajul HTML a evoluat în versiuni succesive, odată cu evoluţia
protocolului HTTP şi a programelor de navigare. Astfel, HTML 1.0 era
compatibil cu Mosaic, primul program de navigare, dar după apariţia unor
navigatoare noi, a fost necesară introducerea unui standard oficial Internet
pentru construirea paginilor ( HTML 2.0 ) şi extinderea sa cu noi facilităţi:
formule matematice, tabele, moduri avansate de descriere a organizării
paginilor ( începând cu HTML 3.0 ).
Aşa cum se poate deduce din numele limbajului, HTML descrie
caracteristicile de format ale elementelor incluse prin procedee de marcare.
Fiind un limbaj de marcare, HTML nu utilizează instrucţiuni ( ca Pascal-ul
sau C-ul ) ori comenzi ( ca Fox-ul ), ci etichete, acestea fiind numite şi
balize, elemente sau tag-uri. Un limbaj de marcare trebuie să specifice
mulţimea de marcaje obligatorii, maniera de identificare a marcajelor şi
semantica fiecărui marcaj.
 Termenul tehnic pentru textul marcat este elementul, acesta fiind
văzut ca o componentă structurală a unui document. Fiecare element trebuie
specificat explicit într-un anumit mod şi astfel fiecare element va fi introdus
între două marcaje ( tag-uri ) - de început şi sfârşit. Perechea tag de început-
tag de sfârşit este folosită la încadrarea fiecărei apariţii a elementului
respectiv în cadrul unei pagini Web.
Astfel, forma unui element generic va fi <element>…</element>,
unde <element > specifică un tag de început şi </element> un tag de sfârşit,
iar “element” este numele unui element oarecare permis de specificaţiile
HTML.
Un element poate fi vid ( nu conţine nimic între tag-ul de început şi
cel de sfărşit ) sau poate conţine un text, inclusiv alte elemente.
Procesele de standardizare şi de includere a comenzilor de marcare în
fişierele HTML permit navigatoarelor să citească şi să formateze paginile
Web, lucru foarte important în condiţiile în care ele conţin nu numai texte
alb-negru, ci şi culori, imagini, hiperlegături, diverse obiecte.
Practic, marcajele HTML asigură controlul asupra modului de afişare
a obiectelor corespunzătoare în cadrul programelor de vizualizare a
documentelor HTML - navigatoarele.

Marcajele HTML pot fi clasificate în următoarele categorii :

1.marcaje de bază – cele care delimitează pagina/documentul HTML, titlul

acesteia şi corpul paginii
2.marcaje pentru structurarea documentului, care permit introducerea de
subtitluri, paragrafe, linii de delimitare
3.marcaje pentru formatarea textului şi crearea listelor
4.marcaje pentru crearea hiperlegăturilor
5.marcaje pentru introducerea de obiecte: tabele, formule, imagini sau
obiecte multimedia preluate din fişiere, formulare

Câteva consideraţii asupra elementelor :

 Numele elementului nu este case-sensitive, adică, chiar dacă se

utilizează majuscule sau caractere obişnuite, rezultatul este acelaşi. De
exemplu <EM> este echivalent cu <Em> sau <em>.
 De multe ori este permis ca în cazul unor elemente tag-ul de sfârşit să
fie omis. Acest lucru nu este indicat dar nici nu constituie o greşeală
dacă se utilizează această practică numai la elementele care permit
acest lucru.

Atributele unui element definesc diferite proprietăţi pentru

elementul în cauză. De exemplu,
un element paragraf poate accepta ca atribut opţional modul de aliniere ( la
stânga, la dreapta sau centrat ), alinierea nerealizându-se decât pentru
paragraful respectiv. Un element poate avea mai multe atribute iar acestea
trebuie menţionate numai în tag-ul de început al elementului.
Fiecare atribut are stabilit un nume – compus din caractere literale – şi
poate avea drept valori şiruri de caractere sau numere întregi delimitate de
ghilimele.
Astfel, specificarea generică a unui atribut va avea forma : atribut
=”valoare”.
Valorile atributelor pot fi prezentate sub mai multe forme. În cazul
atributului WIDTH, de exemplu, acesta poate lua valoarea 100% care, de
fapt, este o valoare relativă. Acelaşi atribut poate avea o valoare fixă
exprimată în pixeli. Acest lucru se întâmplă pentru unele atribute care
definesc proprietăţi cum ar fi, de exempu, lungimea unui element.
Pentru alte elemente există alte atribute cum ar fi atributul COLOR ce
defineşte culoarea unui element sau a unui font şi în acest caz i se poate
atribui ca valoare numele unei culori ( yellow, green, red, etc ) sau valoarea
hexazecimală a acelei culori.

Conceperea documentelor HTML :

Având la dispoziţie elementele şi atributele oferite de standardele

HTML, se poate crea orice document Web, oricât de complex, recurgând la
un simplu editor de texte, cu ajutorul căruia se va redacta succesiunea de
tag-uri şi date corespunzătoare documentului respectiv.

Un fişier HTML se poate realiza :

a) manual, scriind tag după tag în Notepad
b) cu ajutorul editoarelor HTML precum UltraEdit, TextPad ( disponibile în
varianta shareware ), AceHTML Pro, Microsoft Frontpage, HotDog sau 1st
Page 2000.
 Unele dintre aceste editoare posedă şi o serie de facilităţi precum:
asistenţi pentru realizarea de pagini dinamice, şabloane de documente,
validatoare de cod HTML, navigator Web încorporat, completarea automată
a codului, etc.
O altă clasă de aplicaţii care pot fi folosite în procesul de concepere a
documentelor HTML este cea a uneltelor de editare care oferă în principal
un mediu de lucru vizual pentru realizarea de pagini şi situri Web. Exemplu:
Macromedia Dreamweaver sau Adobe GoLive. Această categorie de
aplicaţii oferă posibilitatea urmăririi relaţiilor dintre diferitele documente,
încorporând facilităţi de parcurgere a legăturilor şi de vizualizare a structurii
sitului generat

Etape în realizarea unui document Web :

 Se alocă un director sitului care se intenţionează a fi realizat
 Se efectuează clic pe butonul Start - Programs, Accessories,
Notepad
 Se introduc textul şi etichetele
 Se salvează fişierul cu extensia .htm sau .html în directorul dedicat
 Se deschide fişierul în Microsoft Internet Explorer, de exemplu.
Pentru a aduce modificări fişierului, se vizualizează codul-sursă al
fişierului şi după efectuarea modificărilor, se salvează.

1.2Structura unui document HTML

 Un document HTML este delimitat de marcajele <HTML> şi
</HTML> care indică începutul şi finalul documentului şi conţine:
 zonă de antet cuprinsă între marcajele: <HEAD> … </HEAD>, care
conţine informaţii generale referitoare la document, cum ar fi titlul
documentului, autorul acestuia, data creării, etc.
 corpul documentului delimitat de marcajele: <BODY> … </BODY>,
care conţine textul propriu-zis al documentului precum şi elementele
specifice de descriere a formatului acestuia.

Titlul, introdus în antet, nu poate depăşi 64 de caractere şi este cuprins între

marcajele <TITLE> … </TITLE>.

Astfel, structura generală a unui document HTML poate fi:

<HTML>
<HEAD>
… antetul documentului…
</HEAD>
<BODY>
…corpul documentului…
</BODY>
</HTML>

În cadrul corpului unui document HTML pot apărea diverse elemente pentru
a specifica:
 stilul de afişare:
<b> (îngroşat) , <i> (înclinat) , <u> (subliniat) , <strong> (îngroşat) ,
<em> (intensificat) , < big> (mai mare) , <small> (mai mic) , <sub>
(indice) , <sup> (exponent) , <font> (dimensiune, culoare şi familie de
font ) , <pre> (text preformatat) , <code> (cod sursă) , <center> (centrat)
 titlurile:
<h1> … <h6> (şase tipuri)
 secţiunile:
<div> (diviziune) , <p> (paragraf) , <hr> (linie orizontală) , <br> (trecere
la linie nouă)
 listele:
<ul> (listă nenumerotată) , <ol> (listă numerotată) , <li> (element de
listă) , <dir> (listă de directoare) , <menu> (listă de tip meniu) , <dl>
(glosare)
 conţinutul grafic:
<img>
 tabelele:
<table> (început de tabel) , <tr> (linie de tabel) , <td> (celulă în tabel) ,
<th> (celulă din antet) , <thead> (secţiune de antet de tabel) , <tbody>
(secţiune de corp de tabel)
 legăturile ( ancorele):
<a> , <link>
 formularele electronice:
<form> (definiţie) , <input> (câmp de interogare) , <select> (listă de
selecţie) , <option> (opţiune)
 cadrele (frame-urile ):
<frameset> (definire) , <frame> (cadru) , <noframes> (alternativă de
afişare, dacă nu sunt suportate cadrele)
 suportul pentru includerea de cod-sursă scris în alte limbaje:
 <applet> (applet Java) , <script> (cod JavaScript sau VBScript) ,
<object> (obiect generic, de exemplu prezentare multimedia)
 suportul multimedia:

<embed> (extensie Netscape) , <bgsound> (extensie Internet Explorer)

 extensiile:
<meta> (meta-date şi alte directive)

Elementul <BODY> admite următoarele atribute:

 BACKGROUND=URL
Unde URL este un şir de caractere ce reprezintă adresa Web a unei
imagini care va fi utilizată de către browser ca fundal pentru document.
Dacă imaginea nu ocupă întreaga zonă din fereastra browser-ului
destinată vizualizării paginii respective, ea va fi multiplicată ca într-un
mozaic.
 BGCOLOR=culoare
Atributul BGCOLOR stabileşte culoarea fundalului ( culoarea zonei din
fereastra browser-ului în care este vizualizat documentul ). În HTML
culorile se pot specifica în două moduri: utilizând denumiri predefinite
( în limba engleză ) asociate unor culori, sau prin descompunerea unei
culori în componentele RGB, sub formă hexazecimală (câte două cifre
hexa pentru fiecare componentă). De exemplu, culoarea roşie poate fi
specificată fie prin denumirea predefinită BGCOLOR=RED, fie utilizând
valoarea RGB: BGCOLOR=#FF0000.
Observaţie referitoare la culori: utilizarea culorilor are rolul de a face
documentul mai atractiv, dar şi mai uşor de citit. De aceea culorile
 trebuie alese cu atenţie, astfel încât documentul să poată fi citit on-line
fără a obosi excesiv ochii cititorului.
 TEXT=culoare
Atributul TEXT stabileşte culoarea textului
 LINK=culoare
Atributul LINK stabileşte culoarea cu care vor fi marcate în text link-
urile nevizitate
 VLINK=culoare
Atributul VLINK stabileşte culoarea cu care vor fi marcate în text link-
urile vizitate
 ALINK=culoare
Atributul ALINK stabileşte culoarea cu care va fi marcat în text link-ul
activ ( cel asupra căruia este plasat cursorul mouse-ului )

1.3Formatarea textului şi utilizarea listelor în documentele HTML

Formatarea paragrafelor:

Pentru separarea zonelor paginii se pot folosi treceri la:

 linie nouă - cu marcajul <BR>, eventual cu desenarea unei linii
orizontale - marcajul <HR>;
 paragraf nou - cu marcajul <P> ( se inserează o linie nouă şi eventual
se face o indentare ).
Marcajul </P> desemnează sfârşitul de paragraf, dar este mai rar folosit (
se poate omite ).
 Exemplu:
<HTML>
<HEAD>
… antetul documentului…
</HEAD>
<BODY>
…corpul documentului…
</BODY>
</HTML>
va avea ca rezultat (ceea ce va afişa browserul) :
“ … antetul documentului… …corpul documentului…”
Să presupunem că dorim să introducem în pagina Web mai multe linii. Dacă
vom crea fişierul sub forma:

<HTML>
<HEAD>
Exemplu de document HTML:
</HEAD>
<BODY>
Prima linie
A doua linie
Atreia linie
</BODY>
</HTML>

va avea ca rezultat (ceea ce va afişa browserul) :

“Exemplu de document HTML: Prima linie A doua linie Atreia linie”
Trecerea pe o linie nouă se face prin folosirea marcajului <br> (de la „line
break” – întrerupere de linie) Trebuie făcute astfel următoarele modificări :
<HTML>
<HEAD>
Exemplu de document HTML:
</HEAD>
<BODY>
Prima linie <br>
A doua linie <br>
Atreia linie
</BODY>
</HTML>

Spre deosebire de editoarele de text, browser-ele nu ţin cont de modul de

aranjare în pagină a textului sursă. Poziţionarea pe orizontală a textului se
face cu ajutorul atributului ALIGN, cel mai utilizat atribut admis de eticheta
<P>.
În tabelul de mai jos sunt prezentate valorile acestuia precum şi efectele
produse prin utilizarea acestor valori:

Atribut Funcţie
LEFT Alinierea textului la marginea stîngă a ferestrei.
CENTER Centrarea textului.
RIGHT Alinierea textului la marginea dreaptă a ferestrei.
 JUSTIF
Y Alinierea textului la ambele margini.

Valoarea implicită a atributului ALIGN este LEFT. Prin urmare, dacă nu

se specifică nici un atribut, paragraful va fi aliniat automat la marginea
stângă a ferestrei browser-ului .
Utilizarea atributului ALIGN="JUSTIFY" va avea drept rezultat
alinierea textului la ambele margini. Prin alinierea unui paragraf la ambele
margini apare un inconvenient de ordin estetic şi anume faptul că, prin
această forţare, spaţiul dintre cuvinte nu va mai fi acelaşi. Acest spaţiu va
varia în funcţie de modul în care se va umple rândul respectiv. Pe de altă
parte, dacă nu se atribuie această valoare, spaţiul dintre cuvinte va fi acelaşi,
dar textul va fi aliniat neuniform la marginea la care nu este aliniat ( va
avea un aspect "zimţat" ).
Exemplu:
<HTML>
<HEAD>
</HEAD>
<BODY>
<p> Acest rând este generat de un paragraf. Implicit paragraful este aliniat la
stânga.
<p align = “right”>Acest rând este generat de un paragraf aliniat la dreapta
</BODY>
</HTML>

Utilizarea paragrafelor titlu:

 Programele de navigare asigură afişarea diferenţiată a unot titluri şi
subtitluri pentru secţiunile paginii, după criteriile implementate în acest scop
la conceperea sa ( litere mai mari sau mai mici, diverse culori, litere aldine
sau simple, unul sau mai multe rânduri libere după titlu etc. ).
Titlurile de capitole sau subtitlurile sunt definite de marcajele <Hn>, unde n
este o cifră între 1 si 6 care specifică nivelul titlului ( 1 este titlul principal
iar 6 corespunde celui mai scăzut nivel ).
Astfel:
<H1> … </H1> indică un subtitlu de nivelul 1
…
<H6> … </H6> indică un subtitlu de nivelul 6.
Exemplu:
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Titlu de marimea 1</H1>
<H2>Titlu de marimea 2</H2>
<H3 align=”right”>Titlu de marimea 3 aliniat la dreapta</H3>
</BODY>
</HTML>

Aplicarea unor efecte asupra textului: Formatările uzuale de texte permit

scrierea cu caractere:
 aldine - în acest scop pentru acel text se aplică marcajele <B>…
</B>;
  cursive (italice) - pentru acel text se aplică marcajele <I> … </I>;
 subliniate - textul se introduce între marcajele <U> …</U>.

Exemplu:
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1><U>Titlu de marimea 1 scris cu caractere subliniate</U></H1>
<H2><I>Titlu de marimea 2 scris cu caractere italice<I></H2>
<H3 align=”right”><B>Titlu de marimea 3 aliniat la dreapta si scris cu
caractere ingrosate</B></H3>
</BODY>
</HTML>

Alte tipuri de formatări de caractere care se pot defini se referă la precizarea

informaţiilor referitoare la fontul utilizat de browser pentru vizualizarea
textului - se va utiliza marcajul cu parametri:
<FONT SIZE=x COLOR=y> … </FONT>,care indică utilizarea unui font
de dimensiune x şi culoare y
 x poate fi un număr între 1 si 12, indicând mărimea exactă, sau un
număr cu semn, indicând mărimea relativă la dimensiunea curentă.
 y poate fi numele unei culori standard.

Exemplu:
<HTML>
<HEAD>
</HEAD>
<BODY >
<FONT SIZE=3 COLOR=”Green”> <U>Text scris cu caractere de marime
3 si culoare verde subliniate</U></FONT>
<FONT SIZE=8 > <I>Text scris cu caractere de marimea 8 scris cu
caractere italice<I></FONT>
<FONT SIZE=12 > <B>Text scris cu caractere de marimea 12 si
ingrosate</B></FONT>
</BODY>
</HTML>

Utilizarea indicilor şi a exponenţilor: Pentru a plasa un text ca indice

( SUBscript ) într-un document HTML, acesta se încadrează între eticheta
<SUB> şi eticheta de sfârşit </SUB>. Pentru exponenţi (SUPerscript), se
utilizează etichetele pereche <SUP> şi </SUP>.

Exemplu:
<HTML>
<HEAD>
</HEAD>
<BODY >
In acest text^sus este superscript, iar _joseste
subscript<br>
Alt exemplu:<br>
F(y)=(x₁+x₂)²
</BODY>
</HTML>

Utilizarea liniilor orizontale : Dacă se doreşte separarea a două porţiuni de

text care abordează subiecte total diferite va trebui utilizat un element
HTML care să poată produce această separare într-un mod cât se poate de
evident din punct de vedere vizual.
Pentru aceasta, HTML dispune de elementul HR ( denumirea
reprezintă iniţialele de la Horizontal Rule ) care este utilizat pentru trasarea
liniilor orizontale. Utilizarea acestui element reprezintă o metodă foarte
eficientă de divizare a unui document HTML.
Elementul HR constă într-un singur tag şi anume <HR>. Prin simpla
inserare a acestui tag în codul HTML al unei pagini de Web se va obţine o
linie orizontală.
Tag-ul <HR> dispune de mai multre atribute prezentate în tabelul de
mai jos. Atunci când nu sunt specificate aceste atribute, ele vor avea valorile
implicite specificate în tabel:

Valoare
Atribu
Descriere implicit
t
ă
SIZE 2
defineşte înalţimea unei linii în pixeli
pixeli
WIDTH defineşte lungimea unei linii specificată în pixeli sau 100%
în procente (x% din lăţimea ecranului)
NOSHA când este specificat împiedică trasarea liniei cu un nu este
DE aspect tridimensional (3D) setat
ALIGN indică modul de aliniere în pagină . Valorile care le CENT
poate avea acest atribut sunt : LEFT, CENTER, ER
 RIGHT
specifică culoarea unei linii . Ca valoare atribuită se
poate specifica valoarea hexazecimală a culorii pe care
COLOR dorim să o utilizăm sau poate fi folosit un nume nu este
standard de culoare . Acest atribut este interpretat setat
corect numai de Internet Explorer 3.0 şi variantele mai
recente . Netscape Comunicator va ignora acest atribut

Exemplu:

<HTML>
<HEAD>
</HEAD>
<BODY >
mai jos este o linie aliniata in centru, de latime 50%, grosime 5 pixeli, fara
umbra:<br>
<hr align=”center” width=”50%” size=5 noshade>
</BODY>
</HTML>

Utilizarea listelor:

De multe ori, pentru a prezenta în mod structuat informaţiile, se

impune utilizarea listelor. Limbajul HTML permite definirea mai multor
tipuri de liste şi imbricarea lor ( includerea unor liste în altele ), caz în care
trebuie verificată cu atenţie corespondenţa dintre marcajele de început şi
sfârşit pentru fiecare listă. Dacă elementele listei au legătură între ele, dar nu
este necesar să fie prezentate într-o anumită ordine, se utilizează listele
neordonate. Dacă elementele listei sunt într-o anumită ordine şi este necesar
să fie parcurse astfel, se utilizează listele ordonate. Un caz particular îl
reprezintă listele de definiţii, în care intrările sunt formate din două
paragrafe ( unul corespunzător termenului, al doilea, indentat, corespunzător
definiţiei termenului ). Formatarea listelor la afişarea paginii ( introducerea
bulinelor, numerotării etc. ) se face de către programul de navigare.
Elementele listelor se introduc între marcajele <LI> … </LI> ("list
item"). Modul de apariţie al elementelor depinde de tipul de listă în care sunt
incluse ( cu buline, numerotate etc. ), determinat de marcajul specific .
Astfel, listele pot fi:
 neordonate ( cu buline ) - delimitate de marcajele <UL> … </UL>
("unordered list"); elementele lor se afişează cu buline;
 ordonate ( numerotate ) - delimitate de marcajele <OL> … </OL>
("ordered list"); elementele lor se vor numerota;
 de tip meniu - delimitate de marcajele <MENU> … </MENU>;
elementele acestor liste apar într-o reprezentare compactă pe ecran
( multicoloană );
 glosare ( liste de definiţii ) delimitate de marcajele <DL> … </DL>
( "definition list" ); elementele acestora au câte două componente,
introduse respectiv cu marcajele <DT> ( pentru nume ) si <DD>
( pentru semnificaţia asociată );
 tabele scurte - create cu marcajul <DIR>;

Listele utilizate cel mai frecvent sunt cele ordonate şi neordonate.

Exemplu:

<HTML>
<HEAD>
</HEAD>
<BODY >
Exemplu de lista neordonata:

<UL> prima lista neordonata create:

<LI>elementul x
<LI>elementul y
<LI>elementul z
</UL>
</BODY>
</HTML>