HTML
Básico
HTML HomeHTML Introducción
HTML Etiquetas y Elementos
HTML Etiquetas Básicas
HTML Formato de Texto
HTML Caracteres Especiales
HTML Enlaces
HTML Frames
HTML Tablas
HTML Listas
HTML Formularios
HTML Imágenes
HTML Fondos de Pantalla
Colores
HTML ColoresHTML Código de Colores
Avanzado
HTML Diseño Páginas WebHTML Hojas de Estilo
HTML Sección Head
HTML Meta Etiquetas
HTML Dirección URL
HTML Inserción de Scripts
HTML Atributos Estandard
HTML Eventos Dinámicos
HTML Servidor Web
Ejemplos y Examen
HTML EjemplosHTML Examen
Guías de referencia
HTML EtiquetasHTML Atributos
HTML Eventos
HTML Código ASCII
HTML Caract. Especiales
HTML Código URL
HTTP Mensajes
Diseño de Páginas Web
<<< Tabla para combinar colores Hojas de estilo en cascada dentro de HTML >>>
Disposición de los elementos de una página
La disposición del contenido de nuestra página es importante para que esta sea más simple de
La división de las diferentes secciones de una página(logo, menú, banners, publicidad o el contenido mismo) se puede definir por medio de este sistema.
Muchas veces deseamos que el texto de nuestra página esté dividido en 2 o más columnas.
Otras veces queremos insertar una imagen en algún lugar determinado de la página.
Para ello nos valemos del uso de las tablas, sin bordes y definiendo los diferentes anchos de cada una de las columnas.
Otro sistema más efectivo, es el uso de estilos para la disposición de los diferentes elementos dentro de la página. Pero ese tema lo estudiaremos en el tutorial de CSS.
Usando tablas para diseñar una página Web
|
El uso más común es el de las tablas para dar forma a la disposición de los textos en la página. Esta sección de la página está diseñada en dos columnas. Para lograr este efecto debemos usar la etiqueta <table> y dividir el texto en 2 columnas. |
El secreto está en usar la tabla sin bordes y agregarle un pequeño valor a cellpadding. Se puede diseñar mucho más de dos columnas. No importa cuanto texto le agregue a la página, siempre estará dentro de los bordes de la columna. |
Código del ejemplo
<html>
<head>
<title>Disposición del texto</title>
</head>
<body>
<table width="100%" border="0" cellpadding="5">
<tr>
<td>Texto de la primera columna.</td>
<td>Texto de la segunda columna.</td>
</tr>
</table>
</body>
</html>
Disposición de una página estándard
Este es un pequeño ejemplo de como diseñar una página estándard.
Por supuesto que a cada sección se le puede agregar un color distinto o gráfica que le de vida a la página.
|
||||||
|
|
|||||
Código del ejemplo
<table width="100%" height="250px" cellspacing="1px" border="1px">
<tr height="50px">
<td colspan="2px">
<table title="Banner" border="0">
<tr>
<td>Acá ubicamos el logo o un banner</td>
</tr>
</table>
</td>
</tr>
<tr height="200px">
<td>
<table title="Menu" border="0" width="100px">
<tr><td>Menú</td></tr>
<tr><td>Vínculo 1</td></tr>
<tr><td>Vínculo 2</td></tr>
<tr><td>Vínculo 3</td></tr>
</table>
</td>
<td>
<table title="Contenido" border="0" width="400px">
<tr>
<td>Acá va el contenido</td>
</tr>
</table>
</td>
</tr>
</table>
Explicación del ejemplo
La primera etiqueta <table> define el tamaño general de la página.
La segunda etiqueta <table> define la sección superior de la página, donde se coloca generalmente el logo o un banner.
La tercera sección está definida por la etiqueta <table> y en el ejemplo colocamos el menú.
La última etiqueta <table> nos define el sector que lleva todo el contenido de la página.
Nota: por supuesto que cada una de las secciones se puede seguir subdividiendo cuantas veces sea necesario.
¿No encuentras lo que buscas?
<<< Tabla para combinar colores Hojas de estilo en cascada dentro de HTML >>>
Diseño Web
Virtualnauta provee del material para uso exclusivo de aprendizaje.
No garantizamos que el contenido sea correcto.
El riezgo por el uso del mismo queda bajo la entera responsabilidad del usuario.
Mientras use este sitio, usted acuerda haber leido y aceptado nuestros términos de uso y privacidad.
Copyright 2007 - 2009 by Martín Solomiak. Todos los derechos reservados.
Mapa del sitio
