Premiers pas en HTML
(03)
Un guide pour vos débuts...

copyleft
See You Why?

précédent (02)

| menu (00)

| suite (04)

Fill-out Forms ou Formulaires

Les "forms" (ou formulaires) sont des outils du Web, très souvent utilisés pour qu'un lecteur puisse vous donner certaines informations. Ainsi, c'est souvent par une "form" (un formulaire) que l'on vous demande vos noms, prénoms, adresse, adresse électronique (E-mail), etc.
Ces diverses informations, vous pouvez les conserver dans une base de données ; mieux, si vous êtes enseignant, c'est une manière d'organiser des tests sans que vos étudiants ne doivent quitter leur domicile...

Le traitement d'informations reçues par des "forms" est souvent attribué à de petites routines (programmes) écrites dans des langages comme Perl, Javascript, PHP ou tout autre logiciel capable de traiter des chaînes de carctères, des fichiers et autres informations.
Le HTML peut créer ces formulaires, mais malheuseusement, il n'est pas conçu pour traiter les informations recueillies.
Si vous ne pouvez pas écrire ce genre de routine, apprenez, faites appel à plus connaisseur que vous ou... apprenez le PHP ou le JavaScript... Cuy a conçu une formation en javascript et vous la propose ici.

Les "forms" sont très simples à encoder. Ils se construisent sur le même système de tags (entrant et fermant) que le langage HTML.

En voici un petit exemple, dont vous pourrez lire la source en cliquant sur le mot source :

Balises d'encadrement

Les balises <form> et </form> encadrent tous les �l�ments du formulaire.

        <form method="post" action="URL d'exp�dition" enctype="text/plain">
            ... les formulaires proprement dit ... 
        </form>

N'oubliez surtout pas de refermer la balise de fin de formulaire... faute ridicule qui peut entraîner des heures de recherche...

La balise <form> ouvrante doit être accompagnée de paramètres dont voici en quelques mots l'utilité :

Action :
d�finit le type d'action � d�clencher
Method :
d�finit la m�thode de transfert des donn�es ; les deux méthodes les plus courantes sont "get" et "post"... nous ne ferons pas plus de commentaires ici... ils dépasseraient le cadre du HTML abordé dans ses débuts
Enctype :
d�finit le format de codage des donn�es si le protocole du serveur n'a pas impos� le sien

Entre les balises ouvrante et fermante <form>, on trouvera différents types de balises propres aux formulaires :

<input type="text"> qui ouvrira une ligne de texte à recevoir ;
<textarea> qui ouvrira une zone de saisie (éventuellement de plusieurs lignes) de texte à recevoir ;
<select> qui ouvrira une liste déroulante d'options parmi lesquelles le surfeur pourra faire un choix ;
<option> qui encadrera chaque option possible de la liste déroulante créée par un <select> ;
<input type="radio"> qui ouvrira une série de choix possibles, chacun accompagné d'un bouton-radio ou bouton d'option rond à cocher dont un seul pourra être choisi par l'internaute ;
<input type="checkbox"> qui ouvrira une série de choix possibles, chacun accompagné d'une case à cocher carrée dont plusieurs éléments pourront être choisis par l'internaute ;
<input type="hidden"> qui permettra de joindre des entrées cachées dans des formulaires ;
<input type="image"> qui permettra se substituer les boutons classiques par des images choisies ;
<input type="button"> qui ouvrira des bouton activant des instructions écrites dans un langage tel que JavaScript ou PHP ;
les balises <input type="submit"> ou <input type="reset"> qui activeront ou annuleront le formulaire rempli par l'internaute ;

        <p>Votre nom + prénom 
        <INPUT type="text" name="nom" size="30"></p>

va générer une ligne de saisie du type déjà rencontré dans l'exemple ci-dessus.

Votre nom + pr�nom

Attention !!! La balise <input> n'a pas de balise de fin (fermante).

Un exemple :

Exemple

<html>
<head><title>balise <input> dans un formulaire</title></head>
<body>
  <form method="post" action="URL d'exp�dition" enctype="text/plain">
     <p>Votre nom + prénom
     <INPUT type="text" name="nom" size="30">
     </p>
  </form>

<script type="text/javascript">

</script>

</body>
</html>

La balise <script> n'est pas nécessaire ici, mais c'est entre ces balises que l'on pourrait placer une procédure qui traiterait les données introduites par le visiteur de vos pages. À condition, bien sûr, d'en connaitre un peu plus à propos du langage JavaScript.

Balise : Zone de saisie

La balise <textarea> et </textarea> suivie de divers paramètres, ouvre une zone (éventuellement de plusieurs lignes) qui pourra recevoir du texte

        <p>
        <TEXTAREA name="impressions" cols="30" rows="5"> texte par défaut</TEXTAREA></p>

va générer une zone de saisie de 5 lignes et 30 colonnes (donc 5 fois plus haute et de même largeur) que celle du type déjà rencontré dans l'exemple ci-dessus.

Attention !!! La balise <textarea> a une balise de fin, soit </textarea> .

Balise : Liste déroulante

Les balises <select> et </select> indiquent au browser l'ouverture d'une liste d�roulante dont chaque �l�ment est encadré par les balises <option> ... (</OPTION> facultatif en HTML4, conseillé en HTML5 et obligatoire en XHTML).
Une des options peut être présélectionnée par la paramètre "selected".
La hauteur de la liste déroulante est déterminée par le paramètre "... size".
La police de caractères utilisée peut être modiée par un paramètre tel que "... style="font-size: 11px; font-family:tahoma,sans-serif;" >

Un exemple :

est g�n�r� par la source :

        <form>
          <select name="secteur" size="2">
            <option>primaire 
            <option>secondaire 
            <option selected>tertiaire 
          </select>
        </form>

Exemple

<html>
<head><title>balises TEXTAREA et SELECT-OPTION dans un formulaire</title></head>
<body>
<script type="text/javascript">

<form method="post" action="URL d'exp�dition" enctype="text/plain">
    <TEXTAREA name="impressions" cols="30" rows="5"> texte par défaut</TEXTAREA>
    <select name="secteur" size="2">
        <option>primaire
        <option>secondaire
        <option selected>tertiaire
    </select>
</form>

</script>
</body>
</html>

Balise : Bouton d'option

La balise <input> suivie du paramètre type="radio" indique au browser l'ouverture d'un bouton-radio ou bouton d'option (arrondi, et dont seul un unique élément de la liste (de même nom [name="nom"] peut être choisi) ... (</INPUT> facultatif en HTML4, conseillé en HTML5 et obligatoire en XHTML).
C'est par des boutons d'option (radio) que vous pouviez indiquez votre âge dans l'exemple un peu plus haut.
Un des choix peut être présélectionné par la paramètre "checked".
Ici, le paramètre value est la valeur que prendre la variable "choix" (name="choix") si le lecteur coche cette option.

est généré par la source suivante :

        <form>
          <p>Secteur ?
          <input type="radio" name="choix" value="1">
          primaire 
          <input type="radio" name="choix" checked value="2">
          secondaire 
          <input type="radio" name="choix" value="3">
          tertiaire
                </form>

Exemple

<html>
<head><title>balise <input> dans un formulaire</title></head>
<body>
<script type="text/javascript">

<form method="post" action="URL d'exp�dition" enctype="text/plain">
    <input type="radio" name="choix" value="1"> primaire
    <input type="radio" name="choix" checked value="2"> secondaire
    <input type="radio" name="choix" value="3"> tertiaire
</form>

</script>
</body>
</html>

Balise : Case à cocher

La balise <input> suivie du paramètre type="checkbox" indique au browser l'ouverture d'un bouton case à cocher (carrée, et dont plusieurs éléments de la liste (de même nom [name="nomnom"] peut être choisi) ... (</INPUT> facultatif).
Plusieurs choix peuvent être présélectionnés par la paramètre "checked".

est généré par la source suivante :

        <form>
          <input type= "checkbox" name="choixzz" value="pr">
          primaire 
          <input type= "checkbox" name="choixzz" checked value="sec">
          secondaire
          <input type= "checkbox" name="choixzz" checked value="tert">
          tertiaire
        </form>

Ici aussi, comme pour les boutons d'option, le paramètre value est la valeur que prendra la variable "choixzz" (name="choixzz") si le lecteur coche cette option.

Exemple

<html>
<head><title>balise <input> de type 'checkbox' dans un formulaire</title></head>
<body>
<script type="text/javascript">

<form method="post" action="URL d'exp�dition" enctype="text/plain">
    <p>
    <input type= "checkbox" name="choixzz" value="football"> football
    <input type= "checkbox" name="choixzz" checked value="basket"> basket
    <input type= "checkbox" name="choixzz" checked value="tennis"> tennis
</form>

</script>
</body>
</html>

Balise avec attribut "hidden" : entrée cachée

Les entr�es cach�es permettent, lors de l'envoi, de joindre au formulaire une information non visible pour l'utilisateur. Lorsque la balise <INPUT> poss�de le type hidden, elle n'accepte plus que deux attributs, en l'occurrence NAME et VALUE.

La commande <INPUT TYPE="hidden"> sp�cifie la cr�ation d'une entr�e cach�e.

L'attribut NAME="Nom du champ" permet d'affecter un nom � l'entr�e cach�e.

L'attribut VALUE="Valeur de la variable" permet d'affecter une valeur � l'entr�e cach�e.

<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE>
<META NAME="Description" CONTENT="...">
<HTTP-EQUIV="Date" CONTENT="01/01/2000">
...
</HEAD>
<BODY>
<FORM>
<INPUT
     TYPE="hidden"
     NAME="Nom du bouton"
     VALUE="Valeur de l'entr�e cach�e">
...
</FORM>
...
Diverses commandes HTML
...
</BODY>
</HTML>

Balise : bouton images

Les images peuvent se substituer aux boutons de commandes standards � l'instar des hyperimages et partant d'accomplir des fonctions identiques aux boutons pr�cit�s.

La commande <INPUT TYPE="image"> sp�cifie la cr�ation d'un bouton � base d'une image.

L'attribut SRC="Adresse de l'image" permet d'affecter une image � la commande.

L'attribut USEMAP="Adresse de l'image" permet d'affecter une image en coordonn�es (image-map) � la commande.

L'attribut ALT="Texte" affiche une description de l'image.

<HTML>
<HEAD>
<TITLE>Un titre, pertinent de préférence</TITLE>
...
</HEAD>
<BODY>
<FORM>
<INPUT
     TYPE="image"
     NAME="Nom du bouton"
     SRC="Adresse de l'image"
     ALT="Texte">
...
</FORM>
...
Diverses commandes HTML
...
</BODY>
</HTML>

Balise : bouton de commande

Le bouton de commande permet l'exécution d'instructions écrite dans des langages tels que le Javascript et le VBscript.
Le lecteur intéressé ne pourra qu'apprendre l'un de ces langages (une suggestion ici) :

Le bouton de commande peut cependant se trouver hors formulaire, c-à-d sans balises <form> et </form>.

Un bref exemple illustratif et nous n'irons pas plus loin...

dont la source est lisible ici :

             <input type=button onClick="go('http://www.google.com');" value="Google" 
                  name="button">

Ici, le paramètre value est la valeur qui sera notée sur le bouton.

Balise : bouton "submit" ou "reset"

En revoici un petit exemple :
Si l'action prévue dans le formulaire est d'envoyer un message e-mail, le bouton "Submit" exécute l'action, tandis que le bouton "Reset" annule tout ce qui a été répondu dans le formulaire.
Ici, le bouton "En cliquant ici, vous m'envoyez votre réponse" est un bouton "SUBMIT"
tandis que le bouton "En cliquant là, vous annulez tout" est un bouton "RESET",

dont vous pourrez lire la source en cliquant sur le mot source :

Ici aussi, le paramètre value est la valeur qui sera notée sur le bouton.

À moins de traiter les réponses à la main, ce qui est plus dur est le traitement des réponses reçues, via routines ou programmes adéquats. Quelques sites Web (avec des sripts particulièrement utiles) peuvent vous aider, nous songeons à :
forms.

Les nouvelles normes des formulaires

L'essentiel de nos propos concernent la norme HTML 4.01 du langage HTML. Nous ne voulons pas ici entrer dans les nuances de chaque langage, mais nous pensons bien sûr au HTML, DHTML, XML, XHTML, les uns en doctype traditionnal, les autres en doctype Strict; les uns exigeant des fins de balises /> s'ils n'ont pas de balise fermante, les autres acceptant ou non des paramètres attribués avec ou sans guilles.

Notre but sera ici de vous faire découvrir les nouvelles balises propres aux formulaires

<fieldset>...</fieldset>: balise qui sert à encadrer un ensemble de champs pour visuellement (ainsi qu'ergonomiquement et sémantiquement) regrouper des éléments qui auraient même connotation.
Exemple : on utilisera un fieldset pour les coordonnées personnelles (nom, prénom, adresse...),
un autre pour les coordonnées bancaires (banque, dénomination du compte, iban, bic) et
un autre pour le choix de notre commande (quantité, description...).
Cette délimitation n'est pas obligatoire mais apporte un plus sur l'aspect ergonomique, simplement parce que lorsqu'on est dans le fieldset des coordonnées, on ne trouvera pas de données relatives au compte bancaire.
<legend>...</legend>: balise qui sert à donner un titre au fieldset.
Pratiquement, elle se place juste après l'ouverture de fieldset.
<input> (ou <input /> si XHTML): balise générique qui sert à l'entrée d'information.
Elle possède généralement plusieurs attributs qui peuvent être:
<textarea>...</textarea>: champ de texte sur plusieurs lignes,
dont on peut spécifier le nombre et la longueur par les attributs cols="XXX" et rows="YYY".
<textarea> possède les mêmes attributs que le <input> à l'exception du type.
<select><option>...</option></select>: menu ou liste déroulant(e) présentant plusieurs <option>.
Les options sont caractérisées par un texte et une valeur (attribut value).
Il possède les mêmes attributs que le <input> à l'exception du type.
Une option peut avoir pour attribut selected="selected" si elle doit être choisie par défaut.
<label>...</label>: balise qui sert à lier une légende à un objet de formulaire.
Concrètement, ce n'est pas parce qu'on écrit "Votre nom :" et qu'on met en face un champ input qu'ils sont logiquement liés.
La balise <label> permet de lier un champ et un texte : elle a un attribut for="..." dans lequel on met l'id de la balise de formulaire à laquelle on rattache le label (d'où l'importance de l'unicité d'un id).
Cet aspect de la balise <label> est un plus sémantique et ergonomique non négligeable.

Un exemple de code répondant à ces nouvelles normes serait le bienvenu... il suffisait de demander...
C'est aussi l'occasion d'observé les caractères accentués qui n'ont pas été écrits selon la règle :
on n'écrit pas é, mais on écrit é, etc.

<form id="sondage" method="post" action="submit.php">

      <fieldset>

         <legend>Informations personnelles</legend>

            <p><label for="nom">Nom :</label><input type="text" id="nom" name="nom" tabindex="1" /></p>

            <p><label for="prenom">Prénom :</label><input type="text" id="prenom" name="prenom" tabindex="2" /></p>

            <p><label for="age">Age :</label><input type="text" id="age" name="age" tabindex="3" /></p>

            <p><label for="adresse">Adresse :</label><input type="text" id="adresse" name="adressse" tabindex="4" /></p>

            <p><label for="cp">Code Postal :</label><input type="text" id="cp" name="cp" tabindex="5" /></p>

            <p><label for="ville">Ville :</label><input type="text" id="ville" name="ville" tabindex="6" /></p>

      </fieldset>

      <fieldset>

         <legend>Informations sur l'objet</legend>

         <p style="text-align:center;">Fréquence d'utilisation quotidienne :<br />

            <input type="radio" id="j1" name="freq" value="1" tabindex="7" /><label for="j1">1 fois</label>

            <input type="radio" id="j2" name="freq" value="2" tabindex="8" /><label for="j2">2 fois</label>

            <input type="radio" id="j3" name="freq" value="3" tabindex="9" /><label for="j3">3 fois</label>

            <input type="radio" id="j4" name="freq" value="4" tabindex="10" /><label for="j4">4 fois</label>

         </p>

         <p><label for="note">Note (1 = excellent) :</label>

         <select id="note" name="note" tabindex="11">

            <option value="1">1</option>

            <option value="2">2</option>

            <option value="3" selected="selected">3</option>

            <option value="4">4</option>

            <option value="5">5</option>

         </select></p>

         <p><label for="commentaire">Commentaire</label>

            <textarea id="commentaire" name="commentaire" tabindex="13" cols="40" rows="5"></textarea></p>

      </fieldset>

      <fieldset>

         <legend>Informations annexes</legend>

            <p><label for="email_rep">Me tenir informé(e) du résultat ?</label>

            <input type="checkbox" id="email_rep" name="email_rep" tabindex="14" /></p>

      </fieldset>

      <div style="text-align:center;">

          <input type="submit" name="submit" value="Participer au sondage" tabindex="15" />

      </div>

      </form>

Ce qui donnera:

Les tags <meta> présents dans le <head>

Dans le langage HTML qui permet de b�tir les pages Web, les balises <META> permettent d'indiquer aux moteurs de recherche un certain nombre d'informations sur le contenu d'une page. Le terme Meta signifie Metadata. Ces balises signalent donc de l'information sur l'information.

Balises <meta> de description et de mots-clés :

Imaginons que vous r�alisiez un site parlant du Centre Universitaire de Yellowstone (=CUY), dans le code HTML de la page d'accueil, vous indiquerez, par exemple, les termes suivants :

<meta name="author" content="GVdK"> [si l'auteur s'appelle Gérard Van den Kruispunt]

<META NAME="description" CONTENT="Le site CUY, le plus grand du Hainaut, celui qui vous forme et qui vous donnera du travail. ">

<meta name="keywords" content="école normale, pédagogie, pédagogique, enseignement supérieur, professeur, enseignant, html, balise">

La balise <meta name="description" content="..."> permet d'indiquer au moteur de recherche une phrase r�sumant le contenu de la page. Cette description sera affich�e par certains moteurs dans leur page de r�sultats, sous le titre d�crivant la page trouv�e ; inutile d'être trop long, plus de 150 à 200 caractères nous semble inutile. Si la page ne contient pas de balise, seront affich�s en r�gle g�n�rale les premiers mots visibles sur la page. Cette balise permet donc �galement de mieux ma�triser la pr�sentation de la page propos�e � l'internaute par les moteurs. Ainsi, en l'absence de balise, un moteur pourra par exemple afficher les premiers mots du texte de la page.

La balise <meta name="keywords" content="..."> sert � indiquer des mots cl�s suppl�mentaires aux moteurs de recherche. Bien entendu, comme la phrase de description de la balise , ils ne sont pas affich�s dans la page Web, mais sont "aspir�s" par les spiders des moteurs qui choisissent ensuite d'en tenir compte ou non. Ces mots cl�s peuvent am�liorer le classement de la page ou indiquer certains mots importants que ne contiendrait pas le document. Ils sont s�par�s, au choix, par une virgule, une espace ou une virgule suivie d'une espace.

La balise <meta name="author" content="..."> permet d'indiquer qui a cr�� le site Web et la page en question. Rien ne vous emp�che d'indiquer ici le nom de votre soci�t�, vos initiales, votre nom en entier.

Autres balises <meta> :

Permet de définir les droits d'auteur :
<META NAME="Copyright" CONTENT="Votre Nom, Année de création">

Permet de désigner les noms des programmes utilisés pour créer le document HTML.
<META NAME="Formatter" CONTENT="valeur">
<META NAME="Generator" CONTENT="valeur">

Permet de permettre ou interdire un comportement du robot indexeur du moteur de recherche :
<META NAME="Robot" CONTENT="NOINDEX,NOFOLLOW"> : pour interdire l'indexation, et interdire de suivre les liens de votre page web.
<META NAME="Robot" CONTENT="INDEX,FOLLOW"> : pour autoriser l'indexation et lui dire de suivre les liens de la page pour continuer l'indexation.

Permet de déclarer la langue utilisée pour l'indexation des robots :
<META HTTP-EQUIV="Content-Language" CONTENT="fr">

Permet de changer la localisation de vos pages :
<META HTTP-EQUIV="Refresh" CONTENT="10; URL=https://cuy.be/pg/index2.html"> Après le chargement de cette page, le navigateur va automatiquement charger la page indiquée par URL. S'il n'y en a pas (CONTENT="10"), alors la page courante sera rechargée. La valeur est exprimée en secondes.

Permet de définir le type de document et la page de code (ou type d'alphabet, jeu de caractères) utilisée pour le texte :
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

Permet de définir la date d'expiration du document :
<META HTTP-EQUIV="Expires" CONTENT="1 jun 2002 03:40:40 GMT"> <META HTTP-EQUIV="Expires" CONTENT="Mon Sep 2003 07:20:00 GMT">

Certaines pages font l'objet de mises à jour fréquentes. Il convient dès lors d'interdire aux navigateurs de "resservir" une version précédemment mise localement en cache. On donne à la page une date d'expiration - comme pour les yaourts - en heure GMT.

Avec la valeur 0, le navigateur comprend que la page expire immédiatement et doit être rechargée completement à chaque requête.

<META HTTP-EQUIV="Expires" CONTENT="0">

Produisant le même effet, les deux valeurs de l'attributs HTTP-EQUIV, "Cache-Control" et "Pragma" s'adressent aux différents navigateurs et interdisent absolument de placer la page dans le cache local. Afin de s'assurer d'une efficacité maximale sous tous les navigateurs, on n'hésitera pas à cumuler les trois balises :

<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Expires" CONTENT="0">

En bref, les balises <META> ne changent en rien ce que voit le visiteur de votre site.

Cadres ou frames

Il est possible de diviser l'�cran en plusieurs cadres ou fen�tres ( appel�s frames en anglais) de taille variable : soit un cadre sup�rieur, soit un cadre inférieur, soit un latéral gauche ou un lat�ral droit, soit les deux et d'autres combinaisons sont possibles.

Inconv�nients :
- Tous les logiciels ne sont pas capables de lire des pr�sentations FRAMESET.
- L'abus peut r�duire appr�ciablement la taille de l'�cran occupant l'espace de la page principale.
- Les moteurs de recherche n'aiment pas ce procédé (référencement multiple injustifié).
- Et last but not least, le HTML5 n'a pas retenu les balises <frameset>, <frames> et <noframes> dans son répertoire ;o)

Avantages :
- Permet de mettre sous les yeux, soit au haut (ou au bas) de la page, soit lat�ralement la liste des documents qui appara�tront dans le grand cadre.

Une ou deux lignes en plus petit caract�re, occupant 10 -15 % du haut (ou au bas) de l'�cran par exemple, permet d'�tablir de 10 � 12 liens vers la page principale. Cette liste pourrait �tre plus longue en pla�ant le cadre en colonne lat�rale gauche, mais la longueur des mots est un peu limit�e et la largeur de l'�cran est r�duite.

Ceci ne convient pas pour la table des mati�res d'un livre entier , mais pour un chapitre ou un groupe plus limit� de documents.

La balise <FRAMESET> et ses attributs rows et cols

Cette balise se trouve � l'int�rieur de <HTML>, il n'y a pas de <BODY> ni de </BODY>. Elle remplace et �quivaut � BODY dans des documents sans cadres.

Elle contient les balises <FRAME>, qui se trouvent � l'int�rieur de FRAMESET et qui correspondent � un (ou plusieurs) cadres. Elle doit contenir la balise <NOFRAMES> qui contient un document standard avec <BODY> pour �tre utilis� par un navigateur qui ne comprend pas FRAMESET... en existe-t-il encore ? Les navigateurs qui comprennent FRAMESET ignorent la balise NOFRAMES et les navigateurs qui ne comprennent pas FRAMESET affichent le contenu de NOFRAMES, ignorant FRAMESET.

Lorsque des balises ne sont pas reconnues par un navigateur, il les ignore purement et simplement. Notons pour �tre complet que un <FRAMESET> peut se trouver � l'int�rieur d'un autre <FRAMESET>. La balise <FRAMESET> accepte deux attributs : ROWS (= lignes en français) et COLS (pour colonnes).
Un document FRAMESET doit comporter soit ROWS qui indique des s�parations en cadres horizontaux, soit COLS qui indique une s�paration verticale. Toutefois FRAMESET peut comporter les deux attributs: d'abord ROWS (avec son contenu, un cadre sup�rieur �troit et un cadre inf�rieur le plus haut), puis COLS avec son contenu en deux cadres verticaux qui divisent le grand cadre cr�� ci-dessus. . Il y aura alors 3 FRAMEs. Dans ROWS et COLS, on indique le nombre de colonnes, s�par�es par des virgules, soit en pixels, soit en % dont le total ne d�passera pas 100%! Nous retiendrons ici l'expression en %, la plus simple � "manipuler"

Exemple 1 : <frameset rows="20%, 70%,10%">
Ceci donnera trois cadres horizontaux r�partissant l'�cran en trois parties in�gales.

Exemple 2 : <frameset cols="20%, 80%">
Ceci indique deux colonnes verticales.

Exemple 3 : <frameset cols="30,*, 80">
Ceci indique trois colonnes verticales, dont la première et la dernière auront respectivement des largeurs de 30 et 80 pixels, celle du milieu occupant le reste de la largeur de votre écran (variable de 640, 800 ou 1024 pixels... ou plus sur les ordis les plus récents).

Les concepteurs de sites utilisent de moins en moins les cadres, car les moteurs de recherche n'aiment pas et repèrent mal des pages conçues à l'aide de 'frames'.

Notons que, avec la souris, on pourra modifier la largeur des cadres, si on n'a pas introduit de balise qui l'interdit (NORESIZE)

Les balises <FRAME> et attributs SCR et SCROLLING, la balise <NOFRAMES>

Elles se trouvent � l'int�rieur de <FRAMESET>.

Elles d�finissent les propri�t�s et le contenu de chacune des FRAMEs annonc�es par FRAMESET. Elles comportent essentiellement deux attributs : SRC et SCROLLING.

SRC="URL" d�finit l'URL du document qui doit �tre ins�r� dans le FRAME.
exemple : <FRAME SRC="superieur.htm">
SCROLLING="yes" - optionnel - d�finit qu'on peut faire d�filer le contenu du cadre, si le document d�passe le cadre
exemple :<FRAME SRC="superieur.htm" SCROLLING="NO"> .

Par d�faut, il y aura moyen de r�tr�cir ou �largir les cadres avec la souris. Le document qui se place dans le cadre est un document HTML normal, comportant BODY avec ses attributs �ventuels, tels que la couleur.

Notons que tant la balise FRAMESET que la balise FRAME acceptent l'attribut BORDERCOLOR , qui permet de d�finir la couleur du cadre. Si cet attribut se rapporte � FRAME, il se substitue � celui qui aurait �t� attribu� � FRAMESET. La couleur s'exprime de la m�me mani�re que pour BGCOLOR (voir la balise BODY). Un autre attribut permet aux cadres de cr�er une bordure autour d'eux. D'autres caractérisent les marges par rapport � cette bordure ou en fixe la taille.

L'attribut FRAMEBORDER=Valeur* d�termine selon le choix l'affichage d'une bordure en trois-dimensions ou standard.

*Choix
Netscape *Choix
Microsoft Description

Yes 1 Le cadre a une bordure en 3D (valeur par d�faut).

No 0 Le cadre a une bordure standard.

L'attribut BORDER=Valeur en pixel** d�finit la largeur de la bordure pour les cadres.

*Choix Netscape	*Choix Microsoft	Description
Yes	1	Le cadre a une bordure en 3D (valeur par d�faut).
No	0	Le cadre a une bordure standard.

L'attribut BORDERCOLOR="couleur" d�finit une couleur de bordure.

L'attribut MARGINWIDTH=Valeur en pixel d�finit les marges de gauche et de droite des cadres.

L'attribut MARGINHEIGHT=Valeur en pixel d�finit les marges du haut et du bas des cadres.

L'attribut FRAMESPACING=Valeur en pixel d�finit un espace entre les cadres.

L'attribut ALIGN="Type d'alignement" sp�cifie un alignement du cadre dans le document.

L'attribut WIDTH=Valeur en pixel d�finit la largeur du cadre, en pixels.

L'attribut HEIGHT=Valeur en pixel d�finit la hauteur du cadre, en pixels.

L'attribut HSPACE=Valeur en pixel d�finit un espace horizontal.

L'attribut VSPACE=Valeur en pixel d�finit un espace vertical.

** La valeur par d�faut de la bordure est de 5 pixels, 0 rend la bordure invisible.

<HTML>
<HEAD>
<TITLE>une page avec FRAMES</TITLE>
</HEAD>

<FRAMESET ROWS="35%,65%">

<NOFRAMES>
<BODY BGCOLOR="#FFFFFF">
<CENTER><H2>ATTENTION</H2></CENTER>
<P ALIGN="center">
<B>Si vous lisez ce texte, votre navigateur ne permet pas de visionner plusieurs cadres sur votre écran. Vous pouvez cependant utiliser l'alternative
Cliquez sur <A HREF="noframes.html">NOFRAMES</A> pour accéder à une page conçue pour votre navigateur</B>
</BODY>
</NOFRAMES>

voici un autre exemple de l'usage de frames, repris du site : http://www.levif.be/ il y a plusieurs années, mais abandonné actuellement.

        <frameset cols="160,*" frameborder="0" border="0">
          <frame name="left" scrolling="no" noresize target="lobby" src="frame_left.htm">
                <frameset rows="70,*,65"scrolling="no" noresize >
                    <frame name="frame_top" scrolling="no" src="frame_top.htm" target="lobby">
                    <frame name="lobby" src="lobby.htm">
                    <frame name="frame_bottom" scrolling="no" src="frame_bottom.htm">
            </frameset>
          <noframes>
                  <body>
                          <p>&nbsp;</p><p>This page uses frames, but your browser doesn't support them.</p>
                  </body>
          </noframes>
        </frameset>

Le lecteur comprendra que la ligne "this page..." ne s'écrira que si l'ordinateur du lecteur de votre page n'accepte pas les cadres ou frames. La balise <noframes>...</NOFRAMES> est utilis�e pour indiquer le texte que doivent afficher les browsers incapables de g�rer les frames

L'attribut "target"

Pour ceux qui n'ont pas vu la page en question :

une colonne à gauche comprenant des hyperliens définis dans la page "frame_left.htm"
à droite, trois cadres
le premier cadre supérieur a une hauteur de 70 pixels, et contient des hyperliens définis dans la page "frame_top.htm"
le dernier cadre inférieur a une hauteur de 65 pixels, et ne contenait rien sauf une page vide appelée la page "frame_bottom.htm"
le cadre intermédiaire [hauteur de votre écran - (70+65) pixels ] est le cadre appelé "lobby" et comprenant l'information contenue dans la page "lobby.htm"

"Target" signifie "cible" en français... le but de cet argument "target" utilisé dans les deux pages où l'on trouve des hyperliens [à gauche, ou au dessus du cadre de droite], est d'ouvrir dans le cadre nommée "lobby" [c'est-à-dire le plus grand des quatre, où la page "lobby.htm" se trouvait], la page appelée par le lien du cadre "left" ou du cadre "frame_top". Que c'est compliqué... :-((

L'attribut TARGET peut aussi prendre certaines valeurs pr�d�finies :

_blank qui indique au browser qu'il doit cr�er une nouvelle fen�tre afin d'y afficher le fichier. Dans ce cas, vous ouvrez en fait un nouvet onglet ;
_self qui indique que le fichier sera charg� dans la m�me fen�tre que celle dans laquelle se trouve le lien ;
_top qui implique l'affichage du fichier sur toute la surface de la fen�tre du browser.

Souvent utilisé pour avoir un menu fixe à gauche, dans lequel on peut cliquer pour faire apparaître une info différente à droite... En résumé, je clique dans un cadre (frame), le page du cadre cible (target) est modifiée... Déjà plus facile ;-))

Problèmes

Évitez les tags d' Overlapping

Considérez l'exemple suivant écrit en HTML :

    <B>Ceci est un exemple d' <I>overlapping</B> .</I>

Le mot overlapping est contenu entre deux tags <B> et <I>. Les navigateurs (=browsers) peuvent se "mêler les pinceaux" s'ils rencontrent des tags ouvrants et fermants à différents endroits sans que soit respectée une certaine logique... si l'on a ouvert deux portes en suivant, on ne referme pas la première sans avoir fermé la seconde...

N'essayez pas de vérifier si votre browser accepte... essayez plutôt de respecter une logique d'écriture... travaillez par paires de tags, évitez les imbrications (simples, mais surtout multiples), rien de pire que l' "overlapping" ... tout cela vous fera gagner du temps à l'écriture, et évitera aux différents browsers de s'y perdre. Merci pour eux et pour vos futurs lecteurs.

Imbrications: Ancres et Tags de formattage

Les protocoles HTML permettent le plus souvent d'imbriquer des tags (placer un couple de tags (entrant/fermant) à l'intérieur d'un autre couple de tags (entrant/fermant) : HTML protocol allows you to embed links within other HTML tags:

    <H1><A HREF="Destination.html">Mon titre</A></H1>

Évitez d'employer des tags imbriqués à l'intérieur d'une ancre (évitez donc l'exemple ci-après) :

    <A HREF="Destination.html">
    <H1>Mon titre</H1>
    </A>

Bien que la plupart des browsers acceptent cette (dernière) imbrication, les normes HTML demandent de ne placer aucun couple de tags à l'intérieur des ancres [entre le tag ouvrant <A HREF="Destination.html"> et le tag fermant </A>]
On parle même de rejet de ces formules dans les browsers futurs... ne tentez plus le diable, et songez qu'il faut pardonner aux navigateurs qui interprètent mal cette imbrication à l'intérieur des ancres (et aux navigateurs futurs qui refuseront de vous comprendre).

En cas de doute, consultez votre code HTML et vérifiez s'il est conforme aux normes spécifiées (voir Pour plus d' Information plus loin).

Certains tags de caractères modifient l'apparence du texte qui figure entre eux, ainsi :

    <UL>
    <LI><B>Un élément de liste en caractère gras</B>
    <LI><I>Un élément de liste en caractère italique</I>
    </UL>

Évitez cependant d'employer d'autres tags que les tags de caractères ; ainsi, évitez la temptation d'écrire le code suivant (faisant usage de tags de titre pour modifier la grandeur des caractères) :

    <UL>
    <LI><H1>Un titre en grands caractères</H1>
    <LI><H2>Un autre en caractères un peu plus petits</H2>
    </UL>

Bien que certains browsers gèrent ce genre d'écriture très correctement, le résultat est parfois surprenant sur d'autres navigateurs, parce que ce style d'écriture ne correspond à aucune norme. Évitez dès lors ce genre d'écriture et gardez un style compatible avec les normes.

Ainsi, les tags <FONT> , qui sont propres à Netscape (et donc, Communicator), sont souvent employés mais ignorés des autres navigateurs qui ne respectent que les spécifications HTML officielles.

Quelle différence existe-t-il entre l'imbrication d'un tag <B> à l'intérieur d'un tag <LI> et l'imbrication d'un tag <H1> à l'intérieur d'un tag <LI> ?
Aucune apparemment... sauf que sémantiquement le tag <H1> signifie qu'on devrait y trouver un titre principal (et pas du texte mis en évidence par ce format-là), et que devrait suivre un contenu. Il semble donc évident que l'usage du tag <H1> dans une liste est abhérent...

Les tags de formattage ne sont pas toujours cumulatifs. Ainsi, en écrivant ce qui suit :

    <B><I>du texte</I></B>

vous pourriez vous attendre (logiquement) que cela produirait un texte écrit en gras et italique. Certains navigateurs le feront ; d'autres ne prendront en charge que le couple de tags le plus interne (italique, dans ce cas).

Vos derniers pas : Vérifiez votre Code

Avant de "déposer" une page Web sur votre serveur, assurez vous de l'exactitude de chacun de vos tags, de chacun de vos liens, en particulier des "ancres nommées".
Peut-être pouvez-vous demander à un "spécialiste" si votre code est correct.

Il existe des services de validation de codes qui vous diront si votre code HTML répond aux normes généralement acceptées.
Si vous n'êtes pas sûr de votre code, essayer ces vérifications peut être très utile pour améliorer votre style et votre connaissance du langage HTML.

Pour votre bonheur (espérons-le), ces services vous permettent de choisir le niveau de conformité exigé ou souhaité.
Ce choix vous laisse la lattitude d'écrire du code non conforme, mais qui peut produire des effets intéressants... mais dont le style est peu recommendable.

Images inexistantes

Lorsqu'un tag <IMG SRC> a pour lien une image non trouvée à l'adresse indiquée, votre browser l'ignore généralement, ou bien il affiche une "image bidon". Si cela vous arrivait, vérifiez votre code, vérifiez l'existence de l'image dans le répertoire, vérifiez l'exactitude de l'adresse mentionnée et vérifiez si votre fichier image peut être vue par le monde entier (propriétés de l'image). Si tout est correct, vérifiez si l'image peut être vue "online"... et bonne M... .

Mettez vos fichiers à jour

Si le contenu d'un fichier est destiné à ne pas être modifié (la vie de Jésus-Christ par exemple), peu de changements devront [probablement] être apportés à votre fichier. Certains documents sont cependant beaucoup plus sensibles au vieillissement (le nombre d'étudiants ayant réussi à la dernière session).
N'oubliez donc pas de remettre vos pages RÉGULIÈREMENT à jour !

Une mise à jour régulière est particulièrement importante s'il s'agit de calendrier hebdomadaire, convocations à des réunions, dernières mises-à-jour de statistiques, etc.
Retirez donc vos fichiers "dépassés" et, si vous en gardez une copie chez votre serveur, justifiez cette présence (p.ex.: le programme d'une formation qui a déjà eu lieu, mais qui sera probablement reprise lors du prochain programme de formation).

Browsers à réaction différente

Tous les browsers ne réagissent pas de la même façon au langage HTML (et donc aux fichiers HTM). Retenez que certaines différences apparaissent d'après le browser (=navigateur) utilisé ; tantôt les tags (=balises) sont ignorés, tantôt ils sont interprétés différemment.

Vous pourriez passer (et même perdre) beaucoup de temps pour que vos fichiers paraissent quasi parfaits sur votre navigateur actuel. Si vous employez un autre ordinateur (avec des préférences différentes) ou, encore plus, si vous changez de navigateur (ex: IE4 à Communicator 5.00), vos fichiers pourraient avoir une tout autre allure.
D'où ce petit conseil :

employez du code HTML correct ;
laissez les navigateurs des autres faire leur travail ;
vivez d'espoir pour le reste.

Commenter ses fichiers

Comme dans tout programme, il peut être plus que souhaitable de commenter ses fichiers. Les commentaires sont du texte qui n'apparaîtra pas à l'écran de celui qui vous lit, mais qui pourrait vous aider lorsque vous reprendrez votre fichier "en mains". ... à moins que quelqu'un d'autre ne le fasse (merci pour l'aide des commentaires). La mémoire est la faculté qui oublie...

Un usage classique des commentaires est :

de noter la date d'un changement, l'auteur du changement et son but ;
de faire dispara�tre une info qui doit r�appara�tre � intervalles de temps r�guliers.

Pour insérer un commentaire, il faut écrire :

    <!-- vos commentaires utiles, par exemple : paragraphe suivant à modifier selon nouvelles données -->

Remarquez que plusieurs lignes peuvent s�parer le d�but des commentaires 
<!--
     de
     la fin 
     des m�mes
     commentaires...
 -->

N'oubliez pas le point d'exclamation, ni les traits d'union, comme indiqués ci-dessus.
Généralement, ce qui est entre les balises de commentaires n'est pas lu par votre navigateur (ou browser), sauf exceptions dont anciennement le langage javascript, routines VBscript et autres....

précédent (02)

| menu (00)

| suite (04)