laboratório de informática imagens
DESCRIPTION
Bruno C. de Paula. Laboratório de Informática Imagens. 1º Semestre 2010 > PUCPR > BSI. Resumo da aula. Na aula hoje, vamos aprender como inserimos imagens em nossas páginas; - PowerPoint PPT PresentationTRANSCRIPT
Laboratório de InformáticaImagens
1º Semestre 2010 > PUCPR > BSI
Bruno C. de PaulaBruno 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)
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/
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;
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 <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.
7
Não usar a tag<img> para layout!
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.
9
.. /
10
.. / = pasta pai
11
Imagine a página “index.htm” dentro da pasta jamantaVamos colocar todas as imagens no MESMO arquivo
12
Mostrar imagem na mesma pasta
<img src="jamanta.png" alt="eu"/>
13
Mostrar imagem na “pasta pai”
<img src="../delcrano.png" alt="Meu pai"/>
14
Mostrar imagem na “pasta avô”
<img src="../../altrano.png" alt="Meu avô"/>
15
Mostrar imagem na “pasta filho”
<img src="jamantinha/jamantinha.png" alt="Meu filho"/>
16
Mostrar imagem na “pasta primo”
<img src="../../cicrano/gelcrano/gelcrano.png" alt="Meu primo"/>
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.
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
<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;
21
<img title="texto"/>
Tooltip exibido quando o mouse passa sobre a imagem;
22
<img id="nome"/>
Identificador da imagem;Permite que se modifique a imagem via CSS/JavaScript;
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;
24
Imagens de fundo
Usar propriedade background-image do CSS;
Veremos mais detalhes na aula de Imagens em CSS;
25
Exemplo de imagem de fundo
Ver exemplo no site de documentação 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; <img src="starsolid.gif" id="estrela"/> <script type="text/javascript"> var trocarImagem = function() { this.src='startransparent.gif'; } document.getElementById("estrela").onclick=trocarI
magem; </script>