GRUPUL COLAR DE ARTE I MESERII AL COOPERAIEI METEUGRETI SPIRU HARET, CRAIOVA

COALA POSTLICEAL SPECIALIZAREA ANALIST PROGRAMATOR

Pagini WEB n HTML

NDRUMTOR, Prof. OLTEANU Mihaela

ABSOLVENT, DRAGOMIR Laureniu Marius

CRAIOVA 2009 Planul lucrrii

Argument Capitolul 1. ..................................................................................................... Introducere n limbajul HTML .. 1.1. Structura unui document HTML . 1.1.1. Seciunea HEAD .. 1.1.2. Seciunea BODY .. Etichete (tag-uri) i atribute HTML ... 2.1. Etichete (tag-uri)...... 2.2. Atribute ... Formatarea textului ........ 3.1. Formatarea titlului .. 3.2. Formatarea textului . 3.3. Utilizarea caracterelor speciale ... Despre culori . 4.1. Sistemul de definire a culorilor ... 4.2. Corespondena dintre codurile hexazecimal i zecimal .. 4.3. Culoarea fundalului . 4.4. Culoarea textului . 4.5. Culoarea legturilor . 4.6. Culori sigure Imagini i elemente multimedia .. 5.1. Formatele fiierelor grafice . 5.1.1. Formatul GIF ............ 5.1.2. Formatul JPEG ............. 5.2. Inserarea unei imagini . 5.3. Dimensionarea imaginii .. 5.4. Alinierea imaginii i a textului 5.5. Imagini folosite ca fond (background) al paginii 5.6. Imaginile video ... 5.7. Sunetele ....... Cadre (frames) .. Legturile (referinele) 7.1. Legtura ctre o alt pagin - Link-urile . 7.2. Legtura ctre o seciune de pagin Ancorele ............. 7.3. Legtura ctre o adres de e-mail ........... 7.4. Utilizarea unei imagini ca legtur ......... 7.5. Schimbarea culorilor legturilor . Liste ... 8.1. Liste de tip definiie 8.2. Liste neordonate .. 4 6 7 8 9 11 11 11 13 13 13 16 18 18 19 19 20 20 21 22 22 22 22 23 23 24 25 25 27 29 33 33 34 34 35 35 36 36 36 2

Capitolul 2. Capitolul 3.

Capitolul 4.

Capitolul 5.

Capitolul 6. Capitolul 7.

Capitolul 8.

Capitolul 9. Capitolul 10.

Bibliografie selectiv Anexe

8.3. Liste ordonate .. 8.4. Personalizarea listelor . Tabele Formulare . 10.1. Elementele unui formular .. 10.1.1. Cmpurile de editare .............. 10.1.2. Butoanele radio .. 10.1.3. Casetele de validare ... 10.1.4. Casetele de fiiere .............. 10.1.5. Listele de selecie ... 10.1.6. Butoanele de tip Submit i Reset 10.2. Trimiterea datelor dintr-un formular prin e-mail .. ..................................................................................................... ....................................................................................................

37 38 39 46 46 46 47 48 48 49 49 50 51 52

Argument
Unul din primele elemente fundamentale ale WWW (World Wide Web) este HTML (Hypertext Markup Language), care descrie formatul primar n care documentele sunt distribuite i vzute pe Web. Multe din trsturile lui, cum ar fi independena fa de platforma, structurarea formatrii i legturile hipertext, fac din el un foarte bun format pentru documentele Internet i Web. HTML este o abreviere de la Hypertext Markup Language i reprezint scheletul oricrei pagini de Web. HTML nu este un limbaj de programare ci un limbaj descriptiv, prin care sunt descrise elementele structurale ale paginii de Web: titlurile, listele, tabelele, paragrafele, legturile cu alte pagini, precum i aspectul pe care l are pagina din punct de vedere grafic. n fond, HTML este modul n care i comunicm browserului ce elemente dorim s introducem n pagina Web i care este aspectul acestora. Structurat n 10 capitole crora li se adaug trei anexe i bibliografia aferent, prezenta lucrare reprezint o scurt prezentare a limbajului HTML. n primul capitol (Introducere n limbajul HTML) este prezentat structura unui document HTML precum i cele dou pri componente ale fiecrui document HTML: seciunea HEAD i BODY. Cel de-al doilea capitol (Etichete (tag-uri) i atribute HTML) prezint marcajele sau etichetele pe care limbajul HTML le folosete alturi de texte pentru a ajuta browser-ul de Internet s afieze corect coninutul paginii web precum i atributele fiecrui tag n parte. n capitolul al treilea (Formatarea textului) este prezentat modalitatea de aranjare a coninutului prezentat de fiecare pagin web. Capitolul al patrulea (Despre culori) prezint n cele ase subcapitolele ale sale informaii despre sistemul de definire a culorilor, corespondena dintre codurile hexazecimal i zecimal, culoarea fundalului, culoarea textului, culoarea legturilor i ntr-o seciune aparte sunt prezentate aa-numitele culori sigure. Capitolul al cincilea, (Imagini i elemente multimedia) ofer informaii despre acele elemente, fotografii, imagini animate, sunete sau imagini video, care confer paginilor Web un aspect atractiv i profesional. Cele apte subcapitole prezint informaii despre formatele fiierelor grafice (GIF i JPEG), despre modalitatea inserrii unei imagini, dimensionarea acesteia, alinierea imaginii i a textului, despre imaginile folosite ca fond (background) al paginii, despre imaginile video i despre sunete. Capitolul al aselea (Cadre) prezint modalitatea de organizare a paginilor web prin mprirea ferestrei browserului n mai multe ferestre distincte. Capitolul al aptelea (Legturile (referinele)) prezint modalitatea de navigare n cadrul site-urilor cu ajutorul link-urilor i ale ancorelor. Capitolul opt (Liste) prezint modalitatea de realizare a unei liste n cadrul unei pagini web, tipurile de liste precum i modaliti de personalizare a listelor. Urmtorul capitol (Tabele) prezint modalitatea de realizare a unui tabel. 4

Ultimul capitol (Formularele) ofer informaii despre metodele de interactivitate cu utilizatorii paginilor web prin intermediul formularelor, prezentnd elementele componente ale unui formular (cmpurile de editare, butoanele radio, casetele de validare, casetele de fiiere, listele de selecie i butoanele de tip Submit i Reset), precum i modalitatea de trimitere a datelor dintr-un formular prin e-mail. Lucrarea se ncheie cu trei anexe care conin o list a tag-urilor i a atributelor lor prezentate n ordine alfabetic, o list a caracterelor speciale, precum i o list cu numele i codurile culorilor sigure.

Capitolul 1. Introducere n limbajul HTML HTML (HyperText Markup Language) a fost dezvoltat iniial de Tim Berners-Lee n anul 1989, ca urmare a necesitii de publicare a informaiilor la nivel global. Pe parcursul anilor, limbajul a evoluat (HTML 3.0, HTML 3.2, HTML 4 i cel mai recent HTML 4.01), fiecare versiune oferind noi faciliti. Se remarc cteva trsturi cum ar fi: independena de platform (modul de afiare al unui document este acelai, indiferent de computerul pe care se realizeaz afiarea); structurarea formatrii; posibilitile hypertext (orice cuvnt, imagine sau alt element al documentului vizualizat de utilizator poate face referin la un alt document, ceea ce uureaz navigarea n cadrul aceluiai document sau ntre documente diferite). HTML este un limbaj simplu, compus din coduri speciale (marcaje) care se insereaz ntr-un text pentru a aduga informaii despre formatare. Este derivat din SGML (Standard Generalized Markup Language), un sistem pentru definirea tipurilor de documente structurate, destinat s reprezinte instane ale acestor tipuri de documente. La baza SGML i a HTML se afl acelai principiu: descrierea coninutului unui document se face ntr-un fiier text obinuit (ASCII). S-a urmrit ca aceste fiiere s fie editabile cu aplicaii software nepretenioase (ex. NotePad, WordPad). n cadrul unui document HTML, un marcaj (tag, n limba englez) va avea forma <nume_marcaj>. Parantezele unghiulare sunt elementele care indic prezena unui marcaj; numele marcajelor poate fi scris oricum, limbajul nefiind senzitiv la literele mari/mici (case sensitive). Unele marcaje permit utilizarea unor atribute care se vor scrie n marcajul de inceput: <nume_marcaj optiune1=valoare1 optiune2=valoare2 ...> ................ </nume_marcaj> Exista dou tipuri de marcaje: - individuale (ex. <br>) - perechi (ex. <p>...</p>) - de menionat c sfritul unui marcaj este indicat prin utilizarea caracterului '/' n faa numelui de marcaj. n funcie de modul de formatare a paginii, avem marcaje de tip: - block: este afiat sub elementul anterior (ex. <p>); - inline: este afiat dup elementul anterior (ex. <span>); - table: este afiat sub forma unui tabel. Marcajele perechi pot fi imbricate: <nume_marcaj1> <nume_marcaj2> ............... </nume_marcaj2> 7

</nume_marcaj1> Browserele vor ignora marcajele i opiunile pe care nu le recunosc. 1.1. Structura unui document HTML Un document HTML 4 are urmtoarea structura: 1. o linie coninnd versiunea HTML; 2. seciunea HEAD, delimitat de marcajele <HEAD> </HEAD>; 3. seciunea BODY, delimitat de marcajele <BODY> </BODY> sau <FRAMESET> </FRAMESET> EXEMPLU: <HTML> <HEAD> <TITLE>Prima mea pagina web</TITLE> </HEAD> <BODY> text text text text text text text text </BODY> </HTML> Un document HTML valid conine declaraia versiunii HTML utilizate. Declaraia se face prin intermediul DTD (document type definition). Pe scurt, fiierul DTD conine definiiile marcajelor din versiunea respectiv de HTML. HTML 4.01 specifica 3 variante DTD : HTML 4.01 Strict DTD include toate elementele i atributele care nu sunt "nvechite" (elemente si atribute a cror utilizare nu este recomandat deoarece se dorete renunarea la acestea pe viitor) sau care nu apar n documentele ce conin cadre. HTML 4.01 Transitional DTD include Strict DTD plus elementele i atributele "nvechite". HTML 4.01 Frameset DTD include Transitional DTD plus cadrele (frames).
HTML 4.01 Strict DTD HTML 4.01 Transitional DTD HTML 4.01 Frameset DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN" "http://www.w3.org/TR/HTML4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Frameset//EN" "http://www.w3.org/TR/HTML4/frameset.dtd"> 4.01 4.01

1.1.1 Seciunea HEAD 8

Cuprinde informaii care nu vor fi afiate n browser, cu excepia marcajului <TITLE> Marcajul <TITLE> este obligatoriu i poate apare doar in seciunea HEAD. El va conine un titlu relevant pentru pagin, fiind deosebit de important pentru motoarele de cutare. Alte marcaje care apar n seciune HEAD: <META> - poate conine cuvinte cheie, o descriere a paginii, numele autorului paginii, frecvena (teoretic) cu care motoarele de cutare ar trebui s reindexeze pagina, etc. Declaraiile META implic n general declararea unei proprieti i a valorii asociate acelei proprieti. <META name="nume" content="continut"> Declararea setului de caractere se face astfel: <META http-equiv="Content-Type" content="text/HTML; charset=set_caractere"> Precizarea setului de caractere face posibil afiarea n browserul utilizatorului a caracterelor specifice unor limbi precum romna, rusa, araba, etc. <STYLE>- cascading STYLE sheets - stiluri pentru formatarea textului din documentul HTML. <STYLE type="text/css">...</STYLE> <SCRIPT> - scripturi JavaScript sau VBScript <SCRIPT language="JavaScript1.2" type="text/javascript" src="lib.js"></SCRIPT> <BASE> - stabileste URL-ul de "baza" al documentului. Toate referintele (<a href=""></a>, respectiv <img src="">) din documentul respectiv vor fi deschise relativ la marcajul <base>. <HEAD> <BASE href="http://www.xprim.ro/index.php" target="_top"> </HEAD> <LINK> - stabilete o legtur cu un document extern, spre exemplu un fiier de definiii CSS. <LINK rel="STYLEsheet" href="stiluri.css" type="text/css"> EXEMPLU: Seciunea HEAD a unui document HTML poate arat n felul urmtor: <HEAD> <TITLE>Titlul paginii</TITLE> <META http-equiv="Content-Type" content="text/HTML; charset=windows-1250"> <META name="author" content="Marinescu Ion"> <META name="copyright" content=" 2009 Marinescu Ion"> <META name="keywords" content="curs, HTML, tutorial"> <LINK rel="STYLEsheet" href="stiluri.css" type="text/css"> </HEAD> 9

1.1.2 Seciunea BODY Este inclus ntre marcajele <BODY>...... </BODY> <BODY [ BACKGROUND="adresa_imagine"] [ BGCOLOR="#rrggbb"|"culoare"] [ TEXT="#rrggbb"|"culoare"] [ LINK="#rrggbb"|"culoare"] [ VLINK="#rrggbb"|"culoare"] [ ALINK="#rrggbb"|"culoare"] [ LEFTMARGIN=marg_st] [ TOPMARGIN=marg_top]> ................ continut document ................. </BODY> Marcajul de sfrit (</BODY>) nu este obligatoriu. n seciunea BODY se gsete informaia care va fi afiat n browser (text, imagini, etc.) (<BODY>.... </BODY>). LEFTMARGIN i TOPMARGIN sunt extensii Microsoft (nu funcioneaz dect n Internet Explorer 3+). LEFTMARGIN precizeaz, n pixeli, marginea stng a documentului (distana dintre fereastra i coninutul documentului); TOPMARGIN precizeaz, in pixeli, marginea de sus a documentului (distana dintre fereastr i coninutul documentului). Ca n orice limbaj de programare n HTML exist posibilitatea de a introduce comentarii, folosind marcajul <!-- .... textul comentariului --> EXEMPLU : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd"> <HTML> <HEAD> <TITLE>Titlul paginii mele</TITLE> <META http-equiv="Content-Type" content="text/HTML; charset=windows-1250"> <META name="author" content="Marinescu Ion"> <META name="copyright" content=" 2009 Marinescu Ion"> <META name="keywords" content="curs, HTML, tutorial"> <LINK rel="STYLEsheet" href="stiluri.css" type="text/css"> </HEAD> <BODY bgcolor="#999999" leftmargin=0 topmargin=0> <!--Acest comentariu nu va fi afisat in browser --> <p>text text text text text text text text text text </p> <p>alt text alt text alt text alt text alt text </p> </BODY> </HTML> 10

n exemplul de mai sus a aprut un nou marcaj <p> (paragraf). Alturi de el trebuie menionate marcajele <h1>, <h2>, <h3>, <h4>, <h5>, <h6> (HEADings toate necesit marcaj de nchidere) care sunt folosite n general pentru evidenierea titlurilor. Pentru formatarea textului pot fi folosite i marcajele: <b>...</b> - caractere ngroate; <i>...</i> - caractere nclinate; <u>...</u> - caractere subliniate; <s>...</s> - caractere "tiate"; <pre>...</pre> - marcajul de informaie preformatat ; conserv toata caracterele si spaierile de linii; utilizeaz un font diferit (Courier); ^... - exponent; _... - indice; <br> - "rupe" textul, trecnd pe o linie nou - poate apare oriunde in text; <hr> - traseaz o linie subire orizontal; <font>...</font> ofer posibilitatea modificrii dimensiunii, culorii i a tipului de font utilizat; <span> este un marcaj de tip "inline". Se folosete n general n interiorul marcajelor de tip "block" (ex. <p>) n combinaie cu stilurile CSS, pentru a impune o formatare diferit de restul coninutului din marcajul "block" respective; spre deosebire de <span>, marcajul <div> este de tip "block". Se folosete n general pentru poziionare n cadrul documentului i pentru specificarea unor proprieti CSS care s fie aplicate textului din interiorul lui. <DIV [ ALIGN="left|center|right"] STYLE=".."> ................................. </DIV>

11

Capitolul 2. Etichete (tag-uri) i atribute HTML 2.1. Etichete (tag-uri) Tag-urile nu sunt altceva dect nite marcaje sau etichete pe care limbajul HTML le folosete alturi de texte pentru a ajuta browser-ul de Internet s afieze corect coninutul paginii web. Aceste tag-uri (etichete) pot fi de dou feluri: - tag-uri pereche (un tag de nceput i unul de ncheiere). Exemple: <HTML> i </HTML>; <TITLE> i </TITLE>; <HEAD> i </HEAD>; - tag-uri singulare (nu au un tag de ncheiere) Exemple: <HR>, <BR>. Tag-urile de baza pe care trebuie s le conin un document HTML: <HTML> - cu acest tag ncepe orice document HTML. Prin folosirea acestui tag i spunem browser-ului c este vorba de un fiier HTML pentru a l putea afia. <HEAD> - ntre aceste tag-uri sunt trecute, pe lng titlul paginii, diverse informaii folositoare pentru browser-ul de Internet; </HEAD> - acesta este tag-ul de ncheiere al tag-ului <HEAD>; <TITLE> - cu ajutorul acestei perechi de tag-uri se d un titlu paginii web. Astfel, textul scris ntre aceste tag-uri va fi afiat n bara de titlu a documentului. </TITLE> - este tag-ul de ncheiere al tag-ului <TITLE>. Arat sfritul titlului documentului. <BODY> - odat cu acest tag ncepe coninutul paginii web. Tot ce se scrie ntre tag-urile <BODY> i </BODY> va fi afiat, de ctre browser, pe ecranul monitorului. </BODY> - comunic browser-ului c s-a terminat de scris coninutul paginii. Tot ceea ce se scrie dup acest tag nu va mai fi afiat. </HTML> - este tag-ul de ncheiere al tag-ului <HTML>. Codul oricrui document se termina cu acest tag. 2.2. Atribute Atributele HTML furnizeaz informaii adiionale elementelor HTML. Tagurile HTML pot avea atribute. Acestea sunt ntotdeauna definite n tagul de nceput al unui element HTML. Sunt de forma: nume="valoare". EXEMPLU: Acest exemplu aliniaz textul la centrul paginii web. <h1 align = "center">Acesta e un text</h1> EXEMPLU: Acest exemplu aplic fundalului o culoare portocalie. <BODY bgcolor = "orange"> Text Text Text 12

</BODY> Pentru o mai bun difereniere i evideniere etichetele (tag-urile) HTML sunt scrise cu majuscule iar atributele asociate acestora sunt scrise cu litere mici. Valorile atributelor trebuie s fie ntotdeauna ncadrate n ghilimele. HTML nu este un limbaj case-sensitive, adic nu face distincia ntre literele mici i cele mari (majuscule). Aceasta nseamn c indiferent cum scriem etichetele, cu litere mari sau cu litere mici, ele vor fi corect interpretate de browser. Daca sintaxa nu este respectat, browserul ignor pur i simplu tagul, la fel dac valoarea unui atribut nu este una valid, ea va fi de asemenea ignorat.

13

Capitolul 3. Formatarea textului 3.1. Formatarea titlului Atunci cnd avem nevoie s folosim un titlu n cadrul paginii noastre web putem apela la tag-urile <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Cu ajutorul acestor tag-uri, care au i tag-uri de ncheiere, vom scrie titlurile din cadrul paginilor noastre web. Astfel n cadrul codului HTML vom folosi tag-ul <H1>, de exemplu, urmat de textul titlului, iar la sfrit vom folosi tag-ul de ncheiere </H1>. Tag-urile <H1> i </H1> permit scrierea unui titlu cu caracterele cele mai mari n timp ce textul ncadrat de tag-urile <H6> i </H6> va fi afiat cu caracterele cele mai mici, dup cum urmeaz:

Acesta este un titlu cu <H1>

Acesta este un titlu cu <H2>
Acesta este un titlu cu <H3> Acesta este un titlu cu <H4>
Acesta este un titlu cu <H5>
Acesta este un titlu cu <H6>

Tag-urile acestea accepta atributul ALIGN cu ajutorul cruia titlul va putea fi aliniat la stnga, la centru sau la dreapta. 3.2. Formatarea textului Pentru alegerea caracteristicilor unui text, putem folosi tag-ul <FONT>. Acest tag accept mai multe atribute (color, face, size) care ne vor ajuta n formatarea textelor. Atributul COLOR se refer la culoarea textului ce va fi ncadrat de tag-urile <FONT> i </FONT>, atributul FACE arat tipul fontului, iar atributul SIZE arat mrimea fontului. EXEMPLU: Linia de cod: <FONT COLOR=CornflowerBlue>Proiect diploma</FONT> va afia n cadrul browserului de Internet: Proiect diploma <FONT COLOR=#6495ED>Proiect diploma</FONT> va afia n cadrul browserului de Internet: Proiect diploma <FONT COLOR=#FF0000>Proiect diploma</FONT> va afia n cadrul browserului de Internet: Proiect diploma La tipul fontului, la fel ca i la culori, este bine s se foloseasc un font care se afl pe majoritatea calculatoarelor, pentru ca dac se folosete un font mai puin utilizat, muli utilizatori nu vor putea vedea textele din cadrul paginilor prezentate cu acelai font. Cele mai folosite fonturi pentru paginile web sunt urmtoarele: Acest text a fost scris cu fontul "arial" 14

Acest text a fost scris cu fontul "times new roman" Acest text a fost scris cu fontul "courier new" Acest text a fost scris cu fontul "verdana" <FONT COLOR=#000000 FACE=Arial>Acest text ...</FONT> Pentru a schimba dimensiunea implicit a fontului, vom folosi una din valorile atributului size. Acesta poate lua una din valorile 1,2,3,4,5,6,7 (1 pentru cea mai mic dimensiune i 7 pentru cea mai mare): <FONT COLOR=#FFA500 FACE=Arial SIZE=7>Proiect diploma</FONT>

size 7: Proiect diploma

size 6: Proiect diploma
size 5: Proiect diploma
size 4: Proiect diploma
size 3: Proiect diploma
size 2: Proiect diploma
size 1: Proiect diploma

Dac vrem ca textul nostru s fie scris cu caractere ngroate, folosim perechea de etichete <B> i </B>. <B>Text bold</B> Text bold Pentru ca textul s fie scris cu caractere italice, folosim perechea de etichete <I> i </I>. <I>Text italic</I> Text italic Pentru ca textul s fie subliniat, folosim perechea de etichete <U> i </U>. <U>Text subliniat</U> Text subliniat Dac vrem ca textul s fie afiat n centrul paginii putem folosi perechea de etichete <CENTER> i </CENTER>. <CENTER>Text centrat</CENTER> Text centrat Atunci cnd vrem ca textul din cadrul paginii noastre web s fie afiat pe mai multe rnduri vom folosi unul din tag-urile <BR> sau <P>. Tag-ul <BR> nu are tag de ncheiere, n timp ce tag-ul <P> are tag de ncheiere, ns nu este obligatoriu. 15

Tag-ul <BR> vine de la line break (ntrerupere de linie) i este folosit pentru a face trecerea de la o linie la alta. EXEMPLU: Avem urmtorul cod HTML: <HTML> <HEAD> <TITLE>Eticheta <BR></TITLE> </HEAD> <BODY> Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML. </BODY> </HTML> Acest cod va avea ca rezultat: Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML. EXEMPLU: Utilizarea etichetei <BR> in cadrul codului: <HTML> <HEAD> <TITLE>Eticheta <BR></TITLE> </HEAD> <BODY> Invat limbajul HTML.<BR>Exersez limbajul HTML.<BR>Stiu limbajul HTML. </BODY> </HTML> Acest cod va avea ca rezultat: Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML. Tag-ul <P> vine de la cuvntul paragraf si se deosebete de tag-ul <BR> prin faptul c prin utilizarea lui nu numai c se trece pe urmtorul rnd, dar se i las un rnd liber intre texte. Revenind la exemplul de mai sus, se vor folosi ambele tag-uri, <BR> i <P>, pentru a se vedea diferena dintre ele. <HTML> <HEAD> <TITLE>Eticheta <BR></TITLE> </HEAD> <BODY> 16

Invat limbajul HTML.<BR>Exersez limbajul HTML.<P>Stiu limbajul HTML. </BODY> </HTML> Acest cod va avea ca rezultat: Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML. Dac scriem un text ntre tag-urile <P> i </P>, atunci textul va fi ncadrat de cte un rnd liber, la fel ca n exemplul de mai jos: <HTML> <HEAD> <TITLE>Eticheta <BR></TITLE> </HEAD> <BODY> Invat limbajul HTML.<P>Exersez limbajul HTML.</P>Stiu limbajul HTML. </BODY> </HTML> Vom obine urmtorul rezultat: Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML. 3.3. Utilizarea caracterelor speciale Pentru ca browser-ul s citeasc diacriticele specifice limbii romne (, , , etc.) trebuie s scriem o anumit combinaie de diverse caractere. EXEMPLU: Iat n continuare codurile HTML pentru diacriticele specifice limbii romne. Pentru lista complet de caractere speciale vezi anexa 3. &#194; &#226; &#258; &#259; &#206; &#238; &#350; &#351; &#354; &#355;

EXEMPLU: 17

<HTML> <HEAD> <TITLE>Prima mea pagina web</TITLE> </HEAD> <BODY> Bine ai venit!<BR> Vom &#238nv&#259&#355;a &#238mpreun&#259 limbajul HTML. Aceasta este prima mea pagin&#259 web! </BODY> </HTML>

18

Capitolul 4. Despre culori Culoarea reprezint un caracteristic extrem de important a unei pagini Web. Utilizat cu grij i msur, ea poate mbunti substanial aspectul paginii, fcnd-o mai lizibil i mai atractiv, iar textul mai uor de parcurs. Pe de alt parte, utilizarea excesiv sau inadecvat a culorilor poate transforma un text de calitate ntr-un fel de caleidoscop obositor, greu de urmrit, i care i va determina pe muli vizitatori s renune la a-l mai parcurge. Datorit faptului c ea reprezint un atribut al multor elemente ale documentelor Web (text, fundaluri, margini, link-uri), am optat pentru prezentarea detaliat a modului de utilizare al culorilor nc din aceast etap a lucrrii noastre. 4.1. Sistemul de definire a culorilor Sistemul general utilizat pentru definirea culorilor este RGB prin care sunt specificate pentru fiecare culoare care sunt cantitile de rou (Red), verde (Green) i albastru (Blue) care o compun. n HTML orice culoare este desemnat printr-un cod de 6 cifre hexazecimale, dintre care primele dou reprezint cantitatea de rou, cele dou din mijloc, cantitatea de verde, iar ultimele dou cantitatea de albastru. Sistemul hexazecimal este un sistem de numeraie care folosete 16 cifre, existnd urmtoarea coresponden ntre cifrele hexazecimale i cele zecimale: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 0 1 2 3 4 5 6 7 8 9 A B C D E F

De exemplu, #FF0000 este codul pentru rou. Semnificaia acestui cod este urmtoarea: cantitatea de rou este maxim, iar cantitile de verde i albastru sunt egale cu 0. Codul pentru verde pur este #00FF00 iar pentru albastru este #0000FF. Deoarece uneori definirea culorii prin intermediul codului su hexazecimal este incomod, standardul HTML 3.2 stabilete un set de 16 culori standard. n acest caz, pentru valoarea atributului de culoare se utilizeaz direct numele culorii, ca n exemplul de mai jos, n care se seteaz culoarea magenta pentru linkurile vizitate: <BODY vlink="magenta"> Numele i codul culorilor stabilite n standardul HTML3.2 sunt urmtoarele:
Nume culoare Aqua Black Blue Cod hexazecimal #00FFFF #000000 #0000FF Nume culoare Navy Olive Purple Cod hexazecimal #000080 #808000 #800080

19

Fuchsia Gray Green Lime Maroon

#FF00FF #808080 #008000 #00FF00 #800000

Red Silver Teal Yellow White

#FF0000 #C0C0C0 #008080 #FFFF00 #FFFFFF

Mai trebuie menionat faptul c se pot utiliza, pe lng culori, 100 de nuane de gri (gray). Ele sunt numerotate de la 1 la 100, "gray 1" fiind nuana cea mai nchis, iar "gray 100" cea mai deschis. 4.2. Corespondena dintre codurile hexazecimal i zecimal Multe dintre editoarele grafice folosesc pentru a defini culorile codul zecimal. Dei se bazeaz i ele pe acelai sistem RGB de definire a culorilor, numerele care stabilesc cantitile celor trei culori sunt specificate n sistemul zecimal. De exemplu, o culoare care are codul hexazecimal #63FF80 va avea codul zecimal 99, 255, 128. Aceast coresponden se realizeaz simplu, trecnd fiecare dintre cele trei numere hexazecimale din codul culorii n sistemul zecimal: 63(16)=99(10) , FF(16)=255(10), 80(16)=128(10) Vom lua pe rnd atributele etichetei <BODY>. Cu ajutorul lor se pot seta culorile fundalului, textului i linkurilor: bgcolor - culoarea fundalului text - culoarea textului link - culoarea linkurilor vlink - culoarea linkurilor vizitate alink - culoarea linkului activ 4.3. Culoarea fundalului Pentru a stabili culoarea fundalului unei pagini folosim atributul bgcolor (background color) al etichetei <BODY>, cruia i atribuim o valoare astfel: <BODY bgcolor="#RGB sau nume_culoare"> Se poate folosi drept valoare pentru atributul bgcolor fie codul hexazecimal al culorii fie numele ei. Iat un exemplu de pagin cu fundal verde: EXEMPLU: <HTML> <HEAD> <TITLE>culori1</TITLE> </HEAD> <BODY bgcolor="#00FF00"> <h1 align="center">Pagina cu fundal verde</h1><hr> </BODY> 20

</HTML> 4.4. Culoarea textului Pentru a seta culoarea textului din ntreaga pagin se folosete atributul text al etichetei <BODY>, conform sintaxei: <BODY text="#RGB sau nume_culoare"> Dac am stabilit o culoare pentru textul din pagin i dorim s utilizm o alt culoare pentru o anumit seciune a textului (culoarea unui bloc de text), vom folosi eticheta <font>. Aceasta este o etichet container care cuprinde ntre etichetele de nceput i de final textul a crui culoare dorim s o modificm. Stabilirea culorii se face folosind atributul color al etichetei conform sintaxei: <font color="#RGB sau nume_culoare">Text</font> n EXEMPLU culoarea textului este albastru iar anumite cuvinte sunt colorate n rou. EXEMPLU: <HTML> <HEAD> <TITLE>culori2</TITLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#0000FF"> <h1 align="center">Text albastru si rosu</h1> <hr> Textul din aceasta pagina este albastru cu mici <FONT color="#FF0000"> exceptii</FONT> </BODY> </HTML> 4.5. Culoarea legturilor n general legturile (links) dintr-o pagin Web au culori prestabilite (default), astfel: blue (albastru) - pentru legturi red (rou) - pentru legtura activa (cea pe care este fixat cursorul mouse-ului, cu butonul stng apsat) purple (violet) - pentru legturile vizitate, cele pe care s-a efectuat cel puin un click Pentru a schimba culorile prestabilite se folosesc urmtoarele atribute ale etichetei <BODY>: - link pentru legturi - alink pentru legturile active - vlink pentru legturile vizitate conform sintaxei: <BODY link="#RGB sau nume_culoare" 21

alink="#RGB sau nume_culoare" vlink="#RGB sau nume_culoare"> Documentul din EXEMPLU creeaz o pagin n care textul este negru iar legturile au culoarea verde, legturile active culoarea albastru i cele vizitate, culoarea rou. n EXEMPLU este folosit eticheta <a> cu atributul href. EXEMPLU: <HTML> <HEAD> <TITLE>culori3</TITLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000" link="#00FF00" alink="#0000FF" vlink="#FF0000"> <h1 align="center">Legaturi colorate</h1> <hr> <a href="culori1.HTML">Legatura catre primul exemplu</a> </BODY> </HTML> 4.6. Culori "sigure" Nu toate monitoarele pot reproduce cele 16.777.000 de culori furnizate de codul RGB. Cele realizate cu tehnologii mai vechi, sau cele moderne setate pentru numai 256 de culori pot reproduce corect doar un set limitat de 256 de culori, aanumit palet Web sau "culorile sigure Web". Culorile "sigure" sunt cele definite prin standardul HTML 3.2 prezentat n tabelul din anex sau sunt realizate prin combinaii ale urmtoarelor numere hexazecimale: 00 33 66 99 CC FF Codul hexazecimal variaz ntre #FFFFFF (alb) i #000000 (negru).

22

Capitolul 5. Imagini i elemente multimedia Coninutul paginilor Web capt un aspect atractiv i profesional dac au incluse fotografii, imagini animate, sunete sau imagini video. 5.1. Formatele fiierelor grafice Imaginile sunt stocate n fiiere cu diverse formate, cele mai folosite pe Web fiind cele care confer un raport optim ntre calitatea imaginii i dimensiunile fiierului. Dou dintre cele mai utilizate tipuri de fiiere grafice sunt JPEG (Joint Photographic Experts Group) i GIF (Graphics Interchange Format). 5.1.1. Formatul GIF Formatul GIF (.gif) folosete 256 de culori i este ideal pentru icon-uri, ilustraii i animaie. Acest format utilizeaz o tehnologie special de comprimare care reduce semnificativ dimensiunile fiierelor grafice pentru un transfer mai rapid prin reea. n procesul de comprimare se pstreaz toate caracteristicile imaginii originale, astfel c dup decomprimare imaginea are acelai aspect ca i originalul, de asemena imaginile GIF suport efecte de transparen, ntreesere i animaie. Deoarece majoritatea browserelor recunosc formatul GIF, acesta a devenit cel mai frecvent utilizat n paginile Web. Totui, datorit numrului redus de culori, formatul GIF nu este potrivit pentru fotografii sau imagini de calitate nalt. Pentru acest tip de imagini, cel mai adecvat este formatul JPEG. 5.1.2. Formatul JPEG Formatul JPEG (.jpg), pe de alt parte, suport un numr mult mai mare de culori (aproximativ 16 milioane). Dimensiunile unui fiier JPEG nu depind de numrul de culori ci de gradul de comprimare a imaginii. Gradul de comprimare al formatului JPEG este mai ridicat dect cel al formatului GIF. Nu este neobinuit, de exemplu, ca un fiier GIF care are 200 de Kb s fie comprimat ca fiier JPEG pn la dimensiunea de 30 de Kb. Pentru a realiza un grad att de nalt de comprimare a imaginilor, formatul JPEG pierde anumite informaii din imaginea original. Cu toate c la decomprimare imaginea JPEG nu va fi absolut identic cu imaginea original, diferenele vor fi de cele mai multe ori inobservabile. Formatul JPEG este potrivit pentru imaginile fotografice, dar el nu este adecvat pentru ilustraii, desene sau imagini de dimensiuni reduse. Algoritmii folosii pentru comprimarea i decomprimarea imaginii altereaz n mod notabil zonele de mari dimensiuni colorate cu o singur nuan. Din acest motiv, atunci cnd dorii s includei n pagin un desen sau o ilustraie care folosete un numr redus de culori, formatul GIF este cel mai potrivit. 23

5.2. Inserarea unei imagini Pentru a insera o imagine n cadrul unei pagini (o imagine in-line), se utilizeaz eticheta <IMG> (de la image). Eticheta <IMG> nu este o etichet container, prin urmare nu necesit o etichet corespunztoare de nchidere. Pentru a putea identifica imaginea care va fi inserat, se utilizeaz atributul src (source) al etichetei <IMG>. Atributul src i comunica browserului numele i locaia imaginii care urmeaz s fie inserat. Valoarea acestui atribut este adresa URL a imaginii respective. Dac imaginea se afl n acelai director cu fiierul HTML care face referire la imagine, atunci adresa URL a imaginii este formata numai din numele fiierului, inclusiv extensia. <IMG src="imagine.extensie"> Dac imaginea se afl ntr-un alt director, URL-ul imaginii trebuie specificat fie prin adresarea absolut fie, preferabil, prin cea relativ. EXEMPLU: <HTML> <HEAD> <TITLE>Inserare imagine</TITLE> </HEAD> <BODY> <H1 align="center"> Atributele border si alt </H1><HR> Acesta este un...<BR> <IMG src="../Imagini/rose.gif" alt="trandafir" border="5"> </BODY> </HTML> Atributele etichetei <IMG>: - border: plaseaz un chenar n jurul imaginii. Valoarea atributului border este numrul de pixeli care reprezint grosimea chenarului din jurul imaginii. Absena atributului sau setarea la valoarea "0" face ca acest chenar s nu fie prezent. - alt: permite afiarea unui text explicativ n spaiul n care va fi afiat imaginea n pagin. Prin urmare, dac dintr-un motiv oarecare, imaginea nu se ncarc n pagin, se ncarc mai greu, sau este vizualizat cu un browser care nu suport grafica, n zona rezervat imaginii va fi afiat textul specificat ca valoare a atributului alt. De asemenea, textul specificat ca valoare pentru atributul alt va fi afiat i n cadrul unei mici ferestre care se deschide n momentul cnd cursorul mouse-ului este meninut deasupra imaginii. 5.3. Dimensionarea imaginii Dimensionarea imaginii se realizeaz cu ajutorul atributelor width (prin care se stabilete limea imaginii) i height (prin care se stabilete nlimea imaginii) n pixeli i n cazuri speciale n procente. Aceast ultim variant nu este 24

recomandat deoarece prin redimensionarea ascendent a imaginii de ctre browser, aceasta va pierde din calitate. Acelai lucru se petrece i n cazul redimensionrii prin stabilirea unor valori mai mari a pixelilor dect dimensiunea iniial a imaginii. EXEMPLU: <HTML> <HEAD> <TITLE>Dimensionarea imaginilor</TITLE> </HEAD> <BODY> <H1 align="center">Dimensionarea imaginilor</H1><HR> <IMG src="rose.gif" width="350" height="250"><P> </BODY> </HTML> Absena atributelor de dimensionare din cadrul etichetei <IMG> este considerat o practic defectuoas. Motivul este acela c includerea dimensiunilor imaginii ofer browserului posibilitatea de a rezerva spaiu pentru imagine i de a ncepe ncrcarea textului simultan cu ncrcarea imaginii. Dac atributele de dimensionare nu sunt prezente, browserul va efectua nite pai suplimentari pentru a calcula spaiul din pagin necesar afirii imaginii. Din acest motiv afiarea textului nu va putea ncepe dect dup ce imaginea este ncrcat n ntregime. Este indicat s evitam o asemenea situaie deoarece imaginile se ncarc mai greu dect textul. 5.4. Alinierea imaginii i a textului Alinierea unei imagini n raport cu textul din pagin se realizeaz prin intermediul atributului align, care poate lua urmtoarele valori: - left - aliniere la stnga; textul este dispus n partea dreapt a imaginii ncadrnd imaginea; - right - aliniere la dreapta; textul este dispus n partea stnga a imaginii ncadrnd imaginea; - top - aliniere deasupra; partea de sus a imaginii se aliniaz cu prima linie a textului ce precede imaginea; - middle - aliniere la mijloc; mijlocul imaginii se aliniaz cu prima linie a textului ce precede imaginea; - bottom - aliniere dedesubt, la baz; partea de jos a imaginii se aliniaz cu prima linie a textului. Valorile left, right i bottom ale atributului align permit ca textul s fie dispus n jurul imaginii, n vreme ce top i middle nu permit acest lucru. EXEMPLU: Modul de aliniere bottom: 25

<HTML> <HEAD> <TITLE>Alinierea imaginii si textului (bottom)</TITLE> </HEAD> <BODY> <H1 align="center">Alinierea imaginii si textului (bottom)</H1><HR> <IMG src="../Imagini/rose.gif" align="bottom" width="100" height="66" alt="trandafir"> Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text. Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text. </BODY> </HTML> Alte dou atribute utile, care servesc la alinierea imaginii fa de restul elementelor din pagin, sunt atributele hspace i vspace. Ele precizeaz distana, n pixeli, pe orizontal, respectiv pe vertical, dintre imagine i restul elementelor din pagin. La EXEMPLUL anterior vom schimba modul de aliniere n cadrul etichetei <IMG> i vom aduga atributele hspace, respectiv vspace, astfel: <IMG src="../Imagini/rose.gif" align="left" width="100" height="66" alt="trandafir" vspace="10" hspace="10"> 5.5. Imagini folosite ca fond (background) al paginii O imagine poate fi utilizat i pentru a stabili fondul unei pagini Web. n acest scop se folosete atributul background al etichetei <BODY>, avnd ca valoare adresa URL a imaginii. Imaginea se multiplic aliniat (tiling) pe orizontal i pe vertical pn umple ntregul ecran. EXEMPLU: <HTML> <HEAD> <TITLE>Imaginea ca fond al paginii</TITLE> </HEAD> <BODY background="../Imagini/rose.gif"> <H1 align="center">Imaginea ca fond al paginii</H1><HR> Fondul cu trandafiri... </BODY> </HTML> 5.6. Imaginile video Pentru a insera o imagine video ntr-un document HTML se folosesc atributele dynsrc, controls, loop i start ale etichetei <IMG>. 26

Atributul dynsrc nlocuiete atributul src i permite inserarea n documentul HTML a unei imagini video n acelai mod n care este inserat o imagine static. Valoarea atributului dynsrc este adresa URL a fiierului video care va fi inclus n pagin conform sintaxei: <IMG dynsrc="URL_fisier_video"> Acest atribut este o extensie Internet Explorer i nu este recunoscut de browserele Netscape. Pentru a vizualiza o imagine video in-line ntr-un browser Netscape, vizitatorul paginii trebuie s instaleze un program auxiliar de tip plug-in. Dac programul plug-in nu este disponibil pe computerul vizitatorului, imaginea video nu va putea fi afiat. Singurul format de fiiere video care este suportat de extensiile Internet Explorer este AVI (Audio Video Interleave), deoarece acesta este formatul de redare care este inclus n browser. Construcia de mai jos include ntr-un document HTML fiierul video introducere.avi care se afl n folderul Video: <IMG dynsrc="../Video/introducere.avi"> Efectul acestei etichete este deschiderea de ctre browser a unei ferestre de vizualizare n interiorul paginii Web, fereastr n care va rula clipul video introducere.avi. Ca i imaginile obinuite, imaginea video este afiat pe msur ce este ncrcat. Deoarece nici un alt browser n afar de Internet Explorer nu recunoate aceast extensie, este recomandat includerea n cadrul etichetei <IMG> a atributului src prin care se furnizeaz o imagine static ce va fi afiat n acelai cadru. Browserele care nu recunosc extensia dynsrc vor afia imaginea static pe cnd Internet Explorer va afia imaginea video. Ordinea n care apar cele dou atribute nu are importan. EXEMPLU: <IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif"> n mod normal, Internet Explorer red clipul video ntr-o fereastr n care nu sunt afiate nici un fel de butoane de control. Utilizatorul poate relua, opri sau continua redarea clipului efectund click dreapta cu mouse-ul n interiorul ferestrei. Pentru a aduga butoane de control acestei ferestre se utilizeaz atributul controls al etichetei <IMG>. Atributul controls nu are alocat nici o valoare, prezena sa avnd doar scopul de a aduga butoanele de control asemntoare celor de la aparatele video. EXEMPLU: <IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif" controls> Clipul video inclus n pagin este redat de browser o singur dat, de la nceput pn la sfrit. Pentru a repeta redarea clipului de un anumit numr de ori este folosit atributul loop. Valorile posibile ale atributului sunt: 1) un numr ntreg care reprezint numrul de reluri ale clipului; 27

2) infinite, caz n care clipul este redat pn cnd utilizatorul stopeaz derularea sa apsnd butonul stop al ferestrei de vizualizare (n cazul cnd fereastra conine butoanele de control) sau efectueaz click dreapta cu mouse-ul n fereastra de vizualizare. EXEMPLU: <IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif" controls loop="infinite"> Redarea imaginii video ncepe imediat ce aceasta a fost complet ncrcat n pagin. Pentru a schimba acest comportament se folosete atributul start care poate avea valorile: 1) mouseover, situaie n care derularea imaginii video ncepe n momentul cnd mouse-ul este plasat deasupra imaginii; 2) fileopen, valoarea predefinit, situaie n care derularea imaginii ncepe imediat dup ncrcarea n pagin EXEMPLU: Cele dou valori pot fi combinate pentru a se realiza redarea imaginii mai nti imediat dup ncrcarea n pagin i apoi de fiecare dat cnd mouse-ul este plasat deasupra ei: <IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif" controls loop="infinite" start="fileopen, mouseover"> Imaginile video in-line pot fi tratate ca i imaginile statice. O astfel de imagine poate fi aliniat folosind atributul align, sau poate fi spaiat fa de textul care o nconjoar. EXEMPLU: <HTML> <HEAD> <TITLE>Imagini video</TITLE> </HEAD> <BODY> <H1 align="center">Imagini video</H1><HR> <FONT size="4" color="blue">Clipul video de mai jos face parte din filmul Dacii</FONT><P> <CENTER> <IMG dynsrc="../Video/dacii.avi" src="../Imagini/dac.gif" controls start="fileopen, mouseover" loop="infinite"> </CENTER> </BODY> </HTML> 5.7. Sunetele 28

Eticheta <BGSOUND> realizeaz includerea n pagina Web a unei muzici de fundal. Aceast etichet este, de asemenea, o extensie Internet Explorer deci nu este recunoscut i executat n alte browsere. Sintaxa etichetei <BGSOUND> este urmtoarea: <BGSOUND src="URL_fisier_sunet" loop="valoare"> Atributul src are drept valoare adresa URL a fiierului de sunet care este folosit ca fundal sonor al paginii. n mod curent, Internet Explorer recunoate trei tipuri de fiiere de sunet: 1) fiiere cu extensia .wav care este formatul nativ pentru PC; 2) fiiere cu extensia .au, formatul nativ pentru sistemele UNIX; 3) fiiere cu extensia .midi, un format universal acceptat pentru codificarea sunetelor. Ca i n cazul imaginilor video in-line, fiierul de sunet este redat o singur dat, la ncrcarea paginii. Pentru redarea sa repetat se folosete atributul loop al etichetei <BGSOUND>. EXEMPLU: <HTML> <HEAD> <TITLE>Muzica de fundal</TITLE> </HEAD> <BODY> <H1 align="center">Muzica de fundal</H1><HR> <P> <FONT size="4" color="red">Muzica se va auzi pana cand veti inchide pagina</FONT> <BGSOUND src="../Sunet/sound loop="infinite"> </BODY> </HTML>

29

Capitolul 6. Cadre (frames) O modalitate de structurare avansat a unui document HTML este mprirea ferestrei browserului n mai multe ferestre distincte, denumite cadre (frames). Aceast facilitate permite afiarea simultan, n aceeai fereastr a browserului, a dou sau mai multe documente HTML diferite, cte unul n fiecare cadru. Avantaje: dimensiunea (KB) mai mic a fiecrui cadru n parte, comparativ cu cazul n care ar fi existat o singur pagin, determin un timp de ncrcare mai redus. Dezavantaje: unele motoare de cutare nu indexeaz siturile realizate cu cadre; autorul trebuie s in evidena unui numr mare de pagini HTML; exist unele browsere care nu pot afia pagini realizate cu cadre; este dificil de printat ntreaga pagina. ntr-o pagin de cadre lipsete elementul BODY, coninutul paginii fiind marcat cu ajutorul controalelor <frameset> i </frameset>. Frameset definete modul de mprire al ferestrei (spaiul alocat fiecrui cadru n parte). Fiecare cadru din interiorul documentului este marcat cu ajutorul controalelor <frame> i </frame>. EXEMPLU: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/HTML4/frameset.dtd"> <HTML> <HEAD> <TITLE>Un document cu cadre</TITLE> </HEAD> <frameset cols="30%, 70%"> <frameset rows="200, 200"> <frame src="continut_cadru1.HTML"> <frame src="continut_cadru2.HTML"> </frameset> <frame src="continut_cadru3.HTML"> <noframes> <p>Acest document contine: <ul> <li><a href="continut_cadru1.HTML">continut</a> 30

<li><img src="continut_cadru2.HTML" alt="imagine"> <li><a href="continut_cadru3.HTML">continut</a> </ul> </noframes> </frameset> </HTML> Aa cum se vede mai sus, pentru a mpri un cadru n dou sau mai multe cadre, se folosesc marcaje frameset imbricate. <frameset [border=n] [bordercolor=#rrggbb] [cols=x,y,..] [rows=x,y,..] ... </frameset> Marcajul <frameset> are urmtoarele atribute: border - definete limea chenarului; numai frameset-ul exterior va rspunde la valoarea acestui atribut. Este o extensie Microsoft/Netscape. bordercolor - specific culoarea chenarului, n format RGB. Este o extensie Microsoft/Netscape. cols - definete (pe vertical) dimensiunile sau proporiile cadrelor n cadrul unui <frameset>. Dimensiunile pot fi precizate ca: o valoare absolut (n pixeli) o valoare relativ (n procente) o * - semnific spaiul rmas disponibil dup afiarea cadrelor anterior definite rows - definete (pe orizontal) dimensiunile sau proporiile cadrelor n cadrul unui <frameset>. Dimensiunile pot fi precizate ca: o valoare absolut (n pixeli) o valoare relativ (n procente) o * - semnific spaiul rmas disponibil dup afiarea cadrelor anterior definite Cadrele propriu-zise sunt introduse prin marcajul <frame>. <frame [frameborder=yes|no] [longdesc=URL] [src=URL] [name=identificator] [noresize] [scrolling = auto|yes|no] [marginwidth=x] [marginheight=y] ... </frame> Marcajul <frame> are urmtoarele atribute: frameborder - specific dac un cadru va afia sau nu chenar. n cazul n care un cadru are setat frameborder=no, iar cadrele adiacente au 31

specificat afiarea chenarului, acest atribut nu va avea efect pentru cadrul cu frameborder=no. longdesc - specific un link ctre o descriere "lung" a cadrului respectiv. Scopul acestei descrieri este de a completa descrierea realizat prin atributul TITLE. src - specific linkul ctre coninutul iniial care va fi ncrcat n elementul <frame>. Linkul poate fi o cale absolut (http://www.domeniu.ro/pagina.HTML) sau relativ (pagina.HTML). name - atribuie un nume cadrului curent. Acest nume poate fi folosit n combinaie cu marcajul a (<a href="pagina.HTML" target="RightFrame">...</a>) pentru a ncrca o pagin ntr-un anumit cadru. noresize - cadrele pot fi redimensionate de ctre utilizatori. Prin folosirea atributului noresize browserul va bloca redimensionarea cadrelor de ctre utilizator. scrolling - specific browserului afiarea/ascunderea barei de scroll (derulare) dintr-un cadru. Poate lua urmtoarele atribute: o auto - afiarea barei de scroll se face atunci cnd este necesar (coninutul depete spaiul afiabil); o yes - bara de scroll este permanent afiat; o no - bara de scroll nu va fi afiat, chiar i in eventualitatea n care este necesar. marginwidth, marginheight - specific distana dintre marginea interioar a cadrului i coninutul afiabil. Atributul marginheight stabilete distana pentru marginea superioar/inferioar a cadrului. Atributul marginwidth stabilete distana pentru marginea stnga/dreapta a cadrului. Exemplul de mai jos definete un <frameset> cu dou coloane: EXEMPLU: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/HTML4/frameset.dtd"> <HTML> <HEAD> <TITLE>Un document cu cadre</TITLE> </HEAD> <frameset cols="30%, 70%"> <frame src="continut_cadru1.HTML"> <frame src="continut_cadru2.HTML"> <noframes> <p>Acest document contine: <ul> <li><a href="continut_cadru1.HTML">continut</a> <li><img src="continut_cadru2.HTML" alt="imagine"> </ul> </noframes> 32

</frameset> </HTML> Marcajul <noframes> reprezint alternativa (codul HTML) care va fi afiat n browserele care nu suport cadre. Browserele care pot afisa cadre vor ignora acest marcaj. Exemplul de mai jos definete un <frameset> cu dou rnduri: EXEMPLU: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/HTML4/frameset.dtd"> <HTML> <HEAD> <TITLE>Un document cu cadre</TITLE> </HEAD> <frameset rows="30%, 70%"> <frame src="continut_cadru1.HTML"> <frame src="continut_cadru2.HTML"> <noframes> <p>Acest document contine: <ul> <li><a href="continut_cadru1.HTML">continut</a> <li><img src="continut_cadru2.HTML" alt="imagine"> </ul> </noframes> </frameset> </HTML> Exemplul de mai jos definete un <frameset> cu dou cadre orizontale, primul cadru avnd alocat 25% din spaiul disponibil pe vertical, iar cel de al doilea cadru 75%: EXEMPLU: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/HTML4/frameset.dtd"> <HTML> <HEAD> <TITLE>Un document cu cadre</TITLE> </HEAD> <frameset rows="*,3*"> <frame name="navigare" src="navigare.HTML"> <frame name="continut" src="continut.HTML"> <noframes> text... text... text... text... text... text... text... 33

</noframes> </frameset> </HTML> Capitolul 7. Legturile (referinele) Navigarea n cadrul site-urilor este posibil cu ajutorul link-urilor (legturilor). Printr-o legtur ntr-un document HTML nelegem marcajul locului de unde se poate efectua trecerea (cuplarea, conectarea) la un alt document sau la o nou locaie din documentul curent. Un loc marcat mai este denumit ancorare. Marcajele pot fi de dou tipuri: 1) legturi ctre alte locaii: acestea se vor caracteriza prin textul legturii (vizibil n documentul afiat pe ecran) i prin adresa la care se poate efectua un salt; textul legturii va aprea pe ecran subliniat, ntr-o culoare diferit de cea a textului adiacent; adresa int a legturii apare (dac nu s-a indicat alt text) pe linia de stare a ferestrei browserului atunci cnd pointerul mouse-ului este pe textul legturii; 2) definiri de nume care au doar rolul de a introduce inte pentru legturi; nu sunt difereniate n documentul afiat pe ecran. 7.1. Legtura ctre o alt pagin - Link-urile Marcajul HTML principal pentru introducerea referinelor ctre alte pagini HTML sau ctre elemente din cadrul aceleiai pagini web este <a>, a provenind de la anchor. El trebuie s conin atribute, n caz contrar neafectnd formatarea documentului. EXEMPLU: Exemplul urmtor nu va afecta formatarea documentului: <a>Aici</a> ar trebui sa fie un link ! Pentru a activa linkul de mai sus vom adauga atributul href. Exemplul urmtor arat formatarea documentului: <a href="pagina.HTML">Aici</a> este un link ! Referinele pot fi absolute (ex. <a href="http://www.domeniu.ro/pagina.HTML">http://www.domeniu.ro/pagina.HT ML<a>) sau relative (ex. <a href="pagina.HTML">pagina.HTML<a>). Referinele relative sunt folosite n interiorul siturilor. Ele funcioneaz pe baza faptului c browserul adaug automat numele domeniului la fiecare referin (presupunnd c exist o pagin la adresa http://www.hostx.ro/director/pagina.HTML i o referin relativ ctre pagina2.HTML, browserul va construi referina 34

http://www.hostx.ro/director/pagina2.HTML in momentul n care pagina2.HTML este solicitat) Referinele absolute le vei folosi atunci cnd vrei s trimii utilizatorul pe un alt site (domeniu); pot fi folosite i n interiorul unui site, ns va implica un efort mai mare n scrierea paginilor (pe scurt, ai mai mult de tastat), iar n cazul n care se dorete mutarea sitului pe un alt domeniu este nevoie s se reediteze toate referinele. Referinele pot fi ctre pagini HTML, dar i ctre alte tipuri de fiiere (imagini, fiiere audio, video, documente n alte formate, etc.) EXEMPLU: Presupunem c exist un site cu urmtoarea structur de directoare: /director1 /director2 Pentru a apela o pagin HTML aflat n director2 dintr-o pagin aflat n director1 se va folosi urmtoarea secvena: <a href="../director2/pagina.HTML">Un link oarecare</a> Pentru a apela o pagin HTML aflat n director1 dintr-o pagin aflat n rdcin (nivelul superior al sitului) se va folosi urmatoarea secven: <a href="director1/pagina.HTML">Un link oarecare</a> 7.2. Legtura ctre o seciune de pagin - Ancorele Pn acum am prezentat modul de realizare a referinelor externe, ctre alte pagini sau ctre alte situri. Atunci cnd avem de-a face cu pagini mai lungi, putem mpri aceste pagini n mai multe seciuni ctre care s adugm cte o legtura la nceputul paginii pentru ca utilizatorii s ajung mai repede la seciunea care i intereseaz. n acest caz soluia const n utilizarea ancorelor. O ancor are urmtorul format: <a name="nume_ancora">...</a> Numele ancorelor nu poate conine spaii i trebuie s fie unic n pagina respectiv. n exemplul urmtor se observ o posibil greeal n atribuirea numelui ancorelor: <a name="xxx">...</a> <a name="XXX">...</a> n HTML xxx i XXX nseamn acelai lucru. Odat definit ancora trebuie definit i legatura activ ctre ancora respectiv. Ea va fi o referin hypertext n formatul urmtor: <a href="#nume_ancora">Link catre ancora</a> Trebuie reinut c exist posibilitatea de a crea referine ctre ancore aflate n documente externe: <a href="pagina.htm#nume_ancora">Link catre ancora externa</a> 35

7.3. Legtura ctre o adres de e-mail Forma general a unei legturi ctre o adres de e-mail este urmtoarea: <A href="mailto:adresa de e-mail">Trimite e-mail</A> 7.4. Utilizarea unei imagini ca legtur Pentru a folosi o imagine ca legatur ntre tag-urile <a> i </a>, va trebui scris adresa imaginii: <A href=numepagina.HTML><img src="adresaimaginii"</A> 7.5. Schimbarea culorilor legturilor Fiecare legtur din cadrul unei pagini web are trei culori: o culoare pentru legturile nevizitate (nu a fost efectuat nici un click pe ele); o culoare pentru legturile vizitate (s-a efectuat cel puin un click pe ele); o culoare pentru legturile active (atunci cnd cursorul mouse-ului se afl deasupra lor). Pentru fiecare culoare, din cele trei de mai sus, exist cte un atribut al tagului </BODY> ajutorul caruia putem schimba culoarea implicita: link pentru legturile nevizitate; vlink pentru legaturile vizitate; alink pentru legaturile active. Fiecrui atribut i se va atribui un nume de culoare sau codul unei culori. EXEMPLU: Pentru ca n cadrul paginii web, legturile s fie de culoare roie atunci cnd nu au fost vizitate, de culoare neagr cele vizitate i de culoare portocalie atunci cnd se trece cu mouse-ul pe deasupra lor, se folosete urmtoarea linie de cod: <BODY link=#FF0000 vlink=#000000 alink=FF9600>

36

Capitolul 8. Liste Enumerrile, de orice fel, constituie o parte important a comunicrii prin faptul c ajut la sistematizarea i evidenierea unor intrri. HTML ofer mai multe mecanisme pentru specificarea listelor de informaii. Exist trei tipuri de liste, fiecare tip trebuie s includ cel puin un element: 1) liste de tip definiie; 2) liste ordonate (numerotate); 3) liste neordonate (marcate). 8.1. Liste de tip definiie Unul dintre cele mai obinuite elemente n paginile HTML este un set de definiii, referine sau indexuri. Un exemplu concret l reprezint glosarele; cuvintele sunt listate alfabetic, nsoite de definiiile termenilor respectivi. Lista de tip definiie este introdus de marcajele: <dl>...</dl> - lista definiii (definition list); <dt> - termenul definit (definition term); <dd> - definiie (definition). EXEMPLU: <HTML> <HEAD> <TITLE>Lista de tip definitie</TITLE> </HEAD> <BODY> <dl> <dt>Applet Java <dd>Aplicatie Java inclusa intr-un document HTML <dt>Cookie <dd>Mecanism de comunicare intre client si server <dt>Domeniu <dd>Nume unic prin care se identifica un site pe Internet </dl> </BODY> </HTML> 8.2. Liste neordonate Sunt introduse de marcajele: <ul>...</ul> - lista neordonat (unordered list); 37

<li> - element list.

EXEMPLU: <HTML> <HEAD> <TITLE>Lista neordonata</TITLE> </HEAD> <BODY> <p>In HTML sunt disponibile 3 tipuri de liste:</p> <ul type="square"> <li>liste de tip definitie <li>liste neordonate <li>liste ordonate </ul> </BODY> </HTML> Atributului type precizeaz tipul maracatorului. Putem schimba cercul plin din faa fiecarui element (acesta este folosit n mod implicit atunci cnd folosim o list neordonat) prin atribuirea atributului type valori precum square (ptrat) sau circle (cerc). 8.3. Liste ordonate Sunt introduse de marcajele: <ol>...</ol> - lista ordonat (ordered list); <li> - element list. EXEMPLU: <HTML> <HEAD> <TITLE>Lista ordonata</TITLE> </HEAD> <BODY> <p>In HTML sunt disponibile 3 tipuri de liste: <ol start="2"> <li>liste de tip definitie <li>liste neordonate <li>liste ordonate </ol> </BODY> </HTML> Ca i n cazul listelor neordonate, i la listele ordonate, atributul type are o valoare implicit: numerele. n loc de numere putem folosi i alte caractere. Pentru 38

a folosi aceste caractere este de ajuns s utilizam atributul type cu valoarea potrivita. EXEMPLU: - pentru litere mari: <ol type=A>; - pentru litere mici: <ol type=a>; - pentru cifre romane mici: <ol type=i>; - pentru cifre romane mari: <ol type=I> . Pe lnga atributul type, pentru tag-ul <ol> mai putem folosi i atributul start. Atributul start seteaz numrul de nceput pentru primul element al listei ordonate. De exemplu, dac vrem s incepem de la 4, n cazul numerelor, sau de la D, n cazul literelor mari, etc. Forma general a acestui atribut este start=n, unde n este un numr natural. EXEMPLU: <ol type=A start=4> 8.4. Personalizarea listelor n locul simbolurilor folosite n mod prestabilit pentru elementele listelor se pot afia propriile imagini. Pentru aceasta, n loc de tag-ul <li> cu care introducem fiecare element al listei vom aduga imaginea dorit cu ajutorul tag-ului <img>. EXEMPLU : Fiecare element al listei este introdus cu ajutorul unei imagini salvate sub denumirea de desen n folderul Poze. <HTML> <HEAD> <TITLE>Lista personal</TITLE> </HEAD> <BODY> <ul>Lista persoane departament Secretariat: <br><br><img src="../Poze/desen.gif">Popescu Maria <br><br><img src ="../Poze/desen.gif">Ionescu Eugenia <br><br><img src ="../Poze/desen.gif">Ion Marian </ul> </BODY> </htm>

39

Capitolul 9. Tabele Prezentarea datelor sub form de tabele prezint avantaje din punct de vedere al claritii i sistematizrii. Marcajele HTML dedicate formatrii tabelelor permit operaiuni asemntoare celor din procesoarele de texte (ex. MS Word). Definirea unui tabel n HTML se face folosind perechea de marcaje <table> i </table>. Prin intermediul acestei perechi de marcaje se definesc atribute valabile pentru ntregul tabel. Majoritatea acestor atribute pot fi ns redefinite pentru anumite celule ale tabelului. <table [border=n] [frame=above|below|border|box|hsides|vsides|lhs|rhs|void] [rules=none|groups|rows|cols|all] [width=abs|rel] [height=abs|rel] [bgcolor="#rrggbb"] [bordercolor="#rrggbb"] [bordercolorlight="#rrggbb"] [bordercolordark="#rrggbb"] [background="URL-imagine"] [cellspacing=n] [cellpadding=n] [align=left|center|right] [valign=top|middle|bottom] [summary="sumar"]> ... </table> Semnificaiile atributelor marcajului <table> sunt: border - specific grosimea chenarului tabelului. Dac are valoarea 0 sau atributul lipsete, tabelul nu va avea chenar. frame - definete modul de afiare a chenarului exterior. Funcioneaz n prezena atributului "border". Atributul frame poate avea urmtoarele valori: o above - afieaz latura superioar a chenarului; o below - afieaz latura inferioar a chenarului; o border - afieaz chenarul complet; o box - afieaz chenarul complet (la fel ca i border); o hsides - afieaz prile inferioar, respectiv superioar ale chenarului; o vsides - afieaz prile laterale (stnga, dreapta) ale chenarului; o lhs - afieaz latura stng a chenarului; o rhs - afieaz latura dreapt a chenarului; o void - fr bordura exterioara. rules - definete modul de afiare a chenarului interior dintre celulele tabelului. Funcioneaz n prezena atributului "border". Atributul rules poate avea urmtoarele valori: o none - nu se afieaz chenar interior; 40

groups - afieaz chenar ntre grupurile de celule definite de tHEAD, tBODY, colgroup, col, tfoot; o rows - afieaz chenar ntre linii; o cols - afieaz chenar ntre coloane; o all - afieaz chenar ntre toate celule interioare. width, height - specific limea, respectiv nlimea tabelului. n cazul n care valorile specificate nu sunt suficiente pentru afiarea coninutului celulelor, valorile vor fi modificate automat de ctre browser astfel nct tot coninutul s fie afiat. Valorile se pot exprima absolut, n pixeli, sau relativ la limea ecranului (width), respectiv la nlimea ecranului (height). Trebuie menionat c atributul "height" nu face parte din specificaiile HTML. Este recomandat s fie lsat browserul s calculeze valoarea pentru "height" n funcie de coninutul tabelului. bgcolor - specific culoarea pentru fundalul tabelului. bordercolor - specific culoarea chenarului. bordercolorlight, bordercolordark - sunt atribute utilizate pentru a crea un efect 3D asupra chenarului. Este recomandat folosirea de culori complementare pentru a obine efectul scontat. Sunt extensii Microsoft. background - URL-ul imaginii care va fi utilizat ca fundal al tabelului. n cazul in care dimensiunile imaginii sunt mai mici dect cele ale tabelului, ea va fi repetat astfel nct s acopere ntregul fundal al tabelului. Este extensie Microsoft. cellspacing - specific distana dintre celule. cellpadding - specific marginea interioar a celulelor. align - specific alinierea pe orizontal a tabelului (stnga|centru| dreapta). valign - specific alinierea pe vertical a tabelului (sus|mijloc|jos). summary - o descriere a tabelului, de obicei pentru browsere nonvizuale.
o

Cea mai simpl form a unui tabel se prezint astfel: <table> <tr> <td>....</td> <td>....</td> </tr> <tr> <td>....</td> <td>....</td> </tr> </table> O form mai complex a unui tabel este: <table> 41

<tHEAD> <tr> <th>Nr. Crt</th> <th>Nume Autor</th> <th>Denumire Lucrare</th> </tr> </tHEAD> <tBODY> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> </tBODY> </table> Semnificaiile atributelor marcajului <table> sunt: <tHEAD>...</tHEAD> este un marcaj care conine unul sau mai multe rnduri de celule care reprezint antetul tabelului. Poate aprea o singur dat n cadrul unui tabel. <tBODY>...</tBODY> este un marcaj care conine unul sau mai multe rnduri de celule. Pot fi definite mai multe astfel de seciuni n cadrul aceluiai tabel (ex. n cazul n care exist stiluri de formatare diferite pentru seciuni diferite ale tabelului). <tfoot>...</tfoot> este un marcaj care conine unul sau mai multe rnduri de celule care reprezint subsolul tabelului. Poate aprea o singur dat n cadrul unui tabel. Este obligatoriu s apr naintea marcajului <tBODY>. EXEMPLU: Coninutul fiecrei celule poate fi formatat individual: <table> <tr> <th><font color=black>Col 1</font></th> <th><font color=red>Col 2</font></th> </tr> <tr> <td><center>Celula 1.1</center></td> <td><i>Celula 1.2</i></td> </tr> 42

<tr> <td><s>Celula 2.1</s></td> <td><font color=blue>Celula 2.2</font></td> </tr> </table> n cazul n care se dorete ca tabelul din exemplul anterior s fie afiat cu chenar: <table border=1> <tr> <th>Col 1</th> <th><font color=red>Col 2</th> </tr> <tr> <td><center>Celula 1.1</center></td> <td><i>Celula 1.2</i></td> </tr> <tr> <td><s>Celula 2.1</s></td> <td><font color=blue>Celula 2.2</font></td> </tr> </table> Un alt marcaj care poate aprea n cadrul unui tabel este <caption>. Acesta are urmtoarea sintax: <caption [align=top|bottom|left|center|right] [valign=top|bottom]> ... </caption> Marcajul caption adaug o scurt descriere (titlu) a tabelului. Poate fi utilizat numai n cadrul unui marcaj <table>, imediat dup acesta. Are urmtoarele atribute: align - n mod normal browser-ul va afia titlul aliniat central i deasupra/dedesubtul tabelului. n HTML 4.0 atributul align a fost abandonat n favoarea formatrii prin CSS (text-align i vertical-align). valign - precizeaz poziia titlului n raport cu tabelul (sus/jos). EXEMPLU: <table border=1 cellspacing=0 cellpadding=1 width="100%" align="left"> <caption valign=top>Exemplu utilizare caption </caption> <tr> <th> <font color=black>Col 1</font> </th> 43

<th> <font color=red>Coloana 2</font> </th> </tr> <tr> <td> <center>Celula 1.1</center> </td> <td> <i>Celula 1.2</i> </td> </tr> <tr> <td> <s>Celula 2.1</s> </td> <td> <font color=blue>Celula 2.2</font> </td> </tr> </table> Marcajul <tr> definete o linie intr-un tabel. Are urmtoarea sintax: <tr [align=left|center|right] [valign=top|middle|bottom|baseline] [bgcolor="#rrggbb"|culoare] [bordercolor="#rrggbb"|culoare] [bordercolorlight="#rrggbb"|culoare] [bordercolorlight="#rrggbb"|culoare]> .... </tr> Poate avea urmtoarele atribute: align - specific modul n care va fi aliniat pe orizontal coninutul liniei de tabel. valign - specific modul n care va fi aliniat pe vertical coninutul liniei de tabel. bgcolor - specific culoarea pentru fundalul liniei de tabel. bordercolor - specific culoarea chenarului celulelor din linie de tabel. bordercolorlight, bordercolordark - sunt atribute utilizate pentru a create un efect 3D asupra chenarului de tabel. Marcajul <th> definete o celul din antetul tabelului. Sintaxa este: <th [align=left|center|right] [valign=top|middle|bottom|baseline] 44

[background="url-imagine"] [colspan=n] [rowspan=m] [bgcolor="#rrggbb"|culoare] [bordercolor="#rrggbb"|culoare] [bordercolorlight="#rrggbb"|culoare] [bordercolordark="#rrggbb"|culoare] [nowrap] [abbr="text"]> .... </th> Poate avea urmtoarele atribute: align, valign - indic alinierea orizontal i vertical a coninutului celule, n celula. colspan - specific numrul de coloane peste care se ntinde celula curent spre dreapta. rowspan - specific numrul de linii peste care se ntinde celula curent n jos. nowrap - mpiedic "ruperea" textului din celul pe mai multe linii. bgcolor, background, bordercolor, bordercolorlight, bordercolorlight - au efecte similare celor menionate mai sus. EXEMPLU: <table border=1 cellspacing=0 cellpadding=1 width="100%" align="left"> <caption valign=top>Exemplu tabel </caption> <tHEAD> <tr> <th> <font color=black>Col 1</font> </th> <th> <font color=red>Coloana 2 </th> </tr> </tHEAD> <tBODY> <tr> <td><center>Celula 1.1</center>;</td> <td><i>Celula 1.2</i></td> </tr> <tr> <td><s>Celula 2.1</s></td> <td><font color=blue>Celula 2.2</td> </tr> </tBODY> </table> Marcajul <td> definete o celul din tabel. Are urmtoarea sintax: 45

<td [align=left|center|right] [valign=top|middle|bottom|baseline] [background="url-imagine"] [colspan=n] [rowspan=n] [bgcolor="#rrggbb"|culoare] [bordercolor="#rrggbb"|culoare] [bordercolorlight="#rrggbb"|culoare] [bordercolordark="#rrggbb"|culoare] [nowrap] [abbr="text"]> ... </td> Atributele marcajului <td> au efecte similare cu cele prezentate mai sus, n cazul marcajului <th>. Ultimele atribute sunt colspan i rowspan. Ele extind o celula pe mai multe coloane, respectiv linii ale tabelului. EXEMPLU: Exemplu utilizare colspan: <table border=1 cellspacing=0 cellpadding=1 width="100%" align="left"> <caption valign=top>Exemplu tabel </caption> <tr> <td><center>Celula 1.1</center></td> <td><i>Celula 1.2</i></td> </tr> <tr> <td colspan="2"><s>Celula 2.1</s></td> </tr> </table> Exemplu utilizare rowspan: <table border=1 cellspacing=0 cellpadding=1 width="100%" align="left"> <caption valign=top>Exemplu tabel </caption> <tr> <td rowspan="2"><center>Celula 1.1</center></td> <td><i>Celula 1.2</i></td> </tr> <tr> <td ><s>Celula 2.2</s></td> </tr> </table>

46

Capitolul 10. Formulare Formularele reprezint o metod de interactivitate cu utilizatorii paginilor web. Prin intermediul unui formular se pot obine date importante de la vizitatori. Dup ce formularul a fost completat, utilizatorul apas un buton de trimitere, iar datele introduse n formular vor fi primite sub forma unui e-mail sau vor fi procesate cu ajutorul unui limbaj de programare i adugate ntr-o baz de date. Un formular este introdus n pagina web prin tag-urile <FORM> i </FORM>. ntre aceste tag-uri vor fi introduse toate elementele formularului. Tag-ul <FORM> are dou atribute foarte importante: action i method. Cu ajutorul atributului action i spunem browser-ului ce se va ntmpla cu datele introduse n formular. Astfel, valoarea atributului action poate fi o adresa URL a unui script, scris ntr-un limbaj de programare, care va interpreta datele i le va introduce ntr-o baz de date, dac este cazul, sau poate fi o adres de email, caz n care datele introduse n formular vor fi trimise prin email la adresa respectiv. Atributul method, aa cum i spune i numele, precizeaz metoda de trimitere a datelor i poate avea dou valori. Valoarea implicit a acestui atribut este get, cu ajutorul acestei metode putnd fi trimise cantiti mici de date, cea mai folosit metoda fiind post. 10.1. Elementele unui formular Elementele unui formular trebuie introduse, n majoritatea cazurilor, cu ajutorul tag-ului <input>. Atributele cele mai importante ale acestui tag sunt urmtoarele: - type - tipul elementului; - name - numele elementului; - value - valoarea elementului. Elementele ale unui formular pot fi: - cmpurile de editare; - butoanele radio; - casetele de validare; - casetele de fiiere; - listele de selecie; - butoanele submit i reset. 10.1.1. Cmpurile de editare Pentru a introduce n cadrul unui formular un cmp de editare, trebuie s folosim pentru atributul type, al tag-ului <input>, valoarea text. 47

EXEMPLU: Atributele cele mai folosite pentru tagul <input> de tipul cmp de editare sunt: size, care reprezint limea cmpului de editare; maxlength, specific numrul maxim de caractere care pot fi introduse n cmpul de editare; value, valoarea iniial a cmpului de editare. De exemplu, pentru cmpul de editare de mai sus s-a folosit urmtoarea linie de cod: <input name="exemplu" type="text" value="Camp de editare" size="20" maxlength ="30"> Dac se dorete introducerea unui cmp de editare de tip "parol", atributul type va avea valoarea "password". n acest caz, caracterele introduse n cmpul de editare, nu vor fi vizibile. Atunci cnd vrem s adugam n cadrul formularului nostru un cmp de editare n care s poat fi introduse mai multe rnduri, folosim cmpurile de editare de tip multilinie. Pentru a folosi un astfel de cmp de editare, avem nevoie de tagurile <textarea> i </textarea>. EXEMPLU: < textarea cols="50" rows ="5" name="exemplu"> </ textarea > Am folosit atributul cols pentru a stabili numrul de caractere al fiecrui rnd, atributul rows pentru numrul de rnduri al cmpului de editare, iar atributul name pentru numele cmpului de editare.

10.1.2. Butoanele radio Daca avem o ntrebare cu mai multe variante de rspuns, vom folosi butoanele radio. Pentru a introduce un buton radio, folosim tag-ul <input>, iar la atributul type, valoarea "radio". EXEMPLU: n ce categorie de vrst v ncadrai? sub 15 ani 15-20 ani 20-25 ani 25-35 ani 48

35-45 ani peste 45 ani Codul HTML al exemplului de mai sus este urmtorul: &#206n ce categorie de v&#226rst&#259 v&#259 &#238ncadra&#355;i? <br> <input type="radio" name="raspuns" value="a" checked>sub 15 ani<br> <input type="radio" name="raspuns" value ="b">15-20 ani<br> <input type="radio" name="raspuns" value ="c">20-25 ani<br> <input type="radio" name="raspuns" value ="d">25-35 ani<br> <input type="radio" name="raspuns" value ="e">35-45 ani<br> <input type="radio" name="raspuns" value ="f">peste 45 ani Cu ajutorul atributului checked, fr alte valori, putem selecta un buton radio n mod prestabilit. Nu pot fi selectate mai multe butoane radio dintr-un grup, n acelai timp. 10.1.3. Casetele de validare Pentru a introduce o caset de validare (checkbox) se utilizeaz eticheta <input> cu atributul type avnd valoarea "checkbox". Casetele de validare permit selectarea sau deselectarea uneia sau mai multor opiuni. EXEMPLU: Unde v petrecei concediul de obicei? La mare La munte n strintate La ar Acas Codul HTML al exemplului de mai sus este urmtorul: Unde v&#259 petrecei concediul de obicei?<br> <input type="checkbox" name="optiunea1">La mare<br> <input type="checkbox" name ="optiunea2">La munte<br> <input type="checkbox" name ="optiunea3">&#206n str&#259in&#259tate<br> <input type="checkbox" name ="optiunea4">La &#355;ar&#259<br> <input type="checkbox" name ="optiunea5">Acas&#259 10.1.4. Casetele de fiiere Pentru a trimite un fiier prin intermediul unui formular, folosim pentru atributul type al tag-ului <input>, valoarea "file". 49

EXEMPLU:

Codul HTML al exemplului de mai sus este urmtorul: <input type="file" name="file"> 10.1.5. Listele de selecie O list de selecie, aa cum i spune i numele, permite utilizatorului s aleag una sau mai multe opiuni dintr-o list. Listele de selecie pot fi introduse n cadrul unui formular cu ajutorul tag-urilor <select> i </select>. Atributele cele mai folosite pentru tag-ul <select> sunt: name, atribuie listei de selecie un nume; size, specific numrul de elemente din cadrul listei de selecie; value, atribuie o valoare de tip text care va fi expediat serverului, sub forma de perechi "name = value"; selected (fr alte valori), selecteaz n mod prestabilit un element al listei. EXEMPLU: Alege un jude din Romnia: Pentru a selecta in mod implicit valoarea Bucureti, am folosit n dreptul acesteia atributul selected. Codul HTML al exemplului de mai sus este urmtorul: <select> <option value=Alba>Alba</option> <option value=Arad>Arad</option> <option value=Arges>Arges</option> <option value=Bacau>Bacau</option> <option value=Bucuresti selected>Bucuresti</option> <option value=Buzau>Buzau</option> </ select > Pentru a putea selecta mai multe valori din cadrul unei liste de selecie trebuie s folosim pentru tag-ul <select> atributul multiple, fr alte valori. 10.1.6. Butoanele de tip Submit i Reset Pentru a putea expedia datele introduse n cadrul unui formular, fie prin email, fie ctre un script scris ntr-un limbaj de programare care va interpreta aceste date, trebuie s folosim un buton de trimitere. Pentru a introduce un asemenea buton folosim tag-ul <input>, cu atributul type avnd valoarea "submit". Putem modifica i valoarea butonului, care n mod implicit este Submit, cu ajutorul atributului value. 50

Linia de cod pentru un buton de tip submit va fi urmtoarea: <input type="submit" value="Trimite"> Alturi de butonul de tip Submit, putem folosi i un buton de tip Reset. Prin apsarea acestui buton toate elementele formularului vor reveni la valoarea lor prestabilit, indiferent de valorile introduse de utilizator. Pentru a introduce un buton de tip Reset, se procedeaz la fel ca i la butonul de tip Submit, singura deosebire fiind c atributul type va avea valoarea "reset". Linia de cod pentru un buton de tip reset va fi urmtoarea: <input type="reset" value="Sterge"> 10.2. Trimiterea datelor dintr-un formular prin e-mail Pentru ca datele introduse ntr-un formular s fie trimise prin e-mail trebuie s folosim pentru atributul action al tag-ului <form>, valoarea mailto:email@domeniu.ro, n felul acesta, datele introduse in formular vor fi trimise la adresa de e-mail specificat. EXEMPLU: Pentru a trimite datele dintr-un formular la adresa exemplu@yahoo.com vom folosi urmtoarea linie de cod: <form action="mailto:exemplu@yahoo.com" method="post">

51

Bibliografie selectiv
Buraga, Sabin, Proiectare situri Web: design i funcionalitate, Editura Polirom, 2002. idem, Tehnologii Web, Editura Matrix Rom, Bucureti, 2001. Castro, Elizabeth, Html pentru world wide web, Editura Corint, 2003. Darnel, Rick, Totul despre HTML 4, Editura Teora, 2000 Drghici, Margareta Dina, Situri Web n HTML 4, Editura Tehnic, 2003. Evans, Tim, HTML...n lecii de 10 minute, Editura Teora, 1996 Mavrodin, Horaiu, Iniiere rapid n: Windows, Word, Excel, Access, PowerPoint, Internet Explorer, HTML, Editura Sigma, 2006. Mitchell, Scott, Cum s creezi un site WEB, Editura Teora, Bucureti, 2008. Phillips, Lee Anne, Utilizare HTML 4, Teora, Bucuresti, 2000. Stamate, Eugenia Lucia, Crearea i publicarea unui site web. Limbajul html i elemente de web design, Editura Paralela 45, 2005 Taylor, Dave, Crearea paginilor WEB cu HTML 4, Teora, Bucuresti, 1998.

52

Anexe

53

Anexa 2. Tag-uri i atributele lor - ordine alfabetic Nume atribu t href target Valoare atribu t URL _blank _self _paren t _top

Nume tag <A>

Detalii Ancora Adresa catre care vrem sa fie legatura Fereastra in care se va face afisarea

<B> <BODY> background adresa

Text bold Cuprinsul documentului Imaginea de fond

bgcolor

leftmargin

topmargin

imagin ii cod culoare Culoarea fondului nume culoar e procent din Distanta dintre marginea din stanga a latime ferestrei browserului si marginea a din paginii stanga a paginii numar de pixeli procent din Distanta dintre marginea de sus a inaltim ferestrei browserului si marginea ea de sus a paginii paginii numar de 54

pixeli text cod culoare nume culoar e cod culoare nume culoar e cod culoare nume culoar e cod culoare nume culoar e Culoarea textului

alink

Culoarea legaturilor active (atunci cand mouse-ul se afla deasupra lor)

link

Culoarea legaturilor nevizitate (nu s-a efectuat nici un click pe ele)

vlink

Culoarea legaturilor vizitate (s-a efectuat cel putin un click pe ele)

<BR> <CENTER> <FONT>

<FORM>

<FRAME>

Sfarsitul randului Afisarea in centrul paginii Fontul textului color cod culoare Culoarea fontului nume culoar e face nume font Tipul fontului size un numar Marimea fontului de la 1 la 7 Formular interactiv action URL Adresa scriptului care prelucreaza datele din cadrul formularului method GET Metoda de prelucrare a datelor POST formularului Cadru (fereastra) frameborder 1 sau 0 Cadrul are sau nu are chenar marginheight numar de Spatiu deasupra si sub un cadru pixeli marginwidth numar de Spatiu la stanga si la dreapta unui cadru 55

pixeli src <FRAMESET> cols URL Sursa cadrului Multime de ferestre procent din numarul si marimea relativa a latime coloanelor a paginii numar de pixeli procent din numarul si marimea relativa a inaltim randurilor ea paginii numar de pixeli Titluri in cadrul documentului left center right justify <HEAD> <HR> align left Antetul documentului Linie orizontala Alinierea orizontala a liniei Alinierea titlului

rows

H1, H2, H3, H4, H5, H6 align

color

size width

center right cod culoare Culoarea liniei nume culoar e numar de Inaltimea liniei pixeli procent din Latimea liniei latime a paginii numar de 56

pixeli <HTML> <I> <IMG> align Document HTML Text italic Adaugarea unei imagini left Alinierea imaginii in pagina: left right (stanga) sau right (dreapta) top Alinierea elementelor din jurul middle imaginii: top (sus), middle bottom (mijloc), bottom (jos) text Text ce va fi afisat in locul imaginii, in cazul in care, aceasta nu este afisata numar de Marimea chenarului din jurul imaginii pixeli procent Inaltimea imaginii numar de pixeli numar de Spatiu pe orizontala in jurul imaginii pixeli URL Adresa imaginii numar de Spatiu pe verticala in jurul imaginii pixeli procent Latimea imaginii numar de pixeli Element al formularului numar Numar maxim de caractere date de tip Numele elementului formularului caracte r numar Marimea elementului formularului URL Adresa pentru o imagine

alt

border height

hspace src vspace width

<INPUT> maxlength name

size src

57

type

text

Tip input

value

<LI> <META> content name

<OL> start type <P> align

<SELECT> multiple name

size <STRONG> <SUB> <SUP>

passw ord checkb ox radio submit reset file hidden image button date de tip Valoare input caracte r Element al unei liste Metainformatii text Descrie valoarea atributului name author Autor description Descriere keywords Cuvinte cheie Lista ordonata numar Cu ce valoare incepe numerotarea A, a, I, i, 1 Tipul numerotarii: A, a, I, i, 1 (implicit) Paragraf left Alinierea paragrafului center right justify Lista de selectii Permite selectia mai multor elemente date de tip Numele listei de selectii caracte r numar Numarul de elemente ale listei Text evidentiat Text indice Text exponent 58

<TABLE> align left center right background URL bgcolor cod culoare nume culoar e border procent numar de pixeli bordercolor cod culoare nume culoar e cellpadding numar de pixeli cellspacing cols hspace vspace width numar de pixeli numar numar de pixeli numar de pixeli procent numar de pixeli

Tabel Alinierea tabelului

Imaginea de fond pentru tabel Culoarea fondului pentru tabel

Chenarul tabelului

Culoarea chenarului

Spatiu intre continutul celulelor tabelului si marginile lor Spatiu intre celulele tabelului Numarul de coloane ale unui tabel Spatiu pe orizontala in jurul tabelului Spatiu pe verticala in jurul tabelului Latimea tabelului

<TD>

Celula de tabel align left Alinierea continutului celulei pe center orizontala right background URL Imaginea de fond pentru celula bgcolor cod culoare Culoarea fondului pentru celula nume culoar e 59

colspan height rowspan valign

numar

numar de pixeli numar Numarul de linii pe care se intinde celula top Alinierea continutului celulei pe middle verticala

Numarul de coloane pe care se intinde celula Inaltimea celulei

width <TEXTAREA> cols name

rows <TITLE> <TR> align

bgcolor

valign

bottom numar de Latimea celulei pixeli Camp de editare multilinie numar Numarul de coloane date de tip Numele campului de editare multilinie caracte r numar Numarul de randuri Titlu document Rand tabel left Alinierea continutului celulelor center pe orizontala right cod culoare Culoarea fondului pentru tot randul nume culoar e top Alinierea continutului celulelor pe middle verticala bottom

<U> <UL> type circle disc square

Text subliniat Lista neordonata Forma marcajului

60

Anexa 3. Caractere speciale Simbol &#160; &#162; &#163; Cod HTML Numar &nbsp; &cent; &pound; 61 Nume

&#169; &#171; &#174; &#176; &#177; &#178; &#179; &#181; &#182; &#185; &#187; &#188; &#189; &#190; &#194; &#206; &#215; &#216; &#226; &#238; &#247; &#248; &#350; &#351; &#354; &#355; &#8364;

&copy; &laquo; &reg; &deg; &plusmn; &sup2; &sup3; &micro; &para; &sup1; &raquo; &frac14; &frac12; &frac34; &Acirc; &Icirc; &times; &Oslash; &acirc; &icirc; &divide; &oslash;

&euro;

Anexa 4. Nume i coduri de culori sigure Culoare Nume culoare AliceBlue AntiqueWhite Cod culoare #F0F8FF #FAEBD7 62

Aqua Aquamarine Azure Beige Bisque Black BlanchedAlmond Blue BlueViolet Brown BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGreen DarkKhaki DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkTurquoise DarkViolet DeepPink DeepSkyBlue

#00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887 #5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DC #DC143C #00FFFF #00008B #008B8B #B8860B #A9A9A9 #006400 #BDB76B #8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #00CED1 #9400D3 #FF1493 #00BFFF 63

DimGray DodgerBlue Feldspar FireBrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite Gold GoldenRod Gray Green GreenYellow HoneyDew HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan LightGoldenRodYellow LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateBlue LightSlateGray LightSteelBlue LightYellow

#696969 #1E90FF #D19275 #B22222 #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 #DAA520 #808080 #008000 #ADFF2F #F0FFF0 #FF69B4 #CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2 #D3D3D3 #90EE90 #FFB6C1 #FFA07A #20B2AA #87CEFA #8470FF #778899 #B0C4DE #FFFFE0 64

Lime LimeGreen Linen Magenta Maroon MediumAquaMarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Pink Plum PowderBlue Purple Red

#00FF00 #32CD32 #FAF0E6 #FF00FF #800000 #66CDAA #0000CD #BA55D3 #9370D8 #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 #808000 #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE #D87093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #800080 #FF0000 65

RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue SlateGray Snow SpringGreen SteelBlue Tan Teal Thistle Tomato Turquoise Violet VioletRed Wheat White WhiteSmoke Yellow YellowGreen

#BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D #C0C0C0 #87CEEB #6A5ACD #708090 #FFFAFA #00FF7F #4682B4 #D2B48C #008080 #D8BFD8 #FF6347 #40E0D0 #EE82EE #D02090 #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32

66