¿Ha creado un sitio web y desea insertar una imagen en su nueva página, para que sea más atractiva estéticamente, pero no sabe cómo hacerlo? No hay problema, ¡te ayudaremos!
Aquí te mostraremos cómo insertar una imagen en una página HTML.
Las imágenes mejoran la apariencia visual de las páginas web, haciéndolas más interesantes y coloridas. Para insertar una imagen en un archivo escrito en HTML, debe utilizar un código dedicado a insertar archivos de imagen.
Entonces, veamos cómo escribir este código e insertar la imagen en la página HTML.
Cómo insertar imágenes en páginas HTML
Para insertar una imagen en un archivo HTML, la sintaxis correcta es la siguiente:
<img src="https://ruta de la imagen" alt="texto alternativo">
Aquí hay un ejemplo:
<img src="https://ruta de la imagen" alt="texto alternativo">
Donde el url es el enlace de la imagen y en «alt«Escribirás el texto que quieres que aparezca cuando pases por encima de la imagen con el puntero del ratón. En pocas palabras, es la descripción de la imagen.
El atributo «alt»
El atributo alt, como se mencionó anteriormente, proporciona una descripción alternativa de la imagen, útil si un usuario no puede verla debido a una conexión lenta o si el usuario está utilizando un lector de pantalla o un navegador no gráfico.
Establecer el ancho y alto de la imagen
Los atributos de ancho (ancho) y altura (altura), se utilizan para especificar el ancho y el alto de la imagen.
Los valores de estos atributos se interpretan en pixeles por defecto.
<img src="https://ruta de la imagen" alt="texto alternativo" width="150" height="90">
También puede utilizar el atributo style para especificar el ancho y alto de la imagen. Esto evita que las hojas de estilo cambien accidentalmente el tamaño de la imagen.
<img src="https://ruta de la imagen" alt="texto alternativo" style="width: 150px; height: 90px;">
PD: Es una buena idea especificar los atributos de ancho y alto de una imagen. De lo contrario, cargar las imágenes podría causar distorsiones en el diseño de su sitio web.
En cuanto al atributo src, esto no necesita cerrarse, como es el caso, por ejemplo <center> que requiere cerrar con </center>
Lo mismo pasa con <br> que utilizará para romper una línea y regresar.
Bueno, te mostramos cómo insertar imágenes en páginas HTML.