{"id":2450,"date":"2020-10-06T18:09:10","date_gmt":"2020-10-06T16:09:10","guid":{"rendered":"http:\/\/graphizm.fr\/greta\/?p=2450"},"modified":"2025-11-06T22:30:41","modified_gmt":"2025-11-06T21:30:41","slug":"rediger-page-web-10-etapes","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/rwrn\/rediger-page-web-10-etapes\/","title":{"rendered":"R\u00e9diger une page Web en 10 \u00e9tapes"},"content":{"rendered":"\n

Dans ce TD nous allons apprendre \u00e0 structurer et styliser une page Web<\/strong> en tenant compte des contraintes de la r\u00e9daction et du r\u00e9f\u00e9rencement des pages Web. Nous utiliserons 3 outils : un \u00e9diteur Markdown<\/strong> en ligne (StackEdit), un \u00e9diteur de carte heuristique <\/strong>en ligne (TextToMindMap) et un \u00e9diteur de code<\/strong> en local (Brackets).<\/p>\n\n\n\n

Pour l’utilisation de l’\u00e9diteur Markdown, je vous renvoie vers le cours intitul\u00e9 Utiliser StackEdit<\/a>. Pour la prise en main et la personnalisation de l’\u00e9diteur de code Brackets, je vous renvoie vers les cours Personnaliser Brackets<\/a> et les activit\u00e9s propos\u00e9es dans le TD intitul\u00e9 Manipuler le code source avec Brackets<\/a>. Concernant TextToMindMap, la prise en main est tr\u00e8s intuitive : aucun pr\u00e9requis n’est exig\u00e9.<\/p>\n\n\n\n

Pour r\u00e9aliser ce TD, il est indispensable d’avoir une vision claire de ce qu’est une structure \u00e9l\u00e9mentaire HTML. Pour ceux qui d\u00e9couvriraient ce concept, je vous invite \u00e0 consulter le cours intitul\u00e9 Identifier la structure d’une page HTML<\/a><\/p>\n\n\n\n

L’objectif de ce TD est d’afficher dans la fen\u00eatre d’un navigateur une page HTML dont la structure r\u00e9dactionnelle suit un plan logique simple \u00e0 percevoir<\/strong>. De plus, dans la perspective d’une publication en ligne, nous souhaitons structurer le texte de mani\u00e8re \u00e0 en optimiser le r\u00e9f\u00e9rencement<\/strong> c’est \u00e0 dire l’indexation dans les pages de r\u00e9sultats des moteurs de recherche (= SEO ou Search Engine Optimisation).<\/p>\n\n\n\n

Nous allons proc\u00e9der en suivant les 10 \u00e9tapes<\/strong> suivantes :<\/p>\n\n\n\n

    \n
  1. Collecter la documentation<\/strong><\/li>\n\n\n\n
  2. Construire l’arbre des mots-cl\u00e9s<\/strong><\/li>\n\n\n\n
  3. \u00c9tablir le plan<\/strong> dans un \u00e9diteur Markdown<\/li>\n\n\n\n
  4. Optimiser la r\u00e9daction des titres<\/strong><\/li>\n\n\n\n
  5. Tester la coh\u00e9rence de la structure<\/strong> en examinant le sommaire<\/li>\n\n\n\n
  6. R\u00e9diger l’introduction<\/strong> (chapeau ou chap\u00f4)<\/li>\n\n\n\n
  7. R\u00e9diger les paragraphes<\/strong> en utilisant les mots-cl\u00e9s disponibles<\/li>\n\n\n\n
  8. Tester la syntaxe<\/strong> avec un robot lecteur<\/li>\n\n\n\n
  9. Exporter en HTML<\/strong> la version finalis\u00e9e<\/li>\n\n\n\n
  10. Personnaliser la pr\u00e9sentation<\/strong> de la page<\/li>\n<\/ol>\n\n\n\n

    Il existe bien s\u00fbr une \u00e9tape pr\u00e9paratoire incontournable : le choix du sujet<\/strong>… Pour illustrer ce TD, je me baserai sur un texte propos\u00e9 lors d’une session pr\u00e9c\u00e9dente par un stagiaire du GRETA.<\/p>\n\n\n\n

    \n
    \n

    Sommaire<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n