4. Os párrafos dun documento HTML

No apartado anterior habemos aprendido a controlar a aparencia dos caracteres. (Lembra, de todas as maneiras, que a etiqueta <FONT> está en desuso.) Imos agora a estudar as etiquetas fundamentais que controlan a organización dos parágrafos nun texto máis complexo.

• Xa coñecemos un tag que afecta as liñas: <BR>. Se desexamos que unha liña non se parta ao chegar ao final da xanela do navegador, debemos colocar ao comezo a etiqueta <NOBR>, e o navegador colocará entón un scroll ou barra de desprazamento horizonal.
• Por suposto, se queremos que haxa máis liñas, ao final si deberá aparecer <BR>

---

4.1. Os párrafos e o seu aliñamiento

• A etiqueta <BR>insere un salto de liña, pero non un salto de parágrafo. En cambio, a etiqueta <P>...</P> insere un salto de liña e unha liña en branco, polo que, na práctica, equivale a un novo parágrafo.
• Por suposto, tanto <BR> como <P>...</P> poden repetirse varias veces seguidas para deixar máis distancia entre as liñas e os parágrafos.
• De todas as maneiras, só podemos separar os parágrafos con liñas completas (unha, dúas, etc.), pero non podemos controlar o espazo entre os parágrafos coa precisión que permite, por exemplo, o programa Word (coas opcións de espaciado anterior e posterior)
• Un parágrafo pode aliñarse introducindo os seguintes atributos na etiqueta habitual:

• As etiquetas anteriores permiten aliñar os parágrafos enteiros, pero sempre deixando unha liña baleira diante de cada un delas. Hai algunha maneira de aliñar independentemente liñas ou grupos de liñas? Si, coas seguintes etiquetas:

• En definitiva, dispomos de varias etiquetas similares para a creación e a aliñación dos parágrafos, que serán máis ou menos apropiadas dependendo das ocasións. Vexamos como funcionan nunha páxina web:

Ver resultado

• Outra etiqueta que afecta á aliñación dos parágrafos é<BLOCKQUOTE>...<BLOCKQUOTE>, que introduce unha dobre sangría, dereita e esquerda. Poden colocarse varias etiquetas seguidas para acentuar a sangría, como se observa no seguinte exemplo:

Ver resultado

---

4.2. Os títulos

• Poden utilizarse até seis tipos de títulos nun documento HTML, ordenados xerárquicamente por medio da etiqueta <Hn>...</Hn>, onde n = 1 a 6.
• As etiquetas dos títulos introducen unha liña superior en branco. Como o habitual despois dun título é un novo parágrafo (<P>), que tamén introduce a súa propia liña, o resultado final adoita ser que unha liña de título ten unha liña en branco antes e outra despois.
• As etiquetas dos títulos admiten indicacións de aliñación, da mesma maneira que a etiqueta de parágrafo.
• Vexamos que aspecto teñen os títulos dun documento HTML:

Ver resultado

• Este exemplo permite expor o seguinte exercicio:

---

4.3. As listas

• As listas son elementos que, como os títulos, permiten presentar niveis xerarquizados de texto.
• Os documentos HTML permiten dous tipos de listas:

• 1. Listas non ordeadas (bullet list): A súa etiqueta principal é <UL>...</UL>.
  2. Listas ordeadas ou numeradas (numbered list): A súa etiqueta principal é <OL>...</OL>.
  3. Listas de definicions (definition list): A súa etiqueta principal é <DL>...</DL>
  .
• Unha vez definido o tipo de lista desexada, os elementos que a compoñen márcanse de distinta maneira segundo o tipo:As listas pódense encaixar unhas dentro doutras, ademais de con o resto das etiquetas dispoñibles. Vemos algún exemplo:

• 1. Nas listas ordeadas (<OL>...</OL>) ou non ordeadas (<UL>...</UL>), cada elemento da dita lista marcase coa etiqueta <LI>...</LI> (list item).
  2. Nas listas de definición (<DL>...</DL>), utilízanse dous: cada elemento que se define márcase con <DT>...</DT> e o texto de cada definición márcase con <DD>...</DD>. Esta etiqueta pódese repetir se se necesita introducir varios elementos de definición.

Ver resultado

• As listas admiten varios parámetros, que varían segundo o tipo de lista:

• 1. As tres listas admiten o parámetro COMPACT, que fai que o navegador presente a lista da maneira máis compacta posible.
  2. O parámetro TYPE funciona coas dúas primeiras listas. Os seus valores respectivos son, loxicamente, distintos:
     
     • A etiqueta <OL start="n"> indica o número polo que empeza a lista numerada.
     • Nas numeradas, controla o tipo de numeración: con números árabes (<UL type="disc">, a opción por defecto), de círculo (<UL type="circle">) e de cadrado (<UL type="square">).
     • Nas numeradas, controla o tipo de numeración: con números árabes (<OL type="1">, a opción por defecto), romanos (<OL type="I">), romanos en minúsculas (<OL type="i">), letras maiúsculas (<OL type="A">) e minúsculas (<OL type="a">).
  3. Nunha lista numerada, pódese cambiar o número dun elemento -e conseguintemente dos posteriores- coa etiqueta <LI value="n">.

---

4.4. As raias horizontais.

• As raias horizontais son outro dos procedementos habituais para separar os contidos dun documento HTML. Introdúcense simplemente coa etiqueta <HR>.
• Hai unha serie de características das raias que poden controlarse, como sempre, por medio de parámetros engadidos á etiqueta básica:Como sempre, o habitual adoita ser a combinación de varios parámetros nunha mesma etiqueta. Por exemplo:

• 1. O tamaño: A etiqueta <HR> introduce unha raia que ocupa todo o ancho da pantalla. Poden especificarse distintas anchuras engadindo o valor desexado, expresado en pixeles (<HR width="n">) ou en termos porcentuais (<HR width="n%">).
  2. A alineación: cando unha raia ocupa só unha parte da pantalla, pode especificarse a súa aliñación por medio das etiquetas habituais:
     
     <HR align="left">
     <HR align="center">
     <HR align="right">
  3. A altura: Exprésase en píxeles por medio da etiqueta <HR size="n">. Pode adoptar o valor 0 (a raia máis fina).
  4. A cor: Por medio do párametro habitual: <HR color="?">.
  5. O sombreado: A raia posúe habitualmente un pequeno efecto de sombreado, que pode eliminarse coa etiqueta <HR noshade>.

• Non queda senón practicar coas distintas posibilidades de raias. Por exemplo:

EXEMPLO 9

<HTML>

<HEAD>

<TITLE>Ejemplo 9</TITLE>

</HEAD>

<BODY>

Esta é unha liña normal:

<HR>

Esta é unha liña normal, sen sombreado:

<HR noshade>

Esta é unha liña que ocupa a metade da pantalla (se non se establece a aliñación, colócase centrada por defecto):

<HR width="50%">

Esta é máis estreita e moito máis gorda:

<HR width="10%" size="20">

Esta é igual pero de cor vermella:

<HR width="10%" size="20" color="#FF0000">

</BODY>

</HTML>

Ver resultado