Formatação de texto e elementos de estilo

15 Alinhamentos, estilo das fontes e tabulações
horizontais (réguas)
Conteúdos
1. Formatação
1Cor de fundo
2Alinhamentos
3Objectos flutuantes Fazer flutuar um objecto Texto flutuante à volta de um objecto
2. Fontes
1.Elementos do estilo da fonte: os elementos TT, I, B, BIG, SMALL,STRIKE, S e U
2.Elementos que modificam a fonte: FONT e BASEFONT
3.3. Regras: o elemento HR
Esta secção trata acerca de alguns dos elementos e atributos HTML que podem ser usados
na formatação visual dos elementos. Muitos deles estão deprecados.
15.1 Formatação
15.1.1 Cor de fundo
Definições do atributo
bgcolor= color [CI] Deprecado! Este atributo define a cor de fundo para o corpo de um
documento ou células de uma tabela.
Este atributo define a cor de fundo da tela do corpo do documento (o elemento BODY) ou das tabelas
(os elementos TABLE, TR, TH e TD). Poder-se-ão usar outros atributos adicionais associados ao
elemento BODY a fim de se especificar a cor de fundo.
Este atributo foi deprecado em favor das folhas de estilo usadas para especificar a informação da cor
de fundo.
15.1.2 Alinhamento
É possível alinhar elementos em bloco (tabelas, imagens, objectos, parágrafos, etc.) na tela, através
do atributo align. Embora este atributo possa ser definido por vários elementos HTML, o leque dos
seus possíveis valores varia por vezes de elementos para elemento. Nós iremos no entanto discutir
aqui apenas o significado que o atributo "align" tem para os textos.
align = left|center|right|justify [CI] Deprecado! Este atributo especifica o alinhamento

horizontal do seu elemento em relação ao contexto que o circunda. Valores possíveis:
left: as linhas do texto são alinhadas à esquerda. center: as linhas do textosão centradas. right: as
linhas do texto são alinhadas à direita. justify: as linhas do texto são justificadas em bloco. O valor
por defeito depende da direcção básica do texto. No caso dos textos da esquerda para a direita, o
valor por defeito é align=left, ao passo que no caso dos textos da direita para a esquerda, o valor
por defeito é align=right.
EXEMPLO DEPRECADO: Neste exemplo, o cabeçalho está centrado na tela do monitor.

<H1 align="center"> Como talhar a madeira </H1>
Usando por exemplo as CSS, poderá obter o mesmo efeito da seguinte forma:
<HEAD> <TITLE>Como talhar a madeira</TITLE> <STYLE type="text/css">
H1 { text-
align:
center}</STYLE>
<BODY> <H1>
Como talhar a
madeira </H1>
Note-se que tal iria centrar todas as declarações H1. Pode reduzir o campo de domínio do estilo,
aplicando o atributo class ao elemento:
H1.wood {text-align: center}</STYLE><BODY> <H1 class="wood"> Como talhar a madeira </H1>
EXEMPLO DEPRECADO: Similarmente, para se alinhar um parágrafo à direita na tela do monitor

através de um atributo align, você poderia ter:
<P align="right">...Uma carrada de texto pertencente ao parágrafo...
o qual em CSS teria o seguinte aspecto:

P.mypar {text-align: right}
http://desenaviegas.com/graphics.html[20-04-2011 11:51:33]
</STYLE><BODY> <P class="mypar">...Uma carrada de texto pertencente ao parágrafo...
EXEMPLO DEPRECADO: Para se alinhar uma série de parágrafos à direita, poderá agrupá-los
através do elemento DIV:
<DIV align="right"><P>...texto contido no primeiro parágrafo...<P>...texto contido no
segundo parágrafo...<P>...texto contido no terceiro parágrafo...
</DIV>
Em CSS, a propriedade de alinhamento do texto é herdada do elemento parente, de forma que

poderá usar:
DIV.mypars {text-
align:
right}</STYLE><BODY>
<DIV class="mypars"><P>...texto contido no primeiro parágrafo...<P>...texto contido no
segundo parágrafo...<P>...texto contido no terceiro parágrafo...
</DIV>
Para centrar o documento inteiro com CSS:

BODY {text-
align:
center}</STYLE><B
ODY>
...o corpo do documento é centrado...
</BODY>
O elemento CENTER equivale exactamente à especificação do elemento DIV com o atributo

aligndefinido como "center". O elemento CENTER está deprecado!
15.1.3 Objectos flutuantes
As imagens e objectos podem aparecer directamente “em linha” ou fazer-se flutuar para um dos
lados da página, alternando temporariamente as margens do texto, as quais podem fluir em
qualquer dos lados do objecto.
Fazer flutuar um objecto
O uso do atributo align para objectos, imagens, tabelas, molduras, etc., permite que o objecto flutue
para a margem esquerda ou direita. De uma forma geral, os objectos flutuantes iniciam uma nova
linha. Este atributo assume os seguintes valores:
left: faz com que o objecto flutue para a actual margem esquerda. O texto que lhe é
subsequente flutua ao longo do lado direito da imagem. right: faz com que o objecto flutue para a
actual margem direita. O texto que lhe é subsequente flutua ao longo do lado direito da imagem.
EXEMPLO DEPRECADO: O exemplo que se segue, mostra-nos como se pode fazer flutuar um
elemento IMG para a actual margem esquerda da tela do monitor.
<IMG align="left" src="http://foo.com/animage.gif" alt="o meu barco">
Alguns atributos de alinhamento podem ainda permitir a aplicação do valor “center”, o qual origina não
a flutuação do objecto, mas sim o seu centramento entre as duas margens correntes. Contudo, para P
e DIV, o valor "center" faz com que os conteúdos do elemento sejam centrados.
Texto flutuante à volta de um objecto
Um outro atributo, definido para o elemento BR, controla o fluxo do texto à volta dos objectos
flutuantes.
clear = none|left|right|all [CI] Deprecado! Especifica o sítio onde a próxima linha deveria
aparecer no navegador visual, a seguir à mudança de linha que é causada por este elemento.
Este atributo tem em conta os objectos flutuantes (imagens, tabelas, etc.). Valores possíveis:
none: a próxima linha é iniciada normalmente. Este é o valor por defeito. left: a próxima
linha começará o mais próximo da linha que estiver logo abaixo de qualquer objecto
flutuante na margem esquerda. right: a próxima linha começará o mais próximo da linha
que estiver logo abaixo de qualquer objecto flutuante na margem direita. all: a próxima
linha começará o mais próximo da linha que estiver logo abaixo de qualquer objecto
flutuante localizado em qualquer uma das margens.
Considere o seguinte cenário visual, no qual
o texto flui à direita de uma imagem, até se dar a

mudança de linha provocada pelo elemento BR:
********* ------| | ------| image | --<BR> | |*********
Se o atributo clear for definido como none, a linha que se seguir BR começará imediatamente
abaixo, na margem direita da imagem:
********* ------| | ------| image | --<BR> | | -----*********
EXEMPLO DEPRECADO: Se o atributo clear for definido como left ou all, a próxima linha
aparecerá na seguinte forma:
********* ------| | ------| image | --<BR clear="left"> | |*********
Usando folhas de estilo, poderá especificar que todas as mudanças de linha se deveriam
comportar dessa maneira para os objectos (imagens, tabelas, etc.) flutuantes posicionados na
margem esquerda da seguinte forma:
<STYLE type="text/css">BR { clear: left }</STYLE>
Para definir este comportamento para um caso específico do elemento BR, poderá combinar a
informação do estilo com o atributo id:
<HEAD>
...
<STYLE type="text/css">BR#mybr { clear: left }</STYLE></HEAD><BODY> <P>... *********
------| | ------| table | --<BR id="mybr"> | |*********
... </BODY>
15.2 Fontes
Os elementos HTML que se seguem especificam a informação referente à fonte. Se bem nem todos
eles estejam deprecados, nós desencorajamos quem quer que seja a usá-los, em favor das folhas de
estilo.
15.2.1 Elementos do estilo da fonte: os elementos TT, I, B, BIG, SMALL, STRIKE, S e U

<!ENTITY % fontstyle
"TT | I | B | BIG | SMALL"> <!ELEMENT (%fontstyle;|%phrase;) - - (%inline;)*><!ATTLIST
(%fontstyle;|%phrase;)
%attrs; --%coreattrs, %i18n, %events ->
"tag" de abertura: requerida, "tag" de encerramento: requerida
Atributos definidos noutros lugares:
id, class (identificadores ao longo do documento) lang (informação da linguagem), dir (direcção
do texto) title (título do elemento) style (Informação do estilo em linha (inline)) onclick,
ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown onkeyup (acontecimentos intrínsecos)
A representação dos elementos de estilo varia de agente visual para agente visual. O seguinte
exemplo é apenas uma descrição informativa.
TT: exibe o texto em teletipo ou mono-espaço.

I: exibe o texto em estilo itálico.
B: exibe o texto em estilo negrito. BIG: exibe o texto em letras "grandes". SMALL: exibe o
texto em letras "pequenas". STRIKE e S: Deprecado! Exibe o texto em estilo “strike-
trough”.
U: Deprecated. Exibe o texto a sublinhado.
A próxima frase exemplifica-nos vários tipos de texto:

<P><b>negrito</b>,<i>itálico</i>, <b><i>itálico negrito</i></b>, <tt>texto de
teletipo</tt>, e texto emletras <big>grandes</big> e <small>pequenas</small>.
Estas palavras poderão se representadas da seguinte forma:
É no entanto possível obter uma maior variedade de efeitos aplicáveis à fonte, usando as folhas de
estilo. Por exemplo, para se
especificar um texto de um parágrafo
em itálico e a azul através das CSS:
<HEAD> <STYLE type="text/css">P#mypar {font-style: italic; color: blue}</STYLE></HEAD><P
id="mypar">...Uma carrada de texto em itálico a azul...
Os elementos referentes ao estilo da fonte terão que ser devidamente encaixados. A

representação desses elementos de estilo varia de agente visual para agente visual.
15.2.2 Elementos que modificam a fonte: FONT e BASEFONT

FONT e BASEFONT estão deprecados.
Ver o capítulo DTD Transitiva, relativamente à definição formal.
size = cdata [CN] Deprecado! Este atributo define o tamanho da fonte.

Valores possíveis:
Números íntegros compreendidos entre 1 e 7. Nem todos os agentes poderão representar

os 7 tamanhos na sua totalidade. Um aumento relativo do tamanho da fonte. O valor "+1"
corresponde a um tamanho maior. O valor "-3" corresponde à redução de três tamanhos.
Todos os tamanhos pertecem à escala compreendida entre 1 e 7.
color = color [CI] Deprecado! Este atributo

define a cor do texto.
face = cdata [CI]
Deprecado! Este atributo define uma lista de nomes (separados por uma vírgula) dos tipos
de fonte que o agente deverá procurar, segundo a sua ordem de preferência.

id, class (identificadores ao longo do documento) lang (informação da linguagem), dir (direcção do
texto) title (título do elemento) style (Informação do estilo em linha (inline))
O elemento FONT é responsável pela mudança do tamanho da fonte e da cor do texto

e dos seus conteúdos.
O elemento BASEFONT define o tamanho básico da fonte (através do atributo size). As alterações do
tamanho da fonte obtidas através de FONT, referem-se ao tamanho básico da fonte que foi definido por
BASEFONT. Se o elemento BASEFONT não for usado, o valor básico por defeito do tamanho da fonte é
igual 3.
EXEMPLO DEPRECADO: O exemplo que se segue estabelece a diferença entre os sete tamanhos
de fonte disponíveis e o elemento FONT:
<P><font size=1>tamanho=1</font><font size=2>tamanho=2</font><font
size=3>tamanho=3</font><font size=4>tamanho=4</font><font size=5>tamanho=5</font><font
size=6>tamanho=6</font><font size=7>tamanho=7</font>
Isso poderá ser representado pelos agentes da seguinte forma:
O exemplo que se segue ilustra-nos o efeito que os tamanhos de fonte relativos têm, ao usar-se um
tamanho básico de valor 3:
O tamanho básico da fonte não se aplica aos cabeçalhos, excepto se eles forem modificados, usando
o elemento FONT com uma mudança do tamanho
relativo da fonte.
15.3 Linhas horizontais: o elemento HR

<!ELEMENT HR - O EMPTY – linha horizontal -->
<! ATTLIST HR %attrs;
--%coreattrs,
%i18n, %events ->
"tag" de abertura: required, "tag" de encerramento: proíbida
align = left|center|right [CI] Deprecated. Este atributo especifica o alinhamento horizontal

da linha em relação ao contexto que a circunda. Valores possíveis:
left: a linha é exibida à esquerda. center: a linha é centrada.

right: a linha é exibida à direita.
O valor por defeito é align=center.
noshade [CI] Deprecado! Se definido, este atributo boleano requer que o agente exiba a linha
numa cor sólida, em vez das duas cores tradicionais.
size = pixels [CI] Deprecado! Este atributo especifica a altura da linha. O valor atribuído
por defeito para este atributo varia de agente para agente.
width = length [CI] Deprecado! Este atributo especifica a largura da linha. A largura por
defeito é de 100%, o que significa que a linha preenche horizontalmente a tela do monitor.
id, class (identificadores ao longo do documento) lang (informação da linguagem), dir (direcção
do texto) title (título do elemento) style (Informação do estilo em linha (inline)) onclick,
ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup (acontecimentos intrínsecos)
O elemento HR faz com que a linha horizontal seja exibida pelos agentes visuais.
O total do espaço vertical inserido entre uma linha e o conteúdo que a rodeia varia de agente para
agente.
EXEMPLO DEPRECADO: Neste exemplo, a linha é centrada e redimensionada para a metade da

largura que está disponível entre as margens. A linha de cima tem uma largura por defeito, ao passo
que as duas linhas do fim têm uma largura de 5 pixels. A linha do fim deverá ser exibida numa cor
sólida sem sombreamento:
<HR width="50%" align="center"><HR size="5" width="50%" align="center"><HR noshade
size="5" width="50%" align="center">
Estas linhas poderão se representadas da seguinte forma:
Anterior Próximo Índice Elementos Atributos Índice analítico

Formatação de texto e elementos de estilo

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Formatação de texto e elementos de estilo

Uploaded by

Copyright:

Available Formats

15 Alinhamentos, estilo das fontes e tabulações

align = left|center|right|justify [CI] Deprecado! Este atributo especifica o alinhamento

EXEMPLO DEPRECADO: Neste exemplo, o cabeçalho está centrado na tela do monitor.

EXEMPLO DEPRECADO: Similarmente, para se alinhar um parágrafo à direita na tela do monitor

o qual em CSS teria o seguinte aspecto:

Em CSS, a propriedade de alinhamento do texto é herdada do elemento parente, de forma que

Para centrar o documento inteiro com CSS:

O elemento CENTER equivale exactamente à especificação do elemento DIV com o atributo

15.1.3 Objectos flutuantes

Fazer flutuar um objecto

Texto flutuante à volta de um objecto

Considere o seguinte cenário visual, no qual

o texto flui à direita de uma imagem, até se dar a

15.2.1 Elementos do estilo da fonte: os elementos TT, I, B, BIG, SMALL, STRIKE, S e U

"tag" de abertura: requerida, "tag" de encerramento: requerida

Atributos definidos noutros lugares:

TT: exibe o texto em teletipo ou mono-espaço.

A próxima frase exemplifica-nos vários tipos de texto:

Estas palavras poderão se representadas da seguinte forma:

Os elementos referentes ao estilo da fonte terão que ser devidamente encaixados. A

15.2.2 Elementos que modificam a fonte: FONT e BASEFONT

Ver o capítulo DTD Transitiva, relativamente à definição formal.

size = cdata [CN] Deprecado! Este atributo define o tamanho da fonte.

Números íntegros compreendidos entre 1 e 7. Nem todos os agentes poderão representar

color = color [CI] Deprecado! Este atributo

Atributos definidos noutros lugares:

O elemento FONT é responsável pela mudança do tamanho da fonte e da cor do texto

Isso poderá ser representado pelos agentes da seguinte forma:

15.3 Linhas horizontais: o elemento HR

"tag" de abertura: required, "tag" de encerramento: proíbida

align = left|center|right [CI] Deprecated. Este atributo especifica o alinhamento horizontal

left: a linha é exibida à esquerda. center: a linha é centrada.

O valor por defeito é align=center.

Atributos definidos noutros lugares:

EXEMPLO DEPRECADO: Neste exemplo, a linha é centrada e redimensionada para a metade da

Estas linhas poderão se representadas da seguinte forma:

Anterior Próximo Índice Elementos Atributos Índice analítico

You might also like