U2 PDF

UNITATEA DE ÎNVĂȚARE NR.
2
Inserarea de imagini în paginile WWW
Cuprins:
2.1 INTRODUCERE ......................................................................................... 29

2.2 AMPLASAREA IMAGINILOR ÎNTR-O PAGINĂ WEB ...................... 29
2.3 ALINIEREA IMAGINILOR ...................................................................... 31
2.4 DIMENSIUNILE UNEI IMAGINI ............................................................ 34
2.5 APLICAȚII .................................................................................................. 36
Obiective
Însuşirea noţiunilor generale despre inserarea imaginilor în pagini web.
Înțelegerea modalităților de amplasare și aliniere a imaginilor într-o
pagină web.
Utilizarea diferitelor formate de imagini și redimensionarea acestora.
Timp alocat:1 oră
2.1 Introducere
În crearea unei pagini de web profesionale, sunt relevante atât informaţiile ce vor fi
afişate, cât şi modul în care acestea sunt prezentate. Pentru ca o pagină de web să
fie atractivă se folosesc diferite imagini pentru fundal, butoane de navigare, etc.
Deşi au o importanţă mare, imaginile conţinute în paginile de web
constituie o problemă din cauza timpului mare necesar încărcării lor în timpul
navigării pe Internet. Majoritatea browserelor conţin o opţiune de tipul Show
Picture (arată imaginea). Prin deselectarea acestei opţiuni, browserul va fi informat
că nu se doreşte încărcarea automată a imaginilor în acelaşi timp cu textul. În locul
imaginii va apărea un icon, însoţit eventual de un text.
2.2 Amplasarea imaginilor într-o pagină web
Tag-ul HTML cu ajutorul căruia se afişează o imagine este <IMG>. Cei

mai importanţi parametrii ai săi sunt: SRC şi ALT. Cu ajutorul parametrului
SRC(source) se precizează fişierul în care este conţinută imaginea, iar cu ajutorul
parametrului ALT se precizează un text alternativ care va apărea în cazul în care
imaginea nu va putea fi încărcată din diferite motive, cum ar fi:
 formatul nu este suportat de browser;
 fişierul respectiv lipseşte sau este corupt;
29
 este deselectată orice opţiune de tipul Show Picture;
Sintaxa este următoarea:
<IMG SRC= “cale/fisier.jpg” ALT = “Ce se va afisa daca imaginea nu se

incarca!”>
Imaginile sunt stocate în fişiere cu diverse formate. Formatele acceptat de

browsere pentru fişierele imagine sunt:
 GIF (Graphics Interchange Format) cu extensia .gif;
 JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;
 XPM (X PixMap) cu extensia .xpm;
 XBM (X BitMap) cu extensia .xbm;
 BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);
 TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;
Pentru a cere afişarea unei imagini, comenzile diferă de la un browser la
altul. Pentru Internet Explorer trebuie efectuat un right-click pe icon-ul
corespunzător şi din meniul pop-up care va apărea trebuie selectată opţiunea Show
Picture.
Următorul exemplu HTML prezintă modul de folosire a tag-ului <img>:
<html>
<head>
<title>Imagini</title>
</head>
<body>
<DIV align = "center">
<IMG SRC = "img1.jpg" ALT = "Prima imagine">
<BR><BR> Aceasta este pagina WEB care contine două imagini.
<BR><BR>
<IMG SRC = "img2.jpg" ALT = "A doua imagine"></DIV>
</body>
</html>
30
Figura 4.1.1- Inserarea imaginilor in paginile web
2.3 Alinierea imaginilor
Tag-ul html <IMG> mai are un parametru important şi anume ALIGN cu

ajutorul căruia pot fi aliniate imaginile. O imagine poate fi aliniată atât orizontal,
cât şi vertical. Pentru alinierea orizontală, valorile parametrului ALIGN pot fi: left,
right, center. Pentru alinierea verticală, valorile pot fi: top, bottom sau middle.
<html>
<head>
<title>Alinierea imaginilor</title>
</head>
<body>
Alinieri:
<br> Pe verticala:
<img src="img1.jpg" align="top">
La mijloc: <img src="img2.jpg" align="middle">
Jos: <img src="img1.jpg" align="bottom"> Text dupa imagine.
</body>
</html>
31
Figura 4.1.2-Alinierea imaginilor pe verticală
În cazul alinierii orizontale, imaginea va fi aliniată la dreapta, la stânga sau

va fi centrată. Trebuie observat faptul că parametrul ALIGN al comenzii IMG
diferă de la acelaşi parametru al comenzii DIV. De exemplu <IMG ALIGN =
“RIGHT”> va alinia o imagine la dreapta şi textul care urmează va “înfăşura”
imaginea, ca în exemplul de mai jos:
<html>
<head>
<title>Papusi</title>
</head>
<body>
<DIV ALIGN = "CENTER">
In aceasta pagina vor fi prezentate cele mai frumoase jucarii produse de
firma noasta.
<img src = "img3.jpg" alt = "Papusi" align = "left">
Firma noastra este una cu o deosebita experienta in domeniul
fabricarii de jucarii si acestea reprezinta rezultatul a zeci de ani de munca.
<img src="img3.jpg" alt = "Papusi" align = "right">
Puteti cumpara chiar acum aceasta papusa de vis contactand
distribuitorul nostru autorizat in orasul dvs!
</div>
</body>
</html>
32
Figura 4.1.3-Înfăşurarea imaginilor
Atributele HSPACE si VSPACE precizează distanţa în pixeli pe

orizontală, respectiv pe verticală, dintre imagine şi restul elementelor din pagină.
<html>
<head>
<title> Alinierea textului in jurul imaginii</title></head>
<body>
<h4>Imagine aliniat la stanga inconjurata de text la distanta de 30 de
pixeli.
</h4>
<p> Text inainte de imagine.Text inainte de imagine.Text inainte de
imagine.Text inainte de imagine. Text inainte de imagine.Text inainte de
imagine.Text inainte de imagine.Text inainte de imagine.
<img src="img1.jpg" align="left" hspace="30" vspace="30"
alt="Imagine">
Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa
imagine.Text dupa imagine. Text dupa imagine.Text dupa imagine.Text
dupa imagine.Text dupa imagine.Text dupa imagine.
</body>
</html>
33
Figura 4.1.4- Alinierea textului in jurul imaginii
2.4 Dimensiunile unei imagini
Deoarece textul se încarcă mult mai repede decât imaginile, cele mai multe
browsere web vor afişa textul înaintea imaginilor. La început, browserul nu
cunoaşte dimensiunile imaginilor şi, de aceea, nu va lăsa loc liber pentru ele. Din
această cauză, textul se va deplasa pe ecran în timp ce imaginile sunt încărcate.
Pentru a evita acest lucru, tag-ul <IMG> are doi parametri prin care se poate
preciza lungimea şi înălţimea unei imagini. De exemplu, comanda:
<IMG SRC = “myimage.gif” WIDTH = 200 HEIGHT = 100>
va rezerva un dreptunghi de dimensiuni 200x100 pentru imaginea din fişierul

myimage.gif.. Pentru a adăuga un chenar în jurul imaginii, se foloseşte atributul
BORDER al etichetei <IMG>. Valorile acestor atribute sunt numere întregi
pozitive.
34
Dimensiunile transmise ca parametri nu trebuie neapărat să fie egale cu
dimensiunile reale ale imaginii, browserul mărind sau micşorând imaginea astfel
încât ea să ocupe întreg dreptunghiul precizat. Folosirea eronată a acestor parametri
poate avea rezultate neplăcute deoarece imaginea ar putea fi deformată prin
mărirea sau micşorarea disproporţionată a celor două dimensiuni.
<html>
<head>
<title>Dimensiunea imaginii</title></head>
<body>
O imagine cu chenar si dimensiune de 120 pixeli X 50 %
<img src="img1.jpg" border="5" width="120" height="50%">
Text dupa imagine.
</body>
</html>
Figura 4.1.5- Redimensionarea unei imagini
O imagine poate fi utilizată pentru a stabili fondul unei pagini Web. În

acest scop se foloseşte atributul BACKGROUND al etichetei <BODY> , având ca
valoare adresa URL a imaginii. Imaginea se multiplică pe orizontală şi pe verticală
până umple întregul ecran.
Imaginile pot fi utilizate pentru a obţine efecte deosebite într-o pagină web.
Printre aceste utilizări speciale putem enumera:
 Linii orizontale formate cu ajutorul imaginilor.
 Simboluri speciale pentru elementele unei liste neordonate.
35
 Elementele unei liste ordonate sau neordonate
 Legături (efectuând click cu butonul mouse-ului pe aceasta zonă în
browser se va încărca o altă pagină.)
2.5 Aplicații
<HTML>
<HEAD>
<TITLE> Imagini </TITLE></HEAD>
<BODY background="Blue hills.jpg"><H2 align=center> <FONT
COLOR=BLUE> PAGINA CU IMAGINI </FONT> </H2>
<IMG SRc ="img1.jpg" border= "3" align=middle> Peisaj<br>
A doua imagine <img src="img2.jpg" align =top hspace=30 vspace=50
alt="Casa"> aliniata la o anumita distanta fata de text
<br><font size="+2" color="#333366">Pozele sunt frumoase</font>
</BODY>
</HTML>
36

U2 PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

U2 PDF

Încărcat de

Drepturi de autor:

Formate disponibile

UNITATEA DE ÎNVĂȚARE NR.

2.1 INTRODUCERE ......................................................................................... 29

Timp alocat:1 oră

2.2 Amplasarea imaginilor într-o pagină web

Tag-ul HTML cu ajutorul căruia se afişează o imagine este <IMG>. Cei

<IMG SRC= “cale/fisier.jpg” ALT = “Ce se va afisa daca imaginea nu se

Imaginile sunt stocate în fişiere cu diverse formate. Formatele acceptat de

2.3 Alinierea imaginilor

Tag-ul html <IMG> mai are un parametru important şi anume ALIGN cu

În cazul alinierii orizontale, imaginea va fi aliniată la dreapta, la stânga sau

Atributele HSPACE si VSPACE precizează distanţa în pixeli pe

2.4 Dimensiunile unei imagini

<IMG SRC = “myimage.gif” WIDTH = 200 HEIGHT = 100>

va rezerva un dreptunghi de dimensiuni 200x100 pentru imaginea din fişierul

Figura 4.1.5- Redimensionarea unei imagini

O imagine poate fi utilizată pentru a stabili fondul unei pagini Web. În

S-ar putea să vă placă și