En HTML, las imágenes hacen que los sitios web sean más atractivos y alcanzan la intención de las personas. Permite a los desarrolladores personalizar sus páginas web con diferentes imágenes. Además, pueden agregarlos directamente de Internet copiando la URL de la imagen deseada y luego especificándola como el valor del "SRC"Atributo dentro de la etiqueta de imagen. Además, los desarrolladores pueden agregar la imagen con la ayuda de la propiedad CSS conocida como "imagen de fondo".

Esta publicación explicará brevemente el método para agregar la imagen de una URL.

Cómo agregar una imagen de una URL en HTML/CSS?

En HTML/CSS, hay dos métodos disponibles para agregar una imagen utilizando la URL, que se enumera a continuación:

• Método 1: Agregar imagen usando un elemento en HTML
• Método 2: Agregue la imagen usando las propiedades CSS en HTML

Método 1: Agregar imagen usando el elemento

El ""El elemento es un elemento vacío único que no tiene contenido infantil ni etiqueta final. El "SRC" y "alternativo"Son dos atributos clave que se utilizan dentro de la etiqueta" ".

Veamos las instrucciones dadas a continuación para agregar una imagen usando el elemento!

Paso 1: Haz un contenedor Div

Primero, cree un contenedor Div utilizando el "" etiqueta. Luego, inserte el "claseAtributo y asignar un nombre a la clase según el deseo.

Paso 2: Insertar encabezado

A continuación, use la etiqueta de encabezado requerida de "

" a "

" etiqueta. Por ejemplo, utilizaremos el

etiqueta y agregue el texto en particular como un encabezado dentro de las etiquetas de apertura y cierre.

Paso 3: Agregue una imagen con URL

Después de eso, agregue un ""Etiqueta e inserte los atributos que se encuentran a continuación dentro de la etiqueta de la imagen:

• "SRCEl atributo se utiliza para agregar el archivo de medios. Para ese propósito, inicie el navegador web deseado y copie la URL de imagen deseada.
• Luego, especifique la URL como un valor del "SRC" atributo.
• Próximo, "alternativo"Se utiliza para agregar un nombre para la imagen cuando no se muestra por alguna razón.
• "altura"La propiedad especifica la altura del elemento de acuerdo con el valor dado.
• "ancho"Utilizado para configurar el ancho del elemento:

Agregar imagen con URL

Según la salida dada a continuación, la imagen especificada se ha agregado con éxito:

Método 2: Agregue la imagen usando las propiedades CSS en HTML

Los desarrolladores también pueden agregar la imagen de una URL usando el CSS "imagen de fondo"CSS. Para este propósito, siga los pasos a continuación.

Paso 1: Insertar encabezado

Primero, inserte un texto de encabezado con la ayuda del

Etiqueta de apertura y cierre.

Paso 2: Crear contenedor Div

A continuación, cree un contenedor DIV utilizando la etiqueta y agregue un atributo de clase con su nombre:

Agregar imagen con URL

Paso 3: Contenedor de acceso

Ahora, acceda a la clase a través del selector de puntos "."Y el nombre de clase que se creó anteriormente.

Paso 4: Agregue la imagen con la propiedad CSS de "imagen de fondo"

Después de eso, aplique las propiedades CSS que sean a continuación para agregar la imagen de una URL dentro de la clase:

.img-continer
Altura: 400px;
Ancho: 250px;
tamaño de fondo: contener;
Background-Image: URL (https: // imágenes.pexels.com/Photos/2260800/Pexels-Photo-2260800.jpeg?auto = compress & cs = tinysrgb & w = 1260 & h = 750 & dpr = 1)

En el código proporcionado anteriormente:

• "alturaLa propiedad se utiliza para establecer la altura del elemento.
• "ancho"Se usa para especificar el tamaño de ancho del elemento.
• "tamaño de fondo"Se utiliza para establecer el tamaño del elemento de fondo.
• "imagen de fondo"La propiedad agrega una imagen en la parte trasera del elemento. Para este propósito correspondiente, el "url ()"La función se utiliza para agregar la imagen y pegar la URL de la imagen en la función"()".

Producción

Has aprendido sobre los diferentes métodos para agregar imágenes de una URL.

Conclusión

Para agregar una imagen de una URL, los desarrolladores pueden utilizar el "" etiqueta. Luego, inserte el "SRC"Atributo y asigne la URL como el valor" SRC ". Además, el usuario puede agregar una imagen de la URL utilizando el CSS "imagen de fondo" propiedad. Este artículo ha declarado los métodos para agregar la imagen de la URL en HTML/CSS.