IMAGENES HTML
Estructura general para las imágenes :
<IMG SRC="URL">
Donde URL es la dirección de la imagen,esta etiqueta no necesita cierre.
Atributos de IMG
Los atributos de la imagen pueden ser los siguientes:
ALT="Texto que aparece al situar el cursor sobre la imagen".
También muestra este mismo texto en caso de que el navegador no cargue la imagen.
<IMG SRC="URL de la imagen" ALT="texto a mostrar">
ALIGN
Nos indica la posición de la imagen respecto del texto.
ALIGN="LEFT" alinea la imagen a la izquierda de la página forzando la colocación del texto en la parte derecha y arriba
ALIGN="RIGHT"alinea la imagen en la derecha de la página forzando la colocación del texto en la parte izquierda y arriba.
ALIGN="TOP" si queremos que el texto esté alineado con la parte superior de la imagen
ALIGN="MIDDLE" alinea el texto con la parte central de la imagen
ALIGN="BOTTOM" alinea el texto con la parte inferior de la imagen
<IMG SRC="URL de la imagen" ALIGN="LEFT">
CAMBIAR LA ALTURA Y EL ANCHO DE LA IMAGEN
WIDTH=80 "Cambia el ancho"
HEIGHT=100 "Cambia la altura"
Indican la anchura y altura de la imagen en píxeles, en este caso 80x100 píxeles.
<IMG SRC="url de la imagen" WIDTH="80 HEIGHT="100" >
COLOCAR BORDE A LA IMAGEN
BORDER=2
Añade un borde, a modo de marco, a la imagen. En este caso de 2 píxeles.
<IMG SRC="URL de la imagen" BORDER="2">
DISTANCIA ENTRE TEXTO E IMAGEN
HSPACE="Espacio Horizontal" y VSPACE="Espacio Vertical
HSPACE=10 , VSPACE=15
Especifican el espacio horizontal y vertical que separa la imagen del texto que la rodea, en este caso 10 píxeles horizontales y 15 verticales.
<IMG SRC="URL de la imagen" HSPACE="10 VSPACE="15">
HIPERVÍNCULO CON IMAGEN
<A HREF="url de destino"> <IMG SRC="URL de la imagen"> </A>
IMAGEN DE FONDO EN HTML
<body background="url del fondo">
MAPA SENSITIVO
Los mapas sensitivos incorpora una serie de enlaces dentro de una misma imagen mediante la etiqueta <MAP>, cuya estructura es la siguiente:
<map name="nombreMapa">
<area shape="forma" coords="coordenadas" href="enlace" >
...
</map>
<img src="imagen.jpg" usemap="#mapa" />
ATRIBUTO SHAPE
Indica el tipo de Área que puede ser de los siguientes tipos:
shape="RECT"
Crea un área rectangular. Para definirla se utilizan las coordenadas de los puntos de la esquina superior izquierda y la esquina inferior derecha. Tal como están nombradas dichas coordenadas en nuestro dibujo, el área tendría la siguiente etiqueta:
<area shape="RECT" coords="X1,Y1,X2,Y2" href="#">
shape="CIRCLE"
Crea un área circular, que se indica con la coordenada del centro del círculo y el radio. A la vista de nuestro dibujo, la etiqueta de un área circular tendría esta forma:
<area shape="CIRCLE" coords="X1,Y1,R" href="#">
shape="POLY"
Este tipo de área, poligonal, es la más compleja de todas. Un polígono queda definido indicando todos sus puntos, pero atención, los tenemos que indicar en orden, siguiendo el camino marcado por el perímetro del polígono. A la vista del dibujo y los nombres que hemos dado a los puntos del polígono, la etiqueta AREA quedaría de esta forma.
<area shape="POLY" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4" href="#">
shape="DEFAULT"
Representa el resto de zonas del mapa que no hayan sido referenciadas por ninguna forma. En este caso no hay coordenadas.
EJEMPLO
<HTML>
<HEAD><TITLE>mapas</TITLE></HEAD>
<BODY>
<map name="mapita">
<area shape="rect" coords="405,73,520,166" href="enlace1">
<area shape="circle" coords="748,248,30" href="enlace2">
<area shape="poly" coords="571,119,626,59,687,118,628,177" href="enlace3">
<area shape="default" href="enlace4">
</map>
<img src="imagen.jpeg" usemap="#mapita ">
</BODY>
</HTML>
EJERCICIO 1
EJERCICIO 2
EJERCICIO 3
Realizar el siguiente ejercicio, teniendo en cuenta, que cuando se haga clic sobre cualquier imagen de alguna fruta, haga un hipervínculo a algún vídeo de youtube relacionado a la fruta.
