Web Maestro
 
  Web-maestro
  Home
  Comentarios
  Reportar Error
  HTML Basico
  1.-Una pagina basica
  2.-Dando forma al texto
  3.-Enlaces con otras páginas
  4.-Imagenes
  5.-Caracteres especiales
  HTML Intermedio
  6.- Los estándares del HTML
  7.-Fondos
  8.-Alineación de las imágenes
  9.-Formato de las imágenes
  10.-Tablas
  11.-Formularios
  12.-GIFs animados
  13.-Mapas
  14.-Frames
  15.-Sonidos
  16.-Texto en movimiento
  17.-Publicación y promoción de una página
  18.-Contadores de visitas
  19.-Componer con estilo
  Temas avansados
  20.-Applets de Java
  21.-Trucos diversos
  22.-Canales de chat en páginas Web
  23.-Hojas de estilo en cascada.
  24.-Hojas de estilo en cascada.
  25.-Hojas de estilo en cascada.
  En preparacion
  26.-HTML dinámico
Subir | Imprimir | Agregar a favoritos
8.-Alineación de las imágenes

8. Alineación y dimensionado de imágenes

Alineación de las imágenes

La alineación de las imágenes fue, en su día, el primer golpe de efecto del programa Navigator de Netscape. Permitió alinear una imagen a la izquierda o a la derecha de la página y hacer que el
doom.giftexto la rodee completamente, consiguiéndose así una apariencia similar a la de una revista. Es el caso de este párrafo con respecto a la imagen de la derecha. Obsérvese cómo las líneas, cuando rebasan su parte inferior, continúan normalmente hasta el margen derecho de la página. De manera análoga, se puede alinear la imagen a la izquierda, comportándose el texto de una forma equivalente. Esto se consigue con las extensiones de la etiqueta ALIGN, (que ya se vió en el Capítulo 4 con los comandos TOP, MIDDLE y BOTTOM). Pero entonces sólo se hacía referencia al titular de la imagen, es decir, a un texto explicativo, pero menor que una línea completa, pues en caso de rebasarla, el texto saltaba a la parte inferior de la imagen, dejando un hueco en blanco, con lo que su utilidad era muy limitada. doom2.gifEste inconveniente queda solventado con los comandos de Netscape RIGHT (derecha) y LEFT (izquierda). La imagen de arriba, "doom.gif", alineada a la derecha, se ha obtenido con la etiqueta:

 

<IMG SRC="doom.gif" ALIGN=RIGHT>

y la imagen de abajo, "doom2.gif", alineada a la izquierda, se ha obtenido con la etiqueta:

 

<IMG SRC="doom2.gif" ALIGN=LEFT>

Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta debajo de ella, es decir, dejar un espacio en blanco parcialmente, se pueden emplear las siguientes extensiones de la etiqueta <BR>:

<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.

Un ejemplo para aclarar esto:

<IMG SRC="isla.gif" ALIGN=LEFT> Este texto esta a un lado de la imagen.
<BR> Este tambien esta a un lado de la imagen, en la linea siguiente.
<BR CLEAR=LEFT> Este otro texto, en cambio, ha buscado el primer margen libre a la izquierda.

Que resulta:

isla.gif Este texto esta a un lado de la imagen.
Este tambien esta a un lado de la imagen, en la linea siguiente.
Este otro texto, en cambio, ha buscado el primer margen libre a la izquierda.

 


 

Dimensionando la imagen

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.

Esto es especialmente molesto cuando, como ocurre frecuentemente, en la cabecera de la página se encuentra una imagen grande, ya que durante un tiempo relativamente largo no se verá nada en la pantalla.

Para evitar este inconveniente existen unas extensiones de la etiqueta de la imagen <IMG SRC="imagen.gif"> que sirven para indicar al navegador cuáles son sus dimensiones en pixels. (Este dato lo habremos obtenido previamente de algún programa gráfico).

En este caso, 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.

Estos comandos son WIDTH (ancho) y HEIGHT (alto).

Por ejemplo, para la imagen isla.gif situada más arriba:

 

<IMG SRC="isla.gif" WIDTH=120 HEIGHT=94>

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.

Se pueden también, si se quiere, dimensionar las imágenes con unos valores distintos a los que realmente tienen, variando el tamaño, la anchura o la altura. Esto es muy conveniente, por ejemplo para poner en la página un thumbnail (reproducción en pequeño de una imagen), que hace de enlace a la imagen en su verdadero tamaño. De esta manera no recargamos demasiado una página, y el usuario será quien decida qué imágenes desea cargar.

He aquí un ejemplo de thumbnail:

nytimes.gif (150x75) La imagen, "nytimes.gif", tiene realmente unas dimensiones de 575x300 pixels (datos obtenidos de un programa gráfico). Para dimensionar el thumbnail a 150x75 (guardando unas proporciones parecidas al original, de 2:1), lo conseguimos con:
 

 

<IMG SRC="nytimes.gif" WIDTH=150 HEIGHT=75>

Para hacer que esta imagen reducida sea el enlace con la imagen en su tamaño original, lo conseguimos con:

 

<A HREF="nytimes.gif"> <IMG SRC="nytimes.gif" WIDTH=150 HEIGHT=75> </A>

También se puede conseguir esto de otra manera, más correcta aunque más laboriosa. Es la de reducir en un programa gráfico esta imagen a 150x75, guardarla con otro nombre, y luego hacer que la pequeña sea el enlace de la grande. Es más correcta esta otra solución porque no todos los navegadores reconocen los comandos WIDTH y HEIGHT, incluso tampoco algunas de las versiones más antiguas de Netscape.

 

Ejemplo práctico

Partiendo del ejemplo práctico del capítulo anterior, mipag7.html, vamos a dimensionar las imágenes existentes y añadir otra, doom.gif, como ejemplo de imagen alineada a la izquierda, con su texto correspondiente.

Capturamos la imagen "doom.gif" y la guardamos junto con el fichero que vamos a crear.
Cargamos el fichero mipag7.html y cambiamos las etiquetas de las imágenes de la siguiente manera:

<IMG SRC="hombre.gif"> por <IMG SRC="hombre.gif" WIDTH=29 HEIGHT=27>
<IMG SRC="casa.gif"> por <IMG SRC="casa.gif" WIDTH= 30 HEIGHT=29>
<IMG SRC="isla.gif"> por <IMG SRC="isla.gif" WIDTH= 120 HEIGHT=94>

(La imagen del fondo "nubes.jpg" no se dimensiona).

Además de esto, añadimos entre las etiquetas </CENTER> y </BODY> (al final del documento), lo siguiente:

<P>
<HR>
<P><IMG SRC="doom.gif" WIDTH=160 HEIGHT=100 ALIGN=LEFT>Una de mis aficiones 
favoritas son los juegos tipo "Doom", con los que paso horas incontables.
<BR CLEAR=LEFT>
<P>
<HR>
Guardamos este fichero como mipag8.html y lo cargamos en el navegador para verlo. Resultado
Servicio  
  Esta pagina web les enseñara a aprender codigos HTML, esta pagina es para los que estan aprendiendo a usar los codigos.  
Han entrado 20504 visitantes en Web-maestro
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis