Trackin
html009
Les cours HTML1. Structure d'un document HTML
2. Le traitement du texte
3. Listes d'élément
4. Les liens hypertextes
5. Les images
6. Attributs de présentation
7. Les tableaux
8. Les frames
9. Concept avancé
Les images animées
Les images animées qui agrémentent les pages Web sont des images GIF, composées un peu comme les dessins animés, par des logiciels conçus à cet effet. A utiliser avec modération ! En effet un gif animé est composé de plusieurs images, son poids est donc plus important.
Des Gifs animées sont disponibles sur le Web. Vous pouvez aussi en créer vous-même assez facilement grâce à de petits programmes comme Microsoft Gif Animator, Gif Construction Set, Cel Assembler ou Animation Shop de Paint Shop Pro 5...
Les images cliquables
Ce sont des images dont différentes zones, dites "chaudes" ou "actives", agissent comme des liens hypertextes. Chaque zone renvoit vers un fichier différent.
Note : pour réaliser des image-maps, votre logiciel de retouche d'image doit vous fournir les coordonnées en x et y des zones que vous voulez définir. Notez ces coordonnées avant de passer sous l'éditeur de texte.
1- Déclarer une image en image-map
En fait, déclarer une image comme utilisant un map est des plus simple : il suffit d'ajouter l'attribut usemap="#nomMap" dans la balise <IMG>. Le nom donné au map est libre, mais n'oubliez pas le signe dièse (#) qui le précède (c'est le même principe que pour les ancres)
Voici un exemple :
Le nom de notre map est donc "vacances". Le navigateur va donc chercher à l'intérieur du fichier en cours de lecture la définition du map "vacances". Nous aurions pu placer cette définition de map dans un autre fichier, voire un autre répertoire. Notre attribut deviendrait : usemap="../repertoire2/fichierZ.html#vacances"
Il nous suffit en fait d'indiquer au navigateur le chemin pour trouver le map en question.
La plupart du temps, on définit le map juste après l'implémentation de l'image-map, ou à la fin du fichier contenant l'image-map. Mais si vous avez beaucoup d'image-maps sur votre site, il peut être intéressant de rassembler les définitions de maps dans un fichier HTML externe.
2- Définir le map
Il vous faut un moyen d'obtenir les coordonnées en x et y pour les différentes zones que vous voulez définir. La plupart des logiciels de graphisme ont aujourd'hui cette option.
Voici un exemple de définition de map :
<AREA shape="rect" coords="3, 3, 30, 30" HREF="fichier1.html">
<AREA shape="rect" coords="267, 267, 297, 297" HREF="fichier2.html">
</MAP>
C'est un exemple simple. Seulement deux zones actives : la première en haut à gauche renvoit vers "fichier1.html"; la seconde en bas à droite renvoit vers "fichier2.html". Le reste de l'image est inactif.
La balise <AREA> définit une nouvelle zone active. Son attribut HREF="..." indique le fichier visé par cette zone hypertexte.
Il est possible de définir différentes formes de zones actives :
| rectangulaire : shape="rect" | on définit alors les coordonnées du point en haut à gauche en x puis en y, puis le point en bas à droite en x puis en y. Ce qui donne : coords="x1, y1, x2, y2" |
| cercle : shape="circle" | on définit le centre du cercle puis le rayon en pixels. On obtient donc : coords="x1, y1, rayon" |
| polygone : shape="polygon" | on définit les coordonnées en x et y pour chaque point du polygone (comme pour le rectangle, mais il y a plus de points). |
3- Et si le navigateur ne comprend pas les images-maps?
Si le navigateur de votre visiteur ne comprend pas les image-maps, il interprétera l'image entière ... comme une image!
Pour remédier à cela, vous pouvez fournir un fichier alternatif contenant tous les liens (sous forme de texte, par exemple) :
4- Exemple :
Les balises seront :
- pour les zones cliquables :
<Image><AREA SHAPE=RECT COORDS="X1,Y1,X2,Y2" HREF="URL">
<Image>...
</MAP>
Les balises META
Nous avons été très rapide lors de l'étude de la balise <HEAD>. En plus de l'élément <TITLE> (Titre), l'en-tête de votre page contient bien d'autres informations importantes qui intéressent le navigateur.
Le tag META sera particulièrement utile pour faire reconnaître votre page par les robots de recherche du genre AltaVista.
Voici quelques balises régulièrement rencontrées.
| <META HTTP-EQUIV="refresh" CONTENT="5 http://fichier_a_charger"> | cette balise permet de charger automatiquement un deuxième fichier ("fichier_a_charger"> au bout de 5 secondes. |
| <META TYPE="author" CONTENT="fra.so"> | Indique que l'auteur de la page est fra.so |
| <META TYPE="keywords" CONTENT="art, html, ..."> | Indique une liste de mots-clés correspondant au contenu de la page (éviter les accents). Ces mots-clés sont susceptibles d'être les critères entrés dans un moteur de recherche. |
| <META TYPE="lang" CONTENT="fr, en, us-en, span"> | Indique la ou les langues accessibles sur le site. |
| <META TYPE="description" CONTENT="breve description par des phrases du contenu du site"> | Petite description du contenu du site. |
Il existe beaucoup d'autres balises META. En demandant l'affichage des sources des documents que vous consultez, vous en rencontrerez sûrement. Si vous comprenez l'anglais, leur sens est souvent évident.
Les formulaires
Avec les formulaires, le langage Html vous ouvre la porte de l'interactivité. Votre interlocuteur pourra remplir un champ de saisie de texte ou d'autres objets interactifs comme des cases à cocher. Ces données seront transmises à une application sur le serveur qui les traitera.
1- Définition d'un formulaire
Avant de pouvoir utiliser les différentes sortes de formulaires (ligne de texte, liste déroulante, cases à cocher...), il faut déclarer au browser qu'il devra gérer des formulaires et ce qu'il devra en faire.
... les formulaires proprement dit ...
</FORM>
b) Commentaires
L'attribut "method" vous offre le choix entre get et post. La différence entre ces deux méthodes repose sur la façon dont les données seront transmises au serveur et exploitées par celui-ci. Avec le temps, la méthode post s'est imposée car elle apparaît plus efficace et permet le traitement d'une quantité plus importante de données.
L'attribut "action" spécifie l'adresse d'expédition des données.
Dans le cas d'un traitement des données par une CGI, on spécifie le répertoire CGI du serveur et le nom de la CGI :
L'attribut "enctype" (optionnel) spécifie l'encodage utilisé pour le contenu du formulaire. Ce paramètre ne peut être utilisé qu'accompagné par la méthode post.
Ainsi enctype="text/plain" encode le contenu du formulaire en format texte lisible par le destinataire
Il n'est pas inutile de prévoir l'attribut name="nom" si la page comporte plusieurs formulaires ou des JavaScripts.
Attention !!! Ne pas oublier la balise de fin </FORM>. Dans ce cas, à la visualisation dans le navigateur, rien ne sera affiché.
Dans le cas de l'utilisation en interne des formulaires par du Javascript, les attributs method, action et enctype sont inutiles car on ne fait pas appel au serveur.
2- Ligne de texte
INPUT type="text" indique un champ de saisie d'une seule ligne.
<INPUT type="text" name="nom" size="50">
</FORM>
L'attribut name="nom du formulaire" est quasiment obligatoire. Le nom va identifier la chaîne de caractères du champ de saisie. De façon schématique, nom = (ce qui est introduit dans la ligne de texte).
L'attribut size (optionnel) définit la longueur du champ de saisie. Notons que l'on peut introduire un nombre de caractères plus élevé que celui de la longueur.
Il existe l'attribut maxlength="x" (optionnel) qui limite le nombre réel de caractères que l'on peut introduire dans le champ de saisie.
La balise <INPUT> n'a pas de balise de fin.
3- Zone de saisie
La balise <TEXTAREA>...</TEXTAREA> introduit une zone de texte multilignes. La syntaxe est :
<TEXTAREA name="nom" rows=4 cols=40>Valeur par défaut</TEXTAREA>
</FORM>
L'attribut name permet de donner un nom au formulaire.
L'attribut rows=x détermine le nombre de lignes de la zone de texte.
L'attribut cols=y détermine le nombre de caractères visibles sur chaque ligne ou si vous préférez le nombre de colonnes.
L'attribut wrap (optionnel) détermine la façon dont les sauts de ligne seront traités lors d'un changement de ligne.
Avec wrap=virtual, les changements de lignes sont effectués automatiquement dans la zone de texte mais le tout sera transmis en une seule ligne.
Avec wrap=physical, les changements de lignes sont effectués automatiquement dans la zone de texte et ceux-ci sont également transmis.
Avec wrap=off, il n'y a aucun changement de ligne.
Attention !!! La balise <TEXTAREA> a une balise de fin, soit </TEXTAREA>.
4- Liste déroulante
La balise <SELECT></SELECT> indique au browser l'usage d'une liste déroulante. Les éléments de la liste sont introduits par la balise <OPTION> ... (</OPTION> facultatif).
<SELECT name="nom" size="1">
<OPTION Value="Lundi">lundi
<OPTION Value="Mardi">mardi
<OPTION Value="Mercredi">mercredi
<OPTION Value="Jeudi">jeudi
<OPTION Value="Vendredi">vendredi
</SELECT>
</FORM>
Si vous cliquez sur la petite flèche vers le bas, vous obtiendrez la liste déroulante où on retrouve les éléments de la liste (<OPTION>).
L'attribut name="nom" définit le nom du formulaire.
L'attribut size="x" détermine le nombre d'éléments de liste affiché dans la boite d'entrée. En fait, size="1" est optionnel car "1" est la valeur par défaut. Le même exemple avec size="3" donne :
On peut présélectionner l'élément affiché dans la boite d'entrée (par défaut, le premier élément de la liste sera retenu). On utilise pour ce faire l'attribut selected de la balise <OPTION>.
La balise <SELECT> a une balise de fin </SELECT> tandis que la balise de fin </OPTION> est facultative.
5- Bouton d'option
Les boutons d'option, aussi appelés boutons radio, ont comme particularité qu'une seule option à la fois peut être activée (le "ou" exclusif).
La syntaxe de base est :
<INPUT type="radio" name="nom du groupe" value="valeur du bouton">
</FORM>
Exemple :
<INPUT type= "radio" name="ville" value="Paris"> Paris
<INPUT type= "radio" name="ville" value="Londres "> Londres
<INPUT type= "radio" name="ville" value="NY "> NY
</FORM>
Paris Londres NY
Vous avez compris que l'attribut name="nom" doit avoir le même nom pour tout le groupe de boutons d'option.
L'attribut "checked" (optionnel) permet de présélectionner un bouton radio. Ainsi :
présenterait le bouton radio "tarif de jour" en position présélectionnée.
Le contenu de l'attribut "value" du bouton retenu sera utilisé par le Javascript.
La balise <INPUT> n'a pas de balise de fin.
6- Case à cocher
La philosophie des cases à cocher [checkbox] est assez similaire aux boites d'option. Ici, cependant, plusieurs choix simultanés peuvent être réalisés.
La syntaxe de base est :
<INPUT type="checkbox" name="nom" value="valeur attachée au bouton">
</FORM>
Comme exemple :
<INPUT type="checkbox" name="choix1" value="1"> Toto
<INPUT type="checkbox" name="choix2" value="2"> Titi
<INPUT type="checkbox" name="choix3" value="3"> Tata
<INPUT type="checkbox" name="choix4" value="4"> Tete
</FORM>
Toto Titi Tata Tete
Les règles pour l'attribut name="nom" sont moins précises que pour les boutons d'option. Vous pouvez employer des noms identiques ou des noms différents pour chaque case à cocher. Cependant des noms différents sont nécessaires pour l'utilisation d'un script.
présenterait la case à cocher "Tete" en position présélectionnée.
Le contenu de l'attribut "value" du ou des boutons retenus seront utilisés par le Javascript.
La balise <INPUT> n'a pas de balise de fin.
7- Bouton de commande
Le bouton de commande sert à placer un bouton, auquel on assignera plus tard une tâche particulière.
<INPUT type="button" name="nom" value="texte du bouton">
</FORM>
L'attribut "value" permet d'adapter le texte du bouton à vos souhaits.
8- Bouton "Submit"
Le bouton Submit a la tâche spécifique de transmettre toutes les informations contenues dans le formulaire à l'URL désignée dans les attributs ACTION et METHOD du tag <FORM>.
La syntaxe Html est :
<INPUT TYPE="submit" NAME="nom" VALUE="texte du bouton">
</FORM>
Soit par exemple :
<INPUT TYPE="submit" NAME="nom" VALUE="Envoyer">
</FORM>
Les modifications seront peu nombreuses car le bouton Submit a une fonction Html très spécifique.
Seul le texte du bouton pourra être modifié (par défaut Submit).
La balise <INPUT> n'a pas de balise de fin.
9- Bouton "Reset"
Le bouton Reset permet d'annuler les modifications apportées aux contrôles d'un formulaire et de restaurer les valeurs par défaut.
La syntaxe Html est :
<INPUT TYPE="reset" NAME="nom" VALUE="texte du bouton">
</FORM>
Soit par exemple :
<INPUT TYPE="reset" NAME="nom" VALUE="Annuler">
</FORM>
Les modifications seront peu nombreuses car le bouton Reset a une fonction Html très spécifique. Seul le texte du bouton pourra être modifié (par défaut Reset).
La balise <INPUT> n'a pas de balise de fin.
Le TYPE="image" permet de remplacer le bouton submit par une image.
Exemple :
<INPUT TYPE="image" NAME="nom" SRC="source_de_l_image">
</FORM>
Meilleurs partenaires Trackin VIP
