Semaine 1 – Site Web & HTML

📘 Comment assimiler la matière

Objectif de la semaine : comprendre la structure d'une page web.

Méthode recommandée : pars du squelette HTML, puis ajoute le contenu progressivement. Avancez par petites étapes et testez chaque changement immédiatement.

Piège fréquent : oublier de fermer les balises.

🌐 Site Web et Internet

Quand vous visitez un site web, votre navigateur (le client) envoie une requête à un serveur via le protocole HTTP ou HTTPS. Le serveur répond en envoyant les fichiers de la page.

Terme	Rôle	Exemples
Navigateur (client)	Envoie des requêtes, affiche les pages	Chrome, Firefox, Edge, Safari
Serveur web	Répond aux requêtes, envoie les fichiers	Apache, Nginx, IIS
HTTP	Protocole non chiffré (port 80)	http://exemple.com
HTTPS	Protocole chiffré, sécurisé (port 443)	https://exemple.com
DNS	Traduit un domaine en adresse IP	cba.qc.ca → 192.168.1.1

Pour les travaux pratiques, on ouvre les fichiers .html directement dans le navigateur (protocole file://) — aucun serveur requis.

🧰 VS Code pour le développement web

Visual Studio Code (VS Code) est l'éditeur utilisé pendant le cours pour écrire, organiser et tester votre code HTML/CSS/JavaScript.

1) Structure de base d'un projet

mon-projet/
├─ index.html
├─ style.css
├─ script.js
└─ images/
   └─ logo.png

Gardez vos fichiers bien organisés dès le début : un fichier HTML principal, un fichier CSS, un fichier JS et un dossier pour les images.

2) Zones importantes de VS Code

Explorateur : affiche les fichiers et dossiers du projet (barre de gauche).
Éditeur : zone centrale où vous écrivez le code.
Terminal intégré : exécute des commandes sans quitter VS Code.
Barre d'état : infos utiles (encodage, fin de ligne, langage du fichier).

3) Fonctions utiles à connaître

Ctrl + S : enregistrer le fichier.
Ctrl + / : commenter/décommenter rapidement une ligne.
Alt + Shift + F : formater le code automatiquement.
Ctrl + Space : afficher les suggestions (IntelliSense).

4) Extensions recommandées

Live Preview : prévisualise la page directement dans VS Code.
Prettier : formate le code pour garder un style propre et constant.
HTML CSS Support : aide avec l'autocomplétion CSS dans HTML.

5) Installer l'extension Live Preview (pas à pas)

Ouvrez VS Code.
Cliquez sur l'onglet Extensions dans la barre de gauche (ou Ctrl + Shift + X).
Dans la recherche, tapez Live Preview.
Sélectionnez l'extension Live Preview (éditeur : Microsoft).
Cliquez sur Install.
Ouvrez votre fichier index.html.
Utilisez la commande Show Preview (clic droit dans le fichier ou palette de commandes).

Si la prévisualisation n'apparaît pas, redémarrez VS Code après l'installation de l'extension.

Bon réflexe : ouvrez toujours le dossier du projet (pas un fichier seul) pour que VS Code détecte bien tous les fichiers liés.

🌍 W3Schools et son utilité

W3Schools est une plateforme d'apprentissage en ligne pratique pour réviser rapidement HTML, CSS et JavaScript avec des exemples simples.

Pourquoi c'est utile en début de parcours

Explications courtes et accessibles pour les notions de base.
Exemples interactifs avec bouton Try it Yourself.
Navigation rapide entre les sujets (balises, sélecteurs, fonctions, etc.).
Référence utile pendant les laboratoires quand vous oubliez une syntaxe.

Comment bien l'utiliser

Lisez une notion (ex. : display: flex).
Testez l'exemple interactif directement sur W3Schools.
Reproduisez ensuite la même idée dans votre propre projet VS Code.
Modifiez 1 à 2 paramètres pour vérifier votre compréhension.

Lien utile : w3schools.com

Important : W3Schools est excellent pour commencer, mais il faut toujours pratiquer dans vos propres fichiers pour vraiment apprendre.

🏗️ Construction des éléments HTML

HTML est composé de balises qui décrivent le rôle de chaque portion de contenu. Une balise s'ouvre, contient du contenu, puis se ferme.

<!-- Anatomie d'un élément HTML -->
<nombalise attribut="valeur">Contenu</nombalise>
  ↑              ↑                ↑          ↑
balise ouvrante  attribut       contenu   balise fermante

<!-- Balises auto-fermantes (pas de contenu) -->
<img src="photo.jpg" alt="Description">
<input type="text">
<br>
<hr>

<!-- Imbrication correcte -->
<p>Voici du texte en <strong>gras</strong> et en <em>italique</em>.</p>

<!-- Imbrication incorrecte ✗ -->
<p>Texte <strong>gras</p></strong>

Indentation

<!-- Convention : 2 espaces par niveau d'imbrication -->
<ul>
  <li>Élément 1</li>
  <li>
    Élément 2 avec sous-liste
    <ul>
      <li>Sous-élément</li>
    </ul>
  </li>
</ul>

Une bonne indentation n'est pas obligatoire pour le navigateur, mais elle est essentielle pour la lisibilité du code.

📄 Boilerplate HTML

Tout document HTML valide commence par cette structure de base (le boilerplate).

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre affiché dans l'onglet</title>
    <link rel="stylesheet" href="../style.css">
  </head>
  <body>

    <!-- Contenu visible ici -->

  </body>
</html>

Balise / attribut	Rôle
`<!DOCTYPE html>`	Déclare que le document est en HTML5
`<html lang="fr">`	Élément racine ; `lang` aide l'accessibilité et le SEO
`<head>`	Métadonnées invisibles (titre, CSS, encodage…)
`charset="UTF-8"`	Encodage des caractères — permet les accents
`name="viewport"`	Indispensable pour le responsive design
`<title>`	Texte dans l'onglet du navigateur
`<body>`	Contenu affiché dans le navigateur

✍️ Titres, paragraphes & listes

Titres — h1 à h6

<h1>Titre principal (un seul par page)</h1>
<h2>Sous-titre de section</h2>
<h3>Sous-sous-titre</h3>
<h4>Niveau 4</h4>  <h5>Niveau 5</h5>  <h6>Niveau 6</h6>

Paragraphe, mise en forme

<p>Voici un <strong>texte en gras</strong> et un <em>texte en italique</em>.</p>
<p>Ligne 1<br>Ligne 2 (retour à la ligne forcé)</p>
<hr>  <!-- séparateur horizontal -->

Listes

<!-- Non-ordonnée (puces) -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Ordonnée (numérotée) -->
<ol>
  <li>Ouvrir VS Code</li>
  <li>Créer index.html</li>
  <li>Écrire le code</li>
</ol>

<!-- Imbrication de listes -->
<ul>
  <li>Front-end
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Back-end</li>
</ul>

📊 Tableaux

Utilisez les tableaux pour des données tabulaires, jamais pour la mise en page.

<table>
  <thead>
    <tr>
      <th>Langage</th>
      <th>Rôle</th>
      <th>Extension</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Structure</td>
      <td>.html</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Présentation</td>
      <td>.css</td>
    </tr>
  </tbody>
</table>

<!-- Fusion de cellules -->
<td colspan="2">Fusionne 2 colonnes</td>
<td rowspan="3">Fusionne 3 rangées</td>

<table> – le tableau
<thead> / <tbody> / <tfoot> – sections sémantiques
<tr> – ligne (table row)
<th> – cellule d'en-tête (gras, centré)
<td> – cellule de données

🔗 Liens absolus & relatifs

<!-- Lien ABSOLU : URL complète, pour des sites externes -->
<a href="https://www.google.com" target="_blank">Google</a>

<!-- Lien RELATIF : relatif à l'emplacement du fichier courant -->
<a href="contact.html">Contact</a>       <!-- même dossier -->
<a href="pages/apropos.html">À propos</a> <!-- sous-dossier -->
<a href="../index.html">Accueil</a>        <!-- dossier parent -->

<!-- Lien vers une ancre (section de la même page) -->
<a href="#contact">Aller à la section Contact</a>
<section id="contact">...</section>

target="_blank" ouvre dans un nouvel onglet. Pour la sécurité, ajoutez aussi rel="noopener".

Images

<!-- Attribut alt obligatoire (accessibilité & SEO) -->
<img src="images/photo.jpg" alt="Coucher de soleil sur le lac">

<!-- Contrôle de la taille -->
<img src="logo.png" alt="Logo" width="200" height="80">

<!-- Image dans un lien -->
<a href="galerie.html">
  <img src="vignette.jpg" alt="Voir la galerie">
</a>

Formats courants : .jpg (photos), .png (transparence), .svg (icônes vectorielles), .webp
L'attribut alt est affiché si l'image ne charge pas et lu par les lecteurs d'écran

💬 Commentaires, encodage & caractères spéciaux

Commentaires HTML

<!-- Ceci est un commentaire — invisible dans le navigateur -->
<!-- TODO: ajouter le formulaire ici -->

<p>Contenu visible</p>
<!-- <p>Ce paragraphe est désactivé</p> -->

Encodage UTF-8

<!-- Dans <head>, toujours en première balise -->
<meta charset="UTF-8">

<!-- Sans UTF-8, les accents et caractères spéciaux
     peuvent s'afficher incorrectement (ex: é → Ã©) -->

Entités HTML — caractères spéciaux

Entité	Caractère	Description
`&`	&	Esperluette
`<`	<	Inférieur à
`>`	>	Supérieur à
` `	(espace insécable)	Espace qui ne coupe pas
`©`	©	Copyright
`™`	™	Marque de commerce
`€`	€	Euro
`«` / `»`	« »	Guillemets français

<p>Copyright &copy; 2026 &ndash; Tous droits réservés</p>
<p>Prix&nbsp;: 19,99&nbsp;&euro;</p>
<p>Utilisez &lt;img&gt; pour les images</p>

📝 Exercice de la semaine

Créez une page HTML simple qui démontre les balises de base vues cette semaine.

Ajoutez un titre principal, deux sous-titres et au moins deux paragraphes.
Insérez une liste non ordonnée et un tableau de 3 colonnes.
Ajoutez un lien externe et une image avec un attribut alt pertinent.

🧪 Mini éditeur HTML interactif

Testez rapidement votre code HTML. Modifiez l'exemple puis cliquez sur Exécuter pour voir le résultat.

Code HTML

Aperçu

🧠 Mini quiz de la semaine

Les questions sont cachées par défaut. Clique sur « Commencer le quiz » pour débuter.