In exemplul anterior au fost introduse catevatag-uri noi.

Vom incerca sa dam o definitie acesstora,

pentru a putea incepe in lectia urmatoare, adevaratulTutorial HTML.Tag-urile despre care
vorbeam sunt: <ead!, <title!, <"! si <p!.
#xemplul in discutie:
<tml!
<ead!
<title!$agina mea% <&title!
<&ead!
<bod'!
<"!(ine ati venit.<&"!
<p!)oarte curand voi face o pagina care va v-a da pe spate pe toti%<&p!
<&bod'!
<&tml!
<ead!
*cest tag urmea+a imediat dupa <tml! si este folosit pentru a indica bro,ser-ului, informatii
utile precum: titlul pagini, continulul -folosit de motoarele de cautare veci. si multe altele
<title!
/e pune intre <ead! si <&ead!. *cest tag este cel care da numele pagini. 0umele va fi afisat in
bro,ser, de obicei in partea stanga sus. In exemplul anterior titlul era 1$agina mea%1 si va fi afisat
ca si titlul bro,serului.
<"!
*cesta este titlul care apre in pagina, inainte de continut si va fi mai mare decat litera de continut.
<"! inseamna ca e cea de-a doua marime a literei intre cel sase care exista. <2! este cea mai
mare iar <3! va fi cea mai mica.
<p!
#ste tag-ul care marcea+a desciderea si inceerea unui paragraf. *sa ca atunci cand vei incepe
un paragraf asigurate ca ai pus <p! la inceput si <&p!la sfarsit.
4ontinua sa inveti - Tutorial HTML
*cum ca ai inteles ba+a eticetelor in HTML si cum acestea functionea+a, poti sa mergi mai
departe incepand sa citesti sectiunea Tutorial HTML. *ici vei invata toate eticetele si atributele
HTML, cum sa le folosesti si cum sa construiesti o pagina ,eb functionala.
0u te retine sa comente+i acolo unde ai nelamuriri sau pur si simplu ai ceva de adaugat sau
completat.
(ine ai venit in sectiunea detutoriale HTML. *ici vei putea invata limba5ul de programare HTML,
pentru a fi capabil sa reali+a+i propriile tale pagini ,eb.
6aca de5a esti familiari+at cu 7ML, atunci HTML ti se va parea usor de invatat. Va safatuim sa nu
cititi tot acest tutorial dintr-o data, ci sa petreceti un sfert sau o 5umatate de ora parcurgand cateva
capitole dupa care sa practicati. /a luati un pix si o bucata de artie si sa va faceti propria lista de
taguri tmlinvatate pe care sa incercati sa le folositi in contextul unei pagini ,eb
$regatire pentru HTML
4rearea documentelor in HTML nu este dificila. $entru inceput nu vei avea nevoie decat de
notepad si de putina ambitie. 6aca esti nou in domeniul programari si nu ai parcurs inca, 8idul
incepatorului, te sfatuiesc sa petreci cateva minute citindul.
$agini 9eb
$aginile ,eb au multe intrebuintari. *ici sunt explicate cateva dintre argumente:
- 4ea mai simpla cale de a raspandii informatii pe internet
- : alta forma de a-ti amplifica afacerea
- $oti face cunoscut lumi ca ai ceva de spus intr-o pagina personala
$oate forum, un blog, o pagina de pre+entare, sau orice altceva ce iti trece prin cap.
4uvinte de retinut
- Tag - folosit pentru a specifica regiuni ale documentului HTML, pe care le va interpreta ulterior
bro,ser-ul. Tag-urile vor avea aceasta infatisare: <tag!
- #lement - este un tag complet, avand un <tag! de descidere si unul de incidere <&tag!.
- *ttribute - este folosit pentru a modifica valoarea unui element in HTML. 6e obicei un element
are mai multe atribute.
6eocamdata trebuie doar sa retii ca un tag este o comanda pe care bro,ser-ul o interpretea+a, ca
un element este un tag complet iar un atributpersonali+ea+a si modifica un element in HTML.
;rmatoarele tutoriale
$entru tutorialele care urmea+a poti folosii meniul din stanga pentru a parcurge ceea ce te
interesea+a, sau poti citi din scoarta in scoarta apasand butonul 10ext < !1, situat in partea de 5os a
paginii. 0u te retine in a lasa comentarii acolo unde ceva iti este neclar sau pur si simplu ai de
facut o completare articolului.
#lementele HTML au multe ranguri. Tot ceea ce ve+i, paragrafurile, banner-ul de deasupra, lin=-
urile de navigare la dreapta si la stanga paginii, sunt toate elemente ale acestei pagini.
;n element are trei parti: un tag de descidere, continutul elementului si tag-ul de incidere.
- <p! - tag-ul pentru desciderea unui paragraf.
- 4ontinutul elementului - paragraful propriu-+is.
- <&p! - tag-ul de incidere.
>>>0ota:
Toate paginile ,eb vor avea cel putin elementele de ba+a: tml, ead, title sibod'.
<tml!element...<&tml!
;n document HTML intotdeauna va incepe si va termina cu un tag <tml! si respectiv <&tml!.
*ceasta este spructura standard a unui HTML.
6escide te rog 0otepad si copia+a urmatorul cod:
<tml!
<&tml!
/alvea+a documentul di meniul )ile & /ave *s. /electea+a *ll )iles si denumeste fisierul nou
creeat, 1index.tml1. *pasa /ave. 6escide acum fisierul intr-un bro,ser pentru a avea
posibilitatea sa dam refres -)?..
6aca ai facut totul bine vei putea vedea prima ta pagina ,eb, complet alba%
#lementul <ead!
#lementul <ead! este cel care urmea+a. *tata timp cand il pui intre tml sibod' totul ar trebuii sa
fie :@. 1Head1 nu are nici o functie vi+ibila, asa ca vom discuta despre acest aspect in tutorialele
ulterioare. Totusi vreau sa mentione+ ca <ead! poate oferi bro,ser-ului informatii foarte utile. /e
pot insera aici printre altele coduri Aavascript sau 4//.
6eocamdata insa il vom lasa gol cu exceptia faptului ca vom introduce urmatorul element pe lista,
dar mai intai sa aruncam o privire fara el:
<tml!
<ead!
<&ead!
<&tml!
6aca vei salva documentul si vei incerca sa dai un refres la pagina intiala dinbro,ser nu vei nota
nici o diferenta. *i putina rabdare, in continuare vom studia cateva elemente vi+ibile.
#lementul <title!
$entru ca totul sa iasa bine trebuie sa pui tag-ul title inauntrul celui de ead.4eea ce vei scrie intre
cele doua tag-uri title -<title! si <&title!. va putea fi vi+uali+at ca si numele bro,ser-ului, de
obicei in partea din stanga sus. *laturat avem si codul sursa:
<tml!
<ead!
<title! $rima mea pagina ,eb%<&title!
<&ead!
<&tml!
/alvea+al acum fisierul si descide-l in bro,ser. Vei putea vede titlul dupa cum am mai spus in
partea din stanga sus, la marea ma5orilate a bro,ser-elor
$oti pune orice nume doresti, daoar tine minte ca numele descriptive sunt cele mai usor de gasit
ulterior
#lementul <bod'!
#lementul bod' este cel care defineste inceperea continutului pagini propriu-+ise -titluri
paragrafuri ftografii mu+ica si orice altceva.. 6upa cum poti vedea in meniul de la stanga, vom
trata pe rand toate aceste elemnte de continut.
6eocamdata tot ce trebuie sa retii este ca bod' incapsulea+a tot continutul paginii.
<tml!
<ead!
<title! $rima mea pagina ,eb%<&title!
<&ead!
<bod'!
/alut 8asca% *ici voi pune mai tar+iu continutul%
<&bod'!
<&tml!
Vi+uali+ea+a acum toata isprava, dupa care te invit sa parcurgi urmatorul tutorial.
;n bro,ser citeste absolut tot ceea ce ai scris in documentul HTML. 6e fiecare data cand gaseste
un tag il va trata ca atare si il va reda, ca de exemplu un paragraf, un titlu un tabel sau orice
altceva. Tagurile au trei parti dupa cum am mai spus desciderea, continutul si inciderea.
6upa cum vei putea invata mai departe exista sute de taguri HTML. *bsolut toate elementele care
vor fi redate de un bro,ser au nevoie de un tag sau doua.
<openingtag!4ontinut<&closingtag!
<p!#xemplu un paragraf<&p!
Tag-urile se scriu cu litere mici. *cesta este standardul de scriere in 7HTML si 6'namic HTML.
*laturat sunt cateva exemple de taguri in HTML.
<bod'!*ctionea+a ca o capsula asupra continutului.
<p!$aragraf<&p!
<"!Titlu -eading.<&"!
<b!Ingrosat -bold.<&b!
<i!Inclinat -italic.<&i!
<&bod'!
#xceptii - Tag-uri care nu au nevoie de incidere
#xista cateva tag-uri care nu indeplinesc modelul anterior aratat. Motivul este ca in realitate aceste
tag-uri nu au nevoie de nuci un continut. 6atorita acestui fapt se va folosi o maniera modificat de
criere a acestor taguri.
4el mai simplu exemplu este 1linebrea=1
<br&!

*cest tag a imbinat cele doua taguri, de descidere si de incidere, intro forma mult mai simpla si
mai eficace de folosit. Line brea= se foloseste pentru a spune bro,ser-ului ca vrem sa coboram cu
o linie mai 5os, fara insa a inceia paragraful.
;rmand acest exemplu si alte tag-uri au fost modificate pentru o scriere mai simpla si mai rapida.
<img srcB1..&img&image.5pg1 &! -- Image Tag --
<br &! -- Line (rea= Tag --
<input t'peB1text1 si+eB12"1 &! -- Input )ield --
Vi+uali+are
-- Line (rea= --
6upa cum poti vedea boro,ser-ul este capabil sa reproduca aceasta imagine atata timp cat
furni+am locatia cu a5utorul atributului 1scr1. Mai multe despre aceasta in tutorialul urmator.
*tributele sunt folosite pentru a personali+a tag-urile. 4e vreau sa spunC 4a la un moment dat vei
vrea saredimensione+i o imagine sau untabel sau sa scimbi culoarea de fond. Toate acestea sunt
posibile cu a5utorul atributelor.
4ele mai multe tag-uri au propriile lor atribute. Vom vorbi despre aceasta pe masura ce introducem
in discutie un nou tag. *cum insa vom vorbi despre un set de atribute generice care se pot folosi
cu ma5oritatea tag-urilor.
*tributele se introduc intre parante+ele ungiulare -<!. ale tag-ului de descidere.
*tributele 1class1 si 1id1 in HTML
*tributele class si id sunt foarte asemanatoare. #le nu au un rol direct informatarea elementelor si
mai degraba sunt utile in spatele scenei cu a5utorul 4//. Vom vorbi despre rolul acestora la
momentul potrivit, atunci cand vom studia sintaxa si funcia lor in 4//.
Idea este ca atunci cand vrei sa stabilesti o clasa de tag-uri pentru a fi folosite mai tar+iu ca
a5utorul 4//, sa poti diferentia intre doua tag-uri identice dar cu atribute diferite. $riveste exempul
alaturat.
<p idB1italicsparagrap1!$aragrap t'pe 2, inclinat <&p!
<p idB1boldparagrap1!$aragrap t'pe ", ingrosat <&p!
Vi+uali+are
$aragrap t'pe 2, inclinat
$aragrap t'pe ", ingrosat
HTML - *tributul 1name1
1name1 este ceva mai diferit fata de 1id1 si 1class1. $unand un nume unui element, acesta devine o
variabila de script pentru Aavascript, */$ si $H$. 4el mai des este intalnit in formulare si alte
campuri de text interactive.
<input t'peB1text1 nameB1Text)ield1 &!
Vi+uali+are
*cest atribut -name. nu are nici un afect asupra redarii casutei de text, cu toate ca in bac=ground
detine un rol foarte important.
HTML - *tributul 1title1
*tributul title este folosit foarte putin fata de cat ar trebuii, el adauga un titlu -un pop-up. oricarui
continut al unui element. *cest atribut nu ar trebui uitat. $oti denumi aproape orice si oricum
doresti. Vi+uali+area titlului apare atunci cand ne oprim co mausul cateva secunde deasupra
contnutului.
<" titleB1#u sunt un atribut title%1!;n Titlu :arecare<&"!
Vi+uali+are
;n Titlu :arecare

Treci cu mausul peste titlul de mai sus ca sa ve+i magia atributului 1title1. *cest atribut va oferi
site-ului tau multa interactiune cu cei ce te vor vi+ita. 0u il trece cu vederea.
HTML - *tributul 1align1
6aca vrei sa alinie+i in mod diferit anumite elemente ale pagini tale, atunci ai la dispo+itie
atributul align. $oti alinia la stanga -left., dreapta -rigt. sau la mi5locul -center. pagini aproape
orice element. $rin default elementele sealinia+a la stanga, esceptand atuci cand se specifica o alta
aliniere.
<" alignB1center1!Titlu centrat <&"!
Vi+uali+are
Titlu centrat
*lete exemple:
<" alignB1left1!Titlu aliniat la stanga <&"!
<" alignB1center1!Titlu centrat <&"!
<" alignB1rigt1!Titlu aliniat la dreapta <&"!
Vi+uali+are
Titlu aliniat la stanga
Titlu centrat
Titlu aliniat la dreapta
Valori standard pentru atribute
Multora dintere tag-uri li se atribuie, valori standard. *sta inseamna ca daca nu specifici un alt
atribut, bro,ser-ul o va face pentru tine. 6e exemplu un paragraf se va alinia singur la stanga,
exceptand atunci cand specifici altfelD la fel si elementele unui tabel. $e masura ce vei exersa vei
intelege mai multe despre valorile default ale unor tag-uri
*tribute generice
Eetine ca atributele sunt folosite pentru a personali+a elementele unei pagini ,eb. *m alturat aici
cateva dintre atributele cele mai comune, folosite in HTML:
*ttribute:ptions )unction
align rigt, left, center *liniere ori+ontala
valign top, middle, bottom *liniere verticala
bgcolor numeric, exidecimal, sau
valoare E8(
;n bac=ground in spatele elementului
bac=gro
und
;EL : imagine in spatele elementului
id 6efinit de user 0umeste un element care se va folosi cu 4//
class 6efinit de user 4lasifica un element care se va folosi cu 4//
,idt Valoare numerica /pecifica latimea unui tabel, imagine, sau casute
de tabel.
eigt Valoare numerica /pecifica inaltimea unui tabel, imagine, sau
casute de tabel.
title 6efinit de user 1$op-up1. *fisea+a un titlu pentru un element
stabilit.
$aragraful este un elemet de ba+a in editare de text. Tag-ul pentru paragraf este <p!. *cesta va
plasa o linie goala deasupra si dedesuptul textului pentru a fi evidentiat, iar bro,ser-ul il va
interpreta ca atare.
<p!$aragraful este un elemet de ba+a in...<&p!
<p!*cesta va plasa o linie goala deasupra si...<&p!
Vi+uali+are
$aragraful este un elemet de ba+a in editare de text. Tag-ul pentru paragraf este <p!.
*cesta va plasa o linie goala deasupra si dedesuptul textului pentru a fi evidentiat, iar bro,ser-ul il va
interpreta ca atare.
HTML - $aragraf incadrat, 5ustif'
$aragrafele se pot formata aproximatix la fel de simplu ca si intr-un editor de texte. Incadrarea din
exemplul alaturat s-a facut cu a5utorul atributului5ustif'.
<p alignB15ustif'1!$aragraful este un elemet de ba+a in...<&p!
Vi+uali+are
$aragraful este un elemet de ba+a in editare de text. Tag-ul pentru paragraf este <p!. *cesta va plasa o
linie goala deasupra si dedesuptul textului pentru a fi evidentiat, iar bro,ser-ul il va interpreta ca atare.
HTML - $aragraf centrat, center
<p alignB1center1!$aragraful este un elemet de ba+a in...<&p!
Vi+uali+are
$aragraful este un elemet de ba+a in editare de text. Tag-ul pentru paragraf este <p!. *cesta va plasa o
linie goala deasupra si dedesuptul textului pentru a fi evidentiat, iar bro,ser-ul il va interpreta ca atare.
In acest exemplu fiecare linie a paragrafului a fost centrata la mi5locul randului de redare.
HTML - $aragraf aliniat la dreapta, rigt
<p alignB1rigt1!$aragraful este un elemet de ba+a in...<&p!
Vi+uali+are
$aragraful este un elemet de ba+a in editare de text. Tag-ul pentru paragraf este <p!. *cesta va plasa o
linie goala deasupra si dedesuptul textului pentru a fi evidentiat, iar bro,ser-ul il va interpreta ca atare.
Toate randurile paragrafului au fost ase+ate, in acest exemplu, la dreapta.
;n titlu in HTML este exact ceea ce pare: un titlu adevarat, sau un subtitlu. *tunci cand plase+i un
text intr-un tag <2!, textul va fi afisat ingrosat, iar dimensiunea literei va fi dat de numarul
eading-ului. Titlurile pot avea dimensiuni de la de la 2 la 3 unde 2 este cea mai mare dimensiune
si repectiv 3, cea mai mica.
<bod'!
<2!Headings<&2!
<"!are<&"!
<F!great<&F!
<G!for<&G!
<?!titles<&?!
<3!and subtitles<&3!
<&bod'!
Vi+uali+are
$oti
obserba ca fiecare titlu are cate un 1linebrea=1 innainte si dupa. 6e fiecare data cand punem un
eadind, bro,ser-ul va reda automat de la sine un salt in linie inaintea lui si deasemenea dupa.
HTML - #xemplu $ractic
/a luam acum un exemplu simplu si sa practicam un pic pentru ca informatia sa fie inteleasa pe
deplin. *r fi de preferat sa te obisnuiesti cu acesti termeni inainte de a continua.
<" alignB1center1!HTML - Titluri 2:3 -Headings. <&"!
<p!;n titlu in HTML este exact ceea ce pare: un titlu adevarat, sau un
...<&p!
<p!;n titlu in HTML este exact ceea ce pare: un titlu adevarat, sau un
...<&p!
Vi+uali+are
HTML - Titluri 2:3 -Headings.
;n titlu in HTML este exact ceea ce pare: un titlu adevarat, sau un subtitlu. *tunci cand plase+i un text
intr-un tag <2!, textul va fi afisat ingrosat, iar dimensiunea literei va fi dat de numarul eading-ului.
Titlurile pot avea dimensiuni de la de la 2 la 3 unde 2 este cea mai mare dimensiune si repectiv 3, cea
mai mica.
;n titlu in HTML este exact ceea ce pare: un titlu adevarat, sau un subtitlu. *tunci cand plase+i un text
intr-un tag <2!, textul va fi afisat ingrosat, iar dimensiunea literei va fi dat de numarul eading-ului.
Titlurile pot avea dimensiuni de la de la 2 la 3 unde 2 este cea mai mare dimensiune si repectiv 3, cea
mai mica.
Vi+uali+ea+a exemplul intr-o noua pagina
;n salt in line este diferit fata de celelalte tag-uri pe care le-am studiat pana acum. $lasarea
acestuia in codul sursa al documentului, va inceia randul respectiv si va cobora cu o linie mai 5os,
lasand un spatiu mai mic in comparatie cu cel de paragraf. /e foloseste in paragraf dupa cum poti
observa in exemplul de mai 5os.
<p!
Ion Ionescu <br &!
4alea Victoriei 0o.2 <br &!
(ucuresti, Eomania <br &!
<&p!
Vi+uali+are
Ion Ionescu
4alea Victoriei 0o.2
(ucuresti, Eomania
6easemenea se poate folosi pentru a evidentia o semnatura ca de exemplu la sfarsitul unei scrisori.
<p!
Multumesc anticipat,<br &!
<br &!
<br &!
Ion Ionescu <br &!
Vice $resedinte
<&p!
Vi+uali+are
Multumesc anticipat,
Ion Ionescu
Vice $resedinte
)oloseste <r&! pentru a crea o linie ori+ontala. *cest tag esste similar celui de linebrea=.
<r&!
)olosestele
<r&!<r&!
4u
<r&!
Moderatie
<r&!
Vi+uali+are
)olosestele
4u
Moderatie
6and la o parte acest exemplu exagerat linia ori+ontala poate deveni utila in diferite circumstante,
precum poti vedea in exemplul de mai 5os: o nota de subsol.
<r &!
<p!2. 1Te Hobbit1, AEE Tol=ein.<br &!
". 1Te )ello,sip of te Eing1 AEE Tol=ein.<&p!
Vi+uali+are
2. 1Te Hobbit1, AEE Tol=ein.
". 1Te )ello,sip of te Eing1 AEE Tol=ein.
6upa cum poti vedea, tot ceea ce face acest tag este sa desene+e o linie ori+ontala separand
diferite +one ale continutului sau pur si simplu decorea+a. )olosita cu iscusinta poate da re+ultate
destul de neasteptate.
HTML pune la dispo+itie trei tipuri de liste. <ol! va afisa o lista ordonata in timp ce <ul! una
neordonata, iar pentru a reali+a o lista de defnitii se foloseste <dl!. )oloseste atributele t'pesi start
pentru a reali+a lista cea mai potrivita cerintelor tale.
- <ul! - unsorted list, buline
- <ol! - ordered list, numere
- <dl! - definition list, lista de definitii.
HTML - Lista ordonata
)oloseste tag-ul <ol!pentru a incepe o lista ordonata. $rin punerea <li!<&li! -list item. intre
tagurile <ol! si <&ol! semnali+e+i bro,ser-ului elementele listei.
<G alignB1center1!:viective<&G!
<ol!
<li!/ gasesc o slu5ba <&li!
<li!/a iau bani multi <&li!
<li!/a ma mut in alt oras <&li!
<&ol!
Vi+uali+are
:viective
2. /a gasesc o slu5ba
". /a iau bani multi
F. /a ma mut in alt oras
$oti incepe lista cu orice alt numar doresti specificandu-l insa cu a5utorul atributului start.
<G alignB1center1!:viective<&G!
<ol startB1G1 !
<li!/ gasesc o slu5ba <&li!
<li!/a iau bani multi <&li!
<li!/a ma mut in alt oras <&li!
<&ol!
Vi+uali+are
:viective
G. /a gasesc o slu5ba
?. /a iau bani multi
3. /a ma mut in alt oras
*cest element nu face nimic iesit din comun dar este destul de folositor uneori.
HTML - *lte tipuri de liste ordonate
In afara de modelul mai sus aratat mai sunt alte patru tipuri de liste ordonate. In locul cifrelor
arabe poti folosi cifre romane sau la fel de bine litere iar in ambele ca+uri pot fi folosite litere mici
sau ma5uscule. )oloseste atributul t'pepentru a modifica tipul numerotarii.
<ol t'peB1a1!
<ol t'peB1*1!
<ol t'peB1i1!
<ol t'peB1I1!
Vi+uali+are
Litere mici Ma5uscule 0umere romane cu
litere mici
0umere romane cu
ma5uscula
a. ;n loc de
munca
b. (ani
c. *lt oras
*. ;n loc de
munca
(. (ani
4. *lt oras
i. ;n loc de
munca
ii. (ani
iii. *lt oras
I. ;n loc de
munca
II. (ani
III. *lt oras
Liste nesortate
4rea+a o lista nesortata cu a5utorul tagului <ul!. Listele nesortate deasemenea sunt de mai multe
tipuri si anume, patratele buline si cerculete.Valoarea standard redata de ma5oritatea bro,ser-elor
sunt bulinele
<G alignB1center1!lista de cumparaturi <&G!
<ul! <li!lapte<&li!
<li!bran+a<&li!
<li!oua<&li!
<li!+aar<&li!
<&ul!
Vi+uali+ea+a exemplul
*m alaturat ceva mai 5os un exemplu despre cum arata si celelalte tipuri de liste neordonate.
<ul t'peB1sHuare1!
<ul t'peB1disc1!
<ul t'peB1circle1!
Vi+uali+are exemplu
HTML - Lista de definitii
6easemene poti face liste de definitii folosind tag-ul <dl!. *ceasta lista reda cuvantul deasupra
definitiei. #ste indicat sa ingrosam cuvantu pentru a fi mai bine evidentiat.
<dl!
<dt!<b!)romage<&b!<&dt!
<dd!4uvant france+ pentru bran+a .<&dd!
<dt!<b!Voiture<&b!<&dt!
<dd!4uvant france+ pentru masina<&dd!
<&dl!
Vi+uali+are exemplu
$e masura ce vei adauga din ce in ce mai mult text pagini tale, vei avea nevoie de noi elemente
pentru al formata in functie de gustul si necesitati. Intutorialul despre atributeam vorbit despre,
modalitati de a adauga un plus elementelor dorite. *ceste tag-uri de formatare pot face elementele,
ingrosate inclinate subliniate taiate dar nu numai.
<p!#xemplu de <b!(old Text<&b!<&p!
<p!#xemplu de <em!#mpasi+ed Text<&em!<&p!
<p!#xemplu de <strong!/trong Text<&strong!<&p!
<p!#xemplu de <i!Italic Text<&i!<&p!
<p!#xemplu de <sup!superscripted Text<&sup!<&p!
<p!#xemplu de <sub!subscripted Text<&sub!<&p!
<p!#xemplu de <del!struc=troug Text<&del!<&p!
<p!#xemplu de <code!4omputer 4ode Text<&code!<&p!
Vi+uali+are
#xemplu de (old Text
#xemplu de #mpasi+ed Text
#xemplu de /trong Text
#xemplu de Italic Text
#xemplu de superscripted Text
#xemplu de subscripted Text
#xemplu de struc=troug Text
#xemplu de4omputer 4ode Text
HTML - 4um sa folosesti tag-urile de formatare
*ceste tag-uri ar trebuii utili+are cu moderatie. 4eea ce vreau sa spun este ca este indicat sa le
folosesti pentru a ingrosa sau inclina de exemplu un cuvant sau doua intr-un paragraf. *tunci cand
vrei sa le folosesti de exemplu cu un intreg paagraf, cel mai bine este sa apelele+i la 4//. :ricum
acesta nu este decat un sfat, in final deci+ia iti apartine tie si le poti folosi dupa cum experienta iti
indica.
#xista trei feluri distincte de a defini o culoare. 4ea mai simpla metoda este aceea de a
numiculorile -in engle+a.. 6e exemplu: blac=, ,ite, red, green, si blue. *m alaturat mai 5os
numele deculori care sunt suportate in HTML.
4olor Hexa 4olor Hex 4olor Hex 4olor Hex
aHua IJJ))))green IJJKJJJ nav' IJJJJKJ silver I4J4J4J
blac= IJJJJJJ gra' IKJKJKJ olive IKJKJJJ teal IJJKJKJ
blue IJJJJ)) lime IJJ))JJpurple IKJJJKJ ,ite I))))))
fucsia I))JJ))maroon IKJJJJJ red I))JJJJ'ello, I))))JJ
HTML - /istemul de culori E8(
*cest cod de culori nu este recomandat, deoarece Intenet #xplorer este singurul (ro,ser care
suporta valorile E8( in HTML.
E8( este prescurtarea pentru: Eed, 8reen, (lue. )iecare dintre aceste culoripoate lua orice
valoare intre J -nu colorea+a deloc. si "?? -in totalitate aceaculoare.. *m alaturat mai 5os forma de
scriere a culorilor in E8(. 6aca folosesti un bro,ser care nu este Internet #xplorer nu vei avea
nici un re+ultat.
bgcolorB1rgb-"??,"?
?,"??.1
9ite
bgcolorB1rgb-"??,J,
J.1
Eed
bgcolorB1rgb-J,"??,
J.1
8reen
bgcolorB1rgb-J,J,"?
?.1
(lue
HTML - /istemul de culori exa+ecimal
/istemul exa+ecimal este destul de dificil la prima vedere. 4u toate astea te asigur ca odata cu
trecerea timpului, si cu putina practica, il vei intelege pe deplin. /istemul de culori exa+ecimal
este sistemul standard pentru toate bro,ser-ele ,eb. #ste de incredere si este compatibil nu numai
in aplicatiile ,eb dar si aplicatii locale precum gimp, potosop, corel, etc.
/istemul coduri de culori exa+ecimale este o repre+entare de 3 caractere de culoare. $rimele doua
caractere -EE. repre+inta culoarea rosu -Eed., urmatoarele doua -88. culoarea verde -8reen., iar
ultimele doua -((. culoarea albastra -(lue..
bgcolorB1IEE88((1
HTML - 4oduri de culoare - Euperea codului
Tabelul urmator arata cum literele sunt integrate in sistemul exa+ecimal, marind astfel
posibilitatile de combinare pentru obtinerea codurilor de culori in HTML.
Lecimal
J2"FG?3MKN2
J
2
2
2
"
2
F
2
G
2
?
Hexa+ecimal
J 2 " F G ? 3 M K N * ( 4 6 # )
In acest fel posibilitatile cresc iar sistemul poate avea 23 valori.
;n exemplu de cod exa+ecimal ar fi:
bgcolorB1I))))))1
Litera 1)1 este valoarea maxima pe care o poate avea sistemul. La intalnirea acestui cod un
bro,ser va afisa culoarea alba. In ca+ul in care vrei sa afli valoarea numerica a acestei culori avem
formula urmatoare:
-2? > 23. O -2?. B "??
)ormula este foarte simpla. /e ia prima valoare a lui 1)1 sau 2? si se inmulteste cu 23 si se adauga
celei de-a doua valoare 2?. Ee+ultatul este "??, valoarea maxima pe care o poate avea o culoare
primara.
bgcolorB1I44MJJ?1
44-EE - Eed.
-2" > 23. O -2". B "JG
MJ-88 - 8reen.
-M > 23. O -J. B 22"
J?-(( - (lue.
-J > 23. O -?. B ?
HTML - 4ulori sigure
/istemul exa+ecimal este cel mai utili+al pentru crearea paginilor. *cesta este compatibil cu
ma5oritatea bro,ser-elor, in acest fel interfata pagini ,eb nu va fi distorsionata. $entru a adauga o
nota de siguranta iti recomand sa folosesti culorile impereciate -sau true colors. precum:
1IJJ22##1, 1IGGHH))1, sau 1I22MMKK. 4onform statisticilor acestea nu vor fi scimbate
indiferent de bro,ser.
*m alaturat mai 5os un tabel cu codurile corespun+atoare acestor culori sigure.
$entru a simplifica tabelul de mai 5os am afisat culorile sigure folosind coduri scurte. Tine minte
in acest sub-capitol vorbim de culori impereciate, asa ca de exemplu culoarea repre+entata ca
fiind F3N este de fapt FF 33 NN iar ))4 va fi )) )) 44.
>JJJ FJJ 3JJ NJJ 4JJ >)JJ
>JJF FJF 3JF NJF 4JF >)JF
JJ3 FJ3 3J3 NJ3 4J3 )J3
JJN FJN 3JN NJN 4JN )JN
JJ4 FJ4 3J4 NJ4 4J4 )J4
>JJ) FJ) 3J) NJ) 4J) >)J)
JFJ FFJ 3FJ NFJ 4FJ )FJ
JFF FFF 3FF NFF 4FF )FF
JF3 FF3 3F3 NF3 4F3 )F3
JFN FFN 3FN NFN 4FN )FN
JF4 FF4 3F4 NF4 4F4 )F4
JF) FF) 3F) NF) 4F) )F)
J3J F3J 33J N3J 43J )3J
J3F F3F 33F N3F 43F )3F
J33 F33 333 N33 433 )33
J3N F3N 33N N3N 43N )3N
J34 F34 334 N34 434 )34
J3) F3) 33) N3) 43) )3)
JNJ FNJ 3NJ NNJ 4NJ )NJ
JNF FNF 3NF NNF 4NF )NF
JN3 FN3 3N3 NN3 4N3 )N3
JNN FNN 3NN NNN 4NN )NN
JN4 FN4 3N4 NN4 4N4 )N4
JN) FN) 3N) NN) 4N) )N)
J4J F4J 34J N4J 44J )4J
J4F F4F 34F N4F 44F )4F
J43 F43 343 N43 443 )43
J4N F4N 34N N4N 44N )4N
J44 F44 344 N44 444 )44
J4) F4) 34) N4) 44) )4)
>J)J F)J >3)J N)J 4)J >))J
J)F >F)F >3)F N)F 4)F >))F
>J)3 >F)3 3)3 N)3 >4)3 >))3
J)N F)N 3)N N)N 4)N ))N
>J)4 >F)4 3)4 N)4 4)4 ))4
>J)) >F)) >3)) N)) 4)) >)))
>4ele mai sigure culori HTML
4u toate ca aceste culori sigure -true colors. de mai sus, sunt cele recomadate pentru a fi folosite
de catre ,ebmasteri, a fost demonstrat ca doar "" dintre cele "23 culori sunt cu adevarat sigure si
nu vor fi in absolut modificate in repre+entare de catre nici un bro,ser. In tabelul de mai sus
culorile cu adevarat sigure au fost repre+entate cu un asterix - > . in fata.
*m alaturat totusi un tabel cu acestea:
>JJJ >)JJ
>JJF >)JF
>JJ) >)J)
>))J >))F
>4)3 >))3
>J)J >3)J
>F)F >3)F
>J)3 >F)3
>J)4 >F)4
>J)) >F))
>3)) >)))
Tag-ul <font! este folost pentru a modifica tipul de text, marimea si culoare. )oloseste atributele
1si+e1, 1color1, si 1face1 pentru a personali+a textul. )oloseste tag-ul <basefont! pentru a seta
culoarea marimea si stilul intregului tau text.
In general tag-urile 1font1 si 1basefont1 nu se folosesc prea mult, in general se foloseste css-ul
pentru a stabili atributele textului.
Marimea )ont-ului
/etea+a marimea font-ului tau cu a5utorul atributului si+e al tagului font. /unt acceptate valori
intre 2 -cea mai mica. si M -cea mai mare.. Valoarea standard a unui text normal este F.
<p!
<font si+eB1?1!*cesta este un font de marime ? <&font!
<&p!
Vi+uali+are
*cesta este un font de marime ?
4uloarea fontului
/etea+a culoarea textului
<font colorB1INNJJJJ1!Tis text is excolor INNJJJJ<&font!
<br &!
<font colorB1red1!Tis text is red<&font!
Tis text is excolor INNJJJJ
Tis text is red
)ont )ace
*lege un stil de litera folosind tag-ul fontface. $oti alege orice font ai instalat, cu toate acestea,
alege cu gri5a deoarece utili+atorul aflat pe pagina ta nuva putea vi+uali+a fontul respectiv daca nu
il are instalat. *cesta va vedea in scimb font-ul default si anume Times 0e, Eoman. /olutia ar fi
sa alegi mai multe font-uri asemanatoare ca aspect.
<p!
<font faceB1(oo=man :ld /t'le, (oo= *ntiHua, 8aramond1!Tis paragrap as
ad its font...<&font!
<p!
Tis paragrap as ad its font formatted b' te font tag%
(asefont
4u a5utorul tag-ului basefont vei putea stabili valoare default a font-ului in pagina ta ,eb.
Eecomandam sa specifici un basefont in ca+ul in care vei utili+a font-ul in HTML. *vem alaturat
un model.
<tml! <bod'!
<basefont si+eB1"1 colorB1green1!
<p!Tis paragrap as ad its font...<&p!
<p!Tis paragrap as ad its font...<&p!
<p!Tis paragrap as ad its font...<&p!
<&basefont!
<&bod'! <&tml!
Tis paragrap as ad its font formatted b' te basefont tag%
Tis paragrap as ad its font formatted b' te basefont tag%
Tis paragrap as ad its font formatted b' te basefont tag%

4u toate acestea, basefont este oarecum depasit, este foarte probabil ca in viitorul apropiat sa nu se
mai lucre+e cu el, trecanduse in acest fel definitiv configurarea cu a5utorul 4//.
*tribute
*ttribut
eB
1Value1 6escription
si+eB 10um. Value 2-M1 /i+e of 'our text, M is
biggest
colorB 1rgb,name,or
exidecimal1
4ange font color
faceB 1name of font1 4ange te font t'pe
Inceputul 14a la carte1
<p!
<font si+eB1M1 faceB18eorgia, *rial1 colorB1maroon1!4<&font!ustomi+e 'our font to acieve a
desired loo=.
<&p!
4ustomi+e 'our font to acieve a desired loo=.
*tributul refnumeste legatura catre o alta pagina ,eb. 6e fapt este locul unde va fi dus user-ul
care va executa un clic= pe lin=ul respectiv.
Lin=urile pot fi de trei tipuri:
- interne - catre locuri specifice din pagina -ancors.
- locale - catre alte pagini dar pe acelasi domeniu
- globale - catre alte domeni in afara site-ului
Internal - refB1Iancorname1
Local - refB1..&img&foto.5pg1
8lobal - refB1ttp:&&,,,.tutorialetml.com&1
HTML - Llin=-uri text
$entru a seta inceputul si sfarsitul unui ancor se poate folosi <a!<&a!. *lege tipul de atribut care
iti trebuie si punel in interiorul tagului. en exemoplu simplu ar fi:
<a refB1ttp:&&,,,.tutorialetml.com1 targetB1Pblan=1 !Tutoriale HTML
<&a!
Vi+uali+are
Tutoriale HTML
HTML - Target-uri de lin=
*tributul target spune bro,ser-ului daca trebuie sa descida noua pagina intr-o noua fereastra sau
in aceeasi fereastra.
target
B1
Pblan
=1
6escide o noua fereastra
Pself1 6escide pagina in aceeasi fereastra
Ppare
nt1
6escide noua pagina intr-un frame superior lin=ului
Ptop1 descide noua pagina in acelasi bro,ser anuland
toate frame-urile
#xemplu de mai 5os arata cum se poate descide o pagina intr-o noua fereastra a bro,serului. In
acest fel putem ramane pe pagina de tutoriale si descidem o noua pagina de navigare.
<a refB1ttp:&&,,,.google.com&1 targetB1Pblan=1 !8oogle <&a!
Vi+uali+are
8oogle
HTML - *ncor
#ste folosit pentru a lega doua sectiuni ale aceleiasi pagini. In acest sens va trebuii sa dam un
nume sectiunilor, dar pentru aceasta cel mai indicat ar fi sa aruncam o privire exemplului urmator.
<2!HTML - H'pertext Eeference & ref<a nameB1top1!<&a!<&2!
<"!HTML - Llin=-uri text<a nameB1text1!<&a!<&"!
<"!HTML - Lin=-uri de e-mail<a nameB1email1!<&a! <&"!
Mai departe trebuie sa formulam codul lin=-ului punand innaintea numelui ancor-ului semnul
die+ -I.. ;rmareste exemplul pentru mai buna intelegere.
<a refB1Itop1!Mergi la inceput <&a!
<a refB1Itext1!Invata despre lin=-uri text <&a!
<a refB1Iemail1!Invata despre adrese de e-mail <&a!
Vi+uali+are
Mergi la inceput
Invata despre lin=-uri text
Invata despre adrese de e-mail

HTML - Lin=-uri de e-mail
4rearea unui lin= de email este foarte simplu. 6aca vrei ca cineva sa iti scrie un email cel mai bine
ar fi sa sa ii pui la dispo+itie un lin= cu email-ul tau si deasemenea un subiect prestabilit.
<a refB1mailto:cinevaQexemplu.comCsub5ectB0elamuriri 1 !0elamuriri
aici <&a!
Vi+uali+are
0elamuriri aici
In ca+ul in care un subiect nu este de a5uns si vrei sa adaugi ceva si la continutul email-ului, o poti
face cu a5utorul urmatorului cod:
<a refB1mailto:cinevaQexemplu.comCsub5ectB0elamuririRbod'B/crie aici daca ai nelamuriri 1
!0elamuriri aici <&a!
Vi+uali+are
0elamuriri aici
HTML - Lin=-uri de do,nload
)orma unui lin= de do,nload este exact aceeasi ca a unui lin= normal de text. $roblema intervine
atunci cand vrem sa punem o fotografie. 4ea mai buna solutie ar fi sa folosim un tumbnail cu un
lin=, dar vom discuta aceasta problema mai pe larg in lectia urmatoare.
<a refB1ttp:&&,,,.tutorialetml.com&tmlT&text.+ip1!Text
6ocument<&a!
HTML - LIn=-uri default & Lin=-uri de ba+a
)olosesta tag-ul <base! in interiorul elementului ead pentru a seta un lin= de ba+a. *cesta este
necesar in ca+ul in care ai pe undeva un lin= care nu functionea+a corect sau a carui destinatie
numai exista. Lin=-ul de ba+a redirectionea+a user-ul la adresa specificata. In mod normal se
redirectionea+a catre pagina de start, dar este acceptata oricare alta pagina, eventual o pagina
special facuta acestui scop.
<ead!
<base refB1ttp:&&,,,.tutorialetml.com&1!
<&ead!
In HTML 1entitati1 este un numele tenic pentru 1simboluri1. 4ateva simboluri precum cop'rigt,
trademar=, si multe altele, unele dintre ele disponibile pe tastatura, au nevoie de o scriere speciala.
- Incep cu semnul 1end1 - R
- 6upa care vom scrie numele semnului - cop'
- /I la sfarsit 1punct si virgula1 - D
4op'rigt
)oloseste Rcop'D pentru a reali+a- S - /imbolul 4op'rigt.
/patii multiple si <!
6upa cum am spus si in lectia despre paragrafuri, un bro,ser va recunoaste un singur spatiu,
indiferent de cat de multe taste+i intr-un cod de HTML. #xista insa o entitate care poate fi
introdusa pentru a afisa mai mult de un spatiu.
<p! In acesta fra+a au fost introdese RnbspDRnbspDRnbspDRnbspD mai multe
spatii.<p!
Vi+uali+are
In acesta fra+a au fost introdese mai multe spatii.
$entru a reali+a comen+i in HTML sunt folosite simbolurile 1mai mult1 si 1mai putin1. $entru a fi
afisate in bro,ser va trebuii sa folosim o entitate.
<p!
Mai putin - RltD <br&!
Mai mult - RgtD <br &!
Tagul ead - RltDeadRgtD
<&p!
Vi+uali+are
Mai putin - <
Mai mult - !
Tagul ead - <ead!
)a o pau+a si exersea+a putin cu aceste simboluri. : lista mult mai ampla a acestora gasesti aici.
6upa cum vei putea observa in acest tabel, poate fi folosita deasemenea o valuare numerica in
locul numelui standard al simbolului.
/imbol 6efinitie Valuare 0umerica Valuare 4orelata
0on-(rea=ing /pace RI23JD RnbspD

< Less Tan RI3JD RltD
! 8reater Tan RI3"D RgtD
1 Tuotation Mar= RIFGD RHuotD
U Inverted #xclamation RI232D RiexclD
V 4ent RI23"D RcentD
W #nglis $ound RI23FD RpoundD
X 4urrenc' RI23GD RcurrenD
Y Zen RI23?D R'enD
[ (ro=en Vertical (ar RI23?D RbrvbarD
\ /ection RI23MD RsectD
] 6ouble 6ot RI23KD RumlD
S 4op'rigt RI23ND Rcop'D
^ )eminine :rdinal Indicator RI2MJD RordfD
_ Left *ngle Tuotation Mar= RI2M2D RlaHuoD
` Eigt *ngle Tuotation Mar= RI2KMD RraHuoD
a 0egation RI2M"D RnotD
b Eegistered Trademar= RI2MGD RregD
c /pacing Macron RI2M?D RmacrD
d 6egree-s. RI2M3D RdegD
e $lus or Minus RI2MMD RplusmnD
f /uperscript " RI2MKD Rsup"D
g /uperscript F RI2MND RsupFD
h /pacing *cute RI2KJD RacuteD
i Micro RI2K2D RmicroD
j $aragrap RI2K"D RparaD
k Middle 6ot RI2KFD RmiddotD
l /pacing 4edilla RI2KGD RcedilD
m /uperscript 2 RI2K?D Rsup2D
n Masculine :rdinal Indicator RI2K3D RordmD
o o )raction RI2KKD Rfrac2GD
p p )raction RI2KND Rfrac2"D
q q )raction RI2NJD RfracFGD
r Inverted Tuestion Mar= RI2N2D RiHuestD
s 8rave *ccent-4aptial * RI2N"D R*graveD
t *cute *ccent-4apital * RI2NFD R*acuteD
u 4ircumflex *ccent-4apital * RI2NGD R*circD
v Tilde-4apital * RI2N?D R*tildeD
w ;mlaut Mar=-4apital * RI2N3D R*umlD
x Eing-4apital * RI2NMD R*ringD
y 4apital ae RI2NKD R*#ligD
z 4edilla-4apital 4 RI2NND R4cedilD
{ 8rave *ccent-4apital # RI"JJD R#graveD
| *cute *ccent-4apital # RI"J2D R#acuteD
} 4ircumflex *ccent-4apital # RI"J"D R#circD
~ ;mlaut Mar=-4apital # RI"JFD R#mlD
8rave *ccent-4apital I RI"JGD RIgraveD
*cute *ccent-4apital I RI"J?D RIacuteD
4ircumflex *ccent-4apital I RI"J3D RIcircD
;mlaut Mar=-4apital I RI"JMD RIumlD
4apital et RI"JKD RmpD#THD
Tilde-4apital 0 RI"JND RmpD0tildeD
8rave *ccent-4apital : RI"2JD R:graveD
*cute *ccent-4apital : RI"22D R:acuteD
4ircumflex *ccent-4apital :RI"2"D R:circD
Tilde-4apital : RI"2FD R:tildeD
;mlaut Mar=-4apital : RI"2GD ampD.umlD
Multiplecation RI"2?D RtimesD
/las-4apital : RI"23D R:slasD
8rave *ccent-4apital ; RI"2MD R;graveD
*cute *ccent-4aptital ; RI"2KD R;acuteD
4ircumflex *ccent-4apital ;RI"2ND R;circD
;mlaut Mar=-4apital ; RI""JD R;umlD
*cute *ccent-4apital Z RI""2D RZacuteD
Torn RI"""D RTH:E0D
/mall /arp RI""FD Rs+ligD
y /mall ae RI"FJD RaeligD
/mall et RI"GJD RetD
/las-/mall o RI"GKD RoslasD
/mall Torn RI"?GD RtornD
4apital Ligature RIFFKD R:#ligD
/mall Ligature RIFFND RoeligD
Modifier 4ircumflex *ccent RIM2JD RcircD
/mall Tilde RIMF"D RtildeD
Lero 9idt Aoiner RIK"J?D R+,5D
#n 6as RIK"22D RndasD
#m 6as RIK"2"D RmdasD
Left /ingle Tuote RIK"23D RlsHuoD
Eigt /ingle Tuote RIK"2MD RrsHuoD
/ingle Lo, Tuote RIK"2KD RsbHuoD
Left 6ouble Tuote RIK""JD RldHuoD
Eigt 6ouble Tuote RIK""2D RrdHuoD
6ouble Lo, Tuote RIK"""D RbdHuoD
6agger RIK""GD RdaggerD
6ouble 6agger RIK""?D R6aggerD
$er Mile RIK"GJD RpermilD
Left /ingle *rro, Tuote RIK"GND RlsaHuoD
Eigt /ingle *rro, Tuote RIK"?JD RrsaHuoD
#uro Mar= RIKF3GD ReuroD
TradeMar= RIKGK"D RtradeD
4rearea de lin=-uri tip e-mail este foarte simpla. Trebuie mentionat insa ca atunci cand vei pune un
lin= tip e-mail pe o pagina publica, este foarte usor pentru un expert sa il gaseasca pentru al folosi
mai tar+iu, in vederea trimiteri de mesa5e spam.
: metoda diferita, care scade riscul spam-ului este acea de a implementarea unui formular e-mail
in continutul paginii tale.
HTML - Lin=-uri de e-mail
4rearea unui lin= de email este foarte simplu. 6aca vrei ca cineva sa iti scrie un email cel mai bine
ar fi sa sa ii pui la dispo+itie un lin= cu email-ul tau si deasemenea un subiect prestabilit.
<a refB1mailto:cinevaQexemplu.comCsub5ectB0elamuriri 1 !0elamuriri aici
<&a!
Vi+uali+are
0elamuriri aici
In ca+ul in care un subiect nu este de a5uns si vrei sa adaugi ceva si la continutul email-ului, o poti
face cu a5utorul urmatorului cod:
<a refB1mailto:cinevaQexemplu.comCsub5ectB0elamuririRbod'B/crie aici daca ai nelamuriri 1
!0elamuriri aici <&a!
Vi+uali+are
0elamuriri aici