Am prezentat în "Partea 1.2. - HTML - prima pagină" un exemplu simplu de document HTML. A venit vremea să îl dezvoltăm puțin. Vom începe prin a adăuga elemente în partea de antet a documentului.
Înainte de toate însă trebuie să știți că există 2 tipuri de etichete:
- etichete de tipul „deschide și închide";
- etichete „simple" sau „de sine stătătoare".
Acum să adăugăm noi etichete la documentul nostru:
Notă: Pentru a păstra ordinea adăugării rândurilor nu le voi renumerota ci pur și simplu numerele care urmează le voi integra acolo unde este nevoie. Și nu uitați numerele de pe margine se ignoră (sau mai bine zis voi când scrieți aceste bucăți de cod în editoarele voastre nu ar trebui să le scrieți/copiați).
1.<!-- INCEPUT COD PAGINA -->
2.<html>
3.<head>
4.<title>Numele paginii noastre</title>
11. <style>
12.<!--COD CSS-->
13.</style>
14.<meta>
15.<link>
16.<script>
17.<!--COD JS-->
18.</script>
5. </head>
6. <body>
7. CONTINUT PAGINA
8.</body>
9. </html>
10.<!--FINAL COD PAGINA-->
După cum spune și titlul vorbim numai și numai despre antetul unui document de tip HTML, aici făcând referire, numai la acele etichete pe care le putem scrie între etichetele „<head>" și „</head>". Deci să începem:
4.<title>
Am mai vorbit despre eticheta „<title>", în capitolele anterioare, care definește titlul paginii. Această etichetă este de tipul „deschide și închide". Asta înseamnă că există, după cum se poate vedea și din definiția generală a acestei etichete și eticheta „</title>".
Toate etichetele de acest tip vor avea și o contra etichetă care conține „/" în fața numelui semnalând astfel închiderea etichetei.
Exemplu de folosire:
<!--INCEPUT BUCATA DE COD-->
<title>Numele paginii noastre</title>
<!--FINAL BUCATA DE COD-->
11.<style>
Eticheta „<style>" definește o zonă pentru codul CSS care se aplică la documentul HTML actual. După cum se poate observa și eticheta „<style>" este tot de tipul "deschide și închide".
Folosirea codului CSS în acest fel nu este recomandată, excepție făcând trimiterea de documente HTML către aplicații dedicate pentru citirea sau trimiterea de emailuri (un exemplu concret ar fi sistemele pentru trimiterea așa numitelor "newslettere") unde se recomandă ca cele mai multe resurse (elemente de still CSS și elemente de script JavaScript să fie în conținutul paginii și nu să fie încărcate din surse externe.
Exemplu de folosire:
<!-- INCEPUT BUCATA DE COD-->
<style>
body {background-color: red;} <!-- Setăm culoarea de fundal a paginii ca fiind rosie-->
</style>
<!--FINAL BUCATA DE COD-->
14. <meta>
Eticheta <meta> este o etichetă mai complexă deoarece poate suporta mai multe opțiuni.
Lista opțiunilor pe care le putem folosii atunci cand folosim eticheta meta este foarte mare și poate fi găsită aici:
http://www.metatags.org/all_metatags
După părerea mea, cele mai importante opțiuni sunt:
- keywords: definește cuvintele cheie folosite de către motoarele de căutare pentru a identifica informațiile din documentul nostru HTML;
- description: descrierea site-ului in maxim 3 sau 4 fraze este de asemenea folosita de catre motoarele de cautare;
-robots: folosit de asemena pentru motoarele de cautare pentru a le spune acestora cat de "adanc" sa citeasca site-ul nostru.
Lista optiunilor meta este foarte lunga si ar insemna sa ii dedic foarte mult timp sau chiar o lectie separata, nu imi doresc sa realizez acest lucru la acest moment si deci va las voua, daca aveti nevoie sa cititi in continuare in legatura cu aceasta eticheta.
Exemplu de folosire:
<!-- INCEPUT BUCATA DE COD-->
<meta>
<!--FINAL BUCATA DE COD-->
15.<link>
Eticheta <link> este o eticheta simpla care permite folosirea unui fisier extern pentru stilurile CSS ale site-ului. Folosind aceasta metoda codul HTML al site-ului devine mai usor de citit si/sau scris.
Optiunea rel anunta browserul ce tip de leagtura exista intre documentul curent si cel pe care il va intalnii daca urmarest acest link.
Optiunea type anunta browserul de tipul media al fisierului intalnit daca/cand va urmarii link-ul.
Optiunea href defineste calea catre fisierul extern.
Exemplu de folosire:
<!-- INCEPUT BUCATA DE COD-->
<link>
<!--FINAL BUCATA DE COD-->
16.<script>
Eticheta <script> este o etichete de tipul inchide deschide care permite incorporarea de scripuri (bucati de cod) de in principal de tipul JavaScript, dar nu numai, atat in continutul paginii cat si in fisiere separate. Daca este vorba despre scripturi externe atunci aceasta eticheta are nevoie de optiunea src dar in principiu singura optiune obligatorie pentru eticheta <script> este optiunea type, care anunta browserul ce tip media are scriptul/fisierul intalnit.
Exemplu de folosire atunci cand se foloseste un fisier extern pentru scripturi:
<!-- INCEPUT BUCATA DE COD-->
<script src="scriptulmeu.js"></script>
<!--FINAL BUCATA DE COD-->
Exemplu de folosire atunci cand nu se foloseste un fisier extern pentru scripturi:
<!-- INCEPUT BUCATA DE COD-->
<script>
alert('Aceasta este o alerta!');
</script>
<!--FINAL BUCATA DE COD-->
In principiu acestea sunt etichetele principale care pot aparea in cadrul antetului unei pagini de tip HTML. Ceea ce v-am prezentat eu in acest capitol nu reprezinta totalitatea etichetelor care pot aparea in headerul paginii de tip HTML dar sunt suficiente pentru un bun început.
A.N: Imi cer scuze pentru perioada mare in care nu am mai scris dar am avut un accident nefericit si am avut mana dreapta destul de bine accidentata :(. Acum totul este in regula si sper sa revin cu cat mai multe actualizari.
YOU ARE READING
Dezvoltare web de la 0 la ceva
Non-FictionCeea ce vreau eu să fac este să îi ajut pe toți aceea care vor să înceapă de undeva să învețe cu "ce se mănâncă" programarea web. Până unde voi ajunge cu această carte habar n-am în acest moment, eu sper că atunci când această carte va fi gata, cei...
