Um exemplo disso é o CSS, onde a maioria desses conhecimentos sobre fontes, cores e tamanhos são realmente empregados nos sites.
Devemos lembrar você, antes de iniciar este tutorial de HTML, que o uso da tag <font> e de seus parâmetros já saíram de uso e nem são mais suportados no HTML 5, e a formatação de fonte, cor e tamanho é feita através do CSS.
Porém, iremos ensinar à fazer essas formações em HTML, pois é um conhecimento importante, que vamos usar em breve, na seção de CSS de nosso curso.
Quando você for um Webmaster profissional e for criar um novo projeto, você usará o CSS para esses detalhes de estilo.
E diferente da maioria dos cursos e apostilas por aí, nós do HTML Progressivo insistimos que é totalmente necessário, e básico, você estudar isso em HTML, para entender como as coisas realmente funcionam, suas origens e propósitos.
Por incrível que pareça, estudar HTML bem estudado é realmente um diferencial nos dias de hoje onde as pessoas só buscam tutoriais rápidos e sem explicação, e acabam fazendo as coisas sem ter um mínimo de entendimento do que vão fazer.
Quando você for um Webmaster profissional e for criar um novo projeto, você usará o CSS para esses detalhes de estilo.
E diferente da maioria dos cursos e apostilas por aí, nós do HTML Progressivo insistimos que é totalmente necessário, e básico, você estudar isso em HTML, para entender como as coisas realmente funcionam, suas origens e propósitos.
Por incrível que pareça, estudar HTML bem estudado é realmente um diferencial nos dias de hoje onde as pessoas só buscam tutoriais rápidos e sem explicação, e acabam fazendo as coisas sem ter um mínimo de entendimento do que vão fazer.
Todos que já usaram algum tipo de editor de textos, como Microsoft Word, já devem ter alterado ao menos uma vez a fonte do texto.
As fontes mais comuns são a Times New Roman, Arial, Courier, Helvetica, Verdana, dentre de centenas outras. Sendo inclusive possível criar sua própria fonte, ou mesmo baixar outras fontes.
Outra coisa comum que fazemos é alterar as cores de uma fonte.
Para fazer isso em HTML, vamos usar a mesma lógica, regra e tabela de cores que foi usada e explicada em nosso artigo sobre Como alterar a cor de fundo de um site.
Por isso, é importante você ter lido este tutorial de nosso curso para entender como mudar a cor de uma fonte, leia:
As fontes mais comuns são a Times New Roman, Arial, Courier, Helvetica, Verdana, dentre de centenas outras. Sendo inclusive possível criar sua própria fonte, ou mesmo baixar outras fontes.
Outra coisa comum que fazemos é alterar as cores de uma fonte.
Para fazer isso em HTML, vamos usar a mesma lógica, regra e tabela de cores que foi usada e explicada em nosso artigo sobre Como alterar a cor de fundo de um site.
Por isso, é importante você ter lido este tutorial de nosso curso para entender como mudar a cor de uma fonte, leia:
O atributo face da tag <font> - Alterando o tipo de fonte de um texto em HTML
Para alterar o tipo de fonte de um texto em HTML, usamos o atribute face, da tag <font>.A sintaxe desta tag e do atributo é:
<font face="NOME DA FONTE"> Aqui é seu texto que está com a fonte "NOME DA FONTE" </font>
Por exemplo, vamos escrever em 7 tipos diferentes de fontes.
Nosso código HTML seria:
<!DOCTYPE html> <html> <head> <title> Como alterar a fonte de um texto em HTML </title> <meta name="description" content="Aprenda a alterar a fonte de um texto em HTML através da tag font e do atributo face"> </head> <body> <font face="Arial"> Arial </font> <br /> <font face="Courier"> Courier </font> <br /> <font face="Georgia"> Georgia </font> <br /> <font face="Helvetica"> Helvetica </font> <br /> <font face="Times"> Times </font> <br /> <font face="Tribuchet"> Trebuchet </font> <br /> <font face="Verdana"> Verdana </font> <br /> </body> </html
Podemos citar diversos tipos de fontes, mas as mais comuns são:
- Antiqua
- Arial
- Blackletter
- Calibri
- Comic Sans
- Courier
- Decorative
- Fraktur
- Frosty
- Garamond
- Georgia
- Helvetica
- Impact
- Minion
- Modern
- Palatino
- Roman
- sans-serif
- serif
- Script
- Swiss
- Times
- Times New Roman
- Verdana
Vale lembrar que as fontes não são universais. Ou seja, as fontes que um brasileiro usa pode ser diferente das de um indiano ou chinês. Você pode, inclusive, apagar fontes de seu computador, ou adicionar novas.
Por isso, nem sempre que você colocar uma fonte todos os leitores de seu site irão ver essa mesma fonte.
O atributo face da tag <font> porém, possui uma opção muito interessante, de escolher várias fontes.
Podemos citar quantas quisermos no atributo face, separando-as por vírgula.
O navegador irá tentar interpretar a primeira, caso não consiga ele vai tentar exibir a segunda fonte, depois a terceira e assim sucessivamente, até conseguir exibir a fonte.
Por exemplo, vamos criar 3 nomes de fonte: "pita", "pota" e ... "teste".
Obviamente, elas não existem. Vamos escrever a quarta fonte a "sans-serif", que existe.
Nosso código HTML fica, testem e vejam o resultado:
<font face="pita, pota, teste, sans-serif"> Sans-serif </font>
O atributo color da tag <font> - Como mudar a cor de um texto em HTML
Assim como explicamos no tutorial de HTML sobre Como mudar o fundo de um site e a Tabela de Cores, vamos usar a mesma lógica para as cores de textos.Para mudar a cor de um determinado texto, devemos colocar tal trecho entre as tags <font> e </font>, porém, devemos adicionar o atributo color, que vai definir a cor que você queira, baseado na Tabela de Cores.
Há 3 sintaxes para definir a cor do texto:
<font color="#XXXXXX"> Cor definida por 6 dígitos hexadecimais </font> <font color="rgb(x,x,x)"> Cor definida por 3 números do RGB </font> <font color="NOME DA COR"> Cor definida pelo nome </font>Porém, assim no caso do atributo bgcolor da tag <head>, que muda a cor do fundo do site, o RGB só funciona em CSS.
Mas ensinamos de antemão para você ir logo aprendendo.
Veja o seguinte código HTML e tente descobrir, só vendo o código, o efeito que será visto no site:
<!DOCTYPE html> <html> <head> <title> Como alterar a cor de um texto em HTML </title> <meta name="description" content="Aprenda a alterar a cor de um texto em HTML através da tag font e do atributo color"> </head> <body> <font color="#FF0000"> Este texto e vermelho </font> <br /> <font color="Yellow"> Esse e amarelo </font> </body> </html>
O atributo size da tag <font> - Como alterar o tamanho de uma fonte em HTML
Finalizando este tutorial de nosso curso de HTML sobre manipulação e formatação das fontes de um texto, vamos ensinar como mudar o tamanho de uma fonte.Isso é feito através do atributo size (tamanho, em inglês) da tag <font>.
A sintaxe de uso desse atributo é a seguinte:
<font size="numero"> O tamanho da fonte deste texto eh "numero" </font>
Onde este "numero" pode variar de 1 até 7, onde o número 1 é o menor tamanho de fonte, e o número 7 é o maior tamanho possível de fonte.
O seguinte código HTML mostra todos os tamanhos das fontes, de 1 até 7.
Escreva esse código em seu editor de websites, salve com a extensão .html e rode o arquivo em seu navegador para ver o efeito:
<!DOCTYPE html> <html> <head> <title> Como alterar o tamanho de um texto em HTML </title> <meta name="description" content="Aprenda a mudar o tamanho de um texto em HTML através da tag font e do atributo size"> </head> <body> <font size="1"> Tamanho desta fonte: 1</font> <br /> <font size="2"> Tamanho desta fonte: 2</font> <br /> <font size="3"> Tamanho desta fonte: 3</font> <br /> <font size="4"> Tamanho desta fonte: 4</font> <br /> <font size="5"> Tamanho desta fonte: 5</font> <br /> <font size="6"> Tamanho desta fonte: 6</font> <br /> <font size="7"> Tamanho desta fonte: 7</font> <br /> </body> </html>Cujo efeito será o seguinte:
Tamanho desta fonte: 1
Tamanho desta fonte: 2
Tamanho desta fonte: 3
Tamanho desta fonte: 4
Tamanho desta fonte: 5
Tamanho desta fonte: 6
Exercício de HTML
Reproduza os efeitos em texto em um site de HTML que foram exibidos na figura inicial deste tutorial, incluindo tamanhos, cores e tipos de fonte.Use tags aninhadas para conseguir mais de um efeito no mesmo texto.
