|
Curso de Webdesign
Material
de Curso de Webdesign Gratuito |
|
DEFININDO O CORPO DA PÁGINA
Você teve Ter observado em algumas sites, que as cores de fundo da página são bem
diversificados, ou em outros casos, uma imagem é adicionado no fundo da página, como
uma marca d’água. Então, todas estas definições são feitas dentro do tag <BODY>.
Vamos praticar?
Para entender isto, digite a listagem 1.9, e salve como exemplo8.html,
Listagem 1.9
<html>
<head><title>Página com Fundo Colorido</title>
</head>
<body bgcolor=beige text=blue>
<h3>Definfo cor de fundo para a página</h3>
</body>
</html>
Fim da Listagem 1.9
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço
digite C:\Meus documentos\exemplo8.html. O resultado, será uma página como fundo
de cor bege e o texto na cor azul. Certo?. Veja figura 1.10
|
|
Observação: Você poderá adicionar a cor que desejar, tanto para o fundo quanto para o
texto. Os dois só não podem ser da mesma cor!(risos). Para escolher a cor, consulte na
Tabelade Cores (figura 1.6)
Como comentei linhas acima, você também pode colocar um imagem no fundo da
página. Mas, antes de fazer o exercício, observe as seguintes recomendações:
- As imagens suportadas são do tipo GIF e JPG. Na dúvida sobre imagens aconselho,
consultar um livro de PhotoShop 5.0 ou outra versão.
- As imagens devem estar na mesma pasta, onde estará o documento HTML, ou numa
subpasta.
Exemplo: Imagine que você tem uma pasta chamada projeto e nessa pasta você
armazena todos os documentos HTML referente a página que por hora desenvolve.
Certo até aí? Então, basta que os arquivos de imagens, também fiquem na mesma
pasta projeto, assim não terá problema na hora de visualizar no Browser.
- Outro exemplo que posso citar é o seguinte. Imagine agora outra situação:
Você agora resolveu organizar ainda mais o desenvolvimento de sua página.
Criou uma pasta projeto e dentro armazenou todos os arquivos HTML. Certo?
Depois resolveu criar uma subpasta dentro da pasta projeto chamada imagens.
Muito bem garoto! Excelente atitude e nela você colocou todas as imagens. Então,
tudo está correto, mas não esqueça de na hora de especificar a imagem que deseja
inserir no fundo dentro do tag <BODY>, o caminho, ou seja, o nome da subpasta.
Entendeu? Não se preocupe você fará exemplo para as duas situações, eu prometo!
Muito bem, caro web designer, entendido tudo isso, vamos praticar.
Para entender isto, digite a listagem 1.10, e salve como exemplo9.html,
Listagem 1.10
<html>
<head><title>Inserindo Imagem no Fundo da Página</title>
</head>
<body background=parede.gif bgproperties=fixed>
<h1 align=center>Editora Érica</h1>
<font size=4 face=verdana>
<ul>
<li>Livros
<li>Dicas
<li>Volte Sempre
</ul>
</font>
</body>
</html>
Fim da Listagem 1.10
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço
digite C:\Meus documentos\exemplo9.html. Veja figura 1.11
Observação: Caso a imagem estivesse em uma subpasta bastaria apontar o caminho para ela no tag.
Veja o exemplo:
Exemplo: <body background=/imagens/parede.gif bgproperties=fixed>
Onde:
imagens= é o nome da subpasta
parede.gif = o nome do arquivo.
CONCEITO DOS TAGS USADOS NESTE EXERCÍCIO
| TAG |
O QUE FAZ |
| <body> |
Marca o início e o fim do corpo da página
Atributos
Bgcolor = define a cor do fundo da página
Text = define a cor do texto padrão da página
Background = permite inserir uma imagem como fundo da página
Bgproperties = fixa a imagem no fundo da página quando a página é
rolada, criando um efeito de marca d’água. |
Exercício 7 – IMAGENS
Muito bem, você está evoluindo a cada exercício. Neste exemplo exercitaremos os tags
que permitem a inserção de imagens em sua home page.
Antes de iniciar o estudo sobre imagens, quero lembrar-lhe que uma imagem só poderá
ser exibida no browser, se ela estiver na mesma pasta, ou então, você deverá apontar o
caminho onde está, conforme o exemplo de número 6. Lembra?
Outro fato é que, você poderá escolher as imagens que desejar, basta substituir o nome
da imagem que está no exemplo pela a que você escolheu.
Tudo certinho agora? Vamos em frente!
Para entender isto, digite a listagem 1.11, e salve como exemplo10.html,
Listagem 1.11
<html>
<head><title>Imagens</title>
</head>
<body>
<h1>Agora estamos trabalhando com imagens</h1>
<h3> Esta é sua primeira imagem. Sorria?</h3>
<img src=fig.jpg align=left>Veja se consegue enxergar,
as seguintes imagens?<br>
O rosto de um velho<br>
Uma moça<br>
Um cachorro<br>
Um outro velho<br>
Um pássaro<br>
E algo mais<br>
</body>
</html>
Fim da Listagem 1.11
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço
digite C:\Meus documentos\exemplo10.html. Veja figura 1.12
É isso aí, não se preocupe se você não conseguiu enxergar todas as imagens, o mais
importante para mim é que você tenha entendido a aula. (risos!!!)
Vamos para um exemplo? Desta vez, trabalharemos com o alinhamento da imagem e do
texto.
Para entender isto, digite a listagem 1.12, e salve como exemplo11.html
Listagem 1.12
<html>
<head><title>Imagens</title>
</head>
<body>
Note neste exemplo que a imagem <img
src=fig2.jpg> está entre o texto<br>
<img src=fig2.jpg align=top>Imagem está à
esquerda e o texto no topo<br>
<img src=fig2.jpg align=middle>Imagem está à
esquerda e o texto no centro<br>
<img src=fig2.jpg align=left>Neste exemplo a
imagem ficou alinhada è esquerda,
permitindo que o texto ficasse todo à direita ao
redor da imagem. Utilize este recurso toda
vez que desejar que o texto fique ao lado da
imagem <br>
</body>
</html>
Fim da Listagem 1.12
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço
digite C:\Meus documentos\exemplo11.html. Veja figura 1.13
|
