B.A.BA d'une page web, partage d'archives

Le but de cette page n'est pas de vous transformer en pro de la page web, mais de vous expliquer comment faire une page web modeste si vous avez envie d'en faire une, et aussi de vous permettre de partager des archives même si vous n'avez pas de page web.

Ci-dessous, les textes en bleu indiquent des commandes.

Mettre des fichiers sur internet

Pour avoir une page web ou mettre des fichiers en ligne, il suffit de mettre des fichiers dans le répertoire wwwdoc de votre compte (si vos fichiers sont centralisés sur un serveur, et non des fichiers en local sur votre ordinateur), ou dans le répertoire wwwdoc sur les serveurs sas1.math.u-psud.fr/sas2.math.u-psud.fr (accessibles via ssh/sftp).

Si le répertoire wwwdoc n'existe pas, il faut s'adresser au service informatique (ce n'est pas un répertoire classique).

Exemple : je suis au labo, sous linux, et je veux mettre le fichier appelé "S1SM2003-04.tar.gz" sur le web. Je me mets dans le répertoire contenant ce fichier et je tape
cp S1SM2003-04.tar.gz ~/ruette/wwwdoc/
Si je veux faire la même chose depuis chez moi, je tape
sftp ruette@sas1.math.u-psud.fr
(je rentre mon mot de passe)
cd wwwdoc
put S1SM2003-04.tar.gz
exit

Ce fichier est maintenant disponible à l'adresse http://www.math.u-psud.fr/~ruette/S1SM2003-04.tar.gz

Remarquez qu'on peut mettre des fichiers qui ne sont pas en html. C'est pratique pour mettre des fichiers à la disposition de tous, sans même avoir de vraie page web.

Si vous mettez un fichier appelé "index.html" ou "index.php" dans un répertoire, ce sera le fichier lu par défaut.
Exemple : les adresses http://www.math.u-psud.fr/~ruette/ et http://www.math.u-psud.fr/~ruette/index.html sont équivalentes.

Archives sans page web

Même si vous n'avez pas de page web, vous pouvez rendre disponibles des documents en les mettant sur internet selon la procédure précédente. L'accès aux documents se fait en saisissant directement l'adresse (les personnes qui veulent y accéder doivent donc connaître l'adresse...).

Si vous avez plusieurs fichiers qui vont ensemble, le plus simple est de les archiver pour n'en faire qu'un. Voici comment faire sous unix/linux (la même chose est possible sous windows ou mac, mais je ne connais pas la procédure) :
- mettre tous les fichiers (et uniquement eux) dans un répertoire, que j'appellerai "rep",
- se mettre dans le répertoire en amont et taper tar cf rep.tar rep, ce qui a pour effet d'archiver le contenu du répertoire "rep" dans le fichier "rep.tar".
- variante : archiver et compresser avec gzip en tapant tar -zcf rep.tgz rep, ce qui donne un fichier "rep.tgz".

Procédure pour désarchiver :
- se mettre dans le répertoire contenant "rep.tar" ou "rep.tgz",
- taper tar xf rep.tar ou tar xf rep.tgz, ce qui crée un répertoire "rep" avec les fichiers dedans.
- variante : si le fichier s'appelle "rep.tar.gz", d'abord le décompresser en tapant gunzip rep.tar.gz, ce qui donne un fichier "rep.tar", puis taper tar xf rep.tar comme précédemment.

Un peu de html

Si vous voulez créer une page web, il faut créer un fichier en html. La page principale est donnée par le fichier "index.html" ou "index.php" (voir ci-dessus), on peut y mettre des liens vers d'autres fichiers html, d'autres sites... On peut créer ou modifier un fichier en html de différentes manières, l'une d'elles étant de taper directement le code html (c'est comme ça que sont faites mes pages web). On peut partir d'une page web existante et la modifier (les navigateurs permettent de sauver un page, ce qui permet de la réutiliser). Les navigateurs permettent également de visualiser un fichier qui est sur son ordinateur (et pas encore mis sur internet), c'est pratique pour préparer une page web. C'est le menu "file/open file" dans mozilla.

Le html est un langage avec des balises de début et de fin, qui ressemblent aux environnements latex. Les balises sont entre < >. Une balise de début <balise> est généralement suivie par une balise de fin </balise> (attention, c'est un /, et pas un \ comme en latex !)

Le fichier de la page web aura la structure suivante, où "white" (6ème ligne bleue ci-dessous) est la couleur de fond de la page. La 3ème ligne bleue ci-dessous (<meta...>) n'est pas strictement indispensable mais elle permet de dire dans quel jeu de caractères est la page (ici, "charset=ISO-8859-1", pour utiliser des caractères latins, y compris avec accents). Si vous la mettez, vous pourrez taper des lettres accentuées et la page web sera correctement affichée quel que soit la langue par défaut de l'utilisateur.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Titre apparaissant dans la barre de la fenêtre</title>
</head>
<body BGCOLOR = white>

Texte de la page web

</body>
</html>

Voici quelques commandes permettant de structurer un texte html et d'obtenir une page web minimaliste.

<P> provoque un changement de paragraphe (remarque : une ligne blanche ne suffit pas pour changer de paragraphe, contrairement à latex).
<br> provoque un retour à la ligne (équivalent de \\ en latex)

<h1> Titre de niveau 1 </h1>
<h2> Titre de niveau 2 </h2>
<h3> Titre de niveau 3 </h3>
<h1 align=center> Titre de niveau 1 centré </h1> (variantes : "align=left" et "align=right")

<strong>texte en gras</strong>
<i>texte en italique</i>
<center>texte centré</center>
<font color=red>texte en rouge</font>
<! commentaire n'apparaissant pas>

Pour faire une liste (équivalent de l'environnement itemize en latex) :

<ul>
<li> 1er élément de la liste </li>
<li> 2ème élément de la liste </li>
</ul>

Pour mettre un lien vers un fichier (html ou non) ou une page web :

<a href="gt-dynamique.html">cliquer ici</a> (fichier "gt-dynamique.html" dans le même répertoire que la page courante)
<a href="abstracts/abstract-rotation.html">cliquer ici</a> (fichier "abstract-rotation.html" dans le sous-répertoire "abstracts" par rapport au répertoire courant - ici, le fichier est dans wwwdoc/abstracts/)
<a href="http://www.math.u-psud.fr/~ruette/abstracts/abstract-rotation.html">cliquer ici</a> (adresse web entière d'une page ou d'un fichier - cet exemple donne la même chose que le lien précédent)

Pour mettre une image (formats jpg, gif, png) :

<img src="image.jpg" ALT="texte alternatif">
<img src="image.jpg" ALT="texte alternatif" align=right> (image positionnée à droite; variantes : "align=left" et "align=center")
La partie ALT="texte alternatif", non obligatoire mais recommandée, donne le texte qui apparaît à la place de l'image si les images ne s'affichent pas (en particulier, mauvais débit internet ou page consultée par un aveugle). Si l'image en question sert de lien, c'est important de le mettre, sinon le lien sera incompréhensible pour certaines personnes.

Pour apprendre d'autres commandes html : allez voir d'autres pages web, de préférence avec une structure simple, et regardez la page source (menu "Tools/Web developer/Page source" dans mozilla).