Création d'une barre de navigation de texte en HTML - Les mannequins

Vidéo: Création d'un menu horizontal simple en HTML et CSS 2025

L'ajout d'une barre de navigation permet à vos lecteurs de trouver des informations sur votre site. Si vous construisez votre page Web dans un éditeur de texte HTML, le codage pour créer une barre de navigation est facile. Voici un exemple de barre de navigation textuelle simple pour une petite entreprise de conseil:

Chaque onglet est souligné pour indiquer qu'il s'agit d'un lien vers cette page ou une zone de plusieurs pages du site. Notez que l'onglet Accueil n'est pas souligné. Lorsque vous cliquez sur le mot Expérience dans le menu Texte pour accéder à la page Expérience, la barre de navigation du texte doit changer pour refléter où vous êtes:

Suivez ces instructions pour créer une barre de navigation:

Ouvrez une nouvelle page vide dans le Bloc-notes de Windows, nommez le fichier et enregistrez-le avec. htm comme l'extension.

Par exemple, vous pourriez l'appeler navbar. htm.
Saisissez les éléments de votre site, avec un ou deux mots pour chaque page ou zone.

Utilisez la barre verticale pour séparer les onglets.

Si le caractère de la barre verticale n'est pas accessible depuis votre clavier, il doit être disponible à partir du symbole ou d'un menu similaire dans un programme de traitement de texte. (Il n'y a pas une telle option dans le Bloc-notes.) Vous pouvez copier et coller la barre verticale dans le Bloc-notes.

Centrez la barre de navigation sur la page en utilisant l'attribut center de la balise paragraph, comme ceci:

Accueil | Services | Adhésions | Publications | Expérience | Contactez-moi

Le menu de texte sera centré.

Pour lier l'onglet Accueil à la page d'accueil de votre site, entourez le mot Accueil avec les balises et. Ajoutez l'attribut href comme ceci:.

La boîte de dialogue Insérer un lien apparaît.
Répétez l'opération pour les autres phrases et associez-les à la page correspondante de votre site.

Les pages ne doivent pas encore exister, bien sûr les liens ne fonctionneront pas tant que les pages ne seront pas là. Chaque fois que vous créez une page, le nom doit correspondre exactement au nom dans le menu texte.
Copiez le menu sur chaque page Web de votre site.

Vous pouvez également créer un nouveau fichier (pour les pages qui n'existent pas encore) et y placer le menu. Au fur et à mesure, supprimez le lien de l'onglet représentant la page que vous êtes sur le point d'enregistrer.