Tutorial de HTML (XII)

Poner imágenes en nuestra web produce unos resultados asombrosos de una manera muy fácil. Vamos a mostrarte como puedes incluir una imagen y los atributos que puedes darle a la misma.

El tag básico para colocar una imagen es “img“. Este tag, a diferencia de la gran mayoría de los tags de html, no necesita un cierre. Va acompañado de diferentes atributos que te vamos a explicar a continuación.

El atributo “src” es imprescindible para poder colocar una imagen. Este atributo es el que indica dónde se encuentra alojada la imagen que queremos mostrar. Se escribe así: <img src=”x”>, siendo “x” la dirección o la url dónde se encuentra situada la foto.

La foto podemos alinearla en la página como queramos mediante “align“, utilizando los atributos “left” para alinearla a la izquierda, “right” para alinearla a la derecha, “top” para alinearla arriba, “bottom” para alinearla abajo y “middle” para alinearla al centro.

También podemos poner una descripción de la imagen dentro de la misma para que la gente puede leerla al mantener el ratón encima de ella. Esta descripción podemos escribirla mediante el atributo “alt” y lo escribiríamos de la siguiente manera: alt= “x”, siendo “x” la descripción que le gente leerá al pasar el ratón por encima.

Debemos aclarar que no con todos los navegadores podemos ver el “alt” de manera visual. Hay algunos que no lo representan.

Atributos opcionales pero muy recomendables, son el height y el width. El height marca la altura de la imagen, mientras que el width marca la anchura. Son recomendables porque así ayudaremos al navegador a representar la imagen.

Y por último, también queremos mostrarte que le puedes adjudicar un borde a la fotografía. El atributo ya te lo sabes: “border“. Después solo tendrás que definir cuál quieres que sea el grosor del borde.

Así las cosas, deberemos escribir este código…

<img src="https://educarfilando.files.wordpress.com/2017/03/be-creative-creatividad-sc3a9-creativo.jpg?w=450&h=450&crop=1" border="1" alt="Este es el ejemplo de un texto alternativo" width="400" height="300">

…para poder ver esta preciosa fotografía

---

 

 

La etiqueta img dispone de estos atributos, algunos obligatorios, otros opcionales y algunos que ya no se recomienda usar (deprecated):

ATRIBUTO	USO	OBSERVACIONES
src	Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL desde la que se va a obtener la imagen.	Obligatorio. Si no se incluye no se mostrará imagen alguna.
align	Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea. Los valores posibles son los ya conocidos left, right, middle, top, bottom.	Atributo obsoleto (deprecated). Sustituir por CSS.
alt	Entre comillas podremos escribir un texto que se mostrará si la imagen no llega a cargar, mientras se carga o, cuando visualizando ya la imagen, pasamos el ratón por encima.	Atributo requerido, se recomienda incluirlo aunque si no se hace la imagen se mostrará.
width	Este atributo es opcional pero podemos ponerlo para especificar al navegador que muestre la imagen con un tamaño específico. Significa “ancho de la imagen” que vamos a representar. Si no se escribe, se carga la imagen con el tamaño original.	Opcional. Indicar valor en pixeles. También se puede indicar con CSS.
height	Al igual que el atributo width, es opcional. Este atributo indica el alto de la imagen.	Opcional. Indicar valor en pixeles. También se puede indicar con CSS.
border	Con border especificamos el ancho del borde que rodea la imagen. Si se indica 0 equivale a “sin borde”.	Atributo obsoleto (deprecated). Sustituir por CSS.

 

 

Ejercicio

Abre cuatro páginas web distintas y captura la ruta de 4 imágenes que puedas encontrar en ellas (las imágenes que prefieras). A continuación crea un documento html donde incorpores un texto que indique el contenido de la imagen y a continuación se vea la imagen. Guarda el documento y comprueba que se visualiza correctamente.

Ejemplo:

 

Imagen que refleja una boda:

(… aquí la imagen)

Imagen que muestra un mercado:

(… aquí la imagen)

Imagen que muestra un atleta:

(… aquí la imagen)

Imagen que refleja un atardecer:

(… aquí la imagen)

 

Nota: la ruta de una imagen de una página web se puede capturar normalmente haciendo click con el botón derecho del mouse sobre la imagen y eligiendo la opción “Copiar la ruta de la imagen” ó “Ver información de la imagen” ó “Propiedades” ó “Copiar URL de la imagen” ó “Inspeccionar elemento”, dependiendo del navegador que estemos utilizando.

 

 

Tutorial de HTML (XIII)