2003-05-15 12:41:40 +02:00
|
|
|
|
<?xml version="1.0" encoding="ISO-8859-1"?>
|
|
|
|
|
|
<!DOCTYPE html
|
|
|
|
|
|
PUBLIC "-//ENS/Tuteurs//DTD TML 1//EN"
|
|
|
|
|
|
"tuteurs://DTD/tml.dtd">
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<title>HTML</title>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
2003-05-22 19:59:41 +02:00
|
|
|
|
<h1><3E>crire une page Web</h1>
|
|
|
|
|
|
|
2004-02-19 21:07:06 +01:00
|
|
|
|
<p>
|
|
|
|
|
|
Vous trouverez ici une introduction aux diff<66>rents langages servant <20>
|
|
|
|
|
|
<EFBFBD>crire une page Web : le <abbr title="HyperText Mark-Up
|
|
|
|
|
|
Language">HTML</abbr>, bien s<>r, mais aussi les feuilles de style
|
|
|
|
|
|
(<abbr title="Cascading Style Sheets">CSS</abbr>).
|
2003-05-22 19:59:41 +02:00
|
|
|
|
</p>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
2004-02-19 21:07:06 +01:00
|
|
|
|
<p>
|
|
|
|
|
|
Si vous <20>tes press<73>, vous pouvez aller directement lire notre <a
|
|
|
|
|
|
href="bases.html">Tutoriel HTML</a>. Pour des questions plus avanc<6E>es,
|
|
|
|
|
|
vous pouvez poser vos questions sur <a
|
|
|
|
|
|
href="&url.tuteurs;internet/forum/">Forum</a>, dans le groupe
|
|
|
|
|
|
<code>informatique.html</code>.
|
2003-05-15 12:41:40 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
2004-02-19 21:07:06 +01:00
|
|
|
|
<h2>Au commencement <20>tait le HTML</h2>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
|
|
|
|
|
<p>
|
2003-10-09 16:03:54 +02:00
|
|
|
|
Le HTML (<i lang="en">HyperText Mark-up Language</i>) est le langage
|
2004-02-19 21:07:06 +01:00
|
|
|
|
des pages Web. Il a <20>t<EFBFBD> cr<63><72> en 1992, et 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). <20> l'heure actuelle, nous en sommes <20> <a
|
2003-05-15 12:41:40 +02:00
|
|
|
|
href="http://www.w3.org/TR/REC-html40/">HTML 4.01</a> qui remonte <20>
|
|
|
|
|
|
fin 1999.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2004-02-19 21:07:06 +01:00
|
|
|
|
La structure de base du HTML, ce sont les <strong>balises</strong>
|
|
|
|
|
|
(<em lang="en">tags</em>) en anglais) qui d<>finissent les <20>l<EFBFBD>ments de
|
|
|
|
|
|
la page Web qu'ils entourent. Voici un exemple de balise :
|
2003-05-15 12:41:40 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre><title>Les chevaliers-paysans du lac de Paladru</title></pre>
|
|
|
|
|
|
|
|
|
|
|
|
<p class="continue">
|
2004-02-19 21:07:06 +01:00
|
|
|
|
<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<66>renci<63>e par un /
|
|
|
|
|
|
(</title>). Autre exemple :</p>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
2003-10-09 16:03:54 +02:00
|
|
|
|
<pre><strong>Important</strong> : votre tiers provisionnel est d<> pour le <em>15 mai</em>.</pre>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
|
|
|
|
|
<p class="continue">
|
|
|
|
|
|
La balise <strong> indique que l'<27>l<EFBFBD>ment qu'elle renferme doit
|
2004-02-19 21:07:06 +01:00
|
|
|
|
<EFBFBD>tre <strong>renforc<72></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'<27>l<EFBFBD>ment doit <20>tre <em>mis en
|
|
|
|
|
|
valeur</em>, ce qui est g<>n<EFBFBD>ralement traduit par des
|
|
|
|
|
|
<em>italiques</em>.
|
|
|
|
|
|
</p>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
|
|
|
|
|
<p>
|
2004-02-19 21:07:06 +01:00
|
|
|
|
Vous pouvez <20>crire du HTML avec un simple <20>diteur de texte comme <a
|
|
|
|
|
|
href="&url.tuteurs;unix/editeurs/nedit.html">NEdit</a>, ou avec un
|
|
|
|
|
|
<EFBFBD>diteur <abbr title="What You See Is What You Get">WYSIWYG</abbr> (ce
|
|
|
|
|
|
que vous voyez <20> l'<27>cran est ce qui sera affich<63> sur le Web) comme
|
|
|
|
|
|
Composer, l'<27>diteur Web de Mozilla. C'est un langage facile <20>
|
|
|
|
|
|
apprendre, qui ne n<>cessite aucune connaissance pr<70>alable en
|
|
|
|
|
|
programmation. <20>videmment, plus vous voulez faire des choses
|
|
|
|
|
|
tape-<2D>-l'œil, plus c'est compliqu<71>.
|
2003-05-15 12:41:40 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
2004-02-19 21:07:06 +01:00
|
|
|
|
<h2>Fond & forme</h2>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
2004-02-19 21:07:06 +01:00
|
|
|
|
<h3>Principes<65>: interop<6F>rabilit<69> et accessibilit<69></h3>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
|
|
|
|
|
<p>
|
2004-02-19 21:07:06 +01:00
|
|
|
|
L'un des grands probl<62>mes de la cr<63>ation Web est que vous n'avez aucun
|
|
|
|
|
|
contr<EFBFBD>le sur les outils qu'utiliseront vos visiteurs. Ils peuvent
|
|
|
|
|
|
utiliser Internet Explorer comme Mozilla ou Opera<72>; Windows comme
|
|
|
|
|
|
Mac<EFBFBD>OS, Unix/Linux ou BeOS<4F>; une b<>te de course comme un vieux PC
|
|
|
|
|
|
asthmatique avec <20>cran pourri<72>; une connexion par modem 56Ko comme une
|
|
|
|
|
|
connexion ADSL. C'est ce qu'on appelle l'<dfn>interop<6F>rabilit<69></dfn><3E>:
|
|
|
|
|
|
on doit pouvoir lire votre page dans des conditions correctes
|
|
|
|
|
|
ind<EFBFBD>pendamment de son mat<61>riel et de ses logiciels.
|
2003-05-15 12:41:40 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2004-02-19 21:07:06 +01:00
|
|
|
|
Et n'oubliez pas aussi que vos utilisateurs peuvent <20>tre handicap<61>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<69></dfn><3E>: un
|
|
|
|
|
|
handicap<EFBFBD> doit pouvoir utiliser votre site comme tout le monde.
|
2003-05-15 12:41:40 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
2004-02-19 21:07:06 +01:00
|
|
|
|
<h3>Le fond<6E>: le HTML</h3>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
|
|
|
|
|
<p>
|
2004-02-19 21:07:06 +01:00
|
|
|
|
Le principe de base du HTML est qu'il se pr<70>occupe du <em>contenu</em>
|
|
|
|
|
|
et non du <em>rendu visuel</em>. Si vous avez fait un peu de LaTeX,
|
|
|
|
|
|
cette mani<6E>re de travailler devrait vous <20>tre famili<6C>re. Les
|
|
|
|
|
|
<EFBFBD><EFBFBD>styles<EFBFBD><EFBFBD> de Word s'en approchent <20>galement. Vous d<>finissez des
|
|
|
|
|
|
titres, des <20>l<EFBFBD>ments importants, des citations, des liens. Tout le
|
|
|
|
|
|
c<EFBFBD>t<EFBFBD> d<>coratif (savoir si la police de caract<63>res fera telle ou telle
|
|
|
|
|
|
taille, si votre texte sera en rouge ou bleu, etc.) est d<>volu aux
|
|
|
|
|
|
feuilles de style.
|
2003-05-15 12:41:40 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
2004-02-19 21:07:06 +01:00
|
|
|
|
<h3>La forme<6D>: les feuilles de style</h3>
|
2003-05-22 19:59:41 +02:00
|
|
|
|
|
2004-02-19 21:07:06 +01:00
|
|
|
|
<p>
|
|
|
|
|
|
CSS est le langage des feuilles de style. Ciel, un autre langage <20>
|
|
|
|
|
|
apprendre<EFBFBD>! Rassurez-vous, CSS est compl<70>mentaire du HTML. CSS1 est
|
|
|
|
|
|
apparu en 1996. CSS2, qui prend le relais, est lui apparu en 1998. <20>
|
|
|
|
|
|
l'heure actuelle, c'est <a
|
|
|
|
|
|
href="http://www.w3.org/TR/CSS21/">CSS2.1</a> (septembre 2003) qui
|
|
|
|
|
|
fait autorit<69>.
|
2003-05-22 19:59:41 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
2004-02-19 21:07:06 +01:00
|
|
|
|
<p>
|
|
|
|
|
|
Les feuilles de style sont une mani<6E>re simple de prendre en charge le
|
|
|
|
|
|
c<EFBFBD>t<EFBFBD> esth<74>tique d'une page Web. Tandis que le HTML ne s'occupe que de
|
|
|
|
|
|
la structure syntaxique de la page, CSS ajoute <20> votre gr<67> 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<EFBFBD>rents (assistant personnel, t<>l<EFBFBD>phone portable, ordinateur avec
|
|
|
|
|
|
synth<EFBFBD>tiseur vocal). Elle vous permet aussi de changer radicalement
|
|
|
|
|
|
l'esth<74>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.
|
2003-05-22 19:59:41 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
2003-05-15 12:41:40 +02:00
|
|
|
|
<h2>Comment apprendre ?</h2>
|
|
|
|
|
|
|
2003-05-22 19:59:41 +02:00
|
|
|
|
<p>Plusieurs solutions existent pour apprendre <20> <20>crire une page Web,
|
|
|
|
|
|
et vous pouvez les m<>langer. Dans l'ordre d'apprentissage, nous vous
|
|
|
|
|
|
conseillons de<64>:</p>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
|
|
|
|
|
<ul>
|
2004-02-19 21:07:06 +01:00
|
|
|
|
<li> <strong>lire notre <a href="bases.html">tutoriel</a></strong>. Il
|
|
|
|
|
|
vous permettra de faire des pages simples et sobres. M<>me si vous
|
|
|
|
|
|
voulez vous lancer dans quelque chose de compliqu<71>, ou si vous avez
|
|
|
|
|
|
d<EFBFBD>cid<EFBFBD> d'utiliser un <20>diteur WYSIWYG, lisez-le. Mieux vaut savoir un
|
|
|
|
|
|
minimum ce qu'on fait, non<6F>?</li>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
|
|
|
|
|
<li> <strong>regarder le code source d'autres pages</strong>, en
|
|
|
|
|
|
commen<EFBFBD>ant par des pages simples. Avec Mozilla, vous avez acc<63>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<73>cifications du W3C</strong>. <20> lire, celle du
|
|
|
|
|
|
<a href="http://www.w3.org/TR/html4/">HTML 4.01</a>, puis celle de <a
|
2003-10-09 16:03:54 +02:00
|
|
|
|
href="http://www.w3.org/TR/CSS21/">CSS2.1</a>. Elles sont bien plus
|
2003-05-15 12:41:40 +02:00
|
|
|
|
lisibles qu'il n'y para<72>t, mais c'est vrai que ce n'est pas le
|
|
|
|
|
|
meilleurs moyen pour d<>buter.</li>
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
2004-02-19 21:07:06 +01:00
|
|
|
|
<h2>Ressources sur le Web</h2>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
2004-02-19 21:07:06 +01:00
|
|
|
|
<h3>Documents normatifs</h3>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
|
2004-02-19 21:07:06 +01:00
|
|
|
|
<li> le <a href="http://www.w3.org/"><strong>site Web du W3C</strong></a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li> la <strong>sp<73>cification de HTML 4.01</strong>, la version actuelle du HTML
|
2003-05-15 12:41:40 +02:00
|
|
|
|
: en <a href="http://www.w3.org/TR/html4/">anglais</a> (seule
|
|
|
|
|
|
version normative), ou la <a
|
|
|
|
|
|
href="http://www.la-grange.net/w3c/html4.01/cover.html">traduction
|
|
|
|
|
|
fran<EFBFBD>aise</a></li>
|
|
|
|
|
|
|
2004-02-19 21:07:06 +01:00
|
|
|
|
<li> la <strong>sp<73>cification de CSS<53>2.1</strong>, le langage des feuilles de
|
2003-10-09 16:03:54 +02:00
|
|
|
|
style : en <a href="http://www.w3.org/TR/CSS21/">anglais</a>
|
2004-02-19 21:07:06 +01:00
|
|
|
|
(seule version existante), ou la <a
|
|
|
|
|
|
href="http://www.yoyodesign.org/doc/w3c/css2/cover.html">traduction fran<61>aise</a>.</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li> les <strong>directives pour l'accessibilit<69> des donn<6E>es sur le
|
|
|
|
|
|
Web</strong><3E>: comment faire des sites accessibles aux handicap<61>s<EFBFBD>; 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<61>ais</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li> le <a href="http://www.unicode.org/"><strong>Standard
|
|
|
|
|
|
Unicode</strong></a>, dont le but est de repr<70>senter tous les langages
|
|
|
|
|
|
de la Terre, de l'anglais aux kanjis en passant par le devanagari, le
|
|
|
|
|
|
vi<EFBFBD>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>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
|
|
|
|
|
</ul>
|
2004-02-19 21:07:06 +01:00
|
|
|
|
|
|
|
|
|
|
<h3>Aller plus loin</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
|
|
|
|
|
|
<li> l'<a href="http://openweb.eu.org/">OpenWeb Group</a>, un groupe
|
|
|
|
|
|
de professionnels attach<63>s aux standards du Web<65>: articles de fond,
|
|
|
|
|
|
tutoriels et <20>tudes de cas.</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li> <a href="http://www.csszengarden.com/">CSS Zen Garden</a><3E>: une
|
|
|
|
|
|
d<EFBFBD>monstration magistrale de la puissance et de l'int<6E>r<EFBFBD>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><3E>: site qui r<>pertorie les bugs dans l'impl<70>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><3E>:
|
|
|
|
|
|
les derni<6E>res nouveaut<75>s concernant les diff<66>rents navigateurs, et
|
|
|
|
|
|
d'int<6E>ressantes ressources, en particulier un tableau des <a
|
|
|
|
|
|
href="http://www.upsdell.com/BrowserNews/res_fontsamp.htm">principales
|
|
|
|
|
|
fontes disponibles</a> pour Windows, Mac<61>OS et Unix/Linux.</li>
|
|
|
|
|
|
|
2003-05-15 12:41:40 +02:00
|
|
|
|
</ul>
|
|
|
|
|
|
|
2003-06-17 01:46:32 +02:00
|
|
|
|
<div class="metainformation">Auteur : Marie-Lan Nguyen.
|
2004-02-19 21:07:06 +01:00
|
|
|
|
Derni<EFBFBD>re modification le <date value="$Date: 2004-02-19 20:07:06 $"/>
|
2003-06-17 01:46:32 +02:00
|
|
|
|
</div>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
|
2004-02-19 21:07:06 +01:00
|
|
|
|
<!-- LocalWords: Get
|
2003-05-15 12:41:40 +02:00
|
|
|
|
-->
|
