Exercice - Créer une page HTML

  • 5 minutes

Dans cet exercice, vous allez commencer à créer la page Web de votre CV. Vous commencez par ajouter des informations de haut niveau telles que votre nom et les en-têtes de section. Vous ajoutez également quelques commentaires, que nous utilisons comme marqueurs de l’endroit où ajouter des informations dans un exercice ultérieur.

Cet exercice utilise vscode.dev , une version web de Visual Studio Code et CodeSwing. Ces outils permettent de simplifier le processus de développement. Aucune installation locale n’est requise pour effectuer les exercices suivants.

Créer une page HTML avec CodeSwing

Vous commencez par créer un dossier, configurer votre outillage et créer un « swing » à l’aide de CodeSwing dans vscode.dev. Un swing affiche automatiquement les résultats de votre code que vous créez dans vscode.dev. Cela vous permet d’apporter rapidement des modifications et les mises à jour se produisent en temps réel.

La vidéo suivante montre comment installer CodeSwing dans Visual Studio Code. Ces étapes font également partie des étapes d’exercice.

  1. Créez un dossier sur votre bureau nommé CV.
  2. Ouvrez vscode.dev.
  3. Sélectionnez Ouvrir le dossier.
  4. Accédez au dossier de reprise que vous avez créé précédemment, puis sélectionnez Sélectionner un dossier.
  5. Lorsque l'on vous demande d'autoriser le site à voir les fichiers, sélectionnez Afficher les fichiers.
  6. Sélectionnez le bouton Extensions.

    Capture d’écran de l’icône des extensions.

  7. Dans la zone de texte Rechercher des extensions dans la Place de marché, tapez CodeSwing.
  8. Sélectionnez Installer pour installer CodeSwing.
  9. Ouvrez la palette de commandes en sélectionnant Ctl-Shift-P ou Cmd-Shift-P sur un Mac.
  10. Tapez CodeSwing dans la palette de commandes et sélectionnez CodeSwing : New Swing in Directory....
  11. Sélectionnez Sélectionner un dossier pour utiliser le répertoire actif (qui est celui que vous avez créé à l’étape précédente).
  12. Sélectionnez De base : HTML uniquement.
  13. Lorsque vous êtes invité à enregistrer les modifications pour les reprendre , sélectionnez Enregistrer les modifications.

Visual Studio Code crée deux fenêtres côte à côte. Le côté gauche est votre éditeur, où vous pouvez entrer votre HTML. La droite se comporte comme un navigateur, affichant les résultats de votre code HTML.

Ajoutez du HTML pour créer la structure de votre page

Ensuite, vous ajoutez le code HTML pour créer la structure de votre page. Vous créez les trois éléments principaux de html, headet body. À l’intérieur de , bodyvous ajoutez une section qui contient des informations générales vous concernant, telles que votre nom et des informations sur les réseaux sociaux. Vous ajoutez ensuite des sections qui énumèrent votre formation et votre expérience.

La vidéo suivante montre comment créer du code HTML dans Visual Studio Code et faire en sorte que le code s’affiche dans CodeSwing. Ces étapes font également partie des étapes d’exercice.

N’hésitez pas à remplacer votre nom par votre nom. Dans d’autres exercices, vous créez des listes et des liens vers votre adresse e-mail, vos identifiants de médias sociaux, votre formation et votre expérience.

Après avoir ajouté le code, vous allez vérifier quel code a été ajouté.

  1. Dans index.html, ajoutez le code HTML suivant :
<html>
<head>
  <title>Your Name resume</title>
</head>
<body>
  <h1>My Name</h1>
  <!-- email address -->
  <h2>Social Media</h2>
  <!-- social media -->
  <h2>Education</h2>
  <!-- education -->
  <h2>Experience</h2>
  <!-- experience -->
</body>
</html>

Chacun des éléments du HTML fait des choses spécifiques. Le tableau suivant décrit les balises que vous avez utilisées dans votre code HTML et la façon dont le navigateur les comprend.

Étiquette Descriptif
<html> La balise « container » pour l’ensemble du document HTML. Toutes les autres balises sont écrites à l’intérieur de l’élément HTML.
<head> Le conteneur d’en-tête. L’en-tête inclut généralement des références à d’autres fichiers dont la page ou le site a besoin. Il peut également inclure des données que les moteurs de recherche et les sites de médias sociaux utilisent pour mieux trouver votre site Web.
<body> Cette balise crée le conteneur de corps de la page Web. La plupart des éléments d’affichage vont dans l’élément body.
<div> La balise division crée une section en HTML. Les sections ont généralement un contenu similaire ou lié les uns aux autres.
<h1> - <h6> Il s’agit de balises d’en-tête. Ils donnent une certaine structure au document HTML. Ils indiquent au navigateur de formater le texte entre eux d’une manière spécifique pour montrer cette hiérarchie.
<!-- comment text --> Ces balises sont des commentaires en HTML. Ils ne créent pas de sortie rendue. Ils sont utilisés par les développeurs pour faciliter la recherche, le partage et la compréhension de leur code.
/* CSS comment */ Ces balises de commentaire sont utilisées dans les feuilles de style en cascade.
  1. Au fur et à mesure que vous tapez, la page est automatiquement mise à jour ; Le résultat final ressemble à l’image suivante :

Capture d’écran de la structure du CV.

Révision du code

Chaque page HTML a html comme élément central racine, avec tout le contenu qu’elle contient. html a normalement deux enfants directs, head qui contient des métadonnées et body qui contient les informations à afficher.

Notez que vous n’utilisez qu’un seul élément pour votre nom et h1 des h2 éléments pour les en-têtes de chacune des sections. Il s’agit d’aider à mettre en évidence les parties les plus importantes de la page. Votre nom est l’élément d’information le plus important sur la page ; Il est donc en tête d’affiche avec h1.

Enfin, il y a des commentaires sur l’adresse e-mail, les médias sociaux, l’éducation et l’expérience. Ceux-ci sont utilisés comme espaces réservés et sont remplacés dans un exercice ultérieur de ce module.