Extras din laborator
Aplicatia nr. 9
Introducerea imaginilor în documentele HTML
1. Scopul lucrarii
Studentii vor învata cum sa insereze imagini, sunete si inregistrari video în
cadrul unei pagini Web, cum sa foloseasca imaginile ca fond al paginii.
2. Inserarea unei imaginii
Pentru a insera o imagine în cadrul unei pagini WEB se foloseste eticheta
<IMG> (de la image); nu este o eticheta container. Pentru identificarea imaginii
care va fi inserata, se utilizeaza atributul src (source) al etichetei <IMG>.
Atributul src îi comunica browserului numele si locatia imaginii care urmeaza sa
fie inserata. Valoarea acestui atribut este adresa URL a imaginii respective
Când imaginea se afla în acelasi director cu fisierul HTML - cel care face
referire la imagine, atunci adresa URL a imaginii este formata numai din numele
fisierului, inclusiv extensia.
<IMG src=imagine.extensie>
Daca imaginea se afla într-un alt director, URL-ul imaginii trebuie
specificat fie prin adresa absoluta fie prin cea relativa.
Doua dintre cele mai utilizate tipuri de fisiere grafice sunt JPEG (Joint
Photographic Experts Group) si GIF (Graphics Interchange Format).
Formatul GIF foloseste 256 de culori si este ideal pentru icon-uri, ilustratie
si animatie. Acest format utilizeaza o tehnologie speciala de comprimare care
reduce semnificativ dimensiunile fisierelor grafice pentru un transfer mai rapid prin
retea. Prin procesul de comprimare se pastreaza toate caracteristicile imaginii
originale. Datorita numarului redus de culori, formatul GIF nu este potrivit pentru
fotografii sau imaginii de calitate înalta. Pentru acest tip de imagini cel mai adecvat
este formatul JPEG.
EXEMPLUL I
Se insereaza într-o pagina doua imagini, una dintre ele aflându-se în acelasi
folder cu prima sursa, iar cealalta în folderul Imagini.
<HTML>
<HEAD>
<TITLE>imagini 1</TITLE>
</HEAD>
<BODY>
<H1 align = center>Introducerea imaginilor în pagina</H1><HR>
Imagini aflate în acelasi folder<P>
<IMG src = red panda.jpg border = 6><P>
Imagini aflate în folderul Imagini<P>
<IMG src = D:/Student/Imagini/Big Grin.jpg border = 3>
</BODY>
Indrumar laborator Anul I - Text preliminar
101
</HTML>
Dupa introducerea textului în
documentul HTML se salveaza cu numele
imagini.html. Se deschide Internet
Explorer, din meniul sau se deschide
fereastra FileOpenBrowsese alege
imagini.htmlOpense deschide pagina
Web pentru a vedea cum arata.
Atributul src specifica locatia
imaginii.
Atributul border al etichetei
<IMG> este folosit pentru a plasa un chenar
în jurul imaginii. Valoarea atributului este
data de numarul de pixeli care reprezinta
grosimea chenarului din jurul imaginii.
Setarea atributului la valoarea 0 sau absenta
atributului face ca acest chenar sa nu fie present.
Atributul alt permite afisarea unui text explicativ în spatiul în care va fi
afisata imaginea în pagina.
Dimensionarea imaginii se realizeaza cu ajutorul atributelor width – prin
care se stabileste latimea imaginii si height – prin care se stabileste înaltimea
imaginii. Nu sunt obligatorii, însa utilizarea lor este recomandata deoarece va
reduce timpul de procesare a paginii web de catre browser.
hspace, vspace – specifica spatiul care va fi pastrat în jurul unei imagini
EXEMPLUL II
Se insereaza într-o pagina o imagine care se afla în acelasi folder cu sursa, iar în
spatiul în care se afla imaginea se introduce un text explicativ.
<HTML>
<HEAD>
<TITLE>imagini 2</TITLE>
</HEAD>
<BODY>
<H1 align = center>Atributul Alt</H1><HR>
Acesta este un urs panda<BR>
<IMG src = "urs panda.jpg" border =”3” ><BR>
<IMG src = urs panda alt =”ursulet” ><P>
</BODY>
</HTML>
Cea de-a doua imagine inclusa în
document nu este afisata. S-a omis intentionat
extensia .GIF pentru a întelege mai bine rolul lui
alt. Deci, daca dintr-un motiv oarecare, imaginea
nu se încarca în pagina, se încarca mai greu, sau
Indrumar laborator Anul I - Text preliminar
102
este vizualizata cu un browser care nu suporta grafica, în zona rezervata imaginii
va fi afisat textul specificat ca valoarea a atributului alt. Textul va fi afisat în cadrul
unei mici ferestre care se deschide în momentul când cursorul mouse-ului este
mentinut deasupra imaginii.
Preview document
Conținut arhivă zip
- Introducerea Imaginilor in Documentele HTML.pdf
Alții au mai descărcat și
LUCRAREA DE LABORATOR nr. 1 Metode CAD de generare a schemelor electronice Scopul lucrării: Scopul lucrării de laborator nr.1 este acela de a...
Laborator 1 Mediul de programare Matlab (Limbajul de programare Matlab) Noţiuni generale Matlabul este un program de înaltă performaţă...
4.1. Scopul lucrării: Cercetarea diferitelor regimuri de funcţionare a receptoarelor de energie legate în stea, în cazul conectării lor la o sursă...
1.Scopul lucrării: A lua cunoştinţă de principiile de lucru ale releurilor electromagnetice, de a determina experimental unele caracteristice ale...
1.1 Scopul lucrării: Analiza şi sinteza componentelor de bază ale structurii sistemului informațional și a unui calculator personal tipic cu...
1.DIODA SEMICONDUCTOARE Fig.1.1. Schema circuitului pentru determinarea caracteristicii diodei Fig.1.2. Caracteristicile statice, in polarizare...
*redresor monolternanta R1 0 2 10K D1 1 2 DM2 .MODEL DM2 D (IS=8.0E-16) V1 1 0 SIN(0 5 50) .TRAN 0.2M 100M .DC V1 -15 15 0.1 .FOUR 50 V(1)...
Aplicatia 7 Studiul limbajului HTML si a structurii publicatiilor WEB 6.1. Scopul lucrarii. Studentii vor învata cum sa-si creeze o pagina Web...
Te-ar putea interesa și
Introducere Prezenta lucare, intitulată, „Tehnologi internet. Site de publicitate ” urmăreşte prezentarea principalelor tehnici de realizare a...
INTRODUCERE Într-o epocă modernă ca aceasta în care se poate rezolva totul cu ajutorul internetului printr-un simplu ”click” - o singură apăsare a...
INTRODUCERE Societatea umanã cunoaşte în momentul de faţã una din cele mai profunde transformãri din întreaga ei existenţã, în care informatica...
2. Introducere 2.1. Scurtă prezentare a limbajului HTML Strict vorbind WWW - ul este un sistem pentru accesul la hypertext pe Internet. Este...
7. Limbajul HTML 7.1 Definirea limbajului. HTML (Hypertext Markup Language) este un limbaj creat în scopul de a descrie, în mod text, formatul...
Deschide un Notepad (NEW ,Text Document) si incepe cu acestea ... <HTML> </HTML> Fiecare dintre acestea sunt numite tag-uri. Exista un tag...