Cargando

Ir a contenido


 


Elementos Embebidos en HTML5

Tutorial describiendo a fondo sobre todos los elementos embebidos con el lenguaje de programación HTML5.



Escrito por el oct 08 2014 21:11 html5


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.

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.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado oct 08 2014 21:11
  •   Visitas 985
  •   Nivel
    Profesional



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse