Curs HTML

Despre tagurile HTML
Tag-urile nu sunt altceva decat niste marcaje sau etichete pe care limbajul HTML le foloseste
alaturi de texte pentru a ajuta browser-ul de internet sa afiseze corect continutul paginii web.
Aceste tag-uri etichete! pot fi de doua feluri"
taguri pereche un tag de inceput si unul de incheiere!.
#xemple" $HTML% si $&HTML%' $T(TL#% si$&T(TL#%' $H#A)% si $&H#A)%
taguri singulare nu au un tag de incheiere! #xemple" $H*%+ $,*%
-a vedem tag-urile de baza pe care trebuie sa le contina un document HTML"
$HTML% - cu acest tag incepe orice document HTML. .rin folosirea acestui tag ii spunem
browser-ului ca este vorba de un fisier HTML pentru a il putea afisa.
$H#A)% - intre aceste tag-uri sunt trecute+ pe langa titlul paginii+ diverse informatii folositoare
pentru browser-ul de internet+ informatii pe care le vom descoperi pe parcursul acestui curs.
$&H#A)% - acesta este tag-ul de incheiere al tag-ului $H#A)%
$T(TL#% - cu ajutorul acestei perechi de tag-uri vei putea da un titlu documentului tau. Astfel+
textul pe care il vei scrie intre aceste tag-uri va fi afisat in bara de titlu a documentului.
$&T(TL#% - este tag-ul de incheiere al tag-ului $T(TL#%. Arata sfarsitul titlului documentului.
$,/)0% - odata cu acest tag incepe continutul paginii web. Tot ce vei scrie intre tag-
urile $,/)0% si $&,/)0%va fi afisat+ de catre browser+ pe ecranul monitorului.
$&,/)0% - ii spui browser-ului ca ai terminat de scris continutul paginii. Tot ceea ce vei scrie
dupa acest tag nu va mai fi afisat.
$&HTML% - este tag-ul de incheiere al tag-ului $HTML%. 1odul oricarui document se termina cu
acest tag.
Tag-urile etichetele! pot fi scrise atat cu litere mari cat si cu litere mici.
Nu uita atunci cand scrii codul unei pagini web sa inchizi toate tag-urile pe care le-ai
deschis. .entru a fi sigur ca nu uiti incearca sa te obisnuiesti sa scrii dupa fiecare tag si tag-ul
de incheiere la tag-urile pereche!+ scriind apoi continutul intre ele. / alta solutie pentru a nu uita
sa inchizi vreun tag+ este sa folosesti la scrierea codului+ un editor HTML atunci cand vrei sa
folosesti un tag+ editorul va scrie automat si tag-ul de incheiere!.
Crearea primului document HTML
Acum va trebui sa pui in practica notiunile invatate si sa realizezi prima ta pagina web. -a
vedem deci+ cum va trebui sa arate aceasta prima pagina. Mai intai trebuie sa deschizi editorul
de texte 2otepad sau 3ord.ad daca folosesti 3indows!.
Acum sa trecem la scrierea codului. 2u trebuie sa te sperii+ vei vedea cat de usor este.
4om incepe cu tag-ul $HTML%. .entru a nu uita de tag-ul de inchidere este bine sa-l pui si pe
acesta tot la inceput. (n continuare vin tag-urile $H#A)% si $&H#A)%. Apoi intre cele doua tag-
uri vom pune perechea de tag-uri$T(TL#% si $&T(TL#%. (ntre aceste tag-uri punem titlul paginii"
.rima mea pagina web. 5rmeaza tag-urile $,/)0%si $&,/)0%. 1e vom scrie intre ele va fi
afisat in browserul de internet.
(ata cum ar trebui sa arate codul HTML"
<HTML>
<HEAD>
<TITLE>Prima mea pagina web</TITLE>
</HEAD>
<BODY>
Bine ai venit!<BR>
Vm invata impre!na "imba#!" HTML$ A%ea&ta e&te prima mea pagina web!
</BODY>
</HTML>
Am folosit tag-ul $,*% pentru a trece pe urmatorul rand. Astfel ii spunem browser-ului ca ce va
fi scris dupa tag-ul$,*% va trebui afisat pe urmatorul rand. Tag-ul $,*% nu are un tag de
inchidere.
)upa ce am scris codul+ va trebui sa salvam documentul cu extensia .html sau .htm. )in
meniul File alege optiunea Sae !s+ iar apoi denumeste documentul asa cum vrei+ dar cu una
din extensiile de mai sus. Apasa butonul Sae. Ai acum un document html+ care reprezinta
prima ta pagina web.
(ntra in fisierul unde ai salvat documentul si deschide-l. Ar trebui sa arate cam
asa" exemplu6.html
(nainte de a trece la lectia 7+ sa recapitulam cu ajutorul exercitiului de mai jos+ notiunile invatate
in aceasta lectie.
"#ercitiu
8olosind cunostintele dobandite pana acum in cadrul cursului+ incearca sa scrii codul pentru a
realiza o pagina web la fel cu aceasta" exemplu9.html
.entru a vedea codul unei pagini web scrise cu HTML alege din meniul 4iew al browserului
optiunea -ource in functie de browser poate sa difere modul in care poti vedea sursa unei
pagini web!.
Ce sunt atributele HTML$
Atributele pot fi definite ca niste proprietati ale tag-urilor. Atributele se pun numai in tag-ul de inceput. )aca un tag
nu are nici un atribut+ atunci browser-ul va lua in considerare valorile implicite ale tag-ului respectiv. .entru a
intelege mai bine notiunea de atribut sa vedem cateva exemple.
Atributul ,:1/L/* care se foloseste cu tag-ul $,/)0% indica ce culoare va avea fondul viitoarei pagini web.
8ondul unei pagini web are in mod implicit culoarea alba+ dar sa spunem ca vrem ca fondul paginii noastre sa fie
portocaliu.
(n acest caz vom folosi pentru atributul ,:1/L/* codul culorii orange" %FF&&'' vei invata in lectia urmatoare mai
multe despre culori!"
$,/)0 ,:1/L/*;<=88>>??<%
-a luam codul paginii web din lectia trecuta si sa-i aplicam tag-ului ,/)0 atributul ,:1/L/*. 4om obtine
urmatorul rezultat" exemplu7.html
Acum sa ne ocupam de textul paginii noastre. Mesajul <,ine ai venit@< sa spunem+ de exemplu+ ca am vrea sa fie
scris cu albastru in loc de negru+ care este valoarea implicita si sa fie scris cu litere mai mari decat restul textului.
.entru a scrie astfel textul+ vom folosi tag-ul 8/2T insotit de unele atribute astfel"
$8/2T 1/L/*;<=????88< -(A#;<B<%
,ine ai venit@
$&8/2T%$,*%
Textul urmator <4om invata impreuna limbajul HTML. Aceasta este prima mea pagina web@<+ daca dorim doar sa
aiba culoarea rosie+ vom folosi numai atributul 1/L/* pentru tag-ul $8/2T%+ restul proprietatilor fiind cele
implicite"
$8/2T 1/L/*;<=88????<%
4om invata impreuna limbajul HTML. Aceasta este prima mea pagina web@
$&8/2T%
.rin folosirea liniilor de cod de mai sus in cadrul codului nostru+ pagina web initiala va arata astfel" exempluC.html.
Mai multe despre texte vom invata impreuna in lectia C" 8ormatarea textului in HTML
Atunci cand vrem sa trasam o linie+ folosim tag-ul $H*% care vine de la Horizontal *ule care inseamna linie
orizontala. )aca nu ii asociem acestui tag nici un atribut atunci vom obtine o line orizontala cat latimea paginii web.
)aca vrem sa folosim propriile noastre proprietati pentru trasarea unei linii orizontale vom apela la atributele tag-
ului$H*%. Aceste atribute sunt urmatoarele" AL(:2 - pentru alinierea liniei+ 1/L/* - pentru culoarea liniei+ -(A# -
pentru grosimea liniei si 3()TH - pentru lungimea liniei.
.entru a trasa o linie rosie 1/L/*;<=88????<!+ cu o lungime de jumatate din valoarea implicita 3()TH;<D?E<! si
putin mai groasa decat cea implicita -(A#;<DE<! ce va fi aliniata in centrul paginii AL(:2;<center<!+ vom folosi
urmatoarea linie de cod"
$H* 1/L/*;<=88????< 3()TH;<D?E< -(A#;<DE< AL(:2;<center<%
Acum sa folosim cele doua linii de mai sus in cadrul paginii noastre. Linia simpla o vom folosi la sfarsit+ iar linia rosie
o vom folosi dupa mesajul <,ine ai venit@<. 2oul cod HTML al paginii noastre va fi urmatorul"
$HTML%
$H#A)%
$T(TL#%.rima mea pagina web$&T(TL#%
$&H#A)%
$,/)0 ,:1/L/*;<=88>>??<%
$8/2T 1/L/*;<=????88< -(A#;<B<%
,ine ai venit@
$&8/2T%$,*%
$H* 1/L/*;<=88????< 3()TH;<9DE< -(A#;<DE< AL(:2;<left<%
$,*%
$8/2T 1/L/*;<=88????<%
4om invata impreuna limbajul HTML. Aceasta este prima mea pagina web@
$&8/2T%
$H*%
$&,/)0%
$&HTML%
-alveaza pagina cu ce nume vrei tu. 2u uita de extensia .html sau .htm. .entru a vedea rezultatul clicF
aici"exempluD.html
2e oprim aici cu exemplele de atribute+ insa in lectiile urmatoare vor fi folosite atributele cele mai importante+ astfel
incat pana la sfarsitul cursului te vei familiariza cu toate acestea.
2u uita ca pentru a intelege cat mai bine limbajul HTML trebuie sa scrii si tu codul fiecarui exemplu prezentat aici+
sa salvezi pagina cu extensia .html sau .htm si sa verifici daca ai obtinut aceleasi rezultate.
Lista celor mai utilizate taguri HTML impreuna cu atributele lor
(n tabelul urmator vor fi prezentate cele mai utilizate tag-uri impreuna cu cele mai importante atribute ale lor"
Nume tag Nume atribut (aloare atribut Detalii
$A% Ancora
href 5*L Adresa catre care vrem sa fie legatura
target GblanF
Gself
Gparent
Gtop
8ereastra in care se va face afisarea
$,% Text bold
$,/)0% 1uprinsul documentului
bacFground adresa imaginii (maginea de fond
bgcolor cod culoare
nume culoare
1uloarea fondului
leftmargin procent din
latimea paginii
numar de pixeli
)istanta dintre marginea din stanga a
ferestrei browserului si marginea din
stanga a paginii
topmargin procent din
inaltimea paginii
numar de pixeli
)istanta dintre marginea de sus a
ferestrei browserului si marginea de sus
a paginii
text cod culoare
nume culoare
1uloarea textului
alinF cod culoare
nume culoare
1uloarea legaturilor active atunci cand
mouse-ul se afla deasupra lor!
linF cod culoare
nume culoare
1uloarea legaturilor nevizitate nu s-a
efectuat nici un clicF pe ele!
vlinF cod culoare
nume culoare
1uloarea legaturilor vizitate
s-a efectuat cel putin un clicF pe ele!
$,*% -farsitul randului
$1#2T#*% Afisarea in centrul paginii
$8/2T% 8ontul textului
color cod culoare
nume culoare
1uloarea fontului
face nume font Tipul fontului
size un numar
de la 6 la H
Marimea fontului
$8/*M% 8ormular interactiv
action 5*L Adresa scriptului care prelucreaza datele
din cadrul formularului
method :#T
./-T
Metoda de prelucrare a datelor
formularului
$8*AM#% 1adru fereastra!
frameborder 6 sau ? 1adrul are sau nu are chenar
marginheight numar de pixeli -patiu deasupra si sub un cadru
marginwidth numar de pixeli -patiu la stanga si la dreapta unui cadru
src 5*L -ursa cadrului
$8*AM#-#T% Multime de ferestre
cols procent din
latimea paginii
numar de pixeli
numarul si marimea relativa a coloanelor
rows procent din
inaltimea paginii
numar de pixeli
numarul si marimea relativa a randurilor
H6+ H9+ H7+
HC+ HD+ HB
Titluri in cadrul documentului
align left
center
right
justifI
Alinierea titlului
$H#A)% Antetul documentului
$H*% Linie orizontala
align left
center
right
Alinierea orizontala a liniei
color cod culoare
nume culoare
1uloarea liniei
size numar de pixeli (naltimea liniei
width procent din
latimea paginii
numar de pixeli
Latimea liniei
$HTML% )ocument HTML
$(% Text italic
$(M:% Adaugarea unei imagini
align left
right
top
middle
bottom
Alinierea imaginii in pagina" left stanga!
sau right dreapta!
Alinierea elementelor din jurul imaginii"
top sus!+ middle mijloc!+ bottom jos!
alt text Text ce va fi afisat in locul imaginii+ in
cazul in care+ aceasta nu este afisata
border numar de pixeli Marimea chenarului din jurul imaginii
height procent
numar de pixeli
(naltimea imaginii
hspace numar de pixeli -patiu pe orizontala in jurul imaginii
src 5*L Adresa imaginii
vspace numar de pixeli -patiu pe verticala in jurul imaginii
width procent
numar de pixeli
Latimea imaginii
$(2.5T% #lement al formularului
maxlength numar 2umar maxim de caractere
name date de tip
caracter
2umele elementului formularului
size numar Marimea elementului formularului
src 5*L Adresa pentru o imagine
tIpe text
password
checFbox
radio
submit
reset
file
hidden
image
button
Tip input
value date de tip
caracter
4aloare input
$L(% #lement al unei liste
$M#TA% Metainformatii
content text )escrie valoarea atributului name
name author Autor
description )escriere
FeIwords 1uvinte cheie
$/L% Lista ordonata
start numar 1u ce valoare incepe numerotarea
tIpe A+ a+ (+ i+ 6 Tipul numerotarii" A+ a+ (+ i+ 6 implicit!
$.% .aragraf
align left
center
right
justifI
Alinierea paragrafului
$-#L#1T% Lista de selectii
multiple .ermite selectia mai multor elemente
name date de tip
caracter
2umele listei de selectii
size numar 2umarul de elemente ale listei
$-T*/2:% Text evidentiat
$-5,% Text indice
$-5.% Text exponent
$TA,L#% Tabel
align left
center
right
Alinierea tabelului
bacFground 5*L (maginea de fond pentru tabel
bgcolor cod culoare
nume culoare
1uloarea fondului pentru tabel
border procent
numar de pixeli
1henarul tabelului
bordercolor cod culoare
nume culoare
1uloarea chenarului
cellpadding numar de pixeli -patiu intre continutul celulelor tabelului si
marginile lor
cellspacing numar de pixeli -patiu intre celulele tabelului
cols numar 2umarul de coloane ale unui tabel
hspace numar de pixeli -patiu pe orizontala in jurul tabelului
vspace numar de pixeli -patiu pe verticala in jurul tabelului
width procent
numar de pixeli
Latimea tabelului
$T)% 1elula de tabel
align left
center
right
Alinierea continutului celulei pe orizontala
bacFground 5*L (maginea de fond pentru celula
bgcolor cod culoare
nume culoare
1uloarea fondului pentru celula
colspan numar 2umarul de coloane pe care se intinde
celula
height numar de pixeli (naltimea celulei
rowspan numar 2umarul de linii pe care se intinde celula
valign top
middle
bottom
Alinierea continutului celulei pe verticala
width numar de pixeli Latimea celulei
$T#JTA*#A% 1amp de editare multilinie
cols numar 2umarul de coloane
name date de tip
caracter
2umele campului de editare multilinie
rows numar 2umarul de randuri
$T(TL#% Titlu document
$T*% *and tabel
align left
center
right
Alinierea continutului celulelor
pe orizontala
bgcolor cod culoare
nume culoare
1uloarea fondului pentru tot randul
valign top
middle
bottom
Alinierea continutului celulelor pe verticala
$5% Text subliniat
$5L% Lista neordonata
tIpe circle
disc
sKuare
8orma marcajului

Curs HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Despre tagurile HTML

S-ar putea să vă placă și