Mettre en place un serveur HTTP

Introduction

Un serveur HTTP est un logiciel qui, lorsqu'il est lancé sur une machine reliée à Internet, permet à tout utilisateur d'Internet de se connecter sur cette machine avec un client HTTP tel que Netscape Navigatoir ou NCSA Mosaic et d'obtenir des informations, en particulier des documents HTML.

On parle de serveur HTTP parce que leur rôle est de répondre à des requêtes et d'envoyer des pages d'information en utilisante le protocole HTTP (HyperText Transfer Protocol). Néanmoins, ces serveurs font souvent beaucoup plus que celà... à tel point qu'on pourrait se demander si l'appellation "serveur HTTP" n'est pas un peu réductrice. On parlera également de "Serveur WWW" ou de "HTTPd", le 'd' signifiant ici daemon, terme utilisé dans la terminologie UNIX pour désigner un programme qui attend en permanence des évènements (ici des requêtes HTTP) pour entreprendre des actions (ici envoyer des documents par HTTP). 

Bénéfices

Les bénéfices que vous tirerez de la mise en oeuvre de votre propre serveur HTTP sont multipes. Tout d'abord, si votre organisation ne dispose encore d'aucun serveur web, vous devez choisir entre faire héberger votre service web chez un prestataire ou alors installer votre propre serveur web.

Par ailleurs, même si votre organisation dispose déjà d'u ou plusieurs webs, il peut quand même être intéressant de disposer de votre propre serveur, par exemple pour avoir un contrôle direct sur vos programmes CGI ou sur les statistiques de connexions.

Dans tous les cas, les possibilités offertes à l'administrateur d'un serveur WWW sont bien plus larges que celles de la personne qui se contente d'écrire quelques pages HTML et de les placer sur un serveur géré par quelqu'un d'autre. Aussi, si vous en avez le temps et les moyens, vous devriez probablement commencer à envisager la possibilité d'administrer votre propre serveur...

 

Quel serveur choisir?

A ce jour, vous avez le choix entre plus de 40 serveurs HTTP dont un certain nombre sont gratuits. En voici une liste non exhaustive (mais assez complète quand même). En sélectionnant un nom dans la liste vous accéderez au service WWW dédié à ce serveur.

Plusieurs critères sont à prendre en compte lors du choix de votre serveur:

  • Exigences marérielles et logicielles

    • Disponibilité sur votre plate-forme serveur
    • Disponibilité pour votre système d'exploitation
  • Niveau de support Technique
  • Prix
  • Capacité à offirir des services Web différents pour des adresses IP différentes
  • Enregistrement de journal (Logs)

    • Compatibilité avec syslog (UNIX) ou EventLog (Windows NT)
    • Utilisation du format commun CERN/NCSA
    • Archivage/cyclage automatique des fichiers jounral
    • Posssibilité de personnalisé les enregistrements de hits
    • Possibilité de logguer dans plusieurs fichiers différents
    • Possibilité de générer des enregistrements spéciaux dans les fichier de log(commentaires...)
    • Possibilité pour les scripts CGI de créer leurs propres entrées de log
    • Logs de mesure de performances
  • Richesse du protocole

    • Réponse automatique à "If-Modified-Since"
    • Selection de fichiers basé sur le header "Accept"
    • Changer d'action basé sur le header "User-Agent"
    • Répondre avec des documents différents basé sur des headers clients tels que "Accept", "User-Agent" et "URL"
    • Inclusions faites par le serveur
    • Inclusions faites d'après commentaires HTML (sans utilisation de CGI)
    • Inclusion automatique de headers HTTP pour les documents non HTML (sans utilisation de CGI)
    • Accès au variables d'état du serveur depuis CGI
    • Possibility d'envoyer des documents ou images dynamiques (Server Push)
  • Sécurité

    • Possibilité d'exiger un mot de passe
    • Support de SSL
    • Support de S-HTTP
    • Restriction à certains noms de domaines
    • Restrictions à certaines adresses IP
    • Accès à certaines hierarchies selon l'adresse IP
    • Groupes d'utilisateurs configurables
    • Possibilité de changer la liste de contrôles d'accès sans redémarrer le serveur
    • Restrictions d'accès à certains fichiers
    • Encryptage et authentification par clé publique
  • Autres fonctions

    • Outils de configuration graphiques
    • Outils de maintenance graphiques
    • Maintenance à distance pendant que le serveur tourne
    • Outils de mesure de performances temps-réel
    • Implmente d'autres protocoles (ftp, gopher...)
    • Arborescence automatique
    • Gestion des répertoires utilisateurs
    • Inclue un moteur de recherche
    • Peut servir de serveur proxy
    • Peut servir de serveur proxy avec cache

Comment créer un formulaire HTML

Les formulaires apportent la vraie interactivité, celle qui donne vie au Web! Aussi sophistiquées qu'elles soient, sans formulaires vos pages HTML sont en lecture seule. Les formulaires permettent à l'utilisateur de vous renvoyer un commentaire sur vos pages, de spécifier un critère de recherche dans une base de données ou encore d'effectuer un choix complexe parmi plusieurs alternatives.

Vous trouverez ci-dessous les différents types de champs que vous pouvez combiner dans un formulaire. Ces champs doivent être définis à l'intérieur d'une section formulaire délimitée par <FORM> et</FORM>.

Note: Ce document explique comment réaliser des pages HTML contenant un formulaire, mais pas comment vous pouvez récupérer et traiter les données que l'utilisateur a entrées dans ledit formulaire. Nous verrons comment effectuer ce traitement lorsque nous aborderons la Common Gateway Interface.

 


Début de formulaire.

Champs simples

Chaque champ est défini avec le marqueur <INPUT>. Le champ de saisie le plus simple est de la forme suivante:

Tapez votre nom: 

<INPUT NAME="Nom">

 

  • NAME permet de préciser le nom du champ pour traitement ultérieur.
  • VALUE permet de donner une valeur par défaut au champ.
  • SIZE permet de préciser la longueur visible du champ. Notez que si l'utilisateur dépasse la fin du champ, son contenu défilevers la gauche.

Tapez votre adresse e-mail: 

<INPUT NAME="e-mail" VALUE="Joe.Sixpack@supermarket.com" SIZE=40>
  • MAXLENGTH permet de limiter le nombre de caractères pouvant être tapés dans le champ.

Code Postal:  (Maximum 5 chiffres)

<INPUT NAME="CP" SIZE=5 MAXLENGTH=5>

 

Type password

Lorsque vous voulez que l'information tapée par l'utilisateur n'aparaisse pas à l'écran, vous devez utilisez l'attribut TYPE=PASSWORDATTENTION: L'utilisation de cet attribut ne grantit pas pour autant une confidentialité absolue des données tapées, celles-ci pouvant toujours être écoutées lors de leur transfert sur Internet.

Mot de passe: 

<INPUT TYPE=PASSWORD NAME="Pass">

Cases à cocher et boutons de sélection

Vous pouvez créer une case à cocher grâce à l'attribut TYPE=CHECKBOX. Pour pré-cocher une case, ajoutez l'attribut CHECKED.

 Je suis déjà client de votre société.
 Envoyez-moi une brochure.

<INPUT NAME="Client" TYPE=CHECKBOX>
<INPUT NAME="Brochure" TYPE=CHECKBOX CHECKED>

Le type RADIO vous permet de définir des boutons radio. La particularité de ces boutons est que vous ne pouvez sélectionner qu'un seul bouton radio portant un certain NAME à la fois. Ceci sera utilisé lorsque l'utilisateur doit faire un choix exclusif entre plusieurs options.

Vous êtes:
 Un Homme
 Une Femme

<INPUT NAME="Sexe" VALUE="H" TYPE=RADIO CHECKED>
<INPUT NAME="Sexe" VALUE="F" TYPE=RADIO>

Champ de texte

Lorsque vous voulez permettre à l'utilisateur de saisir un message de plusieurs lignes, utilisez le marqueur <TEXTAREA>:

<TEXTAREA NAME="Commentaire" ROWS=8 COLS=55>
Bonjour,
j'ai un problème et je vais vous l'expliquer:
</TEXTAREA>
  • L'attribut ROWS permet de préciser le nombre de lignes de la fenêtre de saisie.
  • L'attribut COLS permet de préciser le nombre de colonnes de la fenêtre de saisie.
  • Vous pouvez préciser un texte par défaut en l'insérant entre <TEXTAREA> et </TEXTAREA>.

Listes de sélection:

Les boutons radios conviennent pour effectuer un choix entre 2 ou 3 options concurrentes. Au delà, il est recommandé d'utiliser une liste de sélection. Ceci se fait en utilisant le marqueur <SELECT>. Chaque option étant ensuite définie au moyen du marqueur <OPTION>.

Vous voulez: 

<SELECT NAME="Action">
 <OPTION> Emettre un avis
 <OPTION> Réclamer
 <OPTION SELECTED> Raler
 <OPTION> Crier votre haine
</SELECT>

Vous pouvez utiliser l'attribut SIZE pour préciser le nombre de lignes visibles de la liste de sélection:

Vous voulez: 

 

<SELECT NAME="simple" SIZE=3>
 <OPTION> Emettre un avis
 <OPTION> Réclamer
 <OPTION SELECTED> Raler
 <OPTION> Crier votre haine
</SELECT>

Finalement, vous pouvez également définir une liste de sélection multiple en utilisant l'attribut MULTIPLE:

Garniture(s): 

<SELECT NAME="multi" MULTIPLE>
 <OPTION> Anchois
 <OPTION SELECTED> Trois Fromages
 <OPTION> Epices
 <OPTION SELECTED> Ananas
 <OPTION> Olives
</SELECT>

Champ caché

Vous ne le voyez pas, mais ce formulaire contient un champ caché. L'utilisateur ne peut pas en modifier son contenu. Même si l'intérêt de ce type de champ ne vous paraît pas évident à priori, il permet tout de même de passer des paramètres supplémentaires aux scripts qui traitent les données du formulaire. Voir Common Gateway Interface.

<INPUT TYPE=HIDDEN NAME="Cache" VALUE="Demo">

Boutons d'action

 Votre formulaire devra finalement comporter un bouton de validation qui déclenchera l'envoi des données saisies vers le serveur. Ce bouton est défini de la manière suivante:

<INPUT TYPE=SUBMIT VALUE="Envoyer">

 Vous pouvez également ajouter un bouton qui remet le formulaire dans son état initial (valeurs par défaut):

<INPUT TYPE=RESET VALUE="Effacer">

Fin de formulaire.

Transmission des données

Le marqueur FORM accèpte plusieurs attributs permettant de spécifier ce qui doit être fait lorsque l'utilisateur veut envoyer les données au serveur.

ACTION="url" permet d'indiquer l'URL de la page, ou plutôt du programme CGI à appeler lorsque l'on clique sur le bouton de validation. L'attribut METHOD permet d'indiquer la méthode de transmission des données saisies dans le formulaire. Il y en a deux:

  • La méthode GET est la méthode par défaut. Elle consiste à concatèner les données du formulaire à l'URL, après avoir inséré un point d'intérrogation. On obtient alors une URL du typehttp://www.dom.org/chemin/prog.html?données.
  • La méthode POST consiste à envoyer les données au serveur dans le corps de la requête plutôt qu'en tant que partie de l'URL.

Il est recommandé d'utiliser la méthode POST.

L'attribut ENCTYPE permet de spécifier la manière dont doivent être encodées les données envoyées par la méthode POST. Seule la méthode par défaut peut être utilisée pour l'instant: application/x-www-form-urlencoded.

Comment créer un tableau HTML

HTML 3.0 permet de mettre en forme des tableaux. Cette fonction est également supportée dans une version réduite par Netscape Navigator depuis la version 1.1 et d'autres browsers actuels.

Les marqueurs à utiliser sont les suivants:

  • <TABLE> et </TABLE> encadrent l'ensemble de la définition du tableau. Par defaut les cellules du tableau ne sont pas encadrées. En spécifiant l'attribut BORDER votre tableau aura un aspectquadrillé
    Pour définir le contenu du tableau vous utiliserez les marqueurs suivants:

    • <CAPTION> permet de définir le titre du tableau. Par défaut, ce titre apparaît au dessus du tableau. Si vous voulez le faire apparaitre en dessous, utilisez l'attribut ALIGN=BOTTOM.
    • <TR> permet de définir une ligne du tableau. Il doit y avoir autant de <TR> que de lignes dans le tableau. En théorie, chaque ligne doit se terminer par </TR> mais ceci est optionnel. 
      Pour définir le contenu de chaque ligne, vous utiliserez les marqueurs suivants:

      • <TD> permet de définir une cellule de données. Vous pouvez définir des cellules vides.
      • <TH> permet de définir une cellule de titre. Le contenu d'une telle cellule apparait généralement en gras par rapport à une cellule de données. Ce type de cellule est normalement utilisé pour donner un titre à chaque ligne et à chaque colonne.

Le texte à l'intérieur des cellules peut être aligné grâce aux attributs suivants de TD et TH: (Si ils sont utilises comme attributs de TR, ils s'appliquent à une ligne complète)

  • ALIGN= qui peut prendre les valeurs LEFT, CENTER ou RIGHT.
  • VALIGN= qui peut prendre les valeurs TOP, MIDDLE, BOTTOM ou BASELINE.

Vous trouverez ci-dessous un exemple de tableau contenant un titre, des cellules de titre, des cellules de données et des cellules absentes/vides.

 

Mélange de couleurs
CouleursRougeVertBleu
Rouge   Jaune Magenta
Vert Jaune   Cyan
Bleu Magenta Cyan  

Ceci a été obtenu grâce au code source suivant:

<TABLE BORDER>
<CAPTION ALIGN=BOTTOM> Melange de couleurs </CAPTION>
  <TR><TH> Couleurs </TH><TH> Rouge   </TH><TH> Vert  </TH><TH> Bleu    </TH></TR>
  <TR><TH> Rouge    </TH><TD>         </TD><TD> Jaune </TD><TD> Magenta </TD></TR>
  <TR><TH> Vert     </TH><TD> Jaune   </TD><TD>       </TD><TD> Cyan    </TD></TR>
  <TR><TH> Bleu     </TH><TD> Magenta </TD><TD> Cyan  </TD><TD>         </TD></TR>
</TABLE>

Il est également possible de fusionner plusieurs cellules, soit horizontalement, soit verticalement, grâce aux attributs suivants de TD:

  • COLSPAN=x ou x est le nombre de colonnes standard que doit couvrir cette cellule large.
  • ROWSPAN=y ou y est le nombre de lignes standard que doit couvrir cette cellule haute.

Voici un exemple:

 

On rigole
A 3
B 2
Coin! 1

Ceci a été obtenu grace au code source suivant:

<TABLE BORDER>
<caption> On rigole</caption>
  <tr> <td COLSPAN=3> A </td> <td ROWSPAN=3> 3 </td> </tr>
  <tr> <td COLSPAN=2> B </td> <td ROWSPAN=2> 2 </td> </tr>
  <tr> <th> Coin! </th> <td> 1 </td> </tr>
</TABLE>

Voici un dernier exemple sans bordure:

ArticlePrix
Papier 44.99
Encre 178.55
<TABLE>
<TR><TH>Article</TH><TH>Prix</TH>
<TR><TD ALIGN=RIGHT>Papier</TD><TD ALIGN=RIGHT>44.99</TD>
<TR><TD ALIGN=RIGHT>Encre</TD><TD ALIGN=RIGHT>178.55</TD>
</TABLE>

HTML: Motif de fond et couleurs

Motif de fond

HTML 3.0 permet de définir un motif de fond pour vos pages. Cette fonction est également supportée par Netscape Navigator depuis la version 1.1, en tant qu'extension de la norme HTML 2.0.

Ceci est obtenu par l'adjonction de l'attribut BACKGROUND au marqueur BODY de votre document, comme ceci:

<BODY BACKGROUND="image_de_fond.gif">
  Votre document...
</BODY>

Note: Cette méthode est aujourd'hui totalement obsolète. Tournez vous plutôt vers CSS.


Couleurs

L'inconvénient avec certains motifs de fond, c'est que bien souvent, ils rendent impossible la lecture du texte qui s'affiche, par défaut, en noir. Pour remédier a ce probleme, Netscape a integré des attributs supplémentaires au marqueur BODYCes attributs ne font pas partie de la norme HTML.

  • TEXT permet de fixer la couleur du texte du document. Par défaut, le texte est généralement noir, sur cette page il est blanc.
  • LINK permet de fixer la couleur des liens du document. Par défaut, les liens sont généralement bleu, sur cette page ils sont vert clair.
  • VLINK permet de fixer la couleur des liens une fois qu'ils ont ete visites. Par défaut, ils sont généralement violets, sur cette page ils sonts vert foncé.
  • ALINK permet de fixer la couleur des liens actifs, c'est a dire la couleur qu'ont les liens au moment ou vous cliquez dessus. Par défaut, ils sont alors généralement rouges, sur cette page, ils sont jaunes.
  • BGCOLOR permet de fixer la couleur du fond du document. Cette couleur sera utilisée a la place du gris ou du blanc habituel si vous n'avez pas indiqué d'image de fond avec l'attribut BACKGROUNDou si cette image n'a pas pu etre chargée pour une raison quelconque.

Pour cette page, nous avons utilisé la définition suivante:

<BODY BGCOLOR="#000000" 
         TEXT="#FFFFFF"
         LINK="#00FF00"
         VLINK="#00A000" 
         ALINK="#FFFF00"
         BACKGROUND="image_de_fond.gif">
  Votre document...
</BODY>

Les codes de couleur doivent être interprétés de la manière suivante: derrière le dièse, on trouve six caractères qu'il convient de grouper deux par deux. Ces groupes de deux caractères représentent l'intensité des couleurs de base rouge, vert et bleu (dans l'ordre) sous forne d'un nombre hexadécimal compris entre 00 et FF.

HTML: Comment intégrer une image

Vous avez sans doute remarqué que beaucoup de pages HTML sur le Web intègrent des images dans le texte. C'est plus agréable à l'oeil, mais plus long à charger. Quoi qu'il en soit, vous pouvez faire de même en sauvegardant vos images à intégrer au format GIF et en les référençant dans le marqueur <IMG>. (Certains clients accepteront également le JPEG, mais pas tous!)

Une image intégrée peut être alignée de différentes façons avec le texte:

Top: WWW 

Middle: WWW 

Bottom: WWW

Voici comment on été intégrées les images ci-dessus:

Top: <IMG SRC="image.gif" ALIGN=TOP ALT="WWW">
Middle: <IMG SRC="image.gif" ALIGN=MIDDLE ALT="WWW">
Bottom: <IMG SRC="image.gif" ALIGN=BOTTOM ALT="WWW">

L'alignement par défaut est BOTTOM.

 


WWWWWWLes browsers plus récents permettent également d'aligner une image à gauche ou à droite du texte. Vous pouvez vous en rendre compte ici si votre browser supporte cette fonction. 
Pour ce faire, il suffit d'utiliser l'attribut ALIGN=LEFT ou ALIGN=RIGHT.

Ensuite, si vous voulez continuer à écrire en dessous de l'image insérée et non plus à côté, vous devez insérer un marqueur <BR> comme ceci:

<BR CLEAR=ALL>

Vous pouvez également utiliser CLEAR=LEFT si vous souhaitez écrire en dessous de l'image de gauche mais pas forcément en dessous de l'image de droite. De même pour CLEAR=RIGHT.

 


Gardez toujours à l'esprit que certains clients seront totalement incapables d'afficher des images. Dans ce cas, ils pourront cependant afficher un texte de remplacement, pour peu que vous l'ayez spécifié dans le marqueur à l'aide du paramètre ALT="...".