Exercice HTML¶

Voici quelques exercices à pratique en vue du prochain laboratoire.

Balises vues¶

<h1> : Titre principal de la page.
<h2> : Sous-titre important.
<h3> : Sous-section d'un sous-titre.
<p> : Paragraphe de texte.
<hr> : Ligne horizontale qui sépare des sections.
<ul> : Liste non ordonnée (à puces).
<ol> : Liste ordonnée (numérotée).
<li> : Élément d'une liste.
<img>: Image.
<a>: Lien cliquable pour la navigation.

Tu peux aussi consulter la section Balises des notes de cours (sur dinf.ca) pour avoir plus de détails et des exemples.

Dossier de travail¶

Crée-toi un dossier Exercices dans lequel tu pourras créer et sauvegarder ton fichier HTML.
Dans le dossier, créer un fichier semaine2.html.
Ajoute le squelette HTML dans ta page (soit une copie à partir des notes de cours ou en tapant ! au clavier)

Étapes de réalisation¶

Pour chaque exercice, écrire le HTML pour :

Créer un titre avec le numéro de l'exercice
Écrire les balises pour obtenir le résultat demandé
Ajouter une ligne horizontale

Exercice 1¶

Consigne¶

Sous le titre Exercice 1, affiche :

Un paragraphe :

"Le HTML (HyperText Markup Language) est le langage de balisage standard utilisé pour créer le contenu des pages web."
Une image de ton choix
Une ligne horizontale

Exemple de solution¶

Solution

<h2>Exercice 1</h2>
<p>Le HTML (HyperText Markup Language) est le langage de balisage standard utilisé pour créer le contenu des pages web.</p>
<img alt="Les navigateurs" src="navigateurs.png">
<hr>

Validation¶

Ouvrir le site web suivant : https://validator.w3.org/#validate_by_input
Copier-coller la totalité de votre code HTML dans l'espace prévu
Utiliser le bouton Check pour vérifier les erreurs
Corriger les erreurs

Exercice 2 : La structure du projet et les images¶

Les images sont normalement placées dans un dossier spécifique.

Dans le dossier Exercices, crée un sous-dossier images
Dans le dossier images, dépose une image de ton choix
Dans le fichier HTML, sous le titre Exercice 2 :

Affiche l'image qui se trouve dans le dossier images
Ajoute une ligne horizontale

Exemple de solution¶

Exemple de solution

<h2>Exercice 2</h2>
<img alt="Image du dossier images" src="images/exemple.png">
<hr>

Validation¶

Ouvrir le site web suivant : https://validator.w3.org/#validate_by_input
Copier-coller la totalité de votre code HTML dans l'espace prévue.
Utiliser le bouton Check pour vérifier les erreurs.
Corriger les erreurs

Exercice 3 : Créer une liste à puces¶

Consigne¶

Présente tes trois aliments préférés sous forme de liste à puces.

Exemple de solution¶

Exemple de solution

<h2>Exercice 3 : mes aliments préférés</h2>
<ul>
    <li>Sushi</li>
    <li>Burgers</li>
    <li>Poke bowl</li>
</ul>
<hr>

Validation¶

Ouvrir le site web suivant : https://validator.w3.org/#validate_by_input
Copier-coller la totalité de votre code HTML dans l'espace prévue.
Utiliser le bouton Check pour vérifier les erreurs.
Corriger les erreurs

Exercice 4 : une page de recette¶

Consigne¶

Présente une recette de ton choix incluant les éléments suivants :

Un titre pour le nom de la recette
Une image de la recette - à placer dans le dossier images
Un sous-titre pour la section des ingrédients
Une liste à puces pour les ingrédients
Un sous-titre pour la section préparation
Une liste numérotée pour les étapes de préparation
Un lien cliquable menant à la recette originale choisie
Une ligne horizontale

Exemple de recette très simple : https://www.ricardocuisine.com/recettes/7566-beurre-de-mangues

Exemple de résultat :

Recette

Validation¶

Ouvrir le site web suivant : https://validator.w3.org/#validate_by_input
Copier-coller la totalité de votre code HTML dans l'espace prévue.
Utiliser le bouton Check pour vérifier les erreurs.
Corriger les erreurs

Exercice 5 : lien de retour vers le haut¶

Consigne¶

Dans le notes de cours sur les liens cliquables, trouver comment insérer un lien de rtour vers le haut de la page.
Ajouter un icône cliquable qui ramène vers le haut de la page
Ajouter une ligne horizontale

Exemple de solution¶

Exemple de solution

<h2>Exercice 5</h2>
<a href="#top">⬆️</a>
<hr>

Validation¶

Ouvrir le site web suivant : https://validator.w3.org/#validate_by_input
Copier-coller la totalité de votre code HTML dans l'espace prévue.
Utiliser le bouton Check pour vérifier les erreurs.
Corriger les erreurs

Exercice 6 : un apperçu du CSS¶

Consignes¶

Dans le dossier Exercices, crée un sous-dossier css
Dans le sous-dossier css, crée un nouveau fichier texte
Renomme le fichier texte styles.css
Dans le code HTML de la page :
1. Ajouter un lien vers la feuille de styles css
  
  Voir la page du squelette dans les notes de cours pour avoir un exemple
2. Dans la feuille CSS, ajouter le code suivant :
```
body {
    /*couleur de fond*/
    background-color: #f8eccf;
}

h2 {
    /*couleur de texte*/
    color: #4E9F9D;
}

a {
    /*ne pas souligner les liens cliquables*/
    text-decoration: none;
}
```
3. Sauvegarder et afficher dans le navigateur pour valider les styles
4. Petit défi :
  
  Sachant que l'attribut text-decoration permet d'ajouter ou retirer le souligné sur du texte :
  
  ➡️ Faire en sorte que les titres des exercices soient soulignés.

Validation¶

Ouvrir le site web suivant : https://jigsaw.w3.org/css-validator/#validate_by_input
Copier-coller la totalité de votre code CSS dans l'espace prévue.
Utiliser le bouton Check pour vérifier les erreurs.
Corriger les erreurs.

Résultat final¶

Exemple de résultat final :

¸Exercice