Jump to content

[HTML] - Imagini


B09
 Share

Recommended Posts

cq8ZySv.png

 

Acesta este al 10-lea tutorial din seria de aprofundare

[/font][/color]

 

 

 

[size=5][color=#3333ff][u][b][font=georgia, serif]Tutorial HTML - Imagini[/font][/b][/u][/color][/size]

[color=#ffffff][font=georgia,serif]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/>.[/font][/color]

 

 

[size=3]<img src="../img/image.jpg" />[/size]

 

[color=#ffffff][b][font=georgia,serif]Vizualizare[/font][/b][/color]

image.jpg

 

[size=5][color=#3333ff][u][b][font=georgia,serif]HTML - img src[/font][/b][/u][/color][/size]

[color=#ffffff][font=georgia,serif]"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.[/font][/color]

[b]Sursa Locala[/b] [b]Descriere[/b] 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

 

[i][color=#ffffff][font=georgia,serif]Se poate folosi deasemenea adresa completa a fotografie. De exemplu scr="http://www.tutoriale...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.c...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.[/font][/color][/i]

 

 

[size=5][color=#3333ff][u][b][font=georgia,serif]HTML - Atribute alternative pentru imagini[/font][/b][/u][/color][/size]

[color=#ffffff][font=georgia,serif]HTML - Atribute alternative pentru imaginiAtributul "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".[/font][/color]

 

[size=3]<img src="http://example.com/f...lder/image.jpg" alt="Imagine Albastra "/>[/size]

 

[color=#3333ff][size=5][u][b][font=georgia,serif]HTML - inaltimea si latimea unei imagini[/font][/b][/u][/size][/color]

[color=#FFFFFF][font=georgia, serif]Pentru a stabili inaltimea si latimea unei imagini sunt folosite atributele height si widith.[/font][/color]

[size=3]<img src="../img/image.jpg" alt="Imagine Albastra" width="100" height="50" />[/size]

 

 

[b] [font=georgia,serif][color=#ffffff] Vizualizare[/color][/font][/b]

image.jpg

 

 

[color=#3333ff][size=5][u][b][font=georgia,serif]HTML - Alinierea orizontala si verticala a unei imagini[/font][/b][/u][/size][/color]

 

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:

[size=3]<p>Acesta este primul paragraf ...</p>

<p>

<img src="../img/image.jpg" align="left">

Acesta este cel deal doilea paragraf...

</p>

<p>Acesta este cel de-al treilea paragraf...</p>[/size]

 

[b] [color=#ffffff][font=georgia,serif]Vizualizare[/font][/color][/b]

[size=3]Acesta este primul paragraf, este doar un exemplu pentru a putea intelege mai bine alinierea unei imagini.[/size]

[size=3]Acesta este cel deal doilea paragraf, Imaginea va fi afisata image.jpgalaturat in partea dreapta, acesta este cel deal doilea paragraf, Imaginea va fi afisata alaturat in partea dreapta, acesta este cel deal doilea paragraf, Imaginea va fi afisata alaturat in partea dreapta, acesta este cel deal doilea paragraf, Imaginea va fi afisata alaturat in partea dreapta,[/size]

[size=3]Acesta este cel de-al treilea paragraf si ultimul, el nu contine nimic dar l-am pus pentru ca "da bine".[/size]

 

[color=#3333ff][size=5][u][b][font=georgia,serif]HTML - Tumbnails[/font][/b][/u][/size][/color]

[color=#ffffff][font=georgia,serif]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.[/font][/color]

 

[size=3]<a href="../img/fereastra.jpg"> <img src="../img/tumb_fereastra.jpg"> </a>[/size]

 

[b] [color=#ffffff][font=georgia,serif]Vizualizare[/font][/color][/b]

fereastra.jpg

[right][sup][font=times new roman,times,serif][size=1][color=#808080]sursa[/color][/size][/font][/sup][/right]

Edited by Christian UGD
Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.