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: 137

Visitas el mes pasado: 169

logo

Donativos

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




4. Maquetación (I)

4.1 Cambios en HTML

Paso 11

logo miweb

Qué es la maquetación

La maquetación es la distribución de los elementos en la página. En la página que estamos haciendo, de momento vemos que aparecen todos los elementos unos debajo de otros, ocupando cada uno todo el ancho de la página. En cualquier página que visitemos esto no está así, puede haber elementos que ocupen todo el ancho y otros que se agrupan en columnas.

Si te fijas en esta misma página que estás viendo, tenemos varios elementos diferenciados. La cabecera y la barra de navegación ocupan todo el ancho de la página. Después tenemos a la izquierda una columna con el menú específico del manual y varios recuadros debajo sobre diversos temas. A la misma altura y ocupando el resto de la página tenemos el cuerpo principal de la página, que es el que estás leyendo ahora. Además, al colocar las imágenes, estas se insertan en el texto, colocandose a la izquierda o a la derecha del mismo. Por último tenemos también debajo de todo esto un pie de página que ocupa todo el ancho, y que tiene también distintas columnas.

Colocar todo esto de esta manera es lo que se llama la maquetación. Aunque en principio puede parecer complicado es más simple de lo que parece, tal como veremos en este tema.

Dividir en la página en secciones

diseño de la página

Lo primero que tenemos que hacer es dividir la página en las distintas secciones que queremos que tenga, y en qué lugar de la página queremos poner cada una de ellas. Para ello resulta conveniente hacernos un boceto (en papel) de cómo queremos que quede nuestra página.

Nosotros hemos puesto aquí a la derecha la imagen de cómo queremos que quede nuestra página, con los elementos que hasta ahora tenemos puestos en distintos recuadros o secciones.

Etiqueta div

Para crear las distintas secciones de la página, HTML dispone de la etiqueta <div> ..</div> Esta etiqueta nos sirve para dividir la página en distintas secciones, a las que posteriormente les aplicaremos estilos distintos con CSS, pudiendo así colocar cada sección en un sitio distinto y dándo a cada una de ellas un aspecto diferente.

Las etiquetas div pueden anidarse unas dentro de otras, de manera que se crean distintas subsecciones dentro de una misma sección.

Atributos de identidad y de clase

Tanto la etiqueta <div> ...</div>, como otras etiquetas de texto o de imagen, pueden llevar los los atributos id=" ... " y class=" ... ".

Mediante el atributo id=" " identificamos un elemento como único en la página. Podemos poner cualquier valor a este atributo, sin embargo este valor no puede estar repetido en otro atributo id. Por ejemplo:

<div id="cabecera"> ... </div>

La etiqueta div crea una división o sección en la página. Mediante el atributo id identificamos esta sección como la "cabecera" de la página. Sólo puede haber una cabecera, si quisiéramos poner una segunda cabecera, pondríamos otra sección con otro atributo id con otro valor, por ejemplo:

<div id="segunda_cabecera"> ... </div>

El atributo class=" " permite formar una clase de elementos a los que posteriormente se les puede aplicar a todos ellos el mismo estilo. Al igual que con id podemos poner cualquier valor, sin embargo todos los elementos que tengan el mismo valor pertenecerán a la misma clase. Por ejemplo, podemos hacer que varias imágenes pertenezcan a la misma clase:

<img class="logos" src="objetos/wikipedia.jpg" alt="Wikipedia">

<img class="logos" src="objetos/youtube.jpg" alt="YouTube">

<img class="logos" src="objetos/elpais.jpg" alt="El País">

Las tres imágenes anteriores pertenecen a la misma clase, por lo que posteriormente se les podrá aplicar a todas ellas el mismo estilo.

Seciones en la página principal

Visto esto vamos a cambiar la página principal de nuestra web, de manera que crearemos las distintas secciones y les daremos atributos de identidad o de clase para posteriormente poder aplicar distintos estilos.

Para que la página quede tal como hemos previsto en el boceto superior, la modificaremos. Abre para ello el archivo index.html con el editor de textos y cámbialo de manera que quede como está aquí, para ello no tienes más que añadir los textos que están en azul en el mismo sitio qe indicamos aquí:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="paso10_2.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="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 color azul viene destacado lo que hemos añadido a la página. El resto (en color negro) es lo que ya teníamos.

Lo que hemos hecho es dividir la página en distintas secciones mediante la etiqueta div. A cada sección le hemos puesto un atributo de identidad. Dentro de la última sección hemos hecho subdivisiones con cada uno de los enlaces. A cada uno de ellos le hemos puesto una etiqueta div con un atributo de clase.

Cabe destacar la etiqueta <div class="vacio"></div> que hemos puesto al final de la sección de "enlaces". Esta es una etiqueta vacía que, como veremos más adelante nos permitirá hacer algunos ajustes para que la página se vea bien.

Después de cambiar la página, si la abrimos con el navegador veremos que ésta no ha cambiado en nada. Nuestra página queda como en el siguiente enlace:

Aunque vemos que la página sigue igual, dividir la página en secciones es fundamental para la maquetación de la misma, ya que tal como veremos en los siguientes pasos, utilizamos estas divisiones para colocar cada elemento en su sitio y darle un estilo diferente.

Una buena maquetación empieza por dividir la página en las secciones apropiadas. Colocar bien las etiquetas div con sus correspondientes atributos es el primer paso hacia una buena maquetación. Sobre todo no olvidarse de poner cada etiqueta en su sitio y de cerrar todas las etiquetas.




En el siguiente paso veremos ya con CSS cómo cambiar los elementos de sitio y formar ya la estructura de la página.

Posicionar los elementos




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