Hello, World!

Pagini WEB cu HTML 3.2

Mihai Scorţaru

În sfârşit am ajuns într-o fază în care cunoştinţele acumulate vă permit să realizaţi pagini WEB complexe. Sperăm că acestea vă vor satisface în calitate de creatori ale acestora, iar "vizitatorii" se vor bucura şi ei.

Conţinutul unei pagini Web "profesionale"

În cele ce urmează vor fi prezentate câteva modalităţi de a controla spaţiul dintre texte şi imagini. Cunoaşterea acestor metode este esenţială pentru ca paginile dumneavoastră să fie atractive şi uşor de citit.

Fiecare aspect al unei pagini Web trebuie să reflecte scopul pentru care a fost creată. Textul şi imaginile trebuie să comunice mesajul care se doreşte a fi transmis cititorilor. Modul în care acestea sunt îmbinate are un impact mare asupra ideii pe care şi-o va face cititorul despre pagina respectivă. În continuare vă prezentăm câteva restricţii care ar trebui respectate în crearea unor pagini Web. Este evident că unele pagini, cu un conţinut special, nu vor putea respecta, în totalitate, aceste reguli.

Număr de cuvinte: Se recomandă să fie între 100 şi 500 de cuvinte pe pagină.

Întreruperea textului: La fiecare 40-100 de cuvinte trebuie să apară un titlu, o linie, sau o imagine; articolele lungi fac excepţie.

Mărimea unei pagini: O pagină trebuie să conţină două până la patru ecrane (la o rezoluţie de 640x480 pixeli).

Dimensiunea fişierelor: Fişierele care trebuie încărcate pentru vizualizarea unei pagini nu trebuie să depăşească 50 KB (inclusiv imaginile); dacă pagina conţine GIF-uri animate sunt recomandate dimensiuni de până la 100 KB.

Viteza: Primul ecran şi imaginile cheie trebuie să apară în mai puţin de 5 secunde (dacă se foloseşte un modem la 56 Kbps).

Culori: Trebuie să existe două până la patru culori dominante.

Fonturi: Nu trebuie să existe mai mult de 3 fonturi (inclusiv cele care apar, eventual, în imagini).

Spaţii albe: Fundalul trebuie să ocupe cel puţin 75% din pagină.

Contrastul: Nici o culoare a background-ului nu trebuie să fie apropiată de o culoare a textului.

Stil: Textul şi imaginile trebuie să fie în concordanţă cu tema paginii.

Impresia generală: Pagina, ca un întreg, trebuie să pară echilibrată şi atractivă.

Spaţierea şi punerea în chenar a imaginilor

Pentru a lăsa loc liber între diferite elemente ale unei pagini se recomandă folosirea unor imagini total transparente.

Dacă o imagine este "înfăşurată" de text (s-a folosit <IMG ALIGN="right"> sau <IMG ALIGN="left"> atunci, prin folosirea parametrului CLEAR al tag-ului   textul care urmează va fi afişat sub imaginea respectivă. Valorile parametrului CLEAR pot fi right, left sau all. Dacă parametrul CLEAR are valoarea right atunci textul va apărea sub ultima imagine inclusă anterior, aliniată la dreapta, lucrurile fiind similare pentru valoarea left. Dacă valoarea este all atunci textul va apărea sub ultima imagine inclusă anterior, indiferent de orientarea acesteia.

Poate fi adăugat spaţiu suplimentar în jurul imaginilor prin folosirea parametrilor HSPACE şi VSPACE. De exemplu comanda <IMG SRC="imagine.gif" HSPACE=20 VSPACE=5> va determina afişarea imaginii cu adăugarea a 20 de pixeli "albi" la stânga şi la dreapta, şi 5 pixeli "albi" deasupra şi sub imagine.

Următoarea imagine ilustrează efectul acestor parametri:

Fişierul HTML corespunzător este:

<html>

<head>

<title> Spatii </title>

</head>

<body>

<div align = "center">

<h1>

Civilizatia de pe Alpha Centauri IV

</h1> </div>

<div align = "left">

Catre cpt. Iahim Uratrox,

Va informam ca misiunea echipei de cercetare care s-a deplasat pe suprafata planetei s-a

incheiat cu succes.

<img src='steag.jpg' align="left" vspace=10 hspace=20 height=120 width=160>

In imaginea alaturata puteti vedea un obiect gasit pe suprafata planetei. Este evident ca acest obiect nu are o provenienta naturala si, deci, putem presupune ca pe aceasta planeta exista sau au existat fiinte inteligente.

</div>

<div align = "right">

13 septembrie 2457 </div>

</body>

</html>

Există posibilitatea ca o imagine să fie afişată într-un chenar. Pentru aceasta trebuie folosit parametrul BORDER al tag-ului <IMG>. Imaginea va apărea într-un chenar de grosime (în pixeli) egală cu valoarea transmisă parametrului BORDER. Următoarea imagine prezintă efectul acestui parametru:

Fişierul HTML care trebuie creat pentru obţinerea acestei pagini este:

<html>

<head>

<title> Chenar </title>

</head>

<body>

<div align = "center">

Valoarea acestui tablou depaseste suma de 200.000 USD.

<img src='forest.jpg' height=120 width=160 border=5 vspace=10> </div>

</body>

</html>

Caracteristicile liniilor orizontale

Comanda <HR> are câţiva parametri care permit setarea unor caracteristici pentru liniile orizontale. Aceşti parametri sunt: SIZE, WIDTH, ALIGN şi COLOR.

Valoarea parametrului SIZE indică înălţimea liniei (în pixeli).

Parametrul WIDTH poate lua ca valori un număr şi atunci reprezintă lăţimea liniei în pixeli, sau un procent şi atunci indică faptul că linia va ocupa acel procent din lăţimea ferestrei în care este afişată pagina.

Parametrul COLOR permite setarea culorii liniei. Acest parametru are efect numai în Internet Explorer, iar Netscape Navigator îl ignoră.

Alinierea paragrafului curent afectează şi alinierea liniei orizontale în cazul în care parametrul ALIGN al tag-ului <HR> lipseşte. Astfel, dacă paragraful este aliniat la dreapta, linia se termină la marginea dreaptă a ferestrei, dacă paragraful este aliniat la stânga, linia începe la marginea stângă, iar dacă paragraful este centrat atunci linia va fi centrată.

Image Maps

Uneori este nevoie ca o imagine să poată fi folosită ca legătură spre mai multe pagini diferite. Mai bine zis am vrea ca dacă "apăsăm" pe o anumită regiune a imaginii să fie încărcată o pagină Web, iar dacă "apăsăm" pe o altă regiune să fie încărcată o altă pagină Web. Aceste imagini sunt numite imagini-hartă (image maps).

Pentru ca o imagine să fie considerată o hartă, trebuie ca tag-ul <IMG> să primească parametrul USEMAP. Acest parametru va indica harta care va fi folosită pentru imaginea respectivă. Pentru a crea o hartă se foloseşte un nou tag HTML numit <MAP>. Acest tag are un parametru numit NAME care permite denumirea hărţii. Între opening tag-ul şi closing tag-ul acestei comenzi trebuie definite regiunile de pe hartă care corespund fiecărei pagini la care se doreşte să se ajungă. Pentru definirea unei regiuni trebuie folosit tag-ul <AREA> care are parametrii SHAPE, COORDS şi HREF.

Parametrul SHAPE poate lua valorile rect, poly şi circle şi indică forma regiunii (dreptunghi, poligon sau cerc).

Valorile parametrul COORDS depind de valorile parametrului SHAPE. Pentru dreptunghiuri el trebuie să conţină patru numere, reprezentând coordonatele (în pixeli) colţurilor stânga-sus şi dreapta-jos ale dreptunghiului. Pentru poligoane parametrul COORDS trebuie să conţină un număr de perechi de numere egal cu numărul de vârfuri ale poligonului. Pentru cercuri acest parametru va conţine trei numere, primele două reprezentând coordonatele centrului, respectiv raza acestui cerc.

Iată un fişier HTML care ilustrează folosirea acestei modalităţi de a crea image maps:

<html>

<head>

<title> Image Map </title>

<map name = "harta">

<area shape="poly" coords="217, 215, 185, 84, 109, 159" href="page1.html">

<area shape="poly" coords="5, 218, 139, 185, 64, 108" href="page2.html">

<area shape="poly" coords="5, 7, 33, 141, 112, 61" href="page3.html">

<area shape="poly" coords="216, 5, 86, 39, 161, 109" href="page4.html">

<area shape="circle" coords="111, 111, 30" href="page5.html">

</map>

<img src="imagemap.gif" width=220 height=220 usemap="#harta" ISMAP> </a>

</body>

</html>

Au fost definite patru regiuni în formă de triunghi şi una în formă de cerc. Parametrul ISMAP al tag-ului <IMG> indică faptul că întreaga imagine poate fi tratată ca un link şi poate fi folosită pentru browser-ele mai vechi care nu permit declasarea de imagini hărţi. În acest caz un click pe imagine va avea ca efect afişarea paginii corespunzătoare fişierului NOMAPS.HTML.

Tabele

Una dintre cele mai puternice unelte folosite în proiectarea paginilor Web este tabelul. Folosirea tabelelor permite aranjarea textului şi a imaginilor pe mai multe linii şi coloane.

Pentru a crea un tabel, tag-ul HTML corespunzător este <TABLE>. Pentru ca celulele tabelului să aibă chenare, se foloseşte parametrul BORDER cu ajutorul căruia se precizează grosimea (în pixeli) liniilor care formează chenarele.

Pentru a crea o nouă linie în tabel, trebuie folosit tag-ul <TR>. O linie conţine una sau mai multe "celule". Pentru a crea aceste celule trebuie folosit tag-ul <TD>. O celulă este o regiune dreptunghiulară a ecranului care poate conţine text, imagini şi aproape orice altceva.

<html>

<head>

<title> Tabel </title>

</head>

<body>

<table border = 2>

<tr>

Celula aceasta contine numai text.

Celula urmatoare contine numai o imagine. </div> </td>

Aceasta celula contine si text si o imagine.

<img src = "monster.jpg" height = 96 width = 160> </div> </td>

</tr>

</table>

</body>

</html>

Efectul este următorul:

Trebuie precizat faptul că un tag folosit într-o anumită celulă va avea efect numai în acea celulă, neafectându-le pe celelalte. Tot aşa, tag-urile folosite în afara unui tabel nu au efect în interiorul tabelului.

Pentru a ilustra acest lucru, să considerăm fişierele HTML de mai jos:

<html>

<head>

<title> NO </title>

<body>

<font size = 5>

<table>

<tr>

<td> Napoca </font> </td>

</tr>

</table>

</font>

</body>

</html>

<html>

<head>

<title> YES </title>

<body>

<table>

<tr>

</td>

<td> <font size = 6> Napoca </font>

</td>

</tr>

</table>

</body>

</html>

În imaginile de mai jos se observă că în primul caz cuvântul "Napoca" este scris cu litere normale deoarece nici tag-ul  din afara tabelului şi nici tag-ul  din prima celulă nu au efect în a doua celulă. Pentru ca "Napoca" să apară cu literele dorite, trebuie folosit tag-ul  aşa cum este arătat în al doilea exemplu.

În mod normal o celulă va fi atât de mare cât e nevoie pentru ca elementele ei să încapă în ea. La fel, mărimea tabelului va depinde de mărimea celulelor componente. Există totuşi posibilitatea de a defini mărimea unui tabel cu ajutorul parametrilor HEIGHT şi WIDTH ai tag-ului <TABLE>. Pot fi precizate şi dimensiunile fiecărei celule în parte cu ajutorul aceloraşi parametri, dar transmişi tag-ului <TD>.

Exemplu:

<html>

<head>

<title> Dimensiuni tabel </title>

</head>

<body bgolor = "blue" text = "white">

<table width=200 height=50>

<tr>

<td width=25%> Celula mica </td>

<td width=75%> Celula mare </td>

</tr>

</table>

</body>

</html>

Pagina afişată este următoarea:

Conţinutul unei celule sau conţinutul tuturor celulelor de pe un rând poate fi aliniat atât orizontal cât şi vertical folosind parametrii ALIGN şi VALIGN ai tag-urilor <TR>, respectiv <TD>. Valorile parametrului ALIGN pot fi left, right sau center, iar cele ale parametrului VALIGN pot fi top, bottom sau middle.

Pentru ca o celulă să ocupe mai multe coloane decât ar fi trebuit în mod normal, poate fi folosit parametrul COLSPAN. Pentru ca o celulă să ocupe mai multe linii, tag-ul folosit este ROWSPAN.

Exemplu:

<html>

<head>

<title> Imnul Regal </title>

</head>

<body>

<table border = 2>

<tr>

L O N G

L I V E

T H E

K I N G

<div align = "center">

<font size = 6> 10 Mai </font>

</div>

</td>

</tr>

<tr>

<td> Un vultur veni din munte

Si ne'a zis: "Romani eroi,

Stiu un print viteaz si tanar

Ce-ar veni cu drag la voi. </td>

<td> Fa'te liber, desrobeste

Mandra Tara ce o ai."

Si noi liberi ne facuram

Tot in zi de 10 MAI. </td>

</tr>

<tr>

<td> Daca vreti vi'L dau ca Voda."

Noi cu totii: "Sa ni'L dai!"

Si ne'a dat pe Voda Carol

Intr'o zi de 10 MAI. </td>

<td> Si-a venit din nou vulturul

Si ne'a zis: "Popor Roman,

V'ati luptat cumplit la Plevna

Dusi in foc de-al vostru Domn. </td>

</tr>

<tr>

<td> Si-a venit vulturul iara

Si ne'a zis: "Popor Roman,

Esti viteaz, de ce mai suferi

Jugul unui neam pagan? </td>

<td> Vrednic e sa'L faceti Rege

Intr'o Tara ca un rai".

Si noi Rege ni'L facuram

Tot in zi de 10 MAI. </td>

</tr> </tr>

10 MAI ne'o fi de-a pururi

Sfanta zi ca ea ne'a dat

Domn puternic Tarii noastre,

Libertate si Regat! </td>

</tr>

</table>

</body>

</html>

Efectul este următorul:

Trebuie precizat faptul că toţi membrii redacţiei respectă Constituţia României, ca urmare şi forma de guvernământ actuală. Ne cerem scuze faţă de cei care nu doresc să-şi amintească unele lucruri din istoria României. În rest, sperăm că poezia am reprodus-o exact.

Un tabel, o linie sau o celulă poate avea un background diferit de alte background-uri care pot apărea în pagină. Pentru aceasta trebuie folosiţi parametrii BGCOLOR şi BACKGROUND ai tag-urilor <table>, <TR>, respectiv <TD>. Poate fi controlat şi spaţiul din jurul marginilor tabelului prin folosirea parametrilor CELLPADDING şi CELLSPACING ai tag-ului <TABLE>. Cu ajutorul parametrului CELLSPACING poate fi setat spaţiul dintre marginile tabelului şi dintre celule. Parametrul CELLPADDING permite setarea spaţiului care va înconjura elementele unei celule.

Fişierul HTML următor ilustrează folosirea acestor parametri:

<html>

<head>

<title>Fundal</title>

</head>

<body bgcolor = "D0D080">

<table border=1 cellpadding=10 cellspacing=5>

<tr>

<td bgcolor = "#FF8080">  AGORA  </td>

<td bgcolor = "#A0FFA0"> AGORA  </td>

<td bgcolor = "#C0C0FF"> AGORA  </td>

</tr>

<tr>

<td bgcolor = "#80FF80"> AGORA  </td>

<td bgcolor = "#A0A0FF"> AGORA  </td>

<td bgcolor = "#FFC0C0"> AGORA  </td>

</tr>

<tr>

<td bgcolor = "#8080FF"> AGORA  </td>

<td bgcolor = "#FFA0A0"> AGORA  </td>

<td bgcolor = "#C0FFC0"> AGORA  </td>

</tr>

</table>

</body>

</html>

Efectul poate fi văzut în imaginea următoare:

După cum am mai spus componentele unei celule pot fi aproape orice. Există posibilitatea ca o celulă să conţină la rândul ei un tabel sau chiar mai multe. Pentru a realiza acest lucru ajunge ca tag-ul <TABLE> să apară între opening tag-ul şi closing tag-ul comenzii <TD>.

Atenţie!

Folosirea tabelelor nu este recomandată decât atunci când este absolut necesară. Încărcarea unui tabel durează relativ mult, deoarece la început trebuie calculată mărimea tuturor componentelor tabelului (şi trebuie încărcate fişierele corespunzătoare dacă apar imagini) înainte ca o parte a tabelului să poată fi afişată. Acest interval de timp poate fi micşorat dacă se precizează lăţimea şi înălţimea fiecărei componente folosind parametrii WIDTH şi HEIGHT ai diferitelor tag-uri.

Mihai Scorţaru este student la Universitatea Tehnică din Cluj. Poate fi contactat prin e-mail la adresa: scort@licj.soroscj.ro

Pagini WEB cu HTML 3.2

Mihai Scorţaru

Conţinutul unei pagini Web "profesionale"

Spaţierea şi punerea în chenar a imaginilor

Caracteristicile liniilor orizontale

Image Maps

Tabele

[cuprins]