HLH PRODUCTION

HLH PRODUCTION
Pocion en pies

jueves, 2 de abril de 2009

HTML Hoy les mostraré un concepto que me han pedido varios lectores del blog, y es el de insertar tablas en las entradas de blogger, como en todo existen varias maneras de realizarlo, pero explicaré fundamentalmente dos. La primera es la más adecuada y es la que siempre tendríamos que usar.

En esta primera entrada sobre tablas únicamente explicaré como insertarlas, y en una entrada posterior explicaré como podemos editar el fondo el borde u otras características.

En primer lugar explicaré algunos conceptos de HTML, muy básicos pero que nos ayudarán a entender bien como introducir las tablas y como hacerlas funcionar. Hemos de recordar estas tres palabras:
1. table. Como bien su nombre indica en inglés, indica que comienza una tabla o acaba.
2. tr. Etiqueta que usaremos para crear una nueva fila.
3. td. Etiqueta que usaremos para crear una nueva columna.

Teniendo estos conceptos claros pasamos directamente a ver un ejemplo de código y su proyección en el blog.

1
<table border=1><td>Columna 1, fila 1</td><td>Columna 2, fila 1</td><td>Columna 3, fila 1</td><tr><td>Columna 1, fila 2<td>Columna 2, fila 2<td>Columna 3, fila 2</td></table>
Fila 1, Columna 1
Fila 1, Columna 2 Fila 1, Columna 3
Fila 2, Columna 1 Fila 2, Columna 2 Fila 2, Columna 3

Observamos que hemos creado una tabla, en la cual he introducido dos filas, y dentro de cada una de ellas tres columnas. Para aplicar esto en nuestro blog, únicamente tendríamos que agregar nuevas celdas td o tr, según cuales sean nuestras necesidades.

Este código es el que recomiendo, porque como veremos en entradas posteriores tiene mucho más juego a la hora de introducir efectos que veremos en posteriores entradas.

Sin embargo, como para todo, no siempre hay una única manera, también lo podemos hacer pegando una tabla como imagen que por ejemplo hagamos en excel. Principalmente a esta solución le veo dos inconvenientes:
- Muy poca flexibilidad para cambiarla.
- Tendremos que subir una imagen a blogger.

Los pasos serán los siguientes:
1. Vamos a nuestro Excel o Word, y hacemos un capturar pantalla de nuestra tabla (pulsar tecla imprimir pantalla).
2. Vamos a un programa como paint, y copiamos la captura de la pantalla, recortamos la tabla, y lo guardamos como imagen.
3. En nuestro blog, vamos a crear una nueva entrada, y a continuación lo insertamos como imagen.

Impostar el fondo

Impostar el fondo

Impostar el fondo Impostar el fondo



En la lección precedente hemos visto cómo crear un documento HTML partiendo de cero y cómo impostar el título y las marcas de metainformación.
La operación que sigue a la impostación del documento es la definición del color o de la imagen del fondo, así como de los colores de los enlaces activos y de los visitados.


El elemento se coloca inmediatamente después del cierre de la marca y, en cualquier caso, dentro de los elemenos ; tiene una marca de apertura y una de cierre y delimitado por ellas figura el cuerpo del documento.
Si el elemento contenía metainformación (es decir, datos no visualizados materialmente por el navegador) la función de la marca es la de mostrar los objetos (texto, imágenes, sonidos, apliques, etc.) de la página.

La sintaxis correcta del elemento es la siguiente:


Contenido del documento


La marca se utiliza también para proporcionar al navegador información sobre la disposición de los objetos en el documento, así como para impostar varios atributos de visualización para el documento. A continuación veremos cuáles.

BGCOLOR

El atributo BGCOLOR imposta un fondo de un solo color. La sintaxis correcta es:



Es posible sustituir el nombre en inglés con valores hexadecimales. Por ejemplo, el color rojo (red) se sustituye de esta manera:



La utilidad de los colores hexadecimales es mayor cuando no se desea un color estándar sino tonalidades diversas o difuminadas. Los editores HTML de mayor difusión prevén paletas para la definición de los colores hexadecimales, mientras que Paint Shop Pro proporciona también, además del color, el correspondiente valor hexadecimal que copiar/pegar.



BACKGROUND

BACKGROUND tiene una función similar a BGCOLOR, pero mientras el segundo muestra un tono único del color, el primero visualiza en el fondo una imagen en formato gráfico .gif o .jpg.
Imaginemos, por ejemplo, que queremos construir un fondo con la siguiente imagen:

El fondo de nuestro ejemplo


La imagen se llama sfondo.gif y se encuentra depositada en el mismo directorio que el documento. La sintaxis correcta para impostar la imagen como fondo es:



El navegador visualiza la imagen sfondo.gif y la repite en todos los puntos disponibles de la pantalla. En otras palabras, no se limita a visualizar la imagen una sola vez, en el centro de la página por ejemplo, sino que llena todo espacio a disposición.
Por esta razón, es absolutamente necesario crear un fondo que, si viene repetido, no presente interrupciones sino un aspecto lo más uniforme posible.

Es conveniente elegir una imagen de fondo que no dificulte la lectura y que se ajuste lo más posible al color del texto. Por ejemplo, un texto naranja sobre fondo rojo no podría leerse. Es siempre mejor usar el color negro para el texto y tonos pastel para el fondo.



TEXT

Si no viene establecido diversamente, el color del texto del documento es el negro ya que los navegadores asignan este color por defecto. Gracias al atributo TEXT es posible asignar al texto un color distinto del negro. La sintaxis correcta es:



También en este caso los colores pueden expresarse con nombres o con valores hexadecimales. En el interior del documento podemos marcar parte del texto con colores diferentes del que hemos impostado en TEXT.



LINK

Si no viene establecido diversamente, el color de los enlaces (que todavía no se han visitado) es el azul. Gracias al atributo LINK podemos definir colores diferentes:



Todos los enlaces de la página no serán ya azules sino rojos (red). Este color puede expresarse en valores hexadecimales.



ALINK

Cuando hacemos clic en un enlace, éste se vuelve de un color distinto al impostado en LINK (o al azul de la opción por defecto). Gracias a ALINK (la A significa Active), es posible modificar este color:



VLINK

Cuando se visita un URL asociado a un enlace, este último se vuelve de un color distinto al de LINK (o al azul de la opción por defecto). Gracias a VLINK (la V significa Visited), es posible modificar este color:





BGPROPERTIES

Hablando del atributo BACKGROUND hemos resaltado el hecho de que las imágenes estén dispuestas ocupando toda la pantalla disponible. Si la página fuera tan larga como para tener que activar la barra de desplazamiento lateral, el fondo (la imagen asociada) iría pasando junto con la página. Para comprender mejor esta cuestión, haz clic aquí para ver un ejemplo, y después pasa la página hacia abajo.

Gracias a la propiedad BGPROPERTIES es posible hacer que el fondo permanezca inmóvil respecto al desplazamiento de página. La sintaxis correcta es:



Esto funciona sólo con MsIe y no con Netscape que, en cambio, continúa desplazando la página.