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 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:
|
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.
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 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: 
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:
sau:
6. Foloseste atributele Width si Height Este 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 pisicile si 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 ca acestea 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;
| | 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.
Related Documents
More Documents from "lavinia"
