Exercice - Ajouter du HTML de base à votre application web

  • 10 minutes

Actuellement, votre site web contient un fichier HTML vide. Ajoutons du code ! Le but est d’utiliser le langage de balisage hypertexte (HTML) pour décrire la page web que les navigateurs de vos clients doivent afficher. Ne serait-il pas agréable d’avoir un modèle de départ ? Les éditeurs peuvent remplir de manière pratique une partie de la structure HTML ou de la structure de base typique pour vous.

Dans cette unité, vous ajoutez du contenu HTML de base, ouvrez la page HTML dans un navigateur et découvrez les outils de développement.

Ajouter du code HTML

Visual Studio Code offre une prise en charge de base pour la programmation HTML dès le départ. Il propose une mise en évidence de la syntaxe, les complétions intelligentes avec IntelliSense et la mise en forme personnalisable.

  1. Ouvrez le dossier de votre site web dans Visual Studio Code, puis ouvrez le fichier index.html en le sélectionnant dans l’Explorateur.

  2. Dans la page index.html, tapez html:5, puis sélectionnez Entrée. Le code du modèle HTML5 est ajouté au fichier.

    Remarque

    Si le code du modèle HTML5 n’est pas ajouté au fichier index.html, essayez en fermant puis en rouvrant le fichier.

  3. Modifiez le code de modèle afin qu’il ressemble à l’exemple de code suivant. Ensuite, enregistrez le fichier en sélectionnant Ctrl+S sur Windows ou Cmd+S sur macOS.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

Il y a différentes versions du HTML. Le doctype<!DOCTYPE html> indique que ce document HTML contient du code HTML5.

Bien que nous n’ayons pas à examiner en profondeur la signification de tous les éléments HTML, nous voulons nous pencher sur quelques éléments importants. La balise meta indique des informations de métadonnées qui ne sont généralement pas visibles par l’utilisateur, sauf s’il affiche le code source dans son navigateur. Les éléments ou balises de métadonnées fournissent des informations descriptives sur la page web. Par exemple, ils aident les moteurs de recherche à traiter les informations à retourner dans les résultats de recherche à partir de vos pages web.

Le jeu de caractères (charset) pour UTF-8 peut sembler sans importance, mais il est essentiel pour définir la façon dont les ordinateurs interprètent les caractères. Si les métadonnées pour l’ensemble de caractères sont manquantes, cela peut compromettre la sécurité. L’attribut charset renferme beaucoup d’informations techniques et historiques. L’essentiel à retenir de cet exercice est que le code Visual Studio Code réutilisable fournit quelques valeurs par défaut sensibles.

Modifier l’en-tête

L’élément <head> dans votre code HTML contient des informations sur votre site web qui ne sont pas visibles dans l’onglet du navigateur.

Les métadonnées définissent des données sur le document HTML, telles que l’ensemble de caractères, les scripts et le navigateur dans lequel la page web s’ouvre.

Le titre d’une page web apparaît en haut d’une fenêtre de navigateur et il est important pour plusieurs raisons. Par exemple, le titre est utilisé par les moteurs de recherche et affiché dans leurs résultats. Ajoutons un titre.

Important

À partir de ce point, les points de suspension (...) indiquent que du code précédemment déclaré précède ou suit. Il devrait y avoir suffisamment de code fourni en contexte pour effectuer les modifications nécessaires ou mettre à jour votre travail. Ne copiez-collez pas les points de suspension dans votre code.

  1. Dans l’éditeur, modifiez l’élément <title> de la façon suivante.

    ...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
...

Pour appliquer des styles aux éléments HTML de la page web, vous pouvez écrire le code CSS directement dans l’élément head de la page web. Cette opération est appelée CSS interne. Cependant, il est préférable de séparer la structure HTML et le style CSS. Avoir une page CSS distincte est appelé CSS externe. Le code a tendance à être plus facile à lire quand il est concis et compartimenté. Vous pouvez utiliser une ou plusieurs feuilles de style externes pour traiter plusieurs pages web. Plutôt que de mettre à jour chaque page HTML avec du code CSS répliqué, vous pouvez apporter les modifications à un seul fichier CSS pour qu’elles soient appliquées à toutes les pages web dépendantes. Créons un lien vers un fichier CSS externe.

  1. Dans l’éditeur de Visual Studio Code, ajoutez une ligne vide après l’élément <title>, tapez link, puis sélectionnez Entrée. Visual Studio Code va normalement ajouter la ligne suivante à votre fichier index.html.

    <link rel="stylesheet" href="">

  2. Donnez à l’attribut href= la valeur href="main.css", puis enregistrez le fichier en sélectionnant Ctrl+S sur Windows ou Cmd+S sur macOS.

    ...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
  <link rel="stylesheet" href="main.css">
</head>
...

Modifier l’élément body

Commençons maintenant à remplir l’élément <body>.

L’élément <body> contient le contenu de votre site web qui est visible par vos clients dans leurs navigateurs.

  1. Dans l’élément <body>, ajoutez un élément de titre<h1>, suivi d’un élément de paragraphe<p>, puis créez une liste non triée<ul> contenant plusieurs éléments de liste<li>.

  2. Modifiez votre code de la façon suivante, ou copiez-collez-le code ci-dessous.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple website</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
  </body>
</html>

Vous pouvez utiliser un attribut ID (utilisé dans l’élément <p>) pour appliquer un style à un seul élément, tandis que l’attribut class (utilisé dans l’élément <li>) permet d’appliquer un style à tous les éléments de la même classe.

Avant de passer à l’étape suivante, assurez-vous que votre fichier est enregistré en sélectionnant Ctrl+S ou Cmd+S.

Ouvrir dans un navigateur

Vous pouvez afficher un aperçu de votre page web localement en ouvrant le fichier HTML dans un navigateur. Au lieu d’une adresse de site web commençant par https://, votre navigateur pointe vers le chemin du fichier local, qui doit avoir la forme C:/dev/simple-website/index.html.

  • Pour afficher un aperçu avec Visual Studio Code, cliquez avec le bouton droit sur index.html, puis sélectionnez Ouvrir dans le navigateur par défaut, ou sélectionnez le fichier index.html et utilisez le raccourci clavier Alt+B.

    Capture d’écran de l’élément de menu contextuel Ouvrir dans le navigateur dans Visual Studio Code.

    Important

    Si vous rencontrez des problèmes, veillez à cliquer avec le bouton droit directement sur l’icône ou le texte du nom de fichier. Si une boîte de dialogue Visual Studio Code s’affiche, sélectionnez Oui, je fais confiance aux auteurs : c’est la fonctionnalité d’approbation de l’espace de travail qui vous permet de décider si les dossiers de votre projet doivent autoriser ou limiter l’exécution automatique du code. Vous venez de créer le fichier, il est donc sûr.

    La page web s’ouvre dans votre navigateur par défaut.

Afficher la page à l’aide des outils de développement

Vous pouvez inspecter une page web en utilisant les outils de développement dans votre navigateur. Essayons.

  1. Ouvrez Outils de développement en cliquant avec le bouton droit sur la page web et en sélectionnant Inspecter, ou essayez les raccourcis suivants :

    • Appuyez sur le raccourci clavier des Outils de développement, à savoir F12.

    • Appuyez sur Ctrl+Maj+I sur Windows et Linux, ou sur Option+Commande+I sur un Mac.

    Ces raccourcis clavier fonctionnent dans Microsoft Edge, Chrome et Firefox. Si vous utilisez Safari, reportez-vous aux Outils de développement web. Une fois l’installation terminée, sélectionnez Safari > Préférences, puis Avancé. En bas du volet, cochez la case Afficher le menu Développer dans la barre de menus. Sélectionnez Développer > Afficher Web Inspector. Pour plus d’informations, consultez la documentation de Safari Web Inspector.

    Pour en savoir plus sur l’ouverture des outils de développement et les principales fonctionnalités disponibles, consultez l’article Vue d’ensemble de DevTools.

  2. Sélectionnez l’onglet Éléments.

    Capture d’écran montrant une fenêtre de navigateur avec le site web et les Outils de développement situés en regard, avec l’onglet Éléments sélectionné.

  3. Déplacez votre souris sur les éléments HTML affichés dans l’onglet Éléments, et développez le contenu des différents éléments.

L’onglet Éléments des outils de développement montre le modèle DOM (Document Object Model) tel qu’il est affiché dans le navigateur. Lors du débogage, il est souvent important de voir comment le navigateur interprète votre code source.

L’inspection de la page dans un navigateur fournit toutes sortes d’informations utiles et peut vous aider à résoudre les problèmes. Vous pouvez également visualiser les détails des feuilles CSS avec l’inspecteur, comme vous le verrez dans la section suivante.