Cómo hacer una barra de navegación en HTML?
La barra de navegación es el componente principal de cualquier página web/sitio web. Una barra de navegación podría estar en la dirección horizontal o vertical. Teniendo en cuenta la importancia de las barras de navegación, esta publicación describe varios métodos para crear una barra de navegación en HTML. Los posibles resultados de este blog son:
- Cómo crear una barra de navegación horizontal en HTML?
- Cómo crear una barra de navegación vertical en HTML?
Método 1: Cómo crear una barra de navegación horizontal en HTML?
El documento HTML es la combinación de cientos de etiquetas. Cada etiqueta se refiere a alguna funcionalidad específica. Además, puede combinar múltiples elementos para crear un diseño personalizado también. Se puede crear una barra de navegación con la ayuda de
- y
- etiquetas. Esta sección proporciona una guía detallada para crear barras horizontales en HTML.
El código HTML para crear una barra de navegación horizontal se muestra a continuación.
Html
Primer documento
En este código:
- Hemos creado un .
- Dentro del, se crea una lista usando
- etiqueta.
- Para agregar los elementos en
- etiqueta, hemos insertado los elementos de la lista usando
- etiqueta.
- Por último, dentro de la etiqueta insertamos los enlaces a otras páginas HTML usando la etiqueta.
Para una mejor presentación, el siguiente código CSS se aplica en el HTML.
CSS
ul
Estilo de lista: Ninguno;
li A
Decoración de texto: ninguna;
bloqueo de pantalla;
flotador izquierdo;
relleno: 10px 15px;
tamaño de fuente: 20px;
Color de fondo: LightGray;
de color negro;
Font-Family: Georgia, 'Times New Roman', Times, serif;
Li A: Hover
Color de fondo: Lightalmon;
color blanco;
En el código anterior:
- La propiedad de estilo de la lista está establecida en ninguno.
- Además, varias propiedades de CSS incluyen (decoración de texto, pantalla, flotación, etc.) se aplican en los elementos de la lista.
- También se agrega un efecto flotante al etiqueta.
Producción
La salida muestra que hemos creado con éxito una barra de navegación horizontal usando HTML y CSS.
Método 2: Cómo crear una barra de navegación vertical en HTML?
Los ingredientes principales (
- ,
- ) son los mismos para las barras verticales y horizontales. Por lo tanto, una barra vertical es fácil de crear. En este ejemplo, hemos ejercido el siguiente código para crear una barra de navegación en HTML:
Html
Primer documento
En este código:
- Hemos creado una lista usando el
- etiqueta.
- Dentro de
- etiqueta, hemos insertado los elementos de la lista utilizando el
- etiqueta.
- Luego, hemos insertado los enlaces a otras páginas HTML usando la etiqueta.
Para una mejor estética de la barra de navegación, hemos utilizado el siguiente código CSS y colocados en un archivo CSS externo:
CSS
ul
Estilo de lista: Ninguno;
li A
Decoración de texto: ninguna;
bloqueo de pantalla;
Ancho: 180px;
relleno: 10px 15px;
tamaño de fuente: 20px;
Color de fondo: LightGray;
de color negro;
Font-Family: Georgia, 'Times New Roman', Times, serif;
Li A: Hover
Color de fondo: Lightalmon;
color blanco;
En el código CSS anterior:
- El estilo de la lista está configurado en ninguno.
- Se aplican varios estilos en los elementos de la lista.
- Por último, el efecto de desplazamiento se aplica también en los elementos de la lista.
Producción
La salida muestra que hemos creado con éxito una barra de navegación vertical.
Aquí tienes! Has aprendido a crear una barra de navegación horizontal y vertical en HTML.
Conclusión
En HTML, podemos hacer una barra de navegación creando una lista simple usando
- ,
- y etiquetas. Una barra de navegación puede ser vertical u horizontal. Además, puede agregarle varios estilos aplicando el CSS. Esta publicación ha demostrado los métodos para crear barras de navegación en HTML. Con la ayuda de un bar de navegación, uno puede navegar a las diversas páginas del sitio web.
- Hemos creado una lista usando el