Structure de document HTML : Créer une page web de base

Introduction

Bienvenue dans le monde du HTML ! Chaque page web que vous voyez sur Internet repose sur une structure fondamentale. Comprendre cette structure est la première étape et la plus cruciale du développement web.

Dans ce laboratoire, vous apprendrez à créer le squelette de base d'un document HTML. Nous aborderons les composants essentiels que chaque page HTML doit posséder :

La déclaration <!DOCTYPE html>
L'élément racine <html>
L'élément <head> pour les métadonnées
L'élément <body> pour le contenu visible

À la fin de ce laboratoire, vous aurez construit une page HTML complète, valide et simple à partir de zéro.

Créer la déclaration DOCTYPE

Dans cette étape, vous allez ajouter la déclaration DOCTYPE, qui est la toute première chose dans votre document HTML. Cette déclaration indique au navigateur web que la page est écrite en HTML5. C'est une pratique standard et elle garantit que le navigateur rend la page correctement.

Tout d'abord, localisez le fichier index.html dans l'explorateur de fichiers sur le côté gauche de votre WebIDE. Cliquez dessus pour l'ouvrir dans l'éditeur.

Le fichier est actuellement vide. Ajoutez la ligne de code suivante tout en haut du fichier index.html :

<!DOCTYPE html>

Votre fichier index.html devrait maintenant ressembler à ceci :

<!DOCTYPE html>

Cette seule ligne est le point de départ de chaque page web moderne.

Ajouter l'élément racine html avec l'attribut lang

Dans cette étape, vous allez ajouter l'élément <html>. Cet élément est le conteneur racine pour tous les autres éléments HTML de la page (à l'exception de la déclaration <!DOCTYPE>).

C'est également une bonne pratique d'inclure l'attribut lang à l'intérieur de la balise ouvrante <html>. Cet attribut spécifie la langue du contenu du document, ce qui aide les moteurs de recherche et les lecteurs d'écran. Pour l'anglais, nous utilisons lang="en".

Dans votre fichier index.html, ajoutez les balises <html> et </html> juste après la déclaration <!DOCTYPE html>.

<!DOCTYPE html>
<html lang="en"></html>

Tous les autres éléments de votre page web iront entre ces deux balises.

Insérer l'élément head avec la balise title

Dans cette étape, vous allez ajouter l'élément <head>. La section <head> contient des métadonnées sur le document HTML, telles que son titre, son jeu de caractères, ses styles et ses scripts. Ces informations ne sont pas affichées sur la page web elle-même mais sont utilisées par le navigateur.

L'élément de métadonnées le plus important pour un débutant est la balise <title>. Le texte à l'intérieur de la balise <title> est ce qui apparaît sur l'onglet du navigateur ou dans la barre de titre de la fenêtre.

À l'intérieur de votre élément <html>, ajoutez une section <head>. Dans la section <head>, ajoutez une balise <title> avec le texte "My First Web Page".

Mettez à jour votre fichier index.html pour qu'il ressemble à ceci :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First Web Page</title>
  </head>
</html>

Ajouter l'élément body pour le contenu

Dans cette étape, vous allez ajouter l'élément <body>. C'est là que va tout le contenu visible de votre page web, comme les titres, les paragraphes, les images, les liens, et plus encore. L'élément <body> doit être placé après l'élément <head>, mais toujours à l'intérieur de l'élément <html>.

Ajoutons un titre principal à notre page pour le rendre visible dans le navigateur. Nous utiliserons la balise <h1>, qui signifie "Heading 1" (Titre 1).

Dans votre fichier index.html, ajoutez une section <body>. À l'intérieur du <body>, ajoutez un élément <h1> avec le texte "Hello, World!".

Votre fichier index.html complet devrait maintenant ressembler à ceci :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Ceci est une structure de document HTML complète et valide.

Enregistrer et ouvrir le fichier HTML dans un navigateur

Dans cette étape, vous allez visualiser la page web que vous venez de créer. Le WebIDE enregistre automatiquement vos modifications, vous n'avez donc pas besoin d'enregistrer le fichier manuellement.

Un serveur web simple est déjà en cours d'exécution en arrière-plan pour vous. Pour voir votre page, il vous suffit d'ouvrir le bon onglet dans l'interface LabEx.

Cliquez sur l'onglet Web 8080, qui se trouve en haut à gauche de votre écran, à côté de l'onglet "Terminal".

Lorsque vous basculez vers l'onglet Web 8080, vous devriez voir votre page web. Elle affichera :

Le texte "Hello, World!" comme un grand titre dans la zone de contenu principale.
L'onglet du navigateur affichera le titre "My First Web Page".

Si vous ne voyez pas cela, veuillez revenir aux étapes précédentes et vous assurer que votre code index.html correspond exactement à l'exemple.

Résumé

Félicitations ! Vous avez créé avec succès votre premier document HTML valide. Vous avez appris les éléments fondamentaux qui constituent le squelette de chaque page web.

Dans ce laboratoire, vous avez appris :

<!DOCTYPE html> : La déclaration qui définit le document comme étant du HTML5.
<html> : L'élément racine qui englobe tout le contenu de la page.
<head> : Le conteneur pour les métadonnées, comme le titre de la page, qui n'est pas visible sur la page elle-même.
<title> : La balise qui définit le titre de l'onglet du navigateur.
<body> : Le conteneur pour tout le contenu visible, tel que les titres et les paragraphes.

Cette structure de base est le fondement sur lequel vous construirez tous vos futurs projets web.

Structure d'un document HTML