Las imágenes son una parte muy importante de una página web, ya que mejora la apariencia de una página web y aumenta la interacción con el cliente. La USP de varios sitios web es cómo organizan diferentes imágenes en sus páginas web y le agregan sabores. En esto En el artículo Imágenes, entenderemos cómo insertar imágenes en una página web usando HTML en el siguiente orden:
Cómo agregar una imagen en HTML
Para incrustar una imagen en una página web, HTML le ofrece etiqueta. Otro punto importante para recordar es,
no tiene etiqueta de cierre. scr El atributo se utiliza para especificar la ruta de la imagen, que puede ser una URL o una ruta de imagen del sistema / servidor. Primero comencemos con la sintaxis básica de incrustar una imagen en una página web usando HTML.
Sintaxis
img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>Código de muestra
Imagen HTML incrustación de imágenes en una página web
Al igual que con otras etiquetas, hay varios atributos asociados con etiqueta. Veamos cada uno de ellos uno por uno, comprendamos su necesidad y cómo usarlos.
Etiquetas de imágenes HTML
- atributo alt
El atributo alt es el texto alternativo de una imagen. La razón por la que se introdujo el atributo alt es que si por alguna razón la imagen no se pudo cargar, entonces debería aparecer un texto alternativo dando una idea sobre la imagen. Las razones por las que la imagen no se carga pueden ser una conexión a Internet lenta o la imagen no reside en la fuente proporcionada, etc.
Si la imagen reside dentro de la misma carpeta donde está el archivo HTML, puede especificar el nombre del archivo directamente. De lo contrario, debe proporcionar la ruta absoluta del archivo de imagen.
El valor del atributo alt debe describir la imagen.
Ejemplo
Imagen HTML incrustación de imágenes en una página web
que es actionlistener en java
- Ancho y alto de una imagen
El atributo de estilo se utiliza para establecer la altura y el ancho de una imagen. En el atributo de estilo, especifica el estilo CSS.
Imagen HTML incrustación de imágenes en una página web
Algunos de los puntos importantes al incrustar una imagen en una página web usando HTML son:
java como convertir double a int
- Los atributos de ancho y alto se definen en píxeles.
- También puede definir el ancho y el alto de una imagen en porcentaje. Considerará el porcentaje según toda la página web.
- Si solo especifica uno de ellos, ajusta el otro en consecuencia.
- Incrustar imágenes mediante URL
HTML también le brinda la flexibilidad de elegir la imagen de otro servidor con solo especificar la URL. Puede usar un servidor separado para alojar las imágenes y luego incrustar esas imágenes usando URL.
Imagen HTML incrustación de imágenes en una página web
- Imagen como enlace
También puede usar la imagen como un enlace donde el usuario puede hacer clic en la imagen y acceder a una nueva página web. Para hacerlo, solo tienes que poner el día en etiqueta.
Imagen HTML incrustación de imágenes en una página web
- Imagen flotante
También puede ajustar la alineación de la imagen utilizando la propiedad flotante de CSS. Toda la propiedad CSS debe especificarse en el atributo de estilo.
Imagen HTML
- Mapas de imágenes
Esta es una de las características importantes que ofrece HTML. La etiqueta ayuda a definir un mapa de imagen. Debes preguntarte qué es un mapa de imágenes. Un mapa de imagen es una imagen con áreas en las que se puede hacer clic
Imagen HTML
- Imagen de fondo
También puede agregar una imagen de fondo en una página web. Solo tiene que usar la propiedad CSS, es decir, la imagen de fondo en la etiqueta de estilo y agregarla al elemento HTML.
Imagen HTMLImagen de fondo
Elemento BODY
Con esto llegamos al final de este Blog de Imágenes HTML.Ahora, después de ejecutar los fragmentos anteriores, habría entendido cómo insertar una imagen en HTML. Espero que este blog sea informativo y de valor agregado para ti.
Mira nuestro que viene con capacitación en vivo dirigida por un instructor y experiencia en proyectos de la vida real. Esta capacitación lo convierte en un experto en habilidades para trabajar con tecnologías web de back-end y front-end. Incluye capacitación en desarrollo web, jQuery, Angular, NodeJS, ExpressJS y MongoDB.
Tienes una pregunta para nosotros? Por favor, menciónelo en la sección de comentarios del blog “Imágenes HTML” y nos comunicaremos con usted.