Curso de html. ¿Cómo incluir imágenes en Html?.
Para trabajar con imágenes utilizaremos la etiqueta <img />.
Si habeis seguido un poco el curso, ya sabreis que esta etiqueta es de las consideradas como de autocierre, actua en solitario, sin etiqueta que cierre el contenido. Xhtml obliga a cerrar todas las etiquetas utilizadas en nuestro código.
Es un elemento inline-level por lo tanto debemos incluirlo dentro de un bloque o elemento block-level para su correcto funcionamiento.
Ya veremos que con css hay otros tipos de etiquetas de bloque o block-level que se utilizan mucho.
Aunque son etiquetas del código html, me gusta incluirlas cuando explico css por el gran uso que se las dá.
En principio para que podais hacer algunas pruebas o experimentos trabajando con las imágenes, podeis crear un párrafo mas o menos extenso y meter el código en alguna linea dentro de él. Las etiquetas de párrafos ya sabeis que son:
<p></p>.
Vamos a exponer la síntesis de esta etiqueta y después explicaremos el funcionamiento o el papel que juega cada atributo asociado a ella:
<img src=»Ruta del archivo« alt=»Descripcion de la imagen a mostrar«/>.
el atributo src sirve para indicar al navegador la ruta donde esta nuestra imagen. Por ejemplo, si tenemos un archivo de imagen guardado en la carpeta imágenes del disco duro de nuestro ordenador, llamado imagen.jpg con la siguiente ruta de acceso:
C:/IMAGENES y nuestra hoja de html esta en el mismo directorio raiz, C:/ escribiriamos lo siguiente:
<img src=»IMAGENES/imagen.jpg« alt=»Descripción de la imagen.jpg« />
he de aclarar que cuando vemos en un navegador el resultado final de un documento html con imágenes incorporadas, aunque pensemos que las imágenes estan en la misma página html ya que es en ella donde metimos la etiqueta <img>, realmente, no estan ahí. Las imágenes se guardan a parte de la página html y es el navegador en cooperación con el servidor de alojamiento el encargado de construir toda la página web, incorporando los archivo de imagen a ella después de haberlas buscado en la ruta que le facilitamos con el atributo src.
El atributo alt=»» se utiliza para dar una descripción de la imagen mostrada. Y aunque el dicho de que: «Una imagen vale mas que mil palabras» es muy cierto, tenemos que pensar en aquellas personas a las cuales este dicho las trae sin cuidado, principalmente por tener la desgracia de tener sus capacidades visuales disminuidas y tener que utilizar un lector de pantalla para navegar por internet. Este atributo, es muy importante a la hora de implementar una imagen en un documento web.
Aunque esta razón es primordial a la hora de describir una imagen, existen otras razones, por ejemplo el tiempo de carga de la página. No todo el mundo accede a internet con un buen navegador o buena conexión de red o con un equipo acondicionado a los nuevos tiempos. En esa porción de tiempo de espera, si no adjuntasemos el atributo alt con una buena descripción, solo veriamos un recuadro vacio, mientras acaba la carga de la página y nadie desea que el visitante de nuestro documento web o página web, se vaya aburrido de nuestro sitio, sin echar tan solo un vistazo al contenido. Quizás os parezca un tanto exajerado lo que digo, pero si vuestra intención es formaros como buenos programadores web o simplemente alojar alguna web en la red y que esta prospere con una buena posición en los buscadores mas importantes, os dareis cuenta de que todo detalle de calidad suma.
Bueno, volvamos al asunto que tenemos entre manos.
Es evidente, que este atributo alt, no lo tenemos que emplear en todas nuestras imágenes, ya que no es lo mismo, una imagen de nuestro logotipo o una imagen que queremos poner como objeto decorativo en cada fila de una lista, que una imagen de un paisaje con montañas nevadas, al borde del mar. Así que el uso adecuado de este atributo, se deja en manos del buen criterio .
Si quereis poner en práctica lo aprendido en esta página, no os desanimeis si el resultado no se parece al ejemplo que ilustro en la misma. ni os volvais locos pensando que haceis mal. Lo más lógico es que os aparezca la imagen separada del texto, no incluida en él. La razón es porque os falta aprender otras etiquetas, atributos y técnicas de trabajo, que aún no hemos visto y que veremos en el curso de css. Aunque ahora estais tentados de saltar al curso de css, os aconsejo paciencia, es muy importante dominar y entender bién el lenguaje html, para evitar problemas o errores futuros. Como dice el refrán:
«Quien mucho corre pronto para». Formaros una base sólida en html y entendereis mejor el funcionamiento de css.