AULA 3: TAGS e ATRIBUTOS
Nesta aula vamos aprender alguns atributos para os tags <body> <p> e <font>
- mudança de côr de fundo
- mudança de alinhamento de texto
- mudança de côr do texto
- mudança de tipo de letra
ATRIBUTOS DE TAGS:
Todos os tags cumprem uma função dentro do html, mas essa função pode ser
moldada de acordo com o que pretender deles. Já falámos aqui em alguns (poucos)
tags mas não mencionámos ainda que os podemos vestir de maneiras diferentes,
como por exemplo o tag 'body'. Lembra-se? Foi logo o terceiro tag que aprendeu.
Este tag, dissemos nós que servia para indicar onde está a parte visível do html.
Dissemos a verdade mas não toda: este tag também pode dizer muito acerca dessa
tal parte visível.
Até aqui fez uma página branca (ou cinzenta dependendo do browser que usou para
a ver). O tag body pode indicar que côr de fundo a página tem. Isto deverá ser
sempre feito mesmo que queira uma página branca, pois se a côr de fundo não
estiver definida, cada visitante vai vê-la com a côr que definiu no browser. O
Netscape 3 vê as páginas com fundo cinzento, o Internet Explorer e o Netscape 4
têm o branco como côr standard.
Mudar a côr de fundo:
O atributo a dar ao body para definir a côr de fundo é o bgcolor, usamos este
atributo da seguinte forma:
<BODY bgcolor="Côr da página">
As côres são definidas com o seu código hexadécimal correspondente. Não precisa
de saber estes códigos, existem programas que lhe traduzem a côr desejada pelo
código correspondente.
(Visite a secção ferramentas)
Bem, posso já adiantar que o código correspondente ao amarelo é: #FFFF00
Como experiência escreva, e continuando o html já feito até este ponto:
---------------------------------------------
<html>
<title> A minha primeira página </title>
<BODY bgcolor="#FFFF00">
<center><h1>A minha primeira página</h1></center>
Olá, esta é a minha primeira página na Internet. Ainda estou a aprender como
estas coisas se fazem e agora estou a aprender a inserir texto.
Cá vai um parágrafo:<p>
Isto não é nada complicado, as regras básicas repetem-se e é sempre a mesma
coisa.
Cá vai um line Break:<br>
Por exemplo, já sei que se quiser este pedaço de texto centrado, só preciso de
pegar no fim do tag 'center' que está lá em cima e colocá-lo no fim deste texto.
Assim fica tudo centrado, já que está tudo dentro do tag.
</body>
</html>
---------------------------------------------
Argh! A página está amarela! Escolhemos esta côr porque se comporta bem com o
preto das letras e não incomoda a leitura. Enfim, não está assim tão feia!
O parágrafo.
Tal como o body, também aquele parágrafo que inseriu pode ter atributos.
Atributos estes que dizem respeito ao seu alinhamento na página. Aprendamos
então o atributo align.
O align pode ter 3 características: left, right ou center. Se não tiver
problemas com a língua inglesa, perceberá que left significa esquerda, right
direita e center centro. Aplicando este atributo obtemos:
<p align="left">
ou
<p align="right">
ou
<p align="center">
Quando o tag <p> tem um atributo como este, temos que o fechar obrigatóriamente
com o correspondente </p>
assim:
<p align="right">Este é um texto alinhado à direita</p>
Mas nesta parte já está À esquerda outra vez.
Pegue no seu trabalho e modifique-o para:
-----------------------------------
<html>
<title> A minha primeira página </title>
<BODY bgcolor="#FFFF00">
<center><h1>A minha primeira página</h1></center>
<p align="right">Olá, esta é a minha primeira página na Internet.
<br>
Ainda estou a aprender como estas coisas se fazem e agora estou a aprender a
inserir texto.
Cá vai um parágrafo:</p>
Isto não é nada complicado, as regras básicas repetem-se e é sempre a mesma
coisa.
Cá vai um line Break:<br>
Por exemplo, já sei que se quiser este pedaço de texto centrado, só preciso de
pegar no fim do tag 'center' que está lá em cima e colocá-lo no fim deste texto.
Assim fica tudo centrado, já que está tudo dentro do tag.
</body>
</html>
------------------------------------
Inserimos um <br> no meio da primeira frase para a quebrar e acentuar o texto
alinhado
à direita.
O TEXTO:
Continuando a falar de atributos de tags, vamos mudar o texto. Para isso teremos
que aprender um tag novo, o <font>
O <font> permite mudar a côr do seu texto, assim como fizemos com o <body>.
O <font> não prescinde da terminação: </font>
<font color="#008000">este texto está verde</font>
Nada mais simples, nem vamos dar o exemplo no seu html. Escolha uma frase que
queira destacar no seu texto e aplique o tag <font>.
<font color="#008000">
Para o font, podemos ter também o atributo
size que pode ir do 1 até ao 7, assim:
<font size="3">Letras com tamanho 3</font>
Terá a frase escrita com o tamanho 3.
Os atributos podem ser ser acumulados dentro de um tag. Portanto, as nossas
letras verdes com tamanho 3 terão o seguinte código:
<font size="3" color="#008000">Letras com tamanho 3 e verdes</font>
Que é exactamente igual a:
<font color="#008000" size="3">Letras com tamanho 3 e verdes</font>
Os atributos não seguem uma ordem rígida e podem ser acumulados dentro do mesmo
tag. Vamos acumular mais um, o face.
O face indica que fonte esse texto terá.
<font face="Arial" size="3" color="#008000">
Letras com tamanho 3 e verdes e com fonte arial
</font>
Aqui será necessário ter em atenção o seguinte:
Uma página com uma fonte que não existe no seu computador aparecerá com a fonte
standard (aquela que vê se não atribuir nenhuma). Tenha portanto cuidado com a
fonte que escolhe, convém que os visitantes a tenham instalada. Se o visitante
não tiver a fonte instalada, pode sempre dar alternativas por ordem de
importância separadas com vírgulas:
<font face="Arial, Helvetica, Verdana" size="3" color="#008000">
Letras com tamanho 3 e verdes e com fonte arial
</font>
O visitante que não tem a fonte Arial vai ver a fonte Helvetica (os Macintosh
não tem Arial, tem Helvetica que é equivalente).
O Visitante que não tem nenhuma dessas fontes irá ver a fonte Verdana e assim
sucessivamente. Em princípio, e neste caso, arial e helvetica serão suficientes
já que é muito difícil haver algum computador sem nenhuma delas instalada.
Até aqui você deverá saber construir uma página básica apenas com texto,
escolher os tamanhos, côres e tipos de letra a usar e também escolher a côr de
fundo para a sua página.
Parta da página que nesta altura já deverá ter começado e aplique estes novos
conhecimentos, brinque com os tamanhos, côres e alinhamentos. Este poderá ser um
optimo exercício de arranjo do texto e legibilidade. Algumas côres não se
conjugam bem umas com as outras. Escolha quais as melhores côres para usar como
fundo/texto.
Comentários
Anónimo (não verificado)
Qua, 2011-01-05 22:25
Ligação permanente
Re: AULA 3: TAGS e ATRIBUTOS
Goataria de receber a apostila do curso, como faço?
gostei muito obg...