Las imágenes son una parte importante de la web. Añadir imágenes a tu página le da un aspecto más profesional y atractivo. Además, las imágenes pueden ser útiles para explicar tus ideas de una manera más clara.
En este artículo, te enseñaré cómo insertar imágenes en tu página HTML.
Las imágenes se pueden insertar en una página HTML de tres formas:
1. Incluyendo la dirección URL de la imagen.
2. Incorporando la imagen en el documento HTML mediante el atributo «src».
3. Agregando la imagen en una tabla.
Cómo insertar una imagen en HTML paso a paso
Cómo insertar una imagen en HTML paso a paso
1. Busca la imagen que quieres insertar en el documento HTML.
2. Asegúrate de que la imagen esté en el mismo directorio que el documento HTML.
3. Incluye el código siguiente en el documento HTML para insertar la imagen.
4. Guarda el documento HTML.
Cómo centrar una imagen en HTML
Las imágenes en HTML se pueden centrar usando el atributo «align». El atributo puede tomar uno de los siguientes valores: «left», «right», «center» o «justify». «left» y «right» centran la imagen a la izquierda o la derecha de la ventana, respectivamente. «center» la centra en el medio de la ventana. «justify» la alinea a la izquierda, al medio o a la derecha, según el contexto.
Cómo poner imágenes en HTML y CSS: paso a paso
Las imágenes en HTML se pueden incluir usando la etiqueta . La etiqueta tiene dos atributos: src y alt . src es el atributo que especifica la URL de la imagen, y alt es el atributo que especifica el texto alternativo que se mostrará en caso de que la imagen no se pueda mostrar.
Por ejemplo:
El código anterior mostrará la imagen de Google en tu página web.
Las imágenes en CSS se pueden incluir usando la propiedad background-image . background-image especifica la URL de la imagen que se quiere usar como fondo.
Por ejemplo:
.logo {
background-image: url(«https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png»);
}
El código anterior mostrará la imagen de Google como fondo de la etiqueta .logo .
Acomodar imágenes en HTML
Las imágenes se pueden acomodar en el código HTML de dos formas:
1. Inline:
2. En una etiqueta de imagen:
La etiqueta de imagen tiene varias propiedades:
src: La URL de la imagen.
alt: Una descripción de la imagen.
width: La anchura de la imagen en píxeles.
height: La altura de la imagen en píxeles.
La imagen se inserta en la página HTML mediante el código . Este código tiene la siguiente sintaxis:
.
Las imágenes se insertan en HTML mediante el atributo src, que indica la dirección de la imagen. Por ejemplo: