Introduction au

design et
développement
web

Pr. Zakaria EL IDRISSI

Emploi du temps

2
Emploi du temps

3
 Avant tout

Objectif du module :
l’objectif c’est de permettre aux étudiants de maîtriser les
langages et outils de développement Web comme
HTML, CSS, JavaScript. Modes d’évaluation :
Examen de fin de semestre (Projet)
Contrôle continu + Quiz

Note du module :
50 % Examen final
30 % Contrôle Continu
20 % Quiz
Composants du module et volume horaire :
cours (20H) TP (20H) CC & Quiz (2H) Evaluation du projet (6H)

4
 Plan
Chapitre 1 : HTML5
• Structure de base d’une page en HTML 5 Chapitre 3 : JavaScript
• La création et l’affichage d’un document en HTML 5 • Introduction à JavaScript
• Les éléments Div, Section, Heading, Paragraph, Break, … • Variables, types de données et opérateurs
• Listes, styles, images, audios, vidéos, liens et tableaux, … • Structures conditionnelles (if/else)
• Les formulaires et frames • Boucles (for, while)
• Les commentaires en HTML 5 • Fonctions en JavaScript
• Comprendre le DOM (Document Object Model)
Chapitre 2 : CSS3
• Sélection des éléments HTML avec getElementById,
• Où écrire le CSS ? querySelector
• Syntaxe de base de CSS (sélecteurs, propriétés, valeurs) • Modification des éléments HTML et des styles via
• Les sélecteurs simples et combinés : classes, IDs, types JavaScript

• Les propriétés size, style, weight, height, color, … • Récupération des valeurs des champs de formulaire avec
JavaScript
• Les bordures, et bordures arrondies, …
• Validation basique des formulaires (champs obligatoires,
• Les marges et padding (intérieures et extérieures) types de données)
• Les systèmes de disposition : flexbox, grille • Messages d'erreur et validation en temps réel
• Positionnement : statique, relatif, absolu, fixe 5
 Introduction au Web
Comment fonctionne le web ?
• Le web est un ensemble de documents (pages web) accessibles via internet. Ces documents sont reliés par des
hyperliens.
• Lorsque nous tapons une URL (comme www.mundiapolis.ma) dans notre navigateur, celui-ci envoie une requête à
un serveur web. Ce serveur envoie ensuite le document HTML que le navigateur peut interpréter et afficher à l'écran
de notre ordinateur.

Figure 1 : Communication client-serveur web en HTTP

6
 Introduction au Web
Comprendre les rôles des principaux acteurs :
• Navigateur (Browser) : Un logiciel (comme Google Chrome, Firefox, Safari) qui interprète le code HTML, CSS,
JavaScript, et rend visuellement la page web.
• Serveur Web : Un ordinateur ou système qui stocke les fichiers d'un site web et les envoie aux navigateurs lorsqu'une
requête est faite.
• Client : L'utilisateur qui accède aux pages web via son navigateur.

Figure 1 : Communication client-serveur web en HTTP

7
 Outils pour le Développement Web
Éditeur de texte :
C'est un logiciel que nous utilisons pour écrire notre code. Il existe plusieurs éditeurs de texte adaptés pour le
développement web :
• Visual Studio Code (VSCode) : Un éditeur de texte populaire et puissant avec de nombreuses extensions.
• Sublime Text : Rapide, léger, et adapté aux débutants.
• Atom : Un autre éditeur de texte open-source facile à utiliser.
Navigateurs :
Nous utiliserons un navigateur pour tester et afficher les pages que nous développons. Il est recommandé d'utiliser des
navigateurs modernes comme Chrome ou Firefox pour le développement car ils offrent de bons outils de développement
(DevTools).

8
 Outils pour le Développement Web

Exercice 1 :
Installer un éditeur de texte (VSCode ou Sublime Text) et un navigateur
web moderne.

9
 Structure d'un site web : HTML, CSS, et JavaScript

HTML (HyperText Markup Language) :

• C'est le langage qui définit la structure et le contenu d'une page web.
• Il crée la structure de base et les éléments de la page (titres,
paragraphes, boutons, images, etc.).
• C'est comme le squelette d'une page web.

10
 Structure d'un site web : HTML, CSS, et JavaScript

CSS (Cascading Style Sheets) :

• Il s'agit du langage qui permet de styliser et mettre en page le contenu
HTML (couleurs, polices, mise en page, etc.).
• CSS s'occupe de la présentation de la page web. Il rend la page jolie
en ajoutant des couleurs, des polices, des marges, des alignements, etc.
• C'est comme le vêtement ou le style qu'on donne au squelette HTML.

11
 Structure d'un site web : HTML, CSS, et JavaScript
JavaScript :
• C'est un langage de programmation qui permet d'ajouter de
l'interactivité à une page web (comme les menus déroulants, les
sliders, etc.).
• Il permet de réagir aux actions de l'utilisateur, comme cliquer sur un
bouton, afficher un message, ou modifier le contenu de la page sans la
recharger.
• C'est comme le cerveau qui rend la page web dynamique et
interactive.

12
HTML 5
 Introduction à HTML
Structure minimale d'une page HTML :
Une page HTML suit toujours une structure de base, qui comprend :
• <!DOCTYPE html> : Indique au navigateur qu'il s'agit d'une page
HTML5.
• <html> : Contient tout le contenu de la page.
• <head> : Contient des informations sur la page.
• <meta charset="UTF-8"> : Spécifie le format d'encodage du contenu.
• <title> : Le titre de la page qui s'affichera dans l'onglet du navigateur.
• <body> : Contient tout ce qui sera affiché sur la page web. Figure 2 : Structure minimale d’un document html

Figure 3 : Titre du document HTML

14
 Introduction à HTML
Exercice :
Écrivez votre première page HTML dans votre éditeur de texte et enregistrez-la avec
l'extension .html (ex: index.html). Ouvrez ensuite le fichier dans votre navigateur pour
voir le résultat.

15
 Notion de balise
Qu'est-ce qu'une balise ?
Les balises HTML sont les éléments de base du langage HTML. Elles sont écrites entre des
crochets angulaires < > et contiennent généralement un contenu entre une balise d'ouverture
et de fermeture.

<balise attribut=valeur>Contenu</balise>

Balise ouvrante On change ces valeurs pour modifier l'apparence Balise fermante
de l'objet

16
 Notion de balise

Exemple :

Figure 4 : Notion de balise

17
 Notion d’encapsulation

Notion d’encapsulation :
Les balises doivent être correctement encapsulées :

<p> <p>
<b> <b>
Paragraphe Paragraphe
</b> </p>
</p> </b>

Exemple 1 : Code correct Exemple 2 : Code incorrect

<div> div
<h1>titre</h1> div racine
<h2>un sous titre</h2> h1
<p>un paragraphe avec
<em>des mots importants</em> h2
pour terminer avec une image h1 h2 p nœud
<img src="logo.gif" alt="un logo"/>
p
</p> em
</div>
img em img feuille
Exemple 3 : Code correct
Figure 5 : Encapsulation des balises HTML

18
 Les types d’éléments HTML
Les types d’éléments HTML :
Il existe deux types d'éléments : bloc (bloc) et en ligne (inline)
• Les éléments « bloc » s'étendent en largeur pour remplir totalement l'espace offert par son
conteneur. Par défaut, la boîte devient aussi large que son conteneur, occupant 100% de
l'espace disponible. Le nouvel élément bloc commence dans une nouvelle ligne.
• Les éléments « inline » s'occupent uniquement la largeur de leur contenu et peuvent
s'afficher côte à côte sur la même ligne.

Bloc Inline
h1 img span a

div

19
 Les types d’éléments HTML

Éléments de niveau bloc en HTML :

<address> <article> <aside> <blockquote> <canvas> <dd> <div>

<dl> <dt> <fieldset> <figcaption> <figure> <footer> <form>
<h1> - < H6> <header> <hr> <li> <main> <nav> <noscript>
<ol> <p> <pre> <section> <table> <tfoot> <ul>
<video>

Éléments de niveau inline en HTML :

<a> <abbr> <acronym> <b> <bdo> <big> <br>

<button> <cite> <code> <dfn> <em> <i> <img>
<input> <kbd> <label> <map> <object> <output> <q>
<samp> <script> <select> <small> <span> <strong> <sub>
<sup> <textarea> <time> <tt> <var>

20
 Les balises HTML

Titres :
Nous utilisons des balises de titre pour hiérarchiser notre textes (h1 étant le plus important, h6 le moins important).
• Titre H1 : Titre principal
➢ Grand, utilisé comme titre principal ou pour les en-têtes principaux
• Titre H2 : Sous-titre de niveau 2
➢ Un peu plus petit que H1, souvent utilisé comme sous-titre
• Titre H3 : Sous-titre de niveau 3
➢ Un peu plus petit que H2, souvent utilisé pour des sous-sections
• Titre H4 : Sous-titre de niveau 4
➢ Plus petit, utilisé pour des sous-sections encore plus détaillées
• Titre H5 : Sous-titre de niveau 5
➢ Plus petit que H4
• Titre H6 : Sous-titre de niveau 6
➢ Le plus petit des titres, utilisé pour des détails secondaires

21
 Les balises HTML
Exemple :

Niveau1
<h1> Niveau1 </h1>
<h2> Niveau2 </h2> Niveau2
<h3> Niveau3 </h3>
Niveau3
<h4> Niveau4 </h4>
<h5> Niveau5 </h5> Niveau4
<h6> Niveau6 </h6> Niveau5
Niveau6

Figure 6 : les titres en HTML

22
 Les balises HTML

Paragraphes :
Nous utilisons la balise <p> pour créer des paragraphes de texte.

<p> Ceci est un paragraphe. </p>

Liens hypertextes :
La balise <a> permet de créer des liens vers d'autres pages ou sites web.
href : c’est un attribut de la balise <a> pour annoncer l'endroit vers lequel on veut rediriger.

Liens hypertextes avec l’URL :

Si nous voulons faire un lien vers un autre site existant en ligne, rien de plus simple, il suffit d'utiliser la méthode de
copier l'URL du site entre " " à la suite de l'attribut href, comme ceci :

<a href="https://www.mundiapolis.ma"> Visiter mundiapolis.ma </a>

23
 Les balises HTML
Lien hypertexte d'une page à une autre sur le même site
Ce type de lien hypertexte s'appelle un lien relatif : il indique où trouver notre fichier HTML.
Si on veut aller de la page 1 à la page 2, voici ce que nous écrirons dans le fichier de page1.html :

<a href="page2.html"> Page 2 </a>

Lien hypertexte avec l’attribut target :

Pour ouvrir une page dans une nouvelle fenêtre, nous devons utiliser l’attribut target avec la valeur « _blank ».

<a href="https ://www.mundiapolis.ma/" title="MUNDIAPOLIS" target="_blank">Site officiel de Mundiapolis</a>

24
 Les balises HTML

Exercice 2 :
Modifiez votre première page HTML pour y ajouter :
• Un titre de niveau 1 et un sous-titre de niveau 2
• Un paragraphe de texte
• Un lien vers un autre site web

25
 Les balises HTML

• <strong> et <b> : Balises pour afficher du texte en gras, et pour signifier son importance.
• <em> et <i> : Balises pour afficher du texte en italique.
• <u> : Souligne du texte.
• <br> : Insère un saut de ligne.

<p> <strong> Important : </strong> Ce texte est en gras pour montrer son importance. </p>
<p> <em> Ce texte est en italique pour souligner une emphase. </em> </p>

Figure 7 : Le résultat de strong et em

26
 Les balises HTML

listes :
Les listes sont essentielles pour organiser du contenu sous forme de points ou de numéros sur une page web.
il existe trois types de listes principales :
• Les listes non ordonnées <ul> (Unordered List)
• Les listes ordonnées <ol> (Ordered List)
• Les listes de définition <dl> (Definition List)

27
 Les balises HTML

Les listes non ordonnées <ul> :

Les listes non ordonnées affichent les éléments sous forme de points ou puces (par défaut, des cercles noirs). Elles sont
utilisées lorsque l'ordre des éléments n'a pas d'importance.
Chaque élément de la liste est défini à l’aide de la balise <li> (List Item).
Syntaxe :

<ul>
<li>Élément1</li>
<li type="circle">Élément2</li>
<li type="square">Élément3</li>
</ul>
Figure 8 : Liste non ordonnée

28
 Les balises HTML

Les listes ordonnées (<ol>) :

Les listes ordonnées affichent les éléments sous forme numérotée. Elles sont utilisées lorsque l'ordre des éléments est
important.
Comme pour les listes non ordonnées, chaque élément est défini avec la balise <li>.
Syntaxe :
<ol>
<li type="I"> Élément1 </li>
<li type="i"> Élément2 </li>
<li type="A"> Élément3 </li>
<li type="a"> Élément4 </li>
</ol> Figure 9 : Liste ordonnée 1

<ol>
<li> Élément1 </li>
<li> Élément2 </li>
<li value="1">Élément3 </li>
<li> Élément4 </li>
Figure 10 : Liste ordonnée 2
</ol>
29
 Les balises HTML

Les listes de définitions (<dl>) :

Les listes de définitions sont utilisées pour présenter des paires terme-définition, comme dans un glossaire. Chaque terme
est suivi d'une ou plusieurs définitions.
On utilise la balise <dt> (Definition Term) pour définir un terme.
On utilise la balise <dd> (Definition Description) pour définir la description ou la définition du terme.
Syntaxe :

<dl>
<dt>Langages</dt>
<dd>C++</dd>
<dd>Java</dd>
<dd>Python</dd>
<dt>SGBD</dt>
<dd>MySQL</dd>
<dd>MS SQL Server</dd>
<dd>Oracle</dd>
Figure 11 : Liste de définition
</dl>

30
 Les balises HTML

Listes imbriquées :
Il est possible de créer des listes imbriquées, c’est-à-dire des listes à l’intérieur d’autres listes, pour organiser du contenu
plus complexe.
Syntaxe :

<ul>
<li> Élément1
<ul>
<li> Sous-élément 1.1 </li>
<li> Sous-élément 1.2 </li>
</ul>
</li>
<li> Élément2 </li>
</ul> Figure 12 : Liste imbriquée

31
 Les balises HTML

Exercice 3 :
1. Créez un fichier HTML nommé exercice-listes.html.
2. Dans ce fichier, créez les 4 types de listes suivants :
• Une liste non ordonnée de 4 fruits.
• Une liste ordonnée de 3 animaux.
• Une liste de définitions pour trois termes : HTML, CSS, et JavaScript.
• Une liste imbriquée avec une liste non ordonnée contenant une sous-liste ordonnée.

32
 Les balises HTML

tableaux :
Les balises de tableaux en HTML sont utilisées pour organiser des données en lignes et en colonnes.
Elles permettent de structurer les informations de manière claire et ordonnée, souvent utilisées pour afficher des
informations telles que des horaires, des statistiques, ou des données comparatives.

Structure de base d'un tableau :

Un tableau est composé de plusieurs balises :
• <table> : Définit le tableau dans son ensemble.
• <tr> : Représente une ligne dans le tableau (Table Row).
• <th> : Définit une cellule d'en-tête de tableau (Table Header).
• <td> : Définit une cellule de données (Table Data).

33
 Les balises HTML - Tableaux

Syntaxe :

<table>
<tr>
<th> Nom </th>
<th> Age </th>
<th> Ville </th>
</tr>
<tr>
<td> Mohamed </td>
<td> 25 </td>
<td> Casablanca </td>
</tr>
<tr>
Figure 13 : Une table
<td> Mourad </td>
<td> 30 </td>
<td> Marrakech</td>
</tr>
</table>

34
 Les balises HTML

Attributs importants pour les tableaux :

• border : Définit la largeur de la bordure du tableau.

<table border="1">
<!– contenu du tableau -->
</table>

• colspan : Permet de fusionner des cellules sur plusieurs colonnes (horizontalement).

<td colspan="2"> Cellule sur 2 colonnes </td>

• rowspan : Permet de fusionner des cellules sur plusieurs lignes (verticalement).

<td rowspan="2"> Cellule sur 2 lignes </td>

35
 Les balises HTML

Tableaux avec en-têtes et corps distincts :

Il est possible d’organiser un tableau en sections pour distinguer les en-têtes et le corps des données. Cela se fait à l’aide
des balises <thead>, <tbody>, et <tfoot>.
• <thead> : Contient les en-têtes du tableau.
• <tbody> : Contient le corps du tableau, où se trouvent les données.
• <tfoot> : Contient le pied de tableau, souvent utilisé pour les résumés ou totaux.

36
 Les balises HTML

Syntaxe :

37
 Les balises HTML

Exercice 4 :
1. Créez un fichier HTML appelé planning-cours.html.
2. Dans ce fichier, vous allez créer un tableau de planning de cours pour une semaine.
3. Le tableau doit contenir :
• Les jours de la semaine (Lundi à Vendredi) en colonnes.
• Les heures de cours en lignes (8h, 10h, 12h, 14h, 16h, 18h).
• Utilisez colspan et rowspan pour fusionner les cellules là où il y a des cours qui prennent plusieurs créneaux horaires.

38
Les balises HTML

39
 Les balises HTML

Exercice 5 :
Créez un tableau HTML qui ressemble à ceci :

40
 Les balises HTML

Multimédia :
Les balises multimédia en HTML sont utilisées pour intégrer différents types de contenu interactif, comme :
• Des images
• Des vidéos
• De l'audio

41
 Les balises HTML

multimédia - Images:
La balise <img> est utilisée pour afficher des images dans une page web. C'est une balise auto-fermante qui ne nécessite
pas de balise de fermeture.
Syntaxe :

<img src="chemin de l’image" alt="Description de l’image" />

Attributs importants :
• src : Spécifie le chemin ou l'URL de l'image.
• alt : Fournit une description alternative pour les lecteurs d'écran ou si l'image ne peut pas être affichée.
• width et height : Permet de définir la taille de l’image (facultatif).
Exemple :

<img src="chat.jpg" alt="Un chat mignon" width="200" height="150" />

42
 Les balises HTML

multimédia – audio :
La balise <audio> est utilisée pour ajouter des fichiers audio dans une page web. Vous pouvez
spécifier différentes sources audio à l’aide de la balise <source> pour garantir la compatibilité
avec tous les navigateurs.

Syntaxe :

43
 Les balises HTML

Attributs importants :
• controls : Ajoute des contrôles (lecture, pause, volume, etc.) pour l'audio.
• autoplay : Lance automatiquement l'audio au chargement de la page.
• loop : Joue l'audio en boucle.
• muted : Démarre l’audio en mode muet.

44
 Les balises HTML

multimédia – vidéo :
La balise <video> permet d'intégrer des vidéos dans une page web. Elle fonctionne de la
même manière que la balise <audio> avec la possibilité d'utiliser la balise <source> pour
spécifier plusieurs formats vidéo.

Syntaxe :

45
 Les balises HTML

Attributs importants :
• controls : Ajoute des contrôles (lecture, pause, volume, plein écran, etc.).
• autoplay : Lance automatiquement la vidéo au chargement de la page.
• loop : Joue la vidéo en boucle.
• muted : Coupe le son de la vidéo au démarrage.
• poster : Spécifie une image à afficher tant que la vidéo n’a pas démarré.

46
 Les balises HTML

multimédia – iframe :
La balise <iframe> permet d'intégrer du contenu provenant d'une autre page web, comme des vidéos YouTube, des cartes
Google Maps, etc.

Syntaxe :

<iframe src="https://www.youtube.com/embed/ID_VIDEO" width="560" height="315" allowfullscreen></iframe>

Attributs importants :
• src : Spécifie l'URL du contenu externe.
• width et height : Définissent la taille de l'iframe.
• allowfullscreen : Permet de visualiser l'iframe en mode plein écran.

47
 Les balises HTML

multimédia – embed :
La balise <embed> permet d'intégrer du contenu interactif, comme des applications flash ou des fichiers PDF. Elle est
souvent utilisée pour des contenus interactifs comme des animations ou des visualisations 3D.

Syntaxe :

<embed src="fichier.pdf" width="500" height="600" />

Attributs importants :
• src : Spécifie l'URL ou le chemin du fichier à intégrer.
• width et height : Définissent la taille du contenu intégré.

48
 Les balises HTML

Exercice 6 :
1. Créez un fichier HTML appelé presentation-multimedia.html.
2. Dans ce fichier, vous devez créer une page web qui présente les éléments multimédia suivantes :
• Une image avec la balise <img>.
• Un fichier audio (par exemple un son) avec la balise <audio> et des contrôles pour la lecture.
• Une vidéo avec la balise <video>, affichant une image de prévisualisation avec poster.
• Un iframe qui intègre une vidéo de YouTube ou une carte Google Maps.
• Un fichier PDF ou tout autre contenu interactif avec la balise <embed>.

49
 Les balises HTML

La balise <div> (Division) :

• La balise <div> est un conteneur générique utilisé pour structurer le contenu en blocs.
• Elle est très utile pour regrouper et organiser différents éléments de la page.
• Elle est souvent utilisée pour créer des sections visuelles ou pour appliquer des styles CSS à des groupes d'éléments.

Syntaxe :

50
 Les balises HTML

Exemple :

51
 Les balises HTML
La balise <span> :
La balise <span> est une balise inline générique utilisée pour appliquer des styles ou manipuler une petite portion de
texte ou d'éléments inline.
Elle est souvent utilisée pour styliser ou manipuler une partie spécifique d'un texte ou d'un contenu inline.
Syntaxe :

52
 Les balises HTML
La balise <section> :
• La balise <section> est une balise sémantique qui délimite une section d'une page.
• Elle est utilisée pour regrouper des contenus liés.
• Elle peut comporter plusieurs balises comme div, span, p, h, nav, …
• Elle est souvent utilisée pour structurer logiquement une page en différentes sections thématiques ou fonctionnelles.

Syntaxe :

53
 Les balises HTML

La balise <header> :
• La balise <header> est une balise sémantique utilisée pour définir l'en-tête d'un document ou d'une section.
• Elle peut contenir des titres, des logos, des outils de navigation, etc.

Syntaxe :

54
 Les balises HTML

La balise <nav> :
• La balise <nav> est une balise sémantique utilisée pour les zones de navigation. Elle contient des liens de navigation,
comme un menu ou un groupe de liens internes.
• Elle est souvent utilisée pour regrouper les liens de navigation d’un site ou d’une section.

Syntaxe :

55
 Les balises HTML

La balise <main> :
• La balise <main> est une balise sémantique utilisée pour délimiter le contenu principal de la page.
• Elle doit contenir le contenu central, en excluant les en-têtes, pieds de page, barres de navigation ou autres éléments
répétitifs.

Syntaxe :

56
 Les balises HTML

La balise <footer> :
• La balise <footer> est une balise sémantique utilisée pour définir le pied de page d'un document ou d'une section.
• Elle contient souvent des informations sur l'auteur, des liens additionnels, ou des droits d'auteur.

Syntaxe :

<footer>
<p> &copy; 2024 Mon Site Web. Tous droits réservés. </p>
</footer>

57
 Les balises HTML

Exercice 7 :
1. Créez un fichier HTML nommé blog.html.
2. Utilisez les balises <header>, <nav>, <main>, <section>, <footer>, <div>, et <span> pour organiser la structure de
votre page.
3. Utilisez <nav> pour créer un menu de navigation avec 3 liens : Accueil, À propos, et Contact.
4. Dans le <main>, créez deux sections :
• Une section "Dernières Nouvelles" avec deux <div> représentant deux blocs de contenu.
• Une section "Liens utiles" dans un <div> pour afficher une liste de liens utiles.
5. Ajoutez un en-tête (<header>) avec le titre de votre blog.
6. Ajoutez un pied de page (<footer>) avec les droits d'auteur.
7. Utilisez <div> pour organiser les blocs de contenu.
8. Ajoutez des styles simples à l’aide de <span> pour colorer une partie de texte.

58
 Les formulaires en HTML

La balise <form> :
Les formulaires HTML permettent de collecter des informations auprès des utilisateurs et de les envoyer à un serveur
pour traitement.
Ils sont constitués de différents champs d'entrée comme :
• Des zones de texte
• Des boutons
• Des cases à cocher
Notamment utilisés pour des pages de connexion, d'inscription ou des formulaires de contact.

Syntaxe :

<form action="/submit" method="POST" />

<!-- champs du formulaire ici -->
</form>

59
 Les formulaires en HTML
La balise <form> :
• La balise <form> est un conteneur pour tous les éléments du formulaire.
• Elle délimite le début et la fin du formulaire.
Attributs importants :
• action : Spécifie l'URL où les données du formulaire seront envoyées.
• method : Spécifie la méthode HTTP utilisée pour soumettre le formulaire (généralement GET ou POST).
✓ GET : Utilisé pour récupérer des informations, envoie les données dans l'URL, limité en taille et moins sécurisé.
✓ POST : Utilisé pour envoyer des données, envoie les données dans le corps de la requête, sans limite de taille, plus
sécurisé.

<form action="/submit" method="GET" /> <form action="/submit" method="POST" />

<input type="text" name="Nom" /> <input type="text" name="Nom" />
<input type="submit" value="Chercher" /> <input type="submit" value="Chercher" />
</form> </form>

https://www.mundiapolis.ma/recherche?Nom=mourad https://www.mundiapolis.ma/recherche

Exemple 1 : Avec la méthode GET Exemple 2 : Avec la méthode POST

60
 Les formulaires en HTML
Les différents types de champs d'entrée :
• La balise <input> est utilisée pour créer divers types de champs dans un formulaire.

Champs courants :
• Zone de texte (type="text") : Permet à l'utilisateur d'entrer du texte simple.

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

• Mot de passe (type="password") : Masque les caractères entrés par l'utilisateur.

<input type="password" name="Password" />

• Email (type="email") : Champ pour entrer une adresse email. Le navigateur valide l'adresse email avant de soumettre
le formulaire.
<input type="email" name="Email" />

61
 Les formulaires en HTML

• Bouton radio (type="radio") : Permet à l'utilisateur de choisir une option parmi un groupe d'options.

<input type="radio" name="Gender" value="Male" /> Homme

<input type="radio" name="Gender" value="Female" /> Femme

• Case à cocher (type="checkbox") : Permet à l'utilisateur de sélectionner une ou plusieurs options.

<input type="checkbox" name="Subscribe" value="Yes" /> Oui

• Bouton d'envoi (type="submit") : Soumet les données du formulaire.

<input type="submit" name="Submit" value="Envoyer" />

• Bouton de réinitialisation (type="reset") : Réinitialise les valeurs du formulaire.

<input type="reset" name="Reset" value="Réinitialiser" />

62
 Les formulaires en HTML

• Les champs textarea : La balise <textarea> est utilisée pour créer des zones de texte multi-lignes.

<textarea name="message" rows="4" cols="50" >

<!-- Écrire ici le contenu du message -->
</textarea>

Attributs importants :
• rows : Définit le nombre de lignes visibles.
• cols : Définit la largeur de la zone de texte.

63
 Les formulaires en HTML

• Les listes déroulantes : La balise <select> permet de créer une liste déroulante d'options parmi lesquelles l'utilisateur
peut choisir.
• Sous-balise importante : <option> pour chaque option dans la liste.

<select name="country">
<option value="france"> France </option>
<option value="usa"> États-Unis </option>
<option value="japan"> Japon </option>
</select>

64
Les formulaires en HTML

65
 Les formulaires en HTML

• Le label : La balise <label> permet de définir un label pour un champ de formulaire. En cliquant sur le label,
l'utilisateur sélectionne automatiquement le champ associé.
• Attribut : L'attribut for doit correspondre à l'attribut id du champ auquel il est lié.

<label for="nom"> Nom </label>

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

• <fieldset> : regroupe les champs de formulaire connexes.

• <legend> : donne un titre descriptif à ce groupe de champs.

<form>
<fieldset>
<legend>Informations personnelles</legend>
<input type="nom" id="nom" name="nom" /> <br>
<input type="email" id="email" name="email" /> <br>
</fieldset>
</form>

66
 Les formulaires en HTML

Les attributs importants pour les éléments de formulaire :

• name : Identifiant du champ, utilisé lors de l'envoi des données au serveur.
• id : Identifiant unique du champ, utilisé pour lier un label à un champ.
• value : Valeur prédéfinie pour le champ.
• placeholder : Texte indicatif à l'intérieur du champ avant que l'utilisateur ne commence à saisir.
• required : Rend un champ obligatoire (l'utilisateur ne peut pas soumettre le formulaire sans le remplir).
• disabled : Désactive le champ, l'utilisateur ne peut pas interagir avec ce champ.
• readonly : Rend un champ non modifiable par l'utilisateur, mais les données peuvent être envoyées.

67
 Les formulaires en HTML
Exercice 8 :
Créer un formulaire d'inscription complet pour un site web en utilisant les éléments de formulaire HTML tels que les
zones de texte, les boutons radio, les cases à cocher, les listes déroulantes, etc.
Consignes :
1. Créez un fichier inscription.html
2. À l'intérieur de ce fichier, créez un formulaire d'inscription avec les champs suivants :
• Nom (zone de texte obligatoire).
• Email (champ de type email obligatoire).
• Mot de passe (champ de type password obligatoire).
• Confirmation du mot de passe (champ de type password obligatoire).
• Sexe (boutons radio avec les options "Homme" et "Femme").
• Centre d'intérêt (cases à cocher avec plusieurs options comme "Sport", "Musique", "Voyages", etc.).
• Pays de résidence (liste déroulante avec plusieurs pays).
• Comment avez-vous découvert le site ? (zone de texte multi-lignes).
• Conditions d'utilisation (case à cocher pour accepter les conditions d'utilisation, obligatoire).
3. Ajoutez un bouton pour soumettre le formulaire et un bouton pour le réinitialiser.
4. Utilisez des balises <label> pour associer chaque champ avec son texte descriptif. 68
 Les commentaires en HTML

les commentaires :
• les commentaires permettent d’ajouter des notes dans le code sans qu'elles soient visibles par les utilisateurs lorsqu'ils
visitent la page web.
• Ils sont utiles pour documenter le code, expliquer certaines sections ou laisser des rappels pour d’autres développeurs
ou vous-même.
• Les navigateurs ignorent les commentaires lors du rendu de la page.

Syntaxe :

<!-- Écrire ici le contenu du message -->

Règles importantes :
• Un commentaire commence par <!-- et se termine par -->.
• Le contenu entre ces deux marqueurs ne sera pas affiché dans le navigateur.
• Les commentaires peuvent occuper plusieurs lignes.

69
 Les commentaires en HTML
Exemples :
• Commentaire sur une seule ligne :
<!-- Ce paragraphe présente un produit -->
<p> Découvrez notre nouveau produit ! </p>

• Commentaire sur plusieurs lignes :

<!–
Ce formulaire permet aux utilisateurs de s'inscrire à l'université Mundiapolis. Veuillez
vérifier que les champs obligatoires sont remplis avant d'envoyer le formulaire.
-->
<form>

</form>

• Masquer du code temporairement :

<!--
<p> Découvrez notre nouveau produit ! </p>
-->
70
 Les attributs en html

Les attributs :
permettent de fournir des informations supplémentaires sur un élément HTML. Ils apparaissent dans la balise d’ouverture
d’un élément et sont souvent utilisés pour définir les propriétés ou le comportement de l’élément.
• L'attribut id : permet d'identifier un élément unique dans une page HTML. Chaque valeur d'id doit être unique, c'est-
à-dire qu'elle ne doit pas être répétée sur d'autres éléments.
• Cet attribut est utile pour cibler un élément particulier dans le CSS ou en JavaScript (pour appliquer un style ou
manipuler l'élément).

<p id="valeur_id"> Contenu </p>

• L'attribut class : est utilisé pour appliquer un nom de classe à un ou plusieurs éléments. Contrairement à id, plusieurs
éléments peuvent avoir la même valeur de classe.
• Une classe est utilisée principalement pour appliquer des styles CSS ou pour regrouper des éléments afin de les
manipuler ensemble avec JavaScript.

<p class="nom_classe"> Contenu </p>

71