Texto

O texto é tudo que vai dentro do corpo do HTML, ou seja, entre as tags <body> e </body>. Veja no nosso primeiro exercício que não colocamos nenhuma informação de que nossa frase era um texto, mas o navegador já entendeu como tal e apresentou na sua tela. Esta seção vai melhorar a forma como apresentamos nossos textos na janela do navegador para nosso visitante.

Há duas formas de se trabalhar com texto dentro dos blogs e no HTML de um modo geral. Uma é trabalhando com formatação lógica e outra formatação física. A primeira é considerada mais inteligente e de acordo com os novos padrões do W3C. A segunda ainda é muito usada pois é o padrão original do HTML, mas vai se usada cada vez menos.

Na formatação lógica, trabalhamos com a lógica do texto. Assim, se queremos um texto em negrito, na verdade, dizemos que ele é mais forte! Se for itálico, dizemos que ele é uma ênfase. Observe:
 texto em negrito esta é a formatação física
 texto em negrito esta é a formatação lógica
Em ambos os casos, o resultado é exatamente o mesmo! Mas o código por trás disso é que é diferente.
Dentro de formatação lógica trabalhamos junto com informações do tipo CSS, tags div, atributos class, e outras coisas que veremos ao londo do curso.

Na formatação física, trabalhamos basicamente com a tag FONT. É com ela que vamos começar a brincar. Vamos abrir o bloco de notas e digitar o código abaixo:

<html>
<head>

<title>Bem-vindo ao meu site</title>
</head>
<body bgcolor="#000000">
... conteúdo da página
</body>
</html>

Salve seu arquivo na nossa pasta de exercícios com o nome de "tagfont.htm". Visualize a página no navegador. Hummm, problemas, certo? Tudo preto na tela... Também, verifique nosso código: cor de fundo da página: preta. Texto padrão do navegador: preto. Escureceu geral! Então, vamos mudar a cor do nosso texto usando a tag FONT e seu atributo color.

Retome seu arquivo "tagfont.htm" no bloco de notas e altere o código:

... conteúdo da página

Salve este arquivo e veja agora como ficou no navegador.

Dica: Você pode trabalhar com as duas janelas abertas ao mesmo tempo, a do Internet Explorer (ou outro navegador qualquer) e a do Bloco de Notas (ou outro editor de texto).

ladoalado

Assim, você altera o documento no Bloco de Notas e Salva.

ladoalado3

Depois clica na janela do navegador e aperta o botão de atualizar (ou a tecla [ F5 ] do teclado).

ladoalado4

A tag FONT possui ainda outros atributos: face e size.

Faça as seguintes alterações neste documento:

...conteúdo da página

Salve e veja como ficou agora no seu navegador.

Você pode escolher uma variedade de cores, usando uma tabela de cores.
Com relação ao tamanho, a variação é de 1 a 7. Sendo o valor 3 o valor médio. Note que o seu visitante pode ter alterado a visualização do navegador dele para fontes maiores ou menores, assim, cuidado ao usar fontes muito grandes ou muito pequenas.
E com as fontes o cuidado deve ser redobrado! Caso você escolha uma fonte que o seu visitante não tenha instalado, o navegador dele faz uma substituição com o que ele achar e aí, pode acontecer de tudo! Mas o seu texto aparece. Portanto, escolha as fontes padrão: times, arial, tahoma, courier, georgia, verdana.

Você pode querer testar seus conhecimentos e fazer um texto de cada cor, tamanho ou fonte, mas quer que cada um fique numa linha ou parágrafo. Para isso, use as tags e para parágrafo e para quebra de linha.

veja o exemplo:

<html>
<head>

<title>Trabalahdno com parágrafo e quebra de linha </title>
</head>
<body bgcolor="#c0c0ff">
 Fiz uma bobagem. Fui aumentar a fonte do shoutbox e renomeei o arquivo errado. Aconteceu aquilo. Mas tudo bem, amanhã, em banda larga, eu arrumo as cores de volta. Por enquanto, fica assim, provisoriamente. 
Um beijo, um browse, um aperto de mouse da Rosana Hermann às 4:39:27 PM Sábado, 18 de junho de 2005
</body>
</html>

Você consegue imaginar o que vai sair mesmo antes de digitar este código entre as tags <body> e </body> do seu bloco de notas?

Então investigue: digite o código acima no seu Bloco de Notas e salve seu documento como "tag_p_br.htm" na nossa pasta. Visualize no navegador e observe bem o resutado. Use os botões de maximizar e restaurar do seu navegador, além de ampliar e reduzir a tela para perceber o que acontece.

p_br_1

p_br_2

Observou os espaçamentos entre as linhas? Quando você cria um parágrafo, o bloco de texto fechado dentro das tags e possui um espaçamento pequeno. O parágrafo seguinte começa com uma entrelinha maior. Porém, você pode "forçar a barra" e quebrar uma linha no meio de um parágrafo, basta inserir um . Lembrou bem quem viu que a tag não possui tag de fechamento, ao menos não no HTML. Os xeretas de plantão podem olhar o XHTML, lá as coisas são diferentes!

Mais um bonitinho? Um bem "facinho"! Uma tag para vocês organizarem o próximo exemplo e o exercício final. é a tag <hr> e seus atributos.

Primeiro vamos ver como fica apenas o <hr> , vamos colocá-lo entre os nossos dois parágrafos.

<html>
<head>

<title>Trabalahdno com parágrafo e quebra de linha </title>
</head>
<body bgcolor="#c0c0ff">
 Fiz uma bobagem. Fui aumentar a fonte do shoutbox e renomeei o arquivo errado. Aconteceu aquilo. Mas tudo bem, amanhã, em banda larga, eu arrumo as cores de volta. Por enquanto, fica assim, provisoriamente. 
<hr>
Um beijo, um browse, um aperto de mouse da Rosana Hermann às 4:39:27 PM Sábado, 18 de junho de 2005
</body>
</html>

Salve seu arquivo do bloco de notas e atualize o navegador.

Vamos mudar mais um pouco? Que tal tirar esta sombra da linha?

Acrescente apenas o "noshade" à tag, salve e atualize a página. A sombra deve ter sumido, mas ainda temos uma linha sem graça... Vamos mudar tudo agora:

Se preferir, mantenha o <hr noshade> e simplesmente acrescente o código acima, assim você terá uma referência visual do resultado.
Size é a largura horizontal da régua em porcentagem quando você coloca o sinal de porcentagem, caso contrário será entendido como pixels.
Color, nosso atributo favorito, é só escolher uma cor na tabela de cores.
Width é a expessura da régua, em pixels.
Align é o alinhamento horizontal da régua na página. Pode ser também left e right.

Veja aqui o resultado: a cinza mais claro é apenas o <hr>, que sem a sombra fica mais escuro <hr noshade> e por último com todos os atributos, repare que basta eu colocar outro atributo que a sombra desaparece, não sendo necessário o uso do "noshade".

Para não ficar sem nenhum exemplo, vamos retomar a história da formatação física e lógica e dar um exemplo da segunda: o uso de cabeçalhos. Apesar de ser um conceito antigo é um ótimo exemplo de uma formatação lógica. Serve para dar títulos aos assuntos. Você pode trabalhar de <h1> a <h6> .

Vamos continuar a usar o nosso exemplo e criarmos um título para nosso primeiro parágrafo:

<html>
<head>

<title>Trabalahdno com parágrafo e quebra de linha </title>
</head>
<body bgcolor="#c0c0ff">
<h1>Relatório da tarde</h1>
 Fiz uma bobagem. Fui aumentar a fonte do shoutbox e renomeei o arquivo errado. Aconteceu aquilo. Mas tudo bem, amanhã, em banda larga, eu arrumo as cores de volta. Por enquanto, fica assim, provisoriamente. 
Um beijo, um browse, um aperto de mouse da Rosana Hermann às 4:39:27 PM Sábado, 18 de junho de 2005
<hr size="3" color="#c000c0" width="50%" align="left">
</body>
</html>

Salve seu arquivo do bloco de notas e atualize o navegador. Resultado:

Umas coisinhas simples que já dão uma carinha mais interessante para o trabalho. Querem testar seus novos conhecimentos? Que tal então:
- criar uma página html
- com um título (da página) de: exercício "seu nome"
- com as várias opções de tamanho de fonte
- com as várias opções de tamanho de cabeçalho
- organizados com separadores de réguas

Pode ser?

Tente e vá fazendo aos pouquinhos. Digite os códigos com cuidado e aproveite para já ir decorando... Não tem muito jeito, tem coisa que tem que decorar. Então vamos usar bastante para fixar bem!

Qualquer dúvida, mandem uma mensagem!

Bjs e boa sorte!

PS - Já ia me esquecendo... Tem alguns caracteres que são chamados de caracteres especiais. Não sei quem tentou dar uma porção de "barras de espaço" para tentar separar uma palavra da outra e não obteve sucesso... Pois é, um espaço é um caractere normal, mas dois é um caractere especial! Cada espaço a mais que eu pretendo dar eu preciso digitar " ". Um horror! Mas é isso mesmo! Aí vai uma lista de caracteres especiais:

caracteres_esp

PS2 - Ainda falando de formatação lógica e física, vamos ver mais exemplos:
(formatação lógica e física, respectivamente)
negrito
 texto ou texto

itálico
 texto ou texto

tachado
<strike> texto </strike> ou <s> texto </s>

(formatação lógica)
tamanho maior
<big> texto </big>

tamanho menor
 texto

subscrito
 texto

sobrescrito
 texto

máquina de escrever
<tt> texto </tt>

sublinhado
 texto 
Cuidado com este último, já que na maioria das vezes um texto sublinhado significa um link. Sublinhar um texto sem que ele seja um link, pode deixar alguna usuários frustados...

Agora sim! Bjs e boa sorte!

fim