2004-03-12 17:38:02 +01: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>Th<54>mes</title>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
<h1>Th<54>mes</h1>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2007-07-17 12:01:59 +02:00
|
|
|
|
Vous voulez faire une page Web, mais vous<75>n'avez pas le temps ou pas
|
2004-03-12 17:38:02 +01:00
|
|
|
|
envie de consacrer beaucoup de temps <20> l'apprentissage technique. Ou
|
|
|
|
|
|
alors, vous connaissez un peu de HTML mais vous n'avez pas envie de
|
|
|
|
|
|
chercher un joli design pour vos pages. Nos th<74>mes sont faits pour
|
|
|
|
|
|
vous! Les seules connaissances techniques pour utiliser les th<74>mes
|
2007-07-17 12:01:59 +02:00
|
|
|
|
sont<EFBFBD>:
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
|
|
|
|
|
|
<li> savoir utiliser un <a href="&url.tuteurs;unix/editeurs/"><3E>diteur
|
|
|
|
|
|
de texte</a>, de pr<70>f<EFBFBD>rence qui fasse de la colorisation
|
|
|
|
|
|
syntaxique. Si vous travaillez dans une salle info, nous vous
|
|
|
|
|
|
conseillons <a href="&url.tuteurs;unix/editeurs/">NEdit</a>, sinon, au
|
|
|
|
|
|
pire m<>me le Bloc-Notes de Windows suffit.</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li> savoir que le <abbr lang="en" title="HyperText Mark-up
|
|
|
|
|
|
Language">HTML</abbr> fonctionne avec des <em>balises</em>. Jetez un
|
|
|
|
|
|
bref coup d'œil <20> notre <a href="bases.html">tutoriel HTML</a>
|
|
|
|
|
|
si besoin est. Si vous avez fait un peu de LaTeX, vous n'aurez aucun
|
|
|
|
|
|
mal <20> comprendre comment <20>a marche.</li>
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
<h2>Pr<50>sentation</h2>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Ce que nous appelons un <dfn>th<74>me</dfn>, c'est un paquet comprenant 4
|
2007-07-17 12:01:59 +02:00
|
|
|
|
fichiers<EFBFBD>:
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
|
|
|
|
|
|
<li> 2 <strong>feuilles de style</strong> (en <abbr lang="en"
|
|
|
|
|
|
title="Cascading Style Sheet">CSS</abbr>) qui g<>rent le design de la
|
2007-07-17 12:01:59 +02:00
|
|
|
|
page<EFBFBD>: une feuille principale, et une sp<73>ciale pour Netscape<70>4, qui ne
|
2004-03-12 17:38:02 +01:00
|
|
|
|
g<EFBFBD>re pas bien les styles</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li> un <strong>fichier-type</strong> (en <abbr lang="en"
|
|
|
|
|
|
title="HyperText Mark-up Language">HTML</abbr>) qui g<>re le contenu de
|
|
|
|
|
|
la page (texte, structure, etc.)</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li> un <strong>fichier de configuration du serveur</strong>
|
|
|
|
|
|
(<code>.htaccess</code>), qui g<>re l'affichage par les vieux
|
2007-07-17 12:01:59 +02:00
|
|
|
|
navigateurs comme Netscape<70>4 ou Internet Explorer 4.</li> </ul>
|
2004-03-12 17:38:02 +01:00
|
|
|
|
|
|
|
|
|
|
<p>
|
2007-07-17 12:01:59 +02:00
|
|
|
|
Le tout est pr<70>t <20> l'emploi ou presque —<3B>il suffit de
|
2004-03-12 17:38:02 +01:00
|
|
|
|
t<EFBFBD>l<EFBFBD>charger les bons fichiers, de les mettre dans votre r<>pertoire
|
|
|
|
|
|
<code>www/</code> et d'ins<6E>rer vos propres informations dans le
|
|
|
|
|
|
fichier-type (<28>a, on ne peut pas le faire <20> votre place). Vous
|
2007-07-17 12:01:59 +02:00
|
|
|
|
obtiendrez ainsi une page jolie (on l'esp<73>re<72>!) et respectueuse des
|
2004-03-12 17:38:02 +01:00
|
|
|
|
standards (<a title="Sp<53>cifications de CSS2 [en]"
|
2007-07-17 12:01:59 +02:00
|
|
|
|
href="http://www.w3.org/TR/2004/CR-CSS21-20040225/">CSS<53>2.1</a> et <a
|
2004-03-12 17:38:02 +01:00
|
|
|
|
title="Sp<53>cifications de HTML4 [en]"
|
|
|
|
|
|
href="http://www.w3.org/TR/html4/">HTML 4.01</a>).
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h2>Mode d'emploi</h2>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>Choisir un th<74>me</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Pour l'instant vous pouvez choisir parmi trois th<74>mes, plus viendront
|
|
|
|
|
|
par la suite. Vous pouvez aussi nous envoyer vos propres th<74>mes. Les
|
|
|
|
|
|
captures d'<27>cran vous montrent <20> quoi ressemble chaque th<74>me avec
|
2007-07-17 12:01:59 +02:00
|
|
|
|
Mozilla<EFBFBD>1.6.
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<table class="tableau">
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<th>Nom du th<74>me</th><th>Couleurs</th><th>Capture d'<27>cran</th><th>T<>l<EFBFBD>charger le th<74>me</th>
|
|
|
|
|
|
</tr><tr>
|
|
|
|
|
|
<td>Iceberg</td><td>bleu, gris,
|
|
|
|
|
|
blanc</td><td><a href="iceberg.png"><code>iceberg.png</code></a></td><td><a href="iceberg.zip"><code>iceberg.zip</code></a></td>
|
|
|
|
|
|
</tr><tr>
|
|
|
|
|
|
<td>Oc<4F>an</td><td>bleu marine, vert</td><td><a
|
|
|
|
|
|
href="ocean.png"><code>ocean.png</code></a></td><td><a href="ocean.zip"><code>ocean.zip</code></a></td>
|
|
|
|
|
|
</tr><tr>
|
2007-07-17 12:01:59 +02:00
|
|
|
|
<td>Orange</td><td>orange<67>et bleu clair</td><td><a href="orange.png">orange.png</a></td><td><a href="orange.zip"><code>orange.zip</code></a></td>
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</tr>
|
|
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2007-07-17 12:01:59 +02:00
|
|
|
|
Les th<74>mes ont <20>t<EFBFBD> test<73>s avec Mozilla<6C>1.6, Firefox<6F>0.8 et Internet
|
|
|
|
|
|
Explorer<EFBFBD>6 —<3B>le th<74>me simple a bien s<>r <20>t<EFBFBD> test<73> avec
|
|
|
|
|
|
Netscape<EFBFBD>4. Nous esp<73>rons qu'ils marchent bien avec tous les
|
2004-03-12 17:38:02 +01:00
|
|
|
|
navigateurs, si ce n'<27>tait pas le cas, merci de nous pr<70>venir.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>D<>compacter le th<74>me</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="encadre">
|
2007-07-17 12:01:59 +02:00
|
|
|
|
<strong>Attention</strong><3E>: pour utiliser un th<74>me, vous devez d<>j<EFBFBD>
|
2004-03-12 17:38:02 +01:00
|
|
|
|
avoir un espace Web disponible. Si ce n'est d<>j<EFBFBD> fait, <a
|
|
|
|
|
|
href="&url.tuteurs;internet/web/creer.html">cr<63>ez votre page</a> sur le
|
|
|
|
|
|
serveur des <20>l<EFBFBD>ves de l'ENS.
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Le th<74>me se pr<70>sente sous la forme d'une archive au format zip. Il
|
|
|
|
|
|
faut la d<>compacter dans votre r<>pertoire <code>www/</code>. Sous
|
2007-07-17 12:01:59 +02:00
|
|
|
|
Unix, utilisez la commande <code>unzip</code><3E>:
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
<span class="prompt">brick ~/www $</span> unzip orange.zip
|
|
|
|
|
|
Archive: orange.zip
|
|
|
|
|
|
inflating: simple.css
|
|
|
|
|
|
inflating: modele.html
|
|
|
|
|
|
inflating: .htaccess
|
|
|
|
|
|
inflating: orange.css
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Sous Windows, utilisez par exemple WinZip ou Power Archiver, et sous
|
2007-07-17 12:01:59 +02:00
|
|
|
|
Mac<EFBFBD>OS, MacZip.
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>Personnalisations obligatoires</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Maintenant, il faut personnaliser les fichiers. Vous n'avez pas besoin
|
|
|
|
|
|
de toucher aux feuilles de style (les fichiers en <code>.css</code>),
|
|
|
|
|
|
mais il faut absolument modifier le fichier-type
|
|
|
|
|
|
(<code>modele.html</code>) et le fichier de configuration
|
|
|
|
|
|
(<code>.htaccess</code>).
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h4>Modifier le fichier <code>.htaccess</code></h4>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
<EFBFBD>ditez le fichier, par exemple en utilisant <a
|
2007-07-17 12:01:59 +02:00
|
|
|
|
href="&url.tuteurs;unix/editeurs/">NEdit</a><3E>:
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
<span class="prompt">brick ~/www $</span> nedit .htaccess
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
|
|
<p class="continue">
|
|
|
|
|
|
Modifiez ensuite les lignes suivantes suivant les instructions dans le
|
2007-07-17 12:01:59 +02:00
|
|
|
|
fichier<EFBFBD>:
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
# Remplacez ici 'monlogin' par votre propre login
|
|
|
|
|
|
RewriteBase /home/monlogin/
|
|
|
|
|
|
(...)
|
|
|
|
|
|
# Remplacez ici 'mafeuille.css' par la feuille que vous avez choisie
|
|
|
|
|
|
RewriteRule mafeuille.css simple.css
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="attention">
|
2007-07-17 12:01:59 +02:00
|
|
|
|
<strong>A l'aide<64>!</strong> Quand vous essayez de visualiser votre
|
|
|
|
|
|
page, vous voyez une erreur du serveur, genre <20><>Internal Server
|
|
|
|
|
|
Error<EFBFBD><EFBFBD>. C'est d<> <20> une erreur dans le
|
2004-03-12 17:38:02 +01:00
|
|
|
|
<code>.htaccess</code>. Relisez les fichiers pour voir si vous ne vous
|
|
|
|
|
|
<EFBFBD>tes pas tromp<6D>, sinon renommez le fichier (<code>mv .htaccess
|
|
|
|
|
|
.htaccess.orig</code>) et contactez-nous.
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<h4>Modifier le fichier-type</h4>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
D'abord, commen<65>ons par renommer le fichier. La page d'accueil
|
|
|
|
|
|
s'appelle obligatoirement <code>index.html</code>. Pour les autres
|
|
|
|
|
|
pages, vous pouvez choisir le nom que vous voulez, du moment qu'il n'y
|
2007-07-17 12:01:59 +02:00
|
|
|
|
a pas d'espaces et que le nom soit <20>vocateur du contenu<6E>: si vous
|
2004-03-12 17:38:02 +01:00
|
|
|
|
mettez votre
|
|
|
|
|
|
<acronym title="Travaux d'Initiative Personnelle Encadr<64>s">TIPE</acronym>
|
|
|
|
|
|
en ligne, appelez-le <code>tipe.html</code>, par exemple. Sous Unix,
|
2007-07-17 12:01:59 +02:00
|
|
|
|
on utilise la commande <code>mv</code> pour renommer un fichier<65>:
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
<span class="prompt">brick ~/www $</span> mv modele.html index.html
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2007-07-17 12:01:59 +02:00
|
|
|
|
Le fichier-type a en gros deux parties<65>:
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<ul>
|
2007-07-17 12:01:59 +02:00
|
|
|
|
<li> la <strong>navigation</strong><3E>: d<>s que vous avez 3 ou 4 pages
|
2004-03-12 17:38:02 +01:00
|
|
|
|
distinctes, il faut une navigation simple pour permettre au visiteur
|
2007-07-17 12:01:59 +02:00
|
|
|
|
de circuler facilement entre les diff<66>rentes pages<65>;</li>
|
|
|
|
|
|
<li> le <strong>corps de la page</strong><3E>: c'est le contenu de la
|
2004-03-12 17:38:02 +01:00
|
|
|
|
page <20> proprement parler.</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2007-07-17 12:01:59 +02:00
|
|
|
|
La partie <20><>navigation<6F><6E> rev<65>t la forme d'une liste avec des liens
|
2004-03-12 17:38:02 +01:00
|
|
|
|
vers les fichiers concern<72>s. Dans le fichier-type, <20>a ressemble a
|
2007-07-17 12:01:59 +02:00
|
|
|
|
ceci<EFBFBD>:
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
<!-- Barre de navigation -->
|
|
|
|
|
|
|
|
|
|
|
|
<div id="nav">
|
|
|
|
|
|
<ul>
|
2004-05-17 21:35:59 +02:00
|
|
|
|
<li> <a href="<em>accueil</em>.html" class="actif"><strong>accueil</strong></a></li>
|
|
|
|
|
|
<li> <a href="<em>alpha</em>.html"><strong>alpha</strong></a></li>
|
|
|
|
|
|
<li> <a href="<em>beta</em>.html"><strong>b<>ta</strong></a></li>
|
|
|
|
|
|
<li> <a href="<em>gamma</em>.html"><strong>gamma</strong></a></li>
|
|
|
|
|
|
<li> <a href="<em>delta</em>.html"><strong>delta</strong></a></li>
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Fin barre de navigation -->
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
|
|
<p class="continue">
|
|
|
|
|
|
Ici, nous indiquons <em>comme ceci</em> les noms de fichiers <20>
|
2004-05-17 21:35:59 +02:00
|
|
|
|
modifier, et <strong>comme cela</strong> les titres de vos
|
|
|
|
|
|
pages. Remplacez les alpha, b<>ta, etc., par le nom de vos fichiers et
|
|
|
|
|
|
le titre de vos pages. Pour supprimer un item de la liste, effacez une
|
|
|
|
|
|
ligne commen<65>ant par <code><li></code>. Si vous n'avez qu'une
|
|
|
|
|
|
seule page en tout et pour tout, vous pouvez effacez tout simplement
|
2007-07-17 12:01:59 +02:00
|
|
|
|
le bloc <20><>barre de navigation<6F><6E>. Pour le r<>cup<75>rer par la suite, il
|
2004-05-17 21:35:59 +02:00
|
|
|
|
vous suffira de copier-coller l'exemple ci-dessus.
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Pour la partie du corps du texte, le mod<6F>le vous montre comment faire
|
|
|
|
|
|
des paragraphes ou des titres. Vous pouvez effacer tout <20>a et le
|
|
|
|
|
|
remplacer par votre propre texte. Pour savoir comment mettre en forme
|
|
|
|
|
|
votre texte, parcourez notre <a href="bases.html">tutoriel HTML</a>.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>Valider votre fichier</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Pour <20>tre s<>r que vous n'avez pas oubli<6C> quelque chose dans votre code
|
|
|
|
|
|
HTML, passez la version finale de votre page au <a
|
|
|
|
|
|
href="http://validator.w3.org/">validateur du W3C</a>. Il vous dira si
|
|
|
|
|
|
tout est en ordre ou s'il faut encore jeter un petit coup d'œil
|
|
|
|
|
|
au code.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
2007-07-17 12:01:59 +02:00
|
|
|
|
<div class="metainformation">Auteur<75>: Marie-Lan Nguyen.
|
|
|
|
|
|
Derni<EFBFBD>re modification<6F>: le <date value="$Date: 2007-07-17 10:02:41 $" />.
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
<!-- LocalWords: inflating
|
|
|
|
|
|
-->
|
