Imagini în cadrul paginilor WEB

Formatele imaginilor
Browser-ele recunosc, în cadrul paginilor web, mai multe formate ale imaginilor. Cele mai răspîndite sunt cele care au una din terminaţiile .jpg sau .jpeg, cele cu extensia .gif şi cele care au extensia .png. Iată în continuare cîteva caracteristici ale acestor formate de imagini: GIF (Graphics Interchange Format) Formatul GIF poate redă un număr de 256 de culori, deaceea este folosit pentru imaginile de dimensiuni mici: butoane, icon-uri, animaţii mici.

jpg marime: 26. Imaginile care aparţin acestui format au extensia . poza.JPEG (Joint Photographic Expert Group) Formatul JPEG nu mai este limitat la 256 de culori şi de aceea este folosit pentru fotografii.6 Kb .jpg sau .jpeg.

 PNG (Portable Network Graphics) PNG este un format mai nou care a înlocuit treptat formatul GIF în primul rînd prin calitatea superioară. Hai să vedem butoanele şi iconurile prezentate la formatul GIF şi în format PNG: .

în funcţie de cum optimizăm imaginile). iar pentru butoane şi iconuri să folosim PNG (sau GIF. putem să concluzionăm că este bine pentru fotografii şi imagini mari să folosim formatul JPG sau JPEG. . după ce am analizat principalele formate ale imaginilor folosite în paginile web.Acum.

extensie"> Atenţie la extensie! Nu uitaţi să scrieţi şi extensia imaginii pentru că altfel imaginea nu va fi afişată de browser. Forma generală a acestui tag va fi: <IMG SRC="numeleimaginii.Adăugarea imaginilor in paginile web Pentru a folosi imagini şi in cadrul paginilor tale web trebuie să foloseşti tag-ul <IMG> însoţit de atributul SRC (source) care indică adresa sau calea către imaginea pe care vrei să o foloseşti. .

Este bine ca atunci cînd vrei să faci un site. imaginea va fi afisata doar dacă pagina respectivă va fi în acelaşi folder cu imaginea pe care vrei să o foloseşti. În caz contrar imaginea nu va fi afişată.) în cadrul aceluiaşi folder. imagini etc. . Dacă vei folosi în codul HTML al paginilor site-ului tău linia de cod de mai sus. să ţii toate fişierele (pagini HTML.

.jpg în acelaşi folder cu pagina web pe care o vom face în continuare. 2. 4.Să scriem codul unei pagini web care să conţină o imagine. Click pe imagine Se va deschide un nou tab (pagina) cu imaginea Click dreapta pe imagine şi alege din meniul care apare: Save Image As Salvează imaginea cu numele invathtml. Luăm ca exemplu imaginea de mai jos pe care o salvăm astfel: 1. 3.

jpg"> </CENTER> </BODY> </HTML> .ugarea imaginilor &#238.Acum sa vedem codul HTML:  <HTML> <HEAD> <TITLE>Imagini</TITLE> </HEAD> <BODY> <CENTER><B>Ad&#259.n paginile web</B> <BR> <IMG SRC="invat-html.

de exemplu.Dacă site-ul tău va avea multe fişiere. în care vor fi salvate toate imaginile site-ului. În acest caz. nu mai este o soluţie să le ţii pe toate în acelaşi folder. Astfel în folderul Site. Iată cum ar arăta structura site-ului: . vom avea un subfolder Poze. este bine să grupăm fişierele de acelaşi tip în subfoldere. un subfolder Pagini în care vor fi salvate toate paginile HTML şi aşa mai departe.

<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"> .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: daca pagina va fi salvata in subfolderul Pagini si imaginea va fi in subfolderul Poze.

o sa apara textul pe care l-am scris la atributul ALT.html../Poze/invat-html./Poze/invat-html. Acest atribut are ca valoare numere intregi pozitive: <IMG SRC=". imagini.jpg" BORDER=5> cu linia: <IMG SRC=". vom inlocui linia: <IMG SRC=".. utilizatorul poate vedea un text inlocuitor al imaginii.jpg" BORDER=5 ALT="Fetita care vorbeste la telefon"> ./Poze/invat-html. De exemplu..Daca vrei ca imaginea sa fie incadrata de un chenar. la pagina de mai sus. foloseste atributul BORDER al tag-ului <IMG>. Acest lucru se poate realiza folosind atributul ALT impreuna cu tag-ul<IMG>.jpg" BORDER=5> Daca imaginea va fi de dimensiuni mai mari. Daca trecem cursorul mouse-ului deasupra imaginii. atunci pana cand se va incarca si va fi afisata de browser.

Salveaza imaginea cu numele euro2012.Folosirea imaginilor alaturi de texte Pentru a alinia o imagine vom folosi atributul ALIGN al tagului <IMG>.jpg in folderul Poze. Hai sa vedem un exemplu. aliniere la stanga sau la dreapta paginii. Click pe imagine 2. . Click dreapta pe imagine si alege din meniul care apare: Save Image As) 4. Atributul ALIGN poate avea una dintre valorile: left sau right. Se va deschide un nou tab (pagina) cu imaginea 3. Mai intai sa luam imaginea de mai jos: 1.

Dupa patru ani. acolo unde s-a impus tara gazda. Germania a fost castigatoare. a fost randul Greciei sa castige trofeul. Danemarca se impunea in Suedia.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. in 1972 organizatoare a fost Belgia.. in Anglia. in 1976 a venit randul Cehoslovaciei sa castige campionatul european de fotbal. editie gazduita de Franta.</FONT> </BODY> </HTML> . in Portugalia. iar in 1984.Acum sa scriem codul HTML al unei pagini web care va contine si text in jurul imaginii: <HTML> <HEAD> <TITLE>EURO 2012</TITLE> </HEAD> <BODY> <FONT COLOR="#0000FF" FACE="Times New Roman"> <CENTER><B>Istoria campionatului european de fotbal</B></CENTER> </FONT> <BR><IMG SRC=". Spania a iesit campioana europeana. iar castigatoare a fost Rusia. Patru ani mai tarziu. din nou s-a impus tara organizatoare. disputat in Iugoslavia. Editia din anul 1988 a avut loc in Germania si a fost castigata de Olanda. in 1968. La ultimul campionat european. a fost randul acesteia sa castige trofeul. disputat in 2008. in anul 2000 Belgia si Olanda au organizat turneul final. in Italia. Urmatorul turneu european a avut loc in anul 1964 in Spania. Republica Federala Germana impunandu-se. in 1996. in Austria si Elvetia. pentru ca dupa alti patru ani./Poze/euro2012. in 1980. in 2004. in Italia. iar castigatoare a fost Franta. sa fie randul Germaniei sa isi adjudece trofeul.

.html in folderul Pagini.Salveaza pagina cu numele de euro. Iata cum va arata aceasta pagina: click aici.

./Poze/euro2012. linia: <IMG SRC=". De exemplu inlocuieste.jpg" BORDER=5 ALIGN="left" HSPACE=50 VSPACE=20> . care reprezinta de fapt distanta in pixeli dintre imagine si text. Valorile acestor atribute trebuie sa fie numere intregi.jpg" BORDER=5 ALIGN="left"> cu urmatoarea: <IMG SRC=".Daca vrei ca textul sa fie afisat la o anumita distanta de imagine. in codul de mai sus../Poze/euro2012. foloseste atributele HSPACE (spatiu pe orizontala) si VSPACE (spatiu pe verticala).

Salveaza pagina cu numele euro2. .html in folder-ul Pagini. Vezi diferenta: click aici Foloseste diferite valori pentru atributele HSPACE si VSPACE pana cand vei obtine 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.html din folderul Pagini adauga tagului <BODY> atributul BACKGROUND dupa cum urmeaza: <BODY BACKGROUND="./Poze/background1.jpg"> Salveaza pagina cu numele background1.html Iata rezultatul: click aici . copiaza imaginile potrivite in folder-ul Poze cu numele scrise sub fiecare (click pe fiecare imagine si din pagina care se deschide click dreapta pe imagine.. iar apoi alege din meniul care apare optiuneaSave Image As): Acum in codul paginii imagini. Pentru a intelege mai bine.

Legatura catre o alta pagina Pentru a folosi legaturi in paginile web pe care le vei face. trebuie sa folosesti perechea de tag-uri <A> si </A>. Numele acestor tag-uri vine de la cuvantul anchor care se traduce ancora.Crearea legaturilor in HTML Navigarea in cadrul site-urilor este posibila cu ajutorul link-urilor (legaturilor).html>Textul legaturii</A> . Linia de cod pentru inserarea unei legaturi in cadrul unei pagini web va avea urmatoarea forma: <A HREF=numelepaginii. In aceasta lectie vei invata cum sa folosesti diferite tipuri de legaturi in cadrul site-ului tau. Tag-ul <A> va trebui folosit impreuna cu atributul HREF.

Deschide editorul de texte (de exemplu: Notepad) si scrie urmatorul cod HTML: . cum poti adauga o legatura intr-o pagina web din folderul Pagini catre paginaimagini.html din acelasi folder.Daca pagina respectiva se afla in acelasi folder cu pagina pe care se afla legatura atunci nu sunt necesare ghilimelele. Sa vedem impreuna.

html in folderul Pagini.</B> <BR><BR> <A HREF=imagini. pagin&#259. Pagina link.<HTML> <HEAD> <TITLE>Legaturi</TITLE> </HEAD> <BODY> <CENTER><B>Leg&#259.tur&#259.tre o alt&#259. c&#259.html ar trebui sa arate astfel: click aici .html>Imagine Invat HTML</A> </CENTER> </BODY> </HTML> Salveaza pagina (File/Save As) cu numele de link.

Daca pagina catre care vrem sa facem o legatura. nu se afla in acelasi folder cu pagina noastra atunci nu mai putem folosi decat numele paginii HTML ca valoare a atributului HREF. Fie urmatoarea structura: . Sa vedem cateva exemple de legaturi catre pagini din alte directoare sau subdirectoare.

vom folosi urmatoarea valoare a atributului HREF: <A HREF="Documente/Carti/numelepaginii. este bine sa faci si tu.html">Text link</A> . o structura asemanatoare cu cea de mai sus. vom folosi urmatoarea valoare a atributului HREF: <A HREF="Firma 1/numelepaginii. iar apoi sa faci cateva pagini HTML in diverse directoare sau subdirectoare si sa incerci sa creezi legaturi din fiecare pagina HTML catre celelate. Iata cateva exemple: pentru a adauga o legatura in cadrul unei pagini HTML din directorul Contabilitate catre o pagina HTML din directorul Firma 1. pe calculatorul tau.Pentru a intelege cat mai bine cum functioneaza legaturile catre diverse pagini web.html">Text link</A> pentru a adauga o legatura in cadrul unei pagini HTML din directorul Site catre o pagina HTML din directorul Carti.

html">Text link</A> pentru a adauga o legatura in cadrul unei pagini HTML din directorul Servici catre o pagina HTML din directorul Matematica./.html">Text link</A> ./numelepaginii./Firma 3/numelepaginii./.html">Text link</A> pentru a adauga o legatura in cadrul unei pagini HTML din directorul Firma 2 catre o pagina HTML din directorul Firma 3./Scoala/Matematica/numelepaginii.. vom folosi urmatoarea valoare a atributului HREF: <A HREF=". vom folosi urmatoarea valoare a atributului HREF: <A HREF=".. vom folosi urmatoarea valoare a atributului HREF: <A HREF=".pentru a adauga o legatura in cadrul unei pagini HTML din directorul Matematica catre o pagina HTML din directorul Scoala...html">Text link</A> pentru a adauga o legatura in cadrul unei pagini HTML din directorul Bilanturi catre o pagina HTML din directorul Site./numelepaginii... vom folosi urmatoarea valoare a atributului HREF: <A HREF=".

Scrie urmatorul cod HTML: . Trebuie sa folosesti urmatoarea linie de cod: <A HREF="adresa site-ului">Textul legaturii</A> Sa facem o pagina web care sa contina legaturi catre site-uri ale unor ziare din Romania.Legatura catre un site Dupa ce ai vazut cum se folosesc legaturile catre alte pagini html locale acum vom vedea impreuna cum putem adauga o legatura catre un site particular.

ro">Prosport</A> <BR><A HREF="http://www.ro">Evenimentul Zilei</A> <BR><A HREF="http://www.libertatea.gsp.<HTML> <HEAD> <TITLE>Legaturi catre site-uri particulare</TITLE> </HEAD> <BODY> <CENTER> <B>Leg&#259turi c&#259tre site-urile unor ziare din Rom&#226nia</B> <BR><A HREF="http://www.evz.ro">Gazeta sporturilor</A> <BR><A HREF="http://www.ro">Libertatea</A> </CENTER> </BODY> </HTML> .prosport.ro">Capital</A> <BR><A HREF="http://www.capital.ro">Jurnalul Na&#355.jurnalul.ional</A> <BR><A HREF="http://www.

Sign up to vote on this title
UsefulNot useful