Nesse post veremos que definindo parâmetros para as Tags nós conseguimos alterar as características visuais das páginas e de seu conteúdo como: cor de fundo, imagem de fundo, cores dos textos, alinhamentos dos textos, entre várias outras coisas.
Para entender esse post, é necessário conhecer a estrutura básica de um Documento HTML. Se você não conhece, acesse o post com o assunto: Introdução ao HTML.
Voltando, os parâmetros são instruções e valores posicionados logo após a abertura das Tags. Normalmente, são formados pelo par (parâmetro=valor). A estrutura é a seguinte:
<tag parâmetro="valor">
Conteúdo
</tag> Nota 1: Perceba que o fechamento da Tag (</tag>) permanece intacto.
Se você quiser definir mais de um parâmetro para a mesma Tag, basta separar os mesmos por espaço:
<tag parâmetro1="valor1" parâmetro2="valor2" parâmetro3="valor3">
Vamos ver alguns exemplos para entender na prática como isso funciona.Conteúdo
</tag> Parâmetros da Tag <body>
Alterar Cor de Fundo da Página
Para alterar a cor de fundo da página, utilizamos o parâmetro bgcolor da Tag <body>. Os valores podem ser nomes de cores em inglês.
No exemplo abaixo, criamos uma página com o fundo amarelo:
<html>
Nota 2: Existem diversos outros nomes de cores em inglês que podemos usar como: “black”, “white”, “blue”, “green”, “red”, “lightgreen”, “lightblue”, “lightyellow”, “skyblue”, “darkblue”, entre outros. Em um próximo post você verá que temos mais de 16 milhões opções se utilizarmos as Cores RGB.<head>
<title>Alterando a cor de fundo da página</title>
</head><body bgcolor="yellow">
</html><p>Observe que a cor de fundo da página agora é amarela.</p>
</body>Alterar Cor do Texto da Página
Já para mudar a cor das fontes, usamos o parâmetro text. No exemplo abaixo, a página esta com o fundo amarelo e o texto azul escuro:
<html>
Nota 3: Não importa a ordem que você coloca os parâmetros. Se você alterar a Tag <body> conforme abaixo, o resultado será o mesmo:<head>
<title>Alterando a cor do texto da página</title>
</head><body bgcolor="yellow" text="darkblue">
</html><p>Observe que a cor do texto da página agora azul escuro.</p>
</body><body text="darkblue" bgcolor="yellow">
Adicionando Imagem de Fundo
É muito fácil adicionar uma imagem de fundo á página. Para isso, basta ter um arquivo nos formatos ‘.gif’, ‘.jpg’, ‘.png’ ou ‘.bmp’ e fazer referência a ele dentro do Código HTML utilizando o parâmetro background.
No exemplo abaixo, temos um arquivo chamado “imagem.jpg” e consideramos que ele está localizado na mesma pasta que o nosso arquivo HTML:
<html>
Nota 4: O exemplo acima só funciona se o arquivo “imagem.jpg” estiver no mesmo diretório que a Página HTML. Outra coisa que nós poderíamos fazer é definir o endereço completo como:<head>
<title>Adicionando uma Imagem de Fundo</title>
</head><body background="imagem.jpg">
</html><p>Agora nossa página possui uma imagem de fundo.</p>
</body><body background="c:\estudos\html\imagem.jpg">
ou<body background="http://www.nomedosite.com.br/imagem.jpg">
Em um post futuro, explicarei outras formas de informar os locais dos arquivos.Nota 5: Em todos os exemplos acima não existe a necessidade de colocar os valores dos parâmetros entre aspas. Precisamos fazer isso apenas quando os valores possuem espaços, ou seja, se o nome do arquivo de imagem do exemplo anterior fosse: teste de imagem.jpg, aí sim, teríamos que colocá-lo entre aspas obrigatoriamente.
Outros parâmetros da Tag <body>
| Parâmetro | Descrição | Observações |
|---|---|---|
| link | Cor dos links | Depois de ler o post Criando Links em Páginas HTML você poderá testar esses parâmetros. |
| vlink | Cor dos links visitados | |
| alink | Cor dos links ativos |
Definindo Alinhamento de Textos
É possível aplicar os alinhamentos: à esquerda (left), centralizado (center), à direita (right) e justificado (justify) utilizando a propriedade align da Tag <p>. No código abaixo por exemplo, o texto será posicionado à direita:
<html>
<head>
<title>Alinhando Texto à direita</title>
</head><body>
</html><p align="right">Veja o texto alinhado à direita.</p>
</body>Parâmetros da Tag <hr>
Podemos definir parâmetros também para as Tags sem Conteúdo. Na Tag <hr> por exemplo (serve para criar uma linha horizontal), vamos definir a cor e a largura.
Se você não sabe como é a estrutura das Tags vazias, aconselho que você acesse o post Tags Vazias, que explica o assunto.
Definindo a cor da linha
O código abaixo define que os dois parágrafos serão divididos por uma linha de cor Vermelha utilizando o parâmetro color na Tag <hr>:
<html>
<head>
<title>Cor da Linha</title>
</head><body>
</html><p>Propriedades da Tag HR.</p>
<hr color="red" />
<p>Repare que a cor da Linha é Vermelha.</p>
</body><hr color="red" />
<p>Repare que a cor da Linha é Vermelha.</p>
Definindo a largura da linha
width. O exemplo abaixo é uma modificação do código anterior que coloca a linha com 500 pixels de largura:
<html>
<head>
<title>Largura da Linha</title>
</head><body>
</html><p>Propriedades da Tag HR.</p>
<hr color="red" width="500" />
<p>Repare que a linha não é mais tão larga.</p>
</body><hr color="red" width="500" />
<p>Repare que a linha não é mais tão larga.</p>
Nota 7: É possível também definir a largura da linha em porcentagem. O código abaixo por exemplo, coloca a linha com 70% de largura em relação à largura da página:
<hr width="70%" />
Outros parâmetros da Tag <hr>
| Parâmetro | Descrição | Observações |
|---|---|---|
| size | Altura da Linha | O valor pode ser em pixels ou porcentagem |
| align | Alinhamento da Linha | Valores possíveis: “left”, “center” e “right” |
| noshade | Exibe a linha com uma cor sólida | Exemplo: <hr noshade /> |
Leia mais:
- Saiba como Adicionar Títulos às Páginas HTML;
- Aprenda a Exibir Imagens em Páginas HTML;
- Veja como Inserir Links em Páginas HTML;
- Entenda como Criar Tabelas em Páginas HTML;
- Use as Cores RGB e tenha mais de 16 milhôes de opções;
Nenhum comentário:
Postar um comentário
O que você achou do post? Faça um comentário.