SWA Suport-Curs HTML PDF

SUPORT DE CURS
HTML
Suport de curs HTML
OBIECTIVUL CURSULUI:
Dupa studierea acestui curs, studentii vor fi capabili sa realizeze pagini web de complexitate medie prin :
- definirea corecta a structurii unui document HTML

- introducerea unor elemente de identificare a paginii, utile mai ales pentru inscrierea la motoarele de
cautare
- stabilirea unor proprietati ale documentului, in general legate de aspectul acestuia
- impartirea documentului in sectiuni logice, formatarea acestora, precum si a unor elemente
componente
- includerea de elemente complexe de tip lista, tabel sau imagine in documentul HTML
- creare de legaturi si ancore intre documente, acestea fiind de fapt elementul esential in realizarea
unui site
- imbinarea unor elemente pentru a face pagina mai atractiva, din punct de vedere estetic sau
functional
- crearea unor documnte HTML bazate pe cadre in scopul de a structura si gestiona mai bine cantitati
mari de informatie
- includerea de formulare in vederea realizarii unor interactiuni cu utilizatorul sub forma de feed-back
Tema finala va consta in proiectarea unui site de baza, cuprinzand o descriere a site-ului (realizarea hartii
site-ului ) si realizarea lui efectiva prin implementarea unei pagini principale si a unei serii de alte pagini
aflate pe nivele ierarhice inferioare acesteia.
______________________________________________________________________________________________
Swiss WebSchool E-mail: office@swissacademy.ro Telefon: +40 732 815 983
Suport de curs HTML
CUPRINS
Capitolul 1. INTRODUCERE................................................................................................................................................ 6
1.1. Ce este WWW? ...................................................................................................................................................... 6
1.2. Navigatoare web .................................................................................................................................................... 6
1.3. Ce este de fapt HTML? ........................................................................................................................................... 6
1.4. Notiunea de eticheta (tag) ..................................................................................................................................... 8
Capitolul 2. CREAREA UNUI DOCUMENT HTML ................................................................................................................. 9
2.1. Structura unui document HTML ............................................................................................................................. 9
2.1.1. DOCTYPE ............................................................................................................................................................... 10
2.1.1.1. Declaratii DOCTYPE ........................................................................................................................................ 10
2.1.2. HTML .................................................................................................................................................................... 11
2.2. Sectiuni ................................................................................................................................................................ 11
2.2.1. Antetul documentului HTML ................................................................................................................................ 11
2.2.1.1. TITLE ............................................................................................................................................................... 12
2.2.1.2. META .............................................................................................................................................................. 14
2.2.1.3. BASE ............................................................................................................................................................... 17
2.2.1.5. LINK ................................................................................................................................................................ 18
2.2.1.6. STYLE .............................................................................................................................................................. 21
2.2.1.7. SCRIPT ............................................................................................................................................................ 22
2.2.2. Partea principala (corpul) documentului HTML .................................................................................................... 23
2.2.2.1. Atribute aditionale ......................................................................................................................................... 23
2.2.2.2. Antete (headere)............................................................................................................................................ 24
2.2.2.3. Paragrafe ........................................................................................................................................................ 26
2.2.2.4. Linie noua ....................................................................................................................................................... 27
2.2.2.5. Desenarea unei linii ....................................................................................................................................... 27
2.2.2.6. Citate .............................................................................................................................................................. 28
2.2.2.7. Texte preformatate ........................................................................................................................................ 29
2.2.2.8. Adresa ............................................................................................................................................................ 30
2.2.2.9. Entitati caracter si caractere speciale ............................................................................................................ 31
2.2.2.10. Comentarii ................................................................................................................................................... 32
2.2.3. Divizarea corpului documentului in bucati ........................................................................................................... 32
2.3. Folosirea culorilor in tabele .................................................................................................................................. 33
2.3.1. HTML – sistemul de culori RGB ............................................................................................................................. 34
2.3.2. HTML – sistemul de culori hexazecimal ................................................................................................................ 34
2.4. Etichete si atribute prezentate in acest capitol .................................................................................................... 36
Capitolul 3. FORMATAREA TEXTULUI .............................................................................................................................. 39
3.1. Formatarea logica ................................................................................................................................................ 39
3.2. Formatarea fizica ................................................................................................................................................. 40
Capitolul 4. LISTE ............................................................................................................................................................ 43
4.1. Liste neordonate .................................................................................................................................................. 43
4.1.1. Definire si utilizare ................................................................................................................................................ 43
4.2. Liste ordonate ...................................................................................................................................................... 45
______________________________________________________________________________________________
Suport de curs HTML

4.3. Liste de definitii ................................................................................................................................................... 46
Capitolul 5. TABELE ......................................................................................................................................................... 50
5.1. Definire si utilizare ............................................................................................................................................... 50
5.2. Titlul tabelului ...................................................................................................................................................... 53
5.3. Latimea unui tabel ............................................................................................................................................... 53
5.4. Liniile / randurile unui tabel ................................................................................................................................. 54
5.5. Datele / celulele unui tabel .................................................................................................................................. 56
5.6. Alinierea datelor in celule .................................................................................................................................... 59
5.7. Spatierea celulelor ............................................................................................................................................... 60
5.8. Spatierea datelor in celule ................................................................................................................................... 60
5.10. Extinderea celulelor ........................................................................................................................................... 61
5.10. Gruparea coloanelor si liniilor ........................................................................................................................... 64
5.10.1. Gruparea coloanelor ........................................................................................................................................... 64
5.10.2. Gruparea liniilor (randurilor) .............................................................................................................................. 66
5.11. Etichete si atribute prezentate in acest capitol .................................................................................................. 68
Capitolul 6. LEGATURI SI ANCORE ................................................................................................................................... 71
6.1. Utilizarea legaturilor ............................................................................................................................................ 71
6.2. ANCHOR ............................................................................................................................................................... 71
6.2.1. HREF ...................................................................................................................................................................... 73
6.2.1.1. Legarea paginilor locale folosind cai relative ................................................................................................. 74
6.2.1.2. Legarea paginilor locale folosind cai absolute ............................................................................................... 74
6.2.1.3. Cai relative sau cai absolute ? ........................................................................................................................ 75
6.2.2. Legaturi la o sectiune din document (ancore denumite)...................................................................................... 75
Capitolul 7. IMAGINI ....................................................................................................................................................... 78
7.1. Adaugarea imaginilor in documente HTML .......................................................................................................... 78
7.1.1. Text alternativ (ALT).............................................................................................................................................. 80
7.1.2. Sursa imaginii (SRC) .............................................................................................................................................. 80
7.1.3. Dimensiuni (WIDTH si HEIGHT) ............................................................................................................................. 80
7.2. Harti imagine (Maparea imaginilor) ..................................................................................................................... 81
7.2.1. Harti pe server (server-side) ................................................................................................................................. 81
7.2.2. Harti pentru client (client-side) ............................................................................................................................. 81
7.3. Combinarea cu alte elemente .............................................................................................................................. 84
7.3.1. Imagini si legaturi .................................................................................................................................................. 84
7.3.2. Imagini si tabele .................................................................................................................................................... 84
7. 4. Etichete si atribute prezentate in acest capitol.................................................................................................... 85
Capitolul 8. CADRE .......................................................................................................................................................... 87
______________________________________________________________________________________________
Suport de curs HTML
8.1. Concept ................................................................................................................................................................ 87

8.2. Cadre IFRAME ...................................................................................................................................................... 87
Capitolul 9. FORMULARE ................................................................................................................................................ 90
9.1. Elementul FORM .................................................................................................................................................. 90
9.2. Elementul TEXTAREA ........................................................................................................................................... 92
9.3. Elementul SELECT ................................................................................................................................................. 94
9.4. Elementul INPUT .................................................................................................................................................. 97
9.4.1. Atributele elementului INPUT............................................................................................................................... 98
9.4.2. Atributul TYPE - valoarea TEXT ...........................................................................................................................100
9.4.3. Atributul TYPE - valoarea PASSWORD.................................................................................................................101
9.4.4. Atributul TYPE - valoarea CHECKBOX ..................................................................................................................101
9.4.5. Atributul TYPE - valoarea RADIO .........................................................................................................................102
9.4.6. Atributul TYPE - valoarea RESET .........................................................................................................................103
9.4.7. Atributul TYPE - valoarea SUBMIT ......................................................................................................................103
9.4.8. Atributul TYPE - valoarea IMAGE ........................................................................................................................103
9.4.9. Atributul TYPE - valoarea BUTTON .....................................................................................................................104
9.4.10. Atributul TYPE - valoarea HIDDEN ....................................................................................................................104
9.5. Elementul BUTTON ............................................................................................................................................ 105
9.6. Elementul LABEL ................................................................................................................................................ 107
9.7. Elementul FIELDSET ............................................................................................................................................ 108
9.8. Atribute comune ................................................................................................................................................ 109
9.8.1. Dezactivarea .......................................................................................................................................................109
9.8.2. Navigarea ............................................................................................................................................................109
9.8.3. Taste de acces .....................................................................................................................................................109
9.9. Etichete si atribute prezentate in acest capitol .................................................................................................. 111
______________________________________________________________________________________________
Suport de curs HTML
Capitolul 1. INTRODUCERE
World Wide Web (W3) este o retea a resurselor informatizate. Web-ul se bazeaza pe trei mecanisme in
functionarea lui:
 o organizare uniforma in numirea si localizarea resurselor in retea:

URI - Uniform Resources Identifier;
 un protocol pentru accesul la resursele cu nume din retea;
 un limbaj pentru a parcurge usor aceste resurse: HyperText.
1.1. Ce este WWW?

World Wide Web, abreviat WWW si cunoscut ca si Web, este un sistem de documente hypertext
interconectate, accesate prin intermediul Internetului.
Informatia este stocata in pagini web. Paginile web sunt fisiere stocate in calculatoare numite servere web.
Calculatoarele care citesc pagini web sunt numite clienti web. Clientii web citesc paginile web cu ajutorul unor
programe numite browsere / navigatoare. Cele mai cunoscute standarde web sunt HTML, CSS si XML.
1.2. Navigatoare web

Pentru a accesa informatiile disponibile pe anumite servere web este necesara utilizarea unui produs software
special denumit in continuare navigator sau browser.
1.3. Ce este de fapt HTML?

HTML - limbajul de marcare a hipertextului (HyperText Markup Language)
Ca sa publicam informatia pentru distribuire globala, este nevoie de un limbaj pe care toate calculatoarele
legate la Web, sa-l poata „intelege”. Limbajul de publicare a resurselor folosit in reteaua Web este HTML.
HTML ofera un set de elemente si atribute care ajuta programatorul sa transforme conceptul grafic al website-
ului intr-o pagina de Internet adevarata. Acest set a evoluat cu fiecare iteratie a versiunilor HTML (2.0, 3.2, 4.0,
4.01, XHTML) ajungand astazi la versiunea HTML5, propusa “recent” de W3C (World Wide Web Consortium).
Este important de notat ca orice versiune noua de HTML presupune un nivel ridicat de compatibilitate cu
versiunile anterioare.
Daca o pagina web este construita folosind elemente/atribute specifice HTML5, un navigator care nu suporta
acele elemente nu va fi capabil de a reda corect continutul paginii respective. Din acest motiv, utilizatorii sunt
incurajati sa actualizeze navigatorul pe care il folosesc (fie el Internet Explorer, Firefox, Opera, Safari, Chrome
sau oricare alt navigator) la cea mai noua versiune in speranta ca acestea adopta cele mai noi standarde HTML.
Navigatoarele moderne ofera o serie inreaga de avantaje fata de versiunile mai vechi, cum ar fi viteza si
securitate sporite.
HTML ofera autorilor mijloace:

 de a publica online documente cu titluri, text, tabele , liste, fotografii, etc.;
 de a primi online informatii via legaturilor hypertext, la click-ul unui buton de mouse;
 de a compune formulare care sa ajute la cautarea si transmiterea de informatii;
 de a include video-clipuri, sunete sau alte aplicatii in documentele publicate.
______________________________________________________________________________________________
Suport de curs HTML
Versiunea HTML la care ne vom referi in continuare este HTML 4.01. Versiunile mai noi decat aceasta (XHTML
si HTML 5) sunt tratate in capitole separate.
______________________________________________________________________________________________
Suport de curs HTML
1.4. Notiunea de eticheta (tag)

Documentele contin numeroase elemente. Etichetele HTML sunt utilizate tocmai pentru a marca aceste
elemente. Ele sunt marginite de „<” si „>” si pot fi scrise atat cu litere mici, cat si cu litere mari. Se prezinta sub
forma unor perechi:
<eticheta> ... </eticheta>
in care eticheta de sfarsit arata aprope la fel ca cea de inceput, cu exceptia caracterului „/”. Acestor etichete le
pot fi atasate atribute care vor fi specificate in cadrul etihetei de inceput.
De asemenea, in interiorul unei etichete (intre eticheta de inceput si cea de sfarsit) pot fi definite alte etichete
conducand astfel la realizarea unei imbricari. Exista desigur si exceptii cand anumite etichete nu au
corespondent de sfarsit, caz in care le vom numi etichete „vide”. Aceste etichete „vide” prezinta un mod
particular de inchidere in XHTML (ex. <eticheta_vida />).
______________________________________________________________________________________________
Suport de curs HTML
Capitolul 2. CREAREA UNUI DOCUMENT HTML

Un fisier HTML este un fisier ce contine etichete de marcare. Aceste etichete indica browserului cum sa afiseze
o pagina web.
Un document HTML trebuie sa aiba extensia „.htm” sau „.html”. Documentele HTML sunt fisiere text
construite din elemente HTML / XHTML. Aceste elementele sunt definite cu ajutorul etichetelor (tag-urilor).
2.1. Structura unui document HTML

Un document HTML trebuie sa contina minim <html></html> pentru ca el sa fie recunoscut si incarcat de
navigator. Acesta reprezinta un document vid.
Structura unui document HTML este:
<html>
<head>
...
...
<title> ... titlu ... </title>
</head>
<body>
...
...
</body>
</html>
Exemplul „Hello World”
Cand se invata un nou limbaj de programare, este traditional ca primul program creat sa fie proiectat sa
afiseze „Hello World”. Cu toate ca HTML nu este un limbaj de programare, se poate folosi acest exemplu
pentru a afisa in fereastra navigatorului acest mesaj.
Exemplul 2.1.
<html>
<head>
<title>Pagina Hello World</title>
</head>
<body>
Hello World !
</body>
</html>
Iar pe ecran apare:
Hello World !
______________________________________________________________________________________________
Suport de curs HTML
2.1.1. DOCTYPE
<!DOCTYPE> este o declaratie ce indica browser-ului web versiunea limbajului de marcare in care este scrisa
pagina web.
Declaratia DOCTYPE se refera la un Document Type Definition (DTD). DTD specifica regulile/normele pentru
limbajul de marcare, astfel incat browser-ul web sa poata afisa corect continutul.
Teoretic, declaratia <!DOCTYPE> ar trebui sa apara prima intr-un document HTML, inainte de eticheta <html>,
insa, avand un caracter optional, poate fi omisa.
La adresa de mai jos gasiti un tabel cu toate elementele HTML/XHTML, in care, pentru fiecare element in parte
este specificat in ce DTD apare:
http://w3schools.com/tags/ref_html_dtd.asp
Sintaxa este:
<!DOCTYPE HTML sir>
In declartia de mai sus „sir” specifica versiunea HTML/XHTML utilizata la crearea documentului. De exemplu, in
cazul in care s-a folosit HTML 4.0 poate fi folosita urmatoarea declaratie:
Exemplul 2.2.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
2.1.1.1. Declaratii DOCTYPE:
HTML 4.01 Strict

Acest DTD contine toate elementele si atributele HTML, dar nu include elemente de prezentare sau invechite
(precum font). Cadrele (framesets) nu sunt permise.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional

Acest DTD contine toate elementele si atributele HTML, inclusiv elmente de prezentare sau invechite (precum
font). Cadrele nu sunt permise.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset

Acest DTD este egal cu HTML 4.01 Transitional, dar permite utilizarea cadrelor.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">
______________________________________________________________________________________________
Suport de curs HTML
2.1.2. HTML
Prima eticheta dintr-un document HTML care apare imediat dupa <!DOCTYPE> este eticheta <html> care face
pereche cu </html> si care marcheaza inceputul si sfarsitul absolut al unui document HTML.
<html> … </html>
Recipientul HTML inglobeaza tot documentul HTML. Daca un document HTML nu contine nimic altceva decat
declaratia <html></html>, atunci rezultatul afisat in fereastra navigatorului este o pagina vida.
Atributele pe care le poate avea eticheta <html> sunt:
Atribut Functie
xmlns Atributul xmlns este obligatoriu in XHTML, dar este invalid in HTML!
Specifica un nume de spatiu xml pentru un document.
Valoare: http://www.w3.org/1999/xhtml
Ex.:
<html xmlns="http://www.w3.org/1999/xhtml">
...
</html>
dir Atribut standard.
Specifica directia textului continut.
Valori posibile:
 rtl (right to left) – de la dreapta la stanga
 ltr (left to right) – de la stanga la dreapta
lang Atribut standard.
Specifica limba in care este scris continutul.
Valoare: cod limba.
Ex.:
lang="en", lang="fr", lang="es", etc.
xml:lang Atribut standard.
Specifica limba in care este scris continutul intr-un document XML (pentru XHTML).
Ex:
xml:lang="en", xml:lang="fr", xml:lang="es", etc.
2.2. Sectiuni
Elementele HEAD si BODY impart documentul in doua sectiuni: antet si partea principala (corpul) a
documentului HTML (ceea ce este vizibil in fereastra navigatorului).
2.2.1. Antetul documentului HTML
______________________________________________________________________________________________
Suport de curs HTML
Antetul documentului HTML reprezinta sectiunea unde sunt se regasesc setarile globale, fiind continut intre
etichete
<head> ... </head>
In cadrul portiunii de antet se pot folosi exclusiv etichetele: TITLE, META, BASE si LINK, precum si definirea
foilor de stil in cascada - <style> si a functiilor limbajului de script folosit - <script>.
Antetul are un rol important in cadrul unui document, deoarece el contine informatii legate de titlul si
continutul documentului, autorul acestuia, cuvinte cheie, etc. Protocolul HTTP ofera posibilitatea de a descarca
doar antetul unui document, aceasta facilitate fiind folosita in special de motoarele de cautare.
Atributele pe care le poate avea eticheta <head> sunt:
Atribut Functie
profile Atribut optional.
Specifica o adresa URL la un document ce contine un set de reguli. Regulile pot fi citite
de browsere pentru a intelege in mod clar informatiile specificate la atributele
etichetei META.
Valoare: URL absolut sau relativ.
Valori posibile:
Valoare: cod limba.
Ex.:
Ex.:
2.2.1.1. TITLE
TITLE este utilizat pentru afisarea titlului paginii web, fiind cuprins in sectiunea HEAD.
Elementul TITLE este singurul element obligatoriu din sectiunea HEAD si singurul element din sectiunea HEAD
al carui continut este vizibil in browser.
Sintaxa este:
<title> … titlul documentului HTML ... </title>
Titlul va aparea in bara de titlu a ferestrei navigatorului, nu in fereastra de afisare. El precizeaza de obicei la ce
se refera continutul documentului, lungimea sa fiind practic nelimitata.
Exemplul 2.3.
______________________________________________________________________________________________
Suport de curs HTML
<html>
<head>
<title>Titlul documentului HTML</title>
</head>
<body>
Continutul documentului
</body>
</html>
Se observa ca in urma incarcarii fisierului de catre navigator in fereastra de afisare va aparea textul „Continutul
documentului”, iar in bara de titlu va aparea textul "Titlul documentului HTML".
In cazul in care intre cele doua tag-uri TITLE se gaseste un sir vid, navigatorul va utiliza ca si titlu implicit
numele fisierului HTML.
Exemplul 2.4.
<html>
<head>
<title></title>
</head>
<body>
Aceasta este pagina exemplu pentru eticheta TITLE, care contine un sir vid.
</body>
</html>
Atributele pe care le poate avea eticheta <title> sunt:
Atribut Functie
profile Atribut optional.
Specifica o adresa URL la un document ce contine un set de reguli. Regulile pot fi citite
de browsere pentru a intelege in mod clar informatiile specificate la atributele
etichetei META.
Valoare: URL absolut sau relativ.
Valori posibile:
Valoare: cod limba.
Ex.:
______________________________________________________________________________________________
Suport de curs HTML
Ex.:
2.2.1.2. META
Elementul META se regaseste tot in cadrul sectiunii HEAD, fiind util pentru introducerea unor informatii
diverse referitoare la operatiuni de indexare, cuvinte cheie, autor, ultima modificare, etc. Este utila mai ales
motoarelor de cautare, care pot clasifica si indexa documentul fara a-l incarca in intregime, ci doar antetul lui.
Majoritatea motoarelor de cautare au incorporati „spideri” sau „roboti” care citesc aceste etichete. Meta-
datele nu sunt afisate in pagina, doar sunt analizate de motoare de cautare, navigatoare, sau alte servicii web.
Sintaxa este:
<meta name="valoarenume" content="valoarecontinut">
sau
<meta http-equiv="valoarenume" content="valoarecontinut">
sau
<meta name="valoarenume " content="valoarecontinut " scheme="valoareschema">
Exemplul 2.5.
<html>
<head>
<meta name="author" content="Nume Autor">
<meta name="description" content ="Exemplu HTML">
<meta name="keywords" content="HTML, HEAD, META">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="refresh" content="60">
<meta name="date" content="2009-01-02" scheme="YYYY-MM-DD">
<meta name="identifier" content="0-2345-6634-6" scheme="ISBN">
<title>Exemplu eticheta META</title>
</head>
<body>
Document care foloseste etichete META
</body>
</html>
Dupa cum se observa, eticheta META nu are corespondent de inchidere, fiind o eticheta vida si suporta
urmatoarele atribute:
Atribut Functie
content Atribut obligatoriu.
Valoarea acestui atribut este un text ce reprezinta continutul meta-informatiei.
Valoare: text.
Ex.:
______________________________________________________________________________________________
Suport de curs HTML
Pentru site-uri in engleza:

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
Pentru site-uri japoneze:
<meta http-equiv="content-type" content="text/html; charset=ISO-2022-JP">
UTF-8 contine toate caracterele si simbolurile pt toate limbile
http-equiv Atribut optional.
Atributul HTTP-EQUIV adauga „HTTP” la inceputul informatiilor din atributul CONTENT,
fiind folosit ca raspuns furnizat de server navigatorului.
Atributul HTTP-EQUIV nu poate fi folosit daca in cadrul etichetei META este definit
atributul NAME.
Atributul HTTP-EQUIV se foloseste impreuna cu atributul CONTENT si valoarea sa
depinde de valoarea atributului CONTENT.
Valori posibile:
 allow
-defineste metode suportate de server;
 content -encoding
-defineste o codificare suplimentara pentru document;
 content - length
-defineste dimensiunea documentului in octeti - bytes;
 content - type
-defineste tipul MIME (Multipurpose Internet Mail Extensions) al documentului;
 date
-defineste cand a fost creat documentul;
 expires
-defineste cand documentul va fi considerat invechit;
 last-modified
-defineste cand a fost modificat ultima data documentul;
 location
-defineste URL-ul absolut al documentului;
 refresh
-defineste un interval de timp dupa care documentul sa se reincarce; valoarea
„refresh” nu trebuie folosita pentru a redirectiona catre alta adresa;
 set-cookie
-defineste o valoare cookie;
 www-authenticate
-defineste normele de autentificare returnate de server; metoda nu este
recomandata din motive de securitate;
 altele
name Atribut optional.
Atributul NAME este folosit pentru a da un nume informatiilor de la atributul CONTENT
Valori posibile:
 author
-defineste autorul documentului;
 copyright
-defineste informati legate de drepturile de autor;
 description
-defineste o descriere a documentului;
 distribution
-defineste nivelul de distributie a documentului (ca de exemplu „global”);
______________________________________________________________________________________________
Suport de curs HTML
 generator
-defineste programul folosit pentru a genera documentul;
 keywords
-defineste cuvintle cheie care descriu documentul;
 progid
-defineste id-ul programului folosit pentru a crea documentul
 rating
-defineste rating-ul paginii web
 resource-type
-defineste tipul resurselor web
 revisit-after
-defineste rata de actualizare estimata pentru resursele web
 robots
-defineste reguli pentru roboti (web crowlers pentru motoarele de cautare)
 altele (se pot defini propriile nume intr-o schema)
scheme Atribut optional.
Atributul SCHEME specifica schema de folosit pentru a interpreta valoarea atributului
CONTENT
Valoarea consta in formatul informatiilor atributului CONTENT sau directioneaza catre
un URI care contine informatia necesara.
Valori posibile:
Valoare: cod limba.
Ex.:
Ex.:
Cateva exemple de utilizare a atributului HTTP-EQUIV in cadrul etichetei META:

content-type
Specifica setul de caractere pentru continutul paginii. Se recomanda sa se precizeze intotdeauna setul de
caractere.
Ex.:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
pentru site-urile in engleza:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
pentru site-urile japoneze:
______________________________________________________________________________________________
Suport de curs HTML
<meta http-equiv="content-type" content="text/html; charset=ISO-2022-JP">
date
Specifica data si ora la care a fost creata pagina.
Ex.:
<meta http-equiv="date" content="Thu, 18 Nov 2008 19:11:42 GMT">
expires
Specifica data si ora la care expira pagina.
Ex:
<meta http-equiv="expires" content="Wed, 9 Nov 2011 12:00:00 GMT">
last-modified
Specifica data ultimei modificari.
Ex.:
<meta http-equiv="last-modified" content="Thu, 18 Nov 2008 19:11:42 GMT">
location
Redirectioneaza catre o alta locatie de desinatie.
Ex.:
<meta http-equiv="location" content="URL=http://www.iim.ro">
refresh
Reincarca pagina curenta la intervale de timp specificate (in secunde).
Ex.:
<meta http-equiv="refresh" content="12">
In acest exemplu eticheta META determina reincarcarea paginii curente la fiecare 12 secunde.
<meta http-equiv="refresh" content="3;url=http://www.iim.ro">
In acest exemplu eticheta META determina redirectionarea catre pagina www.iim.ro la fiecare 3 secunde.
NU folositi acest mecanism pentru a redirectiona catre alte URL-uri. Nu este de preferat pentru utilizator.
2.2.1.3. BASE
Deseori URL-urile dintr-un document fac legatura la documente aflate pe acelasi server in acelasi director. Alta
data, se face legatura la documente aflate pe acelasi server insa in alte directoare de nivel superior sau inferior
celui curent. In acest caz este bine sa se specifice URL-ul spre directoarele sau fisierele respective pentru a se
evita definirea legaturilor folosind intreaga cale, incepand cu protocolul (http://), continuand cu numele
serverului (www.numeserver.domeniu) si terminand cu calea inspre fisierul dorit
(/director/altdirector/fisier.html).
______________________________________________________________________________________________
Suport de curs HTML
Pentru stabilirea URL-ului de baza intr-un document se foloseste eticheta BASE, care este de-sine-statatoare si
care are urmatoarea sintaxa:
<base href="protocol://nume_server/cale_de_cautare/">
BASE necesita un singur atribut HREF unde se specifica URL-ul absolut folosit la definirea legaturilor in cele mai
multe cazuri.
Multe navigatoare considera URL-ul documentului ca URL de baza, asa ca toate referirile din document sunt
facute relativ la URL-ul documentului. Pentru aceste navigatoare nu este necesara specificarea URL-ului de
baza, dar este bine totusi ca aceasta sa fie inclusa.
Eticheta <base> nu accepta atribute standard. Atributele pe care le poate avea sunt urmatoarele:
Atribut Functie
href Defineste URL-ul de baza pentru toate URL-urile relative din pagina.
Nota: Acest URL de baza trebuie sa fie un URL absolut
Valoare: URL absolut.
target Defineste unde sa se deschida fiecare link din document
Valori posibile:
 _blank - deschide pagina intr-o fereastra noua
 _self - deschide pagina in aceeasi fereastra ca si documentul curent
(valoare implicita)
 _parent - deschide pagina in fereastra parinte (cea anterioara)
 _top - deschide pagina in fereastra initiala
Exemplul 2.6.
<html>
<head>
<base href="http://www.swissacademy.eu/cursuri/html/">
<base target="_blank">
</head>
<body>
<img src="mar.png" width="48" height="48"> - Am specificat numai o cale relativa pentru imagine, dar,
pentru ca am declarat URL-ul de baza in sectiunea HEAD, navigatorul va cauta imaginea la adresa "http://
www.swissacademy.eu /cursuri/html/mar.png".
<br><br>
<a href="http://www.swissacademy">Institutul SWA</a> - Acest link se deschide intr-o fereastra noua chiar
daca nu are specificat atributul target="_blank", aceasta deoarece am setat atributul target ca fiind "_blank"
in cadrul elementului BASE.
</body>
</html>
2.2.1.5. LINK
Eticheta LINK este folosita pentru a crea relatii intre documente. Este o eticheta de sine statatoare si este
folosita pentru a gestiona site-uri web mari, cu multe fisiere.
Eticheta LINK are urmatoarea sintaxa:
______________________________________________________________________________________________
Suport de curs HTML
<link rel="relatie" type="mimetype" href="protocol://nume_server/cale_de_cautare/">

LINK poate avea mai multe atribute, insa cele mai folosite sunt: REL, TYPE si HREF.
Lista atributelor elementului LINK si functionalitatile lor:
Atribut Functie
href Atribut optional.
Specifica URL-ul documentului la care se face legatura.
Valori posibile:
 o cale absoluta (de ex. href="http://www.sept2013.tk/fisier.css")
 o cale relativa (de ex. href="stil/stil1.css")
media Atribut optional.
Specifica pe ce dispozitive va fi afisat documentul catre care se realizeaza legatura.
Valori posibile:
 screen – afisare pe ecranul computerului (valoare implicita)
 tty – pentru teleimprimator
 tv – pentru dispozitive de tip televiziune (rezolutie mica si capacitate de
parcurgere / derulare scazuta)
 projection – pentru proiectoare
 handheld – pentru dispozitive portabile (ecran mic, latime de banda limitata)
 print – pentru materialele si documentele vizualizate pe ecran in modul
„previzualizare printare (print preview)”
 braille – pentru dispozitive braille feedback
 aural – pentru sintetizatoare de voce
 all – pentru toate dispozitivele
rel Atribut optional.
Defineste o relatie intre documentul curent si documentul specificat in HREF.
Valori posibile:
 alternate – o versiune alternativa a documentului
 stylesheet – o foaie de stil externa pentru document
 start – primul document dintr-o selectie
 next – urmatorul document intr-o selectie
 prev – documentul precedent intr-o selectie
 contents – un cuprins pentru document
 un index pentru document
 glossary – un glosar al cuvintelor folosite in document
 copyright – un documetn ce contine informatii cu drepturi de autor
 chapter – un capitol al documentului
 section – o sectiune a documentului
 subsection – o subsectiune a documentului
 appendix – o anexa a documentului
 help – un document de ajutor
 bookmark – un document asemanator
type Atribut optional.
Specifica tipul MIME al documentului de legatura.
MIME (Multi-Purpose Internet Mail Extensions) este o extensie a protocolului original
Internet e-mail protocol care permite utilizatorilor sa schimbe date de diferite tipuri : audio,
video, imagini,programe aplicatii precum si text ASCII .
______________________________________________________________________________________________
Suport de curs HTML
Tipurile MIME comunica browserelor cum sa controleze extensii specifice. Majoritatea

tipurilor MIME sunt setate global pe server. Spre exemplu, MIME-ul text/html echivaleaza
cu extensiile htm, html si shtml pe majoritatea serverelor, acestea comunicand
browserului sa interpreteze toate acele fisiere ca fisiere HTML.
Lista completa a tipurilor MIME atribuite de catre IANA (Internet Assigned Number
Authority):
http://www.iana.org/assignments/media-types/
class Atribut standard.

Specifica un nume de clasa.
Valoare: numele clasei
Valori posibile:
id Atribut standard.
Specifica un identificator unic
Valoare: numele identificatorului.
Valoare: cod limba.
Ex.:
style Atribut standard.
Specifica stilul inline pentru element.
Valoare: definitie stil.
title Atribut standard.
Specifica extra-informatii.
Valoare: text.
Ex.:
xml:lang="en", xml:lang="fr", xml:lang="es" etc.
In exemplul urmator eticheta LINK este intrebuintata pentru a specifica foile de stil exterioare documentului:
Exemplul 2.7.
<html>
<head>
<link href="stil1.css" rel="stylesheet">
______________________________________________________________________________________________
Suport de curs HTML
<title>Exemplu de folosire a etichetei LINK</title>

</head>
<body>
In acest document LINK face referinta la un fisier care contine foile de stil in cascada.
</body>
</html>
2.2.1.6. STYLE
Elementul STYLE se introduce in document in sectiunea HEAD si este folosit pentru specificarea diverselor
proprietati de stil pentru documentul HTML.
Pentru a face legatura cu o foaie de stil externa, se foloseste eticheta <link>.
Sintaxa este:
<style> ... definire foi de stil in cascada ... </style>
Atributele acestei etichete sunt:
Atribut Functie
type Atribut obligatoriu.
Specifica tipul MIME al foii de stil.
Valoare: tip MIME.
Ex.: text/css – indica un continut standard CSS
media Atribut optional.
Specifica stiluri pentru diferite tipuri de media.
Valori posibile:
 screen – afisare pe ecranul computerului (valoare implicita)
 tty – pentru teleimprimator
 tv – pentru dispozitive de tip televiziune (rezolutie mica si capacitate
de parcurgere / derulare scazuta)
 projection – pentru proiectoare
 handheld – pentru dispozitive portabile (ecran mic, latime de banda
limitata)
 print – pentru materialele si documentele vizualizate pe ecran in
modul „previzualizare printare (print preview)”
 braille – pentru dispozitive braille feedback
 aural – pentru sintetizatoare de voce
 all – pentru toate dispozitivele
Valori posibile:
Valoare: cod limba.
Ex.:
______________________________________________________________________________________________
Suport de curs HTML

Valoare: text.
Specifica limba in care este scris continutul intr-un document XML (pentru
XHTML).
Ex.:
Exemplul 2.8.
<html>
<head>
<style type="text/css">
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>
<style type="text/css" media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>
2.2.1.7. SCRIPT
SCRIPT este plasat in sectiunea HEAD si este folosit pentru a defini un script client-side precum JavaScript.
Elementul SCRIPT contine fie declaratii de script, fie trimite catre un fiesier de script extern prin intermediul
atributului src.
Sintaxa este:
<script type="mimetype" language="limbaj_de_script" src="url">
... cod program ...
</script>
Eticheta <script> nu accepta atribute standard. Atributele pe care le poate avea sunt:
Atribut Functie
type Atribut obligatoriu.
Specifica tipul MIME al scriptului.
Valori pe care le poate lua:
______________________________________________________________________________________________
Suport de curs HTML
 text/javascript
 text/ecmascript
 application/ecmascript
 application/javascript
 text/vbscript
Lista completa a tipurilor MIME atribuite de catre IANA (Internet Assigned

Number Authority):
http://www.iana.org/assignments/media-types/
NOTA: Conform IANA, tipul MIME "type/Javascript" este invechit. Noul

standard este "application/javascript", dar, care nu este suportat de
Internet Explorer.
src Atribut optional.
Specifica legatura catre un fisier de script extern.
Cand este necesar sa apelam acelasi cod JavaScript pe mai multe pagini, in
loc sa scriem scriptul pe fiecare pagina in parte, putem crea un fisier de sine
statator care sa contina codul JavaScript, il salvam cu extensia .js si facem
legatura cu acesta folosind atributul src.
NOTA: Fisierul de script extern nu poate contine eticheta <script>.
Valori posibile:
- o cale absoluta catre fisierul de script (ex.
src="http://www.exemplu.com/fisier.js")
- o cale relativa (ex. src="fisier.js”)
Este bine ca tot continutul din interiorul etichetelor STYLE si SCRIPT sa fie incadrat de etichetele de comentariu
() pentru ca navigatoarele incompatibile sa ignore acest continut si sa continue
interpretarea paginii fara a genera erori.
2.2.2. Partea principala (corpul) documentului HTML

Structura BODY se utilizeaza dupa structura HEAD; tot ce se gaseste intre etichetele BODY va aparea in
fereastra navigatorului.
Sintaxa este:
<body >
... continut document ...
</body>
2.2.2.1. Atribute aditionale
O serie de atribute standard pot fi adaugate la BODY: class, id, dir, lang, style, title, xml:lang.
Lista atributelor standard si functiile pe care le indeplinesc:
Atribut Functie
class Specifica un nume de clasa.
Valoare: numele clasei
______________________________________________________________________________________________
Suport de curs HTML
dir Specifica directia textului continut.

Valori posibile:
id Specifica un identificator unic.
Valoare: numele identificatorului
lang Specifica limba in care este scris continutul.
Valoare: cod limba.
Ex.:
style Specifica stilul inline pentru element.
title Specifica extra-informatii.
Valoare: text.
xml:lang Specifica limba in care este scris continutul intr-un document XML (pentru XHTML).
Ex.:
2.2.2.2. Antete (headere)

Eticheta antet este un recipient si trebuie sa aiba o eticheta de inceput <h1> si o eticheta de sfarsit </h1>.
Exista sase nivele de antet: H1 (cel mai important), H2, H3, H4, H5, H6 (cel mai putin important), pentru fiecare
dintre ele fiind utilizate caractere ale aceluiasi font, dar de dimensiuni si grosimi diferite. Fiecare dintre aceste
nivele are aspectul sau pe ecranul unui utilizator, neexistand un control direct asupra a cum apare antetul.
Pentru a marca un antet se foloseste eticheta:
<hx>Antet</hx>
unde x reprezinta un numar ce ia valori intre 1 si 6.
Atributele standard pe care le poate avea eticheta antet (<h1> - <h6>) sunt: class, dir, id, lang, style, title,
xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1).
Exemplul 2.9.
<html>
<head>
<title>Exemplu de document HTML cu cele 6 nivele de antet</title>
</head>
<body>
<h1>Antet de nivel 1</h1>
______________________________________________________________________________________________
Suport de curs HTML

</body>
</html>
Exemplul 2.9 are ca rezultat in browser:
Antet de nivel 1
Antet de nivel 2
Antet de nivel 3
Antet de nivel 4
Antet de nivel 5
Antet de nivel 6
Nu exista posibilitatea de a include o eticheta de antet pe aceeasi linie cu text normal, chiar daca se inchide
eticheta de antet si se continua cu text netransformat. O eticheta de antet se comporta ca si o eticheta <p> -
paragraf, in sensul ca va crea o linie noua dupa terminarea lui.
Linia urmatoare:
Exemplul 2.10.
<h1>Acesta este un antet</h1> si acesta este un text normal.
va avea acelasi rezultat cu:
Exemplul 2.11.
<h1>Acesta este un antet</h1>
<p>si acesta este un text normal.</p>
In ambele cazuri navigatorul va afisa antetul si textul normal pe doua linii distincte, antetul aparand mai mare
si textul aparand la dimensiune normala.
Exemplul 2.12.
<html>
<head>
<title>Exemplu de document HTML cu antete si text normal</title>
</head>
<body>
<h1>Acesta este un antet</h1> si acesta este un text normal
<br>
<h1>Acesta este un antet</h1>
<p>si acesta este un text normal.</p>
</body>
</html>
Exemplul 2.12 are ca rezultat in browser:
Acesta este un antet

si acesta este un text normal
______________________________________________________________________________________________
Suport de curs HTML
Acesta este un antet

si acesta este un text normal
Este important de amintit diferenta intre titlu si antet. Cele doua cuvinte sunt adesea interschimbabile in viata
de zi cu zi, dar in cazul in care vorbim despre HTML, eticheta <TITLE> are ca efect afisarea unui text in titlul
ferestrei navigatorului, iar etichetele <hx>...</hx> au ca efect afisarea in pagina a unui text accentuat. Poate fi
doar o eticheta <TITLE> intr-un document si mai multe antete de diferite tipuri (<h1>, <h2>, ... <h6>).
Atribut: align=”center” left, right, justify
Alte atribute: class, id, style
Ex: h1 font-size:2em; h2 1.5em; h3 1.17em; h4 1.33em; h5 0.83em; h6 0.67em
1em=16px;
Unitati de masura dimensiuni fonturi
-Pixel (px) –folosit de monitoarele calculatoarelor, reprezinta cel mai mic patratel de pe ecran;
-Points(pt)-folosit mai mult la mediile de printare pe hartie; echivalentul la 1/72 inch(2.54cm)
Acestea sunt marimi absolute si nu pot fi scalate (largest, smallest,..).
Exista si unitati de masura relative, em sau %, fata de o marime stabilita intr-un element parinte.
EX:
12pt=16px=1em=100%
IE7 IE8 FF2 FF3 Opera Safari 3.1

H1 24pt 2em 32px 32px 32px 32px
H2 18pt 1.5em 24px 24px 24px 24px
H3 13.55pt 1.17em 18.7333px 18.7167px 18px 19px
H4 n/a n/a n/a n/a n/a n/a
H5 10pt 0.83em 13.2667px 13.2833px 13px 13px
H6 7.55pt 0.67em 10.7333px 10.7167px 10px 11px
2.2.2.3. Paragrafe
Cea mai buna cale de a imparti textul in paragrafe este folosirea etichetei de paragraf P. Prin plasarea etichetei
P la inceputul unui paragraf, navigatorul stie sa separe paragrafele adaugand un spatiu dublu intre ele.
Eticheta de sfarsit este optionala, insa este bine de folosit pentru compatibilitatea cu versiuni mai vechi si cu
diverse navigatoare.
Atributele standard pe care le poate avea eticheta antet (<h1> - <h6>) sunt: class, dir, id, lang, style, title,
xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1).
Sintaxa este:
<p> ... paragraf ... </p>
Elementul P creaza in mod automat spatiu inainte si dupa el insusi. Spatiul este aplicat automat de browser,
sau poate fi specificat intr-o foaie de stil.
Exemplul 2.13.
______________________________________________________________________________________________
Suport de curs HTML
<html>
<head>
<title>Exemplu de document cu paragrafe</title>
</head>
<body>
<p>Paragraf 1: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Paragraf 2: Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
dapibus. Vivamus elementum semper nisi.</p>
<p>Paragraf 3: Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
adipiscing sem neque sed ipsum.</p>
</body>
</html>
2.2.2.4. Linie noua

Exista cazuri in care se doreste intreruperea unui rand chiar daca paragraful nu este terminat. In acest caz se
foloseste eticheta <br>, care are ca efect trecerea textului la o linie noua (rand nou), fara insa a determina
inceputul unui nou paragraf.
Este o eticheta vida care nu necesita inchidere si are sintaxa:
<br>
Atributele standard pe care le poate avea eticheta <br> sunt: class, id, style, title (functionalitatile acestor
atribute sunt descrise la subcapitolul 2.2.2.1).
Exemplul 2.13.
<html>
<head>
<title>Exemplu - trecere la rand nou</title>
</head>
<body>
<p>Hai la petrecerea de Halloween!</p>
<p>Te asteptam de la<br>8:00pm, in seara de Halloween. </p>
<br>
<p>Sa poti un costum cat mai inspaimantator!</p>
</body>
</html>
2.2.2.5. Desenarea unei linii

O alta metoda de a diviza un document in sectiuni logice este linia orizontala. Linia orizontala se creaza
folosind eticheta HR si implica automat ruperea paragrafului inainte si dupa ea. Elementul HR nu necesita
eticheta de inchidere si are sintaxa:
<hr>
______________________________________________________________________________________________
Suport de curs HTML
Atributelele standard pe care le poate avea eticheta <hr> sunt: class, dir, id, lang, style, title, xml:lang
(functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1).
Exemplul 2.14.
<html>
<head>
<title>Exemplu - trecere la rand nou</title>
</head>
<body>
<p>Hai la petrecerea de Halloween!</p>
<p>Te asteptam de la<br>8:00pm, in seara de Halloween. </p>
<br>
<p>Sa poti un costum cat mai inspaimantator!</p>
</body>
</html>
Urmatorul exemplu contine doua paragrafe despartite printr-o linie orizontala:
Exemplul 2.15.
<html>
<head>
<title>Exemplu de document ce contine o linie orizontala</title>
</head>
<body>
<p>Primul paragraf din pagina.</p>
<hr>
<p>Al doilea paragraf situat dupa linia orizontala.</p>
</body>
</html>
2.2.2.6. Citate
Citatele sunt folosite pentru a introduce un text intr-un bloc separat in ecran. Citatele sunt despartite de textul
inconjurator, chiar daca sunt in interiorul unui pargraf (se genereaza o linie atat inainte cat si dupa citat). In
cazul in care citatele sunt mai scurte se foloseste eticheta <q>...</q>, iar daca textul depaseste cateva
propozitii atunci se foloseste eticheta <blockquote>...</blockquote>. Sintaxa este:
<blockquote> ... text ... </ blockquote>
Atributele standard pe care le poate avea eticheta <blockquote> sunt: class, dir, id, lang, style, title, xml:lang
Exemplul 2.16.
<html>
<body>
Exemplu de citat mai mare:
<blockquote>
______________________________________________________________________________________________
Suport de curs HTML
Exemplu de citat care se intinde pe mai multe randuri.

</blockquote>
Un browser insereaza spatiu inainte si dupa un element BLOCKQUOTE si de asemenea insereaza margini
(stanga, dreapta) pentru elemetul BLOCKQUOTE.
</body>
</html>
Un citat permite si alte formatari in interiorul etichetelor sale, insa, pentru a fi validat ca HTML strict / XHTML,
trebuie sa contina numai alte elemente bloc (block-level) (ex. <p>...</p>, <hx>..</hx>, <table>...</table>, etc).
De exemplu:
Exemplul 2.17.
<html>
<body>
Exemplu BLOCKQUOTE:
<blockquote>
<p>Exemplu de citat . Exemplu de citat . Exemplu de citat . Exemplu de citat . Exemplu de citat . </p>
</blockquote>
</body>
</html>
Daca se doreste folosirea unui citat mai scurt, in linie, atunci se foloseste eticheta <q> care nu separa citatul de
restul textului inconjurator. In acest caz, sintaxa este:
<q> ... text ... </q>
Atributele standard pe care le poate avea eticheta <q> sunt: class, dir, id, lang, style, title, xml:lang
Exemplul 2.18.
<html>
<body>
Exemplu de folosite a unui citat <q>in linie</q> care nu separa citatul de resul textului.
</body>
</html>
2.2.2.7. Texte preformatate

Metoda prin care textele apar in fereastra navigatorului exact asa cum au fost scrise este folosirea textelor
preformatate. Pentru a introduce in documentul HTML astfel de texte preformatate se utilizeaza eticheta
recipient PRE. Sintaxa este:
<pre> ... text preformatat ... </pre>
______________________________________________________________________________________________
Suport de curs HTML
Iata si cateva dintre avantajele folosirii textelor preformatate in locul paragrafelor combinate cu trecere la
rand nou:
 Permit crearea de liste indentate pe nivele;
 Permit crearea tabelelor prin alinierea precisa a coloanelor;
 Permit afisarea de blocuri de cod care altfel ar fi greu de citit de catre utilizator.
Textul preformatat poate contine orice elemente de formatare fizica sau logica, legaturi sau imagini, linii
orizontale sau intreruperi de linie. Este interzisa folosirea etichetelor de antet si de paragraf in astfel de blocuri
de text preformatat. Insa cel mai important lucru este faptul ca permite afisarea textului cu caractere
monospatiate, fiind tratate toate caracterele inclusiv cele de genul spatiilor albe sau trecerile la linie noua.
Trebuie insa facuta observatia ca in cazul folosirii caracterului „TAB” cursorul va fi mutat la urmatoarea pozitie
care reprezinta un intreg multiplu de 8. Se recomanda insa folosirea spatiilor pentru diverse alinieri, deoarece
caracterul „TAB” este interpretat diferit de navigatoare.
Atributele standard pe care le poate avea eticheta <pre> sunt: class, dir, id, lang, style, title, xml:lang
Exemplul 2.19.
<html>
<head>
<title>Exemplu de document ce contine text preformatat</title>
</head>
<body>
<pre>
Textul din eticheta PRE
este afisat printr-un font monospatiat si
pastreaza atat spatiile
cat si trecerea la linie noua.
</pre>
</body>
</html>
2.2.2.8. Adresa
Unul dintre elementele importante intr-un document HTML este ADDRESS. Este folosit pentru marcarea
informatiilor de contact (autorul documentului, adresa si e-mail, telefon) in scopul de a da posibilitatea
utilizatorilor sa ia contact cu cel care a creat documentul. Sintaxa este:
<address> ... specificare informatii contact ... </address>
Eticheta se plaseaza de obicei la inceputul sau la sfarsitul documentului. Este bine de introdus in corpul acestei
etichete si data ultimei actualizari a paginii, precum si informatiile de copyright.
Atributele standard pe care le poate avea eticheta <address> sunt: class, dir, id, lang, style, title, xml:lang
Exemplul 2.20.
<html>
<body>
______________________________________________________________________________________________
Suport de curs HTML
<address>
Designed by: A A<br>
<a href="mailto:utilizator@exemplu.ro">Contactati-ne</a><br>
Adresa: Str. A, Nr. 1, Disneyland<br>
Telefon: 12 34 56 78 90
</address>
</body>
</html>
2.2.2.9. Entitati caracter si caractere speciale
In cea mai mare parte a documentelor HTML se utilizeaza caracterele standard care fac parte din setul
standard ACSII. Exista insa un numar de caractere speciale care nu se regasesc in setul ASCII de baza. Acestea
sunt cele folosite in alte limbi europene decat engleza, cateva simboluri matematice, precum si o grupa de alte
caractere. O mare parte din aceste caractere apar in Alfabetul ISO Latin-1. Pentru afisarea lor se utilizeaza
entitati caracter speciale (denumite si secvente „escape”).
Formatul unei entitati include caracterul „&” urmat de numele (simbolic al) caracterului sau de un simbol
reprezentat de un numar cuprins intre 0 si 255 (acesta fiind de fapt codul caracterului) si precedat de semnul
„#”.
Asadar, entitatile por avea doua forme:
 entitati text, simbolizate: &cod
 entitati numerice, simbolizate: &#numar
In tabelul urmator sunt prezentate o serie de caractere speciale si reprezentarea lor:
Caracter Cod numeric Denumire cod Descriere
" " " apostrof
& & & si
< < < mai mic decat
> > > mai mare decat
¢ ¢ ¢ cent
£ £ £ pound
¦ ¦ ¦ or brkbar; bara verticala
§ § § semn de sectiune
© © © copyright
® ® ® marca inregistrata
° ° ° grad
± ± ± plus sau minus
² ² ² puterea 2
³ ³ ³ puterea 3
· · · punct
¹ ¹ ¹ puterea 1
¼ ¼ ¼ sfert
½ ½ ½ jumatate
¾ ¾ ¾ trei patrimi
Æ Æ Æ AE mare
æ æ æ ae mic
É É É E acut mare
______________________________________________________________________________________________
Suport de curs HTML
é é é e acut mic

× × × Inmultire
÷ ÷ ÷ Impartire
, ¸ ¸ virgula
spatiu
Exemplul 2.21.
<html>
<body>
A B C D E<br>
A     B     C     D     E<br>
© Copyright 2008
</body>
</html>
2.2.2.10. Comentarii
Exista posibilitatea de a adauga comentarii in codul sursa al paginii HTML. Acestea vor fi plasate intre
etichetele „”. Comentariul nu va aparea in fereastra navigatorului, insa el este accesibil utilizatorului
daca acesta vizualizeaza sursa documentului. Sintaxa este:

Eticheta de comentariu nu accepta atribute standard.
Exemplul 2.22.
<html>
<body>
Text care este afisat pe pagina.
<!—text in comentariu, care nu va fi afisat pe pagina.-->
</body>
</html>
Comentariile pot fi incluse oriunde in documentul HTML. In interiorul unui comentariu pot aparea chiar si
etichete HTML, insa acest lucru nu este recomandat deoarece navigatoarele pot interpreta gresit astfel de
continut (de obicei caracterul „>”) si produc ca rezultat interpretarea gresita a restului documentului HTML.
In interiorul comentariilor pot fi stocate informatii specifice unui program. In acest caz ele nu vor fi vizibile
pentru utilizator, dar vor fi disponibile pentru respectivul program. Se foloseste adaugarea textelor de script si
a elementelor de stil in comentarii, pentru a preveni browserele mai vechi, care nu accepta scripturi sau stiluri,
sa le afiseze ca text simplu.
2.2.3. Divizarea corpului documentului in bucati

Eticheta <div> este folosita pentru a diviza un document HTML in bucati. Se comporta ca un recipient si are
urmatoarea sintaxa:
<div> ...definire bloc ... </div>
______________________________________________________________________________________________
Suport de curs HTML
DIV este asemanator cu P, cu diferenta ca DIV nu genereaza pauze in document inainte si dupa locul unde este
plasat. Este folosit mai mult pentru facilitatile oferite la lucrul cu foi de stil in cascada.
Atributele standard pe care le poate avea eticheta <div> sunt: class, dir, id, lang, style, title, xml:lang
Exemplul 2.23.
<html>
<body>
<h3>Acesta este un antet de nivel 3.</h3>
<p>Acesta este un paragraf.</p>
<div style="color:#00FF00">
<h3>Acesta este un antet de nivel 3 in cadrul etichetei DIV.</h3>
<p>acesta este un paragraf in cadrul etichetei DIV.</p>
</div>
</body>
</html>
Eticheta <span> se foloseste asemenator cu <div>, diferenta fiind ca aceasta este un element in linie. Aceasta
nu prevede nicio schimbare vizuala de la sine. SPAN ofera o modalitate de a incadra un text sau o parte dintr-
un document, fie pentru a i se adauga un stil, fie pentru a manipula continutul cu JavaScript de exemplu.
Sintaxa este urmatoarea:
<span> ... definire continut ... </span>
Atributele standard pe care le poate avea eticheta <span> sunt: class, dir, id, lang, style, title, xml:lang
Exemplul 2.24.
<html>
<head>
<style type="text/css">
span.galben {
color:yellow;
}
</style>
</head>
<body>
Lista de cumparaturi: mere <span style="color:red">rosii</span>, mere <span
style="color:green">verzi</span> si <span class="galben">lamai</span>.
</body>
</html>
2.3. Folosirea culorilor in tabele

In HTML există trei feluri distincte de a defini o culoare. Cea mai simplă metodă este aceea de a denumi
culorile(în engleză). De exemplu black, white, red, green și blue.
______________________________________________________________________________________________
Suport de curs HTML
2.3.1. HTML – sistemul de culori RGB

Acest cod nu este recomandat, deoarece Internet Explorer este singurul browser care acceptă valorile RGB in
HTML.
RGB este prescurtarea pentru: Red, Green, Blue. Fiecare dintre aceste culori poate lua orice valoare între 0
(fără culoare) și 255 ( 100% acea culoare). Dacă folosiți un alt browser decât Internet Explorer nu veti obtine
nici un rezultat.
bgcolor="rgb(255,255,255)" White
bgcolor="rgb(255,0,0)" Red
bgcolor="rgb(0,255,0)" Green
bgcolor="rgb(0,0,255)" Blue
2.3.2. HTML – sistemul de culori hexazecimal #ff0000

Sistemul hexazecimal este sistemul standard pentru toate browser-ele web. Este o reprezentare formată din 6
caractere de culoare. Primele două caractere (RR) reprezinta valoarea rosu (red), urmatoarele doua (GG) sunt
verde (green), iar ultimele doua (BB) sunt albastru (blue).
Culoare Valoarea hexazecimala RGB

BLACK #000000
SILVER #C0C0C0
GRAY #808080
WHITE #FFFFFF
MAROON #800000
RED #FF0000
PURPLE #800080
FUCHSIA #FF00FF
GREEN #008000
LIME #00FF00
OLIVE #808000
YELLOW #FFFF00
NAVY #000080
BLUE #0000FF
TEAL #008080
AQUA #00FFFF
HTML - Coduri de culoare - Ruperea codului

Integrarea literelor in sistemul hexazecimal este prezentata in continuare, marind astfel posibilitatile de
combinare:
Zecimal
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Hexazecimal
0123456789ABCDEF
______________________________________________________________________________________________
Suport de curs HTML
In acest fel posibilitatile cresc iar sistemul poate avea 16 valori.
Un exemplu de cod hexazecimal ar fi: bgcolor="#FFFFFF"
Litera "F" este valoarea maxima pe care o poate avea sistemul. La intalnirea acestui cod un browser, va afisa
alb. Pentru aflarea valorii numerice a acestei culori, avem formula urmatoare:
(15 * 16) + (15) = 255
Formula este foarte simpla. Se ia prima valoare a lui "F" sau 15 si se inmulteste cu 16 si se adauga celei de-a
doua valori 15. Rezultatul este 255, valoarea maxima pe care o poate avea o culoare primara.
bgcolor="#CC7005"
CC(RR - Red)
(12 * 16) + (12) = 204
70(GG - Green)
(7 * 16) + (0) = 112
05(BB - Blue)
(0 * 16) + (5) = 5
______________________________________________________________________________________________
Suport de curs HTML
2.4. Etichete si atribute prezentate in acest capitol

Eticheta Atribute Functie
<html>...</html> xmlns Inglobeaza intregul document HTML.
dir
lang
xml:lang
<head>...</head> profile Antetul documentului HTML.
dir
lang
xml:lang
<title>...</title> profile Indica titlul documentului. Se foloseste in interiorul
dir etichetei <head>.
lang
xml:lang
<meta> content Permite introducerea unor informatii diverse.
http-equiv
name
scheme
dir
lang
xml:lang
<base> href Specifica URL-ul de baza.
target
<link> href
media
rel
type
class
Folosita pentru a crea relatii intre documente si pentru a
dir
specifica diverse proprietati ale foilor de stil in cascada.
id
lang
style
title
xml:lang
<style> type
media
dir
Folosita pentru specificarea proprietatilor de stil.
lang
title
xml:lang
<script> type
Folosita pentru a defini un script client-side.
src
<body>...</body> class Corpul documentului HTML.
dir
id
lang
style
title
______________________________________________________________________________________________
Suport de curs HTML
xml:lang
<h1>...</h1> class Antet de nivel 1.
<h2>...</h2> dir Antet de nivel 2.
<h3>...</h3> id Antet de nivel 3.
<h4>...</h4> lang Antet de nivel 4.
<h5>...</h5> style Antet de nivel 5.
<h6>...</h6> title Antet de nivel 6.
xml:lang
<p>...</p> class Defineste un paragraf. Eticheta de inchidere </p> este
dir optionala.
id
lang
style
title
xml:lang
<br> class Linie noua.
id
style
title
<hr> class Deseneaza o linie orizontala.
dir
id
lang
style
title
xml:lang
<blockquote> ... class Citate, secvente lungi de text intr-un bloc separat,
</blockquote> dir despartite de textul inconjurator.
id
lang
style
title
xml:lang
<q> ... </q> class Citate scurte in linie.
dir
id
lang
style
title
xml:lang
<pre> ... </pre> class Texte preformatate.
dir
id
lang
style
title
xml:lang
<address> ... </address> class Specifica informatiile de contact (e-mail, adresa
dir completa, telefon) pentru un document.
id
______________________________________________________________________________________________
Suport de curs HTML
lang
style
title
xml:lang
<div> ... </div> class Defineste o diviziune in document.
dir
id
lang
style
title
xml:lang
<span> ... </span> class Folosit pentru a marca un continut in linie.
dir
id
lang
style
title
xml:lang
 - Comentariu.
______________________________________________________________________________________________
Suport de curs HTML
Capitolul 3. FORMATAREA TEXTULUI

Odata ce s-a creat un document, cea mai mare parte a muncii este facuta. Textul scris este despartit precis in
paragrafe, antetele sunt la locul lor, si diferite elemente ca de exemplu titlul si informatiile despre autor au
fost adaugate.
Etichetele pentru paragrafe sau antete afecteaza intregul text din interiorul lor, schimband fontul, sau
schimband spatierea deasupra sau dedesubtul liniei.
HTML ofera posibilitatea alegerii fontului si a aplicarii mai multor stiluri de formatare a textului in mod
particular, doar pentru o anumita sectiune a unui paragraf. In acest sens exista etichete care schimba aspectul
unui set de caractere dintr-un text, acestea fiind grupate in doua categorii: etichete utilizate pentru formatare
logica si cele utilizate pentru formatare fizica.
3.1. Formatarea logica

Una dintre ideile care au stat la baza HTML este ca documentele sa fie aranjate intr-o maniera logica si
structurata. Aceasta da utilizatorilor mai multa flexibilitate decat este posibil. Astfel, s-au creat in HTML o serie
de formatari in acord cu scopul pe care ele il deservesc. Avantajul este ca documentele nu sunt limitate la o
anumita platforma. Cu toate ca ele vor arata altfel pe diferite platforme, continutul si contextul vor ramane la
fel.
Eticheta Descriere
<cite> ... </cite> Este folosita pentru a specifica citate. Poate fi de asemenea folosit pentru
a indica titluri de carti sau articole. Textul este afisat inclinat.
<code> ... </code> Este folosita pentru a marca fragmente scrise intr-un limbaj de
programare, de marcaj, etc. Textul este afisat cu font de dimensiune fixa.
<em> ... </em> Este folosita pentru evidentierea unei sectiuni de text care este
considerata semnificativa. Textul este in general afisat inclinat.
<kbd> ... </kbd> Este folosita pentru a marca un text care trebuie introdus de utilizator
(de la tastatura). Textul este afisat cu font de dimensiune fixa.
<samp> ... </samp> Este folosita pentru a indica valorile afisate de un program, script, etc.
Textul este in general afisat cu font monospatiat.
<strong> ... </strong> Este folosita pentru a evidentia o sectiune importanta dintr-un text.
Textul este in general afisat ingrosat.
<var> ... </var> Este folosita pentru a marca variabile sau parametri ai unor programe.
Textul este in general afisat inclinat.
<dfn> ... </dfn> Este folosita pentru a marca un termen ce urmeaza sa fie definit. Textul
este in general afisat inclinat.
Atributele standard pe care le poate avea oricare eticheta de formatare logica de mai sus sunt: class, dir, id,
lang, style, title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1).
Exemplul 3.1.
<html>
<head>
<title>Exemplu - formatare logica</title>
</head>
______________________________________________________________________________________________
Suport de curs HTML
<body>
<p>Acest paragraf contine:<br>
Text simplu fara niciun fel de formatare.<br>
<cite>Un citat, scris inclinat</cite>.<br>
<strong>Un text important, scris ingrosat.</strong><br>
<samp>Un text scris monospatiat.</samp><br>
</p>
</body>
</html>
Pe ecran, va aparea afisat in modul urmator:
Acest paragraf contine:
Text simplu fara nici un fel de formatare.
Un citat, scris inclinat.
Un text important, scris ingrosat.
Un text scris monospatiat.
In cazul in care un text dintr-o astfel de eticheta va fi afisat normal, inseamna ca navigatorul nu suporta acel
stil logic de formatare.
Aceste elemente nu sunt depreciate, dar este posibil sa se obtina efecte mai bune cu CSS.
3.2. Formatarea fizica

Este important ca aspectul unui document HTML sa ramana acelasi pentru utilizator (n.a. cel care vizualizeaza
pagina web), indiferent de navigatorul pe care il foloseste.
In acest sens, pe langa formatarea logica a elementelor este posibila si formatarea fizica care da un control
sporit asupra aspectului textului formatat, ea permitand creatorului paginii web (a documentului HTML) sa
preia controlul asupra mai multor detalii: stilul de caractere, dimensiunea si culoarea lor.
Elementele de formatare fizica sunt urmatoarele:
Eticheta Descriere
<b> ... </b> Elementul este folosit pentru a afisa un text ingrosat (aldin).
<i> ... </i> Elementul este folosit pentru a afisa un text inclinat.
<tt> ... </tt> Elementul este folosit pentru a afisa un text cu font monospatiat.
<big> ... </big> Elementul este folosit pentru a afisa un text cu un font de o dimensiune mai
mare.
<small> ... </small> Elementul este folosit pentru a afisa un text cu un font de o dimensiune mai
mica.
<sub> ... </sub> Elementul este folosit pentru a muta un text mai jos decat textul
inconjurator si daca este posibil afisarea lui cu un font de o dimensiune mai
mica.
<sup> ... </sup> Elementul este folosit pentru a muta un text mai sus decat textul
inconjurator si daca este posibil afisarea lui cu un font de o dimensiune mai
mica.
<strike> ... </strike>
In cazul in care se alege un stil de formatare fizica si navigatorul nu suporta acest stil, el va fi substituit cu un
altul sau va fi ignorat.
______________________________________________________________________________________________
Suport de curs HTML
Toate etichetele prezentate mai sus se comporta ca un recipient si necesita eticheta de sfarsit. De asemenea
ele pot fi si imbricate, un element fiind continut in intregime in alt element.
Atributele standard pe care le poate avea oricare eticheta de formatare fizica sunt: class, dir, id, lang, style,
title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1).
Exemplul 3.2.
<html>
<head>
<title>Exemplu - formatare fizica</title>
</head>
<body>
<b>Text scris ingrosat.</b><br>
<i>Text scris inclinat.</i><br>
<tt>Text scris monospatiat.</tt><br>
Text de o dimensiune mai <big>mare</big> si text de o dimensiune mai <small>mica</small>.<br>
Text normal si <sup>exponent</sup>, apoi text normal si <sub>indice</sub>.
</body>
</html>
Pe ecran, va aparea afisat in modul urmator:
Text scris ingrosat.
Text scris inclinat.
Text scris monospatiat.
Text de o dimensiune mai mare si text de o dimensiune mai mica.
Text normal si exponent, apoi text normal si indice.
______________________________________________________________________________________________
Suport de curs HTML

<cite> ... </cite> Este folosita pentru a specifica citate.
<code> ... </code> Este folosita pentru a marca fragmente scrise intr-un limbaj
de programare, de marcaj, etc.
<em> ... </em> Este folosita pentru a evidentia un text.
<kbd> ... </kbd> Este folosita pentru a marca un text de la tastatura.
<samp> ... </samp> Este folosita pentru a indica valorile afisate de un program,
script, etc.
<strong> ... </strong> Este folosita pentru a evidentia mai mult un text.
<var> ... </var> Este folosita pentru a marca variabile sau parametri ai unor
programe.
class
<dfn> ... </dfn> Este folosita pentru a marca un termen ce urmeaza sa fie
dir
definit.
id
lang
<b> ... </b> Este folosita pentru a afisa un text ingrosat.
style
<i> ... </i> title Este folosita pentru a afisa un text inclinat.
<tt> ... </tt> xml:lang Este folosita pentru a afisa un text cu font monospatiat.
<big> ... </big> Este folosita pentru a afisa un text cu un font de o
dimensiune mai mare.
<small> ... </small> Este folosia pentru a afisa un text cu un font de o
dimensiune mai mica.
<sub> ... </sub> Este folosita pentru a muta un text mai jos decat textul
inconjurator si daca este posibil afisarea lui cu un font de o
<sup> ... </sup> Este folosita pentru a muta un text mai sus decat textul
inconjurator si daca este posibil afisarea lui cu un font de o
______________________________________________________________________________________________
Suport de curs HTML
Capitolul 4. LISTE
Adeseori, pentru crearea paginilor web este necesara folosirea unor liste pentru organizarea informatiilor sub
forma de termeni, obiecte, elemente sau definitii. HTML dispune de etichete care indenteaza textul automat,
care adauga numere, caractere sau simboluri in fata fiecarui element din lista, suportand mai multe tipuri de
liste, si anume:
- liste neordonate: sunt liste indentate care au un simbol in fata fiecarui element
- liste ordonate (numerotate): sunt liste indentate care au numere sau caractere in fata fiecarui element
- liste de definitii (de termeni): sunt liste indentate fara numere sau simboluri in fata fiecarui element
4.1. Liste neordonate

4.1.1. Definire si utilizare
Listele neordonate reprezinta o lista de obiecte care nu defineste o structura specifica si se definesc utilizand
eticheta <ul>... definire lista neordonata... </ul>. Fiecare element al listei va fi definit folosind <li>... element
...</li> si el va fi precedat de un simbol numit „bullet”. Eticheta de inchidere </li> poate fi omisa.
O lista neordonata se defineste astfel:
<ul>
<li>Element 1</li>
<li>Element 2</li>
....
<li>Element n</li>
</ul>
Exemplul 4.1.
<html>
<head>
<title>Exemplu de document html care contine o lista neordonata</title>
</head>
<body>
<b>Culorile curcubeului sunt:</b>
<br>
<ul>
<li>Rosu</li>
<li>Orange</li>
<li>Galben</li>
<li>Verde</li>
<li>Albastru</li>
<li>Indigo</li>
<li>Violet</li>
</ul>
</body>
</html>
Rezultat in browser:
______________________________________________________________________________________________
Suport de curs HTML
Culorile curcubeului sunt:
 Rosu
 Orange
 Galben
 Verde
 Albastru
 Indigo
 Violet
Un element al listei poate sa contina absolut orice: text simplu, paragraf, imagini, chiar si alte liste. Navigatorul
suporta si indenteaza automat sublistele. De asemenea, pentru fiecare sublista indentata va fi atribuit alt
simbol elementelor sublistei, acesta fiind diferit de celelalte.
Atribut: type=”circle” sau square sau disc
Exemplul 4.2.
<html>
<head>
<title>Exemplu de document HTML care contine liste neordonate imbricate</title>
</head>
<body>
<b>CUPRINS</b>
<ul>
<li>Introducere</li>
<li>Capitolul 1
<ul>
<li> Sectiunea 1.1</li>
</ul>
</li>
<li>Capitolul 2
<ul>
<li> Sectiunea 2.1
<ul>
<li> Subsectiunea 2.1.1</li>
<li> Subsectiunea 2.1.2</li>
</ul>
</li>
</ul>
</li>
<li>Capitolul 3</li>
<li>Capitolul 4
<ul>
</ul>
</li>
</ul>
______________________________________________________________________________________________
Suport de curs HTML
</body>
</html>
Rezultat in browser:
CUPRINS
 Introducere
 Capitolul 1
o Sectiunea 1.1
o Sectiunea 1.2
 Capitolul 2
o Sectiunea 2.1
 Subsectiunea 2.1.1
 Subsectiunea 2.1.2
o Sectiunea 2.2
 Capitolul 3
 Capitolul 4
o Sectiunea 4.1
Atributele standard pe care le pot avea etichetele <ul> si <li> sunt: class, dir, id, lang, style, title, xml:lang
4.2. Liste ordonate

O lista ordonata, denumita si lista numerotata, este folosita pentru a crea liste de elemente numerotate.
Navigatorul observa eticheta pentru lista ordonata si numeroteaza secvential fiecare element din lista folosind
numere (1, 2, 3, s.a.m.d.).
<ol>
<li> Element numerotat 1</li>
<li> Element numerotat 2</li>
....
<li> Element numerotat n</li>
</ol>
Aceasta eticheta prevede la inceput si la sfarsit o linie goala pentru a izola lista de textul inconjurator, nefiind
necesar ca lista sa fie precedata sau urmata de o eticheta de tip paragraf <p>.
In exemplul urmator avem definita o lista ordonata compusa din 7 elemente.
Exemplul 4.3.
<html>
<head>
<title>Exemplu de document html care contine o lista neordonata</title>
</head>
<body>
<b>Culorile curcubeului sunt:</b>
______________________________________________________________________________________________
Suport de curs HTML
<br>
<ol>
<li>Rosu</li>
<li>Orange</li>
<li>Galben</li>
<li>Verde</li>
<li>Albastru</li>
<li>Indigo</li>
<li>Violet</li>
</ol>
</body>
</html>
In fereastra de afisare a navigatorului vom observa:
Culorile curcubeului sunt:
1. Rosu
2. Orange
3. Galben
4. Verde
5. Albastru
6. Indigo
7. Violet
Atributele standard pe care le poate avea eticheta <ol> sunt: class, dir, id, lang, style, title, xml:lang
4.3. Liste de definitii

Listele de definitii, denumite de asemenea si liste de termeni, reprezinta un tip special de liste in HTML. Ele au
un format ca si al dictionarului, cu termen de identificare si paragraful de definitie indentat.
Acest format este folositor in special acolo unde avem elemente cu o descriere complexa, ca de exemplu
cataloage de produse sau departamente ale unei companii.
Acest tip de lista se defineste prin eticheta <DL> care are in interiorul sau eticheta <DT> pentru definirea
termenului si eticheta <DD> pentru definitia propriu-zisa. Ambele etichete de definire sunt etichete deschise,
ceea ce inseamna ca nu necesita o eticheta de inchidere corespunzatoare la sfarsit.
Eticheta <DL> prevede la inceput si la sfarsit o linie goala pentru a izola lista de definitii de textul inconjurator.
Elementele listei sunt aranjate astfel incat fiecarui termen i se asociaza definitia corespunzatoare.
Eticheta <DT> ar trebui sa incapa intr-o singura linie, dar poate trece pe urmatoarea linie fara indentare.
Eticheta <DD> arata ca si un paragraf indentat continuu, poate avea orice lungime, iar in interiorul lui poate fi
plasata orice structura.
<dl>
<dt>Termen 1</dt>
<dd> Definitie 1</dd>
______________________________________________________________________________________________
Suport de curs HTML
<dt>Termen 2</dt>
<dd> Definitie 2</dd>
....
<dt>Termen n</dt>
<dd> Definitie n</dd>
</dl>
Consideram urmatorul exemplu in care avem definiti cativa termeni informatici esentiali prin intermediul unei
liste de definitii:
Exemplul 4.4.
<html>
<head>
<title>Exemplu de document html care contine lista de definitii</title>
</head>
<body>
<b>Dictionar explicativ de calculatoare</b>
<dl>
<dt><b>bit</b></dt>
<dd>provine din prescurtarea denumirii englezesti <i>"binary digit"</i>. reprezinta elementul generic al
unei multimi formata din doua elemente.</dd>
<dt><b>caption</b></dt>
<dd>text descriptiv care este asociat unei figuri. de obicei, pentru a se distinge se utilizeaza un alt tip de
caractere.</dd>
<dt><b>file</b></dt>
<dd>fisier: o colectie organizata de inregistrari, dispusa pe unul sau mai multe suporturi externe,
memorata sub un singur nume, fiind compusa din una sau mai multe inregistrari, continand informatii legate
intre ele. inregistrarile pot fi sau nu secventiale.</dd>
<dt><b>increment</b></dt>
<dd>incrementare: adunarea unei constante, de obicei 1, la valoarea unei variabile (registru, locatie de
memorie).</dd>
</dl>
</body>
</html>
In fereastra navigatorului se va afisa:
Dictionar explicativ de calculatoare
bit
provine din prescurtarea denumirii englezesti „binary digit”. Reprezinta elementul generic al unei
multimi formata din doua elemente.
caption
text descriptiv care este asociat unei figuri. De obicei, pentru a se distinge se utilizeaza un alt tip de
caractere.
file
fisier: o colectie organizata de inregistrari, dispusa pe unul sau mai multe suporturi externe,
memorata sub un singur nume, fiind compusa din una sau mai multe inregistrari, continand
informatii legate intre ele. Inregistrarile pot fi sau nu secventiale.
increment
incrementare: adunarea unei constante, de obicei 1, la valoarea unei variabile (registru, locatie de
______________________________________________________________________________________________
Suport de curs HTML
memorie).
Atributele standard pe care le pot avea etichetele <dl>, <dt>, <dd> sunt: class, dir, id, lang, style, title, xml:lang
______________________________________________________________________________________________
Suport de curs HTML
Tag Atribute Functie

<ul> ... </ul> class Defineste o lista neordonata.
<ol> ... </ol> dir Defineste o lista ordonata (numerotata).
<li> ...</li> id Element din lista (ordonata / numerotata). Folosit cu etichetele:
lang <ol> sau <ul>.
<dl> ... </dl> style Defineste o lista de definitii.
<dt>...</dt> title Defineste un termen, ca parte integranta a unei liste de definitii
<dd>...</dd> xml:lang Corespunde definitiei la definirea unui termen, ca parte
integranta a unei liste de definitii.
______________________________________________________________________________________________
Suport de curs HTML
Capitolul 5. TABELE
Tabelele reprezinta unul din cele mai importante instrumente utilizate pentru formatarea paginilor web. Ele
reprezinta o alternativa serioasa la alte moduri de vizualizare „tabelara sau structurata” a datelor, cum ar fi
eticheta <pre> sau etichetele folosite pentru definirea listelor, insa dezavantajul este aceala ca etichetele unui
tabel sunt mai complicate (si in acelasi timp mai complexe) si mai greu de folosit.
5.1. Definire si utilizare

Definirea unui tabel se realizeaza cu ajutorul etichetei:
<table> ... definire tabel ... </table>
Acesta se comporta ca un recipient pentru etichetele:
<caption> - specifica titlul tabelului (este o eticheta optionala)
<tr> - defineste liniile tabelului (table row)
<td> - introduce celule in liniile tabelului (table data)
<th> - descrie celulele cap de tabel, fiind o eticheta optionala (table header)
care descriu in amanunt un tabel.
Eticheta TABLE este obligatoriu sa aiba eticheta de inchidere, pe cand la elementele TR si TD aceasta nu este
obligatorie, definirea unui nou element presupunand automat inchiderea precedentului.
Formatul general al unui tabel este urmatorul:
<table>
<caption>Titlul tabelului</caption>
<tr>
<td>linia 1 celula 1</td>
...
<td>linia 1 celula n</td>
</tr>
<tr>
...
<td>linia 2 celula n</td>
</tr>
... alte linii ...
<tr>
<td>linia n celula 1</td>
<td>linia n celula 2</td>
...
<td>linia n celula n</td>
</tr>
</table>
Fiecare dintre etichetele ce definesc un tabel poate fi utilizata impreuna cu anumite atribute care modifica
formatarea implicita a textului din celule. De retinut faptul ca atributele utilizate in cadrul etichetelor <th> si
<td> au precedenta mai mare decat cele din eticheta <tr>.
______________________________________________________________________________________________
Suport de curs HTML
In cadrul unei celule pot fi incluse orice alte elemente HTML (imagini, liste, legaturi, componente de formulare,
chiar si alte tabele).
Iata un exemplu simplu de tabel care are un titlu si este definit pe 3 randuri si 4 coloane:
Exemplul 5.1.
<html>
<head>
<title>Exemplu de document HTML care contine un tabel</title>
</head>
<body>
<table border="1">
<caption>Primul meu tabel</caption>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
In urma incarcarii documentului HTML in browser se va obtine:
Primul meu tabel

linia 1 celula 1 linia 1 celula 2 linia 1 celula 3 linia 1 celula 4
Eticheta <table> are urmatoarele atribute:

Atribut Functie
border Atribut optional.
Defineste grosimea chenarului din jurul tabelului.
Atributul BORDER aplica o bordura fiecarei celule si in jurul tabelului.
Daca valoarea atributului BORDER este schimbata (cu o valoare diferita de 0), atunci
______________________________________________________________________________________________
Suport de curs HTML
numai grosimea bordurii exterioare va fi schimbata, iar bordura din interiorul

tabelului ramane 1 pixel.
Valoare: pixeli.
Ex.: <table border="1">
cellpadding Atribut optional.
Defineste spatiul dintre peretele celulei si continutul celulei.
Valoare: pixeli.
Ex.: <table cellpadding="5">
cellspacing Atribut optional.
Defineste spatiul dintre celulele tabelului.
Valoare: pixeli.
Ex.: <table cellspacing="3">
summary Atribut optional.

Specifica un sumar al continutului tabelului.
Nu are rezultat vizibil in browser.
Valoare: text.
Ex.: <table summary="Orar">
width Atribut optional.
Specifica latimea unui tabel.
Valori posibile:
 pixeli
 valoare procentuala in raport cu elementul care il contine (x%)
Ex.: <table width="100"> sau <table width="20%">, etc.
class Atribute standard.
dir Functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1
id
lang
style
title
xml:lang
______________________________________________________________________________________________
Suport de curs HTML
5.2. Titlul tabelului

Printre elementele care definesc un tabel se afla si titlul, care contine informatii descriptive despre continutul
tabelului, usurand identificarea lui. Are caracter optional si va aparea deasupra sau dedesubtul tabelului:
...
<table>
<caption> ... titlul tabelului ... </caption>
... definire continut tabel ...
</table>
...
Eticheta CAPTION trebuie sa apara imediat dupa eticheta de definire a tabelului, <table> si inainte de orice
definire a unui rand sau celula a tabelului.
Se poate specifica numai un titlu pentru un tabel. Acesta va fi afisat centrat deasupra tabelului.
Eticheta <caption> are urmatoarele atribute standard: class, dir, id, lang, style, title, xml:lang (functionalitatile
acestor atribute sunt descrise la subcapitolul 2.2.2.1).
5.3. Latimea unui tabel

Atributul WIDTH poate fi folosit si pentru a specifica latimea unui tabel (in carul etichetei <table>).
Valorile pe care le poate lua acest atribut sunt specificate fie in pixeli, fie procentual.
De multe ori valoarea procentuala este folosita pentru a asigura compatibilitatea cu diverse rezolutii ale
ecranului, insa daca este nevoie de o latime fixa pentru afisarea diverselor continuturi atunci se foloseste
valoarea exprimata in pixeli.
Diferite atribute ale etichetelor HTML permit specificarea latimii acestora. De multe ori apare valoarea ca
numar fara sufix, ceea ce inseamna ca ea este exprimata in pixeli.
Lista sufixelor acceptate pentru definirea latimii in etichete HTML este urmatoarea:
Sufix Valoare
px, [nimic] Pixeli 1punct pe ecranul monitorului
Pt Puncte 1/72 inch
Pi Picas 1pi=12 pt
In Inci 2.54 cm
Cm Centimetri
Mm Millimetri
Em Unitati em 1em=curent font size=16px=12pt
% procent din latimea ecranului
Exemplul 5.2.
<html>
<head>
<title>Exemplu de tabel cu latime fixa / variabila</title>
______________________________________________________________________________________________
Suport de curs HTML
</head>
<body>
<table summary="tabel cu latime fixa" border="1" width="300">
<tr>
<th>Luna</th>
<th>Zile</th>
</tr>
<tr>
<td>Ianuarie</td>
<td>31</td>
</tr>
<tr>
<td>Februarie</td>
<td>28</td>
</tr>
</table>
<br>
<table summary="tabel cu latime variabila" border="1" width="50%">
<tr>
<th>Luna</th>
<th>Zile</th>
</tr>
<tr>
<td>Ianuarie</td>
<td>31</td>
</tr>
<tr>
<td>Februarie</td>
<td>28</td>
</tr>
</table>
</body>
</html>
5.4. Liniile / randurile unui tabel

Eticheta <tr> defineste o linie intr-un tabel HTML. Aceasta contine unul sau mai multe elemente <th> sau <td>.
Atributele pe care le poate avea eticheta <tr> sunt:
Atribut Functie
align Atribut optional.
Specifica tipul de aliniere orizontala a a continutului.
Valori posibile:
 left – aliniaza continutul la stanga (valoare implicita a pentru elementul TD)
 right – aliniaza continutul la dreapta
 center – aliniaza continutul centrat (valoare implicita pentru elementul TH)
 justify – aliniaza textul stanga-dreapta (marginile stanga – dreapta sunt uniforme)
valign Atribut optional.
______________________________________________________________________________________________
Suport de curs HTML
Specifica tipul de aliniere verticala a continutului.

Valori posibile:
 top – aliniere in partea de sus
 middle – aliniere la mijloc
 bottom – aliniere in partea de jos
 baseline – seteaza randul astfel incat toate
datele au aceeasi linie de baza (linia
imaginara pe care „stau” catacterele). De
obicei are acelasi efect ca BOTTOM, dar cand
dimensiunile fonturilor difera, se recomanda
folosirea BASELINE.
valign="bottom"
valign="baseline"

id
lang
style
title
xml:lang
Exemplul 5.3.
<html>
<head>
<title>Exemplu de diferite tipuri de aliniere in tabel</title>
</head>
<body>
<table border="1" width="300">
<tr align="left" valign="middle">
<td>randul 1</td>
<td>aliniere la stanga pe orizontala si la mijloc pe verticala</td>
<td>randul 1 celula 3</td>
</tr>
<tr align="center" valign="baseline">
<td>al doilea rand</td>
<td>randul 2 celula 2</td>
<td>aliniere la centru pe orizontala si aliniere la baza pe verticala</td>
</tr>
</table>
</body>
______________________________________________________________________________________________
Suport de curs HTML
</html>
5.5. Datele / celulele unui tabel

Un tabel HTML are doua tipuri de celule:
 celule antet – cele care contin informatiile antet (create cu elementul TH)
 celule standard – cele care contin date (create cu elementul TD)
O celula antet a unui tabel este definita folosind perechea de etichete <th> ... </th>. Continutul unei astfel de
celule este automat centrat si scris pronuntat, insa aceasta formatare poate fi modificata. Eticheta de
inchidere este optionala. Intr-un tabel obisnuit antetul este cuprins de obicei in prima linie/coloana, astfel ca
intr-un tabel de n linii si m coloane avem:
<table>
<tr>
<th>Antet 1</th>
<th> Antet 2</th>
...
<th> Antet m</th>
</tr>
<tr> ... linia 1 … </tr>
<tr> ... linia 2 … </tr>
...
<tr> ... linia n … </tr>
</table>
Celulele unui tabel se definesc utilizand perechi de etichete <td> ... </td> in cadrul recipientului TABLE.
Continutul din celule este aliniat automat la stanga si este afisat cu caractere obisnuite. Orice formatare
speciala se realizeaza incluzand atributele / etichetele in in cadrul etichetei TD.
<table>
<tr>
<th>Antet 1</th>
<th> Antet 2</th>
...
<th> Antet m</th>
</tr>
<tr>
<td>Celula 1</td>
<td>Celula 2</td>
...
<td>Celula m</td>
</tr>
...
<tr>
<td>Celula 1</td>
<td>Celula 2</td>
...
<td>Celula m</td>
______________________________________________________________________________________________
Suport de curs HTML
</tr>
</table>
Etichetele <td> si <th> au urmatoarele atribute:

Atribut Functie Se aplica pe
<td> <th>
abbr Atribut optional. da da
Specifica o versiune prescurtata a continutului unei celule.
Nu are efect vizibil in browserele obisnuite.
Valoare: text.
align Atribut optional. da da
Valori posibile:
 left – aliniaza continutul la stanga (valoare implicita a pentru
elementul TD)
 center – aliniaza continutul centrat (valoare implicita pentru
elementul TH)
 justify – aliniaza textul stanga-dreapta (marginile stanga – dreapta
sunt uniforme)
colspan Atribut optional. da da
Specifica numarul de coloane peste care sa se extinda celula (numar
mai mare ca 0). Valoarea 0, care specifica faptul ca celula se intinde
pana la ultima coloana din grup (COLGROUP), nu este suportata de
browserele importante.
Valoare: numar.
headers Atribut optional. da nu
Specifica antetul din tabel care este asociat celulei.
Nu are efect vizibil in browserele obisnuite.
Valoare: id-ul uneia sau mai multor celule antet cu care este asociat
(pentru a specifica mai multe id-uri acestea se separa prin spatiu).
Ex.:
<tr>
<th id="nume">Nume</th>
</tr>
<tr>
<td headers="nume">Dan</td>
</tr>
rowspan Atribut optional. da da
Specifica numarul de randuri / linii peste care sa se extinda celula
(numar mai mare ca 0). Valoarea 0, care specifica faptul ca celula se
intinde pana la ultima linie dintr-o sectiune (THEAD, TBODY, TFOOT),
este suportata numai de browserul Opera.
______________________________________________________________________________________________
Suport de curs HTML
Valoare: numar.
scope Atribut optional. da da
Defineste un mod de a asocia celulele antet si celulele de date dintr-
un tabel.
Atributul SCOPE specifica faptul ca o celula este antet pentru o
coloana, sau pentru o linie, sau pentru un grup de coloane sau de linii.
Nu are efect vizibil in browserele importante.
Valori posibile:
 col – specifica faptul ca celula este antet pentru o coloana
 row – specifica faptul ca celula este antet pentru o linie
 colgroup – specifica faptul ca celula este antet pentru un grup de
coloane
 rowgroup – specifica faptul ca celula este antet pentru un grup de
linii
valign Atribut optional. da da
Valori posibile:
 baseline – seteaza randul astfel incat toate datele au aceeasi linie
de baza (linia imaginara pe care „stau” catacterele). De obicei are
acelasi efect ca BOTTOM, dar cand dimensiunile fonturilor difera,
se recomanda folosirea BASELINE.
class Atribute standard. da da
id
lang
style
title
xml:lang
Exemplul 5.4.
<html>
<head>
<title> Exemplu - TH, TD</title>
</head>
<body>
<table border="1" summary="tabel cu: 4 elemente TH antet de colana, un element TD antet de linie si
asocieri intre celule si antetele TH">
<tr>
<th id="nume" scope="col" abbr="antet_coloana">Nume</td>
<th id="email" scope="col" >Email</td>
<th id="tel" scope="col" >Telefon</td>
<th id="adr" scope="col" >Adresa</td>
</tr>
______________________________________________________________________________________________
Suport de curs HTML
<tr>
<td headers="nume" scope="row" abbr="antet_rand">Anca</td>
<td headers="email">cineva@exemplu.ro</td>
<td headers="tel">+456789123</td>
<td headers="adr">Str. A, Nr. 1, Deva</td>
</tr>
</table>
</body>
</html>
5.6. Alinierea datelor in celule
Alinierea in tabel se poate realiza atat pe orizontala cat si pe verticala prin intermediul atributelor ALIGN si
respectiv VALIGN din cadrul etichetelor TR, TD, TH.
Valorile pe care le pot lua aceste atribute sunt:
 align
- left
- right
- center
- justify
 valign
- top
- middle
- bottom
- baseline
Exemplul 5.5.
<html>
<head>
<title>Alinierea in tabel</title>
</head>
<body>
<table border="1" width="100">
<tr align="right">
<td>Produs</td>
<td>Pret</td>
</tr>
<tr>
<td>Caiet tip I sau II</td>
<td align="right">5</td>
</tr>
<tr>
<td>Stilou</td>
<td align="right">20</td>
</tr>
<tr>
<td>Volum de poezii</td>
<td align="right" valign="top">50</td>
______________________________________________________________________________________________
Suport de curs HTML
</tr>
</table>
</body>
</html>
5.7. Spatierea celulelor

Prin folosirea atributului CELLSPACING se poate stabili spatiul dintre celulele tabelului. Valoarea se exprima in
pixeli, implicit fiind considerata egala cu 1.
5.8. Spatierea datelor in celule

Asemanator spatierii intre celule se poate stabili si distanta dintre marginea celulei si informatia continuta in
celula respectiva. Acest lucru se realizeaza cu atributul CELLPADDING care poate lua valori exprimate in pixeli
si care implicit este stabilit la valoarea 1.
Exemplul 5.6.
<html>
<head>
<title>Exemplu care contine trei tabele cu spatieri diferite</title>
</head>
<body>
<p>Tabel cu spatiu intre celule stabilit la valoarea 10</p>
<table border="1" cellspacing="10">
<tr>
<td>celula 1.1</td>
<td>celula 1.2</td>
<td>celula 1.3</td>
</tr>
<tr>
<td>celula 2.1</td>
<td>celula 2.2</td>
<td>celula 2.3</td>
</tr>
</table>
<p>Tabel cu spatiu in interiorul celulelor stabilit la valoarea 10</p>
<table border="1" cellpadding="10">
<tr>
<td>celula 1.1</td>
<td>celula 1.2</td>
<td>celula 1.3</td>
</tr>
<tr>
<td>celula 2.1</td>
<td>celula 2.2</td>
______________________________________________________________________________________________
Suport de curs HTML
<td>celula 2.3</td>
</tr>
</table>
<p>Tabel cu spatiu intre celule stabilit la valoarea 10 si spatiul intre celule la valoarea 10</p>
<table border="1" cellspacing="10" cellpadding="10">
<tr>
<td>celula 1.1</td>
<td>celula 1.2</td>
<td>celula 1.3</td>
</tr>
<tr>
<td>celula 2.1</td>
<td>celula 2.2</td>
<td>celula 2.3</td>
</tr>
</table>
</body>
</html>
In fereastra navigatorului avem urmatorul rezultat:
Tabel cu spatiu intre celule stabilit la valoarea 10
celula 1.1 Celula 1.2 celula 1.3
celula 2.1 Celula 2.2 celula 2.3
Tabel cu spatiu in interiorul celulelor stabilit la valoarea 10
celula 1.1 celula 1.2 celula 1.3
Tabel cu spatiu intre celule stabilit la valoarea 10 si spatiul intre celule la valoarea 10
5.10. Extinderea celulelor

O celula poate fi combinata cu cele alaturate, astfel rezultand celule mai mari. Extinderea se realizeaza cu
ajutorul atributelor ROWSPAN (pentru extindere peste mai multe linii) si COLSPAN (pentru extindere peste
mai multe coloane).
Pentru ca o celula sa se extinda peste n linii se foloseste atributul ROWSPAN in eticheta TD sau TH astfel:
<td rowspan="n">
______________________________________________________________________________________________
Suport de curs HTML
Pentru ca o celula sa se extinda peste n coloane se foloseste atributul COLSPAN in eticheta TD sau TH astfel:
<td colspan="n">
Exemplul 5.7.
<html>
<head>
<title>Exemplu - ROWSPAN COLSPAN</title>
</head>
<body>
<p><b>Exemple de tabele in care se foloseste ROWSPAN</b></p>
<table border="1" summary="tabel in care se foloseste COLSPAN">
<tbody>
<tr>
<td colspan="2">Variabile</td>
</tr>
<tr>
<td>x1</td>
<td>x2</td>
</tr>
<tr>
<td>y1</td>
<td>y2</td>
</tr>
</tbody>
</table>
<br>
<tbody>
<tr>
</tr>
<tr>
<td>x1</td>
<td>x2</td>
<td>x3</td>
</tr>
<tr>
<td>y1</td>
<td>y2</td>
<td>y3</td>
</tr>
</tbody>
</table>
<br>
<tbody>
<tr>
______________________________________________________________________________________________
Suport de curs HTML
<td>in plus</td>
</tr>
<tr>
<td>x1</td>
<td>x2</td>
<td>x3</td>
</tr>
<tr>
<td>y1</td>
<td>y2</td>
<td>y3</td>
</tr>
</tbody>
</table>
<p> </p>
<p><b>Exemplu de tabel in care se foloseste ROWSPAN</b></p>
<table border="1" summary="tabel in care se foloseste ROWSPAN">
<tbody>
<tr>
<td>An</td>
<td>Luna</td>
<td>Zile libere</td>
</tr>
<tr>
<td rowspan="3">2010</td>
<td>ianuarie</td>
<td>12</td>
</tr>
<tr>
<td>februarie</td>
<td>8</td>
</tr>
<tr>
<td>martie</td>
<td>10</td>
</tr>
</tbody>
</table>
<p> </p>
<p><b>Exemplu de tabel in care se folosesc COLSPAN si ROWSPAN</b></p>
<table border="1">
<tbody>
<tr>
<td colspan="3">Plan de vacanta / concediu</td>
</tr>
<tr> 
<td>An</td>
<td>Luna</td>
<td>Zile libere</td>
</tr>
______________________________________________________________________________________________
Suport de curs HTML
<tr>
<td rowspan="3">2010</td>
<td>martie</td>
<td>5</td>
</tr>
<tr>
<td>august</td>
<td>15</td>
</tr>
<tr>
<td>decembrie</td>
<td>10</td>
</tr>
</tbody>
</table>
</body>
</html>
5.10. Gruparea coloanelor si liniilor

HTML 4.0 include a serie de etichete pentru gruparea liniilor si a coloanelor in scopul unei definiri mai clare a
tabelului.
5.10.1. Gruparea coloanelor

Elementul COLGROUP da posibilitatea definirii unui grup de coloane pentru a le formata. Sintaxa pentru
eticheta de grup de coloane este urmatoarea:
<colgroup></colgroup>
Prin intermediul elementului COLGROUP putem aplica stiluri unei intregi coloane, sau unui grup de coloane,
fara a fi nevoie sa repetam stilurile pentru fiecare celula de pe fiecare rand.
Eticheta <colgroup> poate fi folosita numai in interiorul unui tabel.
In afara de atributele standard class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt
descrise la subcapitolul 2.2.2.1), doar atributele optionale width si span sunt suportate de browserele
importante pentru eticheta <colgroup>.
Atributul SPAN specifica numarul de coloane alaturate care formeaza un grup. Daca nu este inclus, valoarea sa
implicita este egala cu 1.
Exemplul 5.8.
<html>
<head>
<title>Exemplu - gruparea coloanelor: COLGROUP</title>
</head>
<body>
<table width="400" border="1" summary="tabel cu trei randuri si trei coloane">
______________________________________________________________________________________________
Suport de curs HTML
<colgroup width="50%"></colgroup> 
<colgroup width="25%" span="2"></colgroup> 
<tr>
<th>ID</th>
<th>Titlu</th>
<th>PretPretPret</th>
</tr>
<tr>
<td>12345</td>
<td>My HTML</td>
<td>$53</td>
</tr>
<tr>
<td>54321</td>
<td>My CSS</td>
<td>$47</td>
</tr>
</table>
</body>
</html>
Un efect asemanator elemntului COLGROUP il putem obtine prin intermediul elementului COL.
Elementul COL defineste valorile atributelor pentru una sau mai multe coloane.
Ca si in cazul elementului COLGROUP, elementul COL este util in situatia in care dorim sa aplicam anumite
stiluri unei intregi coloane / grup de coloane, fara a fi nevoie sa repetam stilurile pentru fiecare celula in parte.
Eticheta COL este una vida. Sintaxa este urmatoarea:
<col>
Eticheta <col> poate fi folosita numai in interiorul unui tabel sau in interiorul unui element COLGROUP.
In afara de atributele standard class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt
descrise la subcapitolul 2.2.2.1), doar atributul optional width este suportat de browserele importante pentru
eticheta <col>.
Spre deosebire de COLGROUP, atributul span nu este suportat de toate browserele importante si in cadrul
elementului COL.
Exemplul 5.9.
<html>
<head>
<title>Exemplu - eticheta COL</title>
</head>
<body>
<table width="400" border="1">
<col width="50%"> 
<col width="20%"> 
______________________________________________________________________________________________
Suport de curs HTML
<col width="20%"> 
<tr>
<th>ID</th>
<th>Titlu</th>
<th>PretPretPret</th>
</tr>
<tr>
<td>12345</td>
<td>My HTML</td>
<td>$53</td>
</tr>
<tr>
<td>54321</td>
<td>My CSS</td>
<td>$47</td>
</tr>
</table>
</body>
</html>
5.10.2. Gruparea liniilor (randurilor)
Etichetele TBODY, THEAD si TFOOT au functii similare cu COLGROUP, insa ele grupeaza linii, nu coloane.
TBODY defineste un grup de linii ce formeaza corpul tabelului si este folosit impreuna cu THEAD si TFOOT care
definesc un grup de linii pentru antetul si respectiv subsolul tabelului.
Fiecare din etichetele TBODY, THEAD, TFOOT se comporta ca un recipient, insa etichetele de sfarsit sunt
optionale.
Sintaxa pentru folosirea a celor trei etichete este:
...
<table>
<thead>
... definire linii antet ...
</thead>
<tfoot>
... definire linii si subsol ...
</tfoot>
<tbody>
... definire linii continut ...
</tbody>
</table>
...
Nota: TFOOT trebuie sa preceada TBODY in cadrul unui tabel HTML, pentru ca browserul sa interpreteze
subsolul inainte de a primi toate randurile de date. Aceasta ordine a elementelor nu va afecta structura
implicita a tabelului, adica: antet tabel, corp tabel, subsol tabel. Cu toate acestea, se poate folosi CSS pentru a
permite acestor elemente sa modifice structura implicita a tabelului.
______________________________________________________________________________________________
Suport de curs HTML
Etichetele <thead>, <tfoot> si <tbody> pot avea urmatoarele atribute:
Atribut Functie <thead> <tfoot> <tbody>

align Atribut optional. da da da
Valori posibile:
 left – aliniaza continutul la stanga (valoare implicita a
pentru elementul TD)
 center – aliniaza continutul centrat (valoare implicita
pentru elementul TH)
 justify – aliniaza textul stanga-dreapta (marginile stanga
– dreapta sunt uniforme)
valign Atribut optional. da da da
Valori posibile:
 baseline – seteaza randul astfel incat toate datele au
aceeasi linie de baza (linia imaginara pe care „stau”
catacterele). De obicei are acelasi efect ca BOTTOM, dar
cand dimensiunile fonturilor difera, se recomanda
folosirea BASELINE.
class Atribute standard. da da da
dir Functionalitatile acestor atribute sunt descrise la
id subcapitolul 2.2.2.1
lang
style
title
xml:lang
Exemplul 5.10.
<html>
<head>
<title>Exemplu – THEAD, TFOOT, TBODY</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<td>antet 1</td>
<td>antet 2</td>
</tr>
</thead>
<tfoot>
______________________________________________________________________________________________
Suport de curs HTML
<tr>
<td>subsol 1</td>
<td>subsol 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>continut celula rand 1</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</body>
</html>

<table>...</table> border Defineste un tabel.
cellpadding
cellspacing
summary
width
class
dir
id
lang
style
title
xml:lang
<caption>...</caption> class Defineste titlul tabelului.
dir
id
lang
style
title
xml:lang
<tr>...</tr> align Defineste o linie de tabel.
valign
class
dir
id
lang
style
title
______________________________________________________________________________________________
Suport de curs HTML
xml:lang
<td>...</td> abbr Defineste o cleula standard a unui tabel.
align
colspan
headers
rowspan
scope
valign
class
dir
id
lang
style
title
xml:lang
<th>...</th> abbr Defineste o celula antet a unui tabel.
align
colspan
rowspan
scope
valign
class
dir
id
lang
style
title
xml:lang
<colgroup>...</colgroup> width Defineste un grup de coloane.
span
class
dir
id
lang
style
title
xml:lang
<col> width Defineste valorile atributelor pentru una sau mai multe
class coloane.
dir
id
lang
style
title
xml:lang
<tbody>...</tbody> align Defineste corpul tabelului.
<thead>...</thead> valign Defineste antetul tabelului.
<tfoot>...</tfoot> class Defineste subsolul tabelului.
dir
id
______________________________________________________________________________________________
Suport de curs HTML
lang
style
title
xml:lang
______________________________________________________________________________________________
Suport de curs HTML
Capitolul 6. LEGATURI SI ANCORE

Cea mai importanta caracteristica a HTML-ului o reprezinta fara indoiala hyperlegaturile. Fara acestea webul
nu ar fi nimic altceva decat niste fisiere seperate, fara legatura unul cu celalalt.
6.1. Utilizarea legaturilor

Aceste hyperlegaturi (denumite si legaturi hypertext) permit imbinarea documentelor in diverse moduri, fiind
folosite in feluri diferite pentru:
 Conectarea cu alte pagini web (documente HTML) care fac parte din acelasi site sau dintr-unul diferit.
Acest tip de legatura de realizeaza prin folosirea elementului ANCHOR
 Inserarea obiectelor, cum ar fi imagini, sunete, animatii, intr-o pagina HTML
 Conectarea la alte resurse non-HTML
Pentru a crea o legatura este nevoie de doua lucruri, si anume:
 numele fisierului (sau URL-ul fisierului) unde se doresrte realizarea legaturii si
 un text sau o imagine care va servi ca element vizual in navigator, unde utilizatorul poate selecta sa
urmeze legatura.
Doar a doua parte este vizibila in pagina web. Cand utilizatorul selecteaza elementul vizual care „puncteaza”
spre legatura, navigatorul va folosi prima parte ca locatie unde sa „sara”.
Ca aspect, in mod implicit:
- un link nevizitat apare subliniat si albastru
- un link vizitat apare subliniat si violet
- un link activ apare subliniat si rosu
6.2. ANCHOR
Legaturile se realizeaza prin intermediul etichetei A (ANCHOR). Elementul A necesita atat eticheta de
deschidere cat si cea de inchidere si are urmatoarea sintaxa:
<a> ... text ... </a>
Chiar daca in cadrul etichetei nu se afla nicun atribut, ancora va fi valabila, insa efectul ei va fi nul. Pentru a
exista cu adevarat o hyperlegatura este absolut necesara prezenta atributului HREF in elementul ANCHOR.
Atributele etichetei <a> sunt:
Atribut Functie
href Atribut obligatoriu.
Defineste URL-ul destinatie al legaturii.
Valori posibile:
- un URL absolut – catre o alta pagina web (ex.
href="http://www.exemplu.com/index.html")
- un URL relativ – catre un fisier din cadrul site-ului (ex. href="fisier.htm")
- un URL ancora – trimite la o ancora din cadrul paginii curente (ex.:
href="#top")
Defineste numele ancorei.
______________________________________________________________________________________________
Suport de curs HTML
Atributul name este folosit pentru a crea un semn de carte intr-un document.
Destinatia legaturii se regaseste in cadrul etichetei <a>.
Valoare posibila: text.
target Defineste unde sa se deschida documentul legatura.
Valori posibile:
 _blank - deschide documentul intr-o fereastra noua
 _self - deschide documentul in aceeasi fereastra ca si documentul curent
(valoare implicita)
 _parent - deschide documentul in fereastra parinte (cea anterioara)
 _top - deschide documentul in fereastra initiala
accesskey Atribut standard.
Specifica o tasta de acces pentru element.
Valoare: caracter (de ex. daca accesskey="n" atunci accesarea elementului
legatura se poate face de la tastatura prin combinatia de taste: ALT+N).
class Atribut standard.
Specifica un nume de clasa.
Valoare: numele clasei.
Valori posibile:
Id Atribut standard.
Specifica un identificator unic
Valoare: numele identificatorului
Valoare: cod limba.
Ex.:
style Atribut standard.
Specifica stilul inline pentru element.
tabindex Atribut standard.
Specifica ordinea elementului.
Valoare: numar.

Valoare: text.
______________________________________________________________________________________________
Suport de curs HTML

Specifica limba in care este scris continutul intr-un document XML (pentru
XHTML).
Ex.:
6.2.1. HREF
HREF este cel mai important atribut al unui element A. Atributul HREF indica URL-ul destinatie. Adresa URL
poate fi o adresa completa sau una relativa si trebuie introdusa intre ghilimele. Un element A fara acest atribut
nu este functional. Odata adaugat atributul HREF, ancora devine functionala.
In functie de locatia fisierelor intre care se realizeaza legatura, avem:
- legatura interna – cand legatura se realizeaza catre o sectiune a aceluiasi fisier
- legatura catre un alt document – documentul destinatie poate fi pe acelasi calculator /server (legatura
locala), sau pe un alt calculator / server.
Se foloseste in urmatorul mod:
Exemplul 6.1.
<html>
<head>
<title>Exemplu de document HTML care contine o legatura la un alt document</title>
</head>
<body>
<a href="http://www.swissacademy.eu/index.html">Legatura spre pagina principala a site-ului swa</a>
</body>
</html>
Daca legatura este „locala” se poate inlocui linia 7 din exemplul precedent cu:
<a href="index.html"> Legatura spre pagina principala a site-ului swa</a>
Textul sau imaginea din interiorul etichetei A sunt evidentiate intr-un anume fel intr-un navigator fata de restul
documentului, textul fiind colorat albastru si subliniat, iar imaginea scoasa in evidenta printr-un chenar
albastru. Bineinteles, aceste formatari pot fi schimbate prin folosirea foilor de stil.
Adresa fisierului destinatie este cunoscuta sub numele de URL (Uniform Resource Locator). Pentru a specifica
locatia unui fisier aflat intr-un alt director sau pe un alt server, formatul standard este:
protocol://adresa
unde adresa reprezinta server-ul si calea inspre fisierul cu care se face legatura, iar protocol precizeaza tipul de
legatura care va fi stabilit si poate lua una din valorile:
 ftp (File Transfer Protocol) – acceseaza fisiere pe un server FTP;
 http (Hypertext Transfer Protocol) – realizeaza o legatura la o pagina web.
Exista si posibilitatea trimiterii unui mesaj prin posta electronica la o anumita adresa. Pentru aceasta se
foloseste acelasi atribut HREF impreuna cu „mailto” astfel:
______________________________________________________________________________________________
Suport de curs HTML
<a href="mailto:adresa_email">... text de legatura ...</a>
Astfel, urmatoarea secventa:

Exemplul 6.2.
<html>
<head>
<title>Exemplu de document HTML care contine o legatura ce permite trimiterea unui e-mail</title>
</head>
<body>
<a href="mailto:office@swissacademy.ro">Sugestii, comentarii si observatii la WebAdmin IIM</a>
</body>
</html>
va genera crearea unei ferestre de e-mail, care este deja configurata (la sectiunea „To” este scrisa adresa de e-
mail) pentru transmiterea unui mesaj.
6.2.1.1. Legarea paginilor locale folosind cai relative

Cand se precizeaza calea unui fisier intre ghilimele (cum s-a vazut in exemplul precedent), navigatorul cauta
implicit fisierul in acelasi director cu fisierul HTML curent. Acest caz este cel mai simplu, cand ambele fisiere se
gasesc pe acelasi sever si sunt continute in acelasi director.
Pentru a preciza cai relative in legaturi se tine seama se o serie de reguli:
 numele directoarelor sunt separate de caracterul „/” (slash)
 pentru a face referinta la directorul superior se folosesc „..” (doua puncte consecutive)
In tabelul urmator exista cateva exemple de cai relative cu explicatiile aferente.
Cale Ce inseamna
href="fisier.html" Folosim o astfel de cale relativa cand fisier.html este
localizat in directorul curent.
href ="undirector/fisier.html" Folosim o astfel de cale relativa cand fisier.html este
localizat in directorul cu numele „undirector”, iar acest
director se afla in directorul curent.
href ="undirector/altdirector/fisier.html" Folosim o astfel de cale relativa cand fisier.html este
localizat in directorul cu numele „altdirector”, care este
localizat in directorul „undirector”, iar acest director se
afla in directorul curent.
href ="../fisier.html" Folosim o astfel de cale relativa cand fisier.html este
localizat in directorul parinte al directorul curent.
href ="../../undirector/fisier.html" Folosim o astfel de cale relativa cand fisier.html este
localizat cu doua nivele de directoare mai sus, in
directorul cu numele „undirector”.
6.2.1.2. Legarea paginilor locale folosind cai absolute

Se pot de asemenea specifica legaturi la o alta pagina pe un sistem local folosind cai absolute. Caile relative
puncteaza catre o pagina unde se realizeaza legatura considerand locatia relativ la pagina curenta. Caile
absolute, pe de alta parte, puncteaza inspre o pagina incepand cu nivelul cel mai de sus din ierarhia
______________________________________________________________________________________________
Suport de curs HTML
directoarelor, parcurgand in jos toate directoarele pana sa ajunga la fisier. Caile absolute incep intotdeauna cu
„/”, acest lucru diferentiindu-le de caile relative.
In tabelul urmator exista cateva exemple de cai relative cu explicatiile aferente.
Cale Ce inseamna
href ="/undirector/altdirector/fisier.html" Folosim o astfel de cale absoluta cand fisier.html este
localizat in directorul specificat in calea:
„/undirector/altdirector”.
href ="C:/undirector/fisier.html" Folosim o astfel de cale absoluta cand fisier.html este
localizat pe discul C:, in directorul cu numele
„undirector”.
6.2.1.3. Cai relative sau cai absolute ?
Pentru a crea o legatura intre doua pagini, de cele mai multe ori se folosesc caile relative in locul cailor
absolute. Folosirea cailor absolute poate parea mai usoara in cazul legaturilor complicate, insa dezavantajul
este ca acestea nu sunt portabile.
In cazul in care este specificata legatura printr-o cale absoluta, iar apoi fisierul este mutat altundeva pe disc
sau redenumit vreun director din calea absoluta, toate legaturile vor fi „distruse” si va trebui depus un efort
suplimentar pentru editarea tuturor documentelor HTML si remedierea legaturilor.
Prin specificarea legaturilor relative se pot muta paginile web oriunde pe acelasi sistem sau pe altul si, cu mici
modificari, refacerea legaturilor se remediaza mult mai usor. De aceea, este mult mai usor de intretinut pagini
web care contin cai relative, deoarece o munca mai multa la inceput scuteste adesea un intreg efort depus
dupa aceea.
6.2.2. Legaturi la o sectiune din document (ancore denumite)
Exista si situatii in care un document HTML este de dimensiuni mai mari si atunci se impune realizarea unor
legaturi la o anumita sectiune a documentului din acelasi document sau din altul.
Ancorele denumite sunt acele elemente care fie contin o eticheta <a> cu un atribut name, fie orice alt element
cu un id atribuit.
Primul pas in realizarea unor astfel de legaturi este crearea ancorei in documentul HTML care sa indice locatia
unde se face legatura.
Dupa crearea ancorei cu nume, se va crea legatura la ea. Este folosita o notatie speciala pentru legatura la o
astfel de ancora. Locul URL-ului din atributul HREF este luat de numele ancorei precedat de semnul „#”.
Exemplul 6.3.
<html>
<head>
<title>Exemplu de document HTML care contine o ancora</title>
</head>
<body>
<b>CUPRINS</b>
<p><a href="#CAP1">Capitolul 1</a></p>
______________________________________________________________________________________________
Suport de curs HTML

...
...
...
<h1 id="CAP1">Capitolul 1. INTRODUCERE</h1>
...
<p>...........................</p>
...
<h1 id="CAP2">Capitolul 2. CREAREA PAGINILOR WEB</h1>
...
<p>...........................</p>
...
<h1 id="CAP6">Capitolul 6. LEGATURI IN PAGINI WEB</h1>
...
<p>...........................</p>
...
</body>
</html>
Dupa cum se observa in exemplul anterior, ancorele denumite nu au fost realizate cu elementul ANCHOR si
atributul name, ci cu atributul id si elementul H1.
Ancorele denumite pot fi folosite si pentru stabilirea de legaturi intre documente.
Exemplu:
<a href="http://www.iim.ro/evenimente.html#ev5">Evenimentul 5</a>
Prin selectarea acestei legaturi se poate accesa pagina la care se face referinta. Afisajul incepe cu pagina deja
derulata in locul unde este definita ancora ev5, in loc sa fie afisata de la inceput, cum ar fi normal.
Totodata un element ANCHOR poate indeplini simultan functia de sursa de legatura si destinatie a ancorei
denumite respective, prin folosirea ambelor atribute HREF si NAME.
______________________________________________________________________________________________
Suport de curs HTML

<a>...</a> href Defineste o legatura catre un alt document, sau catre o
name sectiune in cadrul documentului curent.
target
accesskey
class
dir
Id
lang
style
tabindex
title
xml:lang
______________________________________________________________________________________________
Suport de curs HTML
Capitolul 7. IMAGINI
Imaginile in linie sunt cele care apar in cadrul paginii web cand aceasta este incarcata in fereastra
navigatorului. Ele contribuie la crearea aspectului paginii si sunt stocate ca fisiere distincte de documentul
HTML, in diverse tipuri. Tipurile de fisier grafic sunt GIF , JPG si PNG.
Fisierele gif prezinta avantaje ca:

 intretesere (interlaced) – prin care se mareste viteza aparenta de afisare a imaginii.
 transparenta (transparency) – care da posibilitatea ca una sau mai multe culori sa fie transparente (nu se vad
in pagina web) si ca atare se va vedea ceea ce este sub imagine.
insa au dezavantajul ca sunt limitate la 256 de culori (sau 256 de nuante de gri in cazul imaginilor alb-negru).
Imaginile .jpg (Joint Photographic Experts Group)
In cazul in care se doreste afisarea imaginilor in mai mult de 256 de culori sau nuante de gri, se foloseste
formatul jpeg. Acesta suporta 16 biti (65.000 de culori) sau 24 biti (16 milioane de culori), insa ocupa un spatiu
mai mare decat cele pe 8 biti si nu permite transparenta.
Imaginile .PNG (Portable Network Graphics)
Sunt mai bune decat cele doua, deoarece au fost dezvoltate pe baza gif (suporta transparenta) si suporta 24
biti de imagine.Pot fi salvate din Photoshop special pt pagini WEB.
Imaginile pot fi create prin desenare, scanare, fotografiere, pot fi obtinute prin convertire, sau din clip art-uri.
Un aspect important il reprezinta tipul si dimensiunea fisierului, dar pot interveni si alti factori.
7.1. Adaugarea imaginilor in documente HTML
Adaugarea unei imagini intr-un document HTML este un lucru relativ simplu, realizabil cu ajutorul etichetei
IMG.
Aceasta este o eticheta vida care are doua atribute obligatorii: SRC, fara de care nu are nici un efect, si ALT.
Sintaxa este:
<img src="URL" alt="text_alternativ">
De observat ca imaginile nu sunt tehnic introduse intr-o pagina HTML, imaginile sunt legate de pagini HTML.
Eticheta <img> creaza un spatiu de exploatat pentru imaginea destinatie.
Atributele etichetei <img> sunt:
Atribut Functie
alt Atribut obligatoriu.
Specifica un text alternativ pentru imagine, care este afisat pe pagina in locul
imaginii, daca imaginea nu poate fi afisata din diferite cauze.
Valoare: text.
- daca imaginea contine informatii, texul alternativ poate fi o descriere a
imaginii;
______________________________________________________________________________________________
Suport de curs HTML
- daca imaginea apare in cadrul etichetei <a>, atunci textul alternativ poate
explica unde trimite legatura
- daca imaginea este doar decorativa, atunci se poate folosi alt=""
src Atribut obligatoriu.
Specifica URL-ul catre imagine.
Valori posibile:
src="http://www.exemplu.com/imagine.gif")
- un URL relativ – catre un fisier din cadrul site-ului (ex. src="imagine.gif")
height Atribut optional.
Specifica inaltimea cadrului pentru imagine.
Valori posibile:
 pixeli
 valoare procentuala (x%)
Specifica latimea cadrului pentru imagine.
Valori posibile:
 pixeli
ismap Atribut optional.
Defineste imaginea ca o harta pe server (server-side image-map) – rar folosita (a
se vedea usemap in schimb).
Valoare: "ismap".
usemap Atribut optional.
Defineste imaginea ca o harta pentru client (client-side image-map).
Valoare: #nume_harta.
id
lang
style
title
xml:lang
Exemplul 7.1.
<html>
<head>
<title>Exemplu imagini</title>
</head>
<body>
<p>Exemplul 1</p>
______________________________________________________________________________________________
Suport de curs HTML
<img src="flower1.jpg" alt="flower1" width="470" height="369">
<p> </p>
<p>Exemplul 2</p>
<p>In acest exemplu imaginea: <img src="flower1.jpg" alt="flower1" width="300" height="200"> este
afisata inline.</p>
<p> </p>
<p>Exemplul 3</p>
<p>In acest exemplu imaginea este apelata dintr-un subfolder al folderului curent</p>
<img src="imagini/flower2.jpg" alt="flower2" width="584" height="425">
</body>
</html>
7.1.1. Text alternativ (ALT)

Exista cazuri in care navigatorul este setat sa nu afiseze imaginile, sau nu suporta modul grafic (nu poate afisa
imagini). Atunci, in loc sa fie afisata sursa imaginii (calea inspre fisierul imagine si numele acestuia), se poate
afisa un text explicativ numit text alternativ prin intermediul atributului ALT.
Nota: Browserul Internet Explorer afiseaza textul alternativ ca un indiciu, intr-o caseta, atunci cand se trece cu
mouse-ul peste imagine. Conform specificatiei HTML acesta nu este un comportament corect. Specificatia
HTML precizeaza ca textul alternativ trebuie sa fie afisat numai daca imaginea nu poate fi afisata din diverse
cauze (conexiune slaba, o eroare la atributul SRC, etc.).
Pentru crearea unui indiciu pentru imagine, se poate folosi atributul standard TITLE.
7.1.2. Sursa imaginii (SRC)
Pentru a fi afisata imaginea in document, eticheta IMG trebuie sa contina obligatoriu atributul SRC. Acesta
specifica URL-ul imaginii (calea de acces catre imagine si numele fisierului imagine) si poate fi relativ sau
absolut. In cazul in care fisierul ce contine imaginea nu este gasit la locatia respectiva, atunci navigatorul
afiseaza textul alternativ sau, daca acest text alternativ lipseste, va afisa un mesaj de eroare.
7.1.3. Dimensiuni (WIDTH si HEIGHT)
Pentru stabilirea dimensiunii de afisare in fereastra navigatorului a unei imagini se pot utiliza atributele WIDTH
si HEIGHT. Valorile lor sunt exprimate in pixeli sau procentual si au ca efect rezervarea in fereastra a unei
portiuni pentru afisarea imaginii.
Dimensiunile pot fi stabilite exact ca si cele reale si atunci imaginea va fi afisata la scara de 1:1, sau pot fi
diferite si atunci intervine factorul de scalabilitate. In cel de-al doilea caz imaginea va fi marita sau micsorata
proportional cu dimensiunea ei reala sau poate fi denaturata (deformata) prin specificarea explicita a inaltimii
si latimii imaginii.
Este bine sa fie specificata atat latimea, cat si inaltimea imaginii. Daca acestea sunt setate, atunci spatiul
necesar afisarii imaginii este rezervat in momentul incarcarii paginii. Fara aceste atribute browserul nu
______________________________________________________________________________________________
Suport de curs HTML
cunoaste dimensiunile imaginii si nu rezerva spatiu pentru aceasta, iar intr-o astfel de situatie fectul va fi acela
ca pagina se va modifica pe masura ce se incarca.
Nota: A nu se folosi WIDTH si HEIGHT pentru a redimensiona imaginile. Daca dimensiunile specificate cu
WIDTH si HEIGHT sunt mai mici decat cele ale imaginii (si proportionale cu acestea, altfel imaginea se
deformeaza), atunci se va descarca imaginea tot la dimensiunea ei reala, doar ca va fi afisata intr-o zona
restransa si va parea mai mica. Analog, daca dimensiunile specificate cu WIDTH si HEIGHT sunt mai mari decat
cele reale ale imaginii, atunci se poate ajunge la o alterare a calitatii imaginii.
Se recomanda redimensionarea imaginii cu ajutorul unui program inainte de a o folosi intr-o pagina web.
7.2. Harti imagine (Maparea imaginilor)

O imagine poate reprezenta sursa unei legaturi. Exista insa posibilitatea ca o imagine sa contina mai multe
legaturi prin folosirea asa numitelor imagini-harta.
O imagine-harta poate fi conceputa pentru a sta pe un server si a fi prelucrata de un script CGI rulat pe server
sau poate fi codificata in fisierul HTML si este rulata de navigator (client). Indiferent de tipul folosit, pentru a
defini o harta-imagine se procedeaza astfel:
 se alege imaginea;
 se imparte imaginea in zone si se stabileste un URL pentru fiecare zona in parte;
 se determina coordonatele fiecarei zone.
7.2.1. Harti pe server (server-side)

Atributul ismap identifica imaginea ca fiind o imagine harta folosita pentru a asocia mai multe legaturi din
imaginea respectiva catre alte documente.
O imagine harta pe server este definita astfel:
<a href="URL_fisier_definire_harta"><img src="fisier_imagine" ismap="ismap"></a>
In momentul in care utilizatorul executa click pe imagine atributul ismap transmite serverului coordonatele x si
y unde a avut loc evenimentul prin adaugarea unui semn de intrebare urmat de valorile coordonatelor x si y
separate prin virgula, la adresa URL specificata in ancora A.
Fisierul cu definitia hartii este stocat pe server, are extensia ”.map”, si contine cate o linie pentru fiecare zona
definita. In fiecare linie sunt incluse:
 denumirea formei pe care o are zona (rectangle, polygon, circle)
 coordonatele zonei (perechi x,y ale colturilor zonei)
 URL-ul referit de acea zona
Este benefica introducerea unor indicii grafice pentru a informa utilizatorul asupra faptului ca imaginea este o
harta si nu o imagine cu o simpla legatura.
7.2.2. Harti pentru client (client-side)

Navigatoarele au capacitatea de a interpreta o harta si fara ajutorul serverului. Aceste harti imagine pentru
client includ informatiile necesare pentru procesare fara a comunica cu serverul. Ele au avantajul ca fisierul
harta nu este stocat pe server, nu trebuie sa ruleze scripturi de prelucrare, insa au dezavantajul ca ruleaza doar
daca navigatorul cunoaste extensiile pentru ele.
______________________________________________________________________________________________
Suport de curs HTML
Acest tip de harta-imagine se realizeaza prin intermediul atributului USEMAP, care marcheaza o imagine ca
fiind imagine harta pentru client folosita si care se foloseste in combinatie cu MAP:
<img src="fisier_imagine" usemap="fisier.html#nume_harta">
Elementul MAP defineste harta cu toate informatiile referitoare la tip, coordonate si legaturi, si poate fi stocat
intr-un fisier separat sau poate fi chiar inclus in documentul HTML.
Eticheta MAP are un singur atribut obligatoriu, si anume NAME, prin care se identifica, iar in interiorul sau
permite folosirea doar a etichetei AREA pentru definirea zonelor active din imagine:
<map name="nume_harta">
<area>
</map>
Atributele standard pe care le poate avea eticheta <map> sunt: class, dir, id, lang, style, title, xml:lang
(functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1)
Eticheta <area> defineste o zona activa a unei imagini, este o eticheta vida, se foloseste intotdeauna in
interiorul etichetei <map>...</map> si are urmatoarele atribute:
Atribut Descriere
alt Atribut obligatoriu.
Specifica un text alternativ pentru zona activa.
Valoare: text.
OBS: Atributul alt al etichetei <area>, desi unul obligatoriu, nu este suportat in mod
corespunzator in niciunul din browserele importante!
shape Atribut optional.
Defineste tipul/forma zonei active.
Se foloseste impreuna cu atributul coords pentru a specifica dimensiunea, forma si pozitionarea
zonei active.
Valori posibile:
 default – se refera la intreaga zona
 rect – defineste o zona dreptunghiulara
 circle – defineste o zona circulara
 poly – defineste o zona poligonala
coords Atribut optional.
Precizeaza coordonatele zonei sub forma de perechi, exprimate in pixeli, relative la coltul din
stanga-sus.
Se foloseste impreuna cu atributul shape pentru a specifica dimensiunea, forma si pozitionarea
zonei active.
Valori posibile:
 daca shape="rect", coordonatele dreptunghiului se precizeaza astfel: X1,y1,x2,y2, unde:
(X1,y1) reprezinta coordonatele varfului stanga-sus, iar (X2,y2) reprezinta coordonatele
varfului dreapta-jos.
 daca shape="circle", coordonatele cercului se precizeaza astfel: x, y, r, unde: (x,y)
reprezinta coordonatele centrului cercului, iar r reprezinta raza cercului.
 daca shape="poly", coordonatele poligonului se precizeaza astfel: x1,y1,x2,y2,...,xnyn,
unde fiecare pereche (xi,yi) reprezinta un varf al poligonului. Daca prima pereche si
ultima din cele specificate nu coincid, atunci browserul va adauga perechea
______________________________________________________________________________________________
Suport de curs HTML
corespunzatoare pentru a inchide poligonul.

href Atribut optional.
Indica URL-ul fisierului la care se face legatura in momentul selectarii zonei.
Valori posibile:
src="http://www.exemplu.com/fisier.html")
- un URL relativ – catre un fisier din cadrul site-ului (ex. src="fisier.html")
- un URL ancora – trimite la o ancora din cadrul paginii curente (ex.: href="#soare")
target Atribut optional.
Defineste unde sa se deschida pagina legatura specificata in cadrul atributului href.
Valori posibile:
 _blank - deschide pagina intr-o fereastra noua
 _self - deschide pagina in aceeasi fereastra in care este actionata legatura
 _parent - deschide pagina in fereastra parinte
 _top - deschide pagina in intreg corpul ferestrei
accesskey Atribute standard.
class Functionalitatile acestor atribute sunt descrise in cap. 6.2 ANCHOR
dir
Id
lang
style
tabindex
title
xml:lang
Pot fi definite mai multe zone active pentru o imagine prin adaugarea reperata a etichetei <area> in cadrul
etichetei <map>...</map>.
Cum se defineste o imagine harta pentru client: se include imaginea in documentul HTML prin specificarea in
atributul SRC a fisierului imagine si in atributul USEMAP a numelui hartii ce contine informatiile necesare
definirii zonelor active din imagine, astfel:
Exemplul 7.2.
<html>
<head>
<title>Exemplu de document HTML cu imagine harta pentru client</title>
</head>
<body>
<map name="harta1">
<area shape="rect" coords="25,25,170,170" href="dreptunghi.html">
<area shape="circle" coords="370,300,60" href="cerc.html">
</map>
<img src="imagine-mapata.jpg" width="500" height="400" border="0"
alt="Imagine mapata" usemap="#harta1">
<p>
Harta imagine de mai sus are definite doua zone active, una in forma dreptunghiulara si alta in forma de
cerc.
______________________________________________________________________________________________
Suport de curs HTML
</p>
</body>
</html>
7.3. Combinarea cu alte elemente

Imaginile pot fi combinate si cu alte elemente, dand astfel o nota aparte documentului HTML. Ele se folosesc in
cazul in care se definesc legaturi inspre alte documente, sau se doreste particularizarea unor liste, alinierea
unor imagini folosind tehnica tabelara sau pur si simplu prin alaturarea de text si imagine.
7.3.1. Imagini si legaturi

De multe ori pentru definirea unei legaturi se foloseste in locul textului ca baza vizuala, o imagine. Efectul
vizual care se obtine este mult mai spectaculos decat cel obtinut prin plasarea unui text, fie el si formatat.
Pentru aceasta se combina eticheta ancora A cu eticheta de imagine IMG in sensul ca IMG va fi continut in A,
dupa cum se poate observa:
<a><img src"fisier_imagine"></a>
Definirea unei legaturi printr-o imagine genereaza un chenar acesteia (imaginii) in mod automat. Acest efect
poate fi anulat sau modificat prin folosirea foilor de stil in cascada.
Exemplul 7.3.
<html>
<head>
<title>Exemplu imagini</title>
</head>
<body>
<p> In acest exemplu imaginea <a href="#"><img src="legatura.png" alt="imagine_legatura" width="100"
height="100"></a> se comporta ca un link.</p>
</body>
</html>
7.3.2. Imagini si tabele

Se pot introduce imagini si in tabele prin folosirea etichetei IMG in cadrul etichetei TABEL, mai exact in
definirea unei celule TD. Se foloseste mai ales in cazul in care se doreste o mai buna aliniere a mai multor
imagini pe orizontala sau verticala sau pentru definirea unor liste de tipul: text si imagine corespondenta.
Exemplul 7.4.
<html>
<head>
<title>Exemplu imagini si tabele</title>
</head>
<body>
<p>Utila in multe situatii este combinarea imaginilor cu tabele, pentru structurarea
______________________________________________________________________________________________
Suport de curs HTML
informatiei.<br>Exemplu:</p>
<table border="1" cellpadding="2" cellspacing="0" width="50%">
<tr>
<th width="75%">Denumire</td>
<th width="25%">Imagine</td>
</tr>
<tr>
<td width="75%">Primul produs</td>
<td width="25%"><img src="imagini/produs1.jpg" alt="produs1" width="120" height="80"></td>
</tr>
<tr>
<td width="75%">Al doilea produs</td>
<td width="25%"><img src="imagini/produs2.jpg" alt="produs2" width="87" height="130"></td>
</tr>
</table>
</body>
</html>
7. 4. Etichete si atribute prezentate in acest capitol

<img> alt Permite adaugarea unei imagini intr-un document HTML.
src
height
width
ismap
usemap
class
dir
id
lang
style
title
xml:lang
<map>...</map> name Defineste harta pentru o imagine.
class
dir
id
lang
style
title
xml:lang
<area> shape Defineste o zona activa a unei imagini.
coords
href
target
accesskey
class
dir
Id
______________________________________________________________________________________________
Suport de curs HTML
lang
style
tabindex
title
xml:lang
______________________________________________________________________________________________
Suport de curs HTML
Capitolul 8. CADRE
O limitare majora a versiunilor mai vechi de HTML a fost aceea ca se putea vedea in fereastra navigatorului
doar o singura pagina la un moment dat.
Cadrele reprezinta implementarea unui concept introdus mai intai in 1995, pe care, dupa multe dezbateri,
W3C a decis sa-l reintroduca incepand cu standardul HTML 4.0.
8.1. Concept
Cadrele au venit peste aceasta limitare divizand fereastra navigatorului in mai multe documente HTML. La fel
ca si tabelele, cadrele permit aranjarea textului si a imaginilor in linii si coloane. Ele sunt similare cu tabelele
din multe puncte de vedere, insa nu au scopul de a organiza date, ci despart fereastra in cadre.
Fiecare cadru are propriul sau fisier HTML atasat, iar continutul sau poate fi derulat sau schimbat independent
de celelalte.
8.2. Cadre IFRAME

Eticheta IFRAME defineste un cadru inline care contine un alt document.
Cadrele inline sunt tratate ca si o imagine, sau ca un obiect.
Sintaxa pentru un cadru inline este aceasta:
<iframe>
...
</iframe>
Cadrele inline ocupa un spatiu in document si insereaza un continut specializat (posibil o alta pagina web).
Atribut Functie
frameborder Atribut optional.
Specifica URL-ul fisierului care va fi afisat in cadrul inline.
Valori posibile:
src="http://www.exemplu.com/fisier.html")
un URL relativ – catre un fisier din cadrul site-ului (ex. src=" fisier.html ")
height Atribut optional.
Specifica inaltimea cadrului inline.
Valori posibile:
 pixeli
Specifica latimea cadrului inline.
Valori posibile:
 pixeli
______________________________________________________________________________________________
Suport de curs HTML

marginheight Atribut optional.
Specifica marginile de sus si de jos ale cadrului inline.
Valoarea este exprimata in pixeli. (ex. marginheight="50px").
marginwidth Atribut optional.
Specifica marginiledin stanga si din dreapta ale cadrului inline.
Valoarea este exprimata in pixeli. (ex. marginwidth ="50px").
Specifica numele cadrului inline.
Valoarea: nume_iframe.
scrooling Atribut optional.
Specifica daca sa se afiseze sau nu barele de derulare in cadrul inline.
Valori posibile:
 auto – barele de derulare sunt afisate doar daca / unde este necesar
(valoare implicita)
 yes – barele de derulare sunt afisate in mod obligatoriu, chiar daca nu sunt
necesare
 no – barele de derulare nu sunt afisate deloc, nici in cazul in care sunt
necesare.
id Functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1
style
title
Exemplul 8.1.
<html>
<head>
<title>Document html ce contine un iframe</title>
</head>
<body>
<iframe src ="continut.html" width="50%" height="150" marginwidth="50" marginheight="30"
scrolling="auto">
<p>Browser-ul nu suporta iframes.</p>
<a href="detaliitehnice.html">Click pentru Continut</a>
</iframe>
</body>
</html>
______________________________________________________________________________________________
Suport de curs HTML

<iframe>...</iframe> frameborder Defineste un cadru inline care contine un alt document.
src
height
width
marginheight
marginwidth
name
scrooling
class
id
style
title
______________________________________________________________________________________________
Suport de curs HTML
Capitolul 9. FORMULARE
Modalitatea prin care se poate interactiona cu utilizatorul o reprezinta formularele. Acestea permit
vizitatorilor sa introduca date care vor fi procesate pe serverul web prin intermediul scripturilor. Prin folosirea
formularelor se poate cere vizitatorilor sa raspunda la anumite intrebari, sa completeze formulare de
feedback, sa faca sugestii, observatii, reclamatii referitoare la pagina web, sa faca inscrieri intr-o carte de
oaspeti sau diverse alte actiuni.
In acest sens exista cateva etichete prin care este posibila definirea de campuri pentru introducerea
informatiilor si care vor fi plasate in cadrul elementului FORM.
9.1. Elementul FORM

Intr-un document HTML formularele sunt definite prin eticheta FORM. Aceasta se comporta ca un recipient
pentru controale si totodata in eticheta de inceput trebuie specificate sciptul si modalitatea de transmitere a
datelor din formular, asa cum se arata si mai jos:
<form action="URL_script">
... definire elemente formular ...
</form>
Elementul FORM specifica:
 Layout-ul / aspectul formularului (determinat de continutul elementului FORM).
 Programul ce va prelua formularul completat si transmis (atributul ACTION). Acest program trebuie sa
fie capabil sa preia corect si sa decodifice perechile nume/valoare transmise pentru a le putea folosi.
 Metoda prin care datele introduse de utilizator vor fi trimise serverului (atributulMETHOD).
 codificare a caracterelor acceptabila pentru server, astfel ca acesta sa poata prelua formularul
(atributul ACCEPT-CHARSET). Browserele utilizatorilor trebuie sa-i avertizeze asupra valorilor setului de
caractere acceptat si/sau sa restrictioneze posibilitatea acestora de a introduce caractere
necunoscute.
Un document HTML poate contine unul sau mai multe formulare. In cazul in care intr-un document HTML sunt
mai multe formulare, ele nu pot fi imbricate. Daca exista cazuri in care eticheta de inceput <form> a celui de-al
doilea formular apare inaintea etichetei de sfarsit </form> a primului formular, atunci eticheta va fi ignorata si
elementele celui de-al doilea formular vor fi atribuite primului formular.
Un element FORM poate contine elemente precum: campuri de introducere text, casete de selectare, butoane
radio, butoane reset (reseteaza), butoane submit (executa) si altele.
Un formular poate contine in afara controalelor si text si elemente HTML (paragrafe, liste, etc.)
Elementul FORM are doua atribute principale:
 ACTION – atribut obligatoriu care specifica URL-ul pentru un script care va procesa datele din formular
si care se gaseste de obicei pe serverul web. In cazul in care nu se specifica nici un URL, datele vor fi
intoarse in pagina de unde au venit.
 METHOD – specifica modalitatea de transmitere a datelor catre scriptul care le prelucreaza. Accepta
valorile POST si GET.
______________________________________________________________________________________________
Suport de curs HTML
POST este metoda recomandata, ea trimitand informatiile din formular separat de URL, intr-o sectiune
diferita numita „corp entitate”. GET ataseaza informatiile din formular la sfarsitul URL-ului, ca un
adaos al adresei propriu-zise.
Note privind metoda "get":
- Aceasta metoda adauga datele din formular la adresa URL ca si perechi nume/valoare
- Exista o limita a datelor care pot fi plasate intr-un URL. Acesta variaza de la un browser la altul. Astfel,
nu exista certitudinea ca toate datele vor fi transmise in mod corect.
- Nu se foloseste metoda GET pentru a transmite informatii sensibile! (parola sau alte informatii
sensibile vor fi vizibile in bara de adresa a browser-ului).
Note privind metoda "post":
- Aceasta metoda transmite datele catre server intr-o maniera invizibila pentru utilizator si este o
metoda mai sigura decat metoda GET
- Metoda POST nu limiteaza volumul de informatii trimise catre server.
Exemplul 9.1.
<html>
<head>
<title>Document html ce contine un formular</title>
</head>
<body>
<form action="script.php" method="post">

Nume: <input type="text" name="nume"><br>
<input type="submit" name="submit" value="Trimite">
</form>
</body>
</html>
Efectul in browser va fi urmatorul:
Pentru exemplul de mai sus, la actionarea butonului Trimite (submit), in cazul folosirii metodei GET, URL-ul
transmis serverului va fi de forma:
http://www.exemplu.ro/fisier.php?nume=Popescu
iar in cazul folosirii metodei POST, URL-ul va fi de forma:
http://www.exemplu.ro/fisier.php
Atributele elementului FORM sunt:

Atribut Functie
action Atribut obligatoriu.
Specifica URL-ul fisierului la care sunt transmise spre prelucrare datele din formular.
______________________________________________________________________________________________
Suport de curs HTML
Valoare:
- o cale absoluta catre fisierul ce contine scriptul (ex.
src="http://www.exemplu.com/fisier.php")
- o cale relativa (ex. src="fisier.php”)
method Atribut optional.

Defineste cum sa fie transmise datele formularului (datele formularului sunt
transmise fisierului specificat in atributul ACTION).
enctype Atribut optional.
Specifica in ce fel sa fie codificate datele din formular inainte de a le trimite pe server.
In mod implicit datele din formulat sunt codate ca " application/x-www-form-
urlencoded". Asta inseamna ca toate date sunt codate inainte de a fi trimise la server
(spatiile sunt convertite in simbolul "+" si caracterele speciale sunt convertite la valori
ASCII HEX).
Valori posibile:
 application/x-www-form-urlencoded – toate caracterele sunt codificate
inainte de a fi trimise (valoare implicita)
 multipart/form-data – caracterele nu sunt codificate. Aceasta valoare este
utilizata pentru formulare care au un control al upload-ului.
 text/plain – spatiile sunt convertite in "+", dar caracterele speciale nu sunt
codificate
Specific a numele formularului.
Atributul NAME ofera o modalitate de a face referire la formular intr-un script.
Valoate: text.
Ex. <form name="formular_contract">...
id
lang
style
title
xml:lang
9.2. Elementul TEXTAREA

In multe cazuri se impune ca utilizatorii sa introduca mai mult decat o singura linie de text. Acest caz apare
atunci cand este vorba de raportarea unor erori sau de feedback si el poate fi rezolvat folosind etichete
TEXTAREA in cadrul formularului.
Sintaxa este:
<textarea rows="valoare" cols="valoare">
... text ...
</textarea>
______________________________________________________________________________________________
Suport de curs HTML
Implicit elementul TEXTAREA afiseaza un camp gol.

Dimensiunea campului poate fi setata cu ajutorul atributelor ROWS si COLS.
De asemenea, poate fi specificat si un text implicit care sa arate utilizatorului ce trebuie introdus. Etichetele
<textarea> si </textarea> se comporta ca un recipient pentru a defini textul implicit. El apare exact asa cum a
fost introdus, la fel ca textele preformatate cu eticheta PRE, orice spatii sau treceri la linie noua fiind afisate.
Daca este specificat atributul readonly atunci continutul initial nu poate fi modificat de catre utilizator.
Atributul NAME este solicitat deoarece ia ca valoare numele variabilei atasata sirului de caractere si ajuta la
procesarea datelor de catre script pe serverul web.
Atribut Functie
cols Atribut obligatoriu.
Specifica latimea zonei de text (numar de coloane / apoximativ numarul de caractere).
Valoare: numar.
rows Atribut obligatoriu.
Specifica inaltimea zonei de text (in randuri).
Valoare: numar.
disabled Atribut optional.
Specifica faptul ca zona de text este inactiva.
In cazul in care este setat atributul disabled, continutul zonei de text (definit intre
<textarea> si </textarea>) nu va putea fi editat, nici macar selectat sau copiat.
Atributul DISABLED poate fi setat daca se doreste ca zona de text sa fie inutilizabila de
catre un utilizator pana cand nu este indeplinita o alta conditie (ca de exemplu bifarea
unei casete de selectare, etc.). Apoi, cu JavaScript valoarea DISABLED poate fi anulata
si zona de text devine utilizabila.
Valoare: disabled.
Ex.: <textarea disabled="disabled">...
readonly Atribut optional.
Specifica faptul ca zona de text este accesibila doar in modul citire.
In cazul in care este setat atributul READONLY, continutul zonei de text (definit intre
<textarea> si </textarea>) nu va putea fi editat, dar va putea fi selectat si copiat.
Atributul READONLY poate fi setat daca se doreste ca zona de text sa fie inutilizabila
de catre un utilizator pana cand nu este indeplinita o alta conditie (ca de exemplu
bifarea unei casete de selectare, etc.). Apoi, cu JavaScript valoarea READONLY poate fi
anulata si zona de text devine utilizabila.
Valoare: readonly.
Ex.: <textarea readonly="readonly">...
Specifica un nume pentru zona de text.
Atributul NAME este folosit pentru a face referire la element intr-un script JavaScript /
PHP, etc.
Valoare: numele_zonei_de_text.
______________________________________________________________________________________________
Suport de curs HTML
Ex.: <textarea name="descriere_produs">...

id
lang
style
title
xml:lang
Exemplul 9.2.
<html>
<head>
<title>Exemplu FORM - TEXTAREA</title>
</head>
<body>
<form action="fisier.php" method="post">
<textarea name="text" rows="5" cols="30">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. </textarea>
<br>
<textarea name="text_de_introdus" rows="3" cols="20"></textarea>
</form>
</body>
</html>
9.3. Elementul SELECT

Elementul SELECT creaza o lista de optiuni sub forma de meniu sau lista derulanta (drop-down list). Optiunile
din lista se definesc intre etichetele <select> si </select> prin intermediul unui alt element si anume OPTION,
astfel:
<select>
<option> … optiune …</option>
...
</select>
Atributele elementului SELECT sunt urmatoarele:

Atribut Descriere
Specifica faptul ca lista derulanta este inactiva.
Continutul unei liste derulante ce are atributul DISABLE setat nu va putea fi utilizat.
Atributul DISABLED poate fi setat daca se doreste ca lista derulanta sa fie inutilizabila de
catre un utilizator pana cand nu este indeplinita o alta conditie (ca de exemplu bifarea unei
casete de selectare, etc.). Apoi, cu JavaScript valoarea DISABLED poate fi anulata si lista
______________________________________________________________________________________________
Suport de curs HTML
derulanta devine utilizabila.

Valoare: disabled.
Ex.: <select disabled="disabled">...
Specifica numele listei derulante.
Atributul NAME este folosit pentru a face referire la element intr-un script JavaScript / PHP,
etc.
Valoare: numele_listei_derulante.
Ex.: <select name="descriere_produs">...
multiple Atribut optional.

Specifica faptul ca pot fi selectate mai multe optiuni in acelasi timp.
In cazul in care este specificat, forteaza afisarea intregului meniu, sau mai multor optiuni.
Pentru ca selectarea mai multor optiuni se realizeaza in mod diferit de la un sistem la altul si
pentru ca utilizatorii trebuie informati despre posibilitatea selectarii multiple, se recomanda
folosirea in schimb a casetelor de selectare (checkboxes).
Valoare: multiple.
Ex. <select multiple="multiple">...
id
lang
style
title
xml:lang
Atributele elementului OPTION sunt urmatoarele:

Atribut Descriere
value Atribut optional.
Reprezinta valoarea atribuita optiunii, care este trimisa inapoi la serverul web si nu trebuie
neaparat sa aiba aceeasi valoare cu ce este afisat in fereastra pentru utilizator.
Daca atributul VALUE lipseste, valoarea care va fi trimisa la server este continutul etichetei
<option>...continut...</option>.
Valoare: text.
selected Atribut optional.
Specifica faptul ca optiunea este selectata in mod implicit. Optiunea pentru care este setat
atributul SELECTED va fi afisata prima in lista derulanta.
Atributul SELECTED poate fi setat si dupa ce pagina este incarcata, cu JavaScript.
Valoare: selected.
Ex. <option selected="selected">...
id
lang
______________________________________________________________________________________________
Suport de curs HTML
style
title
xml:lang
Eticheta de inchidere a elementului OPTION este optionala. In cazul in care nu este folosita, elementul definit
se termina automat la gasirea etichetei de inceput a urmatorului element OPTION sau la sfarsitul elementului
SELECT care il contine.
Exemplul 9.3a.
<html>
<head>
<title>Exemplu FORM - SELECT / OPTION</title>
</head>
<body>
<select name="culori1">
<option value="culoare1">rosu</option>
<option value="culoare2" selected="selected">orange</option>
<option value="culoare3">galben</option>
<option value="culoare4">verde</option>
<option value="culoare5">albastru</option>
<option value="culoare6">indigo</option>
<option value="culoare7">violet</option>
</select>
</form>
<br>
<select name="culori2" multiple="multiple">
<option value="culoare1">rosu</option>
<option value="culoare2">orange</option>
<option value="culoare3" selected="selected">galben</option>
<option value="culoare4" selected="selected">verde</option>
<option value="culoare5">albastru</option>
<option value="culoare6">indigo</option>
<option value="culoare6">violet</option>
</select>
</form>
</body>
</html>
Daca lista contine multe elemente ce pot fi grupate pe categorii, atunci poate fi folosit elementul OPTGROUP
pentru a structura lista.
Elementul OPTGROUP se foloseste in cadrul elementului SELECT si cuprinde una sau mai multe definitii ale
elementului OPTION.
Atributele elementului OPTGROUP:

Atribut Descriere
label Atribut obligatoriu.
Specifica o descriere pentru grupul de optiuni.
______________________________________________________________________________________________
Suport de curs HTML
Valoare: text.
id
lang
style
title
xml:lang
Exemplul 9.3b.
<html>
<head>
<title>Exemplu FORM - SELECT / OPTION / OPTGROUP</title>
</head>
<body>
<select>
<optgroup label="Rasinoase">
<option value="brad">Brad</option>
<option value="molid">Molid argintiu</option>
<option value="pin">Pin negru</option>
</optgroup>
<optgroup label="Foioase">
<option value="cas" selected="selected">Castan</option>
<option value="mes">Mesteacan</option>
</optgroup>
</select>
</form>
</body>
</html>
9.4. Elementul INPUT

Elementul INPUT este cel mai important in construirea formularelor. Multitudinea de tipuri pe care o poate lua
permite crearea formularelor fara a utiliza alte elemente, ci doar specificand tipul elementului INPUT.
Eticheta INPUT este una vida. Are urmatoarea sintaxa:
<input [type="tip"] [name="nume_control"]>
Printre atributele elementului INPUT se afla si atributul TYPE, care este folosit pentru a defini o gama larga de
controale si poate lua una din valorile:
Valoare Control asociat
button Defineste un buton personalizat (de obicei utilizat cu JavaScript pentru a activa un script).
checkbox Defineste o caseta de validare.
______________________________________________________________________________________________
Suport de curs HTML
file Defineste un camp INPUT si un buton „Browse” pentru incarcarea unu fisier.
hidden Defineste un camp INPUT ascuns.
image Defineste o imagine ca si buton submit.
password Defineste o caseta de introducere a parolei. Caracterele din acest camp sunt mascate.
radio Defineste un buton de selectie.
reset Defineste un buton Reset / de resetare. Actionarea butonului Reset reseteaza toate
campurile formularului la valorile lor initiale.
submit Defineste un buton Submit / de executare. Actionarea butonului Submit trimite datele din
formular la server.
text Defineste o linie INPUT in care utilizatorul poate introduce text. Latimea implicita este de
20 caractere.
9.4.1. Atributele elementului INPUT

Atributele elementului INPUT sunt urmatoarele:
Atribut Functie
Defineste numele controlului. Este solicitat la toate tipurile, exceptie fac submit si reset.
Atributul name este folosit pentru a identifica datele din formular dupa ce acestea au
fost trimise la server, sau pentru a se face referire la datele din formular in cazul in care
se foloseste JavaScript.
NOTA: Dintre elementele unui formular, numai valoarile celor care au atributul NAME
setat vor fi transmise catre server cand formularul este executat.
Valoare: nume pentru elementul INPUT.
size Atribut optional.
Specifica latimea campului INPUT.
Pentru <input type="text"> si <input type="password"> atributul SIZE defineste numarul
caracterelor vizibile, iar pentru celelalte tipuri de elemente, defineste latimea campului
INPUT in pixeli.
Valori posibile: caractere / pixeli
maxlength Atribut optional.
Specifica lungimea maxima (in caractere) a campului INPUT.
Atributul MAXLENGHT este folosit cu <input type="text"> sau <input type="password">.
Valoare: numar (maxim de caractere).
Defineste o valoare pentru un element INPUT.
- pentru type="button", "reset", "submit" – defineste textul care va aparea pe buton
- pentru type="text", "password", "hidden" – defineste valoarea initiala (implicita) a
campului INPUT
- pentru type="checkbox", "radio", "image" defineste valoarea asociata informatiilor
introduse. Aceasta este valoarea transmisa scriptului de la URL-ului specificat prin atributul
ACTION.
Valoare: text (valoarea asociata campului INPUT).
______________________________________________________________________________________________
Suport de curs HTML
checked Atribut optional.

Specifica faptul ca elementul INPUT este preselectat in momentul incarcarii paginii.
Atributul CHECKED este folosit cu <input type="checkbox"> sau <input type="radio">.
Atributul CHECKED poate fi setat si dupa ce pagina este incrcata, cu JavaScript.
Valoare: checked.
Ex. <input type="checkbox" checked="checked">
Stabileste tipul unui element INPUT.
Valori posibile:
- button
- checkbox
- file
- hidden
- image
- password
- radio
- reset
- submit
- text
Specifica faptul ca elementul INPUT este incativ.
In cazul in care este setat atributul disabled, elementul INPUT nu poate fi utilizat.
Atributul DISABLED poate fi setat astfel incat elementul INPUT sa fie inutilizabil de catre
un utilizator pana cand nu este indeplinita o alta conditie (ca de exemplu bifarea unei
casete de selectare, etc.). Apoi, cu JavaScript valoarea DISABLED poate fi anulata si
elementul INPUT devine utilizabil.
NOTA: Atributul DISABLED nu functioneaza impreuna cu <input type="hidden">.
Valoare: "disabled".
Ex.: <input disabled="disabled">
readonly Atribut optional.
Specifica faptul ca elementul INPUT este accesibil doar in modul citire.
In cazul in care este setat atributul READONLY, elementul INPUT nu va putea fi
modificat/editat, dar va putea fi selectat si copiat.
Atributul READONLY poate fi setat daca se doreste ca elementul INPUT sa fie inutilizabil
de catre un utilizator pana cand nu este indeplinita o alta conditie (ca de exemplu bifarea
unei casete de selectare, etc.). Apoi, cu JavaScript valoarea READONLY poate fi anulata si
elementul INPUT devine utilizabil.
Valoare: "readonly".
Ex.: <input readonly="readonly">
Atributul SRC este folosit numai impreuna cu <input type="image"> si specifica URL-ul
imaginii ce va fi afisata ca si buton Submit.
Atributul SRC este obligatoriu in cadrul sintaxei <input type="image">.
Valori posibile:
______________________________________________________________________________________________
Suport de curs HTML
- o cale absoluta catre fisierul imagine (ex.

src="http://www.exemplu.com/imagine.jpg")
- o cale relativa (ex. src=" imagine.jpg”)
dir
Id
lang
style
tabindex
title
xml:lang
Exemplul 9.4.
<html>
<head>
<title>Exemplu FORM - INPUT </title>
</head>
<body>
Nume: <input type="text" name="nume_prenume"><br>
Adresa: <input type="text" name="adr" value="Adresa de corespondenta" size="60"><br>
Telefon: <input type="text" name="tel" maxlength="10"><br>
Doresc un abonament:<br>
<input type="checkbox" name="ab_lunar" value="lunar" checked="checked"> Lunar<br>
<input type="checkbox" name="ab_trim" value="trimestrial">Trimestrial<br>
<input type="checkbox" name="ab_anual" value="anual">Anual<br>
<input type="checkbox" name="alt_tip" value="alt_tip" disabled="disabled">Alt tip de
abonament<br>
<input type="submit" value="Trimite comanda">
</form>
</body>
</html>
9.4.2. Atributul TYPE - valoarea TEXT

TEXT este valoarea implicita pentru elementul INPUT si creaza o caseta de introducere a textului de lungime
specificata (lungimea implicita este de 20 caractere).
<input type="text" name="nume" size="valoare" maxlength="valoare">
Printre atributele ce pot fi folosite impreuna cu tipul TEXT sunt:

 NAME pentru specificarea numelui controlului,
 SIZE pentru specificarea lungimii controlului,
 MAXLENGTH pentru specificarea numarului maxim de caractere ce pat fi introduse,
 DISABLED pentru a dezactiva controlul si
______________________________________________________________________________________________
Suport de curs HTML
 VALUE pentru a afisa un text implicit.
9.4.3. Atributul TYPE - valoarea PASSWORD

Optiunea PASSWORD este aproape identica cu TEXT cu exceptia faptului ca in loc sa fie afisat in caseta
caracterul tiparit este afisat un marcator pentru a preveni citirea lor de care persoane neautorizate. O caseta
de introducere parola se creaza astfel:
<input type="password" name="nume" size="valoare" maxlength="valoare">
Printre atributele utilizabile impreuna cu tipul PASSWORD sunt:

 NAME – specifica numele controlului,
 SIZE – dimensiunea campului,
 MAXLENGTH – lungimea maxima a sirului de caractere introdus,
 DISABLED – camp inactiv si
 VALUE – valoarea implicita.
Exemplul 9.5.
<html>
<head>
<title>Exemplu FORM - INPUT TYPE=TEXT/PASSWORD</title>
</head>
<body>
Nume: <input type="text" name="nume" size="23"><br>
Prenume: <input type="text" name="prenume"><br>
Parola: <input type="password" name="parola" maxlength="8" size="9"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
9.4.4. Atributul TYPE - valoarea CHECKBOX

Determina crearea unei casete de validare si este folosita atunci cand valorile posibile sunt de tip boolean
„DA/NU” (caseta poate fi bifata sau poate ramane libera).
<input type="checkbox" name="nume" value="valoare" checked>
Printre atributele utilizabile impreuna cu tipul CHECKBOX sunt:

 NAME – specifica numele controlului,
 CHECKED – defineste caseta ca fiind selectata in mod implicit
 DISABLED – defineste caseta ca fiind inutilizabila
 VALUE – valoarea returnata serverului
______________________________________________________________________________________________
Suport de curs HTML
Exemplul 9.6.
<html>
<head>
<title>Exemplu FORM - INPUT TYPE=CHECKBOX</title>
</head>
<body>
Vreau sa invat:<br>
<input type="checkbox" name="webdesign" value="html"> html<br>
<input type="checkbox" name="webdesign" value="css"> css<br>
<input type="checkbox" name="webdesign" value="psd"> photoshop<br>
<input type="checkbox" name="nimic" value="nimic" disabled="disabled"> Nimic<br>
</form>
</body>
</html>
9.4.5. Atributul TYPE - valoarea RADIO

Valoarea RADIO este asemanatoare cu CHECKBOX, insa cu ceva mai complexa. Butoanele radio pot fi grupate
prin folosirea aceluiasi nume la atributul NAME, astfel va fi acceptat un singur raspuns dintre toate optiunile
posibile.
<input type="radio" name="nume" value="valoare" checked="checked">
RADIO necesita folosirea atributului VALUE pentru a face diferenta intre optiuni, precum si atributul NAME
pentru crearea unui grup de optiuni.
Pentru butoanele radio este important sa fie atribuita o valoare initiala implicita prin folosirea atributului
CHECKED, deoarece exista posibilitatea ca utilizatorul sa nu selecteze nici o optiune din cele puse la dispozitie.
Exemplul 9.7.
<html>
<head>
<title>Exemplu FORM - INPUT TYPE=RADIO</title>
</head>
<body>
<form action="">
Imi place sa ascult muzica in timp ce invat:<br>
<input type="radio" name="muzica" value="y"> Da<br>
<input type="radio" name="muzica" value="n" checked="checked"> Nu<br>
<input type="radio" name="muzica" value="poate"> Nu stiu<br>
</form>
</body>
</html>
______________________________________________________________________________________________
Suport de curs HTML
9.4.6. Atributul TYPE - valoarea RESET

Folosirea valorii RESET pentru atributul TYPE determina afisarea unui buton care are functia de a sterge datele
din elementele formularului si aducerea lor la valorile initiale.
<input type="reset" value="valoare">
Se poate folosi atributul VALUE pentru a redenumi butonul (stipuleaza textul ce apare pe buton altul decat cel
implicit „Reset”).
Se recomanda folosirea butonului RESET cu mare precautie, prin indicarea cat mai explicita a efectului pe care
il are la actionare, pentru ca actionarea accidentala a acestuia poate fi neplacuta pentru utilizator.
Exemplul 9.8.
<html>
<head>
<title>Exemplu FORM - INPUT TYPE=TEXT/PASSWORD</title>
</head>
<body>
Nume: <input type="text" name="nume" size="23"><br>
Parola: <input type="password" name="parola" maxlength="8" size="9"><br>
<input type="reset" value="Sterge"><input type="submit" value="Trimite">
</form>
</body>
</html>
9.4.7. Atributul TYPE - valoarea SUBMIT

SUBMIT afiseaza un buton cu functia predefinita de a trimite datele din formular la serverul web pentru a fi
procesate.
<input type="submit" value="valoare">
Se poate folosi atributul VALUE pentru a redenumi butonul (stipuleaza textul ce apare pe buton altul decat cel
implicit „Submit Query”).
9.4.8. Atributul TYPE - valoarea IMAGE

Valoarea IMAGE a atributului type prezinta o singura diferenta fata de SUBMIT: inlocuieste butonul cu o
imagine specificata. Altfel, indeplineste aceeasi functie. Necesita utilizarea atributului SRC pentru definirea
URL-ului fisierului imagine. Declararea se face astfel:
<input type="image" src="URL_fisier_imagine">
Exemplul 9.9.
______________________________________________________________________________________________
Suport de curs HTML
<html>
<head>
<title>Exemplu FORM - INPUT TYPE=IMAGE</title>
</head>
<body>
<input type="image" src="imagini/trimite.png" alt="Trimite" width="70" height="20">
</form>
</body>
</html>
9.4.9. Atributul TYPE - valoarea BUTTON

Daca butoanele definite prin SUBMIT si RESET au actiuni predefinite, butoanele definite prin BUTTON
indeplinesc functii specificate de utilizator printr-un script. Tipul BUTTON este folosit de obicei pentru a activa
un script JavaScript cand butonul este actionat.
Declararea unui buton se face in felul urmator:
<input type="button" name="nume" value="valoare" onclik="script">
unde name specifica numele controlului, value este textul care afisat pe buton, iar la evenimentul onClick
precizeaza scriptul care se ruleaza la apasarea butonului.
Exemplul 9.10.
<html>
<head>
<title>Exemplu FORM - INPUT TYPE=BUTTON</title>
<script type="text/javascript">
function mesaj()
{
alert("Hello!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Clic aici!" onclick="mesaj()">
</form>
<p>Butonul de mai sus activeaza scriptul JavaScript definit in partea de HEAD.</p>
</body>
</html>
9.4.10. Atributul TYPE - valoarea HIDDEN
______________________________________________________________________________________________
Suport de curs HTML
Acest tip de element defineste un camp INPUT care nu este vizibil pentru utilizator. Campurile HIDDEN
stocheaza de obicei valori implicite, sau valori pentru a fi schimbate cu JavaScript, fiind in general folosit
pentru a transmite la serverul web siruri de caractere invizibile utilizatorului.
<input type="hidden" name="nume" value="valoare">
Are ca efect trimiterea unor perechi nume/valoare impreuna cu restul informatiei din formular.
Exemplul 9.11.
<html>
<head>
<title>Exemplu FORM - INPUT TYPE=HIDDEN</title>
</head>
<body>
<input type="hidden" name="etapa" value="semI"><br>
<input type="submit" value="Trimite">
</form>
</body>
</html>
9.5. Elementul BUTTON

Crearea butoanelor in formulare se realizeaza in doua moduri:
 prin precizarea valorilor submit, reset sau button in atributul type din elementul INPUT
 prin folosirea elementului BUTTON.
In cadrul unui element BUTTON se poate pune continut precum text sau imagini. Aceasta este diferenta intre
acest element si butoanele create cu ajutorul elementului INPUT.
Trebuie sa fie specificat intotdeauna atributul TYPE pentru elementul BUTTON (tipul butonului), altfel
browserele pot interpreta diferit butonul. Valoarea implicita in Internet Explorer este button, iar pentru alte
browsere este submit (precum si in specificatia W3C).
NOTA: Atributul VALUE din cadrul elementului BUTTON nu este recunoscut de catre toate browserele
importante (de ex. Internet Explorer ignora acest atribut), astfel ca, la trimiterea datelor catre server, valoarea
specificata in cadrul acestui atribut este ignorata (fiind trimis in schimb textul continut intre <button> si
</button>). De aceea, intervin diferente la executarea elementului BUTTON. Datorita acestor diferente care
pot interveni intre browsere, se recomanda folosirea elementului INPUT pentru a crea butoane in formulare.
Elementul BUTOON are forma:
<button name="nume" value="valoare" type="button|submit|reset">text</button>
Cele trei valori ale atributului type au ca efect:

 submit: trimite datele din formular la serverul web
 reset: reseteaza datele din controalele formularului
 button: creaza un buton a carui actiune este definita printr-un script
______________________________________________________________________________________________
Suport de curs HTML
Atributele elementului BUTTON sunt:

Atribut Functie
Defineste numele butonului.
Atributul name este folosit pentru a identifica datele din formular dupa ce acestea au
fost trimise la server, sau pentru a se face referire la datele din formular in cazul in care
se foloseste JavaScript.
Valoare: nume buton.
Defineste o valoare pentru un element BUTTON.
Acest atribut este recunoscut de majoritatea browserelor importante, mai putin Internet
Explorer.
Valoare: text

Stabileste tipul unui element BUTTON.
Valori posibile:
- button
- reset
- submit
Specifica faptul ca elementul BUTTON este incativ.
In cazul in care este setat atributul disabled, elementul BUTTON nu poate fi utilizat.
Atributul DISABLED poate fi setat astfel incat elementul BUTTON sa fie inutilizabil de
catre un utilizator pana cand nu este indeplinita o alta conditie (ca de exemplu bifarea
unei casete de selectare, etc.). Apoi, cu JavaScript valoarea DISABLED poate fi anulata si
elementul BUTTON devine utilizabil.
Valoare: disabled.
dir
id
lang
style
tabindex
title
xml:lang
Exemplul 9.12.
<html>
<head>
<title>Exemplu FORM - BUTTON</title>
<script type="text/javascript">
function mesaj()
{
______________________________________________________________________________________________
Suport de curs HTML
alert("Fereastra generata cu JavaScript");

}
</script>
</head>
<body>
<form>
<button type="button" onclick="mesaj()">Clic aici!</button><br>
<button type="button" onclick="mesaj()"><img src="imagini/buton.png" alt="Clic aici!" width="100"
height="100"></button>
<p>Cele doua butoane de mai sus au acelasi efect generat cu JavaScript, insa aspectul difera in
functie de continutul elementului BUTTON.</p>
<p> </p>
<button type="reset" value="Sterge">Sterge</button>
<p>Butonul de mai sus este creat cu ajutorul elementului BUTTON si se comporta ca si butonul creat
cu elementul INPUT pentru care type="reset" si value="Sterge".</p>
</form>
</body>
</html>
9.6. Elementul LABEL

LABEL defineste o eticheta pentru elementul INPUT si specifica textul care eticheteaza acest control. Spre
deosebire de textul normal, eticheta si controlul asociat impart aceeasi focalizare.
Eticheta LABEL nu genereaza un efect vizual special pentru utilizator, dar ofera o metoda imbunatatita de
activare a controlului, intrucat acesta poate fi activat inclusiv dand clic pe textul din cadrul elementului LABEL.
<label for="nume_control"> ... </label>
Etichetele se asociaza controalelor prin doua metode:

 implicita: elementul asociat este continut in LABEL
 explicit: eticheta este legata de control prin specificarea id-ului acestuia in atributul FOR
Atributele elementului LABEL sunt:

Atribut Functie
for Atribut optional.
Specifica de care element al formularului este legat LABEL.
Valoare: id-ul elementului INPUT.
dir
id
lang
style
tabindex
title
xml:lang
______________________________________________________________________________________________
Suport de curs HTML
Exemplul 9.13.
<html>
<head>
<title>Exemplu FORM - LABEL</title>
</head>
<body>
<p>Urmatoarele doua controale pot fi activate inclusiv dand clic pe textele din cadrul elemntelor LABEL.</p>
<label for="da">Da</label>
<input type="radio" name="raspuns" id="da">
<br>
<label for="nu">Nu</label>
<input type="radio" name="raspuns" id="nu">
</form>
</body>
</html>
9.7. Elementul FIELDSET
FIELDSET este o eticheta HTML care creaza o caseta in jurul unui grup de controale. Impreuna cu FIELDSET se
foloseste elementul LEGEND prin care se poate preciza o eticheta (un „titlu”) pentru setul de campuri.
Definirea se face astfel:
<fieldset>
<legend align="top|bottom|right|left">
... definire campuri ...
</legend>
</fieldset>
Ambele elemente necesita si eticheta de sfarsit, ia alinierea se face in raport cu setul de campuri, nu cu pagina.
Atributele standard pe care le poate avea eticheta FIELDSET sunt: class, dir, id, lang, style, title, xml:lang
(functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1), iar eticheta LEGEND prezinta in plus
fata de acestea si atributul standard accesskey.
Exemplul 9.14.
<html>
<head>
<title>Exemplu FORM - FIELDSET</title>
</head>
<body>
<fieldset>
<legend>Date de contact:</legend>
<p>Nume: <input type="text" name="nume"></p>
<p>Email: <input type="text" name="email"></p>
______________________________________________________________________________________________
Suport de curs HTML
<input type="reset" value="Sterge"><input type="submit" value="Trimite">

</fieldset>
</form>
</body>
</html>
9.8. Atribute comune

Exista o serie de atribute care sunt comune elementelor ce intra in componenta formularelor. Printre acestea
se numara: disabled, tabindex si accesskey.
9.8.1. Dezactivarea
Atributul DISABLED permite dezactivarea unui element. Daca elementul este dezactivat, atunci continutul sau
este imposibil de folosit, fiind scos si din ordinea de tabulare (perechile nume/valoare nu sunt incluse in datele
transmise serverului web). In cazul in care elementul dezactivat este un buton, starea de dezactivare poate fi
schimbata doar prin intermediul unui script.
9.8.2. Navigarea
Atributul TABINDEX este folosit pentru navigarea intre elementele unui formular cu ajutorul tastei TAB. Daca
atributul nu este specificat, atunci ordinea de parcurgere este ordinea in care apar elementele in cadrul
formularului.
Pentru a stabili ordinea de navigare, atributului i se atribuie valori intregi, astfel parcurgerea se va face in
ordinea crescatoare a valorilor. Nu este necesar ca aceste valori sa fie consecutive, din contra este bine sa se
lase valori libere pentru cazul in care vor fi introduse controale noi ulterior.
Pentru a inlatura un element din ordinea de navigare, fara a-l dezactiva, trebuie ca valoarea atributului
tabindex sa fie negativa.
9.8.3. Taste de acces

Pentru accesul direct la un element din formular, acestuia se atribuie un „hot-key” format prin combinatia
ALT+tasta_asociata, sau ALT+SHIFT+tasta_asociata, sau CTRL+tasta_asociata, etc., in funtie de browser si de
sitemul utilizat. Folosind atributul ACCESSKEY se stabileste o tasta de acces la un element. Este frecvent
folosita pentru selectarea optiunilor din meniuri, dar si in multe alte scopuri.
Exemplul 9.15.
<html>
<head>
<title>Exemplu de document html care contine un formular de guestbook</title>
</head>
<body>
<p>Introduceti datele personale si expediati-le</p>
<form method="post" action="mailto:webmaster@iim.ro">
<table border="0" cellpadding="2" cellspacing="0" width="100%">
______________________________________________________________________________________________
Suport de curs HTML
<tr>
<td width="15%">Nume </td>
<td width="85%"><input type="text" accesskey="n" name="nume" size="20">(Accesskey N)</td>
</tr>
<tr>
<td width="15%">Prenume</td>
<td width="85%"><input type="text" accesskey="p" name="prenume" size="20">(Accesskey P)</td>
</tr>
<tr>
<td width="15%">Varsta</td>
<td width="85%"><select size="1" name="varsta">
<option selected>15-19</option>
<option accesskey="2">20-29</option>
</select></td>
</tr>
<tr>
<td width="15%">Sex</td>
<td width="85%"><input type="radio" value="m" checked name="sex">M
   <input type="radio" name="sex" value="f">F</td>
</tr>
<tr>
<td width="15%">E-mail</td>
<td width="85%"><input type="text" name="mail" size="40"></td>
</tr>
<tr>
<td width="15%">Comentarii</td>
<td width="85%"><textarea rows="4" name="coment" cols="40"></textarea></td>
</tr>
</table>
<p><input type="submit" value="trimite" name="trimite">
<input type="reset" value="renunta" name="renunta"></p>
</form>
</body>
</html>
______________________________________________________________________________________________
Suport de curs HTML

<form>...</form> action Defineste un formular.
method
enctype
name
class
dir
id
lang
style
title
xml:lang
<textarea>...</textarea> cols Definest eun camp pentru adaugare text.
rows
disabled
readonly
name
class
dir
id
lang
style
title
xml:lang
<select>...</select> disabled Defineste o lista derulanta de optiuni.
name
multiple
class
dir
id
lang
style
title
xml:lang
<option>...</option> value Defineste un element (o optiune) al unei liste derulante.
selected
class
dir
id
lang
style
title
xml:lang
<optgroup>...</optgroup> label Grupeaza elemente ale unei liste derulante.
class
dir
id
______________________________________________________________________________________________
Suport de curs HTML
lang
style
title
xml:lang
<input> name Defineste o gama variata de controale: buton de
size executie/trimitere a datelor dintr-un formular, buton de
maxlength stergere a datelor dintr-un formular, buton personalizat
value pentru executarea unui script, caseta de validare, camp
checked pentru incarcarea unui fisier, camp de introducere a
type parolei, buton de selectie, camp pentru introducere text.
disabled
readonly
src
accesskey
class
dir
Id
lang
style
tabindex
title
xml:lang
<button>...</button> name Defineste un buton de comanda.
value
type
disabled
accesskey
class
dir
id
lang
style
tabindex
title
xml:lang
<label>...</label> for
accesskey
class
dir
id
lang
style
tabindex
title
xml:lang
<fieldset>...</fieldset> class Defineste o caseta in jurul unui grup de controale.
dir
id
lang
style
______________________________________________________________________________________________
Suport de curs HTML
title
xml:lang
<legend>...</legend> accesskey Defineste o eticheta / un titlu pentru grupul de controale
class cuprins intr-un cadru <fieldset>.
dir
id
lang
style
title
xml:lang
______________________________________________________________________________________________

SWA Suport-Curs HTML PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SWA Suport-Curs HTML PDF

Uploaded by

Copyright:

Available Formats

SUPORT DE CURS

- definirea corecta a structurii unui document HTML

4.2.1. Definire si utilizare ................................................................................................................................................ 45

8.1. Concept ................................................................................................................................................................ 87

 o organizare uniforma in numirea si localizarea resurselor in retea:

1.1. Ce este WWW?

1.2. Navigatoare web

1.3. Ce este de fapt HTML?

HTML ofera autorilor mijloace:

1.4. Notiunea de eticheta (tag)

Capitolul 2. CREAREA UNUI DOCUMENT HTML

2.1. Structura unui document HTML

Structura unui document HTML este:

Exemplul „Hello World”

Iar pe ecran apare:

<!DOCTYPE HTML sir>

2.1.1.1. Declaratii DOCTYPE:

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

Atributele pe care le poate avea eticheta <html> sunt:

2.2.1. Antetul documentului HTML

Atributele pe care le poate avea eticheta <head> sunt:

Atributele pe care le poate avea eticheta <title> sunt:

Pentru site-uri in engleza:

Cateva exemple de utilizare a atributului HTTP-EQUIV in cadrul etichetei META:

<meta http-equiv="content-type" content="text/html; charset=ISO-2022-JP">

<link rel="relatie" type="mimetype" href="protocol://nume_server/cale_de_cautare/">

Tipurile MIME comunica browserelor cum sa controleze extensii specifice. Majoritatea

class Atribut standard.

<title>Exemplu de folosire a etichetei LINK</title>

lang="en", lang="fr", lang="es", etc.

Lista completa a tipurilor MIME atribuite de catre IANA (Internet Assigned

NOTA: Conform IANA, tipul MIME "type/Javascript" este invechit. Noul

2.2.2. Partea principala (corpul) documentului HTML

2.2.2.1. Atribute aditionale

dir Specifica directia textului continut.

2.2.2.2. Antete (headere)

<h6>Antet de nivel 6</h6>

Acesta este un antet

Acesta este un antet

Unitati de masura dimensiuni fonturi

IE7 IE8 FF2 FF3 Opera Safari 3.1

2.2.2.4. Linie noua

2.2.2.5. Desenarea unei linii

Exemplu de citat care se intinde pe mai multe randuri.

2.2.2.7. Texte preformatate

2.2.2.9. Entitati caracter si caractere speciale

é &#233; &eacute; e acut mic

2.2.3. Divizarea corpului documentului in bucati

2.3. Folosirea culorilor in tabele

2.3.1. HTML – sistemul de culori RGB

2.3.2. HTML – sistemul de culori hexazecimal #ff0000

Culoare Valoarea hexazecimala RGB

HTML - Coduri de culoare - Ruperea codului

In acest fel posibilitatile cresc iar sistemul poate avea 16 valori.

Un exemplu de cod hexazecimal ar fi: bgcolor="#FFFFFF"

(15 * 16) + (15) = 255

2.4. Etichete si atribute prezentate in acest capitol

Capitolul 3. FORMATAREA TEXTULUI

é é é e acut mic