cursuri cursuri cursuri cursuri cursuri cursuri
cursuri
cursuri
cursuri
Cursuri    Tutoriale    Teste    Referate    Jocuri
 
 
cursuri Am uitat utilizatorul cursuri Am uitat parola
cursuri online Cursuri online
Cursuri online gratuite
cursuri online Tutoriale
Cum sa faci orice
cursuri online Teste online
Testeaza-ti cunostintele
cursuri online Revista
Aboneaza-te gratuit
cursuri online Referate
Descarca referate
cursuri online Jocuri
Jocuri educative
cursuri online Inregistreaza-te
Intra in comunitate
eCursuri » Cursuri online » Tehnologia informatiei » HTML pe intelesul tuturor » Lectia 5
Adaugarea imaginilor in paginile HTML
9022 afisari
Pana acum ai invatat cum sa folosesti decat texte si culori in cadrul paginilor web. In aceasta lectie vei invata despre imagini, care alese cu grija, vor da un plus design-ului paginilor tale.

Formatele imaginilor

Browserele recunosc, in cadrul paginilor web, mai multe formate ale imaginilor. Cele mai raspandite sunt cele care au una din terminatiile .jpg sau .jpeg, cele cu extensia .gif si cele care au extensia .png. Iata in continuare cateva caracteristici ale acestor formate de imagini:

GIF (Graphics Interchange Format)
Formatul GIF poate reda un numar de 256 de culori, de aceea este folosit pentru imaginile de dimensiuni mici: butoane, icon-uri, animatii mici.

Butoane:

buton1.gif
marime: 4,71 Kb
buton2.gif
marime: 5,3 Kb
buton3.gif
marime: 5,61 Kb


Icon-uri:

icon1.gif
marime: 1,98 kb
icon2.gif
marime: 1,98 kb
icon3.gif
marime: 1,9 kb
icon4.gif
marime: 1,88 kb
icon5.gif
marime: 2,04 kb


Animatii
cursuri
animatie.gif
marime: 9,27 Kb


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 .jpg sau .jpeg.

poza.jpg
marime: 26,6 Kb
poza.gif
marime: 49,0 Kb

Se observa ca in cazul fotografiilor, formatul jpg ofera o calitate mai buna a imaginii si ocupa un spatiu mult mai mic decat daca am fi salvat aceeasi imagine in formatul gif.

PNG (Portable Network Graphics)
PNG este un format mai nou care a inlocuit treptat formatul GIF in primul rand prin calitatea superioara. Hai sa vedem butoanele si iconurile prezentate la formatul GIF si in format PNG:

Butoane:

buton1.gif
marime: 10,0 Kb
buton2.gif
marime: 9,8 Kb
buton3.gif
marime: 8,05 Kb


Icon-uri:

icon1.png
marime: 2,88 kb
icon2.png
marime: 3,09 kb
icon3.png
marime: 3,44 kb
icon4.png
marime: 3,85 kb
icon5.png
marime: 3,42 kb

Daca te uiti cu atentie la butoanele si iconurile salvate in format GIF si apoi la cele salvate in format PNG, o sa observi ca, desi cele PNG au o marime superioara, sunt si din punct de vedere al calitatii mult peste imaginile GIF (la iconuri se observa cel mai bine, atunci cand trebuie sa folosim si transparenta - adica imaginea nu va avea fundal). Sigur ca ambele formate, atat GIF cat si PNG, pot fi prelucrate cu ajutorul programelor de editat imagini (ex: Adobe Photoshop) si putem obtine rezultatele satisfacatoare in ambele formate, dar in general formatul PNG este superior celui GIF.

Nu acelasi lucru putem sa spunem si cand vorbim despre fotografii sau imagini mai mari, acolo unde formatul JPG este cel mai indicat. Sa luam de exemplu imaginea folosita in exemplul de la formatul JPG si sa o salvam in format PNG (vom vedea ca are o marime mult mai mare decat cea in format JPG, de 4-5 ori mai mare, calitatea fiind aproximativ la fel:
cursuri
poza.png
marime: 123,0 Kb

Acum, dupa ce am analizat principalele formate ale imaginilor folosite in paginile web, putem sa concluzionam ca este bine pentru fotografii si imagini mari sa folosim formatul JPG sau JPEG, iar pentru butoane si iconuri sa folosim PNG (sau GIF, in functie de cum optimizam imaginile).

Adaugarea imaginilor in paginile web

Asa cum ai vazut, la majoritatea site-urilor, imaginile dau o nota aparte paginilor web. Pentru a folosi imagini si in cadrul paginilor tale web trebuie sa folosesti tag-ul <IMG> insotit de atributul SRC (source) care indica adresa sau calea catre imaginea pe care vrei sa o folosesti. Forma generala a acestui tag va fi:
<IMG SRC="numeleimaginii.extensie">

Atentie la extensie! Nu uita sa scrii si extensia imaginii pentru ca altfel imaginea nu va fi afisata de browser.

Este bine ca atunci cand vrei sa faci un site, sa tii toate fisierele (pagini HTML, imagini etc.) in cadrul aceluiasi folder. Daca vei folosi in codul HTML al paginilor site-ului 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.

Sa scriem codul unei pagini web care sa contina o imagine. Luam ca exemplu imaginea de mai jos pe care o salvam astfel:
  1. Click pe imagine
  2. Se va deschide un nou tab (pagina) cu imaginea
  3. Click dreapta pe imagine si alege din meniul care apare: Save Image As)
  4. Salveaza imaginea cu numele invat-html.jpg in acelasi folder cu pagina web pe care o vom face in continuare.
Acum sa vedem codul HTML:
<HTML>
<HEAD>
<TITLE>
Imagini</TITLE>
</HEAD>
<BODY>
<CENTER><B>
Ad&#259;ugarea imaginilor &#238;n paginile web</B>
<BR>
<IMG SRC="
invat-html.jpg">
</CENTER>
</BODY>
</HTML>

Salveaza pagina cu numele imagini.html

Sa vedem cum ar trebui sa arate pagina imagini.html: exemplu10.html

Daca site-ul tau va avea multe fisiere, nu mai este o solutie 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:
cursuri
Pentru o functionare corecta vom utiliza una din urmatoarele linii de cod prin care ii vom spune browser-ului ca imaginea se afla in folder-ul Poze:

Pentru a citi continuarea lectiei trebuie sa fii membru eCursuri.ro

Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
« Formatarea textului in HTML Crearea legaturilor in HTML »
42 comentarii
sergiu.negru 29 august 2011, 16:47 1
Salut... dar cum se adauga imaginile cu spatiu intre ele si cu denumirile sub ele ca in exemplele de pe site ca de exemplu cum au fost introduse toate imaginile background 1-5 si denumirile sub ele!
  -2    Raspunde
Lucian.Iordache 29 august 2011, 19:46 2
@sergiu.negru: Salut Sergiu, am folosit tabele (am pus imaginile pe un rand si denumirile pe alt rand). Vezi lectia 8 despre tabele.
  0    Raspunde
aditmro 02 septembrie 2011, 19:41 3
Salut
pana acum e totul ok si clar numai ca nu stiu de se delogheaza asa repede. Tot la 10 minute trebuie sa ma loghez. Sau o fi vreo problema cu calculatorul meu? merci mult.
  -1    Raspunde
DanielPancu 13 septembrie 2011, 15:26 4
cum pot sa pun pe site poze, ca am incercat si nu am reusit..
  -1    Raspunde
Lucian.Iordache 20 septembrie 2011, 11:50 5
@DanielPancu: Da-mi un exemplu. Cum ai facut? Ce cod ai folosit? Te-ai uitat pe exemplele din cadrul lectiei?
  -1    Raspunde
ciprian 26 septembrie 2011, 13:02 6
ce se intimpla la,,imagini ca fond a unei pagini web"inlocuiesc codul imagini la body cu ,,background"salvez si ,nici o schimbare
  -1    Raspunde
bogdan_16mw 22 aprilie 2012, 01:13 7
@ciprian: verifica daca ai pus calea ok
de exemplu:<body background="d:/HTML/imagini/background2.jpg">
  0    Raspunde
DanielPancu 07 octombrie 2011, 13:10 8
Vreau sa creez butoane, cum fac?
  -1    Raspunde
bogdan25a 07 octombrie 2011, 20:08 9
cum pot sa descarc un numar mai vechi al revistei ?
multumesc
  -1    Raspunde
Lucian.Iordache 15 octombrie 2011, 04:13 10
@bogdan25a: Salut, ai arhiva in pagina revistei
  0    Raspunde
DanielPancu 18 octombrie 2011, 13:48 11
Cum pot creea si eu diverse butoane???? Nu am primit niciun raspuns pana acum..
  0    Raspunde
vlad24 21 octombrie 2011, 16:45 12
AM facut exact la fel am scris ca linile de mai sus si am facut exact asa cum scrie (am verificat) si nu imi apare imaginea si mi s-a mai aintamplat asa la scris adica nu se schimba culoarea si nu se facea mai mare DC?
  -1    Raspunde
alinahodoroaba 25 octombrie 2011, 10:12 13
am copiat poza "invat-html.jpg" pe desktop, am scris programul, dar poza nu apare...apare o casuta cu x in ea...ce se intampla?
  -1    Raspunde
alinahodoroaba 25 octombrie 2011, 10:21 14
si nu inteleg, la sintaxa , ce reprezinta punctele? datele exacte privind locul unde se afla folderul poze? gen c/desktop/poze...?
  -1    Raspunde
alinahodoroaba 27 octombrie 2011, 09:33 15
nu mai am nevoie de raspuns... am inteles pana la urma!!!!
  0    Raspunde
ovidiub 27 octombrie 2011, 17:12 16
@alinahodoroaba cum ai reusit cu acele poze? si eu patesc la fel. unde se greseste ?
  -1    Raspunde
alinahodoroaba 29 octombrie 2011, 09:06 17
ovidiub, dupa ce am facut folderul site, cu cele 2 subfoldere etc, am scris in program exact unde se afla poza invat-html.jpg, adica c\documents and setting\... ca sa nu gresesc, am dat copy-paste. si a mers. fa si tu la fel si lasa un raspuns daca ai reusit! bafta!
  -1    Raspunde
ovidiub 31 octombrie 2011, 10:24 18
@alinahodoroaba am reusit. Am crezut nu ca trebuie pusa toata "calea" pentru a ajunge la poza. Aici gresisem. Multumesc mult, alina si http://www.ecursuri.ro
  0    Raspunde
Ilie@@ 10 noiembrie 2011, 21:47 19
liniile ce despart mapele trebuie scrise invers?
am incerc ca in exemplu si nu mia reusit dar apoi leam skimbat si totul a mers.
Oricum multumesc pentru lectii, sunt bune....
dar sustin ideiea ca ar fi bune niste "teme pe acasa" si + niste cursuri mai profunde....
  -1    Raspunde
hgabry 17 noiembrie 2011, 23:33 20
Buna seara! Am si eu o intrebare. Am incercat sa fac un site precum este in curs, dar nu imi iese asa cum este acolo. De ce oare???
  -1    Raspunde
onnyx 22 noiembrie 2011, 18:17 21
sal as vrea sa stiu si eu cum fac o poza in format html.
  -1    Raspunde
DanielPancu 13 decembrie 2011, 17:30 22
lucian frate, dar dece nu ne ajuti cu raspunsurile la intrebari? ajutane...
  -1    Raspunde
Lucian.Iordache 14 decembrie 2011, 00:09 23
@DanielPancu: Unul dintre motive este timpul (destul de putin) si alt motiv este faptul ca unele intrebari sunt foarte vagi, nu sunt explicite. Daca vrei, un al treilea motiv este si faptul ca mi-as dori sa discutati intre voi, gasiti o multime de informatii utile in curs, deci puteti gasi raspunsurile (de cele mai multe ori) si discutand intre voi, cei care invatati aici limbajul HTML. Tinem legatura.
  0    Raspunde
shadowbody 14 decembrie 2011, 18:29 24
am facut totul ca in tutorial dar nu imi apare fundalul, iar in loc de poza vad o casuta cu un pergament rupt ..De ce?
  -1    Raspunde
Lucian.Iordache 15 decembrie 2011, 09:59 25
@shadowbody: Nu am cum sa iti dau un raspuns, nestiind ce ai facut acolo. Mai da-mi cateva detalii sau verifica mai intai codul tau, este la fel ca in lectie? Daca da, ar trebui sa mearga fara probleme (ai grija ca poza sa fie salvata la tine, si calea catre ea sa fie corecta).
  -1    Raspunde
DanielPancu 14 decembrie 2011, 19:20 26
am inteles lucian mersi mult raspuns si imi cer mii de scuze, cum pot adauga mai multe imagini pe o pagina de net?? Sti cumva??
  -1    Raspunde
Lucian.Iordache 14 decembrie 2011, 20:16 27
@DanielPancu: Depinde de cum vrei sa fie afisate imaginile respective in pagina. De exemplu eu am pus imaginile din pagina aceasta (la butoane, unde sunt 3 imagini pe rand) folosind tabele. Am facut un tabel cu 3 coloane si am pus cate o imagine in fiecare dintre cele 3 celule ale fiecarui rand. La tabel am pus border=0.
  -1    Raspunde
DanielPancu 16 decembrie 2011, 21:21 28
eu vrea sa fie afisate normal cum este cea de sus de exemplu cu fetita, dar eu vreau sa le pun mai multe intr-o pagina de net dar am uitat ce cod-uri trebuie sa folosesc...
  -1    Raspunde
BKmarian 23 ianuarie 2012, 18:02 29
Multumesc mult pentru curs imi este foarte util :)!
  -1    Raspunde
tnick_24 06 februarie 2012, 16:39 30
multumim ptr rabdarea si promtitudinea cu care ne raspunzi la intrebari...
  -1    Raspunde
lucklucian 08 martie 2012, 23:07 31
multumim pentru tot
  -1    Raspunde
babanu 09 martie 2012, 11:44 32
este un curs excelent pt oricine e dispus sa il parcurga.
multumesc
  -1    Raspunde
cipriancm 13 martie 2012, 21:12 33
mie numi merge faza cu alt="sssssss"
  -1    Raspunde
KosMee 21 martie 2012, 12:04 34
mie nu-mi arata poza cand am pus-o in subfolder ,,,
<html>
<head><title>Imagini</title></head>
<body>
<Center>Adaugaea imaginilor in Siteul meu
<br>
<IMG SRC="poze/invat-html.jpg" border="5" alt="fetita care vb la telefon" />

</center>
</body>
</html>
acesta este codul sursa , mentionez ca am totul salvat pe partita D a HDD
  -1    Raspunde
bogdan_16mw 22 aprilie 2012, 01:14 35
@KosMee: trebuie sa pui "d:/poze/invat-html.jpg"
  -1    Raspunde
KosMee 21 martie 2012, 12:15 36
gata am rezolvat problema
  -1    Raspunde
dedeandreutsa 23 martie 2012, 11:54 37
cum pot sa adaug o imagine ca fond,dar sa nu apara de mai multe ori, ci doar marita , pe toata pagina, ca un background?
  0    Raspunde
Lucian.Iordache 28 martie 2012, 12:14 38
@dedeandreutsa: O solutie ar fi sa folosesti o imagine mai mare (un wallpaper de exemplu).
  -1    Raspunde
Damflo 05 aprilie 2012, 05:18 39
Am facut tot....dar imi apare mereu mesajul asta :"Some pictures have been blocked to help prevent the sender from identyfing your computer. Open this item to view the pictures." Probabil ca trebuie schmbat ceva....doar ca nu stiu ce ?!
  -1    Raspunde
Damflo 11 aprilie 2012, 17:05 40
Am rezolvat... :)
  -1    Raspunde
MIN 24 aprilie 2012, 23:04 41
Salut! asi dori sa stiu cum fac un cuvant sa fie buton ? cum il creez?
  0    Raspunde
lady_booss 01 mai 2012, 19:03 42
salut! cum pot sa pun o poza de ce dimensiune vreau eu ?
  -2    Raspunde
Adauga comentariu

Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro

Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
Publicitate
Cuprinsul cursului
1. Structura unui document HTML
2. Despre atribute HTML
3. Despre culori HTML
4. Formatarea textului in HTML
5. Adaugarea imaginilor in paginile HTML
6. Crearea legaturilor in HTML
7. Crearea listelor in HTML
8. Tabele in HTML
9. Folosirea cadrelor intr-o pagina web
10. Crearea formularelor folosind HTML
11. Realizarea unui site in HTML
Cursuri noi Top cursuri
Curs de legislatie rutiera

7 lectii online
Excel prin exemple

10 lectii online
Windows XP prin exemple

10 lectii online
Infiintarea unei firme

6 lectii online
Gramatica limbii engleze

27 lectii online
Introducere in e-Business

25 lectii online
Curs de Machiaj

13 lectii online
Curs de Fashion

17 lectii online
Curs de Barman

10 lectii online
HTML pe intelesul tuturor

11 lectii online
cursuri
Copyright © 2005-2011 - eCursuri.ro - toate drepturile rezervate - E-mail: contact@ecursuri.ro