r2 - 03 Apr 2007 - 11:29:29 - EmilioSantiagoCarmoVocê está aqui: TWiki >

Web GrupoWeb > Licoes > SlideTrabalhandoComImagens

Set TITLE = Trabalhando Com Imagens

Start presentation

1- Trabalhando Com Imagens

Autor: Emílio Santiago do Carmo
Email: emilio2hd@gmail.com
Licença: Creative Commons - BY-SA - disponível em http://creativecommons.org/licenses/by-sa/2.5/br/deed.pt

2- Introdução

Objetivos:

Inserção de imagens em html.

Obs: A utilização de imagens deve ser feita com cautela, pois podem deixar a navegação muito lenta.

3- Gráficos da Web

Os browsers suportam apenas alguns tipos de imagens, sendo os mais comuns:

gif.
jpeg.
png.

4- Inserindo imagens

A Inserção de uma imagem na página é feita da seguinte forma:

<img src="nome da imagem">

Código:

<HTML>
        <HEAD>
                <TITLE>Trabalhando com imagens!!!</TITLE>
        </HEAD>
        <BODY bgcolor="#FFFFCC">
        <img src="1sunflower4.jpg">
</BODY>
</HTML>

Baixe o código-fonte acima neste link: http://wiki.sintectus.com/pub/GrupoWeb/SlideTrabalhandoComImagens/imagem1.htm

5- Visualizando o Resultado

6- Inserindo imagens de fundo

A inserção de uma imagem de fundo na página, inclui-se o atributo background na tag <body>.

Código:

<HTML>
        <HEAD>
                <TITLE>Trabalhando com imagens!!!</TITLE>
        </HEAD>
        <BODY bgcolor="#FFFFCC" background="1tulip6.jpg">
        <img src="1sunflower4.jpg">
</BODY>
</HTML>

Baixe o código-fonte acima neste link: http://wiki.sintectus.com/pub/GrupoWeb/SlideTrabalhandoComImagens/imagem2.htm

7- Visualizando o Resultado

8- Centralizando a imagem

Centralização de imagem, usa-se a tag <img> das tags <center></center>.

<HTML>
        <HEAD>
                <TITLE>Trabalhando com imagens!!!</TITLE>
        </HEAD>
        <BODY bgcolor="#FFFFCC" background="img_back.gif">
        <center><img src="1sunflower4.jpg"></center>
</BODY>
</HTML>

Baixe o código-fonte acima neste link: http://wiki.sintectus.com/pub/GrupoWeb/SlideTrabalhandoComImagens/imagem3.htm

9- Visualizando o Resultado

10- Exibindo textos alternativos

Um texto alternativo aparece quando deixamos o mouse sobre a figura por um certo tempo.

O atributo " alt " é incluso na declaração da tag <img.>.

Código:

<HTML>
        <HEAD>
                <TITLE>Trabalhando com imagens!!!</TITLE>
        </HEAD>
        <BODY bgcolor="#FFFFCC" background="img_back.gif">
        <center>
                <img src="1sunflower4.jpg" alt="Texto informativo">
        </center>
        <br>
        <BODY bgcolor="#FFFFCC" background="img_back.gif">
        <center>
                <img src="imagem-inexistente.jpg" alt="O link da imagem está errado e, por isso, você está vendo este texto!">
        </center>
</BODY>
</HTML>

Baixe o código-fonte acima neste link: http://wiki.sintectus.com/pub/GrupoWeb/SlideTrabalhandoComImagens/imagem4.htm

11- Visualizando o Resultado

12- Ajustando o tamanho da imagem

Ajustar o tamanho de uma imagem inserimos na declaração da tag img os atributos:

width - largura.
height - altura.

Código:

<HTML>
        <HEAD>
                <TITLE>Trabalhando com imagens!!!</TITLE>
        </HEAD>
        <BODY bgcolor="#FFFFCC">
        <center>
                <img src="aurora.jpg" alt="Imagem reduzida"
                width="115" height="100"><br><br>
                <img src="aurora.jpg" alt="Imagem normal">
        </center>
</BODY>
</HTML>

Baixe o código-fonte acima neste link: http://wiki.sintectus.com/pub/GrupoWeb/SlideTrabalhandoComImagens/imagem5.htm

13- Visualizando o Resultado

14- Formatando imagens com textos

Para alinhar textos em relação às nossas imagens, usamos o atributo align.

Código:

<HTML>
        <HEAD>
                <TITLE>Trabalhando com imagens!!!</TITLE>
        </HEAD>
        <BODY bgcolor="#FFFFCC" background="img_back.gif">
        <img src="1sunflower4.jpg" width="200" height="150"
        alt="Sistemas Abertos"><br><br><br><br>
        <img src="1sunflower4.jpg" width="200" height="150"
        align="right">
        &nbsp;Imagem à direita do texto<br><br><br><br><br><br><br><br><br><br>
        <img src="1sunflower4.jpg" border="1">
        &nbsp;Imagem com borda<br><br>
        <img src="1sunflower4.jpg" width="200" height="150"
        align="middle">
        &nbsp;Texto alinhado ao meio<br><br>
</BODY>
</HTML>

Baixe o código-fonte acima neste link: http://wiki.sintectus.com/pub/GrupoWeb/SlideTrabalhandoComImagens/imagem6.htm

15- Visualizando o Resultado

16- Exercício Proposto

Digite o código abaixo, salve-o como ex3.htm e:

Selecione imagens no formato jpeg ou gif e substitua os nomes "figura" colocados nas tags <img>.
Combine diferentes atributos para as imagens.
Escreva os atributos de cada figura.

<HTML>
        <HEAD>
                <TITLE>Utilizando figuras!</TITLE>
        </HEAD>
        <BODY bgcolor="#C0C0C0">
        <img src="FIGURA">
        <br><br>
        <img src="FIGURA">
        <br><br>
        <img src="FIGURA">
        <br><br>
        <img src="FIGURA">
        <br><br>
</BODY>
</HTML>

Baixe o código-fonte acima neste link: http://wiki.sintectus.com/pub/GrupoWeb/SlideTrabalhandoComImagens/ex3.htm

Exibir anexos

Esconder anexos

Anexos do tópico
I	Anexo	Ação	Tamanho	Data	Quem
jpg	3-1.jpg	gerenciar	46.1 K	02 Apr 2007 - 21:24	EmilioSantiagoCarmo
jpg	3-2.jpg	gerenciar	68.0 K	02 Apr 2007 - 21:24	EmilioSantiagoCarmo
jpg	3-3.jpg	gerenciar	45.8 K	02 Apr 2007 - 21:24	EmilioSantiagoCarmo
jpg	3-4.jpg	gerenciar	52.7 K	02 Apr 2007 - 21:24	EmilioSantiagoCarmo
jpg	3-5.jpg	gerenciar	43.0 K	02 Apr 2007 - 21:25	EmilioSantiagoCarmo
jpg	3-6.jpg	gerenciar	45.0 K	02 Apr 2007 - 21:25	EmilioSantiagoCarmo
htm	imagem5.htm	gerenciar	0.2 K	03 Apr 2007 - 11:29	UnknownUser
htm	imagem2.htm	gerenciar	0.2 K	03 Apr 2007 - 11:29	UnknownUser
htm	imagem1.htm	gerenciar	0.1 K	03 Apr 2007 - 11:29	UnknownUser
htm	imagem4.htm	gerenciar	0.4 K	03 Apr 2007 - 11:29	UnknownUser
htm	imagem3.htm	gerenciar	0.2 K	03 Apr 2007 - 11:29	UnknownUser
htm	imagem6.htm	gerenciar	0.5 K	03 Apr 2007 - 11:29	UnknownUser
htm	ex3.htm	gerenciar	0.2 K	03 Apr 2007 - 11:29	UnknownUser

GrupoWeb

Iniciar sessão ou Registro

Copyright © 2003 - 2010, pelos autores colaboradores. Todo o conteúdo desta página pode ser utilizado segundo os termos da Licença Creative Commons: Atribuição, Uso não Comercial e Permanência da Licença, salvo disposição em contrário indicada de forma explícita no tópico correspondente.