Comment faire une barre de navigation en HTML?

Dans l'informatique moderne, une page Web peut contenir des liens qui redirigent vers plusieurs autres pages. Habituellement, ces liens sont placés à une position spécifique sur la page Web. La pièce spécifique qui contient ces liens est connue sous le nom de barre de navigation.

Navigational Bar est le principal composant de toute page Web / site Web. Une barre de navigation pourrait être dans la direction horizontale ou verticale. En gardant à la vue l'importance des barres de navigation, ce message décrit plusieurs méthodes pour créer une barre de navigation en HTML. Les résultats possibles de ce blog sont:

• Comment créer une barre de navigation horizontale en HTML?
• Comment créer une barre de navigation verticale en HTML?

Méthode 1: Comment créer une barre de navigation horizontale dans HTML?

Le document HTML est la combinaison de centaines de balises. Chaque balise fait référence à certaines fonctionnalités spécifiques. De plus, vous pouvez également combiner plusieurs éléments pour créer une conception personnalisée. Une barre de navigation peut être créée à l'aide de

et
• Mots clés. Cette section fournit un guide détaillé pour créer des barres horizontales dans HTML.

  Le code HTML pour créer une barre de navigation horizontale s'affiche ci-dessous.

  Html

  
  
  
  
  
  
  
  
  
  
  
  • Maison
  
  
  • À propos de nous
  
  
  • Contactez-nous
  
  
  • Galerie
  
  
  
  
  
  

  Dans ce code:

  • Nous avons créé un .
  • À l'intérieur de la liste, une liste est créée en utilisant
    étiqueter.
    • Pour ajouter les articles dans
      Tag, nous avons inséré les éléments de la liste en utilisant
      • étiqueter.
      • Enfin, à l'intérieur de la balise, nous insérons les liens vers d'autres pages HTML à l'aide de la balise.

      Pour une meilleure présentation, le code CSS suivant est appliqué sur le HTML.

      CSS

      ul
      
      Style de liste: aucun;
      
      li a
      
      Décoration du texte: aucune;
      bloc de visualisation;
      flottant: à gauche;
      rembourrage: 10px 15px;
      taille de police: 20px;
      Color en arrière-plan: LightGray;
      la couleur noire;
      Font-Family: Georgia, «Times New Roman», Times, Serif;
      
      Li A: Roquer
      
      Color d'arrière-plan: Lightalmon;
      Couleur blanche;
      

      Dans le code ci-dessus:

      • La propriété styliste de la liste est définie sur nulaire.
      • De plus, diverses propriétés CSS, y compris (text-decoration, affichage, flotteur, etc.) sont appliqués sur les éléments de la liste.
      • Un effet de survol est également ajouté au
      • étiqueter.

      Sortir

      La sortie montre que nous avons créé avec succès une barre de navigation horizontale en utilisant HTML et CSS.

      Méthode 2: Comment créer une barre de navigation verticale dans HTML?

      Les principaux ingrédients (

      ,
      • ) sont les mêmes pour les barres verticales et horizontales. Par conséquent, une barre verticale est facile à créer. Dans cet exemple, nous avons exercé le code suivant pour créer une barre de navigation dans HTML:

        Html

        
        
        
        
        
        
        
        
        
        
        • Maison
        
        
        • À propos de nous
        
        
        • Contactez-nous
        
        
        • Galerie
        
        
        
        
        

        Dans ce code:

        • Nous avons créé une liste en utilisant le
          étiqueter.
          • À l'intérieur de
            Tag, nous avons inséré les éléments de la liste à l'aide du
            • étiqueter.
            • Ensuite, nous avons inséré les liens vers d'autres pages HTML à l'aide de la balise.

            Pour une meilleure esthétique de la barre de navigation, nous avons utilisé le code CSS suivant et placé dans un fichier CSS externe:

            CSS

            ul
            
            Style de liste: aucun;
            
            li a
            
            Décoration du texte: aucune;
            bloc de visualisation;
            Largeur: 180px;
            rembourrage: 10px 15px;
            taille de police: 20px;
            Color en arrière-plan: LightGray;
            la couleur noire;
            Font-Family: Georgia, «Times New Roman», Times, Serif;
            
            Li A: Roquer
            
            Color d'arrière-plan: Lightalmon;
            Couleur blanche;
            

            Dans le code CSS ci-dessus:

            • Le style de liste est défini à aucun.
            • Plusieurs styles sont appliqués sur les éléments de la liste.
            • Enfin, l'effet de survol est également appliqué sur les éléments de la liste.

            Sortir
            

            La sortie montre que nous avons créé avec succès une barre de navigation verticale.

            Voici! Vous avez appris à créer une barre de navigation horizontale et verticale en HTML.

            Conclusion

            Dans HTML, nous pouvons faire une barre de navigation en créant une liste simple en utilisant

            ,
            • et tags. Une barre de navigation peut être verticale ou horizontale. De plus, vous pouvez y ajouter divers styles en appliquant le CSS. Ce message a démontré les méthodes pour créer des barres de navigation dans HTML. Avec l'aide d'une barre de navigation, on peut naviguer vers les différentes pages du site Web.