Crearea de pagini Web

Crearea de pagini Web

URL-uri ¤ Editare ¤ Subtitluri ¤ Ancore ¤ Culori ¤ Liste ¤ Tabele ¤ Imagini ¤

Imagini cu hiperlegaturi ¤ 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 comunica prin intermediul retelei de calculatoare. Astfel ori de cate ori deschideti un document Web executati de fapt un acces la un document scris in HTML, o functie JavaScript sau un 'applet' Java, hiperlegaturile, imaginile vizionate sau formularele pe care le completati fiind de fapt produse ale acestor limbaje. Mai mult aceste limbaje sunt complet independente fata de tipul sistemului, care poate fi: PC, Macintosh, statie UNIX

Desi unii numesc HTML 'limbaj de programare' acest lucru nu trebuie sa va sperie deoarece acest limbaj de marcare este simplu si usor de invatat, el nu presupune decat capacitatea utilizarii 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 indispensabila pentru acei care vor sa invete limbajele de programare JavaScript sau Java.

Inainte de a intra in detaliile limbajului este necesara definirea anumitor termeni si explicarea functiei unui server Web. Programele de explorare Web comunica cu serverele Web utilizand protocolul http (HyperText Transfer Protocol - protocol de transfer hipertext Aceste programe trimit mesaje de retea catre servere prin care solicita anumite documente sau servicii iar serverul raspunde prin transmiterea serviciului respectiv (daca este disponibil) utilizand acelasi protocol http. Limbajul HTML reprezinta de fapt o parte din simbolurile care compun protocolul http. Protocolul http, precum si serverele Web si aplicatiile de tip client care il utilizeaza, au fost initial dezvoltate in Elvetia la Laboratorul European pentru Fizica Particulelor (CERN). In Internet exista numeroase protocoale de retea , fiecare fiind dedicat unui anumit scop. Exista protocoale pentru posta electronica ( e-mail ), pentru transfer de fisiere (ftp ), precum si pentru alte tipuri de servicii ( Gopher, Telnet, WAIS ) . Fiecare din aceste protocoale opereaza in mod diferit si are interfete diferite cu utilizatorul, dar http a fost proiectat astfel incat sa inglobeze aceste protocoale intr-unul singur. Astfel prin pozitionarea mouse-ului si printr-un simplu clic pe o hiperlegatura utilizatorul poate trimite un mesaj prin posta electronica, poate transfera un fisier, poate incarca o alta pagina de Web, etc. Comunicatia intre programul de explorare Web, numit si browser WEB (to browse = a rasfoi), si server se realizeaza astfel:

Spre deosebire de documentele create de procesoare de texte care au un format special si contin caractere invizibile de control necesare formatarii (subliniere, aliniere de paragrafe, schimbare de font, introducere imagini etc.), documentele de tip HTML sunt exclusiv de tip text (ASCII) , avand coduri speciale de marcaj necesare formatarii documentului intercalate chiar in text, separate de text prin simbolurile < >.

Cu ajutorul marcajelor, pe langa formatarea obisnuita a textelor, se realizeaza si introducerea de hiperlegaturi. Hiperlegaturile sunt cuvintele si frazele colorate pe care le vedeti in documentele Web, printr-un clic pe o hiperlegatura va puteti deplasa la alte documente Web situate pe serverul local sau la alte documente si servicii Internet (transfer de fisiere, posta electronica). De fapt hiperlegaturile apeleaza documente de pe serverul local sau URL-uri .

Ce sunt URL-urile

URL-urile sau descriptorii uniformi de resurse (Uniform Resource Locators) reprezinta punctul cheie al interpretarii informatiilor din Internet. Acestea sunt un mod standard de descriere atat a locatiei unei resurse Web, cat si a continutului acesteia.

Sintaxa standard a unui URL este : nume_serviciu://gazda_internet:numar_port/resursa

Dupa cum observati exista trei parti distincte in aceasta sintaxa:

numele serviciului , (http,ftp etc.) urmat de caracterul : si de doua bare inclinate (exista doua exceptii in privinta obligativitatii barelor inclinate);

numele gazda internet , precizeaza unde este localizat serviciul respectiv si numarul portului (optional) urmat de o singura bara inclinata;

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:

URL-uri de tip http

Reprezinta documente disponibile pe un server WWW. Iata un exemplu ce reprezinta de fapt pagina gazda a companiei Microsoft : http://www.microsoft.com/

URL-uri de tip ftp (file transfer protocol)

Acestea sunt servicii de tip protocol de transfer de fisiere (ftp) in Internet. Exemplu: ftp:// Observati ca am specificat un nume de fisier, dar se pot specifica si nume de directoare.

URL-uri de tip Telnet

Serviciile de tip Telnet va permit sa va conectati ca utilizator pe un sistem de calcul aflat la distanta si sa utilizati ecranul si tastatura sistemului local ca terminal. Iata un exemplu: telnet://tempus.upit.ro

Observati ca acest URL nu mai respecta sintaxa standard, cuprinzand numai numele serviciului si numele calculatorului gazda.

URL-uri de tip Gopher

Sunt servicii Internet de tip 'gopher' care sunt de tip meniu non-grafic. Exemplu: gopher://gopher. Desi se pare ca a a treia parte a sintaxei standard nu este prezenta, am instruit de fapt browser-ul Web sa realizeze accesul la un nivel superior predefinit al meniului de tip Gopher

URL-uri de tip news (noutati, actualitati)

Aceste URL-uri reprezinta serviciile de stiri UseNet (sau NetNews) care reprezinta 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 reprezentand una din exceptii.

URL-uri de tip WAIS

Serverele care utilizeaza WAIS - server informational de zona larga (Wide Area Information Server) contin baze de date indexate, in care se pot efectua cautari de la distanta, dupa cuvinte cheie. Iata un exemplu de URL de tip WAIS: wais://info.curtin.edu.au:210/k-12-software.

URL-uri de tip mailto

Reprezinta servicii Internet de posta electronica (e-mail). URL-urile de tip mailto sunt disponibile in majoritatea programelor Web si se folosesc de catre utilizatori pentru a trimite mesaje prin posta electronica printr-un simplu clic pe legatura respectiva. Exemplu: mailto:mi@tempus.upit.ro

URL-uri de tip file

Acestea reprezinta 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; avand grija ca atunci cand salvati documentul sa utilizati optiunea Save as si la Save as type sa selectati MS-DOS Text) sau prin folosirea unui editor specializat HTML. Exista si procesoare de texte care convertesc automat textele din formatul specific in format HTML (Word 97) sau programe care modifica aceste procesoare introducand functii in plus pentru usurarea editarii in limbaj HTML (Easyhelp pentru Word 7.0 si Word 6.0).

Editoarele specializate HTML dispun de posibilitati de creeare si reutilizare a marcajelor frecvent utilizate. Marcajele nu sunt afisate in timpul editarii ci sunt selectate din meniuri sau prin activarea unor ideograme, efectele editarii 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 lipsa de timp editoarele specializate, celor care vor sa invete limbajul HTML le recomand folosirea editoarelor de text simple.

Un document HTML poate avea orice denumire, este insa preferabil sa folositi extensia HTML(in cazul documentelor editate in Windows 95 sau UNIX) sau HTM.

Un lucru important este ca prima pagina pe care vreti sa o incarce programul de explorare Web al utilizatorului, in momentul in care acesta a selectat adresa voastra, sa se numeasca index.htm sau index.html, daca pe server e instalat UNIX sau Linux, sau default.htm daca pe server e instalat micr0$0ft Windos NT (very bad choice!). Astfel atunci cand utilizatorul indica URL-ul : http://www.nume_server.com, programul Web va cauta pagina http://www.nume_server.com/index.htm, daca aceasta pagina nu este gasita va fi afisata structura directoarelor din calea specificata (http://www.nume_server.com/), ceea ce nu este de preferat.

In cazul marcajelor interpretorul HTML nu diferentiaza 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 reprezinta de fapt textul aflat intre perechi de forma < > . Orice document HTML trebuie sa inceapa cu marcajul <HTML> si sa se termine cu marcajul </HTML> (observati caracterul '/' - reprezinta sfarsitul unui marcaj). Exemplu:

<HTML>

Document HTML

</HTML>

Atentie!

Daca ati deschis mai multe marcaje acestea se inchid obligatoriu in sensul invers deschiderii lor, astfel incat acestea sa fie imbricate.

Documentele HTML sunt impartite in doua sectiuni: antetul (HEAD) si corpul (BODY). Aceasta delimitare s-a facut pentru interpretarea corecta a programelor si pentru programele de indexare WWW care preiau cuvintele din antetele diferitelor documente pentru formarea de liste index. Antetul trebuie sa contina neaparat marcajul <TITLE> in interiorul caruia se scrie de fapt titlul care va fi afisat de programul de explorare Web. Iata deci cum arata '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=. x reprezinta de fapt nivelul subtitlului (nu uitati la sfarsitul 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 urmatoarea: <H3>Pitesti</H3>

In limbajul HTML alinierea implicita a textelor este la stanga, dar putem selecta si aliniere la centru <CENTER>(foarte folositoare in cazul titlurilor) sau la dreapta cu ajutorul marcajului <RIGHT> Cand creati un document HTML puteti controla anumite proprietati 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 sa nu fie in masura sa redea toate stilurile de afisare si formatare a caracterelor (exista si calculatoare fara placi grafice care au instalate browsere corespunzatoare si redau documentele internet numai in mod alfanumeric) s-au introdus, pe langa marcajele fizice, marcajele logice. Aceste marcaje sunt citite de browser si sunt interpretate conform posibilitatilor browser-ului respectiv, de aceea este indicat ca in majoritatea cazurilor sa se foloseasca marcaje logice.

Semnificatie Marcaj logic Marcaj fizic

Caractere aldine(bold) STRONG B

Caractere italice EM IT

Corp de litera fix CODE TT

Intrare de la tastatura KBD TT

Citare  CITE Nu e disponibila

Deoarece programele Web care ruleaza pe diverse calculatoare cu diverse posibilitati grafice redau documentele in mod diferit, in standard HTML s-a introdus codul de marcaj <P> pentru semnalarea unui paragraf nou. Efectul acestui marcaj este aparitia unei linii vide intre portiunea de document anterioara marcajului si ceea care urmeaza, insa mai multe astfel de marcaje consecutive sunt ignorate si nu au ca efect adaugarea de linii vide suplimentare. Marcajul de inchidere </P> este optional. Alt tip de delimitator este marcajul <P> care are ca efect trecerea la o linie noua fara a insera o linie vida. Prin definitie si alte marcaje au ca efect trecerea la o linie noua (subtitlurile, listele, textele preformatate).

Uneori este util sa separati vizual portiunile din documentul HTML, prin intermediul unei linii (rigle). Acest lucru este realizat cu mar cajul &gtHR<(horizontal rule). Acest marcaj traseaza pur si simplu o linie orizontala de-a lungul ferestrei programului de explorare, ca in exemplul de mai jos.

Observati ca nu exista marcaj de inchidere ; acest marcaj este numit, in mod normal, un marcaj vid, ceea ce inseamna ca nu poate inc lude nimic.

Utilizarea ancorelor si a hiperlegaturilor

Hiperlegaturile sunt de fapt cuvintele sau frazele evidentiate din documentele HTML pe care daca efectuati clic va deplasati la alte documente Web, sau apelati alte servicii Internet. Hiperlegaturile se bazeaza pe marcajul de tip ancora care are sintaxa standard urmatoare:

<A Comanda = 'tinta' > <text evidentiat /A>

Comenzile pot fi hiperlegaturi sau marcaje plasate in document. Astfel sintaxa <A HREF = 'tinta' > arata faptul ca tinta este o legatura catre un URL din Internet (URL absolut), in timp ce <A NAME = 'tinta' > arata faptul ca tinta este o legatura catre un document aflat pe serverul local (URL relativ) sau catre o anumita zona din acel document. Textul evidentiat este cuvantul sau fraza care apare in pagina, la efectuarea unui clic pe acesta efectuandu-se serviciul dorit (tinta).

Cele mai simple legaturi sunt cele catre documente locale, adica catre documente aflate pe acelasi calculator. De exemplu daca aveti doua fisiere HTML in acelasi director 1.htm si 2.htm si doriti apelarea celui de-ale doilea document din primul printr-o legatura, secventa sursa HTML a primului document prin care se face apelarea celui de-al doilea va fi urmatoarea:

<A HREF='2.htm'>Documentul 2 </A >.

Pe ecran va apare textul 'Documentul 2' evidentiat fata de celelalte caractere si subliniat.

In cazul in care documentul tinta este in alt director se modifica partea-tinta a marcajului de tip ancora. De exemplu daca documentul '2.htm' se afla in subdirectorul 'dir2' atunci tinta va deveni 'dir2/2.htm'. Observati folosirea liniei inclinate spre dreapta nu a celei spre stanga.

Legaturi catre pozitii specifice dintr-un anumit document se realizeaza tot cu ajutorul ancorelor folosind comanda NAME, marcajul ancora fiind in acest caz <A NAME='zona' /A >

Acest marcaj se comporta ca o eticheta, partea de document care va urma aceasta eticheta putand fi apelata din alt document astfel (presupunem ca documentul in care se afla eticheta 'zona' se numeste '2.htm'):

<A HREF='2.htm#zona'>Apel la d2.htm, partea dupa ancora zona</A > ('Apel la ' este textul care va aparea subliniat si evidentiat in d1.htm).

In multe pagini HTML se folosesc deplasarile catre zone specifice din acelasi document. In acest marcajul ancora va fi definit ca la exemplul anterior dar tinta hiperlegaturii nu va contine nici un nume de document ci doar caracterul # urmat de numele etichetei (in cazul nostru '#zona').

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 in site-ul companiei Netscape Communications.

Selectarea culorilor

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

Pentru setarea culorilor pentru documentul HTML se folosesc urmatoarele atribute in cadrul marcajului &ltBODY>:

BGCOLOR (background color) selecteaza culoarea de fond

TEXT selecteaza culoarea cu care vor fi afisate caracterele

VLINK (visited link) selecteaza culoarea cu care se vor afisa legaturile vizitate

LINK (active link) selecteaza culoarea corespunzatoare link-urilor din document

Setarea culorii se poate face in doua moduri:

prin folosirea numelui corespunzator celor 16 culori predefinite. Acestea sunt:

Deoarece culorile se exprima prin atribute, acestea vor fi incadrate de ghilimele. De exemplu pentru selectarea fondului imaginii rosu si a culorii textului galben se foloseste secventa

<BODY BGCOLOR='RED' TEXT='YELLOW'>.

prin atribuirea codului RGB corespunzator culorii. Acest cod este precedat de semnul # si se exprima in cod hexazecimal prin 6 cifre: primele doua corespund concentratiei de rosu, urmatoarele doua corespund concentratiei de verde si ultimele doua pt. concentratia de albastru.

Exemplu: Selectarea culorii galben (cod hexazecimal corespunzator #FF00FF) pentru linkurile vizitate:

<BODY VLINK='#FF00FF'>.

Crearea listelor

In limbajul HTML intalnim urmatoarele tipuri de liste:

Liste marcate numite si liste neordonate

Liste numerotate secvential numite si liste ordonate

Liste multi-coloana de tip director

Liste de tip glosar

Liste de tip meniu

Listele marcate (neordonate) scot in evidenta fiecare marcaj component prin adaugarea unui marcaj tipografic (bullet) sau a altui semn distinctiv (la fel ca in lista de mai sus). Codul de marcare pentru o lista neordonata este <UL > (unordered list) urmat de marcajul generic <LI> (list item). In timp ce marcajul de sfarsit de lista este obligatoriu, marcajul </LI> este optional deoarece fiecare marcaj de inceput de termen al listei <LI> poate fi privit ca un sfarsit logic al marcajului anterior.

Listele numerotate va permit numerotarea fiecarui element din lista. Marcajul corespunzator este <OL> (ordered list), pentru marcarea unui termen nou fiind folosit acelasi marcaj <LI>.

Listele de tip director permit afisarea elementelor pe orizontala, la fel ca in cartea de telefon. Marcajul folosit pentru aceasta lista este <DIR>. Trebuie sa tine-ti cont de faptul ca unele browser-e Web nu recunosc acest mod de lista.

Listele de tip meniu sunt liste simple, au acelasi format cu al celor neordonate numai ca le lipseste marcajul tipografic. Marcajul folosit in acest caz este <MENU>

Listele de tip glosar permit includerea unei descrieri pentru fiecare element din lista. Marcajul corespunzator acestei liste este <DL> iar pentru formatarea acestei liste se folosesc alte doua marcaje :<DT> pentru marcarea descrierii si <DD> pentru marcarea elementului din lista.

Liste imbricate se pot creea din mai multe liste de acelasi fel sau din liste diferite. Trebuie insa sa fiti foarte atenti cand deschideti o lista in interiorul alteia la marcajele de inchidere ale listei precedente.

Crearea textelor preformatate si a tabelelor

Preformatarea textelor este utila atunci cand doriti sa introduceti mai multe spatii intre cuvinte sau doriti o anumita aranjare a textului indiferent de programul de explorare Web care incarca pagina. Pentru aceasta se foloseste marcajul <PRE>(preformat).

Atunci cand lucrati cu texte preformatate nu este indicat sa folositi caractere de tabulare (Tab) deoarece s-ar putea ca unele programe Web sa aloce mai putine sau mai multe spatii albe pentru un caracter Tab decat programul vostru. Marcajul <PRE> poate fi folosit cu atributul optional WIDTH care stabileste latimea textului preformatat.

In limbajul HTML marcajul <TABLE> este corespunzator tabelelor. Elementele unui tabel se descriu cu ajutorul a trei marcaje principale: <TH> (table head) pentru antet (cap de tabel), <TR> (tabel return) pentru sfarsitul unei linii din tabel si <TD> (table data) pentru informatia cuprinsa in celulele tabelului. Diferenta dintre marcajul <TD> si <TH> este ca textele care au marcajul <TH> vor aparea mai ingrosat.

Cu ajutorul unor atribute specifice tabelelor puteti controla alinierea in interiorul casutelor si latimea si inaltimea acestora.

Textul din celulele tabelelor au alinierea implicita la centru, dar puteti controla alinierea textului cu atributul ALIGN. Astfel pentru aliniere la dreapta se foloseste <TH ALIGN='RIGHT'> iar pentru aliniere la stanga se foloseste <TH ALIGN='LEFT'> . Observati ca atributele trebuie incadrate intre ghilimele.

Controlul latimii coloanelor liniilor si a coloanelor se realizeaza cu atributele COLSPAN si ROWSPAN. De exemplu marcajul <TD COLSPAN=4> creeaza o celula cu o latime de patru coloane iar marcajul <TH rowspan='3>' creeaza un antet de tabel cu o inaltime de trei linii.

Incadrarea tabelului se face cu atributul BORDER in cadrul marcajului <TABLE> Pentru a creea un tabel incadrat trebuie sa incepeti descrierea cu <TABLE BORDER=x> unde x reprezinta grosimea bordurii tabelului.

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

Atentie!

marcajele <TH>, <TD>, <TR> si <CAPTION> sunt permise numai in cadrul unui marcaj <TABLE>

programele de explorare Web mai vechi nu interpreteaza tabelele sau unele marcaje (sau atribute) ale acestora.

Introducerea imaginilor in documente HTML

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

imagini de tip GIF (Graphic Interchange Format);

imagini de tip JPEG (Joint Photographic Experts Group) - nu sunt recunoscute de programele de explorare Web mai vechi;

imagini din X-Windows (uzuale in sisteme UNIX): XBM (X-Bitmap) si XPM (X-Pixelmap)

Este recomandabil sa folositi imaginile de tip JPEG care au un coeficient de compresie foarte bun ceea ce reduce marimea fisierului si implicit timpul de incarcare al imaginii.

O imagine se poate introduce in interiorul paginii prin codul de marcare <IMG>. Presupunand ca imaginea pe care vreti sa o introduceti se numeste 'star.jpg', codul minimal de includere al imaginii este: <IMG SRC='star.jpg'>. Am presupus ca imaginea 'star.jpg' se afla in directorul in care se afla si documentul HTML. Daca imaginea se afla intr-un subdirector 'imagini' al acestui director, codul va fi <IMG SRC='imagini/star.jpg'> (observati folosirea barii slash). In cadrul unui marcaj <IMG> atributul SRC este obligatoriu deoarece identifica imaginea. Marcajul <IMG> mai are trei atribute care sunt optionale:

ALT. Specifica un text alternativ in cazul in care imaginea nu poate fi vizualizata

ALIGN. Specifica alinierea imaginii in pagina.

USEMAP Specifica faptul ca imaginea contine zone care au atribuite mai multe hiperlegaturi

Asignarea unui text alternativ unei imagini se face cu ajutorul atributului ALT. Este recomandat sa se foloseasca acest atribut deoarece exista programe WEB mai vechi care nu au interfata grafica sau sisteme care sunt concepute in format alfanumeric si nu pot afisa imagini sau exista situatii in care utilizatorul a setat browser-ul sa nu incarce imaginile. In aceste cazuri in locul imaginii va apare textul specificat de atributul ALT, daca nu exista 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 corespunzator atributului ALT se introduce intre paranteze patrate.

Cu ajutorul atributului ALIGN se poate controla alinierea pe verticala a imaginii fata de linia de text in care va apare. In absenta acestui atribut imaginile sunt afisate cu partea inferioara la partea inferioara a liniei de text. Utilizarea atributului ALIGN='midle' va afisa imaginii cu mijlocul in dreptul mijlocului liniei de text iar utilizarea atributului ALIGN='top' va afisa imaginea cu partea superioara la partea superioara a liniei de text.

Atributul USEMAP va fi explicat aparte in cadrul subtitlului 'Crearea de imagini care contin mai multe hiperlegaturi'.

O metoda des intalnita in paginile Web este transformarea imaginilor in hiperlegaturi ce conduc la servicii din WWW, la documente de pe calculatorul local sau la o anumita secventa din aceeasi pagina. Aceasta se realizeaza prin plasarea marcajului <IMG> in interiorul ancorei astfel: <A HREF='http://www.netscape.com><IMG ALT='Netscape' SRC='netscape.gif'>Netscape Navigator</A></IMG>

Aceasta secventa realizeaza o hiperlegatura catre site-ul Web al companiei Netscape Communications, pe ecran va apare imaginea Netscape.gif aflata pe calculatorul local (daca aceasta imagine nu se poate incarca apare descrierea alternativa a imaginii 'Netscape'), clicul putandu-se efectua pe imagine sau pe textul urmat de aceasta 'Netscape Navigator' care va fi evidentiat si subliniat. Observati deci ca o hiperlegatura poate contine si o imagine urmata, precedata sau incadrata de texte.

O alta metoda referitoare la imagini este definirea unei hiperlegaturi prin intermediul unei imagini mult mai mici decat imaginea normala (numita thumbnail=unghie de deget), astfel incat la activarea hiperlegaturii respectiva sa se incarce imaginea normala. Acest lucru este foarte folositor deoarece se micsoreaza timpul de incarcare al paginii si utilizatorul poate vizualiza numai imaginile care il intereseaza. Exemplu: <A HREF='bigstars.jpg'> <IMG ALT='Stele' SRC='littstar.jpg'> </A>

Crearea de imagini care sa contina mai multe hiperlegaturi

Poate ca ati intalnit in unele pagini Web imagini care au incluse hiperlegaturi, astfel incat va puteti deplasa la URL-uri diferite, functie de pozitia din imagine in care efectuati clic. Asa cum am aratat anterior acest lucru se face cu ajutorul atributului USEMAP din cadrul marcajului IMG.

Spre deosebire de exemplul anterior, in acest caz marcajul nu va contine o referinta, in schimb apare atributul USEMAP care declara numel e hartii corespunzatoare imaginii, in aceasta harta fiind definite zonele active ale imaginii. Iata un exemplu de marcaj pentru declararea unei imagini selectabile prin clic:

<IMG SRC='imgh.gif' USEMAP='#map1'>

In cadrul marcajul MAP se definesc zonele active ale unei imaginii. Atributul NAME din cadrul acestui marcaj arata numele imaginii ce contine zonele active. Zonele active se definesc cu ajutorul marcajului AREA care are urmatoarea sintaxa:

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

Numarul de coordonate definite in cadrul atributului COORDS difera in functie de zona. Tipurile de zone active pot fi:

dreptunghiuri - zona=rect , x1,x2,x3,x4 = coordonatele coltului din stanga sus si al celui din dreapta-jos al dreptunghiului

cercuri - zona=circle , x1,x2,x3 = coordonatele (x,y) corespunzatoare centrului cercului si raza

poligoane neregulate - x1,,x2,x3,x4, = coordonatele (x,y) corespunzatoare fiecarui colt al poligonului

In continuare voi prezenta un exemplu de folosire a marcajelor MAP si AREA, in care am definit doua 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 reprezinta coordonatele coltului stanga-sus ale dreptunghiului iar xd.yd reprezinta coordonatele coltului dreapta-jos ale dreptunghiului). Aceste zone vor conduce catre paginile page1.html si page2.html aflate in subdirectorul docs al directorului in care se afla documentul:

<MAP NAME='map1'>

<AREA SHAPE='RECT' COORDS='10,10,20,20' HREF='docspage1.html' ALT='Pagina 1'>

<AREA SHAPE='RECT' COORDS='40,10,50,20' HREF='docspage2.html' ALT='Pagina 2'>

</MAP>

De obicei marcajele MAP se scriu la sfarsitul documentelor HTML.

Exceptii

Deoarece limbajul HTML foloseste intensiv parantezele unghiulare (< si >) acestea necesita prelucrari speciale pentru a fi afisate. Limbajul HTML utilizeaza o sintaxa speciala pentru astfel de caractere: &cod; Mnemonicile corespunzatoare celor mai intalnite caractere sunt:

< = &lt;

> = &gt;

&quot;

Daca 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 reprezentari HTML ale codului ISO 8859/1 se gaseste la adresa http://www.shsu.edu/~stdyxc05/symbol.html

O situatie delicata o constituie si includerea de caractere speciale in cadrul URL-urilor. Acest lucru poate fi necesar cand adresati un fisier creat de un sistem Macintosh, aceste sisteme permitand includerea de caractere speciale in cadrul fisierelor si chiar de spatii albe (blancuri). Introducerea acestor caractere se face prin introducerea in cadrul URL-ului a codului ASCII corespunz a tor caracterului special precedat de semnul #.

De exemplu daca vrem sa adresam un fisier cu numele 'My Homepage.html' de pe serverul www.xxx.com, URL-ul corespunzator va fi introdus astfel 'http://www.xx.com/My%20Homepage' #20 fiind codul hexazecimal corespunzator caracterului blanc (in zecimal codul corespunzator este 32).

Indexul codurilor de marcare

Elemente obligatorii

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

<HEAD>, </HEAD>Delimiteaza antetul documentului

<TITLE>, </TITLE> Delimiteaza titlul documentului

<BODY>, </BODY>Delimiteaza corpul documentului

Titluri, stiluri si marcaje de paragrafe

<Hx>, </Hx>Nivel de subtitlu x (x=)

<STRONG>, </STRONG>Caractere aldine

<EM>, </EM>Caractere italice evidentiate

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

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

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

<P>, </P> Inceput de paragraf

<BR>   Delimitator de linii

<HR>   Linie (rigla) orizontala

Descriptori uniformi de resurse

http Protocol de transfer hipertext

ftpProtocol 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 hiperlegatura

<A NAME='spot'>Eticheta de marcare

<A HREF='target#spot'>Text</A> Hiperlegatura catre un punct din document

<A HREF='URL'>Text</A> Hiperlegatura catre URL

Liste

<UL>, </UL>Lista neordonata (cu marcaje)

<OL>, </OL>Lista ordonata (numerotata)

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

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

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

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

<DT>, </DT>Termen dintr-o lista 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 coloana)

<TR>   Sfarsit de linie de tabel

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

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

<TH/D rowspan='n>   Numarul 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'>Adauga text in cazul in catre imaginea nu poate fi

vizualizata

<IMG ALIGN='aliniere'> Seteaza alinierea imaginii

<IMG USEMAP='nume'>Imagine selectabila prin clic

<A HREF='URL'>><IMG>Imagine de tip hiperlegatura.

<MAP NAME='nume'>, </MAP>  Declarare harta imagine

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

Definire zona activa in imagine

Caractere speciale

&#numar Cod numeric al unui caracter special

%cod-hexaCod special in URL.

In acest document nu am putut trata toate caracteristicele limbajului HTML datorita faptului ca anumite marcaje necesita cunostinte avansate si modificari majore in cadrul serverului Web.

Iata doua adrese unde puteti gasi informatii suplimentare despre HTML:

http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/web-index.html

Contine programe interactive de invatare pentru HTML, tabele, formulare, programe cgi-bin, informatii despre controlul accesului si auten tificarea utilizatorilor.

http://www.w3.org/

Lectii HTML, programe de instruire in domeniul URL-urilor, informatii de nivel inalt despre HTML, analiza procesului de standardizare a limbajului HTML.