Elemente de Web design

http://www.w3schools.com/html/ http://www.w3schools.com/css/

Cascading Style Sheets http://www.w3schools.com/js/ http://www.w3schools.com/php/ Gugoiu, Teodoru - HTML, XHTML, CSS si XML

prin exemple, Ed. Teora, 2005 Anghel, Traian Programarea in PHP Ed.

Polirom, 2005 Buraga, Sabin Proiectarea siturilor Web

Design i funcionalitate, Ed. Polirom, 2002

REALIZAREA PAGINILOR WEB- limbajul HTMLHypertext Markup Language

Caracteristici documentele HTML sunt exclusiv de tip text

(ASCII); prin urmare ele pot fi editate direct, prin comenzi specifice sistemului de operare folosit. Se poate utiliza orice editor de texte;

documentele descrise n HTML pot fi vizualizate cu ajutorul unor aplicaii speciale denumite browsere, care lucreaz pe diferite tipuri de sisteme de calcul; prin urmare, documentelor HTML sunt independente de platforma de lucru.

HTML utilizeaz pentru descrierea documentelor Web etichete (denumite si tag-uri) specifice pentru fiecare element descris; etichetele stabilesc att structura documentului, ct i aspectul acestuia.

metode de realizare a paginilor WEB

Folosind un editor de texte obinuit se scrie coninutul paginii ntr-un fiier text care se salveaz cu extensia HTML sau HTM. Apoi, folosind un browser se ncarc pagina local realizat.

Folosind un editor specializat n realizarea paginilor WEB. Exist mai multe editoare de pagini de WEB, care genereaz codul paginii (adic nu trebuie s scrie utilizatorul ntregul cod surs al paginii) i ofer i faciliti suplimentare. Cele mai cunoscute sunt Macromedia DreamWeaver, FrontPage i Netscape Composer.

HTML-Kit

Structura unui document HTML

... antetul documentului ...

... corpul documentului ...

c0.html

Atributele pot fi definite ca niste proprietati ale tag-urilor.

Atributele se pun numai in tag-ul de inceput.

Daca un tag nu are nici un atribut, atunci browser-ul va lua in considerare valorile implicite ale tag-ului respectiv

Elementul admite urmtoarele atribute:

BACKGROUND=URL BGCOLOR=culoare

Culori.pdf TEXT=culoare LINK=culoare(link-urile nevizitate) VLINK=culoare(link-urile vizitate) ALINK=culoare(link-ul activ - cel asupra cruia este plasat

cursorul mouse-ului).

Poziionarea coninutului paginii Web fa de marginile ferestrei browserului se poate face cu ajutorul a dou atribute ale etichetei :

"Leftmargin" (stabilete distana dintre marginea stng a ferestrei browserului i marginea stng a coninutului paginii);

"Topmargin" (stabilete distana dintre marginea de sus a ferestrei browserului i marginea de sus a coninutului paginii);

c1.html

Comentarii HTML

.

Exemplu:

l "vede"! ->

Formatarea textului nivel de bloc (block-level) sau la nivel de caracter (text-level sau inline).

Formatarea paragrafelor Paragraful 1 Paragraful 2

Cel mai utilizat atribut pentru eticheta este ALIGN

ALIGN = LEFT | CENTER | RIGHT | JUSTIFYc2.html Pentru a stabili acelai mod de aliniere pentru

mai multe paragrafe, se vor grupa ntr-un singur bloc, cu ajutorul etichetei :

... primul paragraf ... ... al doilea paragraf ... ... al treilea paragraf ...

Utilizarea paragrafelor titlu

Documentele HTML pot fi structurate pe ase niveluri, existnd ase etichete care definesc nivelul paragrafului titlu n structura documentului: , , , , , . Etichetele de sfrit sunt obligatorii.c3.html

Linii orizontale

atribute ale etichetei :1. "align" ce permite alinierea orizontal a liniei.

Valorile posibile sunt "left","center" i "right"; 2. "width" permite alegerea lungimii liniei; 3. "size" permite alegerea grosimii liniei; 4. "noshade" cnd este prezent definete o linie

fr umbr; 5. "color" permite definirea culorii liniei.c4.html

Blocuri CENTER Blocul introdus de etichetele

... aliniaz centrat toate elementele pe care le conine.

Blocuri DIV(delimitare i formatare bloc text )...

Blocul DIV

Aceasta linie este o linie normala.Urmatorul bloc este aliniat la dreapta.

O singura linie.O singura linie.O singura linie.O singura linie.O singura linie.O singura linie.O singura linie.O singura linie.O singura linie.O singura linie.O singura linie.O singura linie.

Bloc aliniat pe centru.Bloc aliniat pe centru.Bloc aliniat pe centru.Bloc aliniat pe centru.Bloc aliniat pe centru.Bloc aliniat pe centru.

test.html

Formatarea la nivel de caracter

Atributele admise de eticheta sunt:SIZE = valoareCOLOR = culoareFACE = list_fonturi(definete o list de fonturi separate prin virgul,

dintre care browser-ul l va alege pe primul disponibil in ordinea preferinelor. Dac nici unul din fonturile din list nu este instalat pe calculatorul utilizatorului, browser-ul va utiliza fontul implicit) c5.html

Utilizarea caracterelor specialeSpecificarea caracterelor dintr-un set de caractere care

nu au un corespondent pe tastatur se poate face n dou moduri:

Prin intermediul codului numeric asociat caracterului astfel: D ; unde D este un numr zecimal care reprezint codul Unicode al caracterului.

Prin intermediul unor referine speciale, asociate unor caractere mai frecvent folosite.

codurile HTML pentru cele mai folosite caractere si simboluri, care nu se gasesc pe tastatura calculatorului: Simbol.pdf

Aplicarea unor efecte asupra texlului Textul este accentuat, scos n eviden

Textul este mai accentuat, puternic

scos n eviden

Utilizarea indicilor i a exponenilor

exemplu: H 2O E = mc 2

Efect c6.html

Utilizarea listelor

Listele neordonate (Unordered Lisl) sunt ncadrate de etichetele si . Fiecare intrare in list (List Item) este precedat de eticheta c7.html

Crearea unei liste ordonate (Ordered List) se face ncadrnd intrrile din list ntre etichetele pereche i c8.html

Crearea unei liste de definiii se realizeaz cu ajutorul etichetelor pereche i , ntre care vor fi ncadrate intrrile n list. n acest caz, o intrare n list este constituit din dou pri: un termen (etichetat cu - Definition Term), care poate conine doar elemente de formatare inline i o definiie (etichetat cu -Definition Description), care poate conine elemente de formatare la nivel de bloc.

De exemplu: Descriere

Liste ordonate. Elementele listei trebuie parcurse in ordinea numerotarii. Liste Neordonate Elementele listei nu trebuie parcurse in ordine. Liste de definitii. Elementele listei au doua parti: termenul si descrierea sa.

Efect c9.html

Elemente de Web designSlide Number 2REALIZAREA PAGINILOR WEB- limbajul HTML Caracteristicimetode de realizare a paginilor WEBStructura unui document HTML Slide Number 7Elementul admite urmtoarele atribute:Slide Number 9Slide Number 10Formatarea textuluiSlide Number 12Utilizarea paragrafelor titluLinii orizontale Slide Number 15Slide Number 16Formatarea la nivel de caracterUtilizarea caracterelor specialeSlide Number 19Utilizarea indicilor i a exponenilorUtilizarea listelor Slide Number 22