INSERTANDO UNA IMAGEN EN MI PAGINA WEB
ACTIVIDAD DEL DIA DE HOY
Codigo de ejemplo de como insertar una imagen en tu pagina web.
1. Descargue el siguiente codigo o abra el bloc de notas, copia y pega el siguiente código, guardalo con el nombre que se indica y mira el resultado en el navegador.
2. Modifica tu pagina web de tal forma que esta imagen aparezca en tu pagina principal, luego busca una acorde a tu proyecto y colocala debajo siguiendote por este ejemplo.
CODIGO DE EJEMPLO: nombre de la pagina de ejemplo imagen.html
Link de descarga, haga clic aquí
<html>
<head>
<title>Mi Proyecto</title>
</head>
<body>
<center>
<h2><font color="blue">AQUI EL NOMBRE DE MI PROYECTO</font></h2>
<img src="https://edutechsiglo21.com/app/img/robotica.jpg" alt="Mi proyecto" title="Robotica" width="650" height ="450"/>
</center>
</body>
</html>
3.TRANSCRIBE EN TU CUADERNO:
LA ETIQUETA <img>:
La etiqueta <img> es la clave para insertar imágenes en tu página web. Esta etiqueta es autocerrante, es decir, se cierra con "/>" tal cual lo pudo observar en el codigo de ejemplo.
1, Atributos esenciales: La etiqueta <img> necesita dos atributos principales:
src (source): Este atributo define la ubicación de la imagen en tu sitio web. Puede ser una ruta local (si la imagen está en la misma carpeta que tu archivo HTML) o una URL remota (si la imagen se encuentra en otro servidor).
alt (alternative text): Este atributo es crucial para la accesibilidad. Define un texto alternativo que describe la imagen para usuarios con discapacidad visual, lectores de pantalla y motores de búsqueda.
2. Ubicación de las imágenes:
Carpeta de imágenes: Lo ideal es crear una carpeta específica para tus imágenes dentro de tu proyecto web. Esto organiza tu código y facilita la gestión de los archivos.
Ruta relativa: Si la imagen está en la misma carpeta que tu archivo HTML, puedes usar una ruta relativa como src="miproyecto.jpg".
Ruta absoluta: Si la imagen está en otra carpeta, puedes usar una ruta absoluta como src="imagenes/miproyecto.jpg" o una URL remota como src="https://www.example.com/images/miproyecto.jpg".
3. Atributos opcionales:
width y height: Estos atributos controlan el ancho y alto de la imagen en píxeles. Si no se especifican, la imagen se mostrará en su tamaño original.
border: Define un borde alrededor de la imagen, por ejemplo border="1px solid black".
title: Agrega un texto de título a la imagen que se muestra al pasar el ratón por encima.
4. Diferencias entre Alt y Title
alt (Texto alternativo)
Propósito: El texto alternativo se usa para describir la imagen para usuarios que no pueden verla. Esto incluye personas con discapacidades visuales, usuarios que navegan con lectores de pantalla, o aquellos que tienen una conexión a internet lenta y la imagen tarda en cargar.
Importancia: Es crucial para la accesibilidad. El texto alt permite a los usuarios comprender el contenido de la imagen y navegar por el sitio web de forma efectiva.
Ejemplo: <img src="imagen.jpg" alt="Un gato durmiendo en un sofá">
title (Título)
Propósito: El título se muestra como un tooltip o información adicional cuando el usuario coloca el cursor sobre la imagen.
Importancia: Proporciona información adicional sobre la imagen, pero no es esencial para la accesibilidad.
Ejemplo: <img src="imagen.jpg" alt="Un gato durmiendo en un sofá" title="Gato adorable durmiendo la siesta">
No hay comentarios:
Publicar un comentario