Adugarea imaginilor la o pagin Web

A folosi imaginile n paginile web, pentru a le nviora i a le face mai interesante

Crearea impactului vizual

Cu toate c nu fiecare pagin are nevoie de o imagine, impactul vizual i aspectul
sunt att de intrinseci culturii noastre, nct noi, uneori, vorbim despre caracterul, firea i
comportamentul n public ale unei persoane ca despre imaginea acesteia. Pentru ca o
pagin s capete personalitate, deseori are nevoie de o poz sau dou pentru a v informa
despre ce este vorba i ce fel de informaii putei gsi n ea.
Deci un sit despre maini de curse ar putea prezenta o fotografie a unui pilot lund
o curb, sau un sit Web despre paradisul grdinarului ar putea afia fructele unei recolte
generoase. Nu prea avem n Web moduri de a ne adresa simurilor noastre, n afar de vz,
cel mai uor, i auz, ntr-o msur mai mic, aa c trebuie s suprancrcm aceste simuri
cu mult mai multe informaii dect n viaa obinuit.
Experiena pe care o tria Marcel Proust nvluit de aroma cuptorului lui Madeline
este ceva ce noi nu vom putea niciodat resimi n Web; cldura soarelui de var pe umeri
i mireasma de pmnt proaspt spat sunt lucruri pe care nu putem dect s ni le
nchipuim prin intermediul cuvintelor i al imaginilor, ca indicii.
Dac cuvintele nu spun o poveste, este improbabil ca imaginile s vorbeasc de la
sine, dar dup cum gesturile i expresiile fac diferena dintre un maestru povestitor i un
amator, tot aa i imaginile pe care le folosim pentru a crea atmosfera unei pagini pot fi
hotrtoare n a departaja o experien anodin de o senzaie antrenant de participare
deplin.

Adugarea imaginilor
Adugarea imaginilor la o pagin web
1. Adugai imagini la paginile web cu eticheta pentru imagini <img>. Folosind atributul
src pentru a indica fiierul imagine.
<IMG src="exemplu.gif">
2. Folosii atributele alt i longdesc pentru a prezenta informaii 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 stric]" longdesc="exemplu-
description.html">

Pont de folosire rapid: Sintaxa de etichet

<IMG src="imgurl" height="imginaltime" width="imglatime" alt="alttext"
longdesc="alttexturl" hspace="banda marginala" vspace= "banda marginala"
border="margine de legtura" align="aliniere"> , unde imgurl reprezint adresa sursei
imaginii; imginaltime reprezint nlimea imaginii n pixeli; imglatime este limea
imaginii n pixeli; alttext reprezint o scurt descriere a imaginii - semnificativ sau nul,
dac poate fi ignorat de browserele nevizuale; aittexturl este adresa unei descrieri mai
detaliate a imaginii. Benzile marginale reprezint spaiul liber pe vertical i orizontal din
jurul imaginilor; margine de legtura reprezint limea marginii n pixeli cnd imaginea
este folosit ca legtur; i aliniere ia valorile left, right, top, middle sau bottom i modific
poziia relativ a textului i imaginilor din pagin.

S ncepem prin adugarea unei imagini la pagina noastr cu Hypatia, un portret al

filozoafei aa cum arta ea probabil n tineree. Ne despart de timpurile ei attea secole i
kilometri nct chiar i o idee vag despre cine a fost poate s ne-o apropie. Ne putem da
1
seama c a fost ca noi, ca surorile noastre, ca mamele noastre; a crescut cu sperane i
ambiii i totui soarta i-a fost umbrit, dup cum i pare i faa, trist i contemplativ, nu
rznd nsufleit, cu toate c tnra femeie pe care o vedem a cunoscut desigur i zile de
bucurie.

Toate imaginile au de obicei aceeai etichet, eticheta de imagine, <img>, cu

atributul obligatoriu src pentru a-i spune browserului de unde s ia imaginea propriu-zis.
n plus, aproape toate imaginile ar trebui s aib un scurt text descriptiv n atributul alt,
pentru a face pagina mai uor accesibil celor cu deficiene de vedere sau celor care pur si
simplu prefer s navigheze cu un browser audio, poate cineva care se plimb cu maina pe
autostrad. Dac imaginea este pur decorativ, aceast valoare trebuie stabilit explicit ca
nul scriind alt="". Acestea sunt singurele atribute care sunt cu adevrat pentru orice
imagine.

Versiunea HTML 4.0 a adugat atributul longdesc, care v permite s introducei o

adres URL la care s mearg browserul pentru mai multe informaii despre o imagine. Ai
putea folosi aceast capacitate pentru a oferi o descriere narativ complet sau chiar o list
cu capitole despre istoria imaginii, originea ei i o scurt biografie a artistului.
S ncepem, completnd cu rbdare pagina cu un titlu adecvat i de asemenea cu
imaginea pe care dorim s o folosim. Vom evoca imaginea cu eticheta <img>, adugnd
atributul source, ca i cele dou atribute descriptive.

Exemplu:

<HTML>
<HEAD>
<TITLE>Hypatia: un om de tiina remarcabil</TITLE> </HEAD> <BODY> <IMG
src="hypatia.gif" alt="[Hypatia tnra]"
longdesc="hypatia-description.html"> <Hl>Hypatia</Hl>
<H2>O relaie personala cu istoria</H2> <P>
<STRONG>Hypatia</STRONG> este deseori pictata in <IXDFN title="tunica">tribon</DFNx/I>,
un vemnt al clasei muncitoare srace fcut din materiale de proasta calitate, care era inuta tradiionala a
filosofilor si a asceilor. Insa aceasta este in multe privine o idee <EM>foarte</EM> controversata si unii
savani cred ca ea ar fi fost mbrcata in stilul femeilor din inalta societate greaca din Alexandria romana
trzie, inca foarte mult influenat de Grecia elenistica, cu <!><DFN title="camasa fr
maneci">chiton</DFNX/I> tipic si <!><DFN title="roba pana la glezne"> peplos </DFNX/I> ncins
cu bru cu <!><DFN title="mantie drapata">himation</DFN> </I>. Din acest punct de vedere,
mbrcmintea de calitate proasta in care este prezentata constituie o minciuna pioasa a admiratorilor ei
de mai trziu, pentru a slavi si a da ca exemplu cultura, altruismul si puritatea ei. Dup toate
sursele credibile, ea a rmas toata viata fecioara si si-a dedicat viata tiinei si matematicii; adepii ei
au fost muli si si-au proclamat cu trie admiraia de-a lungul secolelor, din ziua in care a fost
ucisa in anul 415, <ABBR title="dupa Hristos"> d.Hr. </ABBR>. </BODY> </HTML>

Controlul mrimii imaginii

Controlai mrimea imaginii pe pagin cu atribute simple
1. Folosind un program de grafic pentru a determina mrimea i limea imaginii.
2. Folosind atributele height (nlime) i width (lime) pentru a controla mrimea imaginii
pe pagin.
<IMG src="hypatia.gif" alt="[Hypatia as a young woman]"
longdesc="hypatia-description.html"> height="243" width="200"

Acum atributele vin multe i cu furie i majoritatea imaginilor au nevoie de aproape

toate, deoarece imaginile se numr printre cele mai complexe obiecte de pe pagin si trebuie
mult migal pentru a obine cele mai bune rezultate. Vom face mai multe ncercri cu eticheta
<img> pentru a gsi mrimea cea mai potrivit pentru imagine nainte de a o modifica pe
2
aceasta, astfel c voi meniona doar liniile cu eticheta <img>, pentru a economisi spaiu. Mai
nti vom reduce dimensiunile imaginii prin micorarea numerelor de la atributele height i
width. Browserul va ignora mrimea implicit a imaginii i o va fora s se ncadreze n noile
dimensiuni pe care i le dm. Puterea suprem. Luai aminte c aceasta este o metod
temporar, doar pentru a vedea cum va arta imaginea la o dimensiune mai mic. n versiunea
noastr definitiv vom redimensiona imaginea pentru a nu pierde mai mult timp dect necesar
la ncrcarea ei.

<IMG src="hypatia.gif" alt="[Hypatia as a young woman]"

longdesc="hypatia-description.html"> height="243" width="200"

ncadrarea imaginilor cu text

Formatarea paginilor astfel ca textul s ncadreze imaginile
1. Se determin unde se dorete plasarea textul n raport cu imaginea.
2. Folosind atributul align pentru a muta imaginea n raport cu textul la stnga (left), la
dreapta (right), sus (top), la mijloc (middle) sau jos (bottom).
<IMG src="hypatia2.gif" alt="[Hypatia as a young woman]" longdesc="hypatia-
description.html"> height="243" width="200" align="right">

Utilizarea imaginilor ca legturi

Transformarea imaginilor n legturi
1. Includei imaginea n pagina dumneavoastr.
<IMG src="alslogo.gif" alt="[ALSLogo]">
2. Transformai o imagine n legtur pur i simplu incluznd-o n coninutul descriptiv al etichetei
ancor (<A>).
<A href ="developers.html"XIMG src="logo.gif " alt="[ALS Logo]"
longdesc="als-description.html" border="0"
height="100" width="100" align="left"x/A>

Dup introducerea unei seciuni antet i a unui titlu pe pagin, ncadram imaginea
emblemei ntr-o etichet ancor. Eticheta imagine se va afla n interiorul etichetei ancor, exact
ca n legturile de text pe care le-am fcut mai devreme, i putem s le folosim pe amndou.
Ca ntotdeauna cnd este vorba de imagini, dar n special acelea care fac ceva, am folosit text
alternativ clar pentru a informa pe aceia care folosesc browsere nevizuale despre coninutul
fotografiilor, mi place s pun textul alternativ n paranteze ptrate - cu toate c numai eu fac
asta - deoarece n acest mod difer de textul obinuit, dac este vizualizat cu browserul Lynx.
<HTML> <HEAD>
<TITLE>Aristotelian Logical Systems, Ltd.</TITLE> </HEAD> <BODY>
<A href="developers.html"><IMG src="alslogo.gif" alt="[ALS Logo]"
longdesc="als-description.html" border="0" height="100" width="100"
align="left"X/A> <Hl>Aristotelian Logical Systems, Ltd.</Hl> <BR clear="left">
<BR> <P>
<STRONG>ALS</STRONG> is a world leader in machine translation software and
offers the most comprehensive suite of translation engines with the best
recognition of idiomatic constructs in the known universe. <P>
We want to help you, our present customers, as well as others interested
in seeing how ALS products can power up international businesses as well as
improve communications between the far-flung offices of global and trans-national
businesses. <P>
Explore our site: <DL>
<DTXDDXA href="alsfaq.html">Company Fact Sheet</A> <DTXDDXA
href="alsprods.html">Product
Information</A> <DTXDDXA href="alssales.html">Contact Sales and
Marketing</A> <DTXDDXA href="alsitpstatus.html">Intelligent
Translation Prototype Product Status</A> <DTXDDXA
href="alssupport.html">24-hour by 7-day
Customer Support</A> <DTXDDXA href="alshistory.html">The History of
3
 Machine Translation</A> </DL> <ADDRESS>
Contact the Webmaster:
<A href="mailto;Webmaster@ALSLtd.com"><STRONG>
Webmaster@Ltd.geninet.ro.com</STRONGx/A> </ADDRESS> </BODY> </HTML>

Afiarea imaginilor miniaturale pentru a mbunti timpul de ncrcare

Utilizarea imaginilor miniaturale
1. Folosind un editor de imagine, micorai dimensiunile imaginilor mari i salvai-le separat
ca poze miniaturi.
2. Plasai aceste poze miniaturale pe paginile dumneavoastr Web i legai-le la paginile care
conin versiunea mai mare a pozei.
<A href ="hypatia.gif "XIMG src="hypatia-thumb.gif " alt="[Hypatia Thumbnail
Image]"
longdesc="hypatia-description.html" border="2"
height="49" width="40"x/A>
<A href="hypatia.gif "XIMG src="hypatia-thumb.gif"
alt="[Imaginea miniatura a Hypatiei]"
longdesc="hypatia-description.html" horder="2"
height="49" width="40"x/A>

Culminarea logic a acestor tehnici de navigare este s creai o pictogram care se refer
la o versiune mai mare a fotografiei propriu-zise. Acest fel de miniatur de autoreferire se
numete (N.R. - n limba englez) thumbnail (unghia de la degetul mare) deoarece este aa de
mic nct putei s o pictai pe unghia de la degetul mare al minii.
Nu vom face mare caz din asta, deoarece tii deja s navigai cu pictograme. Iat un
exemplu simplu care folosete celebra noastr imagine a Hypatiei. Am ales s ncarc imaginea
de tip GIF direct, dar puteam la fel de bine s ncarc o pagin HTML cu informaii despre
portret.
<HEAD>
<TITLE>Hypatia marita</TITLE> </HEAD> <BODY>
<A href="hypatia. gif "XIMG src="hypatia-thumb. gif" alt="[Hypatia Thumbnail
Image]"
longdesc="hypatia-description.html" border="2" height="49" width="40"x/A>
<Hl>Legatura ctre portretul mare al Hypatiei</Hl> </BODY> </HTML>

Simularea fonturilor exotice cu ajutorul graficii

Includerea n situl dumneavoastr a fonturilor din afara sistemului ca imagini grafice
1. Folosind un program de pictur sau desen, creai cu instrumentul de text textul n fontul
dorit i salvnd ca grafic.
2. Folosind eticheta <img> pentru a ncrca grafica n pagina Web.
<IMG src="greek-font.gif" alt="[Greek saying]"> <IMG src="greek-font.gif"
alt="[Limba greaca]">

Procedura exact de realizare a acestui lucru variaz pentru diferitele pachete de

grafic, dar n general va trebui s avei avei instalat pe calculator fontul pe care dorii s l
folosii, s creai un nou fiier de grafic destul de mare pentru ct text scriei i ce
dimensiuni i stabilii, s folosii programul de pictare a textului - sau cum se cheam
programul dumneavoastr - pentru a insera textul (i s sperm c tim ce facem) i apoi s
aranjai imaginea de care este nevoie.
Unul dintre lucrurile pe care adesea va trebui s le facei este s fixai distana dintre
litere, un proces numit spaiere selectiv (kerning), deoarece eliminai colurile dreptunghiului
alb care ncadreaz o liter. Candidaii tipici pentru spaierea selectiv sunt W i A, A i V i
orice alt combinaie de litere care arat cam prea deprtate n comparaie cu restul literelor.

4
Utilizarea eficient a imaginilor de fundal
1. Pentru a aduga o imagine de fundal la pagina dumneavoastr folosii atributul
background (fundal) al etichetei <BODY>.
<BODY background="parchment.jpeg">
2. De obicei este bine s folosii att atributul background ct i atributul bgcolor,
deoarece alegerea unei culori de fond apropiate de tonurile generale din imagine amelioreaz
aspectul unei pagini la ncrcare i de asemenea ajut la prevenirea problemelor la browserele
care nu ncarc imagini. Mai nti se va afia culoarea de fond i apoi se va suprapune
imaginea de fond peste ea.
<BODY background="parchment.jpeg" bgcolor="F7F!F2">

Pont de folosire rapid: Sintaxa de etichet

<BODY background ="imgurl" bgcolor ="culoare">
unde imguri este adresa sursei imaginii i culoare este o culoare apropiat de imagine pentru a asigura
o tranziie mai lin n cursul ncrcrii imaginii de fundal.

Utilizarea imaginilor pentru a furniza repere vizuale

Codul de mai jos ilustreaz conceptul de introducere a unor semne pentru a ajuta
vizitatorii s se orienteze n situl grupului de lucru. Am pus totul laolalt pentru a economisi
spaiu, dar fiecare emblem i antet apar n principiu n partea de sus a fiecrei pagini de care
aparine. Micile bare de jos se ncarc foarte eficient i, cnd se combin cu emblema
principal, dau o frumoas continuitate ntre pagini, ca i diferenieri ntre seciuni.
<HTML> <HEAD>
<TITLE>Aristotelian Logical Systems, Ltd.</TITLE> </HEAD> <BODY
background="parchment.jpeg" bgcolor?="F7FlF2">
<IMG src="alslogo.gif" alt="[ALS Logo]"
longdesc="als-description.html" border="0" height="100" width="100" align="left">
<H1 align="center">ALS Support</Hl> <BR clear="left"> <IMG src="alssupport.gif"
alt="[ALS Support]"
longdesc="als-description.html" border="0"
height="20" width="100" align="left"> <BR clear="left"> <BR> <HR> <P> <IMG
src="alslogo.gif" alt="[ALS Logo]"
longdesc="als-description.html" border="0"
height="100" width="100" align="left"> <H1 align="center">Machine Translation
History</Hl> <BR clear="left"> <IMG src="alshistory.gif" alt="[ALS History]"
longdesc="als-description.html" border="0"
height="20" width="100" align="left"> <BR clear="left"> <BR> <HR> <P> <IMG
src="alslogo.gif" alt="[ALS Logo]"
longdesc="als-description.html" border="0"
height="100" width="100" align="left"> <H1 align="center">ALS Special
Projects</Hl> <BR clear="left"> <IMG src="alsprojects.gif" alt="[ALS Projects]"
longdesc="als-description.html" border="0"
height="20" width="100" align="left"> <BR clear="left"> <BR> <HR> <P> <IMG
src="alslogo.gif" alt="[ALS Logo]"
longdesc="als-description.html" border="0"
height="100" width="100" align="left"x/A>
<H1> align="center">Aristotelian Logical Systems, Ltd.</Hl> <BR clear="left">
<BR> <P>
<ADDRESS> Contact the Webmaster:
<A href="mailto;Webmaster@LTD.geniusnet.ro"><STRONG>
Webmaster@Ltd.geniusnet.ro</STRONGX/A> </ADDRESS> </BODY> </HTML>

5
Gsirea unei metafore vizuale adecvate
Crearea hrilor imagine
1. ncepnd prin ncrcarea fiierului grafic folosit ca hart imagine. Specificai numele coordonatelor
care se folosesc, cu atributul usemap.
<IMG src="09fig01-kansasfarm-1913.jpg" alt="[Bunicul intr-o
echipa de treierat in Kansas, 1913]"
longdesc="kansasfarm-1913.html"
usemap="#kansasfarm" width="450" height="321" border="0">
2. Definii harta cu o etichet hart, <map>. Folosii atributul name pentru a defini harta
pentru referin. Numele trebuie s corespund atributului usemap din eticheta <img>, cu
excepia simbolului #.
<MAP name="kansasfarm"X/MAP>
3. Folosii programul dumneavoastr de grafic pentru a identifica coordonatele imaginii.
Reinei aceste coordonate pentru a le folosi n cadrul atributului coords din eticheta <area>.
4. Identificai cu etichetele <area> zonele de pe harta imagine incluznd un atribut nohref
pentru a acoperi ntreaga suprafa i a fi anulat de zonele alese.
<IMG src="image.jpg" usemap="imagemap"> <MAP name="iinagemap">
<AREA shape="rect" coords="0, O, 50, 50"
href="firs tarea.html">
<AREA shape="rect" coords="60, O, 80, 50"
href="seconda rea.html"> </MAP>

<AREA shape="forma suprafeei" coords="lista coordonate" href="url harta" nohref>

unde forma suprafeei poate fi circ, rect sau poly; lista coordonate este O list de coordonate
separate prin virgul care definesc forma; uri harta este destinaia legturii reprezentate de hart; i
nohref este o valoare implicit care nu are nici un efect.

Atragei atenia cu animaii

Adugarea de micare i de via prin includerea animaiilor GIF
1. Creai animaii GIF sau mprumutai-le din Internet.
2. Adugai-le paginilor cu eticheta de imagine, ca nite imagini obinuite.
<IMG src="kitty.gif" height="" width="" alt="[Kitty]>

<HTML> <BODY> <IMG src="kitty.gif" height="" width="" alt="[Kitty]>

</BODY> </HTML>
Afiarea nu este nc ceea ce-i dorete ea, dar se apropie. Animaia cu pisicua atrage atenia, dar nu prea
are legtur cu subiectul. Este doar un kitsch ntmpltor care distrage atenia de la mesajul de baz. Dac
subiectul paginii ar fi fost Secrete pe care pisica dumneavoastr ar dori s le tii", ar fi foarte potrivit, dar
avnd n vedere circumstanele, Bess rezist tentaiei de a folosi imaginea, chiar dac pisicua este foarte
drgu.

Folosirea fiierelor .WAV si .AU

Adugarea de efecte sonore de baz
1. Adugai sunete cu eticheta pentru obiecte, <object>, care reprezint modul general de
includere a coninutului non-text. Avem la dispoziie mai multe opiuni prin imbricarea
etichetelor pentru obiecte.
<OBJECT data="suneturl" type="audio/tipmi/ne" height="inaJtiffle" vridth="
latime">. . . coninut alternativ pentru browserele care nu accepta obiecte, eventual
o eticheta imbricata pentru obiecte... </OBJECT>
unde suneturl este adresa URL a fiierului de sunet; tipmime este unul dintre tipurile MIME audio;
iar inaltime i lime sunt valorile de anulare ale nlimii i limii imaginii implicite a cadranului cu
butoane pentru controlul redrii sunetului.
<OBJECT data="greetings.wav" type="audio/wav" width="145" height="60">
2. Adugai un pic de simpuls" cu o etichet <param> imediat dup deschiderea etichetei
pentru obiecte.
<PARAM name="autostart" value="true">
unde name i value sunt valori Netscape care fac ca aplicaia s porneasc singur n loc s se ncarce i
s atepte utilizatorul s o porneasc.
6
<OBJECT data="greetings.wav" type="audio/wav" width="145" height="60"XPARAM
name="autostart" value="true">
</OBJECT>
3. Oferii coninut sonor alternativ la nivelul cel mai central de imbricare al etichetei pentru
obiecte, cu eticheta <embed>.
<EMBED src="suneturl" type="tipmime" height="inaltime" width="latime"
hidden="valoare" autostart="autovaloare">
unde suneturl este adresa URL a fiierului surs de sunet; tipmime este tipul coninutului MIME al
datelor pe care modulul plug-in i le va aduce sau le va conine; inal time i lime sunt mrimile
pentru cadranul cu butoane, dac exist; si autovaloare nu este nul dac dorii ca sunetul s
porneasc automat. Este obligatoriu fie atributul src, fie type, iar height i width se recomand n
afar de cazul n care obiectul nglobat este ascuns. Atributul hidden este opional i controleaz dac
programul de sunet este vizibil; valoare poate fi true sau false.
<OBJECT data="greetings.wav" type="audio/wav" width="145"
height="60">
<PARAM name="autostart" value="true"> <EMBED src="greetings.wav" type="audio/wav"
width="145"
height="60"> </OBJECT>
4. Oferii coninut alternativ pentru browserele care nu accept obiectele sau sunetele
nglobate, cu eticheta <noembed>.
<NOEMBED>...coninut alternativ pentru browserele care nu accepta obiecte nglobate
sau sunete...<NOEMBED>
5. Oferii coninut sonor alternativ pentru Microsoft Internet Explorer cu eticheta <bgsound>.
<BGSOUND src="suneturl" loop="numar">
unde sunaturi este adresa URL a fiierului surs de sunet i numr este numrul de ciclri, dac este
cazul. Valoarea -l spune browserului s cicleze sunetul ncontinuu.
Acest atribut este opional, dar recomandabil, deoarece browserul poate verifica tipul fiierului
ca s vad dac tie ce s fac cu el nainte de a-1 ncrca i astfel economisete timpul pentru utilizatorii
care nu sunt interesai. Celelalte atribute recomandate sunt height i width, dar pe acestea nu le tim
dinainte, deoarece redarea este fcut de ctre un plug-in al browserului. Va trebui s dai valori la
ntmplare, pe ghicite (acestea sunt 145x60). Tabelul 11.1 prezint tipurile MIME de baz pe care s-ar
putea s le accepte browserul dumneavoastr.
Tipuri MIME audio de baz pentru sunet___________________________________________
.wav audio/wav Platforme Windows
.wav audio/x-wav Platforme Windows
.au audio/basic Platforme UNIX i altele
.aiff audio/aiff Platforme Macintosh
.aiff audio/x-aiff Platforme Macintosh

Adugarea de muzic n paginii cu fiiere de tip MIDI

1. Adugai fiiere de tip MIDI (Musical Instrument Digital Interface), care cuprind multe
sunete ntr-un fiier mic. Pot fi oferite mai multe opiuni prin imbricarea etichetelor <objectx
<OBJECT data="homesweethome.mid" width="145" height="60"> </OBJECT>
2. Adugai un mic impuls iniial" cu o etichet <param> imediat dup deschiderea etichetei
DBJECTX
DBJECT data="homesweethome.mid" width="145" height="60">
<PARAM name="autostart" value="true">
</OBJECT>
3. Oferii coninut sonor n cel mai adnc nivel de imbricare al etichetei <OB JECT>, cu
eticheta <embed>.
4. Oferii coninut alternativ pentru browserele care nu accept obiecte sau sunete nglobate,
cu eticheta <noembed>.
5. Oferii coninut sonor pentru Microsoft Internet Explorer cu eticheta <bgsound>.
<OBJECT data="homesweethome.mid" width="145" height="60"> <PARAM name="autostart"
value="true"> <EMBED src="homesweethome.mid" width="145" h e i gh t = " 6 0" > <NOEMBED> <P>
[In fundal se deruleaz o muzica . ]<BR> <A href="homesweethome. mid">Get the MIDI
file!</AXBR> </NOEMBED> </OBJECT> <BGSOUND src="homesweethome.mid">

Un fiier MIDI se folosete exact la fel ca un fiier WAV sau AU, prin includerea sa ntre etichetele
potrivite.
7
Cum s folosim QuickTime i AVI pentru a aduga elemente video
Adugarea de elemente video cu QuickTime sau cu AVI
1. Adugai secvene video unei pagini Web cu aceleai etichete pe care le folosii pentru
fiierele audio, dar atent, fiierele video pot fi uriae! Avei mai multe opiuni prin
imbricarea etichetelor <ob ject>.
Pont de folosire rapid: Sintaxa de etichet
<OBJECT data="videourl" type="video/tipmime" height="inaltimeinig"
width="latimeimg">. . . coninut alternativ pentru browserele care nu accepta obiecte,
eventual o eticheta de obiect imbricata... </OBJECT>
unde videourl este adresa URL a fiierului video; tipmime este unul dintre tipurile MIME video; iar
inaltimeimg i latimeimg sunt valori care anuleaz nlimea i limea implicite ale imaginii.
<OBJECT data="homesweethome.avi" width="300" height="200"> </OBJECT>
2. Adugai un mic impuls iniial" cu o etichet <param> imediat dup deschiderea etichetei
<OBJECT>.
<OBJECT data="homesweethome.avi" width="300" height="200">
<PARAM name="autostart" value="true"> </OBJECT>
3. Oferii coninut video la cel mai adnc nivel de imbricare al etichetei <object>, cu
eticheta <EMBED>.
<EMBED src-"videourl" type="video/tipmime" height="inalti/neirag" width="latimeimg"
hidden="valoare" autostart="autovaloare" controller="valoare" loop="valoare">
unde videourl este adresa URL a fiierului surs video; tipmime este tipul MIME al datelor pe care le
va aduce sau le va conine modulul plug-in; inaltimeimg i latimeimg sunt mrimile pentru afiare,
dac exist; i autovaloare este true dac dorii ca imaginea video s porneasc automat. Este
obligatoriu unul din atributele src sau type, iar height i width sunt recomandate n afar de cazul n
care obiectul nglobat este ascuns. Atributul hidden este opional i controleaz dac programul de
redare video este vizibil; atributul controller regleaz apariia pe ecran a butoanelor de lucru; si loop
controleaz dac secvena video se va repeta sau nu; valoare poate fi true sau false.
<BODY>
<OBJECT data="homesweethome.avi" width="300" height="200">
<PARAM name="autostart" value="true">
<EMBED src="homesweethome.avi" width="300"
height="200"> </OBJECT>
<BGSOUND src="homesweethome.avi"> </BODY>
4. Oferii coninut alternativ pentru browserele care nu accept obiecte sau elemente video
nglobate, cu eticheta <noembed>.
<OBJECT data="homesweethome.avi" width="300" h e i gh t =" 20 0" >
<PARAM name="autostart" value="true"> <EMBED src="homesweethome.avi" width="300"
he i gh t = " 2 00 " > <NOEMBED> <P>
[Imagini video sentimentale] <BR>
<A href="homesweethome.avi">Get the AVI
file!</A> <BR>
</NOEMBED> </OBJECT>
5. Oferii coninut alternativ video pentru Microsoft Internet Explorer cu atributul dynsrc al
etichetei pentru imagine. Acesta v ofer opiunea de a include o imagine static pentru alte
brow sere.

Tipuri MIME video Tipuri MIME video pentru filme

.mpeg video/mpeg Video Motion Picture Experts Group pentru orice platform
.mpg video/mpeg Video Motion Picture Experts Group pentru orice platform
.mpe video/mpeg Video Motion Picture Experts Group pentru orice platform
.mpv video/mpeg Video Motion Picture Experts Group pentru orice platform
.vbs video/mpeg Video Motion Picture Experts Group pentru orice platform
.mpa video/mpeg Video Motion Picture Experts Group pentru orice platform
.mpegv video/mpeg Video Motion Picture Experts Group pentru orice platform
.mov video/quicktime Video QuickTime pentru orice platform
.avi video/avi Video Windows pentru platforme Windows
.avi video/x-msvideo Video Windows pentru platforme Windows

8
 Includerea miniaplicaiilor Java
S nelegem ce este Java
Java reprezint ori cel mai important lucru aprut vreodat n Web, ori cea mai mare
campanie publicitar de la rzboiul Betamax/VHS ncoace - dumneavoastr decidei. Java este
subiectul unor controverse att legale, ct i teoretice, cu toate c principiul su de baz este att
logic, ct i rezonabil. Java ruleaz pe un calculator virtual idealizat, implementat prin software
n loc de hardware, astfel nct poate fi uor emulat pe alte calculatoare. Singura chichi este c
vnztorul sistemului de operare al mainii reale trebuie s fie de acord s furnizeze suport Java.
Java este un standard deschis care, dac toi vnztorii l vor susine cu bun credin,
va nsenina pn la urm c vei putea cumpra aplicaii care s funcioneze direct pe orice
calculator din lume. Ce nseamn exact acest pn la urm" este cu adevrat punctul de
poticnire, deoarece situaia actual este mult mai complex dect ar vrea s recunoasc muli
dintre partizanii programului Java. Standardele contradictorii i implementrile incomplete sau
defectuoase au schimbat promisiunea iniial a viziunii firmei Sun Microsystems din scrie o
dat, ruleaz oriunde" n scrie o dat, testeaz peste tot", dup unii programatori.
Implementrile incorecte ale browserelor duc la riscul ca Java s devin incomod i
enervant pentru utilizatorii dumneavoastr, dac programele nu sunt realizate cu atenie i
izolate pe cteva pagini speciale sau n terenuri de joac" Java, pe care cei crora nu le place
Java pot s le evite.
Printre probleme se numr i browserele care aloc aplicaiilor Java resurse ale
sistemului i nu le mai elibereaz, ceea ce duce, n cel mai ru caz, la prbuiri ale sistemului sau,
n cel mai bun caz, la ncetinirea sa; miniaplicaiile (applets) Java care arunc mesaje de eroare
derutante pe ecranele utilizatorilor, pe care nu le putei controla i nu avei cum s le descoperii
fr o testare exhaustiv; i browserele, sau chiar sisteme, care se blocheaz neateptat n timpul
ncrcrii miniaplicaiilor Java, necesitnd o reiniializare a sistemului pentru a continua lucrul.
Problemele par mai mari pe platforma Windows 95, datorit vechimii sistemului de operare, dar
nici un sistem nu este imun. Versiunile urmtoare ale sistemului Windows poate vor rezolva
unele probleme, dar nu se tie ct de cooperant va fi Microsoft.
Pe de alt parte, Java ar putea reprezenta pn la urm sfritul acelor enervante
module plug-in care nfulec resursele sistemului, ncetinesc lansarea browserelor i n general
fac viaa dificil cnd navigai prin Internet. Dar cea mai bun veste este c putei gsi cu
uurin n Web miniaplicaii Java care pot fi folosite gratuit sau pentru o sum mic de bani,
deci nu trebuie s nvai s programai n limbajul Java.

Adugarea de miniaplicaii Java la paginile Web

Adugarea de micare i interactivitate sitului fr servere plug-in costisitoare
1. Studiai notele de utilizare ale miniaplicaiei Java nainte de a o folosi.
2. Inserai o etichet <ob ject> referitoare la miniaplicaie, mpreun cu toi parametrii pe
care i va necesita miniaplicaia.
<OEJECT classid="lake.class"
align="right" border="0" codebase="/java" width="251" height="260"> <PARAM
name="image" value="/images/sfskyline.jpg">
3. Adugai de asemenea eticheta <applet>, mpreun cu parametrii si, pentru a acoperi ct
mai multe situaii.
<APPLET code="lake.class"
align="right" border="0" codebase="/java" width="251" height="260"> <PARAM
name="image" value="/images/sfskyline.jpg">

<OBJECT classid="/iujneclasa" codetype=" tipcod"

codebase="bazaurlpentrucod" azchive="listacodarhiva" data="dateurl"
type="tipmime" height="inaltimeimg" width="latimeimg" standby="text de afiat cnd
se ncarc miniaplicatia"> ...coninut alternativ pentru browserele care nu
accepta obiecte, eventual o eticheta pentru obiecte imbricata...</OBJECT>
unde numeclasa este numele obiectului; tipcod este tipul MIME al codului; bazaurlpentrucod este

9
adresa de baz unde se afl obiectul; listacodarhiva este o list de arhive separate prin spaiu; da
tauri este adresa URL a unui eventual fiier de date de care are nevoie miniaplicaia; tipmime este
tipul MIME al datelor; iar inaltimeimg i la timeimg sunt valorile care anuleaz nlimea i limea
implicite ale imaginii.
<APPLET code="numeclasa" ob^ect="miniaplicatieseriala"
codebase="bazaurlpentrucod" archive="listacodarhiva" data="dateurl"

type=" tipmime" height="inalti.meimg" width="latimeimg" standby=" text de afiat cnd

se ncarc miniaplicatia" name="nujne"> ...coninut alternativ pentru browserele
care nu accepta obiecte, eventual o eticheta pentru obiecte imbricata...</APPLET>
4. Testnd miniaplicatia folosind ct mai multe browsere, versiuni i sisteme de operare.
Deci, ne trezim cu ceva numit lake.class. Ei bine, o clas este ceea ce programatorii n Java
numesc un program, deci acel lucruor este exact ce ne dorim n directorul n care se afl pagina
noastr. Acum suntem gata s inserm miniaplicatia n pagina noastr.
Pentru imaginea noastr vom alege Palatul Navigaiei a oraului Galai. Plasnd poza dup un lac,
crem impresia Dunrii propriu-zis, efect foarte potrivit att cu subiectul ct i cu pagina, ce delecteaz
totodat privirea i hrnete imaginaia. Iat bucica de cod pe care o vom insera n pagin.

<OBJECT classid="lake.class"
align="right" border="0" codebase="/java" width="251" height="260">
<PARAM name="image" value="/images/sfskyline.jpg"> <APPLET code="lake.class"
align="right" border="0" codebase="/java" width="251" height="260">
<PARAM name="image" value="/images/sfskyline.jpg"> <p align="left"> <table>
<tdalign="center">
<P>
<font size="6">
<font face="Arial, Helvetica">
[Imaginea prezint o imagine a oraului Galati reflectata in Dunare] </font>
</font> </td> </table> </APPLET> </OBJECT>

Acest cod are dou elemente, noua etichet <object> din HTML 4.0 i eticheta mai veche
<applet>, amndou oferind numele clasei (sau al programului), alinierea (dreapta), chenarul (0) i o baz
pentru coduri, un director special n care punem miniaplicaiile noastre Java. Apoi furnizm miniaplicaiei
un parametru care identific imaginea pe care vrem s o folosim, imagine pe care o plasm n alt director
special.

Powered by http://www.referat.ro/
cel mai tare site cu referate

10
Bibliografie :

Utilizare HTML 4 Editura Teora -1999

Totul despre HTML 4 Editura Teora 1999
Internet www.freejavastile.com.

11