Adăugarea imaginilor la o pagină Web

Crearea impactului vizual

Cu toate ca nu fiecare pagina are nevoie de o imagine, impactul vizual si aspectul sunt atat de intrinseci culturii noastre, incat noi, uneori, vorbim despre caracterul, firea si comportamentul in public ale unei persoane ca despre imaginea acesteia. Pentru ca o pagina sa capete personalitate, deseori are nevoie de o poza sau doua pentru a va informa despre ce este vorba si ce fel de informatii puteti gasi in ea.

Deci un sit despre masini de curse ar putea prezenta o fotografie a unui pilot luand o curba, sau un sit Web despre paradisul gradinarului ar putea afisa fructele unei recolte generoase. Nu prea avem in Web moduri de a ne adresa simturilor noastre, in afara de vaz, cel mai usor, si auz, intr-o masura mai mica, asa ca trebuie sa supraincarcam aceste simturi cu mult mai multe informatii decat in viata obisnuita.

Experienta pe care o traia Marcel Proust invaluit de aroma cuptorului lui Madeline este ceva ce noi nu vom putea niciodata resimti in Web; caldura soarelui de vara pe umeri si mireasma de pamant proaspat sapat sunt lucruri pe care nu putem decat sa ni le inchipuim prin intermediul cuvintelor si al imaginilor, ca indicii.

Daca cuvintele nu spun o poveste, este improbabil ca imaginile sa vorbeasca de la sine, dar dupa cum gesturile si expresiile fac diferenta dintre un maestru povestitor si un amator, tot asa si imaginile pe care le folosim pentru a crea atmosfera unei pagini pot fi hotaratoare in a departaja o experienta anodina de o senzatie antrenanta de participare deplina.

Adaugarea imaginilor

Adaugarea imaginilor la o pagina web

1. Adaugati imagini la paginile web cu eticheta pentru imagini <img>. Folosind atributul src pentru a indica fisierul imagine.

<IMG src="exemplu.gif">

2. Folositi atributele alt si longdesc pentru a prezenta informatii suplimentare despre imagine.

<IMG src="exemplu.gif" alt="[Acesta este un exemplu]" longdesc="exemplu-description.html">

<IMG src="exemplu.gif" alt="[O mica poza nu strica]" longdesc="exemplu-description.html">

Pont de folosire rapida: Sintaxa de eticheta

<IMG src="imgurl" height="imginaltime" width="imglatime" alt="alttext" longdesc="alttexturl" hspace="banda marginala" vspace= "banda marginala" border="margine de legatura" align="aliniere"> , unde imgurl reprezinta adresa sursei imaginii; imginaltime reprezinta inaltimea imaginii in pixeli; imglatime este latimea imaginii in pixeli; alttext reprezinta o scurta descriere a imaginii - semnificativa sau nula, daca poate fi ignorata de browserele nevizuale; aittexturl este adresa unei descrieri mai detaliate a imaginii. Benzile marginale reprezinta spatiul liber pe verticala si orizontala din jurul imaginilor; margine de legatura reprezinta latimea marginii in pixeli cand imaginea este folosita ca legatura; si aliniere ia valorile left, right, top, middle sau bottom si modifica pozitia relativa a textului si imaginilor din pagina.

Sa incepem prin adaugarea unei imagini la pagina noastra cu Hypatia, un portret al filozoafei asa cum arata ea probabil in tinerete. Ne despart de timpurile ei atatea secole si kilometri incat chiar si o idee vaga despre cine a fost poate sa ne-o apropie. Ne putem da seama ca a fost ca noi, ca surorile noastre, ca mamele noastre; a crescut cu sperante si ambitii si totusi soarta i-a fost umbrita, dupa cum ii pare si fata, trista si contemplativa, nu razand insufletita, cu toate ca tanara femeie pe care o vedem a cunoscut desigur si zile de bucurie.

Toate imaginile au de obicei aceeasi eticheta, eticheta de imagine, <img>, cu atributul obligatoriu src pentru a-i spune browserului de unde sa ia imaginea propriu-zisa. in plus, aproape toate imaginile ar trebui sa aiba un scurt text descriptiv in atributul alt, pentru a face pagina mai usor accesibila celor cu deficiente de vedere sau celor care pur si simplu prefera sa navigheze cu un browser audio, poate cineva care se plimba cu masina pe autostrada. Daca imaginea este pur decorativa, aceasta valoare trebuie stabilita explicit ca nula scriind alt="". Acestea sunt singurele atribute care sunt cu adevarat pentru orice imagine.

Versiunea HTML 4.0 a adaugat atributul longdesc, care va permite sa introduceti o adresa URL la care sa mearga browserul pentru mai multe informatii despre o imagine. Ati putea folosi aceasta capacitate pentru a oferi o descriere narativa completa sau chiar o lista cu capitole despre istoria imaginii, originea ei si o scurta biografie a artistului.

Sa incepem, completand cu rabdare pagina cu un titlu adecvat si de asemenea cu imaginea pe care dorim sa o folosim. Vom evoca imaginea cu eticheta <img>, adaugand atributul source, ca si cele doua atribute descriptive.

Exemplu:

<HTML>

<HEAD>

<TITLE>Hypatia: un om de stiinta remarcabil</TITLE> </HEAD> <BODY> <IMG src="hypatia.gif" alt="[Hypatia tanara]"

longdesc="hypatia-description.html"> <Hl>Hypatia</Hl>

<H2>O relatie personala cu istoria</H2> <P>

<STRONG>Hypatia</STRONG> este deseori pictata in <IXDFN title="tunica">tribon</DFNx/I>, un vesmant al clasei muncitoare sarace facut din materiale de proasta calitate, care era tinuta traditionala a filosofilor si a ascetilor. Insa aceasta este in multe privinte o idee <EM>foarte</EM> controversata si unii savanti cred ca ea ar fi fost imbracata in stilul femeilor din inalta societate greaca din Alexandria romana tarzie, inca foarte mult influentata de Grecia elenistica, cu <!><DFN title="camasa fara maneci">chiton</DFNX/I> tipic si <!><DFN title="roba pana la glezne"> peplos </DFNX/I> incins cu brau cu <!><DFN title="mantie drapata">himation</DFN> </I>. Din acest punct de vedere, imbracamin?tea de calitate proasta in care este prezentata constituie o minciuna pioasa a admiratorilor ei de mai tarziu, pentru a slavi si a da ca exemplu cultura, altruismul si puritatea ei. Dupa toate sursele credibile, ea a ramas toata viata fecioara si si-a dedicat viata stiintei si matematicii; adeptii ei au fost multi si si-au proclamat cu tarie admiratia de-a lungul secolelor, din ziua in care a fost ucisa in anul 415, <ABBR title="dupa Hristos"> d.Hr. </ABBR>. </BODY> </HTML>

Controlul marimii imaginii

Controlati marimea imaginii pe pagina cu atribute simple

1. Folosind un program de grafica pentru a determina marimea si latimea imaginii.

2. Folosind atributele height (inaltime) si width (latime) pentru a controla marimea imaginii pe pagina.

<IMG src="hypatia.gif" alt="[Hypatia as a young woman]" longdesc="hypatia-description.html"> height="243" width="200"

Acum atributele vin multe si cu furie si majoritatea imaginilor au nevoie de aproape toate, deoarece imaginile se numara printre cele mai complexe obiecte de pe pagina si trebuie multa migala pentru a obtine cele mai bune rezultate. Vom face mai multe incercari cu eticheta <img> pentru a gasi marimea cea mai potrivita pentru imagine inainte de a o modifica pe

Utilizare HTML 4 - Editura Teora -1999

Totul despre HTML 4 -Editura Teora - 1999

Internet - www.freejavastile.com.