HTML - Header

Abbiamo visto che un tipico documento HTML segue la seguente struttura:

Document declaration tag 

<html>
   <head>
       Document header related tags
   </head>

   <body>
       Document body related tags
   </body>
</html>

In questo capitolo studieremo più in dettagli la sezione di intestazione rappresentata dal tag HTML <head>. Esso contiene numerosi tag importanti come ad esempio <title>, <meta>, <link>, <base>, <style>, <script>, e <noscript>.

Il tag HTML <title>

Il tag HTML <title> viene utilizzato per specificare il titolo del documento HTML. Di seguito è riportato un esempio per dare un titolo a un documento HTML:

<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

Produrrà il seguente risultato:

Hello, World!

Il tag HTML <meta>

Il tag HTML <meta> viene utilizzato per fornire metadati riguardanti il documento HTML, possono includere informazioni sulla pagina come una scadenza, l'autore della pagina, un elenco di parole chiave, una descrizione ecc.

Di seguito sono riportati alcuni degli usi importanti del tag <meta> all'interno di un documento:

<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>

<!-- Provide list of keywords -->
<meta name="keywords" content="C, C++, Java, PHP, Perl, Python">

<!-- Provide description of the page -->
<meta name="description" content="Simply Easy Learning by Tutorials Point">

<!-- Author information -->
<meta name="author" content="Tutorials Point">

<!-- Page content type -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- Page refreshing delay -->
<meta http-equiv="refresh" content="30">

<!-- Page expiry -->
<meta http-equiv="expires" content="Wed, 21 June 2006 14:25:27 GMT">

<!-- Tag to tell robots not to index the content of a page -->
<meta name="robots" content="noindex, nofollow">

</head>
<body>
<p>Hello, World!</p>
</body>
</html>

Produrrà il seguente risultato:

Hello, World!

Il tag HTML <base>

The HTML <base> viene utilizzato per definire un URL di base per tutti gli URL relativi all' interno di ​​una pagina, il chè significa che tutti gli altri URL verranno concatenati nell'URL di base per individuare l'elemento specificato.

Per esempio tutte le pagine e le immagini verrano cercate all' interno dell' URL base https://www.tutorialspoint.com/:

<!DOCTYPE html>
<html>
<head>
<title>HTML Base Tag Example</title>
<base href="https://www.tutorialspoint.com/" />
</head>
<body>

<img src="/images/logo.png" alt="Logo Image"/>
<a href="/html/index.htm" title="HTML Tutorial"/>HTML Tutorial</a> 

</body>
</html>

Produrrà il seguente risultato:

Logo Image HTML Tutorial

Ma se cambi il base URL in qualcos' altro, come ad esempio, se il base URL è https://www.tutorialspoint.com/home allora le immagini e gli altri link diventeranno come https://www.tutorialspoint.com/home/images/logo.png e https://www.tutorialspoint.com/home/html/index.htm

The HTML <link> Tag

The HTML <link> tag is used to specify relationships between the current document and external resource. Following is an example to link an external style sheet file available in css sub-directory within web root:

<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag Example</title>
<base href="https://www.tutorialspoint.com/" />
<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

Produrrà il seguente risultato:

Hello, World!

Il tag HTML <style>

Il tag HTML <style> viene usato per indicare degli stili collegati al documento HTML corrente. A seguire un esempio per definire nuove regole di stile all' interno del tag <style>:

<!DOCTYPE html>
<html>
<head>
<title>HTML style Tag Example</title>
<base href="https://www.tutorialspoint.com/" />
<style type="text/css">
.myclass{
   background-color: #aaa;
   padding: 10px;
}
</style>
</head>
<body>
<p class="myclass">Hello, World!</p>
</body>
</html>

Produrrà il seguente risultato:

Hello, World!

Nota: Per imparare come funzionano i Cascading Style Sheet, segui la guida che trovi su https://www.tutorialspoint.com/css

Il tag HTML <script>

Il tag HTML <script> serve per definire script interni o esterni all' interno del documento HTML. A seguire un esempio di utilizzo di uno script Javascript per definire una semplice funzione:

<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag Example</title>
<base href="https://www.tutorialspoint.com/" />
<script type="text/javascript">
function Hello(){
   alert("Hello, World");
}
</script>
</head>
<body>
<input type="button" onclick="Hello();" name="ok" value="OK"  />
</body>
</html>

Otterremo il seguente risultato, prova a clickare sul pulsante:

Nota: Per ulteriori informazioni su come funziona Javascript, potrai seguire un tutorial separato disponibile alla pagina https://www.tutorialspoint.com/javascript

Advertisements