Serie Smallville 1ra temporada

Temporada 1 episodio 1 - Piloto

"Diferencias entre TABLAS y DIV"

Hace algunos años era normal que la maquetación HTML de todos los sitios estuviera realizada utilizando la etiqueta table para dar forma al diseño, estructura de las diferentes secciones de un sitio web, etc… Desde hace unos años se viene utilizando en vez de esto la etiqueta div y apoyándose en estilos de archivos .css para dar cuerpo a la forma (layout) de un sitio web.
La discusión sobre cuál de las dos formas es mejor es un tema muy tratado ya en Internet, la práctica y la tendencia escogida por los principales proyectos web demuestra que lo mejor es la utilización de DIVs/CSS sobre las tablas.


A continuación se muestra como se usaba antes las tablas.



La forma común (o usando tablas para la Diagramación)
Vamos a ocupar el ejemplo típico de una página estructurada en 3 áreas principales: un encabezado, el cuerpo o contenido y el pie de página. Esta página diagramada con tablas, muestra el ejemplo más común. Los colores se han utilizado para diferenciar los distintos bloques que la conforman.

A través de HTML puro, crear esta diagramación implica construir un tabla con 3 filas. En la fila superior (Encabezado)se inserta una segunda tabla con dos filas, una para el nombre del sitio y otra para la barra de navegación. En la fila del medio (Contenido), se inserta una tercera tabla, la que da la separación entre el menú y el contenido mismo.

La forma inteligente y óptima (o usando CSS)
HTML se ocupa de entregar el contenido y CSS de dar formato al contenido. Así de simple.



Se aprecian claramente los cuatro bloques principales, mas un quinto dentro del bloque Encabezado. Queda claro que sólo hay contenido y de ahora en adelante no vamos a tocar nuestro código HTML, sino que trabajaremos en nuestra hoja de estilos.

Podemos retocar el estilo visual de nuestra página a través de otras líneas en nuestra hoja de estilo.

Finalmente la página queda así usando DIV en HTML5 y CSS3

Espero que este blog les sea de ayuda.

Caracteres Especiales en HTML

Caracteres Especiales en HTML

Una de las cosas que siempre busco en Internet, porque me olvido, son los caracteres especiales de HTML. Muchas veces, cuando se quiere utilizar símbolos tales como "<" ó  "/", nos encontramos con que algunos navegadores no los muestran adecuadamente.

Espero que esta tabla les sea de ayuda. He puesto más de 1 representación, para poder tener todo junto y no tener que estar buscando en 80 tablas distintas.