Sunteți pe pagina 1din 10

A dugarea im agin ilor la o pagin W eb

A folos i im a ginile n p ag in ile w eb, pentru a i a le fa c e m a i in te re s a n te le nviora

C re a re a im p a c tu lu i v iz u a l
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.

A d u g a re a im a g in ilo r
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="exempludescription.html"> <IMG src="exemplu.gif" alt="[O mica poza nu stric]" longdesc="exempludescription.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

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>

C o n tro lu l m rim ii im a g in ii
C o ntrolai m rim ea im agin ii pe p agin cu atribu te sim p le 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.
<IM src="hypatia.gif" alt= ypatia G "[H longdesc="hypatia-description.htm l"> as a young w an]" om height="243" w idth="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

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"

n c a d ra re a im a g in ilo r c u te x t
F orm a tarea paginilor astfel ca textul s ncadreze im agin ile 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).
<IM src="hypatia2.gif" alt=" G [Hypatia as a young wom an]" description.html"> height="243" width="200" align="right"> longdesc="hypatia-

U tiliz a re a im a g in ilo r c a le g tu ri
T ra nsform area im agin ilor n legtu ri
1. Includei imaginea n pagina dumneavoastr.
<IM src="alslogo.gif" alt="[ALSLogo]"> G

2. Transformai o imagine n legtur pur i simplu incluznd-o n coninutul descriptiv al etichetei ancor (<A>).
<A href = "developers.htm IM src="logo.gif " a l"X G longdesc="als-des cription.htm l" border="0" height="100" w idth="100" align="left"x/A > lt= L L o]" "[A S og

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.
<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
<HTML> <HEAD> <TITLE>Aristotelian Logical Systems, Ltd.</TITLE> </HEAD> <BODY>

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>

A fi a re a im a g in ilo r m in ia tu ra le p e n tru a m bp u ld ein c rc a re tim u n t


U tiliza rea im a ginilo r m in ia tu ra le
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 "X G src="hypatia-thum IM b.gif " Im age]" alt=" [H ypatia Thum bnail

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>

S im u la re a fo n tu rilo r e x o tic e c u a ju to ru l g ra fic ii


In clud erea n situl du m neavoastr a fonturilor d in afara sistem u lu i ca im agin i 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.
<IM src="greek-font.gif" alt=" G alt="[Limba greaca]"> [Greek saying] "> <IM src="greek-font.gif" G

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.

U tiliz a re a e fic ie n t a im a g in ilo r d e fu n d a l


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.

U tiliz a re a im a g in ilo r p e n tru a fu rn iz a re p e re v iz u a le


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>

G s ire a u n e i m e ta fo re v iz u a le a d e c v a te
C rea re a h rilo r im a g in e
1. ncepnd prin ncrcarea fiierului grafic folosit ca hart imagine. Specificai numele coordonatelor care se folosesc, cu atributul usemap.
<IM src="09fig01-kansasfarm G -1913.jpg" alt="[B unicul intr-o echipa de treierat in K ansas, 1913]" longdesc="kansasfarm -1913.htm l" usem "#kansasfarm w ap= " idth="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>


<A EAshape="form suprafeei" coords="lista coordonate" R a 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.

A tra g e i a te n ia c u a n im a ii
A d u g a re a d e m i ca re i d e via p rin in clu d e re a an im aiilo r G IF
1. Creai animaii GIF sau mprumutai-le din Internet. 2. Adugai-le paginilor cu eticheta de imagine, ca nite imagini obinuite.
<IM src="kitty.gif" height="" width="" alt=" G [Kitty] >

<HTML><BODY>< G src "k .g IM = itty if </BODY> </HTML>

"

h ig t= w th "" a "[K ] e h "" id = lt= itty

>

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.

F o lo s ire a fi ie re lo r .W A V s i .A U
A d u g a re a d e e fe c te s o n o re d e b a z
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" latim e"> ... coninut alternativ pentru brow serele care nu accepta obiecte, o eticheta im bricata pentru obiecte... < B C> /O JE T vridth= " eventual

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.
<PARA nam M e="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.

<OBJECT data="greetings.wav" type="audio/wav" width="145" name="autostart" value="true">

height="60"XPARAM

</OBJECT>

3. Oferii coninut sonor alternativ la nivelul cel mai central de imbricare al etichetei pentru obiecte, cu eticheta <embed>.
<EM BED src=" suneturl" type=" tipmime" hidden="valoare" autostart="autovaloare"> height="inaltim e" width="latime"

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 sau sunete... <NOEMBED> obiecte nglobate

5.

Oferii coninut sonor alternativ pentru Microsoft Internet Explorer cu eticheta <bgsound>.
loop="numar">

<BGSOUND src="suneturl"

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. T ip u ri IM E u d io d e b a z p e n tru ___________________________________________ M a sunet
.wav .wav .au .aiff .aiff audio/wav audio/x-wav audio/basic audio/aiff audio/x-aiff Platforme Windows Platforme Windows Platforme UNIX i altele Platforme Macintosh Platforme Macintosh

A d u g a re a d e m u z ic n p a g in ii c u fi ie re d e tip M ID I
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"> </O JEC B T>

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" height="60"> <NOEMBED> <P> [In fundal se deruleaz o muzica . ]<BR> <A href="homesweethome. mid">Get the MIDI file!</AXBR> </NOEM BED> </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.

C u ms fo lo s imu ic k T im ie A V I p e n tr u a a d u g a e le m e n te v id e o Q
A d u g a re a d e e le m e n te v id e o c u Q u ic k T im e s a u c u A V I
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
<O BJECT 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"> </O JE T B C>

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"> < B C> /O JE T

3. Oferii coninut video la cel mai adnc nivel de imbricare al etichetei <object>, cu eticheta <EMBED>.
<ME E BD src-"videourl" type="video/tipm e" height="inalti/neirag" im hidden=" valoare" autostart="autovaloare" controller=" valoare" w idth="la tim g" eim 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" h e i g h t = " 2 00 " > <NOEMBED> <P>
[Imagini video sentimentale] <R B> <A href ="homesweethome.avi">Get the AVI file!</A> < R B> </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.
T ip u ri M IM E v idTip uri M IM E vid eo pentru film e eo .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

Includerea m iniaplicaiilor Java


S n eleg em ce e ste J a v a 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.

A d u g a re a d e m in ia p lic a ii J a v a la p a g in ile W e b
A d u g are a d e m icare i in teractivitate r s e rv e relu g -in o s tis ito a re f situ lu i p c
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" nam e="im age" value="/im ages/sfskyline.jpg"> width="251" height="260"> <PARAM

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" nam e="im age" value="/im ages/sf skyline .jpg"> width="251" height="260"> <PARAM

<OBJECT classid="/iujneclasa" codetype=" tipcod" codebase="bazaurlpentrucod" azchive="listacodarhiva" data="da teurl" type=" tipmime" height=" inaltimeimg" width="la timeimg" 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

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="da teurl"

type=" tipmime" height="inalti.m g" width="latim g" standby=" eim eim 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.