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

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

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

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

Laboratório de InformáticaImagens

1º Semestre 2010 > PUCPR > BSI

Bruno C. de PaulaBruno C. de Paula

Page 2: 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.

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

3

Material referente ao assunto da aula

1) Esta apresentação;2)

http://www.pt-br.html.net/tutorials/html/lesson9.asp

3) http://www.w3schools.com/html/html_images.asp

4) http://dev.opera.com/articles/view/17-images-in-html/

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

4

Tags e Propriedades referenciadas na aulaHTML:

Tag img (documentação Sitepoint): Permite que uma imagem inline seja apresentada na tela;

Atributos alt, src, width, height, title.CSS:

Propriedade background-image: coloca uma imagem como fundo de um elemento;

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

5

Em que camada estão as imagens?

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

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 <img>, <map> e <area>; Imagens de fundo:

fazem parte do layout;podem mudar;não tem utilidade ao assunto;propriedade CSS background-image;

Favicons: icones de favoritos.

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

7

Não usar a tag<img> para layout!

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

8

A tag <img>

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.

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

9

.. /

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

10

.. / = pasta pai

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

11

Imagine a página “index.htm” dentro da pasta jamantaVamos colocar todas as imagens no MESMO arquivo

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

12

Mostrar imagem na mesma pasta

<img src="jamanta.png" alt="eu"/>

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

13

Mostrar imagem na “pasta pai”

<img src="../delcrano.png" alt="Meu pai"/>

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

14

Mostrar imagem na “pasta avô”

<img src="../../altrano.png" alt="Meu avô"/>

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

15

Mostrar imagem na “pasta filho”

<img src="jamantinha/jamantinha.png" alt="Meu filho"/>

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

16

Mostrar imagem na “pasta primo”

<img src="../../cicrano/gelcrano/gelcrano.png" alt="Meu primo"/>

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

17

Mostrar imagem na Web

<img src="http://tinyurl.com/fotoeu" alt="Minha Foto"/>

Ei, você está consumindo a minha banda!

Não é uma técnica vista com bons olhos.

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

18

Formatos de imagem mais comuns

Aceitos pela maioria dos browsers atuais:GIF, JPG, PNG;

Não aceito, normalmente:BMP (aceito para favicon).

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

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.

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

20

<img alt="texto alternativo"/>

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;

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

21

<img title="texto"/>

Tooltip exibido quando o mouse passa sobre a imagem;

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

22

<img id="nome"/>

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

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

23

<img width="X" height="Y"/>

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;

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

24

Imagens de fundo

Usar propriedade background-image do CSS;

Veremos mais detalhes na aula de Imagens em CSS;

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

25

Exemplo de imagem de fundo

Ver exemplo no site de documentação Mozilla;

.solidimage { background-color: #FFF; background-image:

url("images/starsolid.gif"); }

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

26

Um JavaScript por dia...

Trocar a imagem de conteúdo quando clicar nela; <img src="starsolid.gif" id="estrela"/> <script type="text/javascript"> var trocarImagem = function() { this.src='startransparent.gif'; } document.getElementById("estrela").onclick=trocarI

magem; </script>