Suport curs Web design nivel 1

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

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.

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">

HTML 1991

HTML+ 1993

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 1.0 2000

HTML5

2012

XHTML5 2013




<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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> Acest tag transmite browser-ului ca documentul respectiv este de fapt un document HTML , dand astfelindicatii 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 parteasuperioara 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 trebuieconsiderat ca titlu al paginii s-a incheiat. Majoritatea tag-urilor HTML folosesc tag-uri corespondente deinchidere.

</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 introduceinformatiile 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 trebuiecitite 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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 miciAstfel, 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:

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

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]




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 specialeCaracterele 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”>� <li>primul element de lista</li>� <li>al doilea element de lista</li>� <li>al treilea element de lista</li>

</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”>� <li>primul element de lista</li>� <li>al doilea element de lista</li>� <li>al treilea element de lista</li></ul>

Va reda:

§ primul element de lista

§ al doilea element de lista

§ al treilea 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

· al doilea element de lista

§ al treilea 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>� <li>primul element de lista</li>� <li>al doilea element de lista</li>� <li>al treilea element de lista</li>

</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”>� <li> primul element de lista</li>


</ol>

<ol type=”a” start=”3”>� <li> primul element de lista</li>


</ol>

Care vor fi afisate in browser astfel:


4. al doliea element de lista

5. al treilea element de lista

c. primul element de listad. al doilea element de listae. 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:

1. primul element de listaB.� al doilea element de listaiii.� al treilea 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 iii.� al treilea 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).

targetPe 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.

alignAtributul align poate lua valorile: left, right, center sau justify. Cu ajutorul lui putem alinia, pe orizontala, continutul din interiorul celulei.

valignAtributul valign puate lua valorile: top, bottom, middle. Cu ajutorul lui putem alinia, pe verticala, continutul din interiorul celulei

rowspanAcest 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.

colspanAcest 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.

titleSi 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:

<table width=”300” height=”300” border=”1”> <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>

Codul va arata asa:

<table width=”300” height=”300” border=”1”> <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>

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




<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 textvalue=”un text oarecare” afiseaza un text predefinit in campul de textmaxlength=”5” stabileste numarul maxim de caractere ce pot fi introduceplaceholder=”un text oarecare” afiseaza un text predefinit in campul de text care dispare in momentul in care utilizatorul incepe sa scrieautofocus=”autofocus” selecteaza campul de text imediat dupa incarcarea paginiirequired=”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 *)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.




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.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:autofocus=”autofocus” selecteaza campul de text imediat dupa incarcarea paginiirequired=”required” marcheza ca necesar un element de formular

<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 “@”.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 textvalue=”un text oarecare” afiseaza un text predefinit in campul de textmaxlength=”5” stabileste numarul maxim de caractere ce pot fi introduceplaceholder=”un text oarecare” afiseaza un text predefinit in campul de text care dispare in momentul in care utilizatorul incepe sa scrieautofocus=”autofocus” selecteaza campul de text imediat dupa incarcarea paginiirequired=”required” marcheza ca necesar un element de formular

<input type=”checkbox” name=”nume” />Creeaza un buton de tip checkbox. Particularitatea butoanelor de tip checkbox este ca putem selecta mai multe variante.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:checked=”checked” stabileste butonul / butoanele preselectat /preselectateautofocus=”autofocus” selecteaza campul de text imediat dupa incarcarea paginiirequired=”required” marcheza ca necesar un element de formular

<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




fie unica pentru fiecare element de formular.

Atribute optionale:checked=”checked” stabileste butonului preselectatautofocus=”autofocus” selecteaza campul de text imediat dupa incarcarea paginiirequired=”required” marcheza ca necesar un element de formular

<input type=”submit” name=”nume” value=”text afisat pe buton” />Creeaza un buton de submit care preia datele din formular si le trimite catre phpautofocus=”autofocus” selecteaza campul de text imediat dupa incarcarea paginiirequired=”required” marcheza ca necesar un element de formular

<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 phpautofocus=”autofocus” selecteaza campul de text imediat dupa incarcarea paginiirequired=”required” marcheza ca necesar un element de formular

<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> <option value=”nume”>optiunea 1</option> <option value=”nume”>optiunea 1</option></select>Creeaza un meniu de tip drop-down din care putem selecta o singura optiuneValoarea atributului value este folosita in php pentru a identifica elementul de formular si deci ea trebuie sa fie unica pentru fiecare element de formular.

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”autofocus=”autofocus” selecteaza campul de text imediat dupa incarcarea paginiirequired=”required” marcheza ca necesar un element de formular

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.




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:maxlength=”5” stabileste numarul maxim de caractere ce pot fi introduceplaceholder=”un text oarecare” afiseaza un text predefinit in campul de text care dispare in momentul in care utilizatorul incepe sa scrieautofocus=”autofocus” selecteaza campul de text imediat dupa incarcarea paginiirequired=”required” marcheza ca necesar un element de formular

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-uluiTag-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 sintaxa va fi valabila si in cazul css-ului extern)

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 sintaxa va fi valabila si in cazul css-ului extern)

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-typeFolosind 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 nevizitatea:visited {proprietate: valoare;}� � - formateaza link-urile vizitatea: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)

floatCu 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

positionProprietatea 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# { awidth: ;100pxheight: ;100pxbackground: ;blackposition: ;relative}

# {bwidth: ;100pxheight: ; 100pxbackground: ;redposition: ;relativeleft: ;150pxtop: ;150px}

# { cwidth: ;100pxheight: ;100pxbackground: ;blueposition: ;relative}

> </style </head> <body> <div id= ></div>"a"<div id= ></div>"b"<div id= ></div>"c"

</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)




Dupa ce aplicam position: absolute pe fiecare dintre div-uri observam ca ele se pozitioneaza in acelasi

punct, suprapunandu-se:

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:

In exemplul din stanga avem 3 div-uri pozitionate in

mod default unul sub altul. (este pozitia lor inainte de

position: absolute;)

In continuare putem folosi proprietatile top, left, right

sau bottom ca sa pozitionam div-urile 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= lang= >"en" "en" <head> <title></title>�

><style# { a width: ;100pxheight: ;100pxbackground: ;blacktransition: ;width s1}

# {a:hover width: ;�200px}

> </style </head> <body> <div id= ></div>"a"

</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= lang= >"en" "en" <head> <title></title>�

><style# { a width: ;100pxheight: ;100pxbackground: ;blacktransition: ;all s1}

# {a:hover width: ;200pxbackground: ;�red}

> </style </head> <body> <div id= ></div>"a"

</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)

Date post:	28-Jan-2017
Category:	Documents
Upload:	duongliem
View:	238 times
Download:	7 times

Suport curs Web design nivel 1

Documents