Ce este HTML ? Unul din primele elemente fundamentale ale WWW ( World Wide Web ) este HTML ( Hypertext Markup Language ), care descrie formatul primar in care documentele sunt distribuite si vzute pe Web. Multe din trasaturile lui, cum ar fi independenta fata de platforma, structurarea formatrii si legaturile hypertext, fac din el un foarte bun format pentru documentele Internet si Web.Primele specificaiile de baza ale Web-ului au fost HTML, HTTP si URL.HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. HTML a fost vazut ca o posibilitate pentru fizicienii care utilizeaza computere diferite si schimbe ntre ei informaie utilizind Internetul. Erau prin urmare necesare citeva trasaturi: independenta de platforma, posibiliti hypertext si structurarea documentelor.Independenta de platforma nseamn ca un document poate fi afiat in mod asemntor de computere diferite ( deci cu fonte, grafica si culori diferite ), lucru vital pentru o audienta att de variata.Hipertext nseamn ca orice cuvnt, fraza, imagine sau alt element al documentului vzut de un utilizator ( client ) poate face referina la un alt document, ceea ce uureaz mult navigarea intre multiple documente sau chiar in interiorul unui aceluiasi document. Structurarea riguroasa a documentelor permite convertirea acestora dintr-un format in altul precum si 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 enunat cteva versiuni ale specificaiei HTML, printre care si HTML 2.0, HTML 3.0,HTML 3.2, HTML 4.0 si, cel mai recent, HTML 4.01. In acelai timp, autorii de browsere, cum ar fi Netscape si Microsoft, au dezvoltat adesea propriile "extensii" HTML in afara procesului standard si le-au incorporat in browserele lor. In unele cazuri, cum ar fi tagul Netscape , aceste extensii au devenit standarde de facto adoptate de autorii de browsere.HTML 2.0, elaborat in Iunie 1994, este standardul pe care ar trebui sa-l suporte toate browserele curente -- inclusiv cele mod text. HTML 2.0 reflecta concepia originala a HTML ca un limbaj de marcare independent de obiectele existente pentru aezarea lor in pagina, in loc de a specifica exact cum ar trebui sa arate acestea. Dac dorii sa fii siguri ca toi vizitatorii vor vedea paginile aa cum trebuie, folosii tagurile HTML 2.0.Specificaia HTML 3.0, Enunata in 1995, a ncercat sa dezvolte HTML 2.0 prin adugarea unor faciliti precum tabelele si un mai mare control asupra textului din jurul imaginilor. Dei unele din noutile HTML 3.0 erau deja folosite de autorii de browsere, multe nu erau nc. In unele cazuri, taguri asemntoare implementate de autorii de browsere au devenit mai rspndite dect tagurile "oficiale". Specificaia HTML 3.0 acum a expirat, deci nu mai este un standard oficial.In Mai 1996, W3C a scos pe piaa specificaia HTML 3.2, care era proiectata sa reflecte si sa standardizeze practicile acceptate la scara larga. Deci, HTML 3.2 include tagurile HTML 3.0 ce erau adoptate de autorii de browsere ca Netscape si Microsoft plus extensii HTML rspndite. In Bilanul asupra HTML, W3C recomanda ca providerii de informaii sa utilizeze specificaia HTML 3.2.Versiunile curente ale majoritii browserelor ar trebui sa suporte toate, sau aproape toate aceste taguri.De asemenea exista extensii Netscape si Microsoft care nu fac parte din specificaia HTML 3.2, ori pentru ca sunt mai puin utilizate, ori au fost omologate dup apariia HTML 3.2. Pentru ca navigatorul Netscape a fost printre primele browsere care suporta anumite taguri HTML 3.0, iar Netscape deine in jur de 70% din piaa de browsere, muli au crezut eronat ca toate extensiile Netscape (incluznd taguri ca si facilitai ca ferestrele) fac parte din HTML 3.0 sau HTML 3.2.La momentul aparitiei acestui tutorial, HTML 4.0 este larg utilizat si au fost deja publicate specificatiile HTML 4.01.Documentele HTML sint documente in format ASCII si prin urmare pot fi create cu orice editor de texte. Au fost insa dezvoltate editoare specializate care permit editarea intr-un fel de WYSIWYG desi nu se poate vorbi de WYSIWYG atita vreme cit navigatoarele afieaz acelasi document oarecum diferit, in functie de platforma pe care ruleaza. Au fost de asemenea dezvoltate convertoare care permit formatarea HTML a documentelor generate ( si formatate ) cu alte editoare. Evident conversiile nu pot patra decit partial formatarile anterioare deoarece limbajul HTML este inca incomplet.1. Structura documentului HTML.Orice document HTML ncepe cu notaiasi se termina cu notaia. Aceste "chestii" se numesc in literatura de specialitate "TAG-uri".Prin convenie, toate informaiile HTML ncep cu o paranteza unghiulara deschisa" < "si se termina cu o paranteza unghiulara nchisa" > ".Tag-urile intre aceste paranteze transmit comenzi ctre browser pentru a afia pagina intr-un anumit mod. Unele blocuri prezint delimitator de sfrit de bloc, in timp ce pentru alte blocuri acest delimitator este opional sau chiar interzis.Intre cele doua marcajesivom introduce doua seciuni:- sectiunea de antet...si - corpul documentului.... Blocul...cuprinde coninutul propriu-zis al paginii HTML, adic ceea ce va fi afiat in fereastra browser-ului.

O eticheta poate fi scris att cu litere mici, cat si cu litere mari.Adic = = . Caracterele "spaiu" si "CR/LF" ce apar intre etichete sunt ignorate de ctre browser.Deci un prim document HTML ar fi ceva de genul asta:12345

Aa arata primul document HTML. Copiai-l folosind Copy/Paste ntr-un fiier nou i salvai-l ca PRIM.HTM sau PRIM.HTML. Apoi pornii Internet Explorer sau Google Crome, dai CTRL-O si introducei calea spre fiier. Dai OK si ... nimic.S nu disperam ... vom aduga primele elemente la pagina noastr. n primul rnd, titlul unei pagini se obine insernd n seciunea...a urmtoarei linii:Aceasta este prima mea pagina de Webn plus, n seciunea...putem scrie texte ct dorim. Daca nu ntlnim nici un marcajatunci interpretorul HTML le va lua ca texte simple si le va afia pe ecran. Sa vedem o noua versiune a paginii noastre:12345678

Aceasta este prima mea pagina de Web

Bine ati venit in pagina mea de Web!

Coninutul blocului...va aprea in bara de titlu a ferestrei browser-ului.Daca acest bloc lipsete ntr-o pagina HTML, atunci n bara de titlu a ferestrei browser-ului va aprea numele fiierului.Daca introducem mai multe linii intr-o pagina browser-ul va afia intr-un singur rnd, ntruct caracterele " CR/LF " sunt ignorate de browser. Trecerea pe o linie noua se face la o comanda explicita, care trebuie sa apar n pagina html.Aceasta comand este marcajul
( de la " line break " - ntrerupere de linie ).Folosind aceleai operaii ca mai sus, vizualizai noua pagina! Vei vedea textul ce apare n fereastra navigatorului. n plus, pagina dvs. va avea un titlu nou, cel introdus de dvs.12345678

Titlul paginii

Bine ati venit in
pagina mea de Web!

Blocuri preformatatePentru ca browser-ul s interpreteze corect caracterele " spaiu ", " tab " si " CR/LF " ce apar n cadrul unui text, acest text trebuie inclus intr-un bloc....123456789101112

Bloc preformatat

Prima linieA doua linieA treia linie

Culoarea de fondO culoare poate fi precizata n dou moduri: Printr-un nume de culoare. Sunt disponibile cel puin 16 nume de culori: aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow. Prin construcia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre hexazecimale si pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot defini astfel 65536 de culori.Culoarea unei pagini se precizeaz prin intermediul unui atribut al etichetei.Culoarea fondului paginii Web se stabilete cu atributulbgcoloral etichetei, de exemplu: .Urmtorul exemplu realizeaz o pagin cu fondul de culoare gri.12345678

Culoare de fond

O pagina Web cu fondul GRI!

Culoarea textuluiAcest lucru se face prin intermediul atributuluitextal eticheteidup sintaxa . n urmtorul exemplu textul are culoarea roie.12345678

culoare textului

Un text de culoare rosie.

O eticheta poate avea mai multe atribute. De exemplu , o eticheta cu trei atribute arata astfel: . Urmtorul exemplu prezint o pagina cu fondul de culoare albastra si textul de culoare galben.12345678

atribute multiple

Fond de culoare albastra si text de culoare galbena.

Textul afiat este caracterizat de urmtoarele atribute: Mrime ( size), Culoare ( color ), Font (style).Acestea sunt atribute ale etichetei.Este o eticheta singulara (fr delimitator de sfrit de bloc).unde: numar- poate fi 1, 2, 3, 4, 5, 6 sau 7; ( 1 pentru fontul cel mai mic si 7 pentru fontul cel mai mare); culoare- este o culoare precizata prin nume sau printr-o construcie RGB; font- poate fi un font generic ca " serif ", " san serif ", " cursive ", " monospace ", "fantasy " sau un font specific instalat pe calculatorului clientului, ca " Times New Roman ", " Helvetica " sau " Arial ".Se accepta ca valoare si o lista de fonturi separate prin virgula, de exemplu:" Times New Roman, serif, monospace ".Domeniul de valabilitate al caracteristicilor precizate de aceasta eticheta se ntinde de la locul in care apare eticheta pana la sfaritul paginii sau pana la urmtoarea eticheta.Daca acest atribut lipsete atunci textul din pagina Web are atribute prestabilite sau atribute precizate de browser-ul utilizat.Atributele prestabilite sunt:size= 3,color= black, istyle= " Times New Roman " .Poziionarea coninutului paginii Web fata de marginile ferestrei browser-ului se poate face cu ajutorul a dou atribute ale etichetei: leftmargin( stabilete distanta dintre marginea stnga a ferestrei browser-ului si marginea stng a coninutului paginii ); topmargin( stabilete distanta dintre marginea de sus a ferestrei browser-ului si marginea de sus a coninutului paginii );123456789

Configurarea textului si stabilirea marginii

Textul are atribute implicite.
Textul este scris cu fontul "Arial", culoare albastru si marime 6.

Stiluri pentru blocurile de textPentru ca un bloc de text sa apar in pagina evideniat (cu caractere aldine), trebuie inclus intre delimitatorii...( b vine de la "bold" = ndrzne).Pentru ca un text sa fie scris cu caractere mai mari cu o unitate dect cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele....Pentru ca un text sa fie scris cu caractere mai mici cu o unitate dect cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele....Pentru ca un text sa fie scris cu caractere cursive acesta trebuie inclus intr-un bloc delimitat de etichetele...( i vine de la " italic ").Pentru a insera secvene de text aliniate ca indice (sub-script) sau ca exponent (super-script) , aceste fragmente trebuie delimitate de etichetele..., respectiv....Pentru a insera un bloc de caractere subliniate se utilizeaz etichetele...(u vine de la " underline ").Pentru a insera un bloc de caractere tiate se utilizeaz etichetele...sau....n exemplul urmtor vom utiliza toate etichetele menionate anterior.1234567891011121314

Stiluri pentru blocuri de text

Text scris cu caractere ingrosate.
Text cu caractere marite cu o unitate mai maresi mai maresi mai mare.
Textul este scris cu caractere micsorate cu o unitate mai mic.
Text scris cu caractere italice.
In aceasta linie sus este superscript iar jos este subscirpt.
Aceasta linie este in intregime sectionata de o linie orizontala.
In aceasta linie urmatorul cuvant este subliniat, iar cuvantul strike sectoinat.

Stiluri fizice si logiceAm prezentat deja 8 stiluri de scriere a caracterelor unui bloc de text, numite si stiluri fizice intrucat nu s-a acordat nici o atentie semnificatiei informatiei continute de aceste blocuri.In continuare sunt prezentate stilurile utilizate la formatarea unui bloc.Aceste stiluri tin cont de semnificatia pe care o are blocul in cadrul paginii Web.Pentru a pune in evidenta ( prin silul cursiv ) fragmente de text se utilizeaza etichetele: ...( " cite " inseamna citat); ...(em vine de la " emphasize " = a evidentia).n locul lor se poate utiliza eticheta echivalenta....Urmatoarele etichete au efecte similare. Ele permit scrierea fragmentului de text cu caractere monospatiate (de tipul celor folosite de o main de scris): ...( " code " inseamna cod sau surs); ...( kbd vine de la " keyboard " = tastatura); ...( tt vine de la " teletype " = teleprinter).Eticheta de tip bloc...delimiteaz fragmente de text clipitoare. Aceasta eticheta funcioneaz numai in browser-ul Netscape Communicator.12345678910111213

Blocuri de caractere monospatiate si clipitoare

Aceasta linie este formata din text normal.
Codul functiei f(x,y) este: Function f(x,y) {return x+y;}
Tastati urmatoarea comanda comanda DOS: copy c:\windows\* c:\temp
Asa scrie un teleprinter
Acest cuvant clipesteBlink

Exemplul urmtor ilustreaz c etichetele pot fi imbricate.Un fragment de text poate fi scris cu aldine i cursive in acelai timp.Pentru un fragment de text se pot folosi simultan stilurile subliniat, exponent, mrit si cursiv.1234567891011

Imbricarea etichetelor

Aceasta linie este formata din text normal.
Normalingrosatingrosat si italicingrosat.
Normal subliniat subliniat si ingrosat subliniat, ingrosat si marit.
Subliniat, ingrosat, marit si italic.

Blocul...permite inserarea in-line a citatelor. Brouwser-ul afieaz citatele n ghilimele."q" vine de la " in-line quotation " (citate inserate in-line).i blocurile "q" pot fi imbricate.Exemplu(de sine stttor).&-consecutivitiSimbolurile""sunt percepute de sistemele browser ca nceputuri i sfrituri de HTML-taguri. Apare ntrebarea, cum sreprezentm aceste simboluri pe ecran?n limbajul HTML aceasta se poate realiza cu ajutorul &- consecutivitilor (ele se mai numesc obiecte simbolice sau escapeconsecutiviti).Exist mai multe consecutiviti de acest tip:"" - >"&" (ampersand) &Ghilimelele(") se codific - "Pentru escape-consecutiviti sunt dou restricii suplimentare:1. Fiecare consecutivitate se scrie numai cu minuscule2. Sfritul fiecrei consecutivit!i este marcat de

n general, asemenea consecutiviti exist pentru toate simbolurile cu codurile ASCII mai mari dect 127. Motivul este c unele servere nu susin transmiterea datelor cte 8 bii.Exist mai multe metode de a include semnele diacritice romne n documentele HTML. Cea mai simpl este codificarea direct a lor prin &-consecutiviti:- - - - - - - - - - Exemplu:12345678910111213141516171819 Codificarea semnelor diacritice romneti n limbajul HTML

Codificarea semnelor diacritice romneti n limbajul HTML - - - - - - - - - -

ComentariiSistemele browser ignor reproducerea oricrui text situat ntre. Este o opiune special pentru introducerea n textul documentului HTML a unor comentarii, ce nu for fi afiate pe ecran.

2. Formatarea caracterelor, organizarea textului.Un font este caracterizat de urmtoarele atribute: culoare (stabilita prin atributulcolor); tipul sau stilul (stabilit prin atributulface); mrimea (definita prin atributulsize); mrimea in puncte tipografice (stabilita prin atributulpoint-size); grosime (definita prin atributulweight).Toate aceste atribute aparin etichetei, care permite inserarea de blocuri de texte personalizate.CuloriO 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 si b sunt cifre hexazecimale.Culoarea fontuluiPentru a scrie un fragment de text cu caractere de o anumit culoare se ncadreaz acest fragment ntre delimitatorii...avnd stabilit atributulcolorla valoarea necesara. De exemplu:fragment de text de culoare rosieFamilia fontuluiPentru a scrie un text intr-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 atributulfaceal etichetei.Pot fi introduse mai multe fonturi separate prin virgula.

n acest caz browser-ul va utiliza primul font pe care l cunoate.12345678910111213141516 Culoarea si familia fontului Aceste linie este scrisa cu caractere normale.
Aceasta linie este rosie.
Aicifiecarecuvantarealtaculoare.
Linie scrisa cu caractere monospatiate.
Linie scrisa cu caractere arial.

Mrimea fontuluiPentru a stabili mrimea unui font se utilizeaz atributulsizeal etichetei. Valorile acestui atribut pot fi: 1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font si 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 micora dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta.Mrimea unui font poate fi stabilita exact cu ajutorul atributuluipoint-size. Valorile acceptate de acest atribut pot fi orice numere naturale pozitive. Numrul astfel precizat reprezint mrimea fontului n puncte tipografice.Acest atribut funcioneaz numai cu Netscape Communicator.1234567891011121314 Marimea fontului Aceste linie este scrisa cu caractere normale.
Fonturi de marime 5.
Fonturi de marime 4.
Fonturi de marime 1.
Fonturi de marime 6.
Fonturi de marime 30 pt (numai cu Netcape Communicator).
Fonturi de marime 50 pt (numai cu Netcape Communicator).

Grosimea unui fontGrosimea unui caracter poate fi definit cu ajutorul atributuluiweightal etichetei.Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 si 900 (100 pentru fontul cel mai subire si 900 pentru cel mai gros).1234567891011 Grosimea fontului Aceste linie este scrisa cu caractere normale.
Fonturi de grosime 100.
Fonturi de grosime 500.
Fonturi de grosime 900.

3. Blocuri de textAceste etichete nu se refera la particularitatiile caracterelor ce compun textul, ci la functiile pe care le poate avea un bloc de text in cadrul paginii Web.Toate aceste etichete produc automat trecerea la un rand nou si adaugarea unui spatiu suplimentar.Inserarea unei adreseDaca intr-o pagina web trebuie inclusa o adresa ,atunci putem utiliza facilitatile oferite de o eticheta dedicata:....12345678910

Adresa

Adresa institutiei noastre este :Colegiul de Informatic din Chiinu
Str: Sarmizegetusa 48
Chiinu Moldova

Indentarea unui blocPentru ca un bloc de text sa fie indentat ( marginea din stanga a textului sa fie deplasata la dreapta la o anumita distanta fata de marginea paginii ), acesta trebuie inclus intre etichetele....12345678

Indentarea unui bloc

Textul ce urmeaza este indentat:Aceste etichete nu se refera la particularitatiile caracterelor ce compun textul, ci la functiile pe care le poate avea un bloc de text in cadrul paginii Web. Toate aceste etichete produc automat trecerea la un rand nou si adaugarea unui spatiu suplimentar.

Blocul preformatatIntr-un bloc..., semnificatia marcajelor HTML se pastreaza.Blocul...este indicat pentru a insera randuri vide ( spatiu intre randurile succesive ). Caracterul " spatiu " poate fi luat in considerare de browser daca este inserat explicit prin.1234567891011121314

Bloc preformatat

Orar:

Ora/ZiuaLuniMartiMiercuri8:00RomanaMatematicaSport9:00 GeografieIstorieFizica

ntr-un fiier HTML, caracterele "" au o semnificaie special pentru browser. Ele incadreaza comenzile i atributele de afiare a elementelor intr-o pagina. Dac dorim ca un fragment de text s conin astfel de caractere, acest fragment trebuie incadrat de una dintre perechile de etichete: ...( 80 de caractere pe rand ); ...( 120 de caractere pe rand ).Aceste marcaje interpreteaza corect caracterele " spatiu ", " eticheta "i "CR/LF ". Textul afiat n pagina este monospaiat.123456789101112131415161718

xmp si listing

Un fisier html standard arata astfel:

O pagina Web ...

Blocuri paragrafCu ajutorul etichetei paragrafeste posibil trecerea la o linie noua si permite: inserarea unui spatiu suplimentar inainte de blocul paragraf; inserarea unui spatiu suplimentar dupa blocul paragraf, daca se foloseste delimitatorul(acesta fiind optional); alinierea textului cu ajutorul atributuluialign, avand valorile posibile " left ", " center " sau " right ".123456789101112

Blocuri paragraf

Prima linieLini generata de un paragraf (implicit paragraful este aliniat la stanga).Paragraf aliniat la dreapta.Paragraf aliniat la dreapta.Paragraf aliniat la dreapta.Paragraf aliniat la dreapta. Paragraf aliniat la dreapta.Paragraf aliniat la dreapta.Paragraf aliniat la dreapta.Paragraf aliniat in centru.Paragraf aliniat in centru.Paragraf aliniat in centru.Paragraf aliniat in centru. Paragraf aliniat in centru.Paragraf aliniat in centru.Paragraf aliniat in centru.

Blocuri de titluIntr-un text titlurile ( headers ) de capitole pot fi introduse cu ajutorul etichetelor. , , , , .Toate aceste etichete se refera la un bloc de text si trebuie insotite de o eticheta de incheiere similara.Aceste etichete accepta atributulalignpentru alinierea titlului blocului de text la stanga (in mod prestabilit ) , in centru si la dreapta. Tag-ulpermite scrierea unui titlu cu caractere mai mari si aldine, pe candfoloseste caracterele cele mai mici.1234567891011

Blocuri de titlu

Titlu de marime 1 aliniat in centruTitlu de marime 2 aliniat la dreapta.Titlu de marime 4 aliniat la stanga (implicit)

Linii orizontaleIntr-o pagina Web pot fi inserate linii orizontale.acest lucru se face cu ajutorul etichetei. Pentru a configura o linie orizontala se utilizeaza urmatorele atribute ale etichetei: alignpermite alinierea liniei orizontala. Valorile posibile sunt " left " ," center " si " right "; widthpermite alegerea lungimii liniei; sizepermite alegerea grosimii liniei; noshadecand este prezent defineste o linie fara umbra; colorpermite definirea culorii liniei.12345678910111213

Linii orizontale

Tipuri de linii orizontaleO linie implicita alinierea stanga, latime 100%, grosime 2 cu umbra.

Urmeaza o linie aliniata in centru , de latime 50%, grosime 5 pixeli , fara umbra.Urmeaza o linie aliniata la dreapta , de latime 150 de pixeli, grosime 12 pixeli , de culoare rosie.

BlocuriBlocul introdus de etichetele...aliniaza centrat toate elementele pe care le contine.123456789

Linii orizontale

Blocuri Blocul de text cuprins intre etichetele...va fi afisat pe o singura linie.12345678910

Blocul

O singura linie.O singura linie.O singura linie.O singura linie.O singura linie. O singura linie.O singura linie.O singura linie.O singura linie.O singura linie. O singura linie.O singura linie.O singura linie.O singura linie.O singura linie.

Blocuri Modalitatea cea mai eficienta de delimitare si de formatare a unui bloc de text este folosirea delimitatorilor.... Un parametru foarte foarte util pentru stabilirea caracteristicilor unui bloc( diviziune ) estealign( aliniere ).Valorile posibile ale acestui parametru sunt: left " ( aliniere la stanga ); center " ( aliniere centrala ); right " ( aliniere la dreapta ).Un bloc...poate include alte subblocuri. In acest caz , alinierea precizata de atributulalignal blocului are efect asupra tuturor subblocurilor incluse in blocul;Un bloc...admite atributul " nowrap " care interzice intreruperea randurilor de catre browser.12345678910111213141516171819

Blocul

Aceasta linie este o linie normala.Urmatorul bloc este aliniat la dreapta.

O singura linie.O singura linie.O singura linie.O singura linie.
O singura linie.O singura linie.O singura linie.O singura linie.
O singura linie.O singura linie.O singura linie.O singura linie.

Bloc aliniat pe centru.Bloc aliniat pe centru.
Bloc aliniat pe centru.Bloc aliniat pe centru.
Bloc aliniat pe centru.Bloc aliniat pe centru.

4. Liste. Noiuni i marcaje utilizate.

Unul din cele mai obinuite elemente din documentele cu mai multe pagini este un set de definiii, referine sau indexuri. Glosarele sunt exemple clasice n acest sens; cuvintele sunt listate n ordine alfabetic, urmate de definiii ale termenilor respectivi. n HTML, ntreaga seciune a unui glosar va fi gestionat printr-olista de definiii, care este inclusa ntr-o pereche de marcaje delista de definiii:...(de la "definition list" = lista de definiii).Observaii:- Un termen al listei este iniiat de eticheta(de la "definition term" = termen definit);- Definitia unui termen este iniiata de eticheta(de la "definition description" = descrierea definiiei);- Definitia unui termen ncepe pe o linie noua si este indentat;12345678910111213141516

Liste_ex1

O lista de definitii

Glosar de termeni de World Wide Web hypertext - o interconectare Web de informatii de tip text, in care orice cuvant sau fraza poate face legatura catre un alt punct din document sau catre un alt document date - fluxul nesfarsit de materiale care apar pe Internet, spre deosebire de informatii care sunt date cu un anumit inteles sau valoare informatie - sub-setul de date care are efectiv semnificatie si care este util la momentul curent

Liste neordonateO lista neordonata este un bloc de text delimitat de etichetele corespondente

...

(" ul " vine de la " unordered list " = lista neordonata). Fiecare element al listei este iniiat de eticheta(list item).Lista va fi intentata fata de restul paginii Web si fiecare element al listei ncepe pe un rnd noua.123456789101112131415161718

Liste_ex2

O lista neordonata Glosar de termeni de World Wide Web

Culori uzuale disponibile prin nume

Black

White

Red

Green

Blue

Yellow

Purple

Aqua

Tag-urile

si

pot avea un atributtypecare stabilete caracterul afiat n faa fiecrui element al listei. Valorile posibile al acestui atribut sunt: "circle" (cerc) "disc" (disc plin) (valoarea prestabilita); "square" (ptrat)Listele neordonate pot fi imbricate pe mai multe niveluri123456789101112131415161718192021222324

Liste_ex3

O lista neordonata de liste neordonate Glosar de termeni de World Wide Web

• Elemente si atribute a unei pagini HTML
• Frameset
  • Atribute:
  • cols
  • rows
  • border
• Frame
  • Atribute:
  • src
  • name
  • scrolling

Liste ordonateO list ordonat de elemente este un bloc de text delimitat de etichetele corespondente

1. ...

(" ol " vine de la " ordered list " = lista ordonat). Fiecare element al listei este iniiat de eticheta

(list item).Lista va fi identat fa de restul paginii Web i fiecare element al listei ncepe pe un rnd nou.12345678910111213141516171819

listex_4

O lista ordonata

1. Culori uzuale disponibile prin nume
2. Black
3. White
4. Red
5. Green
6. Blue
7. Yellow
8. Purple
9. Aqua

Tag-urile

1. si

2. pot avea un atributtypecare stabilete 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 - opiune prestabilita );Urmtorul exemplu este o lista ordonata cu cifre romane:12345678910111213141516171819

   Liste_ex5

   O lista ordonata cu cifre romane

   1. Culori uzuale disponibile prin nume
   2. Black
   3. White
   4. Red
   5. Green
   6. Blue
   7. Yellow
   8. Purple
   9. Aqua

   Tag-ul

   1. poate avea un atributstartcare stabilete valoarea iniiala a secvenei de ordonare. Valoarea acestui atribut trebuie sa fie un numar ntreg pozitiv.Urmtorul exemplu este o lista ordonata cu litere mari, ncepnd de la valoarea C.123456789101112131415161718

      Liste_ex6

      O lista ordonata cu litere mari, ncepnd de la valoarea C

      1. Culori uzuale disponibile prin nume
      2. Red
      3. Green
      4. Blue
      5. Yellow
      6. Purple
      7. Aqua

      Tag-ul

   2. poate avea un atributvaluecare stabilete valoare pentru elementul respectiv al listei. Valoarea acestui atribut trebuie sa fie un numar ntreg pozitiv (vezi urmtorul exemplu):123456789101112131415

      Liste_ex7

      O lista ordonata avand itemi setati individual

      1. Repetati urmatorii pasi ai algoritmului
      2. salvati fisierul;
      3. incarcati fisierul in browser;
      4. schimbati browserul utilizat
      5. incarcati din nou fisierul

      Listele ordonate pot fi imbricate intre ele sau cu liste neordonate, ca n exemplul urmtor:12345678910111213141516171819202122232425262728listex_8O lista ordonata de liste ordonate si neordonate

      1. Un sistem informatic include:
      2. Hardware:
         1. placa de baza
         2. procesor
         3. memorie
         4. harddisk
      3. Software:
         • Linux
         • Windows
         • OS/2
         • Unix
      4. Software de aplicatie:
      5. VisualC++
      6. Java
      7. SQL
      8. CorelDraw

O lista de meniuri este un bloc delimitat de etichete corespondente.... Fiecare element al listei este initiat de eticheta( list item ). Cele mai multe browsere afieaz lista de meniuri ca pe o lista neordonata.O lista de directoare este un bloc delimitat de etichete corespondente...(de la " director "). Fiecare element al listei este iniiat de eticheta(list item). Cele mai multe browsere afieaz lista de directoare ca pe o lista neordonata.(Nu se recomanda utilizarea acestori tipuri de liste).Utilizri speciale ale listelorDac ntr-o list, n loc de elementele acesteia introduse prin, se insereaz un bloc de text, aceasta va fi identat ( ntocmai ca elementele unei liste), exemplu:1234567891011

Liste_ex9

Un bloc de text indentat

1. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat.

n exemplul urmtor lista de definiii are itemiisimultipli:12345678910111213141516

Liste_ex10

O lista de definiii speciala

Program Luni Marti Miercuri Ora 9.00.Insciere Ora 11.00.Audieri Ora 13.30.Raspunsuri

Ultimul exemplu este o lista neordonata personalizat care utilizeaz pe post de elemente imagini si texte.1234567891011121314

Liste_ex11

O lista personalizata

Tipuri de masini Volkswagen sunt:
Golf
Jetta
Passat
Bora
Corrado
Transporter

5. Tabele. Noiuni i marcaje utilizate.Tabelele ne permit s cream o reea dreptunghiular de domenii, fiecare domeniu avnd propriile opiuni pentru culoarea fondului, culoarea textului, alinierea textului etc.Pentru a insera un tabel se folosesc etichetele corespondente.... Un tabel este format din rnduri. Pentru a insera un rnd intr-un tabel se folosesc etichetele...( de la " table row "= rnd de tabel ).Folosirea etichetei de sfriteste opional.Un rnd este format din mai multe celule ce conin date.O celula de date se introduce cu eticheta.., exemplu:123456789101112131415

Tabel_ex1

Un tabel simplu format din 4 linii si 2 coloane cell 11cell 11 cell 21cell 22 cell 31cell 32 cell 41cell 42

n mod prestabilit, un tabel nu are chenar. Pentru a aduga un chenar unui tabel, se utilizeaz un atribut al eticheteinumitborder.Acest atribut poate primi ca valoare orice numar ntreg ( inclusiv0) si reprezint grosimea n pixeli a chenarului tabelului.Dac atributulbordernu 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.Cnd atributulborderare o valoare nenul chenarul unui tabel are un aspect tridimensional, exemplu:123456789101112131415

Tabel_ex2

Un tabel simplu cu chenar cell 11 cell 11 cell 21 cell 22 cell 31 cell 32 cell 41 cell 42

Alinierea tabeluluiPentru a alinia un tabel intr-o pagin Web se utilizeaz atributulalignal etichetei, cu urmtoarele valori posibile: "left " ( valoarea prestabilita ); "center "; "right ".Alinierea este important pentru textul ce nconjoar tabelul. Astfel : daca tabelul este aliniat stanga ( ), atunci textul care urmeaz dup punctul de inserare al tabelului va fi dispus in partea dreapta a tabelului. daca tabelul este aliniat dreapta ( ), atunci textul care urmeaz dup punctul de inserare al tabelului va fi dispus in partea stanga a tabelului. daca tabelul este aliniat pe centru ( ), atunci textul care urmeaz dup punctul de inserare al tabelului va fi afiat pe toata limea paginii, imediat sub tabel.123456789101112131415

Tabel_ex3

Un tabel aliniat la dreapta Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. cell 11cell 11 cell 21cell 22

Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel. Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel. Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel. Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel. Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel. Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.

Distanta dintre tabel i celelalte elemente din pagina Web poate fi stabilit cu ajutorul atributelorhspacesivspaceal etichetei. Valoarea atributuluihspacepoate fi orice numar pozitiv, inclusiv 0, si reprezint distanta pe orizontala dintre tabel si celelalte elemente ale paginii Web.Valoarea atributuluivspacepoate fi orice numar pozitiv, inclusiv 0, si reprezint distanta pe verticala dintre tabel si celelalte elemente ale paginii Web.Aceste atribute funcioneaz numai cu Netscape Communicator.Definirea culorilor de fond pentru un tabelCuloarea de fond se stabilete cu ajutorul atributuluibgcolor, care poate fi atasat ntregului tabel prin eticheta, unei linii prin etichetasau celule de date prin eticheta.Valorile pe care le poate primibgcolorsunt cele cunoscute pentru o culoare.Dac n tabel sunt definite mai multe atributebgcolor, atunci prioritatea este urmtoarea:,,(cu prioritate cea mai mica).123456789101112131415

Tabel_ex4

Un tabel simplu colorat verde 11rosu 12 albastru 21galben 22 cell 31cell 32 cell 41 cell 42

Culoarea textului din fiecare celula se poate stabili cu ajutorul expresiei:....Dimensionarea celulei unui tabelDistanta dintre doua celule vecine se definete cu ajutorul atributuluicellspacingal etichetei. Valorile acestui atribut pot fi numere ntregi pozitive, inclusiv 0, si reprezint distanta in pixeli dintre doua celule vecine.Valoarea prestabilita a atributuluicellspacingeste 2.12345678910111213

Tabel_ex5

Un tabel fara chenar de celule alipite

gri 11rosu 12 albastru 21galben 22

Distanta dintre marginea unei celule si coninutul ei poate fi definita cu ajutorul atributuluicellpaddingal etichetei. Valorile acestui atribut pot fi numere ntregi pozitive, si reprezint distanta in pixeli dintre celule si coninutul ei.Valoarea prestabilita a atributuluicellpaddingeste 1.123456789101112

tabelex_6

Un tabel de celule mari gri 11rosu 12 albastru 21galben 22

Dimensionarea unui tabelDimensiunile unui tabel - latime si nlimea - pot fi stabilite exact prin intermediul a doua atribute,widthiheight, ale etichetei.Valorile acestor atribute pot fi: numere ntregi pozitive reprezentnd latime respectiv nlimea in pixeli a tabelului; numere ntregi intre 1 si 100, urmate de semnul %, reprezentnd fraciunea din latime si nlimea totala a paginii.12345678910111213

Tabel_ex7

Un tabel de de 200 pixeli X 50% cell 11cell 12 cell 21cell 22

n exemplul urmtor se utilizeaz un truc care permite afiarea intr-o pagin Web a unui text poziionat n centrul paginii.1234567891011

Tabel_ex8

Un text centrat intr-o pagina Text centrat.

Titlul unui tabelUnui tabel i se poate ataa un titlu cu ajutorul etichetei( de la "table caption" = titlu tabel ).Aceasta eticheta trebuie plasata in interiorul etichetelor..., dar nu in interiorul etichetelorsauTitlul unui tabel poate fi aliniat cu ajutorul atributuluialignal eticheteicare poate lua una dintre valorile: " bottom " ( sub tabel ); " top " ( deasupra tabelului ); " left " ( la stanga tabelului ); " right " ( la dreapta tabelului ).123456789101112

Tabel_ex9

Un tabel cu titlu Masini MercedesCitroenJaguar BMWVolvoRenault

Cap de tabelUn tabel poate avea celule cu semnificaia de cap de tabel. Aceste celule sunt introduse de eticheta( de la " tabel header " = cap de tabel ) n loc de.Toate atribute care pot fi ataate eticheteipot fi de asemenea ataate etichetei. Coninutul celulelor definite cueste scris cu caractere aldine si centrat.12345678910111213

Tabel_ex10

Un tabel cu titlu si cap de tabel Preturile masinii PretCitroenJaguarBMWVolvoIn dolari50001000005000080000In lei20000002000000000200000016000000

Alinierea coninutului unei celuleAlinierea pe orizontala a coninutului unei celule se face cu ajutorul atributuluialigncare 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 coninutului unei celule se face cu ajutorul atributuluivaligncare poate lua valorile: "baseline" ( la baza ); "bottom" ( jos ); "middle" ( la mijloc, valoarea prestabilita ); "top" ( sus ).Aceste atribute pot fi ataate att eticheteipentru a defini tuturor elementelor celulelor unui rnd, cat si etichetelorsipentru a stabili alinierea textului intr-o singura celula.123456789101112

Tabel_ex11

Un tabel avand coninutul celulelor aliniate Aicialiniereaeste centrudreaptastangacentrususjosaicialiniereaeste centrustanga (implicita)

Dimensionarea exacta a celulelor unui tabelDimensiunea unei celule de tipsau de tippot fi stabilite exact cu ajutorul a dou atribute ale acestor etichete:widthpentru latime iheightpentru nlime.Valorile posibile ale acestor atribute sunt: numere intregi pozitive ( inclusiv 0 ) reprezentand dimensiunea in pixeli a latimii, respectiv a inaltimii unei celule; procente din latime , respectiv inaltimea tabelului.123456789101112

Tabel_ex12

Un tabel cu celule de 100x150 de pixeli cell 11cell 11 cell 21cell 22

Tabele de forme oarecareUn tabel trebuie privit ca o retea dreptunghiulara de celule. Cu ajutorul a doua atribute ale etichetelorsi, o celula se poate extinde peste celule vecine.Astfel: extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributuluicolspan, a crui 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 si pe verticala. In acest caz , in etichetelesivor fi prezente ambele atributecolspanirowspan.123456789101112131415

Tabel_ex13

Un tabel simplu cu chenar cell 11
cell 21
cell 31cell 12cell 13, cell 14
cell 23, cell 24
cell 33, cell 34 cell 22 cell 32 cell 41 cell 42, cell 43, cell 44

Atributul " nowrap "Atributulnowrapapartine elementelorsi; el interzice ntreruperea unei linii de text.Astfel , n tabel pot aprea coloane cu o lime orict de mare.12345678910111213

Tabel_ex14

Un tabel cu celule de latime mare cell 11 cell 12 cell 21 cell 22 este foarte lata,aceasta celula este foaret lata.

Celule vide ale unui tabelDac un tabel are celule vide, atunci aceste celule vor aparea n tabel far un chenar de delimitare.n scopul de a afia un chenar pentru celule vide se utilizeaz urmatoarele trucuri: dupase pune; dupase pune
.Caracterul( no break space ) este de fapt caracterul spatiu. Un spaiu ntrodus prin intermediul acestui caracter nu va fi ignorat de browser.12345678910111213

Tabel_ex15

Un tabel cu celule vide cell 11cell 12cell 13

Atribute Internet Explorer pentru tabeleUrmatoarele atribute ale eticheteifunctioneaza cu Internet Explorer 4.0 , 5.0, dar nu cu Netscape Communicator 4.5: backgroundpermite stabilirea unei imagini pentru fondul unui tabel.Primeste ca valoare adresa URL a imaginii folosite pentru fond; bordercolorpermite stabilirea culorii pentru chenarul unui tabel; bordercolorlightpermite stabilirea culorii pentru chenarul 3D al unui tabel; bordercolordarkpermite stabilirea culorii pentru chenarul 3D al unui tabel;123456789101112

Tabel_ex16

Atribute "Internet Explorer" cell 11cell 12cell 13

Grupuri de coloaneBlocul...permite definirea unui grup de coloane. Atributele acceptate desunt: spandetermina numarul de coloane dintr-un grup; widthdetermina o latime unica pentru coloanele din grup; aligndetermina un tip unic de aliniere pentru coloanele din grup.Exemplu:ntr-un bloc, coloanele pot avea configurri diferite dac se utilizeaz elementul, care admite atributele: spanidentifica acea coloan din grup pentru care se face configurarea. Dac lipsete, atunci coloanele sunt configurate n ordine; widthdetermina o latime pentru coloana identificata prin span; aligndetermina o aliniere pentru coloana identificata prin span.12345678910111213

Tabel_ex17

Grupuri de coloane Text in prima coloana. Text in prima coloana. Text in prima coloana. Text in prima coloana. Text in coloana doua.Text in coloana doua.Text in coloana doua.Text in coloana doua.Text in coloana a treia. Text in coloana a treia. Text in coloana a treia. Text in coloana a treia.

Atributele frame si rulesAtributulframeal eticheteipermite specificarea parilor din chenarul unui tabel care vor fi afiate.Valorile posibile ale acestui atribut sunt: void- elimina toate muchiile exterioare ale tabelului; above- afieaz o muchie in partea superioara a cadrului tabelului; below- afieaz o muchie in partea inferioara a cadrului tabelului; hsides- afieaz cate o muchie in partea superioara si inferioara cadrului tabelului; lhs- afieaz o muchie in partea din stanga a cadrului tabelului; rhs- afieaz o muchie in partea din dreapta a cadrului tabelului; vsides- afieaz o muchie in partea din stanga si din dreapta a cadrului tabelului; box- afieaz o muchie pe toate laturile cadrului tabelului; border- afieaz o muchie pe toate laturile cadrului tabelului;Atributulrulesal eticheteipermite alegerea unor delimitatori pentru celulele unui tabel. Valorile posibile sunt: none- elimina toate muchiile interioare ale tabelului; groups- afieaz muchii orizontale intre toate grupurile din tabel.Grupurile sunt specificate prin elementele, , si. rows- afieaz muchii orizontale intre toate liniile tabelului; cols- afieaz muchii verticale intre toate coloanele tabelului; all- afieaz muchii intre toate liniile si coloanele;123456789101112

Tabel_ex18

Atributele frames si rules cell 11cell 12cell 13 cell 21cell 22cell 23

Subblocurile unui tabeln specificatiile HTML 4.0, continutul unui tabel poate fi mprit n subblocuri prin elementele: ...( un singur rand ); ...( un singur rand ); ...( oricate randuri );ntr-un tabel exista un singur subbloc de tipuli un singur subbloc de tipul, dar pot exista mai multe subblocuri de tip.

6. Operarea cu obiecte. Inserarea imaginilor, sunetelor i videoclipurilor.6.1.Inserarea imaginilorFolosirea imaginilor sporete atractivitatea i designul paginii, duce la o mai bun inelegere a mesajului, dar trebuie luat n consideraie i faptul c excesul de imagini va duce la ncrcarea greoaie a site-ului. Exist numeroase formate grafice, dar cele mai rspndite sunt: GIF (Graphics Interchange Format) introdus de Compuserve JPEG (Joint Photographic Expert Group) PNG (Portable Network Graphic Format Grafic portabil n reea)Aceste formate sunt dependente de platform. Imaginile grafice sunt construite din pixeli, care sunt puncte distincte de informaie de imagine. Fiecare pixel necesit un bit de culoare. Principalele caracteristici ale formatelor de imagine sunt: numrul de culori, compresia, transparena, ntreeserea i animaia. Asemnrile i deosebirile dintre cele trei formate grafice sunt: Imaginile GIF pot utiliza doar 256 de culori, avnd nevoie de 8 bii, n timp ce formatele JPEG i PNG pot utiliza milioane de culori, avnd 24 de bii de culoare, respectiv 32 de bii /pixeli de culoare. Ceea ce face formatul GIF att de utilizat nu este numai paleta mic de culori (256), dar i posibilitatea reducerii numrului de culori, astfel, dac este nevoie doar de 2 culori, se utilizeaz numai un bit, ceea ce reduce dimensiunea fiierului de 8 ori. Toate aceste trei formate grafice pot comprima imaginea pentru a reduce dimensiunile fiierelor. Comprimarea se poate face, n mod diferit, pentru fiecare format, i, din aceste motive, ele pot avea dimensiuni mai mici ntr-un format dect n altul. Formatele GIF i PNG admit culoarea transparent, n timp ce formatul JPEG nu admite transparena. Formatele GIF i PNG admit animaia, n timp ce, cu formatul JPEG, nu se poate obine animaie. De exemplu, pentru a obine animaie pentru imagini GIF se poate folosi pentru Windows pachetul GIF Construction Set, iar pentru Macintosh pachetul soft GIFBuilder. Toate cele trei formate accept ntreeserea. De exemplu, cnd se vizualizeaz o pagin web, se pot observa imaginile care apar linie cu linie, de la forma brut pn la redarea final, aceasta reprezint ntreeserea. Dei dimensiunea fiierelor crete cu pn la 10%, cu ajutorul acestei ntreeseri, vizitatorul poate s-i fac o imagine despre ceea ce se va descrca.Avnd 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 fiierelor. JPEG pentru fotografii, cnd se dorete s se redea ct mai exact culoarea real a imaginii. PNG pentru desene complexe, dar i pentru fotografii, acesta fiind formatul care mbin caracteristicile celor dou.Imaginile pot fi descrcate de la adrese absolute sau relative. Adresele URL (Uniform Resource Locator) reprezint standarde de identificare a resurselor (de exemplu, fiiere) i pot fi adrese URL absolute i relative.Adrese URL absoluteAdresele absolute identific locaia unui fiier imagine de pe Internet sau alte calculatoare conectate la Internet i au sintaxa:protocol/nume_calculator/cale/nume_fiierUn exemplu de adres URL absolut:http://ciobanu.cich.md/images/eu.jpgunde: htpp:// este protocolul Internet utilizat; ciobanu.cich.md este numele calculatorului; images este calea pn la fiierul imagine dorit; eu.jpg este fiierul imagine C.A.Adrese URL relativeO adres relativ identific locaia unei imagini, descriind o cale relativ la directorul curent unde se afl fiierul imagine. Adresele relative se refer la localizarea fiierului imagine de pe calculatorul personal i are sintaxa:cale/nume_fiier.Referirea la: directorul printe se poate face prin ../ directorul rdcin se poate face prin /Un exemplu de adres URL relativ:/../../../friend.jpgsau se mai poate scriec:/windows/web/wallpaper/friend.jpgToate imaginile cu care vom lucra vor avea adresa URL exprimat n funcie de directorul ce conine documentul HTML care face referire la imagine, adic adres relativ.Imaginile se inseraez n pagini cu ajutorul tag-ului, care este un element inline, adic poate fi inserat oriunde n pagin. Sintaxa acestui element este:.n continuare este prezentat un exemplu de utilizare a elementului:1234567 Hotelul TRUMP Taj Mahal de la Atlantic City

Pentru ca acest exemplu s poat fi executat, trebuie ca fiierulTaj_Mahal.jpgs fie n acelai folder cu pagina, deoarece nu s-a indicat nicio adres.Atributele elementului imgAtributele elementuluisunt:src, alt, align, border, height, width,hspace, vspace.n continuare vor fi descrise succint aceste atribute.Atributulsrc

Atributulsrceste un atribut obligatoriu al elementului IMG, care identific fiierul ce conine imaginea care se dorete a fi inserat. Fiierele imagine pot avea extensia: .jpg, jpeg, png etc. Fiierul care conine imaginea se gsete n directorul curent (ca n exemplul de mai sus), n alt folder din calculatorul curent sau n reeaua web. n cazul n care fiierul se afl: n alt locaie dect directorul curent, numele fiierului trebuie precedat de calea relativ la directorul curent; n reeaua web, trebuie dat adresa URL absolut, ca de exempluhttp://cich.md/galerie/img_1631.jpg.AtributulaltExist posibilitatea ca imaginile s nu se poat ncrca din diferite motive, situaie n care se folosete atributulaltal elementului. Valoarea acestui atribut este un text, care va fi afiat n locul imaginii.123456 de la Atlantic City

AtributulalignAtributulalignindic browser-ului cum va fi aliniat poza fa de text. n lipsa unei opiuni, poza este plasat acolo unde este scris n cod (este element inline, iar textul ncepe de la baza pozei).Valorile atributului sunt: left aliniere la stnga i textul curge pe lng imagine n dreapta ei, ncepnd din partea superioar; right aliniere la dreapta i textul curge pe lng imagine n stnga ei, ncepnd din partea superioar ; top textul este plasat n partea superioar a imaginii; middle textul are plasat, la mijlocul imaginii, numai primul rnd, restul continund sub imagine; bottom textul este plasat n partea de jos a imaginii i continu sub imagine.n exemplul urmtor se poate vedea modul de aliniere a imaginii ntr-o pagin:123456789101112131415161718192021222324252627

Alinieri Imagini Aliniere Bottom Aceasta este o imagine aliniata

bottom care este alinierea implicita pe verticala. Numai primul rnd este aliniat bottom restul textului este sub imagine. Aliniere Top Aceasta este o imagine aliniata Top , care este alinierea sus pe verticala. Numai primul rnd este aliniat Top restul textului este sub imagine. Aliniere Middle Aceasta este o imagine aliniata Middle care este alinierea pe centru pe verticala. Numai primul rind este aliniat Middle restul textului este sub imagine.Aliniere Left Aceasta este o imagine aliniataLeftcare este aliniereastinga pe orizontala. Textul curge pe lng poz n dreapta ei.Aliniere Right Aceasta este o imagine aliniata Right care este alinierea dreapta pe orizontala. Textul curge pe linga poz n stnga ei.

Atributulborder

Atunci cnd se insereaz o imagine, browser-ul o va afia fr chenar. Pentru a aduga un chenar unei imagini se folosete atributulborder=nr_pixeli, undenr_pixelireprezint grosimea chenarului n pixeli. Valoarea implicit este 0. Dac n exemplul de mai sus se mai adaug acest atributbrowser-ul va afia:vezi ...AtributelewidthiheightImaginea 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 lime se folosete atributulwidth, iar pe nlime se folosete atributulheight. 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 fraciune din dimensiunea ferestrei.OBSERVAII!1. Dac se modific doar o dimensiune, imaginea va fi afiat de browser proporional;2. Dac se modific ambele dimensiuni, imaginea va fi afiat de browser deformat.Un exemplu de redimensionare a imaginii este dat mai jos.

12345678

de la Atlantic City de la Atlantic City de la Atlantic City

AtributelehspaceivspaceAceste atribute au acelai efect ca i atributele cu acelai nume ale elementului, i, anume, asigur distana de la imagine la celelalte componente din pagin, pe orizontal (hspace) i pe vertical (vspace), adic definesc spaii albe n jurul imaginilor.Un exemplu n care sunt folosite aceste atribute este dat mai jos.12345678910111213

Taj Mahal-ul a fost construit de al cincilea mprat mogul,Shah Jahan, n memoria celei de-a doua sotiiMumtaz Mahal, printesa persan musulman. mprteasa a murit dup naterea celui de-al 14-lea copil, alturi de soul su, n timpul campaniei de zdrobire a rebeliunilor din Burhanpur. Moartea ei l-a afectat ntr-att pe mprat nct prul i-a albit n numai cteva luni. nainte de ultima suflare Mumtaz l-a rugat pe mprat patru lucruri: s-i construiasc un mormnt, s se recstoreasc, sa-i iubeasc fiii i s-i viziteze mormntul la aniversare. ahul a pierdut la decesul soiei sale nu numai o consoart, ci i un abil i inteligent sfetnic politic. Aa a jurat mpratul c va construi un edificiu funerar mare i fr egal n lume.Hotelul TRUMP Taj Mahal de la Atlantic City

Atributulclearal elementului BRDac se dorete a se terge textul din jurul unei imagini se folosete elementul
, unde valoare poate fi: all se terge tot textul din jurul imaginii left se terge tot textul din stnga imaginii right se terge tot textul din dreapta imaginii none se las textul din jurul imaginiin exemplul de mai sus se adaug
, dup elementulO imagine poate fi utilizata pentru a stabili fondul unei pagini Web. In acest scop se foloseste atributul background al etichetei, avnd ca valoare adresa URL a imaginii.Imaginea se multiplic pe orizontal i pe vertical pn umple ntregul ecran.12345678910111213141516Imagini pentru fundal

123456789

Utilizari speciale ale imaginilorImaginile pot fi utilizate pentru a obtine efecte deosebite intr-o pagina web.Printre aceste utilizri speciale putem enumera: Linii orizontale formate cu ajutorul imaginilor; Simboluri speciale pentru elementele unei liste neordonate.6.2.Inserarea sunetelor si videoclipurilorMultimedia se prezint ntr-o multitudine de formate, iar pe Internet vei gsi multe dintre aceste elemente nglobate n pagini web. Browser-ele actuale ofer suport pentru multe dintre aceste formate, dar nu pentru toate. Suportul pentru sunete, animaii i video este tratat n mod diferit de browsere diferite. Unele elemente pot fi manevrate intern, altele necesit anumite plug-in-uri, n vreme ce altele pot solicita activarea anumitor controale ActiveX.n acest capitol vei afla despre diferitele formate multimedia i cum s le folosii ntr-o pagin web.Elementele multimedia (precum sunetele i video) sunt stocate n fiiere media. Modalitatea cea mai simpl de a determina tipul unui fiier media este de a analiza extensia fiierului respectiv .Formatul fiierelor multimedia ce conin sunete.Sunetele pot fi stocate n diferite formate de fiiere. Astfel deosebim:a)Formatul MIDIMIDI (Musical Instrument Digital Interface) este un format ce permite transmiterea de informaii muzicale ntre dispozitive electronice muzicale (precum sintetizatoare) i plcile de sunet ale calculatoarelor.Formatul MIDI a fost implementat n 1982 de ctre industria muzical. Acest format este foarte flexibil i poate fi folosit pentru (aproape) orice, de la crearea unor sunete foarte simple, pn la crearea unora cu adevrat profesionale. Fieierele MIDI nu conin sunete, ci un set de instruciuni digitale muzicale (note muzicale) care pot fi interpretate de plcile de sunet ale calculatoarelor.Dezavantajul la acest tip de fiiere const n faptul c nu pot stoca muzic (n toat complexitatea ei), ci doar note muzicale.Avantajul l constituie mrimea mic a acestor fiiere, prin urmare se pot ncrca uor 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. Fiierele de tip MIDI au extensia .mid sau .midi.b)Formatul RealAudioFormatul RealAudio a fost dezvoltat pentru Internet de ctre Real Media. Acest format suport chiar i video.Formatul permite difuzarea de informaii audio (muzic on-line, Internet radio) cu lime de band joas. Din cauza acestei limi de band, calitatea este, de cele mai multe ori, slab.Fiierele de tip RealAudio au extensia .rm sau .ram.c)Formatul AUAcest formatul a fost dezvoltat de ctre Sun Microsystems i este suportat de majoritatea sistemelor de operare.Aceste fiierele au extensia .au.d)Formatul AIFFAIFF (Audio Interchange File Format) a fost dezvoltat de ctre Apple. Acest tip de fiiere nu sunt suportate de toate browser-ele.Aceste fiierele au extensia .aif sau .aiff.e)Formatul SNDSND (Sound) a fost dezvoltat, de asemenea, de ctre Apple i au acelai dezavantaj, i anume c nu sunt suportate de toate browser-ele.Aceste fiierele au extensia .snd.f)Formatul WAVEWAVE (waveform) a fost dezvoltat de ctre IBM i Microsoft. Este un format suportat de toate computerele pe care ruleaz Windows i este recunoscut de majoritatea browsere-lor.Fiierele de tip WAVE au extensia .wav.g)Formatul MP3Fiierele MP3 sunt de fapt fiiere MPEG, dezvoltate iniial pentru video de ctre Moving Pictures Experts Group. Se poate afirma c fiierele MP3 reprezint partea de sunet dintr-un fiiere video n format MPEG.MP3 este n prezent unul dintre cele mai populare formate folosite la nregistrarea muzicii. Sistemul de codificare MP3 combin o bun compresie (ce duce la fiiere mici) cu calitate nalt. Este de ateptat ca pe viitor toate sistemele de operare s ofere suport pentru acest tip de format.Fiierele de tip MP3 au extensia .mp3 sau .mpga.n funcie de scopul pentru care creai o pagin web multimedia va trebui s v orientai i asupra unui anumit format de fiier. Astfel, dac dorii ca sunetele nregistrate (muzic sau de alt tip) s poat fi asculatet de toi vizitatorii paginii web, atunci trebuie s folosii fiiere n format WAV, ntruct este cel mai popular format pe Internet i este suportat de majoritatea browsere-lor. Dac pagina web este despre nregistrri muzicale, atunci formatul cel mai potrivit este MP3.Formatul fiierelor multimedia ce conin videoi imaginile video pot fi stocate n diferite formate de fiiere. Astfel deosebim:a)Formatul AVIFormatul AVI (Audio Video Interleave) a fost dezvoltat de ctre Microsoft. Este un format suportat de toate computerele pe care ruleaz Windows i este recunoscut de majoritatea browsere-lor. Dei este un format des ntlnit pe Internet, nu este ntotdeauna suportat de calculatoarele cu sisteme de operare non-Windows.Fiierele de tip AVI au extensia .avi.b)Formatul Windows MediaAcest formatul a fost dezvoltat de ctre 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 dect n urma instalrii unor extra componente (playere specializate).Fiierele de tip Windows Media au extensia .wmv.c)Formatul MPEGFormatul 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. Fiierele de tip MPEG au extensia .mpg sau .mpeg.d)Formatul QuickTimeFormatul QuickTime a fost dezvoltat de ctre Apple i nu poate rula pe platformele Windows fr instalarea unui player specializat. Fiierele de tip QuickTime au extensia .mov sau .qtm.e)Formatul RealVideoFormatul RealVideo a fost dezvoltat pentru Internet de ctre Real Media.Formatul permite difuzarea de informaii video (video on-line, Internet video) cu lime de band joas. Din cauza acestei limi de band, calitatea este, de cele mai multe ori, slab.Fiierele de tip RealVideo au extensia .rm sau .ram.f)Formatul Shockwave (Flash)Formatul Shockwave a fost dezvoltat de ctre 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. Fiierele de tip Shockwave au extensia .swf.Adugarea de informaii multimedia unei pagini webInformaiile multimedia pot fi redate direct de browser sau prin intermediul unui program ajuttor (un player specializat), n funcie de elementul HTML i de formatul fiierului 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 ntruct ofer posibilitatea vizitatorilor de a alege ntre a vedea o pagin web cu elemente multimedia sau fr acestea. n acest caz pagina se ncarc mult mai repede nemaifiind nevoie s se ncarce toate informaiile multimedia.O metod specific, mai complex, ce are ca rezultat includerea n pagina web (ca parte integrant din aceasta) a unor informaii multimedia, se realizeaz prin intermediul elementului.Not: Dei, n funcie de browser-ul folosit,mai pot fi folosite i alte elemente, cum ar fi , recunoscut de Internet Explorer, i , recunoscut de Internet Explorer i Netscape, consoriul W3C (World Wide Web Consortium) recomand utilizarea elementului .Atributele utilizate cu acest element sunt:AtributDescriere

archivePrecizeaz locaia (URL-ul) fiierelor arhiv

classidPrecizeaz locaia (URL-ul) obiectului. Valorile posibile depind de proiectantul elementului de control. n Windows, aceste valori sunt nscrise n regitri i pot fi accesate cu aplicaiaRegistry Editor

codebasePrecizeaz calea (URI-ul) n care se gsete clasa obiectului specificat prin atributeleclassid,dataiarchive

codetypeSpecific tipul fiierului specificat prin atributulclassid

dataPrecizeaz numele i locaia (URL-ul) obiectului. Se poate folosi mpreun sau ca o alternativ aatributuluiclassid, n funcie de tipul obiectului

declareCnd este prezent, acet atribut face ca definiia curent introdus de elementul s fie tratat ca o simpl declaraie

heightSpecific nlimea suprafeei n care va fi afiat obiectul

namePrecizeaz denumirea obiectului (cnd acesta este cuprins ntr-un formular)

standbyPrecizeaz textul ce va fi afiat pn cnd este ncrcat obiectul

tabindexPrecizeaz poziia elementului curent n document (ordinea n care va fi focalizat de utilizator cnd se folosete tastatura)

typeDetermin tipul MIME asociat cu fiierul respectiv. Este un atribut opional dar recomandat cnd se foloseteatributuldata

widthSpecific limea suprafeei n care va fi afiat obiectul

Acest element necesit n mod obligatoriu tag-ul de nchidere corespunztor . mpreun cu elementul (n interiorul acestuia) se folosete i elementul asociat care definete parametrii elementului .Atributele utilizate cu acest element sunt:AtributDescriere

idPrecizeaz un identificator unic pentru element

namePrecizeaz o denumire pentru element

typeDetermin tipul coninutului

valueSpecific valoarea parametrului

valuetypeSpecific tipul valoarii parametrului

Elementul poate suporta diferite tipuri de informaii multimedia, cum ar fi imagini, sunete, video, pagini web etc.n funcie de tipul acestor informaii, difer i sintaxa folosit n limbajul HTML. Astfel, pentru a insera o imagine (n format .jpg), prin intermediul elementului , se folosete urmtoarea sintax:

Pentru a insera un sunet (n format .wav) se folosete urmtoarea sintax:

Pentru a insera un film (n format .wmv) se folosete urmtoarea sintax:

Pentru a insera o pagin web se folosete urmtoarea sintax:

Pentru a insera o animaie creat n Flash (n format .swf) se folosete urmtoarea sintax:

Inserarea unui film QuickTime ntr-o pagin webFormatul QuickTime a fost dezvoltat de ctre Apple i, dei este un format des ntlnit pe Internet, nu poate rula pe platformele Windows fr instalarea unui player specializat. Fiierele de tip QuickTime au extensia .mov sau .qtm. Cu ajutorul elementului poate fi uor adugat cod ntr-o pagin web astfel nct 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 urmtoare:

Atributelewidthiheighttrebuie setate astfel nct s corespund dimensiunii fimului QuickTime (n pixeli).Atributulclassididentific n mod unic software-ul ce va rula filmul. Trebuie setat "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" astfel nct s identifice controlul ActiveX ce trebuie instalat pe computer nainte 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.Atributulcodebasespecific calea (URI-ul) n care se gsete clasa obiectului specificat prin atributulclsid. Internet Explorer folosete acest atribut pentru a specifica locaia de unde poate fi descrcat player-ul corespunztor. n acest caz, trebuie setat "http://www.apple.com/qtactivex/qtplugin.cab", aceasta fiind locaia unde se gsete ultima variant a player-ului QuickTime.Parametrulsrctrebuie s se orienteze asupra fiierului ce conine filmul.Parametrulautoplayse seteaz "true" n cazul n care se dorete ca filmul s nceap s ruleze automat.La fel i parametrulcontrollerse seteaz "true" n cazul n care se dorete s fie afiat bara de control a player-ului.Inserarea unui film Real Video ntr-o pagin webFormatul RealVideo a fost dezvoltat pentru Internet de ctre Real Media. Formatul permite difuzarea de informaii video (video on-line, Internet video) cu lime de band joas. Din cauza acestei limi de band, calitatea este, de cele mai multe ori, slab.Fiierele de tip RealVideo au extensia .rm sau .ram. Cu ajutorul elementului se introduce codul n pagina web astfel nct 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 corespunztor n cazul n care nu este deja instalat. Prin urmare, nainte de a putea rula un film n format Real Video, este necesar instalarea programului RealPlayer. Versiunea pentru Windows poate fi descrcat de la adresahttp://uk.real.com/?mode=rp .Sintaxa folosit n mod uzual este de forma urmtoare:

Atributelewidthiheighttrebuie setate astfel nct s corespund dimensiunii fimului Real Video (n pixeli).Atributulclassididentific n mod unic software-ul ce va rula filmul. Trebuie setat "clsid: CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" astfel nct s identifice controlul ActiveX ce trebuie instalat pe computer nainte ca filmul s poat fi rulat.Parametrulsrctrebuie s se orienteze asupra fiierului ce conine filmul.Parametrulautostartse seteaz "true" n cazul n care se dorete ca filmul s nceap s ruleze automat.Parametrulcontrolsse seteaz "All" n cazul n care se dorete s fie afiat bara de control a player-ului sau "ImageWindow " n cazul n care NU se dorete s fie afiat bara de control a player-ului.Alte metode de inserare a unor sunete ntr-o pagin webAa cum am atras atenia anterior, pentru introducerea de sunete ntr-o pagin web mai pot fi folosite i alte elemente, cum ar fi , recunoscut de Internet Explorer, i , recunoscut de Internet Explorer i Netscape.Elementuleste folosit pentru a insera un sunet pe fundalul unei pagini web. Fiierele suportate de acest element pot fi n format WAV, AU sau MID. Atributele caracteristice acestui element sunt:AtributDescriere

balancePrecizeaz balansul. Poate lua valori ntre -10000 (100% stnga) i +10000 (100% dreapta)

delayDefinete timpul de pauz dintre repetiii

idDefinete un identificator atribuit sunetului

loopPrecizeaz de cte ori va fi repetat sunetul (-1 = infinit)

srcPrecizeaz locaia (URL-ul) fiierului ce conine sunete

titlePrecizeaz un titlu atribuit sunetului

volumePrecizeaz volumul. Poate lua valori ntre 0 (max.) i -10000 (min.)

Sintaxa folosirii acestui element este foarte simpl:

Muzica in fundal

Folosind codul de mai sus vei obine o pagin web pe fundalul crei se va auzi o pies instrumental.Elementuleste folosit pentru a insera elemente multimedia ntr-o pagin web n cazul browsere-lor care nu suport elementul . Elementul poate fi folosit cu browserele mai noi, care suport controale ActiveX (Internet Explorer5), n vreme ce elementul este recomandat s fie folosit pentru browserele mai vechi. Pentru compatibilitate, se recomand folosirea simultan a celor dou elemente. n aceast situaie, un browser care recunoate elementul va ignora elementul .Atributele caracteristice acestui element sunt:AtributDescriere

autostartStabilete dac obiectul multimedia pornete n mod automat la ncrcarea paginii web. Poate lua valoriletruesaufalse

heightSpecific nlimea suprafeei n care va fi afiat obiectul

hiddenStabilete dac obiectul multimedia este vizibil pentru vizitatorul paginii web. Poate lua valoriletruesaufalse

srcPrecizeaz locaia (URL-ul) fiierului ce conine sunete

widthSpecific limea suprafeei n care va fi afiat obiectul

volumePrecizeaz volumul. Poate lua valori ntre 0 (max.) i -10000 (min.)

mpreun cu elementul se recomand folosirea elementului care ar trebui s conin informaii ce vor fi afiate n cazul n care browser-ul nu suport elementul . Din nefericire, un browser care suport elementul va ignora elementul ,chiar dac este incapabil s afieze obiectul introdus de elementul .Sintaxa recomandat pentru folosirea acestui element este urmtoarea:Din pcate nu avei instalatplugin-ul corespunztor pentru a vedea acest tip de fiier multimedia.Putei vedea n continuare o imagine edificatoare.Se poate folosi chiar i o combinaie ntre elementele i , astfel nct, dac unul din elemente nu este suportat de browser, s fie recunoscut cellalt.Folosirea codului urmtor:123456789

Muzica in fundal

Not: Bara de control afiat aparine player-ului QuickTime deoarece a fost setat ca "Default Player" pentru fiierele de tip .MID.Aplicaie practicPentru exemplificare, vom crea un fiiertest.htmlce va cuprinde o parte dintre elementele prezentate anterior:123456789101112131415161718192021222324252627282930313233343536373839

Adaugarea de informatii multimedia unei pagini web

Inserarea unei imagini

Inserarea unui sunet (format .wav)

Browser-ul dvs. nu suport elementele object i nici embed

Inserarea unui film (format .wmv)

Inserarea unei pagini web

Inserarea unei animatii Flash (format .swf)

7. Referine. Referine interne i externe.

Pn acum am nvat s crem documente HTML n care am ntrodus text i imagini. n acest capitol vom arta cum putem accesa orice resurs Web, Internet i intern cu ajutorul referinelor (legturi, link-uri, hiperlegturi).Referinele au urmtoarele roluri: Permit trecerea de la o pagin la alta de pe Web i revenire la pagina iniial prin apsarea butonului Back al browser-ului; Permit trecerea de la o pagin la alta de pe calculatorul propriu; Permit trecerea la fiiere non web de pe Internet (ftp, telnet etc.); Permit trecerea la fiiere non HTML (.txt, .jpg, .pdf etc.); Permit vizitarea unei pagini ncepnd dintr-un anumit loc, renunnd la barele de defilare; Permit trimiterea unui e-mail.7.1. Marcajul Pentru a crea o legtur se folosete marcajulancor, care are sintaxa: coninut Coninutul dintre marcajeleipoate fi text i/sau imagine, este afiat de browser sub form de legtur (colorat i subliniat), i poate accepta comenzi de la mouse (un clic) sau de la tastatur (ENTER). Cnd este deasupra unei legturi, cursorul grafic ia forma unei mini, indicndu-ne astfel c browser-ul este pregtit s descarce resursa Internet de la adresa URL indicat. Dac un document are mai multe legturi ne putem deplasa de la una la alta i cu mouse-ul i cu ajutorul tastei TAB, iar pentru a face o legtur activ se execut clic cu butonul stng pe legtur sau se tasteaz ENTER. Atributele tag-uluisunt: href; target; title; name;AtributulhrefAtributulhref(referin hipertext) este obligatoriu pentru tag-ul legtur (casrcpentru elementul), are sintaxahref="adresa URL"i are rolul de a identifica o adres URL absolut (de pe Internet) sau relativ (local). n exemplul de mai jos dm o referin ctre un fiier local,flori.jpg, i ctre pagina Colegiului de Informatic, de pe WEB:12345678 Referinte Florile mele preferateCriniDetalii despre Colegiul de Informatica CIC

AtributultargetCnd utilizatorul activeaz o legtur, browser-ul nlocuiete fereastra care conine legtura cu o nou fereastr, specificat de adresa URL dinhref. Atributul target face s se schimbe aceast operaie implicit i el are sintaxatarget="nume", undenumedefinete fereastra n care va fi ncrcat noua pagin. Numele este orice ir de caractere sau valori constante: _blankpagina va fi ncrcat ntr-o nou fereastr; _parentpagina va fi ncrcat n fereastra printe; _toppagina va fi ncrcat n fereastra top a cadrului; _selfpagina va fi ncrcat n aceeai fereastr(implicit).12345678 Referinte Florile mele preferateCriniDetalii despre Colegiul de Informatica CIC

Atributul titleAcest atribut are un caracter general i poate fi ataat la majoritatea elementelor HTML. Sintaxa acestui element este:title="valoare". Cnd mouse-ul este deasupra coninutului tag-ului coninut se transform ntr-o mn i va afia valoarea atributuluititle, ntr-o sugestie de instrument (ntr-un cadru).12345678 Referinte Florile mele preferateCriniDetalii despre Colegiul de Informatica CIC

AtributulnameAcest atribut este utilizat pentru a defini o ancor n interiorul unei pagini. Sintaxa acestui atribut este:name="valoare".7.2. Referine ctre alte pagini WebDac se dorete accesarea unei pagini de pe alt site, valoarea atributuluihrefeste o adres URL absolut. Amintim c o adresa URL absolut are sintaxa:protocol /nume-calculator/cale/fiierunde protocol poate fi, de exemplu, http.Exemplu:12345678

Pentru mai multe informatii despre
nvatamnt vizitati site-ul Ministerul Educatiei ME

Acelai rezultat obinem dac scriem i numele fiierului index(default) care se ncarc ME Dac se dorete s se viziteze alt pagin a respectivului site, se scrie numele fiierului .php(.html), respectiv.7.3.Referine cu imaginiAa cum am specificat mai sus, o legtur poate fi creat i cu ajutorul unei imagini. Ca i n cazul n care coninutul unei legturi este un text, i n cazul n care coninutul este o imagine, accesarea paginii se face cu un clic, sau un ENTER pe imagine. Exemplu:12345678910 Legaturi cu imagini Colegiul de Informatica din Chisinau

Un link poate fi format i din text i din imagine adic:123456789 Legaturi cu imagini Colegiul de Informatica din Chisinau CIC

7.4.Referine cu adrese URL relativeAdresele URL relative sunt acele adrese care fac referire la pagini de pe calculatorul propriu, indicndcale/nume-fiier, fr a fi prefixate de protocol i nume calculator. n adresele relative putem folosi caracterele../ pentru a urca un nivel n structura de directoare(ctre directorul printe).Se cunoate faptul c un site poate s aib paginile (fiierele) organizate ntr-o structur arborescent de directoare. S presupunem c avem urmtoarea structura arborescent :

Conform structurei arboriscente date din paginapag6.htmldin mapaM5se pot accesa celelalte pagini, utiliznd urmtoarele referine:1. ../../pag1.html2. ../../M1/pag2.html3. ../../M3/M6/pag7.html4. ...1234567 Referinte relative Pagina7 Referinta catre pagina pag5.html

1234567 Referinte relative Pagina5 Referinta catre pagina pag7.html

7.5. Referine ctre informaii non WebSe pot face referine i la adrese URL absolute de pe Internet, care nu sunt resurse Web. n adresele URL absolute se nlocuiete protocolulhttpcu alte protocoale non Web (ftp, telnet, gopher etc.).Exemplu:1234567891011

Vizitati locatia

Educatie

Whole Earth

GongresGopher

7.6.Referine ctre fiiere non HTMLSe pot stabili legturi ctre orice tip de fiiere, nu numai html, ca de exemplu .pdf, .txt, .gif, .rar, .zip, etc. n aceste condiii se ntlnesc dou situaii:I. Browser-ul nu poate lucra cu fiierul ntlnit i atunci ncearc s-l descarce, executnd operaia download.II. Browser-ul cunoate tipul de fiier i acesta va fi deschis n fereastra sa.Exemplu:123456789

Fisier PDF
Fisier TXT
Fisier RAR
Fisier JPG

7.7.Referine interne n cadrul unei paginin aceast seciune vom defini ancore (inte) ntr-o pagin, adugarea legturilor ctre aceste inte, precum i legturi ctre 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 deplasm rapid ntr-un loc din document. Ancora este un identificator al nceputului unui element dintr-o pagin web. Dac au fost definite ancore ntr-o pagin, se pot crea legturi ctre respectivele ancore.Ancorele se pot defini n dou moduri: utiliznd orice element HTML, inclusiv elementulcu atributulid, de exemplu:sau utiliznd tag-ulcu atributul name, de exemplu: Pentru a crea o legtur la o ancor se folosete tag-ul...cu atributulhref, care are ca valoare o referin de ancor, precedat de simbolul #, astfel: # valoare_nume # valoare_idFiierul trebuie s fie suficient de mare, astfel nct secvena care conine o ancor s nu fie vizibil n momentul trimiterii ctre ea. Ca exemplu s considerm agenda grpei I-942:123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960

Agenda grupei

Agenda grupei I-942

[A-C] [D-H] [I-L] [M-N] [O-S] [T-W]

[A-C] 1.Bogdan Constantin2.Budu Tudor3.Buzu Gheorghe4.Casian Olea5.Casparov Pavel6.Cebotari Ecaterina7.Cibuc Nicolae8.Ciusca Cristian9.Coslet Vladislav10.Cotru Alina11. ... [D-H] 1.Dabija Viorel2.Gabura Ruslan3.Gorobet Lilian4. ... [I-L] 1.Lungu Inga2. ... [M-N] 1.Melestean Alexandru2.Mititelu Dumitru3. ... [O-S] 1.Podolean Ion2.Popovici Victor3.Puzur Gheorghe4.Savin Victor5.Scutelnic Valeria6.Smolenschi Mihai7.Stefanica Victor8.Strelciuc Victoria9. ... [T-W] 1.Todirascu Mihaela2.Toma Cristian3.Vasiloi Alexandru4. ...

7.8. Trimiterea automat a unui e-mailDac dorim s trimitem un e-mail dintr-o pagin, se creeaz o legtur la o adres e-mail. Legtura va avea atributulhrefa crui valoare estemailto(protocol pentru pot), urmat de: i de o adres dee-mail valid, de exemplu: Puteti sa-mi scrieti Se poate folosi elementulde formatare logic, care are rolul de a evidenia o adres (mesajul se va scrie la nceput de linie), aa cum reiese din exemplu de mai jos. Sintaxa elementuluieste: Puteti sa-mi scrieti Cnd se execut clic pe o legture-mail, se va deschide o aplicaiee-mail care are, n cmpulTo, adresa din legtur i care permite s introducem mesajul. Se poate trece i un subiect, care va fi desprit de adres prin?, precum i un text n interiorul mesajului (de formabody=text) i care se va separa de subiect prin caracterul &, ca n exemplul de mai jos:12345678

Puteti sa-mi scrieti

7.9. Culorile referinelorO referin poate fi n una din strile: activ vizitat nevizitatn funcie de starea n care se afl, o legtur are o anumit culoare i anume: Stareaactivare culoarea implicit rou (#FF0000). Culoarea se poate schimba cu atributulalink=culoareal elementului Stareavizitatare culoarea implicit purple (#800080). Culoarea se poate schimba cu atributulvlink=culoareal elementului Stareanevizitatare culoarea implicit albastru (#0000FF). Culoarea se poate schimba cu atributullink=culoareal elementului12345678910

CIC

CFBC

CCC

8. Documentarea unei pagini WebMeta-informaiile sunt informaiile despre modul de organizare a informaiilor. n cazul unei pagini Web meta-informaiile vor furniza date despre modul n care a fost creat aceast pagin.Meta-informaiile nu sunt vizibile ntr-o pagin Web. Ele sunt coninute n fiierul surs .html i sunt utilizate de serverele Web aflate n INTERNET, specializate n stocarea de informaii despre informaiile stocate pe diferite site-uri. Meta-informaiilesunt culese de ctre aplicaiile speciale ale motoarelor de cutare numite spiders sau robots. Serverele specializate n stocarea i indexarea de meta-informaii ofer utilizatorilor motoare de cutare puternice care permit regsirea informaiilor (a adreselorla care aceste informaii exist). Cteva exemple n acest sens sunt: www.google.com, www.yahoo.com, www.altavista.com, www.excite.com, www.lycos.com etc.Meta-informaiile adic informaiile despre informaiile coninute ntr-o pagin Web se introduc cu ajutorul tag-uluiplasat n interiorul blocului.Acest tag se utilizeaz cel mai frecvent mpreun cu trei atribute: name; http-equiv; content.Cele trei atribute se folosesc n perechi"name/content"sau"http-equiv/content".8.1. Descrierea unei pagini WebPentru a face cunoscut motoarelor de cutare din Internet scopul pentru care a fost creat o pagin Web poate fi inserat un elementavnd atributele: name-setat la valoareadescription; content- setat la un ir de caractere ce conine o descriere general a paginii.Iat n continuare un exemplu de utilizare:123456789 Colegiul de Informatic

8.2. Cuvintele cheie pentru o pagin WebCuvintele cheie ofer o alt metod de descriere a informaiilor coninute de o pagin Web. Cuvintele cheie trebuie alese cu atenie pentru ca informaia indexat pe baza lor de ctre spiders, s poat fi regsit corect n bazele de date ale mooarelor decutare.Pentru a preciza cuvintele cheie ale paginii Web se utilizeaz: atributulname- setat la valoareakeywords; atributulcontent- care va primi ca valoare lista cuvintelor cheie separate prin ",".Iat un exemplu de utilizare:8.3. Drepturile de autorAtributulnamepoate fi utilizat pentru a furniza informaii legate de autorul paginii i despre Copyright (drepturile de autor). Exemplul urmtor ilustraz acestelucruri:

8.4. Persoana de contactPentru a putea furniza informaii despre persoana care se ocup de administrarea site-ului se utilizeaz atributulhttp-equiv. n acest caz valoarea atributuluicontentva conine o adrese-mail eventual urmat n paranteze rotunde de un nume complet alpersoanei.Exemplu:

8.5. Setul de caractere utilizatSetul de caractere se stabilete prin intermediul atributuluicharset. n mod implicit setul de caractere al unei pagini Web estewestern. Opional acest set de caractere poate fi stabilit prin urmtoarea exprimare:

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

8.6. Rencrcarea automat a unei pagini WebO utilizare interesant a atributuluihttp-equiveste aceea de a seta rencrcarea automat n fereastra browser-ului a aceleiai pagini (de exemplul pagina cu evoluia cursurilor la o burs) sau a unei pagini noi.n acest fel se obin faciliti dinamice pentru un Website. Pentru a rencrca aceeai pagin la un interval precizat de secunde se utilizeaz atributulhttp-equivsetat la valoarearefreshiar atributulcontentsetat la valoarea numrului de secunde dup care sedorete ca pagina s fie reactualizat.Exemplul 1. Aceeai pagin va fi rencrcat dup 5 secunde:

Exemplul 2. O alt pagin (cuprins.html) va fi rencrcat dup 9 secunde:

8.7. ComentariileComentariile sunt blocuri de text utile care prezint informaii de proiectare utile despre modul n care a fost scris un fiier surs .html. Comentariile sunt ignorate de ctre browser la ncarcarea paginii. Pentru a insera un bloc de comentarii se utilizeaz sintaxa:

Blocul de comentarii poate fi plasat oriunde este necesar n cadrul paginii .html i se poate extinde pe mai multe rnduri;

9.Operarea cu formulare. Marcaje utilizate.Un formular este un ansamblu de zone active alcatuit din butoane ,casete de selecie,cmpuri de editare etc.Formularele va asigura construirea unori pagini Web care permit utilizatorilor s introduc efectiv informaii 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 cutare din Web - pn la o structur complex ,cu multiple seciuni, care ofer faciliti puternice de transmisie a datelor. O sesiune cu o pagin web ce conine un formular cuprinde urmtoarele etape:1. Utilizatorul completeaz formularul i l expedieaz unui server;2. O aplicaie dedicat de pe server analizeaz formularul completat i (dac este necesar) stocheaz datele ntr-o baz de date;3. Dac este necesar serverul expedieaz un raspuns utilizatorului.Un formular este definit ntr-un bloc delimitat de etichetele corespondentei.Atribute eseniale ale elementului Exist dou atribute eseniale ale elementului:1.Atributulactionprecizeaz ce se va ntampla cu datele formularului odat ce acestea ajung la destinaie. De regul ,valoarea atributuluiactioneste adresa URL a unui script aflat pe un srver WWW care primete datele formularului, efectueaz o prelucrare a lor i expedieaz ctre utilizator un rspuns..Script-urile pot fi scrise n limbajele Perl, C, PHP, Unix shell.2.Atributulmethodprecizeaz metoda utilizat de browser pentru expedierea datelor formularului. Sunt posibile urmtoarele valori: get(valoarea implicit). n acest caz, datele din formular sunt adugate la adresa URL precizat de atributulaction;- nu sunt permise cantiti mari de date (maxim 1 Kb);- intre adresa URL i date este inserat un "?".Datele sunt adugate 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"; postn acest caz datele sunt expediate separat. Sunt permise cantiti mari de date (ordinul MB)Pentru ca un formular s fie funcional, trebuie precizat ce se va ntmpla cu el dup completarea i expediere. Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin pota electronic (e-mail). Pentru aceasta se folosete un atribut al etichetei:i anumeactioncare primete ca valoare "mailto:" concatenat cu o adres valid dee-mail ctre care se va expedia formularul completat.Un formular cu un cmp de editare i un buton de expediereMajoritatea elementelor unui formular sunt definite cu ajutorul etichetei. Pentru a preciza tipul elementului se folosete atributultypeal etichetei. Pentru un cmp de editare, acest atribut primeste valoarea "text". Alte atribute pentru un elementsunt: name- permite ataarea unui nume fiecrui element al formularului; value-care permite atribuirea unei valori iniiale unui element al formularului.Un buton de expediere al unui formular se introduce cu ajutorul etichetei, n care atributultypeeste configurat la valoarea "submit".Acest element poate primi un nume prin atributulname. Pe buton apare scris "Submit Query" sau valoarea atributuluivalue, dac aceast valoare a fost stabilit.12345678910111213

Form_ex1

Un formular cu un camp de editare si un buton de expediere Numele:

Pentru elementulde tipul cmp de editare (type = "text") , alte doua atribute pot fi utile: size- specific lmea cmpului de editare ce depete aceast lme ,atunci se execut automat o derulare acestui cmp; maxlength- specific numrul maxim de caractere pe care le poate primi un cmp de editare, caracterele tastate peste numrul maxim sunt ignorate.Observaii:- dac atributultypelipsete ntr-un element, atunci cmpul respectiv este considerat n mod prestabilit ca fiind de tip "text";- formularele cu un singur cmp (de tip text) nu au nevoie de un buton de expediere, datele sunt expediate automat dupa completarea i apsarea tastei ENTER.Butonul ResetDaca un element de tipare atributultypeconfigurat la valoarea "reset", atunci n formular se introduce un buton pe care scrie "Reset". La apsarea acestui buton, toate elementele din formular primesc valorile prestabilite (definit odata cu formularul ), chiar dac aceste valori au fost modificate de utilizator.Un butonResetpoate primi un nume cu ajutorul atributuluinamei o valoare printr-un atributvalue. Un asemenea buton afieaz textul "Reset" dac atributulvaluelipsete, respectiv valoarea acestui atribut n caz contar.1234567891011121314

Form_ex2

Un formular cu un buton reset


Introduceti numele:

Introduceti prenumele:

Cmp de editare de tip "password"Dac se utilizeaz etichetaavnd atributultypeconfigurat la valoarea "password" , atunci n formular se introduce un element asemntor cu un cmp de editare obinuit introdus printype="text". Toate atributele unui cmp de editare rmn valabile. Singura deosebire const n faptul c acest cmp de editare nu afieaz caracterele clar, ci numai caractere*, care ascund de privirile altui utilizator aflat n apropiere valoarea introdus ntr-un asemenea cmp. La expedierea formularului ns, valoarea tastat ntr-un cmp de tip "password" se transmite clar.123456789101112131415

Form_ex3

Un formular cu un buton reset
Nume:
Prenume:
Password:

Butoane radioButoanele radio permit alegerea, la un moment dat, a unei singure variante din mai multe posibile. Butoanele radio se introduc prin etichetacu atributultypeavnd valoarea "radio".1234567891011121314151617

Form_ex4

Un formular cu butoane radio

Alegeti sexul:
Barbatesc:
Femeiesc:

La expedierea formularului se va transmi