HTML básico - IMAGENS   Professor Luciano          Disciplina: PROGRAMAÇÃO PARA INTERNET - Prof. Luciano                 ...
IMAGENS O que você tem a fazer é dizer ao navegador  que quer inserir uma imagem (img) e depois  informar onde a imagem e...
Tipos de Imagens   GIF (Graphics Interchange Format)   JPG / JPEG (Joint Photographic Experts    Group)   PNG (Portable...
Onde consigo minhasimagens?   Para criar suas próprias imagens você precisa de um    programa de edição de imagens. Um pr...
O que mais preciso sabersobre imagens? Primeiro, você pode inserir imagens que  estão localizadas em outros diretórios ou...
 Segundo, imagens podem ser links: Exemplo 4:<a href=“http://www.html.net”><img src=“cursoht.jpg“></a> Quando uma image...
Existem outros atributos queeu deva conhecer? O atributo alt é usado para fornecer  uma descrição textual alternativa da ...
   O atributo title pode ser usado para fornecer    uma curta descrição da imagem:   Exemplo 6:   <img src="cursoht.jpg...
Atributos width e height   Os atributos width e height podem ser usados    para definir respectivamente, a largura e a   ...
 Com width e height você pode alterar o tamanho da imagem: Exemplo 8:<img src="logo.gif" width="32" height="32">   Cont...
Exercícios para fixação   Copie 5 imagens da internet e crie as seguintes    páginas;   Fotos.html, terá todas as imagen...
Próximos SlideShares
Carregando em…5
×

Html básico 2 imagens

1.673 visualizações

Publicada em

Inserção de imagens com HTML.

Publicada em: Educação
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

×