8/14/2019 Indicatii pentru incepatori

1/5

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

), nu uita sa il inchizi. Iata un exemplu:

Animalele mele preferate sunt pisicile si cainii.

Animalele mele preferate sunt pisicile si cainii.

Animalele mele preferate sunt pisicile si cainii.

Inchizand toate tag-urile, te asiguri ca pagina ta HTML va functiona in orice browser, in special atunci

cand folosesti tag-urile , sau .

Exista cateva tag-uri pentru care aceasta regula nu se aplica, deoarece ele nu au tag de inchidere:

tag-ul
, pentru trecerea la linia urmatoare

tag-ul , 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 exempluW3C Markup Validation ServicesauWDG 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:

http://validator.w3.org/http://validator.w3.org/http://validator.w3.org/http://htmlhelp.com/tools/validator/http://htmlhelp.com/tools/validator/http://htmlhelp.com/tools/validator/http://htmlhelp.com/tools/validator/http://validator.w3.org/

8/14/2019 Indicatii pentru incepatori

2/5

TITLU
Textul paginii

Link
Download

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

TITLU
Textul paginii

Link
Download

Poti observa ca exemplul comentat este mult mai usor de citit si de inteles.

8/14/2019 Indicatii pentru incepatori

3/5

5. Calea catre imagini

Multi incepatori folosesc tag-ul 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:

Daca imaginea se afla intr-un director separat destinat imaginilor (imagini), pe acelasi nivel cu

pagina ta HTML, foloseste:

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

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:

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 absoluteDaca 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:

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:

8/14/2019 Indicatii pentru incepatori

4/5

sau:

6. Foloseste atributele Width si HeightEste bine sa specifici inaltimea si latimea imaginii in tag-ul . De exemplu:

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

. 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

in loc de space.

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

Animalele mele preferate sunt pisicile si cainii

pe cand, in exemplul urmator, care foloseste , cuvintele "sunt" si "pisicile" vor ramane

alaturate chiar daca se afla la capatul randului:

Animalele mele preferate sunt pisicilesi cainii

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 caacestea apar acolo unde ar trebui.

9. Crearea unor celule fara continut

De multe ori vei dori sa creezi o celula () 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;

8/14/2019 Indicatii pentru incepatori

5/5

NU folosi 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:

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:

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.