HTML: trabalhando com Fontes. Fontes Para a criação de um bom texto, que seja diferenciado das...
Transcript of HTML: trabalhando com Fontes. Fontes Para a criação de um bom texto, que seja diferenciado das...
![Page 1: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/1.jpg)
HTML: trabalhando com Fontes
![Page 2: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/2.jpg)
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> <font> - tendo com sua tag de fechamento a </font></font>
![Page 3: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/3.jpg)
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.
![Page 4: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/4.jpg)
Usando o atributo Face
<html><head>
<title>Usando Face</title></head><body>
<font face="Arial">Arial</font><br><font face="Verdana">Verdana</font>
</body></html>
Fonte Arial
Fonte Verdana
![Page 5: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/5.jpg)
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.
![Page 6: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/6.jpg)
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>
![Page 7: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/7.jpg)
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
![Page 8: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/8.jpg)
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á.
![Page 9: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/9.jpg)
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>
![Page 10: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/10.jpg)
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>
![Page 11: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/11.jpg)
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>
![Page 12: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/12.jpg)
Alinhando o Texto
• Assim como em outros programas, podemos alinhar nossa fonte.
• O atributo align é aplicado na tag <p><p> e define qual alinhamento o texto daquele parágrafo receberá.
![Page 13: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/13.jpg)
Tipos de Alinhamento
• Alinhado a esquerda: <p align=left>• Centralizado: <p align=center>• Alinhado a direita: <p align=right>• Justificado: <p align=justify>
![Page 14: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/14.jpg)
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>
![Page 15: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/15.jpg)
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.
![Page 16: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/16.jpg)
Exemplo<html>
<head><title>Letreiro</title>
</head><body>
<marquee>Olá Mundo!</marquee></body>
</html>
![Page 17: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/17.jpg)
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
![Page 18: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/18.jpg)
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)
![Page 19: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/19.jpg)
Exemplo<html>
<head><title>Linhas</title>
</head><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>
![Page 20: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/20.jpg)
![Page 21: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/21.jpg)
Exercício!
• Crie a página que será mostrada a seguir
![Page 22: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/22.jpg)
Tamanho do texto: 6Fonte: VerdanaCor: verdeNegrito e Centralizado
Letreiro: simItálico
![Page 23: 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.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc15f497959413d8e6a36/html5/thumbnails/23.jpg)
Para auxiliar...
• Página da Internet
• Código-fonte