RSS

L9. Inserarea imaginilor in pagina HTML

13 Mar

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
  • 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.
 
3 Comments

Posted by on 13/03/2012 in C1_3 Modul Internet

 

Tags:

3 responses to “L9. Inserarea imaginilor in pagina HTML

  1. www.cellsbee.com

    10/04/2013 at 06:13

    Hi there, this weekend is nice in support of me, as this time i am reading this wonderful
    informative paragraph here at my residence.

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: