No HTML, as imagens tornam os sites mais atraentes e atingem a intenção das pessoas. Ele permite que os desenvolvedores personalizem suas páginas da web com imagens diferentes. Além disso, eles podem adicioná -los diretamente da Internet copiando o URL da imagem desejada e depois especificando -a como o valor do “src”Atributo dentro da tag de imagem. Além disso, os desenvolvedores podem adicionar a imagem com a ajuda da propriedade CSS conhecida como “imagem de fundo”.

Este post explicará brevemente o método para adicionar a imagem de um URL.

Como adicionar uma imagem de um URL em HTML/CSS?

No HTML/CSS, dois métodos estão disponíveis para adicionar uma imagem usando o URL, que está listado abaixo:

• Método 1: Adicione a imagem usando um elemento em HTML
• Método 2: Adicione a imagem usando propriedades CSS em HTML

Método 1: Adicione a imagem usando elemento

O "”O elemento é um único elemento vazio que não tem conteúdo infantil e tag final. O "src" e "alt“São dois atributos principais que são utilizados dentro da tag“ ”.

Vejamos as instruções abaixo para adicionar uma imagem usando o elemento!

Etapa 1: faça um contêiner div

Primeiro, crie um recipiente de div, utilizando o “" marcação. Então, insira o “aula”Atribua e atribua um nome à classe de acordo com o desejo.

Etapa 2: Insira o cabeçalho

Em seguida, use a tag de cabeçalho necessária de “

" para "

" marcação. Por exemplo, utilizaremos o

Tag e adicione o texto específico como um título dentro das tags de abertura e fechamento.

Etapa 3: Adicione uma imagem usando URL

Depois disso, adicione um “”Tag e insira os atributos listados abaixo dentro da tag de imagem:

• ““src”O atributo é usado para adicionar o arquivo de mídia. Para esse fim, inicie o navegador da web desejado e copie o URL da imagem desejado.
• Então, especifique o URL como um valor do “src”Atributo.
• Próximo, "alt”É utilizado para adicionar um nome para a imagem quando não é mostrado por algum motivo.
• ““altura”Propriedade especifica a altura do elemento de acordo com o valor fornecido.
• ““largura”Utilizado para definir a largura do elemento:

Adicionar imagem com URL

De acordo com a saída abaixo, a imagem especificada foi adicionada com sucesso:

Método 2: Adicione a imagem usando propriedades CSS em HTML

Os desenvolvedores também podem adicionar a imagem de um URL usando o CSS “imagem de fundo"CSS. Para esse fim, siga as etapas abaixo do ritmo.

Etapa 1: Insira o cabeçalho

Primeiro, insira um texto de título com a ajuda do

Tag de abertura e fechamento.

Etapa 2: Crie Div Container

Em seguida, crie um contêiner de div, utilizando a tag e adicione um atributo de classe com seu nome:

Adicionar imagem com URL

Etapa 3: Contêiner de acesso

Agora, acesse a classe através do seletor de pontos “.”E o nome da classe que foi criado anteriormente.

Etapa 4: Adicione a imagem usando a propriedade CSS “Background-Image”

Depois disso, aplique as propriedades CSS abaixo listadas para adicionar a imagem de um URL dentro da classe:

.IMG-container
Altura: 400px;
Largura: 250px;
tamanho de fundo: conter;
Imagem de fundo: URL (https: // imagens.pexels.com/fotos/2260800/pexels-photo-2260800.JPEG?AUTO = COMPRESSÃO & CS = TINYSRGB & W = 1260 & H = 750 & DPR = 1)

No código fornecido acima:

• ““altura”A propriedade é usada para definir a altura do elemento.
• ““largura”É usado para especificar o tamanho da largura do elemento.
• ““tamanho de fundo”É utilizado para definir o tamanho do elemento de fundo.
• ““imagem de fundo”Propriedade adiciona uma imagem na parte traseira do elemento. Para esse objetivo correspondente, o “url ()”A função é utilizada para adicionar a imagem e colar o URL da imagem na função“()”.

Saída

Você aprendeu sobre os diferentes métodos para adicionar imagens de um URL.

Conclusão

Para adicionar uma imagem de um URL, os desenvolvedores podem utilizar o “" marcação. Então, insira o “src”Atribua e atribua o URL como o valor“ SRC ”. Além disso, o usuário pode adicionar uma imagem do URL usando o CSS “imagem de fundo" propriedade. Este artigo declarou os métodos para adicionar a imagem do URL em HTML/CSS.