InicioCrear web desde cero › Insertar imagen con HTML

Insertar imagen con HTML

En esta lección aprenderemos a insertar o colocar imágenes con código HTML, y también veremos como hacer que esa imagen tenga un enlace.

Llego el momento de insertar nuestra primera imágen con HTML, la etiqueta que sirve para agregar imagenes es <img> pero al igual que la etiqueta para crear enlaces, necesitamos agregar un atributo para especificar la ubicación, en este caso, de la imágen.

Para insertar una imágen lo haremos así:

<img src="ubicación" alt="descripción" />

"alt" sirve para agregar una descripción a la imágen, que aparecerá cuando pasemos el mouse por encima de ella.

Si cambiamos a la pestaña "Vista preliminar" veremos el resultado final:

Ahí vemos como queda en nuestra pagina de ejemplo que venimos creando a lo largo de todas las lecciones anteriores. Pero ¿que pasa si queremos crear un enlace en la imagen para que cuando hagamos clic en ella nos abra otra dirección? eso es lo que voy a explicar ahora :)

 

Crear enlace en imágen

Para crear un enlace en la imágen para que al hacer clic en ella nos abra otra pagina, solo debemos poner la etiqueta <img> dentro de <a> y </a>, de esta forma:

<a href="direccion" title="descripcion"><img src="ubicacion-de-la-imagen" alt="descripcion" /></a>

Bastante simple ¿no? ahora comenzaremos a ver estilos CSS, una tecnología que te ahorrara mucho trabajo, ya verás :)

 

Siguiente lección: estilos CSS