IWD234-Programmation II

Web design

1. Historique du Web Design :

Années 1990 :
- Naissance du World Wide Web (Tim Berners-Lee).
- Premiers sites en HTML brut, sans mise en page avancée.
- Apparition des premières images et couleurs (HTML 2.0).
Années 2000 :
- CSS (Cascading Style Sheets) pour séparer contenu et présentation.
- Évolution vers des sites plus esthétiques et structurés.
- Début du design réactif (responsive design).
Années 2010 à aujourd’hui :
- Design adaptatif et mobile-first.
- Utilisation massive de frameworks (Bootstrap, Tailwind CSS).
- Accent sur l’expérience utilisateur (UX) et l’accessibilité.

2. Notions de Base :

a. HTML (HyperText Markup Language) :

Structure de base d’une page web.
Balises fondamentales : <h1>, <p>, <a>, <img>, <div>.

b. CSS (Cascading Style Sheets) :

Gestion de l’apparence : couleurs, polices, marges.
Concepts clés : sélecteurs, propriétés, flexbox, grid.

c. JavaScript :

Langage de programmation pour l’interactivité.
Utilisé pour les animations, formulaires, menus dynamiques.

d. Responsive Design :

Adaptation des sites à toutes les tailles d’écran.
Techniques : Media Queries, Flexbox, Grid Layout.

3. Critères Utilisés pour un Bon Design Web :

Un bon design repose sur des principes fondamentaux permettant à la fois l’esthétique et la fonctionnalité.

a. Clarté et Simplicité :

Interface épurée, éviter la surcharge visuelle.
Navigation intuitive (menus, boutons visibles).

b. Lisibilité :

Contraste suffisant entre texte et arrière-plan.
Choix de typographies claires et accessibles.

c. Cohérence Visuelle :

Palette de couleurs et polices uniformes sur tout le site.
Respect de la charte graphique si applicable.

d. Accessibilité (WCAG) :

Texte alternatif pour les images.
Contrastes suffisants pour les malvoyants.
Utilisation de balises sémantiques (<header>, <main>, <footer>).

e. Performance :

Temps de chargement réduit (optimisation des images, code allégé).
Tests via Google PageSpeed Insights.

II. Structure de base d’une page HTML5

Il est important de noter que la compatibilité d’HTML5 peut varier en fonction de la version spécifique du navigateur que tu utilises. Les nouvelles fonctionnalités et les améliorations d’HTML5 sont souvent introduites progressivement dans les différentes versions des navigateurs. Par conséquent, il est recommandé de vérifier la compatibilité des fonctionnalités spécifiques d’HTML5 que tu souhaites utiliser en consultant les tableaux de compatibilité en ligne ou en effectuant des tests sur différentes versions de navigateurs.

Une page web HTML5 est généralement composée de plusieurs parties distinctes qui contribuent à sa structure et à son contenu. Voici les parties principales d’une page web en HTML5 :

Doctype : Le Doctype est la première ligne d’une page HTML5 et il indique au navigateur quel type de document est utilisé. Par exemple, <!DOCTYPE html> spécifie que la page est écrite en HTML5.
Balise <html> : La balise <html> englobe tout le contenu de la page web. Elle est située juste après le Doctype et avant le <head>.
Balise <head> : La balise <head> contient des métadonnées et des informations sur la page, telles que le titre de la page, les liens vers des fichiers CSS, des scripts JavaScript, etc. Elle ne contient pas de contenu visible sur la page elle-même.
Balise <title> : La balise <title> est utilisée à l’intérieur du <head> pour définir le titre de la page web. Le texte spécifié dans la balise <title> est affiché dans la barre de titre du navigateur ou dans l’onglet de la page.
Balise <body> : La balise <body> contient tout le contenu visible de la page web, y compris le texte, les images, les liens, les formulaires, les vidéos, etc. C’est à l’intérieur de cette balise que la structure et le contenu principal de la page sont définis.
Balises de structure : Les balises de structure sont utilisées pour organiser et structurer le contenu de la page web. Par exemple, les balises <header>, <nav>, <main>, <footer>, <section>, <article>, <aside>, etc., sont couramment utilisées pour définir différentes parties de la page, telles que l’en-tête, la barre de navigation, le contenu principal, le pied de page, etc.
Balises de contenu : Les balises de contenu sont utilisées pour définir différents types de contenu sur la page web. Par exemple, les balises <h1> à <h6> sont utilisées pour les titres et sous-titres, la balise <p> est utilisée pour les paragraphes, la balise <img> est utilisée pour les images, etc.
Balises de lien : Les balises de lien sont utilisées pour créer des liens hypertexte vers d’autres pages web, des fichiers CSS, des scripts JavaScript, des adresses e-mail, etc. Les balises <a> sont utilisées pour les liens, et les balises <link> sont utilisées pour lier des fichiers externes, tels que des fichiers CSS.
Balises de script : Les balises de script sont utilisées pour inclure des scripts JavaScript dans la page web. Les scripts JavaScript fournissent une fonctionnalité interactive et dynamique à la page. Les balises <script> sont utilisées pour définir le script JavaScript à exécuter.

Commentaires : Les commentaires en HTML5 sont utilisés pour ajouter des annotations ou des notes dans le code HTML. Ils ne sont pas affichés sur la page web et servent principalement à la documentation ou à la communication entre les développeurs.

Ces différentes parties d’une page web en HTML5 travaillent ensemble pour créer une structure cohérente et organiser le contenu de la page de manière significative. Il est important de comprendre ces parties et de les utiliser correctement lors de la création de pages web en HTML5.

III. Balisage sémantique
A. Utilisation des balises <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, etc.

Le balisage sémantique en HTML5 consiste à utiliser des balises spécifiques pour donner une structure et une signification au contenu d’une page web. Les balises sémantiques aident à décrire le rôle et la fonction des différentes parties du contenu, ce qui facilite la compréhension du contenu par les utilisateurs et les moteurs de recherche. Voici une explication détaillée des balises sémantiques les plus couramment utilisées :

Balise <header> : La balise <header> est utilisée pour représenter l’en-tête d’une section ou d’une page web. Elle peut contenir le logo, le titre du site, la barre de navigation, etc. Habituellement, il y a un seul <header> par page.
Balise <nav> : La balise <nav> est utilisée pour représenter la section de navigation d’une page web. Elle est utilisée pour regrouper les liens de navigation principaux du site. Par exemple, le menu principal ou la barre de navigation peut être enveloppé dans une balise <nav>.
Balise <main> : La balise <main> est utilisée pour représenter le contenu principal d’une page web. Elle devrait contenir le contenu central de la page, excluant les en-têtes, les pieds de page, les barres de navigation et autres éléments répétitifs. Il devrait y avoir une seule balise <main> par page.
Balise <article> : La balise <article> est utilisée pour représenter un contenu autonome, indépendant et réutilisable sur une page web. Elle peut être utilisée pour des articles de blog, des posts de forum, des commentaires, etc. Chaque balise <article> doit inclure un contenu significatif qui peut être traité indépendamment du reste de la page.
Balise <section> : La balise <section> est utilisée pour représenter une section thématique ou un groupe de contenu connexe sur une page web. Elle peut être utilisée pour diviser une page en différentes parties, telles que les sections d’introduction, les sections de fonctionnalités, les sections de témoignages, etc.
Balise <aside> : La balise <aside> est utilisée pour représenter du contenu supplémentaire ou des informations connexes à la section principale de la page. Elle peut contenir des éléments tels que des barres latérales, des publicités, des notices, des citations, etc. Elle est généralement située à côté du contenu principal.
Balise <footer> : La balise <footer> est utilisée pour représenter le pied de page d’une page web. Elle peut contenir des informations de copyright, des informations de contact, des liens vers des pages connexes, etc. Habituellement, il y a un seul <footer> par page.

En utilisant ces balises sémantiques, tu peux structurer le contenu de ta page de manière significative, ce qui facilite la compréhension du contenu par les moteurs de recherche et améliore l’accessibilité pour les utilisateurs. Il est important de choisir les balises sémantiques appropriées en fonction du rôle et de la signification du contenu que tu souhaites représenter.

B. Importance du balisage sémantique pour l’accessibilité et le référencement :

Le balisage sémantique en HTML5 joue un rôle essentiel dans l’accessibilité et le référencement des pages web.

Accessibilité : Les balises sémantiques aident les personnes utilisant des technologies d’assistance, telles que les lecteurs d’écran, à comprendre et à naviguer dans le contenu d’une page web. En utilisant les balises appropriées comme <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, etc., tu donnes des indications claires sur la structure et le rôle du contenu. Cela facilite la compréhension du contenu pour les utilisateurs ayant des handicaps visuels ou cognitifs, en leur permettant de naviguer rapidement et efficacement dans la page.
Référencement (SEO) : Les balises sémantiques aident les moteurs de recherche à comprendre la structure et le contenu d’une page web. En utilisant les balises appropriées, tu indiques aux moteurs de recherche quelles parties de ton contenu sont importantes et comment elles sont liées les unes aux autres. Par exemple, en utilisant la balise <header>, tu indiques que cette section contient l’en-tête de la page, ce qui est une information précieuse pour les moteurs de recherche. Un balisage sémantique correct peut aider à améliorer la visibilité de ton site dans les résultats de recherche et à augmenter le trafic organique.

C. Exemples d’utilisation de balises sémantiques :

Exemple d’utilisation de la balise <header> :

Exemple d’utilisation de la balise <footer> :

Ces exemples illustrent comment les balises sémantiques peuvent être utilisées pour structurer et organiser le contenu d’une page web de manière significative. En utilisant ces balises correctement, tu améliores l’accessibilité pour tous les utilisateurs et optimises le référencement de ton site.

IV. Texte et liens

A. Balises de titres <h1> à <h6> :

Les balises de titres <h1> à <h6> sont utilisées pour structurer et hiérarchiser les titres et sous-titres d’une page web. Elles sont utilisées pour donner de l’importance et de la signification à différents éléments textuels.

Voici une description de chaque balise de titre :

Balise <h1> : La balise <h1> est utilisée pour le titre principal de la page. Il ne devrait y avoir qu’un seul <h1> par page, et il représente généralement le titre le plus important de la page.
Balises <h2> à <h6> : Les balises <h2> à <h6> sont utilisées pour les sous-titres et les titres de niveau inférieur sur la page. La balise <h2> est généralement utilisée pour les sections principales, tandis que les balises <h3> à <h6> sont utilisées pour des sous-sections ou des titres de niveau inférieur.

Voici un exemple de structure de titres hiérarchisés :

<h1>Titre principal de la page</h1>

<h2>Section 1</h2>

<p>Contenu de la section 1.</p>

<h3>Sous-section 1.1</h3>

<p>Contenu de la sous-section 1.1.</p>

<h3>Sous-section 1.2</h3>

<p>Contenu de la sous-section 1.2.</p>

<h2>Section 2</h2>

<p>Contenu de la section 2.</p>

Dans cet exemple, le <h1> représente le titre principal de la page, tandis que les <h2> représentent les sections principales, les <h3> représentent les sous-sections, et ainsi de suite. Cette structure hiérarchique aide à organiser le contenu de manière logique et facilite la compréhension pour les utilisateurs et les moteurs de recherche.

Il est important de noter que les balises de titres <h1> à <h6> ont également un impact sur l’accessibilité et le référencement. Les lecteurs d’écran utilisés par les personnes malvoyantes ou non voyantes utilisent ces balises pour naviguer dans le contenu de la page. Les moteurs de recherche accordent également une certaine importance au balisage des titres pour comprendre la structure et le contenu de la page.

Il est recommandé de suivre les bonnes pratiques suivantes lors de l’utilisation des balises de titres :

Utilise le <h1> une seule fois par page pour le titre principal.
Utilise les balises de titres de manière séquentielle et logique (h2 après h1, h3 après h2, etc.).
Évite de sauter des niveaux de titres (par exemple, passer directement de h2 à h4).
Utilise les balises de titres pour représenter la structure hiérarchique du contenu.

En respectant ces bonnes pratiques, tu peux améliorer l’accessibilité de ton site, faciliter la navigation et la compréhension du contenu, et optimiser le référencement de tes pages web.

B. Balises de paragraphe <p> et sauts de ligne <br> :

La balise <p> est utilisée pour définir un paragraphe de texte dans une page web. Elle est généralement utilisée pour regrouper un bloc de texte qui forme une unité cohérente. Voici un exemple d’utilisation de la balise <p> :

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

La balise <br> est utilisée pour créer un saut de ligne à l’intérieur d’un paragraphe ou à l’endroit où le texte est en ligne. Contrairement à la balise <p>, la balise <br> ne crée pas un nouveau paragraphe, mais simplement un saut de ligne. Voici un exemple d’utilisation de la balise <br> :

<p>Ceci est un texte avec un<br>saut de ligne.</p>

C. Attributs de texte : gras <strong>, italique <em>, souligné <u>, barré <s> :

Les attributs de texte sont utilisés pour ajouter des styles ou des effets spécifiques au texte. Voici une description de certains attributs couramment utilisés :

Gras (<strong> ou <b>): La balise <strong> est utilisée pour mettre en évidence le texte important, tandis que la balise <b> est utilisée pour mettre en gras le texte sans lui donner de signification supplémentaire. Voici un exemple d’utilisation de la balise <strong> :

<p>Le texte <strong>important</strong> est mis en évidence.</p>

Italique (<em> ou <i>): La balise <em> est utilisée pour mettre en évidence le texte avec une emphase, tandis que la balise <i> est utilisée pour mettre en italique le texte sans lui donner de signification supplémentaire. Voici un exemple d’utilisation de la balise <em> :

<p>Le texte est <em>en emphase</em> pour attirer l’attention.</p>

Souligné (<u>): La balise <u> est utilisée pour souligner le texte. Voici un exemple d’utilisation de la balise <u> :

<p>Le texte est <u>souligné</u> pour le mettre en valeur.</p>

Barré (<s> ou <del>): La balise <s> est utilisée pour barrer le texte, indiquant qu’il est supprimé ou obsolète. La balise <del> peut également être utilisée avec le même effet. Voici un exemple d’utilisation de la balise <s> :

<p>Le texte <s>barré</s> n’est plus valide.</p>

D. Balise <a> pour les liens internes et externes :

La balise <a> est utilisée pour créer des liens hypertexte dans une page web. Elle peut être utilisée pour créer des liens vers d’autres pages internes du même site ou vers des pages externes sur Internet. Voici un exemple d’utilisation de la balise <a> pour un lien interne et un lien externe :

<p>Visitez <a href=”page-interne.html”>notre page interne</a> ou <a href=”https://www.example.com”>notre site externe</a>.</p>

Dans cet exemple, le premier lien pointe vers une page interne nommée “page-interne.html”, tandis que le deuxième lien pointe vers un site externe “https://www.example.com“. L’attribut href est utilisé pour spécifier l’URL de destination du lien.

E. Attributs d’ancrage et liens de téléchargement :

Lors de l’utilisation de la balise <a>, il existe deux attributs importants :

Attribut d’ancrage (id): L’attribut id peut être utilisé pour créer un point d’ancrage dans une page. Il permet de créer des liens internes qui pointent vers une section spécifique de la page. Voici un exemple d’utilisation de l’attribut id :

<h2 id=”section1″>Section 1</h2>

<p>Contenu de la section 1.</p>

<a href=”#section1″>Aller à la section 1</a>

Dans cet exemple, en ajoutant l’attribut id à la balise <h2>, nous créons un point d’ancrage appelé “section1”. Le lien <a href=”#section1″>` permet de faire référence à cette section spécifique de la page.

Lien de téléchargement (download): L’attribut download peut être utilisé avec la balise <a> pour spécifier que le lien est un lien de téléchargement. Lorsque l’utilisateur clique sur ce lien, le fichier spécifié sera téléchargé au lieu d’être ouvert dans le navigateur. Voici un exemple d’utilisation de l’attribut download :

<a href=”mon-fichier.pdf” download>Télécharger le fichier PDF</a>

Dans cet exemple, lorsque l’utilisateur clique sur le lien, le fichier “mon-fichier.pdf” sera téléchargé sur leur appareil.

Il est important de noter que les liens hypertexte doivent être utilisés avec soin pour fournir des informations utiles et pertinentes aux utilisateurs. Il est également recommandé d’utiliser des textes de lien descriptifs afin que les utilisateurs sachent à quoi s’attendre lorsqu’ils cliquent sur un lien.

V. Images et médias

A. Balise <img> pour l’insertion d’images :

La balise <img> est utilisée pour insérer des images dans une page web. Elle ne nécessite pas de balise de fermeture et utilise différents attributs pour spécifier des informations sur l’image. Voici un exemple d’utilisation de la balise <img> :

html

Dans cet exemple, l’attribut src indique l’emplacement de l’image, c’est-à-dire le chemin ou l’URL de l’image à afficher. L’attribut alt fournit une description alternative de l’image, qui est affichée si l’image ne peut pas être chargée ou lue par un logiciel de lecture d’écran. L’attribut alt est également important pour l’accessibilité, car il permet aux personnes ayant une déficience visuelle de comprendre le contenu de l’image.

B. Attributs de l’élément <img> : source, texte alternatif, largeur, hauteur, etc. :

En plus des attributs src et alt, l’élément <img> prend en charge plusieurs autres attributs qui permettent de spécifier des informations supplémentaires sur l’image. Voici quelques-uns de ces attributs couramment utilisés :

width et height : Ces attributs permettent de spécifier la largeur et la hauteur de l’image en pixels. Par exemple :

html

title : Cet attribut permet de fournir un titre ou une infobulle pour l’image. Le texte spécifié sera affiché lorsque l’utilisateur survole l’image avec la souris. Par exemple :

html

class et id : Ces attributs permettent de spécifier des classes CSS et des identifiants uniques pour l’image, ce qui permet de les cibler avec des règles de style CSS ou des scripts JavaScript.

C. Balise <figure> et <figcaption> pour les images avec légende :

La balise <figure> est utilisée pour encapsuler une image ainsi que sa légende associée, qui est définie avec la balise <figcaption>. Cette structure permet de regrouper l’image et sa légende pour une présentation et une accessibilité améliorées. Voici un exemple d’utilisation des balises <figure> et <figcaption> :

html

<figcaption>Légende de l’image</figcaption>

</figure>

Dans cet exemple, l’image est enveloppée dans la balise <figure>, et la légende est spécifiée avec la balise <figcaption>. Cela permet de créer une association claire entre l’image et sa légende.

D. Balises <audio> et <video> pour l’insertion de médias :

Les balises <audio> et <video> sont utilisées pour insérer des fichiers audio et vidéo dans une page web, respectivement. Elles permettent de contrôler la lecture des médias et d’afficher une interface utilisateur pour les contrôles de lecture. Voici un exemple d’utilisation des balises <audio> et <video> :

html

Dans ces exemples, les attributs src spécifient l’emplacement des fichiers audio et vidéo, respectivement. L’attribut controls permet d’afficher les contrôles de lecture standard pour les médias.

E. Formats de médias pris en charge et compatibilité des navigateurs :

Les formats de médias pris en charge par les balises <audio> et <video> peuvent varier en fonction des navigateurs et des appareils utilisés. Les formats couramment pris en charge sont MP3 pour l’audio et MP4 pour la vidéo. Cependant, pour assurer une compatibilité maximale, il est recommandé de fournir plusieurs formats de médias en utilisant les balises <source> à l’intérieur des balises <audio> et <video>. Par exemple :

html

Votre navigateur ne prend pas en charge l’élément audio.

</audio>

Votre navigateur ne prend pas en charge l’élément vidéo.

</video>

Dans ces exemples, plusieurs sources de médias sont fournies avec des formats différents. Le navigateur choisira le format pris en charge et affichera le média correspondant.

F. Contrôles de lecture et personnalisation des médias :

Les balises <audio> et <video> offrent des contrôles de lecture par défaut, tels que le bouton de lecture/pause, la barre de progression et le contrôle du volume. Cependant, il est possible de personnaliser ces contrôles en utilisant des attributs supplémentaires et du CSS.

Par exemple, pour masquer les contrôles par défaut et créer des contrôles personnalisés, vous pouvez ajouter l’attribut controls à la balise <audio> ou <video> et utiliser du CSS pour styliser les contrôles personnalisés. Voici un exemple :

html

</audio>

css

.custom-audio::-webkit-media-controls {

display: none;

}

.custom-audio::-webkit-media-controls-enclosure {

width: 300px;

height: 50px;

background-color: #eaeaea;

border-radius: 5px;

}

Dans cet exemple, les contrôles par défaut sont masqués à l’aide de CSS, et une boîte de contrôle personnalisée est créée avec des styles spécifiés.

Il est également possible d’utiliser des bibliothèques et des frameworks JavaScript

VI. Les formulaires :

Un formulaire est un élément clé dans le développement d’applications web interactives. Il permet aux utilisateurs de saisir et de soumettre des données à un serveur pour un traitement ultérieur. Les formulaires sont largement utilisés pour collecter des informations, effectuer des transactions, créer des comptes utilisateur, envoyer des messages, etc.

L’importance d’un formulaire dans une application web réside dans sa capacité à faciliter l’interaction entre les utilisateurs et le serveur. Ils permettent aux utilisateurs de fournir des données de manière structurée et aux développeurs de récupérer, valider et traiter ces données. Les formulaires jouent un rôle crucial dans la collecte d’informations précises et dans la personnalisation de l’expérience utilisateur.

A. Structure d’un formulaire avec la balise <form> :

La balise <form> est utilisée pour envelopper tous les éléments d’un formulaire. Elle définit le début et la fin du formulaire. Voici un exemple de structure d’un formulaire avec la balise <form> :

html

<!– Éléments de formulaire vont ici –>

</form>

Dans cet exemple, l’attribut action spécifie l’URL ou le fichier de traitement du formulaire, où les données saisies par l’utilisateur seront envoyées pour être traitées. L’attribut method définit la méthode d’envoi des données, généralement “POST” ou “GET”.

B. Différents types de champs de formulaire :

Champ de texte (<input type=”text”>) : Ce champ permet aux utilisateurs de saisir du texte simple, comme un nom ou une adresse e-mail.
Mot de passe (<input type=”password”>) : Ce champ masque les caractères saisis par l’utilisateur, généralement utilisé pour la saisie de mots de passe confidentiels.
Zone de texte (<textarea>) : Ce champ permet aux utilisateurs de saisir du texte sur plusieurs lignes, utile pour les commentaires, les descriptions, etc.
Case à cocher (<input type=”checkbox”>) : Ce champ permet aux utilisateurs de sélectionner une ou plusieurs options parmi un ensemble de choix.
Bouton radio (<input type=”radio”>) : Ce champ permet aux utilisateurs de sélectionner une seule option parmi un ensemble de choix mutuellement exclusifs.
Liste déroulante (<select>) : Ce champ affiche une liste d’options déroulante à partir de laquelle les utilisateurs peuvent choisir une seule option.
Bouton (<input type=”button”> ou <button>) : Ce champ permet aux utilisateurs de déclencher une action spécifique, comme envoyer le formulaire ou réinitialiser les valeurs saisies.

Il existe également d’autres types de champs de formulaire tels que les champs de date, les champs de fichier, les champs numériques, etc., qui répondent à des besoins spécifiques de collecte de données.

En utilisant ces différents types de champs de formulaire, vous pouvez collecter des informations précises et variées auprès des utilisateurs de votre application web.

C. Attributs des champs de formulaire :

Les champs de formulaire peuvent être configurés à l’aide de différents attributs pour spécifier des comportements spécifiques. Voici quelques attributs couramment utilisés :

required : Cet attribut indique que le champ de formulaire doit être rempli avant que le formulaire puisse être soumis.

Exemple : <input type=”text” required>

placeholder : Cet attribut affiche un texte indicatif dans le champ de formulaire pour guider les utilisateurs sur le type d’information à saisir.

Exemple : <input type=”text” placeholder=”Entrez votre nom”>

value : Cet attribut définit une valeur par défaut pour le champ de formulaire.

Exemple : <input type=”text” value=”John Doe”>

disabled : Cet attribut désactive le champ de formulaire, empêchant les utilisateurs de le modifier ou de l’interagir avec.

Exemple : <input type=”text” disabled>

readonly : Cet attribut rend le champ de formulaire en lecture seule, ce qui signifie que les utilisateurs peuvent voir la valeur, mais ne peuvent pas la modifier.

Exemple : <input type=”text” value=”John Doe” readonly>

D. Balise <label> pour lier les champs de formulaire :

La balise <label> est utilisée pour étiqueter les champs de formulaire, ce qui permet d’établir un lien entre l’étiquette et le champ correspondant. Cela améliore l’accessibilité et facilite la sélection du champ à l’aide de l’étiquette associée. Voici un exemple d’utilisation de la balise <label> :

html

Dans cet exemple, l’attribut for de la balise <label> est utilisé pour spécifier l’ID du champ de formulaire auquel il est associé.

E. Validation de formulaire en HTML5 :

HTML5 introduit des fonctionnalités de validation intégrées qui permettent de valider les données saisies par les utilisateurs avant de soumettre le formulaire. Ces fonctionnalités de validation sont basées sur les attributs des champs de formulaire. Voici quelques exemples :

Validation de champ requis : Utilisez l’attribut required pour exiger que les utilisateurs remplissent un champ avant de soumettre le formulaire.
Validation de type de données : Utilisez les attributs type pour définir le type de données attendu (par exemple, type=”email” pour une adresse e-mail) et HTML5 se chargera de valider automatiquement le format des données saisies.
Validation de plage de valeurs : Utilisez les attributs min et max pour définir une plage de valeurs acceptables pour les champs numériques.
Validation de motif (pattern) : Utilisez l’attribut pattern pour spécifier une expression régulière qui doit correspondre au contenu du champ.

Lorsqu’une soumission de formulaire échoue en raison d’une validation, les navigateurs modernes affichent des messages d’erreur appropriés pour informer les utilisateurs des erreurs de saisie.

Il est également possible d’utiliser JavaScript pour effectuer des validations personnalisées avant la soumission du formulaire, mais cela dépasse le cadre de la validation en HTML5.

VII. Tables et listes

A. Balise <table> pour créer des tableaux :

La balise <table> est utilisée pour créer des tableaux dans une page web. Elle permet d’organiser les données en lignes et en colonnes. Voici un exemple de structure d’une table avec la balise <table> :

html

<table>

<!– Contenu du tableau va ici –>

</table>

B. Balises <tr>, <th>, et <td> pour les lignes et les cellules :

La balise <tr> est utilisée pour définir une ligne dans un tableau. Elle englobe les balises <th> et <td> qui représentent les cellules de la ligne. Voici un exemple de structure d’une ligne de tableau :

html

<tr>

<!– Cellules de la ligne vont ici –>

</tr>

La balise <th> est utilisée pour définir une cellule d’en-tête dans un tableau. Elle contient généralement du texte qui représente les titres des colonnes ou des informations d’en-tête. Les cellules définies avec <th> sont souvent mises en évidence visuellement. Voici un exemple de structure d’une cellule d’en-tête :

html

<th>Titre de la colonne</th>

La balise <td> est utilisée pour définir une cellule de données dans un tableau. Elle contient les informations réelles qui seront affichées dans les cellules du tableau. Voici un exemple de structure d’une cellule de données :

Html : <td>Données</td>

C. Attributs de tableaux : colspan, rowspan

Les attributs de tableaux permettent d’ajuster la structure et l’apparence des tableaux. Voici quelques attributs couramment utilisés :

colspan : Cet attribut spécifie le nombre de colonnes qu’une cellule doit occuper en largeur.

Exemple : <td colspan=”2″>Cellule large</td>

Dans cet exemple, la cellule occupe deux colonnes horizontalement.

rowspan : Cet attribut spécifie le nombre de lignes qu’une cellule doit occuper en hauteur.

Exemple : <td rowspan=”2″>Cellule haute</td>

Dans cet exemple, la cellule occupe deux lignes verticalement.

border : Cet attribut définit l’épaisseur de la bordure autour du tableau.

Exemple : <table border=”1″>

Dans cet exemple, la bordure du tableau a une épaisseur de 1 pixel.

align : Cet attribut aligne le contenu d’une cellule horizontalement.

Exemple : <td align=”center”>Contenu centré</td>

Dans cet exemple, le contenu de la cellule est centré horizontalement.

Ces attributs permettent d’ajuster la structure et la mise en page des tableaux pour répondre à des besoins spécifiques.

D. Balises <ul>, <ol>, et <li> pour les listes ordonnées et non ordonnées :

La balise <ul> est utilisée pour créer une liste non ordonnée, c’est-à-dire une liste où l’ordre des éléments n’est pas important. Chaque élément de la liste est défini par la balise <li>. Voici un exemple de structure d’une liste non ordonnée :

<ul>

<li>Élément 1</li>

<li>Élément 2</li>

<li>Élément 3</li>

</ul>

La balise <ol> est utilisée pour créer une liste ordonnée, c’est-à-dire une liste où l’ordre des éléments est important. Comme pour la liste non ordonnée, chaque élément de la liste est défini par la balise <li>. Voici un exemple de structure d’une liste ordonnée :

html

<ol>

<li>Élément 1</li>

<li>Élément 2</li>

<li>Élément 3</li>

</ol>

Les listes ordonnées utilisent des numéros ou des lettres pour indiquer l’ordre des éléments.

E. Liste de définitions avec les balises <dl>, <dt>, et <dd> :

La balise <dl> est utilisée pour créer une liste de définitions, où chaque élément est constitué d’un terme (balise <dt>) suivi de sa définition (balise <dd>). Voici un exemple de structure d’une liste de définitions :

html

<dl>

<dt>Terme 1</dt>

<dd>Définition 1</dd>

<dt>Terme 2</dt>

<dd>Définition 2</dd>

<dt>Terme 3</dt>

<dd>Définition 3</dd>

</dl>

Dans cet exemple, chaque terme est défini par la balise <dt> et chaque définition est définie par la balise <dd>. Les balises <dt> et <dd> doivent être utilisées à l’intérieur de la balise <dl>.

Les listes de définitions sont souvent utilisées pour afficher des glossaires, des descriptions de termes ou toute autre information nécessitant une structure de terme-définition.

En utilisant ces balises, vous pouvez créer différents types de listes dans vos pages web, qu’elles soient ordonnées, non ordonnées ou de définitions, pour organiser et présenter les informations de manière claire et structurée.

VIII. Les éléments interactifs

A. Balises <button> et <input type=”button”> pour les boutons interactifs :

La balise <button> est utilisée pour créer un bouton interactif dans une page web. Elle peut contenir du texte, des images ou d’autres éléments HTML. Voici un exemple d’utilisation de la balise <button> :

html

<button>Cliquez ici</button>

La balise <input> avec l’attribut type=”button” peut également être utilisée pour créer un bouton interactif. Voici un exemple d’utilisation de la balise <input> pour créer un bouton :

html

B. Balise <input> pour les champs de saisie utilisateur :

La balise <input> est utilisée pour créer différents types de champs de saisie utilisateur. Voici quelques exemples :