Annexe A : Jeu de Caractères et Entités HTML

Pour référence, voici le jeu de caractères et d'entités spéciales HTML tiré de [7].

A-1 : Entités de caractères spéciaux

La table suivante liste les entités définies dans le jeu de caractères spéciaux de HTML 4.0 (déclaration SGML "-//W3C//ENTITIES Special//EN//HTML")

Syntax

Description

" quotation mark = APL quote
& ampersand
< less-than sign
> greater-than sign
Πlatin capital ligature OE
œ latin small ligature oe
Š latin capital letter S with caron
š latin small letter s with caron
Ÿ latin capital letter Y with diaeresis
ˆ modifier letter circumflex accent
˜ small tilde
  en space
  em space
  thin space
‌ zero width non-joiner
‍ zero width joiner
‎ left-to-right mark
‏ right-to-left mark
– en dash
— em dash
‘ left single quotation mark
’ right single quotation mark
‚ single low-9 quotation mark
“ left double quotation mark
” right double quotation mark
„ double low-9 quotation mark
† dagger
‡ double dagger
‰ per mille sign
‹ single left-pointing angle quotation mark
› single right-pointing angle quotation mark
€ euro sign

A-2 : Entités ISO Latin 1

Cette table liste les entités HTML prévues dans l'ensemble ISO Latin 1 du W3C "-//W3C//ENTITIES Latin 1//EN//HTML",

Syntax

Description

  no-break space = non-breaking space
¡ inverted exclamation mark
¢ cent sign
£ pound sign
¤ currency sign
¥ yen sign = yuan sign
¦ broken bar = broken vertical bar
§ section sign
¨ diaeresis = spacing diaeresis
© copyright sign
ª feminine ordinal indicator
« left-pointing double angle quotation mark
¬ not sign
­ soft hyphen = discretionary hyphen
® registered sign = registered trade mark sign
¯ macron = spacing macron = overline
° degree sign
± plus-minus sign = plus-or-minus sign
² superscript two = superscript digit two
³ superscript three = superscript digit three
´ acute accent = spacing acute
µ micro sign
¶ pilcrow sign = paragraph sign
· middle dot = Georgian comma
¸ cedilla = spacing cedilla
¹ superscript one = superscript digit one
º masculine ordinal indicator
» right-pointing double angle quotation mark
¼ vulgar fraction one quarter
½ vulgar fraction one half
¾ vulgar fraction three quarters
¿ inverted question mark
À latin capital letter A with grave
Á latin capital letter A with acute
 latin capital letter A with circumflex
à latin capital letter A with tilde
Ä latin capital letter A with diaeresis
Å latin capital letter A with ring above
Æ latin capital letter AE
Ç latin capital letter C with cedilla
È latin capital letter E with grave
É latin capital letter E with acute
Ê latin capital letter E with circumflex
Ë latin capital letter E with diaeresis
Ì latin capital letter I with grave
Í latin capital letter I with acute
Î latin capital letter I with circumflex
Ï latin capital letter I with diaeresis
Ð latin capital letter ETH
Ñ latin capital letter N with tilde
Ò latin capital letter O with grave
Ó latin capital letter O with acute
Ô latin capital letter O with circumflex
Õ latin capital letter O with tilde
Ö latin capital letter O with diaeresis
× multiplication sign
Ø latin capital letter O with stroke
Ù latin capital letter U with grave
Ú latin capital letter U with acute
Û latin capital letter U with circumflex
Ü latin capital letter U with diaeresis
Ý latin capital letter Y with acute
Þ latin capital letter THORN
ß latin small letter sharp s = ess-zed
à latin small letter a with grave
á latin small letter a with acute
â latin small letter a with circumflex
ã latin small letter a with tilde
ä latin small letter a with diaeresis
å latin small letter a with ring above
æ latin small letter ae
ç latin small letter c with cedilla
è latin small letter e with grave
é latin small letter e with acute
ê latin small letter e with circumflex
ë latin small letter e with diaeresis
ì latin small letter i with grave
í latin small letter i with acute
î latin small letter i with circumflex
ï latin small letter i with diaeresis
ð latin small letter eth
ñ latin small letter n with tilde
ò latin small letter o with grave
ó latin small letter o with acute
ô latin small letter o with circumflex
õ latin small letter o with tilde
ö latin small letter o with diaeresis
÷ division sign
ø latin small letter o with stroke
ù latin small letter u with grave
ú latin small letter u with acute
û latin small letter u with circumflex
ü latin small letter u with diaeresis
ý latin small letter y with acute
þ latin small letter thorn with
ÿ latin small letter y with diaeresis

Annexe B : Exemples Concrets

Cette annexe regroupe quelques exemples concrets de documents HTML. tous ces documents sont conformes à la version stricte de la norme HTML 4.0.

B-1 : Elements Structurels et Formatage de Texte Courant 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
    <link rev="made" href="mailto:Oscar Figueiredo">
    <title>Démonstration de Document HTML</title>
  </head>

  <body>
    <h1>Un Simple Document HTML</h1>

    <h2>Eléments Structurels Courants</h2>

    <p>Un paragraphe débute par le tag <code>&lt;p&gt;</code>, les
      retours à la ligne dans cet élément ne sont pas
      pris en compte par le visualiseur qui coupe les lignes d'après
      la taille de la fenêtre. Toutefois l'élément
      <code>&lt;br&gt;</code> permet d'insérer des sauts de ligne
      comme <br>
      ici<br>
      Et la suite continue donc à la ligne d'après.</p>

    <pre>Dans un paragraphe préformatté comme celui-ci,
c'est différent,les sauts à la ligne sont reproduits
tels quels, de même que les tabulations comme
  ici. L'élément <code>&lt;pre&gt;</code> est
plutôt utilisé pour présenter des extraits
de code source.</pre>


    <h2>Liste et eléments de style logique</h2>

    <p>Ce paragraphe montre l'utilisation des différents
      éléments de <em>style logique</em> à
      l'intérieur d'une liste :</p>

    <ul>
      <li>Citation : <cite>Alice au Pays des Merveilles</cite>
      <li>Code : <code>for (i=0; i&lt;12; i++)</code>
      <li>Mise en évidence : <em>Important</em>
      <li>Renforcement : <strong>Nota Bene :</strong>
      <li>Exemple d'entrée au clavier :
        Tapez <kbd>htmlchek sugar=1 mydoc.html</kbd>
      <li>Variable muette : <var>X</var> varie de 0 à 10
    </ul>

    <hr>

    <address>
      <a href="mailto:Oscar.Figueiredo@epfl.ch">&lt;Oscar.Figueiredo@epfl.ch&gt;</a>
    </address>
  </body>
</html>

Ce document est présenté de la façon suivante par Netscape Navigator 4.05 :

[Capture ecran]

B-2 : Liens, listes, images, positionnement par feuilles de style 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <link href="maitlo:Oscar.Figueiredo@epfl.ch" rev="made">
    <title>Démonstration de Document HTML</title>
    <style type="text/css">
      IMG.vcenter {vertical-align: middle}
      IMG.vtop {vertical-align: top}
    </style>
  </head>

  <body>
    <h1>Listes, Figures et Ancres</h1>

    <h2><a name="index">Index</a></h2>

    <p>
    <ol>
      <li><a href="#index">Index</a>
      <li><a href="#listes">Listes</a>
      <li><a href="#images">Images</a>
    </ol>

    <h2><a name="listes">Listes</a></h2>

    <p>L'index est présenté sous forme de liste ordonnée.
      Voici une liste de définition :

    <dl>
      <dt><strong>HTML</strong> : <em>Hypertext Markup Language</em>
      <dd>Le langage utilisé pour écrire les documents sur le
        World Wide Web.
      <dt><strong>SGML</strong> : <em>Standard Generalized Markup Language</em>
      <dd>Langage de description de structure de documents...
    </dl>


    <h2><a name="images">Images</a></h2>

    <p>Voici une image en ligne avec différents types d'alignement spécifiés par feuille de
style&nbsp;:
    <ul>
      <li>Alignement vertical <code>top</code> (avec <code>class="vtop"</code>)&nbsp;:
        <img class="vtop" src="http://some.server/Icons/new.gif" alt="NEW">
      <li>Alignement vertical <code>middle</code> (avec <code>class="vcenter"</code>)&nbsp;:
        <img class="vcenter" src="http://some.server/Icons/new.gif" alt="NEW">
      <li>Alignement vertical <code>bottom</code> (avec style en ligne <code>style="vertical-
align: bottom"</code>)&nbsp;:
        <img style="vertical-align: bottom" src="http://some.server/Icons/new.gif"
alt="NEW">
    </ul>

    <hr>

    <address>
      <a href="mailto:oscar.figueiredo@di.epfl.ch">&lt;oscar.figueiredo@di.epfl.ch&gt;</a>
    </address>
  </body>
</html>

Netscape Navigator 4.05 en donne la visualisation suivante :

[Capture ecran]

Lynx 2.8 en donne la visualisation suivante :

[Capture ecran]

B-3 : Formulaire de Saisie 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <meta content="text/html; charset: iso-8859-1" http-equiv="Content-Type">
    <link rev="made" href="mailto:oscar.Figueiredo@epfl.ch">
    <title>Formulaires : un exemple</title>
  </head>

  <body>
    <h1>Un formulaire simple...</h1>

    <form action="/cgi-bin/handleForm.cgi" method="POST">

      <p>Votre Nom : <input type="TEXT" name="nom" size="25">

      <p>Décrivez-vous en quelques lignes : <br>
        <textarea name="vous" rows="5" cols="50"></textarea>

      <p>Sexe : Masculin <input type="RADIO" name="sexe" value="masculin">
        Féminin <input type="RADIO" name="sexe" value="feminin">

      <p>Avez-vous un ordinateur : <input type="CHECKBOX" name="ordi">

      <p>Si oui de quel type :
        <select name="typeOrdi">
          <option value="pc">PC ou Compatible
          <option>Macintosh
          <option>Autre
        </select>

      <p>
        <input type="SUBMIT" value="Envoyer">
        <input type="RESET" value="Effacer">
    </form>

    <hr>

    <address>
      <a href="mailto:Oscar.Figueiredo@epfl.ch">&lt;Oscar.Figueiredo@epfl.ch&gt;</a>
    </address>

  </body>
</html>

Ce formulaire est présentéde la façon suivante par Netscape Navigator.4.05 :

[Capture ecran]

Lynx 2.8 l'affiche comme suit :

[Capture ecran]

B-4 : Tableaux 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <meta content="text/html; charset=iso-8859-1">
    <link rev="made" href="mailto:Oscar.Figueiredo@epfl.ch">
    <title>Tableaux : un exemple</title>
    <style type="text/css">
      DIV.table {text-align: center;
                 margin-bottom: 1ex;}
      .centered {text-align: center}
      .f-right {text-align: right}
    </style>
  </head>

  <body>

    <h1>Quelques exemples de tableaux...</h1>

    <p>Les attributs <code>ROWSPAN</code> et <code>COLSPAN</code> permettent de
    créer des tableaux complexes :</p>

    <div class="table">
      <table border="1">
        <!-- Déclaration des colonnes pour permettre l'affichage incrémental -->
        <colgroup span="4">
          <col width="0*">
          <col width="0*">
          <col width="0*">
          <col width="0*">
        </colgroup>
        <tbody>
          <tr>
            <th rowspan=2 colspan=2></th>
            <th colspan=2>Moyenne</th>
          </tr>
          <tr>
            <th>Taille</th>
            <th>Poids</th>
          </tr>
          <tr>
            <th rowspan=2>Sexe</th>
            <th>Hommes</th>
            <td>1.80 m</td>
            <td>75 kg</td>
          </tr>
          <tr>
            <th>Femmes</th>
            <td>1.65 m</td>
            <td>55 kg</td>
          </tr>
        </tbody>
      </table>
    </div>
<p> On peut égaler utiliser les feuilles de style pour ajuster
l'alignement des cases du tableau et l'élément <code>&lt;BR&gt;</code> pour
insérer des retours à la ligne à l'intérieur d'une case :</p>


    <div class="table">
      <table border="1">
        <colgroup span="4">
          <col width="0*">
          <col width="0*">
          <col width="0*">
          <col width="0*">
        </colgroup>
        <tbody>
          <tr>
            <th></th>
            <th>Très Long Titre 1</th>
            <th>Très Long Titre 2</th>
            <th>Très Long Titre 3</th></tr>
          <tr>
            <th class="centered">Centré sur toute la ligne</th>
            <td class="centered">1ère Case</td>
            <td class="centered">2ème Case</td>
            <td class="centered">Encore<br>une autre case</td></tr>
          <tr>
            <th>Alignement par case</th>
            <td class="f-right">Aligné à droite</td>
            <td class="centered">Centré</td>
            <td>Par défaut,<br>aligné à gauche</td>
          </tr>
        </tbody>
      </table>
    </div>

    <hr>
    <address>
      <a href="mailto:Oscar.Figueiredo@epfl.ch">&lt;Oscar.Figueiredo@epfl.ch&gt;</a>
    </address>
  </body>
</html>

Netscape 2.0 donne la représentation suivante de ce document :

[Capture ecran]

Annexe C : Références Bibliographiques

[1] The World Wide Web Unleashed, John December and Neil Randall, SAMS Publishing.

[2] Inside the World Wide Web, Steven Vaughan-Nichols, Rob Tidrow et al., New Riders

[3] HTTP/1.0 Internet RFC 1945, Informational, Tim Berners-Lee, Roy T. Fielding, and Henrik Frystyk Nielsen (les spécifications les plus récentes du protocole HTTP sont disponibles à l'URL http://www.w3c.org/Protocols/)

[4] The Common Gateway Interface, National Center for Supercomputing Applications (NCSA), http://hoohoo.ncsa.uiuc.edu/cgi/

[5] SGML An Author's Guide to the Standard Generalized Markup Language, Martin Bryan, Addison Wesley

[6] HTML 2.0 Proposed Standard, RFC 1866, Dan Connoly, HTML Working Group of the Internet Engineering Task Force, http://www.w3.org/MarkUp/html-spec/

[7] HTML 3.2 Reference Specification, Dave Ragget, W3C, http://www.w3.org/TR/REC-html32.html

[8] The HTML 4.0 Specification, Dave Raggett, Arnaud Le Hors, Ian Jacobs, W3C,http://www.w3.org/TR/REC-html40/

[9] HTML Tables, RFC 1942 Dave Ragget, W3C http://www.ics.uci.edu/pub/ietf/html/rfc1942.txt or other RFC repositories.

[10] The Compendium of HTML Elements, Ron Woodall, http://www.htmlcompendium.org/

[11] Information Technology - Universal Multiple-Octet Coded Character Set (UCS) - Part 1 : Architecture and Basic Multilingual Plane, ISO/IEC 10646-1:993

[12] HTML Validation Service, W3C, http://validator.w3.org/

[13] Cascading Style Sheets, level 2, W3C, http://www.w3.org/TR/PR-CSS2/

[14] Standard ECMA-262, ECMAScript: A general purpose, cross-platform programming language, ECMA, http://www.ecma.ch/stand/ecma-262.htm

[15] Extensible Markup Language (XML) 1.0, W3C Recommendation 10-February-1998, http://www.w3.org/TR/1998/REC-xml-19980210

Copyright ©1996,1998 EPFL/DI-LSP.