Développement Web

Dr Ibrahima FALL
[Link]@[Link]
Département Génie Informatique, Ecole Supérieure Polytechnique
Université Cheikh Anta Diop de Dakar
BP 5085 Dakar-Fann, Sénégal

mise a jour : 12/2016

1
 Contenu de l’enseignement

PLAN
n Généralités: le Web, les applications Web
n Les technologies “côté client”
¨ HTML 4
¨ XML
¨ XHTML
¨ CSS
¨ JavaScript
¨ HTML5

n Les technologies “côté serveur”

¨ PHP (v5)
¨ MySQL

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 2

 Evaluation

BIBLIOGRAPHIE
n Jean Engels, XHTML et CSS - Cours et exercices, Eyrolles,
n Mathieu Nébra, Réussir son site web avec XHTML et CSS,
Eyrolles,
n Raphael Goetter, CSS2, pratique du design Web, Eyrolles,
2007
n Michel Plasse, Développez en Ajax, Eyrolles,
n W3C, HTML 5, A vocabulary and associated APIs for HTML
and XHTML, W3C working draft 11 oct. 2012, disponible sur
le site du W3C
n WHATWG, HTML Living standard Last updated 11 oct. 2012,
disponible sur le site du WHATWG
n … Et d’innombrables ressources disponibles sur le Web
AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 3
 Evaluation

EVALUATION
n 50% Contrôle continu
¨ des TPs notés
¨ 1 projet
n 50% Examen
¨ Sur papier

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 4

 Organisation

ORGANISATION
n 40h de cours/TD/TP
¨ 20 séances de 2h

n Au nom du respect mutuel

¨ Être en classe à l’heure prévue par l’emploi du temps
n Prière de ne pas rentrer en classe une fois le cours commencé
¨ Se garder de manger/boire en classe
¨ Ne pas être l’auteur de dérangements sonores (portables, bruits
de machines, etc.)
¨ Se passer de son téléphone et d’Internet

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 5

 Chapitre 1
Généralités: le Web, les
applications Web

6
 Chap. 1 – Généralités

Qu’est ce que le Web?

n Le WWW (World Wide Web)
¨ La toile d’araignée mondiale
¨ Objectif initial: mettre en ligne des documents variés
¨ Un service Internet
n Dédié à l’échange de documents hypertextes (pages Web)

n Qu’est ce que Internet?

¨ Le grand réseau et ses services
¨ Restrictions possibles: intranet, extranet

n Autres services Internet

¨ La messagerie
¨ Le partage de fichiers
¨ etc.

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 7

 Chap. 1 – Généralités

3 «Piliers» pour le WEB

n Un langage de composition de documents hypertextes
¨ HTML
¨ Plusieurs techniques associées

n Un protocole
¨ HTTP
¨ Régit le fonctionnement
¨ Client/serveur

n Un système de nommage de ressources

¨ URL (URN, URI)
L’étude de HTML et des techniques associées fait l’objet du chapitre 2 du cours. Nous
allons dans la suite de cette section voir les 2 autres principes (HTTP URL)

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 8

 Chap. 1 – Généralités

HTTP
n HyperText Transfer Protocol
n Protocole client/serveur
¨ Serveur HTTP (serveur Web)
¨ Client HTTP (client Web)

navigateur serveur Web (démon httpd, …)

Protocole de communication (HTTP)

(Hyper Text Transfert Protocol)

(1) requête http

client Serveur

(2) réponse : Document HTML

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 9
 Chap. 1 – Généralités

Variantes HTTP
n Le protocole définit le format de même que toutes les
caractéristiques des messages échangés entre clients et
serveurs HTTP
n Plusieurs versions
¨ Actuellement HTTP 1.1
n RFC 2616
¨ Plusieurs techniques associées

n Une version sécurisée

¨ HTTPS

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 10

 Chap. 1 – Généralités

HTTP: mode non connecté

n Le protocole définit le format de même que toutes les
caractéristiques des messages échangés entre clients et
serveurs HTTP

Demande d’une page web

Chargement de la page web

Demande d’une ressource

(Ex: image)

Envoi de la ressource

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 11

 Chap. 1 – Généralités

Désignation des ressources Web: URL

n URL: Uniform Resource Locator

¨ désignation d’une page ou de toute autre ressource sur
un internet (exécutable, fic script...)
¨ 3 parties + [des arguments]
n arguments=options ou paramètres optionnels

Ex simple : http:// /

protocole nom local

nom du serveur de la page
sur le serveur
sur lequel
est implantée la page

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 12

 Chap. 1 – Généralités

Désignation des ressources Web: URL

n L’URL peut répondre aux questions suivantes

¨ quelle est la page appelée ? (nom de la page)
¨ Où est localisée cette page? (nom du serveur)
¨ Comment peut-on y accéder? (chemin, protocole)
¨ Comment l’interpréter (extension)
n Désignation unique pour chaque page
¨ Aucune ambigüité possible

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 13

 Chap. 1 – Généralités

Protocoles reconnus

Protocole Type Exemple

http document hypertexte [Link]

ftp transfert de fichier [Link]

file accès au système de fichiers local [Link]

news accès à un forum de discussion news:[Link]

news accès à un article dans un forum de discussion
news:AB02224321122@[Link]
mailto envoi de courrier [Link]
telnet connexion à distance telnet ://[Link]
etc.

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 14

 Chap. 1 – Généralités

Forme générale d’une URL

protocole"://"
[utilisateur[":"motdepasse]@](nom|adresseIP)[:port]
["/"chemin]["/"nomdefichier][#ancre][?paramètres]

n Format des URLs

¨ Voir RFCs 1738 et 1808
¨ Voir [Link]
n Exemples
[Link] (nom du serveur)
[Link] (adresse IP du serveur)
[Link] (paramètre, +: blanc)
[Link] (paramètres, &: et)
[Link] (n° port de comm. du serveur)
[Link] (ancre - pointeur interne)
AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 15
 Chap. 1 – Généralités

Numéro de port
n L'adresse IP identifie une machine
n Le numéro de port identifie une application sur une
machine
¨ utilité ?

n Socket TCP/IP = adresse IP + Numéro de port

¨ TCP/IP : ensemble des règles de communication sur Internet
n se base sur TCP et IP

n Les numéros de ports sont codés sur 16 bits

¨ Leur assignation standard est mise au point par l'IANA (Internet Assigned
Numbers Authority)
n Exemple :
¨ les numéros de de 0 à 1023 sont ceux des «ports reconnus» ou réservés («Well Known
Ports»).
¨ 21 ftp, 23 telnet, 25 smtp, 53 dns, 80 http, etc.

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 16

 Chap. 1 – Généralités

Type de contenu d’une page Web

n MIME : Multipurpose Internet Mail Extensions
¨ Nouvelle appellation: Internet Media Type, Content-type

Les navigateurs reconnaissent

les types de données à
afficher.
En fonction d’extensions
associées, ils affichent eux
mêmes le contenu
ou font appel à un composant
externe.

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 17

 Chap. 1 – Généralités

Résolution de nom
n Chaque machine sur internet est associée à un DNS qui fournit
l’adresse IP de chaque nom (Domain Name System)

(1) adresse IP: [Link]

(1’) nom: [Link] [Link]

Serveur DNS

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 18

 Chap. 1 – Généralités

Profession du webmestre

Maintenance

Pages HTML-XML

Scripts CGI
Le client Le serveur
Base de données
FPage statique : prédéfinie Configuration
FPage dynamique : créée par programme
(exemple : réponse via une requête à une BD)

Page19

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 19

 Chapitre 2
HTML (v4)

Contenu: Structure générale,

Caractères, Couleurs, Séparateurs,
Polices, Liens, Images, Tableaux,
Listes, Cadres, Formulaires, Méta-
balises.

20
 Chap. 2 – HTML v4

Les documents HTML

n Présentation
¨ Composite: texte
- image - son - vidéo
¨ Formatage simple
n Structure des documents
¨ Repose sur des étiquettes (tags)
n Apport
¨ L’interactivité (avec les lien hypertextes)

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 21

 Chap. 2 – HTML v4

Les documents HTML

Entête du document

titre du document

Corps du document

n Balises
¨ <unTag> … </fin_unTag>
¨ 0 ou plusieurs attributs (portés par la balise ouvrante)
n <unTag attr1=“val1” attr2=“val2” … attr3=“val3”>
n Non sensible à la casse et peut contenir des options
n Commentaires
¨ <--commentaire d'un fichier HTML-->

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 22

 Chap. 2 – HTML v4

Corps d’un document HTML: <Body>

n Forme générale
¨ <BODY > …contenu… </BODY>
n Attributs
¨ bgcolor : couleur de fond
¨ text : couleur du texte
¨ background : URL de l'image en fond d'écran
¨ link : couleur des liens non encore visités
¨ vlink : couleur des liens déjà visités
¨ alink : couleur des liens lorsque l'on clique
n Exemple <body bgcolor="#FFFFFF" link="#FFFFFF"
vlink="#FFFFFF" alink="#FFFFFF"
BACKGROUND="images/[Link]">
AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 23
 Chap. 2 – HTML v4

Code des caractères

n Jeu de caractères connu

¨ ISO-8859-1 (Latin-1)
n Contient tous les
caractères accentués des
langues latines (sauf œ)
n Encodage de caractères é &eacute <h1>Les accents aigus
¨ Le codage des è &egrave; &eacute; passent</h1>
<> &lt; &gt; <h1>Les accents graves
caractères spéciaux est & &amp; &egrave; passent aussi
utile pour les protocoles </h1>
ou quand on produit des
pages par programme Espace %20;
' %39;
n Le codage directe des " %34

caractères est possible [Link]

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 24

 Chap. 2 – HTML v4

Gestion des couleurs

n 2 solutions
¨ Noms en clair des couleurs: green, yellow,
purple, red, blue, …
n (plus simple mais moins précis)
¨ Code RGB des couleurs: forme #RRGGBB (3
codes hexa : Rouge-Vert-Bleu)
n Le résultat obtenu n’est pas forcément le
même selon les navigateurs !!!
n Utilisation <FONT color = " "#FF0000 " ...>… </FONT> [texte rouge]
<BODY bgcolor = " "#00FF00 " ...> … </BODY> [corps fond vert]
<TD bgcolor = " "#0000FF " ...>…</TD> [cellule fond bleu]

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 25

 Chap. 2 – HTML v4

Codes RGB des couleurs

n On peux aussi utiliser un logiciel de gestion

d'image pour connaître les valeurs de
couleur RGB pour un objet prédéfini
n Exemples pour certaines couleurs

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 26

 Chap. 2 – HTML v4

Gestion du fond de page

n 2 approches
¨ La couleur
n <BODY BGCOLOR=“#$$$$$$”>
¨ $$$$$$= code hexadécimal RGB
¨ La texture
n <BODY BACKGROUND=“URL”>
¨ Crée une mosaïque en fond
¨ Exemple
<BODY BACKGROUND="../image/[Link]">

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 27

 Chap. 2 – HTML v4

Structuration du document
n <H?>...</H?>
¨ 6 niveaux différents de titre (H1..H6)
n <P> paragraphe </P>
¨ Délimiteur de paragraphe pour formater chaque paragraphe en modifiant l'alignement
n <P align="left"|"center"|"right"> ... </P>
n <HR>
¨ insère une ligne de séparation
n Autres
¨ <CENTER> …texte... </CENTER>
n Centrage d'un texte quelconque
¨ <BLOCKQUOTE>
n Mise en retrait du texte
¨ <BR>
n Coupure forcée d'une ligne (au sein d'un paragraphe)
n Il existe aussi des styles prédéfinis
¨ code, définition, citation, …

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 28

 Chap. 2 – HTML v4

Exemples de séparateurs

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 29

 Chap. 2 – HTML v4

Exemples niveaux de titre

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 30

 Chap. 2 – HTML v4

Exemples de styles prédéfinis

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 31

 Chap. 2 – HTML v4

Gestion de la police de caractères

n <BIG> …texte... </BIG>
¨ « Grande" police
n <SMALL> …texte... </SMALL>
¨ « Petite" police
n <FONT size="?"> … </FONT>
¨ Taille de police de 1 à n (n est la plus grande)
n <FONT size="+?">… </FONT>
¨ Taille relative par rapport à la taille courante
n <FONT size="-?">… </FONT>
¨ Taille relative par rapport à la taille courante
n <BASEFONT size="?">
¨ Initialise la taille courante (par défaut size="3“)
n <B> … gras... </B> , <I> … italique... </I>, <U> … souligné... </U>,
etc.
n <PRE> …texte préformaté (à ne pas reformater)… </PRE>

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 32

 Chap. 2 – HTML v4

Exemples: changements de taille de police

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 33

 Chap. 2 – HTML v4

Liens hypertextes
n <A HREF="url"> lien - texte ou image </A>
¨ Permet d'aller vers un autre document en cliquant sur
le texte ou l'image
n <A HREF="XXX#signet"> texte ou image </A>
¨ XXX est une url
n Lien vers un autre document
¨ XXX=rien
n Lien vers le même document
¨ "#" seul
n Lien vers la position courante
n Signet: bookmark ou nom du pointeur dans le
document
¨ <A name=“signet”>Texte</A>

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 34

 Chap. 2 – HTML v4

Exemples de liens hypertextes

Lien externe

Liens internes

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 35

 Chap. 2 – HTML v4

Images simples
n <IMG SRC="url“>
¨ Exemple: <IMG SRC="[Link] »>
n Insère l'image [Link]

n Attributs optionnels
¨ ALIGN="top", "middle", "bottom", "left" ou "right”
n aligne l'image par rapport à la ligne

¨ HEIGHT=, WIDTH=
n hauteur, largeur de l'image

¨ ALT="explication concise pour la figure”

n Tolérance pour les browsers non graphiques et
explication pendant le chargement (le survol de la forme
fait apparaître le texte de ALT)

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 36

 Chap. 2 – HTML v4

Liens et images: exemple

Le second lien lance le gestionnaire de mail

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 37

 Chap. 2 – HTML v4

Images “Carte” (MAP)

n <IMG SRC="url” USEMAP=“nom de la
carte”>
¨ Indique où se trouve la carte

n <MAP NAME="nom de la carte”>... zones

graphiques (shapes)... </MAP>
n Zones graphiques
¨ <AREA SHAPE="RECT|CIRCLE|…" COORDS=",,,"
HREF="URL” >
n permet de décrire les liens par zone

n Outils de mapping d’image

¨ Exemple : [Link]

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 38

 Chap. 2 – HTML v4

MAP: exemple

Pour
[Link]
AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 39
 Chap. 2 – HTML v4

Listes
n Non ordonnées
¨ <UL>Eléments de la liste</UL>
n Attribut optionnel
¨ TYPE="DISC", "SQUARE" ou "CIRCLE

n Ordonnées
¨ <OL>Eléments de la liste</OL>
n Attribut optionnel
¨ TYPE="1" (décimal), "a" (minuscule), "A"(majuscule), "i" ou
"I" (romain)

n Répertoire
¨ <DIR>Eléments de la liste</DIR>
n Réalise un décalage

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 40

 Chap. 2 – HTML v4

Listes: Exemple

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 41

 Chap. 2 – HTML v4

Tableaux (1/2)

<TABLE>
<TR>
<TD>contenu de la cellule 1-1</TD>
Ligne 1
<TD>contenu de la cellule 1-2</TD>
</TR>
<TR>
<TD>contenu de la cellule 2-1</TD
Ligne 2
<TD>contenu de la cellule 2-1</TD>
</TR>
...

</TABLE>

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 42

 Chap. 2 – HTML v4

Tableaux (2/2)
n Quelques attributs
¨ Border
n Définir l'épaisseur du cadre
¨ Cellspacing, Cellpadding
n Déterminer l'espace entre le texte et le bord
¨ Width
n Fixer la largeur du tableau (en pixel ou en %)
¨ Colspan, rowspan
n Fixer le débordement d'une cellule sur la colonne ou la ligne suivante

n Les éléments spécialisés

¨ <TH> ..en-tête...</TH>
n Donner un titre au tableau
¨ <CAPTION> … La légende...</CAPTION>
n Décrire de façon succincte le contenu du tableau

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 43

 Chap. 2 – HTML v4

Tableaux: Exemple

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 44

 Chap. 2 – HTML v4

Cadres (½)
n <FRAMESET>
¨ Le tag principal
¨ Remplace le tag BODY (<>...</>)
(pour le premier niveau) <FRAMESET ...>
<NOFRAME>
n NOFRAME Comportement pour les
¨ Tag secondaire browsers noframe
¨ Indique le comportement à adopter </NOFRAME>
dans le cas d'un browser <FRAME...> Description par attribut du cadre 1
...
NOFRAME
<FRAME...> Description par attribut du cadre n
</FRAMESET>
n FRAME
¨ Tag secondaire
¨ Autant que de cadres du frameset
¨ Décrit un cadre de la fenêtre et sa
gestion

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 45

 Chap. 2 – HTML v4

Cadres (2/2)
n Les attributs de FRAMESET
¨ Rows, cols
n Découper le cadre en plusieurs sous-cadres
¨ FrameBorder
n Definir la bordure du cadre principal (yes | no)

n Les attributs de FRAME

¨ Src
n Fournir l’url de la page à charger par défaut dans cette fenêtre
¨ Name
n Donner un nom à la fenêtre
¨ Scrolling
n Permettre un défilement ou non
¨ Noresize
n Interdir de modifier la taille
¨ Frameborder
n Fixer la taille de la bordure des fenêtres

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 46

 Chap. 2 – HTML v4

Cadres: exemple

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 47

 Chap. 2 – HTML v4

Cadres et liens
n <A HREF= "page" target="fenetre">

Indique le nom du cadre servant pour l ’affichage de la page

n Valeurs prédéfinie de target:

¨ _top
n Niveau le plus haut (peu éliminer ainsi un découpage en frame)
¨ _parent
n Niveau supérieur
¨ _self
n Même cadre
¨ _blank
n Nouvelle fenêtre

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 48

 Chap. 2 – HTML v4

Cadre inline:
n <iframe name=“ifr“ src=“url” width=“l” height=“h”
scrolling=“yes I no”…>
¨ Insère une page à l’intérieur d’une autre

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 49

 Chap. 2 – HTML v4

Formulaires
n <FORM>…</FORM>
¨ Elément principal
¨ Agit comme conteneur pour les commandes
¨ Plusieurs attributs
n Name, action, method, enctype, …

n Les commandes
¨ <INPUT>
n Attributs: name, type, size, maxlength,…
n Plusieurs types de INPUT
¨ Text
¨ Button
¨ Image
¨ Checkbox
¨ Radio
¨ File
¨ Password
¨ Hidden
¨ Submit
¨ Reset
¨ <TEXTAREA>
n Attributs: name, cols, rows, …
¨ <LABEL> (pas une commande)
n Attributs: name, …

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 50

 Chap. 2 – HTML v4

Formulaires: exemple

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 51

 Chap. 2 – HTML v4

Entête de pages HTML: balises META

(1/2)
n Leur rôle
¨ Indiquer le titre de la page et fournir un résumé de son
contenu
¨ Renseigner les navigateurs et/ou les moteurs de
recherche sur la langue utilisée dans une page, le
type de document consulté, le codage de caractère
utilisé, l'auteur de la page, ...
¨ Rediriger automatiquement les navigateurs vers une
autre page
¨ Interdire la mise en cache ou l'indexation d’une page
par les moteurs,
¨ Etc.

n Elles sont placées entre <HEAD> et </HEAD>

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 52

 Chap. 2 – HTML v4

Entête de pages HTML: balises META

(2/2)
n <TITLE>
¨ Pas considéré comme balise méta
n Mais joue un important rôle dans le référencement

n <META NAME="nom-de-la-propriété"
CONTENT="valeur" >
¨ Plusieurs propriétés
n Author, Category, Language, Description, Keywords, …

n <META HTTP-EQUIV="refresh/expires”
CONTENT="précision" >
¨ Valeurs possibles pour HTTP-EQUIV
n Content-type, Content-language, refresh, pragma, …

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 53

 Chap. 2 – HTML v4

Balises META: exemple

Les moteurs de recherche
utilisent les mots-clefs pour indexer les pages

Actualise la page toute les 5 secondes Après 5s, oblige le navigateur à redemander
une URL (autre page à charger, …)

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 54

 Chapitre 3
XML, XHTML, CSS

Contenu: Aperçus de XML,

de XHTML et de CSS

55
 Chap. 3 – XML, XHTML, CSS

Critique de HTML

C Langage simple, lisible ! (texte formaté)

C Compatible WEB !

D Non extensible ! (Nombre fixe de balises et attributs)

D Mélange des genres !

(i.e. balise de structuration et de mise en forme : <H1> title 1 </H1>)

D Incompatibilité entre navigateurs et versions !

- structure (ordre des balises),
D Limité à la struturation de pages web - données (type, valeur),
- sémantique

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 56

 Chap. 3 – XML, XHTML, CSS

XML
Définition intuitive d'XML:

- variante de HTML généralisé !

(compatibilité WEB, lisibilité, syntaxe)
Ø XML : - sous-ensemble de SGML !
(flexibilité, rigueur)

Ø langage à balises configurables

Ø pour la représentation hiérarchique de données,

Ø [Link]

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 57

 Chap. 3 – XML, XHTML, CSS

Exemple XML : Une lettre

PROLOGUE
<?xml version = "1.0” encoding="ISO-8859-1"?>
document XML
instruction de traitement jeu de caractères utilisé
(latin)
balise début
CORPS
<lettre> données balisées
<lieu> Somewhere in space</lieu>
<expéditeur> Ibrahima Fall </expéditeur>
<destinataire> Mamadou Camara </destinataire>
<introduction> Dear brother, </introduction>
<corps_lettre> … May the force be with you. </corps_lettre>
<signature url=“[Link]” />
balise vide (sans données)
</lettre> balise fin Attribut
AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 58
 Chap. 3 – XML, XHTML, CSS

Autre document XML

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 59

 Chap. 3 – XML, XHTML, CSS

Principes
n Ensemble non fini de balises
¨ L’utilisateur peut créer de nouvelles balises

n Définition de grammaires : XML est un Meta-

Langage
¨ MathML, NewsML, XSL, XQuery, …, XHTML,…

n Séparation de la forme et du fond

¨ Un document XML peut être constitué de deux
entités (le fond et la forme)

n Les documents doivent être bien formés

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 60
 Chap. 3 – XML, XHTML, CSS

Document bien formé

n Présence d’un prologue
n Existence qu’un seul élément racine
(élément document)
n Les attributs sont associés aux balises
ouvrantes
n Toute balise qui s’ouvre doit se refermer
¨ Avec respect des règles d’imbrication

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 61

 Chap. 3 – XML, XHTML, CSS

Grammaire

Deux façons de définir une grammaire XML

n DTD
¨ Langage de définition de grammaire XML
¨ Largement utilisé
¨ Expression faible (type, structure)
n XML Schéma
¨ Langage XML de définition de grammaire XML
¨ De + en + utilisé
¨ Expression puissante (type, structure, héritage)

62
AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link]
 Chap. 3 – XML, XHTML, CSS

Exemple de document XML avec

DTD externe

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 63

 Chap. 3 – XML, XHTML, CSS

DTD: A faire

n Trouver sur Internet une DTD de HTML 4 (ou XHTML)

n La consulter (1/4 d’heure)
n Décrire les éléments HTML que vous avez identifiés?

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 64

 Chap. 3 – XML, XHTML, CSS

Espace de noms

n Mécanismes permettant de créer des

regroupements logiques de balises XML
¨ permet d’avoir deux fois le même nom de balise
n Un espace de noms est défini dans n’importe
quelle balise par l’attribut xmlns et par une URI.
n Dans un document XML, un espace de noms est
identifié par un nom logique, les balises
appartenant à cet espace doivent alors être
préfixée par ce nom logique.
¨ Exemple: <if:body xmlns:if="[Link]

65
AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link]
 Chap. 3 – XML, XHTML, CSS

XML est un standard de fait

n Un standard d'échange
¨ Lisible : texte balisé avec marquage
¨ Clair : séparation du fond et de la forme
¨ Extensible : supporte les évolutions applicatives

n Développé par le W3C

¨ Pour le Web (Internet, Intranet)
¨ S'étend à l'entreprise et ses partenaires
n Supporté par les grands constructeurs
¨ IBM, Microsoft .net, SUN, BEA, etc.
¨ Des outils génériques et ouverts

n Transversale à l'entreprise
¨ Échanges de données, Bases de données, …
¨ Bureautique, Intégration eBusiness, …
¨ GED, Sites Web, …

66
AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link]
 Chap. 3 – XML, XHTML, CSS

XML-Résumé
n XML est un méta-langage, il est possible de créer ses propres
balises: Extensibilité
n Définit des règles pour créer des documents balisés
n Séparation de la structure et de la présentation
n Moins confus que HTML
n Plus simple que SGML
n XML est indépendant des plates-formes: Portabilité
n La syntaxe XML ne contient que peu de mot clef: Simplicité
n Idéal pour l'échange de données semi-structurées
n Utilisable entre programmes
n Combinaison d’idées préconçues (Hypertexte depuis 1945,
marquage depuis 1970)
n XML est un succès

67
AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link]
 Chap. 3 – XML, XHTML, CSS

XHTML
n eXtensible HTML
¨ Reformulation de HTML 4 en tant qu'application XML 1.0
n Plusieurs avantages
¨ Plus stricte et plus “propre” que HTML 4
¨ Prochaine (actuelle?) étape de l’évolution d’Internet

68
AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link]
 Chap. 3 – XML, XHTML, CSS

Les différences majeures d’avec

HTML4
n Structure des documents
¨ DOCTYPE obligatoire sous XHTML
¨ L’indication du namespace XHTML est obligatoire dans la balise <html>
¨ <html>, <head>, <title>, et <body> sont obligatoires
n Elements XHTML
¨ Un document XHTML doit être bien formé
¨ Ne comprennent que des lettres miniscules
¨ Elément racine requis pour les documents XHTML
n Attributs XHTML
¨ Noms en lettres minuscules
¨ Valeurs entre guillemets doubles
¨ Pas de forme minimalisée
n <option selected="selected"> à la place de <option selected>

69
AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link]
 Chap. 3 – XML, XHTML, CSS

DOCTYPE, namespace XHTML 1

n Strict
¨ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
n Transitionnal
¨ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
n Frameset
¨ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"[Link]
n XHTML1.1
¨ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"[Link]
n Namespace XHTML
¨ <html xmlns="[Link] xml:lang="fr" >

70
AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link]
 Chap. 3 – XML, XHTML, CSS

Mise en valeur vs Mise en forme

n <h1>,...,<h6>
n <em>, <strong>
n Citations courtes
n se trouvent dans un paragraphe
¨ <q> (citation courte)</q>
¨ <cite> (auteur d’une citation)</cite>
n Citations longues
n pas dans un paragraphe, peuvent contenir plusieurs
paragraphes
¨ <blockquote>longue citation</blockquote>

71
AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link]
 Chap. 3 – XML, XHTML, CSS

Exposant et indice

n ^…
mise en exposant (caractères surélevés)
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

n _… Figure 3–8

Une mise en exposant et en indice

¨ mise en indice (caractères abaissés)

Les abréviations
n Exemple Si vous placez un terme en notation raccourcie dans votre page, vous

¨ <p>Bienvenue dans le XXI^ème devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

siècle !</p> Prenons <p>L’eau est

par exemple le terme ADN, contraction de « acide
notée
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
H₂OPrenons
enunchimie.</p>
ALLER PLUS LOIN
petit exemple :
Abréviations, sigles et acronymes
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 72
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Abbréviations

n <abbr>
Accès libre - Réussir son site web avec XHTML et CSS

¨ <p>La police scientifique a démasqué le Le résultat de ce code source apparaît sur la figure 3-8.

coupable à l’aide d’un test <abbr title="Acide

Figure 3–8
Une mise en exposant et en indice

Désoxyribonucléique">ADN</abbr></p>
Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 73
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Listes

n Possibilité de définir des listes de définition

¨ <dt> et <dd>
Accès libre - Réussir son site web avec XHTML et CSS

¨ Exemple Le résultat de ce code source apparaît sur la figure 3-8.

<p>Vocabulaire:</p>
Figure 3–8
<dl> Une mise en exposant et en indice
<dt>XHTML</dt>
<dd>Langage de balisage permettant la rédaction de pages web
structurées. Les abréviations
</dd> Si vous placez un terme en notation raccourcie dans votre page, vous
<dt>CSS</dt> devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
<dd>Langage dePrenons description
par exemple utilisé pour ADN,
le terme la mise en forme
contraction des
de « acide
pages web.
ALLER PLUS LOIN
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Abréviations, </dd>
sigles et acronymes Prenons un petit exemple :

</dl>
La langue française fait la distinction entre : les
abréviations (« Dr » pour Docteur), les sigles


(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 74
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Tableaux

n Possibilité de diviser un grand tableau en

parties
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

¨ <thead>, <tbody>, <tfoot> Figure 3–8

Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 75
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Balises génériques

n bloc
Accès libre - Réussir son site web avec XHTML et CSS

¨ <div> Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8

n ligne Une mise en exposant et en indice

¨ <span> Les abréviations

Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 76
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 2 – HTML v4

Formulaires
n Possibilité de rajouter une structure aux formulaires: balises
<FIELDSET> et <LEGEND>
n <FIELDSET>
¨ Permet de regrouper thématiquement les commandes et les labels
apparentés.
¨ Facilite la navigation par tabulation pour utilisateurs
n <LEGEND>
¨ Permet aux auteurs d'assigner une légende à un élément
n Groupes d’options (listes de choix)
¨ <optgroup>
n Le W3C a conçu une dialecte XML pour construire des
formulaires avec une séparation des données, du raitement et
de l’interface
¨ Xforms

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 77

 Chap. 2 – HTML v4

Formulaires: exemple

AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link] 78

 Chap. 3 – XML, XHTML, CSS

Autres nouveautés avec XHTML

n address, blockquote, del, div, dl, fieldset, form, h1, h2, h3, h4, h5,
h6, hr, ins, ol, noscript, p, pre, script, table, ul
Sont les èléments fils directs de <body>
Accès libre - Réussir son site web avec XHTML et CSS

¨
n Tout autre èlément doit être contenu
Le résultat dans
de ce code unapparaît
source parmisureux
la figure 3-8.

n A tout élément on peut

Figure 3–8adjoindre l’attribut href pour en faire un lien
Une mise en exposant et en indice

n L’élément d’entête <h> associé à celui de groupement <section>

permettent de représenter n’importe quelle hiérarchie de titres
Les abréviations
n L’élément <object> offre laSi possibilité
vous placez un terme d’insérer un objet
en notation raccourcie dans votrede page,n’importe
vous
quel type (image, vidéo, application, applet)
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).


Prenons par exemple le terme ADN, contraction de « acide

n autres éléments désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
¨ <blockcode>, <separator>,
Abréviations, sigles et acronymes … un petit exemple :
Prenons
La langue française fait la distinction entre : les 

n b abréviations (« Dr » pour Docteur), les sigles

(ADN), et les acronymes (Ovni, qui se prononce


comme un mot complet). En XHTML 1.0, on dis-

L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 79
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Exemple avec et
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 80
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Exemple avec
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 81
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Autres nouveautés : éléments

supprimés avec XHTML 2
n acronym, b, i, small, big, tt, font, basefont
Accès libre - Réussir son site web avec XHTML et CSS

n iframe, applet Figure 3–8

Le résultat de ce code source apparaît sur la figure 3-8.

Une mise en exposant et en indice

n hr
Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous

n … devez le placer à l’intérieur de la balise . Cette balise permet de

regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 82
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Validation de documents XHTML

n Aider à se conformer aux règles du

langage correspondant au doctype choisi
pour un document (X)HTML
¨ W3C: [Link]
¨ d’autres outils en ligne

83
AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link]
 Chap. 3 – XML, XHTML, CSS

Les feuilles de styles CSS

n Apparues vers les années 1990s

Standard W3C qui s’est imposé au détriment de la
Accès libre - Réussir son site web avec XHTML et CSS

n
“confrontation” Nescape Navigator/Internet Explorer
Le résultat de ce code source apparaît sur la figure 3-8.

¨ Chacun créait ses propres balises de mise en forme

Figure 3–8
Une mise en exposant et en indice

n Plusieurs versions
¨ CSS1, CSS2, CSS3 Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
n Leur champ d’action ne s’étend pas uniquement au regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

médium screen Prenons par exemple le terme ADN, contraction de « acide

désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
¨ Autres médias: print, Prenons
projection, braille, aural/speech, …
un petit exemple :
Abréviations, sigles et acronymes
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 84
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Rôle des feuilles de styles

n Mise en forme des pages Web

¨ Séparation du fond et de la forme [Link]
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

n plusieurs vertues [Link]
Figure 3–8
Une mise en exposant et en indice

n Contribuer à la rapidité de la navigation sur le

Web Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
¨ Les feuilles de styles sont conservées dans le devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
cache du client Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :

n Leur utilisation est imposée en XHTML

La langue française fait la distinction entre : les
abréviations (« Dr » pour Docteur), les sigles
(ADN), et les acronymes (Ovni, qui se prononce



comme un mot complet). En XHTML 1.0, on dis-

L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 85
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Localisation des feuilles de styles

n Balise STYLE
¨ En entête de page
Accès libre - Réussir son site web avec XHTML et CSS

¨ <style type=“text/css”>….</style>
Le résultat de ce code source apparaît sur la figure 3-8.

Balise LINK
Figure 3–8

n Une mise en exposant et en indice

¨ En entête de page
¨ Les type=
<link rel=“stylesheet” abréviations
“text/css” href=“url”/>
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
n Attribut STYLE des éléments HTML regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
¨ Dans tout
A le corps du document
Prenons un petit exemple :
LLER PLUS LOIN
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Abréviations, sigles et acronymes
¨ <baliseOuvranteOuVide style=“…”>
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 86
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Syntaxe des feuilles de styles

n Différente de HTML
n Une feuille de styles est un ensembre de règles
Accès libre - Réussir son site web avec XHTML et CSS

¨ Forme d’une règle Le résultat de ce code source apparaît sur la figure 3-8.
n Un sélecteur Figure 3–8
Elément
¨ Une ouetgroupe
mise en exposant en indice d’’éléments HTML
n Une déclaration
¨ Liste d’associations attributs:valeurs séparées par des “;”, le tout entre accolades
¨ Exemple de règle Les abréviations
n h1 { color: blue; text-align:
Si vouscenter; } en notation raccourcie dans votre page, vous
placez un terme
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
n Non sensibles à la casse
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
¨ Il est conséillé
ALLER PLUS LOINde les écrire
Abréviations, sigles et acronymes
en lettres minuscules
Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 87
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

La règle @import

n Intégrée depuis CSS2

<style type="text/css">
Accès libre - Réussir son site web avec XHTML et CSS

@import url([Link]);
Le résultat de ce code source apparaît sur la figure 3-8.

</style> Figure 3–8

Une mise en exposant et en indice

n Permet d’inclure des feuilles de styles dans

d’autres Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
¨ Ce qui permet dedevez le créer des
placer à l’intérieur de la balisefeuilles
. Cette balisede
permet de styles


dynamiques sans Prenons

devoir par exemple recopier
le terme ADN, plusieurs
contraction de « acidefois le
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

même code
A
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
LLER PLUS LOIN
Prenons un petit exemple :
Abréviations, sigles et acronymes

Différence avec <link>?

La langue française fait la distinction entre : les 
n abréviations (« Dr » pour Docteur), les sigles
(ADN), et les acronymes (Ovni, qui se prononce


comme un mot complet). En XHTML 1.0, on dis-

L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 88
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Les différents sélecteurs

n Les sélecteurs de balises

¨ Utilisés dans le précédent exemple
Accès libre - Réussir son site web avec XHTML et CSS

n Les sélecteurs de classes

Le résultat de ce code source apparaît sur la figure 3-8.

¨ Une classe est Figure un 3–8nom donné à un ensemble d’éléments HTML

à distinguer
Une mise en exposant et en indice

n Les sélecteurs d’identifiants

¨ Un identifiant ou id est Les
le nomabréviations
attribué à un élément unique dans
le document HTML Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de

regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
n Les pseudo-classes et les pseudo-éléments
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
¨ Variantes A
pour certaines
LLER PLUS LOIN
Abréviations, sigles et acronymes
fonctionnalités,
Prenons un petit exemple : par exemple les liens
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 89
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Les sélecteurs de balises

n Toutes les balises HTML

Accès libre - Réussir son site web avec XHTML et CSS

n Exemple Figure 3–8

Le résultat de ce code source apparaît sur la figure 3-8.

¨p {margin-top: 0; margin-bottom: 0 }
Une mise en exposant et en indice

n Supprime tous Les lesabréviations

interlignes entre paragraphes
en attribuant à la balise
Si vous placez un terme<p> des
en notation marges
raccourcie
devez le placer à l’intérieur de la balise
haute
dans votre page, vous
. Cette balise permet de

et
basse nulles regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 90
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Les sélecteurs de classes (½)

n Une classe est un nom composé de caractères

alphanumériques et dont on baptise les éléments
Accès libre - Réussir son site web avec XHTML et CSS

concernés. Le résultat de ce code source apparaît sur la figure 3-8.

n Un sélecteur de classe reprend son nom en le Figure 3–8

Une mise en exposant et en indice

préfixant d’un point

¨ Exemples Les abréviations
n .ma_classe, .toto, .entete,
Si vous placez… un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de

regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

n Pour attribuer un comportement différent à Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
certains éléments, il suffit de leur appliquer au ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :

moins une classe

La langue française fait la distinction entre : les
abréviations (« Dr » pour Docteur), les sigles
(ADN), et les acronymes (Ovni, qui se prononce



comme un mot complet). En XHTML 1.0, on dis-

L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 91
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Les sélecteurs de classes (2/2)

n Une classe peut s’appliquer à des éléments

différents
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

n Le même élément peut recevoir plusieurs Figure 3–8

classes Une mise en exposant et en indice

n Exemples Les abréviations

Si vous placez un terme en notation raccourcie dans votre page, vous
.sommaire { color: red; } devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

.titre2 { text-align: center; } » (ce qui est quand même plus court à prononcer).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique
ALLER PLUS LOIN
<a href=“..." class="sommaire">lien
Prenons un petit exemple :
Abréviations, sigles et acronymes rouge</a>
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles
(ADN), et les acronymes (Ovni, qui se prononce
<p class="sommaire titre2">un paragraphe rouge et


comme un mot complet). En XHTML 1.0, on dis-

pose en fait de deux balises :  et
centré</p> L’attribut sert à afficher une infobulle. Si vous survolez ADN avec


. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 92
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Les sélecteurs d’identifiants

n Un identifiant est comme une classe. Il s’en distingue

en ce qu’il ne peut porter qu’au plus sur un objet du
Accès libre - Réussir son site web avec XHTML et CSS

document. Le résultat de ce code source apparaît sur la figure 3-8.

n Les sélecteurs CSS s’y réfèrent par l’emploi d’un Figure 3–8
Une mise en exposant et en indice
caractère dièse (#) suivi de son nom
¨ Exemples : #exemple, #toto, #banniere2, …
Les abréviations
n Exemple Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
¨ #monId { background-color: yellow; } regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
¨ En HTMLA
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
LLER PLUS LOIN
Prenons un petit exemple :
Abréviations, sigles et acronymes
n <div id=”monID">contenu</div>
La langue française fait la distinction entre : les

abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 93
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Les pseudo-classes et les pseudo-

éléments
n Ils créent des mécanismes ou des relations qui ne sont pas
réalisables en HTML
Accès libre - Réussir son site web avec XHTML et CSS

¨ CSS crée des éléments spécifiques à certaines actions (comme

le survol d’un lien) ouLe résultat
à certaines arborescences
de ce code source apparaît sur la figure 3-8. (comme le
premier paragraphe
Figure 3–8
d’un bloc)
Une mise en exposant et en indice

n Les techniques qui les correspondent permettent de styler un

contenu n’apparaissant même pas dans le code du document
Les abréviations
¨ Un exemple courant est l’utilisation de la pseudo-classe :hover
Si vous placez un terme en notation raccourcie dans votre page, vous
n Prend effet lorsque le pointeur
devez le placerde la souris
à l’intérieur survole
de la balise . l’élément concerné
Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
n Autres exemples de pseudo-éléments
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
¨ :first-letter A
etet:first-line
LLER PLUS LOIN
Abréviations, sigles acronymes Prenons un petit exemple :
n Agissent
La langue française fait lasur laentrepremière
distinction : les lettre ou la première ligne d’un paragraphe,

abréviations (« Dr » pour Docteur), les sigles
(ADN), et les acronymes (Ovni, qui se prononce indépendamment de la 
balise qui structure son contenu
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 94
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Les pseudo-classes et les pseudo-

éléments: Exemples
n a:hover { text-decoration: none; }
¨ Affectera tous les liens de la page lors de leur
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

survol par le pointeur de la souris
Figure 3–8
Une mise en exposant et en indice

n [Link]:hover { text-decoration: none; color:

Les abréviations
red; } Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
¨ Affectera tous les liens de la page qui sont de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
la classe “lien” lors de leur survol par le
ALLER PLUS LOIN
Abréviations, sigles et acronymes
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Prenons un petit exemple :
La langue française fait la distinction entre : les
abréviations (« Dr » pour Docteur), les sigles
pointeur de la souris 

(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 95
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Syntaxes de regroupements

n Regroupement des sélecteurs

¨ .texte, p, h1, h2 { margin-left: 0; }
Accès libre - Réussir son site web avec XHTML et CSS

n Regroupement des propriétés

Le résultat de ce code source apparaît sur la figure 3-8.

¨ Certaines propriétés Figure 3–8

génériques prévoient une version
raccourcie, permettant
Une mise en exposant et en indice l’application de plusieurs valeurs en une
seule déclaration.
¨ Exemples
Les abréviations
n La propriété font rassemble les valeurs des propriétés font-style, font-
Si vous placez un terme en notation raccourcie dans votre page, vous
size, font-family, font-weight et line-height
devez le placer à l’intérieur de la balise . Cette balise permet de
n border rassemble border-width, border-style, border-color
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
n background
ALLER PLUS LOIN rassemble background-image
désoxyribonucléique , background-color
» (ce qui est quand même plus court à prononcer). ,
La langue française fait la distinction entre : les
background-position, background-repeat
Abréviations, sigles et acronymes Prenons un petit exemple :
,
background-attachment

abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 96
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Syntaxes de regroupements:
exemple avec regroupement des propriétés

n Les 2 règles suivantes sont équivalentes

¨ p{
Accès libre - Réussir son site web avec XHTML et CSS

font-family: Arial, sans-serif; Le résultat de ce code source apparaît sur la figure 3-8.
font-style: italic; Figure 3–8

font-weight: bold;
Une mise en exposant et en indice

font-size: 120%;
line-height: 140%; Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
} devez le placer à l’intérieur de la balise . Cette balise permet de 
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
¨ p{ Prenons par exemple le terme ADN, contraction de « acide

font : Abréviations,
italic Abold 120%
sigles et acronymes
140% Arial, sans-serif;
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
LLER PLUS LOIN
Prenons un petit exemple :
}La langue française fait la distinction entre : les
abréviations (« Dr » pour Docteur), les sigles


(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 97
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Sélection hiérarchique (1/2)

n Sélectionner les balises dotées de certaines classes ou de certains
identifiants
[Link]
Accès libre - Réussir son site web avec XHTML et CSS

¨
¨ a#bar Le résultat de ce code source apparaît sur la figure 3-8.

n On peut ainsi ne Figure sélectionner

3–8
Une mise en exposant et en indice
que les éléments contenus dans
d’autres
¨ Exemple: Les paragraphes contenus dans un bloc <div>
¨ Leslaabréviations
On écrira le sélecteur sous forme “ancêtre descendant”
n en séparant ces deux éléments d’ununblanc
Si vous placez terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
¨ Exemples regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
n a img {border-width: 0;} Prenons par exemple le terme ADN, contraction de « acide
¨ Ne supprimera que lesdésoxyribonucléique
bordures des images contenues
» (ce qui est dans
quand même un lien.
plus court La descendance
à prononcer).
ALLER PLUS
peut aussi
LOIN
être indirectePrenons un petit exemple :
Abréviations, sigles et acronymes
La langue française fait la distinction entre : les
n #menu li a {propriétés} 
¨ (« Dr » pour Docteur), les sigles
abréviations S’appliquera à tous les 
<a> descendant d’un <li> lui-même descendant d’un élément
(ADN), et les acronymes (Ovni, qui se prononce d’identifiant menu
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 98
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

Sélection hiérarchique (2/2)

n Il est possible de prendre en compte les attributs des

éléments pour les sélectionner
Accès libre - Réussir son site web avec XHTML et CSS

¨ Exemple Le résultat de ce code source apparaît sur la figure 3-8.

n a[title="menu"] {color: blue;}
ne
¨ Une colorera en bleu
Figure 3–8
mise en exposant et en indice
que les liens possédant un attribut title de valeur
menu

n Autres possibilités Les abréviations

¨ :first-child désigne le premier
Si vous placez un terme en élément de
notation raccourcie sonpage, élément
dans votre vous

parent devez le placer à l’intérieur de la balise . Cette balise permet de

regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).


¨ Le signe ‘>’ désigne un sélecteur d’enfant

Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
n div>p s’applique à l’élément
Prenons un petit<p>
Abréviations, sigles et acronymes exempleenfant
: de <div>
¨ La langue française fait la distinction entre : les
abréviations (« Dr » pour Docteur), les sigles le signe ‘+’ désigne un sélecteur adjacent. 

(ADN), et les acronymes (Ovni, qui se prononce
n
comme un mot complet). En XHTML 1.0, on dis-
pose en fait de deux balises :  et
div+p s’applique à <p> lorsqu’il
L’attribut  sert à est
afficherprécédé
une infobulle. Sid’un élément
vous survolez ADN avec<div>
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 99
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 3 – XML, XHTML, CSS

A vous de jouer!

n Les standards CSS couvrent plusieurs

autres centres d’intérêt
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

¨ Les couleurs Figure 3–8

Une mise en exposant et en indice

¨ La typographie et la mise en forme de

Les abréviations
caractères Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
¨ Les bordures, arrière-plans et images regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
¨ Le positionnement ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 

¨ Etc.
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 100
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chapitre 4
Javascript

Contenu: Eléments de base,

Lire/Ecrire, Types et variables,
Opérateurs, Tests et boucles,
Fonctions, Evènements, Objets,
DHTML, jQuery.

101
 Chap. 4 – Javascript

C’est quoi JS?

n Un langage de script incorporé dans le HTML

n Historiquement, le premier langage de script pour le Web
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

n Il apporte des améliorations au HTML
¨ HTML permet de
Une mise en exposant et en décrire
Figure 3–8
indice l’information
¨ JavaScript permet de programmer, c'est-à-dire de gérer
l'information
Les abréviations
n Qualités Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
¨ Disponible sur les navigateurs actuels et gratuit regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
n Défauts ALLER PLUS LOIN
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Prenons un petit exemple :
Abréviations, sigles et acronymes
¨ Interprété
La langue française faitet donc
la distinction entre très
: les lent


¨ pas
(ADN),de débogueur
abréviations (« Dr » pour Docteur), les sigles
et les acronymes (Ovni, qui se prononce


comme un mot complet). En XHTML 1.0, on dis-

L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 102
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Script ?

n C’est une portion de code qui vient s'insérer dans une

page HTML
Accès libre - Réussir son site web avec XHTML et CSS

n Le code du script n'est toutefois pas visible dans la

Le résultat de ce code source apparaît sur la figure 3-8.

fenêtre du navigateur car il est compris entre des Figure 3–8

Une mise en exposant et en indice
balises (ou tags) spécifiques qui signalent au
navigateur qu'il s'agit d'un script écrit en langage
JavaScript Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
n Balises annonçant le Prenons
code Javascript
par exemple le terme ADN,
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
contraction de « acide
<SCRIPT language="Javascript">
A
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
LLER PLUS LOIN
Prenons un petit exemple :
ICI repose le code de votre script
Abréviations, sigles et acronymes
La langue française fait la distinction entre : les 

</SCRIPT>
abréviations (« Dr » pour Docteur), les sigles
(ADN), et les acronymes (Ovni, qui se prononce


comme un mot complet). En XHTML 1.0, on dis-

L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 103
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Script JS: quelques questions-

réponses
n Code interprété ou compilé ?
¨ Dès que le navigateur rencontre la balise <script> il passe la
main à l'interprète du langage appelé
Accès libre - Réussir son site web avec XHTML et CSS

¨ Votre navigateur interprétera votre script, puis l'exécutera

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
n Que mettre dans
Une mise leen indice
en exposant et script ?
¨ Des variables et instructions, organisées selon un algorithme,
c'est-à-dire selon le résultat que l’on souhaite obtenir
Les abréviations
n Où placer les scripts ? Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
¨ Dans le conteneur <body>...</body>, sans les fonctions regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
¨ Dans le conteneur
A
<head>...</head>, siquand
désoxyribonucléique » (ce qui est onmême
utilise deà prononcer).
plus court fonctions
LLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 104
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Eléments du langage

n Nous aborderons les éléments suivants dans

ce cours
Accès libre - Réussir son site web avec XHTML et CSS

¨ Commentaires Le résultat de ce code source apparaît sur la figure 3-8.

¨ Lecture/Ecriture
Une mise en exposant et en indice
Figure 3–8

¨ Types et variables
¨ Opérateurs Les abréviations
¨ Instructions de contrôle
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de 
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
¨ Fonction Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).

¨ Evènements
A LLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les

¨ Objets

abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 105
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Commentaires

n // Commentaires sur une ligne

Accès libre - Réussir son site web avec XHTML et CSS

n /* Commentaires sur plusieurs lignes */ Figure 3–8

Le résultat de ce code source apparaît sur la figure 3-8.

Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 106
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Ecriture: directement sur la page Web

n [Link]
Accès libre - Réussir son site web avec XHTML et CSS

¨ Exemples Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 107
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Lecture/Ecriture sur la fenêtre courante

n prompt()
¨ Ouvrir une boîte de
Accès libre - Réussir son site web avec XHTML et CSS

dialogue avec une Le résultat de ce code source apparaît sur la figure 3-8.

zone de saisie et 2 Figure 3–8

boutons (OK et
Une mise en exposant et en indice

Annuler) et rendre
l’information lue Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de

n alert() regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

Prenons par exemple le terme ADN, contraction de « acide

¨ Ecrire A un message désoxyribonucléique » (ce qui est quand même plus court à prononcer).
LLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les
abréviations (« Dr » pour Docteur), les sigles
dans une fenêtre 

(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 108
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Lecture/Ecriture sur la fenêtre courante

n confirm()
¨ Ouvrir une boîte de
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

dialogue avec 2 Figure 3–8

boutons : OK et
Une mise en exposant et en indice

Annuler. PermettreLes abréviations

d'envoyer une Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
information et de Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
recevoir un ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les

booléen

abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 109
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Lecture/Ecriture sur une nouvelle

fenêtre: [Link] + open
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 110
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Variables: déclaration/initialisation
<script language="JavaScript">
var date; // Déclaration sans affectation
Accès libre - Réussir son site web avec XHTML et CSS

var compteur=0; // DéclarationLe avec

résultat deaffectation
ce code source apparaît sur la figure 3-8.

toto='coucou';Une//miseDéclaration Figure 3–8

en exposant et en indice implicite par affectation
var prem, second; // variables séparées par des virgules
monNombre = new Number(); //Les abréviationstypée sans affectation
Déclaration
Si vous placez un terme en notation raccourcie dans votre page, vous
e = new Number(2.71828); // Déclaration typée avec affectation devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
var maChaine = new String(); //Déclaration de
désoxyribonucléique » (ce qui chaîne
est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
var toto =La new Boolean(true); //Déclaration
langue française fait la distinction entre : les
de booléen

abréviations (« Dr » pour Docteur), les sigles 
</script> (ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 111
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Tableaux
n Le type des éléments
¨ Nombres, chaînes, booléens, ...
n La dimension
Accès libre - Réussir son site web avec XHTML et CSS

¨ 1, 2, ou 3, ...
Le résultat de ce code source apparaît sur la figure 3-8.
¨ Exemple: tab(7) ; tab(x,y) ; tab(A,B,C) ; ...
n Les indices Figure 3–8
Une mise en exposant et en indice
¨ Souvent des nombres entiers
n Exemple
<script language=JavaScript>
Les abréviations
// Tableau de chaînes, de dimension 1, indicé de 0 à 6 :
Jour=new Array(7); Jour[0]='Dimanche'Si; vous placez un terme
Jour[1]='Lundi' en notation raccourcie
; Jour[2]='Mardi' ; dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
//... Jour[6]='Samedi' ;
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
// En énumérant les éléments :
Prenons par exemple le terme ADN, contraction de « acide
jour=new Array('dimanche','lundi','mardi', ... ,'vendredi','samedi');
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
[Link](Jour[1], ' ' , Jour[0]); //affiche
ALLER PLUS LOIN : Lundi dimanche
Prenons un petit exemple :
</script Abréviations, sigles et acronymes
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 112
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Opérateurs arithmétiques
n Binaires
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
n Unaires Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 113
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Opérateurs de comparaison
n Binaires:
¨ revoient une valeur booléenne (true ou false)
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 114
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Opérateurs logiques
n Opèrent sur des booléens et renvoient des
booléens
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

n Binaires Figure 3–8

Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).

Unaire
ALLER PLUS LOIN
n La langue française fait la distinction entre : les
Abréviations, sigles et acronymes Prenons un petit exemple :

abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 115
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Opérateurs d’affectation
n Affectation simple
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8

Affectation arithmétique
Une mise en exposant et en indice

n
Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 116
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Tests

if (condition booléenne)
Accès libre - Réussir son site web avec XHTML et CSS

{Instructions à exécuter si "oui"} Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8

else Une mise en exposant et en indice

{Instructions à exécuter si "non"};

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 117
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Tests

n if
if (condition booléenne)
Accès libre - Réussir son site web avec XHTML et CSS

{Instructions à exécuter si "oui"}

else Le résultat de ce code source apparaît sur la figure 3-8.

{Instructions à exécuter
Figure 3–8 si "non"};
Une mise en exposant et en indice

n switch
switch(x) { Les abréviations
case 1 : instructions 1; break; Si vous placez un terme en notation raccourcie dans votre page, vous
case 2 : instructions 2; break; devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
... Prenons par exemple le terme ADN, contraction de « acide
case n : instructions
ALLER PLUS LOIN
3; break;
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
default : instructions
Abréviations, sigles et acronymes4; break;
Prenons un petit exemple :

}; La langue française fait la distinction entre : les

abréviations (« Dr » pour Docteur), les sigles


(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 118
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Boucles

n for
Accès libre - Réussir son site web avec XHTML et CSS

for (valeur de départ; contrôle pour sortie; progression) Le résultat de ce code source apparaît sur la figure 3-8.

{ Instructions à itérer } Figure 3–8

Une mise en exposant et en indice

n while Les abréviations

Si vous placez un terme en notation raccourcie dans votre page, vous
while(condition) devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
{ suite d’instructions;} ALLER PLUS LOIN
Abréviations, sigles et acronymes
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 119
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Fonctions
n Syntaxe
function maFonction(x, toto)
Autre exemple
Accès libre - Réussir son site web avec XHTML et CSS

{
... instructions; ... Le résultat de ce code source apparaît sur la figure 3-8.

return valeur du résultat; Figure 3–8

} Une mise en exposant et en indice

n Exemple
<script language="JavaScript"> Les abréviations
function VolCylindre(r,h) { Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
pi=3.14159; regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
return pi*r*r*h; désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
} Abréviations, sigles et acronymes Prenons un petit exemple :

[Link](VolCylindre(1,2));
La langue française fait la distinction entre : les
abréviations (« Dr » pour Docteur), les sigles


</script>
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 120
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Plusieurs fonctions prédéfinies

n Dates
¨ getDate(), getHour(), getYear(), setDate(), parse(), …
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

n Math Figure 3–8

Une mise en exposant et en indice

¨ random(), sin(), cos(), pow(), log(), sqrt(), floor(), max(),

min(), … Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
n Chaînes de caractères devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

¨ toLowerCase(), toUpperCase(), indexOf(), substring(),

Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
charAt(), …
A LLER PLUS LOIN
Prenons un petit exemple : Abréviations, sigles et acronymes
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 

n … (ADN), et les acronymes (Ovni, qui se prononce

comme un mot complet). En XHTML 1.0, on dis-
pose en fait de deux balises :  et
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 121
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Schéma d’utilisation de fonctions avec

des formulaires
n Body
Accès libre - Réussir son site web avec XHTML et CSS

¨ Contient la définition du formulaire Le résultat de ce code source apparaît sur la figure 3-8.

¨ Il fait appel aux variables et fonctions définies Figure 3–8

Une mise en exposant et en indice

dans le head
Les abréviations
n Head Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

¨ Contient les fonctions Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
A LLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 122
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Fonctions et formulaires: exemple 1

Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 123
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Fonctions et formulaires: exemple 2

n Lire un nombre et écrire son double
¨ Saisie du nombre
Accès libre - Réussir son site web avec XHTML et CSS

n <input type="text"Lename="nbre" size="3">

résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8

¨ Traitement Une mise en exposant et en indice

n 2*Number([Link]);
Les abréviations
¨ Interface Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 124
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Fonctions et formulaires: exemple 2

n Code source complet

Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :

Exercire: mettre le code dans une fonction à

La langue française fait la distinction entre : les 

n abréviations (« Dr » pour Docteur), les sigles

(ADN), et les acronymes (Ovni, qui se prononce


placer dans le <head>

comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 125
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

La gestion des évènements

n C‘est l‘intérêt de JS en matière de programmation Web

¨ Source d’interactivité des pages Web
Accès libre - Réussir son site web avec XHTML et CSS

n Le JS permet de réagirLeàrésultat
certaines actions de l’utilisateur
de ce code source apparaît sur la figure 3-8.

n Schéma générale de programme Figure 3–8

Une mise en exposant et en indice

¨ On précise l’événement (Event)

n clic souris, survol de zone, chargement de page, …
Les abréviations
¨ Et le gestionnaire d’évènement correspondant (onEvent)
Si vous placez un terme en notation raccourcie dans votre page, vous
n onClick, onMouseOver, onLoad,
devez … de la balise . Cette balise permet de
le placer à l’intérieur
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
¨ définis sous forme d’attributs associés aux éléments HTML
Prenons par exemple le terme ADN, contraction de « acide
¨ Généralement
A LLER PLUS LOIN
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Prenons un petit exemple :
Abréviations, sigles et acronymes
n <BaliseHTMLSource
La langue française fait la distinction entre : les
onEvent=“actions_ou_fonctions_JS”…/>

abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 126
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Les évènements: clics de souris

n Gestionnaire
¨ onClick
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

n Balises supportées Figure 3–8

Une mise en exposant et en indice

¨ <input> (essentiellement toutes)

Les abréviations
¨ <a> Si vous placez un terme en notation raccourcie dans votre page, vous

¨…
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).

n Effet La langue française fait la distinction entre : les

ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :


¨ Au clic
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 127
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Les évènements: le
chargement/déchargement de page
n Gestionnaire
¨ onLoad/onUnLoad
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Balises supportées
Figure 3–8
n Une mise en exposant et en indice

¨ <body>
Les abréviations
¨ <frameset> Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

Effet
Prenons par exemple le terme ADN, contraction de « acide
n ALLER PLUS LOIN
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Prenons un petit exemple :
Abréviations, sigles et acronymes

¨ Au La langue française fait la distinction entre : les

abréviations (« Dr » pour Docteur), les sigles chargement/déchargement d’une page 

(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 128
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Les évènements: l’erreur de

chargement
n Gestionnaire
¨ onError
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

n Balises supportées Figure 3–8

Une mise en exposant et en indice

¨ <body>
¨ <frameset> Les abréviations
¨ <img> Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de

¨…
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN

n Effet La langue française fait la distinction entre : les

abréviations (« Dr » pour Docteur), les sigles
Abréviations, sigles et acronymes Prenons un petit exemple :


¨ Lorsqu’une erreur au chargement se produit


(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut sert à afficher une infobulle. Si vous survolez ADN avec 
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 129
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Les évènements: passages de la souris

n Gestionnaire
Accès libre - Réussir son site web avec XHTML et CSS

¨ onMouseOver/onMouseOut
Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8

n Balises supportées Une mise en exposant et en indice

¨ Presque toutes Les abréviations

Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de

Effet
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
n Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN

¨ Lorsque la souris survole la cible (rentre/sort)

Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 130
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Autres gestionnaires

n onFocus et onBlur
onChange
Accès libre - Réussir son site web avec XHTML et CSS

n
Le résultat de ce code source apparaît sur la figure 3-8.

n onSelect Figure 3–8

Une mise en exposant et en indice

n onSubmit
Les abréviations
n onReset Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de

n onDblClick regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
n onKeyDown, onKeyUp,Prenons
onKeyPress
un petit exemple : Abréviations, sigles et acronymes
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 

n … (ADN), et les acronymes (Ovni, qui se prononce

comme un mot complet). En XHTML 1.0, on dis-
pose en fait de deux balises :  et
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 131
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Les objets

n JS traite les éléments qui s’affiche sur un page web

sous forme d’objets.
Accès libre - Réussir son site web avec XHTML et CSS

Ils sont classés sous la forme d’une hiérarchie

Le résultat de ce code source apparaît sur la figure 3-8.
n
Figure 3–8
¨ Pour faciliter leur désignation Une mise en exposant et en indice

¨ Pour arrivé à un objet on part en général de l’objet “le

plus grand” Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous

n Il leurs sont associées des propriétés et des devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

méthodes (actions) ALLER PLUS LOIN

Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Abréviations, sigles et acronymes Prenons un petit exemple :

n La manipulation de chaque objet est alors possible à

La langue française fait la distinction entre : les
abréviations (« Dr » pour Docteur), les sigles



travers ses propriétés et méthodes

(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
pose en fait de deux balises :  et
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 132
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Les objets de base

n navigator
¨ Le navigateur du visiteur
Accès libre - Réussir son site web avec XHTML et CSS

n window Le résultat de ce code source apparaît sur la figure 3-8.

¨ La fenêtre où s’affiche
Figure 3–8
la page web
Une mise en exposant et en indice

n locator
¨ L’adresse de la page affichée
Les abréviations
n history Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
¨ L’historique, les liens déjà visités regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
n document A
Abréviations, sigles et acronymes
LLER PLUS LOIN
Prenons un petit exemple :
¨ Le contenu du
La langue française fait document
la distinction entre : les
abréviations (« Dr » pour Docteur), les sigles
courant 

(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 133
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

La hiérarchie des objets JS

Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 134
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

L’objet navigator

n Propriétés
¨ appName
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

n Le nom du navigateur: IE, Mozilla, …
Figure 3–8

¨ appVersion
Une mise en exposant et en indice

n La version du navigateur
Les abréviations
¨ language Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
n FR, AN, … Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).

¨ platform
ALLER PLUS LOIN
Prenons un petit exemple : Abréviations, sigles et acronymes
La langue française fait la distinction entre : les 

n Windows, Linux, …
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 135
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

L’objet window
n C’est le “super” objet de JS n Ses méthodes
¨ Le parent des objets qui composent une page ¨ alert()
Web n Boite de dialogue avec infos
n document ¨ back()
n location
n Page précédente
Accès libre - Réussir son site web avec XHTML et CSS

n history
n frames ¨ blur()
n … n Quitter
Le résultat de ce code source apparaît sur lala fenêtre
figure 3-8.
¨ clearTimeout()
n Ses propriétés n Interrompre le compte à rebours
Figure 3–8
¨ closed
n
Une mise en exposant et en indice
Fenêtre fermée ¨ close()
¨ defaultStatus n Fermer la fenêtre
n Affichage normal dans la barre d'état ¨ confirm()
¨ locationbar n Boite de dialogue pour confirmer
n Barre d'adresse Les abréviations
¨ open()
¨ menubar Si vous placez un terme en notation
n Ouvrir une nouvelle
raccourcie fenêtre
dans votre page, vous
Barre de menus
¨ print()
n
devez le placer à l’intérieur de la balise . Cette balise permet de
¨ name
regrouper les acronymes, abréviations
n et sigles (voir encadré ci-contre).
Imprimer
n Nom de fenêtre
¨ scrollbars Prenons par exemple¨ le prompt()
terme ADN, contraction de « acide
n Barres de défilement désoxyribonucléique » (ce qui est
n quand même
Fenêtre deplus court àpour
dialogue prononcer).
la saisie de valeur
ALLER PLUS LOIN
¨ statusbar
Abréviations, sigles et acronymes ¨ : setTimeout()
Prenons un petit exemple
n Barre d'état n Entamer le compte à rebours
La langue française fait la distinction entre : les 
¨ status
abréviations (« Dr » pour Docteur), les sigles ¨ ….

Contenu
n (ADN), de la barre
et les acronymes (Ovni,d'état
qui se prononce
¨ … comme un mot complet). En XHTML 1.0, on dis- L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 136
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

L’objet document
n Propriétés n Méthodes
¨ alinkColor ¨ close()
n Couleur des liens lorsqu'ils sont cliqués n Fermer
¨ bgColor ¨ createAttribute()
n Couleur d'arrière plan n Créer un nœud d'attributs
charset createElement()
Accès libre - Réussir son site web avec XHTML et CSS

¨ ¨
n Jeu de caractères utilisés n Créer un nœud d'éléments
¨ cookie Le résultat de ce code source apparaît
¨ sur la figure 3-8.
createTextNode()
n Chaîne de caractères pouvant être n Créer un nœud de texte
sauvegardée chez l'utilisateur
¨ defaultCharset Figure 3–8 ¨ getElementById()
Une mise en exposant et en indice n Accès à l'élément HTML par l'attribut Id
n Jeu de caractères normal
¨ fgColor ¨ getElementsByName()
n Couleur pour le texte n Accès à l'élément HTML par l'attribut name
¨ lastModified ¨ getElementsByTagName()
n Dernière modification du document Les abréviations n Accès à l'élément HTML par liste d'éléments
¨ linkColor ¨ open()
n Sous objets
Si vous placez un terme en notationnraccourcie
ouvrir ledans votre (pop
document page,up)
vous
n Couleur pour les liens
¨ images
devez le placer à l’intérieur de la balise . Cette balise permet de
¨ title ¨ write()
liste des
regrouper
n images duabréviations et sigles (voir encadré ci-contre).
les acronymes,
n Titre du fichier document sous la n Ecrire dans la fenêtre du document
¨ URL Prenons par tableau
forme d’un exemple le ¨terme ADN, contraction de « acide
writeln()
n Adresse URL du fichier ¨ désoxyribonucléique » (ce qui est quand
forms n même
Ecrireplus court
ligne par àligne
prononcer).
ALLER PLUS LOIN
¨ … Abréviations, sigles et acronymes
les un
n Prenons formulaires du: ¨ ….
petit exemple
document sous forme
La langue française fait la distinction entre : les d’un tableau

abréviations (« Dr » pour Docteur), les ¨ sigles links
(ADN), et les acronymes (Ovni, qui se prononce n Les liens du document
comme un mot complet). En XHTML 1.0, on dis- sous forme
L’attribut sert à d’un
afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et tableau
la souris, une infobulle apparaîtra pour vous indiquer la signification du
. Nous avons pris ici le parti de ne
¨
parler que de la balise  car c’est la plus
Eléments HTML
terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-¨ …
raîtra dans XHTML 2.0. Les abréviations, sigles et 137
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Exemples avec les objets (1/7)

Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 138
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Exemples avec les objets (2/7)

Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 139
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Exemples avec les objets (3/7)

Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 140
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Exemples avec les objets (4/7)

Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 141
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Exemples avec les objets (5/7)

Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 142
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Exemples avec les objets (6/7)

Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 143
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Exemples avec les objets (7/7)

Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 144
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Exercice

n Réaliser une interface pour une interrogation

de type QCM.
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 145
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

DHTML
n Dynamic HTML
¨ HTML dynamique
n N'est pas une extension classique de HTML sous la forme de nouveaux
Accès libre - Réussir son site web avec XHTML et CSS

repères HTML.
Le résultat de ce code source apparaît sur la figure 3-8.
¨ Ça n'est pas non plus un nouveau langage.
Figure 3–8
n C’est plutôt un concept d'ensemble regroupant différentes solutions qui Une mise en exposant et en indice

permettent de modifier de façon dynamique des éléments au choix

d’une page Web pendant l'affichage
Les abréviations
¨ Automatiquement ou suite à une action de l'utilisateur
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
n Plusieurs modèles regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
¨ Le modèle AJAX de GooglePrenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
n Javascript+XML
ALLER PLUS LOIN asynchrone
Abréviations, sigles et acronymes Prenons un petit exemple :
¨ Le modèle DOM (Document
La langue française fait la distinction entre : les
Object Model)
abréviations (« Dr » pour Docteur), les sigles
n Standard W3C 
(ADN), et les acronymes (Ovni, qui se prononce
¨ etc.
comme un mot complet). En XHTML 1.0, on dis-
pose en fait de deux balises :  et
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 146
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Le modèle DOM

n Exemple
¨ Un changement de structure au clic
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 147
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Le modèle DOM: les objets principaux

n Node
Accès libre - Réussir son site web avec XHTML et CSS

n NodeList Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8

NamedNodeMap
Une mise en exposant et en indice
n
Les abréviations
n Document Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

n Element ALLER PLUS LOIN

Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Abréviations, sigles et acronymes Prenons un petit exemple :

n Attr La langue française fait la distinction entre : les

abréviations (« Dr » pour Docteur), les sigles
(ADN), et les acronymes (Ovni, qui se prononce



comme un mot complet). En XHTML 1.0, on dis-

L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 148
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Le modèle DOM: l’objet Node

Accès libre - Réussir son site web avec XHTML et CSS

Propriétés Description Méthode

Le résultat Description
de ce code source apparaît sur la figure 3-8.
attributes Une collection des attributs du noeud
appendChild() Ajoute'un'nœud'enfant
childNodes les noeuds fils du noeudFigure
sous la3–8forme
Une mise en exposant et en indice
d’un NodeList hasAttributes() Teste'si'le'nœud'a'ou'pas'des'attributs'
firstChild Le 1er enfant du noeud hasChildNodes() Teste'si'le'nœud'a'ou'pas'des'enfants
lastChild Le dernier enfant du noeud insertBefore() Inserer'un'nouveau'noeu'enfant'avant'le'
Les abréviations
nodeName Le nom du noeud nœud'spécifié'
Si vous placez un terme en notation raccourcie dans votre page, vous
nodeType Le type du noeud devez le placer à l’intérieur de la balise . Cette balise permet de
removeChild()
regrouper Supprime'un'nœud'enfant
les acronymes, abréviations et sigles (voir encadré ci-contre).
nodeValue La valeur du noeud
parentNode Le noeud parent du noeud replaceChild() Remplace'un'nœud'enfant'
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Prenons….
ALLER PLUS LOIN
… Abréviations, sigles et acronymes un petit exemple :

! La langue française fait la distinction entre : les

abréviations (« Dr » pour Docteur), les sigles
'


(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 149
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Le modèle DOM: l’objet Element

n Propriétés
Accès libre - Réussir son site web avec XHTML et CSS

¨ Celles de Node Le résultat de ce code source apparaît sur la figure 3-8.

¨ Autres: tagName (le nom de l’élément), … Figure 3–8

Une mise en exposant et en indice

n Méthodes Les abréviations

Si vous placez un terme en notation raccourcie dans votre page, vous
Méthode Description
devez le placer à l’intérieur de la balise . Cette balise permet de
getAttribute() regrouper lesvaleur
Retourne la acronymes, abréviations
de l’attribut spécifiéet sigles (voir encadré ci-contre).
getAttributeNode() Prenons parnoeud
Retourne le exemple terme ADN, contraction de « acide
attributelespécifié
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
getElementsByTagName()
ALLER PLUS LOIN Retourne une collection des noeuds enfants avec le nom de
Abréviations, sigles et acronymes Prenons un petit exemple :
balise spécifié
La langue française fait la distinction entre : les hasAttribute() Teste si le noeud possède l’attribut spécifié

abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce removeAttribute() Supprime l’attribut spécifié
comme un mot complet). En XHTML 1.0, on dis-
setAttribute() L’attribut
Met ou change sert
 la à afficher
valeur uneàinfobulle.
spécifiée l’attribut Si vous survolez ADN avec
spécifié
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
… terme (voir figure 3-9).
parler que de la balise  car c’est la plus
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et
! 150
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Le modèle DOM: l’objet Attr

n Propriétés
Accès libre - Réussir son site web avec XHTML et CSS

¨ Celles de Node Le résultat de ce code source apparaît sur la figure 3-8.

¨ Autres: isId, name, ownerElement, value, … Figure 3–8

Une mise en exposant et en indice

n Méthodes Les abréviations

Si vous placez un terme en notation raccourcie dans votre page, vous
¨ Celles de Node devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 151
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Le modèle DOM: l’objet Document

n Propriétés
Accès libre - Réussir son site web avec XHTML et CSS

¨ documentElement, doctype,
Le résultat documentURI,
de ce code source apparaît sur la figure 3-8. …
Figure 3–8

n Méthodes Une mise en exposant et en indice

Méthode Description
createAttribute() Les abréviations
Crée%un%nœud%attribut
createComment() Si vous placez un terme en notation raccourcie dans votre page, vous
Crée%un%nœud%commentaire%avec%le%texte%spécifié
devez le placer à l’intérieur de la balise . Cette balise permet de
createElement() Crée%un%nœud%Element%
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
getElementById() Retourne%l’élément%avec%l’attribut%ID%avec%la%valeur%
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
spécifiée
ALLER PLUS LOIN
Prenons un petit exemple :
getElementsByTagName()
Abréviations, sigles et acronymes Retourne%sous%la%forme%d’un%NodeList%tous%les%éléments%
La langue française fait la distinction entre : lesavec%le%nom%de%balise%spécifié%

abréviations (« Dr » pour Docteur), les sigles 
renameNode()
(ADN), et les acronymes (Ovni, qui se prononceRenommer%le%nœud%spécifié%
comme un mot complet). En XHTML 1.0, on dis-
…; L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et%
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
%
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 152
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Le modèle DOM: l’objet NodeList

n 1 propriété
Accès libre - Réussir son site web avec XHTML et CSS

¨ length Le résultat de ce code source apparaît sur la figure 3-8.

n Le nombre de noeuds dans la collection

Figure 3–8
Une mise en exposant et en indice

n 1 méthode Les abréviations

¨ item()
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

n Retourne
A
le noeud dont l’index » (ce qui est est spécifié
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique
LLER PLUS LOIN
quand même plus court à prononcer).
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 153
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Le modèle DOM: l’objet

NamedNodeMap
n 1 propriété
Accès libre - Réussir son site web avec XHTML et CSS

¨ length Le résultat de ce code source apparaît sur la figure 3-8.

n Le nombre de noeuds dans la collection

Figure 3–8
Une mise en exposant et en indice

n Méthodes Les abréviations

¨ item(), getnamedItem(), setNamedItem(),

Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

removeNamedItem(), … ALLER PLUS LOIN

Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 154
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Exercice

n Améliorer l’interface pour une interrogation

de type QCM.
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

¨ Ex: afficher le résultat au fur et à mesure.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 155
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

La librairie jQuery

n Simplifie la programmation en JS
Accès libre - Réussir son site web avec XHTML et CSS

n Facile à apprendre Figure 3–8

Le résultat de ce code source apparaît sur la figure 3-8.

Une mise en exposant et en indice

n Semble être la plus populaire et la plus

Les abréviations
extensible des librairies JS Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
n Largement utilisée par de grandes firms ALLER PLUS LOIN
Abréviations, sigles et acronymes
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Prenons un petit exemple :

¨ IBM, Microsoft, Google, etc.

La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 156
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

jQuery: Installation

n Télécharger un seul fichier

¨ [Link]
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

¨ [Link] [Access date: 13 dec. 2012]
Figure 3–8
Une mise en exposant et en indice

n En faire référence en entête

Les abréviations
<head>
Si vous placez un terme en notation raccourcie dans votre page, vous

<script src="[Link]"></script>
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

</head> ALLER PLUS LOIN

Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Abréviations, sigles et acronymes Prenons un petit exemple :

C’est tout !
La langue française fait la distinction entre : les 

n abréviations (« Dr » pour Docteur), les sigles

(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-


L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 157
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

jQuery: Exemple

n La méthode hide()
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

¨ L’exemple cache Figure 3–8

Une mise en exposant et en indice

tous les p de la
page au clic sur un
Les abréviations
bouton Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 158
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

jQuery: la syntaxe

n La syntaxe jQuery est taillée sur mesure pour réaliser 2 choses

¨ Sélectionner les éléments HTML
Exécuter des actions sur ces éléments
Accès libre - Réussir son site web avec XHTML et CSS

¨
Le résultat de ce code source apparaît sur la figure 3-8.
n La syntaxe de base
¨ $(selector).action() Figure 3–8
n Le signe $ enpour
Une mise être
exposant et enen mode jQuery
indice

n Le sélecteur pour chercher les éléments HTML

n L’action jQuery à exécuter sur les éléments sélectionnées

n Exemples Les abréviations

Si vous placez un terme en notation raccourcie dans votre page, vous
¨ $(this).hide() devez le placer à l’intérieur de la balise . Cette balise permet de
n Cache l’élément courant regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
¨ $("p").hide() Prenons par exemple le terme ADN, contraction de « acide
n Cacher tous les élément p désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
¨ $(".test").hide()
Abréviations, sigles et acronymes Prenons un petit exemple :
n Cacher
La langue françaisetous
fait la les éléments
distinction entre : les de classe test

abréviations (« Dr » pour Docteur), les sigles
¨ (ADN), et les acronymes (Ovni, qui se prononce $("#test").hide() 

comme
n Cacher tousEnles
un mot complet). XHTMLéléments
1.0, on dis- d’identifiant testsert à afficher une infobulle. Si vous survolez ADN avec
L’attribut 
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 159
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

L’évènement ready de Document

n Marque la fin du chargement de la page
n Son utilisation comme dans le 1er
exemple permet d’éviter à du code
jQuery de s’exécuter avant que la page
Accès libre - Réussir son site web avec XHTML et CSS

n’ait fini de se charger

Le résultat de ce code source apparaît sur la figure 3-8.
n Certaines actions échouent lorsque les
méthodes impliquées s’exécutent Figure 3–8 avant
la fin du chargement de la page
Une mise en exposant et en indice

¨ Cacher un élément non encore créé

¨ Lire la taille d’une image non encore
chargée Les abréviations
¨ etc.
Si vous placez un terme en notation raccourcie dans votre page, vous
n Pour simplifier, les syntaxes ci-contre
devez le placer à l’intérieur de la balise . Cette balise permet de
sont équivalentes regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 160
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Les sélecteurs jQuery

n Permettent la sélection et la manipulation d’éléments

HTML
Accès libre - Réussir son site web avec XHTML et CSS

¨ On peut trouver des éléments de par différentes

Le résultat de ce code source apparaît sur la figure 3-8.

manières Figure 3–8

Une mise en exposant et en indice

n leur noms, IDs, classes, types, attributs, valeurs d’attributs, etc.

¨ Basés sur les sélecteurs
Les abréviations CSS auxquels s’ajoutent
d’autres Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de 
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

n Ils sont tous introduits par le signe $ suivi de ALLER PLUS LOIN
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).

parenthèses
La langue française fait la distinction entre : les
Abréviations, sigles et acronymes Prenons un petit exemple :


¨ $()
abréviations (« Dr » pour Docteur), les sigles
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-


L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 161
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Les sélecteurs jQuery: exemples

Syntaxe Description
$("*") Tous les éléments
Accès libre - Réussir son site web avec XHTML et CSS

$(this) L’élément HTML courant

$("[Link]") Tous
Le lesdeelements
résultat <p>
ce code source de classe
apparaît "intro"
sur la figure 3-8.

$("p:first") Figure 3–8

Le 1er élément <p>
Une mise en exposant et en indice
$("ul li:first") Le 1er élément <li> du 1er element <ul>
$("ul li:first-child") Le 1er <li> de chaque <ul>
$("[href]") Tousabréviations
Les les elements avec un attribute href
$("a[target='_blank']") Tous les <a> de target "_blank"
Si vous placez un terme en notation raccourcie dans votre page, vous
$("a[target!='_blank']") Tousleles
devez <a>
placer de target
à l’intérieur de lanon égal
balise à ."_blank"
 Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
$(":button") Tous lesparelements
Prenons exemple <button>
le terme ADN, ou decontraction
type "button"de « acide
$("tr:even") désoxyribonucléique » (ce
Tous les <tr> de rangs pairsqui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
$("tr:odd") Tous les <tr> de rangs impairs
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles
(ADN), et les acronymes (Ovni, qui se prononce
! 

comme un mot complet). En XHTML 1.0, on dis-

L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 162
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Evènements jQuery

n Les principales méthodes associées

Evènements Evènements
Evènements Evènement
Accès libre - Réussir son site web avec XHTML et CSS

Souris Formulaire Clavier

Le résultat de ceDocument/
code source apparaît sur la figure 3-8.
Window
Figure 3–8
click() keypress()
Une mise en exposant et en indicesubmit() load()
dblclick() keydown() change() resize()
mouseenter() keyup() focus() scroll()
Les abréviations
mouseleave() blur()Si vous placez unload()
un terme en notation raccourcie dans votre page, vous
! devez le placer à l’intérieur de la balise . Cette balise permet de

n Syntaxe d’utilisation regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
¨ $(selecteur).methode(
A LLER PLUS LOIN
Prenons un petit exemple :
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Abréviations, sigles et acronymes
¨ actions
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
¨ );
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut sert à afficher une infobulle. Si vous survolez ADN avec

pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 163
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Effets jQuery
n Associées à des méthodes
n Les principales méthodes
Accès libre - Réussir son site web avec XHTML et CSS

¨ Cacher/montrer Le résultat de ce code source apparaît sur la figure 3-8.

n hide(), show(), toggle(),
¨ S’estomper/Réaparaître Figure 3–8
Une mise en exposant et en indice
n fadeIn(), fadeOut(), fadeToggle(),
¨ Glisser
n slideDown(), slideUp(), slideToggle()
Les abréviations
¨ Ces méthodes prennent 2 paramètres optionnelles
Si vous placez un terme en notation raccourcie dans votre page, vous
n Le 1er détermine la vitesse d’exécution (fast, slow,
devez le placer à l’intérieur ou durée)
de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
n Le 2ieme est une méthode qui s’exécute après l’exécutio
Prenons par exemple le terme ADN, contraction de « acide
¨ etc. désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
n Chaînage d’appels
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles
¨ Ex: $("#p1").css("color","red").slideUp(2000).slideDown(2000);
(ADN), et les acronymes (Ovni, qui se prononce


comme un mot complet). En XHTML 1.0, on dis-

L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 164
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Lire/écrire du contenu d’éléments

HTML
n Méthodes principales
¨ text()
Accès libre - Réussir son site web avec XHTML et CSS

n Retourne ou écrit le contenu texte des éléments sélectionnés

Le résultat de ce code source apparaît sur la figure 3-8.

¨ html() Figure 3–8

Une mise en exposant et en indice

n Retourne ou écrit le contenu HTML des éléments sélectionnés

¨ val() Les abréviations
n Retourne ou écrit Sidevez
lavouslevaleur des champs (de formulaires)
placez un terme en notation raccourcie dans votre page, vous
placer à l’intérieur de la balise . Cette balise permet de

sélectionnés regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
¨ attr() ALLER PLUS LOIN
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Abréviations, sigles et acronymes Prenons un petit exemple :
n Retourne ou écrit la valeur des attributs sélectionnés
La langue française fait la distinction entre : les

abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 165
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Lire/écrire du contenu d’éléments

HTML: exemples
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 166
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Ajout/Suppression d’éléments ou de
contenu d’éléments HTML
n Ajout
¨ append()
Insèrer du contenu à la fin des éléments sélectionnés
Accès libre - Réussir son site web avec XHTML et CSS

¨ prepend() Le résultat de ce code source apparaît sur la figure 3-8.

n Insèrer du contenu au début des éléments sélectionnés
Figure 3–8
¨ after() Une mise en exposant et en indice

n Insèrer du contenu après les éléments sélectionnés

¨ before()
n Insèrer du contenu avant lesLes abréviations
éléments sélectionnés
¨ Toutes ces méthodes peuvent
Si vousaussi être
placez un terme utilisé
en notationpour ajouter
raccourcie dans votredes éléments
page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
n Suppression Prenons par exemple le terme ADN, contraction de « acide
¨ remove() ALLER PLUS LOIN
désoxyribonucléique » (ce qui est quand même plus court à prononcer).

n
Prenons un petit
Supprimer les éléments sélectionnés
Abréviations, sigles et acronymes etexemple :
leur contenu (avec leurs enfants)
¨ empty()
La langue française fait la distinction entre : les
abréviations (« Dr » pour Docteur), les sigles


n Supprimer les éléments enfants des éléments sélectionnés
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 167
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Autres possibilités avec jQuery

n Les dimensions
¨ Méthodes width(), height(), …
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

n Les animations Figure 3–8

Une mise en exposant et en indice

¨ Méthode animate()
Les abréviations
n Les appels CSS Si vous placez un terme en notation raccourcie dans votre page, vous

¨ Methodes css(), addClasse(), ... devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
n Les appels AJAX ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 

n etc. (ADN), et les acronymes (Ovni, qui se prononce

comme un mot complet). En XHTML 1.0, on dis-
pose en fait de deux balises :  et
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 168
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 4 – Javascript

Exercice

n Reprendre les exercices JS en utilisant la

librairie jQuery
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 169
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chapitre 5
HTML 5

Contenu: Objectifs, Eléments

supprimés, Nouveaux éléments,
Canvas, Video, Audio, Formulaire,
Stockage local, Caching, Autres.

170
 Chap. 5 – HTML 5

HTML5: le nouveau standard HTML

n Créé en 2006
¨ Même si son développement se poursuit toujours,
Accès libre - Réussir son site web avec XHTML et CSS

plusieurs navigateursLe résultat

supportent sessuréléments
de ce code source apparaît la figure 3-8. et APIs
¨ Version précédente: HTML 4.01 (depuis 1999) Figure 3–8
Une mise en exposant et en indice

n Fruit d’une collaboration entre le W3C et le

Les abréviations
WHATWG (Web Hypertext Application Technology Si vous placez un terme en notation raccourcie dans votre page, vous

Working Group) devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
¨ Le W3C travaillait
A sur XHTML 2.0 et le WHATWG sur les LLER PLUS LOIN
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Prenons un petit exemple :
Web Forms (voir [Link]
La langue française fait la distinction entre : les
Abréviations, sigles et acronymes



[Access date: dec. 2012])

abréviations (« Dr » pour Docteur), les sigles
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-


L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 171
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Les objectifs de la conception

n Baser la création de nouveaux éléments sur HTML, CSS,

DOM, et Javascript
Accès libre - Réussir son site web avec XHTML et CSS

n Réduire la dépendance des navigateurs à des plugins

Le résultat de ce code source apparaît sur la figure 3-8.

externes (comme Flash) Figure 3–8

Une mise en exposant et en indice

n Mieux gérer les erreurs

Les abréviations
n Favoriser le balisage par
Si vousrapport au
placez un terme en scripting
notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
n Rendre HTML indépendant
Prenons pardu médium
exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN

n Augmenter le visibilité du processus de développement

La langue française fait la distinction entre : les
Abréviations, sigles et acronymes Prenons un petit exemple :

visible pour le public
abréviations (« Dr » pour Docteur), les sigles
(ADN), et les acronymes (Ovni, qui se prononce


comme un mot complet). En XHTML 1.0, on dis-

L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 172
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Document HTML5 minimal

n Le DOCTYPE est
obligatoire en HTML5
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

¨ Sa syntaxe est simple Figure 3–8

Une mise en exposant et en indice

<!DOCTYPE html>
Les abréviations
n Document minimal: tous Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

ses éléments sont ALLER PLUS LOIN

Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).

obligatoires Abréviations, sigles et acronymes Prenons un petit exemple :

La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 173
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Les nouveautés dans HTML5

n L’Internet a beaucoup changé depuis l’avènement de HTML 4.01
¨ Certains éléments HTML sont obsolètes, très peu utilisés, ou utilisés à des
fins différentes de celles qui ont guidé leur création.
Ils ont été supprimés ou réécrits dans HTML5
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

n Les nouveautés les plus marquantes de HTML5
¨ Un élément pour le Figure dessin 3–8
Une mise en exposant et en indice
2D
n <canvas>
¨ Les éléments pour le support de contenu multimédia
n <video> et <audio> Les abréviations
¨ Le support du stockage local
Si vous placez un terme en notation raccourcie dans votre page, vous
¨ Des éléments pour du contenu spécifique
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
n <article>, <footer>, <header>, <nav>, <section>, …
Prenons par exemple le terme ADN, contraction de « acide
¨ De nouveaux contôles de formulaires
ALLER PLUS LOIN
désoxyribonucléique » (ce qui est quand même plus court à prononcer).

n calendar,
Abréviations,date,
sigles ettime, Prenons
email, url,
acronymes un petit exemple :
search
La langue française fait la distinction entre : les 

n La suite de ce chapitre est consacrée à une revue rapide de ces

abréviations (« Dr » pour Docteur), les sigles
(ADN), et les acronymes (Ovni, qui se prononce


changements
comme un mot complet). En XHTML 1.0, on dis-
L’attribut sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
la souris, une infobulle apparaîtra pour vous indiquer la signification du


. Nous avons pris ici le parti de ne

parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 174
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Les éléments supprimés

n <acronym> n <center> n <frameset>

Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

n <applet> n
Figure 3–8
<dir> n <noframes>
Une mise en exposant et en indice

n <basefont> n <font>
Les abréviations
n <strike>
Si vous placez un terme en notation raccourcie dans votre page, vous

n <big> n <frame> n <tt>

devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 175
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Les nouveautés: éléments

sémantiques/structurels
Balise Description
<article> Définit un article
<aside> Définit du contenu « à côté » du contenu de la page
<bdi> Isole une partie de texte qui alors peut être formaté d’une façon
Accès libre - Réussir son site web avec XHTML et CSS

différente
<command> Définit une bouton de commande
Le résultat de ce code sourceaccessible à l’utilisateur
apparaît sur la figure 3-8.
<details> Définit des détails visionnable/masquable par l’utilisateur
<summary> DéfinitFigure une 3–8entête visible pour un élément <details>
Une mise en exposant et en indice
<figure> Spécifie une illustration, diagramme, photos, listing de code, etc.
<figcaption> Définit une légende pour un élément <figure>
<footer> Définit un footer pour un document ou une section
<header> Définit une entête Lespour abréviations
un document ou une section
<hgroup> Groupe un ensemble Si vous d’éléments
placez un terme en <h1>notation
…raccourcie
<h6> dans dans votre
le caspage, vous
d’entêtes multi-niveaux devez le placer à l’intérieur de la balise  . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
<mark> Définit un texte mis en exergue
Prenons par exemple le terme ADN, contraction de « acide
<nav> Définit des liensdésoxyribonucléique
de navigation» (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
<progress> Représente la progression
Abréviations, sigles et acronymes Prenons un petitd’une
exemple tâche
:
<section>
La langue française faitDéfinit une: lessection
la distinction entre dans un document

<time>
abréviations (« Dr » pourDéfinit une
Docteur), les siglesdate/heure

(ADN), et les acronymes (Ovni, qui se prononce
<wbr>comme un mot complet). Définit
En XHTML 1.0, uneon dis-coupure de ligne possible
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
… . Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
terme (voir figure 3-9).
! parler que de la balise  car c’est la plus
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 176
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Les nouveautés: éléments

« multimédia »
n <audio>
¨ Définit du contenu sonore
Accès libre - Réussir son site web avec XHTML et CSS

n <video> Le résultat de ce code source apparaît sur la figure 3-8.

¨ Définit une vidéo
Figure 3–8

n <source> Une mise en exposant et en indice

¨ Définit ressource média qui correspond à une source pour un élément

<video> ou <audio> Les abréviations
n <embed> Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
¨ Définit un conteneur pour une application externe ou un contenu
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
interactif Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
n <track>Abréviations, sigles et acronymes Prenons un petit exemple :

¨ Définit un descriptif
Docteur), les siglestextuel
La langue française fait la distinction entre : les
abréviations (« Dr » pour de piste pour un élément <video> ou


(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
<audio>
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 177
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Les nouveautés: l’élément <canvas>

n Il est utilisé pour dessiner à la volée

Accès libre - Réussir son site web avec XHTML et CSS

¨A travers des scripts Le résultat de ce code source apparaît sur la figure 3-8.

n Javascript le plus souvent Figure 3–8

Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 178
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Les nouveautés: les éléments

formulaires
n <datalist>
¨ Spécifie une liste d’options prédéfinies pour des
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

contrôles d’entrée Figure 3–8
Une mise en exposant et en indice

n <keygen>
Les abréviations
¨ Définit un générateur d’une paire de clés (privée, Si vous placez un terme en notation raccourcie dans votre page, vous

publique) pour un formulaire devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN

n <output> La langue française fait la distinction entre : les

Abréviations, sigles et acronymes Prenons un petit exemple :

abréviations (« Dr » pour Docteur), les sigles 

¨ Définit le
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
pose en fait de deux balises :  et
résultat d’un calcul L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 179
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

L’élément <canvas>
n Sert à la spécification de
canevas
¨ C’est une zone rectengulaire
sur une page Web
Accès libre - Réussir son site web avec XHTML et CSS

¨ Par défaut un caneva est Le résultat de ce code source apparaît sur la figure 3-8.
sans bordure ni contenu
Figure 3–8
Une mise en exposant et en indice
n Attributs spécifiques
¨ width, height
Les abréviations
n Le dessin dans un canevas Si vous placez un terme en notation raccourcie dans votre page, vous
est réalisé avec l’aide d’un
devez le placer à l’intérieur de la balise . Cette balise permet de 

script à écrire (en JS, parregrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

exemple) Prenons par exemple le terme ADN, contraction de « acide

désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Prenons un petit exemple :
n Exemple: ci-contre un caneva
La langue française fait la distinction entre : les
Abréviations, sigles et acronymes

et un script
abréviations («JS
Dr » pour associé
Docteur), les siglespour



dessiner
comme un rectange
un mot complet). En XHTML 1.0, on rouge
(ADN), et les acronymes (Ovni, qui se prononce
dis-
L’attribut sert à afficher une infobulle. Si vous survolez ADN avec

de 150px/75. Nous avons pris ici le parti de neet la souris, une infobulle apparaîtra pour vous indiquer la signification du
pose en fait de deux balises :



parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 180
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Propriétés et méthodes de l’objet

getContex(“2d”)
n fillStyle n arc(x,y,r,start,stop)
¨ Style de remplissage, peut être ¨ Dessine un arc
du CSS
Accès libre - Réussir son site web avec XHTML et CSS

n font
Le résultat de ce code source apparaît sur la figure 3-8.
n fillRect(x,y,width,height) ¨ Définit les propriétés
Figure 3–8 (font) de texte
¨ Dessinner un
Une mise en rectange
exposant et en indice

n fillText(text,x,y)
n moveTo(x,y) ¨ Dessine un texte plein
Les abréviations
¨ Aller jusqu’au point spécifié
strokeText(text,x,y)
Si vous placez un termenen notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
n lineTo(x,y) Dessine un texte non
¨ et sigles (voir encadré ci-contre).
regrouper les acronymes, abréviations
terme plein
¨ Tracer une ligne jusqu’au point » (ce qui est quand même plus court à prononcer).
Prenons par exemple le
désoxyribonucléique
ADN, contraction de « acide

spécifié ALLER PLUS LOIN

Abréviations, sigles et acronymes n drawImage(image,x,y)
Prenons un petit exemple :
La langue française fait la distinction entre : les
n stroke(), fill()
abréviations (« Dr » pour Docteur), les sigles ¨ Dessine une image


(ADN), et les acronymes (Ovni, qui se prononce

¨
comme un mot complet). En XHTML 1.0, on dis-
pose en fait de deux balises :  et Méthodes ”encre” n …
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
la souris, une infobulle apparaîtra pour vous indiquer la signification du
. Nous avons pris ici le parti de ne
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 181
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

L’élément <video>
n Permet de spécifier de manière
standard une vidéo dans une page
Web
Accès libre - Réussir son site web avec XHTML et CSS

n Attributs spécifiques
¨ width, height, controls Le résultat de ce code source apparaît sur la figure 3-8.

n Sous éléments Figure 3–8

Une mise en exposant et en indice
¨ <source>
n Pointent vers les différents fichiers vidéos.
La 1ere vidéo supportée sera chargée
¨ <track> Les abréviations
n Spécifient les tracks de la vidéosSi vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
n Exemples de formats supportésregrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
¨ OGG Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
n Navigateurs:
ALLER FF
PLUS LOIN4.0, GC 6, O 10.6
Prenons un petit exemple :
¨ MP4 Abréviations, sigles et acronymes

n IE 9, GC
La langue 6, AS
française fait la5distinction entre : les
abréviations (« Dr » pour Docteur), les sigles


¨ WEBM
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
FF L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
n et pose 4.0,
en faitGC 6, Obalises
de deux 10.6 : 
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 182
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Les méthodes et évènements DOM

associés à <video>
n Méthodes
¨ play(), pause(), load(), addTextTrack(), …
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

n Propriétés Figure 3–8

Une mise en exposant et en indice

¨ audioTracks, autoplay, buffered, played,

paused, ended, src, volume, startDate, muted,
Les abréviations
… Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide

n Evènements ALLER PLUS LOIN

Abréviations, sigles et acronymes
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Prenons un petit exemple :

¨ abort, ended, play, playing, error, …

La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 183
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Exercice
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

n Ecrire le code
permettant de Figure 3–8
Une mise en exposant et en indice

réaliser
l’application Les abréviations
capturée ci- Si vous placez un terme en notation raccourcie dans votre page, vous
contre devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 184
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

L’élément <audio>
n Permet de spécifier de manière
standard un contenu audio dans une
page Web
Accès libre - Réussir son site web avec XHTML et CSS

n Attributs spécifiques
¨ autoplay, loop, src, controls, … Le résultat de ce code source apparaît sur la figure 3-8.

n Sous éléments Figure 3–8

Une mise en exposant et en indice
¨ <source>
n Pointent vers les différents fichiers audio.
Le 1er fichier de format supporté sera
chargé Les abréviations
n Exemples de formats supportésSi vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
¨ OGG regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
n Navigateurs: FF 4.0, GC 6, O 10.6
Prenons par exemple le terme ADN, contraction de « acide
¨ MP3 ALLER PLUS LOIN
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
n IE Abréviations,
9, GC 6, AS 5et acronymes
sigles Prenons un petit exemple :
¨ WAVLa langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
n (ADN), et les acronymes (Ovni, qui se prononce FF 4.0, GC 6, O 10.6, AS 5
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 185
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Les nouveaux types de <input>

n Pour un meilleur contrôle et une meilleure
validation de la saisie
Accès libre - Réussir son site web avec XHTML et CSS

¨ color, date, datetime, email, month, number, Le résultat de ce code source apparaît sur la figure 3-8.

range, search, tel, time, url, week, …

Figure 3–8
Une mise en exposant et en indice

n Support très varié pas les navigateurs

Les abréviations
principaux Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

¨ Opera est 1er, il les supporte tous sauf tel Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN

¨ Viennent ensuite Chrome, Safari, et Mozilla,

Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 

¨ IE ferme la marche
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 186
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Les nouveaux attributs de <form> et

<input>
n <form>
¨ autocomplete, novalidate
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

n <input> Figure 3–8

Une mise en exposant et en indice

¨ autocomplete, autofocus, form, formaction,

Les abréviations
formenctype, formmethod, formnovalidate, Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
formtarget, list, min, max, multiple, pattern,
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide

required, step, …
ALLER PLUS LOIN
Abréviations, sigles et acronymes
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 187
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Les nouveaux attributs de <form> et

<input>: Exemples
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 188
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Les nouveaux sous-éléments de

<form>
n <datalist>
¨ Spécifie une liste
d’options prédéfinies
Accès libre - Réussir son site web avec XHTML et CSS

pour des contrôlesLe résultat de ce code source apparaît sur la figure 3-8.
d’entrée
Figure 3–8
Une mise en exposant et en indice
n <keygen>
¨ Définit un générateur
d’une paire de clésLes abréviations
(privée, publique)Sidevez
vous placez un terme en notation raccourcie dans votre page, vous
le placer à l’intérieur de la balise . Cette balise permet de


pour un formulaire regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
n <output> ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :

¨ La langue française fait la distinction entre : les

abréviations (« Dr » pour Docteur), les sigles Définit le résultat 

(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis- d’un calcul L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 189
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Le stockage Web

n Jusqu’ici fait avec l’aide de cookies

Accès libre - Réussir son site web avec XHTML et CSS

n Plus rapide et sécurisé avec HTML 5 Le résultat de ce code source apparaît sur la figure 3-8.

¨ Les données ne sont pas transmises dans toutes Figure 3–8

les requêtes serveurs Une mise en exposant et en indice

¨ Plus de possibilités (en terme de volume des

Les abréviations
données à stoker) sans affecter les
Si vous placez un terme en notation raccourcie dans votre page, vous
performances du regrouper
site
devez le placer à l’intérieur de la balise . Cette balise permet de
les acronymes, abréviations et sigles (voir encadré ci-contre).


Prenons par exemple le terme ADN, contraction de « acide

n Les données sont stockées en pairs ALLER PLUS LOIN

Abréviations, sigles et acronymes
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Prenons un petit exemple :

clé/valeurs et sont accessibles uniquement

La langue française fait la distinction entre : les
abréviations (« Dr » pour Docteur), les sigles



aux sites les ayant stocker

(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
pose en fait de deux balises :  et
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
la souris, une infobulle apparaîtra pour vous indiquer la signification du
. Nous avons pris ici le parti de ne
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 190
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Le stockage Web: et

n Les 2 nouveaux objets JS responsables du

stockage des données
Accès libre - Réussir son site web avec XHTML et CSS

¨ pour vérifier le support

Le résultatpar lesource
de ce code navigateur
apparaît sur la figure 3-8.

n if(typeof(Storage)!=="undefined"){//Code
Figure 3–8
ICI…}
Une mise en exposant et en indice

n localStorage enregistre les données sans délai

d’expiration Les abréviations
¨ Elles ne seront pas supprimées à la. Cette fermeture
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise balise permet de
du


navigateur resterontregrouper
disponibles
les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
n sessionStorage est identique à localStorage sauf ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :

que les données sont supprimées à la fermeture

La langue française fait la distinction entre : les
abréviations (« Dr » pour Docteur), les sigles



du navigateur
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 191
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Le stockage Web: Exercice

n Compter le nombre de fois qu’on a cliqué

sur un bouton
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 192
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Le stockage Web: Solution

Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 193
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

La mise en cache
n Permet l’accès à des ressources en mode offline
n Avantages
Accès libre - Réussir son site web avec XHTML et CSS

¨ Navigation offline Le résultat de ce code source apparaît sur la figure 3-8.

¨ Rapidité
¨ Réduction des
Une mise traitements
en exposant
Figure 3–8
et en indice serveurs
n N’est pas activée pour une page si elle n’indique pas un fichier
manifest Les abréviations
<!DOCTYPE HTML>
Si vous placez un terme en notation raccourcie dans votre page, vous
<html manifest=”[Link]">
devez le placer à l’intérieur de la balise . Cette balise permet de
...
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

</html> Prenons par exemple le terme ADN, contraction de « acide

désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Prenons un petit exemple :
n Un fichier manifest doit être servi avec un type MIME correct Abréviations, sigles et acronymes
La langue française fait la distinction entre : les 
¨ text/cache-manifest
abréviations (« Dr » pour Docteur), les sigles (config.
(ADN), et les acronymes (Ovni, qui se prononce
coté serveur)


comme un mot complet). En XHTML 1.0, on dis-

L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 194
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

La mise en cache: le fichier manifest

n Contient trois sections

¨ CACHE MANIFEST
Accès libre - Réussir son site web avec XHTML et CSS

n Les fichiers listés sous cette

entête seront mis en cache après
Le résultat de ce code source apparaît sur la figure 3-8.
leur 1er téléchargement
Figure 3–8
¨ NETWORK
Une mise en exposant et en indice

n Les fichiers listés sous cette

entête requièrent une connexion
Les
au serveur et ne seront abréviations
jamais mis
en cache Si vous placez un terme en notation raccourcie dans votre page, vous
¨ FALLBACK devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
n Les fichiers listés Prenons sous parcette exemple le terme ADN, contraction de « acide
entêteALLERindiquentPLUS LOIN
des pages “de» (ce qui est quand même plus court à prononcer).
désoxyribonucléique
secours”
Abréviations, sigles àetcharger
acronymes dans le un
Prenons cas
petit de
exemple :
l’indiponibilité
La langue d’une
française fait la distinction entre : les autre
désignée
abréviations (« Dr » pour Docteur), les sigles
(ADN), et les acronymes (Ovni, qui se prononce


comme un mot complet). En XHTML 1.0, on dis-

L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
n Exemple: voir l’encadré ci-contre
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne
parler que de la balise  car c’est la plus
la souris, une infobulle apparaîtra pour vous indiquer la signification du
terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 195
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Autres aspects HTML 5 – A vous de

jouer
n Images SVG
Géolocalisation
Accès libre - Réussir son site web avec XHTML et CSS

n
Le résultat de ce code source apparaît sur la figure 3-8.

n Effets Drag and Drop Figure 3–8

Une mise en exposant et en indice

n Les Web workers

¨ Exécution en arrière plan
Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
n Les SSEs (Server-Sent Events) devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

¨ Pour la réception automatique Prenons par exempled’éléments du serveur

le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
pour
une mise Aà jour de la page courante
Abréviations, sigles et acronymes
LLER PLUS LOIN
Prenons un petit exemple :
La langue française fait la distinction entre : les 

n … abréviations (« Dr » pour Docteur), les sigles

(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-


L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 196
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chapitre 6
Les bases de la
programmation en PHP

Contenu: Les modèles HTML, Composants

d’une application Web, Types de scripts,
Structure et Fonctionnement d’une application
Web, L’environnement de développement,
Exemples de programmes, Les éléments du
langage PHP.

197
 Chap. 5 – HTML 5

Le modèle HTML statique

Serveur WEB
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8. htdocs

Figure 3–8 Fichier [Link]

<html>
Hello Une mise en exposant et en indice
<html>
<body>
Hello <body>
Internet Hello
</body> Les abréviations
</html> </body>
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette </html>
balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 198
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Le modèle HTML dynamique avec les

CGI
Serveur WEB
Accès libre - Réussir son site web avec XHTML et CSS

Cgi-bin
Le résultat de ce code source apparaît sur la figure 3-8. [Link]
<html>
Hello Internet execution %a#|^%%§!$¤
<body>
<html> Figure 3–8
Une mise en exposant et en indice
Hello
<body>
</body>
Hello
</html>
</body> Les abréviations
</html> Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
[Link] exemple le terme ADN, contraction de « acide
Prenons
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
printf("<html>");
ALLER PLUS LOIN
Prenons un petit exemple :
Abréviations, sigles et acronymes
printf("<body>");
La langue française fait la distinction entre : les
abréviations (« Dr » pour Docteur), les sigles printf("<Hello>");


(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis- printf("</body>"); compilation
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne
printf("</html>");
la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 199
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Le modèle HTML dynamique avec un

interpréteur
Serveur WEB

htdocs

[Link]
printf("<html>");
<html> Internet printf("<body>");
Hello printf("<Hello>");
<body>
Hello printf("</body>");
Interprêteur
printf("</html>");
</body>
</html>

200
AP5, DUT-DST/DGI/ESP/UCAD/SN, [Link]
 Chap. 5 – HTML 5

Application Web: présentation

fonctionnelle
n Une application Web c’est
¨ Un formulaire inséré dans une page Web
Accès libre - Réussir son site web avec XHTML et CSS

n Permettant à un utilisateur de transmettre des données, de

Le résultat de ce code source apparaît sur la figure 3-8.
déposer une demande, etc.
¨ Un serveur traitant
Une mise en exposant et en indice cette demande et envoyant une Figure 3–8

réponse, un accusé de réception, etc.

¨ Exemples
Les abréviations
n Les réservations deSi vols vous placez un terme en notation raccourcie dans votre page, vous
n La gestion de comptes devez le bancaires
placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
n L’inscription universitaire Prenons par exemple le terme ADN, contraction de « acide
n Le formulaire ALLER PLUS LOIN de déclaration
désoxyribonucléique d’impôts
» (ce qui est quand même plus court à prononcer).
Prenons un petit exemple :
n Les annuaires
Abréviations, sigles et acronymes
La langue française fait la distinction entre : les 
n Etc.
abréviations (« Dr » pour Docteur), les sigles
(ADN), et les acronymes (Ovni, qui se prononce


comme un mot complet). En XHTML 1.0, on dis-

L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 201
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Application Web: présentation

technique
n Une application Web c’est
¨ Une page Web contenant un formulaire HTML envoyé au
Accès libre - Réussir son site web avec XHTML et CSS

client Le résultat de ce code source apparaît sur la figure 3-8.

¨ Du code “autonome” s’exécutant sur un serveur HTTP
Figure 3–8
n LeUne programme
mise en exposant et en indice est auto suffisant, il calcule par exemple la

racine carrée d’un nombre

¨ Ou du code s’exécutant sur un serveur HTTP et accédant
à des services “nonLes abréviations
Web”
Si vous placez un terme en notation raccourcie dans votre page, vous
¨ Accès à des bases dele données
devez placer à l’intérieur de la balise . Cette balise permet de
¨ Accès à des serveurs LDAP
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
¨ ... MaisA peut être désoxyribonucléiqueaussi du» (cecode qui est quands’exécutant dans le
même plus court à prononcer).
navigateur
LLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les
n
abréviations (« Dr » pour Docteur), les sigles Validation, vérification des saisies


(ADN), et les acronymes (Ovni, qui se prononce
n un mot complet). En XHTML 1.0, on dis-
comme Ergonomie du formulaire
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 202
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes doivent [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Composants nécessaires à une

appication web
n Obligatoirement un serveur HTTP !
¨ Apache, (éventuellement IIS)
Accès libre - Réussir son site web avec XHTML et CSS

n De quoi faire exécuter unLeprogramme sur le serveur

résultat de ce code source apparaît sur la figure 3-8.
¨ On peut programmer en C, en Fortran ou en assembleur : ce sont des
CGI, ils ne sont Figure pas3–8indépendants de la plateforme d’exécution !
Une mise en exposant et en indice
¨ On préfèrera utiliser des interpréteurs
n PHP, Java, Perl qui eux sont indépendants de la plateforme d’exécution
Les abréviations
n Souvent une base de données
Si vous placez un terme en notation raccourcie dans votre page, vous
¨ MySQL, PostgreSQL oudevez
Oracle,
le placer àetc.
l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
n La possiblité de solliciter unparinterpréteur
Prenons exemple le terme ADN, “client” (localisé
contraction de « acide sur le
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
navigateur Adu client) Prenons un petit exemple :
LLER PLUS LOIN
Abréviations, sigles et acronymes
¨ Mozilla, Opera, IE, ... et leur
La langue française fait la distinction entre : les
interpréteur commun : JavaScript

abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 203
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Scripts: C? ou S?
n En terme de code, il faut bien distinguer
¨ Ce qui est exécuté sur le serveur : le script PHP
n Tout comme les ASP (VBScript), les JSP (servlets Java), les
Accès libre - Réussir son site web avec XHTML et CSS

CGI (C, Fortan, …)

Le résultat de ce code source apparaît sur la figure 3-8.
¨ Et ce qui est exécuté sur le navigateur : le script
JavaScript Figure 3–8
Une mise en exposant et en indice

n Tout comme les applets (Java), les ActiveX, les plugins

propriétaires
Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

¨ L’utilisateur agit surPrenons

un objet
désoxyribonucléique de formulaire
» (ce qui est quand même plus:court à prononcer).
par exemple le terme ADN, contraction de « acide
ALLER PLUS LOIN
Clic sur
nAbréviations, 1 bouton,Prenons
sigles et acronymes remplissage
un petit exemple : d’1 champ, sélection dans 1
La langue française fait la distinction entre : les
abréviations (« Dr » pour Docteur), les sigles
liste, … 


¨
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis- La page se recharge
L’attribut sert à afficher une infobulle. Si vous survolez ADN avec

pose en fait de deux balises :  et
¨
. Nous avons pris ici le parti de ne
parler que de la balise  car c’est la plus
… la souris, une infobulle apparaîtra pour vous indiquer la signification du
terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 204
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Evènementielle vs Séquentielle
n La programmation en JavaScript est de type
événementielle.
Accès libre - Réussir son site web avec XHTML et CSS

¨ On écrira essentiellement de sur courtes

Le résultat de ce code source apparaît la figure 3-8. fonctions
réalisant des tests ou manipulant l’interface
Figure 3–8

n Par exemple, on teste immédiatement, lors de la saisie du

Une mise en exposant et en indice

champ «âge du candidat», que les caractères entrés sont

bien des chiffres et que
Les la valeur est cohérente.
abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous

n La programmation en PHP est plutôt séquentielle devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
¨ Par exemple,
A
on désoxyribonucléique
déroule les
LLER PLUS LOIN
» (ce qui instructions permettant
est quand même plus court à prononcer).

La langue française fait la distinction entre : les

d’insérer dans laPrenonsbase
Abréviations, sigles et acronymes
de données les valeurs
un petit exemple :

abréviations (« Dr » pour Docteur), les sigles
(ADN), et les acronymes (Ovni, qui se prononce transmises depuis le formulaire. 

comme un mot complet). En XHTML 1.0, on dis-

L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 205
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

La nature de ses scripts

Ou sur
les
Toujours bien choisir
Accès libre - Réussir son site web avec XHTML et CSS

n deux ?
Le résultat de ce code source apparaît sur la figure 3-8.

¨ Ce qui va s’exécuter Figure 3–8

Une mise en exposant et en indice

sur le navigateur ...

¨ Et ce qui va Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
s’exécuter sur le devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

serveur ALLER PLUS LOIN

Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 206
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

La nature de ses scripts:

recommandations
n Si vous faites un contrôle de saisie
¨ Vous pouvez utiliser JavaScript sur le client
Accès libre - Réussir son site web avec XHTML et CSS

n Avantage
¨ Rapidité, instantanéité, sanction
Le résultat immédiate,
de ce code passurd’accès
source apparaît réseau
la figure 3-8.

n InconvénientFigure 3–8
Si vous utilisez seulement un contrôle JS votre application doit s’assurer que JS
¨ mise en exposant et en indice
Une
n’est pas désactivé sur le navigateur
¨ Vous pouvez utiliser PHP sur le serveur
n Avantage Les abréviations
¨ Impossible de court-circuiter le un
Si vous placez contrôle
terme en notation raccourcie dans votre page, vous
n Inconvénient devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
¨ Accès serveur, pas de contrôle pas à pas possible, sanction a posteriori
Prenons par exemple le terme ADN, contraction de « acide
¨ Vous pouvez
A
utiliser les deux » (ce qui est quand même plus court à prononcer).
désoxyribonucléique
LLER PLUS LOIN
Prenons un petit exemple :
Avantage
Abréviations, sigles et acronymes
n
La langue française fait la distinction entre : les
¨
abréviations (« Dr » pour Docteur), les sigles
Rapidité et contrôle temps réel


(ADN), et les acronymes (Ovni, qui se prononce
n
comme un mot complet). En XHTML 1.0, on dis-
Inconvénient
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait¨de deux balises :  et Double codage la souris, une infobulle apparaîtra pour vous indiquer la signification du
. Nous avons pris ici le parti de ne
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 207
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

La nature des scripts: exercice

n Vous désirerez concevoir une calculette €

sur votre page Web.
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

¨ Par qui allez-vous faire effectuer la

Figure 3–8

conversion?
Une mise en exposant et en indice

n Par du code JSLessur le navigateur?

abréviations
n Par du code PHP
Si vous sur
placez unletermeserveur?
en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de

regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

n Vous voulez insérer sur cette même page ALLER PLUS LOIN
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Prenons un petit exemple :
un script qui affiche l’heure.
Abréviations, sigles et acronymes
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce

¨ Script C?
comme un mot complet). En XHTML 1.0, on dis-
pose en fait de deux balises :  et ou S? L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
la souris, une infobulle apparaîtra pour vous indiquer la signification du
. Nous avons pris ici le parti de ne
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 208
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Intérêt des traitements côté serveur

n Création dynamique de pages web
¨ Exploitation d'autres serveurs
n SGBD, SGF, LDAP, SMTP, …
Accès libre - Réussir son site web avec XHTML et CSS

¨ Cas classique Le résultat de ce code source apparaît sur la figure 3-8.

n Traitement d'un formulaire et réponse
Figure 3–8

n Transmissions allégées vers le client alors de plus en plus Une mise en exposant et en indice

léger
¨ Moins de scripts transmis
Les abréviations
n Souvent une simple page web
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de

n Tests pour une adaptation aux versions des navigateurs

Prenons par exemple le terme ADN, contraction de « acide
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

désoxyribonucléique » (ce qui est quand même plus court à prononcer).

n Tests d'authentification
Abréviations, sigles et acronymes des clients
Prenons un petit exemple :
ALLER PLUS LOIN

La langue française fait la distinction entre : les 

n Tests de l'état du serveur

abréviations (« Dr » pour Docteur), les sigles
(ADN), et les acronymes (Ovni, qui se prononce


comme un mot complet). En XHTML 1.0, on dis-

L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 209
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

L’interprétation sur le serveur

n Initialisée par le navigateur client: appel d'une URL (fichier
php, ...)
¨ Explicitement
Accès libre - Réussir son site web avec XHTML et CSS

n Par l’utilisateur Le résultat de ce code source apparaît sur la figure 3-8.

¨ Implicitement
Figure 3–8
n Par Une
exemple, après
mise en exposant et en indice une action sur un formulaire

n Entrée
¨ Lesvariables
Paramètres d'exécution, abréviationsd'environnement du serveur
Web Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
n Traitement Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
¨ Code classique
A (variables, instructions à réaliser sur le serveur)
LLER PLUS LOIN
Prenons un petit exemple :
Abréviations, sigles et acronymes

n Sortie
La langue française fait la distinction entre : les
abréviations (« Dr » pour Docteur), les sigles
(ADN), et les acronymes (Ovni, qui se prononce



¨ comme un mot complet). En XHTML 1.0, on dis-

pose en fait de deux balises :  et
Le HTML produit (commandes
L’attribut PHP:
sert à afficherprint, echo,
une infobulle. Si vous ...)
 survolez ADN avec
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 210
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Fonctionnement général
Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 211
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Environnement de travail
n Une large gamme d’outils libres et d’installation très simple
¨ EasyPHP (Windows)
n [Link]
Accès libre - Réussir son site web avec XHTML et CSS

¨ XAMPP (Multi-plateforme)
Le résultat de ce code source apparaît sur la figure 3-8.
n [Link]
Figure 3–8
¨ La suite AMP
Une mise en exposant et en indice

n LAMP (Linux)
¨ [Link]
n WAMP (Windows) Les abréviations
¨ [Link]
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
n MAMP (MacOS) regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
¨ [Link] Prenons par exemple le terme ADN, contraction de « acide
n Autres:ALLERSAMP
PLUS LOIN
(Solaris), iAMP (iSeries),
désoxyribonucléique OAMP
» (ce qui est (OpenBSD),
quand même …
plus court à prononcer).
Prenons un petit exemple :
¨ etc. Abréviations, sigles et acronymes
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 212
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Environnement de travail: Installer,

configurer, comprendre. Exemple de MAMP

n Répertoire de publication (racine du

Accès libre - Réussir son site web avec XHTML et CSS

Le résultat de ce code source apparaît sur la figure 3-8.

serveur Web) Figure 3–8
Une mise en exposant et en indice

¨ <InstallDir>\MAMP\htdocs
Les abréviations
n 2 fichiers de configuration principaux Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).

¨ InstallDir>\MAMP\conf
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Prenons un petit exemple :
n [Link]
Abréviations, sigles et acronymes
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis- n [Link] L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 213
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Premier programme
n L’édition du script PHP est
réalisé avec un éditeur
quelconque [Link]
Accès libre - Réussir son site web avec XHTML et CSS

¨ Notepad, Context, Emacs,Vi, …

Le résultat de ce code source apparaît sur la figure 3-8.

n Editer ce programme
Figure 3–8
Une mise en exposant et en indice

n Copier le à la racine du serveur

(htdocs, www, etc.)
Les abréviations
n Appeler l'url suivante avecSivotre
vous placez un terme en notation raccourcie dans votre page, vous
navigateur favoris pour voirregrouper
lele placer
devez à l’intérieur de la balise . Cette balise permet de
les acronymes, abréviations et sigles (voir encadré ci-contre).


résultat Prenons par exemple le terme ADN, contraction de « acide

¨ [Link]
ALLER PLUS LOIN
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
Abréviations, sigles et acronymes Prenons un petit exemple :
n L'extension de
La langue française fait lavotre fichier
distinction entre : les doit 

être .php
(ADN), et lesafin
acronymesqu’il
(Ovni, qui soit
abréviations (« Dr » pour Docteur), les sigles
se prononceinterprété 

par leposeserveur
en fait de deuxWeb.
comme un mot complet). En XHTML 1.0, on dis-
balises :
 et
L’attribut sert à afficher une infobulle. Si vous survolez ADN avec

la souris, une infobulle apparaîtra pour vous indiquer la signification du
. Nous avons pris ici le parti de ne
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 214
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Deuxième programme
n Au résultat, vous recevrez une page
contenant toutes les caractéristiques et
Accès libre - Réussir son site web avec XHTML et CSS

options de votre interpréteur et Le résultat de ce code source apparaît sur la figure 3-8.

environnement PHP. [Link]

Figure 3–8
Une mise en exposant et en indice

Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
devez le placer à l’intérieur de la balise . Cette balise permet de
regrouper les acronymes, abréviations et sigles (voir encadré ci-contre).
Prenons par exemple le terme ADN, contraction de « acide
désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN
Abréviations, sigles et acronymes Prenons un petit exemple :
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles 
(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut  sert à afficher une infobulle. Si vous survolez ADN avec
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 215
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chap. 5 – HTML 5

Les éléments du langage PHP

n Nous aborderons dans le reste de ce
chapitre les éléments suivants
Accès libre - Réussir son site web avec XHTML et CSS

¨ Structure etéléments de
Le résultat de ce codebase
source apparaît sur la figure 3-8.

¨ Types et variables Figure 3–8

Une mise en exposant et en indice

¨ Opérateurs
¨ Structures de contrôle
Les abréviations
Si vous placez un terme en notation raccourcie dans votre page, vous
¨ Variables d’environnement et variables
et sigles (voir encadréissues
devez le placer à l’intérieur de la balise
regrouper les acronymes, abréviations
. Cette balise permet de
ci-contre). de 

formulaires Prenons par exemple le terme ADN, contraction de « acide

désoxyribonucléique » (ce qui est quand même plus court à prononcer).
ALLER PLUS LOIN

¨ PHP et les technologies clientes

Prenons un petit exemple : Abréviations, sigles et acronymes
La langue française fait la distinction entre : les 
abréviations (« Dr » pour Docteur), les sigles

¨ Fonctions et bibliothèques de fonctions


(ADN), et les acronymes (Ovni, qui se prononce
comme un mot complet). En XHTML 1.0, on dis-
L’attribut sert à afficher une infobulle. Si vous survolez ADN avec 
pose en fait de deux balises :  et
. Nous avons pris ici le parti de ne la souris, une infobulle apparaîtra pour vous indiquer la signification du
parler que de la balise  car c’est la plus terme (voir figure 3-9).
pérenne. En effet, la balise  dispa-
raîtra dans XHTML 2.0. Les abréviations, sigles et 216
AP5, DUT-DST/DGI/ESP/UCAD/SN,
acronymes [Link]
donc tous être placés dans une
seule balise : . Cela simplifie les choses,
 Chapitre 7
L’interaction avec MySQL
en PHP

Contenu: Quelques rappels sur

les SGBDs et sur SQL, Les
fonctions utiles, Exemples.

217
 Chapitre 8
Eléments avancés de PHP

Contenu: Upload de fichiers,

Transactions et sessions,
Eléments de POO en PHP, La
librairie PDO???.

218