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 CodePen, JSFiddle ou Glitch 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
metaappropriée. - L'auteur de la lettre sera indiqué dans une balise
metaadé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 !
io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/content/files/en-us/apprendre/html/introduction_to_html/debugging_html/index.md)