Maîtriser les métadonnées de document HTML

Introduction

Dans ce laboratoire, vous allez apprendre à créer un document HTML en utilisant la balise HTML <head>. La balise <head> est utilisée pour fournir des métadonnées et autres informations sur la page web qui ne sont pas visibles pour l'utilisateur. Nous allons parcourir les étapes nécessaires pour créer une balise <head> pour votre document HTML.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/charset("Character Encoding") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") subgraph Lab Skills html/basic_elems -.-> lab-70765{{"Métadonnées de document HTML"}} html/head_elems -.-> lab-70765{{"Métadonnées de document HTML"}} html/charset -.-> lab-70765{{"Métadonnées de document HTML"}} html/doc_flow -.-> lab-70765{{"Métadonnées de document HTML"}} end

Créer un document HTML

Tout d'abord, créons un document HTML dans un fichier appelé index.html :

<!doctype html>
<html>
  <head> </head>
  <body></body>
</html>

Ajoutez un titre à votre document HTML

La balise <title> est utilisée pour définir le titre de la page web. Elle doit être placée à l'intérieur de la balise <head>. Ajoutez la balise <title> à votre document HTML :

<!doctype html>
<html>
  <head>
    <title>My Awesome Webpage</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Modifiez le titre de votre document HTML

Modifions le titre du document HTML en changeant le texte "My Awesome Webpage" en quelque chose d'autre. Remplacez le texte "My Awesome Webpage" par votre titre souhaité :

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Ajoutez l'encodage des caractères

L'encodage des caractères est utilisé pour définir la manière dont les caractères sont affichés dans le navigateur. Nous pouvons définir l'encodage des caractères en utilisant la balise <meta>. Ajoutez la balise <meta> suivante à l'intérieur de la balise <head> :

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Ajoutez un style CSS à votre document HTML

Vous pouvez utiliser la balise <style> à l'intérieur de la balise <head> pour appliquer un style CSS à la page web. Ajoutez la balise <style> suivante à l'intérieur de la balise <head> :

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
    <style>
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Ajoutez des liens vers des feuilles de style CSS externes

Vous pouvez également lier des feuilles de style CSS externes à votre document HTML en utilisant la balise <link>. Créez un nouveau fichier appelé styles.css, et ajoutez les styles CSS suivants :

h1 {
  color: red;
}

Ensuite, liez cette feuille de style à votre document HTML en utilisant la balise <link> suivante à l'intérieur de la balise <head> :

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Ajoutez une URL de base

La balise <base> est utilisée pour fournir une URL de base pour toutes les URL relatives utilisées dans le document HTML. Ajoutez la balise <base> à l'intérieur de la balise <head> :

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <base href="https://example.com" />
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Récapitulatif

Dans ce laboratoire, vous avez appris à utiliser la balise HTML <head> pour fournir des métadonnées et autres informations sur la page web. Vous pouvez utiliser la balise <title> pour définir le titre du document HTML, la balise <meta> pour définir l'encodage des caractères et autres informations méta, la balise <style> pour appliquer un style CSS, la balise <link> pour lier des feuilles de style externes et la balise <base> pour fournir une URL de base pour toutes les URL relatives.