Laboratório de Informática Imagens 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula

Resumo da aula Na aula hoje, vamos aprender como inserimos imagens em nossas páginas; Além disso, perceberemos que existem diferentes tipos de imagem e cada tipo deve ser usado de uma maneira diferente.

3 Material referente ao assunto da aula 1) Esta apresentação; 2) br.html.net/tutorials/html/lesson9.asphttp:// br.html.net/tutorials/html/lesson9.asp 3) s.asp s.asp 4) images-in-html/ images-in-html/

4 Tags e Propriedades referenciadas na aula HTML: Tag img (documentação Sitepoint): Permite que uma imagem inline seja apresentada na tela;imgdocumentação Sitepoint Atributos alt, src, width, height, title.altsrcwidthheighttitle CSS: Propriedade background-image: coloca uma imagem como fundo de um elemento;background-image

5 Em que camada estão as imagens?

6 Imagens em uma página HTML Imagens de conteúdo: imagens referentes ao conteúdo do documento, fazem sentido em relação ao assunto da página; tag, e ; Imagens de fundo: fazem parte do layout; podem mudar; não tem utilidade ao assunto; propriedade CSS background-image; Favicons: icones de favoritos.

7 Não usar a tag para layout!

8 A tag Permite que uma imagem inline seja apresentada na tela; Atributos obrigatórios: src: caminho separado por / e..; alt: texto de representação alternativa mostrado caso a imagem não apareça.

9.. /

10.. / = pasta pai

11 Imagine a página index.htm dentro da pasta jamanta Vamos colocar todas as imagens no MESMO arquivo

12 Mostrar imagem na mesma pasta

13 Mostrar imagem na pasta pai

14 Mostrar imagem na pasta avô

15 Mostrar imagem na pasta filho

16 Mostrar imagem na pasta primo

17 Mostrar imagem na Web Ei, você está consumindo a minha banda! Não é uma técnica vista com bons olhos.

18 Formatos de imagem mais comuns Aceitos pela maioria dos browsers atuais: GIF, JPG, PNG; Não aceito, normalmente: BMP (aceito para favicon).

19 Formatos de imagem mais místicos Outros formatos de mídia (SÃO IMAGENS): XBM (preto e branco!), MNG, ICO. Outros formatos de mídia (NÃO SÃO SÓ IMAGENS): SWF (Flash), SVG (alternativa ao Flash), Silverlight (outra alternativa ao Flash), Java Applet.

20 Texto alternativo que é exibido caso a imagem não esteja disponível, ou até ela ser exibida; É importantíssimo sempre colocar esse atributo! Tooltip no IE, mas não deveria ser! Navegadores não-visuais ( e celulares ) sempre utilizam esse atributo;

21 Tooltip exibido quando o mouse passa sobre a imagem;

22 Identificador da imagem; Permite que se modifique a imagem via CSS/JavaScript;

23 X pode ser um valor em pixels ou em porcentagem; width => largura; height => altura; Se não forem especificados a imagem fica do tamanho original;

24 Imagens de fundo Usar propriedade background- image do CSS;background- image Veremos mais detalhes na aula de Imagens em CSS;

25 Exemplo de imagem de fundo Ver exemplo no site de documentação Mozilla; Mozilla.solidimage { background-color: #FFF; background-image: url("images/starsolid.gif"); }

26 Um JavaScript por dia... Trocar a imagem de conteúdo quando clicar nela; var trocarImagem = function() { this.src='startransparent.gif'; } document.getElementById("estrela").onclick=trocarImagem;