AVANZANDO EN HTML (4)

Las cosas se van poniendo más difíciles. Lo que veréis en la entrada de hoy, es un resumen de lo más importante de cada apartado. Si queréis ampliar vuestros conocimientos con respecto a este tema, os recomiendo echarle un vistazo a este manual.

Dicho esto, comencemos...

ALINEACIÓN Y DIMENSIONADO DE IMÁGENES

<IMG SRC="imagen" ALIGN=RIGHT> : se usa para alinear una imagen a la derecha.

<IMG SRC="imagen" ALIGN=LEFT>: se usa para alinear una imagen a la izquierda.

Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta debajo de ella se pueden usar las siguientes etiquetas:

<BR CLEAR=LEFT> Busca el primer margen libre (clear) a la izquierda.

<BR CLEAR=RIGHT> Busca el primer margen libre a la derecha.

<BR CLEAR=ALL> Busca el primer margen libre a ambos lados.

Los programas navegadores cuando cargan un documento HTML y encuentran una etiqueta de una imagen, interrumpen el proceso de carga y solicitan al servidor que le envíe dicha imagen, quedando a la espera hasta que se complete el envío, repitiéndose este proceso con cada una de las imágenes. 

Cuando se aplica la etiqueta correspondiente, el navegador actúa de una forma más favorable, ya que entonces, como conoce las dimensiones de las imágenes les reserva un espacio en la pantalla y va colocando el texto de forma apropiada, sin ninguna interrupción, a la vez que va rellenando esos espacios reservados a las imágenes.

Los comandos a utilizar son WIDTH (ancho) y HEIGHT (alto) (las medidas se dan en pixels)

<IMG SRC="imagen" WIDTH=ancho de la imagen HEIGHT=alto de la imagen>

Es conveniente hacer esto con todas las imágenes, incluso con las más pequeñas (iconos, botones, etc), para que no haya ninguna interrupción en el proceso de carga del documento.

FORMATO DE LAS IMÁGENES

1. Tamaño de las imágenes: 

Minimizar nuestras imágenes, al igual que el dimensionado, nos ayudará a que nuestra página web cargue más rápido y a que sea más cómodo desplazarse por ella.

Hay unas cuantas maneras de minimizar el tamaño de los ficheros de imagen:

Reducir el tamaño de la imagen con un programa gráfico: esto hará que haya menos pixels que almacenar, y por tanto menos kilobytes que cargar.

Reducir el número de colores utilizados en la imagen: una imagen GIF puede tener un máximo de 256 colores, pero podemos a veces reducir este número. Por ejemplo, se puede conseguir un logo atractivo para encabezar las páginas con sólo dos colores, uno de primer plano y el otro de fondo. Con un programa gráfico adecuado se pueden hacer estas comprobaciones y reducciones.

Simplificar las imágenes: el formato GIF comprime la imagen buscando las secuencias repetidas en los datos y abreviándolas. 

2. GIFs transparentes:

Una característica muy útil del formato GIF es la opción de hacer transparente un color determinado, es decir, que en la página del Web ese color concreto no se vea, siendo reemplazado por el fondo de la página. Por tanto, si en una imagen escogemos el color de su fondo como transparente, parecerá flotar sobre el fondo de la página.

Para hacer esto, podemos usar diversas aplicaciones como las siguientes:

Windows: Paint Shop Pro 3.12.

Mac: Transparency.

TABLAS

• La etiqueta general, que engloba a todas las demás es <TABLE> y </TABLE>.

• Con esto se presentarían los datos tabulados, pero para que se presenten en los característicos cajetines (rodeados por un borde) tenemos que añadir el atributo BORDER a la etiqueta:  

         <TABLE BORDER>

         [resto de las etiquetas]

         </TABLE>

• En el siguiente nivel, dentro de la anterior, pondremos las etiquetas para formar cada fila  de la tabla, que son <TR> y </TR>. Hay que repetirlas tantas veces como filas queremos que tenga la tabla. En el siguiente ejemplo se puede ver una tabla de dos filas:

         <TR>
         [etiquetas de las distintas celdas de la primera fila]
         </TR>
         <TR>
         [etiquetas de las distintas celdas de la segunda fila]
         </TR>

• En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que son <TD> y </TD>, que engloban el contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirla tantas veces como celdas queremos que haya en esa fila.

Ejemplo de una tabla con dos filas de tres celdas cada una:

<TABLE BORDER>
<TR>
<TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD>
</TR>
<TR>
<TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD>
</TR>
</TABLE>

Esta es la estructura "principal" de una tabla. Hay muchas más etiquetas que se pueden usar en las tablas y que son útiles. Entre ellas se encuentran las de variar el espesor de los bordes, las que permiten posicionar el contenido en las celdas, las que sirven para poner un color de fondo a la tabla etc. Si queréis saber cómo perfeccionar vuestra tabla, os recomiendo ir al manual que dejé al principio. 

Con esto, terminamos la clase de hoy...

¡Hasta la próxima!