Développement des Applications Web
Le Web Statique
A.U 2024-2025 Pr. Dr. Ichrak KHOULQI
Plan
[Link]
[Link] formulaires
2
Introduction Web
➢ Le Web a été créé en 1989 par un ingénieur anglais nommé Tim Berners-
Lee.
➢ Il a développé le concept du World Wide Web pour permettre aux
utilisateurs de partager des informations via internet en utilisant des pages
interconnectées.
Introduction Web
➢ Définition simple : Un site web est un ensemble de fichiers HTML (des
pages) qui sont stockés sur un ordinateur (serveur) et connectés en
permanence à internet.
➢ Description plus complète (Random House Dictionary 2016):
"Un site web est un groupe de pages sur le World Wide Web, considéré
comme une entité unique, généralement géré par une personne ou une
organisation, et consacré à un sujet unique ou à plusieurs sujets
étroitement liés."
Introduction Web
➢ Site statique :
Le contenu est fixe et identique pour tous les utilisateurs.
Exemple : Une page web d’entreprise présentant les services avec des informations
inchangées.
➢ Site dynamique :
Le contenu change en fonction des interactions ou des informations venant d'une base de
données.
Exemple : Un site de commerce en ligne où les produits et prix sont mis à jour en temps
réel.
➢ Application web :
Une application accessible via un navigateur, offrant des fonctionnalités interactives.
Exemple : Gmail ou Google Docs, où les utilisateurs peuvent interagir et modifier le
contenu en temps réel.
➢ Attention :
Ne confondez pas un site dynamique (qui adapte le contenu) avec un site à jour (mis à
jour manuellement).
Introduction Web
➢ HTML (Hyper Text Markup Language) est le langage de base utilisé pour structurer et
présenter des pages web.
➢ Origine : Il découle du SGML (Standard Generalized Markup Language), qui
formalise l'écriture des documents avec des balises pour indiquer comment le contenu
sera affiché dans un navigateur web.
➢ Compatibilité : HTML est compatible avec toutes les plateformes (Windows, Mac,
Unix, etc.), ce qui en fait un standard universel.
➢ Transmission : Les informations codées en HTML sont transmises via le protocole
HTTP (Hypertext Transfer Protocol) et ensuite interprétées par le navigateur
(browser) pour afficher la page web.
HTML
➢ HTML est un langage à balises utilisé pour structurer les pages web.
➢ Les balises ou tags sont des instructions données au navigateur, encadrées par les signes <
et >, comme <html>.
➢ Deux types de balises :
• Balises uniques : Elles ne nécessitent pas de balise de fermeture.
Exemples : <br> (saut de ligne), <hr> (ligne horizontale), <img> (image).
• Balises par paire : Elles entourent le texte qu'elles modifient.
La balise de fermeture inclut un /.
Exemple : <p>...</p> pour un paragraphe.
HTML
➢ Commentaires : Les commentaires, non visibles sur la page, s’écrivent entre <!-- et -->.
➢ Exemple : <!-- Ce texte est un commentaire -->
➢ Insensibilité à la casse : Les balises HTML peuvent être écrites en majuscules ou
minuscules, elles seront interprétées de la même manière.
Exemple : <HTML> ou <html> fonctionnent de façon identique.
Page HTML
<HTML>
<HEAD>
Infos
en-tête </HEAD>
<BODY>
Contenu de votre page
corps
</BODY>
</HTML>
Marqueur de style
➢ Modifient la typographie du texte.
➢ Peuvent être imbriqués dans d'autres marqueurs de style.
Balise de style Effet Visuel
<STRONG> …</STRONG> ou <B>...</B> Gras (Bold)
<I> … </I> Italique
<U>...</U> Souligné
<FONT SIZE=?>...</FONT> Taille de caractère (Font size)
<FONT COLOR="#$$$$$$"> </FONT> Couleur de caractère (Font color)
<!--*** --> Commentaires
<BIG> et </BIG> Police plus grande
<SMALL> et </SMALL> Police plus petite
Marqueur de style
Balise de style Effet Visuel
<PRE>...</PRE> texte pré-formaté
<Q> et </Q> Encadre le texte par des guillemets
<SUB> et </SUB> Texte en Indice
<SUP> et </SUP> Texte en Exposant
<ABBREV> et </ABBREV> Abréviation
<ACRONYM> et </ACRONYM> Acronyme
<note> et </note> Pour écrire une note
<fn> et </fn> Permet d'avoir une note de fin de page
<ADDRESS>...</ADDRESS> pour indiquer une adresse
<AU> et </AU> L'auteur
<CITE> et </CITE> Citation
Attribut
➢ Une balise marque une action pour le browser (ce qu'il doit faire...).
➢ Un attribut précise les modalités de cette action (comment il doit le faire).
➢ <BALISE ATTRIBUT="Valeur" > Texte</BALISE>
Exemple : <H1 ALIGN="LEFT"> Texte aligné à gauche </H1>
Attribut Valeur Effet Visuel
LEFT LEFT
ALIGN RIGHT RIGHT
CENTER CENTER
JUSTIFY JUSTIFY
Paragraphes & Séparateurs
➢ Balises pour paragraphes et saut de ligne
• <p> : Définit un paragraphe.
• <br> : Insère un saut de ligne.
➢ Balises pour ligne horizontale
• <hr> : Insère une ligne horizontale.
➢ Attributs des séparateurs horizontaux
• Taille : Contrôle l'épaisseur de la ligne.
• Largeur : Définit la longueur de la ligne (en pixels ou en pourcentage).
• Alignement : Positionne la ligne horizontalement (gauche, centre, droite).
Paragraphes & Séparateurs
➢ Exemple d'utilisation avec attributs
• Balise : <hr size=5 width=20% align=left>
▪ SIZE : Épaisseur de la ligne.
▪ WIDTH : Largeur de la ligne.
▪ ALIGN : Alignement de la ligne.
➢ Valeurs par défaut
▪ Épaisseur : 2 pixels.
▪ Alignement : Centré.
▪ Largeur : 100% de la fenêtre.
➢ Conseil
▪ Utiliser des pourcentages pour la largeur permet une meilleure adaptabilité sur différents
écrans.
Caractères spéciaux
Les listes
➢ Ordonnée, non ordonnée et de definition(Peuvent s'imbriquer)
Conteneur Type de liste Effet Visuel
<ol> Ordonnée 1. article1
<li> article 1 </li> 2. article2
<li> article 2 </li>
</ol>
<ul> Non ordonnée • article1
<li> article 1 </li> • article2
<li> article 2 </li>
</ul>
<dl> De définition article1
définition
<dt>Terme</dt>
<dd>Définition</dd>
</dl>
Les tableaux
[Link] principales pour un tableau
•<table> : Définit un tableau.
•<caption> : Ajoute un titre au tableau.
[Link] du tableau
•<tr> : Définit une ligne dans le tableau.
•<th> : Cellules d'en-tête, généralement utilisées pour les titres de colonnes.
•<td> : Cellules contenant les données ou valeurs du tableau.
<table>
Exemple: <caption>Le titre du tableau</caption>
<tr>
<th>En-tête 1</th>
<th>En-tête 2</th>
</tr>
<tr>
<td>Donnée 1</td>
<td>Donnée 2</td>
</tr>
</table>
Bordures, Espaces et Dimensions des Tableaux
1. Bordures et Espacement
•<table border=?> : Afficher ou ajuster les bordures du tableau.
•<table cellspacing=?> : Espace entre les cellules.
•<table cellpadding=?> : Espace entre le bord et le contenu des cellules.
2. Dimensions du Tableau et des Cellules
•<table width=?> : Largeur du tableau (pixels ou pourcentage).
•<td width=?> : Largeur des cellules (pixels ou pourcentage).
Fusion, Alignements et Couleur des Cellules
[Link] de Cellules
•<td rowspan=?> : Fusion de lignes dans une cellule.
•<td colspan=?> : Fusion de colonnes dans une cellule.
[Link]
•<tr align=left/center/right> : Alignement horizontal des lignes.
•<td align=left/center/right> : Alignement horizontal des cellules.
•<tr valign=top/middle/bottom> : Alignement vertical des lignes.
•<td valign=top/middle/bottom> : Alignement vertical des cellules.
[Link] des Cellules
•<td bgcolor="#$$$$$$"> : Définir la couleur d'arrière-plan d'une cellule.
Exemple
Images en HTML
[Link] images sur le Web
•Formats courants : .bmp, .jpeg, .gif, .png
•Les images peuvent ralentir le chargement des pages, il est donc
essentiel de bien les optimiser.
[Link] de base
•<img src="Adresse de l'image"> : Affiche une image située à une
URL ou chemin spécifique.
•Exemple : <img src="chemin/[Link]" alt="Texte remplaçant
l'image">
Attributs des Images
[Link] de l'image
•align=top, middle, bottom, left, right : Positionnement de l'image par rapport
au texte.
[Link] alternatif (ALT)
•alt="Texte" : Affiche un texte si l'image ne se charge pas ou pour des lecteurs
d'écran.
[Link] et Bordures
•width=? et height=? : Définit la hauteur et la largeur de l'image (en pixels).
•border=? : Ajoute une bordure autour de l'image (en pixels).
Les couleurs
➢ Noms de couleurs :
• Exemples : aqua, black, fuchsia, gray,
green, lime, red, yellow, etc.
➢ Couleurs Hexadécimales :
• Une couleur est définie par 6 chiffres
hexadécimaux allant de 0 à F.
• Format : "#RRGGBB" où RR, GG, et
BB représentent les niveaux de Rouge,
Vert, et Bleu.
➢ Exemples de codes couleurs
hexadécimaux :
• #8E236B : Un ton de violet foncé
• #32CD99 : Vert moyen
• #FF2400 : Rouge vif
• #8FBC8F : Vert clair
Arrière-plan
Les différents attributs : dans la balise <body>
Attribut Effet Visuel
BACKGROUND="image" affiche l'image en arrière-plan
BGCOLOR="nom_de_la_couleur affiche la couleur demandée en arrière-plan
ou #XXXXXX"
LINK="couleur"
Couleur des liens hypertexte
ALINK="couleur" Couleur du lien actif
VLINK="couleur"
Couleur des liens déjà visités
TEXT="couleur"
Couleur du texte par défaut
Ancrage
➢ Lien basique (cliquable)
• Syntaxe : <a href="URL">Texte cliquable</a>
• Exemple : <a href="[Link] le site</a>
➢ Types de liens
• Vers un site web externe : <a href="[Link] vers un
site externe</a>
• Vers un fichier local : <a href="../[Link]">Lien vers fichier local</a>
• Vers une ressource FTP : [Link]
• Vers un email : [Link]
➢ Liens internes (Signet)
• Marquer un endroit : Utiliser name ou id pour marquer une section du document.
Exemple : <a id="section1"></a>
• Lien vers le signet :
<a href="[Link]#section1">Cliquez ici pour voir le contenu</a>
Exercice 1
Créez une page HTML qui présente les informations suivantes en utilisant les bonnes
balises pour les listes :
[Link] liste non ordonnée des différentes technologies web : HTML, CSS, JavaScript.
[Link] liste ordonnée des étapes pour créer une page web :
1. Créer un fichier HTML.
2. Ajouter du contenu à la page.
3. Enregistrer et afficher dans un navigateur.
[Link] liste de définitions pour expliquer les termes suivants :
• HTML : Langage de balisage utilisé pour structurer le contenu d'une page web.
• CSS : Langage de style utilisé pour présenter le contenu d'une page web.
• JavaScript : Langage de programmation qui permet de rendre les pages
interactives.
Correction
<h2>Technologies Web (Liste non <h2>Définitions des technologies Web
ordonnée)</h2> (Liste de définition)</h2>
<ul> <dl>
<li>HTML</li> <dt>HTML</dt>
<li>CSS</li> <dd>Langage de balisage utilisé
<li>JavaScript</li> pour structurer le contenu d'une page
</ul> web.</dd>
<h2>Étapes pour créer une page Web <dt>CSS</dt>
(Liste ordonnée)</h2> <dd>Langage de style utilisé pour
<ol> présenter le contenu d'une page
<li>Créer un fichier HTML.</li> web.</dd>
<li>Ajouter du contenu à la
page.</li> <dt>JavaScript</dt>
<li>Enregistrer et afficher dans un <dd>Langage de programmation
navigateur.</li> qui permet de rendre les pages
</ol> interactives.</dd>
</dl>
Exercice 2
[Link]ée un tableau de 2 lignes et 2 colonnes.
[Link] la première ligne, fusionne les deux cellules pour afficher "Titre du
tableau".
Correction
<table border="1">
<tr>
<td colspan="2" align="center">Titre du tableau</td>
</tr>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
</table>
Exercice 3
[Link]ée un tableau de 3 lignes et 2 colonnes.
[Link] la première colonne de la première ligne, utilise rowspan pour
fusionner deux cellules.
Correction
<table border="1">
<tr>
<td rowspan="2" align="center">Cellule A</td>
<td>Cellule B</td>
</tr>
<tr>
<td>Cellule C</td>
</tr>
</table>
Exercice 4
1. Crée un tableau de 4 lignes et 3 colonnes.
2. Dans la première ligne, utilise colspan pour fusionner les trois
colonnes et afficher "En-tête".
3. Dans la deuxième ligne, utilise rowspan pour fusionner la première
colonne sur deux lignes.
Correction
<table border="1">
<tr>
<td colspan="3" align="center">En-tête</td>
</tr>
<tr>
<td rowspan="2" align="center">Cellule 1</td>
<td>Cellule 2</td>
<td>Cellule 3</td>
</tr>
<tr>
<td>Cellule 4</td>
<td>Cellule 5</td>
</tr>
</table>
Exercice 5
Créez un tableau pour afficher l'évaluation des étudiants dans différentes matières. Le tableau
doit avoir les éléments suivants :
[Link] en-tête qui indique le titre "Évaluation des Étudiants".
[Link] colonnes suivantes :
1. Nom de l'étudiant
2. Mathématiques (avec des scores individuels pour chaque étudiant)
3. Sciences
4. Histoire
5. Moyenne (calculée à partir des scores en Mathématiques, Sciences et Histoire)
[Link] tableau doit contenir 5 lignes d'évaluation pour 5 étudiants, avec des scores fictifs dans
chaque matière.
[Link] première ligne doit fusionner les cinq colonnes pour l'en-tête.
Correction
<table border="1"> <tr> <tr>
<tr> <td>Marie Curie</td> <td>Sophie
<td colspan="5" <td>85</td> Durand</td>
align="center">Évaluation des <td>92</td> <td>90</td>
Étudiants</td> <td>84</td> <td>92</td>
</tr> <td>87.00</td> <td>95</td>
<tr> </tr> <td>92.33</td>
<td>Nom de l'étudiant</td> <tr> </tr>
<td>Mathématiques</td> <td>Paul Martin</td> <tr>
<td>Sciences</td> <td>78</td> <td>Lucie
<td>Histoire</td> <td>80</td> Petit</td>
<td>Moyenne</td> <td>75</td> <td>70</td>
</tr> <td>77.67</td> <td>68</td>
<tr> </tr> <td>75</td>
<td>Jean Dupont</td> <td>71.00</td>
<td>85</td> </tr>
<td>90</td> </table>
<td>88</td>
<td>87.67</td>
</tr>
Intéractivité
Les Formulaires
Les formulaires
Les formulaires offrent aux créateurs de pages web la possibilité d'ajouter
des éléments interactifs permettant une interaction directe avec les
utilisateurs. La structure de base d'un formulaire s'écrit ainsi :
<form>…</form>.
Les formulaires
➢ Fonction des formulaires
Les formulaires sont des zones sur une page web qui permettent de
collecter des informations auprès des visiteurs, favorisant ainsi
l'interactivité.
➢ Exemples d'utilisation :
• Questionnaires : Recueillir des réponses sur divers sujets.
• Sondages : Permettre aux visiteurs de voter ou de donner leur
opinion.
• Renseignements personnels : Adresse, email, etc.
Types de Champs dans les Formulaires
➢ Zones d'interaction :
1. Zone privée : Collecte de mots de passe ou informations
confidentielles.
2. Menus déroulants et choix de rubriques : Sélectionner des options
spécifiques.
3. Zone de texte : Pour forums, blogs, etc.
4. Affichage de texte ciblé : Messages personnalisés selon l’utilisateur
Principe des Formulaires
➢ Mise à disposition des zones de saisie
• Permettre aux visiteurs d’interagir avec la page à travers des champs
de texte, des menus de sélection, et d'autres éléments de choix.
• Exemples : Zones de texte, cases à cocher, menus déroulants.
➢ Récupération des données soumises
Les informations fournies par l’utilisateur via un formulaire HTML sont
envoyées vers une page web sur le serveur pour être traitées. Le serveur
peut ensuite les traiter en les stockant dans une base de données, en les
affichant ou en envoyant un email, selon la logique définie par le script
côté serveur (ex. : PHP).
Principe des Formulaires
➢ Validation et traitement des données
• Les données collectées sont validées et traitées à l’aide de scripts
dynamiques, comme en PHP.
• Exemple : Vérification d'un mot de passe ou d’un formulaire.
➢ Stockage et réutilisation des données
• Les données peuvent être stockées dans une base de données (ex :
SQL) et réutilisées ou affichées sur une autre page.
• Exemple : Après connexion, l'utilisateur accède à une zone privée
avec un message de bienvenue.
Les Formulaires
➢ Définition:
Un formulaire est constitué d'un ou plusieurs éléments d'entrée,
regroupés dans la balise <form>.
➢ Exemple de formulaire simple :
Les Formulaires
➢ Champs d’un formulaire :
Boutons, zones de saisie, listes déroulantes, cases à cocher, etc.
➢ Traitement des données :
Les données saisies sont ensuite envoyées au script défini dans l’attribut
action pour traitement.
Les Formulaires
Quelques attributs:
➢ ACTION
•L’URL où les données du formulaire seront envoyées pour traitement.
➢ METHOD :
•POST : Envoie les données de manière sécurisée (non visible dans l'URL).
•GET : Envoie les données en les ajoutant à l'URL.
➢ ENCTYPE :
•Spécifie comment les données du formulaire sont encodées avant d'être
envoyées.
•APPLICATION/X-WWW-FORM-URLENCODED : Format par défaut qui
encode les données dans une forme lisible pour l'URL (pour la plupart des
formulaires simples).
•MULTIPART/FORM-DATA : Utilisé lorsque le formulaire contient des fichiers
(avec <input type="file">), permettant l’envoi de fichiers et d'autres données.
➢ ACCEPT (facultatif) :
•Définit les types MIME (Multipurpose Internet Mail Extensions) acceptés lors
de l’envoi de fichiers. Le MIME spécifie le type de fichier comme "image/jpeg"
ou "application/pdf", pour indiquer quel type de contenu est accepté.
Les Formulaires
➢ <input> : Balise essentielle des formulaires.
•Attributs :
✓ name : Identifie l'objet.
✓ id : Référence l'objet.
✓ value : Spécifie une valeur par défaut.
✓ type : Définit le type d'entrée (text, password, checkbox, radio, file,
submit, reset, button, image, hidden).
➢ <textarea> : Crée une zone de texte.
Attributs : cols, rows, name, readonly, disabled.
➢ <select> : Liste déroulante (un choix) ou menu (plusieurs choix).
Attributs : name, multiple, disabled, size.
➢ <option> : Représente une option dans une liste.
Attributs : value, selected.
La balise <INPUT>
➢ L'attribut value :
Permet de spécifier la valeur par défaut d'un champ.
➢ L'attribut type :
Précise le type d'élément que représente la balise <INPUT> :
[Link] : Un champ de saisie pour une ligne de texte.
[Link] : Un champ de saisie où les caractères apparaissent sous
forme d'astérisques.
[Link] : Cases à cocher pouvant avoir deux états : checked et
unchecked.
[Link] : Un bouton permettant de faire un choix parmi plusieurs
options proposées.
Un champ de texte
➢ text : Crée un champ de saisie pour une ligne de texte.
•Attributs :
✓ size : Définit la taille visible du champ.
✓ maxlength : Spécifie le nombre maximal de caractères que
l'utilisateur peut saisir.
Exemple:
Un mot de passe
➢ password : Crée un champ de saisie où les caractères apparaissent
sous forme d'astérisques.
•Attributs :
✓ size : Définit la taille visible du champ.
✓ maxlength : Limite le nombre de caractères que l'utilisateur
peut saisir.
Exemple :
Cases à cocher
➢ La balise <input> permet de représenter une liste de cases à cocher où
plusieurs choix sont possibles.
➢ Attributs :
•type="checkbox" : Définit le champ comme une case à cocher.
•name : Définit le nom de la donnée (obligatoire).
•value : Spécifie la valeur associée au choix.
•checked : Indique si la case est cochée par défaut.
Exemple:
Bouton radio
➢ La balise <input> permet de représenter une liste de boutons radio où un seul choix est
possible.
➢ Attributs :
•type="radio" : Définit le champ comme un bouton radio.
•name : Définit le nom de la donnée (obligatoire) et doit être le même pour tous les
boutons radio du groupe.
•value : Spécifie la valeur associée à chaque option.
•checked : Indique si un bouton est sélectionné par défaut.
Exemple:
Bouton radio
Fichier attaché
➢ Permet à l'utilisateur d'attacher un fichier (comme une pièce jointe).
➢ L'attribut type="file" permet d'ouvrir une fenêtre pour parcourir et
sélectionner un fichier.
➢ Pour envoyer le contenu du fichier et non seulement son chemin, il
faut :
•Utiliser enctype="multipart/form-data" pour spécifier le bon
encodage.
•Employer la méthode POST pour l'envoi du fichier.
Exemple:
Inclure des données cachées
➢ Permet d'envoyer des données invisibles pour l'utilisateur mais
nécessaires au script qui traite le formulaire.
➢ Utilise un paramètre fixe qui sera envoyé au serveur.
➢ Balise utilisée : <input> avec l'attribut type="hidden".
Exemple:
La balise TEXTAREA
➢ TEXTAREA permet de définir une zone de saisie multilignes et plus vaste qu'un champ
de texte classique.
➢ Elle possède les attributs suivants :
[Link] : nombre de caractères par ligne.
[Link] : nombre de lignes.
[Link] : nom associé au champ.
[Link] : texte par défaut, envoyé si non modifié par l'utilisateur.
[Link] : empêche l'utilisateur de modifier le texte par défaut.
Exemple:
La balise SELECT
➢ La balise <SELECT> présente une liste de propositions :
•Soit sous forme de liste déroulante (un seul choix possible).
•Soit sous forme de menu (plusieurs choix possibles).
➢ La balise <option> permet de définir chaque option dans le menu.
➢ Attributs de <SELECT> :
[Link] : représente le nom associé au champ.
[Link] : rend la liste désactivée (grisée).
[Link] : nombre de lignes visibles dans la liste.
[Link] : permet à l'utilisateur de sélectionner plusieurs options.
La balise SELECT
La balise <option> comporte deux attributs:
➢ value : nom de la donnée pour le choix.
➢ selected : pour reconnaître le choix par défaut
Exemple:
La balise SELECT
Exemple d'un menu avec plusieurs choix possibles :
La balise LABAEL
La balise <label> permet d'associer une légende à un champ d'entrée.
➢ Un clic sur un label donne le focus au champ correspondant.
➢ L'attribut for sert à spécifier l'identifiant (id) du champ d'entrée
auquel le label est associé.
Exemple :
La Soumission d’un formulaire
➢ La soumission (envoi) d'un formulaire se fait avec la balise <input>.
➢ L’attribut type="submit" permet d'envoyer le formulaire vers le serveur.
➢ La légende inscrite sur le bouton peut être modifiée avec l'attribut value.
Exemple :
Annulation d’un formulaire
➢ L'annulation ou la remise à zéro d'un formulaire se fait avec la balise <input>.
➢ L'attribut type="reset" permet de remettre à zéro les choix du formulaire.
➢ La légende inscrite sur le bouton peut être modifiée avec l'attribut value.
Exemple :
Les Formulaires
Mise en forme des formulaires
Il est recommandé d'utiliser des tableaux, des listes à puces (pour les cases à cocher),
des listes de définition, et des balises de formatage et d'alignement de texte pour
structurer les formulaires.
Exemple:
Exemple
Exercice 1
Énoncé : Créez un formulaire de contact avec les champs suivants :
•Nom (champ de texte)
•Email (champ de texte pour email)
•Message (champ de texte multiligne)
•Un bouton "Envoyer"
Correction
<form action="[Link]" method="post">
<label for="nom">Nom :</label><br>
<input type="text" id="nom" name="nom" required><br><br>
<label for="email">Email :</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message :</label><br>
<textarea id="message" name="message" rows="4" cols="50"
required></textarea><br><br>
<input type="submit" value="Envoyer">
</form>
Exercice 2
Énoncé : Créez un formulaire qui permet de choisir :
•Un système d'exploitation (cases à cocher pour Windows, MacOS,
Linux)
•Votre genre (boutons radio pour Homme et Femme)
•Un bouton "Envoyer"
Correction
<form action="[Link]" method="post">
<h3>Système d'exploitation :</h3>
<input type="checkbox" id="windows" name="os"
value="windows">
<label for="windows">Windows</label><br>
<input type="checkbox" id="macos" name="os" value="macos">
<label for="macos">MacOS</label><br>
<input type="checkbox" id="linux" name="os" value="linux">
<label for="linux">Linux</label><br><br>
Correction
<h3>Genre :</h3>
<input type="radio" id="homme" name="genre" value="homme">
<label for="homme">Homme</label><br>
<input type="radio" id="femme" name="genre" value="femme">
<label for="femme">Femme</label><br><br>
<input type="submit" value="Envoyer">
</form>
Exercice 3
Énoncé : Créez un formulaire pour l'inscription à un site. Le formulaire doit
comporter :
•Un champ pour le nom
•Un champ pour l'email
•Un champ pour le mot de passe
•Un bouton d'envoi Mettez le formulaire en forme à l'aide d'un tableau
HTML.
Correction
<form action="[Link]" method="post">
<table>
<tr>
<td><label for="nom">Nom :</label></td>
<td><input type="text" id="nom" name="nom" required></td>
</tr>
<tr>
<td><label for="email">Email :</label></td>
<td><input type="email" id="email" name="email" required></td>
</tr>
Correction
<tr>
<td><label for="password">Mot de passe :</label></td>
<td><input type="password" id="password" name="password"
required></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit"
value="S'inscrire"></td>
</tr>
</table>
</form>
HTML5
➢ Évolution depuis HTML4 (1999) :
• HTML5 introduit en 2011
• Combinaison de HTML4, CSS3, et JavaScript.
+ +
➢ Principales règles de HTML5 :
• Support des appareils variés (mobiles, tablettes, etc.).
• Minimisation de la dépendance aux plugins externes, comme Flash.
• Remplacement des scripts par des balises pour des fonctionnalités similaires.
➢ Vérification de la compatibilité du navigateur :
• Consultez : [Link]
HTML5
➢ <input> nouveaux types: color, date, datetime, datetime-local, email, month,
number, range, search, tel, time, url, week
➢ <form> nouveaux éléments: `<output>`, `<datalist>`, et `<keygen>`
➢ Attribut multiple pour les types file et email
➢ Attributs height et width pour <input>
➢ Tags de structuration pour des sites généralistes : <header>, <footer>, <nav>
➢ Tags pour des blogs, forums, CMS : <section>, <article>, etc.
HTML5
➢ Pour les champs contenant une adresse e-mail :
L'adresse e-mail sera automatiquement validée.
➢ Pour sélectionner une date dans un calendrier
On peut ajouter les attributs min et max pour des restrictions sur la date.
HTML5
HTML5
➢ On peut aussi préciser les valeurs min et max pour limiter la plage de sélection dans certains
champs de formulaire.
➢ L'attribut step spécifie l'intervalle d'avancement des valeurs, permettant ainsi de définir des
incréments spécifiques.
HTML5
➢ Pour un nombre entre deux valeurs (min et max) :
➢ Pour un champ de recherche :
➢ Pour un numéro de téléphone :
➢ Pour une adresse Web :
HTML5
Autres éléments HTML5 :
➢ <time> : pour représenter une date ou une heure.
➢ <aside> : pour des contenus complémentaires ou connexes.
➢ <progress> : pour indiquer la progression d'une tâche.
➢ <meter> : pour représenter une mesure dans une plage
➢ <mark> : pour mettre en surbrillance du texte.
➢ <figure> : pour encapsuler du contenu graphique avec une légende.
➢ <canvas> : pour dessiner des graphiques comme des arcs, lignes, cercles, triangles,
rectangles, etc.
HTML5
Autres éléments HTML5 :
➢ API de Géolocalisation :
•getCurrentPosition : pour obtenir la position actuelle de l'utilisateur.
•watchPosition : pour surveiller les changements de position.
•clearWatch : pour arrêter la surveillance de la position
➢ drag'n'drop : on ajoute un attribut draggable="true" pour permettre le glisser-déposer.
Les bonnes pratiques
➢ Validité : Respecter les standards HTML pour assurer la compatibilité entre navigateurs.
➢ Cohérence : Un site est un ensemble de pages HTML dédiées à un sujet déterminé.
➢ Sensibilité Culturelle : Éviter les contenus choquants pour des cultures différentes.
➢ Navigation :
•Assurez-vous que toutes les pages sont reliées entre elles.
•Vérifiez le bon fonctionnement de tous les liens.
•Incluez un lien vers la page d'accueil sur chaque page.
➢ Contenus Multimédias : Vérifiez que toutes les images, audios et vidéos sont présentes et
fonctionnelles.
➢ Gestion des Changements : Avoir un plan pour gérer les changements d'emplacement
(redirections, mises à jour de liens)
Les bonnes pratiques
➢ Ergonomie :
•Votre page d'accueil est-elle attrayante ?
•L'esthétique de votre page est-elle de bon goût, originale et attrayante ?
➢ Accessibilité de l'Information :
•Les informations détaillées sur le contenu sont-elles directement ou rapidement accessibles ?
➢ Équilibre de Contenu :
•Évitez de surcharger ou de sous-charger d'informations sur une même page.
•Chaque page HTML ne devrait pas dépasser 1 à 2 écrans.
➢ Cohérence Visuelle :
•Maintenez un design uniforme sur tout le site.
➢ Structure Pertinente :
•Concevez une structure logique et intuitive.
•Pensez à utiliser des templates pour une meilleure organisation.
Les bonnes pratiques
➢ Référencement :
•Donnez un titre à chaque document. Le titre résume-t-il bien le contenu de vos pages ?
•Incluez un texte alternatif pour les images.
•Faites connaître le site aux moteurs de recherche, annuaires et méta-moteurs.
➢ Copyright :
•Respectez la législation sur le copyright et les droits d'auteur.
Les bonnes pratiques
➢ Accessibilité :
• Limitez la taille des images, audios et vidéos !
• Que se passe-t-il avec un navigateur différent ?
• Que se passe-t-il avec une autre résolution d'écran ? Et avec un dispositif mobile ?
Et avec un autre système d'exploitation ?
• Vérifiez le résultat de la mise en page à l'impression.
➢ Règle d'OR :
• Un site sans mise à jour est un site mort.
Les bonnes pratiques
➢ Processus :
•Décrire les étapes des processus comportant des interactions multiples avant leur
commencement.
➢ Champs Obligatoires :
•Indiquer clairement les champs obligatoires.
➢ Modification des Données :
•En cas de rejet des données saisies, toutes ces données doivent être modifiables.
•Indiquer les champs contenant les données rejetées à l'utilisateur.
➢ Validation des Données :
•Valider les données via JavaScript ou côté serveur.