1

UNIVERSITATEA TRANSILVANIA DIN BRAOV

CCeennttrruull ddee nnvvmmnntt llaa DDiissttaann

ii nnvvmmnntt ccuu FFrreeccvveenn RReedduuss

FFAACCUULLTTAATTEEAA DDEE MMAATTEEMMAATTIICC II IINNFFOORRMMAATTIICC

PPRROOGGRRAAMM DDEE LLIICCEENN:: IINNFFOORRMMAATTIICC

Tehnologii Web CCUURRSS PPEENNTTRRUU NNVVMMNNTT LLAA DDIISSTTAANN

AAUUTTOORRII::

Conf. Dr. Livia Sngeorzan

Lector Dr. Nicoleta Enache-David

Prep. Corina Nnu

AANNUULL IIIIII

22001133--22001144

2

Cuprins Introducere ................................................................................................................................. 6 Modulul I. Introducere n tehnologiile Web ............................................................................. 10

Introducere ........................................................................................................................... 10 Competene ........................................................................................................................... 10 U1. World Wide Web i principii generale de web design .................................................. 11 M1.U1.1. Introducere ........................................................................................................... 11 M1.U1.2. Obiectivele unitii de nvare ............................................................................ 12 M1.U1.3. Evoluia Web-ului ................................................................................................ 12 M1.U1.4 Browsere WEB ..................................................................................................... 13 M1.U1.5 Primii pai ctre construcia unui site ................................................................... 14 M1.U1.6. Alinierea ............................................................................................................... 15 M1.U1.7. Proximitatea ......................................................................................................... 18 M1.U1.8. Repetiia ............................................................................................................... 20 M1.U1.9. Contrastul ............................................................................................................. 21 M1.U1.11. Test de evaluare a cunotinelor ......................................................................... 23 M1.U1.10. Rezumat ............................................................................................................. 24 M1.U1.11. Test de evaluare a cunotinelor ......................................................................... 25

Modulul II. HTML (Hyper Text Markup Language) .............................................................. 26 Introducere ........................................................................................................................... 26 Competene ........................................................................................................................... 27 U1. Crearea unui document HTML i stilurile blocurilor text ............................................. 28 M2.U1.1. Introducere ........................................................................................................... 28 M2.U1.2. Obiectivele unitii de nvare ............................................................................ 28 M2.U1.3. Structura de baz a unui document HTML .......................................................... 29 M2.U1.4. Tag-uri HTML ..................................................................................................... 30 M2.U1.5. Tag-uri din cadrul documentului HTML ............................................................. 31 M2.U1.6. Culori, fonturi, margini ........................................................................................ 31 M2.U1.7. Tag-ul Body ......................................................................................................... 32 M2.U1.8. Tag-ul Basefont (textul de baz) .......................................................................... 35 M2.U1.9. Stiluri fizice .......................................................................................................... 36 M2.U1.10. Stiluri logice ....................................................................................................... 41 M2.U1.11. Tag-ul font (configurarea font-urilor) ................................................................ 43 M2.U1.12. Blocuri de texte .................................................................................................. 46 M2.U1.13. Linii orizontale ................................................................................................... 51 M2.U1.14. Rezumat ............................................................................................................. 52 M2.U1.15. Test de evaluare a cunotinelor ......................................................................... 53 U2. Tabele ............................................................................................................................ 54 M2.U2.1. Introducere ........................................................................................................... 54 M2.U2.2. Obiectivele unitii de nvare ............................................................................ 54 M2.U2.3. Tag-ul ..................................................................................................... 54 M2.U2.4. Alinierea tabelului n pagina web ........................................................................ 57 M2.U2.5. Precizarea culorilor de fond pentru un tabel ........................................................ 58 M2.U2.6. Dimensionri ........................................................................................................ 59 M2.U2.7. Rezumat ............................................................................................................... 63 M2.U2.8. Test de evaluare a cunotinelor ........................................................................... 63 U3. Imagini i ancore ........................................................................................................... 65 M2.U3.1. Introducere ........................................................................................................... 65 M2.U3.2. Obiectivele unitii de nvare ............................................................................ 65

3

M2.U3.3. Tagul ........................................................................................................ 65 M2.U3.4. Legaturi (link-uri) ................................................................................................ 70 M2.U3.5. Hri de imagini ................................................................................................... 75 M2.U3.6. Rezumat ............................................................................................................... 77 M2.U3.7. Test de evaluare a cunotinelor ........................................................................... 77 U4. Formulare ...................................................................................................................... 79 M2.U4.1. Introducere ........................................................................................................... 79 M2.U4.2. Obiectivele unitii de nvare ............................................................................ 79 M2.U4.3. Tagul ....................................................................................................... 80 M2.U4.4. Tag-ul ..................................................................................................... 80 M2.U4.5. Liste de selecie . ......................................... 81 M2.U4.6. Cmpuri de editare multiple ................................................................................ 83 M2.U4.7. Rezumat ............................................................................................................... 85 M2.U4.8. Test de evaluare a cunotinelor ........................................................................... 85 Tem de control .................................................................................................................... 86

Modulul III. Reguli CSS (Cascading Style Sheets) ................................................................. 87 Introducere ........................................................................................................................... 87 Competene ........................................................................................................................... 87 U1. Reguli CSS la nivel teoretic .......................................................................................... 89 M3.U1.1. Introducere ........................................................................................................... 89 M3.U1.2. Obiectivele unitii de nvare ............................................................................ 89 M3.U1.3. Integrarea regulilor CSS ntr-un fiier HTML ..................................................... 90 M3.U1.4. Pseudo-clase i pseudo-elemente ......................................................................... 91 M3.U1.5. Precedena regulilor ............................................................................................. 92 M3.U1.6. Atribute CSS ........................................................................................................ 93 M3.U1.7. Rezumat ............................................................................................................... 97 M3.U1.8. Test de evaluare a cunotinelor ........................................................................... 98 U2. Exemplificarea regulilor CSS ...................................................................................... 100 M3.U2.1. Introducere ......................................................................................................... 100 M3.U2.2. Obiectivele unitii de nvare .......................................................................... 100 M3.U2.3. Exemplificarea utilizrii foilor de stil ................................................................ 100 M3.U2.4. Test de evaluare a cunotinelor ......................................................................... 119 Tem de control .................................................................................................................. 120

Modulul IV. JavaScript .......................................................................................................... 121 Introducere ......................................................................................................................... 121 Competene ......................................................................................................................... 122 U1. Limbajul JavaScript ..................................................................................................... 123 M4.U1.1. Introducere ......................................................................................................... 123 M4.U1.2. Obiectivele unitii de nvare .......................................................................... 123 M4.U1.3. Avantajele utilizrii limbajului JavaScript ........................................................ 124 M4.U1.4. nglobarea instruciunilor JavaScript n HTML ................................................. 126 M4.U1.5. Executarea scripturilor ....................................................................................... 126 M4.U1.6. Tipuri de date, variabile i operatori .................................................................. 126 M4.U1.7. Instruciuni i funcii predefinite ........................................................................ 127 M4.U1.8. Manipularea tag-urilor/nodurilor/elementelor ................................................... 132 M4.U1.9. Handlere de evenimente ..................................................................................... 134 M4.U1.10. Rezumat ........................................................................................................... 136 M4.U1.11. Test de evaluare a cunotinelor ....................................................................... 136 U2. Obiecte JavaScript ....................................................................................................... 138 M4.U2.1. Introducere ......................................................................................................... 138

4

M4.U2.2. Obiectivele unitii de nvare .......................................................................... 138 M4.U2.3. Obiectul window ................................................................................................ 139 M4.U2.4. Obiectul location ................................................................................................ 141 M4.U2.5. Obiectul document ............................................................................................. 142 M4.U2.6. Obiectul forms ................................................................................................... 143 M4.U2.7. Obiectul image ................................................................................................... 145 M4.U2.8. Obiectul date ...................................................................................................... 145 M4.U2.9. Obiectul navigator .............................................................................................. 146 M4.U2.10. Obiectul layers (all) ......................................................................................... 146 M4.U2.11. Obiectul Math .................................................................................................. 151 M4.U2.12. Obiectul Array ................................................................................................. 151 M4.U2.13. Obiectul String ................................................................................................. 152 M4.U2.14. Rezumat ........................................................................................................... 154 M4.U2.15. Test de evaluare a cunotinelor ....................................................................... 155 U3. Aplicaii complexe n JavaScript ................................................................................. 156 M4.U3.1. Introducere ......................................................................................................... 156 M4.U3.2. Obiectivele unitii de nvare .......................................................................... 156 M4.U3.3. nvarea JavaScript prin exemple ..................................................................... 157 M4.U3.4. Test de evaluare a cunotinelor ......................................................................... 170 Tem de control .................................................................................................................. 170

Modulul V. Alte tehnologii pentru realizarea paginilor web ................................................. 172 Introducere ......................................................................................................................... 172 Competene ......................................................................................................................... 172 U1. Limbajul PHP .............................................................................................................. 173 M5.U1.1. Introducere ......................................................................................................... 173 M5.U1.2. Obiectivele unitii de nvare .......................................................................... 173 M5.U1.3. Primii pai n PHP .............................................................................................. 174 M5.U1.4. Noiuni indroductive de sintax ........................................................................ 175 M5.U1.5. Aplicaii complexe utiliznd limbajele PHP, HTML i JavaScript ................... 178 M5.U1.6. Rezumat ............................................................................................................. 182 M5. U1.7. Test de evaluare a cunotinelor ........................................................................ 183 U2. Flex3 ............................................................................................................................ 184 M5.U2.1. Introducere ......................................................................................................... 184 M5.U2.2. Obiectivele unitii de nvare .......................................................................... 184 M5.U2.3. Elemente de baz ale lui Adobe Flex3 ............................................................... 185 M5.U2.4. Limbajul MXML ............................................................................................... 187 M5.U2.5. Rezumat ............................................................................................................. 193 M5.U2.6. Test de evaluare a cunotinelor ......................................................................... 193 U3. Lumea virtual pe Internet .......................................................................................... 195 M5.U3.1. Introducere ......................................................................................................... 195 M5.U3.2. Obiectivele unitii de nvare .......................................................................... 196 M5.U3.3. Produse soft pentru realizarea graficii 3D ......................................................... 196 M5.U3.4. Introducere n limbajul VRML .......................................................................... 199 M5.U3.5. Noduri n VRML V2.0 ....................................................................................... 201 M5.U3.6. Evenimente n VRML ........................................................................................ 211 M5.U3.7. Noduri speciale .................................................................................................. 217 M5.U3.8. Interpolare n VRML ......................................................................................... 218 M5.U3.9. Rezumat ............................................................................................................. 220 M5.U3.10. Test de evaluare a cunotinelor ....................................................................... 221 Tem de control .................................................................................................................. 222

5

Modulul VI. Prelucrarea imaginilor cu Gimp 2.6 .................................................................. 223 Introducere ......................................................................................................................... 223 Competene ......................................................................................................................... 223 U1. Concepte de baz n GIMP 2.6 .................................................................................... 224 M6.U1.1. Introducere ......................................................................................................... 224 M6.U1.2. Obiectivele unitii de nvare .......................................................................... 224 M6.U1.3. Ferestre de lucru n GIMP 2.6 ........................................................................... 224 M6.U1.4. Lucrul cu imagini: salvare, dimensionare, comprimare, decupare, rotire ......... 226 M6.U1.5. Crearea unui logo ............................................................................................... 229 M6.U1.6. Crearea unui banner ........................................................................................... 229 M6.U1.7. Realizarea unui GIF animat ............................................................................... 230 M6.U1.8. Lucrul cu filtre n GIMP .................................................................................... 233 M6.U1.9. Animaii complexe ............................................................................................. 236 M6.U1.10. Rezumat ........................................................................................................... 237 M6.U1.11. Test de evaluare a cunotinelor ....................................................................... 238 Bibliografie ......................................................................................................................... 240

6

Introducere Cursul Tehnologii Web prezint o descriere a celor mai importante tehnologii web

utiflizate n dezvoltarea site-urilor web i aplicaiilor pentru Internet. Pe lng principiile de

baz folosite in web design, cursul prezint elemente teoretice i practice de lucru cu limbajul

HTML pentru crearea paginilor web, reguli CSS, limbajul Java Script, precum i utilizarea

elementelor grafice in web design.

Acest curs se adreseaz studenilor de la specializarea Informatic, nvmnt la

distan, dar i tuturor studenilor, inginerilor sau celor care doresc sa aprofundeze elementele

de web design.

Obiectivele cursului

Dup ce vor parcurge coninutul acestui curs, studentii vor putea s creeze

propriul site web, vor putea s i mbunteasc aspectul folosind stiluri n

cascad (CSS2 i CSS3), vor putea s creeze formulare interactive, folosind

Javascript, ca tehnologie de lucru pe partea de client.

Studenii vor putea deasemenea s realizeze site-uri care s aib n spate o baz de

date i s interacioneze cu un server (serverul Apache). Pentru aceasta vor putea

folosi PHP i MySql. Pentru realizarea de animaii uor ncorporabile ntr-un site

web, studenii vor nva s foloseasc VRML, iar pentru procesarea imaginilor

vor nva s lucreze cu GIMP.

Competene conferite

Dup parcurgerea materialului, studentul va fi capabil s:

neleag utilitatea tehnologiilor web n realizarea site-urilor

neleag principiile de design

realizeze proprul site care s includ diverse elemente HTML

stilizeze modul de afiare al informaiilor pe pagin folosind CSS

realizeze pagini web interactive (pe parte de client) folosind JavaScript

realizeze pagini web interactive (pe parte de server) folosind PHP

utilizeze limbajul Flex3 pentru uurina n realizarea unei aplicaii web

neleag modul de manifestare a lumii virtuale n Internet

realizeze propriile aplicaii de grafic 3D (static sau animat) pe care

7

s le includ mai apoi n site-uri

Resurse i mijloace de lucru

Pentru a parcurge acest curs i pentru a putea rula exemplele de apliaii

oferite de ctre acesta sau pentru a putea realiza aplicaiile propuse ca tem,

studenii vor avea nevoie de urmtoarele resurse materiale i logistice:

- computer

- conexiune la Internet

- cel puin un browser instalat pe computer (Internet Explorer, Chrome,

Mozilla Firefox, Opera, etc)

- un soft pentru a putea realiza aplicaii PHP (WinLAMP, XAMPP, etc)

- un soft pentru a putea realiza aplicaii n Flex3 (Flex SDK)

- un plug-in pentru browser pentru a putea vizualiza aplicaiile VRML

(Cortona 3D Viewer, Cosmo Player, FreeWRL, OpenVRML, etc)

- un software pentru prelucrare de imagini (GIMP 2.6)

Structura cursului

Cursul de fa conine 6 module, respectiv: Modulul I: Introducere n tehnologiile

Web, Modulul II: HTML (Hyper Text Markup Language), Modulul III: Reguli

CSS (Cascading Style Sheets), Modulul IV: JavaScript, Modulul V: Alte

tehnologii pentru realizarea paginilor web i Modulul VI: Prelucrarea imaginilor

cu Gimp 2.6.

Modulul I conine o unitate de nvare, Modulul II este format din 4 uniti de

nvare i o tem de control, Modulul III este structurat pe 2 uniti de nvare i

are i acesta o tem de control, Modulul IV conine 3 uniti de nvare i o tem

de control, Modulul V este format din 3 uniti de nvare i o tem de control, iar

Modulul VI este format dintr-o singur unitate de nvare.

n total, numrul temelor de control este 4, fiecare dintre acestea reprezentnd

din nota de laborator. Enunurile temelor de control le vor fi transmise studenilor

i pe platforma eLearning, iar rezultatele vor fi ncrcate tot acolo.

8

Cerine preliminare

Nu sunt necesare cerine preliminare n vederea parcurgerii acestui curs i a

asimilrii informaiilor prezentate.

Durata medie de studiu individual

Fiecare unitate de nvare poate fi parcurs n 2 ore.

Evaluarea

Nota final pentru aceast disciplin este compus din:

- 30% pentru temele de control de pe parcursul semestrului

- 30% pentru proiectul de final de semestru

- 40% evaluarea scris

9

Chestionar evaluare prerechizite Rspundei la urmtoarele ntrebri:

1. Ce este Internetul?

2. Care este utilitatea Internetului?

3. Care este scopul realizrii paginilor web?

4. Dai exemplu de minim 3 site-uri pe care le-ai accesat.

5. Dai exemplu de aplicaii de comunicare online.

6. Ce este un browser web?

7. Dai exemplu de minim 3 browsere web.

8. Ce limbaje de realizare a paginilor web cunoatei?

10

Modulul I. Introducere n tehnologiile Web Cuprins Introducere .................................................................................................................... 10 Competene ................................................................................................................... 10 U1. World Wide Web i principii generale de web design ........................................... 11

Introducere Principala atracie a Internetului o reprezint World Wide Web-ul. Acesta a

constituit partea cu dezvoltarea cea mai rapid i cea mai popular a Internetului (cu excepia, probabil, a fluxului voluminos de e-mail de pe tot globul). Din punct de vedere tehnic, Web-ul nu este dect o parte a Internetului sau mai corect spus, o component, care permite navigarea prin Internet.

Web-ul reprezint o interfa, o fereastr spre Internet sau o metod de a ajunge n locurile dorite.

Noiunile de interfa i navigare sunt importante n realizarea unui design atragator, dar necesit i puin gndire i planificare. Conceptele utilizate sunt lucruri foarte simple, care vor schimba rapid i cu uurin banalele pagini Web, n pagini cu aspect profesionist.

Cele patru principii de baz, care permit ca o pagin Web s arate clar, ordonat i profesionist sunt: alinierea, proximitatea, repetarea i contrastul.

Acetia sunt factorii de baz ai oricrei lucrri tiprite pe ecran sau

altundeva.

Competene

La sfritul acestui modul studenii vor fi capabili: s neleag importana web design-ului n realizarea unui site s defineasc noiunea de browser web i s o exemplifice s utilizeze un browser web s neleag principiile de baz ale web designului: alinierea, proximitatea,

repetarea, contrastul s atrag atenia prin design asupra informaiilor importante atunci cnd

realizeaz o pagin web

11

U1. World Wide Web i principii generale de web design Cuprins

U1.1. Introducere .................................................................. Error! Bookmark not defined. U1.2. Obiectivele unitii de nvare ................................... Error! Bookmark not defined. U1.3. Evoluia Web-ului ...................................................... Error! Bookmark not defined. U1.4 Browsere WEB ............................................................ Error! Bookmark not defined. U1.5 Primii pai ctre construcia unui site .......................... Error! Bookmark not defined. U1.6. Alinierea ..................................................................... Error! Bookmark not defined. U1.7. Proximitatea ................................................................ Error! Bookmark not defined. U1.8. Repetiia ...................................................................... Error! Bookmark not defined. U1.9. Contrastul ................................................................... Error! Bookmark not defined. U1.11. Test de evaluare a cunotinelor ............................... Error! Bookmark not defined. U1.10. Rezumat .................................................................... Error! Bookmark not defined. U1.11. Test de evaluare a cunotinelor ............................... Error! Bookmark not defined.

M1.U1.1. Introducere

La ora actual n lume exist milioane de calculatoare, care sunt folosite n

cele mai diverse domenii, multe dintre aceste calculatoare sunt legate ntre ele, interconectate n forma reelelor de calculatoare. Multe dintre aceste reele sunt la rndul lor conectate ntre ele, formnd inter-reele (reele de reele de calculatoare). Denumirea de internet desemneaz o reea de reele ("net" nsemnnd n limba englez "reea"). Cea mai mare intereea public (reea de reele de calculatoare cu acces public) este reeaua Internet.

Principala atracie a Internetului o reprezint World Wide Web-ul. Acesta a constituit partea cu dezvoltarea cea mai rapid i cea mai popular a Internetului (cu excepia, probabil, a fluxului voluminos de e-mail de pe tot globul). Din punct de vedere tehnic Web-ul, nu este dect o parte a Internetului sau mai corect spus, o component, care permite navigarea prin Internet.

Web-ul reprezint o interfa, o fereastr spre Internet sau o metod de a ajunge n locurile dorite. Popularitatea sa deriv din trei aspecte distincte i anume:

Mascheaz limbajul pretenios folosit pentru adresele Internet i pentru comenzile specifice.

Grupeaz mai multe componente diferite ale Internetului ntr-o singur interfa.

Permite ca pe lng citirea textului s se vizualizeze imagini, s se asculte sunete i chiar s se urmreasc filme (n raport de resursele calculatorului - client).

n ceea ce privete realizarea unui site web cu un design atragator, noiunile de interfa i navigare sunt importante, dar necesit i un pic de gndire i planificare. Conceptele utilizate sunt lucruri foarte simple, care vor schimba rapid i cu uurin banalele pagini Web, n pagini cu aspect mult mai profesionist.

Cele patru principii de baz, care permit ca o pagin Web s arate clar, ordonat i profesionist sunt: alinierea, proximitatea, repetarea i contrastul.

12

M1.U1.2. Obiectivele unitii de nvare Aceast unitate de nvare i propune ca obiectiv principal o iniiere a studenilor n interesanta lume a tehnologiilor web. La sfritul acestei uniti de nvare studenii vor fi capabili s:

neleag importana web design-ului i a tehnologiilor web n realizarea unui site profesionist

defineasc noiunea de browser web i s aduc exemple edificatoare utilizeze diverse browsere web tie s realizeze o pagin web cu elementele corect aliniate grupeze corect elementele care se invecineaz pe pagin web, att din

punct de vedere fizic ct i logic s identifice elementele din pagina web a cror proprieti ar trebui s se

repete s atrag atenia asupra informaiilor principale dintr-o pagin web pe baza

contrastului cu celelalte informaii

Durata medie de parcurgere a primei uniti de nvare este de 2 ore.

M1.U1.3. Evoluia Web-ului Un pas important n evoluia Web-ului a fost dezvoltarea browsererelor grafice, care

puteau fi rulate pe un PC desktop sau pe un Macintosh, permind utilizatorului s foloseasc tehnicile familiare disponibile i n alte programe, ncorpornd formate de text i grafic n ecranul de navigare etc. Primul program de acest tip a fost NCSA Mosaic, dezvoltat de centrul naional pentru aplicaii de supercalculatoare i distribuit gratuit.

Web-ul a permis browserelor s afieze imagini chiar n mijlocul textului, fr a fi nevoie s se cunoasc metoda de decodificare a fiierelor. Specialitii n mass media afirm c o imagine conteaz ct o mie de cuvinte, imaginile din articolele de ziar sau din emisiunile TV fiind incomparabil mai sugestive dect iruri lungi de text scris la main. Deci acest ingredient final a permis ca Web-ul s par att sensibil, ct i interesant pentru persoana care nu ar fi nvat niciodat ce nseamn o expresie obinuit in Unix.

Creatorii de browse Nestcape i Microsoft ncearc fiecare s dezvolte soluii globale care s transforme produsele proprii n "platforme" ale tuturor operaiilor din Internet. La ora actual existz companii care ofer conturi Internet gratuite, avnd o interfa pentru e-mail bazat pe Web. Gratuitatea gzduirii site-urilor este condiionat de meninerea pe ecran a unei ferestre publicitare. Exist i alte modaliti de a intra in lumea Internetului, fr a fi nevoie de un calculator, cum ar fi Web TV (pentru care este nevoie de un televizor, un modem, o tastatur i o telecomand), sau a unui modem, cum ar fi DirectPC (este nevoie de un calculator i de o anten special pentru satelit).

13

Dezvoltarea Internetului, combinat cu apariia reelelor de tip Internet locale, de dimensiuni mai mici, care funcioneaz dup principiile Internetului, a dus la cerine din partea utilizatorului pentru ca partea de software s i ajute s recupereze documentele de la distan, s colaboreze prin intermediul legturilor de reea i s salveze sau s publice documente. Pentru a ndeplini aceste cerine, productorii de software au adugat componentele Internet la programele lor.

O mare parte din elegana Internetului const n cantitatea impresionant de putere de prelucrare i de stocare a programelor de dimensiuni mari i a informaiilor dense, operaii care au loc n Internet i nu n calculatorul propriu. Calculatorul propriu - fie c este un PC, un Mac sau o staie de lucru Unix - rmne doar o ramp de lansare ctre lumea Internetului. Aceast structur comun de faciliti Internet este referit uneori cu expresia client-server. Calculatorul personal (sau programul care ruleaz pe acesta) este clientul, iar sursa de informaii sau site-ul World Wide Web este serverul. Serverele reprezint depozite centralizate de informaii sau de manipulatori specializai pentru anumite tipuri de trafic. Clientul nu trebuie dect s se conecteze la serverul potrivit i astfel foarte multe lucruri interesante vor fi la dispoziia sa, fr a fi nevoie s suprancarce calculatorul propriu. Acesta este unul din principalele motive pentru care nu are importan ce tip de calculator se utilizeaz.

WWW este un sistem distribuit. Informaiile sunt plasate n mii de site-uri. Cnd utilizatorul dorete o informaie, apeleaz site-ul care a publicat-o. Fiecare site i fiecare pagin de informaii au o adres unic numit URL (Uniform Resource Locator URL = identificator uniform al resursei). Aceat informaie publicat ntr-un site poate fi oricnd actualizat de autorul site-ului.WWW devine din ce n ce mai mult un sistem interactiv. Evoluia tehnologiilor Web l transform ntr-un mediu de comunicare. De exemplu, includerea formularelor n paginile Web permite colectarea de informaii de la utilizator.

Termenii care se vehiculeaz n lumea Web-ului sunt: Host Computer legat la Internet care gzduiete unul sau mai multe servere; Server Web Software care administreaz site-uri web; Site Web Colecie structurat de pagini web; Pagin (document) web Coninutul unui fiier, afiat ca urmare a unei cereri a

utilizatorului; Pagin home Pagina de intrare a unui site. Un host poate gzdui mai multe tipuri de servere (FTP, Gopher, Web). Fiecare tip de

server are propriul tip de comunicaie cu Internet-ul. Protocolul de comunicaie al server-elor web se numete HTTP (Hyper Text Transformer Protocol).

Un server web administreaz mai multe site-uri web. Un site conine una sau mai multe pagini ntre care exist legturi. Pagina home este intrarea n site.

M1.U1.4 Browsere WEB

Pentru a accede la web, utilizatorul trebuie s aib instalat pe computerul su un browser.

Browser-ul este o aplicaie cu trei funcii principale: accesul la informaii, formatare i afiarea informaiilor. Utilizatorul furnizeaz browser-ului adresa paginii dorite (URL-ul). Browser-ul solicit conectarea la server-ul web, pe baza protocolului HTTP. O dat conectarea acceptat, server-ul transmite browser-ului fiierul cerut. Browser-ul formateaz pagina i o afieaz pe monitorul utilizatorului.

Formatarea se face n funcie de: indicaiile de formatare coninute n fiierul primit;

14

caracteristicile platformei cu care lucreaz utilizatorul. Piaa are o ofert bogat de browsere disponibile pentru diverse platforme. Exist

browsere operaionale pe sisteme cu interfa grafic (Macintosh, Windows), dar i pe sisteme cu interfa exclusiv textual. Poziia dominant pe pia este ocupat de Microsoft Internet Explorer (IE) i Netscape Navigator (NN). IE este operaional sub Windows (ncepnd cu 3.1), sub UNIX i pentru calculatoare Apple. Netscape Navigator este component a unui set de instrumente Internet, numit Netscape Communicator al firmei Netscape Communications Corporation. Componenta numit Netscape Composer permite editarea paginilor Web. Netscape Navigator este operaional sub Windows, sub anumite versiuni UNIX i pentru Apple.

M1.U1.5 Primii pai ctre construcia unui site

Dac se dorete realizarea unei pagini www, trebuie s apelm la o firm specializat, numit provider. Provider-ul dispune de mai multe calculatoare foarte performante, numite server-e i pune la dispoziie:

spaiu pe hard-ul server-ului de cel putin 10 MB; o adres de Internet, de exemplu : www.adresa_student.ro. n spaiul rezervat se pot pune mai multe fiiere care conin instruciuni HTML dar i

orice alte fiiere. Definiie ([1]): Prin site se nelege ansamblul: spaiu hard; fiierele pe care le conine; adresa Prin pagin se nelege coninutul afisat al unui fisier HTML. Definiie ([1]): Ansamblul regulilor care trebuiesc respectate pentru schimbul informaiilor de un

anumit tip se numete protocol. Dac dorim s transferm fiiere ctre server sau invers, de la server ctre propriul

calculator se utilizeaz protocolul FTP (File Transfer Protocol). Pentru a realize o pagin atractiv este bine s se utilizeze un design adecvat. n acest

scop se pot utiliza limbajele: JavaScript, PHP Java (Applet) Flash etc. Trebuie s se aib n vedere faptul c JavaScript ruleaz pe calculatorul vizitatorului, o

secven JavaScript este tradus i executat de ctre browser i este trimis acestuia odat cu fiierul HTML.

Limbajul PHP este un limbaj de programare ce ruleaz pe server i este proiectat special pentru WEB.

15

ntr-o pagin HTML putem ngloba cod PHP care va fi executat la fiecare vizitare a paginii.

Limbajul PHP permite lucrul cu baze de date, n MySql. Mysql este un sistem de gestiune a bazelor de date, foarte rapid i robust. Aplicaiile scrise n PHP i MySql se ruleaz pe server. Atenie: Nu toi provider-ii pun la dispoziie utilizatorilor posibilitatea utilizrii acestor

limbaje, deci o s trebuiasc s studiem oferta.

Exemple Exemple de browsere web: Internet Explorer (IE), Mozilla Firefox, Opera, Safari, Chrome, etc...

S se realizeze un studiu de caz despre istoricul browserelor web exemplificate mai sus i s se precizeze anul n care a aprut fiecare versiune a acestora.

M1.U1.6. Alinierea

Alinierea nseamn c elementele de pe pagin sunt aliniate unele n raport cu celalalte. Lipsa alinierii este principala problem de pe paginile Web. Aceasta reprezinta o problem important i pe paginile tiprite, ns pare i mai prezent i mai dezastruas pe paginile Web. Nimic nu trebuie aezat la ntmplare pe pagin. Se creeaz un aspect curat, sofisticat i proaspt al paginii dac fiecare element are o legatur vizual cu un alt element de pe pagin.

Alinierea elementelor dup latura stng, dreapt sau centrat trebuie s urmeze o anumit regul, i anume:

Alegeti UNA. Se alege o singur aliniere care se utilizeaz pe toat pagina. Dac se opteaz pentru a se alinia textul de baz n stnga, nu se pune titlul pe centru; Dac se aliniaz centrat o parte din text, atunci se aliniaz centrat peste tot. Nu amestecai alinierile. Acest singur principiu va modifica radical aspectul paginilor. Se pot face alinieri verticale, orizontale i centrale.

O aliniere centrala se poate spune c este : echilibrat; simetric; calm; oficial.

Aliniind o parte din text la stanga, o parte la dreapta i o parte centrat, se creaz senzaia

de dezordine i se transmite impresia de amatorism. Dac se aliniaza textul i imaginile, este bine s ndeprtm textul de marginea stng.

Este obositor i distrage atenia s dam cu ochii de marginea stng a paginii browserului de fiecare dat cnd trecem la rndul urmtor. Cnd decalm text (operaie de indentare), se

16

poate face i din partea dreapt, impiedicnd formarea rndurilor de text lungi i dificil de citit.

Text pe butoane neglijent realizat (vezi figura de mai sus) Alinierea orizontal este la fel de important ca i cea vertical. Este important s

vedei butoane ca n exemplul de mai sus, n care literele nu se aliniaz pe orizontal. Aceast deplasare sus/jos/sus/jos face ca toat maneta s arate dezordonat. De aceea, pe lng alinierea vertical trebuie s fim ateni i la alinierea orizontal a butoanelor i legturilor.

Text pe butoane corect realizat (vezi figura de mai sus) Literele stau pe o linie invizibil numit linie de baz. Maneta de legturi este mai

ordonat i mai organizat dac aliniem tot textul pe aceeai linie de baz. n majoritatea software-lor create pentru Web exist un buton pentru alinierea dup linia de baz, de obicei n specificaiile pentru tabele.

17

Formular incorect realizat din punct de vederea al web design-ului (vezi formularul de mai sus)

Formularul acesta ncepe excelent; exist cteva alinieri foarte bune, bine definite, dar i locuri n care textul pare s fi fost trntit aleatoriu pe pagin.

Alinierea vertical n partea lateral a formularului las de dorit. Consolidm aspectul paginii, aliniind celalalte elemente dup aceast linie.

Totul trebuie s aib un motiv pentru a-i justifica locaia deoarece, nimic nu trebuie plasat arbitrar pe pagin. Nu azvrlim pur i simplu elementele i vedem cum i unde se lipesc. Trebuie s putem explica motivul pentru care un element se afl n acel loc.

O pagin, poate s fie instantaneu folosit, prin alinierea tuturor elementelor dup o latur i pagina arat mult mai organizat. Dac lucrurile sunt organizate, ele comunic mult mai bine.

Alinierea nu nseamn c totul este aliniat dupa aceeai latur. nseamn pur i simplu c totul are aceeai aliniere fie lipit la stnga, fie lipit la dreapta, fie centrat. Cnd o margine bun se repet, ea ctig n for.

18

Exemplu

Formular corect realizat din punct de vederea al webdesign-ului (vezi formularul de mai sus) Mai sus am dat un mod de aliniere optim, pentru

formularul creat anterior. Se observ linia vertical dup care se aliniaz csuele text, checkbox sau cea de submit. Formularul arat mult mai bine.

M1.U1.7. Proximitatea Proximitatea se refer la relaiile dintre elemente, cnd acestea sunt foarte aproape. Pe

o pagin, componentele aflate n legatur cu altele trebuie sa fie grupate. Dac anumite componente se afl n apropierea altora, ele devin o singur unitate din punct de vedere vizual, astfel informaiile pot fi organizate mai bine i permite astfel s dispar orice confuzie.

Se pare c exist o fric fa de spatiul liber. Pagina pare neorganizat dac elementele de machetare sunt mprtiate peste tot, fiind posibil ca informaia s devin mai greu accesibil.

Principiul proximitii spune c trebuie s se grupeze componentele aflate n legtur, s fie mutate mai aproape unele de altele, a.i. s fie percepute ca un grup unitar, nu ca o grmad de elemente fr legtur. Componentele i grupurile de informaii care nu au legatur unele cu altele nu trebuie s se afle n proximitate (vecintate).

Exemplu

Dorim s realizm o carte de vizit care cuprinde 5 elemente

19

(componente) separate (vezi figura de mai jos). n acest caz ochiul se oprete de cinci ori. Ochiul ncepe s citeasc n mijloc, deoarece textul este bold.

Dac complicm problema, adic mai ngrom alte elemente, vom vedea c ne vom

plimba privirea ntre cuvintele ngroate.

Proximitatea sau apropierea nseamn o relaie. O problem a crii de vizit anterioare este faptul c nici una dintre componente nu

pare a fi n legatur cu alta. Dar dac fac o rearanjare a componentelor de pe cartea de vizit, aceasta arat cu totul altfel, componentele care au o legatura ntre ele fiind grupate. Aceste componente sunt mai aproape unele de altele (vezi figura de mai jos).

DIRECTOR S.C. PISOI (0268) 956419

VICTOR GABRIEL MOTANEL

Str. Leului nr.123 Brasov

DIRECTOR S.C. PISOI (0268) 956419

VICTOR GABRIEL MOTANEL

Str. Leului nr.123 Brasov

20

Uneori, atunci cnd se grupeaz componentele foarte apropiate, este nevoie s se

modifice cte ceva, de exemplu mrimea, ponderea sau aezarea textului ori a desenelor. Componente aflate n apropiere unele de altele devin o unitate vizual, nu trebuie

organizate ca uniti separate. Deci componentele cu legtur ntre ele trebuie grupate mpreun.

Principiul proximitii are ca scop de baz organizarea paginii. Dac pe pagin exist mai mult de trei pn la cinci componente, trebuie vzut care

dintre elementele separate pot fi grupate, mai apropiat, pentru a deveni o unitate vizual. Proximitate nu nseamn c totul este apropiat, ci c elementele care sunt legate din

punct de vedere al semnificaiei lor, ntre care exist un fel de relaie privitoare la ceea ce comunic, trebuie s fie conectate i vizual.

Informatia dintr-o pagin trebuie mai nti grupat din punct de vedere al semnificaiei, apoi aezat din punct de vedere fizic pe pagin. Informaia secundar trebuie s fie mai distanat, astfel nct s se vad c este vorba despre o completare a informaiei principale.

M1.U1.8. Repetiia

Principiul repetiiei spune c anumite pri ale machetrii trebuie repetat n ntreaga lucrare. Se poate repeta de exemplu un font ngroat, o linie groas, un anumit tip de marcaj, un element de design, etc. Poate fi orice element care poate fi recunoscut de vizitator.

Relum cartea de vizit i organizm informaia altfel (vezi figura de mai jos). Observm c dup ce am privit informaia de pe aceast carte de vizit, ochii rmn

agai de nume, deorece este ngroat i subliniat. Dar totusi avem senzaia de neterminare. Urmtoarea figur prezint aceiai carte de

vizit dar n care am ngroat i ultima informaie, astfel ochiul se uit la nume i la numrul de telefon.

VICTOR GABRIEL MOTANEL DIRECTOR S.C. PISOI

Str. Leului nr.123 Brasov

(0268) 956419

21

M1.U1.9. Contrastul

Contrastul este cea mai eficient cale de a aduga valoare vizual paginii noastre. Principiul contrastului spune c dac dou componente nu sunt exact la fel, atunci trebuie s fie complet diferite.

Regula de aur n utilizarea contrastului spune c pentru a fi eficient, contrastul trebuie s fie puternic.

Contrastul poate fi creat n mai multe moduri, de exemplu punem n contrast: un font mare cu unul mic; un font elegant cu unul ngroat; o culoare rece cu una calda; un element orizontal ( ex. un rnd lung de text) cu unul vertical (ex. o coloan

de text nalt i ngust); rnduri cu spaii multe ntre ele cu rnduri dese; un desen mare cu unul mic.

VICTOR GABRIEL MOTANEL

DIRECTOR S.C. PISOI

Str. Leului nr.123 Brasov

(0268) 956.41.93

VICTOR GABRIEL MOTANEL

DIRECTOR S.C. PISOI

Str. Leului nr.123 Brasov

( 0268 ) 956.41.93

22

Atenie! Nu putem pune n contrast maro nchis cu negru sau un font de 14 puncte

cu unul de 16 puncte. Exemplu

Fie un anun pentru obinerea unei burse Socrates n cadrul Facultii de MI. Sunt prezentate dou variante. Se observ c ambele variante conin aceleai informaii doar c al doilea anun conine mai mult contrast i ne uitm cu mult mai mult plcere la cel de-al doilea anun.

Contrastul n formularul modificat este evident. Am folosit un font mai puternic i am ngroat titlurile. Fontul folosit l-am repetat i n titlul paginii. Titlul l-am transformat din majuscule n litere mici i astfel am avut posibilitatea s

folosesc o dimensiune mai mare a fontului, pe care l-am ngroat. Totodat am scris titlul cu alb pe fond negru (banda neagr). Astfel am mrit contrastul.

Contrastul nu numai c face pagina mai atractiv, ci i clarific scopul i organizarea documentului.

BURSE SOCRATES 2007 ! Condiii de aplicare Integralist Depunere dosar care s cuprind: CV, Scrisoare de intenie, situaia colar Participare la testul de limb strain

Termen limit de depunere dosar la Decanatul Facultatii MI: 14.04.2007

Universiti partenere: University Oldenburg University Dortmund University of Applied Sciences Fulda, University of Applied Sciences Wiesbaden, University of Applied Sciences Mittweida

23

S se realizeze schia unei pagini web pe o tem la alegere, respectndu-se principiile explicate i exemplificate mai sus.

M1.U1.11. Test de evaluare a cunotinelor

Realizai o carte de vizit pentru o firm ce comercializeaz produse IT. Teste clasice sau gril a cror rspuns nu trebuie precizat n material dar care pot fi dezbtute n cadrul Activitilor Tutoriale sau Aplicative.

S ne reamintim...

Browser-ul este o aplicaie cu trei funcii principale: accesul la informaii, formatare i afiarea informaiilor. Utilizatorul furnizeaz browser-ului adresa paginii doritE, browser-ul solicit conectarea la server-ul web, server-ul

Burse Socrates 2007 !

Condiii de aplicare Integralist Depunere dosar care s cuprind :

o CV, o Scrisoare de intenie, o situaia colar

Participare la testul de limb strain Termen limit de depunere dosar Decanatul Facultatii MI; 14.04.2007

Universiti partenere: University Oldenburg University Dortmund University of Applied Sciences Fulda University of Applied Sciences Wiesbaden University of Applied Sciences Mittweida

24

transmite browser-ului fiierul cerut, iar la final browser-ul formateaz pagina i o afieaz pe monitorul utilizatorului.

Prin site se nelege ansamblul format din spaiu hard, fiierele pe care le conine i adresa

Prin pagin web se nelege coninutul afisat al unui fisier HTML. Alinierea ntr-o pagin web nseamn c elementele de pe acea pagin sunt

aliniate unele n raport cu celalalte Proximitatea se refer la relaiile dintre elemente, cnd acestea sunt foarte

aproape - pe o pagin, componentele aflate n legatur cu altele trebuie sa fie grupate.

Principiul repetiiei spune c anumite pri ale machetrii trebuie repetat n ntreaga lucrare.

Contrastul este cea mai eficient cale de a aduga valoare vizual paginii noastre - regula de aur n utilizarea contrastului spune c pentru a fi eficient, contrastul trebuie s fie puternic.

M1.U1.10. Rezumat

Un pas important n evoluia Web-ului a fost dezvoltarea browserelor grafice, care puteau fi rulate pe un PC desktop sau pe un Macintosh, permind utilizatorului s foloseasc tehnicile familiare disponibile i n alte programe,

ncorpornd formate de text i grafic n ecranul de navigare. WWW este un sistem distribuit. Informaiile sunt plasate n mii de site-uri.

Cnd utilizatorul dorete o informaie, apeleaz site-ul care a publicat-o. Fiecare site i fiecare pagin de informaii au o adres unic numit URL

(Uniform Resource Locator URL = identificator uniform al resursei) Browser-ul este o aplicaie cu trei funcii principale: accesul la informaii,

formatare i afiarea informaiilor. Pentru a realiza un site web frumos structurat i atractiv este absolut necesar

s se respecte principiile de baz ale realizrii designului unei pagini web. Aceste principii sunt: alinierea, proximitatea, repetarea i contrastul.

Prin aliniere nelegem faptul c elementele de pe o pagin web vor trebui aliniate unele n raport cu celelalte. Prin proximitate se nelege faptul c

elementele care au un context comun i sunt situate unele n apropierea celorlalte se vor grupa i vor constitui un totunitar. Repetiia sugereaz faptul

c anumite proprieti ale elementelor de pe pagin trebuiesc repetate pentru

a produce simetrie i senzaia de ordine. Contrastul este cel care ajut la scoaterea n eviden a anumitor informaii pe baza atribuirii unor proprieti

"diametral opuse" fa de alte elemente mai puin importante. Se poate crea

contrast de culoare, de form, de font, etc.

25

M1.U1.11. Test de evaluare a cunotinelor

Alegei rspunsul corect la urmtoarele ntrebri:

1. Care dintre variantele enumerate reprezint denumirea unui browser web: a. Yahoo b. Safari c. Gmail

2. HTML este acronimul pentru: a. Home Tool Markup Language b. Hyper Tool Markup Languages c. Hyper Text Markup Language

3. Cine realizeaza standardul HTML a. Microsoft b. Google c. Consoriumul World Wide Web

4. Pentru a realiza o pagin web corect proporionat i clar, trebuiesc respectate principiile:

a. alinierea, proximitatea, repetarea i contrastul b. alinierea, proximitatea, spaierea i asemnarea c. alinierea, contrastul, asemnarea i coloritul

5. Care dintre variantele enumarate NU reprezinta un motor de cutare: a. Yahoo b. Google c. Chrome

Rspunsuri corecte: 1b, 2c, 3c, 4a, 5c

26

Modulul II. HTML (Hyper Text Markup Language) Cuprins Introducere .................................................................................................................... 26 Competene ................................................................................................................... 27 U1. Crearea unui document HTML i stilurile blocurilor text ..................................... 28 U2. Tabele ..................................................................................................................... 54 U3. Imagini i ancore .................................................................................................... 66 U4. Formulare ............................................................................................................... 80 Tem de control ............................................................................................................ 87

Introducere O versiune mai veche a HTML-ului folosea unele idei i modificri propuse

pentru HTML 3, care au fost abandonate la apariia HTML 3.2. HTML 4 propune separarea stilurilor fizice de marcarea coninutului printr-o

folosire mai intens a foilor de stil. Elementul frame este acum definit oficial altundeva dect n produsele firmelor Nestcape sau Microsoft. Include elementele style, div, span pentru ncorporarea foilor de stil.

Eticheta object este de asemenea extins, astfel s includ practic orice fiier

extern care se dorete introdus ntr-o pagin Web. Sunt introduse etichetele ins i del, acronym, colgroup, fieldset, button.

HTML e un limbaj bazat pe SGML (Standard Generalized Murkup

Language = Limbaj Standard Generalizat de Marcare) care este un standard internaional ce a fost aprobat n 1986 i care permite crearea de documente hipertext pentru paginile Web.

Principalele caracteristici ale limbajului SGML sunt: 1. Descrierea structurii documentului; 2. Nu este descris aranjarea n pagin; 3. Permite fiecrui navigator s aib propria prezentare; 4. Un document HTML poate fi reutilizabil. Standardul oficial HTML este dat de World Wide Web Consortium (W3C)

care este afiliat la Internet Engineering Task Force (IETF). W3C a enunat cteva versiuni ale specificaiei HTML, printre care i HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0, HTML 4.01 i, cel mai recent, HTML 5.0. Fiecare din aceste standarde este mai mult sau mai puin suportat de ctre toate sau o parte din browsere.

La ora actual HTML 4.0 si HTML 4.01 sunt larg utilizate i au fost deja

publicate specificaiile HTML 5.0. Obiectivul HTML5 este acela de a mbogi

27

suportul pentru aplicaiile multimedia prin aducerea laolalta a capabilitilor oferite de HTML4, cu XHTML i JavaScript.

Limbajul HTML ofer proiectanilor de pagini Web urmtoarele posibiliti: 1. S publice documente cu headere, texte, tabele, liste, fotografii, etc; 2. S regseasc on-line informaiile prin intermediul hiperlink-urilor

printr-un simplu click de mouse; 3. S proiecteze formulare pentru realizarea tranzaciilor cu servere aflate la

distan pentru cutri de informaii sau pentru activiti specifice comerului;

4. S includa foi de calcul tabelar, clipuri video, sunete i alte aplicaii direct n documente.

Elementul esenial diferit adus de versiunea 4.0 i mai ales 4.01 fa de

versiunea 3.2 este posibilitatea separrii structurii unui document de prezentarea lui prin introducerea stilurilor de documente (style sheet).

Prin utilizarea limbajului HTML4 pentru structurarea unui document i a

style sheet-urilor pentru a stiliza prezentarea acestuia, se poate obine mult mai uor independena de periferic/computer/platforma hard-soft.

Deoarece HTML5 aduce elemente noi care permit includerea obiectelor

multimedia sau a graficelor, fr a mai avea nevoie de plugin-uri, se vor putea crea aplicatii mult mai complexe utilizndu-se doar limbajul HTML.

Limbajul HTML a fost preferat pentru publicaii pe Web n primul rnd

datorit simplitii sale i n al doilea rnd deoarece permite formatarea textului ASCII cu tag-uri n format ASCII.

Competene La sfritul acestui modul studenii vor fi capabili:

s neleag i s utilizeze tag-urile HTML s defineasc i s utilizeze tag-uri pentru introducerea textului s formateze un text folosind tag-uri i atribute ale acestora s utilizeze tabele pe pagina web s formateze un tabel s introduc n pagina web imagini i link-uri s creeze formulare

28

U1. Crearea unui document HTML i stilurile blocurilor text Cuprins

U1.1. Introducere .................................................................. Error! Bookmark not defined. U1.2. Obiectivele unitii de nvare ................................... Error! Bookmark not defined. U1.3. Structura de baz a unui document HTML ................ Error! Bookmark not defined. U1.4. Tag-uri HTML ............................................................ Error! Bookmark not defined. U1.5. Tag-uri din cadrul documentului HTML .................... Error! Bookmark not defined. U1.6. Culori, fonturi, margini .............................................. Error! Bookmark not defined. U1.7. Tag-ul Body ................................................................ Error! Bookmark not defined. U1.8. Tag-ul Basefont (textul de baz) ................................ Error! Bookmark not defined. U1.9. Stiluri fizice ................................................................ Error! Bookmark not defined. U1.10. Stiluri logice ............................................................. Error! Bookmark not defined. U1.11. Tag-ul font (configurarea font-urilor) ...................... Error! Bookmark not defined. U1.12. Blocuri de texte ........................................................ Error! Bookmark not defined. U1.13. Linii orizontale ......................................................... Error! Bookmark not defined. U1.14. Rezumat .................................................................... Error! Bookmark not defined. U1.15. Test de evaluare a cunotinelor ............................... Error! Bookmark not defined.

M2.U1.1. Introducere HTML = Hyper Text Markup Language este limbajul de baz al WWW i

const dintr-un set standard de coduri care specific n ce mod documentele vor fi afiate pe ecran de ctre navigatoare.

Caracteristica important a limbajului este portabilitatea, adic orice document surs HTML va arta identic pe orice tip de calculator i n orice sistem de operare, sarcina interpretrii sale revenind diverselor navigatoare.

Unul dintre elementele principale i poate cel mai important dintr-o pagin web l constituie textul. Acesta este cel care poart n sine informaia pe care creatorul site-ului dorete s o transmit cititorilor. Pentru ca informaia s ajung la publicul int aa cum este ateptat, aceasta trebuie expus ntr-un mod plcut. Modurile de reprezentare ale textului ntr-o pagin web sunt foarte diverse din punctul de vedere al impactului vizual.

Se pot alege diferite stiluri pentru caracterele din textul unei pagini web, putndu-se astfel seta: dimensiunea, culoarea, marginile, grosimea, nclinarea, tipul de subliniere, etc.

M2.U1.2. Obiectivele unitii de nvare Aceast unitate de nvare i propune iniierea studenilor n crearea unei pagini HTML i n lucrul cu blocurile text. La sfritul acestei uniti de nvare acetia vor putea:

s creeze structura de baz a unei pagini HTML

29

s pun culoare pe o pagin web s coloreze, s dimensioneze i s alinieze textul dintr-o pagin web s seteze n mod corect marginile paginii web

Durata medie de parcurgere a acestei uniti de nvare este de 2 ore.

M2.U1.3. Structura de baz a unui document HTML

Orice document HTML ncepe cu marcajul (tag-ul) i se termin cu marcajul (tag-ul).

Un marcaj poate avea unul sau mai multe atribute care se specific prin perechi de

forma: nume="valoare". Se recomand ca valorile atributelor s fie plasate ntre ghilimele (" ").

Marcajele dintre aceste paranteze unghiulare transmit comenzi ctre browser pentru a

afia pagina ntr-un anumit mod. ntre cele doua marcaje i apar dou seciuni;

1. Seciunea de antet delimitat de marcajele TEXT ;

2. Corpul documentului care este delimitat de marcajele CORPUL TEXTULUI .

Un marcaj poate fi scris att cu litere mici, ct i cu litere mari. Deci limbajul HTML nu

este CASE sensitive. Comentariile din cadrul documentelor HTML se realizeaz utiliznd tag-ul urmtor : .

Orice ir de caractere ncadrat de aceste elemente va fi ignorat de programele de

navigare Web. Structura de baz a unui document HTML este: Informaia Corpul fiierului

30

Un fiier HTML este creat cu orice editor de texte cu meniunea c fiierul trebuie salvat

cu extensia html sau htm.

M2.U1.4. Tag-uri HTML

n limbajul de marcare a hipertextului totul se rezum la structur. Un limbaj de marcare este folosit pentru a descrie care este rolul fiecrei pri din document n raport cu celelalte.

Terminologia HTML:

a) atribut: furnizeaz instruciuni adiionale despre o etichet. Informaiile variaz de la etichet la etichet i pot include subiecte cum ar fi locaia fiierelor, mrimea, numele lor sau stiloul lor;

b) browser: este un motor de parcurgere special care evalueaz etichetele i coninutul unui fiier HTML, pe care l afieaz n concordan cu posibilitile i regulile platformei i capacitile sale;

c) element: o component distinctiv a structurii unui document, cum ar fi titlul, un paragraf sau o list. Cnd ne referim la forma sa aplicat n cadrul unui document, un element se mai numete etichet (tag);

d) etichet: un cod care identific un element pentru ca browserul sau alt program de parcurgere s tie n ce mod s afieze coninutul. Etichetele sunt ncadrate de caractere de delimitare (paranteze ascuite) Ele sunt ntotdeauna cuprinse ntre paranteze unghiulare () iar utilizarea literelor mici sau mari n scriere nu are importan.

Documentele HTML sunt fiiere text (ASCII). n text sunt inserate o serie de coduri aa

numitele tag-uri sau marcaje care stau la baza modurilor de afiare a documentului. Un document HTML este compus din tag-uri i text curat. Documentele au componente asemntoare cum ar fi titluri, tabele, liste, paragrafe, etc.

Tag-urile HTML sunt folosite tocmai pentru a marca elementele comune, care pot conine text, grafic sau alte elemente. Tag-urile sunt de forma pereche nceput-sfrit: Scrierea perechilor de legturi:

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

coninut arbitrar tagul de sfrit care are caracterul slash (/ )

tagul de nceput

31

CORECT INCORECT

M2.U1.5. Tag-uri din cadrul documentului HTML

Fiecare document HTML, nc de la creare are dou pri principale: un antet i un corp. Chiar dac nu sunt special delimitate, HTML presupune existena lor. HTML ofer de asemenea ansa de a aduga i alte componente funcionale paginii, sub forma foilor de stil, scripturilor i seturilor de cadre.

Dei fac parte din definirea unui document HTML, dou etichete exist n afara structurii documentului: doctype i html. Prima identific versiunea de HTML folosit pentru pagina respectiv i regulile pe care acestea le respect. A doua etichet identific un limbaj global i direcia textului pentru documentul respectiv, n plus marcheaz nceputul i sfritul coninutului HTML.

Documentul HTML se indic prin tag-ul HTML ......................... Vom prezenta numai o parte din tag-urile HTML, care sunt importante n realizarea

unui design atragator.

M2.U1.6. Culori, fonturi, margini

O pagin Web poate fi setat prin: - alegerea culorii de fond - alegerea culorii textului i - alegerea dimensiunilor paginii

Stabilirea culorii n tag-uri Culoarea se obine din amestecul a celor trei culori fundamentale: rou, verde i

albastru. Culoarea de fond a unei pagini se specific astfel : nume de culoare. Astfel sunt disponibile cel puin 16 nume de culori, astfel avem

urmatoarele nume: red, green, blue, aqua, black, fuchsia, gray, lime, maroon, navy, olive, purple, silver, teal, white i yellow.

32

secventa hexazecimala #rrggbb unde r,g sau b sunt cifre hexazecimale i pot lua valorile din multime {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F};astfel se pot defini 65536 de culori.

functia rgb(r,g,b), unde r,g si b iau valori din multimea numerelor naturale {0,1,2255}

M2.U1.7. Tag-ul Body

Tagul body are o list de atribute incluse dup denumirea tagului i delimitate prin spaiu. Proprietile principale ale acestui tag sunt cele care definesc fundalul paginii, fie c este vorba de o culoare sau de o imagine.

Atribute ale acestui marcator: bgcolor, background, text, leftmargin, topmargin Aceste atribute se vor evidenia n exemplele urmatoare.

Culoare pentru fundalul paginii Culoarea unei pagini se precizeaz prin intermediul atributul bgcolor. Sintaxa: Semantica: culoare se stabilete dup modelul precizat n sect1. Exemplu

Pagin Web cu fundalul de culoare cyan:

33

Culoarea textului Definirea culorii textului pentru o pagin Web se face prin intermediul atributului text

al etichetei Sintaxa: Semantica: culoare se precizeaz la fel ca la exemplul precedent. Exemplu

Pagina Web urmtoare are textul de culoare roie:

Atribute multiple O etichet poate s aib mai multe atribute. O etichet cu trei atribute are urmatoarea sintax: Sintaxa: Exemplu Pagin Web cu textul de culoare albastr i fondul de culoare galben:

34

S se realizeze o pagin web de culoare portocalie care s conin mai multe linii de text de culoare verde.

Marginile paginii Web Se face cu ajutorul a dou atribute ale etichetei :

leftmargin distana dintre marginea din stnga a ferestrei browserului i marginea din stnga a coninutului paginii

topmargin distana dintre marginea de sus a ferestrei browserului i marginea de sus a coninutului paginii

Valorile care se pot atribui celor dou atribute sunt :

numere ntregi pozitive, care indic distana dintre coninutul ferestrei i fereastra browserului, distan msurat n pixeli

un procent, ce reprezinta procent din limea, respectiv nlimea ferestrei browserului

35

M2.U1.8. Tag-ul Basefont (textul de baz)

Atributele de baz ale textului dintr-o pagin web sunt:

Mrime (size) Culoare (color) Font (style)

Sintaxa: Semantica: numr poate lua una dintre valorile din mulimea {1, 2, 3, 4, 5, 6, 7 }

(valoarea 1 fiind pentru fontul cel mai mic i valoarea 7 pentru fontul cel mai mare)

culoare se precizeaz prin nume sau prin RGB font poate fi un font generic din multimea {serif, sans serif, cursive,

monospace, fantasy, Times New Roman, Helvetica, Arial } Eticheta (Tag-ul) Basefont este valabil pn la sfritul paginii sau pn apare

urmtoarea etichet .

36

n cazul n care eticheta lipsete, textul din pagina Web are atributele prestabilite i anume:

size=3, color=black style=Times New Roman

S se realizeze o pagin web de culoare albastru deschis n care s se scrie

o poezie cu 2 strofe. Titlul poeziei va avea culoarea verde, prima strof va fi scris cu maro, iar cea de-a doua cu rou. Titlul va avea dimensiunea mai mare dect restul poeziei.

M2.U1.9. Stiluri fizice

Caractere: ngroate (tag-ul ), cursive (tag-ul ) Un bloc de text apare ngroat n pagin dac este inclus ntre text . Un bloc de text inclus ntre etichetele text este scris cu caractere cursive.

37

Aceste tag-uri sunt valabile, dar sunt mai vechi. Variantele mai noi pentru scrierea textului ngroat sunt realizate cu ajutorul etichetei , iar pentru scrierea textului nclinat se folosete eticheta .

Exemplu

Text scris normal vs text scris ngroat.

Exemplu

Text scris normal vs text scris nclinat.

38

Caractere: mrite (tag-ul ), micorate( tag-ul ) Un text inclus ntre etichetele text este scris cu caractere mai mari cu o

unitate dect dimensiunea curent.

39

Un text inclus ntre etichetele text este scris cu caractere mai mici cu

o unitate dect dimensiunea curent. Exemplu

Text scris normal vs text scris ngroat.

40

Caractere:indice superior i indice inferior Fragmentele de text aliniate ca indice inferior (sub-script) sunt delimitate de etichetele

i . Secvenele de text aliniate ca indice superior (super-script) sunt incluse ntre etichetele

i .

41

Caractere: subliniate i secionate Eticheta de tip bloc text insereaz un bloc de caractere subliniate. Etichetele i sau i insereaz un bloc de caractere secionate

la mijloc cu o linie orizontal.

S se scrie pe o pagin web urmtoarea ecuaie:

M2.U1.10. Stiluri logice

Stilurile logice sunt bazate pe cele fizice. Modul lor de aciune depinde n mare msur de de browserul utilizat.

42

Blocuri de caractere evideniate Urmtoarele dou etichete pun n eviden prin stilul cursiv fragmente de text: text (cite = citat) text (emphasize = a evidenia) Exemplu

Aceste dou etichete de mai jos sunt echivalente cu eticheta .

Blocuri de caractere monospaiate Etichetele urmatoare permit scrierea fragmentelor de text cu caractere monospaiate de

diferite tipuri text (code = cod sau surs) text (keyboard = tastatur) text (teletype = teleprinter) text (variable = variabile) text (citation = citare) text (definition = definirea unor termeni)

43

M2.U1.11. Tag-ul font (configurarea font-urilor)

Un font are urmtoarele atribute: culoarea - se stabilete cu atributul color tipul sau stilul - se stabilete cu atributul face mrimea - se stabilete cu atributul size mrimea n puncte tipografice (este stabilit prin atributul point-size) grosimea - se definete cu atributul font-weight

Culoarea fontului

Pentru a scrie un text cu o anumita culoare se ncadreaz acest text ntre delimitatorii text n felul urmtor: Sintaxa: text de culoarea specificat Semantica: culoare va reprezenta culoarea fontului

44

Familia fontului

Tipul de font se stabilete prin atributul face al etichetei . Fonturile pot fi separate prin virgul. Cele cinci familii generice de fonturi sunt: serif sans serif cursive monospace fanatasy Pot fi utilizate i alte fonturi specifice cum ar fi: Times (tip particular de font serif) Helvetica (tip particular de font sans serif) Arial

45

Courier (tip particular de font monospace) Western (tip particular de font fantasy) , etc. Exemplu

. Browserul va utiliza primul font pe care l recunoate.

Mrimea fontului

Marimea fontului se indic cu atributul size al etichetei . Acest atribut poate lua urmtoarele valori:

1, 2, 3, 4, 5, 6, 7 (1= cel mai mic font, 7= cel mai mare font); -1, -2, -3, etc. pentru a micora dimensiunea fontului cu -1, -2 fa de

dimensiunea curent; +1, +2, +3, etc. pentru a mri dimensiunea fontului cu +1,+2,.. fa de

dimensiunea curent; O alt metod de stabilire a mrimii unui font este prin utilizarea atributului point-size

al etichetei i reprezint mrimea fontului n puncte tipografice. Acest atribut poate lua ca si valori orice numar natural pozitiv.

Observaie! Atributul pointsize funcioneaz numai cu Netscape Comunicator.

46

Grosimea unui font

Grosimea poate fi definit cu cu atributul font-weight al etichetei . Valorile pe care le poate lua atributul font-weight sunt: 100, 200, 300, 400, 500, 600,

700, 800 i 900 (100 fontul cel mai subire, 900 fontul cel mai gros)

M2.U1.12. Blocuri de texte

a) Inserarea unei adrese Inserarea unei adrese se face cu ajutorul etichetei . Textul este

afiat cu caractere cursive.

47

b) Indentarea unui bloc de text Un bloc de text indentat este un bloc de text la care marginea din stnga a textului este

deplasat la o anumit distan de marginea paginii.

Codul HTML al acestei pagini l vei putea vedea n imaginea de mai jos.

48

Blocuri

Delimitarea i formatarea unui bloc de text se face cu delimitatorii text. Blocul are urmatoarele atribute : align (aliniere).

Valorile atributului align sunt: left aliniere la stnga center aliniere central right aliniere la dreapta

Blocul text are posibilitatea s includ i alte subblocuri. Atributul align are efect asupra tuturor subblocurilor incluse n blocul . Atributul nowrap permite ntreruperea rndurilor acolo unde este precizat acest

lucru.

Blocul preformatat

Etichetele permit pstrarea caracteristicilor textului aa cum a fost introdus n fiier, deci ia n considerare caracterele spaiu, tab i CR/LF (enter la sfrit de linie).

Blocul ... poate fi folosit pentru a insera rnduri vide. Caracterul spaiu, pentru a putea fi luat n considerare trebuie precizat prin .

49

Blocuri paragraf (tag-ul )

Trecerea la o linie nou se face cu eticheta , (br de la break=pauz). La fel i eticheta face trecerea la o linie nou.

Eticheta mai permite: inserarea unui spaiu suplimentar inainte de blocul paragraf. inserarea unui spaiu suplimentar dup blocul paragraph;. alinierea textului cu ajutorul atributului align, cu valorile left, center sau

right

50

Blocuri de titlu

Titlurile (headers) de capitole sau paragrafe pot avea diferite dimensiuni. Ele pot fi introduse cu tag-ul text unde x poate lua valori din multimea {1,2,3,4,5,6}

Se accept atributul align de ctre aceste etichete pentru alinierea titlului blocului de

text la stnga (modul prestabilit), n centru i la dreapta. Tag-ul scrie titlul cu caracterele cele mai mari i cele mai ngroate. Tag-ul folosete caracterele cele mai mici. Exemplu

(bloc de text)

51

M2.U1.13. Linii orizontale

Se pot insera linii orizontale ntr-o pagin web cu ajutorul etichetei .

Configurarea unei linii orizontale

Atributele etichetei sunt: align - permite alinierea. Valori posibile: left, center, right. width - permite alegerea lungimii liniei. Valori posibile:

o numere ntregi pozitive care reprezint lungimea liniei, n pixeli; o numere ntre 1 i 100 urmate de semnul %; reprezint procentul din

limea paginii pe care se ntinde linia; size permite alegerea grosimii liniei. Valorile posibile sunt numere ntregi

pozitive reprezentnd grosimea liniei n pixeli (valoarea prestabilit este 2); noshade definete o linie fr umbr; color permite definirea culorii liniei

52

S se realizeze o pagin web n care s se foloseasc toate tag-urile i atributele aferente acestora care au fost prezentate n aceast unitate de nvare.

1. S se realizeze o pagin HTML avnd culoarea de fond verde i textul de culoare

roie. 2. Care sunt atributele etichetei ? 3. Care este semnificaia etichetei ? 4. Dai un exemplu de cod HTML n care s utilizai tag-ul .

M2.U1.14. Rezumat

Codul HTML din spatele unei pagini web se scrie cu ajutorul etichetelor (Tag-urilor). O etichet este de forma pereche nceput-sfrit i numele acesteia se scrie ntre paranteze unghiulare. O etichet poate avea unul sau mai multe atribute, acestea aducnd informaii adiionale etichetei.

Tag-ul Body este cel care specific proprietile ntregii pagini web. Se pot seta astfel: culoarea de fundal a paginii, culoarea textului, marginile paginii, etc.

Tag-ul Basefont stabilete fontul de baz al paginii i este valabil pn la sfritul paginii sau pn apare urmtoarea etichet .

Blocurile de text au multiple modaliti de a fi formatate. n acest scop, exist urmtoarele etichete:

- e considerat unul dintre cele mai populare containere de elemente web, i implicit de text. Acestui tip de formatare i sepoate seta alinierea, fragmentarea la

53

capatul liniei, etc. - este eticheta clasic pentru a declara un paragraf - reprezint un bloc de text preformatat. , , .... - sunt etichete care marcheaz titlurile, reprezentnd

titlul de dimensiunea cea mai mare, iar reprezentnd titlul de dimensiunea cea mai mic

- este eticheta care ajut la inserarea unei linii orizontale n pagin, linie creia putem s i setm lungimea, grosimea, culoarea, alinierea, umbra, etc.

M2.U1.15. Test de evaluare a cunotinelor

Alegei rspunsul corect la urmtoarele ntrebri:

1. Coninutul unei pagini web se scrie ntre marcatoarele: a. ... b. ... c. ...

2. Pentru a seta culoarea roie a unui text cu ajutorul marcatoarelor HTML, vom scrie: a. text b. text c. text

3. Care dintre urmtoarele variante reprezint atribute ale marcatorului ? a. color, size, face b. color, type, size c. color, style, text-size

4. Care dintre urmtoarele texte va avea cea mai mare dimensiune? a. text b. text c. text

5. Ce marcator indic adugarea unei linii goale pe pagina web? a. b. c.

Rspunsuri corecte: 1b, 2a, 3a, 4c, 5b

54

U2. Tabele Cuprins

U2.1. Introducere .................................................................. Error! Bookmark not defined. U2.2. Obiectivele unitii de nvare ................................... Error! Bookmark not defined. U2.3. Tag-ul ............................................................ Error! Bookmark not defined. U2.4. Alinierea tabelului n pagina web ............................... Error! Bookmark not defined. U2.5. Precizarea culorilor de fond pentru un tabel .............. Error! Bookmark not defined. U2.6. Dimensionri .............................................................. Error! Bookmark not defined. U2.7. Rezumat ...................................................................... Error! Bookmark not defined. U2.8. Test de evaluare a cunotinelor ................................. Error! Bookmark not defined.

M2.U2.1. Introducere

Un alt tag important din HTML este tag-ul . Acesta permite

adaugarea tabelelor ntr-o pagin web. Tabelele se folosesc pentru a dispune informaiile de pe pagin sub form de structur tabelar, dar nu n ultimul rnd pentru a oferi structura ntregii pagini web.

Tabelele sunt formate din rnduri, iar rndurile din celule cu

informaii. n celula unui tabel se pot regsi diverse elemente: text, liste, alte tabele, etc.

M2.U2.2. Obiectivele unitii de nvare

La sfritul acestei uniti de nvare studenii vor fi capabili s:

realizeze un tabel pe pagina web coloreze fundalul tabelului i al celulelor sale spaieze informaia dintr-un tabel poziioneze tabelul n pagin la locaia dorit

Durata medie de parcurgere a primei uniti de nvare este de 2 ore.

M2.U2.3. Tag-ul

Un tabel se insereaz ntre etichetele i .

55

Pentru inserarea unui rnd ntr-un tabel se folosesc etichetele i (tr = table row)

Coloanele sunt introduse pe rnd pe cte o linie cu tag-ul i ( td = table data).

Chenarul unui tabel se introduce cu atributul border din tag-ul table. n mod implicit un tabel nu are chenar. Titlul unui tabel se introduce cu tag-ul text .

Atribute importante ale tag-ului :

pentru a alinia un tabel se foloseste atributul align cu valorile posibile: left (valoarea prestabilit), center i right.

pentru a adauga chenar unui tabel se utilizeaz atributul border care ia ca valoare orice numr ntreg (inclusiv zero) i reprezint grosimea n pixeli a chenarului tabelului.

Observaii: Valoarea prestabilit a grosimii chenarului tabelului este de 1 pixel. Dac valoarea grosimii chenarului este egal cu 0, atunci nu avem chenar. Exemplu

1. Crearea unui tabel fr chenar

56

2. Crearea unui tabel cu chenar

57

M2.U2.4. Alinierea tabelului n pagina web

Tabelul poate fi aliniat la stanga, la dreapta sau pe centrul paginii web.

58

M2.U2.5. Precizarea culorilor de fond pentru un tabel

Culoarea de fond se stabilete cu atributul bgcolor. Culoarea de fond poate fi ataat ntregului tabel prin eticheta . Culoarea de fond poate fi ataat unei linii de tabel prin eticheta . Culoarea de fond poate fi ataat unei celule de tabel prin eticheta . Atenie: Dac avem definite mai multe atribute bgcolor, se vor lua n considerare n ordinea:

, , . Tag-ul are prioritatea cea mai mic. Culoarea textului din fiecare celul se indic n tag-ul . Ex: Exemplu

Adaugarea n pagina web a unui tabel care are culori diferite pentru fundalul fiecrei celule cu text.

59

M2.U2.6. Dimensionri

Dimensionarea celulelor unui tabel Distana dintre dou celule vecine se definete cu ajutorul atributului cellspacing al

etichetei table. Valorile lui cellspacing pot fi numere ntregi pozitive, inclusiv 0. Valoarea prestabilit este 2.

Distana dintre marginea unei celule i coninutul ei se definiete cu atributul

cellpadding al etichetei . Valorile lui cellpadding pot fi numere ntregi pozitive. Valoarea prestabilit este 1.

60

Exemplu

Adaugarea n pagina web a dou tabele colorate, care au spaiere diferit ntre celule.

Codul HTML care descrie tabelele de mai sus poate fi vzut n imaginea de pe pagina

urmtoare.

61

Dimensionarea unui tabel

Dimensiunile unui tabel limea i nlimea se stabilesc cu atributele width i height ale etichetei .

Aceste atribute pot lua valorile: numere ntregi pozitive, reprezint limea, respectiv nlimea n pixeli a tabelului. numere ntregi ntre 1 i 100, urmate de semnul %, reprezint o fraciune din limea,

respectiv nlimea, total a paginii.

62

63

Scriei codul HTML pentru realizarea unui tabel cu 3 linii si 4 coloane, avnd chenarul de culoare albastr.

M2.U2.7. Rezumat

Tabelul este un element important care se poate regsi ntr-o pagin web. Acesta se introduce pe pagin folosind tag-ul . Coninutul tabelului este repezentat de ctre rndurile acestuia, care se introduc cu ajutorul tag-ului , iar coninutul rndurilor este reprezentat de ctre celulele cu date, care e introduc la rndul lor cu ajutorul tag-ului . ntreg tabelul, dar i rndurile sau celulele pot fi colorate folosind atributul bgcolor. Tabelul poate fi pozitionat pe pagina la stanga, la dreapta sau pe centru folosind atributul align. ntreg tabelul, dar i rndurile sau celulele pot fi dimensionate folosind atributele width i height.

M2.U2.8. Test de evaluare a cunotinelor

Alegei rspunsul corect la urmtoarele ntrebri:

1. Care dintre urmtoarele marcatoare se folosesc la realizarea unui tabel n HTML: a. , , b. , , c. , ,

2. Care este atributul care specific adresa imaginii pe care dorim s o afim ntr-o

pagin HTML: a. source b. link c. src

3. Care dintre urmtoarele atribute ale marcatorului permite unirea a 3 celule:

a. colspan = 3 b. rowspan = 3 c. cells = 3

4. Cum se definete o imagine pe fundalul unei pagini web:

a. b. c.

5. Pentru a seta culoarea roie pentru fundalul ntregii pagini web, vom scrie:

a. ...coninut pagin... b. ...coninut pagin...

64

c. ...coninut pagin...

6. Pentru a scrie un text ingroat vom scrie: a. text b. text c. text

Rspunsuri corecte: 1a, 2c, 3a, 4a, 5c, 6b

65

U3. Imagini i ancore Cuprins

U3.1. Introducere ................................................................ Error! Bookmark not defined.5 U3.2. Obiectivele unitii de nvare ................................. Error! Bookmark not defined.5 U3.3. Tagul ............................................................. Error! Bookmark not defined.5 U3.4. Legaturi (link-uri) ..................................................... Error! Bookmark not defined.0 U3.5. Hri de imagini ........................................................ Error! Bookmark not defined.5 U3.6. Rezumat .................................................................... Error! Bookmark not defined.7 U3.7. Test de evaluare a cunotinelor ............................... Error! Bookmark not defined.7

M2.U3.1. Introducere

Imaginile reprezin o component vizual de baz din pagina web.

Se spune c "o imagine face ct o mie de cuvinte", aa c imaginile ar trebui poziionate i ncadrate corect n pagin.

Ancorele sunt acele elemente care ne ajut s facem legtura ntre mai multe pagini web sau ntre informaiile de pe aceeai pagin.

Hrile de imagini constau n realizarea unor imagini care s conin ancore ctre diverse pagini la click pe diferite zone ale imaginii.

M2.U3.2. Obiectivele unitii de nvare

La sfritul acestei uniti de nvare studenii vor fi capabili s:

introduc o imagine n pagina web redimensioneze o imagine creeze ancore ctre alte pagini web sau ctre diverse elemente de pe aceeai

pagin creeze o hart de imagini

Durata medie de parcurgere a primei uniti de nvare este de 2 ore.

M2.U3.3. Tagul

Formatele acceptate de browsere pentru fiierele de imagini sunt: GIF (Graphics Interchange Format) extensia .gif JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg

66

BMP (BitMap) cu extensia .bmp (este ntlnit numai cu browserul Internet Explorer, etc.

Inserarea ntr-o pagin Web a unei imagine se face utiliznd eticheta cu atributul

src, iar valoarea acestui atribut este adresa URL a imaginii. Dac se dorete adugarea unui chenar n jurul imaginii se folosete atributul border al

etichetei care poate lua valori numere ntregi pozitive. Dimensiunile unei imagini pot fi modificate prin intermediul atributelor width i

height ale etichetei . Acestea pot avea ca i valori : numere ntregi pozitive ce reprezint numrul de pixeli numere de la 1 la 100 urmate de % ce reprezint procente din limea, respectiv din

nlimea blocului n care se afl imaginea. Precizarea dimensiunilor spaiului ocupat de o imagine duce la creterea vitezei de

ncrcare a paginii.

Alinier