Html básico 2 imagens

1.638 visualizações

Publicada em

Inserção de imagens com HTML.

Publicada em: Educação
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.638
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
53
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Html básico 2 imagens

  1. 1. HTML básico - IMAGENS Professor Luciano Disciplina: PROGRAMAÇÃO PARA INTERNET - Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 1
  2. 2. IMAGENS O que você tem a fazer é dizer ao navegador que quer inserir uma imagem (img) e depois informar onde a imagem esta localizada (src, abreviatura para "source" - local de armazenagem ). Notar que a tag imagem é do tipo comando isolado, isto é, uma só tag de abertuta e fechamento, semelhante a tag <br /> que não precisa de um texto inserido nela. Exemplo 1:<img src="paisagem1.jpg" /> Disciplina: PROGRAMAÇÃO PARA INTERNET - Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 2
  3. 3. Tipos de Imagens GIF (Graphics Interchange Format) JPG / JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) Em geral imagens GIF são melhores para gráficos e desenhos, e imagens JPEG são melhores para fotografia. Disciplina: PROGRAMAÇÃO PARA INTERNET - Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 3
  4. 4. Onde consigo minhasimagens? Para criar suas próprias imagens você precisa de um programa de edição de imagens. Um programa de edição de imagens é a ferramenta essencial para criação de websites com grande impacto visual. Exemplos de programas usados: Corel Draw, Adobe Illustrator, Adobe Photoshop, entre outros. Ou você pode fazer download de imagens existentes na web. Mas, por favor, se optar por fazer o download de imagens da Internet, cuidado para não violar direitos autorais de terceiros. Disciplina: PROGRAMAÇÃO PARA INTERNET - Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 4
  5. 5. O que mais preciso sabersobre imagens? Primeiro, você pode inserir imagens que estão localizadas em outros diretórios ou até mesmo em outros websites: Exemplo 2:<img src="images/cursoht.jpg"> Exemplo 3:<img src="http://www.html.net/cursoht.jpg"> Disciplina: PROGRAMAÇÃO PARA INTERNET - Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 5
  6. 6.  Segundo, imagens podem ser links: Exemplo 4:<a href=“http://www.html.net”><img src=“cursoht.jpg“></a> Quando uma imagem é usada como link, é colocada uma borda azul nela. Para retirar esta borda use o atributo border com valor zero. Assim:<img src=“cursoht.jpg“ border=“0”> Disciplina: PROGRAMAÇÃO PARA INTERNET - Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 6
  7. 7. Existem outros atributos queeu deva conhecer? O atributo alt é usado para fornecer uma descrição textual alternativa da imagem caso por alguma razão a imagem não seja renderizada para o usuário. Exemplo 5:<img src="cursoht.jpg" alt="logotipo do HTML.net"> Disciplina: PROGRAMAÇÃO PARA INTERNET - Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 7
  8. 8.  O atributo title pode ser usado para fornecer uma curta descrição da imagem: Exemplo 6: <img src="cursoht.jpg" title="Aprenda HTML no site HTML.net"> Coloque o ponteiro do mouse sobre a imagem, sem clicar e aparecerá uma caixa pop-up com o texto "Aprenda HTML no site HTML.net" . Disciplina: PROGRAMAÇÃO PARA INTERNET - Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 8
  9. 9. Atributos width e height Os atributos width e height podem ser usados para definir respectivamente, a largura e a altura da imagem. O valor adotado para medidas é o pixel. Pixel é a unidade de medida usada para medir a resolução da tela. Exemplo 7: <img src="cursoht.jpg" width="141" height="32"> Disciplina: PROGRAMAÇÃO PARA INTERNET - Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 9
  10. 10.  Com width e height você pode alterar o tamanho da imagem: Exemplo 8:<img src="logo.gif" width="32" height="32"> Contudo, o tempo de descarga da imagem será sempre aquele requerido como se ela tivesse suas dimensões reais, mesmo que você diminua seu tamanho com uso destes atributos. Assim, você não deve diminuir o tamanho das imagens com o uso dos atributos width e height. Se você precisa diminuir a imagem, diminua suas dimensões reais em um editor de imagem para tornar suas páginas mais leves e mais rápidas. Disciplina: PROGRAMAÇÃO PARA INTERNET - Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 10
  11. 11. Exercícios para fixação Copie 5 imagens da internet e crie as seguintes páginas; Fotos.html, terá todas as imagens no tamanho 50 x 50 pixels (use os atributos width e height); Cada foto miniatura terá um link para a foto maior respectiva (foto1.html, foto2.html). Não esqueça de criar na página da foto maior, um link para voltar para página fotos.html; Bom trabalho! Disciplina: PROGRAMAÇÃO PARA INTERNET - Prof. Luciano LUCIANO.CRECENTE@ETEC.SP.GOV.BR 11

×