Améliorez votre document HTML avec CSS


  • Français


  • Lorsque vous rédigez une documentation, que ce soit pour un projet open source ou un projet de rédaction technique, vous devez avoir deux objectifs : le document doit être bien écrit et le document doit être facile à lire. Le premier est abordé par des compétences rédactionnelles claires et une édition technique. La seconde peut être résolue avec quelques modifications simples dans un document HTML.

    HyperText Markup Language, ou HTML, est l’épine dorsale d’Internet. Depuis l’aube du “World Wide Web” en 1994, chaque navigateur Web utilise HTML pour afficher des documents et des sites Web. Et depuis presque aussi longtemps, HTML a pris en charge le feuille de styleun ajout spécial à un document HTML qui définit comment le texte doit apparaître à l’écran.

    Vous pouvez écrire la documentation du projet en HTML brut, et cela fait le travail. Cependant, le style HTML brut peut sembler un peu spartiate. Au lieu de cela, essayez d’ajouter quelques styles simples à un document HTML pour ajouter un peu de piquant à la documentation et rendre vos documents plus clairs et plus faciles à lire.

    Contents

    Définir un document HTML

    Commençons par un document HTML simple et explorons comment y ajouter des styles. Un document HTML vide contient le définition en haut, suivie d’un bloc pour définir le document lui-même. Au sein de la , vous devez également inclure un en-tête de document contenant des métadonnées sur le document, telles que son titre. Le contenu du corps du document va à l’intérieur d’un bloquer dans le parent bloquer.

    Vous pouvez définir une page vierge avec ce code HTML :

    
    

    Dans un autre article sur l’écriture de documentation de projet en HTML, j’ai mis à jour un fichier Lisez-moi d’un jeu de société open source du texte brut à un document HTML, en utilisant quelques balises HTML de base comme

    et

    pour les titres et sous-titres,

    pour les paragraphes, et et pour le texte en gras et en italique. Reprenons là où nous nous sommes arrêtés avec cet article :

    <!DOCTYPE html>
    <html>
      <head>
        <title>Simple Senet</title>
      </head>
      <body>
        <h1>Simple Senet</h1>
        <h2>How to Play</h2>
       
        <p>The game will automatically "throw" the throwing sticks
        for you, and display the results in the lower-right corner
        of the screen.</p>
       
        <p>If the "throw" is zero, then you lose your turn.</p>
       
        <p>When it's your turn, the game will automatically select
        your first piece on the board. You may or may not be
        able to make a move with this piece, so select your piece
        to move, and hit <i>Space</i> (or <i>Enter</i>) to move
        it. You can select using several different methods:</p>
       
        <ul>
          <li><i>Up</i>/<i>down</i>/<i>left</i>/<i>right</i> to
          navigate to a specific square.</li>
       
          <li>Plus (<b>+</b>) or minus (<b>-</b>) to navigate "left"
          and "right" on the board. Note that this will automatically
          follow the "backwards S" shape of the board.</li>
       
          <li><em>Tab</em> to select your next piece on the
          board.</li>
        </ul>
       
        <p>To quit the game at any time, press <b>Q</b> (uppercase
        Q) or hit <i>Esc</i>, and the game will prompt if you want
        to forfeit the game.</p>
       
        <p>You win if you move all of your pieces off the board
        before your opponent. It takes a combination of luck and
        strategy!</p>
      </body>
    </html>

    Ce document HTML illustre quelques éléments de bloc et en ligne courants utilisés par les rédacteurs techniques qui écrivent avec HTML. Les éléments de bloc définissent un rectangle autour du texte. Les paragraphes et les titres sont des exemples d’éléments de bloc, car ils s’étendent du bord gauche au bord droit du document. Par exemple,

    entoure un rectangle invisible autour d’un paragraphe. En revanche, les éléments en ligne suivent le texte là où ils sont utilisés. Si tu utilises sur du texte dans un paragraphe, seul le texte entouré de et devient audacieux.

    Vous pouvez appliquer un style direct à ce document pour modifier la police, les couleurs et d’autres styles de texte, mais un moyen plus efficace de modifier l’apparence du document consiste à appliquer un feuille de style au document lui-même. Vous pouvez le faire dans le élément, avec d’autres métadonnées. Vous pouvez référencer un fichier pour la feuille de style, mais pour cet exemple, utilisez un