Translate

miércoles, 24 de febrero de 2021

CLASE 54 IMAGENES

Fin en mente: Realizar un programa en HTML, para insertar imágenes en un sitio web donde usaremos la etiqueta <img>.

Esta etiqueta debe ir acompañada del atributo src que es el que contiene el URL de la ubicación del archivo de la imagen.

El atributo alt se utiliza para dar una breve descripción de la imagen, la cual podremos observar en caso que el navegador del usuario, por alguna razón, no muestre la misma.

La etiqueta <img> no tiene cierre necesariamente
Sintaxis
<img src="file://y a dirección de la imagen" alt="texto descriptivo de la imagen">
Ejemplo:

<img src="/../imagenes/foto1.jpg" alt="Dos niñas de la mano">



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="html/imagenes/prueba.jpg" border="1" alt="Este es el ejemplo de un texto alternativo" width="400" height="300">


Recuerda que para saber la dirección de la siguiente imagen debes dar botón derecho e ir a propiedades; deberás seleccionar la ubicación copiarla y pegarla en (*); copia el nombre de la imagen y agrega .jpg

Otra opción es ir a la imagen en Internet y copiar la dirección de la imagen y regala en tu codigo de HTML


<html>
<head>
<title>   Imagenes </title>
<head>
<body bgcolor="pink">
<img src="file//(*) pega la dirección de la ubicación de tu imagen; pega el nombre de la imagen agrégale la extensión   .jpg " y continuación agrega algunos atributos que sean necesarios para tu programa>

</body>
</html>


No hay comentarios:

Publicar un comentario