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.
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
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 <!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>
<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
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