Proiectare Site si Web Design - 

Ce este HTML?

Origini
Unul din primele elemente, fundamentale de altfel, ale WWW (World Wide Web) este HTML (HyperText Markup
Language), standard ce descrie formatul primar in care documentele sint distribuite si vazute pe Web. Multe din
trasaturile lui, cum ar fi independenta fata de platforma, structurarea formatarii si legaturile hipertext, fac din el un
foarte bun format pentru documentele Internet si Web. Primele specificatii de baza ale Web-ului au fost HTML,
HTTP si URL.
Menire si semnificatii
HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. HTML este un limbaj bazat pe SGML
(Standard Generalized Markup Language), o asa-numita aplicatie a acestuia. SGML este un standard
international (ISO-8879) aprobat în 1986. HTML a fost initial vazut ca o posibilitate pentru fizicienii care utilizeaza
computere diferite sa schimbe intre ei informatie prin mijlocirea Internetului. Erau prin urmare necesare cateva
conditii esentiale: independenta de platforma, posibilitati hipertext si structurarea documentelor. Independenta de
platforma semnifica faptul ca un document poate fi afisat in mod asemanator (sau aproape identic) de computere
diferite (deci cu font, grafica si culori aidoma), lucru vital pentru o audienta numeroasa si extrem de variata.
Hipertext se traduce prin faptul ca orice cuvint, fraza, imagine sau element al documentului vazut de un utilizator
(client) poate face referinta la un alt document sau chiar la paragrafe din interiorul aceluiasi document, ceea ce
usureaza mult navigarea intre partile componente ale unui document sau intre multiple documente. Structurarea
riguroasa a documentelor permite convertirea acestora dintr-un format in altul precum si interogarea unor baze de
date ingloband aceste documente.
Inceputurile
Nascut în urma cu aproximativ 30 de ani, intr-o tentativa de a rezolva unele probleme ivite la transportul
documentelor intre diferite computere, limbajul hipertext a evoluat incet. In primii ani de evolutie HTML a demarat
lent in principal pentru ca ii lipseau posibilitatile de a reda publicatii electronice profesionale; limbajul permitea
oarece control asupra fonturilor dar nu permitea inserarea graficii. In 1993, NCSA a imbogatit limbajul pentru a
permite inserarea graficii si a construit primul navigator grafic: Mosaic. Au urmat apoi contributii ad hoc ale
diverselor firme care au adus tot felul de adaugiri limbajului HTML astfel incat, in 1994, limbajul parea scapat de
sub control. Urmarea a fost ca la prima conferinta WWW de la Geneva (Elvetia) s-a constituit un grup de
specialisti (HTML Working Group) a carui prima misiune a fost formalizarea HTML, lucru care s-a concretizat in
HTML 2.0. Importanta actiunii acestui grup consta in faptul ca, odata standardizat, limbajul a putut fi apoi extins
intr-un mod mai controlat la alte nivele.
Standardizarea
Standardul oficial HTML este dat de World Wide Web Consortium (W3C), care este afiliat la Internet Engineering
Task Force (IETF). W3C a enuntat cateva versiuni ale specificatiei HTML, printre care si HTML 2.0, HTML 3.0,
HTML 3.2, HTML 4.0 si, cel mai recent, HTML 4.01. In acelasi timp, autorii de browsere cum ar fi Netscape si
Microsoft, au dezvoltat adesea propriile "extensii" HTML in afara procesului standard si le-au incorporat in
browserele lor. In unele cazuri (cum ar fi tagul Netscape), aceste extensii au devenit standarde de facto adoptate
de autorii de browsere. Cînd navigatorul incarca un document HTML, el "citeste" documentul în cautarea tag-
urilor HTML, formateaza textul si imaginea si le afiseaza pe ecran. Este motivul pentru care acelasi document
HTML apare usor diferit cînd este privit utilizand navigatoare diferite. Stadiile prin care trece un standard elaborat
de W3C sînt:
1.     Orice standard isi incepe aventura ca W3C Note.
2.     De aici este preluat de catre un grup particular de lucru (Working Group) si este discutat pana cand se
ajunge la un consens.
3.     In acest moment este publicat ca propunere (Working Draft) si in acest stadiu oricine poate face comentarii.
4.     In momentul în care se obtine o sustinere si un consens suficient de larg, directorul W3C decide daca
specificatia este gata sa devina propunere oficiala de recomandare (Proposed Recommendation).
5.     Urmeaza o perioada de 6 saptamîni în care toti membrii W3C au sansa sa voteze aceasta propunere de
recomandare; votul nu este obligatoriu, putandu-se vota în 4 moduri diferite:
o    da;
o    da, sub rezerva unor imbunatatiri;
o    nu, pana cînd anumite sarcini nu sunt indeplinite;
o    nu, specificatia trebuie abandonata.
6.     Charta W3C stipuleaza necesitatea obtinerii consensului complet, astfel ca fiecare vot trebuie sa fie un da
fara rezerve.
7.     Daca toti pasii anteriori au fost indepliniti, specificatia trebuie aprobata in final de Director si se publica sub
forma unui standard (W3C Recommendation).
 
De ce HTML
Dar de ce a fost preferat HTML pentru publicaţii pe Web, cînd pentru realizarea publicaţiilor electronice există
multe alte tehnologii? Primul motiv este simplitatea. Al doilea este ca permite formatarea textului ASCII cu tag-uri
în format ASCII. Rezultă de aici o compresie buna, suport pentru legaturi hipertext si usurinta in a scrie
navigatoare pentru vizualizarea documentelor.
Varianta 2.0
HTML 2.0, elaborat in Iunie 1994, este standardul pe care ar trebui sa-l suporte toate browserele curente -
inclusiv cele in mod text. HTML 2.0 reflecta conceptia originala a HTML ca un limbaj de marcare independent de
obiectele existente, focalizandu-se pe asezarea lor in pagina, in loc de a specfica exact cum ar trebui sa arate
acestea. Daca doriti sa fiti siguri ca toti vizitatorii vor vedea paginile asa cum trebuie, folositi tagurile HTML 2.0.
Varianta 3.0
Specificatia HTML 3.0, enuntata in 1995, a incercat sa dezvolte HTML 2.0 prin adaugarea unor facilitati precum
tabelele si un mai mare control asupra textului din jurul imaginilor. Desi unele din noutatile HTML 3.0 erau deja
folosite de autorii de browsere, multe nu erau inca oficializate. In unele cazuri, taguri asemanatoare implementate
de autorii de browsere au devenit mai raspandite decat tagurile "oficiale". Specificatia HTML 3.0 a expirat repede,
deci nu mai este un standard oficial in prezent.
Varianta 3.2
In Mai 1996, W3C a scos pe piata specificatia HTML 3.2 , care era proiectata sa reflecte si sa standardizeze
practicile acceptate la scara larga. Deci HTML 3.2 include tagurile HTML 3.0 care erau adoptate de autorii de
browsere precum Netscape si Microsoft plus noi extensii HTML.
Revolutia HTML 4.0, HTML 4.01
In acest moment, HTML 4.0 este larg utilizat si au fost deja publicate specificatiile HTML 4.01. Limbajul HTML da
proiectantilor de pagini web  posibilitatea:
         sa publice documente cu headere, texte, tabele, liste, fotografii, etc...
         sa regaseasca on-line informatii prin intermediul hiperlink-urilor accesate printr-un simplu click de mouse
         sa proiecteze formulare pentru realizarea tranzactiilor cu servere aflate la distanta, pentru cautari de
informatie sau pentru activitati specifice comertului
         sa includa foi de calcul tabelar, clipuri video, sunete si alte aplicatii direct în documente.
Elementul esential diferit adus de versiunea 4.0 si mai ales 4.01 fata de versiunea 3.2 este posibilitatea separarii
structurii unui document de prezentarea lui prin introducerea „stilurilor de documente“ (style sheet). Utilizînd
limbajul HTML pentru structurarea unui document si style sheet-urile pentru a stiliza prezentarea acestuia,
proiectantii pot obtine mult mai usor independenta de periferic/ computer/ platforma hard-soft, lucru care a facut
HTML-ul atît de popular. Un document cu o structura complexa poate fi prezentat in diferite moduri pe medii
diferite, permitand documentului insusi sa se adapteze mai usor noilor tehnologii (cum ar fi, de exemplu,
browserele capabile sa vorbeasca, cititoarele braille, etc...). 

In plus, separarea continutului de partea de prezentare permite modificarea infatisarii chiar a unui intreg site doar
prin modificarea unui style-sheet (a unui document care descrie stilul). Experienta a demonstrat ca o astfel de
abordare poate reduce dramatic costurile de deservire a unui spectru larg de platforme si probleme, facilitînd si o
intretinere ulterioara si modificari mult mai usoare.
  

Proiectare Site si Web Design - Standardul HTML

Fundamente HTML

Orice document HTML incepe cu notatia <html> si se termina cu notatia </html>. Astfel de perechi de marcaje

sau etichete (acolo unde sunt perechi) se numesc in literatura de specialitate TAG-uri. Prin conventie, toate
marcajele HTML incep cu o paranteza unghiulara deschisa "<" si se termina cu o paranteza unghiulara inchisa
">". Marcajele dintre aceste paranteze transmit comenzi catre browser pentru a afisa pagina intr-un anumit mod.
Unele blocuri prezinta delimitator de sfarsit de bloc, in timp ce pentru alte blocuri acest delimitator este optional
sau chiar interzis. 

Intre cele doua marcaje <html> si </html> vom introduce doua sectiuni:
- sectiunea de antet: <head>...</head> 
- corpul documentului: <body>...</body>
Blocul <body>...</body> cuprinde continutul propriu-zis al paginii HTML, adica ceea ce va fi afisat in ferastra
browser-ului. Un marcaj poate fi scris atat cu litere mici, cat si cu litere mari. De exemplu <BODY> = <BodY> =
<body>. Caracterele "spatiu" si "CR/LF" ce apar intre taguri sunt ignorate de catre browser.

Un prim document HTML ar fi ceva de genul acesta:

<h t ml>
<h ea d > </ h ea d >  
<b od y> </b o d y>  
</ h t ml>
Asa arata primul document HTML. Copiati-l folosind Copy/Paste intr-un fisier nou si salvati-l ca PRIM.HTM sau
PRIM.HTML. Apoi porniti Netscape Navigator sau Internet Explorer, dati CTRL-O si introduceti calea spre fisier.
Dati OK si... nimic. Este normal, deoarece fisierul HTML din exemplul anterior nu incorporeaza text util.
Vom adauga primele elemente de text 

In primul rand, titlul unei pagini se obtine inserand in sectiunea <head>...</head> urmatoarea linie:
<t it le >A ce a st a est e t it lu l p rime i me le p ag in i d e We b </t it le >
In plus, in sectiunea <body>...</body> putem scrie texte cat dorim. Daca nu intalnim nici un marcaj "<" sau ">",
atunci interpretorul HTML le va lua ca texte simple si le va afisa pe ecran. Sa vedem o noua ve rs i une a
pa gi nii noas tre :
<h t ml>
<h ea d >
<t it le >A ce a st a est e p rima me a p ag in a d e We b </ t it le >
</ h ea d >
<b od y>
B ine a t i ve n it in pa g ina mea d e We b!  
</ b od y>
</ h t ml>
Continutul blocului <title>...</title> va aparea in bara de titlu a ferestrei browser-ului. Daca acest bloc lipseste
intr-o pagina HTML, atunci in bara de titlu a ferstrei browser-ului va aparea numele fisierului.
Trecerea pe o linie noua - se face in HTML cu o comanda explicita, care trebuie sa apara in codul sursa html.
Aceasta comanda este marcajul <br> (de la "line break" - intrerupere de linie). Folosind aceleasi operatii ca mai
sus, vizualizati noua pagina. Veti vedea textul ce apare in fereastra browserului. In plus, pagina dvs. va avea un
titlu nou, cel introdus de dvs.. Ex . :
<h t ml>
<h ea d >
<t it le > t it lu l p ag in ii</ t it le >
</ h ea d >
<b od y> B in e a t i ve n it in <b r> pa g in a mea de Web !  
</ b od y>
</ h t ml>
Culoarea de fond

O culoare poate fi precizata in doua moduri:

1. Printr-un nume de culoare. Sunt disponibile cel putin 16 nume de culori: aqua, black, fuchsia, gray, green lime,
maroon, navy, olive, purple, red, silver, teal, white si yellow. 
2. Prin constructia "#RRGGBB" unde R(red), G(green), sau B(blue) sunt cifre hexazecimale si pot lua valorile: 0,
1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot defini astfel 65536 de culori.
Culoarea fundalului unei pagini se precizeaza prin intermediul unui atribut al tagului BODY. mai exact
cu atributul"bgcolor" din cadrul etichetei <body>. De e xe mpl u:  <b od y b gco lo r = cu lo a re > .
Culoarea textului

Acest lucru se seteaza prin intermediul atributului "text" al tagului BODY, dupa sintaxa <body text=culoare>. I n
urma torul ex empl u  textul are culorea rosie:
<h t ml>
<h ea d >
<t it le >cu lo a re t e xt u lu i </ t it le >
</ h ea d >
<b od y t e xt =re d >
Un te xt de cu lo a re ro sie .  
</ b od y>
</ h t ml>
O eticheta poate avea mai multe atribute. 

De exemplu, o eticheta cu trei atribute arata astfel: <e t ich e ta a t ribu t1 = va loa re 1 at rib ut 2 = va lo a re2
a t ribu t 3 = va lo a re3 > . Urma torul e xe mpl u  prezinta o pagina cu fondul de culoare albastra si textul de
culoare galbena:
<h t ml>
<h ea d >
<t it le >a t rib u te mu lt ip le </ t it le >
</ h ea d >
<b od y b gco lo r=b lu e t e xt =ye llo w>
Fo nd de cu lo a re a lba st ra si te xt de cu lo a re g a lb en a .  
</ b od y>
</ h t ml>
Textul afisat este caracterizat de urmatoarele atribute: Marime (font size) - aici implicita, Culoare (font color) -
aici implicita, Font (font family) - aici implicit.
Pozitionarea continutului paginii Web fata de marginile ferestrei browserului se poate face cu ajutorul a
doua atribute ale etichetei <body>:
1. "Leftmargin"  (stabileste distanta dintre marginea stanga a ferestrei browserului si marginea stanga a
continutului paginii); 
2. "Topmargin" (stabileste distanta dintre marginea de sus a ferestrei browserului si marginea de sus a
continutului paginii);
<h t ml>
<h ea d >
<t it le >Co n f igu ra re a t e xtu lu i si sta b ilire a ma rg in ii </ t it le >
</ h ea d >
<b od y le f t ma rg in ="1 0 0 " t op ma rg in ="5 0 ">
Te xtu l a re at rib ut e imp licit e .   <b r><b a sef o nt st yle ="A ria l" co lo r="b lu e " size ="6 ">
Te xtu l e ste scris cu fo nt u l "A ria l", cu loa re a lba st ru si ma rime 6. </ bo d y>
</ h t ml>
Stiluri pentru blocurile de text

Pentru ca un bloc de text sa apara in pagina evidentiat (cu caractere aldine), trebuie inclus intre
tagurile <b>...</b> (b vine de la "bold" = indraznet ).
 
Pentru ca un text sa fie scris cu carcatere cursive acesta trebuie inclus intr-un bloc delimitat de
tagurile <i>...</i> (i vine de la "italic").
 
Pentru a insera secvente de text ca indice (sub-script) sau ca exponent (super-script), aceste fragmente trebuie
delimitate de tagurile _..., respectiv ^....
 
Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele <u>...</u> (u vine de la "underline").
 Proiectare Site si Web Design - Standardul HTML
Fonturi in HTML

Un font este un text caracterizat de urmatoarele atribute:

1. Culoare (stabilita prin atributul "color"); 
2. Tipul sau stilul (stabilit prin atributul "face"); 
3. Marimea (definita prin atributul "size"); 
4. Marimea in puncte tipografice (stabilita prin atributul "point-size"); 
5. Grosime (definita prin atributul "weight").
Toate aceste atribute apartin etichetei <font>, care permite inserarea de blocuri de texte personalizate.
Culori

O culoare poate fi precizata in doua moduri:

1. printr-un nume de culoare. 
2. printr-o constanta conform standardului de culoare RGB (Red, Green, Blue). O astfel de constanta se formeaza
astfel: #rrggbb, unde r, g si b sunt cifre hexazecimale.
Culorea fontului

Pentru a scrie un fragment de text cu caractere de o anumita culoare, se incadreaza acest fragment intre
marcajele de font, avand stabilit atributul color la valoarea necesara.
Familia fontului

Pentru a scrie un text intr-o pagina pot fi folosite mai multe fonturi (stiluri de caractere). Exista cinci familii
generice de fonturi care sunt de regula disponibile pe toate calculatoarele utilizatorilor: "serif", "sans serif",
"cursive", "monospace" si "fantasy". Tipul de font necesar poate fi stabilit prin atributul "face" al etichetei. Pot fi
introduse mai multe fonturi separate prin virgula. In acest caz browserul va utiliza primul font pe care il cunoaste.
Marimea fontului

Pentru a stabili marimea unui font se utilizeaza atributul size al etichetei. Valorile acestui atribut pot fi:
1. 1, 2, 3, 4, 5, 6, 7 (1 pentru cel mai mic font si 7 pentru cel mai mare); 
2. +1, +2, etc. pentru a mari dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta; 
3. -1, -2, etc. pentru a micsora dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta.

Proiectare Site si Web Design - Standardul HTML

Blocuri de Text

Tagurile care definesc blocuri de text nu se refera la particularitatile caracterelor ce compun textul, ci la functiile
pe care le poate avea un bloc de text in cadrul paginii Web. Etichetele care lucreaza cu blocuri de text produc
automat trecerea la un rand nou si adaugarea unui spatiu suplimentar.
Identarea unui bloc

Pentru ca un bloc de text sa fie indentat (marginea din stanga a textului sa fie deplasata la dreapta la o anumita
distanta fata de marginea din stanga a paginii), acesta trebuie inclus intre
etichetele <blockquote>...</blockquote>, as tfe l :
<h t ml>
<h ea d >
<t it le > I nd e nt a rea u nu i b lo c</ t it le >
</ h ea d >
<b od y>
Te xtu l ce u rme a za e ste ind e nt a t: <b lo ckqu o te >B lo c d e te xt ide n ta t </ b lo ckq uo t e >
</ b od y>
</ h t ml>
Intr-un fisier HTML, caracterele "<" si ">" au o semnificatie speciala pentru browser. Ele incadreaza comenzile si
atributele de afisare a elementelor intr-o pagina. Daca dorim ca un fragment de text sa contina astfel de
caractere, acest fragment trebuie incadrat de una dintre perechile de etichete:
1. <xmp>...</xmp> (80 de caractere pe rand); 
2. <listing>...</listing> (120 de caractere pe rand).
Aceste marcaje interpreteaza corect (ca text afisabil in browser) caracterele "spatiu", "eticheta" si "CR/LF". Textul
afisat in pagina este monospatiat. E xe mpl u:
<h t ml>
<h ea d >
<t it le > xmp si list in g </ t it le >
</ h ea d >
<b od y>
Un f isie r ht ml st an d a rd a rat a ast fe l: <xmp > <ht ml>
<h ea d >
<t it le > </ t it le >
</ h ea d >
<b od y>
O pa g in a Web . ..
</ b od y>
</ h t ml> </ xmp > </ bo d y>
</ h t ml>
Blocuri paragraf

Etichetea paragraf <p> face posibila trecerea la o linie noua si permite:

1. inserarea unui spatiu suplimentar inainte de blocul paragraf; 
2. inserarea unui spatiu suplimentar dupa blocul paragraf, daca se foloseste delimitatorul </p> (acesta fiind
optional); 
3. alinierea textului cu ajutorul atributului "align", avand valorile posibile "left", "center" sau "right".
E xe mpl u:
<h t ml>
<h ea d >
<t it le > B lo cu ri pa ra g ra f </ t it le >
</ h ea d >
<b od y>
P rima lin ie  
<p > L in i ge ne ra ta d e u n p a ra g raf (imp licit pa ra g ra f u l est e a lin ia t la sta n ga ).
<p a lign ="rig h t "> P a rag ra f alin ia t la d rea p ta .  
<p a lign ="ce n t e r"> Pa rag ra f a lin ia t in ce nt ru .
</ b od y>
</ h t ml>
Blocuri de titlu

Intr-un text, titlurile (headers) de capitole pot fi introduse cu ajutorul

etichetelor <H2>. <H3>, <h3>, <h4>, <h5>, <h6>. Toate aceste etichete se refera la un bloc de text si trebuie
insotite de o eticheta de incheiere similara. Aceste etichete accepta atributul "align" pentru alinierea titlului blocului
de text la stanga (in mod prestabilit), in centru si la dreapta. Tag-ul "H2" permite scrierea unui titlu cu caractere
mai mari si aldine, pe cand <h6> foloseste caracterele cele mai mici.Ex e mpl u:
<h t ml>
<h ea d >
<t it le > B lo cu ri de t it lu </ t it le >
</ h ea d >
<b od y>
<H2 a lig n ="ce nt e r"> Tit lu de ma rime 1 a lin iat in ce n t ru </ H2 >  
<H3 a lig n ="rig h t "> Tit lu d e ma rime 2 a lin ia t la d rea p ta . </ H3 >  
<h 4 > Tit lu de ma rime 4 a lin iat la st a ng a (imp licit ) </h 4 >  
</ b od y>
</ h t ml>
Linii orizontale

Intr-o pagina Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul etichetei <hr>. Pentru a configura
o linie orizontala se utilizeaza urmatorele atribute ale etichetei <hr>:
1. "align" ce permite alinierea orizontala a liniei. Valorile posibile sunt "left" ,"center" si "right"; 
2. "width" permite alegerea lungimii liniei; 
3. "size" permite alegerea grosimii liniei; 
4. "noshade" cand este prezent defineste o linie fara umbra; 
5. "color" permite definirea culorii liniei.
E xe mpl u:
<h t ml>
<h ea d >
<t it le > L in ii o rizon t a le </ t it le >
</ h ea d >
<b od y>
<H2 a lig n ="ce nt e r"> Tipu ri de lin ii o rizon t a le </ H2 > O lin ie imp licit a , a lin ie re st an g a, la t ime
1 00 %, g ro sime 2 cu umb ra .  
<h r>
Urme a za o lin ie a lin ia t a in ce n t ru, d e la t ime 50 %, g ro sime 5 p ixe li, f a ra u mb ra .  
<h r a lig n ="ce nt e r" widt h ="5 0 %" size ="5 " no sha de >Urme a za o lin ie a lin iat a la d rea p ta , de
la t ime 15 0 d e p ixe li, g ro sime 1 2 p ixe li, d e cu loa re ro sie.  
<h r a lig n ="rig h t " wid t h =15 0 size =1 2 co lo r="re d ">  
</ b od y>
</ h t ml>
Blocuri CENTER

Blocul introdus de etichetele <center>...</center> aliniaza centrat toate elementele pe care le

contine. E xe mpl u:
<h t ml>
<h ea d >
<t it le > L in ii o rizon t a le </ t it le >
</ h ea d >
<b od y>
<ce n te r> <h r wid th =1 0 %> <h r wid th =4 0 %> <h r wid t h =70 %> <h r wid t h =10 0 %> <h r
wid t h =70 %> <h r wid t h =40 %> <h r widt h =1 0 %> </ ce n te r>  
</ b od y>
</ h t ml>
Blocuri DIV

Modalitatea cea mai eficienta de delimitare si de formatare a unui bloc de text este folosirea
delimitatorilor <div>...</div>. Un parametru foarte foarte util pentru stabilirea caracteristicilor unui bloc <div>
(diviziune) este "align" (aliniere).Valorile posibile ale acestui parametru sunt:
1. "left" (aliniere la stanga); 
2. "center" (aliniere centrala); 
3. "right" (aliniere la dreapta).
Un bloc <div>...</div> poate include alte subblocuri. In acest caz, alinierea precizata de atributul align al blocului
are efect asupra tuturor subblocurilor incluse in blocul <div>. Un bloc <div>...</div>
admite atributul "nowrap" care interzice intreruperea randurilor de catre browser la afisare.
E xe mpl u de uti l i za re a ta gul ui DI V :
<h t ml>
<h ea d >
<t it le >B lo cu l DIV </ t it le >
</ h ea d >
<b od y>
A cea sta lin ie est e o lin ie no rma la . Urma to ru l b lo c e ste a lin iat la d re ap t a.  
<d iv a lig n ="rig h t ">
O sing u ra lin ie . O sin g u ra lin ie . O sin gu ra lin ie . O sin gu ra lin ie . <b r>
O sing u ra lin ie . O sin g u ra lin ie . O sin gu ra lin ie . O sin gu ra lin ie . <b r>
O sing u ra lin ie . O sin g u ra lin ie . O sin gu ra lin ie . O sin gu ra lin ie . <b r>
</ d iv>
<d iv a lig n ="ce nt e r">
B lo c alin ia t pe ce nt ru . B lo c a lin ia t p e cen t ru . <b r>
B lo c alin ia t pe ce nt ru . B lo c a lin ia t p e cen t ru . <b r>
B lo c alin ia t pe ce nt ru . B lo c a lin ia t p e cen t ru . <b r>
</ d iv>  
</ b od y>
</ h t ml>

Proiectare Site si Web Design - Standardul HTML

Lucrul cu Imagini

Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptate de browsere pentru fisierele imagine
sunt:
1. GIF (Graphics Interchange Format) cu extensia .gif; 
2. JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg; 
3. XPM (X PixMap) cu extensia .xmp; 
4. XBM (X BitMap) cu extensia .xbm; 
5. BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer); 
6. TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;
Cele mai raspandite formate sunt GIF (8 biti pentru o culoare, 256 culori posibile) si JPEG (24 biti pentru o
culoare, 16777216 de culori posibile).
Adresa URL a unei imagini

URL ("Uniform Resource Locator" = identificator unic al resursei) este un standard folosit in identificarea unica a
unei resurse in Internet. Toate imaginile cu care vom lucra vor avea adresa URL exprimata in functie de directorul
ce contine documentul HTML care face referire la imagine. 

Pentru a insera o imagine intr-o pagina, se utilizeaza eticheta <img> (de la "image"= imagine). 

Pentru a putea identifica imaginea care va fi inserata se utilizeaza un atribut al etichetei <img> si
anume "src" (de la "source"= sursa). Daca imaginea se afla in acelasi director cu fisierul HTML care face referire
la imagine, atunci adresa URL a imaginii este formata numai din numele imaginii, inclusiv extensia. Daca
imaginea se afla intr-un subdirector al directorului paginii HTML din care este apelata, sa spunem "images",
atunci aceasta este apelata cu URL-ul:"/ ima g e s/ imag in e1 . jp g " . In schimb, daca fisierul imagine este situat
intr-un director "images" dintr-un super director al directorului paginii HTML apelante, referirea se face cu URL-
ul: ". . / imag e s/ imag in e1 . jp g " . E xe mpl u:
<h t ml>
<h ea d >
<t it le > O pa g ina cu ima g ine </ t it le >
</ h ea d >  
<b od y>
O pa g in a ca re con t ine o ima g in e in su b d ire cto ru l ima ge s d int r- un su p e r d ire ct o r a l u nu i
sup e rd ire cto r al d ire cto ru lu i pa g in ii HTML
<img src=". . / . ./ ima g e s/ ima g in e1 . jpg ">Te xt d up a imag in e.
</ b od y>
</ h t ml>
Chenarul si dimensionarea unei imagini

Daca doriti sa adaugati un chenar in jurul imaginii, folositi atributul "border" al etichetei <img>. Valorile acestui
atribut sunt numere intregi pozitive. 
O imagine are anumite dimensiuni pe orizontala si verticala, stabilite in momentul crearii ei. Daca nu se cere altfel,
aceste dimensiuni sunt respectate in momentul afisarii ei in browser, in cadrul paginii web. Dimensiuniile
prestabilite ale unei imagini pot fi modificate la afisarea in browser prin
intermediul atributelor "width" si "height" setate de proiectant in codul HTML al paginii la valorile dorite. S pre
e xe mpl u:
<h t ml>
<h ea d >
<t it le > I ma g ine cu che n a r si ma rit </ t it le >
</ h ea d >  
<b od y>
O ima g in e cu che na r si d e 2 00 p ixe li X 15 %
<img src="/ ima g e s/ imag in e1 . jp g " bo rd e r="5 " widt h ="3 5 0 " he ig ht ="2 5 %"> Te xt d up a ima g ine .
</ b od y>
</ h t ml>
Alinierea unei imagini

Alinierea unei imagini se poate face prin intermediul atributului "align" care poate lua urmatorele valori:
1. "left" - aliniere la stanga; celelalte componente sunt dispuse pe partea dreapta; 
2. "right" - aliniere la dreapta; celelalte componente sunt dispuse pe partea stanga; 
3. "top" - aliniere deasupra; partea de sus a imaginii se aliniaza cu partea de sus a textului ce precede imaginea; 
4. "middle " - aliniere la mijloc; mijlocul imaginii se aliniaza cu linia de baza a textului ce precede imaginea. 
5. "bottom" - aliniere la baza; partea de jos a imaginii se aliniaza cu linia de baza a textului.
E xe mpl u:
<h t ml>
<h ea d >
<t it le > A lin ie re a u ne i ima g in i</ t it le >
</ h ea d >  
<b od y>
A lin ie ri:
<b r> Pe ve rt ica la :
<img src="/ ima g e s/ img1 . jp g " a lign ="t o p ">
L a mijlo c: <img src="/ ima g e s/ img 1. jp g " a lign ="mid d le ">
Jo s: <img src="/ ima g e s/ img 1. jp g " a lign ="b o t to m"> Te xt du pa imag in e .
</ b od y>
</ h t ml>
Alinierea textului in jurul imaginii

Atributele "hspace" si "vspace" precizeaza distanta in pixeli pe orizontala, respectiv pe verticala, dintre imagine

si restul elementelor din pagina. Atributul "alt" admite ca valoare un text care va fi afisat in locul imaginii, in
functie de setarile browserului utilizatorului:
<h t ml>
<h ea d >
<t it le > A lin ie re a t e xt u lu i</ t it le >
</ h ea d >  
<b od y>
<h 4 >I ma g in e a lin ia t la st an ga in con ju ra ta de te xt la d ista n ta d e 3 0 de p ixe li.
</ h 4 ><p > Te xt in a int e de imag in e . Te xt ina in te d e ima g ine . Te xt ina in t e d e ima g ine . Te xt
in a int e de imag in e. Te xt in a int e de imag in e . Te xt ina in te d e ima g ine . Te xt ina in t e d e
ima g ine . Te xt in a int e de imag in e .
<img src=". . / ima ge s/ img 1 . jpg " a lig n ="le f t " h sp a ce ="3 0 " vsp a ce ="3 0 " a lt ="Un ive rsit a t e a de
No rd Ba ia Ma re ">
Te xt d up a imag in e. Te xt du pa imag in e . Te xt du pa ima g in e . Te xt du pa ima g ine . Te xt d up a
ima g ine . Te xt d up a ima g ine . Te xt d up a ima g in e. Te xt d up a imag in e. Te xt du pa imag in e . Te xt
d up a ima g in e.
</ b od y>
</ h t ml>
Imagini pentru fondul unei pagini

O imagine poate fi utilizata pe post de fundal al unei pagini Web. In acest scop se
foloseste atributul "background" al etichetei <body>, avand ca valoare adresa URL a imaginii. Imaginea se
multiplica pe orizontala si pe verticala pana umple intregul ecran. De e xe mpl u:
<h t ml>
<h ea d >
<t it le > P ag in a cu ima g in e de fo nd </ t it le >
</ h ea d >
<b od y b ackg rou n d =". . / ima ge s/ img 1. jp g ">
1 <b r>2 <b r>3 <b r>4 <b r> 5 <b r>6 <b r>7 <b r>8 <b r> 9 <b r> </b od y>
</ h t ml>
Imagini folosite ca legaturi

O legatura (link) introduce in pagina Web o zona activa. Efectuand click cu butonul mouse-ului pe aceasta zona,
in browser se va incarca o alta pagina. Pentru a utiliza imaginea "legatura.jpg" drept legatura catre pagina
index.html utilizam sintaxa: 

<a h ref ="in d e x.h t ml">< img src= ". . / . ./ ima g e s/ img 1 . jpg "></ a >  

In mod prestabilit, imaginea utilizata pe post de zona activa este inconjurata de un chenar avand culoarea unei
legaturi. Daca stabilim pentru atributul "border" al etichetei <img> la 0, acest chenar dispare. Ex e mpl u:
<h t ml>
<h ea d >
<t it le > I ma g in i fo lo site ca le ga t u ri</ t it le >
</ h ea d >
<b od y"><h 4 >I ma g in i f o lo site ca le ga t u ri</ h 4 >
Te xt in a int e de imag in e . <a h re f ="in d e x. h t ml"><i mg src=". . / . . / ima g e s/ img 1 . jpg "></ a >  
Te xt d up a imag in e.
</ b od y>
</ h t ml>

Proiectare Site si Web Design - Standardul HTML

Legaturi in HTML

Lagaturile (link-urile) reprezinta partea cea mai importanta a unei pagini Web. Ele transforma un text obisnuit in
hipertext sau hiperlegatura, care permite trecerea rapida de la o informatie aflata pe un anumit server la alta
informatie memorata pe un alt server aflat oriunde in lume. Legaturile sunt zone active intr-o pagina Web, adica
zone de pe ecran sensibile la apasarea butonului stang al mouse-ului.
Legaturi intre pagini aflate in acelasi director

O legatura de pe o pagina catre o alta aflata in acelasi director se formeaza cu ajutorul etichetei <a> (de la
"anchor"= ancora). Pentru a preciza pagina indicata de legatura se utilizeaza un atribut al etichetei <a> numit
"href", care ia ca valoare numele fisierului HTML aflat in acelasi director. Zona activa care devina sensibila la
apasarea butonului stang al mouse-ului este formata din textul cuprins intre etichetele <a> si </a>. Prezenta
etichtetei de sfarsit </a> este obligatorie. E xe mpl u:
<h t ml>
<h ea d >
<t it le > Co mu t a re a int re d ou a p ag in i</ t it le >
</ h ea d >  
<b od y>
<h 3 >P ag in a 1 </h 3 >
<a h ref ="p a g ina _ 2. h t ml">
L in k ca t re p ag in a 2 </a >
</ b od y>
</ h t ml>
Legaturi intre pagini aflate pe acelasi disc local

Daca pagina referita se afla pe acelasi disc local cu pagina care face referirea dar intr-un alt director, atunci,
pentru a preciza pozitia ei in structura de directoare se poate folosi adresarea relativa, dupa c um
urmea za  (se mentine analogia cu adresarea relativa a imaginilor):
<h t ml>
<h ea d >
<t it le > Co mu t a re a int re d ou a p ag in i af la te pe ace la si d isc lo ca l</ t it le >
</ h ea d >  
<b od y>
<h 3 >P ag in a 3 </h 3 >
<a h ref =". . / . . /e xe mp le/ list / e xe mp lu _1 1 .h t ml">L in k ca t re o p ag ina cu list e </ a >
</ b od y>
</ h t ml>
O legatura catre un site particular

In exemplul urmator se utilizeaza adresa URL www.netscape.com care incarca pagina de start din site-ul firmei
Netscape Corporation:
<h t ml>
<h ea d >
<t it le > L in k ca t re site - ul f irme i Ne t scap e </ t it le >
</ h ea d >  
<b od y>
<h 3 >L in k ca t re sit e -u l f irme i Ne t sca p e </ h 3 >
<a h ref ="h t t p :/ / www. n e t sca pe . co m">Ne t sca pe Co rpo ra t ion </ a >
</ b od y>
</ h t ml>
Ancore

Intr-o pagina foarte lunga pot exista puncte de reper catre care se definesc legaturi. O ancora se defineste de
asemenea prin eticheta <a>. Pentru a defini ancora se utilizeaza atributul "name" care primeste ca valoare un
nume atribuit ancorei (de exemplu "leg1"). Pentru a insera o legatura catre "leg1" definita in aceeasi pagina, se
utilizeaza eticheta <a> avand atributul "href" la valoarea "#leg1". Pentru a introduce o legatura catre o ancora
definita in alta pagina aflata in acelasi director, atributul "href" primeste de data aceasta o valoare de
forma"nu me _ f isie r.h t ml# n u me _ an co ra " . E xe mpl u:
<h t ml>
<h ea d >
<t it le > A n co re de f in ite in ace la si do cu me n t si in a lt d ocu me nt </ t it le >
</ h ea d >  
<b od y>
<h 3 >A n co re de f in ite in a ce la si d o cu me nt si in a lt d ocu men t </ h3 >
<a h ref ="# a n co ra 1 ">L in k cat re a nco ra 1 </ a >
<a h ref =". . / . . / leg at u ri. h t ml#a n c">L in k cat re o a n co ra d in a lt d o cu me nt </ a >
<b r> 1 <b r>2 <b r>3 <b r>4 <b r >5
<a n a me ="a n co ra1 ">A n co ra 1
</ b od y>
</ h t ml>

Legaturi catre fisiere oarecare

O pagina Web poate contine legaturi catre orice tip de fisiere aflate pe orice servere din Internet. Pentru aceasta
se utilizeaza eticheta <a> avand valoarea atributului "href" egala cu adresa URL a fisierului destinatie. Atunci
cand se efectueaza clic pe legatura din exemplul urmator, browserul deschide o caseta de dialog intitulata "File
download" care permite:
1. sa salvati pe discul local fisierul; 
2. sa lansati in executie aplicatia capabila sa interpreteze corect fisierele de tipul respectiv.
E xe mpl u:
<h t ml>
<h ea d >
<t it le > L eg a tu ri ca t re f isie re oa re ca re </t it le >
</ h ea d >  
<b od y>
<h 3 >Le g at u ri ca t re f isie re oa re ca re </ h 3 ><b r>  
<a h ref ="f isie r. zip ">  
L in k ca t re f isie ru l f isie r. zip  
</ b od y>
</ h t ml>

Proiectare Site si Web Design - Standardul HTML

Liste in HTML

Unul din cele mai obisnuite elemente din documentele cu mai multe pagini este un set de definitii, referinte sau
indexuri. Glosarele sunt exemple clasice in acest sens; cuvintele sunt listate in ordine alfabetica, urmate de
definitii ale termenilor respectivi. In HTML, intreaga sectiune a unui glosar va fi gestoinata printr-o lista de definitii
care este inclusa intr-o pereche de marcaje de tip lista de definitii: <dl>...</dl> (de la "definition list" = lista de
definitii).
Observatii:
- Un termen al listei este marcat de eticheta <dt> (de la "definition term"= termen definit); 
- Definitia unui termen este initiata de eticheta <dd> (de la "definition description"= descrierea definitiei); 
- Definitia unui termen incepe pe o linie noua si este identata;
E xe mpl u:
<h t ml>
<h ea d ><t it le >list e x_ 1 </ t it le ></ he a d >
<b od y><H2 a lign =ce nt e r>O list a de de f in it ii</ H2 ><h r>
<d l>
G lo sa r de t e rme n i de Wo rld Wid e We b  
<d t ><b >h yp e rte xt </ b >  
<d d >- o int e rcon e cta re We b d e in fo rma t ii de t ip te xt , in ca re o rice cu va nt sau f ra za po at e
f a ce leg a tu ra cat re un a lt p un ct d in do cu me n t sa u ca t re u n a lt do cu me n t  
<d t ><b >d a te </ b >  
<d d >- f lu xu l ne sf a rsit d e ma te ria le ca re a pa r p e I nt e rne t , sp re de ose b ire de in f o rma t ii ca re
sun t da te cu un a nu mit in te le s sau va lo a re  
<d t ><b >in f o rma t ie </ b >  
<d d >- su b -se t u l de da te ca re a re e fe ct iv se mn if ica t ie si ca re e st e ut il la mo men t u l cu re nt  
</ d l>  
</ b od y>
</ h t ml>
Liste neordonate

O lista neordonata este un bloc de text delimitat de etichetele corespondente <ul>...</ul> ("ul" vine de la

"unordered list"= lista neordonata). Fiecare element al listei este initiat de eticheta <li> (list item). Lista va fi
indentata fata de restul paginii Web si fiecare element al listei incepe pe un rand nou. E xe mpl u:
<h t ml>
<h ea d ><t it le >list e x_ 2 </ t it le ></ he a d >
<b od y><H2 a lign =ce nt e r>O list a ne o rdo na t a </ H2 ><h r>  
G lo sa r de t e rme n i Wo rld Wide We b  
<u l>Cu lo ri u zu a le d ispo n ib ile prin n u me  
<li>B la ck <li>Wh it e <li>Re d <li>G re e n <li>B lu e <li>Y e llo w <li>P u rp le <li>A q u a  
</ u l>  
</ b od y>
</ h t ml>
Tag-urile <ul> si <li> pot avea un atribut " type" care sabileste caracterul asfisat in fata fiecarui element al listei.
Valorile posibile al acestui atribut sunt:
1. "circle" (cerc);
2. "disc" (disc plin) - valoarea implicita;
3. "square" (patrat);
Listele neordonate pot fi imbricate pe mai multe niveluri, ca in ex empl ul urma tor:
<h t ml>
<h ea d ><t it le >list e x_ 3 </ t it le ></ he a d >
<b od y><H2 a lign =ce nt e r>O list a ne o rdo na t a d e list e ne o rdo na t e </ H2 ><h r>  
G lo sa r de t e rme n i de Wo rld Wid e We b  
<u l>E le me n te si a t ribu te a un e i p ag in i HTML  
<li>F ra me se t <u l>A t ribu t e : <li>co ls <li>ro ws <li>b o rd e r </u l>  
<li>F ra me <u l>A t rib u te : <li>src <li>n a me <li>scro llin g </ u l>  
</ u l>  
</ b od y>
</ h t ml>
Liste ordonate

O lista ordonata de elemente este un bloc de text delimitat de etichetele corespondente <ol>...</ol> ("ol" vine de
la "ordered list"= lista ordonata). Fiecare element al listei este initiat de eticheta <li> (list item). Lista va fi indentata
fata de restul paginii Web si fiecare element al listei incepe pe un rand nou. E xe mpl u:
<h t ml>
<h ea d ><t it le >list e x_ 4 </ t it le ></ he a d >
<b od y><H2 a lign =ce nt e r>O list a o rd o na ta </ H2 ><h r>  
<o l>Cu lo ri u zu a le d ispo n ib ile prin n u me  
<li>B la ck <li>Wh it e <li>Re d <li>G re e n <li>B lu e <li>Y e llo w <li>P u rp le <li>A q u a  
</ o l>  
</ b od y>
</ h t ml>
Tag-urile <ol> si <li> pot avea un atribut " type" care stabileste tipul de caractere utilizate pentru ordonarea listei.
Valorile posibile sunt:
1. "A" pentru ordonare de tipul A, B, C, D, etc. (litere mari); 
2. "a" pentru ordonare de tipul a, b, c, d, etc. (litere mici); 
3. "I" pentru ordonare de tipul I, II, III, IV, etc. (cifre romane mari); 
4. "i" pentru ordonare de tipul i, ii, iii, iv, etc. (cifre romane mici); 
5. "1" pentru ordonare de tipul 1, 2, 3, 4, etc. (cifre arabe - optiune prestabilita);
Urma torul ex e mpl u  este o lista ordonata cu cifre romane:
<h t ml>
<h ea d ><t it le >list e x_ 5 </ t it le ></ he a d >
<b od y><H2 a lign =ce nt e r>O list a o rd o na ta cu cif re ro ma ne </ H2 ><h r>  
<o l t ype ="I "> Cu lo ri uzu a le d ispo n ib ile p rin nu me  
<li>B la ck <li>Wh it e <li>Re d <li>G re e n <li>B lu e <li>Y e llo w <li>P u rp le <li>A q u a  
</ o l>  
</ b od y>
</ h t ml>  
Ta g -u l <o l> po at e avea u n a t ribu t st a rt ca re sta b ile ste va loa re a in it ia la a se cve n te i d e
o rdo n a re .   V a lo a rea a ce st u i at rib u t t re bu ie sa f ie u n n u ma r in t re g p ozit iv.  
Urma t o ru l e xe mp lu est e o list a o rdo n at a cu lit e re ma ri, in cep a nd cu va loa re a C.  
<h t ml>
<h ea d ><t it le >list e x_ 6 </ t it le ></ he a d >
<b od y><H2 a lign =ce nt e r>O list a o rd o na ta cu lite re ma ri, in ce p an d de la va lo a re a
C</ H2 ><h r>  
<o l t ype ="A " sta rt ="3 "> Cu lo ri uzu a le d ispo n ib ile p rin nu me  
<li>Re d <li>G re e n <li>B lu e <li>Y e llo w <li>P u rp le <li>A q ua  
</ o l>  
</ b od y>
</ h t ml>
Listele ordonate pot fi imbricate intre ele sau cu liste neordonate, ca in ex empl ul urma tor:
<h t ml>
<h ea d ><t it le >list e x_ 8 </ t it le ></ he a d >
<b od y><H2 a lign =ce nt e r>O list a o rd o na ta d e list e o rd on a te si n eo rdo na t e </ H2 ><h r>  
<o l>Un siste m in fo rma t ic in clu de :  
<li>Ha rd wa re :  
<o l>  
<li>p la ca d e b aza  
<li>p ro ce so r  
<li>me mo r ie  
<li>h a rd d isk  
</ o l>  
<li>S o f t wa re :  
<u l>  
<li>L in u x  
<li> Win d o ws  
<li>O S / 2  
<li>Un ix  
</ u l>  
<li>S o f t wa re de ap lica t ie:  
<u l t ype ="d isc">  
<li>V isu a lC+ +  
<li>Ja va  
<li>S Q L  
<li>Co re lD ra w  
</ u l>  
</ o l>  
</ b od y>
</ h t ml>