Programmation Web 1
Filières : ISI – S3
Pr Soulaiman EL HAZZAT
- [email protected] -
P lan
1. Introduction
2. Le langage HTML (HyperText Markup Language)
3. Le langage CSS (Cascading Style Sheets)
4. Langage JavaScript
Introduction
Programmation Web 1 3
Introduction
Internet et Web
Est-ce que « Internet » et « Web » sont synonymes ?
Programmation Web 1 4
Introduction
Internet : Définition
Internet a été mis en place en 1969 (4 ordinateurs, appartenant à
4 universités américaines, ont été reliés entre eux).
Internet est la concaténation de deux mots "interconnected" et
"network" (réseau interconnecté).
Internet est le réseau informatique mondial qui rend accessibles
des services variés comme :
Courrier électronique
Messagerie instantanée
Transfert de fichier (ftp)
Web (World Wide Web)
Programmation Web 1 5
Introduction
Web : Définition
Le Web (World Wide Web) a été inventé par Tim Berners-
Lee en 1989.
Le Web est un système qui permet de consulter, avec un
navigateur comme Google Chrome ou Internet Explorer,
des pages reliées entre elles par des liens hypertextes
(hyperliens).
L'ensemble des pages ainsi reliées composent ce qu'on appelle
un site Web.
Programmation Web 1 6
Introduction
Architecture client-serveur
Internet est un réseau composé d'ordinateurs.
Ceux-ci peuvent être classés en 2 catégories :
Les clients : ce sont les ordinateurs des
internautes comme vous. Votre ordinateur fait
donc partie de la catégorie des clients. Chaque
client représente un visiteur d'un site web.
Les serveurs : ce sont des ordinateurs
puissants qui stockent et délivrent des sites
web aux internautes, c'est-à-dire aux clients.
Pourtant, les serveurs sont indispensables au
bon fonctionnement du Web.
Programmation Web 1 7
Introduction
Architecture client-serveur
Client web est un logiciel capable d'envoyer des requêtes HTTP à un
serveur web et d'afficher les résultats. Les navigateurs web sont les
clients web les plus répandus.
Serveur web est une combinaison de logiciels et de matériels qui
utilise le protocole HTTP ou d’autres protocoles connexes pour
répondre aux demandes des clients sur le réseau internet.
(URL)
Requête http
client web Réponse http
Programmation Web 1 8
Introduction
Protocoles : Définitions
Protocole : Un protocole est un ensemble des règles qui doivent être
respectées pour réaliser un échange d’informations entre des
équipements réseau ( ordinateurs, serveurs, …).
Exemples : HTTP, HTTPS, TCP, UDP, DHCP, FTP, …
Protocole HTTP (HyperText Transfer Protocol) permet le transfert de
fichiers localisés grâce à une URL, entre un navigateur (client) et un
serveur web. C’est le protocole le plus utilisé sur le web.
Protocole HTTPS (avec S pour secured, soit « sécurisé ») est la
variante sécurisée de HTTP.
Programmation Web 1 9
Introduction
Le protocole HTTP
Le protocole HTTP (HyperText Transfer Protocol) est un protocole de
communication client-serveur qui permet d'accéder à des ressources
situées sur un serveur Web. Aujourd'hui, on lui préfère le HTTPS.
Pour communiquer avec un serveur Web via le protocole HTTP, on
s'appuiera sur un client HTTP. Au quotidien, ce client HTTP prend la forme
d'un navigateur Internet (Firefox, Chrome, Internet Explorer, ...), même s'il
existe de nombreux outils, notamment en ligne de commandes, capable
d'effectuer des requêtes Web.
Programmation Web 1 10
Introduction
Protocoles : Fonctionnement du protocole HTTP
Fonctionnement du protocole HTTP
HTTP fonctionne en mode Client/Serveur (serveur web : Apache, IIS, …).
• Le client (navigateur) effectue une requête HTTP.
• Le serveur traite la requête puis envoie une réponse HTTP.
Programmation Web 1 11
Introduction
Protocoles : Fonctionnement du protocole HTTP
Requête HTTP
Une requête HTTP est un ensemble de lignes envoyé
au serveur par le navigateur. Elle est divisée en trois
parties : la ligne de requête, l’en-tête et le corps.
• La ligne de requête: comprend trois éléments :
• La méthode
• L'URL
• La version du protocole utilisé par le client.
Programmation Web 1 12
Introduction
Protocoles : Fonctionnement du protocole HTTP
Requête HTTP
Les champs d'en-tête de la requête: il s'agit d'un ensemble de lignes
facultatives permettant de donner des informations supplémentaires sur la
requête et/ou le client (Navigateur, système d'exploitation, ...). Chacune de
ces lignes est composée d'un nom qualifiant le type d'en-tête, suivi de deux
points (:) et de la valeur de l'en-tête
Le corps de la requête: c'est un ensemble de lignes optionnelles devant être
séparées des lignes précédentes par une ligne vide et permettant par
exemple un envoi de données par une commande POST lors de l'envoi de
données au serveur par un formulaire.
Programmation Web 1 13
Introduction
Protocoles : Fonctionnement du protocole HTTP
Exemple de requête HTTP :
Programmation Web 1 14
Introduction
Protocoles : Fonctionnement du protocole HTTP
Méthodes HTTP : GET, HEAD, POST, PUT et DELETE
• GET La méthode GET est utilisées afin de récupérer des données.
• HEAD La méthode HEAD demande une réponse identique à une requête GET
pour laquelle on aura omis le corps de la réponse (on a uniquement l'en-
tête).
• POST La méthode POST est utilisée pour envoyer une entité (données,
messages) vers une page d’une ressource web existante. Cela entraîne
généralement un changement d'état ou des effets de bord sur le serveur.
• PUT La méthode PUT remplace toutes les représentations actuelles de la
ressource visée par le contenu de la requête.
• DELETE La méthode DELETE supprime la ressource indiquée.
Programmation Web 1 15
Introduction
Protocoles : Fonctionnement du protocole HTTP
Réponse HTTP
Lorsque le client envoie une requête HTTP, le serveur doit répondre avec
une réponse HTTP. La réponse HTTP a également sa propre structure,
similaire à la structure de la requête :
• La ligne d’état nous indique le statut de la requête, c’est-à-dire si elle a
réussi ou si une erreur est survenue. Par exemple : http 200 OK
• L’en-tête est un ensemble d’en-têtes, tout comme l’en-tête de la
requête. Le serveur peut envoyer autant d’en-têtes qu’il le souhaite.
• Enfin, le corps de la réponse, tout comme celui de la requête, contient
toutes les données transmises au client et va permettre l’affichage du
contenu HTML d’une page web dans le navigateur.
Programmation Web 1 16
Introduction
Protocoles : Fonctionnement du protocole HTTP
Exemple de Réponse HTTP :
Programmation Web 1 17
Introduction
Protocoles : Fonctionnement du protocole HTTP
Codes de statut de réponse HTTP :
Les codes les plus courants sont :
• 200 : succès de la requête.
• 301 et 302 : redirection, respectivement permanente et temporaire.
• 401 : utilisateur non authentifié.
• 403 : accès refusé.
• 404 : ressource non trouvée.
• 500, 502 et 503 : erreurs serveur.
• 504 : le serveur n'a pas répondu.
Programmation Web 1 18
Introduction
Protocoles : Fonctionnement du protocole HTTP
Codes de statut de réponse HTTP :
Exemple
Requête du client
Réponse du serveur
Codes de statut
Programmation Web 1 19
Introduction
Langages de développement
Programmation Web 1 20
Introduction
Langages de développement- coté client
Les langages de script pour le web (coté client) sont :
HTML (HyperText Markup Language) : est un langage utilisé
pour décrire et définir le contenu d'une page web.
CSS (Cascading Style Sheets) : est un langage utilisé pour
enrichir l'apparence du contenu d'une page web.
JavaScript : est un langage utilisé pour ajouter un côté
interactif et dynamique a une page web.
Programmation Web 1 21
Introduction
Site statique et site dynamique
Site web statique: est constitué de pages dont le contenu ne change
pas, sauf si quelqu'un modifie manuellement le code. Chaque page
est codée en HTML, CSS, et parfois JavaScript, et affiche la même
information à tous les visiteurs, sans intégration de bases de données
ou de contenu interactif qui change en fonction de l’utilisateur.
Site web dynamique: est un site dont certaines de ses pages sont
des pages dynamiques. Le contenu d'une page dynamique peut varier
en fonction de divers facteurs tels que le nom de l'utilisateur, l’heure
de la visite, ou encore les données utilisateur spécifiques stockées dans
des bases de données. Un site dynamique utilise des langages de script
côté serveur tels que PHP.
Programmation Web 1 22
Langage HTML
Programmation Web 1 23
Langage HTML
Définition :
Le HTML est un langage de balisage utilisé pour la création de
pages web. Il est basé sur deux notions, l’hypertexte qui permet
de lier plusieurs documents entre eux (ce sont les liens) et
les balises qui permettent de mettre en forme et de structurer le
contenu d'une page Web.
Programmation Web 1 24
Langage HTML
Balises HTML :
Les balises HTML respectent une syntaxe simple :
Un chevron ouvrant (<)
Le nom de la balise
Des attributs (optionnels)
Un chevron fermant (>)
Exemples :
<p lang = "fr">
<img src = "monImage.jpg" alt = "">
Programmation Web 1 25
Langage HTML
Eléments HTML:
Un élément HTML est une commande permettant de définir
chaque contenu d'une page web et également de passer certaines
informations utiles au navigateur pour l'afficher.
Un élément HTML peut être soit constitué d’une paire de balises
(ouvrante et fermante) et d’un contenu, soit d’une balise unique
appelée balise orpheline.
Exemple :
Programmation Web 1 26
Langage HTML
Attributs:
Les attributs permettent de définir plus précisément un élément
en lui apportant des informations supplémentaires sur son
comportement.
Un attribut contient toujours une valeur, qu’on peut parfois
omettre dans le cas des attributs ne possédant qu’une valeur par
défaut.
Exemples :
1)
2) <p align="center" lang ="fr" > Contenu </p>
Programmation Web 1 27
Langage HTML
Imbrication des balises:
Dans un code HTML on peut combiner plusieurs balises. Par
exemple un paragraphe peux comporter un texte à la fois en
gras et en italique.
Lorsque l'on combine dans un code plusieurs balises ouvrantes,
il est impératif de respecter leur hiérarchie: la première ouverte
devra être la dernière à être fermée.
Exemple :
<B> <I> Texte en gras et en italique </I> </B>
Programmation Web 1 28
Langage HTML
La structure minimale d’un code HTML
Programmation Web 1 29
Langage HTML
L’élément body
L'élément body représente le contenu principal du document
HTML. Il ne peut y avoir qu'une balise <body> par document.
On peut l'utiliser avec des attributs pour mettre en forme tout le
document.
Exemple :
Programmation Web 1 30
Langage HTML
L'indentation et les commentaires
Programmation Web 1 31
Langage HTML
Niveaux de titres en HTML :
Le langage HTML définit 6 niveaux de titres (balises <h1>,
<h2> …, <h6>), afin de définir une structuration hiérarchique
des paragraphes dans un texte.
Programmation Web 1 32
Langage HTML
Formatage des paragraphes :
Programmation Web 1 33
Langage HTML
Formatage du texte :
HTML nous offre la possibilité de formater (mettre en forme) un
texte sans utiliser CSS.
Programmation Web 1 34
Langage HTML
Les listes :
Les listes nous permettent souvent de mieux structurer un texte
et d'ordonner ses informations.
Technologies du Web 35
Langage HTML
Les listes de définitions :
Technologies du Web 36
Langage HTML
Les listes non ordonnées :
Technologies du Web 37
Langage HTML
Les listes ordonnées :
Technologies du Web 38
Langage HTML
Les listes : Exercice
Technologies du Web 39
Langage HTML
Insertion d'une ligne de séparation :
On peut insérer une ligne horizontale de séparation de
paragraphes dans un document HTML grâce à l'élément <hr>
Technologies du Web 40
Langage HTML
Insertion d'images :
On insère une image avec la balise orpheline <img>, elle doit
obligatoirement comporter au moins les deux attributs: src et alt.
Technologies du Web 41
Langage HTML
Insertion d'images :
• Il existe différents formats d'image (jpg, png, gif,…) que l'on peut
utiliser et on doit les choisir selon le type d'image:.
Technologies du Web 42
Langage HTML
Insertion de figures
Technologies du Web 43
Langage HTML
Liens hypertexte
Technologies du Web 44
Langage HTML
Liens hypertexte
Technologies du Web 45
Langage HTML
Zones réactives
Technologies du Web 46
Langage HTML
Les attributs de l'élément area
Technologies du Web 47
Langage HTML
Exemple d'utilisation de map
Technologies du Web 48
Langage HTML
Les tableaux
Technologies du Web 49
Langage HTML
Les tableaux
Technologies du Web 50
Langage HTML
Les frames
Technologies du Web 51
Langage HTML
Les frames
Technologies du Web 52
Langage HTML
Les attributs des frames
Technologies du Web 53
Langage HTML
Les liens entre les frames
Technologies du Web 54
Langage HTML
Les formulaires
Technologies du Web 55
Langage HTML
Les éléments de formulaires
Technologies du Web 56
Langage HTML
Les attributs commun au éléments
Technologies du Web 57
Langage HTML
L'élément input
Technologies du Web 58
Langage HTML
Les champs de saisie et les boutons
Technologies du Web 59
Langage HTML
Les boutons radio
Technologies du Web 60
Langage HTML
Les cases à cocher
Technologies du Web 61
Langage HTML
Input type="submit"
Les éléments <input> dont l'attribut type vaut "submit" sont
affichés comme des boutons permettant d'envoyer les données
d'un formulaire. Cliquer sur un tel bouton déclenchera l'envoi des
données du formulaire vers le serveur.
Exemple
<input type="submit" value="Envoyer" />
Technologies du Web 62
Langage HTML
La zone de saisie de texte multi-lignes
Technologies du Web 63
Langage HTML
Groupement des éléments d'un formulaire
Technologies du Web 64
Langage CSS
Technologies du Web 65
Langage CSS (Cascading Style Sheets)
Définition
Technologies Web 66
Langage CSS (Cascading Style Sheets)
Mettre en forme un site avec CSS
Technologies Web 67
Langage CSS (Cascading Style Sheets)
Définir le style dans le corps du code HTML
Technologies Web 68
Langage CSS (Cascading Style Sheets)
Définir le style dans l'entête du code HTML
Technologies Web 69
Langage CSS (Cascading Style Sheets)
Définir le style dans un fichier CSS séparé
Technologies Web 70
Langage CSS (Cascading Style Sheets)
Avantage du CSS séparé
Il y a de multiples avantages à séparer les feuilles de styles du contenu.
Citons en particulier :
Réduction de la taille des pages
Mise à jour plus facile
…
Technologies Web 71
Langage CSS (Cascading Style Sheets)
Structure d'un fichier CSS
Technologies Web 72
Langage CSS (Cascading Style Sheets)
Sélecteurs simples
Technologies Web 73
Langage CSS (Cascading Style Sheets)
Sélecteur universel *
Technologies Web 74
Langage CSS (Cascading Style Sheets)
Appliquer le même style à plusieurs éléments
Technologies Web 75
Langage CSS (Cascading Style Sheets)
Utiliser plusieurs sélecteurs CSS à la suite
Technologies Web 76
Langage CSS (Cascading Style Sheets)
Appliquer des styles aux enfants directs
Technologies Web 77
Langage CSS (Cascading Style Sheets)
Sélectionner l’élément suivant directement un autre
élément
Technologies Web 78
Langage CSS (Cascading Style Sheets)
Sélectionner tous les éléments suivant un autre élément
Technologies Web 79
Langage CSS (Cascading Style Sheets)
Sélectionner un élément avec attribut
Technologies Web 80
Langage CSS (Cascading Style Sheets)
Les attributs class et id
Technologies Web 81
Langage CSS (Cascading Style Sheets)
Les éléments HTML div
Technologies Web 82
Langage CSS (Cascading Style Sheets)
Les éléments HTML span
Technologies Web 83
Langage CSS (Cascading Style Sheets)
Propriétés CSS
Technologies Web 84
Langage CSS (Cascading Style Sheets)
Propriétés CSS
Technologies Web 85
Langage CSS (Cascading Style Sheets)
Propriétés CSS
Technologies Web 86
Langage CSS (Cascading Style Sheets)
Propriétés CSS
Technologies Web 87
Langage CSS (Cascading Style Sheets)
Propriétés CSS
Technologies Web 88
Langage CSS (Cascading Style Sheets)
Propriétés CSS
Technologies Web 89
