Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Lecţia 3

    Încărcat de

    Adriana Farcas
    70 vizualizări5 pagini

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    DOC, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    70 vizualizări5 pagini

    Lecţia 3

    Încărcat de

    Adriana Farcas

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 5

    Lecţia 3: Imagini si sunete

    3.1 De ce imagini ?
    In principal, utilizarea imaginilor (pozelor) in cadrul paginilor HTML are ca scop imbunatatirea modului de
    transmitere a mesajului catre utilizatori. Imagineaza-ti cum ar arata Academia Online fara imagini !

    O pagina in care imaginile sunt combinate cu textul poate transmite un mesaj mult mai bine decat o pagina care
    contine doar text. Selectarea imaginilor care vor fi utilizate este foarte importanta; cateva imagini care "clipesc"
    nu sunt suficiente pentru a face o pagina atractiva.

    3.2 Ce trebuie sa stiu despre imagini ?


    Inainte de a introduce o imagine intr-un document HTML este necesar sa iti pui cateva intrebari:

    • imaginea aceasta da "valoare" paginii mele?


    o dupa cum spuneam mai sus, simpla inserare in pagina a unor imagini care nu au nici o legatura cu
    mesajul transmis in pagina nu este suficienta. Faptul ca o imagine sau mai multe "arata bine" nu
    este suficient pentru a face o pagina atractiva.
    • pot sa "imprumut" imaginea?
    o voi incepe prin a spune ca NU exista imagini fara copyright (drepturi de autor). Exista imagini care
    sunt oferite gratuit sau cu consimtamantul autorului (proprietarului), insa majoritatea sunt oferite
    contra cost (din motive lesne de inteles). Desi in cazul siturilor personale(non-profit) este
    improbabil sa verifice cineva provenienta imaginilor, in cazul siturilor comerciale riscul de a fi dat
    in judecata (chiar si in Romania) este real.
    o nu te baza pe faptul ca nu stii provenienta imaginii. In fata legii "nu stiu" nu este valabil.
    Responsabilitatea in a determina cui ii apartine imaginea respectiva iti apartine in intregime.
    • ce dimensiunea are imaginea?
    o pentru utilizatorii care folosesc conexiuni dial-up, paginile care contin imagini de dimensiuni mari
    (> 25-30 k) se vor incarca in browser foarte greu. Multi se vor plictisi asteptand incarcarea paginii
    si vor abandona vizualizarea paginii.
    • culorile sunt "portabile"?
    o o problema importanta este modul de afisare a culorilor pe diferite computere, sisteme de operare
    sau browsere. Sunt convins ca nu ai vrea ca fundalul rosu al unei imagini afisate in browserul tau
    sa arate roz pe un Mac, spre exemplu. Pentru a elimina aceasta problema au fost stabilite anumite
    culori care arata la fel indiferent de computer, sistem de operare, etc. Poti vedea aceasta lista
    impreuna cu codurile lor in format hexa aici.
    • ce format de imagine sa folosesc?
    o Exista foarte multe formate de fisiere grafice (psd, png, jpg, pcx, bmp, gif, wmf, etc.). Doar cateva
    sunt universal recunoscute de browsere:
     GIF - GRAPHICS INTERCHANGE FORMAT - este un format de compresie fara pierdere
    de calitate.
     JPG - format introdus de JOINT PHOTOGRAPHIC EXPERT GROUP - este un format de
    compresie cu pierdere de calitate. Atentie insa: prin salvarea repetata a unei imagini, ea va
    pierde din calitate, devenind in final inutilizabila.
     PNG - PORTABLE NETWORK GRAPHIC - este un format de compresie fara pierdere de
    calitate. Are in general dimensiuni mai mari decat primele doua formate mentionate.

    3.3 Cum se introduce o imagine intr-o pagina HTML?


    Introducerea unei imagini intr-o pagina HTML se face prin marcajul <img>
    <html>
    <head>
    <title>Pagina mea</title>
    </head>
    <body>
    <img src="imagine.gif">
    </body>
    </html>

    Atributul src specifica locatia imaginii. Alaturi de src, marcajul <img> are urmatoarele atribute:

    • alt - specifica un text alternativ pentru cazul in care imaginea nu poate fi afisata. Este important si pentru
    motoarele de cautare.
    • border - traseaza un chenar in jurul imaginii.
    • width, height - specifica latimea, respectiv inaltimea imaginii. Nu sunt obligatorii, insa utilizarea lor este
    recomandata deoarece va reduce timpul de procesare a paginii web de catre browser.
    • hspace, vspace - specifica spatiul care va fi pastrat in jurul unei imagini.

    Poti vizualiza in browserul tau ce se intampla in cazul in care imaginea lipseste sau calea catre imagine este
    gresita, aici.

    <html>
    <head>
    <title>Pagina cu imagine</title>
    </head>
    <body>
    <img src="imagine.gif" width="100" height="100" border="0"
    hspace="10" vspace="10">
    </body>
    </html>

    Poti vizualiza exemplul de mai sus in browserul tau aici.

    In general, atunci cand este inserata o imagine intr-un text, acesta este aliniat in partea inferioara a imaginii. Va
    ramane un spatiu neutilizat, dupa cum ai vazut probabil in exemplul de mai sus. Pentru evitarea "pierderii" acestui
    spatiu poti folosi atributul align, cu valorile left, right.
    <html>
    <head>
    <title>Pagina cu imagine</title>
    </head>
    <body>
    <img src="imagine.gif" width="100" height="100" border="0"
    hspace="10" vspace="10" align="left">
    </body>
    </html>

    Poti vizualiza exemplul de mai sus in browserul tau aici.

    1. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online

    2. Realizeaza o pagina HTML (folosind NotePad) care sa contina una sau mai multe imagini, alaturi
    de un text pe care sa il formatezi folosind marcajele studiate in primele doua lectii. Modifica
    valorile atributelor marcajului <img> si vizualizeaza pagina in browser.

    3.4 Inserarea de fisiere audio in paginile HTML


    In general, inserarea de fisiere audio in paginile HTML nu este recomandata (bineinteles exista si exceptii).
    Dimensiunile mari, timpul mare de download precum si "agresarea" utilizatorului cu o melodie care se repeta la
    infinit sunt cateva din argumentele contra. In acelasi timp noile tehnologii (ex. FLASH) largesc posibilitatile,
    existand multe pagini web care combina in mod fericit parte audio cu cea vizuala.

    Referindu-ma strict la posibilitatile HTML, introducerea de secvente audio se poate face in doua modalitati:

    • sub forma unei referinte(link)


    • prin intermediul marcajelor embed sau bgsound
    <html>
    <head>
    <title>Inserare referinta audio</title>
    </head>
    <body>
    Apasa pe linkul de mai jos.
    <a href="sunet.au">
    Fisierul audio va fi rulat intr-o aplicatie instalata
    in calculatorul tau (ex. Media Player)
    </body>
    </html>

    <html>
    <head>
    <title>Inserare secventa audio cu embed</title>
    </head>
    <body>
    <embed src="aaa.wav" width="200" height="200">
    </body>
    </html>

    Exista trei formate de fisiere care sunt recomandate pentru utilizarea cu acest marcaj: wav, au si midi. Daca esti
    interesat de fisierele midi iti recomand http://www.ifni.com/ sau http://www.midifarm.com. Atentie insa la
    drepturile de autor!

    Poti vizualiza exemplul de mai sus in browserul tau aici.

    Marcajul embed are urmatoarele atribute:

    • autostart - daca este setat true, fisierul audio va fi rulat imediat dupa incarcarea paginii HTML
    • hidden - daca este setat true, interfata pentru rularea fisierului audio nu va fi afisata
    • loop - daca este setat true, secventa audio va fi reluata la "nesfarsit"
    • volume - seteaza volumul cu care va fi redata secventa audio

    <html>
    <head>
    <title>Inserare secventa audio cu embed</title>
    </head>
    <body>
    <embed src="aaa.wav" width="200" height="200"
    autostart=false hidden=false loop=true volume=50>
    </body>
    </html>

    Poti vizualiza exemplul de mai sus in browserul tau aici.


    Marcajul bgsound va rula o secventa audio in fundal. Este o extensie Microsoft, deci va functiona numai in
    Internet Explorer.

    <html>
    <head>
    <title>Inserare secventa audio cu bgsound</title>
    </head>
    <body>
    <bgsound src="aaa.wav" loop=10>
    </body>
    </html>

    In HTML 4 embed este inlocuit de marcajul object care va fi insa prezentat in ultima lectie.

    1. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online

    2. Cauta pe Internet o secventa audio in format midi. Realizeaza apoi o pagina HTML (folosind
    NotePad) care sa includa aceasta secventa audio. Modifica valorile atributelor marcajului
    <embed> si vizualizeaza pagina in browser.

    S-ar putea să vă placă și