Module :

Systèmes De Gestion De Contenu (CMS)

Filière : Licence d'excellence Marketing, Logistique et Digital

Pr. HOUSSAM EL AOUIFI

e la o uifihous sam@ gma il.com

Année Universitaire: 2024/2025

 Introduction à HTML et CSS

• Historique d’évolution du web

• HTML (HyperText Markup Language)

• CSS (Cascading Style Sheets)

2
Historique d’évolution du web

3
 Internet

C'est quoi un Internet ?

 Ensemble de réseaux mondiaux interconnectés qui permet à des ordinateurs et à des
serveurs de communiquer efficacement au moyen d'un protocole de communication
commun (IP).
 Internet est le plus grand réseau informatique mondial.

4
 Histoire d'Internet

Phase 1-Les débuts d'Internet:

 L’histoire d’Internet commence dans les années soixante aux Etats-Unis.
 Internet est le fruit d'une collaboration entre les militaires américains, des
universitaires et des chercheurs.

 Création de l'ARPA.

5
 Histoire d'Internet
Création de l'ARPA (Advanced Research Project Agency)
 En 1957, le ministère de la Défense américain crée l'ARPA dans le but de développer la
recherche scientifique à des fins militaires.
 Permettre aux communications de résister à un conflit nucléaire, en remplaçant un
système centralisé par de nombreuses machines reliées entre elles.

En cas de destruction partielle, les machines

restantes doivent être capables de se reconnecter
entre elles en utilisant les lignes en état de marche.

6
 Histoire d'Internet

Arpanet
 Le point de départ d'Internet fut la naissance d'Arpanet en 1971, après plusieurs années
d'études et de recherches.
 C'était un réseau de quatre mini-ordinateurs qui a été mis en service à l'université de Los
Angeles en Californie (UCLA).

7
 Histoire d'Internet
Phase 1- Chronologie de l'évolution:
 En 1971 : Envoie du premier courrier électronique par Tomlinson
 En 1979 : il y avait 23 ordinateurs qui étaient reliés sur ARPANET.
 En 1983 : Adoption du mot « Internet » pour signifier qu'il s'agit d'une interconnexion de
réseaux.
 En 1984 il y avait 1 000 ordinateurs connectés.
 En 1987 , 10 000 ordinateurs connectés.
 En 1989 on est passé 100 000 ordinateurs inter-connectés.

8
 Histoire d'Internet
Phase 2 - L'expansion d'internet:
 Dans les années 1990, Internet a connu une croissance exponentielle avec l'arrivée World
Wide Web inventé par Tim Berners en 1991 et la popularisation des navigateurs web comme
Mosaic développé en 1993 et Internet Explorer arrivé en 1995.
 Cette année a été aussi marquée par le lancement du moteur de recherche Yahoo suivi par
l’arrivé de Google en 1998.
 En 1996, il y avaient 36 millions ordinateurs connectés à internet.

9
 Histoire d'Internet
Phase 3 - L'avènement du Web 2.0
 Dans les années 2000, le Web 2.0 est apparu, introduisant des sites de réseaux sociaux tels
que Facebook, Twitter et LinkedIn.
 Les utilisateurs sont passé du web 1.0 où les ils pouvaient uniquement consulter du
contenu statique, tels que des pages web simples et des images au web 2.0 où il pouvaient
créer et partager du contenu en temps réel.

10
 Histoire d'Internet
Phase 4 - L'ère de la mobilité
 Les années 2010 ont vu l'avènement de la mobilité et la popularisation des smartphones et
des tablettes.
 Les utilisateurs ont commencé à utiliser Internet de plus en plus sur leurs appareils mobiles,
ce qui a conduit à la création de sites web et d'applications mobiles adaptés à ces appareils.

11
 Histoire d'Internet
Phase 5 - L'Internet des objets- Internet of Things (IoT)
 Aujourd'hui, nous sommes entrés dans l'ère de l'Internet des objets, où les appareils et les
objets peuvent se connecter à Internet et échanger des données entre eux.
 Les voitures, les montres intelligentes, les appareils domestiques et même les villes
intelligentes font désormais partie de l'Internet des objets.

12
Comment fonctionne Internet ?

13
 Comment fonctionne Internet ?
Introduction
 Internet est un réseau mondial de milliards d'ordinateurs connectés les uns aux autres.
 Ce qui permet à des personnes du monde entier de communiquer, de partager des
informations, de travailler ensemble, et bien plus encore.
 Le fonctionnement complexe d'Internet est basé sur trois concepts clés :
 Adresses IP
 DNS
 Routeur

14
 Comment fonctionne Internet ?
Adresse IP
 L'adresse IP (Internet Protocol) est un élément fondamental du fonctionnement
d'Internet.
 Chaque appareil connecté à Internet (ordinateur, smartphone ou d'un autre
périphérique,…) doit posséder une adresse IP unique.
 Cette adresse est essentielle pour identifier et localiser chaque appareil sur le vaste
réseau.
 Il existe deux versions d'adresses IP largement utilisées :
 IPv4 (Internet Protocol version 4)
 IPv6 (Internet Protocol version 6).

15
 Comment fonctionne Internet ?

IPv4 :
 Les adresses IPv4 sont généralement représentées sous forme de quatre nombres
séparés par des points.

 Exemple : 203.0.113.45
 Chaque nombre peut varier de 0 à 255, ce qui offre environ 4,3 milliards d'adresses
possibles.
 Cependant, avec la croissance rapide d'Internet, le nombre d'adresses IPv4
disponibles s'est épuisé.

16
 Comment fonctionne Internet ?

IPv6 :
 Pour résoudre le problème de pénurie d'adresses IPv4, IPv6 a été introduit.
 IPv6 sont beaucoup plus longues, composées de huit groupes de quatre chiffres
hexadécimaux, séparés par des deux-points.
 Le système hexadécimal utilise des chiffres de 0 à 9 et les lettres majuscules de A à F.
 Exemple : 2001:0DB8:85A3:0000:0000:8A2E:0370:7334
 Avec IPv6, il y a suffisamment d'adresses uniques pour répondre aux besoins futurs
d'Internet.

17
 Comment fonctionne Internet ?

DNS (Système de Noms de Domaine)

 Il est difficile pour les humains de se
souvenir des adresses IP.
 C'est pourquoi les noms de domaine ont été
introduits.
 Ex: www.google.com = 142.250.184.4
 Le DNS agit comme un traducteur entre les
noms de domaine et les adresses IP.

Fonctionnement du serveur DNS

18
 Comment fonctionne Internet ?
Le Routeur
 Les routeurs sont essentiels pour relier différents
réseaux entre eux et permettre la transmission des
informations.
 Lorsque vous envoyez des données sur Internet,
elles passent par de nombreux routeurs différents avant
d'arriver à leur destination.
 Les routeurs utilisent des tables de routage pour
déterminer le chemin le plus court et le plus fiable
pour acheminer les paquets de données d'un point à un
autre sur le réseau. Réseau B
Le Routage
19
Comment fonctionne le Web ?

20
 Comment fonctionne le Web ?
Introduction
 Le Web est un service accessible via Internet qui permet l'échange de différentes
ressources, telles que des textes, des images, des vidéos, des fichiers audio, etc.
 Ces ressources sont stockées sur des serveurs distants et peuvent être consultées à
l'aide de navigateurs web tels que Chrome, Firefox ou Safari…

21
 Comment fonctionne le Web ?
Le principe du client-serveur
 Le Web fonctionne grâce au principe du client-serveur.
1) Le client, généralement un navigateur web, envoie
des requêtes aux serveurs distants qui hébergent les
ressources.
2) Les serveurs traitent ces requêtes et y répondent en
renvoyant les ressources demandées.

Principe client-serveur

22
 Comment fonctionne le Web ?
Les protocoles de communication : HTTP et HTTPS
 Pour que les clients et les serveurs puissent communiquer, ils doivent utiliser le même
langage (le même protocole)
 Un protocole est un ensemble de règles et de conventions qui permettent à deux entités, de
communiquer et d'échanger des informations de manière structurée et organisée.
 Le protocole le plus couramment utilisé sur le web est le HTTP (Hypertext Transfer
Protocol), qui permet aux clients de demander des ressources et aux serveurs de répondre à ces
requêtes.
 Le protocole HTTPS (HTTP Secure) est une version sécurisée du HTTP qui garantit la
confidentialité et l'intégrité des données échangées entre le client et le serveur.

23
 Comment fonctionne le Web ?
Les URLs (Uniform Resource Locators)
 Chaque ressource sur le web est identifiée par une URL qui est une adresse unique
permettant de localiser la ressource.
 Une URL est composée de plusieurs parties, notamment le protocole, le nom de domaine et
le chemin d'accès.
Chemin
Protocole Domaine d’accès

https :// www.examlpe / documentation/index.html

Les éléments d'une URL

24
Les technologies web

25
 Les technologies web
Introduction
 Le développement web est un domaine passionnant qui vous permet de créer des
sites web interactifs et dynamiques.
 Trois langages essentiels pour le développement web sont HTML, CSS et JavaScript.

CSS
HTML
JavaScript

26
 Les technologies web (Le web Statique vs Le web Dynamique)
Le web Statique

HTML

JavaScript CSS

27
 Les technologies web (Le web Statique vs Le web Dynamique)
Le web Dynamique

HTML

JavaScript CSS

PHP/JSP/ Base de
ASP Données

28
Introduction à HTML

29
 HTML (HyperText Markup Language)
HTML (HyperText Markup Language)
 HTML est le langage de base pour créer des pages web.

 C'est un langage à balisage qui décrit la structure logique d'un document hypertexte. Il a
volontairement été conçu pour être simple.

 Il permet de structurer le contenu d'une page en utilisant des balises, qui définissent les
différents éléments tels que les titres, les paragraphes, les listes et les images.

30
 Histoire de développement de HTML
HTML 1.0 (1991-1993) : Créé par Tim Berners-Lee pour structurer des documents et des liens.

HTML 2.0 (1995) : Standardisation par le W3C. Ajout du support des formulaires.

HTML 3.2 (1997) : Introduction des tableaux, scripts (JavaScript) et CSS.

HTML 4.0 (1997-1999) : Séparation du contenu et de la présentation, meilleur support des CSS, et
ajout d’éléments pour l'accessibilité.

XHTML (2000) : Version stricte suivant XML, avec des règles de syntaxe strictes, mais une adoption
limitée.

31
 Histoire de développement de HTML

HTML5 (2014) :
Réinvention du Web : HTML5 marque une grande évolution, introduisant des éléments
sémantiques comme <article>, <section>, et <footer> pour améliorer la structure des pages.

Fonctionnalités multimédias : Support intégré pour les vidéos et audios (balises <video> et
<audio>) sans nécessiter de plugins externes comme Flash.

Applications Web : HTML5 intègre des fonctionnalités pour le développement d'applications

Web riches (Web APIs, Canvas pour les graphiques 2D/3D).

32
 Histoire de développement de HTML

HTML5 (2014) :

33
 Les balises en HTML
Le langage HTML utilise ce qu'on appelle des balises. On les écrit
entre chevrons < et > :

34
 Les balises en HTML
On distingue deux types de balises :
 Les balises en paires (une balise ouvrante et une balise fermante)
<title> Ceci est le titre de ma page </title>
Une balise ouvrante : <title> Une balise fermante : </title>

 Les balises orphelines (une seule balise): elles sont utilisées pour insérer un élément à un
endroit précis.
Pour les différencier d'une balise ouvrante, on ajouter le caractère "/" juste avant le ">".
<img src=" " /> : <img> Insertion d'une image

<br/> : Saut de ligne

35
 Les balises de structure d'une page HTML
Structure de base d'une page HTML

• La première ligne <!DOCTYPE html>>

est une balise orpheline indispensable : elle
indique qu'il s'agit d'une page HTML.

• La balise en paire <html> </html> englobe

tout le contenu de la page web. A l'intérieur, il
y a les balises en paire <head>
</head> et <body> </body>.

36
 Les attributs des balises en HTML
Les attributs des balises:
 Les attributs des balises permettent d'ajouter des informations supplémentaires ou
modifient le comportement de l'élément HTML.
 Les attributs se placent à l'intérieur de la balise d'ouverture et sont généralement sous la
forme attribut="valeur"
 Ex: <img src="image.jpg" title = " Mon image" >

 La plupart des balises peuvent contenir des attributs si nécessaire pour ajouter
des informations ou du style, mais elles ne sont pas toujours obligatoires.

37
 Les balises META
Structure de base d'une page HTML
• Les balises META servent à donner des informations supplémentaires à propos de la
page HTML, ce qu'on appelle des métadonnées (des données sur les données).
Syntaxe : <meta name="nom de la balise" content="valeur" />
Exemple
<meta name="description" content="Cours d'introduction à HTML" />
<meta name="keywords" content="HTML, CSS, page web" />
<meta name="author" content=« Houssam EL Aouifi" />
<meta charset=utf-8" />

38
 Comment créer une page HTML
 Les étapes pour créer votre premier page web:
1. Ouvrir un éditeur de texte (Bloc-Notes, Notepad, Sublime texte,…)
2. Mettez la structure de base d’une page HTML
3. Enregistrer le fichier sous l’extension .html
4. Consulter votre page web en utilisant un navigateur web
5. Ajouter des modifications puis enregistrer le fichier
6. Re-consulter les modifications en utilisant un navigateur web

39
 Comment créer une page HTML
<!DOCTYPE html>>
Exemple 1
<HTML>
<HEAD>
<TITLE> Mon Premier page en HTML </TITLE>
<meta name=description content="Cours d'introduction &agrave HTML" />
<meta name=keywords content="HTML, CSS, page web" />
<meta name=author content= "Houssam EL Aouifi" />
<meta charset="utf-8"/>
</HEAD>
<BODY>
Bonjour
</BODY>
</HTML>
40
 La couleur d'arrière-plan d'une page HTML
L'attribut bgcolor de la balise <body> pour définir la couleur de fond.

<body bgcolor="lightblue">

<h1>Bienvenue sur ma page</h1>

</body>

41
 Mise en Forme d'un texte en HTML
Les balises de mise en Forme d'un texte (Les titres )

<h1> Titre de niveau 1 </h1>

<h2> Titre de niveau 2 </h2>
<h3> Titre de niveau 3 </h3>
<h4> Titre de niveau 4 </h4>
<h5> Titre de niveau 5 </h5>
<h6> Titre de niveau 6 </h6>

42
 Mise en Forme d'un texte en HTML
Les balises de mise en Forme d'un texte (Police)

<B>texte en Gras</B> texte en Gras

<STRONG> texte en gras </STRONG> texte en Gras
<I>texte en Italique</I> texte en Italique
<EM> texte en Italique</EM> texte en Italique
<u> texte souligné </u> texte souligné

43
 Mise en Forme d'un texte en HTML
Les balises de mise en Forme d'un texte (Taille et couleur de caractère )
<FONT SIZE= "6" > Texte avec size 6 </FONT> Texte avec size 6
L'attribut size prend des valeurs numériques allant de 1
(la plus petite) à 7 (la plus grande)

<FONT COLOR="red"> texte en rouge</FONT> texte en rouge

<FONT COLOR=« #FFOOOO SIZE= "6" > texte en texte en rouge

rouge</FONT>

44
 Mise en Forme d'un texte en HTML

Les couleurs en HTML

https://htmlcolorcodes.com/fr/selecteur-de-couleur/

45
 Mise en Forme d'un texte en HTML

Les Paragraphes :
 Les éléments <p> forment des paragraphes de texte. Cet élément est souvent
utilisé pour baliser du texte normal du contenu d'une page

<p>Voici un paragraphe simple</p>

46
 Mise en Forme d'un texte en HTML
les caractères accentués et spéciaux
Caractère Entité HTML
à &agrave;
é &eacute;
è &egrave;
& &amp;
< &lt;
> &gt;
" &quot;
€ &euro;
Espace &nbsp
47
 Mise en Forme d'un texte en HTML
Imbrication d'éléments:
 Placer des éléments à l'intérieur d'autres éléments
 Il faut en revanche s'assurer que les éléments sont correctement imbriqués
<u><FONT COLOR=« #FFOOOO"> texte rouge souligné
</FONT><u>
texte rouge souligné

<B><I>Texte en gras et en italique</I></B> Texte en gras et en italique

<p>Mon chat est <strong>très</strong> Mon chat est très grincheux.

grincheux.</p>
48
 Mise en Forme d'un texte en HTML
<HTML> <HEAD> <TITLE> Texte font</TITLE> </HEAD>
<BODY>
<H1> Titre de section </h1>
texte simple <BR>
<B>texte en gras</B> &nbsp &nbsp &nbsp <STRONG>texte en gras</STRONG><BR>
Exemple <I>texte en italique</I> &nbsp &nbsp &nbsp <EM>texte en italique</EM><BR>
<B><I>texte en gras et en italique</I></B><BR>
<FONT SIZE=7 COLOR="#0000FF">Grand texte en bleu</FONT>
<center> <FONT SIZE=7 COLOR="red">Grand texte centre en Rouge</FONT> </center> <BR>
<P> paragraphe paragraphe paragraphe paragraphe paragraphe </p>
<!--C'est fini-->
</BODY>
</HTML>

49
 Les Balises de commentaire, retour à la ligne,… en HTML

Autres balises de (commentaire, retour à la ligne)

<BR> Retour à la ligne

<hr> Tracer une ligne horizontale

<!-- *** --> Commentaire (Ne s’afficher pas)

<CENTER> </CENTER> Centrer

50
 Les balises sémantiques
Les balises sémantiques introduites avec HTML5 aident à structurer une page
web de manière claire et compréhensible, tant pour les développeurs que pour
les moteurs de recherche.
Exemples:
<header> Représente la section d'en-tête d'une page ou d'une section spécifique. Elle contient
généralement des titres, des logos, des menus de navigation, etc.

<footer> : Pied de page pour un document ou une section (ex. : crédits, informations légales).

51
 Les balises sémantiques

<details> est utilisée pour afficher du contenu caché que l'utilisateur peut dévoiler, et

<summary> contient le titre de cette section cachée.

<nav> Indique une section de navigation contenant des liens vers d'autres pages ou parties de

la page. Il est souvent utilisé dans les menus de navigation.

<article> : Contenu indépendant, autonome (ex. : article de blog, post de forum).

<section> : Regroupement logique de contenu lié (ex. : section thématique sur une page).

52
Les listes en HTML
La liste numérotée VS La liste non numérotée

53
 Les listes en HTML
Les listes non numérotée <UL> </UL>
<UL type="disc "> Puces rondes pleine
Une liste non numérotée est délimitée par
les balises <UL> et </UL> entre lesquelles <UL type="circle"> Puces rondes
chaque élément de la liste est précédé de la creuses
balise <LI>.
<UL type="square"> Puces carrées

<UL> <UL Type=circle >

<LI> élément 1, <LI> élément 1,
<LI> élément 2, <LI> élément 2,
<LI> élément 3. <LI> élément 3.
</UL> </UL>

54
 Les listes en HTML
Les listes numérotée <OL> </OL>
<OL type=1> (1,2,3)
Une liste numérotée est délimitée par <OL type=a> (a,b,c)
les balises <OL> et </OL> entre
<OL type=A> (A,B,C)
lesquelles chaque élément de la liste
est précédé de la balise <LI> <OL type=i> (i,ii,iii)
<OL type=I> (I,II,III)
<OL> <OL Type=a >
<LI> élément 1, <LI> élément 1,
<LI> élément 2, <LI> élément 2,
<LI> élément 3. <LI> élément 3.
</OL> </OL>
55
 Les listes en HTML
<HTML>
<HEAD>
<H1> Liste à puce </h1>
<TITLE> Exemple 4 </TITLE> <UL>
Exemple
</HEAD> <LI> élément 1,
<BODY> <LI> élément 2,
<H1> Liste numérotée </h1> <LI> élément 3.
<OL>
<LI> élément 1,
</UL>
<LI> élément 2, <UL Type=circle >
<LI> élément 3. <LI> élément 1,
</OL> <LI> élément 2,
<OL Type=a > <LI> élément 3.
<LI> élément 1,
<LI> élément 2,
</UL>
<LI> élément 3. </BODY>
</OL> </HTML>
56
 Les tableaux en HTML
Pour créer un tableau en utilise la balise <table> </table>

<table> </table>
La balise <th> le titre
La balise <tr> détermine les lignes
La balise <td> les contenus des cellules.

57
 Les tableaux en HTML
<table>
Syntaxe <table> </table>
<tr> ligne de titre
<th> titre de colonne </th>
<th> titre de colonne </th>
</tr>
<tr> Premier ligne
<td> cellule 1 </td>
<td> cellule 2 </td>
<tr>
</table>
58
 Les tableaux en HTML
Quelques attributs utiles de la balise <table> </table>
caption : Utilisé pour ajouter un titre au tableau : <caption>Mon tableau</caption>
border : Définit la taille de la bordure du tableau. <table border="1">
cellpadding : Définit l'espacement entre le contenu de la cellule et ses bords intérieurs: <table cellpadding="10">
cellspacing : Définit l'espacement entre les cellules du tableau: <table cellspacing="5">
width et height : Spécifie la largeur et la hauteur du tableau: <table width="100%" height="200px">
align : Permet d'aligner le tableau: <table align="center">
colspan : Permettent à une cellule de s'étendre sur plusieurs colonnes : <td colspan="2">Fusionne 2 colonnes</td>
rowspan ; Permettent à une cellule de s'étendre sur plusieurs lignes <td rowspan="3">Fusionne 3 lignes</td>

59
 Les tableaux en HTML
Quelques attributs utiles de la balise <table> </table>
bgcolor peut être utilisé dans la balise <table>, <tr>, ou <td> pour appliquer une couleur de fond.
<table Bgcolor = "#DBDAD8">
</table>
<tr Bgcolor = "blue"> </tr>

<td Bgcolor = "yellow"> </td>

60
 Les tableaux en HTML
<table align="center" border="3" cellpadding="10" table cellspacing="5" width=« 90%" height="200px" Bgcolor = "#DBDAD8">
<caption> Premier Tableu en HTML </caption>
<tr>
<th> Titre1 </th>
<th> Titre2 </th>
<th> Titre3 </th>
</tr>
<tr>
<td> ligne 1, Colonne1</td>
<td> ligne 1, Colonne2</td>
<td> ligne 1, Colonne3</td>
</tr>
<tr>
<td> ligne 2, Colonne1</td>
<td> ligne 2, Colonne2</td>
<td> ligne 2, Colonne3</td>
</tr>
<tr>
<td colspan="3" bgcolor="yellow" align =center>Fusionne trois lignes</td>
</tr>
</table>

61
 Les médias (Lien) en HTML
Pour créer un lien hypertexte en utilise la balise <a> et l'attribut href
<A HREF="URL ou adresse« Target = "_blank ">...</A>

 Un lien absolu : il indique une adresse complète.

<a href="http://fsjes-cuam.uiz.ac.ma/?q=blogs-homepage">Accédez au site de la FSJESAM</a>

 Un lien relatif : il indique où trouver notre fichier HTML.

<a href= "tab.html">Page des tableux</a>
Target : _blank ouverture de lien dans nouvelle fenêtre et _self dans la même fenêtre

62
 Les médias (Image) en HTML
Pour créer une image en utilise la balise <img src =>
Src: Spécifie le chemin (URL) de l'image à afficher.

Alt: Fournit un texte alternatif qui s'affiche si l'image ne peut pas être chargée.

width et height : spécifient la largeur et la hauteur de l'image (en pixels)

Title: affiche un texte en info-bulle lorsque l'utilisateur survole l'image avec la souris.

Ismap: Indique que l'image est une image-carte cliquable (avec un lien).

63
 Les médias (Image) en HTML
Pour créer une image en utilise la balise <img src =>

Un lien relatif :
<img src= " image.jpg" alt="Je n’ai pas trouvé l’image’’ title = " Mon image" />

Un lien absolu :
<img src= "
https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.sv
g/langfr-130px-HTML5_logo_and_wordmark.svg.png" alt="Je n’ai pas trouvé l’image’’ title = "
Mon image" />

64
 Les médias (Video) en HTML
Pour créer une video en utilise la balise <video src= >
Src: Spécifie le chemin (URL ou fichier local) de la vidéo

width et height : Définissent la largeur et la hauteur du lecteur vidéo en pixels.

Controls : Affiche les commandes de contrôle de la vidéo

Autoplay : Démarre la lecture de la vidéo automatiquement dès que la page est chargée.

65
 Les médias (Video) en HTML
Pour créer une video en utilise la balise <video>

Un lien relatif :
<video src="video1.webm" controls Autoplay width="450" > </video>

Un lien absolu :
<video width="640" height="260" controls >
<source src=https://archive.org/download/BigBuckBunny_328/BigBuckBunny_512kb.mp4
type="video/mp4">
Votre navigateur ne supporte pas la balise vidéo.
</video>

66
 La balise Iframe
 La balise <iframe> permet d'intégrer une autre page web ou un document HTML dans une
page web.
 Elle affiche le contenu à l'intérieur d'un cadre, permettant à l'utilisateur de voir une autre
page tout en restant sur la page actuelle.
 Google Map, Youtube, Pages web ….

<iframe src="" </iframe>

67
 La balise Iframe
 Les attributs de la balise Iframe
 Title : Fournit une description du contenu de l'iframe
 Width / height : Contrôler les dimensions
 Frameborder : Définit si un cadre (border) doit être affiché autour de l'iframe. Utilisez "0"
pour pas de cadre, et "1" pour un cadre.
 Allowfullscreen : Permet au contenu de l'iframe d'être affiché en plein écran.

68
 La balise Object
 La balise <object> est plus générale que <iframe>.
 Elle permet d'intégrer différents types de ressources externes dans une page web,
comme des documents, des images, des vidéos, des fichiers PDF, et des applications
interactives (par exemple, des applets Java ou des fichiers Flash).
 Elle est également utilisée pour intégrer des pages web, mais avec plus de flexibilité
quant au type de contenu affiché.

69
 La balise Object
Les attributs de la balise Object
data : URL du fichier à charger.
type : Type MIME du fichier spécifié, permettant au navigateur de comprendre le format.
width et height : Définissent la taille de l'objet.
form : Permet d'associer l'objet à un formulaire.
name : Permet d’identifier l'objet.

70
 La balise Object
Exemple 1 : Intégration d'une page web
<object data="https://www.example.com" width="600" height="400"> Votre navigateur ne
supporte pas l'objet intégré. </object>

Exemple 2 : Intégration d'un fichier PDF

<object data="document.pdf" type="application/pdf" width="600" height="400"> <p>Le
fichier PDF ne peut pas être affiché. <a href="document.pdf">Télécharger le PDF</a>.</p>
</object>

71
 Les formulaires en HTML
Les formulaires HTML débutent par la balise <form> :
<form action="/ma-page-de-traitement" method= "Get/Post">…</form>

• action définit l'emplacement (une URL) où doivent être envoyées les données collectées
par le formulaire.

• method :Méthode d'envoi des données (POST pour envoyer des données en toute
sécurité, GET pour les envoyer en URL).

72
 Les formulaires en HTML
label: Définit un étiquetage pour les champs de formulaire, assurant l'accessibilité.

<form action="#" method="post">

<!-- Nom -->
<label for="nom"> Nom : </label>
<input type="text" id="nom" name="nom" placeholder="Votre nom" pattern="[1-5]{6}" required>
<br><br>
</form>
• L'attribut required rend un champ obligatoire.
• L'attribut Pattern est utilisé pour valider le format des données saisies par l'utilisateur.
73
 Les formulaires en HTML
<fieldset> : l'élément pour les ensembles de champs
L'étiquette du groupe de contrôle est donné par l’élément <legend>
<form action="#" method="post">
<fieldset >
<legend>Infromations personnelles</legend>
<!-- Nom -->
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom"
placeholder="Votre nom" required>
<br><br>

</fieldset>

74
 Les formulaires en HTML
Les différents types des inputs

75
 Les formulaires en HTML
Les différents types des inputs

Number : Champ pour saisir un nombre.

Date : Sélecteur de date.

Color: choisir une couleur dans une

palette..

Week: sélectionner une semaine spécifique

d'une année
76
Merci pour votre attention

77