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 în care documentele sunt distribuite și văzute pe Web. Multe din trasaturile lui, cum ar fi independenta fata de platforma, structurarea formatării și legaturile hypertext, fac din el un foarte bun format pentru documentele Internet și Web.
Primele specificațiile de bază ale Web-ului au fost HTML, HTTP și URL.
HTML a fost dezvoltat initial de Tim Berners-Lee la CERN în 1989. HTML a fost vazut ca o posibilitate pentru fizicienii care utilizeaza computere diferite și schimbe intre ei informație utilizind Internetul. Erau prin urmare necesare citeva trasaturi: independenta de platforma, posibilități hypertext și structurarea documentelor.Independenta de platforma inseamnă ca un document poate fi afișat în mod asemănător de computere diferite ( deci cu fonte, grafica și culori diferite ), lucru vital pentru o audienta atit de variata.
Hipertext înseamnă că orice cuvânt, frază, imagine sau alt element al documentului văzut de un utilizator ( client ) poate face referința la un alt document, ceea ce ușurează mult navigarea intre multiple documente sau chiar în interiorul unui aceluiasi document. Structurarea riguroasa a documentelor permite convertirea acestora dintr-un format în altul precum și interogarea unor baze de date formate din aceste documente.
Standardul oficial HTML este World Wide Web Consortium (W3C), care este afiliat la Internet Engineering Task Force (IETF). W3C a enunțat câteva versiuni ale specificației HTML, printre care și HTML 2.0, HTML 3.0,HTML 3.2, HTML 4.0 și, cel mai recent, HTML 4.01. în același timp, autorii de browsere, cum ar fi Netscape și Microsoft, au dezvoltat adesea propriile "extensii" HTML în afara procesului standard și le-au incorporat în browserele lor. în unele cazuri, cum ar fi tagul Netscape , aceste extensii au devenit standarde de facto adoptate de autorii de browsere.
HTML 2.0, elaborat în Iunie 1994, este standardul pe care ar trebui să-l suporte toate browserele curente -- inclusiv cele mod text. HTML 2.0 reflecta concepția originala a HTML ca un limbaj de marcare independent de obiectele existente pentru așezarea lor în pagina, în loc de a specifica exact cum ar trebui să arate acestea. Dacă doriți să fiți siguri ca toți vizitatorii vor vedea paginile așa cum trebuie, folosiți tagurile HTML 2.0.
Specificația HTML 3.0, Enunțata în 1995, a incercat să dezvolte HTML 2.0 prin adăugarea unor facilități precum tabelele și un mai mare control asupra textului din jurul imaginilor. Deși unele din noutățile HTML 3.0 erau deja folosite de autorii de browsere, multe nu erau incă. în unele cazuri, taguri asemănătoare implementate de autorii de browsere au devenit mai răspândite decât tagurile "oficiale". Specificația HTML 3.0 acum a expirat, deci nu mai este un standard oficial.
în Mai 1996, W3C a scos pe piața specificația HTML 3.2, care era proiectata să reflecte și să standardizeze practicile acceptate la scara larga. Deci, HTML 3.2 include tagurile HTML 3.0 ce erau adoptate de autorii de browsere ca Netscape și Microsoft plus extensii HTML răspândite. în Bilanțul asupra HTML, W3C recomanda ca providerii de informații să utilizeze specificația HTML 3.2.Versiunile curente ale majorității browserelor ar trebui să suporte toate, sau aproape toate aceste taguri.
De asemenea există extensii Netscape și Microsoft care nu fac parte din specificația HTML 3.2, ori pentru ca sunt mai puțin utilizate, ori au fost omologate după apariția HTML 3.2. Pentru ca navigatorul Netscape a fost printre primele browsere care suporta anumite taguri HTML 3.0, iar Netscape deține în jur de 70% din piața de browsere, mulți au crezut eronat ca toate extensiile Netscape (incluzând taguri ca și facilitați ca ferestrele) fac parte din HTML 3.0 sau HTML 3.2.
La momentul aparitiei acestui tutorial, HTML 4.0 este larg utilizat și au fost deja publicate specificatiile HTML 4.01.
Documentele HTML sînt documente în format ASCII și 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 afișează acelasi document oarecum diferit, în functie de platforma pe care ruleaza. Au fost de asemenea dezvoltate convertoare care permit formatarea HTML a documentelor generate ( și formatate ) cu alte editoare. Evident conversiile nu pot patra decit partial formatarile anterioare deoarece limbajul HTML este inca incomplet.

2. Structura documentului HTML.

Orice document HTML incepe cu notația <html> și se termina cu notația </html>. Aceste "chestii" se numesc în literatura de specialitate "TAG-uri".Prin convenție, toate informațiile HTML incep cu o paranteza unghiulara deschisa " < " și se termina cu o paranteza unghiulara inchisa " > ".
Tag-urile între aceste paranteze transmit comenzi către browser pentru a afișa pagina intr-un anumit mod. Unele blocuri prezintă delimitator de sfârșit de bloc, în timp ce pentru alte blocuri acest delimitator este opțional sau chiar interzis.
Între cele doua marcaje <html> și </html> vom introduce doua secțiuni:
- sectiunea de antet <head>...</head> și - corpul documentului <body>...</body>. Blocul <body>...</body> cuprinde conținutul propriu-zis al paginii HTML, adică ceea ce va fi afișat în fereastra browser-ului.

O eticheta poate fi scris atât cu litere mici, cat și cu litere mari.
Adică <html> = <HTML> = <Html>. Caracterele "spațiu" și "CR/LF" ce apar intre etichete sunt ignorate de către browser.
Deci un prim document HTML ar fi ceva de genul asta:

Așa arată primul document HTML. Copiați-l folosind Copy/Paste într-un fișier nou și salvați-l ca PRIM.HTM sau PRIM.HTML. Apoi porniți Internet Explorer sau Google Crome, dați CTRL-O și introduceți calea spre fișier. Dați OK și ... nimic.
Să nu disperam ... vom adăuga primele elemente la pagina noastră. în primul rând, titlul unei pagini se obține inserând în secțiunea <head>...</head> a următoarei linii:

<title>Aceasta este prima mea pagina de Web</title>
în plus, în secțiunea <body>...</body> putem scrie texte cît dorim. Dacă nu întâlnim nici un marcaj < sau > atunci interpretorul HTML le va lua ca texte simple și le va afișa pe ecran. să vedem o noua versiune a paginii noastre:

Conținutul blocului <title>...</title> va apărea în bara de titlu a ferestrei browser-ului.
Dacă acest bloc lipsește într-o pagina HTML, atunci în bara de titlu a ferestrei browser-ului va apărea numele fișierului.
Dacă introducem mai multe linii într-o pagina browser-ul va afișa într-un singur rând, intrucât caracterele " CR/LF " sunt ignorate de browser. Trecerea pe o linie noua se face la o comanda explicita, care trebuie să apară în pagina html.
Această comandă este marcajul <br> ( de la " line break " - intrerupere de linie ).
Folosind aceleași operații ca mai sus, vizualizați noua pagina! Veți vedea textul ce apare în fereastra navigatorului. în plus, pagina dvs. va avea un titlu nou, cel introdus de dvs.

Blocuri preformatate

Pentru ca browser-ul să interpreteze corect caracterele " spațiu ", " tab " și " CR/LF " ce apar în cadrul unui text, acest text trebuie inclus intr-un bloc <pre>...</pre>.

Culoarea de fond

O culoare poate fi precizata în două moduri:

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

Culoarea unei pagini se precizează prin intermediul unui atribut al etichetei <body>.
Culoarea fondului paginii Web se stabilește cu atributul bgcolor al etichetei <body>, de exemplu: <body bgcolor = culoare>.

Următorul exemplu realizează o pagină cu fondul de culoare gri.

Culoarea textului

Acest lucru se face prin intermediul atributului text al etichetei <body> după sintaxa <body text=culoare>.

În următorul exemplu textul are culoarea roșie.

O eticheta poate avea mai multe atribute. De exemplu, o etichetă cu trei atribute arată astfel:

<eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 = valoare3>.

Următorul exemplu prezintă o pagină cu fondul de culoare albastră și textul de culoare galbenă.

Textul afișat este caracterizat de următoarele atribute: Mărime ( size), Culoare ( color ), Font (style).
Acestea sunt atribute ale etichetei <basefont>.Este o eticheta singulara (fără delimitator de sfirșit 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 și 7 pentru fontul cel mai mare);
culoare - este o culoare precizata prin nume sau printr-o construcție 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 și o lista de fonturi separate prin virgula, de exemplu:
" Times New Roman, serif, monospace ".

Domeniul de valabilitate al caracteristicilor precizate de aceasta eticheta se intinde de la locul în care apare eticheta pana la sfarșitul paginii sau pana la următoarea eticheta <basefont>.
Dacă acest atribut lipsește atunci textul din pagina Web are atribute prestabilite sau atribute precizate de browser-ul utilizat.
Atributele prestabilite sunt: size = 3, color = black, și style = " Times New Roman " .
Poziționarea conținutului paginii Web fata de marginile ferestrei browser-ului se poate face cu ajutorul a două atribute ale etichetei <body>:

leftmargin ( stabilește distanta dintre marginea stânga a ferestrei browser-ului și marginea stângă a conținutului paginii );
topmargin ( stabilește distanta dintre marginea de sus a ferestrei browser-ului și marginea de sus a conținutului paginii );

Stiluri pentru blocurile de text

Pentru ca un bloc de text să apară în pagina evidențiat (cu caractere aldine), trebuie inclus intre delimitatorii <b>...</b> ( b vine de la "bold" = indrăzneț).
Pentru ca un text să fie scris cu caractere mai mari cu o unitate decât cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele <big>...</big>.
Pentru ca un text să fie scris cu caractere mai mici cu o unitate decât cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele <small>...</small>.
Pentru ca un text să fie scris cu caractere cursive acesta trebuie inclus intr-un bloc delimitat de etichetele <i>...</i> ( i vine de la " italic ").
Pentru a insera secvențe de text aliniate ca indice (sub-script) sau ca exponent (super-script) , aceste fragmente trebuie delimitate de etichetele <sub>...</sub>, respectiv <sup>...</sup>.
Pentru a insera un bloc de caractere subliniate se utilizează etichetele <u>...</u> (u vine de la " underline ").
Pentru a insera un bloc de caractere tăiate se utilizează etichetele <strike>...</strike> sau <s>...</s>.
în exemplul următor vom utiliza toate etichetele menționate anterior.

Stiluri fizice și logice

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

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

<cite>...</cite> ( " cite " inseamna citat);
<em>...</em> (em vine de la " emphasize " = a evidentia).

în 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 mașină de scris):

<code>...</code> ( " code " inseamna cod sau sursă);
<kbd>...</kbd> ( kbd vine de la " keyboard " = tastatura);
<tt>...</tt> ( tt vine de la " teletype " = teleprinter).

Eticheta de tip bloc <blink>...</blink> delimitează fragmente de text clipitoare. Aceasta eticheta funcționează numai în browser-ul Netscape Communicator.

Exemplul următor ilustrează că etichetele pot fi imbricate.

Un fragment de text poate fi scris cu aldine și cursive în același timp.

Pentru un fragment de text se pot folosi simultan stilurile subliniat, exponent, mărit și cursiv.

Blocul <q>...</q> permite inserarea în-line a citatelor. Brouwser-ul afișează citatele în ghilimele.
" q " vine de la " în-line quotation " (citate inserate în-line).
Și blocurile " q " pot fi imbricate.

Exemplu(de sine stătător).

&-consecutivități

Simbolurile "<" și ">" sunt percepute de sistemele browser ca inceputuri și sfârșituri de HTML-taguri. Apare intrebarea, cum săreprezentăm aceste simboluri pe ecran?

În limbajul HTML aceasta se poate realiza cu ajutorul &- consecutivităților (ele se mai numesc obiecte simbolice sau escapeconsecutivități).

Există mai multe consecutivități de acest tip:

"<" - <
">" - >
"&" (ampersand) &
Ghilimelele(") se codifică - "

Pentru escape-consecutivități sunt două restricții suplimentare:

Fiecare consecutivitate se scrie numai cu minuscule
Sfârșitul fiecărei consecutivități este marcat de

În general, asemenea consecutivități există pentru toate simbolurile cu codurile ASCII mai mari decât 127. Motivul este că unele servere nu susțin transmiterea datelor câte 8 biți.

Există mai multe metode de a include semnele diacritice române în documentele HTML. Cea mai simplă este codificarea directă a lor prin &-consecutivități:

Ă - Ă
ă - ă
i - Î
i - î
Ș - Ş
ș - ş
Ț - Ţ
ț - ţ
â - Â
â - â

Exemplu:

Comentarii

Sistemele browser ignoră reproducerea oricărui text situat intre . Este o opțiune specială pentru introducerea în textul documentului HTML a unor comentarii, ce nu for fi afișate pe ecran.


3. Formatarea caracterelor, organizarea textului.

Un font este caracterizat de următoarele atribute:

culoare (stabilita prin atributul color);
tipul sau stilul (stabilit prin atributul face);
mărimea (definita prin atributul size);
mărimea în puncte tipografice (stabilita prin atributul point-size);
grosime (definita prin atributul weight).

Toate aceste atribute aparțin etichetei <font>, care permite inserarea de blocuri de texte personalizate.

Culori

O culoare poate fi precizata în două moduri:

printr-un nume de culoare.
printr-o constantă conform standardului de culoare RGB (Red, Green, Blue). O astfel de constantă se formează astfel: #rrggbb, unde r, g și b sunt cifre hexazecimale.

Culoarea fontului

Pentru a scrie un fragment de text cu caractere de o anumită culoare se incadrează acest fragment intre delimitatorii <font>...</font> având stabilit atributul color la valoarea necesara. De exemplu:

<font color=red>fragment de text de culoare rosie</font>

Familia fontului

Pentru a scrie un text într-o pagină pot fi folosite mai multe fonturi (stiluri de caractere). Există cinci familii generice de fonturi care sunt de regulă disponibile pe toate calculatoarele utilizatorilor: serif, sans serif, cursive, monospace și fantasy.
Tipul de font necesar poate fi stabilit prin atributul face al etichetei <font>.
Pot fi introduse mai multe fonturi separate prin virgula.

<font face = " Arial, serif, monospace ">

în acest caz browser-ul va utiliza primul font pe care il cunoaște.

Mărimea fontului

Pentru a stabili mărimea unui font se utilizează atributul size al etichetei <font>. Valorile acestui atribut pot fi:

1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font și 7 pentru cel mai mare);
+1, +2, etc. pentru a mari dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta;
-1, -2, etc. pentru a micșora dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta.

Mărimea unui font poate fi stabilita exact cu ajutorul atributului point-size. Valorile acceptate de acest atribut pot fi orice numere naturale pozitive. Numărul astfel precizat reprezintă mărimea fontului în puncte tipografice.
Acest atribut funcționează numai cu Netscape Communicator.

Grosimea unui font

Grosimea unui caracter poate fi definită cu ajutorul atributului weight al etichetei <font>.
Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 și 900 (100 pentru fontul cel mai subțire și 900 pentru cel mai gros).

4. Blocuri de text

Aceste etichete nu se refera la particularitatiile caracterelor ce compun textul, ci la functiile pe care le poate avea un bloc de text în cadrul paginii Web.
Toate aceste etichete produc automat trecerea la un rand nou și adaugarea unui spatiu suplimentar.

Inserarea unei adrese

Dacă într-o pagină web trebuie inclusă o adresă ,atunci putem utiliza facilitatile oferite de o eticheta dedicată: <address>...</address>.

Indentarea unui bloc

Pentru ca un bloc de text să fie indentat ( marginea din stanga a textului să fie deplasata la dreapta la o anumita distanta fata de marginea paginii ), acesta trebuie inclus intre etichetele <blockquote>...</blockquote>.

Blocul preformatat

Într-un bloc <pre>...</pre>, semnificația marcajelor HTML se pastreaza.
Blocul <pre>...</pre> este indicat pentru a insera randuri vide ( spatiu intre randurile succesive ). Caracterul " spatiu " poate fi luat în considerare de browser Dacă este inserat explicit prin  .

intr-un fișier HTML, caracterele "<"şi ">" au o semnificație specială pentru browser. Ele incadreaza comenzile și atributele de afișare a elementelor într-o pagina. Dacă dorim ca un fragment de text să conțină astfel de caractere, acest fragment trebuie incadrat de una dintre perechile de etichete:

<xmp>...</xmp> ( 80 de caractere pe rand );
<listing>...</listing> ( 120 de caractere pe rand ).

Aceste marcaje interpreteaza corect caracterele " spatiu ", " eticheta "şi "CR/LF ". Textul afișat în pagina este monospațiat.

Blocuri paragraf

Cu ajutorul etichetei paragraf <p> este posibil trecerea la o linie noua și permite:

inserarea unui spatiu suplimentar inainte de blocul paragraf;
inserarea unui spatiu suplimentar dupa blocul paragraf, Dacă se foloseste delimitatorul </p> (acesta fiind optional);
alinierea textului cu ajutorul atributului align, avand valorile posibile " left ", " center " sau " right ".

Blocuri de titlu

Intr-un text titlurile ( headers ) de capitole pot fi introduse cu ajutorul etichetelor <h1>. <h2>, <h3>, <h4>, <h5>, <h6>.
Toate aceste etichete se refera la un bloc de text și trebuie insotite de o eticheta de incheiere similara.
Aceste etichete accepta atributul align pentru alinierea titlului blocului de text la stanga (în mod prestabilit ) , în centru și la dreapta. Tag-ul <h1> permite scrierea unui titlu cu caractere mai mari și aldine, pe cand <h6> foloseste caracterele cele mai mici.

Linii orizontale

Într-o pagina Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul etichetei <hr>. Pentru a configura o linie orizontală se utilizează următorele atribute ale etichetei <hr>:

align - permite alinierea liniei pe orizontală. Valorile posibile sunt " left " ," center " și " right ";
width - permite alegerea lungimii liniei;
size - permite alegerea grosimii liniei;
noshade - când este prezent definește o linie fără umbră;
color - permite definirea culorii liniei.

Blocuri <center>

Blocul introdus de etichetele <center>...</center> aliniaza centrat toate elementele pe care le contine.

Blocuri <nobr>

Blocul de text cuprins intre etichetele <nobr>...</nobr> va fi afisat pe o singura linie.

Blocuri <div>

Modalitatea cea mai eficienta de delimitare și de formatare a unui bloc de text este folosirea delimitatorilor <div>...</div>. Un parametru foarte foarte util pentru stabilirea caracteristicilor unui bloc <div> ( diviziune ) este align ( aliniere ).
Valorile posibile ale acestui parametru sunt:

left " ( aliniere la stanga );
center " ( aliniere centrala );
right " ( aliniere la dreapta ).

Un bloc <div>...</div> poate include alte subblocuri. în acest caz , alinierea precizata de atributul align al blocului are efect asupra tuturor subblocurilor incluse în blocul <div>;
Un bloc <div>...</div> admite atributul " nowrap " care interzice intreruperea randurilor de catre browser.

5. Liste. Noțiuni și marcaje utilizate.

Unul din cele mai obișnuite elemente din documentele cu mai multe pagini este un set de definiții, referințe sau indexuri. Glosarele sunt exemple clasice în acest sens; cuvintele sunt listate în ordine alfabetică, urmate de definiții ale termenilor respectivi. în HTML, intreaga secțiune a unui glosar va fi gestionată printr-o lista de definiții, care este inclusa într-o pereche de marcaje de lista de definiții: <dl>...</dl> (de la "definition list" = lista de definiții).
Observații:
- Un termen al listei este inițiat de eticheta <dt> (de la "definition term" = termen definit);
- Definitia unui termen este inițiata de eticheta <dd> (de la "definition description" = descrierea definiției);
- Definitia unui termen incepe pe o linie noua și este indentată;

Liste neordonate

O lista neordonata este un bloc de text delimitat de etichetele corespondente <ul>...</ul> (" ul " vine de la " unordered list " = lista neordonata). Fiecare element al listei este inițiat de eticheta <li> (list item).
Lista va fi intentata fata de restul paginii Web și fiecare element al listei incepe pe un rând noua.

Tag-urile <ul> și <li> pot avea un atribut type care stabilește caracterul afișat în fața fiecărui element al listei. Valorile posibile al acestui atribut sunt:

"circle" (cerc)
"disc" (disc plin) (valoarea prestabilita);
"square" (pătrat)

Listele neordonate pot fi imbricate pe mai multe niveluri

Liste ordonate

O listă ordonată de elemente este un bloc de text delimitat de etichetele corespondente <ol>...</ol> (" ol " vine de la " ordered list " = lista ordonată). Fiecare element al listei este inițiat de eticheta <li> (list item).
Lista va fi identată față de restul paginii Web și fiecare element al listei incepe pe un rând nou.

Tag-urile <ol> și <li> pot avea un atribut type care stabilește tipul de caractere utilizate pentru ordonarea listei. Valorile posibile sunt:

" A " pentru ordonare de tipul A , B , C , D etc. ( litere mari );
" a " pentru ordonare de tipul a , b , c , d etc. ( litere mici );
" I " pentru ordonare de tipul I , II , III , IV etc. ( cifre romane mari );
" i " pentru ordonare de tipul i , ii , iii , iv etc. ( cifre romane mici );
" 1 " pentru ordonare de tipul 1 , 2 , 3 , 4 etc. ( cifre arabe - opțiune prestabilita );

Următorul exemplu este o lista ordonata cu cifre romane:

Tag-ul <ol> poate avea un atribut start care stabilește valoarea inițiala a secvenței de ordonare. Valoarea acestui atribut trebuie să fie un numar intreg pozitiv.
Următorul exemplu este o lista ordonata cu litere mari, incepând de la valoarea C.

Tag-ul <li> poate avea un atribut value care stabilește valoare pentru elementul respectiv al listei. Valoarea acestui atribut trebuie să fie un numar intreg pozitiv (vezi următorul exemplu):

Listele ordonate pot fi imbricate intre ele sau cu liste neordonate, ca în exemplul următor:

O lista de meniuri este un bloc delimitat de etichete corespondente <menu>...</menu>. Fiecare element al listei este initiat de eticheta <li> ( list item ). Cele mai multe browsere afișează lista de meniuri ca pe o lista neordonata.
O lista de directoare este un bloc delimitat de etichete corespondente <dir>...</dir> (de la " director "). Fiecare element al listei este inițiat de eticheta <li> (list item). Cele mai multe browsere afișează lista de directoare ca pe o lista neordonata.
(Nu se recomanda utilizarea acestori tipuri de liste).

Utilizări speciale ale listelor

Dacă într-o listă, în loc de elementele acesteia introduse prin <li>, se inserează un bloc de text, aceasta va fi identat ( intocmai ca elementele unei liste), exemplu:

în exemplul următor lista de definiții are itemii <dt> și <dd> multipli:

Ultimul exemplu este o lista neordonata personalizată care utilizează pe post de elemente imagini și texte.

6. Tabele. Noțiuni și marcaje utilizate.

Tabelele ne permit să cream o rețea dreptunghiulară de domenii, fiecare domeniu având propriile opțiuni pentru culoarea fondului, culoarea textului, alinierea textului etc.
Pentru a insera un tabel se folosesc etichetele corespondente <table>...</table>. Un tabel este format din rânduri. Pentru a insera un rând intr-un tabel se folosesc etichetele <tr>...</tr> ( de la " table row "= rând de tabel ).Folosirea etichetei de sfârșit </tr> este opțională.
Un rând este format din mai multe celule ce conțin date.
O celula de date se introduce cu eticheta <td>..</td>, exemplu:

în mod prestabilit, un tabel nu are chenar. Pentru a adăuga un chenar unui tabel, se utilizează un atribut al etichetei <tabel> numit border.
Acest atribut poate primi ca valoare orice numar intreg ( inclusiv 0 ) și reprezintă grosimea în pixeli a chenarului tabelului.
Dacă atributul border nu este urmat de o valoare atunci tabelul va avea o grosime prestabilită egală cu 1 pixel, o valoare egală cu 0 a grosimii semnifică absenta chenarului.
Când atributul border are o valoare nenulă chenarul unui tabel are un aspect tridimensional, exemplu:

Alinierea tabelului

Pentru a alinia un tabel într-o pagină Web se utilizează atributul align al etichetei <table>, cu următoarele valori posibile:

"left " ( valoarea prestabilita );
"center ";
"right ".

Alinierea este importantă pentru textul ce inconjoară tabelul. Astfel :

Dacă tabelul este aliniat stanga ( <table align="left"> ), atunci textul care urmează după punctul de inserare al tabelului va fi dispus în partea dreapta a tabelului.
Dacă tabelul este aliniat dreapta ( <table align="right"> ), atunci textul care urmează după punctul de inserare al tabelului va fi dispus în partea stanga a tabelului.
Dacă tabelul este aliniat pe centru ( <table align="center"> ), atunci textul care urmează după punctul de inserare al tabelului va fi afișat pe toata lățimea paginii, imediat sub tabel.

Distanta dintre tabel și celelalte elemente din pagina Web poate fi stabilită cu ajutorul atributelor hspace și vspace al etichetei <table>. Valoarea atributului hspace poate fi orice numar pozitiv, inclusiv 0, și reprezintă distanta pe orizontala dintre tabel și celelalte elemente ale paginii Web.
Valoarea atributului vspace poate fi orice numar pozitiv, inclusiv 0, și reprezintă distanta pe verticala dintre tabel și celelalte elemente ale paginii Web.
Aceste atribute funcționează numai cu Netscape Communicator.

Definirea culorilor de fond pentru un tabel

Culoarea de fond se stabilește cu ajutorul atributului bgcolor, care poate fi atasat intregului tabel prin eticheta <table>, unei linii prin eticheta <tr> sau celule de date prin eticheta <td>.
Valorile pe care le poate primi bgcolor sunt cele cunoscute pentru o culoare.
Dacă în tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este următoarea: <td>, <tr>, <table>(cu prioritate cea mai mica).

Culoarea textului din fiecare celula se poate stabili cu ajutorul expresiei:
<font color="valoare">...</font>.

Dimensionarea celulei unui tabel

Distanta dintre doua celule vecine se definește cu ajutorul atributului cellspacing al etichetei <table>. Valorile acestui atribut pot fi numere intregi pozitive, inclusiv 0, și reprezintă distanta în pixeli dintre doua celule vecine.
Valoarea prestabilita a atributului cellspacing este 2.

Distanta dintre marginea unei celule și conținutul ei poate fi definita cu ajutorul atributului cellpadding al etichetei <table>. Valorile acestui atribut pot fi numere intregi pozitive, și reprezintă distanta în pixeli dintre celule și conținutul ei.
Valoarea prestabilita a atributului cellpadding este 1.

Dimensionarea unui tabel

Dimensiunile unui tabel - latime și inălțimea - pot fi stabilite exact prin intermediul a doua atribute, width și height, ale etichetei <table>.
Valorile acestor atribute pot fi:

numere intregi pozitive reprezentând latime respectiv inălțimea în pixeli a tabelului;
numere intregi intre 1 și 100, urmate de semnul %, reprezentând fracțiunea din latime și inălțimea totala a paginii.

în exemplul următor se utilizează un truc care permite afișarea într-o pagină Web a unui text poziționat în centrul paginii.

Titlul unui tabel

Unui tabel i se poate atașa un titlu cu ajutorul etichetei <caption> ( de la "table caption" = titlu tabel ).
Aceasta eticheta trebuie plasata în interiorul etichetelor <table>...</table>, dar nu în interiorul etichetelor <tr> sau <td> Titlul unui tabel poate fi aliniat cu ajutorul atributului align al etichetei <caption> care poate lua una dintre valorile:

" bottom " ( sub tabel );
" top " ( deasupra tabelului );
" left " ( la stanga tabelului );
" right " ( la dreapta tabelului ).

Cap de tabel

Un tabel poate avea celule cu semnificația de cap de tabel. Aceste celule sunt introduse de eticheta <th> ( de la " tabel header " = cap de tabel ) în loc de <td>.
Toate atribute care pot fi atașate etichetei <td> pot fi de asemenea atașate etichetei <th>. Conținutul celulelor definite cu <th> este scris cu caractere aldine și centrat.

Alinierea conținutului unei celule

Alinierea pe orizontala a conținutului unei celule se face cu ajutorul atributului align care poate lua valorile:

"left" ( la stanga );
"center" ( centrat , valoarea prestabilita );
"right" ( la dreapta );
"char" ( alinierea se face fata de un caracter ).

Alinierea pe verticala a conținutului unei celule se face cu ajutorul atributului valign care poate lua valorile:

"baseline" ( la baza );
"bottom" ( jos );
"middle" ( la mijloc, valoarea prestabilita );
"top" ( sus ).

Aceste atribute pot fi atașate atât etichetei <tr> pentru a defini tuturor elementelor celulelor unui rând, cat și etichetelor <td> și <th> pentru a stabili alinierea textului într-o singura celula.

Dimensionarea exacta a celulelor unui tabel

Dimensiunea unei celule de tip <td> sau de tip <th> pot fi stabilite exact cu ajutorul a două atribute ale acestor etichete: width pentru latime și height pentru inălțime.
Valorile posibile ale acestor atribute sunt:

numere intregi pozitive ( inclusiv 0 ) reprezentand dimensiunea în pixeli a latimii, respectiv a inaltimii unei celule;
procente din latime , respectiv inaltimea tabelului.

Tabele de forme oarecare

Un tabel trebuie privit ca o retea dreptunghiulara de celule. Cu ajutorul a doua atribute ale etichetelor <td> și <th>, o celula se poate extinde peste celule vecine.
Astfel:

extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului colspan, a cărui valoare determină numarul de celule care se unifică.
extinderea unei celule peste celulele dedesubt se face cu ajutorul atributului rowspan, a carui valoare determină numarul de celule care se unifică.

Sunt posibile extinderi simultane ale unei celule pe orizontala și pe verticala. în acest caz , în etichetele <td> și <th> vor fi prezente ambele atribute colspan și rowspan.

Atributul " nowrap "

Atributul nowrap apartine elementelor <td> și <th> ; el interzice intreruperea unei linii de text.Astfel , în tabel pot apărea coloane cu o lățime oricit de mare.

Celule vide ale unui tabel

Dacă un tabel are celule vide, atunci aceste celule vor aparea în tabel fară un chenar de delimitare.
în scopul de a afișa un chenar pentru celule vide se utilizează urmatoarele trucuri:

dupa <td> se pune  ;
dupa <td> se pune <br>.

Caracterul   ( no break space ) este de fapt caracterul spatiu. Un spațiu introdus prin intermediul acestui caracter nu va fi ignorat de browser.

Atribute Internet Explorer pentru tabele

Urmatoarele atribute ale etichetei <table> functioneaza cu Internet Explorer 4.0 , 5.0, dar nu cu Netscape Communicator 4.5:

background permite stabilirea unei imagini pentru fondul unui tabel.Primeste ca valoare adresa URL a imaginii folosite pentru fond;
bordercolor permite stabilirea culorii pentru chenarul unui tabel;
bordercolorlight permite stabilirea culorii pentru chenarul 3D al unui tabel;
bordercolordark permite stabilirea culorii pentru chenarul 3D al unui tabel;

Grupuri de coloane

Blocul <colgroup>...</colgroup> permite definirea unui grup de coloane. Atributele acceptate de <colgroup> sunt:

span determina numarul de coloane dintr-un grup;
width determina o latime unica pentru coloanele din grup;
align determina un tip unic de aliniere pentru coloanele din grup.

Exemplu:
<colgroup span="3" width="100"></colgroup>
intr-un bloc <colgroup>, coloanele pot avea configurări diferite dacă se utilizează elementul <col>, care admite atributele:

span identifica acea coloană din grup pentru care se face configurarea. Dacă lipsește, atunci coloanele sunt configurate în ordine;
width determina o latime pentru coloana identificata prin span;
align determina o aliniere pentru coloana identificata prin span.

Atributele frame și rules

Atributul frame al etichetei <table> permite specificarea parților din chenarul unui tabel care vor fi afișate.
Valorile posibile ale acestui atribut sunt:

void - elimina toate muchiile exterioare ale tabelului;
above - afișează o muchie în partea superioara a cadrului tabelului;
below - afișează o muchie în partea inferioara a cadrului tabelului;
hsides - afișează cate o muchie în partea superioara și inferioara cadrului tabelului;
lhs - afișează o muchie în partea din stanga a cadrului tabelului;
rhs - afișează o muchie în partea din dreapta a cadrului tabelului;
vsides - afișează o muchie în partea din stanga și din dreapta a cadrului tabelului;
box - afișează o muchie pe toate laturile cadrului tabelului;
border - afișează o muchie pe toate laturile cadrului tabelului;

Atributul rules al etichetei <table>permite alegerea unor delimitatori pentru celulele unui tabel. Valorile posibile sunt:

none - elimina toate muchiile interioare ale tabelului;
groups - afișează muchii orizontale intre toate grupurile din tabel.Grupurile sunt specificate prin elementele <thead>, <tbody>, <tfoot>și <colgroup>.
rows - afișează muchii orizontale intre toate liniile tabelului;
cols - afișează muchii verticale intre toate coloanele tabelului;
all - afișează muchii intre toate liniile și coloanele;

Subblocurile unui tabel

în specificatiile HTML 4.0, continutul unui tabel poate fi impărțit în subblocuri prin elementele:

<thead><tr><td>...</thead> ( un singur rand );
<tfoot><tr><td>...</tfoot> ( un singur rand );
<tbody><tr><td>...</tbody> ( oricate randuri );

intr-un tabel exista un singur subbloc de tipul <thead> și un singur subbloc de tipul <tfoot>, dar pot exista mai multe subblocuri de tip <tbody>.

7. Operarea cu obiecte. Inserarea imaginilor, sunetelor și videoclipurilor.

7.1.Inserarea imaginilor

Folosirea imaginilor sporește atractivitatea și designul paginii, duce la o mai bună ințelegere a mesajului, dar trebuie luat în considerație și faptul că excesul de imagini va duce la incărcarea greoaie a site-ului. Există numeroase formate grafice, dar cele mai răspândite sunt:

GIF (Graphics Interchange Format) introdus de Compuserve
JPEG (Joint Photographic Expert Group)
PNG (Portable Network Graphic – Format Grafic portabil în rețea)

Aceste formate sunt dependente de platformă. Imaginile grafice sunt construite din pixeli, care sunt puncte distincte de informație de imagine. Fiecare pixel necesită un bit de culoare. Principalele caracteristici ale formatelor de imagine sunt: numărul de culori, compresia, transparența, intrețeserea și animația. Asemănările și deosebirile dintre cele trei formate grafice sunt:

Imaginile GIF pot utiliza doar 256 de culori, având nevoie de 8 biți, în timp ce formatele JPEG și PNG pot utiliza milioane de culori, având 24 de biți de culoare, respectiv 32 de biți /pixeli de culoare. Ceea ce face formatul GIF atât de utilizat nu este numai paleta mică de culori (256), dar și posibilitatea reducerii numărului de culori, astfel, dacă este nevoie doar de 2 culori, se utilizează numai un bit, ceea ce reduce dimensiunea fișierului de 8 ori.
Toate aceste trei formate grafice pot comprima imaginea pentru a reduce dimensiunile fișierelor. Comprimarea se poate face, în mod diferit, pentru fiecare format, și, din aceste motive, ele pot avea dimensiuni mai mici intr-un format decât în altul.
Formatele GIF și PNG admit culoarea transparentă, în timp ce formatul JPEG nu admite transparența.
Formatele GIF și PNG admit animația, în timp ce, cu formatul JPEG, nu se poate obține animație. De exemplu, pentru a obține animație pentru imagini GIF se poate folosi pentru Windows pachetul GIF Construction Set, iar pentru Macintosh pachetul soft GIFBuilder.
Toate cele trei formate acceptă intrețeserea. De exemplu, când se vizualizează o pagină web, se pot observa imaginile care apar linie cu linie, de la forma brută până la redarea finală, aceasta reprezintă intrețeserea. Deși dimensiunea fișierelor crește cu până la 10%, cu ajutorul acestei intrețeseri, vizitatorul poate să-şi facă o imagine despre ceea ce se va descărca.

Având în vedere cele cinci caracteristici ale formatelor de imagine, acestea pot fi recomandate:

GIF – pentru majoritatea imaginilor din web, butoane, panouri publicitare, desene etc., datorită dimensiunii mici a fișierelor.
JPEG pentru fotografii, când se dorește să se redea cât mai exact culoarea reală a imaginii.
PNG – pentru desene complexe, dar și pentru fotografii, acesta fiind formatul care imbină caracteristicile celor două.

Imaginile pot fi descărcate de la adrese absolute sau relative. Adresele URL (Uniform Resource Locator) reprezintă standarde de identificare a resurselor (de exemplu, fișiere) și pot fi adrese URL absolute și relative.

Adrese URL absolute

Adresele absolute identifică locația unui fișier imagine de pe Internet sau alte calculatoare conectate la Internet și au sintaxa: protocol/nume_calculator/cale/nume_fișier

Un exemplu de adresă URL absolută: http://web.ceiti.md/images/eu.jpg
unde:

htpp:// – este protocolul Internet utilizat;
web.ceiti.md – este numele calculatorului;
images – este calea până la fișierul imagine dorit;
eu.jpg – este fișierul imagine C.A.

Adrese URL relative

O adresă relativă identifică locația unei imagini, descriind o cale relativă la directorul curent unde se află fișierul imagine. Adresele relative se referă la localizarea fișierului imagine de pe calculatorul personal și are sintaxa: cale/nume_fișier.

Referirea la:
– directorul părinte se poate face prin “../”
– directorul rădăcină se poate face prin “/”
Un exemplu de adresă URL relativă: /../../../friend.jpg sau se mai poate scrie c:/windows/web/wallpaper/friend.jpg

Toate imaginile cu care vom lucra vor avea adresa URL exprimată în funcție de directorul ce conține documentul HTML care face referire la imagine, adică adresă relativă.

Imaginile se inseraeză în pagini cu ajutorul tag-ului <img>, care este un element inline, adică poate fi inserat oriunde în pagină. Sintaxa acestui element este: <img atribute>.

în continuare este prezentat un exemplu de utilizare a elementului <img>:

Pentru ca acest exemplu să poată fi executat, trebuie ca fișierul Taj_Mahal.jpg să fie în același folder cu pagina, deoarece nu s-a indicat nicio adresă.

Atributele elementului img

Atributele elementului <img> sunt: src, alt, align, border, height, width, hspace, vspace.

În continuare vor fi descrise succint aceste atribute.

Atributul src

Atributul src este un atribut obligatoriu al elementului IMG, care identifică fișierul ce conține imaginea care se dorește a fi inserată. Fișierele imagine pot avea extensia: .jpg, jpeg, png etc. Fișierul care conține imaginea se găsește în directorul curent (ca în exemplul de mai sus), în alt folder din calculatorul curent sau în rețeaua web. În cazul în care fișierul se află:

în altă locație decât directorul curent, numele fișierului trebuie precedat de calea relativă la directorul curent;
în rețeaua web, trebuie dată adresa URL absolută, ca de exemplu http://ceiti.md/galerie/img_1631.jpg.

Atributul alt
Există posibilitatea ca imaginile să nu se poată incărca din diferite motive, situație în care se folosește atributul alt al elementului <img>. Valoarea acestui atribut este un text, care va fi afișat în locul imaginii.

Atributul align

Atributul align indică browser-ului cum va fi aliniată poza față de text. în lipsa unei opțiuni, poza este plasată acolo unde este scrisă în cod (<img>este element inline, iar textul incepe de la baza pozei).Valorile atributului sunt:

left – aliniere la stânga și textul „curge” pe lângă imagine în dreapta ei, incepând din partea superioară;
right – aliniere la dreapta și textul „curge” pe lângă imagine în stânga ei, incepând din partea superioară ;
top – textul este plasat în partea superioară a imaginii;
middle – textul are plasat, la mijlocul imaginii, numai primul rând, restul continuând sub imagine;
bottom – textul este plasat în partea de jos a imaginii și continuă sub imagine.

În exemplul următor se poate vedea modul de aliniere a imaginii într-o pagină:

Atributul border

Atunci când se inserează o imagine, browser-ul o va afișa fără chenar. Pentru a adăuga un chenar unei imagini se folosește atributul border=”nr_pixeli”, unde nr_pixeli reprezintă grosimea chenarului în pixeli. Valoarea implicită este 0. Dacă în exemplul de mai sus se mai adaugă acest atribut <img src="Taj_Mahal.jpg" height ="150" width = "150" border = "4"> browser-ul va afișa: vezi ...

Atributele width și height

Imaginea este transferată de browser-e de la adresele URL la adresa de unde se vizualizează pagina, la dimensiunile ei reale. Pentru a redimensiona o imagine pe lățime se folosește atributul width, iar pe inălțime se folosește atributul height. Redimensionarea unei imagini se face în mod absolut în pixeli sau prin raportare la ecran, astfel că valorile acestor atribute pot fi date în:

numere naturale, ce reprezintă dimensiunea în pixeli;
în procente, ce reprezintă o fracțiune din dimensiunea ferestrei.

OBSERVAȚII!

Dacă se modifică doar o dimensiune, imaginea va fi afișată de browser proporțional;
Dacă se modifică ambele dimensiuni, imaginea va fi afișată de browser deformată.

Un exemplu de redimensionare a imaginii este dat mai jos.

Atributele hspace și vspace

Aceste atribute au același efect ca și atributele cu același nume ale elementului <table>, și, anume, asigură distanța de la imagine la celelalte componente din pagină, pe orizontală (hspace) și pe verticală (vspace), adică definesc spații albe în jurul imaginilor.

Un exemplu în care sunt folosite aceste atribute este dat mai jos.

Atributul clear al elementului BR

Dacă se dorește a se șterge textul din jurul unei imagini se folosește elementul <br clear=”valoare”>, unde valoare poate fi:

all – se șterge tot textul din jurul imaginii
left – se șterge tot textul din stânga imaginii
right – se șterge tot textul din dreapta imaginii
none – se lasă textul din jurul imaginii

În exemplul de mai sus se adaugă <BR clear=right>, după elementul <img>

O imagine poate fi utilizata pentru a stabili fondul unei pagini Web. În acest scop se foloseste atributul background al etichetei <body>, având ca valoare adresa URL a imaginii.
Imaginea se multiplică pe orizontală și pe verticală până umple intregul ecran.

Utilizari speciale ale imaginilor

Imaginile pot fi utilizate pentru a obține efecte deosebite într-o pagină web. Printre aceste utilizări speciale putem enumera:

Linii orizontale formate cu ajutorul imaginilor;
Simboluri speciale pentru elementele unei liste neordonate.

7.2.Inserarea sunetelor și videoclipurilor

Multimedia se prezintă într-o multitudine de formate, iar pe Internet veți găsi multe dintre aceste elemente inglobate în pagini web. Browser-ele actuale oferă suport pentru multe dintre aceste formate, dar nu pentru toate. Suportul pentru sunete, animații și video este tratat în mod diferit de browsere diferite. Unele elemente pot fi manevrate intern, altele necesită anumite plug-în-uri, în vreme ce altele pot solicita activarea anumitor controale ActiveX.

În acest capitol veți afla despre diferitele formate multimedia și cum să le folosiți într-o pagină web.

Elementele multimedia (precum sunetele și video) sunt stocate în fișiere media. Modalitatea cea mai simplă de a determina tipul unui fișier media este de a analiza extensia fișierului respectiv .

Formatul fișierelor multimedia ce conțin sunete.

Sunetele pot fi stocate în diferite formate de fișiere. Astfel deosebim:

a) Formatul MIDI

MIDI (Musical Instrument Digital Interface) este un format ce permite transmiterea de informații muzicale intre dispozitive electronice muzicale (precum sintetizatoare) și plăcile de sunet ale calculatoarelor. Formatul MIDI a fost implementat în 1982 de către industria muzicală. Acest format este foarte flexibil și poate fi folosit pentru (aproape) orice, de la crearea unor sunete foarte simple, până la crearea unora cu adevărat profesionale. Fieșierele MIDI nu conțin sunete, ci un set de instrucțiuni digitale muzicale (note muzicale) care pot fi interpretate de plăcile de sunet ale calculatoarelor. Dezavantajul la acest tip de fișiere constă în faptul că nu pot stoca muzică (în toată complexitatea ei), ci doar note muzicale. Avantajul il constituie mărimea mică a acestor fișiere, prin urmare se pot incărca ușor într-o pagină web, precum și faptul că acest format este suportat de majoritatea sistemelor de operare și de cele mai populare browsere de Internet. Fișierele de tip MIDI au extensia .mid sau .midi.

b) Formatul RealAudio

Formatul RealAudio a fost dezvoltat pentru Internet de către Real Media. Acest format suportă chiar și video.Formatul permite difuzarea de informații audio (muzică on-line, Internet radio) cu lățime de bandă joasă. Din cauza acestei lățimi de bandă, calitatea este, de cele mai multe ori, slabă.Fișierele de tip RealAudio au extensia .rm sau .ram.

c) Formatul AU

Acest formatul a fost dezvoltat de către Sun Microsystems și este suportat de majoritatea sistemelor de operare.Aceste fișierele au extensia .au.

d) Formatul AIFF

AIFF (Audio Interchange File Format) a fost dezvoltat de către Apple. Acest tip de fișiere nu sunt suportate de toate browser-ele.Aceste fișierele au extensia .aif sau .aiff.

e) Formatul SND

SND (Sound) a fost dezvoltat, de asemenea, de către Apple și au același dezavantaj, și anume că nu sunt suportate de toate browser-ele.Aceste fișierele au extensia .snd.

f) Formatul WAVE

WAVE (waveform) a fost dezvoltat de către IBM și Microsoft. Este un format suportat de toate computerele pe care rulează Windows și este recunoscut de majoritatea browsere-lor.Fișierele de tip WAVE au extensia .wav.

g) Formatul MP3

Fișierele MP3 sunt de fapt fișiere MPEG, dezvoltate inițial pentru video de către Moving Pictures Experts Group. Se poate afirma că fișierele MP3 reprezintă partea de sunet dintr-un fișiere video în format MPEG. MP3 este în prezent unul dintre cele mai populare formate folosite la inregistrarea muzicii. Sistemul de codificare MP3 combină o bună compresie (ce duce la fișiere mici) cu calitate inaltă. Este de așteptat ca pe viitor toate sistemele de operare să ofere suport pentru acest tip de format. Fișierele de tip MP3 au extensia .mp3 sau .mpga.

În funcție de scopul pentru care creați o pagină web multimedia va trebui să vă orientați și asupra unui anumit format de fișier. Astfel, dacă doriți ca sunetele inregistrate (muzică sau de alt tip) să poată fi asculatet de toți vizitatorii paginii web, atunci trebuie să folosiți fișiere în format WAV, intrucât este cel mai popular format pe Internet și este suportat de majoritatea browsere-lor. Dacă pagina web este despre inregistrări muzicale, atunci formatul cel mai potrivit este MP3.

Formatul fișierelor multimedia ce conțin video

Şi imaginile video pot fi stocate în diferite formate de fișiere. Astfel deosebim:

a) Formatul AVI

Formatul AVI (Audio Video Interleave) a fost dezvoltat de către Microsoft. Este un format suportat de toate computerele pe care rulează Windows și este recunoscut de majoritatea browsere-lor. Deși este un format des intâlnit pe Internet, nu este intotdeauna suportat de calculatoarele cu sisteme de operare non-Windows. Fișierele de tip AVI au extensia .avi.

b) Formatul Windows Media

Acest formatul a fost dezvoltat de către Microsoft. Și acest format este unul suportat de toate computerele pe care rulează Windows, dar nu este suportat de calculatoarele cu sisteme de operare non-Windows decât în urma instalării unor extra componente (playere specializate).Fișierele de tip Windows Media au extensia .wmv.

c) Formatul MPEG

Formatul MPEG (Moving Pictures Expert Group) este în prezent unul dintre cele mai populare formate folosite pe Internet. Acest format este suportat de majoritatea sistemelor de operare și de cele mai populare browsere de Internet. Fișierele de tip MPEG au extensia .mpg sau .mpeg.

d) Formatul QuickTime

Formatul QuickTime a fost dezvoltat de către Apple și nu poate rula pe platformele Windows fără instalarea unui player specializat. Fișierele de tip QuickTime au extensia .mov sau .qtm.

e) Formatul RealVideo

f) Formatul Shockwave (Flash)

Formatul Shockwave a fost dezvoltat de către Macromedia. Acest format necesită instalarea unui player specializat pentru a putea rula. în prezent, această componentă este oferită preinstalată de ultimele versiuni ale browsere-lor Netscape și Internet Explorer. Fișierele de tip Shockwave au extensia .swf.

Adăugarea de informații multimedia unei pagini web

Informațiile multimedia pot fi redate direct de browser sau prin intermediul unui program ajutător (un player specializat), în funcție de elementul HTML și de formatul fișierului multimedia folosit.

Cea mai simplă cale de a realiza acest lucru este prin folosirea unei ancore (link) care să ducă la sursa elementului multimedia. Este cea mai “prietenoasă” metodă intrucât oferă posibilitatea vizitatorilor de a alege intre a vedea o pagină web cu elemente multimedia sau fără acestea. în acest caz pagina se incarcă mult mai repede nemaifiind nevoie să se incarce toate informațiile multimedia.

O metodă specifică, mai complexă, ce are ca rezultat includerea în pagina web (ca parte integrantă din aceasta) a unor informații multimedia, se realizează prin intermediul elementului <OBJECT>.

Notă: Deși, în funcție de browser-ul folosit, mai pot fi folosite și alte elemente, cum ar fi <BGSOUND>, recunoscut de Internet Explorer, și <EMBED>, recunoscut de Internet Explorer și Netscape, consorțiul W3C (World Wide Web Consortium) recomandă utilizarea elementului <OBJECT>.

Atributele utilizate cu acest element sunt:

Atribut	Descriere
archive	Precizează locația (URL-ul) fișierelor arhivă
classid	Precizează locația (URL-ul) obiectului. Valorile posibile depind de proiectantul elementului de control. în Windows, aceste valori sunt inscrise în regiștri și pot fi accesate cu aplicația *Registry Editor*
codebase	Precizează calea (URI-ul) în care se găsește clasa obiectului specificat prin atributele classid, data şi archive
codetype	Specifică tipul fișierului specificat prin atributul classid
data	Precizează numele și locația (URL-ul) obiectului. Se poate folosi împreună sau ca o alternativă a atributuluiclassid, în funcție de tipul obiectului
declare	Cind este prezent, acet atribut face ca definiția curentă introdusă de elementul <OBJECT> să fie tratată ca o simplă declarație
height	Specifică inălțimea suprafeței în care va fi afișat obiectul
name	Precizează denumirea obiectului (când acesta este cuprins intr-un formular)
standby	Precizează textul ce va fi afișat până când este incărcat obiectul
tabindex	Precizează poziția elementului curent în document (ordinea în care va fi focalizat de utilizator când se folosește tastatura)
type	Determină tipul MIME asociat cu fișierul respectiv. Este un atribut opțional dar recomandat când se folosește atributul data
width	Specifică lățimea suprafeței în care va fi afișat obiectul

Acest element necesită în mod obligatoriu tag-ul de inchidere corespunzător </OBJECT>. Împreună cu elementul <OBJECT> (în interiorul acestuia) se folosește și elementul asociat <PARAM> care definește parametrii elementului <OBJECT>.

Atributele utilizate cu acest element sunt:

Atribut	Descriere
id	Precizează un identificator unic pentru element
name	Precizează o denumire pentru element
type	Determină tipul conținutului
value	Specifică valoarea parametrului
valuetype	Specifică tipul valoarii parametrului

Elementul <OBJECT> poate suporta diferite tipuri de informații multimedia, cum ar fi imagini, sunete, video, pagini web etc. în funcție de tipul acestor informații, diferă și sintaxa folosită în limbajul HTML. Astfel, pentru a insera o imagine (în format .jpg), prin intermediul elementului <OBJECT>, se folosește următoarea sintaxă:

<OBJECT HEIGHT="..." WIDTH="..." TYPE="image/jpeg" DATA="nume_fisier.jpg">
</OBJECT>

Pentru a insera un sunet (în format .wav) se folosește următoarea sintaxă:

<OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<PARAM NAME="FileName" VALUE="nume_fisier.wmv">
</OBJECT>

Pentru a insera un film (în format .wmv) se folosește următoarea sintaxă:

<OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<PARAM NAME="FileName" VALUE="nume_fisier.wmv">
</OBJECT>

Pentru a insera o pagină web se folosește următoarea sintaxă:

<OBJECT TYPE="text/html" HEIGHT="..." WIDTH="..." DATA="http://www.pagina_web.com">
</OBJECT>

Pentru a insera o animație creată în Flash (în format .swf) se folosește următoarea sintaxă:

<OBJECT WIDTH="..." HEIGHT="..." CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0">
<PARAM NAME="SRC" VALUE=" nume_fisier.swf">
</OBJECT>

Inserarea unui film QuickTime într-o pagină web

Formatul QuickTime a fost dezvoltat de către Apple și, deși este un format des intâlnit pe Internet, nu poate rula pe platformele Windows fără instalarea unui player specializat. Fișierele de tip QuickTime au extensia .mov sau .qtm. Cu ajutorul elementului <OBJECT> poate fi ușor adăugat cod într-o pagină web astfel incât un film QuickTime să poată fi inserat într-o pagină web. Astfel, se poate seta instalarea automată a unui player QuickTime în cazul în care nu este deja instalat.

Sintaxa folosită în mod uzual este de forma următoare:

<OBJECT WIDTH="240" HEIGHT="300" CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<PARAM NAME="src" VALUE="sample.mov">
<PARAM NAME="autoplay" VALUE="true">
<PARAM NAME="controller" VALUE="true">
</OBJECT>

Atributele width şi height trebuie setate astfel incât să corespundă dimensiunii fimului QuickTime (în pixeli).

Atributul classid identifică în mod unic software-ul ce va rula filmul. Trebuie setat "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" astfel incât să identifice controlul ActiveX ce trebuie instalat pe computer inainte ca filmul să poată fi rulat. Dacă utilizatorul nu are instalat respectivul control ActiveX, browser-ul poate în mod automat să-l descarce și să-l instaleze.

Atributul codebase specifică calea (URI-ul) în care se găsește clasa obiectului specificat prin atributul clsid. Internet Explorer folosește acest atribut pentru a specifica locația de unde poate fi descărcat player-ul corespunzător. în acest caz, trebuie setată "http://www.apple.com/qtactivex/qtplugin.cab", aceasta fiind locația unde se găsește ultima variantă a player-ului QuickTime.

Parametrul src trebuie să se orienteze asupra fișierului ce conține filmul.

Parametrul autoplay se setează "true" în cazul în care se dorește ca filmul să inceapă să ruleze automat.

La fel și parametrul controller se setează "true" în cazul în care se dorește să fie afișată bara de control a player-ului.

Inserarea unui film Real Video într-o pagină web

Formatul RealVideo a fost dezvoltat pentru Internet de către Real Media. Formatul permite difuzarea de informații video (video on-line, Internet video) cu lățime de bandă joasă. Din cauza acestei lățimi de bandă, calitatea este, de cele mai multe ori, slabă.Fișierele de tip RealVideo au extensia .rm sau .ram. Cu ajutorul elementului <OBJECT> se introduce codul în pagina web astfel incât filmele Real Video să poată fi inserate într-o pagină web. Spre deosebire de formatul QuickTime, nu se poate seta instalarea automată a player-ului corespunzător în cazul în care nu este deja instalat. Prin urmare, inainte de a putea rula un film în format Real Video, este necesară instalarea programului RealPlayer. Versiunea pentru Windows poate fi descărcată de la adresa http://uk.real.com/?mode=rp .

Sintaxa folosită în mod uzual este de forma următoare:

<OBJECT WIDTH="320" HEIGHT="240" CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
<PARAM NAME="controls" VALUE="All">
<PARAM NAME="autostart" VALUE="true">
<PARAM NAME="src" VALUE="sample.rm">
</OBJECT>

Atributele width şi height trebuie setate astfel incât să corespundă dimensiunii fimului Real Video (în pixeli).

Atributul classid identifică în mod unic software-ul ce va rula filmul. Trebuie setat "clsid: CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" astfel incât să identifice controlul ActiveX ce trebuie instalat pe computer inainte ca filmul să poată fi rulat.

Parametrul src trebuie să se orienteze asupra fișierului ce conține filmul.

Parametrul autostart se setează "true" în cazul în care se dorește ca filmul să inceapă să ruleze automat.

Parametrul controls se setează "All" în cazul în care se dorește să fie afișată bara de control a player-ului sau "ImageWindow " în cazul în care NU se dorește să fie afișată bara de control a player-ului.

Alte metode de inserare a unor sunete într-o pagină web

Așa cum am atras atenția anterior, pentru introducerea de sunete într-o pagină web mai pot fi folosite și alte elemente, cum ar fi <BGSOUND>, recunoscut de Internet Explorer, și <EMBED>, recunoscut de Internet Explorer și Netscape.Elementul <BGSOUND> este folosit pentru a insera un sunet pe fundalul unei pagini web. Fișierele suportate de acest element pot fi în format WAV, AU sau MID. Atributele caracteristice acestui element sunt:

Atribut	Descriere
balance	Precizează balansul. Poate lua valori intre -10000 (100% stânga) și +10000 (100% dreapta)
delay	Definește timpul de pauză dintre repetiții
id	Definește un identificator atribuit sunetului
loop	Precizează de câte ori va fi repetat sunetul (-1 = infinit)
src	Precizează locația (URL-ul) fișierului ce conține sunete
title	Precizează un titlu atribuit sunetului
volume	Precizează volumul. Poate lua valori intre 0 (max.) și -10000 (min.)

Sintaxa folosirii acestui element este foarte simplă:

<html>
<body>
<H2>Muzica în fundal </H2>
<BGSOUND SRC="http://web.ceiti.md/muz/town.mid">
</body>
</html>

Folosind codul de mai sus veți obține o pagină web pe fundalul cărei se va auzi o piesă instrumentală.Elementul <EMBED> este folosit pentru a insera elemente multimedia într-o pagină web în cazul browsere-lor care nu suportă elementul <OBJECT>. Elementul <OBJECT> poate fi folosit cu browserele mai noi, care suportă controale ActiveX (Internet Explorer ³ 5), în vreme ce elementul <EMBED> este recomandat să fie folosit pentru browserele mai vechi. Pentru compatibilitate, se recomandă folosirea simultană a celor două elemente. în această situație, un browser care recunoaște elementul <OBJECT> va ignora elementul <EMBED>.

Atributele caracteristice acestui element sunt:

Atribut	Descriere
autostart	Stabilește dacă obiectul multimedia pornește în mod automat la incărcarea paginii web. Poate lua valorile true sau false
height	Specifică inălțimea suprafeței în care va fi afișat obiectul
hidden	Stabilește dacă obiectul multimedia este vizibil pentru vizitatorul paginii web. Poate lua valorile true sau false
src	Precizează locația (URL-ul) fișierului ce conține sunete
width	Specifică lățimea suprafeței în care va fi afișat obiectul
volume	Precizează volumul. Poate lua valori intre 0 (max.) și -10000 (min.)

impreună cu elementul <EMBED> se recomandă folosirea elementului <NOEMBED> care ar trebui să conțină informații ce vor fi afișate în cazul în care browser-ul nu suportă elementul <EMBED>. Din nefericire, un browser care suportă elementul <EMBED> va ignora elementul <NOEMBED>, chiar dacă este incapabil să afișeze obiectul introdus de elementul <EMBED>.

Sintaxa recomandată pentru folosirea acestui element este următoarea:

   <EMBED SRC="http://web.ceiti.md/cale/fișier_multimedia" WIDTH="..." HEIGHT="..." >
  <NOEMBED>
  <P>Din păcate nu aveți instalat  plugin-ul corespunzător pentru a vedea acest tip de fișier multimedia.  Puteți vedea în continuare o imagine edificatoare.
  <IMG SRC="http://web.ceiti.md/cale/fișier_imagine" WIDTH="..." HEIGHT="..." ALT="o imagine edificatoare">
  </NOEMBED>

Se poate folosi chiar și o combinație intre elementele <EMBED> și <BGSOUND>, astfel incât, dacă unul din elemente nu este suportat de browser, să fie recunoscut celălalt.

Folosirea codului următor:

Notă:
Bara de control afișată aparține player-ului QuickTime deoarece a fost setat ca "Default Player" pentru fișierele de tip .MID.

Aplicație practică

Pentru exemplificare, vom crea un fișier test.html ce va cuprinde o parte dintre elementele prezentate anterior:

8. Referințe. Referințe interne și externe.

Până acum am invățat să creăm documente HTML în care am introdus text și imagini. în acest capitol vom arăta cum putem accesa orice resursă Web, Internet și internă cu ajutorul referințelor (legături, link-uri, hiperlegături).

Referințele au următoarele roluri:

Permit trecerea de la o pagină la alta de pe Web și revenire la pagina inițială prin apăsarea butonului Back al browser-ului;
Permit trecerea de la o pagină la alta de pe calculatorul propriu;
Permit trecerea la fișiere non web de pe Internet (ftp, telnet etc.);
Permit trecerea la fișiere non HTML (.txt, .jpg, .pdf etc.);
Permit vizitarea unei pagini оncepând dintr-un anumit loc, renunțând la barele de defilare;
Permit trimiterea unui e-mail.

8.1. Marcajul <a>

Pentru a crea o legătură se folosește marcajul <a> ancoră, care are sintaxa: <a atribute> conținut </a>

Conținutul dintre marcajele <a> și </a> poate fi text și/sau imagine, este afișat de browser sub formă de legătură (colorat și subliniat), și poate accepta comenzi de la mouse (un clic) sau de la tastatură (ENTER). Când este deasupra unei legături, cursorul grafic ia forma unei mâini, indicându-ne astfel că browser-ul este pregătit să descarce resursa Internet de la adresa URL indicată. Dacă un document are mai multe legături ne putem deplasa de la una la alta și cu mouse-ul și cu ajutorul tastei TAB, iar pentru a face o legătură activă se execută clic cu butonul stâng pe legătură sau se tastează ENTER.

Atributele tag-ului <a> sunt:

href;
target;
title;
name;

Atributul href

Atributul href (referință hipertext) este obligatoriu pentru tag-ul legătură (ca src pentru elementul <img>), are sintaxa href="adresa URL" și are rolul de a identifica o adresă URL absolută (de pe Internet) sau relativă (locală). în exemplul de mai jos dăm o referință către un fișier local, flori.jpg, și către pagina Colegiului de Informatică, de pe WEB:

Atributul target

Când utilizatorul activează o legătură, browser-ul inlocuiește fereastra care conține legătura cu o nouă fereastră, specificată de adresa URL din href. Atributul target face să se schimbe această operație implicită și el are sintaxa target="nume", unde nume definește fereastra în care va fi incărcată noua pagină. Numele este orice șir de caractere sau valori constante:

_blank pagina va fi incărcată într-o nouă fereastră;
_parent pagina va fi incărcată în fereastra părinte;
_top pagina va fi incărcată în fereastra top a cadrului;
_self pagina va fi incărcată în aceeași fereastră(implicită).

Atributul title

Acest atribut are un caracter general și poate fi atașat la majoritatea elementelor HTML. Sintaxa acestui element este: title="valoare". Când mouse-ul este deasupra conținutului tag-ului <a> conținut </a> se transformă într-o mână și va afișa valoarea atributului title, într-o sugestie de instrument (într-un cadru).

Atributul name

Acest atribut este utilizat pentru a defini o ancoră în interiorul unei pagini. Sintaxa acestui atribut este: name="valoare".

8.2. Referințe către alte pagini Web

Dacă se dorește accesarea unei pagini de pe alt site, valoarea atributului href este o adresă URL absolută. Amintim că o adresa URL absolută are sintaxa: protocol /nume-calculator/cale/fișier unde protocol poate fi, de exemplu, http.
Exemplu:

Același rezultat obținem dacă scriem și numele fișierului index(default) care se incarcă <a href="http://www.edu.md/index.php"> ME </a>

Dacă se dorește să se viziteze altă pagină a respectivului site, se scrie numele fișierului .php(.html), respectiv.

8.3.Referințe cu imagini

Așa cum am specificat mai sus, o legătură poate fi creată și cu ajutorul unei imagini. Ca și în cazul în care conținutul unei legături este un text, și în cazul în care conținutul este o imagine, accesarea paginii se face cu un clic, sau un ENTER pe imagine.

Exemplu:

Un link poate fi format și din text și din imagine adică:

8.4.Referințe cu adrese URL relative

Adresele URL relative sunt acele adrese care fac referire la pagini de pe calculatorul propriu, indicând cale/nume-fișier, fără a fi prefixate de protocol și nume calculator. în adresele relative putem folosi caracterele ../ – pentru a urca un nivel în structura de directoare(către directorul părinte).

Se cunoaște faptul că un site poate să aibă paginile (fișierele) organizate într-o structură arborescentă de directoare. Să presupunem că avem următoarea structura arborescentă :

Conform structurei arboriscente date din pagina pag6.html din mapa M5 se pot accesa celelalte pagini, utilizând următoarele referințe:

../../pag1.html
../../M1/pag2.html
../../M3/M6/pag7.html
...

8.5. Referințe către informații non Web

Se pot face referințe și la adrese URL absolute de pe Internet, care nu sunt resurse Web. în adresele URL absolute se inlocuiește protocolul http cu alte protocoale non Web (ftp, telnet, gopher etc.).

Exemplu:

7.6.Referințe către fișiere non HTML

Se pot stabili legături către orice tip de fișiere, nu numai html, ca de exemplu .pdf, .txt, .gif, .rar, .zip, etc. în aceste condiții se intâlnesc două situații:

Browser-ul nu poate lucra cu fișierul intâlnit și atunci incearcă să-l descarce, executând operația download.
Browser-ul cunoaște tipul de fișier și acesta va fi deschis în fereastra sa.

Exemplu:

8.7.Referințe interne în cadrul unei pagini

În această secțiune vom defini ancore (ținte) într-o pagină, adăugarea legăturilor către aceste ținte, precum și legături către ținte din documente externe. Dacă documentele HTML sunt prea lungi și sunt greu de parcurs, pentru a evita parcurgerea cu bara de defilare, se definesc ancore. Ancorele ne permit să ne deplasăm rapid intr-un loc din document. Ancora este un identificator al inceputului unui element dintr-o pagină web. Dacă au fost definite ancore într-o pagină, se pot crea legături către respectivele ancore.

Ancorele se pot defini în două moduri:

utilizând orice element HTML, inclusiv elementul <a> cu atributul id, de exemplu: <p id="valoare_id"> sau <a id="valoare_id"> </a>
utilizând tag-ul <a> cu atributul name, de exemplu: <a name="valoare_nume"> </a>

Pentru a crea o legătură la o ancoră se folosește tag-ul <a>...</a> cu atributul href, care are ca valoare o referință de ancoră, precedată de simbolul “#”, astfel:

# valoare_nume
# valoare_id

Fișierul trebuie să fie suficient de mare, astfel оncât secvența care conține o ancoră să nu fie vizibilă în momentul trimiterii către ea. Ca exemplu să considerăm agenda grpei I-942:

8.8. Trimiterea automată a unui e-mail

Dacă dorim să trimitem un e-mail dintr-o pagină, se creează o legătură la o adresă e-mail. Legătura va avea atributul href a cărui valoare este mailto (protocol pentru poștă), urmată de”:” și de o adresă de e-mail validă, de exemplu:

<a href="mailto:cio3banu@yahoo.com"> Puteti să-mi scrieti </a>

Se poate folosi elementul <adress> de formatare logică, care are rolul de a evidenția o adresă (mesajul se va scrie la început de linie), așa cum reiese din exemplu de mai jos. Sintaxa elementului <adress> este:

<adress> <a href="mailto:cio3banu@yahoo.com"> Puteti să-mi scrieti </a> </adress>

Când se execută clic pe o legătură e-mail, se va deschide o aplicație e-mail care are, în câmpul To, adresa din legătură și care permite să introducem mesajul. Se poate trece și un subiect, care va fi despărțit de adresă prin “?”, precum și un text în interiorul mesajului (de forma body=text) și care se va separa de subiect prin caracterul “&”, ca în exemplul de mai jos:

8.9. Culorile referințelor

O referință poate fi în una din stările:

activă
vizitată
nevizitată

În funcție de starea în care se află, o legătură are o anumită culoare și anume:

Starea activă are culoarea implicită roșu (#FF0000). Culoarea se poate schimba cu atributul alink=”culoare” al elementului < body>
Starea vizitată are culoarea implicită purple (#800080). Culoarea se poate schimba cu atributul vlink=”culoare” al elementului < body>
Starea nevizitată are culoarea implicită albastru (#0000FF). Culoarea se poate schimba cu atributul link=”culoare” al elementului < body>

9. Hărți de imagini

Hartile de imagini sunt parti din aceeasi imagine care este "impartita" in mai multe zone, apoi in functie de zona pe care se executa click, browserul poate afisea o alta pagina.

De exemplu, pe un site dedicat turismului am putea avea pe pagina principala o imagine care reprezinta harta tarii (in care definim zonele dupa conturul raioanelor); in cazul unui click pe zona Soroca se incarca o pagina care descrie diverse obiective turistice din raionul Soroca, iar un click pe o alta zona de raion ar duce la alta pagina care descrie obiectivele turistice din acel raion.

O harta de imagini ar putea fi folosita si pentru navigarea in cadrul unui site: daca avem mai multe butoane de navigare grupate, se poate folosi o imagine care reprezinta toate acele butoane - mai multe imagini se incarca mai incet decat o imagine cu dimensiunea egala cu suma celorlalte (in kb) deoarece comunicarea cu serverul (cand se cere imaginea) se face o singura data.

Pana aici am prezentat numai avantaje; dezavantajul major este ca un vizitator care are browserul setat sa nu incarce imagini pentru a naviga mai repede nu va vedea imaginea si nu va intelege mai nimic (putem totusi folosi marcajul "alt" de specificare a textului alternativ pentru imagini). Totusi acest lucru este foarte rar.

Crearea hartii de imagini

Pentru formarea unei harti de imagini, se adauga in interiorul tag-ului "<img>" atributul usemap a carui valoare reprezinta numele hartii, apoi se incepe formarea hartii prin elementul:

<map name="nume_harta"></map>

- unde pt. "nume_harta" a atributului "name" se foloseste acelasi cuvant adaugat la "usemap"
- in cadrul acestuia se adauga elemente

<area atribute>

- acestea definesc zonele hartii imaginii si forma acestora (prin valorile atributelor),
- numarul de elemente "AREA" reprezinta numarul de suprafete (cu link-uri specifice) in care este "impartita" imaginea.

In urmatorul exemplu puteti vedea forma generala a creari unei "harti de imagini" (cu 2 cadre), URL poate fi orice adresa de site sau pagina a site-ului curent:

In tabelul de mai jos puteti vedea atributele care se folosesc si descrierea acestora:

Instructiune	Atribute	Descriere
<img atribute >	-	marcaj de includere a imaginilor
	ismap	specifica faptul ca este o harta de imagine pe server (se foloseste mai rar; de obicei folosim harti de imagine la client)
	usemap="nume_harta"	specifica harta de imagine la client
	lowscr = "url"	imaginea de rezolutie scazuta care se incarca prima (doar pentru Netscape)
<map atribute > < / map >	-	specifica regiunile unei harti de imagine la client
<map atribute > < / map >	name = "nume_harta"	numele hartii de imagine (corespunzator atributului USEMAP al marcajului <IMG>)
<area atribute >	-	defineste o regiune a unei harti de imagine
	shape = "forma"	forma regiunii: rect sau rectangle (dreptunghi), circle sau circ (cerc), point (punct), poly sau polygon (poligon)
	coords = "coordonate"	coordonatele unei regiuni (in pixeli); se calculeaza in functie de coltul din stanga sus al imaginii (care are coordonatele (0, 0), adica x = 0, y = 0); variaza in functie de SHAPE = forma regiunii: - pentru rect (dreptunghi) se dau coordonatele celor 4 colturi sau a celor din stg. sus si dr. jos ale regiunii - pentru circ (cerc) se dau coordonatele centrului cercului si raza - pentru point (punct) se dau coordonatele punctului - pentru poly (poligon) se dau coordonatele colturilor poligonului
	href = "=url="	URL - ul asociat regiunii specificate din cadrul imaginii; in cazul unui clic pe acea regiune se incarca pagina specificata prin URL
	alt = "text"	textul asociat regiunii specificate din cadrul imaginii; apare plasand mouse-ul deasupra regiunii respective sau celor cu browserul setat sa nu incarce imagini

Iata un exemplu practic, avem imaginea de mai jos.

In aceasta imagine avem trei zone distincte: dreptunghi, cerc si romb (poligon); pe care, prin codurile HTML de creare a hartii de imagini, le-am definit sa fie tratate ca zone diferite, separate, si cand dam click pe ele, fiecare deschide cate o pagina diferita (sugerata de numele din zona respectiva).

Observati ca mouse-ul isi schimba forma numai cand este deasupra zonelor care au fost definite ca sa fie suprafete a hartii de imagini. Aceasta definire nu este facuta prin desen, ci prin coordonatele folosite in atributul "coords", coordonate care au fost alese pentru a se potrivi cu desenul. Reperul cel mai important este lungimea in pixeli din coltul stanga-sus pana in punctele care formeaza zona dorita.

Codul HTML pentru acest exemplu este urmatorul (studiati cu atentie atributele folosite si coordonatele scrise; revizuiti si tabelul de mai sus):

10. Documentarea unei pagini Web

Meta-informațiile sunt informațiile despre „modul de organizare a informațiilor”. în cazul unei pagini Web meta-informațiile vor furniza date despre modul în care a fost creată această pagină.

Meta-informațiile nu sunt vizibile într-o pagină Web. Ele sunt conținute în fișierul sursă „.html” și sunt utilizate de serverele Web aflate în INTERNET, specializate în stocarea de „informații despre informațiile” stocate pe diferite site-uri. Meta-informațiile
sunt culese de către aplicațiile speciale ale motoarelor de căutare numite spiders sau robots. Serverele specializate în stocarea și indexarea de meta-informații oferă utilizatorilor motoare de căutare puternice care permit regăsirea informațiilor (a adreselor la care aceste informații există). Câteva exemple în acest sens sunt: www.google.com, www.yahoo.com, www.altavista.com, www.excite.com, www.lycos.com etc.

Meta-informațiile adică informațiile despre informațiile conținute într-o pagină Web se introduc cu ajutorul tag-ului <meta> plasat în interiorul blocului <head>…<head>. Acest tag se utilizează cel mai frecvent impreună cu trei atribute:

name;
http-equiv;
content.

Cele trei atribute se folosesc în perechi "name content" sau "http-equiv content".

Descrierea unei pagini Web

Pentru a face cunoscut motoarelor de căutare din Internet scopul pentru care a fost creată o pagină Web poate fi inserat un element <meta> având atributele:

name - setat la valoarea description;
content - setat la un șir de caractere ce conține o descriere generală a paginii.

Iată în continuare un exemplu de utilizare:

Cuvintele cheie pentru o pagină Web

Cuvintele cheie oferă o altă metodă de descriere a informațiilor conținute de o pagină Web. Cuvintele cheie trebuie alese cu atenție pentru ca informația indexată pe baza lor de către spiders, să poată fi regăsită corect în bazele de date ale mooarelor de căutare.

Pentru a preciza cuvintele cheie ale paginii Web se utilizează atributele:

name - setat la valoarea keywords;
content - care va primi ca valoare lista cuvintelor cheie separate prin ",".

Iată un exemplu de utilizare:

<meta name="keywords" content="Centrul de Excelență în Informatică, Informatica, Chișinău, Moldova">

Drepturile de autor

Atributul name poate fi utilizat pentru a furniza informații legate de autorul paginii și despre Copyright (drepturile de autor). Exemplul următor ilustrază aceste lucruri:

Persoana de contact

Pentru a putea furniza informații despre persoana care administrează site-ul, se utilizează atributul http-equiv. În acest caz valoarea atributului content va conține o adresă e-mail eventual urmată în paranteze rotunde de un nume complet al persoanei.

Exemplu:

Setul de caractere utilizat

Setul de caractere se stabilește prin intermediul atributului charset. În mod implicit setul de caractere al unei pagini Web este western. Opțional acest set de caractere poate fi stabilit prin următoarea exprimare:

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

Pentru a se putea utiliza diacriticele limbii române trebuie ales setul de caractere Sud-Est European:

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-2">

Reâncărcarea automată a unei pagini Web

O utilizare interesantă a atributului http-equiv este aceea de a seta reincărcarea automată în fereastra browser-ului a aceleiași pagini (de exemplul pagina cu evoluția cursurilor la o bursă) sau a unei pagini noi. În acest fel se obțin facilități dinamice pentru un Website. Pentru a reincărca aceeași pagină la un interval precizat de secunde se utilizează atributul http-equiv setat la valoarea refresh iar atributul content setat la valoarea numărului de secunde după care se dorește ca pagina să fie reactualizată.

Exemplul 1. Aceeași pagină va fi reâncărcată după 5 secunde:

<meta http-equiv="refresh" content="5">

Exemplul 2. O altă pagină (cuprins.html) va fi reâncărcată după 9 secunde:

<meta http-equiv="refresh" content="9; url='cuprins.html'">

Limba utilizată în pagină

Informaţia legată de limba utilizată în pagina web este furnizată de atributul http-equiv configurat la valoarea keywords împreună cu atributul lang

Exemplul 1. Pagina va furniza informația că limba utilizată este Engleza:

<meta name="keywords" lang="en-us" content="university, Chisinau, Moldova, prestige, teacher, student">

Exemplul 2. Pagina va furniza informația că limba utilizată este Româna:

<meta name="keywords" lang="ro" content="universitate, Chișinău, prestigiu, Romania, profesor, student">

Comentariile

Comentariile sunt blocuri de text utile care prezintă informații de proiectare utile despre modul în care a fost scris un fișier sursă „.html”. Comentariile sunt ignorate de către browser la incarcarea paginii. Pentru a insera un bloc de comentarii se utilizează sintaxa:

Blocul de comentarii poate fi plasat oriunde este necesar în cadrul documentului „.html” și se poate extinde pe mai multe rânduri;

11. Operarea cu formulare. Marcaje utilizate.

Un formular este un ansamblu de zone active alcatuit din butoane ,casete de selecție,câmpuri de editare etc. Formularele va asigura construirea unori pagini Web care permit utilizatorilor să introducă efectiv informații și să le transmită serverului. Formularele pot varia de la o simplă casetă de text, pentru introducerea unui șir de caractere pe post de cheie de cautare - element caracteristic tuturor motoarelor de căutare din Web - până la o structură complexă ,cu multiple secțiuni, care oferă facilități puternice de transmisie a datelor. O sesiune cu o pagină web ce conține un formular cuprinde următoarele etape:

   - Utilizatorul completează formularul și il expediează unui server;
    - O aplicație dedicată de pe server analizează formularul completat și (dacă este necesar) stochează datele într-o bază de date;
    - Dacă este necesar serverul expediează un raspuns utilizatorului.

Un formular este definit intr-un bloc delimitat de etichetele corespondente <form>şi </form>.

Atribute esențiale ale elementului <form>

Există două atribute esențiale ale elementului <form>:

1. Atributul action precizează ce se va intampla cu datele formularului odată ce acestea ajung la destinație. De regulă ,valoarea atributului action este adresa URL a unui script aflat pe un srver WWW care primește datele formularului, efectuează o prelucrare a lor și expediează către utilizator un răspuns.

<form action="http://www.yahoo.com/cgi-bin/nume_fis.cgi">.

Script-urile pot fi scrise în limbajele Perl, C, PHP, Unix shell.

2. Atributul method precizează metoda utilizată de browser pentru expedierea datelor formularului. Sunt posibile următoarele valori:

get (valoarea implicită). în acest caz, datele din formular sunt adăugate la adresa URL precizată de atributul action;
- nu sunt permise cantități mari de date (maxim 1 Kb);
- intre adresa URL și date este inserat un "?".

Datele sunt adăugate conform sintaxei: nume_camp = valoare_camp. Între diferite seturi de date este introdus un "&".

Exemplu: "http://www.yahoo.com/cgi-bin/nume_fis.cgi?nume1 = valoare1&nume2 = valoare2";

post în acest caz datele sunt expediate separat. Sunt permise cantități mari de date (ordinul MB)

Pentru ca un formular să fie funcțional, trebuie precizat ce se va intâmpla cu el după completarea și expediere. Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin poșta electronică (e-mail). Pentru aceasta se folosește un atribut al etichetei <form>: și anume action care primește ca valoare " mailto: " concatenat cu o adresă validă de e-mail către care se va expedia formularul completat.

Un formular cu un câmp de editare și un buton de expediere

Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Pentru a preciza tipul elementului se folosește atributul type al etichetei <input>. Pentru un câmp de editare, acest atribut primeste valoarea "text". Alte atribute pentru un element <input> sunt:

name - permite atașarea unui nume fiecărui element al formularului;
value - care permite atribuirea unei valori inițiale unui element al formularului.

Un buton de expediere al unui formular se introduce cu ajutorul etichetei <input>, în care atributul type este configurat la valoarea "submit".Acest element poate primi un nume prin atributul name. Pe buton apare scris "Submit Query" sau valoarea atributului value, dacă această valoare a fost stabilită.

Pentru elementul <input> de tipul câmp de editare (type = "text") , alte doua atribute pot fi utile:

size - specifică lățimea câmpului de editare ce depășește această lățâme ,atunci se execută automat o derulare acestui câmp;
maxlength - specifică numărul maxim de caractere pe care le poate primi un câmp de editare, caracterele tastate peste numărul maxim sunt ignorate.

    Observații:
        - dacă atributul type lipsește intr-un element <input>, atunci câmpul respectiv este considerat în mod prestabilit ca fiind de tip "text";
        - formularele cu un singur câmp (de tip text) nu au nevoie de un buton de expediere, datele sunt expediate automat dupa completarea și apăsarea tastei ENTER.

Butonul Reset

Dacă un element de tip <input> are atributul type configurat la valoarea "reset", atunci în formular se introduce un buton pe care scrie "Reset". La apăsarea acestui buton, toate elementele din formular primesc valorile prestabilite (definită odata cu formularul ), chiar dacă aceste valori au fost modificate de utilizator.
Un buton Reset poate primi un nume cu ajutorul atributului name și o valoare printr-un atribut value. Un asemenea buton afișează textul "Reset" dacă atributul value lipsește, respectiv valoarea acestui atribut în caz contar.

Câmp de editare de tip "password"

Dacă se utilizează eticheta <input> având atributul type configurat la valoarea "password" , atunci în formular se introduce un element asemănător cu un câmp de editare obișnuit introdus prin type="text". Toate atributele unui câmp de editare rămân valabile. Singura deosebire constă în faptul că acest câmp de editare nu afișează caracterele clar, ci numai caractere *, care ascund de privirile altui utilizator aflat în apropiere valoarea introdusă intr-un asemenea câmp. La expedierea formularului insă, valoarea tastată intr-un câmp de tip "password" se transmite clar.

Butoane radio

Butoanele radio permit alegerea, la un moment dat, a unei singure variante din mai multe posibile. Butoanele radio se introduc prin eticheta <input> cu atributul type având valoarea "radio".

La expedierea formularului se va transmite una dintre perechile "sex=b" sau "sex=f", în funcție de alegerea făcută de utilizator.

Casete de validare

O casetă de validare(checkbox) permite selectarea sau deselctarea unei opțiuni. Pentru inserarea unei casete de validare se utilizează eticheta <input> cu atributul type configurat la valoarea "checkbox".

Observații:
- fiecare casetă poate avea un nume definit prin atributul name.
- fiecare casetă poate avea valoarea prestabilită selectat definită prin atributul checked.

Casete de fișiere

Într-o pereche "name = value" a unui formular se poate folosi intregul conținut al unui fișier pe post de valoare. Pentru aceasta se inserează un element <input> intr-un formular, cu atributul type având valoarea "file"(fișier).

Atributele pentru un element de tip casetă de fișiere:

name - permite atașarea unui nume;
value - primește ca valoare adresa URL a fișierului care va fi expediat o dată cu formularul. Această valoare poate fi atribuită direct atributului value, sau poate fi selectată prin intermediul unei casete de tip File Upload sau Choose File care apare la apăsarea butonului Browse... din formular;
enctype - precizează metoda utilizată la criptarea fișierului de expediat.Valoarea acestui atribut este "multipart/form-data".

Liste de selecție

O listă de selecție permite utilizatorului să aleagă unul sau mai multe elemente dintr-o listă finită. Lista de selecție este inclusă în formular cu ajutorul etichetelor corespondente <select>și </select>.

O listă de selecție poate avea următoarele atribute:

name - atașează listei un nume (utilizat în perechile "name=value" expediat serverului);
size - care precizează(printr-un număr intreg pozitiv, valoarea prestabilită fiind 1) câte elemente din listă sunt vizibile la un moment dat pe ecran(celelalte devenind vizibile prin acționarea barei de derulare atașate automat listei).

Elementele unei liste de selecție sunt incluse în lista cu ajutorul etichetei <option>. Două atribute ale etichetei <option> se dovedesc utile:

value - primește ca valore un text care va fi expediat server-ului în perechea "name=value", dacă acest atribut lipsește, atunci către server va fi expediat textul ce urmează după <option>;
selected(fara alte valori) - permite selectarea prestabilită a unui element al listei.

Listă de selecție cu selecții multiple

O listă de selecție ce permite selecții multiple se creează intocmai ca o listă de selecție obisnuită. în plus, eticheta <select> are un atribut multiple(fară alte valori). Când formularul este expediat către server pentru fiecare element selectat al listei care este se inserează către o pereche "name=value" unde name este numele listei.

Câmpuri de editare multilinie

intr-un formular câmpuri de editare multilinie pot fi incluse cu ajutorul etichetei <textarea>. Eticheta are următoarele atribute:

cols - specifică numărul de caractere afișate într-o linie;
rows - specifică numărul de linii afișate simultan;
name - permite atașarea unui nume câmpului de editare multilinie;
wrap - determină comportamentul câmpului de editare față de sfârșitul de linie. Acest atribut poate primi urmatoarele valori:
- "off" - intreruperea cuvintelor se produce la marginea dreaptă a editorului, când dorește utilizatorul. Caracterul de sfârșit de linie este inclus în textul transmis serverului o data cu formularul;
- "hard" - intreruperea cuvintelor se produce la marginea dreaptă a editorului. Caracterul de sfârșit de linie este inclus în textul transmis serverului o dată cu formularul;
- "soft" - intreruperea cuvintelor se produce la marginea dreaptă a editorului. Nu se include caracterul de sfârșit de linie în textul transmis serverului o dată cu formularul.

Un formular complex

În exemplul următor este prezentat un formular conținând elemente prezentate anterior. Câmpurile formularului sunt incluse în celulele unui tabel pentru a obține o aliniere dorită.

Butoane

Într-un formular pot fi afișate butoane. Când utilizatorul apasă un buton, se lansează în execuție o funcție de tratare a acestui eveniment. Limbajul HTML nu permite scrierea unor astfel de funcții (acest lucru este posibil dacă se utilizează limbajele Javascript sau Java).

Pentru a insera un buton intr-un formular, se utilizează eticheta <input> având atributul type configurat la valoarea "button". Alte două atribute ale elementului <input> sunt:

name - permite atașarea unui nume butonului;
value -primește ca valoare textul ce va fi afișat pe buton.

Un buton pentru lansarea în execuție a unei acțiuni poate fi introdus intr-un formular prin elementul <input> având atributul type configurat la valoarea "button", așa cum s-a văzut mai inainte.
Există o a doua modalitate de a introduce într-o pagina Web un buton, și anume prin intermediul blocului <button>...</button>. Un astfel de buton poate fi inserat intr-un formular, în acest caz declanșând acțiuni legate de acel formular, sau poate fi introdus oriunde în pagină pentru inițierea unor acțiuni independente de formulare. Atributele posibile ale elementului "button" sunt:

name - acordă elementului un nume;
value - precizează textul care va fi afișat pe buton;
type - precizează acțiunea ce se va executa la apăsarea butonului dacă acesta este inclus într-un formular. Valorile posibile pentru acest atribut sunt: "button/submit/reset".

În corpul blocului <button>...</button> se poate afla un text sau un marcaj de inserare a unei imagini.
Observații finale:

- elementul <form> poate avea un atribut target, care primește ca valoare numele unei ferestre a browserului în care va fi incărcat răspunsul trimis serverului WWW la expedierea unui formular.
- toate elementele cuprinse intr-un formular pot avea un atribut disabled care permite dezactivarea respectivului element.
- toate elementele de tip text cuprinse într-un formular pot avea un atribut readonly care interzice modificarea conținutului acestor elemente.

12. Ferestre în HTML. Comenzi de construire a ferestrelor(cadrelor).

Ferestrele sau cadrele ne permit să definim în fereastra browser-ului subferstre în care să fie incărcate documente HTML diferite. Ferestrele sunt definite intr-un fișier HTML special , în care blocul <body>...</body> este inlocuit de blocul <frameset>...</frameset>. în interiorul acestui bloc, fiecare cadru este introdus prin eticheta <frame>.
Un atribut obligatoriu al etichetei <frame> este src, care primește ca valoare adresa URL a documentului HTML care va fi incărcat în acel frame. Definirea cadrelor se face prin impărțirea ferestrelor (şi a subferestrelor) în linii și coloane:

impărțirea unei ferestre intr-un număr de subferestre de tip coloană se face cu ajutorul atributului cols al etichetei <frameset> ce descrie acea fereastră;
impărțirae unei ferestre intr-un număr de subferestre de tip linie se face cu ajutorul atributului rows al etichetei <frameset> ce descrie acea fereastră.

Valoare atributelor cols și rows este o listă de elmente separate prin virgulă, care descriu modul în care se face impărțirea. Elementele listei pot fi:

un număr intreg de pixeli;
procente din dimensiunea ferestrei(număr intre 1 și 99 terminat cu %);
n* care inseamna n parți din spațiul rămas;

Exemplu 1: cols="200,*,50%,*" inseamnă o impărțire în 4 subferestre, dintre care prima are 200 pixeli, a treia ocupă jumătate din spațiul total disponibil, iar a doua și a patra ocupă în mod egal restul de spațiu rămas disponibil.

Exemplu 2: cols="200,1*,50%,2*" inseamnă o impărțire în 4 subferestre, dintre care prima are 200 pixeli, a treia ocupă jumătate din spațiul total disponibil iar a doua și a patra ocupă în mod egal restul din spațiul rămas disponibil, care se imparte în trei părți egale, a doua fereastră ocupând o parte, iar a patra ocupând 2 părți.

Observații:
- Dacă mai multe elemente din listă sunt configurate cu *, atunci spațiul disponibil rămas pentru ele se va imparți în mod egal.
- O subfereastră poate fi un cadru (folosind <frame>) în care se va incarcă un document HTML sau poate fi impărțită la rândul ei în alte subfereste (folosind <frameset>).

În exemplul următor este creată o pagina Web cu trei cadre orizontale. Pentru al doilea cadru valoarea atributului src este adresa URL a unei imagini.

În exemplul următor este creată o matrice de 4 cadre (2 x 2).Pentru a realiza acest lucru, se folosesc simultan cele două atribute cols și rows.

În exemplul următor este creată o pagină Web cu trei cadre mixte. Pentru a o crea se procedează din aproape în aproape. Mai intâi, pagina este impărțită în două subferestre de tip coloană, după care a doua subfereastră este impărțită în două subferestre de tip linie.

Culori pentru chenarele cadrelor și dimensionarea chenarului unui cadru

Pentru a stabili culoarea chenarului unui cadru se utilizează atributul bordercolor. Acest atribut primește ca valoare un nume de culoare sau o culoare definită în conformitate cu modelul de culoare RGB. Atributul bordercolor poate fi atașat atât etichetei <frameset> pentru a stabili culoarea tuturor chenarelor cadrelor incluse, cât și etichetei <frame> pentru a stabili culoarea chenarului pentru un cadru individual.

Atributul border al etichetei <frameset> permite configurarea lățimii chenarelor tuturor cadrelor la un număr dorit de pixeli. Valoarea prestabilită a atributului border este de 5 pixeli. O valoare de 0 pixeli va defini un cadru fără chenar.

Pentru a obține cadre fără chenar se utilizează border="0". În mod prestabilit, chenarul unui cadru este afișat și are aspect tridimensional. Afișarea chenarului unui cadru poate fi dezactivat dacă se utilizează atributul frameborder cu valoare "no".
Acest atribut poate fi atașat atât etichetei <frameset> (dezactivarea fiind valabilă pentru toate cadrele incluse) cât și etichetei <frame> (dezactivarea fiind valabilă numai pentru un singur cadru). Valorile posibile ale atributului frameborder sunt:

yes - echivalent cu 1;
no - echivalent cu 0;

Bare de defilare

Atributul scrolling al etichetei <frame> este utilizat pentru a adaugă unui cadru o bară de derulare care permite navigarea în interiorul documentului afișat în interiorul cadrului. Valorile posibile sunt:

yes - barele de derulare sunt adăugate intotdeauna;
no - barele de derulare nu sunt utilizabile;
auto - barele de derulare sunt vizibile atunci când este necesar.

Atributul noresize al etichetei <frame> (fără nici o valoare suplimentara) dacă este prezent, inhibă posibilitatea prestabilită a utilizatorului de a redimensiona cadrul cu ajutorul mouse-ului.

Poziționarea documentului intr-un cadru

Atributele marginheight și marginwidth ale etichetei <frame> permit stabilirea distanței în pixeli dintre conținutul unui cadru și marginile verticale, respectiv orizontale ale cadrului. Valori posibile:

număr de pixeli;
procent din lățimea, respectiv din inălțimea cadrului;

Există browsere care nu suportă cadre pentru aceasta se utilizează în interiorul blocului <frameset> eticheta <noframes>. Dacă programul de navigare știe să interpreteze cadre, va ignora ce se găsește în această porțiune, iar dacă nu, materialul cuprins în zona <noframes>...</noframes> va fi singurul care va fi ințeles și afișat. De precizat este faptul că între <noframes> ... </noframes> se pot introduce orice alte tag-uri HTML (inclusiv imagini, hiperlink-uri, tabele).

Cadre interne

Un cadru intern este specificat prin intermediul blocului <iframe>...</iframe>. Un cadru intern se inserează într-o pagina Web în mod asemănător cu o imagine sau în modul în care se specifică marcajul <frame>, așa cum rezultă din următorul exemplu:

<iframe src="pagina1.html" height=40% width=50%> </iframe>

În acest caz, am specificat că doresc o fereastră de cadru intern care are 40% din inălțimea și 50% din lățimea paginii curente. Atributele acceptate de eticheta <iframe> sunt în parte preluate de la etichetele <frame>şi <frameset>, cum ar fi: src, frameborder, marginheight, marginwidth, scrolling, name, noresize;
sau de la eticheta <img>: vspace, hspace, align, width, height;

Ținte pentru legături

În mod prestabilit, la efectuarea unui clic pe o legatură nouă, pagina către care indică legătura o inlocuiește pe cea curentă, în aceeași fereastră(cadru). Acest comportament se poate schimba în două moduri:

prin plasarea în blocul <head>...</head> a unui element <base> care precizează, prin atributul target numele ferestrei(cadrului) în care se vor incărca toate paginile noi referite de legaturile din pagina curentă conform sintaxei:
<base target="nume_ferastra/frame_de_baza">
prin plasarea în eticheta <a> a atributului target, care precizează numele ferestrei (cadrului) în care se va incărca pagina nouă referită de legătură, conform sintaxei:
<a href="legatura" target="nume_fereastra/frame">...</a>

Observație:

Dacă este prezent atât un atribut target în <base> cât și un atribut target în <a>, atunci cele precizate de atributul target din <a> sunt prioritare. Numele unui cadru este stabilit prin atributul name al etichetei <frame> conform sintaxei: <farme name="nume_frame">

În exemplul următor este prezentată o pagină Web cu două cadre. Toate legăturile din cadrul 1 incarcă paginile în cadrul 2.

Exemplul următor este pagina left.html

Valori pentru atributul target

Atributul target al etichetei <frame> acceptă anumite valori predefinite de o valoare deosebită pentru creatorii de pagini Web. Aceste valori sunt:

_self - încărcarea noii pagini are loc în cadrul curent;
_blank - încărcarea noii pagini are loc într-o fereastră nouă anonimă;
_parent - încărcarea noii pagini are loc în cadrul părinte al cadrului curent dacă acesta există, altfel are loc în fereastra browser-ului curent;
_top - încărcarea noii pagini are loc în fereastra browser-ului ce conține cadrul curent;