Guide du langage HTML
Avertissement : ce document n’a
pas pour objectif de donner l’exhaustivité des instructions HTML et de leurs
caractéristiques. Il liste et explique simplement les paramètres les plus
couramment utilisés et nécessaires pour la création d’un site web attractif.
Sommaire :
3.3.1 - Définition du corps de
document
3.7.3 - Autres fonctionnalités
V - Exemples de fichiers HTML
& CSS
5.1 – Un fichier HTML
n’utilisant pas de feuille de style
5.2 – Un fichier HTML
utilisant une feuille de style
5.3 – La feuille de style
correspondante
5.4 – Un fichier HTML créant
des cadres
HTML (HyperText
Markup Language) est le langage utilisé sur le Web. Il repose sur le principe
de la définition structurelle logique du document. Ce n’est pas un langage de
programmation. Les fichiers HTML sont de simples textes ASCII et sont donc
indépendants de toute plate-forme. Ils peuvent être lus par un PC sous Windows,
un Apple Macintosh, une station SUN, ou un serveur sous UNIX. Seul le logiciel
permettant d’interpréter le contenu (navigateur) est dépendant de la
plate-forme et de son système d’exploitation.
La définition du
codage HTML repose sur une norme définie par le World Wide Web Consortium (W3C
- http://www.w3.org). HTML 1.0, la première
version, a vu le jour sur le Web en mai 1991. Depuis, les évolutions se sont
succédées jusqu’à la version HTML 4.0 actuelle, mise en service en juillet 1997
et dite Dynamic HTML (DHTML), qui prend en charge les scripts, les feuilles de
style et les objets pour donner une plus grande interactivité avec les actions
de l’opérateur.
Les noms de fichiers
HTML doivent posséder une extension .htm ou .html (selon la possibilité de
gestion des noms de fichiers longs du système d’exploitation utilisé). Les noms
de fichiers contenant les feuilles de styles utilisent des extensions du type .css
(pour Cascading Style Sheet). Les noms de fichiers contenant les scripts en
JavaScript utilisent l’extension .js.
Les noms de fichiers
cités à l’intérieur des documents HTML doivent absolument respecter la casse
car les systèmes d’exploitation des serveurs, contrairement à la plupart de
ceux des postes de bureau, font la différences entre majuscules et minuscules
(TOTO.HTML et toto.html sont deux fichiers différents pour le serveur et
représentent le même fichier sur un poste sous Windows 98 par exemple).
La plupart des
serveurs reconnaissent le nom de fichier “ index.htm ” ou “ index.html ”
comme fichier de démarrage automatique. Il est intéressant d’utiliser ce nom
pour le fichier d’entrée d’un site Web car il évite de saisir un nom de fichier
dans l’adresse internet.
La visualisation des
pages Web nécessite un navigateur
adapté au système d’exploitation utilisé et capable d’interpréter le texte HTML
pour afficher les informations à l’opérateur. Les deux navigateurs les plus
utilisés sous Windows sont Netscape Communicator (http://www.netscape.fr) et Microsoft Internet
Explorer (http://www.microsoft.fr). Il
est important, lors de la conception d’un fichier HTML, de vérifier
l’interprétation du fichier réalisée par chacun des deux navigateurs. En effet,
il y a parfois des différences qui peuvent conduire à un affichage ne
correspondant pas à l’objectif du concepteur. La version utilisée est
importante car c’est d’elle que dépendra la version de la norme HTML prise en
compte. Pour travailler avec HTML 4.0, il est indispensable d’utiliser les
dernières versions des navigateurs.
Outre les deux
navigateurs les plus répandus, le concepteur de pages HTML a besoin d’un logiciel de téléchargement ou client
FTP. Ce logiciel permet de gérer le transfert entre l’ordinateur sur lequel a
été créé le fichier HTML et le serveur où ce fichier doit être installé pour
être visible en permanence sur internet. La plupart de ces logiciels permettent
en plus de gérer l’espace mis à disposition par l’hébergeur (création de
dossier, suppression ou déplacement de fichiers, etc.). On trouve sur internet
tous les outils nécessaires en téléchargement (par exemple : FTP Expert à
l’adresse http://www.visic.com). La plupart
sont en version shareware utilisables à l’essai avant de s’acquitter des droits
de licence.
Si la création d’un
fichier HTML peut être réalisée dans n’importe quel éditeur de texte
(bloc-notes de Windows par exemple), l’utilisation d’un éditeur spécifique permet de faciliter cette tâche en travaillant
directement sur une image du document, l’éditeur créant le code en arrière
plan, ou en automatisant certains tâches lors du travail de codage. Par
exemple, Front Page Express, fourni avec Windows 98, ou Dreamweaver, le dernier
éditeur à la mode, travaillent en WYSIWYG (what you see is what you get). Web
Expert, lui, travaille sur le code avec automatisation des tâches (http://www.visic.com). Même avec un éditeur
WYSIWYG, il est intéressant de connaître un peu le langage HTML de façon à
pouvoir effectuer des modifications directement dans le code voire introduire
des syntaxes non prises en charge par l’éditeur utilisé.
Les instructions
HTML sont données les unes à la suite des autres. Il n’y a pas de boucle ou de
structure de saut comme dans un langage de programmation.
Les instructions
sont écrites avec un système de repérage constitué des balises encadrées par
les signes < et >. Il y a d’autre part des balises
d’ouverture et des balises de fermeture qui délimitent la zone pour laquelle
l’instruction s’applique. La balise de fermeture est la même que celle
d’ouverture, mais précédée d’un slash (exemple : <B> ... </B>).
Certaines instructions ne nécessitent pas de balise de fermeture (le saut de
ligne <BR> par exemple). La casse pour l’écriture des balises est sans
importance (<B> équivaut à <b>). Les balises d’ouverture
peuvent contenir des attributs séparés par un espace : <P ALIGN=²center²>.
Les instructions
HTML peuvent s’emboîter les unes dans les autres. Il y a lieu, dans ce cas, de
refermer les balises en respectant la cohérence des emboîtements (<B><I> ... </I></B> est
correct, <B><I> ... </B></I> est incorrect).
Une page HTML
commence toujours par la balise <HTML>
et finit par </HTML>. Un
fichier HTML contient deux grandes parties : l’En-tête, délimité par les balises <HEAD> et </HEAD>,
et le Corps du document, délimité
par les balises <BODY> et </BODY>. Le premier contient les
informations sur la page HTML alors que le second contient les informations à
afficher par le navigateur.
Il est possible
d’introduire un commentaire au milieu du code HTML. Celui-ci doit être placé
entre les balises suivantes <!--
et -->. Ces commentaires peuvent
être introduits n’importe où dans le fichier HTML.
En résumé, la
structure d’un document HTML est donc la suivante :
<HTML>
<HEAD>
Contenu de l’en-tête
</HEAD>
<BODY>
Contenu du corps du document
</BODY>
</HTML>
L’utilisation des
caractères accentués dans le corps du document est à faire avec prudence. En
effet, internet étant basé sur un codage 7 bits, les caractères accentués et
les caractères spéciaux ne peuvent être transmis tels quels (codage en 8 bits).
La norme HTML a donc défini un codage des caractères accentués pour que les navigateurs
les affichent correctement. Le codage commence toujours par le caractère & et finit par le caractère ; (par exemple é pour é). La plupart des éditeurs HTML gèrent le
passage du caractère accentué ou spécial au code correspondant. Certains gèrent
également le passage inverse qui permet une lecture plus confortable du contenu
du fichier.
L’en-tête est
important car il est utilisé par les robots des moteurs de recherche pour
référencer la page Web. C’est du résultat qu’ils obtiendront que dépendra la
position de la page dans la liste des moteurs de recherche. Certains robots
recherchent également des informations dans le contenu du document.
Le document doit
posséder un titre à placer entre les balises <TITLE> et </TITLE>.
C’est souvent ce titre qui apparaîtra dans la liste affichée par les moteurs de
recherche. Pour permettre un classement correct de la page Web dans les
catégories des moteurs de recherche, il est nécessaire de fournir une liste de
mots-clés. Ces derniers sont placés à l’intérieur d’une balise META dont
l’attribut NAME est “ keywords ” de la façon suivante : <META NAME=²keywords²
CONTENT=²Liste
des mots clés²>.
Les mots clés sont
séparés par des virgules. De la même manière, il est nécessaire de donner une
description du contenu de la page web qui sera en général affichée par le
moteur de recherche à la suite du titre. Celle-ci est à placer dans une autre
balise META à laquelle on donner le nom “ description ”. La syntaxe
utilisée est la suivante : <META
NAME=²description²
CONTENT=²Description²>.
Les instructions
META ne possèdent pas de balise de fermeture.
D’autres balises
peuvent être placées dans l’en-tête du document HTML. On peut trouver une
balise META donnant le nom de l’auteur de la page : <META NAME=²author²
CONTENT=²Nom
et prénom de l’auteur²>.
On peut utiliser une
balise servant à lier la page à un autre fichier, comme une feuille de style.
Dans ce cas, l’attribut NAME s’appelle “ stylesheet ”, l’attribut
HREF donne l’adresse du fichier contenant la feuille de style et l’attribut
TYPE donne le type de contenu du fichier. La syntaxe est la suivante (cf.
paragraphe 3.8) : <LINK REL=²stylesheet²
HREF=²style.css²
TYPE=²text/css²>.
Dans l’en-tête est
également placé le code des programmes de script (cf. paragraphe 3.7.2). Il est
placé entre les balises <SCRIPT>
et </SCRIPT>. La balise
d’ouverture peut contenir l’attribut LANGUAGE pour définir le langage utilisé (<SCRIPT LANGUAGE=²JavaScript²>). Pour ne pas être affiché par le
navigateur, le code du script est souvent placé en commentaire (entre les
balises <!-- et -->).
Il est placé entre
les balises <BODY> et </BODY>. La balise d’ouverture
peut contenir des attributs définissant des caractéristiques génériques du
corps du document.
Par exemple, il est
possible de définir une couleur de fond pour le document avec l’attribut
BGCOLOR. La valeur de la couleur est donné par un
nombre hexadécimal à 6 caractères maximum précédé d’un dièse. Par exemple <BODY BGCOLOR=²#FFFFFF²> définit un fond de page blanc. La plupart
des éditeurs HTML possèdent des fonctions d’aide à la gestion du choix des
couleurs.
Il est également
possible de définir un image de fond du document.
Cette image sera répétée autant de fois que nécessaire pour couvrir la surface
correspondante si elle n’est pas assez grande. Si elle est trop grande, seule
une partie de l’image sera affichée. L’attribut BACKGROUND utilisé doit
contenir le nom et le chemin d’accès au fichier image. La syntaxe est la
suivante : <BODY BACKGROUND=²chemin/image.gif²>.
Les formats d’image
utilisables sur internet ainsi que la syntaxe à utiliser pour le chemin sont
définis au paragraphe 3.3.8. Il est intéressant d’utiliser à la fois une
couleur et une image pour le fond, de façon à avoir une couleur cohérente avec
celle du texte pendant le temps de chargement de l’image.
La balise BODY peut
également contenir les valeurs par défaut de la couleur du texte et de celle
des liens hypertexte. La syntaxe utilisée est la suivante où xxxxxx représente
la valeur en hexadécimal de la couleur choisie :
Ø
<BODY TEXT=²#xxxxxx²> pour définir la couleur par défaut du texte
courant,
Ø
<BODY LINK=²#xxxxxx²> pour définir la couleur par défaut des liens
non activés,
Ø
<BODY VLINK=²#xxxxxx²> pour définir la couleur par défaut des liens
visités,
Ø
<BODY ALINK=²#xxxxxx²> pour définir la couleur par défaut des liens
en cours d’activation.
L’ensemble de ces
paramètres peut être placé dans la même balise BODY en séparant les attributs
par des espaces.
La norme HTML permet
d’utiliser un préformatage pour les titres. Les balises utilisées sont les
suivantes <H1> ... </H1>, <H2> ... </H2>,
etc. jusqu’à <H6> ... </H6>. Plus le paramètre est
grand et plus la taille du titre est petite. Il est possible de définir un
alignement par l’attribut ALIGN dont les valeurs peuvent être center, left,
right ou justify (par exemple pour un titre de taille 1 centré : <H1 ALIGN=²center²>Titre</H1>).
Il est possible
d’introduire des sauts volontaires de paragraphe ou de ligne au sein du texte.
Le saut de ligne utilise la balise <BR>
qui ne possède pas de balise de fermeture. Le saut de paragraphe utilise la
balise <P>, la fin de
paragraphe étant repérée par la balise </P>
qui n’est pas obligatoire. La balise de début de paragraphe permet de définir
l’alignement grâce à l’attribut ALIGN, avec les valeurs center, left, right ou
justify (<P ALIGN=²right²> donne un paragraphe aligné à droite).
Il est possible
d’empêcher un retour à la ligne automatique en plaçant le texte concerné entre
les balises <NOBR> et </NOBR>.
La taille des
caractères peut être ajustée avec l’instruction FONT. La syntaxe à utiliser est
la suivante : <FONT SIZE=n>
... </FONT>. La valeur de n
est comprise entre 1 (plus petite taille) et 7. La valeur standard est 3. Il
est également possible de définir des valeurs relatives définissant un écart
par rapport à la valeur standard : <FONT
SIZE=-1> réduit la taille d’une unité, ce qui est équivalent à <FONT SIZE=2>. De la même
manière, <FONT SIZE=+2>
augmente la taille de deux unités.
Il est également
possible de définir une couleur pour le texte. Il suffit pour cela d’utiliser
l’attribut COLOR de la balise FONT. <FONT
COLOR=²#000000²>
... </FONT> donne une couleur noire au texte placé entre les
balises de début et de fin. Dans le cas où une valeur par défaut a été définie
par la balise BODY, la valeur locale définie dans la balise FONT est
prédominante.
Une police
d’affichage peut être spécifiée par l’attribut FACE de la balise FONT.
Toutefois, les polices utilisées par les navigateurs sont celles installées sur
le poste client et il se peut que la police demandée n’existe pas. Dans ce cas,
le navigateur recherche la police la plus proche, mais les effets peuvent être
très différents de celui désiré par le rédacteur de la page HTML. Il vaut mieux
s’en tenir aux polices Arial et Times. La syntaxe à utiliser est la suivante : <FONT FACE=²TimesNewRoman²>.
Le texte peut
utiliser les styles gras, italique ou souligné. Les balises correspondantes
sont les suivantes :
Ø
<B> ... </B> pour un texte en gras,
Ø
<I> ... </I>
pour un texte en italique,
Ø
<U> ... </U> pour un texte souligné.
Il est également possible de mettre du texte en exposant ou en indice,
mais l’affichage correspondant n’est effectif qu’avec Internet Explorer. La
syntaxe est la suivante :
Ø
<SUP> ... </SUP>
pour un texte en exposant,
Ø
<SUB> ... </SUB>
pour un texte en indice.
Il est possible
d’introduire des lignes horizontales de séparation au sein du texte grâce à la
balise <HR> qui ne possède pas
d’équivalent de fermeture. Les attributs utilisables sont WIDTH pour la
longueur de la ligne, SIZE pour l’épaisseur et ALIGN pour la position. Les
valeurs pour l’attribut WIDTH peuvent être données en pourcentage ou en pixels
(par exemple : <HR WIDTH=30%>
ou bien <HR WIDTH=50>). La
valeur par défaut de l’attribut SIZE est 2 (<HR> est équivalent à <HR
SIZE=2>). Les valeurs possibles pour l’attribut ALIGN sont center, left
ou right.
Les navigateurs
affichent les lignes de séparation avec un ombrage. Il est possible de
supprimer cet effet en ajoutant l’attribut NOSHADE : <HR WIDTH=30% SIZE=1 ALIGN=²center² NOSHADE>.
Le code HTML permet
d’utiliser, comme dans la plupart des traitements de texte, des listes
prédéfinies à puces ou numérotées. La syntaxe d’une liste à puces est la
suivante :
<UL>
<LI>item 1</LI>
<LI>item 2</LI>
.
.
.
<LI>item n</LI>
</UL>
La balise UL peut
contenir l’attribut TYPE définissant le type de puce utilisée. Les valeurs
possibles sont disc, circle ou square (<UL
TYPE=disc> donne une liste avec des puces constituées de points).
Pour les listes
numérotées, la syntaxe est similaire. Il suffit de remplacer les balises <UL> et </UL> par les balises <OL>
et </OL>. Il est également possible d’ajouter
l’attribut TYPE pour choisir le type de numérotation utilisée. Si l’attribut
est omis, la numérotation est numérique. Il est possible d’utiliser des
chiffres romains majuscules (I, II, III, etc.) ou minuscules (i, ii, iii,
etc.). Dans ce cas, la valeur de l’attribut est I ou i. On peut également
utiliser une numérotation alphabétique majuscule ou minuscule. Dans ce cas,
l’attribut est A ou a. La syntaxe est la suivante : <OL TYPE=i>.
Il est possible de
commencer une liste numérotée à une valeur quelconque grâce à l’attribut START
auquel on donne la valeur de départ (<OL
START=5>).
Bien qu’il ne faille
pas en abuser en raison du temps de chargement qui peut devenir prohibitif, les
images apportent un agrément aux pages HTML. Les formats d’image les plus
utilisés sur le Web sont le format GIF (extension .gif) et le format JPEG (extension .jpg).
Les fichiers Gif
sont trente fois plus petits que les fichiers BMP. D’autre part, ils reposent
sur une définition par couche, ce qui permet un affichage progressif lors du
chargement de la page. Ils ont en plus deux avantages importants pour le Web :
Ø
On peut rendre les images transparentes ce qui permet, en définissant
une couleur comme transparente de simuler la délimitation de l’image à un sujet
principal, le reste étant confondu avec le fond de la page HTML,
Ø
Il est possible de réaliser des images animées.
Les images au format
JPEG permettent de disposer de 16,7 millions de couleurs. Elles utilisent un
format de compression spécifique qui permet d’obtenir une taille de fichier
raisonnable. C’est le format à préférer pour tout ce qui est photographie.
Les autres formats
sont à éviter car ils nécessitent un programme additionnel au navigateur.
L’insertion d’une
image dans un fichier HTML se fait grâce à l’instruction IMG. Pour indiquer le
nom du fichier image à intégrer et le lieu où il se trouve, il faut utiliser
l’attribut SRC. La syntaxe est la suivante : <IMG SRC=²chemin/fichier.ext²>. Il n’y a pas de balise de fermeture. La
valeur chemin donne l’accès au dossier où est situé le fichier image à
partir de la position du fichier HTML. Pour remonter dans l’arborescence,
il faut utiliser la syntaxe suivante : ../ (à titre d’exemple,
²../image.gif² va chercher
le fichier image.gif au niveau immédiatement supérieur à celui où se trouve le
fichier HTML appelant).
L’attribut ALT
permet d’afficher un texte en commentaire si le navigateur ne supporte pas les
images où dans le cas contraire si l’affichage des images a été désactivé dans
les préférences de l’utilisateur ou pendant la phase de chargement de l’image.
Ceci permet notamment de donner la taille de l’image pour que l’utilisateur ait
une idée du temps qu’il va lui falloir attendre pour avoir un affichage
complet. Voici un exemple d’instruction IMG appelant une image et possédant un
attribut ALT donnant le nom du fichier et sa taille : <IMG SRC=²Images/Dessin.jpg²
ALT=²Dessin.jpg
- 55 ko²>.
La longueur du texte
contenu dans l’attribut ALT est libre. Toutefois, il faut penser que ce texte
sera affiché à la place de l’image et que la place disponible est restreinte à
la taille de l’image. En conséquence, mettre un attribut ALT sur un bouton de
largeur étroite est parfaitement inutile car le texte ne sera pratiquement pas
visible.
Il est possible de
définir la position de l’image dans la largeur avec l’attribut ALIGN. Les
valeurs possibles sont left, right et center. Il est également possible de
déterminer l’espacement entre image et texte avec les attributs HSPACE et
VSPACE. Les valeurs sont données en pixels. Voici l’exemple d’une image centrée
et espacée du texte de 20 pixels : <IMG
SRC=²Images/Dessin.jpg²
ALIGN=²center²
HSPACE=20 VSPACE=20>.
Il faut toutefois
remarquer que les navigateurs n’affichent pas tous le texte autour de l’image
de la même façon. En effet, certains n’affichent qu’une ligne, qui peut être
placée en haut, au milieu ou en bas par rapport à l’image, alors que d’autres
affichent plusieurs lignes sur toute la hauteur de l’image. Pour éviter cet
inconvénient, il est souvent préférable de placer les images et le texte dans
des cellules de tableau de façon à maîtriser parfaitement la position relative
du texte et des images (voir le paragraphe 3.5).
Il est intéressant
que le navigateur ait l’information relative à la dimension de l’image pour
réserver la place correspondante lors de l’affichage du texte qui, en général,
est plus rapide que celui de l’image. Cela évite que le texte soit à
réafficher, lorsque le chargement de l’image est terminé, pour le positionner
au bon endroit. Ces informations sont transmises par les attributs WIDTH et
HEIGHT de la balise IMG. Les dimensions sont données en pixels : <IMG SRC=²Images/Dessin.jpg²
WIDTH=50 HEIGHT=25>.
Par défaut, les
images possèdent un cadre affiché par le navigateur. L’épaisseur de ce cadre
est réglée par l’attribut BORDER auquel on donne une valeur en pixel. Une
valeur de 0 supprime le cadre.
Plusieurs instructions
utilisent l’attribut ALIGN pour définir la position des objets ou du texte sur
la page. Il est possible d’utiliser globalement l’instruction DIV pour définir
l’alignement. La syntaxe à utiliser est la suivante : <DIV ALIGN=²alignement²>... </DIV>. La valeur de l’attribut peut être
center, left, right ou justify.
Les ancrages sont
des repères que l’on place au sein de la page HTML pour pouvoir y revenir par
l’appel d’un lien. L’instruction utilisée pour définir un ancrage ou un lien
est A. Les attributs définissent s’il s’agit d’un ancrage ou d’un lien.
L’attribut NAME
définit un ancrage au sein de la page. La syntaxe est la suivante : <A NAME=²nom²></A>. Le nom est un texte libre.
L’attribut HREF
définit un lien. Il est utilisé à la fois pour créer une liaison interne à la
page HTML ou pour créer une liaison externe.
Pour une liaison
interne à un ancrage nommé “ rep1 ”, voici la syntaxe utilisée : <A HREF=²#rep1²> ... </A>.
Le lien sera créé
sur tout ce qui se trouve entre les balises d’ouverture et de fermeture, que ce
soit du texte, des images, un tableau, etc.
Le principe des
liaisons externes est identique. Il suffit simplement de renseigner l’attribut
HREF en fonction du type de lien désiré. Voici quelques exemples parmi les plus
utilisés :
Ø
<A HREF=²chemin/fichier.html²>
... </A> crée un lien vers un autre fichier HTML qui sera affiché
en lieu et place du fichier appelant,
Ø
<A HREF=²chemin/image.ext²>
... </A> crée un lien vers un fichier image qui est affiché dans
le navigateur en lieu et place du fichier HTML appelant,
Ø
<A HREF=²http://www.fournisseur.domaine²> ... </A> crée un lien vers une autre adresse Web qui
sera affichée en lieu et place du fichier appelant,
Ø
<A HREF=²mailto:adresse@fournisseur.domaine²> ... </A>
crée un
lien vers une adresse de messagerie (dans ce cas, le logiciel de messagerie est
lancé et un nouveau message qu’il suffit de compléter est créé avec l’adresse
du destinataire renseignée).
Dans le cas de
l’utilisation des cadres, il y a lieu de définir dans quel cadre la destination
sera affichée. Ceci et réalisé avec l’attribut TARGET. Les valeurs possibles
sont _blank, _top, _parent, _self ou le nom donné au cadre lors de
sa création (voir le paragraphe 3.6). La destination du lien est affichée dans
des endroits différents suivant la valeur choisie :
Ø
_blank :
affichage dans une nouvelle fenêtre du navigateur,
Ø
_top :
affichage dans la fenêtre entière du navigateur,
Ø
_parent :
affichage dans un cadre défini,
Ø
_ self :
affichage dans le cadre où se trouve le lien appelant,
Ø
toto :
affichage dans le cadre nommé toto.
La syntaxe est la
suivante : <A HREF=²Fichier.html²
TARGET=²_top²>.
La norme HTML permet
de définir des formulaires interactifs utilisés pour échanger des informations
avec le visiteur. Les formulaires utilisent des zones au format prédéfini où le
visiteur peut entrer ses informations à transmettre au serveur. L’avantage du
formulaire par rapport à un simple message est que les informations sont
enregistrées dans une structure de données prédéfinie, ce qui permet ensuite
d’effectuer un traitement par une base de données.
La définition d’un
formulaire est réalisée grâce à l’instruction FORM dont la syntaxe est la
suivante : <FORM> ... </FORM>. La balise d’entrée doit
contenir deux informations permettant la transmission du formulaire :
Ø
L’adresse où envoyer le formulaire,
Ø
La méthode de transmission utilisée.
Ces deux éléments
sont définis respectivement par les attributs ACTION et METHOD.
L’attribut ACTION
contient les paramètres habituels de définition d’une adresse, c’est à dire
soit un lien
²http://www.fournisseur.domaine/² soit un lien vers une adresse de messagerie
²mailto:adresse@fournisseur.domaine². Il se peut également que ce paramètre fasse
appel à une fonction installée sur le serveur de l’hébergeur de la page HTML.
Dans ce cas, la syntaxe à utiliser est fournie par l’hébergeur car elle dépend
du programme utilisé et de la plate-forme du serveur.
L’attribut METHOD
n’a que deux valeurs possibles GET ou POST. La valeur POST est à privilégier
dans le cas d’un envoi par messagerie (attribut ACTION
“ mailto... ”).
Entre les balises
ci-dessus, il est possible d’insérer des champs définissant des zones de saisie
ou de définition de l’information à fournir par le visiteur.
Une zone de texte à
lignes multiples est définie grâce aux balises : <TEXTAREA> et </TEXTAREA>.
L’attribut NAME est obligatoire et le nom ne doit pas comporter d’espaces. Les
attributs ROWS et COLS définissent les dimensions. Si un texte existe entre les
deux balises, il sera affiché dès la présentation du formulaire au visiteur.
Des listes
déroulantes sont définies avec les balises <SELECT>
et </SELECT>. L’attribut NAME
est obligatoire et l’attribut SIZE, optionnel, donne le nombre d’entrées de la
liste déroulante. Chaque entrée est définie par les balises <OPTION> et </OPTION>. Il est possible de définir l’entrée qui sera
affichée par défaut en ajoutant l’attribut SELECTED dans la balise OPTION. Cet
attribut est sans paramètres.
Un champ de saisie
utilisateur est défini par la balise <INPUT>
qui ne possède pas de balise de fermeture. L’attribut NAME est obligatoire. Les
attributs SIZE et MAXLENGTH définissent respectivement le nombre de caractères
affichés réellement et le nombre de caractères total du champ. Il est possible
de définir le type de données correspondant au champ par l’attribut TYPE. Les
attributs possibles sont les suivants :
Ø
text :
la valeur saisie est un texte alphanumérique,
Ø
password : le
texte saisi n’est pas affiché, il est remplacé par des étoiles,
Ø
int :
la valeur saisie doit être un nombre entier,
Ø
float :
la valeur saisie est un nombre décimal,
Ø
date :
la valeur saisie est une date,
Ø
url :
la valeur saisie est une adresse internet (Web, messagerie, etc.),
Il est également
possible d’introduire dans le formulaire des cases à cocher et des boutons
radio (une seule option sélectionnable) par d’autres définitions de l’attribut
TYPE de la balise INPUT. Les cases à
cocher sont introduites par la valeur checkbox
et les boutons radio par la valeur radio.
Dans ces deux cas, l’attribut VALUE permet d’identifier la donnée reçue.
Après avoir rempli
le formulaire, l’utilisateur doit pouvoir l’envoyer. C’est l’objet des boutons
SUBMIT et RESET. La syntaxe est encore une valeur (reset ou submit) de
l’attribut TYPE de la balise INPUT. L’attribut VALUE définit le texte du
bouton.
Voici un exemple
complet de formulaire utilisant l’ensemble des possibilités :
<FORM ACTION=²mailto:adresse@fournisseur.domaine² METHOD=post>
<BR>Mot de passe : <IMPUT
TYPE=password NAME=²mdp² SIZE=8
MAXLENGTH=8>
<BR>Nom : <INPUT
NAME=²nom² SIZE=30
MAXLENGTH=40>
<BR>Prénom : <INPUT NAME=²prenom² SIZE=30
MAXLENGTH=40>
<BR><SELECT NAME=²Sexe²>
<OPTION>Féminin </OPTION>
<OPTION> Masculin </OPTION>
</SELECT>
<BR>Sport(s) pratiqué(s)
: <INPUT TYPE=text NAME=²sport²
SIZE=80>
<BR>Niveau de pratique :
<INPUT TYPE=radio Name=²niveau²
VALUE=²debutant²> Débutant
<INPUT TYPE=radio Name=²niveau²
VALUE=²confirme²>
Confirmé
<INPUT TYPE=radio Name=²niveau²
VALUE=²expert²> Expert
<BR><TEXTAREA NAME=²commentaires²
ROWS=5 COLS=40>Insérez
ici vos commentaires</TEXTAREA>
<BR><INPUT TYPE=reset VALUE=²Effacer²><INPUT TYPE=submit VALUE=²Envoyer²>
</FORM>
Les tableaux sont
d’une grande utilité car ils permettent de présenter l’information de façon
structurée. La définition d’un tableau se fait avec l’instruction TABLE. Chaque
ligne est créée avec l’instruction TR. Chaque cellule dans la ligne (donc
chaque colonne) est créée grâce à l’instruction TD. Il est possible de créer
une cellule titre avec l’instruction TH (le texte est par défaut en gras et
centré). Voici un exemple simple de tableau à trois lignes et trois colonnes
dont la 1ère ligne est constituée de titres :
<TABLE>
<TR><TH>Titre1</TH><TH>Titre2</TH><TH>Titre3</TH></TR>
<TR><TD>Données1</TD><TD>Données2</TD><TD>Données3</TD></TR>
<TR><TD>Données4</TD><TD>Données5</TD><TD>Données6</TD></TR>
</TABLE>
Il est possible de
placer n’importe quel objet dans un tableau entre les balises TD ou TH (image,
texte, lien, etc.).
Le formatage du tableau
est contrôlé par les attributs suivants placés dans la balise où le formatage
particulier est désiré:
Ø
BORDER crée une bordure autour des cellules du tableau. La valeur de
l’attribut donne l’épaisseur du trait en pixels.
Ø
BORDERCOLOR définit la couleur de la bordure. La valeur de l’attribut
est la valeur de la couleur en hexadécimal.
Ø
BGCOLOR définit la couleur du fond. La valeur de l’attribut est la
valeur de la couleur en hexadécimal.
Ø
HEIGHT et WIDTH définissent les dimensions des cellules ou du tableau.
La valeur de l’attribut est pixels ou en %.
Ø
ALIGN précise l’alignement horizontal. Les valeurs possibles sont left, right ou center.
Ø
VALIGN précise l’alignement vertical. Les valeurs possibles sont top, bottom ou middle.
Il est possible de
grouper des cellules, tant horizontalement que verticalement. Les attributs
utilisés sont respectivement COLSPAN et ROWSPAN. La valeur spécifié
donne le nombre de cellules à grouper. Voici un exemple de tableau avec quatre
lignes et quatre colonnes pour lequel les quatre premières cellules
horizontales et les trois dernières cellules verticales ont été groupées :
<TABLE>
<TR><TH
COLSPAN=4>Titre général</TH></TR>
<TR
ROWSPAN=3><TH>Titre<BR>latéral</TH>
<TD>Données1</TD><TD>Données2</TD><TD>Données3</TD></TR>
<TR><TD> Données4</TD><TD>
Données5</TD><TD>
Données6</TD></TR>
<TR><TD> Données7</TD><TD>
Données8</TD><TD>
Données9</TD></TR>
</TABLE>
Le code HTML offre
la possibilité de séparer l’écran du navigateur en plusieurs parties de façon à
afficher des fichiers HTML différents dans chaque cadre ainsi défini. Ceci
permet, par exemple, d’afficher en permanence un logo, un titre et un menu quel
que soit l’endroit où le visiteur se trouve sur le site web.
La définition des
cadres est réalisée dans un fichier HTML ne comportant pas de corps (balise
BODY). La création de cadres est réalisée par l’instruction FRAMESET qui
remplace l’instruction BODY. Les attributs ROWS et COLS servent à séparer la
fenêtre du navigateur respectivement de façon horizontale et de façon
verticale. Les valeurs à attribuer correspondent à la dimension de chaque
fenêtre, en pixels ou en %, séparées par des virgules. Il est possible de
définir une des valeurs comme étant réglée automatiquement en fonction de la
taille de la fenêtre du navigateur. Dans ce cas, on lui attribue la valeur *.
La définition du
contenu des cadres ainsi créés est réalisée grâce à l’instruction FRAME. Deux
attributs sont indispensables pour définir d’une part le fichier HTML qui sera
affiché dans le cadre, d’autre part le nom du cadre en question pour pouvoir
l’utiliser ultérieurement pour y afficher des informations. Ces attributs sont
NAME et SRC. Ils fonctionnent de la même façon que les attributs similaires
définis plus haut pour d’autres balises. Il est possible de définir d’autres
attributs de la balise FRAME :
Ø
NORESIZE interdit le redimensionnement,
Ø
SCROLLING prend les valeurs yes ou
no pour afficher ou non les
ascenseurs,
Ø
MARGINWIDTH et MARGINHEIGHT définissent les marges en pixels entre le
cadre et son contenu,
Ø
FRAMEBORDER définit la valeur de la largeur de la bordure en pixels
(une valeur à 0 supprime la bordure).
Les instructions
FRAMESET peuvent être imbriquées pour définir un découpage à la fois horizontal
et vertical. Voici un exemple de définition de cadres pour afficher un titre en
haut sur toute la largeur de la fenêtre et un menu à gauche et en-dessous :
<FRAMESET ROWS=²30,*
²>
<FRAME NAME=²titre² SRC=²Titre.html²
FRAMEBORDER=0 SCROLLING=no NORESIZE>
<FRAMESET COLS=²120,*
²>
<FRAME NAME=²menu² SRC=²Menu.html²
FRAMEBORDER=0 NORESIZE>
<FRAME NAME=²contenu²
SRC=²Accueil.html²
FRAMEBORDER=0>
</FRAMESET>
</FRAMESET>
L’affichage dans un
cadre spécifique à partir d’un lien situé dans un autre cadre (cas du menu de
l’exemple ci-dessus où une option dans le cadre menu fait afficher une page
dans le cadre contenu) est réalisé grâce à l’attribut TARGET de la balise
<A> (voir le paragraphe 3.3.10).
HTML fournit des
outils efficaces et assez complet pour la création de pages web, toutefois, il
ne permet pas certaines réalisations. Les programmeurs ont des outils à leur
disposition permettant de compléter leur création HTML.
Ce sont des
programmes (code précompilé placé en fichier .class) qui utilisent le
navigateur de la machine client qui possède des ressources du langage Java.
Cela permet de réaliser des animations et de créer une interactivité avec le
visiteur.
Contrairement aux
applets Java, les scripts sont écrits directement dans le fichier HTML. Les
plus utilisés sont les scripts en JavaScript. On trouve aussi des scripts en
VBScript, mais moins fréquents. Le code est placé entre les balises <SCRIPT> et </SCRIPT> dans l’en-tête du fichier HTML. La balise SCRIPT
peut intégrer l’attribut LANGAGE pour préciser le langage utilisé (<SCRIPT LANGUAGE=²JavaScript²>). On trouve aussi l’utilisation de
javascript dans certaines balises du code HTML. Javascript est un langage qui
manipule des objets à l’aide de propriétés, méthodes et événements. Pour éviter
toute mauvaise interprétation du navigateur, le code JavaScript est placé en
commentaire entre les balises <!-- et
--> (cf. paragraphe 3.1).
De nombreux scripts
sont disponibles sur internet qu’il suffit de copier et de placer dans le
fichier HTML pour obtenir des effets particuliers comme l’ouverture d’une
fenêtre personnalisée, l’affichage d’un texte défilant ou non dans la barre
d’état du navigateur, etc.
Il est également
possible d’intégrer dans la page HTML un appel à des fonctionnalités fournies
par le serveur sur lequel les pages sont placées. Il s’agit généralement de
fonctionnalités CGI qui sont rencontrées le plus fréquemment pour le comptage
des visites ou la soumission des formulaires. C’est l’hébergeur qui donne les
paramètres à intégrer dans le code HTML pour faire appel à ces fonctions.
Les feuilles de
style ont été intégrées avec la version 4.0 du langage HTML. Elle ne sont
prises en compte que dans les dernières versions des navigateurs et pas encore
intégralement. L’objectif des feuilles de style est de séparer la structure des
documents de leur présentation. Concrètement, cela permet de mettre dans un
fichier séparé (extension .css) la définition de la présentation. La liaison
entre le fichier HTML et le fichier CSS se fait avec l’instruction LINK placée
dans l’en-tête du document HTML. La syntaxe à utiliser est la suivante : <LINK REL=²stylesheet²
HREF=²style.css²
TYPE=²text/css²>.
La syntaxe utilisée
dans les feuilles de style est nom :
valeur. Elle s’applique au contenu d’une balise d’ouverture à laquelle on
peut appliquer une classe particulière. Le texte suivant, placé dans la feuille
de style, définit des titres de niveau 1 centrés et de couleur rouge : H1.rouge {color :
²#FF0000² ;
text-align : center}.
L’appel au niveau du
fichier HTML se fait par l’utilisation de l’attribut CLASS de la balise
concernée. Dans ce cas : <H1
CLASS=rouge>Titre de niveau 1 centré et rouge</H1>.
Les possibilités
apportées par les feuilles de style sont importantes et permettent un
évolutivité cohérente des sites web qui comprennent parfois plusieurs centaines
de fichiers qu’il est difficile de faire évoluer de la même façon rapidement.
Les navigateurs les
plus répandus, Netscape et Internet Explorer, interprètent parfois les
instructions HTML de façon légèrement différente. C’est ainsi que Netscape
affiche les tableaux à une largeur exactement égale à leur contenu, même si une
largeur a été déterminée par le concepteur du fichier HTML. Il existe bien
d’autres différences. Par exemple les feuilles de style sont interprétées
différemment en ce qui concerne les références à un fichier externe (une image
par exemple). Un navigateur considère que le point de départ est l’emplacement
du fichier HTML appelant la feuille de style, alors que l’autre part de
l’emplacement de la feuille de style elle-même. Cet aspect pose un problème
quand la feuille de style n’est pas dans le même dossier que le ficher HTML qui
l’appelle.
Il n’y a pas de
solution miracle. Il est indispensable de tester les résultats dans les deux
navigateurs pour assurer un confort de lecture aux visiteurs potentiels, quel
que soit leur choix de navigateur. On est souvent obligé, dans l’état actuel
des choses, de ne pas utiliser certaines fonctionnalités de HTML 4.0 pour
éviter une discrimination des visiteurs en fonction de leur navigateur. Il
reste cependant une solution, mais qui peut s’avérer lourde si le site comprend
beaucoup de fichiers, c’est de créer deux sites, l’un adapté à Netscape et
l’autre fonctionnant au mieux avec Internet Explorer. En effet, JavaScript
permet d’identifier le navigateur utilisé par le visiteur. Il est possible à ce
moment là d’introduire une instruction JavaScript qui aiguille le visiteur sur
la partie du site adaptée à son navigateur.
V - Exemples de fichiers HTML & CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//FR">
<HTML>
<HEAD>
<TITLE>PKI - Nouvelles - Les
dernières nouvelles</TITLE>
<META NAME="Author" CONTENT="Philippe
LASNIER">
</HEAD>
<BODY LINK="#0000FF" VLINK="#800080"
BACKGROUND="../Images/Fond1.gif">
<DIV ALIGN="center">La dernière
mise à jour date du <FONT COLOR="#FF0000">27 décembre
1999</FONT></DIV>
<HR WIDTH=30%>
<DIV ALIGN="center">Vous n'êtes
peut-être pas encore abonné(e) à la lettre de PARIS-KAYAK International.<BR>Alors, n'hésitez pas une seconde,
<A HREF="../Quid/Quid-entree.html"
TARGET="Affichage-site">abonnez-vous</A>.</DIV>
<HR WIDTH=30%>
<P><IMG SRC="../Images/galet.gif" BORDER=0 HEIGHT=19 WIDTH=20> Le père Noël avait dans sa hotte la <A HREF="../Lettres/Lettres-entree.html"
TARGET="Affichage-site">lettre
de PKI n°56</A>...
<P><IMG SRC="../Images/galet.gif" BORDER=0 HEIGHT=19 WIDTH=20> RAID HALONG 2000 : Le C.K.C.V. –
<A HREF="http://www.multimania.com/ckcv" TARGET="_blank">Canoë-Kayak
Club de Vannes</A> – organise, du
14 au 30 avril 2000, un séjour
en Vietnam Nord, comportant 3 ou 4 jours de tourisme Hanoï/Halong, 7 à
8 jours de raid découverte
en Baie d’Halong, en kayaks biplaces démontables
(fournis par l’organisateur), une course, en 2 manches Franco-Vietnamienne sur
une demi-journée, pour un
groupe prévu de 18
kayakistes.<BR><FONT COLOR="#FF0000">Le C.K.C.V
cherche 2 co-équipiers</FONT> évidemment idéaux,
kayakistes confirmés, adhérant bien à la vie en groupe et
adaptables aux inévitables
imprévus. Prix : 12000 à 13000 francs ; vaccins à jour (Diphtérie, Tétanos, Polio, Typhoïde,
Hépatites A et B). Bivouac
d’entraînement week-end 12/13 février, région Vannes.
<P>Contact avant la fin de
janvier 2000 :<P Align="center"><A HREF="mailto:Annick.Guillerm@wanadoo.fr">Annick GUILLERM</A> : 02 97 40 50 54 ou <A HREF="mailto:ychsimon@club-internet.fr">Yves SIMON</A> : 02 97 42 78 93</P>
<P>N.D.L.R.- Lire « DES KAYAKS AUX YEUX
BRIDÉS », récit
de Jean G. BUISSET sur sa croisière
en kayak dans la Baie d’Halong, en 1995 (Cf. <A HREF="../Lettres/Lettres-entree.html"
TARGET="Affichage-site">Lettre
P.K.I. n°26</A>).
<P><IMG SRC="../Images/galet.gif" BORDER=0 HEIGHT=19 WIDTH=20>
L'Auberge de Jeunesse de Paimpol organise une expédition
au Groenland du 7 au 30 juillet 2000. Il n'y a que dix places. Pour en savoir
plus, <A HREF="../Actualites/Disko.html">cliquez
ici</A>.
<P><IMG SRC="../Images/galet.gif" BORDER=0 HEIGHT=19 WIDTH=20> La SISKA
2000 (Sardinia International Sea Kayak Adventure) aura lieu du 30 avril au 7
mai 2000 dans les îles de la
Maddalena, au Nord de la Sardaigne. Ce rassemblement touristique est réservé au pagayeurs expérimentés et en priorité
aux participants des rassemblements internationaux SISKA 1995, SISKA 1996, ISKA
1997, GISKA 1998 et NISKA 1999. Il y aura une limitation du nombre de participants
par pays. Vous pouvez d'ores et déjà
effectuer une <A HREF="../Message/Message-entree.html" TARGET="Affichage-site">réservation de principe auprès de P.K.I.</A>
<P><IMG SRC="../Images/galet.gif" BORDER=0 HEIGHT=19 WIDTH=20> Le site internet de la librairie
«Le Canotier » ne sera opérationnel
qu'en janvier. En attendant, vous pouvez toujours aller faire un tour sur la <A HREF="http://www.canotier.com/" TARGET="_blank">page d'accueil</A> qui vous propose d'enregistrer votre
adresse pour vous prévenir lors de la
mise en service ...
<P><IMG SRC="../Images/galet.gif" BORDER=0 HEIGHT=19 WIDTH=20> Peter BRAY se prépare à traverser l'Atlantique Nord en kayak dans le sens
Ouest-Est, comme l'a fait Mathieu MORVERAND en 1994. Nous n'avons pas encore le
détail de son projet, mais il est
possible de le contacter par messagerie à
l'adresse suivante : <A HREF="mailto:nakchallenge2000@freeserve.co.uk">nakchallenge2000@freeserve.co.uk</A>.
<P><IMG SRC="../Images/galet.gif" BORDER=0 HEIGHT=19 WIDTH=20> Paul
OLAI, kayakiste Norvégien parti
d'Oslo à l'été 1998 pour un tour d'Europe se trouve en ce moment
entre la Grèce et la
Turquie. Il nous a livré ses impressions de voyage dans les lettres <A HREF="../Lettres/Lettres-entree.html"
TARGET="Affichage-site">numéro 50, 52, 54, 55 et 56</A>.
<BR>Vous pouvez consulter le <A HREF="http://www.tv2.no/paul/" TARGET="_blank">site internet de TV2</A>, son sponsor Norvégien
, où vous trouverez une
section en anglais avec ses photos et ses commentaires.
<P><IMG SRC="../Images/galet.gif" BORDER=0 HEIGHT=19 WIDTH=20> Kim
Hafez, 29 ans, prépare une
expédition d'une durée de 6,5 ans en kayak
biplace et traîneau,
accompagné de son chien
Unghalak, au départ de
Paris pour un tour complet de l'hémisphère nord (45 000 km !) via
l'Europe occidentale et septentrionale, la Sibérie, l'Alaska, le Canada, le Groenland et l'Islande.<BR>Kim n'en est pas à sa première aventure. En 1996, il
entreprit un voyage d'un an et demi en canoë
à travers le Grand Nord
canadien : sept mille kilomètres de solitude
du Québec à l'océan Glacial arctique. Un an et demi après la première phrase relatant
l'aventure, le récit de ce
périple, publié par Transboréal vient de paraître sous le titre de « Unghalak, la quête sauvage ». Le livre peut être commandé à
l'auteur à l'adresse
ci-dessus pour un coût de
140 FRF + 25 FRF de frais de port. Le produit de la vente de ce livre servira à financer son nouveau voyage
qu'il compte réaliser sans
l'aide d'aucun sponsor.
<P><IMG SRC="../Images/galet.gif" BORDER=0 HEIGHT=19 WIDTH=20> Après une traversée de la Manche en kayak triplace en 1989, une expédition de Bretagne en
Islande en voilier en 1991, une traversée
de l'Atlantique en kayak en 1994, Mathieu MORVERAND prépare une nouvelle aventure d'Islande au Groënland en 2000. Pour tout
savoir sur ce projet, <A HREF="../Actualites/Farwell.html">cliquez
ici</A>.
<P><HR WIDTH=30%>
<P><IMG SRC="../Images/galet.gif" BORDER=0 HEIGHT=19 WIDTH=20> Les
statistiques de visite de notre site sont mises à jour pratiquement chaque jour, indépendamment
de la date de mise à jour
du site qui, elle, est associée
à la mise à jour des nouvelles.
<P><IMG SRC="../Images/galet.gif" BORDER=0 HEIGHT=19 WIDTH=20> PKI se
met en quatre pour vous rappeler vos meilleurs moments, mais n'oubliez pas que <FONT COLOR="#FF0000">le contenu des lettres et de ces pages vient
de ce que vous écrivez.</FONT> Vous pouvez notamment
enrichir la rubrique «Photos» avec vos reportages photos réalisés lors de vos navigations pittoresques et dûment commentés (dans la limite de la
place disponible sur le serveur qui nous héberge,
bien-entendu !).
<P><IMG SRC="../Images/galet.gif" BORDER=0 HEIGHT=19 WIDTH=20> PKI vous
plaît, ou vous interpelle ? N'hésitez pas à nous faire part de vos <A HREF="../Message/Message-entree.html"
TARGET="Affichage-site">
réactions et suggestions</A>.
<HR>
</BODY>
</HTML>
<HTML>
<!-- DATE DE CREATION: 01/01/2000
-->
<HEAD>
<TITLE>PARIS-KAYAK
International</TITLE>
<META NAME="Author" CONTENT="Philippe
LASNIER">
<META NAME="Description" CONTENT="PARIS-KAYAK International
est une lettre ouverte à tous les kayakistes de mer, français et étrangers francophones, qu'ils appartiennent
à une instance - officielle ou non - ou soient indépendants.">
<META NAME="Keywords" CONTENT="kayak,
mer, international, francophone, randonnée, raid, sport, côte, plage,
estran, pagaie, sauvetage">
<META NAME="Generator" CONTENT="WebExpert">
<LINK REL="stylesheet" HREF="Style.css"
TYPE="text/css">
</HEAD>
<BODY>
<DIV ALIGN="center">
<IMG SRC="Images/pki2000.jpg" WIDTH=538 HEIGHT=229>
<P CLASS=italique>Ce site est optimisé pour un affichage en 800 x
600 minimum.
<HR>
<A NAME="top"></A>
<TABLE>
<TR>
<TH
CLASS=titre>DERNIÈRES NOUVELLES</TH>
</TR>
<TR>
<TD
CLASS=soustitre>Mise à jour du 22 janvier 2000</TD>
</TR>
</TABLE>
</DIV>
<DIV ALIGN="center">
<TABLE>
<TR>
<TD
CLASS=texte1>
<TABLE>
<TR>
<TH
CLASS=titre1>Nouvelles de P.K.I.</TH>
</TR>
<TR>
<TD
CLASS=texte1><P CLASS=titre>L'objet de la dernière mise à jour</P>
<P>Les petites annonces et
l'actualité ont été mises à
jour.
<P CLASS=titre>Le site internet de PKI<BR>fait peau neuve pour l'an
2000 !</P>
<P>Une interface et une structure entièrement remaniées,
une zone réservée aux abonnés, accessible par mot de
passe, et contenant davantage d'informations comme le contenu complet des
lettres ou des bases de données
accessibles en ligne, vous trouverez presque tout ce que vous cherchez sur
notre site.
<P>Pour augmenter la rapidité d'accès
à l'information périodique, les nouvelles ont été placées
sur la page d'accueil. Il existe également
des informations du même
type réservées aux abonnés qui sont visibles sur la
page d'accueil de l'« espace
abonné ».
<P>Pour naviguer sans
encombre, retenez qu'un clic sur le kayak situé en haut à
gauche vous ramènera, quel que
soit l'endroit où vous
vous trouvez, sur la page d'accueil où
vous lisez ces lignes.
<P>Vous n'êtes
pas encore abonné ? une petite <A HREF="Visite.html" CLASS=texte>visite</A> s'impose.
<P>Tous nos abonnés nous ayant donné une adresse internet on reçu un message leur donnant
leur mot de passe pour l'accès
à la zone abonnés. Si vous êtes abonné et souhaitez posséder
un mot de passe, envoyez-nous un <A HREF="Message.html" CLASS=texte>message</A> avec vos nom,
prénom et adresse E-mail.
Un mot de passe vous sera retourné
par le même moyen.
<P CLASS=titre>Prochaines parutions</P><P>Les dates prévues de parution des
prochaines lettres sont les suivantes :
<P><UL TYPE=disc><LI>1<SUP>er</SUP>
février 2000,<LI>15 mars 2000,<LI>1<SUP>er</SUP>
mai 2000,<LI>15 juin 2000,<LI>1<SUP>er</SUP>
août 2000,<LI>15 septembre 2000,<LI>1er novembre 2000,<LI>15 décembre 2000.</UL><P
class=italique2>N.B. - Ces dates,
données à titre indicatif, sont
susceptibles d'être déplacées en fonction de l'actualité « kayak
de mer ».
</TD>
</TR>
</TABLE>
</TD>
<TD
CLASS=texte2>
<TABLE>
<TR>
<TH
CLASS=titre2>Actualité</TH>
</TR>
<TR>
<TD
CLASS=texte2><P CLASS=titre>COMMISSION MER ILE DE FRANCE<BR>29 et 30 JANVIER<BR>WEEK-END NETTOYAGE</P>
<P>Tous les jours, la mer dépose des plaques de mazout
sur les côtes de l'île de Groix. Vous êtes kayakistes, vous ne pouvez pas
rester indifférents ! La
commission mer Ile de France organise les 29 et 30 janvier un rassemblement
sans kayaks, mais avec cirés, bottes et
gants pour nettoyer un morceau du littoral.
<P><UL TYPE=disc><LI>Les frais de transport
sont pris sur le budget de la commission,
<LI>Le club de Trappes met à disposition ses deux
minibus,
<LI>L'hébergement en dortoirs (ne pas oublier son duvet), avec
douches chaudes, est également
gratuit,
<LI>Le nombre de participants
est limité à 16 personnes.</UL>
<P>Renseignements : Claude
BOYER - 01 39 95 67 76
<BR>Inscriptions : Marc STALIN
- 01 30 51 21 81</P>
<P CLASS=titre>Randonnée des calanques de Marseille</P>
<P>Cette manifestation de
Tourisme est organisée le
30 janvier par la Ligue Languedoc-Roussillon. Pour tout renseignement,
contacter <A HREF="mailto:User593210@aol.com" CLASS=texte>Caroline JEHL</A> - 15 Lot. Les Pins - 30250 SOMMIÈRES - Tél. : 04 66 77 20 28
<P CLASS=titre>Raid Halong 2000</P><P>Le C.K.C.V. – <A HREF="http://www.multimania.com/ckcv" TARGET="_blank">Canoë-Kayak
Club de Vannes</A> – organise, du
14 au 30 avril 2000, un séjour
en Vietnam Nord, comportant 3 ou 4 jours de tourisme Hanoï/Halong, 7 à
8 jours de raid découverte
en Baie d’Halong, en kayaks biplaces démontables
(fournis par l’organisateur), une course, en 2 manches Franco-Vietnamienne sur
une demi-journée, pour un
groupe prévu de 18
kayakistes.<BR><U>Le
C.K.C.V cherche 2 coéquipiers</U> évidemment idéaux,
kayakistes confirmés, adhérant bien à la vie en groupe et
adaptables aux inévitables
imprévus. Prix : 12000 à 13000 francs ; vaccins à jour (Diphtérie, Tétanos, Polio, Typhoïde,
Hépatites A et B). Bivouac
d’entraînement week-end 12/13 février, région Vannes.
<BR>Contact avant la fin de
janvier 2000 :<BR><A HREF="mailto:Annick.Guillerm@wanadoo.fr" CLASS=texte>Annick GUILLERM</A> : 02 97 40 50 54 ou <A HREF="mailto:ychsimon@club-internet.fr" CLASS=texte>Yves SIMON</A> : 02 97 42 78
93
<P CLASS=italique2>N.D.L.R.- Lire « DES KAYAKS AUX YEUX BRIDÉS »,
récit de Jean G. BUISSET
sur sa croisière en kayak
dans la Baie d’Halong, en 1995 (Cf. <A HREF="Lettres/Numero26.html" CLASS=texte>Lettre P.K.I. n°26</A>).
<P CLASS=titre>Baie de Disko</P><P>L'Auberge de Jeunesse de Paimpol organise une
expédition au Groenland du 7 au 30
juillet 2000. Il n'y a que dix places. Pour en savoir plus, <A HREF="Actualites/Disko.html"
CLASS=texte>cliquez ici</A>.
<P CLASS=titre>SISKA 2000</P><P>La SISKA 2000 (Sardinia International Sea Kayak
Adventure) aura lieu du 30 avril au 7 mai 2000 dans les îles
de la Maddalena, au Nord de la Sardaigne. Ce rassemblement touristique est réservé au pagayeurs expérimentés et en priorité
aux participants des rassemblements internationaux SISKA 1995, SISKA 1996, ISKA
1997, GISKA 1998 et NISKA 1999. Il y aura une limitation du nombre de
participants par pays. Vous pouvez d'ores et déjà
effectuer une réservation
de principe <A HREF="Message.html" CLASS=texte>auprès de
P.K.I.</A>
<P CLASS=titre>« Le
Canotier » sur le
web</P><P>Le site internet
de la librairie « Le
Canotier » ne sera
opérationnel qu'en
janvier. En attendant, vous pouvez toujours aller faire un tour sur la <A HREF="http://www.canotier.com/" TARGET="_blank" CLASS=texte>page
d'accueil</A> qui vous
propose d'enregistrer votre adresse pour vous prévenir lors de la mise en service ...
<P CLASS=titre>Traversée de l'Atlantique Nord</P><P>Peter BRAY se prépare à
traverser l'Atlantique Nord en kayak dans le sens Ouest-Est, comme l'a fait
Mathieu MORVERAND en 1994.
<P CLASS=titre>Tour de l'hémisphère
nord</P><P>Kim Hafez, 29
ans, prépare une expédition d'une durée de 6,5 ans en kayak
biplace et traîneau,
accompagné de son chien Unghalak,
au départ de Paris pour un
tour complet de l'hémisphère nord (45000 km !) via
l'Europe occidentale et septentrionale, la Sibérie, l'Alaska, le Canada, le Groenland et l'Islande.</P>
<P CLASS=titre>Tour d'Europe</P><P>Paul OLAI, kayakiste Norvégien parti d'Oslo à
l'été 1998 pour un tour d'Europe se trouve en ce moment
entre la Grèce et la
Turquie. Il nous a livré
ses impressions de voyage dans les lettres numéro <A HREF="Lettres/Numero50.html" CLASS=texte>50</A>, <A HREF="Lettres/Numero52.html"
CLASS=texte>52</A>, <A HREF="Lettres/Numero54.html" CLASS=texte>54</A>, <A HREF="Lettres/Numero55.html"
CLASS=texte>55</A> et <A HREF="Lettres/Numero56.html" CLASS=texte>56</A>.
<BR>Vous pouvez consulter le <A HREF="http://www.tv2.no/paul/" TARGET="_blank" CLASS=texte>site
internet de TV2</A>, son sponsor
Norvégien, où vous trouverez une section
en anglais avec ses photos et ses commentaires.</P>
<P CLASS=titre>Farwell</P><P>Après
une traversée de la Manche
en kayak triplace en 1989, une expédition
de Bretagne en Islande en voilier en 1991, une traversée de l'Atlantique en kayak en 1994, Mathieu MORVERAND
prépare une nouvelle
aventure d'Islande au Groenland en 2000. Pour tout savoir sur ce projet, <A HREF="Actualites/Farwell.html"
CLASS=texte>cliquez ici</A>.</P>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<HR WIDTH=30%>
<TABLE><TR><TD
CLASS=menu><A HREF="#top">Haut de la page</A></TD></TR></TABLE>
</DIV>
<HR>
</BODY>
</HTML>
/*
AUTEUR: PHILIPPE LASNIER */
/* DATE DE CREATION: 01/01/2000 */
/* Styles communs */
A {color : #003366 ; text-decoration : none}
A.texte {color : #0000FF}
A:hover {color : #FF0000}
BODY {color : #003366 ; background-color : #BACFE6 ; background-image : url(Images/Fond.gif) ; background-attachment : fixed}
IMG {border : solid 3pt ; border-color : #006699}
IMG.titre {border : 0pt}
HR {color : #006699}
P {font-family : "Arial" ; font-size : 10pt ; color : #003366 ; text-align : justify}
P.important {font-family : "Arial" ; font-size : 10pt ; color : #FF0000 ; text-align : center}
P.titre {font-family : "Arial" ; font-size : 10pt ; font-weight : bold ; color : #003366 ; text-align : center}
P.italique {font-family : "Arial" ; font-style : italic ; font-size : 10pt ; color : #003366 ; text-align : center}
P.italique2 {font-family : "Arial" ; font-style : italic ; font-size : 8pt ; color : #003366}
P.italique3 {font-family : "Arial" ; font-style : italic ; font-size : 8pt ; color : #003366 ; text-align : center}
SUP.important {font-family : "Arial" ; font-size : 8pt ; color : #FF0000}
LI {font-family : "Arial" ; font-size : 10pt ; color : #003366 ; text-align : justify}
LI.G {font-family : "Arial" ; font-size : 10pt ; color : #003366 ; text-align : left}
TABLE.bord {border-collapse : collapse ; border-color : #003366}
TH.sommaire {width : 185pt ; border : none ; font-size : 10pt ; font-family : "Arial" ; color : #BACFE6 ; background : #006699 ; vertical-align : top}
TD.sommaire {width : 185pt ; border : none ; background : #BACFE6 ; font-size : 10pt ; font-family : "Arial" ; color : #003366}
TD.marge {width : 4pt}
TH.titre {width : 320pt ; color : #003366 ; background : #BACFE6 ; border : solid 1pt ; border-color : #003366 ; text-align : center}
TH.titretb {width : 545pt ; color : #003366 ; background : #BACFE6 ; border : solid 1pt ; border-color : #003366 ; text-align : center}
TH.logo {width : 150pt ; text-align : left}
TH.soustitre {width : 320pt ; border : none ; font-size : 16pt ; font-family : "Times New Roman" ; color : #003366}
TD.soustitre {width : 320pt ; color : #003366 ; border : none ; text-align : center ; font-style : italic ; font-size : 10pt ; font-family : "Arial"}
TD.menu {width : 60pt ; font-family : "Arial" ; font-size : 8pt ; text-align : center ; background-color : #BACFE6; border-collapse : collapse ; border : solid 1pt ; border-style : ridge ; border-color : #99CCFF}
TD.menu2 {width : 43pt ; font-family : "Arial" ; font-size : 8pt ; text-align : center ; background-color : #BACFE6; border-collapse : collapse ; border : solid 1pt ; border-style : ridge ; border-color : #99CCFF}
TD.aide {width : 10pt ; font-family : "Arial" ; font-size : 8pt ; text-align : center ; background-color : #BACFE6; border-collapse : collapse ; border : solid 1pt ; border-style : ridge ; border-color : #99CCFF}
TH.titre1 {width : 200pt ; color : #BACFE6 ; background : #006699 ; border : none}
TD.texte1 {width : 200pt ; border : none ; background : #BACFE6 ; vertical-align : top}
TD.texte2 {width : 360pt ; border : none ; background : #BACFE6 ; vertical-align : top}
TH.titre2 {width : 360pt ; color : #BACFE6 ; background : #006699 ; border : none}
TD.texte3 {width : 500pt ; border : none ; background : #BACFE6 ; vertical-align : top}
TD.texte4 {width : 560pt ; border : none ; background : #BACFE6 ; font-size : 10pt ; font-family : "Arial" ; color : #003366}
TH.texte4 {width : 560pt ; border : none ; background : #006699 ; font-size : 10pt ; font-family : "Arial" ; color : #BACFE6}
TD.texte5 {width : 100pt ; border : none ; background : #BACFE6 ; font-size : 10pt ; font-family : "Arial" ; color : #003366}
TH.texte6 {width : 375pt ; border : none ; font-size : 10pt ; font-family : "Arial" ; color : #BACFE6 ; background : #006699 ; vertical-align : top}
TD.texte6 {width : 375pt ; border : none ; background : #BACFE6 ; font-size : 10pt ; font-family : "Arial" ; color : #003366}
TH.texte8 {width : 185pt ; border : none ; font-size : 10pt ; font-family : "Arial" ; color : #BACFE6 ; background : #006699 ; vertical-align : top ; text-align : center}
TD.texte8 {width : 185pt ; border : none ; background : #BACFE6 ; font-size : 10pt ; font-family : "Arial" ; color : #003366 ; vertical-align : top ; text-align : justify}
TD.texte9 {width : 280pt ; border : none ; background : #BACFE6 ; font-size : 10pt ; font-family : "Arial" ; color : #003366 ; vertical-align : bottom ; text-align : justify}
TD.texte10 {width : 100pt ; border : none ; background : #BACFE6 ; font-size : 10pt ; font-family : "Arial" ; color : #003366 ; text-align : center ; vertical-align : center}
TD.texte11 {width : 450pt ; border : none ; background : #BACFE6 ; font-size : 10pt ; font-family : "Arial" ; color : #003366 ; vertical-align : top ; text-align : justify}
TH.tb0 {width : 450pt ; color : #BACFE6 ; background : #006699 ; border : none ; font-size : 10pt ; font-family : "Arial"}
TH.tb1 {width : 70pt ; color : #BACFE6 ; background : #006699 ; border : solid 1pt ; font-size : 8pt ; font-family : "Arial" ; vertical-align : top ; text-align : center}
TH.tb2 {width : 280pt ; color : #BACFE6 ; background : #006699 ; border : solid 1pt ; font-size : 8pt ; font-family : "Arial" ; vertical-align : top ; text-align : center}
TD.tb1 {width : 70pt ; color : #003366 ; background : #BACFE6 ; border : solid 1pt ; font-size : 8pt ; font-family : "Arial" ; vertical-align : top ; text-align : center}
TD.tb2 {width : 280pt ; color : #003366 ; background : #BACFE6 ; border : solid 1pt ; font-size : 8pt ; font-family : "Arial" ; vertical-align : top ; text-align : justify}
TH.tb3 {width : 150pt ; color : #BACFE6 ; background : #006699 ; border : solid 1pt ; font-size : 8pt ; font-family : "Arial" ; vertical-align : top ; text-align : center}
TD.tb3 {width : 150pt ; color : #003366 ; background : #BACFE6 ; border : solid 1pt ; font-size : 8pt ; font-family : "Arial" ; vertical-align : top ; text-align : justify}
TH.tb4 {width : 280pt ; color : #BACFE6 ; background : #006699 ; border : solid 1pt ; font-size : 8pt ; font-family : "Arial" ; vertical-align : top ; text-align : center}
TD.tb4 {width : 280pt ; color : #003366 ; background : #BACFE6 ; border : solid 1pt ; font-size : 8pt ; font-family : "Arial" ; vertical-align : top ; text-align : justify}
TH.tb5 {width : 50pt ; color : #BACFE6 ; background : #006699 ; border : solid 1pt ; font-size : 8pt ; font-family : "Arial" ; vertical-align : top ; text-align : center}
TD.tb5 {width : 50pt ; color : #003366 ; background : #BACFE6 ; border : solid 1pt ; font-size : 8pt ; font-family : "Arial" ; vertical-align : top ; text-align : center}
TH.tb6 {width : 340pt ; color : #BACFE6 ; background : #006699 ; border : solid 1pt ; font-size : 8pt ; font-family : "Arial" ; vertical-align : top ; text-align : center}
TD.tb6 {width : 340pt ; color : #003366 ; background : #BACFE6 ; border : solid 1pt ; font-size : 8pt ; font-family : "Arial" ; vertical-align : top ; text-align : justify}
TD.tb7 {width : 180pt ; color : #003366 ; background : #BACFE6 ; border : none ; font-size : 10pt ; font-family : "Arial" ; vertical-align : top ; text-align : justify ; font-style : italic}
TD.tb8 {width : 180pt ; color : #003366 ; background : #BACFE6 ; border : none ; font-size : 10pt ; font-family : "Arial" ; vertical-align : top ; text-align : justify}
<HTML>
<!-- DATE DE CREATION: 01/01/2000
-->
<HEAD>
<TITLE>PARIS-KAYAK
International</TITLE>
<META NAME="Author" CONTENT="Philippe
LASNIER">
<META NAME="Description" CONTENT="PARIS-KAYAK International
est une lettre ouverte à tous les kayakistes de mer, français et étrangers francophones, qu'ils appartiennent
à une instance - officielle ou non - ou soient indépendants.">
<META NAME="Keywords" CONTENT="kayak,
mer, international, francophone, randonnée, raid, sport, côte, plage,
estran, pagaie, sauvetage">
<META NAME="Generator" CONTENT="WebExpert">
<META HTTP-EQUIV="Window-target" CONTENT="_top">
</HEAD>
<FRAMESET ROWS="70,*" FRAMEBORDER=no FRAMESPACING=0 BORDER=0>
<FRAMESET
COLS="80,*" FRAMEBORDER=no
FRAMESPACING=0 BORDER=0>
<FRAME NAME="Logo"
SRC="Logo.html"
MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING="NO" NORESIZE>
<FRAMESET ROWS="33,*"
FRAMEBORDER=no FRAMESPACING=0
BORDER=0>
<FRAME NAME="Titre" SRC="Titre.html"
MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING="NO" NORESIZE>
<FRAME NAME="Menu" SRC="Menu.html"
MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING="NO" NORESIZE>
</FRAMESET>
</FRAMESET>
<FRAME
NAME="Affichage" SRC="Accueil.html" MARGINWIDTH=0 MARGINHEIGHT=10>
</FRAMESET>
</HTML>