2ème année Licence Informatique (Cours n° 01)

Université Abou-Bekr Belkaïd - Tlemcen

2023 / 2024

Dr. Mahfoud Houari

mahfoud.houari@gmail.com
Introduction générale
Objectifs du cours (1/2)

Globalement:
Pouvoir créer une application Web Client/Serveur
Et pour cela:
1. Comprendre le principe de fonctionnement du Web.
2. Modularité d’une application Web: Structure, Design, Scripts, les données, les
algorithmes, et de l’IA.
3. Maîtriser le minimum de langages de la programmation Web (Front-office, Back-office).
4. Mettre en relation des clients avec un serveur pour réaliser un besoin donné.
5. Protéger son application Web des attaques classiques.

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

Introduction générale
Objectifs du cours (2/2)
Ce que vous apprendrez dans l’ordre:
1. Créer des pages Web statiques (textes, images, formulaires, multimédia,…).
2. Décorer vos pages Web (police, couleurs, menus contextuels, animations,…).
3. Rendre vos pages Web interactives (boutons, traitement automatique des
informations saisies, évènements, jeux,…).
4. Créer des pages Web dynamiques:
▪ Mettre en place un serveur Web.
▪ Créer une BDD MySQL (via un script ou GUI) au niveau du serveur.
▪ Créer des scripts côté serveur.
▪ Associer une BDD à votre page Web pour la rendre dynamique.
5. Assurer un niveau de sécurité minimal à votre page Web.
6. Divers: envoie de mails, cookies, sessions, géolocalisation, jeux,…

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

Introduction générale
Généralités

Généralités

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

Introduction générale
Généralités
Architecture Client/Serveur:
• Mode de communication basé sur Internet et une interface Web.
• Composée de plusieurs Clients et au moins un seul Serveur.
• Le serveur détient les données.
• Le client demande l’accès (des traitements liés) à ces données.
• Ces ressources peuvent être statiques ou dynamiques.

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

Introduction générale
Généralités
Internet ou Web ?
• Internet est un réseau beaucoup plus physique qui relie plusieurs machines à
travers le protocole IP.
• Le Web, la toile, ou WWW est un système basé sur le réseau Internet
permettant de transférer des documents à travers le protocole HTTP (ou
HTTPS).

Page et Site Web:

• Page Web est un document textuel structuré à travers le langage HTML et
qui est partagé sur le Web.
• Site Web est un ensemble de pages Web, reliées entre elles à travers des
hyperliens, pouvant se trouver sur une ou plusieurs machines.
URL:
Uniform Ressource Locator est une chaîne de caractères utilisée pour identifier
d’une façon unique une ressources sur le Web (pages, Image, Vidéo,…).
Développement d’applications Web L2 – Info mahfoud.houari@gmail.com
Introduction générale
Généralités
Site web ou Application Web ?
Site Web
Peut être statique ou dynamique
Fournit des données complètes aux
utilisateurs sans interaction possible
Contenu statique ou modifié par le
propriétaire.
Interaction limitée pour les internautes.
Exemples: site d’un journal, site de météo.
Facile à développer
Développement d’applications Web
Application Web
Est obligatoirement dynamique
Permet aux utilisateurs d’interagir avec les
données en effectuant des tâches
Contenu dynamique changé par les
utilisateurs
Interaction étendue pour les internautes.
Exemples: Facebook, Twitter, Instagram
Développement plus complexe nécessitant
plusieurs langages et technologies
L2 – Info mahfoud.houari@gmail.com
Introduction générale
Généralités

Récapitulons….

• Le Web est un ensemble de sites Web et applications Web.

• Un site Web fournit un contenu mais une application Web fournit des tâches.
• Une application Web étend un site Web par des rôles utilisateurs.
• Chaque ressources Web (page, image,….) est identifiée par une adresse Web
(URL).
• Une ressources Web est stockée au sein d’un serveur Web et transférée au
client Web via le protocole HTTP.
• Le contenu du Web est souvent dynamique.

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

Introduction générale
Évolution du Web (1/3)

Début du Web statique (Web 1.0)

• Inventé par Tim Berners-Lee en 1989.
• Les pages étaient statiques et ne variaient pas.

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

Introduction générale
Évolution du Web (2/3)

Vers un Web dynamique (Web 1.5)

• Apparition des langages de scripts côté serveur (PHP, Perl, Python,…).
• Interaction avec des bases de données.
• Le contenu de la page est généré dynamiquement selon le profil du client.

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

Introduction générale
Évolution du Web (3/3)

Le Web 2.0 (Web social)

• Offre la possibilité aux utilisateurs pour contribuer à la création et l’échange du
contenu Web.
• L’utilisateur devient un agent actif sur le Web.
• Réseaux sociaux, blogs, forum,…

Le Web 3.0 (Web sémantique)

• Les informations sont devenues incertaines, incohérentes, trompeuses, et
redondante (côté négatif du Web social).
• Faire appel aux techniques de l’IA pour non seulement stocker les données
mais aussi les comprendre.

• Exemple: Recommandations pour un touriste déclenchée après la prise d’une

photo.

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

Introduction générale
Évolution du Web (3/3)

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

Introduction générale
Technologies et Outils à utiliser
Technologies: Outils:
Éditeurs:

Client HTTP:

Serveur HTTP:

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

Introduction générale
Plan du cours

1 Chapitre 1: HTML

2 Chapitre 2: CSS

3 Chapitre 3: JavaScript

4 Chapitre 4: PHP et MySQL

5 Divers

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5
Plan du chapitre

1 Introduction

2 Les bases de HTML 5

3 Les tableaux

4 Les formulaires

5 Divers: quelques fonctionnalités avancées

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5 – Introduction
Langage de balisage
• HTML 5.3: Est la dernière version du langage HTML.
• HTML (HyperText Markup Language): Langage de balisage utilisé pour
écrire et structurer des documents hypertextes.
❖ Notion de balisage
❖ Notion d’hypertexte
• Une balise: est une unité syntaxique qui précise le début/fin d’une
partie du texte ou de la page.
Exemple
est le titre du document ?
Page d’accueil <title>Page d’accueil</title>
est un paragraphe ?
Soyez les bienvenus <p>Soyez les bienvenus</p>
est un autre paragraphe ?
Merci de votre visite <p>Merci de votre visite</p>

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5 – Introduction
Langage de balisage
• HTML 5.3: Est la dernière version du langage HTML.
• HTML (HyperText Markup Language): Langage de balisage utilisé pour
écrire et structurer des documents hypertextes.
❖ Notion de balisage
❖ Notion d’hypertexte
• Une balise: est une unité syntaxique qui précise le début/fin d’une
partie du texte ou de la page.
• Les balises sont utilisées par le navigateur pour distinguer entre les
différentes parties du document HTML, ainsi que pour appliquer un
style par défaut à chaque type de balise.

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5 – Introduction
Élément HTML (1/2)

• Élément HTML: est une partie du document délimitée par des balises.
Exemple: élément HTML paragraphe
<p> Ceci est un paragraphe </p>

balise d’ouverture balise de fermeture

Exemple: élément HTML titre

<title>Ceci est le titre du document</title>

• Élément HTML sans contenu: Défini par une balise auto-fermante.

Exemple:
<br> élément HTML effectuant un saut de ligne
<hr> élément HTML traçant une ligne horizontale
<img> élément HTML pour afficher une image
Développement d’applications Web L2 – Info mahfoud.houari@gmail.com
HTML 5 – Introduction
Élément HTML (2/2)
• Attribut: est une information auxiliaire définissant une propriété de
l’élément HTML.

Exemple:

<p id="1"> Ceci est le premier paragraphe </p>

<p id="2"> Ceci est le deuxième paragraphe </p>

<img src= "Accueil.PNG">

<p id="3" hidden > Ceci est le troisième paragraphe </p>

Attribut sans valeur

(booléen)
Développement d’applications Web L2 – Info mahfoud.houari@gmail.com
HTML 5 – Introduction
Écriture du code HTML
• Chaque élément HTML avec contenu doit avoir une balise d’ouverture et
une balise de fermeture.
• Les balises doivent être bien imbriquées: première ouverte – dernière fermée
<ol><li>Item</ol></li> <ol><li>Item</li></ol>

• Le langage est insensible à la casse :

<p>Paragraphe</P>

• Les attributs doivent être séparés par des espaces et il est recommandé de
placer leur valeur entre guillemets.
• Il est recommandé de remplacer les caractères spéciaux par leur code HTML.
&gt; > &amp; &
&nbsp; espace
&lt; < &quot; "

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5 – Introduction
Écriture du code HTML
• Chaque élément HTML avec contenu doit avoir une balise d’ouverture et
une balise de fermeture.
• Les balises doivent être bien imbriquées: première ouverte – dernière fermée
<ol><li>Item</ol></li> <ol><li>Item</li></ol>

• Le langage est insensible à la casse :

<p>Paragraphe</P>

• Les attributs doivent être séparés par des espaces et il est recommandé de
placer leur valeur entre guillemets.
• Il est recommandé de remplacer les caractères spéciaux par leur code HTML.

<p>35 < 40</p> <p>35 &lt; 40</pi>

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5 – Introduction
Écriture du code HTML
• Codes HTML des caractères spéciaux les plus utilisés:
Code Caractère Code Caractère Code Caractère
HTML HTML HTML
&nbsp; espace &ldquo; “ &frac12; ½
&amp; & &rdquo; ” &frac13; ⅓
&lt; < &lsquo; ‘ &frac23; ⅔
&le; ≤ &rsquo; ’ &frac14; ¼
&gt; > &larr; ← &frac34; ¾
&ge; ≥ &rarr; → &pi; π
&isin; ∈ &uarr; ↑ &Sigma; Σ
&notin; ∉ &darr; ↓ &ne; ≠
&sube; ⊆ &forall; ∀ &divide; ÷
&nsube; ⊈ &exist; ∃ &radic; √
&euro; € &nexist; ∄ &copy; ©

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5 – Introduction
Structure d’une page HTML 5

<!DOCTYPE html> Préambule: Précise qu’il s’agit d’un document

HTML
<!-- ceci est la structure minimale d’une page --> Commentaire (Optionnel)

<html> La racine du document: contient

obligatoirement deux fils head et body
<head>
<title>Titre de la page</title>
<meta charset="UTF-8">

</head>

<body>
….

</body>

</html>

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5 – Introduction
Structure d’une page HTML 5

<!DOCTYPE html>

<!-- ceci est la structure minimale d’une page -->

<html lang="fr"> • Attribut lang précise la langue utilisée pour

éditer le contenu de la page (fr, en, ar,…)
<head>
<title>Titre de la page</title>
<meta charset="UTF-8">

</head>

<body dir="ltr"> • Attribut dir précise le sens de lecture ltr

…. (gauche à droite) ou rtl (droite à gauche)

</body>

</html>

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5 – Introduction
Structure d’une page HTML 5

<!DOCTYPE html>

<!-- ceci est la structure minimale d’une page -->

<html lang="fr">

<head>
<title>Titre de la page</title>
L’en-tête: Fournit des renseignements sur
<meta charset="UTF-8"> la page
</head>

<body dir="ltr">
…. Le corps: représente le contenu de la page
</body> (texte, image, tableaux,…)

</html>

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5 – Introduction
Structure d’une page HTML 5

<!DOCTYPE html>

<!-- commentaire -->

<html lang="fr">

<head>
<title>Titre de la page</title> Le titre de la page (Obligatoire)
<meta charset="UTF-8">

</head>
Encodage de caractères: ça peut être aussi
<body dir="ltr"> UTF-8, ISO-8859-1, ISO-8859-15
….

</body>

</html>

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5 – Introduction
Structure d’une page HTML 5

Exemple: Page HTML 5 minimale

<!DOCTYPE html>
<html>
<head>
<title>Page HTML 5 minimale</title>
<meta charset="UTF-8">
</head>
<body dir="rtl">
<p>Ceci est un paragraphe écrit en français mais affiché
incorrectement de droite à gauche</p>
</body>
</html>

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5 – Introduction
Structure d’une page HTML 5

Exemple: Page HTML 5 minimale

<!DOCTYPE html>

<html>

<head>
<title>Page HTML 5 minimale</title>

</head>

<body>
</body>

</html>

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5 – Introduction
Corps de la page

Paragraphe

<p title="Description 1" >Premier paragraphe</p>

<p title="Description 2" >Deuxième paragraphe</p>

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5 – Introduction
Corps de la page

Texte en gras
<b>Ceci est un texte en gras</b>

Texte en italique:
<i>Ceci est un texte en italique</i>

Texte en petite taille:

<p>Ceci est un texte <small>petit</small>,</p>

Texte souligné:
<p><u>Texte souligné</u></p>

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5 – Introduction
Corps de la page

Texte en indice
<p>La variable X_i.</p>

Texte en exposant:
<p>2^ème année Licence</p>

Texte marqué:
<p><mark>Remarque:</mark></p>

Alignement du texte (attribut align):

<p align="center">Paragraphe avec texte centré</p>

Remarque: L’attribut align peut avoir les valeurs center, right, ou left.
Développement d’applications Web L2 – Info mahfoud.houari@gmail.com
HTML 5
Plan du chapitre

1 Introduction

2 Les bases de HTML 5

3 Les tableaux

4 Les formulaires

5 Divers: quelques fonctionnalités avancées

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5 – Les bases de HTML 5
Les listes (1/4)
Listes non ordonnées (à puces): Eléments HTML ul +li
Exemple:

<p>
<b>Plan du cours:</b>
<br>
<ul>
<li>Introduction au Web</li>
<li>HTML 5</li>
<li>CSS 3</li>
<li>JavaScript</li>
<li>...</li>
</ul>
</p>

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5 – Les bases de HTML 5
Les listes (2/4)
Listes ordonnées (numérotées): Eléments HTML ol +li
Exemple:

<p>
<b>Plan du cours:</b>
<br>
<ol>
<li>Introduction au Web</li>
<li>HTML 5</li>
<li>CSS 3</li>
<li>JavaScript</li>
<li>...</li>
</ol>
</p>

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5 – Les bases de HTML 5
Les listes (3/4)

Paramètres d’une liste ordonnée (numérotée):

Le type de la numérotation: Attribut type
• type = "1" : 1, 2, 3,…(Numérotation décimale)
• type = "a" : a, b, c,…(Numérotation alphabétique minuscule)
• type = "A" : A, B, C,…(Numérotation alphabétique majuscule)
• type = "i" : i, ii, iii, iv,…(Numérotation en chiffres romains minuscules)
• type = "I" : I, II,III, IV,…(Numérotation en chiffres romains majuscules)

La valeur initiale de la numérotation: Attribut start

Une numérotation descendante: Attribut booléen reversed

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5 – Les bases de HTML 5
Les listes (3/4)

Paramètres d’une liste ordonnées (numérotée):

Exemple:

<p>
<b>Plan du cours:</b>
<br>
<ol type="I" start="3">
<li>Introduction au Web</li>
<li>HTML 5</li>
<li>CSS 3</li>
<li>JavaScript</li>
</ol>
</p>

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5 – Les bases de HTML 5
Les listes (4/4)
Listes de définitions: Eléments HTML dl +dt +dd
• dl : La liste de définitions
• dt : Le terme à définir
• dd : La définition du terme
Exemple:
<p>
<b>Quelques définitions:</b>
<br>
<dl>
<dt>HTML</dt>
<dd>Langage de création de pages Web.</dd>
<dt>CSS</dt>
<dd>Langage de décoration de pages Web.</dd>
</dl>
</p>

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com

HTML 5 – Les bases de HTML 5
Les listes (4/4)
Listes de définitions: Eléments HTML dl +dt +dd
• dl : La liste de définitions
• dt : Le terme à définir
• dd : La définition du terme
Exemple:
<p>
<b>Quelques définitions:</b>
<br>
<dl>
<dt>HTML</dt>
<dd>Langage de création de pages Web.</dd>
<dt>CSS</dt>
<dd>Langage de décoration de pages Web.</dd>
</dl>
</p>

Développement d’applications Web L2 – Info mahfoud.houari@gmail.com