Академический Документы
Профессиональный Документы
Культура Документы
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.
Definições do atributo
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.
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:
<HEAD> <TITLE>Como talhar a madeira</TITLE> <STYLE type="text/css">
H1.wood {text-align: center}</STYLE><BODY> <H1 class="wood"> Como talhar a madeira </H1>
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>
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.
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.
Um outro atributo, definido para o elemento BR, controla o fluxo do texto à volta dos objectos
flutuantes.
Definições do atributo
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.
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.
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.
É 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...
Definições do atributo
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>
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.
Definições do atributo
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.