Vous lisez : Annexes
Partie Précédente : 11 L'Avenir du World Wide Web
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><p></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><br></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><pre></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<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"><Oscar.Figueiredo@epfl.ch></a>
</address>
</body>
</html>
Ce document est présenté de la façon suivante par Netscape Navigator 4.05 :
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 :
<ul>
<li>Alignement vertical <code>top</code> (avec <code>class="vtop"</code>) :
<img class="vtop" src="http://some.server/Icons/new.gif" alt="NEW">
<li>Alignement vertical <code>middle</code> (avec <code>class="vcenter"</code>) :
<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>) :
<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"><oscar.figueiredo@di.epfl.ch></a>
</address>
</body>
</html>
Netscape Navigator 4.05 en donne la visualisation suivante :
Lynx 2.8 en donne la visualisation suivante :
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"><Oscar.Figueiredo@epfl.ch></a>
</address>
</body>
</html>
Ce formulaire est présentéde la façon suivante par Netscape Navigator.4.05 :
Lynx 2.8 l'affiche comme suit :
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><BR></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"><Oscar.Figueiredo@epfl.ch></a>
</address>
</body>
</html>
Netscape 2.0 donne la représentation suivante de ce document :
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.