Sunteți pe pagina 1din 143

Program postuniversitar de conversie profesional pentru cadrele didactice din mediul rural

Specializarea TEHNOLOGIA INFORMAIEI Forma de nvmnt ID - semestrul III

REALIZAREA PAGINILOR WEB

Ana Magdalena ANGHEL Adriana OLTEANU Radu PIETRARU

2006

Ministerul Educaiei i Cercetrii Proiectul pentru nvmntul Rural

TEHNOLOGIA INFORMAIEI

Realizarea paginilor WEB

Ana Magdalena ANGHEL

Adriana OLTEANU

Radu PIETRARU

2006

2006

Ministerul Educaiei i Cercetrii Proiectul pentru nvmntul Rural Nici o parte a acestei lucrri nu poate fi reprodus fr acordul scris al Ministerului Educaiei i Cercetrii

ISBN 10 973-0-04551-8; ISBN 13 978-973-0-04551-2.

Cuprins

Proiectul pentru nvmntul Rural REALIZAREA PAGINILOR WEB


CUPRINS

Unitate de nvare
1

Titlu

Pagin
1 4 5 5 7 8 11 11 12 13 13 13 19 22 22 23 24 24 24 29 32 33 34 35 37 37 38 39 39 40 42 44 47 48

INTRODUCERE INTERNET I WORD WIDE WEB Obiectivele Unitii de nvare nr.1 1.1 Introducere n Internet 1.2 Arhitectura Word Wide Web 1.3 Editarea i vizualizarea unei pagini WEB Rspunsuri i comentarii la ntrebrile din testele de autoevaluare Bibliografie Unitate de nvare nr.1 LIMBAJUL HTML Obiectivele Unitii de nvare nr.2 2.1 Introducere n HTML 2.2 Sintaxa Directivelor HTML 2.3 Structura de baz a unui document HTML Rspunsuri i comentarii la ntrebrile din testele de autoevaluare Bibliografie Unitate de nvare nr.2 FORMATAREA TEXTELOR IN LIMBAJUL HTML Obiectivele Unitii de nvare nr.3 3.1 Limbajul HTML i formatarea textelor 3.2 Titluri i paragrafe HTML 3.3 Definirea caracteristicilor fontului 3.4 Formatarea fixic a textelor 3.5 Formatarea logica a textelor 3.6 Preformatarea textului cu ajutorul directivei <PRE> Lucrare de verificare Unitate de nvare nr.1, 2, i 3 Rspunsuri i comentarii la ntrebrile din testele de autoevaluare Bibliografie Unitate de nvare nr.3 LISTE N LIMBAJUL HTML Obiectivele Unitii de nvare nr.4 4.1 Tipuri de liste n limbajul HTML 4.2 Liste HTML neordonate 4.3 Liste HTML ordonate 4.4 Liste definite Rspunsuri i comentarii la ntrebrile din testele de autoevaluare Bibliografie Unitate de nvare nr.4

Proiectul pentru nvmntul Rural

Cuprins

HYPERLINKS N LIMBAJUL HTML Obiectivele Unitii de nvare nr.5 5.1 Hypertext i hyperlink 5.2 URL identificator unic de resurse web 5.3 Realizarea legaturilor n HTML 5.4 Folosirea imaginilor pentru legturi Rspunsuri i comentarii la ntrebrile din testele de autoevaluare Bibliografie Unitate de nvare nr.5 FOLOSIREA IMAGINILOR N LIMBAJUL HTML Obiectivele Unitii de nvare nr.6 6.1 nelegerea formatelor grafice folosite n WEB 6.2 Folosirea imaginilor n cadrul paginilor WEB 6.3 Imagini cu arii sensibile (Image Maps) Lucrare de verificare Unitate de nvare nr.4, 5, i 6 Rspunsuri i comentarii la ntrebrile din testele de autoevaluare Bibliografie Unitate de nvare nr.6 REALIZAREA TABELELOR Obiectivele Unitii de nvare nr.7 7.1 Realizarea unui tabel simplu n limbajul HTML 7.2 Definirea proprietilor globale ale unui tabel HTML 7.3 Definirea rndurilor unui tabel 7.4 Definirea celulelor unui tabel Rspunsuri i comentarii la ntrebrile din testele de autoevaluare Bibliografie Unitate de nvare nr.7 FORMULARE N PAGINA WEB Obiectivele Unitii de nvare nr.8 8.1 Ce sunt formularele? 8.2 Introducerea unui formular n pagina WEB 8.3 Elementele HTML folosite n formulare 8.4 Alte tipuri de elemente folosite n formulare WEB Rspunsuri i comentarii la ntrebrile din testele de autoevaluare Bibliografie Unitate de nvare nr.8 SCRIPT, JAVASCRIPT Obiectivele Unitii de nvare nr.9 9.1 Ce este JavaScript? 9.2 Inserarea unui JavaScript ntr-un document HTML 9.3 Cum i cnd se execut un script ntr-o pagina WEB 9.4 Atribute de tip Event Handler Lucrare de verificare Unitate de nvare nr. 7, 8 i 9 Rspunsuri i comentarii la ntrebrile din testele de autoevaluare Bibliografie Unitate de nvare nr.9 EXECUTABILE I MULTIMEDIA N PAGINA WEB Obiectivele Unitii de nvare nr.10 10.1 Java i Java APPLET 10.2 Obiecte ACTIVE X

49 50 50 51 51 55 57 57 58 59 59 60 65 67 70 71 72 73 73 75 78 79 82 82 83 84 84 86 88 90 93 93 94 95 95 95 97 99 100 102 102 103 104 104 106

10

II

Proiectul pentru nvmntul Rural

Cuprins

10.3 Fiiere multimedia n pagina WEB 10.4 Adugarea clipurilor multimedia la o pagina Web Rspunsuri i comentarii la ntrebrile din testele de autoevaluare Bibliografie Unitate de nvare nr.10 11 XML I FOLOSIREA LUI N PAGINA WEB Obiectivele Unitii de nvare nr.11 11.1 Introducere n XML 11.2 Caracteristici ale XML 11.3 Sintaxa XML 11.4 Modul de folosire a XML n pagina Web Rspunsuri i comentarii la ntrebrile din testele de autoevaluare Bibliografie Unitate de nvare nr.11 FOI DE STIL Obiectivele Unitii de nvare nr.12 12.1 Foi de stil n HTML-CSS 12.2 Cum funcioneaz stilurile n HTML 12.3 Adugarea foilor de stil n documentele HTML 12.4 Proprieti CSS Lucrare de verificare Unitate de nvare nr. 10, 11 i 12 Rspunsuri i comentarii la ntrebrile din testele de autoevaluare Bibliografie Unitate de nvare nr.12 BIBLIOGRAFIE ANEXA 1 Lucrri de laborator

107 108 110 110 111 112 112 113 114 116 119 119 120 121 121 122 123 126 127 129 129 130 131

12

Proiectul pentru nvmntul Rural

III

Cuprins

IV

Proiectul pentru nvmntul Rural

Introducere

Proiectul pentru nvmntul Rural REALIZAREA PAGINILOR WEB


INTRODUCERE
Stimate cursant, nc de la nceput doresc s i urez bun venit la studiul modulului, destinat deprinderii utilizrii unor unelte pentru realizarea paginilor WEB. Acest modul se adreseaz n principal personalului didactic din aria nvmntului obligatoriu, ce activeaz n mediul rural n vederea obinerii calificrii necesare prin intermediul Programului de Educaie la Distan. Sper c acest modul va fi util personalului didactic care dispune de cunotine despre universul calculatoarelor ct i oricrei persoane interesate n dobndirea de cunotine specifice de introducere in acest domeniu. Exist totui anumite cunotine specifice necesare parcurgerii acestui modul: Cunoaterea modalitii de organizare i manipulare a informaiei n format electronic (sistem de fiiere, directoare, copierea, mutarea i deschiderea de fiiere electronice). Operaii de baz utiliznd sistemul de operare Microsoft Windows (pornirea unei sesiuni de lucru, deschiderea unei aplicaii, comutarea ntre mai multe aplicaii ce ruleaz simultan, nchiderea n mod corespunztor a sistemului), Obiectivele modulului: Dup studiul acestui modul vei fi suficient de pregtit pentru a fi capabil s: Descriei arhitectura World Wide Web Descriei structura de baz a unui document HTML Explicai sintaxa directivelor HTML Descriei modul de specificare a culorilor pentru elementele HTML Definii titluri i paragrafe n cadrul unui document HTML Modificai tipurile de caractere, mrimea sau culoarea acestora ntr-un document HTML Creai liste ordonate, neordonate i imbricate cu ajutorul directivelor HTML specializate Creai hyperlink-uri n documente HTML Folosii imagini ca hyperlink-uri Adugai imagini la o pagin HTML Specificai modul de aliniere al imaginii n pagin i al textului din jurul ei ; dimensiunea imaginii Creai un tabel HTML si s modificai proprietile acestuia Creai i s adugai elemente la un formular Ce este un script pe partea de client
Proiectul pentru nvmntul Rural

Introducere

Folosii un script ntr-o pagin WEB Folosii un applet Java ntr-o pagin WEB Folosii un obiect Active X ntr-o pagin WEB Folosii fiierele multimedia ntr-o pagin Web Folosii un document XML ntr-o pagin HTML Folosii sintaxa pentru definirea unei foi de stil

Prezentul modul este n format tiprit fiind conceput pentru educaia prin coresponden. Modulul este de lungime medie: 14 ore pentru SI (studiu individual), 7 ore pentru AT (activiti tutoriale), 7 ore pentru TC (teme de cas) i 28 de ore pentru AA (activiti asistate). Activitile tutoriale au ca scop stabilirea unui dialog ntre cursant i tutore n vederea discutrii rezultatelor obinute n urma evalurii temelor de cas i nu n ultimul rnd pentru lmurirea eventualelor neclariti sau probleme ntlnite de cursant. Temele de cas constau n rezolvarea lucrrilor de verificare care vor fi trimise tutorelui. Cele 28 ore alocate activitilor asistate vor fi destinate efecturii celor apte lucrri de laborator prezente n Anexa 1. Timpul de nvare poate varia n funcie de cunotinele anterioare ale cursantului despre realizarea paginilor WEB i de cantitatea de munc dedicat subiectului n studiu, pe care cursantul este dispus s o aloce. Manualul de fa este organizat n 12 uniti de nvare, fiecare dintre aceste uniti coninnd o parte de prezentare teoretic a subiectului tratat, o parte de exerciii i rezolvrile acestora. Cele 12 uniti de nvare i propun s te nvee ce este i cum poi sa construieti o pagin WEB. Prima unitate face o introducere n Internet, World Wide Web, i prezint paii i uneltele necesare pentru realizarea primei tale pagini de WEB. ncepnd cu unitatea de nvare 2 pn la unitatea de nvare 8 manualul te va ghida pas cu pas n tainele limbajului HTML. n unitatea de nvare 9 i 10 sunt prezentate tehnologii folosite n World Wide Web pentru a realiza o pagin capabil s interacioneze cu utilizatorul. La finalul manualului n unitile de nvare 11 i 12 vom studia tehnici avansate pentru structurarea ntr-un mod ct mai eficient i mai flexibil a informaiilor ce trebuiesc prezentate n pagina Web. Instruciuni de transmitere a lucrrilor de verificare: Modulul Realizarea paginilor WEB conine patru lucrri de verificare (LV). Fiecare LV va fi transmis spre corectare tutorelui, la care ai fost alocat, ntr-un fiier separat, astfel nct s intre n posesia acesteia nainte sau cel trziu la data specificat de calendarul modului. Prima LV trebuie predat dup ce ncheiai studiul Unitii de nvare nr. 3, a doua dup ncheierea studiului Unitii de nvare nr. 6; a treia dup ncheierea studiului Unitii de nvare nr. 9; iar ultima, la sfritul modului.

Proiectul pentru nvmntul Rural

Introducere

Instruciuni de ntocmire a lucrrilor de verificare: LV-urile sunt o component important a modulului, care ngduie o corect evaluare a experienei pe care o cptai studiind modulul i a capacitii dvs. de a-i aplica ideile n practic. Rezolvarea problemelor propuse din lucrrile de verificare este asemntoare cu cea din exemplele din cadrul unitii de nvare respective. Ceea ce trebuie s facei este s prezentai ct mai concis ideile cele mai importante, ncercnd s nu depii limita de 3000 de cuvinte. Suma maxim a punctelor care vi se acord pentru tratarea subiectelor unei lucrri de verificare este 25. Criteriile de evaluare si ponderile evalurii continue i final: Notele pe care le vei obine la sfritul acestui modul se calculeaz n funcie de nota pe care o vei primi la examen i de media obinut la LV-uri (evaluare pe parcurs). Cele dou componente particip la nota final cu ponderi de 60% (pentru LV), respectiv 40% (pentru evaluarea final realizat prin examen). In notarea evalurii pe parcurs, notele celor patru LV-uri intr cu ponderi egale. De aceea, v recomand insistent s predai toate cele patru LV-uri, deoarece pentru o lucrare pe care nu o realizai vei primi nota 0. Testele de autoevaluare (TA) reprezint o form de autoevaluare a cursantului i face parte din tehnologia ID de parcurgere a materialului de studiu. Testele de autoevaluare sunt incluse n manual pentru a te ajuta s i testezi cunotinele i felul n care ai neles materialul deja parcurs dintr-o unitate de nvare. TA sunt concepute astfel nct s nu i consume mai mult de cteva minute. Rspunsurile la testele de autoevaluare se vor completa n spaiile libere din chenar, acestea ncadrndu-se strict n spaiul rezervat. La nceputul fiecrei Unitii de nvare vor fi detaliate obiectivele propuse, aceast seciune fiind indicat de imaginea alturat ( o sgeat). Modulul nu integreaz alte materiale suplimentare de studiu individual, dar recomanda la finalul fiecrei Unitii de nvare un decupaj minimal din bibliografia manualului, decupaj necesar pentru aprofundarea i nelegerea complet a noiunilor expuse pe durata Unitii de nvare. Pe tot parcursul prezentrilor teoretice, importana anumitor paragrafe va fi semnalizat n partea stng a textului prin imaginea unei goarne. Paragrafele care conin testele de autoevaluare vor fi semnalizate prin folosirea imaginii unei pene i vor fi ncadrate ntr-un chenar. n cazul n care nu vei reui s rezolvai problemele propuse trebuie recitite zonele de text care apar nainte de lucrarea de verificare. n sperana c nu vor exista probleme v urm: Spor la treab!

Proiectul pentru nvmntul Rural

Internet i World Wide Web

Unitatea de nvare Nr. 1


INTERNET I WORLD WIDE WEB

Obiectivele Unitii de nvare Nr.1 1.1 Introducere n Internet 1.2 Arhitectura World Wide Web 1.3 Editarea i vizualizarea unei paginii WEB Rspunsuri i comentarii la ntrebrile din testele de evaluare Bibliografie

5 5 7 8 11 11

Proiectul pentru nvmntul Rural

Internet i World Wide Web

Obiectivele Unitii de nvare Nr. 1:


Principalele obiective ale Unitii de nvare 1 sunt: nsuirea unor noiuni de baz din domeniul reelelor de calculatoare nsuirea unor noiuni de baz din domeniul Internet Descrierea arhitecturii World Wide Web nsuirea pailor necesari ntr-un ciclu de crearevizualizare rezultat, pentru o pagin Web

1.1 Introducere n Internet


nainte de a putea nelege ce nseamn i cum funcioneaz World Wide Web, va trebui s clarificm anumite noiuni, definiii, tehnologii pe care se bazeaz. Ce este o reea O Reea de calculatoare este o colecie de calculatoare (zeci sau sute) interconectate ntre ele prin cabluri speciale cu scopul de a de calculatoare? putea interschimba sau folosi n comun anumite resurse (fiiere, imprimante, etc.). Pentru a comunica ntre ele calculatoarele folosesc un set de reguli care definesc noiunea de protocol de comunicaie. Ce este Internetul? Reelele de calculatoare locale pot fi la rndul lor interconectate , formnd reele globale de calculatoare, adic inter-reele. Cea mai mare inter-reea cu access public este reeaua Internet. Definiia de mai sus este foarte general i mai necesit cteva completri: Internetul este un mijloc de comunicare este un mediu foarte eficient de expunere a ideilor unei audiene foarte mari. Internetul este o resurs de informare este un imens depozit de informaii. Oricnd ai nevoie de o informaie legat de orice domeniu vei putea gsi undeva publicat pe Internet o lucrare care s te ajute. Internetul este o comunitate face posibil i foarte eficient comunicarea ntre oameni cu aceleai preocupri.

Care sunt serviciile Internet?

Pentru toate facilitile enumerate mai sus Internetul ofer mai multe metode de access servicii Internet : World Wide Web serviciul ce permite accesul la informaia stocat pe un calculator aflat oriunde n lume, 5

Proiectul pentru nvmntul Rural

Internet i World Wide Web

E-Mail este un serviciu de mesagerie electronic. Permite schimbul de mesaje ntre utilizatorii Internet, FTP este prescurtarea de la File Transfer Protocol care nseamn n limba romn protocol pentru transferul fiierelor, Telnet serviciul ce permite accesul la resursele altui calculator din Internet.

TCP/IP protocolul folosit n Internet

Protocolul de comunicaie folosit n Internet pentru oricare din serviciile de mai sus este TCP/IP (i pentru altele). Acesta definete: modul n care calculatoarele ar trebui s fie conectate n Internet, modul n care se stabilete o legtur de la un calculator la altul din Internet, modul n care sunt transmise date ntre calculatoarele din Internet. Pentru a se putea conecta i a fi identificat n reea un calculator trebuie s aib o adres de reea unic n Internet aceast adres se numete adresa IP. O adres de IP este format din 4 numere cuprinse ntre 0 i 255 separate prin caracterul .. 66.249.85.99 este un exemplu de adres IP Deoarece acest format de adrese este greu de reinut de ctre om exist posibilitatea asocierii unei forme mai prietenoase de adresare fiecrei adrese IP. Aceast form de adresare poart denumirea de Nume de Domeniu. De exemplu pentru adresa IP de mai sus este asociat urmtorul nume de domeniu: www.google.com Test de autoevaluare 1.1 Ce este un protocol de comunicaie?

Ce este o adres IP?

1.2 Cum este identificat un calculator n Internet?

Rspunsurile corecte i comentarii asupra acestora se gsesc la pagina 11.

Proiectul pentru nvmntul Rural

Internet i World Wide Web

1.2 Arhitectura World Wide Web


Ce este World Wide Web? World Wide Web sau pe scurt Web este un sistem de calculatoare n Internet care poate efectua schimb de fiiere ntr-un anumit format, denumit HTML care suport existena de legturi ctre alte documente sau ctre fiiere grafice sau audio. Acest schimb de fiiere se face folosind tehnologia client-server care presupune existena urmtoarelor entiti: Pagini Web Fiiere cu un anumit format ce permite organizarea asociativ a informaiilor HTML, Web Site Este o mulime organizat de pagini Web Server Un calculator conectat la Internet pe care sunt stocate paginile Web i pe care ruleaz un program - Web server - care poate servi aceste pagini Web la cerere unui alt calculator din Internet, Client - Un calculator conectat la Internet pe care ruleaz un program - Web Browser - ce permite comunicaia cu HTTP server la care face cerere pentru a primii o resurs Web specificat de un URL introdus de utilizator pe care este apoi capabil s l interpreteze i s l afieze. URL - Fiecare pagin sau resurs WEB are asociat o adres unic n Internet cunoscut sub acronimul de URL (Uniform Resource Locator).

Din ce este format Web-ul?

Client 1. Introduce 3. Trimite WEB Internet Web Site


{Fiiere HTML, Imagini Fiiere multimedia}

Utilizator 4. Vizualizeaz

Web Browser 2. Trimite cerere

Figura 1.1 Arhitectura World Wide Web Sensul de circulaie al datelor n Web n Figura 1.1 este prezentat locul fiecrei entiti descrise mai sus ca fiind parte din World Wide Web, i de asemenea ordinea etapelor pentru accesul la resursele Web: 1. Utilizatorul introduce URL-ul care identific resursa Web dorit n browserul care ruleaz pe calculatorul client,
Proiectul pentru nvmntul Rural

Internet i World Wide Web

2. Clientul conectat la Internet formuleaz o cerere de resurs ctre Web-Serverul identificat de URL, 3. Web Serverul primete, analizeaz cererea i ntoarce ca rspuns la client resursa cerut dac aceasta exist. In caz contrar ntoarce un rspuns ce conine un mesaj de eroare. 4. Web Browserul de pe calculatorul client primete rspunsul de la Web-server i l afieaz. Test de autoevaluare 1.3 Un Web Browser poate rula pe acelai calculator cu un Web Server?

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 11.

1.3 Editarea i vizualizarea unei paginii WEB


Un document HTML implementeaz o pagin Web. Documentele HTML sunt simple fiiere text ceea ce permite ca editarea lor s fie posibil prin folosirea oricrui editor de texte. Cum editez o pagin Web? n prezent exist o serie de editoare specializate pentru editarea paginilor HTML. Acestea permit realizarea de documente HTML rapid i uor doar prin apsarea a ctorva butoane fr ca utilizatorul s aib cunotine de HTML. Aceast facilitate este foarte bun pentru utilizatorii nceptori, ns este foarte important cunoaterea temeinic i nelegerea limbajului. deoarece dezavantajul principal al acestor unelte este c genereaz adesea cod redundant i uneori chiar incorect. n aceste cazuri fiind necesar intervenia direct in codul generat pentru a corecta aceste neajunsuri. Exemple de astfel de editoare: Microsoft FrontPage, Macromedia DreamWaver, Eclipse, Bluefish etc. n acest modul se va folosi editorul de text standard care este livrat cu sistemul de operare Windows: Notepad. Acesta precum bnuieti nu are nici o facilitate special pentru HTML ci este un simplu editor de text. Dac nu foloseti sistemul de operare Windows poi folosi n mod asemntor orice editor de text disponibil pe sistemul tu: 1. Pentru a porni programul Notepad pe un sistem Windows XP: 8 Click pe butonul Start din colul stnga jos al ecranului Click pe meniul All Programs -> Accessories Localizai iconia NotePad din acest meniu i facei click pe ea
Proiectul pentru nvmntul Rural

Internet i World Wide Web

2. Odat ce ai pornit aplicaia poi ncepe s scrii documentul HTML. ncearc s-l scrii pe cel de mai jos: <HTML> <HEAD> <TITLE>Prima mea pagina</TITLE> </HEAD> <BODY> <H1>Prima mea pagina Web</H1> Curand am sa devin un <STRONG>expert</STRONG> HTML <P> Pagina realizata de: <CITE>numele tau aici</CITE> </BODY> </HTML> 3. n momentul n care documentul este complet i doreti s-ti salvezi munca urmtoarele operaii sunt necesare: Localizeaz n fereastra programului NotePad meniul File De aici selecteaz opiunea Save As n fereastra dialog care se deschide introdu numele sub care vrei s salvezi fiierul urmat de extensia .htm sau .html. Spre exemplu alege numele primapagin.html.

Atenie este important s specifici extensia deoarece altfel programul NotePad va aduga automat extensia .txt la numele fiierului. Cum vizualizez 4. Pentru a vizualiza fiierul .html proaspt creat de tine ntr-un browser, urmtoarele operaii sunt necesare: pagina Web creat de mine? Pornete programul Microsoft Internet Explorer n meniul File localizeaz opiunea Open Click pe aceast opiune i se va deschide urmtorul dialog:

Click pe butonul Browse i navigheaz pn n folderul n care ai salvat fiierul primapagina.html, selecteaz-l i. apas butonul Open

Proiectul pentru nvmntul Rural

Internet i World Wide Web

Felicitri! Ai creat prima pagin HTML. Rezultatul ar trebui s fie asemntor cu imaginea de mai jos :

Figura 1.2 Primul meu document HTML Dac rezultatul nu este asemntor cu cel din figura de mai sus nseamn c nu ai introdus corect codul HTML sau unul dintre pai nu au fost executat corect. Mai ncearc odat!

10

Proiectul pentru nvmntul Rural

Internet i World Wide Web

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 1.1. Un protocol de comunicaie este un set de reguli folosite de calculatoarele ntr-o reea ca s comunice ntre ele. A se revedea seciunea 1.1. ntrebarea 1.2. Un calculator este identificat n internet cu ajutorul unei adrese de IP unic n Internet. Adresele de IP au form numeric i sunt greu de reinut de ctre oameni. Din acest motiv o adres IP poate avea asociat un nume de domeniu cu ajutorul cruia se poate identifica de asemenea un calculator n Internet. A se revedea seciunea 1.1. ntrebarea 1.3. Bineneles c da! Nu este cea mai des ntlnit situaie ns este posibil. A se revedea seciunea 1.2.

Bibliografie
1. Dave Taylor - Crearea paginilor WEB, Editura Teora 1999, pg.21-40 2. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i XML, Editura Printech Bucureti 2004, pg.1-7 3. Sabin Buraga Proiectarea siturilor Web. Design i funcionalitate, Ediia a II-a, Editura Polirom 2002, pg. 13-22

Proiectul pentru nvmntul Rural

11

Limbajul HTML

Unitatea de nvare Nr. 2


LIMBAJUL HTML Obiectivele Unitii de nvare Nr. 2 2.1 Introducere n HTML 2.2 Sintaxa Directivelor HTML 2.3 Structura de baz a unui document HTML Rspunsuri i comentarii la ntrebrile din testele de evaluare Bibliografie 13 13 13 19 22 22

12

Proiectul pentru nvmntul Rural

Limbajul HTML

Obiectivele Unitii de nvare Nr. 2:


Principalele obiective ale Unitii de nvare nr. 2 sunt: Definirea noiunii HTML Descrierea structurii de baz a unui document Explicarea sintaxei directivelor HTML Descrierea modului de specificare a culorilor pentru elementele HTML

2.1 Introducere n HTML


HTML este limbajul folosit pentru a structura informaia n documentele World Wide Web. Numele su reprezint iniialele urmtoarelor cuvinte in limba englez: HyperText Markup Language. Limbajul HTML este compus din instruciuni de afiare, care vor fi folosite de ctre browser pentru a determina cum anume s afieze informaia util din document. Aceste instruciuni de afiare poat denumirea de directive HTML sau, tags n limba englez. Un element este o component fundamental din structura unui document. O pereche de directive delimiteaz un element HTML, iar informaia cuprins ntre directiva de nceput i cea de sfrit delimiteaz coninutul elementului. Un element poate conine text simplu sau alte elemente.

Definitie

Definitie

2.2 Sintaxa Directivelor HTML


n cazul documentelor HTML mai mult de jumtate din textul surs nu este afiat de ctre browser. Mai precis ceea ce lipsete este textul cuprins nuntrul caracterelor pereche < i >, aceasta datorit faptului c n limbajul HTML ceea ce este cuprins ntre aceste caractere sunt interpretate ca fiind directive HTML (tags). O directiv HTML const dintr-un nume care, opional, este urmat de o list de atribute ale directivei HTML, toate acestea fiind plasate ntre perechea de caractere < i >. Atributele unei directive HTML pot lua diferite valori i permit autorului documentului s-i modifice comportamentul. Iat un exemplu: Dac directivei <BODY> i se adaug atributul BGCOLOR cu o valoare dorit atunci browserul va afia pagina respectiv pe un fundal de culoarea specificat de valoarea atributului. Pentru a afia pagina pe fond rou vom scrie:

Proiectul pentru nvmntul Rural

13

Limbajul HTML

<BODY BGCOLOR=red> De obicei numele directivei este intuitiv fiind reprezentat de un cuvnt sugestiv pentru funcia pe care o are. Directive HTML pereche Directivele HTML apar de regul n perechi, de exemplu <html> </html> sau <body></body>, prima directiv fiind de nceput iar cea de-a doua de sfrit. Un text aflat ntre aceste directive va respecta funcionalitatea directivei respective.

<B>Text afiat cu caractere Bold</B> Directiva de nceput Directiva de sfrit

Figura 2.1 Mod de folosire al directivelor HTML pereche. Exemplu de mai sus prezint modul n care se pot folosi directivele HTML pentru afiarea textului cu caractere de tip Bold. O directiv de sfrit are acelai nume cu directiva corespunztoare de nceput, dar este precedat de caracterul /. Tagurile de sfrit nu conin niciodat atribute. Directive HTML far pereche O parte din directivele HTML nu au directive pereche de sfrit. Acestea poart denumirea de stand-alone. Un exemplu de directiv stand-alone este <img>. Aceasta face ca browserul s plaseze o imagine (specificat de valoarea atributelor directivei) n pagin. Atributele sunt adugate directivelor HTML pentru a extinde sau pentru a modifica comportamentul acestora. Atributele apar ntotdeauna n perechi de forma nume/valoare. Poi aduga mai multe atribute la acelai tag, separnd fiecare tag printr-unul sau mai multe spaii. Ordinea de apariie nu este relevant. Valorile atributelor au lungimea limitat la 1024 caractere. <IMG SRC=images/smile.gif ALT=vesel> Nume Atribut Valoare Atribut

Atributele

Valoarea unui atribut trebuie scris de regul ntre caracterele i , iar n cazurile speciale n care nsui valoarea atributului conine 14
Proiectul pentru nvmntul Rural

Limbajul HTML

caracterul ghilimele se folosesc apostroafe, ca n exemplu de mai jos: <MAP NAME=nume cu caracterul > Dac valoarea este un singur numr sau cuvnt i conine numai litere (a-z) sau cifre (0-9) sau caracterele . i -, nu este obligatorie ncadrarea ntre ghilimele sau apostroafe a valorii atributului, ea putnd fi plasat imediat dup semnul =. Totui atunci cnd nu eti sigur c regula de mai sus este respectat este o idee bun folosirea ncadrrii ntre ghilimele a valorii atributelor. Mai jos sunt prezentate cteva exemple de directive care conin atribute. Fii atent la faptul c prima directiv conine att atribute a cror valoare este ncadrat de ghilimele ct i atribute care nu necesit aceast ncadrare: <IMG SRC="img/myimg.gif" ALIGN=right WIDTH=45 HEIGHT=60> <BODY BGCOLOR="#000000"> <FONT FACE="Arial, Helvetica" SIZE=4> n afar de textele care conin caractere obinuite, HTML ofer posibilitatea de a insera i afia caractere care n mod normal nu ar putea fi incluse n document sau care au un scop predefinit n limbajul HTML cum ar fi, spre exemplu, caracterul < care este folosit n limbajul HTML pentru a semnala nceputul unei directive. Test de autoevaluare 2.1 Ce este un element HTML?

2.2 Ce este o directiv HTML?

2.3 Ce rol au atributele unui element?

Rspunsurile corecte i comentarii asupra acestora se gsesc la pagina 22.

Caractere speciale

n limbajul HTML, caracterul ampersand (&) instruiete browserul s insereze un caracter special n funcie de codul sau identificatorul 15

Proiectul pentru nvmntul Rural

Limbajul HTML

ce l urmeaz. O astfel de construcie poart denumirea de character entities i este format din trei pri: Caracterul ampersand & Un nume predefinit al caracterului sau semnul # urmat de codul caracterului Caracterul ; (punct i virgul)

Spre exemplu pentru a afia caracterul < se va scrie n text urmtoarea construcie: &lt;. Similar &gt; introduce caracterul > iar &amp; introduce caracterul ampersand. Numele predefinite pentru caracterele speciale trebuiesc ntotdeauna scrise cu litere mici. Se pot de asemenea introduce caractere speciale pentru care nu exist identificatori predefinii, folosindu-se semnul # urmat de codul ASCII al caracterului. Spre exemplu urmtoarea construcia &#60; are acelai efect ca &lt; , adic introducerea caracterului <. Specificarea culorilor n HTML Culoarea anumitor elemente din cadrul documentului HTML se poate specifica folosindu-se anumite directive HTML sau atribute ale acestora. Exist 2 metode de specificare a culorilor n cadrul paginilor WEB: prin valoarea codului RGB folosind numele culorii Cel mai adesea folosit i mai flexibil modalitate este folosirea codului RGB. Fiecare culoare RGB conine 3 valori corespunztoare concentraiei fiecrei componente rou (RED), verde (GREEN) sau albastru (BLUE) din cadrul culorii alese. Aceste valori se ncadreaz ntre 0 si 255. Specificarea concentraiei maxime (R=255, G=255, B=255) n fiecare component rezult n culoarea alb, iar specificarea valorii 0 pentru toate componentele rezult n culoarea neagr. Majoritatea utilitarelor de grafic au dialog care permite n mod grafic alegerea culorii dorite furniznd pentru aceasta codul RGB corespunztor. n figura de mai jos este prezentat un astfel de dialog:

16

Proiectul pentru nvmntul Rural

Limbajul HTML

Se observ n imaginea de mai sus c n funcie de culoarea aleas se genereaz concentraia corespunztoare fiecrei componente de culori n cazul nostru (R=237, G=15, B=99). Odat identificate aceste concentraii pentru culoarea dorit vor trebui transformate n valori hexazecimale echivalente pentru a le putea folosi ca valoare pentru un atribut n cadrul unei directive HTML. Aceasta este sintaxa:

#RRGGBB
Cu ajutorul acestor valori se poate specifica orice culoare din spaiu de culori true color. Cea de-a doua metod este a identifica culorile dup nume. Exist un set de 140 de culori predefinite. Comentarii HTML Comentariile sunt folosite n cadrul unui document HTML pentru a documenta codul HTML scris in pagina respectiv. Comentariile nu sunt afiate de ctre browser. n procesul de creare sau de mentenan a paginilor de Web aceste comentarii se pot dovedii foarte utile oferind persoanei care creeaz sau modific pagina informaii suplimentare despre ce anume s-a dorit a fi realizat n acea pagin i eventual informaii suplimentare despre modul n care se realizeaz acel obiectiv. Pentru a definii un comentariu HTML se folosete o directiv special cu urmtoarea sintax: <!--Textul comentariului --> sau <!--Textul comentariului pe mai multe randuri --> Trebuie s existe obligatoriu un spaiu dup <!-- i un spaiu nainte de --> , n rest se poate folosi aproape orice caracter sau combinaie de caractere n interiorul comentariului fr a influena modul n care pagina va fi afiat de ctre browser. O directiv HTML poate fi folosit n interiorul unei alte directive HTML cu scopul de a putea aplica efectul ambelor directive asupra unui anumit element. Spre exemplu dac se dorete ca un anumit cuvnt din text s fie i n format italic i bold n acelai timp pentru a-l scoate n eviden se folosete aceast metod de imbricare a directivelor dup cum este artat n exemplul de mai jos: Numele meu este: <B><I>Ana</I><B>. Va avea ca rezultat:
Proiectul pentru nvmntul Rural

Imbricarea directivelor HTML

17

Limbajul HTML

Numele meu este: Ana Totui aceast imbricare trebuie fcut avnd mereu grij ca ordinea de nchidere a tagurilor s fie invers cu ordinea de deschidere ultimul tag deschis s fie primul nchis. Exist anumite informaii, caractere sau chiar directive pe care browserele nu le afieaz. Acestea sunt: Sfritul de linie (CR/LF) Caracterele de sfrit de linie folosite n interiorul documentului HTML sunt ignorate i browserul va organiza textul in funcie de dimensiunea ferestrei. Trecerea la linie nou se va face explicit prin folosirea directivelor <P> sau <BR> Taburile sau spaiile multiple Dac browserul ntlnete un caracter Tab sau mai multe caractere spaiu liber consecutive l va afia ca un singur caracter spaiu liber. Pentru a introduce spaii suplimentare se poate folosi caracterul special: &nbsp;. Spre exemplu: Text, cu multe Va fi afiat ca: Text, cu multe spatii spatii

Informaii ignorate de browser

Directivele <p> care apar de mai multe ori. Dac directiva <P> este folosit de mai multe ori consecutiv fr coninut, browserul va interpreta aceast construcie ca un singur paragraf i l va afia ca atare. Comentariile Browserele nu vor afia textul cuprins ntre caracterele <!-- i -> Directivele necunoscute Browserele ignor directivele pe care nu le suport sau pe cele incorect specificate. n funcie de tipul browserului comportamentul n cazul acestor directive este fie de a nu afia nimic cnd sunt ntlnite, fie de a afia coninutul directivei ca simplu text.

18

Proiectul pentru nvmntul Rural

Limbajul HTML

Test de autoevaluare 2.4 Ce sunt caracterele speciale i cum pot fi acestea folosite in cadrul unui document HTML?

2.5 Identificai care din codurile de mai jos reprezint codul RGB care specific culoarea roie : a> b> c> d> (255, 0, 0) sau #FF0000 (0, 0, 0) sau #000000 (0, 255, 0) sau #00FF00 (255, 255, 0) sau #FFFF00

Rspunsurile corecte i comentarii asupra acestora se gsesc la pagina 22.

2.3 Structura de baz a unui document HTML


Documentele realizate cu ajutorul limbajului HTML au extensia htm sau html i sunt simple fiiere de tip ASCII (text). Un document HTML conine text util (coninutul efectiv al paginii) i directive HTML care sunt folosite pentru a defini structura, modul de afiare i comportamentul coninutului. Structura unui document HTML Fiecare document HTML ncepe cu directiva <HTML> care specific browserului faptul c informaia care urmeaz n fiier este n format HTML. Ultima directiv este </HTML> i marcheaz sfritul documentului HTML. Dup aceast prim directiv urmeaz un bloc marcat de directivele <HEAD> i </HEAD> care reprezint antetul documentului, informaiile din cadrul acestui bloc nefiind afiate de ctre browser. Urmtoarea seciune, marcat de directivele <BODY> i </body>, conine informaia afiat de ctre browser. Aceast seciune include informaia util, i directive HTML care specific browserului modul n care acesta o va afia. Directivele HTML pot de asemenea s fac referire la diverse fiiere externe cum ar fi fiiere de imagine sau alte documente HTML. Structura de baz unui document HTML este urmtoarea: <HTML>
Proiectul pentru nvmntul Rural

19

Limbajul HTML

<HEAD> Informaii generale despre documentul HTML </HEAD> <BODY> Corpul principal al paginii </BODY> </HTML> Directiva HEAD Antetul unui document HTML conine informaii generale despre coninutul i structura documentului. Directiva <HEAD> nu conine atribute ci servete drept cadru pentru alte directive: <BASE>, <ISINDEX>, <LINK>, <META>, <NEXTID>, <OBJECT>, <SCRIPT>, <STYLE> i <TITLE>. Le vom descrie pe scurt pe cele mai des folosite. Directiva <TITLE> - reprezint titlul documentului. Textul definit n interiorul ei va aprea ca titlu pentru fereastra de browser care afieaz pagina i de asemenea va fi folosit atunci cnd pagina este adugat la n meniul Favorites sau Bookmarks. De asemenea acest text va fi folosit de ctre motoarele de cutare atunci cnd i adaug pagina n baza de date. Pentru toate aceste motive este important ca acest text s fie ct mai sugestiv. Directiva <BASE> - stabilete calea de baz pe care serverul de WEB o va folosi pentru toate legturile definite n interiorul documentului. Despre aceasta i despre legturi vom vorbi n unitatea de nvare 5 Directiva <SCRIPT> - conine cod Java Script sau VB Script despre care vom vorbi n unitate de nvare 9 ( Directiva <STYLE> - conine informaii despre stilurile folosite de ctre tabela de stiluri (CSS) despre care vom vorbi n unitate de nvare 12. Directiva BODY Corpul documentului HTML este definit de ctre directiva pereche <BODY></BODY>. Coninutul lui poate fi un singur paragraf, o imagine sau o combinaie complex de imagini, tabele, obiecte multimedia, text. Elementul BODY are un rol foarte important n ceea ce privete imaginea de ansamblu a pagini HTML, deoarece permite definirea unor parametrii globali cum ar fi: culoarea sau imaginea de fundal a paginii sau culoarea textului i a legaturilor din pagin. Aceti parametrii globali se definesc cu ajutorul atributelor directivei <BODY>. Atributul BGCOLOR permite stabilirea culorii de fundal a paginii. n exemplul de mai jos se definete culoarea albastru ca fundal: <BODY BGCOLOR=blue></BODY> 20

Proiectul pentru nvmntul Rural

Limbajul HTML

Atributul TEXT este folosit pentru a definii culoarea textului normal din cadrul documentului. Culoare implicit a textului este negru. n exemplul de mai jos este setat culoarea de fundal alb i culoarea textului rou. <BODY BGCOLOR=#FFFFFF TEXT=#FF0000> La alegerea culorii textului trebuie avut n vedere ca acesta s poat fi distins uor de fundal. Atributele LINK, ALINK, VLINK permit controlul culorii legturilor n funcie de starea acestora dup cum este descris mai jos: LINK stabilete culoarea cu care vor fi afiate iniial legturile i implicit este Albastru VLINK stabilete culoarea cu care vor fi afiate legaturile care au mai fost vizitate implicit este Purpuriu ALINK stabilete culoarea cu care este afiat legtura deja vizitat.

n exemplul de mai jos se va stabili urmtoarea schem de culori pentru pagin: culoarea de fundal alb, culoarea textului va fi rou, culoarea legturilor albastru, culoarea legturilor vizitate va fi magenta, iar a legturilor active va fi verde <BODY BGCOLOR=#FFFFFF TEXT=#FF0000 LINK=#0000FF VLINK=#FF00FF ALINK=#00FF00>

</BODY> Atributul BACKGROUND cu ajutorul acestui atribut al elementului BODY se poate seta ca fundal pentru documentul HTML o imagine. Imaginea specificat ca valoare a atributului trebuie s fie n format .gif sau .jpg, i va fi poziionat astfel nct s acopere ntreaga arie a paginii. Dac o singur imagine nu este destul de mare pentru a satisface aceast condiie atunci aceasta va fi replicat i spaiul rmas neocupat va fi umplut la dreapta i n jos cu aceste replici pn cnd fereastra browserului este complet ocupat de imagine. <BODY BGCOLOR=#FFFFFF BACKGROUND=logo.jpg>

n exemplul de mai sus s-a specificat imaginea care va fi folosit ca fundal i de asemenea culoarea de fundal utilizat de browser pn n momentul ncrcrii imaginii.

Proiectul pentru nvmntul Rural

21

Limbajul HTML

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 2.1. Un element este o component fundamental din structura unui document. O pereche de directive delimiteaz un element HTML, iar informaia cuprins ntre directiva de nceput i cea de sfrit delimiteaz coninutul elementului. Revedei seciunea 2.1. ntrebarea 2.2. Directivele HTML sunt instruciuni folosite de ctre browser pentru a determina cum anume s afieze informaia util din document. Revedei seciunea 2.1. ntrebarea 2.3. Atributele sunt adugate directivelor HTML pentru a extinde sau pentru a modifica comportamentul acestora. Revedei seciunea 2.2. ntrebarea 2.4. n afar de textul normal HTML ofer posibilitate afirii unor caractere care n mod normal nu sunt afiate de ctre browser deoarece acestea sunt caractere cheie folosite pentru identificarea unor construcii HTML. Spre exemplu: caracterele < sau >. Acestea se pot specifica n cadrul unui document HTML cu ajutorul caracterelor speciale definite printr-o construcie de tipul: caracterul & + cod caracter + caracter ;. Revedei seciunea 2.2. ntrebarea 2.5. Codul RGB este : (255, 0, 0). Varianta corect de rspuns : a). Revedei seciunea 2.2. Indicaii la problemele propuse Problemele propuse n lucrrile de verificare se fac dup modelele de exemple prezentate n unitatea de nvare sau dup tipicul acestora.

Bibliografie
1. Dave Taylor - Crearea paginilor WEB, Editura Teora 1999, pg.53-70 2. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i XML, Editura Printech Bucureti 2004, pg.17-20, pg.28-29, pg.48-49

22

Proiectul pentru nvmntul Rural

Formatarea Textelor n limbajul HTML

Unitatea de nvare Nr. 3


FORMATAREA TEXTELOR IN LIMBAJUL HTML Obiectivele Unitii de nvare Nr.3 3.1 Limbajul HTML i formatarea textelor 3.2 Titluri i paragrafe HTML 3.3 Definirea caracteristicilor fontului 3.4 Formatarea fizic a textelor 3.5 Formatarea logic a textelor 3.6 Preformatarea textului cu ajutorul directivei <PRE> Lucrare de verificare a Unitilor de nvare nr. 1, 2 i 3 Rspunsuri i comentarii la ntrebrile din testele de evaluare Bibliografie 24 24 24 29 32 33 34 35 37 37

Proiectul pentru nvmntul Rural

23

Formatarea Textelor n limbajul HTML

Obiectivele Unitii de nvare Nr. 3:


Principalele obiective ale Unitii de nvare Nr. 3 sunt: Dup parcurgerea acestei Unitii de nvare vei fi capabili: S definii titluri i paragrafe n cadrul unui document HTML S modificai tipurile de caractere, mrimea sau culoarea acestora ntr-un document HTML S folosii directivele HTML pentru formatarea logic a textului S folosii directivele HTML pentru formatarea fizic a textului

3.1 Limbajul HTML si formatarea textelor


Pentru ca informaiile dintr-un document s fie asimilate ct mai uor de ctre cititorii si i pentru ca prezentarea lor s aib succes maxim este foarte important ca textul s fie organizat ntr-o form ct mai atractiv. HTML ofer mijloace eficiente pentru a structura i a nfrumusea un text. Ca autor al unui document HTML ai dou opiuni n ceea ce privete textul pe care doreti s l afiezi. Prima este s l scrii aa cum este i a doua s n incluzi ntre anumite directive HTML. Spre exemplu dac vrei s afiezi textul La muli ani! poi pur i simplu s l tastezi n cadrul documentului i va fi afiat fr nici o problem. ns dac vrei ca acest text s fie afiat ntr-un anumit mod spre exemplu vrei ca textul s fie scris cu caractere roii de dimensiunea mai mare dect cea normal a textului - va trebui s specifici explicit browserului modul n care vrei ca textul tu s fie afiat cu ajutorul directivelor HTML pentru formatarea a textelor.

3.2 Titluri i paragrafe HTML


Directiva <Hn></H> n cadrul oricrui document este necesar definirea unui titlu principal i a mai multor titluri pentru fiecare din subseciunile documentului. Limbajul HTML ofer o modalitate uoar de definire a titlurilor de diferite dimensiuni. Titlurile se definesc folosindu-se directiva <Hn>, unde n este un numr cuprins ntre 1 si 6. Valoarea 1 indic realizarea unui titlu cu cea mai mare dimensiune n timp ce 6 va creea un titlu cu cea mai mic dimensiune.
Proiectul pentru nvmntul Rural

24

Formatarea Textelor n limbajul HTML

Directivele pentru titlu au un atribut opional care poate schimba modul de aliniere. Acest atribut este align i poate luat una din valorile: left - stnga, right dreapta sau center centru. Folosirea valori left pentru atributul align este ns redundant deoarece alinierea implicit folosit pentru cazurile n care nu este specificat este left. Pentru a vedea modul n care este poziionat textul din interiorul directivelor de titlu HTML i pentru a compara diferitele dimensiuni ale acestora vom considera codul HTML de mai jos:

<HTML> <HEAD> <TITLE> Exemplu titluri </TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER"> Titlul H1 pozitionat central </H1> <H2> Titlul de tip H2. </H2> <P> Acesta nu este un titlu ci este text normal </P> <H3> Titlul de tip H3. </H3> <H4 ALIGN="RIGHT"> Titlul H4 aliniat la dreapta </H4> <H5> Titlul de tip H5. </H5> <H6> Titlul de tip H6. </H6> </BODY> </HTML> Rezultatul va fi n browser de forma:

Proiectul pentru nvmntul Rural

25

Formatarea Textelor n limbajul HTML

Figura 3. 1 Exemple titluri HTML Nu uita s foloseti directiva de sfrit pentru titlu deoarece browserul nu va include implicit una. Un document HTML bun ar trebui s foloseasc titlurile n ordinea ierarhic. H1 ar trebui folosit pentru primul nivel de titlu, H2 pentru al doilea .a.m.d Se va evita omiterea unui nivel ierarhic la un moment dat, adic H3 nu ar trebui s apar imediat dup H1, ci se va folosi H2 n loc.

Directiva <P></P>

O metoda eficient de a face o pagin ct mai uor de citit este desprirea acesteia n paragrafe. Spre deosebire ns de documentele scrise cu majoritatea procesoarelor de text existente, caracterele de linie nou nu sunt luate n considerare. n fapt, orice tip de spaiere linie nou, taburi sau spaii vor fi transformate ntrun singur spaiu liber n momentul afirii documentului de ctre browser. Pentru a indica nceperea sau terminarea unui paragraf i deci trecerea la o linie nou se folosete directiva HTML <P></P>. Directiva de ncheiere </P> poate fi omis. Aceasta deoarece majoritatea browserelor la ntlnirea unei noi directive <P> consider automat c paragraful anterior s-a terminat.

26

Proiectul pentru nvmntul Rural

Formatarea Textelor n limbajul HTML

Elementele de tip paragraf permit adugarea de text la un document iar dimensiunea liniei va fi ajustat n funcie de dimensiunea ferestrei browserului. Aceast ajustare se face automat de ctre browser n momentul vizualizrii paginii. Inserarea mai multor elemente <P> fr coninut succesiv va avea ca rezultat n browser afiarea unei singure linii libere n locul lor. Pentru a introduce mai multe rnduri libere consecutiv se poate folosi directiva <BR> descris mai jos. Deoarece textul este reformatat de cte ori utilizatorul i dimensioneaz fereastra se va evita introducerea manual a rndurilor libere.

Directiva <BR>

Adeseori este necesar trecerea forat la o linie nou fr a termina ns paragraful curent. Deoarece caracterele de linie nou sunt ignorate n HTML aceast trecere se face folosind directiva HTML <BR>. Elementele <BR> nu au directiv de sfrit obligatorie deoarece elementul marcheaz o poziie i nu are nici un coninut care s trebuiasc delimitat. n exemplul de mai jos vom urmri modul de folosire a directivelor HTML <P> i <BR> precum i diferenele de poziionare n cazul folosirii fiecreia: <HTML> <HEAD> <TITLE> Exemplu Paragraf si Break line </TITLE> </HEAD> <BODY> <H1>Titlul</H1> <P> Textul paragrafului 1 </P> <P> Textul paragrafului 2 <BR> Linie noua in cadrul paragrafului 2 <BR> A doua linie noua in cadrul paragrafului 2 </P> <P> Textul paragrafului 3 </P> </BODY> </HTML> Va avea ca rezultat n browser:

Proiectul pentru nvmntul Rural

27

Formatarea Textelor n limbajul HTML

Figura 3.2. Folosirea directivelor <P> i <BR> Se observ faptul c n cazul directivei <P> se insereaz automat o linie liber nainte i dup terminarea paragrafului, iar n cazul folosirii directivei <BR> nu este introdus nici un spaiu suplimentar. Directiva <HR> Un alt mijloc de a separa diferitele seciuni ale unui document este folosirea directivei <HR>. La ntlnirea acestei directive browserul trece automat la linie nou i deseneaz o linie orizontal. Caracteristicile linie orizontale pot fi controlate de ctre atributele directivei. Atributul WIDTH. Specific lungimea liniei fie ca dimensiune absolut n pixeli, fie ca procent din lungimea ferestrei browserului. Atributul ALIGN. Poate lua una din valorile left, center sau right i specific modul de aliniere a liniei. Acest atribut nu are semnificaie fr existena atributului WIDTH. Atributul NOSHADE. Implicit linia este desenat n relief avnd umbr. Prezena acestui atribut indic faptul c linia va fi desenat fr umbr. Atributul SIZE. Specific grosimea numrul de pixeli - cu care va fi desenat linia. n exemplu de mai jos vom specifica o desenare a unei linii aliniate la dreapta desenat fr umbr i cu dimensiunea 20% din fereastra browserului i grosimea de 10 pixeli:

28

Proiectul pentru nvmntul Rural

Formatarea Textelor n limbajul HTML

<HR NOSHADE ALIGH=RIGHT SIZE=10 WIDTH=20%> Test de autoevaluare 3.1. Directiva <BR> se folosete : a> b> c> d> pentru a fora trecerea la o linie nou foreaz nceperea unui paragraf nou pentru introducerea mai multor succesive introducerea unei linii orizontale

linii

libere

3.2. Cum formateaz textul elementele de tip paragraf?

3.3. Cum se deseneaz n HTML o linie orizontal centrat cu dimensiunea jumtate din lungimea ferestrei browserului

Rspunsurile corecte i comentarii asupra acestora se gsesc la pagina 37.

3.3 Definirea caracteristicilor fontului


Directiva <BASEFONT> Directiva <BASEFONT> definete dimensiunea implicit a fontului pentru ntreg textul folosit n interiorul elementului <BODY>. Titlurile H1-H6 nu sunt afectate de aceast directiv. Directiva BASEFONT are un singur atribut: SIZE care definete dimensiunea implicit a fontului folosit n cadrul documentului. Valoarea acestui atribut este un ntreg ntre 1 i 7 Dac nu este specificat acest atribut are valoarea 3. Pentru a schimba dimensiunea implicit a fontului la 5 scriem: <BASEFONT SIZE=5> Schimbarea fontului de baz ar trebui s fie fcut cu grij i avnd un motiv clar deoarece utilizatorul are posibilitatea oricum s defineasc dimensiunea preferat a textului din opiunile browserului. Acest element nu are directiv de ncheiere Directiva BASEFONT afecteaz textul din cadrul elementului BODY dar nu i titlurile. Alegerea unei dimensiuni prea mari pentru fontul de baz poate duce la situaia n care fontul 29

Proiectul pentru nvmntul Rural

Formatarea Textelor n limbajul HTML

pentru titlu are dimensiuni mai mici dect fontul textului propriu-zis producnd astfel confuzie. Directiva BASEFONT afecteaz ntreg textul ce urmeaz dup ea i pn la ncheierea elementului BODY. Nu este recomandat folosirea ei pentru schimbarea dimensiunii fontului unui bloc de text a caracterelor individuale, pentru aceasta fiind disponibile alte directive precum FONT, BIG sau altele despre care vom discuta mai trziu n aceast unitate de nvare

Directiva <FONT>

Pentru a stabili caracteristici ale fontului precum: dimensiune, culoare, tip pentru un bloc de text se folosete directiva <FONT>. Schimbarea caracteristicilor fontului pentru o parte din caractere sau pentru anumite cuvinte este o metod bun pentru a scoate n eviden ceva important sau pentru a creea efecte interesante. Directiva de sfrit este obligatorie. Atributul SIZE. determin noua dimensiune a fontului pentru textul elementului. Valoarea atributului este un ntreg ntre 1 i 7 specificnd astfel dimensiunea absolut a fontului. Prin adugarea prefixului + sau - este specificat dimensiunea relativ fa de fontul de baz. Pentru specificarea dimensiunii n valoarea absolut vom scrie: <FONT SIZE=7>A </FONT>fost odata ca niciodata care va avea care rezultat n browser:

Figura 3. 3. Exemplu specificare dimensiune font n valoare absolut n exemplu de mai jos vom ncerca s creem un efect de perspectiv pentru exclamaia URAAA folosind atributul SIZE pentru directiva font i specificnd dimensiunea n format relativ:

<P> U <FONT SIZE="+1">R <FONT SIZE="+2">A <FONT SIZE="+3">A <FONT SIZE="+4">A </FONT> </FONT> </FONT> </FONT> 30
Proiectul pentru nvmntul Rural

Formatarea Textelor n limbajul HTML

Va avea ca rezultat n browser:

Figura 3. 3. Exemplu specificare dimensiune font n valoare relativ n cazul folosirii intercalate a directivelor <FONT> cu valoarea atributului SIZE specificat n valoare relativ, efectul nu este cumulativ ci referina este dimensiunea fontului de baz. Atributul COLOR. Definete culoarea textului din interiorul elementului FONT. Specificarea culorii se face folosindu-se codul RGB1 sau numele predefinit al culorii dorite. Pentru a afia un text cu culoarea galben i dimensiunea absolut 5 vom scrie: <P> Ultimul cuvant are culoarea <FONT COLOR="#0000FF" SIZE="5"> Albastra <FONT>. </P> i rezultatul n browser va fi:

Figura 3. 4. Exemplu specificare culoare font Atributul FACE. Permite schimbarea tipului de font folosit pentru afiarea textului. Dac fontul nu este suportat de ctre browser va fi folosit tipul implicit de font. Se pot specifica mai multe tipuri de font desprite prin virgul i un spaiu. <FONT FACE=arial, courier, garamond> n acest caz daca primul tip de font nu este suportat de ctre browser se va ncerca cu cel de al doilea .a.m.d. n exemplu prezentm o list de fonturi uzuale suportate de ctre majoritatea browserelor:

Vezi unitatatea de nvare numrul 2

Proiectul pentru nvmntul Rural

31

Formatarea Textelor n limbajul HTML

Figura 3. 5. Tipuri de font uzuale Folosete directiva FONT pentru a schimba caracteristicile fontului pentru un numr oarecare de cuvinte sau paragrafe, iar pentru schimbarea ntregii pagini folosete BASEFONT. Este indicat s evii folosirea schimbrii dimensiunii fontului folosind valori extreme deoarece aceasta poate face documentul greu de citit.

Test de autoevaluare 3.4 n ce cazuri este recomandat a se folosi directiva <BASEFONT> n locul directivei <FONT>

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 37.

3.4 Formatarea fizic a textelor


Directivele pentru formatare fizic foreaz browserul s afieze textul elementului respectiv ntr-un anumit format dorit de creatorul documentului HTML respectiv neinnd cont de setrile din browser ale utilizatorului respectiv. Dac una din aceste directive nu este suportat de ctre browser ea va fi ignorata deoarece browserul nu are nici o alt alternativ de afiare. n cele ce urmeaz este prezentat o list cu aceste directive i este pe scurt descris funcionalitatea fiecreia.

32

Proiectul pentru nvmntul Rural

Formatarea Textelor n limbajul HTML

Directiv <B> <BIG>

Funcionalitate Afieaz textul ngroat Afieaz textul cu o unitate mai mare dect dimensiunea fontului de baz <SMALL> Afieaz textul cu o unitate mai mic dect dimensiunea fontului de baz <I> Afieaz textul nclinat. <U> Afieaz textul subliniat <SUB> Afieaz textul sub form de indice inferior <SUP> Afieaz textul sub form de indice superior <TT> Afieaz textul cu caractere teleprinter <BLINK> Afieaz textul plpind Toate directivele de formatare fizic de mai sus necesit specificarea explicit a directivei pereche de sfrit.

3.5 Formatarea logic a textelor


Formatarea logic presupune, spre deosebire de cea fizic, faptul c fiecare browser va formata textul afectat de directivele logice n funcie de posibilitile platformei pe care ruleaz. Prin urmare formatarea propriu-zis nu va fi neaprat la fel de la un browser la altul, ns efectul va fi acelai. Spre exemplu pentru unele browsere textul din cadrul directivei <EM> va aprea ngroat n timp ce pentru altele va aprea italic. Creatorul paginii se va concentra n acest caz mai mult pe definirea semnificaiei textului dect asupra modului n care acesta va fi formatat n browser. S discutm despre fiecare element n parte: <ACRONYM> indic faptul c textul inclus este un acronim, adic un cuvnt format din iniialele unor cuvinte care fac parte dintr-o expresie sau un nume. <CITE> indic faptul c testul inclus este un citat bibliografic. Prin convenie acest text este afiat nclinat. <CODE> este folosit pentru a afia exemple de cod surs. Textul acestui element este afiat cu font de tip teleprinter precum este fontul courier. <EM> este folosit pentru a afia un text ce trebuie scos n eviden, sau un termen nou introdus in document. Majoritatea browserelor vor afia textul acestui element n format ngroat sau nclinat. <STRONG> efectul este asemntor cu cazul folosirii directivei <EM> dar mai puternic. Toate directivele de formatare logic de mai sus necesit specificarea explicit a directivei pereche de sfrit.
Proiectul pentru nvmntul Rural

33

Formatarea Textelor n limbajul HTML

3.6 Preformatarea textului cu ajutorul directivei <PRE>


Aa cum am mai artat n unitatea de nvare precedent n momentul n care un document HTML este afiat de ctre browser, spaiile aflate ntre dou cuvinte adiacente, n caz ca sunt mai multe, vor fi transformate automat ntr-un singur spaiu. Exist, bineneles metode de a definii spaii suplimentare ntre cuvinte dac acest lucru este necesar, iar una din aceste metode este folosirea directivei HTML: <PRE>. Directiva <PRE> mpreun cu directiva sa pereche de sfrit, creeaz un spaiu n interiorul cruia textul va fi afiat de ctre browser exact n formatul din codul surs HTML, pstrndu-se numrul de spaii libere sau numrul de linii libere succesive. Lungimea liniei nu mai este ajustat n acest caz n funcie de dimensiunea ferestrei browserului. Textul din interiorul elementului <PRE> este afiat folosindu-se un font cu lungimea constant a caracterului (e.g. courier). Coninutul elementului <PRE> poate include orice directiv de formatare fizic sau logic, imagini sau legturi2. Directivele care implic terminarea unui paragraf adic <P> sau <Hn> - nu sunt recomandate spre a fi folosite n interiorul elementului deoarece rezultatul folosirii acestora n acest caz nu este consistent pentru toate tipurile de browser. Directiva <PRE> are un atribut opional - WIDTH care determin numrul de caractere coninute ntr-o linie a blocului preformatat. Dac o linie are lungimea mai mare de cea specificat de acest atribut nu nseamn ca aceasta va fi automat ajustat la aceast dimensiune ci mai degrab va fi extins n afara regiunii vizibile a ferestrei browserului. Folosirea acestor elemente este n general util pentru realizarea de tabele sau atunci cnd se dorete pstrarea integritii unor coloane sau rnduri. Pentru aceasta HTML pune la dispoziie ns i alte directive speciale despre care vom vorbi n leciile urmtoare. ns avantajul folosirii acestei tehnici n locul directivelor specializate este c nu toate browserele suport utilizarea acestora.

Vom discuta despre acestea in unitatea de invaare 5 i 6 Proiectul pentru nvmntul Rural

34

Formatarea Textelor n limbajul HTML

Lucrare de verificare a Unitilor de nvare Nr. 1, 2 i 3


1. Creai un document HTML care s conin doar structura de baz a unui document HTML i care s aib culoare de fundal: galben S afieze textul: Am fcut prima Lucrare! cu culoarea roie Predai fiierul HTML n format electronic ca rezultat al rezolvrii lucrrii de verificare. Pe lng informaiile prezentate n manual se poate utiliza reperul bibliografic numrul 2 din bibliografia unitii de nvare. Nr. de puncte 15 (7 puncte definire culoare fundal, 8 puncte afiarea textului cerut folosind culoarea roie) 2. Scriei documentul HTML pentru o pagin WEB ca cea din figura de mai jos. Aceasta trebuie sa conin: 1 titlu de tip H1 poziionat central, 1 titlu de tip H2 aliniat la stnga, corpul textului va fi format din 2 paragrafe n care primul cuvnt din text are format italic. Predai fiierul HTML n format electronic ca rezultat al rezolvrii lucrrii de verificare. Ca ajutor suplimentar utilizai reperele bibliografice 2 i 3 din bibliografia unitii de nvare. Nr. de puncte 10 (5p - folosirea directivelor specifice pentru titluri i paragrafe, 2p - mprirea n 2 paragrafe a textului (la fel ca in figur), 3p - formatarea tip italic a primului cuvnt din fiecare paragraf.

Proiectul pentru nvmntul Rural

35

Formatarea Textelor n limbajul HTML

36

Proiectul pentru nvmntul Rural

Formatarea Textelor n limbajul HTML

Rspunsuri i comentarii la ntrebrile din testele de autoevaluare


ntrebarea 3.1. Directiva <BR> se folosete pentru a fora trecerea la o linie nou. De asemenea se poate folosi n cazul n care se dorete introducerea mai multor linii libere succesive. Vezi seciunea 3.2. ntrebarea 3.2. Elementul de tip paragraf va formata textul coninut astfel nct dimensiunea liniei s nu depeasc lungimea ferestrei. La nceputul i sfritul unui paragraf se va adaug automat o linie liber. Vezi seciunea 3.2. ntrebarea 3.3. Directiva HTML pentru a desena aceast linie se scrie n felul urmtor: <HR ALIGH=CENTER WIDTH=50%> Vezi seciunea 3.2. ntrebarea 3.4. Directiva <BASEFONT> se folosete n cazul n care se dorete schimbarea caracteristicilor fontului pentru ntreg textul documentului. Directiva FONT se folosete pentru a schimba caracteristicile pentru un numr oarecare de cuvinte din text. Vezi seciunea 3.4. Indicaii la problemele propuse Problemele propuse n lucrrile de verificare se fac dup modelele de exemple prezentate n unitatea de nvare sau dup tipicul acestora.

Bibliografie
1. Dave Taylor - Crearea paginilor WEB, Editura Teora 1999, pg.71-82 2. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i XML, Editura Printech Bucureti 2004, pg.20-27 3. T.Gugoiu HTML prin exemple, Editura Teora 2000

Proiectul pentru nvmntul Rural

37

Liste i tabele n limbajul HTML

Unitatea de nvare Nr. 4


LISTE N LIMBAJUL HTML Obiectivele Unitii de nvare Nr. 4 4.1 Tipuri de liste n limbajul HTML 4.2 Liste HTML neordonate 4.3 Liste HTML ordonate 4.4 Liste de definiie Rspunsuri i comentarii la ntrebrile din testele de evaluare Bibliografie 39 39 40 44 44 47 48

38

Proiectul pentru nvmntul Rural

Liste i tabele n limbajul HTML

Obiectivele Unitii de nvare Nr. 4:


Dup parcurgerea acestei Unitii de nvare vei fi capabil: S creezi liste neordonate cu ajutorul directivelor HTML specializate S creezi liste ordonate cu ajutorul directivelor HTML specializate S creezi liste de definiii S creezi liste imbricate.

4.1 Tipuri de liste n limbajul HTML


Clasificare Liste Listele reprezint un excelent mijloc pentru a sistematiza informaia i de a scoate n eviden anumite aspecte importante dintr-un anume context. Limbajul HTML ofer un suport bogat, pentru definirea listelor. Se pot creea trei tipuri de liste: Neordonate (unordered lists) List fr numere de ordine. Ordonate (ordered lists) List cu numere de ordine. List de definiii (definition lists) Este o list compus din termeni i definiii ale acestora. Cu excepia listelor de definiii, toate tipurile de list au aceeai structur de baz, fiecare list constnd dintr-o secven de elemente marcate de directiva <LI>. <SPECIFICATOR_TIP_LISTA> <LI> ELEMENT 1 text element 1 </LI> <LI> ELEMENT 2 text element 2 </LI> ... </SPECIFICATOR_TIP_LISTA> n cadrul unui element al unei liste se pot folosi urmtoarele construcii HTML: paragrafe, imagini, legturi, alte liste, directive de formatare text.

Proiectul pentru nvmntul Rural

39

Liste i tabele n limbajul HTML

<LI>
Funcionalitate: Definete un element dintr-o list Atribute: TYPE VALUE Directiva de sfrit: </LI> este opional Directiva <LI> este folosit att n cadrul listelor ordonate ct i neordonate dup cum vom vedea n seciunile urmtoare.

4.2 Liste HTML neordonate


Listele neordonate sunt folosite pentru enumerarea unor elemente pentru care ordinea de apariie nu este important, cum ar fi, spre exemplu o list de cumprturi, sau lista de obiective ale acestei seciuni de nvare. Elementele unei liste neordonate vor fi afiate intendat i fiind precedate de un marcaj. Acest marcaj este introdus automat de ctre browser i prin urmare nu trebuie specificat n codul surs HTML.

Cum definim lista

<UL>
Funcionalitate: Definete o list neordonat Atribute: TYPE

Directiva de sfrit: </UL> este OBLIGATORIE O list neordonat se definete folosind directiva HTML <UL>, iar directiva de sfrit corespunztoare </UL> este obligatorie. nuntrul acestui element fiecare element se specific folosind directiva <LI>. Directiva de sfrit </LI> poate fi omis ns este recomandat ca aceasta s fie totui specificat deoarece este util n cazul folosirii stilurilor CSS despre care vom vorbii in unitatea de nvare 12. <P> Acesta este un exemplu de lista neordonata: <UL> 40
Proiectul pentru nvmntul Rural

Liste i tabele n limbajul HTML

<LI>Primul element al listei</LI> <LI>Al doilea element al listei</LI> <LI>Al treilea element al listei</LI> </UL> </P> Va avea ca rezultat n browser:

Figura 4.1 Exemplu lista neordonata O list neordonat introduce o linie liber ntre ea i textul de deasupra i nc una ntre ea i textul ce urmeaz ei. Atributul TYPE. Forma marcajului pentru fiecare element se poate schimba folosind atributul TYPE, care permite specificarea a 3 forme pentru marcaj: Valoarea DISC pentru forma de cerc plin valoarea implicit Valoare CIRCLE pentru forma de cerc gol Valoarea SQARE pentru forma de ptrat gol Atributul type poate fi de asemenea aplicat i fiecrei directive <LI> n parte, n cazul n care se dorete o form diferit pentru fiecare din elementele listei. Test de autoevaluare: 4.1 De cte tipuri pot fi listele HTML 4.2 Definii o list neordonat care s conin 3 elemente. Primul i ultimul element s aib marcajul de tip ptrat, iar al doilea element s aib marcajul de tip disc.

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 47.

Proiectul pentru nvmntul Rural

41

Liste i tabele n limbajul HTML

4.3 Liste HTML ordonate


Listele ordonate sunt folosite n cazul n care ordinea elementelor Cum definim este important s fie respectat, cum ar fi spre exemplu cuprinsul lista unei lucrri sau o list de instruciuni. La fel ca n cazul listelor ordonata? neordonate elementele sunt afiate intendat dar n loc de un marcaj grafic browserul va afia automat n faa fiecrui element un numr de ordine.

<OL>
Funcionalitate: Definete o list ordonat Atribute: START TYPE

Directiva de sfrit: </OL> - OBLIGATORIE O list ordonat are aceeai structur de baz ca o list neordonat. Pentru a defini o list ordonat se folosete directiva <OL> nuntrul creia fiecare element se specific folosind directiva <LI>.
<P> Acesta este un exemplu de lista ordonata: <OL> <LI>Primul element al listei</LI> <LI>Al doilea element al listei</LI> <LI>Al treilea element al listei</LI> </OL> </P>

Va avea ca rezultat n browser:

Exemplu 4.2 Exemplu list ordonat

42

Proiectul pentru nvmntul Rural

Liste i tabele n limbajul HTML

Atributul TYPE. Implicit numerotarea elementelor dintr-o list ordonat se face automat folosindu-se cifre de tip arabice. Pentru a modifica stilul de numerotare se poate folosi atributul TYPE n cadrul directivei <OL>. Exist 5 tipuri de numerotare suportate. n funcie de stilul de numerotare dorit se va specifica valoarea atributului TYPE aa cum este specificat n tabelul de mai jos. Valoare atribut TYPE A a I i 1 Stilul generat Litere majuscule Litere mici Cifre romane majuscule Cifre romane mici Cifre arabe Exemplu A, B, C, D... a, b, c, d... I, II, III, IV... i, ii, iii, iv... 1, 2, 3, 4

Spre exemplu pentru a defini o list care folosete stilul de numerotare cu litere majuscule vom scrie astfel: <OL TYPE=A> < LI> Primul element < /LI> < LI> Elementul 2 din lista< /LI> < LI> ultimul element din lista< /LI> </OL> Atributul START. Permite specificarea valorii cu care va ncepe numerotarea elementelor listei. Daca nu este folosit atributul start numerotarea va ncepe cu 1 sau respectiv cu primul caracter din setul specificat de ctre atributul TYPE. Spre exemplu pentru a specifica o list ordonat care folosete stilul de numerotare cu cifre romane i pentru care primul element ncepe de la valoarea VI (6) vom scrie astfel: <OL TYPE=I START=6> <LI> Primul element este numerotat cu VI </LI> <LI> Elementul urmtor va fi numerotat cu VII </LI> <LI> Si asa mai departe..... </LI> </OL> Listele ordonate precum i cele neordonate pot avea diferite nivele, n sensul c fiecare din elementele unei liste poate consta dintr-o alt sublist. Fiecare din aceste subnivele va fi intendat corespunztor de ctre browser, efectul acestor intendri fiind cumulativ. De acest

Proiectul pentru nvmntul Rural

43

Liste i tabele n limbajul HTML

fapt trebuie inut cont atunci cnd se folosesc mai multe nivele de imbricare pentru liste. Test de autoevaluare: 4.3 Cnd se folosesc listele ordonate n locul celor neordonate? Dai cteva exemple de folosire.

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 47.

4.4 Liste de definiie


Listele de definiii permit enumerarea unei liste de elemente fiecare Cum definim din acestea fiind urmate de explicaia lor. Spre exemplu Glosarul lista de unei cri poate fi considerat o list de definiii. Pentru definirea definiie? acestor tipuri de list se folosesc trei directive HTML: <DD> , <DL> i <DT>.

<DL>
Funcionalitate: Creeaz o list de definiii

Atribute: COMPACT

Directiva de sfrit:

</DL> - OBLIGATORIE
O list de definiii este ncadrat de directiva pereche <DL>. n interiorul acestor directive fiecare element al unei liste de definiii este compus din 2 pri. Prima parte este un termen urmat n partea a doua de definiia acestuia. Pentru definirea primei pari se folosete directiva HTML <DT>, urmat de definiia acestuia care se face cu ajutorul directivei <DD>. n mod normal browserul plaseaz definiia termenului pe un rnd nou, ns dac aceast definiie este foarte scurt (3 caractere) o va plasa pe acelai rnd cu termenul.

44

Proiectul pentru nvmntul Rural

Liste i tabele n limbajul HTML

Atributul COMPACT. Specific browserului s afieze lista ocupnd ct mai puin spaiu posibil.

<DT>

<DD>

Funcionalitate: Funcionalitate: Creeaz un termen Creeaz o definiie ntr-o list de definiii pentru un termen Atribute: Nu are Atribute: Nu are

Directiva de sfrit: </DT> - opional

Directiva de sfrit: </DD> - opional

n interiorul elementului <DD> se poate folosi aproape orice directiv HTML, inclusiv alte liste, imagini, directive pentru formatarea textului etc. Totui dac nu este folosit nici o directiv de formatare, textul din cadrul elementului <DD> este afiat intendat. Mai jos este exemplificat modul de folosire a unei liste de definiii prin realizarea unui glosar de termeni din domeniul WEB: ... <H3> Glosar termeni WEB </H3> <DL> <DT>Browser</DT> <DD>Aplicatie software utilizat pentru vizualizarea paginilor WEB</DD> <DT>GIF</DT> <DD>Format de imagine comprimat utilizat frecvent in Internet</DD> <DT>HTML</DT> <DD>Limbaj pentru realizarea paginilor WEB</DD> </DL> ... Va avea ca rezultat n browser:

Proiectul pentru nvmntul Rural

45

Liste i tabele n limbajul HTML

Figura 4.3 Exemplu lista definiii Test de autoevaluare: 4.4 . Construii o list de definiii care s conin tipurile de liste disponibile n HTML i definiia lor.

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 47.

46

Proiectul pentru nvmntul Rural

Liste i tabele n limbajul HTML

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 4.1. Limbajul HTML ofer suport pentru realizarea a trei tipuri de liste: neordonate, ordonate, liste de definiii. Consultai seciunea 4.1. ntrebarea 4.2. Codul HTML pentru realizarea acestei liste este: <UL> <LI TYPE=SQARE>Element 1</LI> <LI>Element 2 </LI> <LI TYPE=SQARE><LI>Element 3</LI> </UL> Consultai seciunea 4.2. ntrebarea 4.3. Listele ordonate sunt folosite n cazul n care ordinea elementelor este relevant. Exemple de folosire pentru listele ordonate: Cuprinsul lucrrilor, lista de pai a unui algoritm etc. Consultai seciunea 4.3. ntrebarea 4.4. Codul HTML pentru realizarea acestei liste este: <DL> <DT>Neordonate</DT> <DD> Lista fara numere de ordine </DD> <DT>Ordonate</DT> <DD> Lista cu numere de ordine </DD> <DT>Lista de definitii</DT> <DD> Lista compusa din termeni si definitii ale acestora </DD> </DL> Consultai seciunea 4.4. Indicaii la problemele propuse Problemele propuse n lucrrile de verificare se fac dup modelele de exemple prezentate n unitatea de nvare sau dup tipicul acestora.

Proiectul pentru nvmntul Rural

47

Liste i tabele n limbajul HTML

Bibliografie
1. Dave Taylor - Crearea paginilor WEB, Editura Teora 1999, pg.85-99 2. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i XML, Editura Printech Bucureti 2004, pg.36-38 3. T.Gugoiu HTML prin exemple, Editura Teora 2000, pg.33-38

48

Proiectul pentru nvmntul Rural

Hyperlinks in limbajul HTML

Unitatea de nvare Nr. 5


HYPERLINKS N LIMBAJUL HTML Obiectivele Unitii de nvare Nr.5 5.1 Hypertext i hyperlink 5.2 URL identificator unic de resurse WEB 5.3 Realizarea legturilor n HTML 5.4 Folosirea imaginilor pentru legturi Rspunsuri i comentarii la ntrebrile din testele de evaluare Bibliografie 50 50 51 51 55 57 57

Proiectul pentru nvmntul Rural

49

Hyperlinks in limbajul HTML

Obiectivele Unitii de nvare Nr. 5:


Dup parcurgerea acestei Unitii de nvare vei fi capabili: S creai hyperlink-uri n documente HTML S definii tipurile de legturi S folosii imagini ca hyperlink-uri S nelegei definiia i structura unui URL

5.1 Hypertext i Hyperlink


Hypertext, Hyperlinks Termenul de Hypertext este format dintr-o asociere de ali doi termeni: Hyper - care nseamn mai ncolo de si text. i se refer la o modalitate de organizare a unui document diferit de organizarea liniar folosit n cazul documentelor tiprite. Mai concret cititorul unui document Hypertext are posibilitatea s-l parcurg ntr-o alt ordine dect cea predefinit de ctre autor. Acest lucru este posibil prin existena legturilor Hyperlinks ntre diferite componente ale documentului. Adevrata putere a limbajului HTML const tocmai n abilitatea sa de a lega texte sau imagini din cadrul unui document HTML de alt document HTML sau seciune a acestuia. Aceste legturi au scopul de a permite cititorului s sar la un moment dat direct la locul unde va gsi mai multe informaii despre o chestiune n discuie. Implementnd astfel conceptul de Hypertext. Definitie n esen un sistem Hypertext este o reea semantic ale crui noduri sunt fragmente de text. Dac nodurile conin i imagini sau sunete, putem vorbi de un sistem Hypermedia ntr-un sistem Hypertext se disting urmtoarele elemente fundamentale: nodurile reprezint paginile unui document Hypertext ancorele (intele) reprezint fragmente unitare de noduri cum ar fi spre exemplu cuvinte evideniate n text, imagini, butoane etc. legturile ntre noduri, avnd drept punct de plecare fie ntreg nodul surs fie o ancor a sa

50

Proiectul pentru nvmntul Rural

Hyperlinks in limbajul HTML

5.2 URL Identificator unic de resurse WEB


Fiecare pagin sau resurs WEB are asociat o adres unic n internet cunoscut sub acronimul de URL (Uniform Resource Locator). Sintaxa unui URL este conceput a fi ct mai generic posibil, un URL fiind compus din urmtoarele componente: 1. Numele resursei, precedat de: 2. Ierarhia de directoare unde se afl resursa respectiv, precedat de: 3. Adresa de internet sau numele de domeniu al serverului care gzduiete resursa, precedat de: 4. Protocolul folosit de ctre browser i serverul care gzduiete resursa pentru a o transmite Nu este obligatoriu pentru toate componentele descrise mai sus s apar ntr-un URL acestea fiind (n msura posibilitilor) completate automat de ctre browser sau server Aceasta este sintaxa unui URL: protocol://adres_server/cale_resurs/nume_resurs i iat cteva exemple de URL-uri: http://www.hotnews.ro/revista_presei.htm http://www.desprecopii.com ftp://ftp.myftp.ro/pub informatii_contact.html Primul URL din exemplul de mai sus este un URL n format absolut sau complet. Browserele ofer de asemenea posibilitatea folosirii URL-urilor relative sau incomplet specificate, completnd automat prile lips ale URL-ului specificat att ct este posibil. Cum ar fi n exemplul de mai sus pentru cel de-al patrulea URL browserul l va completa automat presupunnd c pagina informatii_contact se afl pe acelai server i n acelai director cu documentul curent.

Componentele URL-ului

5.3 Realizarea legturilor n HTML


n cadrul unei pagini HTML unul sau mai multe cuvinte consecutive pot s aib asociate o anumit resurs WEB adic, o alt pagin HTML, o imagine, un film etc. Directiva <A> face posibil definirea acestei asocieri sau legturii folosind n acest scop urmtoarea sintax:
Proiectul pentru nvmntul Rural

51

Hyperlinks in limbajul HTML

<A HREF=URL> Textul afiat cu care se face asocierea </A> Legturile vor fi afiate de ctre browser cu alt culoare i vor fi scoase n eviden fa de restul textului, de obicei fiind subliniate. Iat un exemplu de definire a unei legturi HTML:
... <P>Definirea <A HREF=http://www.invathtml.ro/despre_legaturi.html> legaturilor HTML </A> este simpla! </P> ...

Va avea ca rezulta n browser:

Figura 5.1 Exemplu legtur HTML Dac utilizatorul va selecta zona legturii cu mouse-ul browserul va ncrca pagina identificat de URL-ul specificat ca valoare a atributului HREF.

<A>
Funcionalitate: Creeaz o ancor Atribute: HREF NAME TITLE TARGET legtur sau o

Directiva de sfrit:

</A> este OBLIGATORIE

52

Proiectul pentru nvmntul Rural

Hyperlinks in limbajul HTML

n concluzie, directiva <A> este folosit pentru a creea o legtur (hyperlink) ctre un document, atributul HREF avnd rolul de a specifica adresa acelui document, iar cuvintele dintre directivele ancor de deschidere <A> i respectiv de nchidere vor fi afiate ca hyperlink. Tipuri de legaturi Exist trei tipuri principale de legturi: Legturi interne folosite n cadrul documentelor de dimensiuni mari pentru o mai bun structurare a coninutului. Legturi locale sunt legturi ctre alte documente aflate pe acelai server. Legturile locale se pot specifica folosind fie URL-ul complet, fie un URL relativ care conine doar calea ctre resursa respectiv relativ la directorul curent. Legturi externe sunt legturi ctre pagini gzduite pe alt server de WEB. Pentru legturile externe se folosete ntotdeauna URL-ul specificat complet.

Atributul NAME

Aa cum am artat mai sus o ancor este o etichet folosit pentru a identifica o anumit seciune a unui document HTML. Pentru a defini o ancor directiva <A> este folosit mpreun cu atributul su NAME. Spre exemplu, presupunnd c acest document este un document HTML i vrem s definim o ancor pe titlul acestei subunitii de nvare pentru a putea face referire la el din alt parte a documentului, vom scrie: <A NAME=legaturi_html> Realizarea legturilor HTML </A>

Atributul HREF

Mai departe, n momentul n care se dorete referirea acestei ancore se va folosi tot directiva <A> dar de aceast dat mpreun cu atributul HREF. n cazul n care referina se face din aceeai pagin n care a fost definit ancora este de ajuns specificarea numelui ancorei precedat de caracterul #. Ca n exemplul de mai jos: ... <P>Definirea <A HREF=#legaturi_html> legaturilor HTML </A> este simpla.</P> ... Accesarea acestei legturi va spune browserului s deruleze pagina pn la nceputul Unitii de nvare Realizarea legturilor HTML, unde este definit ancora legaturi_html. Dac referirea se face din alt pagin HTML dar care se afl pe acelai server i n acelai director se poate de asemenea folosi de

Proiectul pentru nvmntul Rural

53

Hyperlinks in limbajul HTML

asemenea un URL relativ. Presupunnd c fiierul ce conine Unitatea noastr de nvare se numete despre_legaturi.html vom scrie: ... <P>Definirea <A HREF=despre_legaturi.html#legaturi_html> legaturilor HTML </A> este simpla.</P> ... n cazul n care pagina noastr se afl pe alt server este necesar folosirea URL-ului complet specificat. Test de autoevaluare 5.1 Scriei directiva ce realizeaz hyperlink la pagina i la ancora definite mai sus n cazul n care aceasta se afl pe un alt server de WEB dect pagina din care se face referire.

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 57.

Atributul Target

Atributul TARGET. n mod obinuit la accesarea unui hyperlink browserul va ncrca resursa specificat n aceeai pagin a browserului. Pentru a specifica o locaie diferit de ncrcare a resursei se folosete atributul target. Dac este specific valoarea _blank resursa va fi ncrcat ntr-o fereastr pe care browserul o va crea special pentru afiarea noii resurse. <A HREF=http://www.yahoo.com TARGET=_blank > Yahooooo! </A> La accesarea legturii browserul va deschide o nou fereastr n care va afia pagina cunoscutului portal Yahoo. Dac vei folosi pentru toate legturile din pagin atributul TARGET specificnd valoarea _blank, fiecare din aceasta va fi lansat ntr-o

54

Proiectul pentru nvmntul Rural

Hyperlinks in limbajul HTML

nou fereastra de browser ceea ce nu este ntotdeauna elegant deoarece este foarte probabil ca utilizatorul s piard numrul ferestrelor deschise i s nu mai fie capabil s le gestioneze eficient. Atributul TITLE Atributul TITLE Permite specificarea unui text descriptiv pentru resursa la care se refer legtura. Acest text va fi afiat de ctre browser n momentul n care cursorul mouse-ului este deplasat deasupra legturii. De obicei acest text este afiat sub form de fereastr tool tip precum n exemplul de mai jos.
<A HREF="http://www.yahoo.com" TITLE="Aceasta legatura ne transporta direct la pagina Yahoo" > Yahooooo! </A>

Figura 5.2 Exemplu utilizare atribut TITLE Atributul TABINDEX Atributul TABINDEX. n mod obinuit o legtur este accesat n momentul n care utilizatorul se afl cu cursorul deasupra legturii i apas butonul mouse-ului. O alt modalitate de accesare a unei legturi este prin apsarea succesiv a tastei <TAB> pn n momentul n care cursorul ajunge deasupra legturii urmat de apsarea tastei <ENTER>. Ordinea n care se face trecerea de la o legtura la alta la apsarea tastei <TAB> poate fi stabilit de ctre valoarea atributului TABINDEX. Valoarea atributului TABINDEX poate fi orice ntreg mai mare dect zero. Atributul ACCESSKEY. Valoarea acestui atribut const ntr-un identificator al unei taste la apsarea creia se va accesa legtura.

Atributul ACCESSKEY

5.4 Folosirea imaginilor pentru legturi


Pentru a face o pagin ct mai dinamic, mai interactiv i mai uor de folosit pentru utilizator o tehnic adesea utilizat este cea a folosirii imaginilor ca hyperlink-uri n locul textelor. Spre exemplu pentru legtura ctre pagina WEB principal se poate folosi n locul

Proiectul pentru nvmntul Rural

55

Hyperlinks in limbajul HTML

textului HOME o imagine ce nfieaz o cas precum imaginea de mai jos: .

Realizarea unei legturi care s foloseasc imagini n locul textului este simpl i se face cu ajutorul directivelor <A> i <IMG>, directiva IMG fiind specificat n interiorul perechii <A></A> ca n exemplu de mai jos: <A HREF="Home.html"> <IMG SRC="home.jpg">Acasa </A> Codul HTML de mai sus va crea o imagine nsoit de un text (Acasa) care se va comporta ca un hyperlink. Atunci cnd este folosit ca hyperlink o imagine este n mod normal ncadrat ntr-un ptrat de culoarea setat pentru hyperlink n pagina respectiv. n felul acesta este indicat faptul c hyperlinkul este activ Afiarea imaginilor n pagin poate fi dezactivat n anumite browsere de aceea este recomandat n cazul folosirii imaginilor drept hyperlink ca directiva <IMG> s conin i atributul ALT cu o descriere sugestiv pentru imaginea sau hyperlink-ul respectiv.

Test de autoevaluare 5.2 Definii un hyperlink de tip imagine care s afieze un text explicativ n locul imaginii n cazul n care imaginea nu poate fi incrcat n browser.

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 57.

56

Proiectul pentru nvmntul Rural

Hyperlinks in limbajul HTML

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 5.1. ... <P>Definirea <A HREF=http://www.adresa_server.ro/cale_fisiere_html /despre_legaturi.html#legaturi_html> legaturilor HTML </A> este simpla.</P> ... Pentru nelmuriri revedei seciunea 5.3. ntrebarea 5.2. Codul HTML este urmtorul: <A HREF="Home.html"> <IMG SRC="home.jpg" ALT=ACASA> </A> Pentru nelmuriri revedei seciunea 5.4. Indicaii la problemele propuse Problemele propuse n lucrrile de verificare se fac dup modelele de exemple prezentate n unitatea de nvare sau dup tipicul acestora.

Bibliografie
1. Dave Taylor - Crearea paginilor WEB, Editura Teora 1999, pg.100-108 2. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i XML, Editura Printech Bucureti 2004, pg.29-32 3. T.Gugoiu HTML prin exemple, Editura Teora 2000, pg.65-74 4. Sabin Buraga Proiectarea siturilor Web. Design i funcionalitate, Ediia a II-a, Editura Polirom 2002, pg. 23-30

Proiectul pentru nvmntul Rural

57

Folosisera imaginilor in limbajul HTML

Unitatea de nvare Nr. 6


FOLOSIREA IMAGINILOR N LIMBAJUL HTML

Obiectivele Unitii de nvare Nr.6 6.1 nelegerea formatelor grafice folosite n WEB 6.2 Folosirea imaginilor n cadrul paginilor WEB 6.3 Imagini cu arii sensibile (Image Maps) Lucrare de verificare a Unitilor de nvare Nr. 4, 5 i 6 Rspunsuri i comentarii la ntrebrile din testele de evaluare Bibliografie

59 59 69 65 67 70 71

58

Proiectul pentru nvmntul Rural

Folosisera imaginilor in limbajul HTML

Obiectivele Unitii de nvare Nr. 6:


Principalele obiective ale Unitii de nvare Nr. 6 sunt: Dup parcurgerea acestei Unitii de nvare vei fi capabil: S identifici diferite formate de imagini suportate de browsere S adaugi imagini la o pagin HTML S specifici modul de aliniere al imaginii n pagin i al textului din jurul ei S specifici dimensiunea imaginii

6.1 nelegerea formatelor grafice folosite n WEB


Limbajul HTML nu impune folosirea unui anumit format de imagine ci ofer n schimb o modalitate flexibil de a include orice tip de imagine n pagina HTML. Afiarea unui anumit tip de imagine depinde ns de tipul browserului, de aceea exist totui un numr limitat de formate grafice folosite n WEB., i dintre acestea doar dou sunt populare i foarte des folosite: GIF i JPEG. GIF Formatul grafic folosit prima oar n cadrul paginilor WEB i care a rmas cel mai popular este formatul GIF. Denumirea de GIF reprezint iniialele expresiei Graphic Interchange Format care n limba romn se traduce prin Format grafic pentru transfer . Avantajele formatului grafic GIF sunt urmtoarele: Este independent de platform. Aceasta nsemn c dac o imagine este creat pe o main care ruleaz LINUX aceasta se va vedea la fel pe o main care ruleaz alt sistem de operare Windows sau Macintosh. Stocarea datelor se face comprimat ceea ce duce la fiiere de dimensiuni mici care se pot transfera rapid n reea. Comprimarea datelor n cazul formatului grafic GIF se face folosindu-se un algoritm fr pierdere de date. Aceasta nsemn c dintr-o imagine in format GIF se poate restaura n orice moment imaginea original necomprimat.

Proiectul pentru nvmntul Rural

59

Folosisera imaginilor in limbajul HTML

JPEG

Dezavantajul formatului GIF este acela c nu permite folosirea unui numr mai mare de 256 de culori pentru o imagine. Acest neajuns este nlturat n cazul formatului JPEG. Formatul grafic JPEG a fost creat de ctre Joint Photographic Experts Group care nseamn n limba romn Grupul experilor fotografi, i este ca i formatul GIF independent de platform. Spre deosebire ns de GIF acest format suport zeci de mii de culori pentru a putea reprezenta imagini fotografice ct mai aproape de realitate. Un alt avantaj i dezavantaj n acelai timp al formatului JPEG fa de GIF este acela c formatul JPEG folosete un algoritm cu ajutorul cruia se obine o rat mai bun de compresie a datelor. Spre exemplu este un lucru obinuit ca un fiier JPEG s aib dimensiuni de pn la 7-8 ori mai mici dect un fiier n format GIF care reprezint aceeai imagine. Am spus dezavantaj n acelai timp deoarece aceast compresie se face spre deosebire de GIF cu pierdere de date. Aceasta nseamn c o imagine transformat din format JPEG n format necomprimat nu va corespunde exact cu originalul ci vor fi anumite diferene. Aceste diferene ns nu se pot observa n mod normal cu ochiul liber. Cum alegem ntre GIF i JPEG? Ei bine, ambele formate sunt universal suportate de ctre majoritatea browserelor, i prin urmare criteriul compatibitii nu este unul puternic. Prin urmare vom ncerca s folosim avantajele fiecrui format n parte.

6.2 Folosirea imaginilor n cadrul paginilor WEB


Pentru a introduce imagini ntr-o pagin HTML se folosete directiva HTML <IMG>.

<IMG>
Funcionalitate: Introduce o imagine n pagin Atribute: SRC ALT ALIGN BORDER HEIGHT WIDTH HSPACE VSPACE Directiva de sfrit: </IMG> este OPTIONAL 60
Proiectul pentru nvmntul Rural

Folosisera imaginilor in limbajul HTML

Directiva HTML IMG folosete valoarea atributului SRC pentru a identifica locul de unde va prelua imaginea care se dorete a fi adugat n pagin. Iat mai jos un exemplu cu cel mai simplu mod de utilizare al directivei IMG: <P> Acesta este poza iepurasului roz: <IMG SRC="iepuras.gif" ALT="iepuras roz"> </IMG> </P> va avea ca rezultat n browser:

Figura 6.1 Exemplu folosire directiva <IMG> Folosirea atributului ALT nu este obligatorie ns este recomandat deoarece browserul se poate configura astfel nct s nu ncarce imaginile din pagin, caz n care n locul imaginii este afiat textul oferit de atributul ALT. n mod ideal pagina ar trebui construit astfel nct s fie lizibil chiar dac imaginile nu pot fi ncrcate. Folosirea directivei <IMG> nu va introduce imaginea pe o linie nou ci n continuarea textului. Implicit imaginea va fi aliniat astfel nct marginea inferioar a imaginii s corespund cu marginea inferioar a textului precum se vede n Figura 6.1. Dac se dorete o altfel de aliniere vertical a imaginii sau a textului se vor folosi atributele directivei <IMG> dup cum vom vedea mai jos. Atributul SRC. Acest atribut este obligatoriu n cazul directivei <IMG>. Valoarea este un URL i reprezint locul n care se afl fiierul ce conine imaginea ce se dorete a fi inclus n pagina. Etichetare imagine Atributul ALT. Dac imaginea specificat de ctre atributul SRC nu poate fi ncrcat din diferite motive: fiier imagine incomplet, conexiune ntrerupt, URL specificat greit sau browserul este configurat pentru a nu ncrca imaginile, atunci vor fi afiate implicit n locul imaginii o alt imagine generic care s indice faptul c imaginea specificat nu a fost ncrcat. Acest lucru nu este ntotdeauna de dorit deoarece utilizatorul nu ar putea avea nici o 61

Proiectul pentru nvmntul Rural

Folosisera imaginilor in limbajul HTML

informaie n legtur cu imaginea care nu s-a ncrcat. n aceste cazuri textul specificat de atributul ALT va fi afiat n locul imaginii generice. Teste autoevaluare 6.1. Cum se poate face ntr-o pagin HTML pentru ca imaginea margareta.jpg din directorul curent s fie afiat la nceputul paginii?

6.2 Cum se poate face ca browserul s afieze cuvntul margareta n locul imaginii dac aceasta nu a putut fi ncrcat de ctre browser? a> b> c> d>
<IMG SRC= Margareta.jpg>margareta margareta<IMG SRC= margareta.jpg> <IMG SRC= margareta.jpg ALT= margareta> <P>margareta<IMG SRC=margareta.jpg></P>

Rspunsurile corecte i comentarii asupra acestora se gsesc la pagina 70.

Atributul ALIGN. Cu ajutorul acestui atribut se poate specifica modalitatea de aliniere pe orizontal sau pe vertical a unei imagini fa de textul sau alt imagine vecin. Alinierea pe orizontal Valorile disponibile pentru alinierea pe orizontal sunt : ALIGN = LEFT va avea ca efect poziionarea imaginii n stnga paginii, iar textul va ncadra imaginea prin partea dreapt a acesteia ca n figura 6.2. ALIGN = RIGHT va avea ca efect poziionarea imaginii n dreapta paginii, iar textul va ncadra imaginea prin partea stng a acesteia ca n figura 6.2. Dac se dorete la un moment dat ntreruperea ncadrrii imaginii de ctre text se folosete directiva <BR> mpreun cu atributul su CLEAR. ... <P> <IMG

SRC="iepuras.gif" ALT="Bugs Bunny" ALIGN="left"> Un iepuras ... 9 x 9 x 19 h <BR CLEAR=LEFT> ... 62


Proiectul pentru nvmntul Rural

Folosisera imaginilor in limbajul HTML

SRC="iepuras.gif" ALT="Bugs Bunny" ALIGN="RIGHT"> Un iepuras ... 9 x 9 x 19 h <BR CLEAR=RIGHT> ... Va avea ca rezultat n browser:

<IMG

Figura 6.2 Exemplu aliniere orizontal la stnga si la dreapta Alinierea pe vertical Pentru specificarea modului de aliniere pe vertical a imaginii fa de textul vecin sau fa de alte imagini pe aceeai linie se folosete de asemenea atributul ALIGN urmtoarele valori fiind disponibile: ALIGN=TOP partea superioar a imaginii va fi la acelai nivel cu partea superioar a altei imagini sau cu a celei mai nalte litere din textul de pe aceeai linie. ALIGN=MIDLLE mijlocul imaginii va corespunde cu mijlocul altei imagini sau cu mijlocul textului de pe aceeai linie. ALIGN=BOTTOM partea inferioar a imaginii va corespunde cu partea inferioar a textului de pe aceeai linie.

... Iepuras sus <IMG SRC="iepuras.gif" ALIGN="TOP">. Ce dragut este! <BR CLEAR="ALL"> Iepuras la mijloc <IMG SRC="iepuras.gif"
Proiectul pentru nvmntul Rural

63

Folosisera imaginilor in limbajul HTML

ALIGN="MIDDLE">Ce dragut este! <BR CLEAR="ALL"> Iepuras jos <IMG SRC="iepuras.gif" ALIGN="BOTTOM">Ce dragut este! ... Va avea ca rezultat n browser:

Figura 6.3 Exemple aliniere vertical. Teste autoevaluare 6.3 Cum se scrie codul HTML care s afieze o imagine centrat fr text la stnga i la dreapta ei ?

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 70.

64

Proiectul pentru nvmntul Rural

Folosisera imaginilor in limbajul HTML

Dimensiunea imaginilor

Atributele HEIGHT i WIDTH n mod normal browserul determin dimensiunea imaginii i n funcie de acesta rezerv un spaiu corespunztor pentru imagine n pagin pentru fiecare imagine n parte. Totui aceste informaii nu pot fi determinate dect n momentul n care imaginea a fost complet adus de pa server. Acest lucru poate face ca timpul necesar pentru afiarea paginii n browser s creasc. Dac aceste informaii legate de dimensiunile imaginii sunt specificate prin atributele HEIGHT i WIDTH timpul necesar pentru ca browserul s afieze pagina va vi mult mai mic (chiar dac imaginile vor fi afiate n pagin mai trziu, n momentul n care au fost complet ncrcate). Valoarea atributelor HEIGHT i WITH poate fi un ntreg pozitiv i reprezint numrul de pixeli pe vertical respectiv pe diagonal pe care i ocup imaginea. Dac valorile acestor atribute nu corespund cu dimensiunile imaginii browserul va redimensiona imaginea afiat astfel nct s fie conform cu valorile specificate de atribute. Redimensionarea imaginilor trebuie fcut cu grij deoarece specificarea unor valori foarte ndeprtate de valoarea original a imaginii poate rezulta n afiarea unor imagini distorsionate sau cu o rezoluie nepotrivit.

Dimensiunea spatiilor

Atributele HSPACE i VSPACE. Permite definirea spaiilor ntre imagine i textul sau obiectele vecine. Valoarea acestor atribute poate fi un ntreg pozitiv i reprezint numrul de pixeli ce va fi lsat ntre imagine i textul ce o nconjoar la stnga sau dreapta ei respectiv deasupra sau dedesubtul ei.

6.3 Imagini cu arii sensibile (Image Maps)


Aa cum am vzut n seciunea anterioar imaginile pot fi folosite pentru hyperlink prin simpla adugare a directivei <IMG> n interiorul directivei <A>. Dac utilizatorul va selecta oricare din punctele imaginii respective se va deschide pagina de la URL-ul specificat de valoarea atributului HREF. HTML ofer n plus o modalitate special de folosire a imaginilor ca hyperlink permind definirea unor suprafee n cadrul imaginii care s aib fiecare asociat cte un URL separat. Definirea acestor suprafee se face cu ajutorul directivelor <MAP> i <AREA>.

Proiectul pentru nvmntul Rural

65

Folosisera imaginilor in limbajul HTML

<MAP>

<AREA>

Funcionalitate: Funcionalitate: Definete o hart de Definete o suprafa suprafee sensibile sensibil n cadrul unei hri Atribute: Atribute: NAME SHAPE Directiva de sfrit: COORDS HREF </MAP> este NOHREF OBLIGATORIE Directiva de sfrit: </AREA> este OPTIONAL Iat paii pentru definirea suprafeelor sensibile pentru o anume imagine: Utilizarea n cadrul directivei IMG a atributelor ISMAP i USEMAP <IMG SRC=imagine.gif ISMAP USEMAP=#harta>

Definirea harii specificate ca valoarea a atributului MAP cu ajutorul directivelor MAP i AREA <map name="harta"> <area coords="0,25,50,50" href="link1.html"> <area coords="0,0,25,25" href="link2.html" </map>

Rezultatul va fi o imagine care va avea 2 arii sensibile una n partea stng i una n partea dreapt a imaginii. Dac utilizatorul va selecta partea stng browserul va ncrca pagina link1.html, dac se va selecta aria dreapt browserul va ncrca pagina link2.html . Directiva MAP Directiva MAP are un singur atribut, NAME, cu ajutorul cruia aceast hart poate fi identificat i folosit pentru o anumit imagine. Definirea suprafeelor sensibile pentru fiecare hart n parte se face folosind o succesiune de directive <AREA> i a atributelor acesteia dup cum vom vedea mai jos. Directiva AREA definete fiecare din suprafeele sensibile ale unei hari. Cu ajutorul atributelor sale se pot defini suprafee cu diferite
Proiectul pentru nvmntul Rural

Directiva AREA 66

Folosisera imaginilor in limbajul HTML

forme i dimensiuni i se pot asocia hyperlinkuri pentru fiecare n parte. Atributul COORDS permite definirea limitelor suprafeei, valoarea sa fiind reprezentat de o serie de numere ntregi separate prin virgul. Numrul i semnificaia acestor valori este n funcie de valoarea atributului SHAPE. Atributul SHAPE. Permite definirea formei pentru zona sensibil. Mai jos sunt prezentate formele ce pot fi specificate de ctre acest atribut i valoarea corespunztoare i de asemenea este explicat pentru fiecare n parte cum este interpretat : RECTANGLE definete o zon dreptunghiular. Coordonatele se specific sub forma: COORS=x,y,z unde CIRCLE definete o zon circular POLYGON definete un poligon neregulat i nchis cu un numr oarecare de laturi.

Lucrare de verificare a Unitilor de nvare Nr. 4, 5 i 6


1. Creai o list precum cea de mai jos din Figura 4.4 . Lista conine dou nivele imbricate. La primul nivel avem o list de definiii. Definiia pentru primul termen este o list neordonat, iar definiia celui de-al doilea termen este o list ordonat. Termenii listei de definiie trebuie s fie afiai ngroat. Predai fiierul HTML n format electronic ca rezultat al rezolvrii lucrrii de verificare Pe lng informaiile prezentate n manual se poate utiliza reperul bibliografic numrul 2 din bibliografia unitii de nvare. Nr. de puncte 8 (4p - realizarea listei de definiie conform cerinelor 2p realizarea listei neordonate ca definiie pentru primul termen 2p realizarea listei ordonate ca definiie pentru cel de-al doilea termen)

Proiectul pentru nvmntul Rural

67

Folosisera imaginilor in limbajul HTML

Figura 4.4 Lucrarea de verificare 2. Realizai un meniu pentru un site Web de prezentare a unei firme. Site-ul are urmtoarele pagini: acasa.html, produse.html, servicii.html i contact.html. n fiecare din acestea trebuie s fie o legtur la oricare alt pagin a site-ului. ncercai s l facei ct mai atractiv cu putin! Predai cele 4 fiiere HTML n format electronic ca rezultat al rezolvrii lucrrii de verificare. Nr. de puncte 9 (6p definirea corect, n fiecare pagin a legturilor ctre celelalte pagini html, 3p - pentru aspectul paginii i ingeniozitate. Ca ajutor suplimentar utilizai reperele bibliografice 2 din bibliografia unitii de nvare. 3. Realizai o list HTML neordonat care s aib n locul marcajelor standard imaginea coninut n fiierul bulina.jpg Sugestie: Folosii o list de definiie pentru a simula lista neordonat cerut. 68
Proiectul pentru nvmntul Rural

Folosisera imaginilor in limbajul HTML

Predai fiierul HTML n format electronic ca rezultat al rezolvrii lucrrii de verificare Pe lng informaiile prezentate n manual se poate utiliza reperul bibliografic numrul 2 i 3 din bibliografia unitii de nvare. Nr. de puncte 8 (4p - realizarea listei, 4p folosirea imaginii cerute n locul semnelor predefinite pentru listele neordonate)

Proiectul pentru nvmntul Rural

69

Folosisera imaginilor in limbajul HTML

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 6.1. Codul HTML care realizeaz acest lucru este urmtorul: ... <BODY> <P > <IMG SRC="margareta.jpg"> </IMG> </P> Directiva IMG este pus imediat dup directiva BODY pentru ca imaginea s fie afiat la nceputul paginii. Revedei indicaiile din seciunea 6.2. ntrebarea 6.2. Varianta corect de rspuns este c. Pentru aceasta se folosete atributul ALT pentru a specifica textul nlocuitor ca n exemplul de mai jos: <IMG SRC="margareta.jpg" ALT=margareta> </IMG> Revedei indicaiile din seciunea 6.2. ntrebarea 6.3. Pentru a realiza acest lucru folosim directiva BR mpreun cu atributul CLEAR pentru a evita nconurarea imaginii cu text i directiva <P> mpreun cu atributul ALIGN pentru a centra imaginea n pagin ca n exemplul de mai jos: <BR CLEAR="ALL"> <P ALIGN=CENTER> <IMG SRC="margareta.jpg" ALT=margareta> </IMG> </P> Revedei indicaiile din seciunea 6.2. Indicaii la problemele propuse Problemele propuse n lucrrile de verificare se fac dup modelele de exemple prezentate n unitatea de nvare sau dup tipicul acestora.

70

Proiectul pentru nvmntul Rural

Folosisera imaginilor in limbajul HTML

Bibliografie
1. Dave Taylor - Crearea paginilor WEB, Editura Teora 1999, pg.127-169 2. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i XML, Editura Printech Bucureti 2004, pg.46-47 3. T.Gugoiu HTML prin exemple, Editura Teora 2000, pg.51-59

Proiectul pentru nvmntul Rural

71

Realizarea tabelelor

Unitatea de nvare Nr. 7


REALIZAREA TABELELOR Obiectivele Unitii de nvare Nr.7 7.1 Realizarea unui tabel simplu n limbajul HTML 7.2 Definirea proprietilor globale ale unui tabel HTML 7.3 Definirea rndurilor unui tabel 7.4 Definirea celulelor unui tabel Rspunsuri i comentarii la ntrebrile din testele de evaluare Bibliografie 73 73 75 78 79 82 82

72

Proiectul pentru nvmntul Rural

Realizarea tabelelor

Obiectivele Unitii de nvare Nr.7 :


Dup parcurgerea acestei Unitii de nvare vei ti: Care este structura unui tabel HTML Care sunt elementele unui tabel HTML S creezi un tabel HTML S schimbi proprietile unui tabel

Scopul iniial al tabelelor n limbajul HTML a fost pentru prezentarea anumitor date organizate n format tabular. Suportul oferit de ctre HTML pentru tabele s-a dovedit ns foarte eficient la aranjarea n pagin a diferitelor elemente HTML. Cu ajutorul directivelor oferite de ctre limbajul HTML este posibil poziionarea a practic oricrui tip de element HTML la poziia dorit n pagin. Componentele Hai s unui parte: tabel enumerm i s descriem fiecare component a unui tabel n ROW Se refer la rndul unui tabel COLUMN Se refer la coloana unui tabel CELL Se refer la intersecia dintre o linie i o coloan CAPTION Se refer la un text explicativ cu privire la coninutul tabelului care apare deasupra tabelului HEADERS Se refer la primul rnd al tabelului sau antetul tabelului BORDERS Se refer la liniile de delimitare care nconjoar o celul a tabelului sau ntreg tabelul.

7.1 Realizarea unui tabel simplu n limbajul HTML


n limbajul HTML, un tabel simplu se poate defini cu ajutorul directivei <TABLE>; cu ajutorul directivei <TR> tabelul este mprit n linii, iar cu ajutorul directivei <TD> fiecare linie este mprit n celule. Orice tabel n limbajul HTML va ncepe ntotdeauna cu urmtoarea directiv pereche cu rol de container: <TABLE> </TABLE>

Proiectul pentru nvmntul Rural

73

Realizarea tabelelor

Pai

Dup directiva <TABLE> urmtorii pai sunt necesari pentru construirea tabelului: Pasul 1. Adugarea unui rnd. Se face folosind directiva pereche <TR> </TR> n interiorul elementului <TABLE> <TABLE> <TR> </TR> </TABLE> Pasul 2. mprirea rndului ntr-un numr de coloane Se face folosind directiva pereche <TD></TD> n interiorul unui element <TR>. Fiecare combinaie <TD></TD> reprezint o coloan/celul a tabelului. Spre exemplu dac tabelul are 3 coloane vom scrie: <TABLE> <TR> <TD></TD> <TD></TD> <TD></TD> </TR> </TABLE> Pasul 3. Introducerea datelor n fiecare celul a tabelului. n fiecare celul a tabelului definit mai sus se introduce textul sau elementele HTML pe care vrem s le afim n tabel, precum n exemplul de mai jos: <TABLE> <TR> <TD>Iepure</TD> <TD>25 Kg</TD> <TD><IMG SRC=iepuras.gif></TD> </TR> </TABLE> ntr-o celul a unui tabel se poate pune aproape orice element HTML: text formatat, imagini, liste, hyperlink etc. n exemplul de mai sus ultima coloan conine imagine. Pasul 4. Repetarea pailor 1,2, 3 pn ce tabelul este complet

74

Proiectul pentru nvmntul Rural

Realizarea tabelelor

Test de autoevaluare 7.1 Introducei un nou rnd n tabelul de mai sus

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 82.

7.2 Definirea proprietilor globale ale unui tabel HTML


Directiva HTML <TABLE> semnaleaz browserului faptul c urmeaz definiia unui tabel. La ntlnirea acesteia browserul va trece automat la o linie nou unde va poziiona tabelul definit urmnd ca la ntlnirea directivei de sfrit </TABLE> s sar din nou la o linie nou unde va afia textul ce urmeaz tabelului. Caracteristicile globale ale tabelului precum: modul de aliniere, dimensiuni, culori pot fi specificate folosind atributele acestei directive dup cum vom vedea mai jos.

<TABLE>
Funcionalitate: Definete un tabel Atribute: ALIGN BORDER BGCOLOR WIDTH HEIGHT Directiva de sfrit: </TABLE> este OBLIGATORIE Atributul ALIGN Atributul ALIGN. Specific unde anume va fi poziionat tabelul n pagin: aliniat la stnga (LEFT), la dreapta (RIGHT) sau pe centru (CENTER). Dac acest atribut nu este specificat tabelul va fi aliniat la stnga. Atributul VALIGN. Specific modul de aliniere al textului din cadrul celulelor tabelului. Valorile posibile pentru atribut sunt TOP pentru 75

Atributul VALIGN

Proiectul pentru nvmntul Rural

Realizarea tabelelor

aliniere la partea superioar a celulei, BOTTOM aliniere la partea inferioar a celulei i CENTER aliniere la centru celulei. Atributul BORDER Atributul BORDER. Specific dimensiunea liniilor de delimitare care ncadreaz celulele tabelului. Valoarea atributului este un ntreg ntre 0 i 15 i reprezint grosimea n pixeli a liniei. Specificarea valorii 0 va face ca aceste linii de delimitare s fie invizibile n browser. Dac atributul nu este specificat dimensiunea implicit este de 1 pixel. Atributul CELLSPACING. Specific spaiul dintre dou celule adiacente ale tabelului. Dac nu este specificat valoarea implicit a acestui atribut este de 2 pixeli.

Atributul CELLSPACING

Atributul Atributul CELLPADDING Specific spaiul minim n numr de pixeli CELLPADDING dintre marginea unei celule i coninutul su. Implicit acest atribut are valoarea de un pixel. Toate atributele de mai sus se pot folosi n acelai timp pentru a obine aspectul dorit pentru tabel. Iat mai jos un exemplu de folosirea a acestor atribute. S-a folosit o valoare intenionat exagerat pentru a identifica n figura rezultat rolul fiecruia n parte. De asemenea n aceeai pagin a fost definit un tabel pentru care aceste atribute nu au fost specificate i deci pentru care browserul a folosit la afiarea lui valorile implicite.

76

Proiectul pentru nvmntul Rural

Realizarea tabelelor

... <TABLE BORDER="1"> <TR> <TD>celula11</TD> <TD>celula12</TD> </TR> <TR> <TD>celula21</TD> <TD>celula22</TD> </TR> </TABLE> ... <TABLE BORDER="15" CELLPADDING="15" CELLSPACING="15" > <TR> <TD>celula11</TD> <TD>celula12</TD> </TR> <TR> <TD>celula21</TD> <TD>celula22</TD> </TR> </TABLE> ...

BORDER

CELLPADDING CELLSPACING Figura 7.1 Exemplu folosire atribute pentru directiva TABLE Atributele WIDTH i HEIGHT. n mod implicit browserul va dimensiona tabelul n funcie de dimensiunea ferestrei browserului i n funcie de dimensiunea coninutului tabelului. Dac este necesar se poate specifica o dimensiune explicit a tabelului cu ajutorul atributului WIDTH. Aceast dimensiune poate fi fie o valoare absolut, adic un ntreg reprezentnd numrul de pixeli ocupai de tabel pe orizontal, fie o valoare procentual caz n care browserul va afia tabelul ocupnd procentul specificat din dimensiunea ferestrei browserului.

Proiectul pentru nvmntul Rural

77

Realizarea tabelelor

Spre exemplu dac se vrea ca dimensiunea tabelului s fie de 100 pixeli vom scrie: <TABLE WIDTH=100> sau dac dorim ca dimensiunea tabelului s fie jumtate din dimensiunea browserului vom scrie: <TABLE WIDTH=50%> Dac dimensiunea tabelului este mai mare dect valoarea specificat de ctre atributul WIDTH browserul ca ignora acest atribut i va dimensiona tabelul. Similar atributul HEIGHT poate fi folosit pentru a specifica nlimea tabelului. Browserul va afia tabelul astfel nct nlimea lui s nu fie mai mic dect valoarea acestui atribut. Atributul NOWRAP Atributul NOWRAP. Textul dintr-o celul a unui tabel este rupt i se trece la linie nou3 n momentul n care dimensiune acestuia este mai mare dect lungimea celulei. Dac este specificat atributul NOWRAP atunci browserul va dimensiona celulele astfel nct s nu fie nevoie ca textul coninut n nici una din ele sa nu fie rupt. Dac se dorete trecerea la o linie nou n cadrul unei celule se poate folosi una din directivele HTML <BR> sau <P>. Test de autoevaluare 7.2 Cum se definete un tabel care s aib limea 80% din fereastra browserului i care s fie afiat centrat n pagin?

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 82.

7.3 Definirea rndurilor unui tabel


Pentru a insera un nou rnd ntr-un tabel se folosete directiva <TR> a crui denumire vine de la Table Row.4

3 4

Operaiunea se numete n limba englez WRAP Rnd de tabel Proiectul pentru nvmntul Rural

78

Realizarea tabelelor

<TR >
Funcionalitate: Definete un rnd ntr-un tabel

Atribute: ALIGN VALIGN BGCOLOR NOWRAP Directiva de sfrit:

</TR> este opional


Atributul ALIGN Atributul ALIGN . Permite configurarea modului de aliniere a textului pentru toate celule dintr-un rnd. Valoarea acestuia nu afecteaz ns modul de aliniere pentru celule din alt rnd dect cel curent. Valorile posibile sunt LEFT pentru stnga, RIGHT pentru dreapta i CENTER pentru aliniere la centru. Restul atributelor au aceeai efect ca a atributelor directivei TABLE despre care tocmai am discutat.

7.4 Definirea celulelor unui tabel


Directiva <TD> este folosit n cadrul directivei <TR> pentru a defini o celul a tabelului i coninutul acesteia. Exist cazuri n care ntr-un tabel primul rnd este mai special deoarece conine informaii despre tipul datelor coninute n tabel Acest rnd poart denumirea de antet. n HTML acest rnd se poate defini cu ajutorul directivei <TH> Cele dou directive acioneaz asemntor i au aceleai atribute diferena ntre ele fiind faptul c n cazul directivei <TH> textul este afiat bold i centrat (dac nu este specificat altfel) iar n cazul <TD> textul este afiat aliniat la stnga (dac nu este specificat altfel);

Proiectul pentru nvmntul Rural

79

Realizarea tabelelor

<TD > sau <TH>


Funcionalitate: Definete o celul a unui tabel Atribute: ALIGN VALIGN COLSPAN ROWSPAN WIDTH HEIGHT BGCOLOR BACKGROUND Directiva de sfrit: </TD> respectiv </TH> sunt opionale Atributul COLSPAN este folosit pentru a unui celulele nvecinate ale unui rnd. Valoarea acestui atribut indic numrul de celule de pe rndul curent care vor fi unite astfel nct s formeze o singur celul. Spre exemplu dac vrei ca pe primul rnd ntr-un tabel cu 4 coloane s fie titlul tabelului care s ocupe toat lungimea tabelului i nu numai o celul se poate folosi atribut COLSPAN att pentru <TH> ct si pentru <TD> astfel: <TABEL> <TR> <TH COLSPAN="4"> Titlul principal </TH> </TR> <TR> <TD COLSPAN=4> Subtitlul tabelului </TD> </TR> <TR> <TD>Col1</TD> <TD>Col2</TD> <TD>Col3</TD> <TD>Col4</TD> </TR> </TABEL> Rezultatul n browser va fi de forma:

Atributul COLSPAN

Figura 7.3 Exemplu utilizare COLSPAN 80


Proiectul pentru nvmntul Rural

Realizarea tabelelor

Atributul ROWSPAN

Atributul ROWSPAN este folosit pentru a unii mai multe celule nvecinate de pe aceeai coloan. Se folosete similar cu atributul COLSPAN. Prin urmare dac dorim s extindem o celul pe mai multe rnduri vom scrie: ... <TR> <TD ROWSPAN=2> Celula12+21</TD> <TD>Celula12<TD> </TR> <TR> <TD>Celula22<> </TR> ... Si va avea ca rezultat n browser:

Figura 7.4 Exemplu utilizare ROWSPAN O celul se poate extinde pe mai multe celule nvecinate de pe acelai rnd i n acelai timp pe mai multe celule nvecinate de pe mai multe rnduri. Acest efect se obine combinnd cele dou atribute n cadrul aceleiai directive <TD> sau <TH>.

Proiectul pentru nvmntul Rural

81

Realizarea tabelelor

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 7.1. Codul HTML pentru tabelul cu un nou rnd adugat va arta ca cel de mai jos <TABLE> <TR> <TD>Iepure</TD> <TD>25 Kg</TD> <TD><IMG SRC=iepuras.gif></TD> </TR> <TR> <TD>Pisica</TD> <TD>10 Kg</TD> <TD><IMG SRC=pisica.gif></TD> </TR> </TABLE> Pentru nelmuriri revedei seciunea 7.1. ntrebarea 7.2. Pentru a afia tabelul cerut se pot folosi atributele directivei TABLE ca n exemplul de mai jos: <TABLE ALIGN=CENTER WIDTH=80%> A se revedea seciunea 7.2. Indicaii la problemele propuse Problemele propuse n lucrrile de verificare se fac dup modelele de exemple prezentate n unitatea de nvare sau dup tipicul acestora.

Bibliografie
1. Dave Taylor - Crearea paginilor WEB, Editura Teora 1999, pg.171-198 2. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i XML, Editura Printech Bucureti 2004, pg.32-36 3. T.Gugoiu HTML prin exemple, Editura Teora 2000, pg.39-50

82

Proiectul pentru nvmntul Rural

Formulare in pagina WEB

Unitatea de nvare Nr. 8


FORMULARE N PAGINA WEB Obiectivele Unitii de nvare Nr.8 8.1 Ce sunt formularele? 8.2 Introducerea unui formular n pagina WEB 8.3 Elementele HTML folosite n formulare 8.4 Alte tipuri de elemente folosite n formulare WEB Rspunsuri i comentarii la ntrebrile din testele de evaluare Bibliografie 84 84 86 88 90 93 93

Proiectul pentru nvmntul Rural

83

Formulare in pagina WEB

Obiectivele Unitii de nvare Nr. 8:


Dup parcurgerea acestei Unitii de nvare vei fi capabili: S creeai un formular S cunoatei elementele unui formular S adugai elemente la un formular S specificai o aciune pentru un formular S nelegei ce nseamn CGI

8.1 Ce sunt formularele?


Formularele sunt o metod de colectare a datelor de la utilizator cu scopul prelucrrii lor sau a stocrii ntr-o baz de date pentru o prelucrare viitoare. Formularele n WEB sunt compuse din obiecte ce permit introducerea de text, selectarea unor opiuni, liste de selecie, hari de imagine sau butoane. Vom discuta despre fiecare n parte n cadrul acestei uniti de nvare. S vedem care este fluxul de operaii i de date pentru o pagin WEB care conine un formular (Vezi figura 8.1): Fluxul de operaii/date Utilizatorul va introduce informaii n cadrul formularului Utilizatorul va apsa un buton special n cadrul formularului Formularul va fi trimis la server Serverul va primi informaia i o va prelucra Serverul va trimite napoi la browser o pagin de rspuns ce poate conine un rezultat al prelucrrii datelor trimise. Prelucrarea informaiei i alctuirea rspunsului pe partea de server este o problem relativ complex i nu vom discuta despre ea n cadrul acestui modul. Aceast prelucrare se face folosindu-se un program ce poart denumirea de CGI. CGI reprezint iniialele de la Common Gateway Interface care se poate traduce n limba romn prin interfa comun pentru schimb de date. Un program sau script CGI poate fi un program scris n orice limbaj de programare. Cele mai folosite limbaje sunt: C/C++, Perl, Python, sau anumite limbaje specializate pentru prelucrarea informaiilor WEB cum ar fi PHP, ASP, JSP sau altele. 1. 2. 3. 4. 5.

84

Proiectul pentru nvmntul Rural

Formulare in pagina WEB

1. Completeaza formular

3. Trimite formular

Utilizator

2. Apasa buton TRIMITE

Browser

5. Trimite raspuns

WEB server

4. Prelucrare informaii Figura 8.1 Prelucrare formular la server

CGI n scenariu descris mai sus informaia din formular este trimis la un server spre a fi prelucrat, exist ns i posibilitatea ca aceast informaie s fie prelucrat de ctre browser. Prelucrarea se face n acest caz cu ajutorul unui limbaj de script pe partea de client despre care vei nva n unitatea de nvare numrul 9. Fluxul operaiilor pentru acest caz este prezentat n figura 8.2. 3. Prelucrare informatii

1. Completeaza formular

Utilizator

2. Apasa buton TRIMITE

Browser

Java Script VB Script

Figura 8.2 Formular prelucrat la client Test de autoevaluare 8.1 Ce se ntmpl cu datele introduse de ctre utilizator ntr-un formular?

Rspunsul se va da n spaiul gol de mai sus. Rspunsurile se gsesc la pagina 93.

Proiectul pentru nvmntul Rural

85

Formulare in pagina WEB

8.2 Introducerea unui formular n pagina WEB


Pentru a introduce un formular ntr-o pagin WEB se folosete directiva pereche <FORM></FORM>. Rolul acestei directive este de a delimita formularul i de a defini cu ajutorul atributelor sale modul i de ctre cine vor fi prelucrate informaiile introduse de ctre utilizator.

<FORM>
Funcionalitate: Definete un formular Atribute: ACTION METHOD NAME TARGET Directiva de sfrit: </FORM> - OBLIGATORIE Toate elementele unui formular trebuiesc incluse n cadrul unui element de tip <FORM>. Elementele unui formular vor fi afiate n fereastra browserului chiar dac nu sunt incluse ntr-un formular ns n acest caz informaiile introduse NU pot fi prelucrate. Un formular NU poate fi definit n interiorul altui formular O pagin WEB poate conine mai multe formulare n acelai timp.

n figura de mai jos (Figura 8.3) avem un formular simplu aa cum este afiat de ctre browser. Vom nva n aceast seciune cum se poate realiza un astfel de formular i chiar altele mai complexe:

Figura 8.3 Exemplu simplu formular

86

Proiectul pentru nvmntul Rural

Formulare in pagina WEB

Atributul ACTION Atributul METHOD

Atributul ACTION. Serverul de WEB va alege scriptul CGI care va prelucra informaia din formular n funcie de valoarea acestui atribut. Atributul METHOD se refer la modul n care valorile elementelor din formular vor fi transmise la browser. Exist dou metode: POST Aceast metod are 2 etape de transmitere a informaiilor. Prima etap const n stabilirea unei conexiuni cu URL-ul specificat de ctre atributul ACTION. Odat stabilit conexiunea a doua etap const n transmiterea informaiilor din formular la server GET informaiile din formular sunt adugate la URL-ul specificat de ctre atributul ACTION. Scriptul CGI va prelua aceste informaii din interiorul URL-ului.

Cnd se folosete metoda GET i cnd metoda POST? Iat cteva reguli: Dac este important viteza de transmisie a informaiilor atunci va fi folosit metoda GET n cazul metodei GET preluarea informaiilor de ctre aplicaia server de prelucrare se face mai uor Dac securitatea este o problem atunci este de preferat folosirea metodei POST deoarece n cazul metodei GET informaiile pot fi citite din URL de ctre persoane neautorizate.

n exemplul de mai jos definim un formular care va transmite informaiile la URL-ul http://www.despremine.ro folosind metoda GET <FORM ACTION=http://www.despremine.ro METHOD=GET > ... </FORM> Atributul TARGET Atributul TARGET Cu ajutorul acestui atribut se poate redireciona rezultatul prelucrrii formularului ntr-o alt fereastr de browser. Test de autoevaluare 8.2 Exist mai multe metode de transmitere a datelor dintr-un formular la server? Dac rspunsul este DA care este cea mai nesigur metod?

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 93.

Proiectul pentru nvmntul Rural

87

Formulare in pagina WEB

8.3 Elementele HTML folosite n formulare


Elementele unui formular se introduc folosind directiva HTML <INPUT>. Tipul cmpului din formular i proprietile acestuia sunt specificate cu ajutorul atributelor directivei dup cum vom vedea mai jos.

<INPUT>
Funcionalitate: Definete un cmp ntr-un formular Atribute: TYPE NAME ALIGN MAXLENGTH SIZE CHECKED Directiva de sfrit: </INPUT> este opional Cmpul TEXTBOX TEXTBOX sunt cmpuri de tip text care permit utilizatorului introducerea unui text pe un singur rnd. Este util n colectarea informaiilor de tip nume, adres, dat, telefon, e-mail i multe altele <INPUT TYPE=TEXTBOX> Browserul va afia: Cmpurile TEXTBOX folosesc urmtoarele atribute: NAME: Numele variabilei ce conine textul introdus de utilizator ce va fi trimis ctre scriptul CGI SIZE specific lungimea vizibil a cmpului text. Dimensiunea implicit, n cazul n care acest cmp nu este specificat este 20 VALUE textul implicit ce va fi afiat n acest cmp atunci cnd acesta va fi prima oar afiat de ctre browser. MAXLENGTH specific numrul maxim de caractere pe care le poate accepta cmpul. Cmpul PASSWORD PASSWORD Sunt cmpuri folosite pentru introducerea de parole. Textul introdus de ctre utilizator nu va fi vizibil n interiorul acestui cmp. Pentru acest cmp se pot folosi aceleai atribute cu aceeai semnificaie ca pentru cmpul Textbox

88

Proiectul pentru nvmntul Rural

Formulare in pagina WEB

<INPUT TYPE=PASSWORD> Browserul va afia: Se observ c pentru fiecare caracter introdus de utilizator se afieaz un caracter sau n loc. Aceasta cu scopul de a proteja informaia introdus n acest cmp de alte persoane neautorizate care vd ecranul utilizatorului n timp ce acesta introduce parola. Cmpul CHECKBOX CHECKBOX Este un cmp ce poate avea dou stri Selectat CHECK sau Neselectat. Se folosete atunci cnd este necesar obinerea unei informaii de tip adevrat/fals da/nu de la utilizator <INPUT TYPE=CHECKBOX> Browserul va afia: - neselectat - selectat Cmpurile CHECKBOX folosesc urmtoarele atribute: CHECKED dac acest atribut este prezent atunci la ncrcarea paginii acest cmp va fi selectat implicit NAME numele variabilei cu valoarea corespunztoare acestui cmp ce va fi trimis la scriptul CGI.

Cmpul RADIOBUTTON

RADIOBUTTON Permite utilizatorului s selecteze la un moment dat doar o singur opiune dintr-un grup de opiuni disponibile. Dac un grup de cmpuri radiobutton au acelai nume numai unul dintre ele va putea fi selectat la un moment dat restul fiind automat deselectate.

... <INPUT TYPE="RADIO" NAME="RADIO1" CHECKED> ... <INPUT TYPE="RADIO" NAME="RADIO1"> ... Browserul va afia: Cmpurile CHECKBOX folosesc urmtoarele atribute: CHECKED dac acest atribut este prezent atunci acest cmp va fi selectat implicit la ncrcarea pagii. NAME specific numele variabilei care va fi transmis la CGI. Se folosete aceeai valoare pentru butoanele din acelai grup. 89

Proiectul pentru nvmntul Rural

Formulare in pagina WEB

Butonul TRIMITE

BUTTON SUBMIT Creeaz un buton care odat apsat de ctre utilizator va declana trimiterea informaiei din formular la server pentru a fi prelucrat <INPUT TYPE="SUBMIT" VALUE="Trimite">

Browserul va afia: Butonul SUBMIT folosete urmtoarele atribute: Butonul ANULEAZ VALUE Definete textul care va fi afiat pe buton NAME specific numele variabilei care va fi transmis la CGI.

BUTTON RESET Creeaz un buton care odat apsat de ctre utilizator va terge informaia introdus pn la momentul respectiv n formular de ctre utilizator. Nici un fel de informaie nu va fi trimis la server. Dup apsarea acestui buton formularul va fi afiat ca i cum ar fi proaspt rencrcat. Utilizatorul poate rencepe introducerea de date n formular imediat dup apsarea acestuia. <INPUT TYPE="SUBMIT" VALUE="Anuleaz">

Browserul va afia: Butonul RESET folosete urmtorul atribut: VALUE pentru a defini textul care va fi afiat n browser pe acest buton

8.4 Alte tipuri de elemente folosite n formulare WEB


Liste de selecie Cmpurile de tip RADIOBUTTON i CHECKBOX ofer posibilitatea utilizatorului s aleag o anumit opiune dintr-un set. Au ns un mic dezavantaj: n cazul n care exist multe opiuni posibile spaiul fizic necesar pentru prezentarea tuturor acestor opiuni este foarte mare. Pentru aceste cazuri exist elementele de tip list de selecie care se creeaz n cadrul formularului cu ajutorul directivelor SELECT i OPTION.

90

Proiectul pentru nvmntul Rural

Formulare in pagina WEB

<SELECT>
Funcionalitate: Definete o list de selecie ntr-un formular Atribute: NAME SIZE MULTIPLE Directiva de sfrit: </SELECT> Obligatorie

<OPTION>
Funcionalitate: Definete o opiune ntr-o list de selecie Atribute: SELECTED VALUE Directiva de sfrit: </OPTION> Obligatorie

Exist dou tipuri de liste de selecie: 1. Dropdown List care iniial afieaz un singur element pe un singur rnd iar n momentul n care utilizatorul selecteaz aceast list se va extinde afind toate opiunile disponibile. Dac valoarea atributului SIZE este 1 atunci lista de opiuni va fi afiat n aceast form.

Neextins:

i extins:

Figura 8. 4 Exemplu list selecie de tip Dropdown 2. List Box Elementele listei sunt afiate ntr-o zon rectangular unele sub altele. Dimensiunea vizibil a acestei zone se definete cu ajutorul atributului SIZE. Lista de selecie va fi afiat n aceast form dac valoarea atributului SIZE este diferit de 1

Proiectul pentru nvmntul Rural

91

Formulare in pagina WEB

Figura 8.5 Exemplu list de selecie de tip Listbox Paii pentru realizarea unei liste de selecie: 1. 2. Introducerea directivei pereche <SELECT> </SELECT> Stabilirea cu ajutorul atributului SIZE a tipului de list de selecie i. SIZE =1 Dropdown List ii. SIZE > 1 ListBox Adugarea elementelor la list cu ajutorul directivei <OPTION>. Un element din list este introdus de o directiv <OPTION> ca n exemplul de mai jos:

3.

<SELECT SIZE="1" MULTIPLE> <OPTION>Margareta</OPTION> <OPTION SELECTED>Trandafir</OPTION> <OPTION >Garoafa</OPTION> ... </SELECT> Atributul MULTIPLE Atributul MULTIPLE al directivei <SELECT> seteaz modul de selecie multipl permind selectarea mai multor elemente din list odat. In mod implicit nu se poate selecta dect un singur element din list la un moment dat. Atributul SELECTED al directivei <OPTION> definete care din elementele listei este setat implicit la ncrcarea paginii.

Atributul SELECTED

92

Proiectul pentru nvmntul Rural

Formulare in pagina WEB

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 8.1. La apsarea butonului Trimite (submit) datele vor fi trimise spre a fi prelucrate n funcie de modul n care a fost specificat, fie ctre un server fie ctre un script care ruleaz n browser. Pentru nelmuriri revedei seciunea 8.1. ntrebarea 8.2. Exist dou metode de transmitere a datelor dintr-un formular ctre server: GET i POST. Cea mai nesigur metod este GET deoarece aceasta trimite datele din formular ca parte din URL care poate fi vizualizat de ctre utilizatori neautorizai. Consultai seciunea 8.2. Indicaii la problemele propuse Problemele propuse n lucrrile de verificare se fac dup modelele de exemple prezentate n unitatea de nvare sau dup tipicul acestora.

Bibliografie
1. Dave Taylor - Crearea paginilor WEB, Editura Teora 1999, pg.253-277 2. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i XML, Editura Printech Bucureti 2004, pg.38-46 3. T.Gugoiu HTML prin exemple, Editura Teora 2000, pg.82-95

Proiectul pentru nvmntul Rural

93

Script Javascript

Unitatea de nvare Nr. 9


SCRIPT, JAVASCRIPT Obiectivele Unitii de nvare Nr.9 9.1 Ce este JavaScript? 9.2 Inserarea unui JavaScript ntr-un document HTML 9.3 Cum i cnd se execut un script ntr-o pagin WEB 9.4 Atribute de tip Event Handler Lucrare de verificare a Unitilor de nvare Nr. 7, 8 i 9 Rspunsuri i comentarii la ntrebrile din testele de evaluare Bibliografie 95 95 95 97 99 100 102 102

94

Proiectul pentru nvmntul Rural

Script Javascript

Obiectivele Unitii de nvare Nr. 9:


Dup parcurgerea acestei Unitii de nvare vei tii: Ce este un script pe partea de client Ce este JavaScript Ce este un atribut Event Handler S foloseti un script ntr-o pagin WEB

9.1 Ce este JavaScript?


JavaScript a fost inventat pentru a aduga paginilor WEB capabilitatea de a prelucra informaii introduse de utilizator sau de a executa operaii fr a fi nevoie de intervenia sau ajutorul serverului de WEB. Iat cteva exemple practice de ntrebuinare a JavaScript ntr-o pagin WEB: Animaii Prelucrarea unor informaii introduse de utilizator fr a fi nevoie de trimiterea datelor la server pentru a fi prelucrate de un CGI Realizarea de meniuri dinamice n pagina WEB.

Spre deosebire de limbajul Java care este scris exclusiv pentru programatori, JavaScript este un limbaj simplu scris cu scopul de a fi uor de asimilat i de folosit de ctre persoane care nu au experien anterioar n programare.

9.2 Inserarea unui JavaScript ntr-un document HTML


O aplicaie JavaScript poate fi adugat ntr-un document HTML utiliznd directiva pereche <SCRIPT>. </SCRIPT>. Se pot include oricte directive <SCRIPT> ntr-o pagin WEB n oricare din seciunile documentului <HEAD> sau <BODY>. Singura restricie ar fi c n interiorul acestei directive nu se pot introduce alte directive HTML. Introducerea de directive HTML aici va fi semnalat ca eroare de ctre browser n momentul n care va afia pagina.

Proiectul pentru nvmntul Rural

95

Script Javascript

<HEAD> ... <SCRIPT LANGUAGE=JavaScript> Aici intr scriptul tu </SCRIPT> ... </HEAD> <BODY> ... <SCRIPT LANGUAGE=JavaScript> Aici intr scriptul tu </SCRIPT> ... </BODY> Exemplul 9.1 Inserare script n document HTML Browserele care nu suport JavaScript vor trata scriptul din interiorul acestei directive ca pe un text normal i prin urmare l va afia n pagin. Acest lucru nu este de dorit adesea. Pentru a nu ajunge ntro astfel de situaie se recomand ca scriptul din interiorul acestei directive s fie inclus ntr-un comentariu HTML, ca n exemplul de mai jos: <SCRIPT LANGUAGE=JavaScript> <! Aici intr scriptul tu --> </SCRIPT>

<SCRIPT>
Funcionalitate: Insereaz un script documentul HTML Atribute: LANGUAGE SRC TYPE Directiva de sfrit: </SCRIPT> OBLIGATORIE n

Atributele LANGUAGE i TYPE JavaScript sunt unele dintre cele Atributele mai populare limbaje de script folosite n WEB, ns exist si altele LANGUAGE precum VBScript. Rolul acestor atribute este de a specifica Si TYPE browserului ce tip i ce versiune de script este inclus n interiorul directivei. 96
Proiectul pentru nvmntul Rural

Script Javascript

Este de ajuns folosirea fie a atributului LANGUAGE, fie a atributului TYPE. NU este nevoie a fi folosite ambele n acelai timp. Cele mai utilizate valori pentru atributul LANGUAGE sunt JavaScript i VBScript. Acelai lucru se poate specifica utiliznd valorile text/javascript respectiv text/vbscript pentru atributul TYPE. Atributul SRC Atributul SRC. Pentru cazurile n care un anumit script are dimensiuni foarte mari sau este folosit de ctre mai multe pagini WEB acesta poate fi scris ntr-un fiier separat. Includerea acestor scripturi pentru a putea fi referite n pagina HTML curent se face folosind atributul SRC. Valoarea atributului este URL-ul la care se gsete fiierul ce conine scriptul. Prin urmare pentru a include un script definit n alt fiier vom scrie: <SCRIPT LANGUAGE=JavaScript SRC=scripts/scriptulmeu.js> Test de autoevaluare 9.1 De ce este recomandat plasarea codului unui script n interiorul unui comentariu HTML?

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 102.

9.3 Cum i cnd se execut un script ntr-o pagin WEB


Scripturile se pot executa fie la ncrcarea paginii, dac scriptul este definit n seciunea <BODY> fie la apariia unui eveniment care are asociat un script. Una din cele mai importante faciliti oferite de JavaScript este posibilitatea de a detecta anumite evenimente care au loc n pagin i de a reaciona la acestea. Exemple de astfel de evenimente pot fi: trecerea cu cursorul mouseului peste un anumit obiect (hyperlink, imagine, buton etc. ) , ncrcarea paginii, descrcarea paginii, apsarea unei taste etc.

Proiectul pentru nvmntul Rural

97

Script Javascript

Majoritatea directivelor pot fi configurate s rspund la astfel de evenimente prin executarea unui script JavaScript la producerea acestuia. Hai sa vedem ce scriem pentru ca o imagine s declaneze execuia unui script JavaScript atunci cnd utilizatorul trece cu cursorul mouse-ului pe deasupra imaginii: <HEAD> <SCRIPT LANGUAGE=JavaScript> function mesajIepuras() { alert(Salut! Sunt iepurasul pinki!) } </SCRIPT> </HEAD> <BODY> ... <IMG SRC="iepuras.gif" ALT="Bugs Bunny" onMouseOver="mesajIepuras();"> ... n browser la ncrcarea paginii va fi ncrcat imaginea iar n momentul n care cursorul mouse-ului va trece peste imagine va fi afiat o fereastr cu mesaj ca n figura de mai jos:

Figura 9.1 Exemplu declanare execuie script De ce a aprut mesajul? Deoarece la definirea directivei IMG mai sus am adugat atributul onMouseOver care are ca valoare numele unei funcii JavaScript. Asemntor pentru fiecare tip de eveniment exist un atribut asociat. Dac unul din aceste atribute este definit n cadrul directivei HTML, 98
Proiectul pentru nvmntul Rural

Script Javascript

iar evenimentul asociat are loc la un anumit moment dat atunci se va executa funcia JavaScript definit de valoarea atributului. Atribute Event Handler Acest tip de atribute se numesc Atribute Event Handler. n limba romn aceasta se poate traduce prin atribute pentru procesarea evenimentelor. Pentru majoritatea directivelor HTML se pot defini astfel de atribute asociind astfel un script care s fie executat la apariia evenimentului. Exist doar cteva excepii de directive care nu suport astfel de atribute, acestea sunt: <HEAD>, <BODY>, <BASEFONT>, <FONT>, <BR>, <HTML>, <SCRIPT>, <TITLE>, <APPLET>, <SCRIPT> i <FRAME> Execuia scriptului declanat poate consta n simpla afiare a unui mesaj ca mai sus sau poate fi o prelucrare complex de date introduse de ctre utilizator.

Test de autoevaluare 9.2 Cnd se execut un script JavaScript ntr-o pagin WEB? a> b> c> d> La ncrcarea paginii La apariia unui eveniment la cererea vizitatorului paginii WEB la o anumita ora stabilita de ctre vizitatorul paginii WEB

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 102.

9.4 Atribute de tip Event Handler


Mai jos vom enumera cele mai utilizate atribute Event Handler suportate de ctre directivele HTML, nsoite de o scurt explicaie pentru fiecare n parte. Pentru o list complet a acestor atribute consult una din lucrrile din bibliografia acestei Unitii de nvare. Unele evenimente apar mai rar i nu pot fi asociate dect anumitor directive. Pentru acestea vom enumera directivele care le suport. Directive suportate onClick Evenimentul apare atunci cnd utilizatorul execut un click de mouse pe elementul respectiv. Este suportat de majoritatea directivelor. onDblClick Evenimentul apare atunci cnd utilizatorul execut un dublu click de mouse pe elementul respectiv. Este suportat de majoritatea directivelor. onMouseOver Evenimentul apare atunci cnd utilizatorul trece cu cursorul mouseului pe deasupra elementului. Este suportat de majoritatea directivelor.

Proiectul pentru nvmntul Rural

99

Script Javascript

onSubmit Evenimentul apare atunci cnd exist un formular n pagin n momentul n care utilizatorul apas un buton de tip submit (Trimite). Directivele care suport acest atribut sunt <FORM> i <BODY>. onReset Evenimentul apare atunci cnd exist un formular n pagin n momentul n care utilizatorul apas un buton de tip reset (Anuleaz). Directivele care suport acest atribut sunt <FORM> i <INPUT>. onKeyPress Evenimentul apare atunci cnd utilizatorul apas o tast. Este suportat de majoritatea directivelor.

Test de autoevaluare 9.3 Ce rol au atributele Event Handler?

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 102.

Lucrare de verificare a Unitilor de nvare Nr. 7, 8 i 9


1. S se realizeze un tabel HTML cu urmtoarele caracteristici: 1. tabelul s fie centrat i s ocupe 50% din lungimea ferestrei browserului 2. S aib 4 rnduri 3. S aib 3 colane 4. Datele pe coloana 1 s fie aliniate la stnga 5. Datele pe coloana 2 s fie centrate 6. Datele pe coloana 3 s fie aliniate la dreapta Predai fiierul HTML n format electronic ca rezultat al rezolvrii lucrrii de verificare Pe lng informaiile prezentate n manual se poate utiliza reperul bibliografic numrul 2 i 3 din bibliografia unitii de nvare nr.7. Nr. de puncte 9 : 1 3p, 2 1p, 3 1p, 4 1p, 5 1p, 6 1p 2. Realizai un formular HTML care s poat fi folosit la un sondaj de opinie (alege singur subiectul). Acesta trebuie s conin cmpuri textbox, butoane radio i liste de selecie Predai fiierul HTML n format electronic ca rezultat al

100

Proiectul pentru nvmntul Rural

Script Javascript

rezolvrii lucrrii de verificare Pe lng informaiile prezentate n manual se poate utiliza reperul bibliografic numrul 2 i 3 din bibliografia unitii de nvare nr.8. Nr. de puncte 8 (2p utilizarea directivei FORM, 2p -utilizarea cmpuri de tip textbox, 2p utilizarea cmpuri de tip buton radio; 2p - utilizarea cmpurilor de tip list de selecie ) 3. Realizai o pagin HTML care s conin o directiv HTML <A> care s aib urmtorul comportament: cnd utilizatorul execut dublu-click pe acest hyperlink s se afieze mesajul De doua ori click! ntr-o fereastr separat (o fereastr de tip dialog). Pentru aceasta se va utiliza JavaScript i atribute de tip Event Handler. Predai fiierul HTML n format electronic ca rezultat al rezolvrii lucrrii de verificare Pe lng informaiile prezentate n manual se poate utiliza reperul bibliografic numrul 1 i 2 din bibliografia unitii de nvare. Nr. de puncte 8 (4p pentru definirea corect a atributului EventHandler pentru directiva <A>, 4p definirea i folosirea secvenei JavaScript pentru afiarea mesajului)

Proiectul pentru nvmntul Rural

101

Script Javascript

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 9.1. Este recomandat definirea scripturilor n interiorul comentariilor HTML pentru cazurile n care browserul cu care este vizualizat pagina nu suport JavaScript. n aceste cazuri browserul va afia textul scriptului n loc s l execute. Pentru a preveni afiarea scriptului n pagin acesta trebuie introdus n interiorul unui comentariu HTML. A se revedea seciunea 9.2. ntrebarea 9.2. Un script Java Script se execut la ncrcarea paginii dac acesta este definit n interiorul directivei<BODY> sau la apariia unui anumit eveniment. Variante corecte de rspuns: a) i b). A se revedea seciunea 9.3. ntrebarea 9.3. Atributele Event Handler au rolul de a defini aciunea (scriptul) care se va executa n momentul apariiei unui eveniment. Consultai seciunea 9.4. Indicaii la problemele propuse Problemele propuse n lucrrile de verificare se fac dup modelele de exemple prezentate n unitatea de nvare sau dup tipicul acestora.

Bibliografie
1. Richard Wagner, R.Allen Wyke Java Script, Editura Teora 2000, pg.47-59, 64-76 2. Mihaela Brut, Sabin Buraga - Prezentari multimedia pe Web. Limbajele XHTML + TIME i SMIL Editura Polirom 2003, pg. 13-22, 30-33 3. Clin Ioan Acu Optimizarea paginilor Web, Editura Polirom 2003, pg.182-267

102

Proiectul pentru nvmntul Rural

Executabile si multimedia in pagina WEB

Unitatea de nvare Nr. 10


EXECUTABILE I MULTIMEDIA N PAGINA WEB Obiectivele Unitii de nvare Nr.10 10.1 Java i Java APPLET 10.2 Obiecte ACTIVE X 10.3 Fiiere multimedia n pagina WEB 10.4 Adugarea clipurilor multimedia la o pagin Web Rspunsuri i comentarii la ntrebrile din testele de evaluare Bibliografie 104 104 106 107 108 110 110

Proiectul pentru nvmntul Rural

103

Executabile si multimedia in pagina WEB

Obiectivele Unitii de nvare Nr.10:


Dup parcurgerea acestei Unitii de nvare vei tii: Ce este un Applet Java Cum se folosete un applet Java ntr-o pagin WEB Ce este un obiect Active X Cum se folosete un obiect Active X ntr-o pagin WEB Ce sunt i cum se pot folosi fiierele multimedia ntr-o pagin Web

10.1 Java i Java APPLET


Java Java este un limbaj de programare dezvoltat de compania Sun Microsystems. Este un limbaj care ofer ntreg suportul pentru programarea orientat pe obiecte i a fost creat cu scopul de putea fi utilizat fr nici un fel de diferen pe orice sistem care suport Java (cross-platform). Un alt mare avantaj al limbajului Java este faptul c programele scrise n Java i compilate pentru un sistem de operare vor rula fr a fi recompilate pe orice alt sistem de operare care suport Java. Acest lucru este posibil deoarece programele Java nu ruleaz folosind direct resursele oferite de sistemul de operare ci ruleaz ntr-un alt program numit Java Virtual Machine care se traduce prin Maina Virtual Java. n literatura de specialitate se face referire la ea prin acronimul su JVM. Dup cum i spune i numele acest program creeaz un mediu virtual n care un program Java poate rula. Programele Java pot fi folosite ntr-o pagin Web sub form de APPLET Java. Un applet Java este un program executabil ntr-un JVM. Aceste programe se gsesc n fiiere cu extensia .class, i pot fi incluse direct n pagina Web folosind directiva HTML <APPLET> mpreun cu directiva <PARAM> dup cum vom vedea mai jos. Browserele care suport Java creeaz un astfel de mediu pe care programele Java de tip APPLET pot s l foloseasc pentru a rula. Dar atenie nu toate browserele suport Java! i deci la realizarea unei pagini de Web trebuie inut cont de acest lucru.

Avantaj

APPLET Java

104

Proiectul pentru nvmntul Rural

Executabile si multimedia in pagina WEB

<APPLET>
Funcionalitate: Introduce un Java n pagin Atribute: CODE CODEBASE ALIGN WIDTH HEIGHT

<PARAM>
Funcionalitate: Applet Permite setarea unui parametru de intrare pentru un applet Atribute: NAME VALUE Directiva de sfrit: </PARAM> OPTIONAL

Directiva de sfrit: </APPLET> OBLIGATORIE Pai folosii

Paii pentru a introduce un applet Java ntr-o pagin Web sunt urmtorii: Pasul 1: Fiierul .class ce conine appletul Java va trebui copiat n directorul care se afl fiierul HTML, sau n directorul specificat de ctre atributul CODEBASE. Pasul 2: Appletul Java aflat n fiierul .class va fi introdus n pagina Web folosind directiva HTML <APPLET>. Exemplul de mai jos ilustreaz modul n care se poate introduce ntr-o pagin HTML un simplu applet Java fr parametrii de intrare: <APPLET CODE=appletulmeu.class WIDTH=300 HEIGHT=200> </APPLET> Dac appletul are nevoie de anumii parametrii de intrare pentru a rula acetia pot fi specificai cu ajutorul unui set de directive <PARAM> n interiorul elementului <APPLET> ca n exemplul de mai jos unde apletul primete ca parametrii de intrare un nume i o parol: <APPLET CODE=appletulmeu.class WIDTH=300 HEIGHT=200> <PARAM NAME=nume VALUE=ana> <PARAM NAME=parola VALUE=bu12cc> </APPLET> Hai s vedem ce semnificaie are i unde poate fi folosit fiecare atribut n parte:

Proiectul pentru nvmntul Rural

105

Executabile si multimedia in pagina WEB

Atributul CODE Atributul CODEBASE Atributele WIDTH si HEIGHT

Atributul CODE specific numele fiierului .class sau .jar care conine codul executabil al applet-ului Java folosit. Acest parametru este obligatoriu. Atributul CODEBASE specific locaia unde poate fi gsit fiierul specificat de atributul CODE. Dac acest atribut lipsete fiierul .class va fi cutat n directorul unde se afl documentul HTML. Atributele WIDTH i HEIGHT specific dimensiunea pe orizontal respectiv pe vertical a spaiului rezervat de browser pentru afiarea appletului. Este recomandat specificarea acestor atribute pentru ca appletul s afieze datele corect. Pentru directiva <PARAM> atributul NAME este folosit pentru a specifica numele, iar atributul VALUE pentru a specifica valoarea parametrului de intrare care va fi transmis appletului. Appleturile Java extind posibilitile oferite de HTML i/sau browser permind realizarea unor pagini puternic interactive, cu interfa grafic ce nu ar putea fi n mod normal creeat cu facilitile puse la dispoziie de ctre limbajul HTML. Test de autoevaluare 10.1 Un applet Java ruleaz pe calculatorul client sau ruleaz pe server i prezint doar rezultatul n fereastra browserului?

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 110.

10.2 Obiecte ACTIVE X


Active X este o tehnologie dezvoltat de ctre compania Microsoft care permite adugarea unor componente executabile n pagina WEB. Obiectele sau controalele Active X sunt asemntoare cu un applet Java. Spre deosebire de acestea, ns, pot avea un control mult mai puin restricionat asupra mainii pe care ruleaz, ceea ce poate fi perceput ca o problem de securitate de ctre anumii utilizatori. Avantaj Marele avantaj al obiectelor Active X fa de appleturile Java este c sunt transferate de la server o singur dat. Dup ce au fost transferate ele devin parte integrant din sistemul de operare. Execuiile ulterioare ale obiectului se vor face astfel rapid. Datorit acestui avantaj i al altor caracteristici, Active X este folosit n special

106

Proiectul pentru nvmntul Rural

Executabile si multimedia in pagina WEB

pentru aplicaiile grafice livrate ctre utilizator prin intermediul browserului. Dezavantaj Marele dezavantaj al obiectelor Active X este c acestea nu pot rula dect pe un calculator care ruleaz sistemul de operare Windows. Controalele Active X pot fi dezvoltate folosind diferite limbaje de programare, cum ar fi Microsoft Visual Basic, Microsoft Visual C++, i chiar Java. Un control Active X poate fi adugat ntr-o pagin Web folosind directiva HTML <OBJECT> n mod similar cu directiva APPLET pentru appleturi Java. Ca i n cazul elementului APPLET parametrii de intrare pot fi specificai utiliznd directiva <PARAM>.

10.3 Fiiere multimedia n pagina WEB


Fiierele multimedia sunt fiiere care conin sunete, secvene muzicale, sau chiar clipuri video. Acestea sunt din ce n ce mai folosite n paginile Web. n momentul n care browserul detecteaz un fiier multimedia fie va lansa un program extern fie va folosi o facilitate intern (plug-in) pentru a v rula clipul multimedia aflat n fiierul respectiv. Ce program extern va folosi pentru a rula clipul multimedia depinde de mai muli factori, precum tipul sistemului de operare sau tipul i versiunea browserului. De aceea n calitate de creator al unei pagini web nu poi controla direct programul n care va rula clipul multimedia pe care l oferi n pagin. Metode Exist dou metode de a livra coninutul fiierelor multimedia ctre browserul unui utilizator: Metoda static sau non-streaming caz n care fiierul multimedia trebuie s fie complet descrcat pe calculatorul utilizatorului nainte ca acesta s fie rulat. Metoda dinamic sau streaming caz n care clipul coninut de un fiier este rulat aproape imediat ce a fost referit transferul restului de fiier fcndu-se pe msur ce clipul este rulat.

Avantaj Dezavantaj

Avantajul primei metode este c nu necesit existena nici unui program pe partea de server care s fac posibil rularea clipului. Principalul dezavantaj al acestei metode este c n cazul n care dimensiunea fiierelor este mare, durata de transfer crete foarte mult i deci si timpul pn cnd clipul poate fi rulat. De asemenea datorit faptului c fiierul ajunge direct pe calculatorul utilizatorului face mai dificil pentru creatorii acelor clipuri s i protejeze drepturile de autor asupra unor lucrri.

Proiectul pentru nvmntul Rural

107

Executabile si multimedia in pagina WEB

Streaming

Pentru a nltura aceste dezavantaje majore a fost dezvoltat metoda dinamic de transfer a fiierelor multimedia referit n literatura de specialitate cu termenul de streaming. Aceast tehnologie presupune existena urmtoarelor componente software: Streaming server este o component care gestioneaz cererile de streaming pentru diferite formate multimedia de la mai muli utilizatori simultan, folosind n mod eficient resursele calculatorului server. Encoder Este o component software care convertete un fiier dintr-un anumit format multimedia ntr-un format potrivit pentru streaming. Player - este o aplicaie software care ruleaz pe maina utilizatorului i care are rolul de a realiza la cerere conexiunea cu serverul de streaming i de a rula clipul servit de acesta. Avantajele acestei metode sunt clare dup cum am descris mai sus deoarece utilizatorul nu trebuie s atepte transferul complet al clipului multimedia nainte de a putea s-l vizioneze. Dezavantajele ns se leag de faptul c aceast metod necesit existena unui server de streaming care este de obicei scump i destul de dificil de configurat i meninut.

Avantaje si dezavantaje

10.4 Adugarea clipurilor multimedia la o pagin Web


Pentru a include un clip multimedia ntr-o pagin Web se poate folosi fie directiva <A> fie directiva <EMBED>. Fiierele multimedia audio pot fi de asemenea rulate ca fundal sonor la o pagin Web cu ajutorul unor comenzi JavaScript. Prin urmare poi folosi o directiv simpl de tip ancor ca n exemplul de mai jos: <A HREF=audio/clipulmeu.avi> No.1 clip (1.3Mo) </A> Atunci cnd utilizatorul selecteaz hiperlinkul de mai sus browserul va transfera pe hardiskul local clipul respectiv i l va rula cu ajutorul unei aplicaii externe sau folosind facilitile oferite de ctre browser n acest sens. Directiva EMBED Folosirea directivei <EMBED> ofer mai multe opiuni pentru rularea clipurilor multimedia dect n cazul folosirii unui simplu hiperlink. Browserul va afia n pagin n locul acestei directive o interfa grafic ce va permite utilizatorului s controleze derularea clipului s-l opreasc sau s-l reporneasc, s deruleze nainte i napoi etc. Cu ajutorul atributelor directivei <EMBED> se poate configura ca clipul s fie rulat automat, ori s poat fi rulat n bucl sau doar o singur dat. Iat un exemplu de folosire a acestei directive: 108
Proiectul pentru nvmntul Rural

Executabile si multimedia in pagina WEB

<EMBED SRC=http://www.siteulmeu.ro/clip1.wav> Singurul atribut obligatoriu pentru aceast directiv este SRC Valoarea lui reprezint URL-ul unde se afl clipul multimedia care se dorete a fi rulat n pagin. Atributele WIDTH i HEIGHT permit definirea dimensiunilor interfeei grafice de control afiate n browser. Atributul AUTOSTART poate lua una din valorile TRUE sau FALSE Atributul AUTOSTART i specific browserului s ruleze la ncrcarea paginii clipul specificat de atributul SRC. Atributul LOOP Atributul HIDDEN Atributul LOOP poate lua una din valorile TRUE sau FALSE i specific browserului s ruleze sau nu n bucl clipul specificat de atributul SRC. Atributul HIDDEN poate lua una din valorile TRUE sau FALSE i specific browserului s afieze sau s nu afieze interfaa grafic de control n pagina Web. Test de autoevaluare 10.2 Realizai o pagin web care s includ clipul de la URL-ul http://www.multamuzica.ro/melo1.wav care s fie rulat automat la ncrcarea paginii i care s fie cntat n bucl

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 110.

Proiectul pentru nvmntul Rural

109

Executabile si multimedia in pagina WEB

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 10.1. Un applet Java ruleaz ntotdeauna direct pe maina client dup ce a fost transferat de la server. Acesta fiind unul din avantajele acestei tehnologii pentru c n acest fel serverul este eliberat de anumite sarcini. n acelai timp, ns poate fi i un dezavantaj pentru cazurile n care maina client nu este destul de puternic. Consultai seciunea 10.1. ntrebarea 10.2. Codul HTML corespunztor pentru a include acest clip este: <EMBED SRC=http://www.multamuzica.ro/melo1.wav LOOP=TRUE AUTOSTART=TRUE > Revedei indicaiile din seciunea 10.4. Indicaii la problemele propuse Problemele propuse n lucrrile de verificare se fac dup modelele de exemple prezentate n unitatea de nvare sau dup tipicul acestora.

Bibliografie
1. Cioata Mihai ActiveX. Concepte i aplicaii Editura Polirom, pg.95-102, 174-175 2. Clin Ioan Acu Optimizarea paginilor Web, Editura Polirom 2003, pg.95-99, 144-156 3. Mihaela Brut, Sabin Buraga - Prezentari multimedia pe Web. Limbajele XHTML + TIME i SMIL Editura Polirom 2003, pg. 13-22 i 233-247

110

Proiectul pentru nvmntul Rural

XML i folosirea lui n pagina WEB

Unitatea de nvare Nr. 11


XML I FOLOSIREA LUI IN PAGINA WEB.

Obiectivele Unitii de nvare Nr.11 11.1 Introducere n XML 11.2 Caracteristici ale XML 11.3 Sintaxa XML 11.4 Modul de folosire a XML n pagina Web Rspunsuri i comentarii la ntrebrile din testele de evaluare Bibliografie

112 112 113 114 116 119 119

Proiectul pentru nvmntul Rural

111

XML i folosirea lui n pagina WEB

Obiectivele Unitii de nvare Nr.11:


Principalele obiective ale Unitii de nvare Nr. 11 sunt: Ce este limbajul XML i la ce poate fi folosit Ce este i care este structura unui document XML Cum poate fi folosit un document XML ntr-o pagin HTML

11.1 Introducere n XML


Limbajul XML (eXtended Markup Language) este un nou limbaj de adnotare, care este folosit intens de tehnologiile software actuale pentru schimburi de informaii ntre diverse aplicaii din Internet sau reele. n cazul n care aceste aplicaii funcioneaz conform unor standarde diferite, XML este limbajul comun n care acestea pot schimba informaii. Aceast facilitate este foarte important n cazul comunicrii datelor ntre companii i firme. Dac este folosit XML nici una din companii nu trebuie s cunoasc modul de structurare a datelor n baza de date a partenerului ci doar s tie structura XML de export a acestor date pentru a avea acces la informaiile necesare. XML nu este un nlocuitor al HTML, ci este mai degrab un complement al acestuia. n vreme ce n cazul HTML atenia este orientat spre modul n care trebuie s fie afiat informaia coninut de directivele HTML, XML este realizat cu unicul scop de a oferi suport pentru structurarea informaiilor. La realizarea acestui limbaj s-au stabilit urmtoarele obiective: XML va fi compatibil cu SGML (un alt limbaj de adnotare). Documentele XML vor putea fi uor citite i interpretate de ctre om. Documentele XML vor putea fi proiectate i realizate uor. Programele pentru a interpreta documentul XML trebuie s poat fi realizate uor. S fie destul de flexibil pentru a putea fi utilizat ntr-o gam larg de aplicaii.

Limbajul XML nu poate executa nici o operaie

Limbajul XML nu este conceput s ofere instruciuni pentru execuia unor operaii, ci este conceput pentru a mpacheta informaia cu scopul de a fi trimis sau stocat. Pentru a face ceva cu aceste date cineva trebuie s scrie un program ntr-un limbaj de programare oarecare care s interpreteze aceste date i s le foloseasc ntr-un anume scop.
Proiectul pentru nvmntul Rural

112

XML i folosirea lui n pagina WEB

Iat un exemplu de fiier XML: <?xml version="1.0" encoding="iso-8859-1" ?> <articol> <titlu> Impozitarea tranzactiilor imobiliare </titlu> <descriere> Terenurile sunt din ce in ce mai scumpe in Capitala dupa ce ... </descriere> <URL> http://stiri.ro/articol123.html </URL> </articol> <articol> ... </articol> n exemplul de mai sus se constat c este vorba despre un document XML care ar putea fi folosit de o aplicaie ce afieaz revista presei. Documentul XML din exemplul de mai sus conine informaii despre articolele disponibile n ziarele de azi Nume articol - <titlu> O scurt descriere - <descriere> Locaia unde poate fi gsit acest articol - <URL>

Se vede c n acest document sunt prezente numai informaii cu privire la structura sau tipul datelor i bineneles datele propriu-zise. Acestea vor putea fi folosite de ctre o aplicaie care s afieze revista presei folosind datele din acest document XML care ar putea fi transmise periodic de la un server.

11.2 Caracteristici ale XML


Principalele caracteristici ale XML sunt: o XML nu are directive predefinite, acestea vor fi realizate n momentul proiectrii documentului XML n funcie de scopul acestuia i tipul sau structura datelor. o Pentru descrierea directivelor folosite, XML utilizeaz un set de reguli denumit DTD (Document Type Definition) sau o schem XML. mpreun cu aceast schem se spune despre XML c este autodescriptiv. o Documentul XML trebuie s respecte strict regulile definite n DTD pentru a fi un document valid.

Proiectul pentru nvmntul Rural

113

XML i folosirea lui n pagina WEB

o Documentele XML au o structur strict (Well-formed). Asta nseamn c documentul trebuie s respecte anumite reguli de sintax prezentate n Unitatea de nvare urmtoare. o XML este un limbaj de adnotare complementar cu HTML i NU nlocuiete HTML. Cele dou limbaje, dup cum s-a artat, au scopuri distincte: HTML afieaz informaii ce apar n pagin Web, n timp ce XML descrie aceste informaii.

11.3 Sintaxa XML


Un document XML este format din dou blocuri principale astfel: Antetul documentului care cuprinde la rndul su: o Declaraia XML Se afl ntotdeauna pe prima linia a documentului i conine informaii despre versiunea XML i standardul de codificare al caracterelor. o Declaraia DTD care conine informaii despre structura documentului. Documentul este verificat dac este valid sau nu conform cu aceast declaraie Documentul XML propriu-zis Un document XML are o structur arborescent avnd un singur element rdcin marcat de o pereche de directive XML. Toate celelalte elemente sunt descendeni i coninute n interiorul elementului rdcin Un element poate conine la rndul su alte subelemente.

Un exemplu complet: <? xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE mesaj [ <!ELEMENT email (destinatie,sursa,mesaj)> <!ELEMENT destinatie (#PCDATA)> <!ELEMENT sursa (#PCDATA)> <!ELEMENT mesaj (titlu,continut)> <!ELEMENT titlu (#PCDATA)> <!ELEMENT continut (#PCDATA)> ]> <email> <destinatie>Daniel</destinatie> <sursa>Ana</sursa> <mesaj> <titlu>Intalnire diseara! </titlu> <continut> Ne intalnim diseara! </continut> </mesaj> </email> n exemplul de mai sus: o Prima linie reprezint Declaraia XML, 114
Proiectul pentru nvmntul Rural

Declaraia XML

Declaraia DTD

Elementul rdcin

XML i folosirea lui n pagina WEB

o Este urmat de Declaraia DTD care conine reguli despre structura documentului ntr-un anumit format o Documentul XML propriu-zis are ca element rdcin elementul reprezentat cu ajutorul directivei <email></email>. Elementele care urmeaz marcate de directivele <destinatie>, <sursa> i <mesaj> sunt descendeni de rangul 1. Elementul <mesaj> are la rndul su descendeni elementele marcate de directivele <titlu> i <coninut>. Nivelul de imbricare poate continua att ct este nevoie i nu sunt stabilite limite. Directive XML Directivele XML sunt identificatori pentru elementele XML i sunt plasate ca i n cazul directivelor HTML ntre paranteze ascuite < i > Iat care sunt regulile pentru folosirea directivelor XML: Orice directiv, ex. <directiv>, trebuie s aib o directiv pereche de ncheiere ex </directiv>. Omiterea directivei de ncheiere nu este permis ca n cazul unor directive HTML Directivele XML sunt sensibile la scrierea cu majuscule sau litere mici prin urmare directiva <Titlu> este diferit de directiva <titlu>. n cazul n care se folosesc mai multe niveluri de imbricare ordinea nchiderii directivelor trebuie s fie invers dect ordinea n care au fost deschise. Pentru elementele care nu conin text se poate folosi o alt modalitate de definire a directivelor. Iat cum: <directiva /> Se observ c s-a folosit un caracter / dup numele elementului. n acest caz NU se mai specific directiva pereche de ncheiere Atribute XML Directivele XML pot avea atribute pentru a putea specifica informaii suplimentare despre acel element. Atributele sunt definite sub form de perechi nume-valoare. Valorile atributelor se scriu obligatoriu ntre ghilimele ca n exemplul de mai jos: ... <mesaj data=01/08/2005> ... </mesaj> ... n XML se pot folosi comentarii care au o sintax similar cu cea din HTML, adic: <!-- Orice text explicativ --!> Acestea pot aprea oriunde n documentul XML.

Proiectul pentru nvmntul Rural

115

XML i folosirea lui n pagina WEB

Test de autoevaluare 11.1 XML poate fi considerat ca fiind o alta versiune de HTML?

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 119.

11.4 Modul de folosire a XML n pagina Web


Aa cum am spus mai sus XML a fost realizat ca un limbaj folosit pentru a structura datele pentru a fi trimise spre prelucrare n cadrul altor aplicaii. HTML are ca principal scop definirea modului n care sunt afiate date. Cele dou concepte pot fi folosite mpreun pentru a putea separa datele care trebuiesc afiate de instruciunile de afiare ntr-o pagin Web, implementnd astfel conceptul de insul de date i permind afiarea, selectiv sau total a datelor coninute ntr-un document XML ntr-o pagin HTML Acest lucru este posibil utiliznd n cadrul paginii HTML directiva HTML <XML> pentru a o lega pe aceasta de datele din fiierul XML ca n exemplul de mai jos: Presupunnd ca avem urmtorul fiier XML care conine date despre studenii admii la un anumit examen i nota obinuta, ne propunem s realizm o pagin HTML care s utilizeze datele din fiierul XML pentru a afia un tabel cu studenii admii ntr-o pagin Web.

116

Proiectul pentru nvmntul Rural

XML i folosirea lui n pagina WEB

Fiierul listaadmitere.xml:

Fiierul publicListaAdmitere.html <HTML> <HEAD> <TITLE> Exemplu Insula Date </TITLE> </HEAD> <BODY> <XML ID="admitere" SRC="listaadmitere.xml" async="false"></XML> <TABLE BORDER="1" DATASRC="#admitere"> <THEAD> <TH> Nume Student </TH> <TH> Nota </TH> </THEAD> <TR> <TD> <SPAN DATAFLD="nume"> </SPAN> </TD> <TD> <SPAN DATAFLD="nota"> </SPAN> </TD> </TR> </TABLE> </BODY> <HTML>

Deschiderea paginii publicListaAdmitere n browser va avea ca rezultat afiarea datelor din fiierul XML sub forma unui tabel a crui form de afiare a fost definit n pagina HTML precum n figura 11.1:

Proiectul pentru nvmntul Rural

117

XML i folosirea lui n pagina WEB

Figura 11.1 Exemplu insula de date. Test de autoevaluare 11.2 Definii conceptul de insul de date.

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 119.

118

Proiectul pentru nvmntul Rural

XML i folosirea lui n pagina WEB

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 11.1. NU XML este un limbaj de adnotare complementar cu HTML i NU nlocuiete HTML. Cele dou limbaje, dup cum s-a artat, au scopuri distincte: HTML afieaz informaii ce apar n pagin Web, n timp ce XML descrie aceste informaii. Revedei indicaiile din seciunea 11.1. ntrebarea 11.2. Conceptul de insul de date se refer la separarea datelor de afiat de instruciunile de afiare dintr-un document HTML. Datele vor fi citite dintr-un document XML i afiate conform instruciunilor de afiare din documentul HTML. Pentru nelmuriri revedei seciunea 11.4. Indicaii la problemele propuse Problemele propuse n lucrrile de verificare se fac dup modelele de exemple prezentate n unitatea de nvare sau dup tipicul acestora.

Bibliografie
1. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i XML, Editura Printech Bucureti 2004, pg.59-82 2. http://www.w3schools.com/default.asp

Proiectul pentru nvmntul Rural

119

Foi de stil

Unitatea de nvare Nr. 12


FOI DE STIL

Obiectivele Unitii de nvare Nr.12 12.1 Foi de stil n HTML - CSS 12.2 Cum funcioneaz stilurile n HTML 12.3 Adugarea foilor de stil n documentul HTML 12.4 Proprieti CSS Lucrare de verificare a Unitilor de nvare Nr. 10, 11 i 12 Rspunsuri i comentarii la ntrebrile din testele de evaluare Bibliografie

121 121 122 123 126 127 129 129

120

Proiectul pentru nvmntul Rural

Foi de stil

Obiectivele Unitii de nvare Nr. 12:


Dup parcurgerea acestei Unitii de nvare vei tii: Care sunt avantajele folosirii foilor de stil Sintaxa folosit pentru definirea unei foi de stil Metode de folosire a informaiilor de stil ntr-un document HTML

12.1 Foi de stil n HTML - CSS


Foie de stil Stilurile CSS au fost recent adugate la limbajul HTML cu scopul de a aduga mai multe faciliti pentru controlul modului de apariie al paginii. ncepnd cu HTML 4, toate instruciunile de formatare pot fi definite n afara documentului HTML ntr-o structur denumit foaie de stil. n literatura de specialitate foile de stil sunt referite de acronimul CSS care vine de la Cascading Style Sheets. Cuvntul Cascading nseamn n cascad i se refer la modul de aplicare al acestor stiluri asupra elementelor din pagina WEB .atunci cnd sunt folosite simultan mai multe foi de stil. Avantaje Acestea sunt avantajele folosirii foilor de stil: Separarea instruciunilor de formatare de structura documentului HTML Documentele HTML care folosesc foi de stil pot avea dimensiuni mai mici Site-uri mai uor de meninut. Prin folosirea unui set comun de foi de stil pentru toate paginile HTML se poate schimba nfiarea unui site care conine sute de pagini WEB prin editarea unui singur fiier.

Dezavantaje

Dezavantajul este c nc exist browsere care nu au implementat suport pentru foi de stil. Dar chiar si pentru acest dezavantaj exist un remediu. Paginile de web pot fi iniial realizate fr a folosi facilitile de stil. n acest fel se poate verifica modul n care acestea sunt afiate de browserele fr suport pentru CSS. Informaiile de stil urmnd a fi adugate pe urm pstrnd n acelai timp nealterat coninutul documentului HTML.

Proiectul pentru nvmntul Rural

121

Foi de stil

12.2 Cum funcioneaz stilurile n HTML


Sintaxa de baz O foaie de stil const n una sau mai multe reguli care descriu modul n care un element dintr-o pagin HTML va fi afiat. O regul ntr-o foaie de stil are urmtorul format: selector{proprietate:valoare} unde: Selector selector identific elementul HTML pentru care se specific modul de afiare. Practic orice element HTML poate fi un posibil selector CSS. n exemplul de mai jos, P este un selector de stil i va defini pentru elementele de tip <P> din documentul care folosete aceast foaie de stil dimensiunea fontului de 12 puncte P {font-size: 12pt;} Proprietate -valoare proprietate i valoare definesc stilul care va fi aplicat elementului identificat de selector. Proprietatea este separat de valoare prin caracterul : urmat de un spaiu. Aceast pereche, proprietatevaloare, este ncadrat ntre acolade i reprezint declaraia stilului. O declaraie de stil poate conine mai multe perechi proprietatevaloare separate prin caracterul ; ca n exemplul de mai jos: P {font-size: 12pt; font-face: Arial} Declaraie Gruparea stilurilor Pentru a nu folosi n mod repetat aceeai declaraie pentru mai multe tipuri de elemente, CSS ofer posibilitatea gruprii selectorilor. Spre exemplu toate titlurile dintr-un document HTML pot fi configurate s aib anumite proprieti comune: H1, H2, H3, H4, H5, H6 { color: blue; font-face: Arial}

Declaratie

122

Proiectul pentru nvmntul Rural

Foi de stil

Test de autoevaluare 12.1 Care este principalul avantaj al folosirii foilor de stil la realizarea paginilor de WEB?

12.2 Ce este un selector ntr-o foaie de stil?

Rspunsurile corecte i comentarii asupra acestora se gsesc la pagina 129.

12.3 Adugarea foilor de stil n documentul HTML


Regulile i seturile de reguli pot fi incluse n documentul HTML n trei feluri: ca stiluri inline, ca foaie de stil intern sau ca foaie de stil extern. Stiluri INLINE Stilurile inline. sunt adugate fiecrui element HTML n parte prin folosirea atributului STYLE care este disponibil pentru majoritatea directivelor HTML. Valoarea atributului este reprezentat de una sau mai multe declaraii de stil ca n exemplul de mai jos:

<H1 STYLE="color: blue"> Acest titlu este albastru </H1> sau: <P STYLE="font-size: 12pt; font-face: Verdana"> Acesta este un paragraf inline.

cu

stilul

definit

Dei este o construcie perfect valabil pentru HTML, nu este recomandat deoarece nici unul din avantajele foilor de stil nu poate fi folosit n acest caz. Dac se dorete modificarea modului de afiare pentru un set de elemente este necesar intervenia n documentul HTML asupra fiecrui element n parte. Foi interne de stil
Proiectul pentru nvmntul Rural

123

Foi de stil

O metod mult mai compact i mai eficient este folosirea foilor interne de stil. O foaie intern de stil se definete n headerul documentului HTML folosind directiva pereche <STYLE> </STYLE>. n interiorul acestui element se pot defini stilurile elementelor din pagin folosind sintaxa descris mai sus, Spre exemplu: <STYLE TYPE=test/css> <!-P {color: blue}; H1, H2, H3, H4, H5{ color: aqua; font-size: 12pt } --} </STYLE> Se observ c n interiorul elementului STYLE declaraiile de stil sunt ncadrate de comentariu HTML: <!-- i -->. Aceasta este pentru cazul n care pagina este vizualizat ntr-un browser care nu suport foi de stil, pentru a evita afiarea informaiilor din cadrul acestui element n pagin. O foaie intern de stil se poate aplica unui singur document HTML. Aceasta poate modifica aspectul paginii pstrnd n acelai timp nealterat coninutul documentului HTML. Foi externe de stil Cea mai puternic metod de folosire a foilor de stil este de a le defini pe toate n interiorul unui fiier separat la care s se fac referire n toate documentele HTML care vor folosi acest stil. Aceste foi de stil poart denumirea de foi externe de stil, iar pentru referirea lor exist dou modaliti. Legarea (linking) Este cea mai des folosit metod i const n folosirea directivei <LINK>. Aceast directiv se definete n interiorul headerului .

Legarea

<LINK>

124

Proiectul pentru nvmntul Rural

Foi de stil

Funcionalitate: Import o foaie de stil dintr-un fiier Atribute: HREF REL TYPE Directiva de sfrit: </LINK> OBLIGATORIE Iat un exemplu de folosire a acestei directive pentru importarea unei foi de stil definit ntr-un fiier stilulmeu.css extern aflat n acelai director cu documentul HTML: <HEAD> <LINK REL="STYLESHEET" HREF="stilulmeu.css" TYPE="text/css"> </HEAD> Atributul REL Atributul HREF Atributul TYPE Atributul REL Definete relaia dintre documentul HTML i fiierul cu care se face legtura o foaie de stil: STYLESHEET. Atributul HREF Reprezint URL-ul fiierului care conine declaraiile de stil. Atributul TYPE Definete formatul fiierului ce conine informaiile de stil. Se folosete valoarea text/css. Import O metod alternativ pentru folosirea foilor externe de stil este folosirea directivei <STYLE> mpreun cu declaraia @import dup cum este artat n exemplul de mai jos: <STYLE TYPE="text/css"> <!-@import url(http://stiluri.ro/stilulmeu.css); @import url(altstil.css); DT { background: yellow; color: black } --> </STYLE> Declaraia @import trebuie s fie nainte de orice alt declaraie de stil.

Proiectul pentru nvmntul Rural

125

Foi de stil

Test de autoevaluare 12.3 Enumerai metodele de adugare a informaiilor de stil ntr-o pagin HTML.

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 129.

12.4 Proprieti CSS


O foaie de stil este compus dintr-un set de instruciuni de afiare. Fiecare instruciune este la rndul su compus dintr-un selector care identific elementul cruia i se aplic stilul i o declaraie care definete modul n care va fi afiat elementul respectiv. O declaraie este o colecie de proprieti CSS. O proprietate CSS este o construcie de forma nume/valoare. CSS mparte aceste proprieti in cteva categorii principale. Vom enumera aceste categorii i vom trece n revist proprietile din fiecare categorie n parte. Pentru o list complet a proprietilor disponibile recomandm consultarea materialelor din bibliografie. Proprietati ale fontului Proprieti ale fontului - Aceste proprieti definesc aspectul grafic al textului afiat. Majoritatea modific caracteristicile fontului cu care este afiat textul. Iat cteva exemple de astfel de proprieti: font-family definete tipul fontului folosit pentru afiarea textului font-size definete dimensiunea fontului folosit pentru afiarea textului font-style definete modul de afiare a fontului: bold, italic, subliniat Exemplu de utilizare P {font-family: Arial; font-size: 14pt; font-style: italic } Proprietati pentru text Proprieti pentru text - Aceste proprieti definesc modul de aliniere, i spaiere la afiarea unui text. Iat cteva exemple de astfel de proprieti: 126 letter-spacing definete dimensiunea spaiului ntre litere text-align definete modul de aliniere al textului
Proiectul pentru nvmntul Rural

Foi de stil

text-intend definete spaiul folosind pentru intendarea textului

Exemplu de utilizare: P {letter-spacing: 0.1em; text-align: center text-intend: 5em } Proprietati pentru spatierea elementelor Proprieti pentru spaierea elementelor - Aceste proprieti sunt folosite pentru a definii spaiul dintre elemente HTML, marginile acestora i alte aspecte privind poziionarea lor. Iat cteva exemple de astfel de proprieti: Proprietati pentru definirea culorilor padding-top definete dimensiunea spaiului ce va fi pus ntre coninutul elementului i marginea superioar padding-right - definete dimensiunea spaiului ce va fi pus ntre coninutul elementului i marginea dreapt padding-left similar cu padding-right pentru stnga.

Proprieti pentru definirea culorilor: color - Aceast proprietate este folosit pentru a defini culoarea textului din cadrul elementului specificat de ctre selector. Culoarea poate fi specificat fie prin codul RGB, fie prin numele predefinit.

Proprietati pentru definirea fundalului

Proprieti pentru definirea fundalului - Aceste proprieti sunt folosite pentru a definii caracteristicile fundalului pentru elementul specificat de ctre selector. Iat cteva exemple de astfel de proprieti: background-color definete culoarea fundalului backround-image definete imaginea ce va fi afiat ca fundal.

Lucrare de verificare a Unitilor de nvare Nr. 10, 11, 12


1. Realizai o pagin Web care s includ un applet Java al crui cod se afl n fiierul film.class. Appletul are deja scris codul pentru a rula un film de la un anumit URL ns acest URL trebuie transmis ca parametru de intrare. Poziionai appletul n centrul paginii. Predai fiierul HTML n format electronic ca rezultat al rezolvrii lucrrii de verificare Ca ajutor suplimentar n rezolvarea lucrrii se recomand

Proiectul pentru nvmntul Rural

127

Foi de stil

utilizarea reperului bibliografic numrul 1 din bibliografia unitii de nvare nr.10. Nr. puncte: 9 (4p. utilizarea corect a directivei APPLET, 3p utilizarea atributului PARAM, 2p - poziionarea apletului pe centrul paginii ) 2. Realizai un document XML care s descrie i s conin informaii despre produsele unui magazin, precum: Nume produs, descriere, pre, cantitate etc. Realizai pe urm un document HTML care s afieze aceste date din fiierul XML sub form de tabel. Predai documentele n format electronic (un fiier HTML i un fiier XML) ca rezultat al rezolvrii lucrrii de verificare. Ca ajutor suplimentar n rezolvarea lucrrii se recomand utilizarea reperului bibliografic numrul 1 din bibliografia unitii de nvare nr.11. Nr. puncte: 8 (4p realizarea corect a fiierului XML, 4p realizarea fiierului HTML care s afieze informaiile din cadrul documentului XML) 3. Definii un fiier stilulmeu.css pe care s l folosii pentru a construi o pagin HTML care s formateze elementele folosind foaia de stil din fiierul stilulmeu.css. Stilurile definite n acest fiier trebuie s afecteze urmtoarele elemente din pagina HTML: H1, H2 , H3 s fie scris cu font Veranda cu culoarea galbena Textul din documentul HTML s fie scris cu font de dimensiunea 10pt, culoarea textului s fie alb, iar culoarea de fundal s fie neagr. Predai fiierul stilulmeu.css precum i documentul HTML n format electronic ca rezultat al rezolvrii lucrrii de verificare Ca ajutor suplimentar n rezolvarea lucrrii se recomand utilizarea reperului bibliografic numrul 1 din bibliografia unitii de nvare. Nr. puncte: 8 (5p definirea corect n cadrul foii de stil a atributelor cerute, 3p folosirea foii de stil in cadrul documentului HTML)

128

Proiectul pentru nvmntul Rural

Foi de stil

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 12.1. Principalul avantaj este separarea informaiilor de formatare de structura documentului HTML i posibilitatea modificrii modului de afiare a paginii fr a intervenii n documentul HTML. Pentru nelmuriri revedei seciunea 12.1. ntrebarea 12.2. Un selector, este acea parte dintr-o regula CSS care identific elementul HTML pentru care se specific modul de afiare. A se revedea seciunea 12.2. ntrebarea 12.3. Informaiile de stil pot fi adugate ntr-un document HTML folosind una din cele 3 metode: adugarea informaiilor inline, folosirea foilor interne de stil, folosirea foilor de stil definite ntr-un fiier extern. Consultai seciunea 12.3. Indicaii la problemele propuse Problemele propuse n lucrrile de verificare se fac dup modelele de exemple prezentate n unitatea de nvare sau dup tipicul acestora.

Bibliografie
1. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i XML, Editura Printech Bucureti 2004, pg.51-53 2. Sabin Buraga Proiectarea siturilor Web. Design i funcionalitate, Ediia a II-a, Editura Polirom 2002, pg. 163-195 3. Clin Ioan Acu Optimizarea paginilor Web, Editura Polirom 2003, pg. 35-73 4. Richard Wagner, R.Allen Wyke Java Script, Editura Teora 2000, pg.481-495

Proiectul pentru nvmntul Rural

129

Bibliografie

BIBLIOGRAFIE

1. Clin Ioan Acu Optimizarea paginilor Web, Editura Polirom 2003 2. Cioata Mihai ActiveX. Concepte si aplicaii Editura: Polirom 2003 3. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i XML, Editura Printech Bucureti 2004 4. Mihaela Brut, Sabin Buraga - Prezentari multimedia pe Web. Limbajele XHTML + TIME i SMIL Editura Polirom 2003 5. McFedries Paul, Trad Voin, Doru Sorin Crearea paginilor WEB, Editura ALL 2003 6. Negrino Tom, Smith Dori - JavaScript pentru World Wide Web. Ghid de nvare rapid prin imagini, Editura Corint 2004 7. Richard Wagner, R.Allen Wyke Java Script, Editura Teora 2000 8. Sabin Buraga Proiectarea siturilor Web. Design i funcionalitate, Ediia a II-a, Editura Polirom 2002 9. T.Gugoiu HTML prin exemple, Editura Teora 2000 10. http://www.w3schools.com/default.asp

130

Proiectul pentru nvmntul Rural

Anexa 1

ANEXA 1 Lucrri de laborator

Sesiunea de lucru de laborator L1


Setul de lucrri are ca structur aprofundarea i consolidarea cunotinelor dobndite n cadrul Unitilor de nvare Nr.1 i 2. Sesiunii de laborator i sunt alocate 4 ore. Se recomand a se efectua sub supravegherea cadrului didactic. Pentru efectuarea laboratorului este necesar utilizarea unui editor de texte, spre exemplu: Windows Notepad, i a unui program de navigare internet: Internet Explorer Obiectivele acestei sesiuni de lucru sunt: nsuirea unor noiuni de baz din domeniul reelelor de calculatoare nsuirea pailor necesari ntr-un ciclu de realizare-vizualizare rezultat, pentru o pagin Web nsuirea regulilor de sintax pentru directivele HTML nsuirea modului de definire a culorilor pentru elementele HTML n cadrul lucrrii de laborator numrul 2 se recomand efectuarea urmtoarelor tipuri de activiti: Discuie pe tema noiunilor introduse n Unitatea de nvare numrul 1 cu scopul de a clarifica nelmuriri n ceea ce privete arhitectura World Wide Web sau Internet Efectuarea unui exerciiu la calculator, asistat de tutore pas cu pas care s urmreasc clarificarea pailor necesari ntr-un ciclu de realizare-vizualizare rezultat, pentru o pagin WEB Discuie despre structura de baz a unui document HTML (schelet) i despre reguli ce privesc sintaxa directivelor HTML Efectuarea unui exerciiu la calculator care s urmreasc definirea i utilizarea corect a culorilor ntr-un document HTML

Sesiunea de lucru de laborator L2


Setul de lucrri are ca structur aprofundarea i consolidarea cunotinelor dobndite n cadrul Unitilor de nvare Nr.3 i 4. Sesiunii de laborator i sunt alocate 4 ore. Se recomand a se efectua sub supravegherea cadrului didactic.

Proiectul pentru nvmntul Rural

131

Anexa 1

Pentru efectuarea laboratorului este necesar utilizarea unui editor de texte, spre exemplu: Windows Notepad, i a unui program de navigare internet: Internet Explorer Obiectivele acestei sesiuni de lucru sunt: Definirea i folosirea titluri i paragrafe n HTML Definirea i folosirea directivelor HTML pentru formatare logic Definirea i folosirea directivelor HTML pentru formatare fizic Definirea i folosirea listelor n limbajul HTML n cadrul lucrrii de laborator numrul 2 se recomand efectuarea urmtoarelor tipuri de activiti: Discuie pe tema formatrii textelor HTML n care se vor clarifica noiunile nsuite n Unitatea de nvare numrul 3 legate de formatare textelor cu ajutorul HTML Efectuarea unui exerciiu la calculator care s urmreasc nsuirea noiunilor i tehnicilor de formatare a textelor HTML. Discuie pe tema celor 3 tipuri de liste HTML n care se vor clarifica noiunile nsuite n Unitatea de nvare numrul 4 legate de utilizarea listelor HTML Efectuarea unui exerciiu la calculator care s urmreasc nsuirea modului de definire a listelor in limbajul HTML.

Sesiunea de lucru de laborator L3


Setul de lucrri are ca structur aprofundarea i consolidarea cunotinelor dobndite n cadrul Unitilor de nvare Nr. 5, i 6. Sesiunii de laborator i sunt alocate 4 ore. Se recomand a se efectua sub supravegherea cadrului didactic. Pentru efectuarea laboratorului este necesar utilizarea unui editor de texte, spre exemplu: Windows Notepad, i a unui program de navigare internet: Internet Explorer Obiectivele acestei sesiuni de lucru sunt: nelegerea conceptelor de Hypertext, Hyperlink i URL Definirea i folosirea legturilor n cadrul paginilor Web nelegerea formatelor grafice folosite in Web nelegerea modului de adugare i utilizare a imaginilor ntr-o pagina Web n cadrul lucrrii de laborator numrul 3 se recomand efectuarea urmtoarelor tipuri de activiti: Discuie teoretic pe marginea conceptelor de Hypertext, Hyperlink i URL. Se va urmri clarificarea acestor concepte,

132

Proiectul pentru nvmntul Rural

Anexa 1

i nelegerea modului de folosire al acestor concepte n cadrul paginilor WEB Efectuarea unui exerciiu la calculator care s urmreasc nsuirea noiunilor i tehnicilor de utilizare a linkurilor n cadrul paginilor HTML. Discuie asupra tipurilor de formate grafice folosite pentru realizarea paginilor WEB, avantajele i dezavantajele fiecrui tip de format. Discuie teoretic pe tema utilizrii imaginilor n cadrul paginilor WEB cu scopul clarificrii noiunilor din cadrul Unitii de nvare numrul 6 Efectuarea unui exerciiu la calculator care s urmreasc nsuirea modului de folosire a imaginilor, integrare, aliniere, dimensionare n pagina HTML

Sesiunea de lucru de laborator L4


Setul de lucrri are ca structur aprofundarea i consolidarea cunotinelor dobndite n cadrul Unitii de nvare Nr.7 Sesiunii de laborator i sunt alocate 4 ore. Se recomand a se efectua sub supravegherea cadrului didactic. Pentru efectuarea laboratorului este necesar utilizarea unui editor de texte, spre exemplu: Windows Notepad, i a unui program de navigare internet: Internet Explorer Obiectivele acestei sesiuni de lucru sunt: nelegerea modului de realizare i de configurare al tabelelor HTML Explicarea prilor componente ale unui tabel HTML i a modului n care proprietile acestora pot fi schimbate Prezentarea diferitelor moduri de folosire a tabelelor n pagina HTML In cadrul lucrrii de laborator numrul 4 se recomand efectuarea urmtoarelor tipuri de activiti: Explicarea modului de utilizare a tabelelor i clarificarea noiunilor prezentate n Unitatea de nvare numrul 7. Efectuarea unui exerciiu la calculator care s urmreasc nsuirea modului de definire i folosire a tabelelor HTML

Sesiunea de lucru de laborator L5


Setul de lucrri are ca structur aprofundarea i consolidarea cunotinelor dobndite n cadrul Unitii de nvare Nr. 8.

Proiectul pentru nvmntul Rural

133

Anexa 1

Sesiunii de laborator i sunt alocate 4 ore. Se recomand a se efectua sub supravegherea cadrului didactic. Pentru efectuarea laboratorului este necesar utilizarea unui editor de texte, spre exemplu: Windows Notepad, i a unui program de navigare internet: Internet Explorer Obiectivele acestei sesiuni de lucru sunt: Clarificarea conceptului de formular HTML Explicarea modului de folosire al fiecrui tip de element din cadrul unui formular HTML nelegerea modului de folosire al formularelor HTML n cadrul lucrrii de laborator numrul 5 se recomand efectuarea urmtoarelor tipuri de activiti: Discuie asupra modului de utilizare a tabelelor i clarificarea noiunilor prezentate n Unitatea de nvare numrul 8. Efectuarea unui exerciiu la calculator care s urmreasc nsuirea modului de definire i folosire a formularelor HTML. Exerciiul ar trebui sa acopere modul de folosire al fiecrui tip de element din cadrul unui formular HTML

Sesiunea de lucru de laborator L6


Setul de lucrri are ca structur aprofundarea i consolidarea cunotinelor dobndite n cadrul Unitilor de nvare Nr. 9 i 10. Sesiunii de laborator i sunt alocate 4 ore. Se recomand a se efectua sub supravegherea cadrului didactic. Pentru efectuarea laboratorului este necesar utilizarea unui editor de texte, spre exemplu: Windows Notepad, i a unui program de navigare internet: Internet Explorer, precum i accesul la componente JavaApplets i/sau ActiveX. Obiectivele acestei sesiuni de lucru sunt: nelegerea rolului limbajului JavaScript Clarificare noiunilor de tip script pe partea de client, Evenimente i tratarea acestora nelegerea modului de folosire al JavaScript n cadrul unui document HTML Clarificarea aspectelor legate de folosirea executabilelor i componentelor multimedia n pagina WEB n cadrul lucrrii de laborator numrul 6 se recomand efectuarea urmtoarelor tipuri de activiti:

134

Proiectul pentru nvmntul Rural

Anexa 1

Discuie asupra modului de utilizare a tabelelor i clarificarea noiunilor prezentate n Unitatea de nvare numrul 8. Efectuarea unui exerciiu la calculator care s urmreasc nsuirea modului de definire i folosire a formularelor HTML. Exerciiul ar trebui sa acopere modul de folosire al fiecrui tip de element din cadrul unui formular HTML Efectuarea unui exerciiu la calculator care s urmreasc nsuirea modului de folosire al diferitelor tipuri de componente multimedia i executabile n cadrul unei pagini WEB

Sesiunea de lucru de laborator L7


Setul de lucrri are ca structur aprofundarea i consolidarea cunotinelor dobndite n cadrul Unitilor de nvare Nr. 11 i 12 Sesiunii de laborator i sunt alocate 4 ore. Se recomand a se efectua sub supravegherea cadrului didactic. Pentru efectuarea laboratorului este necesar utilizarea unui editor de texte, spre exemplu: Windows Notepad, i a unui program de navigare internet: Internet Explorer Obiectivele acestei sesiuni de lucru sunt: Clarificarea noiunilor legate de XML precum definiii, sintax, caracteristici Clarificarea modului de folosire al XML n cadrul unei pagini WEB, i a conceptului de separare a datelor utile de interfaa grafic Clarificarea noiunii de pagin de stil. Evidenierea avantajelor folosirii paginilor de stil n cadrul lucrrii de laborator numrul 7 se recomand efectuarea urmtoarelor tipuri de activiti: Discuie asupra conceptelor de baz XML i clarificarea noiunilor de baz Efectuarea unui exerciiu la calculator care s urmreasc nsuirea noiunilor fundamentale ale limbajului XML. Discuie asupra modului de utilizare al paginilor de stil n cadrul unei pagini WEB Efectuarea unui exerciiu la calculator care s urmreasc nsuirea modului de folosire al paginilor de stil

Proiectul pentru nvmntul Rural

135

Anexa 1

Felicitri pentru parcurgerea acestui modul! Acesta reprezint un prim pas in vastul domeniu al Internetului care este ntr-o continu evoluie. Si acum va dorim succes n realizarea paginilor de WEB pe care le vei realiza!

136

Proiectul pentru nvmntul Rural