Imagenes
 

Atributos de la etiqueta <IMG>


  1.  src=: este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar.
  2.  align=: este atributo permite controlar la alineacion de la imagen, con respecto a un texto o imagen que este en la misma linea.
  3.  alt=: este atributo sirve para suplantar la imagen con un texto o titulo, en caso de que la imagen no se vea, o este en carga. Tambien cuando la imagen fue cargada, al pasar el mouse encima nos muestra el texto o titulo que escribimos anteriormente.
  4.  title=: este atributo es opcional, sirve para dar un titulo a la imagen, parecido al atributo alt=.
  5.  width=: este atributo es opcional, sirve para dar una anchura a la imagen.
  6.  height=: este atributo es opcional, sirve para dar una altura a la imagen.
  7.  border=: con este atributo podemos especificar un borde que rodee la imagen, y darle un ancho determinado (siempre en pixeles).



Aprendiendo a utilizar los atributos


 Ahora que conocemos los atributos de la etiqueta <IMG>, vamos a aprender a colocar imagenes, y vamos a mostrar lo que hace cada atributo.

Atributo Codigo Resultado
src=
<img src="https://img.webme.com/pic/h/html-basico/flechadecostado.png">
align="left"
A la izquierda<img src="https://img.webme.com/pic/h/html-basico/flechadecostado.png" align="left">
A la izquierda
align="right"
A la derecha<img src="https://img.webme.com/pic/h/html-basico/flechadecostado.png" align="right">
A la derecha
align="center"
Centrada<img src="https://img.webme.com/pic/h/html-basico/flechadecostado.png" align="center">
Centrada
align="top"
Arriba<img src="https://img.webme.com/pic/h/html-basico/flechadecostado.png" align="top">
Arriba
alt=
<img alt="Esta imagen no se ve, y el texto no se puede seleccionar.Y se muestra el texto" src="http://www.lala.jpg">
Esta imagen no se ve, y el texto no se puede seleccionar.Y se muestra el texto
title=
<img src="https://img.webme.com/pic/h/html-basico/flechadecostado.png" title="Esta imagen no se ve, pero se muestra el titulo al estar encima de la imagen">
width=
<img width="40" src="http://www.alal.es/images/imagen.gif"> Su anchura es de 40px
Su anchura es de 40px
height=
<img height="20" src="http://www.alal.es/images/imagen.gif"> Su altura es de 20px
Su altura es de 20px
height=
    +
width=
<img height="20" width="40" src="http://www.alal.es/images/imagen.gif"> Su altura es de 20px, y su anchura de 40px
Su altura es de 20px, y su anchura de 40px
border="1"
<img border="1" src="https://img.webme.com/pic/h/html-basico/flechadecostado.png"> Ahora tiene un borde de 1px de color negro
Ahora tiene un borde de 1px de color negro
border="2"
<img border="2" src="https://img.webme.com/pic/h/html-basico/flechadecostado.png"> Ahora tiene un borde de 2px de color negro
Ahora tiene un borde de 2px de color negro



¿Como insertar un link en una imagen?


 Esta es la manera de insertar un link en una imagen, es decir, que al hacer click sobre la imagen, èsta lleve a la pagina deseada.

Abrir en Codigo Resultado
La misma ventana
<a href="http://html-basico.es.tl"><img width="100" height="40" border="0" src="http://o.imm.io/Qhw.jpg">
Otra ventana o pestaña
<a target="_blank" href="http://html-basico.es.tl"><img width="100" height="40" border="0" src="http://o.imm.io/Qhw.jpg">

 
 
Hoy hubo 1 visitantes (1 clics a subpáginas)
 
 
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis