HTML/Formatar texto

En Wikibooks, o Galilibros en galego.

A meirande parte dunha páxina web está formada por parágrafos, estruturados co uso de títulos. Tamén inclúe outros elementos, coma citas. Asemade, podemos salientar fragmentos de texto, engadir definicións definicións de abreviaturas, etc.

[editar] Títulos

Unha boa forma de estruturar un documento é dividilo en seccións. Para facelo en HTML, valerémonos de títulos.

Hai seis nivéis de títulos. O título ou títulos máis importantes dun documento deberían ser de nivel un. Os subtítulos destes deberían ser de nivel dous. Os seguintes de nivel tres, e así ata chegar ao nivel seis. Non se recomenda saltarse nivéis. Se os tamaños de letra non lle quedan ben ao documento, o mellor é utilizar follas de estilo para cambialos. Os títulos están para esquematizar correctamente o contido. Deste xeito, os usuarios poden atopar información con maior rapidez (como por exemplo, na Wikipedia), e algúns motores de busca utilizan os títulos para axudar a valorar o contido da páxina.

 <h1>Isto é o nivel 1</h1>

 <h3>Isto é o nivel 3</h3>

 <h5>Isto é o nivel 5</h5>

[editar] Atributos desaconsellados

Os títulos poden levar certos atributos na súa etiqueta inicial, aínda que o seu uso está desaconsellado, recomendándose o uso de follas de estilo no seu lugar.

align

Con este atributo podemos elixir a aliñación do título. Os seus posibles valores son left (á esquerda), center (centrado) e right (á dereita). O seu valor por defecto é left.

[editar] Parágrafos

O elemento p é o compoñente básico da edición de textos. As súas etiquetas, <p> e </p> (esta última opcional, pero recoméndase utilizala), delimitan un parágrafo dun texto, creando un salto de liña adicional tras o texto antes de continuar co documento. Vexamos un exemplo:

  <p>Un parágrafo de introdución.</p>
  <p>Un segundo parágrafo.</p>

[editar] Atributos

Os seus principais atributos son id, class, style, title, lang, dir e align.

align

Con este atributo podemos elixir a aliñación do parágrafo. Os seus posibles valores son left (á esquerda), center (centrado) e right (á dereita). O seu valor por defecto é left.

[editar] Saltos de liña

Como xa notariamos a estas alturas, un salto de liña no código HTML non implica un salto de liña na visualización do texto logo nun navegador. Para facer un salto de liña que sexa visualizable dende o navegador, temos que valernos dunha etiqueta.

Para facer saltos de liña, utilízase o elemento br. Este elemento consta dunha única etiqueta, que pode escribirse ben <br /> (recomendada), ben simplemente <br>. Recoméndase utilizar a primeira forma porque ademais de ser válida en HTML, tamén o é en XHTML.

Posto que o elemento br fai o salto de liña, no código non fai falla facer salto de liña algún. Así e todo, moitas veces é recomendable, para facilitar a comprensión do documento, que con cada salto de liña que introduzamos no código co elemento br fagamos un salto de liña tamén. É dicir, en vez de escribir o código:

Isto vai na primeira liña,<br />e isto na segunda.

A meirande parte das veces será recomendable escribir:

Isto vai na primeira liña,<br />
e isto na segunda.

Se ben ambos os dous códigos darían por resultado:

[editar] Citas

Existen tres elementos que permiten plasmar citas nos documentos web.

[editar] q

O elemento q utilízase para facer citas curtas. Por exemplo:

<q>Esta é unha cita curta ten unha extensión reducida
(dunhas 25 palabras, por exemplo)...</q>

[editar] cite

O elemento cite utilízase para sinalar a fonte ou o autor dunha cita. Por exemplo:

<cite>Anónimo</cite> dixo unha vez: <q>O carallo vintenove!</q>

[editar] blockquote

O elemento blockquote serve para plasmar no noso documento web citas longas. Por exemplo:

<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
  reprehenderit in voluptate velit esse cillum dolore eu fugiat
  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</blockquote>

Exemplo de renderizado:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[editar] Salientar

HTML conta con dous niveis de salientado:

• O elemento em para salientar texto, normalmente renderizado coma letra cursiva.
• O elemento strong para salientar moito un texto, normalmente renderizado coma letra grosa.

Velaquí un exemplo de texto salientado:

O importante non é planificar os resultados, senón <em>velos</em>.

Un exemplo de renderizado:

E velaquí outro de texto moi salientado:

Centrémonos agora na <strong>etiquetaxe estrutural</strong>.

Un exemplo de renderizado:

Os navegadores gráficos adoitan presentar os textos salientados coas etiquetas <em></em> en letra cursiva (o mesmo efecto que opteriamos coas etiquetas <i></i>). Porén, os lectores de pantalla, navegadores que lle len a páxina ao usuario, o que fan é pronunciar as palabras salientadas de forma distinta.

É frecuente confundir a apariencia do elemento no noso navegador favorito co verdadeiro significado do elemento. Esta é unha das razóns polas que se debería usar máis dun navegador web para probar as páxinas que desenvolvemos. O ideal sería usar un ou varios navegadores gráficos, un navegador en modo texto e un lector de pantalla.

A presentación por defecto de cada elemento pode cambiarse con follas de estilo.

[editar] Subíndices e superíndices

Para introducir un subíndice nun documento HTML utilízanse as etiquetas e . Para un superíndice, utilízanse as etiquetas e . Velaquí un exemplo:

O código:

Exemplo<sub>Subíndice</sub> e exemplo<sup>Superíndice</sup>. Metros cadrados sería m<sup>2</sup>, por exemplo.

Podería renderizarse coma:

[editar] Definicións

[editar] dfn

O elemento dfn indica que o texto limitado polas súas etiquetas inicial e final é unha definición.

[editar] abbr

O elemento abbr utilízase para indicar que o texto marcado é unha abreviatura, e fornecer a súa definición, como por exemplo:

<abbr title="HyperText Markup Language">HTML</abbr>

Os navegadores gráficos adoitan amosar o texto ben normal, ben subliñado cunha liña discontinua. O título (title) aparece nun cadro de axuda ao situar o cursor enriba. Os lectores de pantalla poderían ler o título a petición do usuario.

[editar] acronym

O elemento acronym utilízase para sinalar un texto como acrónimo, e fornecer a súa definición. Úsase do mesmo xeito que o elemento abbr, e de feito ás veces úsase no lugar de abbr debido á súa compatibilidade con navegadores web vellos.

[editar] Texto preformatado

O texto preformatado renderízase utilizando un tipo de letra con ancho fixo, e considerando múltiples espazos coma un só. Os saltos de liña renderízanse como tales, ao contrario do que se fai noutras ocasións. Os navegadores seguen a interpretar as etiquetas HTML nos textos preformatados, polo que "<em>a</em>" seguirá a ser renderizado coma "a".

Para crear texto preformatado, comézao con <pre> e remátao con </pre>.

Velaquí un exemplo:

<pre>
,-----------------------,
| Nº  | Persoa          |
|-----------------------|
| 1.  | Arturo Cuadrado |
| 2.  | Francisco Otero |
'-----------------------'
</pre>

Dará como resultado ao renderizalo:

,-----------------------,
| Nº  | Persoa          |
|-----------------------|
| 1.  | Arturo Cuadrado |
| 2.  | Francisco Otero |
'-----------------------'

Se o mesmo texto o renderizasemos sen limitalo polas etiquetas de texto preformatado, obteriamos:

,-----------------------, | Nº | Persoa | |-----------------------| | 1. | Arturo Cuadrado | | 2. | Francisco Otero | '-----------------------'

[editar] Carácteres especiais

Para introducir caracteres que non sexan estándar ou que teñan un significado especial en HTML, fai falla un carácter de referencia. Por exemplo, para introducir o símbolo "&" fai falla escribir "&amp;".

Véxase o apéndice Caracteres especiais para unha lista deles.

[editar] Formatado desaconsellado

O HTML soporta unha serie de elementos de formatado cuxo uso está desaconsellado, aconsellándose no seu lugar o uso de follas de estilo en cascada. Botémoslle unha ollada ao formatado desaconsellado, de xeito que poidas saber o que é cando o vexas nalgún sitio web, e saibas substituílo por formato CSS. Algúns elementos están simplemente desaconsellados, mentres que outros están ademais obsoletos.

[editar] Follas de estilo

O uso de elementos estilísticos coma <b> para letra grosa ou <i> para letra cursiva é moi doado, pero por desgraza asocia as capas de presentación e de contido. Grazas ao uso de follas de estilo, o autor dun documento HTML pode desligar estas dúas partes diferenciadas de xeito que un documento etiquetado correctamente pode renderizarse de diversas maneiras deixando o documento en si intacto. Así, por exemplo, se o editor quixese que as referencias citadas pasasen de estar en letra curvada a estar en letra grosa, só sería necesario cambiar a folla de estilo e non ir por todo o documento cambiando <b> por <i>. As follas de estilo permítenlle ademais ao lector tomar estas decisións, ignorando as do editor.

Agora imaxinemos que o editor etiquetou correctamente todos os seus documentos con referencias a material citado (coma pode ser o nome dun libro) nos documentos coa etiqueta <cite>.

<cite>Wikipedia, a enciclopedia libre</cite>

Daquela, para que todas as referencias estivesen en letra grosa, sería necesario poñer algo coma isto na folla de estilo:

 cite { font-weight: bold; }

Máis adiante, alguén pode dicir que as referencias teñen que aparecer necesariamente en letra cursiva. Antes da existencia de CSS, era necesario ir dedocumento en documento, cambiando <b> e </b> por <i> e </i> (pero coidando de cambialo só cando se tratase de ditas referencias). Con CSS, é tan doado coma unha liña da folla de estilo a

 cite { font-style: italic; }

Como comentaremos máis adiante, estaría ben que unha vez dominemos o HTML aprendesemos a utilizar as follas de estilo. É coma o seguinte paso natural.