tuteurs.ens.fr/internet/web/html/index.tml

290 lines
11 KiB
Text
Raw Normal View History

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//ENS/Tuteurs//DTD TML 1//EN"
"tuteurs://DTD/tml.dtd">
<html>
<head>
2005-05-20 01:24:36 +02:00
<title>XHTML</title>
</head>
<body>
<h1>Écrire une page Web</h1>
<p>
Vous trouverez ici une introduction aux différents langages servant à
écrire une page Web : le <abbr title="eXtended HyperText Mark-Up
Language">XHTML</abbr>, bien sûr, mais aussi les feuilles de style
(<abbr title="Cascading Style Sheets">CSS</abbr>).
</p>
<p>
Si vous êtes pressé, vous pouvez aller directement lire notre <a
href="bases.html">Tutoriel XHTML</a>. Pour des questions plus avancées,
vous pouvez poser vos questions sur <a
href="&url.tuteurs;internet/forum/">Forum</a>, dans le groupe
<code>informatique.html</code>.
</p>
<h2>Au commencement était le XHTML</h2>
<p>
2005-05-20 01:24:36 +02:00
Le XHTML (<i lang="en">eXtended HyperText Mark-up Language</i>) est le
langage des pages Web. Il succède au HTML, créé en 1992, et est conforme
2005-05-20 01:24:36 +02:00
aux normes du XML (<i lang="en">eXtensible Mark-up Language</i>). Son
développement actuel est l'&oelig;uvre du <a
2005-05-20 01:24:36 +02:00
href="http://www.w3.org/"><abbr title="World Wide Web
Consortium">W3C</abbr></a>, un consortium regroupant les principaux
acteurs du Web (Microsoft, AOL, Opera, IBM, Apple ou encore
MacroMedia). À l'heure actuelle, nous en sommes à <a
href="http://www.w3.org/TR/xhtml1/">XHTML 1.0</a>.
</p>
<p>
2005-05-20 01:24:36 +02:00
La structure de base du XHTML, ce sont les <strong>balises</strong>
(<em lang="en">tags</em> en anglais) qui définissent les éléments de
la page Web qu'ils entourent. Voici un exemple de balise :
</p>
<pre>&lt;title&gt;Les chevaliers-paysans du lac de Paladru&lt;/title&gt;</pre>
<p class="continue">
&lt;title&gt; est la balise qui définit le titre d'une la page
Web. Notez que les balises vont par paire, avec une ouvrante
(&lt;title&gt;) et une fermante, différenciée par un /
(&lt;/title&gt;). Autre exemple :</p>
<pre>&lt;strong&gt;Important&lt;/strong&gt; : votre tiers provisionnel est dû pour le &lt;em&gt;15 mai&lt;/em&gt;.</pre>
<p class="continue">
La balise &lt;strong&gt; indique que l'élément qu'elle renferme doit
être <strong>renforcé</strong>. La plupart des navigateurs rendent
ceci en mettant le(s) mot(s) en gras. La balise &lt;em&gt; (pour <i
lang="en">emphasize</i>) indique que l'élément doit être <em>mis en
valeur</em>, ce qui est généralement traduit par des
<em>italiques</em>.
</p>
<p>
Vous pouvez écrire du XHTML avec un simple éditeur de texte comme <a
href="&url.tuteurs;unix/editeurs/nedit.html">NEdit</a>, ou avec un
éditeur <abbr title="What You See Is What You Get">WYSIWYG</abbr> (ce
que vous voyez à l'écran est ce qui sera affiché sur le Web) comme
Composer, l'éditeur Web de Mozilla. C'est un langage facile à apprendre,
qui ne nécessite aucune connaissance préalable en
programmation. Évidemment, plus vous voulez faire des choses
tape-à-l'&oelig;il, plus c'est compliqué.
</p>
<h2>Fond &amp; forme</h2>
<h3>Principes : interopérabilité et accessibilité</h3>
<p>
L'un des grands problèmes de la création Web est que vous n'avez aucun
contrôle sur les outils qu'utiliseront vos visiteurs. Ils peuvent
utiliser Internet Explorer comme Mozilla ou Opera ; Windows comme
Mac OS, Unix/Linux ou BeOS ; une bête de course comme un vieux PC
asthmatique avec écran pourri ; une connexion par modem 56Ko comme une
connexion ADSL 1 Go. C'est ce qu'on appelle
l'<dfn>interopérabilité</dfn> : on doit pouvoir lire votre page dans
des conditions correctes <em>indépendamment de son matériel et de ses
logiciels</em>.
</p>
<p>
Et n'oubliez pas aussi que vos utilisateurs peuvent être handicapés
(incapables d'utiliser une souris ou un clavier par exemple),
malvoyants ou aveugles, ou même simplement daltoniens (un peu moins de
10% de la population masculine). C'est l'<dfn>accessibilité</dfn> : un
handicapé doit pouvoir utiliser votre site comme tout le monde.
</p>
<p>
Enfin, méditez cette phrase de Tim Berners-Lee, l'<a
href="&url.tuteurs;internet/histoire.html">inventeur du Web</a>, parue
dans <cite>Technology Review</cite> en 1996 :
</p>
<blockquote>
<p>
Quiconque appose sur une page du web un logo du type : « Cette page
est optimisée pour le navigateur X » est quelqu'un qui semble
souhaiter revenir à l'époque préhistorique d'avant le web, lorsque
l'on avait très peu de chances de pouvoir lire un document écrit sur
un autre ordinateur, un autre traitement de texte ou un autre réseau.
</p>
</blockquote>
<h3>Le fond : le XHTML</h3>
<p>
Le principe de base du XHTML est qu'il se préoccupe du <em>contenu</em>
2005-05-04 13:58:04 +02:00
et non du <em>rendu visuel</em>. Si vous avez fait un peu de <a
href="&url.tuteurs;logiciels/latex/">LaTeX</a>, cette manière de
travailler devrait vous être familière. Les « styles » de Word s'en
approchent également. Vous définissez des titres, des éléments
importants, des citations, des liens. Tout le côté décoratif (savoir si
la police de caractères fera telle ou telle taille, si votre texte sera
en rouge ou bleu, etc.) est dévolu aux feuilles de style.
</p>
<h3>La forme : les feuilles de style</h3>
<p>
CSS est le langage des feuilles de style. Ciel, un autre langage à
apprendre ! Rassurez-vous, CSS est complémentaire du XHTML. CSS1 est
apparu en 1996. CSS2, qui prend le relais, est lui apparu en 1998. À
2005-05-20 01:24:36 +02:00
l'heure actuelle, c'est <a href="http://www.w3.org/TR/CSS21/">CSS2.1</a>
(septembre 2003) qui fait autorité.
</p>
<p>
Les <dfn>feuilles de style</dfn> sont une manière simple de prendre en
charge le côté esthétique d'une page Web. Tandis que le XHTML ne
s'occupe que de la structure syntaxique de la page, CSS ajoute à votre
gré couleurs, fontes exotiques, effets de texte. Cette dissociation
des rôles permet de ne pas pénaliser les vieux navigateurs, ou les
navigateurs en mode texte (comme Lynx ou W3M), ou encore ceux qui
utilisent des médias différents (assistant personnel, téléphone
portable, ordinateur avec synthétiseur vocal). Elle vous permet aussi
de changer radicalement l'esthétique de votre page en modifiant un
seul fichier. Consultez par exemple le <a
href="http://www.csszengarden.com/">CSS Zen Garden</a> pour voir ce
qu'on peut faire.
</p>
<h2>Comment apprendre ?</h2>
<p>Plusieurs solutions existent pour apprendre à écrire une page Web,
et vous pouvez les mélanger. Dans l'ordre d'apprentissage, nous vous
conseillons de :</p>
<ul>
<li> <strong>lire notre <a href="bases.html">tutoriel
2005-05-20 01:24:36 +02:00
XHTML</a></strong>. Il vous permettra de faire des pages simples et
sobres. Même si vous voulez vous lancer dans quelque chose de
compliqué, ou si vous avez décidé d'utiliser un éditeur WYSIWYG,
lisez-le. Mieux vaut savoir un minimum ce qu'on fait, non ?</li>
<li> <strong>lire notre <a href="css.html">tutoriel
CSS</a></strong>. Attention : il est encore en cours de
rédaction.</li>
<li> <strong>regarder le code source d'autres pages</strong>, en
commençant par des pages simples. Avec Mozilla, vous avez accès au
code source en tapant <code>Ctrl-U</code>. C'est le plus souvent par
l'imitation d'autres pages qu'on apprend.</li>
<li> <strong>lire les spécifications du W3C</strong>. À lire, celle du
<a href="http://www.w3.org/TR/xhtml1/">XHTML 1.0</a>, puis celle de
2005-05-20 01:24:36 +02:00
<a href="http://www.w3.org/TR/CSS21/">CSS2.1</a>. Elles sont bien plus
lisibles qu'il n'y paraît, mais c'est vrai que ce n'est pas le meilleur
moyen pour débuter.</li>
</ul>
<p>
Si vous n'avez pas le temps ou l'envie, essayez nos <a
href="themes.html">Thèmes</a> : un kit comprenant un fichier-type en
HTML et des feuilles de style déjà toutes faites. Vous pouvez ainsi
avoir un joli site en 2 coups de cuiller à pot.
</p>
<h2>Ressources sur le Web</h2>
<h3>Documents normatifs</h3>
<ul>
<li> le <a href="http://www.w3.org/"><strong>site Web du W3C</strong></a></li>
<li> la <strong>spécification de XHTML 1.0</strong>, la version actuelle
du XHTML : en <a href="http://www.w3.org/TR/xhtml1/">anglais</a>
2005-05-20 01:24:36 +02:00
(seule version normative), ou la <a
href="http://www.la-grange.net/w3c/xhtml1/">traduction
française</a></li>
<li> la <strong>spécification de CSS 2.1</strong>, le langage des feuilles de
style : en <a href="http://www.w3.org/TR/CSS21/">anglais</a>
(seule version existante), ou la <a
href="http://www.yoyodesign.org/doc/w3c/css2/cover.html">traduction française</a>.</li>
<li> les <strong>directives pour l'accessibilité des données sur le
Web</strong> : comment faire des sites accessibles aux handicapés ; en
<a href="http://www.w3.org/TR/WAI-WEBCONTENT/">anglais</a> (version
officielle) ou en <a
href="http://www.la-grange.net/w3c/wcag1/wai-pageauth.html">français</a></li>
<li> le <a href="http://www.unicode.org/"><strong>Standard
Unicode</strong></a>, dont le but est de représenter tous les langages
de la Terre, de l'anglais aux kanjis en passant par le devanagari, le
viêtnamien ou l'arabe</li>
</ul>
<h3>Outils</h3>
<ul>
<li> le <a href="http://validator.w3.org/">validateur de (X)HTML</a>
du W3C</li>
<li> un <a href="http://jigsaw.w3.org/css-validator/validator-uri.html">validateur
CSS</a> du W3C</li>
<li> un <a href="http://validator.w3.org/checklink">vérificateur de
liens</a> du W3C</li>
</ul>
<h3>Aller plus loin</h3>
<ul>
<li> l'<a href="http://openweb.eu.org/">OpenWeb Group</a>, un groupe
de professionnels attachés aux standards du Web : articles de fond,
tutoriels et études de cas.</li>
<li> <a href="http://www.csszengarden.com/">CSS Zen Garden</a> : une
démonstration magistrale de la puissance et de l'intérêt des feuilles
de style. En un seul clic, vous pouvez changer de feuille de style et
voir le site prendre une toute autre tête. [anglais]</li>
<li> <a href="http://www.positioniseverything.net/">Position Is
Everything</a> : site qui répertorie les bugs dans l'implémentation
CSS des navigateurs actuels (surtout Internet Explorer) et explique
comment se passer des tableaux dans la mise en page [anglais]</li>
<li> des <a
href="http://ppewww.ph.gla.ac.uk/~flavell/unicode/unidata.html">tables
de test pour Unicode</a></li>
<li> <a href="http://www.upsdell.com/BrowserNews/">Browser News</a> :
les dernières nouveautés concernant les différents navigateurs, et
d'intéressantes ressources, en particulier un tableau des <a
href="http://www.upsdell.com/BrowserNews/res_fontsamp.htm">principales
fontes disponibles</a> pour Windows, Mac OS et Unix/Linux.</li>
<li> <a href="http://www.pescadoo.net/html/">Pescadoo.Lab</a> :
manipuler les couleurs pour le Web, choisir les bonnes couleurs et les
bonnes palettes graphiques. Dans le même genre, il y a aussi <a
href="http://www.smartpixel.net/chromoweb/fr/">ChromoWeb</a>.</li>
<li> enfin, ce n'est pas un site Web mais un groupe de <a
href="&url.tuteurs;internet/usenet-fr.html">Usenet-fr</a> :
<code>fr.comp.infosystemes.www.auteurs</code>, très utile notamment si
vous pataugez un peu avec les feuilles de style.</li>
</ul>
<div class="metainformation">Auteur : Marie-Lan Nguyen.
<date value="from git" />
2003-06-17 01:46:32 +02:00
</div>
</body>
</html>
<!-- LocalWords: Get
-->