FUNDAMENTOS BÁSICOS DE HTML5 - PARTE 3 -Imágenes - codeAb

Hola amigos lo que haremos hoy en este artículo es aprender a insertar imágenes en HTML5.

Ahora tocaremos el tema de imágenes en nuestra pagina web, ya que este objeto por así decirlo es indispensable para que nuestra web sea mas llamativo agradable y dar un mejor mensaje de lo que queremos transmitir.

para ello utilizaremos la etiqueta IMG, esta etiqueta tiene dos atributos muy importantes el SRC y ALT, pero también tiene otros atributos que agregaremos en el ejemplo.

ETIQUETA IMG:

<img src="link" alt="" title="">

Como ven esta etiqueta no tiene cierre como las demás etiquetas que vimos en los artículos anteriores de este blog pero esta etiqueta si tiene contenido pero ¿cómo lo llamo?, lo llamamos en el atributo SRC.

ATRIBUTOS DE LA ETIQUETA IMG:

SRC: En este atributo se coloca la dirección donde se encuentra la imagen. o también se puede colocar un link de una imagen sacada de Internet.

ejemplos:

1.- Si vamos a usar una imagen de una carpeta de nuestro proyecto seria de la siguiente forma:

<img src="imagenes/descarga.jpg">

2.- Si usamos un link de Internet seria de la siguiente forma:

Para usar de esta forma devemos copiar la url de la imagen asi como se muestra.

<img src="http://fmdos.cl/wp-content/uploads/2015/10/amigos-inseparables-el-perrito-y-el-gatito-kitten-and-puppy-cute-friends-1920x1200-.jpg">.

ALT: En este atributo se coloca un texto alternativo que se mostrara si en caso el navegador no encuentre la imagen. si deseas puedes probar copiando el código y poniendo una url invalida.

ejemplo:

<img src="imagenes/noExisto.jpg" alt="perrito">

resultado:

TITLE: Esta etiqueta sirve para proporcionar información adicional el efecto es notable al pasar el mouse por encima de la imagen.

ejemplo:

<img src="imagenes/descarga.jpg" alt="paisaje" title="soy texo adicional del paisaje" >

resultado:

De esta manera se inserta imagen en nuestra pagina web, hay mas atributos para la etiqueta <img> como width, height pero no los tocaremos ya que pienso que eso esta mas relacionado con css.

Bueno les dejo el código de la primera imagen para que lo copien.

<!DOCTYPE html>

<html lang="es">

<head>

<title>mi primera página web</title>

</head>

<body>

<h1>Mi Página Web Con imágenes</h1>

<img src="imagenes/descarga.jpg" alt="paisaje" title="soy texo adicional del paisaje" >

<img src="http://fmdos.cl/wp-content/uploads/2015/10/amigos-inseparables-el-perrito-y-el-gatito-kitten-and-puppy-cute-friends-1920x1200-.jpg" alt="perrito" title="perrirto" width="300px" height="168px">.

</body>

</html>