3ème Année Ingénieur Informatique

Programmation WEB

Présentation du module

Badr Benmammar
[Link]@[Link]
 Objectifs du module
 Maîtriser la programmation Web côté client.

2
 Objectifs du module
 Maîtriser la programmation Web côté client et côté serveur.

3
 Outils à utiliser

 Éditeurs:

 Client HTTP:

 Environnement de
développement web:

 Apache
 MySQL
 PHP 4
 [Link]
 Plan module
 Cours 1 : Introduction au Web
 Cours 2 : Introduction au langage HTML
 Cours 3 : Introduction au CSS Contrôle Continu

 Cours 4 : Introduction au langage JavaScript

 Cours 5 : Manipulation du DOM en JavaScript
 Cours 6 : Initiation à PHP
 Cours 7 : Introduction à la POO en PHP
 Cours 8 : PHP : cookies, sessions et bases de données
 Cours 9 : Introduction à AJAX et interaction avec PHP
 Cours 10 : Introduction à [Link] et [Link] Epreuve Finale
 Cours 11 : Introduction à jQuery et jQuery AJAX

5
 Evaluation du module

 Coefficient = 3.

 Note TP = moyenne de tous les TPs.

 Note TP suite à la consultation.

 Absence non justifiée (-1 sur la moyenne finale du TP).

 Note CC = 60% * CC écrit (12 pts) + 40% * note TP (8 pts).

 Note module = Note CC (40%). Examen (60%).

 Note module = (2* Note CC + 3* Note Examen)/5.

6
3ème Année Ingénieur Informatique

Programmation WEB

Introduction au Web

Badr Benmammar
[Link]@[Link]
 Plan

 Client-serveur Web

 Historique du Web

 Évolution du HTML

 Validation du code HTML

 Évolution du Web

8
 Client-serveur Web

Client Serveur

Client : « Bonjour, je voudrais [Link] »

adresse Web ou URL (Uniform Resource Locator)

9
 Client-serveur Web

Client Serveur

Client : « Bonjour, je voudrais [Link] »

 Protocole HTTP (Hypertext Transfer Protocol) sur le Port 80 coté serveur.

 HTTP permet au client d'envoyer des requêtes au serveur afin d'obtenir des
ressources (ex: pages HTML, fichiers CSS/JS, images, etc.).
 Transformées en adresse IP par un système de résolution de noms (DNS).
 [Link] ⇒ [Link]

10
 Client-serveur Web

Client Serveur

Préparation de la page Web

11
 Client-serveur Web

Client Serveur

Serveur : « Bonjour, voici la page Web »

12
Exemple de client-serveur Web + serveur de données

13
 Internet, WWW et HTML
 Internet est un réseau de réseaux.
 Un ensemble de réseaux interconnectés, utilisant un ensemble de protocoles de
communication et d’échanges de données standardisés.

Le World Wide Web (WWW) n’est qu’une

application d’Internet.

HTML (HyperText Markup Language) est un

langage standardisé utilisé pour la description
des pages Web.

 Il sert de base pour plusieurs services, tels que le Web, les e-mails, les
transferts de fichiers (FTP), la voix sur IP et la messagerie instantanée.
14
 Historique du Web
 En 1969, le réseau Arpanet est créé par le DoD (department of defense)
américain.
 Le protocole FTP (File Transfer Protocol) voit le jour en 1971.
 Au cours des années 1970, le CERN commence à utiliser le réseau ARPANET
afin de faciliter les échanges scientifiques internationaux.

15
 Historique du Web
 En 1969, le réseau Arpanet est créé par le DoD (department of defense)
américain.
 Le protocole FTP (File Transfer Protocol) voit le jour en 1971.
 Au cours des années 1970, le CERN commence à utiliser le réseau ARPANET
afin de faciliter les échanges scientifiques internationaux.
 En 1989, Tim Berners-Lee, informaticien au CERN, développe un système
d'hypertexte  inventeur du Web.

16
 Historique du Web
 En 1969, le réseau Arpanet est créé par le DoD (department of defense)
américain.
 Le protocole FTP (File Transfer Protocol) voit le jour en 1971.
 Au cours des années 1970, le CERN commence à utiliser le réseau ARPANET
afin de faciliter les échanges scientifiques internationaux.
 En 1989, Tim Berners-Lee, informaticien au CERN, développe un système
d'hypertexte  inventeur du Web.

 En 1990, il crée HTML, HTTP et URL.

 Il développe le premier navigateur (WorldWideWeb), et le
premier serveur HTTP (CERN httpd).
 En 1991, il rend son projet WorldWideWeb public, avec
des ressources accessibles via FTP ou HTTP.
 L'extension de ce projet a conduit à ce que l'on appelle
aujourd'hui le Web.

17
 Évolution du HTML
 1989 : les liens hypertextes  Tim Berners-Lee (inventeur du Web).

 Permettent de pointer vers une autre page.

Le titre de mon document

Un paragraphe dans mon document.

Un autre paragraphe qui mentionne une
<A HREF= "http: // [Link]"> autre page Web </A>.

La première balise inventée en HTML était la balise <A> (ancre), qui permettait
de créer des liens hypertextes, un concept fondamental du Web.

(Code évidemment non conforme à la norme HTML actuelle.)

18
 Évolution du HTML
 1990 : proposition de balises

<TITLE> Le titre de mon document </TITLE>

Un paragraphe dans mon document.

<P>
Un autre paragraphe qui mentionne une
<A HREF= "http: // [Link]"> autre page Web <A>.

(Code évidemment non conforme à la norme HTML actuelle.)

 1991 : HTML 1.0  Tim Berners-Lee.

19
 Évolution du HTML
 1991–1993 : en l’absence de standard, ce sont les navigateurs Web (Mosaic,
Netscape) qui « décident » de l’évolution de HTML.
 Ajouts notables des navigateurs :
 Les images (balise <img>)  Mosaic.
 Diverses balises qui seront « supprimées » par la suite (texte clignotant
<BLINK>, centré <CENTER>, etc.)  Netscape.

<TITLE> Le titre de mon document </TITLE>

Un paragraphe dans mon document.
<P>
<BLINK> Du texte clignotant </BLINK>
<CENTER> Du texte centré </CENTER >
<IMG SRC= " mon_image.gif" >

(Code évidemment non conforme à la norme HTML actuelle.)

20
 Évolution du HTML
 1995 : HTML 2.0. la première spécification par l’IETF.

 Internet Engineering Task Force, qui élabore les standards d’Internet.

 1996 : L’IETF a cédé la gestion de HTML au W3C (World Wide Web

Consortium), une organisation qui regroupe des entreprises et des
institutions afin de définir les standards du Web.

 1997 : HTML 3.2.

 1999 : HTML 4.01.

 2014 : le standard HTML5.

21
 Un exemple minimal (syntaxe conforme à HTML5)
Obligatoire: indique au navigateur qu'il doit
<!DOCTYPE html> interpréter le document comme du HTML5.

<html lang= "f r " >

<head>
<meta charset= "u t f - 8" / >
< t i t l e >Le t i t r e de mon document < / t i t l e >
</head>

<body>
<p>Ce document est constitué d'une seule phrase. </p >
</body>
</html>
22
 Un exemple minimal (syntaxe conforme à HTML5)

<!DOCTYPE html>
C'est la racine de l'arborescence HTML.
<html lang= "f r " >
<head>
<meta charset= "u t f - 8" / >
Contient
< t i t l e >Le t i t r e de mon document < / t i t l e > obligatoirement deux
fils head et body.
</head>

<body>
<p>Ce document est constitué d'une seule phrase. </p >
</body>
</html>
23
 Un exemple minimal (syntaxe conforme à HTML5)

<!DOCTYPE html>
<html lang= "f r " >
<head> recommandé pour indiquer la langue
principale du document.
<meta charset= "u t f - 8" / >
< t i t l e >Le t i t r e de mon document < / t i t l e >
</head>

<body>
<p>Ce document est constitué d'une seule phrase. </p >
</body>
</html>
24
 Un exemple minimal (syntaxe conforme à HTML5)

<!DOCTYPE html>
<html lang= "f r " > recommandé pour s'assurer que la
page est bien encodée en UTF-8.
<head>
<meta charset= "u t f - 8" / >
< t i t l e >Le t i t r e de mon document < / t i t l e >
</head>

<body>
<p>Ce document est constitué d'une seule phrase. </p >
</body>
</html>
25
 Un exemple minimal (syntaxe conforme à HTML5)

<!DOCTYPE html> Obligatoire : définit le titre de la page

<html lang= "f r " > affiché dans l'onglet du navigateur.
Seule balise obligatoire de l’en-tête.
<head>
<meta charset= "u t f - 8" / >
< t i t l e >Le t i t r e de mon document < / t i t l e >
</head>

<body>
<p>Ce document est constitué d'une seule phrase. </p >
</body>
</html>
26
 Respect du standard
 L’intérêt :

 Interopérabilité: fonctionner correctement sur différents systèmes,

appareils, etc.

 Compatibilité: s’afficher et fonctionner correctement sur plusieurs

navigateurs sans erreurs d’affichage ou de comportement.

 Meilleur référencement: Google favoriserait le référencement des sites

Web dont le code HTML est conforme aux standards.

27
 Validation du code HTML
 À la différence de langages de programmation, un non-respect de la
syntaxe de HTML n’empêchera pas l’affichage sur le navigateur.

 Plus généralement, le navigateur affichera quelque chose (de non

spécifié) ou n’affichera rien, mais n’affichera jamais d’erreur.

 Il faut impérativement valider son code HTML avant de le publier.

 Un outil indispensable : le validateur du W3C et de la fondation Mozilla.

 [Link]

28
Validateur du W3C

29
Validateur du W3C

30
Validateur du W3C

31
Validateur du W3C

32
Validateur du W3C

33
 Évolution du Web
 Web 1.0 : Le Web Statique

 Le Web 1.0 a commencé sous sa forme la plus basique.

 Le HTML est apparu ainsi que les premiers navigateurs tels qu'Internet
Explorer, Netscape, etc.
 Le web était simplement consultatif, seulement en lecture.

 Les utilisateurs n’ont pas la possibilité d’ajouter de nouveaux éléments

par eux-mêmes.

34
 Évolution du Web
 Web 1.5 : Le Web Dynamique

 La génération 1.5 se distingue de la 1.0 par son contenu dynamique,

où les pages web sont construites dynamiquement à partir d'une ou
plusieurs bases de données.

PHP : 1995
JAVA : 1996

35
 Évolution du Web

 Web 2.0 : Le Web Social

 L’expression Web 2.0 désigne l’ensemble des techniques et des

fonctionnalités qui ont permis de rendre les contributions sur internet plus
simples et plus interactives.

 En 2000, c’est au tour de Wikipedia de faire son apparition. 20000 articles

sont publiés dès la première année.

 En 2003 LinkedIn, 2004 Facebook, 2005 Youtube…

36
 Évolution du Web

 Web 3.0 : Le Web Sémantique

 Il permet aux sites web et aux applications de traiter l’information de manière

intelligente, à la manière d’un être humain, grâce à des technologies telles
que l’apprentissage automatique, le Big Data, …

 Il analyse le comportement des utilisateurs et suggère les informations

en conséquence, plutôt que d'insérer des mots-clés.

 Il fournit des informations personnalisées à chaque utilisateur.

 Web 4.0 : Le Web intelligent

 Agir et interagir en temps réel.

37
3ème Année Ingénieur Informatique

Programmation WEB

Introduction au langage HTML

Badr Benmammar
[Link]@[Link]
 Plan

 Introduction au langage HTML

 Types de balises en HTML

 Texte Gras, italique, souligné

 Texte en indice, en exposant, marqué

 Codage des caractères

 Titres

 Liens hypertextes

39
 Types de balises en HTML
 HTML repose sur la notion de balises.

 Deux types de balises :

 Les balises qui sont ouvertes puis fermées, et encadrent du contenu.
 Exemple :
 <b>Un peu de gras</b>

40
 Types de balises en HTML
 HTML repose sur la notion de balises.

 Deux types de balises :

 Les balises qui sont ouvertes puis fermées, et encadrent du contenu.
 Exemple :
 <b>Un peu de gras</b>

 Les balises qui s’ouvrent et se ferment en même temps.

 Exemple :
 <img src="[Link]" alt="Description de l'image" width="500"
height="300">
 <img> est une balise auto-fermante, ce qui signifie qu’elle n’a pas de
balise fermante correspondante (</img>).

41
 Balises et attributs

 Certaines balises peuvent posséder des attributs.

 Exemples :
 <meta charset= "utf-8" />

 <img src= "mon_image.png" alt= "Une image" />

 <p style= "text-align:right">

Du texte aligné à droite
</p>

42
 Balises et hiérarchie
 Les balises sont structurées de façon hiérarchique.
 Chaque balise hérite des propriétés de la balise de niveau supérieur.

<p> <b> Ce texte est seulement en gras <i>et

cette partie est en gras et en italique </i> </b>.
</p>

43
 Balises et hiérarchie
 Les balises sont structurées de façon hiérarchique.
 Chaque balise hérite des propriétés de la balise de niveau supérieur.

<p> <b> Ce texte est seulement en gras <i>et

cette partie est en gras et en italique </i> </b>.
</p>

 Il est impératif de fermer les balises dans l’ordre inverse duquel

on les a ouvertes.

 Le langage est insensible à la casse :

 <P>Ce texte est <b> seulement en gras </B >. </p>

44
 Description, mots-clés, auteur

 Syntaxe : Mots-clés pertinents

<meta name= "description" content= "Introduction aux technologies Web " / >

<meta name= "keywords" content= "HTML, CSS" / >

<meta name= "author" content= "Benmammar" / >

 Optimisation des métadonnées : remplir les balises meta afin d’améliorer la

compréhension et le référencement de vos pages par les moteurs de recherche.

 Le SEO (Search Engine Optimization), ou le référencement pour les moteurs de

recherche, désigne l'ensemble des techniques et pratiques utilisées pour
améliorer la visibilité d'un site web dans les résultats des moteurs de recherche
(comme Google).

45
 Description, mots-clés, auteur

 Syntaxe :

<meta name= "description" content= "Introduction aux technologies Web " / >

<meta name= "keywords" content= "HTML, CSS" / >

<meta name= "author" content= "Benmammar" / >

<meta http-equiv="refresh" content=“20">

Rafraichissement de la page toutes les 20 secondes.

<meta http-equiv="refresh" content=“10 ; url=[Link]

Redirection vers la page indiquée après 10 secondes.

46
 Texte Gras, italique, souligné

 Syntaxe :

 <b>...</b> (bold) : gras

 <strong>...</strong> : emphase forte (souvent affiché en gras)

 <i>...</i> (italique) : italique

 <em>...</em> (emphasis) : emphase (s’affiche en général comme

italique)

 <u>...</u> (underline) : souligné

47
 Texte en indice, en exposant, marqué
<p>La variable X_i</p>
<p>3^ème année Ingénieur</p>
<p><mark>Remarque:</mark></p>
<p><mark style="background-color: red; color: blue;" >Texte surligné
rouge</mark></p>

48
 Codage des caractères : échappement en HTML
 Dans le code HTML, le caractère < par exemple est utilisé pour ouvrir
une balise. Si vous voulez afficher < dans le texte sans qu'il soit
interprété comme une balise, vous devez l'échapper en utilisant &lt;
 Utiliser un codage du caractère :
 < : &lt;
 > : &gt;
 & : &amp;
 " : &quot;
 Voir :
 [Link]

 Exemple :
 Le couple &quot;X &amp; Y&quot; &gt; Z

49
 Les espaces insécables
 Les espaces insécables s’affichent en utilisant &nbsp;
 Pour « non-breakable blank space »

 Usage en français :
 Après «

 Avant ? ! ; : »

 «&nbsp;Comment allez-vous&nbsp;?&nbsp;», demanda-t-elle.

 « Comment allez-vous ? », demanda-t-elle.

 <p>Le prix est de 100&nbsp;€.</p>

 Le prix est de 100 €.

 &nbsp; empêche que "100" et "€" soient séparés sur deux lignes.

50
 Les titres

 Syntaxe :
 <h1> : titre du premier niveau

 <h2> : titre du deuxième niveau

 <h3> : titre du troisième niveau

 ...

 <h6> : titre du sixième niveau

51
 Les titres

 Syntaxe :
 <h1> : titre du premier niveau

 <h2> : titre du deuxième niveau Structurer le contenu pour

aider les moteurs de
recherche à comprendre la
 <h3> : titre du troisième niveau hiérarchie et l’importance des
informations  SEO (Search
Engine Optimization)

 ...

 <h6> : titre du sixième niveau

52
 Les titres : exemple
<body>
<h1>PARTIE I:</h1>
<h2>Chapitre 1:</h2>
<h3>Section 1</h3>
<h4>Sous-section 1</h4>
<h4>Sous-section 2</h4>
<h3>Section 2</h3>
<h4>Sous-section 1</h4>
<h2>Chapitre 2:</h2>
<h3>Section 1</h3>
<h1>PARTIE II:</h1>
</body>

53
 Les liens hypertextes

 Syntaxe :

 <a href="LA_CIBLE_DU_LIEN">Le texte à afficher</a>

 Affiche :

54
 Les liens hypertextes internes

 Effectuer un lien vers une autre partie du même document.

 Syntaxe pour définir l’endroit dans le document :

 À l’aide de id :
 <h2 id="p1">Mes cours préférés</h2>

 Syntaxe pour définir le lien:

 <a href="#p1">Remonter aux cours préférés</a>

 Affiche :

55
 Les liens hypertextes internes
<p id="p1">
<a href="#p10">Aller au paragraphe 10</a>
</p>
...
...
...
...
...
...
<p id="p10">
<a href="#p1">Aller au premier paragraphe</a>
</p>

56
 Les liens hypertextes internes
<p id="p1">
<a href="#p10">Aller au paragraphe 10</a>
</p>
...
...
...
...
...
...
<p id="p10">
<a href="#p1">Aller au premier paragraphe</a>
</p>

<p> Le symbole # seul dans l'attribut href

<a href="#">Aller au début de la page</a> agit comme une ancre qui renvoie
</p> au début de la page actuelle.
57
 Les liens hypertextes externes
 Deux types de liens :

 Liens absolus :
 <a href= "[Link] > Texte </a>

 Liens relatifs :
 <a href= "[Link]" > Texte </a>
 Pointe sur la page [Link] dans le répertoire courant (sans http:// ou
https:// et sans le nom de domaine).

58
 Les liens hypertextes externes
<p>
<a href="[Link]#p5">Aller au paragraphe 5 de la page [Link]</a>
</p>

 Le lien mène au fichier [Link] et tente de diriger vers une section

spécifique identifiée par id="p5" dans ce fichier. Pour que ce lien
fonctionne, [Link] doit contenir un élément (par exemple un
paragraphe, un titre, etc.) avec id="p5".

59
 Les liens hypertextes externes
<p>
<a href="[Link]#p5">Aller au paragraphe 5 de la page [Link]</a>
</p>

 Le lien mène au fichier [Link] et tente de diriger vers une section

spécifique identifiée par id="p5" dans ce fichier. Pour que ce lien
fonctionne, [Link] doit contenir un élément (par exemple un
paragraphe, un titre, etc.) avec id="p5".

<p>
<a href="[Link]" target="_blank">Lien</a>
</p>

 Cliquer sur ce lien ouvrira [Link] dans un nouvel onglet ou une

nouvelle fenêtre du navigateur.

60