Imágenes HTML
- Agregue imágenes a su sitio web
- Alterar la altura y el ancho de las imágenes
- Agregar imágenes de un subcarpelo
- Agregar imágenes de otro sitio web
- Usar imágenes como un enlace
Vamos a empezar.
1. Agregue imágenes a su sitio web
Las imágenes se pueden incluir en un sitio web utilizando la etiqueta. La etiqueta está vacía y consiste solo en atributos y no tiene etiqueta de cierre.
Sintaxis
La etiqueta tiene la sintaxis mencionada por debajo.
Los atributos de la etiqueta se explican a continuación.
Atributo SRC
Este atributo describe la ruta de la imagen.
Atributo alt
Proporciona un nombre alternativo de la imagen. Esta alternativa aparece cuando, por alguna razón, la imagen no se carga. El nombre alternativo debe describir la imagen.
Ejemplo
En el siguiente ejemplo, estamos agregando una imagen de las luces del norte en una página web utilizando la etiqueta. Simplemente hemos dado la ruta de la imagen al atributo SRC y un nombre alternativo a la imagen en caso de que la imagen no se cargue.
Aprender imágenes HTML
Producción
La imagen del norte de la luz se ha incrustado en la página web.
Ahora, en caso de que la imagen no se carga debido a algún error, así es como aparece el nombre alternativo en la página web en lugar de la imagen.
2. Alterar la altura y el ancho de las imágenes
Los atributos de altura y ancho se utilizan para alterar la altura y el ancho de las imágenes.
Ejemplo
Supongamos que desea cambiar la altura y el ancho de una imagen HTML.
Aprender imágenes HTML
Hemos establecido el ancho de la imagen en 300 y la altura a 400.
Producción
El ancho de la imagen y la altura se han ajustado.
Otra forma de ajustar el ancho y la altura de las imágenes HTML es utilizando el atributo de estilo.
Ejemplo
En el siguiente ejemplo, el atributo de estilo se está utilizando para establecer el ancho y la altura de la imagen.
Aprender imágenes HTML
Hemos establecido el ancho de la imagen en 300px y la altura a 150px.
Producción
El ancho de la imagen y la altura han sido alterados.
3. Agregar imágenes de un subcarpelo
Si sus imágenes se guardan en una carpeta diferente, debe agregar la ruta de esa carpeta en el atributo SRC de la etiqueta.
Ejemplo
En este ejemplo, la imagen "Bird.JPG "se coloca en una" Imágenes "de Sub-Folder, por lo que estamos dando la ruta de esa carpeta en el atributo SRC de la etiqueta.
Aprender imágenes HTML
La imagen está presente en un subcarpelo como se muestra a continuación.
Producción
La imagen ha sido integrada en la página web que estaba presente en un subcarpelo.
4. Agregando de otro sitio web
Para incrustar imágenes de otro sitio web, simplemente ha proporcionado la URL de la imagen en el atributo SRC de la etiqueta.
Ejemplo
En el siguiente ejemplo, se está incrustando una imagen de Google.COM Sitio web utilizando la URL.
Aprender imágenes HTML
Producción
Imagen de Google.El sitio web de COM ha sido incrustado.
5. Usar imágenes como un enlace
Las imágenes HTML se pueden usar como enlaces y para este propósito incluyen la etiqueta dentro de la etiqueta.
Ejemplo
En el siguiente ejemplo, la imagen se está utilizando como un enlace a otro sitio web.
Aprender imágenes HTML
Producción
Haga clic en la imagen y el sitio web se abrirá cuyo enlace se ha proporcionado en el atributo HREF de la etiqueta.
El sitio web se ha abierto después de hacer clic en la imagen.
Conclusión
Las imágenes se pueden integrar en los sitios web utilizando la etiqueta HTML. Es una etiqueta vacía con solo dos atributos que son; Src y Alt. El atributo SRC toma en la ruta de la imagen y alt sirve como un nombre alternativo en caso de que la imagen no se cargue, además, el ancho de la imagen y la altura se pueden ajustar de acuerdo con el deseo. Las imágenes se pueden integrar desde otros sitios web y se pueden usar como enlaces. Esta publicación analiza las imágenes HTML en detalle con la ayuda de ejemplos.