Painel de Usuario
Mensagens: 0
-
Alterar
-
Ver
-
Tópicos e mensagens
Menu
- Planeta Tutorial
- Ajuda e suporte
- Serviços para usuários
- Entretenimento
- Game zone
- Outros serviços
Procurar
Translate
Últimos assuntos
Estatísticas
Temos 26 usuários registradosO último membro registrado é kaironborges
Os nossos membros postaram um total de 144 mensagens em 142 assuntos
Radio Jovem Pan
Relogio
Visitou
Lição 9: Imagens
Página 1 de 1
Lição 9: Imagens
Lição 9: Imagens
O que você acha de poder adicionar uma imagem do Tim Bernes-Lee o inventor do HTML no centro da sua página?
Ops, isto soa como um desafio...
Talvez, mas é muito fácil de fazer. Tudo o que você precisa é da nossa já conhecida tag:
Exemplo 1:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
O que você tem a fazer é dizer ao navegador que quer inserir uma imagem (img) e depois informar onde a imagem esta localizada (src, abreviatura para "source" - local de armazenagem ).
Notar que a tag imagem é do tipo comando isolado, isto é, uma só tag de abertuta e fechamento. Semelhante a tag
que não precisa de um texto inserido nela.
"tim.jpg" é o nome do arquivo da imagem que você quer inserir na página. ".jpg" é a extensão do tipo de imagem. Tal como a extensão ".htm" para arquivos de documentos HTML, ".jpg" informa ao navegador que o arquivo é uma imagem. São três os tipos de imagens que você pode inserir na sua página:
GIF (Graphics Interchange Format)
JPG / JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
Em geral imagens GIF são melhores para gráficos e desenhos e imagens JPEG são melhores para fotografia. Existem duas razões para isto: primeiro, imagens GIF são constituidas por 256 cores, e imagens JPEG por milhões de cores, segundo, imagens GIF são melhores otimizadas para imagens simples ao passo que imagens JPEG são melhores otimizadas para imagens complexas. Quanto melhor a compressão tanto menor o tamanho do arquivo e tanto mais rápido a página é carregada no navegador. Como você deve saber por experiência própria, páginas desnecessariamente "pesadas" para carregar são frustantes para o usuário.
Tradicionalmente os formatos GIF e JPEG tem sido os mais empregados, mas ultimamente o formato PNG tem se tornado cada vez mais popular (notadamente em detrimento do formato GIF). O formato PNG é em vários aspectos melhor que os formatos JPEG e GIF: milhões de cores e efetiva compressão.
Onde consigo minhas imagens?
Para criar suas próprias imagens você precisa de um programa de edição de imagens. Um programa de edição de imagens é a ferramenta essencial para criação de websites com grande impacto visual.
Lamentavelmente, nenhum editor de imagem vem instalado com o Windows ou qualquer outro sistema operacional. Assim, você deve considerar a aquisição do Paint Shop Pro, do PhotoShop ou do Macromedia Fireworks, que são os três melhores editores de imagens atualmente existentes no mercado.
Contudo, como já dissemos, não há necessidade de comprar um programa caro para acompanhar este tutorial. Por enquanto, você poderá fazer o download de um exelente editor de imagens chamado Irfan View que é freeware, isto é, não custa nada.
Ou você pode fazer download de imagens existentes na web. Mas, por favor, se optar por fazer o download de imagens da Internet, cuidado para não violar direitos autorais de terceiros. A seguir mostro como fazer o download de uma imagem existente na Internet:
Clique com o botão direito do mouse na imagem da Internet.
No menu que aparece escolha a opção "Salvar imagem como...".
Na janela que se abre, escolha o lugar no seu computador para salvar e clique "Salvar".
Faça isto com a imagem abaixo e salve no seu computador no mesmo local onde está localizado seus documentos HTML. (Notar que deverá ser salvo o arquivo com formato PNG: logo.png):
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Agora você pode inserir a imagem nos seus documentos. Tente fazer isto em um documento que você criou neste tutorial.
Isto é tudo o que eu preciso saber sobre imagens?
Existem mais algumas coisinhas que você precisa saber.
Primeiro, você pode inserir imagens que estão localizadas em outros diretórios ou até mesmo em outros websites:
Exemplo 2:
Segundo, imagens podem ser links:
Exemplo 4:
Será renderizado no navegador assim: (clique na imagem):
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Existem outros atributos que eu deva conhecer?
Você sempre terá que usar o atributo src, que diz ao navegador onde a imagem está localizada. Além dele existem alguns outros atributos que podem ser bastante úteis quando você insere imagens em uma página.
O atributo alt é usado para fornecer uma descrição textual alternativa da imagem caso por alguma razão a imagem não seja renderizada para o usuário. Isto é particularmente importante para usuários com restrições visuais ou quando a imagem é carregada muito lentamente. Em conseqüência, sempre use o atributo alt:
Exemplo 5:
O atributo title pode ser usado para fornecer uma curta descrição da imagem:
Exemplo 6:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Coloque o ponteiro do mouse sobre a imagem, sem clicar e aparecerá uma caixa pop-up com o texto "Aprenda HTML no site HTML.net" .
Dois outros atributos importantes são width e height:
Exemplo 7:
[img][Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Os atributos width e height podem ser usados para definir respectivamente, a largura e a altura da imagem. O valor adotado para medidas é o pixel. Pixel é a unidade de medida usada para medir a resolução da tela. (As resoluções de tela mais comuns são de 800x600 e 1024x768 pixels). Ao contrário de centímetros, pixel é uma inidade de medida relativa que depende da resolução da tela. Usuários com grande resolução de tela terão 25 pixels em 1 centímetro de tela enquanto aqueles com baixa resolução de tela terão os mesmos 25 pixels em 1,5 cm de tela.
Se não forem definidos os valores para width eheight, a imagem será inserida com seu tamanho real. Com width e height você pode alterar o tamanho da imagem:
Exemplo 8:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Contudo, o tempo de descarga da imagem será sempre aquele requerido como se ela tivesse suas dimensões reais, mesmo que você diminua seu tamanho com uso destes atributos. Assim, você não deve diminuir o tamanho das imagens com o uso dos atributos width e height. Se você precisa diminuir a imagem diminua suas dimensões reais em um editor de imagem para tornar suas páginas mais leves e mais rápidas.
Dito isto, acrescentamos que é sempre uma boa idéia definir os atributos width e height para imagens, pois assim fazendo o navegador reservará o espaço para descarga da imagem previamente. Isto acaba por permitir ao navegador, saber com antecedência (antes de descarregar as imagens) como será o layout da página.
Por enquanto isto é tudo sobre o Tim Berners-Lee e sobre imagens.
O que você acha de poder adicionar uma imagem do Tim Bernes-Lee o inventor do HTML no centro da sua página?
Ops, isto soa como um desafio...
Talvez, mas é muito fácil de fazer. Tudo o que você precisa é da nossa já conhecida tag:
Exemplo 1:
- Código:
<img src="tim.jpg" alt="Tim Berners-Lee" />
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
O que você tem a fazer é dizer ao navegador que quer inserir uma imagem (img) e depois informar onde a imagem esta localizada (src, abreviatura para "source" - local de armazenagem ).
Notar que a tag imagem é do tipo comando isolado, isto é, uma só tag de abertuta e fechamento. Semelhante a tag
que não precisa de um texto inserido nela.
"tim.jpg" é o nome do arquivo da imagem que você quer inserir na página. ".jpg" é a extensão do tipo de imagem. Tal como a extensão ".htm" para arquivos de documentos HTML, ".jpg" informa ao navegador que o arquivo é uma imagem. São três os tipos de imagens que você pode inserir na sua página:
GIF (Graphics Interchange Format)
JPG / JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
Em geral imagens GIF são melhores para gráficos e desenhos e imagens JPEG são melhores para fotografia. Existem duas razões para isto: primeiro, imagens GIF são constituidas por 256 cores, e imagens JPEG por milhões de cores, segundo, imagens GIF são melhores otimizadas para imagens simples ao passo que imagens JPEG são melhores otimizadas para imagens complexas. Quanto melhor a compressão tanto menor o tamanho do arquivo e tanto mais rápido a página é carregada no navegador. Como você deve saber por experiência própria, páginas desnecessariamente "pesadas" para carregar são frustantes para o usuário.
Tradicionalmente os formatos GIF e JPEG tem sido os mais empregados, mas ultimamente o formato PNG tem se tornado cada vez mais popular (notadamente em detrimento do formato GIF). O formato PNG é em vários aspectos melhor que os formatos JPEG e GIF: milhões de cores e efetiva compressão.
Onde consigo minhas imagens?
Para criar suas próprias imagens você precisa de um programa de edição de imagens. Um programa de edição de imagens é a ferramenta essencial para criação de websites com grande impacto visual.
Lamentavelmente, nenhum editor de imagem vem instalado com o Windows ou qualquer outro sistema operacional. Assim, você deve considerar a aquisição do Paint Shop Pro, do PhotoShop ou do Macromedia Fireworks, que são os três melhores editores de imagens atualmente existentes no mercado.
Contudo, como já dissemos, não há necessidade de comprar um programa caro para acompanhar este tutorial. Por enquanto, você poderá fazer o download de um exelente editor de imagens chamado Irfan View que é freeware, isto é, não custa nada.
Ou você pode fazer download de imagens existentes na web. Mas, por favor, se optar por fazer o download de imagens da Internet, cuidado para não violar direitos autorais de terceiros. A seguir mostro como fazer o download de uma imagem existente na Internet:
Clique com o botão direito do mouse na imagem da Internet.
No menu que aparece escolha a opção "Salvar imagem como...".
Na janela que se abre, escolha o lugar no seu computador para salvar e clique "Salvar".
Faça isto com a imagem abaixo e salve no seu computador no mesmo local onde está localizado seus documentos HTML. (Notar que deverá ser salvo o arquivo com formato PNG: logo.png):
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Agora você pode inserir a imagem nos seus documentos. Tente fazer isto em um documento que você criou neste tutorial.
Isto é tudo o que eu preciso saber sobre imagens?
Existem mais algumas coisinhas que você precisa saber.
Primeiro, você pode inserir imagens que estão localizadas em outros diretórios ou até mesmo em outros websites:
Exemplo 2:
- Código:
<img src="images/logo.png">
- Código:
<img src="http://www.html.net/logo.png">
Segundo, imagens podem ser links:
Exemplo 4:
- Código:
<a href="http://www.html.net">
<img src="logo.png"></a>
Será renderizado no navegador assim: (clique na imagem):
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Existem outros atributos que eu deva conhecer?
Você sempre terá que usar o atributo src, que diz ao navegador onde a imagem está localizada. Além dele existem alguns outros atributos que podem ser bastante úteis quando você insere imagens em uma página.
O atributo alt é usado para fornecer uma descrição textual alternativa da imagem caso por alguma razão a imagem não seja renderizada para o usuário. Isto é particularmente importante para usuários com restrições visuais ou quando a imagem é carregada muito lentamente. Em conseqüência, sempre use o atributo alt:
Exemplo 5:
- Código:
<img src="logo.gif" alt="logotipo do HTML.net">
O atributo title pode ser usado para fornecer uma curta descrição da imagem:
Exemplo 6:
- Código:
<img src="logo.gif" title="Aprenda HTML no site HTML.net">
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Coloque o ponteiro do mouse sobre a imagem, sem clicar e aparecerá uma caixa pop-up com o texto "Aprenda HTML no site HTML.net" .
Dois outros atributos importantes são width e height:
Exemplo 7:
- Código:
<img src="logo.png" width="141" height="32">
[img][Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Os atributos width e height podem ser usados para definir respectivamente, a largura e a altura da imagem. O valor adotado para medidas é o pixel. Pixel é a unidade de medida usada para medir a resolução da tela. (As resoluções de tela mais comuns são de 800x600 e 1024x768 pixels). Ao contrário de centímetros, pixel é uma inidade de medida relativa que depende da resolução da tela. Usuários com grande resolução de tela terão 25 pixels em 1 centímetro de tela enquanto aqueles com baixa resolução de tela terão os mesmos 25 pixels em 1,5 cm de tela.
Se não forem definidos os valores para width eheight, a imagem será inserida com seu tamanho real. Com width e height você pode alterar o tamanho da imagem:
Exemplo 8:
- Código:
<img src="logo.gif" width="32" height="32">
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Contudo, o tempo de descarga da imagem será sempre aquele requerido como se ela tivesse suas dimensões reais, mesmo que você diminua seu tamanho com uso destes atributos. Assim, você não deve diminuir o tamanho das imagens com o uso dos atributos width e height. Se você precisa diminuir a imagem diminua suas dimensões reais em um editor de imagem para tornar suas páginas mais leves e mais rápidas.
Dito isto, acrescentamos que é sempre uma boa idéia definir os atributos width e height para imagens, pois assim fazendo o navegador reservará o espaço para descarga da imagem previamente. Isto acaba por permitir ao navegador, saber com antecedência (antes de descarregar as imagens) como será o layout da página.
Por enquanto isto é tudo sobre o Tim Berners-Lee e sobre imagens.
konan- Uplouder
- Respeito às regras :
Mensagens : 59
Reputação : 0
Data de inscrição : 13/06/2011
Idade : 32
Tópicos semelhantes
» Lição 10: Tabelas
» Lição 2: O que é HTML?
» Lição 7: Atributos
» Lição 8: Links
» Lição 12: Layout (CSS)
» Lição 2: O que é HTML?
» Lição 7: Atributos
» Lição 8: Links
» Lição 12: Layout (CSS)
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
Ter 28 Jun 2011 - 17:31 por Admin
» Efeito Glow
Seg 27 Jun 2011 - 17:39 por Admin
» Efeito Brilho Suave nas fotos
Seg 27 Jun 2011 - 17:33 por Admin
» Arte geométrica com Photoshop
Seg 27 Jun 2011 - 17:31 por Admin
» Efeito Varinha Mágica no Photoshop
Sáb 25 Jun 2011 - 15:20 por konan
» Montagem multicolorida com tintas e efeitos diversos
Sáb 25 Jun 2011 - 15:18 por konan
» Linhas luminescentes no Photoshop
Sáb 25 Jun 2011 - 15:17 por konan
» Segredos sobre design de site
Sex 24 Jun 2011 - 23:00 por konan
» Hardware para iniciantes, parte 5
Sex 24 Jun 2011 - 22:41 por konan