Laboratório de Informática Imagens
-
Upload
yardley-maxwell -
Category
Documents
-
view
26 -
download
0
description
Transcript of Laboratório de Informática Imagens
![Page 1: Laboratório de Informática Imagens](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/1.jpg)
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](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/2.jpg)
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](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/3.jpg)
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](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/4.jpg)
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](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/5.jpg)
5
Em que camada estão as imagens?
![Page 6: Laboratório de Informática Imagens](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/6.jpg)
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](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/7.jpg)
7
Não usar a tag<img> para layout!
![Page 8: Laboratório de Informática Imagens](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/8.jpg)
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](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/9.jpg)
9
.. /
![Page 10: Laboratório de Informática Imagens](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/10.jpg)
10
.. / = pasta pai
![Page 11: Laboratório de Informática Imagens](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/11.jpg)
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](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/12.jpg)
12
Mostrar imagem na mesma pasta
<img src="jamanta.png" alt="eu"/>
![Page 13: Laboratório de Informática Imagens](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/13.jpg)
13
Mostrar imagem na “pasta pai”
<img src="../delcrano.png" alt="Meu pai"/>
![Page 14: Laboratório de Informática Imagens](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/14.jpg)
14
Mostrar imagem na “pasta avô”
<img src="../../altrano.png" alt="Meu avô"/>
![Page 15: Laboratório de Informática Imagens](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/15.jpg)
15
Mostrar imagem na “pasta filho”
<img src="jamantinha/jamantinha.png" alt="Meu filho"/>
![Page 16: Laboratório de Informática Imagens](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/16.jpg)
16
Mostrar imagem na “pasta primo”
<img src="../../cicrano/gelcrano/gelcrano.png" alt="Meu primo"/>
![Page 17: Laboratório de Informática Imagens](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/17.jpg)
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](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/18.jpg)
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](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/19.jpg)
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](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/20.jpg)
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](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/21.jpg)
21
<img title="texto"/>
Tooltip exibido quando o mouse passa sobre a imagem;
![Page 22: Laboratório de Informática Imagens](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/22.jpg)
22
<img id="nome"/>
Identificador da imagem;Permite que se modifique a imagem via CSS/JavaScript;
![Page 23: Laboratório de Informática Imagens](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/23.jpg)
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](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/24.jpg)
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](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/25.jpg)
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](https://reader036.fdocumentos.com/reader036/viewer/2022062721/56813679550346895d9e08eb/html5/thumbnails/26.jpg)
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>