Existen momentos en que no todo es generar un formulario dentro de nuestros documentos HTML, muchas veces debemos incluir otros elementos como imágenes dentro de algunas etiquetas para darle forma a nuestra página, para ello veremos en este tutorial como hacerlo y las diferentes características incluidas en la misma.
Para poder lograr mostrar una imagen dentro de nuestro documento HTML debemos utilizar el elemento img el cual tiene los siguientes atributos:
En este momento vamos a centrarnos en los dos primeros atributos, src y alt; src nos permite dar la ruta desde la cual el navegador va a buscar la imagen, puede ser una ruta relativa o inclusive una URL, el atributo alt nos permite colocar un texto, este texto será mostrado solo cuando la imagen no esté disponible ya sea que no esté en la ruta en la cual se especificó en el src o incluso el navegador no la pueda interpretar.
Veamos un ejemplo como incluir una imagen dentro de nuestro documento HTML:
En este ejemplo también vemos dos atributos más, el width y el height estos como sus nombres nos indica es para regular el ancho y el alto de la imagen, con ello podemos garantizar que la imagen se mantendrá dentro de los tamaños establecidos por nosotros, igualmente si la imagen es más grande que eso se re-dimensionará, sin embargo hay que tener cuidado ya que la imagen tendrá el mismo peso, por lo que es recomendable colocar la imagen ya editada del tamaño requerido y que nuestra página cargue más rápido.
Otro uso bastante común es utilizar una imagen como link para otras páginas, ya sea colocando el ícono de un equipo, una flecha de siguiente por ejemplo, claro, ahora con los nuevos frameworks CSS esto podría ser menos común, sin embargo veamos cómo se realiza para tener esta opción dentro de nuestro portafolio de herramientas HTML.
Para embeber la imagen simplemente colocaremos el elemento img dentro un elemento <a> que esté haciendo referencia a una página como por ejemplo:
Con esto logramos que la imagen ahora sea nuestro link como veremos en la siguiente pantalla la imagen no cambia en la forma en que se muestra:
Si hacemos click en la imagen esta nos llevará al destino colocado dentro del elemento <a>; si utilizamos el atributo ismap adicionalmente enviaremos las coordenadas de la posición en la imagen donde hicimos click de forma que pudiésemos trabajar con esos números en el siguiente momento de nuestro proceso de navegación. Con esto finalizamos este tutorial, ya podemos realizar páginas más enriquecidas utilizando imágenes, pudiendo interactuar con ellas inclusive con los puntos donde un usuario pudiera hacer click.
Embeber una imagen
Para poder lograr mostrar una imagen dentro de nuestro documento HTML debemos utilizar el elemento img el cual tiene los siguientes atributos:
- src
- alt
- height
- width
- usemap
- ismap
En este momento vamos a centrarnos en los dos primeros atributos, src y alt; src nos permite dar la ruta desde la cual el navegador va a buscar la imagen, puede ser una ruta relativa o inclusive una URL, el atributo alt nos permite colocar un texto, este texto será mostrado solo cuando la imagen no esté disponible ya sea que no esté en la ruta en la cual se especificó en el src o incluso el navegador no la pueda interpretar.
Veamos un ejemplo como incluir una imagen dentro de nuestro documento HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
Here is a common form for representing the three activities in a triathlon.
<p>
<img src="triathlon.png" alt="Triathlon Image" width="200" height="67"/>
</p>
The first icon represents swimming, the second represents cycling and the third
represents running.
</body>
</html>
En este ejemplo también vemos dos atributos más, el width y el height estos como sus nombres nos indica es para regular el ancho y el alto de la imagen, con ello podemos garantizar que la imagen se mantendrá dentro de los tamaños establecidos por nosotros, igualmente si la imagen es más grande que eso se re-dimensionará, sin embargo hay que tener cuidado ya que la imagen tendrá el mismo peso, por lo que es recomendable colocar la imagen ya editada del tamaño requerido y que nuestra página cargue más rápido.
Embeber una imagen en un Hyperlink
Otro uso bastante común es utilizar una imagen como link para otras páginas, ya sea colocando el ícono de un equipo, una flecha de siguiente por ejemplo, claro, ahora con los nuevos frameworks CSS esto podría ser menos común, sin embargo veamos cómo se realiza para tener esta opción dentro de nuestro portafolio de herramientas HTML.
Para embeber la imagen simplemente colocaremos el elemento img dentro un elemento <a> que esté haciendo referencia a una página como por ejemplo:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
Here is a common form for representing the three activities in a triathlon.
<p>
<a href="otherpage.html">
<img src="triathlon.png" ismap alt="Triathlon Image"
width="200" height="67"/>
</a>
</p>
The first icon represents swimming, the second represents cycling and the third
represents running.
</body>
</html>
Con esto logramos que la imagen ahora sea nuestro link como veremos en la siguiente pantalla la imagen no cambia en la forma en que se muestra:
Si hacemos click en la imagen esta nos llevará al destino colocado dentro del elemento <a>; si utilizamos el atributo ismap adicionalmente enviaremos las coordenadas de la posición en la imagen donde hicimos click de forma que pudiésemos trabajar con esos números en el siguiente momento de nuestro proceso de navegación. Con esto finalizamos este tutorial, ya podemos realizar páginas más enriquecidas utilizando imágenes, pudiendo interactuar con ellas inclusive con los puntos donde un usuario pudiera hacer click.
