v8d11dx
In aceasta sectiune se discuta probleme care tin efectiv de multimedia, cum ar fi legaturi catre inregistrari audio/video, grafica fixa/animata etc., dar nu numai. Sunt prezente si probleme care tin de estetica prezentarii, considerandu-se ca introducerea unor elemente grafice de atractie se incadreaza mai mult in aceasta sectiune si nu in cea dedicata formatarii textului.
Elemente de grafica
Culori, fundaluri
S-a vazut, la formatarea textului - tagul FONT, ca un text poate fi scos in evidenta, fata de textul inconjurator, si prin utilizarea unei alte culori. Apare atunci intrebarea daca nu se poate fixa o culoare dorita pentru tot textul unui document. Aceeasi intrebare se poate ridica asupra culorii hartiei (deci fondului pe care apare scrisul). Aceste intrebari isi gasesc raspunsul in atribute ale tagului BODY:
BACKGROUND="adresa-imagine"
BGCOLOR="#rrggbb"|"culoare"
TEXT="#rrggbb"|"culoare"
BGPROPERTIES="FIXED"

Fiecare dintre aceste atribute este optional si, daca apare, este situat in tagul de inceput al containerului BODY.

BACKGROUND precizeaza imaginea care va aparea pe fundalul paginii (similar alternativei de a fixa un abtibild in MsWORD). Imaginea este data prin adresa URL a fisierului care o contine. Se admit doar fisiere in format GIF sau JPG.
BGCOLOR precizeaza culoarea paginii. Culoarea poate fi data prin codul RGB hexazecimal sau prin nume (pentru culorile numite). Cu toata standardizarea din domeniu, modul cum apar efectiv culorile pe monitorul utilizatorului depinde de cartela grafica si de software-ul adiacent. Unele browsere pot sa interpreteze anumite culori in moduri neasteptate.
TEXT precizeaza culoarea pentru text, cu exceptia celui care reprezinta legaturi si care este supus altor atribute (LINK, VLINK, ALINK). Culoarea definita este acoperita de orice culoare definita explicit prin FONT.
BGPROPERTIES este o extensie Microsoft, doar cu valoarea FIXED deocamdata, care precizeaza ca imaginea din fundal nu defileaza odata cu textul (ramane fixa).

O imagine precizata prin BACKGROUND va anula efectul unei culori definite prin BGCOLOR. La utilizarea unor imagini de fundal trebuie sa se gandeasca faptul ca incarcarea unei imagini ia, in general, suficient de mult timp. Pentru a micsora acest timp se vor utiliza mai frecvent imagini JPG decat GIF si pagina va fi asa fel organizata incat sa nu necesite, prea des, reincarcarea ei in cazul navigarilor multiple in alte situri.

In cazul in care se doreste ca pagina sa poata fi tiparita in alb/negru, culoarea textului trebuie sa fie mult mai inchisa decat cea a fundalului.

Linii
Pentru a trasa linii care sa separe, sau sa evidentieze, sectiuni de text sunt posibile doua solutii: linii trasate prin tagul dedicat HR; linii trasate ca imagini inglobate.
Prima posibilitate este mai economica in privinta timpului de incarcare, dar mai putin dezvoltata ca posibilitati.
<HR a WIDTH=nnn|nnn%i a ALIGN=left|center|righti a COLOR="#rrggbb"|"culoare"i a SIZE=mmi a NOSHADEi>

insereaza o linie orizontala ca un paragraf separat.

WIDTH precizeaza lungimea liniei, nnn, in pixeli, sau procentajul din latimea ferestrei, nnn%. Lungimea implicita este de 600 de pixeli.
ALIGN fixeaza alinierea liniei intre marginile ferestrei. Valoarea implicita este center si nu se pot alinia linii care ocupa tot ecranul.
COLOR indica culoarea cu care se va trasa linia. Acest atribut este extensie Microsoft!
SIZE este inaltimea (grosimea) liniei, in pixeli.
NOSHADE anuleaza umbrirea liniei.

Daca, pentru a obtine efecte deosebite, anumite linii sunt desenate cu un editor de grafica, incarcarea lor se va efectua precum incarcarea graficii in-line.

Imagini grafice
Imaginile care pot fi incarcate in documentul curent trebuie sa fie sub format JPG sau GIF. Incarcarea lor se face fara a parasi documentul si utilizarea lor este justificata atat de motive de prezentare atractiva a materialului, cat si de motive de completare/inlocuire a informatiei textuale. Tagul dedicat imaginilor in-line este IMG:
<IMG SRC="URL-imagine" a ALIGN=left|right|top|middle|bottomi a ALT="text-alternativ"i a BORDER=nni a DYNSRC="URL-dinamic"i a LOWSRC="URL-rez-slaba"i a LOOP=nr-repeti a CONTROLSi a HEIGHT=mmi a WIDTH=wwi a HSPACE=hhi a VSPACE=vvi a ISMAPi a USEMAPi> atexti

unde:
SRC specifica adresa fisierului care contine imaginea.
ALIGN indica alinierea imaginii in raport cu pagina sau in raport cu textul si permite defilarea textului in jurul imaginii:

left - imaginea aliniata la stanga paginii, textul este aliniat la imagine, incepand cu partea de sus a imaginii;

right - similar cu left, dar alinierea este pe dreapta paginii pentru imagine;

top - imaginea este aliniata in raport cu linia de baza a textului astfel incat textul sa fie la nivelul de sus al imaginii;

middle - similar cu top, text aliniat la mijlocul imaginii;

bottom - similar cu top, text aliniat la baza imaginii.
ALT permite un nume alternativ sau o descriere a imaginii pentru utilizatorii care nu au un browser grafic sau pentru cei care au setat browserul incat sa nu incarce imaginile; unele browsere (de exemplul Microsoft Explorer) afiseaza textul ca tip - text afisat pe sub pointerul mouse-ului cand acesta este pozitionat pe imagine;
BORDER indica grosimea liniei chenar. nn=0 inlatura chenarul;
DYNSRC specifica adresa unui videoclip sau segment multimedia care trebuie sa fie afisat. Acest atribut este extensie Microsoft.
LOWSRC specifica adresa unui grafic de slaba rezolutie care sa fie incarcat in aceeasi locatie ca si graficul dat la SRC, pana se incarca imaginea completa. Acest atribut este extensie Netscape.
LOOP arata de cate ori se executa videoclipul. Este extensie Microsoft si in legatura cu DYNSRC.
CONTROLS adauga un set de butoane de control sub un videoclip. Este extensie Microsoft si in legatura cu DYNSRC.
HEIGHT specifica inaltimea imaginii, in pixeli;
WIDTH specifica latimea imaginii, in pixeli;
HSPACE specifica, in pixeli, latimea gutter-ului, spatiu liber in stanga si in dreapta imaginii;
VSPACE specifica, in pixeli, spatiul liber de deasupra si de dedesubtul imaginii;
ISMAP indica faptul ca imaginea grafica, scufundata intr-un tag A este o harta grafica server-side, va folosi programul ISMAP pentru a crea harta grafica (imagine cu segmente clickabile, atasate unor legaturi);
USEMAP indica faptul ca imaginea grafica, harta grafica client-side, va folosi programul USEMAP pentru a crea harta grafica (vezi sectiunea imediat urmatoare); text reprezinta textul care se doreste sa fie aliniat, defilat, asociat cu imaginea.
Daca se utilizeaza HEIGHT si/sau WIDTH, dimensiunile imaginii nu vor mai fi, in general, proportionale cu cele ale imaginii initiale. Pentru a pastra proportionalitatea se poate incerca fixarea exacta a unei dimensiuni, pentru cealalta indicandu-se valoarea * (de exemplu: HEIGHT=100 WIDTH=*).

Utilizarea atributelor BORDER, HEIGHT si WIDTH pot sa creasca viteza de incarcare.
Este recomandabil ca alaturi de tagul IMG sa fie trecuta dimensiunea fisierelor mai mari pentru ca utilizatorul sa aiba posibilitatea de apreciere a timpului de incarcare.

Imagini clickabile
O facilitate a documentelor hipertext foarte utilizata in ultimul timp, atat pentru atractivitatea ei, cat si pentru posibilitatile sporite de sugerare si transmitere de informatii, este crearea imaginilor care cuprind legaturi hipertext, legaturi care se activeaza prin click pe diferite regiuni ale imaginii. O asemenea imagine, datorita segmentarii in regiuni, fiecare regiune fiind ancorarea unei legaturi hipertext, este numita harta grafica (image map in engleza).
Exista doua tipuri de harti grafice, dupa locul unde sunt interpretate informatiile atasate hartii:

la client (client-side); la server (server-side).
Haartile grafice de partea clientului au avantajul ca sunt mai usor de construit, solicita mai putin serverul si vor lucra chiar si in lipsa serverului. Dezavantajul este ca unele browsere mai vechi nu le accepta. Cele doua tipuri pot fi insa combinate astfel incat fiecare client sa utilizeze forma accesibila/preferata.
Harti grafice la server
Pentru ca o harta grafica de acest tip sa functioneze sunt necesare patru fisiere diferite:
Fisierul imagine.

Este uzual un fisier GIF dar poate fi orice tip de fisier grafic pe care potentialii clienti il pot utiliza.
Fisierul map
Acest fisier este un fisier text care specifica delimitarea ariilor figurii (prin coordonate) si legaturile asociate fiecarei arii. Deoarece formatul acestui fisier poate fi CERN sau NETSCAPE (dupa server), este preferabil sa se lucreze cu un program care editeaza o asemenea harta (de exemplu MAPEDIT) si care scoate direct fisierul map.
Un exemplu (pentru un server CERN) este

default https://.... adresa URL pentru legatura implicita rectangle (246,216) (381,237) - prima regiune definita (un dreptunghi) https://..... adresa URL atasata primei regiuni rectangle (246,247) (436,269) - a doua regiune definita https://.... adresa URL atasata celei de a doua regiuni

Programul de interpretare a hartii grafice
Acesta este furnizat ca o parte a setarii serverului WEB si este, de obicei, un CGI script, referit ca /cgi-bin/htimage. Discutia cu administratorul de server este totusi cea care da informatia corecta.
Fisierul HTML
Este fisierul HTML care produce pagina unde vor fi disponibile legaturile precedent definite. Harta grafica este inclusa in pagina prin combinarea unei ancorari cu imaginea:

<A HREF="calea-catre-program/fisierul-map.map">
<IMG ISMAP SRC="fisierul-imagine">
</A>

De notat ca in valoarea HREF s-a alaturat locatia fisierului map (uzual cu extensia .map) la locatia programului de interpretare. In acest fel, la activarea unei regiuni (prin click), se executa programul de interpretare care primeste drept parametri fisierul map, coordonatele mouse-ului. Programul scoate care URL trebuie sa fie activat si comanda serverului trimiterea paginii dorite catre client.

Harti grafice la client
In cazul cand harta grafica este interpretata la client, informatiile necesare pentru definirea regiunilor si a ancorarilor sunt introduse in documentul HTML. Este nevoie deci, in acest caz, doar de doua fisiere:
Fisierul imagine

Este fisierul care contine imaginea. De obicei GIF, preferabil JPG, vezi toate discutiile anterioare.
Fisierul HTML
Este fisierul care creeaza pagina cu imaginea. Imaginea este inclusa in pagina printr-o comanda de genul:
<IMG SRC="fisier-imagine" USEMAP="#nume-map"> unde se remarca trimiterea prin USEMAP la URL-ul care contine specificarea hartii. Este similar unei legaturi la o locatie numita (incepe cu #) dar numirea locatiei se face cu tagul MAP, descris in continuare, tag care introduce si specificarea regiunilor hartii.
<MAP NAME="nume-map"> descriere arie-1
adescriere arie-2
... adescriere arie-k
i
</MAP> introduce numele unei harti grafice la client, nume-map este numele care va fi utilizat in atributul USEMAP.

Descrierea unei arii cuprinde forma, coordonatele si legatura hipertext atasata. Toate acestea se marcheaza cu tagul AREA:

<AREA a SHAPE="RECT"|"RECTANGLE"|"CIRC"|"CIRCLE"|"POLY"|"POLYGON"|"DEFAULT"i a COORDS="coordonatele"i a HREF="adresa URL"i a NOHREFi a ALT="text-alternativ"i a TARGET="nume-fereastra|_blank|_parent|_self|_topi>

care defineste coordonatele, actiunile si forma unei arii click-abile dintr-o harta grafica la client.

SHAPE este forma ariei, evidenta dupa valori, cu precizarea ca poligon poate fi o forma poligonala oarecare, iar DEFAULT acopera tot ceea ce nu este acoperit de ariile precis definite. coordonatele reprezinta coordonatele definitorii pentru zona:

dreptunghi - patru coordonate, in pixeli, separate prin virgule, pentru varful stanga sus, varful dreapta jos, de genul COORDS="10,20,100,200". cerc - trei coordonate, in pixeli, separate prin virgule, pentru centru si raza: x-centru, y-centru, raza. poligon - trei sau mai multe perechi de coordonate, fiecare pereche reprezinta, in pixeli, x si y pentru un varf al poligonului. Daca primul punct nu coincide cu ultimul, de obicei, poligonul va fi inchis automat.

HREF indica legatura accesibila prin aria respectiva;
NOHREF arata ca aria respectiva nu are atasata o legatura hipertext;
ALT introduce un text alternativ care va prelua functia de ancorare a ariei in cazul cand browserul nu este grafic sau afisarea graficelor este anulata de preferintele utilizatorului;
TARGET precizeaza unde va fi afisata pagina catre care s-a navigat prin click in aria specificata.

Combinarea celor doua tipuri de harti grafice
Daca se construiesc toate fisierele pentru imagini procesate pe server si se introduc tagurile cerute de procesarea la client, atunci utilizarea unei comenzi de genul

<A HREF="/cgi-bin/htimage/Iusername/nume-map.map">
<IMG ISMAP SRC="fisier-imagine" USEMAP="#nume-map">
</A>

va fi interpretata corect de orice client, in sensul ca daca este posibila procesarea unei harti grafice la client, aceasta va fi utilizata. S-a presupus ca serverul furnizeaza in /cgi-bin/htimage programul necesar pentru procesarea hartilor grafice la server.
Legaturi multimedia
Prin intermediul tagului de ancorare A se pot accesa si documente care nu sunt text. Informatia necesara este data prin extensiile fisierelor, care vor indica ce utilitar trebuie sa se activeze pentru a interpreta corect documentul: grafica, text, sunet, video etc.
Sunt tratate, in mod obisnuit, fisiere

.txt - text (ASCII);
.html - documente HTML;
.gif - imagini GIF;
.tiff - imagini TIFF;
.xbm - imagini X Bitmap;
.jpg sau .jpeg - imagini JPEG;
.ps - fisiere PostScript;
.aiff - fisiere de sunet AIFF;
.au - fisiere de sunet AU;
.wav - fisiere de sunet WAV;
.mov - animatii QuickTime;
.mpeg sau .mpg - animatii MPEG.
Este posibil sa se introduca in text animatii si prin intermediul animatiilor procesate intr-un GIF sau prin scriptari JavaScript, JScript sau VBScript.
<BGSOUND SRC="nume-fisier" a LOOP=n|INFINITEi>

defineste un fisier de sunet, .WAV, .AU, sau .MID, care se executa atunci cand utilizatorul deschide pagina.

SRC specifica numele fisierului;
LOOP arata de cate ori este parcurs fisierul sau repetat la infinit. Aceasta este extensie Microsoft.

<SCRIPT LANGUAGE="limbaj-script"> script
</SCRIPT>

include un script intr-un document. Un script este o secventa de program, scrisa intr-un limbaj specific cum ar fi JavaScript (a nu se confunda cu Java) sau VBScript. O asemenea secventa este interpretata de browser iar instructiunile sunt executate on-line. Nu toate browserele interpreteaza scriptarile, sau ambele limbaje de scriptare (Netscape accepta JavaScript, Microsoft Explorer le accepta pe ambele). Un exemplu banal este :

<SCRIPT LANGUAGE="JavaScript"> document.write("This is JavaScript!")
</SCRIPT>

care introduce in document, dupa interpretarea browserului, textul
This is JavaScript.
Limbajele de construire a scriptarilor sunt, evident, limbaje complexe care permit interactivitatea in parcurgerea unei pagini web.
Pentru ca browserele care nu recunosc scriptul sa nu-l afiseze ca pe un text inclus, se prefera inchiderea corpului unui script intr-un comentariu:

<script language="JavaScript">
<! urmeaza un script

document.write("This is JavaScript!")

// care tine pana aici -->
</script>

Cum orice browser ignora tagurile pe care nu le recunoaste, tagul SCRIPT nu va produce nimic pe un browser care nu accepta scriptari iar continutul tagului comentariu <! ... > va fi neglijat. Un browser care accepta scriptarile va interpreta, cu interpreterul adecvat, continutul containerului SCRIPT. Liniile care incep cu <! sau // vor fi interpretate drept comentarii incluse in scriptare. Se observa astfel ca acelasi text, prin utilizarea adecvata a tagurilor, este interpretat corect de ambele categorii de browsere.