MINISTERUL EDUCAIEI AL REPUBLICII MOLDOVA

Facultatea Calculatoare Informatica si MicroelectronicaCATEDRA: ATI

RAPORTUL

privind efectuarea practicii

Tema: Realizarea unui Sablon Web cu design Adaptabil

Studentul: Plamadeala Dumitru Gr. TI-124

Conductor: Catruc Mariana

Chisinau,2014Cuprins

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 ..........182.10 Elaborarea documentului HTML............................................18

Capitolul 3(Cascading Style Sheets)

3.1 Introducere ...................................................................................193.2 CSS - Fisier .css extern.................................................................193.3 Configurarea fonturilor.................................................................203.4 Configurari pentru culori si fundal...............................................203.5 Controale de pozitionare...............................................................213.6 Configurari pentru vizibilitate si mouse........................................223.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)............................................27Anexa B (documentul STYLE.CSS)................................................28Anexa C (fisierul MEDIA-QUERIES.CSS)....................................29Anexa D screen-uri............................................................................30Sarcina 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 ntr-un 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 . 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:

................Exista dou tipuri de marcaje:- individuale (ex.
)- perechi (ex. ...) - de menionat c sfritul unui marcaj este indicat prin utilizarea caracterului '/' n faa numelui de marcaj.n funcie de modul de formatare a paginii, avem marcaje de tip:- block: este afiat sub elementul anterior (ex. );- inline: este afiat dup elementul anterior (ex. );- table: este afiat sub forma unui tabel.

Marcajele perechi pot fi imbricate:

...............

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 ; seciunea BODY, delimitat de marcajele sau EXEMPLU:

Prima mea pagina web

text text text text text text text text

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.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 . Marcajul 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: - 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.

Declararea setului de caractere se face astfel:

Precizarea setului de caractere face posibil afiarea n browserul utilizatorului a caracterelor specifice unor limbi precum romna, rusa, araba, etc.- cascading STYLE sheets - stiluri pentru formatarea textului din documentul HTML.... - scripturi JavaScript sau VBScript

- stabileste URL-ul de "baza" al documentului. Toate referintele (, respectiv ) din documentul respectiv vor fi deschise relativ la marcajul .

- stabilete o legtur cu un document extern, spre exemplu un fiier de definiii CSS.

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

Titlul paginii

1.2.2 Seciunea BODY

Aceasta sectiune este inclus ntre marcajele ......

................continut document.................

Marcajul de sfrit () nu este obligatoriu.n seciunea BODY se gsete informaia care va fi afiat n browser (text, imagini, etc.) (.... ).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

EXEMPLU:

Titlul paginii mele

text text text text text text text text text text alt text alt text alt text alt text alt text

n exemplul de mai sus a aprut un nou marcaj (paragraf). Alturi de el trebuie menionate marcajele , , , , , (HEADings - toate necesit marcaj de nchidere) care sunt folosite n general pentru evidenierea titlurilor.Pentru formatarea textului pot fi folosite i marcajele:... - caractere ngroate;... - caractere nclinate;... - caractere subliniate;... - caractere "tiate";... - marcajul de informaie preformatat;conserv toata caracterele si spaierile de linii;utilizeaz un font diferit (Courier);... - exponent;... - indice;
- "rupe" textul, trecnd pe o linie nou - poate apare oriunde in text; - traseaz o linie subire orizontal;... ofer posibilitatea modificrii dimensiunii, culorii i a tipului de font utilizat; este un marcaj de tip "inline". Se folosete n general n interiorul marcajelor de tip "block" (ex. ) n combinaie cu stilurile CSS, pentru a impune o formatare diferit de restul coninutului din marcajul "block" respective;spre deosebire de , marcajul 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................................

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: i ; i ; i ;- tag-uri singulare (nu au un tag de ncheiere) Exemple: ,
.Tag-urile de baza pe care trebuie s le conin un document 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. - ntre aceste tag-uri sunt trecute, pe lng titlul paginii, diverse informaii folositoare pentru browser-ul de Internet; - acesta este tag-ul de ncheiere al tag-ului ; - 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. - este tag-ul de ncheiere al tag-ului . Arat sfritul titlului documentului. - odat cu acest tag ncepe coninutul paginii web. Tot ce se scrie ntre tag-urile i va fi afiat, de ctre browser, pe ecranul monitorului. - comunic browser-ului c s-a terminat de scris coninutul paginii. Tot ceea ce se scrie dup acest tag nu va mai fi afiat. - este tag-ul de ncheiere al tag-ului . 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.Acesta e un textEXEMPLU:Acest exemplu aplic fundalului o culoare portocalie.Text Text

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 . 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 i , atributul FACE arat tipul fontului, iar atributul SIZE arat mrimea fontului.

EXEMPLU:Proiect diplomava afia n cadrul browserului de Internet: Proiect diplomaProiect diplomava afia n cadrul browserului de Internet: Proiect diplomaProiect diplomava afia n cadrul browserului de Internet: Proiect diploma

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"Acest text ...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):Proiect diplomasize 7: Proiectsize 6: Proiectsize 5: Proiectsize 4: Proiectsize 3: Proiectsize 2: Proiectsize 1: ProiectDac vrem ca textul nostru s fie scris cu caractere ngroate, folosim perechea de etichete i .Text boldText bold

Pentru ca textul s fie scris cu caractere italice, folosim perechea de etichete i .Text italicText italic

Pentru ca textul s fie subliniat, folosim perechea de etichete i .Text subliniatText subliniat

Dac vrem ca textul s fie afiat n centrul paginii putem folosi perechea de etichete i .EXEMPLU:Avem urmtorul cod HTML:

Eticheta

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

Acest cod va avea ca rezultat:Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML.

EXEMPLU:Utilizarea etichetei
in cadrul codului:

Eticheta

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

Acest cod va avea ca rezultat:Invat limbajul HTML.Exersez limbajul HTML.Stiu limbajul HTML.

Dac scriem un text ntre tag-urile i , atunci textul va fi ncadrat de cte un rnd liber, la fel ca n exemplul de mai jos:

Eticheta

Invat limbajul HTML.Exersez limbajul HTML.Stiu limbajul 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:0123456789101112131415

0123456789ABCDEF

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

Numele i codul culorilor stabilite n standardul HTML3.2 sunt urmtoarele:

Nume culoareCod hexazecimalNume culoareCod hexazecimal

Aqua#00FFFFNavy#000080

Black#000000Olive#808000

Blue#0000FFPurple#800080

Fuchsia#FF00FFRed#FF0000

Gray#808080Silver#C0C0C0

Green#008000Teal#008080

Lime#00FF00Yellow#FFFF00

Maroon#800000White#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 (de la image). Eticheta 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 . 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.

Dac imaginea se afl ntr-un alt director, URL-ul imaginii trebuie specificat fie prin adresarea absolut fie, preferabil, prin cea relativ.

EXEMPLU:

Inserare imagine

Atributele border si alt Acesta este un...

Atributele etichetei :- 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 provenind de la anchor. El trebuie s conin atribute, n caz contrar neafectnd formatarea documentului.

EXEMPLU:

Exemplul urmtor arat formatarea documentului:Aici este un link !

Referinele pot fi absolute (ex. http://www.domeniu.ro/pagina.HTML) sau relative (ex. pagina.HTML).

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 - AncoreleO ancor are urmtorul format:...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:......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: Link catre ancoraTrebuie reinut c exist posibilitatea de a crea referine ctre ancore aflate n documente externe: Link catre ancora externa

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:

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:

Lista ordonata

In HTML sunt disponibile 3 tipuri de liste:

1. liste de tip definitie
2. liste neordonate
3. liste ordonate

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

...

Semnificaiile atributelor marcajului 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 - afieazlatura superioar a chenarului;below -afieazlatura inferioar a chenarului;border - afieaz chenarul complet;box - afieaz chenarul complet (la fel ca i border);hsides - afieazprile inferioar, respectiv superioar ale chenarului;vsides - afieazprile laterale (stnga, dreapta) ale chenarului;lhs - afieazlatura stng a chenarului;rhs - afieazlaturadreapt 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:

Col 1Col 2

Celula 1.1Celula 1.2

Celula 2.1Celula 2.2

n cazul n care se dorete ca tabelul din exemplul anterior s fie afiat cu chenar:

Col 1Col 2

Celula 1.1Celula 1.2

Celula 2.1Celula 2.2

2.9 FormulareFormularele 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 i . ntre aceste tag-uri vor fi introduse toate elementele formularului.Tag-ul 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 . 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;- 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 , 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:

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, spam-uri, s.a.

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 generalfisierele externe de CSSsunt 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 headtag-ul .

Unfisier CSSse poate scrie in orice editor de text, notepad, notepad++, word, macromedia, etc dar trebuiesc salvate cu extensia ".css"Un exemplu simplu decod CSSar fi urmatorulbody { 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 "margin-left: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.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 fundaluluiSe 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 proprietateabackground-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 proprietateabackground-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 folositaDaca 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 proprietateabackground-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;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 proprietateabackground-attachmentcu 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 pozitionarePrin utilizarea proprietatiipositionse poate specifica pozitia elementului in pagina web.Un element poate avea una din urmatoarele valori de pozitionare:static,relative,absolutsifixed.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 pozitionariistaticeste: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 inaintea tuturor elementelor amplasate dupa el.Sintaxa pentru specificarea pozitionariirelativeeste: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 coordonatelorxsiy, indiferent de pozitiile altor elemente.Sintaxa pentru specificarea pozitionariiabsoluteeste: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 pozitionariifixedeste: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 elementProprietateavisibilitypoate 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 va fi invizibil:h1 { visibility:hidden; }Pentru a ascunde complet afisarea unui element in pagina, se poate utiliza formuladisplay:none;2. Stabilirea suprafetei vizibile a unui elementDefinirea 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 proprietateaclipcu valoarearect(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.Iata un exemplu de cod CSS in care suprafata vizibila a unui element cu id="viz" va fi cea incadrata de valorile atributuluirect:#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 depasiriiUneori 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.Proprietateaoverflowpermite tratarea continutului in exces, controland astfel modul de afisare sau nu al acesuia.Forma generala a proprietatiioverfloweste: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 orizontalaoverflow-y:valoare- pentru verticala- Unde "valoare" poate fi una din valorile prezentate mai sus.4. Aspectul indicatorului de mouseIn 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.Proprietateacursorajuta la stabilirea aspectului unui indicator de mouse.Sintaxa este urmatoarea:selector { cursor:valoare; }

3.7 Pseudo-clase

Pseudo-claselepermit 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 , care se adauga la inceputul documentului HTML, mai multe detalii (in engleza) gasitiAici.Sintaxa pentru utilizarea pseudo-clasei este urmatoarea: 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 elementefocus - 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 luilang(cuvant) - Adauga un stil unui element care are atributullang="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 elementelink - Adauga un stil unui link nevizitatvisited - 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.

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 peA 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 fluideImagini flexibileMedia QueriesGridurile 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 optimvariant, lund n considerare toate rezoluiile existente.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 flexibileCel 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 QueriesAcestea 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 aspectaici.3 avantaje aduse de Web Responsive DesignO 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 DesignTimp prelungit pentru dezvoltare, respectiv costuri mai mari.Dificulti datorate faptului c acest concept introduce un nou nivel de complexitate layout-urilorApar mai multe probleme la compatibilitatea ntre browsere

4.1 Realizarea Designului adaptabil

Designu adaptabil a devenit o tendinta in cadrul realizarii unui sablon webO 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

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/

ANEXA A(documentul HTML)

responsive template O PENB USINESS Responsive
Website Template

Home

Gallery

Presentation

Portfolio

Articles

Demo

Menu < >

description of these pictures 1

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 {

Anexa C (fisierul media-queris.css)

-ms-viewport{width:device-width;} /* http://msdn.microsoft.com/en-gb/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;

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

fig.2 Legatura prin ancora la Portofolio

fig.3 Legatura prin ancora la DEMO

fig.4 Interfata design ului adaptabil

3