CUPRINS

CAP. 1. NO IUNI GENERALE 1.1. Ce nseamn HTML? 1.2. Documentele HTML structur 1.3. Elemente de baz CAP. 2. CREAREA I EDITAREA UNEI PAGINI WEB 2.1. Alegerea programului de editare 2.2. Crearea unui document web 2.3. Stabilirea propriet ilor documentului 2.4. Utilizarea imaginilor ca fundal 2.5. Aplica ie practic CAP. 3. FORMATAREA DOCUMENTULUI 3.1. Crearea titlurilor n pagin (Headings) 3.2. Crearea paragrafelor 3.3. Ruperea rndurilor 3.4. Despre paragrafe pre-formatate 3.5. Inserarea unei linii orizontale 3.6. Formatarea unei sec iuni a documentului 3.7. Aplica ie practic CAP. 4. FORMATAREA TEXTULUI 4.1. Schimbarea aspectului textului 4.2. Schimbarea stilului textului 4.3. Alte elemente de formatare a textului 4.4. Caractere speciale i simboluri 4.5. Aplica ie practic CAP. 5. CREAREA LISTELOR 5.1. No iuni generale 5.2. Listele ordonate 5.3. Listele neordonate 5.4. Listele de defini ii 5.5. Listele imbricate 5.6. Aplica ie practic CAP. 6. HYPERLINK-URI 6.1. No iuni generale 6.2. URL-uri 6.3. Ancore (Anchors) 6.4. Aplica ie practic

CAP. 7. FOLOSIREA IMAGINILOR 7.1. Tipuri de imagini 7.2. Inserarea imaginilor 7.3. Formatarea imaginilor 7.4. Aplica ie practic 7.5. Folosirea imaginilor ca link-uri 7.6. Imagini de tip client-side image map 7.7. Aplica ie practic CAP. 8. TABELE 8.1. Ce sunt tabelele? 8.2. Formatarea tabelelor 8.3. Sub-elementele tabelelor 8.4. Aplica ie practic CAP. 9. CADRE 9.1. No iuni generale 9.2. Structura unei pagini ce definete cadre 9.3. Atributele cadrelor 9.4. Destina ii 9.5. Cadre interioare 9.6. Elementul <NOFRAMES> 9.7. Aplica ie practic CAP. 10. FORMULARE 10.1. No iuni generale 10.2. Elementele formularelor 10.3. Crearea unui formular 10.4. Codificarea datelor 10.5. Inserarea controalelor de tip <INPUT> ntr-un formular 10.6. Alte tipuri de controale 10.7. Alte atribute ale formularelor 10.8. Aplica ie practic CAP. 11. INTRODUCERE N JAVA I JAVASCRIPT 11.1. No iuni generale 11.2. Limbajul JAVA 11.3. Limbajul JAVASCRIPT 11.4. Aplica ie practic CAP. 12. PAGINI WEB MULTIMEDIA 12.1. Ce este multimedia? 12.2. Formatul fiierelor multimedia ce con in sunete 12.3. Formatul fiierelor multimedia ce con in video 12.4. Adugarea de informa ii multimedia unei pagini web

12.5. Inserarea unui film QuickTime ntr-o pagin web 12.6. Inserarea unui film Real Video ntr-o pagin web 12.7. Alte metode de inserare a unor sunete ntr-o pagin web 12.8. Aplica ie practic CAP. 13. ELEMENTE SPECIALE 13.1. Meta-Elementele 13.2. Inserarea comentariilor 13.3. Aplica ie practic CAP. 14. CONSIDERA II GENERALE DESPRE DESIGN I ASPECT 14.1. Diferen e dintre un document web i unul tiprit 14.2. Mrimea optim a unei paginii web i optimizarea ei 14.3. Structura i aspectul unui site 14.4. Combinarea culorilor 14.5. Tipurile de caractere folosite NCHEIERE

CAP. 1. NO IUNI GENERALE 1.1. Ce nseamn HTML? HTML este acronimul de la HyperText Markup Language i reprezint un limbaj pentru crearea i marcarea (formatare, aranjare) unui document astfel nct s poat fi publicat pe World Wide Web i vizualizat cu ajutorul unui browser (Internet Explorer, Netscape, Opera etc.). Termenul de hypertext desemneaz un material sub form de text i imagine, interconectat ntr-o manier complex, nesecven ial, n care utilizatorul poate naviga, cuta informa ii referitoare la un obiect. Hypertext-ul trebuie interpretat ca un text care semnaleaz o legtur la o alt informa ie web, de obicei un alt document web, i este identificat prin subliniere sau culoare, pentru a-l deosebi de textul simplu. Hypermedia este un termen aproape sinonim celui de hypertext, singura deosebire fiind faptul c subliniaz prezen a i a unor elemente care nu sunt de tip text, cum ar fi anima ii, secven e sonore sau secven e video. HTML se utilizeaz din 1990, cunoscnd cteva versiuni de dezvoltare, fiecare dintre acestea mbunt ind performan ele limbajului. Ultima variant (la data elaborrii acestui ghid) este HTML 4.01. ce include facilit ile versiunilor anterioare (tag-uri de marcare, tag-uri pentru hiperlegturi, antete, paragrafe, liste, elemente de meniu, formatare caractere, imagini in-line i tag-uri pentru schimbul de date dinamic ntre utilizatori), adugnd facilit i i extensii pentru numere, tabele i elemente de control. 1.2. Documentele HTML structur Un document HTML este format dintr-o succesiune de blocuri de informa ie. Aceste blocuri pot fi incluse unul n altul. Un bloc este delimitat de simboluri speciale, numite tag-uri (etichete). Modul n care un document este marcat cu elemente i cu atribute ale acestor elemente se realizeaz n conformitate cu Document Type Definition (DTD defini ia tipului de document). Aceasta con ine regulile ce caracterizeaz fiecare tip de document. Sursa autorizat pentru furnizarea de informa ii despre HTML i HTML DTD este World Wide Web Consortium (W3C) avnd adresa http://www.w3.org. Tag-ul este termenul consacrat pentru a defini elementele cu care sunt marcate textul i grafica ntr-o pagin web. Fiecare tag este ncadrat de semnele < (mai mic) i > (mai mare). De exemplu: <B>Acest text se va vedea ngroat ntr-un browser</B> Primul cuvnt sau caracter ce apare n interiorul acestor paranteze poart numele de element. Majoritatea elementelor au un tag de deschidere i unul de nchidere cu aceeai structur, dar cu prezen a caracterului / n fa a denumirii elementului.

De exemplu: </FONT> este un tag de nchidere Cuvntul sau cuvintele ce urmeaz dup element i despr ite de acesta printr-un spa iu, poart de numirea de atribute, avnd rolul de descrie propriet ile elementelor. Atributele sunt urmate de semnul = i pot avea diferite valori. Valoarea unui atribut este trecut, de obicei, ntre ghilimele. De exemplu: <FONT COLOR=BLUE>Acest text va fi albastru</FONT> Elementele HTML pot avea unul sau mai multe atribute: De exemplu: <FONT COLOR=BLUE SIZE=+1>Acest text va fi albastru i cu o unitate mai mare dect normal</FONT> De remarcat c atributele nu apar i n tag-urile de nchidere. Elementele HTML specific structura logic a unui document web i sugereaz prezentarea vizual a documentului. HTML furnizeaz dou tipuri de elemente: - tag-urile care permit delimitarea antetelor, paragrafelor, listelor, tabelelor, legturilor, imaginilor, etc; - referin ele de entitate caracter care permit utilizarea n documentele HTML a simbolurilor declarate drept caractere de control. Acestea se identific uor deoarece ntotdeauna ncep cu ampersand & . De exemplu, pentru a reprezenta simbolul < ntrun document HTML, se va utiliza referin a de entitate caracter &lt (less then). Not: Tag-urile se nchid n ordinea invers deschiderii lor, sintaxa corect a unei formatri cu mai multe tag-uri fiind reprezentat astfel: <TAG1><TAG2>...<TAGn> obiect formatat </TAGn>...</TAG2></TAG1> 1.3. Elemente de baz Orice pagin web (document HTML) are n structur trei elemente obligatorii: un element numit HTML, care cuprinde ntregul document, i dou sub-elemente ale acestuia: HEAD (antet, cap) i BODY (corp). Tag-ul <HTML> este primul tag care trebuie s apar ntr-un fiier HTML. El va ncadra alturi de tag-ul su corespunztor de nchidere (</HTML>) ntreaga pagin web. Tag-ul <HEAD> va marca partea de antet a paginii web. Are tag corespunztor de nchidere (</HEAD>). Tag-ul <BODY> va ncadra con inutul paginii web. Are tag corespunztor de nchidere (</BODY>). Tag-ul <TITLE> marcheaz titlul unui document HTML, cel care va fi afiat n bara de titlu a browser-ului. Acest tag se folosete numai n interiorul tag-ului HEAD. Dac acest tag lipsete, atunci n bara de titlu va aprea numele fiierului.

Iat un model de structur a unui document HTML: <HTML> <HEAD> <TITLE>Titlul documentului</TITLE> </HEAD> <BODY> Continutul documentului </BODY> </HTML> i iat cum arat un document HTML ce utilizeaz tag-urile din structura anterioar:

Not: Modul de scriere al denumirii tag-urilor este indiferent de caz, scrierea lor cu caractere majuscule sau cu caractere minuscule nu influen eaz comportamentul acestora: <TAG> este echivalent cu <tag> i cu <Tag> sau cu <taG> etc. Pentru eviden ierea mai pronun at a acestora, am optat pentru scrierea cu majuscule a denumirii tag-urilor pe parcursul ntregii lucrri.

CAP. 2. CREAREA I EDITAREA UNEI PAGINI WEB 2.1. Alegerea programului de editare Exist o multitudine de programe pe care le pute i folosi la crearea paginilor web. Editoarele de text sunt cele mai simple editoare care permit crearea i salvarea fiierelor fr coduri de formatare ascunse, care pot afecta modul de afiare a unei pagini web n browsere. Editoarele specializate HTML le permit utilizatorilor s creeze documente web ntrun mod rapid i uor i, prin urmare, foarte eficient, doar prin apsarea ctorva butoane sau prin apelarea ctora func ii predefinite. n loc de a scrie de mn codul surs HTML, aceste programegenereaz ele nsele acest cod n locul vostru. Acest tip de editoare reprezint unelte excelente pentru dezvoltatorii web cu experien . Chiar i n acest caz este necesar s n elege i limbajul HTML pentru a putea edita codul i a nltura eventualele neajunsuri din documentele web. n prezent, chiar i versiunile Microsoft Word v permit salvarea documentelor in format pagin web, dar, dac ve i analiza con inutul codului surs, ve i avea surpriza s constata i ct de mult a fost nzorzonat fa de varianta scris de mn. Pentru exemplificarea practic a no iunilor teoretice prezentate n acest ghid, v recomand folosirea editorului Notepad++. Acesta este un editor gratuit de cod-surs care suporta mai multe limbaje de programare i ruleaza sub Windows. Ofer facilit i precum Syntax Highlighting, stiluri personalizate, editare simultan a mai multor fiiere, multiview si bookmarks. Acest produs, bazat pe componentele de editare Scintilla (un component de editare foarte puternic) este sub licen GPL (General Public License). Programul poate fi gasit la adresa http://notepad-plus.sourceforge.net. Datorit folosirii unor culori diferite, acest program v permite s efectua i o distingere clar a elementelor, atributelor i valorilor, contribuind n acest fel la n elegerea no iunilor generale de programare. Dar mai nti va trebui s selecta i tipul de limbaj folosit, n cazul nostru HTML, din meniul Language.

Exist o schem de culori implicit pentru afiarea codurilor dar poate fi definit i de utilizator din meniul Settings Styler configurator....

Pentru exemplificare, am ales culoarea albastr pentru tag-uri, culoarea roie pentru atribute, culoarea portocalie pentru valori i culoarea neagr pentru textul general. n Notepad++ codurile unui document HTML se vor vedea astfel:

2.2. Crearea unui document web Aa cum am men ionat i n capitolul precedent, exist anumite elemente care sunt strict necesare n structura unui document web. Prin urmare, ntotdeauna cnd crea i un document web va trebui s ncepe i prin scrierea acestor elemente esen iale, dup care ve i aduga celelalte tag-uri. Prin urmare, n Notepad++ ve i scrie urmtoarele: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> n acest moment ave i sec iunile HEAD i BODY cuprinse ntre tag-urile HTML. Mai ave i, de asemenea, i elementul TITLE, n interiorul elementului HEAD. Textul pe care il ve i scrie n interiorul tag-urilor TITLE va fi afiat n browsere, pe rndul cel mai de sus, precum i n motoarele de cutare. n cazul n care nu scrie i nimic, n browsere va fi afiat numele documentului web (de exemplu: index.html).

Dac un utilizator dorete s pun un semn de carte Bookmark la documentul respectiv, similar cu adugarea acestuia la Favorites, textul con inut n TITLE va fi cel adugat n list. Iat un exemplu de titlu: <TITLE> Ghid de programare HTML </TITLE> 2.3. Stabilirea propriet ilor documentului ntregul con inut al documentului format din text, imagini, culori, elemente grafice, va fi cuprins ntre tag-urile BODY. Propriet ile documentului sunt controlate de atributele elementului BODY. Aceste atribute sunt: Atribut alink background bgcolor link text vlink Valoare rgb(x,x,x) #xxxxxx colorname nume fiier rgb(x,x,x) #xxxxxx colorname rgb(x,x,x) #xxxxxx colorname rgb(x,x,x) #xxxxxx colorname rgb(x,x,x) #xxxxxx colorname Descriere Precizeaz culoarea link-urilor active din document. O imagine folosit ca fundal pentru document Precizeaz culoarea fundalului documentului. Precizeaz culoarea link-urilor din document. Precizeaz culoarea textului utilizat n document. Precizeaz culoarea link-urilor vizitate din document.

Culorile sunt precizate folosind codurile RGB (red-green-blue) i reprezentate prin valorile hexazecimale. Fiecare sec iune format din dou cifre reprezint valoarea componen ei nuan elor de rou, verde i albastru ce intr n componen a culorii respective. V prezentm n continuare un tabel cu cele mai uzuale culori, compozi ia RGB, precum i codul hexazecimal aferent fiecrei culori: Denumire culoare Black (negru) Blue (albastru) Valoare RGB 0;0;0 0;0;255 Cod hexazecimal 000000 0000FF

SaddleBrown (maron) Grey (gri) Green (verde) Orange (portocaliu) Red (rou) Purple (violet) White (alb) Yellow (galben)

139;69;19 84;84;84 0;255;0 255;165;0 255;0;0 128;0;128 255;255;255 255;255;0

8B4513 545454 00FF00 FFA500 FF0000 800080 FFFFFF FFFF00

Cei mai mul i designeri web i ale schemele de culori astfel nct s se asorteze cu schema general de culori a site-ului. Modul de formatare a acestor atribute este urmtorul: <BODY BGCOLOR=#000000 VLINK=#800080 ALINK=#FF0000> TEXT=#FFFF00 LINK=#0000FF

Rezultatul codurilor precedente va fi un document web cu fundal negru, textul de culoare galben, link-urile de culoare albastr, link-urile active de culoare roie i link-urile vizitate de culoare violet. Not: Codurile hexazexcimale vor fi precedate ntotdeauna de semnul # 2.4. Utilizarea imaginilor ca fundal Elementul BODY permite, de asemenea, utilizarea unei imagini ca fundal. Aceast imagine va fi afiat n mod repetat (tiled) pe fundal n browsere, adic va fi multiplicat pe toat suprafa a documentului web. n vederea realizrii unui aspect profesional, este recomandat ca imaginile folosite ca fundal s poat fi alturate fr ns a li se observa mbinrile. Imaginile folosite ca fundal trebuie s fie n format .gif sau .jpg. V recomandm s ave i n vedere faptul c ntreg con inutul documentului va fi afiat deasupra imagii folosite ca fundal. Prin urmare, imaginea va trebui s fie n culori pale, sau n contrast cu culoarea textului afiat, astfel nct textul s poat fi citit cu uurin . Sintaxa folosirii acestui atribut ntr-un document web este urmtoarea: <BODY BACKGROUND=fundal.gif> Rezultatul va fi afiarea ca fundal a imaginii din fiierul fundal.gif.

2.5. Aplica ie practic n baza celor prezentate anterior, vom realiza un document web folosind editorul Notepad++. n documentul nou creat (new1) vom scrie urmtoarele linii de limbaj HTML: <HTML> <HEAD> <TITLE>Pagina cu fundal color</TITLE> </HEAD> <BODY BGCOLOR="#0000FF" TEXT="#FFFFFF"> <B>Pagina cu fundal color</B> </BODY> </HTML> Din meniul File se alege op iunea Save, se stabiliete calea unde va fi salvat fiierul (de exemplu C:\Ghid programare HTML\Teste) i vom denumi fiierul test.html Pentru a vedea rezultatul exerci iului n browserul cu care suntem familiariza i (Internet Explorer, Netscape, Opera etc.) vom deschide fiierul respectiv (din meniul File se alege op iunea Open sau Open File, n func ie de browser). Rezultatul afiat va fi urmtorul:

i acum vom crea un nou document (sau l putem modifica pe cel creat anterior), pentru a utiliza o imagine ca fundal. <HTML> <HEAD> <TITLE>Pagina cu fundal imagine</TITLE> </HEAD> <BODY BACKGROUND="fundal.gif">

<B>Acesta este o pagina cu imagine pe fundal</B> </BODY> </HTML> Dac nu ave i un fiier de tip imagine (.gif sau .jpg) care se preteaz ca fundal de pagin, pute i descrca fiierul nostru fundal.gif dnd click aici. Not: Fi i aten i la calea utilizat la descrcarea fiierului! Fiierul fundal.gif trebuie salvat n acelai director ca i fiierul test.html Rezultatul afiat va fi urmtorul:

Rezultatul va fi identic i dac folosi i imaginea existent pe site-ul nostru, n condi iile n care i specifica i calea exact i ave i o conexiune internet permanent, astfel: <HTML> <HEAD> <TITLE>Pagina cu fundal imagine</TITLE> </HEAD> <BODY BACKGROUND="http://html.webmarketclub.com/teste/fundal.gif"> Acesta este o pagin cu imagine pe fundal </BODY> </HTML>

CAP. 3. FORMATAREA DOCUMENTULUI 3.1. Crearea titlurilor n pagin (Headings) Elementele constituite din titluri i subtitluri se regsesc n interiorul sec iunii BODY i sunt marcate de tag-urile <H1> pn la <H6>, avnd dimensiunile corespunztoare pe o scal de la 1 la 6, unde <H1> are dimensiunea cea mai mare, iar <H6> are dimensiunea cea mai mic. Este necesar folosirea tag-urilor de nchidere </H1> ... </H6>. Prezen a titlurilor ntr-un document web este facultativ, ele putnd aprea n orice ordine dorit de creatorul documentului, dei, pentru a ob ine cele mai bune efecte vizuale, este recomandat s le utiliza i n ordine cresctoare (de la H1 la H6). Iat, cum arat concret formatarea acestor titluri ntr-un document web. <HTML> <HEAD> <TITLE>Pagina cu titluri</TITLE> </HEAD> <BODY> <H1>TITLU de tip H1</H1> <H2>TITLU de tip H2</H2> <H3>TITLU de tip H3</H3> <H4>TITLU de tip H4</H4> <H5>TITLU de tip H5</H5> <H6>TITLU de tip H6</H6> </BODY> </HTML> Rezultatul afiat va fi urmtorul:

Atributele specifice acestui element sunt: Atribut align Valoare left center right justify Descriere Precizeaz modul de aliniere a textului cuprins n tiltu.

3.2. Crearea paragrafelor Paragrafele v permit s aduga i text n documentul web ntr-o asemenea manier nct este ajustat n mod automat la dimensiunea ferestrei browser-ului n care este afiat, adic fiecare rnd de text va avea l imea ferestrei n care este afiat. Pentru a marca prezen a unui paragraf se folosete tag-ul <P>. Acesta necesit tag de nchidere </P>. Formatarea paragrafelor ntr-un document web se realizeaz astfel: <HTML> <HEAD> <TITLE>Pagina cu paragrafe</TITLE> </HEAD> <BODY> <P>Paragrafele va permit sa adaugati text n documentul web.</P> <P>Fiecare rnd de text va avea latimea ferestrei n care este afisat </P> </BODY>

</HTML> Rezultatul afiat va fi urmtorul:

Not: Dac ve i dori s introduce i mai multe spa ii goale ntre cuvintele din interiorul unui paragraf, va trebui s folosi i codul &nbsp; (NBSP = Non-Breaking Space) deoarece browser-ele ignor spa iile multiple dintre cuvinte. Atributele specifice acestui element sunt: Atribut align Valoare left center right justify Descriere Precizeaz modul de aliniere a textului cuprins n paragraf.

3.3. Ruperea rndurilor O modalitate de a mpr i o zon de text pe rnduri este de a semnala browser-ului exact unde vrem s fie efectuat ruperea de rnduri, folosind tag-ul <BR>. Acesta impune afiarea textului situat dup el pe linia urmtoare. Nu are tag corespunztor de nchidere. Pentru exemplificare vom folosi urmtorul cod: <HTML> <HEAD>

<TITLE>Ruperea randului</TITLE> </HEAD> <BODY> <P>Acest text contine o rupere <BR> a rndului </P> </BODY> </HTML> Rezultatul afiat va fi urmtorul:

3.4. Despre paragrafe pre-formatate Paragrafele pre-formatate sunt definite prin tag-ul <PRE>. Acesta se folosete pentru a indica browser-ului c textul trebuie s fie afiat exact aa cum este scris n codul HTML, respectnd spa iile i ruperea rndurilor. Necesit tag corespunztor de nchidere </PRE>. Iat cum se poate pune n practic folosirea acestui tag: <HTML> <HEAD> <TITLE>Paragraf pre-formatat</TITLE> </HEAD> <BODY> <PRE>Prin folosirea acestui tag nu mai trebuie sa apelam la ruperea randului, asa cum a fost prezentata anterior, iar spatiile vor fi

considerate ca atare . . .</PRE> </BODY> </HTML> Rezultatul afiat va fi urmtorul:

De remarcat c acest tag are o utilizare mai restrns, un neajuns major fiind faptul c textul nu este ajustat n mod automat la dimensiunea ferestrei browser-ului n care este afiat (aa cum se poate observa i n imagine), iar fontul folosit este din grupa Courier New. Ajustarea l imii paragrafului se poate face prin folosirea urmtorului atribut: Atribut width Valoare numr Descriere Precizeaz numrul maxim de caractere pe un rnd (n mod obinuit 40, 80 sau 132), n func ie de rezolu ia monitotului recomandat utilizatorilor.

3.5. Inserarea unei linii orizontale Un alt element ce contribuie la redarea unui aspect mai placut unui document web este linia orizontal (Horizontal Line), redat n limbajul HTML prin tag-ul <HR>. Acest element nu are un tag de nchidere. Pur i simplu aduga i tag-ul <HR> n interiorul sec iunii BODY i ve i avea ca rezultat o linie orizontal. Vom exemplifica cele de mai sus folosind urmtorul cod:

<HTML> <HEAD> <TITLE>Inserarea unei linii orizontale</TITLE> </HEAD> <BODY> <P>Aceasta pagina contine o linie orizontala <HR> inserata ntr-un paragraf</P> </BODY> </HTML> Rezultatul afiat va fi urmtorul:

Atributele specifice acestui element sunt: Atribut align noshade size width color Valoare left center right noshade pixels % pixels % rgb(x,x,x) Descriere Precizeaz modul de aliniere liniei n document. Cnd este prezent, acest atribut are ca rezultat nlturarea efectului de umbr, setat n mod inplicit pentru linia orizontal. Precizeaz grosimea liniei orizontale. Precizeaz l imea liniei orizontale. Precizeaz culoarea liniei orizontale.

#xxxxxx colorname 3.6. Formatarea unei sec iuni a documentului Pentru formatarea unei ntregi sec iuni (division) a unui document se folosete tagul <DIV>. n interiorul unei sec iuni pot fi cuprinse o serie de elemente care vor pstra caracteristicile acestea, stabilite prin atributele sale, cu excep ia cazului n care acele elemente nu au propriile atribute. Folosirea acestui tag la deschidere necesit i folosirea tag-ului </DIV> la nchidere. Atributele specifice acestui element sunt: Atribut align Valoare left center right justify Descriere Precizeaz modul de aliniere a textului cuprins n interiorul sec iunii.

Pentru exemplificare vom folosi urmtorul cod: <HTML> <HEAD> <TITLE>Inserarea unei sectiuni</TITLE> </HEAD> <BODY> <DIV align="center"> <P>Paragraf aliniat pe centru ce pastreaza atributul "center" specificat pentru elementul DIV.</P> <P align="right">Paragraf aliniat la dreapta caruia i s-a aplicat propriul atribut "right", chiar daca se afla n interiorul aceleiasi sectiuni.</P> </DIV> </BODY> </HTML> Rezultatul afiat va fi urmtorul:

3.7. Aplica ie practic n baza celor prezentate n acest capitol, vom crea un nou fiier numit test2.html folosind editorul Notepad++, urmnd paii descrii n capitolul precedent, n care vom scrie urmtoarele: <HTML> <HEAD> <TITLE>Testarea cunostintelor dobndite n Capitolul 3</TITLE> </HEAD> <BODY> ncepem prin inserarea unui text neformatat, care, dup cum se poate observa, are caracteristicile unui text de tip paragraf, aliniat la stnga. <H1>Inserm un Titlu de tip H1</H1> <H2>Inserm si un Titlu de tip H2</H2> <P align="justify">Adugam text n document, aliniat att la stnga ct si la dreapta, text ce va avea ltimea ferestrei n care este afisat.</P> <P align="right">Puteti observa rezultatul inserrii unei <BR> ruperi de rnd n interiorul unui paragraf, precum si folosirea unor spatii multiple &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ntre cuvinte, ntr-un paragraf aliniat la dreapta.</P> <DIV align="center"> <H3>Titlu de tip H3</H3> <HR color="red" size="5" width="300" align="right"> <PRE width="40">Introducem un paragraf pre-formatat n interiorul unei sectiuni aliniate pe centru, precedat de un titlu de tip H3 si de o linie orizontal de

culoare rosie, cu grosimea de 5 pixeli si ltimea de 120 de pixeli, pozitionat n partea dreapt a documentului.</PRE></DIV> </BODY> </HTML> Rezultatul afiat va fi urmtorul:

Note: 1. n Internet Explorer n-a fost recunoscut atributul width="40" al elementului <PRE>, ci doar n Netscape. 2. Aspectul documentului afiat n browser depinde i de dimensiunea ferestrei n care este vizualizat, prin urmare, poate fi diferit de imaginea prezentat.

CAP. 4. FORMATAREA TEXTULUI 4.1. Schimbarea aspectului textului Dac pn acum am vorbit depre formatarea unor ntregi sec iuni sau paragrafe, a sosit timpul s ne ocupm de formatarea textului n detaliu, i anume de formatarea proprie fiecrui cuvnt sau caracter. Pentru nceput vom analiza tag-ul <FONT> care stabilete tipul de caracter folosit, mrimea i culoarea acestuia. Necesit tag de nchidere </FONT>. Prin urmare, atributele care definesc acest tag sunt urmtoarele: Atribut color Valoare rgb(x,x,x) #xxxxxx colorname denumirea tipului de caracter o valoare numeric de la 1 la 7 Descriere Precizeaz culoarea caracterelor. Precizeaz tipul de caracter ce va fi folosit n text. Pot fi specificate mai multe tipuri concomitent (pentru cazul n care un utilizator nu are anumit tip de font, de exemplu face=Arial,Tahoma,Verdana,Helvetica) Precizeaz mrimea caracterelor (valoarea implicit este 3).

face

size

Elementul <FONT> poate fi cuprins n interiorului multor elemente (cum ar fi paragraf, titlu, sec iune etc.), dar la fel de bine aceste elemente se pot afla n interiorul elementului <FONT>, rezultatele ob inute fiind similare. <FONT color="red"><H1>Titlu</H1> </FONT> este similar cu <H1><FONT color="red">Titlu </FONT> </H1> n exemplul urmtor vom avea n vedere aspecte legate de elementul <FONT> i ne von folosi de acelai fiier test.html: <HTML> <HEAD> <TITLE> Schimbarea aspectului caracterelor</TITLE> </HEAD> <BODY> <P>Paragraf n interiorul caruia modificam <FONT color="red"> culoarea caracterelor </FONT> , <FONT face="Verdana"> aspectul caracterelor </FONT> , <FONT size="+2"> marimea caracterelor </FONT> sau <FONT color="blue" face="Script" size="+5"> toate la un loc </FONT> </P> </BODY> </HTML> Rezultatul afiat va fi urmtorul:

Not: Prezen a elementului <P> n exemplul precedent este facultativ. 4.2. Schimbarea stilului textului Principalele elementele de stil ce caracterizeaz corpurile de liter i care contribuie la eviden ierea acestora, sunt marcate de urmtoarele tag-uri: <B> - are ca efect ngroarea textului <I> - are ca efect italicizarea textului <U> - are ca efect sublinierea textului <BIG> - are ca efect mrirea textului <SMALL> - are ca efect micorarea textului <TT> - are ca efect spa ierea n mod egal a textului (litera I i litera M vor acupa acelai spa iu n interiorul unui cuvnt) <S> <STRIKE> <DEL> - toate au ca efect afiarea textului tiat cu o linie orizontal Toate aceste tag-uri necesit tag-uri de nchidere. Pentru exemplificare vom folosi urmtorul cod: <HTML> <HEAD> <TITLE> Schimbarea stilului caracterelor </TITLE> </HEAD> <BODY> <B> - B are ca efect ngrosarea textului </B><BR> <I> - I are ca efect italicizarea textului </I><BR>

<U> - U are ca efect sublinierea textului </U><BR> <BIG> -BIG are ca efect marirea textului </BIG><BR> <SMALL> - SMALL are ca efect micsorarea textului </SMALL><BR> <TT> - TT are ca efect spatierea n mod egal a textului (litera I si litera M vor acupa acelasi spatiu n interiorul unui cuvnt) </TT><BR> <S> - S are ca efect afisarea textului taiat cu o linie orizontala </S><BR> <STRIKE> - STRIKE are ca efect afisarea textului taiat cu o linie orizontala </STRIKE><BR> <DEL> - DEL are ca efect afisarea textului taiat cu o linie orizontala </DEL> </BODY> </HTML> Rezultatul afiat va fi urmtorul:

4.3. Alte elemente de formatare a textului Pe lng elementele prezentate mai sus, mai exist o serie de elemente cu o utilizare mai restrns pe care le vom men iona pe scurt: <SUP> - Permite afiarea caracterelor exponent (superscript) <SUB> - Permite afiarea caracterelor indice (subscript) <EM> - Accentuez un text <STRONG> - ntrete modul de afiare a unui text <DFN> - Indic faptul c textul reprezint defini ia unui termen <CODE> - Indic faptul c textul reprezint un cod de calculator <SAMP> - Indic faptul c textul reprezint un model de cod de calculator <KBD> - Indic faptul c textul reprezint un text de tastatur

<VAR> - Indic faptul c textul reprezint o variabil <CITE> - Indic faptul c textul reprezint un citat Toate aceste tag-uri necesit tag-uri de nchidere. 4.4. Caractere speciale i simboluri Caracterele speciale i simbolurile care nu se gsesc, n mod obinuit, pe tastatur, pot fi inserate n text prin secven e de cod speciale. Aceste caractere se regsesc ntr-un set interna ional de caractere cunoscut i sub denumirea de ISOLatin-1 (ISO-8859-1). Caracterele speciale sunt recunoscute de limbajul HTML datorit faptului c ncep cu semnul & (ampersand) i se ncheie su semnul ; (punct i virgul). Cele mai uzuale astfel de caractere au fost cuprinse n tabelul urmtor: Caracterul special ampersand asterisk cent sign copyright fraction one qtr fraction one half greater-than sign less-than sign non-breaking space quotation mark registration mark trademark sign Reprezentare &amp; &lowast; &cent; &copy; &frac14; &frac12; &gt; &lt; &nbsp; &quot; &reg; &trade; " Simbolizare & * > <

4.5. Aplica ie practic Vom pune n practic cele prezentate anterior i vom crea un nou fiier numit test3.html care va con ine urmtoarele linii de cod: <HTML> <HEAD> <TITLE> Elemente de formatare a textului</TITLE> </HEAD> <BODY>

<H3 ALIGN="center"><FONT COLOR="red">Titlu de tip H3</FONT> </H3> Inseram un text neformatat caruia ncepem sa-i aplicam diferite efecte: <FONT COLOR="blue" SIZE="4"> ngrosam <B> textul </B>, dar <I>va sfatuiesc</I> sa nu l <U> subliniati </U> deoarece <EM> poate fi confundat cu textul unui link</EM>.</FONT><BR> <FONT FACE="Arial,Helvetica,Tahoma" COLOR="purple"><TT> Versiunea tiparita </TT>a ghidului <S> este acum disponibila</S> <STRONG> nu este nca disponibila<SUP>1</SUP></STRONG>.</FONT> <BR><BR> <SMALL><FONT FACE="Tahoma,Verdana"><SUP>1</SUP>dar poate ca va fi n curnd, depinde de volumul cererilor</FONT></SMALL> <BR><BR> <DIV ALIGN="center"><B>&copy; 2008 AMSTAL COMPANY &trade;</B></DIV> </BODY> </HTML> Rezultatul afiat va fi urmtorul:

Not: Pute i observa n codul surs marcarea tag-urilor att cu caractere majuscule, ct i cu caractere minuscule, rezultatul nefiind influen at de modul de scriere al acestora, ntruct browser-ele nu in cont de aceste diferen e.

CAP. 5. CREAREA LISTELOR 5.1. No iuni generale Limbajul HTML le permite utilizatorilor s foloseasc diverse mecanisme pentru prezentarea informa iilor sub forma listelor. Listele reprezint succesiuni de elemente, fiecare element fiind eviden iat printr-un numr sau printr-un marcaj, avnd rolul de a atrage aten ia asupra unor idei din text. Fiecare list poate con ine unul sau mai multe elemente. n func ie de elementele con inute, listele sunt de trei tipuri: liste ordonate liste neordonate liste de defini ii 5.2. Listele ordonate ntr-o list ordonat elementele sunt numerotate automat de browser. Tag-ul ce marcheaz nceputul unei liste ordonate este <OL>. Folosirea tag-ului de nchidere </OL> este obligatorie. Elementele listei sunt marcate de tag-ul <LI>. Folosirea tag-ului de nchidere </LI> este op ional. Modul de folosire a acestor tag-uri este redat n exemplul urmtor: <OL> <LI>primul element</LI> <LI>al doilea element</LI> <LI>al treilea element</LI> </OL> avnd ca rezultat afiarea listei n aceast form: 1. primul element 2. al doilea element 3. al treilea element Atributele specifice acestui element sunt: Atribut start Valoare numr sau liter A a I i 1 Descriere Precizeaz valoarea cu care va ncepe numerotarea. Sunt folosite simboluri alfabetice majuscule Sunt folosite simboluri alfabetice minuscule Sunt folosite simboluri numerice romane majuscule Sunt folosite simboluri numerice romane minuscule Sunt folosite simboluri numerice arabe

type

5.3. Listele neordonate ntr-o list neordonat elementele sunt marcate prin simboluri similare cu Bullets din Microsoft Word, simbolul implicit fiind disc. Tag-ul ce marcheaz nceputul unei liste ordonate este <UL>. Folosirea tag-ului de nchidere </UL> este obligatorie. La fel ca i la listele ordonate, elementele listei sunt marcate de tag-ul <LI>. Modul de folosire a acestor tag-uri este redat n exemplul urmtor: <UL> <LI>primul element</LI> <LI>al doilea element</LI> <LI>al treilea element</LI> </UL> avnd ca rezultat afiarea listei n aceast form: primul element al doilea element al treilea element

Atributele specifice acestui element sunt: Atribut type Valoare disc square circle Descriere Sunt folosite simboluri de tip disc Sunt folosite simboluri de tip ptrat Sunt folosite simboluri de tip cerc

5.4. Listele de defini ii Listele de defini ii sunt pu in diferite de celelalte dou tipuri, ntruct fiecare termen al listei se compune din dou elemente: Termenul Defini iei i Descrierea Defini iei. Tag-ul ce marcheaz nceputul unei liste de defini ii este <DL>. Folosirea tag-ului de nchidere </DL> este obligatorie. Tag-ul ce marcheaz termenul defini iei este <DT>. Folosirea tag-ului de nchidere </DT> este op ional. Tag-ul ce marcheaz descrierea defini iei este <DD>. Folosirea tag-ului de nchidere </DD> este op ional. Modul de folosire a acestui tag este redat n exemplul urmtor: <DL> <DT>HTML</DT> <DD>Hyper Text Markup Language</DD> <DT>WWW</DT> <DD>World Wide Web!</DD>

</DL> avnd ca rezultat afiarea listei n aceast form: HTML Hyper Text Markup Language WWW World Wide Web Dup cum se poate observa, descrierea defini iei este aliniat mai interior, tocmai pentru a sublinia caracterul rela iei de subordonarea existent fa de termenul defini iei. 5.5. Listele imbricate Uneori este necesar s folosim anumite tipuri de liste n interiorul altora. mpreun, acestea formeaz listele imbricate. n astfel de cazuri, lista interioar nu mai trebuie s fie delimitat de tag-ul <LI>. Modul de folosire a listelor imbricate este redat n exemplul urmtor: <OL type="I"> <LI>Introducere <OL TYPE="1"> <LI>Cuvnt nainte <LI>Notiuni generale </OL> <LI>Realizarea unei pagini web <OL TYPE="1" START="3"> <LI>Alegerea editorului HTML <LI>Machetarea paginii <LI>Elementele HTML <UL TYPE="circle"> <LI>Sectiunea HEAD <LI>Sectiunea BODY </UL> <LI>Apleturi JAVA </OL> <LI>Optimizarea paginii web <LI>Publicarea pe internet a paginii web </OL> avnd ca rezultat afiarea listei n aceast form: I. Introducere 1. Cuvnt nainte 2. Notiuni generale

II. Realizarea unei pagini web 3. Alegerea editorului HTML 4. Machetarea paginii 5. Elementele HTML Sectiunea HEAD Sectiunea BODY 6. Apleturi JAVA III. Optimizarea paginii web IV. Publicarea pe internet a paginii web 5.6. Aplica ie practic Vom ncerca n continuare s punem n practic cele prezentate anterior combinate cu elemente de formatare a textului i vom crea un nou fiier numit test4.html care va con ine urmtoarele linii de cod: <HTML> <HEAD> <TITLE>Utilizarea listelor</TITLE> </HEAD> <BODY> <B> <OL type="I"><FONT color="blue" size="4"> <LI>Introducere <OL TYPE="1"><FONT size="3"> <LI>Cuvnt nainte <LI>Notiuni generale </OL><FONT color="red" size="4"> <LI>Realizarea unei pagini web <OL TYPE="1" START="3"><FONT size="3"> <LI>Alegerea editorului HTML <LI>Machetarea paginii <LI>Elementele HTML <UL TYPE="circle"><FONT color="green" size="2"> <LI>Sectiunea HEAD <LI>Sectiunea BODY</FONT> </UL> <LI>Apleturi JAVA</FONT> </OL> <FONT color="brown"><LI>Optimizarea paginii web</FONT> <FONT color="purple"><LI>Publicarea pe internet a paginii web </FONT> </OL></FONT> </B></BODY> </HTML>

Rezultatul afiat va fi urmtorul:

CAP. 6. HYPERLINK-URI 6.1. No iuni generale Hypertext-ul reprezint o metod de realizare a unui text, ideal pentru utilizarea pe calculator, care permite cititorului s parcurg materialul n maniera aleas de el. Pentru a realiza un hypertext, mai nti trana i informa iile n unit i mici, manevrabile, cum ar fi paginile individuale de text. Aceste unit i sunt numite noduri. Apoi ngloba i n text hyperlink-uri (numite i ancore). Cnd cititorul execut click pe un hyperlink, programul de hypertext afieaz un nod diferit. Procesul de navigare printre nodurile legate n acest fel se numete rsfoire (browsing). O colec ie de hyperlink-uri este numit web. WWW (World Wide Web) este un sistem de hypertext la scar global. Aplica iile de hypertext sunt foarte utile n special atunci cnd se lucreaz cu cantit i mari de text, ca n cazul enciclopediilor sau al documentelor juridice. Pentru simplificare, ca i pn acum, cnd facem referire la hyperlink-uri le vom numi simplu link-uri. Pentru a include un link ctre un document propriu sau aflat pe un alt server, este absolut necesar s cunoate i adresa exact a acelui document i modul de inserare a unei ancore n propriul document HTML. Adresa unui document poate fi inserat la modul relativ sau la modul absolut. De exemplu: test.html reprezint o referin relativ n vreme ce C:\Ghid programare HTML\Teste\test.html reprezint o referin absolut 6.2. URL-uri n Internet, fiecare document ar propria sa adres identificat printr-un URL (Uniform Resource Locator). Acesta const dintr-o combina ie de elemente scrise ntr-o anumit ordine, astfel: protocol://numele_de_domeniu/cale unde: protocol reprezint software-ul sau maniera prin care serverul de domeniu comunic documentul unui browser numele_de_domeniu reprezint numele alocat pe Internet serverului ce gzduiete documentul web calea reprezint numele directorului (i al eventualelor subdirectoare) unde este stocat documentul web Iat cteva exemple de URL-uri: http://html.webmarketclub.com/index.html

tipul protocolului este http html este, n acest caz, numele unui subdomeniu din domeniul webmarketclub situat n zona com (ce identific site-urile comerciale) index.html este numele unui fiier

http://html.webmarketclub.com/teste/computer.jpg tipul protocolului este http html este, ca i mai sus, numele unui subdomeniu teste reprezint numele unui subdirector computer.jpg este numele unui fiier ftp://ftp.uni-stuttgart.de/pub/download/madyn_v15_160107.zip tipul protocolului este ftp. Acest serviciu este utilizat pentru a crea link-uri ctre fiiere ce pot fi descrcate dup servere ftp. gazda este ftp.uni-stuttgart.de pub i download reprezint numele unor subdirectoare madyn_v15_160107.zip este numele unui fiier mailto: [email protected] tipul serviciului este identificat ca fiind mail client program. Acest link va lansa n execu ie clientul de mail al utilizatorului. destinatarul email-ului este [email protected] 6.3. Ancore Ancorele (anchors) reprezint elementele HTML care precizeaz att sursa ct i destina ia unui link. Sunt marcate prin tag-ul de deschidere <A> i necesit tag-ul de nchidere </A>. O ancor poate fi utilizat n dou moduri: 1. Pentru a crea un semn de carte (bookmark) n interiorul unui document utiliznd atributul NAME sau ID. Odat creat, acesta devine inta poten ial a unui link. 2. Pentru a crea un link ctre alt document sau ctre un semn de carte utiliznd atributul HREF, valoarea atributului fiind dat de un anumit URL. Not: V reamintim c schema de culori ce va fi afiat pentru link-uri este controlat de atributele elementului BODY, i anume LINK, VLINK i ALINK, descrise n Capitolul 2 din acest ghid. Nespecificarea acestor valori va determina browser-ul s afieze schema de culori implicit. Pentru exemplificare vom folosi urmtoarele secven e de cod: <A NAME="nume_semn_de_carte">Semn de carte</A> are ca rezultat atribuirea unui semn de carte <A HREF="#nume_semn_de_carte ">Du-te la semnul de carte </A>

are ca rezultat realizarea unui link n document ctre semnul de carte <A HREF="http://html.webmarketclub.com/teste/test5.html">Du-te la Testul 5 pe site-ul Webmarket Club </A> are ca rezultat realizarea unui link n document ctre un alt document pe Internet, n acest caz test5.html Desigur, poate fi combinat link-ul ctre o pagin cu link-ul intern existent pe acea pagin, avnd ca rezultat specificarea unei sec iuni anumite dintr-un document web. <A HREF="http://html.webmarketclub.com/teste/test5.html#semn_de_carte"> Du-te la semnul de carte din cadrul Testului 5 pe site-ul Webmarket Club </A> Tot cu ajutorul ancorelor se poate trimite un mail printr-un singur click n interiorul unui document, astfel: <A HREF="mailto:emailuser@host">Nume</a> Un alt atribut important al acestui element este reprezentat de TARGET, care specific locul n care se va deschide URL-ul. Valorile pe care le poate luat acest atribut sunt: _blank URL-ul int se va deschide ntr-o nou fereastr (este implicit, deci poate fi i nespecificat) _top URL-ul int se va deschide n fereastra curent _self URL-ul int se va deschide n acelai cadru din care s-a dat click _parent URL-ul int se va deschide n cadrul printe (dar despre cadre vom vorbi ceva mai trziu) 6.4. Aplica ie practic Pentru a pune n practic cele prezentate n acest capitol, vom crea un nou fiier numit test5.html care va con ine urmtoarele linii de cod: <HTML> <HEAD> <TITLE>Inserarea link-urilor n document</TITLE> </HEAD> <BODY> <H2><A name="C1">Capitolul 1</A></H2> <P>Acest capitol trateaza problematica ba bla bla</P> <H2><A name="C2">Capitolul 2</A></H2> <P>Acest capitol trateaza problematica ba bla bla</P> <H2><A name="C3">Capitolul 3</A></H2> <P>Acest capitol trateaza problematica ba bla bla</P> <H2><A name="C4">Capitolul 4</A></H2>

<P>Acest capitol trateaza problematica ba bla bla</P> <P>Dati click pe <A href="#C1">Vedeti si Capitolul 1</A> si veti avea ca rezultat deplasarea documentului la Capitolul 1.</P> <H2><A name="C5">Capitolul 5</A></H2> <P>Acest capitol trateaza problematica ba bla bla</P> <P>Dati click pe <A href="http://html.webmarketclub.com/teste/test5.html#C3" target="_blank">Capitolul 3 din Testul 5 pe site-ul Webmarket Club</A> si veti avea ca rezultat o fereastra noua pozitionata la Capitolul 3 din Testul 5 pe site-ul Webmarket Club.</P> </BODY> </HTML> Rezultatul afiat va fi urmtorul:

CAP. 7. FOLOSIREA IMAGINILOR 7.1. Tipuri de imagini Deoarece nu toate tipurile de imagini sunt suportate de browsere, vom proceda mai nti la o trecere n revist a principalelor tipuri ce pot fi utilizate n documentele web. Singurele tipuri care pot fi utilizate fr restric ii n browsere sunt urmtoarele: GIF: Graphic Interchange Format, sunt imagini care au maximum 256 de culori. Formatul GIF este cel mai bun pentru redarea imaginilor de tipul logo-uri, pictograme i butoane. Este formatul cel mai rspndit pe Internet. O categorie aparte a acestui format o constituie fiierele animate de tip GIF care contribuie la ob inerea unor efecte deosebite. JPG, JPEG: Joint Photographic Expert Group, sunt imagini care pot avea pn la 16,7 milioane de culori. Formatul JPEG este recomandat pentru redarea fotografiilor i a altor imagini are necesit o claritate deosebit. Mai exist cteva formate care pot fi utilizate, dar cu anumite rezerve, ntruct nu vor fi recunoscute n toate browserele, fiind recomandat convertirea lor cu programe specializate (Adobe PhotoShop, Corel PhotoPaint etc.) n formatele prezentate anterior. Aceste formate sunt: PNG: Portable Network Graphics BMP: MS Windows BitMaP TIFF: Tagged Image File Format PCX: PC Paintbrush Format La alegerea unei imagini trebuie avut n vedere faptul c cele de dimensiuni mari (ne referim la dimensiunea fiierului, nu la suprafa a imaginii) vor ncetini n mod considerabil ncrcarea unui document web. O pagin web care con ine multe imagini se va ncrca mult mai greu dect o pagin web care con ine mai mult text i mai pu ine imagini. De aceea trebuie s realiza i un echilibru ntre rapiditatea de ncrcare i design-ul site-ului. 7.2. Inserarea imaginilor Dac v-a i hotrt s insera i o imagine ntr-un document web, va trebui s folosi i tag-ul <IMG>. Prezen a tag-ul de nchidere </IMG> este op ional. Spre deosebire de alte tag-uri, la folosirea tag-ului <IMG> este obligatorie specificarea atributui <SRC> care stabilete sursa (source) imaginii ce trebuie ncrcat, i este recomandat folosirea atributului <ALT>, care stabilete textul ce descrie imaginea i func ioneaz ca un tag (alternative). Este afiat atunci cnd vizitatorul deplaseaz cursorul mouse-ului deasupra imaginii sau cnd sunt probleme cu ncrcarea imaginii. Vom exemplifica cele de mai sus folosind urmtorul cod: <HTML> <HEAD>

<TITLE>Inserarea unei imagini</TITLE> </HEAD> <BODY> <IMG SRC="computer.jpg" ALT="Un computer in imagine"> </BODY> </HTML> Dac nu ave i un fiier de tip imagine (.gif sau .jpg) pe care s-l folosi i ca exemplu, pute i descrca fiierul nostru dnd click aici. Not: Fi i aten i la calea utilizat la inserarea fiierului imagine! n acest exemplu fiierul computer.jpg este salvat n acelai director ca i fiierul test6.html. Rezultatul afiat va fi urmtorul:

Rezultatul va fi identic i dac folosi i imaginea existent pe site-ul nostru, n condi iile n care i specifica i calea exact i ave i o conexiune internet permanent, astfel: <HTML> <HEAD> <TITLE>Inserarea unei imagini</TITLE> </HEAD> <BODY>

<IMG SRC="http://html.webmarketclub.com/teste/computer.jpg" computer in imagine"> </BODY> </HTML> 7.3. Formatarea imaginilor

ALT="Un

Formatarea imaginilor se realizeaz utiliznd celelalte atribute op ionale care definesc acest tag, i anume: Atribut Valoare top bottom middle left right pixels pixels pixels URL URL URL pixels pixels Descriere Specific cum va fi aliniat imaginea n raport cu textul ce o nconjoar. Definete o bordur n jurul unei imagini. Definete nl imea unei imagini. Definete spa iul liber din pr ile laterale ale unei imagini. Definete imaginea de tip server-side image map. Adresa URL ctre un document care con ine o descriere lung a imaginii. Definete imaginea de tip client-side image map. Se folosete n combina ie cu tag-urile <map> i <area>. Definete spa iul liber din pr ile de sus i de jos ale unei imagini. Definete l imea unei imagini.

align

border height hspace ismap longdesc usemap vspace width

7.4. Aplica ie practic n continuare vom prezenta modul de inserare i de formatare a unor imagini, astfel c vom crea un nou fiier numit test6.html care va con ine urmtoarele linii de cod: <HTML> <HEAD> <TITLE>Inserarea si formatarea unor imagini</TITLE> </HEAD> <BODY> <P>O imagine in text

<IMG SRC="http://html.webmarketclub.com/teste/computer.jpg" ALT="imaginea 2" ALIGN="middle" HEIGHT="55" WIDTH="55" BORDER="5"> aliniata pe verticala la mijloc (middle), redimensionata, dimensiunile fiind controlate de atributele "height" si "width", si cu margine (border) de 5 pixeli.</P> <P ALIGN="justify">Iata un text, cu imagini redimensionate, aliniate una la stanga si una la dreapta, una cu spatiere laterala si una cu spatiere verticala.<IMG SRC="computer.jpg" ALT="imaginea 3" ALIGN="left" HEIGHT="65" WIDTH="55" HSPACE="30"> <IMG SRC="computer.jpg" ALT="imaginea 3" ALIGN="right" HEIGHT="65" WIDTH="55" VSPACE="20"> Iata un text, cu imagini redimensionate, aliniate una la stanga si una la dreapta, una cu spatiere laterala si una cu spatiere verticala. Iata un text, cu imagini redimensionate, aliniate una la stanga si una la dreapta, una cu spatiere laterala si una cu spatiere verticala. Iata un text, cu imagini redimensionate, aliniate una la stanga si una la dreapta, una cu spatiere laterala si una cu spatiere verticala. Iata un text, cu imagini redimensionate, aliniate una la stanga si una la dreapta, una cu spatiere laterala si una cu spatiere verticala.</P> </BODY> </HTML> Rezultatul afiat va fi urmtorul:

7.5. Folosirea imaginilor ca link-uri A devenit o mod nlocuirea link-urilor de tip text cu link-uri de tip imagine sau pictogram (icon). De exemplu, a devenit o practic uzual nlocuirea textului next cu o pictogram simboliznd o sgeat orientat spre dreapta sau cu o pictogram reprezentnd o mn cu arttorul indicnd spre dreapta. n mod obinuit, o imagine plasat n interiorul unei ancore (adic ntre tag-urile <A> i </A>) devine o parte a con inutului ancorei, astfel nct un click pe imaginea respectiv va avea acelai rezultat ca i un click pe textul unei ancore. Browser-ele pot modifica imaginile ntr-un mod speciale (de obicei adugndu-le o bordur) pentru a indica faptul c reprezint un link. Sintaxa folosirii acestor tag-uri este urmtoarea: <A HREF="document.html"> <IMG SRC="imagine.gif" BORDER="pixeli" WIDTH="pixeli" HEIGHT="pixeli" ALT="Text alternativ"> </A> Standardul HTML ofer posibilitatea s include i mai multe link-uri ntr-o singur imagine, astfel nct dac da i click n zone diferite ale imaginii, vor fi accesate link-uri diferite. Imaginile de acest tip sunt cunoscute sub numele de imagini-hart (image maps).

Exist dou posibilit i de a crea astfel de imagini-hart: 1. prin folosirea atributului ismap n tag-ul <IMG> sunt create imaginile de tip server-side image map 2. prin folosirea atributului usemap n tag-ul < IMG > sunt create imaginile de tip client-side image map Deoarece pentru imaginile de tip server-side image map este necesar accesul la serverul pe care se afl stocat imaginea, precum i faptul c sunt generate ntrzieri la ncrcarea paginilor, ne vom ocupa numai de imaginile client-side image map care nu prezint aceste neajunsuri. 7.6. Imagini de tip client-side image map Aceste imagini sunt create prin folosirea atributului usemap n elementul < IMG > i definite prin elementele speciale marcate de tag-urile <MAP> i <AREA> (se folosesc numai mpreun, elementul <AREA> fiind ntotdeauna inclus n elementul <MAP>). Tag-ul <MAP> definete o imagine ca fiind de tip hart, iar tag-ul <AREA> specific coordonatele zonelor imaginii-hart, precum i link-urile corespunztoare fiecrei zone. Atributul usemap preia valoarea atributelor id sau name (n func ie de browser), stabilite n tag-ul <MAP>. Trebuie amintit faptul c doar tag-ul <MAP> necesit tag-ul de nchidere </ MAP>. Atributele op ionale care definesc tag-ul <MAP> sunt: Atribut id name Valoare nume_hart nume_hart Descriere Atribuie o denumire imaginii-hart Este identic cu id, se folosete doar pentru a asigura compatibilitatea cu anumite browsere

Atributele op ionale care definesc tag-ul <AREA> sunt:

Atribut alt shape

Valoare text

Descriere Specific o descriere alternativ a zonei active

coords

rect sau rectangle Definete tipul de zon (dreptunghi, circ sau circle cerc sau poligon) poly sau polygon dac shape="rect" atunci coords="stnga,sus,dreapta,jos" dac shape="circ" atunci Specific coordonatele zonei active coords="centru_x,centru_y,raz" dac shape="poly" atunci coords="x1,y1,x2,y2,..,xn,yn" URL true false _blank _parent Specific URL-ul int al zonei Exclude o zon din hart URL-ul int se va deschide ntr-o nou fereastr (este implicit, deci poate fi i nespecificat) URL-ul int se va deschide n fereastra curent URL-ul int se va deschide n acelai cadru din care s-a dat click URL-ul int se va deschide n cadrul printe

href nohref

target _self _top

7.7. Aplica ie practic n continuare vom prezenta modul de utilizare a unei imagini-hart, astfel c vom crea un nou fiier numit test7.html care va con ine urmtoarele linii de cod: <HTML> <HEAD> <TITLE>Utilizarea unei imagini-harta</TITLE> </HEAD> <BODY> <P>Dati click pe una din formele geometrice:</P> <IMG SRC="http://html.webmarketclub.com/teste/imagine-harta.gif" WIDTH="268" HEIGHT="95 "ALT="Imagine de tip harta" USEMAP="#harta"> <MAP ID="harta" NAME="harta"> <AREA SHAPE="rect" COORDS="0,0,65,95" HREF="http://html.webmarketclub.com/teste/dreptunghi.html" TARGET="_blank" ALT="Dreptunghi">

<AREA SHAPE="circle" COORDS="125,47,40" HREF="http://html.webmarketclub.com/teste/cerc.html" TARGET="_blank" ALT="Cerc"> <AREA SHAPE="poly" COORDS="185,25,224,1,224,1,268,25,268,72,226,93,185,71" HREF="http://html.webmarketclub.com/teste/hexagon.html" TARGET="_blank" ALT="Hexagon"> </MAP> </BODY> </HTML> Rezultatul afiat va fi urmtorul:

Not: Pentru aflarea coordonatelor formelor geometrice am folosit un program specializat Mapedit (este un program shareware, poate fi folosit pentru testare numai 30 de zile i poate fi descrcat la adresa http://www.boutell.com/mapedit)

CAP. 8. TABELE 8.1. Ce sunt tabelele? Un tabel reprezint un ansamblu de date (cifre, simboluri, informa ii) afiate n celule sistematizate ntr-o structur format din rnduri i coloane. n afar de rolul de afia date, n HTML au i un rol important n realizarea aspectului general al documentului web. Celula unui tabel poate con ine oricare din elementele HTML acceptate n sec iunea BODY, aceasta incluznd texte, imagini, formulare, antete i chiar alte tabele. Pentru a marca prezen a unui tabel se folosete tag-ul de deschidere <TABLE>. Acesta necesit tag-ul de nchidere </TABLE>. Elementul <TABLE> are urmtoarele sub-elemente: - Rndul tabelului (Table Row) marcat de tag-urile <TR> </TR> (prezen a sa este obligatorie) - Datele tabelului (Table Data) marcate de tag-urile <TD> </TD> (prezen a sa este obligatorie) - Antetul rndurilor i coloanelor (Table Header) marcat de tag-urile <TH> </TH> - Coloana (Column) marcat de tag-ul <COL> ce nu necesit tag de nchidere - Descrierea tabelului marcat de tag-urile <CAPTION> </CAPTION> - Sec iunea antetului tabelului (Table Header Section) marcat de tag-urile <THEAD> </THEAD> - Sec iunea corpului tabelului (Table Body Section) marcat de tag-urile <TBODY> </TBODY> - Sec iunea subsolului tabelului (Table Footer Section) marcat de tag-urile <TFOOT> </TFOOT> Formatarea tabelului se face ncepnd de sus n jos i de la stnga la dreapta, fiind definite, secven ial, antetul i datele fiecrei celule din fiecare coloan, progresnd n jos, rnd cu rnd. Un exemplu con innd cod HTML referitor la tabele, este urmtorul: <TABLE BORDER="1"> <TR> <TH>Antetul Coloanei 1 </TH> <TH>Antetul Coloanei 2 </TH> </TR> <TR> <TD>Rndul 1 - Coloana 1</TD> <TD>Rndul 1 - Coloana 2</TD> </TR> <TR> <TD>Rndul 2 - Coloana 1</TD> <TD>Rndul 2 - Coloana 2</TD> </TR> <TR>

<TD>Rndul 3 - Coloana 1</TD> <TD>Rndul 3 - Coloana 2</TD> </TR> </TABLE> Rezultatul va fi urmtorul:

8.2. Formatarea tabelelor Aa cum am amintit i anterior, tabelele sunt de mare ajutor n realizarea aspectului general al unui document web. Ele v permit punerea n eviden a anumitor obiecte din document i sunt foarte utile la crearea formularelor, aspect pe care l vom aborda n capitolul urmtor. Principalele atribute care v permit formatarea elementului <TABLE> sunt urmtoarele: Atribut align background bgcolor border cellpadding cellspacing Valoare left center right nume fiier rgb(x,x,x) #xxxxxx colorname pixels pixels % pixels % void above below vsides Descriere Precizeaz modul de aliniere al tabelului n document. O imagine folosit ca fundal pentru tabel. Precizeaz culoarea fundalului tabelului. Definete grosimea bordurii din tabel (dac nu se dorete bordur, aceasta ia valoarea 0 sau nu se specific) Specific spa iul dintre marginile fiecrei celule i con inutul su. Specific spa iul dintre celule. Are efect numai cnd atributul border> 0 i specific care pr i ale bordurii sunt vizibile: - nici o parte - numai partea de sus - numai partea de jos - numai pr ile de sus i de jos

frame

hsides lhs rhs box border none groups rows cols all summary width text % pixels

rules

- numai pr ile laterale - numai partea din stnga - numai partea din dreapta - toate cele patru pr i - toate cele patru pr i Specific asupra cror grupe de celule se aplic regulile referitoare la bordur: - nici o regul (este implicit) - regulile se aplic grupelor de rnduri sau de coloane - regulile se aplic numai rndurilor - regulile se aplic numai coloanelor - regulile se aplic tuturor celulelor Specific o descriere mai detaliat a tabelului Specific l imea ocupat de tabel n cadrul paginii web (n cazul n care nu se specific, l imea va depinde de con inutul tabelului)

S presupunem c dorim s afim n documentul nostru orarul desfurrii anumitor cursuri. Tabelul va con ine zilele de desfurare (ca antete de coloan), orele de desfurare (ca antete de rnduri) i denumirea cursurilor. Pentru aceasta vom crea test8.html care va con ine urmtoarele linii de cod: <HTML> <HEAD> <TITLE>Formatarea tabelelor</TITLE> </HEAD> <BODY> <TABLE><CAPTION>Orar (fara bordura aliniat la stanga) </CAPTION> <TR> <TH>&nbsp;</TH> <TH>Luni</TH> <TH>Miercuri</TH> <TH>Vineri</TH> </TR> <TR> <TH>10-12</TH> <TD>Curs HTML</TD> <TD>Curs PHP</TD> <TD>Curs JavaScript</TD> </TR> <TR> <TH>12-14</TH> <TD>Curs JavaScript</TD> <TD>Curs PHP</TD> <TD>Curs HTML</TD>

</TR> <TR> <TH>14-16</TH> <TD>Curs JavaScript</TD> <TD>Curs PHP</TD> <TD>Curs HTML</TD> </TR> </TABLE> </BODY> </HTML> Rezultatul va fi urmtorul:

Not: HTML nu accept celule goale, aa c a trebuit s crem o celul care con ine caracterul &nbsp; Vom aduga tabelului nostru o bordur i l vom alinia pe centrul paginii. Pentru aceasta vom aduga elementului <TABLE> urmtoarele atribute: <TABLE border="1" align="center"><CAPTION>Orar (cu bordura aliniat la centru) </CAPTION> i rezultatul va fi urmtorul:

n continuare vom ngroa pu in bordura, vom aduga un fundal galben tabelului i i vom mri l imea, astfel nct s acopere ntreaga fereastr. Aceasta se realizeaz astfel: <TABLE border="5" align="center" bgcolor="yellow" width="100%"> <CAPTION>Orar (cu bordura de 5 pixeli, cu fundal galben, aliniat la centru) </CAPTION> iar rezultatul va fi urmtorul:

n loc de o singur culoare putem folosi o imagine ca fundal. Pentru aceasta vom nlocui atributul bgcolor cu background i vom specifica denumirea fiierului de tip imagine: <TABLE border="5" align="center" background="fundal.gif" width="100%"> <CAPTION>Orar (cu bordura de 5 pixeli, cu imagine pe fundal, aliniat la centru) </CAPTION> iar vom ob ine urmtorul rezultat:

S ne ocupm i de spa ierea dintre celule dnd atributului cellspacing valoarea 10 (implicit acesta are valoarea 0). <TABLE border="1" align="center" cellspacing="10" <CAPTION>Orar (cu spatiu intre celule de 10 pixeli) </CAPTION> Rezultatul va fi urmtorul: width="100%">

Mrirea sau micorarea spa iului dintre pere ii unei celule i con inutul su se realizeaz prin alocarea unor valori corespunztoare atributului cellpadding, astfel: <TABLE border="1" align="center" cellpadding="10" width="100%"> <CAPTION>Orar (cu spatiu in interiorul celulelor de 10 pixeli) </CAPTION> iar rezultatul va fi urmtorul:

Iat i o combina ie a atributelor folosite pn acum: <TABLE border="5" align="center" bgcolor ="yellow" cellpadding="10" cellspacing="10" width="100%"> <CAPTION>Orar (cu bordura de 5 pixeli, fundal galben si spatiu atat in interiorul celulelor cat si intre celule de 10 pixeli) </CAPTION> ce va avea urmtorul rezultat:

n continuare vom vedea ce efecte se ob in prin folosirea atributelor frame i rules. Aceste dou atribute sunt strns legate de folosirea atributului border, prin urmare vor fi utilizate toate 3 concomitent. De exemplu: <TABLE border="1" rules="none" frame="box"> <CAPTION>Orar</CAPTION> va avea ca efect ob inerea unui tabel fr bordur n interior:

Pentru a ob ine un tabel fr bordur exterioar, ci numai cu cele interioare, vom da urmtoarele valori: <TABLE border="1" rules="all" frame="void"> i vom rezultatul va fi:

n func ie de necesit i, pute i combina aceste atribute pentru a ob ine rezultatele dorite. 8.3. Sub-elementele tabelelor n continuare vom analiza fiecare sub-element al tabelelor i atributele sale.

Aa cum a i putut vedea mai sus, fiecare tag <TR> desemneaz un rnd ntr-un tabel. Fiecare rnd poate con ine unul sau mai multe elemente <TD> sau <TH>. Din punct de vedere tehnic, tag-ul </TR> este op ional, dar folosirea lui v ajut la eliminarea confuziilor. Principalele atribute care v permit formatarea acestui element sunt urmtoarele: Atribut Valoare left center right justify char top middle bottom baseline rgb(x,x,x) #xxxxxx colorname Descriere Precizeaz modul de aliniere pe orizontal a con inutului.

Align

Valign

Precizeaz modul de aliniere pe vertical a con inutului. Precizeaz culoarea fundalului unui rnd ntreg.

bgcolor

Pentru exemplificare, vom folosi fiierul creat anterior, i anume test8.html, n care vom include: <HTML> <HEAD> <TITLE>Formatarea tabelelor</TITLE> </HEAD> <BODY> <TABLE BORDER="1"> <TR BGCOLOR="cyan"> <TH>&nbsp;</TH> <TH>Luni</TH> <TH>Miercuri</TH> <TH>Vineri</TH> </TR> <TR ALIGN="left" VALIGN="middle"> <TH>10-12</TH> <TD>Curs HTML</TD> <TD><FONT SIZE="6">Curs PHP</FONT></TD> <TD>Curs JavaScript</TD> </TR> <TR ALIGN="center" VALIGN="bottom"> <TH>12-14</TH> <TD>Curs JavaScript</TD> <TD><FONT SIZE="6">Curs MySQL</FONT></TD> <TD>Curs HTML</TD>

</TR> <TR ALIGN="right" VALIGN="baseline"> <TH>14-16</TH> <TD>Curs JavaScript</TD> <TD><FONT SIZE="6">Curs MySQL</FONT></TD> <TD>Curs HTML</TD> </TR> </TABLE> </BODY> </HTML> Rezultatul va fi urmtorul:

Dac celelalte atribute produc efecte vizibile, consider c trebuie oferite cteva explica ii suplimentare privind deosebirea ntre alinierea vertical BOTTOM i BASELINE. Alinierea BOTTOM se face dup cea mai de jos cot a caracterelor, n vreme ce alinierea BASELINE are ca punct de reper baza textului, dup cum se poate vedea n imaginea de mai jos:

Mai departe ne vom ocupa de tag-ul <TD> care desemneaz o celul ce con ine date ntr-un tabel.

Principalele atribute care v permit formatarea acestui elementului sunt urmtoarele: Atribut Valoare left center right justify char top middle bottom baseline rgb(x,x,x) #xxxxxx colorname nume fiier % pixels % pixels numr numr nowrap Descriere Precizeaz modul de aliniere pe orizontal a con inutului.

align

valign

Precizeaz modul de aliniere pe vertical a con inutului. Precizeaz culoarea fundalului celulei. O imagine folosit ca fundal pentru celul. Specific nl imea ocupat de celul n cadrul tabelului (n cazul n care nu se specific, nl imea va depinde de con inutul celulei) Specific l imea ocupat de celul n cadrul tabelului (n cazul n care nu se specific, l imea va depinde de con inutul celulei) Indic numrul de celule din tabel care vor fi unite pe o coloan. Indic numrul de celule din tabel care vor fi unite pe un rnd. Se folosete pentru a dezactiva ajustarea textului la l imea unei celule (func ioneaz numai dac n-a fost definit valoarea atributului "width").

bgcolor background height width colspan rowspan nowrap

Pentru exemplificare, vom folosi fiierul creat anterior, i anume test8.html, n care vom include: <HTML> <HEAD> <TITLE>Formatarea tabelelor</TITLE> </HEAD> <BODY> <TABLE BORDER="1"> <TR> <TH>&nbsp;</TH> <TH>Luni</TH> <TH>Miercuri</TH> <TH>Vineri</TH>

</TR> <TR> <TH WIDTH="40">10-12</TH> <TD BGCOLOR="cyan">Curs HTML</TD> <TD>Curs JavaScript</TD> <TD ROWSPAN="3" BACKGROUND="fundal.gif" NOWRAP="nowrap"><B>Orict de mare ar fi continutul acestei celule, <BR>textul nu va trece pe rndul urmtor fr folosirea<BR> tag-ului BR care execut ruperea rndului. </TD> </TR> <TR> <TH>12-14</TH> <TD COLSPAN="2" ALIGN="center" HEIGHT="60">Curs JavaScript</TD> </TR> <TR> <TH>14-16</TH> <TD ALIGN="right">Curs JavaScript</TD> <TD BGCOLOR="orange">Curs HTML</TD> </TR> </TABLE> </BODY> </HTML> Rezultatul va fi urmtorul:

Not: Exist numeroase probleme legate de modul n care browsere diferite interpreteaz atributul width, rezultatul afiat putnd diferi foarte mult de la caz la caz. Dac totui considera i util folosirea acestui atribut, recomandarea noastr e s-l

defini i pentru fiecare celul n parte concomitent cu definirea acestuia pentru ntregul tabel, astfel nct suma valorilor alocate celulelor s corespund cu valoarea alocat tabelului. Referitor la tag-ul <TH> v vom spune doar c func ioneaz aproape identic cu tagul <TD>, avnd aceleai atribute, cu excep ia faptului c <TH> specific unei celule c este antet pentru un rnd sau pentru o coloan, con inutul de tip text fiind automat ngroat. Sub-elementul Coloan marcat de tag-ul <COL> definete valorile atributelor pentru una sau mai maulte coloane ale unui tabel. Se poate folosi numai n interiorul tagului <TABLE>, dar nainte de oricare dintre tag-urile <TR>, <THEAD> sau <TBODY>. Fiecare tag <COL> utilizat definete propriet ile unei singure coloane, exceptnd cazul n care nu este utilizat atributul span pentru a indica mai multe coloane. Deci, primul tag <COL> definete propriet ile primei coloane, al doilea tag <COL> definete propriet ile celei de-a doua coloane etc. Atributele care permit formatarea sub-elementului <COL> sunt urmtoarele:

Atribut align

Valoare left center right justify top middle bottom baseline rgb(x,x,x) #xxxxxx colorname % pixels numr

Descriere Precizeaz modul de aliniere al datelor n coloan.

valign

Precizeaz modul de aliniere pe vertical a con inutului n coloan. Precizeaz culoarea fundalului coloanei. Specific l imea ocupat de coloan n cadrul tabelului. Precizeaz numrul de coloane crora le sunt definite propriet ile.

bgcolor width span

Pentru exemplificare, vom folosi fiierul test8.html, care va con ine urmtoarele: <HTML> <HEAD> <TITLE>Formatarea tabelelor</TITLE> </HEAD> <BODY> <TABLE border="1"> <COL> <COL valign="top" bgcolor="yellow" span="2"> <COL align="right" width="120">

<TR> <TH>&nbsp;</TH> <TH>Luni</TH> <TH>Miercuri</TH> <TH>Vineri</TH> </TR> <TR> <TH>10-12</TH> <TD>Curs HTML</TD> <TD>Curs PHP</TD> <TD>Curs JavaScript</TD> </TR> <TR> <TH>12-14</TH> <TD>Curs JavaScript</TD> <TD>Curs MySQL</TD> <TD>Curs HTML</TD> </TR> <TR> <TH>14-16</TH> <TD>Curs JavaScript</TD> <TD>Curs MySQL</TD> <TD>Curs HTML</TD> </TR> </TABLE> </BODY> </HTML> Rezultatul va fi urmtorul:

Not: Observa i folosirea tag-ului <COL> fr nici un atribut pnetru prima coloan. n cazul n care dorim s folosim acest tag numai pentru o anumit coloan, atunci trebuie folosit pentru toate coloanele precedente, chiar dac nu produce nici o modificare a formatrii con inutului.

Ne vom referi pu in i la tag-ul <CAPTION> pe care l-am folosit chiar de la primul exemplu. Vom preciza faptul c are un singur atribut, i anume align care poate lua valorile left, right, top i bottom care indic locul n care va fi pozi ionat descrierea tabelului. De asemenea, nu vom insista nici asupra elementelor <THEAD>, <TBODY> i <TFOOT> datorit folosirii lor extrem de rar, n principal din cauza incompatibilit ii cu diverse browsere, dar i a faptului c folosirea lor nu aduce foarte multe avantaje utilizatorului. Atributele lor sunt urmtoarele: Atribut Valoare left center right justify char top middle bottom baseline rgb(x,x,x) #xxxxxx colorname Descriere Precizeaz modul de aliniere pe orizontal a con inutului.

align

valign

Precizeaz modul de aliniere pe vertical a con inutului. Precizeaz culoarea fundalului unei sec iuni ntregi.

bgcolor

Pentru exemplificare am ales urmtoarele linii de cod: <HTML> <HEAD> <TITLE>Formatarea tabelelor</TITLE> </HEAD> <BODY> <TABLE border="1"> <THEAD valign="top" bgcolor="yellow"> <TR> <TH>&nbsp;</TH> <TH>Luni</TH> <TH>Miercuri</TH> <TH>Vineri</TH> </TR> </THEAD> <TBODY align="center" bgcolor="cyan"> <TR> <TH>10-12</TH> <TD>Curs HTML</TD> <TD>Curs PHP</TD>

<TD>Curs JavaScript</TD> </TR> <TR> <TH>12-14</TH> <TD>Curs JavaScript</TD> <TD>Curs MySQL</TD> <TD>Curs HTML</TD> </TR> <TR> <TH>14-16</TH> <TD>Curs JavaScript</TD> <TD>Curs MySQL</TD> <TD>Curs HTML</TD> </TR> </TBODY> <TFOOT> <TR> <TH colspan="4">Prof. Ion Popescu</TH> </TR> </TFOOT> </TABLE> </BODY> </HTML> Rezultatul va fi urmtorul:

8.4. Aplica ie practic n continuare vom pune n practic cele prezentate n acest capitol, combinnd (att ct se poate) elementele prezentate:

<HTML> <HEAD> <TITLE>Formatarea tabelelor</TITLE> </HEAD> <BODY> <TABLE border="5" cellpadding="5" cellspacing="15" bgcolor="#F5F5DC"> <CAPTION align="bottom"> Orarul cursurilor pentru programatori Web</CAPTION> <COL align="center" bgcolor="cornsilk"> <COL align="center" width="120" span="3" bgcolor="bisque"> <THEAD><TR bgcolor="#FFFFEE"><TH colspan="4">Curs programatori Web </TH></TR></THEAD> <TBODY><TR bgcolor="cornsilk"> <TH>Ora</TH> <TH>Luni</TH> <TH>Miercuri</TH> <TH>Vineri</TH> </TR> <TR> <TH>10-12</TH> <TD>Curs HTML</TD> <TD>Curs PHP</TD> <TD>Curs JavaScript</TD> </TR> <TR> <TH>12-14</TH> <TD>Curs JavaScript</TD> <TD rowspan="2">Curs MySQL</TD> <TD>Curs PHP</TD> </TR> <TR> <TH height="50">14-16</TH> <TD>Curs PHP</TD> <TD>Curs HTML</TD> </TR></TBODY> <TFOOT><TR bgcolor="#FFFFEE"><TD colspan="4" align="right"><FONT color="#8B0000"><B>Conferentiar prof. Ion Popescu </B> </FONT></TD></TR></TFOOT> </TABLE> </BODY> </HTML> Rezultatul va fi urmtorul:

CAP. 9. CADRE 9.1. No iuni generale Cadrele v permit divizarea ferestrei browser-ului n mai multe zone dreptunghiulare, dispuse pe rnduri i/sau coloane, fiecare dintre acestea con innd un document web diferit. Fiecare astfel de zon poart denumirea de cadru (frame). Cadrele sunt foarte populare deoarece reprezint cea mai simpl modalitate de a realiza un document ce con ine pr i statice i pr i variabile (care se pot schimba). O pagin ce con ine cadre reprezint de fapt un document cu mai multe pagini, fiecare cadru con innd o pagin web. n afar de acestea, mai exist un document web care descrie modul n care va fi mpr it pagina n cadre. De exemplu, pentru a crea un document cu dou cadre (unul n stnga i unul n dreapta) este nevoie de trei documente web. n imaginea de mai jos sunt reprezentate aceste documente aa cum sunt ele afiate de browsere.

n acest exemplu, doc.html reprezint documentul care descrie modul n care fereastra browser-ului va fi divizat n cele dou zone dreptunghiulare marcate prin cadrele ce con in celelalte dou documente web. 9.2. Structura unei pagini ce definete cadre Definirea cadrelor se realizeaz prin folosirea elementului <FRAMESET> ce se plaseaz ntr-un document web n locul elementului <BODY>.

Elementul <FRAMESET> descrie modul n care fereastra browser-ului va fi mpr it, mai exact stabilete numrul i dimensiunile cadrelor (zonelor dreptunghiulare) dispuse pe rnduri i/sau coloane. Necesit tag de nchidere </FRAMESET> Atributele acestui element sunt legate de existen a rndurilor sau coloanelor, precum i de modul de delimitare a acestora unele de altele: Atribut cols rows frameborder framespacing sau border bordercolor Valoare pixels % * pixels % * yes / no 1/0 pixels rgb(x,x,x) #xxxxxx colorname Descriere Definete numrul i mrimea coloanelor ntr-un document. Definete numrul i mrimea rndurilor ntr-un document. Stabilete dac exist sau nu bordur pentru cadre Stabilete grosimea bordurii cadrelor (framespacing n Internet Explorer i border n Netscape). Precizeaz culoarea bordurii cadrelor.

n interiorul elementului <FRAMESET> este elementul <FRAME>, cte unul pentru fiecare cadru, care are rolul de a stabili documentele corespunztoare fiecruia dintre cadre. Pentru exemplificare vor crea un document cu dou cadre dispuse vertical. n acest sens vor trebui create cele trei documente corespunztoare. Vom crea fiierul doc1.html, corespunztor cadrului 1, cu urmtoarea structur: <HTML> <HEAD> <TITLE>Documentul 1</TITLE> </HEAD> <BODY BGCOLOR="cyan"> <H3>Documentul 1 in cadrul 1</H3> </BODY> </HTML> Vom crea i fiierul doc2.html, corespunztor cadrului 2, cu urmtoarea structur: <HTML> <HEAD> <TITLE>Documentul 2</TITLE> </HEAD> <BODY BGCOLOR="yellow"> <H3>Documentul 2 in cadrul 2</H3>

</BODY> </HTML> n final vom crea fiierul test9.html, care va stabili dispunerea cadrelor, cu urmtoarea structur: <HTML> <HEAD> <TITLE>Folosirea cadrelor</TITLE> </HEAD> <FRAMESET COLS="40%,60%"> <FRAME SRC="doc1.html"> <FRAME SRC="doc2.html"> </FRAMESET> </HTML> Rezultatul afiat va fi urmtorul:

xxxxx n cazul n care dorim ca cele dou cadre s fie dispuse orizontal, fiierul test9.html va avea urmtoarea structur: <HTML> <HEAD> <TITLE>Folosirea cadrelor</TITLE> </HEAD> <FRAMESET ROWS="30%,70%"> <FRAME SRC="doc1.html"> <FRAME SRC="doc2.html"> </FRAMESET>

</HTML> iar rezultatul afiat va fi urmtorul:

Pentru realizarea unei structuri combinate, cu trei cadre, dintre care unul pe orizontal i dou pe vertical, vom crea fiierul doc3.html, corespunztor cadrului 3, cu urmtoarea structur: <HTML> <HEAD> <TITLE>Documentul 3</TITLE> </HEAD> <BODY BGCOLOR="beige"> <H3>Documentul 3 in cadrul 3</H3> </BODY> </HTML> iar fiierul test9.html va avea urmtoarea structur: <HTML> <HEAD> <TITLE>Folosirea cadrelor</TITLE> </HEAD> <FRAMESET ROWS="30%,70%"> <FRAME SRC="doc1.html"> <FRAMESET COLS="30%,70%"> <FRAME SRC="doc2.html"> <FRAME SRC="doc3.html"> </FRAMESET> </FRAMESET> </HTML>

Rezultatul afiat va fi urmtorul:

n final vom analiza i atributele ce definesc bordura, astfel c vom folosi urmtoarele exemple: <HTML> <HEAD> <TITLE>Folosirea cadrelor</TITLE> </HEAD> <FRAMESET ROWS="30%,70%" FRAMEBORDER="yes" FRAMESPACING="15" BORDERCOLOR="blue"> <FRAME SRC="doc1.html"> <FRAMESET COLS="30%,70%"> <FRAME SRC="doc2.html"> <FRAME SRC="doc3.html"> </FRAMESET> </FRAMESET> </HTML> Rezultatul afiat va fi urmtorul:

Pentru eliminarea bordurilor, atributele frameborder i framespacing vor primi valoarea 0, iar rezultatul afiat va fi urmtorul:

9.3. Atributele cadrelor Elementul <FRAME> definete fiecare cadru dintr-un document. Este obligatorie prezen a acestui element n fiecare sec iune marcat de tag-ul <FRAMESET>. Nu necesit tag de nchidere. Atributele ce caracterizeaz acest element sunt urmtoarele: Atribut src frameborder longdesc marginheight marginwidth noresize scrolling name Valoare URL yes / no 1/0 URL pixels pixels noresize yes no auto text _blank _self _parent _top Descriere Reprezint link-ul ctre fiierul ce se va deschide n cadrul respectiv.. Stabilete dac exist sau nu bordur pentru cadrul respectiv. Reprezint link-ul ctre o descriere lung folosit pentru browserele ce nu suport cadre. Definete marginile de sus i de jos ale cadrului. Definete marginile din stnga i din dreapta ale cadrului. Cnd este setat, acest atribut mpiedic ajustarea mrimii cadrului de ctre utilizatori. Determin prezen a sau absen a barei de derulare (scrollbar). Definete denumirea cadrului. Specific unde va deschis URL-ul int: _blank ntr-o fereastr nou; _self n acelai cadru din care a fost accesat; _parent n cadrul printe; _top - direct n fereastra browser-ului, lund locul documentului existent.

target

Pentru a observa efectele acestor atribute, ne vom folosi de fiierul test9.html cu urmtoarea structur: <HTML> <HEAD> <TITLE>Folosirea cadrelor</TITLE> </HEAD> <FRAMESET ROWS="30%,70%"> <FRAME SRC="doc1.html"> <FRAMESET COLS="30%,70%"> <FRAME SRC="doc2.html"> <FRAME SRC="doc3.html"> </FRAMESET>

</FRAMESET> </HTML> Atributul src a fost folosit n exemplele anterioare, prin urmare nu vom insista asupra lui. Vom aduga atributul frameborder="no" cadrului nr. 2 (<frame src="doc2.html" frameborder="no">) i ve i observa diferen a: Cadrul 2 cu bordur Cadrul 2 fr bordur

n continuare vom aduga i atributul marginheight cadrului nr. 2 (<frame src="doc2.html" frameborder="no" marginheight="0">) pentru a pune n eviden modul n care se modific marginile de sus i de jos ale cadrului: Cadrul 2 cu margini implicite Cadrul 2 fr margini sus i jos

Adugnd i atributul marginwidth cadrului nr. 2 (<frame src="doc2.html" frameborder="no" marginheight="25" marginwidth="25">) vom pune n eviden modul n care se modific marginile din stnga i din dreapta ale cadrului: Cadrul 2 cu margini implicite Cadrul 2 cu margini de 25 pixeli

Pentru a pune n eviden atributul noresize, mai nti ncerca i s pozi iona i cursorul de la mouse pe bordura dintre cadre, dup care, n momentul n care v apare semnul " ", innd apsat pe butonul din stnga de la mouse, muta i bordura ce separ cadrele:

Aplicnd atributul noresize (<frame src="doc2.html" noresize>), facilitatea de redimensionare a cadrelor va fi dezactivat, prin urmare nu va mai aprea semnul " ", ci doar cursorul normal al mouse-ului, ca n imaginea de mai jos.

Atributul scrolling v permite afiarea barei de derulare n fiecare cadru. Valoarea implicit este auto, caz n care, n func ie de mrimea con inutului, browser-ul va decide dac este necesar afiarea barei de derulare. n cazul atribuirii valorii yes, bara de derulare va fi afiat ntotdeauna, iar n cazul atribuirii valorii no, bara de derulare nu va fi afiat deloc. Pentru exemplificare, vom aduga con inut celor trei documente ce populeaz cadrele, i anume doc1.hml, doc2.hml i doc2.hml.

Prin folosirea atributului name, cadrelor le pot fi atribuite denumiri, ceea ce va poate ajuta la identificarea mai usoara a acestora. 9.4. Destina ii Cnd crea i link-uri ntr-un document web ce con ine cadre, este necesar folosirea unui atribut suplimentar denumit target. Acesta este corelat cu atributul name prezentat anterior. Atributul target care poate aprea n urmtoarele elemente <A>, <AREA>, <BASE> i <FORM>. Exemple: <A HREF="file.htm" TARGET="nume_fereastra"> <AREA SHAPE="RECT" COORDS="5,6,2,4" HREF="file.html" TARGET="nume_fereastra"> <BASE TARGET="nume_fereastra"> <FORM ACTION="cgi-bin/script" TARGET="nume_fereastra"> Valorile posibile pentru atributul target sunt: a) numele (valoarea atributului name) unei ferestre deschise de browser sau numele (valoarea atributului name) unui cadru ncrcat de browser b) una din urmtoarele 4 inte speciale, ce nu pot fi atribuite atributului name, fiind denumiri rezervate cu func ii specifice: TARGET="_blank" (documentul va fi ncrcat ntr-o fereastr nou a browser-ului); TARGET="_top" (documentul va fi ncrcat direct n fereastra browser-ului, lund locul documentului existent); TARGET="_parent" (documentul va fi ncrcat n fereastra/setul de cadre printe); TARGET="_self" (documentul va fi ncrcat n acelai cadru); Pentru exemplificare, vom folosi fiierul test9.html cu urmtoarea structur: <HTML> <HEAD> <TITLE>Folosirea cadrelor</TITLE> </HEAD> <FRAMESET ROWS="15%,85%"> <FRAME SRC="doc1.html" NAME="sus"> <FRAMESET COLS="70%,30%"> <FRAME SRC="doc2.html"> <FRAME SRC="doc3.html" NAME="dreapta"> </FRAMESET> </FRAMESET> </HTML>

Vom folosi fiierul doc1.html, corespunztor cadrului 1, cu urmtoarea structur: <HTML> <HEAD> <TITLE>Documentul 1</TITLE> </HEAD> <BODY BGCOLOR="cyan"> <H3>Documentul 1 in cadrul 1</H3> </BODY> </HTML> n fiierul doc2.html vom insera link-uri ctre doc4.html cu destina ii diferite, astfel: <HTML> <HEAD> <TITLE>Documentul 2</TITLE> </HEAD> <BODY BGCOLOR="yellow"> <H3>Documentul 2 in cadrul 2</H3> <P><B>Exemplificare destinatii</B><BR> <A HREF="doc4.html" TARGET="dreapta"> Documentul 4 in cadrul din dreapta</A><BR> <A HREF="doc4.html" TARGET="sus"> Documentul 4 in cadrul de sus</A><BR> <A HREF="doc4.html" TARGET="_self"> Documentul 4 in acelasi cadru din care este accesat link-ul (si anume in Cadrul 2)</A><BR> <A HREF="doc4.html" TARGET="_parent"> Documentul 4 in cadrul parinte</A><BR> <A HREF="doc4.html" TARGET="_top"> Documentul 4 direct in browser (in acest exemplu rezultatul este identic ca la optiunea precedenta)</A><BR> <A HREF="doc4.html" TARGET="_blank"> Documentul 4 intr-o fereastra noua a browser-ului </A> </BODY> </HTML> Fiierul doc3.html, corespunztor cadrului 3, va avea urmtoarea structur: <HTML> <HEAD> <TITLE>Documentul 3</TITLE> </HEAD> <BODY BGCOLOR="beige"> <H3>Documentul 3 in cadrul 3</H3> </BODY>

</HTML> i n final vom crea fiierul doc4.html cu urmtoarea structur: <HTML> <HEAD> <TITLE>Documentul 4</TITLE> </HEAD> <BODY BGCOLOR="pink"> <H3>Documentul 4</H3> <P><A HREF="test9.html" TARGET="_top"> Dati click aici pentru a reveni la documentul initial</A></P> </BODY> </HTML> Rezultatele ob inute vor fi urmtoarele:

Documentul 4 n cadrul din dreapta

Documentul 4 n cadrul de sus

Documentul 4 n acelai cadru din care este accesat link-ul (i anume n Cadrul 2)

Imaginea afiat este identic pentru ultimele 3 op iuni: - Documentul 4 n cadrul parinte - Documentul 4 direct n browser - Documentul 4 ntr-o fereastra nou a browser-ului 9.5. Cadre interioare Cadrele interioare (in-line) sunt cadre ce pot fi inserate oriunde n interiorul unei pagini web (similar elementelor imagine). Pentru a insera un cadru interior, se folosete elementul <IFRAME> ce necesit tag-ul de nchidere </IFRAME>. Acest element folosete toate atributele elementului <FRAME>, cu aceleai efecte (i anume src, frameborder, marginheight, marginwidth, scrolling i name). Existnd similaritatea cu elementele imagine, o serie de atribute, specifice elementelor imagine, pot fi utilizate cu elementul <IFRAME> ob inndu-se aceleai rezultate (i anume width, height, align, hspace i vspace). ntr-o pagin web pot fi adugate oricte cadre interioare sunt necesare. Pentru exemplificare vom modifica doc3.html astfel: <HTML> <HEAD>

<TITLE>Documentul 3</TITLE> </HEAD> <BODY BGCOLOR="beige"> <H3>Documentul 3 in cadrul 3</H3> <IFRAME SRC="doc4.html" ALIGN="center" WIDTH="200" HEIGHT="150" </IFRAME> </BODY> </HTML> Vom ob ine urmtorul rezultat:

9.6. Elementul <NOFRAMES> nainte de a ncheia i acest capitol, trebui s ave i n vedere c nc mai exist oameni care folosesc anumite browsere ce nu suport cadre. n aceste cazuri browserele vor afia pagini goale. Problema aceasta poate fi rezolvat prin inserarea elementului <NOFRAMES> n interiorul elementului <FRAMESET>. n interiorul elementului <NOFRAMES> va trebui s insera i cod HTML obinuit prin care pute i redirec iona vizitatorii paginilor dvs. ctre o variant a site-ului fr cadre

(dac exist), sau pute i s-i aten iona i asupra faptului ca documentul dvs. con ine cadre iar browser-ul lor nu suport aa ceva. De exemplu: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <FRAMESET ROWS="40%,60%" COLS="70%,30%"> <FRAME SRC="doc1.html"> <FRAME SRC="doc2.html"> <FRAME SRC="doc3.html"> <FRAME SRC="doc4.html"> <NOFRAMES> <BODY>Aceast site contine cadre pe care browser-ul dvs. nu le poate interpreta. Puteti vizita o versiune fara cadre a site-ului la adresa . </BODY> </NOFRAMES> </FRAMESET> </HTML> 9.7. Aplica ie practic Pentru a pune n practic cele prezentate n acest capitol, dar si in cele anterioare, vom realiza o structur combinat, cu trei cadre, dintre care unul pe orizontal i dou pe vertical. Astfel, cadrul orizontal va fi alocat titlului (antetului), cel din stnga va fi alocat unui meniu, iar cel din dreapta va prezenta con inutul corespunztor meniului. Structura cadrelor va fi definit n fiierul test_cadre.html ce va avea urmtorul con inut: <HTML> <HEAD> <TITLE>Retete culinare</TITLE> </HEAD> <FRAMESET ROWS="15%,85%"> <FRAME SRC="antet_cadre.html" NAME="antet" SCROLLING="no"> <FRAMESET COLS="30%,70%"> <FRAME SRC="meniu_cadre.html" NAME="meniu"> <FRAME SRC="continut_cadre.html" NAME="retete"> </FRAMESET> <NOFRAMES> <H1>Retete culinare</H1> Browser-ul dvs. nu suporta cadre? Nicio problema! Puteti vedea continutul site-ului nostru in versiunea <A HREF="continut_cadre.html">fara cadre</A>. </NOFRAMES>

</FRAMESET> </HTML> Pentru antet vom crea fiierul antet_cadre.html cu urmtorul con inut: <HTML> <HEAD> <TITLE>Titlu</TITLE> </HEAD> <BODY BGCOLOR="saddlebrown"> <H1><FONT COLOR="white">Retete culinare</FONT></H1> </BODY> </HTML> Pentru meniu vom crea fiierul meniu_cadre.html cu urmtorul con inut: <HTML> <HEAD> <TITLE>Meniu</TITLE> </HEAD> <BODY BGCOLOR="wheat"> <H2>Meniu</H2> <A HREF="continut_cadre.html#Aperitiv din branza de burduf" TARGET="retete">Aperitiv din branza de burduf</A><BR><BR> <A HREF="continut_cadre.html#Ciorba de caprioara cu smantana" TARGET="retete">Ciorba de caprioara cu smantana</A><BR><BR> <A HREF="continut_cadre.html#Friptura de iepure" TARGET="retete">Friptura de iepure</A><BR><BR> <A HREF="continut_cadre.html#Coltunasi dulci cu branza de vaci" TARGET="retete">Coltunasi dulci cu branza de vaci</A> </BODY> </HTML> Continutul va fi cuprins in fiierul continut_cadre.html astfel: <HTML> <HEAD> <TITLE>Continut</TITLE> </HEAD> <BODY BGCOLOR="beige"> <A NAME="Aperitiv din branza de burduf"><H2>Aperitiv din branza de burduf</H2></A> <B>Ingrediente:</B> <UL> <LI>1/2 kg branza de oaie (se poate inlocui cu cas proaspat) <LI>100 ml smantana

<LI>5 sardele <LI>ceapa <LI>chimen <LI>50-100 ml bere </UL> <B>Mod de preparare:</B> <P>Se piseaza branza cu o furculita (daca e cas atunci se da prin masina de tocat). Peste se toarna berea, smantana. Chimenul se macina si se adauga o lingurita fara varf, iar la final sardelele si ceapa rasa. Se amesteca bine bine si se sareaza dupa gust. De preferat sa se serveasca in aceeasi zi.</P> <B>Recomandari:</B> <P>Sa se orneze cu bucatele taiate de gogosari sau masline</P> <BR> <A NAME="Ciorba de caprioara cu smantana"><H2>Ciorba de caprioara cu smantana</H2></A> <B>Ingrediente:</B> <UL> <LI>500 g carne de caprioara <LI>100 g ceapa <LI>100 g morcovi <LI>50 g patrunjel <LI>50 g ulei <LI>75 g orez <LI>250 g rosii <LI>40 ml otet <LI>200 g smantana <LI>2 oua <LI>verdeata <LI>sare </UL> <B>Mod de preparare:</B> <P>Carnea de caprioara se portioneaza si se pune la fiert in apa cu sare. In timpul fierberii se spumeaza cat este nevoie. Ceapa se toaca marunt, se caleste in ulei, se adauga zarzavatul de supa taiat julien si se mai calesc impreuna cateva minute. Se sting cu apa si se pun in ciorba. Cand carnea este aproape fiarta, se pune orezul fiert separat si rosiile curatate de coaja si seminte si taiate cuburi. Smantana se amesteca cu galbenusurile de ou si doua linguri de otet si se adauga la ciorba. Se mai potriveste o data gustul de sare, iar la servit se presara cu verdeata tocata marunt.</P> <BR> <A NAME="Friptura de iepure"><H2>Friptura de iepure</H2></A> <B>Ingrediente:</B> <UL> <LI>1 kg carne de iepure (pulpa) <LI>50 g slanina afumata <LI>50 g unt

<LI>sare </UL> <B>Mod de preparare:</B> <P>Carnea de iepure se sterge cu un stergar, se impaneaza cu slanina afumata, se freaca cu sare, se unge cu unt si se asaza intr-o tava cu restul de unt si putina apa, se da la cuptor si se frige la un foc potrivit. In timpul frigerii se stropeste cu sosul format in tava. Se mananca cu garnituri de legume si salate de sezon.</P> <BR> <A NAME="Coltunasi dulci cu branza de vaci"><H2>Coltunasi dulci cu branza de vaci</H2></A> <B>Ingrediente:</B> <UL> <LI>500 g faina <LI>4 oua <LI>500 g branza de vaci <LI>40 g coaja rasa de lamaie <LI>175 g zahar <LI>sare </UL> <B>Mod de preparare:</B> <P>Din faina, 2 oua, putina sare si putina apa se prepara o coca mai deasa, din care se intinde o foaie si se taie patrate cu latura de 5-7 cm. Branza de vaci se amesteca cu 75 g zahar, 2 oua si coaja de lamaie rasa, se repartizeaza, in mod egal, pe patratele de coca, se indoaie in forma de triunghi si se lipesc bine. Se fierb in apa cu sare, se scurg, se trec printr-un jet de apa rece, se toarna deasupra untul fierbinte si se presara cu restul de zahar. </P> </BODY> </HTML> Rezultatul afiat va fi urmtorul:

CAP. 10. FORMULARE 10.1. No iuni generale Formulare: iat o no iune de care ne lovim tot timpul, pentru c suntem nevoi i s completm formulare din momentul n care ne-am nscut i pn murim. i tot formularele sunt cele care fac cu adevrat din Internet o tehnologie interactiv. Fr aceste formulare, utilizatorul nu ar avea acces dect la anumite resurse statice, predefinite, pe cnd, cu ajutorul formularelor, pot fi introdui anumi i parametri care dau un caracter dinamic Internet-ului. Dar pentru a analiza parametrii introdui n formulare sunt necesare anumite aplica ii care decid cum va ac iona serverul ca rspuns la datele primite. Codul acestor aplica ii poate fi scris n limbaje de programare web precum ASP, JAVA, PHP, JSP etc. care nu fac ns subiectul acestui ghid. Un formular poate con ine unul sau mai multe controale de tipul: casete text (text boxes), casete de parole (password boxes), ascunse (hidden), casete de validare (checkboxes), butoane radio (radio buttons), buton trimitere formular (submit), buton resetare formular (reset), buton imagine (image), liste etc., toate plasate n interiorul elementului marcat de tag-ul <FORM>. Atributele specifice acestui element sunt: Atribut action Valoare Descriere

accept acceptcharset enctype method name

target

Un URL ce definete adresa aplica iei web care prelucreaz datele sau o adres de e-mail valid unde URL vor fi trimise datele dup apsarea butonului Submit (Trimite). O list cu elemente separate de virgul a tipurilor de list de con inut con inut pe care serverul ce proceseaz formularul le poate interpreta corect. O list cu elemente separate de virgul a caracterelor list de caractere posibile ce constituie datele formularului. Valoarea implicit este unknown. Determin mecanismul folosit la codificarea mimetype con inutului formularului. Get (implicit) sau post specific ce metod HTTP va get fi folosit la transmiterea datelor din formulat ctre post serverul web. numele Definete un nume unic pentru formular, util n cazul formularului folosirii unor scripturi Java sau VB. Specific unde va deschis URL-ul int: _blank _blank ntr-o fereastr nou; _self _self n acelai cadru din care a fost accesat; _parent _parent n cadrul printe; _top _top - direct n fereastra browser-ului, lund locul documentului existent.

10.2. Proiectarea unui formular n procesul de proiectare de proiectare a unui formular se pornete de la datele pe care le dori i s le ob ine i. Pentru aceasta v recomandm urmtoarele: - alege i controale care sunt adecvate pentru categoria de date pe care dori i s le ob ine i si pentru interac iunile pe care le furnizeaz; - tag-ul i cu claritate fiecare control, astfel nct utilizatorul s n eleag func ia acestuia; - n msura posibilit ilor, alinia i tag-urile i marginile din stnga ale controalelor. Structura unui formular bine proiectat este asemntoare cu aceea a unei pagini de ziar, fiind compus dintr-o serie de coloane n cadrul crora fiecare element vizual este aliniat cu elementele plasate deasupra, respectiv dedesubtul su. Pute i ob ine acest tip de structura folosind tabelele sau tag-ul <BR>; - grupa i controalele corelate i separa i fiecare asemenea grup de celelalte grupuri prin ncorporarea de spa ii albe n structura dvs.; - secven a de controale din formular trebuie s fie asemntoare cu ordinea n care le va manipula utilizatorul. n caz contrar, utilizatorul va fi obligat s piard timp navignd de la un control la altul. Este important s re ine i c acestea sunt doar ndrumri, nu reguli. Nefiind reguli, pute i opta, din cnd n cnd, pentru nclcarea lor. Pentru a determina dac o variant de proiectare este superioar alteia, este util s cere i prerea unui grup de utilizatori. Dac nici acetia nu v pot fi de ajutor, ncerca i s ob ine i asisten din partea unui alt programator. n cel mai ru caz, strdui i-v s v pune i dvs. niv n rolul unui utilizator al formularului. ntreba i-v dac formularul este clar, uor de utilizat i eficient. n caz afirmativ, este momentul s trece i mai departe i s crea i efectiv formularul HTML. 10.3. Crearea unui formular Dac procesul de proiectare este bazat pe oportunism, procesul de creare a unui formular, pornind de la structura proiectat, este mai direct. Mai nti, crea i schi a HTML elementar, care va con ine controalele din formular, apoi ncorpora i controalele n structura respectiv. n particular, un formular HTML trebuie s includ un buton de expediere pe care utilizatorul execut click pentru a trimite serverului datele din formular. Deoarece o singur pagin HTML poate con ine mai multe formulare, pute i repeta de mai multe ori etapele intermediare ale acestui proces. Pentru a include un formular n interiorul corpului unei pagini HTML se folosete tag-ul <FORM>, care are urmtoarea sintax: <FORM METHOD="metoda" ACTION="url"> Atributul METHOD al tag-ului FORM poate lua una din valorile GET sau POST. Pentru moment, specifica i ntotdeauna valoarea POST. Atributul ACTION specific adresa URL a scriptului ce prelucreaz datele colectate prin intermediul formularului. Adresa URL poate fi nscris ca adres absolut (de exemplu http://www.domeniul_meu.com/prelucrare_formular.php), respectiv ca adres relativ, care specific o loca ie relativ la loca ia paginii curente (de exemplu prelucrare_formular.php).

ntre tag-ul <FORM> i tag-ul de nchidere </FORM> corespunztoare, plasa i controalele formularului. Ca nceptor, este mai bine s folosi i n mod consecvent metoda POST, deoarece alegerea ntre metodele GET i POST este destul de complicat. Ca regul empiric, mul i programatori folosesc GET pentru formulare care execut o cutare sau o interogare, respectiv POST pentru formulare care actualizeaz o baz de date sau un fiier. Dou dezavantaje ale metodei GET sunt acelea c impune o limit asupra cantit ii de date care pot fi trimise scriptului de prelucrare i c transfer datele prin ataarea irurilor codificate la adresa URL a scriptului de prelucrare. Astfel, datele trimise prin metoda GET pot fi vizualizate de ctre utilizator. Un avantaj al metodei GET este acela ca utilizatorii pot insera semne de carte n rezultatele unei interogari sau al unei cutri care folosete metoda GET, dar nu pot executa aceeai opera ie n cazul unei interogri sau al unei cutri care folosete metoda POST. 10.4. Codificarea datelor nainte de a le trimite la destinatar, browser-ul codific datele din formular. Tehnica de codificare depinde de valoarea atributului enctype. Valorile posibile pentru acest atribut sunt: a) application/x-www-form-urlencoded utilizat mpreun cu metoda GET (parametri prestabili i). n acest caz: - datele sunt trimise sub form de list de perechi nume=valoare, separate prin simbolul "&"; - spa iile albe sunt nlocuite de simbolul "+"; - caracterele non-alfanumerice sunt nlocuite cu simbolul "%" urmat de codul ASCII corespunztor caracterului respectiv; - ntreruperile de rnd sunt nlocuite de secven a "%0D%0A%" (CR/LF) (de exemplu: nume=Popescu&prenume=Ion&adresa=Str.Mare+nr.1 %0D%0A%Romania) b) text/plain utilizat mpreun cu tipul de ac iune action="mailto" pentru trimiterea datelor prin e-mail. Acest caz este similar cazului precedent, cu excep ia faptului ca spa iile nu mai sunt nlocuite de simbolul "+". c) multiform/form-data utilizat mpreun cu metoda POST pentru trimiterea imaginilor sau a altor fiiere ctre server. 10.5. Inserarea controalelor de tip <INPUT> ntr-un formular Utilizatorii interac ioneaz cu formularele prin ceea ce poart denumirea de "controale". Cele mai utilizate tipuri de controale sunt cele definite de elementul <INPUT> prin intermediul atributui TYPE. Acestea sunt: a) Cmpuri de tip TEXT Se folosesc la introducerea de caractere alfanumerice ntr-un formular. Sintaxa uzual este de forma:

<FORM> Nume: <INPUT TYPE="text" NAME="nume"><BR> Prenume: <INPUT TYPE="text" NAME="prenume"> </FORM> Rezultatul afiat n browser va fi urmtorul:

Cmpurilor de tip text le pot fi precizate urmtoarele atribute: text determin mrimea cmpurilor text ca numr de caractere. Implicit are valoarea de 20 de caractere MAXLENGTH: determin numrul maxim de caractere ce pot fi intruse n acel cmp NAME: reprezint numele variabilei ce va fi trimis aplica iei ce prelucreaz formularul VALUE: afieaz o valoare implicit; n general rmne necompletat b) Cmpuri de tip parol (PASSWORD) Se folosesc la introducerea de parole ntr-un formular. Sintaxa uzual este de forma: <FORM> Username: <INPUT TYPE="text" NAME="user"><BR> Password: <INPUT TYPE="password" NAME="password"> </FORM> Rezultatul afiat n browser va fi urmtorul: TYPE: SIZE:

Cmpurilor de tip parol le pot fi precizate urmtoarele atribute: password determin mrimea cmpurilor parol ca numr de caractere. Implicit are valoarea de 20 de caractere MAXLENGTH: determin numrul maxim de caractere ce pot fi intruse n acel cmp NAME: reprezint numele variabilei ce va fi trimis aplica iei ce prelucreaz formularul VALUE: afieaz o valoare implicit; n general rmne necompletat c) Butoane de tip RADIO Se folosesc pentru a determina efectuarea unei singure alegeri dintr-o serie limitat ntr-un formular. Sintaxa uzual este de forma: <FORM> Sexul dvs.:<BR> <INPUT TYPE="radio" NAME="sex" VALUE="Barbat"> Barbat <BR> <INPUT TYPE="radio" NAME="sex" VALUE="Femeie"> Femeie </FORM> Rezultatul afiat n browser va fi urmtorul: TYPE: SIZE:

Butoanelor de tip radio le pot fi precizate urmtoarele atribute: TYPE: CHECKED: radio cnd se specific, determin ca una din op iuni s fie bifat ini ial. Nu se poate folosi dect pentru un singur buton radio, n caz contrar, aceast specifica ie va fi luat n considerare numai la ultimul buton radio. reprezint numele variabilei ce va fi trimis aplica iei ce prelucreaz formularul reprezint valoarea ce va fi trimis aplica iei ce prelucreaz formularul

NAME: VALUE:

d) Casete de validare (CHECKBOX) Se folosesc pentru a determina efectuarea mai multor alegeri dintr-o serie limitat ntr-un formular. Sintaxa uzual este de forma: <FORM> Sunteti interesat de :<BR> <INPUT TYPE="checkbox" NAME="programare" VALUE="html" CHECKED> HTML <BR> <INPUT TYPE="checkbox" NAME="programare" VALUE="css"> Stiluri CSS<BR> <INPUT TYPE="checkbox" NAME="programare" VALUE="javascript"> Javascript <BR> <INPUT TYPE="checkbox" NAME="programare" VALUE="php"> PHP </FORM> Rezultatul afiat n browser va fi urmtorul:

Casetelor de validare le pot fi precizate urmtoarele atribute: TYPE: CHECKED: NAME: VALUE: checkbox cnd se specific, determin ca una din op iuni s fie bifat ini ial reprezint numele variabilei ce va fi trimis aplica iei ce prelucreaz formularul reprezint valoarea ce va fi trimis aplica iei ce prelucreaz formularul

De re inut este faptul c doar casetele de validare selectate sunt incluse n datele transmise ctre server. e) Buton de transmitere (SUBMIT)

Fiecare formular necesit un buton de transmitere. Acesta este elementul care determin browser-ul s trimit numele i valorile elementelor formularului ctre server pentru a fi prelucrate. Sintaxa uzual este de forma: <FORM> <INPUT TYPE="submit" VALUE="Trimite"> </FORM> Rezultatul afiat n browser va fi urmtorul:

Butonul de transmitere poate avea urmtoarele atribute: TYPE: NAME: VALUE: submit reprezint numele variabilei ce va fi trimis aplica iei ce prelucreaz formularul reprezint textul (tag-ul) ce va fi afiat pe buton

Un formular i pot fi definite unul sau mai multe butoane de transmitere. f) Buton de transmitere tip imagine (IMAGE) Se folosete n cazul n care dori i s aduga i pu in "personalitate" butonului de transmitere. Sintaxa uzual este de forma: <FORM> <INPUT TYPE="image" SRC="URL"> </FORM> Folosind ca imagine fiierul buton.jpg, existent pe site-ul nostru la adresa http://html.webmarketclub.com/teste/buton.jpg, precum i pe CD-ul ataat prezentului ghid, rezultatul afiat n browser va fi urmtorul:

Acest tip de buton de transmitere poate avea urmtoarele atribute: TYPE: NAME: SRC: image reprezint numele butonului ce poate fi utilizat n cazul folosirii unor scripturi indic URL-ul fiierului ce con ine imaginea respectiv

g) Buton de anulare (RESET) Este o idee bun s include i n formular i un buton de anulare. Acesta permite utilizatorului s goleasc ntregul con inut al formularului. Sintaxa uzual este de forma: <FORM> <INPUT TYPE="reset" VALUE="Anuleaza"> </FORM> Rezultatul afiat n browser va fi urmtorul:

Butonul de anulare poate avea urmtoarele atribute: TYPE: VALUE reset reprezint textul (tag-ul) ce va fi afiat pe buton

h) Buton generic (BUTTON)

Se folosete pentru a ataa unui formular un buton generic, care nu are un comportament prestabilit, prin apsarea lui lansndu-se n execu ie un anumit script (folosind JavaScript sau alt limbaj de programare). Sintaxa uzual este de forma: <FORM> <INPUT TYPE="button" VALUE="Executa"> </FORM> Rezultatul afiat n browser va fi urmtorul:

Butonul generic poate avea urmtoarele atribute: TYPE: NAME: VALUE button reprezint numele butonului ce poate fi utilizat n cazul folosirii unor scripturi reprezint textul (tag-ul) ce va fi afiat pe buton

i) Cmpuri de tip fiier (FILE) Sunt folosite pentru a permite utilizatorilor s fac upload fiierelor pe server. Sintaxa uzual este de forma: <FORM> Username: <INPUT TYPE="file"> </FORM> Rezultatul afiat n browser va fi urmtorul:

Cmpurilor de tip fiier le pot fi precizate urmtoarele atribute: TYPE: SIZE: NAME: VALUE: ACCEPT: file determin mrimea cmpurilor fiier ca numr de caractere. Implicit are valoarea de 20 de caractere reprezint numele variabilei ce va fi trimis aplica iei ce prelucreaz formularul specific un nume de fiier prestabilit lista tipurilor MIME separate de virgul care indic tipul de transfer

j) Cmpuri ascunse (HIDDEN) Sunt folosite pentru a trimite date fr ns a permite utilizatorilor s le poat vizualiza sau manipula, fiind totui necesare pentru prelucrarea corect a formularului. Sintaxa uzual este de forma: <FORM> <INPUT TYPE="hidden"> </FORM> n acest caz, browser-ul nu va afia nimic. Utilitatea acestui tip de cmpuri o ve i remarca n exemplul din finalul acestui capitol. Cmpurilor ascunse le pot fi precizate urmtoarele atribute: TYPE: NAME: VALUE: hidden reprezint numele variabilei ce va fi trimis aplica iei ce prelucreaz formularul reprezint valoarea ce va fi trimis aplica iei ce prelucreaz formularul

10.6. Alte tipuri de controale Pe lng controalele prezentate anterior mai exist o serie identificate fiecare prin propriul su element, i anume: a) Liste de selec ie Exist dou tipuri de astfel de liste: liste cortin (drop-down list) i liste derulante (scrolling list). Ambele se ob in folosind elementul <SELECT>, diferen ierea fcndu-se cu ajutorul atributului SIZE, n cazul listelor cortin nefiind precizat sau avnd valoarea 1, iar n cazul listelor derulante putnd avea orice valoare diferit de 1. Atributele elementului <SELECT> sunt urmtoarele: NAME: reprezint numele variabilei ce va fi trimis aplica iei ce

prelucreaz formularul SIZE: reprezint numrul de elemente din list vizibile MULTIPLE: dac este specificat, acest atribut permite realizarea de selec ii multiple, a mai multor elemente concomitent prin folosirea combina iilor SHIFT+click pentru elemente consecutive, respectiv CTRL+click pentru elemente neconsecutive Elementele unor astfel de liste sunt marcate de tag-ul <OPTION>. Atributele elementului <OPTION> sunt urmtoarele: SELECTED: cnd acest atribut este prezent, op iunea respectiv este preselectat VALUE: reprezint valoarea ce va fi trimis aplica iei ce prelucreaz formularul Sintaxa uzual este de forma: <FORM> <SELECT NAME="lista de selectie"> <OPTION VALUE="1">primul element al listei</OPTION> <OPTION VALUE="2">al doilea element al listei</OPTION> <OPTION VALUE="3">al treilea element al listei</OPTION> <OPTION VALUE="4">al patrulea element al listei</OPTION> <OPTION VALUE="5">al cincilea element al listei</OPTION> </SELECT> </FORM> ntruct atributul SIZE nu a fost precizat, valoarea sa implicit fiind "1", browser-ul va afia o list tip cortin:

Aplicnd atributului SIZE valoarea 3 (<select name="lista de selectie" size="3">), vom ob ine o list derulant, astfel:

Pentru realizarea de selec ii multiple se folosete atributul MULTIPLE. n acest caz v recomandm s specifica i o valoare diferit de 1 atributului SIZE ntruct listele cortin nu accept selec ii multiple. Sintaxa folosit este urmtoarea: <SELECT NAME="lista de selectie" SIZE="4" MULTIPLE> Rezultatul afiat n browser va fi urmtorul:

Selec ie realizat cu SHIFT+click

Selec ie realizat cu CTRL+click

n cazul n care dori i s introduce i ntr-o astfel de list unul sau mai multe elemente preselectate, atunci trebuie s aduga i atributul SELECTED fiecruia din elementele respective, astfel: <FORM> <SELECT NAME="lista de selectie" SIZE="4" MULTIPLE> <OPTION VALUE="1">primul element al listei</OPTION> <OPTION VALUE="2" SELECTED>al doilea element al listei</OPTION> <OPTION VALUE="3">al treilea element al listei</OPTION> <OPTION VALUE="4">al patrulea element al listei</OPTION> <OPTION VALUE="5">al cincilea element al listei</OPTION> </SELECT> </FORM>

Rezultatul afiat n browser va fi urmtorul:

Al doilea i al treilea element preselectate Pentru gruparea elementelor, se folosete sub-elementul <OPTGROUP> n interiorul elementului <SELECT>. Acest sub-element are un singur atribut (a crui prezen este obligatorie), i anume LABEL, ce definete tag-ul unui grup. Sintaxa folosit este urmtoarea: <FORM> <SELECT NAME="lista de selectie"> <OPTION SELECTED VALUE="none">none</OPTION> <OPTGROUP LABEL="Grupa 1"> <OPTION VALUE="1.1">primul element al grupei 1</OPTION> <OPTION VALUE="1.2">al doilea element al grupei 1</OPTION> <OPTION VALUE="1.3">al treilea element al grupei 1</OPTION> </OPTGROUP> <OPTGROUP LABEL="Grupa 2"> <OPTION VALUE="2.1">primul element al grupei 2</OPTION> <OPTION VALUE="2.2">al doilea element al grupei 2</OPTION> <OPTION VALUE="2.3">al treilea element al grupei 2</OPTION> </OPTGROUP> </SELECT> </FORM> Rezultatul afiat n browser va fi urmtorul:

b) Zone cu text (TEXTAREA) La fel ca i o caset cu text, o zon cu text permite unui utilizator s introduc un anumit text. Diferen a const n faptul c o zon cu text poate permite utilizatorului s introduc mai multe linii de text, n timp ce o caset cu text permite utilizatorului s introduc o singur linie. Atributele elementului <TEXTAREA> sunt urmtoarele: NAME: reprezint numele zonei cu text, respectiv al variabilei ce va fi trimis aplica iei ce prelucreaz formularul ROWS: specific numrul de rnduri vizibile n zona cu text COLS: specific numrul de coloane vizibile n zona cu text READONLY: cnd este specificat, indic faptul c utilizatorii formularului nu pot modifica con inutul zonei cu text

Iat sintaxa pentru crearea unei zone cu text: <FORM> <TEXTAREA NAME="zona cu text" ROWS="5" COLS="25" READONLY> Aceasta este o zona cu text definita pe 5 randuri si 25 de coloane </TEXTAREA> </FORM> Rezultatul afiat n browser va fi urmtorul:

10.7. Alte atribute ale formularelor n afar de cele prezentate anterior, mai exist dou atribute ce pot fi adugate elementelor unui formular. Acestea sunt: a) accesskey ce definete o scurttur pentru executarea unei comenzi specifice respectivului element i/sau focalizeaz acel element. Ca valori posibile se poate folosi orice caracter (de exemplu "f"). Pentru a selecta sau executa comanda, utilizatorul trebuie s in apsat tasta ALT i apoi s apese tasta literei corespunztoare (de exemplu ALT+f). Not: Nu toate browser-ele suport acest atribut. De exemplu, dei n Microsoft Internet Explorer func ioneaz corect, n Mozilla Firefox combina ia ALT+f va avea ca efect apelarea meniului File. b) tabindex ce definete o alt ordine de parcurgere a elementelor formularului n cazul apsrii tastei TAB (ordinea prestabilit fiind aceea a ordinii n care elementele au fost adugate n formular). Valorile posibile ale acestui atribut sunt reprezentate de orice numr ntreg pozitiv.

Sintaxa uzual privind folosirea acestor atribute este: <FORM> Nume: <INPUT TYPE="text" NAME="nume" ACCESSKEY="n" TABINDEX="1">Acest control se poate accesa si cu ALT+n<BR> Prenume: <INPUT TYPE="text" NAME="prenume" ACCESSKEY="p" TABINDEX="3">Acest control se poate accesa si cu ALT+p<BR> Comentarii: <TEXTAREA NAME="comentarii" ROWS="5" COLS="25" ACCESSKEY="c" TABINDEX="2">Acest control se poate accesa si cu ALT+c. Folosind tasta TAB in loc de mouse pentru deplasarea dintr-un camp in altul, veti observa efectul atributului TABINDEX. </TEXTAREA> </FORM> Rezultatul afiat n browser va fi urmtorul:

10.8. Aplica ie practic Pentru a pune n practic cele prezentate anterior, vom crea un fiier test10.html ce va cuprinde un model de formular complex, ale crui rezultate vor fi expediate pe adresa voastr de e-mail. Pentru ob inerea unui aspect ct mai plcut, n sensul alinierii corespunztoarele a elementelor formularului, vom crea un tabel n interiorul acestuia. <HTML> <HEAD> <TITLE>Formulare</TITLE> </HEAD> <BODY BGCOLOR="wheat"> <FORM NAME="formular_F1" METHOD="POST" ENCTYPE="text/plain" ACTION="mailto:[email protected]"> <INPUT TYPE="hidden" NAME="Subiect" VALUE="Rezultatul exercitiului cu formulare"> <TABLE BORDER="0" CELLSPACING="10"> <TR><TD>Nume: </TD> <TD><INPUT TYPE="text" SIZE="25" MAXLENGTH="50" NAME="Nume" ACCESSKEY="n" TABINDEX="1"></TD></TR> <TR><TD>Prenume: </TD> <TD><INPUT TYPE="text" SIZE="25" MAXLENGTH="50" NAME="Prenume" ACCESSKEY="p" TABINDEX="2"></TD></TR> <TR><TD>Parola: </TD> <TD><INPUT TYPE="password" SIZE="25" MAXLENGTH="50" NAME="Parola" ACCESSKEY="q" TABINDEX="3"></TD></TR> <TR><TD>Sexul dvs.:</TD> <TD><INPUT TYPE="radio" NAME="Sex" VALUE="B"> Barbat <INPUT TYPE="radio" NAME="Sex" VALUE="F"> Femeie</TD></TR> <TR><TD VALIGN="top">Sunteti interesat/a de:</TD>

<TD><INPUT TYPE="checkbox" NAME="Programare" VALUE="html" CHECKED> HTML <BR> <INPUT TYPE="checkbox" NAME="Programare" VALUE="css"> Stiluri CSS<BR> <INPUT TYPE="checkbox" NAME="Programare" VALUE="javascript"> Javascript <BR> <INPUT TYPE="checkbox" NAME="Programare" VALUE="php"> PHP</TD></TR> <TR><TD VALIGN="top">Ati ajuns la capitolul:</TD> <TD><SELECT NAME="Capitolul curent"> <OPTION VALUE="1">CAP. 1. NOTIUNI GENERALE</OPTION> <OPTION VALUE="2">CAP 2. CREAREA SI EDITAREA UNEI PAGINI WEB</OPTION> <OPTION VALUE="3">CAP. 3. FORMATAREA DOCUMENTULUI</OPTION> <OPTION VALUE="4">CAP. 4. FORMATAREA TEXTULUI</OPTION> <OPTION VALUE="5">CAP. 5. CREAREA LISTELOR</OPTION> <OPTION VALUE="6">CAP. 6. HYPERLINK-URI</OPTION> <OPTION VALUE="7">CAP. 7. FOLOSIREA IMAGINILOR</OPTION> <OPTION VALUE="8">CAP. 8. TABELE</OPTION> <OPTION VALUE="9">CAP. 9. CADRE</OPTION> <OPTGROUP LABEL="CAP. 10. FORMULARE"> <OPTION VALUE="10.1.">Notiuni generale</OPTION> <OPTION VALUE="10.2.">Elementele formularelor</OPTION> <OPTION VALUE="10.3.">Crearea unui formular </OPTION> <OPTION VALUE="10.4.">Codificarea datelor</OPTION> <OPTION VALUE="10.5.">Inserarea controalelor de tip "INPUT"</OPTION> <OPTION VALUE="10.6.">Alte tipuri de controale </OPTION> <OPTION VALUE="10.7.">Alte atribute ale formularelor</OPTION> <OPTION VALUE="10.8." SELECTED>Aplicatie practica</OPTION></OPTGROUP> </SELECT></TD></TR> <TR><TD VALIGN="top">Comentarii:</TD> <TD><TEXTAREA NAME="Comentarii" ROWS="5" COLS="25" ACCESSKEY="c" TABINDEX="4">Scrieti aici comentariile voastre</TEXTAREA></TD></TR> <TR><TD ALIGN="center"><INPUT TYPE="submit" VALUE=" Trimite "></TD> <TD ALIGN="center"><INPUT TYPE="reset" VALUE=" Anuleaz"></TD></TR> </TABLE> </FORM> </BODY> </HTML> Rezultatul afiat n browser va fi urmtorul:

iar rezultatul primit (n cazul n care nu completa i nimic) va fi: Subiect=Rezultatul exercitiului cu formulare Nume= Prenume= Parola= Programare=html Capitolul curent=10.8. Comentarii=Scrieti aici comentariile voastre

CAP. 11. JAVA I JAVASCRIPT 11.1. No iuni generale Vom ncepe acest capitol prin a face distinc ia Java i JavaScript. Java este un limbaj de programare orientat-obiect, ce se adreseaz programatorilor avansa i putnd fi rulat fr modificri pe orice computer (PC, PDA etc) pe care exist instalat o "main virtual" Java (JVM=Java Virtual Machine), fiind extrem de potrivit, dei nu exclusiv, pentru Internet. Pe de alt parte, JavaScript este un limbaj de programare orientat-obiect bazat pe conceptul prototipurilor. Limbajul este binecunoscut pentru folosirea n construirea siturilor web, dar de asemenea este folosit pentru acesul la obiecte ncastrate (embedded objects) n alte aplica ii. n ciuda numelui i a unor oarecare similarit i n sintax, ntre JavaScript i limbajul Java nu exist nici o legtur. Ca i Java, JavaScript are o sintax asemntoare cu cea a limbajului C, dar are mai multe n comun cu Limbajul de Autoprogramare dect cu Java. 11.2. Limbajul JAVA Java este un limbaj de programare conceput de Sun Microsystems la nceputul anilor 90. A fost conceput ca un limbaj de programare orientat-obiect foarte puternic, "crossplatform" i "device-independent", ceea ce nseamn c programul compilat trebuie s ruleze att pe PC-uri, MAC-uri sau calculatoare cu platform UNIX. Browser-ele creeaz un mediu pentru rularea applet-urilor Java, numit Java Virtual Machine. Acesta ofer independen a platformei pentru applet-urile Java. Denumirea de applet se refer la orice mini-aplica ie creat cu ajutorul limbajului Java. Creare unui applet nu face obiectul acestui ghid. Applet-urile sunt programe compilate separate ce au extensia ".class". Acestea sunt descrcate mpreun cu pagina web prin folosirea tag-ului <APPLET>. Sintaxa HTML pentru folosirea tag-ului <APPLET> i a tag-ului su asociat <PARAM>, este urmtoarea: < APPLET [CODEBASE = directorApplet] [CODE = clasaApplet] [ALT = textAlternativ] [NAME = numeInstan Applet] WIDTH = l imeInPixeli HEIGHT = nl imeInPixeli [ALIGN = aliniere] [VSPACE = spa iuVertical] [HSPACE = spa iuOrizontal] > [< PARAM NAME = numeParametru_1 VALUE = valoare_1 >] ...

[< PARAM NAME = numeParametru_n VALUE = valoare_n >] [text HTML alternativ] </APPLET> Atributele puse ntre paranteze ptrate sunt op ionale. Semnifica ia atributelor este urmtoarea: Atribut Valoare left right top bottom middle baseline texttop absmiddle absbottom text URL Descriere

align

Semnific modalitatea de aliniere a appletul-ui n pagina Web, semnifica iile lor fiind aceleai ca i la tag-ul <IMG>.

alt code

codebase height hspace name vspace width

URL pixeli pixeli text pixeli pixeli

Specific textul ce trebuie afiat dac browser-ul n elege tag-ul APPLET dar nu poate rula applet-uri Java. Specific numele fiierului ce con ine clasa principal a applet-ului. Acesta va fi cutat n directorul specificat de CODEBASE. Specific URL-ul n care se gsete clasa applet-ului. Uzual se exprim relativ la directorul documentului HTML. n cazul n care lipsete, se consider implicit URL-ul documentului. Specific nl imea suprafe ei n care va fi afiat appletul. Este un atribut obligatoriu. Specific numrul de pixeli dintre applet i marginile orizontale ale suprafe ei de afiare. Ofer posibilitatea de a da un nume respectivei instan e a applet-ului, astfel nct mai multe applet-uri aflate pe aceeai pagin s comunice ntre ele folosindu-se de numele lor. Specific numrul de pixeli dintre applet i marginile verticale ale suprafe ei de afiare. Specific l imea suprafe ei n care va fi afiat applet-ul. Este un atribut obligatoriu.

< PARAM NAME = numeParametru1 VALUE = valoare1 > Tag-urile <PARAM> sunt folosite pentru specificarea parametrilor unui applet. Aceti parametri permit utilizatorului s personalizeze aspectul sau comportarea unui applet fara a-i schimba codul si recompila clasele. text HTML alternativ

Este textul ce va fi afiat n cazul n care browser-ul nu n elege tag-ul <APPLET>. Browser-ele care n eleg Java vor ignora acest text. 11.3. Limbajul JAVASCRIPT JavaScript v permite s crea i o interfa activ cu utilizatorul, s dea o impresie vizual plcut n timp ce naviga i prin paginile site-ului. Pute i verifica validitatea informa iilor introduse ntr-un formular nainte ca datele s fie trimise ctre server. Pute i face calcule matematice, crea pagini HTML dinamice, personalizate n func ie de op iunile utilizatorului sau al browser-ului. JavaScript controleaz browser-ul, i prin intermediul scripturilor pute i deschide ferestre noi, pute i afia mesaje de avertizare i pute i pune mesaje n bara de stare a ferestrei browserului. Pute i genera ceasuri, calendare i documente cu timpul nscris. Pute i chiar verifica prezen a plug-in-urilor n browser, i pute i redirecta utilizatorul spre o pagin diferit n cazul n care browserul nu are un anumit plug-in. O men iune important: programele care ruleaz pe calculatorul utilizatorului sunt numite aplica ii client-side (aflate pe partea de client), i programele care ruleaz pe server (inclusiv CGI-urile) sunt numite aplica ii server-side (aflate pe partea de server) Deoarece JavaScript ruleaz pe calculatorul dumneavoastr, i-au fost impuse o serie de limitri, majoritatea din ra iuni de securitate, i anume: - nu permite citirea sau scrierea de fiiere pe calculatorul utilizatorului. Singura excep ie este permisiunea de a scrie n directorul de cookie-uri al browserului, dar i aici sunt anumite limite. - nu permite citirea/scrierea de fiiere pe server. Alternativa este s rula i pe server un program care s preia datele trimise de script i s le scrie pe server (un CGI, scris ntrun limbaj precum Perl sau PHP, sau un program Java. - un script JavaScript nu poate nchide o fereastr de browser care nu a fost deschis de el. Astfel se evit situa ia cnd intra i pe un site i vi se nchid celelalte ferestre active care con in alte site-uri... - nu poate citi informa ii dintr-un browser care con ine o pagina web de pe un alt server, ca s nu pute i afla pe ce site-uri navigeaz utilizatorul. Un script JavaScript este un program inclus ntr-o pagina HTML. Deoarece este ncadrat de tag-ul <script>, textul scriptului nu apare pe ecran, dar este rulat i interpretat de ctre browser. Tag-ul <script> este prezent cel mai frecvent n sec iunea <head> a paginii HTML, dei se pot pune i n sec iunea <body>. De obicei, scripturile care urmeaz s afieze mesaje pe ecran sunt scrise n <body>. V prezentm n continuare o list a atributelor ce pot fi adugate tag-urilor HTML pentru a defini diferite ac iuni: Ac iuni legate de ferestre

Valabile numai n elementele <BODY> i <FRAMESET> Atribut onload Valoare script Descriere Scriptul ce va fi rulat la ncrcarea documentului

onunload -

script

Scriptul ce va fi rulat la nchiderea documentului

Ac iuni legate de formulare

Valabile numai n elementul <FORM> Atribut onchange onsubmit onreset onselect onblur onfocus Valoare script script script script script script Descriere Scriptul ce va fi rulat cnd se elementul se schimb Scriptul ce va fi rulat la trimiterea formularului Scriptul ce va fi rulat la resetarea formularului Scriptul ce va fi rulat la selectarea elementului Scriptul ce va fi rulat la pierderea focalizrii asupra elementului Scriptul ce va fi rulat la focalizarea asupra elementului

Ac iuni legate de tastatur

Nu sunt valabile n elementele <BASE>, <BDO>, <BR>, <FRAME>, <FRAMESET>, <HEAD>, <HTML>, <IFRAME>, <META>, <PARAM>, <SCRIPT>, <STYLE> i <TITLE>. Atribut onkeydown onkeypress onkeyup Valoare script script script Descriere Scriptul ce va fi rulat cnd este apsat o tast Scriptul ce va fi rulat cnd este apsat i eliberat o tast Scriptul ce va fi rulat cnd este eliberat o tast

Ac iuni legate de mouse

Nu sunt valabile n elementele <BASE>, <BDO>, <BR>, <FRAME>, <FRAMESET>, <HEAD>, <HTML>, <IFRAME>, <META>, <PARAM>, <SCRIPT>, <STYLE> i <TITLE>. Atribut onclick Valoare script Descriere Scriptul ce va fi rulat cnd se face click cu mouse-ul

ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup

script script script script script script

Scriptul ce va fi rulat cnd se face dublu-click cu mouse-ul Scriptul ce va fi rulat cnd este apsat butonul mouseului Scriptul ce va fi rulat cnd este micat cursorul de la mouse Scriptul ce va fi rulat cnd cursorul de la mouse este mutat n afara unui element Scriptul ce va fi rulat cnd cursorul de la mouse este mutat asupra unui element Scriptul ce va fi rulat cnd este eliberat butonul mouse-ului

11.4. Aplica ie practic Pentru a exemplifica cele artate mai sus, vom crea un fiier test11.html ce va con ine dou applet-uri Java i un script Javascript. <HTML> <HEAD> <TITLE>Java si Javascript</TITLE> </HEAD> <BODY> <P ALIGN="center"> Iata un applet simplu ce reproduce functiile unui calculator.<BR><BR> <APPLET CODE="AdderApplet.class" WIDTH="175" HEIGHT="175"> </APPLET><BR><BR> Iata un applet ce reproduce un calendar si foloseste diversi parametri.<BR><BR> <APPLET CODEBASE="C:\Ghid programare HTML\Teste" CODE="tcaldate.class" WIDTH="200" HEIGHT="170"> <PARAM NAME="font" VALUE="Arial"> <PARAM NAME="fontsize" VALUE="12"> <PARAM NAME="fontstyle" VALUE="1"> <PARAM NAME="bgcolor" VALUE="13684944"> <PARAM NAME="bgcolor2" VALUE="14737663"> <PARAM NAME="bgcolor3" VALUE="400"> <PARAM NAME="_min" VALUE="01 Ian 2008"> <PARAM NAME="current" VALUE="1z5 zzIan 08"> <PARAM NAME="_max" VALUE="31 Ian 2008"> <PARAM NAME="t_col1" VALUE="400"> <PARAM NAME="t_col2" VALUE="8421520"> <PARAM NAME="t_col3" VALUE="14737663"> </APPLET><BR><BR> Iata un script ce schimba doua imagini intre ele in functie de pozitia mouseului.<BR><BR>

<SCRIPT LANGUAGE="JavaScript"> <!-- Acest text nu va fi afisat de browserele ce nu suporta JavaScript image_1aon = new Image(150, 50); image_1aon.src = "picture1b.gif"; image_1aoff = new Image(150, 50); image_1aoff.src = "picture1.gif"; // Functii function img_act(imgName) { imgon = eval(imgName + "on.src"); document [imgName].src = imgon; } function img_inact(imgName) { imgoff = eval(imgName + "off.src"); document [imgName].src = imgoff; } --></SCRIPT> <A HREF="test11.html" ONMOUSEOVER="img_act('image_1a')" ONMOUSEOUT="img_inact('image_1a')"><IMG SRC="picture1b.gif" BORDER="0" WIDTH="80" HEIGHT="50" NAME="image_1a"></A> </P> </BODY> </HTML> Rezultatul afiat n browser-ul IE va fi urmtorul:

CAP. 12. PAGINI WEB MULTIMEDIA 12.1. Ce este multimedia? Multimedia reprezint tot ce pute i auzi sau vedea: texte, cr i, imagini, muzic, sunete, CD-uri, DVD-uri, filme, tot felul de nregistrri video sau audio etc. Multimedia se prezint ntr-o multitudine de formate, iar pe Internet ve i gsi multe dintre aceste elemente nglobate n pagini web. Browser-ele actuale ofer suport pentru multe dintre aceste formate, dar nu pentru toate. Suportul pentru sunete, anima ii i video este tratat n mod diferit de browsere diferite. Unele elemente pot fi manevrate intern, altele necesit anumite plug-in-uri, n vreme ce altele pot solicita activarea anumitor controale ActiveX. n acest capitol ve i afla despre diferitele formate multimedia i cum s le folosi i ntr-o pagin web. Elementele multimedia (precum sunetele i video) sunt stocate n fiiere media. Modalitatea cea mai simpl de a determina tipul unui fiier media este de a analiza extensia fiierului respectiv (de exemplu, cele mai utilizate tipuri de fiiere ce con in imagini au extensia .jpg sau .gif). 12.2. Formatul fiierelor multimedia ce con in sunete Sunetele pot fi stocate n diferite formate de fiiere. Astfel deosebim: a) Formatul MIDI MIDI (Musical Instrument Digital Interface) este un format ce permite transmiterea de informa ii muzicale ntre dispozitive electronice muzicale (precum sintetizatoare) i plcile de sunet ale calculatoarelor. Formatul MIDI a fost implementat n 1982 de ctre industria muzical. Acest format este foarte flexibil i poate fi folosit pentru (aproape) orice, de la crearea unor sunete foarte simple, pn la crearea unora cu adevrat profesionale. Fieierele MIDI nu con in sunete, ci un set de instruc iuni digitale muzicale (note muzicale) care pot fi interpretate de plcile de sunet ale calculatoarelor. Dezavantajul la acest tip de fiiere const n faptul c nu pot stoca muzic (n toat complexitatea ei), ci doar note muzicale. Avantajul l constituie mrimea mic a acestor fiiere, prin urmare se pot ncrca uor ntr-o pagin web, precum i faptul c acest format este suportat de majoritatea sistemelor de operare i de cele mai populare browsere de Internet. Fiierele de tip MIDI au extensia .mid sau .midi. b) Formatul RealAudio Formatul RealAudio a fost dezvoltat pentru Internet de ctre Real Media. Acest format suport chiar i video. Formatul permite difuzarea de informa ii audio (muzic on-line, Internet radio) cu l ime de band joas. Din cauza acestei l imi de band, calitatea este, de cele mai multe ori, slab. Fiierele de tip RealAudio au extensia .rm sau .ram.

c) Formatul AU Acest formatul a fost dezvoltat de ctre Sun Microsystems i este suportat de majoritatea sistemelor de operare. Aceste fiierele au extensia .au. d) Formatul AIFF AIFF (Audio Interchange File Format) a fost dezvoltat de ctre Apple. Acest tip de fiiere nu sunt suportate de toate browser-ele. Aceste fiierele au extensia .aif sau .aiff. e) Formatul SND SND (Sound) a fost dezvoltat, de asemenea, de ctre Apple i au acelai dezavantaj, i anume c nu sunt suportate de toate browser-ele. Aceste fiierele au extensia .snd. f) Formatul WAVE WAVE (waveform) a fost dezvoltat de ctre IBM i Microsoft. Este un format suportat de toate computerele pe care ruleaz Windows i este recunoscut de majoritatea browsere-lor. Fiierele de tip WAVE au extensia .wav. g) Formatul MP3 Fiierele MP3 sunt de fapt fiiere MPEG, dezvoltate ini ial pentru video de ctre Moving Pictures Experts Group. Se poate afirma c fiierele MP3 reprezint partea de sunet dintr-un fiiere video n format MPEG. MP3 este n prezent unul dintre cele mai populare formate folosite la nregistrarea muzicii. Sistemul de codificare MP3 combin o bun compresie (ce duce la fiiere mici) cu calitate nalt. Este de ateptat ca pe viitor toate sistemele de operare s ofere suport pentru acest tip de format. Fiierele de tip MP3 au extensia .mp3 sau .mpga. n func ie de scopul pentru care crea i o pagin web multimedia va trebui s v orienta i i asupra unui anumit format de fiier. Astfel, dac dori i ca sunetele nregistrate (muzic sau de alt tip) s poat fi asculatet de to i vizitatorii paginii web, atunci trebuie s folosi i fiiere n format WAV, ntruct este cel mai popular format pe Internet i este suportat de majoritatea browsere-lor. Dac pagina web este despre nregistrri muzicale, atunci formatul cel mai potrivit este MP3. 12.3. Formatul fiierelor multimedia ce con in video i imaginile video pot fi stocate n diferite formate de fiiere. Astfel deosebim: a) Formatul AVI

Formatul AVI (Audio Video Interleave) a fost dezvoltat de ctre Microsoft. Este un format suportat de toate computerele pe care ruleaz Windows i este recunoscut de majoritatea browsere-lor. Dei este un format des ntlnit pe Internet, nu este ntotdeauna suportat de calculatoarele cu sisteme de operare non-Windows. Fiierele de tip AVI au extensia .avi. b) Formatul Windows Media Acest formatul a fost dezvoltat de ctre Microsoft. i acest format este unul suportat de toate computerele pe care ruleaz Windows, dar nu este suportat de calculatoarele cu sisteme de operare non-Windows dect n urma instalrii unor extra componente (playere specializate). Fiierele de tip Windows Media au extensia .wmv. c) Formatul MPEG Formatul MPEG (Moving Pictures Expert Group) este n prezent unul dintre cele mai populare formate folosite pe Internet. Acest format este suportat de majoritatea sistemelor de operare i de cele mai populare browsere de Internet. Fiierele de tip MPEG au extensia .mpg sau .mpeg. d) Formatul QuickTime Formatul QuickTime a fost dezvoltat de ctre Apple i nu poate rula pe platformele Windows fr instalarea unui player specializat. Fiierele de tip QuickTime au extensia .mov sau .qtm. e) Formatul RealVideo Formatul RealVideo a fost dezvoltat pentru Internet de ctre Real Media. Formatul permite difuzarea de informa ii video (video on-line, Internet video) cu l ime de band joas. Din cauza acestei l imi de band, calitatea este, de cele mai multe ori, slab. Fiierele de tip RealVideo au extensia .rm sau .ram. f) Formatul Shockwave (Flash) Formatul Shockwave a fost dezvoltat de ctre Macromedia. Acest format necesit instalarea unui player specializat pentru a putea rula. n prezent, aceast component este oferit preinstalat de ultimele versiuni ale browsere-lor Netscape i Internet Explorer. Fiierele de tip Shockwave au extensia .swf. 12.4. Adugarea de informa ii multimedia unei pagini web Informa iile multimedia pot fi redate direct de browser sau prin intermediul unui program ajuttor (un player specializat), n func ie de elementul HTML i de formatul fiierului multimedia folosit. Cea mai simpl cale de a realiza acest lucru este prin folosirea unei ancore (link) care s duc la sursa elementului multimedia. Este cea mai prietenoas metod ntruct

ofer posibilitatea vizitatorilor de a alege ntre a vedea o pagin web cu elemente multimedia sau fr acestea. n acest caz pagina se ncarc mult mai repede nemaifiind nevoie s se ncarce toate informa iile multimedia. Sintaxa folosit pentru realizarea celor prezentate mai sus este similar cu cea prezentat n subcapitolul 6.3. (Ancore): <A href="nume fiier multimedia">Click here to play multimedia</A> O metod specific, mai complex, ce are ca rezultat includerea n pagina web (ca parte integrant din aceasta) a unor informa ii multimedia, se realizeaz prin intermediul elementului <OBJECT>. Not: Dei, n func ie de browser-ul folosit, mai pot fi folosite i alte elemente, cum ar fi <BGSOUND>, recunoscut de Internet Explorer, i <EMBED>, recunoscut de Internet Explorer i Netscape, consor iul W3C (World Wide Web Consortium) recomand utilizarea elementului <OBJECT>. Atributele utilizate cu acest element sunt: Atribut archive classid codebase codetype data declare height name standby tabindex type width Descriere Precizeaz loca ia (URL-ul) fiierelor arhiv. Precizeaz loca ia (URL-ul) obiectului. Valorile posibile depind de proiectantul elementului de control. n Windows, aceste valori sunt nscrise n regitri i pot fi accesate cu aplica ia Registry Editor. Precizeaz calea (URI-ul) n care se gsete clasa obiectului specificat prin atributele classid, data i archive. Specific tipul fiierului specificat prin atributul classid. Precizeaz numele i loca ia (URL-ul) obiectului. Se poate folosi mpreun sau ca o alternativ a atributului classid, n func ie de tipul obiectului. Cnd este prezent, acet atribut face ca defini ia curent introdus de elementul <OBJECT> s fie tratat ca o simpl declara ie. Specific nl imea suprafe ei n care va fi afiat obiectul. Precizeaz denumirea obiectului (cnd acesta este cuprins ntr-un formular). Precizeaz textul ce va fi afiat pn cnd este ncrcat obiectul. Precizeaz pozi ia elementului curent n document (ordinea n care va fi focalizat de utilizator cnd se folosete tastatura). Determin tipul MIME asociat cu fiierul respectiv. Este un atribut op ional dar recomandat cnd se folosete atributul data. Specific l imea suprafe ei n care va fi afiat obiectul.

Acest element necesit n mod obligatoriu tag-ul de nchidere corespunztor </OBJECT>. mpreun cu elementul <OBJECT> (n interiorul acestuia) se folosete i elementul asociat <PARAM> care definete parametrii elementului <OBJECT>. Atributele utilizate cu acest element sunt: Atribut id name type value valuetype Descriere Precizeaz un identificator unic pentru element. Precizeaz o denumire pentru element. Determin tipul con inutului. Specific valoarea parametrului. Specific tipul valoarii parametrului.

Elementul <OBJECT> poate suporta diferite tipuri de informa ii multimedia, cum ar fi imagini, sunete, video, pagini web etc. n func ie de tipul acestor informa ii, difer i sintaxa folosit n limbajul HTML. Astfel, pentru a insera o imagine (n format .jpg), prin intermediul elementului <OBJECT>, se folosete urmtoarea sintax: <OBJECT HEIGHT="..." WIDTH="..." TYPE="image/jpeg" DATA="nume_fisier.jpg"> </OBJECT> Pentru a insera un sunet (n format .wav) se folosete urmtoarea sintax: <OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <PARAM NAME="FileName" VALUE="nume_fisier.wmv"> </OBJECT> Pentru a insera un film (n format .wmv) se folosete urmtoarea sintax: <OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <PARAM NAME="FileName" VALUE="nume_fisier.wmv"> </OBJECT> Pentru a insera o pagin web se folosete urmtoarea sintax: <OBJECT TYPE="text/html" HEIGHT="..." WIDTH="..." DATA="http://www.pagina_web.com"> </OBJECT>

Pentru a insera o anima ie creat n Flash (n format .swf) se folosete urmtoarea sintax: <OBJECT WIDTH="..." HEIGHT="..." CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash /swflash.cab#4,0,0,0"> <PARAM NAME="SRC" VALUE=" nume_fisier.swf"> </OBJECT> 12.5. Inserarea unui film QuickTime ntr-o pagin web Formatul QuickTime a fost dezvoltat de ctre Apple i, dei este un format des ntlnit pe Internet, nu poate rula pe platformele Windows fr instalarea unui player specializat. Fiierele de tip QuickTime au extensia .mov sau .qtm. Cu ajutorul elementului <OBJECT> poate fi uor adugat cod ntr-o pagin web astfel nct un film QuickTime s poat fi inserat ntr-o pagin web. Astfel, se poate seta instalarea automat a unui player QuickTime n cazul n care nu este deja instalat. Sintaxa folosit n mod uzual este de forma urmtoare: <OBJECT WIDTH="240" HEIGHT="300" CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"> <PARAM NAME="src" VALUE="sample.mov"> <PARAM NAME="autoplay" VALUE="true"> <PARAM NAME="controller" VALUE="true"> </OBJECT> Atributele width i height trebuie setate astfel nct s corespund dimensiunii fimului QuickTime (n pixeli). Atributul classid identific n mod unic software-ul ce va rula filmul. Trebuie setat "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" astfel nct s identifice controlul ActiveX ce trebuie instalat pe computer nainte ca filmul s poat fi rulat. Dac utilizatorul nu are instalat respectivul control ActiveX, browser-ul poate n mod automat s-l descarce i s-l instaleze. Atributul codebase specific calea (URI-ul) n care se gsete clasa obiectului specificat prin atributul classid. Internet Explorer folosete acest atribut pentru a specifica loca ia de unde poate fi descrcat player-ul corespunztor. n acest caz, trebuie setat "http://www.apple.com/qtactivex/qtplugin.cab", aceasta fiind loca ia unde se gsete ultima variant a player-ului QuickTime. Parametrul src trebuie s se orienteze asupra fiierului ce con ine filmul. Parametrul autoplay se seteaz "true" n cazul n care se dorete ca filmul s nceap s ruleze automat.

La fel i parametrul controller se seteaz "true" n cazul n care se dorete s fie afiat bara de control a player-ului. n urma inserrii codului prezentat mai sus, rezultatul va fi urmtorul:

12.6. Inserarea unui film Real Video ntr-o pagin web Formatul RealVideo a fost dezvoltat pentru Internet de ctre Real Media. Formatul permite difuzarea de informa ii video (video on-line, Internet video) cu l ime de band joas. Din cauza acestei l imi de band, calitatea este, de cele mai multe ori, slab. Fiierele de tip RealVideo au extensia .rm sau .ram. Cu ajutorul elementului <OBJECT> se introduce codul n pagina web astfel nct filmele Real Video s poat fi inserate ntr-o pagin web. Spre deosebire de formatul QuickTime, nu se poate seta instalarea automat a player-ului corespunztor n cazul n care nu este deja instalat. Prin urmare, nainte de a putea rula un film n format Real Video, este necesar instalarea programului RealPlayer. Versiunea pentru Windows poate fi descrcat de la adresa http://uk.real.com/player/win. Sintaxa folosit n mod uzual este de forma urmtoare: <OBJECT WIDTH="320" HEIGHT="240" CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">

<PARAM NAME="controls" VALUE="All"> <PARAM NAME="autostart" VALUE="true"> <PARAM NAME="src" VALUE="sample.rm"> </OBJECT> Atributele width i height trebuie setate astfel nct s corespund dimensiunii fimului Real Video (n pixeli). Atributul classid identific n mod unic software-ul ce va rula filmul. Trebuie setat "clsid: CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" astfel nct s identifice controlul ActiveX ce trebuie instalat pe computer nainte ca filmul s poat fi rulat. Parametrul src trebuie s se orienteze asupra fiierului ce con ine filmul. Parametrul autostart se seteaz "true" n cazul n care se dorete ca filmul s nceap s ruleze automat. Parametrul controls se seteaz "All" n cazul n care se dorete s fie afiat bara de control a player-ului sau "ImageWindow " n cazul n care NU se dorete s fie afiat bara de control a player-ului. n urma inserrii codului prezentat mai sus, rezultatul va fi urmtorul:

12.7. Alte metode de inserare a unor sunete ntr-o pagin web Aa cum am atras aten ia anterior, pentru introducerea de sunete ntr-o pagin web mai pot fi folosite i alte elemente, cum ar fi <BGSOUND>, recunoscut de Internet Explorer, i <EMBED>, recunoscut de Internet Explorer i Netscape.

Elementul <BGSOUND> este folosit pentru a insera un sunet pe fundalul unei pagini web. Fiierele suportate de acest element pot fi n format WAV, AU sau MID. Atributele caracteristice acestui element sunt: Atribut balance delay id loop src title volume Descriere Precizeaz balansul. Poate lua valori ntre -10000 (100% stnga) i +10000 (100% dreapta). Definete timpul de pauz dintre repeti ii. Definete un identificator atribuit sunetului. Precizeaz de cte ori va fi repetat sunetul (-1 = infinit). Precizeaz loca ia (URL-ul) fiierului ce con ine sunete. Precizeaz un titlu atribuit sunetului. Precizeaz volumul. Poate lua valori ntre 0 (max.) i -10000 (min.).

Sintaxa folosirii acestui element este foarte simpl: <HTML> <BODY> <H2>Muzica in fundal </H2> <BGSOUND SRC="town.mid"> </BODY> </HTML> Folosind codul de mai sus ve i ob ine o pagin web pe fundalul crei se va auzi o pies instrumental. Elementul <EMBED> este folosit pentru a insera elemente multimedia ntr-o pagin web n cazul browsere-lor care nu suport elementul <OBJECT>. Elementul <OBJECT> poate fi folosit cu browserele mai noi, care suport controale ActiveX (Internet Explorer 5), n vreme ce elementul <EMBED> este recomandat s fie folosit pentru browserele mai vechi. Pentru compatibilitate, se recomand folosirea simultan a celor dou elemente. n aceast situa ie, un browser care recunoate elementul <OBJECT> va ignora elementul <EMBED>. Atributele caracteristice acestui element sunt: Atribut autostart height hidden Descriere Stabilete dac obiectul multimedia pornete n mod automat la ncrcarea paginii web. Poate lua valorile true sau false. Specific nl imea suprafe ei n care va fi afiat obiectul. Stabilete dac obiectul multimedia este vizibil pentru vizitatorul paginii

web. Poate lua valorile true sau false. src width volume Precizeaz loca ia (URL-ul) fiierului ce con ine sunete. Specific l imea suprafe ei n care va fi afiat obiectul. Precizeaz volumul. Poate lua valori ntre 0 (max.) i -10000 (min.).

mpreun cu elementul <EMBED> se recomand folosirea elementului <NOEMBED> care ar trebui s con in informa ii ce vor fi afiate n cazul n care browserul nu suport elementul <EMBED>. Din nefericire, un browser care suport elementul <EMBED> va ignora elementul <NOEMBED>, chiar dac este incapabil s afieze obiectul introdus de elementul <EMBED>. Sintaxa recomandat pentru folosirea acestui element este urmtoarea: <EMBED SRC="cale/fiier_multimedia" WIDTH="..." HEIGHT="..." > <NOEMBED> <P>Din pcate nu ave i instalat plugin-ul corespunztor pentru a vedea acest tip de fiier multimedia. Pute i vedea n continuare o imagine edificatoare. <IMG SRC="cale/fiier_imagine" WIDTH="..." HEIGHT="..." ALT="o imagine edificatoare"> </NOEMBED> Se poate folosi chiar i o combina ie ntre elementele <EMBED> i <BGSOUND>, astfel nct, dac unul din elemente nu este suportat de browser, s fie recunoscut cellalt. Folosirea codului urmtor <HTML> <BODY> <EMBED SRC="town.mid" WIDTH="100" HEIGHT="40" > <NOEMBED> <H2>Muzica in fundal </H2> <BGSOUND SRC="town.mid"> </NOEMBED> </BODY> </HTML> va avea ca rezultat afiarea urmtorului rezultat:

Not: Bara de control afiat apar ine player-ului QuickTime deoarece a fost setat ca "Default Player" pentru fiierele de tip .MID. 12.8. Aplica ie practic Pentru exemplificare, vom crea un fiier test12.html ce va cuprinde o parte dintre elementele prezentate anterior: <HTML> <HEAD> <TITLE>Adaugarea de informatii multimedia unei pagini web</TITLE> </HEAD> <BODY> <H2>Inserarea unei imagini</H2> <OBJECT HEIGHT="200" WIDTH="200" TYPE="image/jpeg" DATA="computer.jpg"> </OBJECT> <BR> <H2>Inserarea unui sunet (format .wav)</H2> <OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <PARAM NAME="FileName" VALUE="horse.wav"> <EMBED SRC="horse.wav" WIDTH="100" HEIGHT="40" > <NOEMBED> Browser-ul dvs. nu suport elementele OBJECT i nici EMBED </NOEMBED> </OBJECT> <BR> <H2>Inserarea unui film (format .wmv)</H2> <OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <PARAM NAME="FileName" VALUE="movie.wmv"> </OBJECT> <BR> <H2>Inserarea unei pagini web</H2> <OBJECT TYPE="text/html" HEIGHT="200" WIDTH="400" DATA="test10.html"> </OBJECT>

<BR> <H2>Inserarea unei animatit Flash (format .swf)</H2> <OBJECT WIDTH="400" HEIGHT="200" CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swfla sh.cab#4,0,0,0"> <PARAM NAME="SRC" VALUE="flash.swf"> </OBJECT> </BODY> </HTML> Rezultatul afiat n browser-ul IE va fi urmtorul:

CAP. 13. ELEMENTE SPECIALE 13.1. Meta-Elementele Scopul elementelor meta este de oferi informa ii despre con inutul documentului web. Mai poart numele de metadate, adic sunt date care descriu alte date. Sunt marcate prin tag-ul <META>, nu necesit tag de nchidere, iar folosirea lor este op ional. ntr-un document web pot fi incluse un numr nelimitat de astfel de elemente. Aceste elemente pot fi incluse numai n interiorul sec iunii <HEAD> a unui document web. Dei ofer informa ii relevante pentru browser i pentru motoarele de cutare, descriind con inutul documentului web, acestea nu sunt afiate de ctre browsere. Cele mai importante atribute ale acestui element sunt: Atribut Valoare author description keywords generator revised others content-type expires refresh set-cookie Descriere - autorul documentului - descrierea documentului - cuvinte cheie - programul cu care a fost generat codul - data ultimei actualizri (eventual i autorul) - etc. - tipul i setul de caractere - data i ora la care expir documentul - specific timpul i un alt URL ce va fi ncrcat - seteaz numele i valoarea pentru cookie-uri

name

http-equiv

Caracteristic acestui element este faptul c fiecare cuprinde o pereche de atribute. Astfel, descrierea unui document web se poate realiza folosind urmtoarea sintax: <META NAME="description" CONTENT="con inut"> Definirea cuvintelor cheie, util pentru unele motoare de cutare, se poate realiza folosind urmtoarea sintax: <META NAME="keywords" CONTENT="aici nirui i cuvinte cheie relevante despre con inutul documentului web separate prin virgul"> Datorit abuzurilor unor webmasteri, prin repetarea n mod exagerat a unor cuvinte cheie, multe din motoarele de cutare existente astzi au ncetat s mai considere relevant informa ia cuprins n aceast sec iune i se axeaz pe analiza con inutului documentului. n cazul n care dori i s redirec iona i vizitatorii unei pagini ctre o alt pagin n mod automat, se folosete atributul HTTP-EQUIV cu valoarea refresh, n urmtoarea sintax:

<META HTTP-EQUIV="refresh" CONTENT="timp; URL=pagina_noua.html"> Variabila timp specific timpul (n secunde) dup care va fi ncrcat noul URL specificat n variabila pagina_noua.html. Aten ie la folosirea ghilimelelor care cuprind ntregul con inut al atributului CONTENT i la punctul i virgula care separ cele dou variabile. Este recomandat ca pentru utilizatorii cu browsere din vechile genera ii care nu fac refresh n mod automat s aduga i un link n sec iunea <BODY> a documentului, astfel nct vizitatorii s poat fi redirec iona i manual ctre o alt pagin web. Pentru a insera informa ii despre tipul de document web (valoarea prestabilit a acestuia este text/html) i despre setul de caractere utilizat n document, se atribuie valoarea content-type atributului HTTP-EQUIV, iar variabilele asociate atributului CONTENT vor con ine respectivele informa ii n urmtoare sintax: <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=windows-1250"> Setul de caractere windows-1250 con ine setul de caractere utilizat n Europa Central i de Est (Belarus, Croa ia, Cehia, Ungaria, Polonia, Romnia, Serbia, Slovacia, Slovenia). 13.2. Inserarea comentariilor n multe situa ii este necesar inserarea de comentarii ncodul surs al unui document web. Astfel de comentarii sunt ignorate de ctre browser. Pute i folosi comentariile pentru a explica codul scris la un moment dat, ceea ce v-ar putea ajuta ulterior, n cazul n care dori i s modifica i codul. De asemenea, n interiorul comentariilor pot fi stocate informa ii specifice pentru anumite programe, care nu vor fi vizibile pentru utilizatori dat vor fi totui interpretate de programele respective. O practic des ntlnit este de a insera scripturile Javascript ;i elementele de stil n interiorul comentariilor, astfel nct browserele care nu recunoscul respectivele elemente s nu le afieze. Tag-urile care definesc un comentariu sunt <!-- i respectiv -->. Comentariile pot fi plasate oriunde n interiorul unui document web. Sintaxa uzual este de forma: <!-- n aceast sec iune este cuprins un comentariu -->. Not: V recomand s folosi i totui cu msur comentariile n interiorul unui document web deoarece, ca orice alt element, mrete dimensiunea fiierului HTML ceea ce duce, implicit, la un timp mai mare de ncrcare n browser.

13.3. Aplica ie practic Pentru a exemplifica cele prezentate anterior, vom crea un fiier test13.html ce va avea urmtorul con inut: <HTML> <HEAD> <META HTTP-EQUIV="refresh" CONTENT="5;URL=test13b.html"> <!-- Dupa cum observati, am inlocuit variabila timp cu 5 (ceea ce semnifica 5 secunde) si variabila pagina_noua.html cu test13b.html --> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=windows-1250"> <!-- Am specificat tipul de document HTML si setul de caractere folosit utilizat pentru Europa Centrala si de Est --> <META NAME="description" CONTENT="Pagina web ce prezinta exemple de folosire a unor elemente speciale HTML"> <!-- Am inserat o descriere pe scurt a continutului documentului --> <META NAME="keywords" CONTENT="HTML, web, refresh, meta, comentariu, exemplu"> <!-- Am adaugat cateva cuvinte cheie despartite prin virgula --> </HEAD> <BODY> <P>Peste 5 secunde veti fi directionat catre pagina <A HREF="test13b.html">test13b.html</A>. <!-- Pentru browserele care nu suporta REFRESH, am adaugat link-ul respectiv --> <BR>Daca nu sunteti redirectionat, va rugam sa dati click pe link.</P> </BODY> </HTML> Rezultatul afiat n browser-ul IE va fi urmtorul:

Fiierul test13b.html are urmtorul con inut: <HTML>

<BODY> <P>Dati click pe urmatorul link pentru a reveni in pagina anterioara <A HREF="test13.html">test13.html</A></P> </BODY> </HTML> Rezultatul afiat n browser-ul IE va fi urmtorul:

CAP. 14. CONSIDERA II GENERALE DESPRE DESIGN I ASPECT Este simplu s faci o pagin web, dar este important s faci o pagin web bun. De ce afirm c este simplu s faci o pagin web? Pentru c orice are un editor HTML de tipul WYSIWYG (WhatYou See Is What You Get) poate realiza o pagin web fr a fi nevoit s n eleag complexitatea unei pagini web privit ca un ntreg. n acest capitol vom face o scurt trecere n revist a aspectelor ce determin realizarea unei pagini web bune i a problemelor cu care v-a i putea confrunta. 14.1. Diferen e dintre un document web i unul tiprit n contrast cu un document tiprit, un document web este ceva complet diferit. n acest caz, designerul are prea pu in control asupra felului n care este afiat o pagin, ntruct acest lucru depinde n mare msur de browserul web folosit. Dei frustrant, a face o pagin web s fie afiat la fel n diferite browsere este un lucru extraordinar, constituind o provocare pentru majoritatea webdesignerilor. Cnd creeaz un site, un webdesigner trebuie s in cont de urmtoarele: Varietatea browserelor Varietatea versiunilor pentru acelai tip de browser Varietatea sistemelor de operare folosite Varietatea adncimii culorii pe monitoarele vizitatorilor Varietatea rezolu iilor alese de diveri utilizator Etc. Cu un numr att de mare de variabile de care depinde afiarea unei pagini web, nu este posibil ntotdeauna ca o pagin web s fie afiat n mod identic pe dou calculatoare diferite. i, aa cum am precizat i anterior, acest lucru constituie o adevarat provocare pentru webdesigneri. n orice caz, trebuie s ine i cont ca un site nu este fcut pentru voi sau pentru eful vostru. Numai pentru c exist o introducere fcut n Flash pe un site nu nseamn c trebuie s ave i i voi o introducere similar. Un site trebuie creat n func ie de public int cruia i se adreseaz. Acetia pot fi clien i sau poten iali clien i. Un bun webdesigner i privete rezultatul muncii prin ochii unui poten ial client. De exemplu, dac concepe i un site adresat persoanelor mai n vrst, trebuie s ave i grij s oferi i site-ului un aspect simplu, uor de urmrit, cu fonturi pu in mai mari dect de obicei. Trebuie s analiza i cu regularitate statisticile referitoare la site pentru a vedea ce browsere sunt folosite de majoritatea vizitatorilor, ce sisteme de operare folosesc, dac folosesc platforma Javascript de la Sun, sau dac au activate anumite controale ActiveX. Pentru a ob ine astfel de informa ii pute i folosi fie scripturile proprii, fie nscrie i propriul site ntr-unul dintre site-urile de analiz existente pe Internet (de exemplu www.trafic.ro sau www.statistics.ro). 14.2. Mrimea optim a unei paginii web i optimizarea ei

Optimizarea paginilor web este unul din aspectele cele importante ale webdesignului. O pagin web optimizat se ncarc mult mai repede pe calculatorul vizitatorului i astfel informa ia ajunge mult mai repede la int. Paginile care se ncarc greu, i aici facem referire la paginile care se ncarc n mai mult de 10 secunde, sau care au o introducere facut n Flash, pot duce la pierderea unei pr i dintre vizitatori, n special a celor care nu au suficient rbdare. Nimic nu-i mpiedic s apese unul din butoanele Back sau Close Window. Cu toate acestea, introducerile create n Flash ofer i avantaje prin faptul c pot fi foarte atractive din punct de vedere vizual i ofer posibilitatea folosirii unor meniu interactive. Pentru a stabili mrimea optim a unei pagini web trebuie s ave i n vedere cei patru factori care influen eaz ncrcarea ntr-un browser: mrimea fiierului care con ine codul HTML l imea de band a conexiunii vizitatorilor viteza procesorului serverului care gzdueite pagina web complexitatea paginii web Din moment ce nu pute i interveni asupra conexiunii vizitatorilor, trebuie s v ocupa i de ceilal i factori. Astfel, ncerca i s gzdui i pagina web un server foarte rapid, optimiza i pagina web prin cur area codului HTML de elementele redundante, de grafica excesiv, de elementele multimedia care nu sunt strict necesare etc. ceea ce va avea ca rezultat micorarea dimensiunii fiierului surs. Dac este vorba despre un site care se adreseaz tuturor categoriilor de utilizatori, atunci mrimea fiecrei pagini web nu trebuie s depeasc 75 kb. Astfel, ve i avea garan ia c fiecare pagin se ncarc n doar cteva secunde. La calcularea mrimii unei pagini web se iau n calcul nu numai fiierul HTML, ci i toate elementele grafice i multimedia folosite, inclusiv imaginile de fundal, inclusiv scripturile Javascript externe (fiiere cu extensia .js), inclusiv foile de stil (fiiere cu extensia .css), scripturi PHP etc. 14.3. Structura i aspectul unui site Structura directoarelor trebuie s fie logic i s reflecte aspectul propriului site. Un site poate ncepe ca o simpl pagin web, se poate dezvolta ntr-un set de cteva pagini, iar n timp, n func ie de ct de important dori i s fie prezen a voastr pe Internet, poate ajunge chiar i la sute de pagini. Coordonarea unui numr mare de pagini poate fi un lucru extrem de dificil mai ales dac nu se lucreaz ntr-un mod coerent de la nceput. Astfel, trebuie evitat amestecul tuturor fiierelor ntr-un singur director, fiind necesar gruparea lor n func ie de caracteristicile similare. De exemplu, toate imaginile incluse ntr-un site trebuie grupate ntr-un director separat, cum ar fi imagini. Acesta, la rndul su, se poate mpr i n subdirectoare cu denumiri sugestive: pictograme, butoane sau fundaluri. n mod similar pot fi separate i fiierele de alt tip, cum ar fi cele Javascript, PHP sau ASP, care pot fi incluse n directoare cu nume sugestive. Denumirea dat unui director sau subdirector depinde numai de voi i, chiar dac este consumatoare de timp, cu siguran va ajuta la n elegerea structurii site-ului de ctre oricine va dori s-i aduc modificri.

Referitor la aspect, trebuie inut cont de faptul c o pagin web ncepe n col ul din stnga sus i se poate ntinde orict spre dreapta sau n jos. Acesta face s poat fi infinit de lat i de lung.

Este recomandabil ca o pagin s nu necesite derulare spre dreapta, de aceea, nainte de a publica o pagin web pe Internet, trebuie testat modul n care se comport n func ie de diferite rezolu ii ale monitorului. Dintre acestea, cele mai uzuale sunt: 640 x 480 (valabil pentru sistemele foarte vechi) 800 x 600 1024 x 768 1280 x 1024 1600 x 1280 Altele (valabile pentru Mac i Web TV) 14.4. Combinarea culorilor Alegerea combina iei de culori potrivite este esen ial pentru orice site. Aceasta trebuie s reflecte, pe ct de mult posibil, con inutul site-ului. O bun combina ie de culori poate deschide drumul spre succes, n vreme ce una aleas n mod nefericit poate duce la eecul unui site. Asigura i-v c alege i ntr-un mod chibzuit combina ia de culori care s se potriveasc temei site-ului. Aceste culori trebuie s fie complementare culorilor folosite pentru logo-ul ales sau n contrast cu acesta, tocmai pentru a-l eviden ia. Re ine i c efectul unei singure colori se schimb, uneori chiar dramatic, cnd este folosit n combina ie cu alte culori. De exemplu, culoarea roie este evitat de obicei de site-urile ce ofer informa ii financiare, n vreme ce combina iile de albastru i gri au fost ntotdeauna o bun alegere pentru site-urile profesionale. 14.5. Tipurile de caractere folosite Dac sim i i un impuls irezistibil s folosi i un tip de caracter (font) incredibil de aspectuos sau unul care reproduce scrisul de mn, sfatul meu este s v re ine i un astfel de impuls. Una dintre multitudinea de variabile din webdesign o constituie i disponibilitatea unor anumite fonturi pe computerele vizitatorilor. De exemplu, dac folosi i pentru afiarea textului un font ce se gsete n computerul vostru, cum ar fi Palatino, dar acesta nu se gsete i n computerul unui

vizitator, browserul va nlocui fontul respectiv cu altul implicit, cum ar fi Times New Roman sau Arial. Acest lucru va avea drept consecin schimbarea drastic a aspectului paginii afiate i toat strduin a voastr pentru realizarea unui site atractiv va rmne fr rezultat. Pentru o maxim compatibilitate a tipurilor de caractere ntre diveri utilizatori i diverse browsere, sunt recomandate trei familii de fonturi: Familia fonturilor fr piciorue (Sans-serif) Arial, Verdana, Geneva, Helvetica, Sans-serif Familia fonturilor cu piciorue (Serif) Times, Times New Roman, Georgia, Serif Familia fonturilor fr monospa iate (Monospace) Courier, Courier New, Monospace Evident, exist i metode de a folosi fonturi deosebite ntr-o pagin web. Cea mai simpl dintre acestea este de a transforma textul respectiv ntr-o imagine, folosind o serie de programe adecvate. Dar, cum totul are un pre , acesta va contribui la creterea dimensiunii paginii web i, implicit, la o ncrcare mai lent. Am tot amintit de diversitatea browserelor existente. Nu v oprete nimeni s descrca i o copie a fiecruia dintre ele, mai ales c sunt gratuite, i s le instala i n propriul computer. Astfel ve i putea testa propriul site pe cteva dintre cele mai folosite browsere (Internet Explore, Netscape Navigator, Mozilla Firefox, Opera).

NCHEIERE n cazul n care acest ghid i-a atins scopul i a i reuit s deprinde i cele mai importante no iuni legate de limbajul HTML, nseamn c deja pute i crea un site. Tot ce v mai rmne de fcut este s gsi i un server gazd, unul gratuit pentru nceput, unde s posta i site-ul. Dintre acestea v recomandm: www.3x.ro www.home.ro sau www.go.ro www.idilis.ro www.rol.ro Dupa ce v-a i gsit o gazd pentru a v plasa site-ul sau pagina web, trebuie s ncepe i crearea paginilor. Este indicat s ave i dou copii ale documentului. O copie trebuie s fie pe serverul gazdei iar a doua pe computerul personal, astfel nct problemele cauzate de cderile de curent, pierderea conexiunii la internet s nu v afecteze munca. n continuare, urmnd recomandrile din capitolul precedent, va trebui s crea i un director pe hard disk pentru a stoca documentele HTML, imaginile, sunetele, precum i celelalte elemente pe care dori i s le include i n paginile web. Pagina principal trebuie denumit "index.html", majoritatea serverelor fiind setate s recunoasc pagina principal dup aceast denumire. n cazul n care "index.html" nu func ioneaz ca pagin principal, contacta i persoana care administreaz server-ul i ntreba i-l ce denumire implict are setat server-ul pentru a recunoate pagina principal. Cea mai bun experien n webdesign o ve i cpta navignd pe Internet. Pute i salva o copie complet a site-urilor care v re in aten ia i le pute i studia codul surs pentru a analiza (nu copia) modul n care au fost fcute. V doresc succes!