E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale HTML

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  HTML  /  Bazele HTML (10)

II. Utilizarea imaginilor

14.05.2008
II. Utilizarea imaginilor

Acest tutorial este destinat in special incepatorilor si iti va arata cum sa incluzi imagini in pagina ta HTML.

Total vizualizari: 5398 5398 afisari   |   Comentarii  0   |   Rating   |   (4 voturi)   |   Timp necesar: 10 min 10 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  E-learn.ro  
Autor:  E-learn.ro
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1
comenteaza printeaza

Acest tutorial este destinat in special incepatorilor si iti va arata cum sa incluzi imagini in pagina ta HTML.

Tag-ul IMG
Pentru a introduce imagini in pagina ta web, foloseste tag-ul img.

<img src="url">

unde "url" reprezinta calea catre imaginea ta, adica directorul in care se afla si numele acesteia.

Iata cateva exemple care te vor ajuta sa intelegi mai bine cum anume trebuie specificata calea pentru imaginea ta. Sa presupunem ca fisierul HTML in care vrei sa incluzi imaginea este denumit pagina.html, imaginea este poza.gif, si pe server sau local (pe disc) ai un director siteweb/.

Exemplul 1: Imaginea si pagina web se afla in acelasi director
Aceasta este cea mai simpla metoda de a include o imagine in pagina web. Directorul siteweb/ va contine:

siteweb/
   pagina.html
   poza.gif

In loc de "url", atributul src din tag-ul img va contine numele fisierului poza.gif:

<img src="poza.gif">

ceea ce inseamna ca browser-ul va cauta imaginea in acelasi director cu pagina HTML.

Exemplul 2: Imaginea se afla intr-un subdirector
Aceasta situatie este foarte des intalnita, deoarece permite gruparea imaginilor intr-un director (deseori numit imagini), ele fiind mai usor de manipulat.


siteweb/
   pagina.html
   imagini/
     poza.gif

Codul HTML pentru includerea imaginii poza.gif este:

<img src="imagini/poza.gif">

Cu alte cuvinte, in acest caz browser-ul va cauta poza.gif in subdirectorul imagini.

Exemplul 3: Imaginea se afla in alt director
Ce se intampla daca imaginea pe care vrem sa o includem in pagina web se afla intr-un director cu totul diferit? Aceasta situatie poate fi intalnita atunci cand avem un director destinat imaginilor (imagini) pe care paginile web aflate in subdirectoare il pot folosi.

siteweb/
   paginiweb/
     pagina.html
   imagini/
     poza.gif

In acest caz, codul HTML va fi:

<img src="../imagini/poza.gif">

Utilizarea atributelor width= si height=
Este recomandat ca in tag-ul img sa specifici dimensiunile imaginii respective. Astfel, layout-ul paginii web nu se va modifica la incarcarea imaginilor, iar utilizatorii pot alege sa vizualizeze pagina fara imagini, formatul ei ramanand acelasi.
Pentru a specifica latimea (width) si inaltimea (height) unei imagini, foloseste codul HTML:

<img src="url" width="x" height="y">

unde x, y sunt dimensiunile imaginii in pixeli.

Cum puteti afla latimea si inaltimea imaginii in pixeli?
Daca folosesti Netscape, deschide imaginea intr-o fereastra si dimensiunile vor aparea in "title bar".

Daca folosesti IE, deschide imaginea in browser, apoi da right-click pe imagine si selecteaza Properties. Vei vedea dimensiunile langa Dimensions in noua fereastra.

Poti schimba dimensiunea imaginii folosind editoare de imagini (Photoshop, Fireworks etc. - de obicei acestea au optiunea Image Size sau Resize Image).

Imaginile ca linkuri
Daca vrei ca imaginea ta sa fie folosita ca link sau buton, pe conturul ei va aparea un dreptunghi colorat. Acesta este optiunea de "border" a imaginii si este folosit pentru a arata ca imaginea respectiva este un link. Daca nu vrei ca acest dreptunghi sa apara in jurul imaginii, initializeaza atributul border cu valoarea 0:

<img src="cale" width="x" height="y" border="0">

Codul de mai sus are ca efect faptul ca imaginea nu va mai avea contur.

Greseli des intalnite
1. Gresirea caii catre imagine
Daca vezi simbolul "image not found" (o cruciulita rosie acolo unde ar trebui sa apara poza), cel mai probabil imaginea nu se afla in directorul specificat sau calea a fost scrisa gresit. Nu uita sa incluzi extensia fisierului (.gif sau .jpg) atunci cand specifici calea.

2. Nu exista imaginea
Asigurati-va ca ati copiat imaginea pe server, in directorul corect.

3. Scrierea cu majuscule in loc de litere mici (sau invers)
Majoritatea serverelor fac diferenta intre majuscule si litere mici, deci daca in atributul src vei scrie poza.jpg , iar imaginea ta se numeste poza.JPG, ea nu va fi incarcata.

Pagina:
1
comenteaza printeaza
Alte tutoriale HTML:
Noteaza acest tutorial
Rating tutorial
 
(4 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4925
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4865
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4735
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4685
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4500
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Illustrator Swift 3D XML XHTML COREL DRAW PSD Verilog Ruby on Rails Lightroom Word HTML StyleSheet Gimp Flash RoR CSS Fotografie Vista SWF Bridge AJAX Photoshop Excel Fireworks MySQL SEO Action Script Python Outlook Javascript Sony Vegas Java PHP Powerpoint JSON Dreamweaver
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software