2.1Les frames :

Depuis leur apparition dans la version 4.0 d'HTML, les frames (cadres) sont une source de débat intarissable. En effet, mal utilisées, elles deviennent gênantes pour le visiteur. Pour ne pas rejoindre les webmasters qui ne maîtrisent pas ce sujet ou qui utilisent les frames à tort et à travers, suivez-nous dans cet atelier fort instructif.

2.1.1 Les frames, qu'est-ce que c'est ?

Les frames, vous en avez sûrement entendu parler, mais qu'est-ce que c'est exactement ?

Il s'agit d'une technique qui permet d'afficher plusieurs pages distinctes dans une seule fenêtre de navigateur. Grâce à cet "assemblage", vous pouvez conserver certaines informations dans une partie du navigateur et naviguer librement dans une autre zone. L'utilisation la plus fréquente des frames consiste à placer une barre de navigation ou un menu dans une frame fixe (en haut ou sur le côté gauche en général) et d'afficher le contenu du site sur le reste de la page.

L'utilisation des frames doit être la plus transparente possible, quand elle n'est pas optionnelle. En effet, il faut savoir que certains navigateurs ne supportent pas les frames et que certains utilisateurs ne les aiment pas, tout simplement

2.1.2 Le fichier frameset :

Passons aux choses sérieuses. Les frames reposent sur un seul fichier qui détermine l'affichage des différentes pages.

Un exemple simple :

<FRAMESET COLS="20%,80%">

Deux frames verticales sont définies ici dans la balise <FRAMESET>

La première est une colonne qui occupe 20% de la fenêtre du navigateur, la seconde s'étale sur l'espace qui reste à droite (soit les 80% de la fenêtre).

La balise <FRAMSET> prend deux attributs pour la définition des frames :

• COLS, pour des frames verticales.
• ROW, pour des frames horizontales.

Dans les deux cas, les tailles des frames sont passées en paramètres et séparées par une virgule. Cette taille peut être donnée soit en nombre de pixels, soit en pourcentage (comme ici).

Occuper le reste de la fenêtre On peut utiliser le caractère * pour indiquer que la frame correspondante occupe toute la place laissée libre par la première.

2.1.3 La balise <FRAME> :

Nous venons de le voir, la balise <FRAMESET> sert à définir l'occupation des frames sur la page. Maintenant, comment définir les pages qui doivent être affichées dans ces frames ? Reprenons le même exemple :

Les deux balises <FRAME> désignent les fichiers HTML que le navigateur doit afficher dans nos deux colonnes. Cette balise possède deux attributs incontournables :

• SRC, qui indique le nom du fichier HTML à afficher dans le cadre.
• NAME, qui donne un nom à ce cadre. Ce nom est surtout utilisé lors de la création de liens.

Combien de frames ?

Le nombre de balises <FRAME> n'est pas limité, mais on évite en général d'en utiliser plus de trois.

2.1.4 Frames imbriquées :

Rien n'empêche une frame d'être composée d'autres frames. Il suffit pour cela d'imbriquer les <FRAMESET>

• Une, verticale, à gauche de l'écran, contient le fichier menu.html et mesure 100 pixels de large.
• Une autre, en haut de l'écran, contient le fichier banniere.html et occupe 20% de la hauteur du navigateur.
• Une troisième occupe le reste de l'espace dans le navigateur (* pour la largeur, 80% pour la hauteur) et contient le fichier main.html.

CONSEIL : Compatibilité Nous avons introduit dans cet exemple la balise <NOFRAMES>. C'est elle qui contient le code destiné aux navigateurs ne supportant pas les frames.

2.1.5 Liens et cibles dans une frame :

Maintenant que vous avez défini les frames de votre site, il faut créer des liens entre elles.

Par défaut, quand on active un lien, la page de destination s'ouvre dans la frame courante, c'est-à-dire celle qui contenait le lien.

Si vous avez défini une frame contenant le menu de votre site et vous contentez de liens classiques, les différentes pages de votre site s'afficheront en lieu et place du menu, pas dans votre page principale.

Pour définir dans quelle frame afficher votre page, utilisez l'attribut TARGET de la balise <A> et donnez-lui comme valeur le nom de la frame de destination (attribut NAME de l a balise FRAME)

Par exemple, si vous définissez ce lien sur la page menu.html :

<A HREF="mapage1.html" TARGET="principal">Premiere page

le fichier mapage1.html s'affichera dans la frame principale du site. Mais la page menu.html restera toujours visible dans la frame de gauche.

Outre les noms de frames, l'attribut TARGET peut prendre plusieurs autres valeurs :

• _blank, pour définir un lien vers une nouvelle fenêtre de navigateur.
• _self, qui correspond à la valeur par défaut. Elle définit donc un lien à l'intérieur de la même frame.
• _parent, pour indiquer que la page doit s'ouvrir en occupant tout le frameset de la frame courante. ·
• _top, pour permettre à la nouvelle page d'occuper l'intégralité de la fenêtre du navigateur, supprimant ainsi tout frameset.

Conseil Lien vers l'extérieur :

N'hésitez pas à utiliser ces valeurs. Par exemple, pour un lien externe, on appréciera qu'il s'ouvre dans un nouveau navigateur pour pouvoir continuer à naviguer dans votre site.

2.1.6 Décorations :

La balise <FRAME> dispose de quelques attributs qui permettent de modifier son apparence :

• NORESIZE, qui empêche le visiteur de redimensionner la frame.
• SCROLLING, qui indique si la frame possède une barre de scrolling (ascenseur). Il peut prendre comme valeur auto (par défaut), yes ou no. Dans le cas de auto, l'ascenseur est affiché en cas de besoin uniquement.
• FRAMEBORDER, qui affiche une bordure de séparation entre les frames si la valeur vaut 1.
• MARGINWIDTH et MARGINHEIGHT, qui spécifient les marges horizontale et verticale de la frame.

Ces marges correspondent au nombre de pixels entre le bord de la frame et son contenu.

2.1.7 Toutes les balises et leurs attributs :

• <FRAMESET> Définit un nouvel ensemble de cadres horizontaux ou verticaux.
• ROWS Indique les tailles des frames horizontales.
• COLS Indique les tailles des frames verticales.
• <FRAME> définit un nouveau cadre
• ROWS Indique les tailles des frames horizontales. COLS Indique les tailles des frames verticales.
• NORESIZE Empêche l'utilisateur de redimensionner le cadre
• SCROLLING Indique s'il faut afficher un ascenseur (auto, yes ou no).
• FRAMEBORDER Indique s'il faut afficher une bordure (0 ou 1).
• MARGINWIDTH Indique la taille de la marge horizontale dans le cadre.
• MARGINHEIGHT Indique la taille de la marge verticale dans le cadre.
• <NOFRAMES>Définit le code à interpréter si le navigateur ne supporte pas les frames.

html avancé 2.2

2.2.1 LES FORMULAIRES :

Un formulaire, c'est, à priori, le meilleur moyen de demander des renseignements précis à vos visiteurs. Mais savez-vous concevoir des formulaires efficaces, en utilisant toutes les nuances de ce formidable outil ? Pas sûr. Alors suivez le guide !

• Définition
• Les boutons
• Les zones de texte
• Cases à cocher et boutons radio
• Liste de sélections
• Les balises et leurs attributs

2.2.2 Définition :

Un formulaire est une zone de page Web destinée à recevoir des informations de la part des visiteurs. Une fois ces données saisies, l'utilisateur clique sur un bouton du formulaire pour les valider et les envoyer au propriétaire du site.

Un exemple de déclaration de formulaire :

<FORM method=GET action="/cgi-bin/mailer">

[Champs du formulaire]

</FORM>

Comme pour beaucoup d'éléments en HTML, les formulaires sont délimités tout d'abord par une balise générique : <FORM> </FORM> C'est entre ces deux balises que doit être placé l'ensemble des éléments du formulaire.

La balise <FORM> dispose de deux attributs principaux :

• ACTION, qui contient l'URL du script à exécuter lors de l'envoi des données du formulaire. Cette URL peut être spécifiée en relatif ou en absolu.
• METHOD, qui peut recevoir les valeurs GET ou POST.

Cet attribut indique comment les données du formulaire seront transmises au serveur. Le choix de cette méthode dépend du script utilisé et des informations à transmettre.

A l'intérieur d'un formulaire, on peut entrer différents types de champs. Tous servent à recevoir les informations de vos visiteurs. Ils se divisent en quatre groupes :

• Les boutons (balise <BUTTON>).
• Les champs de saisie, les cases à cocher et les boutons radio (balise INPUT )
• Les listes de sélections (balise <SELECT> ).
• Les zones de texte (balise <TEXTAREA> ).

Toutes ces balises possèdent un attribut NAME qui permet d'identifier les données saisies par l'utilisateur une fois reçues par le serveur.

Elles possèdent également un attribut TYPE qui permet de différencier les déclinaisons de chaque champ.

2.2.3 Les boutons :

Les boutons sont sans aucun doute les éléments des formulaires les plus simples à utiliser.

Voyons tout de suite comment ils fonctionnent :

<BUTTON name="submit" type="submit"> OK </BUTTON>

<BUTTON name="reset" type="reset"><IMG SRC="mon-image.jpg"></BUTTON>

Entre les balises<BUTTON> et </BUTTON>, on place le texte et les images à afficher à l'intérieur du bouton. La taille du bouton s'adapte automatiquement à son contenu.

La balise <BUTTON> dispose d'un attribut TYPE qui indique l'action associée au bouton. Cet attribut peut prendre les valeurs suivantes :

• · submit : valide le formulaire et exécute l'action définie dans l'attribut ACTION de la balise <FORM>
• · reset : réinitialise tous les contrôles du formulaire à leur valeur par défaut.
• · button : aucune action précise n'est associée au bouton.

A l'aide de l'attribut onClick, le bouton peut alors faire appel à une fonction JavaScript précise.

2.2.4 Les zones de texte :

Les zones de texte peuvent être utiles pour saisir les remarques de vos visiteurs ou pour enregistrer leur adresse mail et les abonner à votre liste de diffusion. Deux balises définissent les champs texte.

Exemple :

login : <INPUT TYPE> "texte" NAME="login" SIZE="20"><BR>

Password : <INPUT TYPE="password" NAME="pass" SIZE="20">

Votre commentaire <BR>

<TEXTAREA NAME="commentaire" ROWS="20" COLS="80">

Saisissez votre commentaire ici

</TEXTAREA>

Ici, on utilise les trois types de champs texte disponibles en HTML :

• La balise <INPUT TYPE="text"> permet de définir des zones de saisie sur une seule ligne. Ce type de champ peut recevoir deux attributs supplémentaires : - VALUE, pour donner une valeur par défaut à la zone de saisie. Ce texte apparaîtra dès le chargement de la page. - SIZE, pour définir la taille en caractères du champ de saisie.
• La balise <INPUT TYPE="password"> définit une zone de saisie de mot de passe. Lors de la saisie d'un mot de passe, ce champ affiche uniquement des caractères *. Confidentialité assurée. Ce type de champ possède les mêmes attributs que le précédent.
• La balise <TEXT AREA> crée une zone de saisie sur plusieurs lignes.

Les attributs ROWS et COLS précisent le nombre de lignes et de colonnes de la zone. Le texte placé entre la balise d'ouverture et de fermeture du champ est affiché dans la zone de texte. Un ascenseur s'affiche automatiquement si le texte saisi est plus long que la zone.

2.2.5 Cases à cocher et boutons radio :

Pour que le visiteur ait le choix entre plusieurs réponses, proposez-lui cases à cocher et boutons radio.

Cases à cocher

Les cases à cocher se présentent sous la forme de "trous" carrés qui s'ornent d'une croix lors de leur validation. Le visiteur peut en cocher plusieurs.

Exemple :

Vous utilisez Internet <BR>

<INPUT TYPE="checkbox" NAME="internet" VALUE="maison">chez vous
<INPUT TYPE="checkbox" NAME="internet" VALUE="travail">au travail
Ces cases sont définies par la balise <INPUT TYPE="checkbox"> qui possède deux attributs :

• VALUE, qui représente la réponse fournie par le visiteur. C'est cet attribut que vous devez tester lors de la vérification de réponses du formulaire.
• CHECKED, qui permet de cocher la case par défaut.

CONSEIL :

Troupeau de boutons

Toutes les balises d'une même question doivent avoir la même valeur pour l'attribut NAME (qui représente la question) et des valeurs différentes pour l'attribut VALUE (qui représente une réponse en particulier).

Boutons d'option

Contrairement aux cases à cocher, les boutons d'option permettent à l'utilisateur de faire un choix unique entre plusieurs propositions.

Exemple :

<INPUT TYPE="radio" NAME="age" VALUE="18-25"> 18 - 25 ans
< INPUT TYPE="radio" NAME="age" VALUE="26-35"> 26 - 35 ans
<INPUT TYPE="radio" NAME="age" VALUE="26-35"> 36 - 45 ans

Les boutons d'option se définissent donc grâce à la balise <INPUT TYPE="RADIO"> et possèdent les mêmes attributs que les cases à cocher.

2.2.6 Liste de sélections :

Le dernier type de champ disponible dans les formulaires HTML est la liste de sélections dans laquelle l'utilisateur doit faire un choix. Elle se définit grâce à la balise <SELECT>

Exemple :

<SELECT NAME="departement">

<OPTION VALUE="01">Ain

<OPTION VALUE="02">Aisne

<OPTION VALUE="03">Allier

<OPTION VALUE="04">Alpes de Haute Provence

etc.......

</SELECT>

Chaque choix de la liste est défini par une balise <OPTION> distincte. La valeur retournée par ce champ est celle de l'attribut VALUE de l'option sélectionnée. Si la balise n'en possède pas, c'est le texte de l'option lui-même qui est retourné.

L'attribut SIZE de la balise <SELECT> > indique le nombre d'options visibles en permanence dans la liste. Si ce nombre est inférieur au nombre d'éléments de la liste, un ascenseur est affiché automatiquement sur la droite. Si l'attribut SIZE n'est pas spécifié, la liste est présentée sous forme de liste déroulante.

2.2.7 Les balises et leurs attributs :

Toutes ces balises, tous ces attributs, ça fait beaucoup de choses à retenir... Voici un tableau récapitulatif :

CAHIER HTLM