MARIUS MĂNESCU

Cum realizăm un site web?

Cuprins

1. Introducere în limbajul HTML..........................5

2. Cum creăm o pagină web simplă cu ..............7

3. aplicaţia Notepad?..........................................7

4. Componentele unui document HTML............10

5. Componenta Antet(Head) a fişierului...........12

6. Corpul fişierului............................................14

7. Introducerea textului....................................15

8. Controlul <FONT>........................................19

9. Inserarea unei imagini..................................21

10....................................Inserarea de tabele
.....................................................................25

11.......................................Inserarea listelor
.....................................................................30

12.............................Inserarea legăturilor web

.....................................................................35

13....................Crearea unui sit web funcţional

.....................................................................42

2
 Cum realizăm un site web?

14...............................................Bibliografie
.....................................................................51

Cuvânt înainte

În zilele noastre odată cu expansiunea Internetului a

serviciului web în mod special, a luat avânt o întreagă
industrie numită web design sau webdesign prin care se
înțelege realizarea de situri web, de la momentul
conceperii structurii şi interfeţei grafice şi până la
finalizarea programării şi introducerea propriu-zisă a
datelor - imagini, text, fişiere şi alte elemente - care
alcătuiesc conţinutul sitului.
Primul sit din istorie a fost realizat în anul 1991, de
către inventatorul www-ului, Tim Berners Lee, siturile
apărute, inițial nu erau complexe şi încărcate grafic cum
sunt în prezent, limbajul utilizat - HTML - nefiind puternic
şi permiţând numai o serie limitată de formatări, precum
şi inserarea de link-uri, pentru a putea "lega" paginile
între ele, webdesignul fiind, de fapt, mai mult
"programare" web.
Siturile, în forma în care ele se afişează în
browsere, sunt de fapt interpretări vizuale, menite să fie
înţelese de orice persoană, fără să fie necesare
cunoştinţe în domeniul informaticii sau al secvenţelor de
cod redactate de programatori. Aceştia lucrează ori în
diverse limbaje din care apoi se generează limbajul
specific de script al internetului HTML (HyperText Markup
Language), ori direct in HTML.

3
 Cum realizăm un site web?

Dacă nu ar exista browserele care ştiu să

interpreteze limbajul de script şi să afişeze rezultatul pe
ecran, siturile ar fi doar înşiruiri de texte neformatate şi,
cel mai probabil, fără imagini. În principiu, limbajul HTML
indică locul în care să se afişeze diversele elemente
vizibile, dimensiunea, culoarea, precum şi alţi parametri
care conferă unei pagini web atât aspectul dorit cât şi
funcţionalitate optimă.
Vreau să mulțumesc pentru apariția acestei cărți,
soției mele care m-a sprijinit constant în activitatea de
studiu. Totodată, mulțumesc Agenției ANPCDEFP și
Comisiei Europene, care în anul 2005, mi-au furnizat un
grant de studiu al paginilor web la Universitatea ”La
Sapienza” din Roma, în cadrul acestuia realizând cu
adevărat felul de structurare a unui sit web.

Totodată mulțumesc pentru sugestii și încurajări

doamnei directoare Nițoi Leontina(Colegiul Tehnic
”Lorin Sălăgean”).

Menționez că acest material a fost analizat și

apreciat de către domnul lector univ. dr. Dumitru Bălă
de la Universitatea din Craiova, având un nivel calitativ
ridicat și fiind un ajutor valoros pentru cadrele didactice
din învățământul preuniversitar.

4
 Cum realizăm un site web?

Introducere în limbajul HTML

Cartea de faţă foloseşte limbajul HTML versiunea

4.0 pentru construcţia paginilor şi siturilor web, din acest
motiv am considerat că este necesar să facem câteva
precizări importante pentru cititor. De exemplu faţă de
versiunea anterioară, se încurajează separarea clară
între structură şi aspectul paginii, acesta fiind un element
cheie în înţelegerea versiunii discutate în carte.
Folosirea marcajelor în structură şi a fişierelor de
alte tipuri (Javascript, CSS), permite o mai mare
independenţă de dispozitivul fizic, ce permite folosirea
paginii web prin ajustare, pe toate tipurile de medii fizice
de la telefonul mobil până la dispozitivele de tip navigare
sau GPS. Totodată se pune problema schimbului de
informaţie între două sau mai multe calculatoare şi
rezolvarea optimă a acesteia, situaţie ce implică
respectarea unor "reguli de comunicare" pe care
calculatoarele sa le folosească uzual.
Transferul datelor între două calculatoare se
realizează prin folosirea acestor "reguli de comunicare",
exact ca în situaţia comunicării dintre două persoane din
ţări diferite – folosind un limbaj universal, adică limba
engleză, iar informaţia oferită de una dintre părţi poate fi
preluata si mai apoi înţeleasă de către cealaltă persoană
implicată în comunicare. Regulile după care două
calculatoare ce rulează cu sisteme de operare diferite
transferă datele unul către altul sunt stabilite de către

5
 Cum realizăm un site web?

protocoalele de comunicaţie TCP/IP. Descrierea acestor

protocoale nu face obiectul cărţii de faţă, dar este
necesară prezentarea succintă a acestora şi anume
precizez că HTTP (Hypertext Transfer Protocol –
Protocol de Transfer a Textului cu Marcaje) este
protocolul folosit la transferul acestor pagini web.
HTTP este protocolul cel mai des utilizat pentru
accesarea informaţiilor în reţeaua Internet, informaţii care
sunt păstrate pe servere conforme cu standardele W3C
sau „popular” WWW (World Wide Web). În momentul în
care folosim o aplicaţie de tip browser sau „motor de
căutare” – (traducerea nu este ceea mai potrivită), ca de
exemplu Internet Explorer sau Mozilla Firefox şi
introducem de exemplu www.google.ro sau doar
google.ro, aplicaţia de fapt asociază automat protocolul
http, deoarece acesta este protocolul implicit şi adresa
devine http://www.google.ro, dacă nu mă credeţi priviţi
bara de adrese. Automat va rula un program
corespunzător pe calculatorul destinație ce înțelege
protocolul respectiv şi care va folosi limbajul HTML,
pentru afişarea fişierului. Fișierul destinație trebuie sa fie
un document HTML (HyperText Markup Language), un
fișier grafic, de sunet, de animație, un program
executabil pe server-ul respectiv sau un editor de texte.
HTML (Hypertext Markup Language - Limbajul
de Marcare HiperText) oferă unui program de tip
browser sau interpretor de HTML informaţii despre
modul cum este formatat conţinutului unui fişier şi cum
se realizează legăturile acestuia cu alte fişiere.

6
 Cum realizăm un site web?

Ce este adresa unui fişier web? Reprezintă calea

obişnuită pentru accesarea unui fişier sau o anumita
secţiune din fişier, stocat pe un server, prin folosirea
structurii arborescente a server-ului respectiv şi evident a
protocolului descris anterior. Serverul Web caută fișierul
rădăcină, fișier care - de cele mai multe ori - poartă
numele "index.html sau "default.html". Dacă un
asemenea fişier nu există, sau nu a fost definit ca fişier
implicit in cadrul serverului, acesta din urmă întoarce
utilizatorului care a cerut adresa respectivă un mesaj de
eroare şi oferă un ajutor contextual pentru depanarea
problemei apărute.
Exemplu de adresă web:
http://www.htmlhelp.com/copyright.html, unde
copyright.html, este numele fişierului html, aflat pe
serverul www.htmlhelp.com.

Cum creăm o pagină web simplă cu

aplicaţia Notepad?

7
 Cum realizăm un site web?

Vă prezint mai jos câteva explicaţii privind modul

în care vă puteţi organiza activitatea:

1. Pentru început creaţi-vă folderul de lucru

într-olocaţie aleasă de dumneavoastră, de exemplu pe
Desktop sau pe o partiţie de lucru, evitaţi pe cât puteţi
partiţia principală C:\, din motive de securitate.
2. Deschideţi editorul de text Notepad, cu care veţi
lucra în procesul de învăţare şi scrieţi fiecare exemplu
pe care îl găsiţi aici. E recomandabil să încercaţi să
folosiţi şi exemplele găsite în reţeaua Internet, ştiut fiind
faptul că ”…repetiţia este mama învăţării…”.
3. Salvaţi apoi fişierul în folderul creat la pasul 1 de
către dumneavoastră cu numele dorit şi cu extensia
.html sau extensia
.htm, însă este
necesar ca să
folosiţi de fiecare
dată aceeaşi
extensiei.
4. Iată un exemplu
mai jos:

Și executând comanda File – Save as…,

obținem:

8
 Cum realizăm un site web?

Operaţia de salvarea în folderul tema are două

componente esenţiale:

1. File name – tema1.html

2. Save as type – All Files

Rezultatul este afişat mai jos:

9
 Cum realizăm un site web?

Și vizualizarea rezultatului se află pe pagina

următoare:

Componentele unui document HTML

Un document HTML are trei componente

principale:

1. Componenta ce conţine informaţii despre fişierul

HTML
2. Componenta antet(Head) a fişierului
3. Corpul(Body) fişierului

Marcajele „<” şi „>” sunt folosite pentru scrierea

comenzilor ce vor fi interpretate de browser – exemplul
cel mai elocvent este <HTML> şi </HTML> ce reprezintă
începutul şi sfârşitul paginii web, înglobând antetul si
corpul fişierului, în sensul că blocul de text cuprins între
ele este scris şi formatat în limbajul HTML standard. În
continuare vă ofer sursa paginii prin intermediul căreia

10
 Cum realizăm un site web?

am explicat în esență, cum se salvează o pagină web

simplă în cadrul unui folder de lucru. Folosirea folderului
nu o explic încă, dar v-a deveni mai clară utilitatea sa la
folosirea fișierelor externe.

Sursa paginii web:

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

4.0 Transitional//EN">
<html>
<head>
<!—În antetul fişierului avem titlul fişierului-->

<title>Titlul fişierului HTML</title>

<!—Definirea tipului şi a setului de caractere folosit

-->
<META http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<!--Corpul fişierului. Vom plasa conţinutul paginii pe
care o creăm-->
Bine aţi venit pe pagina mea. E un început!
</body>
</html>

Sau mai simplu și pe înțelesul tuturor:

<html>
<head><title>Titlul fişierului HTML</title>

11
 Cum realizăm un site web?

</head>

<body>
Bine aţi venit pe pagina mea. E un început!
</body>
</html>

Componenta ce conţine informaţii despre

fişierul HTML identifică versiunea limbajului HTML
folosit:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0

Transitional//EN">

De obicei editoarele de HTML introduc automat

textul necesar la începutul fişierului.

Componenta Antet(Head) a fişierului

Componenta antet (Head) a fişierului este încadrată

de controalele <HEAD> si </HEAD>. Prezenţa celor
două controale în document ajuta la o împărţire şi
structurare mai clară a fişierului, deoarece conţine titlul
fişierului (pentru a fi afișat pe bara de sus a ferestrei
programului de navigare sau pentru ca fişierul sa poată fi
mai ușor identificat de către utilizator), cuvinte-cheie care
folosesc motoarelor de căutare, precum si alte informaţii
legate de fişierul creat, dar nu sunt afișate de către
browser.

12
 Cum realizăm un site web?

Linia următoare:
<title>Titlul fişierului HTML</title>
reprezintă titlul fişierului. Textul dintre marcajele <title>
şi </title> - va fi afișat pe bara de titlu a browser – ului
sau va putea fi folosit de utilizatori pentru păstrarea
fişierului în listele specifice ale acestui program.
Linia:
<META http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
are următoarea semnificație:
<META> reprezintă meta-informații despre document
declarând anumite proprietăţi împreună cu valorile lor
definite intern. Cu ajutorul elementului META se pot
preciza informațiile care vor fi trimise în antetul fişierului,
informații specifice protocolului HTTP şi pe care
browserul le interpretează pregătind afișarea fişierului.

1. http-equiv = numele informației meta pentru un

document HTML - "text/html"
2. content = pentru conținutul (valoarea) informației
respective.

Setul de caractere folosit – charset =iso-8859-1

reprezintă o mulțime de caractere folosite în alfabetul
diferitelor limbi, caractere identificate printr-un număr de
cod. De aceea, pentru ca browserul să descifreze corect
informația pe care o primește este recomandabil, ca
acest atribut să fie specificat în antetul fiecărui
document. Seturile de caractere sunt niște standarde
stabilite de către ISO (Organizația Internațională pentru

13
 Cum realizăm un site web?

Standardizare). Deci, charset iso 8859-1 - ( sau ISO

Latin-1) reprezintă setul care conține cele mai răspândite
extensii ale alfabetului latin şi este cel mai des întâlnit.
Alte tipuri de informaţii META sunt <META name="nume
proprietate" content="valoare proprietate">.
Se pot introduce astfel informaţii privind autorul
paginii respective, informații in scopuri de indexare a
paginii de către motoare de căutare Web.

<META name="author" content="Profesor">

<META name="keywords" content="Html, CSS,
Javascript">

Corpul fişierului

Tot conţinutul paginii web se plasează în corpul

fişierului şi este încadrat de marcajele <BODY> si
</BODY>. Marcarea corpului fişierului cu cele doua
etichete este opțională, dar folosirea lor determină o mai
mare claritate în structurarea fişierului pe elemente
componente. Opţional marcajul <BODY> poate sa
conţină atribute referitoare la fondul si marginile
documentului sau culoarea textului.

• background="Poze/elev.jpg" încarcă imaginea de

fond a fişierului dintr-un fişier imagine de tip JPG.
• bgcolor="#ffffff" modifică culoarea fundalului
documentului (Alb).

14
 Cum realizăm un site web?

• text="#000000"modifică culoarea textului existent in

document, în cazul nostru negru.

În cazul în care sunt prezente amândouă,

atributele background şi bgcolor, browserul caută fișierul
imagine de fond şi dacă acesta există, el va fi afișat şi
multiplicat pentru a acoperii întreaga suprafață a
fişierului, culoarea de fond fiind vizibilă, numai daca
fundalul imagini este transparent.

Introducerea textului

Conţinutul fişierului HTML constă în text, imagini,

sunete, efecte dinamice şi fiecare dintre acestea posedă
caracteristici distincte şi uşor de urmărit în cadrul codului
din Notepad. Pentru început vom analiza caracteristicile
textului, urmând ca în capitolele următoare să analizăm
şi celelalte componente.
În documentele create de noi vom folosi stiluri de
text diferite pentru a evidenţia anumite cuvinte sau
pentru a le acorda o anume semnificaţie (de citate, de
nume, etc.). Pentru a realiza aceste stiluri specificăm
valorile pentru atributele fontului:

• litera
• culoarea
• stilul
• dimensiunea

15
 Cum realizăm un site web?

Stiluri pentru litera textului

Pentru ca un bloc de text sa apară în pagină

evidențiat (cu caractere aldine), trebuie inclus între
separatorii <b>...</b> ( b vine de la bold =îngroşat ).
<b>Text scris cu caractere îngroșate.</b>
Pentru ca un text sa fie scris cu caractere cursive
acesta trebuie inclus într-un bloc delimitat de etichetele
<i>...</i>( i vine de la italic).
<i>Text scris cu caractere înclinate.</i>

Pentru a insera un bloc de caractere subliniate se

utilizează etichetele <u>...</u> (u vine de la underline).
<u>Text scris cu caractere subliniate.</u>

Pentru a indica folosirea fontului monospaţiu, adică

forma de scriere în care fiecare caracter ocupa pe lăţime
același spațiu se utilizează etichetele<tt>…</tt>( tt
înseamnă " teletype " = teleprinter).
<tt>Text scris la maşina de scris.</tt>
Pentru ca o porţiune din text să aibă caractere mai
mari cu o unitate decât cele din restul textului acesta
trebuie inclus într-un bloc delimitat de etichetele
<big>...</big>. Pentru ca o porţiune din text să aibă
caractere mai mici cu o unitate decât cele din restul
textului acesta trebuie inclus într-un bloc delimitat de
etichetele <small>...</small>.

16
 Cum realizăm un site web?

Pentru a insera secvențe de text aliniate ca indice

(subscript) trebuie delimitate de etichetele
_... sau ca exponent (superscript), aceste
fragmente de ^.... Pentru a insera un bloc
de caractere tăiate cu o linie se utilizează etichetele
<strike>...</strike>.

Exemplu de cod sursă:

Aici este textul din fişier.

<big>Acest text este mai mare decât restul

textului.</big>

<small> Acest text este mai mic decât restul

textului.</small>

_{Acest text este indice la restul textului.}

<sup> Acest text este exponent la restul

textului.</sup>

<strike> Acest text este tăiat cu o linie.</strike>

Vizualizare efectelor:

17
Cum realizăm un site web?

18
 Cum realizăm un site web?

Controlul <FONT>
Acest control valabil şi pentru versiunile anterioare
de HTML permite adăugarea următoarelor caracteristici:
tipul caracterelor, dimensiunea şi culoarea lor,
formatând un bloc de text la fel ca procesoarele de text
conform dorinţelor creatorului documentului.

Aceste caracteristici le voi explica mai jos pentru

înţelegerea clară a lor:

Font Face - folosit pentru alegerea aspectului literei

utilizate în text. Valoarea primită de proprietate trebuie să
fie un font recunoscut de browser şi recomandabil este
să folosiţi fonturile obişnuite, pentru ca browserul să
recunoască tipul de font specificat.

<FONT Face="Courier">

Font Size este folosit mărimea fontului utilizat şi

poate lua valori de la 1 la 7. Această valoare este de

19
 Cum realizăm un site web?

două tipuri:

Absolută – specifică dimensiunea exactă a

fontului.
<FONT Size = 5>

Relativă – specifică dimensiunea fontului faţă de

cea a fontului curent.

<FONT Size = +3> Valoarea implicită a

dimensiunii fontului este 3.
Font Color – este atributul cu ajutorul căruia se
poate stabili culoarea textului marcat. Valorile acestei
proprietăţi se pot scrie fie cu ajutorul codului hexazecimal
al culorii, fie cu ajutorul numelui culorilor de bază.
Exemplu:

<Font Color = blue>

<Font Color = #f>

Exemplu de realizare în codul HTML:

Sursă HTML:

<font face="Tahoma" size = 5>Primul site web

realizat de mine.</font>

Nu durează mult și arată acceptabil <font

color="#00ff00">, <br> însă mai am de lucru </font>
<font size = 6> în realizarea paginilor web <br> <font
face="arial" color="#ff3300"> ce fac parte din site</font>.

20
 Cum realizăm un site web?

Pe pagina cealaltă am afișat rezultatul codului

anterior și veți putea observa diferențele între fontul cu o
caracteristică și alta.
Vizualizare:

Inserarea unei imagini

Pentru a introduce o imagine în documentul HTML

este necesară folosirea marcatorului IMG(image în
engleză), al cărui atribut src(source)este folosit la
identificarea imagini în spaţiul în care se află sau URL-ul
acestuia:

<IMG src = "nume_imagine.gif">

Marcatorul IMG nu are marcaj de încheiere, deoarece

marcatorul nu are conţinut pe care sa-l includă şi acceptă
doar anumite tipuri de fişiere imagine compatibile cu
HTML cum ar fi gif, jpeg si png. E bine de clarificăm
câteva aspecte legate de folosirea acestor tipuri de
fişiere:

21
 Cum realizăm un site web?

 GIF (Graphics Interchange Format) cu extensia

.gif sunt fişiere folosite pentru imagini simple, fără cerinţe
prea mari în privinţa spaţiului de lucru(8 biţi pentru o
culoare, 256 culori posibile) şi este recomandat să le
folosiţi pentru sigle, pentru benere, pentru trasarea şi
delimitarea structurii grafice a paginii web, etc.

 JPEG (Joint Photographic Experts Group) cu

extensia .jpeg sau .jpg sunt fişiere folosite pentru
imaginile paginii web, deoarece au o calitate net
superioară în raport cu precedentele(24 biţi pentru o
culoare, 16777216 de culori posibile), suportă diverse
compresii şi modificări de nuanţe şi contraste

 PNG(Portable Network Graphics) cu extensia .png

sunt fişiere cu format inventate de firma Microsoft, în
ideea folosirii sale pe platforma Internet Explorer cu
predilecţie, are însă portabilitatea pe celelalte platforme
lasă de dorit;

Atributul Alt este folosit pentru afişarea unui text în

locul imaginii pentru situaţia în care browser-ul nu
lucrează decât în mod text sau in cazul dacă, utilizatorul
renunţă la încărcarea imaginilor (opțiune oferita de
majoritatea programelor de navigare Web). În cazul
afişării imaginii acest conţinut va fi afişat în format tool-tip
(casetă de informare).

Chenarul unei imagini se realizează cu atributul

border ce primeşte diverse valori:

<img src="imagine.gif" border="3">

22
 Cum realizăm un site web?

<img src="imagine1.gif" border="6">

Stabilirea dimensiunilor imaginii

Dimensiunile iniţiale ale imaginii pot fi modificate

prin intermediul atributelor width (lăţime) și height
(înălţime). Atributele width si height stabilesc de fapt
dimensiunile suprafeței din document ce este ocupată de
imagine şi prin acest fapt determinăm încărcarea rapidă
a documentului în fereastra programului browser. Dacă
imaginea are dimensiuni mai mici sau mai mari, decât
cele indicate imaginea va fi deformată pentru a se
încadra în suprafața asociată de programul browser.

Exemplu imagine.gif are dimensiunile de 43 pixeli

x 37 pixeli
Dimensiunile iniţiale pentru lăţime şi înălţime:
<img src="imagine.gif" width=43 height=37>

23
 Cum realizăm un site web?

Dimensiuni duble pentru lăţime şi înălţime:

<img src="imagine.gif" width=86 height=74>

Alinierea imaginii în raport cu textul

Pentru a alinia imaginea în raport cu textul din jurul

său este obligatorie folosirea atributului align, care are
mai multe valorile pe care le poate lua:
o top este folosită pentru a alinia textului faţă de
partea de sus a imaginii
o bottom este folosită pentru a alinia textului faţă
de partea de jos a imaginii
o middle sau center este folosită pentru a alinia
textului faţă de centrul imaginii
o left este folosită pentru a alinia textului faţă de
partea stânga a paginii, blocul de text aflat după

24
 Cum realizăm un site web?

marcajul imaginii ocupă spațiul liber din dreapta şi

de sub ea.
o right este folosită pentru a alinia textului faţă de
partea dreapta paginii, blocul de text aflat după
marcajul imaginii ocupă spațiul liber din stânga şi
de sub ea.

Inserarea de tabele

Avem foarte multe posibilități de a prezenta în

interiorul documentului informația într-o formă
structurată, iar folosirea tabelelor este utilă, mai ales în
situația în care informația are un grad mare de
complexitate.

Ce este un tabel? Un tabel este o suprafață

dreptunghiulară formată din linii şi coloane. Elementul
creat prin intersecţia unei linii cu o coloană se numeşte
celulă. O linie a tabelului este realizată din mai multe
celule aliniate pe orizontală, iar o coloană este realizată
din mai multe celule aliniate pe verticală. Celulele
tabelului pot să conțină conţină text, imagini, legături
web, iar independent de celelalte celule, fiecare celulă
poate avea propriile caracteristici pentru culoarea de
fundal, culoarea şi alinierea textului.

Pentru a insera un tabel într-un document HTML se

folosesc marcajele <TABLE> şi </TABLE>, marcajul

25
 Cum realizăm un site web?

de final este obligatoriu, deoarece absenţa lui nu permite

afişarea corectă a tabelului. Pentru inserarea unei linii
într-un tabel se folosesc marcajele <TR> şi </TR> (table
row). Pentru inserarea unei celule cu informaţii se
folosesc marcajele <TD> şi </TD> (table data).
Marcajele de închidere pentru inserarea unei linii sau
celule sunt opţionale, deoarece fiecare linie şi celulă este
urmată de alta şi acestea pot realiza închiderea
necesară.
Vom exemplifica ceea ce am discutat anterior pe un
caz concret al unui tabel cu bordura de 2

Caracteristici ale tabelului

Border

Introduce grosime în pixeli pentru marginea sau

bordura tabelului, dacă valoarea este nulă, tabelul nu
afişează bordură sau linii interne.

26
 Cum realizăm un site web?

Width şi height

Stabilesc dimensiunile tabelului pe orizontală (width –

lăţime) şi pe verticală (height – înălţime) şi sunt
exprimate în pixeli cu valori întregi pozitive sau în
procente între 1-100 din lăţimea şi înălţimea totală a
paginii. Dimensiunile sunt calculate de
browser(programul de navigare Web) în funcţie de
opţiunile introduse de programator, prin cele doua
caracteristici, dar si de dimensiunile elementelor din tabel
pentru a se respecta afişarea corectă a acestora.

Exemplu:

1. Am modificat marcajul table adăugând dimensiuni

pentru tabel width=200 pixeli şi height=200 pixeli

27
 Cum realizăm un site web?

2. Am modificat marcajul table adăugând dimensiuni

pentru tabel width=25% din lăţimea paginii şi
height=25% din înălţimea paginii

Align

Determina alinierea pe orizontală a tabelului în cadrul

paginii web şi are următoarele opţiuni posibile:

• left – textul ce urmează după tabel va fi afişat în

dreapta tabelului;
• center - textul ce urmează după tabel va fi afişat sub
tabel.
• right - textul ce urmează după tabel va fi afişat în
stânga tabelului;

28
 Cum realizăm un site web?

Exemplu:

Aliniere tabel la stânga textului:

Cellspacing

Stabileşte spaţiul (în pixeli) dintre două celule

alăturate ale unui tabel, precum și spaţiul dintre marginile
tabelului şi celule.

Exemplu:

Cellpading

29
 Cum realizăm un site web?

Stabileşte spaţiul (în pixeli) dintre marginile unei

celule și conţinutul acesteia.

Bgcolor

Stabileşte culoarea de fond a tabelului.

<table border="2" cellspacing="7" cellpadding="5"
bgcolor ="aqua">
Background
Stabileşte imaginea de fond a tabelului.
<table border="2" cellspacing="7" cellpadding="5"
background =…/imagine.gif">
Hspace şi Vspace
Reprezintă distanţa pe orizontală şi respectiv,
verticală dintre tabel şi celelalte elemente ale paginii
Web, dar este recunoscut implicit doar de Netscape nu şi
de Internet Explorer.
Inserarea listelor

30
 Cum realizăm un site web?

Listele reprezintă modalităţi de organizare mai

simplă a datelor din pagina web şi servesc la prezentarea
informaţiilor în mod organizat, pentru a fi mai accesibile şi
uşor de parcurs. Listele le regăsim şi în alte aplicaţii, fiind
foarte uşor de implementat în oricare situaţie. Listele sunt
organizate la rândul lor în trei categorii:
• liste ordonate (cu numere sau litere),
• liste neordonate (cu simboluri),
• liste de definiţii, fără marcaje.
Liste ordonate

Listă ordonată este un porţiune de text delimitată

de marcajele <OL> şi </OL> (ordered list – listă
ordonată), ale cărei elemente se marchează cu numere.
Fiecare componentă a listei este descrisă de marcajul
<LI> (list item – element de listă), iar lista este indentată
în raport cu pagina şi orice element nou al listei, începe
pe o linie nouă.

Exemplu de listă ordonată simplă:

31
 Cum realizăm un site web?

Marcajul <OL> poate avea opţiunea type, ce

stabileşte tipul de caractere utilizate pentru ordonarea
listei. Valorile opţiunii type sunt:
A - pentru ordonare cu litere mari
<OL type="A">
a - pentru ordonare cu litere mici
<OL type="a">
I - pentru ordonare cu cifre romane mari
<OL type="I">
i - pentru ordonare cu cifre romane mici
<OL type="i">

Exemplu pentru opţiunea type:

Liste neordonate

32
 Cum realizăm un site web?

O listă neordonată este o mulţime de componente

asemănătoare, aranjate într-o ordine oarecare. Lista este
o porţiune de text delimitată de marcajele pereche <UL>
şi </UL> (unordered list – listă neordonată). Fiecare
componentă a listei este introdusă prin marcajul simplu
<LI> (list item – element listă). Cu toate că eticheta <LI>
este o etichetă container, eticheta sa de închidere, </LI>,
este opţională. Dacă nu este prezentă, la întâlnirea unei
noi etichete <LI> se consideră că vechea etichetă este
închisă.

Exemplu de listă neordonată:

33
 Cum realizăm un site web?

Exemplu de listă neordonată cu caracteristica type ce

stabileşte simbolul afişat în faţa fiecărui element al listei:

Valorile acestuia sunt următoarele:

1. circle (cerc)
2. disc (disc plin)
3. square (pătrat)

Liste de definiţii

34
 Cum realizăm un site web?

Lista de definiţii reprezintă un tip de listă cu

componente ce nu sunt numerotate, cu simboluri şi care
prezintă două nivele de indentare. Listele de definiţii sunt
porţiuni de text incluse între marcajele <DL> şi </DL>
(definition list – listă de definiţii), cu marcaj de închidere
obligatoriu. Orice componentă a listei este introdusă prin
marcajul <DT> (definition term – termen de definiţie) şi
conţine un număr de elemente care îl definesc, introduse
cu marcajul <DD> (definition description – descriere
definiţie).

Inserarea legăturilor web

Legăturile (link-urile sau hiperlegăturile) sunt marcaje

în fişierul HTML care definesc în fapt structura de
navigare a unui site web, realizând conexiunea între
paginile componente, exact ca o scurtătură din spaţiul de
lucru al ecranului Windows, către un fişier aflat undeva
pe discul C. Hipertextul este tip de text, ce are
comportament modificat datorită codului HTML şi este

35
 Cum realizăm un site web?

total diferit de textul clasic din aplicaţia Word de exemplu

şi permite nu doar salt dintr-un fişier în altul pe acelaşi
calculator, dar şi către un calculator aflat oriunde în lume.

Cum se inserează o legătură într-o pagină web(fişier

HTML) ?

Vom folosi marcajele <a> şi </a> a – anchor

înseamnă ancoră, nume destul de sugestiv pentru
elementul descris, deoarece o navă pentru a rămâne
într-un anumit loc are nevoie de ancoră, la fel şi în acest
caz pentru a putea deschide o altă resursă de date,
folosim marcajul respectiv. Marcajul <A> are un
parametru obligatoriu href (hypertext reference –
referinţă hipertext) ce primeşte ca valoare adresa
fişierului ce dorim să-l deschidem sau URL-ul
respectiv(Uniform Resource Locator – Resursă
Localizată Uniform). Fişierul poate fi imagine, text sau
HTML, fişierul HTML în care plasăm legătura se
numeşte sursă, iar fişierul către care avem legătura se
numeşte destinaţie.

Linia de program este:

<a href= adresa fişierului >text descriptiv </A>

iar între marcajele <a> şi </a> poate fi plasată şi o

imagine. Textul dintre marcaje va fi afişat subliniat şi de
culoare albastră, iar imaginile au bordură de culoare
albastră şi acesta poate fi plasat chiar în interiorul
textului, tabelelor şi al listelor.

36
 Cum realizăm un site web?

<table> <tr> <a href= adresa fişierului >text

descriptiv </A> </tr> </table>

Legături în aceeaşi pagină

Locul în care dorim să facem legătura se

realizează introducând marcajul <A> cu caracteristica
name, în faţa unui anumit element din pagină – un titlu,
o imagine, un tabel şi name primeşte ca valoare un nume
atribuit ancorei.

Cum se construieşte?

Se introduce în locul dorit linia de mai jos:

<a name = nume legătură> </a>

Legătura se realizează cu caracteristica href a

marcajului <a>, şi legătura primeşte ca valoare #nume
legătură, aşa cum arată instrucţiunea de mai jos:

<a href = #nume legătură>text destinaţie</a>,

textul destinaţie fiind afişat de culoare albastră şi

subliniat. Dacă plimbăm cursorul de maus deasupra
legăturii, cursorul va lua formă de mânuţă şi prin clic pe
text vom putea să facem salt la pagina sau fişierul dorit.

Legături către altă pagină din folderul comun

37
 Cum realizăm un site web?

Construcţia sitului web se bazează pe existenţa mai

multor pagini web sau fişiere, pentru a realiza o structură
ierarhică de legături, ce v-a permite navigarea cu
uşurinţă de la o pagină, către altă pagină din folder.
Pentru a permite acest lucru se construieşte următoarea
structură:

<a href="nume_fişier_ţintă.html">TEXT</a>

Atributul href primeşte ca valoare chiar numele

fişierului ţintă, şi face posibil saltul la conţinutul acestuia,
fiind o legătură locală către un fişier aflat pe acelaşi
server.

TEXT – este textul pe care se face clic cu maus-ul

pentru a urma calea indicată de atributul href, şi pentru a
activa hiperlegătura. Acest text este afişat subliniat şi
având culoare albastră.

Cel mai simplu caz de aplicare a cunoștințelor

anterioare, este crearea unor legături între două fişiere
aflate în acelaşi folder sau folder comun, ca model de
lucru pentru crearea unui sit web funcţional apoi, prin
generalizare.

Vom construi în paginile web două structuri

asemănătoare:

În fișierul 1 vom introduce <a

href="fişier2.html">Către fişier 2</a>.

În fișierul 2 vom introduce <a

href="fişier1.html">Către fişier 1</a>.

38
 Cum realizăm un site web?

Conţinutul fişierului 1 va fi următorul:

<html>
<body>
<h1>Fisier 1 </h1><br>
<a href="fişier2.html">Către fişier 2</a>
</body>
</html>

Conţinutul fişierului 2 va fi următorul:

<html>
<body>
<h1>Fisier 2 </h1><br>
<a href="fişier1.html">Către fişier 1</a>
</body>
</html>

39
 Cum realizăm un site web?

Dacă facem clic pe oricare din hiperlegături, Către

fișier 1 sau Către fișier 2, acestea permit accesul la
fişierul vecin, deci putem trece din fişierul 1 în fişierul 2 şi
invers.
Legături către o pagină aflată în alt folder
În situaţia în care este necesar să legăm două
pagini aflate în foldere diferite(situaţie nerecomandată
pentru încărcarea în server), pentru a preciza poziţia
paginilor în structura de foldere, se va folosi adresarea
relativă sau adresarea absolută a acestora.
Adresarea relativă se referă la calea spre pagina
cu care facem legătura, din documentul în care ne
aflăm, şi presupune parcurgerea nivel cu nivel, a
structurii de foldere din calculator sau server folosind şirul
de caractere ../.
Adresarea absolută se referă la calea completă
spre pagina cu care facem legătura, pornind de la
folderul principal, ce se află de obicei pe discul C, din
care se ajunge la pagina ţintă.

Exemple de structuri:

1. Relativă - < a href="../New

Folder/fisier1.html>Catre fisier 1</a>

40
 Cum realizăm un site web?

2. Absolută - < a href="C:/Documents and

Settings /Administrator /Desktop /New
Folder/fisier1.html>Catre fisier 1</a>

Legături către pagini externe

Dacă dorim ca situl nostru să aibă referinţe externe,

respectiv legături către alte situri web, este obligatoriu să
adaptăm structura legăturii în mod corespunzător. Acest
lucru se realizează prin modificarea valorii atributului
href, prin asocierea acesteia cu URL-ul sitului respectiv,
ca de exemplu http://www.google.ro/ ce reprezintă URL-
ul motorului de căutare Google.
<a href="http://www.google.ro"> GOOGLE<a>
Implementare:
<html>
<body>
<h1>Legatura catre Google </h1><br>
a href="http://www.google.ro"> GOOGLE<a>
</body>
</html>

41
 Cum realizăm un site web?

Bineînţeles că hiperlegătura nu v-a funcţiona decât,

dacă aveţi conexiune Internet şi este foarte utilă pentru
vizitatorii sitului dumneavoastră în situaţia în care vor să
caute o anumită informaţie. Reamintesc că în locul

numelui sitului ţintă, se poate introduce ip-ul respectivului

sit, dar este o complicaţie inutilă şi nu merită folosit.

Crearea unui sit web funcţional

Pentru a crea un sit web funcţional şi corespunzător

este necesar ca anterior să fie realizate câteva etape
cheie:
1. Planificare
2. Proiectare
3. Testare
Autorul în această carte îşi propune să realizeze un
sit simplu de test, mai mult cu valoare pedagogică decât
practică, format din patru fişiere distincte aflate într-un

42
 Cum realizăm un site web?

folder comun ce se pot încărca ulterior într-un server web

de găzduire.
Vom începe cu prima etapă, aceea de planificare a
sitului şi care trebuie să răspundă la întrebarea:

Care este publicul ţintă al sitului, ce scop

trebuie să aibă, ce informaţii trebuie să conţină?

Având în vedere că anterior am stabilit, că situl va fi

unul pedagogic, de învăţare, este destul de comod să
folosim o temă legată de şcoală. De exemplu să
presupunem că dirigintele unei clase doreşte să încarce
situaţia şcolară cu note, medii şi absenţe la sfârşit de
semestru pentru a fi accesate, de către părinţii ocupaţi
atunci când ajung acasă. Publicul ţintă a fost aşadar
stabilit în mod precis, ca fiind părinţii elevilor dintr-o
anumită clasă, putem să pornim la planificarea sitului.
Ce aşteptări au părinţii elevilor, ce vor să
cunoască în privinţa activităţilor desfăşurate de
elevi?
1. Notele la fiecare disciplină şcolară;
2. Absenţele la fiecare disciplină şcolară;
3. Mediile la fiecare disciplină şcolară;
4. Abateri de la conduita şcolară;
Vom crea 4 fişiere ce vor conţine fiecare,
informaţii conform cu enunţurile prezentate
mai sus, în folderul Sit părinți:

43
 Cum realizăm un site web?

şi va conţine următoarea structură de fişiere:

Etapa a doua este cea de proiectare a fiecărui fişier

în parte. Primul pas constă în crearea unei structuri
şablon ce va fi copiată în toate fişierele:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
TRANSITIONAL//EN">
<html>
<head>
<title>Numele fisierului(note, absente, medii,
abateri)</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="red">
<h1 align="center">Informatiile despre note,
absente, medii, abateri </h1><br>
</body>
</html>

44
 Cum realizăm un site web?

Şi are următorul efect:

Primul fişier ce va fi proiectat este fişierul cu notele

elevilor la disciplinele şcolare al cărui conţinut este
realizat bidimensional, ţinând cont de numele elevilor –
prima dimensiune şi nota la disciplina şcolară – a doua
dimensiune. Forma de organizare cea mai potrivită
rămâne tabelul:

Şi ţineţi cont că nu am introdus în fişierul Note.html,

toţi elevii şi notele lor, ci doar trei dintre aceştia, pentru a
înţelege mecanismul de lucru:

45
 Cum realizăm un site web?

<h1 align="center"> Notele elevilor de la

clasa......</h1><br>
<table border="4">
<tr>
<td>Nume elev
<td>Note D1
<td>Note D2
și lista continuă până când realizăm toată linia tabelului
pentru discipline;
…………………..
<tr>
<td>Popescu Ion
<td>7,8,9
<td>4,5,6

și lista continuă până când realizăm toată linia tabelului

pentru note;
…………………..
<tr>
<td>Ionescu Ion
<td>7,8,9
<td>4,5,6

și lista continuă până când realizăm toată linia tabelului

pentru note;

46
 Cum realizăm un site web?

…………………..
<tr>
<td>Cristescu Stefan
<td>7,8,9
<td>4,5,6

și lista continuă până când realizăm toată linia tabelului

pentru note;
…………………..
</table>

Disciplinele se introduc cu listă neordonată:

<h1 align="center">Lista disciplinelor

scolare</h1><hr>
<ul>Discipline de studiu
<li>D1 Limba si literatura romana
<li>D2 Limba engleza

și lista continuă până când introducem toate disciplinele;

…………………..
</ul>

47
 Cum realizăm un site web?

Şi rezultatul arată cam aşa:

48
 Cum realizăm un site web?

Al doilea fişier ce va fi proiectat este fişierul cu

absenţele elevilor la disciplinele şcolare al cărui conţinut
este realizat bidimensional, la fel ca şi primul, singura
diferenţă va consta în introducerea unui câmp
suplimentar cu numărul total de absenţe înregistrat de
elev. Nu modificaţi decât conţinutul celulelor cu note şi
antetul tabelului:

49
 Cum realizăm un site web?

Fișierul cu abateri,adică cel de-al patrulea și ultimul

se realizează, cu o listă neordonată sau ordonată la fel
ca și în cazul fișierului anterior.
<h1 align="center">Lista abaterilor
scolare</h1><hr>
<ul>Abateri
<li>Ionescu Ion – chiul repetat
<li>Cristescu Stefan – distrugere obiecte scolare
și lista continuă până când introducem toate
abaterile;
…………………..

</ul>

Bineînțeles că se poate realiza un sit foarte valoros

pe aceeași temă, dar repet scopul a fost unul didactic, și
nu am încercat să aduc foarte multe elemente care să
îngreuneze munca unui începător.
Ideal pentru mulți creatori este să utilizeze un editor
de HTML, care să creeze rapid și elegant situl web, sunt
însă situații în care cunoașterea codului HTML contribuie
la proiectarea mai precisă a paginilor și apoi
reproiectarea sau chiar depanarea acestora.

Vă urez mult succes!

50
 Cum realizăm un site web?

Bibliografie

1. Wikipedia Enciclopedia Liberă

http://ro.wikipedia.org/wiki/Web_design

2. HTML pentru www cu XHTML si CSS. Ghid

de învățare rapidă prin imagini. Elisabeth
Castro. Editura TEORA.

3. Grafică și HTML pentru elevi. Emil Onea și

Dan Crintea. Editura Paralela 45.

4. http://www.w3.org/ pentru cele mai noi

specificații HTML.

51
 Cum realizăm un site web?

5. HTML pentru începători. Michael Karbo.

Editura Egmont.

52