Tutorial HTML - Imagini
Imaginile sunt foarte importante intr-o pagina web. De aceea este recomandat sa le folosesti in mod corect. Inserarea lor se face cu ajutorul tag-ului <img/>.
|
<img src="../img/image.jpg" /> |
Vizualizare
 |
HTML - img src
"src" este prescurtarea pentru "source" (sursa). Acest atribut se foloseste pentru a indica locatia fotografiei. Dupa cum am explicat in capitolul destinat linkurilor se poate folosi orice tip de URL pentru a indica adresa fisierului.
| Sursa Locala | Descriere |
| src="image.jpg" | fotografia este situata pe acelasi nivel cu fisierul .html |
| src="../image.jpg" | fotografia este situata pe un nivel anterior fisierului .html. |
| src="../img/image.jpg" | fotografia este situata in folderul "img" pe nivelui anterior fisierului .html |
Se poate folosi deasemenea adresa completa a fotografie. De exemplu scr="http://www.tutorialehtml.com/img/image.jpg". Acest model de URL nu este recomandat deoarece la schimbarea domeniului va trebui sa schimbi deasemenea si adresele tuturor fotografiilor. Sau in cazul in care imaginea este stocata pe un alt domeniu scr="http://www.domeniu.com/image.jpg".
Faptul de a stoca imaginea pe un domeniu alternativ, prezinta un mare avantaj in cazul in care dispui de un spatiu limitat pe domeniul pe care este stocat fisierul .html.
HTML - Atribute alternative pentru imagini
Atributul "alt" este folosit pentru a afisa un text in locul imagini, in cazul in care browser-ul pentru un oarecare motiv nu poate afisa imaginea sau in cazul in care un user are deselectata functia "ShowImage".
|
<img src="http://example.com/folder/image.jpg" alt="Imagine Albastra "/> |
Vizualizare
 |
HTML - inaltimea si latimea unei imagini
Pentru a stabili inaltimea si latimea unei imagini sunt folosite atributele height si widith.
|
<img src="../img/image.jpg" alt="Imagine Albastra" width="100" height="50" /> |
Vizualizare
|
HTML - Alinierea orizontala si verticala a unei imagini
In acest sens, sunt folosite atributele align si valign. Obtiunile oferite de aceste atribute sunt:
1. Align (orizontal)
- right
- left
- center
2.Valigh (vertical)
- top
- bottom
- center
Am atasat alaturat si un exemplu:
|
<p>Acesta este primul paragraf ...</p> |
Vizualizare
|
Acesta este primul paragraf, este doar un exemplu pentru a putea intelege mai bine alinierea unei imagini. Acesta este cel deal doilea paragraf, Imaginea va fi afisata Acesta este cel de-al treilea paragraf si ultimul, el nu contine nimic dar l-am pus pentru ca "da bine". |
HTML - Folosirea imaginilor ca link
Aceasta este doar o introducere, vom trata acest subiect mai pe larg intr-un tutorial urmator. Imaginile sunt foarte utile pentru link-uri si se pot forma cu ajutorul codului urmator:
|
<a href="http://www.tutorialehtml.com"> <img src="../img/image.jpg"> </a> |
Vizualizare
| |
Imaginea de mai sus te va trimite la pagina de start. O poti schimba cu pagina ta de start si vei obtine o imagine cu cu un link catre pagina ta de start.
HTML - Tumbnails
Tumbnails-urile sunt versinui in miniatura (mult mai putini kilobytes) a unor imagini care in realitate sunt mult mai mari si cu o calitate sporita. Pentru a realiza un tumbnail, salveza imaginea intr-o calitate mult mai scazuta cu dimensiuni reduse. Fa apoi aceasa imagine un link ce va conduce la imaginea initiala de de dimensiuni sporite.
|
<a href="../img/fereastra.jpg"> <img src="../img/tumb_fereastra.jpg"> </a> |
Vizualizare
 |
Comentarii
Am si eu o problema...cand incerc sa pun o imagine...scriu codul cu adresa imaginii...tot..si nu imi apare imaginea...aparea ceva mic..care arata o foaie rupta pe jumatate..:-??
Daca imi dai ceva mai multe detalii poate te pot ajuta. Cum ai formulat codul html pentru imagine? Unde ai imaginea stocata(pe acelasi nivel nivel anterior, etc)?
ok ok .. am inserat imaginea.. dar acum problema e ca nu o vede browserul (inclin sa cred ca am deselectata functia "SHOWIMAGE" desi nu prea shtiu ce presupune..) poate ma poti ajuta. ms
incearca sa dai mai multe detalii cum anume ai inserat imaginea
Am incercat sa pun o imagine ca in acest tutorial si nu imi merge....daca stie cineva sa ma ajute si pe mine....astept mesaj pe mailul meu....multumesc
daca nu te descurci sa pui locatia corecta a imagini pe server, pune url-ul complet de exemplu: src="http://www.exemplu.com/imagini/imagine.jpg"
bafta
pai inseamna ca ori nu ai scris corect adresa imaginii....ori nu ai pus imaginea in folderu unde ai si pagina//:P:P....imaginea trebuie sa fie in folderul curent...
dar cum pot pune o imagine in josul sau centrul paginii?ca am incercat si nu mi'a reusit:(
cum pun o img pe centrul pagini?
daca vrei sa pui o imagine in centrul paginii se pare ca nu merge cu align,atunci incearca cu hspace si vspace....de exemplu hspace="150" si vspace="150"...asa ii spui browser-ului ca vrei sa lasi spatiu intre marginea paginii si poza...daca nu ai inteles zi-mi si iti mai explic o data...bafta
imaginea pe centru paginii o poti pune daca folosesti atributele topmargin si leftmargin cu diferite valori ex: <body leftmargin="300" topmargin="100"> bafta
frate deci eu am reusit sa pun imagine .. dar problema e ca se vede numa in INTERNET EXPLORER .. in mozzila nu merge daca stie careva .. cum sal fac sa vad si in mozzila .. multumesc !
Tagul <img> este acceptat de toate browserele daca imi postezi aici codul HTML pe care l-ai folosit pentru a insera imaginea iti pot da o solutie.
<img src="E:/img/image.jpg"/> acesta e codul care l-am folosit :D
Voi incerca sa fiu cat mai clar. Problema ta este una destul de intalnita la inceput. Trebuie sa Intelegi cum se stabileste calea catre un fisier in cazul tau o imagine.
Sa zicem ca avem intr-un folder (root) doua fisiere si anume index.html si imagine.jpg
Pentru a afisa imagine.jpg in index.html o vom afisa asa:
- <img src="imagine.jpg" />
Daca in acelasi foler avem index.html si un folder "img" unde vom stoca imagine.jpg, adresa va fi:
- <img src="img/imagine.jpg" />
Daca se da cazul invers si anume imagine.jpg se afla pe "root" si inex.html in folderul "img", vom adresa imagine in index.html asa:
- <img src="../imagine.jpg" />
O metoda neortooxa este calea absoluta pe root (imi cer scuze daca am inventat numele, cine o foloseste va sti la ce ma refer)
- <img src="/imagine.jpg" />
Merge in orice browser da nu intotdeauna local daca folosesti xamp si nu toate hosturile o acepta.
Si in sfarsit ultima optiune pe care nu o recomand dar destul de intalnita este url-ul absolut al imaginii.
- <img src="http://www.domeniu.com/img/imagine.jpg" />
In acest fel se poate adresa de pe orice alt site si inclusiv local.
In concluzie calea catre image.jpg stabilita de tine ca fiind "E:/img/image.jpg" nu va functiona niciodata pe un server. "E:" fiind tradus ca si "Local Disc E" care este o partitie a hardului tau. Sper ca m-am facut inteles.
Bafta in continuare
salut
as vrea si eu sa stiu cum pot face ca o imagine sa nu fie fixa pe pagina ci sa urce sau sa coboare in functie de miscarea paginii dar fara a-si schimba pozitia pe pagina(ex imaginea este pozitionata in dreapta jos a paginii la prima afisare si daca se da scoll down sau up ea sa ramana in dreapta jos dar inca sa fie vizibila)
salut
iti scriu din nou pt ca prima data cred ca mi-a dat eroare.
as vrea si eu sa pun o poza pe site dar sa nu fie statica adica as vrea ca pe masura ce dau scroll in sus sau in jos poza sa ramana la locul ei( sa se miste in sens invers imaginii si nu sa dispara daca pagina este mai mare decat ecranul)
sper ca am fost coerent.astept raspuns
mersi
Salut octavian, cer scuze pt intarziere. In fine ceea ce vrei tu sa faci si anume o imagine fixa in pagina se poate face cu ajutorul css-ului.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.imagine_fixa
{
position:fixed;
top:500px;
right:5px;
}
</style>
</head>
<p>Intenet Explorer suporta acest atribut doar daca specificam un doctype inainte de html</p>
<img class="imagine_fixa" src="imagine.jpg" />
<body>
</body>
<html>
Sper sa fie ceea ce vrei tu sa obtii. Stiu ca se poate realiza ceva similar si cu javascript, dar nu te pot ajuta in acest sens.
salutari.
eu sunt incepator!!!
VA ROG FRUMOS sa ma ajute cineva pt ca nu reusesc sa pun o imagine...
si nu prea inteleg exemplele de mai sus (<img src="http://example.com/folder/image.jpg">).
va rog sa scrieti cat mai detaliat;am citit comentariile de mai sus si am realizat ca am aceeasi problema pe care a avuto si MITIX pt ca el a incurcat codul si la fel si eu.
VA ROG daca ma puteti face sa inteleg si eu :D
VA ROG RASPUNS:D
@Krysty
Cred ca am fost destul de clar in acest sens, dar mai incerc odata
<img src="http://example.com/folder/image.jpg">
- "img" este tagul care spune browser-ului ca trebuie sa afiseze o imagine
- "src" stabileste sursa imaginii
- "http://example.com/" este adresa sau domeniul unde se afla imaginea
- "folder/" este folderul aflat pe server unde se afla imaginea (pot fi mai multe foldere sau pur si simplu niciunul)
- "image.jpg" este numele generic dat imaginii care o vom afisa cu ajutorul tag-ului img.
Ex:
- avem imaginea portret.jpg pe care vrem sa o afisam.
- imaginea este situata pe "root" (nume folosit pentru radacina sitului) pe domeniul tutorialehtml.com
iata constructia: <img src="http://tutorialehtml.com/portret.jpg" />
Sa zicem ca aceasi imagine este in folderul "imagini" aflat pe "root".
iata constructia: <img src="http://tutorialehtml.com/imagini/portret.jpg" />
Celelalte metode a forma adresa catre imagine le gasesti in raspunsul la intrebarea lui @mitix
scuze ca nu tiam dat un raspuns pt ca am tot incercat si acuma am reusi iti multumesc pt ajutor si pt explicatii;si daca nu te superi o sa mai apelez la tine pe parcurs daca nu inteleg ceva;MULTUMESC
am si io o problema :( deci pun backroundu si incerc sa pun si o alta imagine pe el da o pune sub el dc?astept reply.Multumesc
Salut Catalin, am si eu o intrebare: cum poti sa modifici dimensiunile unei imagini in interiorul tagului?
@roby
fooseste divuri cu clase diferite. atributul z-index o sa iti fie un prieten bun
@Danny
Folosind CSS:
<img src="img,gif" width="20px" height="20px" />
Folosind CSS
<img src="img,gif" style="width:20px; height:20px;" />
Personal prefer css pentru personalizarea tag-urilor HTML
ok, deci acum ti-am descoperit blogul si acum ma apuc de citit. Mii de multumiri !
Buna,
am o mare rugamite.
Am pus cateva butoane in stanga, iar cand vreau sa adaug o imagine in dreapta o afiseaza decalata si intre butoane apare o pauza mare.
Unde am gresit, va rog?
<a href=bluze.html><img src="../Desktop/design/1247347485017715857.jpg" alt="" width="100" height="100" hspace="500" vspace="0" border="1" />
<a href=bluze.html><img src="../Desktop/design/bluze.jpg" width="99" height="39" hspace="60" vspace="2" border="0" /></a>
<br />
@dana
nu imi dau seama prea mult unde este problema fara sa vad tot codul paginii in ansamblu.
In orice caz iti recomand sa folosesti liste personalizate cu css pentru butoane si divuri pentru a pozitiona imaginile tutorialul css despre bari de navigare si cel despre pozitionare cre ca iti vor raspunde la intrebare.
Buna...am 3 zile de cand m-am apucat de invatat HTML si m-am blocat la partea cu inserarea imaginilor.
Vreau sa pun o poza din fisierele mele...am incercat toate combinatiile de mai sus si nu am reusit.
Dupa ex dat <img src="imagine.jpg" /> eu am inlocuit <img src="cosmic.jpg"/>, cosmic fiind numele pozei mele...cu ce am gresit?
Multumesc frumos.
@oana
cred ca am dezbatut acest subiect exagerat de mult...Am incercat sa fiu cat se poate e clar.
Problema afisarii unei imagini dupa modelul <img src="imagine.jpg" /> poate avea trei cauze:
- numele, incorect.
- extensia imagini, incorecta.
- adresa catre imagine, incorecta.
Dupa cum ai afisat codul html folosit, imaginea ta se afla in acelasi director cu fisierul tau html, se numeste "cosmic" si are extensia ".jpg". Te rog verifica acest lucru.
Succes
salut catalin.
stiu ca ai dezbatut acest subiect, dar iti spun sincer, ca pana acum 1 zi totul mia mes perfect cu inserarea imaginilor, dar acum am verificat de 10 ori numele, extensia, adresa si nu imi arata imaginea numai alt=".." am verificat si in options daca am bifat show images, si pe celelalte pagini cum ar fi contact.html imi arata imaginile dar pe index.html nu vrea sa imi arata nici .jpg nici .png poti sa ma ajuti ?:D
vb in particular
Trimite un comentariu!
