2009-09-20 12:34:28 +02:00
|
|
|
|
<?xml version="1.0" encoding="UTF-8"?>
|
2004-03-12 17:38:02 +01:00
|
|
|
|
<!DOCTYPE html
|
|
|
|
|
|
PUBLIC "-//ENS/Tuteurs//DTD TML 1//EN"
|
|
|
|
|
|
"tuteurs://DTD/tml.dtd">
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<title>Thèmes</title>
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<h1>Thèmes</h1>
|
2004-03-12 17:38:02 +01:00
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Vous voulez faire une page Web, mais vous n'avez pas le temps ou pas
|
|
|
|
|
|
envie de consacrer beaucoup de temps à l'apprentissage technique. Ou
|
2004-03-12 17:38:02 +01:00
|
|
|
|
alors, vous connaissez un peu de HTML mais vous n'avez pas envie de
|
2009-09-20 12:27:14 +02:00
|
|
|
|
chercher un joli design pour vos pages. Nos thèmes sont faits pour
|
|
|
|
|
|
vous! Les seules connaissances techniques pour utiliser les thèmes
|
|
|
|
|
|
sont :
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<li> savoir utiliser un <a href="&url.tuteurs;unix/editeurs/">éditeur
|
|
|
|
|
|
de texte</a>, de préférence qui fasse de la colorisation
|
2004-03-12 17:38:02 +01:00
|
|
|
|
syntaxique. Si vous travaillez dans une salle info, nous vous
|
|
|
|
|
|
conseillons <a href="&url.tuteurs;unix/editeurs/">NEdit</a>, sinon, au
|
2009-09-20 12:27:14 +02:00
|
|
|
|
pire même le Bloc-Notes de Windows suffit.</li>
|
2004-03-12 17:38:02 +01:00
|
|
|
|
|
|
|
|
|
|
<li> savoir que le <abbr lang="en" title="HyperText Mark-up
|
|
|
|
|
|
Language">HTML</abbr> fonctionne avec des <em>balises</em>. Jetez un
|
2009-09-20 12:27:14 +02:00
|
|
|
|
bref coup d'œil à notre <a href="bases.html">tutoriel HTML</a>
|
2004-03-12 17:38:02 +01:00
|
|
|
|
si besoin est. Si vous avez fait un peu de LaTeX, vous n'aurez aucun
|
2009-09-20 12:27:14 +02:00
|
|
|
|
mal à comprendre comment ça marche.</li>
|
2004-03-12 17:38:02 +01:00
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<h2>Présentation</h2>
|
2004-03-12 17:38:02 +01:00
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Ce que nous appelons un <dfn>thème</dfn>, c'est un paquet comprenant 4
|
|
|
|
|
|
fichiers :
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
|
|
|
|
|
|
<li> 2 <strong>feuilles de style</strong> (en <abbr lang="en"
|
2009-09-20 12:27:14 +02:00
|
|
|
|
title="Cascading Style Sheet">CSS</abbr>) qui gèrent le design de la
|
|
|
|
|
|
page : une feuille principale, et une spéciale pour Netscape 4, qui ne
|
|
|
|
|
|
gère pas bien les styles</li>
|
2004-03-12 17:38:02 +01:00
|
|
|
|
|
|
|
|
|
|
<li> un <strong>fichier-type</strong> (en <abbr lang="en"
|
2009-09-20 12:27:14 +02:00
|
|
|
|
title="HyperText Mark-up Language">HTML</abbr>) qui gère le contenu de
|
2004-03-12 17:38:02 +01:00
|
|
|
|
la page (texte, structure, etc.)</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li> un <strong>fichier de configuration du serveur</strong>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
(<code>.htaccess</code>), qui gère l'affichage par les vieux
|
|
|
|
|
|
navigateurs comme Netscape 4 ou Internet Explorer 4.</li> </ul>
|
2004-03-12 17:38:02 +01:00
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Le tout est prêt à l'emploi ou presque — il suffit de
|
|
|
|
|
|
télécharger les bons fichiers, de les mettre dans votre répertoire
|
|
|
|
|
|
<code>www/</code> et d'insérer vos propres informations dans le
|
|
|
|
|
|
fichier-type (ça, on ne peut pas le faire à votre place). Vous
|
|
|
|
|
|
obtiendrez ainsi une page jolie (on l'espère !) et respectueuse des
|
|
|
|
|
|
standards (<a title="Spécifications de CSS2 [en]"
|
|
|
|
|
|
href="http://www.w3.org/TR/2004/CR-CSS21-20040225/">CSS 2.1</a> et <a
|
|
|
|
|
|
title="Spécifications de HTML4 [en]"
|
2004-03-12 17:38:02 +01:00
|
|
|
|
href="http://www.w3.org/TR/html4/">HTML 4.01</a>).
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h2>Mode d'emploi</h2>
|
|
|
|
|
|
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<h3>Choisir un thème</h3>
|
2004-03-12 17:38:02 +01:00
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Pour l'instant vous pouvez choisir parmi trois thèmes, plus viendront
|
|
|
|
|
|
par la suite. Vous pouvez aussi nous envoyer vos propres thèmes. Les
|
|
|
|
|
|
captures d'écran vous montrent à quoi ressemble chaque thème avec
|
|
|
|
|
|
Mozilla 1.6.
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<table class="tableau">
|
|
|
|
|
|
<tr>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<th>Nom du thème</th><th>Couleurs</th><th>Capture d'écran</th><th>Télécharger le thème</th>
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</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>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<td>Océan</td><td>bleu marine, vert</td><td><a
|
2004-03-12 17:38:02 +01:00
|
|
|
|
href="ocean.png"><code>ocean.png</code></a></td><td><a href="ocean.zip"><code>ocean.zip</code></a></td>
|
|
|
|
|
|
</tr><tr>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<td>Orange</td><td>orange 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>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Les thèmes ont été testés avec Mozilla 1.6, Firefox 0.8 et Internet
|
|
|
|
|
|
Explorer 6 — le thème simple a bien sûr été testé avec
|
|
|
|
|
|
Netscape 4. Nous espérons qu'ils marchent bien avec tous les
|
|
|
|
|
|
navigateurs, si ce n'était pas le cas, merci de nous prévenir.
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</p>
|
|
|
|
|
|
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<h3>Décompacter le thème</h3>
|
2004-03-12 17:38:02 +01:00
|
|
|
|
|
|
|
|
|
|
<div class="encadre">
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<strong>Attention</strong> : pour utiliser un thème, vous devez déjà
|
|
|
|
|
|
avoir un espace Web disponible. Si ce n'est déjà fait, <a
|
|
|
|
|
|
href="&url.tuteurs;internet/web/creer.html">créez votre page</a> sur le
|
|
|
|
|
|
serveur des élèves de l'ENS.
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Le thème se présente sous la forme d'une archive au format zip. Il
|
|
|
|
|
|
faut la décompacter dans votre répertoire <code>www/</code>. Sous
|
|
|
|
|
|
Unix, utilisez la commande <code>unzip</code> :
|
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
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Mac 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>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Éditez le fichier, par exemple en utilisant <a
|
|
|
|
|
|
href="&url.tuteurs;unix/editeurs/">NEdit</a> :
|
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
|
2009-09-20 12:27:14 +02:00
|
|
|
|
fichier :
|
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">
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<strong>A l'aide !</strong> Quand vous essayez de visualiser votre
|
|
|
|
|
|
page, vous voyez une erreur du serveur, genre « Internal Server
|
|
|
|
|
|
Error ». C'est dû à une erreur dans le
|
2004-03-12 17:38:02 +01:00
|
|
|
|
<code>.htaccess</code>. Relisez les fichiers pour voir si vous ne vous
|
2009-09-20 12:27:14 +02:00
|
|
|
|
êtes pas trompé, sinon renommez le fichier (<code>mv .htaccess
|
2004-03-12 17:38:02 +01:00
|
|
|
|
.htaccess.orig</code>) et contactez-nous.
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<h4>Modifier le fichier-type</h4>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
D'abord, commençons par renommer le fichier. La page d'accueil
|
2004-03-12 17:38:02 +01:00
|
|
|
|
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
|
2009-09-20 12:27:14 +02:00
|
|
|
|
a pas d'espaces et que le nom soit évocateur du contenu : si vous
|
2004-03-12 17:38:02 +01:00
|
|
|
|
mettez votre
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<acronym title="Travaux d'Initiative Personnelle Encadrés">TIPE</acronym>
|
2004-03-12 17:38:02 +01:00
|
|
|
|
en ligne, appelez-le <code>tipe.html</code>, par exemple. Sous Unix,
|
2009-09-20 12:27:14 +02:00
|
|
|
|
on utilise la commande <code>mv</code> pour renommer un fichier :
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
<span class="prompt">brick ~/www $</span> mv modele.html index.html
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Le fichier-type a en gros deux parties :
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<ul>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<li> la <strong>navigation</strong> : 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
|
2009-09-20 12:27:14 +02:00
|
|
|
|
de circuler facilement entre les différentes pages ;</li>
|
|
|
|
|
|
<li> le <strong>corps de la page</strong> : c'est le contenu de la
|
|
|
|
|
|
page à proprement parler.</li>
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
La partie « navigation » revêt la forme d'une liste avec des liens
|
|
|
|
|
|
vers les fichiers concernés. Dans le fichier-type, ça ressemble a
|
|
|
|
|
|
ceci :
|
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>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<li> <a href="<em>beta</em>.html"><strong>bêta</strong></a></li>
|
2004-05-17 21:35:59 +02:00
|
|
|
|
<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">
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Ici, nous indiquons <em>comme ceci</em> les noms de fichiers à
|
2004-05-17 21:35:59 +02:00
|
|
|
|
modifier, et <strong>comme cela</strong> les titres de vos
|
2009-09-20 12:27:14 +02:00
|
|
|
|
pages. Remplacez les alpha, bêta, etc., par le nom de vos fichiers et
|
2004-05-17 21:35:59 +02:00
|
|
|
|
le titre de vos pages. Pour supprimer un item de la liste, effacez une
|
2009-09-20 12:27:14 +02:00
|
|
|
|
ligne commençant par <code><li></code>. Si vous n'avez qu'une
|
2004-05-17 21:35:59 +02:00
|
|
|
|
seule page en tout et pour tout, vous pouvez effacez tout simplement
|
2009-09-20 12:27:14 +02:00
|
|
|
|
le bloc « barre de navigation ». Pour le récupé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>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Pour la partie du corps du texte, le modèle vous montre comment faire
|
|
|
|
|
|
des paragraphes ou des titres. Vous pouvez effacer tout ça et le
|
2004-03-12 17:38:02 +01:00
|
|
|
|
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>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Pour être sûr que vous n'avez pas oublié quelque chose dans votre code
|
2004-03-12 17:38:02 +01:00
|
|
|
|
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>
|
|
|
|
|
|
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<div class="metainformation">Auteur : Marie-Lan Nguyen.
|
2009-09-27 22:00:55 +02:00
|
|
|
|
<date value="from git" />
|
2004-03-12 17:38:02 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
<!-- LocalWords: inflating
|
|
|
|
|
|
-->
|
