INSERTION ET NAVIGATION

Image

L'intégration d'images ou de photos se fait par le tag <img>

<img>

Le nombre est en pixel

Important :

L'insertion d'image comportent plusieurs conditions :

• le format d'enregistrement de l'image doit être en .GIF ou .JPG (en GIF l'image est enregistré en 256 couleurs maximum et en JPG 65536 couleurs maximum compressé).
• moins l'image est lourde (quelques Kilo octets) plus la navigation est rapide
• il est conseillé de mettre les attributs height et width définissant la taille de l'image pour que la navigation soit plus aisée.

Navigation

La navigation sur Internet se fait, comme vous le savez déjà, au travers de liens hypertextes ou en cliquant sur une image.
Un lien est un élément cliquable qui permet une action spécifique (en général, d'aller vers un autre document).

Tout d'abord un liens hypertexte se présentent sous plusieurs formes :

• il s'agit un ou plusieurs mots
• il est toujours souligné
• il a une couleur différente du texte

Il existe, tout de même, un ou des liens au travers d'images, dans ce cas l'image est entouré d'un trait dont l'épaisseur est paramétrable (voir plus haut).

Le but d'un lien est de renvoyer l'utilisateur :

• vers un autre document local ou distant : lien standard
• vers le même document mais à un autre endroit : les ancres
• vers un autre document local ou distant à travers une image :carte cliquable

<a>

Lien standard

Href est l'attribut le plus important et utilisé du tag
Il permet de renvoyer vers :

• un doc html local ou distant
• le logiciel de composition de mail où votre adresse est automatiquement inséré
• un serveur FTP, telnet et usenet

Renvoie vers un doc html local

On clique dessus pour passer d'une page à une autre sur le site que vous avez créé :

<a href="doc.htm">renvoie vers la page suivante</a>

Renvoie vers un site html distant

On clique dessus pour passer d'une page de votre site vers une autre page d'un autre site :

<a href="http://www.serveur.fr/doc.htm">renvoie une page distante</a>

Renvoie vers un service mail

En cliquant dessus l'utilisateur ouvre son logiciel de composition de mail avec votre propre adresse mail inscrit :

<a href="mailto:votre adresse e-mail">envoie de mail</a>

Renvoie vers un serveur FTP, Telnet et Usenet

L'utilisateur pourra téléchargé (FTP), avoir accés à un serveur Telnet ou à un forum de discussion (Usenet)

FTP : <a href="adresse ftp">téléchargement</a> (ftp à la place de http)
Telnet : <a href="adresse telnet">accés à un serveur Telnet</a>
Usenet : <a href="news:adresse du groupe de discussion>news</a>

note : pour FTP et Telnet, il se peut qu'une authentification soit demandé, il faut donc écrire nom@adresse, ainsi qu'un mot de passe, dans ce cas nom:mot de passe@adresse.

Target

Cet attribut est surtout utilisé pour les frames - voir plus loin - mais il permet aussi d'ouvrir une seconde fenétre lorsque l'on clique sur un lien. Il est utilisé, dans ce cas, avec _blank :

<a href="lien" target="_blank">ouverture dans une autre fenétre</a>

les ancres

Name est utilisé pour se déplacer à l'intérieur d'un doc html, il est associé à href

L'ancre est <a name="ancre">référent</a>, référent n'est pas un lien hypertexte, il est un référent au lien <a href="lien#ancre">voir plus loin</a>. En cliquant sur voir plus loin, le mot référent va venir au dessus de la page.

<a name="mot">référent</a> - <a href="lien#mot">voir plus loin</a>

Carte cliquable

les cartes cliquable ou images mappés sont des images à l'intérieur desquelles on définit des zones cliquable qui renvoie l'utilisateur vers d'autre doc html.
Il y deux tags qui permettent de rendre une image cliquable et de définir ses zones

<map name="mot">

définit une image contenant des zones actives

<area>

Définit une zone cliquable

Les formes de Shape sont :

• shape="rect" pour la forme rectangulaire
• shape="circle" pour la forme circulaire
• shape="poly" pour les formes polygonales

Les coordonnées, en pixel, suivant les formes, sont :

• pour shape="rect", coords="x-gauche, y-haut, x-droite, y-bas"
• pour shape="circle", coords="x-centre, y-centre, rayon"
• pour shape="poly", coords="x1, y1, x2, y2, x3, y3, xn, yn, x1, y1"

Le programme html coorespond à :

<img src="insertion" usemap="#mot">
...
<map name="mot">
<area href="lien" alt="mots" shape="forme" coords="coordonnées">
<area href="lien" alt="mots" shape="forme" coords="coordonnées">
<area href="lien" alt="mots" shape="forme" coords="coordonnées">
</map>

Construction d'une image mappé

Les frames

Les frames, en français veut dire cadre, permettent de divisé la fenétre de votre navigateur en plusieurs fichiers html contenues dans des cadres.

Le système de frames est créé grâce à un fichier source qui appelle les autres fichiers constituant les cadres.

le fichier source

Il a le même programme qu'un doc html normal, sauf que le tag <body> est remplacé par <frameset> et <noframe>. A l'interieur de <frameset>...</frameset>, se trouve les tags <frame> qui indique le fichier du cadre. Le tag <noframe> sert au cas où le browser ne gére pas les frames, le tag <body>, et la construction classique d'un doc html, est envisagé.

<html>
<head>
...
<head>
<frameset attribut>
...
</frameset>
<noframe>
<body>
...
</body>
</noframe>
</html>

<frameset>

Ce tag permet la construction des cadres

<frameset> doit contenir rows ou cols
la valeur de frameborder est yes ou no

Rows et cols

Ces attributs permettent de séparer, horizontalement pour rows, et verticalement pour cols, la fenétre du navigateur en 2 au minimum, ce qui donnera 2 cadres séparé horizontalement ou verticalement.

Dans le cas où il y a 3 cadres séparés horizontalement, rows à 3 valeurs : la hauteur du premier cadre, la hauteur du second et la hauteur du troisiéme cadre :

Rows="hauteur 1,hauteur 2,hauteur 3"

Dans le cas où il y a 3 cadres séparés verticalement, cols à 3 valeurs : la largeur du premier cadre, la largeur du second et la largeur du troisiéme cadre :

cols="largeur 1,largeur 2,largeur 3"

La hauteur et la largeur peuvent étre exprimé en :

• pixel
• poucentage
• flottant, le signe * prendra l'espace restant : rows (hauteur 1,hauteur 2,*)
  un multiplicateur peut étre assigné à * : cols (largeur 1,*,2*)

<frame>

Ce tag détermine les propriétés du cadre

La valeur de scrolling est yes, no ou auto
La valeur de frameborder est yes ou no
Le nombre de marginwidth et marginheight est en pixel

Imbriquation de <frameset>

Il est possible d'imbriquer plusieurs tags <frameset> pour construire son systéme de frame.
Ainsi le premier <frameset> peut divisé horizontalement la fenétre du navigateur et le second, la séparer verticalement ou inversement.

La premiere valeur de rows ou cols de <frameset> appel le second tag : <frame>...</frame> ou <frameset>...</frameset>. La seconde valeur appel le troisiéme tag ...etc...

par exemple :

<html>
<head>
...
<head>
<frameset cols="largeur 1,largeur 2" attribut>
<frame src="fichier 1" attribut> --> largeur 1 correspond au fichier 1
<frameset rows="hauteur 1,hauteur 2" attribut>
<frame src="fichier 2" attribut> -->hauteur 1 correspond au fichier 2
<frame src="fichier 3" attribut> -->hauteur 2 correspond au fichier 3
</frameset>...
</frameset>
<noframe>
<body>
...
</body>
</noframe>
</html>

Navigation à travers les frames

Il y a 3 méthodes pour naviguer dans les frames :

Exemple : Insertion du fichier 3 à la place du fichier 2 par un lien du fichier 1

Fichier 1 - Lien

Fichier 2

1 - Tous les liens du cadre changent le contenu du même cadre ou d'un autre; en fait en changeant le contenu, vous changez de fichier. ça se fait grâce aux tags <frame>, avec ses attributs name et target du fichier source, et <base>, avec l'attribut target à insérer entre <head>...</head> dans les fichiers de destination au fichier source.

Name et target, dans le fichier source, servent à définir le cadre de destination aux liens. Le fichier qui viendra s'insérer dans le cadre de destination est appelé par target dans <base>.

Exemple :

Fichier source :

<html>
<head>
...
<head>
<frameset rows="120,*">
<frame src="fichier 1" target="smugg"> --> Le fichier 1 cible le nom smugg
<frame src="fichier 2" name="smugg"> --> Le fichier 2 répond au nom smugg
</frameset>
<noframe>
<body>
...
</body>
</noframe>
</html>

Les fichiers 2 et 3 ne change pas

Fichier 1 :

<html>
<head>
<base target="smugg"> --> le fichier 1 va cibler le fichier 2
</head>
<body>
...
</body>
</html>

2 - Un seul lien du cadre change le contenu du même cadre ou d'un autre. ça se fait grâce à l'attribut target dans le tag <a> du fichier de destination, et name dans <frame> du fichier source.

Exemple :

Fichier source :

<html>
<head>
...
<head>
<frameset rows="120,*">
<frame src="fichier 1">
<frame src="fichier 2" name="smugg"> --> Le fichier 2 répond au nom smugg
</frameset>
<noframe>
<body>
...
</body>
</noframe>
</html>

Fichier 1 où se trouve le lien :

<a href="lien" target="smugg">lien</a> --> le lien cible le nom smugg

3 - Une façon plus simplifié conciste à donner à target, dans les fichiers de destination, des valeurs qui ordonne l'ouverture des fichiers dans les cadres

Target

Target="_top" : ouverture dans la fenétre entiére du navigateur
Target="_blank" : ouverture dans une seconde fenétre
Target="_self" : ouverture dans la frame du lien
Target="_parent" : ouverture dans la frame principale, la premiére appelé par <frameset>

<a href="lien" target="_top">

Formulaire de saisie

Un formulaire de saisie permet aux visiteurs de votre site de vous fournir les informations que vous lui demandez, afin d'obtenir une réponse personnalisé.

Un formulaire est composé d'un tag <form>...</form> où sont inséré des tags <input>, <textarea>, <select>, <option> et des tags de mise en forme des champs de saisie et du texte.

<form>

Method

Il est obligatoire. Method peut pendre 2 valeurs :

• Get : méthode de transmission de données légéres (peu d'information)
• Post : méthode de transmission de données lourde (beaucoup d'information)

Action

Le programme de traitement des données est géré en CGI, l'adresse désigne donc le format .cgi. Par défaut l'adresse est celle de <base> dans <head>...</head>.

Enctype

Par défaut le code est : application/x-www-form-urlencode. Lors de transmission d'un fichier, il faut utiliser : multipart/form-data.

<input>

Type

text - type="text" : c'est un champ d'entré à une ligne

password - type="password" : champ destiné à recevoir un mot de passe

checkbox - type="checkbox" : case à cocher

radio - type="radio" : rond à cocher, un seul, parmi plusieurs, peut être coché si l'attribut name a la même valeur dans les tag <input>

image - type="image" : image à cliquer

hidden - type="hidden" : champ caché, impossible à modifié par l'utilisateur

submit - type="submit" : bouton pour envoyer les informations

reset - type="reset" : bouton qui efface tout le formulaire

<textarea>

C'est un champ de texte comportant plusieurs ligne tapez votre texte ici

<select>

Il s'agit d'une liste de sélection contient le tag <option>

machin truc bidule smugg

<option>

Indique une option dans une liste de sélection