La mayoría de los efectos se especifican de la misma forma: rodeando el texto que se quiere marcar entre dos
etiquetas o
directivas (
tags, en inglés), que definen el efecto o unidad lógica que se desea. Las etiquetas están formadas por determinados códigos metidos entre los signos < y >, y con la barra / cuando se trata de la segunda etiqueta de un efecto (la de cierre). Por ejemplo:
<efecto> para abrir y
</efecto> para cerrar. Ciertas directivas sólo se ponen una vez en el lugar del texto donde queramos que aparezca el efecto concreto. Esto es lo que ocurre, por ejemplo, cuando queremos poner un gráfico, caso en el que se usa algo parecido a
<poner_gráfico_aquí> (más adelante ya veremos la directiva concreta que se utiliza).
A veces es necesario ofrecer datos adicionales en una directiva. Por ejemplo, cuando se define un
hiperenlace hay que especificar su destino. Para ello se incluyen parámetros en la directiva inicial (la de apertura), de la siguiente forma:
<efecto parametro1 parametro2 ...>. La directiva de cierre, caso de ser necesaria, queda como antes:
</efecto>.
Más adelante en el presente documento se muestra el efecto de las directivas más usadas en la creación de un documento HTML. Para cada una de ellas, primero se muestra el texto fuente, y bajo éste, el efecto que produce.
Un documento HTML comienza con la etiqueta
<html>, y termina con
</html>. Dentro del documento (entre las etiquetas de principio y fin de html), hay dos zonas bien diferenciadas: el
encabezamiento, delimitado por
<head> y
</head>, que sirve para definir diversos valores válidos en todo el documento; y el
cuerpo, delimitado por
<body> y
</body>, donde reside la información del documento.La única utilidad del encabezamiento en la que nos detendremos es la directiva
<title>, que permite especificar el título de un documento HTML. Este título no forma parte del documento en sí: no aparece, por ejemplo, al principio del documento una vez que este se presenta con un programa adecuado, sino que suele servir como título de la ventana del programa que nos la muestra. Por ejemplo, en el encabezamiento de este manual se ha especificado:
<title>Manual práctico de HTML</title>
en minúsculas. Obsérverse que el título que encabeza este texto se ha escrito con mayúsculas, para distinguirlo del título
global del documento.El cuerpo de un documento HTML contiene el texto que, con la presentación y los efectos que se decidan, se presentará ante el
hiperlector. Dentro del cuerpo son aplicables todos los efectos que se van a mencionar en el resto de esta guía. Dichos efectos se especifican exclusivamente a través de directivas. Esto quiere decir que los espacios, tabulaciones y retornos de carro que se introduzcan en el fichero fuente no tienen ningún efecto a la hora de la presentación final del documento. Por ejemplo, escribiendo:
Estas
palabras
forman una
frase.producimos exactamente lo mismo que con:
Estas palabras forman una frase.
A la hora de la verdad lo que se ve es:Estas palabras forman una frase.
En resumen, la estructura básica de un documento HTML queda de la forma siguiente:
<html>
<head>
<title>Título</title>
</head>
<body>
Texto del documento, menciones a gráficos, enlaces, etc.
</body>
</html>
Como ya hemos dicho, la estructura lógica del texto y los diferentes efectos que se le apliquen se especifican mediante
directivas. En este punto vamos a repasar algunas de las más importantes. En cada uno de los casos que veremos, primero se presenta el texto original HTML, es decir, lo que nosotros editamos, con las directivas situadas en los lugares adecuados; y después se presenta el efecto que dicho
texto fuente produce una vez que se interpreta y se representa con el programa adecuado.
Mediante los títulos, en sus diferentes niveles de importancia, podemos definir el
esqueleto del documento, su estructura básica.
<h1>Mucha importancia</h1>
Mucha importancia
<h2>Menos importancia</h2>
Menos importancia
<h3>Mucha menos importancia</h3>
Mucha menos importancia
Mediante estos atributos determinamos el estilo y el tipo de letra que tendrá la presentación del documento final.El primero en el que nos deberíamos detener es el
texto normal entendiendo como tal el que no tiene ninguna característica especial. Para definir un párrafo como
normal no es necesario poner ninguna etiqueta. Lo único que hay que tener en cuenta, como ya se ha dicho antes, es que al presentar el documento se hace caso omiso de los espacios, tabulaciones y retornos de carro que se encuentren en el texto fuente. Por ello cuando se quiera forzar un final de línea es necesario utilizar dos directivas especiales:
<p> para marcar un fin de párrafo, y
<br> para un único retorno de carro. La diferencia entre ambas es que la separación de líneas que provoca
<p> es algo mayor que la de
<br>, para que los párrafos se distingan bien entre sí. Las dos directivas mencionadas se sitúan en el punto en que queremos poner la separación. Por ejemplo:
Este será un texto normal (párrafo 1, línea 1).<br>
El primer párrafo estará formado por 2 líneas (párrafo 1, línea 2).<p>
Este ya es el segundo párrafo (párrafo 2, línea 1).<p>
Este será un texto normal (párrafo 1, línea 1).
El primer párrafo estará formado por 2 líneas (párrafo 1, línea 2).Este ya es el segundo párrafo (párrafo 2, línea 1).
Por supuesto, estas dos etiquetas se puede aplicar donde queramos, no sólo en el texto normal.
El
texto preformateado (etiqueta
<pre>) se aplica cuando queremos que en la presentación final del documento se respeten los espacios y retornos de carro que hayamos puesto en el texto fuente. Además se utilizará un tipo de letra de espaciado fijo, parecido al de una máquina de escribir, más pequeño que el del texto normal. Este estilo de texto puede ser adecuado, por ejemplo, para una tabla numérica sencilla:
<pre>
Texto preformateado
---------------------
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
---------------------
</pre>
Texto preformateado
---------------------
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
---------------------
Para hacer una cita textual dentro de nuestro documento, se puede utilizar la directiva
<blockquote>:
<blockquote>Muchos años después, frente al pelotón de fusilamiento,
el coronel Aureliano Buendía había de recordar aquella tarde remota
en que su padre lo llevó a conocer el hielo.<br>
(Gabriel García Márquez, Cien años de soledad)</blockquote>
Muchos años después, frente al pelotón de fusilamiento, el coronel Aureliano Buendía había de recordar aquella tarde remota en que su padre lo llevó a conocer el hielo.
(Gabriel García Márquez, Cien años de soledad)
Las
direcciones de correo electrónico se suelen marcar con esta directiva:
<address>Dirección: em0_oreckslizn_n@live.com</address>
Se pueden dar también los atributos más tradicionales: negrita y cursiva:
<b>Esto en negrita</b> y <i>esto en cursiva</i>
Esto en negrita y
esto en cursivaSe puede utilizar un tipo de letra similar al de una máquina de escribir:
<tt>Máquina de escribir</tt>
Máquina de escribirPara centrar texto (o, en general, cualquier cosa: un gráfico, por ejemplo) se usa la directiva
<center>:
<center>Verde que te quiero verde</center>
Verde que te quiero verde
