Programmation Web: Réalisé Par: Pr. Mahraz Med Adnane ANNÉE UNIVERSITAIRE:2020/2021

Université Sidi Mohamed Ben Abdllah
Faculté des sciences Dhar El Mahraz
Programmation Web
RÉALISÉ PAR: PR. MAHRAZ MED ADNANE
ANNÉE UNIVERSITAIRE:2020/2021
Bonjour
MAHRAZ Mohamed Adnane
Professeur Habilité à la faculté des sciences Dhar El Mahraz
Professeur à l’Institut supérieur d'ingénierie et des affaires (ISGA)

Professeur Habilité à la faculté des sciences Dhar El
Mahraz
Pour me contacter:
Téléphone: 0676596104
Pour me contacter:
Email: adnane_1@yahoo.fr
Téléphone: 0676596104
Email: adnane_1@yahoo.fr
mohamed.mahraz@usmba.ac.ma
Brève
introduction sur
le Web
Quelques technologies du Web
Le Web: est un truc de surfeurs
Le Web: est un truc de surfeurs
Liens hypertextes
Le Web est une toile d’araignée géante
Le Web et Internet
Le Web estWeb
une seule partie d’Internet
≠ Internet
E T Forums
R N
T E
IN
E-mail FTP
Telnet
Web
D’ARPAnet au Web
e r
e f
r ne r s - Leoebert Kahn
t cB
vTinim R
LIN SON
R A Y TO M 1991:
1983: Web (HTML): « World
1972: TCP/IP Wide Web : Proposition pour un
projet hypertexte » 3
E-mails (Naissance d’Internet)

1969:
ARPAnet (Advanced Research Project Agency Network)
L’Internet a été crée avant le Web!!!
Evolution du Web
Le World Wide Web Consortium,
abrégé par le sigle W3C, est
un organisme de normalisation fondé en
octobre 1994 chargé de promouvoir la
compatibilité des technologies du World
Wide Web .
Le W3C est supervisé par son
fondateur Tim Berners-Lee, l'inventeur
du Web et le principal créateur du
système d'adressage URL, du
protocole HTTP, et du langage HTML.
. w 3 . o r g /
validator
Clients et serveur
Serveur Web (HTTP):
• Apache
Serveur • IIS
• Nginx
• Lighttpd
Clients
Site Web statique: Les langages du Web
Les langages clients:
Quelques navigateurs Web:

HTTP/1.1 200 OK
Date: Tue, 22 Jun 2015 13:18:15 GMT
Site Web statique
Server: Apache/1.3.26 (Unix) Debian GNU/Linux PHP/4.1.2 mod_ssl/2.8.9
GETDAV/1.0.3
OpenSSL/0.9.6g /page1.html HTTP/1.1Tue, 22 Jun 2014 13:15:43 GMT
Last-Modified:
ETag: "63f3d-8e-40d830ff" Accept-Ranges: bytes Content-Length: 142 Keep-
Host: www.e-monsite.com
Alive: timeout=15, max=2000
Connection: Connection: Keep-Alive Content-Type: text/html
Keep-Alive
<html> User-Agent: Mozilla/5.0 (compatible; Konqueror/3.1; Linux; fr)
<body>Referer: http://www.e-monsite.com 2. Génération de la page Web
<h1> Pragma: no-cache
page1 html </h1>
<p> contenant uneno-cache
Cache-control: image <br> et une seule <img SERVEUR
Accept: text/html, image/jpeg, image/png, text/*, image/*, */*
src="balle.gif"> </p> WEB
Accept-Encoding: x-gzip, x-deflate, gzip, deflate, identity Accept-
</body>Charset: iso-8859-1, utf-8;q=0.5, *;q=0.5 Accept-Language: fr, en
<html>
Client
(navigateur Web) 1. Envoie d’une requête HTTP
3. Réponse de la requête HTTP

HTML, CSS JS
http://www.e-monsite.com/page1.html
Site Web dynamique: Les langages du Web
Les langages serveur:
◦ PHP
◦ JAVA
◦ Python
◦ Ruby
◦ C#
Site Web dynamique
2- Génération de la
page Web
Serveur
http://www.phpdebutant.org/annuaire7.php
Web
Base de données
Client 1- Demande de la page 3- Envoie de la requête
Web SQL
6- Envoie de la page 4- Renvoie des donnés

HTML, CSS, JS au serveur Web
5- récupère les données

et les écrire dans la
page Web
HTML & CSS
Comment est crée un site
Web?
Code HTML & CSS
Traduction par l’ordinateur
Résultat visible par le navigateur

Langages Web
Fond de la page Web Forme de la page Web
Evolution du langage HTML
HTML1 HTML2 HTML3 HTML4 HTM

Evolution du langage CSS
CSS1 CSS2 CSS3

Html5 est un langage de
balises
Les balises, aussi appelées éléments, sont des commandes à l’intention du
navigateur et saisies entre des signes inférieur à (<) et supérieur à (>). Ainsi une
balise s’écrit <balise>
Exemples
<b> b pour bold ce qui signifie gras

<i> i pour italic ce qui signifie italique
<p> p pour paragraph ce qui signifie paragraphe
<div> div pour division ce qui signifie division
<table> table signifie tableau
<form> form signifie formulaire
<img /> img pour image
HTML: Balises et leurs
attributs
>balise< >/balise<
<p> Ceci est un paragraphe </p>
attributs
Les balises paires:
<titre> Titre de mon site Web </titre>

Les balises orphelines:
Elles servent le plus souvent à insérer un élément à un endroit précis
(par exemple une image). Il n'est pas nécessaire de délimiter le début et
la fin de l'image.
<img/> <br/>
attributs
Les attributs:
Les attributs sont les options des balises. Ils viennent les
compléter pour donner des informations supplémentaires. L'attribut se
place après le nom de la balise ouvrante et a le plus souvent une valeur,
comme ceci :
<img src=" photo.jpg" alt="logo"/>
<a href="/mespages/page1.html">cliquez ici</a>

Structure de base d'une page
en HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
</body>
</html>
Structure de base d'une page
HTML5
Les balises doivent être fermées dans le sens inverse de leur

ouverture.
 <html><body></body></html> : correct. Une balise qui est ouverte à

l'intérieur d'une autre doit aussi être fermée à l'intérieur.
 <html><body></html></body> : incorrect, les balises s'entremêlent.
Doctype et son importance
Tout document Html doit commencer par un doctype. Le Html5 propose
un doctype unique et simplifié.
HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD

4 HTML 4.01 Transitional//EN" >
HTML <!DOCTYPE html>
5
Balise Html
• La balise <html> indique au navigateur qu’il s’agit d’un document Html.
• La balise <html> est l’élément le plus haut ou l’élément racine du
document.
<!DOCTYPE html>
<html lang="fr">
…
</html>
La balise <Html> peut prendre comme attribut lang="fr" qui spécifie
que le document est en langue française. Cette information est fort prisée
par les moteurs de recherche comme Google ainsi que par les synthèses
vocales utilisées par les personnes malvoyantes.
En-tête du document
Dans cet en-tête du document se situe toute une série d’informations:
Le titre du document. Soit la balise <title> … <title>
 Des déclarations ou des appels de feuilles de style CSS.
 Des fonctions ou des liens vers des fichiers JavaScript.
 Des informations à l’intention des moteurs de recherche pour le
référencement de la page.
 Des informations à l’intention des navigateurs.
 Des balises méta qui reprendront quant à elles l’encodage, la
description de la page, les mots-clés associés à la page, le nom de
l’auteur, des mentions de copyright, etc.
Encodage (charset) du
document
Le jeu de caractères désigne la façon dont les caractères d’un
alphabet donné sont convertis en octets dans un fichier informatique
(et vice-versa).
Certaines méthodes d’encodage sont spécifiques à un

environnement informatique dans une langue ou un alphabet donné,
d’autres sont multiplateformes et multilingues.
Exemple d’encodage :
ASCII, windows-1252, ISO8859-1, ISO-8859-15, UTF-8, etc.

Document Html5 minimal
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Html5</title>
<meta charset="utf-8">
</head>
<body>
…………………………………………………………
</body>
</html>
Arborescence d’une page
HTML
Métadonnées de
HTML
la page HTML
Head
<meta>
<title>
Titre de la page
<script >
Intégration du code
<style>
JavaScript
<link>
Body Feuilles de style CSS

Corps du document
Les balises <body> … </body> déterminent ce que l’on appelle le corps
du document.
C’est entre ces balises que prendra place le code Html5 qui sera utilisé
pour élaborer le contenu de la page.
C’est cette partie du document Html qui sera affichée dans la fenêtre du
navigateur et donc visible par l’internaute.
Document Html5 minimal
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
Un premier document Html5
</body>
</html>
Heading, Paragraph, Break
L’élément p définit un paragraphe.
L’élément br crée un retour à la ligne.
Les éléments h1, h2,… jusqu’à h6 définissent des titres (par

ordre d’importance).
Strong, Emphasis, Mark
L’élément strong est utilisé pour définir un contenu comme
important.
L’élément em est utilisé pour définir un contenu comme

assez important.
L’élément mark est utilisé pour faire ressortir du contenu.

Liste ordonnées et non ordonnées
Pour créer une liste non-ordonnée, on utilise les éléments ul
(pour la liste) et li (pour les éléments de la liste).
Pour créer une liste ordonnée, on utilise ol et li.

Liste imbriquées
Vous pouvez très simplement imbriquer des listes en HTML :
<ul>
<li> Elément 1 </li>
<li> Elément 2
<ol>
<li> Elément 1 ol </li>
• Elément 1
<li> Elément 2 ol </li>• Elément 2
</ol> 1. Elément 1 ol
2. Elément 2 ol
</li>
</ul>
Liens internes et externes
Liens internes = entre 2 pages d’un même site.
Liens externes = d’un site vers un autre site.
Pour créer des liens, on utilise l’élément a avec son attribut href
(Hypertext reference).
Liens internes et externes
Pour créer des liens internes, on utilise un chemin relatif. 3 cas :
◦ Même dossier : href = « page2.html »
◦ Sous-dossier : href = « sous_dossier/page2.html »
◦ Dossier parent : href=« ../page2.html »
Pour des liens externes, on spécifie un chemin absolu. La valeur de

l’attribut href est l’adresse du site.
Autres types de liens
Lien menant à un autre endroit de la même page web : spécifier un id
puis #.
Lien pour envoyer un mail avec mailto:
Lien pour passer un appel téléphonique avec tel:
Lien pour télécharger un fichier en précisant un chemin relatif.
Exemple
<p>Vous pouvez me contacter par:</p>
<ul>
<li><a href="https://example.com">Website</a></li>
<li><a href="mailto:adnane_1@yaho.fr">Email</a></li>
<li><a href="tel:00212676596104">Phone</a></li>
</ul>
<a href="#top" target="_self">Retourner au haut de la
page</a>
Tableaux
Nom Prénom Age Profession
Ben ali Mohamed 25 ans Ingénieur
Khaldouni Réda 29ans Professeur
Moyen pour organiser les informations

Comment créer un tableau?
<table>
<table> </table> <tr>
<td>Ben ali</td>
3 balises principales <tr> </tr> <td>Mohamed</td>
<td>25 ans</td>
<td> </td> <td>Ingénieur</td>
</tr>
<table> <tr>
<td>Khaldouni</td>
Nom Prénom Age Profession
<td>Réda</td>
Ben ali Mohamed 25 ans Iingénieur
<td>29ans</td>
<tr> Khaldouni Réda 29ans Professeur <td>Professeur</td>
</tr>
<td> <td> <td> <td> </table>
Comment créer un tableau? <table>
<caption>Tableau 1</caption>
<thead>
<tr>
<th> <th> <th> <th> <th>Nom</th>
<th> Prénom</th>
Nom Prénom Age Profession <th> Age</th>
<th> Profession </th>
<tr> Ben ali Mohamed 25 ans ingénieur </tr>
</thead>
Khaldouni Réda 29ans professeur <tbody>
<tr>
<td> <td> <td> <td> <td>Ben ali</td>
<td>Mohamed</td>
<td>25 ans</td>
 On peut ajouter un titre du tableau, en utilisant la balise
<td>ingénieur</td>
<caption>. </tr>
 Il est conseillé de structurer le tableau, en utilisant les balises <tr>
suivantes dans cet ordre: <td>Khaldouni</td>
1. <thead> <td>Réda</td>
2. <tfoot> <td>29ans</td>
3. <tbody> <td>professeur</td>
</tr>
</tbody>
</table>
Comment manipuler un
tableau?
<table>
Nom Prénom Age Profession <tr>
<th>Nom</th>
Ben ali Mohamed 25 ans
Ingénieur <th> Prénom</th>
Khaldouni Réda 29ans <th> Age</th>
<th> Profession </th>
</tr>
<tr>
<td>Ben ali</td>
<td>Mohamed</td>
 La fusion de colonnes : On utilisera l'attribut <td>25 ans</td>
<td rowspan
colspan. =2>ingénieur</td>
 La fusion de lignes : On utilisera l'attribut </tr>
<tr>
rowspan.. <td>Khaldouni</td>
<td>Réda</td>
<td>29ans</td>
</tr>
</table>
Les formulaires
Rend les pages web
interactives.
Invite les visiteurs à
renseigner des informations.
Comment créer un formulaire?
<form> </form>
Pour envoyer et traiter les informations saisies, on doit ajouter deux attributs à la
balise <form>:
◦ Méthode: get ou Post
◦ Action: c'est l'adresse de la page ou du programme qui va traiter les
informations
Ex: <form method="post" action="traitement.php">

Zone de texte monoligne
<input />
Pour créer une zone de texte à une ligne, on doit écrire :
<input type="text" name="pseudo" />

 Zone de texte monoligne
 Quelques attributs supplémentaires
<input type="text" name="pseudo" />
 Size : Permet de redimensionner le champ.
 Maxlength: Permet de limiter le nombre de caractères que l'on peut saisir.
 Value: On peut pré-remplir le champ avec une valeur par défaut .
 Placeholder: On peut donner une indication sur le contenu du champ. Cette indication
disparaîtra dès que le visiteur aura cliqué à l'intérieur du champ.
 Required: Pour indiquer qu’on doit obligatoirement remplir le champ

 Les libellés
<label>
Ex: <label>Votre pseudo</label>
Pour lier le label au champ, il faut lui donner un attribut for qui a la
même valeur que l'id du champ
Ex: <label for="pseudo">Votre pseudo</label> :

<input type="text" name="pseudo" id="pseudo" />

 Les Zones de mot de passe
Pour créer ce type de zone de saisie, on utilise l'attribut type="password".
Ex: <input type= "password" name="psword" />

 Zone de texte multiligne
<textarea> </textarea>
L’attribut row: indique le nombre de lignes de texte qui peuvent être

affichées simultanément.
L’attribut col: le nombre de colonnes.
Ex: <textarea name=“zone" id=“zone" rows="10" cols="50">

Les zones de saisie enrichies (html5)

On peut changer l’attribut type de la balise <input> pour avoir de nombreuses nouvelles
fonctionalités:
◦ Type= "email" : Permet de saisir une adresse e-mail.
◦ Type= "url" : Permet de saisir une adresse URL(commençant par http://).
◦ Type= "tel" : dédié à la saisie de numéros de téléphone .
◦ Type= "number" : Ce champ permet de saisir un nombre entier.
◦ Type= "range" : Permet de sélectionner un nombre avec un curseur .
◦ Type= "color" : Ce champ permet de saisir une couleur.
◦ Type= "date" : Ce champ permet de sélectionner une date.
◦ Type= "search" : Ce champ permet de créer un champ de recherche.
 Les éléments d'options

 Les cases à cocher
<input type="checkbox" name="choix" />
 Les zones d'options
<input type="radio" name=“option1" value=“option1" id=" option1" />

 Les éléments d'options

 Les listes déroulantes
<select> </select>
Ex: <select name="pays" id="pays">
<option value="Maroc"> Maroc </option>
<option value="Algerie"> Algerie </option>
</select>
 Le bouton d'envoi
On utilise toujours la balise <input />. Elle existe en quatre versions :
 type="submit" : le principal bouton d'envoi de formulaire. C'est
celui qu’on utilise le plus souvent. Le visiteur sera conduit à la
page indiquée dans l'attribut action du formulaire.
 type="reset" : remise à zéro du formulaire.
 type="image" : équivalent du bouton submit, présenté cette fois
sous forme d'image. Rajoutez l'attribut src pour indiquer l'URL de
l'image.
 type="button" : bouton générique, qui n'aura (par défaut) aucun
effet. En général, ce bouton est géré en JavaScript pour exécuter
des actions sur la page.
Eléments de section, article,
nav, aside, header, footer
Ce sont des éléments de structure, plus précis que
<span> ou <div>
<div class="aside"> devient
<aside> pour les menus sur le côté
Les navigateurs peuvent les reconnaître et proposer
un rendu spécifique.
Tags de structuration
<header>
<h1>Nouveaux éléments de section, article, header,
footer, aside, nav</h1>
</header>

<nav>nav
<ul>
<li><a href="#">Rubrique 1</a></li>
</ul>
</nav>

<section id="main">
<article> .. </article>
</section>
Chaque article peut avoir sa
propre structure
<article>
<header>
<h1>Titre de l'article</h1>
<p>Auteur : bidule</p>
</header>
<nav>
<ul>
<li><a href="index.html">Page d'accueil</a></li>
<li><a href="contact.html">Contact</a></li> </ul>
</nav>
<p>Contenu de l'article</p>
…
<footer>
<p>Posté par Simon, le <time datetime="2012-02-02">2
février 2012</time> </p>
</footer>
</article>
Validation et compatibilité
Différents navigateurs peuvent produire différents résultats à partir d’un
même code.
Pourquoi ? Différents navigateurs et différents versions de chaque

navigateurs coexistent + navigateurs mobiles !
Nécessité de tester son code sous différents navigateurs !

Validation et compatibilité
Le W3C met deux outils à notre disposition :
◦ Validateur HTML : http://validator.w3.org
◦ Validateur CSS : http://jigsaw.w3.org/css-validator
Vous devez vous efforcer d’avoir toujours un code valide.

Programmation Web: Réalisé Par: Pr. Mahraz Med Adnane ANNÉE UNIVERSITAIRE:2020/2021

Transféré par

Informations du document

Titre original

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

Programmation Web: Réalisé Par: Pr. Mahraz Med Adnane ANNÉE UNIVERSITAIRE:2020/2021

Transféré par

Droits d'auteur :

Formats disponibles

Université Sidi Mohamed Ben Abdllah

Faculté des sciences Dhar El Mahraz

Professeur à l’Institut supérieur d'ingénierie et des affaires (ISGA)

E-mails (Naissance d’Internet)

Quelques navigateurs Web:

3. Réponse de la requête HTTP

6- Envoie de la page 4- Renvoie des donnés

5- récupère les données

Traduction par l’ordinateur

Résultat visible par le navigateur

HTML1 HTML2 HTML3 HTML4 HTM

CSS1 CSS2 CSS3

<b> b pour bold ce qui signifie gras

<titre> Titre de mon site Web </titre>

<img src=" photo.jpg" alt="logo"/>

<a href="/mespages/page1.html">cliquez ici</a>

Les balises doivent être fermées dans le sens inverse de leur

 <html><body></body></html> : correct. Une balise qui est ouverte à

HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD

Certaines méthodes d’encodage sont spécifiques à un

ASCII, windows-1252, ISO8859-1, ISO-8859-15, UTF-8, etc.

Body Feuilles de style CSS

L’élément br crée un retour à la ligne.

Les éléments h1, h2,… jusqu’à h6 définissent des titres (par

L’élément em est utilisé pour définir un contenu comme

L’élément mark est utilisé pour faire ressortir du contenu.

Pour créer une liste ordonnée, on utilise ol et li.

Pour des liens externes, on spécifie un chemin absolu. La valeur de

Moyen pour organiser les informations

Ex: <form method="post" action="traitement.php">

Pour créer une zone de texte à une ligne, on doit écrire :

<input type="text" name="pseudo" />

 Zone de texte monoligne

Ex: <label>Votre pseudo</label>

Ex: <label for="pseudo">Votre pseudo</label> :

 Zone de texte monoligne

Pour créer ce type de zone de saisie, on utilise l'attribut type="password".

Ex: <input type= "password" name="psword" />

 Zone de texte multiligne

L’attribut row: indique le nombre de lignes de texte qui peuvent être

Ex: <textarea name=“zone" id=“zone" rows="10" cols="50">

Les zones de saisie enrichies (html5)

 Les éléments d'options

<input type="checkbox" name="choix" />

 Les zones d'options

<input type="radio" name=“option1" value=“option1" id=" option1" />

 Les éléments d'options

Pourquoi ? Différents navigateurs et différents versions de chaque

Nécessité de tester son code sous différents navigateurs !

Vous devez vous efforcer d’avoir toujours un code valide.

Vous aimerez peut-être aussi