HTML: trabalhando com Fontes. Fontes Para a criação de um bom texto, que seja diferenciado das demais páginas e de boa leitura, é recomendável aplicar

HTML: trabalhando com Fontes

Fontes

• Para a criação de um bom texto, que seja diferenciado das demais páginas e de boa leitura, é recomendável aplicar alterações nas fontes.

• A tag principal para fonte é - tendo com sua tag de fechamento a 

Face

• O atributo face determina qual o tipo de fonte que o texto compreendido entre a tag de abertura e a tag de fechamento font será aplicado no texto

• Você pode determinar uma fonte ou um conjunto de fontes, já que alguns computadores não possuem muitas fontes instaladas.

Usando o atributo Face

<html><head>

<title>Usando Face</title></head><body>

Arial Verdana

</body></html>

Fonte Arial

Fonte Verdana

Size

• O atributo size determina qual o tamanho do texto dentro da tag font.

• Enquanto a tag <h*> determina um título, o atributo size – que fica na tag font – é mais indicado quando, num mesmo parágrafo, queremos ter vários tamanhos de fontes.

Usando o atributo Size<html>

<head><title>Usando Size</title>

</head><body>

<h1>Alterando tamanho</h1>Tamanho 1 Tamanho 2 Tamanho 3 Tamanho 4 Tamanho 5 Tamanho 6 Tamanho 7 

</body></html>

Usando o atributo Color para aplicar cor a uma parte do texto• O atributo color aplica cor a uma

determinada fonte do documento.

• Esta cor será definida ao inserir o atributo na tag desejada. Exemplo:

Texto em vermelho

• Isso determina que apenas a frase “texto em vermelho” estará na cor vermelha

Atributo Text vs. Atributo Color• O atributo text (aplicado na tag <body>)

determina a cor padrão do texto do documento;

• O atributo color (aplicado na tag ) determina a cor que o texto compreendido entre as tags e receberá.

Exemplo

<html><head>

<title>Formatando Fontes</title></head><body text=blue>

Estou determinando em meu texto azul que somente aqui será vermelho.

</body></html>

Destacando seu Texto• Atributos como negrito, itálico, sublinhado,

tachado, sobrescrito ou subscrito podem ser

aplicados no texto.

Negrito ... ou ... 

Itálico ... ou ... 

Sublinhado ... 

Tachado <strike> ... </strike>

Sobrescrito ... 

Subscrito ... 

Exemplo<html>

<head><title>Mais formatos</title>

</head><body>

Texto em negrito Texto em itálico Texto sublinhado Texto <strike>tachado</strike> 52 logn 

</body></html>

Alinhando o Texto

• Assim como em outros programas, podemos alinhar nossa fonte.

• O atributo align é aplicado na tag e define qual alinhamento o texto daquele parágrafo receberá.

Tipos de Alinhamento

• Alinhado a esquerda: • Centralizado: • Alinhado a direita: • Justificado: 

Exemplo<html>

<head><title>Alinhamento</title>

</head><body>

Texto a esquerdaTexto centralizadoTexto a direitaTexto justificado

</body></html>

Marquee

• A tag <marquee> cria um letreiro. O texto compreendido entre as tags passará de um lado para o outro da tela, como num letreiro.

• Como padrão, o texto irá da direita para a esquerda.

Exemplo<html>

<head><title>Letreiro</title>

</head><body>

<marquee>Olá Mundo!</marquee></body>

</html>

Atributos da tag marquee

<marquee behavior=alternate> o texto vai e volta na tela

<marquee behavior=slide> o letreiro vai e para

<marquee direction=right> o letreiro vai da esquerda para a direita

<marquee loop=2> o letreiro passará pela tela duas vezes

<marquee scrooldelay=10> determina a velocidade do letreiro

<marquee height=30> altura

<marquee width=75> largura

<marquee bgcolor=yellow> cor de fundo do letreiro

<marquee hspace=20> determina espaço em branco aos lados

<marquee vspace=20> determina espaço em branco acima e abaixo

Aplicando linha horizontal

• A tag usada para aplicar uma linha horizontal na página é <hr>. Ela pode ser aplicada de duas formas:

1.Sem atributos: a linha irá ocupar 100% da tela

2.Com atributos: consigo definir largura (width), espessura (size) e cor (color)

Exemplo<html>

<head><title>Linhas</title>

</head><body>

Abaixo temos uma linha sem atributos <hr>Abaixo temos uma linha com atributos <hr width=50% size=5 color=red>

</body></html>

Exercício!

• Crie a página que será mostrada a seguir

Tamanho do texto: 6Fonte: VerdanaCor: verdeNegrito e Centralizado

Letreiro: simItálico

Para auxiliar...

• Página da Internet

• Código-fonte

Documents

HTML: trabalhando com Fontes. Fontes Para a criação de um bom texto, que seja diferenciado das demais páginas e de boa leitura, é recomendável aplicar