3

Cree el siguiente navbar a manera de ejemplo, introducir la descripción de la imagen aquí

Mi duda esta en que ¿Cada botón del navbar debe direccionarme a otro documento?, o sea que ¿Debo de copiar el código de ese header en cada uno de los archivos.html?, O ¿Se hace de alguna otra forma?

2

3 respuestas 3

3

Claro que puedes evitar copiar y pegar el código de tu < NAV >, de hecho es una mala practica, lo que deberías de hacer es tener una estructura similar a esta que te mostraré en lenguaje JAVA:

ESTRUCTURA WEB EN JAVA - SERVIDOR - TOMCAT

Bueno en java es muy común usar archivos .jsp, jsf, etc. Los cuales son html , como puedes observar.

En el header.jsp indico todos los estilos que se necesitaran para la página.

header.jsp

<!-- HEADER STILOS -->
<link rel="stylesheet" href="../recursos/css/estilos.css">
<!-- END HEADER ESTILOS-->

En el nav.jsp ira el menú de navegaciones.

nav.jsp

<!-- NAV -->
<nav>
    <ul>
        <li><a href="#opcion1">Opción 1</a></li>
        <li><a href="#opcion2">Opción 2</a></li>
        <li><a href="#opcion3">Opción 3</a></li>
        <li><a href="#opcion4">Opción 4</a></li>
    </ul>
</nav>
<!-- END NAV -->

En el footer.jsp esta el texto de pie de página y los scripts que cargará la página.

footer.jsp

<!-- FOOTER -->
<div id="footer">
        Derechos Reservados
    </div>
<!-- END FOOTER -->

<!-- SCRIPTS-->
<script type="text/javascript" src="../recursos/js/jquery-1.7.1.min.js">
</script>
<script type="text/javascript" src="../recursos/js/script.js"></script>
<!-- END SCRIPTS -->

Finalmente en cualquier otra pagina jsp(html) que necesite usar el ,HEADER, NAV y FOOTER, realizó lo siguiente:

NOTA: Observa como incluyo los jsp que he definido en otros jsp(html) para hacer uso en el index.jsp.

index.jsp

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Index</title>
   <jsp:include page="header.jsp"></jsp:include>
</head>
<body>
   <jsp:include page="nav.jsp"></jsp:include>
   <jsp:include page="footer.jsp"></jsp:include>
</body>
</html>

Finalmente concluyo que puedes aplicar esta misma lógica para reciclar estructuras html en cualquier lenguaje como PHP, C# tienen sus propios métodos de incluir html en otros html. Así tendrás tu página web mas ordenada y sin mucho código.

Espero haberte orientado en lo que necesitabas, saludos.

1
  • Claro que me has ayudado con tu aporte. Saludos! Commented el 30 jun. 2017 a las 0:47
2

Si solo estas usando archivo HTML, la respues es SI, en cada archivo debes de copiar ese código HTML.

Otra historia seria si usas algun lenguage del lado del servidor como PHP ASP.NET, JSP, NodeJS, que te permiten crear las paginas HTML de forma dinámica lo que te permite reutilizar porciones de codigo HTML como la que indicas.

1
  • Gracias por tu respuesta! Commented el 29 jun. 2017 a las 17:43
1

Hola aunque ya se respondio tu pregunta me gustaria agregarte un aporte mas:

en tu Navbar tuvistes que tener una etiqueta li para agregar en el menu? okey sencillamente dentro de esa etiqueta agregas un enlace asi:

<li><a href="midocumento.html">acerca</a></li>

y listo donde dice

href
ahi agregas sencillamente la ruta de tu documento correctamente con extension .html y listo ya tendrias , solo te falta agregar tu codigo de navbar en cada documento html que tengas.

2
  • Gracias por el aporte! :) Commented el 29 jun. 2017 a las 18:42
  • denada por tu comentario.
    – simon
    Commented el 29 jun. 2017 a las 19:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.