Colocando imágenes

Progreso de Lección:

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

Ya hemos aprendido como usar HTML para añadir y modificar texto en nuestra página.
En este video aprenderemos como añadir imágenes
Lo que tenemos aquí es la estructura básica de nuestro documento HTML, al cual ya estamos familiarizados
Y vamos a añadirle una imagen
Yo ya tengo la imagen que deseo añadir, la imagen se llama faro.jpeg
Pero tú puedes usar cualquier imagen que desees, el formato de la imagen puede ser jpeg, png, gif, svg o prácticamente cualquier formato de imagen
Una vez que tengas la imagen con la que deseas trabajar, debes asegurarte de colocarla en el mismo folder en el que se encuentra tu archivo index.html o el archivo HTML al que deseas asociar la imagen
Siempre puedes claro colocar la imagen en un folder diferente, pero para el propósito de este tutorial lo dejaremos en el mismo folder, para mantener las cosas simples
Así que vamos a colocar nuestra etiqueta de imagen dentro de la etiqueta body, para ello colocamos la etiqueta img
Esta etiqueta no necesita una etiqueta de cierre
Ahora añadiremos el atributo source, u origen en español, para ello colocamos src luego el símbolo de igual y entre comillas el nombre de nuestro archivo
Guardamos los cambios, vamos al navegador, y al refrescarlo, podrás ver que tenemos ahora la imagen en nuestra página HTML
Las imágenes pueden encontrarse con texto, no hay inconveniente si le añadimos algo de texto
Así que vamos a regresar al navegador y nos colocaremos arriba de la imagen, vamos a colocar un párrafo y dentro escribiremos el faro de la playa
Y luego nos colocaremos en la parte inferior de la imagen y añadiremos otro párrafo, esta vez escribimos se ve desde muy lejos
Guardamos los cambios y regresamos al navegador
Al actualizar el navegador podremos ver nuestros textos arriba y debajo de la imagen, tal y como los hemos añadido
Existe un atributo adicional para las imágenes que no debemos olvidar nunca, el atributo alt o alternate
Así que regresaremos al nuestro editor de texto, y después del atributo src colocaremos el atributo alt
Lo que debemos añadir en el atributo alt es una descripción de nuestra imagen básicamente
Este atributo es usado por ejemplo por los motores de búsqueda como google, de modo que cuando alguien busque un faro pueda encontrar nuestra imagen y por ende nuestro sitio web también
Este atributo es usado también por las personas que tienen problemas visuales, normalmente las personas con problemas en su vista usan lectores automáticos que les permiten leer lo que hay en su pantalla
De modo que al encontrar una imagen pueden leer la descripción dentro del atributo alt de la imagen
En este caso añadiremos en alt el texto: Un gran faro situado sobre rocas a la orilla del mar.
Así que ahora regresamos al navegador
Y podremos ver que al parecer nada ha cambiado  en nuestra imagen, eso es debido a que el atributo alt es invisible para nosotros
Es únicamente usado por los motores de búsqueda como google o por los lectores de pantalla que usan las personas con dificultades visuales
Sin embargo, si deseamos mostrar este texto que hemos añadido en el atributo alt en nuestra imagen
Podríamos hacer uso del atributo title y añadir el texto de alt
Así que vamos a ir al editor de texto, copiaremos todo lo que tenemos en el atributo alt y lo pegamos
Ahora simplemente cambiaremos el atributo alt por title, guardamos, regresamos al navegador y refrescamos
Y si colocamos nuestro cursor sobre la imagen podremos ver el texto alternativo de la imagen

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image