Suport 01-cls9-tic-cap05-crearea paginilor web

UTILIZAREA ELEMENTELOR DE BAZĂ ALE LIMBAJULUI HTML

1. Editarea unui document HTML

Pentru editarea unui document HTML
se pot folosi procesoarele de text Notepad,
Wordpad sau un editor specializat în crearea
paginilor Web.
Lansarea în execuţie a procesorului de texte
Notepad:
Start – Programs – Accessories –
Notepad

- crearea unui document
Se selectează opţiunea New din meniul File
folosind mouse-ul.

- salvarea unui document ca document
HTML
Se
sele
cte
ază
opţiunea Save din meniul File. În fereastra Save As care
se deschide parcurgeţi următoarele etape:
1. Din lista derulantă Save in alegeţi directorul în
care salvaţi documentul;
2. Scrieţi în zona de editare File name numele pe
care doriţi să îl daţi documentului şi adăugaţi
extensia .html sau .htm;
3. Clic pe butonul Save.

- deschiderea unui document HTML
Se selectează opţiunea Open din meniul File.
În fereastra Open care se deschide parcurgeţi
următoarele etape:
1. din lista derulantă Files of type
alegeţi tipul documentului: All
Files;
2. din lista derulantă Look in alegeţi
directorul în care se găseşte
documentul pe care doriţi să-l
deschideţi, îl selectaţi;
3. clic pe butonul Open.

- vizualizarea unui document HTML
Vizualizarea paginii Web realizată în limbajul
HTML se face cu programul Microsoft Internet
Explorer.

1

2. Structura unui document HTML

Structura unui document HTML se delimitează de următoarele marcaje:
- marcajul de specificare a documentului de tip hipertext: <html>....</html>
Pentru a specifica editorului de texte în care lucrăm că se creează o pagină Web folosind limbajul
HTML, tot textul pe care îl scriem trebuie să fie cuprins în acest marcaj.

- marcajul de specificare a capului documentului de tip hipertext:
<head>...</head> - delimitează informaţiile referitoarea la crearea paginii Web, informaţii ce nu
vor apărea la vizualizarea paginii respective cu un program de navigare (Internet Explorer);
<title>...</title> - delimitează un nume pe care dorim să-l dăm paginii pe care o vom realiza şi care
va apărea pe bara de stare a programului de navigare. Acest nume se dă pentru o mai mare claritate
în ceea ce priveşte conţinutul paginii Web.

- marcajul de specificare al corpului documentului de tip hipertext: <body>...</body>
cuprinde conţinutul paginii Web ce va apărea la încărcarea ei cu un program de navigare.

Exemplu:
<html>
<head>
<title> structura documentului html </title>
</head>
<body> Continutul paginilor Web
</body>
</html>

Parametrii marcajului <body>...</body>

- parametrul bgcolor – folosit pentru stabilirea culorii de fundal a paginii Web. Valoarea acestui
parametru va fi numele în limba engleză al culorii, încadrat în ghilimele (Ex: „red”, „green”, „blue”
sau codul culorii precedat de semnul # încadrat de asemenea de ghilimele.
Exemplu:
<html>
<head>
</head>
<body bgcolor=”blue”> Continutul paginilor Web
</body>
</html>

2

sau
<html>
<head>
</head>
<body bgcolor=”#0000FF”> Continutul paginilor Web
</body>
</html>

Coduri de culori uzuale
Numele culorii Codul Numele culorii Codul
Black (negru) 000000 Aqua (verde marin) 00FFFF
White (alb) FFFFFF Lime (vernil) 00FF0F
Red (roşu) FF0000 Silver (argintiu) C0C0C0
Green (verde) 00FF00 Maroon (castaniu) 800000
Blue (albastru) 0000FF Gray (gri) 808080
Yellow (galben) FFFF00 Olive (măsliniu) 808000
Purple (violet) FF00FF Navy (albastru marin) 000080

O culoare se construieşte prin combinarea a trei culori de bază: roşu, verde şi albastru, iar codul
unei culori este format din 3 părţi, 3 grupe de câte două caractere. Fiecare grup de două caractere
reprezintă compozi`tia din fiecare culoare de bază, astfel: #rrggbb. Valoarea poate fi: 1, 2, 3, 4, 5, 6,
7, 8, 9, A, B, C, D, E, F

- parametrul background
se poate utiliza pentru fundalul unei pagini Web o imagine a cărei adresă este specificată ca valoare
a parametrului Background specific marcajului <body>...</body>
<body background=URL>...</body> (URL = un şir de caractere ce reprezintă adresa
imaginii ce va fi utilizată ca fundal pentru pagina Web.
Obs. Dacă fişierul imagine se află în directorul curent atunci este suficient să dam prin URL doar
numele fişierului imagine (cel mai indicat), în caz contrar trebuie specificată prin URL toată calea
de acces la fişierul imagine respectiv.

- parametrul TEXT = culoare stabileşte culoarea textului din pagina Web. Culoarea se poate
specifica prin nume sau folosind modelul RGB.

- parametrul LINK = culoare stabileşte culoarea cu care vor fi scrise în text legăturile catre alte
pagini Web sau legături în alte porţiuni din pagina curentă.

3

Observaţii:
- culorile pentru text, fundal sau imaginea de fond trebuie alese astfel încât conţinutul pagiii să
poată fi citit fără dificultate;
- pentru ca paginile să se încarce rapid pe Internet se evită folosirea imaginilor ca fundal;
- pentru ca pagina să aibă un aspect unitar, este de preferat ca imaginea sau culoarea utilizată ca
background să fie stabilită de la început;
- dacă se utilizează o imagine drept fundal, aceasta va fi multiplicată şi dispusă sub forma unui
mozaic pe întreaga suprafaţă a paginii.

3. Formatarea paragrafelor
Deschideţi un nou document text (Notepad) şi introduceţi exemplul de mai jos.
Exemplu:
<html>
<head>
<title> sisteme de calcul </title>
</head>
<body>
Sistem de calcul
Un sistem de calcul nu poate să prelucreze date fără să fie programat. Un program constă dintr-o
succesiune de instrucţiuni ce converg către soluţia problemei ce trebuie să fie rezolvată. Există două
categorii de programe:
- programe de sistem – coordonează modul în care lucrează componentele sistemului şi oferă
asistenţă în funcţionarea programelor de aplicaţii. Alcătuiesc software de bază şi constau în
programe de nivel jos care interacţionează cu calculatorul la nivelul său de bază.
- programe de aplicaţii – destinate rezolvării unor probleme specifice unei aplicaţii. Alcătuiesc
software de aplicaţii şi efectuează prelucrări ale datelor, în concordanţă cu cerinţele informaţionale
necesare.
</body>
</html>
Vizualizând pagina html o sa constataţi că toate formatările textului au dispărut.

- Trecerea la o linie nouă – marcajul 
Acest marcaj se poate folosi şi în combinaţie cu parametrul clear=opţiune, opţiune ce forţează
trecerea la o linie nouă faţă de marginea specificată. Valorile posibile pentru opţiune sunt left,
right, all.
<html>
<head>
</head>
<body>

4

Sistem de calcul 
Un sistem de calcul nu poate să prelucreze date fără să fie programat. Un program constă dintr-o
succesiune de instrucţiuni ce converg către soluţia problemei ce trebuie să fie rezolvată. Există două
categorii de programe: 
- programe de sistem – coordonează modul în care lucrează componentele sistemului şi oferă
programe de nivel jos care interacţionează cu calculatorul la nivelul său de bază.
- programe de aplicaţii – destinate rezolvării unor probleme specifice unei aplicaţii. Alcătuiesc
necesare.
</body>
</html>

- Specificarea unui paragraf – marcaj ...
<html>
<head>
</head>
<body>
Sistem de calcul 
Un sistem de calcul nu poate să prelucreze date fără să fie programat. Un program constă dintr-o
succesiune de instrucţiuni ce converg către soluţia problemei ce trebuie să fie rezolvată. Există două categorii
de programe: 
- programe de sistem – coordonează modul în care lucrează componentele sistemului şi oferă asistenţă în
funcţionarea programelor de aplicaţii. Alcătuiesc software de bază şi constau în programe de nivel jos care
interacţionează cu calculatorul la nivelul său de bază.
- programe de aplicaţii – destinate rezolvării unor probleme specifice unei aplicaţii. Alcătuiesc software
de aplicaţii şi efectuează prelucrări ale datelor, în concordanţă cu cerinţele informaţionale necesare. 
</body>
</html>

5

- Alinierea unui paragraf
Pentru alinierea la stânga, la dreapta sau centrat a unui paragraf se foloseşte pe lângă
marcajul ... opţiunea align, opţiune ce poate primi ca valoare unul din cuvintele: left, right,
center. Valoarea trebuie încadrată în ghilimele.
<html>
<head>
</head>
<body>
< center>Sistem de calcul </center>
Un sistem de calcul nu poate să prelucreze date fără să fie programat. Un program constă dintr-
o succesiune de instrucţiuni ce converg către soluţia problemei ce trebuie să fie rezolvată. Există
două categorii de programe: 
- programe de sistem – coordonează modul în care lucrează componentele sistemului şi oferă
programe de nivel jos care interacţionează cu calculatorul la nivelul său de bază.
- programe de aplicaţii – destinate rezolvării unor probleme specifice unei aplicaţii. Alcătuiesc
necesare. 
</body>
</html>

- Centrarea textului – marcaj <center>...</center> are acelaşi efect ca marcajul
...

4. Formatarea fonturilor
Un font reprezintă un set de caractere cu un aspect grafic unitar. Exemple: Arial, Courier,
Times New Roman.

- Stiluri de afişare
Fiecare font poate fi afişat pe ecran în mai multe stiluri: normal, îngroşat, înclinat, subliniat.
 ... - pentru ca un cuvânt sau o porţiune de text din pagina Web să apară îngroşat;
 ... - pentru ca un cuvânt sau o porţiune de text din pagina Web să apară înclinat;
 ... - pentru ca un cuvânt sau o porţiune de text din pagina Web să apară subliniat.
<html>
<head>
</head>
<body>

6

< center>Sistem de calcul </center>
- programe de sistem – coordonează modul în care lucrează componentele sistemului şi
oferă asistenţă în funcţionarea programelor de aplicaţii. Alcătuiesc software de bază şi
constau în programe de nivel jos care interacţionează cu calculatorul la nivelul său de
bază.
- programe de aplicaţii – destinate rezolvării unor probleme specifice unei
aplicaţii. Alcătuiesc software de aplicaţii şi efectuează prelucrări ale datelor, în
concordanţă cu cerinţele informaţionale necesare. 
</body>
</html>

- Nivele de titlu

Se pot pune în evidenţă nivelele de subtitlu ale unui document cu marcajele <hn>...</hn>, unde
n = 1, 2, 3, 4, 5, 6. Cel mai înalt nivel este 1, apoi nivelul descreşte până la nivelul 6, nivelul 6 fiind
cel mai mic nivel.
<html>
<head>
</head>
<body>
<h1><center>Sistem de calcul </center></h1>
bază.
</body>
</html>

7

- Alegerea tipului de font
Se foloseşte marcajul ... împreună cu opţiunea face ce va primi ca valoare numele
fontului ce intenţionăm să-l folosim încadrat în ghilimele.
...

- Alegerea dimensiunii caracterelor
Caracterele unei porţiuni de text pot fi mai mici sau mai mari, în funcţie de contextul în care apar.
În documentele de tip HTML schimbarea dimensiunii fonturilor se face adăugând la marcajul
... opţiunea size, opţiune ce va primi ca valoare un număr încadrat în ghilimele.
Valoarea primită de opţiunea size poate fi:
 un număr natural cuprins între 1 şi 7 ce va reprezenta dimensiunea fontului.
 Relativ la dimensiunea curentă a caracterelor, size va primi ca valoare + n dacă caracterele vor
fi cu n mărimi mai mari sau valoarea – n dacă caracterele vor fi cu n mărimi mai mici.
Exemplu: ... (textul se va scrie folosind fontul
Courier având dimensiunea 4)
... (textul se va scrie folosind fontul
Courier având dimensiunea cu 2 mărimi mai mare decât dimensiunea implicită.

- Alegerea culorii fontului
Culoarea de afişare a unei porţiuni din text se poate alege folosind opţiunea color ce este
specificată de marcajul .... Valoarea acestei opţiuni va fi numele în limba engleză al
culorii încadrat de ghilimele sau codul culorii precedat de semnul # şi încadrat de ghilimele.

Exemplu: ...
sau ...
<html>
<head>
</head>
<body>
<h1><center>Sistem de calcul </center></h1>
Un sistem de calcul nu poate să prelucreze date
fără să fie programat. Un program constă dintr-o succesiune de instrucţiuni ce converg către soluţia
problemei ce trebuie să fie rezolvată. Există două categorii de programe: 
bază.
</body>
</html>

8

4. Linii de delimitare şi comentarii

- linii de delimitare
Marcajul de linie de delimitare <hr> plasat oriunde într-un document are ca efect trasarea unei linii
orizontale. Se poate utiliza în combinaţie cu parametrii size=opţiune, width=opţiune,
align=opţiune, color=opţiune şi noshade.
 Opţiunea parametrului size este un număr care stabileşte grosimea liniei;
 Prin opţiunea parametrului width se poate stabili cât la % din lăţimea paginii va ocupa rigla
respectivă;
 Parametrul align se utilizează împreună cu parametrul width şi opţiunea lui are ca efect
forţarea liniei faţă de marginea specificată. Valorile posibile pentru opţiune sunt left, right şi
center.
 Opţiunea parametrului color stabileşte culoarea riglei;
 Prin prezenţa parametrului noshade, fără nici o opţiune, se dezactivează afişarea umbrei pentru
rigla orizontală.

<html>
<head>
</head>
<body>
<hr size=30 color=”red”>
<hr width=50% color=”blue”>
bază.
<hr width=20% align=center noshade>
<hr color=”#01FF34”>
</body>
</html>

9

- comentarii
Comentariile sunt texte încadrate între . Rolul comentariilor este de a face un document
html mai uşor de înţeles prin plasarea unor explicaţii din loc în loc despre ceea ce realizează
anumite secvenţe din document. Ele nu vor fi afişate în cuprinsul paginii Web creată prin
documentul respectiv.

5. Imagini GIF şi JPG
Cele două forme grafice permise de html sunt:
- GIF = Graphics Interchange Format
- JPEG = Joint Photographic Expert Group
Imaginile GIF pot utiliza doar 256 culori. Este mult mai atractiv în cadrul proiectării de pagini Web,
deoarece se poate reduce paleta până la minimul necesar pentru o imagine specificată, ceea ce
conduce la o scădere foarte mare a dimensiunii fişierului.
Imaginile JPEG permit milioane de culori distincte într-o imagine, dar afişarea lor corectă depinde
de tipul de display pe care utilizatorul îl are în sistemul său de calcul. Acest format este necesar
atunci când se doreşte imitarea cât mai exactă a culorilor imaginii originale

- inserarea imaginilor
Includerea imaginilor într-un document Web se poate face utilizând marcajul:
<img src=nume_imagine>
Plasat oriunde într-un document acest marcaj are drept efect afişarea imaginii din fişierul imagine al
cărui nume, dacă acesta se află în directorul curent, este dat ca opţiune parametrului src. În cazul în
care fişierul imagine nu se află în directorul curent nume_imagine reprezintă calea de acces spre
acesta. Este de preferat ca fişierul imagine să se afle în acelaşi director cu pagina pe care o
creăm. Dacă imaginea este un fişier GIF, atunci nume_imagine trebuie să aibă extensia .gif, iar
dacă este un fişier JPEG, va avea una din extensiile .jpeg sau .jpg.
<html>
<head>
</head>
<body>

10

<img src=image006.jpg height=40 width=40>
bază.
</body>
</html>

Atenţie numele afişat pe fond gri nu se trece în pagina html pe care o creaţi. Trebuie să treceţi
o imagine pe care o aveţi în directorul propriu.

- parametrii de redimensionare a unei imagini
Redimensionarea unei imagini se poate face adăugând la marcajul <img src=nume_imagine> doi
parametri: height=opţiune şi width=opţiune. Opţiunile sunt numere ce vor specifica înălţimea
respectiv lăţimea imaginii (în pixeli).

- alinierea imaginii
Alinierea imaginii în pagina Web faţă de text este dictată de opţiunea parametrului align. Ea poate
fi aranjată separat de text, la stânga sau la dreapta textului, sau chiar pe centru. Valorile posibile
sunt top, middle, bottom, left, right. Înlocuirea în exemplul de mai sus a marcajului <img
src=image006.jpg> cu marcajul <img src=image006.jpg align=right> are drept efect plasarea
imaginii în partea din dreapta a paginii.

- spaţiul suplimentar în jurul imaginii
Spaţiul suplimentar în jurul imaginii se poate obţine prin opţiunile parametrilor hspace=opţiune şi
vspace=opţiune. Valoarea parametrului hspace reprezintă spaţiul suplimentar pe orizontală din
jurul imaginii, iar valoarea parametrului vspace reprezintă spaţiul suplimentar pe verticală din jurul
imaginii.

11

- chenar în jurul imaginii
Se poate aplica un chenar unei imagini prin opţiunea parametrului border=opţiune ce va reprezenta
grosimea în pixeli a chenarului.
<html>
<head>
</head>
<body>
<img src=image006.jpg height=40 width=40 align=right vspace=10 hspace=10 border=3
color=”red”>
bază.
</body>
</html>

12

6. Liste în pagini Web
HTML permite declararea de:
- liste ordonate – elementele sunt automat numerotate - <OL>...</OL>
- liste neordonate – elementele sunt marcate printr-un semn special - <UL>...</UL>
- liste de definiţii – de termeni şi definiţiile lor asociate - <DL>...</DL>
Fiecare element al listei este marcat prin <LI>.

- liste ordonate
Exemplu:
<OL>
<LI>elev 1 1. elev 1
</OL>

Modul de numerotare a elementelor din listă este determinat de parametrul Type al marcajului
<OL>...</OL>, parametru ce poate lua următoarele valori:
- valoarea 1 – elementele din listă vor fi numerotate cu cifre arabe 1, 2, 3, ...(numerotarea
implicită);
- valoarea a – elementele din listă sunt precedate de litere mici a, b, c, ...
- valoarea A – elementele din listă sunt precedate de litere mari A, B, C, ...
- valoarea i – elementele din listă sunt numerotate cu cifre romane mici: i, ii, iii, ...
- valoarea I – elementele din listă sunt numerotate cu cifre romane mari: I, II, III, ...
Prin intermediul parametrului Start al marcajului <OL>...</OL> se poate specifica explicit
valoarea de la care începe numerotarea Start = număr
Exemplu:
<OL type=I start=3>
<LI>elev 1 III. elev 1
<LI>elev 2 IV. elev 2
<LI>elev 3 V. elev 3
</OL>

Elementele din listă sunt numerotate automat. Dacă doriţi să schimbaţi valoarea cu care este
numerotată automat o intrare în listă, includeţi în marcajul <LI>, al elementului corespunzător din
listă, parametrul Value, căruia îi asociaţi ca valoare un număr ce va reprezenta etichetarea
elementului din listă.
Exemplu:

<OL type=I start=3>
<LI>elev 1 III. elev 1
<LI value=10>elev 2 X. elev 2
<LI value=20>elev 3 XX. elev 3
<LI>elev 4 XXI elev 4
</OL>

- liste neordonate sau liste marcate
Exemplu:
<UL>
<LI>elev 1  elev 1
</UL>
13

Elementele din listă sunt precedate de un marcator. Schimbarea simbolului care precede elementele
din listă se poate face utilizând parametrul Type al marcajului <UL>...</UL>, căruia i se pot asocia
una din următoarele valori: disc, circle, square.
Exemplu:
<UL type=circle>
<LI>elev 1 o elev 1
<LI>elev 2 o elev
<LI>elev 3 o elev 3
</UL>

- liste de definiţii
Declararea unei liste de definiţii se face cu ajutorul marcajului <DL>...</DL> utilizat împreună cu
marcajul <DT> pentru termenul de definit şi marcajul <DD> pentru definiţia propriu-zisă.
Exemplu:
<DL> Nume:
<DT>Nume:<DD>Ionescu Ionescu
<DT>Prenume:<DD>Marilena Prenume:
<DT>Data nasterii:<DD>4.11.1998 Marilena
</DL> Data naşterii:
4.11.1998
- liste în liste (liste imbricate)
Listele pot fi cuprinse una într-alta. În proiectarea paginilor Web trebuie avut în vedere următorul
aspect foarte important: informaţia conţinută în pagină să fie structurată astfel încât să poată fi uşor
de urmărit şi de găsit. În acest sens este foarte utilă combinarea celor trei tipuri de liste.
<html>
<head>
</head>
<body>
<img src=image006.jpg height=40 width=40 align=right vspace=10 hspace=10 border=3 color=”red”>
Un sistem de calcul nu poate să prelucreze date fără să fie programat. Un
program constă dintr-o succesiune de instrucţiuni ce converg către soluţia problemei ce trebuie să fie rezolvată. Există două categorii
de programe: 
- programe de sistem – coordonează modul în care lucrează componentele sistemului şi oferă asistenţă în funcţionarea
programelor de aplicaţii. Alcătuiesc software de bază şi constau în programe de nivel jos care interacţionează cu calculatorul
la nivelul său de bază.
- programe de aplicaţii – destinate rezolvării unor probleme specifice unei aplicaţii. Alcătuiesc software de
aplicaţii şi efectuează prelucrări ale datelor, în concordanţă cu cerinţele informaţionale necesare. 
<UL>
<LI><H3>Date personale<H3>
<DL>
<DT>Nume:<DD>Ionescu
<DT>Prenume:<DD>Marilena
<DT>Data nasterii:<DD>4.11.1998
</DL> 
<LI> <H3>Anotimpuri<H3>
<OL type=a>
<LI>Vara
<LI>Iarna
<LI>Primavara

14

<LI>Toamna
</OL>
</body>
</html>

7. Inserarea tabelelor
Marcajul folosit pentru definirea unui tabel este: <table>...</Table>, iar în interiorul acestui marcaj
se utilizează marcajele:
<tr>...</tr> pentru definirea unei linii a tabelului;
<th>...</th> pentru definirea antetului tabelului;
<td>...</td> pentru definirea datei unei celule a tabelului.
<html>
<head>
</head>
<body>
<UL>
<DL>
</DL> 
<OL type=a>
<LI>Vara
<LI>Iarna
<LI>Primavara
<LI>Toamna
</OL> 
15

<Table>
<tr><th>Nume</th>
<th>Prenume</th>
<th>Profesia</th>
<tr><td>Marinescu</td>
<td>Mihaela</td>
<td>Inginer</td>
</body>
</html>

- parametrii marcajului <table>
 border=n – permite definirea zonei umbrite din jurul tabelului, n este un număr întreg. Dacă
border=0 se elimină caroiajul din interiorul tabelului;
 bordercolor=cod_culoare – permite definirea culorii zonei umbrite
 cellspacing=n – defineşte spaţiul lăsat între celule;
 cellpadding=n – defineşte spaţiul lăsat între data din celulă şi chenarul celulei.
 Width=n – permite definirea lăţimii dorite a tabelului, poate fi dată în pixeli sau în procente;
 Height=n – permite definirea înălţimii dorite a tabelului
<html>
<head>
</head>
<body>
<UL>
<DL>
</DL> 
<OL type=a>
<LI>Vara
<LI>Iarna
<LI>Primavara
<LI>Toamna
</OL> 
<Table border bordercolor=”green” cellspacing=5 cellpadding=10 height=30% width=20%>
<tr><th>Nume</th>
<th>Prenume</th>
<th>Profesia</th>
<td>Mihaela</td>
<td>Inginer</td>
</body>
</html>

16

- Parametrii marcajului <td>
Liniile şi coloanele se pot întinde pe mai multe unităţi de tabel.
 colspan=n – permite uneicelule să se extindă pe mai multe coloane;
 rowspan=n – permite unei celule să se extindă pe mai multe rânduri;
 bgcolor=culoare – permite definirea culorii de fond a unei celule, culoarea poate fi dată prin
fond sau nume;
 align=poziţie – specifică alinierea orizontală a datei din celulă; opţiunile posibile sunt: left
(implicit), right, center.
 background=fisier_imagine – permite specificarea unei imagini grafice de fond în interiorul
unei celule
<html>
<head>
</head>
<body>
<UL>
<DL>
</DL> 
<OL type=a>
<LI>Vara
<LI>Iarna
<LI>Primavara
<LI>Toamna
</OL> 
<Table border bordercolor=”green” cellspacing=5 cellpadding=10 height=30% width=20%>
<tr><th rowspan=2 bgcolor=yellow>Candidat</th>
<th background=image006.jpg height=40 width=40>Nume</th>
<th>Prenume</th>
<td>Mihaela</td>
</table>
</body>
</html>

17

8. Referinţe în pagini Web
Principala caracteristică a hipertextelor o constituie utilizarea legăturilor (links). Un link este o
conexiune către o altă resursă Web (un alt hipertext sau o imagine, o secvenţă video sau audio, un
program), resursă care poate fi accesată din fereastra browser-ului printr-un simplu clic.
Link-urile pot fi de două tipuri: interne şi externe.
Marcajul principal atât pentru referinţele interne cât şi pentru cele externe este: <A>...</A>, acesta
trebuie să conţină parametrul HREF=valoare, fără de care nu are nici un sens. Valoarea
parametrului HREF depinde de tipul de referinţă pentru care optăm.

- Referinţe interne
Definirea ţintelor într-un document html
Dacă dorim să adăugăm un cuprins unei pagini Web de dimensiune mare utilizatorul are nevoie să
se deplaseze într-un anumit loc din acea pagină. Locurile în care dorim să se facă deplasarea se
numesc ţintele salturilor interne din paginile Web sau ancore cu nume şi sunt specificate, în cadrul
documentului html, prin utilizarea parametrului name al marcajului <A>...</A>:
<A name=valoare>Mesaj</A>
valoarea parametrului name poate fi orice secvenţă de caractere, numere sau semne de punctuaţie.
Observaţie: Unele programe de navigare impun ca toate caracterele din ancoră să fie litere
mici.
Introduceţi liniile de cod html de mai jos în sursa existentă după linia </table>. Evident </body> şi
</html> rămân la locul lor la sfârşit.
<A href="#baza">Baza materiala</A>
<A href="#profile">Profile</A>
<A name="baza"><h2>Baza materiala</h2></A>
 10 sali de clasa
 4 laboratoare
 3 ateliere
<A name="profile"><h2>Profile</h2></A>
 profil tehnic
 profil informatica
 profil filologie

18

Adăugarea legăturilor către ţinte din cadrul paginii Web
Dacă ţintele salturilor interne din cadrul unui document html au fost definite atunci trebuie să creaţi
o listă succintă de sumar la începutul paginii Web, astfel încât să oferiţi utilizatorului posibilitatea
de a sări la una din recomandările specificate prin ancorele cu nume, fără a fi nevoit să deruleze
pagina.
Corespondentul unei ancore cu nume care defineşte saltul către această ţintă este marcajul
<A>...</A> utilizat în combinaţie cu parametrul href=valoare, unde valoarea este numele ancorei cu
nume, prefaţat de simbolul #.
<A href=”#NumeAncoraCuNume”>Mesaj</A>
Exemplificare: mutaţi primele două linii din caseta de mai sus la începutul programului sursa,
imediat după <hr size=30 color=”red”>.

- Referinţe externe
= referinţe către alte pagini Web de pe acelaşi sistem de calcul, către site-uri din internet sau putem
trimite un mesaj e-mail. Aceste legături se realizează printr-un simplu clic cu mouse-ul pe referinţe.
 Referinţe către pagini Web de pe acelaşi sistem de calcul
- dacă referinţa este către o pagină html din dirctorul curent atunci codul html va arăta astfel:
<A href=fisier.extensie>Mesaj referinta</A>

- dacă pagina Web la care facem referire nu se află în directorul curent, atunci este necesar să
specificăm şi calea către acea pagină:
a) dacă pagina către care facem referirea se află într-un subdirector al directorului paginii curente,
este suficient să dămpe lângă numele şi extensia paginii şi numele subdirectorului în care se află:
<A href=NumeSubdirector/fisier.extensie>Mesaj referinta</A>
b) dacă pagina la care facem referirea se află într-un director care este subdirector al unui
subdirector care la rândul lui este un subdirector şamd. al directorului curent, atunci trebuie să
trecem pe lângă numele şi extensia paginii toată calea care duce către acea pagină:
<A href=NumeSubdirector1/NumeSubdirector2/..../NumeSubdirectorInCareSeAflaPagina/fisier.extensie >Mesaj referinta</A>

- pentru a specifica drept ţintă o ancoră internă dintr-o altă pagină Web, valoarea parametrului href
trebuie să conţină numele şi extensia paginii referite precum şi numele ancorei ţintă, precedat de
caracterul #.
<A href=fisier.extensie#NumeAncoraTinta>Mesaj referinta</A>

 Referinţe către site-uri din Internet
În acest caz valoarea parametrului href al marcajului <A>...</A> va conţine adresa paginii de
legătură:
<A href=http://www.edu.ro>Ministerul Educatiei</A>
Introduceţi linia de mai sus oriunde marcajul <body>. Rezultatul va fi accesarea paginii
ministerului din propria pagina Web creata.

 Trimiterea unui mesaj e-mail
Protocolul care permite trimiterea unui mesaj e-mail dintr-un program de navigare este mailto.
Valoarea parametrului href este adresa către care vizitatorul paginii Web poate să trimită mesaje,
precedată de cuvântul mailto:
<a href=mailto:AdresaDeE-mail>AdresaDeE-mail</a>

19

9. Link-uri şi imagini
Prin încadrarea marcajului <img> de marcajul de început <a> şi marcajul de sfârşit </a> avem
posibilitatea de a insera în pagina Web curentă o legătură pe imagine: printr-un clic cu mouse-ul pe
imagine va fi accesată sursa către care s-a făcut referire.
 Inserarea unei imagini ca referinţă către o pagină Web de pe acelaşi sistem de calcul se
realizează astfel:
<a href=fisier.extensie><img src=FisierImagine Alt=”Text alternativ”></a>
 Inserarea unei imagini ca referinţă pentru a specifica drept ţintă o ancoră internă dintr-o altă
pagină Web se realizează astfel:
<a href=fisier.extensie#NumeAncoraTinta><img src=FisierImagine ALT=”Text alternativ”></a>
 Inserarea unei imagini ca referinţă către un site din Internet se realizează astfel:
<a href=AdresaDeInternetASite-ului><img src=FisierImagine ALT=”Text alternativ”></a>
 Inserarea unei imagini ce permite trimiterea unui mesaj e-mail dintr-un program de navigare
se realizează astfel:
<a href=mailto:AdresaDeE-mail><img src=FisierImagine ALT=”text alternativ”></a>
Rezolvare fişa de lucru:
<html>
<head>
<title>Formatare fonturi></title>
</head>
<body bgcolor="#ffaa54" text="blue">
<img src=image006.jpg height=40 width=40 align=left vspace=10 hspace=10 border=5>
<hr size=15 width=30% color="#01ff56">
<a href="#nume">Lista</a>
<h1><center>Observatii </center></h1>
<hr size=8 width=80% color="#11dd67">
- culorile pentru text, fundal sau imaginea de fond trebuie alese astfel încât conţinutul paginii să poată fi
citit fără dificultate; 
- pentru ca paginile să se încarce rapid pe Internet se evită folosirea imaginilor ca fundal; 
- pentru ca pagina să aibă un aspect unitar, este de preferat ca imaginea sau culoarea utilizată ca background
să fie stabilită de la început;
- dacă se utilizează o imagine drept fundal, aceasta va fi multiplicată şi dispusă sub forma unui
mozaic pe întreaga suprafaţă a paginii.
<hr width=20% align=left color="#ddaa67">
<UL>
<DL>
<DT>Locul nasterii:<DD>Braila
</DL> 
 <Table >
<tr><th >Nota 1</th>
<th >Nota 2</th>
<th>Media</th>
<tr><td>7.55</td>
<td>8.62</td>
<td>8.08</td>
</table>
<a href=http://www.edu.ro>Ministerul invatamantului</A>
<A name="Nume"><h2>Lista</h2></A>
 Mihaela
 Marilena
 Claudia
 Narcisa
</body>
</html>

20

Suport 01-cls9-tic-cap05-crearea paginilor web

Recommandé

Recommandé

Contenu connexe

Similaire à Suport 01-cls9-tic-cap05-crearea paginilor web

Similaire à Suport 01-cls9-tic-cap05-crearea paginilor web (20)

Plus de George Brebenel

Plus de George Brebenel (13)

Suport 01-cls9-tic-cap05-crearea paginilor web