Aprofundando mais seus conhecimentos nessa nossa quinta aula.
O elemento Font
Um dos recursos de tratamento do texto mais interessante da linguagem HTML é a possibilidade de alterar o tamanho, a cor e o tipo de fonte do texto. O elemento responsável por isso é o <font>.
Atributos para Font
Face = Este atributo permite que seja escolhida uma fonte diferente para o texto. Podem ser especificadas várias fontes de maneira que, se o sistema não possuir a primeira fonte, a segunda é carregada e assim por diante. A fonte padrão é o Times New Roman e as fontes mais comuns que estão presentes na maioria dos microcomputadores são: Arial e Script.
Size = Este atributo especifica o tamanho da fonte utilizada. Os valores permitidos vão de 1, o menor tamanho, até 7, o maior.
Color = Este atributo especifica a cor do texto. O seu valor pode ser especificado em hexadecimal, RGB ou através de um nome predefinido de cores.
Importante: Se os atributos não forem especificados, a página assume valores padrão, que geralmente são:
* Face = Times New Roman
* Size = 3
* Color = black
Estilos de Texto
Assim como no editor de textos, você pode criar uma série de efeitos no texto, alterando a forma ou o tipo de fonte. Estes elementos que modificam ou criam o estilo do texto são do tipo "liga-desliga", ou seja, precisam ser especificados em pares, marcando o início e o fim do texto que sofrerá a formatação.
O elemento H*
Uma maneira muito usada para alterar o tamanho da letra e aplicar um efeito como negrito em um texto é o uso da tag <h*>, onde o asterisco é substituído por um número que vai do 1 ao 6, e que aplicam um tamanho de fonte diferenciado para o texto que envolverem. Além do tamanho diferenciado, a tag <h*> insere uma linha em branco antes e depois da linha que contém a tag. Elas são perfeitas para criar títulos e iniciar seções dentro de uma página. A tag <h1> possui o maior tamanho, enquanto a tag <h6> possui o menor tamanho de fonte.
Como padrão, um cabeçalho gerado pelo comando <h*> é sempre posicionado do lado esquerdo da linha.
Atributo para H*
Align = Ajusta o cabeçalho à direita, à esquerda, justificado ou centralizado, de acordo com os parâmetros right, left, justify e center, respectivamente.
Caracteres Especiais
Efeito
|
Elemento
|
| Negrito | <b> texto </b> |
| Itálico | <i> texto </i> |
| Texto Sublinhado | <u> texto </u> |
| Sobrescrito | <sup> texto </sup> |
| Subscrito | <sub> texto </sub> |
| Fonte Grande | <big> texto </big> |
| Fonte Pequena | <small> texto </small> |
| Texto Riscado | <strike> texto </strike> |
| Fonte Monoespaçada | <tt> texto </tt> |
O elemento H*
Uma maneira muito usada para alterar o tamanho da letra e aplicar um efeito como negrito em um texto é o uso da tag <h*>, onde o asterisco é substituído por um número que vai do 1 ao 6, e que aplicam um tamanho de fonte diferenciado para o texto que envolverem. Além do tamanho diferenciado, a tag <h*> insere uma linha em branco antes e depois da linha que contém a tag. Elas são perfeitas para criar títulos e iniciar seções dentro de uma página. A tag <h1> possui o maior tamanho, enquanto a tag <h6> possui o menor tamanho de fonte.
Como padrão, um cabeçalho gerado pelo comando <h*> é sempre posicionado do lado esquerdo da linha.
Atributo para H*
Align = Ajusta o cabeçalho à direita, à esquerda, justificado ou centralizado, de acordo com os parâmetros right, left, justify e center, respectivamente.
Caracteres Especiais
| Á | Á | á | á | Â | Â |
| â | â | À | À | à | à |
| Å | Å | å | å | Ã | Ã |
| ã | ã | Ä | Ä | ä | ä |
| Æ | Æ | æ | æ | É | É |
| é | é | Ê | Ê | ê | ê |
| È | È | è | è | Ë | Ë |
| ë | ë | Ð | Ð | Ð | ð |
| Í | Í | í | í | Î | Î |
| î | î | Ì | Ì | Ì | ì |
| Ï | Ï | ï | ï | Ó | Ó |
| ó | ó | Ô | Ô | Ô | ô |
| Ò | Ò | ò | ò | Ø | Ø |
| ø | ø | Õ | Õ | Õ | õ |
| Ö | Ö | ö | ö | Ú | Ú |
| ú | ú | Û | Û | Û | û |
| Ù | Ù | ù | ù | Ü | Ü |
| ü | ü | Ç | Ç | Ç | ç |
| Ñ | Ñ | ñ | ñ | < | < |
| > | > | & | & | " | " |
| ® | ® | © | © | Ý | Ý |
| ý | ý | Þ | Þ | Þ | þ |
| ß | ß | º | º | ª | ª |
| ¹ | ¹ | ² | ² | ³ | ³ |
| ƒ | ƒ | † | † | ‡ | ‡ |
| ‰ | ‰ | ¢ | ¢ | £ | £ |
| « | « | ± | ± | » | » |
| · | · | ¼ | ¼ | ½ | ½ |
| ¾ | ¾ | ¿ | ¿ | × | × |
| ÷ | ÷ | ¡ | ¡ | ¤ | ¤ |
Exercícios:
1) caracteres1.html
<html>
<head>
<title>Formatando Caracteres</title>
</head>
<body bgcolor="yellow">
Esta página utiliza alguns estilos de texto. Os atributos não foram especificados, portanto este texto está assumindo valores padrões.<br>
<font face="arial" size="4" color="red"><b>Este texto está em negrito</b><br>
<i>Este texto está em itálico</i><br>
<u>Este texto está sublinhado</u><br>
<tt>Este texto está monoespaçado</tt><br>
Este texto está normal, sem nenhum efeito
</font>
</body>
</html>
2) caracteres2.html
<html>
<head>
<title>Usando o Elemento H*</title>
</head>
<body bgcolor="#ccccff" text="green">
<font face="arial" size="4">
<h1 align="center">Utilização de "h1" e atributo "align" com parâmetro "center"</h1>
<h2 align="right">Utilização de "h2" e atributo "align" com parâmetro "right"</h2>
<h3 align="right">Utilização de "h3" e atributo "align" com parâmetro "justify"</h3>
<h4>Utilização de "h4" sem a utilização do atributo "align"</h4>
<h4>Utilização de "h4" e atributo "align" com parâmetro "left". Observe que para alinhar a página à esquerda é só deixar que a página assuma valores padrões, ou seja, sem "align"</h4>
</font>
</body>
</html>
true comentários:
Postar um comentário