UNIVERSITATEA HYPERION DIN BUCUREŞTI FACULTATEA DE ŞTIINŢE EXACTE ŞI INGINEREŞTI

Dr.ing. Eugen CORNEL

2012

TEHNOLOGII WEB Î NDRUMAR DE LABORATOR

CUPRINS: INTRODUCERE .............................................................................................................. 2 LUCRAREA NR. 1 : Limbajul HTML – Introducere, structura unui document HTML, formatarea textului ............................................................................................................ 3 LUCRAREA NR. 2 : Limbajul HTML – Imagini, legături, liste, tabele............................. 9 LUCRAREA NR. 3 : Limbajul HTML – Cadre, formulare ............................................. 14 LUCRAREA NR. 4 : Limbajul CSS – Introducere, tipuri de formatare CSS, formatări de bază ................................................................................................................................ 22 LUCRAREA NR. 5 : Limbajul CSS – Formatări avansate CSS ...................................... 32 LUCRAREA NR. 6 : Limbajul JAVASCRIPT – Introducere, variabile, tipuri de date şi operatori ......................................................................................................................... 40 LUCRAREA NR. 7 : Limbajul JAVASCRIPT – Instrucţiuni, funcţii predefinite şi funcţii definite de utilizator ........................................................................................................ 50 LUCRAREA NR. 8 : Limbajul JAVASCRIPT şi modelul DOM – Crearea paginilor dinamice utilizând limbajul JavaScript şi DOM ............................................................... 66 LUCRAREA NR. 9 : Limbajul PHP – Introducere, variabile, tipuri de date. Exemple primare ........................................................................................................................... 72 LUCRAREA NR. 10 : Limbajul PHP – Instrucţiuni, funcţii predefinite şi funcţii definite de utilizator, sesiuni PHP ................................................................................................ 83 LUCRAREA NR. 11 : Limbajul PHP – Prelucrarea datelor dintr-un formular utilizând limbajul PHP ................................................................................................................ 101 LUCRAREA NR. 12 : Limbajul PHP – Prelucrarea datelor dintr-o bază de date MYSQL cu ajutorul limbajului PHP ............................................................................................ 109 LUCRAREA NR. 13 : Crearea de conţinut dinamic animat utilizând Adobe FLASH şi limbajul ActionScript .................................................................................................... 124 LUCRAREA NR. 14 : Tehnologii web avansate. Biblioteca JavaScript jQuery, CMS, web framework-uri............................................................................................................... 131 BIBLIOGRAFIE .......................................................................................................... 135

-1-

INTRODUCERE Odată cu dezvoltarea Internet-ului au apărut o serie de tehnologii web din ce în ce mai avansate, pornind de la simplul limbaj HTML şi mergând până la o serie de limbaje de scripting (client sau server), dintre care cele mai utilizate sunt JavaScript, PHP, ActionScript. În acest îndrumar de laborator se vor prezenta mai multe tehnologii web actuale, larg utilizate de către dezvoltatorii de website-uri şi aplicaţii web, cu ajutorul cărora studenţii vor putea accesa piaţa de muncă pe acest domeniu cu o cerere din ce în ce mai mare din partea marilor companii software. Lucrările de laborator sunt prezentate într-o lumină modernă şi uşor accesibilă pentru studenţi, recomandarea fiind ca oricine accesează acest îndrumar de laborator să testeze personal toate exemplele prezentate şi să efectueze teme originale pentru problemele propuse la Modul de lucru de la finele fiecărei lucrări. La finalul îndrumarului este prezentată şi o scurtă bibliografie, de unde studenţii pot accesa şi alte resurse din domeniu, care să-i îndrume spre o cunoaştere tot mai îmbunătăţită a tehnologiilor web, mai ales cu asaltul de curând al conceptului de cloud computing, prin care majoritatea aplicaţiilor de desktop sunt transferate către lumea web. Avantajul major al acestei noi tehnologii constă în accesarea documentelor create din orice locaţie de pe glob, deoarece tehnologia cloud computing permite stocarea documentelor în marile centre de date ale unor companii IT cu un renume mondial, precum Microsoft, IBM, Google, Adobe etc.

-2-

TEHNOLOGÎÎ WEB - Î ndrumar de laborator LUCRAREA NR. 1 : Limbajul HTML – Introducere, structura unui document HTML, formatarea textului Tematica lucrării

I.

   

Teoria lucrării de laborator

II. 

Ce este HTML? Structura unui document HTML. Etichete HTML pentru generarea textelor. Exemple primare.

Ce este HTML?

HTML (Hyper Text Markup Language) reprezintă un limbaj de marcare, alcătuit dintr-un set de etichete de marcare, prin care este descris conţinutul unui document. Documentele HTML se mai numesc şi pagini web. 

Structura unui document HTML

Structura de bază a unui document HTML este compusă din: -

Declaraţie tip document: Ex. este declaraţia pentru standardul HTML5. Secţiunea … , în care sunt trecute informaţii ce se execută odată cu încărcarea paginii web. Corpul documentului, setat de eticheta … , în care se introduc elementele ce vor fi afişate în pagina web. Orice pagină web se încheie cu eticheta

Codul HTML de bază pentru un document arată astfel:

-3-

Limbajul HTML nu este case-sensitive, elementele scriindu-se cu litere mari sau mici. 

Elemente (etichete) HTML

Elementele HTML reprezintă etichete de inserare şi formatare a conţinutului într-o pagină web. Ele pot defini paragrafe, tabele, liste, imagini, formulare, clipuri multimedia etc. Structura unui element este următoarea: conţinut Spre exemplu, în codul HTML

Acesta este un paragraf

, elementul utilizat este

, care defineşte un paragraf. Fiecare element conţine o etichetă de deschidere şi una de închidere. Cea de închidere se marchează cu caracterul ‘ / ’ înaintea numelui etichetei. HTML conţine o serie de elemente pentru generarea conţinutului text. În tabelul 1 sunt descrise principalele astfel de elemente.

Tabelul 1. Elemente HTML pentru generarea de text Afişare

Element HTML text normal

text normal

text bold

text bold -4-

text cursiv

text cursiv

text subliniat

text subliniat

text taiat

text taiat

^exponent

textexponent

_indice

textindice

Citat

Citat

evidentiat

evidentiat

text continand cod de computer

text continand cod de computer

text ingrosat

text ingrosat

mare

mare

mic

mic

font rosu

font roşu

font Courier

font Courier

font size=6

font size=6

text aliniat pe centru text aliniat la stanga



text aliniat la dreapta

Titlu 1

Titlu 1

Titlu 2

Titlu 2

Titlu 3

Titlu 3

Titlu 4

Titlu 4 -5-

Titlu 5

Titlu 5

Titlu 6

Titlu 6

Exemplu de pagină web cu text formatat:

Rezultatul afişat în browser-ul web este cel din figura 1. -6-

Figura 1. Exemplu de pagină web cu formatare de text.

III.

Modul de lucru 1.

Să se creeze o pagină web, care să afişeze următoarele:  3 tipuri de titluri (heading); -7-

  

3 paragrafe de dimensiuni diferite; paragrafele de mai sus să se formateze cu text îngroşat, subliniat, italic, tăiat, superscript şi subscript; separaţi paragrafele prin linii orizontale.

-8-

TEHNOLOGÎÎ WEB - Î ndrumar de laborator LUCRAREA NR. 2 : Limbajul HTML – Imagini, legături, liste, tabele

Tematica lucrării

I. 1. 2. 3. 4.

II.

Afişarea imaginilor în paginile web Crearea legăturilor web (hyperlink-uri) Generarea listelor ordonate şi neordonate Crearea şi formatarea tabelelor în HTML

Teoria lucrării de laborator 1. Afişarea imaginilor în paginile web

Elementul de setare a unei imagini într-o pagină web este format din eticheta . Exemplu de cod HTML pentru inserarea unei imagini:

sau

Rezultatul afişat în browser va fi cel din figura 2.1. de mai jos.

-9-

2. Crearea legăturilor web (hyperlink-uri) Legăturile web reprezintă direcţii de acces către alte adrese web de pe Internet. În HTML hyperlink-urile se creează cu eticheta tip ancoră, …. Exemplu de 3 legături web către 3 universităţi din ţara noastră:

Rezultatul afişat va fi:

Adresele direcţionate de hyperlink se pot deschide în fereastra părinte sau într-una nouă, utilizând atributul „_target”, care poate lua valorile: _blank | _parent | _self | _top Exemplu de utilizare a atributului „_target”: - 10 -

3. Generarea listelor ordonate şi neordonate 

Listele ordonate (numerotate) se inserează utilizând setul de etichete:

1. …

, (OL = Ordered List).

Exemplu de listă ordonată generată în HTML:



Listele neordonate (nenumerotate) sunt create de setul de etichete:

• …

, (UL = Unordered List). Exemplu de listă ordonată generată în HTML:

În cadrul listelor se pot introduce texte, imagini, legături web etc.

4. Crearea şi formatarea tabelelor în HTML Tabelul este un element HTML foarte utilizat, atât pentru structurarea unei pagini web, cât şi pentru gruparea informaţiilor. Structura unui tabel HTML este: - 11 -

- defineşte o linie (un rând) de tabel - defineşte o celulă de tabel

Fiecărui tabel i se poate insera şi un cap de tabel, utilizând eticheta (table heading). Evidenţierea conturului unui tabel se setează prin atributul „border”. De asemenea, celule pot fi spaţiate atât în interior, cât şi în exterior, utilizând atributele „cellpadding” şi „cellspacing”. Exemplu de tabel generat în HTML:

Atunci când se doreşte ca o celulă să se întindă pe mai multe linii sau coloane se utilizează atributul „colspan” (pentru coloane) şi „rowspan” (pentru linii). - 12 -

Exemplu de tabel cu o celulă extinsă pe 2 coloane:

III.

Modul de lucru 1. Creaţi o pagină web în care să inseraţi următoarele elemente HTML:      

un titlu de pagină

şi un paragraf. 3 imagini oarecare, cu titlu. 3 legăturilor web care să utilizeze valori diferite pentru atributul „target”. o listă ordonată cu principalele monezi de schimb valutar o listă neordonată cu hobby-urile dvs. un tabel în care să apară şi celule care se întind pe mai multe coloane sau linii.

- 13 -

TEHNOLOGÎÎ WEB - Î ndrumar de laborator LUCRAREA NR. 3 : Limbajul HTML – Cadre, formulare I.

Tematica lucrării 1. Lucrul cu cadre în paginile web 2. Generarea formularelor HTML

II.

Teoria lucrării de laborator 1. Lucrul cu cadre în paginile web

Cadrul (frame) reprezintă o secţiune din pagina web, un container de conţinut, separat de restul site-ului. Cadrele sunt utilizate pentru separarea de conţinut, ajutând la structurarea mai bună a site-ului. Standardul HTML 4.01 include 2 tipuri de cadre şi <IFRAME>. a) Cadrul defineşte o fereastră (un cadru) într-un set de cadre (). Exemplu de pagină web cu un set de 3 cadre, fiecare cadru reprezentând o pagină web separată.

Rezultatul afişat în navigatorul web este cel din figura 3.1 de mai jos.

- 14 -

Figura 3.1. Setarea cadrelor în HTML Notă Elementele şi nu mai sunt suportate în standardul HTML5.

b) Dacă se doreşte inserarea unei pagini web într-un cadru în interiorul paginii principale, se foloseşte eticheta <IFRAME>. Exemplu de mai jos încarcă într-un cadru IFRAME site-ul universităţii Hyperion.

Rezultatul afişat este cel din figura 3.2 de mai jos:

- 15 -

Figura 3.2. Cadru IFRAME încărcat cu conţinut din alt site. Notă Elementul IFRAME este suportat şi în standardul HTML5.

2. Generarea formularelor HTML Aproape orice portal web existent la ora actuală conţine cel puţin o pagină cu un formular de procesare date: formular de autentificare, formular de contact, formular de întrebări, formular de sondaj de opinie, formular de introducere date diverse etc. În HTML formularele se creează cu elementul FORM. În cadrul unui formular pot fi definite următoarele câmpuri de introducere a datelor utilizator: - 16 -

a) câmp introducere text : Exemplu:

b) câmp introducere parolă : Exemplu:

c) butoane radio : Exemplu:

d) căsuţe de validare (checkbox) : Exemplu:

- 17 -

e) arie de text : ... Într-o arie de text se poate introduce text de dimensiuni mai mari. Exemplu:

f) listă drop-down : Pentru selectarea unei opţiuni dintr-o listă se utilizează elementul SELECT. Acesta conţine pentru fiecare opţiune câte un element OPTION. Exemplu:

g) selecţie fişier : Exemplu>

h) câmp introducere adresă de e-mail : - 18 -

Dacă adresa nu este validă sintactic, navigatorul web va da un mesaj de eroare: Exemplu:

i) buton : (HTML 4.01) sau (HTML 5)

Butoanele reprezintă elemente de formular prin care utilizatorul declanşează execuţia unei acţiuni (funcţie script, procesare date formular etc.) Exemplu:

j) buton trimitere date formular spre procesare :

Exemplu:

k) buton ştergere date din formular : Exemplu: - 19 -

În continuare se prezintă un exemplu de formular ce conţine mai multe elemente.

În navigatorul web se va afişa formularul de mai jos.

- 20 -

Datele dintr-un formular se trimit spre procesare prin apăsarea butonului referit de elementul HTML „submit”. Acestea sunt preluate de o funcţie specificată în eticheta

şi care poate fi definită într-un limbaj tip scripting (PHP, JavaScript, VBScript, ASP etc.), iar metoda de prelucrare a datelor se defineşte prin atributul METHOD, luând valorile „GET” sau „POST”.

III.

Modul de lucru 1. Să se creeze un document HTML care să conţină 2 cadre (frameuri), unul la stânga cu o lăţime de 25% şi unul la dreapta (75%). 2. Să se creeze un alt document HTML care să conţină:  un titlu, 2 paragrafe, o imagine şi un tabel. 3. Să se creeze o altă pagină web care să conţină un formular HTML, în care să fie prezente toate elementele de formular prezente în lucrarea de laborator.

- 21 -

TEHNOLOGÎÎ WEB - Î ndrumar de laborator LUCRAREA NR. 4 : Limbajul CSS – Introducere, tipuri de formatare CSS, formatări de bază Tematica lucrării

I.

1. Ce reprezintă CSS? Sintaxa CSS 2. Formatarea elementelor de fundal, text, font, legături web, liste, tabele şi imagini utilizând limbajul CSS.

Teoria lucrării de laborator

II.

1. Ce reprezintă CSS? 

CSS este acronimul pentru Cascading Style Sheets (Foi de stil în cascadă)



Stilurile definesc cum sunt afişate elementele HTML



Stilurile au fost introduse în standardul HTML 4.0 pentru a rezolva problema formatării elementelor



Se pot utiliza foi de stil externe pentru uşurinţa utilizării lor

Sintaxa CSS O regulă CSS este alcătuită din două părţi: 

SELECTOR. Selectorul este de obicei elementul HTML care se doreşte a fi formatat şi poate fi definit prin: o numele elementului HTML, o clasa elementului HTML (definită prin caracterul ’.’ – punct). În acest caz toate elementele care au setată clasa „centrat” vor fi aliniate pe centrul elementului părinte.

- 22 -

o identificatorul elementului HTML (ID-ul), definit prin caracterul #, astfel că orice element cu ID-ul „citat” va fi formatat cu font italic. Exemplu de utilizare a selectorului CSS, în cele trei moduri:



una sau mai multe DECLARAŢII. O declaraţie este compusă dintr-o proprietate a elementului (caracteristică) şi valoarea dată de utilizator pentru acea proprietate.

Figura 4.1 descrie sintaxa unei reguli CSS.

Figura 4.1. Sintaxa unei reguli de formatare CSS. Regulile CSS se scriu în 3 locaţii, la latitudinea utilizatorului: 

între etichetele şi unde se introduce elementul