303 lines
12 KiB
HTML
303 lines
12 KiB
HTML
|
<?xml version="1.0" encoding="UTF-8"?>
|
|||
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|||
|
|
<head>
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|||
|
|
<title>Créer une page</title>
|
|||
|
|
<link rel="stylesheet" href="../../tuteurs.css" type="text/css" />
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="navigation">
|
|||
|
|
<h1>Tuteurs informatique<br /><a href="../../meta/contact.html">Nous contacter</a></h1>
|
|||
|
|
<hr />
|
|||
|
|
<ul class="menu">
|
|||
|
|
<li>
|
|||
|
|
<a href="../../meta/charte_graphique.html">Utiliser ce site</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="../../actualite.html">Actu et stages</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="../../docs/">Docs à imprimer</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="../../meta/plan_site.html">Plan du site</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="../../search.html">Rechercher</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<hr />
|
|||
|
|
<ul class="arbre">
|
|||
|
|
<li>
|
|||
|
|
<a href="../../">Les tuteurs</a>
|
|||
|
|
<ul class="arbre">
|
|||
|
|
<li>
|
|||
|
|
<a href="../">Internet</a>
|
|||
|
|
<ul class="arbre">
|
|||
|
|
<li>
|
|||
|
|
<a href="./">Web</a>
|
|||
|
|
<ul class="arbre">
|
|||
|
|
<li>
|
|||
|
|
<a href="conseils.html">Conseils</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="creer.html" class="actuel">Créer une page</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="htaccess.html">.htaccess</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="html/">XHTML</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="lynx.html">Lynx</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<hr />
|
|||
|
|
<ul class="menu">
|
|||
|
|
<li>
|
|||
|
|
<a href="http://www.eleves.ens.fr/">Serveur des élèves</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="http://www.ens.fr/">ENS</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="http://www.spi.ens.fr/">SPI</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="corps">
|
|||
|
|
<h1>Créer votre page Web à l'ENS</h1>
|
|||
|
|
<div class="sommaire">
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<a href="#s1">Marche à suivre</a>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<a href="#s1_1">Créer un répertoire spécial</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#s1_2">Votre page d'accueil</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#s1_3">S'enregistrer</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#s1_4">Robot d'indexation</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#s2">Et maintenant, le contenu !</a>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<a href="#s2_1">Un peu d'organisation</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#s2_2">Voir le résultat</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<p>
|
|||
|
|
Les élèves, magistériens, pensionnaires étrangers, bref tous ceux qui
|
|||
|
|
ont un compte sur <code>sas</code> peuvent créer une page Web sur
|
|||
|
|
le <a href="http://www.eleves.ens.fr/">serveur des élèves</a>.
|
|||
|
|
</p>
|
|||
|
|
<div class="attention"><strong>Attention</strong> : faire une page Web ne s'improvise
|
|||
|
|
pas. Nous vous incitons vivement à lire nos <a href="conseils.html">conseils à ce sujet</a>, ils vous rappelleront
|
|||
|
|
que le Web a sa propre sociologie, qu'il y a des problèmes de
|
|||
|
|
copyright, etc. </div>
|
|||
|
|
<h2>
|
|||
|
|
<a name="s1" id="s1">Marche à suivre</a>
|
|||
|
|
</h2>
|
|||
|
|
<h3>
|
|||
|
|
<a name="s1_1" id="s1_1">Créer un répertoire spécial</a>
|
|||
|
|
</h3>
|
|||
|
|
<p>
|
|||
|
|
Il faut commencer par créer, dans votre compte, un répertoire
|
|||
|
|
<code>www</code>. Ce répertoire contiendra les éléments de votre page
|
|||
|
|
Web : fichiers HTML, images, documents, sons, etc. Il n'y a pas de
|
|||
|
|
quotas pour les page Web, mais faites attention quand même à l'<a href="../../unix/place_disque.html">espace disque</a>. Votre
|
|||
|
|
page Web est censée être un outil de travail, pas un espace gratuit de
|
|||
|
|
diffusion de vos photos de vacances.
|
|||
|
|
</p>
|
|||
|
|
<div class="attention"><strong>Attention</strong> : il faut créer le répertoire
|
|||
|
|
<code>www</code> sur votre compte sur <code>sas</code>. En
|
|||
|
|
pratique, ça veut dire que si vous êtes à Jourdan ou Montrouge, il
|
|||
|
|
faut d'abord vous loguer à distance sur <code>sas</code> (tapez
|
|||
|
|
simplement <code>ssh sas.eleves</code>). Pas de problème si vous êtes en
|
|||
|
|
salle S, T, au 46 ou dans l'Infi.
|
|||
|
|
</div>
|
|||
|
|
<p class="continue">Pour créer le répertoire, nous utilisons la
|
|||
|
|
commande <code>mkdir</code>, pour « <i lang="en" xml:lang="en">make a
|
|||
|
|
directory</i> » (pour en savoir plus, consultez notre page sur les <a href="../../unix/repertoires.html">répertoires</a>) :
|
|||
|
|
</p>
|
|||
|
|
<pre><span class="prompt">sas ~ $</span> mkdir www
|
|||
|
|
</pre>
|
|||
|
|
<p class="continue">
|
|||
|
|
Le répertoire <code>www</code> est donc créé. Ensuite, nous allons
|
|||
|
|
dans ce répertoire :
|
|||
|
|
</p>
|
|||
|
|
<pre><span class="prompt">sas ~ $</span> cd www
|
|||
|
|
</pre>
|
|||
|
|
<h3>
|
|||
|
|
<a name="s1_2" id="s1_2">Votre page d'accueil</a>
|
|||
|
|
</h3>
|
|||
|
|
<p>
|
|||
|
|
Il faut ensuite créer (avec un <a href="../../unix/editeurs/">éditeur de texte</a>) un fichier
|
|||
|
|
HTML (c'est-à-dire un fichier écrit en HTML, le <a href="html/">langage des pages Web</a>) qui servira de page d'accueil,
|
|||
|
|
c'est-à-dire la première page que les internautes verront de votre
|
|||
|
|
site. Conventionnellement, ce fichier s'appelle
|
|||
|
|
<code>index.html</code>.
|
|||
|
|
</p>
|
|||
|
|
<div class="encadre"><strong>Comment faire ?</strong> Si vous ne connaissez rien au HTML,
|
|||
|
|
vous pouvez lire notre <a href="html/bases.html">tutorial HTML</a>, il
|
|||
|
|
vous donnera rapidement les bases nécessaires pour créer une page
|
|||
|
|
simple. Sinon, vous pouvez utiliser un éditeur de pages Web tel que
|
|||
|
|
Mozilla Composer : lancez Mozilla (commande <code>mozilla</code>) puis
|
|||
|
|
allez dans <code>Window > Composer</code>.
|
|||
|
|
</div>
|
|||
|
|
<p>
|
|||
|
|
La page d'accueil contient généralement une brève présentation de
|
|||
|
|
l'auteur (vous), genre « Bienvenue sur la page de Raoul Dugenou », et
|
|||
|
|
des indications sur ce que va contenir votre page. Vous pouvez aussi
|
|||
|
|
expliquer que vous commencez tout juste votre page, grâce à une
|
|||
|
|
annonce comme : « Attention, cette page est en travaux ». Ça fera
|
|||
|
|
patienter vos premiers lecteurs.
|
|||
|
|
</p>
|
|||
|
|
<h3>
|
|||
|
|
<a name="s1_3" id="s1_3">S'enregistrer</a>
|
|||
|
|
</h3>
|
|||
|
|
<p>
|
|||
|
|
Dès que le répertoire <tt>~/www</tt> existe dans votre répertoire
|
|||
|
|
personnel vous pouvez y accéder depuis le web. Le recensement des
|
|||
|
|
pages web (pour les ajouter aux index) se fait chaque nuit, si vous
|
|||
|
|
venez de créer votre dossier, vous devrez donc attendre. En cas de
|
|||
|
|
problème, envoyez un mail aux Webmasters
|
|||
|
|
(<a href="mailto:webmaster@clipper" title="Envoyer un mail aux Webmasters">webmaster@clipper</a>).
|
|||
|
|
</p>
|
|||
|
|
<h3>
|
|||
|
|
<a name="s1_4" id="s1_4">Robot d'indexation</a>
|
|||
|
|
</h3>
|
|||
|
|
<div class="attention"><strong>Attention</strong> : dès que vous mettez des fichiers
|
|||
|
|
dans <tt>~/www</tt> ils seront accessibles par le web par tous et
|
|||
|
|
notre robot indexera les fichiers même si aucune autre page ne pointe
|
|||
|
|
vers lui !
|
|||
|
|
</div>
|
|||
|
|
<p>
|
|||
|
|
Si vous souhaitez désactiver le robot qui liste les dernières pages
|
|||
|
|
modifiées il faut qu'il existe un fichier <tt>.last_modified</tt> soit
|
|||
|
|
dans votre home soit dans le dossier <tt>~/www</tt>. Pour créer ce
|
|||
|
|
fichier il faut donc faire :
|
|||
|
|
</p>
|
|||
|
|
<pre><span class="prompt">sas ~ $</span> touch ~/www/.last_modified
|
|||
|
|
</pre>
|
|||
|
|
<h2>
|
|||
|
|
<a name="s2" id="s2">Et maintenant, le contenu !</a>
|
|||
|
|
</h2>
|
|||
|
|
<p>
|
|||
|
|
Quelque temps après votre inscription, votre page Web sera accessible,
|
|||
|
|
à l'adresse <code>http://www.eleves.ens.fr/home/login</code>, où
|
|||
|
|
<code>login</code> est votre propre login, bien sûr ! Votre page sera
|
|||
|
|
également classée dans la liste des pages Web, sur le serveur des
|
|||
|
|
élèves. Il y a le <a href="http://www.eleves.ens.fr/home/">classement
|
|||
|
|
par pseudo ou prénom</a>, le <a href="http://www.eleves.ens.fr/home/index-name.html">classement par
|
|||
|
|
nom de famille</a>, <a href="http://www.eleves.ens.fr/home/index-promo.html">par promo</a>,
|
|||
|
|
<a href="http://www.eleves.ens.fr/home/index-dsp.html">par
|
|||
|
|
discipline</a> ou encore <a href="http://www.eleves.ens.fr/home/index-time.html.fr">par date de
|
|||
|
|
dernière modification</a>.
|
|||
|
|
</p>
|
|||
|
|
<h3>
|
|||
|
|
<a name="s2_1" id="s2_1">Un peu d'organisation</a>
|
|||
|
|
</h3>
|
|||
|
|
<p>
|
|||
|
|
Il reste à organiser votre page Web. Chaque nouvelle page de votre
|
|||
|
|
site devra avoir un suffixe en <code>.html</code> (par exemple :
|
|||
|
|
<code>cv.html</code>, <code>maitrise.html</code>, etc.) et être écrit
|
|||
|
|
en HTML. Pour naviguer d'une page à l'autre de votre site, il faudra
|
|||
|
|
<a href="html/bases.html#liens">établir des liens</a> entre elles, et
|
|||
|
|
surtout, entre <code>index.html</code> et les autres. Votre page
|
|||
|
|
d'accueil sert ainsi de table des matières au reste de votre
|
|||
|
|
page. N'oubliez pas qu'il est rare qu'un visiteur tombe directement
|
|||
|
|
sur votre page d'acceuil, veillez à bien relier vos pages entre elles.
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
Pensez à organiser un peu votre page, dès le début. Par exemple, si
|
|||
|
|
vous voulez faire une page avec du contenu sérieux (vos rapports et
|
|||
|
|
mémoires, votre TIPE, vos exos de colle, etc.) et moins sérieux (votre
|
|||
|
|
hobby ou sport favori), vous pouvez dès le début prévoir un répertoire
|
|||
|
|
<code>maths</code>, par exemple, et un répertoire
|
|||
|
|
<code>musique</code>, où vous rangerez les pages qui se rapportent à
|
|||
|
|
l'un ou l'autre.
|
|||
|
|
</p>
|
|||
|
|
<h3>
|
|||
|
|
<a name="s2_2" id="s2_2">Voir le résultat</a>
|
|||
|
|
</h3>
|
|||
|
|
<p>
|
|||
|
|
Pour voir le résultat de votre travail, utilisez un navigateur. Il en
|
|||
|
|
existe plusieurs à l'ENS : Mozilla (lent à se lancer, mais performant
|
|||
|
|
ensuite) et Netscape (qui commence à se faire vieux) sont les plus
|
|||
|
|
importants.
|
|||
|
|
</p>
|
|||
|
|
<p> Si vous avez fait un lien entre la page d'accueil et vos nouvelles
|
|||
|
|
pages, il vous suffit de suivre les liens pour les voir. Sinon, vous
|
|||
|
|
pouvez taper leur adresse directement dans la barre de navigation de
|
|||
|
|
votre navigateur. En gros, il faut substituer
|
|||
|
|
<code>http://www.eleves.ens.fr/home/<em>login</em></code> (en remplaçant
|
|||
|
|
« <em>login</em> » par votre login) à
|
|||
|
|
<code>www</code>. Illustration :
|
|||
|
|
</p>
|
|||
|
|
<table class="tableau">
|
|||
|
|
<tr>
|
|||
|
|
<th>Sur votre compte</th>
|
|||
|
|
<th>Dans le navigateur</th>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>www/index.html</td>
|
|||
|
|
<td>http://www.eleves.ens.fr/home/<em>login</em>/</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>www/cv.html</td>
|
|||
|
|
<td>http://www.eleves.ens.fr/home/<em>login</em>/cv.html</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>www/maths/tipe.html</td>
|
|||
|
|
<td>http://www.eleves.ens.fr/home/<em>login</em>/maths/tipe.html</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
<p> N'hésitez pas à vérifier que le résultat est satisfaisant avec
|
|||
|
|
plusieurs navigateurs différents, si possible sous plusieurs systèmes
|
|||
|
|
(Windows, Mac, Unix, etc.) différents.</p>
|
|||
|
|
<p> Actuellement, <strong>Microsoft Internet Explorer</strong> (pour PC
|
|||
|
|
ou Mac) occupe une très, très large part du marché. Jusqu'à une date
|
|||
|
|
récente, les autres navigateurs (à commencer par
|
|||
|
|
<strong>Mozilla</strong> et <strong>Netscape</strong>) jouaient un rôle
|
|||
|
|
mineur quoique non négligeable, en particulier pour des publics précis
|
|||
|
|
(élèves, étudiants, professeurs et chercheurs par exemple). Mais avec le
|
|||
|
|
succès toujours croissant de <strong>Firefox</strong>, version allégée
|
|||
|
|
de Mozilla, il est de moins en moins raisonnable
|
|||
|
|
d'« optimiser » son site pour un seul navigateur ; en
|
|||
|
|
réalité, prétendre « optimiser » son site pour une version
|
|||
|
|
particulière d'un navigateur particulier revient à dire qu'il est
|
|||
|
|
« pessimisé » pour les autres... </p>
|
|||
|
|
<p>
|
|||
|
|
Si vous souhaitez corriger quelque chose à vos fichiers HTML,
|
|||
|
|
faites-le puis cliquez sur le bouton « Reload » (<code>Ctrl+R</code>
|
|||
|
|
ou <code>View > Reload</code> avec Mozilla) pour que la
|
|||
|
|
modification soit prise en compte par le navigateur.
|
|||
|
|
</p>
|
|||
|
|
<div class="metainformation">Auteur : Émilia Robin et Marc Espie
|
|||
|
|
(1998), Marie-Lan Nguyen (2004). Dernière modification : 2013-10-20 par Antoine Amarilli. </div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|