214 lines
7.9 KiB
XML
214 lines
7.9 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>HTML</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 HTML, bien sûr, mais aussi les CSS
|
||
(feuilles de style).
|
||
</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>
|
||
|
||
<h2>Les bases : 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
|
||
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 :
|
||
</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>
|
||
|
||
<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>.
|
||
</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.
|
||
</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) :
|
||
</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>
|
||
|
||
<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 !
|
||
</p>
|
||
|
||
<h3>CSS</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>
|
||
|
||
<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>
|
||
|
||
<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 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>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/html4/">HTML 4.01</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
|
||
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écisément vous trouverez :
|
||
<ul>
|
||
|
||
<li> la spé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ç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
|
||
style : en <a href="http://www.w3.org/TR/CSS21/">anglais</a>
|
||
(seule version existante).</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>
|
||
</ul>
|
||
|
||
<div class="metainformation">Auteur : Marie-Lan Nguyen.
|
||
Dernière modification le <date value="$Date: 2003-10-09 14:03:54 $"/>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|
||
|
||
<!-- LocalWords: title strong em emphasize Cascading Sheets
|
||
-->
|