AULA 3: TAGS e ATRIBUTOS

Separadores primários


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

Goataria de receber a apostila do curso, como faço?
gostei muito obg...


Faça um donativo!

Faça um donativo!

Agora é mais fácil com Paypal!

Com o paypal.me pode contribuir para o site em qualquer moeda e em qualquer valor com a segurança desta plataforma.

Clique aqui para ajudar com o que quiser, com o que poder.