Webdesign Introductory Course

Suport curs Web design nivel 1
Partea 1 - Ce inseamna HTML?
Pentru inceput sa descoperim originea abrevierii HTML - HyperText Markup Language. Acest limbaj este
folosit pentru a formata si prezenta documente pe web. HTML adauga tag-uri fisierelor ASCII astfel incat sa
permita afisarea unei varietati de fonturi, imagini sau sunete prin definirea unor elemente ca header, lista,
paragraf si prin implementarea si utilizarea unor legaturi [link-uri] catre alte documente publicate pe
internet.
Mai clar, limbajul HTML este limbajul pe care il inteleg browser-ele (ex.: Mozilla Firefox, Internet Explorer,
Chrome, Opera , etc.). Datorita acestui limbaj, browser-ul poate afisa ceea ce autorul paginii web a dorit sa
prezinte. Elementele de baza ale limbajului HTML sunt foarte simple si usor de retinut si apoi de utilizat;
cunoscand doar tag-urile de baza putem construi un intreg site fara probleme.
Evoluand continuu, limbajul HTML a cunoscut de-a lungul timpului diferite versiuni.
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013
2. Structura HTML
Ce este un tag?
TAG-ul reprezinta o comanda in cod HTML care indica modul in care va fi interpretata informatia la care ea
se refera. Tag-urile markup sunt numite in mod uzual tag-uri HTML. Sintetizand:
Tag-urile HTML sunt denumiri cheie (numele tag-ului) inconjurate de semnele < si >
Tag-urile HTML de obicei sunt pereche, duble [<b> si </b>] dar pot fi si simple [<br />]
Primul tag din pereche se numeste tag-ul de inceput, iar urmatorul tag-ul de sfarsit
Tag-ul de sfarsit este scris ca si tag-ul de inceput, dar cu semnul slash / inainte de denumire
Tag-urile de inceput si sfarsit se mai numesc si tag-uri de deschidere si de inchidere
<numetag>continutul dorit</numetag>
<numetag />
Orice pagina web standard trebuie sa contina cateva tag-uri, numite in continuare de baza, care trebuie sa
apara in cadrul fiecarei pagini a unui web site. Aceste tag-uri, prezentate in cele ce urmeaza, trebuie sa
apara exact in aceasta cronologie in cadrul paginii web. Astfel, codul unui fisier HTML ar putea arata in felul
urmator:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Prezentul suport de curs nu se doreste a fi un material exhaustiv privind lucrul pe calculator si nu intruneste totalitatea informatiilor
predare de profesor la curs, fapt justificat de caracterul preponderent aplicativ al programelor. Suportul de curs are scopul de a
transmite cunostintele de baza, conform tematicii de pregatire. Distribuirea prezentului material pe Internet, pe suport CD sau alte
suporturi catre terte persoane este strict interzisa si se pedepseste conform legii @Avantaj Consulting
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Denumirea paginii mele</title>
</head>
<body>
Aici putem scrie continutul de afisat in browser.
</body>
</html>
Inainte de a explica fiecare tag in parte mentionam ca tag-urile trebuie scrise in codul sursa exact in forma in
care ele apar mai sus, intre semnele <>. Aceste simboluri au menirea de a transmite browser-ului ca textul
dintre ele trebuie recunoscut ca un tag, deci ca un cuvant cheie al limbajului, o comanda care trebuie
executata.
<!DOCTYPE>
Declaratia <!DOCTYPE> este folosita pentru a ajuta browser-ul web sa afiseze corect documentul HTML.
Sunt multe diferente intre versiunile HTML enuntate mai devreme, astfel incat un browser nu poate afisa
corect continutul unei pagini web decat daca specificam tipul si versiunea de HTML.
Exemple comune:
HTML5 <!DOCTYPE html>
HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html>
Acest tag transmite browser-ului ca documentul respectiv este de fapt un document HTML , dand astfel
indicatii asupra modului in care vor fi interpretate diferite partitii ale fisierului ASCII.
<head>
Acest tag este in fapt tot un mesaj catre browser, continand informatii despre document, ca de exemplu
linkuri sau pagini care trebuie incarcate in prealabil.
<title>
Acest tag este folosit pentru a da o denumire paginii web create; acest nume va apare in partea
superioara a fereastrei browser-ului identificand astfel pagina respectiva prin denumirea sa.
</title>
Acest tag este de fapt inchiderea celui precedent; transmite browser-ului ca textul ce trebuie
considerat ca titlu al paginii s-a incheiat. Majoritatea tag-urilor HTML folosesc tag-uri corespondente de
inchidere.
</head>
Reprezinta tag-ul de inchidere al tag-ului corespondent <head> deschis anterior, semnificand astfel
incheierea zonei de inceput a documentului HTML.
<body>
Acest tag semnaleaza deschiderea sectiunii corespunzatoare corpului paginii web. Aici se vor introduce
informatiile continute in pagina, textul, grafica si elementele multimedia dorite. Aceste informatii vor
aparea in fereastra browser-ului.
</body>
Reprezinta tag-ul de inchidere a zonei de continut, care transmite browser-ului ca nu se mai doreste
adaugarea de informatie in aceasta pagina.
</html>
Acest tag incheie documentul HTML, semnaland browser-ului ca nu mai exista elemente care trebuie
citite sau incarcate.
Cu elementele prezentate mai sus putem deja crea o pagina web, foarte simpla dar perfect functionala.
Codul urmator implementeaza o pagina web folosind doar tag-urile de baza:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pagina mea proprie</title>
</head>
<body>
Aceasta este o pagina de test.
Acesta este un exemplu perfect pentru simplitatea crearii unei pagini web!
</body>
</html>
Observatii: Dupa cum ati vazut tag-urile sunt folosite in general in perechi complementare. Daca doriti sa
folositi tag-uri grupate fara a avea probleme atunci ele trebuie corect grupate si nu incrucisate.
Exemplu:
<tag1><tag2>continut</tag1></tag2> - tag-uri incrucisate care pot genera erori.
<tag1><tag2>continut</tag2></tag1> - tag-uri grupate corect.
Atributele HTML
Pentru a personaliza tag-urile se folosesc atribute.

Elementele HTML pot avea atribute
Atributele formateaza suplimentar tag-urile
Atributele sunt intotdeauna specificate in tag-ul de inceput (de deschidere)
Atributele au intotdeauna valoare specificata astfel: name="valoare"
Valoarea atributelor va fi intotdeauna delimitata folosind ghilimele
Desi atributele si valorile lor sunt case-insensitive, W3C recomanda folosirea literelor mici
Astfel, sintaxa unui tag s-ar putea scrie in felul urmator:
<tag atribut=valoare> </tag>
Un tag poate avea mai multe atribute, caz in care vor fi despartite de un spatiu:
<tag atribut=valoare atribut=valoare> </tag>
Exista cateva atribute aplicabile oricarui tag:

class [specifica una sau mai multe denumiri de clasa pentru acel element]
id [specifica un id unic pentru element]
style [specifica un cod CSS inline pentru element]
title [specifica informatii aditionale despre element - afisate ca tool tip]
3. Tag-uri pentru formatarea continutului html
A. Formatarea textului
In cadrul sectiunii <body> apar elementele de text si grafica ale paginii noastre. Unele dintre elementele cel
mai des utilizate care se intalnesc in cadrul acestei sectiuni sunt tag-urile pentru formatarea textului.
Tag-urile Heading
<h1> si </h1> <h6> si </h6> reprezinta tag-urile ce modifica dimensiunea textului, ingroasa textul si se
folosesc la introducerea titlurilor intr-o pagina web. Dimensiunea textului variaza: <h1></h1> avand
dimensiunea cea mai mare si <h6></h6> avand dimensiunea cea mai mica.
<h1>Acesta este un titlu mare</h1>

<h2>Acesta este un titlu mai mic</h2>
<h3>Acesta este un titlu si mai mic</h3>
Atentie! Browsere-ele adauga automat un spatiu liber inaintea si dupa fiecare dintre tag-urile heading!
Tag-ul <strong>
<strong> si </strong> sunt tag-urile ce transforma textul dintre ele in text bold (ingrosat). In locul acestei
perechi de tag-uri se poate folosi si perechea <b> si </b>
Tag-ul <em>
<em> si </em> sunt tag-urile ce transforma textul dintre ele in text italic (cursive). In locul acestei perechi
de tag-uri se poate folosi si perechea <i> si </i>
Tag-ul <u>
<u> si </u> sunt tag-urile ce transforma textul dintre ele in text subliniat (underlined)
Tag-ul <sup>
<sup> si </sup> sunt tag-urile ce transforma textul in superscript
Tag-ul <sub>
<sub> si </sub> sunt tag-urile ce transforma textul in subscript
Tag-ul <del>
<del> si </del> sunt tag-urile ce transforma textul in strike (text taiat). In locul acestei perechi de tag-uri se
poate folosi si perechea <strike> si </strike>
Tag-ul <p>
<p> si </p> reprezinta tag-ul delimiteaza un paragraf de text.
Un paragraf nu permite pozitionare unui alt element pe acelasi rand cu el si lasa cate un rand liber deasupra
si dedesubtul sau.
Tag-ul <br />

<br /> este tag-ul ce comanda trecerea la linie noua.
Tag-ul este unul simplu, ce nu necesita tag de inchidere. In cazul in care dorim trecerea la o linie noua, este
obligatorie folosirea tag-ului, simpla utilizare a tastei ENTER in cadrul codului sursa al paginii noastre nu are
nici un efect in cadrul browser-ului. Astfel, pentru obtinerea mai multor linii libere se foloseste urmatoarea
sintaxa :
<body>
Ceva tare<br />
<br />
<br />
<br />
<br />
<br />
Ciudat.
</body>
Secventa de mai sus va duce la urmatorul rezultat in browser :

Ceva tare
Ciudat.
Tag-ul <blockquote>
<blockquote> si </blockquote> marcheaza un citat.
Din punctul de vedere al formatarii observam un spatiu liber fata de marginea din stanga si fata de marginea
din dreapta si, similar cu paragraful, un rand liber deasupra si dedesubt.
Observatie: Tag-urile de formatare a textului pot fi folosite si combinat pentru a obtine efectul dorit:
<strong><em><u>Stiu sa folosesc tag-urile html!</u></em></strong>
Caracterele speciale
Caracterele speciale nu pot fi utilizate in mod normal ca text, datorita faptului ca ele reprezinta cuvinte
cheie ale limbajului HTML. Pentru a introduce aceste caractere exista posibilitatea de a folosi codul lor sau
alte definitii standardizate ale acestora.
De exemplu pentru a obtine semnul de copyright vom scrie © iar browser-ul va afisa pe ecran semnul
de copyright () .
In general, simbolul & marcheaza pentru browser faptul ca incepem descrierea unui caracter special.
Unul dintre cele mai folosite caractere speciale pentru HTML este spatiul.
In cazul in care in textul pe care dorim sa-l publicam vrem sa lasam un numar de 5 spatii intre doua cuvinte,
browser-ul va afisa doar un singur spatiu intre ele. Pentru a putea afisa mai multe spatii trebuie introdus
caracterul special :
<body>
Ceva
tare
ciudat.
</body>
Rezultatul acestei comenzi va fi :
Ceva tare ciudat.
Alte caractere speciale des utilizate ar fi :

[ spatiu ]
< [ < ]
> [ > ]
& [ & ]
" [ " ]
©[ ]
€[ ]
B Liste
In HTML exista doua tipuri de liste: liste neordonate si liste ordonate
I Liste neordonate
1. Sintaxa
<ul>
<li>primul element de lista</li>
<li>al doilea element de lista</li>
<li>al treilea element de lista</li>
</ul>
Exemplul de mai sus va fi afisat in browser astfel:
primul element de lista

al doilea element de lista
al treilea element de lista
Din sintaxa observam urmatoarele:

Tag-ul <ul></ul> (unordered list) reprezinta intreaga lista care in cazul nostru contine 3 elemente de
lista care sunt marcate prin tag-urile <li></li>
2. Atribute
Lista neordonata poate fi personalizata folosind atributul type care poate lua valorile: disc (valoarea
default), circle sau square. Fiecare dintre cele 3 valori schimba simbolul din fata elementelor de lista.
Astfel:
<ul type=circle>
</ul>
Va afisa in browser:
o primul element de lista

o al doilea element de lista
o al treilea element de lista
Iar
<ul type=square>
</ul>
Va reda:
primul element de lista

In toate cele 3 cazuri de mai sus putem observa ca folosind atributul type pe tag-ul <ul> obtinem liste
care au acelasi simbol in fata elementelor de lista. In cazul in care dorim liste care sa nu foloseasca acelasi
simbol la toate elementele de lista vom putea folosi acelasi atribut type aplicat, de data aceasta, pe fiecare
tag <li> in parte.
<ul>
<li type=circle>primul element de lista</li>

<li type=disc>al doilea element de lista</li>
<li type=square>al treilea element de lista</li>
</ul>
Va afisa in browser:
o primul element de lista

In exemplul de mai sus putem observa utilizarea atributului type pe fiecare element al listei cu o alta
valoare. In functie de necesitati putem folosi orice combinatie de valori.
II Liste ordonate
1. Sintaxa
<ol>
</ol>
In browser se va afisa:
1. primul element de lista

2. al doilea element de lista
3. al treilea element de lista
* comparand cu o lista neordonata observam o diferenta de cod HTML: utilizarea tag-ului <ol> (ordered list)
in locul tag-ului <ul> iar la afisariea in browser: caracterele din fata elementelor de lista (care sunt ordonate
1, 2,3)
2. Atribute
Pentru tag-ul <ol>
In cazul tag-ului <ol> putem folosi 2 atribute: type si start. Ca si pentru tag-ul <ul> si aici putem folosi
atributul type pentru a schimba caracterele din fata elementelor de lista dar cu alte valori: 1 (valoarea
implicita), a, A, i sau I.
<ol type=a>
<li> primul element de lista</li>
<li> al doilea element de lista</li>
<li> al treilea element de lista</li>
</ol>
Va rezulta in:
a. primul element de lista

b. al doilea element de lista
c. al treilea element de lista
Observam ca valoarea type=a transforma caracterele in a, b, c similar valoarea A iar type=i ar afisa :
i. primul element de lista

ii. al doilea element de lista
iii. al treilea element de lista
si intr-un mod similar type=I (I, II, III)
Folosind atributul start se poate stabili numarul de ordine al primului caracter, de exemplu:
<ol type=1 start=3>

</ol>
<ol type=a start=3>

</ol>
Care vor fi afisate in browser astfel:

4. al doliea element de lista
5. al treilea element de lista
c. primul element de lista

d. al doilea element de lista
e. al treilea element de lista
Observam ca indiferent de tipul caracterelor din fata elementelor de lista (1 sau a) valorile pe care le ia
atributul start sunt doar valori numerice.
Pentru tag-ul <li>
In cazul acestui tag putem folosi atributele type si value. Atributul type, ca si in cazul aplicarii lui pe tag-uri
<li> apartinant unei liste neordonate, stabileste caracterul din fata fiecarui element de lista. Astfel:
<ol>
<li type=1> primul element de lista</li>
<li type=A>al doilea element de lista</li>
<li type=I> al treilea element de lista</li>
</ol>
Va rezulta in:

B. al doilea element de lista
Observam ca, indiferent de valoarea atributului type din dreptul fiecarui element de lista, ordonarea se
pastreaza (1 primul caracter din type=1, B al doilea caracter din type=A si iii al treilea caracter din
type=i).
Daca vom adauga si atributul value vom putea schimba numarul de ordine al fiecarui caracter din fata
elementelor de lista ne mai fiind obligatorie o ordonare
<ol>
<li type=1 value=2> primul element de lista</li>
<li type=A value=4> al doilea element de lista</li>
<li type=I value=3> al treilea element de lista</li>
</ol>
Rezultatul in browser fiind:

D. al doilea element de lista
Observam ca similar cu start si value ia doar valori numerice indiferent de tipul de caracter din fata
elementului de lista
C Imagini
In cazul imaginilor utilizate pentru web prioritara este dimensiunea lor si apoi calitatea. Astfel in cele mai
multe cazuri se va face un compromis la calitate pentru a obtine o dimensiune optima. Cele mai des
intalnite imagini in paginile web sunt:
.jpg - imagine de calitate superioara (16.7 milioane de culori) dar de dimensiune mai mare. Se
folosesc in general in cazul galeriilor sau a fotografiilor .
.gif imagine de calitate redusa (256 culori) dar de dimensiune mai mica.
.png imagine de calitate redusa dar care suporta transparenta si care impreuna cu .gif se folosesc
pentru logo-uri sau imagini cu mai putine detalii
Tagul care se foloseste pentru imagini este tag-ul simplu <img />. Acest tag nu poate fi folosit fara atribute.
Astfel atributul obligatoriu pentru acest tag este src. Atribut ce are ca valoare calea catre imaginea dorita:
<img src=calea catre imagine />
Caile in html pot fi incadrate in 2 categorii: absolute si relative.
Caile absolute pot fi si ele la randul lor de 2 feluri: locale si online.

- Cele locale presupun ca imaginea sa se afle pe acelasi calculator pe care se creeaza pagina si sunt de
forma: <img src=file:///C|/Users/Public/Pictures/SamplePictures/Desert.jpg />. Acest tip de cale
nu este indicata din cauza faptului ca la eventuala mutare a folder-ului calea catre imagine nu va
mai fi valabila si deci imaginea nu va fi afisata.
- Caile online presupun ca imaginea sa se afle pe un site online si vor arata de forma: <img
src="http://www.abc.ro/imagine.jpg" /> . Un dezavantaj pentru o astfel de cale ar fi atunci cand
site-ul nu este administrat de noi si nu avem control asupra imaginii. In cazul in care adresa este
chiar adresa site-ului nostru atunci o astfel de cale absolute poate fi folosita fara nicio problema.
Caile relative presupun ca imaginea cu care facem legatura sa se afle in acelasi folder cu restul site-ului.
Astfel o imagine inserata folosind o cale relativa va fi afisata indiferent de mutarea folder-ului. Iata 3
exemple:
<img src=imagine.gif /> - presupune ca imaginea si fisierul html sa se afle in radacina aceluiasi
folder
<img src=poze/imagine.png /> - se foloseste atunci cand imaginea se afla in folder-ul poze care la
randul lui sta impreuna cu pagina html in radacina aceluiasi folder
<img src=../imagine.jpg /> - in acest caz imaginea se afla in radacina unui folder care contine
folder-ul unde se gaseste pagina html
Caile relative pot fi folosite chiar daca site-ul este sau nu online.
Alte atribute pentru tag-ul <img />:
alt
<img src=imagine.jpg alt=text descriptiv /> Atributul alt are ca scop afisarea unui text descriptiv in
locul imaginii in cazul in care aceasta nu este afisata si mai important reprezinta singura metoda prin care
motoarele de cautare (google, yahoo, bing) pot indexa / interpreta imaginile.
width si height
<img src=imagine.png width=200 height=200 /> Aceste atribute stabilesc dimensiunile imaginii (in
pixeli). In cazul in care dorim sa modificam dimensiunile initiale ale unei imagini, trebuie sa ne asiguram ca
pastram raportul latime / inaltime pentru a nu deforma imaginea. O alta solutie mai simpla ar fi sa folosim
doar width sau doar height, caz in care browser-ul va calcula cealalta dimensiune fara sa deformeze
imaginea.
*Atentie: nu este indicat sa folosim imagini de mari / foarte mari dimensiuni. Chiar daca folosim width /
height pentru redimensionare acestea for fi afisate cu dimensiunile stabilite de noi dar browser-ul va incarca
imaginea originala si apoi o va redimensiona (ceea ce duce la o incarcare mai grea). Solutia ideala ar fi ca
imaginea sa fie redimensionata dintr-un program de editare de imagini si apoi, in html, sa folosim atat
width cat si height avand valorile setate din programul de editare. In acest fel imaginea este de dimensiuni
reduse si se incarca mai repede.
title
<img src=poza.gif title=text descriptiv /> Atributul title stabileste un text descriptiv care va fi afisat la
trecerea cursorului peste imagine (mouseover). Are rolul de a oferi o descriere / explicatie a imaginii pentru
utilizatori. In html 5 acest atribut este unul acceptat de toate tag-urile.
align
<img src=imagine.png align=left /> In cazul in care inseram doua sau mai multe imagini observam
pozitionarea lor una langa cealalta. Folosind atributul align cu valorile left sau right putem pozitiona
imaginea in partea stanga sau dreapta fata de o alta imagine sau un text. O pozitionare mai complexa se va
realiza mai tarziu din css.
D Link-uri
Pentru a insera link-uri catre alte pagini html folosim tag-ul

<a href=http://www.google.com>text</a> in browser va fi afisat textul din interiorul tag-ului iar la click
pe el va trimite catre adresa stabilita cu ajutorul atributului href. Ca si in cazul imaginilor (atributul src) si aici
atributul href este obligatoriu. Valoarea lui va reprezenta pagina catre care dorim sa navigam. Adresele
pot fi externe sau interne. Astfel link-urile externe, catre alte pagini care nu apartin site-ului nostru, sunt de
forma http://www.domeniu.ro Link-urile catre pagini apartinand site-ului pot fi scrise folosind cai relative
ex: contact.html (exact ca in cazul imaginilor presupune ca fisierele sa apartina aceluiasi folder) dar se poate
folosi si o adresa absoluta ex: http://www.site.ro/contact.html (in acest caz site-ul trebuie sa fie online).
target
Pe langa atributul href care stabileste adresa catre care trimite link-ul mai putem folosi si atributul target
care ia valori _parent (valoarea predefinita) sau _blank. Atributul target stabileste unde se va deschide
adresa de destinatie astfel <a href=http://www.google.com target=_parent>google</a> se va afisa in
acelasi tab al browser-ului pe cand target=_blank va deschide pagina intr-un tab nou.
title
<a href=pagina.html title=text descriptiv>text</a> Si in acest caz title afiseaza un text descriptiv la
mouseover.
Este recomandat ca text-ul din interiorul tag-ului dublu <a> sa fie cat mai relevant pentru destinatia link-
ului.
Link-urile nu sunt folosite exclusiv cu text.

<a href=http://www.google.com><img src=imagine.png /></a> In acest caz in browser va fi afisata
imaginea pe care va fi pus link-ul. Desi in majoritatea cazurilor link-urile sunt pe text, exista si cazuri (ex
logo-ul site-ului) in care poate fi folosit un link pe o imagine.
E Tabele
Se insereaza cu tag-ul <table></table> dar cum un tabel nu poate exista fara celule vom avea nevoie si de
alte tag-uri. Astfel o structura reala a unui tabel va arata asa:
<table>
<tr>
<td>celula 1</td>
<td>celula 2</td>
<td>celula 3</td>
</tr>
<tr>
<td>celula 4</td>
<td>celula 5</td>
<td>celula 6</td>
</tr>
</table>
Observam tag-ul <tr></tr> (table row) care defineste un rand de tabel si tag-ul <td></td> care defineste o
celula. Dupa cum vedem pentru a defini un tabel trebuie sa cream randuri si apoi, in fiecare rand, cellule. In
consecinta in exemplul de mai sus am creat un tabel cu 2 randrui si 3 celule pe fiecare rand. Fara niciun
atribut tabelul va fi destul de rudimentar (nu va avea contur sau dimensiuni prestabilite).
Atribute pentru <table>
border
<table border=2></table> Stabileste grosimea liniei de contur a tabelului (in pixeli). Folosind acest
atribut stabilim si linia de contur pentru cellule (in cazul celulelor conturul este intotdeauna 1 pixel )
bordercolor
<table border=10 bordercolor=#ff0000></table> Cu ajutorul acestui atribut setam culoarea liniei de
contur (culoare care se va mosteni si la conturul celulelor)
width si height
<table width=300 height=300></table> Definesc dimensiunile tabelului in pixeli.
align
<table align=left></table> Utilizand atributul align cu valorile left, right sau center putem pozitiona
tabelul pe stanga paginii pe centru sau pe dreapta. Pentru o pozitionare mai exacta se foloseste css.
cellspacing
<table cellspacing=20></table> Cellspacing stabileste distanta dintre cellule (in pixeli)
cellpadding
<table cellpadding=5></table> Cellpadding reprezinta distanta intre continutul celulelor si conturul
acestora (in pixeli)
Atribute pentru tag-ul <td>
Spre deosebire de atributele tag-ului <table>, urmatoarele atribute nu vor afecta direct intregul tabel ci
doar celula careia i-au fost adaugate.
width si height
<table width=300 height=300 border=1>
<tr>
<td width=200 height=200>celula 1</td>
<td>celula 2</td>
<td>celula 3</td>
</tr>
<tr>
<td>celula 4</td>
<td>celula 5</td>
<td>celula 6</td>
</tr>
</table>
In acest exemplu vom observa ca celula cu width si height si-a modificat intr-adevar dimensiunile fata de
dimensiunile ei initiale dar se observa si faptul ca aceasta redimensionare a afectat si restul celulelor din
tabel.
align
Atributul align poate lua valorile: left, right, center sau justify. Cu ajutorul lui putem alinia, pe orizontala,
continutul din interiorul celulei.
valign
Atributul valign puate lua valorile: top, bottom, middle. Cu ajutorul lui putem alinia, pe verticala, continutul
din interiorul celulei
rowspan
Acest atribut ia doar valori numerice (valoarea minima 2) si reprezinta numarul de randuri pe care dorim sa
intindem celula, in cadrul aceleiasi coloane. Aceasta intindere se face intotdeauna de la stanga spre
dreapta.
colspan
Acest atribut ia doar valori numerice (valoare minima 2) si reprezinta numarul de coloane pe care dorim sa
intindem celula, in cadrul aceluiasi rand. Aceasta intindere se face intotdeauna de sus in jos.
title
Si in acest caz title afiseaza un text descriptiv la mouseover.
La utilizarea atributelor rowspan si colspan observam ca celula se extinde pe suprafata mai multor cellule,
pe rand sau coloana, dar nu inlocuieste celulele initiale ci le va impinge. Astfel incat va trebui sa stergem
celulele care nu mai incap in tabel pentru a ajunge la rezultatul dorit. De exemplu:

<tr>
<td rowspan=2> celula 1</td>

<td>celula 2</td>
<td>celula 3</td>
</tr>
<tr>
<td colspan=2>celula 4</td>
<td>celula 5</td>
<td>celula 6</td>
</tr>
<tr>
<td>celula 7</td>
<td>celula 8</td>
<td>celula 9</td>
</tr>
</table>
Observam ca celula 3 a fost impinsa pentru ca celula 1
s-a intins pe 2 coloane iar celula 9 pentru ca celula 4 s-
a intins pe 2 randuri. Pentru a ajunge la rezultatul dorit
va trebui sa stergem cele 2 celule 3 si 9
Codul va arata asa:

<tr>
<td rowspan=2> celula 1</td>
<td>celula 2</td>
<td>celula 3</td>
</tr>
<tr>
<td colspan=2>celula 4</td>
<td>celula 5</td>
<td>celula 6</td>
</tr>
<tr>
<td>celula 7</td>
<td>celula 8</td>
<td>celula 9</td>
</tr>
</table>
Iar rezultatul final
E Formulare
Pentru ca un formular sa fie functional este nevoie de un limbaj de programare server-side (ex: php). In
continuare vom crea un formular din punctual de vedere al structurii html.
Toate elementele de formular se introduce in interiorul tag-ului dublu <form></form>. Acesta poate avea
urmatoarele attribute <form action=fisier.php method=post></form> Atributul action face legatura cu
fisierul php in care se realizeaza functionalitatea iar method stabileste modalitatea prin care se transmit
informatiile catre server si are ca valori post sau get.
Elemente de formular inserate cu tag-ul <input />
<input type=text name=nume />

Creeaza un camp de text de 1 rand.
Valoarea atributului name este folosita in php pentru a identifica elementul de formular si deci ea trebuie sa
fie unica pentru fiecare element de formular.
Atribute optionale:
size =20 stabileste lungimea campului de text
value=un text oarecare afiseaza un text predefinit in campul de text
maxlength=5 stabileste numarul maxim de caractere ce pot fi introduce
placeholder=un text oarecare afiseaza un text predefinit in campul de text care dispare in momentul in
care utilizatorul incepe sa scrie
autofocus=autofocus selecteaza campul de text imediat dupa incarcarea paginii
required=required marcheza ca necesar un element de formular
<input type=password name=nume />

Creeaza un camp de text de 1 rand utilizat pentru parole (mascheaza continutul campului de text cu *)
Accepta aceleasi attribute optionale ca si in cazul lui <input type=text /> cu mentiunea ca in cazul
atributului value textul va fi mascat de *
<input type=date name=nume />

*momentan nu este recunoscut de firefox si ie 10
Creeaza un camp de text de 1 rand care la click afiseaza un calendar din care se poate selecta o data.
Atribute optionale:
<input type=email name=nume />

Creeaza un camp de text de 1 rand pentru introducerea unei adrese de e-mail. Verifica prezenta, unicitatea
si pozitia caracterului @.
Atribute optionale:
size =20 stabileste lungimea campului de text
value=un text oarecare afiseaza un text predefinit in campul de text
<input type=checkbox name=nume />

Creeaza un buton de tip checkbox. Particularitatea butoanelor de tip checkbox este ca putem selecta mai
multe variante.
Atribute optionale:
checked=checked stabileste butonul / butoanele preselectat /preselectate
<input type=radio name=numele grupului value=nume />

Creeaza un buton de tip radio. Particularitatea butoanelor de tip radio este ca putem selecta o singura
variant apartinand grupului.
Valoarea atributului name trebuie sa fie aceeasi pentru toate butoanele de tip radio dintr-un grup pentru ca
acestea sa functioneze corect.
Valoarea atributului value este folosita in php pentru a identifica elementul de formular si deci ea trebuie sa
Atribute optionale:
checked=checked stabileste butonului preselectat
<input type=submit name=nume value=text afisat pe buton />

Creeaza un buton de submit care preia datele din formular si le trimite catre php
<input type=reset name=nume value=text afisat pe buton />

Creeaza un buton care reseteaza datele din formular la valoarea initiala si nu trimite nimic catre php
<input type="file" name="nume" />

Creeaza un buton de browse cu ajutorul caruia se ataseaza fisere in formular pentru a fi trimise
Elemente de formular inserate cu tag-ul <select></select>
<select name=nume>
<option value=nume>optiunea 1</option>
</select>
Creeaza un meniu de tip drop-down din care putem selecta o singura optiune
Valoarea atributului value este folosita in php pentru a identifica elementul de formular si deci ea trebuie sa
Atribute optionale pentru tag-ul <option>

selected=selected stabileste optiunea preselectata. In cazul in care niciun tag <option> nu are atributul
selected atunci prima optiune va fi cea preselectata. Un singur <option> poate avea acest atribut
Atribute optionale pentru tag-ul <select>

multiple=multiple in acest caz meniul permite selectarea mai multor optiuni (folosind ctrl + click) dar isi
pierde calitatea de drop-down. In cazul unui astfel de meniu, mai multe tag-uri option pot avea atributul
selected=selected
Elemente de formular inserate cu tag-ul <textarea></textarea>
<textarea name=nume rows=5 cols=20></textarea>

Creeaza un camp de text pe mai multe randuri. Valoarea atributului rows stabileste numarul de randuri iar
valoarea atributului cols stabileste numarul de caractere pe rand.
Atribute optionale:
Tag-ul <fieldset></fieldset> incadreaza elemente de formular intr-un chenar. Toate elementele de formular,
inclusiv tag-ul <form></form> vor fi cuprinse in acest tag.
Tag-ul <legend>descriere formular</legend> Trebuie sa fie in interiorul <fieldset> si reprezinta titlu ce va

aparea scris pe conturul generat de acesta. Textul poate fi aliniat doar din css
Video
<video width=300 height=200 controls=controls>

<source src=clip.mp4 type=video/mp4 />
<source src=clip.ogg type=video/ogg />
</video>
Cu ajutorul acestui tag putem insera un video in pagina html fara sa mai fie nevoie de flash (.flv). Atributele
width si height ale tag-ului video stabilesc dimensiunile player-ului in pixeli iar atribul controls afiseaza
butoanele player-ului
Tag-urile <source/> sunt folosite pentru a insera calea de trimitere catre fisierul video. Este recomandat sa
folosim fisierul video in versiunea mp4 dar si ogg (sau ogv) pentru a ne asigura ca va fi visibil in toate
browser-ele
PARTEA A 2-A - CSS
Cascading Style Sheets - cu ajutorul css-ului putem pozitiona si formata elementele create din html.
I. Moduri de aplicare
1. Intern
2. Extern
3. Inline
1. CSS intern
Codul css intern se introduce in sectiunea de head a documentului folosind tag-ul <style
type=text/css>aici sta codul css</style>. Atributul type=text/css indica browser-ului tipul de cod ce se
va regasi in interiorul tag-ului style. Browser-ele moderne pot recunoaste codul fara sa mai fie nevoie de
atributul type deci tag-ul pentru css intern va fi, simplu, <style>cod css</style>.
Css-ul intern formateaza intreaga pagina in care a fost inserat.
In cazul unui site cu mai multe pagini nu este totusi varianta ideala pentru ca ar necesita scrierea codului css
pentru fiecare pagina si ar incarca destul de mult codul html.
2. CSS extern
In cazul css-ului extern codul css se introduce intr-un fisier cu extensia .css, fara a se mai folosi tag-ul
<style>, si apoi se realizeaza legatura cu pagina html folosind tag-ul
<link rel=stylesheet type=text/css href=fisier.css /> Acest tag se insereaza tot in tag-ul <head>.
Exact ca in cazul css-ului intern si aici se poate omite atributul type. Valoarea atributului href reprezinta
calea catre pagina .css.
Css-ul extern are avantajul ca se poate lega de oricate pagini html asftel incat este foarte eficient in cazul
unui site cu mai multe pagini.
3. CSS inline
Se introduce direct pe tag-ul dorit folosind atributul style <tag style=cod css></tag>. Orice tag html
accepta atributul style.
Un foarte mare dezavantaj pe care il are css-ul inline este faptul ca incarca foarte mult codul html (trebuie
inserat pentru fiecare tag in parte).
Avantajul principal il constituie prioritatea pe care o are fata de css intern sau extern. De exemplu: textul
unui paragraf este colorat in rosu prin intermediul css-ului intern, in albastru folosind css extern si in verde
cu css inline; browser-ul va afisa paragraful colorat cu verde.
II. Sintaxa CSS
Facand o paralela cu sintaxa html avem urmatoarele:
HTML <tag atribut=valoare></tag> sau <tag atribut=valoare />

CSS selector {proprietate: valoare;}
Astfel proprietatile cu valorile lor din css pot fi asemanate cu atributele respectiv valorile din html cu
mentiunea ca proprietatile css permit un grad de libertate mai mare in ceea ce priveste formatarea.
In ceea ce priveste selectorul, el ofera optiunea de a selecta mai multe tag-uri in acelasi timp.
1. Tipuri de selectori
2. Proprietati css
1. Tipuri de selectori
selector {proprietate: valoare;}
A. direct
B. class
C. id
1.A. Selectorul direct
<head>
<style>
p { proprietate: valoare; }
</style>
</head>
<body>
<p>primul paragraf</p>
<p>al doilea paragraf</p>
<p>al treilea paragraf</p>
</body>
In exemplul de mai sus, in care am folosit css intern, ne vom concentra pe selectorul direct p. (Aceeasi
sintaxa va fi valabila si in cazul css-ului extern)
Caracteristici ale selectorului direct:

- orice tag html poate reprezenta un selector direct
- numele selectorului este dat de numele tag-ului fara < si >
- formateaza TOATE tag-urile cu acelasi nume din pagina (in cazul nostru p formateaza toate tag-urile
<p> din pagina)
- in cazul in care dorim sa formatam un paragraf intr-un mod diferit fata de restul paragrafelor va
trebui sa folosim un alt tip de selector.
1.B. Selectorul class
<head>
<style>
.abc {proprietate: valoare;}
</style>
</head>
<body>
<tag class=abc></tag>
<tag class=abc />
</body>
In exemplul de mai sus, in care am folosit css intern, ne vom concentra pe selectorul class .abc. (Aceeasi
Caracteristici ale slectorului class:

- numele unui selector de tip class poate fi orice text precedat de caracterul . (punct) cu 2 exceptii:
textul poate contine doar litere, cifre, - sau _
primul caracter de dupa . SA NU FIE cifra

- formateaza doar tag-urile care au atributul class=abc (valoarea atributului class este data de
numele selectorului fara caracterul .)
- orice tag html accepta atributul class
- un selector class poate fi folosit pentru a formata oricate tag-uri din aceeasi pagina html
1.C. Selectorul ID
<head>
<style>
#abc {proprietate: valoare;}
</style>
</head>
<body>
<tag id=abc></tag>
</body>
In exemplul de mai sus, in care am folosit css intern, ne vom concentra pe selectorul class #abc. (Aceeasi
Caracteristici ale slectorului id:

- numele unui selector de tip id poate fi orice text precedat de caracterul # (diez) cu 2 exceptii:
textul poate contine doar litere, cifre, - sau _
primul caracter de dupa . SA NU FIE cifra
- formateaza doar tag-urile care au atributul id=abc (valoarea atributului id este data de numele
selectorului fara caracterul #)
- orice tag html accepta atributul id
- un selector id poate fi folosit O SINGURA DATA intr-o pagina html
- selectorii de tip id se folosesc pentru elemente unice in pagina
2. Proprietati CSS
selector {proprietate: valoare;}
Proprietatile css pot fi impartite in urmatoarele categorii:
A. pentu formatare de text

B. pentru liste
C. pentru link-uri
D. fundal (background)
E. pozitionare
color: green;
Proprietatea color stabileste culoarea text-ului si poate lua valori:
- numele culorii in engleza (red, green etc.)

- un cod hexazecimal (#00ff00) este format din caracterul # urmat de 6 caractere intre 0-9 si intre
a-f. Fiecare culoare are un cod hexazecimal aferent. Cateva exemple simple de culori: #000000
(negru), #ffffff (alb), #ff0000 (rosu), #00ff00 (verde), #0000ff (albastru). Astfel primele 2 caractere
de dupa # reprezinta rosu, urmatoarele 2 verde iar ultimile albastru.
- rgba(0, 255, 0, 0.5) cu ajutorul acestei valori putem folosi culori cu transparenta. Astfel prima
valoare dintre paranteze (0-255) este valabila pentru rosu, a doua (0-255) pentru verde, a treia (0-
255) pentru albastru iar ultima valoare (0-1) reprezinta opacitatea.
font-size: 16px;
Stabileste dimensiunea font-ului in pixeli (px). 16px este dimensiunea default a browser-ului.
font-family: Verdana, Arial, sans serif;

Stabileste fontul cu care este scris textul. Prezenta mai multor familii de fonturi separate prin virgula
permite browser-ului sa foloseasca alt font - in cazul in care primul font nu este recunoscut, al doilea va fi
aplicat etc.
In cazul in care dorim sa folosim un font mai special (care nu este suportat de browser in mod normal)
putem folosi urmatoarea metoda:
@font-face {
font-family: fontul-meu;
src: url('fonts/kenyan_coffee_rg.eot'),
url('fonts/kenyan_coffee_rg.eot?#iefix'),
url('fonts/kenyan_coffee_rg.woff'),
url('fonts/kenyan_coffee_rg.ttf'),
url('fonts/kenyan_coffee_rg.svg#kenyan_coffeeregular');
}
font-family stabileste in acest caz denumirea fontului (poate fi un nume ales de noi) denumire pe care o
putem folosi ulterior cand vrem sa stabilim un font pentru anumite elemente.
src stabileste calea catre fisierul / fisierele de tip font. Observam ca sunt mai multe fisiere cu extensii
diferite; acest lucru este necesar pentru a ne asigura ca fontul va fi recunoscut de toate browser-ele.
O alta metoda prin care putem sa inseram un font special in pagina ar fi sa folosim google fonts. (se intra pe
site si se urmeaza pasii)
font-style: italic;
Cu ajutorul acestei proprietati putem face font-ul italic. Alte valori pe care le poate lua font-style sunt:
normal; (care este valoarea default) si oblique (valoare care este mai putin folosita si care nu difera foarte
mult de italic). In general aceasta proprietate se foloseste cu valoarea italic;
font-weight: bold;
Folosind proprietatea font-weight putem regla grosimea fontului. Alte valori in afara de bold ar fi: normal
(valoarea default), lighter (mai subtire), bolder (mai gros) dar si valori numerice 100, 200 900 cu ajutorul
carora putem stabili grosimea cu mai mare exactitate, astfel 100 foarte subtire iar 900 foarte gros .
Valoarea normal este echivalenta valorii de 400 iar bold 700.
text-align: left;
Aceasta proprietate ne permite alinierea pe orizontala a unui text. Valoarea default a proprietatii este left
(aliniaza textul pe stanga). Alte valori ar fi: right (aliniaza textul pe dreapta), center (aliniaza pe centru) si
justify (intinde textul pe toata latimea dandu-I un aspect de bloc de text prin modificarea spatiilor dintre
cuvinte)
text-indent: 20px;
Insereaza un spatiu intre marginea din stanga si primul rand de text al elementului selectat (alineat). Poate
lua orice valoare numerica in px.
text-decoration: none;
Folosind alte valori precum underline, overline sau line-through, aceasta proprietate ne permite decorarea
textului (underline text subliniat, overline text supraliniat, line-through text taiat cu o linie orizontala).
Valoarea none, care este valoarea default in majoritatea cazurilor, ne poate ajuta in cazul link-urilor
(elemente care sunt subliniate default) atunci cand nu dorim ca ele sa mai fie subliniate. O ultima valoare
(mai putin utilizata) este blink cu ajutorul careia putem avea un text care sa 'clipeasca'. Aceasta valoare este
suportata doar in Opera si Firefox.
text-transform: lowercase;
Valoarea lowercase a acestei proprietati ne permite transformarea unui text scris cu majuscule intr-unul
scris cu litere mici. Folosind valoarea uppercase putem realiza efectul invers si valoarea capitalize
transforma in majuscula prima litera a fiecarui cuvant.
line-height: 30px;
Proprietatea line-height stabileste inaltimea unui rand (in px). Modificand valoarea observam apropierea
sau indepartarea randurilor intre ele.
word-spacing: 20px;
Stabileste distanta dintre cuvinte (in px).
letter-spacing: 10px;
Stabileste distanta dintre litere (in px).
2.B. Proprietati CSS pentru formatarea listelor
list-style-type
Folosind aceasta proprietate putem modifica simbolurile / caracterele din fata elementelor de lista. Valorile
acceptate: disc, circle, square, decimal (1, 2, 3), lower-alpha (a, b, c), upper-alpha (A, B, C), lower-roman (i,
ii, iii), upper-roman (I, II, III). Aceste valori acopera atat simbolurile / caracterele pentru listele neordonate
cat si pentru cele ordonate. In consecinta, putem concluziona ca orice tip de lista am folosi putem ajunge la
acelasi rezultat. Alte valori notabile: none (foarte utila atunci cand avem meniuri de butoane si nu dorim
caractere sau simboluri in fata elementelor de lista), decimal-leading-zero (01, 02, 03) dar si altele (hebrew,
lower-greek, upper-greek)
list-style-image: url('imagine.jpg');
In cazul in care dorim o imagine in loc de un caracter sau un simbol vom folosi list-style-image. Intre
paranteze si ghilimele (' ' sau ) se trece calea catre imaginea dorita.
2.C. CSS pentru formatarea link-uri
In acest caz nu vom vorbi despre selectori mai degraba decat despre proprietati. Astfel:
a:link {proprietate: valoare;} - formateaza link-urile nevizitate

a:visited {proprietate: valoare;} - formateaza link-urile vizitate
a:hover {proprietate: valoare;} - formateaza link-urile atunci cand trecem cu mouse-ul peste ele in browser
(mouseover)
a:active {proprietate: valoare;} - formateaza link-urile in momentul click-ului pe ele
Cu ajutorul acestor selectori (care se numesc pseudo-clase) putem formata link-urile in functie de starea lor.
Proprietatile dintre acolade sunt de cele mai multe ori proprietati pentru formatarea textului.
Selectorii dinexemplul de mai sus vor formata toate link-urile din pagina (pentru ca a este un selector direct)
ceea ce nu este intotdeauna ceva de dorit. In consecinta avem urmatoarea sintaxa:
a.sus:link {proprietate: valoare;}

a.sus:visited {proprietate: valoare;}
a.sus:hover {proprietate: valoare;}
a.sus:active {proprietate: valoare;}
In acest caz vor fi formatate doar tag-urile <a href= class=sus>link</a> astfel putem controla ce link-uri
vrem sa formatam. (in general link-urile din meniul de butoane sunt formatate diferit fata de cele care se
gasesc in corpul site-ului).
Este indicat sa folosim toate cele 4 pseudo-clase pentru a nu-i permite browser-ului sa aplice formatarea
default.
2.D. Proprietati CSS pentru fundal (background)
background-color: #ff00ff;
Stabileste culoarea de fundal a elementului. La fel ca in cazul proprietatii color si aici avem optiunea de a
scrie culoarea ca rgba, cod hexa sau denumirea culorii in engleza.
background-image: url('imagine.png');
Cu ajutorul acestei proprietati putem insera o imagine pe fundal. In cazul in care imaginea este mai mica
decat suprafata elementului, imaginea se va repeta pe toata suprafata disponibila. Daca imaginea este mai
mare decat suprafata elementului, atunci va fi vizibila doar sectiunea de imagine care incape in element.
background-repeat: no-repeat;
Folosind background-repeat stabilim cum sau daca imaginea de fundal se repeta. Astfel valoarea no-repeat
nu permite repetarea imaginii indiferent de dimensiunea pe care o are aceasta. Repeat-x asigura repetarea
imaginii doar pe orizontala iar repeat-y doar pe verticala.
background-position: left top;

Pozitioneaza imaginea de fundal. Observam ca aceasta proprietate are 2 valori separate prin spatiu: o
valoare pentru orizontala si una pentru verticala. Valorile posibile pentru orizontala sunt left, right sau
center iar pentru verticala top, bottom sau center. Combinand aceste valori, avem un control destul de bun
asupra pozitionarii imaginii pe fundal.
background: #ff0000 url('imagine.gif') no-repeat center top;

Proprietatea background poate concatena toate valorile discutate anterior. Dupa cum observam in exemplul
de mai sus, prima valoare este pentru background-color, a doua pentru background-image, a treia pentru
background-repeat si ultimile 2 pentru background-position. Nu este obligatoriu sa se foloseasca toate
valorile. De asemenea ordinea de scriere nu este obligatorie
Folosind background putem sa cream chiar si un gradient. Astfel pentru un gradient liniar vom folosi:
background: -webkit-linear-gradient(left, #ff0000 0%, #00ff00 100%);

background: -moz-linear-gradient(left, #ff0000 0%, #00ff00 100%);
background: -o-linear-gradient(left, #ff0000 0%, #00ff00 100%);
background: -ms-linear-gradient(left, #ff0000 0%, #00ff00 100%); *
* pentru versiunile de la ie 10 in sus
Inainte sa analizam fiecare componenta a valorii trebuie mentionat faptul ca ea este interpretata ca o
imagine adica o putem folosi in locul unui url('imagine.png') sau ca valoare pentru proprietatea
background-image.
Cum browser-ele nu suporta, inca, in totalitate aceasta valoare pentru background se vor folosi prefixe
pentru fiecare browser in parte:
-webkit- pentru google chrome si safari
-moz- pentru mozilla firefox
-o- pentru opera
-ms- pentru internet explorer (incepand cu versiunea 10)
Pana cand browser-ele vor suporta complet aceasta valoare si nu va mai fi nevoie de prefix, va trebui sa
scriem toate cele 4 randuri pentru a ne asigura ca gradientul va fi vizibil in toate browser-ele.
linear-gradient reprezinta tipul de gradient si ar avea ca alternativa radial-gradient (gradient circular

tranzitia culorii se va face dinspre interior catre exterior)
Intre paranteze avem urmatoarele componente: pozitia din care porneste gradientul si apoi 2 sau mai multe
puncte de inflexiune a culorii.
Pozitia (in cazul nostru 'left' va genera un gradient de la stanga la dreapta) poate fi definita folosind valorile
pe care le-am intalnit la background-position.
Punctele de schimbare a culorii sunt definite printr-o culoare si un procent separate printr-un spatiu.
Procentul se refera la punctul in care se va aplica culoarea definita anterior. Astfel, 0% inseamna culoarea cu
care incepe gradientul iar 100% culoarea cu care se termina gradientul. In exemplul de mai sus am folosit
doar 2 procente (pentru inceput si sfarsit) dar putem folosi mai multe procente in cazul in care vrem sa
modificam culoarea si in alt(e) punct(e). Exemplu:
background: -webkit-linear-gradient(top, green 0%, black 50%, green 100%);
Atentie folosirea spatiilor in cadrul acestei valori este permisa doar in cadrul parantezei!
2.E. Proprietati CSS pentru pozitionare
In css pozitionarea se realizeaza cu ajutorul div-urilor. Tag-ul <div></div> nu permite pozitionarea altor
elemente pe acelasi rand. Ele vor putea fi formatate si pozitionate in pagina folosind urmatoarele
proprietati.
width: 200px;
Stabileste latimea in px. In cazul in care nu se seteaza o valoare pentru width, div-ul se va intinde automat
pe toata latimea pe care o are la dispozitie.
height: 200px;
Stabileste inaltimea in px. In cazul in care nu se seteaza o valoare pentru height, atunci el se va intinde in
functie de continutul pe care il are.
border: 2px solid red;

Stabileste linia de contur. Prima valoare este pentru grosimea liniei, a doua valoare reprezinta tipul de linie
iar ultima valoare este culoarea liniei. Atunci cand definim un border este indicat sa folosim toate cele 3
valori. In cazul in care nu dorim sa avem acelasi contur pe toate laturile, putem folosi:
border-top: 1px dotted #00ffff;
border-bottom: 3px double #00ff00;
border-left: 5px dashed blue;
border-right: 4px solid yellow;
Tipuri de linii: solid linie continua, dotted linie punctata, dashed linie intrerupta, groove, ridge, inset si
outset sunt linii de contur mai speciale (utilizeaza doua nunate ale culorii astfel incat sa aiba un aspect
reliefat)
padding: 10px;
Padding reprezinta distanta intre continutul elementului (div-ului) si conturul acestuia. Folosind o singura
valoare vom putea seta distanta fata de contur in toate directiile (sus, jos, stanga, dreapta). Exista, totusi, si
alte modalitati pentru a seta padding:
padding-top: 100px;
padding-left: 20px;
padding-right: 10px;
padding-bottom: 30px;
Utilizam aceste proprietati cand dorim sa setam padding doar intr-o singura parte.
padding: 20px 40px;

In acest caz prima valoare stabileste padding sus si jos iar a doua padding dreapta si stanga.
padding: 20px 10px 30px 60px;
Daca dorim sa setam padding diferit pentru fiecare parte folosim proprietatea padding cu 4 valori. Astfel:
prima valoare este pentru sus, a doua pentru dreapta, a treia jos si a patra pentru stanga.
Padding poate lua valoarea 0px dar nu si valori negative;
margin: 20px;
Aceasta proprietate stabileste distanta dintre elementul selectat si elementele vecine. Folosind o singura
valoare putem seta aceeasi distanta in toate partile (sus, jos, stanga si dreapta). In cazul in care dorim sa
stabilim distanta pentru o singura parte putem folosi proprietatile:
margin-top: 100px;
margin-bottom: 50px;
margin-left: 40px;
margin-right: 20px;
margin: 20px 30px;

Similar cu padding, cele doua valori reprezinta: prima valoare sus si jos iar a doua dreapta stanga.
margin: 50px 0px 10px 14px;

Daca dorim sa setam margin diferit pentru fiecare parte folosim proprietatea margin cu 4 valori. Astfel:
prima valoare este pentru sus, a doua pentru dreapta, a treia jos si a patra pentru stanga.
margin: auto;
Valoarea auto centreaza in plan orizontal elementul pe care a fost aplicata proprietatea;
Suprafata totala a unui element este data de suma tuturor proprietatilor de mai sus (width, height, padding,
border si margin).
Suprafata ocupata pe orizontala = width + padding-left + padding-right + border-left + border-right +

margin-left + margin-right *
Suprafata ocupata pe verticala = height + padding-top + padding-bottom + border- top + border- bottom +
margin- top + margin- bottom *
* chiar daca, in browser, din punct de vedere vizual elementul este definit pana la border
Exemplu. Avem un div definit prin urmatoarele proprietati:

div {
width: 100px;
height: 100px;
padding-left: 50px;
border: 1px solid black;
}
Suprafata pe care acest div o ocupa pe vertical este de 102px; (padding-left nu influenteaza inaltimea iar
valoarea de 1px de la border se va calcula de 2 ori pentru ca exista linie de contur si sus si jos)
float
Cu ajutorul acestei proprietati putem pozitiona div-urile unul langa altul pe orizontala. (! toate div-urile
implicate trebuie sa aiba float) Fara proprietatea float ele sunt pozitionate, nativ, unul sub altul. Valorile
posibile pentru float sunt left si right. In cazul in care toate au float: left, vor fi pozitionate in ordinea
inserarii (in codul html) incepand cu partea stanga a elementului in care stau. Similar pentru float: right cu
mentiunea ca vor fi ordonate incepand cu partea dreapta.
Exemplu. In cazul de mai jos avem 3 div-uri care au width, height si background. Observam ca ele sunt
pozitionate pe vertical (nativ).
In continuare vom aplica proprietatea float: left pentru toate div-urile si vom obtine o ordonare orizontala:
In cazul in care am fi folosit float right div-urile ar fi fost pozitionate incepand din partea dreapta (elementul
rosu ar fi in dreapta)
clear: both;
Proprieatatea clear ignora float-ul elementului anterior. Valorile acceptate sunt left, right si both. Valoarea
cea mai des intalnita si mai simplu de utilizat este both. Considerand cazul prezentat mai sus, daca am dori
ca div-ul al trei-lea (cel albastru) sa treaca pe randul urmator si sa nu mai fie in float fata de celelalte 2, ii
vom aplica clear:both
Daca vom aplica clear: both pe al doilea div (cel negru) vom obtine:
Observam faptul ca cel de al trei-lea div este in continuare in float fata de al doilea
position
Proprietatea position poate lua valorile relative sau absolute. Folosind aceasta proprietate alaturi de
proprietatile top, left, right sau bottom putem pozitiona cu o mai mare precizie si usurinta elementul
selectat .
position: relative;
- nu modifica pozitia initiala a elementelor (ex: in cazul in care elementul avea float: right isi va pastra
pozitia si dupa aplicarea proprietatii position cu valoarea relative)
- cu ajutorul proprietatilor top, right, left sau bottom deplaseaza elementul fata de pozitia lui initiala
(ex: un element cu position: relative si top: 10px va fi deplasat fata de sus cu 10 pixeli)
- elementele deplasate cu position: relative isi pastreaza 'rezervat' locul ocupat initial in pagina si nu
afecteaza pozitionarea celorlalte elemente
Exemplu:
In imaginea alaturata observam ca elementele
nu au fost deplasate de la pozitia lor initiala
chiar daca au aplicata proprietatea position:
relative;
In urmatorul pas am aplicat proprietatile top: 150px; si left:

150px; pentru div-ul rosu. Observam ca spatiul ocupat initial de
div-ul rosu ramane 'rezervat' si de asemenea faptul ca a fost
deplasat fata de pozitia lui initiala. Mai jos puteti vedea codul
folosit pentru a realiza acest exemplu.
<html>
<head>
<title></title>

<style>
#a{
width: 100px;
height: 100px;
background: black;
position: relative;
}
#b {
width: 100px;
height: 100px;
background: red;
position: relative;
left: 150px;
top: 150px;
}
#c {
width: 100px;
height: 100px;
background: blue;
position: relative;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>
position: absolute;
- modifica pozitia initiala a elementelor (ele vor fi repozitionate in coltul din stanga sus al display-ului
/ ferestrei browser-ului)
- cu ajutorul proprietatilor top, right, left sau bottom deplaseaza elementul fata de display /
fereastra browser-ului (exceptie in cazul in care este continut intr-un alt element care are position:
relative; sau position: absolute; atunci el se va deplasa fata de laturile acestuia)
- elementele care au position: absolute; nu mai ocupa loc in pagina (iese din ierarhia html va fi
pozitionat peste celalte elemente)
In exemplul din stanga avem 3 div-uri pozitionate in

mod default unul sub altul. (este pozitia lor inainte de
position: absolute;)
Dupa ce aplicam position: absolute pe fiecare dintre div-uri observam ca ele se pozitioneaza in acelasi
punct, suprapunandu-se:
In continuare putem folosi proprietatile top, left, right

sau bottom ca sa pozitionam div-urile fata de fereastra
browser-ului
In urmatorul pas pentru primul div am adaugat top: 0px; left: 0px; , cel de al doilea right: 20px; top: 40px;
iar ultimul bottom: 0px; right: 30px; . Observam ca fiecare div se va pozitiona fata de fereastra browser-ului:
z-index stabileste ordinea de suprapunere in cazul in care elementele au fost suprapuse folosind position.
Aceasta proprietate ia vaolri adimensionale atat negative cat si pozitive. Un element cu z-index: 4 va fi
suprapus peste un alt element cu z-index: 2 (cu cat valoarea lui z-index este mai mare cu atat elementul este
mai in fata)
overflow este proprietatea cu ajutorul careia controlam afisarea continutului atunci cand acesta depaseste
suprafata elementului de care apartine. Valorile posibile sunt: visible (default), hidden si auto.

overflow: visible; este valoarea default. In acest caz, cand continutul depaseste suprafata elementului, el va
fi in continuare afisat.
overflow: hidden; Continutul care depaseste suprafata elementului este ascuns (nu mai este afisat).
overflow: auto; In acest caz browser-ul adauga o bara de scroll in cazul in care continutul depaseste
suprafata elementului de care apartine.
transition (CSS 3) aceasta proprietate asigura trecerea intre starea default a unui element si modificarile
care apar la hover. Trecerea se face treptat (intr-o perioada de timp) si nu instant. Proprietatea transition se
defineste pentru selector si nu pentru selector:hover.
transition: width 3s; prima valoare reprezinta proprietatea pe care dorim sa aplicam tranzitia (se poate
aplica pe orice proprietate css) si a 2a reprezinta perioada de timp in care se realizeaza tranzitia (masurata
in secunde si poate fi si subunitara).
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>

<style>
#a {
width: 100px;
height: 100px;
background: black;
transition: width 1s;
}
#a:hover {
width: 200px;
}
</style>
</head>
<body>
<div id="a"></div>
</body>
</html>
Daca previzualizam exemplul de mai sus in browser observam ca la trecere cu mouse-ul peste div latimea se
mareste timp de o secunda pana ajunge la 200px.
In cazul in care dorim sa aplicam tranzitia pe mai multe proprietati vom folosi valoarea all.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>

<style>
#a {
width: 100px;
height: 100px;
background: black;
transition: all 1s;
}
#a:hover {
width: 200px;
background: red;
}
</style>
</head>
<body>
<div id="a"></div>
</body>
</html>
Astfel, folosind valoarea all, observam ca se aplica tranzitia la toate modificarile ce apar la hover (si la latime
si la culoarea de fundal)
Optional putem adauga si o a treia valoare cu ajutorul careia putem stabili daca viteza de tranzitie este una
accelerata (ease-in) sau incetinita (ease-out)

Webdesign Introductory Course

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Webdesign Introductory Course

Încărcat de

Drepturi de autor:

Formate disponibile

Suport curs Web design nivel 1

Partea 1 - Ce inseamna HTML?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Pentru a personaliza tag-urile se folosesc atribute.

<tag atribut=valoare> </tag>

<tag atribut=valoare atribut=valoare> </tag>

Exista cateva atribute aplicabile oricarui tag:

3. Tag-uri pentru formatarea continutului html

<h1>Acesta este un titlu mare</h1>

Tag-ul <br />

Secventa de mai sus va duce la urmatorul rezultat in browser :

Rezultatul acestei comenzi va fi :

Ceva tare ciudat.

Alte caractere speciale des utilizate ar fi :

In HTML exista doua tipuri de liste: liste neordonate si liste ordonate

Exemplul de mai sus va fi afisat in browser astfel:

primul element de lista

Din sintaxa observam urmatoarele:

o primul element de lista

primul element de lista

<li type=circle>primul element de lista</li>

o primul element de lista

1. primul element de lista

Pentru tag-ul <ol>

a. primul element de lista

i. primul element de lista

si intr-un mod similar type=I (I, II, III)

<ol type=1 start=3>

<ol type=a start=3>

Care vor fi afisate in browser astfel:

3. primul element de lista

c. primul element de lista

Pentru tag-ul <li>

1. primul element de lista

Rezultatul in browser fiind:

2. primul element de lista

pentru logo-uri sau imagini cu mai putine detalii

Caile in html pot fi incadrate in 2 categorii: absolute si relative.

Caile absolute pot fi si ele la randul lor de 2 feluri: locale si online.

Alte atribute pentru tag-ul <img />:

Pentru a insera link-uri catre alte pagini html folosim tag-ul

Link-urile nu sunt folosite exclusiv cu text.

alte tag-uri. Astfel o structura reala a unui tabel va arata asa:

Atribute pentru <table>

Atribute pentru tag-ul <td>

<table width=300 height=300 border=1>

<td rowspan=2> celula 1</td>

Codul va arata asa:

<table width=300 height=300 border=1>

Iar rezultatul final

Elemente de formular inserate cu tag-ul <input />

<input type=text name=nume />

<input type=password name=nume />

<input type=date name=nume />

<input type=email name=nume />

<input type=checkbox name=nume />

<input type=radio name=numele grupului value=nume />

fie unica pentru fiecare element de formular.

<input type=submit name=nume value=text afisat pe buton />

<input type=reset name=nume value=text afisat pe buton />

<input type="file" name="nume" />

Elemente de formular inserate cu tag-ul <select></select>