Documentatie HTML

1. Ce este HTML?
Unul din primele elemente fundamentale ale WWW (World Wide Web)
este HTML (Hypertext Markup Language), care descrie formatul primar in care
documentele sint distribuite si vazute pe Web. Multe din trasaturile lui, cum ar fi
independenta fata de platforma, structurarea formatarii si legaturile hipertext, fac
din el un foarte bun format pentru documentele Internet si Web.
Primele specificatiile de baza ale Web-ului au fost HTML, HTTP si URL.
HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. HTML a fost
vazut ca o posibilitate pentru fizicienii care utilizeaza computere diferite si
schimbe intre ei informatie utilizind Internetul. Erau prin urmare necesare citeva
trasaturi: independenta de platforma, posibilitati hypertext si structurarea
documentelor.Independenta de platforma inseamna ca un document poate fi
afisat in mod asemanator de computere diferite (deci cu fonte, grafica si culori
diferite), lucru vital pentru o audienta atit de variata.
Hipertext inseamna ca orice cuvint, fraza, imagine sau alt element al
documentului vazut de un utilizator (client) poate face referinta la un alt
document, ceea ce usureaza mult navigarea intre multiple documente sau chiar
in interiorul unui aceluiasi document. Structurarea riguroasa a documentelor
permite convertirea acestora dintr-un format in altul precum si interogarea unor
baze de date formate din aceste documente.
SGML si HTML
Tim Berners-Lee a utilizat ca model SGML (Standard Generalized Markup
Language), un standard international in plina dezvoltare. SGML avea avantajul
unei structurari avansate si al independentei de platforma dar proiectarea lui a
avut in vedere mai mult structura semantica a documentului decit modul de
formatare. Flexibil, SGML putea fi descris ca o specificare pentru descrierea altor
formate. Utilizatorii puteau crea noi formate (DTD, Document Type Definitions)
care puteau fi intelese de orice produs soft SGML pur si simplu prin citirea mai
intai a definitiilor noilor formate.
HTML este pur si simplu un DTD, deci o aplicatie a SGML. In primii ani de
evolutie HTML a crescut lent, in principal pentru ca ii lipseau posibilitatile de a
descrie publicatii electronice profesionale; limbajul permitea oarece control
asupra fontelor dar nu permitea inserarea graficii. In 1933, NCSA a imbogatit
limbajul pentru a permite inserarea graficii si au construit primul navigator grafic,
Mosaic. Au urmat apoi contributii ad hoc ale diverselor firme care au adus
adaugiri limbajului HTML (adaugiri si nu imbogatiri pentru ca unele taguri nu erau
in conformitate cu principiile generale ale SGML) astfel incat, prin 1994 limbajul
parea scapat de sub control. Urmarea a fost ca la prima conferinta WWW din
Geneva (Elvetia) s-a constituit un grup (HTML Working Group) a carui prima
misiune a fost formalizarea HTML intr-un DTD al SGML, lucru care s-a
concretizat in HTML Level 2 (sau HTML 2.0; Nivelul 1, deci HTML 1.0, a fost
proiectat de Tim Berners-Lee). Importanta actiunii acestui grup consta in faptul

ca, odata standardizat, limbajul poate fi apoi extins intr-un mod mai controlat la
alte nivele.
Standardul oficial HTML este World Wide Web Consortium (W3C),
care este afiliat la Internet Engineering Task Force (IETF). W3C a enuntat cateva
versiuni ale specificatiei HTML, printre care si HTML 2.0, HTML 3.0,HTML 3.2,
HTML 4.0 si, cel mai recent, HTML 4.01. In acelasi timp, autorii de browsere,
cum ar fi Netscape si Microsoft, au dezvoltat adesea propriile "extensii" HTML in
afara procesului standard si le-au incorporat in browserele lor. In unele cazuri,
cum ar fi tagul Netscape, aceste extensii au devenit standarde de facto adoptate
de autorii de browsere.
HTML 2.0, elaborat in Iunie 1994, este standardul pe care ar trebui sa-l
suporte toate browserele curente -- inclusiv cele mod text. HTML 2.0 reflecta
conceptia originala a HTML ca un limbaj de marcare independent de obiectele
existente pentru asezarea lor in pagina, in loc de a specfica exact cum ar trebui
sa arate acestea. Daca doriti sa fiti siguri ca toti vizitatorii vor vedea paginile asa
cum trebuie, folositi tagurile HTML 2.0.
Specificatia HTML 3.0, Enuntata in 1995, a incercat sa dezvolte HTML 2.0
prin adaugarea unor facilitati precum tabelele si un mai mare control asupra
textului din jurul imaginilor. Desi unele din noutatile HTML 3.0 erau deja folosite
de autorii de browsere, multe nu erau inca. In unele cazuri, taguri asemanatoare
implementate de autorii de browsere au devenit mai raspandite decat tagurile
"oficiale". Specificatia HTML 3.0 acum a expirat, deci nu mai este un standard
oficial.
In Mai 1996, W3C a scos pe piata specificatia HTML 3.2 , care era
proiectata sa reflecte si sa standardizeze practicile acceptate la scara larga.
Deci, HTML 3.2 include tagurile HTML 3.0 ce erau adoptate de autorii de
browsere ca Netscape si Microsoft plus extensii HTML raspandite. In Bilantul
asupra HTML, W3C recomanda ca providerii de informatii sa utilizeze specificatia
HTML 3.2.Versiunile curente ale majoritatii browserelor ar trebui sa suporte toate,
sau aproape toate aceste taguri.
De asemenea exista extensii Netscape si Microsoft care nu fac parte din
specificatia HTML 3.2, ori pentru ca sunt mai putin utilizate, ori au fost omologate
dupa aparitia HTML 3.2. Pentru ca navigatorul Netscape a fost printre primele
browsere care suporta anumite taguri HTML 3.0, iar Netscape detine in jur de
70% din piata de browsere, multi au crezut eronat ca toate extensiile Netscape
(incluzand taguri ca <BLINK> si facilitati ca ferestrele) fac parte din HTML 3.0
sau HTML 3.2.
La momentul aparitiei acestui tutorial, HTML 4.0 este larg utilizat si au fost
deja publicate specificatiile HTML 4.01.
Documentele HTML sint documente in format ASCII si prin urmare pot fi
create cu orice editor de texte. Au fost insa dezvoltate editoare specializate care
permit editarea intr-un fel de WYSIWYG desi nu se poate vorbi de WYSIWYG
atita vreme cit navigatoarele afiseaza acelasi document oarecum diferit, in

functie de platforma pe care ruleaza. Au fost de asemenea dezvoltate
convertoare care permit formatarea HTML a documentelor generate (si
formatate) cu alte editoare. Evident conversiile nu pot patra decit partial
formatarile anterioare deoarece limbajul HTML este inca incomplet.
2. Primii pai
Orice document HTML ncepe cu notaia <html> i se termin cu notaia
</html>. Aceste "chestii" se numesc n literatura de specialitate "TAG-uri". Prin
convenie, toate informaiile HTML ncep cu o parantez unghiular deschis "<"
i se termin cu o parantez unghiular nchis ">". Tag-urile ntre aceste
paranteze transmit comenzi ctre browser pentru a afia pagina ntr-un anumit
mod. Unele blocuri prezinta delimitator de sfarsit de bloc, in timp ce pentru alte
blocuri acest delimitator este optional sau chiar interzis.
Intre cele doua marcaje <html> si </html> vom introduce doua sectiuni:
-sectiunea de antet <head>...</head> si - corpul documentului
<body>...</body>. Blocul <body>...</body> cuprinde continutul propriu-zis al
paginii HTML, adica ceea ce va fi afisat in ferastra browser-ului.
O eticheta poate fi scris atat cu litere mici, cat si cu litere mari.
Adica <HTML> = <HtmL> = <html>. Caracterele "spatiu" si "CR/LF" ce apar
intre etichete sunt ignorate de catre browser. Deci un prim document HTML ar fi
ceva de genul asta:
<html>
<head> </head>
<body>
</body>
</html>
Aa arata primul document HTML. Copiai-l folosind Copy/Paste ntr-un
fiier nou i salvai-l ca PRIM.HTM sau PRIM.HTML. Apoi pornii Netscape
Navigator sau Internet Explorer, dai CTRL-O i introducei calea spre fiier. Dai
OK i ... nimic.
S nu disperam ... vom adauga primele elemente la pagina noastra. In
primul rand, titlul unei pagini se obtine inserand in sectiunea <head>...</head> a
urmatoarei linii:
<title>Aceasta este prima mea pagina de Web</title>
In plus, in sectiunea <body>...</body> putem scrie texte cat dorim. Daca
nu intalnim nici un marcaj < sau > atunci interpretorul HTML le va lua ca texte
simple si le va afisa pe ecran. Sa vedem o noua versiune a paginii noastre:
<html>
<head>
<title>Aceasta este prima mea pagina de Web</title>
3
</head>
<body>
Bine ati venit in pagina mea de Web!
</body>
</html>
vezi acest exemplu
Coninutul blocului <title>...</title> va aparea n bara de titlu a ferestrei

browser-ului. Dac acest bloc lipsete ntr-o pagina HTML, atunci n bara de titlu
a ferestrei browser-ului va aparea numele fiierului.
Daca introducem mai multe linii intr-o pagina browser-ul va afisa intr-un
singur rand, intrucat caracterele " CR/LF " sunt ignorate de browser. Trecerea pe
o linie noua se face la o comanda explicita, care trebuie sa apara in pagina html.
Aceasta comanda este marcajul <br> (de la " line break " - intrerupere de
linie).
Folosind aceleasi operatii ca mai sus, vizualizati noua pagina! Veti
vedea textul ce apare in fereastra navigatorului. In plus, pagina dvs. va
avea un titlu nou, cel introdus de dvs.
<html>
<head>
<title> titlul paginii</title>
</head>
<body>
Bine ati venit in <br> pagina mea de Web!
</body>
</html>
vezi acest exemplu
Blocuri preformatate
Pentru ca browser-ul sa interpreteze corect caracterele "spatiu", "tab" si
"CR/LF" ce apar in cadrul unui text, acest text trebuie inclus intr-un bloc
<pre>...</pre>.
<html>
<head>
<title>bloc preformatat </title>
</head>
<body><pre>
Prima linie
A doua linie
A treia linie
</pre></body>
</html>
vezi acest exemplu
Culoarea de fond
O culoare poate fi precizat in doua moduri:
Printr-un nume de culoare.Sunt disponibile cel putin 16 nume de culori:
aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red,
silver, teal, white si yellow.
Prin constructia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre
hexazecimale si pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C,
d, D, e, E, f, F; se pot defini astfel 65536 de culori.
Culoarea unei pagini se precizeaza prin intermediul unui atribut al
etichetei <body>.
Culoarea fondului paginii Web se stabileste cu atributul bgcolor al etichetei
<body>, de exemplu: <body bgcolor = culoare>.
Urmatorul exemplu realizeaza o pagina cu fondul de culoare gri.
<html>
<head>
<title>culoare de fond </title>
</head>
<body bgcolor=gray>
O pagina Web cu fondul GRI!
</body>
</html>
vezi acest exemplu
Culoarea textului
Acest lucru se face prin intermediul atributului text al etichetei <body>
dupa sintaxa <body text=culoare>. In urmatorul exemplu textul are culorea rosie.
<html>
<head>
<title>culoare textului </title>
</head>
<body text=red>
Un text de culoare rosie.
</body>
</html>
vezi acest exemplu
O eticheta poate avea mai multe atribute. De exemplu, o eticheta cu trei

atribute arata astfel: <eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 =
valoare3>. Urmatorul exemplu prezinta o pagina cu fondul de culoare albastra si
textul de culoare galbena.
<html>
<head>
5
<title>atribute multiple </title>

</head>
<body bgcolor=blue text=yellow>
Fond de culoare albastra si text de culoare galbena.
</body>
</html>
vezi acest exemplu
Textul afisat este caracterizat de urmatoarele atribute: Marime (size),

Culoare (color), Font (style).
Acestea sunt atribute ale etichetei <basefont>. Este o eticheta singulara
(fara delimitator de sfarsit de bloc).
<basefont size = numar color = culoare style = font>
unde:
numar - poate fi 1, 2, 3, 4, 5, 6 sau 7; (1 pentru fontul cel mai mic si 7

pentru fontul cel mai mare);
culoare - este o culoare precizata prin nume sau printr-o constructie RGB;
font - poate fi un font generic ca "serif", "san serif", "cursive",
"monospace", "fantasy" sau un font specific instalat pe calculatorului
clientului, ca "Times New Roman", "Helvetica" sau "Arial". Se accepta ca
valoare si o lista de fonturi separate prin virgula, de exemplu:
"Times New Roman, serif, monospace ".
Domeniul de valabilitate al caracteristicelor precizate de aceasta eticheta

se intinde de la locul in care apare eticheta pana la sfarsitul paginii sau pana la
urmataorea eticheta <basefont>.
Daca acest atribut lipseste atunci textul din pagina Web are atribute
prestabilite sau atribute precizate de browserul utilizat. Atributele prestabilite
sunt: size = 3, color = black, si style = "Times New Roman" .
Pozitionarea continutului paginii Web fata de marginile ferestrei
browserului se poate face cu ajutorul a doua atribute ale etichetei <body>:
leftmargin (stabileste distanta dintre marginea stanga a ferstrei
browserului si marginea stanga a continutului paginii);
topmargin (stabileste distanta dintre marginea de sus a ferstrei
browserului si marginea de sus a continutului paginii);
<html>
<head>
<title>Configurarea textului si stabilirea marginii </title>
</head>
<body leftmargin="100" topmargin="50">
Textul are atribute implicite. <br><basefont style="Arial" color="blue" size="6">
Textul este scris cu fontul "Arial", culoare albastru si marime 6. </body>
</html>
vezi acest exemplu
Stiluri pentru blocurile de text

Pentru ca un bloc de text sa apara in pagina evidentiat (cu caractere
aldine), trebuie inclus intre delimitatorii <b>...</b> (b vine de la "bold" =
indraznet).
Pentru ca un text sa fie scris cu carcatere mai mari cu o unitate decat cele
curente acesta trebuie inclus intr-un bloc delimitat de etichetele <big>...</big>.
Pentru ca un text sa fie scris cu carcatere mai mici cu o unitate decat cele
curente acesta trebuie inclus intr-un bloc delimitat de etichetele
<small>...</small>.
Pentru ca un text sa fie scris cu carcatere cursive acesta trebuie inclus
intr-un bloc delimitat de etichetele <i>...</i> (i vine de la " italic ").
Pentru a insera secvente de text aliniate ca indice (sub-script) sau ca
exponent (super-script), aceste fragmente trebuie delimitate de etichetele
<sub>...</sub>, respectiv <sup>...</sup>.
Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele
<u>...</u> (u vine de la " underline").
Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele
<strike>...</strike> sau <s>...</s>.
In exemplul urmator vom utiliza toate etichetele mentionate anterior.

<html>
<head>
<title>Stiluri pentru blocuri de text </title>
</head>
<body>
<b>Text scris cu caractere ingrosate.</b>
<br> <big>Text cu caractere marite cu o unitate <big>mai mare<big> si mai
mare<big> si mai mare.</big></big></big></big><br>
<small>Textul este scris cu caractere micsorate cu o unitate <small>mai
mic.</small></small><br>
<i>Text scris cu caractere italice.</i>
<br> In aceasta linie <sup>sus</sup> este superscript iar <sub>jos</sub> este
subscirpt.<br>
<strike>Aceasta linie este in intregime sectionata de o linie orizontala.</strike>
<br>
In aceasta linie urmatorul cuvant este <u>subliniat</u>, iar cuvantul
<s>strike</s> sectoinat.
</body>
</html>
vezi acest exemplu
Stiluri fizice i logice
Am prezentat deja 8 stiluri de scriere a caracterelor unui bloc de text,

numite si stiluri fizice intrucat nu s-a acordat nici o atentie semnificatiei informatiei
continute de aceste blocuri.
In continuare sunt prezentate stilurile utilizate la formatarea unui bloc.
Aceste stiluri tin cont de semnificatia pe care o are blocul in cadrul paginii Web.
Pentru a pune in evidenta (prin silul cursiv) fragmente de text se utilizeaza
etichetele:
<cite>...</cite> (" cite " inseamna citat);
<em>...</em> (em vine de la " emphasize " = a evidentia).
In locul lor se poate utiliza eticheta echivalenta <i>...</i>.
Urmatoarele etichete au efecte similare.Ele permit scrierea fragmentului
de text cu caractere monospatiate (de tipul celor folosite de o masina de scris):
<code>...</code> ("code" inseamna cod sau sursa);

<kbd>...</kbd> (kbd vine de la " keyboard " = tastatura);
<tt>...</tt> (tt vine de la " teletype " = teleprinter).
Eticheta de tip bloc <blink>...</blink> delimiteaz fragmenete de text

clipitoare. Aceasta eticheta functioneaza numai in browserul Netscape
Communicator.
<html>
<head>
<title>Blocuri de caractere monospatiate si clipitoare </title>
</head>
<body>
Aceasta linie este formata din text normal.<br>
Codul functiei f(x,y) este: <code>Function f(x,y) {return x+y;}</code><br>
Tastati urmatoarea comanda comanda DOS:
<kbd> copy c:\windows\* c:\temp<kbd><br>
<tt>Asa scrie un teleprinter</tt><br>
Acest cuvant clipeste <blink>Blink</blink>
</body>
</html>
vezi acest exemplu
Exemplul urmtor ilustreaz ca etichetele pot fi imbricate.
un fragment de text poate fi scris cu aldine si cursive in acelsi timp;

pentru un fragment de text se pot folosi simultan stilurile subliniat,
exponent, mrit i cursiv.
Blocul <q>...</q> permite inserarea in-line a citatelor. Aceste citate sunt

afiate de ctre browser cu caractere cursive. "q" vine de la "in-line quotation"
(citate inserate in-line); i blocurile "q" pot fi imbricate.
<html>
<head>
<title>Imbricarea etichetelor </title>
</head>
<body> Aceasta linie este formata din text normal.<br>
Normal <b>ingrosat <i> ingrosat si italic </i> ingrosat </b>.
<br> Normal <u>subliniat <b> subliniat si ingrosat <big>subliniat, ingrosat si
marit.<br>
<i>Subliniat, ingrosat ,marit si italic.</i> </big></b></u>
</body>
</html>
3. Fonturi
Un font este caracterizat de urmtoarele atribute:
culoare (stabilita prin atributul color);

tipul sau stilul (stabilit prin atributul face);
marimea (definita prin atributul size);
marimea in puncte tipografice (stabilita prin atributul point-size);
grosime (definita prin atributul weight).
Toate aceste atribute apartin etichetei, care permite inserarea de blocuri

de texte personalizate.
Culori
O culoare poate fi precizata in doua moduri:
1. printr-un nume de culoare.
2. printr-o constanta conform standardului de culoare RGB (Red, Green,
Blue). O astfel de constanta se formeaza astfel: #rrggbb, unde r, g si b
sunt cifre hexazecimale.
Culorea fontului
Pentru a scrie un fragment de text cu caractere de o anumit culoare se
ncadreaz acest fragment ntre delimitatorii ... avnd stabilit atributul color la
valoarea necesar. De exemplu:
<font color=red>fragment de text de culoare rosie</font>
Familia fontului
Pentru a scrie un text ntr-o pagin pot fi folosite mai multe fonturi (stiluri
de caractere). Exist cinci familii generice de fonturi care sunt de regul
disponibile pe toate calculatoarele utilizatorilor: serif, sans serif, cursive,
monospace i fantasy.
Tipul de font necesar poate fi stabilit prin atributul face al etichetei.
Pot fi introduse mai multe fonturi separate prin virgul.
<font face="Arial, serif, monospace">
n acest caz browserul va utiliza primul font pe care l cunoate.
<html>
<head>
<title> Culoarea si familia fontului</title>
</head>
<body>
Aceste linie este scrisa cu caractere normale.
<br> <font color="red">Aceasta linie este rosie.</font>
<br>Aici<font color="green">fiecare</font>
<font color="blue">cuvant</font>
<font color="yellow">are</font>
<font color="cyan">alta</font>
<font color="#3478fa">culoare.</font>
<br><font face="monospace">Linie scrisa cu caractere monospatiate.</font>
<br> <font face="arial">Linie scrisa cu caractere arial.</font>
</body>
</html>
vezi acest exemplu
Mrimea fontului
Pentru a stabili mrimea unui font se utilizeaz atributul size al etichetei.
Valorile acestui atribut pot fi:
1, 2, 3, 4, 5, 6, 7 (1 pentru cel mai mic font si 7 pentru cel mai mare);

+1, +2, etc. pentru a mri dimensiunea fontului cu 1, 2, etc. fa de
valoarea curent;
-1, -2, etc. pentru a micora dimensiunea fontului cu 1, 2, etc. fa de
valoarea curent.
Mrimea unui font poate fi stabilit exact cu ajutorul atributului point-size.

Valorile acceptate de acest atribut pot fi orice numere naturale pozitive. Numrul
astfel precizat reprezint mrimea fontului n puncte tipografice. Acest atribut
functioneaz numai cu Netscape Communicator.
10
<html>
<head>
<title> Marimea fontului</title>
</head>
<body>
Aceste linie este scrisa cu caractere normale. <br>

<font size="5">Fonturi de marime 5.</font> <br>
<basefont size="4">Fonturi de marime 4.</font> <br>
<font size="-3">Fonturi de marime 1.</font> <br>
<font size="+2">Fonturi de marime 6.</font> <br>
<font point-size="30">Fonturi de marime 30 pt (numai cu Netcape
Communicator).</font> <br>
<font point-size="50">Fonturi de marime 50 pt (numai cu Netcape
Communicator).</font>
</body>
</html>
vezi acest exemplu
Grosimea unui font

Grosimea unui caracter poate fi definit cu ajutorul atributului weight al
etichetei. Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600,
700, 800 i 900 (100 pentru fontul cel mai subire i 900 pentru cel mai gros).
<html>
<head>
<title> Grosimea fontului</title>
</head>
<body>
Aceste linie este scrisa cu caractere normale. <br>

<font weight="100">Fonturi de grosime 100.</font> <br>
<font weight="500">Fonturi de grosime 500.</font> <br>
<font weight="900">Fonturi de grosime 900.</font>
</body>
</html>
4. Blocuri de text
Aceste etichete nu se refer la particularitiile caracterelor ce compun
textul, ci la funciile pe care le poate avea un bloc de text n cadrul paginii Web.
Toate aceste etichete produc automat trecerea la un rnd nou i adugarea unui
spaiu suplimentar.
11
Inserarea unei adrese

Dac ntr-o pagin web trebuie inclus o adresa, atunci putem utiliza
facilitile oferite de o etichet dedicat: <address>...</address>.
<html>
<head>
<title> Adresa</title>
</head>
<body>
Adresa institutiei noastre este :<address> Colegiul Universitar<br>

Str: Victor Babes , Nr:62/A <br>
Baia Mare Romania </address>
</body>
</html>
vezi acest exemplu
Indentarea unui bloc

Pentru ca un bloc de text s fie indentat (marginea din stnga a textului s
fie deplasat la dreapta la o anumit distanta fa de marginea paginii), acesta
trebuie inclus ntre etichetele <blockquote>...</blockquote>.
<html>
<head>
<title> Indentarea unui bloc</title>
</head>
<body>
Textul ce urmeaza este indentat:<blockquote> Aceste etichete nu se
refera la particularitatiile caracterelor ce compun textul, ci la functiile pe

care le poate avea un bloc de text in cadrul paginii Web. Toate aceste
etichete produc automat trecerea la un rand nou si adaugarea unui spatiu
suplimentar. </blockquote>
</body>
</html>
vezi acest exemplu
Blocul preformatat
Intr-un bloc <pre>...</pre>, semnificatia marcajelor HTML se pastreaza.
Blocul <pre>...</pre> este indicat pentru a insera randuri vide (spatiu intre
randurile succesive). Caracterul "spatiu" poate fi luat in considerare de browser
daca este inserat explicit prin .
<html>
<head>
12
<title> Bloc preformatat</title>

</head>
<body>
Orar:<pre>
Ora/Ziua
8:00
9:00
Luni
Marti
Miercuri
Romana Matematica
Sport
Geografie
Istorie
Fizica </pre>
</body>
</html>
vezi acest exemplu
ntr-un fiier HTML, caracterele "<" si ">" au o semnificatie special pentru

browser. Ele ncadreaz comenzile i atributele de afiare a elementelor ntr-o
pagin. Dac dorim ca un fragment de text s conin astfel de caractere, acest
fragment trebuie ncadrat de una dintre perechile de etichete:
<xmp>...</xmp> (80 de caractere pe rand);

<listing>...</listing> (120 de caractere pe rand).
Aceste marcaje interpreteaza corect caracterele " spatiu ", " eticheta " si
"CR/LF ". Textul afisat in pagina este monospatiat.
<html>
<head>
<title> xmp si listing</title>
</head>
<body>
Un fisier html standard arata astfel: <xmp> <html>

<head>
<title> </title>
</head>
<body>
O pagina Web ...

</body>
</html> </xmp> </body>
</html>
vezi acest exemplu
Blocuri paragraf
Cu ajutorul etichetei paragraf <p> este posibil trecerea la o linie nou i
permite:
inserarea unui spaiu suplimentar nainte de blocul paragraf;
13
inserarea unui spaiu suplimentar dup blocul paragraf, dac se folosete

delimitatorul </p> (acesta fiind optional);
alinierea textului cu ajutorul atributului align, avnd valorile posibile "left",
"center" sau "right".
<html>
<head>
<title> Blocuri paragraf</title>
</head>
<body>
Prima linie
<p> Lini generata de un paragraf (implicit paragraful este aliniat la
stanga).
<p align="right"> Paragraf aliniat la dreapta.Paragraf aliniat la
dreapta.Paragraf aliniat la dreapta.Paragraf aliniat la dreapta. Paragraf
aliniat la dreapta.Paragraf aliniat la dreapta.Paragraf aliniat la dreapta.
<p align="center"> Paragraf aliniat in centru.Paragraf aliniat in
centru.Paragraf aliniat in centru.Paragraf aliniat in centru. Paragraf aliniat
in centru.Paragraf aliniat in centru.Paragraf aliniat in centru.
</body>
</html>
vezi acest exemplu
Blocuri de titlu
ntr-un text titlurile (headers) de capitole pot fi introduse cu ajutorul
etichetelor <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Toate aceste etichete se refer
la un bloc de text i trebuie nsoite de o etichet de ncheiere similar. Aceste
etichete accept atributul align pentru alinierea titlului blocului de text la stnga
(n mod prestabilit), n centru i la dreapta. Tag-ul <h1> permite scrierea unui
titlu cu caractere mai mari i aldine, pe cnd <h6> folosete caracterele

cele mai mici.
<html>
<head>
<title> Blocuri de titlu</title>
</head>
<body>
<h1 align="center"> Titlu de marime 1 aliniat in centru </h1>
<h2 align="right"> Titlu de marime 2 aliniat la dreapta. </h2>
<h4> Titlu de marime 4 aliniat la stanga (implicit) </h4>
</body>
</html>
vezi acest exemplu
14
Linii orizontale
ntr-o pagina Web pot fi inserate linii orizontale. Acest lucru se face cu
ajutorul etichetei <hr>. Pentru a configura o linie orizontal se utilizeaz
urmtorele atribute ale etichetei <hr>:
align permite alinierea liniei orizontala. Valorile posibile sunt "left ", "center"
i "right";
width permite alegerea lungimii liniei;
size permite alegerea grosimii liniei;
noshade cnd este prezent definete o linie fr umbr;
color permite definirea culorii liniei.
<html>
<head>
<title> Linii orizontale</title>
</head>
<body>
<h1 align="center"> Tipuri de linii orizontale </h1> O linie implicita
alinierea stanga, latime 100%, grosime 2 cu umbra.

<hr>
Urmeaza o linie aliniata in centru , de latime 50%, grosime 5 pixeli , fara

umbra.
<hr align="center" width="50%" size="5" noshade> Urmeaza o linie
aliniata la dreapta , de latime 150 de pixeli, grosime 12 pixeli , de culoare
rosie.
<hr align="right" width=150 size=12 color="red">
</body>
</html>
vezi acest exemplu
Blocuri <center>
Blocul introdus de etichetele <center>...</center> aliniaz centrat toate
elementele pe care le conine.
<html>
<head>
<title> Linii orizontale</title>
</head>
<body>
<center> <hr width=10%> <hr width=40%> <hr width=70%> <hr
width=100%> <hr width=70%> <hr width=40%> <hr width=10%>
</center>
15
</body>
</html>
vezi acest exemplu
Blocuri <nobr>
Blocul de text cuprins ntre etichetele <nobr>...</nobr> va fi afiat pe o
singur linie.
<html>
<head>
<title> Blocul <nobr></title>
</head>
<body>
<nobr> O singura linie.O singura linie.O singura linie.O singura linie.O
singura linie. O singura linie.O singura linie.O singura linie.O singura

linie.O singura linie. O singura linie.O singura linie.O singura linie.O
singura linie.O singura linie.
</nobr>
</body>
</html>
vezi acest exemplu
Blocuri <div>
Modalitatea cea mai eficient de delimitare i de formatare a unui bloc de
text este folosirea delimitatorilor <div>...</div>. Un parametru foarte foarte util
pentru stabilirea caracteristicilor unui bloc <div> (diviziune) este align (aliniere).
Valorile posibile ale acestui parametru sunt:
" left " (aliniere la stnga);

" center " (aliniere central);
" right " (aliniere la dreapta).
Un bloc <div>...</div> poate include alte subblocuri. n acest caz,

alinierea precizat de atributul align al blocului are efect asupra tuturor
subblocurilor incluse n blocul <div>; Un bloc <div>...</div> admite atributul
"nowrap" care interzice ntreruperea rndurilor de ctre browser .
<html>
<head>
<title> Blocul <div></title>
</head>
<body>
Aceasta linie este o linie normala.Urmatorul bloc este aliniat la dreapta.

<div align="right">
16
O singura linie.O singura linie.O singura linie.O singura linie.<br>

</div>
<div align="center">
Bloc aliniat pe centru.Bloc aliniat pe centru.<br>

</div>
</body>
</html>
5. Imagini
Imaginile sunt stocate n fiiere cu diverse formate. Formatele acceptat de
browsere pentru fiierele imagine sunt:
GIF (Graphics Interchange Format) cu extensia .gif;

JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;
XPM (X PixMap) cu extensia .xmp;
XBM (X BitMap) cu extensia .xbm;
BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);
TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;
Cele mai rspndite formate sunt GIF (8 bii pentru o culoare, 256 culori
posibile) i JPEG (24 biti pentru o culoare, 16777216 de culori posibile).
Adresa URL a unei imagini
URL ("Uniform Resourse Locator" = identificator unic al resursei) este un
standard folosit n identificarea unic a unei resurse n Internet.
Toate imaginile cu care vom lucra vor avea adresa URL exprimat n
funcie de directorul ce conine documentul HTML care face referire la imagine.
Pentru a insera o imagine ntr-o pagin, se utilizeaza eticheta <img> (de
la "image"=imagine). Pentru a putea fi identifica imaginea care va fi inserata, se
utilizeaza un atribut al etichetei <img> si anume src (de la "source"=sursa).
Dac imaginea se afl n acelai director cu fiierul HTML care face
referire la imagine, atunci adresa URL a imaginii este format numai din numele
imaginii, inclusiv extensia.
<html>
<head><title> O pagina cu imagine</title></head> <body> O pagina
care contine o imagine

<img src="w3.gif"> Text dupa imagine.
17
</body>
</html>
vezi acest exemplu
Chenarul i dimensionarea unei imagini

Dac dorii s adaugai un chenar n jurul imaginii, folosii atributul border
al etichetei <img>. Valorile acestor atribute sunt numere ntregi pozitive.
O imagine are anumite dimensiuni pe orizontal i vertical, stabilite n
momentul crearii ei. Dac nu se cere altfel, aceste dimensiuni sunt respectate in
momentul afisarii ei in pagina Web.
Dimensiuniile prestabilite ale unei imagini pot fi modificate prin intermediul
atributelor width si height.
<html>
<head><title> Imagine cu chenar si marit</title></head> <body> O
imagine cu chenar si de 200 pixeli X 15 %

<img src="w3.gif" border="5" width="350" height="25%"> Text dupa
imagine.
</body>
</html>
vezi acest exemplu
Alinierea unei imagini

Alinierea unei imagini se poate face prin intermediul atributului align care
poate lua urmatorele valori:
" left " - aliniere la stanga; celelalte componente sunt dispuse pe in partea
dreapta;
" right " - aliniere la dreapta; celelalte componente sunt dispuse pe in
partea stanga;
" top " - aliniere deasupra; partea de sus a imaginii se aliniaza cu partea
de sus a textului ce precede imaginea;
" middle " - aliniere la mijloc; mijlocul imaginii se aliniaza cu linia de baza a
textului ce precede imaginea.
" bottom " - aliniere la baza; partea de jos a imaginii se aliniaza cu linia de
baza a textului.
<html>
<head><title> Alinierea unei imagini</title></head> <body> Alinieri:
<br> Pe verticala:
<img src="w3.gif" align="top">
La mijloc: <img src="w3.gif" align="center">
Jos: <img src="w3.gif" align="bottom"> Text dupa imagine.
18
</body>
</html>
vezi acest exemplu
Alinierea textului in jurul imaginii

Atributele hspace si vspace precizeaza distanta in pixeli pe orizontala,
respectiv pe verticala, dintre imagine si restul elementelor din pagina.
Atributul alt admite ca valoare un text care va fi afisat in locul imaginii.
<html>
<head>
<title> Alinierea textului</title></head> <body> <h5>Imagine aliniat
la stanga inconjurata de text la distanta de 30 de pixeli.

</h5><p> Text inainte de imagine.Text inainte de imagine.Text inainte de
imagine.Text inainte de imagine. Text inainte de imagine.Text inainte de
imagine.Text inainte de imagine.Text inainte de imagine.
<img src="w3.gif" align="left" hspace="30" vspace="30"
alt="Universitatea de Nord Baia Mare">
Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa

imagine.Text dupa imagine. Text dupa imagine.Text dupa imagine.Text
dupa imagine.Text dupa imagine.Text dupa imagine.
</body>
</html>
vezi acest exemplu
Imagini pentru fondul unei pagini

O imagine poate fi utilizata pentru a stabili fondul unei pagini Web. In
acest scop se foloseste atributul background al etichetei <body>, avand ca
valoare adresa URL a imaginii. Imaginea se multiplica pe orizontala si pe
verticala pana umple intregul ecran.
<html> <head><title> Pagina cu imagine de fond</title></head>
<body background="w3.gif">
1<br>2<br>3<br>4<br> 5<br>6<br>7<br>8<br> 9<br> </body>
</html>
vezi acest exemplu
Imagini folosite ca legaturi

O legtur (link) introduce n pagina Web o zon activ.
Efectund click cu butonul mouse-ului pe aceast zon n browser se va ncarca
19
o alt pagin. Pentru a utiliza imaginea "ubm1.jpg" drept legatura catre pagina
index.html utilizam sintaxa:
<a href ="index-2.html"><img src= "w3.gif"></a>
n mod prestabilit imaginea utilizat pe post de zon activ este
nconjurat de un chenar avnd culoarea unei legturi. Dac stabilim pentru
atributul border al etichetei <img> 0 acest chenar dispare.
<html> <head><title> Imagini folosite ca legaturi</title></head>
<body><h5>Imagini folosite ca legaturi</h5>
Text inainte de imagine.<a href="index-2.html"><img
src="w3.gif"></a>
Text dupa imagine.

</body> </html>
vezi acest exemplu
Utilizri speciale ale imaginilor

Imaginile pot fi utilizate pentru a obtine efecte deosebite intr-o pagina web.
Printre aceste utilizari speciale putem enumera:
1. Linii orizontale formate cu ajutorul imaginilor.
2. Simboluri speciale pentru elementele unei liste neordonate (vezi).
6. Legaturi
Lagaturile (link-urile) reprezinta partea cea mai importanta a unei pagini
Web. Ele transforma un text obisnuit in hipertext sau hiperlegatura, care premite
trecerea rapida de la o informatie aflata pe un anumit server la alta informatie
memorata pe un alt server aflat oriunde in lume. Legaturile sunt zone active intr-o
pagina Web, adica zone de pe ecran sensibile la apasarea butonului stang al
mouse-ului.
O legatura catre o pagina aflata in acelasi director
O legatura catre o pagina aflata in acelasi director se formeaza cu ajutorul
etichetei <a> (de la "anchor"=ancora). Pentru a preciza pagina indicata de
legatura se utilizeaza un atribut al etichetei <a> numit href, care ia valoare
numele fisierului HTML aflat in acelasi director. Zona activa care devina sensibila
la apasarea butonului stang al mouse-ului este formata din textul cuprins intre
etichetele <a>...</a>. Prezenta etichtetei de sfarsit </a> este obligatorie.
<html>
<head>
<title> Comutarea intre doua pagini</title>
20
</head>
<body>
<h3>Pagina 1 </h3>
<a href="leg_ex2.html">
Link catre pagina 2 </a>
</body>
</html>
vezi acest exemplu
<html>
<head>
<title> Comutarea intre doua pagini</title>
</head>
<body>
<h3>Pagina 2 </h3>
<a href="leg_ex1.html">
</body>
</html>
vezi acest exemplu
O legatur ctre o pagin aflat pe acelai disc local

Daca pagina referita se afla pe acelasi disc local, dar intr-un alt director
atunci pentru a preciza pozitia ei in structura de directoare se poate folosi
adresarea relativa.
<html>
<head>
<title> Comutarea intre doua pagini aflate pe acelasi disc local</title>
</head>
<body>
<h3>Pagina 3 </h3>
<a href="exemple/list/listex_11.html">
Link catre o pagina cu liste </a>
</body>
</html>
vezi acest exemplu
O legatur ctre un site particular

n exemplul urmtor se utilizeaz adresa URL www.netscape.com care
ncarc pagina de start din site-ul firmei Netscape Corporation.
<html>
<head>
21
<title> Link catre site-ul firmei Netscape</title>

</head>
<body>
<h3>Link catre site-ul firmei Netscape </h3>
<a href="http://www.netscape.com">
Netscape Corporation </a>
</body>
</html>
vezi acest exemplu
Ancore
Intr-o pagina foarte lunga pot exista puncte de reper catre care se
definesc legaturi. O ancora se defineste de asemenea prin eticheta <a>. Pentru
a defini ancora se utilizeaza atributul name care primeste ca valoare un nume
atribuit ancorei (de exemplu "leg1"). Pentru a insera o legatura catre "leg1"
definita in aceeasi pagina se utilizeaza eticheta <a> avand atributul href de
valoare "#leg1". Pentru a introduce o legatura catre o ancora definita in alt
document (alta pagina) aflat in acelasi director, atributul href primeste o valoare
de forma "nume_fisier.html#nume_ancora".
<html>
<head>
<title> Ancore definite in acelasi document si in alt doocument</title>
</head>
<body>
<h3>Ancore definite in acelasi document si in alt document </h3>
<a href="#ancora1">
Link catre ancora 1 </h3>
<a href="../../legaturi.php#anc">
Link catre o ancora din alt document </a>
<br> 1<br>2<br>3<br>4<br> 5<br>6<br>7<br>8<br>
9<br>10<br>11<br>12<br> 13<br>14<br>15<br>16<br>
17<br>18<br>19<br>20<br> 21<br>22<br>23<br>24<br>
<a name="ancora1">ancora 1
</body>
</html>
vezi acest exemplu
Ancore definite prin atributul id

Atributul id este un atribut universal, adica poate fi atasat oricarui element al unei
pagini Web. Acest atribut va inlocui complet atributul name, care putea fi atasat
numai anumitor elemente. Atributul id primeste ca valoare un nume (de exemplu
22
"id1") care identifica in mod unic un element. Atributul id poate fi utilizat pe post
de ancora intr-o pagina Web conform sintaxei:
<eticheta id = "id1"> ... </eticheta> <a href = "#id1" >
Link catre elementul "id1" </a> unde "eticheta" poate fi orice element .
Exemplul anterior arata astfel cu eticheta id.
Alegerea culorilor pentru legturi
n mod prestabilit se utilizeaz trei culori pentru legturi:
o culoare pentru legturile nevizitate (nu s-a efectuat nici un clic pe ele)
o culoare pentru legturile vizitate (s-a efectuat cel putin un clic pe ele)
o culoare pentru legturile active (deasupra carora se afla mouse-ul la un
moment dat).
Aceste atribute pot fi stabilite cu ajutorul a trei atribute ale etichetei

<body>:
o link pentru legaturile nevizitate;
o vlink pentru legaturile vizitate;
o alink pentru legaturile active.
Valorile pe care le pot lua aceste atribute sunt culori definite prin nume
sau conform standardului RGB.
<html>
<head>
<title> Culori pentru lagaturi</title>
</head>
<body link="blue" vlink="green" alink="red">
<h3>Setarea culorilor pentru link-uri:<br>rosu pentru legaturi active,
verde pentru legaturi vizitate si albastru pentru legaturi nevizitate </h3>
<a href=leg_ex1.html>
Link catre pagina 1 <br>
Link catre pagina 2 <br>
</body>
</html>
vezi acest exemplu
Utilizarea postei electronice
23
ntr-o pagin Web se poate afla legturi care permit lansarea n execuie a
aplicaiei de expediere a mesajelor electronice. Pentru aceasta se utilizeaz n
constructia adresei URL serviciul Internet mailto: urmat de o adresa e-mail valida.
Pentru ca exemplul urmator sa functioneze trebuie ca:
pe calculator sa fie instalat o aplicatie de expediere a mesajelor

electrionice (Outlook Express pe calc. Windows , Pine pe calc. Unix);
adresa sa fie valida si calculatorul sa fie conectat la Internet.
<html>
<head>
<title> Expediere de mesaje electronice</title>
</head>
<body>
<h3>Expediere de mesaje electronice</h3><br>
<a href="mailto:a_bsz@yahoo.com">
Mesaje catre autorul paginii

</body>
</html>
vezi acest exemplu
Legturi ctre fisiere oarecare

O pagina Web poate contine legaturi catre orice tip de fisiere aflate pe
orice servere din Internet. Pentru aceasta se utilizeaza eticheta <a> avand
valoarea atributului href egala cu adresa URL a fisierului destinatie.
Atunci cand se efectueaza clic pe legatura din exemplul urmator browserul
se deschide o caseta de dialog - File download - care va permite:
sa salvati pe discul local fisierul
sa lansati in executie aplicatia capabila sa interpreteze corect fisierele de
tipul respectiv
<html>
<head>
<title> Legaturi catre fisiere oarecare</title>
</head>
<body>
<h3>Legaturi catre fisiere oarecare</h3><br>
<a href="fisier.zip">
Link catre fisierul fisier.zip

</body>
</html>
vezi acest exemplu
24
Atributul title
Atributul title aparine etichetei <a> i comand apariia unei mici ferestre
n pagina Web cnd mouse-ul se afl pe o legtur, fereastra n care este afiat
valoarea dat acestui atribut. Acest atribut are astfel menirea de a furniza
informatii suplimentare despre semnificatia unei legaturi.
<html>
<head>
<title> Atributul title</title>
</head>
<body>
<h3>Atributul title</h3><br>
<a href="mailto:a_bsz@yahoo.com" title="adresa mea de e-mail">
Mesaje catre autorul paginii

</body>
</html>
vezi acest exemplu
Legaturi catre fisiere de sunet

Sunetele pot fi stocate in fisiere in diverse formate:
AU/m-law cu extensia .au;

AIFF/AIFC cu extensiile .aiff, .aif;
WAVE/WAV cu extensia .wav;
MPEG Audio cu extensia .mpeg2, sau .mp2;
MIDI cu extensia .mid sau .midi;
O legatura catre un fisier de sunet se realizeaza folosind eticheta <a>

destinata legaturilor catre orice tip de fisiere, unde atributul href va avea valoarea
egala cu adresa URL a fisierului de sunet.
De exemplu:
<a href="numefisier.au">Link catre fisierul de sunet</a>
Legaturi catre fisiere videoclipuri
Videoclipurile sunt stocate in fisiere diverse formate.Formatele si
extensiile corespunazatoare pentru fisierele utilizabile in paginile Web sunt
urmatoarele:
MPEG cu extensia .mpeg sau mpg;

QuickTime cu extensia .mov;
AVI cu extensia .avi.
25
O legatura catre un fisier de sunet se realizeaza folosind eticheta <a>

destinata legaturilor catre orice tip de fisiere, unde atributul href va avea valoarea
egala cu adresa URL a fisierului videoclip.
De exemplu:
<a href="numefisier.avi">Link catre fisierul videoclip</a>
7. Liste
Unul din cele mai obisnuite elemente din documentele cu mai multe pagini
este un set de definitii, referinte sau indexuri. Glosarele sunt exemple clasice in
acest sens; cuvintele sunt listate in ordine alfabetica, urmate de definitii ale
termenilor respectivi. In HTML, intreaga sectiune a unui glosar va fi gestoinata
printr-o lista de definitii, care este inclusa intr-o pereche de marcaje de lista de
definitii: <dl>...</dl> (de la "definition list" = lista de definitii).
Observatii:
- Un termen al listei este initiat de eticheta <dt> (de la "definition term" =
termen definit);
- Definitia unui termen este initiata de eticheta <dd> (de la "definition
description" = descrierea definitiei);
- Definitia unui termen incepe pe o linie noua si este indentata;
<html>
<head><title>listex_1</title></head>
<body><h1 align="center">O lista de definitii</h1><hr>
<dl>
Glosar de termeni de World Wide Web

<dt><b>hypertext</b>
<dd>- o interconectare Web de informatii de tip text, in care orice cuvant
sau fraza poate face legatura catre un alt punct din document sau catre un
alt document
<dt><b>date</b>
<dd>- fluxul nesfarsit de materiale care apar pe Internet, spre deosebire
de informatii care sunt date cu un anumit inteles sau valoare
<dt><b>informatie</b>
<dd>- sub-setul de date care are efectiv semnificatie si care este util la
momentul curent
</dl>
</body>
</html>
vezi acest exemplu
26
Liste neordonate
O lista neordonata este un bloc de text delimitat de etichetele
corespondente <ul>...</ul> (" ul " vine de la " unordered list " = lista neordonata).
Fiecare element al listei este initiat de eticheta <li> (list item).
Lista va fi indentata fata de restul paginii Web si fiecare element al listei incepe
pe un rand noua.
<html>
<body><h1 align="center">O lista neordonata</h1><hr>

<ul>Culori uzuale disponibile prin nume
<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow
<li>Purple <li>Aqua
</ul>
</body>
</html>
vezi acest exemplu
Tag-urile <ul> si <li> pot avea un atribut type care stabileste caracterul
afisat in fata fiecarui element al listei. Valorile posibile al acestui atribut sunt:
o
"circle" (cerc)
"disc" (disc plin) (valoarea prestabilita);
"square" (patrat)
Listele neordonate pot fi imbricate pe mai multe niveluri
<html>
<body><h1 align="center">O lista neordonata de liste
neordonate</h1><hr>

<ul>Elemente si atribute a unei pagini HTML
<li>Frameset <ul>Atribute: <li>cols <li>rows <li>border
<li>Frame <ul>Atribute: <li>src <li>name <li>scrolling
</ul>
</ul>
</ul>
</body>
</html>
vezi acest exemplu
Liste ordonate
27
O lista ordonata de elemente este un bloc de text delimitat de etichetele

corespondente <ol>...</ol> (" ol" vine de la " ordered list " = lista ordonata).
Fiecare element al listei este initiat de eticheta <li> (list item).
Lista va fi indentata fata de restul paginii Web si fiecare element al listei incepe
pe un rand noua.
<html>
<body><h1 align="center">O lista ordonata</h1><hr>
<ol>Culori uzuale disponibile prin nume
<li>Purple <li>Aqua
</ol>
</body>
</html>
vezi acest exemplu
Tag-urile <ol> si <li> pot avea un atribut type care stabileste tipul de
caractere utilizate pentru ordonarea listei.Valorile posibile sunt:
"A" pentru ordonare de tipul A, B, C, D etc. (litere mari);

"a" pentru ordonare de tipul a, b, c, d etc. (litere mici);
"I" pentru ordonare de tipul I, II, III, IV etc. (cifre romane mari);
"i" pentru ordonare de tipul i, ii, iii, iv etc. (cifre romane mici);
"1" pentru ordonare de tipul 1, 2, 3, 4 etc. (cifre arabe - optiune
prestabilita);
Urmatorul exemplu este o lista ordonata cu cifre romane

<html>
<body><h1 align="center">O lista ordonata cu cifre
romane</h1><hr>
<ol type="I">Culori uzuale disponibile prin nume
<li>Purple <li>Aqua
</ol>
</body>
</html>
vezi acest exemplu
Tag-ul <ol> poate avea un atribut start care stabileste valoarea initiala a
secventei de ordonare.Valoarea acestui atribut trebuie sa fie un numar intreg
pozitiv.
28
Urmatorul exemplu este o lista ordonata cu litere mari, incepand de la

valoarea C.
<html>
<body><h1 align="center">O lista ordonata cu litere mari, incepand de
la valoarea C</h1><hr>
<ol type="A" start="3">Culori uzuale disponibile prin nume
<li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ol>
</body>
</html>
vezi acest exemplu
Tag-ul <li> poate avea un atribut value care satileste valoare pentru
elementul respectiv al listei. Valoarea acestui atribut trebuie sa fie un numar
intreg pozitiv (vezi urmatorul exemplu).
<html>
<body><h1 align="center">O lista ordonata avand itemi setati
individual</h1><hr>
<ol start="3">Repetati urmatorii pasi ai algoritmului
<li>salvati fisierul;
<li value="6">incarcati fisierul in browser;
<li>schimbati browserul utilizat
<li>incarcati din nou fisierul
</ol>
</body>
</html>
vezi acest exemplu
Listele ordonate pot fi imbricate intre ele sau cu liste neordonate, ca in

exemplul urmator.
<html>
<body><h1 align="center">O lista ordonata de liste ordonate si
neordonate</h1><hr>
<ol>Un sistem informatic include:
<li>Hardware:
<ol>
<li>placa de baza
<li>procesor
<li>memorie
29
<li>harddisk
</ol>
<li>Software:
<ul>
<li>Linux
<li>Windows
<li>OS/2
<li>Unix
</ul>
<li>Software de aplicatie:
<ul type="disc">
<li>VisualC++
<li>Java
<li>SQL
<li>CorelDraw
</ul>
</ol>
</body>
</html>
vezi acest exemplu
O lista de meniuri este un bloc delimitat de etichete corespondente

<menu>...</menu>. Fiecare element al listei este initiat de eticheta <li> (list
item). Cele mai multe browsere afiseaza lista de meniuri ca pe o lista
neordonata.
O lista de directoare este un bloc delimitat de etichete corespondente
<dir>...</dir> (de la " director "). Fiecare element al listei este initiat de eticheta
<li> (list item ). Cele mai multe browsere afiseaza lista de directoare ca pe o lista
neordonata.
(Nu se recomanda utilizarea acestori tipuri de liste).
Utilizari speciale ale listelor
Daca intr-o lista, in loc de elementele acesteia introduse prin <li>, se
insereaza un bloc de text, aceasta va fi indentat (intocmai ca elementele unei
liste).
<html>
<body><h1>Un bloc de text indentat</h1><hr>
<ol> Un bloc de text indentat. Un bloc de text indentat. Un bloc de text
indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text

indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text
indentat.
30
</ol>
</body>
</html>
vezi acest exemplu
In exemplul urmator lista de definitii are itemii <dt> si <dd> multipli.
<html>
<body><h1 align="center">O lista de definitii speciala</h1><hr>
<dl>Program
<dt><b>Luni</b>
<dt><b>Marti</b>
<dt><b>Miercuri</b>
<dd><i>Ora 9.00.</i>Insciere
<dd><i>Ora 11.00.</i>Audieri
<dd><i>Ora 13.30.</i>Raspunsuri
</dl>
</body>
</html>
vezi acest exemplu
Ultimul exemplu este o lista neordonata personalizata care utilizeaza

pe post de elemente imagini si texte.
<html>
<body><h1>O lista personalizata</h1><hr>
<ul>Tipuri de masini Volkswagen sunt:<br>
<img src="images/reddot.gif">Golf<br>
<img src="images/reddot.gif">Jetta<br>
<img src="images/reddot.gif">Passat<br>
<img src="images/reddot.gif">Bora<br>
<img src="images/reddot.gif">Corrado<br>
<img src="images/reddot.gif">Transporter<br>
</body>
</html>
vezi acest exemplu
8. Tabele
Tabelele ne permit sa cream o retea dreptunghiulara de domenii, fiecare
domeniu avand propriile optiuni pentru culoarea fondului, culoarea textului,
alinierea textului etc. Pentru a insera un tabel se folosesc etichetele
corespondente <table>...</table>. Un tabel este format din randuri. Pentru a
31
insera un rand intr-un tabel se folosesc etichetele <tr>...</tr> (de la " table row "=
rand de tabel). Folosirea etichetei de sfarsit </tr> este optionala.
Un rand este format din mai multe celule ce contin date.
O celula de date se introduce cu eticheta <td>..</td>.
<html>
<head><title>tabelex_1</title></head>
<body><h1 align=center>Un tabel simplu format din 4 linii si 2 coloane</h1><hr>
<table>
<tr> <td>cell 11</td> <td>cell 11</td></tr>
</table>
</body>
</html>
vezi acest exemplu
In mod prestabilit, un tabel nu are chenar. pentru a adauga un chenar unui
tabel, se utilizeaza un atribut al etichetei <tabel> numit border.
Acest atribut poate primi ca valoare orice numar intreg ( inclusiv 0 ) si reprezinta
grosimea in pixeli a chenarului tabelului. Daca atributul border nu este urmata de
o valoare atunci tabelul va avea o grosime prestabilita egala cu 1 pixel, o valoare
egala cu 0 a grosimii semnifica absenta chenarului. Cand atributul border are o
valoare nenula chenarul unui tabel are un aspect tridimensional.
<html>
<body><h1 align=center>Un tabel simplu cu chenar</h1><hr>
<table border="4">
</table>
</body>
</html>
vezi acest exemplu
Alinierea tabelului
Pentru a alinia un tabel intr-o pagina Web se utilizeaza atributul align al
etichetei <table>, cu urmatoarele valori posibile: " left " ( valoarea prestabilita ), "
center " si "right ". Alinierea este importanta pentru textul ce inconjoara tabelul.
Astfel :
32
daca tabelul este aliniat stanga ( <table align="left"> ), atunci textul care
urmeaza dupa punctul de inserare al tabelului va fi dispus in partea
dreapta a tabelului.
daca tabelul este aliniat dreapta ( <table align="right"> ), atunci textul care
urmeaza dupa punctul de inserare al tabelului va fi dispus in partea stanga
a tabelului.
daca tabelul este aliniat pe centru ( <table align="center"> ), atunci textul
care urmeaza dupa punctul de inserare al tabelului va fi afisat pe toata
latimea paginii, imediat sub tabel.
<html>
<body><h1 align=center>Un tabel aliniat la dreapta</h1><hr> Text inainte de
tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text
inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel.
Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de
inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel.
Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de
inainte de tabel. Text inainte de tabel.
<table border="0" align="right">
</table>
Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa
tabel.Text dupa tabel. Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa
tabel.Text dupa tabel.Text dupa tabel. Text dupa tabel.Text dupa tabel.Text dupa
tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel. Text dupa tabel.Text dupa
tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel. Text dupa
tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa
tabel. Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa
tabel.Text dupa tabel.
</body>
</html>
vezi acest exemplu
Daca schimbam alinierea tabelului la centru atunci exemplul anterior va
arata asa sau la stanga atunci va arata asa.
Distanta dintre tabel si celelalte elemente din pagina Web poate fi stabilita
cu ajutorul atributelor hspace si vspace al etichetei <table>. Valoarea atributului
hspace poate fi orice numar pozitiv, inclusiv 0, si reprezinta distanta pe orizontala
dintre tabel si celelalte elemente ale paginii Web. Valoarea atributului vspace
poate fi orice numar pozitiv, inclusiv 0, si reprezinta distanta pe verticala dintre
33
tabel si celelalte elemente ale paginii Web. Aceste atribute functioneaza numai
cu Netscape Communicator.
Exemplul cu aceste atribute gasiti aici.
Definirea culorilor de fond pentru un tabel
Culoarea de fond se stabileste cu ajutorul atributului bgcolor, care poate fi
atasat intregului tabel prin eticheta <table>, unei linii prin eticheta <tr> sau celule
de date prin eticheta <td>. Valorile pe care le poate primi bgcolor sunt cele
cunoscute pentru o culoare. Daca in tabel sunt definite mai multe atribute
bgcolor, atunci prioritatea este urmatoarea: <td>, <tr>, <table> ( cu prioritate cea
mai mica ).
<html>
<body><h1 align=center>Un tabel simplu colorat</h1><hr>
<table border="3" bgcolor="green">
<tr> <td>verde 11</td> <td bgcolor="red">rosu 11</td></tr>
<tr bgcolor="blue"> <td>albastru 21</td> <td bgcolor="yellow">galben
22</td></tr>
<tr bgcolor="cyan"> <td>cell 31</td> <td>cell 32</td></tr>
<tr> <td>cell 41</td> <td bgcolor="white">cell 42</td></tr>
</table>
</body>
</html>
vezi acest exemplu
Culoarea textului din fiecare celula se pote stabili cu ajutorul expresiei:
<font color="valoare">...</font>.
Dimensionarea celulei unui tabel
Distanta dintre doua celule vecine se defineste cu ajutorul atributului
cellspacing al etichetei <table>.Valorile acestui atribut pot fi numere intregi
pozitive, inclusiv 0, si reprezinta distanta in pixeli dintre doua celule vecine.
Valorea prestabilita a atributului cellspacing este 2.
<html>
<body><h1 align=center>Un tabel fara chenar de celule alipite</h1><hr>
<table cellspacing="0">
<tr> <td bgcolor="gray">gri 11</td> <td bgcolor="red">rosu 12</td></tr>
<tr bgcolor="blue"> <td>albastru 21</td> <td bgcolor="yellow">galben
22</td></tr>
34
</table>
</body>
</html>
vezi acest exemplu
Distanta dintre marginea unei celule si continutul ei poate fi definita cu
ajutorul atributului cellpadding al etichetei <table>.Valorile acestui atribut pot fi
numere intregi pozitive, si reprezinta distanta in pixeli dintre celule si continutul
ei. Valorea prestabilita a atributului cellpadding este 1.
<html>
<body><h1 align=center>Un tabel de celule mari</h1><hr>
<table border="0" cellpadding="20">
<tr> <td>gri 11</td> <td>rosu 12</td></tr>
<tr> <td>albastru 21</td> <td>galben 22</td></tr>
</table>
</body>
</html>
vezi acest exemplu
Dimensionarea unui tabel
Dimensiunile unui tabel - latimea si inaltimea - pot fi stabilite exact prin
intermediul a doua atribute, width si height, ale etichetei <table>. Valorile acestor
atribute pot fi:
numere intregi pozitive reprezentand latimea respectiv inaltimea in pixeli a

tabelului;
numere intregi intre 1 si 100, urmate de semnul %, reprezentand
fractiunea din latimea si inaltimea totala a paginii.
<html>
<body><h1 align=center>Un tabel de de 200 pixeli X 50 %</h1><hr>
<table border="0" width="200" height="50%">
</table>
</body>
</html>
vezi acest exemplu
In exemplul urmator se utilizeaza un truc care permite afisarea intr-o
pagina Web a unui text pozitionat in centrul paginii.
35
<html>
<body><h1 align=center>Un text centrat intr-o pagina</h1>
<table width="100%" height="100%">
<tr> <td align="center">
<h2>Text centrat.</h2>
</table>
</body>
</html>
vezi acest exemplu
Titlul unui tabel
Unui tabel i se poate atasa un titlu cu ajutorul etichetei <caption> (de la
"table caption" = titlu tabel). Aceasta eticheta trebuie plasata in interiorul
etichetelor <table>...</table>, dar nu in interiorul etichetelor <tr> sau <td> Titlul
unui tabel poate fi aliniat cu ajutorul atributului align al etichetei <caption> care
poate lua una dintre valorile:
" bottom " (sub tabel);

" top " (deasupra tabelului);
" left " (la stanga tabelului);
" right " (la dreapta tabelului).
<html>
<body><h1 align=center>Un tabel cu titlu</h1>
<table border="0"><caption align="top">Masini
<tr><td>Mercedes </td><td>Citroen </td><td>Jaguar </td></tr>
<tr><td>BMW </td><td>Volvo </td><td>Renault </td></tr>
</table>
</body>
</html>
vezi acest exemplu
Cap de tabel
Un tabel poate avea celule cu semnificatia de cap de tabel. Aceste celule
sunt introduse de eticheta <th> (de la " tabel header " = cap de tabel) in loc de
<td>. Toate atribute care pot fi atasate etichetei <td> pot fi de asemenea atasate
etichetei <th>. Continutul celulelor definite cu <th> este scris cu caractere aldine
si centrat.
<html>
<body><h1 align=center>Un tabel cu titlu si cap de tabel</h1>
36
<table border="0"><caption align="bottom">Preturile masinii

<tr><th>Pret</th>
<th>Citroen</th>
<th>Jaguar</th>
<th>BMW</th>
<th>Volvo</th></tr>
<tr><th>In dolari</th>
<td>5000</td>
<td>100000</td>
<td>50000</td>
<td>80000</td></tr>
<tr><th>In lei</th>
<td>15000</td>
<td>300000</td>
<td>150000</td>
<td>240000</td></tr>
</table>
</body>
</html>
vezi acest exemplu
Alinierea continutului unei celule
Alinierea pe orizontala a continutului unei celule se face cu ajutorul
atributului align care poate lua valorile:
" left " (la stanga);

" center " ( entrat , valoarea prestabilita);
" right " (la dreapta);
" char " (alinierea se face fata de un caracter).
Alinierea pe verticala a continutului unei celule se face cu ajutorul

atributului valign care poate lua valorile:
" baseline " (la baza);

" bottom " (jos);
" middle " (la mijloc, valoarea prestabilita);
" top " (sus).
Aceste atribute pot fi atasate atat etichetei <tr> pentru a defini tuturor
elementelor celulelor unui rand, cat si etichetelor <td> si <th> pentru a stabili
alinierea textului intr-o singura celula.
<html>
<body><h1 align=center>Un tabel avand continutul celulelor aliniate</h1>
37
<table border="0" width="50%" height="50%">

<tr align="right"><td>Aici</td> <td>alinierea</td><td>este
centru</td><td>dreapta</td></tr> <tr>
<td align="left">stanga</td>
<td align="center">centru</td><td valign="top">sus</td> <td
valign="bottom">jos</td></tr>
<tr align="left"><td>aici</td><td>alinierea</td> <td>este centru</td><td>stanga
(implicita)</td></tr> </table>
</body>
</html>
vezi acest exemplu
Dimensionarea exacta a celulelor unui tabel
Dimensiunea unei celule de tip <td> sau de tip <th> pot fi stabilite exact
cu ajutorul a doua atribute ale acestor etichete: width pentru latime si height
pentru inaltime. Valorile posibile ale acestor atribute sunt:
numere intregi pozitive ( inclusiv 0 ) reprezentand dimensiunea in pixeli a

latimii, respectiv a inaltimii unei celule;
procente din latimea , respectiv inaltimea tabelului.
<html>
<body><h1 align=center>Un tabel cu celule de 100x150 de pixeli</h1><hr>
<table border="0">
<tr> <td width="100" height="150">cell 11</td> <td width="100"
height="150">cell 11</td></tr>
<tr> <td width="100" height="150">cell 21</td> <td width="100"
height="150">cell 22</td></tr>
</table>
</body>
</html>
vezi acest exemplu
Tabele de forme oarecare
Un tabel trebuie privit ca o retea dreptunghiulara de celule.Cu ajutorul a
doua atribute ale etichetelor <td> si <th>, o celula se poate extinde peste celule
vecine.
Astfel:
extinderea unei celule peste celulele din dreapta ei se face cu ajutorul

atributului colspan, a carui valoare determina numarul de celule care se
unifica.
38
extinderea unei celule peste celulele dedesubt se face cu ajutorul

atributului rowspan, a carui valoare determina numarul de celule care se
unifica.
Sunt posibile extinderi simultane ale unei celule pe orizontala si pe

verticala. In acest caz, in etichetele <td> si <th> vor fi prezente ambele atribute
colspan si rowspan.
<html>
<body><h1 align=center>Un tabel simplu cu chenar</h1><hr>
<table border="0">
<tr> <td rowspan="3">cell 11</td><br>cell 21<br>cell 31</td> <td>cell
12</td><td colspan="2" rowspan="3">cell 13 ,cell 14</td><br>cell 23, cell
24<br>cell 33, cell 34</td></tr>
<tr> <td>cell 22</td></tr>
<tr> <td>cell 32</td></tr>
<tr> <td>cell 41</td> <td colspan="3">cell 42,cell 43,cell 44</td></tr>
</table>
</body>
</html>
vezi acest exemplu
Atributul " nowrap "
Atributul nowrap apartine elementelor <td> si <th> ; el interzice
intreruperea unei linii de text.Astfel , in tabel pot aparea coloane cu o latime
oricat de mare.
<html>
<body><h1 align=center>Un tabel cu celule de latime mare</h1><hr>
<table border="0">
<tr> <td nowrap>cell 21</td> <td>cell 22 este foarte lata,aceasta celula este
foaret lata.</td></tr>
</table>
</body>
</html>
vezi acest exemplu
Celule vide ale unui tabel
Daca un tabel are celule vide, atunci aceste celule vor aparea in tabel fara
un chenar de delimitare. In scopul de a afisa un chenar pentru celule vide se
utilizeaza urmatoarele trucuri:
39
dupa <td> se pune ;

dupa <td> se pune <br>.
Caracterul (no break space) este de fapt caracterul spatiu. Un

spatiu introdus prin im\ntermediul acestui caracter nu va fi ignorat de browser.
<html>
<body><h1 align=center>Un tabel cu celule vide</h1><hr>
<table border="0">
<tr> <td>cell 11<td> <td>cell 12</td><td>cell 13</td></tr>
<tr> <td> </td> <td></td></tr>
</table>
</body>
</html>
vezi acest exemplu
Atribute Internet Explorer pentru tabele
Urmatoarele atribute ale etichetei <table> functioneaza cu Internet
Explorer 4.0, 5.0, dar nu cu Netscape Communicator 4.5:
background permite stabilirea unei imagini pentru fondul unui

tabel.Primeste ca valoare adresa URL a imaginii folosite pentru fond;
bordercolor permite stabilirea culorii pentru chenarul unui tabel;
bordercolorlight permite stabilirea culorii pentru chenarul 3D al unui tabel;
bordercolordark permite stabilirea culorii pentru chenarul 3D al unui tabel;
<html>
<body><h1 align=center>Atribute "Internet Explorer"</h1><hr>
<table border="5" background=".../images/ubm1.jpg" cellspacing=15
bordercolor="maroon" bordercolodark="red">
<tr bgcolor="yellow"> <td>cell 11</td> <td>cell 12</td><td>cell 13</td></tr>
<tr bgcolor="yellow"> <td> </td><td></td> <td></td></tr>
</table>
</body>
</html>
vezi acest exemplu
Grupuri de coloane
Blocul <colgroup>...</colgroup> permite definirea unui grup de coloane.
Atributele acceptate de <colgroup> sunt:
span determina numarul de coloane dintr-un grup;
40
width determina o latime unica pentru coloanele din grup;

align determina un tip unic de aliniere pentru coloanele din grup.
Exemplu: <colgroup span="3" width="100"></colgroup>
Intr-un bloc <colgroup>, coloanele pot avea configurari diferite daca se

utilizeaza elementul <col>, care admite atributele:
span identifica acea coloana din grup pentru care se face

configurarea.Daca lipseste, atunci coloanele sunt configurate in ordine;
width determina o latime pentru coloana identificata prin span;
align determina o aliniere pentru coloana identificata prin span.
<html>
<body><h1 align=center>Grupuri de coloane</h1><hr>
<table width="400" cellspacing=10>
<colgroup> <col width="100" align=right> <col width="100" align=center> <col
width="200" align=right> </colgroup>
<tr> <td valign=top>Text in prima coloana.Text in prima coloana.Text in prima
coloana. Text in prima coloana.</td> <td valign=top>Text in coloana doua.Text in
coloana doua.Text in coloana doua.Text in coloana doua.</td> <td
valign=top>Text in coloana a treia.Text in coloana a treia.Text in coloana a
treia.Text in coloana a treia.</td></tr>
</table>
</body>
</html>
vezi acest exemplu
Atributele frame si rules
Atributul frame al etichetei <table> permite specificarea partilor din
chenarul unui tabel care vor fi afisate. Valorile posibile ale acestui atribut sunt:
void - elimina toate muchiile exterioare ale tabelului;

above - afiseaza o muchie in partea superioara a cadrului tabelului;
below - afiseaza o muchie in partea inferioara a cadrului tabelului;
hsides - afiseaza cate o muchie in partea superioara si inferioara cadrului
tabelului;
lhs - afiseaza o muchie in partea din stanga a cadrului tabelului;
rhs - afiseaza o muchie in partea din dreapta a cadrului tabelului;
vsides - afiseaza o muchie in partea din stanga si din dreapta a cadrului
tabelului;
box - afiseaza o muchie pe toate laturile cadrului tabelului;
border - afiseaza o muchie pe toate laturile cadrului tabelului;
41
Atributul rules al etichetei <table>permite alegerea unor delimitatori pentru

celulele unui tabel. Valorile posibile sunt:
none - elimina toate muchiile interioare ale tabelului;
groups - afiseaza muchii orizontale intre toate grupurile din tabel.
Grupurile sunt specificate prin elementele <thead>, <tbody>, <tfoot> si
<colgroup>.
rows - afiseaza muchii orizontale intre toate liniile tabelului;
cols - afiseaza muchii verticale intre toate coloanele tabelului;
all - afiseaza muchii intre toate liniile si coloanele;
<html>
<body><h1 align=center>Atributele frames si rules</h1>
<table width="400" frame=box rules=rows cellspacing=10>
<tr> <td>cell 11</td> <td>cell 12</td><td>cell 13</td></tr>
<tr> <td>cell 21</td> <td>cell 22</td><td>cell 23</td></tr>
</table>
</body>
</html>
vezi acest exemplu
Subblocurile unui tabel
In specificatiile HTML 4.0, continutul unui tabel poate fi impartit in
subblocuri prin elementele:
<thead><tr><td>...</thead> (un singur rand);

<tfoot><tr><td>...</tfoot> (un singur rand);
<tbody><tr><td>...</tbody> (oricate randuri);
Intr-un tabel exista un singur subbloc de tipul <thead> si un singur

subbloc de tipul <tfoot>, dar pot exista mai multe subblocuri de tip <tbody>.
9. Ferestre in HTML
Ferestrele sau (cadrele) ne permit sa definim in fereastra browserului
subferstre in care sa fie incarcate documente HT ML diferite.
Ferestrele sunt definite intr-un fisier HTML special, in care blocul

<body>...</body> este inlocuit de blocul <frameset>...</frameset>.
In interiorul acestui bloc, fiecare cadru este introdus prin eticheta <frame>.
Un atribut obligatoriu al etichetei <frame> este src, care primeste ca
valoare adresa URL a documentului HTML care va fi incarcat in acel
frame. Definirea cadrelor se face prin impartirea ferstrelor (si a
subferestrelor) in linii si coloane:
42
impartirea unei ferestre intr-un numar de subferestre de tip coloana

se face cu ajutorul atributului cols al etichetei <frameset> ce descrie
acea fereastra;
impartirae unei ferestre intr-un numar de subferestre de tip linie se
face cu ajutorul atributului rows al etichetei <frameset> ce descrie
acea fereastra;
valoare atributelor cols si rows este o lista de elmente separate prin
virgula, care descriu modul in care se face impartirea.
Elementele listei pot fi:
1. un numar intreg de pixeli;
2. procente din dimensiunea ferestrei (numar intre 1 si 99
terminat cu %);
3. n* care inseamna n parti din spatiul ramas;
Exemplu 1:
cols=200,*,50%,* inseamna o impartire in 4
subferestre, dintre care prima are 200 pixeli, a treia ocupa jumatate din
spatiul total disponibil, iar a doua si a patra ocupa in mod egal restul de
spatiu ramas disponibil.
Exemplu 2: cols=200,1*,50%,2* inseamna o impartire in 4
subferestre, dintre care prima are 200 pixeli, a treia ocupa jumatate din
spatiul total disponibil iar a doua si a patra ocupa in mod egal restul de
spatiu ramas disponibil, care se imparte in trei parti egale, a doua fereastra
ocupand o parte, iar a patra ocupand 2 parti.
Observatii:
- daca mai multe elemente din lista sun configurate cu *, atunci spatiul
disponibil ramas pentru ele se va imparti in mod egal.
- o subfereastra poate fi un cadru (folosind <frame>) in care se va incarca
un document HTML sau poate fi impartita la randul ei la alte subfereste
(folosind <frameset>).
<html>
<head><title>ferex_1</title></head>
<frameset cols="*,*">
<frame src="p1.html">
</frameset>
</html>
vezi acest exemplu
43
In exemplul urmator este creata o pagina Web cu trei cadre

orizontale. Pentru al doilea cadru valoarea atributului src este adresa URL
a unei imagini.
<html>
<frameset rows="100,*,10%">
<frame src="tiled.gif">
</frameset>
</html>
vezi acest exemplu
In exemplul urmator este creata o matrice de 4 cadre (2 x 2). Pentru

a realiza acest lucru, se folosesc simultan cele doua atribute cols si rows.
<html>
<frameset rows="*,*" cols="*,*">
</frameset>
</html>
vezi acest exemplu
In exemplul urmator este creata o pagina Web cu trei cadre mixte.

Pentru a o crea se procedeaza din aproape in aproape. Mai intai, pagina
este impartita in doua subferestre de tip coloana, dupa care a doua
subfereastra este impartita in doua subferestre de tip linie.
<html>
<frameset cols="20%,*">
<frameset rows="*,*">
</frameset>
</frameset>
</html>
vezi acest exemplu
44
Culori pentru chenarele cadrelor si dimensionarea chenarului unui cadru
Pentru a stabili culoarea chenarului unui cadru se utilizeaza atributul

bordercolor. Acest atribut primeste ca valoare un nume de culoare sau o culoare
definita in conformitate cu modelul de culoare RGB. Atributul bordercolor poate fi
atasat atat etichetei <frameset> pentru a stabili culoarea tuturor chenarelor
cadrelor incluse, cat si etichetei <frame> pentru a stabili culoarea chenarului
pentru un cadru individual. Atributul border al etichetei <frameset> permite
configurarea latimii chenarelor tuturor cadrelor la un numar dorit de pixeli.
Valoarea prestabilita a atributului border este de 5 pixeli. O valoare de 0 pixeli va
defini un cadru fara chenar.
<html>
<frameset cols="20%,*" bordercolor="green" border="15">
<frame src="p2.html" bordercolor="blue"> <frame src="p3.html">
</frameset>
</html>
vezi acest exemplu
Pentru a obtine cadre fara chenar se utilizeaza border="0".
In mod prestabilit, chenarul unui cadru este afisat si are aspect
tridimensional.Afisarea chenarului unui cadru se poate dezactivata daca se
utilizeaza atributul frameborder cu valoare "no". Acest atribut poate fi atasat atat
etichetei <frameset> (dezactivarea fiind valabila pentru toate cadrele incluse) cat
si etichetei <frame> (dezactivarea fiind valabila numai pentru un singur cadru).
Valorile
posibile
ale
atributului
frameborder
sunt:
"yes" -echivalent cu 1;
"no" -echivalent cu 0;
<html>
<head><title>ferex_5_1</title></head>
<frameset cols="20%,*" border="0">
</frameset>
</html>
vezi acest exemplu
<html>
<head><title>ferex_5_2</title></head>
<frameset cols="20%,*" frameborder="no">
45
</frameset>
</html>
vezi acest exemplu
Bare de defilare
Atributul scrolling al etichetei <frame> este utilizat pentru a adauga unui
cadru o bara de derulare care permite navigarea in interiorul documentului afisat
in interiorul cadrului. Valorile posibile sunt:
"yes" - barele de derulare sunt adaugate intotdeauna;

"no" - barele de derulare nu sunt utilizabile;
"auto" - barele de derulare sunt vizibile atunci cand este necesar
<html>
<frameset cols="*,*,*">
<frame src="p.html" scrolling="yes" noresize>
<frame src="p.html" scrolling="no" noresize>
<frame src="p.html" scrolling="auto" noresize>
</frameset>
</html>
vezi acest exemplu
Atributul noresize al etichetei <frame> (fara nici o valoare suplimentara)

daca este prezent, inhiba posibilitatea prestabilita a utilizatorului de a
redimensiona cadrul cu ajutorul mouse-ului.
Pozitionarea documentului intr-un cadru
Atributele marginheight si marginwidth ale etichetei <frame> permit
stabilirea distantei in pixeli dintre continutul unui cadru si marginile verticale,
respectiv orizontale ale cadrului. Valori posibile:
- numar de pixeli;
- procent din latimea, respectiv din inaltimea cadrului;
<html>
<frameset cols="*,*,*">
<frame src="p.html">
<frame src="p.html" marginheight=20>
<frame src="p.html" marginwidth=20>
46
</frameset>
</html>
vezi acest exemplu
Exista browsere care nu suporta cadre pentru aceasta se utilizeaza in
interiorul blocului <frameset> eticheta <noframes>. Daca programul de
navigare stie sa interpreteze cadre, va ignora ce se gaseste in aceasta portiune,
iar daca nu, materialul cuprins in zona <noframes>...</noframes> va fi singurul
care va fi inteles si afisat. De precizat este faptul ca intre <noframes> ...
</noframes> se pot introduce orice alte tag-uri HTML (inclusiv imagini, hiperlinkuri, tabele).
Cadre interne
Un
cadru
intern
este
specificat
prin
intermediul
blocului
<iframe>...</iframe>. Un cadru intern se insereaza intr-o pagina Web in mod
asemanator cu o imagine sau in modul in care se specifica marcajul <frame>,
asa cum rezulta din urmatorul exemplu:
<iframe src="ferex_8.html" height=40% width=50%> </iframe>
In acest caz, am specificat ca doresc o fereastra de cadru intern care are
40%din inaltimea si 50% din latimea paginii curente.
Atributele aceptate de eticheta <iframe> sunt in parte preluate de la
etichetele <frame> si <frameset>, cum ar fi: src, border, frameborder,
bordercolor, marginheight, marginwidth, scrolling, name, noresize;
sau de la eticheta <img> vspace, hspace, align, width, height;
<html>
<head><title>ferex_8</title> </head>
<body>
<a href="p1.html" target="icad">
Fisierul1</a><br> <a href="p2.html" target="icad">
Fisierul2</a><br> <a href="p3.html" target="icad">
Fisierul3</a><br> <a href="p.html" target="icad">
Home</a><br> <center><iframe width="60%" height="50%" border=2
bordercolor=red name="icad" src="p.html"> Daca vedeti acest text inseamna ca
browserul dumnevoastranu suporta cadre interne. Ar fi preferabil sa reveniti,
folosind Netscape Navigator versiune 4.0 (/ulterioara) sau I.Explorer 4.0.
(/ulterioara)
<a href="p0.html">Pagina fara cadre interne</a> </iframe></center>
</body>
</html>
vezi acest exemplu
47
Tinte pentru legaturi

In mod prestabilit, la efectuarea unui clic pe o legatura noua pagina (catre
care indica legatura) o inlocuieste pe cea curenta in aceeasi fereastra (acelasi
acdru). Acest comportament se poate schimba in doua moduri:
prin plasarea in blocul <head>...</head> a unui element <base> care
precizeaza,prin atributul target numele ferestrei (cadrului) in care se vor
incarca toate paginile noi referite de legaturile din pagina curenta conform
sintaxei:
<base target="nume_ferastra/frame_de_baza">
prin plasarea in eticheta <a> a atributului target, care precizeaza numele
ferestrei (cadrului) in care se va incarca pagina nou referita de legatura,
conform sintaxei:
<a href="legatura" target="nume_fereastra/frame">...</a>
Observatie:
- daca este prezent atat un atribut target in <base> cat si un atribut target
in <a>, atunci cele precizate de atributul target din <a> sunt prioritare.
Numele unui cadru este stabilit prin atributul name al etichetei <frame>
conform sintaxei: <farme name="nume_frame">
In exemplul urmator este prezentata o pagina Web cu doua cadre.Toate
legaturile din cadrul 1 incarca paginile in cadrul 2.
<html>
<head><title>ferex_9_frames</title></head>
<frameset cols="20%,*">
<frame src="left.html" name="left">
<frame src="p.html" name="main">
</frameset>
</html>
<html>
<head><title>ferex_9_left</title> </head>
<body>
<a href="p1.html" target="main">
Fisierul1</a><br> <a href="p2.html" target="main">
Fisierul2</a><br> <a href="p3.html" target="main">
Fisierul3</a><br><br> <a href="p1.html" target="_blank">
Fis1 intr-o fereastra noua</a><br><br> <a href="p1.html" target="_self">
Fis1 in fereastra curenta</a><br><br> <a href="p.html" target="main">
Home</a><br>
</body>
</html>
vezi acest exemplu
48
Valori pentru atributul target

Atributul target al etichetei<frame> accepta anumite valori predefinite de o
valoare deosebita pentru creatorii de pagini Web.aceste valori sunt:
"_self" (incarcarea noii pagini are loc in cadrul curent);

"_blank" (incarcarea noii pagini are loc intr-o fereastra noua anonima);
"_parent" (incarcarea noii pagini are loc in cadrul parinte al cadrului curent
daca acesta exista, altfel are loc in fereastra browserului curent);
"_top" (incarcarea noii pagini are loc in fereastra browserului ce contine
cadrul curent);
11. Stiluri
Stilurile pun la dispozitia creatorilor de site-uri noi posibilitati de

personalizare a paginilor Web. Un stil reprezinta un mod de a scrie un bloc de
text (adica anumite valori pentru font, marime culoare, aliniere, distante fata de
margini etc). Exista doua modalitati de a defini un stil:
sintaxa CSS (Cascading Style Sheets);

sintaxa Javascript.
Cascading Style Sheets inseamna "foi in stilul cascada".
Stiluri dedicate
Aceste stiluri se aplica blocurilor de text pentru care sunt definite. De

exemplu:
<style>
h1 {text-align:center; color:red;}
</style>
Toate titlurile care apar in fgisier ca fiind de marime 1 vor fi de culoare
rosie si centrate. Daca dorim ca acelasi stil sa fie utilizat de catre mai multe
elemente (de ex. "h1", "h2", si "p") atunci se utilizeaza o lista acestor elemente,
separate prin virgula:
<style>
h1, h2, p {text-align:center; color:red;}
</style>
49
Clase de stiluri
Aceste stiluri permit definirea unui stil general si folosirea lui oriunde este
necesar.
Exemplu:
Definim o clasa de stiluri "ac" (albastru si centrat) in interiorul blocului
<style>...</style>, aflat la randul lui in blocul <head>...</head>:
<style>
all.ac {text-align:center; color:blue;}
</style>
Daca dorim ca un titlu de marimea 2 sa foloseasca clasa de stiluri "ac"
atunci scriem:
<h2 class = ac>Acesta este un header de marime 2 albastru si centrat</h2>
- "all" aflat in fata clasei de stiluri "ac" indica faptul ca aceasta clasa este
aplicabila tuturor blocurilor de text, atunci cand acest lucru este necesar.
La utilizarea clasei de stiluri in cadrul unui element se foloseste atributul class
avand ca valoare numele clasei de stil. Acesta este un atribut universal adica
este aplicabila tuturor elementelor. Observatii:
In interiorul unui bloc <style>...</style>, comentariile sunt blocuri
delimitate de /* si */ (ca in C, C++, Java si Javascript).
Daca dorim ca o clasa de stiluri sa fie aplicabila numai pentru anumite
elemente ale documentului (de exemplu "p") atunci in consturctia va aparea
acest element (de exemplu "p.rc").
<html>
<head><title>clasa de stiluri dedicata</title>
<style> p.ac {text-align:center; color:blue;} </style>
</head>
<body> <p>Acesta este un paragraf normal
<br> <p class=ac>Acesta este un paragraf albastru si centrat
</body>
</html>
vezi acest exemplu
Stiluri " identificate "
Toate elementele unui document admite un atribut universal numit id.
Atributul id poate identifica stilul utilizat de un element. Pentru a utiliza un stil
"identificat" procedati astfel:
50
in blocul <style>...</style> introduceti definitia stilului conform sintaxei:

<style>
#rosu { color: red }
</style>
in elementul in care se doreste utilizarea locala a acestui stil , folositi

atributul id care primeste valoare numele stilului definit anterior.
Daca dorim ca un stil "identificat" sa fie aplicabil numai pentru anumite
elemente ale documentului (de exemplu "h2") atunci in constructia
selectorului va aparea acest element (de exemplu "h2#ac").
Stiluri in-line
Stilurile in-line sunt definite chiar in eticheta ce initiazablocul in care dorim

sa se aplice aceste stiluri. Pentru aceasta se utilizeaza atributul universal style
(comun practic tuturor etichetelor ce par intr-un document HTML). Valoarea data
atributului style este tocmai descrierea stilului, cuprinsa nu intre acolade {..} ci
intre ghilimele "...".
De exemplu:
<h2 style = " color: red; text-align: center;">
Acest header de marimea 2 este de culoare rosie si este centrat.</h2>
Daca dorim utilizarea unui anumit style pentru un fragment de text, atunci
includem acest text intr-un bloc cu ajutorul delimitatorilor <span>...</span>,
dupa care utilizam atributul style pentru eticheta <span>.
Stiluri definite in fisiere externe
Stilurile definite in interiorul unui bloc <style>...</style> pot fi transferate
intr-un fisier extern existand astfel posibilitatea utilizarii lor in mai multe fisiere
HTML. Pentru a utiliza un stil definit intr-un fisier extern se procedeaza astfel:
1. Se creaza un fisier care sa contina numai descrierea stilurilor si se
salveaza cu extensia .css sau .html. Continutul acestui fisier coincide cu
continutul unui bloc <style>...</style> , fara ca acesti delimitatori sa fie
inclusi.
2. In fisierul HTML care utilizeaza stilurile definite in fisierul creat la punctul
1 , se include in blocul <head>...</head> o eticheta <link>avand trei
atribute.
o atributul relcu valoarea "stylesheet"
o atributul href avand ca valoare adresa URL a fisierului creat la
punctul 1 ;
o atributul type cu valoarea "text/css".
51
Se utilizeaza titlurile definite in fisierul extern ca si cum ar fi definite in

fisierul HTML curent intr-un bloc <style>...</style>.
Pseudoclase
Pseudoclasele se utilizeaza pentru personalizarea legaturilor. Ele se
definesc in blocul <style>...</style> sau intr-un fisier extern, conform sintaxei:
a: link {color: black; font-size: 20pt}
a: activate {color: blue; font-style: italic}
a: visited {color: cyan; text-decoration: none}
Pentru ca numai anumite legaturi sa utilizeze un stil se pot folosi
urmatoarele doua metode:
a: link.CLASA1 {...} combinat cu <a class = CLASA1 href=" "> ...</a>

a: link#ID1 {...} combinat cu <a id = ID1 href=" "> ...</a>
Atentie!!! Acest exemplu lucreaza doar cu browsere Internet Explorer 4.x sau mai
mare!
In browsere cursorul mouse-ului are in general o forma simpla, luaind pe
parcursul vizionarii paginii respective maximum doua infatisari diferite:
1. Mana - atunci cand este pozitinat pe o legatura
2. Bara verticala - atunci cand este pozitionat pe alt obiect decat o legatura.
Acestea insa sunt formele implicite. Desigur exista cazuri in care am dori
ca browser-ul sa aiba o alta forma decat una dintre acestea. La fel ca multe alte
probleme care privesc modul in care o pagina arata si aceasta isi gaseste
rezolvarea in folosirea CSS, ca limbaj de descriere a formei unui document.
Proprietatea care gestioneaza forma cursorului se numeste simplu: cursor si
poate fi introdusa in orice element style al unui tag html.
De exemplu pentru obtinerea unei imagini a cursorului de tipul unei sageti
orientata Est-Vest la trecerea mouse-ului peste un link iata codul ce va trebui
folosit:
< a href=" fisier.html" style=" cursor :e-resize" " Legatura< /a>
Iata deci cum va arata (doar pentru IE 4.x sau mai mare):
Legatura
Nu este, insa singurul exemplu, in continuare aveti toate codurile pentru
formele de cursor pe care le puteti folosi:
auto
utilizeaza setarile implicite ale utilizatorului

52
crosshair creeaza o cruce

default
setarile implicite ale browserului
e-resize
sageata Est-Vest
hand
mana
help
semnul intrebarii
move
cruce cu sageti la capete
n-resize
sageata sud-nord
ne-resize sageata SudVest - NordEst

nw-resize sageata SudEst - NordVest
pointer
mana
s-resize
sageata Nord - Sud
se-resize sageata NordVest - SudEst

sw-resize sageata NordEst - SudVest
text
bara verticala din campurile de introducere a datelor
w-resize
sageata Est-Vest
wait
clepsidra
12. Javascript
Javascript este un limbaj de programare simplu, de tip script, pentru
definirea comportamentului elementelor dintr-o pagina Web. Nu este acelasi
lucru cu mult mai complexul limbaj de programare Java. Javascript poate
specifica, in mod obisnuit in doar cateva randuri , raspunsurile la actiuni sau
evenimente cum ar fi deschiderea unei pagini, deplasarea mouse-ului intr-un
anumit punct sau stergerea unui anumit camp dintr-un formular.
Cea mai simplas aplicatie Javscript este aceea care determina apariria si
derularea unui mesaj:
<html>
<head><script language="Javascript">
<!-alert (" Apasati OK ! ")
-->
</script></head>
<body> O fereastra cu mesaj !!! </body>
</html>
vezi acest exemplu
53
Scriptul este incadrat de marcajele <script>...</script> si totul este

inglobat intr-un comentariu astfel incat programele de navigare care nu
interpreteaza Javascript nu sunt derutate de scriptul in sine.
Multe evenimente pot fi gestionate cu Javascript.
Eveniment
Se desfasoara atunci cand
Handler de
eveniment
blur
utilizatorul elimina controlul de intare de pe un

element al unui formular
click
utilizatorul executa un click pe un element al unui

onClick
formular sau pe o legatura
change
utilizatorul modifica valoarea unui text zona de

text sau element de selectie
onChange
focus
utilizatorul atribuie unui element de formular

control de intrare
onFocus
load
utilizatorul incarca pagina in progarmul de

navigare
onLoad
mouseover
utilizatorul deplaseaza indicatorul mouse-ului

deasupra unei legaturi sau a unei ancore
onMouseover
select
utilizatorul selecteaza campul de intare al unui

element de formular
onSelect
submit
utilizatorul transmite un formular
onSubmit
unload
utilizatorul abandoneaza pagina
onUnload
onBlur
In urmatorul exemplu folosim evenimentul click.

<form action="" method="get"> <input type="button" value="Apasa!"
onClick="alert('Hello!')"> </form>
Acest exemplu citeste numele si il saluta.
Un alt exemplu care modifica culoarea de fond a paginii.
In exemplul urmator modificam o imagine atunci cand cursorul este
pozitionat pe aceasta. Elementul cheie este acela ca exista doua versiuni alle
fiecarei imagini: imaginea "on" (corespunzatoare cursorului pozitionat deasupra
imaginii) si o imagine "off" (corespunzatoare cursorului pozitionat in exteriorul
imaginii).
Incercati acest exemplu.
54
Elementul esential in acest exemplu este modul in care se pun in

corespondenta evenimentele de activare si dezactivare cu evenimentele
specifice: OnMouseOver si OnMouseOut. Primul invoca procedura Javascript
activate atunci cand mouse-ul este plasat deasupra imaginii, iar cel de-al al
doilea comuta imaginea la situatia initiala atunci cand mouse-ul este in exteriorul
acesteia.
Urmatoarele exemple sunt putin mai complicate.
Primul este un ceas digital.Al doilea un fisier cu meniuri popup.
Continut
[ Home ] Ce este HTML? Primii pasi Fonturi Blocuri de text Imagini Legaturi Liste
Tabele Ferestre in HTML Formulare Stiluri
Javascript
Tag-uri Forum
55
13. Tag-uri
Marcaje de baza
<HTML> </HTML>
Defineste un fisier in format Web
<HEAD> </HEAD>
Antetul documentului
<TITLE> </TITLE>
Tilul documentului
<BODY> </BODY>
Corpul paginii HTML
BGCOLOR = culoare
Culoarea de fond a paginii
TEXT=culoare
Culoarea textului pe paginii
LINK=culoare
Culoarea legaturiilor nevizitate din paginii
VLINK=culoare
Culoarea legaturiilor vizitate din paginii
ALINK=culoare
Culoarea legaturiilor pe durata clicului exacutat

de utilizator
BACKGROUND = url
Imaginea de fond pentru pagina
<P>
Paragraf
<Hn> <Hn>
Nivel de subtitlu al documentului (n = 1-6)
<FONT> </FONT>
Specifica atribute ale textului incadrat
SIZE=n
Dimensiunea textului este 1-7
FACE="a,b"
Specifica fontul: a, daca este disponibil, sau b
COLOR=s
Culoarea textului: fie un nume de culoare , fie o

valoare RGB
<BR>
Linie noua
<PRE> </PRE>
Informatie preformatata

Comenatriu HTML
<CENTER>
</CENTER>
Centreaza materialul in pagina
<HR>
Rigla orizontala
SIZE=x
Inaltimea riglei in pixeli
WIDTH=x
Latimea riglei in pixeli sau in procente
NOSHADE
Dezactiveaza afisarea umbrei pentru rigla

56
orizontala
ALIGN=x
Alinierea riglei orizontala in pagina (left, center,

right)
COLOR=x
Culoarea riglei orizontale(numai pentru IE)
<A> </A>
Marcaj de tip ancora
HREF=url
Referinta hipertext
HREF=#nume
Referinta catre o ancora interna
Name=nume
Definitia unei ancore interne
Marcaje pentru liste

<DD>
Descriere definitie
<DL> </DL>
Lista de tip definitie
<DT>
Termen de definitie
<LI>
Element de lista
<OL
Lista ordonata (numerotata)
TYPE=tip
Tipul numerotarii. Valori posibile: A, a, I, i, 1
START=x
Numarul de inceput al listei ordonate
<UL
Lista neordonata (marcata)
TYPE=forma
Forma marcajului. Valori posibile: circle, square, disc.
Formatarea caracterelor
<B> </B>
Afiseaza text cu caractere aldine
<I> </I>
Afiseaza text cu caractere cursive
<U> </U>
Afiseaza text subliniat
<TT> </TT>
Text cu font monospatiu
<CITE> </CITE>
Citare bibliogarfica
<CODE> </CODE>
Listing de program
57
<EM> </EM>
Stil logic de evidentiere
<KBD> </KBD>
Text de la tastatura
<STRONG>
</STRONG>
Evidentiere logica puternica
<VAR> </VAR>
Program sau variabila
<BASEFONT SIZE = n>
Specifica dimensiunea implicita a fontului din

pagina
Marcaje pentru cadre

<FRAMESET>
</FRAMESET>
Definirea redactarii paginii
COLS=x
Numarul si marimea relativa a coloanelor
ROWS=x
Numarul si marimea relativa a liniilor
BORDER=x
Specifica starea "on" (activa) sau "off" (inactiva)

pentru chenarul cadrului FRAMESET (1 sau 0)
FRAMEBORDER = x
Specifica marimea chenarului
FRAMESPACING = x
Marimea spatiului dintre doua cadre adiacente
<FRAME>
Definitia unui anumit cadru
SRC=url
URL-ul sursa pentru cadru
NAME=nume
Numele cadrului (utilizat impreuna cu

TARGET=nume ca parte componenta a
marcajului de tip ancora <a>
SCROLLING=scrl
Defineste optiunea barei de derulare.Valori

posibile: on(activa), off(inactiva), auto (automat)
FRAMEBORDER=x
Marimea chenarului din jurul cadrului
MARGINHEIGHT=x
Spatiul suplimentar de deasupra si dedesubtul

unui anumit cadru
MARGINWIDTH=x
Spatiu suplimetar la stanga si la dreapta unui

anumit cadru
<NOFRAMES>
</NOFRAMES>
Sectiunea de pagina afisata pentru utilizatorii

care nu pot vedea un cadru
58
<IFRAME>
Cadru intern (numai pentru (IE)
SRC=url
Sursa cadrului
NAME=s
Numele ferestrei (util pentru TARGET)
HEIGHT=x
Inaltimea cadrului inglobat
WIDTH=x
Latimea cadrului inglobat
Marcaje pentru tabele

<TABLE> </TABLE>
Tabel HTML
BORDER=x
Chenarul tabelului
CELLPADDING=x
Spatiul suplimentar in cadrul celulelor

tabelului
CELLSPACING=x
Spatiul suplimentar intre celulele tabelului
WIDTH=x
Latimea impusa tabelului
FRAME=valoare
Ajustarea fina a tabelului
RULES=valoare
Ajustarea fina a riglelor tabelului
BORDERCOLOR = culoare Specifica culoarea chenarului tabelului

BORDERCOLORLIGHT =
culoare
Cea mai deschisa culoare din cele doua

culori specificate
BORDERCOLORDARK =
culoare
Cea mai inchisa culoare din cele doua

culori specificate
ALIGN=left
Aliniaza tabelul la marginea din stanga a

paginii, iar textul curge in partea dreapta
ALIGN=right
Aliniaza tabelul la marginea din dreapta a

paginii, iar textul curge in partea stanga
HSPACE=x
Spatiu suplimetar pe orizontala in jurul

tabelului
VSPACE=x
Spatiu suplimetar pe verticala in jurul

tabelului
COLS=x
Specifica numarul de coloane ale unui tabel
<COLGROUP>
Defineste un set de definitii de coloane cu
59
</COLGROUP>
ajutorul marcajului <col>
<COL WIDTH=x>
Defineste latimea unei coloane exprimata in

pixeli
<THEAD> </THEAD>
Defineste titlul tabelului
<BODY> </TBODY>
Defineste corpul tabelului
<TR </TR>
Linie de tabel
BGCOLOR=culoare
Specifica culoarea de fond pentru intreaga

linie
ALIGN=aliniere
Alinierea celulelor de pe linia curenta (left,

center, right)
<TD </TD>
Celula de date a tabelului
BGCOLOR=culoare
Specifica culoarea de fond pentru celula de

date
COLSPAN=x
Numarul de coloane pe care se intinde

celula curenta de date
ROWSPAN=x
Numarul de linii pe care se intinde celula

curenta de date
ALIGN=aliniere
Alinierea materialului din cadrul celulei de

date.Valori posibile: (left, right, center)
VALIGN=aliniere
Alinierea pe verticala a materialului din

cadrul celulei de date.Valori posibile: (top,
bottom, middle)
BACKGROUND=url
Specifica imaginea de fond pentru celula

tabelului
NOWRAP
Nu permite despartirea textului pe linii in

cadrul unei celule
ALIGN=baseline
Aliniaza celule de date cu linia de baza a

textului adiacent
ALIGN=caracter
Aliniaza o coloana fata de un anumit

carcater (caracterul prestabilit este ".")
ALIGN=justify
Aliniaza atat marginea din stanga cat si

marginea din dreapta a unui text
60
Adaugarea imaginilor
<IMG
Marcajul de introducere a imaginilor
SRC=url
Sursa fisierului grafic
ALT=text
Textul alternativ de afisat, daca este necesar
Alinierea imaginii in pagina. Valori posibile: top (sus),

ALIGN=aliniere middle(in mijloc), bottom (jos), left (in stanga), right (la
dreapta)
HEIGHT=x
Inaltimea imaginii (in pixeli)
WIDTH=x
Latimea imaginii
BORDER=x
Chenarul din jurul imaginii, atunci cand aceasta este

utilizata ca hiperlegatura
HSPACE=x
Spatiul suplimentar pe orizontala din jurul imaginii (in

pixeli)
VSPACE=x
Spatiul suplimentar pe verticala din jurul imaginii (in

pixeli)
Marcaje pentru formulare

<FORM> </FORM>
Formular HTML activ
ACTION=url
Programul CGI de pe serverul care receptioneaza

datele
METHOD=metoda
Modul in care datele sunt transmise

serverului(GET sau POST)
<INPUT
Camp de text sau alte date de intrare
TYPE=optiune
Tipul campului de intrare <INPUT>. Valori

posibile: text,password,checkbox,hidden,file,
radio,submit,reset,image.
NAME=nume
Numele simbolic al valorii campului
VALUE=valoare
Continutul prestabilit al campului de text
CHECKED= optiune
Buton/caseta marcata in mod prestabilit
SIZE=x
Numarul de caractere al unui camp de text
SIZE=x
Numarul maxim de caractere acceptate

61
<SELECT>
</SELECT>
Grup de casete de validare
NAME=nume
SIZE=x
Numarul de articole de meniu care se afiseaza

odata (prestabilit=1)
MULTIPLE=x
Permite selectia unor articole de meniu multiple
<OPTION
Alegerea particulara intr-un domeniu <SELECT>
VALUE=valoare
Valoarea rezultanta a acestei selectii din meniu
<TEXTAREA>
</TEXTAREA>
Camp de intare de tip text pe linii multiple
NAME=nume
ROWS=x
Numarul de linii al casetei de text
COLS=x
Numarul de coloane (caractere) pe linie al casetei

de text
<FIELDSET>
</FIELDSET>
Imparte formularul in parti logice
<LEGEND>
</LEGEND>
Numele asociat setului de campuri (fieldset)
ALIGN=s
Specifica alinierea legendei (explicatiei) afisate

(top,bottom,left,right)
TABINDEX=x
Specifica ordinea elementelor atunci cand

utilizatorul apasa tasta Tab
ACCESKEY=c
Specifica tasta care asigura comanda rapida de la

tastatura asociata unui anumit element
DISABLED
Elementul este inactiv, dar este afisat pe ecran
READONLY
Elementul este afisat pe ecran dar nu poate fi

editat
Carcatere speciale
&
& ampersand
tilda
62
<
mai mic (less than)
>
mai mare (greater than)
simbolul de copyright
simbolul pentru marca inregistrata
a mic cu accent ascutit (acute)
a mic cu accent circiumflex
n mic cu tilda
o mic barat (slash)
HTML avansat
<STYLE> </STYLE>
Specifica informatii referitoare modelul de stiluri
TYPE=val
Tipul modelului de stiluri. De regula "text/css"
<SCRIPT>
</SCRIPT>
Include un script de regula Javascript, in pagina

Web
LANGUAGE=limbaj
Limbajul utilizat
EVENT=eveniment
Eveniment care declanseaza executia unor

scripturi specifice
FOR=numeobiect
Numele obiectului din pagina asupra caruia

actioneaza scriptul
63

Documentatie HTML

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Documentatie HTML

Загружено:

Авторское право:

Доступные форматы

1. Ce este HTML?

proiectat de Tim Berners-Lee). Importanta actiunii acestui grup consta in faptul

atita vreme cit navigatoarele afiseaza acelasi document oarecum diferit, in

Coninutul blocului <title>...</title> va aparea n bara de titlu a ferestrei

O eticheta poate avea mai multe atribute. De exemplu, o eticheta cu trei

<title>atribute multiple </title>

Textul afisat este caracterizat de urmatoarele atribute: Marime (size),

numar - poate fi 1, 2, 3, 4, 5, 6 sau 7; (1 pentru fontul cel mai mic si 7

Domeniul de valabilitate al caracteristicelor precizate de aceasta eticheta

Stiluri pentru blocurile de text

In exemplul urmator vom utiliza toate etichetele mentionate anterior.

Stiluri fizice i logice

Am prezentat deja 8 stiluri de scriere a caracterelor unui bloc de text,

<code>...</code> ("code" inseamna cod sau sursa);

Eticheta de tip bloc <blink>...</blink> delimiteaz fragmenete de text

Exemplul urmtor ilustreaz ca etichetele pot fi imbricate.

un fragment de text poate fi scris cu aldine si cursive in acelsi timp;

Blocul <q>...</q> permite inserarea in-line a citatelor. Aceste citate sunt

culoare (stabilita prin atributul color);

Toate aceste atribute apartin etichetei, care permite inserarea de blocuri

1, 2, 3, 4, 5, 6, 7 (1 pentru cel mai mic font si 7 pentru cel mai mare);

Mrimea unui font poate fi stabilit exact cu ajutorul atributului point-size.

Aceste linie este scrisa cu caractere normale. <br>

Grosimea unui font

Aceste linie este scrisa cu caractere normale. <br>

Inserarea unei adrese

Adresa institutiei noastre este :<address> Colegiul Universitar<br>

Indentarea unui bloc

refera la particularitatiile caracterelor ce compun textul, ci la functiile pe

<title> Bloc preformatat</title>

ntr-un fiier HTML, caracterele "<" si ">" au o semnificatie special pentru

<xmp>...</xmp> (80 de caractere pe rand);

Un fisier html standard arata astfel: <xmp> <html>

O pagina Web ...

inserarea unui spaiu suplimentar nainte de blocul paragraf;

inserarea unui spaiu suplimentar dup blocul paragraf, dac se folosete

titlu cu caractere mai mari i aldine, pe cnd <h6> folosete caracterele

alinierea stanga, latime 100%, grosime 2 cu umbra.

Urmeaza o linie aliniata in centru , de latime 50%, grosime 5 pixeli , fara

singura linie. O singura linie.O singura linie.O singura linie.O singura

" left " (aliniere la stnga);

Un bloc <div>...</div> poate include alte subblocuri. n acest caz,

Aceasta linie este o linie normala.Urmatorul bloc este aliniat la dreapta.

O singura linie.O singura linie.O singura linie.O singura linie.<br>

Bloc aliniat pe centru.Bloc aliniat pe centru.<br>

GIF (Graphics Interchange Format) cu extensia .gif;

care contine o imagine

Chenarul i dimensionarea unei imagini

imagine cu chenar si de 200 pixeli X 15 %

Alinierea unei imagini

Alinierea textului in jurul imaginii

la stanga inconjurata de text la distanta de 30 de pixeli.

Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa

Imagini pentru fondul unei pagini

Imagini folosite ca legaturi

Text dupa imagine.

Utilizri speciale ale imaginilor

O legatur ctre o pagin aflat pe acelai disc local

O legatur ctre un site particular

<title> Link catre site-ul firmei Netscape</title>

Ancore definite prin atributul id

Aceste atribute pot fi stabilite cu ajutorul a trei atribute ale etichetei

Utilizarea postei electronice

pe calculator sa fie instalat o aplicatie de expediere a mesajelor

dupa <td> se pune ;

Caracterul (no break space) este de fapt caracterul spatiu. Un