Activité 1 - Se familiariser avec l'éditeur en ligne
Activité 1 - Créer un site Web de base
Il est maintenant le temps de commencer à créer un site Web de base. Pour réaliser cette activité, tu dois suivre les étapes suivantes :
- Ouvrez l’éditeur Web (cliquez sur le bouton “Essaie toi-même !” ci-dessous).
- Utilisez les tags de
headerpour ajouter un titre, et les tags de paragraphe pour écrire un paragraphe à propos de Benji. - Si tu as le temps, écris une liste des friandises préférées de Benji : du dinde, du beurre de cacahuètes et du fromage à effilocher.
Utilise ce tableau de référence pour essayer toi-même quelques tags HTML.
| Tag | Déscription | Exemple |
|---|---|---|
<html></html> | Décrit un document HTML. Tous les sites Web doit commencer par la tag d’ouverture <html> et se terminer par la tag de fermeture </html>. | Voir l’exemple CodePen ci-dessus. |
<!-- --> | Décrit un comment (commentaire). Les comments sont destinés à être vus par les autres codeurs, mais ils ne sont pas affichés sur le site web. | <!-- This line will not show in the browser --> |
<head></head> | Contient tous les éléments HTML qui donnent des informations au navigateur pour afficher correctement le site web. Les éléments HTML situés entre les tags <head> et </head> ne sont pas affichés. | Voir l’exemple CodePen ci-dessus. |
<title></title> | Contient le titre du site Web à utiliser pour nommer l’onglet du navigateur. | <head> <title> Mon site Web </title> </head> |
<body></body> | Contient tous les éléments HTML qui sont affichés dans la page, comme le texte et les images. | Voir l’exemple CodePen ci-dessus. |
<h1></h1>… <h6></h6> | Décrit un titre. <h1> définit le titre le plus important (le plus grand), tandis que <h6> définit le titre le moins important (le plus petit). | <h1>Ce sera un titre important</h1> <h4>Ce sera un titre moins important</h4> |
<p></p> | Décrit un paragraphe. | <p>Les chiens ont évolué pour aimer les humains. En conclusion, les chiens sont le meilleur ami de l’homme.</p> |
<div></div> | Décrit une division ou une section du site. | <div> <h1>Tout sur moi</h1> </div> |
<img> | Une image. Il s’agit d’une tag à fermeture automatique, mais tu dois spécifier la source de l’image pour que le navigateur sache où trouver l’image. | <img src=“aka.ms/Benji-the-dog”> |
<hr> | Dessine une ligne horizontale. Il s’agit d’une autre tag à fermeture automatique, utile si tu souhaites séparer le contenu de la page. | … <hr> … |
<ul><li></li></ul> | Une liste. Pour commencer la liste, utilisez une tag <ul?>. Pour chaque élément à ajouter à la liste, entourez-le en utilisant des tags <li> et </li>. Terminez la liste avec la tag </ul>. | <ul> <li>Ceci est un élément de liste.</li> </ul> |