© Jordi González Boada
Dar formato al texto III
Alineación del texto
Para mostrar un texto centrado se puede utilizar la etiqueta <center>...</center>, aunque esta etiqueta a sido desaprobada.
Otra opción, también desaprobada, es mediante el uso del atributo align aplicado a cualquiera de estas dos etiquetas:
- <p>...</p>: etiqueta de párrafo, añade un salto de párrafo antes y después de la etiqueta.
- <div>...</div>: contenedor genérico bloque de nivel, añade un salto de línea antes y después de la etiqueta.
Los valores que puede tomar el atributo align son:
- Left: alinea el texto a la izquierda.
- Right: alinea el texto a la derecha.
- Center: alinea el texto al centro.
- Justify: alinea el texto a ambos lados -izquierda y derecha-, es como podéis ver los párrafos de este curso.
Veamos algún ejemplo:
<p align="center">...</p>:
Ayer murió una tortuga
<div align="right">...</div>:
Ayer murió una tortuga
Ahora que ya se han visto las formas de alinear el texto que no se deben utilizar veremos la manera recomendada. La razón de haber explicado las otras formas antes se debe a que son las formas de hacerlo mediante la sintaxis HTML, mientras que la manera que vamos a ver ahora tiene una sintaxis diferente (la utilizada en las hojas de estilo en cascada, CSS).
Pero, primero una pequeña introducción:
Las hojas de estilo en cascada pueden encontrarse en un archivo independiente y al que se hace referencia en la cabecera de la página web (head) -afecta a toda la página-, puede encontrarse directamente en la cabecera -también afecta a toda la página- y/o se pueden encontrar en el cuerpo (body) de la página afectando a párrafos concretos.
El primer caso es útil cuando tenemos varias páginas que deben tener la misma presentación, el segundo caso sirve para páginas con formato propio y único y el tercer caso sirve para cambiar el formato por defecto pues este caso tiene precedencia sobre el formato css de la cabecera y del archivo (así mismo el formato css de la cabecera de una página tiene precedencia sobre el que se encuentra en archivo a parte).
La manera que de momento vamos a explicar para cambiar la alineación del texto es la correspondiente a esta tercera forma de uso de las hojas de estilo en cascada.
Se realiza mediante el uso del elemento style aplicado a cualquiera de estas dos etiquetas (las mismas de antes):
- <p>...</p>: etiqueta de párrafo, añade un salto de párrafo antes y después de la etiqueta.
- <div>...</div>: contenedor genérico bloque de nivel, añade un salto de línea antes y después de la etiqueta.
Los valores que puede tomar el atributo style son:
- Left: alinea el texto a la izquierda.
- Right: alinea el texto a la derecha.
- Center: alinea el texto al centro.
- Justify: alinea el texto a ambos lados -izquierda y derecha-, es como podéis ver los párrafos de este curso.
Veamos algún ejemplo, y atención a la sintaxis:
<p style="text-align: center;">...</p>:
Ayer murió una tortuga
<div style="text-align: right;">...</div>:
Ayer murió una tortuga
El "punto y coma" después del valor del atributo, en este caso, podría omitirse. No se ha hecho para aclarar que cuando se especifiquen más de un atributo en las etiquetas y se use el estilo de sintaxis css los atributos se separan de esta forma, no mediante un espacio como hicimos al final del tema 2 al hacer uso simultáneo de los tres atributos de la etiqueta font o al final del tema 3 con el uso de la línea horizontal.
Como también podréis observar el valor del atributo se establece con el signo "dos puntos" (":") y no como hasta ahora con el signo "igual" ("=").
El bloque de citas
Esta etiqueta, como su propio nombre indica sirve para incluir una cita textual en nuestra página. Produce un sangrado a derecha e izquierda de la cita.
Su sintaxis es:
<blockquote>
...
</blockquote>
Un ejemplo:
Yo he visto cosas que vosotros no creeríais. Atacar naves en llamas más allá de Orión. He visto Rayos-C brillar en la oscuridad cerca de la Puerta de Tannhäuser. Todos esos momentos se perderán en el tiempo como lágrimas en la lluvia. Es hora de morir.
Blade Runner (película).
Mucha gente utiliza esta etiqueta no para incluir una cita textual, sino para conseguir el sangrado del texto que podéis observar. El sangrado de bloques de texto se puede especificar mediante CSS, siendo esta la manera correcta.
Listas
Existen tres tipos de listas: las listas no ordenadas, las listas ordenadas y las listas de definiciones; este último tipo no se tratará en este curso.
Las listas se construyen mediante una etiqueta que la engloba (indica el inicio y el final de la misma) y una etiqueta que se utiliza para definir cada uno de los items de la lista, estas etiquetas son:
Esta etiqueta indica el inicio y el fin de una lista no ordenada (Unordered List en ingles):
<ul>
...
</ul>
Esta etiqueta indica el inicio y el fin de una lista ordenada (Ordered List en ingles).
<ol>
...
</ol>
La siguiente etiqueta define los items de una lista:
<li>...</li>
La etiqueta ul y la etiqueta ol pueden presentan el atributo type (actualmente desaprobado) que puede tener los siguientes valores:
Etiqueta ul:
- disc: produce un círculo relleno. Es el valor por defecto si no se especifica nada.
- square: produce el contorno de un cuadrado.
- circle: produce el contorno de un círculo.
Etiqueta ol:
- 1: produce números decimales (1, 2, 3, 4, 5, ...). Es el valor por defecto si no se especifica nada.
- a: produce letras minúsculas (a, b, c, d, e, ...).
- A: produce letras mayúsculas (A, B, C, D, E, ...).
- i: produce números romanos en minúscula (i, ii, iii, iv, v, ...).
- I: produce números romanos en (I, II, III, IV, V, ...).
Además las listas ordenadas pueden presentar el atributo, también desaprobado pero que no tiene sustituto en CSS, start que indica el número de inicio de la lista, por defecto uno.
De manera análoga la etiqueta li tiene el atributo value.
Veamos algunos ejemplos y los resultados que producen:
|
Código
|
Resultado
|
<ul>
<li>Perro
<li>Gato
</ul>
|
|
<ul type="disc">
<li>Perro
<li>Gato
</ul>
|
|
<ul type="circle">
<li>Perro
<li>Gato
</ul>
|
|
<ol type="A">
<li>Perro
<li>Gato
</ol>
|
- Perro
- Gato
|
<ol type="1" start="10">
<li>Perro
<li>Gato
</ol>
|
- Perro
- Gato
|
<ul>
<li>Perro</li>
<ul>
<li>Galgo</li>
<ul>
<li>Galgo Afgano</li>
</ul>
<li>Terrier</li>
<li>Labrador</li>
</ul>
<li>Gato</li>
</ul>
|
|
Como se puede observar en el último de los ejemplos si se incluyen listas dentro de las listas se cambian automáticamente los símbolos (o tipos de ordenación).
Aunque ya se han visto bastantes cosas y ya podemos hacer nuestra propia página todavía no podemos enlazar varias páginas entre si (o hacer enlaces a páginas de otra gente). En el próximo tema trataremos los enlaces.
