s5n23ni
A folosi imaginile in paginile web, pentru a le inviora si a le face mai interesante

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="aAcesta este un exemplui" longdesc="exemplu-description.html">
<IMG src="exemplu.gif" alt="aO mica poza nu stricai" 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="aHypatia tanarai" 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, imbracamintea 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="aHypatia as a young womani" 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 aceasta, astfel ca voi mentiona doar liniile cu eticheta <img>, pentru a economisi spatiu. Mai intai vom reduce dimensiunile imaginii prin micsorarea numerelor de la atributele height si width. Browserul va ignora marimea implicita a imaginii si o va forta sa se incadreze in noile dimensiuni pe care i le dam. Puterea suprema. Luati aminte ca aceasta este o metoda temporara, doar pentru a vedea cum va arata imaginea la o dimensiune mai mica. in versiunea noastra definitiva vom redimensiona imaginea pentru a nu pierde mai mult timp decat necesar la incarcarea ei.

<IMG src="hypatia.gif" alt="aHypatia as a young womani" longdesc="hypatia-description.html"> height="243" width="200"

Incadrarea imaginilor cu text
Formatarea paginilor astfel ca textul sa incadreze imaginile
1. Se determina unde se doreste plasarea textul in raport cu imaginea.
2. Folosind atributul align pentru a muta imaginea in raport cu textul la stanga (left), la dreapta (right), sus (top), la mijloc (middle) sau jos (bottom).

<IMG src="hypatia2.gif" alt="aHypatia as a young womani" longdesc="hypatia-description.html"> height="243" width="200" align="right">

Utilizarea imaginilor ca legaturi
Transformarea imaginilor in legaturi
1. Includeti imaginea in pagina dumneavoastra.
<IMG src="alslogo.gif" alt="aALSLogoi">
2. Transformati o imagine in legatura pur si simplu incluzand-o in continutul descriptiv al etichetei ancora (<A>).
<A href ="developers.html"XIMG src="logo.gif " alt="aALS Logoi" longdesc="als-description.html" border="0" height="100" width="100" align="left"x/A>

Dupa introducerea unei sectiuni antet si a unui titlu pe pagina, incadram imaginea emblemei intr-o eticheta ancora. Eticheta imagine se va afla in interiorul etichetei ancora, exact ca in legaturile de text pe care le-am facut mai devreme, si putem sa le folosim pe amandoua. Ca intotdeauna cand este vorba de imagini, dar in special acelea care fac ceva, am folosit text alternativ clar pentru a informa pe aceia care folosesc browsere nevizuale despre continutul fotografiilor, imi place sa pun textul alternativ in paranteze patrate - cu toate ca numai eu fac asta - deoarece in acest mod difera de textul obisnuit, daca este vizualizat cu browserul Lynx.
<HTML> <HEAD>
<TITLE>Aristotelian Logical Systems, Ltd.</TITLE> </HEAD> <BODY>
<A href="developers.html"><IMG src="alslogo.gif" alt="aALS Logoi" 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
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>

Afisarea imaginilor miniaturale pentru a imbunatati timpul de incarcare
Utilizarea imaginilor miniaturale
1. Folosind un editor de imagine, micsorati dimensiunile imaginilor mari si salvati-le separat ca poze miniaturi.
2. Plasati aceste poze miniaturale pe paginile dumneavoastra Web si legati-le la paginile care contin versiunea mai mare a pozei.
<A href ="hypatia.gif "XIMG src="hypatia-thumb.gif " alt="aHypatia Thumbnail Imagei" longdesc="hypatia-description.html" border="2" height="49" width="40"x/A>
<A href="hypatia.gif "XIMG src="hypatia-thumb.gif" alt="aImaginea miniatura a Hypatieii" longdesc="hypatia-description.html" horder="2" height="49" width="40"x/A>

Culminarea logica a acestor tehnici de navigare este sa creati o pictograma care se refera la o versiune mai mare a fotografiei propriu-zise. Acest fel de miniatura de autoreferire se numeste (N.R. - in limba engleza) thumbnail (unghia de la degetul mare) deoarece este asa de mica incat puteti sa o pictati pe unghia de la degetul mare al mainii.
Nu vom face mare caz din asta, deoarece stiti deja sa navigati cu pictograme. Iata un exemplu simplu care foloseste celebra noastra imagine a Hypatiei. Am ales sa incarc imaginea de tip GIF direct, dar puteam la fel de bine sa incarc o pagina HTML cu informatii despre portret.

<HEAD>
<TITLE>Hypatia marita</TITLE> </HEAD> <BODY>
<A href="hypatia. gif "XIMG src="hypatia-thumb. gif" alt="aHypatia Thumbnail Imagei" longdesc="hypatia-description.html" border="2" height="49" width="40"x/A>
<Hl>Legatura catre portretul mare al Hypatiei</Hl> </BODY> </HTML>

Simularea fonturilor exotice cu ajutorul graficii
Includerea in situl dumneavoastra a fonturilor din afara sistemului ca imagini grafice
1. Folosind un program de pictura sau desen, creati cu instrumentul de text textul in fontul dorit si salvand ca grafica.
2. Folosind eticheta <img> pentru a incarca grafica in pagina Web.
<IMG src="greek-font.gif" alt="aGreek sayingi"> <IMG src="greek-font.gif" alt="aLimba greacai">

Procedura exacta de realizare a acestui lucru variaza pentru diferitele pachete de grafica, dar in general va trebui sa aveti aveti instalat pe calculator fontul pe care doriti sa il folositi, sa creati un nou fisier de grafica destul de mare pentru cat text scrieti si ce dimensiuni ii stabiliti, sa folositi programul de pictare a textului - sau cum se cheama programul dumneavoastra - pentru a insera textul (si sa speram ca stim ce facem) si apoi sa aranjati imaginea de care este nevoie.
Unul dintre lucrurile pe care adesea va trebui sa le faceti este sa fixati distanta dintre litere, un proces numit spatiere selectiva (kerning), deoarece eliminati colturile dreptunghiului alb care incadreaza o litera. Candidatii tipici pentru spatierea selectiva sunt W si A, A si V si orice alta combinatie de litere care arata cam prea departate in comparatie cu restul literelor.

Utilizarea eficienta a imaginilor de fundal
1. Pentru a adauga o imagine de fundal la pagina dumneavoastra folositi atributul background (fundal) al etichetei <BODY>.
<BODY background="parchment.jpeg">
2. De obicei este bine sa folositi atat atributul background cat si atributul bgcolor, deoarece alegerea unei culori de fond apropiate de tonurile generale din imagine amelioreaza aspectul unei pagini la incarcare si de asemenea ajuta la prevenirea problemelor la browserele care nu incarca imagini. Mai intai se va afisa culoarea de fond si apoi se va suprapune imaginea de fond peste ea.
<BODY background="parchment.jpeg" bgcolor="F7F!F2">

Pont de folosire rapida: Sintaxa de eticheta
<BODY background ="imgurl" bgcolor ="culoare"> unde imguri este adresa sursei imaginii si culoare este o culoare apropiata de imagine pentru a asigura o tranzitie mai lina in cursul incarcarii imaginii de fundal.

Utilizarea imaginilor pentru a furniza repere vizuale
Codul de mai jos ilustreaza conceptul de introducere a unor semne pentru a ajuta vizitatorii sa se orienteze in situl grupului de lucru. Am pus totul laolalta pentru a economisi spatiu, dar fiecare emblema si antet apar in principiu in partea de sus a fiecarei pagini de care apartine. Micile bare de jos se incarca foarte eficient si, cand se combina cu emblema principala, dau o frumoasa continuitate intre pagini, ca si diferentieri intre sectiuni.
<HTML> <HEAD>
<TITLE>Aristotelian Logical Systems, Ltd.</TITLE> </HEAD> <BODY background="parchment.jpeg" bgcolor?="F7FlF2">
<IMG src="alslogo.gif" alt="aALS Logoi" 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="aALS Supporti" longdesc="als-description.html" border="0" height="20" width="100" align="left"> <BR clear="left"> <BR> <HR> <P> <IMG src="alslogo.gif" alt="aALS Logoi" 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="aALS Historyi" longdesc="als-description.html" border="0" height="20" width="100" align="left"> <BR clear="left"> <BR> <HR> <P> <IMG src="alslogo.gif" alt="aALS Logoi" 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="aALS Projectsi" longdesc="als-description.html" border="0" height="20" width="100" align="left"> <BR clear="left"> <BR> <HR> <P> <IMG src="alslogo.gif" alt="aALS Logoi" 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>

Gasirea unei metafore vizuale adecvate
Crearea hartilor imagine
1. Incepand prin incarcarea fisierului grafic folosit ca harta imagine. Specificati numele coordonatelor care se folosesc, cu atributul usemap.
<IMG src="09fig01-kansasfarm-1913.jpg" alt="aBunicul intr-o echipa de treierat in Kansas, 1913i" longdesc="kansasfarm-1913.html" usemap="#kansasfarm" width="450" height="321" border="0">
2. Definiti harta cu o eticheta harta, <map>. Folositi atributul name pentru a defini harta pentru referinta. Numele trebuie sa corespunda atributului usemap din eticheta <img>, cu exceptia simbolului #.
<MAP name="kansasfarm"X/MAP>
3. Folositi programul dumneavoastra de grafica pentru a identifica coordonatele imaginii.
Retineti aceste coordonate pentru a le folosi in cadrul atributului coords din eticheta <area>.
4. Identificati cu etichetele <area> zonele de pe harta imagine incluzand un atribut nohref pentru a acoperi intreaga suprafata si a fi anulata 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 suprafetei" coords="lista coordonate" href="url harta" nohref> unde forma suprafetei poate fi circ, rect sau poly; lista coordonate este O lista de coordonate separate prin virgula care definesc forma; uri harta este destinatia legaturii reprezentate de harta; si nohref este o valoare implicita care nu are nici un efect.

Atrageti atentia cu animatii

Adaugarea de miscare si de viata prin includerea animatiilor GIF
1. Creati animatii GIF sau imprumutati-le din Internet.
2. Adaugati-le paginilor cu eticheta de imagine, ca niste imagini obisnuite.
<IMG src="kitty.gif" height="" width="" alt="aKittyi>

<HTML> <BODY> <IMG src="kitty.gif" height="" width="" alt="aKittyi>
</BODY> </HTML>
Afisarea nu este inca ceea ce-si doreste ea, dar se apropie. Animatia cu pisicuta atrage atentia, dar nu prea are legatura cu subiectul. Este doar un kitsch intamplator care distrage atentia de la mesajul de baza. Daca subiectul paginii ar fi fost „Secrete pe care pisica dumneavoastra ar dori sa le stiti", ar fi foarte potrivit, dar avand in vedere circumstantele, Bess rezista tentatiei de a folosi imaginea, chiar daca pisicuta este foarte draguta.

Folosirea fisierelor .WAV si .AU
Adaugarea de efecte sonore de baza
1. Adaugati sunete cu eticheta pentru obiecte, <object>, care reprezinta modul general de includere a continutului non-text. Avem la dispozitie mai multe optiuni prin imbricarea etichetelor pentru obiecte.
<OBJECT data="suneturl" type="audio/tipmi/ne" height="inaJtiffle" vridth=" latime">... continut alternativ pentru browserele care nu accepta obiecte, eventual o eticheta imbricata pentru obiecte... </OBJECT> unde suneturl este adresa URL a fisierului de sunet; tipmime este unul dintre tipurile MIME audio; iar inaltime si latime sunt valorile de anulare ale inaltimii si latimii imaginii implicite a cadranului cu butoane pentru controlul redarii sunetului.
<OBJECT data="greetings.wav" type="audio/wav" width="145" height="60">
2. Adaugati un pic de „simpuls" cu o eticheta <param> imediat dupa deschiderea etichetei pentru obiecte.
<PARAM name="autostart" value="true"> unde name si value sunt valori Netscape care fac ca aplicatia sa porneasca singura in loc sa se incarce si sa astepte utilizatorul sa o porneasca.
<OBJECT data="greetings.wav" type="audio/wav" width="145" height="60"XPARAM name="autostart" value="true">
</OBJECT>
3. Oferiti continut 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 fisierului sursa de sunet; tipmime este tipul continutului MIME al datelor pe care modulul plug-in si le va aduce sau le va contine; inal time si latime sunt marimile pentru cadranul cu butoane, daca exista; si autovaloare nu este nula daca doriti ca sunetul sa porneasca automat. Este obligatoriu fie atributul src, fie type, iar height si width se recomanda in afara de cazul in care obiectul inglobat este ascuns. Atributul hidden este optional si controleaza daca 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. Oferiti continut alternativ pentru browserele care nu accepta obiectele sau sunetele
inglobate, cu eticheta <noembed>.
<NOEMBED>...continut alternativ pentru browserele care nu accepta obiecte inglobate sau sunete...<NOEMBED>
5. Oferiti continut sonor alternativ pentru Microsoft Internet Explorer cu eticheta <bgsound>.
<BGSOUND src="suneturl" loop="numar"> unde sunaturi este adresa URL a fisierului sursa de sunet si numar este numarul de ciclari, daca este cazul. Valoarea -l spune browserului sa cicleze sunetul incontinuu.
Acest atribut este optional, dar recomandabil, deoarece browserul poate verifica tipul fisierului ca sa vada daca stie ce sa faca cu el inainte de a-1 incarca si astfel economiseste timpul pentru utilizatorii care nu sunt interesati. Celelalte atribute recomandate sunt height si width, dar pe acestea nu le stim dinainte, deoarece redarea este facuta de catre un plug-in al browserului. Va trebui sa dati valori la intamplare, pe ghicite (acestea sunt 145x60). Tabelul 11.1 prezinta tipurile MIME de baza pe care s-ar putea sa le accepte browserul dumneavoastra.
Tipuri MIME audio de baza pentru sunet
.wav audio/wav Platforme Windows
.wav audio/x-wav Platforme Windows
.au audio/basic Platforme UNIX si altele
.aiff audio/aiff Platforme Macintosh
.aiff audio/x-aiff Platforme Macintosh

Adaugarea de muzica in paginii cu fisiere de tip MIDI
1. Adaugati fisiere de tip MIDI (Musical Instrument Digital Interface), care cuprind multe sunete intr-un fisier mic. Pot fi oferite mai multe optiuni prin imbricarea etichetelor <objectx
<OBJECT data="homesweethome.mid" width="145" height="60"> </OBJECT>
2. Adaugati un mic „impuls initial" cu o eticheta <param> imediat dupa deschiderea etichetei
«DBJECTX
«DBJECT data="homesweethome.mid" width="145" height="60">
<PARAM name="autostart" value="true">
</OBJECT>
3. Oferiti continut sonor in cel mai adanc nivel de imbricare al etichetei <OB JECT>, cu eticheta <embed>.
4. Oferiti continut alternativ pentru browserele care nu accepta obiecte sau sunete inglobate, cu eticheta <noembed>.
5. Oferiti continut 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>
aIn fundal se deruleaza o muzica .i<BR> <A href="homesweethome. mid">Get the MIDI file!</AXBR> </NOEMBED> </OBJECT> <BGSOUND src="homesweethome.mid">

Un fisier MIDI se foloseste exact la fel ca un fisier WAV sau AU, prin includerea sa intre etichetele potrivite.

Cum sa folosim QuickTime si AVI pentru a adauga elemente video
Adaugarea de elemente video cu QuickTime sau cu AVI
1. Adaugati secvente video unei pagini Web cu aceleasi etichete pe care le folositi pentru fisierele audio, dar atent, fisierele video pot fi uriase! Aveti mai multe optiuni prin imbricarea etichetelor <ob ject>.
Pont de folosire rapida: Sintaxa de eticheta
<OBJECT data="videourl" type="video/tipmime" height="inaltimeinig" width="latimeimg">... continut alternativ pentru browserele care nu accepta obiecte, eventual o eticheta de obiect imbricata... </OBJECT> unde videourl este adresa URL a fisierului video; tipmime este unul dintre tipurile MIME video; iar inaltimeimg si latimeimg sunt valori care anuleaza inaltimea si latimea implicite ale imaginii.
<OBJECT data="homesweethome.avi" width="300" height="200"> </OBJECT>
2. Adaugati un mic „impuls initial" cu o eticheta <param> imediat dupa deschiderea etichetei
<OBJECT>.
<OBJECT data="homesweethome.avi" width="300" height="200">
<PARAM name="autostart" value="true"> </OBJECT>
3. Oferiti continut video la cel mai adanc 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 fisierului sursa video; tipmime este tipul MIME al datelor pe care le va aduce sau le va contine modulul plug-in; inaltimeimg si latimeimg sunt marimile pentru afisare, daca exista; si autovaloare este true daca doriti ca imaginea video sa porneasca automat. Este obligatoriu unul din atributele src sau type, iar height si width sunt recomandate in afara de cazul in care obiectul inglobat este ascuns. Atributul hidden este optional si controleaza daca programul de redare video este vizibil; atributul controller regleaza aparitia pe ecran a butoanelor de lucru; si loop controleaza daca secventa 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. Oferiti continut alternativ pentru browserele care nu accepta obiecte sau elemente video
inglobate, cu eticheta <noembed>.
<OBJECT data="homesweethome.avi" width="300" height="200">
<PARAM name="autostart" value="true"> <EMBED src="homesweethome.avi" width="300" height="200"> <NOEMBED> <P>
aImagini video sentimentalei <BR>
<A href="homesweethome.avi">Get the AVI file!</A> <BR>
</NOEMBED> </OBJECT>
5. Oferiti continut alternativ video pentru Microsoft Internet Explorer cu atributul dynsrc al etichetei pentru imagine. Acesta va ofera optiunea de a include o imagine statica pentru alte brow sere.

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

Includerea miniaplicatiilor Java
Sa intelegem ce este Java
Java reprezinta ori cel mai important lucru aparut vreodata in Web, ori cea mai mare campanie publicitara de la razboiul Betamax/VHS incoace - dumneavoastra decideti. Java este subiectul unor controverse atat legale, cat si teoretice, cu toate ca principiul sau de baza este atat logic, cat si rezonabil. Java ruleaza pe un calculator virtual idealizat, implementat prin software in loc de hardware, astfel incat poate fi usor emulat pe alte calculatoare. Singura chichita este ca vanzatorul sistemului de operare al masinii reale trebuie sa fie de acord sa furnizeze suport Java.
Java este un standard deschis care, daca toti vanzatorii il vor sustine cu buna credinta, va insenina pana la urma ca veti putea cumpara aplicatii care sa functioneze direct pe orice calculator din lume. Ce inseamna exact acest „pana la urma" este cu adevarat punctul de poticnire, deoarece situatia actuala este mult mai complexa decat ar vrea sa recunoasca multi dintre partizanii programului Java. Standardele contradictorii si implementarile incomplete sau defectuoase au schimbat promisiunea initiala a viziunii firmei Sun Microsystems din „scrie o data, ruleaza oriunde" in „scrie o data, testeaza peste tot", dupa unii programatori.
Implementarile incorecte ale browserelor duc la riscul ca Java sa devina incomod si enervant pentru utilizatorii dumneavoastra, daca programele nu sunt realizate cu atentie si izolate pe cateva pagini speciale sau in „terenuri de joaca" Java, pe care cei carora nu le place Java pot sa le evite.
Printre probleme se numara si browserele care aloca aplicatiilor Java resurse ale sistemului si nu le mai elibereaza, ceea ce duce, in cel mai rau caz, la prabusiri ale sistemului sau, in cel mai bun caz, la incetinirea sa; miniaplicatiile (applets) Java care arunca mesaje de eroare derutante pe ecranele utilizatorilor, pe care nu le puteti controla si nu aveti cum sa le descoperiti fara o testare exhaustiva; si browserele, sau chiar sisteme, care se blocheaza neasteptat in timpul incarcarii miniaplicatiilor Java, necesitand o reinitializare a sistemului pentru a continua lucrul. Problemele par mai mari pe platforma Windows 95, datorita vechimii sistemului de operare, dar nici un sistem nu este imun. Versiunile urmatoare ale sistemului Windows poate vor rezolva unele probleme, dar nu se stie cat de cooperant va fi Microsoft.
Pe de alta parte, Java ar putea reprezenta pana la urma sfarsitul acelor enervante module plug-in care infuleca resursele sistemului, incetinesc lansarea browserelor si in general fac viata dificila cand navigati prin Internet. Dar cea mai buna veste este ca puteti gasi cu usurinta in Web miniaplicatii Java care pot fi folosite gratuit sau pentru o suma mica de bani, deci nu trebuie sa invatati sa programati in limbajul Java.

Adaugarea de miniaplicatii Java la paginile Web
Adaugarea de miscare si interactivitate sitului fara servere plug-in costisitoare
1. Studiati notele de utilizare ale miniaplicatiei Java inainte de a o folosi.
2. Inserati o eticheta <ob ject> referitoare la miniaplicatie, impreuna cu toti parametrii pe care ii va necesita miniaplicatia.
<OEJECT classid="lake.class" align="right" border="0" codebase="/java" width="251" height="260"> <PARAM name="image" value="/images/sfskyline.jpg">
3. Adaugati de asemenea eticheta <applet>, impreuna cu parametrii sai, pentru a acoperi cat mai multe situatii.
<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 afisat cand se incarca miniaplicatia"> ...continut 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 baza unde se afla obiectul; listacodarhiva este o lista de arhive separate prin spatiu; da tauri este adresa URL a unui eventual fisier de date de care are nevoie miniaplicatia; tipmime este tipul MIME al datelor; iar inaltimeimg si la timeimg sunt valorile care anuleaza inaltimea si latimea 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 afisat cand se incarca miniaplicatia" name="nujne"> ...continut alternativ pentru browserele care nu accepta obiecte, eventual o eticheta pentru obiecte imbricata...</APPLET>
4. Testand miniaplicatia folosind cat mai multe browsere, versiuni si sisteme de operare.
Deci, ne trezim cu ceva numit lake.class. Ei bine, o clasa este ceea ce programatorii in Java numesc un program, deci acel lucrusor este exact ce ne dorim in directorul in care se afla pagina noastra. Acum suntem gata sa inseram miniaplicatia in pagina noastra.
Pentru imaginea noastra vom alege Palatul Navigatiei a orasului Galati. Plasand poza dupa un “lac”, cream impresia Dunarii propriu-zis, efect foarte potrivit atat cu subiectul cat si cu pagina, ce delecteaza totodata privirea si hraneste imaginatia. Iata bucatica de cod pe care o vom insera in pagina.

<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">
aImaginea prezinta o imagine a orasului Galati reflectata in Dunarei </font> </font> </td> </table> </APPLET> </OBJECT>

Acest cod are doua elemente, noua eticheta <object> din HTML 4.0 si eticheta mai veche <applet>, amandoua oferind numele clasei (sau al programului), alinierea (dreapta), chenarul (0) si o baza pentru coduri, un director special in care punem miniaplicatiile noastre Java. Apoi furnizam miniaplicatiei un parametru care identifica imaginea pe care vrem sa o folosim, imagine pe care o plasam in alt director special.

Bibliografie :

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