Lucrare de Diploma - Pagini WEB in HTML

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 ..................................................................................................... 4
Capitolul 1. Introducere în limbajul HTML …………………………….. 6
1.1. Structura unui document HTML …………………………. 7
1.1.1. Secţiunea HEAD ……………………………………….. 8
1.1.2. Secţiunea BODY ……………………………………….. 9
Capitolul 2. Etichete (tag-uri) şi atribute HTML ………………………... 11
2.1. Etichete (tag-uri)...………………………………………... 11
2.2. Atribute …………………………………………………... 11
Capitolul 3. Formatarea textului ...……………………………………..... 13
3.1. Formatarea titlului ……………………………………….. 13
3.2. Formatarea textului ………………………………………. 13
3.3. Utilizarea caracterelor speciale …………………………... 16
Capitolul 4. Despre culori …………………………………………………. 18
4.1. Sistemul de definire a culorilor …………………………... 18
4.2. Corespondenţa dintre codurile hexazecimal şi zecimal ….. 19
4.3. Culoarea fundalului ………………………………………. 19
4.4. Culoarea textului …………………………………………. 20
4.5. Culoarea legăturilor ………………………………………. 20
4.6. Culori „sigure” …………………………………………… 21
Capitolul 5. Imagini şi elemente multimedia …………………………….. 22
5.1. Formatele fişierelor grafice ………………………………. 22
5.1.1. Formatul GIF ……………………………………............ 22
5.1.2. Formatul JPEG …………………………………............. 22
5.2. Inserarea unei imagini ……………………………………. 23
5.3. Dimensionarea imaginii ………………………………….. 23
5.4. Alinierea imaginii şi a textului …………………………… 24
5.5. Imagini folosite ca fond (background) al paginii ………… 25
5.6. Imaginile video …………………………………………... 25
5.7. Sunetele ………………………………………………....... 27
Capitolul 6. Cadre (frames) ……………………………………………….. 29
Capitolul 7. Legăturile (referinţele) ……………………………………… 33
7.1. Legătura către o altă pagină - Link-urile …………………. 33
7.2. Legătura către o secţiune de pagină – Ancorele …............. 34
7.3. Legătura către o adresă de e-mail …………………........... 34
7.4. Utilizarea unei imagini ca legătură …………………......... 35
7.5. Schimbarea culorilor legăturilor …………………………. 35
Capitolul 8. Liste …………………………………………………………... 36
8.1. Liste de tip definiţie ……………………………………… 36
8.2. Liste neordonate ……………………………………….…. 36
2
8.3. Liste ordonate …………………………………………….. 37
8.4. Personalizarea listelor ……………………………………. 38
Capitolul 9. Tabele ………………………………………………………… 39
Capitolul 10. Formulare ……………………………………………………. 46
10.1. Elementele unui formular ……………………………….. 46
10.1.1. Câmpurile de editare ………………………….............. 46
10.1.2. Butoanele radio ……………………………………….. 47
10.1.3. Casetele de validare …………………………………... 48
10.1.4. Casetele de fişiere …………………………….............. 48
10.1.5. Listele de selecţie ……………………………………... 49
10.1.6. Butoanele de tip Submit şi Reset ……………………… 49
10.2. Trimiterea datelor dintr-un formular prin e-mail ……….. 50
Bibliografie .....................................................................................................
51
selectivă
Anexe .................................................................................................... 52
3
Argument
Unul din primele elemente fundamentale ale WWW (World Wide Web) este
HTML (Hypertext Markup Language), care descrie formatul primar în care
documentele sunt distribuite şi văzute pe Web. Multe din trăsăturile lui, cum ar fi
independenţa faţă de platforma, structurarea formatării şi legăturile hipertext, fac
din el un foarte bun format pentru documentele Internet şi Web.
HTML este o abreviere de la Hypertext Markup Language şi reprezintă
scheletul oricărei pagini de Web. HTML nu este un limbaj de programare ci un
limbaj descriptiv, prin care sunt descrise elementele structurale ale paginii de Web:
titlurile, listele, tabelele, paragrafele, legăturile cu alte pagini, precum şi aspectul pe
care îl are pagina din punct de vedere grafic. În fond, HTML este modul în care îi
comunicăm browserului ce elemente dorim să introducem în pagina Web şi care
este aspectul acestora.
Structurată în 10 capitole cărora li se adaugă trei anexe şi bibliografia
aferentă, prezenta lucrare reprezintă o scurtă prezentare a limbajului HTML.
În primul capitol („Introducere în limbajul HTML”) este prezentată structura
unui document HTML precum şi cele două părţi componente ale fiecărui document
HTML: secţiunea HEAD şi BODY.
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.
În capitolul al treilea („Formatarea textului”) este prezentată modalitatea de
aranjare a conţinutului prezentat de fiecare pagină web.
Capitolul al patrulea („Despre culori”) prezintă în cele şase subcapitolele ale
sale informaţii despre sistemul de definire a culorilor, corespondenţa dintre codurile
hexazecimal şi zecimal, culoarea fundalului, culoarea textului, culoarea legăturilor
şi într-o secţiune aparte sunt prezentate aşa-numitele culori „sigure”.
Capitolul al cincilea, („Imagini şi elemente multimedia”) oferă informaţii
despre acele elemente, fotografii, imagini animate, sunete sau imagini video, care
conferă paginilor Web un aspect atractiv şi profesional. Cele şapte subcapitole
prezintă informaţii despre formatele fişierelor grafice (GIF şi JPEG), despre
modalitatea inserării unei imagini, dimensionarea acesteia, alinierea imaginii şi a
textului, despre imaginile folosite ca fond (background) al paginii, despre imaginile
video şi despre sunete.
Capitolul al şaselea („Cadre”) prezintă modalitatea de organizare a paginilor
web prin împărţirea ferestrei browserului în mai multe ferestre distincte.
Capitolul al şaptelea („Legăturile (referinţele)”) prezintă modalitatea de
navigare în cadrul site-urilor cu ajutorul link-urilor şi ale ancorelor.
Capitolul opt („Liste”) prezintă modalitatea de realizare a unei liste în cadrul
unei pagini web, tipurile de liste precum şi modalităţi de personalizare a listelor.
Următorul capitol („Tabele”) prezintă modalitatea de realizare a unui tabel.
4
Ultimul capitol („Formularele”) oferă informaţii despre metodele de
interactivitate cu utilizatorii paginilor web prin intermediul formularelor,
prezentând elementele componente ale unui formular (câmpurile de editare,
butoanele radio, casetele de validare, casetele de fişiere, listele de selecţie şi
butoanele de tip Submit şi Reset), precum şi modalitatea de trimitere a datelor
dintr-un formular prin e-mail.
Lucrarea se încheie cu trei anexe care conţin o listă a tag-urilor şi a
atributelor lor prezentate în ordine alfabetică, o listă a caracterelor speciale, precum
şi o listă cu numele şi codurile culorilor sigure.
5
6
Capitolul 1.
Introducere în limbajul HTML
HTML (HyperText Markup Language) a fost dezvoltat iniţial de Tim

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

<nume_marcaj1>
<nume_marcaj2>
...............
</nume_marcaj2>
7
</nume_marcaj1>
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 <HEAD> </HEAD>;
3. secţiunea BODY, delimitată de marcajele <BODY> </BODY> sau
<FRAMESET> </FRAMESET>
EXEMPLU:
<HTML>
<HEAD>
<TITLE>Prima mea pagina web</TITLE>
</HEAD>
<BODY>
text … text … text … text … text … text … text … text …
</BODY>
</HTML>
Un document HTML valid 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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

Strict DTD "http://www.w3.org/TR/HTML4/strict.dtd">
HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional DTD Transitional//EN" "http://www.w3.org/TR/HTML4/loose.dtd">
HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset DTD Frameset//EN" "http://www.w3.org/TR/HTML4/frameset.dtd">
1.1.1 Secţiunea HEAD
8
Cuprinde informaţii care nu vor fi afişate în browser, cu excepţia marcajului
<TITLE>
Marcajul <TITLE> este obligatoriu şi poate apare doar in secţiunea HEAD.
El va conţine un titlu relevant pentru pagină, fiind deosebit de important pentru
motoarele de căutare.
Alte marcaje care apar în secţiune HEAD:
 <META> - poate conţine cuvinte cheie, o descriere a paginii, numele
autorului paginii, frecvenţa (teoretică) cu care motoarele de căutare ar trebui să
reindexeze pagina, etc. Declaraţiile META implică în general declararea unei
proprietăţi şi a valorii asociate acelei proprietăţi.
<META name="nume" content="continut">
Declararea setului de caractere se face astfel:
<META http-equiv="Content-Type" content="text/HTML;
charset=set_caractere">
Precizarea setului de caractere face posibilă afişarea în browserul
utilizatorului a caracterelor specifice unor limbi precum româna, rusa, araba, etc.
 <STYLE>- cascading STYLE sheets - stiluri pentru formatarea
textului din documentul HTML.
<STYLE type="text/css">...</STYLE>
 <SCRIPT> - scripturi JavaScript sau VBScript
<SCRIPT language="JavaScript1.2" type="text/javascript"
src="lib.js"></SCRIPT>
 <BASE> - stabileste URL-ul de "baza" al documentului. Toate
referintele (<a href=""></a>, respectiv <img src="">) din documentul respectiv
vor fi deschise relativ la marcajul <base>.
<HEAD>
<BASE href="http://www.xprim.ro/index.php" target="_top">
</HEAD>
 <LINK> - stabileşte o legătură cu un document extern, spre exemplu
un fişier de definiţii CSS.
<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>
charset=windows-1250">
<META name="author" content="Marinescu Ion">
<META name="copyright" content="© 2009 Marinescu Ion">
<META name="keywords" content="curs, HTML, tutorial">
</HEAD>
9
1.1.2 Secţiunea BODY
Este inclusă între marcajele <BODY>...... </BODY>
<BODY [ BACKGROUND="adresa_imagine"] [
BGCOLOR="#rrggbb"|"culoare"] [ TEXT="#rrggbb"|"culoare"] [
LINK="#rrggbb"|"culoare"] [ VLINK="#rrggbb"|"culoare"] [
ALINK="#rrggbb"|"culoare"] [ LEFTMARGIN=marg_st] [
TOPMARGIN=marg_top]>
................
continut document
.................
</BODY>
Marcajul de sfârşit (</BODY>) nu este obligatoriu.
În secţiunea BODY se găseşte informaţia care va fi afişată în browser (text,
imagini, etc.) (<BODY>.... </BODY>).
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 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/HTML4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Titlul paginii mele</TITLE>
charset=windows-1250">
<META name="author" content="Marinescu Ion">
<META name="copyright" content="© 2009 Marinescu Ion">
<META name="keywords" content="curs, HTML, tutorial">
</HEAD>
<BODY bgcolor="#999999" leftmargin=0 topmargin=0>

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

<DIV [ ALIGN="left|center|right"] STYLE="..">
.................................
</DIV>
11
Capitolul 2.
Etichete (tag-uri) şi atribute HTML
2.1. Etichete (tag-uri)

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

EXEMPLU:
Acest exemplu aplică fundalului o culoare portocalie.
<BODY bgcolor = "orange">
Text Text Text
12
</BODY>
Pentru o mai bună diferenţiere şi evidenţiere etichetele (tag-urile) HTML

sunt scrise cu majuscule iar atributele asociate acestora sunt scrise cu litere mici.
Valorile atributelor trebuie să fie întotdeauna încadrate în ghilimele.
HTML nu este un limbaj case-sensitive, adică nu face distincţia între literele

mici şi cele mari (majuscule). Aceasta înseamnă că indiferent cum scriem
etichetele, cu litere mari sau cu litere mici, ele vor fi corect interpretate de browser.
Daca sintaxa nu este respectată, browserul ignoră pur şi simplu tagul, la fel
dacă valoarea unui atribut nu este una validă, ea va fi de asemenea ignorată.
13
Capitolul 3.
Formatarea textului
3.1. Formatarea titlului

Atunci când avem nevoie să folosim un titlu în cadrul paginii noastre web
putem apela la tag-urile <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Cu ajutorul
acestor tag-uri, care au şi tag-uri de încheiere, vom scrie titlurile din cadrul
paginilor noastre web. Astfel în cadrul codului HTML vom folosi tag-ul <H1>, de
exemplu, urmat de textul titlului, iar la sfârşit vom folosi tag-ul de încheiere </H1>.
Tag-urile <H1> şi </H1> permit scrierea unui titlu cu caracterele cele mai mari în
timp ce textul încadrat de tag-urile <H6> şi </H6> va fi afişat cu caracterele cele
mai mici, după cum urmează:
Acesta este un titlu cu <H1>
Tag-urile acestea accepta atributul ALIGN cu ajutorul căruia titlul va putea

fi aliniat la stânga, la centru sau la dreapta.
3.2. Formatarea textului

Pentru alegerea caracteristicilor unui text, putem folosi tag-ul <FONT>.
Acest tag acceptă mai multe atribute (color, face, size) care ne vor ajuta în
formatarea textelor. Atributul COLOR se referă la culoarea textului ce va fi
încadrat de tag-urile <FONT> şi </FONT>, atributul FACE arată tipul fontului,
iar atributul SIZE arată mărimea fontului.
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>
<FONT COLOR=”#FF0000”>Proiect diploma</FONT>
La tipul fontului, la fel ca şi la culori, este bine să se folosească un font care

se află pe majoritatea calculatoarelor, pentru ca dacă se foloseşte un font mai puţin
utilizat, mulţi utilizatori nu vor putea vedea textele din cadrul paginilor prezentate
cu acelaşi font. Cele mai folosite fonturi pentru paginile web sunt următoarele:
Acest text a fost scris cu fontul "arial"

14
Acest text a fost scris cu fontul "times new roman"
Acest text a fost scris cu fontul "courier new"
Acest text a fost scris cu fontul "verdana"
<FONT COLOR=”#000000” FACE=”Arial”>Acest text ...</FONT>
Pentru a schimba dimensiunea implicită a fontului, vom folosi una din

valorile atributului size. Acesta poate lua una din valorile 1,2,3,4,5,6,7 (1 pentru
cea mai mică dimensiune şi 7 pentru cea mai mare):
<FONT COLOR=”#FFA500” FACE=”Arial” SIZE=”7”>Proiect
diploma</FONT>
size 7: Proiect diploma

Dacă vrem ca textul nostru să fie scris cu caractere îngroşate, folosim

perechea de etichete <B> şi </B>.
<B>Text bold</B>
Text bold
Pentru ca textul să fie scris cu caractere italice, folosim perechea de etichete

<I> şi </I>.
<I>Text italic</I>
Text italic
Pentru ca textul să fie subliniat, folosim perechea de etichete <U> şi </U>.

<U>Text subliniat</U>
Text subliniat
Dacă vrem ca textul să fie afişat în centrul paginii putem folosi perechea de
etichete <CENTER> şi </CENTER>.
<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>. Tag-ul <BR> nu are
tag de încheiere, în timp ce tag-ul <P> are tag de încheiere, însă nu este obligatoriu.
15
Tag-ul <BR> vine de la line break (întrerupere de linie) şi este folosit pentru
a face trecerea de la o linie la alta.
EXEMPLU:
Avem următorul cod HTML:
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML.
</BODY>
</HTML>
Acest cod va avea ca rezultat:

Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML.
EXEMPLU:
Utilizarea etichetei <BR> in cadrul codului:
<HTML>
<HEAD>
</HEAD>
<BODY>
Invat limbajul HTML.<BR>Exersez limbajul HTML.<BR>Stiu limbajul
HTML.
</BODY>
</HTML>

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, <BR> şi <P>, pentru a se vedea diferenţa dintre ele.
<HTML>
<HEAD>
</HEAD>
<BODY>
16
Invat limbajul HTML.<BR>Exersez limbajul HTML.<P>Stiu limbajul
HTML.
</BODY>
</HTML>

Stiu limbajul HTML.
Dacă scriem un text între tag-urile <P> şi </P>, atunci textul va fi încadrat
de câte un rând liber, la fel ca în exemplul de mai jos:
<HTML>
<HEAD>
</HEAD>
<BODY>
Invat limbajul HTML.<P>Exersez limbajul HTML.</P>Stiu limbajul
HTML.
</BODY>
</HTML>
Vom obţine următorul rezultat:
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
<HTML>
<HEAD>
<TITLE>Prima mea pagina web</TITLE>
</HEAD>
<BODY>
Bine ai venit!<BR>
Vom &#238nv&#259ţa &#238mpreun&#259 limbajul HTML.
Aceasta este prima mea pagin&#259 web!
</BODY>
</HTML>
18
Capitolul 4.
Despre culori
Culoarea reprezintă un caracteristică extrem de importantă a unei pagini

Web. Utilizată cu grijă şi 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ă, standardul HTML 3.2 stabileşte un set de 16 culori standard.
În acest caz, pentru valoarea atributului de culoare se utilizează direct
numele culorii, ca în exemplul de mai jos, în care se setează culoarea magenta
pentru linkurile vizitate:
<BODY vlink="magenta">
Numele şi codul culorilor stabilite în standardul HTML3.2 sunt următoarele:
Nume Cod Nume Cod

culoare hexazecimal culoare 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). Ele sunt numerotate de la 1 la 100, "gray 1" fiind nuanţa cea mai
închisă, iar "gray 100" cea 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 <BODY>, 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. Iată un exemplu de pagină cu fundal verde:
EXEMPLU:
<HTML>
<HEAD>
<TITLE>culori1</TITLE>
</HEAD>
<BODY bgcolor="#00FF00">
<h1 align="center">Pagina cu fundal verde</h1><hr>
</BODY>
20
</HTML>
4.4. Culoarea textului

Pentru a seta culoarea textului din întreaga pagină se foloseşte atributul text
al etichetei <BODY>, conform sintaxei:
<BODY text="#RGB sau nume_culoare">
Dacă am stabilit o culoare pentru textul din pagină şi dorim să utilizăm o altă
culoare pentru o anumită secţiune a textului (culoarea unui bloc de text), vom folosi
eticheta <font>. Aceasta este o etichetă container care cuprinde între etichetele de
început şi de final textul a cărui culoare dorim să o modificăm. 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.
EXEMPLU:
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#0000FF">
<h1 align="center">Text albastru si rosu</h1>
<hr>
Textul din aceasta pagina este albastru cu mici
<FONT color="#FF0000"> exceptii</FONT>
</BODY>
</HTML>
4.5. Culoarea legăturilor

În general legăturile (links) dintr-o pagină Web au culori prestabilite
(default), astfel:
blue (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 <BODY>:
- link pentru legături
- alink pentru legăturile active
- vlink pentru legăturile vizitate
conform sintaxei:
<BODY link="#RGB sau nume_culoare"
21
alink="#RGB sau nume_culoare" vlink="#RGB sau nume_culoare">
Documentul din EXEMPLU creează o pagină în care textul este negru iar
legăturile au culoarea verde, legăturile active culoarea albastru şi cele vizitate,
culoarea roşu. În EXEMPLU este folosită eticheta <a> cu atributul href.
EXEMPLU:
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000" link="#00FF00"
alink="#0000FF" vlink="#FF0000">
<h1 align="center">Legaturi colorate</h1>
<hr>
<a href="culori1.HTML">Legatura catre primul exemplu</a>
</BODY>
</HTML>
4.6. Culori "sigure"

Nu toate monitoarele pot reproduce cele 16.777.000 de culori furnizate de
codul RGB. Cele realizate cu tehnologii mai vechi, sau cele moderne setate pentru
numai 256 de culori pot reproduce corect doar un set limitat de 256 de culori, aşa-
numită 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
originale, astfel că după decomprimare imaginea are acelaşi aspect ca şi originalul,
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 fişier GIF care are 200 de Kb să fie comprimat ca fişier JPEG până
la dimensiunea de 30 de Kb.
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 originală,
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 <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
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:
<IMG dynsrc="URL_fisier_video">
Acest atribut este o extensie Internet Explorer şi nu este recunoscut de
browserele Netscape. Pentru a vizualiza o imagine video in-line într-un browser
Netscape, vizitatorul paginii trebuie să instaleze un program auxiliar de tip plug-in.
Dacă programul plug-in nu este disponibil pe computerul vizitatorului, imaginea
video nu va putea fi 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:
<IMG dynsrc="../Video/introducere.avi">
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:
<IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif">
Î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 clipului efectuând click dreapta cu mouse-ul în interiorul ferestrei.
Pentru a adăuga butoane de control acestei ferestre se utilizează atributul controls
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:
<IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif" controls>
Clipul video inclus în pagină este redat de browser o singură dată, de la
început 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:
<IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif" controls
loop="infinite">
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:
<IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif" controls
loop="infinite" start="fileopen, mouseover">
Imaginile video in-line pot fi tratate ca şi imaginile statice. O astfel de
imagine poate fi aliniată folosind atributul align, sau poate fi spaţiată faţă de textul
care o înconjoară.
EXEMPLU:
<HTML>
<HEAD>
<TITLE>Imagini video</TITLE>
</HEAD>
<BODY>
<H1 align="center">Imagini video</H1><HR>
<FONT size="4" color="blue">Clipul video de mai jos face parte din filmul
„Dacii”</FONT><P>
<CENTER>
<IMG dynsrc="../Video/dacii.avi" src="../Imagini/dac.gif" controls
start="fileopen, mouseover" loop="infinite">
</CENTER>
</BODY>
</HTML>
5.7. Sunetele
28
Eticheta <BGSOUND> realizează includerea în pagina Web a unei muzici
de fundal. Această etichetă este, de asemenea, o extensie Internet Explorer deci nu
este recunoscută şi executată în alte browsere.
Sintaxa etichetei <BGSOUND> este 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.
Î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 <BGSOUND>.
EXEMPLU:
<HTML>
<HEAD>
<TITLE>Muzica de fundal</TITLE>
</HEAD>
<BODY>
<H1 align="center">Muzica de fundal</H1><HR>
<P>
<FONT size="4" color="red">Muzica se va auzi pana cand veti inchide
pagina</FONT>
<BGSOUND src="../Sunet/sound loop="infinite">
</BODY>
</HTML>
29
Capitolul 6.
Cadre (frames)
O modalitate de structurare avansată a unui document HTML este î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 <frameset> şi </frameset>.
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 <frame> şi </frame>.
EXEMPLU:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/HTML4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un document cu cadre</TITLE>
</HEAD>
<frameset cols="30%, 70%">
<frameset rows="200, 200">
<frame src="continut_cadru1.HTML">
</frameset>
<noframes>
<p>Acest document contine:
<ul>
<li><a href="continut_cadru1.HTML">continut</a>
30
<li><img src="continut_cadru2.HTML" alt="imagine">
</ul>
</noframes>
</frameset>
</HTML>
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.
<frameset [border=n] [bordercolor=#rrggbb]

[cols=x,y,..] [rows=x,y,..]
...
</frameset>
Marcajul <frameset> 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 <frameset>. 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 <frameset>. 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
Cadrele propriu-zise sunt introduse prin marcajul <frame>.
<frame [frameborder=yes|no] [longdesc=URL]

[src=URL] [name=identificator] [noresize]
[scrolling = auto|yes|no] [marginwidth=x]
[marginheight=y]
...
</frame>
Marcajul <frame> are următoarele atribute:

 frameborder - specifică dacă un cadru va afişa sau nu chenar. În
cazul în care un cadru are setat frameborder=no, iar cadrele adiacente au
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 <frame>. Linkul poate fi o cale absolută
(http://www.domeniu.ro/pagina.HTML) sau relativă (pagina.HTML).
 name - atribuie un nume cadrului curent. Acest nume poate fi folosit
în combinaţie cu marcajul a (<a href="pagina.HTML"
target="RightFrame">...</a>) 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 <frameset> cu două coloane:
EXEMPLU:
<HTML>
<HEAD>
</HEAD>
<frameset cols="30%, 70%">
<noframes>
<ul>
</ul>
</noframes>
32
</frameset>
</HTML>
Marcajul <noframes> 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:
EXEMPLU:
<HTML>
<HEAD>
</HEAD>
<frameset rows="30%, 70%">
<noframes>
<ul>
</ul>
</noframes>
</frameset>
</HTML>
Exemplul de mai jos defineşte un <frameset> cu două cadre orizontale,

primul cadru având alocat 25% din spaţiul disponibil pe verticală, iar cel de al
doilea cadru 75%:
EXEMPLU:
<HTML>
<HEAD>
</HEAD>
<frameset rows="*,3*">
<frame name="navigare" src="navigare.HTML">
<frame name="continut" src="continut.HTML">
<noframes>
text... text... text... text... text... text... text...
33
</noframes>
</frameset>
</HTML>
Capitolul 7.
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>, 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:
<a>Aici</a> ar trebui sa fie un link !
Pentru a activa linkul de mai sus vom adauga atributul href.
Exemplul următor arată formatarea documentului:

<a href="pagina.HTML">Aici</a> este un link !
Referinţele pot fi absolute (ex. <a

href="http://www.domeniu.ro/pagina.HTML">http://www.domeniu.ro/pagina.HT
ML<a>) sau relative (ex. <a href="pagina.HTML">pagina.HTML<a>).
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:
<a href="../director2/pagina.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.HTML">Un link oarecare</a>
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:
<a name="nume_ancora">...</a>
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:
<a name="xxx">...</a>
<a name="XXX">...</a>
Î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: <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.htm#nume_ancora">Link catre ancora
externa</a>
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:
<A href="mailto:adresa de e-mail">Trimite e-mail</A>
7.4. Utilizarea unei imagini ca legătură

Pentru a folosi o imagine ca legatură între tag-urile <a> şi </a>, va trebui
scrisă adresa imaginii:
<A href=numepagina.HTML><img src="adresaimaginii"</A>
7.5. Schimbarea culorilor 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 tag-
ului </BODY> 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:
<BODY link=”#FF0000” vlink=”#000000” alink=”FF9600”>
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:
 <dl>...</dl> - lista definiţii (definition list);
 <dt> - termenul definit (definition term);
 <dd> - definiţie (definition).
EXEMPLU:
<HTML>
<HEAD>
<TITLE>Lista de tip definitie</TITLE>
</HEAD>
<BODY>
<dl>
<dt>Applet Java
<dd>Aplicatie Java inclusa intr-un document HTML
<dt>Cookie
<dd>Mecanism de comunicare intre client si server
<dt>Domeniu
<dd>Nume unic prin care se identifica un site pe Internet
</dl>
</BODY>
</HTML>
8.2. Liste neordonate

Sunt introduse de marcajele:
 <ul>...</ul> - lista neordonată (unordered list);
37
 <li> - element listă.
EXEMPLU:
<HTML>
<HEAD>
<TITLE>Lista neordonata</TITLE>
</HEAD>
<BODY>
<p>In HTML sunt disponibile 3 tipuri de liste:</p>
<ul type="square">
<li>liste de tip definitie
<li>liste neordonate
<li>liste ordonate
</ul>
</BODY>
</HTML>
Atributului type precizează tipul maracatorului. Putem schimba cercul plin

din 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:
 <ol>...</ol> - lista ordonată (ordered list);
 <li> - element listă.
EXEMPLU:
<HTML>
<HEAD>
<TITLE>Lista ordonata</TITLE>
</HEAD>
<BODY>
<p>In HTML sunt disponibile 3 tipuri de liste:
<ol start="2">
<li>liste de tip definitie
<li>liste neordonate
<li>liste ordonate
</ol>
</BODY>
</HTML>
Ca şi în cazul listelor neordonate, şi la listele ordonate, atributul type are o

valoare implicită: numerele. În loc de numere putem folosi şi alte caractere. Pentru
38
a folosi aceste caractere este de ajuns să utilizam atributul type cu valoarea
potrivita.
EXEMPLU:
- pentru litere mari: <ol type=A>;
- pentru litere mici: <ol type=a>;
- pentru cifre romane mici: <ol type=i>;
- pentru cifre romane mari: <ol type=I> .
Pe lânga atributul type, pentru tag-ul <ol> 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:
<ol type=A start=4>
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 <li> cu care introducem
fiecare element al listei vom adăuga imaginea dorită cu ajutorul tag-ului <img>.
EXEMPLU :
Fiecare element al listei este introdus cu ajutorul unei imagini salvate sub
denumirea de desen în folderul Poze.
<HTML>
<HEAD>
<TITLE>Lista personal</TITLE>
</HEAD>
<BODY>
<ul>Lista persoane departament Secretariat:
<br><br><img src="../Poze/desen.gif">Popescu Maria
<br><br><img src ="../Poze/desen.gif">Ionescu Eugenia
<br><br><img src ="../Poze/desen.gif">Ion Marian
</ul>
</BODY>
</htm>
39
Capitolul 9.
Tabele
Prezentarea datelor sub formă de tabele prezintă avantaje din punct de vedere
al 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 </table>. Prin intermediul acestei perechi de marcaje se definesc atribute
valabile pentru întregul tabel. Majoritatea acestor atribute pot fi însă redefinite
pentru anumite celule ale tabelului.
<table [border=n]
[frame=above|below|border|box|hsides|vsides|lhs|rhs|void]
[rules=none|groups|rows|cols|all] [width=abs|rel]
[height=abs|rel] [bgcolor="#rrggbb"] [bordercolor="#rrggbb"]
[bordercolorlight="#rrggbb"] [bordercolordark="#rrggbb"]
[background="URL-imagine"] [cellspacing=n] [cellpadding=n]
[align=left|center|right] [valign=top|middle|bottom]
[summary="sumar"]>
...
</table>
Semnificaţiile atributelor marcajului <table> 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 above - afişează latura superioară a chenarului;
o below - afişează latura inferioară a chenarului;
o border - afişează chenarul complet;
o box - afişează chenarul complet (la fel ca şi border);
o hsides - afişează părţile inferioară, respectiv superioară ale chenarului;
o vsides - afişează părţile laterale (stânga, dreapta) ale chenarului;
o lhs - afişează latura stângă a chenarului;
o rhs - afişează latura dreaptă a chenarului;
o 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 non-
vizuale.
Cea mai simplă formă a unui tabel se prezintă astfel:

<table>
<tr>
<td>....</td>
<td>....</td>
</tr>
<tr>
<td>....</td>
<td>....</td>
</tr>
</table>
O formă mai complexă a unui tabel este:

<table>
41
<tHEAD>
<tr>
<th>Nr. Crt</th>
<th>Nume Autor</th>
<th>Denumire Lucrare</th>
</tr>
</tHEAD>
<tBODY>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tBODY>
</table>
Semnificaţiile atributelor marcajului <table> sunt:

 <tHEAD>...</tHEAD> 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.
 <tBODY>...</tBODY> 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).
 <tfoot>...</tfoot> 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 <tBODY>.
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.2</i></td>
</tr>
42
<tr>
<td><s>Celula 2.1</s></td>
<td><font color=blue>Celula 2.2</font></td>
</tr>
</table>
În cazul în care se 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>
</tr>
<tr>
<td><font color=blue>Celula 2.2</font></td>
</tr>
</table>
Un alt marcaj care poate apărea în cadrul unui tabel este <caption>. Acesta
are următoarea sintaxă:
<caption [align=top|bottom|left|center|right] [valign=top|bottom]>
...
</caption>
Marcajul caption adaugă o scurtă descriere (titlu) a tabelului. Poate fi utilizat

numai în cadrul unui marcaj <table>, imediat după acesta.
Are următoarele atribute:
 align - în mod normal browser-ul va afişa titlul aliniat central şi
deasupra/dedesubtul tabelului. În HTML 4.0 atributul align a fost abandonat în
favoarea formatării prin CSS (text-align şi vertical-align).
 valign - precizează poziţia titlului în raport cu tabelul (sus/jos).
EXEMPLU:
<table border=1 cellspacing=0 cellpadding=1 width="100%"
align="left">
<caption valign=top>Exemplu utilizare caption </caption>
<tr>
<th>
<font color=black>Col 1</font>
</th>
43
<th>
<font color=red>Coloana 2</font>
</th>
</tr>
<tr>
<td>
<center>Celula 1.1</center>
</td>
<td>
<i>Celula 1.2</i>
</td>
</tr>
<tr>
<td>
<s>Celula 2.1</s>
</td>
<td>
<font color=blue>Celula 2.2</font>
</td>
</tr>
</table>
Marcajul <tr> defineşte o linie intr-un 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]>
....
</tr>
Poate avea următoarele atribute:

 align - specifică 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 <th> defineşte o celulă din antetul tabelului. Sintaxa este:
<th [align=left|center|right] [valign=top|middle|bottom|baseline]

44
[background="url-imagine"] [colspan=n] [rowspan=m]
[bordercolorlight="#rrggbb"|culoare]
[bordercolordark="#rrggbb"|culoare] [nowrap] [abbr="text"]>
....
</th>
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:
align="left">
<caption valign=top>Exemplu tabel </caption>
<tHEAD>
<tr>
<th>
<font color=black>Col 1</font>
</th>
<th>
<font color=red>Coloana 2
</th>
</tr>
</tHEAD>
<tBODY>
<tr>
<td><center>Celula 1.1</center>;</td>
</tr>
<tr>
<td><font color=blue>Celula 2.2</td>
</tr>
</tBODY>
</table>
Marcajul <td> defineşte o celulă din tabel. Are următoarea sintaxă:

45
<td [align=left|center|right] [valign=top|middle|bottom|baseline]
[background="url-imagine"] [colspan=n] [rowspan=n]
[bordercolorlight="#rrggbb"|culoare] [bordercolordark="#rrggbb"|culoare]
[nowrap] [abbr="text"]>
...
</td>
Atributele marcajului <td> au efecte similare cu cele prezentate mai sus, în

cazul marcajului <th>.
Ultimele atribute sunt colspan şi rowspan. Ele extind o celula pe mai multe
coloane, respectiv linii ale tabelului.
EXEMPLU:
Exemplu utilizare colspan:
align="left">
<tr>
</tr>
<tr>
<td colspan="2"><s>Celula 2.1</s></td>
</tr>
</table>
Exemplu utilizare rowspan:

align="left">
<tr>
<td rowspan="2"><center>Celula 1.1</center></td>
</tr>
<tr>
<td ><s>Celula 2.2</s></td>
</tr>
</table>
46
Capitolul 10.
Formulare
Formularele reprezintă o metodă de interactivitate cu utilizatorii paginilor

web. Prin intermediul unui formular se pot 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 <FORM> şi
</FORM>. Între aceste tag-uri vor fi introduse toate elementele formularului.
Tag-ul <FORM> are două atribute foarte importante: action şi method.
Cu ajutorul atributului action îi spunem browser-ului ce se va î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 <input>. 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

Pentru a introduce în cadrul unui formular un câmp de editare, trebuie să
folosim pentru atributul type, al tag-ului <input>, valoarea text.
47
EXEMPLU:
Camp de editare
Atributele cele mai folosite pentru tagul <input> 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:
<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

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 tag-
urile <textarea> şi </textarea>.
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, 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:
&#206n ce categorie de v&#226rst&#259 v&#259 &#238ncadraţ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, 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
<input> 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ă

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 ţar&#259<br>
<input type="checkbox" name ="optiunea5">Acas&#259
10.1.4. Casetele de fişiere

Pentru a trimite un fişier prin intermediul unui formular, folosim pentru
atributul type al tag-ului <input>, valoarea "file".
49
EXEMPLU:

<input type="file" name="file">
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ţiuni dintr-o listă. Listele de selecţie pot fi introduse în
cadrul unui formular cu ajutorul tag-urilor <select> şi </select>.
Atributele cele mai folosite pentru tag-ul <select> sunt:

• name, atribuie listei de 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.
<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, 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 e-
mail, 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 <input>, 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:
<input type="submit" value="Trimite">
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:
<input type="reset" value="Sterge">
10.2. Trimiterea datelor dintr-un formular prin e-mail

Pentru ca datele introduse într-un formular să fie trimise prin e-mail trebuie
să folosim pentru atributul action al tag-ului <form>, valoarea
mailto:email@domeniu.ro, în felul acesta, datele introduse in formular vor fi
trimise la adresa de e-mail specificată.
EXEMPLU:
Pentru a trimite datele dintr-un formular la adresa exemplu@yahoo.com vom
folosi următoarea linie de cod:
<form action="mailto:exemplu@yahoo.com" method="post">
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 Valoare
Nume tag Detalii
atribut atribut
<A> Ancora
href URL Adresa catre care vrem sa fie legatura
target _blank Fereastra in care se va face afisarea
_self
_parent
_top
<B> Text bold
<BODY> Cuprinsul documentului
background adresa Imaginea de fond
imaginii
bgcolor cod culoare Culoarea fondului
nume culoare
leftmargin procent din Distanta dintre marginea din stanga a
latimea ferestrei browserului si marginea din
paginii stanga a paginii
numar de
pixeli
topmargin procent din Distanta dintre marginea de sus a
inaltimea ferestrei browserului si marginea de
paginii sus a paginii
numar de
pixeli
text cod culoare Culoarea textului
nume culoare
alink cod culoare Culoarea legaturilor active (atunci
nume culoare cand mouse-ul se afla deasupra lor)
link cod culoare Culoarea legaturilor nevizitate (nu s-a
nume culoare efectuat nici un click pe ele)
vlink cod culoare Culoarea legaturilor vizitate
54
nume culoare (s-a efectuat cel putin un click pe ele)
<BR> Sfarsitul randului
<CENTER> Afisarea in centrul paginii
<FONT> Fontul textului
color cod culoare Culoarea fontului
nume culoare
face nume font Tipul fontului
size un numar Marimea fontului
de la 1 la 7
<FORM> Formular interactiv
action URL Adresa scriptului care prelucreaza
datele din cadrul formularului
method GET Metoda de prelucrare a datelor
POST formularului
<FRAME> 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
pixeli cadru
src URL Sursa cadrului
<FRAMESET> Multime de ferestre
cols procent din numarul si marimea relativa a
latimea coloanelor
paginii
numar de
pixeli
rows procent din numarul si marimea relativa a
inaltimea randurilor
paginii
numar de
pixeli
H1, H2, H3, Titluri in cadrul documentului
H4, H5, H6
align left Alinierea titlului
center
right
justify
55
<HEAD> Antetul documentului
<HR> Linie orizontala
align left Alinierea orizontala a liniei
center
right
color cod culoare Culoarea liniei
nume culoare
size numar de Inaltimea liniei
pixeli
width procent din Latimea liniei
latimea
paginii
numar de
pixeli
<HTML> Document HTML
<I> Text italic
<IMG> Adaugarea unei imagini
align left Alinierea imaginii in pagina: left
right (stanga) sau right (dreapta)
top Alinierea elementelor din jurul
middle imaginii: top (sus), middle (mijloc),
bottom bottom (jos)
alt text Text ce va fi afisat in locul imaginii, in
cazul in care, aceasta nu este afisata

border numar de Marimea chenarului din jurul imaginii
pixeli
height procent Inaltimea imaginii
numar de
pixeli
hspace numar de Spatiu pe orizontala in jurul imaginii
pixeli
src URL Adresa imaginii
vspace numar de Spatiu pe verticala in jurul imaginii
pixeli
width procent Latimea imaginii
numar de
pixeli
56
<INPUT> Element al formularului
maxlength numar Numar maxim de caractere
name date de tip Numele elementului formularului
caracter
size numar Marimea elementului formularului
src URL Adresa pentru o imagine
type text Tip input
password
checkbox
radio
submit
reset
file
hidden
image
button
value date de tip Valoare input
caracter
<LI> Element al unei liste
<META> Metainformatii
content text Descrie valoarea atributului name
name author Autor
description Descriere
keywords Cuvinte cheie
<OL> Lista ordonata
start numar Cu ce valoare incepe numerotarea
type A, a, I, i, 1 Tipul numerotarii: A, a, I, i, 1
(implicit)
<P> Paragraf
align left Alinierea paragrafului
center
right
justify
<SELECT> Lista de selectii
multiple Permite selectia mai multor elemente
name date de tip Numele listei de selectii
caracter
57
size numar Numarul de elemente ale listei
<STRONG> Text evidentiat
<SUB> Text indice
<SUP> Text exponent
<TABLE> Tabel
align left Alinierea tabelului
center
right
background URL Imaginea de fond pentru tabel
bgcolor cod culoare Culoarea fondului pentru tabel
nume culoare
border procent Chenarul tabelului
numar de
pixeli
bordercolor cod culoare Culoarea chenarului
nume culoare
cellpadding numar de Spatiu intre continutul celulelor
pixeli tabelului si
marginile lor
cellspacing numar de Spatiu intre celulele tabelului
pixeli
cols numar Numarul de coloane ale unui tabel
hspace numar de Spatiu pe orizontala in jurul tabelului
pixeli
vspace numar de Spatiu pe verticala in jurul tabelului
pixeli
width procent Latimea tabelului
numar de
pixeli
<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 culoare
colspan numar Numarul de coloane pe care se intinde
celula
58
height numar de Inaltimea celulei
pixeli
rowspan numar Numarul de linii pe care se intinde
celula
valign top Alinierea continutului celulei pe
middle verticala
bottom
width numar de Latimea celulei
pixeli
<TEXTAREA> Camp de editare multilinie
cols numar Numarul de coloane
name date de tip Numele campului de editare multilinie
caracter
rows numar Numarul de randuri
<TITLE> Titlu document
<TR> Rand tabel
align left Alinierea continutului celulelor
center pe orizontala
right
bgcolor cod culoare Culoarea fondului pentru tot randul
nume culoare
valign top Alinierea continutului celulelor pe
middle verticala
bottom
<U> Text subliniat
<UL> Lista neordonata
type circle Forma marcajului
disc
square
59
Anexa 3.
Caractere speciale
Cod HTML
Simbol
Numar Nume

¢ ¢ ¢
£ £ £
© © ©
« « «
® ® ®
° ° °
± ± ±
² ² ²
60
³ ³ ³
µ µ µ
¶ ¶ ¶
¹ ¹ ¹
» » »
¼ ¼ ¼
½ ½ ½
¾ ¾ ¾
Â Â Â
Î Î Î
× × ×
Ø Ø Ø
â â â
î î î
÷ ÷ ÷
ø ø ø
Ş Ş
ş ş
Ţ Ţ
ţ ţ
€ € €
Anexa 4.
Nume şi coduri de culori sigure
Culoare Nume culoare Cod culoare

AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
61
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
Darkorange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DodgerBlue #1E90FF
Feldspar #D19275
FireBrick #B22222
62
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateBlue #8470FF
LightSlateGray #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
63
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370D8
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #D87093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
64
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
VioletRed #D02090
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32
65

Lucrare de Diploma - Pagini WEB in HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lucrare de Diploma - Pagini WEB in HTML

Uploaded by

Copyright:

Available Formats

GRUPUL ŞCOLAR DE ARTE ŞI MESERII AL

COOPERAŢIEI MEŞTEŞUGĂREŞTI „SPIRU HARET”,

Pagini WEB în HTML

HTML (HyperText Markup Language) a fost dezvoltat iniţial de Tim

Marcajele perechi pot fi imbricate:

1.1. Structura unui document HTML

HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

1.1.1 Secţiunea HEAD

2.1. Etichete (tag-uri)

Pentru o mai bună diferenţiere şi evidenţiere etichetele (tag-urile) HTML

HTML nu este un limbaj case-sensitive, adică nu face distincţia între literele

3.1. Formatarea titlului

Tag-urile acestea accepta atributul ALIGN cu ajutorul căruia titlul va putea

3.2. Formatarea textului

La tipul fontului, la fel ca şi la culori, este bine să se folosească un font care

Acest text a fost scris cu fontul "arial"

<FONT COLOR=”#000000” FACE=”Arial”>Acest text ...</FONT>

Pentru a schimba dimensiunea implicită a fontului, vom folosi una din

size 7: Proiect diploma

Dacă vrem ca textul nostru să fie scris cu caractere îngroşate, folosim

Pentru ca textul să fie scris cu caractere italice, folosim perechea de etichete

Pentru ca textul să fie subliniat, folosim perechea de etichete <U> şi </U>.

Acest cod va avea ca rezultat:

Acest cod va avea ca rezultat:

Tag-ul <P> vine de la cuvântul paragraf si se deosebeşte de tag-ul <BR>

Acest cod va avea ca rezultat:

Stiu limbajul HTML.

Vom obţine următorul rezultat:

Invat limbajul HTML.

Exersez limbajul HTML.

Stiu limbajul HTML.

3.3. Utilizarea caracterelor speciale

Â &#194; Ă &#258; Î &#206; Ş &#350; Ţ &#354;

Culoarea reprezintă un caracteristică extrem de importantă a unei pagini

4.1. Sistemul de definire a culorilor

Nume Cod Nume Cod

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"

Conţinutul paginilor Web capătă un aspect atractiv şi profesional dacă au

5.1. Formatele fişierelor grafice

5.1.1. Formatul GIF

5.1.2. Formatul JPEG

Atributele etichetei <IMG>:

5.3. Dimensionarea imaginii

Absenţa atributelor de dimensionare din cadrul etichetei <IMG> este

5.4. Alinierea imaginii şi a textului

5.5. Imagini folosite ca fond (background) al paginii

5.6. Imaginile video

O modalitate de structurare avansată a unui document HTML este împărţirea

<frameset [border=n] [bordercolor=#rrggbb]

Marcajul <frameset> are următoarele atribute:

<frame [frameborder=yes|no] [longdesc=URL]

Marcajul <frame> are următoarele atribute:

Marcajul <noframes> reprezintă alternativa (codul HTML) care va fi afişată

Exemplul de mai jos defineşte un <frameset> cu două cadre orizontale,

Navigarea în cadrul site-urilor este posibilă cu ajutorul link-urilor

7.1. Legătura către o altă pagină - Link-urile

Pentru a activa linkul de mai sus vom adauga atributul href.

Exemplul următor arată formatarea documentului:

Referinţele pot fi absolute (ex. <a

Â Â Ă Ă Î Î Ş Ş Ţ Ţ