3.
6 Cores de texto e padrões de fundo
Através da manipulação dos parâmetros da marcação <BODY>, é possível
de nir cores para o fundo da página, para o texto e para os links de acordo
com a preferência do programador. Também é possível inserir imagens como
plano de fundo, porém isto será tópico de um de nossos próximos capítulos.
20
Em todos os parâmetros do comando BODY, a cor deve ser de nida da
mesma forma que no parâmetro COLOR do comando FONT, ou seja, pelo
seu nome ou padrão RGB.
Os principais parâmetros do comando BODY utilizados para alterar cores
de texto e fundo de uma página são:
BGCOLOR=cor- É a cor de fundo, onde o padrão é cinza ou branco,
dependendo do Browser.
TEXT= cor- É a cor do texto, sendo que o padrão é preto.
LINK=cor- É a cor dos links, sendo que o padrão é azul.
VLINK=cor- É a cor dos links já visitados, onde o padrão é vermelho
púrpuro.
Assim, poderíamos con gurar as cores de uma página complementando a
marcação <BODY>daseguinteforma: <BODYBGCOLOR=cor TEXT=cor
LINK=cor VLINK=cor> [Conteúdo da página] </BODY>
Deve-se ressaltar que o programador precisa ter cuidado ao escolher as
cores para que não atrapalhem a leitura da informação contida na página.
Modi cações nas cores dos links também podem vir a confundir o usuário,
portanto, se quiser alterá-las, tome cuidado para não inverter o padrão ou
escolher cores iguais às de texto ou fundo.
Modi que o exemplo `[Link]' conforme mostrado abaixo.
<HTML>
<HEAD>
<TITLE> Cores de texto e fundo </TITLE>
</HEAD>
<BODY BGCOLOR=black>
<FONT SIZE=7 COLOR=0C01BD>P</FONT>
<FONT SIZE=6 COLOR=655E7D>e</FONT>
<FONT SIZE=5 COLOR=A39A4B>t</FONT>
<FONT SIZE=4 COLOR=EEF303>-</FONT>
<FONT SIZE=4 COLOR=EEF303>T</FONT>
<FONT SIZE=5 COLOR=A39A4B>e</FONT>
<FONT SIZE=6 COLOR=655E7D>l</FONT>
<FONT SIZE=7 COLOR=0C01BD>e</FONT>
UFF
<P>
<A HREF= >link</A> com cor modi cada
</BODY>
</HTML>
PET-TELE)))21
Deve-se observar que a tag <A> utilizada no exemplo acima será de nida
no Capítulo 5.
22
Capítulo 4
Imagens
De modo geral, para que seja possível inserir uma imagem em uma página
HTML, ela deve estar disponível nos formatos GIF ou JPG. Estes forma
tos são aceitos por qualquer Browser, além de possibilitar a compactação dos
arquivos de imagem, permitindo o carregamento mais rápido da página. Cer
tos Browsers conseguem exibir imagens de outros formatos, como BMP, por
exemplo. Porém, tendo em vista os aspectos de universalidade e e ciência,
os formatos GIF e JPG continuam sendo os mais recomendados.
Você pode obter uma imagem através de páginas na Internet, CD-ROMs
de imagens ou processos de digitalização. Neste último caso, é provável que
se precise utilizar programas de tratamento de imagens, tais como PaintShop
Pro ou PhotoPaint para realizar uma conversão de formatos.
É importante ressaltar que algumas imagens encontradas em páginas da
Web podem estar protegidas por direitos autorais. Portanto, antes de colocar
em sua página uma gura interessante obtida em algum site, procure checar
se ele faz alguma restrição quanto à utilização de suas imagens.
4.1 O marcador IMG
O marcador IMG insere uma imagem no corpo do documento.
Seus principais parâmetros são:
SRC= nome ou URL do arquivo- Nome ou endereço (URL) da ima
gem a ser exibida. Este parâmetro é obrigatório.
23
24
ALT=Texto- Exibe o texto especi cado quando o Browser não encontra
a imagem ou quando o cursor passa por cima da gura.
ALIGN= Top | Middle | Bottom- Especi ca o alinhamento da ima
gem relativamente à linha de texto onde é exibida.
ALIGN= Left | Right- Especi ca o alinhamento da imagem relativa
mente às bordas laterais da janela.
ISMAP-Determina que a gura é um mapa de imagem. Trataremos deste
assunto com mais detalhes em um de nossos próximos capítulos.
WIDTH= "número | número%"- Especi ca a largura de exibição da
imagem em pixels ou em relação à largura da janela, independente
mente de seu tamanho original. Quando se altera a dimensão horizon
tal da imagem, a dimensão vertical é modi cada automaticamente para
que a proporção original seja mantida.
HEIGHT= número | número%- Especi ca a altura de exibição da
imagem em pixels ou em relação à largura da janela, independente
mente de seu tamanho original. Quando se altera a dimensão vertical
da imagem, a dimensão horizontal é modi cada automaticamente para
que a proporção original seja mantida. Se quisermos forçar uma dis
torção na proporção original da imagem, temos que usar os parâmetros
WIDTH e HEIGHT simultaneamente.
BORDER= número-Especi ca, em pixels, a largura da borda da ima
gem. O valor zero remove a borda.
VSPACE=número- Determina, em pixels, o espaço que deve ser dei
xado em branco na parte de cima e na parte de baixo da imagem.
HSPACE=número- Determina, em pixels, o espaço que deve ser dei
xado em branco nas laterais da imagem.
Sintaxe básica: <IMG SRC= nome ou URL do arquivo>.
Sintaxe completa: <IMG SRC= nomeouURLdoarquivoWIDTH=número
HEIGHT=número BORDER=número ALT=Texto
VSPACE=número HSPACE=número ALIGN=Top | Middle | Bottom |
Left | Right>.
UFF
4.1.1 Inserindo imagens do mesmo diretório
PET-TELE)))25
Se a imagem e o documento HTML que a exibirá estiverem no mesmo dire
tório, basta especi car o nome completo da imagem no parâmetro SRC do
comando IMG.
Sintaxe básica: <IMG SRC=nome da imagem>.
Digite o exemplo abaixo salvando-o como `[Link]'. Para que ele
funcione, é necessário que você escolha uma imagem qualquer e a salve com
o nome de `[Link]' no mesmo diretório do documento.
<HTML>
<HEAD>
<TITLE> Imagens 1- Inserção de imagens </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Inserindo imagens do mesmo diretório </H1>
<BR>
<IMG SRC=[Link]>
</CENTER>
</BODY>
</HTML>
4.1.2 Inserindo imagens de diretórios diferentes
Se a imagem e o documento HTML que a exibirá estiverem em diretórios
diferentes, o programador precisará especi car o caminho relativo para a
imagem a partir do documento corrente, no parâmetro SRC do comando
[Link] sempreassumeodiretório atual como o inicial para procurar
um arquivo especi cado.
Para especi car uma imagem que esteja em um diretório abaixo do diretó
rio atual, basta utilizar a sintaxe: <IMG SRC=Diretório/nome do arquivo>.
Por outro lado, se o diretório onde se encontra a imagem estiver situado
acima do diretório atual, a sintaxe utilizada será: <IMG SRC=../nome do
arquivo>.
Portanto, o símbolo `../' corresponde à passagem para uma nível superior
numa árvore de diretórios e o símbolo `/' corresponde a uma passagem para
um nível inferior. Utilizando estes símbolos, você poderá incluir em uma
página um arquivo qualquer de imagem existente no micro.
26
Observe os exemplos de sintaxes:
<IMG SRC=Dir1/Dir2/[Link]>- Esta sintaxe insere no docu
mento a imagem `[Link]', que está salva no diretório `Dir2', abaixo do
diretório `Dir1', que por sua vez encontra-se abaixo do diretório atual.
<IMGSRC=../../../[Link]>- Esta sintaxe insere no documento a
imagem `[Link]', que está salva no terceiro diretório acima do diretório
corrente.
<IMG SRC=../../Dir3/[Link]>- Esta sintaxe insere no docu
mento a imagem `[Link]', que está salva no diretório `Dir3', abaixo
do segundo diretório acima do diretório corrente.
Modi que o exemplo `[Link]' como mostrado abaixo. Para que o
código funcione, você deverá escolher uma imagem qualquer e salvá-la como
`[Link]' no diretório imediatamente acima do diretório atual. Salve
também outra imagem como `[Link]' numa pasta do diretório atual
chamada `Subdir'. Lembre-se que o diretório atual será aquele que contém o
documento `[Link]'.
<HTML>
<HEAD>
<TITLE> Imagens 1- Inserção de imagens </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Inserindo imagens do mesmo diretório </H1>
<BR>
<IMG SRC=[Link]>
<P>
<H1> Inserindo imagens de outros diretórios </H1>
<P>
<H2> Diretório acima do diretório atual </H2>
<BR>
<IMG SRC=../[Link] >
<P>
<H2> Diretório abaixo do diretório atual </H2>
<BR