GRUPUL ŞCOLAR DE ARTE ŞI MESERII AL COOPERAŢIEI MEŞTEŞUGĂREŞTI „SPIRU HARET”, CRAIOVA

ŞCOALA POSTLICEALĂ SPECIALIZAREA ANALIST PROGRAMATOR

Pagini WEB în HTML

ÎNDRUMĂTOR, Prof. OLTEANU Mihaela

ABSOLVENT, DRAGOMIR Laurenţiu Marius

CRAIOVA 2009 Planul lucrării
Argument Capitolul 1. ..................................................................................................... Introducere în limbajul HTML …………………………….. 1.1. Structura unui document HTML …………………………. 1.1.1. Secţiunea HEAD ……………………………………….. 1.1.2. Secţiunea 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. Corespondenţa dintre codurile hexazecimal şi zecimal ….. 4.3. Culoarea fundalului ………………………………………. 4.4. Culoarea textului …………………………………………. 4.5. Culoarea legăturilor ………………………………………. 4.6. Culori „sigure” …………………………………………… Imagini şi elemente multimedia …………………………….. 5.1. Formatele fişierelor 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) ……………………………………………….. Legăturile (referinţele) ……………………………………… 7.1. Legătura către o altă pagină - Link-urile …………………. 7.2. Legătura către o secţiune de pagină – Ancorele …............. 7.3. Legătura către o adresă de e-mail …………………........... 7.4. Utilizarea unei imagini ca legătură …………………......... 7.5. Schimbarea culorilor legăturilor …………………………. Liste …………………………………………………………... 8.1. Liste de tip definiţie ……………………………………… 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. Câmpurile de editare ………………………….............. 10.1.2. Butoanele radio ……………………………………….. 10.1.3. Casetele de validare …………………………………... 10.1.4. Casetele de fişiere …………………………….............. 10.1.5. Listele de selecţie ……………………………………... 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

3

Capitolul al cincilea. tabelele. fotografii. Cel de-al doilea capitol („Etichete (tag-uri) şi atribute HTML”) prezintă marcajele sau etichetele 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 precum şi atributele fiecărui tag în parte. culoarea legăturilor şi într-o secţiune aparte sunt prezentate aşa-numitele culori „sigure”. HTML este o abreviere de la Hypertext Markup Language şi reprezintă scheletul oricărei pagini de Web. În primul capitol („Introducere în limbajul HTML”) este prezentată structura unui document HTML precum şi cele două părţi componente ale fiecărui document HTML: secţiunea HEAD şi BODY. HTML este modul în care îi comunicăm browserului ce elemente dorim să introducem în pagina Web şi care este aspectul acestora. care descrie formatul primar în care documentele sunt distribuite şi văzute pe Web. Capitolul al şaptelea („Legăturile (referinţele)”) prezintă modalitatea de navigare în cadrul site-urilor cu ajutorul link-urilor şi ale ancorelor. Următorul capitol („Tabele”) prezintă modalitatea de realizare a unui tabel. Cele şapte subcapitole prezintă informaţii despre formatele fişierelor grafice (GIF şi JPEG). culoarea textului. despre modalitatea inserării unei imagini. tipurile de liste precum şi modalităţi de personalizare a listelor. despre imaginile folosite ca fond (background) al paginii. Structurată în 10 capitole cărora li se adaugă trei anexe şi bibliografia aferentă. listele. cum ar fi independenţa faţă de platforma. alinierea imaginii şi a textului. fac din el un foarte bun format pentru documentele Internet şi Web. În capitolul al treilea („Formatarea textului”) este prezentată modalitatea de aranjare a conţinutului prezentat de fiecare pagină web. culoarea fundalului. precum şi aspectul pe care îl are pagina din punct de vedere grafic. dimensionarea acesteia. paragrafele. Capitolul al patrulea („Despre culori”) prezintă în cele şase subcapitolele ale sale informaţii despre sistemul de definire a culorilor. („Imagini şi elemente multimedia”) oferă informaţii despre acele elemente. legăturile cu alte pagini. Capitolul opt („Liste”) prezintă modalitatea de realizare a unei liste în cadrul unei pagini web. Multe din trăsăturile lui. imagini animate. structurarea formatării şi legăturile hipertext. prezenta lucrare reprezintă o scurtă prezentare a limbajului HTML. prin care sunt descrise elementele structurale ale paginii de Web: titlurile.Argument Unul din primele elemente fundamentale ale WWW (World Wide Web) este HTML (Hypertext Markup Language). care conferă paginilor Web un aspect atractiv şi profesional. HTML nu este un limbaj de programare ci un limbaj descriptiv. despre imaginile video şi despre sunete. În fond. corespondenţa dintre codurile hexazecimal şi zecimal. sunete sau imagini video. Capitolul al şaselea („Cadre”) prezintă modalitatea de organizare a paginilor web prin împărţirea ferestrei browserului în mai multe ferestre distincte. 4 .

butoanele radio. precum şi o listă cu numele şi codurile culorilor sigure. o listă a caracterelor speciale. prezentând elementele componente ale unui formular (câmpurile de editare. casetele de fişiere. casetele de validare. listele de selecţie şi butoanele de tip Submit şi Reset).Ultimul capitol („Formularele”) oferă informaţii despre metodele de interactivitate cu utilizatorii paginilor web prin intermediul formularelor. precum şi modalitatea de trimitere a datelor dintr-un formular prin e-mail. Lucrarea se încheie cu trei anexe care conţin o listă a tag-urilor şi a atributelor lor prezentate în ordine alfabetică. 5 .

6 .

individuale (ex.. <p>. HTML este un limbaj simplu. în limba engleză) va avea forma <nume_marcaj>. compus din coduri speciale (marcaje) care se inserează într-un text pentru a adăuga informaţii despre formatare. ceea ce uşurează navigarea în cadrul aceluiaşi document sau între documente diferite)..... HTML 3.01).... ca urmare a necesităţii de publicare a informaţiilor la nivel global. imagine sau alt element al documentului vizualizat de utilizator poate face referinţă la un alt document. Introducere în limbajul HTML HTML (HyperText Markup Language) a fost dezvoltat iniţial de Tim Berners-Lee în anul 1989.. • structurarea formatării....0. avem marcaje de tip: . Marcajele perechi pot fi imbricate: <nume_marcaj1> <nume_marcaj2> . Pe parcursul anilor. destinat să reprezinte instanţe ale acestor tipuri de documente. Parantezele unghiulare sunt elementele care indică prezenţa unui marcaj... limbajul nefiind senzitiv la literele mari/mici (case sensitive). </nume_marcaj2> 7 .. HTML 4 şi cel mai recent HTML 4. limbajul a evoluat (HTML 3.. Se remarcă câteva trăsături cum ar fi: • independenţa de platformă (modul de afişare al unui document este acelaşi.. .Capitolul 1. numele marcajelor poate fi scris oricum. un sistem pentru definirea tipurilor de documente structurate. fiecare versiune oferind noi facilităţi. În funcţie de modul de formatare a paginii.inline: este afişat după elementul anterior (ex..</p>) . <p>). </nume_marcaj> Exista două tipuri de marcaje: .perechi (ex.. . La baza SGML şi a HTML se află acelaşi principiu: descrierea conţinutului unui document se face într-un fişier text obişnuit (ASCII).. <br>) .2.. S-a urmărit ca aceste fişiere să fie editabile cu aplicaţii software nepretenţioase (ex.. NotePad. un marcaj (tag... Unele marcaje permit utilizarea unor atribute care se vor scrie în marcajul de inceput: <nume_marcaj optiune1=valoare1 optiune2=valoare2 .. <span>).table: este afişat sub forma unui tabel. Este derivat din SGML (Standard Generalized Markup Language)..... În cadrul unui document HTML..block: este afişat sub elementul anterior (ex..> . indiferent de computerul pe care se realizează afişarea).de menţionat că sfârşitul unui marcaj este indicat prin utilizarea caracterului '/' în faţa numelui de marcaj.. • posibilităţile hypertext (orice cuvânt.. WordPad).

• HTML 4.01 Strict DTD HTML 4. delimitată de marcajele <HEAD> </HEAD>. 1.org/TR/HTML4/loose.org/TR/HTML4/frameset.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.01//EN" "http://www.01 1.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN" "http://www. fişierul DTD conţine definiţiile marcajelor din versiunea respectivă de HTML.w3. Declaraţia se face prin intermediul DTD (document type definition). HTML 4.1 Secţiunea HEAD 8 . Pe scurt.1. Structura unui document HTML Un document HTML 4 are următoarea structura: 1.01 Transitional DTD include Strict DTD plus elementele şi atributele "învechite". 2.01 4.01 specifica 3 variante DTD : • HTML 4.w3.1.dtd"> 4.01 Transitional DTD HTML 4.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Frameset//EN" "http://www.01 Frameset DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. secţiunea HEAD.</nume_marcaj1> Browserele vor ignora marcajele şi opţiunile pe care nu le recunosc. 3.01 Frameset DTD include Transitional DTD plus cadrele (frames).w3. 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 conţine declaraţia versiunii HTML utilizate.org/TR/HTML4/strict. HTML 4. • HTML 4. o linie conţinând versiunea HTML. secţiunea BODY.

Toate referintele (<a href=""></a>. o descriere a paginii. • <STYLE>. <LINK rel="STYLEsheet" href="stiluri..cascading STYLE sheets .</STYLE> • <SCRIPT> . etc. charset=windows-1250"> <META name="author" content="Marinescu Ion"> <META name="copyright" content="© 2009 Marinescu Ion"> <META name="keywords" content="curs.css" type="text/css"> </HEAD> 9 . fiind deosebit de important pentru motoarele de căutare.2" type="text/javascript" src="lib.stiluri pentru formatarea textului din documentul HTML.. frecvenţa (teoretică) cu care motoarele de căutare ar trebui să reindexeze pagina.php" target="_top"> </HEAD> • <LINK> . spre exemplu un fişier de definiţii CSS.ro/index.scripturi JavaScript sau VBScript <SCRIPT language="JavaScript1. numele autorului paginii. <META name="nume" content="continut"> Declararea setului de caractere se face astfel: <META http-equiv="Content-Type" content="text/HTML.xprim. rusa.poate conţine cuvinte cheie. cu excepţia marcajului <TITLE> Marcajul <TITLE> este obligatoriu şi poate apare doar in secţiunea HEAD. etc. Declaraţiile META implică în general declararea unei proprietăţi şi a valorii asociate acelei proprietăţi. Alte marcaje care apar în secţiune HEAD: • <META> .js"></SCRIPT> • <BASE> .Cuprinde informaţii care nu vor fi afişate în browser. charset=set_caractere"> Precizarea setului de caractere face posibilă afişarea în browserul utilizatorului a caracterelor specifice unor limbi precum româna. <STYLE type="text/css">. respectiv <img src="">) din documentul respectiv vor fi deschise relativ la marcajul <base>. tutorial"> <LINK rel="STYLEsheet" href="stiluri.css" type="text/css"> EXEMPLU: Secţiunea HEAD a unui document HTML poate arată în felul următor: <HEAD> <TITLE>Titlul paginii</TITLE> <META http-equiv="Content-Type" content="text/HTML.stabileşte o legătură cu un document extern. <HEAD> <BASE href="http://www. El va conţine un titlu relevant pentru pagină. HTML.stabileste URL-ul de "baza" al documentului. araba.

.. continut document ... </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]> .... Ca în orice limbaj de programare în HTML există posibilitatea de a introduce comentarii.. LEFTMARGIN şi TOPMARGIN sunt extensii Microsoft (nu funcţionează decât în Internet Explorer 3+).... textul comentariului --> EXEMPLU : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. charset=windows-1250"> <META name="author" content="Marinescu Ion"> <META name="copyright" content="© 2009 Marinescu Ion"> <META name="keywords" content="curs.2 Secţiunea BODY Este inclusă între marcajele <BODY>..org/TR/HTML4/strict.w3.1.) (<BODY>.01//EN" "http://www...dtd"> <HTML> <HEAD> <TITLE>Titlul paginii mele</TITLE> <META http-equiv="Content-Type" content="text/HTML.. • LEFTMARGIN precizează..... în pixeli...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 secţiunea BODY se găseşte informaţia care va fi afişată în browser (text. marginea de sus a documentului (distanţa dintre fereastră şi conţinutul documentului).. </BODY> Marcajul de sfârşit (</BODY>) nu este obligatoriu.... • TOPMARGIN precizează. folosind marcajul <!-..1. in pixeli...... etc. tutorial"> <LINK rel="STYLEsheet" href="stiluri..... marginea stângă a documentului (distanţa dintre fereastra şi conţinutul documentului).. HTML. imagini.... </BODY>).

..caractere "tăiate".trasează o linie subţire orizontală...  utilizează un font diferit (Courier)..."> .În exemplul de mai sus a apărut un nou marcaj <p> (paragraf).poate apare oriunde in text. Alături de el trebuie menţionate marcajele <h1>.caractere subliniate.indice. • <font>.</u> . • <sub>...caractere îngroşate. <DIV [ ALIGN="left|center|right"] STYLE="... </DIV> 11 .marcajul de informaţie preformatată . • <sup>.</i> .</b> ..  conservă toata caracterele si spaţierile de linii....... • <u>. <h4>.</pre> ..exponent.</sup> .... <h3>...</s> .. • spre deosebire de <span>. <h6> (HEADings toate necesită marcaj de închidere) care sunt folosite în general pentru evidenţierea titlurilor.. • <i>.. <p>) în combinaţie cu stilurile CSS.. trecând pe o linie nouă ... • <hr> ....</font> oferă posibilitatea modificării dimensiunii. <h2>... • <span> este un marcaj de tip "inline". • <s>.</sub> ... pentru a impune o formatare diferită de restul conţinutului din marcajul "block" respective."rupe" textul.. culorii şi a tipului de font utilizat.... Pentru formatarea textului pot fi folosite şi marcajele: • <b>... 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..... marcajul <div> este de tip "block".. Se foloseşte în general în interiorul marcajelor de tip "block" (ex. • <pre>..caractere înclinate.. • <br> . <h5>.

diverse informaţii folositoare pentru browser-ul de Internet. Tagurile HTML pot avea atribute. </BODY> . </TITLE> . </HEAD> .Capitolul 2. EXEMPLU: Acest exemplu aliniază textul la centrul paginii web. Acestea sunt întotdeauna definite în tagul de început al unui element HTML. Prin folosirea acestui tag îi spunem browser-ului că este vorba de un fişier HTML pentru a îl putea afişa. pe lângă titlul paginii. <HEAD> . Sunt de forma: nume="valoare".cu acest tag începe orice document HTML. <TITLE> . de către browser.este tag-ul de încheiere al tag-ului <TITLE>. 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. </HTML> . . <BR>.este tag-ul de încheiere al tag-ului <HTML>. <HEAD> şi </HEAD>. Arată sfârşitul titlului documentului.comunică browser-ului că s-a terminat de scris conţinutul paginii. Tot ce se scrie între tag-urile <BODY> şi </BODY> va fi afişat.tag-uri pereche (un tag de început şi unul de încheiere). Tot ceea ce se scrie după acest tag nu va mai fi afişat.cu ajutorul acestei perechi de tag-uri se dă un titlu paginii web. Tag-urile de baza pe care trebuie să le conţină un document HTML: <HTML> .1. <TITLE> şi </TITLE>.acesta este tag-ul de încheiere al tag-ului <HEAD>. textul scris între aceste tag-uri va fi afişat în bara de titlu a documentului. Etichete (tag-uri) şi atribute HTML 2. <h1 align = "center">Acesta e un text</h1> EXEMPLU: Acest exemplu aplică fundalului o culoare portocalie. <BODY bgcolor = "orange"> Text Text Text 12 . Aceste tag-uri (etichete) pot fi de două feluri: . 2.tag-uri singulare (nu au un tag de încheiere) Exemple: <HR>.odată cu acest tag începe conţinutul paginii web.între aceste tag-uri sunt trecute. Astfel. pe ecranul monitorului. Exemple: <HTML> şi </HTML>. Atribute Atributele HTML furnizează informaţii adiţionale elementelor HTML. Codul oricărui document se termina cu acest tag. <BODY> .2.

la fel dacă valoarea unui atribut nu este una validă. Aceasta înseamnă că indiferent cum scriem etichetele. 13 . cu litere mari sau cu litere mici. Valorile atributelor trebuie să fie întotdeauna încadrate în ghilimele. ea va fi de asemenea ignorată. browserul ignoră pur şi simplu tagul. Daca sintaxa nu este respectată. HTML nu este un limbaj case-sensitive. adică nu face distincţia între literele mici şi cele mari (majuscule). ele vor fi corect interpretate de browser.</BODY> Pentru o mai bună diferenţiere şi evidenţiere etichetele (tag-urile) HTML sunt scrise cu majuscule iar atributele asociate acestora sunt scrise cu litere 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 căruia titlul va putea fi aliniat la stânga. Formatarea textului Pentru alegerea caracteristicilor unui text. <H3>. Astfel în cadrul codului HTML vom folosi tag-ul <H1>. <H6>. EXEMPLU: Linia de cod: <FONT COLOR=”CornflowerBlue”>Proiect diploma</FONT> va afişa în cadrul browserului de Internet: Proiect diploma <FONT COLOR=”#6495ED”>Proiect diploma</FONT> va afişa în cadrul browserului de Internet: Proiect diploma <FONT COLOR=”#FF0000”>Proiect diploma</FONT> va afişa în cadrul browserului de Internet: Proiect diploma La tipul fontului. face. care au şi tag-uri de încheiere. Cu ajutorul acestor tag-uri. Formatarea titlului Atunci când avem nevoie să folosim un titlu în cadrul paginii noastre web putem apela la tag-urile <H1>. la centru sau la dreapta. atributul FACE arată tipul fontului. iar la sfârşit vom folosi tag-ul de încheiere </H1>. vom scrie titlurile din cadrul paginilor noastre web. 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 afişat cu caracterele cele mai mici. la fel ca şi la culori. putem folosi tag-ul <FONT>. Acest tag acceptă mai multe atribute (color.2. size) care ne vor ajuta în formatarea textelor. Formatarea textului 3. pentru ca dacă se foloseşte un font mai puţin utilizat. mulţi utilizatori nu vor putea vedea textele din cadrul paginilor prezentate cu acelaşi font. <H2>. Cele mai folosite fonturi pentru paginile web sunt următoarele: Acest text a fost scris cu fontul "arial" 14 . de exemplu. iar atributul SIZE arată mărimea fontului. 3. <H4>. este bine să se folosească un font care se află pe majoritatea calculatoarelor. Atributul COLOR se referă la culoarea textului ce va fi încadrat de tag-urile <FONT> şi </FONT>.1. <H5>. urmat de textul titlului.Capitolul 3.

folosim perechea de etichete <B> şi </B>. folosim perechea de etichete <I> şi </I>.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 îngroşate.5.6.. vom folosi una din valorile atributului size. însă nu este obligatoriu. Acesta poate lua una din valorile 1. folosim perechea de etichete <U> şi </U>. <B>Text bold</B> Text bold Pentru ca textul să fie scris cu caractere italice.</FONT> Pentru a schimba dimensiunea implicită a fontului.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 .3. în timp ce tag-ul <P> are tag de încheiere. Tag-ul <BR> nu are tag de încheiere. 15 . <U>Text subliniat</U> Text subliniat Dacă vrem ca textul să fie afişat în centrul paginii putem folosi perechea de etichete <CENTER> şi </CENTER>.2.. <CENTER>Text centrat</CENTER> Text centrat Atunci când vrem ca textul din cadrul paginii noastre web să fie afişat pe mai multe rânduri vom folosi unul din tag-urile <BR> sau <P>.4. <I>Text italic</I> Text italic Pentru ca textul să fie subliniat.

Revenind la exemplul de mai sus.<BR>Stiu limbajul HTML. Stiu limbajul HTML. Exersez limbajul HTML. </BODY> </HTML> Acest cod va avea ca rezultat: Invat limbajul HTML. Stiu limbajul HTML.<BR>Exersez limbajul HTML. Stiu limbajul HTML. </BODY> </HTML> Acest cod va avea ca rezultat: Invat limbajul HTML. EXEMPLU: Avem următorul cod HTML: <HTML> <HEAD> <TITLE>Eticheta <BR></TITLE> </HEAD> <BODY> Invat limbajul HTML. EXEMPLU: Utilizarea etichetei <BR> in cadrul codului: <HTML> <HEAD> <TITLE>Eticheta <BR></TITLE> </HEAD> <BODY> Invat limbajul HTML. <HTML> <HEAD> <TITLE>Eticheta <BR></TITLE> </HEAD> <BODY> 16 . Exersez limbajul HTML. Exersez limbajul HTML. se vor folosi ambele tag-uri. pentru a se vedea diferenţa dintre ele. dar se şi lasă un rând liber intre texte.Tag-ul <BR> vine de la line break (întrerupere de linie) şi este folosit pentru a face trecerea de la o linie la alta. <BR> şi <P>. 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.

î. ş &#351. î &#238. Dacă scriem un text între tag-urile <P> şi </P>. Utilizarea caracterelor speciale Pentru ca browser-ul să citească diacriticele specifice limbii române (ă.<BR>Exersez limbajul HTML. ş.Invat limbajul HTML. la fel ca în exemplul de mai jos: <HTML> <HEAD> <TITLE>Eticheta <BR></TITLE> </HEAD> <BODY> Invat limbajul HTML. ţ &#355. EXEMPLU: Iată în continuare codurile HTML pentru diacriticele specifice limbii române. â &#226. Î &#206. Ţ &#354. Ş &#350. ă &#259. Pentru lista completă de caractere speciale vezi anexa 3. atunci textul va fi încadrat de câte un rând liber.<P>Stiu limbajul HTML. </BODY> </HTML> Acest cod va avea ca rezultat: Invat limbajul HTML. Stiu limbajul HTML. 3. Exersez limbajul HTML. </BODY> </HTML> Vom obţine următorul rezultat: Invat limbajul HTML. Exersez limbajul HTML.</P>Stiu limbajul HTML.3.<P>Exersez limbajul HTML. Stiu limbajul HTML. Ă &#258. EXEMPLU: 17 . Â &#194. ţ etc.) trebuie să scriem o anumită combinaţie de diverse caractere.

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

link-uri). verde (Green) şi albastru (Blue) care o compun.Capitolul 4. şi care îi va determina pe mulţi vizitatori să renunţe la a-l mai parcurge. standardul HTML 3. făcând-o mai lizibilă şi mai atractivă. cantitatea de verde. margini. Pe de altă parte. utilizarea excesivă sau inadecvată a culorilor poate transforma un text de calitate într-un fel de caleidoscop obositor. dintre care primele două reprezintă cantitatea de roşu. în care se setează culoarea magenta pentru linkurile vizitate: <BODY vlink="magenta"> Numele şi codul culorilor stabilite în standardul HTML3. fundaluri. Semnificaţia acestui cod este următoarea: cantitatea de roşu este maximă. iar ultimele două cantitatea de albastru. Sistemul hexazecimal este un sistem de numeraţie care foloseşte 16 cifre. iar cantităţile de verde şi albastru sunt egale cu 0. ea poate îmbunătăţi substanţial aspectul paginii.2 stabileşte un set de 16 culori standard. ca în exemplul de mai jos. Utilizată cu grijă şi măsură. Despre culori Culoarea reprezintă un caracteristică extrem de importantă a unei pagini Web. iar textul mai uşor de parcurs.1. Deoarece uneori definirea culorii prin intermediul codului său hexazecimal este incomodă. Codul pentru verde pur este #00FF00 iar pentru albastru este #0000FF.2 sunt următoarele: Nume culoare Aqua Black Blue Cod hexazecimal #00FFFF #000000 #0000FF Nume culoare Navy Olive Purple Cod hexazecimal #000080 #808000 #800080 19 . În acest caz. cele două din mijloc. Datorită faptului că ea reprezintă un atribut al multor elemente ale documentelor Web (text. În HTML orice culoare este desemnată printr-un cod de 6 cifre hexazecimale. 4. 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). 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. greu de urmărit. pentru valoarea atributului de culoare se utilizează direct numele culorii. am optat pentru prezentarea detaliată a modului de utilizare al culorilor încă din această etapă a lucrării noastre.

culoarea linkurilor vizitate alink . Ele sunt numerotate de la 1 la 100. iar "gray 100" cea mai deschisă. numerele care stabilesc cantităţile celor trei culori sunt specificate în sistemul zecimal. Deşi se bazează şi ele pe acelaşi sistem RGB de definire a culorilor. 128. "gray 1" fiind nuanţa cea mai închisă. trecând fiecare dintre cele trei numere hexazecimale din codul culorii în sistemul zecimal: 63(16)=99(10) . 4. Această corespondenţă se realizează simplu.Fuchsia Gray Green Lime Maroon #FF00FF #808080 #008000 #00FF00 #800000 Red Silver Teal Yellow White #FF0000 #C0C0C0 #008080 #FFFF00 #FFFFFF Mai trebuie menţionat faptul că se pot utiliza. Cu ajutorul lor se pot seta culorile fundalului. Corespondenţa dintre codurile hexazecimal şi zecimal Multe dintre editoarele grafice folosesc pentru a defini culorile codul zecimal. textului şi linkurilor: bgcolor . 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 . pe lângă culori. 255.culoarea fundalului text . Culoarea fundalului Pentru a stabili culoarea fundalului unei pagini folosim atributul bgcolor (background color) al etichetei <BODY>. FF(16)=255(10).culoarea linkurilor vlink . o culoare care are codul hexazecimal #63FF80 va avea codul zecimal 99. 80(16)=128(10) Vom lua pe rând atributele etichetei <BODY>. 100 de nuanţe de gri (gray).culoarea linkului activ 4.3. De exemplu.2. căruia î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.culoarea textului link .

astfel: blue (albastru) . Aceasta este o etichetă container care cuprinde între etichetele de început şi de final textul a cărui culoare dorim să o modificăm. 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.pentru legătura activa (cea pe care este fixat cursorul mouse-ului. 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 roşu.link pentru legături .pentru legături red (roşu) .alink pentru legăturile active . Culoarea textului Pentru a seta culoarea textului din întreaga pagină se foloseşte atributul text al etichetei <BODY>.</HTML> 4. Culoarea legăturilor În general legăturile (links) dintr-o pagină Web au culori prestabilite (default).4. cele pe care s-a efectuat cel puţin un click Pentru a schimba culorile prestabilite se folosesc următoarele atribute ale etichetei <BODY>: .vlink pentru legăturile vizitate conform sintaxei: <BODY link="#RGB sau nume_culoare" 21 . cu butonul stâng apăsat) purple (violet) .pentru legăturile vizitate. vom folosi eticheta <font>. conform sintaxei: <BODY text="#RGB sau nume_culoare"> 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).

Culorile "sigure" sunt cele definite prin standardul HTML 3. Culori "sigure" Nu toate monitoarele pot reproduce cele 16.000 de culori furnizate de codul RGB.6. 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. În EXEMPLU este folosită eticheta <a> cu atributul href.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.HTML">Legatura catre primul exemplu</a> </BODY> </HTML> 4. Cele realizate cu tehnologii mai vechi. legăturile active culoarea albastru şi cele vizitate.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 .777. sau cele moderne setate pentru numai 256 de culori pot reproduce corect doar un set limitat de 256 de culori. culoarea roşu. aşanumită paletă Web sau "culorile sigure Web".

Acest format utilizează o tehnologie specială de comprimare care reduce semnificativ dimensiunile fişierelor grafice pentru un transfer mai rapid prin reţea. Formatul JPEG este potrivit pentru imaginile fotografice. ilustraţii şi animaţie.gif) foloseşte 256 de culori şi este ideal pentru icon-uri. pe de altă parte. Dimensiunile unui fişier JPEG nu depind de numărul de culori ci de gradul de comprimare a imaginii. întreţesere şi animaţie. formatul JPEG pierde anumite informaţii din imaginea originală. Formatul JPEG Formatul JPEG (. Pentru acest tip de imagini. cel mai adecvat este formatul JPEG. 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. Imagini şi elemente multimedia Conţinutul paginilor Web capătă un aspect atractiv şi profesional dacă au incluse fotografii.1. ca un fişier GIF care are 200 de Kb să fie comprimat ca fişier JPEG până la dimensiunea de 30 de Kb. 5. Algoritmii folosiţi pentru comprimarea şi decomprimarea imaginii alterează în mod notabil zonele de mari dimensiuni colorate cu o singură nuanţă. 23 .jpg). desene sau imagini de dimensiuni reduse. diferenţele vor fi de cele mai multe ori inobservabile. formatul GIF nu este potrivit pentru fotografii sau imagini de calitate înaltă. Din acest motiv. acesta a devenit cel mai frecvent utilizat în paginile Web. imagini animate. dar el nu este adecvat pentru ilustraţii. Formatul GIF Formatul GIF (. astfel că după decomprimare imaginea are acelaşi aspect ca şi originalul. Nu este neobişnuit. datorită numărului redus de culori.1. 5. Gradul de comprimare al formatului JPEG este mai ridicat decât cel al formatului GIF. suportă un număr mult mai mare de culori (aproximativ 16 milioane).1.Capitolul 5. formatul GIF este cel mai potrivit.2. În procesul de comprimare se păstrează toate caracteristicile imaginii originale. Totuşi. 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. Pentru a realiza un grad atât de înalt de comprimare a imaginilor. de asemena imaginile GIF suportă efecte de transparenţă. de exemplu. sunete sau imagini video.1. Cu toate că la decomprimare imaginea JPEG nu va fi absolut identică cu imaginea originală. 5. Două dintre cele mai utilizate tipuri de fişiere grafice sunt JPEG (Joint Photographic Experts Group) şi GIF (Graphics Interchange Format). Deoarece majoritatea browserelor recunosc formatul GIF.

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ă 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. <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 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 stabileşte lăţimea imaginii) şi height (prin care se stabileşte înălţimea imaginii) în pixeli şi în cazuri speciale în procente. Această ultimă variantă 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: <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> 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; - right - aliniere la dreapta; textul este dispus în partea stânga a imaginii î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

<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ă 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 <IMG> şi vom adăuga 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 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: <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

fereastră în care va rula clipul video introducere. Ca şi imaginile obişnuite./Imagini/intro./Imagini/intro. imaginea video nu va putea fi afişată.. Valorile posibile ale atributului sunt: 1) un număr întreg care reprezintă numărul de reluări ale clipului. prezenţa sa având doar scopul de a adăuga butoanele de control asemănătoare celor de la aparatele video.avi care se află în folderul Video: <IMG dynsrc=". imaginea video este afişată pe măsură ce este încărcată. Pentru a repeta redarea clipului de un anumit număr de ori este folosit atributul loop./Video/intro.. Browserele care nu recunosc extensia dynsrc vor afişa imaginea statică pe când Internet Explorer va afişa imaginea video. Utilizatorul poate relua. opri sau continua redarea clipului efectuând click dreapta cu mouse-ul în interiorul ferestrei. Internet Explorer redă clipul video într-o fereastră în care nu sunt afişate nici un fel de butoane de control. Dacă programul plug-in nu este disponibil pe computerul vizitatorului.gif"> În mod normal. Singurul format de fişiere video care este suportat de extensiile Internet Explorer este AVI (Audio Video Interleave). vizitatorul paginii trebuie să instaleze un program auxiliar de tip plug-in. EXEMPLU: <IMG dynsrc=".gif" controls> Clipul video inclus în pagină este redat de browser o singură dată. Pentru a adăuga butoane de control acestei ferestre se utilizează atributul controls al etichetei <IMG>../Video/intro..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ă. Ordinea în care apar cele două atribute nu are importanţă.avi" src=". 27 . de la început până la sfârşit. deoarece acesta este formatul de redare care este inclus în browser.avi. Valoarea atributului dynsrc este adresa URL a fişierului 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.. EXEMPLU: <IMG dynsrc=". 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. Atributul controls nu are alocată nici o valoare./Video/introducere. Construcţia de mai jos include într-un document HTML fişierul video introducere. Pentru a vizualiza o imagine video in-line într-un browser Netscape.avi" src=".avi"> Efectul acestei etichete este deschiderea de către browser a unei ferestre de vizualizare în interiorul paginii Web.

/Imagini/dac./Imagini/intro.avi" src=". sau poate fi spaţiată faţă de textul care o înconjoară./Video/intro./Imagini/intro... EXEMPLU: <IMG dynsrc=".avi" src=". mouseover"> Imaginile video in-line pot fi tratate ca şi imaginile statice.gif" controls loop="infinite" start="fileopen.gif" controls loop="infinite"> Redarea imaginii video începe imediat ce aceasta a fost complet încărcată în pagină. Sunetele 28 .gif" controls start="fileopen. 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=". situaţie în care derularea imaginii video începe în momentul când mouse-ul este plasat deasupra imaginii...7. O astfel de imagine poate fi aliniată folosind atributul align.. 2) fileopen. mouseover" loop="infinite"> </CENTER> </BODY> </HTML> 5. 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: <IMG dynsrc=".avi" src=". Pentru a schimba acest comportament se foloseşte atributul start care poate avea valorile: 1) mouseover./Video/intro.2) infinite.. valoarea predefinită./Video/dacii. 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.

la încărcarea paginii./Sunet/sound loop="infinite"> </BODY> </HTML> 29 . În mod curent. un format universal acceptat pentru codificarea sunetelor. fişierul de sunet este redat o singură dată. 3) fişiere cu extensia .au. Această etichetă este. Sintaxa etichetei <BGSOUND> este următoarea: <BGSOUND src="URL_fisier_sunet" loop="valoare"> Atributul src are drept valoare adresa URL a fişierului de sunet care este folosit ca fundal sonor al paginii.. formatul nativ pentru sistemele UNIX.midi.wav care este formatul nativ pentru PC. 2) fişiere cu extensia . 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=". Internet Explorer recunoaşte trei tipuri de fişiere de sunet: 1) fişiere cu extensia . Pentru redarea sa repetată se foloseşte atributul loop al etichetei <BGSOUND>. Ca şi în cazul imaginilor video in-line. de asemenea. o extensie Internet Explorer deci nu este recunoscută şi executată în alte browsere.Eticheta <BGSOUND> realizează includerea în pagina Web a unei muzici de fundal.

comparativ cu cazul în care ar fi existat o singură pagină. 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).w3. determină un timp de încărcare mai redus. Fiecare cadru din interiorul documentului este marcat cu ajutorul controalelor <frame> şi </frame>. Frameset defineşte modul de împărţire al ferestrei (spaţiul alocat fiecărui cadru în parte). în aceeaşi fereastră a browserului.HTML"> <noframes> <p>Acest document contine: <ul> <li><a href="continut_cadru1. 70%"> <frameset rows="200. Dezavantaje: • unele motoare de căutare nu indexează siturile realizate cu cadre.01 Frameset//EN" "http://www.HTML">continut</a> 30 . câte unul în fiecare cadru.HTML"> <frame src="continut_cadru2. • există unele browsere care nu pot afişa pagini realizate cu cadre.HTML"> </frameset> <frame src="continut_cadru3. 200"> <frame src="continut_cadru1.org/TR/HTML4/frameset. EXEMPLU: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. Avantaje: • dimensiunea (KB) mai mică a fiecărui cadru în parte.Capitolul 6.dtd"> <HTML> <HEAD> <TITLE>Un document cu cadre</TITLE> </HEAD> <frameset cols="30%. conţinutul paginii fiind marcat cu ajutorul controalelor <frameset> şi </frameset>. • este dificil de printat întreaga pagina. Într-o pagină de cadre lipseşte elementul BODY. a două sau mai multe documente HTML diferite. • autorul trebuie să ţină evidenţa unui număr mare de pagini HTML. Această facilitate permite afişarea simultană.

defineşte lăţimea chenarului. iar cadrele adiacente au 31 ..HTML" alt="imagine"> <li><a href="continut_cadru3. Este o extensie Microsoft/Netscape. • cols . numai frameset-ul exterior va răspunde la valoarea acestui atribut. Este o extensie Microsoft/Netscape.defineşte (pe verticală) dimensiunile sau proporţiile cadrelor în cadrul unui <frameset>. • bordercolor . În cazul în care un cadru are setat frameborder=no.] [rows=x.. în format RGB.] . Dimensiunile pot fi precizate ca: o valoare absolută (în pixeli) o valoare relativă (în procente) o * . </frameset> Marcajul <frameset> are următoarele atribute: • border .<li><img src="continut_cadru2... se folosesc marcaje frameset imbricate...HTML">continut</a> </ul> </noframes> </frameset> </HTML> Aşa cum se vede mai sus.semnifică spaţiul rămas disponibil după afişarea cadrelor anterior definite • rows .semnifică spaţiul rămas disponibil după afişarea cadrelor anterior definite Cadrele propriu-zise sunt introduse prin marcajul <frame>.y. <frame [frameborder=yes|no] [longdesc=URL] [src=URL] [name=identificator] [noresize] [scrolling = auto|yes|no] [marginwidth=x] [marginheight=y] .specifică dacă un cadru va afişa sau nu chenar..y. </frame> Marcajul <frame> are următoarele atribute: • frameborder . pentru a împărţi un cadru în două sau mai multe cadre..specifică culoarea chenarului. <frameset [border=n] [bordercolor=#rrggbb] [cols=x.defineşte (pe orizontală) dimensiunile sau proporţiile cadrelor în cadrul unui <frameset>. Dimensiunile pot fi precizate ca: o valoare absolută (în pixeli) o valoare relativă (în procente) o * .

o yes .HTML" target="RightFrame">. Atributul marginwidth stabileşte distanţa pentru marginea stânga/dreapta a cadrului.cadrele pot fi redimensionate de către utilizatori.HTML" alt="imagine"> </ul> </noframes> 32 .atribuie un nume cadrului curent. 70%"> <frame src="continut_cadru1. Acest nume poate fi folosit în combinaţie cu marcajul a (<a href="pagina. • scrolling .specifică distanţa dintre marginea interioară a cadrului şi conţinutul afişabil.</a>) pentru a încărca o pagină într-un anumit cadru.specifică linkul către conţinutul iniţial care va fi încărcat în elementul <frame>. chiar şi in eventualitatea în care este necesară. marginheight .w3.org/TR/HTML4/frameset. • noresize . • name . Scopul acestei descrieri este de a completa descrierea realizată prin atributul TITLE.afişarea barei de scroll se face atunci când este necesar (conţinutul depăşeşte spaţiul afişabil).01 Frameset//EN" "http://www.HTML) sau relativă (pagina.bara de scroll este permanent afişată.bara de scroll nu va fi afişată. Exemplul de mai jos defineşte un <frameset> cu două coloane: EXEMPLU: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.specifică browserului afişarea/ascunderea barei de scroll (derulare) dintr-un cadru. Atributul marginheight stabileşte distanţa pentru marginea superioară/inferioară a cadrului. Poate lua următoarele atribute: o auto ..dtd"> <HTML> <HEAD> <TITLE>Un document cu cadre</TITLE> </HEAD> <frameset cols="30%. • longdesc .domeniu.ro/pagina. • src . acest atribut nu va avea efect pentru cadrul cu frameborder=no.HTML). o no . Prin folosirea atributului noresize browserul va bloca redimensionarea cadrelor de către utilizator.HTML">continut</a> <li><img src="continut_cadru2.specifică un link către o descriere "lungă" a cadrului respectiv.HTML"> <frame src="continut_cadru2. • marginwidth.HTML"> <noframes> <p>Acest document contine: <ul> <li><a href="continut_cadru1. Linkul poate fi o cale absolută (http://www.specificată afişarea chenarului..

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

HTML">http://www.HTML şi o referinţă relativă către pagina2.HTML<a>).1. într-o culoare diferită de cea a textului adiacent. a provenind de la anchor. Referinţele relative sunt folosite în interiorul siturilor.HTML">pagina. textul legăturii va apărea pe ecran subliniat.ro/director/pagina. browserul va construi referinţa 34 . <a href="http://www.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>. 2) definiri de nume care au doar rolul de a introduce ţinte pentru legături. Exemplul următor arată formatarea documentului: <a href="pagina. conectarea) la un alt document sau la o nouă locaţie din documentul curent.domeniu. nu sunt diferenţiate în documentul afişat pe ecran.HT ML<a>) sau relative (ex. EXEMPLU: Exemplul următor 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. 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.ro/pagina. Printr-o legătură într-un document HTML înţelegem marcajul locului de unde se poate efectua trecerea (cuplarea. El trebuie să conţină atribute.domeniu.ro/pagina. 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.HTML">Aici</a> este un link ! Referinţele pot fi absolute (ex.</noframes> </frameset> </HTML> Capitolul 7. 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.hostx. Legăturile (referinţele) Navigarea în cadrul site-urilor este posibilă cu ajutorul link-urilor (legăturilor).HTML. Legătura către o altă pagină . Un loc marcat mai este denumit ancorare. <a href="pagina. în caz contrar neafectând formatarea documentului. 7.

dar şi către alte tipuri de fişiere (imagini. Atunci când avem de-a face cu pagini mai lungi. În exemplul următor se observă o posibilă greşeală în atribuirea numelui ancorelor: <a name="xxx">.</a> În HTML xxx şi XXX înseamnă acelaşi lucru..Ancorele Până acum am prezentat modul de realizare a referinţelor externe. documente în alte formate.. video. către alte pagini sau către alte situri. pot fi folosite şi în interiorul unui site.htm#nume_ancora">Link catre ancora externa</a> 35 ./director2/pagina.</a> <a name="XXX">.</a> Numele ancorelor nu poate conţine spaţii şi trebuie să fie unic în pagina respectivă. ai mai mult de tastat).HTML">Un link oarecare</a> 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ţă: <a href="director1/pagina. etc..2.. Odată definită ancora trebuie definită şi legatura activă către ancora respectivă. însă va implica un efort mai mare în scrierea paginilor (pe scurt. 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.HTML este solicitată) Referinţele absolute le vei folosi atunci când vrei să trimiţi utilizatorul pe un alt site (domeniu).HTML">Un link oarecare</a> 7. iar în cazul în care se doreşte mutarea sitului pe un alt domeniu este nevoie să se reediteze toate referinţele. Ea va fi o referinţă hypertext în formatul următor: <a href="#nume_ancora">Link catre ancora</a> Trebuie reţinut că există posibilitatea de a crea referinţe către ancore aflate în documente externe: <a href="pagina. Legătura către o secţiune de pagină .. Referinţele pot fi către pagini HTML..) 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: <a href=".ro/director/pagina2. fişiere audio. O ancoră are următorul format: <a name="nume_ancora">.HTML in momentul în care pagina2..hostx.http://www.

3. • o culoare pentru legăturile vizitate (s-a efectuat cel puţin un click pe ele). Pentru fiecare culoare.7.4. din cele trei de mai sus. se foloseşte următoarea linie de cod: <BODY link=”#FF0000” vlink=”#000000” alink=”FF9600”> 36 . 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: <A href="mailto:adresa de e-mail">Trimite e-mail</A> 7. • vlink pentru legaturile vizitate. Utilizarea unei imagini ca legătură Pentru a folosi o imagine ca legatură între tag-urile <a> şi </a>. • alink pentru legaturile active. există câte un atribut al tagului </BODY> ajutorul caruia putem schimba culoarea implicita: • link pentru legăturile nevizitate. de culoare neagră cele vizitate şi de culoare portocalie atunci când se trece cu mouse-ul pe deasupra lor. 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). Fiecărui atribut i se va atribui un nume de culoare sau codul unei culori.HTML><img src="adresaimaginii"</A> 7. EXEMPLU: Pentru ca în cadrul paginii web.5. • o culoare pentru legăturile active (atunci când cursorul mouse-ului se află deasupra lor). legăturile să fie de culoare roşie atunci când nu au fost vizitate. va trebui scrisă adresa imaginii: <A href=numepagina.

HTML oferă mai multe mecanisme pentru specificarea listelor de informaţii. Liste de tip definiţie Unul dintre cele mai obişnuite elemente în paginile HTML este un set de definiţii..lista definiţii (definition list). Liste neordonate Sunt introduse de marcajele: • <ul>.termenul definit (definition term).</dl> .lista neordonată (unordered list).2.. referinţe sau indexuri. constituie o parte importantă a comunicării prin faptul că ajută la sistematizarea şi evidenţierea unor intrări..</ul> . • <dt> . fiecare tip trebuie să includă cel puţin un element: 1) liste de tip definiţie. 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.Capitolul 8. Lista de tip definiţie este introdusă de marcajele: • <dl>. 3) liste neordonate (marcate). Liste Enumerările.. • <dd> . însoţite de definiţiile termenilor respectivi. 2) liste ordonate (numerotate).definiţie (definition). cuvintele sunt listate alfabetic.1. 37 . Un exemplu concret îl reprezintă glosarele. 8. Există trei tipuri de liste. de orice fel.

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).. Pentru 38 . În loc de numere putem folosi şi alte caractere. Liste ordonate Sunt introduse de marcajele: • <ol>.3. şi la listele ordonate. atributul type are o valoare implicită: numerele. 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.• <li> .</ol> .lista ordonată (ordered list). 8. • <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.element listă..

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

specifică grosimea chenarului tabelului.defineşte modul de afişare a chenarului exterior. Definirea unui tabel în HTML se face folosind perechea de marcaje <table> şi </table>. Funcţionează în prezenţa atributului "border".Capitolul 9.. Marcajele HTML dedicate formatării tabelelor permit operaţiuni asemănătoare celor din procesoarele de texte (ex. MS Word). Funcţionează în prezenţa atributului "border".afişează latura superioară a chenarului. Atributul frame poate avea următoarele valori: o above .afişează latura inferioară a chenarului. 40 . Tabele Prezentarea datelor sub formă de tabele prezintă avantaje din punct de vedere al clarităţii şi sistematizării.fără bordura exterioara. o below . respectiv superioară ale chenarului.afişează latura dreaptă a chenarului. Dacă are valoarea 0 sau atributul lipseşte. Prin intermediul acestei perechi de marcaje se definesc atribute valabile pentru întregul tabel. o box . dreapta) ale chenarului. Majoritatea acestor atribute pot fi însă redefinite pentru anumite celule ale tabelului.afişează chenarul complet. o lhs .afişează chenarul complet (la fel ca şi border)..afişează părţile inferioară. o vsides .defineşte modul de afişare a chenarului interior dintre celulele tabelului. Atributul rules poate avea următoarele valori: o none .afişează latura stângă a chenarului. • frame . o void . <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"]> . o hsides . </table> Semnificaţiile atributelor marcajului <table> sunt: • border . • rules . o rhs . tabelul nu va avea chenar.nu se afişează chenar interior.afişează părţile laterale (stânga. o border .

• cellpadding . • cellspacing . o Cea mai simplă formă a unui tabel se prezintă astfel: <table> <tr> <td>.</td> <td>.specifică culoarea pentru fundalul tabelului.. sau relativ la lăţimea ecranului (width).. de obicei pentru browsere nonvizuale.afişează chenar între grupurile de celule definite de tHEAD. • bordercolor . în pixeli. valorile vor fi modificate automat de către browser astfel încât tot conţinutul să fie afişat... tfoot. respectiv la înălţimea ecranului (height). • bgcolor .</td> </tr> <tr> <td>. • background .. Este extensie Microsoft. ea va fi repetată astfel încât să acopere întregul fundal al tabelului. colgroup. Este recomandată folosirea de culori complementare pentru a obţine efectul scontat. • summary . o rows .groups .specifică alinierea pe orizontală a tabelului (stânga|centru| dreapta).afişează chenar între toate celule interioare. o cols . În cazul in care dimensiunile imaginii sunt mai mici decât cele ale tabelului. • valign . col. height .specifică culoarea chenarului.sunt atribute utilizate pentru a crea un efect 3D asupra chenarului.afişează chenar între linii. • align . • bordercolorlight..URL-ul imaginii care va fi utilizată ca fundal al tabelului.specifică distanţa dintre celule. tBODY..afişează chenar între coloane.o descriere a tabelului. Este recomandat să fie lăsat browserul să calculeze valoarea pentru "height" în funcţie de conţinutul tabelului. • width..</td> <td>. bordercolordark . o all .specifică marginea interioară a celulelor. respectiv înălţimea tabelului.specifică alinierea pe verticală a tabelului (sus|mijloc|jos).. Sunt extensii Microsoft.. Trebuie menţionat că atributul "height" nu face parte din specificaţiile HTML.. Valorile se pot exprima absolut.specifică lăţimea.. În cazul în care valorile specificate nu sunt suficiente pentru afişarea conţinutului celulelor.</td> </tr> </table> O formă mai complexă a unui tabel este: <table> 41 .

<tHEAD> <tr> <th>Nr.</td> </tr> </tBODY> </table> Semnificaţiile atributelor marcajului <table> sunt: • <tHEAD>... Poate apărea o singură dată în cadrul unui tabel.</tfoot> este un marcaj care conţine unul sau mai multe rânduri de celule care reprezintă subsolul tabelului.. în cazul în care există stiluri de formatare diferite pentru secţiuni diferite ale tabelului)...</td> <td>....</td> <td>..</td> </tr> <tr> <td>. Poate apărea o singură dată în cadrul unui tabel. Pot fi definite mai multe astfel de secţiuni în cadrul aceluiaşi tabel (ex..2</i></td> </tr> 42 ..... EXEMPLU: Conţinutul fiecărei 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..</tHEAD> este un marcaj care conţine unul sau mai multe rânduri de celule care reprezintă antetul tabelului. Este obligatoriu să apără înaintea marcajului <tBODY>.</tBODY> este un marcaj care conţine unul sau mai multe rânduri de celule. • <tBODY>. • <tfoot>.</td> <td>... Crt</th> <th>Nume Autor</th> <th>Denumire Lucrare</th> </tr> </tHEAD> <tBODY> <tr> <td>.</td> <td>..

1</s></td> <td><font color=blue>Celula 2. În HTML 4.1</s></td> <td><font color=blue>Celula 2. Are următoarele atribute: • align .în mod normal browser-ul va afişa titlul aliniat central şi deasupra/dedesubtul tabelului. 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 . Poate fi utilizat numai în cadrul unui marcaj <table>. Acesta are următoarea sintaxă: <caption [align=top|bottom|left|center|right] [valign=top|bottom]> .precizează poziţia titlului în raport cu tabelul (sus/jos).1</center></td> <td><i>Celula 1.0 atributul align a fost abandonat în favoarea formatării prin CSS (text-align şi vertical-align).2</font></td> </tr> </table> În cazul în care se doreşte ca tabelul din exemplul anterior să fie afişat cu chenar: <table border=1> <tr> <th>Col 1</th> <th><font color=red>Col 2</th> </tr> <tr> <td><center>Celula 1.<tr> <td><s>Celula 2. imediat după acesta.. </caption> Marcajul caption adaugă o scurtă descriere (titlu) a tabelului.. • valign .2</i></td> </tr> <tr> <td><s>Celula 2.2</font></td> </tr> </table> Un alt marcaj care poate apărea în cadrul unui tabel este <caption>.

Marcajul <th> defineşte o celulă din antetul tabelului. • valign ..sunt atribute utilizate pentru a create un efect 3D asupra chenarului de tabel. bordercolordark . </tr> Poate avea următoarele atribute: • align .2</font> </td> </tr> </table> Marcajul <tr> defineşte o linie intr-un tabel.specifică modul în care va fi aliniat pe verticală conţinutul liniei de tabel.specifică culoarea pentru fundalul liniei de tabel. Are următoarea sintaxă: <tr [align=left|center|right] [valign=top|middle|bottom|baseline] [bgcolor="#rrggbb"|culoare] [bordercolor="#rrggbb"|culoare] [bordercolorlight="#rrggbb"|culoare] [bordercolorlight="#rrggbb"|culoare]> .. • bgcolor .2</i> </td> </tr> <tr> <td> <s>Celula 2.. • bordercolorlight.<th> <font color=red>Coloana 2</font> </th> </tr> <tr> <td> <center>Celula 1.1</center> </td> <td> <i>Celula 1.specifică culoarea chenarului celulelor din linie de tabel.specifică modul în care va fi aliniat pe orizontală conţinutul liniei de tabel. • bordercolor .1</s> </td> <td> <font color=blue>Celula 2. 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"]> ..specifică numărul de coloane peste care se întinde celula curentă spre dreapta. bordercolorlight.împiedică "ruperea" textului din celulă pe mai multe linii.2</i></td> </tr> <tr> <td><s>Celula 2.au efecte similare celor menţionate mai sus. </th> Poate avea următoarele atribute: • align. valign . • nowrap . • bgcolor. bordercolor. • colspan . bordercolorlight . Are următoarea sintaxă: 45 . background.1</s></td> <td><font color=blue>Celula 2.. 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..</td> <td><i>Celula 1. • rowspan .specifică numărul de linii peste care se întinde celula curentă în jos. în celula.1</center>.indică alinierea orizontală şi verticală a conţinutului celule.2</td> </tr> </tBODY> </table> Marcajul <td> defineşte o celulă din tabel.

Ele extind o celula pe mai multe coloane.1</center></td> <td><i>Celula 1.2</i></td> </tr> <tr> <td ><s>Celula 2. </td> Atributele marcajului <td> au efecte similare cu cele prezentate mai sus.1</center></td> <td><i>Celula 1. respectiv linii ale tabelului. Ultimele atribute sunt colspan şi rowspan. în cazul marcajului <th>.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. 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..<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"]> .2</s></td> </tr> </table> 46 ..

valoarea text.butoanele submit şi reset. . Tag-ul <FORM> are două atribute foarte importante: action şi method. Atributul method.butoanele radio.tipul elementului.valoarea elementului. cu ajutorul tag-ului <input>.1. cu ajutorul acestei metode putând fi trimise cantităţi mici de date.1.1. 10. precizează metoda de trimitere a datelor şi poate avea două valori. valoarea atributului action poate fi o adresa URL a unui script. Formulare Formularele reprezintă o metodă de interactivitate cu utilizatorii paginilor web. trebuie să folosim pentru atributul type. Astfel. Elementele ale unui formular pot fi: . 47 . . .Capitolul 10.casetele de fişiere. utilizatorul apasă un buton de trimitere. sau poate fi o adresă de email. 10. caz în care datele introduse în formular vor fi trimise prin email la adresa respectivă. Atributele cele mai importante ale acestui tag sunt următoarele: . dacă este cazul. Câmpurile de editare Pentru a introduce în cadrul unui formular un câmp de editare. 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. care va interpreta datele şi le va introduce într-o bază de date. . Un formular este introdus în pagina web prin tag-urile <FORM> şi </FORM>. .casetele de validare. După ce formularul a fost completat. Între aceste tag-uri vor fi introduse toate elementele formularului.value .type .câmpurile de editare. al tag-ului <input>.name . scris într-un limbaj de programare. Elementele unui formular Elementele unui formular trebuie introduse. în majoritatea cazurilor. Cu ajutorul atributului action îi spunem browser-ului ce se va întâmpla cu datele introduse în formular.listele de selecţie. Prin intermediul unui formular se pot obţine date importante de la vizitatori. cea mai folosită metoda fiind post. Valoarea implicită a acestui atribut este get. . .numele elementului. aşa cum îi spune şi numele.

Pentru a folosi un astfel de câmp de editare. specifică numărul maxim de caractere care pot fi introduse în câmpul de editare. EXEMPLU: În ce categorie de vârstă vă încadraţi? sub 15 ani 15-20 ani 20-25 ani 25-35 ani 48 .1. • maxlength. • value. folosim tag-ul <input>. EXEMPLU: < textarea cols="50" rows ="5" name="exemplu"> </ textarea > Am folosit atributul cols pentru a stabili numărul de caractere al fiecărui rând. 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. valoarea iniţială a câmpului de editare. În acest caz. Pentru a introduce un buton radio.EXEMPLU: Atributele cele mai folosite pentru tagul <input> de tipul câmp de editare sunt: • size. Butoanele radio Daca avem o întrebare cu mai multe variante de răspuns. care reprezintă lăţimea câmpului de editare. nu vor fi vizibile.2. 10. valoarea "radio". iar atributul name pentru numele câmpului de editare. De exemplu. atributul type va avea valoarea "password". avem nevoie de tagurile <textarea> şi </textarea>. caracterele introduse în câmpul de editare. pentru câmpul de editare de mai sus s-a folosit următoarea linie de cod: <input name="exemplu" type="text" value="Camp de editare" size="20" maxlength ="30"> Dacă se doreşte introducerea unui câmp de editare de tip "parolă". atributul rows pentru numărul de rânduri al câmpului de editare. folosim câmpurile de editare de tip multilinie. iar la atributul type. vom folosi butoanele radio.

folosim pentru atributul type al tag-ului <input>. Casetele de fişiere Pentru a trimite un fişier prin intermediul unui formular.35-45 ani peste 45 ani Codul HTML al exemplului de mai sus este următorul: &#206n ce categorie de v&#226rst&#259 v&#259 &#238ncadra&#355. 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&#259 petreceţi 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. 49 . Nu pot fi selectate mai multe butoane radio dintr-un grup.3. Casetele de validare permit selectarea sau deselectarea uneia sau mai multor opţiuni. putem selecta un buton radio în mod prestabilit. fără alte valori.1. valoarea "file".1. Casetele de validare Pentru a introduce o casetă de validare (checkbox) se utilizează eticheta <input> cu atributul type având valoarea "checkbox".4.ar&#259<br> <input type="checkbox" name ="optiunea5">Acas&#259 10.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. în acelaşi timp. 10.

cu ajutorul atributului value. Putem modifica şi valoarea butonului. Codul HTML al exemplului de mai sus este următorul: <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 selecţie trebuie să folosim pentru tag-ul <select> atributul multiple. 50 . specifică numărul de elemente din cadrul listei de selecţie. • selected (fără alte valori).EXEMPLU: Codul HTML al exemplului de mai sus este următorul: <input type="file" name="file"> 10. atribuie listei de selecţie un nume. fie prin email.6. trebuie să folosim un buton de trimitere. permite utilizatorului să aleagă una sau mai multe opţiuni dintr-o listă. selectează în mod prestabilit un element al listei. sub forma de perechi "name = value". fără alte valori. fie către un script scris într-un limbaj de programare care va interpreta aceste date. Listele de selecţie pot fi introduse în cadrul unui formular cu ajutorul tag-urilor <select> şi </select>. • value. care în mod implicit este Submit.5. am folosit în dreptul acesteia atributul selected. Atributele cele mai folosite pentru tag-ul <select> sunt: • name. 10. atribuie o valoare de tip text care va fi expediată serverului. Pentru a introduce un asemenea buton folosim tag-ul <input>. cu atributul type având valoarea "submit". Butoanele de tip Submit şi Reset Pentru a putea expedia datele introduse în cadrul unui formular.1.1. Listele de selecţie O listă de selecţie. aşa cum îi spune şi numele. • size. EXEMPLU: Alege un judeţ din România: Pentru a selecta in mod implicit valoarea Bucureşti.

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>. indiferent de valorile introduse de utilizator. Pentru a introduce un buton de tip Reset.com" method="post"> 51 .Linia de cod pentru un buton de tip submit va fi următoarea: <input type="submit" value="Trimite"> Alături de butonul de tip Submit. se procedează la fel ca şi la butonul de tip Submit. valoarea mailto:email@domeniu. Prin apăsarea acestui buton toate elementele formularului vor reveni la valoarea lor prestabilită. EXEMPLU: Pentru a trimite datele dintr-un formular la adresa exemplu@yahoo. singura deosebire fiind că atributul type va avea valoarea "reset". putem folosi şi un buton de tip Reset. Linia de cod pentru un buton de tip reset va fi următoarea: <input type="reset" value="Sterge"> 10. datele introduse in formular vor fi trimise la adresa de e-mail specificată.com vom folosi următoarea linie de cod: <form action="mailto:exemplu@yahoo.2.ro. în felul acesta.

Proiectare situri Web: design şi funcţionalitate. Cum să creezi un site WEB. 2002. Bucuresti. 52 . Access. 1996 Mavrodin. Situri Web în HTML 4.Bibliografie selectivă Buraga. 2000. HTML. Editura Matrix Rom. Horaţiu. Iniţiere rapidă în: Windows. HTML. Phillips. Eugenia Lucia. Dave. Sabin. Editura Teora. Tim. Limbajul html şi elemente de web design. 2001. 2000 Drăghici. Stamate. 2003. Elizabeth. Mitchell. Editura Corint. 2006.. Darnel. Teora. Bucureşti. Bucuresti. PowerPoint. Margareta Dina. Editura Tehnică. Rick. Scott. Tehnologii Web. idem.. 1998. Crearea şi publicarea unui site web. Evans. Editura Sigma. Teora. 2003. Excel. Editura Paralela 45. Editura Teora. Bucureşti. Utilizare HTML 4. Castro. Totul despre HTML 4. Word. 2005 Taylor. Internet Explorer. Editura Teora. Html pentru world wide web. Lee Anne. Crearea paginilor WEB cu HTML 4. Editura Polirom. 2008.în lecţii de 10 minute.

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. H4. H3. 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 . H5.

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). in cazul in care. bottom (jos) text Text ce va fi afisat in locul imaginii. 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 .

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 . 1 Tipul numerotarii: A. a. a. i. I.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. i.

<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. Cod HTML Numar &nbsp. &#162. &cent. &#163. &pound. Caractere speciale Simbol ¢ £ &#160. 61 Nume .

&Icirc. &#188. &#179. &#194.© « ® ° ± ² ³ µ ¶ ¹ » ¼ ½ ¾ Â Î × Ø â î ÷ ø Ş ş Ţ ţ € &#169. &deg. &para. &#187. &oslash. &sup3. &laquo. &raquo. &Acirc. &#178. &divide. &#8364. &#206. &#185. &#176. &#190. &#171. &#247. &#238. &copy. &#351. &reg. Nume şi coduri de culori sigure Culoare Nume culoare AliceBlue AntiqueWhite Cod culoare #F0F8FF #FAEBD7 62 . &#226. &#177. &#354. &frac14. &#174. &#248. &plusmn. Anexa 4. &euro. &#189. &Oslash. &acirc. &#216. &icirc. &sup1. &micro. &#355. &#181. &sup2. &#182. &frac34. &frac12. &#350. &#215. &times.

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 .

Sign up to vote on this title
UsefulNot useful