LINKS EM HTML
Ate aqui, vimos que uma pagina web e um arquivo HTML no qual podemos incluir, entre outras coisas,
textos formatados ao nosso gosto e imagens que veremos mais adiante. Do mesmo modo, um site web
podera ser considerado como um conjunto de arquivos, principalmente paginas HTML e imagens, que
constituem o conteudo ao qual o navegante tem acesso.
Entretanto, nao poderiamos falar de navegante ou de navegacao se estes arquivos HTML nao estivessem
devidamente conectados entre eles e com o exterior de nosso site por meio de links hipertexto. Na
verdade, o atrativo original do HTML reside no possivel empenho dos conteudos dos arquivos
introduzindo referencias sob a forma de links que permitem um acesso rapido a informacao desejada.
Serviria pouco se tivessemos na rede paginas isoladas as quais as pessoas nao pudessem acessar ou
paginas onde nao fosse possivel ir para outras.
Um link pode ser facilmente detectado em uma pagina. Basta deslizar o ponteiro do mouse sobre as
imagens ou o texto e ver como muda de sua forma original transformando-se por regra geral em uma mao
com um dedo indicador. Adicionalmente, estes links costumam ir, no caso dos textos, coloridos e
sublinhados para que o usuario nao tenha dificuldade em os reconhecer. Se nao especificamos o
contrario (ja teremos a ocasiao de explicar como), estes links-texto estarao sublinhados e coloridos de
azul. No caso das imagens que servem de link, veremos que estao delimitadas por uma marcacao azul
por padrao.
Para colocar um link, utilizaremos as etiquetas <a> e </a>. Dentro da etiqueta de abertura devemos
especificar o destino do link. Este destino sera introduzido sob a forma de atributo, no qual leva o nome
href.
A sintaxe geral de um link e portanto da seguinte forma:
<a href="destino">conteudo</a>
Sendo o conteudo um texto ou uma imagem. E a parte da pagina que se colocara ativa e onde
deveremos clicar para acessar ao link.
E o destino por sua vez, sera uma pagina, um correio eletronico ou um arquivo.
Em funcao do destino, os links sao classicamente agrupados da seguinte forma:
・ Links internos: os que se dirigem a outras partes dentro da mesma pagina.
・ Links locais: os que se dirigem a outras paginas do mesmo site web.
・ Links remotos: os que se dirigem a paginas de outros sites web.
・ Links com endereços de correio: para criar uma mensagem de correio dirigido a um endereco.
・ Links com arquivos: Para que os usuarios possam fazer download de arquivos.
Links internos
Sao os links que apontam a um lugar diferente dentro da mesma pagina. Este tipo de link e
essencialmente utilizado em paginas onde o acesso aos conteudos pode ser prejudicado devido ao
grande tamanho da mesma. Mediante estes links, podemos oferecer aos visitantes a possibilidade de
acessar rapidamente ao inicio e ao final da pagina, ou tambem a diferentes paragrafos ou secoes.
Par criar um link deste tipo e necessario, alem do link origem propriamente dito, um segundo link que sera
colocado no destino. Vejamos mais claramente como funcionam estes links com um simples exemplo:
Suponhamos que queremos criar um link que aponte ao final da pagina. O primeiro a fazer sera colocar
nosso link origem. Colocaremos e escreveremos da seguinte forma:
<a href="#abaixo">Ir abaixo</a>
Link com o final deste documento para que prove seu funcionamento:
Ir abaixo
Como pode ser visto, o conteudo do link e o texto "Ir abaixo" e o destino, abaixo, e um ponto da mesma
pagina que ainda nao foi definido. Atencao ao simbolo # ; e ele quem especifica ao navegador que o link
aponta a uma secao particular.
Em segundo lugar, temos que gerar um link no destino. Este link levara o nome "abaixo" para poder
distingui-lo dos outros possiveis links realizados dentro da mesma pagina. Neste caso, a etiqueta que
escreveremos sera esta:
<a name="abaixo"></a>
Na verdade, estes links, mesmo sendo uteis, nao sao os mais utilizados. A tendencia geral e a de criar
paginas (arquivos) independentes com tamanhos mais reduzidos linkados entre eles por links locais (que
veremos em seguida). Desta forma, evitamos o excesso de tempo de carregamento de um arquivo e a
introducao de excesso de informacao que possa desviar a atencao do usuario.
Uma aplicacao corrente destes links consiste em colocar um pequeno indice ao principio de nosso
documento onde introduzimos links origem as diferentes secoes. Paralelamente, ao final de cada secao
introduzimos um link que aponta ao indice de forma que possamos guiar o navegante na busca da
informacao util para ele.
Links locais
Como dissemos, um site web esta constituido de paginas interconexas. No capitulo anterior vimos como
linkar diferentes secoes dentro de uma mesma pagina. Resta-nos estudar a maneira de relacionar os
distintos documentos HTML que compoem nosso site web.
Para criar este tipo de links, temos que criar uma etiqueta da seguinte forma:
<a href="arquivo.html">conteudo</a>
Por regra geral, para uma melhor organizacao, os sites costumam estar ordenados por diretorios. Estes
diretorios costumam conter diferentes secoes da pagina, imagens, audios...E por isso que em muitos
casos nao nos sera valido especificar o nome do arquivo, e sim, o diretorio onde nosso arquivo.html esta
alojado.
Se voce ja tiver trabalhado com MS-DOS nao tera nenhum problema para compreender o modo de
funcionamento. Somente devera ter cuidado em usar a barra "/" no lugar da contra-barra "\".
Para aqueles que nao sabem como mostrar um caminho de um arquivo, aqui vai uma serie de indicacoes
que lhes vao ajudar a compreender a forma de expressa-los. Nao e nada dificil e com um pouco de
pratica o fara praticamente sem pensar.
1. Ha de situar mentalmente no diretorio no qual se encontra a pagina com o link.
2. Se a pagina destino esta em um diretorio incluido dentro do diretorio no qual nos encontramos,
temos de marcar o caminho numerando cada um dos diretorios pelos quais passamos ate
chegar ao arquivo e separando-os pelo simbolo barra "/". No final, obviamente, escrevemos o
arquivo.
3. Se a pagina destino encontra-se em um diretorio que inclui o da pagina com o link, temos que
escrever dois pontos seguidos e uma barra "../" tantas vezes quantas forem os niveis que
subirmos na hierarquia de diretorios, ate chegar no diretorio onde esta localizado o arquivo
destino.
4. Se a pagina encontra-se em outro diretorio nao incluido nem incluente do arquivo origem,
teremos que subir com a regra 3 por meio de ".." ate encontrar o diretorio que englobe o diretorio
que contem a pagina destino. A seguir faremos como a regra 2. Escreveremos todos os
diretorios pelos quais passamos ate chegar ao arquivo.
Exemplo:
Para esclarecer este ponto podemos fazer um exemplo a partir da
estrutura de diretorios da imagem.
Para fazer um link desde index.html para yyy.html:
<a href="secao1/paginas/yyy.html">conteudo</a>
Para fazer um link desde xxx.html para yyy.html:
<a href="../secao1/paginas/yyy.html">conteudo</a>
Para fazer um link desde yyy.html para xxx.html:
&<a href="../../secao2/xxx.html">conteudo</a>
Os links locais podem por sua vez ja apontar mais precisamente a uma secao concreta, ao inves da
pagina em geral. Este tipo de link costuma ser um hibrido de interno e local. A sintaxe e deste tipo:
<a href="arquivo.html#secao">conteudo</a>
Como para os links internos, neste caso temos que marcar a secao com outro link do tipo:
<a name="secao"></a>
Como exemplo temos aqui um link que aponta ao capitulo anterior ao final da pagina.
Links externos, de correio e para arquivos
Para terminar o tema dos links veremos os tres ultimos tipos de links que haviamos assinalado.
Links remotos
Sao os links que se dirigem as paginas que se encontram fora do nosso site web, ou seja, qualquer outro
documento que nao faz parte de nosso site.
Este tipo de link e muito comum e nao representa nenhuma dificuldade. Simplesmente colocamos no
atributo HREF de nossa etiqueta <A> a URL ou endereco da pagina com a qual queremos linkar. Sera
algo parecido a isto:
<a href=http://www.yahoo.com.br>ir a yahoo.com.br</a>
Somente cabe destacar que todos os enderecos web (URLs) comecam por http:// . Isto indica que o
protocolo pelo qual se acessa e HTTP, o utilizado na web. Nao devemos nos esquecer de coloca-lo
porque senao os links serao tratados como links locais em nosso site.
Outra coisa interessante e que nao temos necessariamente que linkar com uma pagina web com o
protocolo HTTP. Tambem podemos acessar recursos atraves de outros protocolos como o FTP. Em tal
caso, os enderecos dos recursos nao comecarao com http:// e sim por ftp://.
Links a endereços de correio
Os links a enderecos de correio sao aqueles em que ao clica-los nos abre uma nova mensagem de
correio eletronico dirigido a um determinado endereco de mail. Estes links sao muito habituais nas
paginas web e e a maneira mais rapida de oferecer ao visitante uma via para o contato com o proprietario
da pagina.
Para colocar um link dirigido a um endereco de correio colocamos mailto: no atributo href do link, seguido
do endereco de correio ao qual se deve dirigir o link.
<a href="mailto: andre@andrecavalcante.com ">andre@andrecavalcante.com</a>
Links com arquivos
Este nao e um tipo de link propriamente dito, mas o assinalamos aqui porque e um tipo de link muito
habitual e que apresenta alguma complicacao para o usuario novato.
O mecanismo e o mesmo que conhecemos nos links locais e nos remotos, com a unica particulariedade
de que em vez de estar dirigidos para uma pagina web, esta dirigido para um arquivo de outro tipo.
Se queremos linkar com um arquivo meu_arquivo.zip que se encontra no mesmo diretorio que a pagina,
escreveriamos um link assim:
<a href="meu_arquivo.zip">Baixar meu_arquivo.zip</a>
Se clicamos um link deste tipo nosso navegador baixara o arquivo, fazendo a pergunta tipica se: "Deseja
abrir o arquivo ou salva-lo no computador?".
Se queremos linkar outro tipo de arquivos como um PDF ou mundo VRML (Realidade Virtual para
Internet)continuamos fazendo da mesma maneira. O navegador, se reconhece o tipo de arquivo, e o
responsavel de abri-lo utilizando o conectador adequado para isso. Assim, se por exemplo linkamos com
um PDF colocara o programa Acrobat Reader em funcionamento para mostrar os conteudos. Se linkamos
com um mundo VRML colocara em funcionamento o plug-in que o usuario tenha instalado para ver os
mundos virtuais (Cosmo, por exemplo) .
Este seria um exemplo de link a um documento PDF.
<a href="meu_documento.pdf">Baixar o PDF</a>
Imagens em HTML
Sem duvida, um dos aspectos mais vistosos e atrativos das paginas web e o grafismo. A introducao em
nosso texto de imagens pode nos ajudar a explicar mais facilmente nossa informacao e dar um ar muito
mais estetico. Porem, o abuso pode nos conduzir a uma sobrecarga que se traduz em uma distracao para
o navegante, quem tera mais dificuldade em encontrar a informacao necessaria, e um maior tempo para
carregar a pagina o que pode ser de um efeito nefasto se nosso visitante nao tem uma boa conexao ou se
e um pouco impaciente.
Neste capitulos nao explicaremos como criar, nem como tratar as imagens, unicamente diremos que para
isso utilizam-se aplicacoes como Paint Shop Pro, Photoshop ou Corel Draw. Tambem nao explicaremos
as particularidades de cada tipo de arquivo GIF ou JPG e a forma de otimizar nossas imagens. A este
assunto sera dedicado em um futuro capitulo.
As imagens sao armazenadas em forma de arquivos, principalmente GIF (para desenhos) ou JPG (para
fotos). Estes arquivos podem ser criados por nos mesmos ou podem ser baixados gratuitamente em sites
web especializados.
Sendo assim, nestes primeiros capitulos nos limitaremos a explicar como inserir e alinhar devidamente
em nossa pagina uma imagem ja criada.
A etiqueta que utilizaremos para inserir uma imagem e <img> (image). Esta etiqueta nao possui seu
fechamento correspondente e nela temos de especificar obrigatoriamente o paradeiro de nosso arquivo
mediante o atributo src (source).
A sintaxe fica entao da seguinte forma:
<img src="caminho para o arquivo">
Para expressar o caminho, faremos da mesma forma que vimos para os links. As regras continuam sendo
as mesmas, o unico que muda e que, no lugar de uma pagina destino, o destino e um arquivo grafico.
Alem deste atributo, obviamente indispensavel para a visualizacao da imagem, a etiqueta <img> nos
propoe outra serie de atributos de maior ou menor utilidade:
Atributo alt
Entre aspas deste atributo, colocaremos uma brevissima descricao da imagem. Esta etiqueta nao e
indispensavel, mas apresenta varias utilidades.
Primeiramente, durante o processo de carregamento da pagina, quando a imagem nao tiver sido ainda
carregada, o navegador mostrara esta descricao, com a qual o navegante podera ter uma ideia do que se
trata neste caso.
Isto nao e tao trivial se temos em conta que alguns usuarios navegam pela rede com uma opcao do
navegador que desativa a amostra de imagens, com o que tais pessoas poderao sempre saber de que se
trata o grafico e eventualmente mudar o modo com imagens para visualizar.
Alem disso, determinadas aplicacoes para incapacitados ou para telefones vocais que nao mostram
imagens oferecem a possibilidade de le-las, o que nunca e demais pensar nestes coletivos.
Em geral, podemos considerar como aconselhavel o uso deste atributo salvo para imagens de pouca
importancia e absolutamente indispensavel se a imagem em questao serve de link.
Atributos height e width
Definem a altura e largura respectivamente da imagem em pixels.
Todos os arquivos graficos possuem umas dimensoes de largura e altura. Estas dimensoes podem ser
obtidas a partir do proprio disigner grafico ou tambem, clicando com o botao direito sobre a imagem vista
pelo navegador para logo escolher propriedades sobre o menu que se desdobra.
O fato de explicitar em nosso codigo as dimensoes de nossas imagens ajuda ao navegador a
confeccionar a pagina da forma que nos desejamos inclusive antes das imagens serem baixadas.
Assim, se as dimensoes das imagens tiverem sido proporcionadas, durante o processo de carregamento,
o navegador reservara o espaco correspondente a cada imagem criando uma planificacao correta. O
usuario podera comecar a ler tranquilamente o texto sem que este se mova de um lado a outro cada vez
que se carregue uma imagem.
Alem desta utilidade, o alterar os valores destes atributos, e uma forma imediata de redimensionar nossa
imagem. Este tipo de utilidade nao e aconselhavel visto que, se o que pretendemos e aumentar o
tamanho, a perda da qualidade da imagem sera muito sensivel. Inversamente, se desejamos diminuir seu
tamanho, estaremos usando um arquivo maior do que o necessario para a imagem que estamos
mostrando, com o que aumentamos o tempo de descarregamento de nosso documento
desnecessariamente.
E importante insistir neste ponto ja que muitos estreantes tem o pessimo costume de criar graficos
pequenos redimensionando a imagem por meio desses atributos a partir de arquivos de tamanho
descomunal. Temos que pensar que o tamanho de uma imagem com umas dimensoes da metade nao se
reduz a metade, e sim, que e aproximadamente 4 vezes inferior.
Atributo border
Define o tamanho em pixels do quadro que rodeia a imagem.
Dessa forma, podemos re-enquadrar nossa imagem se desejamos. E particularmente util quando
desejamos eliminar a borda que aparece quando a imagem serve de link. Em tal caso teremos que
especificar border="0".
Atributos vspace e hspace
Serve para indicar o espaco livre, em pixels, que tem que ser colocado entre a imagem e outros
elementos que a rodeiam, como texto, outras imagens, etc.
Atributo lowsrc
Com este atributo podemos indicar um arquivo de baixa resolucao. Quando o navegador detecta que a
imagem tem este atributo, primeiro descarrega e mostra a imagem de baixa resolucao (que ocupa muito
pouco e que se transfere muito rapido). Posteriormente, descarrega e mostra a imagem de resolucao
adequada (assinalada com o atributo src, que se supoe que ocupara mais e que sera mais lenta de se
transferir).
Esta atributo esta em desuso, mesmo supondo uma vantagem consideravel para que o descarregamento
inicial se realize mais rapido e que um visitante possa ver uma amostra da imagem enquanto se
descarrega a imagem real.
Dica: Utilizar imagens como links
Isto quer dizer que uma imagem, assim como um texto, pode servir de link. Visto a estrutura
dos links podemos muito facilmente adivinhar o tipo de codigo necessario.
<a href="arquivo.html"><img src="imagem.gif"></a>
Exemplo prático
Sera obvio para os leitores, fazer agora uma pagina que contenha uma imagem varias vezes repetidas,
mas com diferentes atributos.
・ Uma das vezes que saia deve ser mostrada com seu tamanho original e com uma borda de 3
pixels.
・ Em outra ocasiao a imagem aparecera sem borda, com sua mesma altura e com uma largura
superior a original.
・ Tambem mostraremos a imagem sem borda, com sua mesma largura e com uma altura superior
a original.
・ Por ultimo, mostraremos a imagem com uma altura e largura maiores que as originais, mas
proporcionalmente igual que antes.
Vamos utilizar esta imagem para fazer o exercicio:
As dimensoes originais da imagem sao 28x21, o codigo fonte seria entao da seguinte forma:
<img src="img1.gif" width="28" height="21" alt="Tamanho original" border="3">
<br>
<br>
<img src="img1.gif" width="68" height="21" alt="Achatada" border="0">
<br>
<br>
<img src="img1.gif" width="28" height="51" alt="Alargada" border="0">
<br>
<br>
<img src="img1.gif" width="56" height="42" alt="Dobro grande" border="0">
Alinhamento de imagens com HTML
Vimos em seu momento o atributo align que nos permitia alinhar o texto a direita, esquerda ou no centro
de nossa pagina. Dissemos que este atributo nao era exclusivo da etiqueta
e sim, que podia ser encontrado em outro tipo de etiquetas.
Sendo assim, <img> e uma dessas etiquetas que aceitam este atributo, mesmo sendo , neste caso, o
funcionamento diferente.
Para alinhar uma imagem horizontalmente podemos fazer da mesma forma que o texto, ou seja,
utilizando align dentro de uma etiqueta <p> ou <div>. Neste caso, o que incluiremos dentro desta etiqueta
sera a imagem no lugar do texto:
Este codigo mostrara a imagem no centro.
Entretanto, ja dissemos que a etiqueta <img> pode aceitar o atributo align. Neste caso, a utilidade que lhe
damos e diferente da anterior.
O fato de utilizar o atributo align dentro da etiqueta <img> nos permite, no caso de dar os valores left ou
right, justificar a imagem do lado que desejamos uma vez que recheamos com texto o lado oposto. Dessa
forma, incorporamos nossas imagens dentro do texto de uma maneira simples.
Aqui se pode ver o tipo de codigo a criar para obter tal efeito:
<p>
<img src="imagem.gif" align="right">Texto tao extenso quanto quisermos que cubra a parte esquerda da
imagem. Continuo colocando texto para que se veja o efeito, Bla bla bla bla bla bla bla...
</p>
Ficaria assim:
Texto tao extenso quanto quisermos que cubra a parte esquerda da imagem. Continuo colocando texto
para que se veja o efeito, Bla bla bla bla bla bla bla...
<p>
<img src="imagen.gif" align="left">Texto tan extenso como queramos que cubrira la parte derecha de la
imagen. Sigo poniendo texto para que se vea el efecto, Bla bla bla bla bla bla bla...
</p>
Ficaria assim:
Texto tan extenso como queramos que cubrira la parte derecha de la imagen. Sigo poniendo texto para
que se vea el efecto, Bla bla bla bla bla bla bla...
Se em algum momento desejarmos preencher esse espaco lateral, podemos passar a uma zona livre
introduzindo uma quebra de linha <br> dentro do qual acrescentariamos um atributo: clear
Sendo entao, etiquetas do tipo:
<br clear="left">
Pulara verticalmente ate encontrar a lateral esquerdo livre.
<br clear="right">
Pulara verticalmente ate encontrar a lateral direita livre.
<br clear="all">
Pulara verticalmente ate encontrar ambas laterais livres.
Existe outro tipo de valores que pode adotar o atributo align dentro da etiqueta <img>. Isto e relativo ao
alinhamento vertical da imagem.
Supomos que escrevemos uma linha ao lado de nossa imagem. Esta linha pode ficar, por exemplo acima,
abaixo ou no meio da imagem. Ainda assim, pode que uma mesma linha tenhamos varias imagens de
alturas diferentes que podem ser alinhadas de distintas formas.
Estes valores adicionais sao:
Top
Ajusta a imagem a parte mais alta da linha. Isto quer dizer que, se existe uma imagem mais alta, ambas
imagens apresentarao a borda superior na mesma altura.
Bottom
Ajusta o baixo da imagem ao texto.
Absbottom
Colocara a borda inferior da imagem ao nivel do elemento mais baixo da linha.
Middle
Faz coincidir a base da linha de texto com o meio vertical da imagem.
Absmiddle
Ajusta a imagem ao meio absoluto da linha.
Estas explicacoes, que podem ser um pouco complicadas, serao mais facilmente assimiladas com um
pouco mais de pratica.
Falta explicar como introduzir debaixo da imagem um pe de foto ou uma explicacao. Para isso, teremos
que ver antes de mais nada as tabelas, nos proximos capitulos...
Formatos gráficos para páginas web
O componente grafico das paginas web tem muita importancia, e que o que faz com que estas seja
vistosas e o que nos permite aplicar nossa criatividade para fazer o design do site uma tarefa agradavel.
E tambem uma ferramenta para aproximar os sites ao mundo onde vivemos, entretanto, e tambem o
causador de graves erros nas paginas e fazer destas, em alguns casos, um martirio para o visitante.
As nocoes basicas para o uso de arquivos graficos sao simples, conhece-las, mesmo que seja
ligeiramente, nos ajudara a criar sites agradaveis e rapidos. Nao cometer erros no uso das imagens e
fundamental, mesmo que nao seja um designer e as imagens que utiliza sao feias, utilize-as bem e assim,
estara tornando mais agradavel a visitas as suas paginas.
Tipos de arquivos
Em Internet se utilizam principalmente dois tipos de arquivos graficos GIF e JPG, pensados
especialmente para otimizar o tamanho que ocupam em disco, ja que os arquivos pequenos se
transmitem mais rapidamente pela Rede.
O formato de arquivo GIF se usa para as imagens que tenham desenhos, enquanto que o formato JPG se
usa para as fotografias. Os dois comprimem as imagens para salva-las. A forma de comprimir a imagem
que utiliza cada formato e o que os faz ideais para um proposito ou outro.
Adicionalmente, pode-se usar um terceiro formato grafico nas paginas web, o PNG. Este formato nao tem
tanta aceitacao como o GIF ou o JPG, por varias razoes, entre elas: o desconhecimento do formato por
parte dos desenvolvedores, que as ferramentas habituais para tratar graficos (como por exemplo,
Photoshop) geralmente nao suportam, e que os navegadores antigos tambem tem problemas para
visualiza-las. Entretanto, o formato se comporta muito bem quanto a compreensao e a qualidade do
grafico conseguinte, pelo que seria util se chega a extender seu uso.
GIF
Alem se ser um arquivo ideal para as imagens que estao desenhadas, tem muitas outras caracteristicas
que sao importantes e uteis.
Compresión: E muito boa para desenhos, como ja foi dito. Inclusive pode ser interessante se a imagem e
muito pequena, mesmo que seja uma foto.
Transparência: E uma utilidade para definir certas partes do desenho como
transparentes. Desse modo, podemos colocar as imagens sobre distintos fundos sem
que se veja o quadrado onde esta es esta inscrito o desenho, vendo em troca a silhueta
do desenho em questao. Para criar um gif transparente devemos utilizar um programa
de desenho grafico, com o qual podemos indicar que cores do desenho queremos que
sejam transparentes. Geralmente, definimos a transparencia quando vamos salvar o
trafico.
Cores: Com este formato grafico podemos utilizar conjuntos de 256 colores ou menos. Este e um detalhe
muito importante, visto que quanto menos cores utilizarmos na imagem, em geral, menos ocupara o
arquivo. As vezes, mesmo utilizando menos cores em um grafico, este nao perde muita qualidade,
chegando a ser inapreciavel a vista. Em alguns programas podemos modificar a quantidade de cores ao
salvar o arquivo, em outros, fazemos enquanto criamos o grafico.
JPG
Vejamos agora quais sao as caracteristicas fundamentais do
formato JPG:
Compressão: Tal como dissemos anteriormente, sua gama de
compressao torna ideal este formato para salvar fotografias.
Alem disso, com JPG podemos definir a qualidade da imagem,
com qualidade baixa o arquivo ocupara menos, e vice-versa.
Transparência: Este formato nao tem possibilidade de criar areas transparentes. Se desejamos colocar
uma imagem com uma area que pareca transparente procederemos assim: com nosso programa de
desenho grafico faremos com que o fundo da imagem seja o mesmo que o da pagina onde queremos
coloca-la. Em muitos casos, os fundos da imagem e a pagina parecerao o mesmo.
Cores: JPG trabalha sempre com 16 milhoes de cores, ideal para fotografias.
Otimizar arquivos
Para que as imagens ocupem o menos possivel e se transfiram rapidamente pela Rede devemos
aprender a otimizar os arquivos graficos. Para isso, devemos fazer o seguinte:
Para os arquivos GIF: Reduziremos o numero de cores de nossa aquarela. Isto se faz com nosso editor
grafico, em muitos casos poderemos fazer ao salvar o arquivo.
Para os arquivos JPG: Ajustaremos a qualidade do arquivo quando estivermos salvando. Este formato
nos permite baixar muito a qualidade da imagem sem que esta perca muito em seu aspecto visual.
Parte desta
imagem e
transparente
Uma fotografia com formato JPG
Photoshop e uma ferramenta excelente para otimizar arquivos. Vendo varias copias
E imprescindivel dispor para otimizar a imagem de uma boa ferramenta que nos permita configurar estas
caracteristicas da imagem com liberdade e facilidade. Photoshop 5.5 ou 6 e um programa bastante
recomendavel, pois incorpora uma opcao que se chama "Salvar para Web" com a qual podemos definir as
cores do gif, a qualidade do JPG e outras opcoes em varias amostras. Assim, com todas as opcoes
configuraveis, vendo os resultados do tamanho do arquivo, podemos otimizar a imagem de uma maneira
precisa com os resultados que desejamos.
Tambem existem no mercado outros programas que nos permitem otimizar estas imagens de maneira
surpreendente. Uma vez que criamos a imagem, a passamos por estes programas e nos comprimem
ainda mais o arquivo, fazendo-lhe rapido de transferir e, portanto, mais otimizado para Internet. Ao ser
estas utilidades tao especializadas, os resultados costumam ser melhores que com os programas de
edicao grafica.
Exemplos de optimizadores gráficos:
- WebGraphics Optimizer
- ProJPG, GIF Imantion
E com versões On-line:
- JPG - GIF Crunchers
- GIF Wizard
As cores e HTML
As cores possuem um papel muito importante na composicao de webs. Sao
indicadas em valores RGB, ou seja, que para conseguir uma cor qualquer misturaremos
quantidades de Vermelho, Verde e Azul.
Os valores RBG sao indicados em numeracao hexadecimal, em base 16. (Os digitos
podem crescer ate 16). Como nao existem tantos digitos numericos se utilizam as letras
da A a F.
0=0 4=4 8=8 C=12
1=1 5=5 9=9 D=13
2=2 6=6 A=10 E=14
3=3 7=7 B=11 F=15
Para conseguir uma cor, misturaremos valores desta maneira:
RRGGBB
Manual de Programação
Onde cada valor pode crescer desde 00 até FF.
Exemplo: Como se mudaria a fonte para escrever em vermelho:
<font color="#FF0000">Vermelho</font>
Ao Atributo cor lhe damos um valor RGB em formato hexadecimal. O caractere # se coloca ao principio
da expressao.
Outras cores:
Laranja #FF8000
Verde turquesa #339966
Azul escuro #000080
Cores compatíveis em todos os sistemas
Como as paginas web tem que ser vistas por todos os usuarios, e os sistemas que utilizam para entrar
sao distintos, ha que utilizar cores compativeis com a paleta de todos eles.
A forma de conseguir isto e limitando nossas cores aos que se podem conseguir utilizando a seguinte
norma:
Utilizaremos sempre
podemos escolher a mais adequada.
Tabela de cor
estes valores:
00
33
66
99
CC
FF
Exemplos: #3366FF #FF9900 #666666
Consegue-se as seguintes cores:
#000000 #000033 #000066 #000099 #0000CC #0000FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF
#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF
#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF
#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF
#CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF
#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF
#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF
#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF
Nenhum comentário:
Postar um comentário