Aller au contenu

Ma première page Web

C’est l’heure de programmer sa toute première page Web !

Étape 1 – Créer le fichier

  • Sur le bureau ou dans un dossier, ajouter un nouveau document : clic droit → Nouveau → Document texte.
  • Renommer le fichier : index.html. (Assure-toi que l’extension est bien .html, pas .txt).
  • Ouvrir Visual Studio Code et ouvrir ce fichier.
  • Écrire le code suivant : <p>J'aime la poutine</p>.
  • Sauvegarder.
  • Abaisser VSCode, puis double-cliquer sur index.html. Le navigateur devrait alors s'ouvrir affichant la mention "J'aime la poutine".

Info

Juste que là, rien de très impressionnant, mais vous venez tout de même de créer votre première page Web avec un paragraph !

Étape 2 – Ajouter la structure HTML de base

  • Ajouter maintenant la structure HTML de base d’un site Web.

Tip

Dans VSCode, dans le fichier html, si on écrit le caractère « ! », ceci devrait apparaitre :

Appuyer ensuite sur Enter pour ajouter la structure automatiquement.

Sinon, voici le résultat attendu :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Poutine</title>
</head>
<body>
    <!-- Le contenu de votre site ira ici -->
</body>
</html>
  • Finalement, ajouter le paragraphe <p>J'aime la poutine</p> à l’intérieur de la balise <body>.
  • Sauvegarder.
  • Rafraichir la page du navigateur. Le résultat devrait être identique.

Étape 3 – Ajouter les autres éléments

Ajouter les éléments suivants à l’intérieur de la balise <body>:

  • Une image (avec la balise <img>) de poutine
<img src="https://tim-montmorency.com/compendium/developpement-web/assets/poutine2.webp" alt="Une belle poutine">
  • Un titre principal (balise <h1>)
<h1>J'aime la poutine</h1>
  • Un paragraphe descriptif (balise <p>)
<p>La poutine est un plat québécois composé de frites, de fromage en grains et de sauce brune.</p>
  • Un lien vers la page Wikipédia de la poutine (balise <a>)
<a href="https://fr.wikipedia.org/wiki/Poutine_(plat)">Wikipedia</a>
  • Sauvegarder.
  • Rafraichir la page du navigateur.

Le résultat devrait ressembler à ceci :

Étape 4 – Ajouter des styles

Un fichier de styles a déjà été préparé pour l'atelier.

  • Ajouter la ligne suivante à l’intérieur de la balise <head> du document HTML :
<link rel="stylesheet" href="https://tim-montmorency.com/compendium/developpement-web/exercices/styles.css">
  • Sauvegarder.
  • Rafraichir la page du navigateur.

Le résultat devrait ressembler à ceci :