Info HTML2

Imagenes

Atributos de la etiqueta

src=: este atributo es obligatorio e indica la URL de la imagen que veremos.
align=: este atributo permite controlar la alineacion de la imagen, con respecto a un texto o imagen que este en la misma linea.
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.
title=: este atributo es opcional, sirve para dar un titulo a la imagen, parecido al atributo alt=.
width=: este atributo es opcional, sirve para dar una anchura a la imagen.
height=: este atributo es opcional, sirve para dar una altura a la imagen.
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=

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=

title=

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

Otra ventana o pestaña

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