IPRO - PC Magazine Romania, 2001

Comunitatea experţilor şi a cititorilor PC Magazine
Internet PRO

Poziţionarea conţinutului în paginile web

Emanuel Baruch

Una din cele mai importante probleme cu care ne confruntăm atunci când construim o pagină web este poziţionarea imaginilor şi a textului, a conţinutului în general. Ar fi foarte simplu dacă am putea preciza cu ajutorului limbajului HTML atribute de genul: imagine centrată orizontal şi vertical, paragraf care apare întotdeauna la baza paginii - indiferent de dimensiunea ferestrei, text pe 3 coloane etc. Din păcate, problema este un pic mai complicată. Cu toate acestea, pe majoritatea paginilor web bine realizate veţi observa că fiecare element are locul său şi nimic nu este lăsat la voia întâmplării.

Containere bine aliniate
În general, pentru a putea controla alinierea sau aspectul conţinutului este indicat ca acesta să fie introdus în aşa-numite ,,containere". Există două opţiuni pe care vi le recomand: <div></div> şi <p></p>. Tag-ul div delimitează o zonă de pe pagina web, iar p un paragraf. Aceste tag-uri suportă atributul de aliniere align cu valoarea ,,left"",right " şi ,,center". Acestea fiind spuse, problema alinierii orizontale este aproape rezolvată. Împărţiţi textul în paragrafe şi precizaţi cum doriţi să fie aliniat acesta (la stânga, la dreapta sau centrat). Veţi observa că va apărea un mic spaţiu între paragrafe. Această delimitare contribuie de asemenea la o mai bună lizibilitate a textului. Nu este indicată utilizarea unor blocuri de text prea voluminoase, deoarece pe ecranul monitorului ochiul cititorului va obosi mult mai repede decât în cazul unei cărţi.

Cele două tag-uri se pot folosi şi intercalat. O zonă delimitată de un tag div poate conţine la rândul ei alte sub-zone delimitate de div-uri sau p-uri. Cu alte cuvinte, un div poate include alte div-uri şi paragrafe, însă nu este indicată includerea în tag-ul p a altor paragrafe sau zone div. Asupra conţinutului va avea efect întotdeauna atributul ultimului container în care a fost introdus (,,container-părinte"). Astfel, dacă aveţi o zonă aliniată la dreapta iar în aceasta zonă doriţi să introduceţi un paragraf centrat, puteţi proceda astfel:

<div align="right">
Conţinut aliniat la dreapta
<p align="center">
Paragraf centrat
</p>
</div>

Valoarea implicită a atributului de aliniere a conţinutului este la stânga, adică align="left". Aceasta înseamnă că dacă nu introduceţi nici un atribut în tag-urile p şi div, acestea vor fi aliniate la stânga, cu condiţia ca ele să nu fie intercalate în alte zone cu atribute de aliniere, deoarece, în acest caz, ele se vor alinia după cum dictează ,,containerul părinte".

Dacă doriţi un spaţiu suplimentar în jurul unei imagini, folosiţi tag-urile vspace şi hspace.

Unde sunt imaginile?
O altă problemă este alinierea imaginilor care însoţesc textul. Tag-ul img care inserează o imagine într-o pagină web suportă şi el atributul align="left", respectiv align="right". Atunci când o imagine este introdusă în text cu unul din aceste atribute, ea se va alinia la stânga, respectiv la dreapta paginii, fiind înconjurată de text. Atenţie, nu folosiţi atributul align="center" pe tag-ul unei imagini, deoarece nu va avea nici un efect. Pentru a centra o imagine introduceţi-o într-un div centrat:

<div align="center"> <img src="imagine.gif"></div>

Atributul align al unei imagini mai suportă şi alte valori, şi anume top, middle şi bottom. Acestea se referă la alinierea verticală a imaginilor, în funcţie de textul care le însoţeşte. Top va determina ca textul să fie aliniat în partea de sus a imaginii, middle va face ca mijlocul textului să fie aliniat cu mijlocul imaginii, iar bottom va aduce pe aceeaşi linie partea de jos a textului cu partea de jos a imaginii. Valoarea implicită este valign="bottom".

Dacă doriţi un spaţiu suplimentar în jurul unei imagini, folosiţi tag-urile vspace şi hspace. Vspace (Vertical Space) defineşte spaţiul vertical care va rămâne liber deasupra şi dedesubtul imaginii iar hspace (Horizontal Space) spaţiul orizontal care va rămâne liber în dreapta şi stânga imaginii. Tag-urile pot fi folosite împreună sau numai câte unul. Utilizarea acestor tag-uri este indicată pentru ca textul care însoţeşte o imagine să nu apară lipit de aceasta. Nu uitaţi că aceste tag-uri adaugă spaţiu atât sus cât şi jos, respectiv atât în dreapta cât şi stânga. Aşadar nu este posibilă adăugarea de spaţiu liber numai într-una din părţi (de exemplu numai sus). Pentru a încadra o imagine într-o ramă folosiţi tag-ul border.

Culoarea implicită a acesteia va fi cea a textului. Atunci când o imagine are un link pe ea, aceasta va apărea automat (de dimensiune 1 şi de culoarea link-ului). Pentru a scăpa de ea, precizaţi în cadrul tag-ului img border="0". Atributele vspace, hspace şi border se măsoară în pixeli.

Vă recomand ca atunci când aveţi imagini pe o pagină web să folosiţi întotdeauna atributele width şi height, şi anume cu dimensiunile exacte ale imaginii (în pixeli). Width precizează lăţimea iar height înălţimea unei imagini. În primul rând, de ce este necesară utilizarea acestor tag-uri, deoarece - cu sau fără ele - rezultatul final este acelaşi. Atunci când un browser încarcă o pagină web, el va afişa mai întâi textul şi va lăsa spaţiu acolo unde urmează să apară imaginile. Dacă nu precizaţi dimensiunile imaginii, browser-ul nu va rezerva un spaţiu exact pentru aceasta, iar după ce o încarcă, întreg conţinutul paginii va fi repoziţionat. Şi aceasta se va întâmpla la fiecare imagine încărcată, ceea ce poate deveni neplăcut pentru vizitator. Bineînţeles acesta nu se va întâmpla în cazul unei conexiuni ultra-rapide, deoarece paginile vor fi încărcate instantaneu, însă nu toţi vizitatorii dispun de astfel de conexiuni. În al doilea rând, dacă folosiţi alte dimensiuni ale imaginii decât cele originale, browser-ul o va redimensiona. De exemplu, nu de puţine ori am văzut pe web galerii de imagini în care se prezintă pe o pagină un index al acestora format din variante mici ale imaginilor respective. Cei care au construit paginile respective nu au mai avut timp pentru a realiza şi aceste imagini de dimensiuni reduse, aşa că au luat imaginile mari şi le-au redimensionat din HTML, cu ajutorul lui width şi height. Rezultatul este însă extrem de prost, nu numai din punct de vedere calitativ, dar şi al timpului de încărcare. De reţinut că imaginile pot avea şi dimensiuni relative (width="50%").

De asemenea, utilizarea atributelor align="left" şi align="right" pe imagini trebuie făcută cu atenţie. Pe anumite browsere (mai ales Netscape 4) şi pe anumite rezoluţii sau dimensiuni ale ecranului, textul care înconjoară imaginea se va suprapune cu imaginea care îl însoţeşte, rezultatul fiind catastrofal. Aceasta nu ar trebui să se întâmple, dar programele de navigare - mai ales cele vechi - sunt pline de surprize neplăcute. Soluţii ,,oficiale" la această problemă nu există. Astfel de erori, precum şi numeroasele limite ale limbajului HTML, i-au determinat pe designerii web să apeleze la soluţii neconvenţionale. Toate paginile web sunt construite pe structuri tabelare. Aceasta înseamnă că întreg conţinutul unei pagini web este introdus în tabele ale căror rame sunt setate pe zero (border="0") - în majoritatea cazurilor. Soluţia este foarte bună, deoarece cu ajutorul tabelelor se poate controla strict poziţionarea conţinutului. De subliniat că nu constituie o problemă folosirea tabelelor intercalate, adică a tabelelor în tabele: orice celulă a unui tabel poate conţine un alt tabel ş.a.m.d. Acest procedeu vă poate ajuta să plasaţi un element dintr-o pagină web exact acolo unde doriţi. Trebuie avut însă în vedere că tabelele container pot fi redimensionate din cauza lăţimii sau înălţimii imaginilor sau tabelelor pe care le include.

O Soluţie? Tabelele
Utilizarea tabelelor presupune însă cunoaşterea semnificaţiei atributelor care pot însoţi tag-ul table. Dimensiunea tabelelor poate fi relativă (width="80%") sau fixă (width="80"). Dimensiunile fixe se măsoară în pixeli. Dimensiunile relative se vor forma în funcţie de container-ul părinte al tabelului. Astfel, dacă tabelul este cuprins doar de tag-ul body, el se va dimensiona relativ în funcţie de mărimea ferestrei browser-ului. Dacă însă un tabel cu width="50%", este introdus într-o celulă a altui tabel atunci lăţimea lui va fi jumătate din cea a celulei-container. Aceleaşi reguli sunt valabile şi pentru înălţimea unui tabel (height). Alte atribute cu ajutorul cărora puteţi controla poziţionarea conţinutului unui tabel sunt cellpadding şi cellspacing. Cellpadding se referă la distanţa dintre conţinutul unei celule şi marginile acesteia. Cellspacing precizează distanţa dintre celulele unui tabel. Valoarea implicită a acestor atribute nu este zero.

Aşadar, pentru a obţine un tabel în care să nu existe spaţiu între conţinut, folosiţi cellpadding="0" cellspacing="0". Atributele width şi height pot fi poziţionate atât pe table (tabel) cât şi pe td (celulă). Atunci când utilizaţi lăţimi pentru fiecare celulă în parte - ceea ce este recomandat în majoritatea cazurilor, pentru a avea un control mărit asupra acestora, aveţi grijă ca suma with-urilor de pe td-uri să fie egală cu lăţimea tabelului. În caz contrar, browser-ul va redimensiona celulele.

Colspan şi rowspan sunt şi ele foarte utile pentru a crea structuri mai complexe de tabele. Ele se folosesc pe tag-ul td şi determină întinderea unei celule pe mai multe rânduri (rowspan) sau pe mai multe coloane (colspan).

Nu este indicată utilizarea de combinaţii de valori fixe şi relative pe acelaşi tabel, deoarece pe anumite rezoluţii browser-ul nu va mai afişa dimensiuni exacte. Construiţi un tabel cu o lăţime de 100% şi 3 coloane astfel:

<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="200">fix 200</td>
<td width="73%"> 80%</td>
<td width="100">fix 100 </td>
</tr>
</table>

Redimensionaţi fereastra şi schimbaţi rezoluţia ecranului. Veţi vedea ce se întâmplă...

Pentru a obţine o pagină web pe 3 coloane, astfel încât prima şi ultima să aibă lăţimi fixe, iar cea din mijloc să se dimensioneze în funcţie de lăţimea browser-ului, vom proceda astfel: introducem un tabel cu dimensiuni relative, iar în prima şi în ultima coloană introducem alte tabele formate dintr-o singură celulă cu dimensiuni fixe. Multe pagini web sunt construite astfel, în stânga fiind meniul de navigare, la mijloc conţinutul iar la dreapta o margine. Nu lăsaţi conţinutul să se întindă pe întreaga lăţime a unei pagini, deoarece textul devine greu de urmărit.

Alinierea verticală şi orizontală a conţinutului unei celule este determinată de atributele valign şi respectiv align. Aceste atribute pot fi specificate în tag-ul td sau tr. Atunci când atributul align se află pe tag-ul table, el va determina alinierea tabelului ca şi în cazul imaginilor. Align poate avea valoarea left, right şi center, iar valign - top, middle şi bottom. Valoarea implicită pentru align este left iar pentru valign este middle. Iată cum va arăta următorul tabel într-un browser:

<table border="1">
<tr> <td height="61" valign="top">valign=top</td> </tr>
<tr> <td height="65" valign="middle">valign=middle</td> </tr>
<tr> <td height="80" valign="bottom">valign=bottom</td> </tr>
</table>

Cum procedăm când dorim să poziţionăm conţinutul în centrul ferestrei browser-ului, atât orizontal cât şi vertical, indiferent de dimensiunile acesteia? Vom folosi un tabel format dintr-o singură celulă care acoperă întreaga fereastră:

<table width="100%" height="100%">
<tr>
<td align="center" valign="middle"> Text centrat vertical şi orizontal </td>
</tr>
</table>

O astfel de pagină este întâlnită mai ales ca pagină de introducere într-un sit.

Aţi observat desigur că browser-ele păstrează un spaţiu între marginea ferestrei şi conţinut. Pentru a stabili dimensiunile acestui spaţiu, folosiţi următoarele atribute în tag-ul body:

leftmargin="x" topmargin="x" marginwidth="x" marginheight="x",

unde x reprezintă dimensiunea în pixeli a acestui spaţiu. leftmargin şi marginwidth se referă la spaţiul orizontal iar topmargin şi marginheight la cel vertical. Sunt necesare toate cele 4 atribute deoarece Internet Explorer şi Netscape le interpretează în mod diferit.

O altă chestiune demnă de luat în seamă atunci când lucrăm cu tabele este faptul că un browser va afişa un tabel doar în momentul în care a citit şi ultima celulă a acestuia. Astfel, paginile construite într-un singur tabel, vor fi afişate doar după ce s-au încărcat în întregime (cu excepţia imaginilor). Pentru a nu lăsa vizitatorul să aştepte atâta timp până să vadă ceva pe ecranul său, vă recomand să folosiţi mai multe tabele-container, pe verticală.

Acestea fiind spuse, nu vă rămâne decât să experimentaţi cu tabele de lăţimi fixe şi relative, intercalate sau nu. Studiaţi comportamentul acestora pe diferite rezoluţii şi dimensiuni ale ferestrei browser-ului. Cu puţină răbdare veţi reuşi să amplasaţi elementele incluse pe pagina dvs. web exact acolo unde doriţi.

Nu am epuizat tehnicile puse la dispoziţie de limbajul HTML pentru a controla mai bine poziţionarea conţinutului. Menţionez aici Frame-urile sau Layer-ele, însă de acestea ne vom ocupa într-un număr viitor.

Nota redacţiei: Acest articol este primul dintr-o serie de contribuţii româneşti. Nu ezitaţi de a-l citi critic, orice fel de completări şi probleme puse de dumneavoastră vor fi binevenite.

Iată cum va arăta următorul tabel:

<table width="254" border="1">
<tr>
<td colspan="4">colspan=4</td>
</tr>
<tr>
<td rowspan="4" width="83">rowspan=4</td>
<td width="48">0</td>
<td width="44">0</td>
<td width="51">0</td>
</tr>
<tr>
<td width="48">0</td>
<td colspan="2">colspan=2</td>
</tr>
<tr>
<td width="48">0</td>
<td colspan="2">colspan=2</td>
</tr>
<tr>
<td width="48">0</td>
<td colspan="2">colspan=2</td>
</tr>
</table>