curs practic html

8/7/2019 Curs Practic HTML

1/37

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

Intre cele doua marcaje si vom introduce doua sectiuni:-sectiunea de antet ... si - corpul documentului.... Blocul ... cuprinde continutul propriu-zis alpaginii HTML, adica ceea ce va fi afisat in ferastra browser-ului.

O eticheta poate fi scris atat cu litere mici, cat si cu litere mari.Adica = = . Caracterele "spatiu" si "CR/LF" ce apar intreetichete sunt ignorate de catre browser.Deci un prim document HTML ar fi ceva de genul asta:

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

Sa nu disperam ... vom adauga primele elemente la pagina noastra. In primulrand, titlul unei pagini se obtine inserand in sectiunea ... aurmatoarei linii:

Aceasta este prima mea pagina de WebIn plus, in sectiunea ... putem scrie texte cat dorim. Daca nuintalnim nici un marcaj < sau > atunci interpretorul HTML le va lua ca textesimple si le va afisa pe ecran. Sa vedem o noua versiune a paginii noastre:

Aceasta este prima mea pagina de Web

Bine ati venit in pagina mea de Web!

vezi acest exemplu

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

Daca introducem mai multe linii intr-o pagina browser-ul va afisa intr-unsingur rand, intrucat caracterele " CR/LF " sunt ignorate de browser. Trecerea


2/37

pe o linie noua se face la o comanda explicita, care trebuie sa apara inpagina html.Aceasta comanda este marcajul
( de la " line break " - intrerupere delinie ).

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

titlul paginiiBine ati venit in
pagina mea de Web!vezi acest exempluBlocuri preformatatePentru ca browser-ul sa interpreteze corect caracterele " spatiu ", " tab " si

" CR/LF " ce apar in cadrul unui text, acest text trebuie inclus intr-un bloc....

bloc preformatat

Prima linieA doua linie

A treia linie

vezi acest exemplu

Culoarea de fond

O culoare poate fi precizata in doua moduri:Printr-un nume de culoare.Sunt disponibile cel putin 16 nume de culori: aqua,black, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver,teal, white si yellow.Prin constructia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifrehexazecimale si pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c,C, d, D, e, E, f, F; se pot defini astfel 65536 de culori.Culoarea unei pagini se precizeaza prin intermediul unui atribut al etichetei.Culoarea fondului paginii Web se stabileste cu atributul bgcolor al etichetei, de exemplu: .Urmatorul exemplu realizeaza o pagina cu fondul de culoare gri.

culoare de fond


3/37

O pagina Web cu fondul GRI!vezi acest exemplu

Culoarea textului

Acest lucru se face prin intermediul atributului text al etichetei dupasintaxa . In urmatorul exemplu textul are culorea rosie.

culoare textului Un text de culoare rosie.vezi acest exempluO eticheta poate avea mai multe atribute.De exemplu , o eticheta cu trei

atribute arata astfel: . Urmatorul exemplu prezinta o pagina cu fondul de culoarealbastra si textul de culoare galbena.

atribute multiple Fond de culoare albastra si text de culoare galbena.vezi acest exemplu

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

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

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


4/37

Pozitionarea continutului paginii Web fata de marginile ferestrei browseruluise poate face cu ajutorul a doua atribute ale etichetei :

leftmargin ( stabileste distanta dintre marginea stanga a ferstrei browseruluisi marginea stanga a continutului paginii );topmargin ( stabileste distanta dintre marginea de sus a ferstrei browseruluisi marginea de sus a continutului paginii );Configurarea textului si stabilirea marginii Textul are atribute implicite.
Textul este scris cu fontul "Arial", culoare albastru si marime 6. vezi acest exempluStiluri pentru blocurile de textPentru ca un bloc de text sa apara in pagina evidentiat (cu caractere aldine),trebuie inclus intre delimitatorii ... ( b vine de la "bold" =

indraznet ).Pentru ca un text sa fie scris cu carcatere mai mari cu o unitate decat celecurente acesta trebuie inclus intr-un bloc delimitat de etichetele....Pentru ca un text sa fie scris cu carcatere mai mici cu o unitate decat celecurente acesta trebuie inclus intr-un bloc delimitat de etichetele....Pentru ca un text sa fie scris cu carcatere cursive acesta trebuie inclusintr-un bloc delimitat de etichetele ... ( i vine de la " italic ").

Pentru a insera secvente de text aliniate ca indice (sub-script) sau caexponent (super-script) , aceste fragmente trebuie delimitate de etichetele..., respectiv ....

Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele... (u vine de la " underline ").Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele... sau ....

In exemplul urmator vom utiliza toate etichetele mentionate anterior.

Stiluri pentru blocuri de text Text scris cu caractere ingrosate.
Text cu caractere marite cu o unitate mai mare si maimare si mai mare.
Textul este scris cu caractere micsorate cu o unitate maimic.
Text scris cu caractere italice.
In aceasta linie sus este superscript iar jos estesubscirpt.
Aceasta linie este in intregime sectionata de o linieorizontala.
In aceasta linie urmatorul cuvant este subliniat, iar cuvantul


5/37

strike sectoinat.vezi acest exempluStiluri 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 semnificatieiinformatiei 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 paginiiWeb.

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

... ( " cite " inseamna citat);... (em vine de la " emphasize " = a evidentia).In 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 masina descris ):

... ( " code " inseamna cod sau sursa);... ( kbd vine de la " keyboard " = tastatura);... ( tt vine de la " teletype " = teleprinter).Eticheta de tip bloc ... delimiteaza fragmenete de textclipitoare. Aceasta eticheta functioneaza numai in browserul NetscapeCommunicator.

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 clipeste Blinkvezi acest exempluExemplul urmator ilustreaza ca etichetele pot fi imbricate.

un fragment de text poate fi scris cu aldine si cursive in acelsi timp;pentru un fragment de text se pot folosi simultan stilurile subliniat,exponent, marit si cursiv.Blocul ... permite inserarea in-line a citatelor.Aceste citate suntafisate de catre browser cu caractere cursive." q " vine de la " in-line quotation " (citate inserate in-line);Si blocurile " q " pot fi imbricate.Imbricarea etichetelor


6/37

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

Fonturi

Un font este caracterizat de urmatoarele atribute:

culoare (stabilita prin atributul color);tipul sau stilul (stabilit prin atributul face);marimea (definita prin atributul size);marimea in puncte tipografice (stabilita prin atributul point-size);

grosime (definita prin atributul weight).Toate aceste atribute apartin etichetei, care permite inserarea de blocuri detexte personalizate.

CuloriO culoare poate fi precizata in doua moduri:

printr-un nume de culoare.printr-o constanta conform standardului de culoare RGB (Red, Green,Blue). Oastfel de constanta se formeaza astfel: #rrggbb, unde r, g si b sunt cifrehexazecimale.Culorea fontuluiPentru a scrie un fragment de text cu caractere de o anumita culoare se

incadreaza acest fragment intre delimitatorii ... avand stabilit atributulcolor la valoarea necesara. De exemplu:

fragment de text de culoare rosie

Familia fontului

Blocuri de text

Aceste etichete nu se refera la particularitatiile caracterelor ce compuntextul, ci la functiile pe care le poate avea un bloc de text in cadrulpaginii Web.Toate aceste etichete produc automat trecerea la un rand nou si adaugarea unuispatiu suplimentar.Inserarea unei adreseDaca intr-o pagina web trebuie inclusa o adresa ,atunci putem utiliza


7/37

facilitatile oferite de o eticheta dedicata: ....

AdresaAdresa institutiei noastre este : Colegiul Universitar
Str: Victor Babes , Nr:62/A
Baia Mare Romania vezi acest exempluIndentarea unui blocPentru ca un bloc de text sa fie indentat ( marginea din stanga a textului safie deplasata la dreapta la o anumita distanta fata de marginea paginii ),acesta trebuie inclus intre etichetele ....

Indentarea unui blocTextul ce urmeaza este indentat: Aceste etichete nu se refera laparticularitatiile caracterelor ce compun textul, ci la functiile pe care lepoate avea un bloc de text in cadrul paginii Web. Toate aceste etichete producautomat trecerea la un rand nou si adaugarea unui spatiu suplimentar.vezi acest exempluBlocul preformatatIntr-un bloc ..., semnificatia marcajelor HTML se pastreaza.

Blocul ... este indicat pentru a insera randuri vide ( spatiu intrerandurile succesive ). Caracterul " spatiu " poate fi luat in considerare debrowser daca este inserat explicit prin .

Bloc preformatatOrar:Ora/Ziua Luni Marti Miercuri

8:00 Romana Matematica Sport9:00 Geografie Istorie Fizica vezi acest exempluIntr-un fisier HTML, caracterele "" au o semnificatie speciala pentrubrowser. Ele incadreaza comenzile si atributele de afisare a elementelor intr-o pagina. Daca dorim ca un fragment de text sa contina astfel de caractere,acest fragment trebuie incadrat de una dintre perechile de etichete:

... ( 80 de caractere pe rand );


8/37

... ( 120 de caractere pe rand ).Aceste marcaje interpreteaza corect caracterele " spatiu ", " eticheta " si"CR/LF ". Textul afisat in pagina este monospatiat. xmp si listingUn fisier html standard arata astfel: O pagina Web ... vezi acest exempluBlocuri paragrafCu ajutorul etichetei paragraf

este 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 folosestedelimitatorul
(acesta fiind optional);alinierea textului cu ajutorul atributului align, avand valorile posibile "left ", " center " sau " right ". Blocuri paragrafPrima linie
Lini generata de un paragraf (implicit paragraful este aliniat la stanga).

Paragraf aliniat la dreapta.Paragraf aliniat ladreapta.Paragraf aliniat la dreapta.Paragraf aliniat la dreapta. Paragrafaliniat la dreapta.Paragraf aliniat la dreapta.Paragraf aliniat la dreapta.

Paragraf aliniat in centru.Paragraf aliniat incentru.Paragraf aliniat in centru.Paragraf aliniat in centru. Paragraf aliniatin centru.Paragraf aliniat in centru.Paragraf aliniat in centru.vezi acest exempluBlocuri de titluIntr-un text titlurile ( headers ) de capitole pot fi introduse cu ajutoruletichetelor . , , , , .Toate aceste etichete se refera la un bloc de text si trebuie insotite de oeticheta de incheiere similara.Aceste etichete accepta atributul align pentru alinierea titlului blocului detext la stanga (in mod prestabilit ) , in centru si la dreapta. Tag-ul permite scrierea unui titlu cu caractere mai mari si aldine, pe cand foloseste caracterele cele mai mici.

Blocuri de titlu


9/37

Titlu de marime 1 aliniat in centru Titlu de marime 2 aliniat la dreapta. Titlu de marime 4 aliniat la stanga (implicit) vezi acest exempluLinii orizontaleIntr-o pagina Web pot fi inserate linii orizontale.acest lucru se face cuajutorul etichetei . Pentru a configura o linie orizontala se utilizeazaurmatorele atribute ale etichetei :

align permite alinierea liniei orizontala. Valorile posibile sunt " left " ,"center " si " right ";width permite alegerea lungimii liniei;size permite alegerea grosimii liniei;noshade cand este prezent defineste o linie fara umbra;color permite definirea culorii liniei.

Linii orizontale Tipuri de linii orizontale O linie implicitaalinierea stanga, latime 100%, grosime 2 cu umbra.Urmeaza o linie aliniata in centru , de latime 50%, grosime 5 pixeli , faraumbra. Urmeaza o linie aliniata ladreapta , de latime 150 de pixeli, grosime 12 pixeli , de culoare rosie.

vezi acest exempluBlocuri Blocul introdus de etichetele ... aliniaza centrat toateelementele pe care le contine.

Linii orizontale vezi acest exempluBlocuri Blocul de text cuprins intre etichetele ... va fi afisat pe osingura linie.

Blocul


10/37

O singura linie.O singura linie.O singura linie.O singura linie.Osingura linie. O singura linie.O singura linie.O singura linie.O singuralinie.O singura linie. O singura linie.O singura linie.O singura linie.Osingura linie.O singura linie.vezi acest exempluBlocuri Modalitatea cea mai eficienta de delimitare si de formatare a unui bloc detext este folosirea delimitatorilor .... Un parametru foarte foarteutil 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 , aliniereaprecizata de atributul align al blocului are efect asupra tuturorsubblocurilor incluse in blocul ;Un bloc ... admite atributul " nowrap " care interzice intreruperearandurilor de catre browser. 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.

Pentru a scrie un text intr-o pagina pot fi folosite mai multe fonturi(stiluri de caractere). Exista cinci familii generice de fonturi care sunt deregula disponibile pe toate calculatoarele utilizatorilor: serif, sans serif,cursive, monospace si fantasy.Tipul de font necesar poate fi stabilit prin atributul face al etichetei.Pot fi introduse mai multe fonturi separate prin virgula.

In acest caz browserul va utiliza primul font pe care il cunoaste.


11/37

Culoarea si familia fontuluiAceste linie este scrisa cu caractere normale.
Aceasta linie este rosie.
Aicifiecarecuvantarealtaculoare.
Linie scrisa cu caractere monospatiate.
Linie scrisa cu caractere arial.vezi acest exempluMarimea fontuluiPenrtu a stabili marimea unui font se utilizeaza atributul size al 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 valoareacurenta;-1, -2, etc. pentru a micsora dimensiunea fontului cu 1, 2, etc. fata devaloarea curenta.Marimea unui font poate fi stabilita exact cu ajutorul atributului point-size.Valorile acceptate de acest atribut pot fi orice numere naturalepozitive.Numarul astfel precizat reprezinta marimea fontului in punctetipografice.Acest atribut functioneaza numai cu Netscape Communicator.

Marimea fontuluiAceste linie este scrisa cu caractere normale.
Fonturi de marime 5.
Fonturi de marime 30 pt (numai cu NetcapeCommunicator).
Fonturi de marime 50 pt (numai cu NetcapeCommunicator).vezi acest exempluGrosimea unui fontGrosimea unui caracter poate fi definita cu ajutorul atributului weight aletichetei.Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700,800 si 900 (100 pentru fontul cel mai subtire si 900 pentru cel mai gros).


12/37

Grosimea fontuluiAceste linie este scrisa cu caractere normale.
Fonturi de grosime 100.

Imagini

Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptat debrowsere pentru fisierele imagine sunt:

GIF (Graphics Interchange Format) cu extensia .gif;JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;XPM (X PixMap) cu extensia .xmp;XBM (X BitMap) cu extensia .xbm;BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;Cele mai raspandite formate sunt GIF(8biti pentru o culoare, 256 culoriposibile) si JPEG (24biti pentru o culoare, 16777216 de culori posibile).Adresa URL a unei imaginiURL ( "Uniform Resourse Locator" = identificator unic al resursei ) este unstandard folosit in identificarea unica a unei resurse in Internet.Toate imaginile cu care vom lucra vor avea adresa URL exprimata in functie dedirectorul ce contine documentul HTML care face referire la imagine.

Pentru a insera o imagine intr-o pagina, se utilizeaza eticheta (de la"image"=imagine).Pentru a putea fi identifica imaginea care va fi inserata, se utilizeaza unatribut al etichetei si anume src (de la "source"=sursa).Daca imaginea se afla in acelasi director cu fisierul HTML care face referirela imagine, atunci adresa URL a imaginii este formata numai din numeleimaginii, inclusiv extensia.

O pagina care contine o imagine Text dupa imagine.

vezi acest exempluChenarul si dimensionarea unei imaginiDaca doriti sa adaugati un chenar in jurul imaginii, folositi atributul borderal etichetei .Valorile acestor atribute sunt numere intregi pozitive.

O imagine are anumite dimensiuni pe orizontala si verticala, stabilite inmomentul crearii ei.Daca nu se cere altfel , aceste dimensiuni sunt respectate in momentul


13/37

afisarii ei in pagina Web.

Dimensiuniile prestabilite ale unei imagini pot fi modificate prin intermediulatributelor width si height.

O imagine cu chenar si de 200 pixeli X 15 % Text dupa imagine.

vezi acest exempluAlinierea unei imaginiAlinierea unei imagini se poate face prin intermediul atributului align carepoate lua urmatorele valori:

" left " - aliniere la stanga; celelalte componente sunt dispuse pe in parteadreapta;" right " - aliniere la dreapta; celelalte componente sunt dispuse pe inpartea stanga;" top " - aliniere deasupra; partea de sus a imaginii se aliniaza cu partea de

sus a textului ce precede imaginea;" middle " - aliniere la mijloc; mijlocul imaginii se aliniaza cu linia debaza a textului ce precede imaginea." bottom " - aliniere la baza; partea de jos a imaginii se aliniaza cu liniade baza a textului.

Alinieri:

Pe verticala:La mijloc: Jos: Text dupa imagine.

vezi acest exempluAlinierea textului in jurul imaginiiAtributele hspace si vspace precizeaza distanta in pixeli pe orizontala ,respectiv pe verticala, dintre imagine si restul elementelor din pagina.Atributul alt admite ca valoare un text care va fi afisat in locul imaginii.

Imagine aliniat la stanga inconjurata de text la distanta de 30 de pixeli.

Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.Textinainte de imagine. Text inainte de imagine.Text inainte de imagine.Textinainte de imagine.Text inainte de imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.Textdupa imagine. Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupaimagine.Text dupa imagine.


14/37

vezi acest exempluImagini pentru fondul unei paginiO imagine poate fi utilizata pentru a stabili fondul unei pagini Web. In acestscop se foloseste atributul background al etichetei , avand ca valoareadresa URL a imaginii.Imaginea se multiplica pe orizontala si pe verticala pana umple intregulecran.

123456789

vezi acest exempluImagini folosite ca legaturiO legatura (link) introduce in pagina Web o zona activa.Efectuand click cu butonul mouse-ului pe aceasta zona in browser se va incarcao alta pagina.Pentru a utiliza imaginea "ubm1.jpg" drept legatura catre pagina index.htmlutilizam sintaxa:

In mod prestabilit imaginea utilizata pe post de zona activa este inconjuratade un chenar avand culoarea unei legaturi.Daca stabilim pentru atributul border al etichetei 0 acest chenardispare.

Imagini folosite ca legaturi

Text inainte de imagine.Text dupa imagine.

vezi acest exempluUtilizari speciale ale imaginilorImaginile pot fi utilizate pentru a obtine efecte deosebite intr-o pagina web.Printre aceste utilizari speciale putem enumera:

Linii orizontale formate cu ajutorul imaginilor .Simboluri speciale pentru elementele unei liste neordonate ( vezi ).

Legaturile (link-urile)reprezinta partea cea mai importanta a unei pagini Web.Ele transforma un text obisnuit in hipertext sau hiperlegatura, care premite


15/37

trecerea rapida de la o informatie aflata pe un anumit server la altainformatie memorata pe un alt server aflat oriunde in lume.Legaturile sunt zone active intr-o pagina Web, adica zone de pe ecransensibile la apasarea butonului stang al mouse-ului.O legatura catre o pagina aflata in acelasi directorO legatura catre o pagina aflata in acelasi director se formeaza cu ajutoruletichetei (de la "anchor"=ancora).Pentru a preciza pagina indicata de legatura se utilizeaza un atribut aletichetei numit href, care ia valoare numele fisierului HTML aflat inacelasi director. Zona activa care devina sensibila la apasarea butonuluistang al mouse-ului este formata din textul cuprins intre etichetele....Prezenta etichtetei de sfarsit este obligatorie.

Comutarea intre doua paginiPagina 1

Link catre pagina 2 vezi acest exemplu Comutarea intre doua paginiPagina 2 Link catre pagina 1

vezi acest exempluO legatura catre o pagina aflata pe acelasi disc localDaca pagina referita se afla pe acelasi disc local, dar intr-un alt directoratunci pentru a preciza pozitia ei in structura de directoare se poate folosiadresarea relativa.

Comutarea intre doua pagini aflate pe acelasi disc localPagina 3 Link catre o pagina cu liste vezi acest exempluO legatura catre un site particularIn exemplul urmator se utilizeaza adresa URL www.netscape.com care incarcapagina de start din site-ul firmei Netscape Corporation.


16/37

Link catre site-ul firmei NetscapeLink catre site-ul firmei Netscape Netscape Corporation vezi acest exempluAncoreIntr-o pagina foarte lunga pot exista puncte de reper catre care se definesclegaturi.O ancora se defineste de asemenea prin eticheta . Pentru a defini ancora seutilizeaza atributul name care primeste ca valoare un nume atribuit ancorei(de exemplu "leg1").Pentru a insera o legatura catre "leg1" definita in aceeasi pagina seutilizeaza eticheta avand atributul href de valoare "#leg1".Pentru a introduce o legatura catre o ancora definita in alt document (alta

pagina) aflat in acelasi director, atributul href primeste o valoare de forma"nume_fisier.html#nume_ancora".

Ancore definite in acelasi document si in alt doocumentAncore definite in acelasi document si in alt document Link catre ancora 1 Link catre o ancora din alt document

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
ancora 1vezi acest exempluAncore definite prin atributul idAtributul id este un atribut universal ,adica poate fi atasat oricarui elemental unei pagini Web.Acest atribut va inlocui complet atributul name, care putea fi atasat numaianumitor elemente.Atributul id primeste ca valoare un nume (de exemplu "id1") care identifica inmod unic un element.Atributul id poate fi utilizat pe post de ancora intr-o pagina Web conformsintaxei:

... Link catre elementul "id1"

unde "eticheta" poate fi orice element .

Exemplul anterior arata astfel cu eticheta id.


17/37

Alegerea culorilor pentru legaturiIn mod prestabilit se utilizeaza trei culori pentru legaturi:

o culoare pentru legaturile nevizitate (nu s-a efectuat nici un clic pe ele)o culoare pentru legaturile vizitate (s-a efectuat cel putin un clic pe ele)o culoare pentru legaturile active (deasupra carora se afla mouse-ul la unmoment dat).Aceste atribute pot fi stabilite cu ajutorul a trei atribute ale etichetei:link pentru legaturile nevizitate;vlink pentru legaturile vizitate;alink pentru legaturile active.Valorile pe care le pot lua aceste atribute sunt culori definite prin nume sauconform standardului RGB. Culori pentru lagaturi

Setarea culorilor pentru link-uri:
rosu pentru legaturi active, verdepentru legaturi vizitate si albastru pentru legaturi nevizitate Link catre pagina 1
Link catre pagina 2
Link catre pagina 11 vezi acest exempluUtilizarea postei electroniceIntr-o pagina Web se poate afla legaturi care permit lansarea in executie a

aplicatiei de expediere a mesajelor electronice.Pentru aceasta se utilizeaza in constructia adresei URL serviciul Internetmailto: urmat de o adresa e-mail valida.

Pentru ca exemplul urmator sa functioneze trebuie ca:

pe calculator sa fie instalat o aplicatie de expediere a mesajelorelectrionice (Outlook Express pe calc. Windows , Pine pe calc. Unix);adresa sa fie valida si calculatorul sa fie conectat la Internet. Expediere de mesaje electroniceExpediere de mesaje electronice
Mesaje catre autorul paginiivezi acest exempluLegaturi catre fisiere oarecareO pagina Web poate contine legaturi catre orice tip de fisiere aflate pe oriceservere din Internet. Pentru aceasta se utilizeaza eticheta avand valoarea


18/37

atributului href egala cu adresa URL a fisierului destinatie.

Atunci cand se efectueaza clic pe legatura din exemplul urmator browserul sedeschide o caseta de dialog - File download - care va permite:

sa salvati pe discul local fisierulsa lansati in executie aplicatia capabila sa interpreteze corect fisierele detipul respectiv Legaturi catre fisiere oarecareLegaturi catre fisiere oarecare
Link catre fisierul fisier.zipvezi acest exempluAtributul title

Atributul title apartine etichetei si comanda aparitia unei mici ferestrein pagina Web cand mouse-ul se afla pe o legatura, fereastra in care esteafisata valoarea data acestui atribut.Acest atribut are astfel menirea de a furniza informatii suplimentare despresemnificatia unei legaturi.

Atributul titleAtributul title

Mesaje catre autorul paginiivezi acest exempluLegaturi catre fisiere de sunetSunetele pot fi stocate in fisiere in diverse formate:

AU/m-law cu extensia .au;AIFF/AIFC cu extensiile .aiff, .aif;WAVE/WAV cu extensia .wav;MPEG Audio cu extensia .mpeg2, sau .mp2;MIDI cu extensia .mid sau .midi;O legatura catre un fisier de sunet se realizeaza folosind eticheta destinata legaturilor catre orice tip de fisiere, unde atributul href va aveavaloarea egala cu adresa URL a fisierului de sunet.De exemplu:

Link catre fisierul de sunet

Legaturi catre fisiere videoclipuriVideoclipurile sunt stocate in fisiere diverse formate.Formatele si extensiilecorespunazatoare pentru fisierele utilizabile in paginile Web sunturmatoarele:


19/37

MPEG cu extensia .mpeg sau mpg;QuickTime cu extensia .mov;AVI cu extensia .avi.O legatura catre un fisier de sunet se realizeaza folosind eticheta destinata legaturilor catre orice tip de fisiere, unde atributul href va aveavaloarea egala cu adresa URL a fisierului videoclip.De exemplu:

Link catre fisierul videoclip

ListeUnul din cele mai obisnuite elemente din documentele cu mai multe pagini esteun set de definitii, referinte sau indexuri. Glosarele sunt exemple clasice inacest sens; cuvintele sunt listate in ordine alfabetica, urmate de definitiiale termenilor respectivi. In HTML, intreaga sectiune a unui glosar va fi

gestoinata printr-o lista de definitii, care este inclusa intr-o pereche demarcaje de lista de definitii: ... (de la "definition list" = listade definitii).Observatii:

-Un termen al listei este initiat de eticheta (de la "definition term" =termen definit);-Definitia unui termen este initiata de eticheta (de la "definitiondescription" = descrierea definitiei);-Definitia unui termen incepe pe o linie noua si este indentata;listex_1O lista de definitii

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

vezi acest exempluListe 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 initiat de eticheta (list item).Lista va fi indentata fata de restul paginii Web si fiecare element al listeiincepe pe un rand noua.


20/37

listex_2O lista neordonataGlosar de termeni de World Wide WebCulori uzuale disponibile prin numeBlack White Red Green Blue Yellow Purple Aquavezi acest exempluTag-urile si pot avea un atribut type care stabileste caracterulafisat in fata fiecarui element al listei. Valorile posibile al acestuiatribut sunt:

"circle" (cerc)"disc" (disc plin) (valoarea prestabilita);"square" (patrat)Listele neordonate pot fi imbricate pe mai multe niveluri

listex_3O lista neordonata de liste neordonateGlosar de termeni de World Wide WebElemente si atribute a unei pagini HTMLFrameset Atribute: cols rows border Frame Atribute: src name scrolling vezi acest exempluListe ordonateO lista ordonata de elemente este un bloc de text delimitat de etichetelecorespondente ... (" ol " vine de la " ordered list " = lista

ordonata). Fiecare element al listei este initiat de eticheta (listitem).Lista va fi indentata fata de restul paginii Web si fiecare element al listeiincepe pe un rand noua.

listex_4O lista ordonataCulori uzuale disponibile prin numeBlack White Red Green Blue Yellow Purple Aquavezi acest exempluTag-urile si pot avea un atribut type care stabileste tipul decaractere 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 - optiuneprestabilita );


21/37

Urmatorul exemplu este o lista ordonata cu cifre romane

listex_5O lista ordonata cu cifre romaneCulori uzuale disponibile prin numeBlack White Red Green Blue Yellow Purple Aquavezi acest exempluTag-ul poate avea un atribut start care stabileste valoarea initiala asecventei de ordonare.Valoarea acestui atribut trebuie sa fie un numar intregpozitiv.

Urmatorul exemplu este o lista ordonata cu litere mari, incepand de lavaloarea C.

listex_6

O lista ordonata cu litere mari, incepand de lavaloarea CCulori uzuale disponibile prin numeRed Green Blue Yellow Purple Aquavezi acest exempluTag-ul poate avea un atribut value care satileste valoare pentruelementul respectiv al listei. Valoarea acestui atribut trebuie sa fie unnumar intreg pozitiv (vezi urmatorul exemplu).

listex_7O lista ordonata avand itemi setatiindividualRepetati urmatorii pasi ai algoritmuluisalvati fisierul;incarcati fisierul in browser;schimbati browserul utilizatincarcati din nou fisierulvezi acest exempluListele ordonate pot fi imbricate intre ele sau cu liste neordonate, ca inexemplul urmator.

listex_8O lista ordonata de liste ordonate sineordonateUn sistem informatic include:

Hardware:

placa de baza


22/37

procesormemorieharddisk

Software:

LinuxWindowsOS/2Unix

Software de aplicatie:

VisualC++JavaSQLCorelDraw

vezi acest exempluO lista de meniuri este un bloc delimitat de etichete corespondente.... Fiecare element al listei este initiat de eticheta ( list item ). Cele mai multe browsere afiseaza lista de meniuri ca pe o listaneordonata.

O lista de directoare este un bloc delimitat de etichete corespondente... (de la " director "). Fiecare element al listei este initiat deeticheta ( list item ). Cele mai multe browsere afiseaza lista dedirectoare ca pe o lista neordonata.

(Nu se recomanda utilizarea acestori tipuri de liste).

Utilizari speciale ale listelorDaca intr-o lista, in loc de elementele acesteia introduse prin , seinsereaza un bloc de text, aceasta va fi indentat ( intocmai ca elementeleunei liste).

listex_9Un bloc de text indentat Un bloc de text indentat. Un bloc de text indentat. Un bloc de textindentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de textindentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de textindentat.vezi acest exempluIn exemplul urmator lista de definitii are itemii si multipli.

listex_10O lista de definitii specialaProgram


23/37

LuniMartiMiercuriOra 9.00.InsciereOra 11.00.AudieriOra 13.30.Raspunsurivezi acest exempluUltimul exemplu este o lista neordonata personalizata care utilizeaza pe postde elemente imagini si texte.

listex_11O lista personalizataTipuri de masini Volkswagen sunt:
Golf
Jetta
Passat

Bora
Corrado
Transporter
vezi acest

. TabeleTabelele ne permit sa cream o retea dreptunghiulara de domenii, fiecare

domeniu avand propriile optiuni pentru culoarea fondului, culoarea textului,alinierea textului etc.Pentru a insera un tabel se folosesc etichetele corespondente.... Un tabel este format din randuri. Pentru a insera un randintr-un tabel se folosesc etichetele ... ( de la " table row "= randde tabel ).Folosirea etichetei de sfarsit este optionala.Un rand este format din mai multe celule ce contin date.O celula de date se introduce cu eticheta ...

tabelex_1Un tabel simplu format din 4 linii si 2coloane

cell 11 cell 11 cell 21 cell 22 cell 31 cell 32 cell 41 cell 42vezi acest exempluIn mod prestabilit, un tabel nu are chenar. pentru a adauga un chenar unui


24/37

tabel, se utilizeaza un atribut al etichetei numit border.Acest atribut poate primi ca valoare orice numar intreg ( inclusiv 0 ) sireprezinta grosimea in pixeli a chenarului tabelului.Daca atributul border nu este urmata de o valoare atunci tabelul va avea ogrosime prestabilita egala cu 1 pixel, o valoare egala cu 0 a grosimiisemnifica absenta chenarului.Cand atributul border are o valoare nenula chenarul unui tabel are un aspecttridimensional.

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

vezi acest exempluAlinierea tabeluluiPentru a alinia un tabel intr-o pagina Web se utilizeaza atributul align aletichetei , cu urmatoarele valori posibile: " left " ( valoareaprestabilita ), " center " si "right ".Alinierea este importanta pentru textul ce inconjoara tabelul. Astfel :

daca tabelul este aliniat stanga ( ), atunci textul careurmeaza dupa punctul de inserare al tabelului va fi dispus in partea dreapta atabelului.daca tabelul este aliniat dreapta ( ), atunci textulcare urmeaza dupa punctul de inserare al tabelului va fi dispus in parteastanga a tabelului.

daca tabelul este aliniat pe centru ( ), atunci textulcare urmeaza dupa punctul de inserare al tabelului va fi afisat pe toatalatimea paginii, imediat sub tabel.tabelex_3Un tabel aliniat la dreapta Text inainte detabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel.Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Textinainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inaintede 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. Textinainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inaintede 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. Textinainte de tabel. cell 11 cell 11 cell 21 cell 22Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupatabel.Text dupa tabel. Text dupa tabel.Text dupa tabel.Text dupa tabel.Textdupa tabel.Text dupa tabel.Text dupa tabel. Text dupa tabel.Text dupatabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel. Text


25/37

dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupatabel.Text dupa tabel. Text dupa tabel.Text dupa tabel.Text dupa tabel.Textdupa tabel.Text dupa tabel.Text dupa tabel. Text dupa tabel.Text dupatabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.vezi acest exempluDaca schimbam alinierea tabelului la centru atunci exemplul anterior va arataasa sau la stanga atunci va arata asa.

Distanta dintre tabel si celelalte elemente din pagina Web poate fi stabilitacu ajutorul atributelor hspace si vspace al etichetei . Valoareaatributului hspace poate fi orice numar pozitiv, inclusiv 0, si reprezintadistanta pe orizontala dintre tabel si celelalte elemente ale paginii Web.Valoarea atributului vspace poate fi orice numar pozitiv, inclusiv 0, sireprezinta distanta pe verticala dintre tabel si celelalte elemente alepaginii Web.Aceste atribute functioneaza numai cu Netscape Communicator.Exemplul cu aceste atribute gasiti aici.

Definirea culorilor de fond pentru un tabelCuloarea de fond se stabileste cu ajutorul atributului bgcolor, care poate fiatasat intregului tabel prin eticheta , unei linii prin eticheta sau celule de date prin eticheta .Valorile pe care le poate primi bgcolor sunt cele cunoscute pentru o culoare.Daca in tabel sunt definite mai multe atribute bgcolor, atunci prioritateaeste urmatoarea: , , ( cu prioritate cea mai mica ).

tabelex_4Un tabel simplu colorat verde 11 rosu 11

albastru 21 galben22 cell 31 cell 32 cell 41 cell 42vezi acest exemplu

Culoarea textului din fiecare celula se pote stabili cu ajutorul expresiei:....

Dimensionarea celulei unui tabelDistanta dintre doua celule vecine se defineste cu ajutorul atributuluicellspacing al etichetei .Valorile acestui atribut pot fi numereintregi pozitive, inclusiv 0, si reprezinta distanta in pixeli dintre douacelule vecine.Valorea prestabilita a atributului cellspacing este 2.

tabelex_5Un tabel fara chenar de celule alipite


26/37

gri 11 rosu 12 albastru 21 galben22vezi acest exempluDistanta dintre marginea unei celule si continutul ei poate fi definita cuajutorul atributului cellpadding al etichetei .Valorile acestui atributpot fi numere intregi pozitive, si reprezinta distanta in pixeli dintre celulesi continutul ei.Valorea prestabilita a atributului cellpadding este 1.

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

vezi acest exempluDimensionarea unui tabelDimensiunile unui tabel - latimea si inaltimea - pot fi stabilite exact prinintermediul a doua atribute, width si height, ale etichetei .Valorile acestor atribute pot fi:

numere intregi pozitive reprezentand latimea respectiv inaltimea in pixeli atabelului;numere intregi intre 1 si 100, urmate de semnul %, reprezentand fractiunea dinlatimea si inaltimea totala a paginii.

tabelex_7Un tabel de de 200 pixeli X 50 % cell 11 cell 12 cell 21 cell 22vezi acest exempluIn exemplul urmator se utilizeaza un truc care permite afisarea intr-o paginaWeb a unui text pozitionat in centrul paginii.

tabelex_8Un text centrat intr-o pagina Text centrat.vezi acest exempluTitlul unui tabel


27/37

Unui tabel i se poate atasa un titlu cu ajutorul etichetei ( de la"table caption" = titlu tabel ).Aceasta eticheta trebuie plasata in interiorul etichetelor ...,dar nu in interiorul etichetelor sau Titlul unui tabel poate fialiniat cu ajutorul atributului align al etichetei care poate luauna dintre valorile:

" bottom " ( sub tabel );" top " ( deasupra tabelului );" left " ( la stanga tabelului );" right " ( la dreapta tabelului ).tabelex_9Un tabel cu titluMasiniMercedes Citroen Jaguar BMW Volvo Renault

vezi acest exempluCap de tabelUn tabel poate avea celule cu semnificatia de cap de tabel. Aceste celule suntintroduse de eticheta ( de la " tabel header " = cap de tabel ) in loc de.Toate atribute care pot fi atasate etichetei pot fi de asemenea atasateetichetei . Continutul celulelor definite cu este scris cu caracterealdine si centrat.

tabelex_10Un tabel cu titlu si cap de tabelPreturile masinii

PretCitroenJaguarBMWVolvoIn dolari50001000005000080000In lei20000002000000000200000016000000vezi acest exempluAlinierea continutului unei celuleAlinierea pe orizontala a continutului unei celule se face cu ajutorulatributului 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 continutului unei celule se face cu ajutorulatributului valign care poate lua valorile:

" baseline " ( la baza );


28/37

" bottom " ( jos );" middle " ( la mijloc, valoarea prestabilita );" top " ( sus ).Aceste atribute pot fi atasate atat etichetei pentru a defini tuturorelementelor celulelor unui rand, cat si etichetelor si pentru astabili alinierea textului intr-o singura celula.

tabelex_11Un tabel avand continutul celulelor aliniateAici aliniereaestecentrudreapta stangacentrusus josaicialinierea estecentrustanga (implicita)

vezi acest exempluDimensionarea exacta a celulelor unui tabelDimensiunea unei celule de tip sau de tip pot fi stabilite exact cuajutorul a doua atribute ale acestor etichete: width pentru latime si heightpentru inaltime.Valorile posibile ale acestor atribute sunt:

numere intregi pozitive ( inclusiv 0 ) reprezentand dimensiunea in pixeli alatimii, respectiv a inaltimii unei celule;procente din latimea , respectiv inaltimea tabelului.tabelex_12Un tabel cu celule de 100x150 de pixeli

cell 11 cell 11 cell 21 cell 22vezi acest exempluTabele de forme oarecareUn tabel trebuie privit ca o retea dreptunghiulara de celule.Cu ajutorul adoua atribute ale etichetelor si , o celula se poate extinde pestecelule vecine.Astfel:

extinderea unei celule peste celulele din dreapta ei se face cu ajutorulatributului colspan, a carui valoare determina numarul de celule care seunifica.extinderea unei celule peste celulele dedesubt se face cu ajutorul atributuluirowspan, a carui valoare determina numarul de celule care se unifica.Sunt posibile extinderi simultane ale unei celule pe orizontala si peverticala. In acest caz , in etichetele si vor fi prezente ambeleatribute colspan si rowspan.


29/37

tabelex_13Un tabel simplu cu chenar cell 11
cell 21
cell 31 cell12cell 13 ,cell 14
cell 23, cell24
cell 33, cell 34 cell 22 cell 32 cell 41 cell 42,cell 43,cell 44vezi acest exempluAtributul " nowrap "Atributul nowrap apartine elementelor si ; el interzice intrerupereaunei linii de text.Astfel , in tabel pot aparea coloane cu o latime oricat demare.

tabelex_14Un tabel cu celule de latime mare cell 11 cell 12 cell 21 cell 22 este foarte lata,aceasta celula estefoaret lata.vezi acest exempluCelule vide ale unui tabeldaca un tabel are celule vide, atunci aceste celule vor aparea in tabel faraun chenar de delimitare.

In scopul de a afisa un chenar pentru celule vide se utilizeaza urmatoareletrucuri:

dupa se pune ;dupa se pune
.

Caracterul ( no break space ) este de fapt caracterul spatiu.Un spatiuintrodus prin im\ntermediul acestui caracter nu va fi ignorat de browser.tabelex_15Un tabel cu celule vide cell 11 cell 12cell 13 vezi acest exempluAtribute Internet Explorer pentru tabeleUrmatoarele atribute ale etichetei functioneaza cu Internet Explorer4.0 , 5.0, dar nu cu Netscape Communicator 4.5:

background permite stabilirea unei imagini pentru fondul unui tabel.Primeste


30/37

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;tabelex_16Atribute "Internet Explorer" cell 11 cell 12cell 13 vezi acest exempluGrupuri de coloaneBlocul ... permite definirea unui grup de coloane.Atributele acceptate de 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:Intr-un bloc , coloanele pot avea configurari diferite daca seutilizeaza elementul , care admite atributele:

span identifica acea coloana din grup pentru care se face configurarea.Dacalipseste, atunci coloanele sunt configurate in ordine;width determina o latime pentru coloana identificata prin span;align determina o aliniere pentru coloana identificata prin span.tabelex_17

Grupuri de coloane Text in prima coloana.Text in prima coloana.Text in primacoloana. Text in prima coloana. Text in coloana doua.Textin coloana doua.Text in coloana doua.Text in coloana doua. Text in coloana a treia.Text in coloana a treia.Text in coloana atreia.Text in coloana a treia.vezi acest exempluAtributele frame si rulesAtributul frame al etichetei permite specificarea partilor dinchenarul unui tabel care vor fi afisate.Valorile posibile ale acestui atribut sunt:

void - elimina toate muchiile exterioare ale tabelului;above - afiseaza o muchie in partea superioara a cadrului tabelului;below - afiseaza o muchie in partea inferioara a cadrului tabelului;hsides - afiseaza cate o muchie in partea superioara si inferioara cadruluitabelului;


31/37

lhs - afiseaza o muchie in partea din stanga a cadrului tabelului;rhs - afiseaza o muchie in partea din dreapta a cadrului tabelului;vsides - afiseaza o muchie in partea din stanga si din dreapta a cadruluitabelului;box - afiseaza o muchie pe toate laturile cadrului tabelului;border - afiseaza o muchie pe toate laturile cadrului tabelului;

Atributul rules al etichetei permite alegerea unor delimitatori pentrucelulele unui tabel. Valorile posibile sunt:none - elimina toate muchiile interioare ale tabelului;groups - afiseaza muchii orizontale intre toate grupurile din tabel.Grupurilesunt specificate prin elementele , , si .rows - afiseaza muchii orizontale intre toate liniile tabelului;cols - afiseaza muchii verticale intre toate coloanele tabelului;all - afiseaza muchii intre toate liniile si coloanele;tabelex_18Atributele frames si rules cell 11 cell 12cell 13

cell 21 cell 22cell 23vezi acest exempluSubblocurile unui tabelIn specificatiile HTML 4.0, continutul unui tabel poate fi impartit insubblocuri prin elementele:

... ( un singur rand );... ( un singur rand );... ( oricate randuri );Intr-un tabel exista un singur subbloc de tipul si un singur subbloc

de tipul , dar pot exista mai multe subblocuri de tip .

Ferestre in HTMLFerestrele sau (cadrele) ne permit sa definim in fereastra browseruluisubferstre in care sa fie incarcate documente HTML diferite.Ferestrele sunt definite intr-un fisier HTML special , in care blocul... este inlocuit de blocul ....In interiorul acestui bloc, fiecare cadru este introdus prin eticheta .

Un atribut obligatoriu al etichetei este src, care primeste ca valoareadresa URL a documentului HTML care va fi incarcat in acel frame. Definireacadrelor se face prin impartirea ferstrelor (si a subferestrelor) in linii sicoloane:

impartirea unei ferstre intr-un numar de subferestre de tip coloana se face cuajutorul atributului cols al etichetei ce descrie acea fereastra;impartirae unei ferestre intr-un numar de subferestre de tip linie se face cuajutorul atributului rows al etichetei ce descrie acea fereastra;


32/37

valoare atributelor cols si rows este o lista de elmente separate prin virgula, care descriu modul in care se face impartirea.Elementele listei pot fi:un numar intreg de pixeli;procente din dimensiunea ferestrei (numar intre 1 si 99 terminat cu %);n* care inseamna n parti din spatiul ramas;Exemplu 1: cols=200,*,50%,* inseamna o impartire in 4 subferestre , dintrecare prima are 200 pixeli , a treia ocupa jumatate din spatiul totaldisponibil ,iar a doua si a patra ocupa in mod egal restul de spatiu ramasdisponibil.

Exemplu 2: cols=200,1*,50%,2* inseamna o impartire in 4 subferestre ,dintre care prima are 200 pixeli , a treia ocupa jumatate din spatiul totaldisponibil iar a doua si a patra ocupa in mod egal restul de spatiu ramasdisponibil, care se imparte in trei parti egale , a doua fereastra ocupand oparte , iar a patra ocupand 2 parti.

Observatii:-daca mai multe elemente din lista sun configurate cu * , atunci

spatiul disponibil ramas pentru ele se va imparti in mod egal.-o subfereastra poate fi un cadru (folosind )in care se va

incarca un document HTML sau poate fi impartita la randul ei la altesubfereste (folosind ).

ferex_1vezi acest exemplu

In exemplul urmator este creata o pagina Web cu trei cadre orizontale.Pentrual doilea cadru valoarea atributului src este adresa URL a unei imagini.

ferex_2vezi acest exemplu

In exemplul urmator este creata o matrice de 4 cadre (2 x 2).Pentru a realizaacest lucru, se folosesc simultan cele doua atribute cols si rows.

ferex_3


33/37

vezi acest exemplu

In exemplul urmator este creata o pagina Web cu trei cadre mixte.Pentru a ocrea se procedeaza din aproape in aproape. Mai intai, pagina este impartita indoua subferestre de tip coloana, dupa care a doua subfereastra este impartitain doua subferestre de tip linie.

ferex_4

vezi acest exemplu

Culori pentru chenarele cadrelor si dimensionarea chenarului unui cadruPentru a stabili culoarea chenarului unui cadru se utilizeaza atributulbordercolor. Acest atribut primeste ca valoare un nume de culoare sau oculoare definita in conformitate cu modelul de culoare RGB.Atributulbordercolor poate fi atasat atat etichetei pentru a stabiliculoarea tuturor chenarelor cadrelor incluse,cat si etichetei pentru a stabiliculoarea chenarului pentru un cadru individual.

Atributul border al etichetei permite configurarea latimiichenarelor tuturor cadrelor la un numar dorit de pixeli. Valoarea prestabilitaa atributului border este de 5 pixeli.O valoare de 0 pixeli va defini un cadru fara chenar.

ferex_5

vezi acest exempluPentru a obtine cadre fara chenar se utilizeaza border="0".In mod prestabilit, chenarul unui cadru este afisat si are aspecttridimensional.Afisarea chenarului unui cadru se poate dezactivata daca seutilizeaza atributul frameborder cu valoare "no".Acest atribut poate fi atasat atat etichetei (dezactivarea fiindvalabila pentru toate cadrele incluse) cat si etichetei (dezactivareafiind valabila numai pentru un singur cadru).


34/37

Valorile posibile ale atributului frameborder sunt:"yes" -echivalent cu 1;"no" -echivalent cu 0;

ferex_5_1

vezi acest exempluferex_5_2

vezi acest exemplu

Bare de defilareAtributul scrolling al etichetei este utilizat pentru a adauga unuicadru o bara de derulare care permite navigarea in interiorul documentuluiafisat in interiorul cadrului.Valorile posibile sunt:

"yes" - barele de derulare sunt adaugate intotdeauna;"no" - barele de derulare nu sunt utilizabile;"auto" - barele de derulare sunt vizibile atunci cand este necesarferex_6vezi acest exempluAtributul noresize al etichetei (fara nici o valoare suplimentara)daca este prezent, inhiba posibilitatea prestabilita a utilizatorului de aredimensiona cadrul cu ajutorul mouse-ului.

Pozitionarea documentului intr-un cadruAtributele marginheight si marginwidth ale etichetei permit stabilireadistantei in pixeli dintre continutul unui cadru si marginile verticale,respectiv orizontale ale cadrului.Valori posibile:


35/37

-numar de pixeli;-procent din latimea, respectiv din inaltimea cadrului;ferex_7vezi acest exemplu

Exista browsere care nu suporta cadre pentru aceasta se utilizeaza ininteriorul blocului eticheta .Daca programul de navigare stie sa interpreteze cadre, va ignora ce se gasestein aceasta portiune, iar daca nu, materialul cuprins in zona... va fi singurul care va fi inteles si afisat.De precizat este faptul ca intre ... se pot introduce

orice alte tag-uri HTML (inclusiv imagini, hiperlink-uri, tabele).

Cadre interneUn cadru intern este specificat prin intermediul blocului.... Un cadru intern se insereaza intr-o pagina Web in modasemanator cu o imagine sau in modul in care se specifica marcajul ,asa cum rezulta din urmatorul exemplu:

In acest caz, am specificat ca doresc o fereastra de cadru intern care are40%din inaltimea si 50% din latimea paginii curente.

Atributele aceptate de eticheta sunt in parte preluate de laetichetele si ,cum ar fi:src,border,frameborder,bordercolor,marginheight,marginwidth,scrolling,name,noresize;sau de la eticheta vspace,hspace,align,width,height;

ferex_8 Fisierul1
Fisierul2
Fisierul3
Home
Daca vedeti acest text inseamna ca browseruldumnevoastranu suporta cadre interne. Ar fi preferabil sa reveniti, folosindNetscape Navigator versiune 4.0 (/ulterioara) sau I.Explorer 4.0.(/ulterioara)Pagina fara cadre interne vezi acest exemplu


36/37

Tinte pentru legaturiIn mod prestabilit, la efectuarea unui clic pe o legatura noua pagina (catrecare indica legatura) o inlocuieste pe cea curenta in aceeasi fereastra(acelasi acdru). Acest comportament se poate schimba in doua moduri:

prin plasarea in blocul ... a unui element careprecizeaza,prin atributul target numele ferestrei (cadrului) in care se vorincarca toate paginile noi referite de legaturile din pagina curenta conformsintaxei:prin plasarea in eticheta a atributului target, care precizeaza numeleferestrei (cadrului) in care se va incarca pagina nou referita de legatura,conform sintaxei:...

Observatie:-daca este prezent atat un atribut target in cat si un atribut

target in , atunci cele precizate de atributul target din sunt

prioritare.

Numele unui cadru este stabilit prin atributul name al etichetei conform sintaxei:

In exemplul urmator este prezentata o pagina Web cu doua cadre.Toatelegaturile din cadrul 1 incarca paginile in cadrul 2.

ferex_9_frames

ferex_9_left Fisierul1
Fisierul2
Fisierul3

Fis1 intr-o fereastra noua

Fis1 in fereastra curenta

Home
vezi acest exempluValori pentru atributul targetAtributul target al etichetei accepta anumite valori predefinite de ovaloare deosebita pentru creatorii de pagini Web.aceste valori sunt:

"_self" (incarcarea noii pagini are loc in cadrul curent);"_blank" (incarcarea noii pagini are loc intr-o fereastra noua anonima);"_parent" (incarcarea noii pagini are loc in cadrul parinte al cadrului curentdaca acesta exista, altfel are loc in fereastra browserului curent);


37/37

"_top" (incarcarea noii pagini are loc in fereastra browserului ce continecadrul curent);

curs practic html

Documents