Etiquetas de HTML
HTML HomeHTML Introducción
HTML Elementos
HTML Etiquetas básicas
HTML Formato
HTML Entidades
HTML Vínculos
HTML Marcos
HTML Tablas
HTML Listas
HTML Formularios
HTML Imágenes
HTML Fondo
Colores
HTML ColoresHTML Tabla de Colores
Avanzado
HTML DisposiciónHTML Estilos
HTML Head
HTML Meta
HTML URL
HTML Scripts
HTML Atributos
HTML Eventos
HTML Servidor Web
Ejemplos y Examen
HTML EjemplosHTML Examen
Guías de referencia
HTML ElementosHTML Atributos
HTML Eventos
HTML Código ASCII
HTML Caract. Especiales
HTML Código URL
HTTP Mensajes
Disposición en HTML
¿A qué nos referimos con disposición?
Disposición es como ordenamos el contenido de nuestra página para que sea más simple de navegar o más atractiva.
Muchas veces deseamos que el texto de nuestra página esté dividido en 2 o más columnas.
Usando tablas
|
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 pueden diseñar muchas 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" cellpadding="0" border="1px">
<tr height="50px">
<td colspan="2px">
<table title="Banner" border="0">
<tr>
<td>Acá ubicamos el 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>
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 - 2008 by Martín Solomiak. Todos los derechos reservados.
Mapa del sitio
