51218924-html

8/7/2019 51218924-html

http://slidepdf.com/reader/full/51218924-html 1/101

1. Introducere în HTML ........................................................................................................................................ 2 1.1. Inter-reele ş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 seciune..................................................................................................................... 88

7.3. Adrese absolute şi adrese relative.......................................................................................................... 91 7.4. Legătura la o locaie denumită din alt document................................................................................94 7.5. Comenzi rapide de la tastatură pentru link-uri .................................................................................... 94 7.6. Alte marcaje ............................................................................................................................................. 96

7.6.1. Informaii de cale..............................................................................................................................96 7.6.2. Relaii între documente ................................................................................................................... 97

8/7/2019 51218924-html


Tutorial HTML

2

1. Introducere în HTML

1.1. Inter-reele şi Internet

O re ea este un grup de computere capabile să comunice unele cu altele, să partajeze fişiere, date, programe sau operaii. Computerele dintr-o reea sunt

conectate prin componente hardware şi software. Componenta hardware asigură

legătura fizică dintre computere (legături telefonice, fibre optice, routere, plăci de

reea şi chiar calculatoare). Componenta software este reprezentată de programele

care fac posibilă utilizarea componentei hardware pentru comunicaii şi schimbul de

informaii. Reelele 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) – reea extinsă la nivelul unui oraş);

WAN (Wide Area Network) – reea naională.

Multe dintre reelele de calculatoare sunt conectate între ele, formând inter-

re ele (reele de reele de calculatoare). O reea de reele se numeşte internet (“net”

însemnând în limba engleză “reea”). Cea mai mare inter-reea publică (reea de

reele de calculatoare cu acces public) este reeaua Internet . În concluzie, Internet -

ul este o interconectare de LAN-uri, MAN-uri şi WAN-uri prin legături rapide (satelit,

circuite cu comunicaie digitală etc.).Pentru a fi identificate, calculatoarelor conectate la Internet li se atribuie

numere unice numite adrese de Internet . Deoarece utilizatorul reine mai greu un

număr, calculatorului conectat la Internet i se mai atribuie şi un nume cunoscut ca

nume de domeniu . Domeniul poate conine 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ări, 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.

8/7/2019 51218924-html


Tutorial HTML

3

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

face parte grupul de utilizatori sau departamentul.

Tipul organiza iei (exemplu:gamma) se referă la organizaiile 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.

Observaie. Pentru identificare în reeaua 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

organizaiei,organizaia etc.)

Software-ul care permite lucrul în reea respectă un set de reguli fixe (limbaj ),cunoscute sub numele de protocol de re ea . Reeaua poate fi interoperabil ă, adică

diferite tipuri computere, folosind diferite sisteme de operare, pot fi conectate, pot să

comunice unele cu altele, să partajeze informaiile, dacă respectă aceleaşi

protocoale de reea. 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 informaia stocată pe un

calculator prin intermediul reelei internet :

FTP (File Transfer Protocol) este serviciul pentru transferul fişierelor de laun 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ă colecie de informaii publice de pe Internet. Nu estenecesar 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

8/7/2019 51218924-html


Tutorial HTML

4

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

clipart sau jocuri, Upgrades & Patches – noi variante ale unor programe

sau softuri corectate, Documente – articole, documentaii, etc.

Telnet este serviciul pentru accesul de la distană la resursele unuicalculator. Acest proces se numeşte şi conectare la distan ă (remote

login ). Computerul care iniiază 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 computerulgazdă 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 instruciuni 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ă funcia 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 informaii.

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 deinformaii cu care începe mesajul postal, corp (body) – mesajul propriu-

zis, semnatura (signa-ture) – o secvenă standard de informaii 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

8/7/2019 51218924-html


Tutorial HTML

5

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

asigură accesul utilizatorului la o colecie de articole organizate pe

subiecte. Articolele sunt stocate pe servere de ştiri . Serviciul se numeşte

serviciu pentru reele de ştiri sau serviciu pentru grupuri de ştiri. Protocolulde acces la acest serviciu se numeşte NNTP (Network News Transfer

Protocol). Cea mai importantă sursă de ştiri, este reeaua 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 aplicaia Microsoft Outlook Express .

World Wide Web este o metodă (serviciu) de acces la informaia 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 colecie de zeci de milioane de documente cu informaii, 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 spaiul Internet şi

uşurează căutarea, prin stabilirea unor legături între informaii şi nu în

ultimul rând, permite s ă fie create leg ături de la un item de informaie la

altul. Informaia 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 informaie, 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 coduristandard (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 conin texte, imagini, sunete, filme video şi

legături hipertext către alte resurse de pe Internet.

8/7/2019 51218924-html


Tutorial HTML

6

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

server :

Calculatoare client – calculatoarele care au acces la informaie. Ele

solicită un serviciu, adică emit o cerere de serviciu către un server şiaşteaptă răspunsul. Pe aceste calculatoare trebuie instalat un software

care să asigure accesul la un anumit tip de serviciu în reea.

Calculatoare server – calculatoarele pe care se depozitează informaia.

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

Comunicarea prin Internet se realizează întotdeauna între o pereche de

programe. Programele care asigură comunicarea, funcionează pe baza modeluluiclient – server:

Programe client – programe care contactează un serviciu. Persoanele

care doresc să folosească un serviciu al reelei Internet lansează în

execuie un program client. Clientul foloseşte reeaua Internet pentru o

comunicare cu serverul. Pentru unele categorii de servicii, clientul

interacionează cu serverul şi aşteaptă răspunsul. Pentru o altă

categorie de servicii, clientul se angajează într-o interaciune pe timp

îndelungat. Clientul stabileşte comunicarea cu serverul şi apoi afişează coninutul datelor primite, în timp ce transmite către server apăsări de

taste sau acionări cu mouse-ul ale unor obiecte de interfaă.

Programe server – programe care oferă servicii. Calculatoarele care

oferă un serviciu lansează automat în execuie, atunci când este pornit,

una sau mai multe copii ale programului server. Programul server

rămâne în execuie atâta timp cât nu este întreruptă alimentarea cu

energie electrică. Cât timp calculatorul server nu funcionează, 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.

8/7/2019 51218924-html


Tutorial HTML

7

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

conecteze calculatorul său la una dintre subreelele 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 informaii de la altecalculatoare 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 conine o colecie de pagini web se numeşte sit web .

Un URL (Uniform Resource Locator) identifică o resursă de pe Internet, deexemplu 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 punctuaie şi concatenează trei elemente:

1. Identificatorul serviciului (protocolului ) Internet utilizat pentru

accesarea resursei. Există mai multe metode (protocoale) de acces la

informaia stocată pe un calculator conectat la Internet şi respectiv maimuli 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 destinaie;

8/7/2019 51218924-html


Tutorial HTML

8

Nume_fi şier – numele fişierului destinaie;

#nume_ancor ă – numele unei ancore definite în fişierul destinaie

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 destinaie începând cu

care se va afişa pagina în browser . b. ftp://ftp.company.com/freeware/program.exene 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

Observaie. 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). Deexemplu:

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 informaia este stocată în unităi numite

fişiere. Aceste fişiere conin: 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 organizaii care:

1. este în mod uzual prima pagină accesată din site;

2. este o pagină de prezentare a organizaei;

8/7/2019 51218924-html


Tutorial HTML

9

3. oferă cel mai eficient mod de explorare a informaiilor aflate în site.

Hypertext este un text îmbogăit. Folosind această metodă, textele

evideniate dintr-un document reprezintă trimiteri la alte documente care

conin informaii suplimentare. Evidenierea se face folosind numere, stiluridiferite de caractere sau culori diferite. Textul evideniat se numeşte

hiperlegatur ă. Hypertextul este stocat în fişiere având o extensie specială:

htm sau html. Aşadar, un hipertext conine:

1. text obişnuit;

2. etichete pentru formatarea textului şi încapsularea altor tipuri de

informaii (salturi rapide către alte resurse de informaii, sunete,

imagini, filme, etc.).

Hypermedia este o extensie a metodei hipertext, prin care trimiterile se potface şi la alte medii de prezentare a informaiei, cum sunt de exemplu

sunetele şi imaginile. Formatele acceptate sunt fişierele gif şi jpeg .

Folosind această metodă pot fi evideniate ş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 conine hipertext este scris într-un limbaj specificnumit HTML. Deci, HTML este un limbaj care permite inserarea de:

1. Text

2. Sunete, imagini şi filme

3. Indicatori de prezentare a informaiei

4. Legături (link-uri) către alte pagini web aflate oriunde în lume

5. Aplicaii (programe Javascript, Java, VRML etc.).

Site web. O colecie 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 aplicaie care se

execută pe serverul web pentru a prelucra cererile de pagini web

recepionate de acesta de la clieni.

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

8/7/2019 51218924-html


Tutorial HTML

10

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

trebuie să ruleze permanent o aplicaia specială httpd . Cele mai întâlnite

servere web sunt: Apache Server, Microsoft Web Server, Oracle Web

Server.Pachet (packet). Informaia care circulă între calculatoare interconectate

este încapsulată în pachete. Fiecare pachet are un expeditor şi un

destinatar. Aşadar, pachetul este format din informaia propriu-zisă şi

informaiile de control care conin adresa destinatarului şi adresa

expeditorului. Informaia de control este memorată în antetul pachetului.

Comutarea de pachete (packet switching ) este cea mai răspândită

tehnică folosită în transmiterea datelor în reele de arie largă. Ea se

bazează pe separarea calculatoarelor după funcii: calculatoare cu functiide aplicaie şi calculatoare cu funcii de comunicaii.

TCP/IP. Reeaua Internet dispune de mijloace de dirijare a pachetelor astfel

încât acestea să ajungă la destinaie. Un astfel de mijloc de dirijare a

pachetelor este IP . Reeaua Internet dispune de mijloace de corecie a

erorilor de transmitere a pachetelor. Un astfel de mijloc de corecie este

TCP (Transfer Control Protocol, adică Protocolul de Control al Transferului).

ISP. Furnizorii de servicii Internet sunt deseori numii ISP, iniialele

denumirii din limba engleză Internet Service Provider. Un ISP este o firmă sau organizaie 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 f i 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 informaie, apoi primeşte informaia ş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.)

8/7/2019 51218924-html


Tutorial HTML

11

un editor de texte dedicat (Netscape Composer )

2. Salvarea paginii web cu extensia html sau htm într-un site web

3. Rezolvarea referinelor coninute în pagina web (legături, imagini,

sunete, filme, aplicaii Java, etc.).Pagina web astfel creată poate fi vizualizată prin intermediul unui browser.

8/7/2019 51218924-html


Tutorial HTML

12

2. Crearea site–urilor web

2.1. Tipuri de site-uri web

Paginile HTML constituie în anumite condiii, cel mai ieftin mijloc de a publicainformaii în Internet. Home page (pagina iniială) reprezintă un document hipertext

(HTML) care serveşte ca punct de intrare iniial într-un web.

Pagina iniială trebuie să conină informaii cu caracter general şi introductiv

precum şi hyperlegături la resursele corelate. O pagină proiectată corespunzător

conine 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 clienii 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 operaiunilor de actualizare periodică.

Comunicarea cu clienii (utilizatorii) care apelează un astfel de site, se

poate realiza prin inserarea de formulare de e-mail, pe paginile site-ului. În

aceste condiii se poate lua în considerare şi folosirea unui autoreponder

pus la dispoziie 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 mulumindu-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

8/7/2019 51218924-html


Tutorial HTML

13

recomandă pentru activităi cu volum important de informaii 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

clienilor să aleagă şi apoi sa achiziioneze în sigurană produse sau

servicii on line, cu ajutorul cărilor de credit sau a banilor virtuali (electronic

cash). Procesarea cărilor de credit este partea cea mai dificilă în

dezvoltarea unui astfel de site.

2.2. Etapele de realizare a unui site

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

Pentru realizarea site-urilor web, au fost realizate o mulime 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 aplicaiilor 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

8/7/2019 51218924-html


Tutorial HTML

14

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 concepie 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 informaii de la utilizatorii

(vizitatorii) site-ului.

La proiectarea unui site este foarte important alegerea platformei (sistem deoperare) pentru site-ul web. Această decizie este importantă deoarece de ea depinde

fiabilitatea solicitudinii (răspunsului) site-ului la cerinele clienilor, precum şi a

volumului de muncă ce trebuie investit pentru a-l menine în funciune. 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 existena următoarelor instrumente:

Browser de web. Browser-ul web este necesar pentru testarea a

ceea ce se obine, î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ă funcioneze 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.

8/7/2019 51218924-html


Tutorial HTML

15

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 documentaie de

specialitate.

2. Asistat, cu ajutorul unor programe speciale. Proiectantul poate utiliza

pentru realizarea site-ului unul din editoarele WYSIWYG , ce dispune de unansamblu de instrumente de care avem nevoie pentru a construi un site

profesional. La realizarea site-urilor profesionale de tip aplicaii on-line, se

pot utiliza pachete de programe ce asigura o mulime de opiuni ş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 sepoate folosi programul Microsoft Word (Office 97 sau 2000 ) sau

solu ii integrate care conin browser şi editor vizual. Programele din

categoria solu ii integrate pun la dispoziia proiectanilor, wizard-uri

(asisteni) ş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 asisteni pentru

construirea tipurilor obişnuite de site-uri (de exemplu: Corporate

8/7/2019 51218924-html


Tutorial HTML

16

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

site-ului un aspect plăcut şi un coninut consistent. Acest program

asigură proiectantului şi posibilitatea creării unei pagini, care

lucrează cu baza de date Microsoft SQL. Celelalte pachete deprograme, indicate mai sus, în special Macromedia DreamWeaver2 ,

asigură o mulime de facilităi pentru realizarea unei prezene on-line,

mai sofisticate, a site-ului. O mulime de funcii ale acestor programe,

se bazează pe suportul extins pentru Dynamic HTML (DHTML).

Astfel, se poate realiza poziionarea 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 animaiei.Majoritatea acestor programe suportă şi formate obişnuite pentru

animaie (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

întreinerea unui site web; sunt aplicaii productive care se pot folosi

regulat pentru proiectarea, reproiectarea şi întreinerea unui site.

Programe ce asigură facilităi de programare. Aceste pachete de

programe asigură construirea aplicaiilor 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 aplicaii 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.

8/7/2019 51218924-html


Tutorial HTML

17

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ă promoională 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 prezena 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 obinându-

se informaii 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 internaionale 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 eficienei 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 ceoferă 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 conine

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

8/7/2019 51218924-html


Tutorial HTML

18

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 teri furnizori sunt

trăsăturile cele mai valoroase din SmartAge . webSite Garage (www.website.com). Cu sigurană, webSite Garage are

deficienele sale. Nu este aşa de bogat în caracteristici ca LinkExchange

sau SmartAge , lipsindu-i programul de schimb de bannere şi posibilitatea

comerului electronic, dar în compensaie, oferă mai multe servicii utile şi

unice. Pentru începători oferă o unealtă indispensabilă sitului web, numită

Hitometer , necesară analizei traficului. Mai pune la dispoziie 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ă cutaxă, 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ăspundei la două întrebări:1. Cat de complex este site-ul?

2. Care este traficul estimat?

Serviciul de Hosting vă va taxa în funcie de răspunsul la cele două întrebări

de mai sus. Răspunsul la cele două întrebări are ca scop determinarea mărimii

spaiului necesar pe hard disc şi volumul transferului de date. Cea mai des utilizată

soluie este plasarea întregului site pe serverul unui ISP.

Investiia 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 susine 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 Reeaua Naională de calculatoare, gestionarul spaiului web din România. La

8/7/2019 51218924-html


Tutorial HTML

19

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.htmlse poate lista un număr de site-uri care oferă spaiu 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 dispoziia 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 şimai convenabil, ca beneficiarul să cumpere, în baza unui contract, întreg pachetul de

servicii pe care un ISP îl oferă.

8/7/2019 51218924-html


Tutorial HTML

20

3. Principiile proiectării unui site web

Oportunitatea creării unui site web al organizaiei. La prima vedere,

crearea şi dezvoltarea unui site web al organizaiei reprezintă o problemă deja

rezolvată. Într-adevăr, din punct de vedere strict tehnic, crearea acestuia nu mai

constituie un obstacol în faa organizaiilor 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 existena unor nevoi specifice, concrete, legate în cea

mai mare parte de modul în care se desfăşoară comunicaia de marketing aorganizaiei. Este important de reinut în acest context că un site web nu face minuni

peste noapte în domeniul marketingului: în general, acesta nu creează produse, nu

stabileşte preuri, nu expediază produse la beneficiarul acestora, nu dublează

notorietatea organizaiei şi nu îi triplează vânzările.

Site-ul web poate contribui semnificativ la maniera în care organizaia

realizează schimbul de informaii cu mediul său de marketing, preponderent cu

clienii (efectivi şi poteniali) şi cu concurenii săi.

În primul caz este vorba despre furnizarea unui volum de informaii atractive şisuficiente pentru a determina o reacie favorabilă a clienilor: cumpărarea sau

comandarea produselor (serviciilor) promovate sau cel puin solicitarea de informaii

suplimentare despre acestea.

În al doilea caz este vorba despre diferenierea organizaiei în raport cu

competitorii săi, în general şi în special din punct de vedere al comunicaiei de

marketing.

Site-ul web al organizaiei trebuie să fie perceput astfel ca un instrument de

marketing on-line, cu caracter strategic, al acesteia. Acesta nu poate fi creat pentru arăspunde unor necesităi de moment, pentru a limita sau elimina anumite situaii

tactice nefavorabile, sau pentru că, în ultimă instană, este de bon-ton pentru "o firmă

care se respectă". Crearea sa implică, din partea organizaiei, angajamentul clar

pentru:

1. integrarea şi utilizarea acestuia în comunicaia de marketing a organizaiei;

8/7/2019 51218924-html


Tutorial HTML

21

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

actualizarea şi extinderea coninutului său.

Iată câteva întrebări ale căror răspunsuri pot orienta organizaia în încercarea

sa de a crea un site web:Este piaa suficient de largă din punct de vedere al ariei pentru a

presupune acoperirea acesteia şi prin intermediul Internetului?

În ce măsură consumatorul / utilizatorul potenial are acces la Internet şi,

respectiv, îl utilizează pentru a obine informaii sau a cumpăra diferite

produse sau servicii?

Este piaa 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 organizaiei?Î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 organizaia 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 organizaiei prin crearea site-

ului web?

Ce este un site web?

o colecie de pagini web construite în raport cu o anumită structură

predefinită şi având ca obiective principale crearea suportului pentru

realizarea comunicaiei de marketing a organizaiei în spaiul virtual

şi/sau crearea platformei pentru desfăşurarea comerului electronic cu

produsele şi/sau serviciile organizaieisite-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

instruciuni folosite pentru a construi şi reprezenta texte, imagini, link-uri

8/7/2019 51218924-html


Tutorial HTML

22

sau orice alte componente ale unei pagini web

Structura unei pagini web cuprinde elementele care se regăsesc cel mai

frecvent în coninutul unei pagini web. Acestea sunt:

titlul paginii – apare în bara de titlu a programului de navigare peInternet utilizat şi serveşte atât la identificarea paginii şi a coninutului

acesteia cât şi pentru facilitarea căutării acesteia în spaiul virtual;

subtitlurile (titlurile interne) – servesc la structurarea logică a

coninutului paginii în seciuni distincte facilitând parcurgerea

acesteia în raport cu interesul celui care o vizualizează;

coninutul paginii – cuprinde informaiile pe care organizaia

intenionează să le transmită publicului vizat. Pentru prezentarea

acestora pot fi utilizate diferite texte, imagini, elemente grafice,sunete sau alte elemente de coninut, de obicei în combinaie astfel

încât efectul asupra publicului să fie maxim;

lista – reprezintă nu atât un element de coninut cât mai ales un mod

de prezentare (formatare) care poate fi utilizat pentru structurarea şi

prezentarea informaiilor incluse în paginile web. Utilizarea acesteia

conferă mai multă claritate şi concizie în prezentarea şi urmărirea

informaiilor incluse în paginile web;

hyperlink-urile – oferă posibilitatea urmăririi doar a acelor seciunide care este interesat "navigatorul" (în cadrul aceleiaşi pagini), alte

pagini (având un coninut similar sau asociat paginii văzute iniial)

sau chiar alte site-uri având legătură directă cu coninutul

informaiilor prezentate în pagina accesată (vizualizată) iniial;

informaiile 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 dein pagina accesată.Structura unui site web cuprinde:

Pagina de introducere

Paginile de produs (serviciu)

Formularul de comandă

Chestionarul

8/7/2019 51218924-html


Tutorial HTML

23

Pagina de noutăi

Newsletterul

Pagina FAQ

Alegerea unui "web designer" se face în funcie de:

problema-cheie: să fie din interiorul firmei sau din exteriorul

acesteia?

În raport cu ce elemente va fi selectat web designerul organizaiei?

Preuri şi tarife

Reputaia profesională

Recomandările unor clieni ai acestuia

Criteriile de selecie pentru alegerea unui nume de domeniu (server-gazdă pentru site-ul organizaiei) sunt:

stocarea de date – cu cât spaiul oferit de furnizorul de Internet este

mai mare cu atât probabilitatea de selecie a acestuia creşte); nu

este suficientă cunoaşterea volumului spaiului disponibil ci şi "chiria"

plătită pentru acesta (exprimată uzual în dolari/MB); de asemenea,

interesează şi condiiile în care poate fi obinut un spaiu suplimentar

pentru stocarea de fişiere ale organizaiei (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 organizaiei; există limite tehnice sau

contractuale referitoare la aceste aspecte? Cu cât cantitatea de

informaii 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

absena oricăror limitări în transferul acestora

urmărirea traficului – este un element-cheie în evaluarea eficieneiutilizării site-ului web ca instrument de marketing on-line; interesează

existena unor facilităi cum ar fi contorizarea numărului de accesări,

repartiia 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)

8/7/2019 51218924-html


Tutorial HTML

24

reexpedierea poştei electronice – permite retransmiterea tuturor

mesajelor de poştă electronică de către administratorul (deinătorul)

server-ului gazdă către organizaia care a închiriat spaiu pe acesta

într-un cont de poştă electronică specificat de aceastanatura conexiunii la Internet a serverului-gazdă – tipul conexiunii

şi viteza de transfer sunt eseniale pentru "vizibilitatea" site-ului web

al organizaiei în spaiul virtual. Cu cât site-ul este mai accesibil, cu

atât eficiena şi utilitatea sa vor fi mai mari pentru organizaie.

Alegerea serverului-gazdă este rezultatul unei analize comparative a

facilităilor oferite de către diferiii furnizori avui în vedere şi a

facilităilor vizate ce către organizaie.

Promovarea site-ului web. Simpla existenă a unei colecii de pagini webundeva în spaiul 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 organizaiei este necesară îndeplinirea a cel puin două cerine:

site-ul să fie cunoscut de către publicul vizat

site-ul să fie accesat de către publicul interesat

Respectarea acestor cerine presupune desfăşurarea unor aciuni (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 existena site-ului, creareade trafic către site sau ambele concomitent.

Exemple de aciuni de marketing care pot fi avute în vedere pentru

promovarea site-ului web:

1. Aciuni de marketing on-line

campanii de direct e-mail, transmiterea de e-mail-uri către publicul

vizat, potenial interesat în raport cu existena şi coninutul site-ului

web al organizaiei

inserarea unor informaii minimale privind site-ul şi link-ul de acces laacesta 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 organizaii cu ale

căror produse sau servicii există un anumit grad de asociere în

cumpărare, consum sau utilizare

8/7/2019 51218924-html


Tutorial HTML

25

inserarea unor link-uri de acces la site-ul web al organizaiei incluse

în cele mai importante site-uri de resurse existente în spaiul virtual

2. Aciuni de marketing off-line

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

ului web al organizaiei în mediile tradiionale (presă, radio,

televiziune, afişaj)

includerea unor informaii minimale privind existena site-ului web în

mesajele publicitare specifice comunicaiei tradiionale (de exemplu,

menionarea adresei Internet a organizaiei, www.organizaia.ro, într-

un anun publicitar tipărit)

organizarea unor aciuni de relaii publice ocazionate de lansarea şi

dezvoltarea site-ului web al organizaiei (de exemplu, o conferină de

presă desfăşurată cu ocazia lansării site-ului sau publicarea unor

articole referitoare la coninutul site-ului în publicaiile de specialitate

sau în rubricile specializate existente în diferitele publicaii cotidiene

sau periodice)

De foarte multe ori, promovarea site-ului web presupune integrarea

aciunilor 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 organizaiei sau

participarea la un târg specializat pe tehnologia informaiei sau chiar

Internet cu un stand cuprinzând mai multe posturi de lucru de la care

poate fi accesat site-ul web al organizaiei.

8/7/2019 51218924-html


Tutorial HTML

26

4. Bazele proiectării site-urilor WebUnul 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 independena faă de platformă, structurarea

formatării şi legăturile hypertext, fac din el un foarte bun format pentru documentele

Internet şi Web. Primele specificaii de bază ale Web-ului au fost HTML, HTTP şi

URL.

HTML a fost dezvoltat iniial 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ă aplicaie a acestuia. SGML este un standard internaional

(ISO-8879) aprobat în 1986. HTML a fost iniial văzut ca o posibilitate pentru fizicienii

care utilizează computere diferite să schimbe între ei informaie prin mijlocirea

Internetului. Prin urmare, erau necesare câteva condiii eseniale: independen a de

platform ă, posibilit ă i hypertext şi structurarea documentelo r. 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ările

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 evoluie HTML a demarat lent în principal pentru că îi

lipseau posibilităile de a reda publicaii electronice profesionale; limbajul permiteaoarece 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 contribuii 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 (Elveia) s-a

8/7/2019 51218924-html


Tutorial HTML

27

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

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 enunat câteva versiuni

ale specificaiei 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 obine o susinere şi un consens suficient de larg,

directorul W3C decide dacă specificaia este gata să devină propunere

oficială de recomandare (Proposed Recommendation ).

5. Urmează o perioadă de 6 săptămâni în care toi 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, specificaia trebuie abandonata.

8/7/2019 51218924-html


Tutorial HTML

28

6. Charta W3C stipulează necesitatea obinerii consensului complet, astfel

că fiecare vot trebuie să fie un da fără rezerve.

7. Dacă toi paşii anteriori au fost îndeplinii, specificaia trebuie aprobată în

final de Director şi se publică sub forma unui standard (W3C Recommendation ).

Dar de ce a fost preferat HTML pentru publicaii pe Web, când pentru

realizarea publicaiilor 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şurina

î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.0reflectă concepia 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 dorii să fii siguri că toi vizitatorii vor

vedea paginile aşa cum trebuie, folosii tag-urile HTML 2.0 !

Versiunea 3.0. Specificaia HTML 3.0, enunată î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". Specificaia 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ă specificaia 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 largutilizat şi au fost deja publicate specificaiile HTML 4.01. Limbajul HTML dă

proiectanilor de pagini web posibilitatea să:

publice documente cu headere, texte, tabele, liste, fotografii, etc...

regăsească on-line informaii prin intermediul hyperlink-urilor accesate

printr-un simplu click de mouse

8/7/2019 51218924-html


Tutorial HTML

29

proiecteze formulare pentru realizarea tranzaciilor cu servere aflate la

distană, pentru căutări de informaie sau pentru activităi specifice

comerului

includă foi de calcul tabelar, clipuri video, sunete şi alte aplicaii direct îndocumente.

Elementul esenial 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, proiectanii pot obine mult mai uşor independena 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ânddocumentului î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 coninutului 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). Experiena 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 întreinere ulterioară şi modificări mult mai uşoare.

Pentru realizarea unui document HTML se pot utiliza editoare clasice saueditoare 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 conin: titlu, texte, tabele, liste,

imagini etc.;

regăsirea on-line a informaiei prin legături hypertext;proiectarea formularelor pentru a se realiza tranzacii prin servicii de la

distană, pentru căutarea de informaie, rezervări, cereri de bunuri;

includerea de clipuri video, clipuri sonore şi alte aplicaii în document.

8/7/2019 51218924-html


Tutorial HTML

30

4.2. Rezumat

Prin Web se acceptă să se îneleagă:

Denumirea prescurtată pentru World Wide Web.

O reea de calulatoare mondială.

WWW funcionează astfel:

Informaia 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 comunicaie 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 funcionează astfel:

Browserul face o cerere (request ) către server.

O cerere standard către un server conine o adresă.

Exemplu: http://www.blablabla.

Toate paginile web conin 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.

Instruciunile 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 specificaiile 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 conine tag-uri.

8/7/2019 51218924-html


Tutorial HTML

31

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

8/7/2019 51218924-html


Tutorial HTML

32

5. Fundamentele standardului HTMLEditarea 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.

Coninutul unui document se caracterizează prin:

natura informa iei : texte, grafică, tabele, ecuaii;

structura : - numele : titluri capitole, paragrafe, legende;

- concep ia obiectelor imbricate ;

prezentare : operaia de formatare;

versiunea HTML

Specificaia limbajului conine următoarele informaii:

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

(aplicaii);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 informaiei

8/7/2019 51218924-html


Tutorial HTML

33

utilizatorului şi scripturile pentru documentele dinamice.

5.1. Etichete (tag-uri)

Instruciunile folosite într-o pagin

ăHTML se numesc tag-uri

şi acestea indic

ă

browser-ului (Netscape, Internet Explorer , etc) modul de prezentare a informaiei

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

aplicaie SGML este, în general, caracterizată prin:Declara ia SGML - prin care se specifică caracterele şi

delimitatorii ce pot apare în aplicaie.

DTD (Document Type Definition – Definire a tipului de document) -

defineşte sintaxa de construire a marcajelor. DTD poate include

definiii suplimentare, cum ar fi referine la entit ă ile caracter .

O specifica ie ce descrie semantica asociat ă marcajelor . Această

specificaie impune anumite restricii de sintaxă care nu pot fi definite

prin DTD.Instan ele document ce con in date şi marcatori. Fiecare instană

conine 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, conine trei pări:

tag de început;

coninutul;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ă opionalitate.

8/7/2019 51218924-html


Tutorial HTML

34

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 coninut între tag-ul de început şi cel final. O particularitate a

tag-urilor container este că, în cazul unora dintre ele, prezena tag-

ului de închidere (</Nume_tag>) este opională.

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 desubtitluri, 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. Sintaxatag-ului de început este:

<Nume_tag atrib1="valoare1" atrib2="valoare2" … atribi="valoarei"> Observaie. 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 Semnificaie Un comentariu<! doctype> Tipul documentului<a> Ancoră

href • URL• #nume

Adresa către care vrem să fie legătura: referină hypertext sau referină

8/7/2019 51218924-html


Tutorial HTML

35

Nume tag Nume atribut Valoare atribut Semnificaiecătre o ancoră internă.

Name • nume Definiia unei ancoreinterne

target• _blank• _self• _parent• _top

Fereastra în care se vaface afişarea

<abbr> O abreviere<acronym> Un acronim<address> Un element adresă <applet> Un applet (o aplicaie)

<area> O zonă în interiorul uneiimagini hartă

<b> Text bold

<base> Un URL de bază pentrutoate legăturile dintr-opagină

<basefont> Un font de bază

size • numărSpecifică dimensiuneaimplicită a fontului dinpagina

<bdo> Direcia textului afişat<big> Text mărit<blockquote> O cotaie<body> Cuprinsul documentului

background • adresa imaginii Imaginea de fondbgcolor • cod culoare

• nume culoare Culoarea fondului

leftmargin• procent dinlăimea paginii

• număr de pixeli

Distana dintre margineadin stânga a ferestreibrowserului şi margineadin stânga a paginii

topmargin• procent dinînălimea paginii


Distana dintre margineade sus a ferestreibrowserului şi marginea desus a paginii

text• cod culoare• nume culoare Culoarea textului

alink • cod culoare• nume culoare

Culoarea legăturilor active(atunci când mouse-ul seaflă deasupra lor)

link • cod culoare• nume culoare

Culoarea legăturilornevizitate (nu s-a efectuatnici un click pe ele)

8/7/2019 51218924-html


Tutorial HTML

36

Nume tag Nume atribut Valoare atribut Semnificaie

vlink • cod culoare• nume culoare

Culoarea legăturilorvizitate (s-a efectuat celpuin 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

<col> Atribute pentru capete detabel

<colgroup> Grupuri de coloane dintabel

<dd> O definiie descriere<del> Text şters<dir> O listă de directoare

<div> O seciune într-undocument

<dfn> O definiie termen<dl> O listă <dt> O definiie termen<em> Text subliniat<fieldset> Un câmp de text<font> Fontul textului

color • cod culoare• nume culoare Culoarea fontului

face • nume font Tipul fontului

size • un număr de la 1la 7 Mărimea fontului

<form> Formular interactiv

action • URLAdresa scriptului careprelucrează datele dincadrul formularului

method • GET• POST

Metoda de prelucrare adatelor formularului

<frame> Cadru (fereastră)frameborder • 1 sau 0 Cadrul are sau nu are

chenar

marginheight • număr de pixeli Spaiu deasupra şi sub uncadru

marginwidth • număr de pixeli Spaiu la stânga şi ladreapta unui cadru

src • URL Sursa cadrului

8/7/2019 51218924-html


Tutorial HTML

37


name • nume

Numele cadrului (utilizatîmpreună cu target =numeca parte componentă amarcajului de tip ancoră <a>)

scrolling• on• off• auto

Defineşte opiunea bareide derulare: activă,inactivă, automată

<frameset> Mulime de ferestre

cols• procent dinlăimea paginii


Numărul şi mărimearelativă a coloanelor

rows• procent dinînălimea paginii


Numărul şi mărimearelativă a rândurilor

border • 1 sau 0

Specifică starea "on"(activă) sau "off" (inactivă)pentru chenarul cadruluiframeset (1 sau 0)

frameborder • număr Specifică mărimeachenarului

framespacing • număr Mărimea spaiului dintredouă cadre adiacente

h1, h2, ... , h6 Titluri în cadruldocumentului

align

• left

• center• right• justify

Alinierea titlului

<head> Antetul documentului<hr> Linie orizontală

align• left• center• right

Alinierea orizontală a liniei

color • cod culoare• nume culoare

Culoarea liniei numaipentru Internet Explorer

size • număr de pixeli Înălimea liniei

width• procent dinlăimea paginii

• număr de pixeliLăimea liniei

noshadeDezactivează afişareaumbrei pentru riglaorizontală

<html> Document HTML<i> Text italic

8/7/2019 51218924-html


8/7/2019 51218924-html


Tutorial HTML

39


type

• text• password• checkbox• radio• submit• reset• file• hidden• image• button

Tip input

value • date de tipcaracter

Valoare input. Coninutulprestabilit al câmpului detext

<ins> Un text inserat

<isindex> Defineşte o singură linie

de intrare<kbd> Text tastatură

<label> O etichetă pentru o formă de control

<legend> Un nume într-un câmpfieldset

align

• top• bottom• left• right

Specifică alinierealegendei (explicaiei)afişate

tabindex • numărSpecifică ordineaelementelor atunci cândutilizatorul apasă tasta Tab

acceskey • caracter

Specifică tasta careasigură comanda rapidă de la tastatura asociată unui anumit element

disabled Elementul este inactiv, dareste afişat pe ecran

readonly Elementul este afişat peecran 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> Metainformaii

content • text Descrie valoareaatributului nameAutor• author

• description Descrierename• keywords Cuvinte cheie

8/7/2019 51218924-html


Tutorial HTML

40

Nume tag Nume atribut Valoare atribut Semnificaie<noframes> O seciune noframe<noscript> O seciune noscript<object> Un obiect incorporat

<ol> Lista ordonată start • număr Cu ce valoare începe

numerotarea

type • A, a, I, i, 1 Tipul numerotării: A, a, I, i,1 (implicit)

<optgroup> O opiune de grup

<option> O opiune într-o listă verticală

<p> Paragraf

align

• left• center• right• justify

Alinierea paragrafului

<param> Un parametru pentru unobiect

<pre> Text preformatat

<q> O perioadă scurtă decotare

<s> Text tăiat<samp> Mostră de cod

<script> Include un script de regulă Javascript, în pagina Web

language • limbaj Limbajul utilizat

event • evenimentEveniment caredeclanşează execuia unorscripturi specifice

for • numeobiectNumele obiectului dinpagină asupra căruiaacionează scriptul

<select> Listă de selecii

multiple Permite selecia maimultor elemente

name • date de tipcaracter Numele listei de selecii

size • număr Numărul de elemente alelistei<small> Text mic

<span> O seciune într-undocument

<strike> Text tăiat<strong> Text evideniat<style> O definire de stil

8/7/2019 51218924-html


Tutorial HTML

41


type • valoare Tipul modelului de stiluri.De regulă "text/css"

<sub> Text indice inferior(subscript)

<sup> Text exponent(superscript)

<table> Tabel• left• centeralign• right

Alinierea tabelului

background • URL Imaginea de fond pentrutabel

• cod culoarebgcolor• nume culoare

Culoarea fondului pentrutabel

• procentborder • număr de pixeli Chenarul tabelului

bordercolor • cod culoare• nume culoare Culoarea chenarului

cellpadding • număr de pixeliSpaiu între coninutulcelulelor tabelului şimarginile lor

cellspacing • număr de pixeli Spaiu între celuleletabelului

cols • număr Numărul de coloane aleunui tabel

hspace • număr de pixeli

Spaiu pe orizontală în

jurul tabelului

vspace • număr de pixeliSpaiu pe verticală în jurultabelului

width • procent• număr de pixeli Lăimea tabelului

bordercolorlight • culoareCea mai deschisă culoaredin cele două culorispecificate

bordercolordark • culoareCea mai închisă culoaredin cele două culorispecificate

width • număr Laimea impusă tabeluluiframe • valoare Ajustarea fină a tabelului

rules • valoare Ajustarea fină a riglelortabelului

<tbody> Corpul unui tabel<td> Celula de tabel

align• left• center

Alinierea coninutuluicelulei pe orizontală

8/7/2019 51218924-html


Tutorial HTML

42

Nume tag Nume atribut Valoare atribut Semnificaie• right

• baseline

Aliniaza celule de date cu

linia de bază a textuluiadiacent

• caracter

Aliniaza o coloană faă deun anumit carcater(caracterul prestabilit este".")

• justifyAliniază atât marginea dinstânga cât şi marginea dindreapta a unui text

background • URLImaginea de fond pentrucelulă

bgcolor• cod culoare• nume culoare

Culoarea fondului pentrucelulă

colspan • număr Numărul de coloane pecare se întinde celula

height • număr de pixeli Înălimea celulei

rowspan • număr Numărul de linii pe care seîntinde celula

valign• top• middle• bottom

Alinierea coninutuluicelulei pe verticală

width • număr de pixeli Lăimea celulei

nowrapNu permite despărireatextului pe linii în cadrulunei celule

<textarea> Câmp de editare multiliniecols • număr Numărul de coloane

name • date de tipcaracter

Numele câmpului deeditare multilinie

rows • număr Numărul de rânduri

<tfoot> Zona de sfârşit a unuitabel

<th> Un antet de tabel<thead> Un antet de tabel<title> Titlu document<tr> Rând de tabel

align• left• center• right

Alinierea coninutuluicelulelor pe orizontală

bgcolor • cod culoare• nume culoare

Culoarea fondului pentrutot rândul

8/7/2019 51218924-html


Tutorial HTML

43


valign• top• middle• bottom

Alinierea coninutuluicelulelor pe verticală

<tt> Text tipărit<u> Text subliniat<ul> Listă neordonată

type• circle• disc• square

Forma marcajului

<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 informaiilor din paginile web se pot utiliza

frame-uri (marcajul <frame>), prin care la un moment dat se afişează mai multe

ferestre coninând fiecare câte o pagină. Introducerea şi gestiunea frame-urilor se

realizează foarte convenabil folosind editoarele HTML.

Coninutul oricărui fişier HTML trebuie inclus între tag-urile <html> şi </html>:

<html>...aici se completează informaia 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 coninutul.

Structura unui document HTML poate fi reprezentată, schematic, astfel:

Început documentÎnceput antet

Început titluSfârşit titluSfârşit antetÎnceput corp de document

Corp de document

Sfârşit corp de documentSfârşit document

<html><head>

<title></title></head><body>

.

.

.<body>

</html>

Început documentÎnceput antet

Început titluSfârşit titluSfârşit antetÎnceput corp de document

Corp de document

Sfârşit corp de documentSfârşit document

<html><head>

<title></title></head><body>

.

.

.<body>

</html>

8/7/2019 51218924-html


Tutorial HTML

44

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>

Observaii.

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ăsai un spaiu după „<” pentru că browserul nu mai recunoaşte

instruciunea!

3. Primul tag din document este <html>. Acesta are rolul de a anuna

browserul că urmează un document HTML. La sfârşitul documentului

avem </html>, acesta atenionâ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 informaia din antet care nu

se afişează în fereastra browserului. În antetul documentului se

inserează:

Anumite secvene 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ăduii-vă să

găsii un titlu care să descrie cât mai corect şi complet coninutul

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

8/7/2019 51218924-html


Tutorial HTML

45

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

trebuie să includă un element <title> în seciunea 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 consecvena î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 coninut:

"...aici se completeazacontinutul paginii...".

10. Pentru a vedea codul

unei pagini web scrise cu HTML alege din meniul View al browserului

opiunea 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 uii încearcă să te

obişnuieşti să scrii după fiecare tag şi tag-ul de încheiere (la tag-urile

pereche), scriind apoi coninutul între ele.12. O altă soluie 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 utilizarealiterelor 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ă

introducei comentarii în text pentru a face această structură cât mai explicită.

8/7/2019 51218924-html


Tutorial HTML

46

Comentariile nu sunt vizibile pentru browser, ele servesc creatorului paginii pentru a

da un grad crescut de lizibilitate documentului HTML.

Comentariile constă în scurte informaii, explicaii la elementele de cod

utilizate, etc., fiind deosebit de utile ulterior, mai ales în situaia în care se impunedepanarea 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 - ->

8/7/2019 51218924-html


8/7/2019 51218924-html


Tutorial HTML

48

Culoare Nume culoare Cod culoareDarkBlue #00008BDarkCyan #008B8BDarkGoldenRod #B8860B

DarkGray #A9A9A9DarkGreen #006400DarkKhaki #BDB76BDarkMagenta #8B008BDarkOliveGreen #556B2FDarkorange #FF8C00DarkOrchid #9932CCDarkRed #8B0000DarkSalmon #E9967ADarkSeaGreen #8FBC8FDarkSlateBlue #483D8B

DarkSlateGray #2F4F4FDarkTurquoise #00CED1DarkViolet #9400D3DeepPink #FF1493DeepSkyBlue #00BFFFDimGray #696969DodgerBlue #1E90FFFeldspar #D19275FireBrick #B22222FloralWhite #FFFAF0ForestGreen #228B22

Fuchsia #FF00FFGainsboro #DCDCDCGhostWhite #F8F8FFGold #FFD700GoldenRod #DAA520Gray #808080Green #008000GreenYellow #ADFF2FHoneyDew #F0FFF0HotPink #FF69B4IndianRed #CD5C5CIndigo #4B0082Ivory #FFFFF0Khaki #F0E68CLavender #E6E6FALavenderBlush #FFF0F5LawnGreen #7CFC00LemonChiffon #FFFACDLightBlue #ADD8E6

8/7/2019 51218924-html


Tutorial HTML

49

Culoare Nume culoare Cod culoareLightCoral #F08080LightCyan #E0FFFFLightGoldenRodYellow #FAFAD2

LightGrey #D3D3D3LightGreen #90EE90LightPink #FFB6C1LightSalmon #FFA07ALightSeaGreen #20B2AALightSkyBlue #87CEFALightSlateBlue #8470FFLightSlateGray #778899LightSteelBlue #B0C4DELightYellow #FFFFE0Lime #00FF00

LimeGreen #32CD32Linen #FAF0E6Magenta #FF00FFMaroon #800000MediumAquaMarine #66CDAAMediumBlue #0000CDMediumOrchid #BA55D3MediumPurple #9370D8MediumSeaGreen #3CB371MediumSlateBlue #7B68EEMediumSpringGreen #00FA9A

MediumTurquoise #48D1CCMediumVioletRed #C71585MidnightBlue #191970MintCream #F5FFFAMistyRose #FFE4E1Moccasin #FFE4B5NavajoWhite #FFDEADNavy #000080OldLace #FDF5E6Olive #808000OliveDrab #6B8E23Orange #FFA500OrangeRed #FF4500Orchid #DA70D6PaleGoldenRod #EEE8AAPaleGreen #98FB98PaleTurquoise #AFEEEEPaleVioletRed #D87093PapayaWhip #FFEFD5

8/7/2019 51218924-html


8/7/2019 51218924-html


Tutorial HTML

51

<html> <head>

<title>Atribute multiple </title> </head>

<body bgcolor=yellow text=blue >

Fond de culoare galbena si text deculoare 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 coninutul uşor

de citit. Aceasta înseamnă...ai ghicit! Litere negre pe fond alb.

Deşi în vestimentaie combinaia 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ă

combinaie 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 funcie de

preferinele personale, de tolerana 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 combinaia poate genera efecte interesante.

În alegerea culorilor pentru un site este bine să inei seama de câteva

elemente de psihologia culorilor, pentru a sublinia astfel mesajul pe care vrei să îl

transmitei. Iată câteva dintre sentimentele pe care le sugerează culorile:

8/7/2019 51218924-html


Tutorial HTML

52

Roşu - agresivitate, pasiune, putere, vitalitate

Roz - feminitate, inocenă, moliciune

Portocaliu - amuzament, veselie, căldură, exuberană

Galben - sentimente pozitive şi cordialitateVerde - linişte, sănătate, prospeime

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, distincie, hotărâre

Alegerea culorilor pentru site trebuie să fie în concordană cu tema site-ului şisă sublinieze mesajul său. Astfel, dacă dorii să construii un site destinat copiilor vei

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, alegei pentru legături, legăturile

vizitate şi legătura activă culori care să vină în contrast cu culoarea sau imaginea defundal a paginii. Rămânei 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 construcie SGML care face trimitere la un caracter al setului de caractere utilizatîn document. Referinele la caracter vor fi scrise sub forma &nume_entitate;.

Observaie. Caracterele speciale sunt “case sensitive ”.

Mai jos este redat codul caracterelor româneşti şi unele din cele mai folositecaractere speciale:

Cod HTML Semnificaie Cod HTML Semnificaie

8/7/2019 51218924-html


Tutorial HTML

53

ă ă © © (semnul pentru copyright) Ă Ă ® ® (marcă înregistrată) î î ™ ™ (TradeMark) Î Î £ £ş ş ¥ ¥Ş Ş € € ţ “ “Ţ ” ”â â — —Â Â < < Non Breaking SPace > >& & (semnul ampersand) § §

ß ß

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

Cod HTML Semnificaie Cod HTML Semnificaie" " " Τ Τ Τ & & & Υ Υ Υ < < < Φ Φ Φ

> > > Χ Χ Χ Ψ Ψ Ψ ¡ ¡ ¡ Ω Ω ¢ ¢ ¢ α α α £ £ £ β β β ¤ ¤ ¤ γ γ γ

¥ ¥ ¥ δ δ δ ¦ ¦ ¦ ε ε ε § § § ζ ζ ζ ¨ ¨ ¨ η η η © © © θ θ θ ª ª ª ι ι ι « « « κ κ κ ¬ ¬ ¬ λ λ λ &miu; μ µ ® ® ® &niu; ν ν ¯ ¯ ¯ ξ ξ ξ

° ° ° ο ο ο ± ± ± π π π ² ² ² ρ ρ ρ ³ ³ ³ &sigmaf; ς ς ´ ´ ´ σ σ σ µ µ µ τ τ τ ¶ ¶ ¶ υ υ υ · · · φ φ φ

8/7/2019 51218924-html


Tutorial HTML

54

Cod HTML Semnificaie Cod HTML Semnificaie¸ ¸ ¸ χ χ χ ¹ ¹ ¹ ψ ψ ψ º º º ω ω ω

» » » &thetasym; ϑ ¼ ¼ ¼ &upsih; ϒ ½ ½ ½ ϖ ϖ ¾ ¾ ¾ &ensp; ¿ ¿ ¿ &emsp; À À À Á Á Á &zwnj; ‌Â Â Â &zwj; ‍Ã Ã Ă &lrm; ‎Ä Ä Ä &rlm; ‏Å Å Å – – –

Æ Æ Æ — — —Ç Ç Ç ‘ ‘ ‘È È È ’ ’ ’É É É &sbquo; ‚ ‚Ê Ê Ê “ “ “Ë Ë Ë ” ” ”Ì Ì Ì &bdquo; „ „Í Í Í &dagger; † †Î Î Î &Dagger; ‡ ‡Ï Ï Ï • • •Ð Ð Ð … … …

Ñ Ñ Ñ &permil; ‰ ‰Ò Ò Ò ′ ′ ′ Ó Ó Ó ″ ″ ″ Ô Ô Ô &lsaquo; ‹ ‹Õ Õ Õ &rsaquo; › ›Ö Ö Ö &oline; ‾ × × × &frasl; ⁄ ⁄ Ø Ø Ø € € € Ù Ù Ù &image; ℑ Ú Ú Ú &weierp; ℘ Û Û Û &real; ℜ Ü Ü Ü ™ ™ ™Ý Ý Ý &alefsym; ℵ Þ Þ Þ ← ← ← ß ß ß ↑ ↑ ↑ à à à → → → á á á ↓ ↓ ↓ â â â ↔ ↔ ↔ ã ã ă &crarr; ↵

8/7/2019 51218924-html


Tutorial HTML

55

Cod HTML Semnificaie Cod HTML Semnificaieä ä ä &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; ⌈

8/7/2019 51218924-html


Tutorial HTML

56

Cod HTML Semnificaie Cod HTML SemnificaieΙ Ι Ι &rceil; ⌉ Κ Κ Κ &lfloor; ⌊ Λ Λ Λ &rfloor; ⌋

&Miu; Μ Μ &lang; 〈 &Niu; Ν Ν &rang; 〉 Ξ Ξ Ξ &loz; ◊ ◊ Ο Ο Ο &spades; ♠ ♠ Π Π Π &clubs; ♣ ♣ Ρ Ρ Ρ &hearts; ♥ ♥ Σ Σ Σ &diams; ♦ ♦

Observaii.

1. Într-un fişier HTML afişarea mai multor spaii consecutive nu este posibilă

prin scrierea directă în fişier, ci folosind de mai multe ori sintagma

„ ”. Astfel, pentru a pune trei spaii între cuvinte va trebui să se scrie

în fişierul HTML astfel:

2. Deşi este utilizată pentru inserarea de spaii, sintagma are o alta

semnificaie: nbsp înseamnă caracterul special Non Breaking SPace.

Prezena 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ă orupere de rând, fără a se trece la un nou paragraf (deci fără a se lăsa spaiu

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

8/7/2019 51218924-html


Tutorial HTML

57

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 poriuni de

text.

<font [size=[+|-]1|2|3|4|5|6|7] [color="#rrggbb "|"color "] [face="font "]> text </font>

Aceşti parametri pot fi utilizai 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>

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

8/7/2019 51218924-html


Tutorial HTML

58

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

8/7/2019 51218924-html


Tutorial HTML

59

Î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 evidenierea anumitor

cuvinte, propoziii 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 evidenierea anumitor

cuvinte, propoziii etc.

Sublinierea textului. Blocul <u>text </u> subliniază textul coninut. 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 evidenierea textului prin alte mijloace.

Tăierea textului. Blocul strike>text </strike> produce "tăierea" cu o linie a

textului coninut. Nu are loc rupere de rând. Este utilizat, de obicei, pentru

producerea unor exemple negative: aşa nu se face).

Text monospaiat. Blocul <tt>text </tt> se foloseşte pentru a afişa textul inclus

în container cu fonturi monospa iate . Tipul de font monospaiat (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 spaiu pe ecran ca şi caracterul

"W": "Courier" este un font monospaiat. 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>

8/7/2019 51218924-html


Tutorial HTML

60

<strike>Acest text este Strike</strike><br> Urmeaza un text cu caractere monospatiate: <tt>Caracteremonospatiate</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ă poriune de text trebuie evideniată faă de textul din jur şi se lasă la

latitudinea browserului să efectueze această evideniere. Multe dintre tag-urile care

realizează acest lucru produc acelaşi efect vizibil, diferenierea lor fiind lăsată

browserelor de generaii viitoare.

Crearea indexului unui document. Blocul <dfn>text </dfn> este folosit pentrua insera în text definiia (definition ) unor termeni. Este util la crearea indexului sau

glosarului unui document. Textul de definiie 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 evidenia

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>. Textuluimenionat i se aplică un font similar intrării de la tastatură, deci un font

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

8/7/2019 51218924-html


Tutorial HTML

61

asemănător ieşirii de calculator (neproporional). 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 ruperede 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

evideniere pronunată 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 neproporional 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 formatsubscript.</body>

8/7/2019 51218924-html


Tutorial HTML

62

</html> Efect:

Blocuri de titlu. Într-un text titlurile (headers) de capitole pot fi introduse cuajutorul 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

însoite 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:

8/7/2019 51218924-html


Tutorial HTML

63

Observaii.

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ă seciune se prezintă tag-uri dedicate formatărilor specifice pentru

anumite tipuri de informaii. 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>. Referina este difereniată faă de textul curent. Formatarea este

logică, deci diferenierea 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 secvene de cod (code ). Pentru inserarea în text a unor

secvene de cod scrise într-un limbaj de programare aceste se vor include între tag-

urile <code>…</code>. În general secvenele de cod sunt afişate cu fonturi Courier.

Textului din container i se aplică un font neproporional precum cel de calculator

8/7/2019 51218924-html


8/7/2019 51218924-html


Tutorial HTML

66

</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, chiardacă 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ă vei încerca să

modificai 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 potrivireape dimensiunea de afisare. <p> <nobr>Aici începe zona sub actiunea tag-ului nobr. Este de remarcat ca se pastreaza randurile asa cum au fostscrise, cele lungi putand fi vazute cu defilarea orizontal.<br> Aici s-a utilizatbr pentru trecerea la un nou rand.<p> Aici s-a utilizat p pentru trecerea la unnou paragraf. </nobr> <p>Aici s-a iesit de sub influenta nobr.</body> </html>

Efect:

8/7/2019 51218924-html


8/7/2019 51218924-html


Tutorial HTML

68

6.5. Formatarea textului

Cel mai important element al unei pagini web este, desigur, textul. Unitateaprincipală de text este paragraful, care se remarcă prin:

Lăsarea unui spaiu vertical suplimentar după el.

Textul este aliniat, implicit, la stânga şi este zdrenuit î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.

Observaii.

1. Pentru structurarea şi organizarea informaiilor din paginile web se pot

utiliza frame-uri (marcajul <frame>), prin care la un moment dat se

afişează mai multe ferestre coninând fiecare câte o pagină. Introducerea

şi gestiunea frame-urilor se realizează foarte convenabil folosind

editoarele HTML.

2. Mai menionăm faptul că în ultimele versiuni ale limbajului HTML şi alebrowser-elor s-a introdus posibilitatea integrării, respectiv lansării în

execuie, prin navigator, a unor aplicaii. Acestea sunt scrise în limbajul

Java, un limbaj cu caracteristici distribuite şi obiectuale, adaptat

programării în Web; ele se numesc "applet"-uri (aplicaii) şi se introduc în

8/7/2019 51218924-html


Tutorial HTML

69

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 , faraumbra.<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:

Observaie. Marcajul <hr> introduce o linie orizontală şi trece la un rând nou.

8/7/2019 51218924-html


Tutorial HTML

70

Centrarea textului. Blocul introdus de etichetele <center>...</center> aliniază

centrat toate elementele pe care le conine.

Exemplu:

<html> <head> <title> Linii orizontale</title> </head> <body> <center> <hr width=10%> <hr width=40%> <hr width=70%> <hrwidth=100%> <hr width=70%> <hr width=40%> <hr width=10%></center> </body> </html>

Efect:

Observaii. 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 funciile pe care le poate avea un

bloc de text în cadrul paginii Web. Toate aceste etichete produc automat trecerea laun rând nou şi adăugarea unui spaiu 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 spaiu suplimentar înainte de blocul paragraf;

8/7/2019 51218924-html


Tutorial HTML

71

inserarea unui spaiu suplimentar după blocul paragraf, dacă se foloseşte

delimitatorul </p> (acesta fiind opional);

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

Observaii 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ă forare,

spaiul dintre cuvinte nu va mai fi acelaşi, el variind în funcie 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 spaiu mai mare între două

8/7/2019 51218924-html


8/7/2019 51218924-html


Tutorial HTML

73

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ări (efectul tag-ului

<blockquote>) şi cu împărirea corectă în versuri (efectul tag-urilor <br>):

Exerciiu. Încercai să modificai dimensiunile ferestrelor deschise de

browserul utilizat şi observai efectul asupra formatării.

Observaie. 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 "spaiu" că este luat în

considerare de browser doar dacă este inserat explicit prin . Blocul

8/7/2019 51218924-html


Tutorial HTML

74

<pre>...</pre> este indicat pentru a insera rânduri vide (spaiu între rândurile

succesive). Într-un bloc <pre>...</pre>, semnificaia marcajelor HTML se păstrează.

<html> <head> <title> Bloc preformatat</title> </head> <body> Orar:<pre> Ora/Ziua Luni Marti Miercuri

8:00 Romana Matematica Sport9: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> O singura linie. O singura linie. O singura linie. O singura linie.<br> O singura linie. O singura linie. O singura linie. O singura linie.<br>

8/7/2019 51218924-html


Tutorial HTML

75

</div> <div align="center"> Bloc aliniat pe centru. Bloc aliniat pe centru.<br> Bloc aliniat pe centru. Bloc aliniat pe centru.<br> Bloc aliniat pe centru. Bloc aliniat pe centru.<br>

</div> </body> </html>

Efect:

Observaii.

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 opiunii

align, nu se produce absolut nimic în prezentarea documentului.

ii. Tag-ul <div> marchează doar locul unde începe o nouă seciune î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 semodifica nimic.<br> <div align=right> Se începe alta sectiune. </div> Textul precedent estealiniat pe dreapta.</body> </html>

Efect:

8/7/2019 51218924-html


Tutorial HTML

76

Blocuri <xmp>...</xmp>. Într-un fişier HTML, caracterele "<" şi ">" au o

semnificaie specială pentru browser. Ele încadrează comenzile şi atributele de

afişare a elementelor într-o pagină. Dacă dorim ca un fragment de text să conină

astfel de caractere, acel fragment trebuie încadrat între perechile de etichete:<xmp>...</xmp> (80 de caractere pe rând). Aceste marcaje interpretează corect

caracterele "spaiu", "tag" şi "CR/LF". Textul afişat în pagină este monospaiat.

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:

8/7/2019 51218924-html


Tutorial HTML

77

6.6. Sugestii privind aspectul textului

Aspectul textului într-o pagină Web este esenial 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 informaiile 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 folosii fonturi de dimensiuni prea mici sau fonturi cu serife, cum este

Times New Roman. Deşi este tipul cel mai utilizat pentru publicaiile

tipărite, textele scrise cu Times New Roman sunt mai greu de citit de pe

monitor. Preferai tipurile Arial, Verdana, Helvetica.

• Nu folosii numai litere mari (majuscule). Textele scrise cu majuscule sunt

mai greu de citit.

• Nu facei exces de caractere aldine (îngroşate, bold ). Limitai-vă la a

accentua cuvinte sau poriuni reduse din text. De asemenea, nu folosii

caractere cursive (înclinate, sau italice) în exces.

• Nu folosii 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 fonturileprestabilite.

• Nu aranjai 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 forează vizitatorul ca odată ajuns la baza paginii să o deruleze

din nou pentru a citi ce-a de-a două coloană.

8/7/2019 51218924-html


Tutorial HTML

78

• Este bine să folosii fiecare etichetă în scopul pentru care a fost ea

definită. Nu folosii etichetele de titlu pentru a accentua anumite pări ale

textului care nu sunt titluri. Nu folosii eticheta <address> pentru a insera

alte texte decât adrese sau eticheta <cite> pentru a realiza scrierea cucaractere italice a textului.

Motoarele de căutare indexează paginile Web şi în funcie 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ă vei folosi etichetele de titlu pentru a accentua anumite pări ale textului

(operaie pe care o putei realiza în mod corect folosind eticheta <font>) vei oferiinformaii eronate motoarelor de căutare. În acest fel, scad şansele ca paginile

dumneavoastră să fie identificate şi citite de cei interesai.

Observaie. Nu uitai 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.

8/7/2019 51218924-html


Tutorial HTML

79

7. Legături în documente HTML

7.2. Adrese URL

O adresă URL constă dintr-un şir de caractere care identifică în mod unic oanumită resursă, oferind informaii 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 locaia 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 informaiilor,

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 comunicaie prin intermediul căruia

browserul se conectează la server. Serverele dein mai multe astfel de

porturi, fiecare servind unui alt tip de comunicaie: 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ărite prin caracterul "/" (slash ).

Iată câteva exemple de adrese URL împreună cu explicaii referitoare la

sintaxa lor:

http://www.autor.com/carti.html Această adresă URL indică documentulHTML, numit carti.html , care se află îndirectorul rădăcină al serveruluiwww.autor.com

http://www.autor.com/ Această adresă indică prima pagină

8/7/2019 51218924-html


Tutorial HTML

80

(home page ) a aceluiaşi server.http://www.autor.com:8080/ Exemplul indică spre prima pagină a

serverului www.autor.com, darspecificând şi numărul portului careeste diferit de cel prestabilit.

http://www.autor.com/carti.html#webdesign În acest exemplu este indicată caleaspre documentul HTML carti.html aflatpe acelaşi server, dar specificându-se oanumită seciune a acestui document,seciune 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ă prezena 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 obinând următoarea formă:

C:\My Documents\Work\culori.htmlObservaie. În cazul resurselor stocate pe servere externe, numele

directoarelor care fac parte din calea către resursă sunt despărite prin caracterul "/ "

(slash ). La fişierele stocate pe computerul propriu, directoarele şi subdirectoarele

care formează calea către fişier sunt despărite prin caracterul "\ " (backslash ). Cele

8/7/2019 51218924-html


Tutorial HTML

81

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 conveniile acestuisistem. Mai mult, această convenie 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 forele primare care au dus la succesul Web-ului. Un link are două capete (numite ancore ) şi o direcie (un loc marcat , denumit

ancorare ). Link-ul începe de la ancora "sursă" şi arată către ancora "destinaie", care

poate fi orice resursă Web (de ex. o imagine, un clip video, o bucaică 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 locaii: 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 culoarediferită 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 difereniate î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>

8/7/2019 51218924-html


8/7/2019 51218924-html


Tutorial HTML

83

informaii suplimentare despre semnificaia 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îneles). 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 iniială.

În mod prestabilit, legăturile deschid pagina pe care o referă în fereastracurentă. Aceasta înseamnă că dacă vei 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ăsai

butonul Back al browserului.

• text_legatura poate fi orice text (care poate să conină imagini), formatat

sau nu, dar care nu mai poate conine alte legături. Acest text este afişat

difereniat faă de textul adiacent lui pentru a se ateniona 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 construcie ca aceasta:

<a href="adresa_url"><font face="tip">legatura</font></a>

În locul ei vom folosi construcia:

<font face="tip"><a href="adresa_url">legatura</a></font>

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

8/7/2019 51218924-html


Tutorial HTML

84

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 documentulcă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>

8/7/2019 51218924-html


Tutorial HTML

85

</head><body>

<h1 align="center">Atributul title</h1><hr><a href="http://www.google.com" title="Legatura catreGoogle.com">Google</a>

</body></html>

Efect:

Exemplul următor redă modul în care se deschide o pagină într-o nouă

fereastră:

<html><head>

<title>Deschidereapaginii</title>

</head><body>

<h1align="center">Deschidereapaginii in alta fereastra</h1><hr>Pagina de mai jos se vadeschide intr-o fereastra noua<p><a href="Atributul title.htm"target="_blank">Utilitateaatributului title</a>

</body></html>

În foarte multe site-uri ai observat, probabil, existena, în partea de jos a

paginii, a unui bloc de text care conine 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|

8/7/2019 51218924-html


Tutorial HTML

86

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 conine 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ă dorii

ca bara să facă parte din textul activ, o vei insera între etichetele <a> şi </a>,

altminteri ea trebuie plasată în afara acestora, astfel:

|<a href="optiune1.html">optiune1</a>|

O pagină Web poate conine 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.

8/7/2019 51218924-html


Tutorial HTML

87

Î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 locaia 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 execuie a

aplicaiei de expediere a mesajelor electronice a celui care vizitează pagina. Făcând

click pe textul care însoeş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ă aplicaiile 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 aplicaia

Microsoft, (Eudora, de exemplu) aceasta va porni de asemenea automat, cu o nouă

pagină Send şi cu adresa destinatarului pre-completată.

8/7/2019 51218924-html


8/7/2019 51218924-html


Tutorial HTML

89

2. Legătura hipertext la o locaie 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 locaii denumite din acelaşi document.

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

Observaii.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ă denumii 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 conine un cuprins şidouă seciuni. Din cuprins se poate efectua un salt la oricare dintre seciuni iar din

finalul fiecărei seciuni se poate reveni la cuprins. Se va urmări modul în care se

marchează locurile de interes.

<html><head><title> Legătura la o seciune</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

8/7/2019 51218924-html


Tutorial HTML

90

<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

realizată o legătură reciprocă între două

pagini aflate într-un acelaşi folder de lucru.

Salvai exemplul anterior cu

numele pagina1.htm iar exemplul care

urmează cu numele pagina2.htm .

<html><head>

<title>Pagina 1</title></head><body>

<h1>Pagina 1 </h1><hr><a href="pagina2.htm">Link catrepagina 2 </a>

</body></html>

<html><head>

<title>Pagina 2</title></head><body>

<h1>Pagina 2 </h1><hr><a href="pagina1.htm">Link catrepagina 1 </a>

</body></html>

8/7/2019 51218924-html


Tutorial HTML

91

La fel cum ai procedat şi până acum, deschidei una dintre cele două pagini

cu browserul şi testai funcionarea legăturii dintre ele.

Ambele documente HTML trebuie salvate în acelaşi folder. Vei observa că

atunci când vă aflai în Pagina 1 şi facei 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 conine calea (path ) precisă şi completă către

fişierul respectiv pornind de la directorul rădăcină, prin care se poate ajunge la fişierulde 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>

Obsevaie. Întotdeauna este bine să adaugai la sfârşit un „/” când dai adresaspre un subfolder. Dacă nu punei „/” 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”

8/7/2019 51218924-html


Tutorial HTML

92

Adresa relativ ă a unui fişier precizează poziia 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 înstructura 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:

legaturi.html

trandafir.gif

C:C:

Manual HTML

My Documents

My Pictures

e legaturi.html

trandafir.gif

C:C:

Manual HTML

My Documents

My Pictures

e

C:C:C:C:

Manual HTML

My Documents

My Pictures

ee

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>

Semnificaia 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 poziionat ca în

schema care urmează.

8/7/2019 51218924-html


Tutorial HTML

93

Legaturi

C:C:

Manual HTML

My Documents

Exemple

legaturi.htmle

Legaturi

C:C:C:C:

Manual HTML

My Documents

Exemple

legaturi.htmlee

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>

Referinele relative au câteva avantaje:

• avem mai puin de tastat în codul sursă: nu mai tastam calea completă

pentru fiecare legătura în parte;

• legăturile vor funciona ş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 conine 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">.

8/7/2019 51218924-html


Tutorial HTML

94

7.4. Legătura la o locaie denumită din alt document

Marcarea ancorării se face tot printr-un tag <a> în care referina are un

coninut 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 locaii denumite din documentul referit; de

remarcat că este necesar caracterul # în faa denumirii;

• text_legatur ă este textul care va apărea în document sub aspectul uzual al

unui punct de salt posibil.

Observaie. În cazul în care documentul intă nu are definite denumiri de

locaii, 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

acionarea tastei “Enter”.

Exemplu:

<html><head><title> Titlu de text </title></head><body>Treci în <h1>! </h1> <p>

8/7/2019 51218924-html


Tutorial HTML

95

<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 discuii î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, avei posibilitatea să specificai HTML într-o ordine

diferită. Cu atributul tabindex putem să menionă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. Putei oferi utilizatorului posibilitatea de astabili 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>

8/7/2019 51218924-html


8/7/2019 51218924-html


Tutorial HTML

97

</html>Adresa relativă "../cages/birds.gif" se va rezolva ca:

http://www.aviary.com/cages/birds.gif

Observaii.

1. Tag-ul <base> este permis doar în seciunea <head> a documentului,

înainte de orice element care se referă la o sursă externă. Deşi este untag din HTML 2.0, nu este recunoscut de toate browserele.

2. Informaia de cale specificată de elementul <base> afectează numai

adrese brelative în documentul unde apare elementul.

7.6.2. Relaii între documente

Pentru a arata o legătură de la documentul curent la altul, în special pentru a

furniza o informaie 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 ometodă de conversie a unei secvene de octei î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 octei;

browserul le interpretează ca pe o secvenă de caractere;

8/7/2019 51218924-html


Tutorial HTML

98

• cod-limb ă specifică limba de bază a valorilor atributelor unui element şi

coninutului 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 destinaie intenionat pentru

informaiile de stil. Poate fi un singur descriptor media sau o listă separată

cu virgule. Valoarea implicită pentru acest atribut este "ecran ".

• tip-rel specifică relaia dintre documentul curent şi documentul intă;

• tip-rev specifică relaia dintre documentul intă şi documentul current;

• titlu poate fi folosit pentru a denumi legătura (ca informaie a documentuluicurent);

• 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 seciunea <head>

şi pot exista mai multe intrări <link>. Deşi <link> nu are coninut poate fi utilizat pentru

a furniza informaii despre autor, adrese email, tipuri de documente referite etc. cu

utilizare posibilă în afaceri. Fiind în seciunea <head> nu se afişează nimic în pagina

vizualizată, exploatarea informaiilor inând de programul navigator.Exemplu care urmează ilustrează cum câteva definiii <link> pot apare în

seciunea <head> a unui document. Documentul curent este "Capitolul2.html".

Atributul rel specifică relaia 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 îneles ca:

Document B: < link href="docA" rev="foo">

8/7/2019 51218924-html


Tutorial HTML

99

Ambele atribute pot fi specificate simultan.

Tag-ul <link>poate fi utilizat pentru a furniza o varietate de informaii 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 colecii de documente.

Exemplele de mai jos ilustrează cum informaia 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 unuidocument. 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>

8/7/2019 51218924-html


Tutorial HTML

100

Î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 colecii 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>

8/7/2019 51218924-html


Tutorial HTML

Notă.

Tutorialul va fi completat ulterior cu alte elemente HTML.

Chiar şi în această formă este perfectibil de îmbunătăiri.