Lectia 5- Adaugarea imaginilor in HTML

In cursurile anterioare, am invatat sa folosim decat texte si culori in paginile web. 

Formatele imaginilor

Browserele recunosc, in cadrul unei pagini web, mai multe formate de imagine. Cele mai raspandite sunt cele care au una din extensiile: .jpg, .jpeg, .gif si .png. In continuare, vom vedea cateva caracteristici ale acestor imagini:

GIF(Graphics Interchange Format)
Formatul GIF poate reda doar un numar de 256 de culor, de aceea este folosit pentru imagini de dimensiuni mici: butoane, icon-uri sau animatii mici.
JPEG(Joint Photographic Expert Group)
Formatul JPEG nu mai este limitat la 256 de culori si de aceea este folosit pentru fotografii. Imaginile care apartin acestui format au extensia .JPEG sau .JPG.
 
PNG(Portable Network Graphics)
PNG este un format mai nou care a inlocuit treptat formatul GIF, avand o calitate superioara.
 
Adaugarea imaginilor in pagina web
Asa cum vedem pe majoritatea siteu-rilor, imaginile dau o nota aparte paginilor web. Pentru a introduce o imagine in cadrul unei pagini web, folosim tagul <img> insotit de atributul SRC (source/sursa) care indica adresa sau calea catre imaginea pe care vrei sa o folosesti. Forma acestui tag va fi:
<img src=”numeleimaginii.extensie”>
Atentie! Nu uita sa scri extensia imaginii pentru ca in lipsa ei, browser-ul nu va arata imaginea, nu o va recunoaste.
 

Atunci cand faci un site, este bine sa tii toate fisierele necesare acestuia in acelasi folder. Cand spun toate fisierele ma refer la pagini html, imagini, elemente, etc. Daca vei folosi in cadrul paginilor siteu-lui tau linia de cod de mai sus, imaginea va fi afisata doar daca pagina respectiva va fi in acelasi folder cu imaginea pe care vrei sa o folosesti. In caz contrar, imaginea nu va fi afisata.

Acum vom scrie codul unei pagini web care sa contina o imagine. Luam ca exemplu imaginea de mai jos pe care o salvam astfel:

  1. Creem pe descktop un folder cu numele „site”
  2. Click dreapta pe imagine
  3. Selectam „Open in new tap” sau „Deschideti link-ul intr-o noua fila”
  4. Click drapta pe imagine si selectam : Save image As: (sau „salveaza imaginea ca”
  5. Salveaza imaginea cu numele: invat-html.jpg in folder-ul creat la punctul 1.

 

Acum deschide notepad-ul si scrie urmatorul cod html:

<html>

<head><title>Invat HTML</head></title>

<body>

<center><b><h3>Invat Html pe www.marinelpadurice.ro</h3></b>

<img src=”invat-html.jpg”>

</body>

</html>

Acum salveaza pagina cu numele invathtml.html si ar trebui sa arate: exempluinvathtml.html

Daca site-ul tau avea multe fisiere, nu  este o solutie buna sa le tii pe toate in acelasi folder. In acest caz, este bine sa grupam fisierele de acelasi tip in subfoldere. Astfel in folderul Site, de exemplu, vom avea un subfolder Poze, in care vor fi salvate toate imaginile site-ului, un subfolder Pagini in care vor fi salvate toate paginile HTML si asa mai departe. Iata cum ar arata structura site-ului:

Pentru o functionare corecta vom utiliza una din liniile urmatoare prin care ii vom spune browser-ului ca imaginea sea afla in folderul Poze:

  • Daca pagina va fi salvata in subfolderul Pagini si imaginea va fi in subfolderul Poze:

<img src=”../Poze/invat-html.jpg”>

  • Daca pagina va fi salvata in folderul Site si imaginea va fi in subfolderul Poze:

<img src=”Poze/invat-html.jpg”>

Daca totul a mers perfect, acum in acelasi folder creem doua subfoldere Pagini si Poze. Salvam imaginea de mai jos cu in subfolderul POZE dand click dreapta pe ea si selectand salvare ca si o salvam cu numele euro2012.jpg.

Acum vom deschide notepad si vom scrie urmatorul cod html:

<html>

<head><title>Euro2012</title></head>

<body>
<Font color=”#0000FF” face=”times new roman”>

<Center><b>Istoria Campionatului European de Fotbal</b></center>
</font>
<br><img src=”../Poze/euro2012.jpg” border=”5″ align=”left”>

<font color=”#FF0000″ face=”arial”>

 

Prima editie a campionatului european de fotbal a avut loc in Franta in anul 1960, iar castigatoare a fost Rusia. Urmatorul turneu european a avut loc in anul 1964 in Spania, acolo unde s-a impus tara gazda. Patru ani mai tarziu, in 1968, in Italia, a fost randul acesteia sa castige trofeul. in 1972 organizatoare a fost Belgia, Republica Federala Germana impunandu-se. in 1976 a venit randul Cehoslovaciei sa castige campionatul european de fotbal, disputat in Iugoslavia. in 1980, Germania a fost castigatoare, in Italia, iar in 1984, editie gazduita de Franta, din nou s-a impus tara organizatoare. Editia din anul 1988 a avut loc in Germania si a fost castigata de Olanda. Dupa patru ani, Danemarca se impunea in Suedia, pentru ca dupa alti patru ani, in 1996, sa fie randul Germaniei sa isi adjudece trofeul, in Anglia. in anul 2000 Belgia si Olanda au organizat turneul final, iar castigatoare a fost Franta. in Portugalia, in 2004, a fost randul Greciei sa castige trofeul. La ultimul campionat european, disputat in 2008, in Austria si Elvetia, Spania a iesit campioana europeana.</font>

</body>

</html>

Salveaza pagina in subfolderul Pagini cu numele euro.html. Aceasta pagina ar trebui sa arate asa: euro.html
Daca vrei ca textul sa fie afisat la o anumita distanta de imagine, foloseste atributele HSPACE (spatiu pe orizontala) si VSPACE (spatiu pe verticala). Valorile acestor atribute trebuie sa fie numere intregi, care reprezinta de fapt distanta in pixeli dintre imagine si text. De exemplu inlocuieste, in codul de mai sus, linia:

<IMG SRC=”../Poze/euro2012.jpg” BORDER=5 ALIGN=”left”>

Cu urmatoarea linie:

<IMG SRC=”../Poze/euro2012.jpg” BORDER=5 ALIGN=”left” HSPACE=50 VSPACE=20>

Salveaza pagina cu numele euro2.html in folderul Pagini

Vezi diferenta

Foloseste diferite valori pentru HSPACE si VSPACE pana cand obtii rezultatele dorite.

Imagini ca fond al unei pagini web

Cu ajutorul atributului BACKGROUND al tag-ului <BODY> poti folosi o imagine ca fond al unei pagini web. Pentru a intelege mai bine, copiaza imaginile urmatoare in folder-ul Poze cu numele scrise sub fiecare (click dreapta pe imagine , iar apoi alege din meniul care apare optiunea Save Image As):

 

Acum in codul paginii imagini.html din folderul Pagini adauga tag-ului <BODY> atributul BACKGROUND dupa cum urmeaza:

<BODY BACKGROUND=”../Poze/background1.jpg”>

Salveaza pagina cu numele euro3.html

Iata rezultatul: exemplu

 

Leave a Reply

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *