Limbajul HTML Imagini si Link-uri

SEMINAR 3 HTML
IMAGINI Imaginile sunt stocate in fisiere in diverse formate grafice. Formate acceptat de browsere pentru fisierele-imagine sunt: - GIF (Graphics Interchange Format) cu extensia .gif; - !"G ( oint !hotographic "xperts Group) cu extensia .#peg sau .#pg; - $!% ($ !ix%ap) cu extensia .xmp; - $&% ($ &it%ap) cu extensia .xbm; - &%! (&it%ap) cu extensia .bmp (numai cu Internet "xplorer); - 'IFF ('agged Image File Format) cu extensia .tif sau .tiff; (ele mai raspandite formate sunt GIF ()biti pentru o culoare* +,- culori posibile) si !"G (+.biti pentru o culoare* /-000+/- de culori posibile). Adresa URL a unei imagini 123 (41niform 2esourse 3ocator4 5 identificator unic al resursei) este un standard folosit in identificarea unica a unei resurse in Internet. 'oate imaginile cu care vom lucra vor avea adresa 123 exprimata in functie de directorul ce contine documentul 6'%3 care face referire la imagine. Pentru a insera o imagine intr-o pagina HTML se utili7ea7a eticheta <img> (de la 4image45imagine). 8img src59 9 border5n height5n/ width5n+ align5left:right:center alt59 9; - Atributul SR este folosit pentru specificarea adresei (source - sursei) imaginii pe care dorim a o plasa pe pagina <eb ( E!: 8img src59c:=student=po7a.gif9; - va plasa pe pagina de <eb fi>ierul po"a#gi$ existent ?n folderul %&'student - Atributul ()R*ER permite stabilirea grosimii liniei ce va ?ncon#ura po7a ( E!: 8img src59c:=student=po7a.gif9 border 5 @; - linia ce va ?ncon#ura po7a va avea o grosime de aproximativ / mm) - Atributul +I*TH permite stabilirea unei dimensiuni a imaginii pe ori7ontalA (lungimea po7ei pe ori7ontalA) ( E!: 8img src59c:=student=po7a.gif9 width 5 /,B; po7a va avea o lungime pe ori7ontalA de aproximativ , cm) - Atributul HEIGHT permite stabilirea unei dimensiuni a imaginii pe verticalA (lungimea po7ei pe verticalA) ( E!: 8img src59c:=student=po7a.gif9 height 5 @BB; po7a va avea o lungime pe ori7ontalA de aproximativ /B cm) - Atributul ALIGN permite alinierea imaginii respective ?n cadrul paginii <eb ( E!: 8img src59c:=student=po7a.gif9 align 5 left; - po7a va fi aliniatA la stCnga) - Atributul ALT permite scrierea unui text care va apare numai atunci cCnd utili7atorul este po7iDionat cu mouse-ul pe imaginea respectivA ( E!: 8img src59c:=student=po7a.gif9 align 5 left alt 5 9!o7a aceasta este din secolul trecut9;) Eaca imaginea se afla in acelasi director cu fisierul 6'%3 care face referire la imagine* atunci adresa 123 a imaginii este formata numai din nume,e imaginii* inclusiv e!tensia. Eaca fisierul 6'%3 si fisierul imagine nu se gaesec in acelasi folder atunci trebuie preci7ata calea (adresa) unde se gaseste fisierul imagine.

17

Limbajul HTML Imagini si Link-uri "xemplu (situatia in care fisierul 6'%3 si fisierul FFishleft.gif9 se gasesc in acelasi folder): 8html; 8head; 8title; G pagina cu imagine8:title; 8:head; 8bodH; G pagina ce contine o imagine 8p; <img sr%-4.is/,e$t#gi$4> 'ext aferent imaginii. 8:bodH; 8:html; "xemplu (situatia in care fisierul 6'%3 si fisierul FFishleft.gif9 nu se gasesc in acelasi folder): 8html; 8head; 8title; G pagina cu imagine8:title; 8:head; 8bodH; G pagina ce contine o imagine 8p; <img sr%-4(:=Itudent=Grupa /$$=!o7e=Fishleft.gif4> 'ext aferent imaginii. 8:bodH; 8:html; /enaru, si dimensionarea unei imagini Eaca doriti sa adaugati un chenar in #urul imaginii* folositi atributul 0order al etichetei <img># Jalorile acestor atribute sunt numere intregi po7itive. G imagine are anumite dimensiuni pe ori7ontala si verticala* stabilite in momentul crearii ei. Eaca nu se cere altfel* aceste dimensiuni sunt respectate in momentul afisarii ei in pagina <eb. Eimensiuniile prestabilite ale unei imagini pot fi modificate prin intermediul atributelor 1idt/ si /eig/t. 8html; 8head; 8title; Imagine cu chenar si marit8:title; 8:head; 8bodH; G imagine cu chenar* de +BB pixeli $ /, K <img sr%-4..:..:images:teacher.gif4 0order-, 1idt/-@,B /eig/t-+,K; 'ext dupa imagine. 8:bodH;8:html; A,inierea unei imagini Llinierea unei imagini se poate face prin intermediul atributului a,ign care poate lua urmatoarele valori:
18

Limbajul HTML Imagini si Link-uri 4,e$t4 - aliniere la stanga; celelalte componente sunt dispuse pe partea dreapta; 4rig/t4 - aliniere la dreapta; celelalte componente sunt dispuse pe partea stanga; 4top4 - aliniere deasupra; partea de sus a imaginii se alinia7a cu partea de sus a textului ce precede imaginea; 4midd,e4 - aliniere la mi#loc; mi#locul imaginii se alinia7a cu linia de ba7a a textului ce precede imaginea. 40ottom4 - aliniere la ba7a; partea de #os a imaginii se alinia7a cu linia de ba7a a textului. 8html; 8head; 8title; Llinierea unei imagini8:title;8:head; 8bodH; Llinieri: 8br; !e verticala: <img sr%-4..:..:images:teacher.gif4 a,ign-top> 3a mi#loc: <img sr%-4..:..:images:teacher.gif9 a,ign-middle> os: <img sr%-4..:..:images:teacher.gif4 a,ign-4bottom4> 'ext dupa imagine. 8:bodH; 8:html; A,inierea te!tu,ui in 2uru, imaginii Ltributele /spa%e si 3spa%e preci7ea7a distanta in pixeli pe ori7ontala* respectiv pe verticala* dintre imagine si restul elementelor din pagina. Ltributul a,t admite ca valoare un text care va fi afisat in locul imaginii. 8html; 8head; 8title; Llinierea textului8:title;8:head; 8bodH; 8h.;Imagine aliniat la stanga incon#urata de text la distanta de @B de pixeli. 8:h.;8p; 'ext inainte de imagine. <img sr%-4..:..:images:teacher.gif4 a,ign-left /spa%e-@B 3spa%e-@B a,t-91niversitatea de Jest 'imisoara9> 'ext dupa imagine. 8:bodH;8:html; Imagini pentru $ondu, unei pagini G imagine poate fi utili7ata pentru a stabili fundalul unei pagini <eb. In acest scop se foloseste atributul 0a%4ground al etichetei <0od5>* avand ca valoare adresa 123 a imaginii. Imaginea se multiplica pe ori7ontala si pe verticala pana umple intregul ecran. 8html; 8head; 8title; !agina cu imagine de fond8:title; 8:head; 8bodH 0a%4ground-4..:..:images:teacher.gif4> /8br;+8br;@8br;.8br;,8br;-8br;08br;)8br; M8br; 8:bodH;
19

Limbajul HTML Imagini si Link-uri 8:html;

LIN6-uri 7LEGATURI8 3egaturile (linN-urile) repre7inta partea cea mai importanta a unei pagini <eb. "le transforma un text obisnuit in hipertext sau text cu hiperlegaturi* care premite trecerea rapida de la o informatie aflata pe un anumit server la alta informatie memorata pe un alt server aflat oriunde in lume. 3egaturile sunt 7one active intr-o pagina <eb* adica 7one de pe ecran sensibile la apasarea butonului stang al mouse-ului. /. Leg9tur9 ,o%a,9 : permite reali7area unei conexiuni cu un fi>ier existent pe calculatorul local G legatura catre o pagina aflata in acelasi director se formea7a cu a#utorul etichetei <a> (de la ;an%/or;-ancora). 8L href 5 Fa9;textul sau imaginea de legAturA 8:L; !entru a preci7a pagina indicata de legatura se utili7ea7a un atribut al etichetei 8a; numit /re$ (de la /Hpertext re$erence)* care ia ca valoare nume,e fisierului 6'%3 aflat in acelasi director. Oona activa care devine sensibila la apasarea butonului stang al mouse-ului este formata din textul cuprins intre etichetele <a>###<<a>. !re7enta etichtetei de sfarsit <<a> este obligatorie. Fisierul F3egPex/.html9: 8html; 8head; 8title; (omutarea intre doua pagini8:title; 8:head; 8bodH; 8h@;!agina / 8:h@; <a /re$-4legPex+.html4> 3inN catre pagina + <<a> 8:bodH; 8:html;

Fisierul F3egPex+.html9: 8html; 8head; 8title; (omutarea intre doua pagini8:title; 8:head; 8bodH; 8h@;!agina + 8:h@;
20

Limbajul HTML Imagini si Link-uri <a /re$-4legPex/.html4> 3inN catre pagina / <<a> 8:bodH; 8:html; ) ,egatura %atre o pagina a$,ata pe dis%u, ,o%a, intr-un a,t dire%tor Eaca pagina referita se afla pe acelasi disc local* dar intr-un alt director atunci pentru a preci7a po7itia ei in structura de directoare se poate folosi adresarea relativa. 8html; 8head; 8title; (omutarea intre doua pagini aflate pe acelasi disc local8:title; 8:head; 8bodH; 8h@;!agina @ 8:h@; <a /re$-4(:=Itudent=grupa/$$=exemple:listaP,.html4 > 3inN catre o pagina cu liste 8:a; 8:bodH; 8:html; +. Leg9tur9 e!tern9 : permite reali7area unei conexiuni cu exteriorul (un site* un e-mail) a8 ) ,egatura %atre un site din +e0& In exemplul urmator se utili7ea7a adresa 123 www.Hahoo.com care incarca pagina de start din site-ul firmei Qahoo. 8html; 8head; 8title; 3inN catre site-ul firmei Qahoo8:title; 8:head; 8bodH; 8h@;3inN catre site-ul firmei Qahoo 8:h@; <a /re$-4http:::www.Hahoo.com4> www.Hahoo.com <<a> 8:bodH; 8:html;

08 ) ,egatura %atre o adresa de e-mai,& permite transmiterea unei mesa# cAtre cAsuDa posta a unei anumite persoane (numele poate fi chiar text de legAturA). Intr-o pagina <eb se pot afla legaturi care permit lansarea in executie a aplicatiei de expediere a mesa#elor electronice. !entru aceasta se utili7ea7a in constructia adresei 123 serviciul Internet mai,to& urmat de o adresa e-mail valida.

21

Limbajul HTML Imagini si Link-uri !entru ca exemplul urmator sa functione7e trebuie ca: pe calculator sa fie instalat o aplicatie de expediere a mesa#elor electronice (GutlooN "xpress pe <indows* etc). Ldresa sa fie valida si calculatorul sa fie conectat la Internet. 8html; 8head; 8title; "xpediere de mesa#e electronice8:title; 8:head; 8bodH; 8h@;"xpediere de mesa#e electronice8:h@;8br; <a /re$-4mai,to&mihaiRHahoo.com4> %esa#e catre autorul paginii - %ihai 8:a; 8:bodH; 8:html; @. Leg9tur9 intern9 - permite reali7area unei legAturi ?n cadrul aceluia>i fi>ier (de exemplu de la cuprinsul unei cArDi ce cuprinde capitolele existente ?n cartea respectivA sA se reli7e7e o conexsiune cAtre conDinutul unui capitol) Intr-o pagina foarte lunga pot exista puncte de reper catre care se stabilesc legaturi. G ancora se defineste de asemenea prin eticheta <a># !entru a defini ancora se utili7ea7a atributul name care primeste ca valoare un nume atribuit ancorei (de exemplu 4ancora14). !entru a insera o legatura catre 4ancora/4 definita in aceeasi pagina se utili7ea7a eticheta 8a; avand atributul /re$ de valoare ;=ancora1;. !entru a introduce o legatura catre o ancora definita in alt document (alta pagina) aflat in acelasi director* atributul /re$ primeste o valoare de forma ;numePfisier.html=numePancora;. "xemplul /: 8html; 8head; 8title; Lncore definite in acelasi document si in alt doocument8:title; 8:head; 8bodH; 8h@;Lncore definite in acelasi document si in alt document 8:h@; <a /re$-4Sancora/4> 3inN catre ancora / 8:h@; <a /re$-4..:..:legaturi.htmlSancora+4> 3inN catre o ancora din alt document 8:a; 8br; /8br;+8br;@8br;.8br; ,8br;-8br;08br;)8br; M8br;/B8br;//8br;/+8br; /@8br;/.8br;/,8br;/-8br; /08br;/)8br;/M8br;+B8br; +/8br;++8br;+@8br;+.8br; <a name-4ancora/4>ancora / 8:bodH; 8:html; "xemplul +: Iuntem pe pagina / >i reali7Am cuprinsul.

22

Limbajul HTML Imagini si Link-uri 8L href5TS(ontinutul capitolului /9;(apitolul /8:a; 8L href5TS(ontinutul capitolului +9;(apitolul +8:a; 8L href5TS(ontinutul capitolului @9;(apitolul @8:a; 8L href5TS(ontinutul capitolului .9;(apitolul .8:a; 8L href5TS(ontinutul capitolului ,9;(apitolul ,8:a; EupA cum se observA (apitolul @ a fost trecut ca text de legAturA (ve7i sintaxa tag-ului 8L href 5 U. ;U..8:L;) pentru a putea executa clicN stCnga de mouse >i a ne trimite apoi la pagina /),(conform enunD exemplu). TS(ontinutul capitolului @9 este numele semnului de carte de la pagina /),. L>a am vrut sA numesc semnul de carte (puteam sA-i dau orice alt nume cu spaDii sau fArA spaDii* dar dacA are spaDii atunci acest nume de semn de carte trebuie pus ?ntre ghilimele) Eeplasare la pagina /), ?n cadrul cArDii respective. LceastA deplasare o reali7Am cu bara de defilare sau cu tasta !ageEown* deoarece acesta este locul ?n care vreau sA mA po7iDione7e cu mouse-ul dupA ce dau clicN pe textul de legAturA. 3a aceastA paginA vom crea un semn de carte cu numele TS(ontinutul capitolului @9 astfel: <A name - >= ontinutu, %apito,u,ui 3?> EupA ce am definit semnul de carte la pagina /), putem sA ne deplasAm de la pagina / la pagina /), cu doar un clicN de mouse pe textul de legAturA >i numai este nevoie de tasta !ageEown sau de bara de defilare. )0s: Fi>ierul 6'%3 trebuie sA aibA cel puDin /), de pagini. A,egerea %u,ori,or pentru ,egaturi In mod prestabilit se utili7ea7a trei culori pentru legaturi: - o culoare pentru legaturile ne3i"itate (nu s-a efectuat nici un clicN pe ele) - o culoare pentru legaturile 3i"itate (s-a efectuat cel putin un clicN pe ele) - o culoare pentru legaturile a%ti3e (deasupra carora se afla mouse-ul la un moment dat). Lceste atribute pot fi stabilite cu a#utorul a trei atribute ale etichetei 8bodH;: - ,in4 pentru legaturile nevi7itate; - 3,in4 pentru legaturile vi7itate; - a,in4 pentru legaturile active. Jalorile pe care le pot lua aceste atribute sunt culori definite prin nume sau conform standardului RG(. 8html; 8head; 8title; (ulori pentru lagaturi8:title; 8:head; 8bodH ,in4-;blue4 3,in4-4SLEE)"-4 a,in4-4red4; 8h@;Ietarea culorilor pentru linN-uri:8br;rosu pentru legaturi active* .... pentru legaturi vi7itate si albastru pentru legaturi nevi7itate 8:h@; 8a href5legPex/.html; 3inN catre pagina / 8br; 8a href5legPex+.html; 3inN catre pagina + 8br; 8a href5legPex//.html; 3inN catre pagina // 8:a; 8:bodH;
23

Limbajul HTML Imagini si Link-uri 8:html; Imagini $o,osite %a ,egaturi G legatura (linN) introduce in pagina <eb o "ona a%ti3a. "fectuand clicN cu butonul mouse-ului pe aceasta 7ona* in browser se va incarca o alta pagina. !entru a utili7a imaginea ;.is/,e$t#gi$; drept legatura catre pagina inde!#/tm, utili7am sintaxa: <a /re$ -4index.html4><img sr%- 4..:..:images:Fishleft.gif 4><<a> In mod prestabilit imaginea utili7ata pe post de 7ona activa este incon#urata de un chenar avand culoarea unei legaturi. Eaca stabilim pentru atributul 0order al etichetei 8img; valoarea B acest chenar dispare. 8html; 8head; 8title; Imagini folosite ca legaturi8:title; 8:head; 8bodH4;8h.;Imagini folosite ca legaturi8:h.; 'ext inainte de imagine.<a /re$-4index.html4><img sr%-4..:..:images:Fishleft.gif 4><<a> 'ext dupa imagine. 8:bodH; 8:html;

24