Limbajul HTML

1. Ce este HTML ?

Unul din primele elemente fundamentale ale WWW ( World Wide Web ) este HTML ( Hypertext Markup Language ),
care descrie formatul primar in care documentele sint distribuite si vazute pe Web. Multe din trasaturile lui, cum ar fi
independenta fata de platforma, structurarea formatarii si legaturile hipertext, fac din el un foarte bun format pentru
documentele Internet si Web.
Primele specificatiile de baza ale Web-ului au fost HTML, HTTP si URL.
HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. HTML a fost vazut ca o posibilitate pentru fizicienii
care utilizeaza computere diferite si schimbe intre ei informatie utilizind Internetul. Erau prin urmare necesare citeva
trasaturi : independenta de platforma, posibilitati hypertext si structurarea documentelor.Independenta de platforma
inseamna ca un document poate fi afisat in mod asemanator de computere diferite ( deci cu fonte, grafica si culori
diferite ), lucru vital pentru o audienta atit de variata.

Hipertext inseamna ca orice cuvint, fraza, imagine sau alt element al documentului vazut de un utilizator ( client ) poate
face referinta la un alt document, ceea ce usureaza mult navigarea intre multiple documente sau chiar in interiorul unui
aceluiasi document. sStructurarea riguroasa a documentelor permite convertirea acestora dintr-un format in altul
precum si interogarea unor baze de date formate din aceste documente.

SGML si HTML

Tim Berners-Lee a utilizat ca model SGML ( Standard Generalized Markup Language ), un standard international in
plina dezvoltare. SGML avea avantajul unei structurari avansate si al independentei de platforma dar proiectarea lui a
avut in vedere mai mult structura semantica a documentului decit modul de formatare. Flexibil, SGML putea fi descris
ca o specificare pentru descrierea altor formate. Utilizatorii puteau crea noi formate (DTD, Document Type Definitions)
care puteau fi intelese de orice produs soft SGML pur si simplu prin citirea mai intai a definitiilor noilor formate.

HTML este pur si simplu un DTD, deci o aplicatie a SGML. In primii ani de evolutie HTML a crescut lent, in principal
pentru ca ii lipseau posibilitatile de a descrie publicatii electronice profesionale; limbajul permitea oarece control asupra
fontelor dar nu permitea inserarea graficii. In 1933, NCSA a imbogatit limbajul pentru a permite inserarea graficii si au
construit primul navigator grafic, Mosaic. Au urmat apoi contributii ad hoc ale diverselor firme care au adus adaugiri
limbajului HTML (adaugiri si nu imbogatiri pentru ca unele taguri nu erau in conformitate cu principiile generale ale
SGML) astfel incat, prin 1994 limbajul parea scapat de sub control. Urmarea a fost ca la prima conferinta WWW din
Geneva ( Elvetia ) s-a constituit un grup ( HTML Working Group ) a carui prima misiune a fost formalizarea HTML intr-
un DTD al SGML, lucru care s-a concretizat in HTML Level 2 ( sau HTML 2.0; Nivelul 1, deci HTML 1.0, a fost proiectat
de Tim Berners-Lee ). Importanta actiunii acestui grup consta in faptul ca, odata standardizat, limbajul poate fi apoi
extins intr-un mod mai controlat la alte nivele.

Standardul oficial HTML este World Wide Web Consortium (W3C), care este afiliat la Internet Engineering Task Force
(IETF). W3C a enuntat cateva versiuni ale specificatiei HTML, printre care si HTML 2.0, HTML 3.0,HTML 3.2, HTML 4.0
si, cel mai recent, HTML 4.01. In acelasi timp, autorii de browsere, cum ar fi Netscape si Microsoft, au dezvoltat adesea
propriile "extensii" HTML in afara procesului standard si le-au incorporat in browserele lor. In unele cazuri, cum ar fi
tagul Netscape , aceste extensii au devenit standarde de facto adoptate de autorii de browsere.

HTML 2.0, elaborat in Iunie 1994, este standardul pe care ar trebui sa-l suporte toate browserele curente -- inclusiv cele
mod text. HTML 2.0 reflecta conceptia originala a HTML ca un limbaj de marcare independent de obiectele existente
pentru asezarea lor in pagina, in loc de a specfica exact cum ar trebui sa arate acestea. Daca doriti sa fiti siguri ca toti
vizitatorii vor vedea paginile asa cum trebuie, folositi tagurile HTML 2.0.

Specificatia HTML 3.0, Enuntata in 1995, a incercat sa dezvolte HTML 2.0 prin adaugarea unor facilitati precum tabelele
si un mai mare control asupra textului din jurul imaginilor. Desi unele din noutatile HTML 3.0 erau deja folosite de autorii
de browsere, multe nu erau inca. In unele cazuri, taguri asemanatoare implementate de autorii de browsere au devenit
mai raspandite decat tagurile "oficiale". Specificatia HTML 3.0 acum a expirat, deci nu mai este un standard oficial.
In Mai 1996, W3C a scos pe piata specificatia HTML 3.2 , care era proiectata sa reflecte si sa standardizeze practicile
acceptate la scara larga. Deci, HTML 3.2 include tagurile HTML 3.0 ce erau adoptate de autorii de browsere ca
Netscape si Microsoft plus extensii HTML raspandite. In Bilantul asupra HTML, W3C recomanda ca providerii de
informatii sa utilizeze specificatia HTML 3.2.Versiunile curente ale majoritatii browserelor ar trebui sa suporte toate, sau
aproape toate aceste taguri.

De asemenea exista extensii Netscape si Microsoft care nu fac parte din specificatia HTML 3.2, ori pentru ca sunt mai
putin utilizate, ori au fost omologate dupa aparitia HTML 3.2. Pentru ca navigatorul Netscape a fost printre primele
browsere care suporta anumite taguri HTML 3.0, iar Netscape detine in jur de 70% din piata de browsere, multi au
crezut eronat ca toate extensiile Netscape (incluzand taguri ca <BLINK> si facilitati ca ferestrele) fac parte din HTML
3.0 sau HTML 3.2.

La momentul aparitiei acestui tutorial, HTML 4.0 este larg utilizat si au fost deja publicate specificatiile HTML 4.01.

Documentele HTML sint documente in format ASCII si prin urmare pot fi create cu orice editor de texte. Au fost insa
dezvoltate editoare specializate care permit editarea intr-un fel de WYSIWYG desi nu se poate vorbi de WYSIWYG atita
vreme cit navigatoarele afiseaza acelasi document oarecum diferit, in functie de platforma pe care ruleaza. Au fost de
asemenea dezvoltate convertoare care permit formatarea HTML a documentelor generate ( si formatate ) cu alte
editoare. Evident conversiile nu pot patra decit partial formatarile anterioare deoarece limbajul HTML este inca
incomplet.

2. Primii pasi

Orice document HTML incepe cu notatia <html> si se termina cu notatia </html>. Aceste "chestii" se numesc in
literatura de specialitate "TAG-uri".Prin conventie, toate informatiile HTML incep cu o paranteza unghiulara deschisa "<"
si se termina cu o paranteza unghiulara inchisa ">".
Tag-urile intre aceste paranteze transmit comenzi catre browser pentru a afisa pagina intr-un anumit mod. Unele blocuri
prezinta delimitator de sfarsit de bloc, in timp ce pentru alte blocuri acest delimitator este optional sau chiar interzis.

Intre cele doua marcaje <html> si </html> vom introduce doua sectiuni:
-sectiunea de antet <head>...</head> si - corpul documentului <body>...</body>. Blocul <body>...</body> cuprinde
continutul propriu-zis al paginii HTML, adica ceea ce va fi afisat in ferastra browser-ului.

O eticheta poate fi scris atat cu litere mici, cat si cu litere mari.

Adica <HTML> = <HtmL> = <html>. Caracterele "spatiu" si "CR/LF" ce apar intre etichete sunt ignorate de catre
browser.
Deci un prim document HTML ar fi ceva de genul asta:

<html>
 <head> </head>
 <body>
 </body>
</html>

Asa arata primul document HTML. Copiati-l folosind Copy/Paste intr-un fisier nou si salvati-l ca PRIM.HTM sau
PRIM.HTML. Apoi porniti Mozilla Firefox sau Internet Explorer, dati CTRL-O si introduceti calea spre fisier. Dati OK si ...
nimic.

Sa nu disperam ... vom adauga primele elemente la pagina noastra. In primul rand, titlul unei pagini se obtine inserand
in sectiunea <head>...</head> a urmatoarei linii:

<title>Aceasta este prima mea pagina de Web</title>

In plus, in sectiunea <body>...</body> putem scrie texte cat dorim. Daca nu intalnim nici un marcaj < sau > atunci
interpretorul HTML le va lua ca texte simple si le va afisa pe ecran. Sa vedem o noua versiune a paginii noastre:
<html>
  <head>
  <title>Aceasta este prima mea pagina de Web</title>
  </head>
  <body>
     Bine ati venit in pagina mea de Web!
  </body>
</html>

Continutul blocului <title>...</title> va aparea in bara de titlu a ferestrei browser-ului.

Daca acest bloc lipseste intr-o pagina HTML, atunci in bara de titlu a ferstrei browser-ului va aparea numele fisierului.

Daca introducem mai multe linii intr-o pagina browser-ul va afisa intr-un singur rand, intrucat caracterele " CR/LF " sunt
ignorate de browser. Trecerea pe o linie noua se face la o comanda explicita, care trebuie sa apara in pagina html.
Aceasta comanda este marcajul <br> ( de la " line break " - intrerupere de linie ).

Folosind aceleasi operatii ca mai sus, vizualizati noua pagina! Veti vedea textul ce apare in fereastra navigatorului. In
plus, pagina dvs. va avea un titlu nou, cel introdus de dvs.

<html>
<head>
<title> titlul paginii</title>
</head>
<body>
Bine ati venit in <br> pagina mea de Web!
</body>
</html>

Blocuri preformatate

Pentru ca browser-ul sa interpreteze corect caracterele " spatiu ", " tab " si " CR/LF " ce apar in cadrul unui text, acest
text trebuie inclus intr-un bloc <pre>...</pre>.

<html>
<head>
<title>bloc preformatat </title>
</head>
<body><pre>
    Prima linie
        A doua linie
            A treia linie
</pre></body>
</html>

Culoarea de fond

O culoare poate fi precizata in doua moduri:

 Printr-un nume de culoare.Sunt disponibile cel putin 16 nume de culori: aqua, black, fuchsia, gray, green lime,
maroon, navy, olive, purple, red, silver, teal, white si yellow.
 Prin constructia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre hexazecimale si pot lua valorile: 0, 1,
2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot defini astfel 65536 de culori.

Culoarea unei pagini se precizeaza prin intermediul unui atribut al etichetei <body>.
Culoarea fondului paginii Web se stabileste cu atributul bgcolor al etichetei <body>, de exemplu: <body bgcolor =
culoare>.
Urmatorul exemplu realizeaza o pagina cu fondul de culoare gri.
<html>
<head>
<title>culoare de fond </title>
</head>
<body bgcolor=gray>
O pagina Web cu fondul GRI!
</body>
</html>

<html>
<head>
<title>pagina mea web_nume </title>
</head>
<body>
Bine ati venit in <br>pagina mea de Web!
<pre>
    Prima linie
        A doua linie
            A treia linie
</pre>
<body bgcolor=cyan>
O pagina Web cu fondul CYAN
</body>
</html>

Alte culori: pink, red, blue, green, yellow, turquiose sau #00ff33, #ffffcc,

\Culoarea textului

Acest lucru se face prin intermediul atributului text al etichetei <body> dupa sintaxa <body text=culoare>. In urmatorul
exemplu textul are culorea rosie.

<html>
<head>
<title>culoare textului </title>
</head>
<body text=red>
Un text de culoare rosie.
</body>
</html>

O eticheta poate avea mai multe atribute.De exemplu , o eticheta cu trei atribute arata astfel: <eticheta atribut1 =
valoare1 atribut2 = valoare2 atribut3 = valoare3>. Urmatorul exemplu prezinta o pagina cu fondul de culoare albastra si
textul de culoare galbena.

<html>
<head>
<title>atribute multiple </title>
</head>
<body bgcolor=blue text=yellow>
Fond de culoare albastra si text de culoare galbena.
</body>
</html>

Textul afisat este caracterizat de urmatoarele atribute: Marime ( size), Culoare (color), Font (style).
Acestea sunt atribute ale etichetei <basefont>.Este o eticheta singulara (fara delimitator de sfarsit de bloc).

<basefont size = numar color = culoare style = font>

unde:
  numar - poate fi 1, 2, 3, 4, 5, 6 sau 7; (1 pentru fontul cel mai mic si 7 pentru fontul cel mai mare);
 culoare - este o culoare precizata prin nume sau printr-o constructie RGB;
 font - poate fi un font generic ca " serif ", " san serif ", " cursive ", " monospace ", "fantasy " sau un font specific
instalat pe calculatorului clientului, ca " Times New Roman ", " Helvetica " sau " Arial ".Se accepta ca valoare si
o lista de fonturi separate prin virgula, de exemplu:
" Times New Roman, serif,monospace ".

Domeniul de valabilitate al caracteristicelor precizate de aceasta eticheta se intinde de la locul in care apare eticheta
pana la sfarsitul paginii sau pana la urmataorea eticheta <basefont>.
Daca acest atribut lipseste atunci textul din pagina Web are atribute prestabilite sau atribute precizate de browserul
utilizat.
Atributele prestabilite sunt: size = 3, color = black, si style = " Times New Roman " .

Pozitionarea continutului paginii Web fata de marginile ferestrei browserului se poate face cu ajutorul a doua atribute ale
etichetei <body>:

 leftmargin (stabileste distanta dintre marginea stanga a ferstrei browserului si marginea stanga a continutului
paginii);
 topmargin (stabileste distanta dintre marginea de sus a ferstrei browserului si marginea de sus a continutului
paginii);

<html>
<head>
<title>Configurarea textului si stabilirea marginii </title>
</head>
<body leftmargin="100" topmargin="50">
Textul are atribute implicite. <br><basefont style="Arial" color="blue" size="6">
Textul este scris cu fontul "Arial", culoare albastru si marime 6. </body>
</html>

Stiluri pentru blocurile de text

Pentru ca un bloc de text sa apara in pagina evidentiat (cu caractere aldine), trebuie inclus intre delimitatorii <b>...</b>
(b vine de la "bold" = indraznet).
Pentru ca un text sa fie scris cu carcatere mai mari cu o unitate decat cele curente acesta trebuie inclus intr-un bloc
delimitat de etichetele <big>...</big>.
Pentru ca un text sa fie scris cu carcatere mai mici cu o unitate decat cele curente acesta trebuie inclus intr-un bloc
delimitat de etichetele <small>...</small>.
Pentru ca un text sa fie scris cu carcatere cursive acesta trebuie inclus intr-un bloc delimitat de etichetele <i>...</i> (i
vine de la " italic ").

Pentru a insera secvente de text aliniate ca indice (sub-script) sau ca exponent (super-script) , aceste fragmente trebuie
delimitate de etichetele _..., respectiv ^....
Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele <u>...</u> (u vine de la " underline ").
Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele <strike>...</strike> sau <s>...</s>.

In exemplul urmator vom utiliza toate etichetele mentionate anterior.

<html>
<head>
<title>Stiluri pentru blocuri de text </title>
</head>
<body>
<b>Text scris cu caractere ingrosate.</b>
<br> <big>Text cu caractere marite cu o unitate <big>mai mare<big> si mai mare<big> si mai
mare.</big></big></big></big><br>
<small>Textul este scris cu caractere micsorate cu o unitate <small>mai mic.</small></small><br>
<i>Text scris cu caractere italice.</i>
<br> In aceasta linie ^sus este superscript iar _jos este subscirpt.<br>
<strike>Aceasta linie este in intregime sectionata de o linie orizontala. </strike> <br>
In aceasta linie urmatorul cuvant este <u>subliniat</u>, iar cuvantul <s>strike</s> sectoinat.
</body>
</html>

Stiluri fizice si logice

Am prezentat deja 8 stiluri de scriere a caracterelor unui bloc de text, numite si stiluri fizice intrucat nu s-a acordat nici o
atentie semnificatiei informatiei continute de aceste blocuri.
In continuare sunt prezentate stilurile utilizate la formatarea unui bloc.
Aceste stiluri tin cont de semnificatia pe care o are blocul in cadrul paginii Web.

Pentru a pune in evidenta (prin silul cursiv) fragmente de text se utilizeaza etichetele:

 <cite>...</cite> (" cite " inseamna citat);

 <em>...</em> (em vine de la " emphasize " = a evidentia).

In locul lor se poate utiliza eticheta echivalenta <i>...</i>.

Urmatoarele etichete au efecte similare.Ele permit scrierea fragmentului de text cu caractere monospatiate (de tipul
celor folosite de o masina de scris):

 <code>...</code> ("code" inseamna cod sau sursa);

 <kbd>...</kbd> (kbd vine de la " keyboard " = tastatura);
 <tt>...</tt> (tt vine de la " teletype " = teleprinter).

Eticheta de tip bloc <blink>...</blink> delimiteaza fragmenete de text clipitoare. Aceasta eticheta functioneaza numai in
browserul Netscape Communicator.

<html>
<head>
<title>Blocuri de caractere monospatiate si clipitoare </title>
</head>
<body>
Aceasta linie este formata din text normal.<br>
Codul functiei f(x,y) este: <code>Function f(x,y) {return x+y;}</code><br>
Tastati urmatoarea comanda comanda DOS:
<kbd> copy c:\windows\* c:\temp<kbd><br>
<tt>Asa scrie un teleprinter</tt><br>
Acest cuvant clipeste   <blink>Blink</blink>
</body>
</html>

Exemplul urmator ilustreaza ca etichetele pot fi imbricate.

 un fragment de text poate fi scris cu aldine si cursive in acelsi timp;

 pentru un fragment de text se pot folosi simultan stilurile subliniat, exponent, marit si cursiv.

Blocul <q>...</q> permite inserarea in-line a citatelor.Aceste citate sunt afisate de catre browser cu caractere cursive.
" q " vine de la " in-line quotation " (citate inserate in-line);
Si blocurile " q " pot fi imbricate.

<html>
<head>
<title>Imbricarea etichetelor </title>
</head>
<body> Aceasta linie este formata din text normal.<br>
Normal <b>ingrosat <i> ingrosat si italic </i> ingrosat </b>.
<br> Normal <u>subliniat <b> subliniat si ingrosat <big>subliniat, ingrosat si marit. <br>
<i>Subliniat, ingrosat ,marit si italic.</i> </big></b></u>
</body>
</html>

Crearea de linkuri
Acum, după ce ai văzut câteva marcaje de bază cu care poţi crea pagini de web simple, cu text şi imagini,
ajungem şi la acel element care a dat naştere reţelei de documente şi servicii numită World Wide Web. Este
vorba de aşa-numitul link ("legătură") între documente, cel care a realizat trecerea de la documentele de text
simplu, la documentele de tip hipertext.

În vremurile de demult (înainte de 1990), documentele de pe computere erau texte independente. Deschideai
un document şi îl citeai, apoi trebuia să îl închizi şi/sau să deschizi separat un alt document. Dacă primul
document făcea trimitere la al doilea document, ţi se spunea explicit locul unde puteai găsi al doilea
document, şi trebuia tu însuţi să navighezi prin directoare până la el, ca să-l găseşti şi să-l deschizi separat, ca
şi pe primul.

La un moment dat, cuiva i-a venit ideea ca trecerea de la un text la altul să se facă prin linkuri, care erau
anumite cuvinte din text, puse în evidenţă cu o altă culoare decât restul textului sau subliniate, şi dacă se
dădea un click de mouse pe un astfel de cuvânt, se trecea automat la un alt text care prezenta detalii despre
cuvântul sau expresia respectivă. La început metoda s-a folosit în fişierele de Help (instrucţiuni) ataşate la
programe, din care utilizatorii puteau să înveţe cum se foloseşte programul. Treptat, sistemul s-a extins şi la
alte documente, şi astăzi el stă la baza webului.

Un astfel de sistem poate fi folosit într-un fişier care, pe lângă textul afişat, conţine şi informaţii ascunse, aşa
cum este un fişier HTML, în care marcajele sunt, de fapt, informaţii ascunse, care nu apar la afişare. Linkurile
din paginile web sunt acele locuri unde săgeata condusă din mouse se preschimbă într-o mână cu degetul
arătător întins, şi dacă dai click pe un link dintr-o pagină, browserul "sare" la altă pagină, adică încarcă o
pagină nouă, indicată de link. Un link în codul HTML trebuie să încadreze textul sau imaginea pe care se
poate da click, şi mai trebuie să conţină şi informaţiile despre locul unde se "sare" când se dă click pe acel
link.

Marcajul folosit pentru crearea de linkuri se numeşte ancoră şi este întotdeauna un marcaj pereche alcătuit
din <A> şi </A>. Marcajul de deschidere are întotdeauna şi atribute. Atributul necesar pentru indicarea unei
alte pagini de web sau a altei adrese de web este HREF. Iată cum arată un posibil link într-un fişier HTML:

Ca să sari la fişierul ALTUL.HTML, dă click <A HREF="ALTUL.HTML">AICI</A>

Prin exemplul de mai sus, browserul afişează fraza, iar cuvântul AICI (linkul) va apărea subliniat şi cu altă
culoare decât restul textului. Dacă se dă click pe linkul AICI, se încarcă imediat în browser fişierul
ALTUL.HTML, dar asta numai dacă el se află în acelaşi director cu fişierul în care se găseşte linkul.

Printr-un alt link poţi să introduci un salt către un anumit sit de web (de pildă, situl nostru de web este la
http://www.infonet.ro), şi aceasta se poate indica astfel:

Ca să intri în situl Infonet, dă click <A HREF="http://www.infonet.ro">AICI</A>

Există, deci, mai multe modalităţi de a scrie, în link, adresa la care se sare (spre care "ţinteşte" linkul), în
funcţie de natura adresei şi de localizarea ei pe Internet. De pildă, în funcţie de localizarea adresei de "salt"
faţă de fişierul curent (cel în care apare linkul), există două feluri de linkuri:
 linkuri interne sunt acelea pentru care (când se dă click pe ele) nu se încarcă un alt fişier, ci se "sare"
la un alt loc din fişierul curent. De pildă, dacă ai un fişier mare, care are mai multe secţiuni, la
începutul fişierului poate să existe un meniu cu ajutorul căruia să se poată sări uşor la oricare dintre
secţiunile fişierului curent.
 linkuri externe sunt acelea care se folosesc pentru a se "sări" la un fişier sau la o adresă de web din
afara fişierului curent.

Ambele tipuri de linkuri au aceeaşi formă generală, dar diferă prin felul în care este scrisă valoarea atributului
HREF. Această valoare mai poartă şi numele de Uniform Resource Identifier ("identificator uniform de
resursă") sau, abreviat, URI. O resursă (de web) este orice fel de obiect informatic care poate fi accesat pe
web, printr-un link către el: fişier, adresă de web, adresă de e-mail etc. În lecţia viitoare vom discuta pe larg
despre resursele de web şi despre modul în care pot fi indicate ele într-un link, printr-un URI.

AFIŞAREA IMAGINILOR
Paginile de web şi-au dobândit popularitatea şi pentru că, pe lângă text, pot să conţină şi imagini. În această
lecţie vom vorbi despre felul în care se afişează imagini în fişierul HTML.

De fapt, imaginile nu sunt incluse în fişierul HTML. Fişierul HTML este un fişier de text, pe când imaginile
conţin alt tip de informaţie, şi de aceea fiecare imagine este păstrată într-un fişier diferit, de tip grafic, cu
format specific. Fişierul HTML poate să conţină doar referinţe la fişierele grafice. Cele mai utilizate formate
de fişiere pentru imagini sunt JPG, GIF şi (mai rar) BMP, iar mai nou s-a lansat formatul PNG. Dar acestea nu
sunt singurele formate grafice care pot fi folosite în pagini de web. Crearea sau prelucrarea imaginilor se face
cu programe specializate în prelucrări grafice (de pildă, Corel Draw, Corel PhotoPaint, Adobe PhotoShop,
Adobe Illustrator, PaintShop Pro şi altele), dar ea nu face obiectul acestui curs.

Să presupunem că ai un fişier grafic numit imagine.jpg şi vrei că el să fie afişat într-o pagină de web. Fişierul
HTML al paginii de web respective va trebui să conţină, în locul unde vrei să apară imaginea la afişare, un
marcaj IMG care va include, ca atribut SRC, numele fişierului grafic, de exemplu:

<IMG SRC="imagine.jpg">
În acest caz, fişierul imagine.jpg trebuie să se afle în acelaşi director (folder) cu fişierul HTML în care apare
acest marcaj. Dacă păstrezi toate imaginile într-un folder numit imagini aflat în acelaşi folder în care se
găseşte fişierul HTML, atunci atributul SRC trebuie să conţină calea relativă până la acel fişier imagine,
astfel:
<IMG SRC="imagini/imagine.jpg"> DECI <IMG SRC="NUME_DOSAR/NUME_IMAG.EXTENSIE">
Observi că, spre deosebire de sistemele MS-DOS şi Windows, în specificarea căii se foloseşte caracterul slash
(/) în loc de backslash (\), deoarece pe alte sisteme (UNIX, Linux etc.) backslash-ul este cel care separă
directoarele incluse într-o cale, iar browserul va traduce caracterul "/" la nevoie, în "\". Deci vei folosi slash (/)
întotdeauna în căile relative sau absolute dintr-un fişier HTML.

Poţi folosi şi imagini aflate oriunde pe Internet, dacă ştii URL-ul lor absolut, adică adresa care le localizează
exact pe Internet, de pildă:

<IMG SRC="http://www.infonet.ro/menu/infonet.gif">
este o referinţă exactă la imaginea siglei Infonet, care va fi încărcată direct din situl Infonet pentru a fi afişată.
Desigur, o astfel de imagine nu va fi afişată dacă nu se lucreaza online, fiindcă nu se poate încărca de pe web.

Marcajul IMG are şi alte atribute utile în afişarea imaginilor, dar numai marcajul SRC este obligatoriu. Iată
alte atribute:

 ALIGN se foloseşte pentru alinierea imaginii, fie faţă de marginile laterale ale zonei de afişare, fie
faţă de textul afişat pe acelaşi rând cu imaginea. Dacă imaginea are o înălţime mai mare de un rând,
textul se poate "înfăşura" în jurul ei, de pildă poţi să ai mai multe rânduri de text în spaţiul din stânga
sau din dreapta imaginii, în funcţie de valoarea atributului ALIGN. Acest atribut poate să aibă una din
valorile:
o "left" - pentru aliniere pe orizontală la marginea din stânga a rândului sau paginii
o "right" - pentru aliniere pe orizontală la marginea din dreapta a rândului sau paginii
o "top" - pentru aliniere pe verticală la marginea de sus a celui mai înalt element din rând
o "texttop" - pentru aliniere pe verticală la marginea de sus a celui mai înalt text din rând
o "middle" - pentru aliniere pe verticală a mijlocului imaginii cu baza rândului de text
o "absmiddle" - pentru aliniere pe verticală a mijlocului imaginii cu mijlocul rândului de text
o "baseline" - pentru aliniere pe verticală a bazei imaginii cu baza rândului de text
o "bottom" - are acelaşi efect ca "baseline"
o "absbottom" - pentru aliniere pe verticală a bazei imaginii cu limita de jos a rândului de text,
cea la care ajung codiţele literelor care coboară sub baza rândului de text (de ex., "g", "p" etc.)
 BORDER este un atribut care permite stabilirea unei borduri a imaginii, de grosime specificată în
pixeli (puncte grafice). Dacă atributul BORDER lipseşte, atunci nu se afişează nici o bordură pentru
imagine (lucru echivalent cu BORDER="0").
 ALT permite specificarea unui text care se afişează în browser atunci când pointerul (săgeata) de la
mouse staţionează timp de o secundă pe imagine, sau când imaginea nu s-a încărcat încă. De pildă,
dacă o imagine are atributul ALT="Peisaj cu fluturi", textul dintre ghilimele va fi afişat în situaţiile
respective, sau în locul imaginii într-un browser de mod text.
 HEIGHT şi WIDTH specifică înălţimea, respectiv lăţimea imaginii la afişare, în pixeli. Chiar dacă
imaginea are alte dimensiuni în fişierul grafic original, browserul afişează imaginea la dimensiunile
specificate. Dacă aceste atribute lipsesc, imaginea se afişează la dimensiunile originale. Dacă numai
unul dintre aceste atribute este prezent, imaginea se afişează la dimensiunea respectivă, dar cu
păstrarea raportului original între înălţime şi lăţime, deci imaginea este redimensionată la scară. Dacă
ambele atribute sunt prezente, atunci imaginea este afişată la dimensiunile specificate de ele, chiar
dacă acest lucru distorsionează imaginea originală din cauza nepăstrării raportului original între
înălţime şi lăţime.
 HSPACE şi VSPACE specifică un spaţiu (în pixeli) care trebuie lăsat liber în jurul imaginii, pe
orizontală, respectiv pe verticală.

Iată un exemplu care include aceste marcaje:

<IMG SRC="http://www.infonet.ro/menu/infonet.gif" BORDER="1" ALT="Sigla Infonet"
ALIGN="left" HEIGHT="100" HSPACE="5">

LINKURI PE IMAGINI
La începuturile hipertextului, linkurile se realizau numai pe text, adică erau pe acele cuvinte pe care, dându-se
un click, se trecea la un alt document sau la un alt loc din acelaşi document. Când posibilităţile grafice ale
computerelor au permis folosirea imaginilor, au apărut şi imagini în paginile hipertext, şi unele imagini
sugestive au început să fie folosite ca butoane: dându-se click pe ele, se trece la alt document.

Cea mai simplă formă de link pe o imagine este dacă incluzi o imagine în marcajul pentru link, în loc de text
sau chiar alături de text, de pildă:

<A HREF="http://www.infonet.ro"><IMG SRC="infonet.gif"></A>

sau
<A HREF="http://www.infonet.ro"><IMG SRC="infonet.gif"><BR>Infonet</A>
Presupunem că infonet.gif este o imagine aflată în acelaşi director cu fişierul în care se află linkul. Linkul de
mai sus va funcţiona numai online, desigur, dacă nu este plasat pe acelaşi server cu adresa de web indicată. În
marcajul IMG se pot include orice atribute permise de acest marcaj. La fel, ancora (marcajul A) poate avea
orice atribute permise pentru ea, putând fi folosită, de pildă, în cadre, cu un atribut TARGET adecvat.

În acest fel, şi printr-o aranjare corespunzătoare în pagină, se pot realiza meniuri de butoane în care fiecare
buton este o imagine. Adesea se foloseşte aceeaşi imagine de bază pentru toate butoanele, diferit fiind doar
textul de pe ele. Pentru asta, totuşi, fiecare buton trebuie să aibă un fişier-imagine distinct. Deoarece imaginile
sunt relativ mari faţă de text, nu trebuie abuzat de folosirea lor în paginile de web, dacă afecteaza sensibil
timpul de încărcare al paginii. De aceea trebuie să selectezi cu grijă volumul şi numărul imaginilor folosite
într-o pagină de web.

O altă soluţie posibilă pentru a realiza un meniu de linkuri, folosind o singură imagine mai mare, este aşa-
numita "hartă-imagine" (image map în engleză). În acest caz, se alege o imagine mare şi pe ea se definesc
zone distincte. Fiecărei zone i se asociază un link. Când se dă click pe o zonă, atunci se activează linkul
asociat zonei respective. După caz, toată imaginea poate fi împărţită în zone de link, sau numai anumite
porţiuni din imagine pot avea un link asociat. Poţi vedea un exemplu de image map în pagina noastră de la
adresa http://www.buzau.ro/tabere/ unde se găseşte o hartă (întâmplător e o hartă, dar poţi folosi orice altă
imagine) a judeţului Buzău, şi pe ea sunt marcate anumite locuri unde se găsesc, în judeţ, tabere şcolare. Un
click pe un astfel de loc de pe hartă va activa linkul către pagina dedicată taberei din acel loc geografic.

Iată cum este definită în HTML o astfel de image map:

<MAP NAME="buzau">
<AREA HREF="Arbanasi/index.html" ALT="Tabara Arbanasi" TITLE="Tabara Arbanasi"
SHAPE="circle" COORDS="185,198,20">
<AREA HREF="Poiana_Pinului/index.html" ALT="Tabara Poiana Pinului" TITLE="Tabara Poiana
Pinului" SHAPE="circle" COORDS="131,254,20">
<AREA HREF="Monteoru/index.html" ALT="Tabara Monteoru" TITLE="Tabara Monteoru"
SHAPE="circle" COORDS="153,281,20">
<AREA HREF="Hartagu/index.html" ALT="Tabara Hartagu" TITLE="Tabara Hartagu"
SHAPE="circle" COORDS="56,110,20">
<AREA HREF="index.html#bzmap" ALT="Tabara Fisici" TITLE="Tabara Fisici" SHAPE="circle"
COORDS="112,175,20">
</MAP>
Poziţia marcajului MAP în codul HTML nu este importantă la afişare, dar el trebuie să apară undeva înaintea
marcajului IMG care defineşte locul unde va fi afişat fişierul-imagine asociat cu harta definită prin MAP. De
pildă, marcajul MAP poate să apară imediat după marcajul de deschidere BODY. Marcajul IMG respectiv
poate arăta astfel:
<IMG SRC="buzaumap.jpg" BORDER="0" USEMAP="#buzau">
Se constată că o hartă-imagine are 2 componente: harta (definită prin MAP) şi imaginea asociată ei (precizată
şi poziţionată prin IMG). Mai întâi, întreaga definiţie a hărţii-imagine este înscrisă în marcajul-pereche MAP.
La început se defineşte şi un nume al hărţii prin NAME="buzau". De fapt, prin MAP nu se indică şi
imaginea care va fi folosită, ci doar poziţiile linkurilor pe imagine.
Ca să i se asocieze zonele definite prin MAP, marcajul IMG trebuie să conţină acel atribut
USEMAP="#buzau" unde buzau este numele hartii, definit în marcajul MAP prin atributul
NAME="buzau".

Zonele de pe hartă se definesc prin marcaje AREA care pot avea diverse atribute. În primul rând, putem
regăsi aici atributele obişnuite pentru linkuri, precum HREF (pentru a indica adresa de link) şi TARGET
(pentru a specifica în ce cadru se încarcă documentul indicat de link, dacă se lucrează cu cadre). În exemplul
dat nu s-au folosit cadre, de aceea nu apare nici un atribut TARGET. Dacă se doreşte ca o anumită zonă de pe
imagine să nu aibă asociat nici un link, se poate folosi atributul NOHREF în loc de HREF. Se mai poate
folosi atributul TITLE, care specifică un text care se afişează dacă pointerul mouse-ului staţionează o
secundă pe zona respectivă. Atributul TITLE este valabil numai pentru MS Internet Explorer.

În fine, atribute ale marcajului AREA specifice hărţilor-imagine sunt SHAPE şi COORDS. Prin SHAPE se
defineşte forma zonei respective, iar prin COORDS se definesc coordonatele zonei, în pixeli definiţi pe
coordonatele x,y (x pe orizontală, y pe verticală), punctul 0,0 fiind în colţul din stânga-sus al paginii. Numărul
şi semnificaţia valorilor înscrise la COORDS depind de forma indicată prin SHAPE, astfel:

 SHAPE="rect" defineşte o formă rectangulară (dreptunghiulară) cu COORDS="x1,y1,x2,y2" unde

x1,y1 sunt coordonatele colţului din stânga-sus al dreptunghiului, iar x2,y2 sunt ale colţului din
dreapta-jos.
 SHAPE="circle" defineşte un cerc cu COORDS="x,y,r" unde x,y sunt coordonatele centrului
cercului, iar r este raza cercului în pixeli.
 SHAPE="poly" defineşte un poligon cu COORDS="x1,y1,x2,y2,...,xn,yn" unde perechile xi,yi
(i=1,2,...n) sunt coordonatele celor n puncte care definesc poligonul.
 SHAPE="default" se referă la zona din imagine rămasă în afara oricărei zone deja definite. Şi ei i se
poate asocia un link, sau poate fi omisă. Dacă este omisă, un click pe ea nu va avea nici un efect..

Ca să construieşti o hartă de imagini, teoretic ar trebui mai întâi să construieşti (sau să alegi) fişierul-imagine,
şi apoi să defineşti zonele în codul HTML, identificând pixelii care definesc zonele dorite pe imagine. Aceasta
nu implică nici un fel de modificări ale imaginii, ci doar scrierea secvenţei corespunzătoare de cod HTML din
marcajul MAP şi apoi includerea imaginii în codul HTML prin marcajul IMG aşa cum se vede în exemplul
de mai sus.

Există şi programe speciale pentru construit rapid hărţi-imagine pe un fişier imagine existent (de exemplu,
bine-cunoscutul program de grafică PaintShopPro îţi permite să defineşti rapid codul HTML pentru o hartă-
imagine, indicând direct pe imagine zonele dorite.

CREAREA TABELELOR
Să vedem cum poţi să creezi un tabel, format din celule ordonate pe rânduri şi coloane. Pentru început, vom
discuta despre marcajele de bază pentru definirea tabelelor, şi să începem cu un tabel foarte simplu:
 

Celula 1.1 Celula 1.2

Celula 2.1 Celula 2.2

Acest tabel are următorul cod HTML:

<TABLE BORDER>
<TR>
 <TD>Celula 1.1</TD>
<TD>Celula 1.2</TD>
</TR>
<TR>
<TD>Celula 2.1</TD>
<TD>Celula 2.2</TD>
</TR>
<TABLE>
După cum se vede, sunt folosite trei marcaje pereche pentru a defini tabelul şi elementele sale (rânduri,
coloane, celule):
 Marcajul-pereche <TABLE> trebuie să încadreze întregul tabel, care va ocupa astfel o suprafaţă
dreptunghiulară bine definită în pagina afişată. Atributul BORDER este folosit aici pentru ca bordura
tabelului să fie vizibilă. Dacă este omis, atunci nu vor fi afişate liniile (bordura) care delimitează
rândurile şi coloanele tabelului.
 Marcajul-pereche <TR> încadrează conţinutul unui rând din tabel.
 Marcajul-pereche <TD> încadrează conţinutul unei celule din tabel. Practic, ca să defineşti un tabel,
trebuie să construieşti structura lui folosind aceste marcaje, şi apoi să defineşti conţinutul fiecărei
celule din tabel. Într-o celulă pot să apară orice alte marcaje şi texte care sunt permise şi în corpul
fişierului HTML, adică între marcajele <BODY> şi </BODY>

În caz că între marcajele care delimitează tabelul apar elemente neincluse într-o celulă (între marcaje <TD> si
</TD>), acele elemente nu vor fi afişate în spaţiul celulelor, ci deasupra tabelului. Efectul lor poate fi
imprevizibil în unele browsere, deci o regulă bună de urmat este ca tot ce pui într-un tabel să fie cât mai corect
plasat într-una din celulele definite prin marcaje.

Alte câteva marcaje utilizabile opţional în tabele sunt următoarele:

 Marcajul-pereche <TH> încadrează conţinutul unei celule din tabel exact la fel ca şi marcajul/pereche
<TD>, cu deosebirea că textul din celulele definite cu <TH> apare îngroşat sau pus în evidenţă. Acest
marcaj se foloseşte pentru a defini rânduri care trebuie să iasă în evidenţă în tabel, de pildă dacă vrei ca
primul rând să fie un cap de tabel.
 Marcajul-pereche <CAPTION> defineşte un titlu al tabelului, care este afişat deasupra tabelului,
indiferent unde apare marcajul <CAPTION>. Ca să eviţi efectele imprevizibile, plasează tot marcajul
<CAPTION> imediat după marcajul de deschidere <TABLE> şi închide-l înainte de primul marcaj
<TR> din tabel.
 Marcajul-pereche <COLGROUP> se foloseşte pentru a defini atribute ale celulelor pe coloane, astfel
încât să poţi formata identic celulele aflate pe aceeaşi coloană din tabel. În acest fel eviţi repetarea
formatărilor în toate celulele de pe aceeaşi coloană. Poţi avea mai multe marcaje <COLGROUP> în
acelaşi tabel, şi ele vor formata coloanele în ordinea în care apar ele în tabel.
 Marcajul <COL> se foloseşte în zona dintre <COLGROUP> şi </COLGROUP>, pentru a defini
atributele unei coloane, şi sunt singurele marcaje care trebuie să apară în această zonă.

Iată un exemplu în care sunt folosite toate aceste elemente:

 
Titlul tabelului
Cap tabel coloana 1 Cap tabel coloana 2
Celula 1.1 Celula 1.2
Celula 2.1 Celula 2.2

Acest tabel are următorul cod HTML:

<TABLE BORDER>
<CAPTION><I>Titlul tabelului</I></CAPTION>
<COLGROUP>
<COL BGCOLOR="yellow">
<COL ALIGN="center">
</COLGROUP>
<TR>
<TH>Cap tabel coloana 1</TH>
<TH>Cap tabel coloana 2</TH>
</TR>
<TR>
<TD>Celula 1.1</TD>
<TD>Celula 1.2</TD>
</TR>
<TR>
<TD>Celula 2.1</TD>
<TD>Celula 2.2</TD>
</TR>
<TABLE>