4: Imagini in html – Atributuri img – Tutoriale html

Inserarea imaginilor este foarte usoara in html, tot ce trebuie facut este o specificare de cale catre imagine. Calea catre imagine poate sa fie directa sau relativa. Putem prelua imagini din direct orul unde este stocat fisierul html, sau putem specifica o cale, un URL catre o imagine de pe un alt server. Haideti sa vedem care este tagul folosit pentru a insera o imagine.

Imagine in html cu o cale directa, URL

<img src="http://it.webdesign-galaxy.ro/host/tutoriale.jpg" />

Rezulta in:
tutoriale htmlDupa cum vedeti, am folosit tagul img dupa care am specificat sursa, calea catre imagine, adica src=”domeniu/director/numele- imaginii” . In acest exemplu, calea imaginii a fost: http://it.webdesign-galaxy.ro/, directorul “host”, si numele imaginii, adica tutoriale.jpg!

Imagine in html cu o cale relativa

Daca avem un fisier html intr-un alt director incat in care se afla imaginea, si nu vrem sa specificam un domeniu, pentru ca lucram pe propriul calculator sa zicem, atunci putem folosi o cale relativa. Ce inseamna o cale relativa ? Sa presupunem, ca am creat un fisier html, cu numele index.html, si acest fisier se afla in directorul “pagini”, iar in directorul “pagini” mai avem inca un director care se numeste “imagini”, unde tinem pozele.
Deci, avem aceasta structura pe calculator:

pagini/index.html
pagini/imagini/tutoriale.jpg

In acest caz, ca sa includem o imagine in fisierul index.html, va trebui sa specificam sursa imaginii cam asa:

<img src=”imagini/tutoriale.jpg” />

O alta situatie pentru o cale relativa

Sa presupunem ca avem aceasta structura:

pagini/personal/index.html
pagini/tutoriale.jpg

<img src=”../tutoriale.jpg” />

Ce s-a intamplat aici? – Fisierul index.html se afla in directorul pagini/personal/, iar imaginea se afla in directorul pagini/, avand in vedere ca imaginea sa nu fie cautata in directorul actual, care este pagini/personal, pentru ca nu acolo se afla, am folosit doua puncte si un slash, ca sa mearga cautarea in directorul parinte. Pentru directorul “personal”, directorul parinte este “pagini”.

../ – este folosit pentru a merge un director inapoi cand specificam o cale catre o imagine, sau orice fisier.

Redimensionarea imaginilor in html – Afisare redimensionata

Redimensionarea imaginilor in html se face cu atributele height si width, adica inaltime si latime. Putem sa specificam doar unul dintre acesti parametri, si browserul va afisa imaginea redimensionat proportional. Cu toate ca se poate folosi redimensionarea, sau afisarea imaginilor doar cu un singur parametru (height sau width), este recomandat sa specificam ambii parametrii, pentru ca astfel imaginea se va incarca un pic mai repede.
Cod:

<img src="http://it.webdesign-galaxy.ro/host/tutoriale.jpg" width="300" height="112" />

Rezulta in:

tutoriale

Atributul “alt” in cadrul tagului img

Atributul alt este folosit pentru a da un text alternativ motoarelor de cautare, pentru ca robotii de la google nu pot vedea o imagine ca si un om, tocmai din aceasta cauza designerul poate sa dea un text alternativ, o descriere text a imaginii. Acest tag este folosit in mod principal pentru optimizarea paginilor si a imaginilor (pentru SEO), si nu este vizibil pentru vizitator.

2 Comentarii

  1. aaa a scris la: 10 August 2012 at 16:34

    cum pun o imagine pe host sa trimit link ?

    Reply

  2. istvan a scris la: 13 August 2012 at 11:44 istvan

    imaginea ca sa devina link, trebuie incadrata in cadrul tagului
    a
    aici sunt exemple pentru crearea linkurilor in html.

    http://it.webdesign-galaxy.ro/cod-html-link/

    Fisierele se uplodeaza cu ajutorul FTP-ului, (File Transfer Protocol)

    Reply

Lasă un răspuns

(*)


*