HTML - Intestazione
Abbiamo imparato che un tipico documento HTML avrà la seguente struttura:
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>Questo capitolo fornirà un po 'più di dettagli sulla parte dell'intestazione rappresentata dal tag HTML <head>. Il tag <head> è un contenitore di vari tag importanti come i tag <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>Questo produrrà il seguente risultato:
Il tag HTML <meta>
Il tag HTML <meta> viene utilizzato per fornire metadati sul documento HTML che includono informazioni sulla scadenza della pagina, l'autore della pagina, l'elenco di parole chiave, la descrizione della pagina ecc.
Di seguito sono riportati alcuni degli usi importanti del tag <meta> all'interno di un documento HTML:
<!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>Questo produrrà il seguente risultato:
Il tag HTML <base>
Il tag HTML <base> viene utilizzato per specificare l'URL di base per tutti gli URL relativi in una pagina, il che significa che tutti gli altri URL verranno concatenati nell'URL di base durante la ricerca dell'elemento specificato.
Ad esempio, tutte le pagine e le immagini fornite verranno cercate dopo aver anteposto agli URL specificati l'URL di base http://www.tutorialspoint.com/ directory -
<!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>Questo produrrà il seguente risultato:
Ma se cambi l'URL di base in qualcos'altro, ad esempio, se l'URL di base è http://www.tutorialspoint.com/home, l'immagine e gli altri collegamenti forniti diventeranno come http://www.tutorialspoint.com/home/images /logo.png e http://www.tutorialspoint.com/html/index.htm
Il tag HTML <link>
Il tag HTML <link> viene utilizzato per specificare le relazioni tra il documento corrente e la risorsa esterna. Di seguito è riportato un esempio per collegare un file di foglio di stile esterno disponibile incss sottodirectory all'interno della radice web -
<!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>Questo produrrà il seguente risultato:
Il tag HTML <style>
Il tag HTML <style> viene utilizzato per specificare il foglio di stile per il documento HTML corrente. Di seguito è riportato un esempio per definire alcune regole del foglio 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>Questo produrrà il seguente risultato:
Note- Per sapere come funziona Cascading Style Sheet, controlla un tutorial separato disponibile su css
Il tag HTML <script>
Il tag HTML <script> viene utilizzato per includere un file di script esterno o per definire uno script interno per il documento HTML. Di seguito è riportato un esempio in cui utilizziamo JavaScript per definire una semplice funzione JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag Example</title>
<base href = "http://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>Questo produrrà il seguente risultato, in cui puoi provare a fare clic sul pulsante dato:
Note- Per sapere come funziona JavaScript, controlla un tutorial separato disponibile su javascript