html avanzado

Diseño de Páginas Web
Es la forma en que componemos nuestra página web. La ubicación de cada elemento en su lugar.

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 navegar o más atractiva al usuario.

La división de las diferentes secciones de una página(logo, menú, banners, publicidad o el contenidomismo) se puede definir por medio de este sistema.

Muchas veces deseamos que el contenido 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 deestilos 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  y dividir el texto en 2columnas.
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



Disposición del texto





Texto de la primera columna.
Texto de la segunda columna.





Disposición de una páginaestá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.

Acá ubicamos el logo o un banner

Menú
Vínculo 1
Vínculo 2
Vínculo 3

Acá va el contenido



Código del ejemplo





Acá ubicamos el logo o unbanner







Menú
Vínculo 1
Vínculo 2
Vínculo 3





Acá va el contenido







Explicación del ejemplo
La primera etiqueta  define el tamaño general de la página.
La segunda etiqueta  define lasección superior de la página, donde se coloca generalmente el logo o un banner.
La tercera sección está definida por la etiqueta  y en el ejemplo colocamos el menú. La última etiqueta  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.
Hojas de estilo en cascada
El uso deCSS es el complemento ideal de HTML para el diseño de tu sitio.

Hojas de Estilo
Las hojas de estilo en cascada (CascadingStyle Sheets, CSS) son un lenguaje usado para definir la presentación de un documento escrito en HTML.

Con la versión HTML 4.0 todos los formatos de texto pueden ser definidos en una hoja de estilo por separado o dentro del mismo documento HTML.

El uso de CSS es lamanera más adecuada de diseñar un sitio Web, ya que nos permite mucho más flexibilidad a la hora de realizar cambios en el sitio.

¿Cómo se usan las hojas de estilos?
Cuando un navegador lee una hoja de estilos, este formatea el documento de acuerdo a la misma. 

Hay 3 formas de insertar una hoja de estilos:
1. Entre líneas
2. Hojas de estilo interna
3. Hojas de estilo externas
1. Entrelíneas
Debemos usar esta forma cuando un único estilo es aplicado a un solo elemento.
Su uso está dado por el atributo style que se encuentra en casi todas las etiquetas.

En este ejemplo aplicaremos un estilo(color rojo y un margen izquierdo de 30 pixels) a la etiqueta , la cual determina que todo el contenido de la misma será afectado.
Ejemplo

Código

Este párrafo es de color rojo y se...