Le plan d'une maison
Une maison a une entrée, des couloirs, des pièces, un jardin. Une page a un en-tête (header), une navigation (nav), un contenu principal (main) et un pied de page (footer).
M04 · A. Créer une page web en HTML
Les éléments de base d'une page HTML
Écrire le squelette d'une page, puis utiliser les balises de contenu, les listes, les liens et chemins d'accès, les images et médias, les tableaux et les balises de structure.
1Situer
Une coopérative d'huile d'argan près de Taroudant veut un site vitrine : une présentation, la liste des produits avec leurs prix, des photos, une vidéo de fabrication et un lien vers la page de contact. Chacun de ces contenus a sa balise HTML. Bien les choisir, c'est rendre la page claire pour les visiteurs, pour Google et pour les personnes malvoyantes.
2Comprendre
Tout ce qui s'affiche est dans <body>. Le <head>, invisible, contient l'encodage, le titre de l'onglet et les liens vers le CSS.
1 / 5
Le squelette d’une page
Toute page HTML5 commence ainsi (dans VS Code : ! puis Tab) :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre dans l'onglet</title>
</head>
<body>
Le contenu visible
</body>
</html>
Le <head> contient les informations sur la page (encodage, titre, liens vers le CSS). Le <body> contient ce qui s’affiche.
Les balises de contenu
| Balise | Rôle |
|---|---|
<h1> à <h6> | titres, du plus important au moins important |
<p> | paragraphe |
<strong>, <em> | important, insistance |
<br>, <hr> | retour à la ligne, séparateur |
<ul>, <ol>, <li> | liste à puces, liste numérotée, élément |
<a href="..."> | lien |
<img src="..." alt="..."> | image |
<audio>, <video> | son, vidéo (avec l’attribut controls) |
<table>, <tr>, <th>, <td> | tableau, ligne, en-tête, cellule |
Les couleurs
En HTML pur, on n’ajoute plus de couleurs par des attributs : c’est le rôle du CSS (partie C). On les écrit par leur nom (red), en hexadécimal (#c0392b) ou en rgb(192, 57, 43).
Les chemins d’accès
- relatif : à partir du fichier courant (
images/logo.png,../index.html) ; - absolu : adresse complète (
https://www.exemple.ma/logo.png) ; - ancre : vers un endroit de la page (
href="#contact"versid="contact").
Les balises de structure
HTML5 a des balises sémantiques qui disent à quoi sert chaque zone :
<header> en-tête · <nav> navigation · <main> contenu principal · <section> partie thématique · <article> contenu autonome · <aside> contenu annexe · <footer> pied de page.
<div> (bloc) et <span> (en ligne) n’ont pas de sens particulier : on les garde pour regrouper des éléments à mettre en forme.
Les chemins d'accès, comme une adresse
Un chemin relatif part de l'endroit où l'on est (« la porte à côté »). Un chemin absolu donne l'adresse complète (« 12 rue Hassan II, Rabat »).
<img src="images/argan.jpg" alt="Huile d'argan"> relatif <a href="contact.html">Contact</a> relatif <a href="https://www.exemple.ma">Site</a> absolu
Publicité
3Manipuler
Complétez la page de la coopérative. Les consignes se cochent dès que le code est correct.
- Ajoutez deux produits dans la liste <ul>
- Ajoutez une ligne au tableau des prix
- Ajoutez une image avec un texte alternatif (alt)
- Ajoutez un lien vers contact.html
- Terminez la page par un <footer>
4Pratiquer
Exercice 1 · Le bon choix de balise
Quelle balise utiliser pour : (1) le nom du site ; (2) un menu de liens ; (3) une recette complète qui a du sens seule ; (4) un mot important dans une phrase ; (5) les mentions légales en bas de page ?
Voir le corrigé
1. <h1> (dans <header>) 2. <nav> avec des <a> 3. <article> 4. <strong> (ou <em> pour une insistance) 5. <footer>
Exercice 2 · Les chemins
Le site a cette structure : index.html, pages/contact.html, images/logo.png. Écrivez le lien vers le logo (1) depuis index.html, (2) depuis pages/contact.html.
Voir un indice
.. remonte d'un dossier.
Voir le corrigé
1. <img src="images/logo.png" alt="Logo"> 2. <img src="../images/logo.png" alt="Logo">
Exercice 3 · Une vidéo et un son
Ajoutez une vidéo fabrication.mp4 avec les contrôles, et un fichier audio jingle.mp3.
Voir le corrigé
<video src="videos/fabrication.mp4" controls width="480"></video> <audio src="audio/jingle.mp3" controls></audio>
Publicité