...

); - inline: este afişat după elementul anterior (ex. ); - table: este afişat sub forma unui tabel.

Marcajele perechi pot fi imbricate: ...............

7



Browserele vor ignora marcajele şi opţiunile pe care nu le recunosc.

1.1. Structura unui document HTML Un document HTML 4 are următoarea structura: 1. o linie conţinând versiunea HTML; 2. secţiunea HEAD, delimitată de marcajele ; 3. secţiunea BODY, delimitată de marcajele < BODY> sau EXEMPLU: text … text … text … text … text … text … text … text … Un document HTML valid conţine declaraţia versiunii HTML utilizate. Declaraţia se face prin intermediul DTD (document type definition). Pe scurt, fişierul DTD conţine definiţiile 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 căror utilizare nu este recomandată deoarece se doreşte renunţarea la acestea pe viitor) sau care nu apar în documentele ce conţin 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



1.1.1 Secţiunea HEAD 8

Cuprinde informaţii care nu vor fi afişate în browser, cu excepţia marcajului <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"> 9

1.1.2 Secţiunea BODY Este inclusă între marcajele ...... ................ continut document .................

Marcajul de sfârşit () nu este obligatoriu. În secţiunea BODY se găseşte informaţ ia care va fi afişată în browser (text, imagini, etc.) (.... ). LEFTMARGIN şi TOPMARGIN sunt extensii Microsoft (nu funcţionează decât în Internet Explorer 3+). LEFTMARGIN precizează, în pixeli, marginea stângă a documentului (distanţa dintre fereastra şi conţinutul documentului); TOPMARGIN precizează, in pixeli, marginea de sus a documentului (distanţa dintre fereastră şi conţinutul documentului). Ca în orice limbaj de programare în HTML există posibilitatea de a introduce comentarii, folosind marcajul •

•

EXEMPLU : <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">

text text text text text text text text text text

alt text alt text alt text alt text alt text

(paragraf). Alături de el trebuie menţionate marcajele

,

,

,

,

,

(HEADings toate necesită marcaj de închidere) care sunt folosite în general pentru evidenţierea titlurilor. Pentru formatarea textului pot fi folosite şi marcajele: ... - caractere îngroşate; ... - caractere înclinate; ... - caractere subliniate; ... - caractere "tăiate";

...

- marcajul de informaţie preformatată ; conservă toata caracterele si spaţierile de linii; utilizează un font diferit (Courier); ^... - exponent; _... - indice;
- "rupe" textul, trecând pe o linie nouă - poate apare oriunde in text;

---

- trasează o linie subţire orizontală; ... oferă posibilitatea modificării dimensiunii, culorii şi a tipului de font utilizat; este un marcaj de tip "inline". Se foloseşte în general în interiorul marcajelor de tip "block" (ex.

) în combinaţie cu stilurile CSS, pentru a impune o formatare diferită de restul conţinutului din marcajul "block" respective; spre deosebire de , marcajul

este de tip "block". Se foloseşte în general pentru poziţionare în cadrul documentului şi pentru specificarea unor proprietăţi CSS care să fie aplicate textului din interiorul lui. •

•

•

•

•





•

•

•

•

•

•

•

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

11

Capitolul 2. Etichete (tag-uri) şi atribute HTML 2.1. Etichete (tag-uri) Tag-urile nu sunt altceva decât nişte marcaje sau etichete pe care limbajul HTML le foloseşte alături de texte pentru a ajuta browser-ul de Internet să afişeze corect conţinutul paginii web. Aceste tag-uri (etichete) pot fi de două feluri: - tag-uri pereche (un tag de început şi unul de încheiere). Exemple: şi ; ; şi ; - tag-uri singulare (nu au un tag de încheiere) Exemple:

---

,
. Tag-urile de baza pe care trebuie să le conţină un document HTML: - cu acest tag începe orice document HTML. Prin folosirea acestui tag îi spunem browser-ului că este vorba de un fişier HTML pentru a îl putea afişa. - între aceste tag-uri sunt trecute, pe lângă titlul paginii, diverse informaţii folositoare pentru browser-ul de Internet; - acesta este tag-ul de încheiere al tag-ului ; - este tag-ul de încheiere al tag-ului Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML. Acest cod va avea ca rezultat: Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML.

EXEMPLU: Utilizarea etichetei
in cadrul codului: Invat limbajul HTML.
Exersez limbajul HTML.
Stiu limbajul HTML. Acest cod va avea ca rezultat: Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML. Tag-ul < P> vine de la cuvântul paragraf si se deosebeşte de tag-ul < BR> prin faptul că prin utilizarea lui nu numai că se trece pe următorul rând, dar se şi lasă un rând liber intre texte. Revenind la exemplul de mai sus, se vor folosi ambele tag-uri,
şi

, pentru a se vedea diferenţa dintre ele. 16

Invat limbajul HTML.
Exersez limbajul HTML.

Stiu limbajul 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 , atunci textul va fi încadrat de câte un rând liber, la fel ca în exemplul de mai jos: Invat limbajul HTML.

Exersez limbajul HTML.

Stiu limbajul HTML. Vom obţine următorul rezultat: Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML.

3.3. Utilizarea caracterelor speciale Pentru ca browser-ul să citească diacriticele specifice limbii române (ă, î, ş, ţ etc.) trebuie să scriem o anumită combinaţie de diverse caractere. EXEMPLU: Iată în continuare codurile HTML pentru diacriticele specifice limbii române. Pentru lista completă de caractere speciale vezi anexa 3. Â Â â â

Ă Ă ă ă

Î Î î î

Ş Ş ş ş

Ţ Ţ ţ ţ

EXEMPLU: 17

Bine ai venit!
Vom învăţa împreună limbajul HTML. Aceasta este prima mea pagină web!

18

Capitolul 4. Despre culori Culoarea reprezintă un caracteristică extrem de importantă a unei pagini Web. Utilizată cu grijă şi măsură, ea poate îmbunătăţi substanţial aspectul paginii, făcând-o mai lizibilă şi mai atractivă, iar textul mai uşor 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 urmărit, şi care îi va determina pe mulţi vizitatori să renunţe 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 lucrării 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 cantităţile de roşu (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 roşu, cele două din mijloc, cantitatea de verde, iar ultimele două cantitatea de albastru. Sistemul hexazecimal este un sistem de numeraţie care foloseşte 16 cifre, existând următoarea 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 roşu. Semnificaţia acestui cod este următoarea: cantitatea de roşu este maximă, iar cantităţile 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 său hexazecimal este incomodă, 3.2 stabileşte un de set de 16 culori standard. direct În acest standardul caz, pentruHTML valoarea atributului culoare se utilizează numele culorii, ca în exemplul de mai jos, în care se setează culoarea magenta pentru linkurile vizitate: Numele şi codul culorilor stabilite în standardul HTML3.2 sunt următoarele: Nume culoare

Cod hexazecimal

Nume culoare

Cod hexazecimal

Aqua

#00FFFF

Navy

#000080

Black

#000000

Olive

#808000

Blue

#0000FF

Purple

#800080

19

Fuchsia

#FF00FF

Red

#FF0000

Gray

#808080

Silver

#C0C0C0

Green

#008000

Teal

#008080

Lime

#00FF00

Yellow

#FFFF00

Maroon

#800000

White

#FFFFFF

Mai trebuie menţionat faptul că se pot utiliza, pe lângă culori, 100 de nuanţe de gri ( gray ). Ele100" sunt cea numerotate de la 1 la 100, "gray 1" fiind nuanţa cea mai închisă, iar "gray mai deschisă.

4.2. Corespondenţa dintre codurile hexazecimal şi zecimal Multe dintre editoarele grafice folosesc pentru a defini culorile codul zecimal. Deşi se bazează şi ele pe acelaşi sistem RGB de definire a culorilor, numerele care stabilesc cantităţile 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, trecând 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 rând 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 , căruia îi atribuim o valoare astfel: 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:

Pagina cu fundal verde

---

20



4.4. Culoarea textului Pentru a seta culoarea textului din întreaga pagină se foloseşte atributul text al etichetei , conform sintaxei: Dacă am stabilit o culoare pentru textul din pagină şi dorim să utilizăm o altă culoare pentru o anumită secţiune a textului (culoarea unui bloc de text), vom folosi eticheta . Aceasta este o etichetă container care cuprinde între etichetele de început şi de final textul a cărui culoare dorim să o modificăm. Stabilirea culorii se face folosind atributul color al etichetei conform sintaxei: Text În EXEMPLU culoarea textului este albastru iar anumite cuvinte sunt colorate în roşu.

EXEMPLU:

Text albastru si rosu

---

Textul din aceasta pagina este albastru cu mici exceptii 4.5. Culoarea legăturilor În general legăturile ( links) dintr-o pagină Web au culori prestabilite (defaultblue ), astfel: (albastru) - pentru legături red (roşu) - pentru legătura activa (cea pe care este fixat cursorul mouse-ului, cu butonul stâng apăsat) purple (violet) - pentru legăturile vizitate, cele pe care s-a efectuat cel puţin un click Pentru a schimba culorile prestabilite se folosesc următoarele atribute ale etichetei : - link pentru legături - alink pentru legăturile active - vlink pentru legăturile vizitate conform
alink="#RGB sau nume_culoare" vlink="#RGB sau nume_culoare"> Documentul din EXEMPLU creează o pagină în care textul este negru iar legăturile au culoarea verde, legăturile active culoarea albastru şi cele vizitate, culoarea roşu. În EXEMPLU este folosită eticheta cu atributul href.

EXEMPLU:

Legaturi colorate

---

Legatura catre primul exemplu 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, aşanumită 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 combinaţii ale următoarelor numere hexazecimale: 00 33 66 99 CC FF Codul hexazecimal variază între #FFFFFF (alb) şi #000000 (negru).

22

Capitolul 5. Imagini şi elemente multimedia Conţinutul paginilor Web capătă un aspect atractiv şi profesional dacă au incluse fotografii, imagini animate, sunete sau imagini video.

5.1. Formatele fişierelor grafice Imaginile sunt stocate în fişiere cu diverse formate, cele mai folosite pe Web fiind cele care conferă un raport optim între calitatea imaginii şi dimensiunile fişierului. Două dintre cele mai utilizate tipuri de fişiere grafice sunt JPEG (Joint Photographic Experts Group) şi GIF (Graphics Interchange Format). 5.1.1. Formatul GIF Formatul GIF ( .gif) foloseşte 256 de culori şi este ideal pentru icon-uri, ilustraţii şi animaţie. Acest format utilizează o tehnologie specială de comprimare care reduce semnificativ dimensiunile fişierelor grafice pentru un transfer mai rapid prin reţea. În procesul de comprimare se păstrează toate caracteristicile imaginii srcinale, astfel că după decomprimare imaginea are acelaşi aspect ca şi srcinalul, de asemena imaginile GIF suportă efecte de transparenţă, întreţesere şi animaţie. Deoarece majoritatea browserelor recunosc formatul GIF, acesta a devenit cel mai frecvent utilizat în paginile Web. Totuşi, datorită numărului 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 număr mult mai mare de culori (aproximativ 16 milioane). Dimensiunile unui fişier JPEG nu depind de numărul de culori ci de gradul de comprimare a imaginii. Gradul de comprimare al formatului JPEG este mai ridicat decât cel al formatului GIF. Nu este neobişnuit, de exemplu, ca un de fişier GIFKb. care are 200 de Kb să fie comprimat ca fişier JPEG până la dimensiunea 30 de Pentru a realiza un grad atât de înalt de comprimare a imaginilor, formatul JPEG pierde anumite informaţii din imaginea originală. Cu toate că la decomprimare imaginea JPEG nu va fi absolut identică cu imaginea srcinală, diferenţele vor fi de cele mai multe ori inobservabile. Formatul JPEG este potrivit pentru imaginile fotografice, dar el nu este adecvat pentru ilustraţii, desene sau imagini de dimensiuni reduse. Algoritmii folosiţi pentru comprimarea şi decomprimarea imaginii alterează în mod notabil zonele de mari dimensiuni colorate cu o singură nuanţă. Din acest motiv, atunci când doriţi să includeţi în pagină un desen sau o ilustraţie care foloseşte un număr 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 (de la image). Eticheta nu este o etichetă container, prin urmare nu necesită o etichetă corespunzătoare 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 locaţia imaginii care urmează să fie inserată. Valoarea acestui atribut este adresa URL a imaginii respective. Dacă imaginea se află în acelaşi director cu fişierul HTML care face referire la imagine, atunci adresa URL a imaginii este formata numai din numele fişierului, inclusiv extensia. Dacă imaginea se află într-un alt director, URL-ul imaginii trebuie specificat fie prin adresarea absolută fie, preferabil, prin cea relativă. EXEMPLU:

Atributele border si alt

---

Acesta este un...
Atributele etichetei : - border: plasează un chenar în jurul imaginii. Valoarea atributului border este numărul de pixeli care reprezintă grosimea chenarului din jurul imaginii. Absenţa atributului sau setarea la valoarea "0" face ca acest chenar să nu fie prezent. - alt: permite afişarea unui text explicativ în spaţiul în care va fi afişată 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 afişat textul specificat ca valoare a atributului alt. De asemenea, textul specificat ca valoare pentru atributul alt va fi afişat şi în cadrul unei mici ferestre care se deschide în momentul când cursorul mouse-ului este menţinut deasupra imaginii.

5.3. Dimensionarea imaginii Dimensionarea imaginii se realizează cu ajutorul atributelor width (prin care se imaginii) şi height (prin care se stabileşte în stabileşte pixeli şi lăţimea în cazuri speciale în procente. Această ultimă înălţimea variantă imaginii) nu este 24

recomandată deoarece prin redimensionarea ascendentă a imaginii de către browser, aceasta va pierde din calitate. Acelaşi lucru se petrece şi în cazul redimensionării prin stabilirea unor valori mai mari a pixelilor decât dimensiunea iniţială a imaginii.

EXEMPLU:

Dimensionarea imaginilor

---

Absenţa 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 spaţiu pentru imagine şi de a începe încărcarea textului simultan cu încărcarea imaginii. Dacă atributele de dimensionare nu sunt prezente, browserul va efectua nişte paşi suplimentari pentru a calcula spaţiul din pagină necesar afişării imaginii. Din acest motiv afişarea textului nu va putea începe decât după ce imaginea este încărcată în întregime. Este indicat să evitam o asemenea situaţie deoarece imaginile se încarcă mai greu decât 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 următoarele valori: - left - aliniere la stânga; textul este dispus în partea dreaptă a imaginii încadrând imaginea; - aliniere la dreapta; textul este dispus în partea stânga a imaginii - right încadrând 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

Alinierea imaginii si textului (bottom)

---

Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text. Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text. Alte două atribute utile, care servesc la alinierea imaginii faţă de restul elementelor din pagină, sunt atributele hspace şi vspace. Ele precizează distanţa, î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 şi vom adăuga atributele hspace, respectiv vspace, astfel:

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 foloseşte atributul background al etichetei < BODY>, având ca valoare adresa URL a imaginii. Imaginea se multiplică aliniat (tiling) pe orizontală şi pe verticală până umple întregul ecran. EXEMPLU:

Imaginea ca fond al paginii

---

Fondul cu trandafiri...

5.6. Imaginile video Pentru a insera o imagine video într-un document HTML se folosesc atributele dynsrc, controls, loop şi start ale etichetei . 26

Atributul dynsrc înlocuieşte atributul src şi permite inserarea în documentul HTML a unei imagini video în acelaşi mod în care este inserată o imagine statică. Valoarea atributului dynsrc este adresa URL a fişierului video care va fi inclus în pagină conform sintaxei: 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 afişată. Singurul format de fişiere video care este suportat de extensiile Internet Explorer este AVI (Audio Video Interleave), deoarece acesta este formatul de redare care este inclus în browser. Construcţia de mai jos include într-un document HTML fişierul video introducere.avi care se află în folderul Video: Efectul acestei etichete este deschiderea de către browser a unei ferestre de vizualizare în interiorul paginii Web, fereastră în care va rula clipul video introducere.avi. Ca şi imaginile obişnuite, imaginea video este afişată pe măsură ce este încărcată. Deoarece nici un alt browser în afară de Internet Explorer nu recunoaşte această extensie, este recomandată includerea în cadrul etichetei < IMG> a atributului src prin care se furnizează o imagine statică ce va fi afişată în acelaşi cadru. Browserele care nu recunosc extensia dynsrc vor afişa imaginea statică pe când Internet Explorer va afişa imaginea video. Ordinea în care apar cele două atribute nu are importanţă.

EXEMPLU: În mod normal, Internet Explorer redă clipul video într-o fereastră în care nu sunt afişate nici un fel de butoane de control. Utilizatorul poate relua, opri sau continua redarea butoane clipului efectuând dreapta cu mouse-ul în interiorul controls Pentru a adăuga de controlclick acestei ferestre se utilizează atributul ferestrei. al etichetei < IMG>. Atributul controls nu are alocată nici o valoare, prezenţa sa având doar scopul de a adăuga butoanele de control asemănătoare celor de la aparatele video.

EXEMPLU: Clipul video inclus în pagină este redat de browser o singură dată, de la început până la sfârşit. Pentru a repeta redarea clipului de un anumit număr de ori este folosit atributul loop. Valorile posibile ale atributului sunt: 1) un număr întreg care reprezintă numărul de reluări ale clipului; 27

2) infinite, caz în care clipul este redat până când utilizatorul stopează derularea sa apăsând butonul stop al ferestrei de vizualizare (în cazul când fereastra conţine butoanele de control) sau efectuează click dreapta cu mouse-ul în fereastra de vizualizare.

EXEMPLU: Redarea imaginii video începe imediat ce aceasta a fost complet încărcată în pagină. Pentru a schimba acest comportament se foloseşte atributul start care poate avea valorile: 1) mouseover, situaţie în care derularea imaginii video începe în momentul când mouse-ul este plasat deasupra imaginii; 2) fileopen, valoarea predefinită, situaţie în care derularea imaginii începe imediat după încărcarea în pagină EXEMPLU: Cele două valori pot fi combinate pentru a se realiza redarea imaginii mai întâi imediat după încărcarea în pagină şi apoi de fiecare dată când mouse-ul este plasat deasupra ei: Imaginile video in-line pot fi tratate ca şi imaginile statice. O astfel de imagine poate fi aliniată folosind atributul align, sau poate fi spaţiată faţă de textul care o înconjoară. EXEMPLU:

Imagini video

---

Clipul video de mai jos face parte din filmul „Dacii”

5.7. Sunetele 28

Eticheta 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 este următoarea: Atributul src are drept valoare adresa URL a fişierului de sunet care este folosit ca fundal sonor al paginii. În mod curent, Internet Explorer recunoaşte trei tipuri de fişiere de sunet: 1) fişiere cu extensia .wav care este formatul nativ pentru PC; 2) fişiere cu extensia .au, formatul nativ pentru sistemele UNIX; 3) fişiere cu extensia .midi, un format universal acceptat pentru codificarea sunetelor. Ca şi în cazul imaginilor video in-line, fişierul de sunet este redat o singură dată, la încărcarea paginii. Pentru redarea sa repetată se foloseşte atributul loop al etichetei .

EXEMPLU:

Muzica de fundal

---

Muzica se va auzi pana cand veti inchide pagina

29

Capitolul 6. Cadre (frames) O modalitate de structurare avansată a unui document HTML este împărţirea ferestrei browserului în mai multe ferestre distincte, denumite cadre (frames). Această facilitate permite afişarea simultană, în aceeaşi fereastră a browserului, a două sau mai multe documente HTML diferite, câte unul în fiecare cadru. Avantaje: dimensiunea (KB) mai mică a fiecărui cadru în parte, comparativ cu cazul în care ar fi existat o singură pagină, determină un timp de încărcare mai redus. Dezavantaje: unele motoare de căutare nu indexează siturile realizate cu cadre; autorul trebuie să ţină evidenţa unui număr mare de pagini HTML; există unele browsere care nu pot afişa pagini realizate cu cadre; este dificil de printat întreaga pagina. Într-o pagină de cadre lipseşte elementul BODY, conţinutul paginii fiind marcat cu ajutorul controalelor şi . Frameset defineşte modul de împărţire al ferestrei (spaţiul alocat fiecărui cadru în parte). Fiecare cadru din interiorul documentului este marcat cu ajutorul controalelor şi . •

•

•

•

•

EXEMPLU: <p>Acest document contine: <ul> <li><a href="continut_cadru1.HTML" rel="nofollow">continut</a> 30<br /> <br /> <li><img src="continut_cadru2.HTML" alt="imagine"> <li><a href="continut_cadru3.HTML" rel="nofollow">continut</a> </ul> Aşa cum se vede mai sus, pentru a împărţi un cadru în două sau mai multe cadre, se folosesc marcaje frameset imbricate. Marcajul are următoarele atribute: border - defineşte lăţimea chenarului; numai frameset-ul exterior va răspunde la valoarea acestui atribut. Este o extensie Microsoft/Netscape. bordercolor - specifică culoarea chenarului, în format RGB. Este o extensie Microsoft/Netscape. cols - defineşte (pe verticală) dimensiunile sau proporţiile cadrelor în cadrul unui . Dimensiunile pot fi precizate ca: o valoare absolută (în pixeli) o valoare relativă (în procente) o * - semnifică spaţiul rămas disponibil după afişarea cadrelor anterior definite rows - defineşte (pe orizontală) dimensiunile sau proporţiile cadrelor în cadrul unui . Dimensiunile pot fi precizate ca: o valoare absolută (în pixeli) o valoare relativă (în procente) o * - semnifică spaţiul rămas disponibil după afişarea cadrelor anterior •

•

•

•

definiteCadrele propriu-zise sunt introduse prin marcajul . Marcajul are următoarele atribute: •

- specifică dacă un cadru va afişacadrele sau nu adiacente chenar. Înau frameborder cazul în care un cadru are setat frameborder=no , iar 31

specificată afişarea chenarului, acest atribut nu va avea efect pentru cadrul cu frameborder=no. longdesc - specifică un link către o descriere "lungă" a cadrului respectiv. Scopul acestei descrieri este de a completa descrierea realizată prin atributul TITLE. src - specifică linkul către conţinutul iniţial care va fi încărcat în elementul . 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 href="pagina.HTML" în combinaţie cu marcajul (...) pentru a încărca o pagină într-un anumit cadru. noresize - cadrele pot fi redimensionate de către utilizatori. Prin folosirea atributului noresize browserul va bloca redimensionarea cadrelor de către utilizator. scrolling - specifică browserului afişarea/ascunderea barei de scroll (derulare) dintr-un cadru. Poate lua următoarele atribute: o auto - afişarea barei de scroll se face atunci când este necesar (conţinutul depăşeşte spaţiul afişabil); o yes - bara de scroll este permanent afişată; o no - bara de scroll nu va fi afişată, chiar şi in eventualitatea în care este necesară. marginwidth, marginheight - specifică distanţa dintre marginea interioară a cadrului şi conţinutul afişabil. Atributul marginheight stabileşte distanţa pentru marginea superioară/inferioară a cadrului. Atributul marginwidth stabileşte distanţa pentru marginea stânga/dreapta a cadrului. Exemplul de mai jos defineşte un cu două coloane: •

•

•

•

•

•

EXEMPLU: <p>Acest document contine: <ul> <li><a href="continut_cadru1.HTML" rel="nofollow">continut</a> <li><img src="continut_cadru2.HTML" alt="imagine"> </ul> 32

Marcajul reprezintă alternativa (codul HTML) care va fi afişată în browserele care nu suportă cadre. Browserele care pot afisa cadre vor ignora acest marcaj. Exemplul de mai jos defineşte un <frameset> cu două rânduri:<br /> <br /> 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" rel="nofollow">continut</a> <li><img src="continut_cadru2.HTML" alt="imagine"> </ul> Exemplul de mai jos defineşte un cu două cadre orizontale, primul cadru având alocat 25% din spaţiul disponibil pe verticală, iar cel de al doilea cadru 75%:

EXEMPLU: text... text... text... text... text... text... text... 33<br /> <br />

Capitolul 7. Legăturile (referinţele) Navigarea în cadrul site-urilor este posibilă cu ajutorul link-urilor (legăturilor). Printr-o legătură într-un document HTML înţelegem marcajul locului de unde se poate efectua trecerea (cuplarea, conectarea) la un alt document sau la o nouă locaţie din documentul curent. Un loc marcat mai este denumit ancorare. Marcajele pot fi de două tipuri: 1) legături către alte locaţii: acestea se vor caracteriza prin textul legăturii (vizibil în documentul afişat pe ecran) şi prin adresa la care se poate efectua un salt; textul legăturii va apărea pe ecran subliniat, într-o culoare diferită de cea a textului adiacent; adresa ţintă a legăturii apare (dacă nu s-a indicat alt text) pe linia de stare a ferestrei browserului atunci când pointerul mouse-ului este pe textul legăturii; 2) definiri de nume care au doar rolul de a introduce ţinte pentru legături; nu sunt diferenţiate în documentul afişat pe ecran.

7.1. Legătura către o altă pagină - Link-urile Marcajul HTML principal pentru introducerea referinţelor către alte pagini HTML sau către elemente din cadrul aceleiaşi pagini web este , a provenind de la anchor. El trebuie să conţină atribute, în caz contrar neafectând formatarea documentului. EXEMPLU: Exemplul următor nu va afecta formatarea documentului: Aici ar trebui sa fie un link ! Pentru a activa linkul de mai sus vom adauga atributul href. Exemplul următor arată formatarea documentului: Aici este un link ! Referinţele

pot

absolute

fi

(ex.

http://www.domeniu.ro/pagina.HT ML) sau relative (ex. pagina.HTML).

Referinţele relative sunt folosite în interiorul siturilor. Ele funcţionează pe baza faptului că browserul adaugă automat numele domeniului la fiecare referinţă (presupunând că există o pagină la adresa http://www.hostx.ro/director/pagina.HTML şi o referinţă relativă către pagina2.HTML,

browserul

va

construi

referinţa 34

http://www.hostx.ro/director/pagina2.HTML in momentul în care pagina2.HTML

este solicitată) Referinţele absolute le vei folosi atunci când vrei să trimiţi 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 doreşte mutarea sitului pe un alt domeniu este nevoie să se reediteze toate referinţele. Referinţele pot fi către pagini HTML, dar şi către alte tipuri de fişiere (imagini, fişiere audio, video, documente în alte formate, etc.)

EXEMPLU: Presupunem că există un site cu următoarea structură de directoare: /director1 /director2 Pentru a apela o pagină HTML aflată în director2 dintr-o pagină aflată în director1 se va folosi următoarea secvenţa: Un link oarecare Pentru a apela o pagină HTML aflată în director1 dintr-o pagină aflată în rădăcină (nivelul superior al sitului) se va folosi urmatoarea secvenţă: Un link oarecare 7.2. Legătura către o secţiune de pagină - Ancorele Până acum am prezentat modul de realizare a referinţelor externe, către alte pagini sau către alte situri. Atunci când avem de-a face cu pagini mai lungi, putem împărţi aceste pagini în mai multe secţiuni către care să adăugăm câte o legătura la începutul paginii pentru ca utilizatorii să ajungă mai repede la secţiunea care îi interesează. În acest caz soluţia constă în utilizarea ancorelor. O ancoră are următorul format: ... Numele ancorelor nu poate conţine spaţii şi trebuie să fie unic în pagina respectivă. În exemplul următor se observă o posibilă greşeală în atribuirea numelui ancorelor: ... ... În HTML xxx şi XXX înseamnă acelaşi lucru. Odată definită ancora trebuie definită şi legatura activă către ancora respectivă. Ea va fi o referinţă hypertext în formatul următor: Link catre ancora

Trebuie reţinut că există posibilitatea de a crea referinţe către ancore aflate în documente externe: Link catre ancora externa

35

7.3. Legătura către o adresă de e-mail Forma generală a unei legături către o adresă de e-mail este următoarea: Trimite e-mail 7.4. Utilizarea unei imagini ca legătură Pentru a folosi o imagine ca legatură între tag-urile şi , va trebui scrisă adresa imaginii: 7.5. Schimbarea culorilor legăturilor Fiecare legătură din cadrul unei pagini web are trei culori: • o culoare pentru legăturile nevizitate (nu a fost efectuat nici un click pe ele); • o culoare pentru legăturile vizitate (s-a efectuat cel puţin un click pe ele); • o culoare pentru legăturile active (atunci când cursorul mouse-ului se află deasupra lor). Pentru fiecare culoare, din cele trei de mai sus, există câte un atribut al tagului ajutorul caruia putem schimba culoarea implicita: • link pentru legăturile nevizitate; • vlink pentru legaturile vizitate; • alink pentru legaturile active. Fiecărui atribut i se va atribui un nume de culoare sau codul unei culori.

EXEMPLU: Pentru ca în cadrul paginii web, legăturile să fie de culoare roşie atunci când nu au fost vizitate, de culoare neagră cele vizitate şi de culoare portocalie atunci când se trece cu mouse-ul pe deasupra lor, se foloseşte următoarea linie de cod:

36

Capitolul 8. Liste Enumerările, de orice fel, constituie o parte importantă a comunicării prin faptul că ajută la sistematizarea şi evidenţierea unor intrări. HTML oferă mai multe mecanisme pentru specificarea listelor de informaţii. Există trei tipuri de liste, fiecare tip trebuie să includă cel puţin un element: 1) liste de tip definiţie; 2) liste ordonate (numerotate); 3) liste neordonate (marcate).

8.1. Liste de tip definiţie Unul dintre cele mai obişnuite elemente în paginile HTML este un set de definiţii, referinţe sau indexuri. Un exemplu concret îl reprezintă glosarele; cuvintele sunt listate alfabetic, însoţite de definiţiile termenilor respectivi. Lista de tip definiţie este introdusă de marcajele:

...

- lista definiţii (definition list);

- termenul definit (definition term);

- definiţie (definition). EXEMPLU: •

•

•

Applet Java

Aplicatie Java inclusa intr-un document HTML

Cookie

Mecanism de comunicare intre client si server

Domeniu

Nume unic prin care se identifica un site pe Internet

8.2. Liste neordonate Sunt introduse de marcajele:

...

- lista neordonată (unordered list); •

37

•

- element listă.

EXEMPLU:

In HTML sunt disponibile 3 tipuri de liste:

• liste de tip definitie
• liste neordonate
• liste ordonate

Atributului type precizează tipul maracatorului. Putem schimba cercul plin din faţa fiecarui element (acesta este folosit în mod implicit atunci când folosim o listă neordonată) prin atribuirea atributului type valori precum square (pătrat) sau circle (cerc).

8.3. Liste ordonate Sunt introduse de marcajele:

...

- lista ordonată (ordered list);

- element listă. •

•

EXEMPLU:

In HTML sunt disponibile 3 tipuri de liste:

2. liste de tip definitie
3. liste neordonate
4. liste ordonate

şi în cazul listelor neordonate, şi la putem listele ordonate, atributul are o typePentru valoareCaimplicită: numerele. În loc de numere folosi şi alte caractere. 38

a folosi aceste caractere este de ajuns să utilizam atributul potrivita.

type cu valoarea

EXEMPLU: - pentru litere mari:

; - pentru litere mici:
; - pentru cifre romane mici:
; - pentru cifre romane mari:
. Pe lânga atributul type, pentru tag-ul
mai putem folosi şi atributul start. Atributul start setează numărul 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 număr natural. EXEMPLU:
8.4. Personalizarea listelor În locul simbolurilor folosite în mod prestabilit pentru elementele listelor se pot afişa propriile imagini. Pentru aceasta, în loc de tag-ul
4. cu care introducem fiecare element al listei vom adăuga imaginea dorită cu ajutorul tag-ului . EXEMPLU : Fiecare element al listei este introdus cu ajutorul unei imagini salvate sub denumirea de desen în folderul Poze.
   Lista persoane departament Secretariat:
   
   
   Popescu src ="../Poze/desen.gif">Ionescu Eugenia
   
   Ion Marian
   
   
   39
   
   Capitolul 9. Tabele Prezentarea datelor sub formă de tabele prezintă avantaje din punct de vedere al clarităţii şi sistematizării. Marcajele HTML dedicate formatării tabelelor permit operaţiuni asemănătoare celor din procesoarele de texte (ex. MS Word). Definirea unui tabel în HTML se face folosind perechea de marcaje < table> şi . 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. ...
   
   Semnificaţiile atributelor marcajului sunt: border - specifică grosimea chenarului tabelului. Dacă are valoarea 0 sau atributul lipseşte, tabelul nu va avea chenar. frame - defineşte modul de afişare a chenarului exterior. Funcţionează în prezenţa atributului "border". Atributul frame poate avea următoarele valori: •
   
   •
   
   o o o o o o o o o
   
   above - afişează latura superioară a chenarului; below - afişează latura inferioară a chenarului; border - afişează chenarul complet; box - afişează chenarul complet (la fel ca şi border); hsides - afişează părţile inferioară, respectiv superioară ale chenarului; vsides - afişează părţile laterale (stânga, dreapta) ale chenarului; lhs - afişează latura stângă a chenarului; rhs - afişează latura dreaptă a chenarului; void - fără bordura exterioara.
   
   rules - defineşte modul de afişare a chenarului interior dintre celulele tabelului. Funcţionează în prezenţa atributului "border". Atributul rules poate avea •
   
   următoarele valori: o none - nu se afişează chenar interior; 40
   
   o groups - afişează chenar între grupurile de celule definite de tHEAD, tBODY, colgroup, col, tfoot; o rows - afişează chenar între linii; o cols - afişează chenar între coloane; o all - afişează chenar între toate celule interioare.
   
   width, height - specifică lăţimea, respectiv înălţimea tabelului. În cazul în care valorile specificate nu sunt suficiente pentru afişarea conţinutului celulelor, valorile vor fi modificate automat de către browser astfel încât tot conţinutul să fie afişat. Valorile se pot exprima absolut, în pixeli, sau relativ la lăţimea ecranului ( width), respectiv la înălţimea ecranului ( height). Trebuie menţionat că atributul " height" nu face parte din specificaţiile HTML. Este recomandat să fie lăsat browserul să calculeze valoarea pentru " height" în funcţie de conţinutul 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 obţine 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 decât cele ale tabelului, ea va fi repetată astfel încât să acopere întregul fundal al tabelului. Este extensie Microsoft. cellspacing - specifică distanţa dintre celule. cellpadding - specifică marginea interioară a celulelor. align - specifică alinierea pe orizontală a tabelului (stânga|centru| dreapta). valign - specifică alinierea pe verticală a tabelului (sus|mijloc|jos). summary - o descriere a tabelului, de obicei pentru browsere nonvizuale. •
   
   •
   
   •
   
   •
   
   •
   
   •
   
   •
   
   •
   
   •
   
   •
   
   Cea mai simplă formă a unui tabel se prezintă astfel:

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

   O formă mai complexă a unui tabel este: 41
   
   

   Nr. Crt	Nume Autor	Denumire Lucrare
   ...	...	...
   ...	...	...

   Semnificaţiile atributelor marcajului sunt: ... este un marcaj care conţine unul sau mai multe rânduri de celule care reprezintă antetul tabelului. Poate apărea o singură dată în cadrul unui tabel. ... este un marcaj care conţine unul sau mai multe rânduri de celule. Pot fi definite mai multe astfel de secţiuni în cadrul aceluiaşi tabel (ex. în cazul în care există stiluri de formatare diferite pentru secţiuni diferite ale tabelului). ... este un marcaj care conţine unul sau mai multe rânduri de celule care reprezintă subsolul tabelului. Poate apărea o singură dată în •
   
   •
   
   •
   
   cadrul unui tabel. Este obligatoriu să apără înaintea marcajului . EXEMPLU: Conţinutul fiecărei celule poate fi formatat individual: 42
   
   

   Col 1	Col 2
   Celula 1.1
   Celula 1.2
   Celula 2.1	Celula 2.2

   În cazul în care se doreşte ca tabelul din exemplul anterior să fie afişat cu chenar:

   Col 1	Col 2
   Celula 1.1	Celula 1.2
   Celula 2.1	Celula 2.2

   
   
   Un alt marcaj care poate apărea în cadrul unui tabel este . Acesta are următoarea sintaxă: ... Marcajul caption adaugă o scurtă descriere (titlu) a tabelului. Poate fi utilizat numai în cadrul unui marcaj , imediat după acesta. Are următoarele atribute: mod normal browser-ul va afişa align titlul aliniat central şi în align - în deasupra/dedesubtul tabelului. În HTML 4.0 atributul a fost abandonat favoarea formatării prin CSS (text-align şi vertical-align). valign - precizează poziţia titlului în raport cu tabelul (sus/jos). •
   
   •
   
   EXEMPLU: Col 1 43
   
   
   
   Celula 1.2
   
   

   Exemplu utilizare caption

   	Coloana 2
   Celula 1.1
   Celula 2.1	Celula 2.2

   Marcajul defineşte o linie intr-un tabel. Are următoarea sintaxă: .... Poate avea alignurmătoarele - specifică atribute: modul în care va fi aliniat pe orizontală conţinutul liniei de tabel. valign - specifică modul în care va fi aliniat pe verticală conţinutul 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 defineşte o celulă din antetul tabelului. Sintaxa este: •
   
   •
   
   •
   
   •
   
   •
   
   
   [background="url-imagine"] [colspan=n] [rowspan=m] [bgcolor="#rrggbb"|culoare] [bordercolor="#rrggbb"|culoare] [bordercolorlight="#rrggbb"|culoare] [bordercolordark="#rrggbb"|culoare] [nowrap] [abbr="text"]> .... Poate avea următoarele atribute: align, valign - indică alinierea orizontală şi verticală a conţinutului celule, în celula. colspan - specifică numărul de coloane peste care se întinde celula curentă spre dreapta. rowspan - specifică numărul 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 menţionate mai sus. •
   
   •
   
   •
   
   •
   
   •
   
   EXEMPLU:

   Exemplu tabel

   Col 1	Coloana 2
   Celula 1.1;	Celula 1.2
   Celula 2.1	Celula 2.2

   Marcajul defineşte o celulă din tabel. Are următoarea sintaxă: 45
   
   ... Atributele marcajului au efecte similare cu cele prezentate mai sus, în cazul marcajului . Ultimele atribute sunt colspan şi rowspan. Ele extind o celula pe mai multe coloane, respectiv linii ale tabelului.
   
   EXEMPLU: Exemplu utilizare colspan:

   Exemplu tabel

   Celula 1.1	Celula 1.2
   Celula 2.1

   Exemplu utilizare rowspan:

   Exemplu tabel

   Celula 1.1	Celula 1.2
   	Celula 2.2

   
   
   46
   
   Capitolul 10. Formulare Formularele reprezintă o metodă de interactivitate cu utilizatorii paginilor web. Prin intermediul unui formular se pot obţine 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 adăugate într-o bază de date. Un formular este introdus în pagina web prin tag-urile
   şi
   . Între aceste tag-uri vor fi introduse toate elementele formularului. Tag-ul
   are două atribute foarte importante: action şi method. Cu ajutorul atributului action îi spunem browser-ului ce se va întâmpla 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, aşa 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 putând fi trimise cantităţi 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 . Atributele cele mai importante ale acestui tag sunt următoarele: - type - tipul elementului; - name - numele elementului; - value - valoarea elementului. Elementele ale unui formular pot fi: - câmpurile de editare; - butoanele radio; - casetele de validare; - casetele de fişiere; - listele de selecţie; - butoanele submit şi reset.
   
   10.1.1. Câmpurile de editare introducetype în ,cadrul unui , formular valoarea un câmp text de editare, trebuie să folosimPentru pentrua atributul al tag-ului . 47
   
   EXEMPLU: Atributele cele mai folosite pentru tagul de tipul câmp de editare sunt: • size, care reprezintă lăţimea câmpului de editare; • maxlength, specifică numărul maxim de caractere care pot fi introduse în câmpul de editare; • value, valoarea iniţială a câmpului de editare. De exemplu, pentru câmpul de editare de mai sus s-a folosit următoarea linie de cod: Dacă se doreşte introducerea unui câmp de editare de tip "parolă", atributul type va avea valoarea "password". În acest caz, caracterele introduse în câmpul de editare, nu vor fi vizibile. Atunci când vrem să adăugam în cadrul formularului nostru un câmp de editare în care să poată fi introduse mai multe rânduri, folosim câmpurile de editare de tip multilinie. Pentru a folosi un astfel de câmp de editare, avem nevoie de tagurile şi .
   
   EXEMPLU: < textarea cols="50" rows ="5" name="exemplu"> Am folosit atributul cols pentru a stabili numărul de caractere al fiecărui rând, atributul rows pentru numărul de rânduri al câmpului de editare, iar atributul name pentru numele câmpului de editare.
   
   10.1.2. Butoanele radio Daca avem o întrebare cu mai multe variante de răspuns, 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 vârstă vă încadraţi? 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 următorul: În ce categorie de vârstă vă încadraţi?
   sub 15 ani
   15-20 ani
   20-25 ani
   < ani
   > 25-35 ="e">35-45 ani< peste 45 ani Cu ajutorul atributului checked, fără alte valori, putem selecta un buton radio în mod prestabilit. Nu pot fi selectate mai multe butoane radio dintr-un grup, în acelaşi timp.
   
   10.1.3. Casetele de validare Pentru a introduce o casetă de validare ( checkbox) se utilizează eticheta cu atributul type având valoarea "checkbox". Casetele de validare permit selectarea sau deselectarea uneia sau mai multor opţiuni. EXEMPLU: Unde vă petreceţi concediul de obicei? La mare La munte În străinătate La ţară Acasă Codul HTML al exemplului de mai sus este următorul: Unde vă petreceţi concediul de obicei?
   La mare
   La munte
   În străinătate
   La ţară
   Acasă
   
   10.1.4. Casetele de fişiere Pentru a trimite un fişier prin intermediul unui formular, folosim pentru atributul type al tag-ului , valoarea "file". 49
   
   EXEMPLU:
   
   Codul HTML al exemplului de mai sus este următorul:
   
   10.1.5. Listele de selecţie O listă de selecţie, aşa cum îi spune şi numele, permite utilizatorului să aleagă una sau mai multe opţiunitag-urilor dintr-o listă. Listele deselect selecţie cadrul unui formular cu ajutorul < select > şi . pot fi introduse în Atributele cele mai folosite pentru tag-ul sunt: • name, atribuie listei de selecţie un nume; • size, specifică numărul de elemente din cadrul listei de selecţie; • value, atribuie o valoare de tip text care va fi expediată serverului, sub forma de perechi "name = value"; • selected (fără alte valori), selectează în mod prestabilit un element al listei.
   
   EXEMPLU: Alege un judeţ din România: Pentru a selecta in mod implicit valoarea Bucureşti, am folosit în dreptul acesteia atributul selected. Codul HTML al exemplului de mai sus este următorul: Alba Arad Arges Bacau Bucuresti Buzau … Pentru a putea selecta mai multe valori din cadrul unei liste de selecţie trebuie să folosim pentru tag-ul < select> atributul multiple, fără 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 către 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 , cu atributul type având 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 următoarea: Alături de butonul de tip Submit, putem folosi şi un buton de tip Reset. Prin apăsarea 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 următoarea:
   
   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 protected], î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 [email protected] vom folosi următoarea linie de cod:
   
   51
   
   Bibliografie selectivă Buraga, Sabin, Proiectare situri Web: design şi funcţionalitate, Editura Polirom, 2002. idem, Tehnologii Web, Editura Matrix Rom, Bucureşti, 2001. Castro, Elizabeth, Html pentru world wide web, Editura Corint, 2003. Darnel, Rick, Totul despre HTML 4, Editura Teora, 2000 Drăghici, Margareta Dina, Situri Web în HTML 4, Editura Tehnică, 2003. Evans, Tim, HTML...în lecţii de 10 minute, Editura Teora, 1996 Mavrodin, Horaţiu, Iniţiere rapidă în: Windows, Word, Excel, Access, PowerPoint, Internet Explorer, HTML, Editura Sigma, 2006. Mitchell, Scott, Cum să creezi un site WEB, Editura Teora, Bucureşti, 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 tag
   
   
   
   Nume atribu t
   
   Valoare atribu Detalii t Ancora href URL Adresa catre care vrem sa fie legatura target _blank Fereastra in care se va face afisarea _self _paren t _top Textbold Cuprinsul documentului background adresa Imaginea de fond imagin ii bgcolor cod culoare Culoarea fondului nume culoar e leftmargin procent din Distanta dintre marginea din stanga a latime ferestrei browserului si marginea a din paginii stanga a paginii numar de pixeli topmargin procent din Distanta dintre marginea de sus a inaltim ferestrei browserului si marginea ea de sus a paginii paginii numar de 54
   
   pixeli text
   
   alink
   
   link
   
   vlink
   
   
   
   
   
   
   
   
   codculoare nume culoar e codculoare nume culoar e codculoare nume culoar e codculoare nume culoar e
   
   Culoarea textului
   
   Culoarea legaturilor active (atunci cand mouse-ul se afla deasupra lor) Culoarea legaturilor nevizitate (nu s-a efectuat nici un click pe ele) Culoarea legaturilor vizitate (s-a efectuat cel putin un click pe ele)
   
   Sfarsitul randului Afisarea in centrul paginii Fontul textului color codculoare Culoarea fontului nume culoar e face numefont Tipulfontului size unnumar 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 marginwidth numarpixeli de Spatiu la stanga si la dreapta unui cadru 55
   
   pixeli src cols
   
   rows
   
   H1, H2, H3, H4, H5, H6
   
   align
   
   URL
   
   Sursacadrului Multime de ferestre procentdin numarul si marimea relativa a latime coloanelor a paginii numar de pixeli procentdin numarul si marimea relativa a inaltim randurilor ea paginii numar de pixeli Titluri in cadrul documentului left
   
   Alinierea titlului center right justify
   
   

   ---

   align
   
   Antetul documentului Linieorizontala Alinierea orizontala a liniei
   
   left center right
   
   color
   
   size width
   
   codculoare nume Culoarea liniei culoar e numarde Inaltimea liniei pixeli procentdin Latimea liniei latime a paginii numar de 56
   
   pixeli align
   
   left
   
   Document HTML Textitalic Adaugarea unei imagini Alinierea imaginii in pagina: left right (stanga) sau right (dreapta) top middle bottom
   
   Alinierea elementelor din jurul imaginii: top (sus), middle (mijloc), bottom (jos) Text ce va fi afisat in locul imaginii, in cazul in care, aceasta nu este afisata Marimea chenarului din jurul imaginii
   
   alt
   
   text
   
   border
   
   numarde pixeli procent Inaltimea imaginii numar
   
   height
   
   hspace src vspace width
   
   maxlength name size src
   
   de pixeli numarde pixeli URL numarde pixeli procent numar de pixeli
   
   Spatiu pe orizontala in jurul imaginii Adresaimaginii Spatiu pe verticala in jurul imaginii Latimea imaginii
   
   Element al formularului Numar maxim de caractere Numele elementului formularului
   
   numar datedetip caracte r numar Marimea elementului formularului URL Adresapentruoimagine
   
   57
   
   type
   
   value

   <META> content
   
   text
   
   Tip input
   
   passw ord checkb ox radio submit reset file hidden image button datedetip Valoare input caracte r Element alunei liste Metainformatii text Descrie valoarea atributului name
   
   name
   
   author description keywords
   
   start type
   
   numar A, a, I, i, 1
   
   align
   
   left
   
   

   
   
   

   
   
   center right justify
   
   multiple name size
   
   Autor Descriere Cuvinte cheie Listaordonata Cu ce valoare incepe numerotarea Tipul numerotarii: A, a, I, i, 1 (implicit) Paragraf Alinierea paragrafului
   
   Lista de selectii Permite selectia mai multor elemente Numele listei de selectii
   
   datedetip caracte r numar Numarul de elemente ale listei Text evidentiat Textindice Textexponent
   
   58
   
   align
   
   Tabel Alinierea tabelului
   
   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 numarde pixeli numarde pixeli procent
   
   Imaginea de fond pentru tabel Culoarea fondului pentru tabel
   
   Chenarul tabelului
   
   Culoarea chenarului
   
   Spatiu intre continutul celulelor tabelului marginilesilor Spatiu intre celulele tabelului Numarul de coloane ale unui tabel Spatiu pe orizontala in jurul tabelului Spatiu pe verticala in jurul tabelului Latimea tabelului
   
   numar de pixeli

   Celuladetabel 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 numar height numarde pixeli numar Numarul de linii pe care se intinde celula top Alinierea continutului celulei pe middle verticala rowspan valign width cols name rows <TITLE> <TR> align bgcolor<br /> <br /> valign<br /> <br /> <U> <UL> type<br /> <br /> Numarul de coloane pe care se intinde celula Inaltimea celulei<br /> <br /> bottom numarde Latimea celulei pixeli Camp de editare multilinie numar Numaruldecoloane datedetip Numele campului de editare multilinie caracte r numar Numarulderanduri Titlu document Randtabel 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 Textsubliniat Listaneordonata circle Forma marcajului disc square<br /> <br /> 60<br /> <br /> Anexa 3. Caractere speciale Cod HTML<br /> <br /> Simbol ¢ £<br /> <br /> Numar   ¢ £<br /> <br /> Nume   ¢ £ 61<br /> <br /> © « ® ° ± ² ³ µ ¶ ¹ » ¼ ½ ¾ Â Î ×<br /> <br /> © « ® ° ± ² ³ µ ¶ ¹ » ¼ ½ ¾ Â Î ×<br /> <br /> © « ® ° ± ² ³ µ ¶ ¹ » ¼ ½ ¾ Â Î ×<br /> <br /> Ø â î ÷ ø Ş ş Ţ ţ €<br /> <br /> Ø â î ÷ ø Ş ş Ţ ţ €<br /> <br /> Ø â î ÷ ø<br /> <br /> €<br /> <br /> Anexa 4. Nume şi coduri de culori sigure Culoare<br /> <br /> Numeculoare AliceBlue AntiqueWhite<br /> <br /> Codculoare #F0F8FF #FAEBD7 62<br /> <br /> Aqua Aquamarine Azure Beige Bisque Black BlanchedAlmond Blue BlueViolet Brown BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk<br /> <br /> #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887 #5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DC<br /> <br /> Crimson Cyan DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGreen DarkKhaki DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkTurquoise DarkViolet<br /> <br /> #DC143C #00FFFF #00008B #008B8B #B8860B #A9A9A9 #006400 #BDB76B #8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #00CED1 #9400D3<br /> <br /> DeepPink DeepSkyBlue<br /> <br /> #FF1493 #00BFFF 63<br /> <br /> DimGray DodgerBlue Feldspar FireBrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite Gold GoldenRod Gray Green GreenYellow HoneyDew HotPink IndianRed<br /> <br /> #696969 #1E90FF #D19275 #B22222 #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 #DAA520 #808080 #008000 #ADFF2F #F0FFF0 #FF69B4 #CD5C5C<br /> <br /> Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan LightGoldenRodYellow LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateBlue LightSlateGray<br /> <br /> #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2 #D3D3D3 #90EE90 #FFB6C1 #FFA07A #20B2AA #87CEFA #8470FF #778899<br /> <br /> LightSteelBlue LightYellow<br /> <br /> #B0C4DE #FFFFE0 64<br /> <br /> Lime LimeGreen Linen Magenta Maroon MediumAquaMarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose<br /> <br /> #00FF00 #32CD32 #FAF0E6 #FF00FF #800000 #66CDAA #0000CD #BA55D3 #9370D8 #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA #FFE4E1<br /> <br /> Moccasin NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Pink Plum PowderBlue<br /> <br /> #FFE4B5 #FFDEAD #000080 #FDF5E6 #808000 #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE #D87093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6<br /> <br /> Purple Red<br /> <br /> #800080 #FF0000 65<br /> <br /> RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue SlateGray Snow SpringGreen SteelBlue Tan Teal<br /> <br /> #BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D #C0C0C0 #87CEEB #6A5ACD #708090 #FFFAFA #00FF7F #4682B4 #D2B48C #008080<br /> <br /> Thistle Tomato Turquoise Violet VioletRed Wheat White WhiteSmoke Yellow YellowGreen<br /> <br /> #D8BFD8 #FF6347 #40E0D0 #EE82EE #D02090 #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32<br /> <br /> 66<br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://idoc.tips/report/lucrare-de-diploma-pagini-web-in-html-pdf-free" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "Lucrare de Diploma Pagini WEB in HTML"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"> Close Send × Sign In Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close