Elemente ale unei pagini web: Head

Revenind la documentul nostru, vedem că primul set de etichete se numește head. Aici vom pune informații despre pagina în sine (numite metadate) și unde ne vom conecta la orice alte resurse, cum ar fi scripturi și fișiere care nu fac parte din pagina pe care o folosim. Este important ca etichetele
<head> să fie întotdeauna primul set de etichete după <html>, deoarece aceasta este ordinea în care browserele așteaptă informațiile.

Pentru a furniza câteva informații de bază despre pagina sau site-ul nostru, vom adăuga câteva meta-etichete în head pentru a-i oferi un titlu, cuvinte cheie, o descriere și alte detalii. Aceste informații îi ajută pe utilizator și pe roboți să înțeleagă despre ce este vorba în pagină.

Fiecare dintre aceste elemente sunt toate părți ale etichetei meta (<meta/>). Unele etichete au caracteristici speciale care pot fi adăugate la definițiile lor; acestea se numesc atribute. Metaetichetele acceptă atribute precum numele și conținutul. Modul în care definim aceste atribute va ajuta browserul să înțeleagă mai bine pagina noastră. Vom seta titlul nostru ca Prima Pagină, vom adăuga cuvintele cheie începând cu html, învățare și CSIT-107, iar pentru o descriere vom pune în câteva rânduri despre ceea ce facem și, în final, vom adăuga numele nostru:

<head>
<title>Prima Pagină</title>
<meta name="keywords" content="html începători, învățare,
CSIT-107" />
<meta name="description" content="O pagină de început pentru
CSIT-107 SUNY Fredonia" />
<meta name="author" content="Nume" />
</head>

Există câteva lucruri în acest exemplu pe care să le analizăm. În primul rând, veți observa că titlul are propria etichetă. Ceea ce ați introdus în această etichetă este ceea ce va apărea ca titlu în fereastra browserului dvs. și în fila din browser pentru această pagină (puteți avea doar un set de aceste etichete într-un document). Rețineți că acest titlu nu va apărea pe pagina în sine. Dacă dorim să o includem ca parte a conținutului paginii noastre, am face asta în etichetele body.

În continuare, vedem că valorile atribuite numelui și conținutului sunt plasate între ghilimele. Textul dintre ghilimele identifică ceea ce aparține acelui atribut. Deși este o practică standard să folosim șiruri de caractere duble, putem folosi și ghilimele simple. Acestea pot fi utile atunci când creați declarații HTML precum cele de mai sus ca rezultate din alte limbi (vom vedea exemple în acest sens în PHP).

De asemenea, puteți observa că cuvintele noastre cheie sunt separate prin virgulă, ceea ce înseamnă că le despărțim punând virgule între diferite valori; nu trebuie să adăugăm ghilimele separate în jurul fiecărui cuvânt sau expresie.

În specificațiile HTML5, metaeticheta poate avea și atribute numite charset și http-equiv. Charset ne permite să specificăm un anumit set de caractere pe care dorim să-l folosim pentru pagină, un http-equiv acceptă tipul de conținut, stilul implicit și reîmprospătarea ca opțiuni. Acest lucru ne permite să spunem browserului ce tip de pagină avem (în cazul nostru, text/html), să numim o foaie de stil implicită (vom ajunge la aceasta mai târziu) și să specificăm în termeni de secunde cât de des dorim să reîmprospătăm pagina, eventual deloc.

Deoarece conținutul nostru nu se va schimba decât dacă modificăm pagina noi înșine și nu avem încă o foaie de stil, vom adăuga doar declarația noastră de tip de conținut pentru moment:

<meta http-equiv="content-type" content="text/html" />

Meta este, de asemenea, locul în care vom defini elementele din cache, cum ar fi cât de mult poate fi stocată pagina noastră înainte de a expira sau dacă vrem chiar să expire conținutul, ca în aceste exemple:

<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu

Articol publicat sub licență CC BY-NC-SA 3.0