Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Imagens | Construindo o Site do Blog
Essenciais de Desenvolvimento Web com IA

bookImagens

Objetivo

Vamos adicionar algumas imagens ao site para torná-lo mais atraente para os usuários. Como podemos fazer isso? Podemos encontrar imagens em fontes como Unsplash. Lá, podemos procurar pelo tema desejado, selecionar a imagem, copiar seu endereço e usá-la no site.

Passos

1. Procure pelo tema desejado

Vamos visitar o https://unsplash.com/. Sinta-se à vontade para digitar qualquer tema que lhe interesse aqui.

2. Selecione a imagem

Encontre a imagem que você mais gosta e clique nela.

3. Copiar endereço da imagem

Para copiar o endereço da imagem, clique com o botão direito na imagem e selecione "Copiar Endereço da Imagem" no menu contextual.

4. Uso da imagem

Podemos colar o endereço copiado no atributo src da imagem para adicionar a imagem selecionada ao nosso site. Também devemos especificar a largura da imagem para garantir que ela se ajuste bem ao site. Além disso, podemos fornecer conteúdo descritivo para o atributo alt ou usar o título do artigo para o alt da imagem.

Exemplo:

index.html

index.html

copy

Resultado

index.html

index.html

index.css

index.css

copy

Estado do Site

Tutorial em Vídeo

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 5

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 5

bookImagens

Deslize para mostrar o menu

Objetivo

Vamos adicionar algumas imagens ao site para torná-lo mais atraente para os usuários. Como podemos fazer isso? Podemos encontrar imagens em fontes como Unsplash. Lá, podemos procurar pelo tema desejado, selecionar a imagem, copiar seu endereço e usá-la no site.

Passos

1. Procure pelo tema desejado

Vamos visitar o https://unsplash.com/. Sinta-se à vontade para digitar qualquer tema que lhe interesse aqui.

2. Selecione a imagem

Encontre a imagem que você mais gosta e clique nela.

3. Copiar endereço da imagem

Para copiar o endereço da imagem, clique com o botão direito na imagem e selecione "Copiar Endereço da Imagem" no menu contextual.

4. Uso da imagem

Podemos colar o endereço copiado no atributo src da imagem para adicionar a imagem selecionada ao nosso site. Também devemos especificar a largura da imagem para garantir que ela se ajuste bem ao site. Além disso, podemos fornecer conteúdo descritivo para o atributo alt ou usar o título do artigo para o alt da imagem.

Exemplo:

index.html

index.html

copy

Resultado

index.html

index.html

index.css

index.css

copy

Estado do Site

Tutorial em Vídeo

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 5
some-alt