La etiqueta img

En HTML si queremos añadir una imagen usaremos la etiqueta <img>, esta etiqueta no tiene su homologa de cierre, su estructura es la siguiente.

<img>

Atributos en HTML

Los atributos son palabras claves dentro de las etiquetas HTML que proporcionan información adicional a estas y siempre estan en las etiquetas de inicio, son escritas en pares de nombre = "valor".

<etiqueta nombre="valor"></etiqueta>
Los nombres de atributos pueden escribirse en mayúscula o minúscula aunque se recomienda escribirlos en minúsculas ya que es lo mas común, además de ser el estandar en programación web.

El atributo src

Para que esta etiqueta muestre una imagen requiere el atributo src, con este atributo le podemos indicar la ruta donde esta almacenada la imagen que queremos mostrar.

<img src="ruta de la imagen">
Recuerda que en la lección anterior vimos como apuntar a un archivo a través de rutas relativas u absolutas.

El atributo alt

La etiqueta imagen tiene otro atributos asociados como puede ser el atributo alt, el cual sirve para añadir un texto alternativo en caso de que por alguna razón la imagen no sea visible.

<img src="ruta" alt="texto alternativo">

El atributo title

El atributo title, que no tiene nada que ver con la etiqueta <title>, sirve para mostrar un texto flotante cuando situamos el ratón encima de la imagen, la sintaxis es esta.

<img src="ruta" title="título flotante">

Como puedes imaginar puedes añadir u omitir los atributos que tu creas convenientes excepto el atributo src que es obligatorio. Además el orden en que se escriben los atributos dentro de una etiqueta es indiferente, no importa si primero pones uno o otro, aunque es importante que intentes seguir siempre un mismo orden, con esto conseguiras un código mas limpio.
<img src="img-muestra.png" title="imagen de muestra" alt="imagen no visible">


Ejercicios

Abre el documento pruebas.html en el editor de texto Sublime Text 3, descargate la imagen que encontrarás aquí , y guardala en la carpeta raiz, añadela debajo del último párrafo con su respectiva etiqueta, recuerda escribir la ruta, que al estar en la raíz solo será escribir su título o nombre y su extensión. Por último, añadele un texto flotante y un texto alternativo por si la imagen no fuera visible.

<!DOCTYPE html>
<html>
  <head> 
    <title>Título de la página</title>
  </head>
  <body> 
    <!-- Esto es un comentario -->
    <h1>Mi primer encabezado de nivel 1</h1>
    <h2>Mi primer encabezado de nivel 2</h2>
    <h3>Mi primer encabezado de nivel 3</h3>
    <h4>Mi primer encabezado de nivel 4</h4>
    <h5>Mi primer encabezado de nivel 5</h5>
    <h6>Mi primer encabezado de nivel 6</h6>
    <p>Este es mi primer <b>párrafo</b> en html con una palabra en negrita.</br>
    Aquí he insertado un salto de líne con la etiqueta br</p>
    <p><i>Este es un nuevo párrafo en html en cursiva.</i></p>
    <img src="ico-google.png" title="enlace a google" alt="imagen de google">
  </body>
</html>

Cuando hayas acabado, guárdalo. No te preocupes por lo feo que queda todo, esto solo son pruebas para ver cada etiqueta.

Daniel Fernández Velázquez

Me encanta aprender y practicar la programación web, Autodidacta y apasionado de la tecnología.