1 / 22

Imagini

HTML, imagini, inserare

VioletaChis
Télécharger la présentation

Imagini

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Imagini

  2. Tipuri de fişiere, care pot fi folosite în cadrul paginilor web: • GIF – (Graphic Interchange Format), a fost introdus de Compuserve. Oferă o compresie fără pierderi, maxim 256 de culori (adâncime de culoare de 8 biţi). Pot fi animate şi pot avea un fundal transparent, ceea ce le face uşor de plasat în pagină. • JPEG (Joint Photographic Expert Group) – oferă o compresie variabilă. Este utilizat adesea pentru fotografii cu adâncime de culoare de 24 de biţi. Are ca rezultat pierderea detaliilor fotografiei. Nu are transparenţă. • PNG – (Portable Network Graphic) este un format mai nou care se aseamănă cu GIF, dar este mult mai flexibil. Permite adâncimi de culoare de 8 sau 24 de biţi, fără animaţie. • SWF - format flash, permite animaţie ce poate fi vizualizată în browser

  3. <img src="numele imaginii.extensie"> • Observaţie Imaginea va fi afişată doar dacă pagina respectivă va fi în acelaşi folder cu imaginea pe care doriţi să o folosiţi. În caz contrar imaginea nu va fi afişată.

  4. Atribute • alt= text specifică un text alternativ, care va fi afişat de browserele ce nu pot vizualiza imagini ; • height= dimensiune (în pixeli sau %) defineşte înălţimea imaginii ; • width= dimensiune (în pixeli sau %) defineşte lăţimea imaginii ; • border = număr – imaginea va fi încadrată de un chenar cu grosimea specificată în număr de pixeli ;

  5. Atribute • hspace = dimensiune,specifică spaţiul inserat în stânga şi în dreapta imaginii ; • vspace = dimensiune, specifică spaţiul inserat în partea de sus şi în partea de jos a imaginii ; • align= valoare,specifică modul de aliniere a imaginii în raport cu textul. Valoarea poate fi: • top (partea de sus a imaginii este aliniată în raport cu textul); • middle (imaginea este aliniată centrat în raport cu textul); • bottom (aliniere la bază; partea de jos a imaginii se aliniază cu linia de bază a textului); • left (imaginea este aliniată la marginea din stânga a paginii); • right (imaginea este aliniată la marginea din dreapta a paginii).

  6. <html><head><title>Exemple de pozitionare a imaginii</title></head> <body> <h3>Inserarea imaginii in document</h3> Un exemplu de pozitionarea implicita a textului <img src="poze/mai.jpg" width="100" height="100" border="1" alt=""> este la baza imaginii <p>Pozitionarea textului <img src="poze/canta.jpg" width="100" height="100" border="0" alt="exemplu" align="middle"> pe centrul imaginii <p>Pozitionarea textului la baza superioara <img src="Poze/pc.png" width="100" height="100" border="0" alt="exemplu" align="top"> a imaginii </body></html>

  7. <html><head><title>Exemple de pozitionare a imaginii</title></head> <body> <h3>Inserarea imaginii in document</h3> <img src="Poze/doi.jpg" width="100" height="100" border="0" align="left" alt=""> Imaginea este <br> pozitionata in stanga documentului, lasand textul<br> sa ocupe spatiul liber din dreapta.<br clear="left"> Acest pasaj este fortat sa coboare sub imagine! <p> <hr> <img src="poze/unu.jpg" width="100" height="100" border="0" align="right" alt=""> Imaginea este <br> pozitionata in dreapta documentului, lasand textul sa ocupe spatiul liber din stanga.<br clear="right"> Acest pasaj este fortat sa coboare sub imagine! </body> </html>

  8. <HTML><HEAD><TITLE>Exemplu</TITLE> <BODY><FONT face=”Times New Roman” color=#0000ff> <CENTER><B>Introducere</B></CENTER></FONT><BR> <IMG hspace=20 src="jump.gif" align=left vspace=20 border=2> <FONT face=”Arial” color=#ff0000>Se va realiza analiza, în regim permanent, a circuitelor alimentate în curent alternativ. Se vor deduce ecuatiile caracteristice ale elementelor ideale R, L si C functie de amplitudinile în complex si se va prezenta conceptul de impedanta complexa. Se vor analiza circuitele RL serie si RC serie, determinânduse tensiunile si curentii prin metoda amplitudinilor complexe. Generalizarea conectarii impedantelor se va face prin deducerea din conectarea rezistentelor.</FONT> <BR></BODY></HTML>

  9. <HTML> <HEAD> <TITLE>Lista personalizata</TITLE> </HEAD> <BODY> <UL> <p>Universitatea <b>Aurel Vlaicu</b> are urmatoarele facultati:: </p> <IMG SRC="hexa.gif">&nbsp;&nbspFacultatea de Stiinte Exacte <BR><IMG SRC="hexa.gif">&nbsp;&nbspFIATPM <IMG SRC="hexa.gif">&nbsp;&nbspFacultatea de Stiinte Umaniste <BR> <IMG SRC="hexa.gif">&nbsp;&nbspFacultatea de Inginerie <BR> <IMG SRC="hexa.gif">&nbsp;&nbspFacultatea de Stiinte Economice </p> </UL> </BODY></HTML>

  10. Utilizarea unei imagini ca legătură Dacă doriţi să utilizaţi o imagine ca legătură va trebui scrieţi adresa imaginii între tag-urile <a> … </a> <a href=fisier.html><img src="adresa imaginii"</a> Exemplu 1 <html> <head> <title> Imagini folosite ca legaturi</title> </head> <body><h4>Imagine folosita ca legaturi</h4> Un text oarecare.<a href="index.html"> <img src="Poze/info.gif"></a> Un text oarecare. </body></html>

  11. URL relativ • Dacă fişierul curent este "index.html", pentru a referi fişierul "poza3.gif" se foloseşte expresia "Poze/ poza3.gif. • Daca fişierul curent este "poza3.gif" pentru a referi fişierul "index.html" se foloseşte expresia "../index.html". • Daca fişierul curent este "poza1.gif", pentru a referi fişierul "fisier2.html" se foloseşte expresia "../Ing/fisier2.html".

  12. Hărţi de imagini

  13. Permit ca diferite zone ale unei imagini să fie definite drept legături către alte diverse pagini Web Etape • Definirea unei imagini ca “hartă de imagini” <img> cu atrib: src=URL-ul imaginii folosite usemap=#numele_hărţii

  14. 2. Definirea hărţii <map> ….</map> Atrib: name=numele_hărţii (obligatoriu) Zonele hărţii vor fi definite cu tag-ul <area> ce are 3 atrib obligatorii • Shape=rect, poly, circle, default • Coords • Href=URL-ul paginii indicate de legătura zonei respective

  15. [target] numele unei instanţe a browserului în care va fi afişată pagina către care indică legătura zonei respective.

More Related