Faire une lettre
Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme ! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de <head>
en HTML.
Prérequis : | Avant de se lancer dans cet exercice, vous devez déja avoir travaillé Commencer avec le HTML, Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML, Fondamentaux du texte HTML, Création d'hyperliens et Formatage avancé du texte. |
---|---|
Objectif : | Tester vos connaissances en balisage HTML simple et avancé de texte, d'hyperliens et de ce qu'il convient de mettre dans l'élément <head>. |
Point de départ
Pour commencer cet exercice, vous devez récupérer le texte brut que vous allez baliser et les CSS à inclure dans l'HTML. Créez un nouveau fichier .html
avec l'éditeur de texte dans lequel vous allez travailler (ou bien utilisez un site comme JSBin ou Thimble pour faire l'exercice.)
Projet « lettre »
Pour ce projet, votre tâche consiste à baliser une lettre destinée à être hébergée dans l'intranet d'une université. La lettre est une réponse d'une chercheuse en poste à une doctorante éventuelle à propos de sa candidature pour travailler à l'université.
Sémantique de blocs/structures :
- Il convient que vous donniez à la totalité du document une structure appropriée comprenant le type de document et les éléments
<html>
,<head>
et<body>
. - La lettre doit être marquée avec une structure de paragraphes et d'en‑têtes, en prenant en considération les points suivants : un en‑tête de haut niveau (la ligne « Re : ») et trois en-têtes de deuxième niveau.
- Les dates de début des semestres, les sujets d'étude et les danses exotiques seront balisées avec les types de listes appropriés.
- Mettez les deux adresses dans l'élement
<address>
. En plus, chaque ligne des adresses doit être mise sur une nouvelle ligne sans que ce soit un nouveau paragraphe.
Sémantique en ligne :
- Les noms de l'expéditeur et du destinataire (et « Tél » et « e‑mail ») doivent être marqués comme étant de grande importance.
- Les quatre dates du document doivent être indiquées dans des éléments appropriés contenant des dates lisibles par la machine.
- La première adresse et la première date de la lettre doivent recevoir une valeur d'attribut de classe « sender-column » ; le CSS que vous ajouterez plus tard les alignera à droite, comme c'est le cas dans une mise en page de lettre classique.
- Les cinq acronymes/abréviations dans le corps du texte de la lettre seront marqués pour permettre leur développement.
- Les six indices/exposants seront balisés de manière appropriée.
- Les symboles « degré », « plus grand que » , « multiplier » seront marqués avec les références d'entités voulues.
- Essayez de marquer au moins deux mots importants en gras/italique.
- Deux emplacements nécessitent un hyperlien ; ajoutez les liens appropriés avec des intitulés. Pour l'emplacement sur lequel le lien pointe, utilisez simplement
http://example.com
. - La citation et la devise de l'université doivent être marquées avec les éléments appropriés.
Dans l'en‑tête du document :
- Le jeu de caractères sera précisé comme étant utf-8 avec la balise
meta
appropriée. - L'auteur de la lettre sera indiqué dans une balise
meta
adéquate. - Les CSS fournies seront incorporées avec le marquage approprié.
Conseils et astuces
- Utilisez le validateur HTML W3C pour valider votre HTML ; Vous aurez des points supplémentaires s'il est valide.
- Il n'est pas nécessaire de connaître les CSS pour faire cet exercice ; vous avez juste besoin de le mettre dans un élément HTML.
Exemple
La capture d'écran suivante montre ce à quoi la lettre devrait ressembler après le balisage.
Évaluation
Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le Learning Area Discourse thread ou sur le canal IRC #mdn sur Mozilla IRC. Essayez l'exercice d'abord — il n'y a rien à gagner à tricher !