Vous êtes sur la page 1sur 247

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


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


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


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


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


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


6
Introduction au web Internet et web

Services d’Internet

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


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


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


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


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


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


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


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 : HTTP

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


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


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


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


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


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
http://www.exemple.com/chemin/page.html?q=req
https://www.google.com/?gws_rd=ssl#q=Web
– http :protocole
– www.exemple.com :hôte
– /chemin/ :chemin absolu sur le service
– page.html :nom de la page Web
– q=req :chaine de requête, transmise à la page

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


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


20
Introduction au web Evolution du web

Evolution du web
Degré de connectivité des connaissances

• Caractérisé par des pages Web


statiques, rarement mises à
jour
• Considéré principalement
comme un outil de diffusion et
de visualisation de données.
• Période:1991-1999

Degré de connectivité sociale

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


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’
Degré de connectivité des connaissances

Les blogs, réseaux sociaux…

• “Trop d’information tue l’information”


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

Degré de connectivité sociale

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


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
Degré de connectivité des connaissances

métadonnées systématiques pour


chaque page web
• Les informations ne seraient plus
stockées mais "comprises" par les
ordinateurs afin d'apporter à
l'utilisateur ce qu'il cherche vraiment.
• Période:2010-xx

Degré de connectivité sociale

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


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


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


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

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


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


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


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


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="http://www.youtube.com"> Le site YouTube </a>
• Ou (balise sans contenu)
<balise attributs>
Exemple: <hr>

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


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


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


32
HTML Présentation générale

Structure d’un document HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<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


33
HTML Présentation générale

Structure d’un document HTML


Exemple

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


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


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


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


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


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


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


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


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


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


43
HTML Corps d’un document

Listes: Exemple

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


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


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>
 remplaçant les <td> ... </td> qui contiennent des en-têtes
(de ligne, de colonne) par des <th> ... </th> (table header)

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


46
HTML Corps d’un document

Tableaux: Exemple1

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


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)
• CELLSPACING: Espace inter-cellules

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


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


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


50
HTML Corps d’un document

Tableaux: Exemple2

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


51
HTML Corps d’un document

Tableaux: Exemple3

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


52
HTML Corps d’un document

Tableaux: Exemple4

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


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


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


55
HTML Corps d’un document

Images
• Exemples
<img src="images/Arbre.jpg" alt="Arbre sapin" height="50%"
width="50%" title="Arbre sapin" border="3" >
<img src="http://www.wikipedia.org/images/robot.png"
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


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="http://www.wikipedia.org">aller vers wikipedia</A>
<A HREF="Accueil.html">Page d’accueil</A>

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

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


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="http://www.wikipedia.org">aller vers wikipedia</A>
2. Liens vers des pages locales (même site)
Exemple:
<A HREF="Contacts.html">Mes contacts</A>
<A HREF="dossier1/Contacts.html">Mes contacts</A>

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


58
HTML Corps d’un document

Liens externes
• Exemple

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


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


60
HTML Corps d’un document

Liens externes
• Exemple: Chemin relatif

Racine du site

Dossier1

Page1.html
Href=“Page2.html”
Page2.html Href= “SousDossier/Page3.html”
SousDossier Href=“../Dossier2/Page4.html”
Page3.html
Dossier2

Page4.html

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


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


62
HTML Corps d’un document

Liens internes: Exemple

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


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="http://www.fsa.ac.ma/cours/web.html#partie2">
Deuxième Partie</a>

Et dans le document web.html 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


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@gmail.com?Subject= Demande
d’information"> Envoyez moi un message </A>

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


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="http://fr.wikibooks.org" target="_blank">Lien
ouvrant Wikilivres</a>

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


66
HTML Corps d’un document

Lien avec une image


• Exemples

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


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 browser
ne gérant pas les frames

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


68
HTML Corps d’un document

Frames: Attributs de Frameset


<FRAMESET ROWS="pixels ou %, ..." | COLS="pixels ou %, …"
BORDER="nb.pixels" 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


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


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


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


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


73
HTML Corps d’un document

Frames
• Exemple
Index.html
<HTML><HEAD></HEAD>
<FRAMESET COLS="30%,70%">
<FRAME SRC="fichier1.html" NAME="frame1">
<FRAMESET ROWS="30%,70%">
<FRAME SRC="fichier2.html" NAME="frame2">
<FRAME SRC="fichier3.html" NAME="frame3">
</FRAMESET>
</FRAMESET></HTML>

Fichier1.html Fichier2.html Fichier3.html


<HTML> <HTML> <HTML>
<BODY> <BODY> <BODY>
BONJOUR SALUT HOLA
</BODY> </BODY> </BODY>
</HTML> </HTML> </HTML>

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


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="Liste.html" target=frame2>Liste des modules</A>
<A href="image.jpg" target=frame3>Mon image</A>

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


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 contenant le lien

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


76
HTML Corps d’un document

Formulaires: Exemple

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


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: encodage par défaut
- multipart/form-data: aucun encodage (utilisé pour file-upload)
• Exemple: <form method="post" action="action.php"> … </form>

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


78
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


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


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


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


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


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 http://)
<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


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)
• Exemple: <input type="date"/>

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


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


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


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


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


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


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


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


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 le(s) choix
par défaut
F.A. AMAZAL Technologies du web 2016-2017 93
93
HTML Corps d’un document

Menu de sélection
• Exemple

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


94
HTML Corps d’un document

Exercice

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


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


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


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


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


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


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 101


101
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. http://jigsaw.w3.org/css-validator/
• Commentaires entre /* et */.
F.A. AMAZAL Technologies du web 2016-2017 102
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


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


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


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


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
 Sinon, la dernière règle s’applique

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


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: black; }

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


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


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.
 p.comment { font-style: italic; }
met l’ensemble des balises <p> de classe comment en italique

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


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


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


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


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


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


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^="http://fil.univ-lille1.fr"]
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-2017 116
116
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


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


118
CSS Sélecteurs de CSS

Combinaison de sélecteurs

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


119
CSS Sélecteurs de CSS

Exercice
Soit le code html suivant: Et soit la feuille de style
suivante (style.css):

Indiquez pour chaque


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

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


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, in, pt, pc

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


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


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
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


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), etc.

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


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


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(image1.gif);}

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


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


Exemple (couleur bleu): #0000FF

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


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


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(monImage.jpg);}
• 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(image.jpg);
background-repeat: repeat-x }
F.A. AMAZAL Technologies du web 2016-2017 130
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("image.gif");
background-attachement: fixed;}
• background
Raccourci pour les différentes propriétés d'arrière-plan
Exemple: p {background: image.gif fixed repeat}

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


131
CSS Mise en forme

Exercice

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


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


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


134
CSS Mise en page

Boîtes CSS

marge externe (margin)

margin

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


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


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


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


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 respectivement aux
bordures du haut, de droite, du bas et de gauche

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


139
CSS Mise en page

Bordures des boîtes


• Exemple:

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


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


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


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
calculée à partir des autres valeurs

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


143
CSS Mise en page

Marges
• Exemple

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


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


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


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


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


148
CSS Mise en page

Positionnement statique
• Exemple

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


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


150
CSS Mise en page

Positionnement absolu
• Exemple
Code html Code CSS

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


151
CSS Mise en page

Positionnement absolu
• Exemple
Code CSS

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


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


153
CSS Mise en page

Positionnement fixe
• Exemple

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


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
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


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


157
CSS Mise en page

Flottement
• Exemple: Flux normal (sans flottement)

Code CSS

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


158
CSS Mise en page

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

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


159
CSS Mise en page

Flottement
• Exemple: avec flottement

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


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


161
CSS Mise en page

Dégagement
• Exemple

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


162
CSS Mise en page

Dégagement
• Exemple

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


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


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 height

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


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


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


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


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


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


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


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 essai.js contient le code :


document.write("Bonsoir");

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


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


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


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


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


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


177
Javascript Variables

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

• Exemple

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


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


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


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


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


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


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


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


185
Javascript Structures

Structures conditionnelles
• Exemple

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


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


187
Javascript Structures

Structures itératives
• Exemple

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


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


189
Javascript Structures

Structures itératives
• Exemple

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


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


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


192
Javascript Fonctions

Fonctions: appel
• on appelle une fonction en précisant les paramètres effectifs entre
parenthèses
• Exemple1
function Affiche(txt)
{
document.write(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


193
Javascript Fonctions

Fonctions: appel
• Exemple3: Calcul de la factorielle

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


194
Javascript Fonctions

Fonctions: appel
• Exemple4

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


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


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
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
parseInt (" 42 est la réponse "); 42
parseInt ("42 43 44"); 42
parseInt (" réponse = 42"); NaN

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


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


199
Javascript Fonctions

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

var txt="234";
a=Number(txt);
document.write(a +" : "+ typeof(a) +"<br>");
document.write(Number(true));

String
• Convertit l'objet spécifié en chaîne de caractères

a=234;
txt=String(a);
document.write(txt +" : "+ typeof(txt) +"<br>");
document.write(String(true));

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


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


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


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


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
204
Javascript Objets

Objet String
Exemple

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


205
Javascript Objets

Objet String: Exemple2

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


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


207
Javascript Objets

Objet Math
Exemple

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


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) ;
window.alert(t[0]) ; // 1
t[2] = 6 // 6 remplace 9
• Accroissement automatique de la taille
var t = new Array(2) ;
t[200] = 5 ;
alert(t.length); //201

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


209
Javascript Objets

Objet Array
• Parcours

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


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


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


212
Javascript Objets

Objet Array
Exemple1

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


213
Javascript Objets

Objet Array
Exemple2

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


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


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)
• setSeconds(X): Permet de fixer la valeur des secondes (entier entre 0
et 59)

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


216
Javascript Objets

Objet Date
Exemple

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


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


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:

window.document.form.checkbox

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


219
Javascript Evénements sur les éléments

Objets éléments (du navigateur)

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


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


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


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


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
 forms.length : nombre de formulaire(s) de la page
 links[ ] : tableau des liens de la page
 links.length : 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


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


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


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


227
Javascript Evénements sur les éléments

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

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

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


228
Javascript Evénements sur les éléments

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

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

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


229
Javascript Evénements sur les éléments

Formulaire
Exemple

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


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:

 F.mail.value

 document.F.mail.value

 document.forms[0].elements[0].value ;

 document.forms["F"].elements["mail"].value

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


231
Javascript Evénements sur les éléments

Formulaire: Accès aux champs


Exemple

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


232
Javascript Evénements sur les éléments

Formulaire: Accès aux champs


Exemple

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


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


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


235
Javascript Evénements sur les éléments

Éléments <input …>


Exemple

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


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

document.forms.elements

• 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


237
Javascript Evénements sur les éléments

Objet this
Exemple

onMouseOut onMouseOver

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


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


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


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


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


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


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


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


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


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


247

Vous aimerez peut-être aussi