Curs HTML

Curs HTML
1
HTML (Hyper Text Markup Language)

Introducere

Ultima versiune a HTML-ului Ioloseste unele idei si modiIicri propuse pentru HTML 3,
care au Iost abandonate la aparitia HTML 3.2.
HTML 4 propune separarea stilurilor Iizice de marcarea continutului printr-o Iolosire mai intens a
Ioilor de stil. Elementul Irame este acum deIinit oIicial altundeva dect n produsele Iirmelor
Nestcape sau MicrosoIt. Include elementele style, div, span pentru ncorporarea Ioilor de stil.
Eticheta object este de asemenea extins, astIel s includ practic orice Iisier extern care se doreste
introdus ntr-o pagin Web. Sunt introduse etichetele ins si del, acronym, colgroup, Iieldset, button.

HTML e un limbaj bazat pe $ML (Standard Generalized Murkup Language Limbaj
Standard Generalizat de Marcare) care este un standard international ce a Iost aprobat n 1986 si
care permite crearea de documente hipertext pentru paginile Web. Principalele caracteristici ale
limbajului SGML sunt:

1. escrierea structurii documentului;
2. Nu este descris aranjarea n pagin;
3. Permite Iiecrui navigator s aib propria prezentare;
4. Un document HTML poate Ii reutilizabil.

Standardul oIicial HTML este dat de World Wide Web Consortium (W3C) care este aIiliat la
Internet Engineering Task Force (IETF). W3C a enuntat cteva versiuni ale speciIicatiei HTML,
printre care si HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 si, cel mai recent, HTML 4.01.
Fiecare din aceste standarde este mai mult sau mai putin suportat de ctre toate sau o parte din
browsere.

La ora actual HTML 4.0 este larg utilizat si au Iost deja publicate speciIicatiile HTML 4.01.
Limbajul HTML oIer proiectantilor de pagini Web urmtoarele posibilitti:

1. S publice documente cu headere, texte, tabele, liste, IotograIii, etc;
2. S regseasc on-line inIormatiile prin intermediul hiperlink-urilor printr-un simplu click
de mouse;
3. S proiecteze Iormulare pentru realizarea tranzactiilor cu servere aIlate la distant pentru
cutri de inIormatii sau pentru activitti speciIice comertului;
4. S includ Ioi de calcul tabelar, clipuri video, sunete si alte aplicatii direct n documente.

Elementul esential diIerit adus de versiunea 4.0 si mai ales 4.01 Iat de versiunea 3.2 este
posibilitatea separrii structurii unui document de prezentarea lui prin introducerea 'stilurilor de
documente (style sheet).

Prin utilizarea limbajului HTML pentru structurarea unui document si style sheet-urile pentru
a stiliza prezentarea acestuia, se poate obtine mult mai usor independenta de
periIeric/computer/platIorma hard-soIt.

Limbajul HTML a Iost preIerat pentru publicatii pe Web n primul rnd datorit simplittii
sale si n al doilea rnd deoarece permite Iormatarea textului ASCII cu tag-uri n Iormat ASCII.

Curs HTML

2

Cap. 1: HTML DE BAZ

------------------------------------------------------------------
1.1. $TRUCTURA UNUI DOCUMENT HTML
------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE> Formatare paragraI intr-un document HTML
</TITLE>
</HEAD>
<BODY>
Salut!
Ma numesc Alina si sunt eleva la un liceu din Brasov. Acum este tare tarziu, dar cum
somnul intarzie sa vina iata-ma hai-hui pe Internet. Saptamana viitoare trebuie sa prezint la ora de
engleza un reIerat cu tema "Internetul, viitorul omenirii?" in care voi vorbi despre implicatiile pe
care le are inIormatica si, in special, Internetul in viata omului viitorului. Sigur ca trebuie sa Iie o
viziune a mea asupra viitorului si nu o proIetie. aca tu, draga mea prietene de pe Internet, m-ai
putea ajuta cu cateva sugestii in realizarea acestui reIerat ti-as ramane indatorata.
</BODY>
</HTML>

------------------------------------------------------------------
1.2. FORMATAREA PARARAFELOR

1.2.1. Trecerea la linie noua
Marcajul <BR>. El se poate Iolosi si in combinatie cu parametrul CLEARoptiune, optiune
ce Iorteaza trecerea la linie noua Iata de marginea speciIicata.
Valorile posibile pentru optiune sunt leIt, right, all.
------------------------------------------------------------------
<HTML>
<HEAD>
</TITLE>
</HEAD>
<BODY>
Salut! <BR CLEARall>
Ma numesc Alina si sunt eleva la un liceu din Brasov. Acum este tare tarziu, dar cum
somnul intarzie sa vina iata-ma hai-hui pe Internet. <BR> Saptamana viitoare trebuie sa prezint la
ora de engleza un reIerat cu tema "Internetul,viitorul omenirii?" in care voi vorbi despre implicatiile
pe care le are inIormatica si, in special, Internetul in viata omului viitorului. Sigur ca trebuie sa Iie o
viziune a mea asupra viitorului si nu o proIetie. </BR>
aca tu, draga mea prietene de pe Internet, m-ai putea ajuta cu cateva sugestii in
realizarea acestui reIerat ti-as ramane indatorata.
</BODY>
</HTML>
------------------------------------------------------------------
------------------------------------------------------------------
1.2.2. $pecificarea unui paragraf
Marcajul <P>...<P/P>
------------------------------------------------------------------
<HTML>
Curs HTML

3
<HEAD>
</TITLE>
</HEAD>
<BODY>
Salut!
<P>Ma numesc Alina si sunt eleva la un liceu din Brasov. Acum este tare tarziu, dar cum
somnul intarzie sa vina iata-ma hai-hui pe Internet. </P>
<P>Saptamana viitoare trebuie sa prezint la ora de engleza un reIerat cu tema "Internetul,
viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are inIormatica si, in special,
Internetul in viata omului viitorului. Sigur ca trebuie sa Iie o viziune a mea asupra viitorului si nu o
proIetie. </P>
<P>aca tu, draga mea prietene de pe Internet, m-ai putea ajuta cu cateva sugestii in
realizarea acestui reIerat ti-as ramane indatorata.</P>
</BODY>
</HTML>

------------------------------------------------------------------
1.2.3. Alinierea unui paragraf
Marcajul <P>...<P/P> se imbogateste cu optiunea align.
Optiunea align poate primi ca valoare unul din cuvintele: leIt, right, center.
------------------------------------------------------------------
<HTML>
<HEAD>
</TITLE>
</HEAD>
<BODY>
<P align"center">Salut!</P>
<P>Ma numesc Alina si sunt eleva la un liceu din Brasov. Acum este tare tarziu, dar
cum somnul intarzie sa vina iata-ma hai-hui pe Internet. </P>
<P>Saptamana viitoare trebuie sa prezint la ora de engleza un reIerat cu tema
"Internetul, viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are inIormatica si, in
special, Internetul in viata omului viitorului. Sigur ca trebuie sa Iie o viziune a mea asupra viitorului
si nu o proIetie. </P>
<P>aca tu, draga mea prietena de pe Internet, m-ai putea ajuta cu cateva sugestii in
</BODY>
</HTML>

------------------------------------------------------------------
------------------------------------------------------------------
1.2.4. Centrarea textului
Marcajul <CENTER>...</CENTER> are ca eIect centrarea rapida a textului.
Are acelasi eIect ca marcajul P align"center"~.../P~}
------------------------------------------------------------------

<HTML>
<HEAD>
</TITLE>
</HEAD>
Curs HTML

4
<BODY>
<CENTER> Salut! </CENTER>
<P>Ma numesc Alina si sunt eleva la un liceu din Brasov. Acum este tare tarziu, dar
cum somnul intarzie sa vina iata-ma hai-hui pe Internet. </P>
<P>Saptamana viitoare trebuie sa prezint la ora de engleza un reIerat cu tema
"Internetul, viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are inIormatica si, in
special, Internetul in viata omului viitorului. Sigur ca trebuie sa Iie o viziune a mea asupra viitorului
si nu o proIetie. </P>
<P>aca tu, draga mea prietene de pe Internet, m-ai putea ajuta cu cateva sugestii in
</BODY>
</HTML>

------------------------------------------------------------------
1.3. FORMATAREA FONT-URILOR
------------------------------------------------------------------
Un Iont reprezinta un set de caractere (256) cu un aspect graIic unitar.

$tiluri de afisare: ingrosat, inclinat, subliniat.
Marcajul <B>...</B> este Iolosit daca vrem ca un cuvant sau o portiune din text sa
ne apara ingrosat.
Marcajul <I>...</I> este Iolosit daca vrem ca un cuvant sau o portiune din text sa
ne apara ingrosat.
Marcajul <U>...</U> este Iolosit daca vrem ca un cuvant sau o portiune din text sa
ne apara subliniat.

1.3.1. Nivele de titlu
Marcajele <Hn>...</Hn> pun in evidenta nivelele de subtitlu al unui document; n poate lua
valori de la 1 la 6. Cel mai inalt nivel este 1, apoi nivelul descreste pana la nivelul 6, nivelul 6 Iiind
cel mai mic nivel.

1.3.2. Alegerea tipului de font
Marcajul <FONT>...</FONT> impreuna cu optiune face (ce va primi ca valoare numele
Iontului ce intentionam sa-l Iolosim incadrat de ghilimele) -~ permite alegerea tipului de Iont cu
care dorim sa Iie aIisat textul.
<FONT face"Courier, Arial">...</FONT>

1.3.3. Alegerea dimensiunii caracterelor
Marcajul <FONT>...</FONT> impreuna cu optiune size (ce va primi ca valoare un
numar incadrat intre ghilimele).
<FONT face"Courier,Arial" size"4">...</FONT>

1.3.4. Alegerea culorii font-ului
Marcajul <FONT>...</FONT> impreuna cu optiune color. Valoarea acestei optiuni va Ii
numele in limba engleza incadrat de ghilimele sau codul culorii precedat de semnul # si incadrat, de
asemenea, de ghilimele.
<FONT face"Courier,Arial" size"4" color"red">...</FONT>
<FONT face"Courier,Arial" size"4" color"#FF0000">...</FONT>

Curs HTML

5
------------------------------------------------------------------
1.4. LINII DE DELIMITARE $I COMENTARII
------------------------------------------------------------------

1.4.1. Marcajul <HR>, plasat oriunde in document, are ca eIect trasarea unei linii
orizontale.
Se poate Iolosi in combinatie cu parametrii: SIZEoptiune, WITHoptiune,
ALIGHoptiune si NOSHAE.
- optiunea parametrului SIZE este un numar ce stabileste grosimea liniei;
- optiunea parametrului WITH poate stabili cat la din latimea paginii va ocupa rigla
respectiva;
- parametrul ALIGN se utilizeaza impreuna cu parametrul WITH si optiunea lui are drept
eIect Iortarea liniei Iata de marginea speciIicata. Valorile posibile pentru optiune sunt leIt, right.
- optiunea COLOR stabileste culoarea riglei;
- prin prezenta parametrului NOSHAE, Iara nici o optiune, se dezactiveaza aIisarea umbrei
pentru rigla orizontala.

1.4.2. Comentarii
Comentariile sunt texte incadrate intre !-- si --~.
Rolul comentariilor este de a Iace un document HTML mai usor de inteles prin plasarea
unor expicatii din loc in loc. Ele nu vor Ii aIisate in cuprinsul paginii Web creata prin documentul
respectiv.
TA-uri HTML
n limbajul de marcare a hipertextului totul se rezum la structur. Un limbaj de marcare este Iolosit
pentru a descrie care este rolul Iiecrei prti din document n raport cu celelalte.

Terminologia HTML:
a) atribut: Iurnizeaz instructiuni aditionale despre o etichet. InIormatiile variaz de la
etichet la etichet si pot include subiecte cum ar Ii locatia Iisierelor, mrimea, numele lor sau
stiloul lor;

b) browser: este un motor de parcurgere special care evalueaz etichetele si continutul unui
Iisier HTML, pe care l aIiseaz n concordant cu posibilittile si regulile platIormei si capacittile
sale;

c) element: o component distinctiv a structurii unui document, cum ar Ii titlul, un paragraI
sau o list. Cnd ne reIerim la Iorma sa aplicat n cadrul unui document, un element se mai
numeste etichet (tag);

d) etichet. un cod care identiIic un element pentru ca browserul sau alt program de
parcurgere s stie n ce mod s aIiseze continutul. Etichetele sunt ncadrate de caractere de
delimitare (paranteze ascutite) Ele sunt ntotdeauna cuprinse ntre paranteze unghiulare (<>) iar
utilizarea literelor mici sau mari n scriere nu au important.

ocumentele HTML sunt Iisiere text (ASCII). n text sunt inserate o serie de coduri asa numitele
tag-uri sau marcafe care stau la baza modurilor de aIisare a documentului. Un document HTML
este compus din tag-uri si text curat. ocumentele au componente asemntoare cum ar Ii titluri,
tabele, liste, paragraIe etc.
Tag-urile HTML sunt Iolosite tocmai pentru a marca elementele comune, care pot contine text,
graIic sau alte elemente. Tag-urile sunt de Iorma pereche nceput-sIrsit:

Curs HTML

6

Scrierea perechilor de legturi:

CORECT INCORECT

Tag-uri din cadrul documentului HTML
Fiecare document HTML, nc de la creare are dou prti principale: un antet si un corp. Chiar dac
nu sunt special delimitate, HTML presupune existenta lor. HTML oIer de asemenea sansa de a
aduga si alte componente Iunctionale paginii, sub Iorma Ioilor de stil, scripturilor si seturilor de
cadre.
esi Iac parte din deIinirea unui document HTML, dou etichete exist n aIara structurii
documentului: doctype si html. Prima identiIic versiunea de HTML Iolosit pentru pagina
respectiv si regulile pe care acestea le respect. A doua etichet identiIic un limbaj global si
directia textului pentru documentul respectiv, n plus marcheaz nceputul si sIrsitul continutului
HTML.

ocumentul HTML se indic prin tag-ul HTML

HTML~........................./HTML~

Vom prezenta numai o parte din tag-urile HTML, care sunt importante in realizarea unui design
atragator.
Se considera ca limbajul HTML este stapinit de catre student, avindu-se in vedere ca au absolvit
cursul de Tehnici multimedia.
Culori, fonturi, margini
O pagin Web poate Ii setat prin:
- alegerea culorii de Iond
- alegerea culorii textului si
- alegerea dimensiunilor paginii

tag1~
tag2~
/tag1~
/tag2~
tag1~
tag2~
/tag2~
/tag1~

tag~............................./tag~

continut arbitrar
tagul de sIrsit care are
caracterul slash (/ )
tagul de
nceput
Curs HTML

7
Culoarea de fond
Culoarea se obtine din amestecul a celor trei culori Iundamentale: rosu, verde si albastru.
Culoarea de Iond a unei pagini Web se speciIic utilizand :
O nume de culoare. AstIel sunt disponibile cel putin 16 nume de culori, astIel avem
urmatoarele nume: red, green, blue, aqua, black, Iuchsia, gray, lime, maroon, navy,
olive, purple, silver, teal, white si yellow.
O secventa hexazecimala ~#rrggbb unde r,g sau b sunt ciIre hexazecimale si pot lua
valorile din multime 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, , e, E, I, F};astIel se
pot deIini 65536 de culori.
O functia rgb(r,g,b), unde r,g si b iau valori din multimea numerelor naturale
0,1,2.255}

Culoare pentru tag-ul body
Culoarea unei pagini se precizeaz prin intermediul unui atribut al etichete body~.

Sintaxa:
body bgcolor culoare~,
unde culoare se stabileste dup modelul precizat mai sus.

Exemplu a unei pagini Web cu Iondul de culoare 'cyan:

Culoarea textului
eIinirea culorii textului pentru o pagini Web se Iace prin intermediul atributului text al etichetei
body~

Sintaxei:
body text culoare~,
unde culoare se precizeaz la Iel ca la exemplul precedent.

Pagina de Web urmtoare are textul de culoare rosie:

Curs HTML

8

Atribute multiple

O eticheta poate sa aiba mai multe atribute.
O eticheta cu trei attribute are urmatoarea sintaxa:

Sintaxa:
eticheta atribut1 valoare1 atribut2 valoare2 atribut3 valoare3~

Exemplu: Pagin Web cu textul de culoare albastr si Iondul de culoare galben:

Textul de baz (basefont)
Atributele textului de baza dintr-o pagina Web sunt:
Mrime (size)
Culoare (color)
Font (style)
Curs HTML

9

Sintaxa:
baseIont size numr color culoare style font~
unde:
numr poate lua una dintre valorile din multimea 1, 2, 3, 4, 5, 6, 7 }
(valoarea 1 Iiind pentru Iontul cel mai mic si valoarea 7 pentru Iontul cel mai
mare)

culoare se precizeaz prin nume sau prin RGB
font poate Ii un Iont generic din multimea ,seriI, 'sans seriI, cursive, monospace, Iantasy,
Times New Roman, 'Helvetica, 'Arial }

Semantica:
Eticheta (Tag-ul) baseIont este valabil pn la sIrsitul paginii sau pn apare urmtoarea
etichet baseIont~.

n cazul n care eticheta baseIont~ lipseste , textul din pagina Web are atributele prestabilite si
anume:
size3,
colorblack
styleTimes New Roman

Marginile paginii Web
Se Iace cu ajutorul a dou atribute ale etichetei body~:
leItmargin distanta dintre marginea din stnga a Ierestrei browserului si marginea din
stnga a continutului paginii
topmargin distanta dintre marginea de sus a Ierestrei browserului si marginea de sus a
continutului paginii

Valorile care se pot atribuii celor doua atribute sunt :
numere ntregi pozitiv, care indica distanta dintre continutul Ierestrei si Iereastra
browserului, distanta msurat n pixeli
un procent, ce reprezinta procent din ltimea, respectiv, nltimea Ierestrei browserului

Curs HTML

10

$tilurile blocurilor de text

$tiluri fizice
Se pot alege diIerite stiluri pentru caracterele din textul unei pagini Web.

Caractere: ngroyate (tag-ul b), cursive (tag-ul i)
Un bloc de text apare ngrosat n pagin dac este inclus ntre b~ text /b~ .

Un bloc de text inclus ntre etichetele i~ text /i~ este scris cu caractere cursive.

Curs HTML

11

Caractere: mrite (tag-ul big), micsorate( tag-ul small),
Un text inclus ntre etichetele big~ text /big~ este scris cu caractere mai mari cu o unitate dect
dimensiunea curenta.

Un text inclus ntre etichetele small~ text /small~ este scris cu caractere mai mici cu o unitate
dect dimensiunea curente.

Curs HTML

12

Caractere:,indice superior yi , indice inferior
Fragmentele de text aliniate ca indice inIerior (sub-script) sunt delimitate de etichetele sub~ si
/sub~.
Secventele de text aliniate ca indice superior (super-script) sunt incluse ntre etichetele sup~ si
/sup~.

Caractere: subliniate yi sec(ionate
Eticheta de tip bloc u~ text /u~ insereaz un bloc de caractere subliniate.
Eticheta strike~ si /strike~ sau s~ si /s~ insereaz un bloc de caractere sectionate la mijloc cu
o linie orizontal.

Curs HTML

13

$tiluri logice
Stilurile logice sunt bazate pe cele Iizice. Modul lor de actiune depinde de browserul utilizat.

Blocuri de caractere eviden(iate
Urmtoarele dou etichete pun n evident prin stilul cursiv Iragmente de text:
cite~ text /cite~ ('cite citat)
em~ text /em~ ('emphasize a evidentia)

Aceste dou etichete sunt echivalente cu eticheta i~ ./i~.

Curs HTML

14

Blocuri de caractere monospa(iate
Etichetele urmatoare permit scrierea Iragmentelor de text cu caractere monospatiate de tipul celor
utilizate de o masin de scris.

code~ text /code~ ('code cod sau surs)
kbd~ text /kbd~ ('keyboard tastatur)
tt~ text /tt~ ('teletype teleprinter)

Configurarea fonturilor
Un Iont are urmtoarele atribute:

culoarea - se stabileste cu atributul 'color
tipul sau stilul - se stabileste cu atributul 'Iace
mrimea - se stabileste cu 'size
mrimea n puncte tipograIice (este stabilit prin atributul ,point-size)
grosimea - se deIineste cu atributul 'weight

Culoarea fontului
Pentru a scrie un text cu o anumita culoare se ncadreaz acest text ntre delimitatorii
Iont~ text/Iont~ n Ielul urmtor:

Sintaxa:
Iont color culoare~text de culoarea speciIicat /Iont~

Curs HTML

15

Familia fontului
Tipul de Iont se stabileste prin atributul 'Iace al etichetei Iont~.
Fonturile pot Ii separate prin virgul.

Cele cinci Iamilii generice de Ionturi sunt:
seriI
sans seriI
cursive
monospace
Ianatasy

Pot Ii utilizate si alte Ionduri speciIice cum ar Ii:
Times (tip particular de Iont seriI)
Helvetica (tip particular de Iont sans seriI)
Arial
Courier (tip particular de Iont monospace)
Western (tip particular de Iont Iantasy) , etc.

Exemplu:
Iont IaceArial, seriI, monospace~.
Browserul va utilize primul Iont pe care il recunoaste.

Curs HTML

16

Mrimea fontului
Marimea Iontului se indica cu atributul 'size al etichetei Iont~.
Acest atribut poate lua urmtoarele valori:
1, 2, 3, 4, 5, 6, 7 (1 cel mai mic Iont, 7 cel mai mare Iont);
-1, -2, -3, etc. pentru a micsora dimensiunea Iontului cu -1, -2 . Iata de dimensiunea
curenta;
1, 2, 3, etc. pentru a mri dimensiunea Iontului cu 1,2,.. Iata de dimensiunea curenta;

O alt metod de stabilire a mrimii unui Iont este prin utilizarea atributului ,point-size al etichetei
Iont~ si reprezint mrimea Iontului n puncte tipograIice. Acest atribut poate lua ca si valori orice
numar natural pozitiv.

Atributul ~point - size func(ioneaz numai cu Netscape Comunicator.

Curs HTML

17

rosimea unui font
Grosimea poate Ii deIinit cu cu atributul 'weight al etichetei Iont~.

Valorile pe care le poate lua atributul weight sunt: 100, 200, 300, 400, 500, 600, 700, 800 si 900
(100 Iontul cel mai subtire, 900 Iontul cel mai gros)

.
Blocuri de texte
a) Inserarea unei adrese
Inserarea unei adrese se Iace cu ajutorul etichetei address~ . /address~. Textul este
aIisat cu caractere cursive.

b) Indentarea unui bloc de text
Un bloc de text indentat este un bloc de text la care marginea din stnga a textului este
deplasat la o anumit distant de marginea paginii.

Curs HTML

18

Blocuri <div>
elimitarea si Iormatarea unui bloc de text se Iace cu delimitatorii div~ text/div~.
Blocul div~ are urmatoarele atribute :
~align (aliniere).
Valorile atributului 'align sunt:
'leIt aliniere la stnga
'center aliniere central
'right aliniere la dreapta

Curs HTML

19
Blocul div~text /div~ are posibilitatea sa includa si alte subblocuri.
Atributul 'align are eIect asupra tuturor subblocurilor incluse in blocul div~.

~nowrap care permite intreruperea randurilor acolo unde este precizat acest lucru.

Blocul preformatat
Etichetele pre~ . /pre~ permit pastrarea caracteristicilor textului asa cum a Iost introdus in
Iisier, deci ia in considerare caracterele 'spatiu, 'tab si 'CR/LF (enter la sIarsit de linie).

Blocul pre~ ... /pre~ poate Ii Iolosit pentru a insera randuri vide.
Caracterul spatiu, pentru a putea Ii luat n considerare trebuie precizat prin ,&nbsp.

Blocuri paragraf (tag-ul <p>)
Trecerea la o linie noua se Iace cu eticheta br~, (br de la breakpauz).
La Iel si eticheta p~ Iace trecerea la o linie nou, dar eticheta p~ permite:
inserarea unui spatiu suplimentar inainte de blocul paragraI.
inserarea unui spatiu suplimentar dupa blocul paragraph;.
alinierea textului cu ajutorul atributului 'align, cu valorile 'leIt, 'center sau 'right

Curs HTML

20

Blocuri de titlu
Titlurile (headers) de capitole sau paragraIe pot avea diIerite dimensiuni. Ele pot Ii introduce cu tag-
ul hx~ text /hx~ unde x poate lua valori din multimea 1,2,3,4,5,6}
Exemplu:
h3~.(bloc de text)./h3~

Se accept atributul align de ctre aceste etichete pentru alinierea titlului blocului de text la stnga
(modul prestabilit), n centru si la dreapta.
Tag-ul h1~ scrie titlul cu caracterele cele mai mari si cele mai ngrosate.
Tag-ul h6~ Ioloseste caracterele cele mai mici.

Linii orizontale
Se pot insera linii orizontale intr-o pagina web cu ajutorul etichetei hr~.

Curs HTML

21

Configurarea unei linii orizontale
Atribute ale etichetei hr~ sunt:
'align - permite alinierea. Valori posibile: 'leIt, 'center, 'right.
'width - permite alegerea lungimii liniei. Valori posibile:
O numere ntregi pozitive care reprezint lungimea liniei, n pixeli;
O numere ntre 1 si 100 urmate de semnul ; reprezint procentul din
ltimea paginii pe care se ntinde linia;
'size permite alegerea grosimii liniei. Valorile posibile sunt numere ntregi pozitive
reprezentnd grosimea liniei n pixeli (valoarea prestabilit este '2);
,noshade deIineste o linie Ir umbr;
'color permite deIinirea culorii liniei

Cap 2 .MBUNTTIREA PAINII WEB CU IMAINI, LI$TE $I TABELE

2.1. Imagini IF si 1P
Formele graIice permise de HTML sunt: GIF(imagini;256 culori) si JPG (imagini; milioane
de culori).

2.2. Inserarea imaginilor
Marcajul IMG SRCnumeimagine~

Curs HTML

22
Exemplu (PISICA.html)
HTML~
HEA~
TITLE~ Includerea unei imagini /TITLE~
/HEA~

BO~
HR SIZE30 colorRE~
IMG SRCC:\catel.jpg~
H1~CENTER~ Salut!/CENTER~/H1~
CENTER~FONT Iace"Courier, Arial" color"RE" size"6"~P~ Ma numesc
Motanel!/P~/FONT~/CENTER~

CENTER~IMG SRCC:\pisica.jpg~/CENTER~
HR SIZE30 colorRE~
I~pisicak.ro/I~HR COLORred~
/BO~
/HTML~
Efect

$alut!
Ma numesc Motanel!

pisicak.ro

2.3. Liste in pagini Web

O Liste Ordonate (elementele sunt automat numerotate).
eclararea unei liste ordonate se Iace cu ajutorul marcajului: <OL>..</OL>

Ex. Nr.1 (LO1.html) Efect
<OL>
LI~element 1
LI~element 2
LI~element 3
1. element 1
2. element 2
3. element 3
Curs HTML

23
</OL>
<OL TYPEA>
LI~element 1
LI~element 2
LI~element 3
</OL>
A. element 1
B. element 2
C. element 3
<OL TYPEI $TART3>
LI~element 1
LI~element 2
LI~element 3
</OL>
III. element 1
IV. element 2
V. element 3
<OL TYPEI $TART3>
LI~element 1
LI VALUE10~element 2
LI VALUE20~element 3
LI~element 4
</OL>
III. element 1
X. element 2
XX. element 3
XXI. element 4

O Liste Neordonate - sau liste marcate (elementele sunt marcate printr-un semn special).
eclararea unei liste neordonate se Iace cu ajutorul marcajului:
<UL>..</UL>.

Ex. Nr.1 (UL1.html) Efect
<UL>
LI~ element 1
LI~ element 2
LI~ element 3
</UL>
O element 1
O element 2
O element 3
Ex. Nr.2 (UL2.html) Efect
<UL TYPEcircle>
LI~ element 1
LI~ element 2
LI~ element 3
</UL>
4 element 1
4 element 2
4 element 3

Schimbarea simbulului care preced elementele din lista se poate Iace utilizand parametrul TPE al
marcajului UL~../UL~, caruia i se pot asocia una dintre urmatoarele valori~ disc, circle si
square.}

O Liste de Definitii de termeni si deIinitiile lor asociate.
eclararea unei liste ordonate se Iace cu ajutorul marcajului <DL>..</DL> utilizat impreuna cu
marcajul <DT> pentru termenul deIinit si marcajul <DD> pentru deIinitia propriu zisa.

Exemplu (L.html)
<DL>
<DT>Aldine<DD>Caracteristica a Ionturilor de a Ii reprezentate prin caractere mai
Curs HTML

24
ingrosate.
T~ate~Flux nesIarsit de materiale care apar pe Internet.
<DT>Font<DD>Utilizarea particulara a unui anumit stil de caractere.
</DL>
Efect
Aldine
Caracteristica a Ionturilor de a Ii reprezentate prin caractere mai ingrosate.
ate
Flux nesIarsit de materiale care apar pe Internet.
Font
Utilizarea particulara a unui anumit stil de caractere.

O Liste in liste - liste imbricate

Listele pot Ii continute una ntr-alta. n proiectarea unei pagini Web trebuie avut n vedere
urmtorul lucru Ioarte important: inIormatia continut n pagin s Iie structurat astIel nct s
poat Ii usor de urmrit si de gsit. n acest sens combinarea celor trei tipuri de liste este Ioarte util.

Exercijiu:

Construiti o pagin Web in care s redactati propria agend telefonic utili:and listele de
definitii. Documentul va fi salvat sub numele Agenda.html in directorul Elev al directorului
rdcin.

Exemplu (Listeimbricate.html)
<HTML>
<HEAD>
TITLE~Liste in pagini Web/TITLE~
</HEAD>
<BODY>
HR SIZE30 COLORRE~
IMG SRCc:\Alina.jpg allignright~
H1~CENTER~Salut!/CENTER~/H1~
HR WITH50~
UL~
LI~H3~ate personale/H3~
L~
T~Nume:~Voilean.
T~Prenume:~Alina
T~ata nasterii:~18011987
T~ProIesia:~Eleva anul II la Colegiu Andrei Saguna Brasov
/L~
LI~H3~Stare emotionala/H3~
Acum este tarziu, dar cum somnul intarzie sa apara iata-ma hai-hiu pe Internet.
P~LI~H3~Preocupari actuale/H3~
Saptamana viitoare trebuie s prezint la ora de engleza un reIerat cu urmatoarele
caracteristici~
UL~
LI~Tema- "Internet viitorul omenirii?"
LI~Continutul:-implicatiile pe care le are inIormatica si, in special, Internetul in viata
omului viitorului
Curs HTML

25
LI~Concluzia:-Sigur ca trebuie sa Iie o vizine a mea asupra viitorului si nu o proIetie
/UL~
LI~H3~Sugestii/H3~
aca tu, draga prietene de pe Internet, m-ai putea ajuta cu cateva sugeestii in realizarea
acestui reIerat ti-as ramane indatorata. P~
/UL~
HR WITH20 ALLIGNleIt NOSHAE~H3~Alina/H3~P~
I~alinak.ro/I~HR COLORRE~
</BODY>
</HTML>
Efect

$alut!

O Date personale
Nume:
Popescu
Prenume:
Alina
ata nasterii:
18011987
ProIesia:
Eleva anul I la Colegiul din Brasov
O $tare emotionala
Acum este tarziu, dar cum somnul intarzie sa apara iata-ma hai-hiu pe Internet.
O Preocupari actuale
Saptamana viitoare trebuie sa prezint la ora de engleza un reIerac cu urmatoarele
caracteristici~
4 Tema- "Internet viitorul omenirii?"
4 Continutul:-implicatiile pe care le are inIormatica si, in special, Internetul in viata
omului viitorului
4 Concluzia:-Sigur ca trebuie sa Iie o vizine a mea asupra viitorului si nu o proIetie
O $ugestii
aca tu, draga prietene de pe Internet, m-ai putea ajuta cu cateva sugestii in realizarea
Curs HTML

26
acestui reIerat ti-as ramane indatorata.

Alina
alinak.ro

2.Inserarea tabelelor

Marcajul pentru deIinirea unui tabel este: <TABLE>..</TABLE> iar n interiorul acestui marcaj se
utilizeaz marcajele:

<TR>..</TR> pentru deIinirea unei linii a tabelului;
<TH>..</TH> pentru deIinirea antetului tabelului;
<TD>..</TD> pentru deIinirea datei unei cellule a tabelului.

Parametrii marcajului %ABLE> Parametrii marcajului %>
BORDERn permite deIinirea
zonei umbrite din jurul tabelului
(n, nr. ntreg).
BORDER COLORcod_culoare
permite deIinirea culori zonei
umbrite.
CELL$PACINn deIineste
spatiul lsat ntre celule (n, nr.
ntreg - pixeli).
CELLPADDINn - deIineste
spatiul lsat dintre data din celul
si chenarul celulei (n, nr. ntreg -
pixeli).
WIDTHn permite deIinirea
ltimii dorite a tabelului (n, n
pixeli sau n procente).
HEIHTn permite deIinirea
nltimii dorite a tabelului (n, n
pixeli sau n procente).
COL$PANn permite unei celule s se
extind pe mai multe coloane.
ROW$PANn permite unei celule s se
extind pe mai multe rnduri.
BCOLORculoare permite deIinirea
culorii de Iond a unei celule.
ALINpozitie speciIic alinierea
orizontal a datei din celul. Optiunile posibile
sunt: Left, Right, Center.
BACKROUNDfisier_imagine permite
speciIicarea unei imagini graIice de Iond n
interiorul unei cellule.

Ex. Nr. 1 (Tabel1.html) Efect
HTML~
HEA~
TITLE~Tabele/TITLE~
/HEA~
BO~
TABLE~
TR~TH~Nume/TH~
TH~Prenume/TH~
TH~Media/TH~
Nume Prenume Media
Petcu Ionut 8.20

Curs HTML

27
TR~T~Petcu/T~
T~Ionut/T~
T~8.20/T~
/TABLE~
/BO~
/HTML~

Ex. Nr. 2 (Tabel2.html) Efect
HTML~
HEA~
TITLE~Tabele/TITLE~
/HEA~
BO~
TABLE BORER COLORRE~
TR~TH~Nume/TH~
TH~Prenume/TH~
TH~Media/TH~
TR~T~Petcu/T~
T~Ionut/T~
T~8.20/T~
/TABLE~
/BO~
/HTML~
Nume Prenume Media
Petcu Ionut 8.20

Ex. Nr. 3 (Tabel3.html)

HTML~
HEA~
TITLE~Tabele/TITLE~
/HEA~
BO~
TABLE BORER HEIGHT100 WITH100~
TR~TH rowspan2 bgcolorlightblue~Candidat/TH~
TH~Nume/TH~
TH~Prenume/TH~
TH~Media/TH~
TR~T~Petcu/T~
T~Ionut/T~
T~8.20/T~
/TABLE~
/BO~
/HTML~

Efect

Candidat
Nume Prenume Media
Petcu Ionut 8.20
Curs HTML

28

Cateva exemple de creare a unor tabele:
Un tabel Iara chenar

Un tabel cu chenar

Curs HTML

29
Alinierea tabelului in pagina de Web

Curs HTML

30

Precizarea culorilor de fond pentru un tabel
Culoarea de Iond se stabileste cu atributul 'bgcolor.
Culoarea de Iond poate Ii atasat ntregului tabel prin eticheta table~.
Culoarea de Iond poate Ii atasat unei linii de tabel prin eticheta tr~.
Culoarea de Iond poate Ii atasat unei celule de tabel prin eticheta td~.

Atentie:
aca avem deIinite mai multe atribute bgcolor, se vor lua in considerare in ordinea : td~, tr~,
table~. Tag-ul table~ are prioritatea cea mai mica.

Culoarea textului din Iiecare celula se indica in tag-ul Iont ~ text /Iont~
Iont colorvaloare~./Iont~

Curs HTML

31

imensionarea celulelor unui tabel

istanta dintre dou celule vecine se deIineste cu ajutorul atributului 'cellspacing al etichetei
,table. Valorile lui ,cellspacing pot Ii numere ntregi pozitive, inclusiv 0. Valoarea prestabilit
este 2.

istanta dintre marginea unei celule si continutul ei se deIinieste cu atributul 'cellpadding al
etichetei table~. Valorile lui ,cellpadding pot Ii numere ntregi pozitive. Valoarea prestabilit
este 1.

Curs HTML

32

Dimensionarea unui tabel
imensiunile unui tabel ltimea si nltimea se stabilesc cu atributele 'width, 'height ale
etichetei table~.
Aceste atribute pot lua valorile:
numere intregi pozitive, reprezint ltimea, respectiv nltimea n pixeli a tabelului.
numere ntregi ntre 1 si 100, urmate de semnul , reprezint o Iractiune din ltimea, respectiv
nltimea, total a paginii.

Curs HTML

33

Exercijiu:
Construiti o pagin Web de pre:entare a oraului in care locuiti. Inserati imagini cu
monumente semnificative ale oraului. Structurati pagina utili:and un tabel fr chenar. Folositi
pentru antetul tabelului o culoare de fundal pastelat. Documentul va fi salvat sub numele Oras.html
in directorul Elev al directorului rdcin.

CAP.3. REFERINTE N PAINI WEB

3.1. Referin(e interne
3.2. Referin(e externe
3.3. Link-uri yi imagini

Principala caracteristic a hipertextelor o constituie legturile (links).
Un links este o conexiune ctre alt resurs Web, resurs care poate Ii accesat din Iereastra
browser ului printr-un singur clic.
Link-urile pot Ii de dou tipuri: interne si externe.
Marcajul principal att pentru reIerintele interne ct si pentru cele externe este: <A>.</A>
(anchor- ancor), acesta trebuie s contin parametrul HREFvaloare, Ir de care nu are nici un
sens.

3.1. Referin(e interne

S presupunem c dorim s adugm un cuprins unei pagini Web de dimensiune mare
pentru a permite utilizatorului s se deplaseze ntr-un anumit loc din aceeasi pagin. Locurile n care
dorim s se Iac deplasarea se numesc tintele salturilor interne din paginile Web sau ancore cu
nume si sunt speciIicate, n cadrul documentului HTML, prin utilizarea parametrului name al
marcajului A~./A~:
Curs HTML

34
A namevaloare~Mesaj/A~
Ex.: A nume"baza"~Baza material/A~

Unde valoarea parametrului name poate Ii orice secvent de caractere, numere sau semen de
punctuatie.

Adugarea legturilor ctre (inte din cadrul paginii Web
Corespondentul unei ancore cu nume care deIineste saltul ctre aceast tint este:
A HREF#NumeAncorCuNume~Mesaj/A~
A HREF"#baza"~Baza materiala/A~

Exemplu care ilustreaz cum ar arta un set de ancore cu nume ntr-un document HTML
destinat s aIiseze o pagin Web a unei scoli.

html~
body background"C:\ocuments and Settings\andye\My ocuments\My Pictures\404.giI"
text"steelblue"~

h1~Scoala cu clasele I-VIII "Nicolae Iorga" Bacau/h1~
h2~I~ProI. ing. Bostan Mihaela/I~/h2~
Font color"green" size"5"~

P~a hreI#jos namesus~u-te jos/a~
P~A HREF"#baza"~Baza materiala/A~
P~A HREF"#proIile"~ ProIile/A~
P~A HREF"#proIesori"~ ProIesori/A~
P~A HREF"#elevi"~ Elevi/A~

A NUME"baza"~h2~BAZA MATERIALA/h2~/A~
br~27 sali de clasa
br~14 laboratoare si sali specializate
br~un atelier scoala
br~o biblioteca
br~laboratoare de inIormatica cu retea de calculatoare si acces la Internet
br~cabinet metodic de perIectionare
br~dispensar medical scolar
br~cabinet stomatologic scolar
br~un bazin de inot in constructie
br~baza sportiva proprie
br~o cantina
br~un camin
br~a namejos hreI#sus~u-te sus/a~

A NAME"proIile"~h2~PROFILE/h2~
br~ProIil Pedagogic
br~Invatatori-Educatoare
br~ProIil Bibliotecar si Pedagog scolar
br~Bibliotecar documentarist
br~Instructor animator
br~Pedagog scolar
br~ProIil Matematica-InIormatica
br~ProIil Stiinte ale naturii
Curs HTML

35
br~ProIil Filologie

A NAME"proIesori"~h2~PROFESORI/h2~
br~Gorbanescu
br~Stoica
br~Negrea
br~
...
br~

A NAME"elevi"~h2~ELEVI/h2~
br~5A-ir.: ProI. Negrea
br~5B-ir.: ProI. Mocanu
br~5C-ir.: ProI. Vintila
br~6A-ir.: ProI. Cuciureanu
br~6B-ir.: ProI. Arsinte
br~6C-ir.: ProI. Bibire
br~7A-ir.: ProI. Escu
br~7B-ir.: ProI. Costea
br~7C-ir.: ProI. Mirzac
br~
.

/body~
/html~

Imagini
Formatele acceptate de browsere pentru Iisierele de imagini sunt:

GIF (Graphics Interchange Format) extensia .giI
JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg
BMP (BitMap) cu extensia .bmp (este ntlnit numai cu browserul Internet Explorer, etc.
Inserarea ntr-o pagin Web a unei imagine se Iace utilizand eticheta img~ cu atributul 'src, iar
valoarea acestui atribut este adresa URL a imaginii.
ac se doreste adugarea unui chenar n jurul imaginii se Ioloseste atributul border al etichetei
img~ care poate lua valori numere ntregi pozitive.
imensiunile unei imagini pot Ii modiIicate prin intermediul atributelor 'width si 'height ale
etichetei img~.
Acestea pot avea ca si valori :
numere ntregi positive ce reprezint numrul de pixeli
numere de la 1 la 100 urmate de , reprezint procente din ltimea, respectiv din nltimea
blocului n care se aIl imaginea.
Precizarea dimensiunilor spatiului ocupat de o imagine duce la la cresterea vitezei de ncrcare a
paginii.

Curs HTML

36
Alinierea unei imagini n pagina Web
Alinierea se Iace prin intermediul atributului 'align al etichetei img~, care ia valorile:
'leIt aliniere la stnga
'right aliniere la dreapta
'top aliniere deasupra .Partea de sus a imaginii se aliniaz cu partea de sus a
textului ce precede imaginea.
'middle aliniere la mijloc
'bottom sau 'baseline aliniere la baz

Alinierea textului n jurul unei imagini
Se Iace cu atributele 'hspace si 'vspace ale etichetei img~ care precizeaz distanta n pixeli pe
orizontal si pe vertical, dintre imagine si elementele din pagin.

Curs HTML

37

Imaginea pentru fondul unei pagini Web
Se poate Iolosi imaginea pentru a stabili Iondul unei pagini Web cu ajutorul atributului
'background al etichetei body~ care ia ca valoare adresa URL a imaginii.
Curs HTML

38

Imagini ca legaturi
Imaginea trebuie sa apara ca element de legatura in cadrul tagulul a~ imagine /a~

Cap.4. CADRE

Cadrele (frames) sunt sectiuni ce oIer posibilitatea de a vizualiza simultan n Iereastra browser-
ului mai multe pagini Web.
Bazele organizrii cadrelor
Fiecare pagin aIisat ntr-un cadru se speciIic utiliznd marcajul FRAME~ ce este inserat n
marcajul FRAMSET~.
Prin intermediul parametrilor ROWS sau COLS al marcajului FRAMSET~ se deIineste spatiul
din cadrul Ierestrei browser-ului, alocat Iiecrei pagini Web n parte.
Curs HTML

39
eIinirea spatiului alocat Iiecrei pagini Web se poate Iace n pixeli sau n procente, procentul
se reIer la ct la sut din Iereastra browser-ului este alocat Iiecrei pagini Web n parte.

4.1. Cadre orizontale
Exemplul1: mprtirea browser-ului n dou sectiuni orizontale.
Cadre1.html
HTML~
FRAMESET ROWS"80, *"~
FRAME SRC "unu.html"~
FRAME SRC "doi.html"~
/FRAMESET~
/HTML~

Exemplul2: mprtirea browser-ului n trei sectiuni orizontale.
Cadre2.html
HTML~
FRAMESET ROWS"80,50, *"~
FRAME SRC "trei.html"~
/FRAMESET~
/HTML~

4.2. Cadre verticale
Exemplul1: mprtirea browser-ului n dou sectiuni verticale.
Cadre3.html
HTML~
FRAMESET COLS"80,*"~
/FRAMESET~
/HTML~

Exemplul2: mprtirea browser-ului n trei sectiuni verticale.
Cadre4.html
HTML~
FRAMESET COLS"80,50,*"~
FRAME SRC "trei.html"~
/FRAMESET~
/HTML~
4.3. Cadre n cadre

Exemplul1: Putem aIisa n aceeasi Iereastr a browser-ului simultan att cadre orizontale ct si
cadre verticale.
HTML~
FRAMESET ROWS"30,70*"~
FRAME SRC"unu.html"~
/FRAMESET~
Curs HTML

40
FRAMESET ROWS"33,33,*"~
FRAME SRC "rosu.html"~
FRAME SRC "galben.html"~
FRAME SRC "verde.html"~
/FRAMESET~
/FRAMESET~
/HTML~

Exemplul2: Unui cadru i se poate asocia un nume prin intermediul parametrului NAME al
marcajului FRAME~.
ocumentul prima.html
HTML~
FRAME SRC "ROSU.html"~
FRAMESET ROWS"30,*"~
FRAME SRC "NEGRU.html"~
FRAME SRC "ALB.html" NAMEREFER~
/FRAMESET~
/FRAMESET~
/HTML~

ocumentul rosu.html
HTML~
HEA~
/HEA~
BO BGCOLOR"RE"TEXT"#FFFFFF"~
A HREF"VERE.html" TARGETREFER~ReIerire catre pagina Web verde/A~
BR~
A HREF"ALBASTRU.html"TARGETREFER~ReIerire catre pagina Web albastra/A~
/BO~
/HTML~

ocumentul alb.html
HTML~
HEA~
/HEA~
BO BGCOLOR"WHITE"TEXT#000000"~
H1~CENTER~PAGINA ALBA/CENTER~/H1~
/BO~
/HTML~

ocumentul negru.html
HTML~
HEA~
/HEA~
BO BGCOLOR"BLACK"TEXT#FFFFFF"~
H1~CENTER~PAGINA NEAGRA/CENTER~/H1~
/BO~
/HTML~

ocumentul ;erde.html
Curs HTML

41
HTML~
HEA~
/HEA~
BO BGCOLOR"GREEN"TEXT#000000"~
H1~CENTER~PAGINA VERE/CENTER~/H1~
/BO~
/HTML~

ocumentul albastru.html
HTML~
HEA~
/HEA~
BO BGCOLOR"BLUE"TEXT#000000"~
H1~CENTER~PAGINA ALBASTRA/CENTER~/H1~
/BO~
/HTML~

Exercitii:
1. Scrieti codurile HTML anterioare (prima.html, rosu.html, alb.html, negru.html, verde.html,
albastru.html) crend paginile Web corespunztoare.
2. Vizualizati pagina Web prima.html.
3. Vizitati pe rnd reIerintele: ,ReIerire ctre pagina Web verde si ,ReIerire ctre pagina Web
albastr. Ce constatati?

Cap. 5. FORMULARE

Formularele sunt una dintre cele mai populare metode interactive de comunicare World Wide
Web (WWW). Formularele HTML v oIer posibilitatea de a aduna inIormatii sau impresii de la
cei care v viziteaz pagina Web. Pentru a prelucra datele dintr-un Iormular, aveti nevoie de un
script. Acesta are trei componente principale: TEXTAREA~, SELECT~ si INPUT~.

1. <TEXTAREA> -deIineste un cmp n care utilizatorul poate introduce un text pe mai multe
linii.
Atributele pentru aceasta sunt:
NAME deIineste numele cmpului;
ROWS stabileste numrul de linii de cmp;
COLS stabileste numrul de coloane din cmp.
Exemplul1:
Fisierul ,Form1.html
HTML~
FORM~
TEXTAREA NAME"Comentariu" ROWS5 COLS40~
/TEXTAREA~
/FORM~
/HTML~

2. <$ELECT> - oIer utilizatorului posibilitatea de a alege dintr-o list de optiuni.
Curs HTML

42
SIZE stabileste cte optiuni sunt aIisate n acelasi timp;
MULTIPLE permite selectarea mai multor optiuni n acelasi timp.
Optinile sunt delimitate de marcajele SELECT~ si /SELECT~ si sunt listate n cadrul
etichetei OPTION~. Valorile pentru aceast etichet sunt:
VALUE reprezint valoare ce este atribuit optiunii si care apoi este trimis ctre script;
SELECTE stabileste o optiune ca Iiind implicit.
Exemplul2:
HTML~
Alegeti o optiune din lista
FORM~
SELECT NAME"Optiuni"~
OPTION SELECTE VALUE"Optiune1"~Optiune1
OPTION VALUE"Optiune2"~Optiune2
OPTION VALUE"Optiune3"~Optiune3
/SELECTE~
/FORM~
/HTML~

3. <INPUT> - este un cmp pentru o singur optiune ce permite colectarea de inIormatii,
incluznd cmpuri simple de text, butoane radio, csute de biIare si butoane de trimitere sau
de anulare a inIormatiilor din Iormulare.
SIE dimensiunea cmpului speciIicat n numr de caractere text;
MAXLENGHT speciIic nr. Max. e caractere ce pot Ii citite pentru un cmp de
text;
VALUE deIineste pentru un cmp de text, textul implicit ce va Ii aIisat;
CHECKE activeay un buton radio sau o csut de biIare;
TPE deIineste tipul cmpului de intrare.

Exemplul3 - pentru un cmp simplu de text:
HTML~
FORM~
Introduceti numele:INPUT TPE"text" NAME"Nume" SIZE"15" MAXLENGTH"12"~
/FORM~
/HTML~

Exemplul4 pentru csuta de biIare :
HTML~
FORM~
INPUT TPE"checkbox" NAME""checkbox1" VALUE"Optiune1"~Optiune1
INPUT TPE"checkbox" NAME"checkbox2" VALUE"Optiune2" CHECKE~Optiune2
/FORM~
/HTML~

Exemplul5 pentru butoane radio:
HTML~
Curs HTML

43
FORM~
Intrebarea 1: Va placut pana acum?
br~
INPUT TPE"radio" NAMEchoice" VALUE"Optiune1"~a
INPUT TPE"radio" NAMEchoice" VALUE"Optiune2"~Nu
/FORM~
/HTML~

Exemplul pentru butoane de trimitere si anulare:
Fisierul ,Form.html
HTML~
FORM~
Introduceti numele:INPUT TPE"text" NAME"Nume" SIZE"15" MAXLENGTH"12"~
br~br~
INPUT TPE"Submit" VALUE"Trimite"~
INPUT TPE"Reset" VALUE"Anuleaza"~
/FORM~
/HTML~

Exerci(iu:

1. Creati o pagin Web numit Formular.html, care s contin un Iormular pentru
sugestiile si ntrebrile vizitatorilor site-ului din care va Iace parte pagina respectiv.

Programul pentru Formularul pe WEB:

,sondaf.html`
HTML~
HEA~
TITLE~Sondaj/TITLE~
/HEA~
BO~
H1~SONAJ/H1~
Multumim pentru timpul alocat raspunsului la urmatoarele intrebari:
FORM ACTION"mailto:euprovaiderul meu.ro
METHOPOST
ENCTPE"text/plain"~
Adresa dumneavoastra de e-mail:
INPUT TPE"text" NAME"E-mail" VALUEloginprovider.ro
P~
INPUT TPE"checkbox" NAME"secret" VALUE"da"~
Nu vreau sa Iaceti publica adresa mea.
P~
Cum va conectati la Internet? BR~
INPUT TPE"radio" NAME"conexiune" VALUE"modem" CHECKE~Modem BR~
INPUT TPE"radio" NAME"conexiune" VALUE"RNIS"~RNISBR~
INPUT TPE"radio" NAME"conexiune" VALUE"LS"~legatura speciIicataBR~P~
Unde va aIlati?
SELECT NAME"Regiune"~
OPTION VALUE"Romania SELECTE"~Romania
OPTION VALUE"SUA"~SUA
Curs HTML

44
OPTION VALUE"Europa"~Europa
OPTION VALUE"Restul lumii"~Restul lumii
/SELECT~
P~
Ce cautati prin pagina mea de web?BR~
SELECT NAME"Interes" SIZE4MULTIPLE~
OPTION VALUE"InIormatii"~InIormatii
OPTION VALUE"Sport"~Sport
OPTION VALUE"ivertisment"~ivertisment
OPTION VALUE"Cultura"~Cultura
OPTION VALUE"Slujba"~Slujba
/SELECT~
P~
Aveti vreo observatie de Iacut?BR~
TEXTAREA NAME"Comentarii" COLS40 ROWS4 WRAPphysical~
/TEXTAREA~
P~
INPUT TPE"submit" VALUE"Trimite"~
INPUT TPE"reset" VALUE"Initializare"~
/FORM~
/BO~
/HTML~

Curs HTML

45
Liste de selectie <select> <option >.. </select>
O lista de selectie permite alegerea unuia sau mai multor elemente dintr-o lista Iinita.
Are 2 atribute importante : name si size.
Elementele dintr-o lista se introduc cu tag-ul option~.

Sintaxa:
select name nume size numar~
option value valoare1 selected~ Element1
option value valoare2 ~ Element2.
option value valoare3~ Element3
/select~.
unde:
name - numele listei de selectie
size - este un numar intreg pozitiv, precizeaza cate elemente din lista sunt
vizibile la un moment dat
option ~ este tag-ul care include elementele listei. Server-ul primeste perechea
Continutul din value si valoarea dupa option
selected permite selectarea prestabilita a unui element al listei

Lista de selectie cu selectii multiple
Are aceiasi sintaxa cu lista de selectie descrisa mai sus, dar in plus are atributul multiple in tag-ul
select.

Curs HTML

46

Campuri de editare multiple
Se Iac cu tag-ul textarea ~

Sintaxa:
textarea liste de atribute> text /textarea~

in lista de atribute enumeram:
O cols (nr de caractere aIisate intr-o linie),
O rows (nr de linii aIisate simultan),
O name (permite atasarea unui nume),
O wrap care determina comportamentul campului de editare Iata de sIarsitul de linie.
Atributul poate lua valorile: oII, hard, soIt..

Curs HTML

47

ntre tag-ul de intrare si cel de iesire ale Iormularului sunt inserate, n principal, controalele
Iormularului. Un control este o Iorm de interactiune a utilizatorului cu Iormularul. Putem prezenta
conIorm tabelului de mai jos principalele controale ntr-un Iormular HTML prezentate mai sus:

CONTROL ACTIUNE A UTILIZATORULUI TA
text Introducere a unui text de volum redus Input
password Introducere a unui text de volum redus, care apare, pe ecran,
mascat cu "`"
Input
submit Activare (pentru a transmite inIormatiile completate de
utilizator)
Input
reset Activare (pentru a restabili valorile initiale ale tuturor
controalelor Iormularului)
Input
checkbox BiIare Input
radio BiIare Input
textarea Introducere a unui volum mare de text Textarea
menu Alegere a unei optiuni dintr-un meniu Select option
Harti de imagini
O imagine poate Ii Iolosita ca si zona activa. In acest caz imaginea se insereaza in documentul
HTML intre etichetele a~ si /a~.
Exista insa posibilitatea de a crea harti de imagini (,image maps) care permite ca diIerite zone ale
unei imagini sa Iie deIinite drept legaturi catre diverse pagini WEB.

Curs HTML

48
Crearea unei harti de imagini presupune trei etape:
O eIinirea unei imagini ca harta de imagini. Se v a utiliza tag-ul <img> cu atributele src si
usemap. Numele dat pozei in usemap, precedat de semnul#, se va regasi obligatoriu in tag-
ul map, in atributul name..
O eIinirea hartii in interiorul unui bloc special deIinit cu tag-ul <map> si </map>. Tag-ul
are un atribut obligatoriu si anume ,name, care primeste ca si valoare numele hartii (
numele din usemap);
O Crearea zonelor pe harta. Fiecare zona se introduce cu eticheta <area>.

Eticheta area~ are trei atribute obligatorii:

1. ,shape care poate lua una din valorile:
O ,rect (pentru zone de Iorma dreptunghiulare);
O ,circle (pentru zone de Iorma circulara);
O ,poly (pentru zone de Iorma poligonala);
O deIault (pentru portiunile imaginii care nu se incadreaza in nici una
dintre categoriile anterioare)
2. ,coords determina coordonatele zonei
3. hreI primeste adresa URL a paginii indicate de legatura zonei respective.

Valorile atributului ,shape:
O rect coordsx1,y1,x2,y2 dreptunghi unde (x1, y1) este coordonata coltului stanga
sus si (x2, y2) este coordonata coltului dreapta jos.
O circle coordsx1, y1,r (x1,y1) este centrul cercului de raza r.
O Poly coordsx1,y1,x2,y2,...xn,yn poligonul cu varIurile de coordonate (x1,y1),
(x2,y2), (x3,y3),....

Pentru obtinerea automata a coordonatelor se poate Iolosi programul MAP This, program care
deIineste regulile pentru o imagine .giI sau .jpeg. Programul este Ireeware si se poate descarca de pe
Internet.

Curs HTML

49
ap- INTRODUCERE N 1AVA$CRIPT

JavaScript este un limbaj de programare creat de Netscape, cu ajutorul cruia se pot realiza
pagini web interactive. Sintaxa sa este asemntoare cu cea a limbajelor C/C sau Java.
JavaScript poate recunoaste si rspunde la evenimentele utilizatorului cum ar Ii eIectuarea
unui clik cu mouse-ul, introducerea datelor ntr-un Iormular de navigare n pagin. e exemplu, se
pot scrie Iunctii care s veriIice dac datele introduse ntr-un Iormular sunt valide.
Instructiunile JavaScript sunt cuprinse n interiorul documentului HTML n interiorul
marcajului: SCRIPT~.../SCRIPT~
Acesta poate aprea, Iie n antetul documentului, Iie n corpul su.
SCRIPT languageJavaScript~
//codul JavaScript
/SCRIPT~

Exemplu:
fava.html
HTML~
BO~
SCRIPT language"JavaScript"~
document.write("Text scris cu JavaScript");
/SCRIPT~
br~Text scris cu HTML
/BO~
/HTML~

#ezultat:
Text scris cu JavaScript
Text scris cu HTML

10.1. Evenimente

Un eveniment este o actiune generat de utilizator: click pe un obiect, trecerea mouse-ului
pe un obiect, trimiterea unui Iormular etc.

Exemplu: "even.html` #ezultat:
HTML~
BO~
FORM~
INPUT type"Button" value"Apasati-ma"
onClick"alert('Salut')"~
/FORM~
/BO~
/HTML~

10.2. Elementele limbajului 1ava$cript

efinirea yi apelarea funcjiilor:
eIinirea unei Iunctii presupune doar speciIicarea actiunilor ce se vor eIectua. Apelarea unei Iunctii
presupune punerea n aplicare a acelor actiuni.
Curs HTML

50
eIinirea Iunctiilor se Iace n antetul documentului HTML.
Functiile pot returna unul sau mai multe rezultate ori nici unul n urma apelului.

Exemplu ce deIineste o Iunctie n antet si o apeleaz apoi n corpul documentului HTML:

fct.html
HTML~
HEA~
Iunction suma(numar1, numar2)

return numar1numar2;
}
/SCRIPT~
/HEA~
BO~
document.write("Suma returnata de Iunctie este ", suma(5,10));
/SCRIPT~
/BO~
/HTML~
'ariabile:
Variabilele se declar cu ajutorul cuvntului cheie var, Ir a se preciza tipul acestora. Acestea si pot
schimba tipul pe parcursul programului.
Sintaxa de declarare a variabilellor este:
var variabila1, variabila2, ...
sau
var variabilavaloare
Variabilele sunt de dou tipuri: locale (sunt declarate n interiorul Iunctiilor) si globale) sunt
declarate n aIara Iunctiilor).
variabile.html
HTML~
HEA~
var nume'Toma'
var prenume
Iunction scrie()

var prenume'Elena'
document.write(prenume);
}
/SCRIPT~
/HEA~
BO~
document.write(nume' 'prenume' ');
scrie();
/SCRIPT~
/BO~
/HTML~

Curs HTML

51

ETICHETE IN HTML

eticheta 8emnificatie
 comentariu
<!DOCTYPE ...> tipul documentului
<a ...> legatura (link)
<area> arie, folosita la hartile de imagini
<b> bold, text ingrosat
<bgsound> adauga paginii muzica de fond
<big> font marit
<body ...> corpul paginii, contine informatia ce va fi afisata
<br> sfarsit de rand
<caption ...> "titlul" tabelului
<code> text continand cod de computer
<cite> citat (text italic)
<dd> descrierea definitiei
<del> text taiat cu o linie orizontala
<div> formateaza un sir de caractere
<dl> lista de definitii
<dt> termen dintr-o lista de definitii
<em> text evidentiat
<font ...> font
<form ...> formular
<frame ...> cadru
<frameset ...> defineste blocul compus din cadre
<h1 ...> header sau titlu (de la h1 la h6)
<head> defineste antetul paginii HTML
<hr ...> introduce o linie orizontala
<html> anunta ca blocul este tip HTML
<i> text italic
<iframe ...> fereastra in-line
<img ...> imagine
<input ...> element (camp) al formularului
<kbd> text introdus de la tastatura
<li ...> termen al listei
<link ...> legatura
<meta> metainformatii despre pagina
<noframes> text alternativ pentru cadru
<ol> lista ordonata
<option ...> element al listei de selectii
<p ...> paragraf nou
<pre ...> text preformatat
<select ...> lista de selectii din formular
Curs HTML

52
<samp> mostra de cod
<span> formateaza mai multe elemente
<small> font micsorat
<strong> text ingrosat
<sub> text indice
<sup> text exponent
<table ...> tabel
<td ...> celula a tabelului
<textarea> camp din formular in care se introduce text
<th> headerul tabelului
<title> titlul paginii HTML
<tr ...> rand al tabelului
<tt> text monospatiat
<u> text subliniat
<ul> lista neordonata

Culori in HTML
In HTML culorile pot fi introduse in doua moduri:
- prin denumirea lor in limba engleza (pentru un numar redus de culori)
- in format hexazecimal folosind doua caractere (incepand de la 00 la FF)
pentru fiecare din cele trei culori rosu (R), verde (G) si albastru (B) astfel
#rrggbb.
Pentru culori, in format zecimal, valoarea minima este 0
(corespunzatoare valorii 00 in hexa) iar cea maxima 255
(corespunzatoare valorii FF in hexa).
emplu:
Sa presupunem ca am ales o culoare folosind aplicatia !,39 din Windows
care ne indica R=111 G=52 B=200.
Folosind calculatorul stiintific din Windows transformam aceste valori din
format zecimal in format hexazecimal si obtinem R=6F, G=34 si B=C8.
Formatul final recunoscut de HTML este #6F34C8 (caracterul continut
la inceput este obligatoriu).
Format
zecimal
Format
hexazecimal
Format
HTML
Rezultat
R=111 R=6F
#6F34C8

G=52 G=34
B=200 B=C8
Curs HTML

53
&nele aplicatii de grafica furnizeaza valoarea corespunzatoare culorii
dorite direct in formatul recunoscut de HTML.

FFFFFF FFFFCC FFFF99 FFFF66 FFFF33 FFFF00
FFCCFF FFCCCC FFCC99 FFCC66 FFCC33 FFCC00
FF99FF FF99CC FF9999 FF9966 FF9933 FF9900

CCFFFF CCFFCC CCFF99 CCFF66 CCFF33 CCFF00
CCCCFF CCCCCC CCCC99 CCCC66 CCCC33 CCCC00
CC99FF CC99CC CC9999 CC9966 CC9933 CC9900

99FFFF 99FFCC 99FF99 99FF66 99FF33 99FF00
99CCFF 99CCCC 99CC99 99CC66 99CC33 99CC00
9999FF 9999CC 999999 999966 999933 999900
9966FF 9966CC 996699 996666 996633 996600
9933FF 9933CC 993399 993366 993333 993300
9900FF 9900CC 990099 990066 990033 990000

6699FF 6699CC 669999 669966 669933 669900
6666FF 6666CC 666699 666666 666633 666600
6633FF 6633CC 663399 663366 663333 663300
6600FF 6600CC 660099 660066 660033 660000

3399FF 3399CC 339999 339966 339933 339900
3366FF 3366CC 336699 336666 336633 336600
3333FF 3333CC 333399 333366 333333 333300
3300FF 3300CC 330099 330066 330033 330000

0099FF 0099CC 009999 009966 009933 009900
0066FF 0066CC 006699 006666 006633 006600
0033FF 0033CC 003399 003366 003333 003300
0000FF 0000CC 000099 000066 000033 000000

Curs HTML

Încărcat de

Informații document

Titlu original

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

Curs HTML

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