289 lines
11 KiB
XML
289 lines
11 KiB
XML
<?xml version="1.0" encoding="ISO-8859-1"?>
|
||
<!DOCTYPE html
|
||
PUBLIC "-//ENS/Tuteurs//DTD TML 1//EN"
|
||
"tuteurs://DTD/tml.dtd">
|
||
<html>
|
||
<head>
|
||
<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>
|
||
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
|
||
aux normes du XML (<i lang="en">eXtensible Mark-up Language</i>). Son
|
||
développement actuel est l'œuvre du <a
|
||
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>
|
||
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><title>Les chevaliers-paysans du lac de Paladru</title></pre>
|
||
|
||
<p class="continue">
|
||
<title> est la balise qui définit le titre d'une la page
|
||
Web. Notez que les balises vont par paire, avec une ouvrante
|
||
(<title>) et une fermante, différenciée par un /
|
||
(</title>). Autre exemple :</p>
|
||
|
||
<pre><strong>Important</strong> : votre tiers provisionnel est dû pour le <em>15 mai</em>.</pre>
|
||
|
||
<p class="continue">
|
||
La balise <strong> 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 <em> (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'œil, plus c'est compliqué.
|
||
</p>
|
||
|
||
<h2>Fond & 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>
|
||
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. À
|
||
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
|
||
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
|
||
<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>
|
||
(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.
|
||
Dernière modification le <date value="$Date: 2007-07-17 10:02:41 $"/>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|
||
|
||
<!-- LocalWords: Get
|
||
-->
|