HTML

DOCUMENTE HTML
CE ESTE UN DOCUMENT HTML?

Pentru realizarea pag. Web s-a cautat o modalitate care sa permita scrierea de documente de
mici dimensiuni si care sa poata fi utilizate pe orice ehipament hardware.
Fisierele text sunt cele mai potrivite pentru acest scop, dar a fost necesara introducerea unor
marcaje denumite tag-uri , care sa ,,spuna browserului Web cum sa afiseze informatia. Acest
limbaj de marcaje poarta numele de HTML (Hypertext Markup Language- limbaj de marcare a
hypertextului) si permite realizarea de :
documente independente de platforma
legaturi cu alte documente. din retea
inserare de grafica, sunet si imagini video
interactivitate intre cititorul paginii Web si aplicatia realizata de autor(formulare,
chestionare etc.)
introducerea de mici programe executabile (appleturi Java)
Imaginea unei pagini poate diferi de la un browser la altul (nu semnificativ).
Ca realizator de pagini web trebuie sa se tina seama de toate diferentele dintre navigatoate si sa
se creeze un document care sa poata fi citit indiferent de platforma.
Un document HTML poate fi scris intr-un editor ASCII si vizualizat cu un browser web sau
intru-un editor specializat in pagini web ( pentru puturosi !!!).
Pentru incepatori este recomandat sa se foloseasca un editor ASCII (ex. Notepad) pentru a se
deprinde cu utilizarea marcajelor.
TAGURI HTML. STRUCTURA UNUI DOCUMENT HTML.
Marcajele sunt de doua feluri :
marcaje container (container tags)- specifica formatul in care va fi afisat textul continut
intre taguri.
marcaje vide (empty tags) specifica introducerea unor anumitor elemente (paragrafe,
sfarsit de linie, trasare de linii orizontale etc)
marcajele container sunt de forma :

<TAG></TAG> , unde <TAG> marcheaza inceputul unui bloc si </TAG> marcheaza sfarsitul
unui bloc.
marcajele vide au forma :
<TAG>
STRUCTURA UNUI DOCUMENT HTML
Structura unui document HTML este urmatoarea :
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Documentul este delimitat de TAG-urile <HTML> </HTML> si este formet din 2 parti :
antet (capul) care contine titlul documentului
corpul care contine continutul documentului
Titlul documentului este afisat de navigator pe bara de titlu a ferestrei.
Cel mai simplu document HTML este urmatorul :
<HTML>
<HEAD>
<TITLE>Primul document HTML
</TITLE>
</HEAD>
<BODY>Acesta este primul document HTML!!!!
</BODY>
</HTML>
si care are ca efect afisarea in fereastra navigatorului a textului cuprins in corpul
documentului, dupa cum puteti vedea in Exemplul 1 .
Introducerea unui comentariu in document se face astfel:
<-Acesta este un comentariu in pagine Web
-->
CUM REALIZAM ACEST DOCUMENT?
1. Deschideti un editor Ascii , de ex. Notepad.
2. Scrieti codul sursa si salvati documentul cu un nume si extensia .html intr-un director
creat in prealabil.
3. Executati dublu click asupra icon-ului. Se va lansa browser-ul care va afisa fisierul
4. Identificati noile etichete folosind optiunea View Source sau deschizand fisierul cu
editorul Notepad.
Un document HTML are extensia .html sau .htm. El se numeste fisier sursa.
Un browser incarca un document HTML(un fisier sursa), interpreteaza marcajele continute in
document, iar rezultatul este afisat in fereastra browser-ului. Acest rezultat al interpretarii se
numeste pagina web.
Un document contine marcaje(etichete sau tag-uri). Exista doua tipuri de etichete :
- de tip bloc (pereche), cu un tag ce delimiteaza inceputul blocului si un tag ce delimiteaza
sfarsitul blocului (de exemplu <html> si </html>
- singulare (de exemplu <br>)
O eticheta este delimitata de parantezele < si>.
O pagina HTML standard este formata dintr-un bloc extern <html></html> si doua blocuri
incluse : <head></head>(antetul) si <body></body>(corpul).
Trecerea la o noua linie se face cu ajutorul tag-ului <br> (break).
Afisarea intocmai a continutului unui bloc de text din fisierul sursa se face prin includerea
acestui bloc intre tag-urile <pre> si </pre>(preformatat).
CULORI, FONTURI SI MARGINI
Culoarea de font
O culoare poate fi precizata in doua moduri :
1. Printr-un nume de culoare ( 16 culori: aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, teal, white si yellow)
2. Prin constructia #rrggbb unde r,g sau b sunt cifre hexazecimale.
Culoarea fondului paginii Web se stabileste cu atributul bgcolor al etichetei body.
< body bgcolor= culoare>
Exemplu :
<HTML>
<HEAD>
<TITLE>Exemplul_2
</TITLE>
</HEAD>
<BODY BGCOLOR=yellow>
Aceasta este o pagina web <br>
3
cu fondul de culoare galbena.

</BODY>
</HTML>
Culoarea textului
Culoarea textului unei paginii Web se stabileste cu atributul text al etichetei body.
< body text= culoare>
Exemplu :
<HTML>
<HEAD>
<TITLE>Exemplul_3
</TITLE>
</HEAD>
<BODY TEXT=red>
Aceasta este o pagina web <br>
cu textul de culoare rosie.
</BODY>
</HTML>
Atribute multiple
O eticheta poate avea mai multe atribute.
Sintaxa :
< eticheta atribut1=valoare1 atribut2=valoare2 atribut 3=valoare3>
Exemplu :
<HTML>
<HEAD>
<TITLE>Exemplul_4
</TITLE>
</HEAD>
<BODY BGCOLOR=yellow TEXT=read>
Aceasta este o pagina web cu fondul de culoare galbena <br> si textul deculore rosie.
</BODY>
</HTML>
Stabilirea caracteristicilor textului de baza

Textul afisat este caracterizat de urmatoarele atribuite: marime(size), culoare(color),
font(style). Acestea sunt atribute ale etichetei <basefont> (eticheta singulara)
Sintaxa:
4
<basefont size = numar color = culoare style = font>

unde:
numar poate fi 1,2,3,4,5,6 sau 7
culoare poate fi precizata prin nume sau printr-o constructie RGB
font poate fi un font generic ca : serif, sans serif, cursive, monospace, fantasy sau un font
instalat pe calculator ca Times New Roman, Helvetica sau Arial.( pot fi mai multe optiuni separate
prin virgula: Times Roman, serif, monospace).
<HTML>
<HEAD>
<TITLE>Exemplul_5
</TITLE>
</HEAD>
<BODY >
Acest text are atribute implicite. <br>
<BASEFONT STYLE= Arial color=green size=7>
Acest text este scris cu fontul Arial, culoarea verde si marimea 7.
</BODY>
</HTML>
Stabilirea marginilor paginii Web

Pozitionarea continutului paginii Web fata de marginile ferestrei browserului se face prim
intermediul a doua atribute ale etichetei <body>:
-leftmargin ( stabileste distanta dintre marginea din stanga a ferestrei browserului si marginea
din stanga a continutului paginii)
-topmargin ( stabileste distanta dintre marginea de sus a ferestrei browserului si marginea din
sus a continutului pagini)
Obs: atributele pot primi urmatoarele valori:
- un numar intreg pozitiv reprezentand o distanta masurata in pixeli
- un procent din latimea, respectiv inaltimea ferestrei browserului
<HTML>
<HEAD>
<TITLE>Exemplul_6
</TITLE>
</HEAD>
<BODY LEFTMARGIN=100 TOPMARGIN=20%>
Acest text are atribute implicite. <br>
<BASEFONT STYLE= Arial color=green size=7>
Acest text este scris cu fontul Arial, culoarea verde si marimea 7.
</BODY>
5
</HTML>
STILURI PENTRU BLOCURILE DE TEXT
Caractere aldine:
Un bloc de text apare in pagina evidentiat( cu caractere aldine) daca este inclus intre
delimitatorii <b> si </b> (bold).
<HTML>
<HEAD>
<TITLE>Exemplul 1
</TITLE>
</HEAD>
<BODY>
Aceasta linie este formata din text normal. <br>
<b> Aceasta linie este scrisa in intregime cu caractere ingrosate.</b> <br>
In aceasta linie numai cuvantul <b> gros</b> este ingrosat.
</BODY>
</HTML>
Caractere marite:
Un text apare scris cu caractere mai mari cu o unitate decat cele curente daca este inclus intre
etichetele <big> si </big>. Aceste etichete pot fi imbricate.
<HTML>
<HEAD>
<TITLE>Exemplul 2
</TITLE>
</HEAD>
<BODY>
<big> Aceasta linie este scrisa in intregime cu caractere marite cu o unitate.</big> <br>
Normal <big> marit <big> mai mare <big> si mai mare. </big> </big> </big>
</BODY>
</HTML>
Caractere micsorate:
Un text apare scris cu caractere mai mici cu o unitate decat cele curente daca este inclus intre
etichetele <small> si </small>. Aceste etichete pot fi imbricate.
Activitate individuala: de realizat exemplul 3 asemanator cu exemplul anterior..
Caractere cursive:
6
Un text apare scris cu caractere cursive daca este inclus intr-un bloc delimitat de etichetele <i>
si </i>. ( i vine de la italic)
<HTML>
<HEAD>
<TITLE>Exemplul 4
</TITLE>
</HEAD>
<BODY>
<i> Aceasta linie este scrisa in intregime cu caractere italice.</i> <br>
In aceasta linie numai fragmentul <i> aplecat spre dreapta</i> este italic.
</BODY>
</HTML>
Caractere indice si exponent:
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>.
Activitate individuala:
Sa se realizeze o pagina web care sa aiba urmatorul continut:
Aceasta linie este formata din text normal.

In aceasta linie sus este superscript, iar jos este subscript.
F(y) = (x1+x2)2-y3
Caractere subliniate si caractere sectionate:
Pentru a realiza urmatoarea activitate individuala sunt utilizate doua etichete de tip bloc:
<u> si </u> pentru a insera un bloc de caractere subliniate
<strike> si </strike> sau <s> si </s> pentru a insera un bloc de caractere sectionate la mijloc cu
o linie orizontala.

Aceasta linie este in intregime sectionata de o linie orizontala.
In aceasta linie underline este subliniat, iar strike este sectionat.
STILURI FIZICE SI STILURI LOGICE

Stilurile logice tin cont de semnificatia pe care o are blocul in cadrul paginii Web. Ele se
bazeaza pe stilurile fizice, iar modul lor de actiune depinde de browserul utilizat.
Blocuri de caractere evidentiate
Urmatoarele etichete pun in evidenta( prin stilul cursive) fragmente de text:
<cite> si </cite> (cite inseamna citat)
<em> si </em> (em provine de la emphasize = a evidentia)
Sa se realizeze o pagina web care sa aiba urmatorul continut folosind etichetele de mai sus:
Colegiul National Mihai Viteazul din Bucuresti
este unul dintre liceele de traditie din Romania.
Blocuri de caractere monospatiate
Urmatoarele trei etichete permit scrierea fragmentelor de text cu caractere monospatiate( de
tipul celor folosite de o masine de scris) :
<code> si </code> ( code inseamna cod sau sursa)
<kbd> si </kbd> ( kbd vine de la keyboard = tastatura)
<tt> si </tt> ( tt vine de la teletype = teleprinter)
Sa se realizeze o pagina web care sa aiba urmatorul continut folosind toate cele 3 etichete:
Codul functiei f(x,y) este Funtion f(x,y) { return x+y }
Tastati urmatoarea comanda DOS copy c:\ windows\ temp
Asa scrie un teleprinter.
Imbricarea etichetelor
Etichetele pot fi imbricate. De exemplu :
un fragment de text poate fi scris cu aldine si cursive in acelasi timp
pentru un fragment de text se pot folosi simultan stilurile subliniat, exponent, marit si cursiv
8

Normal ingrosat ingrosat si italic ingrosat normal.
Normal subliniat subliniat si ingrosat subliniat, ingrosat si marit.
Subliniat, ingrosat, marit si italic.
Blocul q
Blocul q/q permite inserarea in-line a citatelor( q provine de la in-line quotation =
citate inserate in linie). Aceste citate sunt afisate cu caractere cursive.
Blocurile q pot fi imbricate ca in exemplul urmator :
<html>
<head>
<title> exemplu </title>
</head>
<body>
Maria povesti mai departe<q> M-am intors catre Mihai si l-am intrebat<q> Mergi maine la
concert?</q> <q>Nu.</q> mi-a raspuns el. </q> In acest moment Maria se opri pentru o clipa.
</body>
</html>
CONFIGURAREA FONTURILOR
Pentru a scrie blocuri de text personalizate in cadrul unei pagini Web pot fi folosite diferite tipuri
de caractere( fonturi).
Un font este caracterizat de urmatoarele atribute :
culoarea ( stabilita prin atributul color)
tipul sau stilul ( stabilit prin atributul face)
marimea ( definite prin atributul size)
marimea in puncte tipografice ( stabilita prin atributul point-size)
grosimea ( definite prin atributul weight)
Toate aceste atribute apartin etichetei <font>,care permite inserarea de blocuri de texte
personalizate.
CULORI
O culoare poate fi precizata in doua moduri :
Printr-un nume de culoare( cel putin 16 nume de culori)

Printr-o constanta conforma standardului de culoare RGB( Red, Green, Blue). O astfel de
constanta se formeaza astfel : #rrggbb, unde r,g si b sunt cifre hexazecimale. Cifrele
hexazecimale sunt urmatoarele : 0,1,2,3,4,5,6,7,8,9,a,A,b,B,c,C,d,D,e,E,f si F. Numarul de
culori posibile este 65536.
Exemple de culori RGB : #ff0000 este rosu(red), #00ff00 este verde(green),
#0000ff ste albastru(blue), #ffffff este alb(white), #000000 este negru(black), #28a7Fc este
o culoare oarecare valida.
CULOAREA FONTULUI
Sintaxa :
<font color = culoare> fragment de text de culoarea specificata </font>
FAMILIA FONTULUI
Exista cinci familii generice de fonturi care sunt de regula disponibile pe toate calculatoarele
utilizatorilor : serif, sans serif, cursive, monospace si fantasy.
Alte fonturi specifice pot fi utilizate daca acestea sunt disponibile pe calculatorul client ca de
exemplu : Times ( un tip particular de font serif), Helvetica ( un tip particular de font sans serif),
Arial, Courier ( un tip particular de font monospace), Western ( un tip particular de font fantasy)
si altele.
Pot fi introduse mai multe fonturi separate prin virgula si browserul va utiliza primul font pe
care il recunoaste.
Exemplu :
1. Culoarea fontului
<font face = Arial, serif, monospace>
<html><head><title>Exemplul 1
</title></head><body>
Aceasta linie este scrisa cu caractere normale. <br>
<font color=red> Aceasta linie este rosie </font><br>
Aici <font color=red> fiecare </font>
<font color=green> cuvant </font>
<font color=yellow> are </font>
<font color=00ff00> alta </font>
<font color=0048Ae> culoare. </font><br>
M<font color=olive>o</font>
<font color=gray> z </font>
<font color=cyan> a </font>
<font color=magenta> i </font>
<font color=0f0e0d> c. </font>
10
</body></html>
2. Familia fontului
<html><head><title>Exemplul 2
</title></head><body>
Aceasta linie este scrisa cu caractere normale. <br>
<font face=monospace> Aceasta linie este scrisa cu caractere monospatiate </font><br>
<font face=Arial>Linie scrisa cu caractere Arial</font>
<font face=TimesRoman, sans serif> Linie scrisa cu caractere TimesRoman sau sans
serif </font>
</body></html>
MARIMEA FONTULUI
Sintaxa :
<font size = numar> fragment de text de marimea specificata </font>
Numarul poate fi :
- 1,2,3,4,5,6,7 ( 1 penru cel mai mic font si 7 pentru cel mai mare) ;
- +1,+2 etc. pentru a mari dimensiunea fontului cu 1,2 etc. fata de valoarea curenta
- -1,-2 etc. pentru a micsora dimensiunea fontului cu 1,2 etc. fata de valoarea curenta
Aceasta linie este scrisa cu caractere normale.
Fonturi de marimea 6.
GROSIMEA FONTULUI
Sintaxa :
<font weight = numar> fragment de text de grosimea specificata </font>
11
Aceasta linie este scrisa cu caractere normale.

Fonturi de grosimea 1.
BLOCURI DE TEXT
Toate etichetele la nivel de bloc de text produc automat trecerea la un rand nou si adaugarea
unui spatiu suplimentar.
INSERAREA UNEI ADRESE
Etichetele <address></address> sunt folosite atunci cand trebuie inclusa o adresa intr-o
pagina Web.
Blocurile de tip adresa include informatii despre persoana care a creat pagina Web, adresa email si data crearii paginii( se plaseaza de obicei la sfarsitul paginii Web, dar pot aparea si la inceput).
Adresa institutiei nostre este:
Colegiul National Mihai Viteazul
Bulevardul Pache Protopopescu Nr.62
Sector 2 Bucuresti Romania Europa
INDENTAREA UNUI BLOC
Pentru ca un bloc de text sa fie indentat( marginea din stanga a textului sa fie deplasata la
dreapta la o anumita distanta fata de marginea paginii), acesta trebuie inclus intre etichetele
<blockquote> si </blockquote>.
Constantin Brancusi obisnuia sa spuna :
Simplitatea nu este un scop in Arta, insa ajungi la simplitate fara voia ta,
apropiindute de sensul cel real al lucrurilor. Simplitatea este in sine o complexitate si trebuie sa te
hranesti cu esenta, ca sa poti sa ii intelegi valoarea.
12
BLOCURI <DIV>
Modalitatea cea mai eficienta de delimitare si de formatare a unui bloc de text este folosirea
delimitatorilor <div> si </div>.
Un parametru pentru stabilirea caracteristicilor unui bloc <div>(diviziune) este align(aliniere).
Valorile posibile ale acestui parametru sunt :
left(aliniere la stanga)
center(aliniere centrala)
right(aliniere la dreapta)
Sintaxa:
<div align=parametru > fragment de text </div>
Obs : Un bloc <div></div> poate include alte subblocuri. In acest caz, alinierea precizata de
atributul align al blocului are efect asupra tuturor subblocurilor incluse in blocul <div>.
Aceasta este o linie normala. Urmatorul bloc este aliniat la dreapta :
MOTTO
Misiunea artei este sa creeze bucurie ;
Si nu se poate crea artistic decat
in echilibru si in pace sufleteasca
Constantin Brancusi
Urmatorul bloc este aliniat pe centru:
De cand viata mea te stie,
o suferinta port mereu ;
Frumusetea ta-i o poezie,
pe care n-am facut-o eu..
Lucian Blaga: Catren
BLOCURI <PLAINTEXT>
Daca dorim ca un fragment de text sa contina caracterele < si > fara ca acestea sa aiba
semnificatia speciala prestabilita, acest fragment trebuie incadrat de una dintre perechile de etichete:
<xmp></xmp>(80 de caractere pe rand)
<listing></listing>(120 de caractere pe rand)
Obs: textul afisat in pagina Web este monospatiat.
13
Un fisier html standard arata astfel:
<html>
<head>
</head>
<body>
Prima pagina Web!
</body>
</html>
BLOCURI DE TEXT
Blocuri paragraf
Trecerea la o linie noua se face cu ajutorul etichetei <br>.
Acest lucru este posibil si cu ajutorul etichetei paragraf <p>. Spre deosebire de <br>, eticheta
<p> permite:
inserarea unui spatiu suplimentar inainte de blocul paragraf;
inserarea unui spatiu suplimentar dupa blocul paragraf, daca se foloseste delimitatorul </p>
(acesta fiind optional);
alinierea textului cu ajutorul atributului align, avand valorile posibile left, center , right
sau justify.
Sintaxa:
<p align=parametru> fragment de text</p>
Aceasta este o linie normala. Urmatorul bloc este aliniat la dreapta :
MOTTO
Misiunea artei este sa creeze bucurie ;
Si nu se poate crea artistic decat
in echilibru si in pace sufleteasca
Constantin Brancusi
Urmatorul bloc este aliniat pe centru:
14
De cand viata mea te stie,

o suferinta port mereu ;
Frumusetea ta-i o poezie,
pe care n-am facut-o eu..
Lucian Blaga: Catren
Blocuri de titlu
Intr-un text sunt necesare titluri(headers) de capitole(paragrafe) de diferite dimensiuni. Acestea
pot fi introduse cu ajutorul etichetelor <h1>, <h2>, <h3>, <h4>, <h5> si <h6>.
Observatii:
toate aceste etichete se refera la un bloc de text si trebuie insotite de o eticheta de incheiere
similara, de exemplu:<h2></h2>.
aceste etichete accepta atributul align pentru alinierea titlului blocului de text la stanga(in mod
prestabilit), in centru si la dreapta.
tag-ul <h1> permite scrierea unui titlu cu caracterele cele mai mari si aldine, pe cand <h6>
foloseste caracterele cele mai mici.
toate browserele introduc un spatiu suplimentar inainte de a afisa un titlu.
Titlu de marimea 1 aliniat in centru

Titlu de marimea 2 aliniat la stanga(implicit)
Titlu de marimea 3 aliniat la dreapta
Titlu de marimea 4 aliniat la stanga
Titlu de marimea 5
Titlu de marimea 6
Linii orizontale
Intr-o pagina Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul etichetei <hr>.
Exemplul 1:
<html>
<head><title> Exemplul 1</title>
15
</head>
<body>
<h1 align=center>Linie orizontala</h1>
<hr>
<h2>Linia orizontala are parametrii impliciti</h2>
<hr>
</body>
</html>
Pentru a configura o linie orizontala se utilizeaza urmatoarele atribute ale etichetei <hr>:
align permite alinierea liniei orizontale. Valorile posibile sunt left, center si right
width permite alegerea lungimii liniei. Valorile posibile sunt:
(a) numere intregi pozitive reprezentand lungimea liniei, in pixeli
(b) numere intre 1 si 100 urmate de % reprezentand procentul din latimea paginii pe care se
intinde linia
size permite alegerea grosimii liniei. Valorile posibile sunt numere intregi pozitive reprezentand
grosimea liniei in pixeli(valoarea prestabilita este 2)
noshade defineste o linie fara umbra
color permite definirea culorii liniei
Sa se scrie o pagina Web in care sa utilizati toate atributele etichetei <hr>.
Blocuri <center>
Blocul introdus de etichetele <center> si </center> aliniaza centrat toate elmentele pe care le
contine.
Exemplul 2:
<html>
</head>
<body>
<center>
<hr width=10%>
<hr width=40%>
<hr width=70%>
<hr width=100%>
<hr width=70%>
<hr width=40%>
16
<hr width=10%>
</center>
</body>
</html>
Blocuri <nobr>
Blocul de text cuprins intre etichetele <nobr> si </nobr> va fi afisat pe o singura linie.
LISTE
LISTE NEORDONATE
O lista neordonata este un bloc de text delimitat de etichetele <ul> si </ul>
( ul vine de la unorder list = lista neordonata). Fiecare element al listei este initiat de
eticheta <li> (list item).
Obs: - lista va fi indentata fata de restul paginii Web
- fiecare element al listei incepe pe un rand nou
Exemplul 1:
<html>
</head>
<body>
<h1 align=center>Exemplul 1</h1>
<hr>
<h2>O lista neordonata</h2>
<ul> Pentru a cunoaste INTERNET-ul, trebuie sa studiati urmatoarele carti:
<li> HTML
<li> JavaScript
<li> Java
</ul>
</body>
</html>
Tag-urile <ul> si <li> pot avea un atribut type care stabileste caracterul afisat in fata fiecarui
element al listei. Valorile posibile ale acestui atribut sunt:
circle( cerc) pentru o
disc (disc plin) pentru
square (patrat) pentru
17
Exemplul 2
__________________________________________________________________
O lista neordonata particularizata
Seria INTERNET va cuprinde urmatoarele carti:
HTML prin exemple
JavaScript prin exemple
Java prin exemple
Exemplul 3
__________________________________________________________________
O lista neordonata de liste neordonate
Elemente si atribute ale unei pagini html:
body
Atribute
o bgcolor
o text
font
Atribute
o face
o size
o color
LISTE ORDONATE
O lista ordonata de elemente este un bloc de text delimitat de etichetele <ol> si </ol> ( ol
vine de la order list = lista ordonata). Fiecare element al listei este initiat de eticheta <li> ( list item).
Obs: - lista va fi indentata fata de restul paginii Web.
- fiecare element al listei incepe pe un rand nou
Exemplul 4:
<html>
</head>
18
<body>
<hr>
<h2>O lista ordonata</h2>
<ol> Pentru a realiza o pagina web trebuie:
<li> creat un fisier de comenzi in limbajul html;
<li> salvat fisierul cu extensia .html;
<li> incarcat fisierul html intr-un browser.
</ol>
</body>
</html>
LISTE ORDONATE
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).
Exemplul 1
__________________________________________________________________
O lista ordonata cu cifre romane mari
I.
II.
III.
Pentru a realiza o pagina web trebuie:

creat un fisier de comenzi in limbajul html;
salvat fisierul cu extensia html;
incarcat fisierul html intr-un browser.
Obs: 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.
Pentru a realiza exemplul urmator se foloseste cazul particular:
<ol type=A start=3>
19

Exemplul 2
__________________________________________________________________
O lista ordonata cu litere mari incepand cu valoarea C:
Pentru a realiza o pagina web trebuie:
C.
creat un fisier de comenzi in limbajul html;
D.
salvat fisierul cu extensia html;
E. incarcat fisierul html intr-un browser.
Obs: Tag-ul <li> poate avea un atribut value care stabileste valoarea pentru elementul respectiv al
listei. Valoarea acestui atribut trebuie sa fie un numar intreg pozitiv.
Pentru a realiza exemplul urmator se folosesc cazurile particulare:
- <ol start=3>
- <li value=5>
Exemplul 3
__________________________________________________________________
O lista ordonata avand itemi setati individual:
Repetati urmatorii pasi ai algoritmului:
3. salvati fisierul;
5. incarcati fisierul in browser;
6. schimbati browser-ul utilizat.
Obs: listele ordonate pot fi imbricate intre ele sau cu liste neordonate.
Exemplul 4
__________________________________________________________________
O lista ordonata de liste ordonate si neordonate:
20
Un sistem informatic include:

1. Hardware:
1. placa de baza
2. procesor
3. memorie
2. Software de baza:
o Windows
o Unix
o Linux
3. Software de aplicatie:
AutoCad
CorelDraw
QuarkXPress
TABELE
Tabelele ne permit sa obtinem o retea dreptunghiulara de domenii, fiecare domeniu avand propriile
optiuni pentru culoarea fondului, culoarea textului, alinierea textului, etc.
Pentru a insera un tabel sa folosesc etichetele <table> si </table>.
Un tabel este format din randuri. Pentru a insera un rand intr-un tabel se folosesc etichetele <tr> si
</tr>.( table row= rand in tabel). Eticheta </tr> este optionala.
Un rand este format din mai multe celule ce contin date. O celula de date se introduce cu eticheta
<td> (table date= date in tabel).
Exemplul 1:
Un tabel simplu format din doua linii si trei coloane.
<html>
</head>
<body>
<hr>
<h2> Un tabel simplu format din doua linii si trei coloane </h2>
<table>
<tr>
<td>celula 11
21
<td>celula 12
<td>celula 13
<tr>
<td>celula 21
<td>celula 22
<td>celula 23
</table>
</body>
</html>
TABEL CU CHENAR
In mod prestabilit, un tabel nu are chenar.Pentru a adauga un chenar unui tabel, se utilizeaza un
atribut al etichetei <table> numit border. Acest atribut poate primi ca valoare orice numar
intreg( inclusiv 0) si reprezinta grosimea in pixeli a chenarului tabelului.
Obs:
atributul border poate sa nu fie urmat de o valoare, caz in care chenarul are o grosime
prestabilita egala cu 1 pixel.
o valoare egala cu 0 a grosimii semnifica absenta chenarului.
Exemplul 2:
Modificati exemplul anterior adaugand un chenar tabelului (se utilizeaza <table border=5>).
DEFINIREA CULORILOR DE FOND PENTRU UN TABEL
Culoarea de fond se stabileste cu atributul bgcolor, care poate fi atasat intregului tabel prin
eticheta <table>, unei linii prin eticheta <tr> sau unei celule de date prin eticheta <td>.
Obs: daca in tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este urmatoarea:
<td>,<tr> si <table>(cu prioritatea cea mai mica).
Exemplul 3:
<html>
</head>
<body>
<hr>
<h2> Un tabel colorat </h2>
<table border=3 bgcolor=yellow>
<tr>
22
<td>galben 11
<td bgcolor=green>verde 12
<tr bgcolor=red>
<td>rosu 21
<td bgcolor=cyan>cyan 22
</table>
</body>
</html>
ALINIEREA TABELULUI IN PAGINA WEB
Pentru a alinia un tabel se utilizeaza atributul align al etichetei <table> cu urmatoarele valori
posibile: left(valoarea prestabilita),centersi right.
Alinierea unui tabel este importanta pentru textul ce inconjoara tabelul. Astfel:
Daca tabelul este aliniat la stanga(left), atunci textul care urmeaza dupa punctul de
inserare al tabelului va fi dispus in partea dreapta a tabelului.
Daca tabelul este aliniat la dreapta(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(center), atunci textul care urmeaza dupa punctul de
inserare al tabelului va fi afisat pe toata latimea paginii, imediat sud tabel.
Sa se realizeze un exemplu in care sa se foloseasca toate valorile posibile pentru alinierea
tabelului.
DIMENSIONAREA CELULELOR UNUI TABEL
Distanta dintre doua celule vecine se defineste cu ajutorul atributului cellspacing al etichetei
<table>
Obs:
Valorile acestui atribut pot fi numere intregi, pozitive, inclusiv 0, si reprezinta distanta in pixeli
dintre doua celule vecine.
Valoarea prestabilita a atributului cellspacing este 2.
Distanta dintre marginea unei celule si continutul ei poate fi definita cu ajutorul atributului
cellpadding al etichetei <table>
Obs:
Valorile acestui atribut pot fi numere intregi pozitive si reprezinta distanta in pixeli dintre
marginea unei celule si continutul ei.
Valoarea prestabilita a atributului cellpadding este 1.
Exemplul 1:
<html>
23
</head>
<body>
<hr>
<h2> Un tabel fara chenar de celule alipite </h2>
<table cellspacing=0 >
<tr>
<td bgcolor=yellow>galben 11
<td bgcolor=green>verde 12
<tr >
<td bgcolor=red>rosu 21
<td bgcolor=cyan>cyan 22
</table>
</body>
</html>
Modificati exemplul anterior astfel incat tabelul sa aiba chenar si distanta dintre marginile
celulei si continutul ei sa fie 20.
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,
respectiv inaltimea totala a paginii.
Sa se realizeze un document HTML care sa contina un tabel cu latimea de 300 de pixeli si
inaltimea egala cu un procent de 50% din inaltimea totala a paginii.
Exemplul 2:
Pentru afisarea intr-o pagina Web a unui text pozitionat in centrul paginii se declara un tabel
mare cat intreaga pagina ce contine o singura celula.
<html>
</head>
<body>
<table width=100% height=100% >
<tr>
<td align=center>
24
<h2>Text centrat</h2>
</table>
</body>
</html>
TITLUL UNUI TABEL
Unui tabel i se poate atasa un titlu cu ajutorul etichetei <caption> ( de latable caption= titlu
de 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)
Exemplul 3
Un tabel cu titlu
Fructe
mure
mere
zmeura
pere
afine
cirese
CAP DE TABEL
Un tabel poate avea celule cu semnificatia de cap de tabel. Aceste celule sunt introduse de
eticheta <th>(de la table header= cap de tabel) in loc de <td>.
Obs:
toate atributele care pot fi atasate etichetei <td> pot fi atasate etichetei <th>
continutul celulelor definite cu <th> este scris cu caractere aldine si centrat.
Exemplul 4
Un tabel cu titlu si cap de tabel
25
Bilant\Zile
Intrari
Iesiri
Luni
1000
100
Marti
2000
200
Miercuri
3000
300
Joi
4000
400
Vineri
5000
5000
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 ( centrat)
right ( la dreapta)
char ( alinierea se face fata de un caracter)
Valoarea prestabilita este center.
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)
top ( sus)
Valoarea prestabilita este middle.
Exemplul 1:
<html>
</head>
<body>
<hr>
<h2> Un tabel avand continutul celulelor aliniat in diverse moduri </h2>
<table border width=50% height=50% >
<tr>
<td >aici<td >alinierea <td> este<td>centru<td>stanga(implicita)
<tr align=right valign=top>
<td >aici<td >alinierea <td> este<td>dreapta<td>sus
<tr>
<td valign=top> sus <td valign=bottom>jos<td align=left>stanga<td
align=right>dreapta<td align=right valign=bottom> dreapta si jos
</table>
</body>
26
</html>
Modificati exemplul anterior astfel incat textul de pe primul rand sa fie aliniat dreapta jos,
textul de pe al doilea rand sa fie aliniat stanga jos , iar textul de pe cel de-al treilea rand sa fie aliniat
centrat.
DIMENSIONAREA EXACTA A CELULELOR UNUI TABEL

Dimensiunile unei celule de tip <td> sau de tip <th>- pot fi stabilite exact prin intermediul
a doua atribute ale acestor etichete: width pentru latime si height pentru inaltime.
Valorile acestor atribute pot fi:
numere intregi pozitive reprezentand latimea, respectiv inaltimea in pixeli a unei celule
numere intregi intre 1 si 100, urmate de semnul %, reprezentand fractiunea din latimea,
respectiv inaltimea totala a tabelului.
Exemplul 2- un tabel avand latimea 80% din latimea paginii si 3 coloane de text cu
latimile de 25%, 50%, respectiv 25% din latimea tabelului:
<html>
</head>
<body>
<hr>
<center>
<table width=80% >
<tr>
<td width=25% valign=top> Text in prima coloana. Text in prima coloana. Text in prima
coloana. Text in prima coloana. Text in prima coloana. Text in prima coloana. Text in prima coloana.
Text in prima coloana. Text in prima coloana.
<td width=50% valign=top> Text in coloana a doua. Text in coloana a doua. Text in
coloana a doua. Text in coloana a doua. Text in coloana a doua.
<td width=25% valign=top> Text in coloana a treia. Text in coloana a treia. Text in
coloana a treia. Text in coloana a treia. Text in coloana a treia. Text in coloana a treia. Text in
coloana a treia. Text in coloana a treia. Text in coloana a treia. Text in coloana a treia.
</table>
</center>
</body>
</html>
27
Sa se realizeze un document HTML care sa contina un tabel cu latimea de 300 de pixeli si 4
coloane cu latimile de 30%, 25%,20%, 25%..
TABELE DE FORME OARECARE

Un tabel trebuie privit ca o retea dreptunghiulara de celule. Cu ajutorul a doua atribute ale
etichetelor <td> sau <th>, o celula se poate extinde peste celulele 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.
Extinderea unei celule peste celulele de dedesupt se face cu ajutorul atributului rowspan, a
carui valoare determina numarul de celule care se unifica.
Exemplul 3:
<html>
</head>
<body>
<hr>
<h2> Un tabel cu celule extinse</h2>
<table border >
<tr>
<td rowspan=3> c11<br>c21<br>c31
<td> c12
<td colspan=2 rowspan=3> c13, c14<br> c23, c24 <br> c33, c34
<tr>
<td>c22
<tr>
<td>c32
<tr>
<td> c41
<td colspan=3> c42, c43, c44
</table>
</body>
</html>
28
Sa se realizeze un document HTML care sa contina urmatorul tabel:
Detalii cu privire la cumparaturile pentru sarbatori
Alimente
Cheltuieli
Cantitate
Pret
unitar
Paine
30
30
1
Carne
150
10
15
Fructe
100
10
10
RECAPITULARE TABELE
Statistica
SITUATIA CANTITATIVA A MARFURILOR DIN DEPOZIT
DENUMIRE
UM
CANTITATE
MARFA
lapte
l
100
branza
kg
500
unt
kg
450
carne
kg
1000
paine
buc
3000
IMAGINI
Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptate de browsere pentru
fisierele imagine sunt:
GIF (Graphics Interchange Format) cu extensia .gif ;
JPEG ( Join 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 browserul Internet Explorer);
DIB ( Device Independent Bitmap) ;
TIFF ( Targget Image File Format) cu extensia .tif sau .tiff ;
PCX ( PC Paintbrush) ;
PNG ( Portable Network Graphics) cu extensia .png.
29
Observatie: cele mai raspandite formate sunt GIF ( 8 bitipentru o culoare, 256 de culori posibile)
si JPEG ( 24 de biti pentru o culoare, 16777216 de culori posibile).
Pentru a insera intr-o pagina Web o imagine, se utilizeaza eticheta <img> ( de la
image=imagine). Pentru a putea identifica imaginea care va fi inserata, se utilizeaza un atribut al
etichetei <img> si anume src ( de la source = sursa).
Valoarea acestui atribut este adresa URL a imaginii ( daca imaginea se afla in acelasi director cu
fisierul HTML care face referire la imagine, atunci adresa URL a imaginii este formata numai din
numele imaginii, inclusiv extensia).
Ex:
<img scr = aol.gif >

DOCUMENTAREA UNEI PAGINI WEB
Metainformatiile sunt informatii despre modul de organizare a informatiilor. Ele nu sunt

vizibile intr-o pagina Web, sunt continute in fisierul sursa .html si sunt utilizate de serverele Web din
Internet specializate in stocarea de informatii despre informatiile memorate in diferite site-uri.
Aceste servere ofera utilizatorilor motoare de cautare puternice ( www.yahoo.com,
www.altavista.com ) care permit regasirea informatiilor.
Metainformatiile, adica informatiile despre continutul unei pagini Web, se introduc cu ajutorul unui
elemant special <meta> plasat in interiorul blocului <head></head>. Acest element accepta patru
atribute:
name
http equiv
content
scheme
lang ( atribut universal comun tuturor elementelor)
Primele trei atribute se folosesc in perechi: name/content sau http-equiv/content, celelalte doua
atribute( scheme si lang) avand caracter optional.
Descrierea unei pagini WEB
Pentru a face cunoscut motoarelor de cautare aflate in Internet scopul in care a fost creata o
pagina Web, putem insera un element <meta> avand atributele:
name configurat la valoarea description;
content configurat la un sir ce contine o descriere generala a paginii
<html>
<head>
<title>Colegiul B.P.Hasdeu Home Page</title>
30
<meta name=""description" content="Colegiul National B.P.Hasdeu din Buzau este un liceu de

prestigiu din Romania. Acest site prezinta informatii despre elevii, profesorii, oferta scolii, cursurile
optionale, performantele si planurile de viitor ale nostre.">
</head>
<body>
<h1>Bine ati venit la Colegiul National B.P.Hasdeu !</h1><hr>
</html>
Cuvinte cheie pentru o pagina WEB

Cuvintele cheie sunt utilizate pentru a regasi informatii prin intermediul unui motor de cautare.
Selectarea acestor cuvinte cheie trebuie facuta cu atentie pentru ca informatia respectiva sa poate fi
localizata.
Pentru a preciza cuvintele cheie ale paginii Web :
atributul name va primi valoarea keywords
atributul content va primi ca valoare o lista de cuvinte cheie separate prin virgula
<html>
<head>
<meta name=""keywords" content="colegiul, Hasdeu, Buzau, liceu, prestigiu, Romania, elev,
profesor, curriculum, optionale, olimpiade, matematica ">
</head>
<body>
</html>
Drepturile de autor
Atributul name poate fi utilizat pentru a furniza informatiile legate de autorul paginii si de
Copyright ( drepturile de autor).
<html>
<head>
<meta name=""author" content="Tudor Alexandru , IX A">
<meta name=copyright content=cnmv.ro>
</head>
<body>
31
</html>
Data crearii si data reactualizarii paginii Web
Pentru a transmite serverelor specializate in regasirea informatiilor din Internet data crearii si
data reactualizarii unei pagini Web, se utilizeaza atributul http- equiv.Valoarea atributului content
este, in aceste cazuri, o data calendaristica si o ora in formatul:
zzz, zz lll aaaa hh:mm:ss ttt unde:
zzz reprezinta primele trei litere ale zilei din saptamana (Mon, Tue, Wed, Thu, Fri, Sat sau
Sun);
zz reprezinta ziua din cadrul lunii (01, 02, , 31);
lll reprezinta primele trei litere din numele lunii (Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep,
Oct, Nov sau Dec);
aaaareprezinta anul exprimat cu 4 cifre (de exemplu 1999);
hh:mm:ss reprezinta ora, minutul si secunda;
ttt reprezinta standardul de timp utilizat ( de exemplu GMT)
<html>
<head>
<meta http-equiv=creation-date content=Sun, 19 Sep 2004 12:00:00 GMT >
<meta http-equiv=expires content=Sun, 23 Sep 2004 12:00:00 GMT>
</head>
<body>
</html>
DOCUMENTAREA UNEI PAGINI WEB
Persoana de contact
Pentru a putea furniza informatii despre persona care administreaza site-ul, se utilizeaza
atributul http equiv. In acest caz, valoarea atributului content este o adresa de e-mail, eventual
urmata, intre paranteze rotunde, de numele complet al persoanei.
<html>
<head>
< meta http-equiv="from" content =c_popescu@gmail.com (Ciprian Popescu)>
< meta http-equiv="reply- to" content =c_popescu@gmail.com (Ciprian Popescu)
32
</head>
<body>
</html>
Tipul fisierului
Pentru a preciza informatii legate de tipul fisierului si setul ed caractere utilizate, se utilizeaza
atributul http equiv.
<html>
<head>
< meta http-equiv="content-type content = text/html ; charset=ISO - 8859 5>
</head>
<body>
</html>
Limba utilizata
Deoarece la regasirea informatiilor cu ajutorul motoarelor de cautare se pot utiliza cuvinte
cheie scrise in diferite limbi, se pot insera informatiile legate de limba utilizata cu ajutorul atributului
universal( comu si altor elemente) lang.
<html>
<head>
<meta http-equiv =""keywords" lang=en-us content="college, Hasdeu, Buzau, high school,
prestige, Romania, student, teacher, curriculum, optionale, olimpiade, mathematics ">
<meta http-equiv =""keywords" lang=ro content="colegiul, Hasdeu, Buzau, liceu, prestigiu,
Romania, elev, profesor, curriculum, optionale, olimpiade, matematica ">
</head>
<body>
</html>
Reactualizarea paginii curente din browser
O utilizare speciala a atributului http-equiv este aceea de a stabili reincarcarea automata in
browser a aceleiasi pagini ( de exemplu, pagina cu evolutia cursurilor la o bursa ) sau a alteia.
33
In acest fel se obtin facilitati dinamice pentru un site Web.

Pentru a reincarca aceeasi pagina la un interval precizat de secunde se foloseste atributul httpequiv cu valoarea refresh, iar in atributul content se introduce numarul de secunde dupa care pagina
va fi reactualizata.
<html>
<head>
<meta http-equiv=refresh content=5 >
</head>
<body>
Aceasta pagina va fi reincarcata dupa 5 secunde!
</html>
Pentru ca dupa un numar de secunde o pagina sa fie inlocuita de o alta in atributul content este
precizata si adresa URL a paginii noi (exemplul urmator).
Comentarii
Comentariile sunt blocuri de text utile care ofera indicatii privind modul in care a fost scris un
fisier sursa HTML. Comentariile sunt ignorate de catre browser la incarcarea paginii.
<html>
<head>
<meta http-equiv=refresh content=9; url=cuprins.html >
</head>
<body>
Aceasta pagina va fi schimbata dupa 9 secunde cu pagina cuprins.html!
</html>
Pentru a insera un bloc de comentarii, se utilizeaza sintaxa:
<! urmeaza un comentariu->
Observatii:
o Blocul de comentarii poate fi plasat oriunde in cadrul paginii HTMlL.
o Blocul de comentarii se poate extinde pe mai multe randuri.
o Nu sunt permise spatii intre <! si -, dar sunt permise spatii intre si >.
<html>
<head>
34
<! Aceasta este Page Home a Colegiului National B.P.Hasdeu ->

</head>
<body>
<!- urmeaza un header->
<h1>Bine ati venit la Colegiul National B.P.Hasdeu !</h1>
<! urmeaza o linie orizontala->
<hr>
</html>
INTERACTIVITATEA UNEI PAGINI WEB

Legturile
Legturile (link-urile) reprezint partea cea mai importanta a unei pagini Web. Ele transforma
un text obinuit in hipertext sau hipermedia, care permite trecerea rapida de la o informaie aflata pe
un anumit server la alta informaie memorata pe un alt server aflat oriunde in lume.
Legturile sunt zone active intr-o pagina Web, adic zone de pe ecran sensibile la apsarea
butonului stng al mouse-ului. Un clic efectuat cu mouse-ul pe o legtura este interpretat ca o cerere
ctre un anumit server din Internet de a expedia ctre calculatorul client o resursa indicata de legtura
respectiva. In acest fel, paginile web devin interactive ( adic rspund la aciuni iniiate de utilizator).
Serverul www (word wide web) ce stocheaz noua resursa primete cererea si expediaz ctre
utilizator ( calculatorul client) resursa solicitata. Daca aceasta este o noua pagina Web, atunci serverul
expediaz un fiier HTML mpreuna cu fiierele imagine, sunet etc. referite de acest fiier.
Calculatorul client( care a expediat cererea) primete resursa solicitata si o ncarc in browser.
Pagina veche este nlocuita de pagina noua in acelai browser sau este lansata in execuie o
noua instana a browserului, care conine noua pagina.
O legtura ctre o pagina aflata in acelai director
O legtura ctre o pagina aflata in acelai director se formeaz cu ajutorul etichetei <a> ( de la
anchor = ancora).
Pentru a preciza pagina indicata de legtura se utilizeaz un atribut al etichetei <a> numit href,
care ia ca valoare numele fiierului HTML aflat in acelai director, care va nlocui vechea pagina.
Zona activa, adic zona din pagina Web care devine sensibila la apsarea butonului stng al
mouse-ului, este formata din textul cuprins intre etichetele <a> si </a>. Prezenta etichetei de sfrit
</a> este obligatorie.
Exemplul nr 1 :
Presupunem ca avem doua fiiere HTML 1.html si 2.html in directorul de lucru.
<html>
35
<head>
<title>1.html</title>
</head>
<body>
<h1>Pagina 1</h1>
<hr>
<a href = "2.html"> Link ctre Pagina 2 </a>
</body>
</html>
Sa se realizeze un link din fiierul 2.html in fiierul 1.html.
O legtura ctre o pagina aflata pe acelai disc local

Daca pagina referita de legtura se afla pe acelai disc local, dar intr-un alt director, atunci pentru a
preciza poziia ei in structura de directoare de folosete adresarea relativa: se indica calea unde se afla
pagina.
Exemplul nr 2:
Presupunem ca avem doua fiiere HTML 3.html si 4.html pe discul D. Sa se realizeze
comutarea intre cele doua pagini.
<html>
<head>
</head>
<body>
<h1>Pagina 3</h1>
<hr>
<a href = "D:\4.html"> Link catre Pagina 4 </a>
</body>
</html>
Sa se realizeze un link din fiierul 4.html in fiierul 3.html.
O legtura ctre un site particular
In exemplul urmtor se utilizeaz adresa URL http://www.netscape.com, care ncarc
pagina de start (homepage) din site-ul formei Netscape Corporation.
De regula, aceasta pagina se numete index.html ( home.html sau default.html) si se afla
in directorul rdcina al calculatorului www din domeniul netscape.com.
Exemplul nr 3:
36
<html>
<head>
</head>
<body>
<h1>Link catre site-ul firmei Netscape Communications Corporation </h1>
<hr>
<a href = "http:\\www.netscape.com"> Netscape Corporation </a>
</body>
</html>
Sa se realizeze o pagina web care sa contina un link ctre un site particular.
Utilizarea unei imagini ca zona activa
Zona activa a unei legturi este definita cu ajutorul etichetelor <a> si </a>. De obicei ea
este un text care apare subliniat si de culoare albastra. In momentul in care mouse-ul se afla deasupra
zonei active, cursorul sau ia forma unei mini care ii indica utilizatorului sa apese butonul mouse-ului.
Rolul de zona activa poate fi jucat si de o imagine daca inserarea ei are loc intre etichetele
<a> si </a>.
Exemplul nr 4:
<html>
<head>
</head>
<body>
<h1>Utilizarea unei imagini ca zona activa</h1>
<hr>
<a href = "1.html"> <img src=sidebar.gif </a>
</body>
</html>
Pentru ca acest exemplu sa funcioneze:
-fisierele 1.html si sidebar.gif trebuie sa se afle in acelai director
-fisierul 1.html trebuie sa fie scris corect din punctul de vedere al limbajului HTML
INTERACTIVITATEA UNEI PAGINI WEB
Ancore
Intr-o pagina Web foarte lunga pot exista puncte de reper(ancore) catre care se definesc
legturi.
37
O ancora se definete, de asemenea, prin etichetele <a> si </a>. Pentru a identifica

ancora, se utilizeaz atributul name al etichetei <a>, care primete ca valoare un nume atribuit ancorei
(de exemplu ancora1).
Pentru a insera o legtura ctre ancora1 definita in aceeai pagina, se utilizeaz eticheta
<a> avnd atributul href de valoare #ancora1.
Pentru a introduce o legtura ctre o ancora definita in alt document ( alta pagina) aflat in
acelai director, atributul href primete o valoare de forma nume _fisiet.html#nume_ancora.
Instane multiple pentru un browser
La nceperea unei sesiuni in Internet, pe calculatorul client(al utilizatorului) se lanseaz in
execuie o instana (fereastra) a browserului folosit, care ncrca pagina Web solicitata.
Daca in timpul sesiunii de lucru se efectueaz un clic pe o legtura ctre o pagina noua,
atunci in mod prestabilit noua pagina o va nlocui pe cea precedenta, folosind aceeai instana
(fereastra) a browserului.
Exemplul nr 1:
<html>
<head>
</head>
<body>
<h1>Ancore definite in acelai document</h1>
<hr>
<a href = "#ancora1"> Link catre ancora nr.1 </a><br>
<a href = "#ancora2"> Link catre ancora nr.2 </a><br>
10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>17<br>18<br>19<br>20<br>110<b
r>111<br>112<br>113<br>114<br>115<br>116<br>117<br>118<br>119<br>120<br>
<a name="ancora1">Prima ancora<br>
121<br>122<br>123<br>124<br>125<br>126<br>127<br>128<br>129<br>130<br>131<br>
132<br>133<br>134<br>135<br>136<br>137<br>138<br>139<br>140<br>141<br>142<br>143<br
>144<br>145<br>1456<br>147<br>148<br>149<br>150<br>
<a name="ancora2">A doua ancora<br>
151<br>152<br>153<br>154<br>155<br>156<br>157<br>158<br>159<br>160<br>161<br>
162<br>163<br>164<br>165<br>166<br>167<br>168<br>169<br>170<br>
</body>
</html>
Legturi ctre ancore aflate in alt document
Exemplul nr.2:
<html>
<head>
</head>
38
<body>
<h1>Ancore definite in alt document</h1>
<hr>
<a href = "1.html#ancora1"> Link ctre ancora nr.1 din alt document </a><br>
<a href = "1.html#ancora2"> Link ctre ancora nr.2 din alt document</a><br>
</body>
</html>
Sa se realizeze un document HTML care sa contina ancore definite in acelai document si
ancore definite in alt document.
Daca se dorete ca pagina solicitata sa fie ncrcata intr-o alta fereastra dect cea curenta, atunci
trebuie lansata in execuie o noua instana a browserului care va conine noua pagina. Acest lucru se
realizeaz folosind atributul target al etichetei <a>, care primete ca valoare un nume( de exemplu
fereastra) pentru fereastra in care se va ncrca noua pagina.
Exemplul nr.3:
<html>
<head>
</head>
<body>
<h1>Pagina noua in fereastra noua</h1>
<hr>
<a href = "p2.html" target=fereastra> Link ctre Pagina 2 </a><br>
</body>
</html>
Observaii:
- pentru a funciona exemplul de mai sus, in directorul curent, trebuie sa existe fiierul p2.html.
- nu se folosete pentru ferestre o dimensiune maximizata
Daca mai multe legturi folosesc aceeai valoare pentru atributul target, nseamn ca paginile
referite de acestea sa vor ncrca in aceeai fereastra ( vor utiliza aceeai instana a browserului).
Exemplul nr.4:
<html>
<head>
39
</head>
<body>
<h1>Pagini noi in ferestre noi</h1>
<hr>
<a href = "p2.html" target=fereastra1> Incarca Pagina 2 in Fereastra 1 </a><br>
</body>
</html>
Pentru a funciona exemplul de mai sus, in directorul curent, trebuie sa existe fiierele p2.html,
p3.html si p4.html.
Alegerea culorilor pentru legturi
In 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 puin un clic pe ele);
o culoare pentru legturile active ( deasupra crora se afla mouse-ul la un moment dat).
Aceste culori pot fi stabilite cu ajutorul a trei atribute ale etichetei <body>:
link pentru legturi nevizitate;
vlink pentru legturi vizitate;
alink pentru legturi active.
Exemplul nr.1:
<html>
<head>
</head>
<body link="red" vlink="yellow" alink="blue">
<h1>Setarea culorilor pentru legaturi</h1>
<hr>
<ul>In aceasta pagina culorile legaturilor sunt setate astfel:
<li> rosu pentru legaturi nevizitate
<li> galben pentru legaturi vizitate
<li>albastru pentru legaturi active
</ul>
<a href="p2.html">Link catre Pagina 2 </a><br>
</body>
40
</html>
Doua legturi importante
Exemplul urmtor reprezint o pagina Web simpla ce conine doua legturi extrem de utile
pentru creatorii de pagini HTML:
link-ul http://www.developer.netscape.com/docs/html permite accesul la o pagina cu

documentaie despre limbajul HML. Pagina este gzduita de Netscape Communication
Corporation.
link-ul http://www.w3.org/TR/REC-html40 permite accesarea documentaiei de referine

pentru limbajul HTML ( HTML 4.0 Specification). Pagina este realizata de Word Wide Web
Corporation.
Exemplul nr.2:
<html>
<head>
</head>
<body>
<h1>Doua legturi importante</h1>
<hr>
O documentaie excelenta despre limbajul HTML puteti gasi la: <br>
<a href = "http://www.developer.netscape.com/docs/html"> Netscape Communication
Corporation </a><br>
<a href = "http://www.w3.org/TR/REC-html40"> W3 Corporation</a><br>
</body>
</html>
O legtura ctre un fiier HTML local
Pentru a accesa un fiier HTML local ( aflat pe calculatorul client pe care este lansat in execuie
browserul), se utilizeaz serviciul file://( in locul prototipului http://) mpreuna cu adresa absoluta
( calea completa ctre directorul ce conine fiierul, plus numele fiierului).
Exemplul urmtor presupune ca fiierul p2.html se afla in directorul D:\html\.
Exemplul nr.3:
<html>
<head>
41
</head>
<body>
<h1>Link catre un fisier local</h1>
<hr>
<a href = "file:// D:/html/ p2.html" > Link catre pagina 2 aflata pe discul local</a><br>
</body>
</html>
O legtura ctre un server de fiiere
Pentru conectarea la un server din Internet specializat in transferul de fisiere ( server
FTP), se utilizeaza serviciul ftp:// impreuna cu adresa serverului FTP si localizarea fisierului pe server.
FTP vine de la File Transfer Protocol ( protocolul de transfer al fisierelor).
Exemplul nr.4:
<html>
<head>
</head>
<body>
<h1>Link catre un server de fisiere </h1>
<hr>
<a href = "ftp://ftp.netscape.com" > Link catre serverul de fisiere al firmei Netscape
Communication Corporation</a><br>
</body>
</html>
Atributul t i t l e
Atributul title aparine etichetei <a> si comanda apariia unei mici ferestre in pagina Web cnd
mouse-ul se afla pe o legtura, fereastra in care este afiata valoarea data acestui atribut. Acest atribut
are astfel menirea de a furniza informaii suplimentare despre semnificaia unei legturi.
Exemplul nr.5:
<html>
<head>
</head>
42
<body>
<h1>Atributul title </h1>
<hr>
<a href = "capitolul1.html" title="capitolul 1"> Link catre primul capitol</a><br>
</body>
</html>
43

HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML

Încărcat de

Drepturi de autor:

Formate disponibile

DOCUMENTE HTML

CE ESTE UN DOCUMENT HTML?

marcajele container sunt de forma :

cu fondul de culoare galbena.

Stabilirea caracteristicilor textului de baza

<basefont size = numar color = culoare style = font>

Stabilirea marginilor paginii Web

Aceasta linie este formata din text normal.

Aceasta linie este formata din text normal.

STILURI FIZICE SI STILURI LOGICE

Sa se realizeze o pagina web care sa aiba urmatorul continut:

Printr-un nume de culoare( cel putin 16 nume de culori)

Aceasta linie este scrisa cu caractere normale.

Aceasta linie este scrisa cu caractere normale.

De cand viata mea te stie,

Titlu de marimea 1 aliniat in centru

square (patrat) pentru

Pentru a realiza o pagina web trebuie:

Sa se realizeze o pagina web care sa aiba urmatorul continut:

Un sistem informatic include:

ALINIEREA CONTINUTULUI UNEI CELULE

DIMENSIONAREA EXACTA A CELULELOR UNUI TABEL

TABELE DE FORME OARECARE

<img scr = aol.gif >

Metainformatiile sunt informatii despre modul de organizare a informatiilor. Ele nu sunt

<meta name=""description" content="Colegiul National B.P.Hasdeu din Buzau este un liceu de

Cuvinte cheie pentru o pagina WEB

In acest fel se obtin facilitati dinamice pentru un site Web.

<! Aceasta este Page Home a Colegiului National B.P.Hasdeu ->

INTERACTIVITATEA UNEI PAGINI WEB

O legtura ctre o pagina aflata pe acelai disc local

O ancora se definete, de asemenea, prin etichetele <a> si </a>. Pentru a identifica

In mod prestabilit se utilizeaz trei culori pentru legturi:

link-ul http://www.developer.netscape.com/docs/html permite accesul la o pagina cu

link-ul http://www.w3.org/TR/REC-html40 permite accesarea documentaiei de referine

S-ar putea să vă placă și