HTML - Formatação de Textos

HTML – AULA 2
Microlins - Web e Design – Capítulo 2
Rondonópolis 14 de Maio de 2011

Mayza de Oliveira
@mayzaoliveira
mayza.deoliveira@gmail.com

FORMATANDO TEXTO
 Formatar o texto é alterar as suas
propriedades deixando-o com a
aparência desejada.

 Podemos formatar de palavras a até
blocos de texto utilizando algumas tags.

FORMATANDO BLOCOS DE TEXTO
TAG <PRE></PRE>

A tag <pre></pre> mantém o texto da
mesma maneira que foi digitado,
exibindo-o no mesmo formato no
navegador:

TAG <PRE></PRE>
<body>
<pre>
00000000000000000000000000000000000000000000
000000000000000000________000000000000000000
00000000000000________________00000000000000
0000000000________________________0000000000
00000__________________________________00000
00________________________________________00
00000__________________________________00000
0000000000________________________0000000000
00000000000000________________00000000000000
000000000000000000________000000000000000000
00000000000000000000000000000000000000000000
</pre>
</body>

TAG <BLOCKQUOTE></BLOCKQUOTE>
 Usado para formatar citações longas:

<body>
<blockquote>
“A emoção mais antiga e mais forte da
humanidade é o medo, e o mais antigo
e mais forte de todos os medos é o
medo do desconhecido.”
(H.P. Lovecraft)
</blockquote>
</body>

TAG <ADDRESS></ADDRESS>

 Utilizada para endereços e para assinar o
documento:

<body>
Envie criticas e sugestões para:
<address>
mayza.deoliveira@gmail.com
</address>
</body>

TAG <BLINK></BLINK>

 Utilizada para fazer com que o texto apareça
piscando na tela:

<body>
<blink>Atenção</blink>
</body>

FORMATANDO FRASES
TAG <CITE></CITE>

 Utilizada para citações curtas, títulos de livros,
filmes, etc:

<body>
Assisti<cite>Matrix</cite>umas oito
vezes!
</body>

FORMATANDO FRASES
TAG <CODE></CODE>

 Utilizada para indicar trechos de códigos de
programas:

<body>
<code>
for (x=0); cl &&(!feof(stdin)); x++
</code>
</body>

FORMATANDO FRASES
TAG <DFN></DFN>

 Utilizada para indicar a definição de uma palavra:

<body>
NASA: <dfn> National Aeronautics and
Space Administration </dfn>
</body>

FORMATANDO FRASES
TAG <EM></EM>

 Utilizada para indicar ênfase a um trecho
específico:

<body>
Não basta respirar, é <em> preciso </em>
viver.
</body>

FORMATANDO FRASES
TAG <KBD></KBD>

 Utilizada para indicar uma entrada via teclado:

<body>
Para ler mensagens recebidas, digite
<kbd> pine –i </kbd>
</body>

FORMATANDO FRASES
TAG <SAMP></SAMP>

 Utilizada para indicar uma sequência de
caracteres:

<body>
O resultado do primeiro applet é:
<samp> Hello World! </samp>
</body>

FORMATANDO FRASES
TAG <STRONG></STRONG>

 Utilizada para dar ênfase ao trecho escolhido:

<body>
Antes de enviar um e-mail, confira o
campo <strong> “Assunto:”! </strong>
</body>

FORMATANDO FRASES
TAG <VAR></VAR>

 Utilizada para indicar variáveis ou valores que o
usuário deverá escrever:

<body>
No campo login, escreva <var>
administrador </var>
</body>

ESTILOS FÍSICOS
 A formatação física especifica diretamente os
estilos que se quer para o texto:

 Itálico
 Negrito

 Sublinhado

 Riscado

 Tamanho do texto

ESTILOS FÍSICOS
TAG <B></B>

 Utilizada para formatar o texto em negrito:

<body>
<b>Dia das mães:</b> compre um
presente para a melhor mãe do mundo!
</body>

ESTILOS FÍSICOS
TAG <I></I>

 Utilizada para formatar o texto em itálico:

<body>
Palavras em inglês, como
<i>webdesigner</i>, fazem parte do
nosso dia a dia.
</body>

ESTILOS FÍSICOS
TAG <TT></TT>

 Utilizada para formatar o texto com espaçamento
uniforme:

<body>
<tt> Sábado, 14 de março de
2011</tt>
</body>

ESTILOS FÍSICOS
TAG <U></U>

 Utilizada para deixar o trecho escolhido sublinhado:

<body>
<u> Atenção </u>: não mexa nos fios!
</body>

ESTILOS FÍSICOS
TAG <STRIKE></STRIKE>

 Utilizada quando se quer aplicar um risco sobre o
trecho escolhido:

<body>
A resposta correta é: Sim
<strike>Não</strike>
</body>

ESTILOS FÍSICOS
TAG <BIG></BIG>

 Utilizada para formatar o trecho escolhido com uma
fonte um pouco maior:

<body>
Fonte normal, <big> fonte maior
</big>.
</body>

ESTILOS FÍSICOS
TAG <SMALL></SMALL>

 Utilizada para formatar o trecho escolhido com uma
fonte um pouco menos:

<body>
Fonte normal, <small>Fonte
menor</small>.
</body>

ESTILOS FÍSICOS
TAG <SUB></SUB>

 Utilizada para formatar um bloco de texto no estilo
subescrito:

<body>
C <sub>3</sub> H <sub>6</sub> O
</body>

ESTILOS FÍSICOS
TAG <SUP></SUP>

 Utilizada para formatar um bloco de texto com
estilo sobre-escrito:

<body>
Delta = b <sup>2</sup> -4ac
</body>

FORMATANDO FONTES

 Para formatar fontes, alterando suas propriedades
e aplicando atributos, devemos utilizar as tags:

 <font></font>

 <div></div>

FORMATANDO FONTES
TAG <FONT></FONT>
 Utilizada para alterar a maioria das propriedades
das fontes. Todo o conteúdo que estiver dentro
dessa tag terá características definidas pelos
atributos.

<body>
<font face=“Times New Roman”>
Bom dia!
</font>
</body>

TAG <FONT></FONT>
ATRIBUTOS

 color=“valor”: Ajusta a cor do texto;
 face=“nomeDaFonte1, nomeDaFonte2”: Especifica
o tipo fonte para o texto;
 size=“valor”: Especifica o tamanho da fonte;

<font face=“Arial, Verdana, Tahoma” size=5
color=“#000000”>
Texto formatado por atributos
</font>

FORMATANDO FONTES
TAG <DIV></DIV>
 Utilizada para formatar a forma de alinhamento de
um bloco de texto. Ao utilizar essa tag, todas as
tags que estiverem dentro da tag <div> serão
afetadas.

 Atibutos da tag <div></div>

 Align - alinha o texto na tela, com os valores:
 Left: esquerda;
 Right: direita;
 Center: centralizado;
 Justify: justificado.

FORMATANDO FONTES
TAG <DIV></DIV>
<body>
<div align=justify>
A www ou World Wide Web (Rede de
Alcance Mundial), também conhecida como Web, é
um sistema de documentos de hipermídia
interligados e executados na internet. Para visualizar
a informação, pode-ser usar um programa de
computador chamado navegador para descarregar
informações de servidores Web e mostrá-los na tela
do usuário.
</div>
</body>

CARACTERES ESPECIAIS
 Alguns caracteres não são identificados pelo
HTML, por isso, devem ser inseridos códigos que
serão interpretados pelo navegador, exibindo o
caractere correspondente.

Caractere Entidade
< <
> >
& &

EXERCÍCIO
 Crie um novo documento HTML e implemente todas as tags aprendidas
na aula de hoje, bem como os atributos correspondentes.

 Este exercício tem como objetivo mostrar a utilização das tags juntas e
como podem ser implementadas de forma encadeada (uma tag dentro
da outra).
Exemplo:

<div aligh=justify>
<blockquote>
“A emoção mais antiga e mais forte da
humanidade é o medo, e o mais antigo e mais
forte de todos os medos é o medo do
desconhecido.”
(H.P. Lovecraft)
</blockquote>
</div>

EXERCÍCIO
<div></div> <samp></samp>
<font></font> <strong></strong>
<var></var>
<pre></pre>
<b></b>
<blockquote></blockquote> <i></i>
<address></address> <tt></tt>
<blink></blink> <u></u>
<cite></cite> <strike></strike>
<big></big>
<code></code> <small></small>
<dfn></dfn> <sub></sub>
<em></em> <sup></sup>
<kbd></kbd>

HTML - Formatação de Textos

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a HTML - Formatação de Textos

HTML - Formatação de Textos