15 Aliñamento, estilos de tipos de letra e liñas horizontais

Índice

  1. Formatado
    1. Cor de fondo
    2. Aliñamento
    3. Obxectos flutuantes
  2. Tipos de letra
    1. Elementos de estilos de tipos de letras: os elementos TT , I, B , BIG, SMALL , STRIKE, S , e U
    2. Elementos modificadores do tipo de letra: FONT e BASEFONT
  3. Liñas horizontais: o elemento HR

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

15.1.1 Cor de fondo

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.

15.1.2 Aliñamento

É 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 .

15.1.3 Obxectos flutuantes

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

Facer flutuar un 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:

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.

Facer fluturar texto arredor dun obxecto  

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>

15.2 Tipos de letra

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.

15.2.1 Elementos de estilo de tipo de letra : 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 --
>

Etiqueta inicial: requerida, Etiqueta final: requerida

Atributros que se definen noutro sítio

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:

An example of rendering of various font styles

É 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.

15.2.2 Elementos modificadores do tipo de letra: FONT e BASEFONT

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.

Example of rendering of various font sizes

O seguinte mostra un exemplo do efecto de tamaños de letra relativos usando un tamaño de letra base 3:

Example of rendering of various font sizes with a basefont

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

<!ELEMENT HR - O EMPTY -- liña horizontal -->
<!ATTLIST HR
%attrs; -- %coreattrs, %i18n, %events --
>

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

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:

Example of rendering of various horizontal rules