Saber lidar com imagens no HTML é essencial para blogueiros que ilustram suas postagens com as mesmas, pois muitas vezes não encontramos tudo preparado e como precisamos. Dominando um pouco da linguagem HTML, ficará bem mais fácil de você incorporar imagens em seu blog e não ter mais dores de cabeça com as mesmas.
Procure sempre ler estas informações sobre o HTML, e além de ler praticar os códigos propostos neste curso; pois assim você dominará bem mais cada etapa do curso.
Hoje em dia, a grande maioria dos navegadores exibem imagens dispostas em sites, porém as imagens possuem formatos específicos, pois não é qualquer tipo de arquivo de imagem que deve ser inserido em uma página para WEB.
Os formatos mais aceitos são os arquivos com a extensão: .GIF ou . JPEG (JPG).
O formato GIF (Grafic Interchange Format) suporta no máximo 256 cores e gera imagens com tamanhos menores. Este formato é muito utilizado para desenhos ou gráficos, gerando arquivos com a extensão .GIF.
Já o formato JPEG (Joint Photografic Engineering Group) suporte 16 milhões de cores e pode reduzir o tamanho de uma imagem em até 10 vezes. Este formato é muito utilizado para fotos, gerando arquivos com a extensão .JPEG ou JPG.
Ao utilizar gifs animados, tenha cuidado, pois estes arquivos podem ocupar bastante espaço em disco. O tamanho dos gifs animados dependerá da quantidade de cores e quadros utilizados para a animação.
Estes detalhes farão com que sua página carregue mais rápido no navegador do usuário, tornado assim a visitação ao site mais agradável.
7.1 INSERINDO IMAGENS NA PÁGINA
Comando:
<img src=”diretorio/arquivo”>
Onde:
- <img>: tag que indica que há uma imagem na página.
- Src =”diretorio/arquivo” : atributo que indica o diretório e a imagem que deverá ser exibida.
7.2 DIMENSIONANDO IMAGENS
Todas as imagens possuem um tamanho x e y, sendo x sua largura e y a sua altura. O tamanho das imagens exibidas no navegador pode ser redimensionada.
Para redimensionar a imagem utilizamos dois atributos: o WIDHT e o HEIGHT.
Comando:
<img src=”imagem/diretorio” width=”n” height=”n”>
Onde:
- Widht=”n”: indica a largura da imagem em pixels.
- Height=”n” : indica a altura da imagem em pixels.
NOTA:
- MUITO CUIDADO, ao redimensionar imagens, pois elas podem perder a sua definição, ficando com o aspecto distorcido.
7.3 ALINHANDO IMAGENS
As imagens inseridas em uma página podem ser posicionadas na tela da seguinte forma: TOP, MIDDLE, BOTTOM, LEFT e RIGHT. O atributo utilizado para alinhar a imagem é o ALIGN.
Comando:
<img src=”diretorio/arquivo” widht=”n” height=”n” ALIGN=”posição”>
7.3.1 ALINHAMENTO EM RELAÇÃO AO NAVEGADOR
Em relação ao navegador, utilizamos duas posições sendo estas:
- LEFT: Alinha a imagem a esqueda. (posição padrão dos navegadores)
- RIGHT : Alinha a imagem a direita.
<html>
<head>
<title>Alinhando Imagens</title>
</head>
<body>
<h1>Alinhamento de Imagens</h1>
<p>Alinhamento a Esquerda<br>
<img src="ft02.gif" width="150" height="150" align="left"><br>
<br><BR><BR><BR><BR><BR>
<p>Alinhamento a Direita
<img src="ft02.gif" width="150" height="150" align="right" >
</body>
</html>
7.3.2 ALINHAMENTO EM RELAÇÃO AO TEXTO
Em relação ao texto podemos utilizar os seguintes alinhamentos: TOP, BOTTOM e MIDDLE.
Onde:
- TOP: Alinha o texto com o topo da imagem;
- MIDDLE: Alinha o texto com o centro da imagem;
- BOTTOM: Alinha o texto com o rodapé da imagem.
O atriibuto ALT é utilizado para exibir uma mensagem quando a imagem está sendo carregada. Também tem a função de especificar ou indicar a imagem, quando o cursor do mouse é colocado sobre ela.
Comando:
<img src=”diretorio/imagem” width=”n” height=”n” align=”posicao” ALT=”mensagem”>
Onde:
- ALT = “mensagem” : indica a mensagem que será exibida quando o cursor do mouse for colocado sobre a imagem.
<html>
<head>
<title>Redimensionado Imagens</title>
</head>
<body>
<h1>Redimensionamento de Imagens </h1>
<img src="ft01.jpg" alt="A mensagem inserida aqui será apresentada quando o cursor
do mouse for posicionado sobre a imagem">
</body>
</html>
Caso queira entrar em contato por algum motivo, acesse a página de contato através deste link:Contato.
Envie dúvidas, reclamações, sugestões, elogios e assuntos mais complexos relacionados ao artigo e em 24 horas estarei lhe respondendo prontamente.
0 comentários:
Postar um comentário
Se você quer fazer algum comentário sobre este artigo, fique a vontade em expressar sua opinião; desde que:
1. Tenha a ver com o assunto;
2. Não haja ofensas pessoais;
3. Não contenha links e spams;
4. Só comente de boa vontade.