HTML - En-tête
Nous avons appris qu'un document HTML typique aura la structure suivante -
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>Ce chapitre donnera un peu plus de détails sur la partie d'en-tête qui est représentée par la balise HTML <head>. La balise <head> est un conteneur de diverses balises importantes telles que les balises <title>, <meta>, <link>, <base>, <style>, <script> et <noscript>.
La balise HTML <title>
La balise HTML <title> est utilisée pour spécifier le titre du document HTML. Voici un exemple pour donner un titre à un document HTML -
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Cela produira le résultat suivant -
La balise HTML <meta>
La balise HTML <meta> est utilisée pour fournir des métadonnées sur le document HTML qui incluent des informations sur l'expiration de la page, l'auteur de la page, la liste des mots-clés, la description de la page, etc.
Voici quelques-unes des utilisations importantes de la balise <meta> dans un document 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>Cela produira le résultat suivant -
La balise HTML <base>
La balise HTML <base> est utilisée pour spécifier l'URL de base de toutes les URL relatives dans une page, ce qui signifie que toutes les autres URL seront concaténées dans l'URL de base lors de la localisation de l'élément donné.
Par exemple, toutes les pages et images données seront recherchées après avoir préfixé les URL données avec l'URL de 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>Cela produira le résultat suivant -
Mais si vous changez l'URL de base en autre chose, par exemple, si l'URL de base est http://www.tutorialspoint.com/home, l'image et les autres liens donnés deviendront comme http://www.tutorialspoint.com/home/images /logo.png et http://www.tutorialspoint.com/html/index.htm
La balise HTML <link>
La balise HTML <link> est utilisée pour spécifier les relations entre le document actuel et la ressource externe. Voici un exemple pour lier un fichier de feuille de style externe disponible danscss sous-répertoire dans la racine 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>Cela produira le résultat suivant -
La balise HTML <style>
La balise HTML <style> est utilisée pour spécifier la feuille de style du document HTML courant. Voici un exemple pour définir quelques règles de feuille de style à l'intérieur de la balise <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>Cela produira le résultat suivant -
Note- Pour en savoir plus sur le fonctionnement de la feuille de style en cascade, veuillez consulter un didacticiel distinct disponible sur css
La balise HTML <script>
La balise HTML <script> est utilisée pour inclure un fichier de script externe ou pour définir un script interne pour le document HTML. Voici un exemple où nous utilisons JavaScript pour définir une fonction JavaScript simple -
<!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>Cela produira le résultat suivant, où vous pouvez essayer de cliquer sur le bouton donné -
Note- Pour en savoir plus sur le fonctionnement de JavaScript, veuillez consulter un didacticiel distinct disponible sur javascript