marți, 13 martie 2012

L9. Inserarea imaginilor in pagina HTML

O imagine se poate afla fie in acelasi calculator cu pagina fie pe un alt calculator(server). in ambele cazuri ne trebuie calea pana la ea, fie casuccesiune de foldere de pe calculator, fie ca succesiune de foldere de pe server.

Cu inserarea unei imagini ne-am mai intalnit la lectia anterioara (folosirea culorilor) la tagul BODY:

<BODY [ BACKGROUND="adresa_imagine"] [ BGCOLOR="#rrggbb"|"culoare"] ... > continut document </BODY>

Atributul BACKGROUND permite stabilirea unei imagini ca fundal al paginii. Imaginea va fi repetata pana la acoperirea ecranului (gen TILE ca si aceeasi proprietate la setarea monitorului).

Exemplu

  1. Desenati in Paint un cerc si salvati imaginea in folderul de lucru sub numele poza.jpg.

  2. Scrieti urmatorul cod html si salvat sub numele index.html, in acelasi folder cu imaginea. Vizualizati fisierul html intr-un browser.

    1. <html> <body BACKGROUND="poza.jpg"</body> </html>



  3. Cautati o imagine pe internet si copiati adresa ei (click drp, copy image location); inlocuiti poza.jpg cu adresa imaginii. reincarcati pagina index.html in browser


Sintaxa tagului IMG


<IMG SRC="URL-imagine" [ ALIGN=left|right|top|middle|bottom] [ ALT="text-alternativ"] [ BORDER=nn] [ DYNSRC="URL-dinamic"] [ LOWSRC="URL-rez-slaba"] [ LOOP=nr-repet] [ CONTROLS] [ HEIGHT=mm] [ WIDTH=ww] [ HSPACE=hh] [ VSPACE=vv] [ ISMAP] [ USEMAP]> [text]

Explicatii:

  • SRC reprezina SURSA; ea poate fi locala (in acelasi folder cu pagina sau in altul) sau de pe internet

  • ALIGN reprezinta aliniarea imagini vis a vis de pagina/textul

  • ALT= permite afisarea unui text in cazul in care browserul nu afiseaza imaginile

  • BORDER = permite afisarea imaginii cu o margine a carei grosime se da ca parametru

  • HEIGHT = inaltimea pe care o va avea imaginea afisata

  • WIDTH = latimea pe care o va avea imaginea afisata


Observatie:

  • Intai imaginea se incarca in memorie si apoi i se aplica restrangerile de inaltime si latime. Daca doriti ca timpul de incarcare al imaginii sa fie mai mic, va trebui ca,  in prealabil, sa micsorati imaginea la dimensiunile dorite.

  • imaginea se poate incarca si de la o locatie de pe internet

    • <img src= "http://www.google.ro/logos/2012/juan_gris-2012-hp.jpg">



  • imaginea se poate incarca dintr-un folder local; ea nu trebuie neaparat situata in acelasi folder cu pagina

    • <img src="imagini/poza.jpg">




Aplicatii

  • incercati toate cazurile de mai sus: incarcarea unei imagini de pe net, din folderul local, dintr-un alt folder

  • realizati o cautare a siturilor care pot realiza butoane online ( online buttons ) si salvati un set de butoane cu textele: Home, Album, Links

  • realizati o cautare a siturilor care pot realiza bannere online  (free online banners) si creati un banner cu un text de bun-venit.

  • Creati o pagina web care sa contina pe mijloc un banner si pe randul urmator, centrat, setul de butoane de mai sus, separate de 2-3 spatii.

Posted by at
Labels: ,

Un comentariu:

Abonați-vă la: Postare comentarii (Atom)