Curs HTML

Curs HTML
HTML (Hyper Text Markup Language)
Introducere
Ultima versiune a HTML-ului foloseşte unele idei şi modificări propuse pentru HTML 3,
care au fost abandonate la apariţia HTML 3.2.
HTML 4 propune separarea stilurilor fizice de marcarea conţinutului printr-o folosire mai intensă a
foilor de stil. Elementul frame este acum definit oficial altundeva decât în produsele firmelor
Nestcape sau Microsoft. Include elementele style, div, span pentru încorporarea foilor de stil.
Eticheta object este de asemenea extinsă, astfel să includă practic orice fişier extern care se doreşte
introdus într-o pagină Web. Sunt introduse etichetele ins şi del, acronym, colgroup, fieldset, button.
HTML e un limbaj bazat pe SGML (Standard Generalized Murkup Language = ”Limbaj

Standard Generalizat de Marcare”) care este un standard internaţional ce a fost aprobat în 1986 şi
care permite crearea de documente hipertext pentru paginile Web. Principalele caracteristici ale
limbajului SGML sunt:
1. Descrierea structurii documentului;

2. Nu este descrisă aranjarea în pagină;
3. Permite fiecărui navigator să aibă propria prezentare;
4. Un document HTML poate fi reutilizabil.
Standardul oficial HTML este dat de World Wide Web Consortium (W3C) care este afiliat la
Internet Engineering Task Force (IETF). W3C a enunţat câteva versiuni ale specificaţiei HTML,
printre care şi HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 şi, cel mai recent, HTML 4.01.
Fiecare din aceste standarde este mai mult sau mai puţin suportat de către toate sau o parte din
browsere.
La ora actuală HTML 4.0 este larg utilizat şi au fost deja publicate specificaţiile HTML 4.01.
Limbajul HTML oferă proiectanţilor de pagini Web următoarele posibilităţi:
1. Să publice documente cu headere, texte, tabele, liste, fotografii, etc;

2. Să regăseascã on-line informaţiile prin intermediul hiperlink-urilor printr-un simplu click
de mouse;
3. Să proiecteze formulare pentru realizarea tranzacţiilor cu servere aflate la distanţã pentru
căutări de informaţii sau pentru activităţi specifice comerţului;
4. Să includã foi de calcul tabelar, clipuri video, sunete şi alte aplicaţii direct în documente.
Elementul esenţial diferit adus de versiunea 4.0 şi mai ales 4.01 faţă de versiunea 3.2 este
posibilitatea separării structurii unui document de prezentarea lui prin introducerea “stilurilor de
documente” (style sheet).
Prin utilizarea limbajului HTML pentru structurarea unui document şi style sheet-urile pentru
a stiliza prezentarea acestuia, se poate obţine mult mai uşor independenţa de
periferic/computer/platforma hard-soft.
Limbajul HTML a fost preferat pentru publicaţii pe Web în primul rând datorită simplităţii
sale şi în al doilea rând deoarece permite formatarea textului ASCII cu tag-uri în format ASCII.
1
Curs HTML
Cap. 1: HTML DE BAZĂ
------------------------------------------------------------------
1.1. STRUCTURA UNUI DOCUMENT HTML
------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE> Formatare paragraf 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 referat cu tema "Internetul, viitorul omenirii?" in care voi vorbi despre implicatiile pe
care le are informatica si, in special, Internetul in viata omului viitorului. Sigur ca trebuie sa fie o
viziune a mea asupra viitorului si nu o profetie. Daca tu, draga mea prietene de pe Internet, m-ai
putea ajuta cu cateva sugestii in realizarea acestui referat ti-as ramane indatorata.
</BODY>
</HTML>
------------------------------------------------------------------
1.2. FORMATAREA PARAGRAFELOR
1.2.1. Trecerea la linie noua

Marcajul <BR>. El se poate folosi si in combinatie cu parametrul CLEAR=optiune, optiune
ce forteaza trecerea la linie noua fata de marginea specificata.
Valorile posibile pentru optiune sunt left, right, all.
------------------------------------------------------------------
<HTML>
<HEAD>
</TITLE>
</HEAD>
<BODY>
Salut! <BR CLEAR=all>
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 referat cu tema "Internetul,viitorul omenirii?" in care voi vorbi despre implicatiile
pe care le are informatica si, in special, Internetul in viata omului viitorului. Sigur ca trebuie sa fie o
viziune a mea asupra viitorului si nu o profetie. </BR>
Daca tu, draga mea prietene de pe Internet, m-ai putea ajuta cu cateva sugestii in
realizarea acestui referat ti-as ramane indatorata.
</BODY>
</HTML>
------------------------------------------------------------------
------------------------------------------------------------------
1.2.2. Specificarea unui paragraf
Marcajul <P>...<P/P>
------------------------------------------------------------------
<HTML>
2
Curs HTML
<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 referat cu tema "Internetul,
viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in special,
Internetul in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului si nu o
profetie. </P>
<P>Daca tu, draga mea prietene de pe Internet, m-ai putea ajuta cu cateva sugestii in
realizarea acestui referat 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: left, 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 referat cu tema
"Internetul, viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in
special, Internetul in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului
si nu o profetie. </P>
</BODY>
</HTML>
------------------------------------------------------------------
------------------------------------------------------------------
1.2.4. Centrarea textului
Marcajul <CENTER>...</CENTER> are ca efect centrarea rapida a textului.
{Are acelasi efect ca marcajul <P align="center">...</P>}
------------------------------------------------------------------
<HTML>
<HEAD>
</TITLE>
</HEAD>
3
Curs HTML
<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 referat cu tema
"Internetul, viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in
special, Internetul in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului
si nu o profetie. </P>
</BODY>
</HTML>
------------------------------------------------------------------
1.3. FORMATAREA FONT-URILOR
------------------------------------------------------------------
Un font reprezinta un set de caractere (256) cu un aspect grafic unitar.
Stiluri de afisare: ingrosat, inclinat, subliniat.

Marcajul <B>...</B> este folosit daca vrem ca un cuvant sau o portiune din text sa
ne apara ingrosat.
Marcajul <I>...</I> este folosit daca vrem ca un cuvant sau o portiune din text sa
ne apara ingrosat.
Marcajul <U>...</U> este folosit 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 fiind
cel mai mic nivel.
1.3.2. Alegerea tipului de font

Marcajul <FONT>...</FONT> impreuna cu optiune face (ce va primi ca valoare numele
fontului ce intentionam sa-l folosim incadrat de ghilimele) -> permite alegerea tipului de font cu
care dorim sa fie afisat 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 fi
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>
4
Curs HTML
------------------------------------------------------------------
1.4. LINII DE DELIMITARE SI COMENTARII
------------------------------------------------------------------
1.4.1. Marcajul <HR>, plasat oriunde in document, are ca efect trasarea unei linii
orizontale.
Se poate folosi in combinatie cu parametrii: SIZE=optiune, WIDTH=optiune,
ALIGH=optiune si NOSHADE.
- optiunea parametrului SIZE este un numar ce stabileste grosimea liniei;
- optiunea parametrului WIDTH poate stabili cat la % din latimea paginii va ocupa rigla
respectiva;
- parametrul ALIGN se utilizeaza impreuna cu parametrul WIDTH si optiunea lui are drept
efect fortarea liniei fata de marginea specificata. Valorile posibile pentru optiune sunt left, right.
- optiunea COLOR stabileste culoarea riglei;
- prin prezenta parametrului NOSHADE, fara nici o optiune, se dezactiveaza afisarea umbrei
pentru rigla orizontala.
1.4.2. Comentarii
Comentariile sunt texte incadrate intre .
Rolul comentariilor este de a face un document HTML mai usor de inteles prin plasarea
unor expicatii din loc in loc. Ele nu vor fi afisate in cuprinsul paginii Web creata prin documentul
respectiv.
TAG-uri HTML
În limbajul de marcare a hipertextului totul se rezumă la structură. Un limbaj de marcare este folosit
pentru a descrie care este rolul fiecărei părţi din document în raport cu celelalte.
Terminologia HTML:
a) atribut: furnizează instrucţiuni adiţionale despre o etichetă. Informaţiile variază de la
etichetă la etichetă şi pot include subiecte cum ar fi locaţia fişierelor, mărimea, numele lor sau
stiloul lor;
b) browser: este un motor de parcurgere special care evaluează etichetele şi conţinutul unui
fişier HTML, pe care îl afişează în concordanţă cu posibilităţile şi regulile platformei şi capacităţile
sale;
c) element: o componentă distinctivă a structurii unui document, cum ar fi titlul, un paragraf

sau o listă. Când ne referim la forma sa aplicată în cadrul unui document, un element se mai
numeşte etichetă (tag);
d) etichetă: un cod care identifică un element pentru ca browserul sau alt program de
parcurgere să ştie în ce mod să afişeze conţinutul. Etichetele sunt încadrate de caractere de
delimitare (paranteze ascuţite) Ele sunt întotdeauna cuprinse între paranteze unghiulare (<>) iar
utilizarea literelor mici sau mari în scriere nu au importanţă.
Documentele HTML sunt fişiere text (ASCII). În text sunt inserate o serie de coduri aşa numitele
tag-uri sau marcaje care stau la baza modurilor de afişare a documentului. Un document HTML
este compus din tag-uri şi text curat. Documentele au componente asemănătoare cum ar fi titluri,
tabele, liste, paragrafe etc.
Tag-urile HTML sunt folosite tocmai pentru a marca elementele comune, care pot conţine text,
grafică sau alte elemente. Tag-urile sunt de forma – pereche început-sfârşit:
5
Curs HTML
<tag>.............................</tag>
conţinut arbitrar
tagul de
tagul de sfârşit care are
început
caracterul slash (/ )
Scrierea perechilor de legături:
CORECT INCORECT
CORECT
<tag1> <tag1>
<tag2> <tag2>
</tag2> </tag1>
</tag1> </tag2>
Tag-uri din cadrul documentului HTML
Fiecare document HTML, încă de la creare are două părţi principale: un antet şi un corp. Chiar dacă
nu sunt special delimitate, HTML presupune existenţa lor. HTML oferă de asemenea şansa de a
adăuga şi alte componente funcţionale paginii, sub forma foilor de stil, scripturilor şi seturilor de
cadre.
Deşi fac parte din definirea unui document HTML, două etichete există în afara structurii
documentului: doctype şi html. Prima identifică versiunea de HTML folosită pentru pagina
respectivă şi regulile pe care acestea le respectă. A doua etichetă identifică un limbaj global şi
direcţia textului pentru documentul respectiv, în plus marchează începutul şi sfârşitul conţinutului
HTML.
Documentul 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 fi setată prin:

- alegerea culorii de fond
- alegerea culorii textului şi
- alegerea dimensiunilor paginii
6
Curs HTML
Culoarea de fond
Culoarea se obtine din amestecul a celor trei culori fundamentale: roşu, verde şi albastru.
Culoarea de fond a unei pagini Web se specifică utilizand :
 nume de culoare. Astfel sunt disponibile cel puţin 16 nume de culori, astfel avem
urmatoarele nume: red, green, blue, aqua, black, fuchsia, gray, lime, maroon, navy,
olive, purple, silver, teal, white şi yellow.
 secventa hexazecimala “#rrggbb” unde r,g sau b sunt cifre hexazecimale şi pot lua
valorile din multime {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F};astfel se
pot defini 65536 de culori.
 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 stabileşte după modelul precizat mai sus.
Exemplu a unei pagini Web cu fondul de culoare “cyan”:
Culoarea textului
Definirea culorii textului pentru o pagini Web se face prin intermediul atributului text al etichetei
<body>
Sintaxei:
<body text = culoare>,
unde culoare se precizează la fel ca la exemplul precedent.
Pagina de Web următoare are textul de culoare roşie:
7
Curs HTML
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ă şi fondul de culoare galbenă:
Textul de bază (basefont)

Atributele textului de baza dintr-o pagina Web sunt:
 Mărime (size)
 Culoare (color)
 Font (style)
8
Curs HTML
Sintaxa:
<basefont size = număr color = culoare style = font>
unde:
număr poate lua una dintre valorile din multimea {1, 2, 3, 4, 5, 6, 7 }
(valoarea 1 fiind pentru fontul cel mai mic si valoarea 7 – pentru fontul cel mai
mare)
culoare se precizează prin nume sau prin RGB

font poate fi un font generic din multimea {„serif”, “sans serif”, ”cursive”, ”monospace”, ”fantasy”,
”Times New Roman”, “Helvetica”, “Arial” }
Semantica:
Eticheta (Tag-ul) basefont este valabilă până la sfârşitul paginii sau până apare următoarea
etichetă <basefont>.
În cazul în care eticheta <basefont> lipseşte , textul din pagina Web are atributele prestabilite si
anume:
size=3,
color=”black”
style=”Times New Roman”
Marginile paginii Web

Se face cu ajutorul a două atribute ale etichetei <body>:
 leftmargin – distanţa dintre marginea din stânga a ferestrei browserului şi marginea din
stânga a conţinutului paginii
 topmargin – distanţa dintre marginea de sus a ferestrei browserului şi marginea de sus a
conţinutului paginii
Valorile care se pot atribuii celor doua atribute sunt :

 numere întregi pozitiv, care indica distanţa dintre continutul ferestrei si fereastra
browserului, distanta măsurată în pixeli
 un procent, ce reprezinta procent din lăţimea, respectiv, înălţimea ferestrei browserului
9
Curs HTML
Stilurile blocurilor de text
Stiluri fizice
Se pot alege diferite stiluri pentru caracterele din textul unei pagini Web.
Caractere: îngroşate (tag-ul b), cursive (tag-ul i)

Un bloc de text apare îngroşat în pagină dacă este inclus între <b> text </b> .
Un bloc de text inclus între etichetele <i> text </i> este scris cu caractere cursive.
10
Curs HTML
Caractere: mărite (tag-ul big), micsorate( tag-ul small),

Un text inclus între etichetele <big> text </big> este scris cu caractere mai mari cu o unitate decât
dimensiunea curenta.
Un text inclus între etichetele <small> text </small> este scris cu caractere mai mici cu o unitate
decât dimensiunea curente.
11
Curs HTML
Caractere:„indice superior” şi „ indice inferior”

Fragmentele de text aliniate ca indice inferior (sub-script) sunt delimitate de etichetele <sub> şi
</sub>.
Secvenţele de text aliniate ca indice superior (super-script) sunt incluse între etichetele <sup> şi
</sup>.
Caractere: subliniate şi 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 secţionate la mijloc cu
o linie orizontală.
12
Curs HTML
Stiluri logice
Stilurile logice sunt bazate pe cele fizice. Modul lor de acţiune depinde de browserul utilizat.
Blocuri de caractere evidenţiate

Următoarele două etichete pun în evidenţă prin stilul cursiv fragmente de text:
<cite> text </cite> (“cite” = citat)
<em> text </em> (“emphasize” = a evidenţia)
Aceste două etichete sunt echivalente cu eticheta <i> …</i>.
13
Curs HTML
Blocuri de caractere monospaţiate

Etichetele urmatoare permit scrierea fragmentelor de text cu caractere monospaţiate de tipul celor
utilizate de o maşină de scris.
<code> text </code> (“code” = cod sau sursă)

<kbd> text </kbd> (“keyboard” = tastatură)
<tt> text </tt> (“teletype” = teleprinter)
Configurarea fonturilor
Un font are următoarele atribute:
 culoarea - se stabileşte cu atributul “color”

 tipul sau stilul - se stabileşte cu atributul “face”
 mărimea - se stabileşte cu “size”
 mărimea în puncte tipografice (este stabilită prin atributul „point-size”)
 grosimea - se defineşte cu atributul “weight”
Culoarea fontului
Pentru a scrie un text cu o anumita culoare se încadrează acest text între delimitatorii
<font> text</font> în felul următor:
Sintaxa:
<font color = culoare>text de culoarea specificată </font>
14
Curs HTML
Familia fontului
Tipul de font se stabileste prin atributul “face” al etichetei <font>.
Fonturile pot fi separate prin virgulă.
Cele cinci familii generice de fonturi sunt:

 serif
 sans serif
 cursive
 monospace
 fanatasy
Pot fi utilizate si alte fonduri specifice cum ar fi:

 Times (tip particular de font serif)
 Helvetica (tip particular de font sans serif)
 Arial
 Courier (tip particular de font monospace)
 Western (tip particular de font fantasy) , etc.
Exemplu:
<font face=”Arial, serif, monospace”>.
Browserul va utilize primul font pe care il recunoaste.
15
Curs HTML
Mărimea fontului
Marimea fontului se indica cu atributul “size” al etichetei <font>.
Acest atribut poate lua următoarele valori:
 1, 2, 3, 4, 5, 6, 7 (1= cel mai mic font, 7= cel mai mare font);
 -1, -2, -3, etc. pentru a micşora dimensiunea fontului cu -1, -2 … fata de dimensiunea
curenta;
 +1, +2, +3, etc. pentru a mări dimensiunea fontului cu +1,+2,.. fata de dimensiunea curenta;
O altă metodă de stabilire a mărimii unui font este prin utilizarea atributului „point-size” al etichetei
<font> şi reprezintă mărimea fontului în puncte tipografice. Acest atribut poate lua ca si valori orice
numar natural pozitiv.
Atributul “point – size” funcţionează numai cu Netscape Comunicator.
16
Curs HTML
Grosimea unui font

Grosimea poate fi definită cu cu atributul “weight” al etichetei <font>.
Valorile pe care le poate lua atributul weight sunt: 100, 200, 300, 400, 500, 600, 700, 800 şi 900
(100 – fontul cel mai subţire, 900 – fontul cel mai gros)
.
Blocuri de texte
a) Inserarea unei adrese
Inserarea unei adrese se face cu ajutorul etichetei <address> … </address>. Textul este
afişat cu caractere cursive.
17
Curs HTML
b) Indentarea unui bloc de text

Un bloc de text indentat este un bloc de text la care marginea din stânga a textului este
deplasată la o anumită distanţă de marginea paginii.
Blocuri <div>
Delimitarea şi formatarea unui bloc de text se face cu delimitatorii <div> text</div>.
Blocul <div> are urmatoarele atribute :
 “align” (aliniere).
Valorile atributului “align” sunt:
 “left” – aliniere la stânga
 “center” – aliniere centrală
 “right” – aliniere la dreapta
18
Curs HTML
19
Curs HTML
Blocul <div>text </div> are posibilitatea sa includa si alte subblocuri.

Atributul “align” are efect 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 fost introdus in
fisier, deci ia in considerare caracterele “spaţiu”, “tab” şi “CR/LF” (enter la sfarsit de linie).
Blocul <pre> ... </pre> poate fi folosit pentru a insera randuri vide.
Caracterul spatiu, pentru a putea fi luat în considerare trebuie precizat prin „&nbsp”.
Blocuri paragraf (tag-ul <p>)

Trecerea la o linie noua se face cu eticheta <br>, (br de la break=pauză).
La fel si eticheta <p> face trecerea la o linie nouă, dar eticheta <p> permite:
 inserarea unui spaţiu suplimentar inainte de blocul paragraf.
 inserarea unui spaţiu suplimentar dupa blocul paragraph;.
 alinierea textului cu ajutorul atributului “align”, cu valorile “left”, “center” sau “right”
20
Curs HTML
Blocuri de titlu
Titlurile (headers) de capitole sau paragrafe pot avea diferite dimensiuni. Ele pot fi 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 către aceste etichete pentru alinierea titlului blocului de text la stânga
(modul prestabilit), în centru şi la dreapta.
Tag-ul <h1> scrie titlul cu caracterele cele mai mari şi cele mai îngroşate.
Tag-ul <h6> foloseşte caracterele cele mai mici.
Linii orizontale
Se pot insera linii orizontale intr-o pagina web cu ajutorul etichetei <hr>.
21
Curs HTML
Configurarea unei linii orizontale

Atribute ale etichetei <hr> sunt:
 “align” - permite alinierea. Valori posibile: “left”, “center”, “right”.
 “width” - permite alegerea lungimii liniei. Valori posibile:
 numere întregi pozitive care reprezintă lungimea liniei, în pixeli;
 numere între 1 şi 100 urmate de semnul %; reprezintă procentul din
lăţimea paginii pe care se întinde linia;
 “size” – permite alegerea grosimii liniei. Valorile posibile sunt numere întregi pozitive
reprezentând grosimea liniei în pixeli (valoarea prestabilită este “2”);
 „noshade” – defineşte o linie fără umbră;
 “color” – permite definirea culorii liniei
Cap 2 .ÎMBUNĂTĂŢIREA PAGINII WEB CU IMAGINI, LISTE ŞI TABELE
2.1. Imagini GIF si JPG

Formele grafice permise de HTML sunt: GIF(imagini;256 culori) şi JPG (imagini; milioane
de culori).
2.2. Inserarea imaginilor

Marcajul <IMG SRC=nume_imagine>
22
Curs HTML
Exemplu (PISICA.html)
<HTML>
<HEAD>
<TITLE> Includerea unei imagini </TITLE>

</HEAD>
<BODY>
<HR SIZE=30 color=RED>
<IMG SRC=C:\catel.jpg>
<H1><CENTER> Salut!</CENTER></H1>
<CENTER><FONT face="Courier, Arial" color="RED" size="6"><P> Ma numesc
Motanel!</P></FONT></CENTER>
<CENTER><IMG SRC=C:\pisica.jpg></CENTER>
<HR SIZE=30 color=RED>
<I>pisica@k.ro</I><HR COLOR=red>
</BODY>
</HTML>
Efect
Salut!
Ma numesc Motanel!
pisica@k.ro
2.3. Liste in pagini Web
 Liste Ordonate (elementele sunt automat numerotate).

Declararea unei liste ordonate se face cu ajutorul marcajului: <OL>..</OL>
Ex. Nr.1 (LO1.html) Efect

<OL> 1. element 1
<LI>element 1 2. element 2
<LI>element 2
<LI>element 3 3. element 3
23
Curs HTML
</OL>
<OL TYPE=A>
A. element 1
<LI>element 1
B. element 2
<LI>element 2
<LI>element 3
C. element 3
</OL>
<OL TYPE=I START=3>
III. element 1
<LI>element 1
IV. element 2
<LI>element 2
<LI>element 3
V. element 3
</OL>
III. element 1
<OL TYPE=I START=3>
<LI>element 1
X. element 2
<LI VALUE=10>element 2
<LI VALUE=20>element 3
XX. element 3
<LI>element 4
</OL>
XXI. element 4
 Liste Neordonate – sau liste marcate (elementele sunt marcate printr-un semn special).
Declararea unei liste neordonate se face cu ajutorul marcajului:
<UL>..</UL>.
Ex. Nr.1 (UL1.html) Efect

<UL>
 element 1
<LI> element 1
 element 2
<LI> element 2
<LI> element 3
 element 3
</UL>
Ex. Nr.2 (UL2.html) Efect
<UL TYPE=circle>
o element 1
<LI> element 1
o element 2
<LI> element 2
<LI> element 3
o element 3
</UL>
{Schimbarea simbulului care preced elementele din lista se poate face utilizand parametrul TYPE al
marcajului <UL>..</UL>, caruia i se pot asocia una dintre urmatoarele valori> disc, circle şi
square.}
 Liste de Definitii de termeni si definitiile lor asociate.

Declararea unei liste ordonate se face cu ajutorul marcajului <DL>..</DL> utilizat impreuna cu
marcajul <DT> pentru termenul definit si marcajul <DD> pentru definitia propriu zisa.
Exemplu (DL.html)
<DL>
<DT>Aldine<DD>Caracteristica a fonturilor de a fi reprezentate prin caractere mai
24
Curs HTML
ingrosate.
<DT>Date<DD>Flux nesfarsit de materiale care apar pe Internet.
<DT>Font<DD>Utilizarea particulara a unui anumit stil de caractere.
</DL>
Efect
Aldine
Caracteristica a fonturilor de a fi reprezentate prin caractere mai ingrosate.
Date
Flux nesfarsit de materiale care apar pe Internet.
Font
Utilizarea particulara a unui anumit stil de caractere.
 Liste in liste – liste imbricate
Listele pot fi conţinute una într-alta. În proiectarea unei pagini Web trebuie avut în vedere
următorul lucru foarte important: informaţia conţinută în pagină să fie structurată astfel încât să
poată fi uşor de urmărit şi de găsit. În acest sens combinarea celor trei tipuri de liste este foarte utilă.
Exerciţiu:
Construiţi o pagină Web în care să redactaţi propria agendă telefonică utilizând listele de
definiţii. Documentul va fi salvat sub numele Agenda.html în directorul Elev al directorului
rădăcină.
Exemplu (Liste_imbricate.html)
<HTML>
<HEAD>
<TITLE>Liste in pagini Web</TITLE>
</HEAD>
<BODY>
<HR SIZE=30 COLOR=RED>
<IMG SRC=c:\Alina.jpg allign=right>
<H1><CENTER>Salut!</CENTER></H1>
<HR WIDTH=50%>
<UL>
<LI><H3>Date personale</H3>
<DL>
<DT>Nume:<DD>Voilean.
<DT>Prenume:<DD>Alina
<DT>Data nasterii:<DD>18_01_1987
<DT>Profesia:<DD>Eleva anul II la Colegiu Andrei Saguna Brasov
</DL>
<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 referat cu urmatoarele
caracteristici>
<UL>
<LI>Tema- "Internet viitorul omenirii?"
<LI>Continutul:-implicatiile pe care le are informatica si, in special, Internetul in viata
omului viitorului
25
Curs HTML
<LI>Concluzia:-Sigur ca trebuie sa fie o vizine a mea asupra viitorului si nu o profetie

</UL>
<LI><H3>Sugestii</H3>
Daca tu, draga prietene de pe Internet, m-ai putea ajuta cu cateva sugeestii in realizarea
acestui referat ti-as ramane indatorata. <P>
</UL>
<HR WIDTH=20% ALLIGN=left NOSHADE><H3>Alina</H3><P>
<I>alina@k.ro</I><HR COLOR=RED>
</BODY>
</HTML>
Efect
Salut!
 Date personale
Nume:
Popescu
Prenume:
Alina
Data nasterii:
18_01_1987
Profesia:
Eleva anul I la Colegiul din Brasov
 Stare emotionala
Acum este tarziu, dar cum somnul intarzie sa apara iata-ma hai-hiu pe Internet.
 Preocupari actuale
Saptamana viitoare trebuie sa prezint la ora de engleza un referac cu urmatoarele

caracteristici>
o Tema- "Internet viitorul omenirii?"

o Continutul:-implicatiile pe care le are informatica si, in special, Internetul in viata
omului viitorului
o Concluzia:-Sigur ca trebuie sa fie o vizine a mea asupra viitorului si nu o profetie
 Sugestii
Daca tu, draga prietene de pe Internet, m-ai putea ajuta cu cateva sugestii in realizarea
26
Curs HTML
acestui referat ti-as ramane indatorata.
Alina
alina@k.ro
2.Inserarea tabelelor
Marcajul pentru definirea unui tabel este: <TABLE>..</TABLE> iar în interiorul acestui marcaj se
utilizează marcajele:
<TR>..</TR> pentru definirea unei linii a tabelului;

<TH>..</TH> pentru definirea antetului tabelului;
<TD>..</TD> pentru definirea datei unei cellule a tabelului.
Parametrii marcajului <TABLE> Parametrii marcajului <TD>

 BORDER=n – permite definirea
zonei umbrite din jurul tabelului
(n, nr. întreg).
 BORDER COLOR=cod_culoare
 COLSPAN=n – permite unei celule să se
– permite definirea culori zonei
extindă pe mai multe coloane.
umbrite.
 ROWSPAN=n – permite unei celule să se
 CELLSPACING=n – defineşte
extindă pe mai multe rînduri.
spaţiul lăsat între celule (n, nr.
 GBCOLOR=culoare –permite definirea
întreg - pixeli).
culorii de fond a unei celule.
 CELLPADDING=n - defineşte
 ALIGN=pozitie – specifică alinierea
spaţiul lăsat dintre data din celulă
orizontală a datei din celulă. Opţiunile posibile
şi chenarul celulei (n, nr. întreg -
sunt: Left, Right, Center.
pixeli).
 BACKGROUND=fisier_imagine permite
 WIDTH=n – permite definirea
specificarea unei imagini grafice de fond în
lăţimii dorite a tabelului (n, în
interiorul unei cellule.
pixeli sau în procente).
 HEIGHT=n permite definirea
înălţimii dorite a tabelului (n, în
pixeli sau în procente).
Ex. Nr. 1 (Tabel1.html) Efect

<HTML> Nume Prenume Media
<HEAD> Petcu Ionut 8.20
<TITLE>Tabele</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR><TH>Nume</TH>
27
Curs HTML
<TH>Prenume</TH>
<TH>Media</TH>
<TR><TD>Petcu</TD>
<TD>Ionut</TD>
<TD>8.20</TD>
</TABLE>
</BODY>
</HTML>
Ex. Nr. 2 (Tabel2.html) Efect

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER COLOR=RED>
<TR><TH>Nume</TH> Nume Prenume Media
<TH>Prenume</TH>
<TH>Media</TH> Petcu Ionut 8.20
<TR><TD>Petcu</TD>
<TD>Ionut</TD>
<TD>8.20</TD>
</TABLE>
</BODY>
</HTML>
Ex. Nr. 3 (Tabel3.html)
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER HEIGHT=100 WIDTH=100>
<TR><TH rowspan=2 bgcolor=lightblue>Candidat</TH>
<TH>Nume</TH>
<TH>Prenume</TH>
<TH>Media</TH>
<TR><TD>Petcu</TD>
<TD>Ionut</TD>
<TD>8.20</TD>
</TABLE>
</BODY>
</HTML>
Efect
Nume Prenume Media
28
Curs HTML
Cateva exemple de creare a unor tabele:

 Un tabel fara chenar
 Un tabel cu chenar
29
Curs HTML
Alinierea tabelului in pagina de Web
30
Curs HTML
Precizarea culorilor de fond pentru un tabel

Culoarea de fond se stabileste cu atributul “bgcolor”.
Culoarea de fond poate fi ataşată întregului tabel prin eticheta <table>.
Culoarea de fond poate fi ataşată unei linii de tabel prin eticheta <tr>.
Culoarea de fond poate fi ataşată unei celule de tabel prin eticheta <td>.
Atentie:
Daca avem definite 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 fiecare celula se indica in tag-ul < font > text </font>
<font color=”valoare”>…</font>
31
Curs HTML
Dimensionarea celulelor unui tabel
Distanţa dintre două celule vecine se defineşte cu ajutorul atributului “cellspacing” al etichetei
„table”. Valorile lui „cellspacing” pot fi numere întregi pozitive, inclusiv 0. Valoarea prestabilită
este 2.
Distanţa dintre marginea unei celule şi conţinutul ei se definieşte cu atributul “cellpadding” al

etichetei <table>. Valorile lui „cellpadding” pot fi numere întregi pozitive. Valoarea prestabilită
este 1.
32
Curs HTML
Dimensionarea unui tabel

Dimensiunile unui tabel – lăţimea şi înălţimea – se stabilesc cu atributele “width”, “height” ale
etichetei <table>.
Aceste atribute pot lua valorile:
numere intregi pozitive, reprezintă lăţimea, respectiv înălţimea în pixeli a tabelului.
numere întregi între 1 şi 100, urmate de semnul %, reprezintă o fracţiune din lăţimea, respectiv
înălţimea, totală a paginii.
33
Curs HTML
Exerciţiu:
Construiţi o pagină Web de prezentare a oraşului în care locuiţi. Înseraţi imagini cu
monumente semnificative ale oraşului. Structuraţi pagina utilizând un tabel fără chenar. Folosiţi
pentru antetul tabelului o culoare de fundal pastelat. Documentul va fi salvat sub numele
Oras.html în directorul Elev al directorului rădăcină.
CAP.3. REFERINŢE ÎN PAGINI WEB
3.1. Referinţe interne

3.2. Referinţe externe
3.3. Link-uri şi imagini
Principala caracteristică a hipertextelor o constituie legăturile (links).

Un links este o conexiune către altă resursă Web, resursă care poate fi accesată din fereastra
browser – ului printr-un singur clic.
Link-urile pot fi de două tipuri: interne şi externe.
Marcajul principal atât pentru referinţele interne cât şi pentru cele externe este: <A>…</A>
(anchor- ancoră), acesta trebuie să conţină parametrul HREF=valoare, fără de care nu are nici un
sens.
3.1. Referinţe interne
Să presupunem că dorim să adăugăm un cuprins unei pagini Web de dimensiune mare

pentru a permite utilizatorului să se deplaseze într-un anumit loc din aceeaşi pagină. Locurile în care
dorim să se facă deplasarea se numesc ţintele salturilor interne din paginile Web sau ancore cu
nume şi sunt specificate, în cadrul documentului HTML, prin utilizarea parametrului name al
marcajului <A>…</A>:
34
Curs HTML
<A name=valoare>Mesaj</A>
Ex.: <A nume="baza">Baza materială</A>
Unde valoarea parametrului name poate fi orice secvenţă de caractere, numere sau semen de
punctuaţie.
Adăugarea legăturilor către ţinte din cadrul paginii Web

Corespondentul unei ancore cu nume care defineşte saltul către această ţintă este:
<A HREF=#NumeAncorăCuNume>Mesaj</A>
<A HREF="#baza">Baza materiala</A>
Exemplu care ilustrează cum ar arăta un set de ancore cu nume într-un document HTML
destinat să afişeze o pagină Web a unei şcoli.
<html>
<body background="C:\Documents and Settings\andye\My Documents\My Pictures\404.gif"
text="steelblue">
<h1>Scoala cu clasele I-VIII "Nicolae Iorga" Bacau</h1>

<h2><I>Prof. ing. Bostan Mihaela</I></h2>
<Font color="green" size="5">
<P><a href=#jos name=sus>Du-te jos</a>

<P><A HREF="#baza">Baza materiala</A>
<P><A HREF="#profile"> Profile</A>
<P><A HREF="#profesori"> Profesori</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 informatica cu retea de calculatoare si acces la Internet
<br>cabinet metodic de perfectionare
<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 name=jos href=#sus>Du-te sus</a>
<A NAME="profile"><h2>PROFILE</h2>
<br>Profil Pedagogic
<br>Invatatori-Educatoare
<br>Profil Bibliotecar si Pedagog scolar
<br>Bibliotecar documentarist
<br>Instructor animator
<br>Pedagog scolar
<br>Profil Matematica-Informatica
<br>Profil Stiinte ale naturii
35
Curs HTML
<br>Profil Filologie
<A NAME="profesori"><h2>PROFESORI</h2>
<br>Gorbanescu
<br>Stoica
<br>Negrea
<br>
...
<br>
<A NAME="elevi"><h2>ELEVI</h2>
<br>5A-Dir.: Prof. Negrea
<br>5B-Dir.: Prof. Mocanu
<br>5C-Dir.: Prof. Vintila
<br>6A-Dir.: Prof. Cuciureanu
<br>6B-Dir.: Prof. Arsinte
<br>6C-Dir.: Prof. Bibire
<br>7A-Dir.: Prof. Escu
<br>7B-Dir.: Prof. Costea
<br>7C-Dir.: Prof. Mirzac
<br>
…
</body>
</html>
Imagini
Formatele acceptate de browsere pentru fişierele de imagini sunt:
 GIF (Graphics Interchange Format) – extensia .gif

 JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg
 BMP (BitMap) cu extensia .bmp (este întâlnită numai cu browserul Internet Explorer, etc.
Inserarea într-o pagină Web a unei imagine se face utilizand eticheta <img> cu atributul “src”, iar
valoarea acestui atribut este adresa URL a imaginii.
Dacă se doreşte adăugarea unui chenar în jurul imaginii se foloseşte atributul border al etichetei
<img> care poate lua valori numere întregi pozitive.
Dimensiunile unei imagini pot fi modificate prin intermediul atributelor “width” şi “height” ale
etichetei <img>.
Acestea pot avea ca si valori :
 numere întregi positive ce reprezintă numărul de pixeli
 numere de la 1 la 100 urmate de %, reprezintă procente din lăţimea, respectiv din înălţimea
blocului în care se află imaginea.
Precizarea dimensiunilor spaţiului ocupat de o imagine duce la la creşterea vitezei de încărcare a
paginii.
36
Curs HTML
Alinierea unei imagini în pagina Web

Alinierea se face prin intermediul atributului “align” al etichetei <img>, care ia valorile:
 “left” – aliniere la stânga
 “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 face cu atributele “hspace” şi “vspace” ale etichetei <img> care precizează distanţa în pixeli pe
orizontală şi pe verticală, dintre imagine si elementele din pagină.
37
Curs HTML
Imaginea pentru fondul unei pagini Web

Se poate folosi imaginea pentru a stabili fondul unei pagini Web cu ajutorul atributului
“background” al etichetei <body> care ia ca valoare adresa URL a imaginii.
38
Curs HTML
Imagini ca legaturi
Imaginea trebuie sa apara ca element de legatura in cadrul tagulul <a> imagine </a>
Cap.4. CADRE
Cadrele (frames) sunt secţiuni ce oferă posibilitatea de a vizualiza simultan în fereastra browser-
ului mai multe pagini Web.
Bazele organizării cadrelor
 Fiecare pagină afişată într-un cadru se specifică utilizând marcajul <FRAME> ce este inserat în
marcajul <FRAMSET>.
 Prin intermediul parametrilor ROWS sau COLS al marcajului <FRAMSET> se defineşte spaţiul
din cadrul ferestrei browser-ului, alocat fiecărei pagini Web în parte.
39
Curs HTML
 Definirea spaţiului alocat fiecărei pagini Web se poate face în pixeli sau în procente, procentul
se referă la cât la sută din fereastra browser-ului este alocată fiecărei pagini Web în parte.
4.1. Cadre orizontale

Exemplul1: Împărţirea browser-ului în două secţiuni orizontale.
Cadre1.html
<HTML>
<FRAMESET ROWS="80, *">
<FRAME SRC ="unu.html">
<FRAME SRC ="doi.html">
</FRAMESET>
</HTML>
Exemplul2: Împărţirea browser-ului în trei secţiuni orizontale.

Cadre2.html
<HTML>
<FRAMESET ROWS="80,50, *">
<FRAME SRC ="trei.html">
</FRAMESET>
</HTML>
4.2. Cadre verticale

Exemplul1: Împărţirea browser-ului în două secţiuni verticale.
Cadre3.html
<HTML>
<FRAMESET COLS="80,*">
</FRAMESET>
</HTML>
Exemplul2: Împărţirea browser-ului în trei secţiuni verticale.

Cadre4.html
<HTML>
<FRAMESET COLS="80,50,*">
<FRAME SRC ="trei.html">
</FRAMESET>
</HTML>
4.3. Cadre în cadre
Exemplul1: Putem afişa în aceeaşi fereastră a browser-ului simultan atât cadre orizontale
cât şi cadre verticale.
<HTML>
<FRAMESET COLS="80%,*">
<FRAMESET ROWS="30%,70%*">
<FRAME SRC="unu.html">
</FRAMESET>
40
Curs HTML
<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>.
Documentul prima.html
<HTML>
<FRAMESET COLS="30%,*">
<FRAME SRC ="ROSU.html">
<FRAMESET ROWS="30%,*">
<FRAME SRC ="NEGRU.html">
<FRAME SRC ="ALB.html" NAME=REFER>
</FRAMESET>
</FRAMESET>
</HTML>
Documentul rosu.html
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="RED"TEXT="#FFFFFF">
<A HREF="VERDE.html" TARGET=REFER>Referire catre pagina Web verde</A>
<BR>
<A HREF="ALBASTRU.html"TARGET=REFER>Referire catre pagina Web albastra</A>
</BODY>
</HTML>
Documentul alb.html
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="WHITE"TEXT=#000000">
<H1><CENTER>PAGINA ALBA</CENTER></H1>
</BODY>
</HTML>
Documentul negru.html
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="BLACK"TEXT=#FFFFFF">
<H1><CENTER>PAGINA NEAGRA</CENTER></H1>
</BODY>
</HTML>
Documentul verde.html
41
Curs HTML
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="GREEN"TEXT=#000000">
<H1><CENTER>PAGINA VERDE</CENTER></H1>
</BODY>
</HTML>
Documentul albastru.html
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="BLUE"TEXT=#000000">
<H1><CENTER>PAGINA ALBASTRA</CENTER></H1>
</BODY>
</HTML>
Exercitii:
1. Scrieţi codurile HTML anterioare (prima.html, rosu.html, alb.html, negru.html, verde.html,
albastru.html) creând paginile Web corespunzătoare.
2. Vizualizaţi pagina Web prima.html.
3. Vizitaţi pe rând referinţele: „Referire către pagina Web verde” şi „Referire către pagina Web
albastră”. Ce constataţi?
Cap. 5. FORMULARE
Formularele sunt una dintre cele mai populare metode interactive de comunicare World Wide
Web (WWW). Formularele HTML vă oferă posibilitatea de a aduna informaţii sau impresii de la
cei care vă vizitează pagina Web. Pentru a prelucra datele dintr-un formular, aveţi nevoie de un
script. Acesta are trei componente principale: <TEXTAREA>, <SELECT> şi <INPUT>.
1. <TEXTAREA> -defineşte un câmp în care utilizatorul poate introduce un text pe mai multe
linii.
Atributele pentru aceasta sunt:
NAME – defineşte numele câmpului;
ROWS – stabileşte numărul de linii de câmp;
COLS – stabileşte numărul de coloane din câmp.
Exemplul1:
Fişierul „Form1.html”
<HTML>
<FORM>
<TEXTAREA NAME="Comentariu" ROWS=5 COLS=40>
</TEXTAREA>
</FORM>
</HTML>
2. <SELECT> - oferă utilizatorului posibilitatea de a alege dintr-o listă de opţiuni.

42
Curs HTML
SIZE – stabileşte câte opţiuni sunt afişate în acelaşi timp;

MULTIPLE – permite selectarea mai multor opţiuni în acelaşi timp.
Opţinile sunt delimitate de marcajele <SELECT> şi </SELECT> şi sunt listate în cadrul
etichetei <OPTION>. Valorile pentru această etichetă sunt:
VALUE – reprezintă valoare ce este atribuită opţiunii şi care apoi este trimisă către script;
SELECTED – stabileşte o opţiune ca fiind implicită.
Exemplul2:
<HTML>
Alegeti o optiune din lista
<FORM>
<SELECT NAME="Optiuni">
<OPTION SELECTED VALUE="Optiune1">Optiune1
<OPTION VALUE="Optiune2">Optiune2
<OPTION VALUE="Optiune3">Optiune3
</SELECTED>
</FORM>
</HTML>
3. <INPUT> - este un câmp pentru o singură opţiune ce permite colectarea de informaţii,

incluzând câmpuri simple de text, butoane radio, căsuţe de bifare şi butoane de trimitere sau
de anulare a informaţiilor din formulare.
SIYE – dimensiunea câmpului specificată în număr de caractere text;
MAXLENGHT – specifică nr. Max. De caractere ce pot fi citite pentru un câmp de
text;
VALUE – defineşte pentru un câmp de text, textul implicit ce va fi afişat;
CHECKED – activeayă un buton radio sau o căsuţă de bifare;
TYPE – defineşte tipul câmpului de intrare.
Exemplul3 - pentru un câmp simplu de text:

<HTML>
<FORM>
Introduceti numele:<INPUT TYPE="text" NAME="Nume" SIZE="15" MAXLENGTH="12">
</FORM>
</HTML>
Exemplul4 – pentru căsuţa de bifare :

<HTML>
<FORM>
<INPUT TYPE="checkbox" NAME=""checkbox1" VALUE="Optiune1">Optiune1
<INPUT TYPE="checkbox" NAME="checkbox2" VALUE="Optiune2" CHECKED>Optiune2
</FORM>
</HTML>
Exemplul5 – pentru butoane radio:

<HTML>
43
Curs HTML
<FORM>
Intrebarea 1: Va placut pana acum?
<br>
<INPUT TYPE="radio" NAME=choice" VALUE"Optiune1">Da
<INPUT TYPE="radio" NAME=choice" VALUE"Optiune2">Nu
</FORM>
</HTML>
Exemplul6 – pentru butoane de trimitere şi anulare:

<HTML>
<FORM>
Introduceti numele:<INPUT TYPE="text" NAME="Nume" SIZE="15" MAXLENGTH="12">
<br><br>
<INPUT TYPE="Submit" VALUE="Trimite">
<INPUT TYPE="Reset" VALUE="Anuleaza">
</FORM>
</HTML>
Exerciţiu:
1. Creaţi o pagină Web numită Formular.html, care să conţină un formular pentru

sugestiile şi întrebările vizitatorilor site-ului din care va face parte pagina respectivă.
Programul pentru Formularul pe WEB:
„sondaj.html”
<HTML>
<HEAD>
<TITLE>Sondaj</TITLE>
</HEAD>
<BODY>
<H1>SONDAJ</H1>
Multumim pentru timpul alocat raspunsului la urmatoarele intrebari:
<FORM ACTION="mailto:eu@provaiderul meu.ro
METHOD=POST
ENCTYPE="text/plain">
Adresa dumneavoastra de e-mail:
<INPUT TYPE="text" NAME="E-mail" VALUE=login@provider.ro
<P>
<INPUT TYPE="checkbox" NAME="secret" VALUE="da">
Nu vreau sa faceti publica adresa mea.
<P>
Cum va conectati la Internet? <BR>
<INPUT TYPE="radio" NAME="conexiune" VALUE="modem" CHECKED>Modem <BR>
<INPUT TYPE="radio" NAME="conexiune" VALUE="RNIS">RNIS<BR>
<INPUT TYPE="radio" NAME="conexiune" VALUE="LS">legatura specificata<BR><P>
Unde va aflati?
<SELECT NAME="Regiune">
<OPTION VALUE="Romania SELECTED">Romania
<OPTION VALUE="SUA">SUA
44
Curs HTML
<OPTION VALUE="Europa">Europa
<OPTION VALUE="Restul lumii">Restul lumii
</SELECT>
<P>
Ce cautati prin pagina mea de web?<BR>
<SELECT NAME="Interes" SIZE=4MULTIPLE>
<OPTION VALUE="Informatii">Informatii
<OPTION VALUE="Sport">Sport
<OPTION VALUE="Divertisment">Divertisment
<OPTION VALUE="Cultura">Cultura
<OPTION VALUE="Slujba">Slujba
</SELECT>
<P>
Aveti vreo observatie de facut?<BR>
<TEXTAREA NAME="Comentarii" COLS=40 ROWS=4 WRAP=physical>
</TEXTAREA>
<P>
<INPUT TYPE="submit" VALUE="Trimite">
<INPUT TYPE="reset" VALUE="Initializare">
</FORM>
</BODY>
</HTML>
45
Curs HTML
Liste de selectie <select> <option >…. </select>

O lista de selectie permite alegerea unuia sau mai multor elemente dintr-o lista finita.
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 = valoare_1 selected> Element_1
<option value = valoare_2 > Element_2.
<option value = valoare_3> Element_3
</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.
46
Curs HTML
Campuri de editare multiple

Se fac cu tag-ul <textarea >
Sintaxa:
<textarea liste de atribute> text </textarea>
Din lista de atribute enumeram:

 cols (nr de caractere afisate intr-o linie),
 rows (nr de linii afisate simultan),
 name (permite atasarea unui nume),
 wrap care determina comportamentul campului de editare fata de sfarsitul de linie.
Atributul poate lua valorile: off, hard, soft..
47
Curs HTML
Între tag-ul de intrare şi cel de ieşire ale formularului sunt inserate, în principal, controalele
formularului. Un control este o formă de interacţiune a utilizatorului cu formularul. Putem prezenta
conform tabelului de mai jos principalele controale într-un formular HTML prezentate mai sus:
CONTROL ACŢIUNE A UTILIZATORULUI TAG

text Introducere a unui text de volum redus Input
password Introducere a unui text de volum redus, care apare, pe ecran, Input
mascat cu "*"
submit Activare (pentru a transmite informaţiile completate de Input
utilizator)
reset Activare (pentru a restabili valorile iniţiale ale tuturor Input
controalelor formularului)
checkbox Bifare Input
radio Bifare Input
textarea Introducere a unui volum mare de text Textarea
menu Alegere a unei opţiuni dintr-un meniu Select option
Harti de imagini
O imagine poate fi folosita 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 diferite zone ale
unei imagini sa fie definite drept legaturi catre diverse pagini WEB.
48
Curs HTML
Crearea unei harti de imagini presupune trei etape:

 Definirea 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..
 Definirea hartii in interiorul unui bloc special definit 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);
 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:

 „rect” (pentru zone de forma dreptunghiulare);
 „circle” (pentru zone de forma circulara);
 „poly” (pentru zone de forma poligonala);
 default” (pentru portiunile imaginii care nu se incadreaza in nici una
dintre categoriile anterioare)
2. „coords” determina coordonatele zonei
3. href primeste adresa URL a paginii indicate de legatura zonei respective.
Valorile atributului „shape”:

 rect coords=”x1,y1,x2,y2” – dreptunghi unde (x1, y1) este coordonata coltului stanga
sus si (x2, y2) este coordonata coltului dreapta jos.
 circle coords=”x1, y1,r” – (x1,y1) este centrul cercului de raza r.
 Poly coords=”x1,y1,x2,y2,...xn,yn” – poligonul cu varfurile de coordonate (x1,y1),
(x2,y2), (x3,y3),....
Pentru obtinerea automata a coordonatelor se poate folosi programul MAP This, program care
defineste regulile pentru o imagine .gif sau .jpeg. Programul este freeware si se poate descarca de pe
Internet.
49
Curs HTML
Cap6- INTRODUCERE ÎN JAVASCRIPT
JavaScript este un limbaj de programare creat de Netscape, cu ajutorul căruia se pot realiza
pagini web interactive. Sintaxa sa este asemănătoare cu cea a limbajelor C/C++ sau Java.
JavaScript poate recunoaşte şi răspunde la evenimentele utilizatorului cum ar fi efectuarea
unui clik cu mouse-ul, introducerea datelor într-un formular de navigare în pagină. De exemplu, se
pot scrie funcţii care să verifice dacă datele introduse într-un formular sunt valide.
Instrucţiunile JavaScript sunt cuprinse în interiorul documentului HTML în interiorul
marcajului: <SCRIPT>...</SCRIPT>
Acesta poate apărea, fie în antetul documentului, fie în corpul său.
<SCRIPT language=”JavaScript”>
//codul JavaScript
</SCRIPT>
Exemplu:
java.html
<HTML>
<BODY>
<SCRIPT language="JavaScript">
document.write("Text scris cu JavaScript");
</SCRIPT>
<br>Text scris cu HTML
</BODY>
</HTML>
Rezultat:
Text scris cu JavaScript
Text scris cu HTML
10.1. Evenimente
Un eveniment este o acţiune generată de utilizator: click pe un obiect, trecerea mouse-ului

pe un obiect, trimiterea unui formular etc.
Exemplu: “even.html” Rezultat:

<HTML>
<BODY>
<FORM>
<INPUT type="Button" value="Apasati-ma"
onClick="alert('Salut')">
</FORM>
</BODY>
</HTML>
10.2. Elementele limbajului JavaScript
Definirea şi apelarea funcţiilor:

Definirea unei funcţii presupune doar specificarea acţiunilor ce se vor efectua. Apelarea unei funcţii
presupune punerea în aplicare a acelor acţiuni.
50
Curs HTML
Definirea funcţiilor se face în antetul documentului HTML.

Funcţiile pot returna unul sau mai multe rezultate ori nici unul în urma apelului.
Exemplu ce defineşte o funcţie în antet şi o apelează apoi în corpul documentului HTML:
fct.html
<HTML>
<HEAD>
function suma(numar1, numar2)
{
return numar1+numar2;
}
</SCRIPT>
</HEAD>
<BODY>
document.write("Suma returnata de functie este ", suma(5,10));
</SCRIPT>
</BODY>
</HTML>
Variabile:
Variabilele se declară cu ajutorul cuvântului cheie var, fără a se preciza tipul acestora. Acestea îşi
pot schimba tipul pe parcursul programului.
Sintaxa de declarare a variabilellor este:
var variabila1, variabila2, ...
sau
var variabila=valoare
Variabilele sunt de două tipuri: locale (sunt declarate în interiorul funcţiilor) şi globale) sunt
declarate în afara funcţiilor).
variabile.html
<HTML>
<HEAD>
var nume='Toma'
var prenume
function scrie()
{
var prenume='Elena'
document.write(prenume);
}
</SCRIPT>
</HEAD>
<BODY>
document.write(nume+' '+prenume+' ');
scrie();
</SCRIPT>
</BODY>
</HTML>
51

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

HTML (Hyper Text Markup Language)

HTML e un limbaj bazat pe SGML (Standard Generalized Murkup Language = ”Limbaj

1. Descrierea structurii documentului;

1. Să publice documente cu headere, texte, tabele, liste, fotografii, etc;

Cap. 1: HTML DE BAZĂ

1.2.1. Trecerea la linie noua

Stiluri de afisare: ingrosat, inclinat, subliniat.

1.3.1. Nivele de titlu

1.3.2. Alegerea tipului de font

1.3.3. Alegerea dimensiunii caracterelor

1.3.4. Alegerea culorii font-ului

c) element: o componentă distinctivă a structurii unui document, cum ar fi titlul, un paragraf

Tag-uri din cadrul documentului HTML

Documentul HTML se indică prin tag-ul HTML

Culori, fonturi, margini

O pagină Web poate fi setată prin:

Culoare pentru tag-ul body

Exemplu a unei pagini Web cu fondul de culoare “cyan”:

Pagina de Web următoare are textul de culoare roşie:

O eticheta poate sa aiba mai multe atribute.

Exemplu: Pagină Web cu textul de culoare albastră şi fondul de culoare galbenă:

Textul de bază (basefont)

culoare se precizează prin nume sau prin RGB

Marginile paginii Web

Valorile care se pot atribuii celor doua atribute sunt :

Stilurile blocurilor de text

Caractere: îngroşate (tag-ul b), cursive (tag-ul i)

Caractere: mărite (tag-ul big), micsorate( tag-ul small),

Caractere:„indice superior” şi „ indice inferior”

Caractere: subliniate şi secţionate

Blocuri de caractere evidenţiate

Aceste două etichete sunt echivalente cu eticheta <i> …</i>.

Blocuri de caractere monospaţiate

<code> text </code> (“code” = cod sau sursă)

Un font are următoarele atribute:

 culoarea - se stabileşte cu atributul “color”

Cele cinci familii generice de fonturi sunt:

Pot fi utilizate si alte fonduri specifice cum ar fi:

Atributul “point – size” funcţionează numai cu Netscape Comunicator.

Grosimea unui font

b) Indentarea unui bloc de text

Blocul <div>text </div> are posibilitatea sa includa si alte subblocuri.

Blocuri paragraf (tag-ul <p>)

Configurarea unei linii orizontale

Cap 2 .ÎMBUNĂTĂŢIREA PAGINII WEB CU IMAGINI, LISTE ŞI TABELE

2.1. Imagini GIF si JPG

2.2. Inserarea imaginilor

<TITLE> Includerea unei imagini </TITLE>

2.3. Liste in pagini Web

 Liste Ordonate (elementele sunt automat numerotate).

Ex. Nr.1 (LO1.html) Efect

Ex. Nr.1 (UL1.html) Efect

 Liste de Definitii de termeni si definitiile lor asociate.

 Liste in liste – liste imbricate

<LI>Concluzia:-Sigur ca trebuie sa fie o vizine a mea asupra viitorului si nu o profetie

Saptamana viitoare trebuie sa prezint la ora de engleza un referac cu urmatoarele

o Tema- "Internet viitorul omenirii?"

acestui referat ti-as ramane indatorata.

<TR>..</TR> pentru definirea unei linii a tabelului;

Parametrii marcajului <TABLE> Parametrii marcajului <TD>

Ex. Nr. 1 (Tabel1.html) Efect

Ex. Nr. 2 (Tabel2.html) Efect