Head

Head este un element al HTML vizibil doar în cod, cu mici excepții. Acesta este “capul” unui cod HTML, el apare de fiecare dată la începutul codului.

Este un element de tip metadata (date despre date).

Titlul unei pagini

Elementul <titlu> definește titlul documentului și este necesar în toate documentele HTML.

Elementul <titlu>:

  • definește un titlu în filă browserului
  • oferă un titlu pentru pagină atunci când este adăugată la favorite
  • afișează un titlu pentru pagină din rezultatele motorului de căutare

Un exemplu concret este chiar pagină de wiki Jademy. Se poate observa începutul <head>, iar în ultimul rând <title>start [JADEMY wiki]</title>.

În tab-ul din dreapta sus se poate observă numele site-ului, fiind cel scris între tag-urile <title> </title>.

Elementul meta

Elementul <meta> este utilizat pentru a specifică

  • setul de caractere folosit
  • descrierea paginii
  • cuvinte cheie
  • autor
  • și alte metadate.

Metadatele sunt utilizate de browsere (modul de afișare a conținutului), de motoarele de căutare (cuvinte cheie) și alte servicii web.

Charset
<meta charset=”UTF-8”>

Este cel mai des întâlnit charset, dar, cu toate acestea, mai există și UTF-16.

Fact UTF-8 este codificarea preferată pentru paginile de e-mail și web UTF-16 este utilizat în sisteme și medii de operare majore, cum ar fi Microsoft Windows, Java și .NET.

Așadar, că web developeri, vom fi interesați de **UTF-8**.

De asemenea, în acest screenshot al codului wiki Jademy, se observă faptul că este scris în penultimul rând <meta charset=”UTF-8”> .

Descrierea site-ului

<meta name=”description” content=”descrierea site-ului. Această descriere este cea care va apărea când dăm un search, în orice browser”>

Concret, textul din interiorul atributei content este “Învață Java în sistem Bootcamp. Cursuri cu instructori certificați. Înveți Java de la 0, îți construiecti portofoliu și găsești un loc de muncă”.

Keywords

Reprezintă cuvintele cheie după care motorul de căutare caută paginile web. Acestea trebuie să fie cât mai semnificative!

<meta name=”keywords” content=”keyword1, keyword2, keyword3, etc”>

De exemplu, acest wiki folosește următoarele keywords: <meta name=”keywords” content=”start”>

View port

În HTML, există o metodă pentru a permite web developerilor să preia controlul asupra viewport-ului, prin tag-ul <meta>.

Viewport este zona vizibilă a utilizatorului unei pagini web. Acesta variază în funcție de dispozitiv și va fi mai mic pe un telefon mobil decât pe un ecran al computerului.

Ar trebui să includeți următorul element <meta> viewport în toate paginile dvs. Web.

<meta name=”viewport”  content=”width=device-width, inițial-scale=1.0”>

În imaginea alăturată se pot observa diferențe între un cod care nu conține meta tag-ul viewport și un cod care îl conține.

Exercițiu:

Salvați codul de mai jos într-un fișier. Acesta este foarte important, îl veți folosi în fiecare fișier HTML al dvs. Pe baza template-ului, puteți edita numele paginii, keyword-urile și descrierea site-ului.

<head>
    <title>Numele paginii</title>
    <meta charset="utf-8">
    <meta name="keywords" content="keyword1, keyword2, keyword3, etc">
    <meta name="description" content="descrieredescrieredescrieredescriere">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style.css">
</head>

You could leave a comment if you were logged in.