Atributul ALIGN - pozitionarea unei imagini

Atributul ALIGN - pozitionarea unei imagini

Inserarea unei imagini se face cu o constructie de forma:

mai jos este rezultatul

Vom plasa acest tag in locul unde dorim sa inseram imaginea. In mod implicit imaginea va fi plasata in marginea din stanga ferestrei sau, in cazul in care este plasata in cadrul unui paragraf, in dreapta textului care o precede. Ea va fi afisata in continuarea textului, fiind tratata ca o parte integranta a paragrafului. Mai jos este un exemplu:

Prin urmare, o imagine este aliniata implicit in partea stanga a ferestrei (in cazul in care nu este insotita de text) iar textul care o inconjoara este scris in mod implicit la baza imaginii. Pentru a controla aceste aspecte avem la dispozitie atributul ALIGN.   Spre deosebire de ceea ce ai invatat pana acum despre atributul ALIGN, in cazul imaginilor acesta poate controla atat alinierea pe orizontala a unei imagini dar poate controla si pozitionarea pe verticala a textului fata de imagine. Pozitionarea pe verticala a textului se face atribuind atributului ALIGN una din urmatoarele valori: top (la inceput), middle (la mijloc), bottom (la baza). Cele trei posibilitati sunt ilustrate in continuare:

Observatie: nu incerca sa incadrezi exemplul de mai sus in cadrul unui paragraf. Daca o vei face vei obtine o aliniere oribila. Pentru a fi redate ca in pagina mea va trebui sa folosesti tabelele. In schimb, daca vei utiliza o singura valoare pentru toate cele trei exemple vei obtine un rezultat acceptabil dar textul va fi pozitionat la un singur nivel.

Atributul ALIGN mai poate avea alte doua valori si anume: left (pentu pozitionarea la marginea stanga a ferestrei), respectiv right (pozitionare in partea dreapta). Ambele valori determina o pozitionare pe orizontala a imaginii, in timp ce valorile prezentate anterior asigurau pozitionarea pe verticala a textului in raport cu imaginea.   Inainte de a vedea cum lucreaza aceste valori am sa revin la pozitia implicita a unei imagini. Asa cum se poate vedea si mai jos, o imagine este aliniata implicit la marginea din stanga.

mai jos este rezultatul

Acesta este o broscuta.

Ai fi tentat sa crezi ca nu mai trebuie specificat atributul ALIGN atunci cand vrei ca imaginea ta sa fie aliniata la marginea stanga. Acest lucru este realizat implicit de browser. Pentru a te lamuri daca este corect sau nu, am dat un exemplu care va fi insotit de o expresie mai lunga (pentru a-mi usura munca am incadrat toate rezultatele exemplelor intr-un chenar care simuleaza fereastra browser-ului la o scara redusa).

mai jos este rezultatul

Daca am fi utilizat ALIGN='top' am fi obtinut ceva ca mai jos:

Sa vedem ce se intampla cand este declarat in mod explicit atributul ALIGN='left'

Asadar, declararea atributului ALIGN cu una din valorile necesare pozitionarii pe orizontala face ca textul ce inconjoara imaginea sa poata 'curge' in jurul acesteia. In exemplul urmator imaginea este inconjurata de un text mai lung.

Daca se utilizeaza valoarea right se obtine un rezultat asemanator.

La fel de bine se poate plasa imaginea in orice loc din paragraf. Mai jos este un astfel de exemplu

mai jos este rezultatul

Daca se doreste intreruperea continuitatii unei fraze si reluarea acesteia pe randul imediat urmator, se foloseste tag-ul <BR>. Acesta va duce la reluarea textului pe randul imediat urmator, dar tot in stanga sau in dreapta imaginii (in functie de locul unde se afla aceasta). In mod asemanator stau lucrurile si in cazul in care se trece la un nou paragraf. Acesta va fi reluat tot in dreptul imaginii (daca mai exista spatiu gol). Mai jos se afla un asemenea exemplu:

mai jos este rezultatul

Pentru scriere unei expresii pe randul aflat sub imagine se utilizeaza tag-ul <BR> la care se adauga atributul CLEAR. Acest atribut care nu a fost discutat la prezentarea tag-ului BR 'spune' unde va fi scris textul care il urmeaza. Valorile acestui atribut sunt left, right si all. De exemplu, daca imaginea este pozitionata in stanga se va utiliza BR CLEAR='left' sau BR CLEAR='all'. Aceasta expresie spune browser-ului sa inceapa scrierea pe primul rand care incepe de la marginea din tanga a ferestrei sau, in cazul all, pe primul rand 'curat'. Se procedeaza similar si pentru cazul in care imaginea s-ar fi aflat in dreapta. In acest caz se utiliza right. Atributul CLEAR se utilizeaza numai pentru imagini sau tabele. Mai jos este un exemplu practic.

mai jos este rezultatul