A tag img em HTML5 - @Curso em Vídeo HTML5 e CSS3

Introdução ao Curso de HTML com CSS

Visão Geral da Seção: Nesta seção, o instrutor introduz o curso de HTML com CSS e fala sobre a importância de entender os formatos e tamanhos de imagens para a construção de sites profissionais.

A importância de entender os formatos e tamanhos de imagens

• O instrutor destaca a importância de compreender os direitos autorais, formatos e tamanhos adequados das imagens para a construção profissional de sites.

• É recomendado revisar as dicas anteriores sobre formatos e tamanhos de imagens nos vídeos anteriores do curso.

• A empresa patrocinadora Hostnet é mencionada como uma opção para obter ajuda profissional na construção do site, oferecendo serviços especializados em hospedagem, WordPress e automação de marketing.

Exercício prático - Adicionando uma imagem ao site

• O instrutor mostra uma imagem gerada anteriormente que foi otimizada para economizar espaço.

• É criado um novo exercício no Code Studio para adicionar uma imagem ao site.

• O arquivo index.html é criado no Code Studio.

• Uma imagem é procurada no Google Imagens, levando em consideração o formato png e transparência.

• As imagens selecionadas são salvas na pasta de trabalho.

Conclusão

O instrutor introduz o curso de HTML com CSS e destaca a importância de compreender os formatos e tamanhos adequados das imagens para a construção profissional de sites. Um exercício prático é proposto, no qual os alunos devem adicionar uma imagem ao site utilizando as técnicas aprendidas. A empresa patrocinadora Hostnet é mencionada como uma opção para obter ajuda profissional na construção do site.

Carregando a imagem do HTML

Visão geral da seção: Nesta seção, o palestrante explica como carregar uma imagem no HTML e a importância de fornecer um texto alternativo para acessibilidade.

Carregando a imagem

• Utilize a tag <img> para carregar a imagem no HTML.

• Defina o atributo src para especificar a origem do arquivo de imagem.

• Adicione um texto alternativo utilizando o atributo alt para descrever a imagem.

Redimensionando e ajustando o tamanho da imagem

• Utilize ferramentas de edição de imagens, como o "cropper", para redimensionar e ajustar o tamanho da imagem.

• Defina as dimensões desejadas, como largura e altura, para garantir que a imagem seja exibida corretamente.

Economizando espaço e tráfego de banda

• Ao otimizar as imagens, é possível reduzir seu tamanho em kilobytes (KB).

• Reduzir o tamanho das imagens ajuda a economizar espaço em disco e reduzir o tráfego de banda ao carregar as páginas.

Apoiando o canal do curso em vídeo

Visão geral da seção: Nesta seção, é explicado como apoiar o canal do curso em vídeo e quais benefícios são oferecidos aos apoiadores.

Apoio ao canal

• Acesse o site do curso em vídeo e clique na opção "Seja um apoiador" para ajudar financeiramente.

• O apoio dos espectadores ajuda a manter os cursos gratuitos e permite oferecer conteúdo exclusivo aos apoiadores.

Benefícios para os apoiadores

• Como recompensa, os apoiadores têm acesso a vídeos exclusivos, cursos adicionais e certificados.

• Os certificados serão disponibilizados em breve para os apoiadores do canal.

Redimensionando imagens para economizar espaço

Visão geral da seção: Nesta seção, é explicado como redimensionar imagens para economizar espaço e tráfego de banda.

Redimensionando as imagens

• Utilize ferramentas de edição de imagens para redimensionar as imagens conforme necessário.

• Ajuste a largura e altura das imagens para garantir que elas sejam exibidas corretamente na página.

Economizando espaço e tráfego de banda

• Ao reduzir o tamanho das imagens, é possível economizar espaço em disco e reduzir o tráfego de banda ao carregar as páginas.

• Carregar apenas as versões redimensionadas das imagens ajuda a otimizar o desempenho do site.

Carregando imagens no contexto alternativo

Visão geral da seção: Nesta seção, aprendemos como carregar imagens no contexto alternativo em HTML5. Também foi mencionado que se a imagem aparecer quebrada, pode ser um sinal de erro no nome do arquivo.

• Para carregar uma imagem no contexto alternativo, é necessário apagar o nome do arquivo e deixar apenas as aspas.

• Certifique-se de atualizar a página para ver a imagem carregada corretamente.

Criando uma pasta para imagens

Visão geral da seção: Nesta seção, aprendemos como criar uma nova pasta para armazenar imagens dentro do exercício 003.

• Crie uma nova pasta chamada "imagens" (em minúsculas) dentro da pasta do exercício.

• Mova as imagens relevantes para essa nova pasta.

Carregando imagens de subpastas

Visão geral da seção: Nesta seção, aprendemos como carregar imagens que estão em subpastas usando CSS.

• Ao referenciar uma imagem em uma subpasta, use o caminho relativo ao arquivo HTML.

• Por exemplo, para carregar a imagem "logoCSS.png" na subpasta "imagens", use "../imagens/logoCSS.png".

Corrigindo o caminho das imagens

Visão geral da seção: Nesta seção, aprendemos como corrigir o caminho das imagens quando elas não são exibidas corretamente.

• Se a imagem não estiver sendo exibida corretamente, verifique se o caminho está correto.

• Uma dica útil é apagar tudo antes do nome da pasta e adicionar "../" para voltar um nível acima.

Carregando imagens externas

Visão geral da seção: Nesta seção, aprendemos como carregar imagens externas de outros links.

• É possível carregar imagens externas usando o endereço completo da imagem.

• Por exemplo, ao usar a imagem "logoJavaScript.png" de outro site, copie o endereço completo da imagem e cole-o no código HTML.

Escolhendo tamanho e formato das imagens

Visão geral da seção: Nesta seção, aprendemos como escolher o tamanho e formato adequados para as imagens.

• Ao escolher uma imagem, leve em consideração seu tamanho e resolução.

• É possível redimensionar uma imagem para que ela caiba dentro do projeto.

• Para obter uma imagem menor, é possível procurar por ícones ou reduzir sua resolução.

Copiando endereço de uma imagem

Visão geral da seção: Nesta seção, aprendemos como copiar o endereço de uma imagem na internet.

• Em vez de salvar a imagem, clique com o botão direito na mesma e selecione "Copiar endereço da imagem".

• O endereço copiado pode ser usado para referenciar a imagem em seu código HTML.

Carregando imagens usando URLs completas

Visão geral da seção: Nesta seção, aprendemos como carregar imagens usando URLs completas.

• Ao usar uma imagem de outro servidor, é necessário fornecer o endereço completo do caminho para a imagem.

• Basta colar o endereço completo no código HTML para carregar a imagem corretamente.

Recapitulação e conclusão

Visão geral da seção: Nesta seção final, foi feita uma recapitulação dos principais pontos abordados sobre o carregamento de imagens.

• Aprendemos a escolher um bom formato e tamanho de imagem.

• Também aprendemos a redimensionar e diminuir a qualidade das imagens.

• Exploramos diferentes formas de carregar imagens, incluindo na mesma pasta, em subpastas e usando URLs completas.

Encerramento

Visão geral da seção: Nesta última seção, o instrutor conclui a aula e incentiva os alunos a praticarem as técnicas aprendidas.

• É enfatizado que é importante ter prática ao trabalhar com imagens.

• O próximo vídeo abordará o ícone de favoritos.