Esercitazione HTML

HTML HOME Introduzione all'HTML Editor HTML HTML di base Elementi HTML Attributi HTML Intestazioni HTML Paragrafi HTML Stili HTML Formattazione HTML Citazioni HTML Commenti HTML Colori HTML CSS HTML Collegamenti HTML Immagini HTML Favicon HTML Tabelle HTML Elenchi HTML Blocco HTML e in linea Classi HTML ID HTML Iframe HTML JavaScript HTML Percorsi di file HTML Testa HTML Layout HTML HTML reattivo Codice informatico HTML Semantica HTML Guida allo stile HTML Entità HTML Simboli HTML Emoji HTML Set di caratteri HTML Codifica URL HTML HTML e XHTML

Moduli HTML

Moduli HTML Attributi del modulo HTML Elementi del modulo HTML Tipi di input HTML Attributi di input HTML Attributi del modulo di input HTML

Grafica HTML

Tela HTML HTML SVG

Supporto HTML

Supporto HTML Video HTML Audio HTML Plug-in HTML YouTube HTML

API HTML

Geolocalizzazione HTML Trascina/rilascia HTML Archiviazione Web HTML Lavoratori Web HTML HTML SSE

Esempi HTML

Esempi HTML Quiz HTML Esercizi HTML Certificato HTML Riepilogo HTML Accessibilità HTML

Riferimenti HTML

Elenco tag HTML Attributi HTML Attributi globali HTML Supporto browser HTML Eventi HTML Colori HTML Tela HTML Audio/video HTML Tipi di documenti HTML Set di caratteri HTML Codifica URL HTML Codici HTML Lang Messaggi HTTP Metodi HTTP Convertitore da PX a EM Tasti rapidi

HTML - L'elemento testa


L'elemento HTML <head>è un contenitore per i seguenti elementi: <title>, <style>, <meta>, <link>, <script>, e <base>.


L'elemento HTML <head>

L' <head>elemento è un contenitore di metadati (dati sui dati) e viene posizionato tra il <html>tag e il <body>tag.

I metadati HTML sono dati relativi al documento HTML. I metadati non vengono visualizzati.

I metadati in genere definiscono il titolo del documento, il set di caratteri, gli stili, gli script e altre metainformazioni.


L'elemento HTML <titolo>

L' <title>elemento definisce il titolo del documento. Il titolo deve essere di solo testo e viene visualizzato nella barra del titolo del browser o nella scheda della pagina.

L' <title>elemento è richiesto nei documenti HTML!

Il contenuto del titolo di una pagina è molto importante per l'ottimizzazione dei motori di ricerca (SEO)! Il titolo della pagina viene utilizzato dagli algoritmi dei motori di ricerca per decidere l'ordine quando si elencano le pagine nei risultati di ricerca.

L' <title>elemento:

  • definisce un titolo nella barra degli strumenti del browser
  • fornisce un titolo per la pagina quando viene aggiunta ai preferiti
  • visualizza un titolo per la pagina nei risultati dei motori di ricerca

Quindi, cerca di rendere il titolo il più accurato e significativo possibile!

Un semplice documento HTML:

Esempio

<!DOCTYPE html>
<html>
<head>
  <title>A Meaningful Page Title</title>
</head>
<body>

The content of the document......

</body>
</html>

L'elemento HTML <stile>

L' <style>elemento viene utilizzato per definire le informazioni di stile per una singola pagina HTML:

Esempio

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>


L'elemento HTML <link>

L' <link>elemento definisce la relazione tra il documento corrente e una risorsa esterna.

Il <link> tag viene spesso utilizzato per creare collegamenti a fogli di stile esterni:

Esempio

<link rel="stylesheet" href="mystyle.css">

Suggerimento: per saperne di più sui CSS, visita il nostro Tutorial CSS .


L'elemento HTML <meta>

L' <meta>elemento viene in genere utilizzato per specificare il set di caratteri, la descrizione della pagina, le parole chiave, l'autore del documento e le impostazioni del viewport.

I metadati non verranno visualizzati nella pagina, ma vengono utilizzati dai browser (come visualizzare i contenuti o ricaricare la pagina), dai motori di ricerca (parole chiave) e da altri servizi web.

Esempi

Definire il set di caratteri utilizzato:

<meta charset="UTF-8">

Definisci le parole chiave per i motori di ricerca:

<meta name="keywords" content="HTML, CSS, JavaScript">

Definisci una descrizione della tua pagina web:

<meta name="description" content="Free Web tutorials">

Definisci l'autore di una pagina:

<meta name="author" content="John Doe">

Aggiorna documento ogni 30 secondi:

<meta http-equiv="refresh" content="30">

Impostazione del viewport per rendere il tuo sito web bello da vedere su tutti i dispositivi:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Esempio di <meta>tag:

Esempio

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">

Impostazione della vista

Il viewport è l'area visibile dell'utente di una pagina web. Varia a seconda del dispositivo: sarà più piccolo su un telefono cellulare che sullo schermo di un computer.

Dovresti includere il seguente <meta>elemento in tutte le tue pagine web:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Questo fornisce al browser le istruzioni su come controllare le dimensioni e il ridimensionamento della pagina.

La width=device-widthparte imposta la larghezza della pagina per seguire la larghezza dello schermo del dispositivo (che varierà a seconda del dispositivo).

La initial-scale=1.0parte imposta il livello di zoom iniziale quando la pagina viene caricata per la prima volta dal browser.

Ecco un esempio di una pagina web senza il meta tag viewport e la stessa pagina web con il meta tag viewport:

Suggerimento: se stai navigando questa pagina con un telefono o un tablet, puoi fare clic sui due collegamenti sottostanti per vedere la differenza.



L'elemento HTML <script>

L' <script>elemento viene utilizzato per definire JavaScript lato client.

Il seguente JavaScript scrive "Hello JavaScript!" in un elemento HTML con id="demo":

Esempio

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

Suggerimento: per saperne di più su JavaScript, visita il nostro tutorial JavaScript .


L'elemento HTML <base>

L' <base>elemento specifica l'URL di base e/o la destinazione per tutti gli URL relativi in ​​una pagina.

Il <base>tag deve avere un attributo href o target presente o entrambi.

Può esserci un solo <base> elemento in un documento!

Esempio

Specifica un URL predefinito e una destinazione predefinita per tutti i collegamenti in una pagina:

<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>

<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>

Riassunto capitolo

  • L' <head>elemento è un contenitore di metadati (dati sui dati)
  • L' <head>elemento viene posizionato tra il <html>tag e il <body>tag
  • L' <title>elemento è obbligatorio e definisce il titolo del documento
  • L' <style>elemento viene utilizzato per definire le informazioni di stile per un singolo documento
  • Il <link> tag viene spesso utilizzato per collegare fogli di stile esterni
  • L' <meta>elemento viene in genere utilizzato per specificare il set di caratteri, la descrizione della pagina, le parole chiave, l'autore del documento e le impostazioni del viewport
  • L' <script>elemento viene utilizzato per definire JavaScript lato client
  • L' <base>elemento specifica l'URL di base e/o la destinazione per tutti gli URL relativi in ​​una pagina

Elementi della testata HTML

Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base> Defines a default address or a default target for all links on a page
<link> Defines the relationship between a document and an external resource
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document

Per un elenco completo di tutti i tag HTML disponibili, visita il nostro Riferimento ai tag HTML .