1. despre structura unei pagini HTML
Majoritatea paginilor Web au cateva lucruri in comun, cum ar fi sectiunile head si body, marcate prin tag-urile: <head> si respectiv <body>. Anumite informatii despre pagina, cum ar fi titlul, se scriu in sectiunea head, iar continutul propriu-zis al paginii - in body. De asemenea, fiecare pagina HTML incepe si se termina cu tag-ul <html> (</html>). 



SFATURI !

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.

Tipuri de liste

Exista 3 tipuri pentru liste:

1. Liste neordonate (cunoscute si ca "bullet"). De exemplu:
  - Merele sunt verzi
  - Bananele sunt galbene
  - Portocalele sunt portocalii

2. Liste ordonate (sau numerotate). De exemplu:
1. Aprindeti pocnitoarea.
2. Aruncati-o.

3. Liste de definitii
Acestea sunt folosite in cazul cand fiecare element al listei are nevoie de un sumar, urmat de descriere mai detaliata. De exemplu:

Paris, Franta
Capitala Frantei. Printre atractii se numara turnul Eiffel si catedrala Notre Dame.
Sydney, Australia
Capitala statului New South Wales, Australia. Atractii: Opera si podul Harbour.
Londra, Anglia
Capitala Angliei. Obiective turistice: Tower Bridge si Big Ben.

Sa vedem cum putem crea aceste tipuri de liste in HTML.

Crearea listelor neordonate
Pentru a crea o lista neordonata folosim tag-urile <UL></UL>; la inceputul si sfarsitul listei si <LI></LI> pentru fiecare element.

Pentru exemplul de mai sus, codul HTML este:

<ul>
<li> Merele sunt verzi  </li>
<li> Bananele sunt galbene  </li>
<li> Portocalele sunt portocalii  </li>
</ul>

(Tag-urile </LI> sunt optionale, dar le vom folosi pentru a evita ambiguitatile.)

Crearea listelor ordonate
Pentru listele ordonate (numerotate), metoda este aceeasi, cu singura deosebire ca tag-urile folosite vor fi <OL></OL> in loc de <UL></UL>.
Pentru exemplul de mai sus, codul este:

<ol>
<li> Aprindeti pocnitoarea.</li>
<li> Aruncati-o.</li>
</ol>

Crearea listelor de definitii
Listele de definitii sunt ceva mai greu de realizat fata de primele doua tipuri, dar metoda este totusi destul de simpla.

Lista va fi creata folosind tag-urile <DL> si </DL> pentru inceput si sfarsit. Fiecare element al listei este alcatuit dintr-un termen creat cu ajutorul tag-urilor <DT></DT> si definitia propriu-zisa pentru care sunt folosite tag-urile <DD></DD>.

Deci, codul pentru exemplul de mai sus este:

<dl>
<dt><strong>Paris, Franta</strong></dt>
<dd> Capitala Frantei. Printre atractii se numara 
          turnul Eiffel si catedrala Notre Dame.  </dd>
<dt><strong>Sydney, Australia</strong></dt>
<dd> Capitala statului New South Wales, Australia. 
          Atractii: Opera si podul Harbour.  </dd>
<dt><strong>Londra, Anglia</strong></dt>
<dd> Capitala Angliei. Obiective turistice: Tower Bridge 
          si Big Ben. </dd>
</dl>

Liste imbricate
Este posibil ca in cadrul unei liste sa avem o alta lista. De exemplu, o lista cu doua niveluri poate fi:

1. Capitolul 1
  1. Sectiunea 1.1
  2. Sectiunea 1.2
2. Capitolul 2
  1. Sectiunea 2.1
  2. Sectiunea 2.2
  3. Sectiunea 2.3

Codul HTML pentru crearea listei de mai sus este:

<ol>
  <li>Capitolul 1
    <ol>
      <li> Sectiunea 1.1</li>
      <li> Sectiunea 1.2</li>
    </ol>
  </li>
  <li>Capitolul 2
    <ol>
      <li> Sectiunea 2.1</li>
      <li> Sectiunea 2.2</li>
      <li> Sectiunea 2.3</li>
    </ol>
  </li>
</ol>

Pot fi imbricate tipuri diferite de liste. In exemplul urmator, liste ordonate si cele neordonate sunt definite in cadrul unei liste de definitii.

Fructe
  - Merele sunt verzi
  - Bananele sunt galbene
  - Portocalele sunt portocalii

Instructiuni pentru artificii
1. Aprindeti pocnitoarea.
2. Aruncati-o.

Codul HTML este:

<dl>
  <dt><strong>Fructe</strong></dt>
  <dd>
    <ul>
<li> Merele sunt verzi  </li>
<li> Bananele sunt galbene  </li>
<li> Portocalele sunt portocalii  </li>
   </ul>
  </dd>
  <dt><strong>Instructiuni pentru artificii</strong></dt>
  <dd>
    <ol>
      <li>Aprindeti pocnitoarea.</li>
      <li>Aruncati-o.</li>
    </ol>
  </dd>
</dl>





PENTRU MAPAREA IMAGINILOR

In general, sintaxa pentru tag-ul map este:

<map name="nume">
<area    shape="forma ariei"
    coords="coordonatele ariei"
    href="hyperlink-ul ariei" sau nohref
    target="hyperlink target"
    title="titlul ariei">
<area shape="forma ariei...">
</map>

Deci, fiecare mapare a unei imagini are un nume (name) si contine mai multe tag-uri area. Tag-urile area au urmatoarele atribute:

shape="rect | circle | poly | default"

Atributul shape precizeaza forma ariei. Valorile posibile sunt:
  - rect (forma dreptunghiulara),
  - circle (forma circulara),
  - poly (un poligon arbitrar cu 3 sau mai multe varfuri), sau
  - default (reprezinta restul imaginii care nu este definita in tag-urile area).

coords="coordonate"
Acest atribut precizeaza coordonatele care definesc colturile ariei. Coordonatele depind de forma ariei specificata prin atributul shape.

Poti observa ca toata valorile coordonatelor sunt relative la coltul din stanga sus al imaginii. Cu alte cuvinte, coltul din stanga sus are intotdeauna coordonatele (0,0).

Pentru un tag area ce are atributul shape="default", nu trebuie sa precizezi coordonatele.

href="hyperlink-ul ariei"

Acesta este URL-ul spre care ati dori sa redirectati zonele definite, el functionand la fel ca un tag <a href="..."> standard.

In plus, in loc de acesta poti specifica un atribut nohref daca vrei ca un contur sa nu aiba link.

target="hyperlink target"

Cu target poti preciza fereastra unde vrei sa se deschida pagina care reprezinta linkul ariei respective. Si acesta functioneaza ca atributul target dintr-un tag standard.

title="titlul ariei"

Acest atribut iti permite sa denumesti aria respectiva. Cand mouse-ul se afla deasupra acestei arii, browserul va afisa acest titlu.

Plasarea maparii imaginii intr-un fisier separat
Numele maparii imaginii specificat prin atributul usemap este de fapt un URI (Unique Resource Identifier), ceea ce inseamna ca se poate referi la o "harta" aflata in alt fisier de pe site.

De exemplu, daca ai salvat tag-ul map intr-un fisier denumit forme.map din acelasi director cu fisierul HTML, acest tag va fi accesat folosind:

<img src="imagini/relief.jpg" width="298"
height="225" border="0" usemap="forme.map">

Maparea imaginilor server-side
Ca o alternativa la definirea maparii in HTML ce poate fi citita de catre un browser, poti folosi maparea server-side. Cu acest tip de mapare, browser-ul trimite coordonatele (x,y) ale punctului pe care ai dat click la un script server-side (cum ar fi CGI).

Pentru a realiza o mapare server-side, trebuie doar sa incluzi atributul ismap si sa incadrezi imaginea intr-un tag <a href="...">, specificand scriptul server-side spre care vor fi trimise coordonatele (x,y):

<a href="formemap.cgi">
<img src="imagini/relief.jpg" width="298"
height="225" border="0" ismap>
</a>

Cand vei da click pe imagine, browser-ul va trimite coordonatele (x,y) ale punctului respectiv la scriptul server-side "formemap.cgi", care va interpreta valorile x si y, actionand corespunzator.

Ca observatie, in cazul de mai sus coordonatele sunt transmise ca parametri la sfarsitul caii URL.

De exemplu, daca vrei sa dai posibilitatea utilizatorului de a-si alege o tara dintr-o harta a lumii, poti utiliza scriptul server-side pentru a calcula pe ce tara a fost dat click, afisand informatiile destre tara respectiva.

Un alt mod de a crea o mapare server-side este prin includerea unui element de tip <input type="image" ... > in tag-ul form.

<form action="formemap.cgi">
<input type="image" name="relief_imagine"
src="imagini/relief.jpg" width="298"
height="225" border="0">
</form>

In acest caz, coordonatele (x,y) sunt considerate campuri ale tag-ului form, cu denumirea numele_campului.x si numele_campului.y. Deci in exemplul de mai sus, coordonatele vor fi continute in campurile relief_imagine.x si relief_imagine.y.

Este bine sa utilizezi maparea server-side atunci cand maparea presupune mai multe zone, sau cand aceste zone nu sunt simplu definite prin forme simple cum ar fi cercuri, dreptunghiuri sau poligoane.

Trucuri pentru a stabili coordonatele maparii
Daca folosesti un editor de pagini cum ar fi Macromedia Dreamweaver, poti realiza maparea desenand direct pe imagine si lasand editorul sa stabileasca coordonatele.

Daca realizezi pagina fara ajutorul unui editor, o modalitate simpla de a stabili coordonatele este sa schimbi maparea de la client-side la server-side inlocuind atributul usemap="numemap" cu ismap, si adaugand un tag <a href="..."> care sa contina imaginea:

<a href="#"><img src="imagini/relief.jpg" width="298"
height="225" border="0" ismap></a>

O alta metoda ar fi deschiderea imaginii intr-un editor grafic cum ar fi Adobe Photoshop. Cand vei muta mouse-ul deasupra imaginii, vei putea vedea coordonatele punctului respectiv.