Adicionando uma imagem de um URL – HTML

Adicionando Uma Imagem De Um Url Html



Em 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 diferentes imagens. Além disso, eles podem adicioná-los diretamente da Internet, copiando o URL da imagem desejada e especificando-o como o valor do “ origem ” 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 ”.

Esta postagem explicará brevemente o método para adicionar a imagem de um URL.

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

Em HTML/CSS, dois métodos estão disponíveis para adicionar uma imagem usando a URL, listada abaixo:







Método 1: adicionar imagem usando o elemento

O ' ” é um único elemento void que não tem conteúdo filho e tag final. O ' origem ' e ' tudo ” são dois atributos-chave que são utilizados dentro da tag “ ”.



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



Etapa 1: criar um contêiner div

Primeiro, crie um contêiner div utilizando o “

' marcação. Em seguida, insira o “ classe ” e atribua um nome à classe de acordo com o desejo.





Passo 2: Inserir Título

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

' para '
' marcação. Por exemplo, utilizaremos a tag

e adicionaremos o texto específico como um cabeçalho dentro das tags de abertura e fechamento.


Etapa 3: adicionar uma imagem usando URL

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



  • origem ” é usado para adicionar o arquivo de mídia. Para isso, inicie o navegador da Web desejado e copie o URL da imagem desejada.
  • Em seguida, especifique o URL como um valor do “ origem ” atributo.
  • Próximo, ' tudo ” é utilizado para adicionar um nome à imagem quando ela não é exibida por algum motivo.
  • altura ” especifica a altura do elemento de acordo com o valor fornecido.
  • largura ” utilizado para definir a largura do elemento:
< div classe = 'img-conatiner' >

< h2 > Adicionar imagem com URL < / h2 >

< img origem = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' tudo = 'Imagem!' altura = '400 px' largura = '300 px' / >

< / div >

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



Método 2: adicionar 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.

Passo 1: Inserir Título

Primeiro, insira um texto de cabeçalho com a ajuda da tag de abertura e fechamento

.

Etapa 2: criar contêiner div

Em seguida, crie um contêiner div utilizando a tag

e adicione um atributo de classe com seu nome:

> Adicionar imagem com URL >

= 'img-container' > >

Etapa 3: acessar o contêiner

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

Etapa 4: Adicionar imagem usando a propriedade CSS “background-image”

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

.img-container {

altura : 400 px ;

largura : 250px ;

tamanho de fundo : conter ;

Imagem de fundo : url ( https : //imagens .pexels .com/photos/ 2260800 /pexels-foto- 2260800 .jpeg? auto = compactar&cs = tinysrgb&w = 1260 &h = 750 &dpr = 1 )

}

No código fornecido acima:

  • altura ” é 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 ” adiciona uma imagem na parte de trás do elemento. Para o efeito correspondente, o “ URL() ” é 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. Em seguida, insira o “ origem ” e atribua a URL como o valor “src”. Além disso, o usuário pode adicionar uma imagem da URL usando o CSS “ imagem de fundo ' propriedade. Este artigo indicou os métodos para adicionar a imagem da URL em HTML/CSS.