Como construir Tráfego para o teu Site,
Ganhe dinheiro com o seu site.
Guia e dicas, experimente:
http://ganhar.noble7fix.com
Ganhe dinheiro com o seu site.
Guia e dicas, experimente:
http://ganhar.noble7fix.com
Guia Prático HTML
Copyright © 2007 by Noble7fix · All Rights reserved · E-Mail: noble7fix@gmail.com
ACERCA DE IMAGENS E FOTOS EM WEBSITES (um pouco de história)
Qual é o formato ideal para colocar arquivos de imagens na Internet?
Em primeiro lugar, é bom saber que as imagens em formato bitmap (mapa de bits), também chamadas de imagens por rastreio ou de pintura, são constituídas de pontos individuais chamados de pixel (picture elements, elementos de figura) que são dispostos e coloridos de maneiras diferentes para formar um padrão. Pixels são pontos em uma tela de computador ou televisão que se combinam para formar uma imagem. As imagens de computador são criadas como uma matriz desses pontos, cada ponto com uma cor específica. O padrão da tela no computador é de 640 pixels na horizontal e 480 pixels na vertical. Nessa configuração dizemos que a resolução da tela é 640X480. É possível alterar, dependendo da placa de vídeo, a resolução para que caibam mais pixels: 800X600, por exemplo. Isto acarreta uma maior definição na imagem, porém causa uma diminuição dos objetos (figuras e letras).
Na Internet, o ideal é que as páginas sejam vistas com a mesma resolução que foram criadas. Para alterar a resolução, basta, no painel de controle, alterar as propriedades de vídeo. Ao aumentar a figura (zoom), é possível ver os quadrados individuais que formam a imagem total. O aumento do tamanho de um bitmap faz com que as linhas e formas pareçam serrilhadas. No entanto, a cor e a forma de uma imagem bitmap parecem contínuas quando visualizadas a uma distância maior. A redução de um bitmap também distorce a imagem original pois os pixels são removidos para reduzir o tamanho geral da figura. A extensão do bitmap é .bmp e é o formato padrão do Windows.
Para usar uma imagem como papel de parede até ao Windows 95, ela devia ser salva no formato .bmp, mas a partir do Windows 98 passou a aceitar outros padrões. Pelo fato de apresentar arquivos muito grandes, os bitmaps não são usados na Web. Para isso foram desenvolvidos arquivos de tamanho diminuto. Os dois formatos mais comuns são: .GIF (Graphics Interchange Format - Formato de Intercâmbio de Gráficos) e .JPG ou JPEG (Joint Photographic Experts Group - Grupos Reunidos de Especialistas em Imagens). Geralmente o formato .GIF é considerado a melhor escolha para desenho de linhas e gráficos com poucas cores ou contornos agudos. O JPEG(extensão .JPG) é a escolha preferida quando se salvam imagens com muitas tonalidades, assim como fotografias ou imagens digitalizadas.
Qual é o formato ideal para colocar arquivos de imagens na Internet?
Em primeiro lugar, é bom saber que as imagens em formato bitmap (mapa de bits), também chamadas de imagens por rastreio ou de pintura, são constituídas de pontos individuais chamados de pixel (picture elements, elementos de figura) que são dispostos e coloridos de maneiras diferentes para formar um padrão. Pixels são pontos em uma tela de computador ou televisão que se combinam para formar uma imagem. As imagens de computador são criadas como uma matriz desses pontos, cada ponto com uma cor específica. O padrão da tela no computador é de 640 pixels na horizontal e 480 pixels na vertical. Nessa configuração dizemos que a resolução da tela é 640X480. É possível alterar, dependendo da placa de vídeo, a resolução para que caibam mais pixels: 800X600, por exemplo. Isto acarreta uma maior definição na imagem, porém causa uma diminuição dos objetos (figuras e letras).
Na Internet, o ideal é que as páginas sejam vistas com a mesma resolução que foram criadas. Para alterar a resolução, basta, no painel de controle, alterar as propriedades de vídeo. Ao aumentar a figura (zoom), é possível ver os quadrados individuais que formam a imagem total. O aumento do tamanho de um bitmap faz com que as linhas e formas pareçam serrilhadas. No entanto, a cor e a forma de uma imagem bitmap parecem contínuas quando visualizadas a uma distância maior. A redução de um bitmap também distorce a imagem original pois os pixels são removidos para reduzir o tamanho geral da figura. A extensão do bitmap é .bmp e é o formato padrão do Windows.
Para usar uma imagem como papel de parede até ao Windows 95, ela devia ser salva no formato .bmp, mas a partir do Windows 98 passou a aceitar outros padrões. Pelo fato de apresentar arquivos muito grandes, os bitmaps não são usados na Web. Para isso foram desenvolvidos arquivos de tamanho diminuto. Os dois formatos mais comuns são: .GIF (Graphics Interchange Format - Formato de Intercâmbio de Gráficos) e .JPG ou JPEG (Joint Photographic Experts Group - Grupos Reunidos de Especialistas em Imagens). Geralmente o formato .GIF é considerado a melhor escolha para desenho de linhas e gráficos com poucas cores ou contornos agudos. O JPEG(extensão .JPG) é a escolha preferida quando se salvam imagens com muitas tonalidades, assim como fotografias ou imagens digitalizadas.
Sem dúvida que para um Site ter vida, ser atractivo, precisa de côr, imagens, conforme o Tema que escolheu, por exemplos e escolheu um site sobre jardinagem seria uma pena não colocar imagens de jardins, plantas, flores, etc, isso é tão importante e enriquecedor que quanto mais artistico for o seu site mesmo visitantes que não estejam muito interessados no tema poderão passar um bom momento a apreciar o seu trabalho artistico, por isso, vamos a isto!
Já reparou e de certeza está entusiasmado ao verificar como criar sites em HTML é fácil e a inserção de imagens também não foge à regra.
Já reparou e de certeza está entusiasmado ao verificar como criar sites em HTML é fácil e a inserção de imagens também não foge à regra.
Guia Prático HTML
Lição 11 - Colocar Imagens
Construir um Website
<img src="http://criar.noble7fix.com/images/golfinho.jpg" alt="Golfinhos" />
Definições de algumas extensões e formatos em imagens e fotos
* JPEG - Joint Photographic Experts Group
A extensão em DOS é "JPG". É o formato mais utilizado e conhecido atualmente. Quase todas as câmaras dão esta opção para guardar as imagens. Arquivo muito utilizado na Internet e em multimidia, por ter uma compactação excelente, algo fundamental ao meio, e por suportar até 16.777.216 cores distintas.
* TIFF - Tagged Image File Format
Arquivo padrão para impressão industrial (offset, rotogravura, flexogravura); também muito usado como opção nas câmaras fotográficas.
* GIF - Graphics Interchange Format
Criado para ser usado extensivamente na Internet. Suporta imagens animadas e 256 cores por frame. Foi substituído pelo PNG.
* BMP - Windows Bitmap
Normalmente usado pelos programas do Microsoft Windows. Não utiliza nenhum algoritmo de compressão, daí esse formato apresentar as fotos com maior tamanho.
* SVG - Scalable Vector Graphics
É um formato vetorial, criado e desenvolvido pelo World Wide Web Consortium.
* PNG - Portable Network Graphics
É um formato livre de dados utilizado para imagens, que surgiu em 1996 como substituto para o formato GIF, devido ao facto de este último incluir algoritmos patenteados. Suporta canal alfa, não tem limitação da profundidade de cores, alta compressão (regulável). Permite comprimir as imagens sem perda de qualidade, ao contrário de outros formatos, como o JPG.
* JPEG - Joint Photographic Experts Group
A extensão em DOS é "JPG". É o formato mais utilizado e conhecido atualmente. Quase todas as câmaras dão esta opção para guardar as imagens. Arquivo muito utilizado na Internet e em multimidia, por ter uma compactação excelente, algo fundamental ao meio, e por suportar até 16.777.216 cores distintas.
* TIFF - Tagged Image File Format
Arquivo padrão para impressão industrial (offset, rotogravura, flexogravura); também muito usado como opção nas câmaras fotográficas.
* GIF - Graphics Interchange Format
Criado para ser usado extensivamente na Internet. Suporta imagens animadas e 256 cores por frame. Foi substituído pelo PNG.
* BMP - Windows Bitmap
Normalmente usado pelos programas do Microsoft Windows. Não utiliza nenhum algoritmo de compressão, daí esse formato apresentar as fotos com maior tamanho.
* SVG - Scalable Vector Graphics
É um formato vetorial, criado e desenvolvido pelo World Wide Web Consortium.
* PNG - Portable Network Graphics
É um formato livre de dados utilizado para imagens, que surgiu em 1996 como substituto para o formato GIF, devido ao facto de este último incluir algoritmos patenteados. Suporta canal alfa, não tem limitação da profundidade de cores, alta compressão (regulável). Permite comprimir as imagens sem perda de qualidade, ao contrário de outros formatos, como o JPG.
Criar suas próprias imagens
Há duas maneiras de conseguir imagens para o seu website, a mais fácil será pesquisar no Google, selecionando o menu imagens sobre o tema que pretende e "guardar as imagens como..." numa pasta, pré definida por si, mas neste caso tem que ter em atenção os direitos de autor ou copyright, embora circulem muitas imagens gratuitas para guardar, seja como wallpapers, etc...Contudo mesmo guardando essas imagens poderá e deverá ajustá-las ao seu site e ao que pretende. Imaginemos que viu uma imagem muito bonita para o seu site sobre jardinagem , um trevo de 4 folhas, mas ao guardá-la tem um tamanho que não se enquaadra no seu site ou outros aspectos que gostaria de alterar. Como fazer isso? É preciso um programa editor de imagens, uma ferramenta essencial para a criação de site, a nível do impacto visual.
Por padrão nos sistemas operativos do Windows não vem instalado, mas pode adquirir fácilmente por exemplo: o PhotoShop ou Macromedia Fireworks, ou então o Paint.net (gratuito) que consideramos os melhores editores de imagens.
Há duas maneiras de conseguir imagens para o seu website, a mais fácil será pesquisar no Google, selecionando o menu imagens sobre o tema que pretende e "guardar as imagens como..." numa pasta, pré definida por si, mas neste caso tem que ter em atenção os direitos de autor ou copyright, embora circulem muitas imagens gratuitas para guardar, seja como wallpapers, etc...Contudo mesmo guardando essas imagens poderá e deverá ajustá-las ao seu site e ao que pretende. Imaginemos que viu uma imagem muito bonita para o seu site sobre jardinagem , um trevo de 4 folhas, mas ao guardá-la tem um tamanho que não se enquaadra no seu site ou outros aspectos que gostaria de alterar. Como fazer isso? É preciso um programa editor de imagens, uma ferramenta essencial para a criação de site, a nível do impacto visual.
Por padrão nos sistemas operativos do Windows não vem instalado, mas pode adquirir fácilmente por exemplo: o PhotoShop ou Macromedia Fireworks, ou então o Paint.net (gratuito) que consideramos os melhores editores de imagens.
Paint.NET - Consideramos um dos melhores programas para editar imagens e fotos. (é só clicar na imagem para iniciar o download)
Vamos fazer uma experiência, clique com o lado direito do rato em cima da imagem em baixo e escolha a opção "Guardar imagem como..." e certifique-se que guardou numa pasta pasta que saiba localizar fácilmente por exemplo pasta com o nome: "images", já verificou que o logotipo está em formato .png (nota: deverá deverá também ser salvo o arquivo com formato PNG: noble7fix.png):
Inserir imagens que estão localizadas em outros diretórios:
Inserir imagens que estão localizadas em outros websites:
<img src="images/noble7fix.png">
<a href="http://criar.noble7fix.com” “target="_blank">
<img src="noble7fix.png"></a>
<img src="noble7fix.png"></a>
Irá aparecer o logo Noble7fix.
Experimente clicar na imagem
Experimente clicar na imagem
Outros atributos que se aplicam às imagens
Já observou de certeza que para imagens terá sempre que usar o atributo src, para o browser poder localizar a imagem, portanto um atributo fundamental
Atributo alt
Outro atributo é o alt é que se usa para mostrar um texto alternativo descritivo da imagem, o que pode ser útil quando a imagem custa a "carregar" ou nem aparece por alguma razão, assim pelo texto podemos saber ao que essa imagem se refere.
Já observou de certeza que para imagens terá sempre que usar o atributo src, para o browser poder localizar a imagem, portanto um atributo fundamental
Atributo alt
Outro atributo é o alt é que se usa para mostrar um texto alternativo descritivo da imagem, o que pode ser útil quando a imagem custa a "carregar" ou nem aparece por alguma razão, assim pelo texto podemos saber ao que essa imagem se refere.
<img src="noble7fix.gif" alt="Logo do Noble7fix Criar Website"
Como pode ver na indicação html tem noble7fix.gif e deveria ser noble7fix.png, por isso imagem não aparece, mas aparece o texto alternativo
Este atributo fornece uma descrição em texto da imagem quando se coloca o cursor do rato em cima, aparece uma pequena janela com esse texto de descrição.
<img src="noble7fix.png"
title="Para criar websites visite Noble7fix">
title="Para criar websites visite Noble7fix">
coloque o ponteiro do rato em cima da imagem e vai ver um pequeno texto
Atributos width e height
Definem a largura (width) e a altura (height) da imagem.
Quando não se define os valores para width e height, a imagem aparece no seu tamanho real. Com a variação dos valores em width e height também vai variar o tamanho da imagem, alterando assim o tamanho original:
Definem a largura (width) e a altura (height) da imagem.
Quando não se define os valores para width e height, a imagem aparece no seu tamanho real. Com a variação dos valores em width e height também vai variar o tamanho da imagem, alterando assim o tamanho original:
<img src="noble7fix.png" width="40" height="40">
OBS: não se aconselha a usar muito estes atributos width e height, melhor mesmo é se pretende apresentar uma imagem mais reduzida fazê-lo através de um editor de imagens e apresentar sempre no seu website a imagem no seu estado original.
<img src="http://criar.noble7fix.com/noble7fix.png">