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>
|
|
|
|
|
|
|
|
|
|
|
|
<p>Vous trouverez ici une introduction aux diff<66>rents langages servant
|
|
|
|
|
|
<EFBFBD> <20>crire une page Web : le HTML, bien s<>r, mais aussi les CSS
|
|
|
|
|
|
(feuilles de style).
|
|
|
|
|
|
</p>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
|
|
|
|
|
<p>Si vous <20>tes press<73>, vous pouvez aller directement lire notre <a
|
|
|
|
|
|
href="bases.html">Tutorial HTML</a>. Pour des questions plus avanc<6E>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>
|
|
|
|
|
|
|
2003-05-22 19:59:41 +02:00
|
|
|
|
<h2>Les bases : le HTML</h2>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Le HTML (<em>HyperText Mark-up Language</em>) est le langage des pages
|
|
|
|
|
|
Web. Il a <20>t<EFBFBD> cr<63><72> en 1992, et son d<>veloppement a <20>t<EFBFBD> pris en charge
|
2003-06-17 01:46:32 +02:00
|
|
|
|
par le <a href="http://www.w3.org/">W3C</a> (World Wide Web
|
2003-05-15 12:41:40 +02:00
|
|
|
|
Consortium). <20> l'heure actuelle, nous en sommes <20> <a
|
|
|
|
|
|
href="http://www.w3.org/TR/REC-html40/">HTML 4.01</a> qui remonte <20>
|
|
|
|
|
|
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 <20>l<EFBFBD>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<66>renci<63>e
|
|
|
|
|
|
par un / (</title>). Autre exemple :</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre><strong>Important</strong> : votre tiers provisionnel est d<> pour le <dm>15 mai</em>.</pre>
|
|
|
|
|
|
|
|
|
|
|
|
<p class="continue">
|
|
|
|
|
|
La balise <strong> indique que l'<27>l<EFBFBD>ment qu'elle renferme doit
|
|
|
|
|
|
<EFBFBD>tre renforc<72>. 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'<27>l<EFBFBD>ment doit <20>tre mis en
|
|
|
|
|
|
valeur, ce qui est g<>n<EFBFBD>ralement traduit par des italiques.</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Le HTML peut <20>tre directement <20>crit avec un simple <20>diteur de texte
|
|
|
|
|
|
(solution de loin pr<70>f<EFBFBD>rable) ou avec des <20>diteurs compliqu<71>s WYSIWYG
|
|
|
|
|
|
(<em lang="en">What You See Is What You Get</em>). C'est un langage
|
|
|
|
|
|
facile <20> apprendre, <20> la port<72>e du premier venu. <20>videmment, plus vous
|
|
|
|
|
|
voulez faire des choses tape-<2D>-l'œil, plus c'est compliqu<71>.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
2003-05-22 19:59:41 +02:00
|
|
|
|
<h2>Fond vs. forme : les feuilles de style</h2>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>Principes</h3>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Le principe de base du HTML est qu'il se pr<70>occupe davantage du
|
|
|
|
|
|
<em>contenu</em> que du <em>rendu visuel</em>. Si vous avez fait un
|
|
|
|
|
|
peu de LaTeX, cette mani<6E>re de travailler devrait vous <20>tre
|
|
|
|
|
|
famili<EFBFBD>re. Les <20><>styles<65><73> de MS Word s'en approchent <20>galement. Vous
|
|
|
|
|
|
d<EFBFBD>finissez des titres, des <20>l<EFBFBD>ments importants, des citations, des
|
|
|
|
|
|
liens. Tout le c<>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
|
|
|
|
|
|
normalement d<>volu aux <a href="http://www.w3.org/Style/CSS/">feuilles
|
|
|
|
|
|
de style</a>.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Rappelez-vous bien que, de toute fa<66>on, les diff<66>rents navigateurs (MS
|
|
|
|
|
|
Internet Explorer, Netscape, Mozilla, Opera, lynx...) affichent de
|
|
|
|
|
|
mani<EFBFBD>re <em>diff<66>rente</em> une m<>me page : chacun a sa propre
|
|
|
|
|
|
interpr<EFBFBD>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<74>s jeunes et des
|
|
|
|
|
|
connexions modem 56k (au bureau, par exemple). Si vous mettez des
|
|
|
|
|
|
choses sur le Web, c'est pour <20>tre lu, alors pensez <20> vos lecteurs qui
|
|
|
|
|
|
ne veulent pas se taper trois plombes d'intro Flash ou trois tonnes
|
|
|
|
|
|
d'applets Java.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Enfin, selon l'art. 2-3 de la charte d'utilisation des moyens
|
|
|
|
|
|
informatiques de l'ENS (que vous avez sign<67>e en obtenant votre compte
|
|
|
|
|
|
sur clipper)<29>:
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<blockquote>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
L'utilisation des moyens informatiques est limit<69>e <20> des activit<69>s de
|
|
|
|
|
|
recherche et d'enseignement, de d<>veloppements techniques, de
|
|
|
|
|
|
transferts de technologies, de diffusion d'informations scientifiques,
|
|
|
|
|
|
techniques et culturelles, d'exp<78>rimentation de nouveaux services
|
|
|
|
|
|
pr<EFBFBD>sentant un caract<63>re d'innovation technique, mais <20>galement toute
|
|
|
|
|
|
activit<EFBFBD> administrative ou de gestion d<>coulant ou accompagnant ces
|
|
|
|
|
|
activit<EFBFBD>s.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</blockquote>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
En th<74>orie, votre page Web doit contenir votre m<>moire de ma<6D>trise,
|
|
|
|
|
|
votre rapport de stage long, ce genre de choses. C'est seulement par
|
|
|
|
|
|
tol<EFBFBD>rance que vous pouvez aussi y mettre vos photos de vacances. Vous
|
|
|
|
|
|
n'<27>tes pas cens<6E>s mettre des animations JavaScript, du Flash et des
|
|
|
|
|
|
mp3 en boucle partout<75>!
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
2003-05-22 19:59:41 +02:00
|
|
|
|
<h3>CSS</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>CSS (<i lang="en">Cascading Style Sheets</i>) est le langage des
|
|
|
|
|
|
feuilles de style. Ciel, un autre langage <20> apprendre<72>! Rassurez-vous,
|
|
|
|
|
|
CSS est compl<70>mentaire du HTML. CSS1 est apparu en 1996. CSS2, qui
|
|
|
|
|
|
prend le relais, est lui apparu en 1998.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>Les feuilles de style sont une mani<6E>re simple de prendre en charge
|
|
|
|
|
|
le c<>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<EFBFBD>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<74>tique de votre page sans modifier toute la page
|
|
|
|
|
|
Web.
|
|
|
|
|
|
</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>
|
|
|
|
|
|
<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<EFBFBD>, ou si vous avez d<>cid<69> d'utiliser un <20>diteur WYSIWYG,
|
|
|
|
|
|
lisez-le. Mieux vaut savoir un minimum ce qu'on fait, non<6F>?</li>
|
|
|
|
|
|
|
|
|
|
|
|
<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
|
|
|
|
|
|
href="http://www.w3.org/TR/REC-CSS2/">CSS2</a>. Elles sont bien plus
|
|
|
|
|
|
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>
|
|
|
|
|
|
|
|
|
|
|
|
<h2>Liens</h2>
|
|
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
|
|
|
|
|
|
<li> le <a href="http://www.w3.org/">site Web du W3C</a> sur lequel
|
|
|
|
|
|
plus pr<70>cis<69>ment vous trouverez<65>:
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
|
|
|
|
|
|
<li> la sp<73>cification de HTML 4.01, 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<EFBFBD>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<73>cification de CSS2, le langage des feuilles de style :
|
|
|
|
|
|
en <a href="http://www.w3.org/TR/REC-CSS2/">anglais</a> (seule version
|
|
|
|
|
|
normative) ou <a
|
|
|
|
|
|
href="http://www.yoyodesign.org/doc/w3c/css2/cover.html">traduction
|
|
|
|
|
|
fran<EFBFBD>aise</a>.</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<69>s HTML</a> chez David Madore, les entit<69>s sont des
|
|
|
|
|
|
caract<EFBFBD>res sp<73>ciaux pr<70>d<EFBFBD>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<70>senter tous les langages de la
|
|
|
|
|
|
Terre, de l'anglais au japonais en passant par les hi<68>roglyphes</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
2003-06-17 01:46:32 +02:00
|
|
|
|
<div class="metainformation">Auteur : Marie-Lan Nguyen.
|
|
|
|
|
|
Deni<EFBFBD>re modification le <date value="$Date: 2003-06-16 23:46:37 $"/>
|
|
|
|
|
|
</div>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- LocalWords: title strong em emphasize
|
|
|
|
|
|
-->
|
