Scrigroup - Documente si articole

     

HomeDocumenteUploadResurseAlte limbi doc
AccessAdobe photoshopAlgoritmiAutocadBaze de dateCC sharp
CalculatoareCorel drawDot netExcelFox proFrontpageHardware
HtmlInternetJavaLinuxMatlabMs dosPascal
PhpPower pointRetele calculatoareSqlTutorialsWebdesignWindows
WordXml


Atributul ALIGN - pozitionarea unei imagini

html



+ Font mai mare | - Font mai mic



Atributul ALIGN - pozitionarea unei imagini

Inserarea unei imagini se face cu o constructie de forma:

<IMG SRC='numefisier.gif'>



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:

<P>Aceasta este o <IMG SRC='frog.gif'> broscuta care sta pe uscat <IMG SRC='frog.gif'> .</P>

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:

<IMG SRC='pics/frog.gif' ALIGN='top'> broscuta <IMG SRC='pics/frog.gif' ALIGN='middle'> broscuta <IMG SRC='pics/frog.gif' ALIGN='bottom'> broscuta

broscuta

broscuta

broscuta

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.

<IMG SRC='frog.gif'> Acesta este o broscuta.

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).

<IMG SRC='frog.gif'> Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta.

mai jos este rezultatul

Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta.

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

Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta.

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

Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta.

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.

Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta.

Daca se utilizeaza valoarea right se obtine un rezultat asemanator.

Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta.

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

<P>Acesta este o broscuta <IMG SRC='frog.gif' align='left'> Acesta este o broscuta.</P>

mai jos este rezultatul

Acesta este o broscuta.Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta.

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:

<p>Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. <IMG SRC='frog.gif' align='left'> Acesta este o broscuta. Acesta este o broscuta.</p> <p>Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta.</p>

mai jos este rezultatul

Acesta este o broscuta.Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta.   Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta.

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.

Acesta este o broscuta.Acesta este o broscuta. <IMG SRC='frog.gif' ALIGN='left'> Acesta este o broscuta.<BR CLEAR='left'> Acesta este o broscuta.

mai jos este rezultatul

Acesta este o broscuta.Acesta este o broscuta. Acesta este o broscuta. Acesta este o broscuta.



Politica de confidentialitate | Termeni si conditii de utilizare



DISTRIBUIE DOCUMENTUL

Comentarii


Vizualizari: 1336
Importanta: rank

Comenteaza documentul:

Te rugam sa te autentifici sau sa iti faci cont pentru a putea comenta

Creaza cont nou

Termeni si conditii de utilizare | Contact
© SCRIGROUP 2024 . All rights reserved