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: 13-07-2018.

Visitas este mes: 3

Visitas el mes pasado: 14

logo 

GRACIAS

Por elegir aprende-web

Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.

By Anyelguti



5. Menú lateral (I)

5.1. Cajas o "divs"

Apartados en la Página.

En nuestra página Web, hasta ahora lo hemos escrito todo en un bloque, como si se tratara de una página de un libro. Sin embargo, habras observado que en muchas páginas, el texto está en varios apartados, Un diseño muy clásico es una cabecera en la parte superior y columna central con una pequeña columna lateral a la derecha con un menú, y en la parte de abajo otro apartado o pie de página, tal como se muestra en la imagen.


diseño clásico

A cada uno de estos apartados se les llama cajas o divs, ya que su estructura dentro de la página viene limitada por la etiqueta <div> ... </div>. En lecciones posteriores añadiremos una segunda página a nuestra Web con una estructura parecida a la del dibujo. mientras tanto, en nuestra página nos conformaremos con insertar un menú lateral con enlaces a esta otra página (y otras que podamos añadir).

Insertar un div

Vamos a añadir una etiqueta "div" para crear el menú. Como el menú debe ir después del primer subtítulo, la insertaremos ahí. Abre el archivo index.html con el bloc de notas y escribe lo siguiente (texto en azul)


...
<body>
<h1>Mi Primera Web</h1>
  <h2>Por donde empezar:</h2>
  <div>

	
  </div>
  <img src="objetos/dibujo.gif" alt="conexión a Internet"/>
  <p>Hola, estoy aprendiendo a hacer Webs y este es mi primer 
     párrafo, no es muy largo, pero es un párrafo.</p>
...

Guardamos y cerramos el bloc de notas , y abrimos el archivo index.html con elnavegador para ver el resultado.

Tu página Web quedará así Ver mi Web.


Aparentemente no ha pasado nada, la página está igual que estaba antes, eso es porque dentro de la etiqueta <div> ... </div> no hay nada, y además no le hemos aplicado ningún estilo.

Rellenar el div

Vamos a escribir texto dentro de la etiqueta. Ya que en este apartado queremos poner un menú, escribiremos un título y una lista con varios enlaces. Abre el archivo index.html con el bloc de notas y dentro del "div" que hemos creado escribe lo siguiente (texto en azul)


... 

<div> 
  <h3>Secciones</h3>
     <ul>
        <li><a href="#">Seccion 1.</a> </li>
        <li><a href="#">Seccion 2.</a> </li>
        <li><a href="#">Seccion 3.</a> </li>
        <li><a href="#">Seccion 4.</a> </li>
        <li><a href="#">Seccion 5.</a> </li>
      <ul>
</div>
...

Como vés, hemos usado el método de hacer listas para insertar los enlaces. El signo # (llamado almohadilla), se escribe pulsando las teclas "Alt Gr" y "3" a la vez. y se pone en los enlaces cuando se quiere que éstos no tengan ningún efecto. Más tarde, cuando sepamos la ruta del enlace, los cambiaremos por el texto que haya que poner.

Ahora vamos a ver cómo ha quedado nuestra página. Una vez que hayamos escrito las líneas anteriores, guardamos y cerramos el bloc de notas. y abrimos el archivo index.html con el navegador para ver el resultado.

Tu página Web quedará así: Ver mi Web.


Parece que esto de poner un "div" no funciona demasiado, ya que el texto ha quedado por debajo de la lista, a la cual se le ha aplicado el mismo estilo de la que ya teníamos. Pero no te preocupes, todo eso empezará a cambiar en cuanto le apliquemos la hoja de estilos CSS.

En el próximo paso daremos estilo al menú que hemos creado, lo colocaremos a la derecha del texto, y lo diferenciaremos del resto de la página dándole un fondo diferente, y algún otro retoque con el archivo CSS.

ir al siguiente paso: Estilo de la caja



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