MINISTERUL EDUCAIEI AL REPUBLICII MOLDOVA

Facultatea Calculatoare Informatica si Microelectronica

CATEDRA: ATI

RAPORTUL
privind efectuarea practicii
Tema: Realizarea unui Sablon Web cu design Adaptabil

Studentul: Plamadeala Dumitru

Gr. TI-124
Conductor: Catruc Mariana

Chisinau,2014
1

Cuprins
Sarcina Lucrarii....................................................................................3
Capitolul 1(Introducere in limbajul HTML)
1.1 Introducere n limbajul HTML ..........4
1.2. Structura unui document HTML ..............5
1.2.1. Seciunea HEAD ...............6
1.2.2. Seciunea BODY ...............7
Capitolul 2( Continutul documentului HTML)
2.1. Etichete (tag-uri)...............9
2.2.Atribute ....................10
2.3 Formatarea textului ..............10
2.4 Sistemul de definire a culorilor ............................................12
2.5 Inserarea unei imagini ......................13
2.6. Legturi - Link-urile ........................................14
2.7. Liste .................................15
2.8 Tabele .......................15
2.9 Formulare..........................................17
2.9.1 Trimiterea datelor dintr-un formular prin e-mail ..........18
2.10 Elaborarea documentului HTML............................................18
Capitolul 3(Cascading Style Sheets )
3.1 Introducere ...................................................................................19
3.2 CSS - Fisier .css extern.................................................................19
3.3 Configurarea fonturilor.................................................................20
3.4 Configurari pentru culori si fundal...............................................20
3.5 Controale de pozitionare...............................................................21
3.6 Configurari pentru vizibilitate si mouse........................................22
3.7 Realizarea documentului (Style.css)..........................................24
Capitolul 4 (Design-ul adaptabil)
4.1 realizarea designului adaptabil..................................................25
Concluzii.............................................................................................26
Bibliografie ......................................................................................26
Anexa A(documentul INDEX.HTML)............................................27
Anexa B (documentul STYLE.CSS)................................................28
Anexa C (fisierul MEDIA-QUERIES.CSS)....................................29
Anexa D screen-uri............................................................................30
2

Sarcina Practicii

Sa se realizeze un sablon web in limbajul HTML SI CSS;

Sa se studieze metodaele de creare a design-ului adaptabil si sa se implementeze in
sablonul dat;
Sablonul trebuie sa corespunda documentului PSD.

Capitolul 1.
1.1 Introducere n limbajul HTML
HTML (HyperText Markup Language) a fost dezvoltat iniial de Tim Berners-Lee n
anul 1989, ca urmare a necesitii de publicare a informaiilor la nivel global. Pe parcursul
anilor, limbajul a evoluat (HTML 3.0, HTML 3.2, HTML 4 i cel mai recent HTML 4.01),
fiecare versiune oferind noi faciliti.
Se remarc cteva trsturi cum ar fi:

independena de platform (modul de afiare al unui document este acelai, indiferent

de computerul pe care se realizeaz afiarea);

structurarea formatrii;
posibilitile hypertext (orice cuvnt, imagine sau alt element al documentului
vizualizat de utilizator poate face referin la un alt document, ceea ce uureaz
navigarea n cadrul aceluiai document sau ntre documente diferite).

HTML este un limbaj simplu, compus din coduri speciale (marcaje) care se insereaz ntrun text pentru a aduga informaii despre formatare. Este derivat din SGML (Standard
Generalized Markup Language), un sistem pentru definirea tipurilor de documente
structurate, destinat s reprezinte instane ale acestor tipuri de documente. La baza SGML i a
HTML se afl acelai principiu: descrierea coninutului unui document se face ntr-un fiier
text obinuit (ASCII). S-a urmrit ca aceste fiiere s fie editabile cu aplicaii software
nepretenioase (ex. NotePad, WordPad).
n cadrul unui document HTML, un marcaj (tag, n limba englez) va avea forma
<nume_marcaj>. Parantezele unghiulare sunt elementele care indic prezena unui marcaj;
numele marcajelor poate fi scris oricum, limbajul nefiind senzitiv la literele mari/mici (case
sensitive). Unele marcaje permit utilizarea unor atribute care se vor scrie n marcajul de
inceput:
<nume_marcaj optiune1=valoare1 optiune2=valoare2 ...>
................
</nume_marcaj>
Exista dou tipuri de marcaje:
- individuale (ex. <br>)
- perechi (ex. <p>...</p>) - de menionat c sfritul unui marcaj este indicat prin utilizarea
caracterului '/' n faa numelui de marcaj.
4

n funcie de modul de formatare a paginii, avem marcaje de tip:

- block: este afiat sub elementul anterior (ex. <p>);
- inline: este afiat dup elementul anterior (ex. <span>);
- table: este afiat sub forma unui tabel.
Marcajele perechi pot fi imbricate:
<nume_marcaj1>
<nume_marcaj2>
...............
</nume_marcaj2>
</nume_marcaj1>
Browserele vor ignora marcajele i opiunile pe care nu le recunosc.

1.2. Structura unui document HTML

Un document HTML 4 are urmtoarea structura:
o linie coninnd versiunea HTML;
seciunea HEAD, delimitat de marcajele <HEAD> </HEAD>;
seciunea BODY, delimitat de marcajele <BODY> </BODY> sau
<FRAMESET> </FRAMESET>
EXEMPLU:

<HTML>
<HEAD>
<TITLE>Prima mea pagina web</TITLE>
</HEAD>
<BODY>
text text text text text text text text
</BODY>
</HTML>

Un document HTML valid conine declaraia versiunii HTML utilizate. Declaraia se

face prin intermediul DTD (document type definition). Pe scurt, fiierul DTD conine
definiiile marcajelor din versiunea respectiv de HTML.
HTML 4.01 specifica 3 variante DTD :
HTML 4.01 Strict DTD include toate elementele i atributele care nu sunt "nvechite"
(elemente si atribute a cror utilizare nu este recomandat deoarece se dorete renunarea la
acestea pe viitor) sau care nu apar n documentele ce conin cadre.
5

HTML 4.01 Transitional DTD include Strict DTD plus elementele i atributele "nvechite".
HTML 4.01 Frameset DTD include Transitional DTD plus cadrele (frames).

1.2.1 Seciunea HEAD

Sectiunea Head cuprinde informaii care nu vor fi afiate n browser, cu excepia
marcajului <TITLE>. Marcajul <TITLE> este obligatoriu i poate apare doar in seciunea
HEAD. El va conine un titlu relevant pentru pagin, fiind deosebit de important pentru
motoarele de cutare.
Alte marcaje care apar n seciune HEAD:
<META> - poate conine cuvinte cheie, o descriere a paginii, numele autorului paginii,
frecvena (teoretic) cu care motoarele de cutare ar trebui s reindexeze pagina, etc.
Declaraiile META implic n general declararea unei proprieti i a valorii asociate acelei
proprieti.
<META name="nume" content="continut">
Declararea setului de caractere se face astfel:
<META http-equiv="Content-Type" content="text/HTML; charset=set_caractere">
Precizarea setului de caractere face posibil afiarea n browserul utilizatorului a caracterelor
specifice unor limbi precum romna, rusa, araba, etc.
<STYLE>- cascading STYLE sheets - stiluri pentru formatarea textului din documentul
HTML.
<STYLE type="text/css">...</STYLE>
<SCRIPT> - scripturi JavaScript sau VBScript
<SCRIPT language="JavaScript1.2" type="text/javascript" src="lib.js"></SCRIPT>
<BASE> - stabileste URL-ul de "baza" al documentului. Toate referintele (<a href=""></a>,
respectiv <img src="">) din documentul respectiv vor fi deschise relativ la marcajul <base>.
<HEAD>
<BASE href="http://www.xprim.ro/index.php" target="_top">
</HEAD>
<LINK> - stabilete o legtur cu un document extern, spre exemplu un fiier de definiii
CSS.
<LINK rel="STYLEsheet" href="stiluri.css" type="text/css">

EXEMPLU:
Seciunea HEAD a unui document HTML poate arat n felul urmtor:
<HEAD>

<TITLE>Titlul paginii</TITLE>
<META http-equiv="Content-Type" content="text/HTML;
charset=windows-1250">
<META name="author" content="Marinescu Ion">
<META name="copyright" content=" 2009 Marinescu Ion">
<META name="keywords" content="curs, HTML, tutorial">
<LINK rel="STYLEsheet" href="stiluri.css" type="text/css">
</HEAD>

1.2.2 Seciunea BODY

6

Aceasta sectiune este inclus ntre marcajele <BODY>...... </BODY>

<BODY [ BACKGROUND="adresa_imagine"] [
BGCOLOR="#rrggbb"|"culoare"] [ TEXT="#rrggbb"|"culoare"] [
LINK="#rrggbb"|"culoare"] [ VLINK="#rrggbb"|"culoare"] [
ALINK="#rrggbb"|"culoare"] [ LEFTMARGIN=marg_st] [
TOPMARGIN=marg_top]>
................
continut document
.................
</BODY>
Marcajul de sfrit (</BODY>) nu este obligatoriu.
n seciunea BODY se gsete informaia care va fi afiat n browser (text, imagini, etc.)
(<BODY>.... </BODY>).
LEFTMARGIN i TOPMARGIN sunt extensii Microsoft (nu funcioneaz dect n Internet
Explorer 3+).
LEFTMARGIN precizeaz, n pixeli, marginea stng a documentului (distana dintre
fereastra i coninutul documentului);
TOPMARGIN precizeaz, in pixeli, marginea de sus a documentului (distana dintre
fereastr i coninutul documentului).
Ca n orice limbaj de programare n HTML exist posibilitatea de a introduce comentarii,
folosind marcajul
<!-- .... textul comentariului -->

EXEMPLU :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/HTML4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Titlul paginii mele</TITLE>
<META http-equiv="Content-Type" content="text/HTML;
charset=windows-1250">
<META name="author" content="Marinescu Ion">
<META name="copyright" content=" 2009 Marinescu Ion">
<META name="keywords" content="curs, HTML, tutorial">
<LINK rel="STYLEsheet" href="stiluri.css" type="text/css">
</HEAD><BODY bgcolor="#999999" leftmargin=0 topmargin=0>
7

<!--Acest comentariu nu va fi afisat in browser -->

<p>text text text text text text text text text text </p>
<p>alt text alt text alt text alt text alt text </p>
</BODY>
</HTML>
n exemplul de mai sus a aprut un nou marcaj <p> (paragraf). Alturi de el trebuie
menionate marcajele <h1>, <h2>, <h3>, <h4>, <h5>, <h6> (HEADings - toate necesit
marcaj de nchidere) care sunt folosite n general pentru evidenierea titlurilor.

Pentru formatarea textului pot fi folosite i marcajele:

<b>...</b> - caractere ngroate;
<i>...</i> - caractere nclinate;
<u>...</u> - caractere subliniate;
<s>...</s> - caractere "tiate";
<pre>...</pre> - marcajul de informaie preformatat ;
conserv toata caracterele si spaierile de linii;
utilizeaz un font diferit (Courier);
^... - exponent;
_... - indice;
<br> - "rupe" textul, trecnd pe o linie nou - poate apare oriunde in text;
<hr> - traseaz o linie subire orizontal;
<font>...</font> ofer posibilitatea modificrii dimensiunii, culorii i a tipului de font utilizat;
<span> este un marcaj de tip "inline". Se folosete n general n interiorul marcajelor de tip
"block" (ex. <p>) n combinaie cu stilurile CSS, pentru a impune o formatare diferit de
restul coninutului din marcajul "block" respective;spre deosebire de <span>, marcajul <div>
este de tip "block". Se folosete n general pentru poziionare n cadrul documentului i
pentru specificarea unor proprieti CSS care s fie aplicate textului din interiorul lui<DIV
[ ALIGN="left|center|right"] STYLE="..">................................</DIV>

Capitolul 2.
2.1. Etichete (tag-uri)
Tag-urile nu sunt altceva dect nite marcaje sau etichete pe care limbajul HTML le
folosete alturi de texte pentru a ajuta browser-ul de Internet s afieze corect coninutul
paginii web.
Aceste tag-uri (etichete) pot fi de dou feluri:
- tag-uri pereche (un tag de nceput i unul de ncheiere). Exemple: <HTML> i </HTML>;
<TITLE> i </TITLE>; <HEAD> i </HEAD>;
- tag-uri singulare (nu au un tag de ncheiere) Exemple: <HR>, <BR>.
Tag-urile de baza pe care trebuie s le conin un document HTML:
<HTML> - cu acest tag ncepe orice document HTML. Prin folosirea acestui tag i spunem
browser-ului c este vorba de un fiier HTML pentru a l putea afia.
<HEAD> - ntre aceste tag-uri sunt trecute, pe lng titlul paginii, diverse informaii
folositoare pentru browser-ul de Internet;
</HEAD> - acesta este tag-ul de ncheiere al tag-ului <HEAD>;
<TITLE> - cu ajutorul acestei perechi de tag-uri se d un titlu paginii web. Astfel, textul scris
ntre aceste tag-uri va fi afiat n bara de titlu a documentului.
</TITLE> - este tag-ul de ncheiere al tag-ului <TITLE>. Arat sfritul titlului
documentului.
<BODY> - odat cu acest tag ncepe coninutul paginii web. Tot ce se scrie ntre tag-urile
<BODY> i </BODY> va fi afiat, de ctre browser, pe ecranul monitorului.
</BODY> - comunic browser-ului c s-a terminat de scris coninutul paginii. Tot ceea ce se
scrie dup acest tag nu va mai fi afiat.
</HTML> - este tag-ul de ncheiere al tag-ului <HTML>. Codul oricrui document se
termina cu acest tag.

2.2. Atribute
Atributele HTML furnizeaz informaii adiionale elementelor HTML. Tagurile
HTML pot avea atribute. Acestea sunt ntotdeauna definite n tagul de nceput al unui element
HTML.
Sunt de forma: nume="valoare".
EXEMPLU:
Acest exemplu aliniaz textul la centrul paginii web.
<h1 align = "center">Acesta e un text</h1>
EXEMPLU:
Acest exemplu aplic fundalului o culoare portocalie.
<BODY bgcolor = "orange">
Text Text </BODY>
Pentru o mai bun difereniere i evideniere etichetele (tag-urile) HTML sunt scrise
cu majuscule iar atributele asociate acestora sunt scrise cu litere mici. Valorile atributelor
trebuie s fie ntotdeauna ncadrate n ghilimele.
HTML nu este un limbaj case-sensitive, adic nu face distincia ntre literele mici i
cele mari (majuscule). Aceasta nseamn c indiferent cum scriem etichetele, cu litere mari
sau cu litere mici, ele vor fi corect interpretate de browser.
Daca sintaxa nu este respectat, browserul ignor pur i simplu tagul, la fel dac valoarea
unui atribut nu este una valid, ea va fi de asemenea ignorat.

2.3 Formatarea textului

Pentru alegerea caracteristicilor unui text, putem folosi tag-ul <FONT>. Acest tag
accept mai multe atribute (color, face, size) care ne vor ajuta n formatarea textelor. Atributul
COLOR se refer la culoarea textului ce va fi ncadrat de tag-urile <FONT> i </FONT>,
atributul FACE arat tipul fontului, iar atributul SIZE arat mrimea fontului.

EXEMPLU:

<FONT COLOR=CornflowerBlue>Proiect diploma</FONT>

va afia n cadrul browserului de Internet: Proiect diploma
<FONT COLOR=#6495ED>Proiect diploma</FONT>
va afia n cadrul browserului de Internet: Proiect diploma
<FONT COLOR=#FF0000>Proiect diploma</FONT>
va afia n cadrul browserului de Internet: Proiect diploma

10

La tipul fontului, la fel ca i la culori, este bine s se foloseasc un font care se afl pe
majoritatea calculatoarelor, pentru ca dac se folosete un font mai puin utilizat, muli
utilizatori nu vor putea vedea textele din cadrul paginilor prezentate cu acelai font. Cele mai
folosite fonturi pentru paginile web sunt urmtoarele:
Acest text a fost scris cu fontul "arial"
Acest text a fost scris cu fontul "times new roman"
Acest text a fost scris cu fontul "courier new"
Acest text a fost scris cu fontul "verdana"
<FONT COLOR=#000000 FACE=Arial>Acest text ...</FONT>
Pentru a schimba dimensiunea implicit a fontului, vom folosi una din valorile atributului
size. Acesta poate lua una din valorile 1,2,3,4,5,6,7 (1 pentru cea mai mic dimensiune i 7
pentru cea mai mare):
<FONT COLOR=#FFA500 FACE=Arial SIZE=7>Proiect diploma</FONT>
size 7: Proiect
size 6: Proiect
size 5: Proiect
size 4: Proiect
size 3: Proiect
size 2: Proiect
size 1: Proiect
Dac vrem ca textul nostru s fie scris cu caractere ngroate, folosim perechea de etichete
<B> i </B>.
<B>Text bold</B>
Text bold
Pentru ca textul s fie scris cu caractere italice, folosim perechea de etichete <I> i </I>.
<I>Text italic</I>
Text italic
Pentru ca textul s fie subliniat, folosim perechea de etichete <U> i </U>.
<U>Text subliniat</U>
Text subliniat
Dac vrem ca textul s fie afiat n centrul paginii putem folosi perechea de etichete
<CENTER> i </CENTER>.

EXEMPLU:
Avem urmtorul cod HTML:
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML.
</BODY>
</HTML>

Acest cod va avea ca rezultat:

Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML.
EXEMPLU:
11

Utilizarea etichetei <BR> in cadrul codului:

<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML.<BR>Exersez limbajul HTML.<BR>Stiu limbajul HTML.
</BODY>
</HTML>

Acest cod va avea ca rezultat:

Invat limbajul HTML.
Exersez limbajul HTML.
Stiu limbajul HTML.
Dac scriem un text ntre tag-urile <P> i </P>, atunci textul va fi ncadrat de cte un
rnd liber, la fel ca n exemplul de mai jos:
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML.<P>Exersez limbajul HTML.</P>Stiu limbajul HTML.
</BODY>
</HTML>

Vom obine urmtorul rezultat:

Invat limbajul HTML.
Exersez limbajul HTML.
Stiu limbajul HTML.

2.4. Sistemul de definire a culorilor

Sistemul general utilizat pentru definirea culorilor este RGB prin care sunt specificate
pentru fiecare culoare care sunt cantitile de rou (Red), verde (Green) i albastru (Blue) care
o compun.
n HTML orice culoare este desemnat printr-un cod de 6 cifre hexazecimale, dintre care
primele dou reprezint cantitatea de rou, cele dou din mijloc, cantitatea de verde, iar
ultimele dou cantitatea de albastru.
Sistemul hexazecimal este un sistem de numeraie care folosete 16 cifre, existnd
urmtoarea coresponden ntre cifrele hexazecimale i cele zecimale:
0

10

11

12

13

14

15

De exemplu, #FF0000 este codul pentru rou. Semnificaia acestui cod este urmtoarea:
cantitatea de rou este maxim, iar cantitile de verde i albastru sunt egale cu 0. Codul
pentru verde pur este #00FF00 iar pentru albastru este #0000FF.
12

Deoarece uneori definirea culorii prin intermediul codului su hexazecimal este incomod,
standardul HTML 3.2 stabilete un set de 16 culori standard.
n acest caz, pentru valoarea atributului de culoare se utilizeaz direct numele culorii, ca n
exemplul de mai jos, n care se seteaz culoarea magenta pentru linkurile vizitate:
<BODY vlink="magenta">
Numele i codul culorilor stabilite n standardul HTML3.2 sunt urmtoarele:
Nume culoare

Cod hexazecimal

Nume culoare

Cod hexazecimal

Aqua

#00FFFF

Navy

#000080

Black

#000000

Olive

#808000

Blue

#0000FF

Purple

#800080

Fuchsia

#FF00FF

Red

#FF0000

Gray

#808080

Silver

#C0C0C0

Green

#008000

Teal

#008080

Lime

#00FF00

Yellow

#FFFF00

Maroon

#800000

White

#FFFFFF

Mai trebuie menionat faptul c se pot utiliza, pe lng culori, 100 de nuane de gri (gray). Ele
sunt numerotate de la 1 la 100, "gray 1" fiind nuana cea mai nchis, iar "gray 100" cea mai
deschis.

2.5 Inserarea unei imagini

Pentru a insera o imagine n cadrul unei pagini (o imagine in-line), se utilizeaz
eticheta <IMG> (de la image). Eticheta <IMG> nu este o etichet container, prin urmare nu
necesit o etichet corespunztoare de nchidere.
Pentru a putea identifica imaginea care va fi inserat, se utilizeaz atributul src (source) al
etichetei <IMG>. Atributul src i comunica browserului numele i locaia imaginii care
urmeaz s fie inserat. Valoarea acestui atribut este adresa URL a imaginii respective.
Dac imaginea se afl n acelai director cu fiierul HTML care face referire la imagine,
atunci adresa URL a imaginii este formata numai din numele fiierului, inclusiv extensia.
<IMG src="imagine.extensie">
Dac imaginea se afl ntr-un alt director, URL-ul imaginii trebuie specificat fie prin
adresarea absolut fie, preferabil, prin cea relativ.
EXEMPLU:
<HTML>
<HEAD>
<TITLE>Inserare imagine</TITLE>
</HEAD>
<BODY>
<H1 align="center"> Atributele border si alt </H1><HR>
Acesta este un...<BR>
<IMG src="../Imagini/rose.gif" alt="trandafir" border="5">
</BODY>
</HTML>

13

Atributele etichetei <IMG>:

- border: plaseaz un chenar n jurul imaginii. Valoarea atributului border este numrul de
pixeli care reprezint grosimea chenarului din jurul imaginii. Absena atributului sau setarea
la valoarea "0" face ca acest chenar s nu fie prezent.
- alt: permite afiarea unui text explicativ n spaiul n care va fi afiat imaginea n pagin.
Prin urmare, dac dintr-un motiv oarecare, imaginea nu se ncarc n pagin, se ncarc mai
greu, sau este vizualizat cu un browser care nu suport grafica, n zona rezervat imaginii va
fi afiat textul specificat ca valoare a atributului alt. De asemenea, textul specificat ca valoare
pentru atributul alt va fi afiat i n cadrul unei mici ferestre care se deschide n momentul
cnd cursorul mouse-ului este meninut deasupra imaginii.

2.6 Legturile (referinele)

Navigarea n cadrul site-urilor este posibil cu ajutorul link-urilor (legturilor).
Printr-o legtur ntr-un document HTML nelegem marcajul locului de unde se poate
efectua trecerea (cuplarea, conectarea) la un alt document sau la o nou locaie din
documentul curent. Un loc marcat mai este denumit ancorare.
Marcajele pot fi de dou tipuri:
1)
legturi ctre alte locaii: acestea se vor caracteriza prin textul legturii (vizibil n
documentul afiat pe ecran) i prin adresa la care se poate efectua un salt; textul legturii va
aprea pe ecran subliniat, ntr-o culoare diferit de cea a textului adiacent; adresa int a
legturii apare (dac nu s-a indicat alt text) pe linia de stare a ferestrei browserului atunci
cnd pointerul mouse-ului este pe textul legturii;
2)
definiri de nume care au doar rolul de a introduce inte pentru legturi; nu sunt
difereniate n documentul afiat pe ecran.
Legtura ctre o alt pagin - Link-urile
Marcajul HTML principal pentru introducerea referinelor ctre alte pagini HTML sau
ctre elemente din cadrul aceleiai pagini web este <a>, a provenind de la anchor. El trebuie
s conin atribute, n caz contrar neafectnd formatarea documentului.
EXEMPLU:
Exemplul urmtor arat formatarea documentului:
<a href="pagina.HTML">Aici</a> este un link !
Referinele pot fi absolute (ex. <a
href="http://www.domeniu.ro/pagina.HTML">http://www.domeniu.ro/pagina.HTML<a>)
sau relative (ex. <a href="pagina.HTML">pagina.HTML<a>).
Referinele pot fi ctre pagini HTML, dar i ctre alte tipuri de fiiere (imagini, fiiere
audio, video, documente n alte formate, etc.)
Legtura ctre o seciune de pagin - Ancorele
O ancor are urmtorul format:
<a name="nume_ancora">...</a>
Numele ancorelor nu poate conine spaii i trebuie s fie unic n pagina respectiv.
n exemplul urmtor se observ o posibil greeal n atribuirea numelui ancorelor:
14

<a name="xxx">...</a>
<a name="XXX">...</a>
n HTML xxx i XXX nseamn acelai lucru.
Odat definit ancora trebuie definit i legatura activ ctre ancora respectiv. Ea va
fi o referin hypertext n formatul urmtor: <a href="#nume_ancora">Link catre ancora</a>
Trebuie reinut c exist posibilitatea de a crea referine ctre ancore aflate n documente
externe: <a href="pagina.htm#nume_ancora">Link catre ancora externa</a>
EXEMPLU:
Pentru ca n cadrul paginii web, legturile s fie de culoare roie atunci cnd nu au
fost vizitate, de culoare neagr cele vizitate i de culoare portocalie atunci cnd se trece cu
mouse-ul pe deasupra lor, se folosete urmtoarea linie de cod:
<BODY link=#FF0000 vlink=#000000 alink=FF9600>

2.7 Liste
Enumerrile, de orice fel, constituie o parte important a comunicrii prin faptul c
ajut la sistematizarea i evidenierea unor intrri.
HTML ofer mai multe mecanisme pentru specificarea listelor de informaii. Exist trei tipuri
de liste, fiecare tip trebuie s includ cel puin un element:
1) liste de tip definiie;
2) liste ordonate (numerotate);
3) liste neordonate (marcate).
EXEMPLU:
<HTML>
<HEAD>
<TITLE>Lista ordonata</TITLE>
</HEAD>
<BODY>
<p>In HTML sunt disponibile 3 tipuri de liste:
<ol start="2">
<li>liste de tip definitie
<li>liste neordonate
<li>liste ordonate
</ol>
</BODY>
</HTML>

2.8 Tabele
Prezentarea datelor sub form de tabele prezint avantaje din punct de vedere al
claritii i sistematizrii. Marcajele HTML dedicate formatrii tabelelor permit operaiuni
asemntoare celor din procesoarele de texte (ex. MS Word).
Definirea unui tabel n HTML se face folosind perechea de marcaje <table> i </table>. Prin
intermediul acestei perechi de marcaje se definesc atribute valabile pentru ntregul tabel.
Majoritatea acestor atribute pot fi ns redefinite pentru anumite celule ale tabelulu
<table [border=n]
[frame=above|below|border|box|hsides|vsides|lhs|rhs|void]
[rules=none|groups|rows|cols|all] [width=abs|rel]

15

[height=abs|rel] [bgcolor="#rrggbb"] [bordercolor="#rrggbb"]

[bordercolorlight="#rrggbb"] [bordercolordark="#rrggbb"]
[background="URL-imagine"] [cellspacing=n] [cellpadding=n]
[align=left|center|right] [valign=top|middle|bottom]
[summary="sumar"]>
...
</table>

Semnificaiile atributelor marcajului <table> sunt:

border - specific grosimea chenarului tabelului. Dac are valoarea 0 sau atributul lipsete,
tabelul nu va avea chenar.
frame - definete modul de afiare a chenarului exterior. Funcioneaz n prezena atributului
"border". Atributul frame poate avea urmtoarele valori:
above - afieaz latura superioar a chenarului;
below - afieaz latura inferioar a chenarului;
border - afieaz chenarul complet;
box - afieaz chenarul complet (la fel ca i border);
hsides - afieaz prile inferioar, respectiv superioar ale chenarului;
vsides - afieaz prile laterale (stnga, dreapta) ale chenarului;
lhs - afieaz latura stng a chenarului;
rhs - afieaz latura dreapt a chenarului;
void - fr bordura exterioara.
rules - definete modul de afiare a chenarului interior dintre celulele tabelului. Funcioneaz
n prezena atributului "border". Atributul rules poate avea urmtoarele valori:
none - nu se afieaz chenar interior;
groups - afieaz chenar ntre grupurile de celule definite de tHEAD, tBODY, colgroup, col,
tfoot;
rows - afieaz chenar ntre linii;
cols - afieaz chenar ntre coloane;
all - afieaz chenar ntre toate celule interioare.
width, height - specific limea, respectiv nlimea tabelului.
bgcolor - specific culoarea pentru fundalul tabelului.
bordercolor - specific culoarea chenarului.
bordercolorlight, bordercolordark - sunt atribute utilizate pentru a crea un efect 3D asupra
chenarului. Este recomandat folosirea de culori complementare pentru a obine efectul
scontat. Sunt extensii Microsoft.
background - URL-ul imaginii care va fi utilizat ca fundal al tabelului. n cazul in care
dimensiunile imaginii sunt mai mici dect cele ale tabelului, ea va fi repetat astfel nct s
acopere ntregul fundal al tabelului. Este extensie Microsoft.
cellspacing - specific distana dintre celule.
cellpadding - specific marginea interioar a celulelor.
align - specific alinierea pe orizontal a tabelului (stnga|centru|dreapta).
valign - specific alinierea pe vertical a tabelului (sus|mijloc|jos).
summary - o descriere a tabelului, de obicei pentru browsere non-vizuale.
EXEMPLU:
Coninutul fiecrei celule poate fi formatat individual:
<table>
<tr>
<th><font color=black>Col 1</font></th>
<th><font color=red>Col 2</font></th>
</tr>

16

<tr>
<td><center>Celula 1.1</center></td>
<td><i>Celula 1.2</i></td>
</tr>
<tr>
<td><s>Celula 2.1</s></td>
<td><font color=blue>Celula 2.2</font></td>
</tr>
</table>
n cazul n care se dorete ca tabelul din exemplul anterior s fie afiat
cu chenar:
<table border=1>
<tr>
<th>Col 1</th>
<th><font color=red>Col 2</th>
</tr>
<tr>
<td><center>Celula 1.1</center></td>
<td><i>Celula 1.2</i></td>
</tr>
<tr>
<td><s>Celula 2.1</s></td>
<td><font color=blue>Celula 2.2</font></td>
</tr>
</table>

2.9 Formulare
Formularele reprezint o metod de interactivitate cu utilizatorii paginilor web. Prin
intermediul unui formular se pot obine date importante de la vizitatori. Dup ce formularul a
fost completat, utilizatorul apas un buton de trimitere, iar datele introduse n formular vor fi
primite sub forma unui e-mail sau vor fi procesate cu ajutorul unui limbaj de programare i
adugate ntr-o baz de date.
Un formular este introdus n pagina web prin tag-urile <FORM> i </FORM>. ntre aceste
tag-uri vor fi introduse toate elementele formularului.
Tag-ul <FORM> are dou atribute foarte importante: action i method.
Cu ajutorul atributului action i spunem browser-ului ce se va ntmpla cu datele introduse n
formular. Astfel, valoarea atributului action poate fi o adresa URL a unui script, scris ntr-un
limbaj de programare, care va interpreta datele i le va introduce ntr-o baz de date, dac este
cazul, sau poate fi o adres de email, caz n care datele introduse n formular vor fi trimise
prin email la adresa respectiv.
Atributul method, aa cum i spune i numele, precizeaz metoda de trimitere a datelor i
poate avea dou valori. Valoarea implicit a acestui atribut este get, cu ajutorul acestei
metode putnd fi trimise cantiti mici de date, cea mai folosit metoda fiind post.
Elementele unui formular trebuie introduse, n majoritatea cazurilor, cu ajutorul tag-ului
<input>. Atributele cele mai importante ale acestui tag sunt urmtoarele:
- type - tipul elementului;
- name - numele elementului;
- value - valoarea elementului.
Elementele ale unui formular pot fi:
- cmpurile de editare;
- butoanele radio;
- casetele de validare;
17

- casetele de fiiere;
- listele de selecie;
- butoanele submit i reset.

2.9.1 Trimiterea datelor dintr-un formular prin e-mail

Pentru ca datele introduse ntr-un formular s fie trimise prin e-mail trebuie s folosim pentru
atributul action al tag-ului <form>, valoarea mailto:email@domeniu.ro, n felul acesta, datele
introduse in formular vor fi trimise la adresa de e-mail specificat.
EXEMPLU:
Pentru a trimite datele dintr-un formular la adresa exemplu@yahoo.com vom folosi
urmtoarea linie de cod:
<form action="mailto:exemplu@yahoo.com" method="post">

2.10 Realizarea documentului HTML

Realizarea unui sablon web presupune un document html foarte mare si complex in
care eu am lucrat majoritatea tag-urilor, cum ar fi imagini , formulare , liste , div-uri, spamuri, s.a.

18

Capitolul 3.
3.1 Introducere
Crearea paginilor HTML este un lucru relativ simplu, invatarea etichetelor HTML si
crearea unor imagini ducand la realizarea de pagini web de o complexitate medie. Odata cu
dezvoltarea internetului, site-urile au devenit din ce in ce mai complexe, cu un numar mai
mare de pagini, cerintele privind grafica si elementele din pagina au devenit mai pretentioase
si astfel proiectarea paginilor web a devenit o sarcina ceva mai dificila.
O problema importanta cand avem un site cu multe pagini este atunci cand dorim sa facem
anumite schimbari in elementele pagini: fondul, grafica sau fontul textelor din pagini.
Prin utilizarea CSS (Cascading Style Sheets), in traducere "foi de stil in cascada", acest
lucru nu mai este o problema, realizandu-se relativ usor, prin schimbarea sau adaugarea unor
elemente in codul CSS, ne fiind nevoi sa lucram la fiecare pagina sau la fiecare element din
pagina.
CSS se ocupa in general cu aspectul si controlul grafic al elementelor din pagina, cum ar fi:
textul, imaginile, fondul, culorile si asezarea acestora in cadrul ferestrei paginii.

3.2 CSS - Fisier .css extern

In general fisierele externe de CSS sunt cele mai folosite. Este de recomandat sa
folositi aceasta metoda pentru o mai simpla modificare a intregului website. In acest fel se
poate modicica un site intreg schimband continutul unui singur fisier .css. Singura conditie
este ca toate paginile sitului sa contina in sectiunea head tag-ul <link>.
<head>
<link rel="stylesheet" type="text/css" href="fisier_extern.css" />
</head>
Un fisier CSS se poate scrie in orice editor de text, notepad, notepad++, word, macromedia,
etc dar trebuiesc salvate cu extensia ".css"
Un exemplu simplu de cod CSS ar fi urmatorul
body { background-image: url("img/imagine.png"); }
hr { color: #efefef;}
p { margin-left: 15px;}
Observatie: NU lasa spatiu intre numarul specificat si unitatea de masura. Folosind "marginleft:15 px;" in loc de "margin-left:15px;" va genera erori in Firefox si Opera.

3.3 Configurarea fonturilor

Alegerea potrivita a fonturilor si folosirea acestora in cadrul paginilor web este
importanta, poate atrage critici si comentarii din partea vizitatorilor, mai ales daca formatarea
clasica prin scris normal, aldin sau cursiv nu este folosita corespunzator. CSS include
facilitati de control asupra aspectului fonturilor, prin posibilitatea de a stabili familia de
fonturi, atributele ingrosat si inclinat, dimensiunea literelor precum si spatiul dintre linii.
Exista cinci familii de fonturi de baza:
serif au un ornament (serif) plasat la terminatia literei, care ii ofera o distinctie speciala.
Sunt folosite pentru tiparire, chiar daca textele sunt mai mari sau mai mici. Nu sunt indicate
pentru afisarea textelor pe ecran.
sans serif sunt fonturi care nu folosesc serife, fiind indicate pentru continut text general.
19

monospace fonturile monospatiate pot avea serife, ele se deosebesc prin faptul ca fiecare
litera ocupa aceeasi cantitate de spatiu. Sunt cele mai indicate pentru textele care trebuie citite
cu exactitate, ca de exemplu liniile de program.
cursive imita scrisul de mana, intr-o maniera stilizata. Sunt indicate in scopuri decorative,
nefiind recomandate pentru scrierea unor texte mai lungi.
fantasy nu se incadreaza in nici una dintre categoriile de mai sus, fiind fonturi care au un
caracter predominant ornamental (reprezentand ilustratii sau pictograme).

3.4 Configurari pentru culori si fundal

Daca HTML permitea configurarea unor culori si elemente grafice de fundal doar
pentru anumite elemente, CSS permite definirea culorii si a fundalului pentru orice element
din pagina web.
1. Configurarea fundalului
Se poate schimba fundalul (background) intregii pagini, sau pentru un anumit element din
pagina, fie el de tip DIV, paragraf, imagine, tabel sau formular.
a) Culoarea fundalului
Pentru a schimba culoarea fundalului se utilizeaza proprietatea background-color,
urmata de o valoare care reprezinta numele culorii sau valoarea RGB, exprimata in cod hexa.
Sintaxa generala este:
selector {background-color:valoare }
Daca se foloseste valoarea "transparent" navigatorul va afisa culoarea prestabilita sau cea a
elementului parinte.
Pentru schimbarea fundalului intregii pagini se aplica aceasta proprietate selectorului "body".
Iata un exemplu in care culoarea de fundal a paginii este schimbata in albastru:
body { background-color:#0000ff; }
b) Imaginea de fundal
Puteti utiliza pentru fundal si o imagine, pentru aceasta se foloseste
proprietatea background-image, urmata de adresa URL a locatiei imaginii.
Sintaxa generala este:
selector { background-image:url('adresa_URL'); }
Unde "adresa_URL" este calea si numele imaginii care va fi folosita
Daca in locul adresei URL se foloseste valoarea "none", navigatorul nu va folosi nici o
imagine.
Iata un exemplu in care pentru fundalul paginii este folosita o imagine:
body { background-image:url('cale/imagine.gif'); }
c) Repetarea imaginii de fundal
Pe langa posibilitatea afisarii unui element grafic ca fundal, CSS ofera si un mod de repetare
a acestuia.
Pentru a repeta imaginea de fundal se foloseste proprietatea background-repeat,
urmata de o valoare care poate avea una din urmatoarele optiuni:
repeat pentru a repeta imaginea pe toata suprafata elementului respectiv;
repeat-x pentru a repeta imaginea numai pe orizontala;
repeat-y pentru a repeta imaginea numai pe verticala;
20

no-repeat pentru a afisa imaginea o singura data, fara repetare.

Forma generala este:
selector { background-repeat:valoare }
Iata un exemplu de cod in care imaginea folosita pentru fundalul paginii se va repeta pe
verticala pe toata inaltimea documentului:
body { background-repeat:repeat-y; }
d) Controlul imaginii de fundal
CSS poate defini modul de tratare a fundalului la derularea paginii, pentru aceasta se
foloseste proprietatea background-attachment cu optiunea "fixed", pentru a lipi imaginea de
fundal de fereastra navigatorului sau optiunea "scroll", pentru a permite derularea imaginii de
fundal alaturi de elementul corespunzator atunci cand vizitatorul deruleaza pagina.
Sintaxa generala este:
selector { background-attachment:valoare }
Iata un exemplu practic aplicat imaginii folosita pentru fundalul paginii:
body { background-attachment:scroll; }

3.5 Controale de pozitionare

Pozitionarea elementelor folosind CSS este mai precisa decat prin intermediul
obiectelor grafice HTML sau a tabelelor, afisarea facandu-se mult mai rapid.
Prin intermediul CSS este permisa pozitionarea exacta sau relativa a elementelor intr-o
fereastra sau in raport cu alte elemente.
Fereastra navigatorului este suprafata in care sunt afisate toate elementele. Ea poate fi
redimensionata sau pozitionata pe ecran, sau poate fi divizata in alte ferestre prin intermediul
cadrelor.
Toatele elementele amplasate in fereastra sunt pozitionate relativ la coltul din stanga-sus.
1. Stabilirea modului de pozitionare
Prin utilizarea proprietatii position se poate specifica pozitia elementului in pagina web.
Un element poate avea una din urmatoarele valori de
pozitionare: static, relative, absolut si fixed.
Tipul de pozitie indica navigatorului cum sa trateze amplasarea unui element intr-o fereastra.
a) Pozitionarea statica
Valoarea initiala, prestabilita, a pozitionarii elementelor in fereastra este "static".
Cand nu este specificata o pozitionare "relativa", "absoluta" sau "fixa"; elementele sunt
dispuse unul dupa altul in interiorul documentului.
Sintaxa pentru specificarea pozitionarii static este:
selector { position:static }
- Un element static nu poate fi repozitionat in mod explicit.
b) Pozitionarea relativa
Un element cu pozitionare "relativa" este amplasat la locul sau in cadrul ferestrei sau a
elementului parinte, in sensul ca el apare dupa toate elementele dinaintea sa, respectiv
21

inaintea tuturor elementelor amplasate dupa el.

Sintaxa pentru specificarea pozitionarii relative este:
selector { position:relative }
- Elementele pozitionate relativ pot fi mutate din locatia lor folosind proprietatile "top" si
"left" sau "bottom" si "right".
c) Pozitionarea absoluta
Pozitionarea absoluta are ca efect crearea unui element neafectat de restul documentului,
plasarea lui in fereastra fiind facuta intr-o locatie precisa, definita prin intermediul
coordonatelor x si y, indiferent de pozitiile altor elemente.
Sintaxa pentru specificarea pozitionarii absolute este:
selector { position:absolute }
- Originea (punctul de coordonate 0,0) este coltul din stanga-sus al ferestrei sau al obiectului
in care este inclus elementul pozitionat absolut.
d) Pozitionarea fixa
Pozitionarea fixa a unui element este aproximativ la fel cu cea absoluta, cu diferenta ca la
derularea paginii elementul fixat ramane pe pozitia lui initiala, fara a se derula.
Sintaxa pentru specificarea pozitionarii fixed este:
selector { position:fixed }
3.6 Configurari pentru vizibilitate si mouse
CSS ofera posibilitatea de a afisa sau ascunde unele elemente sau parti ale unor elemente.
1. Stabilirea vizibilitatii unui element
Proprietatea visibility poate controla faptul ca un element sa fie vizibil sau nu. Chiar daca
elementul este invizibil, el va ocupa un spatiu liber in pagina, acolo unde ar fi trebuit sa fie
afisat.
Sintaxa pentru folosirea acestei proprietati este urmatoarea:
selector { visibility:valoare }
Unde "valoare" poate fi:
hidden ascunde elementul de la afisarea pe ecran;
visible afiseaza elementul;
inherit vizibilitatea elementului este mostenita de la elementul parinte.
Iata un exemplu in urma caruia textul din interiorul etichetei <h1> va fi invizibil:
h1 { visibility:hidden; }
Pentru a ascunde complet afisarea unui element in pagina, se poate utiliza
formula display:none;
2. Stabilirea suprafetei vizibile a unui element
Definirea suprafetei vizibile a unui element stabileste portiunea din elementul respectiv care
este vizibila in fereastra navigatorului. Restul continutului acelui element nu dispare, ci este
invizibil pentru vizitator.
Pentru a defini forma regiunii vizibile se foloseste proprietatea clip cu valoarea rect (definita
prin patru valori separate prin spatii si incadrate de paranteze rotunde)
Forma generala este:
selector {clip:rect(val1 val2 val3 val4); }
- Valorile construesc un patrulater, definesc distanta dintre coltul din stanga-sus al
elementului si laturile de sus, dreapta, jos si stanga ale regiunii vizibile.
22

Iata un exemplu de cod CSS in care suprafata vizibila a unui element cu id="viz" va fi cea
incadrata de valorile atributului rect:
#viz { clip: rect(25 300 125 100); }
Daca se foloseste valoarea "auto", navigatorul calculeaza dimensiunea regiunii vizibile la
100%. Regiunile de vizibilitate pot avea doar forma dreptunghiulara.
3. Definirea pozitiei depasirii
Uneori elementele nu sunt in totalitate continute in casetele lor, caseta nefiind suficient de
mare, astfel ca o parte a continutului nu este afisata sau depaseste marginea stabilita.
Proprietatea overflow permite tratarea continutului in exces, controland astfel modul de
afisare sau nu al acesuia.
Forma generala a proprietatii overflow este:
selector { overflow:valoare; }
- Unde "valoare" stabileste unde va fi plasata depasirea, folosind una din valorile:
visible extinde caseta elementului astfel incat sa incapa tot continutul sau, ignorand
delimitarea suprafetei vizibile. Este optiunea prestabilita.
hidden ascunde continutul care nu incape in caseta elementului, si impiedica aparitia barei
de derulare.
scroll adauga intotdeauna bare de derulare elementului, pentru ca sa se poata accesa tot
continutul elementului.
auto barele de derulare apar doar atunci cand este necesar.
Iata un exemplu in care toate elementele cu class="extradim" vor avea bare de scroll:
.extradim { overflow:scroll; }
Pentru definirea proprietatii "overflow" doar pentru una din directii: orizontala sau
verticala; adica bara de derulare sa fie disponibila sau nu doar pentru una din aceste directii,
se poate folosi o alta varianta a acestei proprietati, si anume:
overflow-x:valoare - pentru orizontala
overflow-y:valoare - pentru verticala
- Unde "valoare" poate fi una din valorile prezentate mai sus.
4. Aspectul indicatorului de mouse
In mod normal, aspectul indicatorului de mouse este determinat de browser. Navigatorul
modifica indicatorul de mouse in functie de continutul deasupra caruia se afla acesta.
Uneori este dorita anularea sau completarea preferintelor navigatorului si configurarea unor
aspecte personalizate.
Proprietatea cursor ajuta la stabilirea aspectului unui indicator de mouse.
Sintaxa este urmatoarea:
selector { cursor:valoare; }

3.7 Pseudo-clase
Pseudo-clasele permit adaugarea de stiluri CSS doar la anumite elemente ale aceluiasi
selector, id sau clasa.
De exemplu, cand definiti un stil pentru un anumit tag HTML sau pentru o clasa, continutul
din toate aceleasi tag-uri sau aceeasi clasa vor avea acel stil, iar daca doriti sa definiti un stil
diferit pentru primul (sau ultimul) din acele tag-uri ori pentru primul continut definit de
aceeasi clasa, puteti realiza asta folosind pseudo-clasele. De asemenea, acestea pot modifica
stilul grafic al elementelor cand mouse-ul actioneaza asupra lor.
Pentru a functiona in Internet Explorer 7+ este necesar declararea <!DOCTYPE>, care se
adauga la inceputul documentului HTML, mai multe detalii (in engleza) gasiti Aici.
Sintaxa pentru utilizarea pseudo-clasei este urmatoarea:
23

element:pseudo-clasa { proprietate:valoare; }
- unde "element" este un selector, id sau clasa, iar "pseudo-clasa" este una din expresiile
urmatoare:
active - Adauga un stil unui element cand acesta este activat (actionat prin click pe el)
first-child - Adauga un stil unui element care este primul din acel tip de elemente
focus - Folosit pentru input-urile de formulare, le adauga un stil cand acestea sunt active
(dupa click si cursorul de text in ele)
hover - Adauga un stil unui element cand mouse-ul se afla deasupra lui
lang(cuvant) - Adauga un stil unui element care are atributul lang="cuvant" (nu e suportat de
Safari si IE mai mic de 8)
last-child - Adauga un stil unui element care este ultimul din acel tip de elemente
link - Adauga un stil unui link nevizitat
visited - Adauga un stil unui link vizitat

3.8 Realizarea documentului (Style.css)

In cadrul realizarii unui web template , documentul css este unul foarte complex ,
deoarece fiecare element trebuie stilizat perfect astfel incit sa fie foarte aratos si atragator.

24

Capitolul 4.
Design-ul Adaptabil
Conceptul de Responsive Design a fost introdus pentru prima oar de ctre Ethan
Marcotte n 2010, n articolul su, Responsive Web Design, publicat pe A List Apart. Acesta
se refer la capacitatea unui website de a se adapta la diferite rezoluii i dispozitive pe care
este afiat (PC-uri, laptopuri, tablete, smartphones etc), fr a suferi degradri majore.
Aceast abordare vine n ajutorul celor care s-au vzut nevoii s fac o mulime de versiuni
ale site-ului, pentru ca acesta s poat fi accesat de pe iPad, Blackberry, Kindle, netbook,
iPhone i aa mai departe. Odat adoptat acest concept, site-ul ar trebui s recunoasc tipul
dispozitivului pe care este afiat i s rspund automat la preferinele utilizatorului. Astfel,
nu ar mai fi nevoie de mai multe versiuni ale site-ului pentru fiecare gadget pe care l folosim.
Cum se construiete un site responsive?
Este nevoie de trei ingrediente principale pentru a avea un site responsive:
Griduri fluide
Imagini flexibile
Media Queries
Gridurile fluide

Fig 4.1
Cu ceva timp n urm, nainte ca acest concept s devin popular, cele mai multe
dintre site-uri aveau la baz griduri fixe i funcionau bine n acest mod, dat fiind c
majoritatea calculatoarelor aveau aproximativ aceeai rezoluie. n prezent, gridurile fixe nu
mai reprezint cea mai optim variant, lund n considerare toate rezoluiile existente.
25

Sistemul flexibil de griduri se bazeaz pe calculul proporiilor i se asigur c toate

elementele din layout sunt redimensionate unul fa de cellalt. Nu se mai msoar
dimensiunile n pixeli, ci n uniti relative i procente.
Imaginile flexibile
Cel de-al doilea ingredient esenial este reprezentat de imaginile flexibile. Acestea i pot
modifica limea i nlimea n funcie de rezoluia i de dimensiunea gridului. Pentru a oferi
informaia repede i frumos, imaginile pot fi salvate pe server n seturi de 3-4 dimensiuni, din
care va fi ncrcat mai apoi imaginea potrivit, n funcie de dimensiunea ecranului pe care
este afiat site-ul.
Media Queries
Acestea reprezint o metod eficient de a ncrca diferite stiluri CSS pentru diferite rezoluii,
pentru a oferi vizitatorului o experien ct mai bun. Gsii un tutorial care dezvolt foarte
bine acest aspect aici.
3 avantaje aduse de Web Responsive Design
O singur versiune de site care funcioneaz bine pe orice dispozitiv.
Posibilitatea de sharing a aceluiai URL ntre diverse dispozitive.
Layout-ul se adapteaz la browser, eliminnd astfel scroll-ul orizontal.
3 dezavantaje aduse de Web Responsive Design
Timp prelungit pentru dezvoltare, respectiv costuri mai mari.
Dificulti datorate faptului c acest concept introduce un nou nivel de complexitate layouturilor
Apar mai multe probleme la compatibilitatea ntre browsere

4.1 Realizarea Designului adaptabil

Designu adaptabil a devenit o tendinta in cadrul realizarii unui sablon web
O mare parte din desgn-ul adaptabil se creaza direct in fisierul STYLE.CSS deoare acolo se
initializeaza inaltime tag-ului drept auto; si latimea in procente , in rest , design-ul adaptabil
se configureaza in fisierul media-queries.css

26

Concluzii:
In urma efectuarii practicii de productie eu am capatat experienta de munca.
Lucrind in oficiul companiei, am avut responsabilitatea de crea un sablon web pina in cel
mai mic detaliu, am studiat mai multe limbaj-ul de marcare HTML, CSS, si limbajul de
criptare Javascript, totodata am invatat ce este design-ul adaptabil si
l-am implementat in acest sablon.

Bibliografie:

www.Google.com;
http://www.marplo.net/curs_css/
ht http://www.marplo.net/javascript/
http://www.marplo.net/html/

27

ANEXA A(documentul HTML)

<!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> <title>responsive template
</title> <!--[if lt IE 9]> <script src="http://css3-mediaqueriesjs.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
<!--[if lt IE 9]> <script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <!
[endif]--> <link href='http://fonts.googleapis.com/css?
family=PT+Sans:400,700' rel='stylesheet' type='text/css'/> <script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
></script> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <link href="style/media-queries.css" rel="stylesheet"
type="text/css"/> <meta name="viewport" content="width=device-width,
initial-scale=1"/> <link rel="stylesheet" type="text/css"
href="style/style.css" media="screen" /> <script src="style/js.js"
type="text/javascript"></script> <script src="style/readfull.js"
type="text/javascript"></script> <script
src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script
src="style/jquery-1.9.1.min.js"></script> <script
src='style/jquery.scrollto.js'></script> <script
src="http://code.jquery.com/jquery.js"></script> <script
src="style/viewportchecker.js"></script> </head> <body> <div class="wrap ">
<div class="container"> <div class="header" id="home"> <a class="art">
<span class="mare"> O</span> <span class="mic"> PEN</span><span
class="mare" style="margin-left:1.4%;">B</span> <span class="mic">
USINESS</span> <span class="searchdiv"> <span class="ctxt"> Responsive
<br/> Website Template</span> <input id="search" type="text" name="search"
value="Search Our Website..." class="searchform"/> <input type="button"
value="SEARCH" class="searchbuton" /> </span> </a> <div id="navanchor"></div> <nav class="clearfix" id="meniul"> <ul class="clearfix">
<li><a href="#home" >Home</a></li> <li><a
href="#galerrynow">Gallery</a></li> <li><a href="#presentation"
>Presentation</a></li> <li><a href="#portofolio">Portfolio</a></li> <li><a
href="#articles">Articles</a></li> <li><a href="#demo">Demo</a></li> </ul>
<a href="#" id="pull">Menu</a> </nav> </div> <div class="content"> <div
id="myBtn1" class="left" name="Fade Out" onclick="fadeprew()"
onmouseover="hover11()" onmouseout="hover1133()"> &#60 </div> <div
id="myBtn" class="right" name="Fade Out" onclick="fadenext()"
onmouseover="hover11()" onmouseout="hover1133()"> &#62 </div> <ul> <li
id="galerrynow"><img id="cocosii" name="homest" src="images/images0.jpg"
alt="" onmouseover="hover11()" onmouseout="hover1133()" /> <div
class="siii"> <p id="titlul">description of these pictures 1</p> </div>
</li> <li id="li2"><img id="my" name="Fade Out" src="images/images1.jpg"
alt="" class="img2" onclick="ff(1)" /></li> <li id="li3"> <img id="my"
name="Fade Out" src="images/images2.jpg" alt="" class="img2"
onclick="ff(2)"/></li> <li id="li4"><img id="my" name="Fade Out"
src="images/images3.jpg" alt="" class="img2" onclick="ff(3)"/></li> <li
id="li5"><img id="my" name="Fade Out" src="images/images4.jpg" alt=""
class="img2" onclick="ff(4)"/></li> </ul> <span class="separa"> </span>
<div class="buton112"><img onclick="prev('presentation','li')"
src="images/prew.jpg" alt="" class="butonprew"/><img
onclick="next('presentation','li')" src="images/next.jpg" class="butonnext"
alt=""/> </div> <ul class="ul2" id="presentation"> <!-- / initially only
the first three items are displayed/--> <li name="da" class="li11"> <img
src="images/list1.jpg" alt="" class="ul2img"/>

28

ANEXA B (documentul CSS )

.wrap{
height:auto;
position:relative;
}
.container{
position:relative;
float:left;
width:100%;
height:auto;
}
.header{
background-color:#ffffff;
height:188px;
width:auto;
display:block;
position:relative;
border-top:5px solid #7e5c88;
}
#Copyright{
display:block;
float:left;
font: normal 0.65em 'open-sans', Georgia, Times, serif;
color:#999999;
margin-top: 26px;
margin-left: 10px;
}
#Copyright1{
float:right;
font: normal 0.65em 'open-sans', Georgia, Times, serif;
color:#999999;
margin-top: 26px;
margin-right: 10px;
}
.art{
display:block;
margin-top:48px ;
margin-left:2%;
}
.mic{
display:inline;
margin-top:48px;
}
.mare{
display:inline;
margin-top:48px;
margin-left:0.2%;
}
.searchdiv{
position:relative;
height:30px ;
margin-top:13px;
}
.searchbuton{
display:block;
float:right;
font: normal 0.75em 'open-sans', Georgia, Times, serif;
color:#ffffff;
cursor:pointer;
background-color:#7e5c88;
border:none;
border-radius:5px;
}
.searchbuton:hover {

29

Anexa C (fisierul media-queris.css)

-ms-viewport{width:device-width;} /* http://msdn.microsoft.com/engb/library/ie/hh869615%28v=vs.85%29.aspx */
@media all and (min-width:1266px) {
.wrap{
width:1000px;
margin:0px auto;
}
.totop{
display:block;}
.comentstitle {
font-size: 1.5em;}
.articlecontentfull{
width: 89%;
margin: 45px;
}
.articlefull{
width:1100px;}
#Copyright1{
display:block;}
.contentdemo{
width: 29%;
float: right;
}
.demo iframe{
width:64%; }
.articlediv1{
width:48%;}
.right {
display:inline;
margin-left:537px;
}
.left{display:inline;}
.siii{display:block;}
.text2{
margin-top: 30px;
margin-left: 217px;
}
.title2{
margin-top: -153px;
margin-left: 217px;
}
.div3a{
height:auto;

30

Anexa D(screen-uri)
fig. 1 interfata Sablonului

fig.2 Legatura prin ancora

la Portofolio

31

fig.3 Legatura prin ancora la DEMO

32

fig.4 Interfata design ului adaptabil

33