UE IUTGI 23 : SYSTEME

D’INFORMATION ET BASE DE
DONNES

EC :GI232
TECHNOLOGIE ET
PROGRAMMATION WEB

NIVEAU 1 (GENIE INFORMATIQUE)

SEMESTRE 2

EQUIPE PEDAGOGIQUE:
Dr NKONJOH (CM = 12 H ; TD = 00 H ; TP = 00 H)
Mme. DIPOKO (TD = 12 H ; TP = 00 H, TPE = 04H)
M. MEDJINIA (TD = 12 H; TP = 00 H; TPE = 05H)

Par Dr NKONJOH 1
IUTGI23 : SYSTEME DUREE : 45Heures
D’INFORMATION ET BASE CM : 12h
DE DONNES
TD : 24h

TP : 00h

TPE : 09h

Objectif :

Cet enseignement vise à doter l’étudiant de compétences

pour réaliser des sites web avec les technologies clientes :
HTML, CSS, Javascript, Ajax et Jquery.

• Étudier les bases et principes du web

• Faire de la programmation en langages de scripts :
HTML, CSS et JavaScript
• Utiliser les nouvelles technologies existantes pour la
programmation web statique : JQuery, Boostrap, AJAX
….
• Mettre en ligne de l’information (Hebergement)

Par Dr NKONJOH 2
FICHE DE PROGRESSION DU COURS

SEQUENCE THÈME DÉVELOPPÉ DURÉE

Chapitre 1 : Généralités sur la programmation web

SÉQUENCE 1 I.1 Introduction CM : 5h
Généralités sur I.2 Le web TP : 4h
les Technologies
I.3 l e s langages et leurs utilités TD : 3h
et programmation
I.4 le langage de base sur le web (HTML) TPE : 3h
web

Chapitre 2 : Mise en forme d’un site web : feuille de style (CSS)

CM : 5h
SÉQUENCE 2 II.1 Introduction
TP : 4h
Technologies de II.2 Syntaxe CSS
Mise en forme II.3 Les selecteurs CSS TD : 3h
sur le web TPE : 3h
II.4 Principes et techniques
II.5
Chapitre 3 : Dynamisme avec Javascript
SÉQUENCE 3 III.1 Introduction
CM : 5h
Interactivité sur III.2. Insertion dans une page web
TP : 4h
le web III.3 Syntaxe de base du langage
TD : 3h
III.4 Quelques dynamisme
IV.5 Contrôle continu

Par Dr NKONJOH 3
 SOURCES DOCUMENTAIRES
1. Databeker, Grand livre HTML, 4-XML-XHTML, Relié, 2000
2. Nicolas Froidure, JavaScript : Le Guide Complet, Micro Application
Editions
3. Eric Sarrion, Query 1.7 et jQuery UI, Une bibliothèque pour JavaScript,
Eyrolles
4. Alexandre Brillant, XML : Cours et exercices, Broché, 2010

Par Dr NKONJOH 4
 Séquence 1 : Généralités sur la programmation
web
Objectif
À l’issue de cette séquence, les connaissances et savoir-faire acquis par l’étudiant lui
permettront de :

1. Présenter l'évolution du web et des langages de marquage ;

2. Expliquer les aspects de structure, de style et traitement dans un site web ;
3. Définir les principales balises utilisées dans les langages HTML et XHTML ;
4. Monter et utiliser des formulaires dans un site web ;
5. Présenter quelques outils efficaces d'intégration des objets multimédia ;

Introduction :
La programmation web est la programmation informatique qui permet d'éditer des sites web. Elle permet la
création d'applications, destinée à être déployée sur Internet ou un Intranet, constituées de pages pouvant
prendre différentes formes, notamment :
• Un ensemble de pages « statiques », c'est-à-dire dont le contenu n'est pas influencé par l'internaute qui
la demande, et qui n'évolue pas sans une intervention manuelle sur le code.
• Un ensemble de pages « dynamiques », c'est-à-dire dont le contenu évolue sans que le code du site
web ne soit modifié, soit via l'interaction des utilisateurs, soit par du calcul. C'est le cas de la très large
majorité des sites web depuis le début des années 2000.
Pour un internaute qui fait appel à une URL, la page web correspondante, qu'elle soit statique ou dynamique,
consiste en du code « côté client » (HTML, CSS, Javascript, ...) qui est interprété par son navigateur (Google
Chrome, Firefox, ...) produisant une interface utilisateur. Ce code, qui est renvoyé par un serveur web, peut
ou non avoir été généré par du calcul « côté serveur », via des langages de programmation particuliers, pouvant
faire appel à des bases de données, des API...
Il existe différentes technologies et différents langages permettant de construire des sites web par
l'intermédiaire de serveurs web, que l'on peut donc classer selon deux principes : des langages de
programmation côté client, ou côté serveur. Cette distinction est faite pour séparer les langages « côté
serveur » dont le code est exécuté sur le serveur web avant d'arriver sur le navigateur de l'utilisateur, des

Par Dr NKONJOH 5
langages « côté client » dont l'exécution ne nécessite pas de calcul sur le serveur web mais, seulement après
le téléchargement de la page, une interprétation par le navigateur de l'utilisateur.

I. Le Web

1. Qu’est-ce que le Web ?

Le Web est le terme communément employé pour parler du World Wide Web, ou WWW, traduit en
français par la toile d'araignée mondiale. Il fait référence au système hypertexte fonctionnant sur le réseau
informatique mondial Internet. Par abus de langage, le Web désigne de façon plus large tout ce qui se
rapproche à cet univers internet. On ne fait plus toujours aujourd'hui la distinction technique entre ce que
définit le Web et ce que définit Internet.
Il ne faut pas confondre Web et internet car le web n’est qu’une application d’internet comme le courrier
électronique (email ou courriel en français), la messagerie instantanée, le partage de fichier en peer to
peer (en pair à pair en français) ou le partage de fichier via le protocole FTP.

2. Les langages et leur utilité

2.1. HTML

Toute page web comprend une base de langage HTML ou XHTML. Il s'agit d'un langage de balisage qui
définit essentiellement la structure de la page web (titres, tableaux, paragraphes, listes, etc.). Initialement, c'est
un langage qui permet de créer des hyperliens, à savoir des liens d'un document à un autre ou d'un endroit d'un
document à un autre endroit du même document (identificateur de fragment). Ce langage ne définissait au
départ que la structure de la page, mais très vite se sont rajoutées des balises (ou tags) qui s'occupaient de
spécifier les caractéristiques de la page web (hiérarchisation du contenu, attributs donnés aux balises...).
2.2. CSS

Pour mettre en forme le contenu d’une page Web au travers un navigateur on peut le faire de façon
rudimentaire avec le langage HTML, mais aussi de façon plus élaboré avec le langage CSS (Cascading
Styles Sheet). Pour la mise en forme, mise en page (placement des éléments, colorisation, …), le langage
CSS nous permet de fixer toutes les règles de mise en page (style des titres, des paragraphes, des liens, etc.
) pour la page Web.

Grâce aux langage CSS, on peut agir précisément sur le code HTML de la page Web en agissant sur ses
balises :

• En agissant sur l’ensemble des balises HTML du même nom (exemple : action sur l’ensemble des
balises HTML paragraphes <p>)

Par Dr NKONJOH 6
 • En agissant sur une balise spécifique identifier précisément par un identifiant unique (ID, nom
unique donnée à une balise HTML quelle qu’elle soit)

• En agissant sur une ou plusieurs balises d’une même classe, famille (nom – indicateur que l’on
peut donner à une ou plusieurs balises HTML qui peuvent être identiques ou différentes).

2.3. JavaScript

Contrairement à ce que son nom indique, ce langage de script dynamique et orienté objet n’a rien à voir
avec Java, si ce n’est que les deux sont dérivés du langage C. Il a été développé à l’origine par Netscape en
1995 sous le nom de LiveScript dans l’objectif d’étoffer l’utilisation d’HTML et des CSS. Il s’agissait de
permettre aux programmeurs d’évaluer les interactions entre utilisateurs et de présenter les contenus de
façon dynamique. Aujourd’hui, le JavaScript est utilisé non seulement dans les navigateurs, mais aussi dans
les microcontrôleurs et les serveurs. Le nom de JavaScript a été choisi à des fins de marketing, pour profiter
de la popularité de Java. Le succès a été au rendez-vous : aujourd’hui, presque tous les sites Internet les plus
connus utilisent le JavaScript comme langage de programmation de choix côté client.

3. Les formats d’images

Les sites Web utilisent généralement des images numériques de trois formats :
• GIF (Graphics Interchange Format)
• JPG / JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphics)

Le format GIF ne supporte que 256 couleurs uniques. Pour obtenir le reste des nuances, les pixels voisins
sont mélangés afin que l'œil humain les perçoive comme la bonne couleur. C'est pourquoi ce format ne
convient pas aux photos en couleur. Il est utilisé pour créer des images simples (diagrammes, boutons,
graphiques simples, etc.) qui se chargent rapidement et ne ralentissent pas le site.
Le format JPEG supporte plus que 16 millions couleurs. Il convient pour la compression et le stockage de
photos en couleur, mais une fois compressé, leur qualité est perdue. Lorsque vous travaillez avec ce format,
l’essentiel est de trouver un équilibre entre le niveau de qualité et le poids optimal des images.
Le format PNG combine les avantages des formats JPEG et GIF. Il prend en charge des millions de couleurs
et vous permet de compresser des images sans perte de qualité. Ce format est adapté à la sauvegarde
d’images où vous avez besoin d’une extrême clarté (dessins, graphiques, diagrammes complexes, etc.).
Les formats modernes
Outre les formats d'image classiques, il existe des formats modernes qui gagnent progressivement en
popularité.
• Le format WebP développé par Google remplace le format JPEG: avec le même taux de
compression, il offre la meilleure qualité.

Par Dr NKONJOH 7
 • Un autre format qui surpasse le JPEG classique en préservant une meilleure qualité au même niveau
de compression est BPG (Better Portable Graphics).
• Apple dans la 11ème version d'iOS au lieu de JPEG utilise le format HEIC, qui vous permet de
sauvegarder des images de haute qualité qui ne prennent pas beaucoup de place.
4. Les navigateurs et leurs outils

II. Le HTML

A. Règles générales
1. Préserver la lisibilité : l’indentation, les commentaires
1.1. L’indentation

L'indentation consiste à introduire une ou plusieurs tabulations au début de certaines lignes d'un
programme afin d'en améliorer la lisibilité. Voici le même code, après indentation.
1.2. Les commentaires

Les commentaires sont, en programmation informatique, des portions du code source ignorées par le
compilateur ou l'interpréteur, car destinées en général à un lecteur humain et non censées influencer
l'exécution du programme.

2. Les éditeurs pour le code

Un éditeur de texte est un programme informatique qui permet de créer et de modifier des fichiers contenant
du texte brut, c’est-à-dire sans formatage spécial. Quelques éditeurs utiles pour ce cours sont : Sublime Text,
Atom, Notepad++, CoffeeCup – The HTML Editor, TextMate, Vim, Visual Studio Code.

3. Des raccourcis bien pratiques

Afin de coder plus rapidement, certains raccourcis sont nécessaires :

• CTRL+ N creation d’un nouveau fichier
• CTRL+ S Enregistrez un fichier
• CTRL+ O Ouvrir un fichier existant
• CTRL+ D Dupliquer une ligne
• CTRL+ C Copier un objet
• CTRL+ V Coller un objet préalablement copier
• CTRL+ X Couper un objet

Par Dr NKONJOH 8
 B. Le langage HTML
1. Mise en forme en HTML

L'apparence du texte à l'écran dépend des balises HTML utilisées pour le formater. Les balises de formatage
appartiennent à deux catégories : les balises de balisage physique responsables du style (gras, italique, police,
etc.) et les balises de balisage logique qui portent une charge sémantique (par exemple, indiquez aux moteurs de
recherche quels mots clés doivent être classés sur une page Web).
Examinons en détail les balises de formatage et expliquons les nuances de leur application.
1.1. Les balises <b> et <strong>

Les balises HTML <b> et <strong> définissent la police en gras. La différence entre eux est que la balise <b>
est une balise de balisage physique et met en évidence le texte sans accentuer son importance. La balise
<strong> identifie le texte qui revêt une importance particulière. Le contenu de la balise a beaucoup de poids
pour les moteurs de recherche, et les appareils qui lisent à partir de l'écran sont mis en évidence par une
certaine intonation.

Exemple
Résultat

Par Dr NKONJOH 9
 1.2. Les balises <i> et <em>

Les balises <i> et <em> définissent la police italique. La balise de texte <i> est un élément de balisage
physique. En d'autres termes, le texte incorporé ne diffère que de manière visuelle et n'est pas perçu comme
étant important par les navigateurs et les moteurs de recherche. La balise <em> met en valeur de manière
expressive et émotionnelle un morceau de texte.

Exemple Résultat

1.3. Les balises <sub> et <sup>

La balise <sub> est utilisé pour définir le texte avec un index inférieur (indice).

2. Les tableaux en html

Pour créer des tables en HTML on utilise l’élément <table>. Il serve de conteneur pour les éléments, qui
définissent le contenu de la table. Des lignes dans le tableau sont définies par le tag de bloc <tr> (abrégé de
l’anglais “table row” – lignes de la table). Chaque ligne du tableau est écrite dans un tag <tr> distincte. Le
tag <tr> stocke les cellules du tableau ajoutées à l’aide du tag <td> (abrégée de l’anglais. “table data” –

Exemple Résultat
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<table>
<tr>
<th>Mois</th>
<th>Data</th> Sans bordures
</tr>
<tr>
<td>Janvier</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>Février</td>
<td>10.01.2014</td> Avec Bordures
</tr>
</table>
</body>
</html>

Par Dr NKONJOH 10
données de tableau). Chaque cellule est écrite dans un tag <td> distincte. Les cellules enregistrent le contenu
de la table (nombres, texte etc.). Le titre d'une ligne ou d'une colonne du tableau est spécifié à l'aide du tag
<th> (en abrégé "tête de table"). Le tag <th> est placé dans la première ligne du tableau. Dans le navigateur,
il est automatiquement attribué en gras.
1.4. Les bordures des tableaux

Comme vous pouvez le voir dans l’exemple, le navigateur par défaut n’affiche pas les cadres du
tableau. On peut les ajouter en deux manières, en utilisant l’attribut border, ou à l’aide des styles CSS.
L’attribut border installe le cadre autour du tableau et les bordures entre les cellules. Si la valeur de
l’attribut n’est pas affichée, le navigateur affiche alors un cadre d'une épaisseur d'un pixel. Par défaut,
le cadre est affiché en double.
1.5. Regroupement des éléments de la table

On peut regrouper le contenu du tableau dans les blocs logiques. Pour ce faire, HTML fournit les tags
suivants :
• Le tag <thead> - (abrégé de l’anglais “table head” - "tête" du tableau) regroupe une ou
plusieurs des premières lignes de la table, c'est-à-dire créer un "chapeau" de la table.
• Le tag <tbody> - (abrégé de l’anglais “table body” - "corps" du tableau) regroupe les lignes
centrales du tableau avec le contenu principal. (On peut utiliser plusieurs de ces blocs dans un
tableau).
• Le tag <tfoot> - (abrégé de l’anglais “table footer” - pied de table) regroupe la ligne du bas,
formant le "sous-sol" de la table. (Un seul tag <tfoot> peut être utilisé dans une table).
1.6. La combinaison des cellules

Par Dr NKONJOH 11
 Pour combiner des cellules dans une table, les attributs colspan et rowspan sont utilisés. L'attribut colspan
spécifie le nombre de cellules à combiner horizontalement et l'attribut rowspan à la verticale.

Exemple 1 Résultat Exemple 2

<!DOCTYPE html> <!DOCTYPE html>

<html> <html>
<head> <head>
<title>Titre du </title> <title>Titre</title>
</head> </head>
<body> <body>
<table border=”1”> <table >
<tr> <tr>
<th colspan="2">Mois et <th>Mois</th>
Data</th> <th>Data</th>
</tr> Fusion horizontale </tr>
<tr> <tr>
<td>Janvier</td> <td>Janvier</td>
<td>10.01.2014</td> <td
</tr> rowspan="2">10.01.2014</td>
<tr> </tr>
<td>Février</td> <tr>
<td>10.01.2014</td> Fusion verticale <td>Février</td>
</tr> </tr>
</table> </table>
</body> </body>
</html> </html>

3. HTML et le multimédia
3.1. Les images en HTML

Pour insérer une image dans la page Web, on utilise le tag simple <img /> avec un certain nombre
d'attributs.
3.1.1. Les attributs obligatoires pour le tag <img>

L’attribut src (source) est requis, car il indique le chemin de l’accès à l’image. La valeur de l’attribut src peut
être un nom de fichier, aussi que son URL.
L’attribut alt est aussi requis. Sa valeur est un texte explicatif affiché dans le navigateur avant le chargement
de l'image ou si le chargement de l’image échoue.
3.1.2. Les attributs recommandés pour la balise <img />

Avec le tag <img/> on recommande d’utiliser les attributs :

• width et height, qui définissent la largeur et la hauteur des images respectivement. Tout d’abord, le
navigateur charge le texte sur la page, et ensuite les images. Quand la hauteur et la largeur des images
sont indiquées, le navigateur réserve un lieu pour des images (on voit un carré vide sur la page). Si
ces paramètres ne sont pas indiqués, le navigateur ne saura pas la taille de l'image et montrera un petit

Par Dr NKONJOH 12
 carré. Une fois l'image chargée, le texte et les autres objets de la page seront déplacés, ce qui affectera
la vitesse de téléchargement du site et entraînera des inconvénients.
• title qui permet d’afficher une infobulle d’aide. Il est le même que pour les liens.

Exemple Résultat

<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h1>insertion d'une image</h1>
<img src="./../etoile.png"
alt="Topologie en étoile"
title="Schéma d'une topologie en étoile"
width="200px"
height="180px"
/>
</body>
</html>

3.2. L’audio en HTML5

Avant HTML5, les fichiers audios étaient ajoutés aux pages Web, intégrant le fond sonore à l’aide du tag
<bgsound>. Le fichier a été lu lors de l'affichage de la page et l'utilisateur n'a pas eu la possibilité de le
désactiver. Avec l'avènement de la nouvelle balise <audio> en HTML5, les fichiers audios sont ajoutés avec
une interface logicielle intégrée.
3.2.1. Les formats audios.

Les formats audios les plus populaires sont les suivants :

• MP3 - Le format audio le plus populaire qui utilise une compression avec perte et vous permet de
réduire la taille du fichier plusieurs fois. Malgré leur popularité parmi les utilisateurs, les chaînes de
télévision et les stations de radio utilisent des codecs ISO-MPEG plus modernes, tels que AAC ou
MPEG-H.
• AAC (Advanced Audio Codec) — codec fermé, analogue au format MP3, mais comparé à ce dernier,
AAC offre une qualité sonore supérieure avec un taux de compression identique ou supérieur.
• Ogg Vorbis — format libre open source pris en charge par Firefox, Opera et Chrome. Offre une bonne
qualité sonore mais n’est pas largement prise en charge par les lecteurs matériels.

Par Dr NKONJOH 13
 • WAV (format non compressé) : évitez autant que possible de l'utiliser car le fichier est très volumineux
avec ce format. C'est un peu l'équivalent du Bitmap (BMP) pour l'audio.

3.2.2. Insertion d’un audio

Pour ajouter des fichiers audios à une page Web, utilisez l'élément <audio>. Le chemin d'accès au fichier
audio est indiqué par l'attribut src, et l’attribut controls ajoute un panneau de configuration (bouton de
démarrage, défilement, contrôle du volume).
Exp. <audio src="name.mp3" controls></audio>

Étant donné que tous les navigateurs ne prennent pas en charge tous les formats audios, le fichier
audio est codé à l'aide de codecs spéciaux (programmes de conversion de données numériques au format d'un
fichier audio ou d'un flux audio) et ajoute des fichiers simultanément via la balise <source> avec l'attribut
src.
Exp. <audio controls>
<source src="/audios/jingle_bells.ogg">
<source src="/audios/audio.mp3" >
</audio>

3.3. La vidéo en HTML5

Avant la norme HTML5, des plug-ins tiers, tels que QuickTime, RealPlayer ou Flash, étaient utilisés pour
ajouter de la vidéo au site. En HTML5, une nouvelle balise <video> a été ajoutée. Elle permet d'insérer des
insertions vidéo dans une page Web.
3.3.1. Les formats de vidéo
Il existe actuellement 3 formats vidéo principaux : MP4 / MPEG-4, OGG et WebM +. Les codecs sont
utilisés pour compresser les données vidéo et les restaurer.

Pour le fichier vidéo MPEG-4, le codec vidéo H.264 et le codec audio AAC sont utilisés. Pour utiliser les
codecs, vous devez obtenir une licence. Pour le fichier vidéo Ogg, le codec vidéo Theora et le codec audio
open source Vorbis sont utilisés. Pour les fichiers vidéo WebM +, le codec vidéo VP8 et le codec audio Vorbis
sont utilisés. Aucune licence n'est requise pour les utiliser.

NB
La balise <video> n'est pas prise en charge par tous les navigateurs. Pour lire la vidéo dans Internet
Explorer (9+) et Safari, les plug-ins installés sont respectivement Microsoft Media Player et Apple
QuickTime.

3.3.2. Insertion d’une vidéo

La balise <video/> permet d'insérer des vidéos dans une page Web. L'attribut src indique l’URL du fichier et

Par Dr NKONJOH 14
l'attribut controls est utilisé pour afficher les contrôles.
Exp. <video src="example.webm." controls></video>

Chaque navigateur prend en charge un codec spécifique. Par conséquent, pour assurer la lecture vidéo
dans tous les navigateurs, le fichier vidéo doit être placé dans plusieurs formats. Comme dans le cas des
fichiers audio, les formats de fichier vidéo sont contenus dans les formats d'élément <source>, en commençant
par le plus préféré.
Exp. <video controls>
<source src=”/videos/network.ogv" />
<source src="videos/network.mp4"/>
</video>

3.3.3. Quelques attributs de la balise <video>

Quelques attributs de cette balise sont (la plupart sont les mêmes que pour la balise <audio>) :
• poster : image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée. Par défaut, le navigateur
prend la première image de la vidéo mais, comme il s'agit souvent d'une image noire ou d'une image
peu représentative de la vidéo, je vous conseille d'en créer une ! Vous pouvez tout simplement faire
une capture d'écran d'un moment de la vidéo.
• controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement. Cela peut sembler
indispensable, mais certains sites web préfèrent créer eux-mêmes leurs propres boutons et commander
la lecture avec du JavaScript. En ce qui nous concerne, ce sera largement suffisant !
• width : pour modifier la largeur de la vidéo.
• height : pour modifier la hauteur de la vidéo.
• loop : la vidéo sera jouée en boucle.
• autoplay : la vidéo sera jouée dès le chargement de la page. Là encore, évitez d'en abuser, c'est en
général irritant d'arriver sur un site qui lance quelque chose tout seul !
• preload : indique si la vidéo peut être préchargée dès le chargement de la page ou non. Cet attribut
peut prendre les valeurs :
▪ auto (par défaut) : le navigateur décide s'il doit précharger toute la vidéo, uniquement les
métadonnées ou rien du tout.
▪ metadata : charge uniquement les métadonnées (durée, dimensions, etc.).

Par Dr NKONJOH 15
 ▪ none : pas de préchargement. Utile si vous souhaitez éviter le gaspillage de bande passante sur
votre site.

Exemple Résultat
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h1>insertion d'une video</h1>
<video controls autoplay loop
poster="./../etoile.png"
width="200" height="180px">
<source src="./../kery.mp4"/>
</video>
</body>
</html>

4. Les formulaires en HTML

Un formulaire fournit un espace sur la page HTML où l'utilisateur peut entrer des données ; données qui
pourront être envoyées au serveur pour être éventuellement traitées. Un formulaire est composé d'un ou
plusieurs éléments d'entrée englobés par la balise <form>. Le HTML met à notre disposition une série
d’éléments qui vont nous permettre de créer nos formulaires. Ces différents éléments vont nous permettre de
définir le formulaire en soi, de créer des zones de saisie de texte courtes ou longues, de proposer des zones
d’options à nos utilisateurs, etc. Les formulaires vont être l’occasion pour nous de découvrir de nombreux
éléments. Voici la liste des éléments que nous allons étudier dans cette partie :
Elément Définition

Form Définit un formulaire

Input Définit un champ de données pour l’utilisateur

Label Définit une légende pour un élément input

Textarea Définit un champ de texte long

Select Définit une liste de choix

Optgroup Définit un groupe d’options dans une liste

Option Définit une option dans une liste

Par Dr NKONJOH 16
 Fieldset Permet de regrouper les éléments d’un formulaire en différentes parties

Legend Ajoute une légende à un élément fieldset

Pour définir un formulaire en HTML, nous allons utiliser l’élément form qui signifie « formulaire »
en anglais. Cet élément form va avoir besoin de deux attributs pour fonctionner normalement : les attributs
method et action.

L’attribut method va indiquer comment doivent être envoyées les données saisies par l’utilisateur.
Cet attribut peut prendre deux valeurs : get et post. Ces deux valeurs vont correspondre aux deux choix que
nous avons : soit faire transiter les données par l’URL afin de pouvoir ensuite les traiter, soit les envoyer par
HTTP post transaction. Concrètement, si l’on choisit l’envoi via l’URL (avec la valeur get), nous serons
limités dans la quantité de données pouvant être envoyées et surtout les données vont être envoyées en clair.
Evitez donc absolument d’utiliser cette méthode si vous demandez des mots de passe ou toute information
sensible dans votre formulaire.

En choisissant l’envoi de données via post transaction HTTP (avec la valeur post), nous ne sommes
plus limités dans la quantité de données pouvant être envoyées et les données ne sont visibles par personne.
C’est donc généralement la méthode que nous utiliserons.

L’attribut action va lui nous servir à préciser l’adresse relative de la page dans laquelle les données doivent
être traitées. Ce sera généralement un fichier PHP. Nous n’allons pas créer ce fichier dans ce cours, mais je
vous propose pour les exemples suivants de faire comme si ce fichier existait et de l’appeler « traitement.php
».

Voici donc le squelette d’un formulaire HTML :

L’élément input est l’élément le plus utilisé dans les formulaires HTML. Il va nous permettre de créer la
majorité des champs de notre formulaire.
L’élément input se présente sous la forme d’une balise orpheline et possède un attribut type auquel on va
pouvoir donner de nombreuses valeurs telles que : text, password, email, number, search, radio, checkbox, …

En changeant la valeur de l’attribut type, nous allons changer le type de données qui vont pouvoir être
envoyées via notre élément input et allons ainsi par exemple pouvoir créer un champ de saisie de texte mono-
ligne, un champ contenant des zones d’options ou encore le bouton permettant l’envoi des données du

Par Dr NKONJOH 17
formulaire rentrées par l’utilisateur.
L’élément textarea va nous permettre de créer un champ de texte multi-lignes, pouvant accueillir par
exemple un commentaire ou une présentation d’un utilisateur. Cet élément est également communément
utilisé au sein des formulaires HTML.
Finalement, nous allons utiliser l’élément label pour décrire à l’utilisateur ce qu’il doit rentrer dans chaque
champ du formulaire. Nous allons lier un label à un élément de formulaire grâce aux attributs for (pour le
label) et id (pour l’élément de formulaire).

Il faudra donner strictement la même valeur aux attributs for et id afin de « lier » entre eux un label et un
élément de formulaire. Vous pouvez donner la valeur que vous voulez, mais essayez de rester cohérent et
logique dans la mesure du possible.
Nous allons également devoir préciser un attribut name pour chaque élément de notre formulaire demandant
des informations à un utilisateur.
Cet attribut name va nous permettre, par la suite, de reconnaître le contexte de chaque donnée envoyée par
l’utilisateur afin de pouvoir les traiter efficacement.
En effet, sans attribut name, nous recevrions des données mais ne saurions pas quoi en faire, ne sachant pas à
quel champ elles appartiennent.
Cet attribut est donc indispensable. Vous pouvez une nouvelle fois lui attribuer la valeur souhaitée. Seule
restriction : cette valeur doit être unique afin de bien pouvoir identifier chaque champ.
Nous allons créer notre premier formulaire en HTML. Dans ce formulaire, nous allons demander :
• Un pseudonyme à l’utilisateur, avec un input de type « text » ;

• Une présentation, avec un élément textarea.

Nous penserons également à créer un label pour chaque information demandée ainsi qu’un bouton d’envoi
des données du formulaire.
Voici comment on va procéder :

Analysons et décortiquons le code ci-dessus. Tout d’abord, on définit un élément form avec ses deux attributs
method et action.

Comme méthode d’envoi de données, nous choisissons « post » et nous précisons la page de traitement en

Par Dr NKONJOH 18
valeur de l’attribut action. Evidemment, nous ne savons pas pour le moment créer la page « traitement.php
», n’essayez donc pas d’appuyer sur le bouton d’envoi du formulaire, vous aurez une erreur.
A l’intérieur du formulaire, on utilise un premier élément input type="text" pour créer le champ de
soumission du pseudo. On pense bien à préciser un attribut name pour cet élément avec une valeur unique
par rapport aux autres name des autres éléments.

Ensuite, on crée un premier élément label pour indiquer à l’utilisateur ce qu’il doit remplir dans le champ.
Une nouvelle fois, on pense à lier notre label à notre input en utilisant deux attributs for et id et en leur
donnant la même valeur.
Pour le champ de présentation, on utilise un élément textarea qui nous permet de gérer des textes longs.
Là encore, nous devons préciser un attribut name car le champ va recevoir des données de l’utilisateur et nous
créons également un label allant avec notre texarea.

Finalement, nous devons créer le bouton d’envoi de notre formulaire. Pour cela, on utilise input
type="submit". On n’utilise pas d’attribut name ici car il n’y a aucune entrée de données par l’utilisateur
(ce n’est pas un champ mais un bouton).
Nous n’avons pas besoin non plus de label pour notre bouton d’envoi : nous préférerons indiquer un attribut
value et préciser une valeur qui s’affichera dans le bouton même.

Voilà, nous venons de créer notre premier formulaire ensemble.

Par Dr NKONJOH 19
« Ce n'est pas le puit qui est trop profond, mais c'est la corde qui est trop courte. » Proverbe chinois

Séquence 2 : Mise en forme d’un site web : feuille

de style (CSS)

Objectif
À l’issue de cette séquence, les connaissances et savoir-faire acquis par l’élève professeur
lui permettront de :

1. Maitriser les notions de bases sur la mise en forme d’un site web
2. Savoir utiliser les propriétés CSS
3. Integer une bibliothèque de mise en forme dans un site web

Introduction :
Si vous réalisez des pages Web de manière « traditionnelle », les indications graphiques sont insérées
directement dans le code HTML de votre page. Ainsi à chaque fois que vous voulez mettre un texte en rouge,
vous écrivez <font color="red">. Pour afficher un tableau avec des bordures épaisses, vous écrivez <table
border="2">.

Les feuilles de style permettent de centraliser et de gérer de manière beaucoup plus aisée les indications
graphiques que l’on insérait traditionnellement dans le HTML. Elles s’écrivent dans un langage spécifique :
le CSS.

Afin de traite séparément le contenu de sa mise en page et son habillage graphique : les squelettes trient et
affichent les contenus souhaités en pages HTML, dont l’habillage graphique est réalisé par des feuilles de
style CSS.

Par Dr NKONJOH 20
« Ce n'est pas le puit qui est trop profond, mais c'est la corde qui est trop courte. » Proverbe chinois
1. Généralités sur le CSS
1.1. Introduction

Le CSS a été créé en 1996, soit 5 ans après le HTML. Les sigles « CSS » sont l’abréviation de «
Cascading StyleSheets » ou « feuilles de styles en cascade » en français. Le CSS vient résoudre un
problème bien différent du HTML : en effet, le HTML sert à définir les différents éléments d’une page, à
leur donner du sens. Le CSS, lui, va servir à mettre en forme les différents contenus définis par le HTML
en leur appliquant des styles.

Le HTML va donc créer la structure des pages tandis que le CSS va nous permettre de modifier
l’apparence des contenus de la page. On va ainsi par exemple pouvoir définir la taille, la couleur ou
l’alignement de certains contenus HTML et notamment en l’occurrence de certains textes dans notre page.

L’un des objectifs majeurs des feuilles CSS est de séparer la structure d’un document de ses styles
de présentation. Comme avantages, nous avons :

• Améliore la lisibilité du code html : Le code HTML est considérablement réduit en taille et en
complexité, puisqu’il ne contient plus de balises ;
• Uniformise la présentation : Dans le cas d’un site web, la présentation est uniformisée. Les
documents (pages HTML) font référence aux mêmes feuilles de styles. Cette caractéristique
permet de plus une remise en forme rapide de l’aspect visuel ;
• Facile à mettre en œuvre : Il est moins complexe donc l'effort est considérablement réduit. Il
aide à former des changements spontanés et cohérents ;
• Facilite la maintenance d’un site web : La feuille en cascade simplifie non seulement le
développement du site Web, mais simplifie également la maintenance, car le changement d'une
ligne de code affecte l'ensemble du site Web et le temps de maintenance ;
• Augmente la vitesse de chargement d’une page :

Malgré ces avantages, le principal inconvénient des feuilles de style CSS est son Incompatibilité avec
des navigateurs. En effet, avec CSS, ce qui fonctionne avec un navigateur peut ne pas toujours fonctionner
avec un autre. Les développeurs Web doivent tester la compatibilité, en exécutant le programme sur
plusieurs navigateurs.

1.2. Syntaxe de CSS

La mise en forme d’une page web à l’aide du CSS se fait à l’aide de « règles ». Un jeu de règles
(qualifie aussi de "règles") se compose d’un sélecteur suivi par un bloc de déclaration délimité par des
accolades ({ }). Une déclaration est constituée d’une propriété, suivie du caractère deux-points (:) puis

Par Dr NKONJOH 21
« Ce n'est pas le puit qui est trop profond, mais c'est la corde qui est trop courte. » Proverbe chinois
d’une valeur. Les multiples déclarations qui se rapportent à un même sélecteur sont séparées par des
points-virgules.

Les caractéristiques de style sont exprimées sous forme de couples propriété : valeur. Les propriétés
sont libellées à l’aide de mots-outils anglais tels que « width » (largeur), « font-size » (taille de la police
de caractères).

Les commentaires commencent par les caractères "/*" et se terminent par "*/".

Les CSS ne sont pas sensibles à la casse mais par convention, on met tout en minuscules. Le W3C
recommande en outre d'écrire les codes hexadécimaux en minuscules également.

Le CSS s’insère dans le code HTML de 3 manières distinctes :

✓ Dans une balise HTML (méthode déconseillée) : ici le style ne s’applique qu’a une seule balise

✓ Dans l’entête du document HTML : la porté ici est étendue à la page entière.

✓ Dans un fichier externe relié au document (méthode vivement conseillée). La liaison est effectuée
à l’aide de la balise <link> que l’on place obligatoirement dans l’entête du document.

Il est à noter que le fichier de style externe doit avoir l’extension .css et ne doit contenir aucune balise
HTML.

Par Dr NKONJOH 22
« Ce n'est pas le puit qui est trop profond, mais c'est la corde qui est trop courte. » Proverbe chinois
2. Généalogie et différents types de sélecteurs
2.1. Hiérarchie et généalogie
Dans un document HTML, des balises peuvent en contenir d’autres. En fonction de leur profondeur, on
parle d’enfant ou de descendants.
Considérons la portion de code HTML ci-contre ainsi que son arbre correspondant.

• h1, p, h2, p sont enfants de div ;

• a , strong et em sont enfant du p dans lequel ils sont contenus (mais pas de l’autre p) ;
• a, strong et em (et h1, p, h2 et p) sont descendants de div ;
• div est parent de h1 p, h2, p
• Le 2ème p est parent de a,strong et em ;
• div est ancêtre de a, strong et em (et de h1, p h2 et p) ;
2.2. Les différents sélecteurs en CSS

Un sélecteur est un motif de reconnaissance permettant d’appliquer un style aux éléments de l’arbre
du document HTML. Cette section présente quelques sélecteurs couramment utilisé en CSS.

▪ Sélecteur universel (*) : il agit sur toutes les balises d’une page HTML.
▪ Sélecteur usuel d’éléments HTML : les sélecteurs de type agissent sur un type d’élément
HTML. p{ color: red;}. Il est possible de sélectionner plusieurs éléments avant de leurs

appliqué un style. p, h1, ol{ color: #0000ff; }

Sélecteurs de classe et d’ID : Ce sont tous les deux des sélecteurs qui permettent d'appliquer des règles à
un élément. "id" définit un élément de manière unique, alors que "class" peut être utilisé plusieurs fois dans
la page. Nous allons donc privilégier "id" pour les boîtes à positionner, car deux éléments ne devraient
logiquement pas avoir la même position dans l'interface. De plus on peut ainsi donner des paramètres propres
à chaque élément (typo, taille, couleur, positionnement, arrière-plan, bordure ...) avec un seul id. Il est possible
de cumuler id et class. Alors l'id est plus fort que la classe en cas de conflit. De plus JavaScript peut manipuler
les balises avec un id. Rappelons pour terminer qu'au sein de la CSS, les id sont définis avec le signe dièse
(#nom) et les class avec un point (.nom).

Par Dr NKONJOH 23
« Ce n'est pas le puit qui est trop profond, mais c'est la corde qui est trop courte. » Proverbe chinois

Le tableau suivant résume l’ensemble des sélecteurs utilisés en CSS3.

Cascade, conflits et héritages

Les ID l'emportent sur les "class". Les "class" l'emportent sur les sélecteurs contextuels, pseudo-class et
pseudo éléments. La feuille interne l'emporte sur la feuille externe si elle est placée après dans l'ordre du code.
C'est toujours le dernier appelé qui l'emporte.

Par Dr NKONJOH 24
« Ce n'est pas le puit qui est trop profond, mais c'est la corde qui est trop courte. » Proverbe chinois
Notion d’héritage : Les éléments enfants héritent de certaines valeurs de leurs éléments parents dans l’arbre
du document. Chacune des propriétés définit si elle est héritée, ou non. Par exemple ici, tous les descendants
de l’élément BODY auront la valeur de couleur ’black’, la propriété ’color’ étant héritée :

BODY { color: black; }

3. Gestion des unités de mesures et des flux et des couleurs en CSS
3.1. Les unités de mesure en CSS
Les CSS proposent 8 unités possibles pour exprimer tailles et longueurs (sans compter les pourcentages).
Le W3C les répartit en unités absolues et unités relatives :

• Les unités absolues : Le W3C précise que ces unités ne sont utiles que si les propriétés physiques du
média de sortie sont connues et ce n’est jamais le cas pour les écrans. En pratique, ces unités ne sont
utilisées que pour une impression sur papier. Il s’agit du :
▪ cm (centimètre = 1cm = 10 mm) Risque d'affichage différent sur plusieurs écrans ;
▪ mm (millimètre) Même remarque ;
▪ pc (pica = 1pc = 12pt) Un autre terme de typographie, donc même remarque ;
▪ pt (point = 1pt = 1/72 in) Le point est une mesure typographique utilisée par les imprimeurs (d'où
les "points par pouce" de certaines résolutions) et les traitements de texte.
• Les unités relatives : Le W3C parle d’unité « relative » pour dire que le résultat physique dépend du
contexte.
▪ px (pixel)
▪ em (largeur de la letttre m, 1 em correspond à 100% de la taille en cours de la police, 1.2 em à
120 %, 0.8 em à 80%… Son usage est donc limité aux polices ;
▪ ex(hauteur de la lettre x. Assez pauvrement implémentée, donc à éviter.) ;
▪ % L'élément défini prendra un pourcentage donné de la taille de son élément parent.

Il est conseillé de se cantonner aux unités % et em pour un affichage fluide ou pour du texte, et à px quand on a besoin
de placer les éléments au pixel près… Les autres valeurs seront le plus souvent évitées.

Il convient d’ajouter que le W3C définit aussi des tailles absolues à l’aide des mots-clés suivants : xx-
small (6,9 pt), x-small (8,3 pt), small (10 pt), medium (12 pt), large (14,4pt), x-large (17,28 pt) et xx-large
(20,7 pt). Malheureusement, leur interprétation étant laissée aux soins du navigateur, on obtient des rendus
différents en utilisant ce type de tailles.

3.2. Les flux en CSS

Le flux normal (ou courant) d’un document peut se définir comme étant le comportement naturel
d’affichage des éléments d’une page web. Autrement dit, les éléments s’affichent dans l’ordre où ils sont

Par Dr NKONJOH 25
« Ce n'est pas le puit qui est trop profond, mais c'est la corde qui est trop courte. » Proverbe chinois
déclarés dans le code HTML : verticalement, commençant en « haut » de l’écran pour aller jusqu’en «bas »,
et horizontalement de gauche à droite, sur la totalité de l’espace disponible et nécessaire en largeur comme en
hauteur.

On distinguera deux groupes d’éléments :

▪ Les éléments de type block (div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dd, table, blockquote, pre,
address, etc.)
▪ Les éléments de type inline (span, a, img, span, em, strong, cite, code, abbr, etc.)

Un élément de type bloc (block) se différencie d’un élément de type en-ligne (inline) sur les principaux points
suivants :

• Il occupe la totalité de la largeur de son conteneur ;

• Il permet l’attribution de marges verticales ;
• Il permet la modification de sa hauteur et largeur.

Sauf exceptions, les éléments de type en-ligne n’occupent que la place minimum nécessaire à leur contenu.

De manière générale, les éléments de type bloc peuvent contenir des éléments en-ligne et d'autres éléments de type
bloc. Et, les éléments en-ligne ne peuvent contenir que des données et d'autres éléments en-ligne.

3.3. Gestion des couleurs en CSS ;

La couleur en CSS est une propriété utilisable sur : color, background, border, … es navigateurs admettent 3
méthodes possibles pour la déclaration d'une couleur :

Méthode Exemple Notes

Couleurs background-color: grey La couleur est désignée par son nom. Il n'y a que 16
nommées noms de couleurs normalisés par le W3C, mais tous les
navigateurs actuels reconnaissent les couleurs définies
par la norme X11.
Couleurs en background-color: #808080 La couleur est désignée par son code hexadécimal (un
hexadecimal dièse suivi de 6 digits). Les deux premiers digits
représentent la valeur de rouge, les deux suivants le vert
et les deux derniers le bleu. En mélangeant dans des
proportions différentes ces trois couleurs de base, on
peut obtenir toutes les couleurs.
Couleurs background-color: RGB( La couleur est définie par trois nombres décimaux de 0
décomposées 128,128,128 ) à 255 indiquant respectivement le taux de rouge, le taux
de vert et le taux de bleu. En mélangeant dans des
proportions différentes ces trois couleurs de base, on
peut obtenir toutes les couleurs.

La norme X11 fut définie pour la gestion des terminaux à l'époque des mini-ordinateurs. Elle comporte
un nombre relativement étendu de couleurs qui sont reconnues par les principaux navigateurs actuels.

Par Dr NKONJOH 26
« Ce n'est pas le puit qui est trop profond, mais c'est la corde qui est trop courte. » Proverbe chinois
4. Fond, dégradés et ombres CSS

Fond : L’ajout d’une couleur de fond va être possible avec la propriété background-color ou avec la notation
background. Cette propriété va accepter les mêmes notations de couleurs que la propriété color c’est-à-dire
toutes les formes de notations de couleurs en CSS. On va ainsi pouvoir lui passer un nom de couleur de anglais,
une valeur hexadécimale ou une valeur RGB (ou RGBa) ;

Il est possible de rendre une couleur de fond transparente à l’aide de la propriété opacity ou en utilisant
la notation rgba.

Dégradé : En CSS, un dégradé est considéré comme une image qui va progressivement passer d’une couleur
de base à une couleur d’arrivée. Ainsi, nous allons pouvoir créer et utiliser les dégradés en CSS avec toutes
les propriétés qui acceptent des images et notamment créer des dégradés en fond de nos éléments en utilisant
la propriété background.
Il existe deux types de dégradés en CSS :
• Les dégradés linéaires ou linear-gradient en anglais dont le principe va être de passer progressivement
d’une couleur à une autre de manière linéaire c’est-à-dire selon un axe donné ;
• Les dégradés radiaux ou radial-gradient en anglais pour lesquels le passage d’une couleur à une autre
va se faire dans toutes les directions à partir d’un point central.

Par Dr NKONJOH 27
« Ce n'est pas le puit qui est trop profond, mais c'est la corde qui est trop courte. » Proverbe chinois
Ombre : La propriété CSS box-shadow va nous permettre de créer des ombres dites « portées » autour de nos
éléments (ou plus exactement des boîtes qui représentent les éléments). Il convient de ne pas confondre box-
shadow et text-shadow même si ces deux propriétés vont s’utiliser de façon similaire : la propriété text-shadow
va nous permettre de créer des ombres derrière des textes tandis que box-shadow sert à créer des ombres
autour de la boite de l’élément. Exemple :
box-shadow:0px 0px 5px 2px #000 inset;

La dernière valeur inset n’est pas obligatoire. En fait, seules les deux premières valeurs et la couleur
sont obligatoires. Sans le mot inset, l’ombre est à l’extérieur du bloc. Avec inset elle est à l’intérieur du bloc.
Il est possible de créer plusieurs ombres, une extérieure et une intérieure, en les séparant d’une virgule :

5. Modèles de boites en CSS

L’idée centrale du modèle des boites est que tout élément HTML peut être représenté par un
empilement de différentes boites rectangulaires. Chaque boîte possède une aire de contenu (un texte, une
image, etc.) entourée en option par une aire d’espacement (padding), une aire de bordure (border) et une aire
de marge (margin).

On peut travailler individuellement sur les propriétés margin, padding et border à l'aide des suffixes-top (haut), -
right (droite), -bottom (bas), -left (gauche)

La marge externe est à l'extérieur de la boîte, mais pousse donc les éléments qui seraient adjacents.

Les principales propriétés CSS à prendre en compte sont :

▪ La largeur : ’width’ ▪ La taille des caractères : ’font-size’

▪ La hauteur : ’height’ ▪ L’interlignage : ’line-height’
▪ Les marges : ’margin’ ▪ L’interlettrage :’letter-spacing’
▪ L’espacement : ’padding’ ▪ L’espace-mot : ’word-spacing
▪ les bordures : ’border’

Par Dr NKONJOH 28
« Ce n'est pas le puit qui est trop profond, mais c'est la corde qui est trop courte. » Proverbe chinois
6. Le Responsive Web Design

Le Responsive Web Design est un concept regroupant plusieurs techniques de développement web. Cela
permet qu'un même site web s'affiche harmonieusement sur tout type d'appareil. Le style de la page s'adapte
à la largeur de l'écran, change la taille de la police, supprime des contenus devenus inutiles, etc. Le tout de
manière dynamique.

Une des techniques du RWD est l'utilisation des media queries. Ce sont des règles CSS qui s'activent
en fonction de la gamme d'appareil utilisée ou en fonction de la largeur de la fenêtre du navigateur. Par
exemple, comment rétrécir de moitié la taille de tous les paragraphes de la page lorsque celle-ci est affichée
dans une fenêtre dont la largeur est inférieure à 800 pixels.

Les media queries correspondent à une technique introduite en CSS3 et qui va se servir de la règle CSS
@media. Grâce aux media queries, nous allons pouvoir appliquer différentes propriétés ou différentes valeurs
à des éléments HTML selon la taille de l’écran et le type de media utilisé (écran, imprimante, etc.) par vos
visiteurs. Cela va nous permettre par exemple de ne pas afficher certains éléments pour des tailles d’écran trop
petites ou de réorganiser nos pages web grâce aux propriétés CSS.

Par Dr NKONJOH 29
« Ce n'est pas le puit qui est trop profond, mais c'est la corde qui est trop courte. » Proverbe chinois

Séquence 3 : Introduction au langage de

programmation Javascript

Objectif
À l’issue de cette séquence, les connaissances et savoir-faire acquis par l’élève professeur
lui permettront de :

1. Maitriser les notions de bases du langage Javascript

2. Intégrer dynamiquement des portions de code HTML dans une page web
3. Integer une bibliothèque javascript tel que JQuery

Introduction
JavaScript est un langage de programmation de scripts orienté-objet qui s’exécutent côté client. Cela
signifie que le programme javascript est interprété et exécuté grâce au navigateur web de la machine du
programmeur (machine cliente). Le javascript est un langage de scripts qui peut être inclus dans des pages
HTML pour les rendre dynamique. Le logiciel pour interpréter et afficher le résultat d’un programme écrit
en est appelé le navigateur web. Grâce à ce langage, il est possible d’écrire des pages web interactives.

Il a été mis au point par Netscape en 1995 pour enrichir ou apporter des améliorations au html et
donner plus d’interactivité tels que la création des boutons, l’affichage des boîtes de dialogue, la
récupération des informations du formulaire, la réalisation des opérations, la gestion des évènements tels
que le clic ou le déplacement de la souris, etc. Ce langage permet d'exécuter des commandes du côté client.
Le JavaScript est un langage interprété (besoin du navigateur pour interpréter le code).

L’avantage principal du javascript est qu’il permet de rendre les pages web interactives ou
dynamiques. En effet, le javascript est important car il permet :

• La vérification des champs du formulaire ;

Par Dr NKONJOH 30
« Ce n'est pas le puit qui est trop profond, mais c'est la corde qui est trop courte. » Proverbe chinois
• L’affichage des messages d’alerte ;
• La gestion des évènements tels que le click ou le déplacement de la souris ;
• La récupération des valeurs entrées par l’utilisateur pour exécuter des commandes ;
• Réaliser des opérations ;
• Les fonctions javascripts s’exécutent directement grâce au navigateur présent sur votre
machine. Etc.

Par ailleurs, le javascript contient aussi des limites.

▪ Javascript n’est pas compatible à tous les navigateurs web ;

▪ Le code javascript n’est sécurisé. Il est visible par tout le monde ;
▪ Javascript ne permet d’écrire ou de lire sur le disque dur ;
▪ Les erreurs en javascript sont difficiles à détecter à cause de l’absence d’un débuggeur ;
▪ Javascript ne permet pas de faire des bases de données ;
▪ Javascript ne permet pas de réaliser des forums de discussion.

Il ne faut pas confondre Javascript et Java. En effet, le tableau ci-après présente quelques différences
entre ces deux langages.

Javascript Java

Langage interprété Langage pseudo-compilé

S’intègre toujours au code html Ne s’intègre pas toujours dans le code html

Accessibilité du code Confidentialité du code

Langage peu évolué et peu typé Langage très évolué et fortement typé

Contrairement à HTML c’est un langage sensible à la CASSE c'est-à-dire qu’il fait une différence entre les variables
contenant des majuscules ou pas.

Prérequis :
1. Pour écrire des scripts javascript il faut avoir une bonne connaissance du langage HTML ;
2. JavaScript est un langage de programmation, l’écriture d’un code JavaScript doit respecter les
normes de programmation départementale.

Par Dr NKONJOH 31
 1. Insertion d’un Script JavaScript dans une page HTML.
Il existe plusieurs façons d’incorporer un Script Javascript dans une page HTML. Toute fois, peu
importe la manière ou l’endroit où vous allez l’intégrer il faut préciser au navigateur qu’un script

eb
JavaScript va être exécuté en plaçant le code JavaScript entre les balises <script> et </script>
comme suit:

nW
a tio
mm
ra
og
Pr

Par Dr NKONJOH 32
 eb
nW
a tio
mm
ra
og
Pr

Par Dr NKONJOH 33
 eb
nW
a tio
mm
ra
og
Pr

Par Dr NKONJOH 34
 eb
nW
a tio
mm
ra
og
Pr

Par Dr NKONJOH 35
 eb
nW
a tio
mm
ra
og
Pr

Par Dr NKONJOH 36
 eb
nW
a tio
mm
ra
og
Pr

Par Dr NKONJOH 37
 eb
nW
a tio
mm
ra
og
Pr

Par Dr NKONJOH 38
 eb
nW
a tio
mm
ra
og
Pr

Par Dr NKONJOH 39
 eb
nW
a tio
mm
ra
og
Pr

Par Dr NKONJOH 40
 eb
nW
a tio
mm
ra
og
Pr

Par Dr NKONJOH 41
 eb
nW
a tio
mm
ra
og
Pr

Par Dr NKONJOH 42
 eb
nW
a tio
mm
ra
og
Pr

Par Dr NKONJOH 43
 eb
nW
a tio
mm
ra
og
Pr

Par Dr NKONJOH 44
 eb
nW
a tio
mm
ra
og
Pr

Par Dr NKONJOH 45
 eb
nW
a tio
mm
ra
og
Pr

Par Dr NKONJOH 46
 eb
nW
a tio
mm
ra
og
Pr

Par Dr NKONJOH 47
 eb
nW
a tio
mm
ra
og
Pr

Par Dr NKONJOH 48
 eb
nW
a tio
mm
ra
og
Pr

Par Dr NKONJOH 49