Principe de base de la création de page HTML Embellissement par l

Transcription

Principe de base de la création de page HTML
Embellissement par l’utilisation de CSS
Dynamisation par l’utilisation de javascript
Présentation d’Internet ......................................................................................................................6
Un peu d’Histoire .............................................................................................................................. 6
Client - Serveur ................................................................................................................................ 6
Protocole d’adressage des documents - URL......................................................................................... 6
Présentation de HTML.........................................................................................................................7
Les pages web et l’hypertexte ............................................................................................................ 7
Langage HTML.................................................................................................................................. 7
HTML : Bases ......................................................................................................................................8
Généralités ...................................................................................................................................... 8
La présentation de la page HTML dépend donc : ................................................................................... 8
Éléments ......................................................................................................................................... 8
Accents ........................................................................................................................................... 8
Unités de largeur en HTML ................................................................................................................. 9
Structure de la page ......................................................................................................................... 9
HTML : Styles....................................................................................................................................10
Style des caractères (mise en forme de mots).................................................................................... 10
Style logique (mise en forme de portions de textes)............................................................................ 10
Style des paragraphes..................................................................................................................... 11
Style des blocs ............................................................................................................................... 11
NB :.............................................................................................................................................. 11
HTML : Divisions ...............................................................................................................................12
Paragraphe .................................................................................................................................... 12
Ligne suivante et espacement .......................................................................................................... 12
En têtes......................................................................................................................................... 12
Traits ............................................................................................................................................ 12
Marges .......................................................................................................................................... 13
HTML : Couleur .................................................................................................................................14
Identificateur de couleurs ................................................................................................................ 14
Codage des couleurs ....................................................................................................................... 14
Daltonisme (1794 Dalton)................................................................................................................ 14
HTML : Polices ..................................................................................................................................15
Définir une police pour une portion du document ................................................................................ 15
Taille ........................................................................................................................................ 15
Couleur de police........................................................................................................................ 15
Définir une police pour tout le document ........................................................................................... 16
Élément BASEFONT .................................................................................................................... 16
Attributs de couleurs dans BODY .................................................................................................. 16
HTML : Listes ....................................................................................................................................17
Listes de définitions ........................................................................................................................ 17
Éléments ................................................................................................................................... 17
Attributs.................................................................................................................................... 17
Listes non ordonnées ...................................................................................................................... 17
Éléments ................................................................................................................................... 17
Attributs.................................................................................................................................... 17
Listes ordonnées ............................................................................................................................ 18
Éléments ................................................................................................................................... 18
Attributs.................................................................................................................................... 18
Attributs déclassés au profit des feuilles de style ............................................................................ 18
Listes imbriquées............................................................................................................................ 18
Listes répertoires (déclassé) ............................................................................................................ 18
Éléments ................................................................................................................................... 18
Listes menus (déclassé) .................................................................................................................. 18
Éléments ................................................................................................................................... 18
HTML : Tableaux ...............................................................................................................................20
Attributs de TABLE.......................................................................................................................... 20
Attributs cellpadding et cellspacing ............................................................................................... 20
Valeurs pour l’attribut frame ........................................................................................................ 20
Valeurs pour l’attribut rules ......................................................................................................... 21
Une cellule..................................................................................................................................... 22
Attributs de TD........................................................................................................................... 22
Une ligne de cellules ....................................................................................................................... 22
Plusieurs lignes .............................................................................................................................. 23
Attributs de TR........................................................................................................................... 23
Cellule en-tête................................................................................................................................ 23
Tableaux complexes........................................................................................................................ 23
Légende .................................................................................................................................... 23
Regroupement de cellules en lignes ou colonnes............................................................................. 24
Nouveaux éléments (HTML 4.0) de groupement dans les tableaux ........................................................ 25
groupement sémantique de lignes ................................................................................................ 25
Groupement d’attributs pour des colonnes ..................................................................................... 26
HTML : Liens .....................................................................................................................................27
Protocole d’adressage des documents - URL (rappel) .......................................................................... 27
Composition de l’adresse ............................................................................................................. 27
Syntaxe .................................................................................................................................... 27
Élément d’ancrage vers d’autres pages.............................................................................................. 27
Edition 2005-2006
Internet - HTML CSS JAVASCRIPT
2/101
Syntaxe .................................................................................................................................... 27
Couleur des liens (rappel)............................................................................................................ 27
Référence relative ...................................................................................................................... 28
Référence absolue ...................................................................................................................... 28
Conseil ...................................................................................................................................... 28
Éléments d’ancrage intrapages ......................................................................................................... 28
Syntaxe .................................................................................................................................... 28
Référence à un label d’une autre page .......................................................................................... 28
Élément mail.................................................................................................................................. 28
Nouveaux attributs ......................................................................................................................... 29
title .......................................................................................................................................... 29
pour l’accès par le clavier : accesskey, tabindex ............................................................................. 29
Éléments utiles............................................................................................................................... 29
Images .............................................................................................................................................30
Création ........................................................................................................................................ 30
Logiciels .................................................................................................................................... 30
Types d’images rencontrés sur le web ........................................................................................... 30
Où trouver des images ................................................................................................................ 30
Taille des images........................................................................................................................ 30
Taille des écrans standard 640x480 et 800x600 ............................................................................. 30
Formats utilisés sur le web .......................................................................................................... 31
Ne pas oublier que...................................................................................................................... 31
Comment réduire le poids d’une image.......................................................................................... 31
Élément d’intégration d’image .......................................................................................................... 32
Syntaxe minimale....................................................................................................................... 32
Attributs.................................................................................................................................... 32
Espacement ................................................................................................................................... 33
Image de fond d’écran .................................................................................................................... 33
Images cliquables ........................................................................................................................... 34
Une solution simple l’élément <A> ............................................................................................... 34
Autre solution : les images réactives............................................................................................. 34
Listes avec des images à la place des puces ....................................................................................... 35
Données multimédia ....................................................................................................................... 35
Images ..................................................................................................................................... 35
Vidéo ........................................................................................................................................ 36
Applets multimédias ................................................................................................................... 36
Téléchargement versus streaming ................................................................................................ 37
Éléments HTML pour intégrer du multimédia ...................................................................................... 37
EMBED ...................................................................................................................................... 37
OBJECT ..................................................................................................................................... 39
Cadres ..............................................................................................................................................40
Création du fichier FRAMESET .......................................................................................................... 40
Élément <FRAMESET> </FRAMESET> .......................................................................................... 40
Élément <FRAME> ..................................................................................................................... 41
Imbrications .............................................................................................................................. 41
Élément <NOFRAMES> </NOFRAMES>......................................................................................... 42
Afficher dans le cadre souhaité ......................................................................................................... 43
Attribut target de l’élément <A> .................................................................................................. 43
Les cadres flottants......................................................................................................................... 43
Syntaxe .................................................................................................................................... 43
Attributs.................................................................................................................................... 43
Formulaires ......................................................................................................................................44
Élément <FORM> </FORM> ............................................................................................................ 44
Signale le début et la fin d’un formulaire ....................................................................................... 44
Élément <INPUT> .......................................................................................................................... 45
Boîtes de saisie de texte : type= »text » ....................................................................................... 45
Boîtes de saisie masquées : type= »password » ............................................................................. 45
Cases à cocher : type= »checkbox »............................................................................................. 45
Boutons radio : type=”radio” ....................................................................................................... 45
Données cachées : type= »hidden » ............................................................................................. 45
Sélecteur de fichier : type= »file »................................................................................................ 45
Soumission du formulaire : .......................................................................................................... 45
Effacer le formulaire : type= »reset » ........................................................................................... 46
Boutons : type= »button » .......................................................................................................... 46
Élément <BUTTON> </BUTTON> ..................................................................................................... 46
Élément <SELECT> </SELECT> ....................................................................................................... 46
Élément <TEXTAREA> </TEXTAREA> ............................................................................................... 47
Attacher une information à un contrôle.............................................................................................. 47
Attacher une touche à un contrôle .................................................................................................... 47
Désactiver des contrôles .................................................................................................................. 47
Feuilles de style CSS.........................................................................................................................48
Propriétés de style et leurs valeurs ................................................................................................... 48
Polices ...................................................................................................................................... 49
Textes....................................................................................................................................... 49
Couleurs et fonds ....................................................................................................................... 50
Blocs......................................................................................................................................... 50
Edition 2005-2006
3/101
Format visuel ............................................................................................................................. 51
Listes ........................................................................................................................................ 51
Tableaux (CSS2) ........................................................................................................................ 53
Curseurs (CSS2) ........................................................................................................................ 53
Style local ou en ligne : attribut style ................................................................................................ 53
Règles et classes pour les styles intégré et externe ............................................................................. 54
Règles....................................................................................................................................... 54
Classes ..................................................................................................................................... 55
Pseudo-classes........................................................................................................................... 55
Style intégré ou global : élément STYLE avant le BODY ....................................................................... 55
Style externe ou lié : élément STYLE dans un fichier séparé................................................................. 56
Positionnement dans la page avec les CSS .......................................................................................57
Mode CSS ...................................................................................................................................... 57
Éléments HTML 4.01 ( Référence rapide ) .......................................................................................... 58
Attributs HTML 4.01 ........................................................................................................................ 60
JavaScript : Présentation..................................................................................................................69
JavaScript dans HTML.......................................................................................................................70
Insertion d’un bloc de code JavaScript dans le fichier HTML.................................................................. 70
Élément SCRIPT ......................................................................................................................... 70
Masquer les scripts pour les navigateurs non compatibles................................................................ 70
Élément NOSCRIPT ..................................................................................................................... 71
CODE JS.................................................................................................................................... 71
Insertion de code dans une URL d’un élément HTML ........................................................................... 71
Élément A.................................................................................................................................. 71
<A href= »JavaScript:code »>texte</A> ...................................................................................... 71
Code JavaScript pour les événements dans les éléments ..................................................................... 72
JavaScript : Types ............................................................................................................................73
Chaînes de caractères : string .......................................................................................................... 73
Nombres : number ......................................................................................................................... 73
Booléens : boolean ......................................................................................................................... 73
Fonctions : function ........................................................................................................................ 73
Objets : object ............................................................................................................................... 74
Convertir une chaîne en nombre ....................................................................................................... 74
JavaScript : Opérateurs ....................................................................................................................75
Concaténation (chaînes) .................................................................................................................. 75
Arithmétiques ................................................................................................................................ 75
Logiques........................................................................................................................................ 75
Binaires (bit à bit)........................................................................................................................... 75
Affectation ..................................................................................................................................... 75
Relationnels (nombres et chaînes) .................................................................................................... 75
Priorité des opérateurs .................................................................................................................... 75
JavaScript : Instructions ..................................................................................................................76
Commentaires................................................................................................................................ 76
Syntaxe : // ou /*...*/ .................................................................................................................... 76
Variables ....................................................................................................................................... 76
Boucles ......................................................................................................................................... 76
Instructions conditionnelles.............................................................................................................. 78
Tableaux : classe Array.....................................................................................................................79
Déclaration d’un tableau .................................................................................................................. 79
Propriétés ...................................................................................................................................... 79
Accès aux cases ............................................................................................................................. 79
Méthodes....................................................................................................................................... 79
Chaînes de caractères : classe String ...............................................................................................80
Constructeur .................................................................................................................................. 80
Propriété ....................................................................................................................................... 80
Méthodes....................................................................................................................................... 80
Expressions rationnelles RegExp() ...................................................................................................81
Définition d’un modèle .................................................................................................................... 81
Constructeur .............................................................................................................................. 81
Caractères spéciaux .................................................................................................................... 81
Classes de caractères.................................................................................................................. 81
Position ..................................................................................................................................... 81
Mémorisation des corespondances trouvées ................................................................................... 81
Méthodes....................................................................................................................................... 81
Exemples....................................................................................................................................... 82
Numériques ............................................................................................................................... 82
Alphabétiques ............................................................................................................................ 82
Mathématiques : classe Math............................................................................................................83
Constantes mathématiques : Math.constante ..................................................................................... 83
Méthodes mathématiques : Math.fonction(paramètres) ....................................................................... 83
Dates : classe Date ...........................................................................................................................84
Méthodes pour les heures, minutes, secondes, millisecondes ............................................................... 84
Méthodes pour les jours, mois, années .............................................................................................. 84
Autres méthodes ............................................................................................................................ 85
Images : classe Image() ..................................................................................................................86
Constructeur : var mon_image = new Image(); ................................................................................. 86
Edition 2005-2006
4/101
Propriétés ...................................................................................................................................... 86
Méthodes....................................................................................................................................... 86
Classes instanciées par le navigateur : Navigator.............................................................................87
Propriétés de navigator ................................................................................................................... 87
Tableau plugins .............................................................................................................................. 87
Tableau type MIME ......................................................................................................................... 87
Qu’est-ce que le Mime ? .............................................................................................................. 87
Content-type:type_mime/sous_type ............................................................................................. 87
Propriétés des éléments du tableau MIME ...................................................................................... 88
Classes instanciées par le navigateur : Window ...............................................................................89
Propriétés ...................................................................................................................................... 89
History ...................................................................................................................................... 89
Location .................................................................................................................................... 89
Propriétés de location.................................................................................................................. 89
Document.................................................................................................................................. 90
Méthodes....................................................................................................................................... 90
Événements ................................................................................................................................... 91
Accéder aux données d’un formulaire...............................................................................................92
Accès aux textes contenus dans les champs....................................................................................... 92
Lecture ..................................................................................................................................... 92
Écriture ..................................................................................................................................... 92
Lire le texte par défaut................................................................................................................ 92
Accès aux choix cochés par le client .................................................................................................. 92
Recherche des choix cochés ......................................................................................................... 93
Cocher ou décocher un choix ....................................................................................................... 93
Obtenir le choix coché par défaut au chargement ........................................................................... 93
Accès aux choix dans les listes de choix............................................................................................. 93
Lire les choix.............................................................................................................................. 93
Modifier les choix........................................................................................................................ 94
Accès aux textes sur les boutons ...................................................................................................... 94
Accès par tableau ........................................................................................................................... 95
Événements dans un formulaire .......................................................................................................97
onClick (clic sur un élément) ............................................................................................................ 97
onChange (modification dans l’élément) ............................................................................................ 98
onFocus, onBlur (attribution, perte du focus) ..................................................................................... 98
onSelect (sélection dans un champ) .................................................................................................. 98
onReset, onSubmit ......................................................................................................................... 98
Méthodes....................................................................................................................................... 99
Activer ou désactiver des contrôles ................................................................................................... 99
Vérification d’un formulaire............................................................................................................100
Edition 2005-2006
5/101
Présentation d’Internet
Un peu d’Histoire
1961 connexions de plusieurs réseaux d’ordinateurs.
fin des années 1960 : l’ARPA (Advanced Research Project Agency) agence du ministère de la défense
des USA crée ARPANET (lancé en 1969 et toujours en fonctionnement) ;
Années 1970 les universités, laboratoires, le gouvernement américain sont connectés à ARPAnet.
Chaque réseau a son langage particulier.
1982 TCP/IP (Transmission Control Protocol, Internet Protocol) :
o IP vient de la couche réseau de ARPANET ;
o TCP = protocole de transport de ARPANET ;
o le mot Internet entre dans le langage ;
o il devient le standard en matière de réseau ;
o comporte plus de 100 protocoles différents.
Création du world wide web :
o apparition du langage HTML pour rédiger les pages web (1989 Tim Berners-Lee du CERN);
o le protocole http (hyperText Transfer Protocol) permet de transmettre ces pages ;
o un programme de navigation client destiné à recevoir les données, à les interpréter et à
afficher les résultats.
1993 apparitions de Mosaic (Mark Andreesen de Urbana Champaign NCSA), la première interface
graphique pour afficher des documents HTML, son fondateur créent ensuite l’entreprise Mosaic
Communications Corp devenue Netscape (1994). Internet Explorer est créé par Microsoft en 1995
Client - Serveur
Le client ou browser comporte un logiciel de navigation (il en existe sous toutes les plate-formes) qui
affiche les pages envoyées par le serveur. Le serveur envoie les données demandées par le client si celuici est autorisé à accéder au document et il ferme la connexion. La connexion établie ne dure que le temps
de l’envoi de la page demandée. Pour chaque page demandée au même serveur on recommence la
procédure de connexion. La machine qui accueille le serveur doit être disponible et présente sur le
réseau.
Protocole d’adressage des documents - URL
Pour accéder à un site il faut donner son adresse unique sur le réseau Internet.
Adresse d’un document = URL (Uniform Resource Locator).
protocole d’échange entre le client et le serveur :
o http (transfert de données HTML) ;
o ftp (transfert de fichiers entre ordinateurs reliés à internet) ;
o smtp (échange de couriers électroniques) ;
o nntp (forums de news) ;
o telnet (connexion à d’autres ordinateurs) ;
o mailto (lancer un agent de mail) ;
o about (pour distribuer certains types d’informations) ;
o javascript (pour exécuter un script téléchargé par la page).
adresse internet du serveur (adresse TCP/IP unique sur le réseau) ;
arborescence des répertoires (chemin) qui conduit au document ;
nom du document qui comporte toujours l’extension .html ou .htm ( ≠ pour un script) ;
éventuellement :
o le port (sous TCP/IP le port par défaut attribué à http est 80 )
o authentification (username et password) ;
o arguments passés à un programme lors de l’appel de liens exécutables.
Syntaxe :
minimale : protocole://nom_serveur/
(exemple: http://www.voila.fr )
courante : protocole://nom_serveur/repertoire/sous_repertoire/nom_document
complète : protocole://user;pass@nom_serveur:port/repertoire/nom_document?arguments
Edition 2005-2006
6/101
Présentation de HTML
Les pages web et l’hypertexte
Les écrans ou « pages » du world wide web proposent des textes, tableaux, images , vidéos, sons, éléments d’interfaces (boutons,
boîtes de dialogue, listes).
Il est possible de placer des liens sur ces objets permettant une connexion à d’autres pages. (HYPERTEXTE)
Qu’est-ce que l’hypertexte ?
C’est un système qui relie par des liens activables des éléments d’information ;
un livre se lit dans l’ordre chronologique des pages, ce n’est pas de l’hypertexte
dans un dictionnaire on lit un terme et des « liens » sont proposés vers d’autres pages du dictionnaire,
c’est de l’hypertexte manuel (le lecteur doit tourner les pages)
Langage HTML
Les pages du world wide web sont conçues à l’aide de HTML : HyperText Markup Language qui était à
l’origine une application de SGML (Standard Generalized Markup Language), et qui est à présent une DTD
de XML (eXtended Markup Language).
Langage de balisage qui permet d’indiquer la structure du texte : titres de la page, et des sections,
paragraphes, blocs regroupant des paragraphes, graphiques.
et qui a été détourné de sa vocation première pour mettre en forme directement des documents par
des éléments ajoutés au fur et à mesure dans le langage et qui sont aujourd’hui pour la plupart
déconseillés par la norme (la norme recommande de séparer la structure du document de son
affichage, ce qui est important c’est de définir qu’une portion de texte est un titre, vous pouvez ensuite
décider ailleurs que les titres doivent être centrés et affichés en monaco 18pt et appliquer cette règle à
tous les titres que vous avez dans une page ou à une partie seulement, c’est le principe des feuilles de
style) :
o taille des caractères ;
o couleurs ;
o position du texte.
Mais malgré l’existence des éléments de mise en forme, l’apparence d’une page n’est pas définie strictement, elle
dépend :
du browser utilisé
des préférences de l’utilisateur (taille des polices, couleurs).
Les versions :
création en 1989 par Tim Berners Lee ;
HTML+ 1993 ;
HTML 2.0 (novembre 1995) norme de l’IETF (Internet Engineering Task Force) qui codifie la pratique
commune du HTML de 1994 ;
HTML 3.0 (septembre 1995) ;
HTML 3.2 (janvier 1997) norme du W3C pour codifier les pratiques communes en 1996, les éléments
sont encore reconnus par tous les navigateurs ;
HTML 4 (décembre 1997, révisée en avril 1998) norme qui étend HTML : feuilles de styles, scripts,
cadres, amélioration des formulaires (touches d’accès, groupement sémantiques), meilleur accès pour
les malvoyants (l’attribut alt de IMG devient obligatoire, des descriptions peuvent être données dans
TABLE, IMG, FRAME et les tableaux sont mieux structurés pour faciliter le rendu par des navigateurs
non visuels), internationalisation. L’effort est principalement mis sur la séparation de la structure du
document de sa présentation (suppression des éléments et attributs du 3.2 qui étaient relatifs à
l’affichage au profit des feuilles de styles). La dernière version est HTML4.01 du 24 décembre 1999
XHTML 1.0 (2000) donne les modifications nécessaires pour que l’utilisation de HTML 4 soit conforme à
XML.
XHTML 1.1 (mai 2001)
XHTML 2.0 (janvier 2003)
pour en savoir plus : http://www.w3.org/MarkUp/
Edition 2005-2006
7/101
HTML : Bases
Généralités
o
o
o
o
HTML (HyperText Markup Language) permet de relier par des liens cliquables des éléments
d’information ;
ce n’est pas un langage de programmation, c’est un langage de balisage qui permet d’indiquer la
mise en forme de la page;
c’est un langage de balisage, c’est à dire une application de SGML (Standard Generalized Markup
Language) et à présent une application XML (Extended Markup Language) ;
HTML est interprété par le navigateur ou browser.
La présentation de la page HTML dépend donc :
o
o
o
o
des éléments utilisés et des feuilles de style ;
de la largeur de la page ouverte à l’écran ;
de la police choisie pour afficher le texte (préférence dans le navigateur) ;
du nombre de couleurs du moniteur.
Éléments
o
o
o
o
la syntaxe est la suivante : <NOM_ELEMENT> texte </NOM_ELEMENT> ;
pas sensible à la casse : <ELEMENT> = <element> = <Element> = <eLemenT> (la norme
recommande l’utilisation des majuscules pour les éléments) ;
ils peuvent comporter des attributs nomAttribut = «valeur » , l’ordre dans lequel ceux-ci sont
placés n’a pas d’importance, ex :
<IMG alt= « photo de mes vacances » src= »photos/vacances/mer.gif » >
est équivalent à :
<IMG src= »photos/vacances/mer.gif » alt= »photo de mes vacances » >
caractères réservés :
Accents
caractère
<
&
o
o
HTML
<
&
caractère
>
«
HTML
>
"
ils sont codés sur 7 bits, il faut utiliser des mots-clés pour les remplacer ;
syntaxe : &CaractèreMotclé;
signe
‘
‘
^
~
º
¨
æ
ç
/
mot-clé
acute
grave
Circ
Tilde
Ring
uml
Lig
cedil
slash
caractères
A, E, I, O, U, Y, a, e, i, o, u, y
A, E, I, O, U, a, e, i, o, u
A, E, I, O, U, a, e, i, o, u
A, N, O, a, n, o
A, a
A, E, I, O, U, a, e, i, o, u, y
AE, ae
C, c
O, o
exemple
é et É
è et È
ê et Ê
ñ et Ñ
å et Å
ë et Ë
æ et Æ
ç et Ç
Ø
HTML
é et É
è et È
ê et Ê
ñ et Ñ
å et Å
ë et Ë
æ et Æ
ç et Ç
Ø
Il est possible de les donner à partir de leur code ascii : &#code_ascii;
caractère
HTML
À
À
Ç
Ç
Œ

œ

NB : tous les accents sont compris entre les codes ascii :
o
o
192 à 221 pour les majuscules
222 à 255 pour les minuscules
Edition 2005-2006
8/101
Unités de largeur en HTML
suffixe
px
pt
cm
mm
%
unité
pixels
points
centimètres
millimètres
pourcentage de largeur d’écran
Structure de la page
<HTML> document HTML </HTML> étendue du texte HTML ;
<HEAD> en tête </HEAD> description de la page
• ce n’est pas affiché par le navigateur ;
• <TITLE> titre </TITLE> :
o obligatoire
o légende de l’icone de la fenêtre
o titre de la fenêtre
o signet du navigateur (bookmark)
• META :
o name = « author »/ »keywords »/ »description »/ »copyright »/ »date » content =
« valeur » pour attribuer une valeur au mot clé. NB : l’attribut lang peut être précisé
(utile pour les moteurs de recherche) ;
o http-equiv= »nom » content= »texte » information à mettre dans l’en-tête http.
Exemple :
<META http-equiv= »refresh » content= »3; url=Intro.html »>
charge une page différente au bout de 3 secondes (ce qui peut être utile en cas de
changement d’adresse d’un site, le client est redirigé automatiquement à la nouvelle
adresse) :
o Texte affiché : <BODY> en tête </BODY> ;
o <ADDRESS> adresse </ADDRESS> information concernant l’auteur.
o
o
<!DOCTYPE HTML PUBLIC « -//W3C//DTD HTML 4.01//EN » « http://www.w3.org/TR/html4/strict.dtd »>
<HTML>
<HEAD>
<TITLE>Titre de la page</TITLE>
<META name= »author » content= »Mon nom »>
<META name= »keywords » content= »Mes mots cles »>
<META name= »description » content= »Description de ma page »>
</HEAD>
<BODY>
corps du texte
</BODY>
<ADDRESS> adresse auteur </ADDRESS>
</HTML>
o
NB : tout texte commençant par  est un commentaire non interprêté
par le navigateur.
Edition 2005-2006
9/101
HTML : Styles
Style des caractères (mise en forme de mots)
Élément
Sens
Texte affiché
B
I
U
TT
S
STRIKE
BIG
bold
italic
underscore
teletype
strike
texte gras
texte en italique
texte souligné
texte teletype
texte barré
texte barré
<FONT size = « +1 »>
SMALL
SUB
SUP
<FONT size = « -1 »>
texte gros
petit texte
un indice
un exposant
HTML
texte
texte
texte
texte
texte
texte
texte
<B>gras</B>
en <I>italique</I>
<U>souligné</U>
<TT>teletype</TT>
<S>barré</S>
<STRIKE>barré</STRIKE>
<BIG>gros</BIG>
<SMALL>petit</SMALL> texte
un <SUB>indice</SUB>
un <SUP>exposant</SUP>
Style logique (mise en forme de portions de textes)
Texte affiché
HTML
ABBR
ACRONYM
CITE
CODE
DFN
EM
KBD
Q
SAMP
Élément
pour citer un ouvrage
Un code de programme
définition d’un terme
mise en valeur
texte clavier
pour les citations très courtes
pour les sorties de programmes
<ABBR title= »Monsieur »>M.</ABBR>
<ACRONYM title=”World Wide Web”>WWW</ABBR>
pour <CITE>citer un ouvrage</CITE>
<CODE>Un code de programme</CODE>
définition d’un <DFN>terme</DFN>
mise en <EM>emphasize</EM>
<KBD>texte clavier</KBD>
pour les <Q>citations</Q> très courtes
pour les <SAMP>sorties</SAMP> de programmes
STRONG
VAR
un texte important
représente une variable
un texte <STRONG>important</STRONG>
représente une <VAR>variable</VAR>
M.
WWW
NB : l’interprétation de ces éléments dépend des navigateurs.
Edition 2005-2006
10/101
Style des paragraphes
PRE
Élément
Texte affiché
affiche le texte
tel qu’il est
tape.
BLOCKQUOTE
avant
HTML
<PRE>affiche le texte
tel qu’il est
tape.</PRE>
avant <BLOCKQUOTE> pour une longue citation </BLOCKQUOTE>
après
pour une longue
citation
après
l’attribut cite= »URL » de blockquote permet de donner l’URL de référence.
Style des blocs
Les éléments SPAN et DIV permettent de regrouper des portions de la page, ceci permet d’affecter des
styles (SPAN s’utilise conjointement aux feuilles de style).
Exemple : alignement d’un bloc avec DIV :
<DIV align= »center / right / left / justify »> texte aligné </DIV>
NB :
L’élément <CENTER> texte </CENTER> du 3.2 est obsolète.
l’attribut de style align est déclassé il faudra utiliser les feuilles de style
Edition 2005-2006
11/101
HTML : Divisions
Paragraphe
syntaxe : <P> texte </P>
l’élément </P> est optionnel.
Découpe le texte en paragraphes, c’est l’équivalent d’un retour à la ligne suivi d’une ligne vide.
NB : l’attribut align= »center » / « right » / « left » est déclassé au profit des feuilles de style.
o
o
o
o
Ligne suivante et espacement
attention, les espaces et les sauts de lignes sont ignorés par le navigateur :
o
Texte HTML
voici un exemple de
texte avec
deux sauts de ligne.
résultat
voici un exemple de
texte avec deux sauts
de ligne.
un caractère d’espace insecable existe :   il permet par exemple d’éviter qu’un passage à la ligne intervienne
entre deux mots qu’il ne faut pas dissocier, par exemple : 28 janvier.
Texte HTML
résultat
beaucoup    d’espace
beaucoup
d’espace
<BR> effectue un passage à la ligne (break).
L’attribut clear est déclassé.
En têtes
<Hn> avec n = 1..6 ;
permet de définir des sections dans le document ;
six tailles possibles du plus grand <H1> au plus petit <H6> ;
une ligne est sautée avant et après la section ;
avantage par rapport à une image : chargement immédiat ;
possibilité d’alignement : <Hn align= »center »> ;
attribut de style align : déclassé.
o
o
o
o
o
o
o
HTML
<H1>essai de H1</H1>
avant
<H3>essai de H3</H3>
après
Traits
o
o
<HR> trace un trait dans la fenêtre.
avec les attributs déclassés (utiliser plutôt les feuilles de style), il est possible de définir :
• la longueur du trait (width) ;
• la largeur du trait (size) ;
• sa position (left, right, center avec align) ;
• et un effet de relief (trait non ombré avec noshade).
attributs
exemple
aucun
width
align
size
Edition 2005-2006
HTML
<HR>
<HR width= »40% » align= »left »>
<HR width= »40% » align = »center »>
<HR size= »10 »>
12/101
noshade
<HR size= »10 » noshade >
Marges
o
Pour obtenir une marge gauche :
<BODY>
<BLOCKQUOTE>
tout le texte
</BLOCKQUOTE>
</BODY>
o
Marges avec <BODY> :
o Sous Internet Explorer :
attribut
leftmargin=x
topmargin=y
rôle
largeur de la marge gauche en pixels
largeur de la marge du haut en pixels
Sous Navigator :
attribut
rôle
marginwidth=x
marginheight=y
largeur de la marge gauche en pixels
largeur de la marge du haut en pixels
NB : si vous voulez que la marge existe à la fois sous Navigator et sous IE, mettez les deux attributs dans
la balise body, ex : <BODY marginwidth= »10 » leftmargin= »10 »>
Il faut normalement éviter de telles pratiques au profit des CSS
Edition 2005-2006
13/101
HTML : Couleur
Les couleurs en HTML sont représentées soit par un identificateur, soit par un codage qui a une
signification du point de vue de la synthèse additive.
NB : l’affichage des couleurs dépend du nombre de couleurs du moniteur du client.
Identificateur de couleurs
Nous nommerons cet identificateur « nom_couleur »
nom_couleur = aqua (bleu-vert), black (noir), blue (bleu), fuchsia (fuschia), gray (gris), green (vert),
lime (citron vert), maroon (marron), navy (bleu marine), olive (vert olive), purple (violet), red (rouge),
silver (argent), teal (bleu-vert), white (blanc), yellow (jaune).
Codage des couleurs
trois longueurs d’onde : rouge, vert et bleu ;
deux valeurs pour chaque longueur d’onde en hexadécimal
o 0, 1, 2 , 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
o les couleurs se présentent avec un # devant, ex : #FFFFFF
o 00 = 0% de la couleur
o FF = 100% de la couleur
o synthèse additive :
rouge
vert
bleu
Code
couleur
100% 100% 100% #FFFFFF blanc
0%
0%
0%
#000000
100% 0%
0%
#FF0000 rouge
0%
100% 0%
0%
0%
0%
#00FF00 vert
100% #0000FF bleu
100% 100% 0%
100% 0%
noir
#FFFF00 jaune
100% #FF00FF magenta
100% 100% #00FFFF cyan
Pour ceux qui ont du mal avec les couleurs, voici quelques exemples.
Daltonisme (1794 Dalton)
1 homme sur 12 en Europe ;
altération de l’un des types de cônes de la rétine (le rouge ou le vert).
le spectre se réduit à trois teintes :
o jaune pour les couleurs chaudes (orange, jaune, jaune-vert),
o bleu à la place des couleurs froides (bleu-vert, bleu, violet, pourpre),
o une teinte intermédiaire perçue comme achromatique, blanche ou grise qui remplace deux
teintes complémentaires (comme rouge et bleu-vert)
ils confondent :
o le rouge et le bleu-vert parce qu’ils les voient tous les deux gris ;
o l’orange et le vert parce qu’ils les voient tous les deux jaunes ;
Edition 2005-2006
14/101
HTML : Polices
NB : les éléments FONT, BASEFONT présentés ci-dessous ainsi que les attributs de couleur de l’élément
BODY sont déclassés en HTML4, ils sont présentés car ils sont toujours supportés par les navigateurs. Ils
ont été déclassés au profit des feuilles de style (qui ne sont pas reconnues dans les anciennes versions
des navigateurs).
Définir une police pour une portion du document
Les tailles, couleurs et noms des polices pour une portion du document peuvent être définis pas l’élément
FONT
o
syntaxe : <FONT size= »n » color= »c » face= »police1,police2,police3 »> texte </FONT>
attribut
rôle
size= »n »
size= »+/-n »
color= »couleur »
face= »p1,p2,p3 »
hauteur des caractères (n = 1..7) défaut n = 3
augmentation/diminution de la taille par rapport à la valeur courante
couleur du texte (#RRVVBB ou identificateur)
trois polices qui doivent être chez le client (sinon ignoré)
Taille
Il est possible que certains navigateurs ne reconnaissent pas <FONT> (utiliser <BIG>, <SMALL>).
La taille dépend des options choisies par l’utilisateur.
Texte affiché
Un texte avec size = 5
Un grand
HTML
texte
police monaco, geneva
<FONT SIZE=5>Un texte avec size = 5</FONT>
Un grand <FONT SIZE=+3>texte</FONT>
police
<FONT FACE= »Monaco » >monaco</FONT>,
<FONT FACE= »Geneva »>geneva</FONT>
•
taille1
taille 2 taille 3
taille 4 taille
5 taille
6 taille
7
Couleur de police
Elle se définit dans l’élément FONT avec l’attribut color au moyen d’un
o
identificateur : <FONT color= »nom_couleur »>
code
texte avec un mot en
résultat
rouge
texte avec un mot en <FONT color= »red »>rouge</FONT>
codage : <FONT color= »#RRVVBB »>
code
texte avec un mot en
Edition 2005-2006
résultat
rouge
texte avec un mot en <FONT color= »#FF0000 »>rouge</FONT>
15/101
Définir une police pour tout le document
2 possibilités
Élément BASEFONT
o
o
o
o
syntaxe : <BASEFONT size= »n » color= »c » face= »police1,police2,police3 »>
dans l’en-tête HEAD ... /HEAD
Définit la police standard, sa taille et sa couleur pour tout le reste du document.
Quand un élément <FONT> est placé, il est utilisé jusqu’à </FONT> et ensuite ce sont les
définitions de <BASEFONT> qui sont reprises.
Attributs de couleurs dans BODY
Toute la page web aura la couleur de texte définie par un attribut de l’élément BODY, cependant l’élément
FONT permettra de modifier localement la couleur du texte.
o
Attributs de couleurs de <BODY> :
attribut
bgcolor=couleur
text=couleur
link=couleur
alink=couleur
vlink=couleur
rôle
couleur
couleur
couleur
couleur
couleur
du fond du document
du texte standard
des liens hypertextes non visités
du lien activé par la souris
des liens déjà visités
Il est possible d’afficher une image en fond de document avec
Edition 2005-2006
background= « nom_fichier »
16/101
HTML : Listes
Listes de définitions
Éléments
<DL> Definition List </DL>
<DT> Definition Term </DT> (optionnel)
<DD> Definition Description </DD> (optionnel)
Texte
Definition 1 :
Un texte de description
qui peut prendre plusieurs lignes.
Definition 2 :
le texte.
HTML
<DL>
<DT>Definition 1 :
<DD> Un texte de description
qui peut prendre plusieurs lignes.
<DT>Definition 2 :
<DD> le texte.
</DL>
Attributs
id, class, lang, dir, title, style.
NB : l’attribut compact est déclassé.
Listes non ordonnées
Éléments
<UL> unordered list </UL>
<LH> list header </LH> (optionnel)
<LI> list item </LI> (optionnel)
Texte
Acheter :
des pommes,
des oranges,
des bananes.
HTML
<UL type= »square »>
<LH>Acheter:
<LI>des pommes,
<LI>des oranges,
<LI>des bananes;
</UL>
Attributs
Attributs déclassés au profit des feuilles de style :
type = « square »/ »circle »/ »disc » pour changer la puce
compact
Edition 2005-2006
17/101
Listes ordonnées
Éléments
<OL> ordered list </OL>
<LH> list header </LH> (optionnel)
<LI> list item </LI> (optionnel)
Texte
une URL comporte :
le protocole
l’adresse du serveur
le chemin d’accès au fichier html
HTML
<OL type= »1 »>
<LH>une URL comporte :
<LI>le protocole
<LI>l’adresse du serveur
<LI>le chemin d’accès au fichier html
</OL>
Attributs
Attributs déclassés au profit des feuilles de style
type= »1/A/a/I/i » pour choisir la numérotation
start= »nombre » nombre de départ du premier item de la liste
<OL start= »3 » type= »i »> donne une liste dont le numéro de départ est iii
value= « nombre » pour donner le numéro de cet item
Listes imbriquées
Texte
des fruits
pommes
golden
api
oranges
bananes
des fromages
camembert
emmental
HTML
<UL>
<LI>des fruits
<UL>
<LI>pommes
<UL>
<LI>golden
<LI>api
</UL>
<LI>oranges
<LI>bananes
</UL>
<LI>des fromages
<UL>
<LI>camembert
<LI>emmental
</UL>
</UL>
Listes répertoires (déclassé)
Conçu pour afficher une liste de fichiers avec des noms courts sur plusieurs colonnes, supprimé car c’est
la même structure que les listes non ordonnées, seul l’affichage est différent.
Éléments
<DIR> Directory</EM< LI DIR><>
<LI> list item </LI>
Listes menus (déclassé)
Conçu pour afficher une liste avec des noms courts sur une colonne, supprimé car c’est la même structure
que les listes non ordonnées, seul l’affichage est différent.
Éléments
<MENU> Menu</EM< LI MENU><>
Edition 2005-2006
18/101
<LI> list item </LI>
Edition 2005-2006
19/101
HTML : Tableaux
Attributs de TABLE
Attribut
rôle
border= »x »
bgcolor=couleur
Frame
Rules
Height
width= »80% »
Align
cellpadding= »y »
cellspacing= »y »
Summary
épaisseur du cadre (par défaut 1)
couleur des cellules
cadre du tableau
lignes de séparation dans le tableau
taille en hauteur
taille en pourcentage par rapport à la largeur de la fenêtre
left, right, center
espace situé entre les bordures du tableau et le contenu des cellules
taille de la bordure entre les cellules
résumé du tableau pour les navigateurs non graphiques
NB : l’attribut align est déclassé au profit des feuilles de style.
Attributs cellpadding et cellspacing
aucun attribut
cellpadding= »15 »
cellule 1 cellule 2
cellule 3 cellule 4
cellule 1
cellule 2
cellule 3
cellule 4
cellspacing= »15 »
cellule 1
cellule 2
cellule 3
cellule 4
Valeurs pour l’attribut frame
Uniquement en HTML 4.0, les anciennes versions des navigateurs ne connaissent pas cet attribut.
o
o
o
o
o
o
o
o
void pas de cadre
above côté supérieur
below côté inférieur
hsides côtés horizontaux
lhs côté gauche
rhs côté droit
vsides côtés verticaux
box ou border : les quatre côtés (ne pas confondre avec border= »n » qui indique l’épaisseur du
trait du cadre, ici border signifie un cadre pour les quatre côtés)
Edition 2005-2006
20/101
Exemples :
NB : <TABLE frame= »border » border= »5 »> de HTML 4.0 a pour équivalent : <TABLE border= »5 »>
(dans les exemples ci-dessous nous donnons la syntaxe en HTML 4.0 mais il vaut mieux pour conserver la
compatibilité avec les anciens navigateurs utiliser border pour indiquer qu’il faut dessiner le cadre et
border=n pour donner une épaisseur de n pixels au cadre, i.e. utiliser <TABLE border= »1 »> à la place
des <TABLE frame= »border » border= »1 »>).
Valeurs pour l’attribut rules
Uniquement en HTML 4.0, les anciennes versions des navigateurs ne connaissent pas cet attribut.
o
o
o
o
o
none aucun
cols entre les colonnes
rows entre les lignes
alls de partout
group entre les groupes de lignes
Exemples :
Edition 2005-2006
21/101
Une cellule
Syntaxe : <TD> contenu de la cellule </TD>
Table Data
Attributs de TD
align=”letf / center / right / justify /
char”
valign=”top / bottom / middle /
baseline”
width= »x »
height= »y »
alignement horizontal
alignement vertical,
largeur de la cellule,
hauteur de la cellule,
définit une cellule dont la largeur est x fois celle de la colonne de base (fusion des x
colonnes adjacentes),
définit une cellule dont la hauteur est y fois celle de la ligne (fusion des y lignes
adjacentes),
définit la couleur de fond,
image de fond.
force le navigateur à écrire le texte de la cellule sans saut de ligne
contenu abrégé de la cellule
attribue une catégorie à la cellule (par exemple <TD axis= »lieu »>Marseille</TD>
référence des cellules de l’en-tête qui fournissent une information d’en-tête pour la cellule
courante
colspan= »x »
rowspan= »y »
bgcolor= »couleur »
background= »url »
nowrap
abbr= »texte »
axis= »texte »
headers=ref
Tableau
Voici
un
tablea
u avec
une
seule
cellule
grise.
HTML
<TABLE border=”1”>
<TD bgcolor=”#CCCCCC”>
Voici un tableau avec une seule
cellule grise.
</TD>
</TABLE>
Une ligne de cellules
Tableau
cellule 1 cellule 2
Edition 2005-2006
HTML
<TABLE border= »1 » >
<TD> cellule 1 </TD>
<TD> cellule 2 </TD>
</TABLE>
22/101
Plusieurs lignes
Syntaxe : <TR> ... </TR>
Table Row
Attributs de TR
valign = “top / bottom / baseline / middle”
align = « right / center / left «
bgcolor= »couleur »
alignement vertical
couleur de fond de la cellule
Les attributs sont appliqués pour toutes les cellules de la ligne sauf si un attribut de <TD> donne un autre
ordre.
Tableau
cellule 1.1 cellule 1.2
cellule 2.1 cellule 2.2
HTML
<TABLE frame=”border” cellpadding=”2”>
<TR>
<TD> cellule 1.1 </TD>
</TR>
<TR>
</TR>
</TABLE>
Cellule en-tête
Utiliser <TH> (Table Header) à la place de <TD>, les attributs sont les mêmes que ceux de TD.
Tableau
titre 1
titre 2
contenu 1 contenu 2
HTML
<TR>
<TH align=”center”> titre 1</TH>
<TH align=”center”> titre 2 </TH>
</TR>
<TR>
<TD> contenu 1</TD>
<TD> contenu 2</TD>
</TR>
</TABLE>
Tableaux complexes
Légende
syntaxe : <CAPTION> ma légende </CAPTION>
à placer avant le premier TR ;
attributs : align= »top / bottom / left /right / center » pour la position du titre horizontalement par
rapport au tableau et valign= »top / bottom » pour la position verticale (dessus ou dessous le tableau).
Edition 2005-2006
23/101
Regroupement de cellules en lignes ou colonnes
regroupement de cellules en lignes : attribut rowspan de TD;
regroupement de cellules en colonnes : attribut colspan de TD.
Tableau
HTML
Script
CGI
javascript
Exécution
par le
titre
Edition 2005-2006
serveur
client
<CAPTION align=”bottom”>
titre
</CAPTION>
<TR>
<TH align=”left”>Script</TH>
<TH align=”left” colspan=”2”>
Exécution</TH>
</TR>
<TR>
<TD>CGI</TD>
<TD rowspan= »2 »>par le</TD>
<TD>serveur</TD>
</TR>
<TR>
<TD>javascript</TD>
<TD>client</TD>
</TR>
</TABLE>
24/101
Nouveaux éléments (HTML 4.0) de groupement dans les tableaux
groupement sémantique de lignes
Le groupement peut permettre aux navigateurs de laisser afficher l’en-tête du tableau quand on fait
défiler la page parce que le tableau est trop long, il permet également d’aider les navigateurs non
graphiques à interpréter le tableau. Des styles peuvent être attribués aux différentes parties par
l’intermédiaire des attributs align, valign et style (que nous détaillerons dans le cours sur les feuilles de
style).
THEAD en-tête du tableau
TBODY corps du tableau
TFOOT pied du tableau
Structure :
<TABLE>
<THEAD>
<TR>...</TR>
...
<TR>...</TR>
</THEAD>
<TBODY>
<TR>...</TR>
...
<TR>...</TR>
</TBODY>
<TFOOT>
<TR>...</TR>
...
<TR>...</TR>
</TFOOT>
</TABLE>
Exemple :
<TABLE border= »5 » width= »70% »>
<THEAD align=”right” style=”font-family:monaco; color:blue”>
<TR>
<TD>en tete 1.1</TD>
</TR>
</THEAD>
<TBODY align=”center” style=”font-family:courier”>
<TR>
<TD>corps 1.1</TD>
<TD>corps 1.2</TD>
<TD>corps 1.3</TD>
</TR>
<TR>
<TD>corps 2.1</TD>
<TD>corps 2.2</TD>
<TD>corps 2.3</TD>
</TR>
</TBODY>
<TFOOT align=”left” style=”font-style:italic; color:red”>
<TR>
<TD>pied 1.1</TD>
<TD>pied 1.2</TD>
<TD>pied 1.3</TD>
</TR>
</TFOOT>
Edition 2005-2006
25/101
</TABLE>
Lorsqu’il n’y a pas d’en-tête ni de pied de tableau TBODY est optionnel.
Groupement d’attributs pour des colonnes
Pour regrouper des attributs de style (align, valign, style), de taille (width, height) pour plusieurs colonnes
(le nombre est donné par span).
COLGROUP
syntaxe : <COLGROUP width=”t” valign=”a” align=”a”
<COLGROUP width=”75px” align=left span=”3”>
<COLGROUP width=”50px” align=”right” span=”3”>
<COLGROUP width=”100%” align=”char” char=”.” span=”3”>
span=”n”>
donne 75 pixels de large aux trois premières colonnes et les cadre à gauche, donne 50 pixels de large aux
trois colonnes suivantes et les cadre à droite, et laisse le reste de l’écran à la dernière colonne qui cadre
les caractères sur le point décimal.
COL
Les éléments COLGROUP peuvent contenir des éléments COL.
Exemple :
<TABLE border=”5” bgcolor=”#FFCCCC” width=”50%>
<COLGROUP style=”font-weight:bold” align=”left”>
<COL span=”3”>
<COL span=”2” style=”color:red” align=”center”>
<COL span=”3” style=”color:blue”>
</COLGROUP>
<TR>
<TD>1.1</TD>
<TD>1.2</TD>
...
</TR>
...
</TABLE>
Edition 2005-2006
26/101
HTML : Liens
Protocole d’adressage des documents - URL (rappel)
pour accéder à un site il faut donner son adresse unique sur le réseau Internet ;
adresse d’un document = URL (Uniform Resource Locator) ;
Composition de l’adresse
protocole d’échange entre le client et le serveur :
o http (hyper text transfer protocol) - transfert de données HTML ;
o ftp (file transfer protocol) - transfert de fichiers entre ordinateurs reliés à internet ;
o smtp (simple mail transfer protocol) - échange de couriers électroniques ;
o nntp - forums de news ;
o telnet - connexion à d’autres ordinateurs ;
o mailto - lancer un agent de mail ;
o about - pour distribuer certains types d’informations) ;
o javascript (pour exécuter un script téléchargé par la page).
adresse internet du serveur (adresse TCP/IP unique sur le réseau)
arborescence des répertoires (chemin) qui conduit au document ;
nom du document qui comporte toujours l’extension « .html » ou « .htm » (si on est en http) ;
éventuellement :
o le port (sous TCP/IP le port par défaut attribué à http est 80)
o authentification (username et password) ;
o arguments passés à un programme lors de l’appel de liens exécutables.
Syntaxe
minimale :
protocole://nom_serveur/
courante :
protocole://nom_serveur/repertoire/sous_repertoire/nom_document
complète :
protocole://username;password@nom_serveur:port/repertoire/nom_document?arguments
Élément d’ancrage vers d’autres pages
Syntaxe
<A href= »lien »> texte du lien</A>
visitez le moteur de recherche <A href= »http://www.altavista.com »>altavista</A>
visitez le moteur de recherche altavista
A pour ancre (anchor) ;
href pour Hypertext REFerence ;
le texte du lien apparaît souligné et en couleur.
Un lien possède deux ancres et un sens :
ancre source : le lieu où le A href apparaît, i.e. le texte qui est encadré par le <A...> </A>
ancre destination : le contenu du href, i.e. le lieu où on trouve la ressource web (fichier html, image...)
Couleur des liens (rappel)
attributs déclassés de BODY
link= »couleur »
alink= »couleur »
vlink= »couleur »
Edition 2005-2006
rôle
couleur des liens hypertextes non visités
couleur du lien activé par la souris
couleur des liens déjà visités
27/101
NB : la couleur et le style des liens peuvent être définis par l’intermédiaire des feuilles de styles.
Référence relative
Pour des pages situées sur un même ordinateur :
dans un même répertoire :
<A href= »nom_fichier.html »> texte du lien</A>
dans un sous-répertoire :
<A href= »nom_repertoire/nom_fichier.html »>texte du lien</A>
au niveau supérieur dans la hiérarchie :
<A href= »../nom_fichier.html »>texte du lien</A>
Référence absolue
<A href= »URL »>texte du lien</A>
À utiliser pour des liens vers d’autres sites Internet.
Conseil
Éviter les liens vers d’autres sites sur la première page, vous risqueriez de perdre des lecteurs
Éléments d’ancrage intrapages
Accès direct à certaines parties de la page courante (utile pour se rendre à chaque section)
Syntaxe
le label <A name= »label »>texte label</A> représente l’emplacement du texte où je peux aller
la référence : <A href = »#label »>texte reference</A> est le lien qui me conduira à l’emplacement
Référence à un label d’une autre page
<A href = »nom_fichier.html#label »>texte reference dans une autre page</A>
Prévoir un retour à chaque fois qu’on arrive sur un label pour que la navigation soit plus agréable.
Élément mail
<A href= »mailto:nom@adresse »>contactez-moi par e-mail</A>
<A href= « [email protected]»>contactez-moi par e-mail</A>
contactez-moi par e-mail
Plus judicieux pour les clients qui voudraient envoyer un mail à partir d’un autre logiciel :
<A href =”mailto:nom@adresse”>nom@adresse</A>
Edition 2005-2006
28/101
Nouveaux attributs
title
La norme HTML 4.0 a introduit dans tous les éléments un attribut title qui sert à donner des informations,
les nouveaux navigateurs affichent le contenu de title dans une bulle lorsque la souris passe sur la portion
de texte concernée par l’élément. Ce peut être utile pour préciser le contenu d’un lien, le client n’a pas
besoin de cliquer sur le lien pour afficher la page et voir si ça l’intéresse, l’information que vous lui donnez
lui permet de décider si le contenu l’intéresse.
<A href= »html/InternetLicPro.html » title= »cours sur : HTML ; Dynamisme côté client : JavaScript ;
dynamisme côté serveur : CGI en Perl, PHP, Mysql ; internet mobile (Wap) ; XML »> Cours Internet
Licence Professionnelle</A>
pour l’accès par le clavier : accesskey, tabindex
accesskey=’car’ permet d’accéder au lien en tapant sur le caractère car.
tabindex=’num’ permet d’accéder au lien par une tabulation.
Éléments utiles
<BASE href= »url »> (dans <HEAD> </HEAD>)
Les url relatives sont complétées automatiquement selon une url de base qui peut provenir de
nombreuses sources (ex : celle de la page courante qui contient le lien) BASE permet de définir
explicitement l’adresse de base pour toute la page web. Si ce document est déplacé, les liens vers les
autres documents qui n’ont pas été eux-même été déplacés continuent à fonctionner
<META http-equiv= »refresh » content= »30; url=adresse_site »>
au bout de 30 secondes charge le document situé à l’URL (changement d’adresse de site).
Edition 2005-2006
29/101
Images
Création
Logiciels
sharewares ;
Adobe photoshop .
Types d’images rencontrés sur le web
logo ;
photographies (CV, vente de matériel) ;
boutons ;
fond de page.
Où trouver des images
sur le web (attention aux copyrights) ;
http://www.ender-design.com/rg/index.html (boutons, icones, lignes, fonds d’écrans)
en numérisant ;
avec un appareil photo numérique ;
en les créant (originalité).
Taille des images
Taille des écrans standard 640x480 et 800x600
•
> maximum 300x300 pour les photographies
-> maximum 100 pour les boutons
Système de coordonnées :
0,0
92px
Edition 2005-2006
208px
208,92
30/101
Formats utilisés sur le web
GIF :
o
o
o
o
o
o
Graphic Interchange Format (attention format propriétaire) ;
limité à 256 couleurs (ne pas utiliser pour des photographies très nuancées) ;
une couleur de transparence ;
compression sans destruction ;
affichage progressif (GIF entrelacé) uniquement pour les gros fichiers ;
images animées.
o
o
o
o
o
Joint Photographic Experts Group ;
millions de couleur (codé sur 24 bits) ;
pas de transparence ;
compression avec destruction ;
affichage progressif (JPEG progressif).
o
o
o
o
o
o
Portable Network Graphic ;
millions de couleur ;
256 niveaux de transparence ;
compression sans destruction ;
n’est pas reconnu par tous les navigateurs ;
format non propriétaire.
JPEG :
PNG :
Ne pas oublier que
charger une image peut être long ;
les moteurs de recherche n’arrivent pas à indexer une page sans texte ;
les personnes peuvent désactiver l’affichage des images ;
les écrans ne sont pas tous en millions de couleurs.
Comment réduire le poids d’une image
vérifier que le nombre de points par pouces est à 72 (DPI) ;
diviser la taille par 2 (réduit le poids par 4) le faire en millions de couleur pour éviter la pixelisation ;
réduire le nombre de couleurs (image 8 bits = nombre octets image 24 bits / 3) ;
proposer une imagette (l’image ne s’affichera que si le client clique sur le lien) ;
Edition 2005-2006
31/101
Élément d’intégration d’image
Syntaxe minimale
<IMG src= »fichier_image »>
En Normandie on croise beaucoup de <IMG
src= »vache.GIF» >
En normandie on croise beaucoup de
fichier_image peut contenir :
un nom d’image dans le répertoire de la page <IMG src= »vache.GIF »>
un nom d’image dans un sous-répertoire <IMG src= »PhotosVacances/vache.GIF »>
un nom d’image dans le répertoire au dessus <IMG src= »../vache.GIF>
une adresse URL qui mène à l’image <IMG src= »http://www.normandie.fr/vache.GIF »>.
Attributs
attributs de IMG
Rôle
alt= »texte »
texte alternatif obligatoire en 4.0
align= »alignement »
alignement vertical ou horizontal
width= »x »
largeur de l’image
height= »y »
hauteur de l’image
lowsrc= »url_image »
image réduite affichée pendant le chargement
hspace= »x »
espace horizontal
vspace= »y »
espace vertical
border= »epaisseur »
épaisseur du cadre (0 pour le supprimer)
longdesc= »url »
lien vers une description de l’image plus détaillée
que celle de alt
Lorsque width et height sont spécifiés :
un rectangle de cette taille est réservé avant le téléchargement de l’image, utile car :
o conserve la mise en page si le client a désactivé l’affichage des images ;
o le navigateur affiche tout le texte puis les images (l’utilisateur voit le texte plus rapidement)
;
le navigateur réduit ou augmente la taille si width et height ne correspondent pas au fichier .
Les valeurs de align (déclassé en faveur des feuilles de style) :
alignement vertical
o top : alignement du haut de l’image avec le haut de la lettre la plus grande de la même
ligne ;
o bottom : alignement du bas de l’image avec la base du texte ;
o middle : alignement du milieu de l’image avec le milieu du texte ;
o left : afficher l’image à gauche du texte qui se répandra autour
o right : afficher l’image à droite du texte qui se répandra autour
Edition 2005-2006
32/101
et encore des
À la montagne on croise des
mais jamais de
NB : il est possible d’aligner les images avec la balise <DIV>
Espacement
aucun caractère de rupture entre le texte et l’image (<BR>, <P>) et utiliser align= »right » ou « left ».
Voici un
exemple de
texte pour
illustrer les
images
flottantes. Il
faut surtout penser à ne
pas utiliser les balises de
division en paragraphe
(<P>) et celles de
passage à la ligne (<BR>)
espace blanc entre une image et le reste de la page :
<BR clear= »right »/’ »left »/ »all »>
o right pour laisser blanc l’espace entre l’image située à droite et le bord gauche de la page
(déclassé);
o left pour laisser blanc l’espace entre l’image située à gauche et le bord droit de la page
(déclassé);
o all pour laisser l’espace vide entre une image à gauche et une image à droite (déclassé).
<IMG hspace=x vspace=y> pour ajouter de l’espace horizontalement ou verticalement (déclassé).
Image de fond d’écran
<BODY background= »nom_image »>
Toujours donner une couleur <BODY bgcolor=couleur> :
le texte affiché sera visible (imaginons un texte blanc sur une image noire pas encore chargée) ;
si les images sont désactivées par le client il faut qu’il ait une page lisible.
NB : background et bgcolor sont déclassés au profit des feuilles de style.
Edition 2005-2006
33/101
Images cliquables
Accès à une autre page ou intrapage et accès à un mail en cliquant sur l’image (un bouton par exemple)
Accès à la même image en haute résolution
Une solution simple l’élément <A>
Une image située entre <A HREF= »fichier.html »> et </A> est un lien (encadré en couleur) sur le fichier.
Il est possible de diviser manuellement une image en plusieurs images et de les insérer dans une page.
Autre solution : les images réactives
une image est découpée en zones pointant vers différents documents ;
il faut relever les coordonnées de chaque zone de l’image ;
penser que certaines personnes désactivent les images (toujours proposer des liens textuels en plus)
Côté client
Définition de l’image réactive :
•
•
•
<BODY>
<MAP name= »nom_carte »>
<AREA shape=”rect / circle / poly / default” coords=coordonnees href=”lien_1”>
...
•
<AREA shape=”rect”/”circle”/”poly” coords=coordonnees href=”lien_x”>
</MAP>
o coordonnées :
rect : coords=x1, y1, x2, y2 (coin supérieur gauche et inférieur droit de la zone
circle : coords=centre (x et y), rayon (en pixels)
poly : coords=x1, y1, x2, y2, ..., xn, yn (maximum 100 sommets)
default : la région entière ;
o href peut être remplacé par nohref pour signifier qu’il n’y a pas d’action vers un lien quand
on clique dans la zone
o title peut être utilisé pour donner des indications sur les liens
Appel de l’image dans la page : <IMG src= »nom_image » usemap= »#nom_carte »>
<HTML>
<HEAD>
<TITLE>elfe cliquable</TITLE>
</HEAD>
<BODY bgcolor=”#FFFFFF>”
<MAP name=”carte1”>
<AREA shape=”rect” coords=0,0,105,113 href=”page1.html”>
<AREA shape=”rect” coords=105,0,212,113
href=”page2.html”>
</MAP>
Un elfe cliquable
<IMG src= »ELFWJACK.GIF » usemap= »#carte1 »>
Un elfe cliquable
</BODY>
</HTML>
NB : les images réactives seront à terme définies au moyen des nouveaux attributs de l’élément A : shape
et coords et de l’élément OBJECT plus général que IMG (à la place de MAP, AREA et IMG).
Côté serveur
ancienne méthode à éviter ;
script qui reçoit les coordonnées du pointeur de la souris ;
code dans la page pour envoyer les coordonées au serveur :
<A href= »http://www.bidule.com/nomscript.extension »> <IMG src= »image.gif » ismap
alt= »cliquez-moi »></A>
Edition 2005-2006
34/101
Listes avec des images à la place des puces
<UL>
<IMG src=”fleche.gif” align=”middle”>item1<BR>
</UL>
item 1
item 2
item 3
Données multimédia
Les images animées ou non, les sons, les vidéos, les applets sont des données multimédia. Ces données
peuvent être visualisées après téléchargement en mémoire ou être affichées au fur et à mesure avec le
streaming.Certaines données ne peuvent pas être affichées directement par le navigateur, qui a besoin
d’un plug-in qu’il ne possède pas (il faut alors télécharger le module externe sur le web), les données
multimédia sont insérées dans les pages au moyen d’élements HTML.
Images
Formats :
o GIF (transparent, animé, entrelacé) ;
o JPEG (progressif) ;
o PNG (libre de droit).
Modules externes : non.
Éléments : IMG, OBJECT, EMBED(déclassé).
Sons
Formats courants
Formats :
o AU (Sun)
o MIDI (instruments de musique)
o WAV (Microsoft)
o AIFF (Macintosh, Silicon Graphics)
Modules externes :
o LiveAudio (au, midi, wav, aiff) avec Netscape Navigator > 3 ;
o QuickTime Player (midi, wav) ;
o Crescendo (midi) pour Windows, Mac ;
o Real Audio Player (existe aussi en programme autonome qui accède au Web sans
navigateur), .rmp, streaming ;
o Media Player de Netscape (.lam) streaming ;
o StreamWorks Player (.xdm) streaming.
Éléments : OBJECT, EMBED(déclassé).
Format non propriétaire MP3
Caractéristiques
o Sur un CD une minute d’enregistrement = 10 Mégaoctets
--> Une chanson (4 minutes) = 40 M, impossible à télécharger tel quel.
o compression MP3 (MPEG-1 audio layer 3 , 1991).
--> 2 minutes de chanson tiennent sur une disquette de 1,4 Mégas.
o avantages :
MP3 non propriétaire, tout le monde peut utiliser ce format.
Compression sans perte significative de qualité. La copie est aussi bonne que
l’original (copie de son digital). vous pouvez écouter aussi sous un walkman MP3 à
mémoire Flash.
o inconvénients : uniquement pour le chiffre d’affaire des maisons de disques. On peut
acheter un nouveau CD, le mettre sur son ordinateur, télécharger un programme
d’encodage ou un lecteur MP3, convertir les chansons du CD en fichiers MP3 et mettre ces
fichiers sur Internet ou les envoyer a des amis.
Modules externes :
o Sous windows :
Media player utility,
Edition 2005-2006
35/101
Winamp (shareware)
o Sous Macintosh : Macamp (freeware)
Vidéo
Formats courants :
o AVI (Windows) ;
o MOV (Macintosh) standard ;
o MPEG = Motion Picture Experts Group.
Modules externes :
o VDOLive (avi) streaming (migration des clients vers NetShow) ;
o VDOPhone vidéo-conférence ;
o CoolFusion (avi) ;
o QuickTime (mov, quicktimeVR) mac, windows, streaming pour : fast-start (fichiers dont
l’ordre des informations est changé)
o InterVU (mpeg) mac, windows ;
o RealPlayer (son et vidéo) streaming) ;
o NetShow (format ASF) streaming;
o Vivo (collaboration avec Microsoft, reconnaît ASF) streaming ;
o VXtreme (racheté par Microsoft) streaming ;
o XinMPEG streaming ;
Applets multimédias
Astound Web Player
affiche les documents multimédia créés par Studio M
mBED
affiche des applets multimédias pour créer des animations de composants de pages créées avec mBED
interactor.
Shockwave de Macromédia Director
Diffusion de films réalisés avec Macromédia Director.
Il prend des :
animations ;
images bitmaps ;
vidéos ;
sons
et les réunit dans une interface interactive (boutons, zones graphiques sensibles). Tous les éléments sont
associés par le langage Lingo (langage de scripts).
Pour être inséré dans un document HTML, le film director est compressé et son format de fichier modifié
par Afterburner (type mime application/x-director).
Netscape : module Shockwave (à partir de 2.0)
Internet Explorer : contrôle ActiveX Shockwave.
Java
•
•
moins lourd qu’un fichier Shockwave -> chargement plus rapide
+ pas de chargement d’un module externe
+ de nombreuses applets java libres de droits sur le web
il faut programmer ! Pas de chargement de module externe (intégré dans le navigateur).
Intégration avec l’élément APPLET (Déclassé) ou OBJECT. Pour en savoir plus sur l’intégration consultez la
page sur les applets.
Edition 2005-2006
36/101
WebShow
Télécharge et affiche des présentations créées avec WorkdPower :
tableaux ;
organigrammes ;
listes à puces ;
graphiques ;
textes.
Compression des fichiers (enregistrés au format diapositive).
Visualisation dans la page de la diapositive en icone ou plein écran.
Téléchargement versus streaming
Les vidéos et les sons peuvent être téléchargés sur le disque et visionnés avec un plug-in.
• inutile de se reconnecter pour visionner une nouvelle fois.
• temps de chargement longs (surtout pour les vidéos) : on peut attendre plus de 5 minutes pour
voir une vidéo d’une minute
• Le streaming permet de visualiser ou écouter dès les premières secondes du chargement (une fois
que les premières images ou séquences sont chargées). Les << players >> décompressent et
gèrent l’arrivée des données pour que l’image soit fluide.
• téléconférence.
+ le client voit un résultat tout de suite.
- fluidité pas toujours assurée : un modem 14400 bits/s n’arrivera à afficher qu’une a deux
images par secondes.
Les logiciels :
o
o
o
o
RealNetworks (Network Progressive)
VdoLive
StreamWorks (Xing Technology Corporation)
Netshow (Microsoft)
Question fondamentale : qui paye pour le streaming ?
o
o
côté client : les << players >> sont gratuits ;
côté concepteur :
le serveur qui permet de diffuser le signal audio et vidéo est payant (en général >
1000$) ;
le logiciel pour encoder la vidéo est payant.
Éléments HTML pour intégrer du multimédia
Les données multimédia sont soit affichées par le navigateur sans recours à un module externe (images,
applets java) soit affichées en utilisant un module externe (vidéos, applets shockwave).
Les modules externes sont installés dans le navigateur (Plug-in), celui-ci :
regarde le type MIME du fichier ;
recherche le module externe qui ouvre ce fichier ;
charge le module externe en lui transmettant le fichier.
Deux approches pour intégrer du multimédia dans la page :
élément EMBED
élément OBJECT
EMBED
EMBED est un élément reconnu par les navigateurs mais qui n’a pas été retenu dans la norme HTML4.0
qui préconise l’utilisation de OBJECT. Il ne faut plus l’utiliser
Edition 2005-2006
37/101
attribut
valeur
effet
Align
left/right/top...
alignement par rapport au texte
Border
frameborder
taille
no
largeur de la bordure (uniquement Navigator)
aucune bordure (uniquement Navigator)
Height
taille
hauteur
Width
taille
largeur
Units
PIXELS
Hidden
unité de mesure
module externe caché
Src
URL
fichier multimédia
Type
type MIME
type MIME du fichier Multimédia
pluginspage
URL
page Web du module externe
Le navigateur examine ces attributs et transmet au module externe les attributs trouvés (il transmet aussi
les attributs spécifiques au module).
Exemples d’inclusion d’une vidéo
<html>
<head>
<title>VIDEO</title>
</head>
<body bgcolor=”#FFFFFF”>
Test avec une video :
<EMBED src=”video/test.mov” type=”video/quicktime” width=”150” Align=”center” border=”20” >
</body>
</html>
<html>
<head>
<title>VIDEO CACHE</title>
<script>
function voir() {
window.document.open();
window.document.bgColor=”#FFFFCC” ;
window.document.write(« Ci joint ! <BR> ») ;
window.document.write(“<EMBED src=’video/test.mov’ “);
window.document.write( “ type=’video/quicktime’ “ );
window.document.write( “ width=’200’> ” );
window.document.close();
}
</script>
</head>
<body bgcolor=”#FFFFFF”>
Video cachee.
<EMBED src=”video/test.mov” type=”video/quicktime” HIDDEN >
<a href=javascript :void(0) onClick= »voir() » > Voulez-vous la voir ?</a>
</body>
</html>
Exemples d’inclusion d’un son
<html>
<head>
<title>SON</title>
</head>
<body bgcolor=”#FFFFCC”>
Test avec du son :
<EMBED src=”audio/test.au” type=”audio/x-wav” AUTOSTART=’true’ LOOP=”true” >
</body>
</html>
Edition 2005-2006
38/101
OBJECT
OBJECT a été retenu dans la norme HTML 4.0.
Syntaxe
<OBJECT attributs>
<PARAM name= »nom » value= »valeur »>
...
</OBJECT>
attribut
valeur
effet
align
bottom / middle / top / left / right
alignement horizontal ou vertical
hspace
nombre
espacement horizontal
vspace
nombre
espacement vertical
border
Taille
largeur de la bordure
Id
Nom
nom de l’objet multimédia
height
taille
hauteur
width
taille
largeur
data
URL
fichier multimédia
type
type MIME
type MIME du fichier Multimédia
standby
texte
message pendant le chargement
classid
URL
adresse de l’implémentation de l’objet
codetype
type MIME
type MIME de l’objet dont l’adresse est dans classid
usemap
URL
carte d’image réactive
shapes
pour les images réactives
Interprétation de OBJECT par le navigateur
Trois cas se présentent :
le navigateur connaît <OBJECT> et
o il n’a pas besoin de module externe
o ou il a besoin d’un module externe qu’il possède
dans ce cas il analyse les élément OBJECT et PARAM et appelle le module externe (ou interpréte tout seul).
il connaît <OBJECT> mais ne possède pas le module externe nécessaire : il ignore OBJECT et PARAM
mais lit le reste.
il ne connaît pas <OBJECT>, il ignore les élément OBJECT et PARAM et lit tout le reste.
Edition 2005-2006
39/101
Cadres
Affichage de plusieurs documents HTML dans une fenêtre du navigateur.
Un lien d’un cadre peut modifier le contenu d’un autre cadre, utilité :
table des matières ;
bandeau de boutons ;
logo du site permanent en haut de la page.
Création du fichier FRAMESET
<html>
<head>
<title>Page avec cadre</html>
</head>
<FRAMESET frameborder=no frameborder=0 border=0 rows=120,*>
<FRAME src=”en_tete.html” scrolling=no noresize>
<FRAMESET frameborder=no frameborder=0 boder=0 cols=”230,*” >
<FRAME src=”menu.html” scrolling=auto noresize>
<FRAME src=”intro.html” scrolling=auto name=”page” >
</FRAMESET>
</FRAMESET>
</html>
Élément <FRAMESET> </FRAMESET>
pour la définition des cadres de la fenêtre ;
ne pas mettre de <BODY> </BODY>
la largeur ou hauteur est donnée en pixels, % ou * (tout ce qui est disponible) ;
attributs :
o pour diviser en colonnes : cols= »largeur1, largeur2, largeur3,... » ;
o pour diviser en lignes : rows= »hauteur1, hauteur2, hauteur3,... » ;
o frameborder= »1 / 0 » (yes / no pour être compatible avec Netscape) bordures visibles ou
invisibles (NB : toujours pour compatibilité avec Netscape nous avons mis l’attribut
frameborder dans l’élément FRAMESET mais il est normalement contenu dans l’élément
FRAME);
o border= »n » épaisseur des bordures ;
o bordercolor= »couleur » couleur de la bordure.
Voici comment le navigateur analyse le premier FRAMESET du fichier index.html :
<FRAMESET frameborder= »no » frameborder= »0 » border= »0 » rows= »120,* »>
Diviser la fenêtre en 2 cadres superposés (2
A
lignes) :
un cadre A de 120 de hauteur sans bordure
B
un cadre B en dessous qui prend le reste de la
fenêtre
Edition 2005-2006
40/101
Élément <FRAME>
définition d’un cadre (toujours dans un FRAMESET) ;
attributs :
o src= «nom_fichier.html» ;
o name= «label_cadre» ;
o scrolling= «no / yes / auto» interdit ou autorise les ascenseurs ;
o noresize interdit au navigateur de permettre le redimensionnement du cadre ;
o marginwidth= »x » marge à gauche et à droite du document ;
o marginheight= »y » marge en haut et en bas du document.
Voici comment le navigateur analyse le premier FRAME du fichier index.html :
<FRAME src= »en_tete.html » scrolling= »no » noresize>
en_tete.html
mettre dans le cadre A le fichier en_tete.html
ne pas permettre le redimensionnement
B
ne pas mettre d’ascenseur
Imbrications
Un élément FRAMESET contient un élément pour chaque sous-cadre créé, cet élément peut être un
élément FRAME ou un élément FRAMESET (ce qui permet de diviser la page horizontalement et
verticalement).
Voici comment le navigateur analyse le second FRAMESET du fichier index.html :
<FRAMESET frameborder= »no » frameborder= »0 » border= »0 » cols= »230,* »>
Diviser le cadre
B
en 2 colonnes :
en_tete.html
un cadre C de 230 pixels de largeur
C
un cadre D qui utilise la largeur restante du cadre B
D
Pour les 2 dernièrs éléments FRAME du fichier index.html :
<FRAME src= »menu.html » scrolling= »auto » noresize>
<FRAME src= »intro.html » scrolling= »auto » name= »page »>
mettre dans C le fichier menu.html
en_tete.html
mettre dans D le fichier intro.html, le cadre D se
nommera « page »
menu.html
Edition 2005-2006
intro.html
41/101
Élément <NOFRAMES> </NOFRAMES>
Il est ignoré par les navigateurs qui savent afficher les cadres par contre il permet d’afficher du texte pour
les navigateurs qui ne reconnaissent pas l’élément FRAMESET (utile pour proposer un accès vers une
page du site qui accueille les personnes qui ne peuvent pas voir les frames).
Exemple de découpe
en_tete.html
menu.html
Intro.html
pied_page.html
<html>
<head>
<meta name=”author” content=”Page test” >
<title>Page avec cadre II </html>
</head>
<FRAMESET frameborder=yes border=1 rows=50,*,25>
<FRAME src=”en_tete.html” scrolling=no noresize>
<FRAMESET frameborder=no frameborder=0 boder=0 cols=”230,*” >
<FRAME src=”menu.html” scrolling=auto noresize>
<FRAME src=”intro.html” scrolling=auto name=”page” >
</FRAMESET>
<FRAME src=”pied_page.html” name=”piedpage” scrolling=no noresize>
<NOFRAMES>
<BODY>
<a href=”menu.html”>Menu principal </a>
</BODY>
</NOFRAMES>
</FRAMESET>
</html>
Si le navigateur ne connaît pas l’élément FRAMESET, il l’ignore, et il ignore également l’élément
NOFRAMES, cependant il lit son contenu et le code HTML pour le fichier index.html du site IST devient :
<HTML>
<HEAD>
<META Name=”author” CONTENT=”ROME Miguel”>
<TITLE>COURS Internet LICENCE PRO</TITLE>
</HEAD>
<BODY>
accès au <A HREF=”menu.html”>menu</A>
</BODY>
</HTML>
Si le navigateur connaît l’élément FRAMESET, alors il ne lira pas le contenu de l’élément NOFRAMES et
affichera la fenêtre avec les cadres demandés.
Edition 2005-2006
42/101
Afficher dans le cadre souhaité
Continuons avec l’exemple du DU-IST, nous souhaitons afficher dans le cadre de droite les cours proposés
par le menu. Pour ce faire il faut préciser dans le fichier menu.html le cadre destination, le nom de ce
cadre est celui qui a été donné dans le fichier frameset (index.html).
Attribut target de l’élément <A>
<A HREF=”nom.html” TARGET=”label_cadre”/_blank/_self/_top/_parent>
_blank ouvre une nouvelle fenêtre du navigateur et affiche le lien dedans ;
_self charge le lien dans le cadre actif (ici ce serait dans celui du menu) ;
_top charge le lien dans la fenêtre du navigateur (entière) ;
_parent charge le lien sur le cadre parent (en cas d’imbrication).
Les cadres flottants
élément IFRAME Inline FRAME
nouveauté du langage HTML 4
permet d’insérer un cadre autour d’un bloc de texte, il est donc possible d’insérer un document HTML
au milieu d’un autre document.
ne peuvent pas être redimensionnés.
Syntaxe
<IFRAME attributs>
texte affiché par les navigateurs qui ne supportent pas les IFRAME
</IFRAME>
Attributs
longdesc= »url »
lien vers une longue description
name
nom pour en faire une cible
src= »url »
document à charger dans le cadre flottant
frameborder= »1/0 »
présence ou non de cadre
marginwidth= »x% / x »
largeur de la marge dans le cadre en pourcentage ou pixels
marginheight= »y% / y »
hauteur de la marge dans le cadre en pourcentage ou pixels
title
un titre pour informations sur le contenu
scrolling= »no / yes / auto »
présence de la barre de défilement
align=”top / middle / bottom /
left / right”
alignement horizontal ou vertical
height= »y »
hauteur du cadre dans la page web
width= »x »
largeur du cadre dans la page web
Edition 2005-2006
43/101
Formulaires
But : recevoir des données des clients.
Nous allons tout d’abord répertorier les différents éléments graphiques disponibles. Il est possible
d’afficher :
des boîtes de saisie de texte ;
des boîtes de saisie masquant le texte (password) ;
des cases à cocher ;
des boutons radio ;
un sélecteur de fichier ;
des listes de choix ;
des listes menu ;
des champs de saisie.
Élément <FORM> </FORM>
Signale le début et la fin d’un formulaire
Attributs :
method= »post / get » méthode de requête HTTP pour soumettre les données du formulaire ;
action= »url » pour indiquer le script à exécuter quand on clique sur le bouton de soumission ;
name nom du formulaire qui expédie les données vers le script (CGI, PHP), utilisé par le serveur et par
JavaScript ;
target= » _blank / _top / _parent / _self » fenêtre où sera affiché le résultat du script appelé ;
enctype= »encodage » encodage des valeurs envoyées au serveur, par défaut : application/x-wwwform-urlencoded, si on souhaite envoyer un fichier (c.f. INPUT type= »file ») il faut donner comme
encodage multipart/form-data
Edition 2005-2006
44/101
Élément <INPUT>
Boîtes de saisie de texte : type= »text »
<INPUT type=”text” size=”x” maxlength=”m” name=”label” value=”texte”>
Attributs :
size longueur de la zone du texte ;
maxlength nombre de caractères maximal autorisé ;
name identification ;
value pour inscrire un texte dans le champ.
Boîtes de saisie masquées : type= »password »
<INPUT type=”password” size=”x” maxlength=”m” name=”label” value=”texte”>
Attributs identiques à ceux de type= »text »
Cases à cocher : type= »checkbox »
<INPUT type= »checkbox » name= »label » value= »texte »>
Attributs :
name pour nommer les éléments de la case à cocher (quand le formulaire est soumis seules les cases
cochées sont envoyées au serveur) ;
value pour spécifier la valeur à envoyer, par défaut la valeur on est envoyée ;
checked positionne par défaut le bouton en mode validé.
Boutons radio : type=”radio”
<INPUT type=”radio” name=”label_groupe” checked value=”label”>
Attributs :
name pour nommer un groupe de boutons (il faut donner le même nom à tous les boutons radio du
même groupe pour qu’ils soient exclusifs) ;
value pour spécifier la valeur à renvoyer ;
checked pour sélectionner par défaut.
Données cachées : type= »hidden »
<INPUT type= »hidden » name= »label » value= »texte »>
Ajouté au formulaire avant l’envoi des données.
Sélecteur de fichier : type= »file »
Envoi d’un fichier du client vers le serveur.
<INPUT type=”file” name=”label” value=”texte”> accept=”type MIME”
NB : le type d’encodage du formulaire doit ètre : multipart/form-data.
Soumission du formulaire :
type= »submit »
<INPUT type= »submit » value= »texte_du_bouton »>
Edition 2005-2006
45/101
type= »image »
<INPUT type= »image » src= »url image » alt= »texte »>
Effacer le formulaire : type= »reset »
<INPUT type= »reset » value=texte_du_bouton>
Boutons : type= »button »
<INPUT type= »button » name=label value=texte_du_bouton>
Pour JavaScript uniquement.
Attributs :
name pour nommer le bouton à l’intérieur du formulaire ;
value texte inscrit sur le bouton.
Élément <BUTTON> </BUTTON>
<BUTTON type=”submit / reset / button” name=”label” value=”texte” >
texte, code HTML
</BUTTON>
Élément <SELECT> </SELECT>
Listes de choix et menu déroulant :
<SELECT name=”label” size=”n” multiple>
<OPTION selected>choix1</OPTION>
<OPTION>choix2</OPTION>
...
</SELECT>
Attributs de l’élément <SELECT> :
name nom pour la donnée ;
size nombre de lignes affichées pour une liste multiple ;
multiple autorise la sélection simultanée de plusieurs items de la liste ;
Attributs de l’élément <OPTION> :
value définit la valeur passée au script ;
selected pré-sélection d’un item de la liste ou valeur par défaut du menu.
width largeur du menu en pixels ;
NB : la norme HTML 4.0 introduit l’élément OPTGROUP qui permet de regrouper des choix logiquement ce
qui peut être utile lorsque le client doit choisir dans une liste de nombreuses options (menus
hiérarchiques). Les éléments OPTGROUP sont compris dans l’élément SELECT et entourent des éléments
OPTION.
Edition 2005-2006
46/101
Élément <TEXTAREA> </TEXTAREA>
Champs de saisie :
<TEXTAREA name=”label” rows=”n” cols=”m” wrap=”virtual / off / physical”>
texte dans le champ de saisie
</TEXTAREA>
Attributs :
name nom de la donnée ;
rows nombre de lignes ;
cols nombre de caractères pour une ligne ;
wrap passage à la ligne automatique dans le champ de saisie :
o off : pas activé
o virtual : affiche le passage à la ligne mais n’envoie pas les retour à la ligne au serveur
o physical : affiche et transmet les retour à la ligne
Attacher une information à un contrôle
<LABEL for= »id »> ... </LABEL>
L’attribut for associe un label a un contrôle du formulaire (l’id doit donc correspondre à un label d’un
contrôle).
exemple :
<LABEL for= »idnom »>Nom</LABEL> <INPUT type= »text » name= »nom » id= »idnom »>
<LABEL for= »idprenom »>Prenom</LABEL> <INPUT type= »text » name= »prenom »
id= »idprenom »>
Attacher une touche à un contrôle
La norme HTML 4.0 introduit les attributs accesskey et tabindex dans les éléments INPUT, BUTTON,
TEXTAREA et LABEL.
L’attribut accesskey=touche permet de donner le focus à l’élément de formulaire lorsque la touche est
pressée.
L’attribut tabindex=nombre spécifie la position de l’élément dans l’ordre des tabulations.
Désactiver des contrôles
L’attribut disabled permet de désactiver les éléments de formulaire : BUTTON, OPTGROUP, INPUT,
OPTION, SELECT et TEXTAREA. Les contrôles désactivés ne reçoivent pas le focus, ils ne sont pas
sélectionnables, le contenu si c’est un champ texte ne peut pas ètre modifié. Pour activer le contrôle, il
faut passer par un script.
NB : un attribut readonly pour les champs texte (INPUT et TEXTAREA) permet uniquement l’affichage de
texte dans le champ de saisie et n’autorise pas la modification du texte. Ceci permet d’afficher un texte
non modifiable dans une zone textarea par exemple. Le champ reçoit le focus mais il est impossible de
modifier le texte qu’il contient.
Edition 2005-2006
47/101
Feuilles de style CSS
But : contrôler la présentation du document en fonction du média :
o contrôler les marges ;
o contrôler les polices des sections et du texte ;
o gérer les couleurs.
Les CSS sont utilisées pour séparer l’affichage de la structure du document, tous les attributs déclassés de HTML 4.0
peuvent être définis en utilisant les propriétés de style.
Trois types
o
o
o
de méthodes :
locale qui affecte un style à un élément HTML d’une page ;
intégrée qui affecte des règles de style à toute la page ;
externe qui définit des règles de style dans un fichier et peut être appelé dans toute page
HTML.
Cascading Style Sheet = cascade car un ordre est respecté pour interpréter les informations de style :
o externe ;
o intégré ;
o local (prend le dessus sur les autres) ;
Spécifications :
o CSS 1 : décembre 1996
o CSS 2 : mai 1998
o CSS 3 : en développement
pour plus d’informations : http://www.w3.org/Style/CSS/
Propriétés de style et leurs valeurs
En CSS une déclaration de style est toujours de la forme :
propriété : valeur
Lorsqu’il y a plusieurs déclarations, elles sont séparées par des ‘;’
propriété1 : valeur1 ; propriété2 : valeur2; ... ; propriétéN : valeurN
Les commentaires sont autorisés dans les déclarations de style, ex :
EM { color: red } /* attribuer la couleur rouge a l’element EM */
Nous donnons ci-dessous la liste complète des propriétés et des valeurs autorisées pour la norme CSS1
de décembre 1996 révisée en janvier 1999. La norme CSS2 du 12 mai 1998 reconnaît toutes les
propriétés de CSS1 et en ajoute (nous préciserons les propriétés spécifiques à CSS2). CSS2 est construit
sur CSS1 et toutes les feuilles de style valides en CSS1 sont valides pour CSS2.
Légendes :
a|b
a ou b
a || b
a ou b ou les 2
*
0 ou plusieurs fois
+
au moins une fois
?
Optionnel
{m, n}
au moins m fois et au plus n fois
Edition 2005-2006
48/101
Polices
font-family : (nomf | nomfg,)* (nomf | nomfg)
o nomf = nom famille (helvetica)
o nomfg = serif | sans-serif | cursive | fantasy | monospace
BODY { font-family: monaco, helvetica, sans-serif }
font-size: absolute-size | relative-size | length | percentage
o absolute-size : xx-small | x-small | small | medium | large | x-large | xx-large
o relative-size : larger | smaller
o length : entierpt
o percentage : entier%
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 3em } /* 3 fois plus grand que la taille du parent */
font-style: normal | italic | oblique
H2 { font-style: italic }
font-variant: normal | small-caps
H3 { font-variant: small-caps }
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
P { font-weight: normal } /* = 400 /
H1 { font-weight: 700 } / = bold /
STRONG { font-weight: bolder } / plus gras que parents */
font : [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family
P { font: 12pt/14pt sans-serif }
Textes
word-spacing: normal | xem | xcm ; avec x un nombre
P { word-spacing: 2em }
letter-spacing: normal | xem | xcm ; avec x un nombre
P { letter-spacing: 0.5em }
white-space: normal | pre | nowrap
PRE { white-space: pre }
P { white-space: normal }
text-decoration: none | [ underline || overline || line-through || blink ]
A:link, A:visited, A:active { text-decoration: underline }
text-shadow: none | [couleur || taille taille taille? ,]* [couleur || couleur taille taille taille?] | inherit
(CSS2)
H1 { text-shadow: 0.2em 0.2em }
H2 { text-shadow: 3px 3px 5px red }
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | x%
text-transform: capitalize | uppercase | lowercase | none
H1, H2, H3 { text-transform: uppercase }
text-align: left | right | center | justify
H1, H2, H3 { text-align: center }
text-indent: x% | xem | xcm
P{ text-indent: 4em }
line-height: x | x% | xem | xcm
P{ line-height: 1.5; }
Edition 2005-2006
49/101
Couleurs et fonds
color: nom_couleur | hexa_rgb | rgb_entier | rgb_%
o nom_couleur : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple,
red, silver, teal, white, and yellow
H1 { color: yellow }
o hexa_rgb : #RRVVBB (valeurs pour rouge, vert et bleu ; 0..9A..F)
H1 { color: #FFFFCC }
o rgb_entier : rgb(R, V, B) avec des valeurs entre 0 et 255
H1 {color: rgb(255,255,40) }
o rgb_% : color: rgb(R%, V%, B%) avec des valeurs entre 0 et 100
H1 { color: rgb(100%, 100%, 20%) }
background-color: couleur | transparent
H1 { background-color: #FFCCCC}
background-image: url(adresse) | none
BODY { background-image: url(plage.gif) }
background-repeat: repeat | repeat-x | repeat-y | no-repeat
BODY { background-image: url(frise.gif); background-repeat: repeat-y; }
background-attachment: scroll | fixed
BODY { background-image: url(frise.gif); background-repeat: repeat-y;
background-attachment: fixed;}
background-position: [% | taille]{1,2} | [top | center | bottom] || [left | center | right]
BODY { background-image: url(plage.gif); background-repeat: no-repeat;
background-position: top right}
background: background-color || background-image || background-repeat || background-attachment
|| background-position
P { background: url(plage.gif) green 40% repeat fixed }
Blocs
Marges : valeurs possibles x | x% | xem | auto
o margin-right: marge droite ;
P{ margin-right: 100 }
o margin-left: marge gauche ;
P{ margin-left: 2em}
o margin-top: marge en haut ;
P{ margin-top: 3%}
o margin-bottom: marge en bas ;
o margin: [ x | x% | xem | auto ]{1,4}
P { margin: 2em } /* toutes à 2em /
P { margin: 1em 2em } / top et bottom = 1em, right et left = 2em /
P { margin: 1em 2em 3em } / top=1em, right=2em, bottom=3em, left=2em */
Blanc autour du bloc : valeurs possibles x | x% | xem | auto
o padding-top: espace en haut ;
o padding-right: espace à droite ;
o padding-bottom: espace en bas ;
o padding-left: espace à gauche ;
o padding: [ x | x% | xem | auto ]{1,4}
P { background: blue; padding: 1em 2em;}
Bordure : valeurs possibles thin | medium | thick | taille
o Style du cadre, valeurs : none | dotted | dashed | solid | double | groove | ridge | inset |
outset
border-top-style (CSS2)
border-right-style (CSS2)
border-bottom-style (CSS2)
border-left-style (CSS2)
border-style: [couleur]{1,4} (CSS2)
P {border-style: dotted}
border-style (CSS1)
o Couleur du cadre, valeurs : couleur | inherit | transparent (uniquement pour border-color)
border-top-color (CSS2)
Edition 2005-2006
50/101
border-right-color (CSS2)
border-bottom-color (CSS2)
border-left-color (CSS2)
border-color: [couleur]{1,4} (CSS2)
P {border-color: yellow; border-style: solid}
border-color: couleur (CSS1)
o largeur de la bordure, valeurs : thin | medium | thick | taille
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width: [thin | medium | thick | taille]{1,4}
H1 { border-width: thin } /* tous sont thin /
H1 { border-width: thin thick } / top et bottom thin, left et right thick /
H1 { border-width: thin thick medium } / top thin, right et left thick, bottom
medium /
H1 { border-width: thin thick medium thin } / top, right, bottom, left */
o raccourcis :
border-top: border-top-width || border-style || couleur
H1 { border-top: thick solid blue }
border-right: border-right-width || border-style || couleur
border-bottom: border-bottom-width || border-style || couleur
border-left: border-left-width || border-style || couleur
border: border-width || border-style || couleur
P { border: solid red } est équivalent à :
P { border-top: solid red; border-right: solid red;
border-bottom: solid red; border-left: solid red}
Dimensions du bloc (utilisable pour les textes et les images) :
o width : taille | % | auto
.icon { width: 100px }
o height : taille | auto
P { height: 100px }
Format visuel
display:
valeurs en CSS1 : block | inline | list-item | none
valeurs en CSS2 : inline | block | list-item | run-in | compact | marker | table | inline-table
| table-row-group | table-header-group | table-footer-group | table-row | table-columngroup | table-column | table-cell | table-caption | none | inherit
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }
o
o
position: static | relative | absolute | fixed | inherit (CSS2)
float: left | right | none
.icon {width:100px; float:right}
clear : none | left | right | both
H1, H2 {clear: both}
Listes
list-style-type:
o valeurs pour CSS1 : disc | circle | square | decimal | lower-roman | upper-roman | loweralpha | upper-alpha | none
OL { list-style-type: lower-roman } /* i ii iii iv v etc. */
o valeurs pour CSS2 : disc | circle | square | decimal | decimal-leading-zero | lower-roman |
upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew
| armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakanairoha | none | inherit
list-style-image: url | none
UL { list-style-image: url(boule.gif) }
Edition 2005-2006
51/101
list-style-position: inside | outside
list-style: [list-style-type] || [ list-style-position] || [url| none]
Edition 2005-2006
52/101
Tableaux (CSS2)
caption-side: top | bottom | left | right | inherit CAPTION { caption-side: bottom; width: auto; textalign: left }
table-layout: auto | fixed | inherit
bords :
o border-collapse: collapse | separate | inherit
o border-spacing: taille taille? | inherit
o empty-cells: show | hide | inherit
o border-style: (c.f. valeurs des bordures pour les blocs)
COL { border-style: none solid }
TABLE { border-style: hidden }
textes : utiliser les propriétés des textes TH { text-align: center; font-weight: bold }
TH { vertical-align: baseline }
TD { vertical-align: middle }
Curseurs (CSS2)
cursor: [ [url ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize |
se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit
P { cursor : url(« mything.cur »), url(« second.csr »), text; }
H1 { cursor : wait }
Style local ou
en ligne
: attribut style
L’attribut style permet de changer le style :
d’un élément unique (<P>, <A>, <HR>, <Hn>...) ;
d’une partie de la page :
o <SPAN style= »... »> ... </SPAN> modifie le style de tout le bloc compris entre les
éléments SPAN et /SPAN ;
o <DIV style= »... »> ... </DIV> modifie le style de tout le bloc compris entre les éléments
DIV et /DIV après avoir effectué un saut de ligne.
Edition 2005-2006
53/101
Règles et classes pour les styles intégré et externe
Règles
Une règle est composée de deux parties un sélecteur et une déclaration.
Règle simple
syntaxe : élément {propriété: valeur}
H1 { color: blue }
utilisation dans le fichier html : appeler l’élément habituel, le style s’applique tout seul.
<H1>Un titre de niveau 1 en bleu</H1>
Règle à plusieurs propriétés
syntaxe : élément {propriété: valeur; propriété2: valeur2; propriété3: valeur3}
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
NB : il est possible de regrouper les propriétés pour abréger :
H1 { font: bold 12pt/14pt helvetica }
utilisation dans le fichier html : appeler l’élément habituel, le style s’applique tout seul.
Règles pour plusieurs éléments
élément1, élément2, élément3 {propriété: valeur}
H1, H2, H3 { font-family: helvetica }
utilisation dans le fichier html : appeler les éléments, les styles s’appliquent automatiquement.
Relations d’héritage
Un élément intégré dans un autre hérite du style de l’élément parent :
déclaration de style : H1 { color:blue}
code HTML : <H1>Un titre <EM>important</EM></H1>
résultat : tout le titre est écrit en bleu
Un titre important
Sauf si on a défini explicitement une autre valeur pour la propriété pour cet élément :
déclaration de style :
H1 { color:blue}
EM{ color:red}
code HTML : <H1>Un titre <EM>important</EM></H1>
résultat : tout le titre est écrit en bleu sauf la partie EM en rouge
Un titre important
Edition 2005-2006
54/101
Il est possible de définir le comportement d’un élément lorsqu’il est imbriqué dans un autre :
élément_parent élément_enfant {propriété: valeur}
utilisation normale.
Par exemple on peut définir un style pour <LI> quand il est fils de <UL> et un autre
quand il est fils de <OL>.
Exemple, une liste qui affiche des caractères plus petits lorsqu’on est dans une sous-liste :
UL LI { font-size: small }
UL UL LI { font-size: x-small }
Regroupements :
H1 B, H2 B, H1 EM, H2 EM { color: red }
Classes
Syntaxe : (élément).label {propriété: valeur}
.rouge {color:red}
Utilisation : <élément class= »label »>...</élément>
<P class= »rouge »>paragraphe rouge</P>
S’applique à tous les éléments sauf BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE.
Pseudo-classes
Les styles sont attachés à un élément, les pseudo-classes peuvent être utilisés comme sélecteurs CSS
mais n’existent pas dans le source HTML (les ancres sont des pseudo-classes)
A:link { color: red } /* unvisited link /
A:visited { color: blue } / visited links /
A:active { color: lime } / active links */
A:link IMG { border: solid yellow } /*met le lien autour de l’image en jaune. */
Style intégré ou
global
: élément STYLE avant le BODY
Syntaxe :
<STYLE> </STYLE>
placer juste avant <BODY>
Edition 2005-2006
55/101
Style externe ou
lié
: élément STYLE dans un fichier séparé
Fichier externe de style (.css)
Fichier html qui intègre ce style
Média cible (CSS2)
L’attribut media de l’élément LINK permet de définir le média pour la feuille de style. Il peut prendre en
CSS2 les valeurs : all | aural | braille | embossed | handheld | print | projection | screen | tty | tv .
exemple :
<LINK rel=”stylesheet” type=”text/css” media=”print, handheld” href=”mon_style.css”>
Edition 2005-2006
56/101
Positionnement dans la page avec les CSS
But : Gestion du contenu sans s’adresser au serveur grâce aux :
blocs :
o lié aux feuilles de style ;
o définit un sous-ensemble de la page
o il a des propriétés (marges, couleurs, visibilité...)
couches : pour ordonner l’empilement des blocs (trois plans) (sous Netscape).
Il faut :
un nom de couche ;
une position :
o relative situera la couche à la suite du document
o absolute placera la couche aux coordonnées du coin en haut à gauche ;
Mode CSS
Caractéristiques :
<STYLE TYPE= »text/css »>
#couche1 {position: absolute; left:20; top: 20}
#couche2 {position:absolute; left:100; top:60}
#couche3 {position:relative}
</STYLE>
Construction :
<BODY>
<SPAN ID=couche1>...</SPAN>
<SPAN ID=couche2>...</SPAN>
...
Edition 2005-2006
57/101
Éléments HTML 4.01 ( Référence rapide )
Balise
nom
déb.
fin
A
X
X
{Ø}
déc
anchor ancre pour un lien hypertexte
Description
ABBR
X
X
abbreviated le texte est abrégé (M. abréviation de Monsieur)
ACRONYM
X
X
le texte est un acronyme (WWW acronyme de World Wide Web)
ADDRESS
X
X
APPLET
X
X
informations sur l’auteur de la page web
X
X
pour intégrer une applet Java
AREA
X
0
B
X
X
image réactive côté client (incluse dans MAP)
BASE
X
0
X
BASEFONT
X
0
X
BDO
X
X
bi-directional override le texte se lit dans le sens opposé de celui actuel (ex : une portion de t
arabe dans un document en français)
BIG
X
X
texte plus grand (size += 1)
BLOCKQUOTE
X
X
citation longue (saut de ligne, citation décalée vers la droite, saut de ligne)
BODY
-
-
BR
X
0
bold style gras
URL de base pour les URL relatives du document (dans HEAD)
X
définition de la taille, couleur, police pour tout le document (dans HEAD) ou pour le texte jusq
du document (dans BODY)
corps du document
X
break passage à la ligne sans saut de ligne
BUTTON
X
X
bouton de formulaire pouvant contenir des images
CAPTION
X
X
légende du tableau (suit immédiatement TABLE)
CENTER
X
X
CITE
X
X
citation : référence à un livre...
CODE
X
X
portion de code d’un programme
X
X
pour centrer (remplacer par DIV align= »center »)
COL
X
0
COLGROUP
X
-
column propriétés d’une ou plusieurs colonnes d’un tableau (dans COLGROUP)
column group groupement de colonnes d’un tableau
DD
X
-
definition description partie définition pour les listes DL
deleted texte effacé (masqué ou affiché en style rayé : mises à jour de documents)
DEL
X
X
DFN
X
X
DIR
X
X
DIV
X
X
division un bloc dans un document qui aura des attributs spécifiques
DL
X
X
definition list listes de définition
DT
X
-
description term partie description pour les listes DL
EM
X
X
emphasis mise en valeur
FIELDSET
X
X
FONT
X
X
FORM
X
X
définition d’instance
X
directory liste répertoire
regroupe des étiquettes et des contrôles dans un formulaire
X
modification locale de la police (taille, type de police, couleur)
formulaire
FRAME
X
0
FRAMESET
X
X
pour indiquer la subdivision en sous-cadres
H1 à H6
X
X
heading pour donner des titres à des parties du document
HEAD
-
-
HR
X
0
HTML
-
-
pour dire que c’est un document html
I
X
X
italic style italique
IFRAME
X
X
IMG
X
0
INPUT
X
Edition 2005-2006
0
X
pour indiquer les propriétés d’un cadre dans la fenêtre du navigateur (dans FRAMESET)
en-tête du document (contient des informations)
X
horizontal rule trait horizontal
cadre flottant dans un document avec des attributs de positionnement comme IMG
X
image pour inclure des images
X
pour définir des contrôle de formulaire <INPUT type= »controle »> avec controle = text (boîte
saisie de texte), password (boîte de saisie de mot de passe), button (bouton), checkbox (boît
cocher), file (fichier à télécharger), hidden (champ caché), image (un bouton de soumission a
image), radio (boutons radio), reset (bouton annuler), submit (bouton de soumission)
58/101
INS
X
X
ISINDEX
X
0
KBD
X
X
LABEL
X
X
pour associer des informations à un élément de contrôle de formulaire
LEGEND
X
X
pour attribuer un titre à des champs FIELDSET d’un formulaire
LI
X
-
list itemitem pour une liste UL, OL, MENU, DIR
LINK
X
0
MAP
X
X
MENU
X
X
META
X
0
NOFRAMES
X
X
inserted texte inséré (peut être affiché en couleur différente : mises à jour de documents)
X
X
permet d’entrer des mots clés pour effectuer une recherche (remplacé par les formulaires ave
type= »text »)
keyboard texte tapé au clavier
X
pour définir une relation entre le document courant et un autre document (dans HEAD)
carte réactive côté client
X
X
liste qui offre des choix courts vers d’autres documents
informations sur le document (dans HEAD)
contient le contenu du document pour les navigateurs qui ne savent pas afficher les cadres
NOSCRIPT
X
X
contenu pour les navigateurs qui ne savent pas exécuter les scripts
OBJECT
X
X
pour placer un objet (image, son, applet...) dans la page
OL
X
X
ordered list listes ordonnées
OPTGROUP
X
X
pour définir un groupe logique dans OPTION pour les contrôles SELECT d’un formulaire (menu
cascade)
OPTION
X
-
choix dans une contrôle SELECT de formulaire
P
X
-
paragraph un paragraphe
PARAM
X
0
PRE
X
X
X
paramètre dans APPLET ou OBJECT
preformatted text le texte est affiché comme il est entré en respectant les espaces et sauts de
Q
X
X
S
X
X
citation très courte
SAMP
X
X
sample échantillon de sortie d’un programme
SCRIPT
X
X
pour inclure un script
SELECT
X
X
contrôle de formulaire pour créer un menu à choix multiples
SMALL
X
X
texte plus petit (size = « -1 »)
X
strike texte barré
SPAN
X
X
STRIKE
X
X
bloc dans le document qui n’affecte pas lui-même le style mais peut être utilisé avec les CSS
STRONG
X
X
STYLE
X
X
pour donner des informations de style pour le document
SUB
X
X
subscript
SUP
X
X
superscript
X
texte barré
pour mettre en valeur un texte très important
indice
exposant
TABLE
X
X
tableau
TBODY
-
-
table body corps du tableau (dans TABLE)
TD
X
-
table data cellule d’un tableau (dans TABLE)
TEXTAREA
X
X
Champ de formulaire permettant de saisir un texte sur plusieurs lignes
TFOOT
X
-
table foot pied de tableau (pour donner des informations sur les colonnes du tableau)
TH
X
-
table header cellule en-tête
THEAD
X
-
table header en-tête du tableau (informations sur le tableau)
TITLE
X
X
titre du document
TR
X
-
table row une ligne de cellules (dans TABLE)
TT
X
X
U
X
X
UL
X
X
unordered list liste non ordonnée
VAR
X
X
variable pour un programme
teletype style teletype
X
underline texte souligné
Légende
Balise
X
0
oui
non (interdit)
Edition 2005-2006
59/101
-
optionnel
Attributs HTML 4.01
Références rapides
nom
éléments
valeur
abbr
TD, TH
texte
contenu abrégé de la cellule
accept-charset
FORM
liste de
caractères
encodés
liste des encodages supportés
accept
FORM, INPUT
type MIME
liste des types MIME supportés pour le chargement de fichiers
accesskey
A, AREA, BUTTON,
INPUT, LABEL,
LEGEND,
TEXTAREA
un caracère
caractère clavier d’accès
action
FORM
url
O
action à effectuer (lien vers un script, mailto...)
align
CAPTION
top | bottom |
left | right
D
relatif au tableau
align
APPLET, IFRAME,
IMG, INPUT,
OBJECT
top | middle |
bottom | left |
right
D
alignement vertical ou horizontal
align
LEGEND
top | bottom |
left | right
D
relatif au regroupement de champs du formulaire
align
TABLE
left | center |
right
D
position du tableau relatif à la fenêtre
align
HR
left | center |
right
D
alignement horizontal du traite relatif à la fenêtre
align
DIV, H1, H2, H3,
H4, H5, H6, P
left | center |
right | justify
D
alignement horizontal du texte relatif à la fenêtre
align
COL, COLGROUP,
TBODY, TD,
TFOOT, TH,
THEAD, TR
left | center |
right | justify |
char
alink
BODY
couleur
D
couleur des liens sélectionnés
alt
APPLET
texte
D
description courte
alt
AREA, IMG
texte
O
description courte
alt
INPUT
chaîne
archive
APPLET
chaîne
archive
OBJECT
chaîne
listes d’adresses séparées par des virgules
axis
TD, TH
chaîne
liste d’en-têtes (liées aux cellules) séparées par des virgules
background
BODY
url
bgcolor
TABLE
bgcolor
TR
bgcolor
TD, TH
bgcolor
border
Edition 2005-2006
statut
Commentaire
alignement du texte dans les cellules du tableau
description courte
D
liste d’archives séparées par des virgules
D
texture pour le fond du document
couleur
D
couleur de fond des cellules
couleur
D
couleur de fond pour la ligne du tableau
couleur
D
couleur de fond de la cellule
BODY
couleur
D
TABLE
nombre de
pixels
couleur de fond du document
cadre autour du tableau
60/101
border
IMG, OBJECT
nombre de
pixels
D
cadre de lien autour de l’image/objet
cellpadding
TABLE
x pixels ou y%
espacement dans les cellules
cellspacing
TABLE
x pixels ou y%
espacement entre les cellules
char
COL, COLGROUP,
< THEAD, TH,
TFOOT, TD,>
un caracère
caractère d’alignement ex ‘.’ pour chiffres
charoff
COL, COLGROUP,
TBODY, TD,
TFOOT, TH,
THEAD, TR
x pixels ou y%
distance au premier caractère d’alignement (char)
charset
A, LINK, SCRIPT
liste de
caractères
encodés
encodage de caratères du document cible
checked
INPUT
(checked)
pour cocher les boutons radio ou les boîtes à cocher
cite
BLOCKQUOTE, Q
url
message ou url du document cité
cite
DEL, INS
url
information sur les raisons de la modification
class
tous les éléments
sauf : BASE,
BASEFONT, HEAD,
HTML, META,
PARAM, SCRIPT,
STYLE, TITLE
chaîne
liste de classes séparées par des espaces (utilisé notamment
pour faire référence à des classes de style)
classid
OBJECT
url
pour donner l’adresse de l’implémentation
(classid= »java:Bonjour.class »)
clear
BR
left | all | right
| none
D
contrôle du flux du texte
code
APPLET
chaîne
D
fichier de classe de l’applet (code= »Bonjour.class »)
codebase
OBJECT
url
codebase
APPLET
url
D
URL où le code est placé
codetype
OBJECT
type MIME
color
BASEFONT, FONT
couleur
D
couleur du texte
cols
FRAMESET
pixels, % ou
relatif (dé
100% 1
colonne)
cols
TEXTAREA
un nombre
colspan
TD, TH
un nombre
(défaut 1)
compact
DIR, DL, MENU,
OL, UL
(compact)
D
O
content
META
chaîne
coords
AREA
liste de
coordonnées
séparées par
des virgules
Edition 2005-2006
URL où le code est placé (sert à classid, data, archive)
type MIME du code (codetype= »application/java »)
liste de tailles des colonnes
O
nombre de caractères en colonne
nombre de colonnes regroupées en une cellule
pour réduire l’espace entre les items
information associée à name ou http-equiv
les coordonnées pour une carte réactive côté client
61/101
coords
A
liste de
coordonnées
séparées par
des virgules
carte réactives côté client
data
OBJECT
url
url des données utilisées par l’objet
date
DEL, INS
date au format
ISO
date et heure de la modification
declare
OBJECT
(declare)
declaration d’un objet sans l’instancier
defer
SCRIPT
(defer)
le navigateur peut remettre l’exécution du script
dir
tous les éléments
sauf : APPLET,
BASE, BASEFONT,
BDO, BR, FRAME,
FRAMESET,
IFRAME, PARAM,
SCRIPT.
ltr | rtl
direction d’écriture du texte
dir
BDO
ltr | rtl
disabled
BUTTON, INPUT,
OPTGROUP,
OPTION, SELECT,
TEXTAREA
(disabled)
désactiver un contrôle de formulaire
enctype
FORM
type MIME
(“application/x
encodage du formulaire
O
direction
-www- formurlencoded”)
face
BASEFONT, FONT
chaîne
for
LABEL
référence à un
id d’un autre
contrôle du
document
pour associer l’étiquette au contrôle (le for du label correspond
à l’id du contrôle du formulaire)
frame
TABLE
void | above |
below | hsides
| lhs | rhs |
vsides | box |
border
parties du cadre du tableau à afficher
frameborder
FRAME, IFRAME
1|0
bordures visibles autour des cadres de la fenêtre
headers
TD, TH
IDREFS
liste d’id des cellules en-tête qui fournissent une information
pour la cellule courante
height
IFRAME
x pixels ou y%
hauteur du cadre flottant
height
TD, TH
x pixels ou y%
height
IMG, OBJECT
x pixels ou y%
height
APPLET
x pixels ou y%
href
A, AREA, LINK
url
Edition 2005-2006
D
D
liste de noms de polices séparés par des virgules
hauteur de la cellule
hauteur
O, D
hauteur de l’applet
url de la ressource
62/101
href
BASE
url
url de base qui servira à compléter les adresses relatives
hreflang
A, LINK
code de
langage
code de la langue du document lié
hspace
APPLET, IMG,
OBJECT
nombre de
pixels
http-equiv
META
NAME
en-tête de la réponse http
id
tous les éléments
sauf : BASE,
HEAD, HTML,
META, SCRIPT,
STYLE, TITLE
ID
identificateur qui doit être unique dans le document
D
espace horizontal
ismap
IMG, INPUT
(ismap)
carte réactive côté serveur
label
OPTION
texte
pour les menus hiérarchiques
label
OPTGROUP
texte
lang
tous les éléments
sauf : APPLET,
BASE, BASEFONT,
BR, FRAME,
FRAMESET,
IFRAME, PARAM,
SCRIPT
code (fr, en...)
O
pour les menus hiérarchiques
codage de la langue
language
SCRIPT
chaîne
D
nom de langage de script (ex : JavaScript)
link
BODY
couleur
D
couleur des liens non visités
longdesc
IMG
url
lien vers une url qui fait une description de l’image
longdesc
FRAME, IFRAME
url
lien vers une description des cadres
marginheight
FRAME, IFRAME
nombre de
pixels
hauteur de la marge
marginwidth
FRAME, IFRAME
nombre de
pixels
largeur de la marge
maxlength
INPUT
un nombre
nombre maximal de caractères dans les champs textes
media
STYLE
screen | tty |
tv | projection
| handheld |
print | braille |
aural | all
précise avec quel media utiliser le style (screen...)
media
LINK
screen | tty |
tv | projection
| handheld |
print | braille |
aural | all
pour spécifier des feuilles de style pour des médias
method
FORM
get | post
méthode HTTP de soumission du formulaire
multiple
SELECT
(multiple)
sélection multiple dans la liste, par défaut la sélection est
unique
name
BUTTON,
TEXTAREA
chaîne
nom du contrôle pour les scripts
name
APPLET
chaîne
name
SELECT
chaîne
nom de la liste de sélection pour les scripts
name
FORM
chaîne
nom du formulaire pour les scripts
name
FRAME, IFRAME
chaîne
nom de cadre pour les cibles des liens
Edition 2005-2006
D
nom de l’applet pour servir de référence dans toute la page
63/101
name
IMG
chaîne
nom de l’image pour les scripts
name
A
chaîne
pour les liens intrapages ou interpages
name
INPUT, OBJECT
chaîne
nom de l’objet ou du contrôle de formulaire pour les scripts
name
MAP
chaîne
O
pour pouvoir appeler la carte réactive
name
PARAM
chaîne
O
nom d’une propriété
name
META
NAME
nom d’une méta-information (author...)
nohref
AREA
(nohref)
aucune action quand on clique dans la région
noresize
FRAME
(noresize)
interdit le redimensionnement du cadre
noshade
HR
(noshade)
D
pas d’effet de relief pour le trait, par défaut il y a du relief
nowrap
TD, TH
(nowrap)
D
interdit le passage à la ligne automatique dans les cellules
profile
HEAD
url
prompt
ISINDEX
texte
readonly
TEXTAREA
(readonly)
affichage du texte, modification impossible du champ
readonly
INPUT
(readonly)
affichage du texte, modification impossible du champ (text et
password)
rel
A, LINK
rel1, rel2, ...
pour créer une relation avec une feuille de style externe
(rel= »stylesheet » sinon spécifie la relation entre le
document source courant et le document lié (cible), ex :
index, next, prev.
rev
A, LINK
rel1, rel2...
lien inverse par rapport à rel (relation du document cible à la
source)
rows
FRAMESET
pixels, % ou
relatif (défaut
100% 1 ligne)
liste de longeurs de cadres
URL d’un ou plusieurs profils de méta-données séparés par
des espaces
D
rows
TEXTAREA
un nombre
rowspan
TD, TH
un nombre
(défaut 1)
nombre de lignes regroupées dans la cellule
rules
TABLE
none | groups |
rows | cols | all
pour dire comment les traits doivent être tracés dans le
tableau
scheme
META
chaîne
informations sur l’interprétation des méta-données
scope
TD,TH
row | col |
rowgroup |
colgroup
groupe de cellules pour lesquelles la cellule d’en-tête
s’applique
scrolling
FRAME, IFRAME
yes | no | auto
présence de la barre de défilement dans les cadres
selected
OPTION
(selected)
sélectionne une option de la liste
shape
AREA
rect | circle |
poly | default
forme de la zone dont on va donner les coordonnées
shape
A
rect | circle |
poly | default
forme de la zone dont on va donner les coordonnées
size
HR
nombre de
pixels (défaut
1)
D
épaisseur du trait
size
FONT
chaîne
D
[+|-]n (ex : size= »-2 », size= »3 »)
size
INPUT
chaîne
size
BASEFONT
chaîne
D
taille de police par défaut
size
SELECT
Edition 2005-2006
un nombre
O
message pour le champ
nombre de lignes
taille du champ texte
nombre de lignes visibles
64/101
span
COL
un nombre
(défaut 1)
l’attribut col affecte n colonnes
span
COLGROUP
un nombre
(défaut 1)
nombre par défaut de colonnes dans le groupe
src
SCRIPT
url
adresse d’un script externe
src
INPUT
url
pour les champs de formulaire avec des images (type=image)
donne l’adresse de l’image
src
FRAME, IFRAME
url
src
IMG
url
standby
OBJECT
texte
url du document à placer dans le cadre
O
url de l’image
message affiché pendant le téléchargement
start
OL
un nombre
style
tous les éléments
sauf : BASE,
BASEFONT, HEAD,
HTML, META,
PARAM, SCRIPT,
STYLE, TITLE
déclarations
CSS
D
information de style local pour l’élément
nombre de départ de la liste numérotée
summary
TABLE
texte
résumé du tableau pour les synthétiseurs vocaux
tabindex
A, AREA, BUTTON,
INPUT, OBJECT,
SELECT,
TEXTAREA
un nombre
position dans l’ordre des tabulations du document
target
A, AREA, BASE,
FORM, LINK
id cible
cadre cible
text
BODY
couleur
title
tous les éléments
sauf : BASE,
BASEFONT, HEAD,
HTML, META,
PARAM, SCRIPT,
TITLE
texte
titre de l’élément
type
A, LINK
type MIME
type MIME du lien
type
OBJECT
type MIME
type MIME des données
type
PARAM
type
type de l’URL (uniquement quand valuetype= »ref »)
type
SCRIPT
type MIME
O
type MIME du langage de script text/javascript
type
STYLE
type MIME
O
type MIME du style text/css
type
INPUT
text | password
| checkbox |
radio | submit
| reset | file |
hidden | image
| button
type
LI
(disc | square |
circle) | (1 | a
| A | i | I)
D
style de la puce (UL) ou de la numérotation de l’item (OL)
type
OL
1|a|A|i|I
D
style de numérotation de la liste
Edition 2005-2006
D
couleur du texte du document
type de contrôle du formulaire
65/101
type
UL
disc | square |
circle
D
style des puces de la liste
type
BUTTON
button | submit
| reset
type du bouton du formulaire
usemap
IMG, INPUT,
OBJECT
url
nom de la carte côté client
valign
COL, COLGROUP,
TBODY, TD,
TFOOT, TH,
THEAD, TR
top | middle |
bottom |
baseline
alignement vertical dans les cellules
value
INPUT
chaîne
pour boutons radio et boîtes à cocher, valeur associée à name
pour les scripts
value
OPTION
chaîne
valeur associée à name pour les scripts
value
PARAM
chaîne
valeur de la propriété
value
BUTTON
chaîne
value
LI
un nombre
valuetype
PARAM
data | ref |
object
version
HTML
chaîne
D
valeur du bouton (envoyé au serveur)
D
change la numérotation de la liste à partir de cet item et lui
affecte le nombre comme numéro
Interpétation de la valeur
version de la DTD pour ce document HTML
vlink
BODY
couleur
D
couleur des liens visités
vspace
APPLET, IMG,
OBJECT
nombre de
pixels
D
espace vertical
width
HR
x pixels ou y%
(défaut 100%)
D
largeur du trait
width
IFRAME
x pixels ou y%
largeur du cadre flottant
width
IMG, OBJECT
x pixels ou y%
largeur de l’image/objet
width
TABLE
x pixels ou y%
largeur du tableau
width
TD, TH
x pixels ou y%
D
largeur de la cellule
width
APPLET
x pixels ou y%
O, D
largeur de l’applet
width
COL
pixels, % ou
relatif
largeur de chaque colonne appartenant à COL
width
COLGROUP
pixels, % ou
relatif
largeur par défaut pour chaque colonne du groupe
width
PRE
un nombre
D
nombre de caractères à placer sur une ligne dans le bloc PRE
Légende
attribut
D
Déclassé
O
Obligatoire pour
l’élément
Edition 2005-2006
66/101
Attributs d’événements
Tous ces attributs sont du type : nom_attribut = « code script »
attribut
élément
rôle
onblur
l’élément pert
le focus
onfocus
l’élément
prend le focus
onchange
la valeur de
l’élément est
changée
INPUT, SELECT, TEXTAREA
onkeydown
touche du
clavier
pressée
tous les éléments sauf : APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD,
HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE
onkeypress
une touche du
clavier a été
enfoncée puis
relâchée
onkeyup
touche du
clavier
relâchée
onload
tous les
cadres ont
été chargés
onunload
tous les
cadres sont
supprimés
(contraire du
chargement)
onload
le document a
été chargé
onunload
le document
est supprimé
(contraire du
chargement)
onclick
clic sur
l’élément
ondblclick
double clic sur
l’élément
Edition 2005-2006
A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA
FRAMESET
BODY
tous les éléments sauf : APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD,
HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE
67/101
onmousedown
le bouton de
la souris est
enfoncé
onmousemove
le pointeur de
la souris est
déplacé dans
l’élément où il
se trouve
onmouseout
le pointeur de
la souris vient
d’arriver sur
un élément
onmouseover
le pointeur de
la souris vient
de quitter un
élément
onmouseup
le bouton de
la souris est
relâché
onreset
le formulaire
est initialisé
aux valeurs
par défaut
onsubmit
le formulaire
va être
soumis
onselect
du texte est
sélectionné
Edition 2005-2006
FORM
INPUT, TEXTAREA
68/101
JavaScript : Présentation
Créé par Netscape (1er nom : LiveScript 1.0)
Script = ensemble d’instructions permettant de réaliser une action.
Embarqué dans la page HTML -> lisible pour le client.
Langage de programmation à la syntaxe proche du C++.
Gestion des événements provoqués par le client.
Exécution par le browser sans recours au serveur -> indépendant de la plate forme.
Aucune analyse du code -> erreurs de syntaxe non signalées.
Pas d’héritage entre les classes.
Netscape a rendu public JavaScript en 1997 -> ECMAScript (ECMA-262) standard de l’European
Computer Manufacturers Association.
Versions :
Navigator
Internet Explorer
2.0
JavaScript 1.0
3.0
JavaScript 1.1
4.0-4.05
JavaScript 1.2
4.06-4.7x
JavaScript 1.3
> 4.5 compatible ECMA-262
6.0
JavaScript 1.5
(Mozilla)
7.0
JavaScript 1.5
(Mozilla)
3.0
3.02
4.0
JScript 1.0
Jscript 2.0
Jscript 3.0
> 4 compatible ECMA-262
5.0
Jscript 5.0
6.0
Jscript 5.6
JavaScript peut être utilisé côté serveur pour générer dynamiquement des pages (i.e. scripts CGI écrits
en JavaScript), à condition d’avoir un serveur qui l’interprête :
o Enterprise Server de Netscape
o Internet Information Server (IIS) de Microsoft
o Intra Builder de Inprise (ex Borland)
Edition 2005-2006
69/101
JavaScript dans HTML
Insertion d’un bloc de code JavaScript dans le fichier HTML
Élément SCRIPT
Pour intégrer du JavaScript dans du code HTML il faut utiliser l’élément SCRIPT :
<SCRIPT language= »nom » type= »type-mime »>
code JavaScript...
</SCRIPT>
Le code compris entre <SCRIPT> et </SCRIPT> n’est pas affiché, il est interprêté par le navigateur.
attribut language et type
définit la version du langage de script utilisé (VBScript, JavaScript)
o language= »JavaScript »
o language= »JavaScript1.1 »
o language= »JavaScript1.2 »
déclassé en HTML 4
remplacé par l’attribut type (attention, les navigateurs antérieurs aux versions 4.0 ne reconnaissent
pas l’attribut type)
type= »text/javascript »
attribut spécifique : src
pour charger du javascript dans un fichier séparé
src= »nomfichierscript.js »
spécifique à Netscape -> déconseillé
les attributs archive et id spécifiques à Netscape existent également
Position du code dans un fichier HTML
dans l’en-tête : pour définir des fonctions dès le chargement ;
entre l’en-tête et le corps ;
dans le corps : pour gérer les événements.
Masquer les scripts pour les navigateurs non compatibles
Si un navigateur n’est pas capable d’exécuter les scripts, alors l’élément SCRIPT n’aura pas de sens pour
lui et il fera ce que fait tout navigateur qui ne connaît pas un élément : il ignorera l’élément. Les éléments
SCRIPT et /SCRIPT seront donc ignorées, par contre le texte contenu entre les deux (qui est du code
JavaScript) sera lu comme du texte HTML et sera affiché dans la page. Pour éviter cela, il faut placer des
commentaires HTML () qui auront pour effet de masquer le code JavaScript
aux navigateurs qui ne comprennent pas les scripts.
JavaScript connaît le  en ajoutant un
commentaire // JavaScript devant.
<SCRIPT>
<!-Code JavaScript
//-->
</SCRIPT>
Edition 2005-2006
70/101
Élément NOSCRIPT
Pour prévenir les clients qu’il y a du JavaScript
<SCRIPT>
<!-CODE JS
//-->
</SCRIPT>
<NOSCRIPT>
texte affiché uniquement si les scripts ne sont pas supportés
</NOSCRIPT>
Insertion de code dans une URL d’un élément HTML
Le code se met sous la forme :
javascript:code
Élément A
Pour exécuter du code JavaScript il est possible d’utiliser :
<A href= »JavaScript:code »>texte</A>
Quand on clique sur texte le code s’exécute (le plus souvent c’est un appel de fonction).
NB : dans href, le « JavaScript:void(0) » empêche le navigateur de faire un chargement quand on clique
sur le lien.
Edition 2005-2006
71/101
Code JavaScript pour les événements dans les éléments
On peut insérer du code JavaScript pour indiquer les actions à effectuer en réaction à un événement
provoqué par l’utilisateur (souvent ce code inséré se contente d’appeler une fonction déclarée plus haut
dans le document au sein d’un élément SCRIPT). Pour réagir à un événement provoqué par le client :
<ELEMENT onEvenement= »code »>
Attributs d’événements existants
nom
événement
s’applique à
onAbort
interruption de
chargement
image
onBlur
perte du focus
champs de saisie, window
onFocus
attribution du focus
onClick
clic sur un objet
button, checkbox, radio, reset, submit, lien
retourne false pour annuler l’action
onChange
changement de champ
de saisie
fileupload, password, select, text, textarea
onDblClick
double clic
lien, image, bouton(JS1.2)
onError
erreur JS ou de
chargement d’une
image
image, window
onKeyDown
touche enfoncée
document, image, lien, text
onKeyPress
l’utilisateur a appuyé
sur une touche
retourne false pour annuler
onKeyUp
touche relâchée
onLoad
chargement
image, window
onMouseDown
un bouton de la souris
est enfoncé
document, lien, image, button
onMouseUp
le bouton de la souris
est relâché
retourne false pour annuler
onMouseMove
déplacement de la
souris
onMouseOut
la souris vient de quitter
une zone
lien, image, layer
onMouseOver
la souris entre sur une
zone
retourne true pour empêcher l’affichage de l’URL
onReset
annulation des données
saisies
formulaire ; retourne falsepour annuler, ex :
onSubmit
soumission du
formulaire
<FORM action= »fich.php3 » onSubmit= »return
Verif() »>
onSelect
sélection d’un champ de
texte
champs de saisie
onUnload
déchargement d’un
document
image, window
Edition 2005-2006
72/101
JavaScript : Types
Chaînes de caractères : string
Syntaxe
‘ voici un texte ‘ ou « voici un texte «
Caractères spéciaux
\b
\f
\n
\r
\t
retour en arrière
saut de page
saut de ligne
retour chariot
tabulation
backspace
form feed
new line
carriage return
Caractère d’échappement \
caractère
‘
codage
\’
Exemple
l’histoire
«
\»
« bonjour » dit-il
\
\\
ch = ‘l\’histoire’;
ch =
« \ »bonjour\ »
dit-il »;
Nombres : number
Entiers
préfixe
0
0x
nombre
entier
entier
entier
base
octale
hexadécimale
décimale
exemple
0377
0xFF
255
Booléens : boolean
Valeurs true ou false
Fonctions : function
Pas de type pour les arguments ou pour la valeur retournée.
Une fonction peut être appelée avec un nombre d’arguments différents.
Syntaxe d’une procédure :
function nom_procedure(arg1,...,argN){
instruction1;
...
instructionM;
}
Syntaxe d’une fonction :
function nom_fonction(arg1,...,argN){
instruction1;
...
instructionM;
return val;
}
Rappel : une procédure ne retourne aucune valeur, une fonction retourne une valeur.
Appel :
Edition 2005-2006
73/101
nom_procedure(arg1, ..., argN);
var = nom_fonction(arg1, ..., argN);
Objets : object
Définitions
Classe
famille d’objets
ex : humain
Propriété
caractéristique d’un objet (elle a un nom et une valeur)
ex : nom, prénom, sexe, pays, date de naissance
Constructeur outil qui permet de créer un élément (instance) d’une classe.
function humain(nom, prenom, sexe, pays, date){
this.nom = nom; this.prenom = prenom; this.sexe = sexe; this.pays = pays; this.date = date;
}
this
Méthode
permet de faire référence aux instances.
outil s’appliquant à un objet.
Création d’une instance d’une classe
instance = new constructeur();
instance = new constructeur(arg1, ..., argN);
client1 = new humain(‘Dupont’,’Jean’,’H’,’France’,’10/12/60’);
Accès aux propriétés des instances
nom_instance.propriete
client1.pays = ‘italie’
Méthodes
Syntaxe :
function age(){
date = this.date; ... ; return age;
}
// this sera remplacé par l’instance sur laquelle la méthode est appliquée.
Appel :
o
il faut ajouter la propriété dans le constructeur
this.age = age
o
nom_instance.methode(arg1, ..., argN)
client1.age()
Objets prédéfinis : images, champs de formulaires...
Classes prédéfinies : Date(), Window()... (var anniv = new Date();)
Pour ajouter des propriétés : nom_classe.prototype. nouvelle_propriete = valeur
Convertir une chaîne en nombre
eval(chaine) évalue la chaîne et retourne sa valeur.
parseInt(chaine, base) traduit en entier si possible (dans la base en option), sinon retourne NaN.
parseFloat(chaine) traduit en réel la chaîne si possible, sinon retourne NaN.
Pour connaître le type utiliser typeof(entite) qui retournera le type de entite.
Pour savoir si la valeur est numérique utiliser isNaN(valeur) qui retourne true ou false.
Edition 2005-2006
74/101
JavaScript : Opérateurs
Les opérateurs peuvent être :
unaires : ils n’agissent que sur 1 donnée ;
binaires : ils agissent sur 2 données ;
Concaténation (chaînes)
Arithmétiques
Syntaxe : +
+
addition
soustraction
*
multiplication
/
division
%
modulo
++ incrémentation
-décrémentation
Binaires (bit à bit)
Logiques
&&
||
!
a
b
1
1
0
0
1
0
1
0
Unaire
a et b
a ou b
1
0
0
0
&
|
not a
1
1
1
0
unaires
Entiers sur 32 bits.
binaires
et
Ou
négation
binaires
^
0
0
1
1
<<
>>
>>>
et (1 & 1) -> 1
ou (1 | 0) -> 1
ou exclusif (1 ^ 1) ->
0
décalage a gauche
décalage a droite
idem sans
conservation du signe
avec 1 = vrai, 0 = false
Affectation
Signe
=
+=
-=
*=
/=
%=
<<=
>>=
>>>=
&=
^=
|=
++
-Priorité des opérateurs
Relationnels (nombres et chaînes)
utilisation
x=y
x += y
x -= y
x *= y
x /= y
x %= y
x <<= y
x >>= y
x >>>= y
x &= y
x ^= y
x |= y
x++
x—
équivalent
x=y
x=x+y
x=x-y
x=x*y
x=x/y
x=x%y
x = x << y
x = x >> y
x = x >>> y
x=x&y
x=x^y
x=x|y
x = x +1
x=x-1
==, !=, <=, >=, >, <
[ ] ( ) . x++ x—
++x—x +x -x ~ !
*/%
+<< >> >>>
< > <= >=
== !=
&
^
|
&&
||
?:
= += -= *= /= %= &= ^=
|= <<= >>= >>>=
Edition 2005-2006
75/101
JavaScript : Instructions
Toutes les instructions se terminent par ;
Cependant ; peut être omis s’il y a un passage à la ligne
ch = « ceci est une chaine »;
ch = « ceci est une chaine »
attention, l’exemple ci-dessous provoquera une erreur :
ch = « ceci est une
chaine »
Commentaires
Syntaxe : // ou /*...*/
Variables
Syntaxe :
var nom_variable;
var nom_variable = valeur;
nom_variable :
caractères autorisés : lettres, chiffres (sauf le premier caractère), et souligné _
attention à la casse : nom différent de noM
déclaration des variables : optionnel... mais fortement recommandé.
Variables locales : déclarées dans une fonction
Variables globales : déclarées en dehors du corps des fonctions.
Boucles
Faire tant que condition vraie
syntaxe
Exemple
résultat
var i = 1;
var x = 2;
do{
instruction1;
... instructionN;
}
while (condition)
exemple
var i = 3;
var x = 2;
do{
x *= x;
i++;
}
while (i<3);
x = 16
do{
x *= x;
i++;
}
while (i<3);
Tant que condition vraie faire
syntaxe
exemple
résultat
var i = 1;
var x = 2;
while(condition){
instruction1;
...
instructionN;
}
while(i<3)
{
x *= x;
i++;
}
Edition 2005-2006
Exemple
résultat
var i = 3;
var x = 2;
x = 16
while(i<3)
{
x *= x;
i++;
}
x = 2
76/101
Pour expression initiale jusqu’à condition finale faire
Syntaxe :
for(expression; condition; incrément)
{
instruction1;
...
instructionN;
}
exemple
var i;
var x = 2;
résultat
exemple
var i;
var x = 0;
x = 16
for(i=0; i<3; i++)
x *= 2;
for(i=50; i<90; i+=10)
x += i;
résultat
itération 1 : i = 50, x = 50
itération 2 : i = 60, x = 110
itération 3 : i = 70, x = 180
itération 4 : i = 80, x = 260
-> résultat final : x = 260
Pour variable dans un ensemble faire
for(variable in nom_tableau){
instruction1;
...
instructionN;
}
for(variable in nom_objet){
instruction1;
...
instructionN;
}
Exemple, nous allons vérifier si nous avons le fruit demandé par un client (nommé fruit_cherche) dans
notre stock (dans le tableau fruits) et dans le cas ou nous trouvons ce fruit nous allons afficher un
message dans une fenêtre de dialogue :
Solution 1 : for
var fruits = new Array(‘pomme’, ‘poire’, ‘fraise’, ‘abricot’);
for(i = 0 ; i < 4 ; i++)
if(fruits[i] == fruit_cherche)
window.alert(« nous avons ce fruit en stock »);
Solution 2 : for in
for(i in fruits)
Interrompre la boucle : break
Dans l’exemple précédent, on parcourt toutes les cases du tableau fruits pour voir si fruit_cherche est
dedans. Pour gagner du temps on peut interrompre la boucle dès qu’on a trouvé le fruit avec break (NB,
break s’applique à toutes les boucles : while, for...).
Dans l’exemple de la solution 1 et 2, la recherche s’effectue ainsi :
pomme = fruit_cherche ?
poire = fruit_cherche ?
fraise = fruit_cherche ?
abricot = fruit_cherche ?
Ajoutons à présent un break :
utilisation du break
for(i in fruits)
{
break;
}
si le fruit cherché est une poire, la recherche s’arrête dès que le fruit poire est rencontré :
Edition 2005-2006
77/101
pomme = fruit_cherche ?
poire = fruit_cherche ?
Itération suivante dans la boucle : continue
for(i=0 ; i<5; i++)
{
if(i == 3)
continue;
document.writeln(i);
}
affichera 0 1 2 4
Instructions conditionnelles
Si ... sinon
syntaxe
if(condition){
instruction1;
...
instructionN;
}
else{
instruction1;
...
instructionN;
}
exemple
if(a < b)
window.alert(a+” inferieur a “+b);
else
window.alert(a+” superieur a “+b);
Selon valeur expression faire
syntaxe
switch (expression){
case val1 : ... ; break;
case val2 : ... ; break;
...
case valN : ... ; break;
default : ...
}
exemple
today = new Date();
switch (today.getDay())
{
case 0 : jour = “dimanche”; break;
case 1 : jour = “lundi”; break;
case 2 : jour = “mardi”; break;
case 3 : jour = “mercredi”; break;
case 4 : jour = « jeudi »; break;
case 5 : jour = « vendredi »; break;
case 6 : jour = “samedi”; break;
}
window.alert(jour);
Si le break n’est pas précisé :
switch (lettre)
{
case ‘o’ :
case ‘O’ : Ouvrir(); break;
case ‘q’ :
case ‘Q’ : Quitter(); break;
case ‘s’ :
case ‘S’ : Sauver(); break;
}
quand la lettre est un petit o alors on exécute tout ce qu’on trouve jusqu’au break (appel de la fonction
Ouvrir()).
with(objet par défaut pour le bloc)
Permet d’éviter de répéter l’objet tout le long du bloc (le code devient plus lisible).
Edition 2005-2006
78/101
Tableaux : classe Array
Déclaration d’un tableau
var
var
var
var
mon_tableau
mon_tableau
mon_tableau
mon_tableau
=
=
=
=
new Array();
new Array(taille);
new Array(el1, el2, ..., elN);
[el1, el2, ..., elN] (depuis JavaScript 1.2);
var tab = new Array(3, ‘pomme’, 4.5); var tab = [3, ‘pomme’, 4.5];
Propriétés
mon_tableau.length -> taille du tableau
i = tab.length;
Accès aux cases
mon_tableau[0] mon_tableau[1] … mon_tableau[N-1]
NB : pour le parcours du tableau pensez à la boucle for i (in mon_tableau).
Méthodes
join(separateur)
pop()
push(val,...)
reverse()
shift()
slice(deb, fin)
sort()
splice(deb, nbel, val, ...)
toString()
unshift(val,...)
concatène les cases du tableau avec le separateur (JavaScript 1.1, ECMA)
dépile et retourne le dernier élément du tableau (Navigator 4)
ajoute des éléments au tableau (Navigator 4)
renverse le tableau (JavaScript 1.1, ECMA)
supprime et retourne le 1er élément (Navigator 4)
retourne une portion du tableau (JavaScript 1.2)
tri des éléments (JavaScript 1.1, ECMA)
retire des éléments du tableau (Navigator 4)
conversion du tableau en chaîne (JavaScript 1.1, ECMA)
insère des éléments (Navigator 4)
Exemple
var tab = new Array();
tab.push(‘pomme’,’ananas’,’poire’,’cerise’)
tab.push(‘abricot’,’raisin’)
tab.reverse()
fruit = tab.pop()
fruit = tab.shift()
Edition 2005-2006
vide
pomme ananas poire cerise
pomme ananas poire cerise abricot raisin
raisin abricot cerise poire ananas pomme
raisin abricot cerise poire ananas
fruit = pomme
abricot cerise poire ananas
fruit = raisin
79/101
Chaînes de caractères : classe String
Constructeur
var chaine = new String(‘ma chaine’);
on peut aussi écrire var chaine = ‘ma chaine’;
Propriété
chaine.length le nombre de caractères contenus dans la chaîne.
Méthodes
chaine.methode(param);
charAt(i)
caractère qui correspond à l’index i
charCodeAt(i)
entier correspondant au code ascii du caractère en i
+
chaine = chaine1 + chaine2
indexOf(ch,i)
index de la première occurence de ch à partir de i (optionnel)
lastIndexOf(ch,i)
index de la dernière occurence de ch à partir de i (recherche arrière)
match(exp)
applique l’expression rationnelle exp et renvoie les correspondances
replace(exp,ch)
remplace les correspondances de exp et de la chaine par ch
search(exp)
index de la première correspondance entre exp et chaine
slice(d,f)
donne la sous-chaîne qui commence en d et finit en f
split(sep)
donne les sous-chaînes quand la chaîne est découpée avec sep
substr(d,l)
sous-chaîne de longueur l commençant en d
substring(d,f)
sous-chaîne entre d et f
toLowerCase()
donne la chaîne en minuscules
toUpperCase()
donne la chaîne en majuscules
anchor(ancre)
insère la chaîne dans les éléments <A NAME= »ancre »>...</A>
big()
insère la chaîne dans les éléments <BIG>...</BIG>
blink()
insère la chaîne dans les éléments <BLINK>...</BLINK>
bold()
insère la chaîne dans les éléments <B>...</B>
fixed()
insère la chaîne dans les éléments <TT>...</TT>
fontcolor(couleur)
insère la chaîne dans les éléments <FONT color= »couleur »>...</FONT>
fontsize(taille)
insère
italics()
insère
link(URL)
insère
small()
insère
strike()
insère
sub()
insère
sup()
insère
instruction
var ch = « bonjour »
ch.charAt(3)
ch.charCodeAt(3)
ch += « tout le monde »
ch.indexOf(« ou »)
ch.indexOf(« ou »,5)
ch.lastIndexOf(« ou »)
ch.lastIndexOf(« ou »,8)
ch.slice(3, 7)
tab = ch.split(‘ ‘)
ch.substr(3, 7)
ch.toUpperCase()
ch.toLowerCase()
ch.fontcolor(« red »)
Edition 2005-2006
la chaîne dans les éléments <FONT size= »taille »>...</FONT>
la chaîne dans les éléments <I>...</I>
la chaîne dans les éléments <A HREF= »URL »>...</A>
la chaîne dans les éléments <SMALL>...</SMALL>
la chaîne dans les éléments <STRIKE>...</STRIKE>
la chaîne dans les éléments <SUB>...</SUB>
la chaîne dans les éléments <SUP>...</SUP>
résultat
bonjour
j
106
bonjour tout le monde
4
9
9
4
jour
tableau
case 0 = bonjour
case 1 = tout
case 2 = le
case 3 = monde
jour to
BONJOUR TOUT LE MONDE
bonjour tout le monde
<FONT color= »red »>bonjour tout le monde</FONT>
80/101
Expressions rationnelles RegExp()
But : traitement des chaînes de caractères (substitution, recherche, découpage...)
Définition d’un modèle
Constructeur
reg = new RegExp(‘modele’,’option1, option2...’); reg = /modele/options
Options
g rechercher toutes les correspondances i pas de distinction entre les majuscules et les minuscules
Caractères spéciaux
.
\
\f
\n
\r
\t
tout caractère
le caractère suivant n’est pas spécial
saut de page
saut de ligne
retour chariot
Tabulation
Pour mettre les caratères spéciaux * + ? . / \ dans une expression rationnelle il faut les faire précéder
d’un \.
Classes de caractères
[a-zA-Z]
[^cp]
\d
\D
\w
\W
\s
\S
*
+
?
{n}
{n,}
{n,m}
a|b
caractères présents dans les crochets
interdit les caractères c et p
chiffre (\d{2} = nombre à deux chiffres)
équivalent à [^0-9]
lettres, chiffres, souligné
tout ce qui n’est pas lettre, chiffre, souligné
espace, retour à la ligne, retour chariot, tabulation
tout ce qui n’est pas espace...
le caractère peut apparaître 0 ou n fois
le caractère doit apparaître au moins une fois
le caractère doit apparaître 0 ou 1 fois
le car. doit apparaître n fois
il doit apparaître au moins n fois
au moins n fois et au plus m fois.
a ou b
Position
^
$
\b
\B
correspondance
correspondance
correspondance
correspondance
en
en
en
en
début
fin de
début
fin de
de chaîne
chaîne
de mot
mot
Mémorisation des corespondances trouvées
reg = /\w+\s(\w+)\s(\d+)/ accès par $1, $2 aux données entre parenthèses.
Méthodes
exec(chaine) recherche le modèle dans la chaîne
test(chaine) renvoie true si une correspondance modèle-chaîne a été trouvée
chaine = « toto titi tata »;
reg = /t.t./;
alert(reg.exec(chaine));
NB : les expressions rationnelles sont utilisées dans les méthodes de la classe String match, replace,
search
Edition 2005-2006
81/101
Exemples
Numériques
tel : 11.22.33.44.55
expression
(\d{2}\.?){5}
(\d{2}\.?)+
(\d{2}\.)+
[23]+
résultat
11.22.33.44.55
11.22.33.44.55
11.22.33.44.
22, 33
Alphabétiques
Pour le texte suivant : Objets inanimes, avez vous donc une ame qui s’accroche a notre ame et la force
d’aimer ? Lamartine
expression
ame
a.e
[a-zA-z]+
résultat
ame, ame
ave, ame
Objets, inanimes, avez, vous, donc, ...
Edition 2005-2006
82/101
Mathématiques : classe Math
Pas de constructeur.
Constantes mathématiques : Math.constante
E
LN10
LN2
PI
SQRT1_2
SQRT2
exponentielle de 1
ln(10)
ln(2)
pi
racine carrée de ½
racine carrée de 2
Méthodes mathématiques : Math.fonction(paramètres)
abs(n)
acos(n)
asin(n)
atan(n)
atan2(x,y)
ceil(n)
cos(n)
exp(n)
floor(n)
log(n)
max(a, b)
min(a, b)
pow(x, y)
random()
round(n)
sin(n)
sqrt(n)
tan(n)
valeur absolue
arc cosinus (n entre -1 et 1)
arc sinus (n entre -1 et 1)
arc tangente
angle associé aux coordonnées polaires du point x,y
entier supérieur ou égal à n
cosinus
exponentielle
entier inférieur à n
logarithme
retourne le paramètre le plus grand
retourne le paramètre le plus petit
donne x puissance y
nombre pseudo-aléatoire (0..1)
entier le plus proche de n
sinus
racine carrée
tangente
Edition 2005-2006
83/101
Dates : classe Date
Constructeur :
var date_courante = new Date();
ma_date = new Date(annee, mois, jour);
ma_date = new Date(annee, mois, jour, heure, minute, seconde, milliseconde);
Méthodes pour les heures, minutes, secondes, millisecondes
temps universel
temps
lire
affecter
lire
heure (0..23)
minutes (0..59)
secondes (0..59)
millisecondes (0..999)
getHours()
getMinutes()
getSeconds()
getMilliseconds()
setHours(h)
setMinutes(mn)
setSeconds(s)
setMilliseconds
getUTCHours()
getUTCMinutes()
getUTCSeconds()
getUTCMilliseconds()
affecter
setUTCHours(h)
setUTCMinutes(mn)
setUTCSeconds(s)
setUTCMilliseconds
<HTML>
<HEAD>
<TITLE>Detecte heure</TITLE>
</HEAD>
<BODY bgcolor=”#FFFFCC”>
<SCRIPT language=”JavaScript1.2”>
<!-document.open();
today = new Date();
document.write(today.getHours(),’ h ‘);
document.write(today.getMinutes(),’ mn ‘);
document.write(today.getSeconds(),’ s ‘);
document.write(today.getMilliseconds(),’ ms’);
17 h 50 mn 31 s 313 ms
document.close();
// -->
</SCRIPT>
</BODY>
</HTML>
Méthodes pour les jours, mois, années
temps
jour de la semaine anglaise (0..6) qui se traduit
par dimanche..samedi
jour du mois (1..31)
mois (0..11)
Netscape : nombre d’années depuis 1900
Internet Explorer année sur 4 chiffres (-> éviter)
année sur 4 chiffres
lire
affecter
getDay()
temps universel
lire
affecter
getUTCDay()
getDate()
getMonth()
setDate(jour)
setMonth(mois)
getYear()
setYear(annee)
getFullYear()
setFullYear(annee)
getUTCDate()
getUTCMonth()
setUTCDate(jour)
setUTCMonth(mois)
getUTCFullYear()
setUTCFullYear(annee)
<HTML>
<HEAD>
<TITLE>Detecte date</TITLE>
</HEAD>
<BODY bgcolor=”#FFFFCC”>
<!-document.open();
nous sommes le mercredi 29 septembre 2004
today = new Date();
var jsem = today.getDay();
var mois = today.getMonth();
Edition 2005-2006
84/101
var ch = »nous sommes le « ;
switch (jsem)
{
case 0 : ch+=”dimanche “; break;
case 1 : ch+=”lundi “; break;
case 2 : ch+=”mardi “; break;
case 3 : ch+=”mercredi “; break;
case 4 : ch+=”jeudi “; break;
case 5 : ch+=”vendredi “; break;
case 6 : ch+=”samedi “; break;
}
ch += today.getDate();
switch (mois)
{
case 0 : ch+=” janvier “; break;
case 1 : ch+=” février “; break;
case 2 : ch+=” mars “; break;
case 3 : ch+=” avril “; break;
case 4 : ch+=” mai “; break;
case 5 : ch+=” juin “; break;
case 6 : ch+=” juillet “; break;
case 7 : ch+=” août “; break;
case 8 : ch+=” septembre “; break;
case 9 : ch+=” octobre “; break;
case 10: ch+=” novembre “; break;
case 11: ch+=” décembre “; break;
}
ch += today.getFullYear();
document.write(ch);
document.close();
// -->
</SCRIPT>
</BODY>
</HTML>
Autres méthodes
getTime()
getTimeZoneOffset()
toUTCString()
toLocaleString()
Edition 2005-2006
SetTime(ms)
nombre de ms depuis le 01/01/1970
nombre de minutes de décalage heure locale - heure GMT
retourne une chaîne : Mon, 28 Feb 2000 9:00:00 GMT
retourne une chaîne : 28/02/00 9:00:00
85/101
Images : classe Image()
Constructeur : var mon_image = new Image();
Propriétés
border
height
hspace
lowsrc
name
src
vspace
width
complete
largeur du cadre
hauteur
espace horizontal
URL de l’image basse résolution
nom de l’image
URL de l’image
espace vertical
largeur de l’image
false tant que le chargement n’est pas fini
On peut accéder à une image par l’intermédiaire d’un tableau window.document.images[num] dont la
taille est donnée par window.document.images.length
ou par son nom (celui qu’on lui a donné dans la balise IMG) window.document.nomimage
Méthodes
onabort
onerror
onload
chargement interrompu par le client
erreur au chargement
pendant le chargement
Edition 2005-2006
86/101
Classes instanciées par le navigateur : Navigator
Un seul objet : navigator
Propriétés de navigator
appCodeName
appName
appVersion
language
mimeTypes
platform
plugins
userAgent
nom de code du navigateur (Mozilla)
nom d’application du navigateur (Netscape, Internet Explorer)
plate-forme et version du navigateur (4.5 [fr] (Macintosh; I; PPC))
parseFloat(navigator.appVersion) ->4.5
langage du navigateur (fr, en) sous Navigator 4
tableau des types MIME reconnus par le navigateur
système d’exploitation (MacPPC)
tableau des plugins installés
chaîne envoyée lors d’une requête http
Pour accèder au nom d’application du navigateur il suffit donc d’écrire : navigator.appName.
Tableau plugins
Propriétés des éléments du tableau
name : nom du plug-in
description : description du plug-in
Accès aux propriétés par index
navigator.plugins[case]
Informations sur le plugin de la case 3 :
navigator.plugins[3].name
navigator.plugins[3].description
QuickTime Plug-in 4.0.1
The QuickTime Plugin allows you to view a wide variety of multimedia content in web pages. For
more information, visit the QuickTime web site.
Accès aux propriétés par le nom du plugin
navigator.plugins[’nomplugin’]
Informations sur le plugin QuickTime Plug-in 4.0.1 :
navigator.plugins[’QuickTime Plug-in
4.0.1’].description
The QuickTime Plugin allows you to view a wide variety of multimedia content in web
pages. For more information, visit the QuickTime web site.
Tableau type MIME
Qu’est-ce que le Mime ?
Multipurpose Internet Mail Extension (Bell Communications 1991)
Standard pour étendre les possibilités du courrier électronique, insérer dans un e-mail :
o du texte ;
o des images ;
o du son ;
avec http le serveur donne le type Mime avant d’envoyer le document :
Content-type:type_mime/sous_type
Content-type:text/html -> document .html
Content-type:image/gif -> image au format gif
Intérêt :
savoir si le navigateur est Netscape ou Internet Explorer
savoir si le client peut visualiser des images PNG :
•
if(navigator.mimeTypes[’image/png’])
Edition 2005-2006
87/101
•
•
•
action;
else
autre action;
Propriétés des éléments du tableau MIME
Liste des propriétés
type : nom du type mime
description : description du type
enabledPlugin : référence vers le plugin qui le gère
suffixes : listes des suffixes de fichiers gérés par ce type.
Accès aux propriétés par le nom du type
navigator.mimeTypes[’nomtype’]
Informations sur le type mime image/gif :
navigator.mimeTypes[’image/gif’].type
navigator.mimeTypes[’image/gif’].description
navigator.mimeTypes[’image/gif’].enabledPlugin
navigator.mimeTypes[’image/gif’].suffixes
image/gif
GIF Image
null
gif
Accès aux propriétés par index
navigator.mimeTypes[case]
Informations sur la case 74 du tableau mime :
navigator.mimeTypes[74].type
navigator.mimeTypes[74].description
navigator.mimeTypes[74].enabledPlugin
navigator.mimeTypes[74].suffixes
Edition 2005-2006
video/quicktime
Quicktime Video
{name:”QuickTime Plug-in 4.0.1”, filename:”QuickTime Plugin”, description:”The
QuickTime Plugin allows you to view a wide variety of multimedia content in web pages.
For more information, visit the QuickTime web site. », length:32}
qt, mov, moov
88/101
Classes instanciées par le navigateur : Window
Un objet window pour chaque zone du navigateur (fenêtre, frame)
Propriétés
Référence aux objets : window.nom_propriete.propriete_specifique
closed
defaultStatus
document
frames[]
history
length
location
name
navigator
offscreenBuffering
opener
parent
screen
self
status
top
window
pour savoir si la fenêtre a été fermée ou non
texte à afficher par défaut dans la barre d’état en bas
accès à toutes les informations de la zone
tableau d’objets pour les frames de la zone
window.frames.length
window.frames[num]
pour naviguer
nombre de cadres dans la fenêtre
informations sur l’URL de la zone
nom de la zone
réfère à l’objet Navigator
mises à jour dans des tampons
fenêtre à partir de laquelle a été créée la zone
document contenant <FRAME> associé au frame
réfère à l’objet Screen
la zone elle-même
texte à afficher dans la barre d’état
la fenêtre d’un cadre
la fenêtre elle-même
History
Propriétés de history
current URL du document courant
length nombre d’éléments dans l’historique
next : URL suivante dans l’historique
previous : URL précédente dans l’historique
Méthodes de history
back() pour simuler le bouton back
go(n) effectuer un retour ou une avancée dans l’historique de n pages
forward() pour simuler le bouton forward
<INPUT type=”button” value=”back” onClick=”window.history.back()”>
<INPUT type=”button” value=”back2” onClick=”window.history.go(-2)”>
<INPUT type=”button” value=”forward” onClick=”window.history.forward()”>
Location
Propriétés de location
href : totalité de l’URL
hash : partie ancre de l’URL (après #)
host : nom du serveur et port
hostname : adresse IP ou nom
pathname : chaîne après le nom du script et avant ‘?’
port : numéro de port
protocol : nom du protocole (http)
search partie requête (après ‘?’)
Méthodes de location
reload() : pour recharger le document
replace(URL) : pour charger le document situé à l’adresse URL
<INPUT type=”button” value=”recharger” onClick=”window.location.reload()”>
<INPUT type=”button” value=”remplacer”
onClick=”window.location.replace(‘../Navigator.html’)”>
Edition 2005-2006
89/101
Document
bgColor
fgColor
alinkColor
linkColor
vlinkColor
anchors[num]
applets[num]
cookie
embeds[num]
forms[num]
images[num]
links[]
plugins[num]
lastModified
referrer
title
URL
couleur de fond
couleur du texte par défaut
couleur des liens activés
couleur des liens non visités
couleur des liens visités
cible d’un lien hypertexte
window.document.anchors.length = nombre d’ancres
window.document.anchors[i].name = nom de l’ancre
applets d’un document
les propriétés sont celles des champs publics de l’applet java,
les méthodes sont les méthodes publiques de l’applet java
cookies du document
objets incorporés dans le document
Formulaire du document
images du document
tableau pour les liens du document
window.document.links.length
attributs : hash, host, hostname, href, pathname, port, protocol, search, target (c.f. propriétés de location)
Objects incorporés dans le document
date de modification du document
URL du document provenant du lien
titre du document
URL du document
Méthodes de document
write(paramètre1, ..., paramètreN) : insertion dynamique dans le document.
writeln(paramètre1, ..., paramètreN) : idem avec retour à la ligne
open() : vide le document et en crée un nouveau
close() : affichage de tout ce qui a été écrit avec write() ou writeln()
Méthodes
open(arguments)
close()
alert(texte)
blur()
focus()
prompt(txt, val)
confirm(texte)
back()
find()
forward()
home()
stop()
setTimeout(code, delai)
clearTimeout(id)
setInterval(code, int)
clearInterval(id)
moveBy(x,y)
moveTo(x,y)
resizeBy(l,h)
resizeTo(l,h)
scrollBy(x,y)
scrollTo(x,y)
ouvrir une nouvelle fenêtre
fermer une fenêtre
ouvre une fenêtre d’alerte contenant le texte
faire perdre le focus
donner le focus
ouvre une fenêtre avec un message txt et un champ de texte contenant val, retourne le texte
fenêtre de confirmation qui retourne un booléen
bouton back du navigateur
recherche dans le document
bouton forward du navigateur
bouton accueil du navigateur
bouton stop du navigateur
compte à rebours
désactiver un compte à rebours avant son terme
déclenche l’exécution périodique d’une fonction
stoppe de façon périodique l’exécution du code
déplace la fenêtre (zone, couche) de x pixels horizontaux et y verticaux
déplace le coin gauche en (x,y)
pour retrécir ou agrandir la fenêtre
largeur et hauteur de la fenêtre à agrandir ou réduire
déplacement horizontal et vertical du document dans la fenêtre (ascenseurs)
déplacement du coin x,y du document en haut de la fenêtre
La méthode open(URL, nom, options) prend comme paramètres :
URL : URL du document à afficher dans la fenêtre (optionnel)
nom : nom de la fenêtre (target pour les autres documents HTML)
option :
o height : hauteur initiale
o width : largeur initiale
o left : distance bord gauche fenêtre - bord gauche écran
o location = yes / no : barre de localisation
o menubar = yes / no : barre de menus
Edition 2005-2006
90/101
o
o
o
o
resizable = yes / no : autorisation de redimensionnement
scrollbars = yes / no : barres de défilement
status = yes / no : barre de statut
toolbars = yes / no : barre d’outils
Pour la plupart il faut utiliser des scripts signés.
Événements
onBlur
onFocus
onLoad
onUnload
onError
onResize
la fenêtre perd le focus
la fenêtre prend le focus
la fenêtre est chargée dans le navigateur
le navigateur quitte la page
erreur de code JS ou de chargement d’une image
la fenêtre est redimensionnée
<BODY onBlur=”fonction”>
<BODY onFocus=”fonction”>
Pour supprimer l’affichage des erreurs
<SCRIPT language= »JavaScript1.2 »>
window.onError = null
</SCRIPT>
Edition 2005-2006
91/101
Accéder aux données d’un formulaire
Accès aux textes contenus dans les champs
Les éléments de formulaire concernés sont :
boîtes de saisie de texte (INPUT type= »text »)
saisie de textes sur plusieurs lignes (TEXTAREA)
boîtes de saisie masquées (INPUT type= »password »)
boîtes de soumission de fichier (INPUT type= »file »)
données masquées (INPUT type= »hidden »)
Lecture
window.document.nom_formulaire.nom_element.value
exemple pour la boîte de saisie de texte
code HTML dans l’élément FORM
pour <INPUT type= »text » size= »2 » maxlength= »2 » name= »nombre_personnes »> personnes
instruction JavaScript pour lire
ch = window.document.commande.nombre_personnes.value;
ch prend dans l’exemple la valeur 4
exemple pour la soumission de fichier
<Attachez-un plan : <INPUT type= »file » name= »fichier »>
ch = window.document.commande.fichier.value;
ch prend dans l’exemple la valeur
chemin_sur_disque/plan.gif
Écriture
window.document.nom_formulaire.nom_element.value = texte;
exemple pour la saisie de textes sur plusieurs lignes
<TEXTAREA name=”adresse” rows=”3” cols=”40” wrap></TEXTAREA>
instruction JavaScript pour écrire
window.document.commande.adresse.value = « adresse non conforme »;
texte affiché dans le champ TEXTAREA de la page :
adresse non conforme
NB : le champ contiendra le texte affecté à l’élément, ce texte remplacera celui qui était affiché.
Lire le texte par défaut
Lorsqu’on définit les éléments de formulaires textuels il est possible de donner un texte par défaut qui
s’affiche lorsque le formulaire est chargé (par exemple un nombre de personnes à 4 ou une adresse à
n’oubliez pas de donner l’étage).
Pour obtenir dans un script le texte qui est affiché au chargement, il suffit d’écrire :
window.document.nom_formulaire.nom_element.defaultValue
Accès aux choix cochés par le client
cases à cocher (INPUT type= »checkbox »)
boutons radio (INPUT type= »radio »)
Edition 2005-2006
92/101
Recherche des choix cochés
window.document.nom_formulaire.nom_element[num_case].checked (retourne une valeur true/false)
window.document.nom_formulaire.nom_element[num_case].value (retourne le nom donné à la boîte)
exemple pour les boutons radio
Paiement par<BR>
<INPUT type= »radio » name= »paiement » value= »carte_bleue »>Carte Bleue<BR>
<INPUT type= »radio » name= »paiement » value= »visa »>Carte Visa<BR>
<INPUT type= »radio » name= »paiement » value= »master_card » checked>Master Card
instruction JavaScript pour rechercher qui est coché (un seul)
with(window.document.commande){
for(i in paiement)
if(paiement[i].checked == true)
window.alert(“radio = “+paiement[i].value);
}
la fenêtre d’alerte donne
radio = visa
exemple pour les boîtes à cocher
Avec :<BR>
<INPUT type= »checkbox » name= »assaisoner » value= »huile »>de l’huile piquante<BR>
<INPUT type= »checkbox » name= »assaisoner » value= »ketchup »>du ketchup<BR>
<INPUT type= »checkbox » name= »assaisoner » value= »moutarde » checked>de la moutarde<BR>
<INPUT type= »checkbox » name= »assaisoner » value= »mayonnaise »>de la mayonnaise
instruction JavaScript pour rechercher qui est coché (une ou plusieurs)
var liste=””;
for(i in assaisoner)
if(assaisoner[i].checked == true)
liste += assaisoner[i].value + “, “;
window.alert(“checkbox = “+liste);
}
la fenêtre d’alerte donne checkbox = huile, moutarde,
Cocher ou décocher un choix
window.document.nom_formulaire.nom_element[num_case].checked = true/false
exemple pour les boîtes à cocher
instruction JavaScript qui décoche ce qui est coché et coche ce qui ne l’est pas
for(i in assaisoner)
if(assaisoner[i].checked == true)
assaisoner[i].checked = false;
else
assaisoner[i].checked = true;
}
décoche huile, moutarde et coche ketchup, mayonnaise
Obtenir le choix coché par défaut au chargement
window.document.nom_formulaire.nom_element[num_case].defaultChecked
Accès aux choix dans les listes de choix
L’élément de formulaire concerné est SELECT
Lire les choix
window.document.nom_formulaire.nom_element.options[num_case].selected (retourne une valeur
true/false)
window.document.nom_formulaire.nom_element.options[num_case].value (retourne le nom donné au
choix)
window.document.nom_formulaire.nom_element.length (retourne le nombre de choix possibles dans la
liste)
window.document.nom_formulaire.nom_element.options[num_case].text (retourne le texte HTML
associé)
Edition 2005-2006
93/101
exemple pour une liste à choix unique (qui fonctionne pour les multiples également)
<SELECT name= »nourriture »>
<OPTION value= »pizza »>pizza
<OPTION value= »poulet_frites »>poulet / frites
<OPTION value= »moules_frites »>moules / frites
</SELECT>
instruction JavaScript
var liste = “”;
for(i=0; i<nourriture.length; i++)
if(nourriture.options[i].selected == true)
{
liste += nourriture.options[i].value;
liste += « (texte HTML : « +nourriture.options[i].text+ »), « ;
}
window.alert(« liste de choix = « +liste);
}
liste de choix = poulet_frites (texte HTML : poulet/frites),
NB : pour les listes à choix unique il est possible d’obtenir directement quel est le choix sélectionné avec :
window.document.nom_formulaire.nom_element.selectedIndex
exemple pour une liste à choix unique
instruction JavaScript
choix = nourriture.options[nourriture.selectedIndex].value;
window.alert(« choix selectionne = « +choix);
}
choix selectionne = poulet_frites
Modifier les choix
window.document.nom_formulaire.nom_element.options[num_case].selected = true/false
Dans l’exemple ci-dessous nous supposons qu’on peut choisir plusieurs plats (attribut multiple dans
SELECT)
exemple pour une liste à choix multiples
<SELECT name= »nourriture » multiple>
<OPTION value= »pizza »>pizza
<OPTION value= »poulet_frites »>poulet / frites
<OPTION value= »moules_frites »>moules / frites
</SELECT>
instruction JavaScript qui désélectionne ce qui était choisi et sélectionne ce qui ne l’était pas
for(i=0; i<nourriture.length; i++)
if(nourriture.options[i].selected == true)
nourriture.options[i].selected = false;
else
nourriture.options[i].selected = true;
}
si pizza et poulet/frites étaient sélectionnés, alors ils sont désélectionnés et moules/frites devient sélectionné
Accès aux textes sur les boutons
boutons
boutons
boutons
boutons
de soumission (INPUT type= »submit »)
de soumission avec image(INPUT type= »image »)
d’annulation (INPUT type= »reset »)
simples (INPUT type= »button »)
window.document.nom_formulaire.nom_element.value
exemple pour le bouton Informations
Edition 2005-2006
94/101
<INPUT type=”button” value=”Informations” name=”binfo”>>
texte = binfo.value;
texte contient
Informations
Accès par tableau
Nous avons pour l’instant fait des accès par nom, il est possible d’accéder aux éléments du formulaire par
l’intermédiaire du tableau forms[num_form].
Informations sur le formulaire :
window.document.forms[0].elements.length (nombre d’éléments dans le formulaire)
window.document.forms[0].elements[i].type (type de l’élément i)
Pour les types text, password, hidden, file, textarea :
window.document.forms[0].elements[i].name (nom donné à l’élément)
window.document.forms[0].elements[i].value (texte dans l’élément)
Pour les types radio, checkbox :
window.document.forms[0].elements[i].ckecked (pour savoir si l’élément est coché)
window.document.forms[0].elements[i].value (valeur de l’élément)
Pour les types select unique et multiple :
window.document.forms[0].elements[i].options[j].selected (pour savoir si une option est sélectionnée)
window.document.forms[0].elements[i].options[j].value (valeur de l’option)
Pour les types button, submit, reset :
window.document.forms[0].elements[i].value (texte sur l’élément bouton)
Nous donnons un exemple ci-dessous qui parcourt tous les éléments contenus dans le formulaire numéro
0 (il peut y en avoir plusieurs dans une page) et qui fait des traitements en fonction du type d’éléments
du formulaire. Cet exemple se contente de donner les choix et textes entrés par l’utilisateur dans un
fichier HTML (nous ne donnons pas ici la méthode pour l’affichage, seul le code qui permet de traiter le
formulaire est fourni).
with(window.document.forms[0]) //pour eviter les repetitions
{
for (i=0; i<elements.length; i++) //pour tous les elements
{
type = elements[i].type; //recuperer le type de l’element i
switch (type)
{
//donnees textuelles
case “text” :
case “password” :
case “hidden” :
case “file” :
case “textarea” :
texte += “<BR>”+elements[i].name+” = “+elements[i].value;
break;
//choix par cochage
case « radio » :
case “checkbox” :
if(elements[i].checked == true)
texte += “<BR>”+elements[i].name+” = “+elements[i].value;
break;
Edition 2005-2006
95/101
//choix unique ou multiple dans une liste
case “select-one” :
case “select-multiple” :
for(j=0; j<elements[i].options.length; j++)
if(elements[i].options[j].selected == true)
texte += “<BR>select = “+elements[i].options[j].value;
break;
//boutons
case “submit” :
case “reset” :
case “image” :
case “button” :
texte += “<BR>”+elements[i].type+” = “+elements[i].value;
break;
default : texte += « <BR><B>cas « +type+ » non traite</B> »;
}
}
}
select = poulet_frites
nombre_personnes = 4
select = 21
assaisoner = huile
assaisoner = moutarde
paiement = visa
pwd = 12345
adresse = chez moi
fichier = /Dessins/plan.gif
submit = Commander
reset = Effacer
button = Informations
NB : d’autres informations sont disponibles sur le formulaire :
window.document.forms[0].action (valeur de l’attribut action du formulaire numéro 0)
window.document.forms[0].method (valeur de l’attribut method du formulaire numéro 0)
window.document.forms[0].name (valeur de l’attribut name du formulaire numéro 0)
window.document.forms[0].target (valeur de l’attribut target du formulaire numéro 0)
Edition 2005-2006
96/101
Événements dans un formulaire
Lorsque le client clique dans le formulaire, modifie des champs, coche des boutons radio..., il est possible
d’exécuter du code JavaScript. Ce code sert généralement à :
vérifier la validité des données entrées (pas de lettres dans un numéro de fax)
donner des informations (affichage d’un message dans la barre d’état lorsqu’on clique dans un champ
de formulaire)
Les événements se placent dans l’élément de formulaire comme des attributs, ils sont de la forme
nom_evenement = « code JavaScript », le code JavaScript étant la plupart du temps un appel à une
fonction JavaScript définie plus haut dans la page.
ex :
<INPUT type=”button” value=”Informations” name=”binfo” onClick=”Info()”>
onClick (clic sur un élément)
Éléments concernés :
cases à cocher (INPUT type= »checkbox »)
boutons radio (INPUT type= »radio »)
boutons de soumission (INPUT type= »submit »)
boutons de soumission avec image (INPUT type= »image »)
boutons d’annulation (INPUT type= »reset »)
boutons simples (INPUT type= »button »)
événement onClick pour un bouton Informations
<HTML>
<HEAD>...</HEAD>
<!-function Info()
{
window.alert(« Nos produits sont en general non perimes »);
}
// -->
</SCRIPT>
<BODY>
<FORM ...>
...
<INPUT type=”button” value=”Informations” name=”binfo” onClick=”Info()”>
...
</FORM>
</BODY>
</HTML>
lorsque le client clique sur le bouton Informations, une fenêtre d’alerte apparaît avec le texte :
non perimes
Nos produits sont en general
événement onClick pour un bouton submit
fonction JavaScript déclarée dans <SCRIPT...>...</SCRIPT>
function Confirmer()
{
return window.confirm(« Voulez-vous vraiment soumettre ? »);
}
élément de formulaire dans l’élément FORM
<INPUT type=”submit” value=”Commander” onClick=”return Confirmer()”>
lorsque le client clique sur le bouton Commander, une fenêtre de confirmation apparaît avec le texte, s’il choisit d’annuler, alors la
soumission est annulée grâce aux deux return
Edition 2005-2006
97/101
événement onClick pour les boutons radio
fonction JavaScript déclarée dans <SCRIPT...>...</SCRIPT>
function AffStatus(choix)
{
switch (choix)
{
case 1 : window.status = « avez-vous vraiment une carte bleue ? »; break;
case 2 : window.status = « avez-vous vraiment une carte visa ? »; break;
case 3 : window.status = « avez-vous vraiment une master card ? »; break;
default : ;
}
}
éléments de formulaire dans l’élément FORM
<INPUT type= »radio » name= »paiement » value= »carte_bleue » onClick= »AffStatus(1) » >Carte Bleue
<INPUT type= »radio » name= »paiement » value= »visa » onClick= »AffStatus(2) »> Carte Visa
<INPUT type= »radio » name= »paiement » value= »master_card » checked onClick= »AffStatus(3) »>Master Card
lorsque le client clique sur le bouton radio carte bleue, le texte
barre d’état
avez-vous vraiment une carte bleue ? est affiché dans la
onChange (modification dans l’élément)
listes (SELECT)
événement onChange pour un champ masqué
<INPUT type=”password” size=”6” maxlength=”6” name=”pwd” onChange=”window.status=this.value”>
lorsque le client à donné son code et qu’il quitte le champ, son code apparaît en clair dans la barre d’état.
onFocus, onBlur (attribution, perte du focus)
listes (SELECT)
événement onFocus pour un champ masqué
<INPUT type= »password » size= »6 » maxlength= »6 » name= »pwd » onFocus= »window.status=’Entrez votre code’ »>
lorsque le client clique dans le champ, le message
Entrez votre code apparaît dans la barre d’état.
onSelect (sélection dans un champ)
événement onSelect pour un champ masqué
<INPUT type=”password” size=”6” maxlength=”6” name=”pwd” onSelect=”status=’champ password selectionne’”>
lorsque le client sélectionne dans le champ, le message
champ password selectionne apparaît dans la barre d’état.
onReset, onSubmit
Edition 2005-2006
98/101
Lorsque le formulaire est soumis en appuyant sur le bouton de soumission il est possible d’appeler un
événement onSubmit (pour vérifier par exemple la validité des données avant d’envoyer le formulaire,
pour demander la confirmation de la soumission).
L’événement reset est appelé lorsqu’on a cliqué sur le bouton annuler.
événement onSubmit
<FORM name=”commande” action=”script.php3” onSubmit=”return Verif()”>
lorsque le client clique sur le bouton Commander, une fonction de vérification Verif() est appelée, si elle retourne la valeur true, le
formulaire est envoyé au serveur, sinon la soumission est annulée.
Méthodes
nom
rôle
blur()
click()
focus()
select()
enlève le focus d’un champ du formulaire
simule un clic de souris sur le champ du formulaire
attribue le focus à un champ du formulaire
sélectionne le contenu d’un champ du formulaire
window.document.nom_form.nom_element.focus()
il existe également les méthodes submit() et reset()
Activer ou désactiver des contrôles
Il est possible de désactiver ou d’activer des contrôles d’un formulaire pour les éléments INPUT, BUTTON,
TEXTAREA et SELECT en réponse à un événement.
Edition 2005-2006
99/101
Vérification d’un formulaire
Lorsqu’un client complète un formulaire il peut faire des erreurs. Si les réponses sont analysées côté
serveur, chaque erreur va entraîner une connexion inutile : le serveur reçoit les données, il les analyse et
retourne un message d’erreur au client qui doit corriger, soumettre à nouveau au serveur et ainsi de suite
jusqu’à ce que les données soient jugées correctes.
JavaScript permet d’effectuer les vérifications du côté du client avant l’envoi au serveur.
Quelques exemples de vérifications
le champ ne doit pas être vide
le champ doit comporter uniquement des chiffres
le champ doit comporter uniquement des lettres
la valeur du champ est un nombre compris entre deux bornes
Quand effectuer les verifications ?
quand un champ est modifié (onChange)
quand le formulaire est soumis (onSubmit), ne pas oublier de mettre un return pour bloquer la
soumission
Les méthodes focus() et select() peuvent être utilisées pour attribuer le focus et sélectionner une donnée
erronée, le client peut alors retaper le texte directement (il n’a pas besoin d’aller cliquer avec la souris
dans le champ, de sélectionner tout le texte et de le retaper).
fonctions dans la partie <SCRIPT>...</SCRIPT>
function VerifNb(chaine, texte)
{
var regnb = /^\d{1,}$/;
if(!regnb.test(chaine))
{
window.alert(texte); return false;
}
else
return true;
}
function Verif()
{
with(window.document.commande) //nom formulaire
{
if(!VerifNb(nombre_personnes.value, »Nombre de personnes en chiffres »))
{
nombre_personnes.focus(); nombre_personnes.select(); return false;
}
if(!VerifNb(pwd.value, »Code de carte de credit en chiffres »))
{
pwd.focus(); pwd.select(); return false;
}
if(fichier.value.length == 0 )
alert(« Vous auriez pu nous envoyer un plan, vous risquez d’etre livre en retard ! »);
if(adresse.value.length == 0)
{
alert(« On vous livre ou ??? »);
return false;
}
}
return true;
}
code HTML
<FORM name=”commande” action=”script.php3” method=”post” enctype=”text/plain” onSubmit=”return Verif()”>
...
pour <INPUT type= »text » size= »2 » maxlength= »2 » name= »nombre_personnes »
onChange= »VerifNb(this.value,’nombre de personnes incorrect’) »>
personnes
Edition 2005-2006
100/101
...
Edition 2005-2006
101/101

Principe de base de la création de page HTML Embellissement par l

Transcription

Documents pareils

Tests Php – MySQL – JavaScript – HTML/CSS 1. Php Choisir une

Développeur Web front-end (HTML5/CSS/ Javascript)

Job Description - Journaliste Web Mission : Profil : Mission

Pré-lancement Contenu et style Typographie et Design

MONECHO - Stage Dev Informatique 2016

Développement mobile avec HTML, CSS et JavaScript

dreamweaver perfectionnement

Cours en ligne Développement web PHP

Réalisation d`un livre d`or - BTS Iris

TD1 : Rappels Web, HTML, CSS et JavaScript