Remaniement du général concernant HTML et CSS, fond/forme, interopérabilité/accessibilité.
Ajout de liens : specs du W3C, outils (validateurs), aller plus loin.
This commit is contained in:
mlnguyen
parent
c768c53880
commit
2d1d22ea12
1 changed files with 156 additions and 120 deletions
|
|
@ -11,132 +11,129 @@
|
|||
|
||||
<h1>Écrire une page Web</h1>
|
||||
|
||||
<p>Vous trouverez ici une introduction aux différents langages servant
|
||||
à écrire une page Web : le HTML, bien sûr, mais aussi les CSS
|
||||
(feuilles de style).
|
||||
<p>
|
||||
Vous trouverez ici une introduction aux différents langages servant à
|
||||
é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>).
|
||||
</p>
|
||||
|
||||
<p>Si vous êtes pressé, vous pouvez aller directement lire notre <a
|
||||
href="bases.html">Tutorial HTML</a>. Pour des questions plus avancées,
|
||||
vous pouvez poser vos questions sur forum, dans le groupe
|
||||
<code>informatique.html</code>. Pour savoir comment lire forum,
|
||||
cf. nos pages <a href="&url.tuteurs;internet/forum/">Forum</a>.
|
||||
<p>
|
||||
Si vous êtes pressé, vous pouvez aller directement lire notre <a
|
||||
href="bases.html">Tutoriel HTML</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>Les bases : le HTML</h2>
|
||||
<h2>Au commencement était le HTML</h2>
|
||||
|
||||
<p>
|
||||
Le HTML (<i lang="en">HyperText Mark-up Language</i>) est le langage
|
||||
des pages Web. Il a été créé en 1992, et son développement a été pris
|
||||
en charge par le <a href="http://www.w3.org/">W3C</a> (World Wide Web
|
||||
Consortium). À l'heure actuelle, nous en sommes à <a
|
||||
des pages Web. Il a été créé 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). À l'heure actuelle, nous en sommes à <a
|
||||
href="http://www.w3.org/TR/REC-html40/">HTML 4.01</a> qui remonte à
|
||||
fin 1999.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
La structure de base du HTML, ce sont les balises (<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 :
|
||||
La structure de base du HTML, 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">
|
||||
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>
|
||||
<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 renforcé. La plupart des navigateurs rendent ceci en mettant
|
||||
le(s) mot(s) en gras. La balise <em> (pour <em
|
||||
lang="en">emphasize</em>) indique que l'élément doit être mis en
|
||||
valeur, ce qui est généralement traduit par des italiques.</p>
|
||||
|
||||
<p>
|
||||
Le HTML peut être directement écrit avec un simple éditeur de texte
|
||||
(solution de loin préférable) ou avec des éditeurs compliqués WYSIWYG
|
||||
(<em lang="en">What You See Is What You Get</em>). C'est un langage
|
||||
facile à apprendre, à la portée du premier venu. Évidemment, plus vous
|
||||
voulez faire des choses tape-à-l'œil, plus c'est compliqué.
|
||||
</p>
|
||||
|
||||
<h2>Fond vs. forme : les feuilles de style</h2>
|
||||
|
||||
<h3>Principes</h3>
|
||||
|
||||
<p>
|
||||
Le principe de base du HTML est qu'il se préoccupe davantage du
|
||||
<em>contenu</em> que du <em>rendu visuel</em>. Si vous avez fait un
|
||||
peu de LaTeX, cette manière de travailler devrait vous être
|
||||
familière. Les « styles » de MS 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
|
||||
normalement dévolu aux <a href="http://www.w3.org/Style/CSS/">feuilles
|
||||
de style</a>.
|
||||
ê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>
|
||||
Rappelez-vous bien que, de toute façon, les différents navigateurs (MS
|
||||
Internet Explorer, Netscape, Mozilla, Opera, lynx...) affichent de
|
||||
manière <em>différente</em> une même page : chacun a sa propre
|
||||
interprétation des normes, et ce qui marche chez l'un peut ne pas
|
||||
marcher chez l'autre. Vérifiez donc que votre site marche bien avec
|
||||
plusieurs navigateurs. Rappelez-vous aussi que beaucoup de gens
|
||||
naviguent encore sur le Web avec des machines plus très jeunes et des
|
||||
connexions modem 56k (au bureau, par exemple). Si vous mettez des
|
||||
choses sur le Web, c'est pour être lu, alors pensez à vos lecteurs qui
|
||||
ne veulent pas se taper trois plombes d'intro Flash ou trois tonnes
|
||||
d'applets Java.
|
||||
Vous pouvez écrire du HTML 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. C'est ce qu'on appelle l'<dfn>interopérabilité</dfn> :
|
||||
on doit pouvoir lire votre page dans des conditions correctes
|
||||
indépendamment de son matériel et de ses logiciels.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Enfin, selon l'art. 2-3 de la charte d'utilisation des moyens
|
||||
informatiques de l'ENS (que vous avez signée en obtenant votre compte
|
||||
sur clipper) :
|
||||
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>
|
||||
|
||||
<blockquote>
|
||||
<p>
|
||||
L'utilisation des moyens informatiques est limitée à des activités de
|
||||
recherche et d'enseignement, de développements techniques, de
|
||||
transferts de technologies, de diffusion d'informations scientifiques,
|
||||
techniques et culturelles, d'expérimentation de nouveaux services
|
||||
présentant un caractère d'innovation technique, mais également toute
|
||||
activité administrative ou de gestion découlant ou accompagnant ces
|
||||
activités.
|
||||
</p>
|
||||
</blockquote>
|
||||
<h3>Le fond : le HTML</h3>
|
||||
|
||||
<p>
|
||||
En théorie, votre page Web doit contenir votre mémoire de maîtrise,
|
||||
votre rapport de stage long, ce genre de choses. C'est seulement par
|
||||
tolérance que vous pouvez aussi y mettre vos photos de vacances. Vous
|
||||
n'êtes pas censés mettre des animations JavaScript, du Flash et des
|
||||
mp3 en boucle partout !
|
||||
Le principe de base du HTML est qu'il se préoccupe du <em>contenu</em>
|
||||
et non du <em>rendu visuel</em>. Si vous avez fait un peu de LaTeX,
|
||||
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>CSS</h3>
|
||||
<h3>La forme : les feuilles de style</h3>
|
||||
|
||||
<p>CSS (<i lang="en">Cascading Style Sheets</i>) est le langage des
|
||||
feuilles de style. Ciel, un autre langage à apprendre ! Rassurez-vous,
|
||||
CSS est complémentaire du HTML. CSS1 est apparu en 1996. CSS2, qui
|
||||
prend le relais, est lui apparu en 1998. À l'heure actuelle, c'est
|
||||
CSS2.1 (septembre 2003) qui fait autorité.
|
||||
<p>
|
||||
CSS est le langage des feuilles de style. Ciel, un autre langage à
|
||||
apprendre ! Rassurez-vous, CSS est complémentaire du HTML. 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 feuilles de style sont une manière simple de prendre en charge
|
||||
le côté esthétique d'une page Web. Tandis que le HTML 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). Elle vous permet aussi
|
||||
de changer l'esthétique de votre page sans modifier toute la page
|
||||
Web.
|
||||
<p>
|
||||
Les feuilles de style sont une manière simple de prendre en charge le
|
||||
côté esthétique d'une page Web. Tandis que le HTML 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>
|
||||
|
|
@ -146,11 +143,11 @@ et vous pouvez les m
|
|||
conseillons de :</p>
|
||||
|
||||
<ul>
|
||||
<li> <strong>lire le <a href="bases.html">tutorial</a> des
|
||||
tuteurs</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="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é, 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>regarder le code source d'autres pages</strong>, en
|
||||
commençant par des pages simples. Avec Mozilla, vous avez accès au
|
||||
|
|
@ -165,50 +162,89 @@ meilleurs moyen pour d
|
|||
|
||||
</ul>
|
||||
|
||||
<h2>Liens</h2>
|
||||
<h2>Ressources sur le Web</h2>
|
||||
|
||||
<h3>Documents normatifs</h3>
|
||||
|
||||
<ul>
|
||||
|
||||
<li> le <a href="http://www.w3.org/">site Web du W3C</a> sur lequel
|
||||
plus précisément vous trouverez :
|
||||
<ul>
|
||||
<li> le <a href="http://www.w3.org/"><strong>site Web du W3C</strong></a></li>
|
||||
|
||||
<li> la spécification de HTML 4.01, la version actuelle du HTML
|
||||
<li> la <strong>spécification de HTML 4.01</strong>, la version actuelle du HTML
|
||||
: 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çaise</a></li>
|
||||
|
||||
<li> un <a href="http://validator.w3.org/">validateur HTML</a>,
|
||||
<strong>indispensable</strong> pour vérifier la correction de votre
|
||||
code</li>
|
||||
|
||||
<li> la spécification de CSS2.1, le langage des feuilles de
|
||||
<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).</li>
|
||||
(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>
|
||||
|
||||
<li> un <a
|
||||
href="http://jigsaw.w3.org/css-validator/validator-uri.html">validateur
|
||||
CSS</a></li>
|
||||
<li> un <a href="http://validator.w3.org/checklink">vérificateur de liens</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li> la <a
|
||||
href="http://www.eleves.ens.fr:8080/home/madore/computers/unicode/htmlent.html">liste
|
||||
des entités HTML</a> chez David Madore, les entités sont des
|
||||
caractères spéciaux prédéfinis (pour taper le symbole € par
|
||||
exemple)</li>
|
||||
<li> la <a href="http://www.unicode.org/">page Web du Standard
|
||||
Unicode</a>, dont le but est de représenter tous les langages de la
|
||||
Terre, de l'anglais au japonais en passant par les hiéroglyphes</li>
|
||||
|
||||
<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>
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="metainformation">Auteur : Marie-Lan Nguyen.
|
||||
Dernière modification le <date value="$Date: 2003-10-09 14:03:54 $"/>
|
||||
Dernière modification le <date value="$Date: 2004-02-19 20:07:06 $"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!-- LocalWords: title strong em emphasize Cascading Sheets
|
||||
<!-- LocalWords: Get
|
||||
-->
|
||||
|
|
|
|||
Loading…
Reference in a new issue