Cargando el contenido...

lautiito - Todo para tu web

Info HTML2

Imagenes


Atributos de la etiqueta

  1.  src=: este atributo es obligatorio e indica la URL de la imagen que veremos.
  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.


Aprendiendo a utilizar los atributos


 Ahora que conocemos los atributos de la etiqueta , 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">




Enlaces - Link


¿Como colocar enlances?


 Algo importante que destacar, todos los enlances (en determinados casos) se deben poner con http://. Esto indica que el protocolo por el que se accede es HTTP, el utilizado en la web. No debemos olvidarnos de colocarlas (repito,en determinados casos), porque si no los enlaces serán tratados como enlaces locales a nuestro sitio.(A esto me referia con "en determinados casos", en otras palabras, sirve para ahorrar texto)

 Los enlances a modificar seran coloreados en verde, y los textos en rojo; las diferencias entre un tipo de enlance respecto a otro, seran de color azul.

Abrir en Codigo Resultado
La misma ventana
<a href="http://lautiito.es.tl/inicio.htm">Ir al Inicio</a>
Ir al Inicio
Otra ventana o pestaña
<a "target="_blank" href="http://lautiito.es.tl/Inicio.htm">Ir al Inicio</a>
Ir al Inicio
Misma ventana, ahorrando texto
<a href="/Inicio.htm">Ir al Inicio</a>
Ir al Inicio


Enlaces a direcciones de correo electronico


 Èstos son aquellos que al clickearlos nos abre un nuevo mensaje de correo electrónico dirigido a una dirección de email determinada.

Codigo Resultado
<a href="mailto:es.-lauti@hotmail.com">Enviar email a: es.-lauti@hotmail.com</a>
Enviar email a: es.-lauti@hotmail.com




Hoy nos visitaron 2 personas y miraron 22 paginas!
=> ¿Desea una página web gratis? Pues, haz clic aquí! <=