Como vimos anteriormente, o desenho de uma página web implica a criação de um arquivo em código HTML, mas não é o único que devemos criar. Na maioria dos casos também desejaremos incluir imagens e para isso será necessário criar os correspondentes arquivos gráficos.

O processo para incluir uma imagem em uma página começa pela criação da imagem com um programa de desenho gráfico ou mediante sua digitalização com um escaner. Será necessário que conheçamos algum dos programas de desenho gráfico que existem no mercado. São muito interessantes Photoshop, Paint Shop Pro ou Fireworks. À princípio poderemos nos contentar em manejá-los por alto e isso nos resultará muito fácil, mas conforme avancemos no caminho como desenhadores web será mais necessário dominá-los para obtermos resultados mais profissionais.

Os tipos de arquivo gráficos que a Internet tolera são o JPG E O GIF. Estes têm características distintas e portanto usos distintos. Podemos conhecer mais isto na reportagem Formatos gráficos de Internet.

Uma vez que temos os arquivos gráficos os colocamos no mesmo diretório que os arquivos HTML ou em um subdiretório deste e no código da página HTML colocaremos um tag especial para incluir a imagem ou a incluímos com nosso programa editor de HTML.

O importante de tudo isso é percebermos que o site web está composto por arquivos HTML, GIFs, JPGs e inclusive os correspondentes arquivos que contenham vídeos, animações Flash, programas Java, etc. Temos que ter bem localizados todos estes arquivos dentro de nosso disco duro e dentro de um mesmo diretório. Certamente é indiferente a ordem como estão os arquivos dentro do diretório, mas poderá ser interessante incluirmos subdiretórios para que fique tudo melhor ordenado e para que seja mais fácil sua conservação. Por exemplo, uma técnica muito habitual é colocar todas as imágens dentro de um subdiretório chamdo imagens.

O objetivo de tanta ordem e conhecimento da localização de todos os arquivos é que logo teremos que subi-los ao servidor sem esquecermos de nenhum deles. Nos capítulos posteriores veremos como se faz este passo.

Um problema típico com as imágens e outros arquivos externos consiste em que quando vemos as páginas em nosso computador se vêem corretamente e não falta nenhuma imagem nem outros possíveis elementos. Entretanto, quando subimos os arquivos ao servidor e vemos a página na internet, esta se mostra com erros nas imagens e em outros elementos, de modo que no se pode ver bem. Isto costuma se chamar ter uma imagem "rompida". A razão pela qual está rompida é que não pode localizá-la no servidor e portanto não a pode mostrar. Isto pode ser devido a várias razões.

• A imagem não subiu ao servidor
• A posição relativa da imagem em relação à página não é a mesma em nosso computador (local) e no servidor (remoto). Por exemplo, as imagens em local poderiam estar no diretório imagens enquanto que em remoto poderiam estar no mesmo diretório que a página, o que seria um erro. Sempre se deve respeitar a estrutura de diretórios que está em local e criá-la exatamente igual em remoto.
• A imagem que se tenta acesar tem um caminho dirigido a um diretório de nosso isco duro, como ao ver a página na nternet nao se tem aceso ao seu disco duro, os usuários não poderão ver as imagens. Quando trabalhamos com um editor de HTML e colocamos imagens em algumas ocasiões o editor coloca caminhos em nosso disco duro no lugar de caminhos relativos. Os caminhos relativos são rotas que começam no lugar onde está a página que estamos desenhando.

Há uma forma muito útil de obter pistas a cerca do falho de uma imagem, consiste em clicar com o botão direito do mouse sobre ela e selecionar propriedades. Isto nos mostra informações sobre a imagem e nos informa sobre o lugar onde se está tentando encontrá-la.