PDF de programación - Manual práctico de HTML

Manual práctico de HTML

Página 1

MANUAL PRÁCTICO DE HTML

© 1995 Álvaro Martínez Echevarría

Escuela Técnica Superior de Ingenieros de Telecomunicación

Universidad Politécnica de Madrid, España

NOTA PREVIA

La primera versión de este trabajo se desarrolló en el marco de mi trabajo como becario en la Escuela de
Ingenieros de Telecomunicación, durante mayo de 1995. Tanto su creación como su posterior mantenimiento
son una aportación personal desinteresada a la comunidad hispanohablante de Internet, y no están ligadas a
ningún interés comercial.

No está permitido copiar o modificar este manual sin autorización expresa de su autor (o sea, yo :-). Se
permite hacer enlaces a este manual desde páginas personales y comerciales, con la única restricción de que
en las páginas de origen de dichos enlaces no haya lugar a confusión sobre la autoría y motivación de este
manual.

INTRODUCCIÓN

Este manual pretende ser una introducción básica al lenguaje HTML, que permite escribir páginas de WWW.
Su orientación es más bien práctica, por lo que no se han tenido en cuenta cuestiones como las diferentes
versiones de HTML a las que pertenece cada directiva (lo cual resulta a veces más importante de lo que
parece, porque implica que algunas directivas sólo funcionen con los programas de WWW más modernos: por
ejemplo <center>).

Según creo, esta es una de las pocas (o la única) referencias sobre HTML escritas en castellano (que alguien
me corrija si me equivoco). Para referencias más amplias (aunque en inglés) ver el final de esta página.

Mi agradecimiento a todas las personas que me han hecho llegar sus opiniones y consejos acerca de este
manual. En sucesivas versiones iré mejorándolo para sea todo lo útil y completo que espero que sea. Si
quieres dejarme algún mensaje, puedes mandar correo electrónico a [email protected].

CONTENIDOS

Qué es HTML
Cómo especificar efectos del texto
Estructura básica de un documento HTML
Estilos y efectos básicos

Títulos

http://www.etsit.upm.es/~alvaro/manual/manual.html

04:10:09 p.m. 03/09/2002

Manual práctico de HTML

Página 2

Atributos del texto
Listas
Varios

Enlaces y gráficos
Introducción
Qué es un URL
Enlaces
Gráficos

Caracteres especiales
Referencias

QUÉ ES HTML

HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es
decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros
documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido...) La
descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto
normal, enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se quieren dar (especificar
los lugares del documento donde se debe poner cursiva, negrita, o un gráfico determinado) y dejar que luego la
presentación final de dicho hipertexto se realice por un programa especializado (como Mosaic, o Netscape).

CÓMO ESPECIFICAR EFECTOS DEL TEXTO

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.

ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML

http://www.etsit.upm.es/~alvaro/manual/manual.html

04:10:09 p.m. 03/09/2002

Manual práctico de HTML

Página 3

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>

http://www.etsit.upm.es/~alvaro/manual/manual.html

04:10:09 p.m. 03/09/2002

Manual práctico de HTML

Página 4

ESTILOS Y EFECTOS BÁSICOS

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.

TÍTULOS

<h1>Mucha importancia</h1>
Mucha importancia

<h2>Menos importancia</h2>

Menos importancia

<h3>Mucha menos importancia</h3>

Mucha menos importancia

ATRIBUTOS DEL TEXTO

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

http://www.etsit.upm.es/~alvaro/manual/manual.html

04:10:09 p.m. 03/09/2002

Manual práctico de HTML

Página 5

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