Licence : IAG
Année Universitaire: 2024/2025
Pr. Mohamed Rida FETHI
Plan
1
1
Introduction
2
2 HTML & CSS
3 JavaScript
4
4
AJAX
5
5
PHP
5 CMS PHP
2
3
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
Page web reçue par le navigateur
<html>
<head>
<title>developpement web</title>
</head>
<body>
<h1>Bienvenue au cours Developpement Web</h1>
<img src="[Link]"/>
<p>
Ce cours a pour objectif de dresser un tableau complet de l'architecture
du <a href="[Link] et des technologies
concernées dans la construction d'un site.
</p>
</body>
</html>
4
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
Page web affichée par un navigateur graphique
5
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
HTML, l'origine
HTML Hyper Text Markup Language est né en 1989 sous l'impulsion de Tim Berners
Lee, " inventeur " du Web.
HTML est basé sur SGML (Structured Markup Language), qui est une vieille norme utilisée
pour la description de document. Elle est conçue pour les grosses documentations
techniques.
HTML est une instance de SGML.
6
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
Définition de HTML
HTML est l'abréviation de HyperText Markup Language, qui se traduit en français par
Langage de balisage hypertexte.
Langage de balisage : Utilise des balises pour structurer et organiser le contenu.
Hypertexte : Permet de relier différentes pages ou ressources via des liens interactifs.
HTML est le langage universel utilisé pour communiquer sur le Web.
HTML est un langage de balisage utilisé pour structurer le contenu d'une page
web.
7
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
Objectif de HTML
HTML est conçu pour structurer et présenter du contenu sur le Web. Son objectif principal est de
fournir une manière standardisée de créer des pages Web accessibles à tous les utilisateurs,
indépendamment des plateformes ou des navigateurs. Voici ses objectifs détaillés
1. Structurer le contenu
HTML permet d'organiser et de structurer le contenu d'une page Web
2. Créer des liens hypertextes
HTML permet de connecter des pages et des ressources via des liens hypertextes
3. Intégrer des contenus multimédias
HTML prend en charge l'incorporation de divers types de contenus multimédias
8
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
Evolution html
L'évolution de HTML a été marquée par plusieurs versions importantes, reflétant les besoins
croissants du Web en termes de fonctionnalités, d'accessibilité, et de compatibilité. Voici un
résumé des étapes principales :
1. HTML 1.0 (1991)
•Création : Par Tim Berners-Lee.
•Caractéristiques :
• Version très basique, utilisée pour structurer du texte simple.
• Prise en charge des titres, paragraphes, liens hypertextes, et listes.
•Limites : Pas de support pour les tableaux, images ou mises en page avancées
9
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
Evolution html
2. HTML 2.0 (1995)
•Standardisation : Publié par l'IETF (Internet Engineering Task Force).
•Caractéristiques :
•Ajout de tableaux pour organiser les données.
•Support des formulaires pour collecter des informations (champs de texte, boutons, etc.).
•Premières balises pour la gestion des images (<img>).
•Objectif : Étendre les capacités du Web tout en restant simple.
3. HTML 3.2 (1997)
•Adoption par le W3C : Organisation en charge de la standardisation.
•Caractéristiques :
•Prise en charge des feuilles de style CSS pour la mise en page.
•Ajout des balises <font> et <center> pour personnaliser l'apparence.
•Meilleure gestion des tableaux et des scripts.
10
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
Evolution html
4. HTML 4.01 (1999)
•Version majeure : Considérée comme une étape clé du Web moderne.
•Caractéristiques :
•Support des cadres (frames) et des scripts JavaScript.
•Compatibilité avec les feuilles de style CSS.
•Améliorations pour l'accessibilité (balises <abbr>, <acronym>, etc.).
5. XHTML 1.0 (2000)
•Transition vers XML : XHTML est une version stricte de HTML basée sur XML.
•Caractéristiques :
• Syntaxe plus rigoureuse (les balises doivent être correctement fermées).
• Meilleure portabilité et compatibilité avec les appareils mobiles.
11
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
Evolution html
6. HTML5 (2014 - Actuel)
•Version moderne : Développée par le W3C et le WHATWG.
•Caractéristiques :
•Support des contenus multimédias (balises <audio> et <video>).
•Nouvelles API pour les applications Web (géolocalisation, stockage local, etc.).
•Balises sémantiques (<article>, <section>, <header>, <footer>) pour mieux structurer le contenu.
•Compatibilité avec les appareils mobiles (responsive design).
12
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
La page HTML (source)
Une page HTML est un fichier texte, enrichi d'un certain nombre de codes ou commandes,
appelés balises.
Ces balises sont toujours exprimées sous la forme d'un mot clé, encadré par les caractères
"<" et ">". Exemple : <BALISE>.
Pour la plupart des balises, il existe une balise de fermeture associée, reprenant le même
nom, mais précédée du caractère "/".
Un fichier contenant du code source HTML se caractérise par l’extension .html.
13
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
Structure générale d'une page HTML
<HTML>
<HEAD>
<TITLE> Titre du document</TITLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>
14
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
La page HTML (source)
<html>
<head>
<title>developpement web</title>
</head>
<body>
<h1>Bienvenue au cours Developpement Web</h1>
<img src="[Link]"/>
<p>
Ce cours a pour objectif de dresser un tableau complet de l'architecture
du <a href="[Link] et des technologies concernées
dans la construction d'un site.
</p>
</body>
</html> 15
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
La page HTML (vue comme un arbre)
16
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
Structure d’un document
Entre les deux balises<html></html>, on définit deux zones :
l'en-tête, spécifié par les commandes:
<HEAD>
…..
</HEAD>
Le corps, délimité par: <BODY> et </BODY>.
<BODY>
……
</BODY>
17
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
Structure d’un document
1. L’en-tête
On ne met généralement qu'une seule information, le Titre du document qui sera affiché en
haut de la fenêtre du navigateur.
Le Titre est indiqué entre les balises <TITLE> et </TITLE>
Exemple :
<TITLE>developpement web</TITLE>.
18
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
Structure d’un document
2. Le corps
On met tout le document à afficher (texte, définition des images etc.).
Remarque:
Signalons l'existence d'une balise de commentaires, qui peut être utilisée partout
dans les documents HTML, définie comme suit :
<!-- Ceci est un commentaire --!>.
19
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
La balise
Une balise HTML est un élément de base utilisé pour structurer et organiser le contenu d'une page Web.
Elle est définie par des mots-clés entourés de chevrons (< >) et indique au navigateur comment afficher
le contenu qu'elle englobe ou modifie.
Par exemple :
•<p> : indique un paragraphe.
•<img> : permet d’afficher une image.
Chaque balise peut avoir une ouverture (<tag>) et une fermeture (</tag>), sauf certaines
balises autofermantes comme <img> ou <br>.
20
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
La balise
Pour décrire un fichier hypertexte, le langage HTML insère des
balises dans le texte du document :
<marqueur> ici votre texte </marqueur>
Début de mise en forme Fin de mise en forme
Synonymes: marqueur, élément, tag.
21
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
La balise
En HTML, les balises sont classées en deux catégories principales : paire et orpheline.
Voici leur définition et leurs caractéristiques :
1. Balises paires:
Les balises paires ont :
•Une balise d'ouverture (exemple : <tag>).
•Une balise de fermeture correspondante (exemple : </tag>).
Exemple:
<titre>Ceci est un titre</titre>
22
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
La balise
En HTML, les balises sont classées en deux catégories principales : paire et orpheline.
Voici leur définition et leurs caractéristiques :
2. Balises orphelines (autofermantes)
Les balises orphelines n'ont pas de balise de fermeture. Elles sont utilisées seules et
ne contiennent pas de contenu.
Elles se terminent par une barre oblique (/) en HTML5 pour indiquer qu'elles sont autofermantes.
Exemple:
<img src="[Link]" alt="Description de l'image" />
23
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
La balise
• Langage HTML: ensemble de balises
• Elément HTML : balise ouvrante + contenu + balise fermante
Exemple: <h1>Bienvenue au cours Développement Web</h1>
24
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
La balise
Ces balises peuvent être insérées n'importe où dans le texte, entre 2 phrases, mots, lettres …
<gras>Le <italique> cours </italique> HTML</gras>
Le cours HTML
25
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
La balise
Il faut respecter une logique d'imbrication:
Bon:
<gras><italique> Le cours HTML </italique> </gras>
Mauvais:
<gras><italique> Le cours HTML</gras></italique>
26
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
La balise
Le langage HTML est sensible à la casse, toujours écrire en
minuscules.
Bon:
<gras><italique> Le cours HTML </italique> </gras>
Mauvais:
<GRAS><italique> Le cours HTML </italique> </GRAS>
<Gras><ITALIQUE> Le cours HTML </ITALIQUE> </Gras>
<GRAS><ITALIQUE> Le cours HTML </italique> </GRAS>
27
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
Le langage HTML Balises obligatoires
<!DOCTYPE html> La déclaration <!DOCTYPE html> est utilisée en HTML pour indiquer
<html lang="fr"> au navigateur quelle version de HTML est utilisée dans le document.
<head>
<meta "charset=UTF-8" />
<title>Titre de la page</title>
</head>
<body>
<!--ceci est un commentaire du créateur de la page -->
Contenu du document (Texte, images, etc ..)
</body>
</html>
28
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
Le langage HTML Balises obligatoires
<!DOCTYPE html>
Utilisée pour indiquer la langue principale du contenu
<html lang="fr"> d'une page Web
<head>
<meta "charset=UTF-8" />
<title>Titre de la page</title>
</head>
<body>
<!--ceci est un commentaire du créateur de la page -->
Contenu du document (Texte, images, etc ..)
</body>
</html>
29
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
Le langage HTML Balises obligatoires
La balise <meta charset="UTF-8"> en HTML est
<!DOCTYPE html> utilisée pour spécifier l'encodage des caractères du
<html lang="fr"> document Web. Elle est généralement placée dans
l'élément <head> d'une page HTML
<head>
<meta "charset=UTF-8" />
<title>Titre de la page</title>
</head>
<body>
<!--ceci est un commentaire du créateur de la page -->
Contenu du document (Texte, images, etc ..)
</body>
</html>
30
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
Les attributs
Un attribut en HTML est une information supplémentaire ajoutée à une balise pour en
modifier ou préciser son comportement. Les attributs se placent à l’intérieur de la balise
d’ouverture et prennent souvent la forme :nom_attribut="valeur".
Caractéristiques des attributs :
[Link] accompagnent une balise. Exemple : <img src="[Link]" alt="Une image">.
[Link] sont toujours définis dans la balise d’ouverture.
[Link] prennent une valeur (souvent entourée de guillemets " ").
31
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
Les attributs
Les balises peuvent posséder un ou plusieurs attributs qui permettent de spécifier l'action de la
balise. Toujours mettre la valeur de l'attribut entre guillemets.
<marqueur attribut="argument">texte</marqueur>
<marqueur attribut1="argument" attribut2="argument">texte</marqueur>
32
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
Les attributs d’une balise
<balise att1=valAtt 1 att2=valAtt2 ….> contenu</balise>
Exemple:
<p align="center"> Fabriquer un site web </p>
Balise d'ouverture texte Balise de fermeture
un attribut de l’élément P
affecte la valeur center à l’attribut align
33
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
Les commentaires
<!–- Voici un commentaire HTML -->
<!–-
Voici un commentaire HTML qui
peut se placer sur plusieurs lignes
-->
34
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC
Rappels
Les noms d' éléments sont sensibles à la casse et sont écrits en minuscules.
Une balise <html> contenant une seule balise <head> et une seule balise
<body>.
Les noms d'attributs sont sensibles à la casse, doivent être écrits en minuscules
et encadrées par des guillemets. Tous les attributs doivent recevoir une valeur.
Les balises fermantes sont obligatoires.
Les éléments vides sont signalés par une balise spéciale. ( ex: <br />).
35