Carregar apresentação
A apresentação está carregando. Por favor, espere
1
HTML: trabalhando com Fontes
2
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 é <font> - tendo com sua tag de fechamento a </font>
3
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.
4
Usando o atributo Face <html> <head>
Fonte Arial <html> <head> <title>Usando Face</title> </head> <body> <font face="Arial">Arial</font><br> <font face="Verdana">Verdana</font> </body> </html> Fonte Verdana
5
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.
6
Usando o atributo Size <html> <head>
<title>Usando Size</title> </head> <body> <h1>Alterando tamanho</h1> <font size=1>Tamanho 1</font><br> <font size=2>Tamanho 2</font><br> <font size=3>Tamanho 3</font><br> <font size=4>Tamanho 4</font><br> <font size=5>Tamanho 5</font><br> <font size=6>Tamanho 6</font><br> <font size=7>Tamanho 7</font><br> </body> </html>
7
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 <font> desejada. Exemplo: <font color=red>Texto em vermelho</font> Isso determina que apenas a frase “texto em vermelho” estará na cor vermelha
8
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 <font>) determina a cor que o texto compreendido entre as tags <font> e </font> receberá.
9
Exemplo <html> <head>
<title>Formatando Fontes</title> </head> <body text=blue> Estou determinando em meu texto azul que somente <font color=red>aqui</font> será vermelho. </body> </html>
10
Destacando seu Texto Atributos como negrito, itálico, sublinhado, tachado, sobrescrito ou subscrito podem ser aplicados no texto. Negrito <b> ... </b> ou <strong> ... </strong> Itálico <i> ... </i> ou <em> ... </em> Sublinhado <u> ... </u> Tachado <strike> ... </strike> Sobrescrito <sup> ... </sup> Subscrito <sub> ... </sub>
11
Exemplo <html> <head>
<title>Mais formatos</title> </head> <body> Texto em <b>negrito</b><br> Texto em <i>itálico</i><br> Texto <u>sublinhado</u><br> Texto <strike>tachado</strike><br> 5<sup>2</sup><br> log<sub>n</sub><br> </body> </html>
12
Alinhando o Texto Assim como em outros programas, podemos alinhar nossa fonte. O atributo align é aplicado na tag <p> e define qual alinhamento o texto daquele parágrafo receberá.
13
Tipos de Alinhamento Alinhado a esquerda: <p align=left>
Centralizado: <p align=center> Alinhado a direita: <p align=right> Justificado: <p align=justify>
14
Exemplo <html> <head>
<title>Alinhamento</title> </head> <body> <p align=left>Texto a esquerda</p> <p align=center>Texto centralizado</p> <p align=right>Texto a direita</p> <p align=justify>Texto justificado</p> </body> </html>
15
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.
16
Exemplo <html> <head> <title>Letreiro</title>
<body> <marquee>Olá Mundo!</marquee> </body> </html>
17
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
18
Aplicando linha horizontal
A tag usada para aplicar uma linha horizontal na página é <hr>. Ela pode ser aplicada de duas formas: Sem atributos: a linha irá ocupar 100% da tela Com atributos: consigo definir largura (width), espessura (size) e cor (color)
19
Exemplo <html> <head> <title>Linhas</title>
<body> Abaixo temos uma linha sem atributos<br> <hr> Abaixo temos uma linha com atributos<br> <hr width=50% size=5 color=red> </body> </html>
21
Exercício! Crie a página que será mostrada a seguir
22
Letreiro: sim Itálico Tamanho do texto: 6 Fonte: Verdana Cor: verde Negrito e Centralizado
23
Para auxiliar... Página da Internet Código-fonte
Apresentações semelhantes
