Formatando a página
Para dar vida a nossa página, nós podemos dar cor ao fundo, cor as letras, inserir uma imagem de fundo e alterar as margens. Tudo isso é feito alterando as propriedades da tag <body>, que como vimos anteriormente é a tag que define o "corpo" da nossa página ok?
Propriedades?
Isso mesmo, para cada "tag" podemos definir propriedades com valores diferentes, a maneira de fazer isso é simples, veja o exemplo:
<tag propriedade1="valor1" propriedade2="valor2">
Basta colocar o nome da propriedade dentro da tag com o valor entre aspas. Simples né?
Exemplos para formatar o corpo da página:
Alterando a cor de fundo para azul:
<body bgcolor="#0000cc">
PS: Não se esqueça de conferir a tabela de cores na apostila do curso!
Inserindo uma imagem de fundo:
<body background="meufundo.jpg">
PS: a imagem tem que estar na mesma pasta da sua página neste exemplo.
Alterando a margem esquerda do texto em nossa página:
<body leftmargin="50">
Este número está em pixels.
Alterando a cor da letra de nossa página para branco:
<body text="#FFFFFF">
Podemos usar tudo junto:
<body text="#FFFFFF" bgcolor="#0000cc" background="meufundo.jpg" leftmargin="50">
Tags para a formatação de textos:
Tag “p”: cria um novo parágrafo. Exemplo:
<p>Qualquer tecnologia suficientemente avançada é indistinguível
de magia.</p>
Tag br: quebra a linha sem alterar o parágrafo, exemplo:
<p>
Qualquer tecnologia suficientemente avançada é indistinguível de
magia
<br/>
Arthur C. Clarke
</p>
Tags “h“: fornecem um tamanho de fonte variável para títulos de parágrafos, exemplo:
<h1>Tamanho 1, muito grande</h1>
<h2>Tamanho 2, grande</h2>
<h3>Tamanho 3, tamanho normal</h3>
<h4>Tamanho 4, razoável</h4>
<h5>Tamanho 5, pequeno</h5>
<h6>Tamanho 6, bem pequeno</h6>
Tag “b”: Negrita o texto, exemplo:
<p>Texto normal, com texto <b>Negrito</b></p>
Resultado: Texto normal, com texto Negrito
Tag “i”: Torna o texto itálico, exemplo:
<p>Texto normal, com texto <i>Itálico</i></p>
Resultado: Texto normal, com texto Itálico
Tag “u”: Torna o texto sublinhado, exemplo:
<p>Texto normal, com texto <u>Sublinhado</u></p>
Resultado: Texto normal, com texto Sublinhado
Tag font: Esta tag permite escolher o nome da fonte (letra), tamanho e cor da letra. Alguns
exemplos:
<font face=”Verdana” size=3 color=#0000ff>Texto azul</font>
Resulta: Texto azul
<font face=”Arial” size=2 color=#00ff00>Aqui um texto verde em
Arial</font>
Resulta: Aqui um texto verde em Arial
<font face=”Verdana” size=2 color=#ff0000>E aqui um texto
vermelho</font>
Resulta: E aqui um texto vermelho
Não se esqueçam de conferir todos estes exemplos na apostila e praticar bastante variando os detalhes da página e a formatação dos textos!
Nenhum comentário:
Postar um comentário