Ecole Supérieure de Technologie – Université IBN ZOHR

Développement
WEB
Aïcha Bakki
[Link]@uiz .[Link]

Année Universitaire : 2024 - 2025 1ère année - Ingénierie des données

Organisation du module

48 h CM, TD et TP
20h Cours | 28h TD & TP

Evaluation
Devoir surveillé + Contrôles Continus

Mini-projet
A réaliser lors des séances de TP
00 Intro au
Développement
Web
 Historique et évolution

1967 ARPANET

L'ARPANET (Advanced Research Projects Agency Network) est souvent considéré comme le précurseur de
l'Internet. Développé par le Département de la Défense des États-Unis, il permettait la communication entre
différents ordinateurs de recherche.

1973 Apparition de TCP/IP

Les protocoles TCP/IP (Transmission Control Protocol/Internet Protocol) ont été développés par Vinton Cerf
et Robert Kahn. Ils sont devenus les protocoles standards pour la communication sur Internet.

1983 Adoption officielle de TCP/IP et naissance d'Internet

ARPANET adopte officiellement TCP/IP comme standard de communication, marquant la transition vers ce
que nous connaissons aujourd'hui comme Internet.
1989 Invention du World Wide Web
1990
Tim Berners-Lee, au CERN, invente le World Wide Web, créant le premier navigateur web et les standards HTML,
HTTP et URL.

1993 Premier navigateur web graphique (Mosaic)

Mosaic, développé par Marc Andreessen et Eric Bina, est le premier navigateur web graphique, rendant le
web plus accessible au grand public.

1994 Création du W3C

Le World Wide Web Consortium (W3C) est fondé par Tim Berners-Lee pour développer des standards web.

2004 Émergence du Web 2.0

Le terme "Web 2.0" décrit une nouvelle phase du web caractérisée par des sites interactifs et collaboratifs
comme les réseaux sociaux et les blogs.
 2010 Expansion du Web mobile et des technologies modernes
et
au-delà L'essor des smartphones et des tablettes transforme l'accès au web. Technologies comme HTML5, CSS3 et
JavaScript (ES6+) permettent des applications web riches et réactives.

2020 IA et Machine Learning dans le Web

et
au-delà L'intégration croissante de l'intelligence artificielle (IA) et du machine learning dans les applications web,
avec des outils comme [Link], permet de créer des fonctionnalités avancées comme la
reconnaissance d'images, le traitement du langage naturel et les recommandations personnalisées.
Architechture Client
Serveur Serveur Comment ce fait
cette
communication ??

Réponse

Requête
 Protocole HTTP/HTTPS
HTTP (HyperText Transfer Protocol) est le protocole utilisé pour transférer des pages web
sur Internet. HTTPS est la version sécurisée de HTTP, utilisant SSL/TLS pour chiffrer les
communications entre le client et le serveur.

• Communication : HTTP est le fondement de toute communication de données sur le

World Wide Web, permettant le transfert de ressources comme des fichiers HTML, CSS,
et JavaScript

• Sécurité : HTTPS assure que les données échangées entre le client et le serveur sont
cryptées, protégeant ainsi la confidentialité et l'intégrité des informations
Protocole HTTP/HTTPS
Fonctionnement de HTTP
1. Requête HTTP : Le client envoie une requête HTTP au serveur pour une ressource
spécifique (par exemple, une page HTML).
2. Réponse HTTP : Le serveur traite la requête et renvoie une réponse HTTP contenant la
ressource demandée ou un code d'état HTTP (par exemple, 200 OK, 404 Not Found).

Fonctionnement de HTTPS
1. Établissement de la connexion sécurisée : Le client et le serveur établissent une
connexion sécurisée via le protocole SSL/TLS.
2. Requête et réponse HTTPS : Une fois la connexion sécurisée établie, les requêtes et
réponses HTTP sont échangées de manière chiffrée, assurant la sécurité des données.
Demande de ressources :
URL

Origin

Protocol Host Pathname Search

Https://[Link]/path/page?p1=v1&p2=v2…
Demande de ressources :
URL [Link]/[Link]

Client
[Link]

[Link] [Link]
Serveur
(exemple) [Link] [Link]
Demande de ressources :
URL [Link]/[Link]

Client
ERROR 404

[Link] [Link]
Serveur
(exemple) [Link] [Link]
Côté Technologies …?
Serveur
Client

Languages & Framworks SGBD

FRONT-END BACK-END
Côté Technologies …?
Serveur
Client

Languages & Framworks SGBD

FRONT-END BACK-END
Articulation générale
du cours
01 HTML
Markup Language - Content

Structure d'une page web

Objectifs

Apprendre les notions de base du langage HTML

Savoir créer une page web dotée d'une mise en page

et d'une mise en forme basiques
Langage de balisage hypertexte utilisé pour créer
et structurer le contenu d'une page web
HTML
HTML, ou HyperText Markup Language, est le langage standard utilisé pour créer des pages
web. Il permet de structurer et de présenter du contenu sur le Web. HTML utilise des balises
pour définir les différents éléments d'une page

— Structure : HTML permet de structurer le contenu de la page en utilisant des balises.

Chaque balise a une signification spécifique et définit un élément du document.

— Présentations : HTML détermine la présentation de base du contenu. Bien que le style soit
principalement géré par CSS, certaines balises HTML influencent directement l'affichage
du contenu (par exemple, <strong> pour du texte en gras).

— Hypertexte : Une caractéristique clé de HTML est sa capacité à créer des hyperliens,
permettant de naviguer d'une page à l'autre sur le Web.
Un peu d’histoire

1993 1997
HTML 1.0 HTML 3.2 & HTML 4.0

1 2 3 4 5

1991 1995 2008

Création de HTML HTML 2.0 HTML5
Importance du HTML

— Base de tout document web : HTML est la pierre angulaire de toute page web. Il définit la
structure du contenu et permet aux navigateurs de rendre correctement les documents.

— Accessibilité : Un bon balisage HTML est essentiel pour l'accessibilité, permettant aux
technologies d'assistance (comme les lecteurs d'écran) de lire et d'interpréter
correctement le contenu.

— SEO (Search Engine Optimization) : Une structure HTML bien conçue améliore le
référencement des pages web, aidant les moteurs de recherche à indexer et à classer les
pages plus efficacement.
Importance du HTML

— Interopérabilité : HTML est un standard ouvert, ce qui signifie qu'il est supporté par tous
les navigateurs et plateformes, garantissant que les pages web s'affichent correctement
pour tous les utilisateurs.

— Extensibilité et Intégration : HTML peut être facilement étendu et intégré avec d'autres
technologies web comme CSS pour le style et JavaScript pour les interactions
dynamiques, permettant de créer des expériences web riches et interactives
En Bref …
— HTML permet de décrire le contenu d’une page web – Contenu Statique

— Sa dernière version HTML 5 est sortie en octobre 2014

— Texte Formaté

— Langage descriptif – langage balisé

Tous les sites web utilisent HTML

Définition
Code HTML Navigateur Page web

<!DOCTYPE html>
<html>
<head>
<title> MyPage </title>
</head>
<body>

</body> (interpréteur)
</html>

HTML est un langage interprété

25

<!DOCTYPE html> Elément

<html>
<head>
<title> MyPage </title> Elément
</head>
<body>
<p> La persévérance est la clé de la réussit </p>
</body>
</html>

Le code HTML est une composition d'éléments

Language balisé
Un langage balisé utilise des balises pour définir des éléments au sein d'un
document. Ces balises sont généralement des mots-clés entourés de cheverons
(< >) et elles indiquent comment le contenu entre ces balises doit être interprété
par le navigateur.

Structure d'une Balise HTML

<>
< balise > xxxxxxxxxxxxxxx </ balise >
Language balisé
Structure d'une Balise HTML

< balise > xxxxxxxxxxxxxxx </ balise >

Balise d'ouverture Contenu de l'élément Balise de fermeture

(Opening Tag) (Element Content) (Closing Tag)

Balise ouvrante + Contenu + Balise fermante = élément

< Balises Orphelines >

Certaines balises ne nécessitent pas de balise de fermeture, on les appelle les balises autofermantes ou
orphelines. C’est le cas des balises : <img>, </ br> ou </ hr>
La balise ouvrante marque le début d'un élément HTML

<p> nom de la balise

La balise fermante marque la fin d'un élément HTML

</p> nom de la balise

Language balisé
Les attributs

attribut

< balise attribut = ‘valeur’ > xxxxxxxxxxxxxxx </ balise >

Nom de
Valeur de
l’attribut
l’attribut
Quelques Bonnes pratiques

Les balises doivent être imbriquées, sans se chevaucher :

<p> This is <strong> correct </strong> </p>

<p> This is <strong> incorrect </p> </strong>

Quelques Bonnes pratiques

Utiliser l' indentation pour mettre en évidence les blocs de code

Indentation et formatage d'un code HTML

<body> <body>
<img src = "[Link]"> <img src = "[Link]">
<p> <p>
HTML is HTML is
<strong> <strong>
fun! fun!
</strong> </strong>
</p> </p>
</body> </body>
Structure précise au navigateur quelle version de
<!DOCTYPE html>
Minimal <html dir="ltr" lang="fr-FR" >
HTML est utilisée

d’une page <head>

HTML <title> MonSite: Inscription </title>
<meta name=“” content=“” />
</head>
<body>
……
</body>
</html>
 <!DOCTYPE html>

La première ligne à écrire dans Indique au navigateur la version

le code d’une page web de HTML utilisée (HTML 5)

<!DOCTYPE html> une façon de dire au navigateur:

'Salut, je vais te parler en langage HTML, alors sois prêt!'
<!DOCTYPE html>
<html>
<head>
</head>
<body> Mode standard
</body>
</html>

<html>
<head>
</head>
<body> Mode Quirks
</body>
</html>
Structure Là où on va insérer tout le contenu de
<!DOCTYPE html>
Minimal
notre page

<html dir="ltr" lang="fr-FR" >

d’une page <head>
HTML <title> MonSite: Inscription </title>
<meta charset="UTF-8" />
</head>
<body>
……
</body>
</html>
Structure
<!DOCTYPE html>
Minimal <html dir="ltr" lang="fr-FR" >
d’une page <head> fournir des informations sur la page au

HTML navigateur
<title> MonSite: Inscription </title>
<meta charset="UTF-8" />
</head>
<body>
……
</body>
</html>
Structure
<!DOCTYPE html>
Minimal <html dir="ltr" lang="fr-FR" >
d’une page <head> fournir des informations sur la page au

HTML navigateur
<title> MonSite: Inscription </title>
<meta charset="UTF-8"/>
MonSite: Inscription

</head>
<body>
……
</body>
</html>
Structure
<!DOCTYPE html>
Minimal <html dir="ltr" lang="fr-FR" >
d’une page <head>
HTML <title> MonSite: Inscription </title>
<meta charset="UTF-8" />
</head> La page web peut représenter tous les
caractères
<body>
……
</body>
</html>
 <!DOCTYPE html>
<html>
Inscription <head>
<title> Inscription </title>
<meta charset=" " >
</head>
<body>
<h1>Mon séjour à Chefchaouen</h1>
</body>
</html>
 <!DOCTYPE html>
<html>
Inscription <head>
<title> Inscription </title>
<meta charset="UTF-8" >
</head>
<body>
<h1>Mon séjour à Chefchaouen</h1>
</body>
</html>
Structure
<!DOCTYPE html>
Minimal <html dir="ltr" lang="fr-FR" >
d’une page <head>
HTML <title> MonSite: Inscription </title>
<meta charset="UTF-8"/>
</head>
<body> Décrit le contenu visible du site

……
</body>
</html>
Interprétation du Arbre DOM
navigateur (Document Object Model)

<!DOCTYPE html>
html
<html>
<head>
<title> MonSite: Inscription </title>
<meta charset=“utf-8">
</head> head body
<body>
<img src = “header_logo.jpg” />
<p> HTML is fun! </p>
</body>

title meta img p

 Arbre DOM
(Document Object Model) Nœud = Boite

Nœuds Père | Nœuds fils

html → Boite dans boite

Nœuds frère
→ Comportement dépends de
head body la nature de la balise

BALISE BALISE BALISE

title meta BLOCK INLINE INLINE-BLOCK
img p
HTML – Plan général

Eléments de structuration Listes

Titres et paragraphes Lien hypertextes

Mise en forme du texte Formulaires

Eléments Multimédias Tableaux

 Eléments de structuration

— L'utilisation des éléments de structuration dans HTML et HTML5 est

essentielle

— Ces éléments améliorent non seulement la lisibilité et la maintenance

du code, mais ils jouent également un rôle crucial dans l'accessibilité et
l'optimisation des moteurs de recherche (SEO)
Balise de structuration
HTML
NON
SEMANTIQUE

<div> … </div>
<span> … </span>
L’élément <div>
1er élément div

— L'élément <div> permet de

regrouper un ensemble d'éléments
dans un bloc

— L'élément <div> n'a pas de

représentation visuelle

2éme élément div

L’élément <span>
L'élément <span> est une balise en ligne utilisée pour
appliquer des styles à des portions de texte

<div>
<span> Accueil </span>
<span> À propos </span>
<span> Services </span> élément div
1er élément
<span> Contact </span> Span
</div>
Balise de structuration
HTML
NON
SEMANTIQUE

<div> … </div>
<span> … </span>

Avant HTML5, on utilisait principalement des éléments de

conteneur génériques comme <div> et <span> pour structurer
nos pages. Ces éléments manquaient de sémantique, rendant le
code moins compréhensible
Puis… il y a HTML5
HTML5 introduit plusieurs nouveaux éléments de structuration sémantique qui
remplacent souvent <div> et <span>. Ces nouveaux éléments rendent le code plus
lisible et significatif

SEMANTIQUE

<header> … </header> <aside> … </aside>

<nav> … </nav> <section> … </section>
<main> … </main> <footer> … </footer>
Puis… il y a HTML5

<header> … </header>

— Représente l'en-tête d'une page ou d'une section

— Contient généralement des titres, des logos, des menus

de navigation ou d'autres informations introductives
Puis… il y a HTML5

<nav> … </nav>

— Utilisé pour regrouper des liens de navigation

— Il peut apparaître dans <header> ou ailleurs dans la page

Puis… il y a HTML5

<main> … </main>

— Contient le contenu principal de la page.

— Chaque document doit avoir au maximum un seul élément <main>

— Ne doit pas inclure les en-têtes, pieds de page ou barres de

navigation
Puis… il y a HTML5

<section> … </section>

— Définit une section d'un document, utilisée pour regrouper des

contenus logiquement reliés

— Peut contenir des titres (<h1>, <h2>, etc.) pour structurer la page
Puis… il y a HTML5

<footer> … </footer>

— Représente le pied de page d'une page ou d'une section

— Peut inclure des informations comme des droits d'auteur, des liens
de contact ou des mentions légales
Avantages des
éléments sémantiques

Meilleure Accessibilité Code Plus Lisible

Les lecteurs d'écran et autres technologies Le code est plus compréhensible pour les
d'assistance peuvent interpréter plus développeurs, facilitant la maintenance et la
facilement la structure de la page collaboration

SEO Amélioré Interopérabilité

Les moteurs de recherche peuvent Facilite l'interopérabilité entre différents
comprendre et indexer le contenu de manière systèmes et plateformes
plus efficace
HTML – Plan général

Eléments de structuration Listes

Titres et paragraphes Lien hypertextes

Mise en forme du texte Formulaires

Eléments Multimédias Tableaux

 Titres & paragraphes

— Les titres et paragraphes sont les éléments de base de la structuration

du contenu sur une page web

— Ils permettent d'organiser l'information et d'améliorer la lisibilité pour

les utilisateurs et les moteurs de recherche
Les titres
LES TITRES

Les titres définissent la hiérarchie du contenu

Six niveaux disponibles pour indiquer l'importance

<h1> … </h1>
<h2> … </h2>
<h3> … </h3>
<h4> … </h4>
<h5> … </h5>
<h6> … </h6>
Les paragraphes

LES
PARAGRAPHES

Les paragraphes servent à structurer du texte

Chaque paragraphe est défini par une balise <p>

<p> … </p>
HTML – Plan général

Eléments de structuration Listes

Titres et paragraphes Lien hypertextes

Mise en forme du texte Formulaires

Eléments Multimédias Tableaux

 Formatage du texte

— Le formatage permet de styliser et d'organiser le texte sur une page web

— Avec des balises spécifiques, vous pouvez mettre en gras, en italique,

souligner, ou même ajouter des citations

— Ces balises enrichissent l'apparence du contenu tout en conservant une

structure logique
Formatage du texte

GRAS

<b> … </b>
<strong> … </strong>
Formatage du texte

ITALIQUE

<i> … </i>
<em> … </em>
Formatage du texte

SOULIGNEMENT

<u> … </u>
Formatage du texte
CITATIONS

<blockquote> … </blockquote> Pour les longues citations

<q> … </q> Pour les citations courtes
<pre> … </pre> Préserve les espaces et retours à la ligne
Formatage du texte
INDICE
EXPOSANT

_…
^…
HTML – Plan général

Eléments de structuration Listes

Titres et paragraphes Lien hypertextes

Mise en forme du texte Formulaires

Eléments Multimédias Tableaux

 Eléments multimédias

— Les éléments multimédias permettent d'intégrer des contenus

interactifs comme des images, des vidéos et des fichiers audio
directement dans une page web.

— Ces balises enrichissent l'expérience utilisateur en rendant les pages

plus dynamiques et attrayantes.
Multimédias

IMAGES

<img src=‘…’ alt=‘…’/>

— Permet d'afficher des images dans une page web

— Attributs principaux :
— src : Chemin de l'image
— alt : Texte alternatif pour l'accessibilité
Multimédias

IMAGES

<img id=“I1” src=“img/[Link]” alt=“image1” height=“200” width=“300” />

Chemin vers Texte Hauteur Largeur

l’image alternatif
Multimédias

AUDIO & VIDEO

<video> … </video>
• Permet d'intégrer des vidéos avec des options comme
lecture automatique, contrôles, et sous-titres.
• Attributs principaux :
• controls : Affiche les contrôles de lecture
• autoplay : Lecture automatique
• loop : Lecture en boucle
Multimédias

AUDIO & VIDEO

<audio> … </audio>
— Permet d'intégrer des fichiers audios avec des options de
contrôle.
— Attributs principaux :
• controls : Affiche les contrôles de lecture
• autoplay : Lecture automatique
Multimédias

AUDIO & VIDEO

<source> … </source>
— Utilisée dans les éléments <video> et <audio> pour fournir
plusieurs formats de fichiers (compatibilité entre navigateurs).
— Attributs principaux :
• src : Source
• type : type de la ressource (exemple : ‘video/mp3’)
Multimédias

AUDIO & VIDEO

<track> … </track>

Permet d'ajouter des sous-titres ou descriptions textuelles

pour les vidéos
Multimédias

IFRAMES

<iframe> … </iframe>
— Permet d'intégrer du contenu externe, comme des vidéos
YouTube ou des cartes Google Maps
— Attributs principaux :
• src : URL du contenu intégré
• width / height : Dimensions de l’iframe
HTML – Plan général

Eléments de structuration Listes

Titres et paragraphes Lien hypertextes

Mise en forme du texte Tableaux

Eléments Multimédias Formulaires

 Les listes

— Les listes permettent d'organiser des éléments sous forme de points, de

numéros ou de descriptions

— Elles sont essentielles pour structurer le contenu de manière claire et

hiérarchisée

— HTML5 utilise trois types principaux de listes : listes ordonnées, listes

non ordonnées et listes de description
Listes

NON
ORDONNÉES

<ul>
<li> element1 </li>
<li> element2 </li>
<li> element3 </li>
</ul>
Listes

ORDONNÉES

<ol>
<li> element1 </li>
<li> element2 </li>
<li> element3 </li>
</ol>
Listes

ORDONNÉES

<ol type=‘A’ >

<li> element1 </li>
<li> element2 </li>
<li> element3 </li>
</ol>
Listes

ORDONNÉES

<ol type=‘A’ start=‘3’ >

<li> element1 </li>
<li> element2 </li>
<li> element3 </li>
</ol>
Listes
DE DEFINITION

<dl>
<dt> html </dt>
<dd> Langage pour créer des pages web </dd>

<dt>CSS</dt>
<dd>Langage pour styliser des pages web</dd>
</dl>
HTML – Plan général

Eléments de structuration Listes

Titres et paragraphes Lien hypertextes

Mise en forme du texte Formulaires

Eléments Multimédias Tableaux

 Les liens hypertexte

— Un lien hypertexte permet de connecter une ressource (page web,

fichier, section d'une page, ou autre) à un texte, une image, ou un
bouton cliquable.

— Ils sont définis avec la balise <a> et sont essentiels pour la navigation
sur le web
Liens & ancres
LIEN

<a href = "[Link]"> Université IBNZOHR </a>

URL

Chemin Absolu| Relatif Lien vers d’autres Element précis d’une

applications page “ANCRE”
mail, tel
Liens & ancres
<a href = "[Link]"> Université IBNZOHR </a>

URL

Chemin Absolu| Relatif Lien vers d’autres Element précis

applications d’une page “ANCRE”
mail, tel

<a href = “[Link]"> UA </a>

<a href = “Acceuil/[Link]"> Accueil </a>
Liens & ancres
<a href = "[Link]"> Université IBNZOHR </a>

URL

Chemin Absolu| Relatif Lien vers d’autres Element précis

applications d’une page “ANCRE”
mail, tel

<a href = “mailito:info@[Link]"> Contact </a>

<a href = “[Link] Telephone </a>
Liens & ancres
<a href = "[Link]"> Université IBNZOHR </a>

URL

Chemin Absolu| Relatif Lien vers d’autres Element précis d’une

applications page “ANCRE”
mail, tel

Une ancre en HTML est créée à l'aide de la balise <a>. Elle est principalement
utilisée pour créer des liens hypertextes permettant de naviguer entre les sections
d'une même page (liens d'ancrage).
Liens & ancres
Href=‘[Link]#Cont1’
<a href = “[Link]#Cont1"> Fait référence à l’élément avec
l’attribut id=‘Cont1’ qui se trouve
Université IBN ZOHR sur la page [Link]
</a>

[Link] [Link]

Université IBN
ZOHR

Lorem ipsum dolor sit amet, consectetur

adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua.

<div id =“Cont1"> … </div>

Liens & ancres

[Link]

Lorem ipsum dolor sit amet, consectetur

adipiscing elit, sed do eiusmod tempor <div id =“Haut"> … </div>
incididunt ut labore et dolore magna aliqua.

Haut <a href = “#Haut">Haut</a>

Liens & ancres

<a href = ‘page’ target=‘_blank’ > Université IBN ZOHR </a>

Fenêtre
cible

_self _blank
fenetre courante Nouvel onglet
HTML – Plan général

Eléments de structuration Listes

Titres et paragraphes Lien hypertextes

Mise en forme du texte Tableaux

Eléments Multimédias Formulaires

 Les Tableaux

Les tableaux HTML servent à organiser et afficher des données tabulaires

sous forme de lignes et de colonnes.

Ils sont idéaux lorsque le contenu nécessite une présentation structurée,

comme des données à comparer, trier ou croiser.
Tableaux
Cellule Colonne

Produit Prix Quantité Total

Pro1 60 dh 2 120 dh

Pro2 10 dh 32 320 dh

Total 440 dh ligne

3 Cellules
fusionnées
Tableaux
Produit Prix Quantité Total
Pro1 60 dh 2 120 dh
Pro2 10 dh 32 320 dh
Total 440 dh

<table> … </table>

On utilise <table> pour insérer une structure générale de tableau (cette balise n’est pas visible)
Tableaux

ligne

<table border = 1 >

<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
</table>

<tr> … </tr> - Définit une ligne dans le tableau

Tableaux
<table border = 1 >
Produit Prix Quantité Total
<tr>
<th>Produit</th>
<th>Prix</th>
<th>Quantité</th>
<th>Total</th>
</tr>
<tr> </tr> <th> … </th>
<tr> </tr>
<tr> </tr> Définit une cellule
</table>
d’en-tête
Tableaux
<table border = 1 >
<tr>
Produit Prix Quantité Total
<th>Produit</th>
Pro1 60 dh 2 120dh
<th>Prix</th>
<th>Quantité</th>
<th>Total</th>
</tr>
<tr><td> Pro1 </td>
<td> 60 dh </td> <td> … </td>
<td> 2 </td>
Définit une cellule de
<td> 120 dh </td>
</tr> données
<tr> </tr>
<tr> </tr>
</table>
Attributs des tableaux
HTML

— border : Ajoute une bordure autour des cellules.

— cellspacing : Définit l’espacement entre les cellules.
— cellpadding : Définit l’espace à l’intérieur des cellules.
— colspan : Fusionne plusieurs colonnes.
— rowspan : Fusionne plusieurs lignes.
Tableaux
<table border = 1 >
<tr>
Produit Prix Quantité Total
<th>Produit</th>
Pro1 60 dh 2 120 dh
<th>Prix</th>
Pro2 10 dh 32 320 dh
<th>Quantité</th>
Total 440 dh
<th>Total</th>
…
<tr>
<td > Total </td>
<td> … </td>
<td > </td>
<td > </td>
Définit une cellule de
<td> 440 dh </td> données
</tr>
</table>
Tableaux
<table border = 1 >
<tr>
Produit Prix Quantité Total
<th>Produit</th>
Pro1 60 dh 2 120 dh
<th>Prix</th>
Pro2 10 dh 32 320 dh
<th>Quantité</th>
Total 440 dh
<th>Total</th>
… Fusionner 3 cellules
<tr> horizontalement
<td colspan = 3 > Total </td>
colspan
<td> 440 dh </td>
permet de fusionner des
</tr>
</table>
colonnes horizontalement
Tableaux en HTML 5 <table> .. </table>

Produit Prix Quantité Total <thead> .. </thead>

Pro1 60 dh 2 120 dh <tbody> .. </tbody>

Pro2 10 dh 32 320 dh

Total 440 dh <tfoot> .. </tfoot>

<caption> - Ajoute une légende ou un titre au tableau

En HTML5, les éléments de tableaux restent principalement les mêmes qu'en HTML4,
mais certaines fonctionnalités et attributs ont été améliorées pour mieux structurer et
rendre les tableaux plus accessibles plus sémantique.
Donner le code HTML permettant de réaliser ce tableau

Ville Région Code Postal

Agadir
Sous-Massa 80000
Inezgane

Casablanca
Casa-Settat 20000
Mohammedia

Marrakech Marrakech-Safi 40000

Total : 5 villes
HTML – Plan général

Eléments de structuration Listes

Titres et paragraphes Lien hypertextes

Mise en forme du texte Tableaux

Eléments Multimédias Formulaires

 Les Formulaires

Les formulaire HTML permettent de collecter de manière interactive des

informations auprès des utilisateurs

Leur fonction principale est de fournir un moyen structuré et efficace de

recueillir des données spécifiques des visiteurs d'un site web.
110

formulaire … kézako?
Un formulaire est un élément d'une page Web qui
intègre des composants élémentaires, tels que :

— des zones de texte

— des cases à cocher

— des listes

— des boutons

— des labels
Formulaires
CRÉATION
D’UN
FORMULAIRE

<form> … </form>

Action Method
l'URL ou les données du Les méthodes HTTP
formulaire seront envoyées POST et GET

<form> est le conteneur principal pour un formulaire

Il permet de regrouper les champs d’entrée et de définir comment les
données doivent être envoyées
Formulaires
CRÉATION
D’UN
FORMULAIRE
POST ou GET

<form action=‘[Link]’ method=‘POST’> ... </form>

URL cible Page courante “#”

Eléments d’un formulaire

ORGANISATION

Groupe de champs similaires pour une meilleure <fieldset>

<fieldset> organisation <legend> Infos </legend>
Titre ou légende pour un groupe de champs dans <input type="text">
<legend> un <fieldset> </fieldset>
<label>
Asso cie un texte descr ip tifà un ch am p de
<label> fo r m ulair e,am élio r an t l’accessi3ilité.
Nom :
</label>
Eléments d’un formulaire

LISTE

Liste déroulante permettant de <select>

<select> choisir une option.
<option value=1> Option1 </option>
Définit une option dans une liste <option value=2> Option2</option>
<option> déroulante.
</select>
Eléments d’un formulaire

INSERTION

Champ de saisie polyvalent avec <input type=‘email’ name=‘mail’ />

<input> différents types (texte, email, date, etc.). <input type=‘password’ name=‘pwd’ />

<textarea rows="4" cols="50“ >

Champ de saisie pour des textes longs, sur
<textarea> plusieurs lignes.
Votre message
</textarea>
Eléments d’un formulaire

INSERTION

Champ de saisie polyvalent avec <input type=‘email’ name=‘mail’ />

<input> différents types (texte, email, date, etc.). <input type=‘password’ name=‘pwd’ />

<textarea rows="4" cols="50“ >

Champ de saisie pour des textes longs, sur
<textarea> plusieurs lignes.
Votre message
</textarea>
Eléments d’un formulaire
<INPUT>

<input type =‘text’> Champ de texte simple pour une courte saisie.

<input type =‘password’> Champ de texte masqué (mot de passe).

<input type =‘email’> Champ pour saisir une adresse e-mail (validation automatique).

<input type="number" name="age" min="0"

Champ pour des valeurs numériques, avec options min/max.
max="100">

<input type="date" name="birthdate"> Champ pour choisir une date (calendrier intégré).

<input type="search" name="query“

Champ de recherche, similaire à text mais stylisé pour des recherches.
placeholder="Recherche">
Eléments d’un formulaire
<INPUT>

<input type="checkbox" name="hobby"

Case à cocher pour sélectionner plusieurs options.
value="lecture">

<input type="radio" name="gender" value="male"> Bouton radio pour un choix unique parmi plusieurs options.

Barre coulissante pour sélectionner une valeur entre un

<input type="range" name="volume" min="0" max="100">
minimum et un maximum.

<input type="file" name="resume"> Permet à l'utilisateur de télécharger un fichier.

Champ pour sélectionner une couleur via un sélecteur de

<input type=’’color" value="Envoyer">
couleurs.
Eléments d’un formulaire

<INPUT>

<input type="submit" value="Envoyer"> Bouton pour soumettre le formulaire.

<input type="button" value="Cliquez ici"> Bouton simple, souvent utilisé avec JavaScript.

<input type="image" src="[Link]"

<input type="image" src="[Link]" alt="Envoyer">
alt="Envoyer">