Notiuni pregatitoare pentru realizarea unei pagini web HTML
Cateva cuvinte despre fisiere html. Documentatie bogata si exemple de folosire exista din belsug. Cine vrea sa invete nu are decat sa tasteze in caseta de text a browser-ului cuvinte legate de html (html, taguri, nume de tag, etc.) sau adresa unui site serios si specializat (marplo, w3c, etc.), si va gasi bibliografie bogata atat in lb. romana cat si in lb. engleza. De asemenea putem folosi cate caractere spatiu dorim, browserul va lua in consideratie doar unul.
Deci:
Ceea ce scrim in pagina html este interpretat de browser si ceea ce este scris cu sintaxa corecta va fi afisat pe ecran. Practic toate site-urile si paginile de pe internet au la baza pagini html. Deci nu putem invata altceva pana nu invatam html.
O pagina html se compune din:
- text obisnuit care va fi afisat pe ecran, imagini, tabele.
- instructiuni catre browser care se scriu in interiorul parantezelor unghiulare < si >. Expresia <tag> se numeste marcaj sau tag.
Pentru a realiza o pagina html deschidem un editor de text simplu si scrim cod html:
Codul html incepe obligatoriu cu marcajul <html> si se termina obligatoriu cu marcajul </html>.
Iata un mic exemplu:
<html>
<head><title>Titlu paginii</title>
</head>
<body>
Ce va fi afisat in pagina.
</body>
</html>
Observati ca marcajele de mai sus sunt pereche. Folosirea lor este obligatorie,
marcajele pereche se folosesc ptr a include in interiorul lor diverse alte date (texte, alte marcaje).
Deci ca regula:
Marcajele (sau Tag-uri) care includ alte tag-uri sau text se scriu cu marcaj de inchidere.
Exemplu:
<nume_tag atribut1="valoare1".. atributN="valoare">continut..</nume_tag>
Primul tag este de deschidere, iar al doilea de inchidere. Atributele se folosesc ptr a da functionalitate si forma tagului in care sunt incluse.
Exista si marcaje singulare (fara pereche) ca de exemplu:
<br/> (semnificatie trecere la linie noua). Observati modul de scriere: se adauga / (slash) inainte de ">".
Un fisier html este format din doua mari parti:
-
Zona de antet (header), in care se scriu diverse informatii. Acestea nu apar in pagina afisata dar sunt de foarte mare ajutor. Observam tagul pareche <title> si </title> in care noi scrim titlul paginii asa cum dorim.
-
Zona de body sau
corpul paginii propriu-zis; informatiile scrise aici apar in pagina, asupra careia ne concentram imediat:
Taguri pt. titluri in pagina: sunt de forma:
<hN>Nume titlu</hN> unde N este un numar natural cu valori de la 1 la 6 desemnand marimea caracterelor ce compun titlul. Daca N este 1 titlul va avea cea mai mare marime, iar cand N este 6 titlul va avea cea mai mica marime.
Precizari obligatorii:
- In interiorul marcajului de deschidere se introduc perechi atribut="valoare" ptr a seta functionalitatea si designul tagului respectiv.
- Grafica /designul unui tag se pot seta si cu ajutorul foilor de stil CSS.
Tag pt. paragrafe este de forma:
<p atribut1="valoare1" ... atributN="valoareN">Paragraful propriu-zis </p>
Observatie: tagurile ptr titluri, paragrafe si altele sunt numite elemente la nivel de bloc, adica atunci cand browserul interpreteaza codul, continutul acestor taguri va apare pe un rand nou, chiar daca noi nu am specificat asta.
Deci retineti :
1. Tot ce se scrie pt. nume de taguri si atribute se scrie cu litere mici.
2. Valoarea atributelor se trece intre ghilimele duble. Daca un atribut anume nu e specificat, programul va folosi valoarea implicita.
3. Daca tagul nu are si pereche-tag de inchidere, dupa ce s-a scris tot ce este necsar in interiorul tagului, se adauga semnul de inchidere slash (/) inainte de ">".
4. Este bine ca fiecare tag sa aiba un identificator unic, adica un atributului id.
5. O greseala de scriere poate determina browserul sa abandoneze interpretarea tagului respectiv.
Exemplu:
Pt. tagul <img> (acest tag introduce o imagine in pagina) stabilim id cu valoarea "poza1", latimea la 350pixeli, inaltimea la 400 pixeli, iar fisierul cu imagine se numeste "poza_mea.jpg".
(id, src, width, height sunt o parte din atributele tagului img)
<img id="poza1" src="calea/catre/fisierul_cu_imagine/poza_mea.jpg" width="350px" height="600px" />
Incercati diverse taguri si studiati efectul; nu pierdeti nimic dimpotriva castigati experienta.
Pt. a vizualiza scriti fisierul in notepad sau alt editor de text simplu il salvat apoi in radacina arborelui de documente sau in alt director inclus in radacina si cu dublu-click, sau clic dreapta il deschideti.