Minicursos - HTML

Imagens


Já que as principais tags para formatação de textos, tabelas e listas já foram vistas, chegou a hora de tornarmos as páginas HTML mais interessantes e bonitas, inserindo algumas imagens. É praticamente impossível encontrarmos uma página na Internet que não possua nenhuma imagem, então vamos aprender a fazer isso. É muito fácil!

A tag para inserção de imagens é a <img> e, assim como a tag <br>, ela não precisa de par de fechamento, pois o navegador saberá que o tamanho da imagem irá determinar onde a tag <img> se encerra. No entanto temos que dizer também qual é o arquivo que gostaríamos de exibir e isso deve ser informado dentro da tag <img>. Vamos a um exemplo onde fazemos a inserção do arquivo IBM.jpg.

<img src="IBM.jpg" alt="IBM">

O trecho src significa source, ou origem, que é onde o navegador irá procurar pela imagem.

Essa tag, no navegador, exibirá a página da seguinte forma:

IBM

Aí está nosso arquivo IBM.jpg sendo exibido numa página da Internet, mas valem algumas observações:

A primeira delas é a presença do texto alt=”IBM” dentro da tag. Trata-se da abreviação de Alternative. Isso significa que, se por qualquer razão o navegador não encontrar a imagem para ser inserida, ele vai exibir o texto contido entre os parênteses, que no caso é IBM. Outra razão para sempre se definir algo como texto alternativo é que os buscadores atuais se utilizam desse campo para montar seus bancos de dados. O Google é quem o faz com mais precisão. Se você criar uma página como essa do exemplo, disponibiliza-la em algum servidor e fizer uma busca por IBM em algum buscador, em algumas das páginas de resposta será exibida a sua página, graças a esse atributo da tag <img>.

Outro ponto a se observar é que é conveniente colocar dentro dessa tag as dimensões da imagem em questão, para que o navegador saiba o espaço que deve reservar para a exibição da imagem. No nosso exemplo a tag completa ficaria assim:

<img src="IBM.jpg" width="800" height="600" alt="IBM" >

Isso quer dizer que nossa imagem possui 800 pixels de comprimento por 600 de altura. Os navegadores mais atuais detectam automaticamente o tamanho da imagem, mas seria interessante se você se acostumasse a sempre inserir esses valores. Na verdade, se estiver utilizando um programa visual para criar suas páginas, ele fará a inserção desses dados automaticamente.

Lembro que você pode inserir imagens dos tipos JPG, GIF ou PNG. Alguns outros formatos também são suportados, mas não são recomendados. Utilize sempre um desses três e não terá problemas.

Como última observação vale dizer que as imagens, assim como as tabelas, também podem receber o complemento border, onde se especifica, em pixels, a largura da borda ao redor do arquivo. Por padrão esse valor é zero, por isso não conseguimos observar nenhuma borda na imagem da IBM adicionada acima. Vamos modificar aquela tag para:

<img src="IBM.jpg" width="800" height="600" alt="IBM" border="4">

A página ficou dessa forma:

IBM

Algumas versões do navegador Internet Explorer adotam uma borda azul como padrão em torno das imagens. É altamente recomendável que se atribua o valor zero para as bordas das imagens, pois elas podem comprometer a estética da sua página. Isso pode ser feito através do CSS, que veremos no próximo minicurso. Não se preocupe com isso agora.



Algumas notícias

Xiaomi vende 52,9 milhões de celulares no segundo trimestre de 2021 e faturamento dispara

A gigante chinesa Xiaomi registrou um aumento de quase 85% no seu faturamento no segundo trimestre de 2021 em comparação ao mesmo período do ano passado. A receita divulgada pela empresa foi de 13,5 bilhões de dólares (algo em torno de 70 bilhões de reais) nos meses de abril a junho deste ano...

Ler Notícia Completa

Galaxy S9 e Galaxy S9 Plus receberão atualização de segurança este mês

A Samsung começou a liberar esta semana, para proprietários dos modelos Galaxy S9 e Galaxy S9 Plus, uma nova atualização de segurança. Por enquanto somente alguns países da Europa receberam o pacote, que deve ser dis...

Ler Notícia Completa

Novas câmeras 'debaixo da tela' da Oppo surpreendem

Para muitos, colocar uma câmera embaixo da tela de um celular era uma tarefa impensável, por conta de diversos problemas técnicos. Os primeiros testes da Oppo que se propuseram a isso geravam imagens de qualidade bastante insatisfatória, já que a captação da luz era prejudicada pela tela. A prim...

Ler Notícia Completa
Ajude o Contém Bits com um cafezinho!

Se você gostou do artigo, se ele lhe foi útil de alguma maneira e você quiser ajudar o Contém Bits, saiba que é simples, fácil e rápido. Basta clicar na imagem do PayPal (ou no cafezinho) e seguir as instruções, em ambiente seguro e com o respaldo do Paypal. Eu agradeço muito! :)


Você gostará destes vídeos!