Bap: passage au XHTML
This commit is contained in:
meles
parent
5055347c81
commit
312e218332
2 changed files with 579 additions and 354 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -4,7 +4,7 @@
|
||||||
"tuteurs://DTD/tml.dtd">
|
"tuteurs://DTD/tml.dtd">
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>HTML</title>
|
<title>XHTML</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -13,34 +13,35 @@
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Vous trouverez ici une introduction aux différents langages servant à
|
Vous trouverez ici une introduction aux différents langages servant à
|
||||||
écrire une page Web : le <abbr title="HyperText Mark-Up
|
écrire une page Web : le <abbr title="eXtended HyperText Mark-Up
|
||||||
Language">HTML</abbr>, bien sûr, mais aussi les feuilles de style
|
Language">XHTML</abbr>, bien sûr, mais aussi les feuilles de style
|
||||||
(<abbr title="Cascading Style Sheets">CSS</abbr>).
|
(<abbr title="Cascading Style Sheets">CSS</abbr>).
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Si vous êtes pressé, vous pouvez aller directement lire notre <a
|
Si vous êtes pressé, vous pouvez aller directement lire notre <a
|
||||||
href="bases.html">Tutoriel HTML</a>. Pour des questions plus avancées,
|
href="bases.html">Tutoriel XHTML</a>. Pour des questions plus avancées,
|
||||||
vous pouvez poser vos questions sur <a
|
vous pouvez poser vos questions sur <a
|
||||||
href="&url.tuteurs;internet/forum/">Forum</a>, dans le groupe
|
href="&url.tuteurs;internet/forum/">Forum</a>, dans le groupe
|
||||||
<code>informatique.html</code>.
|
<code>informatique.html</code>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2>Au commencement était le HTML</h2>
|
<h2>Au commencement était le XHTML</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Le HTML (<i lang="en">HyperText Mark-up Language</i>) est le langage
|
Le XHTML (<i lang="en">eXtended HyperText Mark-up Language</i>) est le
|
||||||
des pages Web. Il a été créé en 1992, et son développement actuel est
|
langage des pages Web. Il succède au HTML, créé en 1992, et est conforme
|
||||||
l'œuvre du <a href="http://www.w3.org/"><abbr title="World Wide
|
aux normes du XML (<i lang="en">eXtensible Mark-up Language</i>). Son
|
||||||
Web Consortium">W3C</abbr></a>, un consortium regroupant les
|
développement actuel est l'œuvre du <a
|
||||||
principaux acteurs du Web (Microsoft, AOL, Opera, IBM, Apple ou encore
|
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
|
MacroMedia). À l'heure actuelle, nous en sommes à <a
|
||||||
href="http://www.w3.org/TR/REC-html40/">HTML 4.01</a> qui remonte à
|
href="http://www.w3.org/TR/xhtml1/">XHTML 1.0</a>.
|
||||||
fin 1999.
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
La structure de base du HTML, ce sont les <strong>balises</strong>
|
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
|
(<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 page Web qu'ils entourent. Voici un exemple de balise :
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -65,12 +66,12 @@ valeur</em>, ce qui est g
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Vous pouvez écrire du HTML avec un simple éditeur de texte comme <a
|
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
|
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
|
é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
|
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 à
|
Composer, l'éditeur Web de Mozilla. C'est un langage facile à apprendre,
|
||||||
apprendre, qui ne nécessite aucune connaissance préalable en
|
qui ne nécessite aucune connaissance préalable en
|
||||||
programmation. Évidemment, plus vous voulez faire des choses
|
programmation. Évidemment, plus vous voulez faire des choses
|
||||||
tape-à-l'œil, plus c'est compliqué.
|
tape-à-l'œil, plus c'est compliqué.
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -115,34 +116,32 @@ un autre ordinateur, un autre traitement de texte ou un autre r
|
||||||
</p>
|
</p>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
|
|
||||||
<h3>Le fond : le HTML</h3>
|
<h3>Le fond : le XHTML</h3>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Le principe de base du HTML est qu'il se préoccupe du <em>contenu</em>
|
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
|
et non du <em>rendu visuel</em>. Si vous avez fait un peu de <a
|
||||||
href="&url.tuteurs;logiciels/latex/">LaTeX</a>,
|
href="&url.tuteurs;logiciels/latex/">LaTeX</a>, cette manière de
|
||||||
cette manière de travailler devrait vous être familière. Les
|
travailler devrait vous être familière. Les « styles » de Word s'en
|
||||||
« styles » de Word s'en approchent également. Vous définissez des
|
approchent également. Vous définissez des titres, des éléments
|
||||||
titres, des éléments importants, des citations, des liens. Tout le
|
importants, des citations, des liens. Tout le côté décoratif (savoir si
|
||||||
côté décoratif (savoir si la police de caractères fera telle ou telle
|
la police de caractères fera telle ou telle taille, si votre texte sera
|
||||||
taille, si votre texte sera en rouge ou bleu, etc.) est dévolu aux
|
en rouge ou bleu, etc.) est dévolu aux feuilles de style.
|
||||||
feuilles de style.
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h3>La forme : les feuilles de style</h3>
|
<h3>La forme : les feuilles de style</h3>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
CSS est le langage des feuilles de style. Ciel, un autre langage à
|
CSS est le langage des feuilles de style. Ciel, un autre langage à
|
||||||
apprendre ! Rassurez-vous, CSS est complémentaire du HTML. CSS1 est
|
apprendre ! Rassurez-vous, CSS est complémentaire du XHTML. CSS1 est
|
||||||
apparu en 1996. CSS2, qui prend le relais, est lui apparu en 1998. À
|
apparu en 1996. CSS2, qui prend le relais, est lui apparu en 1998. À
|
||||||
l'heure actuelle, c'est <a
|
l'heure actuelle, c'est <a href="http://www.w3.org/TR/CSS21/">CSS2.1</a>
|
||||||
href="http://www.w3.org/TR/CSS21/">CSS2.1</a> (septembre 2003) qui
|
(septembre 2003) qui fait autorité.
|
||||||
fait autorité.
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Les <dfn>feuilles de style</dfn> sont une manière simple de prendre en
|
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 HTML ne
|
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
|
s'occupe que de la structure syntaxique de la page, CSS ajoute à votre
|
||||||
gré couleurs, fontes exotiques, effets de texte. Cette dissociation
|
gré couleurs, fontes exotiques, effets de texte. Cette dissociation
|
||||||
des rôles permet de ne pas pénaliser les vieux navigateurs, ou les
|
des rôles permet de ne pas pénaliser les vieux navigateurs, ou les
|
||||||
|
|
@ -163,7 +162,7 @@ conseillons de
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li> <strong>lire notre <a href="bases.html">tutoriel
|
<li> <strong>lire notre <a href="bases.html">tutoriel
|
||||||
HTML</a></strong>. Il vous permettra de faire des pages simples et
|
XHTML</a></strong>. Il vous permettra de faire des pages simples et
|
||||||
sobres. Même si vous voulez vous lancer dans quelque chose de
|
sobres. Même si vous voulez vous lancer dans quelque chose de
|
||||||
compliqué, ou si vous avez décidé d'utiliser un éditeur WYSIWYG,
|
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>
|
lisez-le. Mieux vaut savoir un minimum ce qu'on fait, non ?</li>
|
||||||
|
|
@ -178,10 +177,10 @@ code source en tapant <code>Ctrl-U</code>. C'est le plus souvent par
|
||||||
l'imitation d'autres pages qu'on apprend.</li>
|
l'imitation d'autres pages qu'on apprend.</li>
|
||||||
|
|
||||||
<li> <strong>lire les spécifications du W3C</strong>. À lire, celle du
|
<li> <strong>lire les spécifications du W3C</strong>. À lire, celle du
|
||||||
<a href="http://www.w3.org/TR/html4/">HTML 4.01</a>, puis celle de <a
|
<a href="http://www.w3.org/TR/xhtml1/">XHTML 1.0</a>, puis celle de
|
||||||
href="http://www.w3.org/TR/CSS21/">CSS2.1</a>. Elles sont bien plus
|
<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
|
lisibles qu'il n'y paraît, mais c'est vrai que ce n'est pas le meilleur
|
||||||
meilleurs moyen pour débuter.</li>
|
moyen pour débuter.</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
@ -189,7 +188,9 @@ meilleurs moyen pour d
|
||||||
Si vous n'avez pas le temps ou l'envie, essayez nos <a
|
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
|
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
|
HTML et des feuilles de style déjà toutes faites. Vous pouvez ainsi
|
||||||
avoir un joli site en 2 coups de cuiller à pot.
|
avoir un joli site en 2 coups de cuiller à pot. (Malheureusement, le
|
||||||
|
fichier-type est en HTML : nous ne l'avons pas encore converti en
|
||||||
|
XHTML, mais cela viendra.)
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2>Ressources sur le Web</h2>
|
<h2>Ressources sur le Web</h2>
|
||||||
|
|
@ -200,10 +201,10 @@ avoir un joli site en 2 coups de cuiller
|
||||||
|
|
||||||
<li> le <a href="http://www.w3.org/"><strong>site Web du W3C</strong></a></li>
|
<li> le <a href="http://www.w3.org/"><strong>site Web du W3C</strong></a></li>
|
||||||
|
|
||||||
<li> la <strong>spécification de HTML 4.01</strong>, la version actuelle du HTML
|
<li> la <strong>spécification de XHTML 1.0</strong>, la version actuelle
|
||||||
: en <a href="http://www.w3.org/TR/html4/">anglais</a> (seule
|
du XHTML : en <a href="http://www.w3.org/TR/xhtml1/">anglais</a>
|
||||||
version normative), ou la <a
|
(seule version normative), ou la <a
|
||||||
href="http://www.la-grange.net/w3c/html4.01/cover.html">traduction
|
href="http://www.la-grange.net/w3c/xhtml1/">traduction
|
||||||
française</a></li>
|
française</a></li>
|
||||||
|
|
||||||
<li> la <strong>spécification de CSS 2.1</strong>, le langage des feuilles de
|
<li> la <strong>spécification de CSS 2.1</strong>, le langage des feuilles de
|
||||||
|
|
@ -280,7 +281,7 @@ vous pataugez un peu avec les feuilles de style.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div class="metainformation">Auteur : Marie-Lan Nguyen.
|
<div class="metainformation">Auteur : Marie-Lan Nguyen.
|
||||||
Dernière modification le <date value="$Date: 2005-05-04 11:58:04 $"/>
|
Dernière modification le <date value="$Date: 2005-05-19 23:24:36 $"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue