) Introduction à la création de pages Web

Transcription

1. ) Introduction à la création de pages Web ______________________________________2
2. ) Comment écrire une balise ? _______________________________________________4
3. ) Les balises obligatoires d'une page HTML ____________________________________6
4. ) Les caractères accentués en HTML _________________________________________8
5. ) Appliquer une forme spéciale à du texte _____________________________________10
6. ) Les titres ______________________________________________________________12
7. ) Les listes ______________________________________________________________13
8. ) L'insertion d'images et de sons ____________________________________________15
9. ) L'insertion de liens hypertextes ____________________________________________18
10. ) La création de tableaux _________________________________________________21
11. ) Les fonds d'écran et les couleurs de votre page ______________________________24
12. ) Quelques astuces ______________________________________________________27
13. ) Les formulaires________________________________________________________30
14. ) Les frames____________________________________________________________35
15. ) Les images à fond transparent____________________________________________45
16. ) Les images animées ____________________________________________________47
17. ) Les images sensitives ___________________________________________________48
18. ) Un peu de JavaScript ___________________________________________________50
19. ) Mise en place sur le serveur FTP _________________________________________77
20. ) Les Metas Tags ________________________________________________________79
Pour en savoir plus _________________________________________________________81
CAMOS-CNAM/LWH
Page 1 sur 81.
1.) Introduction à la création de pages Web
Tout d'abord, nous allons commencer par quelques informations et conseils.
1.1.) Qu'est ce qu'une page Web ?
Une page web, c'est tout simplement une page contenant du texte et quelques symboles
spéciaux. Le texte est au format ASCII, c'est à dire du texte brut sans formatage spécial
comme le fait votre traitement de texte.
Le texte brut, c'est ce que vous produisez lorsque vous écrivez avec le NOTEPAD ou EDIT
sur PC, et SIMPLETEXT sur Macintosh.
Les symboles spéciaux eux, sont aussi du texte ASCII mais n'apparaîtront pas à l'écran. Pour
cela nous allons les entourer à chaque fois d'un "<" et d'un ">". Ces symboles spéciaux sont
appelés des "balises" ou des "tags". Ici nous utiliserons le mot balise pour simplifier.
Pourquoi un fichier texte me diriez-vous ? Tout simplement car il peut être reconnu sans
problèmes d'un environnement à un autre. Une page de texte peut donc être lue et interprétée
par n'importe quel navigateur sur n'importe quelle plate-forme que ce soit un PC, un Mac, une
station Unix, un Amiga, ou tout autre ordinateur.
Une page Web, c'est essentiellement du texte, mais elle peut aussi comporter des images, du
son, des animations voir même des vidéos. Pour afficher ces images, écouter du son etc... il
vous faudra incorporer une certaine syntaxe dans l'écriture de votre page. Nous verrons tout
cela plus loin.
Une page Web va aussi comporter des liens; ceux-ci servent à renvoyer le lecteur vers soit
une autre partie de votre texte soit vers un nouvelle page. Cette nouvelle page pourra se
trouver n'importe où dans le monde, pourvu que l'ordinateur qui héberge cette page soit relié à
Internet et qu'il soit allumé.
A noter : Un lecteur potentiel viendra se connecter sur votre page et prendra le temps de lire
vos informations si elles sont biens présentées, mais il ne reviendra les consulter que si le
contenu de vos informations est intéressant et mis à jour régulièrement. C'est pourquoi je vous
invite à bien réfléchir au contenu comme au contenant de vos informations. Une page mal
réalisée ne sera pas lue, tout comme une page vieille de quelques semaines voir quelques
mois. Evitez aussi de trop surcharger votre page en grosses images, tout le monde n'a pas le
dernier modèle de modem, et les connexions peuvent parfois être longues si le serveur est
encombré.
1.2.) De quel matériel ai-je besoin ?
Techniquement, vous possédez tout le matériel nécessaire pour réaliser votre première page
Web. Il est vrai qu'il existe des logiciels pour aider à la réalisation de pages, d'ailleurs je vous
conseille fortement d'en utiliser un, mais pour le moment vous pouvez vous en passer. Ces
outils, qui facilitent la création de pages sont des "éditeurs HTML". Un éditeur HTML est un
outil qui vous permet le plus souvent par un simple clic d'insérer une image, de réaliser un
CAMOS-CNAM/LWH
Page 2 sur 81.
tableau, alors que manuellement comme nous allons le voir, c'est assez fastidieux. Mais vous
êtes ici pour apprendre, non ?
Pour ceux à qui cela aurait échappé, HTML signifie HyperText Markup Language, sous ce
barbarisme on désigne tout simplement du texte auquel nous pourrons ajouter des liens
HyperTextes, liens qui par un simple clic de souris vous emmèneront sur une nouvelle page
avec elle aussi des liens etc...
Pour votre première page munissez-vous d'un éditeur de texte tel NOTEPAD (bloc-notes) sur
PC ou SIMPLETEXT sur Macintosh. Vous allez créer un nouveau document que vous
sauvegarderez ensuite sous le nom TEST.HTM puisque les fichiers HTML portent comme
extension HTM ou HTML.
1.3.) Mise en place de mon environnement de travail
Sur PC Windows, Cliquez sur DEMARRER, PROGRAMMES, ACCESSOIRES, BLOCNOTES.
Sauvez le fichier avec ENREGISTRER SOUS, Placez le fichier sur votre bureau par exemple,
et nommer le fichier TEST.HTM (attention à bien mettre .HTM).
Pour afficher le contenu de votre fichier dans Netscape Navigator vous utiliserez ensuite le
menu FICHIER, CONSULTER UNE PAGE, CHOISIR LE FICHIER, sélectionner le fichier
TEST.HTM, OUVRIR, OUVRIR.
Vous pouvez bien évidemment cliquer deux fois rapidement sur le fichier TEST.HTM, votre
navigateur vous l'ouvrira
On résume :
Le HTML c'est du texte brut produit avec un simple éditeur de texte.
On rajoute des instructions dans ce texte pour le mettre en page.
On visualise le résultat sur son navigateur.
CAMOS-CNAM/LWH
Page 3 sur 81.
2.) Comment écrire une balise ?
2.1.) Les balises
Une balise est donc un ensemble de caractères qui sera entouré d'un "<" et d'un ">". Ces
balises servent à la mise en page de vos documents, tout comme sur votre traitement de texte
où vous agrandissez la taille de la police de caractère afin que le titre de votre page se
démarque du texte. Et bien ici, c'est le même principe, seule différence, puisque nous écrivons
un texte au format brut (ASCII), il nous faut des symboles spéciaux pour présenter certaines
parties du texte différemment.
Avant de continuer, il est important que vous sachiez que tous les navigateurs Internet
(comme Netscape Navigator ou Communicator, Miscrosoft Internet Explorer, Opera,
Mosaic ...) ne reconnaissent pas tout à fait les mêmes balises. Les balises de mise en page les
plus simples comme "le gras", "l'italique", "les liens", "l'insertion des images" etc.... sont
reconnues par tous les navigateurs (c'est le HTML niveau 2, niveau 3 et niveau 3.2).
2.2.) Les balises avancées
Des balises plus compliquées sont souvent spécifiques à un Navigateur ou font partis de
versions plus avancées du langage (le HTML 4 avec un certain nombre de nouveaux concepts
comme le DHTML, les CSS etc...). Elles sont actuellement normalisées mais peuvent être mal
interprétées par un ancien navigateur ou un navigateur exotique. Si vous utilisez des balises
propres à Netscape, sachez que toutes les personnes qui utilisent un autre logiciel ne verront
pas votre page de la façon dont vous vouliez qu'elle apparaisse, et vice et versa. Le HTML est
un langage qui évolue au fil des mois, chaque nouvelle sortie de Navigateur apporte une
pierre à l'édifice du HTML, mais complique aussi les choses à chaque fois un peu plus.
La dernière version normalisée est la version 4.0 du langage HTML, cette version apporte un
lot de nouvelles balises et compliquent énormément le langage, le but de ce cours n'est pas de
vous apporter des connaissances sur les dernières possibilités mais de vous apprendre les
bases.
2.3.) Ecrire une balise et ses attributs
Les balises fonctionnent majoritairement par paire. Une balise d'ouverture que l'on écrit
"<BALISE>", et la balise de fermeture qui s'écrit "</BALISE>". Le "/" sert donc à fermer une
instruction. Imaginez que vous vouliez écrire un mot en gras dans une phrase. Cela donnerait
à peu près ça :
cette partie du texte est normale mais ici on écrit en
<ouvrir_gras> gras </fermer_gras> et ici à nouveau en
normal.
"Ouvrir_gras" et "Fermer_gras" ne sont pas de véritables balises, c'est juste un
exemple pour vous montrez l'esprit de la syntaxe HTML.
CAMOS-CNAM/LWH
Page 4 sur 81.
Allons un peu plus loin : Les balises peuvent être accompagnées d'un ou plusieurs attributs
supplémentaires qui auront alors des arguments.
<nom_de_la_balise> texte </nom_de_la_balise>
<nom_de_la_balise nom_de_l'attribut=argument> texte
</nom_de_la_balise>
Exemples de balises existantes
<TITLE> Mes informations </TITLE>
et
<A HREF="argument"> texte </A>
A noter : les balises s'enchaînent comme les boucles de programmes, c'est à dire que l'on va
trouver une paire de balises à l'intérieur d'une autre paire de balises.
<HEAD> <TITLE> titre </TITLE> </HEAD> : c'est la bonne
syntaxe.
<HEAD> <TITLE> titre </HEAD> </TITLE> : c'est la mauvaise
syntaxe.
2.4.) Les erreurs de syntaxe
Enfin en cas d'erreur de syntaxe dans le positionnement ou le choix des balises la sanction
sera simplement un affichage incorrect par le navigateur. N'espérez pas une boite de dialogue
avec " erreur : / attendu à la ligne 17 ".
La notion d'enchaînement correct des balises est fondamentale, pour éviter de perdre trop de
temps à comprendre pourquoi votre navigateur n'affiche pas ce que vous souhaitez afficher,
apprenez à écrire la balise de fermeture juste après la balise d'ouverture (afin de pas oublier de
fermer la balise) et cela avant même d'écrire des informations entre la base d'ouverture et de
fermeture.
On résume :
Les balises s'écrivent par pair, une balise pour ouvrir, l'autre pour fermer.
On écrit proprement l'enchaînement : <1> <2> <3> blabla </3> </2> </1>.
La balise d'ouverture peut posséder des arguments supplémentaires.
CAMOS-CNAM/LWH
Page 5 sur 81.
3.) Les balises obligatoires d'une page HTML
3.1.) Les commandes obligatoires
Chaque document HTML doit posséder quelques commandes obligatoires pour que tous les
navigateurs puissent interpréter correctement votre page.
Le document doit commencer par <HTML> et finir par </HTML>, tout simplement pour
signaler que le document est un document HTML et que les instructions comprises entre ces
deux balises sont des instructions HTML.
Le document se découpe ensuite en 2 parties :
1. <HEAD> pour indiquer que c'est l'en-tête de la page suivi de </HEAD>
2. <BODY> qui comportera le corps de votre page, donc l'essentiel de votre texte,
suivi de </BODY>
Entre les deux balises d'ouverture et de fermeture de l'en-tête, nous allons trouver l'instruction
<TITLE> et </TITLE>, qui sera le titre de votre page (ce titre se retrouvera dans la barre
supérieure de votre Navigateur, ainsi que dans les menus de signets).
Récapitulons, votre document doit nécessairement comporter ces balises :
<HTML>
<HEAD>
<TITLE> Inserez_votre_titre_ici </TITLE>
</HEAD>
<BODY>
Le_texte_de_votre_page_ici
</BODY>
</HTML>
Tout le texte de votre page web se trouvera entre les balises <BODY> et </BODY>
3.2.) Les retours à la ligne
Il est important de savoir que les retours à la ligne avec la touche "ENTREE ou RETURN" ne
sont pas pris en compte par les navigateurs. Pour marquer un retour à la ligne il faut utiliser la
balise <BR> qui signifie "break" c'est à dire retour à la ligne. Pour marquer une fin de
paragraphe il faut utiliser <P> qui signifie "Paragraph".
Notez que ces instructions ne nécessitent pas une balise d'ouverture et une balise de
fermeture. Il est vrai que la syntaxe rigoureuse exigerait d'écrire le texte suivant :
<P> <BR> Texte_de_la_ligne_1 </BR>
<BR> Texte_de_la_ligne_2 </BR> </P>
CAMOS-CNAM/LWH
Page 6 sur 81.
Tout cela n'est pas nécessaire, les navigateurs savent interpréter les documents n'ayant pas les
balise de fermeture </P> et </BR>. Une raison simple à cela, c'est un début de ligne ou de
paragraphe marque obligatoirement la fin de la ligne précédente ou du paragraphe précédent.
Par convention, on va marquer la fin d'une ligne par <BR> et une fin de paragraphe <P> alors
que ce sont en fait des balises d'ouverture d'instruction et non de fermeture.
On résume :
Toute page Web commence par <HTML> et finit par </HTML>.
Il y a deux parties principales dans une page, <HEAD> </HEAD> et <BODY> </BODY>.
Je vais à la ligne par <BR> et je saute une ligne par <P> (ou <BR><BR>).
CAMOS-CNAM/LWH
Page 7 sur 81.
4.) Les caractères accentués en HTML
4.1.) Les accents
Voici sûrement la chose la plus pénible du langage HTML : Les accents. En effet, le HTML a
été développé par des américains du C.E.R.N. et à l'origine il ne reconnaissait pas les
caractères accentués. Pour que votre texte puisse être lu par tous les navigateurs il vous faudra
écrire les accents d'une certaine façon.
" é " s'écrit " é "
" à " s'écrit " à "
" ï " s'écrit " ï "
" ô " s'écrit " ô "
" ç " s'écrit " ç "
" ñ " s'écrit " ñ "
Pour obtenir toutes les combinaisons, la syntaxe est "&"+"la_lettre"+"l'effet"+";"
Les effets "acute" pour accent aigue, "grave" pour accent grave, "uml" pour tréma, "circ" pour
circonflexe, "cedil" pour une cédille, "tilde" pour un tilde.
Puisque certains caractères sont utilisés pour identifier les balises du texte, c'est le cas par
exemple pour " > ", " < ", " & ", et les guillemets, si l'on a besoin de les afficher il faut utiliser
les substitutions suivantes:
" < " s'écrit " < "
" > " s'écrit " > "
" & " s'écrit " & "
guillemet s'écrit " " "
Le mot "général" s'écrit donc : général
4.2.) Convertir plus rapidement
C'est une véritable gymnastique au début, vous pouvez aussi utiliser un Editeur HTML qui
vous permettra de saisir le texte comme il faut. C'est à dire que lorsque vous taperez sur la
touche " é ", " é" s'affichera.
Un autre moyen est aussi d'écrire son texte avec un vrai traitement de texte, de sauver les
textes au format RTF et d'utiliser ensuite un convertisseur RTF ---> HTML.
Cette fonction existe par exemple dans "wordia" un logiciel pour Word 6 ou 95 distribué
gratuitement par Microsoft, et dans Word 97 il y a une fonction se sauvegarde au format
HTML. Sur Mac il existe un utilitaire qui s'appelle RTF to HTML qui est shareware, Word 98
sur Mac permet aussi d'exporter au format HTML. Au pire vous pouvez taper tout votre texte
normalement avec les accents, et ensuite faire un simple "REMPLACER dans tout le texte"
des lettres accentuées par leur codage en HTML.
A NOTER : Les dernières versions des navigateurs (à partir de Netscape 2 en fait),
reconnaissent les caractères accentués, cependant, tout le monde n'a pas une version récente.
CAMOS-CNAM/LWH
Page 8 sur 81.
De plus, suivant le système que vous utilisez (PC, MAC, UNIX...) les accents ne sont pas
codés de la même manière dans les tables de police de caractères.
On résume :
Si je ne converti pas mes accents, certaines personnes ne pourront pas lire mes pages
correctement (Windows, Mac et Unix ne codent pas leur accent de la même manière, il faut
donc utiliser le codage HTML).
Des outils existent pour convertir les caractères accentués rapidement.
Ne pas oublier de finir par " ; " les caractères.
CAMOS-CNAM/LWH
Page 9 sur 81.
5.) Appliquer une forme spéciale à du texte
5.1.) Les effets
Le texte brut c'est bien, mais si on rajoutait du gras, de l'italique, etc...
Voici les instructions:
<B> met le texte en gras </B>
<STRONG> met le texte en gros </STRONG> idem que gras
<I> met le texte en italique </I>
<CENTER>
centre le texte au milieu de l'écran
</CENTER>
<EM> met le texte en emphase </EM> idem que italique mais met le
texte en rouge sur certains navigateurs
<U> souligne le texte </U> à éviter car cela ressemble à un lien
hypertexte.
<BLINK> Fait clignoter le texte </BLINK> ne fonctionne pas avec
tous les navigateurs, et beaucoup de gens détestent quand ça clignote.
<BIG> grossit le texte </BIG> ne fonctionne pas avec tous les
navigateurs
<SMALL> rapetisse
Internet Explorer
le
texte
</SMALL> ne fonctionne que sur Netscape et
<STRIKE> barre le texte </STRIKE>
<CODE> sert pour les listings de programmes </CODE> permet
d'utiliser la police de caractère non proportionnelle "courrier"
<BLOCKQUOTE>
ceci est une citation qui apparaît en retrait par
rapport au texte
</BLOCKQUOTE>
Texte préformaté. La même chose que <CODE> mais avec les changements de lignes en plus.
Peut servir pour présenter un tableau correctement aligné.
<PRE>
Budget :
Revenu brut
CAMOS-CNAM/LWH
750 000,00 F
Page 10 sur 81.
Cout de revient
Benefice brut
</PRE>
132 825,00 F
617 175,00 F
<ADDRESS>
pour donner son adresse
</ADDRESS>
Pour mettre le texte <SUP>
Pour mettre le texte <SUB>
en exposant
en indice
</SUP>
</SUB>
<HR> barre de séparation
----------------------------------------------------------
On résume :
Eviter l'instruction <EM>, certains navigateurs ne la reconnaissent pas comme vous le
souhaitez.
Eviter l'instruction <BLINK> ca ennuie tout le monde.
Eviter l'instruction <U> on peut penser qu'il s'agit de liens hypertextes.
CAMOS-CNAM/LWH
Page 11 sur 81.
6.) Les titres
6.1.) Différentes tailles de titres
Pour créer des titres de différentes tailles, nous allons utiliser l'instruction <Hx> et </Hx>
avec pour "x" des valeurs allant de 1 (le plus grand) à 6 (le plus petit).
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>
Niveau
Niveau
Niveau
Niveau
Niveau
Niveau
de
de
de
de
de
de
titre
titre
titre
titre
titre
titre
taille
taille
taille
taille
taille
taille
1
2
3
4
5
6
</H1>
</H2>
</H3>
</H4>
</H5>
</H6>
On résume :
On n'utilise plus vraiment l'instruction <Hx> qui servait autrefois dans les documents
scientifiques pour bien séparer les titres des sous-titres. On lui préfère maintenant l'instruction
<FONT SIZE="x"> que nous verrons plus loin.
CAMOS-CNAM/LWH
Page 12 sur 81.
7.) Les listes
Avec le langage HTML vous pouvez créer des listes dans lesquelles chaque élément se trouve
sur une ligne différente.
Notez que le <BR> ou les instructions de clôture en fin de ligne sont facultatives avec la
plupart des navigateurs.
7.1.) Les listes simples
Le code:
<UL>
<LI> des pommes <BR>
<LI> des poires <BR>
<LI> des scoubidous <BR>
</UL>
Donne comme résultat
•
•
•
des pommes
des poires
des scoubidous
Si vous n'êtes pas satisfaits du petit cercle utilisé comme marqueur vous pouvez en changer
par <UL TYPE="disc"> ou <UL TYPE="square"> ou <UL TYPE="circle">.
7.2.) Les listes numérotées
Le code:
<OL>
<LI> élément 1 de la liste
</OL>
CAMOS-CNAM/LWH
Donne comme résultat
1. élément 1 de la liste
Page 13 sur 81.
7.3.) Les listes des définitions
Ces listes n'ont pas de marqueurs au début de chaque rubrique, et chaque rubrique se compose
d'un titre (DT) suivi de une ou plusieurs définitions (DD) qui apparaissent en retrait.
Voici le résultat :
<DL>
<DT> Première définition
<DD> Premier texte
<DT> Deuxième définition
<DD> Deuxième texte
<DT> Troisième définition
<DD> Troisième texte
</DL>
Première définition
Premier texte
Deuxième définition
Deuxième texte
Troisième définition
Troisième texte
7.4.) Imbriquer les différentes listes
<DL>
<DT> <B>Premier titre </B>
<DD><I>Premier texte </I>
<OL>
<LI> <U>élément 1</U>
<LI> <U>élément 2 </U>
</OL>
<DT> <B> Deuxième titre </B>
<DD> <I>Deuxieme Texte </I>
<UL>
</UL>
<DT> <B>Troisieme titre </B>
<DD> <I>Troisième texte </I>
</DL>
Premier titre
Premier texte
1. élément 1
2. élément 2
3. élément 3
tDeuxieme titre
Deuxieme texte
•
élément 1
•
élément 2
•
élément 3
Troisieme titre
Troisieme texte
On résume :
Une instruction spécifique pour débuter une liste et clore une liste.
Une instruction par ligne de liste.
On peut imbriquer des listes dans d'autres listes.
CAMOS-CNAM/LWH
Page 14 sur 81.
8.) L'insertion d'images et de sons
8.1.) Quels formats d'image utiliser ?
Insérer des images dans un document HTML n'est pas très difficile, il existe cependant des
restrictions. Actuellement 2 formats d'images sont compatibles avec tous les navigateurs, ces
formats sont le GIF (87 et 89a) et le Jpeg. Vos images devront donc être converties dans l'un
de ces formats et porter l'une des extensions suivantes : .GIF .JPEG .JPG et .JPE. Vous
pouvez tenter d'incorporer d'autres formats, mais vous limitez la consultation des pages au
navigateur qui supporte ce format (les navigateurs récents supportent le .PNG, .BMP etc...).
Le GIF est limité à 256 couleurs alors que le Jpeg permet l'affichage jusqu'à 16 millions de
couleurs et offre une meilleure compression (avec perte de qualité). Le GIF a cependant des
options intéressantes comme la transparence que nous verrons plus loin.
8.2.) Insérez des images
Pour insérer des images, nous allons utiliser l'instruction <IMG>. Voici la syntaxe (partant du
principe que l'image est dans le même répertoire) :
<IMG SRC="nom_de_l'image.gif">
<IMG SRC="nom_de_l'image.jpg">
<IMG SRC="nom_de_l'image.gif"
ALT="Image de maison">
Insertion d'une image GIF.
Insertion d'une image Jpeg.
Insertion d'une image avec un texte
explicatif (ALT signifie alternatif) sur
l'image si la personne a désactivé
l'autochargement des images dans netscape
3, ou pour les navigateurs plus récents
donner un descriptif lorsque vous passez la
souris au dessus de l'image.
L'instruction <IMG> supporte aussi d'autres critères, voici quelques exemples :
left, right, top,
bottom, absbottom.
texttop,
middle,
absmiddle,
baseline,
Ces critères servent à aligner l'image par rapport à du texte. Leur utilisation se fait de la
manière suivante :
<IMG ALIGN="left"
SRC="nom_de_l'image.gif">
<IMG ALIGN="right"
<IMG ALIGN="top"
<IMG ALIGN="bottom"
CAMOS-CNAM/LWH
Insertion d'une image alignée à gauche
Insertion d'une image alignée à droite.
Insertion d'une image alignée en haut.
Insertion d'une image alignée en bas.
Page 15 sur 81.
Une image peut être placée au milieu de la page par
<CENTER><IMG SRC="pic.gif"></CENTER>
Une image peut être placée à droite du texte comme ceci. Cette fois-ci on choisit de créer un
espace (calculé en pixels) entre le texte et l'image avec HSPACE (HSPACE veut dire
Horizontal Space, il existe aussi VSPACE pour Vertical Space).
<IMG SRC="pic.gif" ALIGN="RIGHT" HSPACE="10">
Une autre astuce consiste à jouer sur la taille d'une image. Pour agrandir ou réduire une image
, vous pouvez utiliser les instructions <WIDTH="valeur"> et <HEIGHT="valeur">.
comme ici
<IMG SRC="pic.gif"
HEIGHT="80">
ALIGN="RIGHT"
HSPACE="40"
WIDTH="80"
Des effets bien plus saisissants peuvent être réalisés grâce aux tableaux en insérant les textes
et les images dans des cellules voisines (et en dissimulant la bordure du tableau).
Une autre astuce consiste à jouer sur la taille d'une image (les valeurs s'expriment en pixel).
Pour agrandir ou réduire une image en jouant sur leur hauteur ou largeur, vous pouvez utiliser
les instructions <WIDTH="valeur"> et <HEIGHT="valeur">. Voici la syntaxe :
<IMG WIDTH="165" HEIGHT="250" SCR="....">
A noter : Ne négliger pas les arguments <WIDTH="valeur"> et <HEIGHT="valeur">
car dans les pages complexes elles permettent au navigateur de prévoir l'espace nécessaire à
l'affichage des images et donc d'afficher le contenu de la page (la partie textuelle) avant même
que le navigateur ait fini de charger toutes les images. Cela accélère donc la navigation. Pour
finir, l'argument BORDER="valeur" est aussi très importante dans le cadre des liens
hypertextes, BORDER="0" permet en effet de supprimer le cadre autour d'une image lorsque
celle-ci est un lien hypertexte (voir chapitre sur les liens hypertextes).
8.3.) Insérez du son et autres types de documents
L'insertion de son se fait grâce à l'instruction <EMBED SRC="objet_à_insérer">. Les
formats supportés sont par exemple les fichiers Wave, Sun Au, Aiff, MIDI (format .WAV,
.AU, .MID) mais aussi les fichiers VRML, AVI, QuickTime, MPEG video/audio, etc... Les
arguments de <EMBED SRC=""> sont WIDTH, HEIGHT, BORDER, HSPACE,
VSPACE…
Pour les autres types de documents ( Word, Excel, Video...) la méthode normale est d'insérer
un lien vers le nom du fichier en prenant bien garde de conserver l'extension traditionnelle
dudit fichier ( .doc pour un fichier Word, .xls pour un document Excel... Lors du click sur ce
lien, le navigateur utilisera le programme externe adapté à cette extension pour afficher le
fichier. Cette méthode ne fonctionne que dans l'environnement Windows et à la condition que
le navigateur de votre visiteur ait été convenablement paramétré. Il convient donc d'éviter au
maximum d'insérer ce type de liens car vous limitez ainsi vos visiteurs à un seul
environnement.
CAMOS-CNAM/LWH
Page 16 sur 81.
Sous Netscape, on trouvera ce paramétrage dans le menu Options/Préférences Générales sous
l'onglet Utilitaires (pour netscape 3), et dans Edition/Préférences/Navigateur/Applications
(pour netscape 4).
Depuis quelques années, commencent à apparaître des extensions aux navigateurs ("plug
ins"), qui permettent la visualisation de formats standardisés fonctionnant sur tous les
environnements. Les plus répandus sont le format Adobe PDF, LiveAudio, Macromedia
Shockwave ou Macromedia Flash.
On résume :
Bien choisir son format d'image en fonction de ses besoins.
BORDER="0" permet de supprimer l'effet de bordure autour d'une image dans un lien
hypertexte.
Ne pas oublier que tout le monde n'a pas forcément le bon plug-in d'installé.
CAMOS-CNAM/LWH
Page 17 sur 81.
9.) L'insertion de liens hypertextes
9.1.) Les liens, le coeur du système
Il existe plusieurs types de liens, on peut citer les liens absolus et les liens relatifs, les liens
locaux et les liens distants, les liens textuels (obtenus en cliquant sur un morceau de texte) et
les liens graphiques (en cliquant sur une image une image).
Ici les choses se compliquent un peu. La paire de balises pour créer un lien est le <A> et le
</A>. Mais cela ne suffit pas, il faut aussi dire vers où le lien doit pointer, c'est à dire où va
se rendre la personne qui clique sur le lien. Cette destination peut être une page HTML, une
image, un son etc... il faudra donc définir la destination du lien.
Pour créer un lien hypertexte, nous allons ajouter l'instruction "HREF" entre le <A> et le
</A>, cette insertion se fait sous la forme suivante :
<A HREF=""> </A>
Cela ne suffit toujours pas, il faut maintenant dire vers ou pointe le lien. Pour cela nous allons
mettre une adresse entre les guillemets.
<A HREF="http://www.babel.net/"> Ceci est un lien vers le
serveur BABEL </A>
Si vous passez la souris sur ce lien, vous verrez au bas de votre navigateur, dans la barre de
statuts, vers quel site il pointe.
Quelques exemples de liens relatifs (par rapport à la page actuelle)
<A HREF="test.html"> Lien vers le fichier test.html dans
le même répertoire </A>
<A HREF="/toto/test.html"> Lien vers le fichier test.html
dans le sous répertoire "toto" </A>
<A HREF="../test.html"> Lien vers le fichier test.html
dans le répertoire supérieur </A>
Les liens relatifs sont forcément des liens sur le serveur local.
Quelques exemples de liens absolus (liens qui ont une adresse complète).
<A HREF="http://www.babel.net/faq"> Lien vers la faq
d'A.S.I (FAQ=Frequently Asked Questions) </A>
<A HREF="http://www.babel.net/~ericbon/index.html"> Lien
vers ma homepage </A>
Ces deux liens sont des liens vers des serveurs distants :
CAMOS-CNAM/LWH
Page 18 sur 81.
<A HREF="/~ericbon/index.html"> Lien vers le même serveur
en local MAIS obligatoirement à partir de la racine du
serveur et dans le répertoire /~ericbon/ </A>
Ce lien codé en "dur" par rapport à la racine (symbolisée par le "/" de départ du lien) implique
que ce fichier ne pourra jamais changer de position dans l'arborescence. C'est un lien local.
Autres Types de liens (Internet ce n'est pas que le World Wide Web).
<A HREF="ftp://...">
<A HREF="gopher://...">
<A HREF="wais://...">
<A HREF="mailto:[email protected]">
<A HREF="news:...">
<A HREF="telnet://...">
Lien vers un site FTP anonyme. Des liens
vers des FTP privés sont aussi possibles mais
peu recommandés car ils nécessitent la
diffusion du mot de passe pour y accéder.
Lien vers un serveur Gopher.
Lien vers un serveur Wais.
Lien vers une messagerie (E-Mail). Votre
navigateur ouvrira une boîte de dialogue pour
envoyer un courrier électronique à cette
adresse.
Lien vers un newsgroup
Active un lien vers une session Telnet.
A part le FTP, ces autres services s'utilisent de moins en moins.
9.2.) Liens au sein d'une même page
Vous pouvez aussi diviser votre page en plusieurs parties différentes; créer des liens vers ces
différentes parties est possible. Pour cela nous utiliserons l'instruction <NAME> qui indiquera
la destination du lien.
Voici la syntaxe :
<A NAME="test">
La syntaxe du lien à cliquer est
<A HREF=#test> cliquer pour lancer le test </A>.
9.3.) Utiliser une image comme source de lien
Insérer simplement l'image entre l'instruction <A HREF="..."> et </A> :
<A HREF="demo.htm"><IMG SRC="demo.gif"></A>
Pour montrer que cette image est un lien, un cadre apparaîtra autour de l'image. Cependant
quelques fois ce cadre n'est pas très beau, pour le supprimer il suffit d'insérer l'argument
CAMOS-CNAM/LWH
Page 19 sur 81.
BORDER="0" (BORDER correspond tout simplement à la largeur du cadre. Un cadre de
largeur 0 signifie pas de cadre).
Voici un exemple qui combine tous les effets vu dans les deux dernières leçons :
<A HREF="demo.htm"><IMG BORDER="0" SRC="demopic.gif"
ALIGN="LEFT" ALT="Image pour Demo"></A>
On résume :
2 concepts importants : lien relatif ou lien absolu et lien local ou lien distant.
Ecriture du lien : <A HREF="destination"> Texte à cliquer </A>.
Ne pas oublier le # dans les liens au sein d'une même page.
CAMOS-CNAM/LWH
Page 20 sur 81.
10.) La création de tableaux
10.1.) Les tableaux.
Pour réaliser un tableau, ca se complique un peu. Voyons les différentes instructions de base.
<TABLE> et </TABLE> : Instruction de début et fin de table.
<CAPTION> et </CAPTION> : Instruction de début et fin du titre du tableau (à n'utiliser que
si nécessaire).
<TR> et </TR> : Définit le début et la fin d'une ligne de cellules.
<TD> et </TD> : Définit le début et la fin d'une cellule (le texte est centré verticalement dans
la cellule).
<TH> et </TH> : Définit l'en-tête d'une cellule (cette instruction est identique à <TD> et
</TD> sauf que par défaut le texte est en gras et centré horizontalement dans la cellule).
Exemple d'un tableau de 3 lignes de 2 cellules
<TABLE>
<CAPTION> Titre du Tableau </CAPTION>
<TR><TD> première cellule </TD><TD> deuxième cellule
</TD></TR>
</TD></TR>
</TD></TR>
</TABLE>
Titre du Tableau
première cellule
deuxième cellule
première cellule
deuxième cellule
première cellule
deuxième cellule
Afin d'améliorer ce tableau, d'autres instructions existent :
Tout d'abord pour l'instruction <TABLE> voici les différents arguments possibles :
BORDER="valeur"
taille du cadre autour du tableau, si
BORDER="0" pas de cadre.
CELLSPACING="valeur"
par défaut cette valeur est de 2. C'est l'espace
entre le bord d'une cellule et le bord de la
suivante.
par défaut cette valeur est de 1. C'est l'espace
entre le bord d'une cellule et son contenu.
CELLPADDING="valeur"
WIDTH="valeur ou pourcentage"
HEIGHT="valeur ou pourcentage"
CAMOS-CNAM/LWH
Page 21 sur 81.
Dans les balises de rangées ou de cellules <TR> <TD> on pourra ajouter ALIGN="left
ou right" pour définir la justification du contenu de la cellule ou de la rangée entière.
A noter, il existe de nombreuses options supplémentaires pour l'instruction <TABLE> sur
Internet Explorer.
Deux exemples de tableau un peu plus complexe
Le premier tableau :
<TABLE BORDER="6" CELLSPACING="5" CELLPADDING="8"
WIDTH="80%">
<CAPTION> Titre du tableau </CAPTION>
</TD></TR>
<TR><TH> première cellule </TH><TH> deuxième cellule
</TH></TR>
<TR><TD ALIGN="CENTER"> première cellule </TD><TD
ALIGN="RIGHT"> deuxième cellule </TD></TR>
</TABLE>
Le deuxième tableau :
<CENTER>
<TABLE BORDER="2" CELLSPACING="20">
<TR>
<TH><A HREF="pic.gif"><IMG BORDER="0" SRC="pic.gif"
ALT="Voir l'image"></A></TH>
<TH><A HREF="http://www.babel.net"><IMG BORDER="0"
SRC="pic.gif" ALT="Serveur Babel"></TH>
</TR>
<TR>
<TH> ligne 1 même cellule <BR> ligne 2 même cellule <BR>
ligne 3 même cellule </TH>
<TH><A HREF="http://www.babel.net">Lien vers le serveur
BABEL</A> </TH>
</TR>
</TABLE>
</CENTER>
CAMOS-CNAM/LWH
Page 22 sur 81.
10.2.) Allons un peu plus loin
ROWSPAN et COLSPAN s'utilisent en attribut entre <TD> et </TD> ou <TH> et </TH>. Ils
permettent de dire que la cellule en question compte soit pour plusieurs cellules verticales ou
plusieurs cellules horizontales.
Exemple :
<TABLE BORDER="1">
<TR>
<TH COLSPAN="2">première
cellule </TH>
<TH> deuxième cellule </TH>
</TR>
<TR>
<TH> première cellule </TH>
<TH> troisième cellule </TH>
</TR>
</TABLE>
<TABLE BORDER="1">
<TR>
<TH ROWSPAN="2">première
cellule </TH>
<TH> troisième cellule </TH>
</TR>
<TR>
<TH> première cellule </TH>
</TR>
</TABLE>
Les tableaux sont de plus en plus utilisés, il faut savoir qu'il est possible d'imbriquer des
tableaux les uns dans les autres, l'intégralité du nouveau tableau se trouvera entre les balises
<TD> et </TD> ou <TH> et </TH>.
On résume :
Les tableaux peuvent s'imbriquer les uns dans les autres.
Netscape et Internet Explorer ne gèrent pas les informations de la même manière dans les
tableaux (Netscape perds les informations sur les polices de caractère, il faut lui déclarer
l'information au début de chaque cellule).
CAMOS-CNAM/LWH
Page 23 sur 81.
11.) Les fonds d'écran et les couleurs de votre page
11.1.) L'instruction BODY en détail
Les pages HTML permettent d'insérer des fonds d'écran afin d'améliorer l'aspect visuel d'une
page. Pour cela nous allons revenir sur l'instruction <BODY>. Comme nous l'avons vu plus
haut, dans une balise on peut ajouter des attributs supplémentaires avec chacune un argument.
Voici à nouveau la syntaxe :
<nom_du_tag nom_de_l'attribut="argument">
La gestion des couleurs du texte, des couleurs des liens et du fond d'écran se fait dans la balise
<BODY>.
Voici la liste des différents attributs :
BACKGROUND
BGCOLOR
TEXT
LINK :
VLINK
ALINK
nom de l'image de fond d'écran (la syntaxe est
BACKGROUND="image.gif")
couleur du fond d'écran s'il n'y a pas d'image de fond (la syntaxe est
BGCOLOR="#rrggbb").
couleur du texte de la page (TEXT="#rrggbb").
couleur des liens hypertextes de la page (LINK="#rrggbb")
couleur des liens hypertextes visités de la page (VLINK="#rrggbb")
couleur des liens hypertextes actifs (ALINK="#rrggbb").
#rrggbb étant bien évidemment les 3 couleurs Rouge, Verte et Bleue. Les valeurs pour
chacune des couleurs s'expriment en hexadécimal de 00 à FF.
Quelques exemples de couleur : Le noir = #000000, le blanc = #FFFFFF, le gris clair =
#C5C5C5, le gris foncé = #303030, le rouge = #FF0000, le vert = #00FF00, le bleu =
#0000FF, le rose = #FF7070, le jaune = #00FFFF etc....
La syntaxe complète est donc :
<BODY BACKGROUND="nom_de_l'image.gif" BGCOLOR="#rrggbb"
TEXT="#rrggbb" LINK="#rrggbb" VLINK="#rrggbb"
ALINK="#rrggbb">
Voici un exemple :
<BODY BACKGROUND="backwhit.jpg" BGCOLOR="#EEEEEE"
TEXT="#006600" LINK="#cc0000" VLINK="#aa2277"
ALINK="#C900FF">
CAMOS-CNAM/LWH
Page 24 sur 81.
A noter: L'image de fond peut bien entendu être au format Gif ou Jpeg. Vous pouvez aussi
utiliser des liens relatifs comme BACKGROUND="images/image.jpg" ou absolus
comme BACKGROUND="http://www.machin.fr/images/pic.gif".
Les dernières normes HTML permettent d'utiliser directement le nom des couleurs pour les
instructions vues plus haut. La syntaxe est, par exemple, LINK="green". Les couleurs
possibles sont par exemple Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow ou Aqua (il existe 140 noms différents).
Internet Explorer et Netscape Navigator proposent des options supplémentaires à l'instruction
<BODY>.
L'instruction BACKGROUND et BGCOLOR peuvent s'utiliser en attribut dans des tableaux au
sein des instructions <TD>, <TH> ou <TABLE>.
L'exemple du tableau coloré :
On peut donc combiner les effets vus précédemment et réaliser un tableau coloré
Voici le code correspondant :
<CENTER>
<TABLE BORDER="1" WIDTH="20%">
<TR>
<TD COLSPAN="2" BGCOLOR="#000000"> </TD>
<TD BGCOLOR="#FFFF00"> </TD>
<TD BGCOLOR="#0000FF"> </TD>
<TD ROWSPAN="2" BGCOLOR="#008000"> </TD>
</TR>
<TR>
<TD BGCOLOR="#FF0000"> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD BGCOLOR="#FF0000"> </TD>
CAMOS-CNAM/LWH
Page 25 sur 81.
</TR>
<TR>
<TD BGCOLOR="#0000FF"> </TD>
<TD BGCOLOR="#FFFF00"> </TD>
</TR>
</TABLE>
</CENTER>
Notez que les cellules "vides" ne s'affichent pas, donc ici pour les remplir "sans texte" nous
utilisons le caractère   qui correspond à un espace.
On résume :
Il vaut mieux coder les couleurs en hexadécimal car les vieux navigateurs ne connaissent que
ce système.
Noter la façon de présenter le tableau, avec des décalages dans le code, il est plus lisible.
CAMOS-CNAM/LWH
Page 26 sur 81.
12.) Quelques astuces
12.1.) Les lignes horizontales
Revenons sur les lignes de séparation : plus haut, nous avons vu qu'il était possible de créer
une barre de séparation horizontale entre deux sections grâce à l'instruction <HR>
A cette instruction nous pouvons ajouter différents attributs :
SIZE
WIDTH
ALIGN
NOSHADE
taille en valeur (la syntaxe est par exemple SIZE="5" )
largeur en valeur ou pourcentage (WIDTH="100" ou
WIDTH="50%" )
alignement avec comme valeur LEFT, RIGHT ou CENTER (ex:
ALIGN="LEFT" )
pas d'ombre sous la barre.
Quelques exemples :
<HR SIZE="8" WIDTH="15"0>
<HR NOSHADE WIDTH="60%">
<HR SIZE="15" WIDTH="200" ALIGN="RIGHT">
A noter : Internet Explorer vous permet de spécifier la couleur de la barre horizontale.
Voici la syntaxe :
<HR COLOR="nom_de_la_couleur">
ou
<HR COLOR="#rrggbb">
12.2.) L'instruction FONT
Cette instruction permet d'augmenter, de diminuer la taille d'une partie du texte. Cet aussi
grâce à cette instruction que vous pourrez modifier la couleur d'une partie du texte. Notons
que la taille par défaut est de 3.
CAMOS-CNAM/LWH
Page 27 sur 81.
Voici les attributs possibles :
SIZE
COLOR
modifier la taille du texte (ex: SIZE="5" ou SIZE="+2", +2 va
augmenter de 2 tailles la taille de la police de caractère).
couleur du texte
Voici quelques exemples :
Internet Explorer et Netscape Navigator fonctionnent de deux manières différentes : pour
Netscape Navigator il sera nécessaire d'utiliser l'instruction FONT dans toutes les cellules d'un
tableau, alors qu'Internet Explorer utilise la même police entre la balise de début et de fin et
cela même si vous insérez un tableau entre <FONT ...> et </FONT>.
12.3.) L'instruction P
Au séparateur de paragraphes on peut ajouter des attributs supplémentaires :
<P ALIGN="RIGHT">
<P ALIGN="LEFT">
<P ALIGN="JUSTIFY">
pour justifier le texte à droite
pour justifier le texte à gauche
pour justifier le texte à des deux côtés
Dans le cadre d'une utilisation de ces arguments il est préférable de penser à fermer la balise
avec </P>.
12.4.) L'instruction mailto:
Nous avons vu qu'un lien hypertexte peut renvoyer vers une adresse E-Mail et donc ouvrir le
logiciel de courrier électronique. Netscape Navigator permet d'ajouter des instructions pour
"forcer" le sujet du message.
<A HREF="mailto:[email protected]?subject=Le sujet est ajouté
automatiquement"> Cliquez-ici </A>
CAMOS-CNAM/LWH
Page 28 sur 81.
On résume :
Le sujet d'un mailto s'écrit ?subject=.... collé à la fin de l'adresse E-Mail.
Il est plus joli de justifier un paragraphe des deux côtés si celui-ci est dans une cellule de
tableau dont la largeur est définie. En dehors d'un tableau, n'oubliez-pas que le texte est
élastique et s'adapte à la largeur de la page. En redimensionnant le navigateur le texte va donc
se rejustifier.
CAMOS-CNAM/LWH
Page 29 sur 81.
13.) Les formulaires
13.1.) Fonctionnement des formulaires
Les formulaires permettent de saisir de l'information qui sera ensuite envoyée au serveur pour
traitement. Ils présentent à l'utilisateur des zones de texte, des choix multiples par le biais de
boutons cliquables, de listes, etc... Il convient donc d'écrire, en sus du formulaire lui-même
une procédure de récupération et de traitement des informations au niveau du serveur. Ceci est
habituellement réalisé à l'aide d'un langage de script, comme le PERL, ce qui est hors de
propos dans ce cours d'initiation. Toutefois, une des actions possibles déclenchées par un
formulaire est l'envoi d'un courrier électronique qui récapitule toutes les informations entrées
par le visiteur.
La commande principale pour créer un formulaire dans un document HTML est la balise
<FORM> </FORM>. Ainsi, pour le courrier électronique, voici la commande généralement
utilisée:
<FORM METHOD="POST" ACTION="mailto:[email protected]"
ENCTYPE="text/plain">
Ici, il y aura des zones de texte à remplir, où faire des choix, etc. de la forme
<INPUT TYPE=... >
</FORM>
13.2.) Les différentes options
La balise INPUT TYPE="TEXT" : création d'une zone de saisie.
Exemple d'une ligne sur 20 colonnes :
Votre nom et prénom :
<INPUT TYPE="TEXT" NAME="NOM" SIZE="20">
Résultat :
La balise INPUT TYPE="CHECKBOX" crée une série de cases à cocher non exclusives.
Exemple sur trois cases :
Quelle est votre langue maternelle ?
Français <INPUT TYPE="CHECKBOX" NAME="CHOIX1">
Anglais <INPUT TYPE="CHECKBOX" NAME="CHOIX2">
Autre <INPUT TYPE="CHECKBOX" NAME="CHOIX3">
CAMOS-CNAM/LWH
Page 30 sur 81.
Résultat :
La balise INPUT TYPE="RADIO" crée une série de cases à cocher exclusives.
Exemple :
Femme ou homme ?
Femme <INPUT TYPE="RADIO" NAME="SEXE" VALUE="FEMME">
Homme <INPUT TYPE="RADIO" NAME="SEXE" VALUE="HOMME">
Résultat :
La balise SELECT permet de mettre en place des menus déroulants.
Avec l'attribut SIZE="nombre d'options du menu", le menu est présenté déjà
déroulé.
Exemple :
De quel continent êtes-vous ?
<SELECT NAME="CONTINENT" SIZE="3">
<OPTION SELECTED>Afrique
<OPTION>Amérique
<OPTION>Asie
<OPTION>Europe
<OPTION>Océanie
</SELECT>
Résultat :
Alors que si l'attribut SIZE est omis, le menu est présenté refermé
Exemple :
De quel continent êtes-vous ?
<SELECT NAME="CONTINENT2">
CAMOS-CNAM/LWH
Page 31 sur 81.
<OPTION>Afrique
<OPTION >Amérique
<OPTION>Asie
<OPTION >Europe
<OPTION>Océanie</SELECT>
Résultat :
La balise TEXTAREA crée une zone de saisie multi-lignes. Il convient de spécifier la taille de
cette zone avec ROWS="valeur" et COLS="valeur"
Exemple :
Donnez vos impressions :
<CENTER>
<TEXTAREA NAME="Impressions" ROWS="5" COLS="30">
</TEXTAREA>
</CENTER>
Résultat :
La balise SUBMIT crée un bouton qui sert à déclencher l'action associée au formulaire, en
général l'envoyer au serveur pour traitement. L'attribut VALUE="Message" indique le texte
à placer dans le bouton.
Exemple :
<INPUT TYPE="SUBMIT" VALUE="Envoyer" SIZE="40">
Résultat :
La balise RESET crée un bouton qui sert à effacer ce que vous avez rempli dans un
formulaire, sans l'envoyer.
Exemple :
CAMOS-CNAM/LWH
Page 32 sur 81.
<INPUT TYPE="RESET" VALUE="Effacer" SIZE="30">
Résultat :
13.3.) Quelques astuces
L'option VALUE="..." sert à attribuer une valeur par défaut. Par exemple :
<INPUT TYPE="TEXT" NAME="ADRESSE" VALUE="1 RUE DE LA
PLACE" SIZE="30">
Donne
Il est aussi possible de définir une longueur maximum de saisie grâce à : MAXLENGTH="10"
Dans une liste à choix multiples, pour définir un choix par défaut utilisez l'option CHECKED :
<INPUT TYPE="RADIO" NAME="ami" VALUE="Paul" CHECKED> Paul<BR>
<INPUT TYPE="RADIO" NAME="ami" VALUE="Jean"> Jean<BR>
<INPUT TYPE="RADIO" NAME="ami" VALUE="Robert"> Robert<P>
Un formulaire complet :
<FORM METHOD="POST" ACTION="mailto:[email protected]"
ENCTYPE="text/plain">
<CENTER>
<TABLE BORDER="1" CELLSPACING="1">
<TR>
<TD>
Qui sont tes amis ?<BR>
<INPUT TYPE="CHECKBOX" NAME="ami?..Paul" VALUE="oui">
Paul>BR>
<INPUT TYPE="CHECKBOX" NAME="ami?..Jean" VALUE="oui"
CAMOS-CNAM/LWH
Page 33 sur 81.
CHECKED> Jean>BR>
<INPUT TYPE="CHECKBOX" NAME="ami?..Julien" VALUE="oui">
Julien>BR>
<INPUT TYPE="CHECKBOX" NAME="ami?..Isabelle" VALUE="oui"
CHECKED> Isabelle>P>
</TD>
<TD>
Ton meilleur ami ?<BR>
<INPUT TYPE="RADIO" NAME="meilleur ami?" VALUE="Paul">
Paul<BR>
<INPUT TYPE="RADIO" NAME="meilleur ami?" VALUE="Jean">
Jean<BR>
<INPUT TYPE="RADIO" NAME="meilleur ami?" VALUE="Julien"
CHECKED> Julien<BR>
<INPUT TYPE="RADIO" NAME="meilleur ami?" VALUE="Isabelle">
Isabelle<P>
</TD>
</TR>
<TR>
<TH COLSPAN="2">
<INPUT TYPE="SUBMIT" VALUE="Envoyer" SIZE="40">
<INPUT TYPE="RESET" VALUE="Effacer" SIZE="30">
</TH>
</TR>
</TABLE>
</CENTER>
</FORM>
Vous recevrez ensuite un mail avec ce résultat :
ami?..Jean=oui
ami?..Isabelle=oui
meilleur ami?=Julien
En général les formulaires sont accompagnés de Scripts JavaScript dont le rôle est de vérifier
la validité des informations entrées avant l'envoi au serveur.
On résume :
Chaque INPUT doit avoir un NAME
VALUE donne la valeur par défaut, CHECKED l'option validée par défaut.
CAMOS-CNAM/LWH
Page 34 sur 81.
14.) Les frames
14.1.) Le principe des cadres
Les cadres, plus connus sous le nom de frames, nous permettent de créer des fenêtres dans
une page Web. Chacune de ces fenêtres contiendra une page Web indépendante. Le document
principal, devra contenir à la place de la balise usuelle <BODY> </BODY>, une directive
<FRAMESET> </FRAMESET>.
Ainsi, un programme définissant des cadres aura la structure principale suivante:
<HTML> Début du programme (c'est la première ligne)
<HEAD> Début de l'en-tête du programme
<TITLE> Titre du programme </TITLE>
</HEAD> Fin de l'en-tête du programme
<FRAMESET> Début de votre programme
C'est dans cette partie vous décrirez vos cadres par des
directives du type <FRAME SRC="fichier.html" name="nom du
cadre">
</FRAMESET> Fin du corps du programme
</HTML> Fin du programme
14.2.) Division du document en fenêtres horizontales
<HTML>
<HEAD>
<TITLE>Titre du document
</TITLE>
</HEAD>
<FRAMESET ROWS="20%,80%">
<FRAME SRC="fenetre1.htm">
<FRAME SRC="fenetre2.htm" name="window2">
</FRAMESET>
</HTML>
Avec cette commande, nous avons divisé le document en deux cadres horizontaux dont l'un
occupe 20% du document et l'autre 80%. Chaque fenêtre contient son propre document
HTML (les fichiers fenetre1.htm et fenetre2.htm). Nous avons donné un nom, window2, à la
seconde fenêtre, qui servira à nommer ce cadre dans un lien TARGET="window2" décrit plus
bas.
Voici ce que vous obtiendrez.
CAMOS-CNAM/LWH
Page 35 sur 81.
14.3.) Division en trois fenêtres
<HTML>
<HEAD>
</TITLE>
</HEAD>
<FRAMESET ROWS="30%,50%,20%">
</FRAMESET>
</HTML>
Nous avons divisé le document en trois fenêtres horizontales. La première occupe 30%, la
deuxième 50% et la troisième 20% du document. Avec <FRAMESET
ROWS="30%,50%,*"> nous aurions obtenu le même résultat. L'étoile "*" prendra par défaut
la valeur de 20% qui est le reste de 100% - (50%+30%).
CAMOS-CNAM/LWH
Page 36 sur 81.
14.4.) Division du document en fenêtres verticales
<HTML>
<HEAD>
</TITLE>
</HEAD>
<FRAMESET COLS="40%,60%">
<FRAME SRC="fenetre1.htm">
</FRAMESET>
</HTML>
Nous avons divisé le document en deux fenêtres verticales dont l'une occupe 40% du
document et l'autre 60% <FRAMESET COLS="40%,60%">.
14.5.) Division en trois fenêtres
<HTML>
<HEAD>
</TITLE>
</HEAD>
<FRAMESET ROWS="*,60%,*">
</FRAMESET>
</HTML>
CAMOS-CNAM/LWH
Page 37 sur 81.
Ici
<FRAMESET
ROWS="*,60%,*">
ROWS="20%,60%,20%">.
est
équivalent
à
<FRAMESET
14.6.) Division du document en fenêtres mixtes
<HTML>
<HEAD>
</TITLE>
</HEAD>
<FRAME SRC="fenetre1.htm" name="nom1">
</FRAMESET>
</FRAMESET>
</HTML>
Dans le <FRAMESET COLS="30%,70%">, nous avons mis le premier fichier fenetre1.html
dans la zone de grandeur de 30%; ensuite, la zone de grandeur de 70%, nous l'avons divisée
en deux fenêtres verticales dont l'une occupe 35% (fenetre2.htm) et l'autre occupe 65%
(fenetre3.htm).
CAMOS-CNAM/LWH
Page 38 sur 81.
14.7.) Division du document en 5 fenêtres
<HTML>
<HEAD>
</TITLE>
</HEAD>
<FRAMESET COLS="50%,*">
<FRAME SRC="fenetre1.htm"
</FRAMESET>
<FRAMESET COLS="33%,*,*">
</FRAMESET>
</FRAMESET>
</HTML>
name="nom1">
name="nom2">
name="nom3">
name="maman">
name="papa">
Nous avons divisé le document en deux fenêtres verticales. La première a été divisée en deux
parties égales et la deuxième fenêtre a été divisée en trois autres parties égales.
CAMOS-CNAM/LWH
Page 39 sur 81.
14.8.) Compléments à FRAMESET et FRAME
En plus des attributs ROWS et COLS, la balise FRAMESET accepte les suivants:
Bordure des cadres : Si vous voulez supprimer les bordures, utilisez <FRAMESET
BORDER="0">
Couleur des bordures : La commande est <FRAMESET BORDERCOLOR="#rrggbb">
La balise FRAME peut aussi avoir comme attributs :
NORESIZE : Interdit le redimensionnement de ce cadre
Barre de défilement : La commande est
<FRAME SRC="xxxx.htm" SCROLLING="YES/NO/AUTO">
comme dans l'exemple ci-dessous.
<HTML>
<HEAD>
</TITLE>
</HEAD>
<FRAME SRC="bordure1.htm" name="nom1" SCROLLING="YES">
<FRAME
SRC="bordure2.htm"
NAME="nom2"
SCROLLING="AUTO">
<FRAME SRC="bordure3.htm" SCROLLING="NO">
</FRAMESET>
</FRAMESET>
</HTML>
CAMOS-CNAM/LWH
Page 40 sur 81.
<FRAME SCROLLING="AUTO"> va créer des barres de défilement automatiquement et ce,
dès que le contenu de la page l'excède. C'est le cas pour la deuxième fenêtre dans l'exemple
précédant.
<FRAME SCROLLING="YES"> va créer des barres de défilement à droite et en bas de la
page que son contenu soit suffisant ou non. C'est le cas pour la première fenêtre dans
l'exemple précédant.
<FRAME SCROLLING="NO"> ne va créer aucune barre de défilement même si la page est
insuffisante pour son contenu. C'est le cas pour la troisième fenêtre dans l'exemple précédant.
Largeur de la marge : L'attribut est <FRAME MARGINWIDTH="Valeur">.
<HTML>
<HEAD>
</TITLE>
</HEAD>
<FRAME SRC="width1.htm" MARGINWIDTH="25">
</FRAMESET>
</FRAMESET>
</HTML>
CAMOS-CNAM/LWH
Page 41 sur 81.
L'attribut <FRAME MARGINWIDTH="Valeur"> va laisser un espace à droite et à gauche
du contenu de la fenêtre. La valeur des marges de la fenêtre est une valeur donnée en pixels
comme démontré à l'exemple précédent.
Hauteur de la marge : La commande est <FRAME MARGINHEIGTH="Valeur">.
<HTML>
<HEAD>
</TITLE>
</HEAD>
<FRAME SRC="height1.htm" MARGINHEIGHT="100">
</FRAMESET>
</FRAMESET>
</HTML>
CAMOS-CNAM/LWH
Page 42 sur 81.
La commande <FRAME MARGINHEIGHT="Valeur"> va laisser un espace en haut et en bas
du contenu de la fenêtre.
14.9.) La directive TARGET
Cette directive permet de spécifier la zone de l'écran ou il convient de placer l'URL spécifié
dans un lien HREF. Son utilisation principale est dans un contexte de cadres. Dans les liens de
la table des matières il faut indiquer que les pages citées doivent être affichées dans la
seconde fenêtre. Ceci se fait par la syntaxe :
<A HREF="fichier2.htm" TARGET="Nom_de_la_fenêtre"> Message
</A>
La variable Nom_de_la_fenêtre sert à référencer les différentes fenêtres, et elle peut être
initialisée de différentes façons, par une directive NAME="valeur"
un région d'un document quelconque peut être nommé,
une document quelconque peut être nommé
une fenêtre créée par un FRAMESET peut être nommé
Ainsi dans un document multi fenêtres, vous pouvez faire en sorte d'appeler un document
dans une autre fenêtre depuis une fenêtre de contrôle.
L'appel à une fenêtre se fait par la variable TARGET :
dans une définition de lien :
<A HREF="fichier2.htm" TARGET="Nom_de_la_fenêtre">votre
texte</A>
dans un champ AREA :
<AREA SHAPE="shape" COORDS="x,y,..." HREF="fichier2.htm"
TARGET="Nom_de_la_fenêtre">
dans une balise FORM :
<FORM ACTION="fichier2.htm" TARGET="Nom_de_la_fenêtre">
Ainsi chacune de ces balises appellera la fenêtre définie par la directive NAME.
La balise TARGET doit être définie par une chaîne de caractères commençant par une lettre
de l'alphabet.
CAMOS-CNAM/LWH
Page 43 sur 81.
Enfin des valeurs particulieres peuvent être attribués à TARGET, ils commencent par le
caractère _ :
TARGET="_blank" : force l'appel d'une nouvelle fenêtre.
TARGET="_self" : Force l'appel d'une page dans la même fenêtre (Evite les divisions).
TARGET="_parent" : Force l'appel à la page mère.
TARGET="_top" : Force l'appel à la première page de la liste.
On résume :
On donne un nom à toutes ses fenêtres dans le fichier qui définit les frames.
On redirige les liens d'un frame vers un autre par un <A HREF="..." TARGET="nom
fenetre">clic<A>
CAMOS-CNAM/LWH
Page 44 sur 81.
15.) Les images à fond transparent
La technique des images transparentes permet de superposer sur une même page plusieurs
images sans que les fonds de l'une ne masque une partie d'une autre. Son utilisation principale
est lors de l'insertion d'une image sur une page qui contient déjà un fond.
Imaginons par exemple que vous vouliez insérer sur une page contenant une image de fond
une nouvelle image transparente.
Voici le code HTML de cette page et l'image :
<HTML>
<HEAD>
<TITLE>Test image Transparente</TITLE>
</HEAD>
<BODY BACKGROUND="fond.gif"
BGCOLOR="#FFFFFF"
TEXT="#000000" LINK="#000080"
VLINK="#800080" ALINK="#FF0000">
<IMG SRC="image1.gif" BORDER="0" WIDTH="200" HEIGHT="200">
</BODY>
</HTML>
CAMOS-CNAM/LWH
Page 45 sur 81.
15.1.) Appliquer la transparence
On va utiliser un logiciel de retouche d'image pour rendre une couleur transparente :
Chargez l'image dans le logiciel de retouche.
Sélectionnez le "Dropper" qui permet de sélectionner une couleur dans la palette de couleurs
disponible.
Sur l'image, cliquez avec le bouton DROIT sur la couleur que vous désirez rendre
transparente (ici le noir). Dans la palette de couleur, la couleur de fond doit changer et prendre
la couleur que vous venez de choisir.
Ensuite Choisissez "Enregistrer Sous..." dans le menu Fichier. Sélectionner l'option GIF, puis
allez dans le menu OPTION, cliquez sur APPLIQUER LA TRANSPARENCE A LA
COULEUR DE FOND, et sauver.
Le résultat final :
On résume :
Chaque logiciel de retouche d'images possède cette fonction de transparence lors de la
sauvegarde au format GIF, lisez la documentation du logiciel.
CAMOS-CNAM/LWH
Page 46 sur 81.
16.) Les images animées
16.1.) Inclure une animation
Inclure une animation dans une page Web est une chose facile. Tout se passe comme avec une
image fixe classique avec l'instruction IMG SRC. Il existe sur le réseau Internet de nombreux
sites qui présentent d'importantes collections de ce type d'images.
Les navigateurs ne reconnaissent à ce jour que le format d'images animées GIF. Ces images
sont construites à l'aide de logiciels spécifiques à partir d'une série d'images GIF fixes entre
lesquelles on insère des commandes de délais et de boucles pour piloter l'animation.
Pour construire ce genre d'animations, vous devez utiliser des logiciels spécifiques, certains
seront très simples, d'autres moins, mais proposeront tout un tas d'options, d'effets de
transition, d'exportation dans d'autres formats d'animation.
Une petite liste d'outils à titre d'exemple
•
•
•
•
•
Gif Construction Set.
Ulead Gif Animator.
WWW Gif Animator.
Animagic Gif.
Gif Movie Gear.
Il en existe d'autres comme Microsoft Gif animator etc...
On résume :
L'outil parfait n'existe pas, chaque produit a ses avantages et ses inconvénients. Faites le choix
de ne pas choisir : prennez-en plusieurs.
CAMOS-CNAM/LWH
Page 47 sur 81.
17.) Les images sensitives
17.1.) La balise MAP
L'ancienne balise IMAGEMAP permettait d'appeler une page HTML différente suivant la
région où l'on clique dans une image. L'inconvénient de cette directive, vient du fait que l'on
devait créer sur le serveur, un fichier décrivant la géographie de chaque image. A chaque clic
sur une zone de l'image, il fallait recontacter le serveur pour obtenir la page web associée.
Difficile à maintenir pour un administrateur de site.
Netscape a mis en oeuvre une procédure MAP qui est gérée uniquement côté client. Procédure
qui a été largement adoptée par tous les navigateurs. Elle simplifie donc la tâche des
développeurs de page HTML.
La balise <MAP> permet de définir la géométrie de l'image; elle est nommée par une clause
NAME et ce nom est ensuite utilisé dans une image insérée normalement par <IMG
SRC="Nom de l'image" USEMAP="#Nom de la balise MAP">
A l'intérieur du bloc <MAP> </MAP> on trouve des définitions de type <AREA> définissant
chacune des zones sensibles.
Ainsi la structure de la balise sera la suivante :
<MAP NAME="Nom">
<AREA SHAPE="valeur" COORDS="valeur_coordonnées"
HREF="http//www.asi.fr">
<AREA SHAPE="valeur" COORDS="valeur_coordonnées"
HREF="page2.htm">
......
</MAP>
<IMG SRC="Nom de l'image" USEMAP="#Nom">
Les différents paramètres prennent les valeurs suivantes :
SHAPE="rect", "circle", "poly" ou "default"
rect : corresponds aux coins opposés (par exemple "130,10,170,90")
circle : corresponds au centre et au rayon (par exemple "50,50,10")
poly : corresponds à une série de couple de points (par exemple "250,10 210,90 290,90")
default : est absent. Cette clause finale permet d'associer un lien au fond de l'image ou à
toute zone non définie précédemment.
COORDS="xx,xx,xx..." : des valeurs entre guillemets, séparées par des virgules comme
décrit précédemment.
HREF="fichier.htm" : le lien (interne ou externe) qui sera atteint après le clic.
Afin de réaliser facilement des images sensitives, je vous conseille d'utiliser un logiciel
spécifique comme, par exemple, MapEdit.
CAMOS-CNAM/LWH
Page 48 sur 81.
Avec ce genre de logiciels, vous pourrez dessiner les contours cliquables directement avec la
souris sur le dessin.
On résume :
Prenez un outil qui calculera les coordonnées à votre place.
Les MAPS fonctionnent avec les tout type d'image (JPEG, GIF et GIF animés).
CAMOS-CNAM/LWH
Page 49 sur 81.
18.) Un peu de JavaScript
18.1.) Les concepts fondamentaux
Le javascript est un langage de scripts orienté objet qui permet de développer des petites
applications internet. On incorpore les instructions au sein des balises HTML et on pourrait
comparer ce langage aux macros d'un traitement de texte.
Ce langage, qui est relativement simple, autorise une interactivité accrue des pages web. Le
code javascript se trouve dans la page HTML est sera donc exécuté au chargement de la page
ou lorsqu'on effectue une certaine action dans la page.
Il peut, par exemple, permettre d'afficher l'heure, de faire défiler des textes horizontalement,
rafraîchir plusieurs frames, gérer les erreurs de saisie dans les formulaires, gérer des menus
déroulants. Plus récemment, il permet de gérer le remplacement d'images (par passage de la
souris dessus, l'image se modifie, en fait, on peut charger une deuxième image).
En fait, bien plus qu'un simple gadget, le javascript permet des présentations de page web
sous la forme de CD-roms sans passer par des plug-ins extérieurs comme Shockwave.
Les versions du langage évoluent rapidement :
Netscape 2 : Javascript 1.0
Netscape 4.06 : Javascript 1.3
etc...
18.2.) Javascript repose sur la notion d'événement
La page HTML se charge, puis lorsque l'utilisateur effectue une action (clic sur un bouton,
sélection d'un menu, saisie de texte, etc...), le script se lance et exécute sa tâche.
Mais ces appels de fonctions ne sont pas toujours présents dans le cas de scripts qui
n'attendent pas d'action de l'utilisateur (par exemple un script qui afficherait la date, l'heure,
ou la version du navigateur utilisé).
La mécanique du script, entourée des balise <SCRIPT LANGUAGE="Javascript"> et
</SCRIPT> est généralement placée entre les balises <HEAD> et </HEAD>. Cependant il est
possible de placer un script à l'intérieur du corps du fichier HTML.
La notion de déclencheur d'événements fonctionne un peu comme des interrupteurs. Ils ont
pour nom Onload(), OnClick(), OnBlur(), OnMouseOver() etc.
La dernière chose à savoir c'est qu'un script comporte souvent au début une petite série
d'instructions qui permet de tester la version du navigateur que vous posséder afin de savoir si
CAMOS-CNAM/LWH
Page 50 sur 81.
celui-ci sera capable d'interpréter le script. Par ce test, on empêche l'exécution du script sur un
navigateur qui n'est pas capable d'interpréter correctement le script.
18.3.) Le javascript minimum
Signalons tout d'abord au navigateur par une balise que ce qui suit est un script et que ce
script est du javascript.
<SCRIPT LANGUAGE="JavaScript">
... le code ici ...
</SCRIPT>
Certains navigateurs n'interprètent pas la Javascript et ignorent donc la balise <SCRIPT>, et
vont donc afficher le texte du script brut dans la page. Pour éviter cet affichage, on utilise les
instructions du langage HTML qui permettent d'écrire du commentaire.

</SCRIPT>
18.4.) Gérer les différentes versions du langage
Le langage a donc évolué au fil des sorties des différentes versions de navigateurs. Pour
utiliser les fonctionnalités les plus récentes, il faut parfois exclure les navigateurs précédents
(même si ceux-ci supportent le Javascript, ils ne supportent pas les nouvelles fonctionnalités,
et vont donc afficher un message d'erreur).
<SCRIPT LANGUAGE="JavaScript"> : programme pour Netscape 2 (et +) et explorer 3 (et
+)
<SCRIPT LANGUAGE="JavaScript1.1"> : programme pour Netscape 3 (et +) et explorer 4
(et +)
<SCRIPT LANGUAGE="JavaScript1.2"> : programme pour Netscape 4 (et +)
<SCRIPT LANGUAGE="JavaScript1.3"> : programme pour Netscape 4.06 (et +) et explorer
5 (et +)
CAMOS-CNAM/LWH
Page 51 sur 81.
18.5.) Exemples
18.5.1.) Identifier le navigateur utilisé par différents moyens.
Le code à insérer dans la partie <HEAD> et </HEAD> :
<SCRIPT Language="JavaScript">
<!-/*********************************************************
APPLICATION : Identifier le navigateur utilise par differents moyens
*
*********************************************************/
function getBrowserName()
{ document.forms[0].elements[0].value =navigator.appName; }
function getBrowserVersion()
{ document.forms[0].elements[0].value = navigator.appVersion; }
function getBrowserCodeName()
{ document.forms[0].elements[0].value = navigator.appCodeName; }
function getBrowserUserAgent()
{ document.forms[0].elements[0].value = navigator.userAgent; }
function getBrowserNameVersion()
{ document.forms[0].elements[0].value = navigator.appName + " " +
navigator.appVersion; }
// -->
</SCRIPT>
Le code à insérer dans la partie <BODY> et </BODY> :
<FORM NAME="detect">
<INPUT TYPE="text" NAME="browser" SIZE="60" VALUE="Détection du
Navigateur"><BR>
<INPUT TYPE="button" VALUE="appName" onClick="getBrowserName()"><BR>
<INPUT TYPE="button" VALUE="appVersion"
onClick="getBrowserVersion()"><BR>
<INPUT TYPE="button" VALUE="appCodeName"
onClick="getBrowserCodeName()"><BR>
<INPUT TYPE="button" VALUE="userAgent"
onClick="getBrowserUserAgent()"><BR>
<INPUT TYPE="button" VALUE="appName / appVersion"
onClick="getBrowserNameVersion()"><BR>
</FORM>
CAMOS-CNAM/LWH
Page 52 sur 81.
18.5.2.) Faire afficher un message sous forme machine à écrire.
/********************************************************************
APPLICATION : Faire afficher un message sous forme machine a ecrire
********************************************************************/
<!-var i = 0;
var TextNumber = 0;
var TextInput = new Object();
var HelpText = "";
var Text = "";
var Speed = 90
var WaitSpace = "
"
TextInput[0] = "
"
TextInput[1] = " Un exemple JavaScript permettant d'afficher "
TextInput[2] = " un message caractère par caractère "
TextInput[3] = " Cela nous donne un effet machine à écrire
"
TotalTextInput = 3;
for(var j = 0; j < TotalTextInput; j++) {
TextInput[j] += WaitSpace }
var TimerId
var TimerSet = false;
function startBanner() {
TimerSet = !TimerSet
if(TimerSet)
banner();
else
kill(); }
function banner() {
Text = rollMessage();
TimerId = setTimeout("banner()", Speed)
document.Roll.TextArea.value = Text; }
function rollMessage() {
Wait_yn = false;
i++;
var CheckSpace = HelpText.substring(i-1, i);
CheckSpace = "" + CheckSpace;
if(CheckSpace == " ") { i++; }
if(i >= HelpText.length+1) {
i = 0;
if (TextNumber < TotalTextInput) {
TextNumber++;
} else {
TextNumber = 0; }
init(); }
Text = HelpText.substring(0, i);
return (Text); }
function init() {
Text = TextInput[TextNumber]
HelpText = Text; }
CAMOS-CNAM/LWH
Page 53 sur 81.
function kill() {
clearTimeout(TimerId) }
// -->
</SCRIPT>
<FORM NAME="Roll">
Messages machine à écrire<BR>
<INPUT TYPE="text" NAME="TextArea" SIZE="47">
</FORM>
CAMOS-CNAM/LWH
Page 54 sur 81.
18.5.3.) Faire afficher des messages rotatifs.
<script language="JavaScript">
<!-/********************************************************************
APPLICATION : Faire afficher des messages rotatifs
********************************************************************/
function update(msg) {
CurrentMsg = msg;
document.rotatif.RotaMsg.value = CurrentMsg;
clearTimeout(timer);
timer = setTimeout("idleMsg()",3000);
}
function MakeArray(n) {
this.length=n;
for(var i = 1; i<= n; i++) {
this[i] = "";
}
return(this);
}
var index = 1;
var notice_num = 4; // changer la valeur en fonction du nombre de
messages
var notices = new MakeArray(notice_num);
notices[1] = "Une recherche par Yahoo ? www.yahoo.fr";
notices[2] = "Envie d'une pizza ? www.pizza.com";
notices[3] = "Besoin d'aide ? www.perdu.com";
notices[4] = "Go Microsoft ? www.microsoft.com";
var timer = setTimeout('idleMsg()',3000);
function idleMsg() {
update(notices[index++]);
if(index>notice_num) { index=1; }
}
// -->
</script>
<form name="rotatif">
<input type="text" name="RotaMsg" size="47" VALUE="">
</form>
CAMOS-CNAM/LWH
Page 55 sur 81.
18.5.4.) Faire afficher un texte défilant.
<!-/********************************************************************
APPLICATION : Faire afficher un texte defilant *
********************************************************************/
var id,pause=0,position=0;
function defil()
{
var m1 = "
Bienvenue sur ma page web";
var m2 = "
Vous trouverez ici plein d'infos";
var m3 = "
Des liens vers Internet";
var m4 = "
des tas de trucs sympas !";
var z,k,msg=m1+m2+m3+m4;
k=(70/msg.length)+1;
for(z=0;z<=k;z++) msg+=" "+msg;
document.formulaire.defilement.value=msg.substring(position,position+
120);
if(position++==msg.length) position=100;
id=setTimeout("defil()",100);
}
// -->
</script>
<form name="formulaire">
<input type="text" name="defilement" size="47">
</form>
<BR>
CAMOS-CNAM/LWH
Page 56 sur 81.
18.5.5.) Vérifier la saisie correcte d'une adresse E-Mail.
<!-/********************************************************************
APPLICATION : Verifier la saisie correcte d'une adresse E-Mail
********************************************************************/
function emailCheck() {
txt=document.isn.email.value;
if ((txt.indexOf(" ")!=-1)) {
alert("Désolé, mais les adresses E-Mail ne comportent pas
d'éspace !");
return;
}
if ((txt.indexOf("@")==-1)) {
alert("Désolé, mais les adresses E-Mail comportent un caractère
'@' !");
return;
}
if (txt.indexOf("@")<2) {
alert("Désolé, mais l'adresses est incorrecte !\n Vérifier le
texte devant le caractère '@'");
return;
}
parent.location.href='mailto:' + txt;
}
// End -->
</SCRIPT>
<FORM NAME="isn">
<INPUT TYPE="text" NAME="email" SIZE=40 VALUE=""><BR>
<INPUT TYPE="button" NAME="email1" VALUE="Tester l'adresse"
onClick="emailCheck()">
CAMOS-CNAM/LWH
Page 57 sur 81.
18.5.6.) Afficher un message par passage de souris sur un lien.
<!-/*******************************************************************
APPLICATION : Afficher un message par passage de souris sur un lien
********************************************************************/
function miseajour(lemsg) {
ActuMsg = lemsg;
document.messages.msgmouse.value = ActuMsg;
}
function nochange() {
ActuMsg = " ";
document.messages.msgmouse.value = ActuMsg;
}
// -->
</script>
<form name="messages">
<input type="text" name="msgmouse" size="47" value=" Votre message
apparaît ici ">
</form>
<A HREF="http://www.yahoo.fr" onMouseOver="miseajour('Accès direct au
site Yahoo.fr')" onMouseOut="nochange()">Accès à Yahoo.fr</a>
<BR>
<A HREF="http://www.voila.fr" onMouseOver="miseajour('Accès direct au
site Voila.fr')" onMouseOut="nochange()">Accès à Voila.fr</A>
<BR>
CAMOS-CNAM/LWH
Page 58 sur 81.
18.5.7.) Convertisseur de chiffres arabes vers chiffres romains.
<!-/*****************************************************************
APPLICATION : Convertisseur de chiffres arabes vers chiffres romains
********************************************************************/
function initArray()
{
this.length=initArray.arguments.length;
for (var i=0;i<this.length;i++)
{
this[i]=initArray.arguments[i];
}
}
var arr=new initArray("I","V","X","L","C","D","M");
var arn=new initArray(1,5,10,50,100,500,1000);
function ArabRim(x)
{
s="";
for(i=6;i>=0;i--)
{
while(Math.floor(x/arn[i])>=1)
{
s+=arr[i];
x-=arn[i]
}
for(y=0;y<=2*Math.floor((i-1)/2);y++)
{
if(x/(arn[i]-arn[y])>=1)
{
s+=arr[y]+arr[i];
x-=arn[i]-arn[y]
}
}
}
return(s)
}
// -->
</script>
<form name="form_arab_rom">
<input type="text" value="1974" name="source">
<input type="button" value="Convertir"
onClick="document.form_arab_rom.destination.value=ArabRim(document.fo
rm_arab_rom.source.value);">
<input type="text" value="" name="destination">
</form>
CAMOS-CNAM/LWH
Page 59 sur 81.
18.5.8.) Affichage d'un chronomètre.
<!-/* APPLICATION : Affichage d'un Chronometre */
var timerRunning = false
var timerID = null
var initial = new Date()
function sstart() {
document.forms.chrono.general.value = "stopper"
document.forms.chrono.general.onclick = stop
if (confirm("Lancer le Chronomètre ?"))
initial = new Date()
startTime = initial.getTime()
stopTimer()
showTimer()
}
function stop() {
document.forms.chrono.general.value = "Démarrer"
document.forms.chrono.general.onclick = sstart
stopTimer()
}
function stopTimer() {
if (timerRunning)
clearTimeout(timerID)
timerRunning = false
}
function showTimer() {
var current = new Date()
var curTime = current.getTime()
var dif = curTime - startTime
var result = dif / 1000
if (result < 1)
result = "0" + result
result = result.toString()
if (result.indexOf(".") == -1)
result += ".00"
if (result.length - result.indexOf(".") <= 2)
result += "0"
document.forms.chrono.display.value = result
timerID = setTimeout("showTimer()", 0)
timerRunning = true
}
// -->
</script>
<FORM NAME="chrono">
<INPUT TYPE="text" NAME="display" VALUE="" onFocus="this.blur()">
<INPUT TYPE="button" NAME="general" VALUE="Démarrer"
onClick="sstart()">
</FORM>
CAMOS-CNAM/LWH
Page 60 sur 81.
18.5.9.) Affichage d'une horloge.
<!-/********************************************************************
APPLICATION : Affichage d'une horloge
********************************************************************/
function runClock() {
today
= new Date();
hours
= today.getHours();
minutes = today.getMinutes();
seconds = today.getSeconds();
timeValue = hours;
timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
timeValue += ((seconds < 10) ? ":0" : ":") + seconds;
document.clock.time.value = timeValue;
timerID = setTimeout("runClock()",1000);
timerRunning = true;
}
// -->
</SCRIPT>
Le code à insérer dans l'instruction <BODY> :
onLoad="runClock();"
<form NAME="clock">
<input TYPE="text" NAME="time" SIZE=10 VALUE ="">
</form>
CAMOS-CNAM/LWH
Page 61 sur 81.
18.5.10.) Convertisseur de Miles en Kilomètres.
<form name="convert">
Miles:
<input type="text" name="M" size="10" value="1"
onChange="document.convert.K.value = 1.609 * this.value">
=
<input type="text" name="K" size="10" value="1.609"
onChange="document.convert.M.value = 0.6214 * this.value">
Kilomètres<BR>
</form>
CAMOS-CNAM/LWH
Page 62 sur 81.
18.5.11.) Afficher comme message d'alerte le contenu d'une case de saisie.
<FORM NAME="echo_it">
<INPUT NAME="msg" VALUE="hello world"><br>
<INPUT TYPE="button" VALUE="Lire Message" onClick="window.alert('Le
message est : ' + this.form.msg.value)">
</FORM>
CAMOS-CNAM/LWH
Page 63 sur 81.
18.5.12.) Sélection du fond d'écran par des boutons.
Le code à insérer dans l'instruction <BODY> :
<FORM METHOD="POST" NAME="BgChange">
<TABLE BORDER="1" CELLPADDING="3" CELLSPACING="0"
BORDERCOLOR="#006666">
<TR>
<TD ALIGN="CENTER"><INPUT TYPE="button" VALUE="Red"
onClick="document.bgColor=this.value"></TD>
<TD ALIGN="CENTER"><INPUT TYPE="button" VALUE="Aqua"
<TD ALIGN="CENTER"><INPUT TYPE="button" VALUE="Black"
<TD ALIGN="CENTER"><INPUT TYPE="button" VALUE="blue"
<TD ALIGN="CENTER"><INPUT TYPE="button" VALUE="Fuchsia"
</TR>
<TR>
<TD ALIGN="CENTER"><INPUT TYPE="button" VALUE="Gray"
<TD ALIGN="CENTER"><INPUT TYPE="button" VALUE="Green"
<TD ALIGN="CENTER"><INPUT TYPE="button" VALUE="Lime"
<TD ALIGN="CENTER"><INPUT TYPE="button" VALUE="Maroon"
<TD ALIGN="CENTER"><INPUT TYPE="button" VALUE="Navy"
</TR>
<TR>
<TD ALIGN="CENTER"><INPUT TYPE="button" VALUE="Olive"
<TD ALIGN="CENTER"><INPUT TYPE="button" VALUE="Pourpre"
<TD ALIGN="CENTER"><INPUT TYPE="button" VALUE="Silver"
<TD ALIGN="CENTER"><INPUT TYPE="button" VALUE="White"
<TD ALIGN="CENTER"><INPUT TYPE="button" VALUE="Yellow"
</TR>
</TABLE>
</FORM>
CAMOS-CNAM/LWH
Page 64 sur 81.
18.5.13.) Sélection du fond d'écran dans un menu déroulant.
<form name="menuBg">
<TABLE BORDER="1" CELLPADDING="3" CELLSPACING="0"
BORDERCOLOR="#006666">
<tr>
<td ALIGN="CENTER">Sélectionner la couleur du fond
d'écran</td>
<td ALIGN="CENTER"><select NAME="bodybgcolor" SIZE="1"
onChange="document.bgColor=this.options[this.selectedIndex].text">
<option SELECTED>Silver
<option>Aqua
<option>Black
<option>Blue
<option>Fuchsia
<option>Gray
<option>Green
<option>Lime
<option>Maroon
<option>Navy
<option>Olive
<option>Purple
<option>Red
<option>Silver
<option>Teal
<option>White
<option>Yellow
</select>
</td>
</tr>
</table>
</form>
CAMOS-CNAM/LWH
Page 65 sur 81.
18.5.14.) Ouverture d'une nouvelle fenêtre en cliquant sur un bouton.
<form name="openbrowser">
<input type="button" value="Ouvrir une fenêtre"
onClick="window.open('fenetre1.htm');">
</form>
CAMOS-CNAM/LWH
Page 66 sur 81.
18.5.15.) Affichage d'un message après le clic sur un lien.
<a href="fenetre2.htm" onClick="alert('bienvenue sur la page
!');">Cliquer ici !</a>
CAMOS-CNAM/LWH
Page 67 sur 81.
18.5.16.) Affichage d'un message en pressant un bouton.
<FORM NAME="Msg">
<INPUT TYPE="button" NAME="test" VALUE="cliquer ici !"
onClick="window.alert('Ceci est un message d\'information !');">
</FORM>
CAMOS-CNAM/LWH
Page 68 sur 81.
18.5.17.) Affichage d'une citation aléatoire.
<!-/********************************************************************
APPLICATION : Affichage d'une citation aleatoire
********************************************************************/
quotes = new Array(6);
authors = new Array(6);
quotes[0] = "I have a new philosophy. I am only going to dread one
day at a time.";
authors[0] = "Charles Schulz";
quotes[1] = "Reality is the leading cause of stress for those in
touch with it.";
authors[1] = "Jack Wagner";
quotes[2] = "Few things are harder to put up with than the annoyance
of a good example.";
authors[2] = "Mark Twain";
quotes[3] = "The pure and simple truth is rarely pure and never
simple.";
authors[3] = "Oscar Wilde";
quotes[4] = "There is no business like show business, but there are
several businesses like accounting.";
authors[4] = "David Letterman";
quotes[5] = "Man invented language to satisfy his deep need to
complain.";
authors[5] = "Lily Tomlin";
//calcul d'une position aléatoire
index = Math.floor(Math.random() * quotes.length);
//affichage du résultat
document.write("<B>" + quotes[index] + "</B><BR>");
document.write("<I>" + authors[index] + "</I>");
//-->
</SCRIPT>
CAMOS-CNAM/LWH
Page 69 sur 81.
18.5.18.) Navigation dans l'historique de navigation du navigateur.
<FORM NAME="History">
<INPUT TYPE="BUTTON" VALUE="<<" onClick="history.back()">
<INPUT TYPE="BUTTON" VALUE="Page principale"
onClick="location='http://www.asi.fr/~ericbon/html/index.htm'">
<INPUT TYPE="BUTTON" VALUE=">>" onClick="history.forward()">
</FORM>
CAMOS-CNAM/LWH
Page 70 sur 81.
18.5.19.) Affichage d'un message suivant l'heure de la journée.
<!-/********************************************************************
* APPLICATION : Message suivant l'heure de la journee
********************************************************************/
d = new Date();
hour = d.getHours();
if(hour < 5) {
document.write("Une dernière visite avant de se coucher ?");
}
else
if(hour < 8) {
document.write("Vous vous levez tôt !");
}
else
if(hour < 12) {
document.write("Quelle belle matinée !");
}
else
if(hour < 18) {
document.write("On surfe en pleine journée !");
}
else
{
document.write("Quelle belle soirée !");
}
//-->
</SCRIPT>
CAMOS-CNAM/LWH
Page 71 sur 81.
18.5.20.) Afficher la date de modification du document en français.
<!-/********************************************************************
APPLICATION : Afficher la date de modification du document *
********************************************************************/
function MakeArray(n) {this.length = n; return this;}
var Days = new MakeArray(7);
var Months = new MakeArray(12);
Days[1]="Lundi";
Days[2]="Mardi";
Days[3]="Mercredi";
Days[4]="Jeudi";
Days[5]="Vendredi";
Days[6]="Samedi";
Days[7]="Dimanche";
Months[1]="janvier";
Months[2]="février";
Months[3]="mars";
Months[4]="avril";
Months[5]="mai";
Months[6]="juin";
Months[7]="juillet";
Months[8]="août";
Months[9]="septembre";
Months[10]="octobre";
Months[11]="novembre";
Months[12]="décembre";
function getNiceDate(theDate) {
return Days[theDate.getDay()+1] + " " + theDate.getDate() + " "
+ Months[theDate.getMonth()+1] + " " + theDate.getYear();
}
// -->
</SCRIPT>
Affichage de la date de dernière modification de cette page :
<!-var lastMod = new Date();
lastMod.setTime(Date.parse(document.lastModified));
document.writeln(getNiceDate(lastMod));
// -->
</SCRIPT>
CAMOS-CNAM/LWH
Page 72 sur 81.
18.5.21.) Affichage du jour de la semaine.
<!-/********************************************************************
*****
* APPLICATION : Affichage du jour de la semaine
*
* RECUPERE A L ADRESSE : http://www.asi.fr/~ericbon/htmldoc.htm
*
*********************************************************************
*****/
now = new Date()
if (now.getDay() == 0)
document.write("C'est dimanche")
document.write("C'est lundi")
document.write("C'est mardi")
document.write("C'est mercredi")
document.write("C'est jeudi")
document.write("C'est vendredi")
document.write("C'est samedi")
//-->
</SCRIPT>
CAMOS-CNAM/LWH
Page 73 sur 81.
18.5.22.) Affichage de la date de modification du document.
<!-document.write("Date de dernière modification " +
document.lastModified);
// -->
</script>
CAMOS-CNAM/LWH
Page 74 sur 81.
18.5.23.) Affichage d'un menu déroulant de liens.
<FORM>
<SELECT NAME="liste1" SIZE="1">
<OPTION SELECTED VALUE="">-------- Liens à visiter -------<OPTION VALUE="../htmldoc.htm">La doc HTML
<OPTION VALUE="http://www.asi.fr/Malibu">Le serveur de Malibu
<OPTION VALUE="http://www.asi.fr">Le serveur d'A.S.I
<OPTION VALUE="http://www.babel.net">Le serveur de Babel
</SELECT>
<INPUT TYPE="button" VALUE="Go" onClick="if
(form.liste1.selectedIndex != 0) location =
form.liste1.options[form.liste1.selectedIndex].value; else
alert('Veuillez faire un choix au menu.')">
</FORM>
CAMOS-CNAM/LWH
Page 75 sur 81.
18.5.24.) Affichage d'un message sur la sélection d'un bouton.
<FORM>
1: <INPUT TYPE="radio" NAME="radio" value="Choix du bouton 1"
onClick="alert(value)">
2: <INPUT TYPE="radio" NAME="radio" value="Bouton 2 choisi"
3: <INPUT TYPE="radio" NAME="radio" value="Dernier bouton"
</FORM>
On résume :
Procédez à une détection de la version du navigateur afin de vérifier que le script s'exécutera
correctement.
Vérifier votre script sur plusieurs navigateurs différents
CAMOS-CNAM/LWH
Page 76 sur 81.
19.) Mise en place sur le serveur FTP
19.1.) Le FTP, comment ça marche
Cette procédure est propre à chaque fournisseur d'accès Internet. Néanmoins nous allons voir
dans les grandes lignes comment mettre vos fichiers sur le serveur FTP afin que vos pages
soient disponibles sur le Net aux vues de tout le monde.
La fonction FTP permet le transfert de fichiers entre deux ordinateurs connectés à l'Internet.
Le FTP c'est en fait de la navigation dans un disque dur, vous entrez dans un répertoire, puis
un sous-répertoire, etc.., pour enfin accéder au fichier que vous cherchez, ou au répertoire
dans lequel vous désirez placer vos fichiers
A partir d'un outil FTP simple comme Ws_FTP, CuteFtp, etc... sur PC ou Fetch sur
Macintosh, connectez-vous au serveur FTP de votre fournisseur d'accès Internet
Déplacez-vous dans le répertoire qui doit contenir les fichiers Web (votre répertoire par défaut
le plus souvent), sélectionnez le ou les fichiers à transférer à partir de votre disque dur, puis
lancez le transfert.
19.2.) La procédure étape par étape
Lancez votre logiciel de FTP
Connectez vous sur votre compte FTP chez votre fournisseur d'accès
Host Address = L'adresse du serveur FTP de votre provider (fournisseur d'accès)
User ID = Votre login chez votre provider
Password = Votre mot de passe
Transfert type = autodetect (ou alors " ASCII " pour les fichiers texte comme les fichiers
HTML, et " BINARY / IMAGE " pour les images GIF, JPEG etc...)
Il suffit ensuite de copier les fichiers de votre disque dur vers le disque de votre fournisseur
d'accès.
Note : attention, il se peut que votre provider ait mis en place des procédures spécifiques,
veuillez le consulter afin de les connaître.
Il se peut, par exemple, que votre fichier HTML principal doive s'appeler INDEX.HTML ou
HOME.HTML etc...
Il est très important de faire attention aux majuscules est minuscules dans la dénomination de
vos fichiers, en effet, l'hébergement des fichiers chez votre fournisseur d'accès se fera sans
doute sur une machine UNIX (et sous Unix, les Majuscules / Minuscules sont importantes).
Vous possédez Windows 95/98, vous créez un fichier TEXTE avec le BLOC-NOTE. Le
fichier va, par exemple, s'appeler Toto.html. Dans votre page Titi.html vous faites appel au
fichier toto.html ou a l'image tata.gif, chez vous, en local, cela fonctionne, mais une fois sur le
serveur FTP de votre fournisseur d'accès, le lien ne marche pas, ou l'image ne s'affiche pas,
pourtant tous les fichiers sont présents sur le FTP.
CAMOS-CNAM/LWH
Page 77 sur 81.
L'erreur provient de la majuscule, en effet, Windows 95/98 a tendance à créer des fichiers
avec majuscule au début, or, vous, vous avez un lien sur un fichier toto.html et non Toto.html
(sous unix, il est possible d'avoir 2 (voir plusieurs) fichiers avec le même nom dans le même
répertoire: vous pouvez, par exemple, avoir Toto.html, toto.HTML, tOtO.hTmL, ToTo.HTml
etc...). Votre lien pointe donc vers un fichier qui n'existe pas. Faites comme tout le monde,
pensez à nommer tous vos fichiers en minuscule, et tous vos liens en minuscule aussi.
On résume :
Fixez vous cette règle de programmation : Tous les noms de fichiers en minuscule
Utilisez un client FTP pour faire les mises à jour de votre site
Conservez une copie en local de votre site
CAMOS-CNAM/LWH
Page 78 sur 81.
20.) Les Metas Tags
Quelques exemples
Les metas-tags ne sont pas vraiment des informations destinées au public qui va venir
consulter vos pages web. Ils sont invisibles pour l'utilisateur mais riche en informations pour
le logiciel de Navigation et servent au référencement dans les moteurs de recherche.
La commande META associe à votre document HTML des informations d'en-tête qui seront
lues par le serveur http. Ces informations peuvent servir à identifier un nom (name), un nom
de l'auteur (author), un contenu (content) et/ou une directive HTTP-EQUIV.
Les meta-tags se placent entre <HEAD> et </HEAD> juste après <TITLE> et </TITLE> et se
présentent sous la forme :
<META NAME="nom" CONTENT="valeur">
<META HTTP-EQUIV="nom" CONTENT="valeur">
Pour définir l'auteur du document :
<META NAME="Author" CONTENT="Votre Nom">
Pour définir les droits d'auteur :
<META NAME="Copyright" CONTENT="Votre Nom, Année de création">
Certains moteurs de recherche indexent les pages avec le contenu de cette balise et fourniront
cette description dans les résultats des requêtes :
<META NAME="Description" CONTENT="Le descriptif de votre page web">
Noms des programmes utilisés pour créer le document HTML.
<META NAME="Formatter" CONTENT="valeur">
<META NAME="Generator" CONTENT="valeur">
Les mots clés qui définissent votre page HTML, le moteur de recherche renverra sur votre
page si une personne utilise un ou plusieurs de ces mots clés :
<META NAME="Keywords" CONTENT="mot1 mot2 mot3 mot4">
Comportement du robot indexeur du moteur de recherche :
<META NAME="Robot" CONTENT="NOINDEX,NOFOLLOW"> : pour interdire
l'indexation, et interdire de suivre les liens de votre page web.
<META NAME="Robot" CONTENT="INDEX,FOLLOW"> : pour autoriser l'indexation et
lui dire de suivre les liens de la page pour continuer l'indexation.
Déclaration de la langue utilisée pour l'indexation des robots :
<META HTTP-EQUIV="Content-Language"CONTENT="fr">
Changement de localisation de vos pages :
CAMOS-CNAM/LWH
Page 79 sur 81.
<META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://www.asi.fr/Malibu"> Après
le chargement de cette page, le navigateur va automatiquement charger la page indiquée par
URL. S'il n'y en a pas (CONTENT="10"), alors la page courante sera rechargée. La valeur est
exprimée en secondes.
Pour définir le type de document et la page de code utilisée pour le texte :
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
Pour définir la date d'expiration du document :
<META HTTP-EQUIV="Expires" CONTENT="Mon, 1 jun 1998 03:40:40 GMT">
On résume :
Les metas tags servent aux moteurs de recherche pour l'indexation des pages.
Une redirection automatique de page parce que votre site web à changé d'emplacement :
<META HTTP-EQUIV="Refresh" CONTENT="0; URL=http://nouvelle_adresse...">
CAMOS-CNAM/LWH
Page 80 sur 81.
Pour en savoir plus
Documentation en français
Un nouveau guide Internet
All HTML
Site de publication sur Internet
Oxygen le guide HTML 4
ABC de l'HTML
Centre de page web
Guide HTML
Guide pratique et progressif du langage HTML
Le langage HTML
HyperTextMarkupLanguage
Le langage HTML Aide à la découverte du HTML simplement
Cours langage HTML
Mephisto et ses trucs webs
Programmation HTML
Les cahiers HTML
Le site du Webmaster francophone
Trucs et astuces en tous genres
Trucs et astuces
Un Petit Tour en HTML
Manuel illustré de programmation en HTML
Publier sur le WWW
Documentation en anglais
Introduction to HTML
W3C's home page for HTML
NCSA Beginner's Guide to HTML
Web Mastery
HTML Quick Reference How do they do that with HTML
HTML Style Guide and Test Suite
Composing Good HTML
Decoding FORMs with CGI
Basic and Advanced HTML
Mieux comprendre Internet
La francisation démystifiée du HTML
Les étapes de la constitution d'un site web
Site de référence en infographie A Beginner's Guide to URLs
World Wide Web FAQ
CAMOS-CNAM/LWH
Page 81 sur 81.

) Introduction à la création de pages Web

Transcription

Documents pareils

Html et html5 1 - pierre

HTML – Les formulaires

Exercices PHP

PHP – HTML → LES FORMULAIRES Pour vous aider :

Fiche 23 - HTML facile

Le langage HTML

Créer un formulaire de connexion au forum phpBB

moteur.txt - Bloc-notes

Formulaire et envoi d`un message pour Contact html> <head

Formulaire