UNIVERSITE IBN ZOHR

FACULTE DES SCIENCES

AGADIR

Technologies du web

F.A. AMAZAL
Département informatique

F.A. AMAZAL Technologies du web 2016-2017 1

Plan du cours

• Chap. 1: Introduction au Web

• Chap. 2: HTML
• Chap. 3: Mise en forme et mise en page
avec CSS
• Chap. 4: JavaScript

F.A. AMAZAL Technologies du web 2016-2017 2

 Introduction au web

Chapitre 1: Introduction au web

• Internet et web
• Fonctionnement du web
• Evolution du Web

F.A. AMAZAL Technologies du web 2016-2017 3

 Introduction au web Internet et web

Le web
• Principe original : accéder à des documents
textuels
 Situés sur des machines accessibles par Internet
 Reliés entre eux par un mécanisme de lien «
hypertexte »
• Actuellement : servir des ressources
 De différentes natures : texte, image, son, vidéo,
contenu applicatif…
 Permettant à l’utilisateur d’accéder à un service
donné : rechercher de l’information, acheter un
objet, accéder à ses mails, consulter ses comptes en
banque…

F.A. AMAZAL Technologies du web 2016-2017 4

 Introduction au web Internet et web

Web ≠ Internet
• Internet
 Réseau mondial d’ordinateurs permettant aux
utilisateurs de communiquer (courrier électronique), de
publier des informations (Web), de transférer des
données (FTP), de travailler à distance (telnet). . .

• Web (ou World Wide Web, Toile, WWW, W3)

 Système hypertexte public : système contenant des
documents liés entre eux par des hyperliens permettant
de passer automatiquement d’un document à l’autre.
• Internet = support de communication
• Web = une partie des contenus circulant sur
l’Internet
F.A. AMAZAL Technologies du web 2016-2017 5
 Introduction au web Internet et web

Internet
• Un réseau de réseaux : ordinateurs interconnectés
• Réseau informatique
mondial constitué d'un
ensemble de réseaux
nationaux, régionaux et privés
qui sont reliés par le protocole
de communication TCP/IP et
qui coopèrent dans le but
d'offrir une interface unique à
leurs utilisateurs.
• «Internet» a été dérivé du
concept d'internetting (en
français : «interconnecter des
réseaux»)
F.A. AMAZAL Technologies du web 2016-2017 6
 Introduction au web Internet et web

Services d’Internet

F.A. AMAZAL Technologies du web 2016-2017 7

 Introduction au web Internet et web

Services d’internet
Email
• Utiliser l’Internet comme la poste:
 déposer un message dans la boîte aux lettres de son
correspondant, qu’il soit ou non devant une machine.
 le correspondant sera capable de le lire à sa prochaine
connexion.

F.A. AMAZAL Technologies du web 2016-2017 8

 Introduction au web Internet et web

Services d’internet
Messagerie
• Msn Messenger, yahoo messenger …
Internet Telephony
• Voice-over Internet Protocol (VoIP)
• Utiliser l’ordinateur comme un téléphone
• Logiciels permettant la transmission de voix
• Très économique

F.A. AMAZAL Technologies du web 2016-2017 9

 Introduction au web Internet et web

Services d’internet
Telnet
• Permet à un utilisateur d’Internet de se
connecter et donc d’utiliser à distance une
machine comme s’il se trouvait face à elle.

F.A. AMAZAL Technologies du web 2016-2017 10

 Introduction au web Internet et web

Services d’internet
World Wide Web
• Développé par Tim-Berners Lee et Robert
Cailliau à la fin des années 1980.
• Un système hypertexte public fonctionnant sur
Internet et qui permet de consulter, avec un
navigateur, des pages mises en ligne dans des
sites.
• Service le plus connu de l’Internet

F.A. AMAZAL Technologies du web 2016-2017 11

 Introduction au web Internet et web

Hypertext
• Référence à la capacité d’inclure dans un
document
 du texte, des images, des sons, des vidéos,
etc…, bref du multimédia
 des liens non-ambigus vers d’autres
documents, qui permettent de les trouver
automatiquement et les ouvrir
• Le Navigateur est l’outil qui permet de visualiser
les documents et ouvrir les liens

F.A. AMAZAL Technologies du web 2016-2017 12

 Introduction au web Internet et web

Hypertext
• L’idée des liens hypertexte: a été proposée au début
dans les années 40 par Vannevar Bush.
• En 1989 : Tim Berners-Lee du European Particle
Physics Laboratory (CERN) a conçu un système
d’hypertexte pour connecter des documents sur le Net.
• Il l a conçu un langage pour spécifier le contenu des
documents. Devenu par la suite : HyperText Markup
Language (HTML).
• Il a conçu un protocole pour télécharger et interpréter
le contenu des documents devenu par la suite HTTP.
• Il a implémenté le premier navigateur Mozaïc :
seulement du texte, PAS d’objet multimédia.

F.A. AMAZAL Technologies du web 2016-2017 13

 Introduction au web Fonctionnement du web

Fonctionnement du web
• Utilisation d’une architecture client/serveur
• Lorsque l'internaute tape
l'adresse (URL) d'un site
dans son navigateur (client),
celui-ci envoie une requête
au serveur qui héberge ce
site.
• Le serveur transmet alors
la page demandée au
navigateur qui l'affiche.
• Afin de se comprendre,
client et serveur Web
utilisent pendant leurs
échanges un protocole
commun
F.A. AMAZAL : HTTP Technologies du web 2016-2017 14
 Introduction au web Fonctionnement du web

Fonctionnement du web
• Client
 C'est le navigateur Internet de l'internaute

 Identifie les serveurs sur Internet

 Demande les ressources aux serveurs

 Affiche les ressources aux utilisateurs

F.A. AMAZAL Technologies du web 2016-2017 15

 Introduction au web Fonctionnement du web

Fonctionnement du web
• Navigateur

 C’est un logiciel qui permet d’analyser le code

(X)HTML et CSS des pages web et d’en produire
un résultat visuel, facile à lire pour un humain

 Exemples: Mozilla Firefox, Microsoft IE, Apple

Safari, Google Chrome, Opera etc

F.A. AMAZAL Technologies du web 2016-2017 16

 Introduction au web Fonctionnement du web

Fonctionnement du web
• Serveur web (serveur http)
 Ensemble ordinateur/logiciel paramétré pour pouvoir traiter
certains types de pages et notamment celles qui contiennent des
instructions de programmation. Il reconnaît ces pages grâce à
l'URL qu'il reçoit, effectue les traitements demandés et transmet
le résultat au format html au browser de l'internaute
 Attend les requêtes HTTP et y répond
 Deux façons de fournir des ressources
 statique : le serveur renvoie les ressources dont il
dispose
 dynamique : la ressource est générée à la réception de la
requête
 Exemples: Apache HTTP Server développé par Apache Software
Foundation, Internet Information Services (IIS) développé par
Microsoft
F.A. AMAZAL Technologies du web 2016-2017 17
 Introduction au web Fonctionnement du web

Fonctionnement du web
• Protocole
Ensemble normalisé de règles décrivant la manière
de transmettre des informations, par exemple sur un
réseau comme Internet entre un client et un serveur.
• HTTP (HTTP HyperText Transfer Protocol)
Le plus utilisé des protocoles de communication sur le
WWW. Permet à un client Web d’indiquer quelle page il
veut obtenir, et au serveur Web de lui répondre en lui
donnant cette page.

F.A. AMAZAL Technologies du web 2016-2017 18

 Introduction au web Fonctionnement du web

Fonctionnement du web
• URL (Uniform Resource Locator)
 Identifie l’endroit où se trouve une ressource sur le
Web.
 Exemple
[Link]
[Link]
– http :protocole
– [Link] :hôte
– /chemin/ :chemin absolu sur le service
– [Link] :nom de la page Web
– q=req :chaine de requête, transmise à la page

F.A. AMAZAL Technologies du web 2016-2017 19

 Introduction au web Fonctionnement du web

Fonctionnement du web
• Page web
 Une ressource du World Wide Web
 Peut contenir du texte, des images, des tableaux, des
formulaires et autres éléments multimédias
 Créée par des webmasters à l’aide des langages
HTML/XHTML et CSS
 Possède une adresse Web
 Visualisée par les internautes grâce à des navigateurs
Web

F.A. AMAZAL Technologies du web 2016-2017 20

 Introduction au web Evolution du web

Evolution du web
• Caractérisé par des pages
Web statiques, rarement
mises à jour
• Considéré principalement
Degré de connectivité des

comme un outil de
diffusion et de visualisation
de données.
• Période:1991-1999
connaissances

Degré de connectivité sociale

F.A. AMAZAL Technologies du web 2016-2017 21

 Introduction au web Evolution du web

Evolution du web • Un nouvelle interactivité et un

travail collaboratif: L’ internaute=
‘créateur de contenu’ et
‘consommateur de contenu’
Les blogs, réseaux sociaux…

• “Trop d’information tue

Degré de connectivité des

l’information” Le Web ne
s’arrêtera jamais de grandir
exponentiellement (1 trilliard de
pages web)
• Période: 2000-2009
connaissances

Degré de connectivité sociale

F.A. AMAZAL Technologies du web 2016-2017 22

 Introduction au web Evolution du web

Evolution du web • “La sémantique est une branche

de la linguistique qui étudie les
signifiés”
• vise à créer, gérer et exploiter
des métadonnées systématiques
pour chaque page web
• Les informations ne seraient plus
Degré de connectivité des

stockées mais "comprises" par les

ordinateurs afin d'apporter à
l'utilisateur ce qu'il cherche
vraiment.
• Période:2010-xx
connaissances

Degré de connectivité sociale

F.A. AMAZAL Technologies du web 2016-2017 23

 Introduction au web Evolution du web

Evolution du web
Degré de connectivité des
connaissances

Degré de connectivité sociale

F.A. AMAZAL Technologies du web 2016-2017 24

 Introduction au web Création d’un site web

Et pour créer?
• Connaitre et utiliser langages du Web (ex. HTML, CSS)
• Utiliser un éditeur. Il en existe deux types :
 Éditeurs WYSIWYG (What You See Is What You Get):
Permettent de rédiger le contenu du site sans avoir à
taper la moindre ligne de code.
Exemples : Nvu (gratuit) , Macromedia Dreamweaver,
FrontPage
 Éditeurs de texte : ils sont gratuits pour la plupart
Exemples : Bloc-Notes, Notepad++
• Tester continuellement son site sur au moins deux
navigateurs à la fois pendant sa création, afin d’être sûr
que tous les visiteurs du site aient le même résultat.

F.A. AMAZAL Technologies du web 2016-2017 25

Chapitre 2: HTML
• Présentation générale
• Corps d’un document HTML

F.A. AMAZAL Technologies du web 2016-2017 26

 HTML Présentation générale

Langage HTML
• Hyper Text Markup Language: Langage de balisage
pour les hypertextes.
• Un hypertexte est un document numérique contenant
des références à d'autres documents qui sont :
 soit accessibles par un clic de souris (hyperlien)
 soit directement inclus dans celui-ci (images, texte,
programme...)
 répartis un peu partout sur internet (d'où le web)

F.A. AMAZAL Technologies du web 2016-2017 27

 HTML Présentation générale

Langage HTML
• Normalisé par le W3C (World Wide Web Consortium)
regroupant industriels (Microsoft, Google, Apple. . . )
et académiques (INRIA, MIT. . . )
• Description de la structure et du contenu d’un
document, accent sur l’accessibilité
• On ne décrit pas la présentation (ce sera le rôle de
CSS)
• On ne décrit pas de comportement dynamique (ce
sera le rôle de JavaScript et des langages côté
serveur)

F.A. AMAZAL Technologies du web 2016-2017 28

 HTML Présentation générale

Balises HTML
• HTML est un langage qui alterne texte et balises
( <blabla> ou </blabla> )
• Les balises permettent de structurer chaque partie du
document et servent par exemple au navigateur pour
réaliser la mise en page du document.
• Exemple:
 <title>Exemple1</title>
 <p>Bonjour tout le monde</p>

F.A. AMAZAL Technologies du web 2016-2017 29

 HTML Présentation générale

Balises HTML
• Leur syntaxe est (balises ouvrante et fermante)
<balise attributs>contenu</balise>

 balise: mot clé désignant un élément particulier

 attributs: représente les différents paramètres associés à
l’élément, sous la forme d’une liste de nom="valeur" ou
nom=’valeur’ , séparés par des espaces
 contenu: peut contenir du texte ou d’autres balises
Exemples:
<p align="center">Bonjour tout le monde</p>
<a href="[Link] Le site YouTube </a>
• Ou (balise sans contenu)
<balise attributs>
Exemple: <hr>
F.A. AMAZAL Technologies du web 2016-2017 30
 HTML Présentation générale

Balises HTML
Exemples
• <title>Accueil</title>
Permet d’attribuer le titre Accueil au document
• <strong>rationnel</strong>
Permet d’indiquer que le texte rationnel est important
(cela sera rendu, le plus souvent, par une mise en gras).
• <em>mondialisation</em>
Permet de mettre en emphase le texte mondialisation (cela
sera rendu, le plus souvent, par une mise en italique).

F.A. AMAZAL Technologies du web 2016-2017 31

 HTML Présentation générale

Balises HTML
• Les noms des éléments et des attributs sont souvent
écrits en minuscule, mais <head> et <HeAd> sont
équivalents.
• Les balises sont ouvertes et refermées dans l’ordre
(<b><i></i></b> et non <b><i></b></i> ).
• Des règles strictes déterminent quelles balises
peuvent être mises à l’intérieur de quelles balises.
• <!--Hello--> dénote un commentaire, qui ne sera ni
affiché ni interprété par le client Web (utile pour
documenter une partie d’une page Web).

F.A. AMAZAL Technologies du web 2016-2017 32

 HTML Présentation générale

Structure d’un document HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link]
<html lang="fr">
<head>
<!-- En-tête du document -->
</head>
<body>
<!-- Corps du document -->
</body>
</html>

• La déclaration <!DOCTYPE ...> précise la version d’HTML

utilisée.
• La langue du document est précisée avec l’attribut lang de la
balise
principale <html>
F.A. AMAZAL Technologies du web 2016-2017 33
 HTML Présentation générale

Structure d’un document HTML

Exemple

F.A. AMAZAL Technologies du web 2016-2017 34

 HTML Présentation générale

En-tête: <head>…</head>
• Rôle: Fournir des informations au sujet du document
• Position: En début de document (après la balise <html> et
avant la balise <body>)
• Contenu
 <title>…</title>
Titre de la fenêtre dans laquelle la page s'affiche
 <meta name="..." content="...">
Permet de spécifier des méta-données sous la forme de
couple attribut-valeur (NAME-CONTENT)
Ces méta-données peuvent être exploitées, par
exemple, par les moteurs de recherche pour effectuer
des recherches sur le contenu effectif du document

F.A. AMAZAL Technologies du web 2016-2017 35

 HTML Présentation générale

En-tête: <meta…>
• <meta name="auteur" content="El Hilali">
• < meta name="keywords" content="page personnelle,
informatique">
• <meta http_equiv="Content-Type" content="text/html;
charset=utf-8">
Permet de spécifier le type de contenu :
 Type de document
 Codage des caractères
• < meta http_equiv ="Content-language" content="fr">
permet d’indiquer la langue du contenu du document

F.A. AMAZAL Technologies du web 2016-2017 36

 HTML Corps d’un document

Corps: <body>…</body>
• Rôle: Délimiter le corps du document
• Position: Placé immédiatement après la balise </head>
• Contenu
 Le corps est structuré en sections, paragraphes, listes,
etc.
 Les balises <p> ... </p> permet de délimiter un
paragraphe. Tous les paragraphes de texte doivent être
balisés ainsi.
 La balise <hr> (horizontal rule) indique une séparation
majeure dans le document (rendue par exemple
graphiquement par une ligne horizontale).

F.A. AMAZAL Technologies du web 2016-2017 37

 HTML Corps d’un document

Paragraphe
• <P ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"> …
</P>
ALIGN: Permet l’alignement des paragraphes. Les
valeurs possibles de cet attribut sont: left, center, right
et justify
• Pour passer (ou sauter) une ligne, on utilise l’élément
<BR>
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 38

 HTML Corps d’un document

Ligne horizontale
• <hr size=" " width=" " align="left|center|right"
color=" ">
 size : épaisseur en pixel de la ligne
 width : largeur de la ligne
 align : alignement à gauche| au centre | à droite
dans la fenêtre
 color :Permet de spécifier la couleur de la ligne
• <hr> : Utilisée sans option, cette balise produit une
ligne grise de 1 pixel d'épaisseur faisant toute la
largeur de la fenêtre
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 39

 HTML Corps d’un document

Titres des sections

• Il existe 6 balises permettant de représenter les titres
de sections, par importance décroissante :
 <h1>Titre de niveau 1</h1>
 <h2>Titre de niveau 2</h2>
 <h3>Titre de niveau 3</h3>
 <h4>Titre de niveau 4</h4>
 <h5>Titre de niveau 5</h5>
 <h6>Titre de niveau 6</h6>

F.A. AMAZAL Technologies du web 2016-2017 40

 HTML Corps d’un document

Titres des sections

• Exemple
<!DOCTYPE html>
<html>
<head>
<title>test Titres</title>
</head>
<body>
<h1>Titre niveau 1</h1>
<h2>Titre niveau 2</h2>
<h3>Titre niveau 3</h3>
<h4>Titre niveau 4</h4>
<h5>Titre niveau 5</h5>
<h6>Titre niveau 6</h6>
</body>
</html>

F.A. AMAZAL Technologies du web 2016-2017 41

 HTML Corps d’un document

Listes
• HTML possède plusieurs balises permettant de
présenter le texte sous forme de listes.
• On en distingue trois types :
les listes non numérotées
les listes numérotées
les listes de définitions (ou lexiques)
• Ces listes peuvent être emboîtées les unes à
l’intérieur des autres.

F.A. AMAZAL Technologies du web 2016-2017 42

 HTML Corps d’un document

Listes
• Les listes classiques :
 Les listes non numérotées délimitées par les balises
<ul> ... </ul> (unordered list).
 Les listes numérotées délimitées par les balises <ol> ...
</ol> (ordered list).
 Tous les éléments d’une liste numérotée ou non sont
délimités par les balises <li> ... </li> (list item)
• Les lexiques sont délimités par les balises <dl> ...
</dl> (definition list) et leurs entrées par les balises
<dt> ... </dt> (term) et <dd> ... </dd> (definition).

F.A. AMAZAL Technologies du web 2016-2017 43

 HTML Corps d’un document

Listes: Exemple

F.A. AMAZAL Technologies du web 2016-2017 44

 HTML Corps d’un document

Listes: attributs
• Listes non numérotées
 L’attribut TYPE="disc|circle|square" Permet de choisir la
forme de la puce (disc par défaut)
• Listes numérotées
 L'attribut TYPE définit le type de numérotation:
 1 : Numérotation en chiffres arabes (1, 2, 3… par
défaut)
 A: Numérotation en lettres majuscules (A, B, C…)
 a: Numérotation en lettres minuscules (a, b, c…)
 i : Numérotation en petits chiffres romains (i, ii, iii…)
 I : Numérotation en grands chiffres romains (I, II,
III…)
 L'attribut START permet de spécifier à partir de quel
niveau la numérotation doit commencer
F.A. AMAZAL Technologies du web 2016-2017 45
 HTML Corps d’un document

Tableaux
• Les tableaux sont délimités par les balises <table>...
</table>
• Les balises <tr> ... </tr> (table row) délimitent les
lignes
• Les balises <td> ... </td> (table data) délimitent les
cellules
• Attention ! On déclare les lignes à l’intérieur du
tableau, les cellules à l’intérieur des lignes
• On peut ajouter de la structure à un tableau en :
 donnant une légende au tableau avec les balises
<caption align="top|bottom" >... </caption> juste
après la balise ouvrante <table>
 AMAZAL
F.A. remplaçant lesTechnologies
<td> ... </td> qui contiennent
du web des
2016-2017 46
 HTML Corps d’un document

Tableaux: Exemple1

F.A. AMAZAL Technologies du web 2016-2017 47

 HTML Corps d’un document

Tableaux: attributs
<TABLE BGCOLOR= "couleur_fond " ALIGN="LEFT|RIGHT|
CENTER" WIDTH="pixels ou%" BORDER="pixels"
CELLPADDING="pixels" CELLSPACING="pixels">

• BGCOLOR: Couleur du fond

• ALIGN: Alignement horizontal
• WIDTH: Largeur du tableau exprimée en pixel ou en
pourcentage de la largeur de la fenêtre (à utiliser avec
prudence)
• BORDER: Largeur de l'encadrement du tableau et des
cellules exprimée en pixels. Si une cellule est vide, il
n'apparaît pas
• CELLPADDING: Marge intérieure de chaque cellule (en
pixels)
• F.A. AMAZAL
CELLSPACING: Technologies
Espace du web
inter-cellules 2016-2017 48
 HTML Corps d’un document

Tableaux: attributs
<TR BGCOLOR="couleur" ALIGN="LEFT|CENTER|RIGHT|
JUSTIFY" VALIGN= "TOP|MIDDLE|BOTTOM" WIDTH="pixel"
>
• ALIGN: Alignement horizontal du contenu de toutes les cellules
de la ligne
• VALIGN: Alignement vertical du contenu de toutes les cellules
de la ligne
<TD BGCOLOR="couleur" ALIGN="LEFT|CENTER|RIGHT|
JUSTIFY" VALIGN="TOP|MIDDLE|BOTTOM" COLSPAN="nb"
ROWSPAN="nb" WIDTH="pixels ou %">
• ALIGN: Alignement horizontal cellule par cellule
• VALIGN: Alignement vertical cellule par cellule

F.A. AMAZAL Technologies du web 2016-2017 49

 HTML Corps d’un document

Tableaux: attributs
• WIDTH
Largeur de la cellule en pixels ou en pourcentage de la largeur
du tableau. A spécifier une seule fois dans le tableau (ie pour
une seule ligne) car elle détermine la largeur de la colonne
dont fait partie la cellule
• COLSPAN
Nombre de cellules fusionnées à l'horizontal
Permet de disposer du texte au dessus de plusieurs colonnes
• ROWSPAN
Nombre de cellules fusionnées à la verticale

F.A. AMAZAL Technologies du web 2016-2017 50

 HTML Corps d’un document

Tableaux: Exemple2

F.A. AMAZAL Technologies du web 2016-2017 51

 HTML Corps d’un document

Tableaux: Exemple3

F.A. AMAZAL Technologies du web 2016-2017 52

 HTML Corps d’un document

Tableaux: Exemple4

F.A. AMAZAL Technologies du web 2016-2017 53

 HTML Corps d’un document

Images
• Pour insérer une image dans un document HTML, on utilise
la balise
<IMG SRC="URL" WIDTH="pixels" HEIGHT="pixels"
ALT="texte alternatif" BORDER="pixels"
TITLE="description" ALIGN="LEFT|RIGHT|TOP|
ABSMIDDLE|MIDDLE|BOTTOM" HSPACE="pixels"
VSPACE="pixels" >
• SRC: Permet de préciser où se trouve l’image à insérer
• WIDTH: Largeur de l'image à afficher.
Si cette option n'est pas spécifiée, l'image est affichée à sa
taille réelle. On indique soit la valeur en pixel, soit en
pourcentage de la taille originale de l'image
• HEIGHT: Hauteur de l'image affichée (mêmes remarques
que pour WIDTH).
F.A. AMAZAL Technologies du web 2016-2017 54
 HTML Corps d’un document

Images
• ALT: text qui s'affiche à la place de l'image en cas d'erreur
• BORDER: taille en pixel de la bordure autour de l'image
• TITLE: permet d'associer à l'image une annotation (Texte
apparaissant dans une info-bulle quand la souris est
positionnée pendant 1 à 2 secondes sur l'image)
• ALIGN: permet d’aligner une image par rapport à la ligne
du texte courante
• HSPACE et VSPACE permettent d’éloigner les texte de
l’image
• NB : quand une seule des deux options WIDTH ou HEIGHT
est spécifiée, l'autre est automatiquement calculée en
proportion.

F.A. AMAZAL Technologies du web 2016-2017 55

 HTML Corps d’un document

Images
• Exemples
<img src="images/[Link]" alt="Arbre sapin"
height="50%" width="50%" title="Arbre sapin" border="3"
>
<img src="[Link]
alt="robot">
• Les formats d’images utilisables pour le Web sont :
 Le JPEG (.jpg), un format adapté aux photos.
 Le GIF (.gif) et le PNG (.png), des formats adaptés aux
autres types d’image ; le PNG est à préférer dans tous
les cas (transparence, profondeur de couleurs. . .) sauf
besoin d’images animées.

F.A. AMAZAL Technologies du web 2016-2017 56

 HTML Corps d’un document

Liens
• Un lien se définit par le marqueur <a ...> suivi de
l’attribut HREF="URL" qui définit l’adresse du
document vers lequel le lien conduit. Il se termine par
</a>
• Syntaxe: <A HREF="adresse"> texte ou image</A>
• Exemple:
<A HREF="[Link] vers
wikipedia</A>
<A HREF="[Link]">Page d’accueil</A>

• Les liens peuvent être de deux types: externes ou

internes
F.A. AMAZAL Technologies du web 2016-2017 57
 HTML Corps d’un document

Liens externes
• Un lien externe est un lien qui mène vers un autre
document
• Deux types de liens externes:
1. Liens vers des pages externes
Exemple:
<A HREF="[Link] vers
wikipedia</A>
2. Liens vers des pages locales (même site)
Exemple:
<A HREF="[Link]">Mes contacts</A>
<A HREF="dossier1/[Link]">Mes contacts</A>

F.A. AMAZAL Technologies du web 2016-2017 58

 HTML Corps d’un document

Liens externes
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 59

 HTML Corps d’un document

Liens externes
• Deux façons pour spécifier un lien:
 Chemin absolu
Indique l'adresse complète du fichier. Il est
généralement utilisé pour afficher une page d'un
autre site

 Chemin relatif
Indique l'adresse du fichier par rapport à la page
actuelle. Il est vivement conseillé de l'utiliser dans
son site web

F.A. AMAZAL Technologies du web 2016-2017 60

 HTML Corps d’un document

Liens externes
• Exemple: Chemin relatif

Racine du
site
Dossier1

[Link]
Href=“[Link]”
ml
[Link] Href= “SousDossier/[Link]
ml
SousDossier Href=“../Dossier2/[Link]
[Link]
Dossier2 ml

[Link]
ml

F.A. AMAZAL Technologies du web 2016-2017 61

 HTML Corps d’un document

Liens internes
• Les liens internes permettent de construire des tables de
matières et des renvois à l’intérieur du même document
• Un lien interne pointe vers une ancre, c’est à dire un endroit
à l’intérieur du même document défini par un nom
• Dans un lien interne, il faut définir:
 L’ancre interne
Syntaxe: <A NAME (ou ID)="NomAncre"></A>
Exemple: <A NAME="HautPage"></A>
 Le lien vers l’ancre
Syntaxe: <A HREF="#NomAncre">mots_sensibles</A>
Exemple:<A HREF="#HautPage>Aller en haut</A>

F.A. AMAZAL Technologies du web 2016-2017 62

 HTML Corps d’un document

Liens internes: Exemple

F.A. AMAZAL Technologies du web 2016-2017 63

 HTML Corps d’un document

Ancres et liens externes

• Il est possible d’utiliser les ancres dans les liens
externes. Il faut alors spécifier l’ancre vers laquelle
pointe le lien en ajoutant #NomAncre à la fin de l’URL
• Exemple:
<a
href="[Link]
Deuxième Partie</a>

Et dans le document [Link] on trouve la définition de

l’ancre suivante:
<a name="partie2"><h2>Partie 2</h2>

F.A. AMAZAL Technologies du web 2016-2017 64

 HTML Corps d’un document

Lien: Envoi d’un email

• Un tel lien lance automatiquement l’application de
messagerie électronique en incluant le nom du
destinataire
• Syntaxe: <A HREF = "Mailto: adresse_Email?Subject=
sujet_msg"> zone_cliquable </A>
Mailto: ouverture d’une session de courrier
électronique à partir du navigateur
subject: sujet du message
• Exemple:
<A HREF = "Mailto:ahmed@[Link]?Subject=
Demande d’information"> Envoyez moi un message
</A>
F.A. AMAZAL Technologies du web 2016-2017 65
 HTML Corps d’un document

Lien: Nouvelle fenêtre

• L'attribut target permet de définir la cible du lien, c'est-
à-dire l'endroit où le fichier du lien sera ouvert
• Pour ouvrir le fichier dans une nouvelle fenêtre, on
assigne la valeur _blank à l’attribut target
• Exemple
<a href="[Link]
target="_blank">Lien ouvrant Wikilivres</a>

F.A. AMAZAL Technologies du web 2016-2017 66

 HTML Corps d’un document

Lien avec une image

• Exemples

F.A. AMAZAL Technologies du web 2016-2017 67

 HTML Corps d’un document

Frames
• Principe
 Diviser la fenêtre d’affichage en frames
 Afficher dans chaque frame une page HTML
• La balise de définition des cadres est<FRAMESET>.
Elle indique au navigateur qu'il va devoir créer des
frames. Elle est placée en dessous de la balise de fin d
’en-tête </HEAD>
• Il faut insérer autant de balises <FRAME> que de
zones différentes à l'écran.
Remarque: <NOFRAME> texte de remplacement
</NOFRAME>
• Permet des spécifier le texte de remplacement pour le
F.A. AMAZAL Technologies du web 2016-2017 68
 HTML Corps d’un document

Frames: Attributs de Frameset

<FRAMESET ROWS="pixels ou %, ..." | COLS="pixels ou
%, …" BORDER="[Link]" FRAMEBORDER="0|1">

• ROWS : division horizontale (hauteurZone_1, …,

hauteurZone_n
• COLS : division verticale (largeurZone_1, …, largeurZone_n)
• BORDER : épaisseur de la bordure entre deux frames
• FRAMEBORDER : contrôle la présence de la bordure entre
les frames

Attention! <FRAMESET></FRAMESET> remplace

<BODY></BODY>

F.A. AMAZAL Technologies du web 2016-2017 69

 HTML Corps d’un document

Frames
Division horizontale de l'écran
• <FRAMESET ROWS="h1,h2,...hn"></FRAMESET>
• Il y a autant de frames horizontales que l'on a indiqué
de valeurs
• Exemple:
<HTML>
<HEAD></HEAD>
<FRAMESET ROWS="30%,50%,*" >
<FRAME>
<FRAME>
<FRAME>
</FRAMESET>
</HTML>

F.A. AMAZAL Technologies du web 2016-2017 70

 HTML Corps d’un document

Frames
Division verticale de l'écran
• <FRAMESET COLS=" l1,l2,...ln"></FRAMESET>
Il y a autant de frames verticales que l'on a indiqué de
valeurs
• Exemple:
<HTML>
<HEAD></HEAD>
<FRAMESET COLS="30%,70%" BORDER="5">
<FRAME>
<FRAME>
</FRAMESET>
</HTML>

F.A. AMAZAL Technologies du web 2016-2017 71

 HTML Corps d’un document

Frames
Division horizontale et verticale de l'écran
• Exemple:
<HTML>
<HEAD></HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME>
<FRAMESET COLS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
</HTML>

F.A. AMAZAL Technologies du web 2016-2017 72

 HTML Corps d’un document

Frames
• L'élément FRAME permet de définir le contenu de
chaque zone
<FRAME SRC="url" NAME="target_name"
SCROLLING="YES|NO|AUTO" {NORESIZE}
MARGINWIDTH="pixels" MARGINHEIGHT="pixels">
– SRC : URL de la page à afficher
– NAME : identifie la zone (lien hypertexte)
– SCROLLING : barre de défilement
– MARGINWIDTH : espace entre le doc à afficher et les
frontières gauche et droite de la frame
– MARGINHEIGHT : espace entre le doc à afficher et le
haut et le bas de la frame
– NORESIZE : bloque le redimensionnement de la frame

F.A. AMAZAL Technologies du web 2016-2017 73

 HTML Corps d’un document

Frames
• Exemple
[Link]
<HTML><HEAD></HEAD>
<FRAMESET COLS="30%,70%">
<FRAME SRC="[Link]" NAME="frame1">
<FRAMESET ROWS="30%,70%">
<FRAME SRC="[Link]"
NAME="frame2">
<FRAME SRC="[Link]"
NAME="frame3">
</FRAMESET>
[Link]
</FRAMESET></HTML> [Link] [Link]
<HTML> <HTML> <HTML>
<BODY> <BODY> <BODY>
BONJOUR SALUT HOLA
</BODY> </BODY> </BODY>
</HTML> </HTML> </HTML>

F.A. AMAZAL Technologies du web 2016-2017 74

 HTML Corps d’un document

Frames: cas des liens

Envoyer un lien vers un cadre

• Lorsqu'on active un lien, par défaut la nouvelle page

s'affiche dans la frame contenant le lien en question
• L'attribut target de l'élément <A> permet de diriger un
document vers une frame autre que celle qui contient le
lien activé
• Exemple
<A href="[Link]" target=frame2>Liste des
modules</A>
<A href="[Link]" target=frame3>Mon image</A>

F.A. AMAZAL Technologies du web 2016-2017 75

 HTML Corps d’un document

Frames: cas des liens

<A HREF="URL" TARGET="nom target">... </A>
L’attribut TARGET précise le nom de la zone qui doit recevoir le
document correspondant au lien (trois possibilités):
 La valeur correspond au nom d’une frame existante, dans ce
cas le document est affiché dans la frame
 La valeur ne correspond à aucune frame existante, dans ce
cas le document est affiché dans une nouvelle fenêtre
 Une valeur prédéfinie :
_blank : affichage du document dans nouvelle fenêtre
_self : le document est affiché dans la même zone que
celle du lien(défaut)
top : le document est affiché sur toute la surface du
browser
parent : indique au browser d’afficher le document en
occupant toute la surface dans laquelle a été affiché le
document
F.A. AMAZAL contenantTechnologies
le lien du web 2016-2017 76
 HTML Corps d’un document

Formulaires: Exemple

F.A. AMAZAL Technologies du web 2016-2017 77

 HTML Corps d’un document

Formulaires
• Permettent d’interagir avec l’utilisateur en lui proposant
d’entrer des informations
• Un formulaire HTML est placé à l’intérieur d’une balise
<form>

• Syntaxe
<form method="GET|POST" action="url" enctype="type"> …
</form>
 method : Méthode HTTP, valant soit "get" soit "post"
GET: envoie les paramètres dans l'URL
POST : On ne voit pas ce qui est envoyé dans
l'URL
 action :URL du script auquel sera soumis le formulaire
 enctype: spécifie la méthode d’encodage pour un envoi
en POST:
- application/x-www-form-urlencoded:
F.A. AMAZAL Technologies du web encodage par 78
2016-2017
 HTML Corps d’un document

Formulaires
En HTML, il est interdit de mettre des champs de formulaire
directement à l’intérieur d’un <form>. Il faut d’abord les
regrouper:
• Dans des paragraphes <p> si les champs de formulaires sont
à l’intérieur de paragraphes de textes (rare)
• Dans des ensembles de champ <fieldset> pour regrouper
des champs de formulaire de sémantique proche
• Dans des divisions <div> sans contenu sémantique sinon
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 79

 HTML Corps d’un document

Etiquettes
• La plupart des champs sont accompagnés d’une
étiquette (<label>)
• Exemple: <label>Ville :</label>

• Pour lier une étiquette à un champ, il faut lui ajouter un

attribut for qui a la même valeur que l'id du champ en
question
• Lorsqu’une étiquette est liée à un champ, un clic sur
l’étiquette permet en général de sélectionner le champ
• Exemple
<label for="txt_ville">Ville :</label>
<input type="text" name="ville" id="txt_ville">

F.A. AMAZAL Technologies du web 2016-2017 80

 HTML Corps d’un document

Champs de saisie
• La balise <input> permet de définir les différents types de
champ d’un formulaire:
 zone de saisie
 case à cocher
 bouton radio
 bouton de confirmation
 bouton de remise à zéro des champs
• L’attribut type détermine le type du champ
• L’attribut name(nom du paramètre de la requête HTTP) est
obligatoire (sauf pour les types "reset" et "submit" ) ; il
permet de préciser au serveur à quelle saisie on fait
référence
• Exemple:

F.A. AMAZAL Technologies du web 2016-2017 81

 HTML Corps d’un document

Saisie d’une ligne de texte

• type ="text" est utilisé pour la saisie d’un texte dont la taille
est inférieure à une ligne
• L’attribut value permet de pré-remplir le champ avec une
valeur par défaut
• L’attribut maxlength permet de spécifier la taille maximale de
la chaîne de caractères à saisir
• L’attribut placeholder permet de donner une indication sur le
contenu du champ
• L’attribut size permet de modifier la taille de la zone de saisie
• Exemple:

F.A. AMAZAL Technologies du web 2016-2017 82

 HTML Corps d’un document

Saisie d’un mot de passe

• type ="password" est utilisé pour la saisie d’un texte dont
les caractères sont remplacés par des astérisques
• L’attribut value permet de préciser la valeur par défaut
(facultatif)
• La taille maximale de la chaîne de caractères à saisir peut
être spécifiée à l’aide de l’attribut maxlength (facultatif)
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 83

 HTML Corps d’un document

Zones de saisie enrichies

1. E-mail
• On peut demander la saisie d'une adresse e-mail
<input type="email"/>
2. URL
• Avec le type url, on peut demander à saisir une adresse
absolue (commençant généralement par [Link]
<input type="url"/>
3. Numéro de téléphone
• Ce champ est dédié à la saisie d’un numéro de
téléphone
<input type="tel"/>
F.A. AMAZAL Technologies du web 2016-2017 84
 HTML Corps d’un document

Zones de saisie enrichies

4. Nombre
• Ce champ permet de saisir un nombre entier
<input type="number"/>
5. Date
• Différents types de champs de sélection de date
existent :
 date : pour la date (05/08/1985 par exemple)
 time : pour l'heure (13:37 par exemple)
 week : pour la semaine
 month : pour le mois
 datetime : pour la date et l'heure (avec gestion du
décalage horaire)
 datetime-local: pour la date et l'heure (sans gestion du
décalage horaire)
• F.A.
Exemple:
AMAZAL<input Technologies
type="date"/>du web 2016-2017 85
 HTML Corps d’un document

Cases à cocher
• type ="checkbox" permet de choisir plusieurs
éléments parmi une liste de possibilités
• L’attribut checked ="checked" permet de cocher la
case par défaut
• Certains langages côté serveurs imposent que les
noms de champs de formulaire à choix multiples se
terminent par []
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 86

 HTML Corps d’un document

Boutons radio
• type ="radio" permet de choisir un seul élément parmi
une liste de possibilités
• La valeur retournée est obligatoirement précisée à
l’aide de l’attribut value
• L’attribut checked ="checked" permet de préciser la
valeur par défaut
• Exemple:

F.A. AMAZAL Technologies du web 2016-2017 87

 HTML Corps d’un document

Fichiers joints
• type ="file" permet de joindre au formulaire un fichier
• À cause de la taille de la requête due au
téléchargement (upload) du fichier, il faut
impérativement utiliser la méthode POST et l’encodage
multipart/form-data
• Exemple
<label for="fichier">Fichier:</label>
<input type="file" name="fichier" id="fichier">

F.A. AMAZAL Technologies du web 2016-2017 88

 HTML Corps d’un document

Champs caché
• type ="hidden" permet de cacher des champs au client
mais leur contenu est envoyé avec le formulaire
• Ceci permet de préciser des informations, en utilisant
l’attribut value, concernant l’interaction client/serveur
• C’est à utiliser avec précaution car cela peut être à
l’origine de problèmes de sécurité assez graves
• Exemple
<input type="hidden" name="monnaie_utilisee"
value="EUR">
<input type="hidden" name="customerCB"
value="c2415-345">

F.A. AMAZAL Technologies du web 2016-2017 89

 HTML Corps d’un document

Réinitialiser le formulaire
• type ="reset" permet de réinitialiser le formulaire en
affectant aux différents champs leur valeur par défaut

• L’attribut value permet de changer le texte du bouton

correspondant

• Exemple

<input type="reset" value="Effacer les donnes">

F.A. AMAZAL Technologies du web 2016-2017 90

 HTML Corps d’un document

Soumettre le formulaire
• type ="submit" permet de soumettre le formulaire
• Le client envoie le contenu du formulaire à l’adresse
précisée par l’attribut action de la balise <form>
• L’attribut value permet de changer le texte du bouton
correspondant
• Exemple
<input type="submit" value="Enregistrer les donnes">

F.A. AMAZAL Technologies du web 2016-2017 91

 HTML Corps d’un document

Zone de saisie multiligne

• Pour les saisies multiligne, on utilise la balise
<textarea>
• Le texte délimité par cette balise permet d’initialiser la
valeur par défaut du champ
• La balise fermante est obligatoire même si le champ est
vide
• Les attributs rows et cols (obligatoires) permettent de
spécifier la taille en lignes et colonnes de la fenêtre de
saisie
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 92

 HTML Corps d’un document

Menu de sélection
• La balise <select> permet d’ajouter une liste de
sélection :
 L’attribut facultatif size permet de préciser le
nombre de choix apparaissant sur la page Web. Par
défaut, ce nombre est initialisé à 1
 L’attribut multiple ="multiple" permet d’autoriser
des réponses multiples. Dans ce cas, pour PHP, on
donnera toujours un nom se terminant par []
• Les choix du menu sont indiqués à l’aide de la balise
<option> :
 L’attribut value permet de spécifier la valeur
associée au choix
 L’attribut selected ="selected" permet de spécifier
F.A. AMAZAL Technologies du web 2016-2017 93
 HTML Corps d’un document

Menu de sélection
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 94

 HTML Corps d’un document

Exercice

F.A. AMAZAL Technologies du web 2016-2017 95

 HTML Corps d’un document

Caractères spéciaux
• Les documents HTML ne peuvent contenir que les
symboles du clavier américains (lettres, chiffre et
signes de ponctuation)
• Les autres caractères sont codés :

F.A. AMAZAL Technologies du web 2016-2017 96

 HTML Corps d’un document

Styles
• Police, taille et couleur du texte
<FONT FACE="police1,police2,famille..." SIZE="1 à 7"
COLOR="couleur"> texte... </FONT>
 On peut spécifier les familles de polices suivantes : serif, sansserif,
arial, times new roman …
 Taille par défaut=3 ; taille=4: +20% ; taille=2: -20% ; etc...

• Styles "physiques" (peuvent être combinés les uns avec les

autres) :
<B> texte en gras </B>
<I> texte en italique </I>
<U> texte souligné </U>
• Indices et exposants
<SUB>indice</SUB>, <SUP>exposant</SUP>
F.A. AMAZAL Technologies du web 2016-2017 97
 HTML Corps d’un document

Styles
• Centrage dans la page:
<P ALIGN="center"> texte ou objets... </P>
<CENTER> texte ou objets... </CENTER>
<DIV ALIGN="center"> texte ou objets... </DIV>

• Justification à droite :
<P ALIGN="right"> texte ou objets... </P>
<DIV ALIGN="right"> texte ou objets... </DIV>

F.A. AMAZAL Technologies du web 2016-2017 98

Chapitre 3: CSS
• Langage CSS
• Sélecteurs de CSS
• Mise en forme
• Mise en page

F.A. AMAZAL Technologies du web 2016-2017 99

 CSS Langage CSS

Intérêt
• CSS : Cascading Style Sheets (Feuilles de style en
cascade)
• Recommandation du W3C
• Plusieurs niveaux : CSS1 (1996), CSS2 (1998), CSS2.1
(2005), CSS3 (en cours)
• Concept: Séparation de la forme et du contenu
 La structure d’un document et son contenu sont
décrits en HTML
 Sa présentation (mise en forme et mise en page) est
gérée par CSS

F.A. AMAZAL Technologies du web 2016-2017 100

 CSS Langage CSS

Intérêt
• Le document HTML et la feuille CSS peuvent être
définis dans des fichiers séparés
• Construction du document (HTML) sans se préoccuper
de son rendu visuel
Création plus efficace
Code HTML plus simple et plus lisible
On peut changer la feuille de style sans changer
le document (évolution du « look »)
• L’homogénéité visuelle d’un site est facilitée
Plusieurs pages peuvent partager la même feuille
de style

F.A. AMAZAL Technologies du web 2016-2017 10

 CSS Langage CSS

Syntaxe du CSS
• Ensemble de règles de la forme :
sélecteur {
propriété: valeur;
}
• sélecteur : indique les parties du documents sur
lesquelles s’applique la règle
• propriété : propriété spécifique de mise en forme à
modifier
• valeur : valeur de la propriété
• Les feuilles de style peuvent être validées avec un
validateur approprié, cf. [Link]
validator/
F.A. AMAZAL Technologies du web 2016-2017
102
 CSS Langage CSS

Syntaxe du CSS
• Exemples
 h1 {
color : blue ;
font - size : 120%;
}
Tous les éléments <h1> auront leur texte en bleu et
une taille de police de 120%
 p{
color : grey ;
font – style: italic;
}
Tous les paragraphes auront leur texte en gris et en
italique

F.A. AMAZAL Technologies du web 2016-2017 103

 CSS Langage CSS

Intégration à HTML
Styles en ligne
• Manière la plus simple d’utiliser les CSS
• Rajouter un attribut style sur les balises HTML
• On peut utiliser <span> si on a besoin d’une balise
supplémentaire
• Encombre le code HTML avec des indications de mise en
forme

• Exemples

F.A. AMAZAL Technologies du web 2016-2017 104

 CSS Langage CSS

Intégration à HTML
Styles en en-tête
• Intégration des propriétés de style à l’en-tête de la page avec
la balise <style>
• Utilisation des sélecteurs pour définir à quels élément les
propriétés s’appliquent
• Inconvénients : mélange HTML et CSS dans le même
document, impossible de réutiliser les propriétés CSS dans
plusieurs documents
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 105

 CSS Langage CSS

Intégration à HTML
Feuille de styles externe
• Mettre la feuille de style CSS dans un fichier à part (en
général, on utilise l’extension .css)
• Rajouter une balise <link> dont l’attribut rel est positionné à
"stylesheet" dans l’en-tête du document
• Permet d’utiliser la même feuille de style pour plusieurs
pages Web
• Possibilité d’ajouter media="screen" ou media="print" , etc.,
pour choisir différentes feuilles de style suivant le mode
d’affichage
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 106

 CSS Langage CSS

Cascade
• Plusieurs feuilles de style peuvent s’appliquer simultanément
:
 Plusieurs balises <link rel="stylesheet">
 Directive @import d’une feuille de style
@import url(feuille_annexe.css);
• Au sein même d’une feuille de style, plusieurs règles peuvent
être en conflit

• Cascade : mécanismes gérant ces conflits

• Cascade
 Si !important est précisé après la valeur, la règle sera
prioritaire
 Sinon, plus une règle est spécifique, plus elle est
prioritaire
F.A. AMAZAL Technologies du web 2016-2017 107
 CSS Sélecteurs de CSS

Sélecteurs de CSS
• Sélecteur simple : nom d’une balise
Exemple: ul { color: blue; }
met l’ensemble du contenu des listes non ordonnées
en bleu

• Sélecteur multiple : plusieurs sélecteurs séparés par des

virgules
Exemple: h1, h2, h3, h4, h5, h6 { color: red; }
met l’ensemble des titres de rubrique en rouge

• Sélecteur universel : ‘*’, sélectionne tout

Exemple: * { color: black; }
met tout en noir. Dans ce cas précis, on préférera
utiliser la règle
body { color:
F.A. AMAZAL black; } du web
Technologies 2016-2017 108
 CSS Sélecteurs de CSS

Sélecteurs de classe
Classe
• Permet d’ajouter plus de structure et de sémantique à un
document HTML
• Permet d’appliquer une mise en forme commune à tout ce
qui fait partie d’une class particulière
• Définie par l’attribut class et peut être utilisée sur n’importe
quelle balise HTML (ou, à défaut, sur une balise <span> )

• Exemples
 <p>Je voudrais remercier en particulier
<span class="personne">Madame Laila</span>
et <span class="personne">Monsieur
Adil</span>
</p>
F.A. AMAZAL Technologies du web 2016-2017 109
 CSS Sélecteurs de CSS

Sélecteurs de classe
• Sélecteur de classe : nom d’une classe, préfixée d’un ‘.’,
tel qu’il apparaît dans un attribut class d’une balise
HTML

Exemples
 .personne { font-weight: bold; }
met l’ensemble des balises de classe personne en
gras.
 [Link] { font-style: italic; }
met l’ensemble des balises <p> de classe comment
en italique

F.A. AMAZAL Technologies du web 2016-2017 110

 CSS Sélecteurs de CSS

Sélecteurs d’identifiants
• Identifiant : défini par l’attribut id d’une balise HTML.
Similaire aux classes, mais il ne peut y avoir qu’une seule
balise ayant un id donné dans tout le document HTML
• Sélecteur d’identifiant : nom d’un identifiant, préfixée d’un
‘#’, tel qu’il apparaît dans un attribut id d’une balise HTML

• Exemples
 #introduction { font-size: 120%; }
met la balise d’identifiant introduction en plus gros.
 p#introduction { font-size: 120%; }
met la balise <p> d’identifiant introduction en plus gros.

F.A. AMAZAL Technologies du web 2016-2017 111

 CSS Sélecteurs de CSS

Sélecteurs contextuels
• Sélecteur contextuel: 2 sélecteurs ou plus séparés par
des espaces. A B sélectionne les B seulement s’ils sont
contenus dans des A

• Exemples
 h1 em { color: blue; }
met les mots en emphase à l’intérieur d’un h1 en
bleu
 ul ol, ol ul, ul ul, ol ol { font-size: 80%; }
diminue la taille du texte des listes imbriquées

F.A. AMAZAL Technologies du web 2016-2017 112

 CSS Sélecteurs de CSS

Pseudo-éléments
• Pseudo-élément : permet de mettre une règle sur
quelque chose qui n’est pas réellement une balise
HTML

• Exemples
 p:first-line { font-weight: bold; }
met la première ligne de chaque paragraphe en gras.
 p:first-letter { font-weight: bold; }
met la première lettre de chaque paragraphe en
gras.

F.A. AMAZAL Technologies du web 2016-2017 113

 CSS Sélecteurs de CSS

Pseudo-classes
• Pseudo-classe : permet de faire une sélection d’un
élément uniquement dans certains contextes

• a:link : lien normal (non visité)

• a:visited : les <a> qui sont des liens vers des pages qui
ont déjà été visitées
• a:hover : les <a> qui sont des liens qu’on est en train
de désigner (i.e., la souris est en train de passer dessus)
• a:active : les <a> qui sont des liens qu’on est en train
d’activer (i.e., de cliquer)

F.A. AMAZAL Technologies du web 2016-2017 114

 CSS Sélecteurs de CSS

Sélecteurs et attributs
E[att]
• Tout élément E dont l’attribut att est défini
Exemple : ul[type], img[alt], *[title]
E[att=val]
• Tout élément E dont l’attribut att vaut val
Exemple : ul[type= " square"]
E[att~=val]
• Tout élément E dont l’attribut att est une liste de mots
séparés par des espaces, l’un de ces mots vaut
exactement val

F.A. AMAZAL Technologies du web 2016-2017 115

 CSS Sélecteurs de CSS

Sélecteurs et attributs
E[attˆ="prefixe"]
• Tout élément E dont la valeur de l’attribut att
commence exactement par prefixe
Exemple : a[href^="[Link]
E[att$="suffixe"]
• Tout élément E dont la valeur de l’attribut att se
termine exactement par suffixe
Exemple : img[src$=".png"], a[href$=".pdf"]
E[att*="val"]
• Tout élément E dont la valeur de l’attribut att contient
la sous-chaîne val
Exemple: img[alt*="diagramme"],
*[title*="exercice"]
F.A. AMAZAL Technologies du web 2016-2017116
 CSS Sélecteurs de CSS

Combinaison de sélecteurs
S’appuie sur la structure arborescente du document
Si Sel1 et Sel2 sont des sélecteurs :
• Sel1 Sel2: tout élément sélectionné par Sel2 emboité
dans un élément sélectionné par Sel1
• Sel1 > Sel2: tout élément sélectionné par Sel2 qui est
fils d’un élément sélectionné par Sel1
• Sel1 + Sel2: tout élément sélectionné par Sel2 qui suit
immédiatement un élément sélectionné par Sel1
• Sel1 ~ Sel2: tout élément sélectionné par Sel2 qui suit
un élément sélectionné par Sel1

F.A. AMAZAL Technologies du web 2016-2017 117

 CSS Sélecteurs de CSS

Combinaison de sélecteurs
• Exemple

• Quels sont les éléments sélectionnés par:

body h1 body>h1 div h1
div+h1
F.A. AMAZAL Technologies du web 2016-2017 118
 CSS Sélecteurs de CSS

Combinaison de sélecteurs

F.A. AMAZAL Technologies du web 2016-2017 119

 CSS Sélecteurs de CSS

Exercice
Soit le code html suivant: Et soit la feuille de style
suivante ([Link]):

Indiquez pour chaque

nombre entre crochet la
couleur dans laquelle il
s’affiche.

F.A. AMAZAL Technologies du web 2016-2017 120

 CSS Mise en forme

Propriétés de longueur
Les propriétés admettent différentes unités de mesure se
répartissant suivant trois types de valeurs :
• Sous forme de pourcentage (par rapport à la valeur
courante)
• Les valeurs relatives :
 em: la valeur de la propriété font-size de la police
utilisée (hauteur du bloc dans lequel s’inscrit
naturellement un caractère)
 ex: la hauteur du caractère x dans la police utilisée
• Les valeurs relatives à l’écran (à éviter pour avoir une
conception de la page indépendante de la résolution !)
 px le nombre de pixels
• Les valeurs absolues (N’ont aucun sens pour une page Web
destinée à s’afficher sur un écran d’ordinateur !) : mm, cm,
F.A. AMAZAL Technologies du web 2016-2017 121
 CSS Mise en forme

Styles de police
• font-family
Définit un nom de police (Times, Georgia, Arial, tahoma...) ou
une famille de police(serif, sans-serif, cursive, fantasy,
monospace)
Il est recommandé de déclarer une famille générique après
les polices (séparer par une virgule) pour obliger le
navigateur, si la police n’est pas trouvée, à lui substituer une
police similaire
• font-size
Définit la taille de la police (la plus part du temps exprimée
en pourcentage de la taille courante)
• font-style
Définit le style de l'écriture: normal, italique ou oblique

F.A. AMAZAL Technologies du web 2016-2017 122

 CSS Mise en forme

Styles de police
• font-weight
Définit l'épaisseur de la police: normal, bold, bolder
• font-variant
Définit la casse des caractères: normal ou small-caps
(petites majuscules)
• font
Raccourci pour les différentes propriétés de police
Exemple: p {font: italic small-caps bold 1.3em Arial, serif;}
• Exemple
p{ font-family: "Times New Roman";
font-size: 130%;
font-weight: bold;
font-variant: small-caps;
}
F.A. AMAZAL Technologies du web 2016-2017 123
 CSS Mise en forme

Styles de texte
• text-decoration
Définit une décoration du texte: none , underline (souligné),
overline (surligné), line-through (barré) ou blink
(clignotant)
Exemple: A:visited {text-decoration: blink;}
• text-align
Définit l'alignement du texte: left, center, right ou justify
Exemple: H1 {text-align: center;}
• text-indent
Permet de décaler le début de la première ligne de texte
d’une valeur fixe ou proportionnelle à la valeur du
paragraphe. Elle est souvent utilisé avec <P>
Exemple: P {text-indent: 1em;}
F.A. AMAZAL Technologies du web 2016-2017 124
 CSS Mise en forme

Styles de texte
• text-transform
Définit la casse du texte: uppercase (majuscules) ou
lowercase (minuscules) ou capitalize (met le premier
caractère en majuscule)
Exemple: P {text-transform: uppercase;}
• line-height
Définit l'interligne soit l'espace entre les lignes du texte.
Une bonne règle pour le texte dans le corps est de régler
l’espace interligne à 1.2 fois la taille de la police (1.2em ou
120%).
Exemple: P {line-height: 1.2em;}
• vertical-align
Définit l’alignement vertical de la ligne de base d’un
élément en fonction de la propriété line-height : super
(texte en exposant), sub (texte en indice), baseline (normal),
F.A. AMAZAL Technologies du web 2016-2017 125
 CSS Mise en forme

Styles de texte
• word-spacing
Définit l'espace entre les mots. Cet espacement peut être
positif ou négatif selon si on cherche à éloigner ou
rapprocher ces éléments
Exemple: P {word-spacing: 5pt;}

• letter-spacing
Définit l'espace entre les lettres. Cet espacement peut être
positif ou négatif
Exemple: P {letter-spacing: 2pt;}

F.A. AMAZAL Technologies du web 2016-2017 126

 CSS Mise en forme

Propriétés des listes

• list-style-type
détermine le type de puces ou de numérotation: disc(cercle
plein), circle(cercle vide), square(carré), decimal (nombres),
lower-roman (chiffre romain minuscule), upper-roman
(chiffre romain majuscule), lower-alpha (lettre minuscule),
upper-alpha (lettre majuscule) ou none
Exemple: OL {list-style-type: square;}

• list-style-image
Permet de remplacer les puces par une image: url ou none
Exemple: OL {list-style-image: url([Link]);}

F.A. AMAZAL Technologies du web 2016-2017 127

 CSS Mise en forme

Couleurs
Il existe différentes manières de spécifier les valeurs d’une
couleur :
• Son nom (16 noms standards)

• Le code RGB (Red, Green, Blue): on donne une valeur entre

0 et 255 pour le rouge, le vert , le bleu ou bien 3
pourcentages
Exemple (couleur bleu): rgb(0,0,255) ou
rgb(0%,0%,100%)

• Valeur hexadecimale RGB

F.A. AMAZAL Technologies du web 2016-2017 128
 CSS Mise en forme

Couleurs
• Propriété color : fixe la couleur de la police
Exemple:
p {color=blue ;}
p {color=rgb(0,0,255) ;}
p {color=#0000ff ;}
• Propriété background-color : fixe la couleur de l’arrière plan
Exemple:
p { background-color=blue ;}
p { background-color=rgb(51,0,102) ;}
p { background-color=#ffffff) ;}

F.A. AMAZAL Technologies du web 2016-2017 129

 CSS Mise en forme

Arrière plan
• background-color
Définit la couleur de l'arrière-plan
Exemple: p {background-color: #000000;}
• background-image
Définit l'image de l'arrière-plan
Exemple: body {background-image:
url([Link]);}
• background-repeat
Définit la façon de répéter l'image d'arrière-plan: repeat, no-
repeat, repeat-x (nombre de répétitions horizontales) ou
repeat-y (nombre de répétitions verticales
Exemple: P { background-image: url([Link]);
F.A. AMAZAL
background-repeat: repeat-x
Technologies du web
}
2016-2017 130
 CSS Mise en forme

Arrière plan
• background-attachment
Spécifie si l'image d'arrière-plan reste fixe avec les
déplacements de l'écran: scroll ou fixed
Exemple: body { background-image:
url("[Link]");
background-attachement: fixed;}
• background
Raccourci pour les différentes propriétés d'arrière-plan
Exemple: p {background: [Link] fixed repeat}

F.A. AMAZAL Technologies du web 2016-2017 131

 CSS Mise en forme

Exercice

F.A. AMAZAL Technologies du web 2016-2017 132

 CSS Mise en page

Blocs et éléments en ligne

• Il existe deux sortes d’éléments HTML :
 Les blocs : <p> , <h1> , <ul> . . .
<div> est un bloc générique
 Les éléments en ligne, qui doivent être placés à
l’intérieurs de blocs : <a> , <img> , <em> . . .
<span> est un élément en ligne générique
• On s’intéresse ici principalement aux blocs et à la
manière de les placer les uns par rapport aux autres.

F.A. AMAZAL Technologies du web 2016-2017 133

 CSS Mise en page

Boîtes CSS
Tout élément structuré par une balise HTML (ou plusieurs) se
représente sous forme d’une « boîte » rectangulaire définie par:
• La zone de son contenu, représentée par une largeur (width)
et une hauteur (height)
• Un espace réservé à la bordure de la boîte (propriété border)
• Une marge interne à la boîte (padding), se situant entre la
zone de contenu et la bordure
• Une marge externe (margin) et se situe hors de la boîte, au-
delà de l’espace alloué à la bordure. Elle affecte le
positionnement de l’élément puisqu’elle pousse sa boîte ou
ses soeurs environnantes.

F.A. AMAZAL Technologies du web 2016-2017 134

 CSS Mise en page

Boîtes CSS

marge externe (margin)

margin

F.A. AMAZAL Technologies du web 2016-2017 135

 CSS Mise en page

Largeur et hauteur
• width : Largeur du contenu de l’élément (largeur ou
auto). Par défaut à auto , prend la taille maximale
disponible

• height : Hauteur du contenu de l’élément (hauteur ou

auto). Par défaut à auto , s’adapte à la taille du contenu

Remarque
• width et height peuvent être également utilisés pour les
éléments en ligne remplacés (comme <img> )

F.A. AMAZAL Technologies du web 2016-2017 136

 CSS Mise en page

Débordement
• Si la hauteur du contenu est contrainte, le contenu peut
déborder d’un bloc. . .
• La propriété overflow contrôle le comportement :
 visible : le contenu déborde de l’élément
 hidden : le contenu est tronqué
 scroll : des barres de défilement sont ajoutées
 auto : des barres de défilement sont ajoutées quand
c’est nécessaire
• Par défaut : visible
Remarque
• Internet Explorer 6 ne gère pas overflow: visible;

F.A. AMAZAL Technologies du web 2016-2017 137

 CSS Mise en page

Bordures des boîtes

• border-width: spécifie l’épaisseur des bordures
• border-color: détermine la couleur de la bordure
• border-style: détermine le style du trait de la bordure: none,
solid, dotted, dashed, double, groove, ridge, inset ou outset
Exemple: table {border-width: 4px;
border-color: yellow;
border-style: solid;}
• border: regroupe toutes les propriétés des bords
Exemple: h1 {border :4px dotted green}

F.A. AMAZAL Technologies du web 2016-2017 138

 CSS Mise en page

Bordures des boîtes

Les propriétés qui s’appliquent aux bordures ont entre 1 et 4
valeurs :
• Si une seule valeur est spécifiée : elle s’applique à tous les
côtés
• Si 2 valeurs sont spécifiées :
 la première s’applique aux bordures horizontales
 la seconde aux bordures verticales
• Si 3 valeurs sont spécifiées :
 la première s’applique à la bordure du haut
 la deuxième aux bordures verticales
 la troisième à la bordure du bas
• Si 4 valeurs sont spécifiées : celles-ci s’appliquent
F.A. AMAZAL
respectivement auxTechnologies
bordures du duhaut,
web de droite,
2016-2017
du bas et de
139
 CSS Mise en page

Bordures des boîtes

• Exemple:

F.A. AMAZAL Technologies du web 2016-2017 140

 CSS Mise en page

Bordures des boîtes

• On peut spécifier la largeur de chaque bord
 border-top-width: donne l'épaisseur du bord supérieur
(thin ou medium ou thick ou spécifié par l'auteur)
Exemple: H3 {border-top-width: thin;}
 border-right-width: donne l'épaisseur du bord droit
 border-bottom-width: donne l'épaisseur du bord inférieur
 border-left-width: donne l'épaisseur du bord gauche
• Important : sur une table, définir également
table { border-collapse: collapse; } afin que les bordures de
la table fusionnent

F.A. AMAZAL Technologies du web 2016-2017 141

 CSS Mise en page

Espacement
• Padding: Une marge interne se situant entre la zone de
contenu et la bordure
• Les propriétés permettant de définir les marges internes
sont:
 padding-top
 padding-right
 padding-bottom
 padding-left
 Padding: permet de définir d’un seul coup ces quatre
propriétés, dans l’ordre top right bottom left
• Par défaut : 0

F.A. AMAZAL Technologies du web 2016-2017 142

 CSS Mise en page

Marges
• margin : espace entre la bordure de l'élément et les autres
éléments
• Les propriétés permettant de définir les marges externes
sont:
 margin-top
 margin-right
 margin-bottom
 margin-left
 margin: permet de définir d’un seul coup ces quatre
propriétés, dans l’ordre top right bottom left
• Par défaut : 0
• Une marge peut être définie à auto , elle est alors
automatiquement
F.A. AMAZAL calculée à partir
Technologies des autres valeurs
du web 2016-2017 143
 CSS Mise en page

Marges
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 144

 CSS Mise en page

Cas particulier : centrage

Pour centrer un bloc horizontalement :

 Mettre margin-left et margin-right à auto

 Donner une valeur à width différente de auto

F.A. AMAZAL Technologies du web 2016-2017 145

 CSS Mise en page

Positionnement
• Le positionnement consiste à préciser où doit apparaître un
élément de manière relative, par rapport à un autre élément
ou encore par rapport à la fenêtre du navigateur
• Le positionnement est précisé par la propriété position
• Il existe 4 modes de positionnement : static, absolute , fixed
et relative
• Chaque type a ses propres règles
• Fonctionnent avec les éléments de type bloc et les éléments
de type en ligne
• Les boîtes peuvent utiliser différents schémas et interférer
entre elles

F.A. AMAZAL Technologies du web 2016-2017 146

 CSS Mise en page

Positionnement
• Une fois le type de positionnement choisi, on peut spécifier
les propriétés de décalage : top , right , bottom et left

• Leurs valeurs peuvent être exprimées via une longueur, un

pourcentage (par rapport à la taille du bloc conteneur) ou
être choisies automatiquement (auto)

• Le décalage se décrit à partir du bord le plus proche du bloc

conteneur

F.A. AMAZAL Technologies du web 2016-2017 147

 CSS Mise en page

Positionnement statique
• Le positionnement statique est le comportement par défaut :
 L’ordre dans lequel apparaissent les balises dans le code
HTML est celui dans lequel les boîtes sont affichées et
s’empilent dans le document(ce schéma de
positionnement se nomme le flux courant)
 Chaque élément est dépendant de l’élément frère
précédent :
 deux éléments de type block s’empilent verticalement
l’un sous l’autre
 deux éléments de type inline se suivent sur la même
ligne s’ils en ont la place

F.A. AMAZAL Technologies du web 2016-2017 148

 CSS Mise en page

Positionnement statique
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 149

 CSS Mise en page

Positionnement absolu
• Le positionnement absolu permet de retirer totalement un
élément du flux et de le positionner par rapport à son
conteneur (plus précisément, par rapport au conteneur le
plus proche ayant un positionnement relatif)
• Syntaxe
Selecteur {
position :absolute ;
left :valeur ; /* optionnel */
right :valeur ; /* optionnel */
top :valeur ; /* optionnel */
bottom :valeur ; /* optionnel */
}
• Pour un positionnement absolu par rapport à la page (cas le
plus fréquent), on utilisera body { position: relative; }

F.A. AMAZAL Technologies du web 2016-2017 150

 CSS Mise en page

Positionnement absolu
• Exemple
Code html Code
CSS

F.A. AMAZAL Technologies du web 2016-2017 151

 CSS Mise en page

Positionnement absolu
• Exemple
Code CSS

F.A. AMAZAL Technologies du web 2016-2017 152

 CSS Mise en page

Positionnement fixe
• Le positionnement fixe permet de retirer totalement un
élément du flux et de le positionner par rapport à la fenêtre
d’affichage
• L’objet reste à sa position même si on descend dans la
fenêtre
• Attention : Ne fonctionne pas avec Internet Explorer 6

• Syntaxe
Selecteur {
position: fixed ;
left: valeur ; /* optionnel */
right: valeur ; /* optionnel */
top: valeur ; /* optionnel */
bottom: valeur ; /* optionnel */
}
F.A. AMAZAL Technologies du web 2016-2017 153
 CSS Mise en page

Positionnement fixe
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 154

 CSS Mise en page

Positionnement relatif
• Le positionnement relatif permet de décaler un élément
d’une certaine distance
• Un élément positionné relativement se place par rapport à sa
position classique dans le flux. Il est ensuite décalé si au
moins une des propriétés top, right, bottom ou left est
renseignée.
• La notion de « relatif » s’applique par conséquent à son
emplacement initial dans le flux
• Syntaxe
Selecteur {
position: relative;
left: valeur ; /* optionnel */
right: valeur ; /* optionnel */
top: valeur ; /* optionnel */
bottom: valeur ; /* optionnel */
F.A. AMAZAL } Technologies du web 2016-2017 155
 CSS Mise en page

Positionnement relatif: Exemple

Code html

Code CSS (sans décalage)

Code CSS (avec décalage)

F.A. AMAZAL Technologies du web 2016-2017 156

 CSS Mise en page

Flottement
• Le flottement n’est pas vraiment un positionnement : les
éléments dits flottants sont pris dans le flux et les autres
éléments les contournent (l’élément flotte et le reste
l’entoure)
• Le flottement est défini par la propriété float qui peut
prendre les valeurs :
 left : flottement à gauche (l’élément flottant se trouve à
gauche et sera contourné par la droite)
 right : flottement à droite
 none : pas de flottement (valeur par défaut). Elle sert
principalement à écraser un style existant
• Tout bloc (image, texte, etc.) peut être défini comme un
élément flottant
F.A. AMAZAL Technologies du web 2016-2017 157
 CSS Mise en page

Flottement
• Exemple: Flux normal (sans flottement)

Code CSS

F.A. AMAZAL Technologies du web 2016-2017 158

 CSS Mise en page

Flottement
• Exemple: avec flottement
Flottement à gauche Flottement à
droite

F.A. AMAZAL Technologies du web 2016-2017 159

 CSS Mise en page

Flottement
• Exemple: avec flottement

F.A. AMAZAL Technologies du web 2016-2017 160

 CSS Mise en page

Dégagement
• On peut arrêter un flottement avec la propriété CSS clear
• Syntaxe: clear :valeur ;
Avec valeur :
 Left: arrête le flottement à gauche
 Right: arrête le flottement à droite
 Both: arrête le flottement à droite et à gauche
 None: ne fait rien
• L’élément contenant clear se place en dessous de l’élément
flottant

F.A. AMAZAL Technologies du web 2016-2017 161

 CSS Mise en page

Dégagement
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 162

 CSS Mise en page

Dégagement
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 163

 CSS Mise en page

Visibilité et affichage
• La visibilité d’un élément peut être complètement contrôlée
en utilisant la propriété visibility :
 visible: permet de rendre visible l’élément
 hidden: permet de rendre invisible un élément ; la
mise en page continue à le prendre en compte

• On peut aussi jouer sur la propriété display :

 block: affiche l’élément comme un bloc (défaut pour
<div> , <p> , etc.)
 inline: affiche l’élément comme un élément en ligne
(défaut pour <span> , <a> , etc.)
 none: enlève l’élément du flux de la page
 et d’autres valeurs mal supportées

F.A. AMAZAL Technologies du web 2016-2017 164

 CSS Mise en page

Tables
• La place de la légende peut être précisée par la propriété
caption-side : elle peut être au-dessus top ou en-dessous
bottom de la table. (Attention : Ne fonctionne pas avec
Internet Explorer 6/7)
• Les bordures des cellules peuvent :
 Être fusionnées border-collapse: collapse
 Être séparées border-collapse: separate . La propriété
border-spacing précise alors l’espacement entre deux
bordures (Attention : Ne fonctionne pas avec Internet
Explorer 6/7)
• Les cellules vides identifiées par la propriété empty-cells
peuvent apparaître show ou non hide. (Attention : Ne
fonctionne pas avec Internet Explorer 6/7)
• On peut régler largeur et hauteur des cellules avec width et
F.A. AMAZAL
height Technologies du web 2016-2017 165
Chapitre 4: Javascript
• Introduction
• Variables
• Structures
• Fonctions
• Objets
• Evénements sur les éléments
• Sélection des éléments
• Manipulation des éléments

F.A. AMAZAL Technologies du web 2016-2017 166

 Javascript Introduction

Introduction
• Le Javascript est un langage "de script objet" :
 Initialement élaboré par Netscape en association avec Sun
Microsystem
 Standardisé par un comité spécialisé, l'ECMA (European
Computer Manufactures Association)
• Javascript permet :
 De rendre dynamique un site internet développé en HTML :
 Validation de formulaires, calculs, messages,
 Modification de la page web
 De développer de véritables applications fonctionnant
exclusivement dans le cadre d'Internet

F.A. AMAZAL Technologies du web 2016-2017 167

 Javascript Introduction

Caractéristiques principales
• Le Javascript est :
 Ecrit directement dans le document HTML
 Un script encadré par des balises HTML
 Exécuté chez le client
 Interprété (pas compilé)
 Sensible à la casse
• Supporté par la plupart des navigateurs web
• Syntaxe proche du C / Java
• Typage faible
• Chaque instruction se termine par un point virgule

F.A. AMAZAL Technologies du web 2016-2017 168

 Javascript Introduction

Intégration à HTML
Le code JavaScript peut être inséré:
• Directement dans le fichier HTML
 Utilisation de la balise script (à placer dans <head> ou
<body>)

 Directement dans une balise HTML qui gère un

événement
<balise ... onEvenement="code JS" | "fonction JS">
• Dans un fichier externe (d'extension .js)

F.A. AMAZAL Technologies du web 2016-2017 169

 Javascript Introduction

Intégration à HTML
Dans le corps de la page HTML
• Il est immédiatement exécuté en même temps que le
code HTML est interprété
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 170

 Javascript Introduction

Intégration à HTML
Dans l'entête de la page
• Le code s'exécute lors d'un événement venant de
l'utilisateur
• Le code correspondant à cet événement se trouve dans
le corps du document
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 171

 Javascript Introduction

Intégration à HTML
Dans un fichier externe
• A placer dans le <head> ou le <body>
• Permet de réutiliser les scripts dans plusieurs pages
• Exemple

• Avec : le fichier [Link] contient le code :

[Link]("Bonsoir");

F.A. AMAZAL Technologies du web 2016-2017 172

JavaScript
• Introduction
• Variables
• Structures
• Fonctions
• Objets
• Evénements sur les éléments
• Sélection des éléments
• Manipulation des éléments

F.A. AMAZAL Technologies du web 2016-2017 173

 Javascript Variables

Variables
• Déclaration de variables optionnelle (mais conseillée)
• Déclaration avec le mot clé "var"
var nom_variable
• Exemple: var a=5;
var txt="salut"; ou var txt=‘salut’;
b=13; //utilisation de b sans déclaration
a=true; // Changement de type pour a
• Remarques
 Javascript est faiblement typé: il n’est pas nécessaire de
déclarer le type et peut changer le type à tout moment
 Une variable déclarée non affectée est de type undefined
(indéfinie)
F.A. AMAZAL Technologies du web 2016-2017 174
 Javascript Variables

Variables: Identificateur
Le nom d’une variable doit respecter les contraintes
suivantes:
• Doit commencer par une lettre ou un souligné « _ »
• Peut comporter:
des lettres
des chiffres
le caractère _
le caractère $
• Ne peut pas utiliser des mots réservés (else, if, var,
case….)

F.A. AMAZAL Technologies du web 2016-2017 175

 Javascript Variables

Variables: Types
• Le type d’une variable dépend de la valeur stockée dans
celle-ci (Pas de déclaration de type)
Exemple: var a = ‘ Philippe ’; // type string
a=10; // type nombre (number)
• Trois principaux types de valeurs
 String: "chaine" ou 'chaine'
 Number:
- Entier : 127 (base 10), 0755 (base 8), 0xFA15 (base 16)
- Flottant : 0.123, -0.4e5, .67E-89
 Boolean: true, false

F.A. AMAZAL Technologies du web 2016-2017 176

 Javascript Variables

Variables: Valeurs spéciales

JavaScript inclut aussi deux types de données spéciaux :

• Null : possède une seule valeur, null, qui signifie l’absence de

données dans une variable

• Undefined : possède une seule valeur, undifined. Une

variable dont le contenu n’est pas clair car elle n’a jamais
stocké de valeur.

F.A. AMAZAL Technologies du web 2016-2017 177

 Javascript Variables

Variables
• La fonction typeof retourne le type d’une variable

• Exemple

F.A. AMAZAL Technologies du web 2016-2017 178

 Javascript Variables

Opérateurs
• Arithmétique
 Binaires: +, -, *, /, %
 Unaires: -(opposé), ++, --
• Affectation
 simple: =
 arithmétique: +=, -=, *=, /=, %=
• Comparaison
 ==, !=, <, <=, >, >=
• Logique
 Binaire: &&, ||
 Unaire: ! (Non)

F.A. AMAZAL Technologies du web 2016-2017 179

 Javascript Variables

Entrées/sorties
• Trois types de boites de dialogues peuvent être ouvertes en
utilisant les méthodes alert, confirm et prompt
 alert()
Permet d’écrire un message dans une fenêtre
Exemple: alert("Bonjour");

 confirm()
Ouvre une boîte de dialogue avec 2 boutons OK et
Annuler, retourne un booléen
Exemple: rep=confirm("Voulez-vous
quitter?");

F.A. AMAZAL Technologies du web 2016-2017 180

 Javascript Variables

Entrées/sorties
 prompt()
Ouvre une boîte de dialogue avec une zone saisie et 2
boutons OK et Annuler, retourne l'information lue
Exemple

F.A. AMAZAL Technologies du web 2016-2017 181

 Javascript Variables

Entrées/sorties
• Méthodes de l’objet document
 write(message): Permet d’écrire directement dans la page
web
 writeln(message): Permet d’écrire directement dans la
page web avec un retour chariot (ajoute le caractère \n)
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 182

JavaScript
• Introduction
• Variables
• Structures
• Fonctions
• Objets
• Evénements sur les éléments
• Sélection des éléments
• Manipulation des éléments

F.A. AMAZAL Technologies du web 2016-2017 183

 Javascript Structures

Structures conditionnelles
• L’instruction conditionnelle « if » simple

if (condition) { bloc d’instructions }

• L’instruction conditionnelle « if … else»
if (condition)
{
bloc d’instructions 1
}
else
{
bloc d’instructions 2
}

F.A. AMAZAL Technologies du web 2016-2017 184

 Javascript Structures

Structures conditionnelles
• L’instruction de sélection multiple "switch"
switch(expression)
{
case valeur_1 : Instructions à exécuter si
variable==valeur_1 ;
break ;
case valeur_2 : Instructions à exécuter si
variable==valeur_2 ;
break ;
….
default : Instructions à exécuter si toutes les
conditions
précédentes ne sont pas vérifiées ;
}
F.A. AMAZAL Technologies du web 2016-2017 185
 Javascript Structures

Structures conditionnelles
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 186

 Javascript Structures

Structures itératives
• L’instruction itérative « for »
for (instr_initialisation ; condition ; instr_fin)
{
bloc d’instructions ;
}
Ou bien
for (variable in objet)
{
bloc d’instructions ;
}

F.A. AMAZAL Technologies du web 2016-2017 187

 Javascript Structures

Structures itératives
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 188

 Javascript Structures

Structures itératives
• L’instruction itérative « while »
while (condition)
{
bloc d’instructions
}

• L’instruction itérative « do…while »

do
{
bloc d’instructions
}
while (condition);

F.A. AMAZAL Technologies du web 2016-2017 189

 Javascript Structures

Structures itératives
• Exemple

F.A. AMAZAL Technologies du web 2016-2017 190

JavaScript
• Introduction
• Variables
• Structures
• Fonctions
• Objets
• Evénements sur les éléments
• Sélection des éléments
• Manipulation des éléments

F.A. AMAZAL Technologies du web 2016-2017 191

 Javascript Fonctions

Fonctions
• Une fonction est un sous-programme qui permet
d'effectuer un traitement donné
• On précise entre parenthèses les arguments, non typés,
séparés par des virgules
• Pas de type dans la signature de la fonction
• Une fonction peut retourner ou non un résultat. Pour
retourner un résultat on utilise l’instruction return
function Nom_Fonction(argument1,
argument2, ...)
{
instructions de la fonction
return expression; //optionnel
}
F.A. AMAZAL Technologies du web 2016-2017 192
 Javascript Fonctions

Fonctions: appel
• on appelle une fonction en précisant les paramètres effectifs
entre parenthèses
• Exemple1
function Affiche(txt)
{
[Link](txt);
}
 Appel: Affiche('hello')
• Exemple2:
function somme(a,b)
{ som=a+b;
return som;
}
 Appel: Res=somme(1,3);

F.A. AMAZAL Technologies du web 2016-2017 193

 Javascript Fonctions

Fonctions: appel
• Exemple3: Calcul de la factorielle

F.A. AMAZAL Technologies du web 2016-2017 194

 Javascript Fonctions

Fonctions: appel
• Exemple4

F.A. AMAZAL Technologies du web 2016-2017 195

 Javascript Fonctions

Fonctions prédéfinies
isFinite
• Détermine si le paramètre est un nombre fini. Renvoie false
si ce n'est pas un nombre ou l'infini positif ou infini négatif

isFinite(240) true
isFinite("Un nombre") false

isNaN
• Détermine si le paramètre n’est pas un nombre (NaN : Not a
Number)
isNaN("un nombre") true
isNaN("deux" * 3) true
isNaN(20) false
isNaN("20") false

F.A. AMAZAL Technologies du web 2016-2017 196

 Javascript Fonctions

Fonctions prédéfinies
parseFloat
• Convertit une chaîne de caractères en un nombre réel
• Si l'argument évalué n'est pas un nombre, renvoie NaN (Not
a Number)
var txt="125.6";
var a=parseFloat(txt); //retourne le nombre 125.6
(a=125.6)
parseInt
• Convertit une chaîne de caractères en un nombre entier de
la base spécifiée
• La base peut prendre les valeurs 16 (hexadécimal) 10
(décimal), 8 (octal), 2 (binaire)
var prix="30";
var p = parseInt(prix); //retourne 30 (p=30)
p= parseInt(prix,16); // retourne 48 (p=48)
F.A. AMAZAL Technologies du web 2016-2017 197
 Javascript Fonctions

Fonctions prédéfinies
Remarque: parseInt/parseFloat
• Seul le premier nombre dans la chaîne est retourné, les
autres caractères (y compris ceux correspondant à des
nombres) sont ignorés
• Si le premier caractère ne peut être converti en un nombre,
le résultat sera NaN
• Les espaces en tête sont ignorés
parseFloat (" 1.24 "); 1.24
parseInt ("42"); 42
42
parseInt (" 42 est la réponse 42
"); NaN
parseInt ("42 43 44");
parseInt (" réponse = 42");

F.A. AMAZAL Technologies du web 2016-2017 198

 Javascript Fonctions

Fonctions prédéfinies
Remarque
• Une chaîne dont les caractères représentent un nombre est
convertie en ce nombre
" 12.5 " * 3; 37.5
"99" - 5; 94

• Dans un expression avec l’opérateur + c’est la conversion

vers chaîne qui l’emporte

"99" + 5 "995"
"340" + 7 "3407"

F.A. AMAZAL Technologies du web 2016-2017 199

 Javascript Fonctions

Fonctions prédéfinies
Number
• Convertit l'objet spécifié en valeur numérique

var txt="234";
a=Number(txt);
[Link](a +" : "+ typeof(a)
+"<br>");
[Link](Number(true));
String
• Convertit l'objet spécifié en chaîne de caractères

a=234;
txt=String(a);
[Link](txt +" : "+ typeof(txt)
+"<br>");
[Link](String(true));

F.A. AMAZAL Technologies du web 2016-2017 200

JavaScript
• Introduction
• Variables
• Structures
• Fonctions
• Objets
• Evénements sur les éléments
• Sélection des éléments
• Manipulation des éléments

F.A. AMAZAL Technologies du web 2016-2017 201

 Javascript Objets

Les objets
• JavaScript intègre :

Les objets usuels : String, Math, Array, Date,

Number

Les objets éléments affichés dans votre

navigateur: window, document …

F.A. AMAZAL Technologies du web 2016-2017 202

 Javascript Objets

Objet String
Propriétés
• length: retourne la longueur de la chaîne de caractères
• …
Méthodes
• charAt(pos): renvoie le caractère se trouvant à la position
pos
• concat(chaine2, chaine3, …): permet de concaténer plusieurs
chaînes de caractères
• indexOf(sous_chaine[, index]): retourne l'indice de la
première occurrence d'un caractère dans une chaîne
• lastIndexOf(sous_chaine[, index]): retourne l'indice de la
dernière occurrence d'un caractère dans une chaîne

F.A. AMAZAL Technologies du web 2016-2017 203

 Javascript Objets

Objet String
Méthodes

• substring(deb, fin): renvoie un string partiel situé entre la

position deb et la position fin-1 (dernier caractère exclus)
• slice(deb[,fin]): Extrait la sous chaîne débutant à l'indice
désigné par le premier paramètre et s'achevant à l'indice
désigné par le second paramètre (dernier caractère exclus)
• toLowerCase(): renvoie toute la chaîne en minuscule
• toUpperCase(): renvoie toute la chaîne en majuscules
• split(separateur): Construit un tableau dont les éléments
sont les sous chaînes séparées
Remarque: Ces méthodes renvoient la chaine modifiée et ne
modifient pas la chaine en elle même
F.A. AMAZAL Technologies du web 2016-2017 204
 Javascript Objets

Objet String
Exemple

F.A. AMAZAL Technologies du web 2016-2017 205

 Javascript Objets

Objet String: Exemple2

F.A. AMAZAL Technologies du web 2016-2017 206

 Javascript Objets

Objet Math
Propriétés
• PI, E, LN10, LN2, LOG10E, LOG2E, SQRT2
Méthodes
• abs(val): retourne la valeur absolue d’un nombre
• round(val) : retourne l’entier arrondi le plus proche
• floor(val): retourne l’entier immédiatement inférieur (ou
égal)
• ceil(val): retourne l’entier immédiatement supérieur (ou
égal)
• random(): retourne un nombre aléatoire entre 0 et 1
• max(val1, val2), min(val1, val2), pow(val, puiss), sqrt(val),
acos(val), cos(val), exp(val), log(val), …

F.A. AMAZAL Technologies du web 2016-2017 207

 Javascript Objets

Objet Math
Exemple

F.A. AMAZAL Technologies du web 2016-2017 208

 Javascript Objets

Objet Array
• Déclaration
var t1 = new Array(taille) ;
var t2 = new Array(1, "a", 9) ;
var t3=[1, "a", 9];
Remarque: les indices commencent à partir de 0
• Utilisation
var t = new Array(1, "a", 9) ;
[Link](t[0]) ; // 1
t[2] = 6 // 6 remplace 9
• Accroissement automatique de la taille
var t = new Array(2) ;
t[200] = 5 ;
alert([Link]); //201

F.A. AMAZAL Technologies du web 2016-2017 209

 Javascript Objets

Objet Array
• Parcours

F.A. AMAZAL Technologies du web 2016-2017 210

 Javascript Objets

Objet Array
Propriétés
• length: retourne le nombre d'éléments du tableau
• …
Méthodes
• concat(tab2, tab3, …): permet de concaténer plusieurs
tableaux (renvoie un nouveau tableau construit à partir des
différents tableaux)
• join(sépar): transforme un tableau en une chaîne de
caractère dans laquelle les éléments sont séparés par un
caractère de séparation. Le caractère de séparation par
défaut est la virgule.
• push(val1, val2, …): ajoute des éléments à la fin du tableau
• pop(): supprime le dernier élément d’un tableau et retourne
sa valeur
F.A. AMAZAL Technologies du web 2016-2017 211
 Javascript Objets

Objet Array
Méthodes

• shift(): supprime le premier élément du tableau et retourne

sa valeur
• unshift(val1, val2, …): ajoute un ou plusieurs éléments au
tableau. L'ajout se fait au début du tableau
• sort(): permet de trier les éléments du tableau
• reverse(): inverse le classement des éléments du tableau
• slice(début[, fin]): retourne un nouveau tableau extrait de la
position deb jusqu’à la position fin-1

F.A. AMAZAL Technologies du web 2016-2017 212

 Javascript Objets

Objet Array
Exemple1

F.A. AMAZAL Technologies du web 2016-2017 213

 Javascript Objets

Objet Array
Exemple2

F.A. AMAZAL Technologies du web 2016-2017 214

 Javascript Objets

Objet Date
Méthodes
• getDay(): Permet de récupérer la valeur du jour de la semaine
pour la date spécifiée (Entier entre 0 (dimanche) et 6 (samedi))
• getDate(): Permet de récupérer la valeur du jour du mois (Entier
entre 1 et 31)
• getMonth(): Permet de récupérer le numéro du mois (Entier
entre 0 et 11)
• getFullYear(): Permet de récupérer la valeur de l'année sur 4
chiffres pour la date passée en paramètre (Entier (XXXX))
• getYear(): Permet de récupérer la valeur de l'année sur 2
chiffres pour l'objet Date (Entier (XX))
• getHours(): Permet de récupérer la valeur de l'heure (Entier
entre 0 et 23)
• getMinutes(): Permet de récupérer la valeur des minutes (Entier
entre 0 et 59)
F.A. AMAZAL Technologies du web 2016-2017 215
 Javascript Objets

Objet Date
Méthodes
• getSeconds(): Permet de récupérer le nombre de secondes
(Entier entre 0 et 59)
• getTime(): Permet de récupérer le nombre de millisecondes
depuis le 1er janvier 1970 (Entier)
• setDate(X): Permet de fixer la valeur du jour du mois (entre 1
et 31)
• setYear(X): Permet de fixer l'année
• setMonth(X): Permet de fixer le numéro du mois (entier entre
0 et 11)
• setHours(X): Permet de fixer la valeur de l'heure (entier
entre 0 et 23)
• setMinutes(X): Permet de fixer la valeur des minutes (entier
entre 0 et 59)
• F.A.
setSeconds(X):
AMAZAL Permet de fixer du
Technologies la valeur
web des secondes (entier
2016-2017 216
 Javascript Objets

Objet Date
Exemple

F.A. AMAZAL Technologies du web 2016-2017 217

JavaScript
• Introduction
• Variables
• Structures
• Fonctions
• Objets
• Evénements sur les éléments
• Sélection des éléments
• Manipulation des éléments

F.A. AMAZAL Technologies du web 2016-2017 218

 Javascript Evénements sur les éléments

Objets éléments
• JavaScript traite les éléments qui s'affichent dans le
navigateur comme des objets, c'est-à-dire des éléments :
 classés selon une hiérarchie pour pouvoir les désigner
précisément
 auxquels on associe des propriétés, des méthodes, et des
événements

• Par exemple, pour atteindre un checkbox à l'intérieur d'un

formulaire, la hiérarchie est :

• Utilisation de la notation pointée:

[Link]
F.A. AMAZAL Technologies du web 2016-2017 219
 Javascript Evénements sur les éléments

Objets éléments (du navigateur)

F.A. AMAZAL Technologies du web 2016-2017 220

 Javascript Evénements sur les éléments

Objets éléments
Propriétés
• Une propriété est un attribut, une caractéristique, une
description de l'objet

Méthodes
• Une méthode est une fonction de traitement de données
associée à un objet
• Exemple : objet Input

Propriétés : name, type, value,…

Méthodes : focus(), blur, …

F.A. AMAZAL Technologies du web 2016-2017 221

 Javascript Evénements sur les éléments

Objets éléments
Evénements
• Les événements sont des actions de l’utilisateur, qui vont
pouvoir donner lieu à une interactivité
• L’événement correspond à un clic de souris, une sélection
d’un champ, une touche pressée au clavier. . .
• Il est possible d’associer des fonctions à des événements

• La syntaxe est la suivante :

onEvenement="Action_Javascript_ou_Fonction()"

F.A. AMAZAL Technologies du web 2016-2017 222

 Javascript Evénements sur les éléments

Elément window
• L'objet window représente la fenêtre du navigateur
• Méthodes
 alert()
Ouvre une boîte de dialogue avec le message passé en
paramètre
 confirm()
Ouvre une boîte de dialogue avec 2 boutons OK et
Annuler, retourne un booléen
 prompt()
Ouvre une boîte de dialogue avec une zone saisie et 2
boutons OK et Annuler, retourne l'information lue

F.A. AMAZAL Technologies du web 2016-2017 223

 Javascript Evénements sur les éléments

Elément document
• L'objet "document" fait référence au contenu de la fenêtre
• "document" = ensemble des éléments HTML de la page
• Propriétés
 title : titre du document
 bgColor : couleur de fond
 forms[ ] : tableau des formulaires de la page
 [Link] : nombre de formulaire(s) de la page
 links[ ] : tableau des liens de la page
 [Link] : nombre de lien(s) de la page
 images[ ] : tableaux des images
• Méthodes
 write(string): écrit une chaîne dans le document
 writeln(string): idem + caractère de fin de ligne

F.A. AMAZAL Technologies du web 2016-2017 224

 Javascript Evénements sur les éléments

Formulaire
But
• Interaction avec l’utilisateur sous la forme d’une saisie
d’informations

Intérêt de JavaScript
• Augmenter l’interaction du côté client pour :
 assister et guider le visiteur
 contrôler la saisie
 réaliser des traitements (calcul, …)
 envoyer des résultats au serveur

F.A. AMAZAL Technologies du web 2016-2017 225

 Javascript Evénements sur les éléments

Formulaire
Propriétés
• Name : nom (unique) du formulaire
• Method : méthode de soumission (0=GET, 1=POST)
• Action : action déclenchée par la validation du formulaire
• Target: fenêtre cible du formulaire(utile dans le cas d’une
page comportant des frames ou de
multiples fenêtres)
• Encoding: Type d'encodage du formulaire
• Elements[ ] : tableau des éléments du formulaires
• Length : nombre d’éléments du formulaire

F.A. AMAZAL Technologies du web 2016-2017 226

 Javascript Evénements sur les éléments

Formulaire
Méthodes
• submit() : soumet le formulaire
• reset() : réinitialise le formulaire avec les valeurs par défaut

Événements
• onSubmit(): Détecte la soumission du formulaire
• onReset() : Détecte la réinitialisation du formulaire

F.A. AMAZAL Technologies du web 2016-2017 227

 Javascript Evénements sur les éléments

Formulaire
Accès à l’objet correspondant à un formulaire
• Exemple

• 3 possibilités
 document.Form1 (ou Form1)
 [Link][0]
 [Link]["Form1"]

F.A. AMAZAL Technologies du web 2016-2017 228

 Javascript Evénements sur les éléments

Formulaire
Accès aux éléments d’un formulaire
• Exemple

• 3 possibilités :
 document.Form1.champ1
 [Link][0]
 [Link]["champ1"]

F.A. AMAZAL Technologies du web 2016-2017 229

 Javascript Evénements sur les éléments

Formulaire
Exemple

F.A. AMAZAL Technologies du web 2016-2017 230

 Javascript Evénements sur les éléments

Formulaire: Accès aux champs

Remarque

Dans l’exemple précédent,

• Pour accéder à la valeur du champ mail, on peut utiliser la

syntaxe:
 [Link]

 [Link]

 [Link][0].elements[0].value ;

 [Link]["F"].elements["mail"].value

F.A. AMAZAL Technologies du web 2016-2017 231

 Javascript Evénements sur les éléments

Formulaire: Accès aux champs

Exemple

F.A. AMAZAL Technologies du web 2016-2017 232

 Javascript Evénements sur les éléments

Formulaire: Accès aux champs

Exemple

F.A. AMAZAL Technologies du web 2016-2017 233

 Javascript Evénements sur les éléments

Éléments <input …>

Propriétés
• name : nom du champ
• type : type du champ (text, button, radio, checkbox, submit,
reset)
• value : valeur textuelle
• size : taille du champ
• maxlength : taille maximale d’un champ texte
• checked : case à cocher / bouton radio coché ou non
• disabled : grisé (modification impossible)
• readOnly : lecture seule

F.A. AMAZAL Technologies du web 2016-2017 234

 Javascript Evénements sur les éléments

Éléments <input …>

Méthodes
• focus : donne le focus (curseur)
• blur : enlève le focus
• click : simule un click (sur un bouton)
Événements
• onFocus : détecte la prise de focus
• onBlur : détecte la perte de focus
• onClick : détecte le click de souris
• onChange : détecte les changements

F.A. AMAZAL Technologies du web 2016-2017 235

 Javascript Evénements sur les éléments

Éléments <input …>

Exemple

F.A. AMAZAL Technologies du web 2016-2017 236

 Javascript Evénements sur les éléments

Objet this

• Il est fastidieux d'accéder aux éléments de formulaire

par toute la chaîne

[Link]

• Un objet JavaScript this permet de raccourcir ce

chemin d'accès

• this représente l'objet JavaScript en cours d'utilisation

F.A. AMAZAL Technologies du web 2016-2017 237

 Javascript Evénements sur les éléments

Objet this
Exemple

onMouseOut onMouseOver

F.A. AMAZAL Technologies du web 2016-2017 238

 Javascript Evénements sur les éléments

Événement onMouseOver /Out

Événement onMouseOver

• Analogue à onClick sauf qu’il suffit que l’utilisateur place le

pointeur de sa souris sur l’un des éléments précités (lien
hypertexte, image, bouton, texte, etc.) pour qu’il ait lieu

Événement onMouseOut

• A l’inverse de onMouseover, cet événement se produit

lorsque le pointeur de la souris quitte la zone de sélection
d’un élément

F.A. AMAZAL Technologies du web 2016-2017 239

 Javascript Evénements sur les éléments

Événement onKeyUp /onKeyDown

Contrôle de nombre de caractères(1)

F.A. AMAZAL Technologies du web 2016-2017 240

 Javascript Evénements sur les éléments

Événement onKeyUp/onKeyDown
Contrôle de nombre de caractères(2)

F.A. AMAZAL Technologies du web 2016-2017 241

JavaScript
• Introduction
• Variables
• Structures
• Fonctions
• Objets
• Evénements sur les éléments
• Sélection des éléments
• Manipulation des éléments

F.A. AMAZAL Technologies du web 2016-2017 242

 Javascript Sélection des éléments

Sélection d’éléments
• Pour manipuler les éléments d’une page HTML, il faut au
préalable les sélectionner

• La sélection d’éléments peut se faire

 par son attribut id
 par son attribut class
 par sa balise
 par un sélecteur CSS

F.A. AMAZAL Technologies du web 2016-2017 243

 Javascript Sélection des éléments

Sélection par l’identité

getElementById

• La méthode getElementById de l’objet document sélectionne

l’unique élément du document dont l’id est fourni en
paramètre, ou null si aucun

• Le résultat est un objet élément (de type HTMLElement)

• Exemple

var element = document . getElementById ("p1");

F.A. AMAZAL Technologies du web 2016-2017 244

 Javascript Sélection des éléments

Sélection par la classe

getElementsByClassName

• La méthode getElementsByClassName sélectionne les

éléments dont la classe est fournie en paramètre

• Elle peut s’appliquer sur l’objet document ou sur un objet

élément. Dans le second cas, seuls les éléments descendants
sont sélectionnés

• Elle a pour résultat la liste des éléments sélectionnés. Cette

liste est dynamique

F.A. AMAZAL Technologies du web 2016-2017 245

 Javascript Sélection des éléments

Sélection par balise

getElementsByTagName

• La méthode getElementsByTagName sélectionne les

éléments dont la balise est fournie en paramètre

F.A. AMAZAL Technologies du web 2016-2017 246

 Javascript Sélection des éléments

Sélection par sélecteurs CSS

querySelectorAll

• La méthode querySelectorAll sélectionne les éléments

retenus par le sélecteur CSS fourni en paramètre

• Peut s’appliquer à l’objet document ou à un objet élément.

Dans le cas d’une invocation sur un élément e, le sélecteur
est appliqué à tout le document et seuls les éléments
descendants de e sont retenus

• La liste résultat n’est pas dynamique

querySelector

• querySelector est similaire mais ne fournit que le premier

élément
F.A. AMAZAL Technologies du web 2016-2017 247