Crearea de pagini Web

URL-uri Editare Subtitluri Ancore Culori Liste Tabele Imagini

Imagini cu hiperlegturi Exceptii Index

Limbajul de Marcare HiperText - HTML - (HyperText Markup Language)

care este limbajul specific World Wide Web (WWW) . Cu ajutorul acestui limbaj
serverele Web si clientii acestora comunic prin intermediul retelei de
calculatoare. Astfel ori de cte ori deschideti un document Web executati de fapt
un acces la un document scris in HTML, o functie JavaScript sau un "applet"
Java, hiperlegturile, imaginile vizionate sau formularele pe care le completati
fiind de fapt produse ale acestor limbaje. Mai mult aceste limbaje sunt complet
independente fat de tipul sistemului, care poate fi: PC, Macintosh, statie UNIX

Desi unii numesc HTML "limbaj de programare" acest lucru nu trebuie s v

sperie deoarece acest limbaj de marcare este simplu si usor de nvtat, el nu
presupune dect capacitatea utilizrii unui editor de texte, notiuni de baza despre
nume de directoare si de fisiere din sistemul in care lucrati si o oarecare
deprindere cu un program de explorare Web (Netscape Navigator, Internet
Explorer, NCSA Mosaic etc.). Deasemeni cunoasterea acestui limbaj este
indispensabil pentru acei care vor s nvete limbajele de programare JavaScript
sau Java.
nainte de a intra n detaliile limbajului este necesar definirea anumitor
termeni si explicarea functiei unui server Web. Programele de explorare Web
comunic cu serverele Web utiliznd protocolul http (HyperText Transfer Protocol
- protocol de transfer hipertext) . Aceste programe trimit mesaje de retea catre
servere prin care solicit anumite documente sau servicii iar serverul rspunde
prin transmiterea serviciului respectiv (dac este disponibil) utiliznd acelasi
protocol http. Limbajul HTML reprezint de fapt o parte din simbolurile care
compun protocolul http. Protocolul http, precum si serverele Web si aplicatiile de
tip client care l utilizeaz, au fost initial dezvoltate n Elvetia la Laboratorul
European pentru Fizica Particulelor (CERN). n Internet exist numeroase
protocoale de retea , fiecare fiind dedicat unui anumit scop. Exist protocoale
pentru post electronic ( e-mail ), pentru transfer de fisiere (ftp ), precum si
pentru alte tipuri de servicii ( Gopher, Telnet, WAIS ) . Fiecare din aceste
protocoale opereaz n mod diferit si are interfete diferite cu utilizatorul, dar http a
fost proiectat astfel nct s nglobeze aceste protocoale ntr-unul singur. Astfel
prin pozitionarea mouse-ului si printr-un simplu clic pe o hiperlegtur
utilizatorul poate trimite un mesaj prin posta electronic, poate transfera un fisier,
poate ncrca o alt pagin de Web, etc. Comunicatia ntre programul de explorare
Web, numit si browser WEB (to browse = a rsfoi), si server se realizeaz astfel:
 Spre deosebire de documentele create de procesoare de texte care au un
format special si contin caractere invizibile de control necesare formatrii
(subliniere, aliniere de paragrafe, schimbare de font, introducere imagini etc.),
documentele de tip HTML sunt exclusiv de tip text (ASCII) , avnd coduri
speciale de marcaj necesare formatrii documentului intercalate chiar n text,
separate de text prin simbolurile < >.
Cu ajutorul marcajelor, pe lng formatarea obisnuit a textelor, se realizeaz
si introducerea de hiperlegturi. Hiperlegturile sunt cuvintele si frazele colorate
pe care le vedeti in documentele Web, printr-un clic pe o hiperlegtur v puteti
deplasa la alte documente Web situate pe serverul local sau la alte documente si
servicii Internet (transfer de fisiere, posta electronic). De fapt hiperlegturile
apeleaz documente de pe serverul local sau URL-uri .

Ce sunt URL-urile

URL-urile sau descriptorii uniformi de resurse (Uniform Resource Locators)

reprezint punctul cheie al interpretrii informatiilor din Internet. Acestea sunt un
mod standard de descriere att a locatiei unei resurse Web, ct si a continutului
acesteia.

Sintaxa standard a unui URL este :

nume_serviciu://gazd_internet:numr_port/resurs

Dup cum observati exist trei prti distincte in aceasta sintaxa:

o numele serviciului , (http,ftp etc.) urmat de caracterul : si de dou bare

inclinate (exist dou exceptii in privinta obligativittii barelor nclinate);
o numele gazda internet , precizeaz unde este localizat serviciul respectiv si
numrul portului (optional) urmat de o singur bar nclinat;
o resursa care este in mod normal numele unui document sau fisier localizat
pe un calculator, dar pot exista si alte tipuri de resurse

Exemple de URL-uri caracteristice pentru diverse servicii:

o URL-uri de tip http

Reprezint documente disponibile pe un server WWW. Iat un exemplu ce
 reprezint de fapt pagina gazd a companiei Microsoft :
http://www.microsoft.com/
o URL-uri de tip ftp (file transfer protocol)
Acestea sunt servicii de tip protocol de transfer de fisiere (ftp) in Internet.
Exemplu: ftp:// Observati c am specificat un nume de fisier, dar se pot
specifica si nume de directoare.
o URL-uri de tip Telnet
Serviciile de tip Telnet v permit s v conectati ca utilizator pe un sistem
de calcul aflat la distant si s utilizati ecranul si tastatura sistemului local
ca terminal. Iat un exemplu: telnet://tempus.upit.ro
Observati c acest URL nu mai respect sintaxa standard, cuprinznd
numai numele serviciului si numele calculatorului gazd.
o URL-uri de tip Gopher
Sunt servicii Internet de tip "gopher" care sunt de tip meniu non-grafic.
Exemplu: gopher://gopher. Desi se pare c a a treia parte a sintaxei
standard nu este prezent, am instruit de fapt browser-ul Web s realizeze
accesul la un nivel superior predefinit al meniului de tip Gopher
o URL-uri de tip news (noutti, actualitti)
Aceste URL-uri reprezint serviciile de stiri UseNet (sau NetNews) care
reprezint un serviciu larg distribuit de tip BBS (Bulletin Board Service),
organizat in mii de domenii de interes. Un exemplu de astfel de URL este:
news:comp.infosystems.www.providers
Observati disparitia barelor inclinate (slash-uri) din prima parte a sintaxei
standard, aceasta reprezentnd una din exceptii.
o URL-uri de tip WAIS
Serverele care utilizeaz WAIS - server informational de zon larg (Wide
Area Information Server) contin baze de date indexate, n care se pot
efectua cutri de la distant, dup cuvinte cheie. Iat un exemplu de URL
de tip WAIS: wais://info.curtin.edu.au:210/k-12-software.
o URL-uri de tip mailto
Reprezint servicii Internet de post electronic (e-mail). URL-urile de tip
mailto sunt disponibile n majoritatea programelor Web si se folosesc de
ctre utilizatori pentru a trimite mesaje prin post electronic printr-un
simplu clic pe legtura respectiv. Exemplu: mailto:mi@tempus.upit.ro
o URL-uri de tip file
Acestea reprezint fisiere localizate pe calculatorul propriu.Din 'Netscape
Navigator 3.0' acestea se deschid din meniul File optiunea Open local .
Exemplu: file://work/html/page1.htm

Editarea documentelor HTML

Documentele HTML pot fi editate cu un editor de text (ex.: Notepad.exe -

WIN95, Edit.com - DOS) , cu un procesor de text (Word, WordPerfect; avnd
grij ca atunci cnd salvati documentul s utilizati optiunea Save as si la Save as
type s selectati MS-DOS Text) sau prin folosirea unui editor specializat HTML.
Exist si procesoare de texte care convertesc automat textele din formatul specific
n format HTML (Word 97) sau programe care modific aceste procesoare
introducnd functii in plus pentru usurarea editrii in limbaj HTML (Easyhelp
pentru Word 7.0 si Word 6.0).

Editoarele specializate HTML dispun de posibilitti de creeare si reutilizare a

marcajelor frecvent utilizate. Marcajele nu sunt afisate n timpul editrii ci sunt
selectate din meniuri sau prin activarea unor ideograme, efectele editrii fiind
vizibile imediat pe ecran. Astfel de programe sunt: Adobe Pagemill, Micsosoft
Frontpage, Net Object Fusion etc. Aceste programe se mai numesc si programe
WYSIWYG (what you see is what you get) - se obtine ceea ce se vede. Desi unii
folosesc din comoditate sau lips de timp editoarele specializate, celor care vor s
invete limbajul HTML le recomand folosirea editoarelor de text simple.

Un document HTML poate avea orice denumire, este ns preferabil s folositi

extensia HTML(n cazul documentelor editate n Windows 95 sau UNIX) sau
HTM.

Un lucru important este ca prima pagin pe care vreti s o ncarce programul

de explorare Web al utilizatorului, n momentul n care acesta a selectat adresa
voastr, s se numeasc index.htm sau index.html, dac pe server e instalat UNIX
sau Linux, sau default.htm dac pe server e instalat micr0$0ft Windos NT (very
bad choice!). Astfel atunci cnd utilizatorul indic URL-ul :
http://www.nume_server.com, programul Web va cuta pagina
http://www.nume_server.com/index.htm, dac aceast pagin nu este gsit va fi
afisat structura directoarelor din calea specificat
(http://www.nume_server.com/), ceea ce nu este de preferat.

n cazul marcajelor interpretorul HTML nu diferentiaz literele mari de literele

mici (exemplu: &ltHTML> poate fi scris: &ltHtml>,&ltHtMl> etc.) dar de obicei
marcajele se scriu cu litere mari pentru citirea mai usoara a documentului sursa.

Crearea de subtitluri, stiluri si paragrafe

Codurile de marcare reprezint de fapt textul aflat ntre perechi de forma < > .
Orice document HTML trebuie s nceap cu marcajul <HTML> si s se termine
cu marcajul </HTML> (observati caracterul "/" - reprezint sfrsitul unui marcaj).
Exemplu:
<HTML>
Document HTML
</HTML>

Atentie!
Dac ati deschis mai multe marcaje acestea se nchid obligatoriu n sensul invers
deschiderii lor, astfel nct acestea s fie mbricate.

Documentele HTML sunt mprtite n dou sectiuni: antetul (HEAD) si corpul

(BODY). Aceast delimitare s-a fcut pentru interpretarea corect a programelor
si pentru programele de indexare WWW care preiau cuvintele din antetele
diferitelor documente pentru formarea de liste index. Antetul trebuie s contin
neaprat marcajul <TITLE> n interiorul cruia se scrie de fapt titlul care va fi
afisat de programul de explorare Web. Iat deci cum arat "macheta" unui
document HTML:

<HTML>

<HEAD>

<TITLE>

Titlul...

</TITLE>

</HEAD>

<BODY>

Text......

Text .....

Text .....

</BODY>

</HTML>

Previzualizarea unui document HTML de pe harddisk se poate face fie

folosind un editor HTML ce are functii gen preview, fie cu ajutorul brows er-ului
Web (la Netscape Navigator optiunea Open file din meniul File, iar la Internet
Explorer: Open local).

Crearea subtitlurilor se face cu ajutorul marcajului <Hx> unde x={1,2...6}. x

reprezint de fapt nivelul subtitlului (nu uitati la sfrsitul subtitlului marcajul
</Hx>).
 Nivel 1
Nivel 2
Nivel 3

Nivel 4

Nivel 5

Nivel 6
De exemplu sectiunea de program sursa pentru afisarea textului 'Pitesti' cu nivelul de subtitlu 3 este urmtoarea:
<H3>Pitesti</H3>

n limbajul HTML alinierea implicit a textelor este la stnga, dar putem selecta si aliniere la centru <CENTER>(foarte
folositoare n cazul titlurilor) sau la dreapta cu ajutorul marcajului <RIGHT> Cnd creati un document HTML puteti
controla anumite proprietti de afisare a caracterelor (culoare, subliniere etc.) dar nu puteti controla tipul de caractere
folosit (acesta poate fi selectat de utilizatori din browser-ul Web).Deoarece s-ar putea ca browser-ele celor ce citesc textul s
nu fie n msur s redea toate stilurile de afisare si formatare a caracterelor (exist si calculatoare fr plci grafice care
au instalate browsere corespunztoare si redau documentele internet numai n mod alfanumeric) s-au introdus, pe lng
marcajele fizice, marcajele logice. Aceste marcaje sunt citite de browser si sunt interpretate conform posibilittilor browser-
ului respectiv, de aceea este indicat ca n majoritatea cazurilor s se foloseasc marcaje logice.

Semnificatie Marcaj logic Marcaj fizic

Caractere aldine(bold) STRONG B
Caractere italice EM IT
Corp de liter fix CODE TT
Intrare de la tastatur KBD TT
Citare CITE Nu e disponibil

Deoarece programele Web care ruleaz pe diverse calculatoare cu diverse

posibilitti grafice redau documentele n mod diferit, n standard HTML s-a
introdus codul de marcaj <P> pentru semnalarea unui paragraf nou. Efectul
acestui marcaj este aparitia unei linii vide ntre portiunea de document anterioar
marcajului si ceea care urmeaz, ns mai multe astfel de marcaje consecutive
sunt ignorate si nu au ca efect adugarea de linii vide suplimentare. Marcajul de
nchidere </P> este optional. Alt tip de delimitator este marcajul <P> care are ca
efect trecerea la o linie nou fr a insera o linie vid. Prin definitie si alte marcaje
au ca efect trecerea la o linie nou (subtitlurile, listele, textele preformatate).

Uneori este util s separati vizual portiunile din documentul HTML, prin
intermediul unei linii (rigle). Acest lucru este realizat cu mar cajul
&gtHR<(horizontal rule). Acest marcaj traseaz pur si simplu o linie orizontal
de-a lungul ferestrei programului de explorare, ca n exemplul de mai jos.
Observati c nu exist marcaj de nchidere ; acest marcaj este numit, n mod
normal, un marcaj vid, ceea ce nseamn c nu poate inc lude nimic.
 Utilizarea ancorelor si a hiperlegturilor

Hiperlegturile sunt de fapt cuvintele sau frazele evidentiate din documentele

HTML pe care dac efectuati clic v deplasati la alte documente Web, sau apelati
alte servicii Internet. Hiperlegturile se bazeaz pe marcajul de tip ancor care are
sintaxa standard urmtoare:

<A Comand = "tint" > <text evidentiat /A>

Comenzile pot fi hiperlegturi sau marcaje plasate in document. Astfel sintaxa

<A HREF = "tint" > arat faptul c tinta este o legtur ctre un URL din
Internet (URL absolut), n timp ce <A NAME = "tint" > arat faptul c tinta este
o legtur ctre un document aflat pe serverul local (URL relativ) sau ctre o
anumit zon din acel document. Textul evidentiat este cuvntul sau fraza care
apare in pagin, la efectuarea unui clic pe acesta efectundu-se serviciul dorit
(tinta).

Cele mai simple legturi sunt cele ctre documente locale, adic ctre
documente aflate pe acelasi calculator. De exemplu dac aveti doua fisiere HTML
in acelasi director 1.htm si 2.htm si doriti apelarea celui de-ale doilea document
din primul printr-o legtur, secventa sursa HTML a primului document prin care
se face apelarea celui de-al doilea va fi urmtoarea:
<A HREF="2.htm">Documentul 2 </A >.

Pe ecran va apare textul "Documentul 2" evidentiat fat de celelalte caractere

si subliniat.

n cazul n care documentul tint este n alt director se modific partea-tint a

marcajului de tip ancor. De exemplu dac documentul "2.htm" se afl n
subdirectorul "dir2" atunci tinta va deveni "dir2/2.htm". Observati folosirea liniei
nclinate spre dreapta nu a celei spre stnga.

Legturi ctre pozitii specifice dintr-un anumit document se realizeaz tot cu

ajutorul ancorelor folosind comanda NAME, marcajul ancor fiind n acest caz
<A NAME="zon" /A >
Acest marcaj se comport ca o etichet, partea de document care va urma
aceast etichet putnd fi apelat din alt document astfel (presupunem c
documentul n care se afl eticheta "zon" se numeste "2.htm"):
<A HREF="2.htm#zon">Apel la d2.htm, partea dup ancora zon</A > ("Apel
la ..." este textul care va aprea subliniat si evidentiat n d1.htm).

n multe pagini HTML se folosesc deplasrile ctre zone specifice din acelasi
document. n acest marcajul ancor va fi definit ca la exemplul anterior dar tinta
hiperlegturii nu va contine nici un nume de document ci doar caracterul # urmat
de numele etichetei (n cazul nostru "#zon").

Pentru apelarea unui document din Internet se foloseste URL-ul complet al

acestuia. De exemplu secventa: <A HREF="http://www.netscape.com/"> va avea
ca efect deplasarea n site-ul companiei Netscape Communications.

Selectarea culorilor

Culorile cu care apar paginile HTML pot fi setate de utilizator prin optiuni
incluse n browser-ul Web, sau de realizatorul paginii cu ajutorul unor marcaje si
atribute.

Pentru setarea culorilor pentru documentul HTML se folosesc urmtoarele

atribute n cadrul marcajului &ltBODY>:

o BGCOLOR (background color) selecteaz culoarea de fond

o TEXT selecteaz culoarea cu care vor fi afisate caracterele
o VLINK (visited link) selecteaz culoarea cu care se vor afisa legturile
vizitate
o LINK (active link) selecteaz culoarea corespunztoare link-urilor din
document

Setarea culorii se poate face n dou moduri:

o prin folosirea numelui corespunztor celor 16 culori predefinite. Acestea

sunt:

Deoarece culorile se exprim prin atribute, acestea vor fi ncadrate de

ghilimele. De exemplu pentru selectarea fondului imaginii rosu si a culorii
 textului galben se foloseste secventa
<BODY BGCOLOR="RED" TEXT="YELLOW">.

o prin atribuirea codului RGB corespunztor culorii. Acest cod este precedat
de semnul # si se exprim n cod hexazecimal prin 6 cifre: primele dou
corespund concentratiei de rosu, urmtoarele dou corespund concentratiei
de verde si ultimele dou pt. concentratia de albastru.
Exemplu: Selectarea culorii galben (cod hexazecimal corespunztor
#FF00FF) pentru linkurile vizitate:
<BODY VLINK="#FF00FF">.

Crearea listelor

n limbajul HTML ntlnim urmtoarele tipuri de liste:

o Liste marcate numite si liste neordonate

o Liste numerotate secvential numite si liste ordonate
o Liste multi-coloan de tip director
o Liste de tip glosar
o Liste de tip meniu

Listele marcate (neordonate) scot n evident fiecare marcaj component prin

adugarea unui marcaj tipografic (bullet) sau a altui semn distinctiv (la fel ca n
lista de mai sus). Codul de marcare pentru o list neordonat este <UL >
(unordered list) urmat de marcajul generic <LI> (list item). n timp ce marcajul de
sfrsit de list este obligatoriu, marcajul </LI> este optional deoarece fiecare
marcaj de nceput de termen al listei <LI> poate fi privit ca un sfrsit logic al
marcajului anterior.

Listele numerotate v permit numerotarea fiecrui element din list. Marcajul

corespunztor este <OL> (ordered list), pentru marcarea unui termen nou fiind
folosit acelasi marcaj <LI>.

Listele de tip director permit afisarea elementelor pe orizontal, la fel ca n

cartea de telefon. Marcajul folosit pentru aceast list este <DIR>. Trebuie s
tine-ti cont de faptul c unele browser-e Web nu recunosc acest mod de list.

Listele de tip meniu sunt liste simple, au acelasi format cu al celor neordonate
numai c le lipseste marcajul tipografic. Marcajul folosit n acest caz este
<MENU>
 Listele de tip glosar permit includerea unei descrieri pentru fiecare element din
list. Marcajul corespunztor acestei liste este <DL> iar pentru formatarea acestei
liste se folosesc alte dou marcaje :<DT> pentru marcarea descrierii si <DD>
pentru marcarea elementului din list.

Liste mbricate se pot creea din mai multe liste de acelasi fel sau din liste
diferite. Trebuie ns s fiti foarte atenti cnd deschideti o list n interiorul alteia
la marcajele de nchidere ale listei precedente.

Crearea textelor preformatate si a tabelelor

Preformatarea textelor este util atunci cnd doriti s introduceti mai multe
spatii ntre cuvinte sau doriti o anumit aranjare a textului indiferent de programul
de explorare Web care ncarc pagina. Pentru aceasta se foloseste marcajul
<PRE>(preformat).

Atunci cnd lucrati cu texte preformatate nu este indicat s folositi caractere de

tabulare (Tab) deoarece s-ar putea ca unele programe Web s aloce mai putine sau
mai multe spatii albe pentru un caracter Tab dect programul vostru. Marcajul
<PRE> poate fi folosit cu atributul optional WIDTH care stabileste ltimea
textului preformatat.

n limbajul HTML marcajul <TABLE> este corespunztor tabelelor.

Elementele unui tabel se descriu cu ajutorul a trei marcaje principale: <TH> (table
head) pentru antet (cap de tabel), <TR> (tabel return) pentru sfrsitul unei linii din
tabel si <TD> (table data) pentru informatia cuprins n celulele tabelului.
Diferenta dintre marcajul <TD> si <TH> este c textele care au marcajul <TH>
vor aprea mai ngrosat.

Cu ajutorul unor atribute specifice tabelelor puteti controla alinierea n

interiorul csutelor si ltimea si nltimea acestora.

Textul din celulele tabelelor au alinierea implicit la centru, dar puteti controla
alinierea textului cu atributul ALIGN. Astfel pentru aliniere la dreapta se foloseste
<TH ALIGN="RIGHT"> iar pentru aliniere la stnga se foloseste <TH
ALIGN="LEFT"> . Observati c atributele trebuie ncadrate ntre ghilimele.

Controlul ltimii coloanelor liniilor si a coloanelor se realizeaz cu atributele

COLSPAN si ROWSPAN. De exemplu marcajul <TD COLSPAN=4> creeaz o
celul cu o ltime de patru coloane iar marcajul <TH ROWSPAN=3> creeaz un
antet de tabel cu o nltime de trei linii.

ncadrarea tabelului se face cu atributul BORDER n cadrul marcajului

<TABLE> Pentru a creea un tabel ncadrat trebuie s ncepeti descrierea cu
<TABLE BORDER=x> unde x reprezint grosimea bordurii tabelului.

Pentru a specifica titlul unui tabel se foloseste marcajul <CAPTION> astfel :

<CAPTION>Titlu tabel</CAPTION>.

Atentie!

o marcajele <TH>, <TD>, <TR> si <CAPTION> sunt permise numai n

cadrul unui marcaj <TABLE>
o programele de explorare Web mai vechi nu interpreteaz tabelele sau unele
marcaje (sau atribute) ale acestora.

Introducerea imaginilor n documente HTML

Cea mai atractiv parte a unei pagini Web o constituie imaginile, majoritatea
programelor de explorare recunosc urmtoarele tipuri de imagini:

o imagini de tip GIF (Graphic Interchange Format);

o imagini de tip JPEG (Joint Photographic Experts Group) - nu sunt
recunoscute de programele de explorare Web mai vechi;
o imagini din X-Windows (uzuale n sisteme UNIX): XBM (X-Bitmap) si
XPM (X-Pixelmap)

Este recomandabil s folositi imaginile de tip JPEG care au un coeficient de

compresie foarte bun ceea ce reduce marimea fisierului si implicit timpul de
ncrcare al imaginii.

O imagine se poate introduce n interiorul paginii prin codul de marcare

<IMG>. Presupunnd c imaginea pe care vreti s o introduceti se numeste
"star.jpg", codul minimal de includere al imaginii este: <IMG SRC="star.jpg">.
Am presupus c imaginea "star.jpg" se afl n directorul n care se afl si
documentul HTML. Dac imaginea se afl intr-un subdirector "imagini" al acestui
director, codul va fi <IMG SRC="imagini/star.jpg"> (observati folosirea brii
slash). n cadrul unui marcaj <IMG> atributul SRC este obligatoriu deoarece
identific imaginea. Marcajul <IMG> mai are trei atribute care sunt optionale:
 o ALT. Specific un text alternativ n cazul n care imaginea nu poate fi
vizualizat
o ALIGN. Specific alinierea imaginii n pagin.
o USEMAP Specific faptul c imaginea contine zone care au atribuite mai
multe hiperlegturi

Asignarea unui text alternativ unei imagini se face cu ajutorul atributului ALT.
Este recomandat s se foloseasc acest atribut deoarece exist programe WEB mai
vechi care nu au interfat grafic sau sisteme care sunt concepute n format
alfanumeric si nu pot afisa imagini sau exist situatii n care utilizatorul a setat
browser-ul s nu ncarce imaginile. n aceste cazuri n locul imaginii va apare
textul specificat de atributul ALT, dac nu exist acest atribut va apare ceva de
genul : [Image] , care este complet inutil din punct de vedere al informatiei
transmise.
Exemplu: <IMG SRC="Stars.gif" ALT="Stele">. De obicei textul corespunztor
atributului ALT se introduce ntre paranteze ptrate.

Cu ajutorul atributului ALIGN se poate controla alinierea pe vertical a

imaginii fat de linia de text n care va apare. n absenta acestui atribut imaginile
sunt afisate cu partea inferioar la partea inferioar a liniei de text. Utilizarea
atributului ALIGN="midle" va afisa imaginii cu mijlocul n dreptul mijlocului
liniei de text iar utilizarea atributului ALIGN="top" va afisa imaginea cu partea
superioar la partea superioar a liniei de text.

Atributul USEMAP va fi explicat aparte n cadrul subtitlului "Crearea de

imagini care contin mai multe hiperlegturi".

O metod des ntlnit n paginile Web este transformarea imaginilor n

hiperlegturi ce conduc la servicii din WWW, la documente de pe calculatorul
local sau la o anumit secvent din aceeasi pagin. Aceasta se realizeaz prin
plasarea marcajului <IMG> n interiorul ancorei astfel: <A
HREF="http://www.netscape.com><IMG ALT="Netscape"
SRC="netscape.gif">Netscape Navigator</A></IMG>

Aceast secvent realizeaz o hiperlegtur ctre site-ul Web al companiei

Netscape Communications, pe ecran va apare imaginea Netscape.gif aflat pe
calculatorul local (dac aceast imagine nu se poate ncrca apare descrierea
alternativ a imaginii "Netscape"), clicul putndu-se efectua pe imagine sau pe
textul urmat de aceasta "Netscape Navigator" care va fi evidentiat si subliniat.
Observati deci c o hiperlegtur poate contine si o imagine urmat, precedat sau
ncadrat de texte.

O alt metod referitoare la imagini este definirea unei hiperlegturi prin

intermediul unei imagini mult mai mici dect imaginea normal (numit
thumbnail=unghie de deget), astfel nct la activarea hiperlegturii respectiv s
se ncarce imaginea normal. Acest lucru este foarte folositor deoarece se
micsoreaz timpul de ncrcare al paginii si utilizatorul poate vizualiza numai
imaginile care l intereseaz. Exemplu: <A HREF="bigstars.jpg"> <IMG
ALT="Stele" SRC="littstar.jpg"> </A>

Crearea de imagini care s contin mai multe hiperlegturi

Poate c ati ntlnit n unele pagini Web imagini care au incluse hiperlegturi,
astfel nct v puteti deplasa la URL-uri diferite, functie de pozitia din imagine n
care efectuati clic. Asa cum am artat anterior acest lucru se face cu ajutorul
atributului USEMAP din cadrul marcajului IMG.
Spre deosebire de exemplul anterior, n acest caz marcajul nu va contine o
referint, n schimb apare atributul USEMAP care declar numel e hrtii
corespunztoare imaginii, n aceast hart fiind definite zonele active ale imaginii.
Iat un exemplu de marcaj pentru declararea unei imagini selectabile prin clic:
<IMG SRC="imgh.gif" USEMAP="#map1">
n cadrul marcajul MAP se definesc zonele active ale unei imaginii. Atributul
NAME din cadrul acestui marcaj arat numele imaginii ce contine zonele active.
Zonele active se definesc cu ajutorul marcajului AREA care are urmtoarea
sintax:
<AREA SHAPE="zona" COORDS="x1,x2..." HREF="URL" ALT="text">
Numrul de coordonate definite n cadrul atributului COORDS difer n funcie
de zon. Tipurile de zone active pot fi:

o dreptunghiuri - zona=rect , x1,x2,x3,x4 = coordonatele coltului din stanga

sus si al celui din dreapta-jos al dreptunghiului
o cercuri - zona=circle , x1,x2,x3 = coordonatele (x,y) corespunztoare
centrului cercului si raza
o poligoane neregulate - x1,,x2,x3,x4,... = coordonatele (x,y)
corespunztoare fiecrui colt al poligonului

n continuare voi prezenta un exemplu de folosire a marcajelor MAP si AREA,

n care am definit dou zone dreptunghiulare, prima cu coordo natele xs=10,
ys=10 si xd=20, yd=20 iar a doua cu coordonatele xs=40,ys=10 si xd=50,yd=20
(xs,ys reprezint coordonatele coltului stnga-sus ale dreptunghiului iar xd.yd
reprezint coordonatele coltului dreapta-jos ale dreptunghiului). Aceste zone vor
conduce ctre paginile page1.html si page2.html aflate n subdirectorul docs al
directorului n care se afl documentul:

<MAP NAME="map1">
<AREA SHAPE="RECT" COORDS="10,10,20,20" HREF="\docs\page1.html"
ALT="Pagina 1">
<AREA SHAPE="RECT" COORDS="40,10,50,20" HREF="\docs\page2.html"
ALT="Pagina 2">
</MAP>

De obicei marcajele MAP se scriu la sfrsitul documentelor HTML.

Exceptii

Deoarece limbajul HTML foloseste intensiv parantezele unghiulare (< si >)

acestea necesit prelucrri speciale pentru a fi afisate. Limbajul HTML utilizeaz
o sintax special pentru astfel de caractere: &cod; Mnemonicile corespunztoare
celor mai ntlnite caractere sunt:

o < = &lt;
o > = &gt;
o " = &quot;

Dac nu stiti mnemonica pentru un anumit caracter puteti reprezenta acest

caracter cu ajutorul referintei numerice de caracter din codul ISO 8859/1. De
exemplu simbolul de copyright este reprezentat prin codul &#169;. Observati
aparitia caracterului #. Un set complet de reprezentri HTML ale codului ISO
8859/1 se gseste la adresa http://www.shsu.edu/~stdyxc05/symbol.html

O situatie delicat o constituie si includerea de caractere speciale n cadrul

URL-urilor. Acest lucru poate fi necesar cnd adresati un fisier creat de un sistem
Macintosh, aceste sisteme permitand includerea de caractere speciale n cadrul
fisierelor si chiar de spatii albe (blancuri). Introducerea acestor caractere se face
prin introducerea n cadrul URL-ului a codului ASCII corespunz tor caracterului
special precedat de semnul #.
De exemplu dac vrem s adresm un fisier cu numele "My Homepage.html" de
pe serverul www.xxx.com, URL-ul corespunztor va fi introdus astfel
"http://www.xx.com/My%20Homepage" #20 fiind codul hexazecimal
corespunztor caracterului blanc (n zecimal codul corespunztor este 32).

Indexul codurilor de marcare

Elemente obligatorii

<HTML>, </HTML> Declararea documentului ca fiind de

tip HTML

<HEAD>, </HEAD> Delimiteaz antetul documentului

<TITLE>, </TITLE> Delimiteaz titlul documentului

<BODY>, </BODY> Delimiteaz corpul documentului

Titluri, stiluri si marcaje de paragrafe

<Hx>, </Hx> Nivel de subtitlu x (x={0,1...6})

<STRONG>, </STRONG> Caractere aldine

<EM>, </EM> Caractere italice evidentiate

<CODE>, </CODE> Corp de liter fix

<KBD>, </KBD> Intrare de la tastatur

<CITE>, </CITE> Citare (caractere nclinate)

<P>, </P> Inceput de paragraf

<BR> Delimitator de linii

<HR> Linie (rigl) orizontal

Descriptori uniformi de resurse

http Protocol de transfer hipertext

ftp Protocol de transfer de fisiere

gopher Protocol de tip Gopher

telnet Protocol de tip Telnet

news Protocol de tip UseNet News

wais Server informational de zona larga

mailto Posta electronica

Ancore si legaturi

<A HREF="target">Text</A> Ancora de tip hiperlegtura

<A NAME="spot"> Eticheta de marcare

<A HREF="target#spot">Text</A> Hiperlegtura ctre un punct din

document

<A HREF="URL">Text</A> Hiperlegtura ctre URL

Liste

<UL>, </UL> List neordonat (cu marcaje)

<OL>, </OL> List ordonat (numerotat)

<DIR>, </DIR> List de tip director

<MENU>, </MENU> List de tip meniu

<LI>, </LI> Declararea elementelor din list

<DL>, </DL> List de tip dictionar

<DT>, </DT> Termen dintr-o list de tip

dictionar

<DD>, </DD> Definitie a unei liste de tip

dictionar

Text preformatat si tabele

<PRE>, </PRE> Text preformatat

<TABLE>, </TABLE> Declararea tabelului

<TD>, </TD> Date din tabel (celule)

<TH>, </TH> Cap de tabel (linie sau coloan)

<TR> Sfarsit de linie de tabel

<TH/D ALIGN=LEFT/right> Aliniere a capului de tabel/datelor

<TH/D COLSPAN=n> Numrul de coloane pentru capul de
tabel/date

<TH/D ROWSPAN=n> Numrul de linii pentru capul de

tabel/date

<CAPTION> Titlu tabel

Incluziuni de imagini

<IMG SRC="nume"> Include imaginea cu numele selectat

<IMG SRC="nume" ALT="text"> Adaug text n cazul n catre

imaginea nu poate fi

vizualizat

<IMG ALIGN="aliniere"> Seteaz alinierea imaginii

<IMG ... USEMAP="nume"> Imagine selectabila prin clic

<A HREF="URL">><IMG...> Imagine de tip hiperlegtur.

<MAP NAME="nume">, </MAP> Declarare hart imagine

<AREA SHAPE="zona" COORDS="x1,x2..." HREF="URL" ALT="text">

Definire zona activ n imagine

Caractere speciale

&#numr Cod numeric al unui

caracter special

%cod-hexa Cod special n URL.

n acest document nu am putut trata toate caracteristicele limbajului HTML

datorit faptului c anumite marcaje necesita cunostinte avansate si modificri
majore in cadrul serverului Web.

Iat dou adrese unde puteti gsi informatii suplimentare despre HTML:
http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/web-index.html

Contine programe interactive de nvtare pentru HTML, tabele, formulare,

programe cgi-bin, informaii despre controlul accesului si auten tificarea
utilizatorilor.

http://www.w3.org/

Lectii HTML, programe de instruire n domeniul URL-urilor, informatii de

nivel nalt despre HTML, analiza procesului de standardizare a limbajului HTML.