Programación Web - HTML (VI) - [ IMAGENES ]

Imágenes

Como el subtitulo lo indica el tema a tratar ahora son las imágenes, y buen momento elegimos para hacerlo puesto que si ya leyeron todas las entradas anteriores de este blog sobre HTML con esto ya pueden comenzar a hacer, casi en su totalidad, su web.Claro que aun faltan detalles como las fuentes tipográficas, el tamaño, delimitar un poco mejor las tablas y un gran etc. sin embargo ya tiene bastante información como para comenzar.

Pero comencemos con lo que nos compete en este post, es decir, las imágenes.

Primer quiero mostrarles un ejemplo de como quedará el código que luego detallare:

Utilizando una imagen en un HTML

Como pueden ver, en el documento HTML hemos insertado una imagen.
La daré a continuación la imagen utilizada por si desea practicar utilizando la misma:

Imagen de ejemplo

Ahora si comencemos con el código del HTML:

Para poder insertar una imagen dentro de un documento HTML hay que usar la etiqueta <img>.
Ahora bien, solo con eso no alcanza debemos comenzar a utilizar los atributos de esa etiqueta, el primero y mas importante es "src" (Source/Recurso). Este atributo lleva como valor una ruta, ya sea absoluta o relativa, de la imagen en cuestión.
En el ejemplo de arriba utilizo una ruta relativa puesto que la imagen esta al lado del documento HTML:

La imagen se encuentra al mismo nivel que el documento HTML

Es decir que nuestro código queda de la siguiente manera:

<img src="Dibujo.jpg" />

Observen la terminación de esta etiqueta, se darán cuenta que termina igual que la regla o el salto de linea, es decir, <hr /> o <br /> respectivamente.
Lo que me olvide de mencionar es que realmente en HTML las etiquetas son <hr>, <br> y <img>.
Pero entonces ¿Por que las cierro al final?
La respuesta es simple, porque les estoy enseñando XHTML en ese caso, por que en realidad hacia allí vamos, con el paso del tiempo iré enseñándoles XHTML en lugar de HTML y todos los atributos referidos a diseño dejaran de existir para comenzar a usar CSS, por lo cual, les estoy enseñando de a poco hacia donde esta yendo la tecnología de desarrollo web, sin embargo, también les enseño de donde viene. Esta es la razón por la que se los enseño con " />" y cuando veamos Doctype veremos bien que corresponde a cada uno.
Por el momento acostúmbrense a usar " />" es decir [ Espacio - Barra - Mayor Que ].

Continuemos...

Pero no solo termina ahí nuestra linea de código, si miran con atención como se ve en el navegador notarán que la imagen tiene un recuadro negro y además su tamaño no es el original, esto se debe, a que hemos modificado la imagen mediante otros atributos de la etiqueta <img>.


El borde ya deben saber como se realiza, pero por si no lo recuerdan se los refresco, mediante el atributo "border", en este caso con un valor de "1". Por ende nuestra etiqueta queda así:

<img src="Dibujo.jpg" border="1" />

Pero también hemos modificado el ancho y el alto de la imagen y esto se hace mediante los atributos "width" y "height", es decir, ancho y alto respectivamente.
En este caso hemos establecido a ambos atributos con un valor de "200" quedando nuestra etiqueta de la siguiente manera:

<img src="Dibujo.jpg" border="1" width="200" height="200" />

Ahora les enseñaré dos atributos mas que son recomendables utilizarlos siempre y estos son "alt" y "title". Veamos un ejemplo visual antes de detallarlas:

Utilizando los atributos "alt" y "title"

Como pueden ver, una de las imágenes no se ve y en lugar de ella hay un texto que dice "descripción alternativa de la imagen", en cambio, la otra imagen si se ve y tiene un tooltip (descripción emergente) con la leyenda "es una cara feliz".

El primer caso, es decir, la imagen que no se ve utiliza el atributo "alt" este es un texto alternativo que se muestra cuando la imagen no puede ser cargada o es leído por el sistema operativo en caso de que este esté configurado, por ejemplo, para personas no videntes que escucharán este texto alternativo.

Su sintaxis es la siguiente: 

<img src="imagen.jpg" alt="descripción alternativa de la imagen" /> 


En el segundo caso tenemos un cuadro emergente sobre la imagen con un texto descriptivo, este aparecerá cuando el usuario pose su mouse sobre la imagen y lo deje sobre ella por unos segundos.

Su sintaxis es la siguiente:

<img src="Dibujo.jpg" title="es una cara feliz" /> 


Bien, hay algunos atributos mas, pero los iremos viendo mas adelante en caso de necesitarlos, por el momento dejamos acá sin antes mencionar o mejor dicho recordar, si es que ya lo escribí antes, que las etiquetas <img> deben tener siempre los atributos "alt" y "title", no es una "obligación" pero si es una buena practica ya que los necesitaremos en un futuro para poder validar nuestros HTML.


Y ahora sí hasta acá llegamos, en la próxima entrega comenzaremos a mezclar diferentes elementos del HTML con el objetivo de crear una "home".