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ă

1
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
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

2
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.

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

3
 copyright.html, este numele fişierului html, aflat pe
serverul www.htmlhelp.com.

Cum procedăm pentru a crea o pagină web

simplă

cu aplicaţia Notepad?

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-

o locaţ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:

4
 Și executând comanda File – Save as…, obținem:

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

componente esenţiale:

1. File name – tema1.html

2. Save as type – All Files

5
Rezultatul este afişat mai jos:

Și vizualizarea rezultatului se află pe pagina

următoare:

6
 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 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>

7
<!—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>
</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

8
 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.

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"

9
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 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">

10
 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).
• 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

11
î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

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>

12
 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>.

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>.

13
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>

<sub> Acest text este indice la restul textului.

</sub>

<sup> Acest text este exponent la restul

textului.</sup>

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

Vizualizare efectelor:

14
 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

15
 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
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:

16
<font face="Tahoma" size = 5>Primul site web
realizat de mine.</font>

Nu dureaza mult si arata acceptabil<font

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

Pe pagina cealaltă am afișat rezultatul codului

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

Vizualizare:

17
 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:

 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

18
 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">

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

Stabilirea dimensiunilor imaginii

Dimensiunile iniţiale ale imaginii pot fi modificate prin

intermediul atributelor width(lăţime) si 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>

20
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

21
o left este folosită pentru a alinia textului faţă de partea
stânga a paginii, blocul de text aflat după 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 de
final este obligatoriu, deoarece absenţa lui nu permite
afişarea corectă a tabelului. Pentru inserarea unei linii

22
î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

23
24