Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 121

Visitas el mes pasado: 335

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




5. Barra de navegación (I)

5.1. Contenido

Paso 14

logo miweb

Qué es la barra de navegación

Seguramente querremos que nuestro sitio web tenga más de una página. Querremos también que el visitante pueda recorrer sin dificultad todas las páginas de nuestra web. Para ello lo más normal es poner una barra de navegación o un menú de navegación.

La barra de navegación consiste en una barra horizontal, que normalmente vemos debajo de la cabecera (aunque puede estar en otro sitio), en donde el usuario puede enlazar con las distintas páginas o secciones del sitio web. Aquí en "Aprende Web" puedes verla en color verde después de la cabecera de la página. Tanto la cabecera como la barra de navegación suelen repetirse en todas las páginas del sitio.

Aquí en Aprende Web, como el sitio tiene muchas páginas, los enlaces de la barra de navegación nos llevan a las distintas secciones. Después en cada sección hay una lista de enlaces a la izquierda que lleva a cada una de las páginas de la sección. Estas listas son los menús de navegación.

Como nosotros vamos a hacer una web sencilla, con pocas páginas, nos bastará con poner una barra de navegación con enlaces a cada una de las páginas.


Añadir una nueva sección

En nuestra web, además de la página de inicio, añadiremos otras tres páginas, en las que veremos lo más básico que podemos hacer al construir una web, añadir listas, tablas, y formularios.

Para que el usuario pueda ir de una página a otra pondremos en todas las páginas una sección que será la barra de navegación. Aquí pondremos los enlaces a las distintas páginas de nuestra web. Empezaremos por poner la barra de navegación en la página de inicio o index.html

En los pasos anteriores, al maquetar la página, la hemos dividido en distintas secciones marcadas por las etiquetas div con su atributo id. Las secciones que hemos puesto hasta ahora son "cabecera", "texto" y "enlaces". Para crear la barra de navegación pondremos una nueva seccion a la que llamaremos "navegacion".

Empezamos por abrir el archivo index.html con el editor de textos (HTML-Kit), para poder modificar su contenido.

Como la barra de navegación la pondremos después de la cabecera, crearemos una nueva etiqueta "div" que añadirá otra sección a la página. Esta etiqueta la pondremos después de la sección "cabecera" y antes de la sección "texto"; de forma que la estructura de la etiqueta body quedará así:

<body>
  <div id="cabecera"> 
     ......
  </div>
  <div id="navegacion"> 
    
  </div>
  <div id="texto"> 
     ......
  </div>
  <div id="enlaces"> 
     ......
  </div>
</body>

Entre el div de la sección de cabecera y el div de la sección de texto añadimos un nuevo div, en el que incluiremos la barra de navegación. Los puntos suspensivos dentro de los divs que ya teníamos indican que éstos los dejamos tal y como están.

El nuevo div "navegacion" que hemos creado, de momento está vacío. No cierres el archivo, ya que seguimos incluyendo elementos dentro de esta sección.


Contenido de la nueva sección

Dentro del div "navegación" pondremos los enlaces a todas las páginas que van a formar nuestra web. Cada uno de estos enlaces los pondremos dentro de un "div" con un atributo de clase. De esta manera nos será más fácil posicionar y dar estilo a la barra de navegación.

Dentro de la sección div id="navegación" incluiremos el siguiente contenido

  <div id="navegacion">
    <div class="menu"><a href="index.html">Inicio</a></div>
    <div class="menu"><a href="listas.html">Listas</a></div>
    <div class="menu"><a href="tablas.html">Tablas</a></div>
    <div class="menu"><a href="formulario.html">Formulario</a></div> 
    <div class="vacio"></div>
  </div>

Como siempre en color azul hemos dstacado el nuevo texto que hemos añadido.

Aquí los enlaces abren páginas del mismo sitio. Son enlaces locales, por lo tanto en el atributo href ponemos la ruta que lleva al archivo tal como hemos hecho con los archivos CSS o de imágenes.

Hemos incluido también aquí un div vacío, div class="vacio" sin contenido, después de los divs de enlaces, tal como hicimos con la sección "enlaces". Al igual que en esta sección, es necesario para que al aplicar el código CSS, los elementos que posicionemos mediante float no queden fuera del contenedor de la sección.

Después de incluir estas líneas cerramos y guardamos el archivo index.html. Lo abrimos después con el navegador, y comprobamos el resultado, éste será como el del siguiente enlace:


Vemos los enlaces que hemos puesto debajo de la cabecera. Estos aparecen cada uno en una línea y con el mismo estilo que los enlaces que ya tenemos en la sección "enlaces". Resolveremos este problema al aplicar el estilo CSS a la nueva sección.

Si pulsamos en estos enlaces vemos que nos llevan a páginas que no existen. Esto es porque todavía no hemos creado las nuevas páginas de nuestro sitio. A medida que vayamos creando estas páginas verás que al pulsar en estos enlaces, estos nos llevan a las páginas que indicamos.

Mientras tanto si quieres que el enlace no apunte hacia una página inexistente, puedes cambiar el valor del atributo href por este otro: href="#". Esto hará que al pulsar en el enlace, la página se recargue. Si lo haces así, acuerdate, después de crear la nueva página, de cambiar el valor de los enlaces que apunten hacia la nueva página, para que éstos funcionen.


Archivo index

Con lo que hemos hecho hasta ahora el archivo index.html lo tendremos tal como lo vemos en el siguiente código.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="paso13_3.css" />
    <title>Mi Propia Web</title>
  </head>
  <body>
  <div id="cabecera">
    <img src="../objetos/logo.gif" alt="Logo de la página" width="15%" />
    <h1>Mi Propia Web</h1>	
    <h2>Aprendiendo a construir un sitio Web</h2>
  </div>
  <div id="navegacion">
    <div class="menu"><a href="index.html">Inicio</a></div>
    <div class="menu"><a href="listas.html">Listas</a></div>
    <div class="menu"><a href="tablas.html">Tablas</a></div>
    <div class="menu"><a href="formulario.html">Formularios</a></div> 
    <div class="vacio"></div>
  </div>
  <div id="texto">
    <p>Hola, estoy aprendiendo a hacer Webs y este es mi primer párrafo, 
       no es muy largo, pero es un párrafo.</p>
    <p>Este ya es mi segundo párrafo. Para construir un sitio web como éste, 
       hay que usar el lenguaje HTML. El HTML es un lenguaje de etiquetas.
       Con las etiquetas indicamos qué tipo de contenido insertamos en la página.</p>
  </div>
  <div id="enlaces">
    <h3>Los enlaces</h3>
    <p>Estoy aprendiendo a poner enlaces en mi página. Aquí he puesto unos enlaces 
       a unos sitios muy populares.</p>
    <p>Pulsa en los siguientes enlaces para ir a las siguientes páginas.</p>
    <div class="mienlace">
    <p><a href="http://es.wikipedia.org" target="_blank">
       <img src="../objetos/wikipedia.jpg" alt="Logo Wikipedia" border="0" height="200" />
    </a></p>
    <p><a href="http://es.wikipedia.org" target="_blank">Consultar Wikipedia</a></p>
    </div>
    <div class="mienlace">
    <p><a href="http://www.youtube.com"  target="_blank">
       <img src="../objetos/youtube.jpg" alt="Logo YouTube" border="0" height="200" />
    </a></p>
    <p><a href="https://www.youtube.com" target="_blank">Videos en You Tube</a></p>
    </div>
    <div class="mienlace">
    <p><a href="http://elpais.com" target="_blank">
       <img src="../objetos/elpais.jpg" alt="Logo El_Pais" border="0" height="200" />
    </a></p>
    <p><a href="http://elpais.com" target="_blank">Noticias con el País</a></p>
    </div>
    <div class="vacio"></div>
  </div>
  </body>
</html>

En esta página hemos puesto el contenido de la barra de navegación. Si abrimos la página y vemos el resultado, observamos que lo hecho hasta ahora no se parece mucho a una barra de navegación. Veremos cómo ésto cambia al aplicarle el estilo CSS. Pero esto ya será en la siguiente página.




En el siguiente tema añadimos el estilo CSS a la barra de navegación

Barra de navegación: estilo.




Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com