15
Aliñamento, estilos de tipos de letra e liñas horizontais
Esta sección da especificación trata de alguns elementos
e atributos da HTML que se poden usar para o formatado visual dos elementos.
Moitos deles están desaprovados
.
15.1
Formatado
Definicións dos atributos
- bgcolor
= color
[CI]
- Desaprovado.
Este atributo asigna a cor de fondo para o corpo do documento
ou as celas da tabela.
Este atributo asigna a cor de fondo da tela do corpo do documento (o
elemento
BODY
) ou das tabelas (os elementos
TABLE
,
TR
,
TH
, e
TD
). Poden-se usar atributos adicionais para especificar a cor do
texto co elemento
BODY
.
Este atributo está desaprovado
en favor de follas de estilo para especificar información
sobre a cor de fondo.
É posíbel aliñar elementos de bloco (tabelas,
imaxes, obxectos, parágrafos, etc.) na tela co atributo
align . Ainda que este atributo pode indicar-se para moitos
elementos HTML, o seu rango de valores posíbeis difire às
veces entre elemento e elemento. Aqui só se trata o significado
do atributo align para o texto.
Definicións dos atributos
- align
= left|center|right|justify
[CI]
- Desaprovado.
Este atributo especifica o aliñamento horizonal do seu
elemento a respeito do contexto que o rodea. Valores posíbeis:
- left: as liñas de texto mostran-se aliñadas
à esquerda.
- center: as liñas de texto están
centradas.
- right: as liñas de texto mostran-se
aliñadas à direita.
- justify: as liñas de texto están
xustificadas nas duas marxes.
O valor por omisión depende da dirección de texto
base. Para o texto de esquerda a direita, o valor por omisión
é align=left, mentres que para o texto de direita
a esquerda, o valor por omisión é align=right
.
EXEMPLO DESAPROVADO:
Este exemplo centra un título na tela.
<H1 align="center"> Como tallar a madeira </H1>
Usando CSS, por exemplo, poderia-se atinxir o mesmo efecto da seguinte
maneira:
<HEAD>
<TITLE>Como tallar a madeira</TITLE>
<STYLE type="text/css">
H1 { text-align: center}
</STYLE>
<BODY>
<H1> Como tallar a madeira</H1>
Observe-se que isto centraria todas as declaracións
H1
. Poderia-se reducir o rango do estilo incluindo o atributo
class
do elemento:
<HEAD>
<TITLE>Como tallar a madeira</TITLE>
<STYLE type="text/css">
H1.madeira {text-align: center}
</STYLE>
<BODY>
<H1 class="madeira"> Como tallar a madeira</H1>
De maneira semellante, para aliñar
un parágrafo na direita na tela co atributo
align
de HTML, poderia-se facer:
EXEMPLO DESAPROVADO:
<P align="right">...Moito texto de parágrafo...
que, con CSS, seria:
<HEAD>
<TITLE>Como tallar a madeira</TITLE>
<STYLE type="text/css">
P.omeuparag {text-align: right}
</STYLE>
<BODY>
<P class="omeuparag">...Moito texto de parágrafo...
EXEMPLO DESAPROVADO:
Para aliñar unha série de parágrafos à
direita, agrupe-os co elemento
DIV
:
<DIV align="right">
<P>...texto do primeiro parágrafo...
<P>...texto do segundo parágrafo...
<P>...texto do terceiro parágrafo...
</DIV>
Con CSS, a propriedade de aliñamento do texto herda-se do
elemento pai, asi que se pode usar:
<HEAD>
<TITLE>Como tallar a madeira</TITLE>
<STYLE type="text/css">
DIV.osmeusparags {text-align: right}
</STYLE>
<BODY>
<DIV class="osmeusparags">
<P>...texto do primeiro parágrafo...
<P>...texto do segundo parágrafo...
<P>...texto do terceiro parágrafo...
</DIV>
Para centrar todo o documento con CSS:
<HEAD>
<TITLE>Como tallar a madeira</TITLE>
<STYLE type="text/css">
BODY {text-align: center}
</STYLE>
<BODY>
...o corpo está centrado...
</BODY>
O elemento CENTER
equivale exactamente a especificar o elemento
DIV
co atributo
align
posto en "center". O elemento
CENTER
está desaprovado
.
As imaxes e obxectos poden aparecer directamente "na liña"
ou poden-se facer flutuar a un lado da páxina, alterando temporariamente
as marxes de texto que poden fluir a calquer lado do obxecto
O atributo
align
para obxectos, imaxes, tabelas, molduras, etc., fai que o obxecto
flutue para a marxe esquerda ou direita. Os obxectos flutuantes normalmente
comezan unha nova liña. Este atributo toma os valores seguintes:
- left: Fai que o obxecto flutue na marxe esquerda
actual. O texto posterior flue ao longo do lado direito da imaxe.
- right: Fai que o obxecto flutue na marxe direita
actual. O texto posterior flue ao longo do lado esquerdo da imaxe.
EXEMPLO DESAPROVADO:
O exemplo seguinte mostra como facer flutuar un elemento
IMG
na marxe esquerda actual da tela.
<IMG align="left" src="http://calquer.com/unhaimaxe.gif" alt="a miña dorna">
Alguns atributos de aliñamento tamén permiten o valor
"center", que non fai flutuar, senón que centra o obxecto dentro
das marxes actuais. Porén, para
P
e
DIV
, o valor "center" fai que os conteúdos do elemento se centren.
Outro atributo, definido para o elemento
BR
controla o
fluxo de texto arredor dos obxectos flutuantes.
Definicións dos atributos
- clear
= none|left|right|all
[CI]
- Desaprovado.
Especifica onde deberia aparecer a seguinte liña nun
navegador visual despóis do salto de liña provocado
polo elemento. Este atributo ten en conta os obxectos flutuantes
(imaxes, tabelas, etc.). Valores posíbeis:
- none: A liña de texto comezará
normalmente. É o valor por omisión.
- left: A liña seguinte comezará
na liña máis próxima por baixo de calquer
obxecto flutuante na marxe esquerda.
- right: A liña seguinte comezará
na liña máis próxima por baixo de calquer
obxecto flutuante na marxe direita.
- all: A liña seguinte comezará
na liña máis próxima por baixo de calquer
obxecto flutuante en calquer marxe.
Considere o seguinte cenário visual, no que o texto
flue à direita dunha imaxe até que a liña é
rota por un
BR
:
********* -------
| | -------
| imaxe | --<BR>
| |
*********
Se o atributo
clear
se fixa en none, a liña que segue a
BR
comezará imediatamente por baixo del na marxe direita da
imaxe:
********* -------
| | -------
| imaxe | --<BR>
| | ------
*********
EXEMPLO DESAPROVADO:
Se o atributo
clear
se fixa en left ou all, a liña
seguinte aparecerá como segue:
********* -------
| | -------
| imaxe | --<BR clear="left">
| |
*********
-----------------
Usando follas de estilo pode-se especificar que todos os saltos
de liña se comporten asi cos obxectos (imaxes, tabelas, etc.)
que flutuen contra a marxe esquerda. Con CSS poderia-se lograr isto
deste xeito:
<STYLE type="text/css">
BR { clear: left }
</STYLE>
Para especificar este comportamento nun uso determinado do
elemento
BR
, poderia combinar información de estilo e o atributo
id
:
<HEAD>
...
<STYLE type="text/css">
BR#omeubr { clear: left }
</STYLE>
</HEAD>
<BODY>
<P>...
********** -------
| | -------
| tabela | --<BR id="omeubr">
| |
**********
-----------------
...
</BODY>
Os elementos HTML seguintes especifican información
sobre o tipo de letra. Ainda que non todos estexan
desaprovados
, desaconsella-se o seu uso en favor das follas de estilo.
Etiqueta inicial: requerida, Etiqueta
final: requerida
Atributros que se definen noutro sítio
-
id
,
class
(identificadores únicos
para todo o documento
)
-
lang
(información
sobre o idioma
),
dir
(dirección
do texto
)
-
title
(título do elemento
)
-
style
(información
de estilo na liña
)
-
onclick
,
ondblclick
,
onmousedown
,
onmouseup
,
onmouseover
,
onmousemove
,
onmouseout
,
onkeypress
,
onkeydown
onkeyup
(acontecimentos intrínsecos
)
A representación de elementos de estilo de tipo de letra
depende do axente de usuário. O que segue é só unha
descrición informativa.
- TT: Mostra-se como texto de teletipo ou monoespazo.
- I: Mostra-se como estilo de texto cursivo.
- B: Mostra-se como estilo de texto negrito.
- BIG: Mostra o texto en tipo de legra "grande".
- SMALL: Mostra o texto en tipo de letra "pequeno".
- STRIKE e S:
Desaprovados.
Mostra estilo de texto tachado.
- U:
Desaprovado.
Mostra texto subliñado
A oración seguinte mostra vários
tipos de texto:
<P>Texto en <b>negrita</b>,
<i>cursiva</i>, <b><i>negrita cursiva</i></b>, <tt>teletipo</tt>, e
texto <big>grande</big> e <small>pequeno</small>.
Estas palabras poderian-se mostrar como segue:
É posíbel atinxir unha variedad
moito máis rica de efectos de tipos de letra co uso de follas
de estilo. Para especificar texto nun parágrafo en cursiva e
azul con CSS:
<HEAD>
<STYLE type="text/css">
P#mypar {font-style: italic; color: blue}
</STYLE>
</HEAD>
<P id="omeuparag">...Moito texto en cursiva e azul...
Os elementos de estilo do tipo de letra deben
estar aniñados adecuadamente. Como se mostren os elementos de
estilo do tipo de letra aniñados depende o axente de usuário.
FONT
e
BASEFONT
están desaprovados
.
Ver a
DTD transicioanl
para a definición formal.
Definicións dos atributos
-
size
= cdata
[CN]
-
Desaprovado.
Este atributo indica o tamaño do tipo de letra. Valores
posíbeis:
- Un número inteiro entre 1 e
7. Isto fai que o tipo de letra teña un tamaño fixo,
cuxa representación depende do axente de usuário.
Non todos os axentes de usuário poderán mostrar
os sete tamaños.
- Un incremento relativo no tamaño
do tipo de letra. O valor "+1" significa un tamaño máis
grande. O valor "-3" indica tres tamaños máis
pequeno. Todos os tamaños pertencen à escala de
1 a 7.
-
color
= color
[CI]
-
Desaprovado.
Este atributo indica a cor do texto.
-
face
= cdata
[CI]
-
Desaprovado.
Este atributo define unha lista separada por vírgulas
de nomes de tipos de letra que o axente de usuário deberia
procurar en orde de preferéncia.
Atributos que se definen noutro
sítio
O elemento
FONT
muda o tamaño e cor da letra do texto no seu conteúdo.
O elemento
BASEFONT
indica o tamaño de letra base (usando o atributo
size). As alteracións no tipo de letra feitas con
FONT
son relativas ao tamaño de letra base indicado por
BASEFONT
. Se non se usar
BASEFONT
o tamaño da letra por omisión é 3.
EXEMPLO
DESAPROVADO:
O exemplo seguinte mostra a diferenza entre os sete tamaños
de letra disponíbeis con
FONT
:
<P><font size=1>tamaño=1</font>
<font size=2>tamaño=2</font>
<font size=3>tamaño=3</font>
<font size=4>tamaño=4</font>
<font size=5>tamaño=5</font>
<font size=6>tamaño=6</font>
<font size=7>tamaño=7</font>
Isto poderia-se mostrar asi.
O seguinte mostra un exemplo do efecto
de tamaños de letra relativos usando un tamaño de letra
base 3:
O tamaño de letra base non
se aplica aos títulos, exceito cando estes se modifican usando
o elemento
FONT
cun cámbio de tamaño de letra relativo.
15.3
Liñas horizontais: o elemento
HR
Etiqueta inicial: requerida
, Etiqueta final: proibida
Definicións dos atributos
-
align
= left|center|right
[CI]
-
Desaprovado.
Este atributo especifica o aliñamento horizontal da liña
a respeito do contexto que a rodea. Valores posíbeis:
- left: a liña
mostra-se aliñada à esquerda.
- center: a
liña está centrada.
- right: a
liña mostra-se aliñada à direita.
O valor por omisión é
align=center.
-
noshade
[CI]
-
Desaprovado.
Cando se selecciona, este atributo booleano pide que o axente
de usuário mostre a liña en cor sólida en vez
do "sulco" de duas cores.
-
size
= pixels
[CI]
-
Desaprovado.
Este atributo especifica a altura da liña. O valor por
omisión deste atributo depende do axente de usuário.
-
width
= length
[CI]
-
Desaprovado.
Este atributo especifica o ancho da liña. O ancho por
omisión é 100%, ou sexa, a regra extende-se ao longo
de toda a tela.
Atributos que
se definen noutro sítio
-
id
,
class
(identificadores únicos
para todo o documento
)
-
lang
(información
sobre o idioma
),
dir
(dirección
do texto
)
-
title
(título do elemento
)
-
style
(información
de estilo na liña
)
-
onclick
,
ondblclick
,
onmousedown
,
onmouseup
,
onmouseover
,
onmousemove
,
onmouseout
,
onkeypress
,
onkeydown
,
onkeyup
(acontecimentos intrínsecos
)
O elemento
HR
fai que os axentes de usuário visuais mostren unha liña
horizontal.
A cantidade de espazo
vertical inserido entre unha liña e o conteúdo que a rodea
depende do axente de usuário.
EXEMPLO DESAPROVADO:
Este exemplo centra as liñas, redimensionando-as à
metade do ancho entre as marxes. A liña superior ten o ancho
por omisión, encanto que as duas de embaixo teñen 5
pontos. A liña do fondo deberia ser mostrada en cor sólido,
sen sombra:
<HR width="50%" align="center">
<HR size="5" width="50%" align="center">
<HR noshade size="5" width="50%" align="center">
Estas regras poderian-se
mostrar como segue:
