Pascal Vuylsteker Contacts English
Sommaire/Indexe
www.flickr.com
Pascal Vuylsteker's photos More of Pascal Vuylsteker's photos

Mosaic and the W3


Mise en garde :

Le document suivant traitant du Web, il est de ce fait obsolète le jour même où il est imprimé. . .

Plus Précisemment, cet article date du numéro 57 du Journal Tribunix, paru en Septembre 94. Un article de vulgarisation un peu plus récent (Décembre 97) peut être consulté qui est paru dans le numéro 28 d'Equi'Idée, une publication de l'institut du Cheval


Vous pouvez obtenir une version PostScript de ce document ...

Table des Matières

1. Le Projet WWW : de l'hypertexte à l'hypermédia
A. Les URLs utiles :
2. Les protocoles classiques
A. FTP ou le Téléchargement (File Transfert Protocol).
B. ARCHIE ou la recherche par nom de fichier.
C. WAIS ou la recherche par mot clefs.
D. Gopher ou la recherche par menu.
E. Telnet ou la recherche guidée par logiciel.
F. Les NEWS ou la recherche par centre d'intérêt communautaire.
G. Les URLs utiles :
3. L'unification des protocoles : les URLs.
A. Les URLs absolus.
B. Les URLs relatifs.
C. Exemples d'URLs:
D. Les URLs utiles :
4. L'unification de la présentation : le format HTML
A. Le principe
B. Un petit cours
C. Un Exemple : le fichier home de l'utilisateur mosaic.
D. A Suivre... HTML+
E. Les URLs utiles :
5. L'organisation sur le site WWW.univ-mlv.fr
A. L'arborescence
B. index.html et .htaccess
C. L'intérêt d'un serveur http : l'optimisation, les scripts, les maps.
D. Les URLs utiles :
6. Pour se repérer sur le ReZo : les petits plus.
A. Recherche par lieu.
B. Recherche par sujet.
C. Recherche par robot.
D. Les News.

1. Le Projet WWW : de l'hypertexte à l'hypermédia

WWW est l'abréviation de World Wide Web, soit, en traduction littérale, La large toile mondiale (C'est Spider's Web qui signifie toile d'araignée). Le WWW, plus communément appelé Web, est un projet unificateur de l'accès aux données disponibles via le réseau des réseaux : Internet (Le 'Rezo' pour les branchés).

Au départ, l'idée est partie du CERN de mettre en place un système hypermédia distribué.

Distribué parce que les données y sont réparties de part le monde et mises à disposition par des serveurs (architecture client -serveur).

On accède à ces données par l'intermédiaire d'un browser (brouteur de réseau) qui va lire les informations d'un serveur à un autre. C'est sans doute l'avènement du client Mosaic qui a permis depuis la fin de l'année 93, une véritable explosion du projet. En Janvier 94, il y avait moins d'une dizaine de serveur en France. A ce jour -Juillet 94-, il y en a près de 100 déclarés sur la carte de France (dont celui de l'Université de Marne la Vallée).

On retiendra le terme d'Hypermédia pour le passage du mode texte et hypertexte au mode multimédia.

Rem : Septembre 94 : une nouvelle carte de france -hiérarchisée- a vue le jour...

A. Les URLs utiles :

http://siva.cshl.org/~boutell/www_faq.html

"World Wide Web FAQ"

??? Projet gutemberg

"Big Dummy's Guide to the Internet".

2. Les protocoles classiques

Avant d'aller plus loin, il faut bien comprendre que le projet Web n'est pas un remplacement brutal de l'existant mais une surcouche qui améliore la convivialité de l'accès aux données.

En effet, les serveurs d'information existent depuis longtemps sur le ReZo. Le problème est qu'à chaque type de serveur correspond un type de client propre.

Pour rappel voici les méthodes d'échange de données classiques :

A. FTP ou le Téléchargement (File Transfert Protocol).

FTP est de loin le protocole d'accès aux données le plus important quantitativement. Le client a accès à une hiérarchie de répertoires similaire à celle d'un disque et peut (avec les limitations imposées par le serveur) obtenir (get) ou déposer (put dans le répertoire pub) des fichiers qui peuvent être ce que l'on veut dans le format que l'on veut. Le problème majeur de ce dispositif est la recherche d'un document précis. Même si l'on sait sur quel serveur il faut chercher l'information, la hiérarchie même du serveur n'est pas toujours suffisamment explicite pour s'y retrouver, en tout cas, pas sans quelques tâtonnements fastidieux. Différentes méthodes sont alors apparues.

Remarque : sous la réserve d'avoir un compte sur la machine ou l'on va chercher des fichiers et suivant la permissivité de l'ingénieur système responsable de cette machine, on retiendra le protocole réellement le plus élémentaire de récupération de fichier : RCP (Remote CoPy) qui, contrairement au protocole FTP, ne nécessite pas la phase de login/mot de passe.

B. ARCHIE ou la recherche par nom de fichier.

Chaque mois, le maximum de sites ftp anonymous (accessible par tous) sont interrogés par les serveurs archies du ReZo qui créent ainsi une base de donnée mondiale des noms de fichiers et noms des répertoires des sites (une sorte de ls -R -l).

Le client archie peut alors interroger le serveur... à condition d'avoir une idée relativement précise du nom des fichiers qu'il recherche.

C. WAIS ou la recherche par mot clefs.

Pour faciliter l'accès à leurs données, des administrateurs de serveurs peuvent décider de créer un serveur WAIS. Ils devront alors commencer par créer un index des documents qu'ils possèdent. Le client WAIS pourra alors effectuer une recherche par mot clefs dans cet index.

D. Gopher ou la recherche par menu.

Similaire au protocole ftp dans le sens où l'on se déplace dans une présentation hiérarchique des données une amélioration est offerte dans la possibilité pour un 'répertoire' de la hiérarchie d'être en fait un lien vers n'importe quel autre site Gopher ou Telnet. On retrouvera cette notion de lien dans le projet Web. On adopte dans le monde Gopher la notion de Menu. En particulier, un Menu (texte plus long et plus expressif) permet une compréhension plus grande de la hiérarchie qu'un nom de répertoire.

Remarque : Gopher était destiné au départ à devenir un réseau d'information entre les universités.

E. Telnet ou la recherche guidée par logiciel.

Ici on va demander à un logiciel distant (tournant sur le serveur) de nous guider dans notre recherche. C'est souvent le cas pour les serveurs de bibliothèques (que ce soit celle du Congrès Américain ou celle de Jussieu) ou encore du plan des métros des grandes villes. Avantage : la recherche est souvent plus précise que par un serveur wais et les possibilités d'interaction plus étendues mais le programme serveur, souvent développé en locale, présente des spécificités auxquelles il faut s'adapter (sur l'un il faudra faire un Ctrl-D pour sortir tandis qu'un autre attendra un Ctrl-]).

F. Les NEWS ou la recherche par centre d'intérêt communautaire.

(Usenet, méthode nntp : Network News Transfert Protocole).

Pour connaître l'avis des autres sur un sujet donné. Ici, on pose des questions, les connectés vous répondent. Avantage et inconvénient : les données y sont "fraîches".

C'est souvent dans les news que l'on apprend où se trouve une FAQ (Frequently Asqued Question ou Foire Aux Questions) sur un sujet donné.

G. Les URLs utiles :

http://siva.cshl.org/~boutell/www_faq.html

World Wide Web FAQ

3. L'unification des protocoles : les URLs.

Le premier apport du projet Web a été la mise en place des URL. L'URL ("Uniform Resource Locator") est un moyen uniformisé de localisation des ressources. Le principe : si quelque chose peut être obtenu sur le ReZo par l'une quelconque des méthodes précédentes, par serveur http (serveur de ressources Web), ou par toute autre méthode à venir, il doit pouvoir être décrit sous la forme d'un URL, de format suivant. . .

A. Les URLs absolus.

méthode://nom_de_la_machine:port/nom_de_fichier[#ancre | ?liste_de_paramètres]

Ce qui donne dans le détail :

1. Méthode :

file : La ressource est un fichier accessible par le client.

ftp : La ressource est accessible par le protocole FTP.

http : La ressource est accessible par le protocole HTTP (cas des

ressources disponibles sur un serveur W3).

telnet : La ressource est accessible via une session interactive TELNET.

gopher : La ressource est accessible par le protocole GOPHER.

wais : La ressource est accessible par la version WAIS du protocole Z39.50.

news : La ressource est accessible par le protocole NNTP.

2. Nom de la machine :

dénomination de la machine sur laquelle tourne le serveur

3. Port :

Par défaut 80 (Il faut dans ce cas que le serveur soit lancé par le root).

Sinon, il faut choisir un nombre entre 1024 et 65536.

4. Nom du fichier :

sous la forme chemin/d_accès/nomFichier

Le chemin d'accès peut être relatif ou absolu.

Absolu, il se fait par rapport à la racine définie par le serveur (et n'est pas forcement le racine physique du disque où se trouvent les informations.

5. Ancre :

Nom d'un pointeur dans un fichier HTML.

6. Liste de paramètres :

En particulier dans le cas de requêtes WAIS.

B. Les URLs relatifs.

Dès qu'un document est localisé, quelque part dans le réseau (par exemple, le document http://www.univ-mlv.fr/CIG/CIG.fr.html), on peut utiliser un URL "partiel" ou "relatif" pour situer un autre fichier dans le même répertoire, sur la même machine, servie par le même type de serveur. ( dans le document précédent, on peut faire référence au document CIG.en.html qui se trouve dans le même répertoire par l'URL relatif CIG.en.html).

Les URLs Relatifs sont très importants dans le sens qu'ils permettent un déplacement aisé de l'ensemble de l'arborescence d'un serveur sans une mise à jour complexe. En pratique, on n'utilise des URL absolus dans l'écriture de fichiers HTML que pour pointer vers des données non disponibles sur le serveur ou se trouve le fichier créé.

C. Exemples d'URLs:

file :

file://www.univ-mlv.fr/usr/people2/mosaic/htdocs/MultiMedia/Icon/CIG/CIG.gif

ftp : ftp://ftp.inria.fr/games/galaxy.tar.z

http : http://acaci.ens.fr:8080/

telnet : telnet://mlibrary@bleut.bius.jussieu.fr/

gopher : gopher://burrow.cl.msu.edu/11/news/news/general/french_langage

wais : wais://hostport/database[?search]

news : news:fr.rec.cuisine

D. Les URLs utiles :

http://info.cern.ch/hypertext/WWW/Addressing/Addressing.html

"WWW Names and Addresses, URIs, URLs, URNs".

http://info.cern.ch/hypertext/WWW/Addressing/URL/Overview.html

"Uniform Resource Locators"

4. L'unification de la présentation : le format HTML

A. Le principe

Non seulement le projet Web unifie les données par les désignations mais il le fait aussi pour leur présentation. Ainsi, que ce soit le contenu d'un répertoire, d'un menu, ou d'un index, l'ensemble est accessible par une sélection (clic dans le cas d'une interface graphique) d'un bouton dans un document Hypertexte, voire Hypermédia. Un document hypertexte est un texte dans lequel certains mots ou passages sont mis en valeur (souligné, gras ou couleur) qui sont en fait des boutons cachant des liens vers d'autres documents du même type. Un document Hypermédia diffère du précédent dans le sens qu'il inclut des images et que ses liens pointent vers des documents de n'importe quel type (dont sonore et vidéo).

Ici il faut quand même différencier trois sources de présentation hypermédia.

La première est obtenue par la surcouche des brouteurs de réseau (client Web) tel mosaic qui crée le document hypermédia. Ainsi en ouvrant un URL ftp sous mosaic, on obtient un ls du répertoire désigné. Un clic sur un répertoire inclus entraîne un déplacement dans celui-ci, un clic sur le nom d'un fichier, son téléchargement.

La seconde est l'écriture individuelle de documents au format HTML (HyperText Markup Language).

La troisième est l'écriture de script dont l'exécution fournie un fichier HTML.

B. Un petit cours

1. Généralités.

HTML est un langage descriptif : Il permet de décrire les objets et les types d'un document. En Imagé : "c'est comme du TeX". HTML est décrit suivant la norme SGML (Standard Generalized Markup Language). A ce titre, les documents balisés en utilisant HTML peuvent être échangés entre des plates-formes et des environnements différents.

Un document HTML est en "plain text" (texte ascii 7bits) et peut être écrit avec n'importe quel éditeur de texte, même le plus simple (avis aux amateurs de vi). Il existe par ailleurs des éditeurs WYSIWYG (actuellement au CIG, deux sur SUN et un sur Mac) et des traducteurs d'autres formats vers html. Exemple sur Mac : Vous avez écrit un texte sous WORD, de préférence en utilisant proprement le mode plan, vous sauvegardez au format RTF et vous glissez le fichier en question sur l'icon RTF to HTML. C'est fait.

En attendant de bien connaître un des précédents éditeurs, il est bon de comprendre le principe et d'avoir écrit quelques fichiers "à la main, quitte à utiliser les macros de jot pour rendre le travail moins pénible (placer le fichier .jotmacs du répertoire home de mosaic dans le votre).

Vous pouvez par ailleurs visualiser en temps réel le résultat avec mosaic (option Open Local du Menu File).

2. Les Markup Tags (ou macro pour les utilisateurs de TeX).

HTML est composé d'un ensemble d'éléments qui définissent un document et la manière de l'afficher.

Un élément HTML peut inclure un nom, des attributs du texte ou de l'hypertexte et apparaîtra dans un document HTML sous le moule :

<tag_nom>text</tag_nom>

<tag_nom nom_attribut=argument>text</tag_nom> ou juste

<tag_nom>

Ex <TITLE>Ceci apparaîtra comme un titre</title>

On note au passage que les tags HTML sont "case insensitive" (peuvent être écrites aussi bien en majuscule qu'en minuscule). Par contre, l'expérience montre que les écrire en majuscule rend la lecture du fichier HTML plus aisée.

Par ailleurs, excepté dans les parties de texte à la mise en page pré définie ( encadré par les tags <PRE> et </PRE>), les espaces, suite d'espace, tabulation et passage à la ligne, sont également traités comme un unique espace.

3. Les caractères Spéciaux.

Les caractères accentués sont obtenus comme suit :

* é : &eacute;

* è : &egrave;

* î : &icirc;

* à : &agrave;

* À : &Agrave;....

(Attention ici à l'importance des majuscules/minuscules)

Les caractères du langage HTML :

* < : &lt;

* > : &gt;

* & : &amp;

* " : &quot;

* espace insécable : &nbsp;

4. Structure générale d'un fichier HTML.

Un fichier HTML est constitué d'une tête (HEAD) donnant des informations sur le contenu du corps, sa provenance, son accessibilité... et d'un corps (BODY) qui sera la partie visible par l'utilisateur.

<HTML>

<HEAD>

<TITLE>Ceci appara&icirc;tra dans la fen&ecirctre titre du Brouteur</TITLE>

<!-- Ceci est un commentaire -->

<!-- La zone HEAD peut contenir d'autres champs que TITRE, mais ils sont alors -->

<!-- écrits par le serveur. Ex : ISINDEX, NEXTID, BASE, LINK -->

</HEAD>

<BODY>

...

...

...

</BODY>

</HTML>

5. Mode PLAN : plongeon dans le corps du fichier HTML

A l'intérieur du Corps se trouve votre document organisé de manière LOGIQUE par opposition à une organisation par formatage de texte. On retrouve ce type d'organisation dans le mode PLAN de word. En pratique, à chaque fois que vous voulez qu'une partie de votre texte soit considérée comme un titre, plutôt que de l'écrire en gras, majuscule avec une taille de 20, vous la déclarez simplement comme étant un titre d'un niveau plus ou moins important. Il en est de même pour les commentaires, les extraits de codes, ou les listes...

C'est alors au brouteur (client) de décider s'il veut que les commentaires soient visibles en italiques ou en souligné, suivant ses propres petites habitudes...

Les Titres

* <H1>Titre de niveau 1 (LE titre du document)</H1>

* <H2> ... </H2>

* <H3> ... </H3>

* <H4> ... </H4>

* <H5> ... </H5>

* <H6> titre le moins important </H6>

Styles Logiques

Entre parenthèses apparaît le rendu obtenu classiquement par défaut sur les clients graphiques.

Ceci est purement indicatif.

* <EM>..texte..</EM> : Texte important (italique).

* <STRONG>...</STRONG> : Texte très important (bold).

* <CODE>..texte..</CODE> : Code informatique (à largeur de fonte fixe).

* <DFN>..texte..</DFN> : Définition d'un terme (italique).

* <CITE>..texte..</CITE> : Titre de film, de livre. . . (italique).

* <KBD>..texte..</KBD> : Terme à rentrer au clavier par l'utilisateur

(password...) (bold à largeur de fonte fixe ou italique).

* <VAR>..texte..</VAR> : Variable "méta syntaxique" (nom de fichier)(italique).

* <SAMP>..texte..</SAMP> : Message de sortie informatique (Segmentation fault:...)

(à largeur de fonte fixe).

* <ADDRESS>..</ADDRESS>: Auteur, Organisme responsable du document

<BLOCKQUOTE>

....

</BLOCKQUOTE> : Citation, Extrait de document (texte indenté).

* <PRE> : Texte tel qu'il apparaît dans le fichier html

..... (Un espace est un espace, un passage à la ligne

</PRE> le reste et la largeur de fonte est fixe).

Les Listes

Afin de présenter une liste d'éléments, de données de définitions, de nombreuses possibilités s'offrent à l'auteur de fichier HTML.
Les listes de Définitions ou Glossaires.
<DL>

<DT>Premier terme à définir.

<DD>Définition du premier terme.

<DT>Deuxième terme à définir.

<DD>Définition du deuxième terme.

...

</DL>

Les Listes non ordonnées.
<UL>

<LI>Premier élément de la liste.

<LI>Deuxième élément de la liste.

....

<UL>

Les Listes ordonnées (numérotées).
<OL>

<LI>Premier élément de la liste.

<LI>Deuxième élément de la liste.

....

<0L>

Les Menus.
<MENU>

<LI>Premier élément de la liste.

<LI>Deuxième élément de la liste.

....

<MENU>

Les listes Encapsulées
Un élément d'une liste peut lui même être une liste (on évitera quand même de dépasser trois niveaux d'encapsulation). Il est bon pour la lecture du fichier HTML d'indenter en conséquence, même si l'indentation est automatique au rendu.

<MENU>

<LI>Premier élément de la liste.

<LI>Deuxième élément de la liste : une liste de terme

<DL>

<DT>Premier terme à définir.

<DD>Définition du premier terme.

...

</DL>

....

<MENU>

Texte formaté classique

Rappel : à déconseiller (par rapport aux styles logiques) pour un texte propre dans la philosophie HTML.

* <B>...texte GRAS (Bold)..</B>

* <I>...text ITALIQUE..</I>

* <TT>...text à largeur de fonte fixe..</TT>

Extra

* <P> : Fin de paragraphe (Passage à la ligne + Saut de Ligne)

* <BR> : Passage à la ligne (sans saut).

* <HR> : Ligne de démarcation esthétique.

Image Incluses dans le texte.

<IMG SRC="URL_DE_L_IMAGE">

ou URL_DE_L_IMAGE est généralement un URL relatif.

ou pour le format complet :

<IMG SRC="URL_DE_L_IMAGE ALT="texte de remplacement" ALIGN=[MIDDLE|TOP]>

l'attribut ALT sert pour les brouteurs de ReZo non graphiques. C'est alors le texte de remplacement qui est visible au lieu de l'image.

ALIGN définit la position du texte se trouvant sur la même ligne que l'image, par rapport à celle-ci (Bottom par défaut).

ATTENTION : La Source d'une image incluse doit être au format GIF ou X Bitmap (XBM).

Exemple :
<IMG ALIGN=middle SRC="CIG/Icons/CIG_icon.GIF" ALT="Icon CIG">

Le Meilleur pour la fin : Les HyperLiens

Fonctionnant comme les boutons d'une pile HyperCard ou les aides de Windows, les Liens sont des images ou des textes NON-FORMATÉS cachant un des fameux URLs.

<A HREF="URL_a_CHARGER">Texte du Bouton</A>

Dans le Texte du Bouton ne doit se trouver que du texte non formaté ou la référence à une image (dans ce cas, il vaut mieux compléter l'attribut ALT du tag IMG).

Ex bouton/icon pour obtenir une version en français d'un document :

<A HREF="page.fr.html"><IMG SRC="drapeauFrance.gif" ALT="Texte Francais"></A>

Ou présentation d'une image sous forme réduite afin d'économiser la taille du document, tout en donnant la possibilité de charger l'image réelle :

<A HREF="imReel.jpeg"><IMG SRC="imReduite.gif" ALT="Image A Charger"></A>

Les Ancres dans un fichier

Un URL peut inclure la partie d'un fichier que l'on désire apercevoir lors de son ouverture (par défaut on voie le début du fichier). Il s'agit du paramètre suivant le #, qui est le nom d'une "ancre". Encore faut-il que cette ancre soit définie dans le fichier en question. Pour cela, on procède comme suit :

<A NAME="nomAncre">Texte apparaissant au début de la fenêtre du client</A>

Une telle ancre peut alors être atteint de l'extérieur :

en ouvrant l'URL http://nomMachine/nomFichier#nomAncre

ou en cliquant sur un lien se trouvant dans le même fichier que l'ancre :

<A HREF="#nomAncre">Plus loin dans ce document...</A>.

Encapsulation des Tags.

Trois limitations au formatage :

Les Formatages ne doivent surtout pas se chevaucher :

<H2>Un Titre...<B>de niveau 2</H2>gras sans être titre 2</B> (Mauvais)

Ne pas encapsuler de formatage dans le texte d'un lien :

<A HREF="mosaic.en.html"><H1>English version</H1></A> (Mauvais)

<H1><A HREF="mosaic.en.html">English version</A></H1> (Bon)

On peut se permettre un formatage classique dans un formatage logique. . .

<H5>Un Titre...<B>de niveau 2</B></H5>

. . . alors que l'inverse est à éviter. . .

<B><H5>Un Titre...de niveau 2</H5> au milieu d'un texte en gras</B>

. . . de même qu'il faut éviter les doubles formatages classiques :

<B><I>Italique Gras</I> au milieu d'un texte en gras</B>

Dans bien des brouteurs, seule l'information la plus encapsulée sera prise en compte (Italique dans l'exemple).

C. Un Exemple : le fichier home de l'utilisateur mosaic.

<html>

<head>

<TITLE>Administrateur Serveur CIG</TITLE>

<!-- Ceci est la page par defaut en francais des utilisateurs -->

<!-- A vous d'en faire la votre... (Ces deux lignes sont des commentaires) -->

</head>

<body>

<!-- ce qui suit va etre tabule tel quel (sans les commentaires) -->

<PRE>

<IMG ALIGN=middle SRC="CIG/Icons/CIG_icon.GIF">

<!-- mettez plutot une image de vous dans ce lien -->

<H1>Bienvenue chez Administrateur Serveur CIG</H1>

<!-- Titre de niveau 1 -->

</PRE>

<!-- en dehors de cette zone PRE, les espaces successifs, -->

<!-- les tabulations et les passages a la ligne sont tous pris pour UN espace -->

<HR><!-- Un trait pour separer -->

You can have an <A HREF="mosaic.en.html">English version</A> of this page.

<HR>

<H2>Un Titre...de niveau 2</H2>

<UL>Une liste de proposition ...

<LI>Bonjour chez vous

<LI><A HREF="../equipe.fr.html">

L'&eacute;quipe du Labo</A>

</UL>

Le Laboratoire ou je travaille actuellement : <A HREF="CIG/CIG.fr.html">

le CIG</A>

<HR>

<ADDRESS>

Administrateur Serveur CIG &lt;mosaic@indigo1.univ-mlv.fr&gt;

</ADDRESS>

</body>

</html>

D. A Suivre. . . HTML+

Actuellement, on distingue HTML 1 (celui qui vient d'être décrit) et le HTML 2 qui inclus la définition de formulaires dans lequel un client peux entrer du texte.

La véritable mutation à venir est HTML+, la nouvelle norme qui inclura HTML et présentera de notables améliorations du point de vue de la mise en page. Les principales nouvelles performances sont:

1. La justification de texte (à droite, au centre, au milieu. . . ).
2. Les Tableaux.

Il n'existe pas dans HTML l'équivalant de la macro LaTeX "tabular". Ceci est corrigé dans HTML+ par le Tag <TABLE>.

3. Les Figures.

Si les images incluses sont déjà possibles leur fonctionnalités sont bien limités (les Maps sont en fait gérées par le serveur). HTML+ aura des <FIG> qui permettront :

Le positionnement de la figure.
La légende de la figure.
La définition d'un texte de substitution.
La création de parties "réactives" ("cliquables") dans une image (les actuelles Map). Les zones de réactivité pouvant être définies comme des polygones

4. Les formulaires du HTML2. . .

Un formulaire est obtenu en plaçant des directives de création de champs à l'intérieur d'un texte HTML banal. Un champ est défini par la commande <INPUT>, qui permet de préciser les attributs de celui-ci. Pour chacun des champs, il est possible de préciser son nom, qui doit être unique pour un formulaire; il sera transmis comme argument à une procédure chargée de traiter le contenu du formulaire.

Au début d'un formulaire, on précise la nature du traitement qu'il doit subir; c'est en général l'URL d'une procédure (shell, perl. . . ) ou d'un programme.

Un champ dont le type est SUBMIT est un bouton de commande. Il déclenche l'émission (par le client ayant affiché le formulaire) du contenu du formulaire vers l'URL cité précédemment. Les champs du formulaire sont émis derrière l'URL de la procédure de traitement (précédés du caractère '?'); elle les perçoit alors comme paramètres.

E. Les URLs utiles :

http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

"A Beginner's Guide to HTML"

http://kuhttp.cc.ukans.edu/lynx_help/HTML_quick.html

"HTML Quick Reference"

http://info.cern.ch/hypertext/WWW/MarkUp/MarkUp.html

"HyperText Markup Language (HTML)"

http://info.cern.ch/hypertext/WWW/MarkUp/SGML.html

"A description of SGML, the Standard Generalized Markup Language"

http://www.univ-mlv.fr/CIG/Equipe/pvk/tableConvertion.html

"Table de convertion des textes accentués"

5. L'organisation sur le site WWW.univ-mlv.fr

A. L'arborescence

L'activité Mosaic (serveur comme client) du CIG à été regroupée dans le compte utilisateur 'mosaic'.

L'organisation du compte est la suivante :

* ~/Bin/Mosaic/ : Client Mosaic (3 binaires pour 3 SE différents).

* ~/Bin/OtherBrowser/ : D'autres clients brouteurs de ReZo.

* ~/Bin/mosaic : Quand vous lancez mosaic au CIG, c'est ce shell qui est

lancé. Il choisit le bon binaire en fonction de la machine sur laquelle vous vous trouvez et ouvre Mosaic avec la home page locale.

* ~/HTML_Editor : Éditeurs WYSIWYG à l'essai (Deux binaires SUN pour l'instant)

* ~/httpd/cgi-bin/ : shells exécutables par le serveur

* ~/htdocs/ : Racine pour les données accessibles sur le serveur du CIG

C'est de ce répertoire que doit partir un URL absolu d'un fichier mis à disposition par le serveur.

Exemple: le fichier. . .

/usr/people2/mosaic/htdocs/CIG/CIG.fr.html

. . . a pour URL :

http://www.univ-mlv.fr/CIG/CIG.fr.html

* ~/htdocs/CIG/Equipe/ : Répertoire des utilisateurs. Un appel au shell newUser vous crée un répertoire à cet endroit. Vous pouvez y mettre ce que vous voulez. . .

~mosaic/Bin/newUser login 'Prénom NOM'

* Les données communes se répartissent suivant la hiérarchie :

~/htdoc/ CIG / Equipe

/ Local n'est visible que par les machines du CIG

/ VR

/ Icons

/ Meeting futurs et anciens, compte rendu de réunion...

IFI Remplissage futur...

MultiMedia/ Image

/ Son

/ Film

/ Icon Bouton, entête. . .

ReZo / Info régulièrement copiée à l'extérieur

DocServeur

B. index.html et .htaccess

Tout ce que vous mettez dans votre répertoire personnel est visible de l'extérieur que ce soit des liens vers des données ailleurs sur le disque ou des données se trouvant dans le même répertoire ou dans les descendants de ce répertoire.

Deux fichiers placés dans les répertoires en question limitent cet accès.

1. index.html :

On peut demander au serveur http le contenu d'un répertoire (Ex http://www.univ-mlv.fr/MultiMedia/Image/RDS/). Si un fichier index.html se trouve dans ce répertoire, c'est celui ci qui sera retourné à la place du ls graphique que l'on obtient par défaut.

2. .htaccess :

Le véritable fichier de configuration de l'accès

ex : celui du répertoire Local du CIG

# Fichier de Configuration des accès au répertoire Local du CIG

# Edite par Pascal VUYLSTEKER (pvk)

################################################################

# Ceci est un fichier de configuration de l'acces aux fichiers

# il ne fait que modifier la configuration par defaut du fichier

# mosaic/httpd/conf/acces.conf qui n'autorise au passage que les

# modifications suivantes : Options Limit

Options Indexes FollowSymLinks

<Limit GET>

order deny,allow

deny from all

allow from indy.univ-mlv.fr

allow from ...

</Limit>

Pour plus d'information ouvrir directement l'URL:

http://www.univ-mlv.fr/DocServeur/Overview.html....

C. L'intérêt d'un serveur http : l'optimisation, les scripts, les maps.

1. Optimisation :

Contrairement au serveur ftp, le chargement 'anonymous' n'est pas une option.

Par ailleurs, chaque appel au serveur correspond à la délivrance d'un unique fichier. Après son envoie, la connexion est immédiatement libérée.

2. Les scripts :

Dans un serveur ftp les données -excepté les mis à jours- sont fixes. Un serveur http peut retourner le résultat d'un exécutable lancé par l'ouverture de son URL et tenant lui même compte de données fournies par le client (formulaires). Les données sont donc créées au moment de la demande.

3. Les Maps :

Cas particulier des scripts. Quand on clic sur une partie d'une image map, les cordonnées cliquées sont envoyées par le client au serveur qui peut alors aviser de différentes actions suivant la zone cliquée.

D. Les URLs utiles :

http://www.univ-mlv.fr/CIG/initiationMosaic.html

"Mosaic et le serveur html du CIG"

http://www.univ-mlv.fr/CIG/Equipe/pvk/Home/.mailcap

"Exemple de fichier .mailcap"

http://www.univ-mlv.fr/CIG/Equipe/pvk/Home/.Xdefaults

"Exemple de fichier .Xdefaults"

6. Pour se repérer sur le ReZo : les petits plus.

Ce paragraphe sera très succinct : en fait, il est important pour se repérer aisément sur le ReZo, d'avoir de côté une liste de pointeur de référence, tremplin vers les différents types de recherche possible.

En entendant de constituer la vôtre, consultez la suivante :

http://www.univ-mlv.fr/ReZo/ReZo.fr.html

A. Recherche par lieu

Une description hiérarchique s'est mise en place au niveau mondiale qui permet de chercher un site en Europe, en France ou en Île de France. . .

Voir en particulier la carte des serveurs français :

http://web.urec.fr/France

B. Recherche par sujet

De nombreux sites ont développé une présentation par sujet et hiérarchique de pointeurs.

Si un sujet vous passionne, vous pouvez vous même participer à une veille des pointeurs et vous inclure dans ces organisations.

La plus connue est sans doute `The WWW Virtual Library'.

http://info.cern.ch/hypertext/DataSources/bySubject/Overview.html

C. Recherche par robot.

Certains sites "lâchent" sur le Réseau des robots chargé d'explorer récursivement et entièrement l'ensemble du Web. Ils obtiennent ainsi de gigantesques bases de données généralement indexées par les mots trouvés dans les titres des pages HTML.

On n'obtient en les consultant pas toujours ce à quoi l'on s'attendait, mais l'on obtient souvent beaucoup de chose.

Dans cet esprit, trois choses à retenir :

* Ne créez pas vous même ce type de robot : l'exploration de l'ensemble du Réseau devient de plus en plus difficile.

* Tout ce que vous obtiendrez ne sera que participer à l'encombrement du Réseau en ennuyant tout le monde.

* Utilisez dans les titres de vos documents HTML des mots clefs significatifs.

D. Les News

Des groupes de news ont pour spécialité de présenter toutes les nouveautés du ReZo.

Plongez y et vous trouverez de tout.

On retiendra en particulier les groupes :

news:comp.infosystems.www.misc

news:comp.infosystems.www.providers

et

news:comp.infosystems.www.users

On notera l'émergence de tentative d'organisation, de classement et de stockage des news dans des FAQ ou plus récemment par une mise en avant de l'aspect groupeware. On regardera à ce sujet : Welcome to WIT - W3 Interactive Talk.

=====================================================================
Google
vuylsteker.net vrarchitect.net
English Pascal Vuylsteker Contacts Sommaire/Indexe
[Accueil] [Contact]
Copyright © 1994-2006
Pascal Vuylsteker
Page modifiée le: 15/12/2000
Envoyez moi vos commentaires :
<pvk@vuylsteker.net>