HTML

Clasa a XII-a HTML
LIMBAJUL HTML
HTML (HyperText Markup Language) este
limbajul utilizat n World Wide Web pentru descrierea
hipertextelor. HTML nu este un limbaj de programare
propriu-zis, ci doar un limbaj de descriere, coninnd
elemente ce permit construirea paginilor Web.
Limbajul HTML este deri!at din "#ML $Standard
Generalized Markup Language % limbaj standard
generalizat de marcare& dar este mult mai simplu 'iind
destinat numai paginilor (eb, a!nd caracteristici speci'ice
limbajelor descripti!e)
- documentele HTML sunt de tip text $*"+,,&
putnd 'i create cu orice editor de texte $Notepad,
Wordpad&-
- documentele HTML pot 'i !izualizate cu di'erite
browser-e .i sunt independente de plat'orma de lucru-
- HTML utilizeaz/ pentru descrierea documentelor
(eb tag-uri $eti!ete sau "ara#e& speci'ice pentru 'iecare
element descris, tag-urile stabilesc att structura
documentului ct .i aspectul acestuia.
0n tag este un identi'icator care 'urnizeaz/ bro(ser-
ului instruciuni de 'ormatare a documentului.
1tichetele HTML sunt ncadrate ntre paranteze
unghiulare < >, 2tag3 % eticheta de nceput .i 24tag3 %
eticheta de s'r.it. 1'ectul corespunz/tor etichetei este
aplicat textului dintre eticheta de nceput .i cea de s'r.it.
0nele elemente admit atribute ce conin in'ormaii
suplimentare despre coninutul elementelor. *tributele se
precizeaz/ n cadrul tag-ului de nceput, se separa prin
spaii .i se precizeaz/ sub 'orma) atribut=valoare.
5
Clasa a XII-a HTML
Structura unui document HTML
0n document HTML este delimitat de perechea de
etichete 2HTML3 .i 24HTML3 .i este constituit din)
*. antetul documentului delimitat de tag-
urile 2HEAD3 .i 24HEAD3, conine in'ormaii generale
despre document cum ar 'i)
- titlul dou"entului % cel care !a 'i a'i.at n bara
de titlu a 'erestrei bro(ser-ului .i este delimitat
de tag-urile <TITLE> .i <TITLE>-
- pentru alte in'ormaii suplimentare se utilizeaz/
eticheta <META> admite atributele)
o 6*M1 % conine un .ir de caractere ce
reprezint/ numele propriet/ii
$7*uthor8, 79e:(ords8, 7;escription8&
o +<6T16T % conine !aloarea asociat/
propriet/ii respecti!e $ntre 7 7&
=. corpul documentului delimitat de tag-urile
<B!D"> .i <B!D"> sau <#$AMESET> .i
<#$AMESET>, conine textul propriu-zis al
documentului .i elementele de 'ormatare ale acestuia.
1lementul =<;> admite urm/toarele atribute)
BACKGROUND=URL % $%L este un .ir de
caractere ce reprezint/ adresa Web a unei imagini care !a 'i
utilizat/ de bro(ser ca 'undal $bakground& pentru
document.
BGCOLOR=culoare % olor stabile.te culoarea
'undalului documentului $&ak'round Color&.
?n HTML culorile se pot speci'ica n dou/ moduri)
@
Clasa a XII-a HTML
- utiliznd denumirile prede'inite, cele mai uzuale sunt)
red, maroon, yellow, green, lime, teal, olive,
aqua, lue, navy, !ur!le, "uc#$ia, lac% (e&te
culoarea im'licita(, gray, $ilver, w#ite-
- utiliznd codul culorii $ &rrgg ( dat n 'ormatul
hexazecimal A#=) rr reprezint/ ro.u $de la BB la CC&-
gg reprezint/ !erde $de la BB la CC&- bb reprezint/
albastru $de la BB la CC&- aceste !alori reprezentnd
contribuia 'iec/rei culori de baz/ la culoarea creat/.
'()'=culoare % stabile.te culoarea textului.
L*NK=culoare % stabile.te culoarea cu care !or
'i marcate n text linD-urile ne!izitate.
+L*NK=culoare % stabile.te culoarea cu care
!or 'i marcate n text linD-urile !izitate.
AL*NK=culoare % stabile.te culoarea cu care !a
'i marcat n text linD-ul acti!.
LANG=cod,lima % lang speci'ic/ limba n
care este redactat documentul $pentru motoarele de c/utare,
sintetizatoare de !oce etc.& cum ar 'i) en) *r) el) ro etc.
D*R=L'R - R'L % speci'ic/ direcia de scriere a
textului) LT% ( de la stnga la dreapta $Le)t To %ig!t& sau
%TL ( de la dreapta la stnga $%ig!t to Le)t&.
+omentariile HTML % sunt texte pe care bro(ser-ul
nu le !a a'i.a. *cestea ncep cu 2E .i se termin/ cu -3.
<!Acesta este un comentariu. Browser-ul nu il vede->
F
Clasa a XII-a HTML
Laborator 1
a( 'rima+,tml
<HTML>
<HEAD>
<TITLE> -rima mea 'a.ina /eb <TITLE>
<META 0AME=1Aut,or1
2!0TE0T=1numele meu1>
<META 0AME=1De&cri'tion1
2!0TE0T=1-roiectarea 'a.inilor
/eb1>
<META 0AME=13e45ord&1
2!0TE0T=1HTML) 2SS1>
<HEAD>
<B!D" B62!L!$=6$A" TE7T=0A8">
 Acea&ta e&te 'rima mea 'a.ina /eb
 
<B!D">
<HTML>
b(culori+,tml
<HTML>
<HEAD>
<TITLE> Te&t de culoare <TITLE>
<HEAD>
<B!D" B62!L!$=9::::::>
<#!0T 2!L!$=9;;;;;;> Te&t de culoare
<#!0T>
<B$><#!0T 2!L!$=9<<<<<<> Te&t de culoare
<#!0T>
G
Clasa a XII-a HTML
<B$><#!0T 2!L!$=9======> Te&t de culoare
<#!0T>
<B$><#!0T 2!L!$=9>>>>>>> Te&t de culoare
<#!0T>
<B$><#!0T 2!L!$=9??????> Te&t de culoare
<#!0T>
<B$><#!0T 2!L!$=9@@@@@@> Te&t de culoare
<#!0T>
<B$><#!0T 2!L!$=9AAAAAA> Te&t de culoare
<#!0T>
<B$><#!0T 2!L!$=9::::::> Te&t de culoare
<#!0T>
<B$><#!0T 2!L!$=9BBBBBB> Te&t de culoare
<#!0T>
<B$><#!0T 2!L!$=9CCCCCC> Te&t de culoare
<#!0T>
<B$><#!0T 2!L!$=9AAAAAA> Te&t de
culoare <#!0T>
<B$><#!0T 2!L!$=9BBBBBB> Te&t de
culoare <#!0T>
<B$><#!0T 2!L!$=9222222> Te&t de
culoare <#!0T>
<B$><#!0T 2!L!$=9DDDDDD> Te&t de
culoare <#!0T>
<B$><#!0T 2!L!$=9EEEEEE> Te&t de
culoare <#!0T>
<B$><#!0T 2!L!$=9######> Te&t de
culoare <#!0T>
<B!D">
<HTML>
H
Clasa a XII-a HTML
#ormatarea teDtului
Cormatarea textului care apare ntr-un documente
HTML se poate 'ace)
- la ni!el de bloc $blo-le*el& % pot conine .i alte
elemente de 'ormatare .i ncep de la linie nou/-
- la ni!el de caracter % conin doar text sau alte
elemente de 'ormatare la ni!el de caracter.
#ruparea mai multor elemente HTML la ni!el de
bloc se realizeaz/ cu ajutorul tag-urilor <DI8> .i <DI8>.
Ientru gruparea mai multor elemente dintr-un bloc la ni!el
de caracter $inline& se utilizeaz/ tag-urile <S-A0> .i
<S-A0>.
Formatarea paragrafelor
?n HTML delimitarea paragra'elor se realizeaz/ cu
ajutorul tag-urilor <-> .i <->, eticheta de s'r.it 'iind
opional/.
Tag-ul <-> admite atributele)
ALI60 = LE#T E $I6HT E 2E0TE$ EJUSTI#"
TITLE
LA06
DI$
Ientru a stabili acela.i mod de grupare pentru mai
multe paragra'e, trebuie s/ le grup/m ntr-un singur bloc cu
ajutorul tag-ului <DI8>.
Ientru a insera n document o linie !id/ se utilizeaz/
tag-ul <B$>.
J
Clasa a XII-a HTML
Utilizarea paragrafelor titlu
Ciecare element structural al unui document, de
obicei, este precedat de un paragra' titlu $!eading&.
;ocumentele HTML pot 'i structurate pe .ase
ni!eluri, n 'uncie de importana lor, existnd .ase etichete
care de'inesc ni!elul paragra'ului titlu n structura
documentului) <H<>, <H=>, <H>>, <H?>, <H@>, <HA>.
1tichetele de s'r.it sunt obligatorii.
Tag-urile pentru paragra'e admit atributele) LA06)
DI$) TITLE) ALI60.
Formatarea la nivel de caracter
Irecizarea in'ormaiilor re'eritoare la 'ontul utilizat
de bro(ser pentru !izualizarea textului se realizeaz/ cu
ajutorul tag-urilor <#!0T> .i <#!0T>.
*tributele admise de eticheta <#!0T> sunt)
SIFE = valoare - stabile.te dimensiunea
caracterelor. Kaloarea dimensiunii poate 'i speci'icat/)
- n mod absolut % !alori naturale ntre 5 .i L-
- relati! la dimensiunea curent/ a caracterelor %
cu Mn sau %n mai mari sau mai mici.
2!L!$ = culoare
#A2E = li&taG*onturi % de'ine.te o list/ de
'onturi separate prin !irgul/, dintre care bro(ser-ul l !a
alege pe primul disponibil n ordinea pre'erinelor $alt'el !a
utiliza 'ontul implicit&.
;imensiunea implicit/ a 'ontului se poate modi'ica
utiliznd tag-ul <BASE#!0T> sub 'orma)
<BASE#!0T SIFE=?>
L
Clasa a XII-a HTML
Laborator 2
a) generalitati.html
<html>
<head>
<title>Limbajul HTML - Generalitati</title>
<meta name="Author" content="Cerasela Grigoras">
<meta name="escri!tion" content="Manual de HTML"
Generalitati">
<meta name="#e$%ords" content="HTML& generalitati&
in'ata"></head>
<bod$>
<!>HTML (H$!erTe)t Mar*u! Language+ este
limbajul utili,at in -orld -ide -eb !entru
descrierea hi!erte)telor" HTML nu este un limbaj de
!rogramare !ro!riu-,is& ci doar un limbaj de descriere&
continand elemente ce !ermit construirea !aginilor
-eb" </!>
<!>Limbajul HTML este deri'at din .GML (.tandard
Generali,ed Mar*u! Language - limbaj standard
generali,at de marcare+ dar este mult mai sim!lu /iind
destinat numai !aginilor %eb& a'and caracteristici
s!eci/ice limbajelor descri!ti'e0 </!>
<ul>
<li>documentele HTML sunt de ti! te)t (A.C11+
!utand /i create cu orice editor de te)te (2ote!ad&
-ord!ad+3 </li>
<li>documentele HTML !ot /i 'i,uali,ate cu di/erite
bro%ser-e si sunt inde!endente de !lat/orma de lucru3
</li>
<li>HTML utili,ea,a !entru descrierea documentelor %eb
tag-uri (etichete sau marcaje+ s!eci/ice !entru
/iecare element descris& tag-urile stabilesc atat
stabilesc atat structura documentului cat si as!ectul
acestuia" </li>
</ul>
<!>4n tag este un identi/icator care /urni,ea,a bro%ser-ului
instructiuni de /ormatare a documentului" 5tichetele
HTML sunt incadrate intre !arante,e unghiulare
6lt3 6gt3& 6lt3tag6gt3 - eticheta de ince!ut
si 6lt3/tag6gt3 - eticheta de s/arsit" 5/ectul
cores!un,ator etichetei este a!licat te)tului dintre
eticheta de ince!ut si cea de s/arsit" 4nele elemente
admit atribute ce contin in/ormatii su!limentare des!re
continutul elementelor" Atributele se !reci,ea,a in cadrul
tag-ului de ince!ut& se se!ara !rin s!atii si se
!reci,ea,a sub /orma0 </!>
<! align="center">atribut='aloare</!>
N
Clasa a XII-a HTML
</bod$>
</html>
b) index.html
<html>
<head>
<title>Limbajul HTML</title>
<meta name="Author" content="Cerasela Grigoras">
<meta name="escri!tion" content="Manual de HTML">
<meta name="#e$%ords" content="HTML& C..& in'ata">
</head>
<bod$ bgcolor="7C8C8C8" lin*="78899::" 'lin*="78899;;"
alin*="7CC<<::">
<h= align="center"><a hre/="html>generalitati"htm"></ont
/ace="Arial" color="788<<99">Limbajul HTML<//ont></a></h=>
<hr>
<h? align="le/t">.tructura unui document HTML</h?>
<h@ align="le/t">Laborator =</h@>
<hr>
<h? align="le/t">;ormatarea te)tului</h?>
<h< align="le/t">;ormatarea !aragra/elor</h<>
<h< align="le/t">4tili,area !aragra/elor titlu</h<>
<h< align="le/t">;ormatarea la ni'el de caracter</h<>
<h@ align="le/t">Laborator ?</h@>
<h< align="le/t">4tili,area seturilor de
caractere</h<>
<h< align="le/t">A!licarea unor e/ecte asu!ra
te)tului</h<>
<h< align="le/t">4tili,area citatelor </h<>
<h< align="le/t">4tili,area indicilor si
e)!onenetilor</h<>
<h< align="le/t">4tili,area te)tului !re/ormatat</h<>
<h@ align="le/t">Laborator <</h@>
<h< align="le/t">4tili,area listelor</h<>
<h@ align="le/t">Laborator @</h@>
<hr>
<h? align="le/t">1nserarea legaturilor in documente
HTML</h?>
<hr>
<h? align="le/t">1nserarea imaginilor in documente
HTML</h?>
</bod$>
</html>
O
Clasa a XII-a HTML
Utilizarea seturilor de caractere
+odul *"+,, s-a do!edit a 'i insu'icient pentru
reprezentarea in'ormaiilor pe Web. Irin urmare au 'ost
standardizate .i alte seturi de caractere.
"peci'icarea setului de caractere utilizat de un
document HTML se poate 'ace cu ajutorul etichetei
2META3. ;e exemplu pentru a speci'ica 'aptul c/
documentul utilizeaz/ diacritice se speci'ic/ n antetul
documentului urm/toarea declaraie)
<meta htt!-eAui'="Content-Language"
content="ro">
<meta htt!-eAui'="Content-T$!e"
content="te)t/html3
charset=%indo%s-=?B8">
prin atributul HTTI-1P0,K se pot speci'ica in'ormaii
asociate cmpurilor din antetul protocolului HTTI. ?n
cazul de mai sus !aloarea asociat/ cmpului numit
Content-T$!e este "te)t/html3
charset=%indo%s-=?B8"
"peci'icarea caracterelor care nu au corespondent pe
tastatur/ se poarte 'ace n dou/ moduri)
a& Irin intermediul codului numeric asociat ast'el)
QR; unde ; reprezint/ codul 0nicode al caracterului.
1xemple)
H9==AI reprezint/ J
H9<C?I reprezint/ K
H9=>BI reprezint/ L
H9=;AI reprezint/ M
5B
Clasa a XII-a HTML
b& Irin intermediul unor re'erine speciale, asociate
unor caractere 'olosite 'rec!ent. 1xemple)
HacircI reprezint/ J
HAcircI reprezint/ K
HltI reprezint/ <
H.tI reprezint/ >
Ham' reprezint/ H
HNuot reprezint/ O
Aplicarea unor efecte asupra tetului
Ientru a aplica unei zone de text un anumit e'ect, se
ncadreaz/ textul ntre eticheta de nceput .i cea de s'r.it,
corespunz/toare e'ectului respecti!.
Cormatarea textului se poate 'ace la ni!el 'izic
utiliznd urm/toarele tag-uri)
 tet 
a'licP &tilul bold teDtului+
 tet 
aplicS stilul nclinat textului.
 tet 
aplicS stilul subliniat textului.
<ST$I3E>tet<ST$I3E>
produce Tt/iereaT cu o linie a
textului coninut
<TT>tet<TT>
a'i.eaz/ textul n 'ontul
telet:pe $neproporional&, nu
este cunoscut de toate
bro(ser-ele
55
Clasa a XII-a HTML
?n HTML se pot aplica .i e'ecte logice, n
concordan/ cu semni'icaia textului respecti!)
<BI6>teDt<BI6>
a*iQeaRS teDtul cu
dimen&iune mai mare decJt
*ontul de baRS
teDt
a'i.eaz/ textul cu dimensiune
mai mic/ dect 'ontul de baz/
<D#0>teDt<D#0>
identi'ic/ un termen de
de'iniie .i-l scrie cu caractere
di'erite de textul nconjur/tor
teDt
e!ideniaz/ textul speci'icat,
de obicei prin scrierea italic/
<Hn>teDt<Hn>
aplic/ unul dintre cele .ase
'ormate prede'inite de antet
<3BD>teDt<3BD>
aplicS textului menionat un
'ont similar intr/rii de la
tastaturS, deci un 'ont
neproporional
<SAM->teDt<SAM->
aplicS textului din container
un 'ont asem/n/tor ie.irii de
calculator $neproporional&.
<ST$!06>teDt<ST$!06>
produce o e!ideniere
pronunat/ a textului
teDt
mutS textul selectat mai jos
dect linia de baza a textului
precedent si aplicS un 'ont
mai mic $'ace trecerea n
indice in'erior&
<SU->teDt<SU->
mutS textul selectat mai sus
dect linia de bazS a textului
precedent si aplicS un 'ont
mai mic $'ace trecerea n
indice superior&
5@
Clasa a XII-a HTML
Cormatarea la ni!el de comunicare se 'ace cu
ajutorul tag-urilor)
<ADD$ESS TALI60=le*tU
centerUri.,tV>
tet
<ADD$ESS>
permite !izualizarea unei
in'ormatii de adresS, uzual o
adresS de e-mail
<2ITE>tet<2ITE>
indicS o re'erin/, cum ar 'i un
nume de carte, articol, numele
unui autor. Ae'erin/ este
di'ereniat/ 'atS de textul
curent
<2!DE>tet<2!DE>
aplicS textului un 'ont
neproporional precum cel de
calculator $clasic&
<LISTI06>tet<LISTI06>
aplicS textului un 'ont similar
ie.irilor de calculator, este
utilizat pentru compatibilitate
cu !ersiuni mai !echi
<8A$>tet<8A$>
produce o e!ideniere a
textului, uzual prin trecerea n
italice.
Utilizarea citatelor !n documente HTML
Ientru inserarea de citate exist/ dou/ etichete)
<BL!23WU!TE> % utilizate pentru citate lungi .i
<W> % utilizate pentru citate scurte care nu conin mai
multe paragra'e.
*mbele necesit/ etichet/ de s'r.it, textul cuprins ntre cele
dou/ etichete 'iind un citat.
5F
Clasa a XII-a HTML
Utilizarea tetului preformatat
Irin utilizarea elementului IA1 se speci'ic/
bro(ser-ului 'aptul c/ textul scris ntre eticheta de nceput
.i cea de s'r.it este pre'ormatat adic/ bro(ser-ul !a
respecta ntocmai modul de spaiere, de identare, structura
liniilor .i dimensiunea 'ontului.
Irin intermediul atributului W,;TH se speci'ic/
num/rul maxim de caractere pe linie.
Laborator "
?ncadrai n documente HTML elementele prezentate mai
sus .i !izualizai-le n bro(ser.
<C>H<.4D>?</.4D>E
<HF>
<C>5=mc<.4C>?</.4C>
<HF>
<.TF1#5>Te)tul este scris
taiat"</.TF1#5>
<HF>
<5M>Te)tul este accentuat"</5M>
<HF>
<CF5 -1TH=?B>
=
= =
= ? =
= < < =
= @ 9 @ =
</CF5>
<HF>
5G
Clasa a XII-a HTML
<DLEC#G4ET5>
<!><.TFE2G>CF51267<B@3A</.TFE2G>
</!>
<!re>
CHnd teama 'ede ,idul
Credinta 'ede calea3
CHnd teama simte be,na
Credinta simte ,area3
CHnd teama trege In jos
Credinta In sus - mereu3
CHnd teama Intreaba0 6Auot3CineJ
6Auot3
Credinta s!une0 6Auot354K6Auot3"
</!re>
</DLEC#G4ET5>
5H
Clasa a XII-a HTML
Utilizarea listelor
0tilizarea listelor este necesar/ pentru prezentarea
in'ormaiilor n mod structurat. "e pot utiliza trei tipuri de
liste)
<+ Li&tele neordonate ($nordered List( % sunt
utilizate atunci cnd exist/ o leg/tur/ ntre elementele listei
dar nu se impune o anumit/ ordine a lor. *ceste liste sunt
ncadrate ntre tag-urile <UL> .i <UL>, 'iecare element al
listei 'iind precedat de tag-ul <LI> $List Ite"& care
introduce naintea elementului o bulin/.
La imbricarea listelor neordonate introduse prin UL,
ni!elele di'erite !or 'i di'ereniate prin buline de tipuri
di'erite. "electarea simbolului care preced/ 'iecare intrare
n list/ se realizeaz/ cu ajutorul atributului T"-E care
poate a!ea !alorile) di&c, circle .i &Nuare.
*tributul 2!M-A2T arat/ c/ distana dintre bulin/
.i text poate 'i redus/ $este posibil ca aceast/ opiune s/ nu
'uncioneze pe orice bro(ser&.
=+ Li&tele ordonate $+rdered List& % sunt utilizate
atunci cnd elementele listei trebuie prezentate ntr-o
anumit/ ordine. *ceste liste sunt ncadrate ntre tag-urile
<!L> .i <!L>) 'iecare element al listei 'iind precedat de
tag-ul <LI>. *tributele acceptate de tag-ul !L sunt)
- T"-E=<UaUAUiUI % care determin/ modul de
numerotare a intr/rilor n list/ .i poate a!ea !alorile) <
$pentru numerotare cu ci're arabe) 5, @, F,U&, a $intr/rile n
list/ !or 'i precedate de literele mici ale al'abetului latin) a,
b, c , U&, A $intr/rile n list/ !or 'i precedate de literele
mari ale al'abetului latin) *, =, +,U&, i $numerotarea se
5J
Clasa a XII-a HTML
'ace cu ci're romane mici) i, ii, iii,U&, I (numerotarea se
'ace cu ci're romane mari) ,, ,,, ,,,,U(+
- STA$T=numSr % stabile.te num/rul de la care
s/ se nceap/ numerotarea listei. Kaloarea implicit/ este 5V
aV*ViV,.
Ientru a modi'ica !aloarea cu care este automat
numerotat/ a intr/rii n list/ se include n tag-ul <LI>
corespunz/tore intr/rii respecti!e atributul)
- 8ALUE=numSr % unde num/r reprezint/
!aloarea de etichetare a intr/rii n lista respecti!/.
>+ Li&tele de de*iniXii $,e)inition List& % sunt cele n
care intr/rile sunt 'ormate din dou/ paragra'e) primul
corespunz/tor termenului iar al doilea, identat,
corespunz/tor de'iniiei termenului. +rearea unei ast'el de
liste este marcat/ cu tag-urile <DL> .i <DL>. Irin
urmare o intrare n list/ !a a!ea dou/ componente)
- termenul marcat cu tag-ul <DT> (,e)inition
Ter"( care poate conine doar elemente de 'ormatare
inline.
- de'iniia termenului marcat/ cu tag-ul <DD>
(,e)inition ,esription( care poate conine .i elemente de
'ormatare la ni!el de bloc.
5L
Clasa a XII-a HTML
Laborator #
?ncadrai n documente HTML elementele
prezentate mai sus .i !izualizai-le n bro(ser.
<UL COMPACT TYP!dis">
<L#>element $rinci$al
<UL COMPACT TYP!s%uare>
<L#>element secundar
<&UL>
<&UL>
<OL COMPACT 'TA(T!) TYP!)>
<L#>$rimul element
<UL COMPACT TYP!s%uare>
<&UL>
<L#>al doilea element
<L#>al treilea element
<L#>al $atrulea element
<&OL>
5N
Clasa a XII-a HTML
<*L COMPACT>
<*T>+a,aner-<&*T>
<**>dans $o$ular cu,ane./ cu miscare
moderat-<&**>
<*T>+a,itaclu<&*T>
<**><OL>
<L#>locas s$ecial al com$asului $e o
nav-
<L#>s$atiu 0ntr-un avion/ 0ntr-o
ma1in2 $entru ec+i$a3/ c-l-tori
etc.
<&OL>
.....
<*T>+a$$4-end<&*T>
<**>s56r1it 5ericit<&**>
<&*L>
5O
Clasa a XII-a HTML
In&erarea tabelelor in documente HTML
Tabelele permit organizarea in'ormaiilor ntr-un
document HTML. ,nserarea unui tabel se 'ace prin
intermediul tag-urilor <TABLE> .i <TABLE>.
Tag-ul T*=L1 admite urm/toarele atribute)
SUMA$$" = teDt % speci'ic/ o descriere a
rolului .i structurii tabelului, aceste in'ormaii nu sunt
!izualizate n pagina Web-
ALI60 = LE#T E $I6HT E2E0TE$ %
speci'ic/ alinierea tabelului n document-
/IDTH = valoare % speci'ic/ l/imea ntregului
tabel- !aloarea poate 'i speci'icat/ n num/r de pixeli sau n
procente-
HEI6HT = valoare % speci'ic/ n/limea
ntregului tabel- !aloarea poate 'i speci'icat/ n num/r de
pixeli sau n procente-
B!$DE$ = valoare % speci'ic/ n num/r de
pixeli grosimea liniei chenarului din jurul tabel-
2!LS = valoare % speci'ic/ num/rul de coloane
ale tabelului-
2ELLS-A2I06 = valoare % speci'ic/ spaiul
dintre celule .i spaiul dintre celule .i marginea tabelului-
2ELL-ADI06 = valoare % speci'ic/ spaiul
dintre chenarul celulei .i spaiul coninutul ei- !aloarea
poate 'i speci'icat/ n num/r de pixeli sau n procente-
+oninutul elementului T*=L1 este constituit din
liniile tabelului. "peci'icarea unei linii se realizeaz/ cu
ajutorul elementului T$ (Table Ao(() ntre eticheta de
@B
Clasa a XII-a HTML
nceput <T$> .i cea de s'r.it <T$> $opional/& 'iind
descrise celulele de pe linia respecti!/.
-xe"plu.
<TADL5>
<TF> continutul !rimei linii
<TF> continutul celei de a doua linii </TF>
</TADL5>
"peci'icarea celulelor care constituie o linie se
realizeaz/ prin intermediul elementelor TH (Table
Header() pentru celulele care constituie antetul tabelului
$capul de tabel&, respecti! TD $Table ;ata& pentru celulele
care conin in'ormaiile din tabel.
1lementele TH .i TD admit urm/toarele atribute)
$!/S-A0 = numSrGdeGlinii % speci'ic/
num/rul de linii acoperite de celula respecti!/- !aloarea
implicit/ este 5- !aloarea B semni'ic/ 'aptul c/ aceast/
celul/ acoper/ toate liniile ncepnd cu cea curent/-
2!LS-A0 = numSrGdeGcoloane % speci'ic/
num/rul de coloane acoperite de celula respecti!/- !aloarea
implicit/ este 5- !aloarea B semni'ic/ 'aptul c/ aceast/
celul/ acoper/ toate coloanele ncepnd cu cea curent/-
/IDTH = valoare % speci'ic/ l/imea celulei
n num/r de pixeli-
HEI6HT = valoare % speci'ic/ n/limea
celulei n num/r de pixeli-
@5
Clasa a XII-a HTML
Laborator $
<html>
<head>
<meta name="escri!tion" content="1nserarea tabelelor">
<title>Laborator B</title>
</head>
<bod$>
<table border="?" %idth="B8L" align="center">
<tr>
<th cols!an="B" bgcolor="7AA;;;;">EFAF</th>
</tr>
<tr>
<th>Luni</th>
<th>Marti</th>
<th>Miercuri</th>
<th>Moi</th>
<th>Nineri</th>
</tr>
<tr>
<td>Matematica</td>
<td>5</td>
<td>Geogra/ie</td>
<td>esen Tehnic</td>
<td ro%s!an="?">1n/ormatica-TAC</td>
</tr>
<tr>
<td>;i,ica</td>
<td ro%s!an="?">LD" Fomana</td>
<td>D</td>
<td></td>
</tr>
<tr>
<td>M</td>
<td>1</td>
<td>5</td>
<td>D</td>
</tr>
<tr>
<td>L</td>
<td>C</td>
<td>D</td>
<td>1</td>
<td>D</td>
</tr>
</table>
</bod$>
</html>
@@
Clasa a XII-a HTML
@F
Clasa a XII-a HTML
In&erarea le.aturilor in documente HTML
Irincipala caracteristic/ a hipertextelor o constituie
utilizarea leg/turilor $linDs&. 0n linD este o conexiune c/tre
o alt/ resurs/ Web $un alt hipertext sau o imagine, o
sec!en/ !ideo sau audio, un program etc.&, resurs/ care
poate 'i accesat/ din 'ereastra bro(ser-ului printr-un
simplu clic.
Limbajul HTML conine multiple elemente prin
intermediul c/rora se poate crea o leg/tur/ c/tre resurse
Web)
- IM6 % creeaz/ o leg/tur/ c/tre o imagine-
- LI03 % speci'ic/ leg/turi c/tre resurse utile-
- A % creeaz/ o leg/tur/ c/tre o resurs/ Web ntr-
un document HTML-
- A--LET % creeaz/ o leg/tur/ c/tre un program
executabil pe calculatorul utilizatorului.
%lementul A
Ientru a crea un linD ntr-un document HTML se
utilizeaz/ tag-ul A $anchor - ancor/&. textul scris ntre tag-
ul de nceput 2A3 .i cel de s'r.it 24A3 !a ap/rea
e!ideniat n 'ereastra bro(ser-ului) subliniat, colorat n
'uncie de !alorile atributelor LI03) 8LI03) ALI03.
*tributele speci'ice elementului A sunt)
H$E# = U$L % speci'ic/ adresa resursei la care se
'ace leg/tura-
0AME = QirGdeGcaractere % asociaz/ un nume unic
ancorei curente, ast'el nct s/ poat/ constitui inta unui
alt linD-
@G
Clasa a XII-a HTML
TITLE = QirGdeGcaractere % asociaz/ un nume
resursei la care se 'ace leg/tura. =ro(ser-ul !a a'i.a
titlul resursei cnd utilizatorul deplaseaz/ mouse-ul
deasupra leg/turii.
-xe"plu.
<a hre/="html>generalitati"htm">Limbajul HTML</a>
+bser*a/ii)
- se poate de'ini o ancor/ !id/-
-xe"plu.
<a name=O1nce!utO></a>
PP
<a hre/="7ince!ut">e la ince!ut</a>
- pentru a speci'ica drept int/ o ancor/ dintr-un alt
document se utilizeaz/ notaia)
adre&a9numeGancorS-
-xe"plu.
<a hre/="Lin*uri"htm7element>A">5lementul A</a>
- nu este permis/ utilizarea imbricat/ a leg/turilor-
- protocolul care permite trimiterea unui mesaj e-mail
dintr-un program de na!igare este mailtoY
mailtoYadre&SZde&tinatar +
%lementul L&'(
"pre deosebire de A elementul LI03 poate 'i plasat
numai n antetul documentului $n seciunea H1*;&.
1lementul L,69 admite acelea.i atribute ca .i elementul *
dar nu are etichet/ de s'r.it.
1lementul L,69 permite 'urnizarea di'eritor
in'ormaii cum ar 'i cele despre autor, !ersiunile n alte
limbi ale documentului, !ersiuni anterioare etc.
@H
Clasa a XII-a HTML
%lementul )AS%
"peci'icarea adreselor resurselor Web la care se
creeaz/ leg/turi n documente HTML se poate 'ace att n
mod absolut ct .i n mod relati!.
?n cazul speci'ic/rii relati!e a adreselor se consider/
implicit c/ adresa de baz/ este locaia curent/. Irin
intermediul elementului BASE exist/ posibilitatea de a
speci'ica explicit adresa de baz/ a 0AL-urilor speci'icate
n mod relati!.
<BASE H$E#=U$L>
0rl-ul trebuie s/ 'ie speci'icat n mod absolut $calea
lung/&. 1lementul =*"1 este plasat n antetul
documentului .i nu are tag de s'r.it.
@J
Clasa a XII-a HTML
Laborator *
<html>
<head>
<title>Limbajul HTML</title>
<meta name="escri!tion" content="1nde)">
</head>
<body bgcolor="7C8C8C8" lin*="78899::" 'lin*="78899;;"
lin*="7CC<<::">
<h= align="center"><a hre/="html>generalitati"htm"></ont
/ace="Arial" color="788<<99">Limbajul HTML<//ont></a></h=>
<hr>
<h? align="le/t"><a hre/=".tructura"htm">.tructura unui
document HTML</a></h?>
<h@ align="le/t"><a hre/="lab ="htm">Laborator =</a></h@>
<hr>
<h? align="le/t"><a hre/=";ormatare>te)t"htm">;ormatarea
te)tului</a></h?>
<ul>
<li><h< align="le/t"><a
hre/=";ormatare>te)t"htm7/ormat>!aragra/">;ormatarea
!aragra/elor</a></h<> </li>
hre/=";ormatare>te)t"htm7!aragra/>titlu">4tili,area
!aragra/elor titlu</a></h<></li>
<li> <h< align="le/t"><a
hre/=";ormatare>te)t"htm7/ormat>caracter">;ormatarea la
ni'el de caracter</a></h<></li></ul>
<h< align="le/t"><a hre/="lab ?"htm">Laborator ?</a></h<>
<ul>
hre/=";ormatare>te)t"htm7set>caracter">4tili,area
seturilor de caractere</a></h<> </li>
hre/=";ormatare>te)t"htm7a!lic>e/ect">A!licarea unor
e/ecte asu!ra te)tului</a></h<> </li>
hre/=";ormatare>te)t"htm7utili,>citat">4tili,area
citatelor</a> </h<> </li>
hre/=";ormatare>te)t"htm7te)t>!re/ormatat">4tili,area
te)tului !re/ormatat</a></h<> </li></ul>
<h@ align="le/t"><a hre/="lab <"htm">Laborator <</a></h@>
<ul>
hre/=";ormatare>te)t"htm7utili,>liste">4tili,area
listelor</a></h<> </li></ul>
<h@ align="le/t"><a hre/="labL?8@"htm">Laborator @</a></h@>
<hr>
PPPPPPPPPPPPPPPPPPPPPPPPPPPP""
</body></html>
@L
Clasa a XII-a HTML
In&erarea ima.inilor in documente HTML
1lementul IM6 permite inserarea imaginilor,
A--LET permite inserarea de applet-uri scrise n limbajul
0a*a iar elementul !BJE2T permite inserarea elementelor
multimedia ntr-un document HTML.
%lementul &MG
1lementul IM6 permite inserarea imaginilor. *cesta
nu are coninut .i nu admite tag de s'r.it. "peci'icarea
imaginii ce urmeaz/ a 'i inserat/ se 'ace prin intermediul
atributului)
S$2 = U$L % care speci'ic/ adresa 'i.ierului care
conine imaginea. +ele ma utilizate 'ormate de imagini
pentru pagini (eb sunt) +.i* .i +['e.-
ALT = teDt % speci'ic/ un text alternati! care !a 'i
a'i.at n locul imaginii de bro(ser-ele care nu pot
!izualiza imagini-
HEI6HT = dimen&iune % n/limea imaginii-
/IDTH = dimen&iune % l/imea imaginii-
;imensiunea poate 'i exprimat/ n num/r de pixeli sau
procente $re'eritoare la spaiul disponibil .i nu la
dimensiunea imaginii&-
ALI60 = valoare % speci'ic/ modul de aliniere a
imaginii n raport cu textul. Kaloare pote 'i) T!-)
MIDDLE) B!TT!M) LE#T) $I6HT-
B!$DE$ = numarG'iDeli % speci'ic/ grosimea
chenarului n care !a 'i ncadrat/ imaginea-
@N
Clasa a XII-a HTML
HS-A2E = dimen&iune % speci'ic/ spaiul inserat n
stnga .i n dreapta imaginii-
8S-A2E = dimen&iune % speci'ic/ spaiul inserat n
partea de sus .i n partea de jos a imaginii.
&nserarea unei legaturi pe o imagine
Irin utilizarea elementului IM6 drept coninut al
elementului ancor/ <A> se poate insera n document o
leg/tur/ pe o imagine adic/ prin acionarea imaginii printr-
un clic !a 'i accesat/ resursa destinaie.
@O
Clasa a XII-a HTML
Laborator +
a( Lab : end+,tml
<html>
<head>
<title>The 5nd</title>
</head>
<bod$>
<!><img src="Cat="j!g" %idth="@QB"
height="<B9"></!>
<! align="le/t"></ont si,e="B">The
5nd<//ont></!>
</bod$>
</html>
b( Lab :+,tml
<html>
<head>
<title>Mouse</title>
</head>
<bod$>
<! align="center"><a hre/="lab
L?8QL?8end"htm"><img border="="
src="mouseaero"j!g" %idth="B88"
height="<98"></a></!>
<! align="center">6nbs!3</!>
<! align="center"></ont
si,e="B">Mouse-ul
,burator<//ont></!>
</bod$>
</html>
!b&ervaXieY
W@B % spaiu
FB
Clasa a XII-a HTML
2U-$I0S
LIMBAJUL HTML+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++<
Structura unui document HTML++++++++++++++++++++++++++++++++++++++++++++++++++++=
Laborator 12222222222222222222222222222222222222222222222222222222222222222222222222222222223
#ormatarea teDtului++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++A
Cormatarea paragra'elor..................................................................J
0tilizarea paragra'elor titlu.............................................................L
Cormatarea la ni!el de caracter.......................................................L
Laborator 42222222222222222222222222222222222222222222222222222222222222222222222222222222225
0tilizarea seturilor de caractere.....................................................5B
*plicarea unor e'ecte asupra textului............................................55
0tilizarea citatelor n documente HTML......................................5F
0tilizarea textului pre'ormatat......................................................5G
Laborator 6222222222222222222222222222222222222222222222222222222222222222222222222222222213
0tilizarea listelor...........................................................................5J
Laborator 3222222222222222222222222222222222222222222222222222222222222222222222222222222215
In&erarea tabelelor in documente HTML+++++++++++++++++++++++++++++++++++++=;
Laborator 7222222222222222222222222222222222222222222222222222222222222222222222222222222244
In&erarea le.aturilor in documente HTML++++++++++++++++++++++++++++++++++=?
1lementul *...................................................................................@G
1lementul L,69............................................................................@H
1lementul =*"1...........................................................................@J
Laborator 8222222222222222222222222222222222222222222222222222222222222222222222222222222249
In&erarea ima.inilor in documente HTML+++++++++++++++++++++++++++++++++++=B
1lementul ,M#..............................................................................@N
,nserarea unei legaturi pe o imagine..............................................@O
Laborator 922222222222222222222222222222222222222222222222222222222222222222222222222222226:
2U-$I0S+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++><
F5

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

HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Clasa a XII-a HTML

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