Cours Web Complet

1
SOMMAIRE
2
Leçon 1
3
PLAN
4
Introduction
Apprenez à créer votre application web !
Comment fait-on une application web ?
C'est compliqué ? C'est long ? C'est pour les pros ?
Aujourd’hui n’importe qui est susceptible de créer une ou des pages web :
-logiciels de création,
-modèles de conception ,
-fournisseurs d’accès,
-Content Management System (CMS)
5
Introduction
Mais peu nombreux sont ceux capables de créer un véritable site web fonctionnel,
facile a maintenir et utilisant des technologies de pointe.
Aujourd’hui n’importe qui est susceptible de créer une ou des pages web :
-logiciels de création,
-modèles de conception ,
-fournisseurs d’accès,
-Content Management System (CMS)
6
Introduction
Les étapes de création d’une application web
 L’analyse des besoins ;
 Le choix de la solution technique ;

 Le développement de toutes les fonctionnalités techniques de
l’application ;
 Le respect des bonnes pratiques de codage ;
 Les tests et la validation des fonctionnalités développées.
De façon complémentaire, on peut citer :
 La formation du client lorsque l’application lui est livrée ;
 Le support technique tout au long de l’existence de l’application ;
 Les corrections des problèmes remontés par le client.
7
Qu’est ce que l’Internet?
• Ensemble des ordinateurs du monde entier reliés entre eux (réseau) pour échanger
des données
• Un ensemble de réseaux informatiques locaux utilisant les mêmes protocoles de

bas niveau standards (TCP/IP) et formant un réseau global.
• Les ordinateurs de l'Internet sont reliés par des câbles qui traversent les pays et
les océans ou par des satellites.
•La pile de protocoles Internet
Une pile de protocoles de communication, l’un au-dessus de l’autre
8
9
10
IP (Internet Protocol)
• Adressage de machines et routage sur Internet
• Deux versions du protocole IP utilisées sur Internet :
IPv4 (très répandu) et IPv6 (support encore un peu expérimental)
* IPv4 : Adresses de 4 octets affectées à chaque ordinateur, p. ex.,
137.194.2.24. Des gammes de telles adresses sont données aux
diverses institutions (fournisseurs d’accès à Internet, universités, etc.),
pour les affecter comme elles le souhaitent.
• Problème : seulement 2 puissance 32 adresses possibles (en fait, un grand
nombre d’entre elles ne peut pas être données à de nouveaux hôtes, pour
diverses raisons).
11
Cela signifie que beaucoup de machines connectées à Internet n’ont pas
d’adresse IPv4 et une forme de traduction d’adresse (network address
translation, NAT) est nécessaire.
* IPv6 : Adresses de 16 octets ; espace d’adressage beaucoup plus grand !

Les adresses ont la forme suivante : 2001:660:330f:2::18
(soit 2001:0660:0330f:0002:0000:0000:0000:0018).
Chacun des appareils connecté à l’Internet peut avoir sa propre adresse IP
12
Qu’est ce que le web ?
• WWW = World-Wide Web (Toile d'araignée mondiale) – Communément appelé le Web ou la
Toile
• Un système hypertexte public basé sur Internet
• Créé au CERN (L'Organisation européenne pour la recherche nucléaire, aussi appelée laboratoire
européen pour la physique des particules et couramment désignée sous l'acronyme CERN, est le plus
grand centre de physique des particules du monde ) par Tim Berners-Lee en 1989
• Idée initiale : créer un système hypertexte distribué sur le réseau informatique pour que les
collaborateurs puissent partager les informations au sein du CERN
• Le 30 avril 1993, le CERN verse dans le domaine public toutes les technologies développées
autour du WWW
• NCSA Mosaic : premier « navigateur »
•Comprendre le Web c'est comprendre ses standards

13
Le W3C est un organisme de normalisation fondé en octobre 1994 comme un consortium charge
de promouvoir la compatibilité des technologies du World Wide Web.
Le W3C n’émet pas des normes au sens européen, mais des recommandations a valeur de
standards industriels.
Du Web statique Vers le web dynamique

Au tout début du World Wide Web (1991), les pages étaient statiques : leur contenu était fixé
une fois pour toute et ne variait pas. On se contentait de diffuser de l’information mais c’était
une véritable révolution pour l’époque (hypertexte).
14
L’introduction des CGI (Common Gateway Interface) puis par la suite la généralisation des
scripts exécutables sur le serveur dans différents langages (Perl, PHP, Python,
Ruby) ont permis de faire varier le contenu des pages on parle désormais de Web dynamique.
Le contenu de la page varie en fonction de l’utilisateur, de ses préférences ou du sujet abordé.
15
Architecture client-serveur
Le client (navigateur : Internet Explorer, Firefox, Safari. . .)
• demande au serveur des informations
• affiche des pages pour l’utilisateur
Le serveur (Apache, Microsoft IIS. . .)
• reçoit en permanence les requêtes des clients
• renvoie les documents correspondants
16
On appelle logiciel serveur un programme qui offre un service sur le réseau. Le
serveur accepte des requêtes, les traite et renvoie le résultat au demandeur. Le
terme serveur s'applique à la machine sur lequel s'exécute le logiciel serveur.
On appelle logiciel client un programme qui utilise le service offert par un serveur.
Le client envoie une requête et reçoit la réponse. Le client peut-être raccordé par
une liaison temporaire.
17
On appelle architecture client/serveur la description du fonctionnement
coopératif entre le serveur et le client. Les services Internet sont conçus selon cette
architecture. Ainsi, chaque application est composée de logiciel serveur et logiciel
client. A un logiciel serveur, peut correspondre plusieurs logiciels clients développés
dans différents environnements: Unix, Mac, Etc. La seule obligation est le respect du
protocole entre les deux processus communicants.
18
Avantages de l'architecture client/serveur
Le modèle client-serveur est particulièrement recommandé pour des réseaux
nécessitant un grand niveau de fiabilité, ses principaux atouts sont :
des ressources centralisées : étant donné que le serveur est au centre du réseau,
il peut gérer des ressources communes à tous les utilisateurs ; par exemple une base
de données centralisée afin d'éviter les problèmes de redondance et de contradiction
19
 une meilleure sécurité : le nombre de points d'entrée permettant l'accès aux
données est moins important ;
 une administration au niveau serveur : les clients ayant peu d'importance dans
ce modèle, ils ont moins besoin d'être administrés ;
 un réseau évolutif : grâce à cette architecture il est possible de supprimer ou
rajouter des clients sans perturber le fonctionnement du réseau et sans
modification majeure.
20
Inconvénients du modèle client/serveur
L'architecture client/serveur a tout de même quelques lacunes parmi lesquelles :
un coût élevé dû à la technicité du serveur ;
un maillon faible : le serveur est le seul maillon faible du réseau client/serveur,
étant donné que tout le réseau est architecturé autour de lui.
Heureusement, le serveur a une grande tolérance aux pannes (notamment grâce

au système RAID)
21
Fonctionnement d'un système client/serveur
Le client émet une requête vers le serveur grâce à son adresse IP et le port qui
désigne un service particulier du serveur.
Le serveur reçoit la demande et répond à l'aide de l'adresse de la machine cliente

et son port.
22
Protocoles HTTP, HTTPS et FTP
HTTP
L'HyperText Transfer Protocol (HTTP) « protocole de transfert hypertexte » est un
protocole de communication client-serveur développé pour le World Wide Web.
Le but du HTTP est de permettre un transfert de fichiers (essentiellement au format
HTML) localisés grâce à une chaîne de caractères appelée URL entre un navigateur
(le client) et un serveur Web (appelé d'ailleurs httpd sur les machines UNIX).
Communication entre navigateur et serveur
La communication entre le navigateur et le serveur se fait en deux temps :

Le navigateur effectue une requête HTTP
Le serveur traite la requête puis envoie une réponse HTTP
23
24
Protocole HTTP, HTTPS et FTP
HTTPS : Hypertext Transport Protocol Secure
Protocole de communication utilisé pour l'accès à un serveur Web sécurisé.
Si l'on indique HTTPS dans l'URL au lieu de la mention HTTP normale, le message sera
adressé vers un port d'entrée sécurisé du serveur au lieu du port 80.
Le dialogue entre le navigateur Web et le serveur est géré avec des contraintes de
sécurité. En particulier, les échanges de données seront cryptés et l'internaute sera
généralement identifié.
25
FTP
Le protocole FTP (File Transfer Protocol) est un protocole de transfert de fichier.
Le protocole FTP définit la façon selon laquelle des données doivent être transférées
sur un réseau TCP/IP.
Il permet, depuis un ordinateur, de copier des fichiers vers un autre ordinateur du
réseau, ou encore de supprimer ou de modifier des fichiers sur cet ordinateur. Ce
mécanisme de copie est souvent utilisé pour alimenter un site web hébergé chez un
tiers.
Le protocole FTP a pour objectifs de :

permettre un partage de fichiers entre machines distantes ;
permettre une indépendance aux systèmes de fichiers des machines clientes et
serveur ;
permettre de transférer des données de manière efficace.
26
Procédure de mise en ligne d’une application web
Après réalisation d’une application web, il est important de la mettre en ligne pour
une utilisation.
Pour que l’application soit accessible sur le Web, vous devez choisir un hébergeur.
Le serveur Web peut fonctionner sous Linux, Windows, Etc.
Le nom de domaine doit être réservé chez l’hébergeur.
Transfert des fichiers avec le protocole FTP

Pour transférer vos fichiers de la machine locale vers un serveur, on utilise le client
FTP. Plusieurs logiciels clients FTP existent. Par exemple le client FTP FileZilla, est
gratuit et téléchargeable à l’adresse http://filezilla-project.org/.
27
FIN DE LA LECON
QUESTION
28
Exercice : Architecture du Web
1 - Quelle est la différence entre Web et Internet ?
Internet est le réseau informatique mondial, c'est l'infrastructure globale, basée sur le
protocole IP, et sur laquelle s'appuient de nombreux autres services dont le web. Le World
Wide Web, c'est le système qui nous permet de naviguer de pages en pages en cliquant sur des
liens grâce à un navigateur.
Le web n'est qu'un des services accessibles via Internet, et il y en a bien d'autre. Emails,
messagerie instantanée, etc. En tout cas, retenez ceci : Internet est le réseau. Le web est un
service.
29
2 - Quelle est la différence entre http et www
Le World Wide Web (WWW) désigne l’ensemble des pages HTML accessibles sur Internet et
consultables depuis les navigateurs Internet. Tandis que HTTP (Hyper Text Transfer Protocol)
désigne le protocole de transfert hypertexte, c'est-à-dire le moyen de communication entre le
navigateur et le World Wide Web (WWW)
30
3 - Quelle est la différence entre une adresse MAC et une adresse IP ? Pourquoi est -
ce que l’on n’utilise pas uniquement des adresses MAC pour identifier les machines
sur Internet ?
Une adresse MAC, c'est un numéro (alpha num) que vous trouvez sur chaque carte réseau et
qui est unique à votre carte aucune autre au monde n’est sensée porter le même numéro.
L'adresse IP est une adresse donnée dans un réseau qu'il soit privé ou le réseau internet.
Plusieurs personnes peuvent avoir la même IP si il sont sur des réseaux différents. Sur internet
ton IP est unique et est donnée par ton FAI (Fournisseur d’Accès Internet)
31
3 - Quelle est la différence entre une adresse MAC et une adresse IP ? Pourquoi est -
ce Une adresse IP est une adresse logique utilisée pour l' "Internet Protocol" de la pile TCP/IP.
Elle identifie un hôte sur un réseau.
Son attribution peut être statique ou dynamique, c-à-d qu'on l'attribue soit manuellement, soit
automatiquement via un serveur DHCP (Dynamic Host Control Protocol.)
Une adresse IP peut être privée ou publique suivant qu'elle est accessible uniquement sur un
réseau ou par toute machine connectée à internet.
Une adresse IP se présente sous la forme dite "dotted decimal" ; autrement-dit, il s'agit de
nombres du système décimal séparés par des points : 192.168.48.131
32
3 - Quelle est la différence entre une adresse MAC et une adresse IP ? Pourquoi est –
ce
L'adresse MAC (Media Access Control) est une adresse physique unique. Bien qu'elle soit
unique, elle peut être "copiée" à des fins nuisibles
Elle est divisée en 2 parties :
- OUI qui est l'identifiant du fabricant et qui se compose de 3 octets écrits sous forme
hexadécimale.
- NIC qui identifie la carte de manière individuelle et qui se compose également de 3 octets
écrits sous forme hexadécimale. Elle se présente sous la forme 2F-3C-04-AA-31-00
La portion 2F-3C-04 identifie le fabricant. La portion AA-31-00 identifie la carte comme un
33
numéro de série classique.
3 - Quelle est la différence entre une adresse MAC et une adresse IP ? Pourquoi est –
ce
Lors du parcours sur internet, les adresses IP de source et de destination ne changent pas, alors
que les adresses MAC vont changer à chaque machine traversée (routeur, serveur...)
C'est donc la preuve que l'adresse IP est une adresse logique et l'adresse MAC une adresse
physique.
Pour s'y retrouver, les machines doivent recalculer les adresses IP de manière logique.
Toutefois, elles remplacent au fur et à mesure les adresses MAC.
En comparaison, l'adresse IP serait le passeport, que les douaniers vérifient et estampillent.
L'adresse MAC serait l'ADN qui identifie à 99,9 % une personne par rapport à une autre.
34
4 - Quelle est la spécificité des noms de fichier index.html ou index.php par rapport à
d’autres noms de fichiers HTML ou PHP ?
5 - Quelle est la différence entre une requête HTTP POST et GET?
6 - Donner un exemple où utiliser une requête POST a un avantage par rapport à une
requête GET.
35
5 - Quelle est la différence entre une requête HTTP POST et GET?
GET demande une représentation de la ressource spécifiée. Notez que GET ne doit pas être
utilisé pour les opérations qui provoquent des effets secondaires, tels que l'utilisation pour
effectuer des actions dans des applications Web. Une raison à cela est que GET peut être utilisé
arbitrairement par des robots ou des robots d'exploration, ce qui ne devrait pas avoir à prendre
en compte les effets secondaires qu'une requête devrait provoquer.
POST soumet les données à traiter (par exemple, à partir d'un formulaire HTML) à la ressource
identifiée. Les données sont incluses dans le corps de la requête. Cela peut entraîner la création
d'une nouvelle ressource ou les mises à jour de ressources existantes ou les deux.
36
Leçon 2 et 3
37
HTML
Hyper Text Markup Language
langage descriptif composé de balises
interprété par le navigateur
Page HTML = simple fichier texte
Norme XHTML1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
38
HTML
Le Validator
Il faut respecter les règles de syntaxe !
page valide = même sens pour tous les navigateurs
Une page HTML valide est une page qui passe

le test du validator (http://validator.w3.org)
39
HTML
Les balises
balise = limite d'une boîte où l'on peut mettre des choses
<balise> chose </balise>
à chaque balise ouvrante <balise> ...
... on associe une balise fermante </balise>
Exemple : <b>toto</b>  toto en gras.
Balises sans contenu : <autrebalise />

Une balise ne délimitant rien se ferme elle même (exemple : <br/>)
40
HTML
Les balises
<balise attribut1="valeur" attribut2="valeur">...</balise>
Les commentaires
commentaire : 
41
HTML
la Structure d'une page HTML
Deux sections :
 head : Défnitions générales sur le document : Informations non affichées,
 body : corps du document.
 textes,
 tableaux,
 listes (à puce, numérotées),
 images. . .
42
HTML
la structure d'une page HTML
La section head (l’entête)
<head> ... </head>
informations qui ne seront pas affichées sur la page HMTL
titre de la page : <title>Formation web dynamique</title>
informations utilisées par les moteurs de recherche :
<meta name="description" content="Formation web dynamique" />
<head>
<title>Formation web dynamique</title>
<link rel="stylesheet" type="text/css" href="mon_css.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="keywords" content="html, head, IFRI, formation"/>
<meta name="author" content="IFRI"/>
<meta name="description" content="Petite description"/>
</head>
43
HTML
la structure d'une page HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

</head>
<body>

</body>
</html>
44
HTML
la Structure d'une page HTML
La section body (le corps)
<body> ... </body>

informations qui vont s'afficher dans le navigateur
45
HTML
Les textes
•Jeu de caractère par défaut : ASCII. Codage des accents par des séquences de caractères
(é <-> é)
•langage non wyswig -> (blanc : &nbsp ; retour à la ligne : <br/>)
<b> : gras ;
Modification de polices <i> : italique;
<u> : souligné;
<hx> avec x Є {1,……….6}
<h1> titre de niveau 1,
Titres, lignes
<h6> titre de niveau 6,
Lignes horizontales : <hr/ >
Balise <p> avec comme principal attribut
alignЄ {left; center; right}.
Paragraphes
Utilisez des pagraphes plutôt que des sauts de lignes
(<br= >).
46
HTML
Les textes
Divisions
Balise <div> permet de regrouper un ensemble de textes/balises. Permet d'affecter des
propriétés à un ensemble de balises :
<div align="right">
<p>un premier paragraphe</p>
<p> et un second</p>
<p>tous alignés à droite</p>
</div>
Tous alignés à droite : Concept d'héritage.
47
HTML
Les textes
Les listes
<ul> • Banane
listes non <li>Banane</li> • Orange
ordonnées <li>Orange</li>
</ul>
<ol> 1. Boni YAYI
<li>Boni YAYI</li> 2. Adrien HOUNGBEDJI
listes ordonnées
<li>Adrien HOUNGBEDJI</li>
</ol>
48
HTML
Les textes
Les tableaux
Trois balises :
table : délimite une table,
tr : délimite une ligne,
td : délimite une cellule.
Possibilités de cellules multi-lignes, multicolonnes, de sélection de fond de tables, de
lignes, de cellules. Tables de taille fixes/variables.
<table>
<tr> 1ère ligne, 1ère colonne 1ère ligne, 2ème colonne
<td>1ère ligne, 1ère colonne</td>
<td>1ère ligne, 2ème colonne</td>
</tr> 2ème ligne, 1ère colonne 2ème ligne, 2ème colonne
<tr>
<td>2ème ligne, 1ère colonne</td>
<td>2ème ligne, 2ème colonne</td>
</tr>
</table>
49
HTML
Les textes
Les liens
<a href="url"> lien</a> affiche lien et change l'url courante pour celle spécifiée lors d'un clic sur le texte.
L'url peut être un lien vers :
un autre site web: <a href="http://www.ifri-uac.net">Site web IFRI</a>

une autre page : <a href="scolarite.html">Page Scolarite sur le site IFRI</a>
une adresse mail : <a href="mailto :info@ifri-uac.net">Envoyer un mail</a>
La zone délimitée par <a></a> peut être du texte, une image. . .
<a href="http://www.ifri-uac.net"> <img src="logo.png" alt=“logo IFRI" /></a>
Les ancres
Permet de positionner une marque (une ancre) dans une page HTML. Des liens peuvent être
positionnés sur cette ancre.
50
HTML
Les textes
Syntaxe :
<a href="identifiant"/>
Liens sur l'ancre :
<a href="page.html#identifiant"> Lien </a>
Les images
Syntaxe : <img src="logo.jpg" width="2cm" height="3cm" align="left" hspace="5mm"
alt="Logo IFRI"/>
Possibilité de spécier la largeur (width), hauteur(height), l'alignement, l'espacement

(hspace, vspace), la bordure (border) et le texte avant chargement (alt)
51
HTML
Les formulaires
Permet à l'utilisateur de rentrer des informations par le biais de balises spécifiques.
<form>………….</form>
Trois attributs à retenir :
action : nom du programme ou de la page devant traiter les informations
method : méthode de passage des paramètres (GET ou POST)
enctype : codage du document.
Les balises input

type : type d'input
name : nom de variable
value : valeur par défaut
checked : sélection par défaut
<input type="type" name="nom">
size : nb de caractères
maxlength : nb max. de caractères
type Є {text, password, image, checkbox, radio, submit,
reset}
52
HTML
Les formulaires
La balise select
Code un menu à options :
Syntaxe :
<select name="un_menu">
<option> 1er choix.</option>
<option> 2eme choix.</option>
</select>
Attributs : name, size (nb d'éléments simultanément affichés), multiple (sélection de plusieurs
éléments).
La balise textarea
Saisie d'une zone de texte.
Syntaxe : <textarea name="saison" rows="10" cols="40"> Texte</textarea>

Attributs : name, rows (nb ligne), cols (nb colonnes) 53
HTML
Exercices
54
CSS
CSS : Cascading Style Sheets
Cascading Style Sheets : Permet de modifier l'apparence de balises.
Feuille de style : ensemble de règles spécifiant la mise en forme de certaines balises.
Structure d'une règle : Propriété Valeur
h1 { color : red ; }
Sélecteur Déclaration
Les sélecteurs
Spécifie la ou les balises qui vont utiliser les déclarations.
Sélecteur simple : nom de balise.
h1 {
color: red;
font-weight: bold;
text-align: center;
55
}
CSS
Les sélecteurs à évènements
Les déclarations s'appliquent sur un type de balise lors de certains évènements ou état.
Exemple :a :hover {color : red ; }

Principaux évènements :
:focus prise de focus par un texinput ou textarea
:hover passage de la souris sur un lien
:link lien pas encore visité
:visited lien cliqué
Les différents types de sélecteurs

simple : a{ },
à évènement : a:hover { },
contextuel : p a{ }, 56
CSS
57
CSS
Liaison HTML-CSS
 Les feuilles internes
<head>
<link rel="stylesheet" type="text/css" href="ma_feuille.css"/>
</head>
Ou
<head>
<style type="text/css">
@import url("feuille.css")
</style>
</head>
S'utilise en complément des feuilles externes.
58
CSS
Liaison HTML-CSS
 Les feuilles locales
<body>
<p style="text-align: justify; color: red;"> Mon paragraphe</p>
</body>
Permet de rajouter localement une déclaration.
Pour faire appel à une classe :

Pour appliquer la classe, il suffira ensuite d'ajouter l'attribut
Exemple class="nom" dans le code HTML.
p.texte{ exemple : <p class="texte">bla bla bla</p>
font-size: 12px; classe applicable à tout type de balise : .texte{...}
classe appliqué à toutes les balises d'un type : p { ... }
background-color: red;
}
59
60
Introduction générale
Le HTML 5 et le CSS 3 ==> Web 3.0 ?
Le W3C (World Wide Web Consortium) et le WHATWG (Web Hypertext
Application Technology Working Group) misent beaucoup sur la simplicité;
Deux fois plus de balises en HTML 5 qu’en HTML 4 ainsi que les avancées en
CSS3;
Supportés par tous les navigateurs majeurs actuels;
Nouveau type de formulaire : Webform 2.0
Le W3C tente de persévérer vers la voie du XML (création du XHTML)
Le WHATWG souhaite améliorer HTML et débute son travail en 2004 avec Ian
Hickson qui sera l’éditeur officiel du HTML 5
61
62
HTML 5
Les différentes version du HTML
 HTML 3.2. et 4.0 : 1997
 XHTML : 2000-2006
 2007 à nos jours : HTML5 et abandon du XHTML 2
 le WHATWG à créer HTML Living Standard (littéralement : standard vivant du
HTML), une spécification de HTML prévue pour être en constante évolution,
afin de coller avec les développements rapides de nouvelles fonctionnalités par
les développeurs de navigateurs (par opposition à des versions numérotées,
donc 'fixes').
63
HTML 5
2. Fondements et concepts
 « supporter le contenu existant »
 « ne pas réinventer la roue » et « paver le sentier des vaches ». On pourrait aussi
dire : « si ce n’est pas cassé, on ne répare pas ».
 « Priorité des circonscriptions », qui dicte : « en cas de conflit, privilégiez
d’abord les utilisateurs, puis les auteurs, puis les implémentateurs, puis les
spécificateurs, et enfin la pureté théorique. »
 HTML5 gère les erreurs;
 Un nouveau Doctype : <!DOCTYPE html>
 La déclaration d’une balise <meta> en HTML5 : <meta charset="UTF-8">
64
HTML 5
3. Nouvelles balises sémantiques
<header>
<nav>
<article>
<section>
<aside>
<footer>
65
HTML 5
AVANT
66
HTML 5
<body>
<div id="header">A</div>
<div id="nav">B</div>
<div class="article">
<div class="section">C</div>
AVANT <div class="section">D</div>
</div>
<div id="aside">E</div>
<div id="footer">F</div>
</body>
67
HTML 5
APRES
68
HTML 5
<body>
<header>A</header>
<nav>B</nav>
<article>
<section>C</section>
APRES <section>D</section>
</article>
<aside>E</aside>
<footer>F</footer>
</body>
69
HTML 5
4- Grandes nouveautés HTML 5
HTML5 a été mis à jour avec quelques éléments nouveaux, ce qui rend HTML5 comme
un pur langage de balisage efficace. Peu d’éléments nouveaux ont été mis à jour en
HTML 5.
Balise Fonctionnement
<aside> Définit une partie latérale au contenu
<article> Définit un article
<audio> Définit un fichier audio
<bdi> (bi-directional Utilisée pour isoler du texte dont la direction est différente du reste du
isolation) texte qui l'entoure.
<canvas> Permet de dessiner des graphiques (habituellement JavaScript)

70
HTML 5
<command> Définit un bouton de commande
<datalist> Définit une liste d’options

<details> Définit les détails d’un élément que l’utilisateur peut voir ou non
<embed> Définit un contenu extérieur (audio, vidéo …)
<figcaption> Légende d’un groupe d’élément multimédia
<figure> Définit un groupe d’élément multimédia
<footer> Définit le bas d’un section ou d’une page
<header> Définit le haut d’une section ou d’une page
<hgroup> Regroupe les informations du haut d’une page ou section
<keygen> Générateur de clé pour un formulaire
<mark> Mise en valeur d’un mot ou d’un texte – Texte marqué
71
HTML 5
<math> Définit une formule mathématique
<meter> Définit une unité de mesure
<nav> Définit un groupe de liens de navigation
<output> Définit un type de sortie
<progress> Représente la progression d'une tâche
<rt> (ruby text) Définit une explication / prononciation des caractères (pour la typographie
Asie de l'Est)
<ruby> Définit une annotation en ruby (pour la typographie Asie de l'Est)
<rp> (ruby Annotation ruby si le script n’est pas supporté
parentheses)
<section> Définit une section dans un document
<source> Définit la source d’un contenu multimédia pour <video> et <audio>
<summary> Définit l’en-tête des détails d’un document ou section
72
HTML 5
<svg> (Scalable Vector Définit une image vectorielle
Graphics)
<time> Définit une unité de temps
<track> Définit une unité de temps pour les éléments <audio> et <video>.
<video> Définit une vidéo
<wbr> (word break) Définit un possible retour à la ligne
73
HTML 5
<DOCTYPE>
Version antérieur complexe : <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML
1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
HTML 5 : <!DOCTYPE html>

Il indique la version HTML au navigateur.
DOCTYPE n’est pas une balise HTML et est définit en haut de page.
Syntaxe : <!DOCTYPE html>
74
HTML 5
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>
Titre
</title>
</head>
<body>
Texte des pages.
</body>
</html>
75
HTML 5
5- Avantages de HTML 5
Une optimisation sur le temps de chargement des pages, car moins d'images, moins de code,
moins de fichiers flash, ... etc.
Des pages Web certainement plus propres et proposant beaucoup plus de fonctionnalités
"innovantes".
Une compatibilité sur les terminaux mobiles : C'est un point très important car depuis la fin de
l’année 2013 Adobe a décidé de stopper le développement du Flash Player pour mobile.
Geolocalisation: Avec l'aide de la géolocalisation tout le monde peut savoir où vous êtes dans le
monde et de partager cette information avec les gens. Il y a différentes façons de comprendre où
vous êtes - votre adresse IP, votre connexion réseau sans fil, etc. Mais les nouvelles API
de géolocalisation HTML5 rendent l'emplacement, directement disponible pour n'importe quelle
application basée sur navigateur compatible HTML5.
76
HTML 5
6- Inconvénients
Compatibilité des navigateurs web
Le principal problème avec l'HTML5 est que seuls les navigateurs modernes le
supportent. Vous pouvez "personnaliser" votre code afin de rendre votre application
compatible avec le navigateur web, mais ce n'est pas toujours efficace.
Enjeux des licenses

Un autre point négatif sur HTML5 est qu'en raison de problèmes de licences, les
éléments multimédia doivent être compressés selon de multiples formats afin d'être
compatibles avec la plupart des navigateurs. Ainsi, vous aurez probablement à utiliser
quelque chose comme mp3 pour les navigateurs Safari et Chrome, ogg pour les
navigateurs Mozilla (Firefox).
77
78
CSS 3
Rappel des termes
 HTML
Une balise comporte
des attributs
contenant des valeurs
CSS
Un sélecteur
définit des propriétés
contenant des valeurs
79
CSS 3
Rappel des termes
 Comme vu précédemment, le code CSS va mettre en forme notre document

HTML
sélecteur {
 Syntaxe générale : propriété : valeur;
}
p{
 Exemple :
font-size : 10px;
color: ‘blue’;
}
<p>Le CSS !!!</p> Le CSS !!!
80
CSS 3
2- Grandes nouveautés
Nouveautés Fonctionnement
border Permet de créer des bords arrondis, des bordures ombrées, des bordures
imagées etc. Trois propriétés sont souvent utilisées:
- border-radius (arrondi)
- box-shadow (ombre)
- border-image (image)
backgrounds Deux propriétés de d’arrière plan, peuvent être utilisées :

- background-size
- background-origin
fonts Utilisée pour créer différents types de style de police
81
CSS 3
Multiples colonnes donne la possibilité d’afficher un texte sur plusieurs colonnes, en
s’appuyant sur 4 nouveaux attributs:
column-count indique le nombre de colonnes,
column-width permet de définir la largeur des colonnes,
column-gap désigne l’espace entre les colonnes,
column-rule permet d’afficher une bordure entre les colonnes
- text-shadow Permettent de mettre des effets sur le texte

- word-wrap
82
CSS 3
- transition-property Les effets de transitions
- transition-duration Ils permettent à un élément de changer d’un style à un autre.
- transition-timing-function
- transition-delay
autocomplete Ce sont des contrôles supplémentaires qui permettent de mieux

novalidate manipuler les formulaires
83
Conclusion générale
 CSS3 marque une évolution vraiment significative des styles, en permettant

une mise en forme élaborée, sans avoir recours à des images, ou à des
balises sans lien avec le contenu;
 Ces fonctionnalités sont utiles, en particulier en donnant aux internautes la
possibilité de redimensionner les éléments;
 Faut-il aller vers le HTML5 et le CSS3 dès maintenant?
84
Ressources web
 http://www.pompage.net/traduction/html5-et-le-futur-du-web
 http://designshack.developpez.com/tutoriels/css/introduction-css3-
interface-utilisateur/#LV
 http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-
votre-site-web-avec-html5-et-css3
 http://www.alsacreations.com/apprendre/
 http://www.html5-css3.fr/
 http://www.startyourdev.com
 http://validator.w3.org/
85
FIN DE LA LECON
QUESTION
86
Leçon 3: Dynamisation des pages
statiques du côté client
(JavaScript et JQUERY)
87
JAVASCRIP
T
88/68
PLAN
- Introduction générale
- Html et Javascript
- Entrée et sortie en Javascript
- Structure d'un script Javascript
- Les variables
- Les objets
- Les événements
89
JAVASCRIPT
Introduction
Javascript permet de rendre dynamique un site Internet développé en HTML.
Javascript permet de développer de véritables applications fonctionnant
exclusivement dans le cadre d'Internet.
Le Javascript est un langage de script simplifié orienté objet dont la syntaxe
est basée sur celle du Java.
Javascript a été initialement élaboré par Netscape en association avec Sun
Microsystem.
Plus tard, Microsoft développera son propre langage Javascript
officiellement connu sous le nom de JScript.
90
JAVASCRIPT
Introduction
Contrairement à un applet Java qui est un programme compilé, les scripts
écrits en Javascript sont interprétés
Le Java, représenté par un ou plusieurs fichiers autonomes dont
l'extension sera *.class ou *.jar, est invoqué par une balise HTML spécifique
Le JavaScript est écrit directement au sein du document HTML sous

forme d'un script encadré par des balises HTML spéciales.
Javascriptest standardisé par un comité spécialisé, l'ECMA (European

Computer Manufactures Association).
91
JAVASCRIPT
HTML et JavaScript
la page HTML devra TOUJOURS contenir les deux balises spécifiques et
indispensables
•<script language="javascript">
............
</script>
Le code JavaScript s’intègre de deux manières avec le code HTML
1. Insertion directe dans le code HTML
 Le code JavaScript s'insère le plus souvent dans la page HTML elle même.
 C'est la méthode la plus simple et la plus fréquemment utilisée par les

développeurs de sites Internet.
2. Insertion comme un module externe
92
JAVASCRIPT
1. Insertion dans une page HTML
Il existe 2 manières d'insérer du code JavaScript dans une page HTML
1.1
Insertion pour exécution directe
<html>
Le code s'exécute automatiquement <head>
<title>..... </title>
Le code JavaScript est placé </head>
<body>
<script language="JavaScript">
•dans le corps même de la page HTML, alert(‘bonjour’);
•entre les balises <body> .......... et </script>
•......... </body> </body>
•lors du chargement de la page HTML </html>
•dans le navigateur en même temps que
•le contenu de la page HTML
•s'affiche à l'écran.
93
JAVASCRIPT
2. Insertion par appel de module externe
On peut insérer du code JavaScript en faisant appel à un module externe se
trouvant à n’importe quelle adresse (URL).
•<script src="URL du module externe">
............
</script>
Les deux balises de Javascript doivent être placées entre les Tags <body> et
</body> dans le cas d'une exécution directe ou entre les Tags <head> et
</head> de la page HTML pour une exécution différée.
Le code Javascript peut être stocké dans un fichier sur le serveur à son
adresse d'appel sous forme de TEXTE SIMPLE portant l'extension .txt ou .js
94
JAVASCRIPT
2. Insertion par appel de module externe
Simplifie la maintenance des sites faisant appel à des modules JavaScript
communs à plusieurs pages HTML.
Inconvénient : l'appel au code externe génère une requête supplémentaire

vers le serveur, et encombre le réseau
95
JAVASCRIPT
Entrée et sortie de données avec JavaScript
 3 types de boites de messages peuvent être affichés en utilisant Javascript :
Alerte, Confirmation et Invite
Méthode alert()
 sert à afficher à l’utilisateur des informations simples de type texte. Une
fois que ce dernier a lu le message, il doit cliquer sur OK pour faire
disparaître la boîte
Méthode confirm()
 permet à l’utilisateur de choisir entre les boutons OK et Annuler.
Méthode prompt()
 permet à l’utilisateur de taper son propre message en réponse à la question
posée
 La méthode document.write() permet d ’écrire du code HTML dans la page
WEB
96
JAVASCRIPT
Entrée et sortie de données avec JavaScript
<html>
<head>
<title> une page simple </title>
</head>
<body>
Bonjour
<script language='javascript'>
alert('bonjour');
document.write (
prompt('quel est votre nom ?','Indiquer votre nom ici'));
confirm('quel bouton allez-vous choisir ?');
</script>
</body>
</html>
97
JAVASCRIPT
La structure d’un script en JavaScript
 La syntaxe du langage Javascript s'appuie sur le modèle de Java et C
Règles générales
1.L'insertion des espaces peut s'effectuer n'importe où dans le script
 Chaque commande doit être terminée par un point-virgule (;).
 Un nombre à virgule est séparé par un point (.)
 Le langage Javascript est sensible à la casse
 Il existe deux méthodes permettant d'intégrer des commentaires à vos
scripts.
– Placer un double slash (//) devant le texte
– Encadrer le texte par un slash suivi d'une étoile (/*) et la même
séquence inversée (*/)
98
JAVASCRIPT
Les variables
 Déclaration et affectation
 Le mot-clé var permet de déclarer une ou plusieurs variables.

•
//Déclaration de i, de j et de k.
 Après la déclaration de la variable, •var i, j, k;
il est possible de lui affecter une valeur
par l'intermédiaire du signe d'égalité (=). • //Affectation de i.
•i = 1;
 Si une valeur est affectée à •//Déclaration et affectation de prix.
•var prix = 0;
une variable sans que cette dernière
ne soit déclarée, alors Javascript •//Déclaration et affectation de caractere
la déclare automatiquement. •var caractere = ["a", "b", "c"];
99
JAVASCRIPT
Les variables
 Déclaration et affectation
 La lecture d'une variable non déclarée provoque une erreur
 Une variable correctement déclarée mais dont aucune valeur n'est

affectée, est indéfinie (undefined).
La portée
 les variables peuvent être globales ou locales.
 Une variable globale est déclarée en début de script et est accessible à

n'importe quel endroit du programme.
 Une variable locale est déclarée à l'intérieur d'une fonction et n'est

utilisable que dans la fonction elle-même.
100
JAVASCRIPT
Les variables
 Contraintes concernant les noms de variables
Les noms de variables ne peuvent contenir que des lettres, chiffres, ou le
caractère "_" (underscore)
– Mon_Prenom est un nom valide
Les caractères spéciaux et accentués sont interdits (é, à, ç, ï, etc..)

– Mon_Prénom n'est pas un nom valide. Il y a un caractère
accentué.
Les majuscules et les minuscules ont leur importance.

– MonPrenom est différent de Monprenom.
Un nom de variable ne peut contenir d'espaces.

– Mon Prenom n'est pas un nom de variable correct. Il y a un
espace.
Les mots réservés JavaScript ne peuvent être utilisés comme noms de
variable.
101
JAVASCRIPT
Les variables
Le type d’une variable dépend de la valeur stockée dans cette variable.
Pas de déclaration de type.
Exemple
trois principaux types de valeurs

String
Number : 10^-308 >nombre < 10^308
•Les nombres entiers
•les nombres décimaux en virgule flottant
– 3 valeurs spéciales :
•Positive Infinity ou +Infinity (valeur infini positive)
•Negative Infinity ou –Infinity (valeur infinie négative)
•Nan (Not a Number) habituellement générée comme résultat
d’une opération mathamatique incohérente
Boolean
– deux valeurs littérales : true (vrai) et false (faux).
•var maVariable = ‘ Philippe ’;
•maVariable =10;
102
JAVASCRIPT
Valeurs spéciales
JavaScript inclut aussi deux types de données spéciaux :
Null : possède une seule valeur, null, qui signifie l’absence e données dans
une variable
Undefined : possède une seule valeur, undefined. Une variable dont le

contenu n’est pas clair car elle n’a jamais stocké de valeur, pas même null
est dite non définie (undefined).
103
JAVASCRIPT
Les opérations sur les chaînes
La concaténation
–var chaine = "bonjour " + " FI3/FCD1 ";
Déterminer la longueur d’une chaîne

–var ch1 = " bonjour ";
–var longueur = ch1.length;
Identifier le nième caractère d’une chaîne

–var ch1 =" Rebonjour ! ";
–var carac = ch1.charAt(Suite);
Extraction d’une partie de la chaîne

–var dateDuJour = " 04/04/03 "
–var mois = dateDuJour.substring(3, 5);
•3: est l’indice du premier caractère de la sous-chaîne à extraire
•5 : indice du dernier caractère à prendre en considération ; ce
caractère ne fera pas partie de la sous-chaîne à extraire.
104
JAVASCRIPT
Les fonctions prédéfinies
eval
Cette fonction exécute un code Javascript à partir d'une chaîne de
caractères.
...
<SCRIPT LANGUAGE="JavaScript">
function evaluation() {
document.formulaire.calcul.value=eval(document.formulaire.saisie.value); }
</SCRIPT>
...
<FORM NAME="formulaire">
Saisissez une expression mathématique : <INPUT TYPE="text" NAME=saisie MAXLENGTH=40 SIZE=40>
<INPUT TYPE="button" VALUE="evaluation." onClick="evaluation()">
<INPUT TYPE="text" NAME=calcul MAXLENGTH=40 SIZE=40>
</FORM>...
105
JAVASCRIPT
isFinite ()
• Détermine si le paramètre est un nombre fini. Renvoie false si ce n'est
pas un nombre ou l'infini positif/infini négatif.
•isFinite(240) //retourne true
•isFinite("Un nombre") //retourne false
isNaN ()
• détermine si le paramètre n’est pas un nombre (NaN : Not a Number).
•isNaN("un nombre") //retourne true

•isNaN(20) //retourne false
ParseFloat ()
•analyse une chaîne de caractères et retourne un nombre décimal.
•si l'argument évalué n'est pas un nombre, renvoie NaN (Not a Number).
106/
68
JAVASCRIPT
parseInt ()
•analyse une chaîne de caractères et retourne 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 numero="125";
var nombre=parseFloat(numero); //retourne le nombre 125
var prix=30.75;
var arrondi = parseInt(prix, 10); //retourne 30
107
JAVASCRIPT
Number ()
•convertit l'objet spécifié en valeur numérique
var jour = new Date("December 17, 1995 03:24:00");

alert (Number(jour)); //converit la date en millisecondes
String()
•convertit l'objet spécifié en chaîne de caractères
jour = new Date(430054663215);

alert (String(jour)); //Convertit le nombre en date Mois Jour, Année etc.
Escape ()
•retourne la valeur hexadécimale à partir d'une chaîne de caractères codées
en ISO-Latin-1
escape("!&") //retourne %21%26%
108
JAVASCRIPT
Les objets
Les objets de JavaScript, sont soit des entités pré-définies du langage,
soit créés par le programmeur.
Par exemple, le navigateur est un objet qui s'appelle "navigator".

La fenêtre du navigateur se nomme "window"
La page HTML est un autre objet, que l'on appelle "document".
Un formulaire à l'intérieur d'un "document", est aussi un objet.
Un lien hypertexte dans une page HTML, est encore un autre objet. Il
s'appelle "link". etc.
Les objets javascript peuvent réagir à des "Evénements".
Tous les navigateurs ne supportent pas les mêmes objets
Accès aux propriétés d’un objet

o voiture.couleur.value
o voiture.couleur.value = verte
109
JAVASCRIPT
Les objets
L’opérateur New
L'opérateur new est utilisé pour créer une nouvelle instance ou un
nouveau type d'objet défini par l'utilisateur ou de l'un des types d'objets
prédéfinis, Array, Boolean, Date, Function, Image, Number, Object, ou
String.
nouvel_objet = new type_objet(parametres)

texte = new String("Une chaîne de caractère");
110
JAVASCRIPT
Les objets
L’opérateur typeof
• renvoie une chaîne de caractères indiquant quel est le type de
l'opérande.
var i = 1;
typeof i; //retourne number
var titre="Les raisins de la colère";
typeof titre; //retourne string
var jour = new Date();
typeof jour; //retourne object
var choix = true; typeof choix; //retourne boolean
var cas = null; typeof cas; //retourne object
typeof parseFloat; //retourne function
typeof Math; //retourne object (IE 5.*, NS 6.*, NS 4.78, Opera 6.*, Opera 5.*
typeof Math; //retourne function NS 3.*, Opera 3.*
111
JAVASCRIPT
Les objets
L'objet String
Propriété :
length : retourne la longueur de la chaîne de caractères;
Méthodes :
anchor( ) : formate la chaîne avec la balise <A> nommée;
b( ) : formate la chaîne avec la balise <B>;
big( ) : formate la chaîne avec la balise <BIG>;
charAt( ) : renvoie le caractère se trouvant à une certaine position;
charCodeAt( ) : renvoie le code du caractère se trouvant à une certaine
position;
concat( ) : permet de concaténer 2 chaînes de caractères;
fromCharCode( ) : renvoie le caractère associé au code;
indexOf( ) : permet de trouver l'indice d'occurrence d'un caractère dans une
chaîne.
112
JAVASCRIPT
Les objets
L'objet Array
Propriété :
length : retourne le nombre d'éléments du tableau;
Méthodes :
concat( ) : permet de concaténer 2 tableaux;
join( ) : converti un tableau en chaîne de caractères;
reverse( ) : inverse le classement des éléménts du tableau;
slice( ) : retourne une section du tableau;
sort( ) : permet le classement des éléments du tableau;
113
JAVASCRIPT
Les objets
L'objet Math
Propriété :
E : renvoie la valeur de la constante d'Euler (~2.718);
LN2 : renvoie le logarithme népérien de 2 (~0.693);
LN10 : renvoie le logarithme népérien de 10 (~2.302);
LOG2E : renvoie le logarithme en base 2 de e (~1.442);
LOG10E : renvoie le logarithme en base 10 de e (~0.434);
PI : renvoie la valeur du nombre pi (~3.14159);
SQRT1_2 : renvoie 1 sur racine carrée de 2 (~0.707) c’est-à-dire l’inverse de
la racine carrée de 2;
SQRT2 : renvoie la racine carrée de 2 (~1.414).
114
JAVASCRIPT
Les objets
L'objet Math
Méthodes :
 abs( ), exp( ), log(), sin( ), cos( ), tan( ), asin( ), acos( ), atan( ), max( ),
min( ), sqrt( ) sont les opérations mathématiques habituelles;
 atan2( ) : retourne la valeur radian de l'angle entre l'axe des abscisses et
un point;
 ceil( ) : retourne le plus petit entier supérieur à un nombre;
 floor( ) : retourne le plus grand entier inférieur à un nombre;
 pow( ) : retourne le résultat d'un nombre mis à une certaine puissance;
 random( ) : retourne un nombre aléatoire entre 0 et 1;
 round( ) : arrondi un nombre à l'entier le plus proche.
115
JAVASCRIPT
Les objets
L'objet Date
Propriété : aucune;
Méthodes :
getFullYear( ), getYear( ), getMonth( ), getDay( ), getDate(), getHours( ),
getMinutes( ), getSeconds( ), getMilliseconds( ): retournent respectivement l'année
complète, l'année (2 chiffres), le mois, le jour de la semaine, le jour du mois,
l'heure, les minutes, les secondes et les millisecondes stockés dans l'objet Date;
getUTCFullYear( ), getUTCYear( ), … retournent respectivement l'année complète,

l'année (2 chiffres), … stockés dans l'objet Date en temps universel;
setFullYear( ), setYear( ), … remplacent respectivement l'année complète, l'année

(2 chiffres), … dans l'objet Date;
setUTCFullYear( ), setUTCYear( ), … remplacent l'année complète, l'année (2

chiffres), … dans l'objet Date en temps universel;
116
JAVASCRIPT
Les objets du navigateur
L'objet le plus haut dans la hiérarchie est window qui correspond à la
fenêtre même du navigateur.
L'objet document fait référence au contenu de la fenêtre et regroupe au

sein de propriétés l'ensemble des éléments HTML présents sur la page.
Pour atteindre ces différents éléments, nous utiliserons :

 soit des méthodes propres à l'objet document, comme la méthode
getElementById( ), qui permet de trouver l'élément en fonction
de son identifiant (ID);
 soit des collections d'objets qui regroupent sous forme de

tableaux Javascript tous les éléments de type déterminé.
117
JAVASCRIPT
118
JAVASCRIPT
L'objet window
Propriétés : (accessibles avec IE et N)
closed : indique que la fenêtre a été fermée;
defaultStatus : indique le message par défaut dans la barre de
status;
document : retourne l'objet document de la fenêtre;
frames : retourne la collection de cadres dans la fenêtre;
history : retourne l'historique de la session de navigation;
location : retourne l'adresse actuellement visitée;
name : indique le nom de la fenêtre;
navigator : retourne le navigateur utilisé;
opened : retourne l'objet window qui a créé la fenêtre en cours;
parent : retourne l'objet window immédiatemment supérieur dans
la hiérarchie;
119/
68
JAVASCRIPT
L'objet window
Propriétés : (accessibles avec IE et N)
self : retourne l'objet window correspondant à la fenêtre en cours;
status : indique le message affiché dans la barre de status;
top : retourne l'objet window le plus haut dans la hiérarchie.
Méthodes :
blur( ) : enlève le focus de la fenêtre;
close( ) : ferme la fenêtre;
focus( ) : place le focus sur la fenêtre;
moveBy( ) : déplace d'une distance;
moveTo( ) : déplace la fenêtre vers un point spécifié;
open( ) : ouvre une nouvelle fenêtre;
print( ) : imprime le contenu de la fenêtre;
resizeBy( ) : redimensionne d'un certain rapport;
resizeTo( ) : redimensionne la fenêtre;
setTimeout( ) : évalue une chaîne de caractère après un certain laps
de temps. 120
JAVASCRIPT
L'objet document
Propriétés :
 applets : retourne la collection d'applets java présente dans le
document;
 cookie : permet de stocker un cookie;
 domain : indique le nom de domaine du serveur ayant apporté le
document;
 forms : retourne la collection de formulaires présents dans le
document;
 images : retourne la collection d'images présentes dans le
document;
 links : retourne la collection de liens présents dans le document;
 referrer : indique l'adresse de la page précédente;
 title : indique le titre du document.
121
JAVASCRIPT
L'objet navigator
Propriétés
appName : application (Netscape, Internet Explorer)
appVersion : numero de version.
platform : système d’exploitation (Win32)
plugins
language
mimeTypes
JavaEnabled()
122
JAVASCRIPT
Les événements
Javascript est dépendant des événements
se produisent lors d'actions diverses sur les objets d'un document HTML.
– onLoad;
– onClick
– onMouseover
– onMouseout
– ...
Il est possible de baser l’exécution de fonctions sur des événements
123/
68
JAVASCRIPT
Les événements
Evénement onLoad
Se produit lorsque une page web est chargée dans la fenêtre du navigateur
Toute la page (y compris les images qu’elle contient si leur chargement est
prévu) doit avoir été chargée pour qu’il ait lieu
Cet événement peut être associé à une image seulement ; auquel cas, il se
produit une fois son chargement terminé
<HTML><BODY onLoad="alert('page chargée');">

Exemple de l'événement onLoad
</BODY></HTML>
124/
68
JAVASCRIPT
Les événements
É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.
<HTML><BODY>
<IMG SRC="image.gif" onMouseOver="src='image2.gif';"
onMouseOut="src='image.gif';">
</BODY></HTML>
125
JQUERY
126
PLAN
- Introduction générale
- Pourquoi utiliser Jquery ?
- Comment installer Jquery ?
- Les sélecteurs
- Les attributs
- Les événements
- Ajax et Jquery
- Jquery UI
- Conclusion Générale
127/
68
JQUERY
Introduction
•JQuery est une célèbre bibliothèque logicielle JavaScript libre, dont John
Resig est considéré comme le fondateur. Créé en 2006, JQuery en est
aujourd'hui à sa version 7.1. Beaucoup d'entreprises célèbres l'utilisent, par
exemple Mozilla Firefox, Microsoft, Nokia, Twitter, Google Code, Amazon,
Wordpress etc.
•Réputée pour sa syntaxe aussi simple que courte, JQuery est donc
énormément utilisée par les débutants comme par les professionnels. Parmi
ses multiples possibilités, il offre entre autres :
128/
68
JQUERY
• des sélecteurs très simples, pour manipuler la source DOM.
• les sélecteurs de base qui sont quasiment identiques à ceux du CSS.
129/
68
JQUERY
Avantages de JQUERY
•Il existe beaucoup de bibliothèques Javascript alors pourquoi utiliser JQuery?
•JQuery est la plus complète des bibliothèque Javascript et se base sur
certaines stratégies.
•Exploiter le CSS : jQuery base son mécanisme de localisation des éléments
de la page sur les sélécteurs CSS. Ce qui permet au développeur de pouvoir
sélectionner très facilement ce qu'il souhaite.
•Accepter les extensions: JQuery accepte très bien et très facilement les
extensions. La création de plugin jQuery est simple et très bien documentée.
Ce qui permet à jQuery de posséder une multitudes d'extensions.
130/
68
JQUERY
- Masquer les excentricités du navigateur : jQuery ajoute une couche
d'abstraction qui permet de normaliser les tâches courantes. Le
développement web est très délicat car tous les navigateurs sont différents
mais jQuery permet de standardiser certaines tâches.
- Manipuler les ensembles : jQuery permet de travailler sur des ensembles.

Ainsi, les boucles deviennent généralement inutiles et le code est beaucoup
plus simple.
- Autoriser plusieurs actions sur une ligne : Le résultat de la plupart des

opérations sur un objet est l'objet lui-même. Ce qui permet de ne pas
dupliquer l'objet mais de travailler tout le temps sur le même.
131/
68
JQUERY
Pourquoi utiliser Jquery ?
- Accéder aux éléments du document : jQuery permet
d'accéder facilement aux éléments du document et sans écrire
beaucoup de code. Avec du Javascript simple il est beaucoup
plus difficile d'accéder à ces éléments.
- Modifier l'aspect d'une page web : jQuery permet très
simplement de créer directement des styles. Il permet de
contourner les problèmes liés aux standards des navigateurs.
- Altérer le contenu d'un document : Il est possible de changer
le contenu d'un champs texte ou d'une image sans rafraîchir la
page.
132/
68
JQUERY
- Répondre aux actions de l'utilisateur : Certaines propriétés de jQuery
permettent de simuler des actions utilisateurs comme le clic.
- Animer les modifications d'un document : L'aspect visuel étant une chose
primordial, jQuery permet de faire des effets lors d'un changement de texte
ou tout autres changements.
- Récupérer des informations à partir d'un serveur sans actualiser la page :

En effet, jQuery permet d'utiliser l'AJAX de manière très simple.
- Simplifier les tâches Javascript : Les différentes fonctionnalités de jQuery

permettent de simplifier énormément toutes les tâches courantes que
Javascript offre.
133/
68
JQUERY
Comment installerJQUERY?
- jQuery est une bibliothèque JavaScript. En d'autres termes, un fichier
d'extension .js téléchargeable à l'adresse
http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery.
- Pour l'utiliser dans une page HTML, on peut procéder de deux manières
(1) Il suffit de faire référence au fichier téléchargé, en utilisant une balise
<script>, comme ceci :
<script type="text/javascript" src="Repertoire/jquery.js" ></script>
(2) On peut aussi inclure le code contenant la librairie. Pour cela, il est
conseillé d'utiliser les serveurs de Google. Voici donc le bout de code à insérer
dans la balise <script> pour pouvoir utiliser JQuery :
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs
/jquery/1/jquery.min.js"></script>
134/
68
JQUERY
Présentation des sélecteurs
La première chose à apprendre de jQuery afin d'être en mesure de séparer
vos codes JavaScript et (X)HTML sont les sélecteurs. Les sélecteurs
permettent de sélectionner un ou plusieurs éléments du DOM. Ces derniers
pouvant être manipulés comme tout autre objet. Si vous êtes familier avec
CSS, vous allez saisir rapidement les sélecteurs. Ceux-ci sont en réalité la
même chose et ils utilisent presque la même syntaxe. jQuery permet la
sélection des éléments grâce à une fonction spéciale nommée « $ ».
Exemple de sélecteurs
$(document) // Extension de l'objet document à la classe jQuery.
$('*') // Sélectionne tous les éléments.
$('#monDiv') // Sélectionne l'élément ayant l'ID "monDiv"

135/
68
JQUERY
$('.nomclasse') // Sélectionne tous les élements ayant la classe nomclasse
$('p.first') // Sélectionne les éléments <p> ayant la classe "first".
$('p[title]') //Sélectionne les éléments <p> ayant un attribut "title".
$('p[title="Bonjour"]') // Sélectionne les éléments <p> dont l'attribut title est

"Bonjour".
$('p[title!="Bonjour"]') // Sélectionne les éléments <p> dont l'attribut title

n'est pas "Bonjour".
$('p[title^="H"]') // Sélectionne les éléments dont l'attribut title commence

par "H".
$('p[title$="H"]') // Sélectionne les éléments dont l'attribut title fini par "H".
136/
68
JQUERY
$('p[title*="H"]') // Sélectionne les éléments dont l'attribut title contient "H".
$('ul, ol, dl') // Sélectionne les éléments <ul>, <ol> et <dl>
$('.article, .nouvelles, .edito') // Sélectionne tous les éléments ayant les

classes article, nouvelles ou edito
$('div .desc') // Sélectionne les éléments ayant la classe "desc" descendants

(au sens CSS) d'éléments <div>.
$('div > .enfant') // Sélectionne les éléments ayant la classe "enfant" enfants
d'éléments <div>.
$('label + input') // Sélectionne les éléments <input /> dont l'élément

précédent (dans le DOM) est <label>.
$('#debut ~ div') // Sélectionne les éléments <div> frères se situant 137/

après
l'élément dont l'id est "debut". 68
JQUERY
Les attributs
- AddClass(nomClasse) : Ajoute une classe pour chaque élement sélectionné.
Exemple : ajouter la classe "teste" à tous les paragraphes.
$("p").addClass("teste") : <p class="teste">Hello</p> On obtiendra : <p
class="teste"> Hello</p>
- attr(nom) : Cette méthode permet facilement de retrouver la valeur d'une

propriété du premier élément trouvé. Si l'élément ne dispose pas de l'attribut
recherché, "undefined" est renvoyé.
Concernant l'accès aux propriétés de formulaire "checked", "disabled" et
"readonly", la méthode retourne true s'ils sont présents.
Ex : Récupérer la valeur de l'attribut alt de tous les images
$("img").attr("alt") : <img src="teste.png" alt="image de teste"/> On

obtiendra :image de teste
138/
68
JQUERY
- attr(clé,valeur) : assigne une paire attribut/valeur a tous les éléments
concernés.
Ex : Modifier la valeur de l'attribut src de tous les images par 'teste.jpg'
$("img").attr("src","teste.jpg") : <img/> On obtiendra : <img
src="teste.jpg"/>
- html() Récupère le contenu du premier élement trouvé. Ne fonctionne pas

sur les documents XML (a l'exception des documents XHTML). Cette methode
renvoie: String
Ex : Affiche le contenu du premier div trouvé.
$("div").html(); <div><input/></div> On obtiendra : <input/>
- html(valeur) : Permet de modifier le contenu d'un élement. Cette methode

renvoie: objet jQuery
Ex: Modifie le contenu de tous les div.
$("div").html("<b>nouveau contenu</b>"); <div><input/></div> On
obtiendra : <div><b>nouveau contenu</b></div> 139/
68
JQUERY
- removeAttr(nom) : Supprime un attribut des élements concernés. Cette
methode renvoie: objet jQuery
$("input").removeAttr("disabled") <input disabled="disabled"/> On obtiendra
: <input/>
- val() Récupère le contenu de l'attribut "value" du premier élement de la
sélection.
Faites attention quand vous utilisez cette fonction pour récupérer la valeur
d'élements de formulaire de type select multiple parce qu'ils peuvent recevoir
un tableau de valeurs. Cette methode renvoie: String
Ex: $("input").val(); <input type="text" value="some text"/> On obtiendra
"some text"
- val(valeur) Assigne une nouvelle valeur a l'attribut "value" des éléments de la

sélection. Cette methode renvoie: objet jQuery
Ex N° 1 : $("input").val("test"); <input type="text" value="some text"/> On
obtiendra : <input type="text" value="test"/>
140/
68
JQUERY
Ex N°2 :Permet également de sélectionner des éléments de champs de
formulaire de type liste déroulante, ou encore checkboxes.
$("#single").val("Single2"); $("#multiple").val(["Multiple2", "Multiple3"]);

$("input").val(["check1","check2", "radio1" ]);
141/
68
JQUERY
Les événements avec Jquery
C'est quoi un événement ?
Un événement est une action de l’utilisateur. Clic, double, clic, survol d’un
élément, etc. Jquery permet de traiter de manière facile ce événements, et
de leur associer des actions.
Quelques exemples d’événements

-ready() : qui écoute la fin du chargement du document.
$(document).ready(function(){
// Le code jQuery ici !
});
142/
68
JQUERY
-click() : qui écoute lorsque l'on clique sur un élément de la page.
$("#uneDiv").click(function(){
// Le code a exécuter !
});
Il existe plusieurs autres événements que l'on peut associer aux éléments de
page. On peut citer entre autre :
143/
68
JQUERY
Autres événements
144/
68
JQUERY
Ajax et JQuery
JQuery possède toute une panoplie de fonctions permettant de simplifier les
requêtes Ajax
La plus simple :
$('#maDiv').load('page.html');
Plus complexe :
$.get('test.html',
function(data) {faire quelque chose);
Générale : $.ajax({
url: 'document.xml',
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function(){alert('Erreur chargement'); },
success: function(xml){faire quelque chose} 145/
}); 68
JQUERY
Jquery UI
jQuery offre de très nombreuses méthodes pour gérer le DOM, les propriétés
CSS, AJAX et la gestion événementielle.
jQuery UI complète jQuery en offrant des méthodes additionnelles pour la

réalisation de l'interface utilisateur.
jQuery UI est un ensemble de composants graphiques téléchargeable à

l'adresse http://jqueryui.com/download.
146/
68
JQUERY
Des « comportements » (interactions)
- draggable : pour glisser-déplacer un élément http://jqueryui.com/

demos/draggable/
- droppable : pour « déposer » un élément http://jqueryui.com/

demos/droppable/
- resizable : pour redimensionner un élément http://jqueryui.com/

demos/resizable/
- selectable : pour sélectionner des éléments à la souris http://jqueryui.com/

demos/selectable/
- sortable : pour trier des éléments http://jqueryui.com/demos/selectable/
147/
68
JQUERY
Des « widgets »
- « accordéon » http://jqueryui.com/demos/accordion/
- « calendrier » http://jqueryui.com/demos/datepicker/
- boîte de dialogue http://jqueryui.com/demos/dialog/
- barre de progression http://jqueryui.com/demos/progressbar/
- curseur http://jqueryui.com/demos/slider/
- onglets http://jqueryui.com/demos/tabs/
148
JQUERY
Conclusion générale
- jQuery est un framework javascript complet et facile à utiliser
- Permet de manipuler les éléments d'une page et le CSS
- Permet de faire des requêtes AJAX simplement
- Jquery UI une extension graphique de Jquery proposant des composants
graphiques
- D’autres frameworks sont disponibles et ne sont pas à oublier : il est possible
de combiner les frameworks
149
Bibliographies & ressources web
http://www.jquery-fr.com/
http://fr.openclassrooms.com/informatique/cours/simplifiez-vos-
developpements-javascript-avec-jquery
http://www.tuto-jquery.fr/ajax_jquery/
UML 2 Pour les bases de donnees , Christian Soutou , Eyrolles, 2007
http://web.univ-pau.fr/~ecariou/cours/sd-m1/cours-architecture.pdf
http://perso.univ-lyon1.fr/olivier.gluck/Cours/Supports/M2SIR_CS/SPAI-C1-
ArchiC-S.pdf
https://aful.org/ressources/formations/cours-logiciels-libres-technique-java/
file_html
http://fr.wikipedia.org/wiki/Hypertext_Transfer_Protocol
150
Bibliographies & ressources web
http://fr.wikipedia.org/wiki/HyperText_Transfer_Protocol_Secure
http://www.bitdefender.fr/blog/Pourquoi-le-protocole-HTTPS-est-
%28toujours%29-bon-pour-vous-437.html
http://webyo.net/IMG/article_PDF_webmaster-Mettre-son-site-en-ligne.pdf
http://www.commentcamarche.net/contents/519-le-protocole-ftp-file-
transfer-protocol
Toutes les ressources ont été consultées le 09/12/2017
151

Cours Web Complet

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours Web Complet

Transféré par

Droits d'auteur :

Formats disponibles

1

Comment fait-on une application web ?

C'est compliqué ? C'est long ? C'est pour les pros ?

-Content Management System (CMS)

-Content Management System (CMS)

 Le choix de la solution technique ;

• Un ensemble de réseaux informatiques locaux utilisant les mêmes protocoles de

•La pile de protocoles Internet

Une pile de protocoles de communication, l’un au-dessus de l’autre

* IPv6 : Adresses de 16 octets ; espace d’adressage beaucoup plus grand !

• Un système hypertexte public basé sur Internet

• NCSA Mosaic : premier « navigateur »

•Comprendre le Web c'est comprendre ses standards

de promouvoir la compatibilité des technologies du World Wide Web.

Du Web statique Vers le web dynamique

une véritable révolution pour l’époque (hypertexte).

Le contenu de la page varie en fonction de l’utilisateur, de ses préférences ou du sujet abordé.

• demande au serveur des informations

• affiche des pages pour l’utilisateur

Le serveur (Apache, Microsoft IIS. . .)

• reçoit en permanence les requêtes des clients

• renvoie les documents correspondants

serveur accepte des requêtes, les traite et renvoie le résultat au demandeur. Le

terme serveur s'applique à la machine sur lequel s'exécute le logiciel serveur.

une liaison temporaire.

architecture. Ainsi, chaque application est composée de logiciel serveur et logiciel

client. A un logiciel serveur, peut correspondre plusieurs logiciels clients développés

protocole entre les deux processus communicants.

Le modèle client-serveur est particulièrement recommandé pour des réseaux

nécessitant un grand niveau de fiabilité, ses principaux atouts sont :

de données centralisée afin d'éviter les problèmes de redondance et de contradiction

données est moins important ;

ce modèle, ils ont moins besoin d'être administrés ;

 un réseau évolutif : grâce à cette architecture il est possible de supprimer ou

rajouter des clients sans perturber le fonctionnement du réseau et sans

un coût élevé dû à la technicité du serveur ;

Heureusement, le serveur a une grande tolérance aux pannes (notamment grâce

Le serveur reçoit la demande et répond à l'aide de l'adresse de la machine cliente

Communication entre navigateur et serveur

La communication entre le navigateur et le serveur se fait en deux temps :

Le serveur traite la requête puis envoie une réponse HTTP

Le protocole FTP a pour objectifs de :

Le serveur Web peut fonctionner sous Linux, Windows, Etc.

Le nom de domaine doit être réservé chez l’hébergeur.

Transfert des fichiers avec le protocole FTP

Il faut respecter les règles de syntaxe !

page valide = même sens pour tous les navigateurs

Une page HTML valide est une page qui passe

Balises sans contenu : <autrebalise />

<body> ... </body>

un autre site web: <a href="http://www.ifri-uac.net">Site web IFRI</a>

La zone délimitée par <a></a> peut être du texte, une image. . .

<a href="http://www.ifri-uac.net"> <img src="logo.png" alt=“logo IFRI" /></a>

Possibilité de spécier la largeur (width), hauteur(height), l'alignement, l'espacement

Les balises input

Syntaxe : <textarea name="saison" rows="10" cols="40"> Texte</textarea>

Exemple :a :hover {color : red ; }

:focus prise de focus par un texinput ou textarea

:hover passage de la souris sur un lien

:link lien pas encore visité

:visited lien cliqué

Les différents types de sélecteurs

Pour faire appel à une classe :

<aside> Définit une partie latérale au contenu