Imágenes
Insertar imágenes
Una página web sin alguna imagen es como el mar sin sal. Para incluir gráficos e imágenes en nuestras páginas utilizaremos la etiqueta
<img src="URL_fichero_grafico" alt="descripción o título" width="88" height="31" border=0>
El parámetro src especifica la URL del fichero que contiene la imagen. Los formatos estándar en la red son el GIF, PNG y JPG. Si quieres saber más sobre imágenes e internet debes dirigirte a esta sección dedicada al tema en la guía de diseño.
El parámetro ALT especifica el texto que se mostrará en lugar del gráfico en aquellos navegadores que no sean capaces de mostrarlos (como el Lynx) y en el supuesto de que el usuario los haya desactivado. Algunos navegadores lo muestran cuando pasamos el ratón por encima de la imagen. Es por eso que, aunque algunos usuarios no lo lleguen a ver nunca, conviene ponerlo siempre. De hecho, el estádar HTML 4.0 obliga a hacerlo. Su uso es además muy interesante cara a los robots buscadores que de este atributo pueden sacar información del tema tratado en la página.
Los atributos width y height indican el ancho y alto del gráfico en pixels. Su uso no es obligatorio pero si muy aconsejable para mejorar el tiempo de carga de la iamgen: el navegador sabe el espacio que ocupará la imagen y puede seguir colocando los otros elementos de la página mientras se termina de descargar la imagen.
Por último vemos el atributo border que como podrás adivinar tan solo coloca el ancho del borde que rodea la imagen. Por defecto su valor es cero, salvo el caso que vemops en el siguiente apartado.
Por ejemplo
<img src="/imgs/logo3.jpg" width="250" height="188" alt="Diseño web">
Imágenes y enlaces
Recordarás que al hablar de los enlaces decíamos que en el contenido de la etiqueta <a> podía ir texto o una imagen. En este caso el navegador destaca la imagen colocandole un borde del color que use para señalar los enlaces de texto. Algo bastante lógico pero que en la mayoría de los casos queda poco estético, afortunadamente podemos eliminar ese borde poniendo a 0 el atributo border.
<a href="tema2.htm">
<img src="/assets/imgs/logo3.webp"
alt="Tema 1" width="45" height="30">
</a>
En HTML 4 se ve así:
Sin embargo,
<a href="tema2.htm">
<img src="/assets/imgs/logo3.webp"
alt="Tema 2" width="45" height="30" BORDER="0">
</a>
En HTML 4 se ve así:
Alineación respecto al texto
HTML nos permite controlar la disposición de las imágenes en la página con relación al texto, para ello usamos el parámetro ALIGN :
align |
Significado | Muestra |
|---|---|---|
top |
Coloca el punto más alto de la imagen coincidiendo con más alto de la línea de texto actual. |  Este es el texto |
middle |
Alinea el punto medio (en altura) de la imagen con la base del texto. | Este es el texto |
bottom |
Alinea el punto más bajo de la imagen con la base del texto. | Este es el texto |
left |
Coloca la imagen a la izquierda del texto. | Este es el texto y esta es otra línea |
right |
Coloca la imagen a la derecha del texto. | Este es el texto y esta es otra línea |
Hay que aclarar que la base del texto es la línea donde descansan las letras del alfabeto excepto las que tienen trazo bajo como la p, la g o la j.