Inicio > Uncategorized > TUTORIAL HTML: 11. IMÁGENES

TUTORIAL HTML: 11. IMÁGENES

martes, 21 de julio de 2009 Dejar un comentario Ir a comentarios

Para insertar imágenes, el código HTML utiliza la etiqueta <img> con sus correspondientes parámetros que son los que se enumeran a continuación:

  • src = «nombre de la imagen» (p. ej.: <img scr=»mifoto.jpg»>
  • alt = «Texto» Este parámetro muestra un texto alternativo cuando pasamos el ratón por encima de la imagen.
  • align = Indica como se alineará el texto con respecto a la imagen. Se puede alinear el texto con la parte superior de la imagen (top), con la parte central (middle), o con la inferior (bottom). También puede quedar la imagen a la derecha (right) del texto, rodeándolo, o a la izquierda (left).
  • border = Indica si lleva borde y su anchura.
  • height = Indica el alto de la imagen. Admite valores en puntos o en porcentaje.
  • width = Indica el ancho de la imagen. Admite valores en puntos o en porcentaje.
  • hspace = Indica el margen horizontal de la imagen con respecto al texto que le sigue o precede.
  • vspace = Indica el margen vertical de la imagen con respecto al texto que le sigue o precede.
  • lowsrc = «nombre de la imagen» Este atributo permite especificar una imagen auxiliar, que se abre en primer lugar, mientras carga la imagen definitiva. Se suelen usan imágenes de menor resolución, para que el usuario disponga de ellas cuanto antes. También se puede usar para logar ciertos efectos (muy simples) de animación. Este parametro no es reconocido por la totalidad de los navegadores.
Ejercicio 7:

Guarda una imagen cualquiera en la misma carpeta en la que guardarás tu archivo HTML. (Puedes guardar la imagen en cualquier carpeta, pero entonces deberás tener mucho cuidado a la hora de indicar la ruta).

Inserta el siguiente código dentro de la etiqueta <body></body>. En los dos primeros ejemplos vemos las diferencias de tamaño de la imagen especificadas por los atributos width (anchura) y height (altura)

Código en el editor de textos En el navegador
<img src=»surf.jpg» width=»139″ height=»89″/> Ejemplo de imagen pequeña
<img src=»surf.jpg» width=»196″ height=»125″/> Ejemplo de imagen grande

En los siguientes ejemplos se aprecia la diferencia de alineación del texto con respecto a la imagen. Observa el uso del atributo align, con sus correspondientes valores top, middle y bottom.

http://img269.imageshack.us/img269/8481/dibujovcx.png

Como sin duda habrás apreciado, la imagen y el texto están excesivamente juntos. Esto se puede mejorar usando los parámetros vspace y hspace.

http://img216.imageshack.us/img216/752/dibujorthlzs.png

El siguiente ejemplo muestra la imagen con borde de 4 puntos.

http://img145.imageshack.us/img145/1112/dibujofgj.png

Haz todos los cambios que creas necesarios hasta que consigas práctica. Prueba con textos más largos para ver las alineaciones de texto envolvente con los parámetros align=right y align=left.

Categories: Uncategorized Tags: , ,
  1. domingo, 22 de mayo de 2011 a las 23:20 | #1

    If you want to buy a car, you would have to receive the personal loans. Furthermore, my father commonly utilizes a student loan, which is really reliable.

  1. Sin trackbacks aún.


Ir a la barra de herramientas