Indicatii pentru incepatori

Daca esti incepator, in acest tutorial vei gasi cateva indicatii care te vor ajuta sa construiesti o pagina
web.

1. Inchide intotdeauna tag-urile

Cand deschizi un tag HTML (ex. <b>, <p>), nu uita sa il inchizi. Iata un exemplu:

<b>Animalele mele preferate sunt pisicile si cainii.</b>

<p>Animalele mele preferate sunt pisicile si cainii.</p>

<center>Animalele mele preferate sunt pisicile si cainii.</center>

Inchizand toate tag-urile, te asiguri ca pagina ta HTML va functiona in orice browser, in special atunci
cand folosesti tag-urile <table>, <tr> sau <td>.

Exista cateva tag-uri pentru care aceasta regula nu se aplica, deoarece ele nu au tag de inchidere:
• tag-ul <br>, pentru trecerea la linia urmatoare
• tag-ul <img>, pentru inserarea unei imagini

2. Foloseste stiluri
Documentele de stiluri, cum este de exemplu CSS, iti vor face viata mai usoara. Folosind stiluri, nu
mai trebuie sa folosesti tag-ul font pentru a formata fiecare portiune de text in parte, ci poti sa creezi
reguli (clase) pe care sa le aplici in mod repetat. Astfel, iti va fi mai usor sa controlezi aspectul paginii,
modificand un singur fisier de stil (CSS).

3. Valideaza codul HTML

Inainte de a copia fisierele pe site, poti valida paginile HTML pentru a te asigura ca nu contin erori.
Programele de validare vor semnala probleme ca: lipsa unor tag-uri sau tabele, folosirea unor tag-uri
incompatibile cu anumite browsere, etc. Nu uita: daca pagina ta arata bine intr-un browser, aceasta
nu inseamna ca va arata la fel in orice browser.

Aceste programe de validare te vor invata cum sa folosesti corect tag-urile HTML. Le poti gasi gratuit
pe Web - de exemplu W3C Markup Validation Service sau WDG HTML Validator.

4. Comenteaza codul HTML

Incearca sa incluzi cat mai multe comentarii in codul HTML, si sa lasi spatiu in jurul tag-urilor pentru a
imparti pagina in sectiuni.

Iata un exemplu de cod fara comentarii:

<tr>
<td valign="top">
<p><a href="pagina1.htm" target=_blank><img
src="imagini/poza1.gif" width=108 height=80 border=0></a></p>
<p><b>TITLU </b>
<br>
Textul paginii
</p>
<p><a href="pagina2.htm" target=_blank> Link</a>
<br><a href="pagina3.htm">Download</a><br></p>
</td>
<td><img src="../../imagini/spatiu.gif" width=10 height=1></td>
<td valign="top">
<p><img src="imagini/spatiu1.gif" width=108 height=78
border=0></p>
</td>
<td><img src="../../imagini/spatiu.gif" width=10 height=1></td>
<td valign="top">
<p><img src="images/spatiu2.gif" width=108 height=78
border=0></p>
</td>
</tr>

Mai jos, poti vedea acelasi cod cu spatii inserate si comentarii:

<!—Inceputul tabelului -->

<tr>
<!-- Coloana 1 -->
<td valign="top">
<p><a href="pagina1.htm" target=_blank><img
src="imagini/poza1.gif" width=108 height=80 border=0></a></p>
<p><b>TITLU </b>
<br>
Textul paginii
</p>
<p><a href="pagina2.htm" target=_blank> Link</a>
<br><a href="pagina3.htm">Download</a><br></p>
</td>
<!-- Spatiu -->
<td><img src="../../imagini/spatiu.gif" width=10 height=1></td>
<!-- Coloana 2 -->
<td valign="top">
<p><img src="imagini/spatiu1.gif" width=108 height=78
border=0></p>
</td>
<!-- Spatiu -->
<td><img src="../../imagini/spatiu.gif" width=10 height=1></td>
<!-- Coloana 3 -->
<td valign="top">
<p><img src="images/spatiu2.gif" width=108 height=78
border=0></p>
</td>
<!— Sfarsitul tabelului -->
</tr>

Poti observa ca exemplul comentat este mult mai usor de citit si de inteles.
5. Calea catre imagini
Multi incepatori folosesc tag-ul <img> in mod gresit. Chiar daca pagina arata bine pe
calculatorul tau, asigura-te ca imaginile sunt incarcate corect si dupa ce fisierele au fost copiate
pe server.

Problemele apar atunci cand sunt folosite cai de genul „file://”, in loc de cai relative.

Pentru ca imaginile de pe pagina ta Web sa fie incluse corect in codul HTML, urmeaza
indicatiile de mai jos:

A) Daca este posibil, foloseste cai relative

Caile relative sunt recomandate deoarece vor functiona de fiecare data cand pagina si imaginile
sunt localizate pe aceeasi masina (local sau pe un server). De exemplu, daca imaginea se afla in
acelasi director cu pagina, foloseste:

<img src="poza.jpg">

Daca imaginea se afla intr-un director separat destinat imaginilor (imagini), pe acelasi nivel cu
pagina ta HTML, foloseste:

<img src="imagini/poza.jpg">

Daca imaginea se afla intr-un director pe un nivel superior paginii, foloseste:

<img src="../imagini/poza.jpg">

B) Utilizeaza cai relative la directorul radacina al site-ului

Daca toate imaginile tale se afla intr-un director imagini aflat in directorul radacina al site-ului,
poti folosi codul:

<img src="/imagini/poza.jpg">

Astfel poti muta pagina HTML oriunde in cadrul site-ului, si caile catre imagini vor functiona (in
cazul in care pastrezi imaginile in directorul imagini).

Dezavantajul ar fi ca aceste cai sunt valabile pentru paginile aflate pe server (folosind http://), si
nu atunci cand sunt deschise local, de pe disc (folosind file://).

C) NU folosi cai absolute

Daca este posibil, evita folosirea cailor absolute in cadrul site-ului. O cale absoluta incepe cu
http:// sau file://. Ca exemplu, daca pagina aflata pe calculatorul tau contine un tag img de genul:

<img src="file:///C:|/siteweb/imagini/poza.jpg">

ea nu va functiona daca este copiata pe server, deoarece tag-ul img se refera la un fisier aflat pe
disc. Poti schimba calea catre imagine in modul urmator:
<img src="poza.jpg">

sau:

<img src="../imagini/poza.jpg">

6. Foloseste atributele Width si Height

Este bine sa specifici inaltimea si latimea imaginii in tag-ul <img>. De exemplu:

<img src="poza.jpg" width="234" height="123">

Avantajul este ca browserul poate afisa pagina mai repede, stiind cum sa aseze imaginile inainte
de a fi incarcate. Aceasta inseamna ca vizitatorii site-ului pot vedea continutul paginii fara sa
astepte incarcarea imaginilor.

Majoritatea editoarelor de imagini (Photoshop, Paint Shop Pro, etc) iti permit vizualizarea
dimensiunilor imaginii (in pixeli) astfel incat poti trece inaltimea si latimea imaginii in tag-ul
<img>. O alta modalitate de a afla dimensiunile unei imagini este sa o deschizi intr-un browser,
apoi sa dai click drepta pe ea, selectand Properties (in IE), sau poti citi dimensiunea din „title
bar” (in Mozilla sau Netscape).

7. Spatii
Daca vrei ca anumite cuvinte dintr-un text sa ramana alaturate (pe acelasi rand), foloseste tag-ul
&nbsp; in loc de space.

De exemplu, cuvintele urmatoare vor fi despartite daca se afla la sfarsitul unei linii:

<p> Animalele mele preferate sunt pisicile si cainii </p>

pe cand, in exemplul urmator, care foloseste &nbsp;, cuvintele "sunt" si "pisicile" vor ramane
alaturate chiar daca se afla la capatul randului:

<p> Animalele mele preferate sunt pisicile&nbsp;si cainii </p>

8. Utilizarea tabelelor pentru aranjarea paginii

Tabelele nu sunt folosite numai pentru afisarea unor linii si coloane, ci si pentru a imbunatati aspectul
paginii. Poti utiliza tabelele pentru a separa anumite elemente in cadrul paginii, asigurandu-te ca
acestea apar acolo unde ar trebui.

9. Crearea unor celule fara continut

De multe ori vei dori sa creezi o celula (<td>) fara continut pentru a obtine un aspect placut al
paginii. De obicei, cea mai buna metoda de a introduce o astfel de celula este utilizand elementul
&anp;nbsp;
<td>&nbsp;</td>

NU folosi <td></td> deoarece tabelul poate aparea ciudat in anumite browsere.

10. Folosirea unui fisier GIF pentru inserarea spatiilor

Pentru un control precis al formatului paginii, fara CSS, poti utiliza imagini GIF. Cu ajutorul unui GIF
transparent cu dimensiunile 1 pixel x 1 pixel, care va fi invizibil pe pagina ta Web, si folosind atributele
width si height, poti controla spatiul dintre imagini, text sau celulele tabelelor. De exemplu, codul:

<img src="poza1.gif" width="20" height="20" border="0">

<img src="spatiu.gif" width="10" height="1" border="0">
<img src="poza2.gif" width="20" height="20" border="0">

va crea un spatiu de 10 pixeli pe orizontala intre cele doua imagini, poza1.gif si poza2.gif.

Poti folosi GIF-ul si in tabele pentru a te asigura ca o celula nu se va micsora sub o anumita inaltime
sau latime. In acest exemplu:

<td><img src="spatiu.gif" width="1" height="20"

border="0"></td>

celula va avea intotdeauna cel putin 20 pixeli inaltime.

Poti crea o astfel de imagine GIF intr-un editor grafic – deschide o imagine noua cu marimea de 1
pixel x 1 pixel si salveaz-o ca un GIF cu fundal (background) transparent.