Création de Menus en HTML5
Sommaire
- 1- Objectifs
- 2- Présentation
- 3- Historique
- 4- L’élément de menu en HTML
- 5- Méthodes pour créer des menus de navigation
- 5.1- Utilisation de balises
<ul>et<li> - 5.2- Balise
<nav> - 5.3- Balise
<menu> - 5.3.1- Label
- 5.3.2- Type
- 5.3.3- Exemple: 1
- 5.3.4- Exemple: 2
- 5.4- L'attribut
contextmenu - 5.5- Menus déroulants avec la balise
<select> - 6- Applications
- 6.1- Exercice 1 : Menu de Navigation
- 6.2- Exercice 2 : Menu Contextuel
- 6.3- Exercice 3 : Menu Déroulant
- 6.4- Exercice 4 : Barre d'Outils
- 6.4.1- Sommaire du cours HTML
Création de Menus en HTML5
-
Objectifs
- Comprendre la sémantique des menus en HTML5.
- Être capable de créer des menus de navigation.
- Être capable de diagnostiquer et de résoudre les problèmes courants liés à la création de menus en HTML5.
-
Présentation
- Ce cours vise à explorer les différentes méthodes pour créer des menus en HTML5, qu’il s’agisse de menus de navigation pour des sites web ou de menus contextuels pour des applications web. Les menus sont des éléments essentiels de l’interface utilisateur, et la maîtrise de leur création est cruciale pour les développeurs web et les concepteurs d’interface.
- En HTML5, vous pouvez créer des menus de navigation et des menus contextuels en utilisant divers éléments et attributs pour une meilleure sémantique et compatibilité.
-
Historique
- La balise <menu> a un peu d’une histoire troublée.
- En HTML3, il était essentiellement synonyme de <ul>.
- Déconseillé en HTML4
- il a été ajouté à la spécification pour HTML5 .
- La balise
<menu>en HTML a été introduite dans HTML5 et est destinée à être utilisée pour définir des menus. Cependant, il existe des éléments spécifiques dans HTML5 qui sont plus couramment utilisés pour créer des menus de navigation et des menus contextuels. -
L’élément de menu en HTML
- L’élément HTML <menu> représente un groupe de commandes que l’utilisateur peut utiliser ou activer.
- La balise <menu> peut être utilisée afin de créer des menus (affichés en haut d’un écran par exemple) et des menus contextuels (qui apparaissent au clic-droit ou après avoir cliqué sur un bouton).
-
Méthodes pour créer des menus de navigation
- En HTML5, il existe plusieurs méthodes pour créer des menus de navigation. Voici quelques-unes des méthodes couramment utilisées pour créer des menus interactifs
-
Utilisation de balises
<ul>et<li> - Les menus de navigation peuvent être créés en utilisant des listes non ordonnées (
<ul>) et des éléments de liste (<li>). Les liens hypertexte (<a>) sont souvent inclus dans les éléments de liste pour créer des liens vers d’autres pages. Voici un exemple de base : -
Balise
<nav> - La balise
<nav>est conçue spécifiquement pour représenter la navigation principale d’une page web. Vous pouvez encapsuler votre menu de navigation à l’intérieur de la balise
-
Balise
<menu> - La balise
<menu>peut être utilisée pour créer des menus de navigation et des menus contextuels. Pour un menu de navigation, vous pouvez l’utiliser de cette manière : - Un menu peut contenir des options, une liste, des boutons, d’autres menus, des balises command, des input, des séparateurs <hr>.
-
Label
- Cet élément doit avoir une balise ouvrante et une balise fermante contrairement aux éléments contenus.
- Le nom du menu qui est affiché pour l’utilisateur. Lorsque cet attribut est utilisé dans un menu imbriqué, c’est le nom affiché pour le sous-menu.
- Cet attribut doit uniquement être utilisé lorsque l’élément parent est un élément <menu>.
-
Type
- Cet attribut indique le type de menu qui est déclaré. C’est un attribut à valeur contrainte qui peut prendre l’une des valeurs suivantes :
- context : Cette valeur indique que le menu est dans un état de popup et qu’il contient des commandes relatives à un autre élément. Ce menu peut être référencé via l’attribut menu d’un élément <button> ou via l’attribut contextmenu d’un élément. Cette valeur est la valeur par défaut de l’attribut lorsque l’élément parent est également un élément <menu>.
- toolbar : Cette valeur indique que le menu est une barre d’outils qui contient différentes commandes disponibles. Ces commandes peuvent être construites avec plusieurs éléments <li> ou avec du contenu de flux qui décrit les commandes disponibles. Cette valeur est la valeur par défaut de l’attribut.
-
Exemple: 1
-
Exemple: 2
-
L’attribut
contextmenu - Menus contextuels avec l’attribut
contextmenu: Vous pouvez créer des menus contextuels qui s’affichent au clic droit en utilisant l’attribut contextmenu et la balise
-
Menus déroulants avec la balise
<select> - Vous pouvez créer des menus déroulants en utilisant la balise
<select>pour permettre aux utilisateurs de sélectionner une option parmi plusieurs. Cela est couramment utilisé dans les formulaires. - Ces méthodes offrent une grande flexibilité pour créer des menus en HTML5, que ce soit pour la navigation principale d’un site web, des menus contextuels, ou des menus déroulants dans des formulaires. Vous pouvez les personnaliser en utilisant CSS pour styliser et formater votre menu selon vos besoins.
-
Applications
-
Exercice 1 : Menu de Navigation
- Créez un menu de navigation pour un site web fictif contenant les éléments suivants : Accueil, Produits, Services, À propos, Contact. Utilisez la balise <nav>, des listes <ul>, des liens <a>, et des classes CSS pour styliser le menu.
-
Exercice 2 : Menu Contextuel
- Créez un menu contextuel qui s’affiche au clic droit sur un paragraphe de texte. Le menu doit contenir trois options : Copier, Couper et Coller. Utilisez la balise <menu> avec l’attribut type= »context » et des éléments <menuitem>.
-
Exercice 3 : Menu Déroulant
- Créez un formulaire de contact avec un menu déroulant qui permet aux utilisateurs de sélectionner leur pays. Utilisez la balise <select> avec des options pour les pays.
-
Exercice 4 : Barre d’Outils
- Créez une barre d’outils pour une application web fictive. La barre d’outils doit contenir des icônes représentant différentes actions, telles que Enregistrer, Ouvrir, Imprimer, etc. Utilisez la balise
<ul>
<li><a href="page1.html">Accueil</a></li>
<li><a href="page2.html">Services</a></li>
<li><a href="page3.html">À propos</a></li>
<li><a href="page4.html">Contact</a></li>
</ul><nav>
<ul>
<li><a href="page1.html">Accueil</a></li>
<li><a href="page2.html">Services</a></li>
<li><a href="page3.html">À propos</a></li>
<li><a href="page4.html">Contact</a></li>
</ul>
</nav><menu type="toolbar">
<li><a href="page1.html">Accueil</a></li>
<li><a href="page2.html">Services</a></li>
<li><a href="page3.html">À propos</a></li>
<li><a href="page4.html">Contact</a></li>
</menu><menu type= "toolbar">
<li><a href= "#">Home</a></li>
<li><a href= "#">About</a></li>
<li><a href= "#">Contact</a></li>
</menu><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title> L'élément de menu</title>
</head>
<body>
<!-- Suite de liens -->
<menu>
<li><a href="https://apcpedagogie.com">Accueil</a></li>
<li><a href="https://apcpedagogie.com/cours-et-tutoriels/les_cours/cours-de-programmation/Le-html/">HTML 5</a></li>
<li><a href="https://apcpedagogie.com/cours-et-tutoriels/les_cours/cours-de-programmation/les-styles-css">CSS 3</a></li>
<li><a href="https://apcpedagogie.com/cours-et-tutoriels/les_cours/cours-de-programmation/php">PHp 5</a></li>
<li><a href="https://apcpedagogie.com/cours/apprendre-mysql-en-toute-simplicite/">MySQL</a></li>
</menu>
<!-- Suite de boutons -->
<menu>
<button type="button" onclick="alert('Fichier')">Fichier</button>
<button type="button" onclick="alert('Editer')">Editer</button>
<button type="button" onclick="alert('Afficher')">Afficher</button>
</menu>
</body>
</html> <p>Clic droit ici pour afficher le menu contextuel.</p>
<menu type="context" id="menu1">
<li><a href="page1.html">Option 1</a></li>
<li><a href="page2.html">Option 2</a>
<li><a href="page3.html">Option 3</a></li>
</menu><label for="menu">Choisissez une option :</label>
<select id="menu">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>