HTML

1. Introducere în HTML ........................................................................................................................................
2
1.1. Inter-reţele şi Internet .............................................................................................................................. 2
1.2. Terminologie web...................................................................................................................................... 8
2. Crearea site–urilor web ................................................................................................................................. 12
2.1. Tipuri de site-uri web .............................................................................................................................. 12
2.2. Etapele de realizare a unui site............................................................................................................. 13
2.2.1. Proiectare (Design).......................................................................................................................... 14
2.2.2. Promovarea site-ului (Marketing) .................................................................................................. 16
2.2.3. Gazduirea site-ului........................................................................................................................... 18
2.2.4. Administrarea site-ului..................................................................................................................... 19
3. Principiile proiectării unui site web............................................................................................................... 20
4. Bazele proiectării site-urilor Web ................................................................................................................. 26
4.1. Standardizarea HTML ............................................................................................................................ 27
4.2. Rezumat.................................................................................................................................................... 30
5. Fundamentele standardului HTML .............................................................................................................. 32
5.1. Etichete (tag-uri) ....................................................................................................................................... 33
5.2. Structura documentelor HTML.............................................................................................................. 43
6. Texte ................................................................................................................................................................ 47
6.1. Culori ......................................................................................................................................................... 47
6.1.1. Alegerea culorilor ............................................................................................................................. 51
6.2. Caractere speciale HTML........................................................................................................................ 52
6.3. Formatarea caracterelor .......................................................................................................................... 56
6.3.1. Formatare la nivel fizic .................................................................................................................... 57
6.3.2. Formatare la nivel logic................................................................................................................... 60
6.3.3. Formatare la nivel de comunicare................................................................................................. 63
6.4. Extensii Netscape şi Microsoft ................................................................................................................ 65
6.5. Formatarea textului .................................................................................................................................. 68
6.6. Sugestii privind aspectul textului............................................................................................................. 77
7. Legături în documente HTML ....................................................................................................................... 79
7.2. Adrese URL ............................................................................................................................................. 79
7.2. Legături (link-uri) ..................................................................................................................................... 81
7.2.1. Legătura la un URL ......................................................................................................................... 81
7.2.2. Legătura la o secţiune..................................................................................................................... 88
7.3. Adrese absolute şi adrese relative.......................................................................................................... 91
7.4. Legătura la o locaţie denumită din alt document................................................................................ 94
7.5. Comenzi rapide de la tastatură pentru link-uri.................................................................................... 94
7.6. Alte marcaje ............................................................................................................................................. 96
7.6.1. Informaţii de cale.............................................................................................................................. 96
7.6.2. Relaţii între documente ................................................................................................................... 97
Tutorial HTML
1. Introducere în HTML
1.1. Inter-reţele şi Internet
O reţea este un grup de computere capabile să comunice unele cu altele, să
partajeze fişiere, date, programe sau operaţii. Computerele dintr-o reţea sunt
conectate prin componente hardware şi software. Componenta hardware asigură
legătura fizică dintre computere (legături telefonice, fibre optice, routere, plăci de
reţea şi chiar calculatoare). Componenta software este reprezentată de programele
care fac posibilă utilizarea componentei hardware pentru comunicaţii şi schimbul de
informaţii. Reţelele pot fi de mai multe tipuri:
LAN (Local Area Network) – calculatoarele sunt plasate în interiorul
aceleaşi clădiri sau campus universitar;
MAN (Metropolitan Area Network) – reţea extinsă la nivelul unui oraş);
WAN (Wide Area Network) – reţea naţională.
Multe dintre reţelele de calculatoare sunt conectate între ele, formând inter-
reţele (reţele de reţele de calculatoare). O reţea de reţele se numeşte internet (“net”
însemnând în limba engleză “reţea”). Cea mai mare inter-reţea publică (reţea de
reţele de calculatoare cu acces public) este reţeaua Internet. În concluzie, Internet-
ul este o interconectare de LAN-uri, MAN-uri şi WAN-uri prin legături rapide (satelit,
circuite cu comunicaţie digitală etc.).
Pentru a fi identificate, calculatoarelor conectate la Internet li se atribuie
numere unice numite adrese de Internet. Deoarece utilizatorul reţine mai greu un
număr, calculatorului conectat la Internet i se mai atribuie şi un nume cunoscut ca
nume de domeniu. Domeniul poate conţine mai multe subdomenii. Schema folosită
de Internet pentru structurarea domeniului pe mai multe niveluri de subdomenii
formează sistemul numelor de domeniu (DNS – Domain Name System). Numele de
domeniu este format din mai multe părţi, separate prin punct, care corespund
numelor de subdomenii. De exemplu:
zz.alfa.beta.gamma.ro
În exeplul dat, domeniul este format din următoarele subdomenii:
Numele computerului: zz.
Grupul care gestionează calculatorul (exemplu: alfa) reprezintă un grup
de utilizatori sau un departament care foloseşte calculatorul.
2
Tutorial HTML
Organizaţia utilizatorului (exemplu:beta) reprezintă organizaţia din care

face parte grupul de utilizatori sau departamentul.
Tipul organizaţiei (exemplu:gamma) se referă la organizaţiile care fac
parte din acelaşi sistem.
Zona geografică sau ţara (exemplu:ro) este identificată printr-un cod.
Dacă în numele de domeniu nu apare acest cod înseamnă că acel
calculator se gaseşte în SUA.
Observaţie. Pentru identificare în reţeaua internet, calculatoarele folosesc
numere, iar oamenii nume. Pentru translatarea numelor în numere se folosesc
servere de nume. Ele sunt calculatoare dintr-un anumit domeniu (tipul
organizaţiei,organizaţia etc.)
Software-ul care permite lucrul în reţea respectă un set de reguli fixe (limbaj),
cunoscute sub numele de protocol de reţea. Reţeaua poate fi interoperabilă, adică
diferite tipuri computere, folosind diferite sisteme de operare, pot fi conectate, pot să
comunice unele cu altele, să partajeze informaţiile, dacă respectă aceleaşi
protocoale de reţea. Protocolul folosit s-a standardizat şi se numeşte TCP/IP
(Transmission Control Protocol / Internet Protocol, adică Protocolul Internet).
Există mai multe metode (servicii) de acces la informaţia stocată pe un
calculator prin intermediul reţelei internet :
FTP (File Transfer Protocol) este serviciul pentru transferul fişierelor de la
un calculator la altul şi este parte a protocoalelor TCP/IP. Fişierele care pot
fi transferate sunt stocate pe computere speciale numite servere de FTP.
Pentru a accesa aceste fişiere se utilizează un client de FTP; acesta este o
interfaţă care permite utilizatorului să localizeze fişierele şi să le transfere
pe propriul computer. Fişierele pe serverele de FTP sunt adesea
comprimate, compresia micşorând dimensiunea fişierului ceea ce face ca
transferul să fie mai rapid. Anonymous FTP permite utilizatorilor să
acceseze o bogată colecţie de informaţii publice de pe Internet. Nu este
necesar un cont special sau o parolă. Totuşi uneori serverele de FTP
anonim cer ca utilizatorul să se login-eze cu cuvântul anonymus şi în loc
de parolă cu adresa de e-mail. O bogata categorie de fişiere sunt
disponibile prin FTP anonim pe Internet: Shareware – software care poate
fi utilizat free pentru o anumită perioadă după care trebuie să fie achitată o
3
Tutorial HTML
taxă simbolică, Freeware – software distribuit gratuit, de exemplu fonturi

clipart sau jocuri, Upgrades & Patches – noi variante ale unor programe
sau softuri corectate, Documente – articole, documentaţii, etc.
Telnet este serviciul pentru accesul de la distanţă la resursele unui
calculator. Acest proces se numeşte şi conectare la distanţă (remote
login). Computerul care iniţiază conexiunea se numeşte computer local
iar computerul care este accesat şi care acceptă conexiunea se numeşte
remote computer sau gazda (host). Computerul remote poate fi, fizic,
localizat în cealaltă cameră, în alt oraş sau în altă ţară.
O data conectat, utilizatorul emulează computerul de la distanţă. Când sunt
tastate comenzile, ele se execută pe computerul gazdă, monitorul afişând
mesajele computerului gazdă. Procedura de conectare la computerul
gazdă depinde de tipul de acces Internet. Pentru accesul la un computer
remote este necesar un cont şi o parolă. Există şi resurse disponibile pe
Internet fără cont şi parolă. După conectare pot apărea instrucţiuni sau
meniuri sau se pot utiliza comenzi ale sistemului de operare de pe maşina
respectivă (UNIX, Windows NT).
Electronic Mail este serviciul de mesagerie electronică. Poşta
electronică (electronic mail sau e-mail) asigură funcţia de comunicare,
prin transmiterea electronică a mesajelor de la un calculator la altul.
Scrisoarea elctronică este formată dintr-un mesaj căruia i se pot ataşa
imagini şi sunete, fişiere cu programe şi alte tipuri de fişiere cu informaţii.
Cutia poştală (mailbox) este un fişier în care se memorează mesajele
primite. Gestionarea mesajelor poştale se face prin intermediul mai multor
tipuri de cutii poştale: Inbox – pentru mesajele primite, Outbox – pentru
mesajele care urmează să fie expediate, Sent – pentru mesajele
expediate, Delete – pentru mesajele sterse, etc. Scrisoarea electronică
este un mesaj format din: antet (header) – o secvenţă standard de
informaţii cu care începe mesajul postal, corp (body) – mesajul propriu-
zis, semnatura (signa-ture) – o secvenţă standard de informaţii care se
adaugă la sfârşitul mesajului poştal.
News este serviciul de ştiri. Un grup de ştiri (newsgroup) este un grup
de utilizatori Internet care discută despre acelaşi subiect. Comunicarea se
4
Tutorial HTML
realizează prin intermediul unei reţele de ştiri (network news) care

asigură accesul utilizatorului la o colecţie de articole organizate pe
subiecte. Articolele sunt stocate pe servere de ştiri. Serviciul se numeşte
serviciu pentru reţele de ştiri sau serviciu pentru grupuri de ştiri. Protocolul
de acces la acest serviciu se numeşte NNTP(Network News Transfer
Protocol). Cea mai importantă sursă de ştiri, este reţeaua UseNet.
Utilizatorul are nevoie de un program denumit cititor de ştiri
(newsreader) cu care se poate abona la grupuri de ştiri; ca cititor de ştiri
se poate folosi aplicaţia Microsoft Outlook Express.
World Wide Web este o metodă (serviciu) de acces la informaţia stocată
pe un calculator aflat oriunde în lume. World Wide Web (în traducere ad-
litteram „pânză de păianjen întinsă în lumea întreagă”) sau prescurtat
web, www sau w3 este cel mai important serviciu de informare şi
documentare. Este un mecanism care foloseşte conceptul hipermedia
pentru a lega o colecţie de zeci de milioane de documente cu informaţii, ce
sunt păstrate pe calculatoarele răspândite în toată lumea. Acesta prezintă
două avantaje: în primul rând permite căutarea în întreg spaţiul Internet şi
uşurează căutarea, prin stabilirea unor legături între informaţii şi nu în
ultimul rând, permite să fie create legături de la un item de informaţie la
altul. Informaţia este prezentată ca documente numite şi pagini de web,
fişiere cu extensia *.htm, sau *.html care au fost create utilizând limbajul
HTML (HyperText Markup Language – Limbajul de Marcare a
Hypertextului). O pagină web este o unitate de informaţie, un document
disponibil prin www şi poate fi mai mare decât un ecran de calculator sau
poate să fie tipărită pe mai mult de o foaie de hârtie. Pagina de web este
transferată pe computerul utilizatorului prin HTTP (HyperText Transfer
Protocol, adică Protocolul de Transfer al HyperTextului). Pagina de web
este creată utilizând limbajul HTML. HTML constă dintr-o serie de coduri
standard (tag-uri) care se folosesc pentru a defini structura unei pagini de
web. Aceste coduri permit ca pagina de web să aibă particularităţi cum ar
fi: bold text, italic text, titluri îngroşate, pauze de paragraf şi liste
numerotate. Paginile de web conţin texte, imagini, sunete, filme video şi
legături hipertext către alte resurse de pe Internet.
5
Tutorial HTML
Pentru furnizarea serviciilor pe Internet se foloseşte modelul client –

server:
Calculatoare client – calculatoarele care au acces la informaţie. Ele
solicită un serviciu, adică emit o cerere de serviciu către un server şi
aşteaptă răspunsul. Pe aceste calculatoare trebuie instalat un software
care să asigure accesul la un anumit tip de serviciu în reţea.
Calculatoare server – calculatoarele pe care se depozitează informaţia.
Ele furnizează un serviciu, adică primesc o cerere de serviciu, execută
serviciul şi transmit rezultatul către calculatorul solicitant. Este necesară
instalarea unui software pentru a asigura accesul la un anumit tip de reţea.
Comunicarea prin Internet se realizează întotdeauna între o pereche de
programe. Programele care asigură comunicarea, funcţionează pe baza modelului
client – server:
Programe client – programe care contactează un serviciu. Persoanele
care doresc să folosească un serviciu al reţelei Internet lansează în
execuţie un program client. Clientul foloseşte reţeaua Internet pentru o
comunicare cu serverul. Pentru unele categorii de servicii, clientul
interacţionează cu serverul şi aşteaptă răspunsul. Pentru o altă
categorie de servicii, clientul se angajează într-o interacţiune pe timp
îndelungat. Clientul stabileşte comunicarea cu serverul şi apoi afişează
conţinutul datelor primite, în timp ce transmite către server apăsări de
taste sau acţionări cu mouse-ul ale unor obiecte de interfaţă.
Programe server – programe care oferă servicii. Calculatoarele care
oferă un serviciu lansează automat în execuţie, atunci când este pornit,
una sau mai multe copii ale programului server. Programul server
rămâne în execuţie atâta timp cât nu este întreruptă alimentarea cu
energie electrică. Cât timp calculatorul server nu funcţionează, orice
program client, care vrea să stabilească o legătură pentru comunicare,
va primi un mesaj de eroare. Din această cauză, calculatorul pe care
rulează programul server trebuie să aibă o putere mare de calcul pentru
a permite rularea simultană, cu viteză mare, a mai multor copii ale
programului server, şi trebuie să fie fiabil, pentru ca blocările să fie rare.
6
Tutorial HTML
Pentru a beneficia de facilităţile oferite de Internet, un utilizator trebuie să

conecteze calculatorul său la una dintre subreţelele precizate mai sus. În acest mod,
calculatorul său devine nod în Internet şi utilizând protocolul TCP/IP va putea folosi
diverse programe cu rol de client pentru a putea transfera informaţii de la alte
calculatoare cu rol de server conectate la rândul lor la Internet.
Un singur calculator poate furniza servicii mai multor utilizatori. În acest scop
se vor lansa mai multe copii ale programului care asigură serviciul, câte o copie
pentru fiecare utilizator care a cerut acces la acel serviciu. Calculatoarele care
furnizează un anumit serviciu se numesc situri ale acelui serviciu. De exemplu, un
calculator care permite copierea fişierelor cu protocol ftp se numeşte sit ftp, iar un
calculator care conţine o colecţie de pagini web se numeşte sit web.
Un URL (Uniform Resource Locator) identifică o resursă de pe Internet, de
exemplu o pagina de web, un catalog de bibliotecă, o imagine, etc. URL reprezintă o
adresare standard pentru o resursa Internet şi ajută utilizatorul să localizeze resursa.
Orice resursă de pe Internet are un URL unic. Structura de bază a URL-ului este
ierarhică, cu ierarhia de la stânga la dreapta. URL ul este alcătuit din litere, numere şi
semne de punctuaţie şi concatenează trei elemente:
1. Identificatorul serviciului (protocolului) Internet utilizat pentru
accesarea resursei. Există mai multe metode (protocoale) de acces la
informaţia stocată pe un calculator conectat la Internet şi respectiv mai
mulţi identificatori de servicii (protocoale):
http:// protocolul de transfer bazat pe hipertext;
ftp:// protocolul de transfer de fişiere;
file:// pentru accesul la fişierele stocate pe calculatorul local.
2. Identificatorul calculatorului care stochează resursa (host-ul sau
gazda); este format din: nume_calculator.domeniu_internet, unde
domeniu_internet reprezintă o ramură din structura arborescentă a
internetului.
3. Identificatorul resursei (fişierului) pe calculatorul gazdă (server).
Acesta se compune din :
/ – reprezintă directorul rădăcină;
Cale_relativă/ – reprezintă calea relativă spre directorul în care se
găseşte fişierul destinaţie;
7
Tutorial HTML
Nume_fişier – numele fişierului destinaţie;

#nume_ancoră – numele unei ancore definite în fişierul destinaţie
prin <a name=”nume_ancoră” >. Ancoră – anchor = punct de reper,
acest ultim termen este corect pentru metoda de acces http://.
Exemple.
a. http://www.edu.ro/news/index.html#ancora1 , unde
http:// – identifică protocolul
www.edu.ro – identifică sistemul numit www din domeniul
edu.ro
/news/index.html – reprezintă calea relativă spre fişier
#ancora1 –reprezintă o ancoră în fişierul destinaţie începând cu
care se va afişa pagina în browser .
b. ftp://ftp.company.com/freeware/program.exe ne spune:
protocolul de acces este ftp://
resursa este pe computerul ftp în domeniul company, care este
parte a domeniului com
resursa este în directorul numit freeware şi este programul
program.exe
Observaţie. Nu toate URL-urile au directoare şi nume de fişiere. Un URL
poate fi Case sensitive (este important ce tip de litere folosim: mari sau mici). De
exemplu:
1. http://www.example.edu/library/catalog/guide.txt
2. http://www.example.edu/library/catalog/GUIDE.txt
Notă. Fiecărui URL îi corespunde unui IP.
1.2. Terminologie web

Pagină web. În orice calculator informaţia este stocată în unităţi numite
fişiere. Aceste fişiere conţin: text, programe, imagini, filme, sunete, etc.
Pentru www sunt importante anumite fişiere speciale, numite şi pagini web.
Acestea au extensia htm sau html.
Home Page (pagina gazdă) este o pagină din site-ul unei organizaţii care:
1. este în mod uzual prima pagină accesată din site;
2. este o pagină de prezentare a organizaţei;
8
Tutorial HTML
3. oferă cel mai eficient mod de explorare a informaţiilor aflate în site.

Hypertext este un text îmbogăţit. Folosind această metodă, textele
evidenţiate dintr-un document reprezintă trimiteri la alte documente care
conţin informaţii suplimentare. Evidenţierea se face folosind numere, stiluri
diferite de caractere sau culori diferite. Textul evidenţiat se numeşte
hiperlegatură. Hypertextul este stocat în fişiere având o extensie specială:
htm sau html. Aşadar, un hipertext conţine:
1. text obişnuit;
2. etichete pentru formatarea textului şi încapsularea altor tipuri de
informaţii (salturi rapide către alte resurse de informaţii, sunete,
imagini, filme, etc.).
Hypermedia este o extensie a metodei hipertext, prin care trimiterile se pot
face şi la alte medii de prezentare a informaţiei, cum sunt de exemplu
sunetele şi imaginile. Formatele acceptate sunt fişierele gif şi jpeg.
Folosind această metodă pot fi evidenţiate şi alte obiecte, care nu sunt
texte.
HTTP. Pentru a comunica între ele, două calculatoare folosesc un sistem
de reguli ce formează un protocol. Serviciul www utilizează ca protocol de
comunicare între client şi server http.
HTML. Un fişier care conţine hipertext este scris într-un limbaj specific
numit HTML. Deci, HTML este un limbaj care permite inserarea de:
1. Text
2. Sunete, imagini şi filme
3. Indicatori de prezentare a informaţiei
4. Legături (link-uri) către alte pagini web aflate oriunde în lume
5. Aplicaţii (programe Javascript, Java, VRML etc.).
Site web. O colecţie organizată de pagini web formează un site web. În
www, clientul solicită pagini web de la un site web.
Httpd (HyperText Transfer Protocol Demon) este o aplicaţie care se
execută pe serverul web pentru a prelucra cererile de pagini web
recepţionate de acesta de la clienţi.
Server web. Un server web este un calculator care adăposteşte un site
web şi care este capabil să răspundă la cereri de pagini web din partea
9
Tutorial HTML
unui client. Pentru a putea răspunde permanent cererilor web, un calculator

trebuie să ruleze permanent o aplicaţia specială httpd. Cele mai întâlnite
servere web sunt: Apache Server, Microsoft Web Server, Oracle Web
Server.
Pachet (packet). Informaţia care circulă între calculatoare interconectate
este încapsulată în pachete. Fiecare pachet are un expeditor şi un
destinatar. Aşadar, pachetul este format din informaţia propriu-zisă şi
informaţiile de control care conţin adresa destinatarului şi adresa
expeditorului. Informaţia de control este memorată în antetul pachetului.
Comutarea de pachete (packet switching) este cea mai răspândită
tehnică folosită în transmiterea datelor în reţele de arie largă. Ea se
bazează pe separarea calculatoarelor după funcţii: calculatoare cu functii
de aplicaţie şi calculatoare cu funcţii de comunicaţii.
TCP/IP. Reţeaua Internet dispune de mijloace de dirijare a pachetelor astfel
încât acestea să ajungă la destinaţie. Un astfel de mijloc de dirijare a
pachetelor este IP. Reţeaua Internet dispune de mijloace de corecţie a
erorilor de transmitere a pachetelor. Un astfel de mijloc de corecţie este
TCP (Transfer Control Protocol, adică Protocolul de Control al Transferului).
ISP. Furnizorii de servicii Internet sunt deseori numiţi ISP, iniţialele
denumirii din limba engleză Internet Service Provider. Un ISP este o firmă
sau organizaţie care oferă access la Internet şi servicii conexe. Accesul la
Internet poate fi pe linie comutată (dial-up), access prin linie închiriată,
cablu, telefon (ISDN, ADSL), radio, satelit etc. Serviciile oferite pot fi servicii
de tranzit internet, înregistrare nume domeniu, etc.
Browser web. Un browser este un soft care oferă o interfaţă între utilizator
şi serverul de web de pe Internet . Browser-ul contactează serverul şi
transmite cererea de informaţie, apoi primeşte informaţia şi o afişează pe
calculatorul clientului. Un browser grafic permite utilizatorului să vadă
imagini şi să utilizeze mouse-ul pentru hyperlegături. Tipuri de browser:
Microsoft Internet Explorer, Netscape Navigator şi HotJava. Crearea
unei pagini web presupune:
1. Editarea fişierului HTML utilizând:
un editor de texte obişnuit (Notepad, Wordpad, Word, etc.)
10
Tutorial HTML
un editor de texte dedicat (Netscape Composer)

2. Salvarea paginii web cu extensia html sau htm într-un site web
3. Rezolvarea referinţelor conţinute în pagina web (legături, imagini,
sunete, filme, aplicaţii Java, etc.).
Pagina web astfel creată poate fi vizualizată prin intermediul unui browser.
11
Tutorial HTML
2. Crearea site–urilor web

2.1. Tipuri de site-uri web
Paginile HTML constituie în anumite condiţii, cel mai ieftin mijloc de a publica
informaţii în Internet. Home page (pagina iniţială) reprezintă un document hipertext
(HTML) care serveşte ca punct de intrare iniţial într-un web.
Pagina iniţială trebuie să conţină informaţii cu caracter general şi introductiv
precum şi hyperlegături la resursele corelate. O pagină proiectată corespunzător
conţine butoane de navigare interne, care ajută utilizatorul să se deplaseze printre
numeroasele documente la care are acces.
Practic, există patru tipuri de site-uri web:
1. Site-uri cu pagini statice – se folosesc în special drept panouri
publicitare. Se mai numesc şi “ brochureware” , deoarece clienţii doresc
transpunerea în format HTML a principalelor broşuri (pliante) de
prezentare. Un asemenea tip de sit este relativ uşor şi ieftin de construit.
2. Site-uri cu pagini dinamice – aceste site-uri necesită o actualizare
periodică (zilnică sau săptămânală) a elementelor specifice. La proiectarea
unui astfel de site trebuie luate în considerare următoarele aspecte:
Modul în care vor fi actualizate datele de pe site.
Costurile operaţiunilor de actualizare periodică.
Comunicarea cu clienţii (utilizatorii) care apelează un astfel de site, se
poate realiza prin inserarea de formulare de e-mail, pe paginile site-ului. În
aceste condiţii se poate lua în considerare şi folosirea unui autoreponder
pus la dispoziţie de către ISP. În felul acesta se va transmite automat un
mesaj de răspuns vizitatorului site-ului, înştiinţându-l astfel de primirea
mesajului transmis şi mulţumindu-i pentru vizită.
3. Site-uri dezvoltate pe baze de date – aceste site-uri impun metode şi
tehnici speciale pentru realizare, necesitând actualizări frecvente ale
elementelor componente. Se administrează extrem de greu, ele se
bazează pe o baza de date (Oracle, de exemplu), care poate fi actualizată
în mod regulat prin intermediul unui program prioritar.
Se pot utiliza şi bazele de date Access sau File Maker. Acest tip de site se
12
Tutorial HTML
recomandă pentru activităţi cu volum important de informaţii ce trebuie

actualizat la intervale regulate de timp.
4. Magazine virtuale – acest tip de site este cel mai complicat şi mai greu de
utilizat, necesitând metode şi tehnici speciale de proiectare şi exploatare.
Magazinele virtuale se bazează pe date stocate în baze de date şi permit
clienţilor să aleagă şi apoi sa achiziţioneze în siguranţă produse sau
servicii on line, cu ajutorul cărţilor de credit sau a banilor virtuali (electronic
cash). Procesarea cărţilor de credit este partea cea mai dificilă în
dezvoltarea unui astfel de site.
2.2. Etapele de realizare a unui site

Existenţa unui site web reprezintă în prezent cel mai modern şi eficient mijloc
de prezentare şi de activitate în Internet, pentru o persoană fizică sau o organizaţie.
Pentru realizarea site-urilor web, au fost realizate o mulţime de instrumente software,
începând cu cele mai simple de tip WYSIWYG (what-you-see-is-what-you-get), la
cele de nivel înalt pentru construirea aplicaţiilor bazate pe web, la servicii care
adaugă elemente de finisare, dând un aspect deosebit de profesional site-ului.
În general se recomandă beneficiarilor să apeleze la o firmă de specialitate pentru
realizarea unui site web.
Astfel este necesar să se efectueze o analiză a oportunităţii realizării unui site.
Analiza efectuată de specialist trebuie să stabilească în primul rând următoarele
elemente:
Este nevoie de un site web?
Ce tip de site este necesar?
Care este suma disponibilă de alocat pentru realizarea site-ului?
Care este cel mai indicat designer?
În cât timp se poate realiza?
Ce browser se preferă?
Cât de rapid se pot încărca paginile?
Pe ce motoare de căutare va fi listat site-ul?
Ce platformă sistem va fi utilizată?
Companiile de design web înseamnă de obicei mai mult decât o mâna de
oameni, care se ocupă de partea grafică a unui site. Aceste companii asigură în mod
frecvent consultanţă, precum şi o parte din serviciile necesare pentru realizarea unui
13
Tutorial HTML
site. Pentru crearea unui site performant este necesar să se parcurgă următoarele
etape:
I. Proiectare (Design).
II. Promovare (Marketing)
III. Găzduire (Hosting)
IV. Administrare.
2.2.1. Proiectare (Design)
Proiectarea, nu înseamnă numai partea de concepţie grafică a paginilor web,
ci şi crearea oricăror programe necesare (de exemplu, pentru legarea la o bază de
date) sau de formulare folosite pentru colectarea de informaţii de la utilizatorii
(vizitatorii) site-ului.
La proiectarea unui site este foarte important alegerea platformei (sistem de
operare) pentru site-ul web. Această decizie este importantă deoarece de ea depinde
fiabilitatea solicitudinii (răspunsului) site-ului la cerinţele clienţilor, precum şi a
volumului de muncă ce trebuie investit pentru a-l menţine în funcţiune. Se pot avea în
vedere sistemele de operare: Microsoft Windows NT, Linux, Solaris 2.6 şi 7, Unix,
Novell Netware.
Crearea paginilor web se poate realiza în două moduri, şi anume:
1. Manual, scriind efectiv tag-urile HTML. Crearea manuală a paginilor
web se poate realiza numai de către specialişti, ce cunosc limbajul HTML.
Realizarea manuală presupune existenţa următoarelor instrumente:
Browser de web. Browser-ul web este necesar pentru testarea a
ceea ce se obţine, în fiecare moment şi de scriere a tag-urilor
HTML.
Se recomandă ca testarea să se facă cu ambele browsere,
Microsoft Internet Explorer şi Netscape Communicator. Este
important pentru proiectant ca site-ul să funcţioneze sub ambele
browsere.
Programe de grafică. Cu ajutorul programelor de grafica, se
creează/editează, imaginile de fundal, figurile, butoanele, desenele
etc. Astfel de programe ce pot fi utilizate sunt: Paint Shop Pro sau
Adobe Photo-Shop.
14
Tutorial HTML
Programe de editare text. Programul de editare text este utilizat

pentru scrierea efectivă a tag-urilor HTML, folosind comenzi Visual
Basic. Programe ce pot fi utilizate pentru scrierea tag-urilor HTML
sunt: Notepad, WordPad Plus.
Principalul avantaj al metodei manuale constă în faptul, că pagina HTML
este exact aşa cum s-a dorit. Se poate introduce astfel, orice tag, cu orice
atribut.
Dezavantajul metodei constă în principal, în faptul că proiectantul trebuie
să cunoască bine limbajul HTML, fiind necesară o documentaţie de
specialitate.
2. Asistat, cu ajutorul unor programe speciale. Proiectantul poate utiliza
pentru realizarea site-ului unul din editoarele WYSIWYG, ce dispune de un
ansamblu de instrumente de care avem nevoie pentru a construi un site
profesional. La realizarea site-urilor profesionale de tip aplicaţii on-line, se
pot utiliza pachete de programe ce asigura o mulţime de opţiuni şi facilităţi
de programare. Utilizarea acestor programe necesită cunoaşterea tehnicii
de programare orientată obiect. În modul asistat sunt necesare
următoarele categorii de programe:
Browsere de web (identic cu metoda manuală).
Programe de editare vizuală a paginilor HTML. În acest caz se
poate folosi programul Microsoft Word (Office 97 sau 2000) sau
soluţii integrate care conţin browser şi editor vizual. Programele din
categoria soluţii integrate pun la dispoziţia proiectanţilor, wizard-uri
(asistenţi) şi şabloane. Important este faptul că cu ajutorul acestor
programe specializate, se pot crea propriile machete de proiectare,
elemente interactive şi legăturile la bazele de date existente. La ora
actuala, în clasamentul celor mai performante instrumente de editare
site-uri de tip WYSIWYG sunt următoarele: Microsoft FrontPage
2000, Adobe PageMil 3.0, Macromedia DreamWeaver 2,
HomePage 3.0, HotMetal PRo 5.0, NetObjects Fusian 4.0,
VisualPage 2.0.
Programul Microsoft FrontPage 2000 dispune de asistenţi pentru
construirea tipurilor obişnuite de site-uri (de exemplu: Corporate
15
Tutorial HTML
Presence ), şi modele predefinite, proiectate astfel, încât să confere

site-ului un aspect plăcut şi un conţinut consistent. Acest program
asigură proiectantului şi posibilitatea creării unei pagini, care
lucrează cu baza de date Microsoft SQL. Celelalte pachete de
programe, indicate mai sus, în special Macromedia DreamWeaver2,
asigură o mulţime de facilităţi pentru realizarea unei prezenţe on-line,
mai sofisticate, a site-ului. O mulţime de funcţii ale acestor programe,
se bazează pe suportul extins pentru Dynamic HTML (DHTML).
Astfel, se poate realiza poziţionarea obiectelor, cum ar fi texte sau
imagini, cu o precizie de pixel, folosind fie
Cascading Style Sheets (CSS), fie tabele. Componentele DHTLM,
permit adăugarea cu uşurinţă a efectelor speciale şi a animaţiei.
Majoritatea acestor programe suportă şi formate obişnuite pentru
animaţie (Macromedia Flash and Shockwave), formate audio şi
video streaming. În concluzie, instrumentele moderne de creare a
paginilor web sunt mai mult decât utilitare pentru crearea şi
întreţinerea unui site web; sunt aplicaţii productive care se pot folosi
regulat pentru proiectarea, reproiectarea şi întreţinerea unui site.
Programe ce asigură facilităţi de programare. Aceste pachete de
programe asigură construirea aplicaţiilor on-line fără să fie nevoie să
se apeleze la o echipă de programatori profesionişti Java sau C++.
La ora actuală, în clasamentul celor mai performante programe ce
asistă utilizatorul pentru realizarea unei aplicaţii web sunt
următoarele: Allaire ColdFusion 4.0, Microsoft Visual Studio 6.0
Enterprise, Oracle Developer 6.0, SilverStream 2.5, Sun
NetDynamics 5.0
Programe de grafică (identic cu metoda manuală).
2.2.2. Promovarea site-ului (Marketing)
În general, companiile care se ocupă cu dezvoltarea site-urilor web, se ocupă

şi de promovarea acestuia. Promovarea site-ului prin bannere publicitare şi poştă
electronică, constituie o metodă eficientă în creşterea traficului de acces la site-ul
respectiv.
16
Tutorial HTML
Un prim pas în promovarea unui site este înregistrarea lui pe cele mai
importante motoare de căutare: Yahoo, Altavista, Excite, Infoseek, Lycos,
webCrawler, HotBot şi Magellan, acestea fiind în general primele locuri către care
se îndreaptă utilizatorii când caută ceva pe Internet.
O tactică promoţională actuală este schimbul de bannere, adică afişarea
reclamei site-ului dumneavoastră pe un alt site, în schimbul includerii unui banner de
reclamă pe propriul site. Prin prezenţa acestor bannere site-ul dumneavoastră poate
arata mai profesional, putând atrage vizitatori, care altfel nu l-ar fi vizitat. În cadrul
activităţii de promovare, se pot utiliza instrumente de urmărire a traficului obţinându-
se informaţii deosebit de utile beneficiarului (proprietarul site-ului). Pentru
promovarea unui site web prin intermediul bannerelor se pot utiliza următoarele
instrumente:
HyperBanner (www.hyperbanner.com). Dacă dorim atragerea unei
clientele internaţionale spre site-ul nostru web, atunci alegerea cea mai
bună este HyperBanner. Este singurul serviciu care oferă bannere din
alte ţări, rulabile local. HyperBanner permite afişarea simultană a mai
multor bannere şi oferă statistici corespunzătoare acestora, pentru o mai
bună apreciere a eficienţei lor. De altfel, HyperBanner este singurul care
trimite rapoarte prin e-mail membrilor săi, celelalte necesitând vizitarea sit-
urilor proprii pentru a vedea datele. HyperBanner este singurul serviciu ce
oferă grafice de performanţă, deşi acestea nu mai sunt trimise prin e-mail,
fiind necesară vizitarea sit-ului.
MSN LinkExchange (www.linkexchange.com). Cumpărăturile făcute de
la o singură sursă sunt valoroase dacă ne oferă produse de calitate.
Acesta este cazul lui MSN LinkExchange, care ne oferă o gamă largă de
servicii inestimabile, accesibile şi la subiect. LinkExchange oferă două
servicii de listă de corespondenţă. Unul este ListBot, care conţine
reclame şi permite un număr nelimitat de mesaje până la 100 Kb fiecare.
Celalalt este ListBot Gold, fără reclame, până la un trafic de 5000 de
mesaje pe lună, fiecare mesaj putând avea până la 250 Kb.
SmartAge (www.smartpages.com). SmartAge permite schimbarea
banner-ului după dorinţă sau deschiderea mai multor conturi. La raportări,
SmartAge este de neînvins. Oferă statistici de performanţă pentru toate
17
Tutorial HTML
categoriile la care figurează banner-ul propriu, putând astfel analiza care

categorie asigură cele mai bune rezultate. În concluzie se poate spune că
programul de bannere şi integrarea serviciilor de la terţi furnizori sunt
trăsăturile cele mai valoroase din SmartAge.
webSite Garage (www.website.com). Cu siguranţă, webSite Garage are
deficienţele sale. Nu este aşa de bogat în caracteristici ca LinkExchange
sau SmartAge, lipsindu-i programul de schimb de bannere şi posibilitatea
comerţului electronic, dar în compensaţie, oferă mai multe servicii utile şi
unice. Pentru începători oferă o unealtă indispensabilă sitului web, numită
Hitometer, necesară analizei traficului. Mai pune la dispoziţie un program
de liste de corespondenţă, de care se vor bucura vânzătorii prin e-mail
direct. webSite Garage are şi un serviciu de listă de corespondenţă cu
taxă, numit webSite Post Office Commercial. Acesta oferă două
avantaje importante faţă de ListBot de la LinkExchange: poate
personaliza e-mail-urile şi poate urmări rata răspunsurilor la mesajele
noastre.
2.2.3. Gazduirea site-ului.
Pentru găsirea unei gazde (host) a site-ului, trebuie în primul rând să

răspundeţi la două întrebări:
1. Cat de complex este site-ul?
2. Care este traficul estimat?
Serviciul de Hosting vă va taxa în funcţie de răspunsul la cele două întrebări
de mai sus. Răspunsul la cele două întrebări are ca scop determinarea mărimii
spaţiului necesar pe hard disc şi volumul transferului de date. Cea mai des utilizată
soluţie este plasarea întregului site pe serverul unui ISP.
Investiţia pentru un server propriu, adică conexiune în conformitate cu traficul
preconizat şi personal specializat, este viabilă pentru un site complex, care necesită
actualizări frecvente şi se apreciază a susţine un trafic important.
Alegerea numelui site-ului are importanţă pentru proprietar, atunci când se
prezintă pe web. Majoritatea ISP-iştilor înregistrează site-ul pentru beneficiar, cu
numele dorit de acesta, pentru suma de 150 $ fără TVA, conform tarifului perceput
de Reţeaua Naţională de calculatoare, gestionarul spaţiului web din România. La
18
Tutorial HTML
adresa: http://www.rnc.ro/new/welcome.shtml se găseşte lista domeniilor ocupate în

acel moment.
Site-uri fără taxă. La ora actuală, există o ofertă pentru acest serviciu. La
adresa: http://members.tripad.com/Ijpsp1/sites.html se poate lista un număr de site-
uri care oferă spaţiu gratuit sau ieftin pentru paginile web.
2.2.4. Administrarea site-ului
Tipul de site ales, impune o anumită frecvenţă şi anumite metode pentru
actualizările specifice. Beneficiarul (proprietarul) site-ului poate să apeleze în acest
sens la persoanele care au proiectat site-ul. Acest lucru se recomandă a fi înscris în
contract. Este posibil, ca proiectantul site-ului să pună la dispoziţia beneficiarului, un
instrument de actualizare automată a paginilor web, astfel încât să se poată actualiza
site-ul fără să se cunoască nimic despre HTML, FTP etc. În general, este mai uşor şi
mai convenabil, ca beneficiarul să cumpere, în baza unui contract, întreg pachetul de
servicii pe care un ISP îl oferă.
19
Tutorial HTML
3. Principiile proiectării unui site web

Oportunitatea creării unui site web al organizaţiei. La prima vedere,
crearea şi dezvoltarea unui site web al organizaţiei reprezintă o problemă deja
rezolvată. Într-adevăr, din punct de vedere strict tehnic, crearea acestuia nu mai
constituie un obstacol în faţa organizaţiilor care doresc acest lucru. Microsoft
FrontPage Express (un program specializat în crearea de pagini web integrat în
cadrul Internet Explorer) sau Netscape Composer (un alt program specializat integrat
în cadrul Netscape Communicator) au rezolvat problema.
Din punct de vedere al marketingului, crearea şi dezvoltarea unui site web
trebuie însă să aibă ca suport existenţa unor nevoi specifice, concrete, legate în cea
mai mare parte de modul în care se desfăşoară comunicaţia de marketing a
organizaţiei. Este important de reţinut în acest context că un site web nu face minuni
peste noapte în domeniul marketingului: în general, acesta nu creează produse, nu
stabileşte preţuri, nu expediază produse la beneficiarul acestora, nu dublează
notorietatea organizaţiei şi nu îi triplează vânzările.
Site-ul web poate contribui semnificativ la maniera în care organizaţia
realizează schimbul de informaţii cu mediul său de marketing, preponderent cu
clienţii (efectivi şi potenţiali) şi cu concurenţii săi.
În primul caz este vorba despre furnizarea unui volum de informaţii atractive şi
suficiente pentru a determina o reacţie favorabilă a clienţilor: cumpărarea sau
comandarea produselor (serviciilor) promovate sau cel puţin solicitarea de informaţii
suplimentare despre acestea.
În al doilea caz este vorba despre diferenţierea organizaţiei în raport cu
competitorii săi, în general şi în special din punct de vedere al comunicaţiei de
marketing.
Site-ul web al organizaţiei trebuie să fie perceput astfel ca un instrument de
marketing on-line, cu caracter strategic, al acesteia. Acesta nu poate fi creat pentru a
răspunde unor necesităţi de moment, pentru a limita sau elimina anumite situaţii
tactice nefavorabile, sau pentru că, în ultimă instanţă, este de bon-ton pentru "o firmă
care se respectă". Crearea sa implică, din partea organizaţiei, angajamentul clar
pentru:
1. integrarea şi utilizarea acestuia în comunicaţia de marketing a organizaţiei;
20
Tutorial HTML
2. alocarea unor resurse specifice (tehnologie, bani, oameni şi timp) pentru

actualizarea şi extinderea conţinutului său.
Iată câteva întrebări ale căror răspunsuri pot orienta organizaţia în încercarea
sa de a crea un site web:
Este piaţa suficient de largă din punct de vedere al ariei pentru a
presupune acoperirea acesteia şi prin intermediul Internetului?
În ce măsură consumatorul / utilizatorul potenţial are acces la Internet şi,
respectiv, îl utilizează pentru a obţine informaţii sau a cumpăra diferite
produse sau servicii?
Este piaţa suficient de mare din punct de vedere al capacităţii sale pentru
a asigura rentabilitatea promovării şi, eventual, vânzării prin intermediul
Internetului a produselor şi serviciilor organizaţiei?
În ce măsură produsele (serviciile) pentru care urmează să fie creat site-
ul pot fi promovate adecvat utilizând Internetul şi, ca instrument specific,
site-ul web?
Dispune organizaţia de capacitatea logistică necesară pentru a expedia
(presta) efectiv produsele (serviciile) promovate prin intermediul site-ului
web?
Care va fi efectul generat asupra vânzărilor produselor (serviciilor) prin
crearea site-ului web?
Care va fi efectul generat asupra imaginii organizaţiei prin crearea site-
ului web?
Ce este un site web?
o colecţie de pagini web construite în raport cu o anumită structură
predefinită şi având ca obiective principale crearea suportului pentru
realizarea comunicaţiei de marketing a organizaţiei în spaţiul virtual
şi/sau crearea platformei pentru desfăşurarea comerţului electronic cu
produsele şi/sau serviciile organizaţiei
site-urile web reprezintă la ora actuală forma cea mai comună de
proiectare şi desfăşurare a marketingului on-line
din punct de vedere tehnic, paginile web sunt create preponderent cu
ajutorul limbajului HTML reprezentând în esenţă un ansamblu de
instrucţiuni folosite pentru a construi şi reprezenta texte, imagini, link-uri
21
Tutorial HTML
sau orice alte componente ale unei pagini web

Structura unei pagini web cuprinde elementele care se regăsesc cel mai
frecvent în conţinutul unei pagini web. Acestea sunt:
titlul paginii – apare în bara de titlu a programului de navigare pe
Internet utilizat şi serveşte atât la identificarea paginii şi a conţinutului
acesteia cât şi pentru facilitarea căutării acesteia în spaţiul virtual;
subtitlurile (titlurile interne) – servesc la structurarea logică a
conţinutului paginii în secţiuni distincte facilitând parcurgerea
acesteia în raport cu interesul celui care o vizualizează;
conţinutul paginii – cuprinde informaţiile pe care organizaţia
intenţionează să le transmită publicului vizat. Pentru prezentarea
acestora pot fi utilizate diferite texte, imagini, elemente grafice,
sunete sau alte elemente de conţinut, de obicei în combinaţie astfel
încât efectul asupra publicului să fie maxim;
lista – reprezintă nu atât un element de conţinut cât mai ales un mod
de prezentare (formatare) care poate fi utilizat pentru structurarea şi
prezentarea informaţiilor incluse în paginile web. Utilizarea acesteia
conferă mai multă claritate şi concizie în prezentarea şi urmărirea
informaţiilor incluse în paginile web;
hyperlink-urile – oferă posibilitatea urmăririi doar a acelor secţiuni
de care este interesat "navigatorul" (în cadrul aceleiaşi pagini), alte
pagini (având un conţinut similar sau asociat paginii văzute iniţial)
sau chiar alte site-uri având legătură directă cu conţinutul
informaţiilor prezentate în pagina accesată (vizualizată) iniţial;
informaţiile de contact – numele, prenumele şi elementele de
localizare (adresă poştală, număr de telefon sau fax, adresă de e-
mail, etc.) ale persoanei (persoanelor) care au creat, administrează
sau deţin pagina accesată.
Structura unui site web cuprinde:
Pagina de introducere
Paginile de produs (serviciu)
Formularul de comandă
Chestionarul
22
Tutorial HTML
Pagina de noutăţi
Newsletterul
Pagina FAQ
Alegerea unui "web designer" se face în funcţie de:

problema-cheie: să fie din interiorul firmei sau din exteriorul
acesteia?
În raport cu ce elemente va fi selectat web designerul organizaţiei?
Preţuri şi tarife
Reputaţia profesională
Recomandările unor clienţi ai acestuia
Criteriile de selecţie pentru alegerea unui nume de domeniu (server-gazdă

pentru site-ul organizaţiei) sunt:
stocarea de date – cu cât spaţiul oferit de furnizorul de Internet este
mai mare cu atât probabilitatea de selecţie a acestuia creşte); nu
este suficientă cunoaşterea volumului spaţiului disponibil ci şi "chiria"
plătită pentru acesta (exprimată uzual în dolari/MB); de asemenea,
interesează şi condiţiile în care poate fi obţinut un spaţiu suplimentar
pentru stocarea de fişiere ale organizaţiei (texte, imagini, sunete,
etc.)
transmiterea de date – elementele de referinţă sunt reprezentate de
viteza de transfer de date şi de cantitatea de date apte a fi transmise
către cel care accesează site-ul organizaţiei; există limite tehnice sau
contractuale referitoare la aceste aspecte? Cu cât cantitatea de
informaţii care se doreşte a fi disponibilizată pentru publicul vizat este
mai mare, cu atât este necesară o viteză de transfer mai mare şi
absenţa oricăror limitări în transferul acestora
urmărirea traficului – este un element-cheie în evaluarea eficienţei
utilizării site-ului web ca instrument de marketing on-line; interesează
existenţa unor facilităţi cum ar fi contorizarea numărului de accesări,
repartiţia acestora pe intervale temporale (ore, zile, etc.) şi
identificarea acestora (de exemplu identificarea motoarelor de
căutare de pe care a fost accesat site-ul)
23
Tutorial HTML
reexpedierea poştei electronice – permite retransmiterea tuturor

mesajelor de poştă electronică de către administratorul (deţinătorul)
server-ului gazdă către organizaţia care a închiriat spaţiu pe acesta
într-un cont de poştă electronică specificat de aceasta
natura conexiunii la Internet a serverului-gazdă – tipul conexiunii
şi viteza de transfer sunt esenţiale pentru "vizibilitatea" site-ului web
al organizaţiei în spaţiul virtual. Cu cât site-ul este mai accesibil, cu
atât eficienţa şi utilitatea sa vor fi mai mari pentru organizaţie.
Alegerea serverului-gazdă este rezultatul unei analize comparative a
facilităţilor oferite de către diferiţii furnizori avuţi în vedere şi a
facilităţilor vizate ce către organizaţie.
Promovarea site-ului web. Simpla existenţă a unei colecţii de pagini web
undeva în spaţiul virtual nu reprezintă prea mult din punct de vedere al marketingului
on-line. Pentru a beneficia de impactul generat de crearea, dezvoltarea şi utilizarea
site-ului web al organizaţiei este necesară îndeplinirea a cel puţin două cerinţe:
site-ul să fie cunoscut de către publicul vizat
site-ul să fie accesat de către publicul interesat
Respectarea acestor cerinţe presupune desfăşurarea unor acţiuni (campanii)
de marketing distincte, atât on-line cât şi off-line, urmărind ca obiectiv principal (sau,
în anumite cazuri, secundar) informarea publicului despre existenţa site-ului, crearea
de trafic către site sau ambele concomitent.
Exemple de acţiuni de marketing care pot fi avute în vedere pentru
promovarea site-ului web:
1. Acţiuni de marketing on-line
campanii de direct e-mail, transmiterea de e-mail-uri către publicul
vizat, potenţial interesat în raport cu existenţa şi conţinutul site-ului
web al organizaţiei
inserarea unor informaţii minimale privind site-ul şi link-ul de acces la
acesta pe principalele motoare de căutare pe Internet
inserarea unor bannere publicitare pe motoarele de căutare pe
Internet cele mai utilizate sau pe site-urile unor organizaţii cu ale
căror produse sau servicii există un anumit grad de asociere în
cumpărare, consum sau utilizare
24
Tutorial HTML
inserarea unor link-uri de acces la site-ul web al organizaţiei incluse

în cele mai importante site-uri de resurse existente în spaţiul virtual
2. Acţiuni de marketing off-line
desfăşurarea unor campanii de publicitate urmărind promovarea site-

ului web al organizaţiei în mediile tradiţionale (presă, radio,
televiziune, afişaj)
includerea unor informaţii minimale privind existenţa site-ului web în
mesajele publicitare specifice comunicaţiei tradiţionale (de exemplu,
menţionarea adresei Internet a organizaţiei, www.organizaţia.ro, într-
un anunţ publicitar tipărit)
organizarea unor acţiuni de relaţii publice ocazionate de lansarea şi
dezvoltarea site-ului web al organizaţiei (de exemplu, o conferinţă de
presă desfăşurată cu ocazia lansării site-ului sau publicarea unor
articole referitoare la conţinutul site-ului în publicaţiile de specialitate
sau în rubricile specializate existente în diferitele publicaţii cotidiene
sau periodice)
De foarte multe ori, promovarea site-ului web presupune integrarea
acţiunilor de marketing on-line şi off-line în vederea atingerii celor două obiective.
Cele mai bune exemple în acest sens le constituie:
organizarea şi desfăşurarea unor concursuri cu premii care
răsplătesc cunoaşterea şi accesarea site-ului web al organizaţiei sau
participarea la un târg specializat pe tehnologia informaţiei sau chiar
Internet cu un stand cuprinzând mai multe posturi de lucru de la care
poate fi accesat site-ul web al organizaţiei.
25
Tutorial HTML
4. Bazele proiectării site-urilor Web

Unul din primele elemente, fundamentale de altfel, ale WWW este HTML,
standard ce descrie formatul primar în care documentele sunt distribuite şi văzute pe
Web. Multe din trăsăturile lui, cum ar fi independenţa faţă de platformă, structurarea
formatării şi legăturile hypertext, fac din el un foarte bun format pentru documentele
Internet şi Web. Primele specificaţii de bază ale Web-ului au fost HTML, HTTP şi
URL.
HTML a fost dezvoltat iniţial de fizicianul şi informaticianul Tim Berners-Lee la
CERN în 1989. HTML este un limbaj bazat pe SGML (Standard Generalized Markup
Language), o aşa-numită aplicaţie a acestuia. SGML este un standard internaţional
(ISO-8879) aprobat în 1986. HTML a fost iniţial văzut ca o posibilitate pentru fizicienii
care utilizează computere diferite să schimbe între ei informaţie prin mijlocirea
Internetului. Prin urmare, erau necesare câteva condiţii esenţiale: independenţa de
platformă, posibilităţi hypertext şi structurarea documentelor. Independenţa de
platformă semnifică faptul că un document poate fi afişat în mod asemănător (sau
aproape identic) de computere diferite (deci cu font, grafică şi culori aidoma), lucru
vital pentru o audienţă numeroasă şi extrem de variată. Hypertext se traduce prin
faptul că orice cuvânt, frază, imagine sau element al documentului văzut de un
utilizator (client) poate face referinţă la un alt document sau chiar la paragrafe din
interiorul aceluiaşi document, ceea ce uşurează mult navigarea între părţile
componente ale unui document sau între multiple documente. Structurarea
riguroasa a documentelor permite convertirea acestora dintr-un format în altul
precum şi interogarea unor baze de date înglobând aceste documente.
Născut în urmă cu aproximativ 30 de ani, într-o tentativă de a rezolva unele
probleme ivite la transportul documentelor între diferite computere, limbajul hypertext
a evoluat încet. În primii ani de evoluţie HTML a demarat lent în principal pentru că îi
lipseau posibilităţile de a reda publicaţii electronice profesionale; limbajul permitea
oarece control asupra fonturilor dar nu permitea inserarea graficii. În 1993, NCSA a
îmbogăţit limbajul pentru a permite inserarea graficii şi a construit primul navigator
grafic: Mosaic. Au urmat apoi contribuţii ad-hoc ale diverselor firme care au adus tot
felul de adăugiri limbajului HTML astfel încât, în 1994, limbajul părea scăpat de sub
control. Urmarea a fost că la prima conferinţă WWW de la Geneva (Elveţia) s-a
26
Tutorial HTML
constituit un grup de specialişti (HTML Working Group) a cărui primă misiune a fost
formalizarea HTML, lucru care s-a concretizat în HTML 2.0. Importanţa acţiunii
acestui grup constă în faptul că, odată standardizat, limbajul a putut fi apoi extins într-
un mod mai controlat la alte nivele.
4.1. Standardizarea HTML

Standardul oficial HTML este dat de W3C (World Wide Web Consortium), care
este afiliat la IETF (Internet Engineering Task Force). W3C a enunţat câteva versiuni
ale specificaţiei HTML, printre care şi HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 si,
cel mai recent, HTML 4.01. În acelaşi timp, autorii de browsere cum ar fi Netscape şi
Microsoft, au dezvoltat adesea propriile "extensii" HTML în afara procesului
standard şi le-au incorporat în browserele lor. În unele cazuri (cum ar fi tag-ul
Netscape), aceste extensii au devenit standarde de facto adoptate de autorii de
browsere. Cînd navigatorul încarcă un document HTML, el "citeşte" documentul în
căutarea tag-urilor HTML, formatează textul şi imaginea şi le afişează pe ecran. Este
motivul pentru care acelaşi document HTML apare uşor diferit când este privit
utilizând navigatoare diferite. Stadiile prin care trece un standard elaborat de W3C
sunt:
1. Orice standard îşi începe aventura ca W3C Note.
2. De aici este preluat de către un grup particular de lucru (Working Group) şi
este discutat până când se ajunge la un consens.
3. În acest moment este publicat ca propunere (Working Draft) şi în acest
stadiu oricine poate face comentarii.
4. În momentul în care se obţine o susţinere şi un consens suficient de larg,
directorul W3C decide dacă specificaţia este gata să devină propunere
oficială de recomandare (Proposed Recommendation).
5. Urmează o perioadă de 6 săptămâni în care toţi membrii W3C au şansa
să voteze această propunere de recomandare; votul nu este obligatoriu,
putându-se vota în 4 moduri diferite:
da;
da, sub rezerva unor îmbunătăţiri;
nu, până când anumite sarcini nu sunt îndeplinite;
nu, specificaţia trebuie abandonata.
27
Tutorial HTML
6. Charta W3C stipulează necesitatea obţinerii consensului complet, astfel

că fiecare vot trebuie să fie un da fără rezerve.
7. Dacă toţi paşii anteriori au fost îndepliniţi, specificaţia trebuie aprobată în
final de Director şi se publică sub forma unui standard (W3C
Recommendation).
Dar de ce a fost preferat HTML pentru publicaţii pe Web, când pentru
realizarea publicaţiilor electronice există multe alte tehnologii? Primul motiv este
simplitatea. Al doilea este că permite formatarea textului ASCII cu tag-uri în format
ASCII. Rezultă de aici o compresie bună, suport pentru legături hypertext şi uşurinţa
în a scrie navigatoare pentru vizualizarea documentelor.
Versiunea 2.0. HTML 2.0, elaborat în Iunie 1994, este standardul pe care ar
trebui să-l suporte toate browserele curente - inclusiv cele în mod text. HTML 2.0
reflectă concepţia originală a HTML ca un limbaj de marcare independent de
obiectele existente, focalizându-se pe aşezarea lor în pagină, în loc de a specifica
exact cum ar trebui să arate acestea. Daca doriţi să fiţi siguri că toţi vizitatorii vor
vedea paginile aşa cum trebuie, folosiţi tag-urile HTML 2.0!
Versiunea 3.0. Specificaţia HTML 3.0, enunţată în 1995, a încercat să
dezvolte HTML 2.0, prin adăugarea unor facilităţi precum tabelele şi un mai mare
control asupra textului din jurul imaginilor. Deşi unele din noutăţile HTML 3.0 erau
deja folosite de autorii de browsere, multe nu erau încă oficializate. În unele cazuri,
tag-uri asemănătoare implementate de autorii de browsere au devenit mai răspândite
decât tag-urile "oficiale". Specificaţia HTML 3.0 a expirat repede, deci nu mai este un
standard oficial în prezent.
Versiunea 3.2. În Mai 1996, W3C a scos pe piaţă specificaţia HTML 3.2, care
era proiectată să reflecte şi să standardizeze practicile acceptate la scară largă. Deci
HTML 3.2 include tag-urile HTML 3.0 care erau adoptate de autorii de browsere
precum Netscape şi Microsoft plus noi extensii HTML.
Revolutia HTML 4.0 şi HTML 4.01. În acest moment, HTML 4.0 este larg
utilizat şi au fost deja publicate specificaţiile HTML 4.01. Limbajul HTML dă
proiectanţilor de pagini web posibilitatea să:
publice documente cu headere, texte, tabele, liste, fotografii, etc...
regăsească on-line informaţii prin intermediul hyperlink-urilor accesate
printr-un simplu click de mouse
28
Tutorial HTML
proiecteze formulare pentru realizarea tranzacţiilor cu servere aflate la

distanţă, pentru căutări de informaţie sau pentru activităţi specifice
comerţului
includă foi de calcul tabelar, clipuri video, sunete şi alte aplicaţii direct în
documente.
Elementul esenţial diferit adus de versiunea 4.0 şi mai ales 4.01 faţă de
versiunea 3.2, este posibilitatea separării structurii unui document de prezentarea lui
prin introducerea „stilurilor de documente“ (style sheet). Utilizând limbajul HTML
pentru structurarea unui document şi style sheet-urile pentru a stiliza prezentarea
acestuia, proiectanţii pot obţine mult mai uşor independenţa de periferic/ computer/
platformă hard-soft, lucru care a facut HTML-ul atît de popular. Un document cu o
structură complexă poate fi prezentat în diferite moduri pe medii diferite, permiţând
documentului însuşi să se adapteze mai uşor noilor tehnologii (cum ar fi, de exemplu,
browserele capabile să vorbească, cititoarele braille, etc...).
În plus, separarea conţinutului de partea de prezentare permite modificarea
înfăţişării chiar a unui întreg site doar prin modificarea unui style-sheet (a unui
document care descrie stilul). Experienţa a demonstrat că o astfel de abordare poate
reduce dramatic costurile de deservire a unui spectru larg de platforme şi probleme,
facilitând şi o întreţinere ulterioară şi modificări mult mai uşoare.
Pentru realizarea unui document HTML se pot utiliza editoare clasice sau
editoare de tipul WYSIWYG. În cazul editoarelor clasice se pot folosi editoare de text
ASCII, editoare HTML sau convertoare HTML. În cazul editoarelor WYSIWYG,
accentul se pune pe aspectul grafic al paginii web, scrierea codului HTML realizându-
se de către aceste editoare.
În concluzie, HTML oferă următoarele posibilităţi:
publicarea documentelor on-line, acestea conţin: titlu, texte, tabele, liste,
imagini etc.;
regăsirea on-line a informaţiei prin legături hypertext;
proiectarea formularelor pentru a se realiza tranzacţii prin servicii de la
distanţă, pentru căutarea de informaţie, rezervări, cereri de bunuri;
includerea de clipuri video, clipuri sonore şi alte aplicaţii în document.
29
Tutorial HTML
4.2. Rezumat
Prin Web se acceptă să se înţeleagă:
Denumirea prescurtată pentru World Wide Web.
O reţea de calulatoare mondială.
WWW funcţionează astfel:
Informaţia este salvată în documente numite pagini web.
Paginile web sunt fişiere text salvate pe un calculator numit server de
web.
Calculatoarele care accesează paginile web sunt denumite clienţi web.
Foloseste protocolul de comunicaţie HTTP.
Pentru a vizualiza paginile web un client web are nevoie de un program
denumit browser (“răsfoieşte”).
Browsere cunoscute: Internet Explorer, Netscape Navigator, Opera,
Mozila ...
Browserul funcţionează astfel:
Browserul face o cerere (request) către server.
O cerere standard către un server conţine o adresă.
Exemplu: http://www.blablabla.
Toate paginile web conţin instrucţiuni (pentru afisaj) – spre norocul nostru
acestea nu trebuie compilate, ele sunt doar interpretate iar în caz de eşec
browserul nu afişează nimic.
Instrucţiunile sunt denumite tag-uri HTML (marcatori, etichete).
Exemplu: <p>Acesta este un paragraf si este un tag foarte important in
standardul HTML </p>.
Standardele web sunt realizate de:
Un grup nonguvernamental denumit W3C.
W3C înseamnă World Wide Web Consortium.
W3C stabileşte specificaţiile pentru standardele web.
Cele mai importante standarde web sunt HTML, CSS and XML.
Un fişier HTML este:
Prescurtarea pentru Hyper Text Markup Language.
Un fişier text care conţine tag-uri.
30
Tutorial HTML
Un fişier HTML trebuie să aibe extensia htm sau html.

Un fişier HTML poate fi creat cu ajutorul unui editor de text simplu
(exemplu: Notepad).
31
Tutorial HTML
5. Fundamentele standardului HTML

Editarea paginilor pe internet se poate face în orice program de editare texte,
pornind chiar cu banalul Notepad din Windows. Fişierul care se editează se va numi
index.html. În general fişierul principal al unui site internet (cel care se încărcă
atunci când tastăm o adresă de genul www.abc.abc) este numit index.html.
Principalele caracteristici ale HTML sunt:
descrie structura documentului;
nu este descrisă aranjarea precisă în pagină;
permite fiecărui navigator să aibă propria prezentare;
un document HTML poate fi reutilizabil.
Ciclul de viaţă al unui document Web include:
concepţia: când se utilizează instrumente de editare;
gestiunea: stocarea în fişiere;
difuzarea: fiind permisă vizualizarea de către utilizatori;
utilizarea: prin editare, copiere, imprimare.
Conţinutul unui document se caracterizează prin:
natura informaţiei: texte, grafică, tabele, ecuaţii;
structura: - numele: titluri capitole, paragrafe, legende;
- concepţia obiectelor imbricate;
prezentare: operaţia de formatare;
versiunea HTML
Specificaţia limbajului conţine următoarele informaţii:
Ce caractere pot apărea într-un document HTML;
Tipurile de date de bază dintr-un document;
Elementele care guvernează structura unui document HTML,
incluzând text, liste, tabele, legături, obiecte, imagini, applet-uri
(aplicaţii);
Elementele care guvernează prezentarea unui document HTML,
incluzînd stiluri, seturi de caractere, reguli şi alte prezentări vizuale,
precum şi frame-uri pentru prezentările cu ferestre multiple;
Elementele care guvernează interactivitatea printr-un document
HTML, incluzând chestionare pentru introducerea informaţiei
32
Tutorial HTML
utilizatorului şi scripturile pentru documentele dinamice.
5.1. Etichete (tag-uri)

Instrucţiunile folosite într-o pagină HTML se numesc tag-uri şi acestea indică
browser-ului (Netscape, Internet Explorer, etc) modul de prezentare a informaţiei
din pagină. Tag-urile nu sunt altceva decât nişte marcaje (etichete) pe care limbajul
HTML le foloseşte alături de texte pentru a ajuta browser-ul de internet să afişeze
corect conţinutul paginii web. Tag-urile se scriu între caracterele < şi >. Tag-urile nu
trebuie scrise respectând reguli foarte stricte (nu e nevoie să scrii numai câte un tag
pe rând sau să foloseşti numai litere mari – nu sunt case-sensitive, etc.).
Orice limbaj de marcare definit prin SGML este denumit aplicaţie SGML. O
aplicaţie SGML este, în general, caracterizată prin:
Declaraţia SGML - prin care se specifică caracterele şi
delimitatorii ce pot apare în aplicaţie.
DTD (Document Type Definition – Definire a tipului de document) -
defineşte sintaxa de construire a marcajelor. DTD poate include
definiţii suplimentare, cum ar fi referinţe la entităţile caracter.
O specificaţie ce descrie semantica asociată marcajelor. Această
specificaţie impune anumite restricţii de sintaxă care nu pot fi definite
prin DTD.
Instanţele document ce conţin date şi marcatori. Fiecare instanţă
conţine o referinţă către DTD-ul care poate fi utilizat pentru interpretare.
Prin definirea tipului de document SGML se declară tipurile de elemente prin
care se reprezintă structurile sau modul de afişare dorit. HTML include tipurile de
elemente pentru paragrafe, legături hypertext, liste, tabele, imagini etc. Fiecare
declarare a tipului de element, în general, conţine trei părţi:
tag de început;
conţinutul;
tag de sfârşit.
Limbajul HTML include o mare diversitate de elemente, sintaxa generală a unui
element fiind:
<Nume_tag> bla, bla, bla, … [</Nume_tag>]
unde, ceea ce este scris între paranteze drepte, semnifică opţionalitate.
33
Tutorial HTML
Aşadar, tag-urile sunt:

singulare (sau vide – empty tags), când se regăseşte numai tag-ul
de început;
pereche (sau container – container tags), reprezentate prin tag de
început şi tag de sfârşit. Tag-urile specifică formatul în care va fi afişat
textul conţinut între tag-ul de început şi cel final. O particularitate a
tag-urilor container este că, în cazul unora dintre ele, prezenţa tag-
ului de închidere (</Nume_tag>) este opţională.
Codurile de marcare HTML pot fi clasificate în următoarele categorii:
1. marcaje de bază - cele care delimitează pagina/documentul HTML, titlul
acesteia şi corpul paginii;
2. marcaje pentru structurarea documentului - care permit introducerea de
subtitluri, paragrafe, linii de delimitare;
3. marcaje pentru formatarea textului şi crearea listelor;
4. marcaje pentru crearea hiperlegăturilor (hyperlinks);
5. marcaje pentru introducerea de obiecte - tabele, formule, imagini sau
obiecte multimedia preluate din fişiere, formulare.
Elementele pot avea asociate proprietăţi, denumite atribute, care au valori.
Atributele se pun numai în tag-ul de început. Dacă un tag nu are nici un atribut,
atunci browser-ul va lua în considerare valorile implicite ale tag-ului respectiv. Sintaxa
tag-ului de început este:
<Nume_tag atrib1="valoare1" atrib2="valoare2" … atribi="valoarei">
Observaţie. Valorile atributelor pentru atribute trebuie să fie scrise
întotdeauna între ghilimele. Se pot utiliza şi ‘ ‘. În cazurile rare când valoarea
atributului necesită ghilimele atunci se poate proceda conform exemplului: name='Ion
zis "Macelarul" '.
În tabelul următor este prezentată lista completă a tag-uri împreună cu cele
mai importante atribute ale lor:
Nume tag Nume atribut Valoare atribut Semnificaţie
 Un comentariu
<! doctype> Tipul documentului
<a> Ancoră
Adresa către care vrem să
• URL
href fie legătura: referinţă
• #nume
hypertext sau referinţă
34
Tutorial HTML

către o ancoră internă.
Definiţia unei ancore
Name • nume
interne
• _blank
• _self Fereastra în care se va
target
• _parent face afişarea
• _top
<abbr> O abreviere
<acronym> Un acronim
<address> Un element adresă
<applet> Un applet (o aplicaţie)
O zonă în interiorul unei
<area>
imagini hartă
<b> Text bold
Un URL de bază pentru
<base> toate legăturile dintr-o
pagină
<basefont> Un font de bază
Specifică dimensiunea
size • număr implicită a fontului din
pagina
<bdo> Direcţia textului afişat
<big> Text mărit
<blockquote> O cotaţie
<body> Cuprinsul documentului
background • adresa imaginii Imaginea de fond
• cod culoare
bgcolor Culoarea fondului
• nume culoare
Distanţa dintre marginea
• procent din
din stânga a ferestrei
leftmargin lăţimea paginii
browserului şi marginea
• număr de pixeli
din stânga a paginii
Distanţa dintre marginea
• procent din
de sus a ferestrei
topmargin înălţimea paginii
browserului şi marginea de
sus a paginii
• cod culoare
text Culoarea textului
• nume culoare
Culoarea legăturilor active
• cod culoare
alink (atunci când mouse-ul se
• nume culoare
află deasupra lor)
Culoarea legăturilor
• cod culoare
link nevizitate (nu s-a efectuat
• nume culoare
nici un click pe ele)
35
Tutorial HTML

Culoarea legăturilor
• cod culoare
vlink vizitate (s-a efectuat cel
• nume culoare
puţin un click pe ele)
<br> Sare la rând nou
<button> Un buton push
<caption> Un tabel de subtitlu
<center> Afişarea în centrul paginii
<cite> O citare
<code> Text de cod
Atribute pentru capete de
<col>
tabel
Grupuri de coloane din
<colgroup>
tabel
<dd> O definiţie descriere
<del> Text şters
<dir> O listă de directoare
O secţiune într-un
<div>
document
<dfn> O definiţie termen
<dl> O listă
<dt> O definiţie termen
<em> Text subliniat
<fieldset> Un câmp de text
<font> Fontul textului
• cod culoare
color Culoarea fontului
• nume culoare
face • nume font Tipul fontului
• un număr de la 1
size Mărimea fontului
la 7
<form> Formular interactiv
Adresa scriptului care
action • URL prelucrează datele din
cadrul formularului
• GET Metoda de prelucrare a
method
• POST datelor formularului
<frame> Cadru (fereastră)
Cadrul are sau nu are
frameborder • 1 sau 0
chenar
Spaţiu deasupra şi sub un
marginheight • număr de pixeli
cadru
Spaţiu la stânga şi la
marginwidth • număr de pixeli
dreapta unui cadru
src • URL Sursa cadrului
36
Tutorial HTML

Numele cadrului (utilizat
împreună cu target=nume
name • nume ca parte componentă a
marcajului de tip ancoră
<a>)
• on Defineşte opţiunea barei
scrolling • off de derulare: activă,
• auto inactivă, automată
<frameset> Mulţime de ferestre
• procent din
Numărul şi mărimea
cols lăţimea paginii
relativă a coloanelor
• procent din
Numărul şi mărimea
rows înălţimea paginii
relativă a rândurilor
Specifică starea "on"
(activă) sau "off" (inactivă)
border • 1 sau 0
pentru chenarul cadrului
frameset (1 sau 0)
Specifică mărimea
frameborder • număr
chenarului
Mărimea spaţiului dintre
framespacing • număr
două cadre adiacente
Titluri în cadrul
h1, h2, ... , h6
documentului
• left
• center
align Alinierea titlului
• right
• justify
<head> Antetul documentului
<hr> Linie orizontală
• left
align • center Alinierea orizontală a liniei
• right
• cod culoare Culoarea liniei numai
color
• nume culoare pentru Internet Explorer
size • număr de pixeli Înălţimea liniei
• procent din
width lăţimea paginii Lăţimea liniei
Dezactivează afişarea
noshade umbrei pentru rigla
orizontală
<html> Document HTML
<i> Text italic
37
Tutorial HTML

Cadru intern (numai pentru
<iframe>
IE)
src • URL Sursa cadrului
Numele ferestrei (util
name • nume
pentru target)
height • număr Înălţimea cadrului înglobat
width • număr Lăţimea cadrului înglobat
<img> Adăugarea unei imagini
Alinierea imaginii în
• left pagină: left (stanga) sau
• right right (dreapta)
align • top Alinierea elementelor din
• middle jurul imaginii: top (sus),
• bottom middle (mijloc), bottom
(jos)
Text ce va fi afişat în locul
alt • text imaginii, în cazul în care,
aceasta nu este afişată
Mărimea chenarului din
border • număr de pixeli
jurul imaginii
• procent
height Înălţimea imaginii
Spaţiu pe orizontală în
hspace • număr de pixeli
jurul imaginii
src • URL Adresa imaginii
Spaţiu pe verticală în jurul
vspace • număr de pixeli
imaginii
• procent
width Lăţimea imaginii
Element al formularului.
<input> Câmp de text sau alte date
de intrare
Buton/casetă marcată în
checked • opţiune
mod prestabilit
Număr maxim de
maxlength • număr
caractere
• date de tip Numele simbolic al valorii
name
caracter câmpului
Numărul maxim de
size • număr
caractere acceptate
src • URL Adresa pentru o imagine
38
Tutorial HTML

• text
• password
• checkbox
• radio
• submit
type Tip input
• reset
• file
• hidden
• image
• button
Valoare input. Conţinutul
• date de tip
value prestabilit al câmpului de
caracter
text
<ins> Un text inserat
Defineşte o singură linie
<isindex>
de intrare
<kbd> Text tastatură
O etichetă pentru o formă
<label>
de control
Un nume într-un câmp
<legend>
fieldset
• top
Specifică alinierea
• bottom
align legendei (explicaţiei)
• left
afişate
• right
Specifică ordinea
tabindex • număr elementelor atunci când
utilizatorul apasă tasta Tab
Specifică tasta care
asigură comanda rapidă
acceskey • caracter
de la tastatura asociată
unui anumit element
Elementul este inactiv, dar
disabled
este afişat pe ecran
Elementul este afişat pe
readonly
ecran dar nu poate fi editat
<li> Element al unei liste
<link> O resursă de referinţă
<map> O imagine hartă
<menu> O lista de meniu
<meta> Metainformaţii
Descrie valoarea
content • text
atributului name
• author Autor
name • description Descriere
• keywords Cuvinte cheie
39
Tutorial HTML

<noframes> O secţiune noframe
<noscript> O secţiune noscript
<object> Un obiect incorporat
<ol> Lista ordonată
Cu ce valoare începe
start • număr
numerotarea
Tipul numerotării: A, a, I, i,
type • A, a, I, i, 1
1 (implicit)
<optgroup> O opţiune de grup
O opţiune într-o listă
<option>
verticală
<p> Paragraf
• left
• center
align Alinierea paragrafului
• right
• justify
Un parametru pentru un
<param>
obiect
<pre> Text preformatat
O perioadă scurtă de
<q>
cotare
<s> Text tăiat
<samp> Mostră de cod
Include un script de regulă
<script>
Javascript, în pagina Web
language • limbaj Limbajul utilizat
Eveniment care
event • eveniment declanşează execuţia unor
scripturi specifice
Numele obiectului din
for • numeobiect pagină asupra căruia
acţionează scriptul
<select> Listă de selecţii
Permite selecţia mai
multiple
multor elemente
• date de tip
name Numele listei de selecţii
caracter
Numărul de elemente ale
size • număr
listei
<small> Text mic
O secţiune într-un
<span>
document
<strike> Text tăiat
<strong> Text evidenţiat
<style> O definire de stil
40
Tutorial HTML

Tipul modelului de stiluri.
type • valoare
De regulă "text/css"
Text indice inferior
<sub>
(subscript)
Text exponent
<sup>
(superscript)
<table> Tabel
• left
align • center Alinierea tabelului
• right
Imaginea de fond pentru
background • URL
tabel
• cod culoare Culoarea fondului pentru
bgcolor
• nume culoare tabel
• procent
border Chenarul tabelului
• cod culoare
bordercolor Culoarea chenarului
• nume culoare
Spaţiu între conţinutul
cellpadding • număr de pixeli celulelor tabelului şi
marginile lor
Spaţiu între celulele
cellspacing • număr de pixeli
tabelului
Numărul de coloane ale
cols • număr
unui tabel
Spaţiu pe orizontală în
hspace • număr de pixeli
jurul tabelului
Spaţiu pe verticală în jurul
vspace • număr de pixeli
tabelului
• procent
width Lăţimea tabelului
Cea mai deschisă culoare
bordercolorlight • culoare din cele două culori
specificate
Cea mai închisă culoare
bordercolordark • culoare din cele două culori
specificate
width • număr Laţimea impusă tabelului
frame • valoare Ajustarea fină a tabelului
Ajustarea fină a riglelor
rules • valoare
tabelului
<tbody> Corpul unui tabel
<td> Celula de tabel
align
• left Alinierea conţinutului
• center celulei pe orizontală
41
Tutorial HTML

• right
Aliniaza celule de date cu

• baseline linia de bază a textului
adiacent
Aliniaza o coloană faţă de
un anumit carcater
• caracter
(caracterul prestabilit este
".")
Aliniază atât marginea din
• justify stânga cât şi marginea din
dreapta a unui text
Imaginea de fond pentru
background • URL
celulă
bgcolor
• nume culoare celulă
Numărul de coloane pe
colspan • număr
care se întinde celula
height • număr de pixeli Înălţimea celulei
Numărul de linii pe care se
rowspan • număr
întinde celula
• top
Alinierea conţinutului
valign • middle
celulei pe verticală
• bottom
width • număr de pixeli Lăţimea celulei
Nu permite despărţirea
nowrap textului pe linii în cadrul
unei celule
<textarea> Câmp de editare multilinie
cols • număr Numărul de coloane
• date de tip Numele câmpului de
name
caracter editare multilinie
rows • număr Numărul de rânduri
Zona de sfârşit a unui
<tfoot>
tabel
<th> Un antet de tabel
<thead> Un antet de tabel
<title> Titlu document
<tr> Rând de tabel
• left
align • center
celulelor pe orizontală
• right
bgcolor
• nume culoare tot rândul
42
Tutorial HTML

• top
valign • middle
celulelor pe verticală
• bottom
<tt> Text tipărit
<u> Text subliniat
<ul> Listă neordonată
• circle
type • disc Forma marcajului
• square
<var> O variabilă
5.2. Structura documentelor HTML

Majoritatea navigatoarelor permit vizualizarea paginii curente în formatul sursă
HTML (forma pe care o interpretează pentru afişarea paginii). La interpretare,
programele de navigare ignoră spaţiile şi <Enter>-urile, aplicând formatarea
specificată.
Pentru structurarea şi organizarea informaţiilor din paginile web se pot utiliza
frame-uri (marcajul <frame>), prin care la un moment dat se afişează mai multe
ferestre conţinând fiecare câte o pagină. Introducerea şi gestiunea frame-urilor se
realizează foarte convenabil folosind editoarele HTML.
Conţinutul oricărui fişier HTML trebuie inclus între tag-urile <html> şi </html>:
<html>...aici se completează informaţia de prezentat în pagină... </html>
Un document HTML, la modul general, este divizat în:
1. secţiunea antet (între <head> şi </head>) care include şi titlul
documentului;
2. secţiunea corp (între <body> şi </body>) care include conţinutul.
Structura unui document HTML poate fi reprezentată, schematic, astfel:
<html> Început document
<head> Început antet
<title> Început titlu
</title> Sfârşit titlu
</head> Sfârşit antet
<body> Început corp de document
.
. Corp de document
.
<body> Sfârşit corp de document
</html> Sfârşit document
43
Tutorial HTML
Un exemplu de pagina HTML foarte simplă, având titlul "Hello, world!" este:
<html>
<head>
<title>Hello world! </title>
</head>
<body>
…aici se completeaza continutul paginii…
</body>
</html>
Observaţii.
1. Tag-urile <html>...</html>, <head>...</head>, <title>...</title> şi
<body>...</body> vor apărea o singură dată în cadrul unui fişier HTML,
după cum arată exemplul de mai sus.
2. Nu lăsaţi un spaţiu după „<” pentru că browserul nu mai recunoaşte
instrucţiunea!
3. Primul tag din document este <html>. Acesta are rolul de a anunţa
browserul că urmează un document HTML. La sfârşitul documentului
avem </html>, acesta atenţionând browserul că a ajuns la sfârşitul
documentului HTML. În continuare avem două delimitări importante ale
documentului partea de head şi cea de body.
4. Blocul de text dintre <head> şi </head> este informaţia din antet care nu
se afişează în fereastra browserului. În antetul documentului se
inserează:
Anumite secvenţe de program (script-uri), care se execută la
încărcarea documentului în browser. Aceste elemente, numite
metatag-uri sunt deosebit de importante pentru ca pagina să fie cât
mai bine cotată de către motoarele de căutare.
Tag-urile <title>...</title> marchează titlul documentului care va fi
afişat pe fereastra browserului. Titlul documentului este deosebit
de important deoarece este unul din criteriile folosite de motoarele
de căutare pentru indexarea paginii. Prin urmare, străduiţi-vă să
găsiţi un titlu care să descrie cât mai corect şi complet conţinutul
paginii dumneavoastră.
5. Tag-urile <body>...</body> delimitează zona de text care va fi afişată în
cadrul ferestrei browser-ului. Corpul documentului poate fi implementat
şi prin elementul <frameset>.
44
Tutorial HTML
6. Elementele <html> şi <head> sunt opţionale, însă orice document HTML

trebuie să includă un element <title> în secţiunea de antet.
7. Salvează pagina cu ce nume vrei tu, dar nu uita de extensia .html sau
.htm! În principiu nu contează pentru că ambele sunt interpretate la fel.
Extensia „htm” a devenit mai populară datorită faptului că majoritatea
extensiilor fişierelor sunt formate din 3 litere. Oricum consecvenţa în
utilizarea unei singure extensii este foarte importantă.
8. Deschide fişierul salvat cu Netscape sau Internet Explorer.
9. Fereastra deschisă va
avea ca titlu: "Hello,
world!" şi drept conţinut:
"...aici se completeaza
continutul paginii...".
10. Pentru a vedea codul
unei pagini web scrise cu HTML alege din meniul View al browserului
opţiunea Source.
11. Nu uita, atunci când scrii codul unei pagini web să închizi toate tag-urile
pe care le-ai deschis. Pentru a fi sigur că nu uiţi încearcă să te
obişnuieşti să scrii după fiecare tag şi tag-ul de încheiere (la tag-urile
pereche), scriind apoi conţinutul între ele.
12. O altă soluţie pentru a nu uita să închizi vreun tag, este să foloseşti la
scrierea codului, un editor HTML (atunci când vrei să foloseşti un tag,
editorul va scrie automat şi tag-ul de încheiere).
13. Trebuie ţinut cont că tag-urile trebuie închise în ordine inversă faţă de
cum au fost deschise.
14. W3C recomandă utilizarea literelor mici în scrierea tag-urilor, aceasta
fiind recomandarea pentru standardul HTML 4. Pentru cei ce se
pregătesc să scrie tag-uri conform standardului XHTML utilizarea
literelor mici este obligatorie.
Deoarece structura documentelor HTML obişnuite este în realitate mult mai
complexă, se recomandă ca, pe măsură ce procesul de editare avansează, să
introduceţi comentarii în text pentru a face această structură cât mai explicită.
45
Tutorial HTML
Comentariile nu sunt vizibile pentru browser, ele servesc creatorului paginii pentru a
da un grad crescut de lizibilitate documentului HTML.
Comentariile constă în scurte informaţii, explicaţii la elementele de cod
utilizate, etc., fiind deosebit de utile ulterior, mai ales în situaţia în care se impune
depanarea codului.
Comentariile se introduc prin includerea textului între etichetele de mai jos.

Iată două exemple:
<!- - Acesta este un comentariu introdus in pagina Web - ->
<!- -Acesta este un comentariu
pe mai multe randuri
care ia sfarsit aici - ->
46
Tutorial HTML
6. Texte
6.1. Culori
O culoare poate fi precizată astfel:
1. Printr-un nume de culoare. Sunt disponibile cel puţin 16 nume de culori:
aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red,
silver, teal, white şi yellow.
2. Prin construcţia "#RRGGBB" unde R(red), G(green), sau B(blue) sunt
cifre hexazecimale şi pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b,
B, c, C, d, D, e, E, f, F; se pot defini astfel 65536 de culori.
Culorile sigure sunt acele culori care vor fi afişate de majoritatea browserelor.
Dacă, de exemplu, pentru fondul paginii tale web ai folosit o anumită culoare, dar nu
ai verificat să vezi dacă aceasta face parte din culorile sigure, atunci există
posibilitatea ca unii dintre utilizatorii paginii tale să vadă o cu totul altă culoare.
Cele mai importante culori care sunt recunoscute de majoritatea browserelor
sunt redate în tabelul care urmează:
Culoare Nume culoare Cod culoare
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
47
Tutorial HTML

DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
Darkorange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DodgerBlue #1E90FF
Feldspar #D19275
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
48
Tutorial HTML

LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateBlue #8470FF
LightSlateGray #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370D8
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #D87093
PapayaWhip #FFEFD5
49
Tutorial HTML

PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
VioletRed #D02090
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32
Culoarea fundalului unei pagini se precizează prin intermediul atributului

"bgcolor" din cadrul etichetei <body>. De exemplu: <body bgcolor = culoare>.
Culoarea textului se setează prin intermediul atributului "text" al tag-ului
<body>, după sintaxa <body text=culoare>.
Exemplu:
50
Tutorial HTML
<html>
<head>
<title>Atribute multiple </title>
</head>
<body bgcolor=yellow text=blue >
Fond de culoare galbena si text de
culoare albastra.
</body>
</html>
Efect:
6.1.1. Alegerea culorilor

Sunt multe elemente care trebuie luate în considerare la alegerea culorilor
pentru o pagină Web. Primul şi cel mai important este acela de a face conţinutul uşor
de citit. Aceasta înseamnă...aţi ghicit! Litere negre pe fond alb.
Deşi în vestimentaţie combinaţia de roşu cu bleumarin este rafinată, într-o
pagină Web literele roşii pe fond albastru nu arată bine şi sunt greu de citit. O altă
combinaţie nefericită este cea cu fondul negru sau de culoare foarte închisă şi textul
de culoare albă.
Să nu uităm nici faptul că toate monitoarele dispun de reglaje ale strălucirii
luminoase şi ale contrastului pe care utilizatorii le setează diferit, în funcţie de
preferinţele personale, de toleranţa ochiului, de iluminarea camerei, etc.
Pe un monitor cu reglaje medii ale contrastului şi strălucirii, un text de culoare
roşie dispus pe un fundal negru va fi ilizibil, chiar dacă la valori maxime ale acestor
caracteristici combinaţia poate genera efecte interesante.
În alegerea culorilor pentru un site este bine să ţineţi seama de câteva
elemente de psihologia culorilor, pentru a sublinia astfel mesajul pe care vreţi să îl
transmiteţi. Iată câteva dintre sentimentele pe care le sugerează culorile:
51
Tutorial HTML
Roşu - agresivitate, pasiune, putere, vitalitate

Roz - feminitate, inocenţă, moliciune
Portocaliu - amuzament, veselie, căldură, exuberanţă
Galben - sentimente pozitive şi cordialitate
Verde - linişte, sănătate, prospeţime
Albastru - autoritate, demnitate, securitate, încredere
Violet - sofisticare, spiritualitate, mister
Maro - utilitate, legătura cu pământul, bogăţie
Alb - puritate, încredere, modernitate, rafinament
Gri - sobrietate, autoritate, simţ practic
Negru - seriozitate, distincţie, hotărâre
Alegerea culorilor pentru site trebuie să fie în concordanţă cu tema site-ului şi
să sublinieze mesajul său. Astfel, dacă doriţi să construiţi un site destinat copiilor veţi
folosi culori vesele şi luminoase, în vreme ce pentru un site destinat prezentării unei
firme de consultanţă financiară sunt potrivite culori sobre şi care sugerează
seriozitate şi încredere.
Alegerea culorilor pentru legături este, de asemenea, importantă. Legăturile
au, în mod prestabilit, anumite culori. Schimbarea acestora, deşi posibilă, îl poate
induce în eroare pe vizitator. Ca şi în cazul textului, alegeţi pentru legături, legăturile
vizitate şi legătura activă culori care să vină în contrast cu culoarea sau imaginea de
fundal a paginii. Rămâneţi consecvent culorilor alese pentru legături, pe parcursul
întregului site.
6.2. Caractere speciale HTML

Entităţile, constituie o metodă de reprezentare a caracterelor care nu ar putea
fi redate corect în cadrul unui document HTML dacă ar fi scrise ca atare, direct de la
tastatură, sau care nu sunt disponibile la tastatură. O referinţă la o entitate caracter
este o construcţie SGML care face trimitere la un caracter al setului de caractere utilizat
în document. Referinţele la caracter vor fi scrise sub forma &nume_entitate;.
Observaţie. Caracterele speciale sunt “case sensitive”.
Mai jos este redat codul caracterelor româneşti şi unele din cele mai folosite
caractere speciale:
Cod HTML Semnificaţie Cod HTML Semnificaţie

52
Tutorial HTML
ă ă © © (semnul pentru copyright)

Ă Ă ® ® (marcă înregistrată)
î î ™ ™ (TradeMark)
Î Î £ £
ş ş ¥ ¥
Ş Ş € €
ţ ţ “ “
Ţ Ţ ” ”
â â — —
Â Â < <
Non Breaking SPace > >
& & (semnul ampersand) § §
ß ß
Lista completă este redată de tabelul următor:

" " " Τ Τ Τ
& & & Υ Υ Υ
< < < Φ Φ Φ
> > > Χ Χ Χ
Ψ Ψ Ψ
¡ ¡ ¡ Ω Ω Ω
¢ ¢ ¢ α α α
£ £ £ β β β
¤ ¤ ¤ γ γ γ
¥ ¥ ¥ δ δ δ
¦ ¦ ¦ ε ε ε
§ § § ζ ζ ζ
¨ ¨ ¨ η η η
© © © θ θ θ
ª ª ª ι ι ι
« « « κ κ κ
¬ ¬ ¬ λ λ λ
&miu; μ µ
® ® ® &niu; ν ν
¯ ¯ ¯ ξ ξ ξ
° ° ° ο ο ο
± ± ± π π π
² ² ² ρ ρ ρ
³ ³ ³ &sigmaf; ς ς
´ ´ ´ σ σ σ
µ µ µ τ τ τ
¶ ¶ ¶ υ υ υ
· · · φ φ φ
53
Tutorial HTML

¸ ¸ ¸ χ χ χ
¹ ¹ ¹ ψ ψ ψ
º º º ω ω ω
» » » &thetasym; ϑ ϑ
¼ ¼ ¼ &upsih; ϒ ϑ
½ ½ ½ ϖ ϖ ϑ
¾ ¾ ¾ &ensp;
¿ ¿ ¿ &emsp;
À À À ϑ
Á Á Á &zwnj; ‌
Â Â Â &zwj; ‍
Ã Ã Ă &lrm; ‎
Ä Ä Ä &rlm; ‏
Å Å Å – – –
Æ Æ Æ — — —
Ç Ç Ç ‘ ‘ ‘
È È È ’ ’ ’
É É É &sbquo; ‚ ‚
Ê Ê Ê “ “ “
Ë Ë Ë ” ” ”
Ì Ì Ì &bdquo; „ „
Í Í Í &dagger; † †
Î Î Î &Dagger; ‡ ‡
Ï Ï Ï • • •
Ð Ð Ð … … …
Ñ Ñ Ñ &permil; ‰ ‰
Ò Ò Ò ′ ′ ′
Ó Ó Ó ″ ″ ″
Ô Ô Ô &lsaquo; ‹ ‹
Õ Õ Õ &rsaquo; › ›
Ö Ö Ö &oline; ‾ 
× × × &frasl; ⁄ ⁄
Ø Ø Ø € € €
Ù Ù Ù &image; ℑ ϑ
Ú Ú Ú &weierp; ℘ ϑ
Û Û Û &real; ℜ ϑ
Ü Ü Ü ™ ™ ™
Ý Ý Ý &alefsym; ℵ ϑ
Þ Þ Þ ← ← ←
ß ß ß ↑ ↑ ↑
à à à → → →
á á á ↓ ↓ ↓
â â â ↔ ↔ ↔
ã ã ă &crarr; ↵ ϑ
54
Tutorial HTML

ä ä ä &Arr; ⇐ ϑ
å å å &uArr; ⇑ ϑ
æ æ æ ⇒ ⇒ ϑ
ç ç ç &dArr; ⇓ ϑ
è è è ⇔ ⇔ ϑ
é é é ∀ ∀ ϑ
ê ê ê ∂ ∂ ∂
ë ë ë ∃ ∃ ϑ
ì ì ì ∅ ∅ ϑ
í í í ∇ ∇ ϑ
î î î ∈ ∈ ϑ
ï ï ï ∉ ∉ ϑ
ð ð ð &ni; ∋ ϑ
ñ ñ ñ ∏ ∏ ∏
ò ò ò ∑ ∑ ∑
ó ó ó − − −
ô ô ô &lowast; ∗ ϑ
õ õ õ √ √ √
ö ö ö &prop; ∝ ϑ
÷ ÷ ÷ ∞ ∞ ∞
ø ø ø &ang; ∠ ϑ
ù ù ù &and; ∧ ϑ
ú ú ú &or; ∨ ϑ
û û û ∩ ∩ ∩
ü ü ü ∪ ∪ ϑ
ý ý ý ∫ ∫ ∫
þ þ þ &there4; ∴ ϑ
ÿ ÿ ÿ &sim; ∼ ϑ
&OElig; Œ Œ &cong; ≅ ϑ
&Oelig; œ œ ≈ ≈ ≈
&Scaron; Š Š ≠ ≠ ≠
&scaron; š š &equiv; ≡ ≡
&Yuml; Ÿ Ÿ ≤ ≤ ≤
&fnof; ƒ ƒ ≥ ≥ ≥
&circ; ˆ ˆ ⊂ ⊂ ϑ
&tilde; ˜ ˜ ⊃ ⊃ ϑ
Α Α Α &nsub; ⊄ ϑ
Β Β Β &sube; ⊆ ϑ
Γ Γ Γ &supe; ⊇ ϑ
Δ Δ ∆ &oplus; ⊕ ϑ
Ε Ε Ε &otimes; ⊗ ϑ
Ζ Ζ Ζ &perp; ⊥ ϑ
Η Η Η ⋅ ⋅ ϑ
Θ Θ Θ &lceil; ⌈ ϑ
55
Tutorial HTML

Ι Ι Ι &rceil; ⌉ ϑ
Κ Κ Κ &lfloor; ⌊ ϑ
Λ Λ Λ &rfloor; ⌋ ϑ
&Miu; Μ Μ &lang; 〈 ϑ
&Niu; Ν Ν &rang; 〉 ϑ
Ξ Ξ Ξ &loz; ◊ ◊
Ο Ο Ο &spades; ♠ ♠
Π Π Π &clubs; ♣ ♣
Ρ Ρ Ρ &hearts; ♥ ♥
Σ Σ Σ &diams; ♦ ♦
Observaţii.
1. Într-un fişier HTML afişarea mai multor spaţii consecutive nu este posibilă
prin scrierea directă în fişier, ci folosind de mai multe ori sintagma
„ ”. Astfel, pentru a pune trei spaţii între cuvinte va trebui să se scrie
în fişierul HTML astfel:
2. Deşi este utilizată pentru inserarea de spaţii, sintagma are o alta
semnificaţie: nbsp înseamnă caracterul special Non Breaking SPace.
Prezenţa acestui caracter special între două cuvinte împiedică plasarea
lor pe rânduri separate.
6.3. Formatarea caracterelor

Deşi există multe tag-uri dedicate formatării caracterelor, această formatare nu
este la nivelul celei produse de un procesor de text. Multe tag-uri sunt lăsate la
interpretarea browserelor sau constituie rezervă pentru dezvoltări ulterioare. Este de
aşteptat ca următoarele versiuni de HTML să accepte definirea de stiluri, ceea ar
facilita formatarea unitară a unui document.
Ruperea rândului: <br [clear="left"|"right"|"all"|"none"]>. Trecerea la un nou
rând, în fişierul HTML, nu se face apăsând Enter, ci utilizând tag-ul <br> (line
BReak). Acest tag se utilizează singur (nu se foloseşte cu </br>) şi reprezintă o
rupere de rând, fără a se trece la un nou paragraf (deci fără a se lăsa spaţiu
suplimentar între rânduri). Atributul clear are efectul anulării alinierilor precedente
când marginea stângă, dreaptă, ambele, sau niciuna sunt libere de imagini flotante
(vezi tag-ul <img>).
56
Tutorial HTML
Formatarea caracterelor se poate efectua la nivel fizic, la nivel logic sau la

nivel de comunicare.
6.3.1. Formatare la nivel fizic
Formatarea la nivel fizic se efectuează atunci când se indică direct fontul,

culoarea şi/sau dimensiunea caracterelor cu care se afişează anumite porţiuni de
text.
<font [size=[+|-]1|2|3|4|5|6|7] [color="#rrggbb"|"color"] [face="font"]> text </font>
Aceşti parametri pot fi utilizaţi separat sau simultan în cadrul tag-ului <font>.
Pentru a scrie un fragment de text cu caractere de o anumită culoare se
utilizează atributul color la valoarea necesară. De exemplu:
<font color=red>fragment de text de culoare rosie</font>
Observaţie. Culoarea implicită este negru.
Pentru a scrie un text într-o pagină pot fi folosite mai multe fonturi (stiluri de
caractere). Există cinci familii generice de fonturi care sunt de regulă disponibile pe
toate calculatoarele utilizatorilor: serif, sans serif, cursive, monospace şi fantasy.
Tipul de font necesar se stabileşte prin atributul face. Pot fi introduse mai multe
fonturi separate prin virgulă. De exemplu:
<font face="Arial, Verdana, serif, monospace">
În acest caz browserul va utiliza primul font pe care îl cunoaşte.
Observaţie. Vizitatorii paginii trebuie să aibă fontul respectiv instalat pe
calculator, deci este indicat să se utilizeze numai fonturi "clasice". Fontul implicit este
Times New Roman.
Exemplu:
<html>
<head>
<title> Culoarea si familia fontului</title>
</head>
<body>
Aceasta linie este scrisa cu caractere normale.<br>
<font color="red">Aceasta linie este rosie.</font> <br>
Aici<font color="green"> fiecare</font>
<font color="blue">cuvant</font>
<font color="yellow">are</font>
<font color="cyan">alta</font>
<font color="#3478fa">culoare.</font><br>
<font face="monospace">Linie scrisa cu caractere
57
Tutorial HTML
monospatiate.</font> <br>
<font face="arial">Linie scrisa cu caractere arial.</font>
</body>
</html>
Efect:
Pentru a stabili mărimea unui font se utilizează atributul size. Valorile acestui
atribut pot fi:
1, 2, 3, 4, 5, 6, 7 (1 pentru cel mai mic font şi 7 pentru cel mai mare);
+1, +2, etc. , pentru a mări dimensiunea fontului cu 1, 2, etc. faţă de
valoarea curentă;
-1, -2, etc., pentru a micşora dimensiunea fontului cu 1, 2, etc. faţă de
valoarea curentă.
Exemplu:
<html>
<head>
<title> Marimea fontului</title>
</head>
<body>
Aceasta linie este scrisa cu caractere normale.<br>
<font size="5">Fonturi de marime 5.</font><br>
<font size="4">Fonturi de marime 4.</font> <br>
<font size="-3">Fonturi de marime 1.</font><br>
<font size="+2">Fonturi de marime 6.</font>
</body>
</html>
Efect:
58
Tutorial HTML
Îngroşarea textului. Blocul <b> text </b> aplică textului stilul bold (aldin,
îngroşat), fără a produce o rupere de rând. Este utilizat pentru evidenţierea anumitor
cuvinte, propoziţii etc.
Înclinarea textului. Blocul <i>text</i> aplică textului stilul italic (cursiv,
înclinat), fără a produce o rupere de rând. Este utilizat pentru evidenţierea anumitor
cuvinte, propoziţii etc.
Sublinierea textului. Blocul <u>text</u> subliniază textul conţinut. Nu
provoacă trecerea pe un rând nou. Sublinierea cu tag-ul <u> poate produce,
împreună cu utilizarea unor culori, confuzii cu legăturile utilizate într-un hypertext. Se
va prefera evidenţierea textului prin alte mijloace.
Tăierea textului. Blocul strike>text</strike> produce "tăierea" cu o linie a
textului conţinut. Nu are loc rupere de rând. Este utilizat, de obicei, pentru
producerea unor exemple negative: aşa nu se face).
Text monospaţiat. Blocul <tt>text</tt> se foloseşte pentru a afişa textul inclus
în container cu fonturi monospaţiate. Tipul de font monospaţiat (cum este de exemplu
Courier) are proprietatea că fiecărui caracter i se rezervă acelaşi număr de pixeli pe
ecran. Astfel, caracterul "i" va avea alocat tot atâta spaţiu pe ecran ca şi caracterul
"W": "Courier" este un font monospaţiat. Este utilizat, în general, pentru
prezentarea unei ieşiri de tip listing (clasic) de calculator. Nu produce o rupere de
rând.
Exemple cu stiluri de fonturi.
<html>
<head>
<title> Stiluri de font </title>
</head>
<body>
<b>Acest text este Bold</b><br>
<i>Acest text este Italic (cursiv) </i><br>
<u>Acest text este Underline</u><br>
59
Tutorial HTML
<strike>Acest text este Strike</strike><br>

Urmeaza un text cu caractere monospatiate: <tt>Caractere
monospatiate</tt><br>
</body>
</html>
Efect:
6.3.2. Formatare la nivel logic.
Formatarea la nivel logic se efectuează atunci când se indică doar faptul că o

anumită porţiune de text trebuie evidenţiată faţă de textul din jur şi se lasă la
latitudinea browserului să efectueze această evidenţiere. Multe dintre tag-urile care
realizează acest lucru produc acelaşi efect vizibil, diferenţierea lor fiind lăsată
browserelor de generaţii viitoare.
Crearea indexului unui document. Blocul <dfn>text</dfn> este folosit pentru
a insera în text definiţia (definition) unor termeni. Este util la crearea indexului sau
glosarului unui document. Textul de definiţie este identificat şi va fi scris cu caractere
diferite de textul înconjurător. Nu produce o rupere de rând.
Accentuarea unui text (emphasized). Blocul <em>text</em> va evidenţia
textul specificat, de obicei prin scrierea înclinată. Nu produce rupere de rând.
Introducerea unui text de la tastatură (keyboard). Blocul <kbd>text</kbd>
se foloseşte pentru a indica un text care urmează a fi introdus de la tastatură, ca în
următorul exemplu: Pentru a parasi programul tastati <kbd>quit</kbd>. Textului
menţionat i se aplică un font similar intrării de la tastatură, deci un font
neproporţional. Tag-ul <kbd> nu provoacă o rupere de rând. Multe browsere aplică
acelaşi font pentru <kbd>, <pre>, <tt> şi alte asemenea.
Inserarea unei mostre de text (sample). Blocul <samp>text</samp> este
folosit pentru a insera o mostră de text. Aplică textului din container un font
60
Tutorial HTML
asemănător ieşirii de calculator (neproporţional). Nu produce trecerea pe un rând

nou. Multe browsere utilizează acelaşi font ca pentru <tt>.
Accentuarea unui text (big). Blocul <big>text</big> afişează textul din
container cu dimensiune mai mare decât fontul de bază. Tag-ul nu produce o rupere
de rând. Unele editoare HTML convertesc tag-ul <big>în <font size=+1>text</font>.
Accentuarea unui text (small). Blocul <small>text</small> afişează textul din
container cu o dimensiune mai mică decât textul înconjurător. Nu produce rupere
automată de rând. Unele editoare HTML convertesc tag-ul <small> în
<font size=-1>text</font>.
Accentuarea unui text (strong). Blocul <strong>text</strong> produce o
evidenţiere pronunţată a textului, uzual prin trecerea în aldine. Nu produce rupere
automată de rând.
Inserarea indicilor superiori (superscript). Textul cuprins între tag-urile
<sup>…</sup> va fi mutat mai sus decât linia de bază a textului precedent şi îi va fi
aplicat un font mai mic (face trecerea în indice superior – exponent). Nu produce
rupere automată de rând.
Inserarea indicilor inferiori (subscript). Textul cuprins între tag-urile
<sub>…</sub> va fi mutat mai sus decât linia de bază a textului precedent şi îi va fi
aplicat un font mai mic (face trecerea în indice inferior). Nu produce rupere automată
de rând.
Exemple cu formatări la nivel logic:
<html>
<head>
<title> Formatare la nivel logic </title>
</head>
<body>
Aceasta este o definitie<dfn> Definitie </dfn> <br>
<kbd>Acesta este un text scris cu un font neproporţional kbd </kbd>
<br>
<em>Acesta este un text scris inclinat cu em </em> <br>
<samp>Acesta este un text scris cu samp</samp><br>
<big>Acesta este un text big</big> <br>
<small>Acesta este un text small</small> <br>
<strong>Acesta este un text strong</strong> <br>
Acum se aplica un format superscipt pentru X la puterea n: X
<sup>n</sup>, <br>
iar pentru formula apei H<sub>2</sub>O am aplicat un format
subscript.
</body>
61
Tutorial HTML
</html>
Efect:
Blocuri de titlu. Într-un text titlurile (headers) de capitole pot fi introduse cu

ajutorul etichetelor <h1|h2|h3|h4|h5|h6 [align=”left”|”center”|”right”] > text
</h1|h2|h3|h4|h5|h6>. Toate aceste etichete se referă la un bloc de text şi trebuie
însoţite de o etichetă de încheiere similară. Aceste etichete acceptă atributul align
pentru alinierea titlului blocului de text la stânga (în mod prestabilit), în centru şi la
dreapta. Tag-ul <h1> permite scrierea unui titlu cu caractere mai mari si aldine, pe
când <h6> foloseşte caracterele cele mai mici.
Exemplu:
<html>
<head>
<title> Blocuri de titlu</title>
</head>
<body>
<h1 align="center"> Titlu de marime 1 aliniat in centru </h1>
<h2 align="right"> Titlu de marime 2 aliniat la dreapta. </h2>
<h4> Titlu de marime 4 aliniat la stanga (implicit) </h4>
</body>
</html>
Efect:
62
Tutorial HTML
Observaţii.
i. Este de preferat ca stilurile să se specifice în ordine, adică, să nu se
utilizeze, de exemplu, H3 fără a fi utilizat H2 etc.
ii. Tag-urile Hn provoacă o rupere de rând şi, implicit, au câte un rând gol
înainte şi după.
6.3.3. Formatare la nivel de comunicare.
În această secţiune se prezintă tag-uri dedicate formatărilor specifice pentru

anumite tipuri de informaţii. Formatările respective intră tot în categoria formatărilor
logice, deci forma de vizualizare depinde de browserul utilizat.
Inserarea unei adrese. Dacă într-o pagină web trebuie inclusă o adresă
(uzual o adresă de e-mail), atunci putem utiliza facilităţile oferite de eticheta dedicată:
<address [align=”left”|”center”|”right”]> text </address>. Atributul align indică modul
de aliniere orizontală.
Inserarea unui citat (citation). Dacă dorim ca într-un text să citam un termen,
titlul unei lucrări sau să dăm o referinţă, putem include textul respectiv între etichetele
<cite>…</cite>. Referinţa este diferenţiată faţă de textul curent. Formatarea este
logică, deci diferenţierea este dependentă de browserul utilizat. În cele mai multe
dintre browsere, textul inclus va fi afişat cu caractere italice. Nu se produce rupere de
rând.
Inserarea unor secvenţe de cod (code). Pentru inserarea în text a unor
secvenţe de cod scrise într-un limbaj de programare aceste se vor include între tag-
urile <code>…</code>. În general secvenţele de cod sunt afişate cu fonturi Courier.
Textului din container i se aplică un font neproporţional precum cel de calculator
63
Tutorial HTML
(clasic). Forma efectivă de afişaj depinde de browser. Multe browsere utilizează

acelaşi font pentru <code>, <kbd>, <pre>, <samp> şi <tt>.
Blocul <listing>text</listing>. Aplică textului din container un font similar
ieşirilor de calculator. Este un tag păstrat doar pentru compatibilitate cu versiuni mai
vechi. Provoacă trecerea la un nou paragraf.
Observaţie. Este preferabil să se utilizeze tag-ul <pre> pentru realizarea
funcţiunilor <listing> şi <code>.
Evidenţierea textului. Pentru a evidenţia un text, acesta se include între tag-
urile <var>...</var>. Se produce o evidenţiere a textului, uzual prin trecerea în italice.
Este o formatare logică, depinde deci de browser, dar este dedicată evidenţierii
termenilor noi introduşi într-un document. Nu produce schimbări în curgerea textului.
Urmează un exemplu cu toate formatările la nivel de comunicare.
<html>
<head>
<title>Formatare la nivel de comunicare </title>
</head>
<body>
Adresa şcolii noastre este:<address> Colegiul Naţional &bdquo;Gib
Mihaescu“<br>
Aleea Şcolii, Nr: 1 <br>
Dragasani – Romania </address>
Pentru mai multe informatii contactati-ma la <address>
gibmihaescu@yahoo.com</address>
In acest tutorial s-au utilizat unele definitii de tag-uri dupa volumul
<cite>HTML in Plain English. </cite> HTML in Plain English reprezinta un
citat.<br>
Urmeaza un exemplu de utilizare a formatării code: <code>Acesta este un
exemplu de utilizare a formatarii CODE.</code> <br>
Acum urmeaza un exemplu de utilizare a formatării var: <var> Acesta este
un exemplu de utilizare a formatarii VAR </var>.
</body>
</html>
Efect:
64
Tutorial HTML
6.4. Extensii Netscape şi Microsoft

Aceste extensii nu sunt recunoscute de toate browserele, dar importanţa lor le
va impune probabil ca standarde.
Blocul <basefont [size=1|2|3|4|5|6|7] [color="#rrggbb"|"color"] [name="font"]>
[</basefont>] defineşte fontul care va fi utilizat pentru textul unei întregi pagini Web
care urmează tag-ului <basefont>:
size este mărimea fontului. Implicit este 3.
color este culoarea fontului. Opţunea este doar Microsoft.
name specifică numele fontului. Opţiunea este doar Microsoft.
Spre deosebire de <font> aceasta nu este o etichetă container, deoarece
efectul ei se referă la tot textul din pagină. Nu se foloseşte pentru a stabili
caracteristicile unui bloc de text.
Observaţie. Deşi eticheta <basefont> face parte din standardul HTML 3.2,
atributele sale nu sunt recunoscute de browserele Netscape. Ca urmare, acesta va
afişa textul utilizând propriile setări prestabilite (default), ignorând atributele
menţionate în eticheta <basefont>.
Blocul <blink>text</blink> produce "clipirea" textului conţinut în container.
Este extensie Netscape.
Exemplu de formatare <basefont> şi <blink>:
<html>
<head>
<title> Basefont si blink</title>
</head>
<body>
Acesta este un <basefont size=5 color=”blue”>exemplu</basefont> de
utilizare a formatarii basefont si <basefont size=4> <blink>blink</blink>. De
remarcat ca dimensiunea din basefont se pastreaza in continuare.
65
Tutorial HTML
</body>
</html>
Efect:
Afişarea textului pe o singură linie. Blocul <nobr>text</nobr> anulează

wrap-ul automat al cuvintelor pentru textul din container şi ruperile de rânduri
generate, cu exceptia celor provocate de <br>, <p> şi <wbr>. Cu alte cuvinte, blocul
de text cuprins între etichetele <nobr>...</nobr> va fi afişat pe o singură linie, chiar
dacă acest lucru înseamnă depăşirea marginii ferestrei şi derularea acestuia pe
orizontală. Aceasta este extensie Netscape şi Microsoft şi poate servi la aranjarea
unor texte în linii predefinite.
Exemplul care urmează chiar dacă acest lucru înseamnă depăşirea marginii
ferestrei şi derularea acestuia pe orizontală poate fi ilustrativ dacă veţi încerca să
modificaţi dimensiunea ferestrei de afişare a exemplului.
<html>
<head>
<title> Formatare nobr</title>
</head>
<body>
Acesta este un text care permite ruperea automata a randurilor si potrivirea
pe dimensiunea de afisare. <p> <nobr>Aici începe zona sub actiunea tag-
ului nobr. Este de remarcat ca se pastreaza randurile asa cum au fost
scrise, cele lungi putand fi vazute cu defilarea orizontal.<br> Aici s-a utilizat
br pentru trecerea la un nou rand.<p> Aici s-a utilizat p pentru trecerea la un
nou paragraf. </nobr> <p>Aici s-a iesit de sub influenta nobr.
</body>
</html>
Efect:
66
Tutorial HTML
Eticheta <wbr> inserează o rupere de rând, într-o linie aflată în containerul

<nobr>. Este similar unui cratime opţionale (intenţia autorilor, dar diverse browsere
pot să considere obligatorie trecerea pe un nou rând).
Utilizarea uzuală este <nobr> text<wbr>text</nobr>.
Exemplul care urmează este bazat pe acelaşi text ca şi exemplul de la
<nobr>, dar în cadrul propoziţiei lungi s-au introdus tag-uri <wbr>. Urmăriţi ce se
întâmplă cu textul la modificarea lăţimii ferestrei.
<html>
<head>
<title> Formatare wbr </title>
</head>
<body>
Acesta este un text care permite ruperea automata a randurilor si potrivirea
pe dimensiunea de afisare. <p> <nobr>Aici începe zona sub actiunea tag-
ului NOBR. <wbr> Este de remarcat ca se pastreaza randurile asa cum au
fost scrise, <wbr> cele lungi putand fi vazute cu defilarea orizontal.<br> Aici
s-a utilizat BR pentru trecerea la un nou rand.<p> Aici s-a utilizat P pentru
trecerea la un nou paragraf. </nobr> <p>Aici s-a iesit de sub influenta
NOBR.
</body>
</html>
Efect:
67
Tutorial HTML
6.5. Formatarea textului

Cel mai important element al unei pagini web este, desigur, textul. Unitatea
principală de text este paragraful, care se remarcă prin:
Lăsarea unui spaţiu vertical suplimentar după el.
Textul este aliniat, implicit, la stânga şi este zdrenţuit în partea dreaptă.
În lipsa unor marcaje adecvate, nu se vor interpreta trecerile pe un rând nou
(CR/LF-urile), alinierile efectuate din tastatură etc. Aceasta are justificarea că
documentele trebuie să fie afişate pe maşini diferite, dar mai ales pentru că toate
browserele efectuează wrap automat ceea ce poate interfera inadecvat cu formatările
autorului. În cazurile când este necesară o anumită formă de curgere a textului,
aceasta se realizează prin tag-uri speciale.
Observaţii.
1. Pentru structurarea şi organizarea informaţiilor din paginile web se pot
utiliza frame-uri (marcajul <frame>), prin care la un moment dat se
afişează mai multe ferestre conţinând fiecare câte o pagină. Introducerea
şi gestiunea frame-urilor se realizează foarte convenabil folosind
editoarele HTML.
2. Mai menţionăm faptul că în ultimele versiuni ale limbajului HTML şi ale
browser-elor s-a introdus posibilitatea integrării, respectiv lansării în
execuţie, prin navigator, a unor aplicaţii. Acestea sunt scrise în limbajul
Java, un limbaj cu caracteristici distribuite şi obiectuale, adaptat
programării în Web; ele se numesc "applet"-uri (aplicaţii) şi se introduc în
68
Tutorial HTML
sursele HTML cu marcajul <app> sau <applet>. Ultimele versiuni de

editoare HTML permit introducerea interactivă a applet-urilor Java.
Linii orizontale: <hr [align="left"|"center"|"right"] [width=n (pixeli)|n% (din
lăţimea paginii)] [size=n (pixeli)] [color="#rrggbb"|"color"] [noshade]>. Într-o pagină
Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul tag-ului singular
<hr>. Pentru a configura o linie orizontală se utilizează următoarele atribute ale
etichetei <hr>:
align – permite alinierea liniei orizontale.
width – permite stabilirea lungimii liniei;
size – permite alegerea grosimii liniei;
noshade – când este prezent defineşte o linie fără umbră;
color – permite definirea culorii liniei.
Exemplu:
<html>
<head>
<title> Linii orizontale</title>
</head>
<body>
O linie implicita este cu aliniere la stanga, latime 100%, grosime 2 cu umbra.
<hr>Urmeaza o linie aliniata in centru , de latime 50%, grosime 5 pixeli , fara
umbra.
<hr align="center" width="50%" size="5" noshade> Urmeaza o linie aliniata la
dreapta , de latime 150 de pixeli, grosime 12 pixeli , de culoare rosie.
<hr align="right" width=150 size=12 color="red">
</body>
</html>
Efect:
Observaţie. Marcajul <hr> introduce o linie orizontală şi trece la un rând nou.
69
Tutorial HTML
Centrarea textului. Blocul introdus de etichetele <center>...</center> aliniază

centrat toate elementele pe care le conţine.
Exemplu:
<html>
<head>
<title> Linii orizontale</title>
</head>
<body>
<center> <hr width=10%> <hr width=40%> <hr width=70%> <hr
width=100%> <hr width=70%> <hr width=40%> <hr width=10%>
</center>
</body>
</html>
Efect:
Observaţii.
1. Anumite browsere nu recunosc acest tag.
2. Unele editoare HTML convertesc tag-ul <center>text</center> în
<center><p>text</p></center> care introduce efectul suplimentar al
formării unui nou paragraf cu textul centrat (vezi <p> – blocul paragraf).
3. Utilizarea tag-ului <center> este, uneori, echivalentă cu <p align=center>.
Blocuri de text. Etichetele pentru blocuri de text nu se referă la
particularităţile caracterelor ce compun textul, ci la funcţiile pe care le poate avea un
bloc de text în cadrul paginii Web. Toate aceste etichete produc automat trecerea la
un rând nou şi adăugarea unui spaţiu suplimentar.
Blocul paragraf: <p [align="left"|"center"|"right"|"justify"]> text [</p>]. Cu
ajutorul etichetei paragraf <p> este posibilă trecerea la o linie nouă şi permite:
inserarea unui spaţiu suplimentar înainte de blocul paragraf;
70
Tutorial HTML
inserarea unui spaţiu suplimentar după blocul paragraf, dacă se foloseşte

delimitatorul </p> (acesta fiind opţional);
alinierea orizontală a textului cu ajutorul atributului align.
Exemplu:
<html>
<head>
<title> Blocuri paragraf</title>
</head>
<body>
Prima linie
<p> Linii generate de un paragraf (implicit paragraful este aliniat la stanga).
<p align="right"> Paragraf aliniat la dreapta. Paragraf aliniat la dreapta.
Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la
dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta.
<p align="center"> Paragraf aliniat in centru. Paragraf aliniat in centru.
Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in centru.
Paragraf aliniat in centru. Paragraf aliniat in centru.
</body>
</html>
Efect:
Observaţii referitoare la utilizarea paragrafelor.

1. Prin alinierea unui paragraf la ambele margini (justify), apare un
inconvenient de ordin estetic şi anume faptul că, prin această forţare,
spaţiul dintre cuvinte nu va mai fi acelaşi, el variind în funcţie de modul în
care se va umple rândul respectiv.
2. Utilizarea repetată paragrafelor goale (adică o succesiune de elemente
sub forma <p><p><p>) în scopul realizării unui spaţiu mai mare între două
71
Tutorial HTML
paragrafe nu constituie o soluţie corectă. Chiar dacă un browser poate

interpreta corect acest lucru există browsere care nu citesc decât un
singur paragraf gol, urmând ca restul paragrafelor goale să fie ignorate.
Între două paragrafe va rămâne un rând liber.
3. Distanţa dintre paragrafe poate fi modificată dar acest lucru nu poate fi
realizat prin intermediul elementelor existente în HTML. Daca dorim sa
modificam spaţiul dintre paragrafe va trebui să utilizăm CSS. Până la
apariţia CSS, distanţa dintre două paragrafe putea fi modificată cu ajutorul
elementului <br>. Această metodă dă rezultate bune dar nu permite un
control foarte riguros asupra spaţiului dintre paragrafe.
4. Chiar dacă utilizarea tag-ului de sfârşit (</p>) nu este obligatorie, este
indicat să nu fie omis. Lipsa acestui tag va face ca elementul imediat
următor să nu mai fie poziţionat la un rând distanţă faţă de paragraf.
Aceasta regulă este bine să fie aplicată tuturor etichetelor HTML. În plus,
utilizarea ambelor tag-uri uşurează munca atunci când este nevoie să se
facă modificări în documentul iniţial, pentru că citirea textului sursă se face
mai uşor.
Indentarea unui bloc. Pentru ca un bloc de text să fie indentat (marginea din
stânga a textului să fie deplasată la dreapta la o anumită distanţă faţă de marginea
paginii), acesta trebuie inclus între etichetele <blockquote>...</blockquote>.
Exemplu:
<html>
<head>
<title> Indentarea unui bloc</title>
</head>
<body>
W. Churchill a zis despre un politician al vremii: <blockquote>are toate
calitatile pe care le detest si nici un viciu pe care sa-l
admir.</blockquote> cuvinte care ...
</body>
</html>
Efect:
72
Tutorial HTML
Alt exemplu:
<html>
<head>
<title> Alta indentare blockquote </title>
</head>
<body>
<blockquote> My crown is in my heart, not on my head;<br>
Not decked with diamonds and Indian stones <br>
Nor to be seen: my crown is called content; <br>
A crown it is that seldom kings enjoy.
</blockquote>
<p align=center> William Shakespeare
</body>
</html>
Effect: textul va fi văzut ca o strofă, indentată din ambele părţi (efectul tag-ului
<blockquote>) şi cu împărţirea corectă în versuri (efectul tag-urilor <br>):
Exerciţiu. Încercaţi să modificaţi dimensiunile ferestrelor deschise de

browserul utilizat şi observaţi efectul asupra formatării.
Observaţie. Tag-ul <blockquote> se utilizează, de regulă, pentru a insera un
citat într-un text, în special, când acesta depăşeşte câteva linii.
Preformatarea textului. Ştim despre caracterul "spaţiu" că este luat în
considerare de browser doar dacă este inserat explicit prin . Blocul
73
Tutorial HTML
<pre>...</pre> este indicat pentru a insera rânduri vide (spaţiu între rândurile
succesive). Într-un bloc <pre>...</pre>, semnificaţia marcajelor HTML se păstrează.
<html>
<head>
<title> Bloc preformatat</title>
</head>
<body>
Orar:<pre>
Ora/Ziua Luni Marti Miercuri
8:00 Romana Matematica Sport

9:00 Geografie Istorie Fizica </pre>
</body>
</html>
Efect:
Divizarea blocurilor: <div [align=”left”|”center”|”right”] [nowrap]> text </div>.

Modalitatea cea mai eficientă de delimitare şi de formatare a unui bloc de text este
folosirea delimitatorilor <div>...</div>. Un parametru foarte util pentru stabilirea
caracteristicilor unui bloc <div> (diviziune) este align – aliniere orizontală. Un bloc
<div> admite şi atributul "nowrap" care interzice întreruperea rândurilor de către
browser.
<html>
<head>
<title> Blocul div </title>
</head>
<body>
Aceasta linie este o linie normala. Urmatorul bloc este aliniat la dreapta.
<div align="right">
O singura linie. O singura linie. O singura linie. O singura linie.<br>
74
Tutorial HTML
</div>
<div align="center">
Bloc aliniat pe centru. Bloc aliniat pe centru.<br>
</div>
</body>
</html>
Efect:
Observaţii.
i. Un bloc <div>...</div> poate include alte subblocuri. Atributul align indică
alinierea textului pentru întreaga diviziune. Este, de fapt, singurul motiv
pentru care poate, deocamdată, să apară tag-ul <div>. În lipsa opţiunii
align, nu se produce absolut nimic în prezentarea documentului.
ii. Tag-ul <div> marchează doar locul unde începe o nouă secţiune în
document, ca un simplu comentariu, sau cu posibilitatea de a schimba
alinierea textului.
iii. Următorul exemplu arată că tag-ul <div> nu produce trecerea pe un rând
nou.
<html>
<head>
<title> Efecte cu div </title>
</head>
<body>
Inceputul documentului. <div> Este o noua sectiune.</div> Nu se
modifica nimic.<br>
<div align=right> Se începe alta sectiune. </div> Textul precedent este
aliniat pe dreapta.
</body>
</html>
Efect:
75
Tutorial HTML
Blocuri <xmp>...</xmp>. Într-un fişier HTML, caracterele "<" şi ">" au o

semnificaţie specială pentru browser. Ele încadrează comenzile şi atributele de
afişare a elementelor într-o pagină. Dacă dorim ca un fragment de text să conţină
astfel de caractere, acel fragment trebuie încadrat între perechile de etichete:
<xmp>...</xmp> (80 de caractere pe rând). Aceste marcaje interpretează corect
caracterele "spaţiu", "tag" şi "CR/LF". Textul afişat în pagină este monospaţiat.
Exemplu:
<html>
<head>
<title>Exemplu cu xmp</title>
</head>
<body>
Un fisier html standard arata astfel:
<xmp>
<html>
<head>
<title> </title>
</head>
<body>
O pagina Web ...
</body>
</html>
</xmp>
</body>
</html>
Efect:
76
Tutorial HTML
6.6. Sugestii privind aspectul textului

Aspectul textului într-o pagină Web este esenţial pentru calitatea acesteia. Un
text lizibil, scris cu caractere de dimensiune potrivită, bine organizat şi aşezat în
pagină va face din pagina dumneavoastră un mediu accesibil şi prietenos care îl va
stimula pe vizitatorul acesteia să parcurgă cu plăcere informaţiile oferite.
Iată câteva sfaturi referitoare la aspectul paginilor Web, menite să vă ajute la
crearea unor texte lizibile, cât mai uşor de parcurs de către cititori.
• Nu folosiţi fonturi de dimensiuni prea mici sau fonturi cu serife, cum este
Times New Roman. Deşi este tipul cel mai utilizat pentru publicaţiile
tipărite, textele scrise cu Times New Roman sunt mai greu de citit de pe
monitor. Preferaţi tipurile Arial, Verdana, Helvetica.
• Nu folosiţi numai litere mari (majuscule). Textele scrise cu majuscule sunt
mai greu de citit.
• Nu faceţi exces de caractere aldine (îngroşate, bold). Limitaţi-vă la a
accentua cuvinte sau porţiuni reduse din text. De asemenea, nu folosiţi
caractere cursive (înclinate, sau italice) în exces.
• Nu folosiţi prea multe tipuri de fonturi şi nici tipuri de fonturi rare. Folosirea
unui mare număr de fonturi de dimensiuni şi culori diferite va face ca
paginile să arate încărcate şi să fie greu de citit. Folosirea tipurilor de
fonturi rare aduce după sine riscul ca vizitatorul să nu le aibă instalate pe
computerul propriu, astfel că textul va fi afişat de browser cu fonturile
prestabilite.
• Nu aranjaţi textul în pagină pe două coloane. Aceasta este o practică
obişnuită în ziare şi reviste dar nu este potrivită într-o pagină Web
deoarece forţează vizitatorul ca odată ajuns la baza paginii să o deruleze
din nou pentru a citi ce-a de-a două coloană.
77
Tutorial HTML
• Este bine să folosiţi fiecare etichetă în scopul pentru care a fost ea

definită. Nu folosiţi etichetele de titlu pentru a accentua anumite părţi ale
textului care nu sunt titluri. Nu folosiţi eticheta <address> pentru a insera
alte texte decât adrese sau eticheta <cite> pentru a realiza scrierea cu
caractere italice a textului.
Motoarele de căutare indexează paginile Web şi în funcţie de elementele
(etichetele) care sunt incluse în ele iar folosirea lor neadecvată conduce la o indexare
eronată a paginii dumneavoastră.
Multe motoare de căutare scanează pagina în căutarea titlurilor şi pe baza lor
construiesc o schiţă a paginii.
Dacă veţi folosi etichetele de titlu pentru a accentua anumite părţi ale textului
(operaţie pe care o puteţi realiza în mod corect folosind eticheta <font>) veţi oferi
informaţii eronate motoarelor de căutare. În acest fel, scad şansele ca paginile
dumneavoastră să fie identificate şi citite de cei interesaţi.
Observaţie. Nu uitaţi că paginile vor fi publicate pe Web, unde, pentru a-şi
atinge scopul, adică pentru a fi citite, trebuie mai întâi descoperite de cititori, cel mai
frecvent prin intermediul motoarelor de căutare.
78
Tutorial HTML
7. Legături în documente HTML

7.2. Adrese URL
O adresă URL constă dintr-un şir de caractere care identifică în mod unic o
anumită resursă, oferind informaţii despre numele serverului pe care este stocată
acea resursă precum şi despre localizarea ei.
Există mai multe etichete HTML care folosesc adresa URL drept valoare
pentru anumite atribute: etichetele care introduc legături, imagini sau formulare.
Toate acestea folosesc aceeaşi sintaxă a adresei URL pentru a specifica locaţia unei
anumite resurse, indiferent de tipul acesteia.
Sintaxa generală a unei adrese URL este:
tip- resursă://host.domain[:port]/path.filename
unde:
• tip-resursă reprezintă unul dintre protocoalele de transfer al informaţiilor,
cum ar fi HTTP, FTP, Gopher, Telnet, etc.
• host.domain reprezintă identificatorul serverului pe care este găzduit
fişierul respectiv. Acest identificator poate fi adresa IP a serverului sau
numele său.
• port reprezintă numărul portului de comunicaţie prin intermediul căruia
browserul se conectează la server. Serverele deţin mai multe astfel de
porturi, fiecare servind unui alt tip de comunicaţie: HTTP, FTP, poştă
electronică, etc. Portul prestabilit în cazul transferului prin HTTP are
numărul 80. Numărul portului trebuie precizat numai în cazul când acesta
este diferit de 80.
• path.filename reprezintă localizarea ierarhică a fişierului în sistemul de
directoare de pe server. Aceasta constă într-unul sau mai multe nume
despărţite prin caracterul "/" (slash).
Iată câteva exemple de adrese URL împreună cu explicaţii referitoare la
sintaxa lor:
http://www.autor.com/carti.html Această adresă URL indică documentul
HTML, numit carti.html, care se află în
directorul rădăcină al serverului
www.autor.com
http://www.autor.com/ Această adresă indică prima pagină
79
Tutorial HTML
(home page) a aceluiaşi server.

http://www.autor.com:8080/ Exemplul indică spre prima pagină a
serverului www.autor.com, dar
specificând şi numărul portului care
este diferit de cel prestabilit.
http://www.autor.com/carti.html#webdesign În acest exemplu este indicată calea
spre documentul HTML carti.html aflat
pe acelaşi server, dar specificându-se o
anumită secţiune a acestui document,
secţiune denumită webdesign.
În cazul când fişierul este stocat pe propriul calculator se foloseşte o adresă
URL de forma următoare:
file:// localhost / path.filename
unde:
• localhost reprezintă numele computerului personal pe care este stocat
fişierul (acelaşi pe care rulează browserul). În acest caz, browserul va
accesa fişierul folosind facilităţile obişnuite ale sistemului de operare de pe
computerul propriu.
• path.filename reprezintă localizarea fişierului în structura de directoare
conform regulilor sistemului de operare.
Termenul localhost poate fi omis, deoarece este numele prestabilit al
computerului propriu. În acest caz este necesară prezenţa unui caracter "/"
suplimentar:
file:/// path.filename
De exemplu fişierul culori.html care este salvat în folderul de lucru Work din
My Documents pe computerul personal va avea următoarea adresă URL:
file://localhost/C:\My Documents\Work\culori.html sau
file:///C:\My Documents\Work\culori.html
În practică, atunci când dorim să adresăm un fişier aflat pe computerul propriu
putem omite prima parte a adresei URL obţinând următoarea formă:
C:\My Documents\Work\culori.html
Observaţie. În cazul resurselor stocate pe servere externe, numele
directoarelor care fac parte din calea către resursă sunt despărţite prin caracterul "/"
(slash). La fişierele stocate pe computerul propriu, directoarele şi subdirectoarele
care formează calea către fişier sunt despărţite prin caracterul "\" (backslash). Cele
80
Tutorial HTML
două moduri de scriere sunt specifice celor două sisteme de operare: UNIX,
respectiv DOS-Windows.
Deoarece marea majoritate a serverelor Web folosesc sistemul de operare
UNIX, calea către resursele stocate pe ele se scrie respectând convenţiile acestui
sistem. Mai mult, această convenţie s-a extins şi la adresele URL referite de pe
sisteme Windows. Astfel, un fişier numit foto.jpg aflat pe discul C:, în My Documents,
folderul Imagini are următoarea adresă URL:
C:/My Documents/Imagini/foto.jpg
7.2. Legături (link-uri)

Un link (legătură) este o conexiune de la o resursă Web la alta. Deşi este un
concept simplu, link-ul a fost una din forţele primare care au dus la succesul Web-
ului. Un link are două capete (numite ancore) şi o direcţie (un loc marcat, denumit
ancorare). Link-ul începe de la ancora "sursă" şi arată către ancora "destinaţie", care
poate fi orice resursă Web (de ex. o imagine, un clip video, o bucaţică de sunet, un
program, un document HTML, un element dintr-un document HTML, etc.).
Marcajele pentru ancorare pot fi de două tipuri:
1. legături către alte locaţii: acestea se vor caracteriza prin textul legăturii
(vizibil în documentul afişat pe ecran) şi prin adresa la care se poate
efectua un salt; textul legăturii va apărea pe ecran subliniat, într-o culoare
diferită de cea a textului adiacent; adresa ţintă a legăturii apare (dacă nu
s-a indicat alt text) pe linia de stare a ferestrei browserului atunci când
pointerul mouse-ului este pe textul legăturii;
2. definiri de nume care au doar rolul de a introduce ţinte pentru legături; nu
sunt diferenţiate în documentul afişat pe ecran.
Cele două tipuri de marcaje pot fi prezente simultan deşi legătura la o altă
legătură produce o oarecare întârziere. Marcajul utilizat pentru ambele tipuri de
legături este <a> </a>, a provenind de la anchor. Deşi sintaxa lui poate fi prezentată
unitar, în continuare se discută separat principalele forme ale tag-ului.
7.2.1. Legătura la un URL
<a href="url" [accesskey ="caracter"] [tabindex = nr] [rel="tip-rel"] [rev="tip-rev"]

[title="title-name"] [target="fereastra"|_blank|_parent|_self|_top]> text_legatura </a>
81
Tutorial HTML
unde:
• url este adresa (absolută sau relativă) a documentului către care se poate
efectua saltul; utilizarea unei adrese relative pentru documentele din
acelaşi director sau de pe aceeaşi maşină reduce mult timpul necesar
încărcării şi permite o mai bună întreţinere a paginii;
• caracter atribuie o tastă de acces la un element. Există mai multe tag-uri
care suportă atributul accesskey: <a>, <area>, <button>, <input>,
<label>, <legend> şi <textarea>. O tastă de acces este un singur caracter
din setul de caractere al documentului. Apăsând o tastă de acces
atribuită unui element, se dă focusul acelui element. Acţiunea care are loc
când un element receptionează focusul depinde de element. De exemplu,
când un utilizator activează un link definit de un element <a>, browserul
urmează, în general, linkul. Când un utilizator activează un buton radio,
browserul schimbă valoarea butonului radio. Când utilizatorul activează
un câmp text, se permite introducerea textului, etc.
• nr specifică poziţia elementului curent în ordinea tab pentru documentul
curent. Aceasta valoare trebuie să fie un număr între 0 şi 32767.
Elementele următoare suportă atributul tabindex: <a>, <area>, <button>,
<input>, <object>, <select> şi <textarea>.Ordinea tab defineşte ordinea
în care elementele vor recepţiona focusul când sunt navigate de utilizator
via tastatură. Ordinea tab poate include elemente imbricate în alte
elemente.
• tip-rel precizează tipul de relaţie care leagă documentul, de documentul
referit, unde este ancora; valoarea sa este un şir (între ghilimele);
• tip-rev precizează tipul de relaţie care leagă documentul referit de
documentul prezent (relaţia inversă pentru tip-rel); valoarea sa este un şir
(între ghilimele).
Observaţie. Datorită utilizării sporadice a acestor atribute nu s-a efectuat
o standardizare a valorilor pentru tipurile de relaţii. Informaţia respectivă
este interpretată de browsere după necesităţi.
• title-name determină apariţia unei mici ferestre (tool tip) în pagina Web
când mouse-ul se afla pe o legătură, fereastră în care este afişată
valoarea dată acestui atribut, care are astfel menirea de a furniza
82
Tutorial HTML
informaţii suplimentare despre semnificaţia unei legături; în lipsă se va

considera adresa drept titlu;
• target este utilizat pentru a preciza unde va fi afişat documentul referit
(dacă se va activa legătura, bineînţeles). Valorile posibile sunt:
1. fereastra - indicând exact fereastra de afişare (dacă nu există, este
creată);
2. _blank - o fereastră nouă;
3. _parent - fereastra părinte (cea anterioară);
4. _self - în aceeaşi fereastră ca şi documentul curent (valoare
implicită);
5. _top - în fereastra iniţială.
În mod prestabilit, legăturile deschid pagina pe care o referă în fereastra
curentă. Aceasta înseamnă că dacă veţi face click pe un link, noua
pagină se va încărca în locul paginii deja deschise (în aceeaşi instanţă a
browserului). Pentru a reveni la pagina anterioară trebuie să apăsaţi
butonul Back al browserului.
• text_legatura poate fi orice text (care poate să conţină imagini), formatat
sau nu, dar care nu mai poate conţine alte legături. Acest text este afişat
diferenţiat faţă de textul adiacent lui pentru a se atenţiona că este locul
de unde se poate "naviga" către alte adrese. Folosirea etichetei <a>
imbricată cu etichete de formatare a textului, fonturi, liste sau tabele se
face plasând eticheta <a> în interiorul acestora. În acest sens, standardul
HTML consideră incorectă o construcţie ca aceasta:
<a href="adresa_url"><font face="tip">legatura</font></a>
În locul ei vom folosi construcţia:
<font face="tip"><a href="adresa_url">legatura</a></font>
Observaţie. Nu este permisă imbricarea mai multor etichete <a>.
Pentru proiectarea modului de afişare sunt disponibile trei atribute ale tag-ului
<body>:
1. link="#rrggbb"|"culoare" – legătură nevizitată (default albastru).
2. vlink="#rrggbb"|"culoare" – Viewed LINK=legătură vizitată (default
roşu).
83
Tutorial HTML
3. alink="#rrggbb"|"culoare" – Active LINK=legătură activă (default

portocaliu, nu prea se foloseşte).
Fiecare browser are, totuşi, comportări diferite în interpretarea acestor
atribute.
În cazul când se utilizează o imagine drept text_legatura, chenarul este chenar
al imaginii; dacă text_legatura este doar text, atunci chenarul este doar inferior
(subliniere). Reamintim că atributele se vor scrie în tag-ul de început <body>: <body
link= ...>.
Să urmărim exemplul:
<html>
<head>
<title>Alegerea culorilor pentru legături</title>
</head>
<body text="#006666" bgcolor="#f0f0f0" link="blue" vlink="purple" alink="lime">
Acesta este un exemplu în care se prezintă o legătură către un alt document.<p>
Culoarea legăturii nevizitate este <em>blue</em>,
a legăturii vizitate este <em>purple</em>
iar ultima conexiune activată este <em> lime</em>.<p>
Pentru a întelege exemplul, observati culoarea legăturii din paragraful următor
înainte de a o activa, în timpul activării şi după ce vă veti întoarce din documentul
către care se efectuează saltul.
Pentru a reveni va trebui să urmati indicatiile din documentul care se va activa.<p>
<a href="http://www.google.ro">Conexiunea</a><p>
De remarcat că textul documentului este scris în <em>darkgreen</em> iar hârtia
este o nuantă de alb.</em>
</body>
</html>
Efect:
Exemplul următor ilustrează utilitatea atributului title.

<html>
<head>
<title> Atributul title </title>
84
Tutorial HTML
</head>
<body>
<h1 align="center">Atributul title</h1><hr>
<a href="http://www.google.com" title="Legatura catre
Google.com">Google</a>
</body>
</html>
Efect:
Exemplul următor redă modul în care se deschide o pagină într-o nouă

fereastră:
<html>
<head>
<title>Deschiderea
paginii</title>
</head>
<body>
<h1
align="center">Deschiderea
paginii in alta fereastra</h1>
<hr>
Pagina de mai jos se va
deschide intr-o fereastra noua
<p>
<a href="Atributul title.htm"
target="_blank">Utilitatea
atributului title</a>
</body>
</html>
În foarte multe site-uri aţi observat, probabil, existenţa, în partea de jos a

paginii, a unui bloc de text care conţine legături către paginile care compun site-ul,
legăturile fiind delimitate de mici linii verticale, ca în exemplul de mai jos:
|Link1| |Link2| |Link3|
85
Tutorial HTML
Utilitatea acestei bare este legată de facilitarea navigării în site, mai ales în
cazurile când dimensiunea paginii depăşeşte un ecran. În acest caz, utilizatorul
trebuie să deruleze, la citire, paginile pe verticală, astfel că link-urile de pe bara
superioară de navigare nu mai sunt accesibile.
O astfel de bară secundară de navigare se poate realiza procedând ca în
exemplul următor:
<html>
<head>
<title>Bara de navigare</title>
</head>
<body>
<h1 align="center">Bara de navigare</h1><hr>
<h4 align="center">
<a href="optiune1.html">|optiune1|</a>
<a href=" optiune2.html">| optiune2|</a>
<a href=" optiune3.html">| optiune3|</a>
</h4>
</body>
</html>
O pagină care conţine o astfel de bară de navigare va avea aspectul următor:
Bara verticală inserată între textele care trimit la paginile respective este de
obicei plasată, pe tastatură, pe aceeaşi tastă cu caracterul "\" (backslash). Dacă doriţi
ca bara să facă parte din textul activ, o veţi insera între etichetele <a> şi </a>,
altminteri ea trebuie plasată în afara acestora, astfel:
|<a href="optiune1.html">optiune1</a>|
O pagină Web poate conţine legături nu doar către alte fişiere HTML, dar şi
către fişiere de orice alt tip, aflate pe calculatorul propriu sau oriunde pe Web. Nefiind
vorba despre un fişier HTML, browserul nu va putea să îl proceseze, astfel că va
activa procesul de transfer sau de descărcare (download), urmând ca, după
transferul integral al fişierului, utilizatorul să îl deschidă cu un program adecvat.
86
Tutorial HTML
În exemplul care urmează, atunci când se efectuează click pe legătură se

deschide caseta de dialog File download care permite:
• salvarea fişierului pe disc sau
• deschiderea fişierului în locaţia curentă
<html>
<head>
<title>Legaturi catre fisiere oarecare</title>
</head>
<body>
<h1 align="center">Legaturi catre fisiere oarecare</h1><hr>
<A href="html.zip">
Link catre fisierul download.zip
</a>
</body>
</html>
Figura alăturată redă efectul activării unei legături către un fişier oarecare.
Într-o pagină Web se pot crea legături care permit lansarea în execuţie a
aplicaţiei de expediere a mesajelor electronice a celui care vizitează pagina. Făcând
click pe textul care însoţeşte legătura, programul de poşta electronică al vizitatorului
paginii se va deschide automat, având câmpul adresei destinatarului, "To:" deja
completat cu adresa de mail specificată în pagină. Pentru a realiza acest lucru se
foloseşte comanda mailto: atributul href primind o valoare ca mai jos:
<a href="mailto:adresa_e-mail">
Dacă pagina este vizualizată cu browserul Internet Explorer iar vizitatorul are
instalat un e-mail manager, cum sunt de pildă aplicaţiile Microsoft Outlook sau
Outlook Expres, activarea legăturii va determina deschiderea unuia dintre aceste
programe. În cazul în care managerul de e-mail default este de alt tip decât aplicaţia
Microsoft, (Eudora, de exemplu) aceasta va porni de asemenea automat, cu o nouă
pagină Send şi cu adresa destinatarului pre-completată.
87
Tutorial HTML
Dacă pagina este vizualizată în Netscape, se va deschide programul de poştă

electronică încorporat în browser.
În exemplul următor, în momentul când vizitatorul paginii face click pe textul
"Trimiteţi un mesaj", aplicaţia de poştă electronică este lansată automat, prin
intermediul serviciului mailto:, iar câmpul care trebuie completat cu adresa de mail a
destinatarului mesajului este de asemenea completat automat cu adresa
autor@domeniu.com aşa cum rezultă din figura alăturată.
<html>
<head>
<title>Expediere de mesaje</title>
</head>
<body>
<h1 align="center">Expediere de
mesaje electronice
</h1><hr>
<a
href="mailto:autor@domeniu.com"
title="adresa mea de mail">
Trimiteti un mesaj </a>
</body>
</html>
7.2.2. Legătura la o secţiune
Pentru a putea naviga în cadrul documentului activ este nevoie de două

etape:
1. marcarea locului unde se poate efectua saltul, locaţia denumită (ţintă);
2. marcarea locului de unde se poate efectua saltul (ancorarea).
Ambele etape se efectueaza prin tag-ul <a> şi sunt explicate în continuare.
1. Crearea unei locaţii denumite. Acolo unde este necesar să se efectueze
saltul, similar introducerii unei etichete într-un limbaj de programare, se va marca
locul prin
<a id|name="denumire">[text-denumire]</a>
unde:
• denumire este numele sub care locatţia poate fi referită în legături
hipertext. Nu apare în pagina vizualizată;
• text-denumire este textul care apare în pagina vizualizată, nu este
evidenţiat în niciun mod, constituie, în general, numele secţiunii către
care se poate naviga (poate să lipsească).
88
Tutorial HTML
2. Legătura hipertext la o locaţie denumită din document. Marcarea

ancorării se face uzual printr-un tag <a> de forma:
<a href="#denumire">text_legatură</a>
unde:
1. denumire este numele unei locaţii denumite din acelaşi document.
prezenţa semnului #, plasat înaintea numelui ancorei, este obligatorie.
Acesta indică browserului faptul că este vorba despre o legătură
internă, în cadrul paginii. În cazul în care semnul este omis, browserul
va căuta acest nume în afara paginii, unde, evident, nu îl va găsi.
2. text_legatură este textul care va apărea în document sub aspectul
uzual al unui punct de salt posibil.
Observaţii.
1. Numele fişierelor care reprezintă valori ale atributului href sunt case
sensitive. Acelaşi lucru se întâmplă şi cu textul care desemnează
valorile atributului name şi id. Pentru a evita greşelile, se recomandă să
vă denumiţi toate fişierele sau numele pentru ancore cu litere mici.
2. Atributul id este un atribut universal, adică poate fi ataşat oricărui
element al unei pagini Web. Acest atribut va înlocui complet atributul
name, care poate fi ataşat numai anumitor elemente.
Exemplul următor cuprinde schema unui document care conţine un cuprins şi
două secţiuni. Din cuprins se poate efectua un salt la oricare dintre secţiuni iar din
finalul fiecărei secţiuni se poate reveni la cuprins. Se va urmări modul în care se
marchează locurile de interes.
<html>
<head>
<title> Legătura la o secţiune
</title>
</head>
<body>
<a id="cuprins"><h2>Cuprins</h2></a>
<a href="#sect1">Sectiunea 1</a>
<a href="#sect2">Sectiunea 2</a>
<a id="sect1"><h2>Sectiunea 1
</h2></a>
...
continutul sectiunii 1
...
<small>Revenire la
89
Tutorial HTML
<a href="#cuprins">CUPRINS</a>
</small>
<a nume="sect2"><h2>Sectiunea 2
</h2></a>
...
continutul sectiunii 2
...
<small>Revenire la
<a href="#cuprins">CUPRINS </a>
</small>
</body>
</html>
Pentru a realiza o legătură către o pagină aflată în acelaşi director (folder) se

procedează astfel:
<a href="nume_fisier.html">text legatura</a>
unde:
• href reprezintă atributul care stabileşte calea către ţinta cu care se face
legătura. Dacă fişierul ţintă este în acelaşi director, atributul primeşte ca
valoare chiar numele fişierului.
• text explicativ - reprezintă textul pe care se face click cu mouse-ul pentru a
activa legătura. (De exemplu "Click aici" ). Acest text este afişat diferit faţă
de restul textului - în general, subliniat şi de culoare albastră.
În exemplul care urmează este Salvaţi exemplul anterior cu
realizată o legătură reciprocă între două numele pagina1.htm iar exemplul care
pagini aflate într-un acelaşi folder de lucru. urmează cu numele pagina2.htm.
<html> <html>
<head> <head>
<title>Pagina 1</title> <title>Pagina 2</title>
</head> </head>
<body> <body>
<h1>Pagina 1 </h1><hr> <h1>Pagina 2 </h1><hr>
<a href="pagina2.htm">Link catre <a href="pagina1.htm">Link catre
pagina 2 </a> pagina 1 </a>
</body> </body>
</html> </html>
90
Tutorial HTML
La fel cum aţi procedat şi până acum, deschideţi una dintre cele două pagini
cu browserul şi testaţi funcţionarea legăturii dintre ele.
Ambele documente HTML trebuie salvate în acelaşi folder. Veţi observa că

atunci când vă aflaţi în Pagina 1 şi faceţi click cu mouse-ul pe textul Link catre pagina 2
se va deschide cel de-al doilea document HTML şi invers, legătura dintre cele două
pagini fiind astfel reciprocă.
7.3. Adrese absolute şi adrese relative

Pentru a putea localiza un fişier în structura ierarhică de directoare, în scopul
de a stabili o legătură către el, se poate folosi adresarea absolută sau adresarea
relativă.
Adresa absolută a unui fişier conţine calea (path) precisă şi completă către
fişierul respectiv pornind de la directorul rădăcină, prin care se poate ajunge la fişierul
de care vrem să legăm pagina.
C:/Manual HTML/Exemple/culori.html
Fişierul culori.html se află plasat pe discul C:, în directorul Manual HTML,
subdirectorul Exemple.
Adresarea absolută se realizează precizând adresa absolută. De exemplu, o
legătură către fişierul culori.html se va face în modul următor:
<a href="C:/Manual HTML/Exemple/culori.html">Link</a>
Obsevaţie. Întotdeauna este bine să adaugaţi la sfârşit un „/” când daţi adresa
spre un subfolder. Dacă nu puneţi „/” la sfârşit, atunci browserul va face două cereri:
prima în care va adauga automat „/”, iar a doua când va face cererea cu „/” adăugat.
Exemplu corect: href=”www.piata-cartii.ro/carti-editura/RAO/”
Exemplu incorrect: href=”www.piata-cartii.ro/carti-editura/RAO”
91
Tutorial HTML
Adresa relativă a unui fişier precizează poziţia acestuia în raport cu

documentul HTML din care este apelat.
Adresarea relativă precizează calea către documentul cu care facem
legătura pornind de la documentul în care ne aflăm. Pentru a urca un nivel în
structura de directoare se foloseşte şirul de caractere "../ "
Să presupunem că ne aflăm într-un document HTML numit legaturi.html
plasat în folderul de lucru Manual HTML. În afară de folderul Manual HTML în care
lucrăm, în My Documents se mai află un folder, numit My Pictures, ca în structura
următoare:
C:
C:
My Documents
Manual HTML
e legaturi.html
My Pictures
trandafir.gif
Dorim să realizăm o legătură cu un fişier numit trandafir.gif din folderul My

Pictures. În acest caz, eticheta <a>, plasată în documentul legaturi.html, va avea
următoarea formă:
<a href="../ My Pictures/trandafir.gif">Deschide imaginea</a>
Semnificaţia este următoarea:
Prin folosirea şirului de caractere "../" (punct punct slash) se urcă un nivel în
ierarhia de directoare, în raport cu directorul curent. Prin urmare, întrucât folderul
curent, în care se află pagina de pornire este C:/My Documents/Manual HTML, prin
utilizarea şirului de caractere "../" se ajunge în folderul părinte, care este C:/My
Documents. De aici se continuă calea în folderul My Pictures, după care se specifică
numele fişierului din acest folder cu care vrem să stabilim legătura.
Să presupunem că ne aflăm în documentul legaturi.html poziţionat ca în
schema care urmează.
92
Tutorial HTML
C:
C:
My Documents
Manual HTML
Exemple
Legaturi
e legaturi.html
Dorim să stabilim o legătură cu un fişier numit text.html care se află în

directorul Exemple (directorul părinte al folderului nostru, Legaturi). Atunci referirea
se va face astfel:
<a href="../text.html">Link la text</a>
Am urcat un nivel în ierarhie ajungând în directorul Exemple şi am specificat
numele fişierului cu care dorim să facem legătura.
Dacă fişierul text.html s-ar fi aflat cu două nivele mai sus faţă de folderul în
care lucrăm, adică în folderul Manual HTML, atunci adresarea s-ar fi făcut astfel:
<a href="../../text.html">Link la text</a>
Referinţele relative au câteva avantaje:
• avem mai puţin de tastat în codul sursă: nu mai tastam calea completă
pentru fiecare legătura în parte;
• legăturile vor funcţiona şi în timp ce construim site-ul, într-un director pe
hard-disk;
• dacă vom dori să mutam site-ul pe un alt server, nu trebuie să
modificăm nimic; dacă am avea legături absolute, pentru fiecare ar
trebui să înlocuim http://www. nume_server.com cu http://www.
nume_nou_server.com;
• în cazul unui site de dimensiuni mici, care conţine doar câteva pagini
(fişiere), nu avem nevoie de o organizare mai complicată a site-ului (cu
multe directoare); am putea plasa toate fişierele în acelaşi director (pe
hard-disk sau la adresa www.nume_server.com/nume_director/); o
legatură relativă plasată în orice fişier, care apelează orice alt fişier, ar fi
de forma <a href = "alt_fisier.htm">.
93
Tutorial HTML
7.4. Legătura la o locaţie denumită din alt document

Marcarea ancorării se face tot printr-un tag <a> în care referinţa are un
conţinut mai complex:
<a href="link-url#denumire"> text_legatură </a>
unde:
• link-url este adresa documentului către care se poate efectua saltul
(relativă sau absolută);
• denumire este numele unei locaţii denumite din documentul referit; de
remarcat că este necesar caracterul # în faţa denumirii;
• text_legatură este textul care va apărea în document sub aspectul uzual al
unui punct de salt posibil.
Observaţie. În cazul în care documentul ţintă nu are definite denumiri de
locaţii, crearea acestora va necesita, evident, drepturi de scriere în acel document.
7.5. Comenzi rapide de la tastatură pentru link-uri

În exemplul care urmează atribuim o tastă de acces unui element definit de un
tag-ul <a>. Tastând această tastă de acces, utilizatorul este trimis către alt
document, în acest caz, cuprins.
<a accesskey="C"
rel="contents"
href="http://someplace.com/specification/contents.html">
Cuprins</a>
Invocarea tastei de acces depinde de sistemul de operare. De exemplu, pe
computerele pe care rulează MS Windows, utilizatorul trebuie să apese în general
tasta "Alt" în plus faţă de tasta de acces. Pe sistemele Apple, utilizatorul trebuie să
apese în general tasta "Cmd" în plus faţă de tasta de acces. Interpretarea tastelor de
acces depinde de browser. Link-ul accesat cu cheia de acces se va executa la
acţionarea tastei “Enter”.
Exemplu:
<html>
<head>
<title> Titlu de text </title>
</head>
<body>
Treci în <h1>! </h1>
<p>
94
Tutorial HTML
<a href="http://www.selfhtml/selfhtml.com.fr/" accesskey="t"> Selfhtml </a> [Alt] +

[t]<br>
<a href="http://www.ac-toulouse.fr/philosophie/listesdediscussion.htm"
accesskey="p"> Listă de discuţii în filozofie </a> [Alt] + [p] <br>
<a href="http://www.willy-online.de/" accesskey="w"> Willy online </a> [Alt] + [w]
</p>
</body>
</html>
Cele mai moderne browsere permit, prin tastatură, trecerea de la un link la

altul în ordinea în care sunt definite în fişierul HTML (cu "Enter", link-ul poate fi
executat). Cu toate acestea, aveţi posibilitatea să specificaţi HTML într-o ordine
diferită. Cu atributul tabindex putem să menţionăm fila de căutare. În exemplul care
urmează fila de căutare se va muta de la primul link la al treilea, apoi la cel de-al
doilea, la al patrulea şi, în final, la primul. Puteţi oferi utilizatorului posibilitatea de a
stabili o legătură prin apăsarea unui buton. Link-ul ales, poate fi apoi executat prin
apăsarea "Enter".
Exemplu:
<html>
<head>
<title>Titlu de text </title>
</head>
<body>
<h1> De turism, prin urmare, [Tab] </h1>
<p>
<a href="http://french.imdb.com/" tabindex="4"> Baza de date de filme online 4</a>
<br>
<a href="http://www.chart-lyrics.com/" tabindex="2"> Grafic Versuri 2</a> <br>
<a href="http://www.maville.fr/" tabindex="1"> Oraşul meu 1</a> <br>
<a href="http://www.infonie.fr/" tabindex="3"> Infonie 3</a>
</p>
</body>
</html>
95
Tutorial HTML
7.6. Alte marcaje
7.6.1. Informaţii de cale
Pentru a specifica adresa URL a paginii home pentru documentul curent se

utilizează tag-ul singular <base>:
<base href="url de baza" [target=”nume fereastră”|_blank|_parent|_self|_top]>
unde:
• url de baza este adresa completă a documentului home pentru
documentul curent;
• dacă se utilizeaza target, atunci toate legăturile din pagina curentă vor fi
deschise în fereastra specificată, cu exceptia celor care sunt redirectate
individual prin tag-ul <a>. Atributul target este extensie Netscape şi
Microsoft.
În HTML, linkurile şi referinţele la imaginile externe, appleturile, programele de
procesare a formelor, foi de stil, etc. sunt întotdeauna specificate de o adresă.
Adresele relative sunt rezolvate în concordanţă cu url de baza, care poate proveni
dintr-o varietate de surse. Tag-ul <base> permite autorilor să specifice url de baza al
documentului în mod explicit.
De exemplu, dată fiind urmatoarea declaraţie <base> şi o declaraţie <a>:
<html>
<head>
<title>Produsele noastre</title>
<base href="http://www.aviary.com/products/intro.html">
</head>
<body>
<p>Ati vazut <a href="../cages/birds.gif">custile pentru pasari</a>?
</body>
96
Tutorial HTML
</html>
Adresa relativă "../cages/birds.gif" se va rezolva ca:
http://www.aviary.com/cages/birds.gif
Observaţii.
1. Tag-ul <base> este permis doar în secţiunea <head> a documentului,
înainte de orice element care se referă la o sursă externă. Deşi este un
tag din HTML 2.0, nu este recunoscut de toate browserele.
2. Informaţia de cale specificată de elementul <base> afectează numai
adrese brelative în documentul unde apare elementul.
7.6.2. Relaţii între documente
Pentru a arata o legătură de la documentul curent la altul, în special pentru a

furniza o informaţie internă, se utilizează tag-ul singular <link>:
<link [href="link-url"] [hreflang ="cod-de-limbă"] [charset ="set-de-caractere"]
[lang="cod-limbă"] [media ="descriptor-media"] [rel="tip-rel"] [rev="tip-rev"]
[title="titlu"] [type="nume-tip"]>
unde:
• link-url este adresa (absolută sau relativă) către care există o legatură;
• cod-de-limbă specifică limba de bază a resursei desemnate de href şi
poate fi utilizat numai când href este specificat;
• set-de-caractere specifică codificarea caracter a resursei desemnate de
link. Parametrul "charset" identifică o codificare caracter, care este o
metodă de conversie a unei secvenţe de octeţi într-o secvenţă de
caractere. Această conversie se potriveşte cu schema activităţii pe Web:
serverele trimit documente HTML spre browser ca un şir de octeţi;
browserul le interpretează ca pe o secvenţă de caractere;
97
Tutorial HTML
• cod-limbă specifică limba de bază a valorilor atributelor unui element şi

conţinutului text. Valoarea implicită a acestui atribut este "unknown"
="necunoscută". Codurile primare din două litere sunt rezervate pentru
abrevierile limbilor şi includ fr (franceza), de (germana), it (italiana), nl
(olandeza), el (elena - greaca), es (spaniola), pt (portugeza), ar (araba), ru
(rusa), zh (chineza), ja (japoneza), hi (hindu), ur (urdu), şi sa (sanscrita).
• descriptor-media specifică mediul de destinaţie intenţionat pentru
informaţiile de stil. Poate fi un singur descriptor media sau o listă separată
cu virgule. Valoarea implicită pentru acest atribut este "ecran".
• tip-rel specifică relaţia dintre documentul curent şi documentul ţintă;
• tip-rev specifică relaţia dintre documentul ţintă şi documentul current;
• titlu poate fi folosit pentru a denumi legătura (ca informaţie a documentului
curent);
• nume-tip specifică un nume pentru tipul de legatură (ca informatie internă
a documentului).
Spre deosebire de <a>, tag-ul <link> poate fi utilizat doar în secţiunea <head>
şi pot exista mai multe intrări <link>. Deşi <link> nu are conţinut poate fi utilizat pentru
a furniza informaţii despre autor, adrese email, tipuri de documente referite etc. cu
utilizare posibilă în afaceri. Fiind în secţiunea <head> nu se afişează nimic în pagina
vizualizată, exploatarea informaţiilor ţinând de programul navigator.
Exemplu care urmează ilustrează cum câteva definiţii <link> pot apare în
secţiunea <head> a unui document. Documentul curent este "Capitolul2.html".
Atributul rel specifică relaţia documentului legat cu documentul curent.
<html>
<head>
<title>Capitolul 2</title>
<link rel="Index" href="../index.html">
<link rel="Next" href="Capitolul3.html">
<link rel="Prev" href="Capitolul1.html">
</head>
...restul documentului...
Atributele rel si rev joacă roluri complementare: atributul rel specifică un link
direct şi atributul rev specifică un link invers. De exemplu, fie A şi B două documente.
Document A: <link href="docB" rel="foo">
Are exact acelaşi înţeles ca:
Document B: < link href="docA" rev="foo">
98
Tutorial HTML
Ambele atribute pot fi specificate simultan.

Tag-ul <link>poate fi utilizat pentru a furniza o varietate de informaţii pentru
motoarele de cautare, incluzând:
• linkuri către versiuni alternative ale documentului, scrise în alte limbi;
• linkuri către versiuni alternative ale documentului, destinate pentru
diferite medii, de exemplu o versiune pregatită special pentru tipărire;
• linkuri către pagina de start a unei colecţii de documente.
Exemplele de mai jos ilustrează cum informaţia de limbă, tipurile media şi
tipurile de linkuri pot fi combinate pentru a îmbunătăţi manipularea documentului de
către motoarele de cautare.
În exemplul următor, utilizăm atributul hreflang pentru a spune motoarelor de
căutare unde să găsească versiunile în olandeză, portugheză şi arabă a unui
document. De notat utilizarea atributului charset pentru manualul în arabă şi de
asemenea, utilizarea atributului lang pentru a indica valoarea atributului title, pentru
elementul <link> spunând că manualul francez este în franceză.
<html>
<head>
<title>Manualul in engleza</title>
<link title="Manualul in olandeza"
type="text/html"
rel="alternate"
hreflang="nl"
href="http://someplace.com/manual/dutch.html">
<link title="Manualul in portugheza"
type="text/html"
rel="alternate"
hreflang="pt"
href="http://someplace.com/manual/portuguese.html">
<link title="Manualul in araba"
type="text/html"
rel="alternate"
charset="ISO-8859-6"
hreflang="ar"
href="http://someplace.com/manual/arabic.html">
<link lang="fr" title="La documentation en Français"
type="text/html"
rel="alternate"
hreflang="fr"
href="http://someplace.com/manual/french.html">
</head>
</html>
99
Tutorial HTML
În exemplul următor, spunem motoarelor de căutare unde să găsească

versiunea tiparită a manualului.
<head>
<title>Manual referinta</title>
<link media="print" title="Manualul in postscript"
type="application/postscript"
rel="alternate"
href="http://someplace.com/manual/postscript.ps">
</head>
Iar în exemplul care urmează, spunem motoarelor de căutare unde să
găsească prima pagină a unei colecţii de documente.
<head>
<title>Manual de referinta -- Pagina 5</title>
<link rel="Start" title="Prima pagina a manualului"
type="text/html"
href="http://someplace.com/manual/start.html">
</head>
100
Tutorial HTML
Notă.
Tutorialul va fi completat ulterior cu alte elemente HTML.
Chiar şi în această formă este perfectibil de îmbunătăţiri.
101

HTML

Încărcat de

Informații document

Titlu original

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

1. Introducere în HTML ........................................................................................................................................

Organizaţia utilizatorului (exemplu:beta) reprezintă organizaţia din care

taxă simbolică, Freeware – software distribuit gratuit, de exemplu fonturi

realizează prin intermediul unei reţele de ştiri (network news) care

Pentru furnizarea serviciilor pe Internet se foloseşte modelul client –

Pentru a beneficia de facilităţile oferite de Internet, un utilizator trebuie să

Nume_fişier – numele fişierului destinaţie;

1.2. Terminologie web

3. oferă cel mai eficient mod de explorare a informaţiilor aflate în site.

unui client. Pentru a putea răspunde permanent cererilor web, un calculator

un editor de texte dedicat (Netscape Composer)

2. Crearea site–urilor web

recomandă pentru activităţi cu volum important de informaţii ce trebuie

2.2. Etapele de realizare a unui site

Programe de editare text. Programul de editare text este utilizat

Presence ), şi modele predefinite, proiectate astfel, încât să confere

2.2.2. Promovarea site-ului (Marketing)

În general, companiile care se ocupă cu dezvoltarea site-urilor web, se ocupă

categoriile la care figurează banner-ul propriu, putând astfel analiza care

2.2.3. Gazduirea site-ului.

Pentru găsirea unei gazde (host) a site-ului, trebuie în primul rând să

adresa: http://www.rnc.ro/new/welcome.shtml se găseşte lista domeniilor ocupate în

3. Principiile proiectării unui site web

2. alocarea unor resurse specifice (tehnologie, bani, oameni şi timp) pentru

sau orice alte componente ale unei pagini web

Alegerea unui "web designer" se face în funcţie de:

Criteriile de selecţie pentru alegerea unui nume de domeniu (server-gazdă

reexpedierea poştei electronice – permite retransmiterea tuturor

inserarea unor link-uri de acces la site-ul web al organizaţiei incluse

2. Acţiuni de marketing off-line

desfăşurarea unor campanii de publicitate urmărind promovarea site-

4. Bazele proiectării site-urilor Web

4.1. Standardizarea HTML

6. Charta W3C stipulează necesitatea obţinerii consensului complet, astfel

proiecteze formulare pentru realizarea tranzacţiilor cu servere aflate la

Un fişier HTML trebuie să aibe extensia htm sau html.

5. Fundamentele standardului HTML

utilizatorului şi scripturile pentru documentele dinamice.

5.1. Etichete (tag-uri)

Aşadar, tag-urile sunt:

Nume tag Nume atribut Valoare atribut Semnificaţie

Nume tag Nume atribut Valoare atribut Semnificaţie

Nume tag Nume atribut Valoare atribut Semnificaţie

Nume tag Nume atribut Valoare atribut Semnificaţie

Nume tag Nume atribut Valoare atribut Semnificaţie

Nume tag Nume atribut Valoare atribut Semnificaţie

Nume tag Nume atribut Valoare atribut Semnificaţie

Nume tag Nume atribut Valoare atribut Semnificaţie

Aliniaza celule de date cu

Nume tag Nume atribut Valoare atribut Semnificaţie

5.2. Structura documentelor HTML

6. Elementele <html> şi <head> sunt opţionale, însă orice document HTML

Culoare Nume culoare Cod culoare

Culoare Nume culoare Cod culoare

Culoare Nume culoare Cod culoare

Culoarea fundalului unei pagini se precizează prin intermediul atributului

6.1.1. Alegerea culorilor

Roşu - agresivitate, pasiune, putere, vitalitate

6.2. Caractere speciale HTML

Cod HTML Semnificaţie Cod HTML Semnificaţie

&#259; ă &copy; © (semnul pentru copyright)

Lista completă este redată de tabelul următor:

Cod HTML Semnificaţie Cod HTML Semnificaţie

ă ă © © (semnul pentru copyright)