Inserarea fotografiilor si imaginilor in html

Imaginile pot fi elementul pe care veti dori să-l introduceţi în paginile dvs. de web, altele decât text. Fie ca este o fotografie sau o imagine grafica, tag-ul HTML pentru a face acest lucru este la fel. Iată un exemplu de tag-ul Activ, cu atributele sale folosite cel mai des:

<img src=”imagini/pozamea.jpg” alt=”PozaMea” width=”160″ height=”120″ hspace=”10″ vspace=”10″ align=”left” border=”0″ />

Atributul SRC

Trebuie sa specificati calea imaginii pentru a fi afişată de atributul src. Acesta poate fi o adresa URL completă, cum ar fi

http://www.site-ul_meu.com/images/pozamea.jpg

sau o locaţie relativă la pagina de web care afişează imaginea.

Dacă pagina web este

http://www.site-ul_meu..com/pagina_mea.htm

atunci calea relativă a aceleiaşi imagini de la URL-ul complet este de

../images/pozamea.jpg 

Dacă pagina web este

http://www.site-ul_meu..com/folderul_meu/pagina_mea.htm

atunci calea pentru aceeaşi imagine relativ la pagină devine

../images/pozamea.jpg

unde “../” instruieÅŸte webserver-ul să meargă până unul nivel de folder de folderul_meu ÅŸi apoi în folderul images pentru a obtine imaginea.

Atributul ALT

Unele browsere oferă utilizatorilor preferinţa de oprire a incarcarii imaginilor, şi vizitatorii dvs. pot alege să faca asta. Dacă nu doriţi să pierdeţi transmiterea unui mesaj cheie blocat de o imagine de pe pagina dvs. de Web, utilizaţi atributul alt pentru a furniza textul care va fi afişat de către browser-ul vizitatorului fara a mai fi expusa imaginea.

Atributul Size

Browser-ul vizitatorului va afişa pagina de web mult mai rapid dacă se specifica dimensiunile imaginii prin atributele width si height. Puteţi specifica alte valori decât dimensiunea reală imaginea fiind astfel redimensionata. În mod normal nu ar trebui să faceti acest lucru. Extinderea nu îmbunătăţeste o imagine, şi reducerea dimensiunilor nu reduce si dimensiunea imaginii.

Atributul Align

Dacă doriţi ca textul să apara în jurul imaginii în loc de a aparea chiar înainte sau după, puteti seta acest atribut fie left or right (la stânga sau la dreapta). Introduceţi tag-ul img înaintea textului pe care ar trebui să il afisati în jurul imaginii. Dacă setaţi valoarea atributului la stânga (left), imaginea aparea pe stânga, cu textul pe dreapta sa. Odată ce textul atinge partea de jos a imaginii, aceasta va continua ca de obicei, pe întreaga lăţime a coloanei de text.

Dacă doriţi să rupă ambalaj text înainte de a ajunge la nivelul de jos a imaginii şi începe noul text sub ea, se introduce linia de pauză

<br clear=”all” /> 

unde doriţi să apară pauza.

Atributul Space

Foarte probabil ca nu doriţi ca imaginea aproape sa atinga textul care se încadrează în jurul ei. Puteţi adăuga cu uşurinţă spaţiu confortabil în jurul unei imagini prin stabilirea atributelor hspace si vspace.

Atributul Border

Dacă doriţi să adăugaţi un chenar negru în jurul unei imagini, include acest atribut şi setaţi-o la un număr de mai sus zero. Valoarea stabileşte grosimea de border. Puteţi lăsa acest atribut sau da o valoare zero pentru a elimina border (marginea). Cu toate acestea există o diferenţă între aceste două opţiuni. Dacă utilizaţi o imagine ca o etichetă hyperlink, lăsând atributul border va pune în continuare un contur albastru în jurul imaginii pentru a indica faptul că este o legătură. Setarea atributului la zero elimină marginea albastră.

Mai multe Sfaturi

Pentru a se asigura o rapida încărcare a paginilor web, primul lucru care trebuie facut este optimizarea imaginilor. Utilizaţi formatul JPEG pentru fotografii şi GIF pentru grafica. Nu trebuie să se facă mai mari decât este necesar.

AveÅ£i dreptul să “inchideti” o imagine folosind tag-uri ca <p> </p> pentru ca acestea să fie bine separate de textul de mai sus sau de mai jos.

Dacă pur şi simplu doriţi să adăugaţi o linie orizontală între blocuri de conţinut de a introduce o pauză de mai vizibilă, nu aveţi nevoie pentru a crea o imagine. Doar folosi această etichetă HTML:

<hr align=”center” width=”100%” size=”1″ noshade />

Aceasta adaugă o linie orizontala, de 1-pixel grosime, pe întreaga lăţime a coloanei de text, centrat ÅŸi fără umbrire. Dacă doriÅ£i lăţimea să fie de 100 pixeli, lăsa simbolul “%” . Linia va fi umbrită dacă aÅ£i lăsa si cuvântul noshade.