introducción al lenguaje html

1
INTRODUCCIÓN AL
LENGUAJE HTML
En otro de los cursos de esta serie de apuntes ya aprendimos a
navegar y buscar información en Internet. De esta forma, es posible
acceder a recursos que pueden ser útiles en nuestra tarea
educativa. Sin embargo, en ocasiones vamos a necesitar ser
nosotros los que sirvamos la información en Internet, por ejemplo,
para proporcionar apuntes de nuestras asignaturas. Para ello
podemos diseñar nuestras propias páginas web.
Pese a que existen diversas herramientas para el diseño sencillo de
páginas web (como veremos en los temas siguientes de este curso)
es necesario conocer algunos fundamentos básicos del lenguaje
utilizado para su diseño: el lenguaje HTML. En este tema se aborda
los conceptos mínimos necesarios para poder diseñar una página
web sin necesidad de utilizar software específico.
2
D E
32 - G
E N E R A C I Ó N
D E
P Á G I N A S
W E B
C O N
LL
I U R E
X
ÍNDICE DE CONTENIDO
1 INTRODUCCIÓN...................................................................................................3
1.1 PROGRAMAS...............................................................................................3
1.2 ETIQUETAS.................................................................................................4
2 UNA PRIMERA PÁGINA SENCILLA...........................................................................4
2.1 ESTRUCTURA BÁSICA.....................................................................................5
2.2 TEXTO SENCILLO..........................................................................................6
2.3 TEXTO ESTRUCTURADO..................................................................................9
2.3.1 ENCABEZADOS......................................................................................................... 9
2.3.2 LISTAS NUMERADAS.................................................................................................10
2.3.3 LISTAS NO NUMERADAS.............................................................................................12
3 HIPERENLACES.................................................................................................12
3.1 CREACIÓN DE UN ENLACE SENCILLO................................................................13
3.2 RUTAS ABSOLUTAS Y RELATIVAS.....................................................................13
3.3 ENLACES INTERNOS....................................................................................14
3.4 OTROS ENLACES........................................................................................16
4 MEJORANDO NUESTRA PRIMERA PÁGINA.................................................................17
4.1 IMÁGENES.................................................................................................17
4.2 TABLAS....................................................................................................19
4.3 MARCOS..................................................................................................21
5 CARACTERÍSTICAS
AVANZADAS .............................................................................26
5.1 USO DEL COLOR........................................................................................26
5.2 ESTILOS DE FUENTE....................................................................................29
5.2.1 FORMATO DE FUENTE...............................................................................................29
5.2.2 CARACTERES ESPECIALES......................................................................................... 31
I
N T R O D U C C I Ó N
A L
L
E N G U A J E
HTML - 3
D E
32
1 INTRODUCCIÓN
El lenguaje HTML (HyperText Markup Language) es el que se utiliza para el
diseño de páginas web y, por tanto, el lenguaje que los navegadores reconocen. Se basa
en el uso de etiquetas para definir cada uno de los elementos de la página (texto,
formatos, imágenes, etc.) y define la estructura general de la página, y no tanto su
presentación visual. Así, cuando se define un encabezado en HTML es el navegador el
responsable del aspecto visual que presentará esta etiqueta. Por lo tanto, a la hora de
diseñar páginas web hay que tener en cuenta que su aspecto puede variar
dependiendo del navegador.
El lenguaje HTML ha ido cambiando para incorporar nuevos elementos, como la
inclusión de imágenes, tablas o elementos matemáticos. La última revisión de este
estándar es la 4.01, y ya no se prevén nuevas actualizaciones. Dada la evolución de
Internet, el uso de tecnologías diferentes (móviles, PCs de mano, etc.) o la inclusión de
elementos multimedia (animaciones, vídeos, sonidos, etc), el diseño de documentos
web está tendiendo al uso de lenguajes más complejos, como XML, XHTML, hojas de
estilo CSS, etc.
La intención de este curso no es la de dar una descripción extensa y completa de todos
los elementos del lenguaje HTML, ya que para el diseño de estructuras más complejas
se hará uso de editores gráficos, como se verá en temas subsiguientes de este curso.
1.1 PROGRAMAS
Pese a la conveniencia previa de aprender el lenguaje HTML, existen programas que
facilitan la escritura de ficheros HTML. Básicamente, podemos dividir estos
programas en tres grupos:
✔
✔
✔
Editores de texto: Estos programas nos ayudan en la escritura directa de
código HTML mediante la inserción automática de etiquetas (ver sección
siguiente). Un ejemplo sería el programa de software libre BlueFish, cuyo uso
se aborda en temas posteriores.
Editores gráficos: Este tipo de editores permiten diseñar el aspecto final de
la página, por lo que se evita la escritura de código HTML. Presentan el
problema de que suelen introducir código adicional cuya interpretación puede
variar de navegador a navegador, por lo que es útil conocer el lenguaje HTML
para una corrección posterior. Un ejemplo de editor gráfico basado en software
libre sería NVU, que se estudia en los últimos temas de este curso.
Conversores: Por último, la gran mayoría de procesadores de texto permiten
convertir los documentos a HTML. Por ejemplo, con OpenOffice.org Writer se
pueden diseñar páginas web de forma sencilla y rápida. No obstante, los
conversores adolecen de los mismos problemas que los editores gráficos:
4
D E
32 - G
E N E R A C I Ó N
D E
P Á G I N A S
W E B
C O N
LL
I U R E
X
introducen código basura en el fichero final y su resultado puede no ser el
esperado.
En cualquier caso, una vez diseñada una página web por cualquiera de estos métodos,
es conveniente comprobar su visualización con distintos navegadores.
1.1 ETIQUETAS
El lenguaje HTML se basa en el uso de etiquetas, que definen los distintos elementos
de la página web y que serán posteriormente interpretados por el navegador. En
general, los elementos HTML se definen mediante una etiqueta de principio y otra de
fin. Estas etiquetas se definen con los caracteres < >, en cuyo interior se incluye el
nombre de la etiqueta. En la etiqueta de final de elemento se añade antes del nombre
de la etiqueta un carácter /.
<NombreEtiqueta> Texto que define el elemento </NombreEtiqueta>
Además, las etiquetas de inicio de elemento pueden contener información de formato
mediante atributos. Por ejemplo, el siguiente elemento define un párrafo centrado:
<p ALIGN=”center”> Texto centrado </p>
Además hay etiquetas (como por ejemplo <hr>, que introduce una línea horizontal) que
no requieren un final. Cabe comentar que es indistinto que las etiquetas se definan en
mayúsculas o minúsculas. En este texto se utilizarán minúsculas para las etiquetas y
mayúsculas para sus atributos, como se observa en el ejemplo anterior.
2 UNA PRIMERA PÁGINA SENCILLA
Después de la introducción anterior, vamos a empezar a diseñar nuestra primera
página web. Para ello, podemos utilizar un editor de texto cualquiera (como gedit en
LliureX) para escribir (con cuidado de no equivocarnos) el siguiente texto:
<html>
<head>
<title> Introducción a LliureX </title>
</head>
<body> ¿Qué es LliureX?
</body>
</html>
Las páginas web se guardan con la extensión .htm o .html. Si guardamos este fichero
con el nombre ejemplo01.html y lo abrimos desde un navegador, comprobaremos que
hemos creado nuestra primera página web (eso sí, muy sencilla). Las etiquetas
utilizadas en este código se describen en la siguiente subsección.
I
N T R O D U C C I Ó N
A L
L
E N G U A J E
HTML - 5
D E
32
Figura 1: Página web sencilla.
2.1 ESTRUCTURA BÁSICA
En la primera página web que se ha diseñado se define la estructura básica de un
documento HTML, que en general es la siguiente:
<html>
<head>
......
</head>
<body>
......
</body>
</html>
Aquí aparecen tres primeras etiquetas, cuyo uso se define a continuación:
✔
<html>:
Esta etiqueta define que el documento es HTML e incluye todo el
código de la página web. Dentro de esta estructura deben definirse, asimismo,
la cabecera y el cuerpo del documento.
<html>
......
</html>
✔
<head>:
Esta etiqueta define la cabecera del documento. El código que aparece
en la cabecera no se muestra en la página web como tal, sino que define
algunas características generales de la página. Lo más habitual es incluir en
la cabecera el título de la página, que aparece en la barra de título del
navegador (ver Figura 1), con la etiqueta <title>. Es importante que el texto
del título describa brevemente el contenido de la página: este título es el que
se almacena en los marcadores (o favoritos) de los navegadores.
<head>
<title> Título de la página.</title>
</head>
✔
<body>:
Esta etiqueta va a incluir todo el código HTML que defina el diseño de
la página web.
<body>
......Aquí va el código HTML de la página web.....
</body>
6
D E
32 - G
E N E R A C I Ó N
D E
P Á G I N A S
W E B
C O N
LL
I U R E
X
1.1 TEXTO SENCILLO
Con los elementos aprendidos hasta ahora ya se puede crear una página web con algo
de texto:
<html>
<head>
<title> Introducción a LliureX </title>
</head>
<body> ¿Qué es LliureX?
LliureX es el proyecto de la Conselleria de Cultura, Educación y
Deporte de la Generalitat Valenciana que tiene como objetivo
principal la introducción de las nuevas Tecnologías de la
Información y la Comunicación basadas en software libre en el
Sistema Educativo de la Comunidad Valenciana.
Para ello se ha creado LliureX, una distribución GNU/Linux creada
por la Conselleria de Cultura, Educación y Deporte de la
Generalitat Valenciana, orientada al Sistema Educativo de nuestra
Comunidad.
LliureX está basado completamente en Software Libre y es
gratuito.
</body>
</html>
Si se guarda este documento como ejemplo02.html y se abre con el navegador, se
observa una imagen similar a la siguiente:
Figura 2: Página con texto simple.
Fijémonos en que, a pesar de haber introducido cambios de párrafo en el documento, el
texto aparece en la página web como una sola línea. Para introducir cambios de línea
debemos utilizar la etiqueta <br>, que no presenta etiqueta de cierre (es decir, no
debemos incluir </br>).
I
N T R O D U C C I Ó N
A L
L
E N G U A J E
HTML - 7
D E
32
<html>
<head>
<title> Introducción a LliureX </title>
</head>
<body> ¿Qué es LliureX?<br>
LliureX es el proyecto de la Conselleria de Cultura, Educación y
Deporte de la Generalitat Valenciana que tiene como objetivo
principal la introducción de las nuevas Tecnologías de la
Información y la Comunicación basadas en software libre en el
Sistema Educativo de la Comunidad Valenciana.<br>
Para ello se ha creado LliureX, una distribución GNU/Linux creada
por la Conselleria de Cultura, Educación y Deporte de la
Generalitat Valenciana, orientada al Sistema Educativo de nuestra
Comunidad.<br>
LliureX está basado completamente en Software Libre y es
gratuito.
</body>
</html>
Ahora el documento (ejemplo03.html) presenta el siguiente aspecto.
Figura 3: Página con saltos de línea.
Pese a haber mejorado el aspecto, aún puede estructurarse mejor el contenido con el
uso de párrafos. Los párrafos se definen con la etiqueta <p> (la etiqueta de cierre </p>
es opcional). Un atributo interesante de esta etiqueta es ALIGN, que puede presentar
tres valores: left (alineación a la izquierda), center (centro) y right (derecha). A
continuación se incluye esta etiqueta en el código (ejemplo04.html) y se presenta la
web resultante en el navegador.
8
D E
32 - G
E N E R A C I Ó N
D E
P Á G I N A S
W E B
C O N
LL
I U R E
X
<html>
<head>
<title> Introducción a LliureX </title>
</head>
<body> <p ALIGN=center> ¿Qué es LliureX? </p>
<p>LliureX es el proyecto de la Conselleria de Cultura, Educación
y Deporte de la Generalitat Valenciana que tiene como objetivo
principal la introducción de las nuevas Tecnologías de la
Información y la Comunicación basadas en software libre en el
Sistema Educativo de la Comunidad Valenciana.</p>
<p>Para ello se ha creado LliureX, una distribución GNU/Linux
creada por la Conselleria de Cultura, Educación y Deporte de la
Generalitat Valenciana, orientada al Sistema Educativo de nuestra
Comunidad.</p>
<p>LliureX está basado completamente en Software Libre y es
gratuito.</p>
</body>
</html>
Figura 4: Página con párrafos.
Aunque, como se verá en la sección siguiente, puede estructurarse mejor un
documento con encabezados, esta primera página web puede mejorarse mediante el
uso de líneas horizontales con la etiqueta <hr>. Esta etiqueta admite varios atributos
para definir anchura, longitud y alineación, pero se dejará su descripción a temas
posteriores. El siguiente código, incluido en el fichero ejemplo05.html, describe el uso
que se muestra en la figura posterior.
<body> <p ALIGN=center> ¿Qué es LliureX? </p>
<hr>
<p>LliureX es el proyecto...
I
N T R O D U C C I Ó N
A L
L
E N G U A J E
HTML - 9
D E
32
Figura 5: Página con línea horizontal.
1.2 TEXTO ESTRUCTURADO
Con las etiquetas indicadas hasta el momento podría diseñarse una web
extremadamente sencilla. Habitualmente, los documentos que diseñamos (con un
procesador de texto, por ejemplo) presentan un estructura de secciones, subsecciones,
etc. Además, la información que se ofrece en las páginas web requiere frecuentemente
ser concreta, lo cual se facilita mediante el uso de listas de elementos. En esta
subsección se aprenderá a estructurar las páginas web para una mejor legibilidad.
1.2.1 Encabezados
Los encabezados se utilizan para estructurar las páginas con títulos de secciones,
subsecciones, etc. Se definen con las etiquetas <h#>, donde # es un número que varía
entre 1 (mayor nivel) y 6 (menor nivel), y admiten el atributo ALIGN (al igual que las
etiquetas de párrafo <p>).
A continuación se modifica el código de la página web ejemplo06.html para incluir los
encabezados <h1> y <h3> y se muestra el resultado con el navegador Mozilla Firefox.
10
D E
32 - G
E N E R A C I Ó N
D E
P Á G I N A S
W E B
C O N
L
L I U R E
X
<html>
<head>
<title> Introducción a LliureX </title>
</head>
<body>
<h1 ALIGN=center> ¿Qué es LliureX? </h1>
<hr>
<h3> Proyecto <h3>
<p>LliureX es el proyecto de la Conselleria de Cultura, Educación
y Deporte de la Generalitat Valenciana que tiene como objetivo
principal la introducción de las nuevas Tecnologías de la
Información y la Comunicación basadas en software libre en el
Sistema Educativo de la Comunidad Valenciana.</p>
<h3> Distribución </h3>
<p>Para ello se ha creado LliureX, una distribución GNU/Linux
creada por la Conselleria de Cultura, Educación y Deporte de la
Generalitat Valenciana, orientada al Sistema Educativo de nuestra
Comunidad.</p>
<h3> Características </h3>
<p>LliureX está basado completamente en Software Libre y es
gratuito.</p>
</body>
</html>
Figura 6: Uso de encabezados.
1.2.2 Listas numeradas
Para crear listas numeradas con HTML, hay que utilizar las etiquetas <ol> y <li>. Así,
mientras que el contenido de la lista está delimitado por las etiquetas <ol> y </ol>,
cada uno de sus elementos se indica con la etiqueta <li>, que no necesita etiqueta de
I
N T R O D U C C I Ó N
A L
L
E N G U A J E
HTML - 11
D E
32
cierre. Por ejemplo, el siguiente código en la página ejemplo07.html especifica las
cuatro libertades del software libre.
<h3> Características </h3>
<p>LliureX está basado completamente en Software Libre y es
gratuito. “Software Libre” se refiere a la libertad de los
usuarios para ejecutar, copiar, distribuir, estudiar, cambiar y
mejorar el software. De modo más preciso, se refiere a cuatro
libertades de los usuarios del software:< /p>
<ol>
<li>
La
libertad
de
usar
el
programa,
con
cualquier
propósito(libertad 0).
<li> La libertad de estudiar el funcionamiento del programa, y
adaptarlo a las necesidades(libertad 1). El acceso al código
fuente es una condición previa para esto.
<li> La libertad de distribuir copias, con lo que puede ayudar a
otros(libertad 2).
<li> La libertad de mejorar el programa y hacer públicas las
mejoras, de modo que toda la comunidad se beneficie(libertad 3).
De igual forma que la libertad 1 el acceso al código fuente es un
requisito previo.
</ol>
Figura 7: Listas numeradas.
La etiqueta <ol> tiene un atributo (TYPE) que permite elegir el tipo de numeración a
utilizar. Este atributo puede tomar los siguientes valores:
✔
TYPE=”1”:
Lista de números estándar (1,2,3,...). Es la opción que se utiliza si no
se indica este atributo.
✔
TYPE=”a”:
Numeración siguiendo letras minúsculas (a,b,c,...).
✔
TYPE=”A”:
Numeración siguiendo letras mayúsculas (A,B,C,...).
✔
TYPE=”i”:
Numeración con números romanos en minúscula (i,ii,iii,iv,...).
✔
TYPE=”I”:
Numeración con números romanos en mayúscula (I,II,III,IV,...).
Así, si quisiéramos definir una lista con numeración romana en minúscula
iniciaríamos la lista con la orden <ol TYPE=”i”>.
12
D E
32 - G
E N E R A C I Ó N
D E
P Á G I N A S
W E B
C O N
L
L I U R E
X
1.1.1 Listas no numeradas
En ocasiones necesitamos escribir listas de elementos en las cuales el orden no es
importante. Para ello se pueden utilizar listas no numeradas. Estas listas siguen una
estructura similar a las listas numeradas: utilizan la etiqueta <li> para cada
elemento, pero la etiqueta <ul> para el inicio y final de lista. Fijémonos en lo que
ocurre si transformamos la lista numerada del ejemplo anterior en una lista no
numerada.
<ul>
<li>
La
libertad
de
usar
el
programa,
con
cualquier
propósito(libertad 0).
<li> La libertad de estudiar el funcionamiento del programa, y
adaptarlo a las necesidades(libertad 1). El acceso al código
fuente es una condición previa para esto.
<li> La libertad de distribuir copias, con lo que puede ayudar a
otros(libertad 2).
<li> La libertad de mejorar el programa y hacer públicas las
mejoras, de modo que toda la comunidad se beneficie(libertad 3).
De igual forma que la libertad 1 el acceso al código fuente es un
requisito previo.
</ul>
Figura 8: Listas no numeradas.
Al igual que ocurre con las listas numeradas, en este caso el atributo TYPE permite
cambiar el tipo de viñeta utilizado. Los valores que puede tomar son los siguientes:
✔
TYPE=”disc”:
La viñeta es un círculo negro. Es el valor utilizado si no
especifica este atributo.
✔
TYPE=”square”:
La viñeta es un cuadrado negro.
✔
TYPE=”circle”:
La viñeta es un círculo blanco con borde negro.
1 HIPERENLACES
Los hiperenlaces o vínculos son elementos esenciales de las páginas web, ya que
permiten enlazar entre sí distintas páginas y facilitan con ello la navegación por
Internet. Aunque la creación de un enlace a otra página es simple, existen varios
elementos distintos que deben ser tenidos en cuenta y que afectan a la propia
estructura de un sitio web, por lo que este punto se tratará con algo más de detalle.
I
N T R O D U C C I Ó N
A L
L
E N G U A J E
HTML - 13
D E
32
1.1 CREACIÓN DE UN ENLACE SENCILLO
La etiqueta que permite insertar hiperenlaces en los documentos web es <a>. Esta
etiqueta presenta distintos atributos, pero quizás el más importante es HREF, que
define la dirección de la página web a la que se accede tras hacer clic sobre el enlace.
Así, si añadimos a nuestro código HTML las siguientes líneas, se define un enlace a la
página web de LliureX:
<h3> Información </h3>
<p> <a HREF="http://lliurex.net"> Página web de LliureX </a>
La visualización de esta sección del documento (ejemplo09.html) presentaría un
aspecto similar al siguiente:
Figura 9: Hiperenlace simple.
Si hacemos clic sobre el enlace, en la ventana del navegador se abre la página web de
LliureX. Si ahora volvemos al documento original (y actualizamos la página)
observamos que el color del enlace ha cambiado.
Figura 10: Hiperenlace simple ya visitado.
En general, es el navegador el que se encarga de decidir el formato que va a utilizar
para mostrar los vínculos. Es habitual que, por omisión, el texto de los enlaces se
muestre subrayado y en color azul (si el enlace aún no se ha visitado) o púrpura (si el
enlace ya se ha visitado con anterioridad).
1.2 RUTAS
ABSOLUTAS Y RELATIVAS
En el ejemplo anterior se ha creado un hiperenlace a una página web externa, es decir,
que no se encuentra necesariamente en el mismo servidor que nuestra página. Es
habitual que, al diseñar un sitio web, se creen distintas páginas web (puede que en
distintos directorios) enlazadas entre sí por hipervínculos; en este caso se puede hacer
uso de referencias relativas.
Veamos un ejemplo que nos ayudará a entender este concepto. Supongamos que
tenemos varias páginas web en un directorio www, en el que se encuentran a su vez
organizadas en carpetas según el siguiente esquema:
14
D E
32 - G
E N E R A C I Ó N
D E
P Á G I N A S
W E B
C O N
L
L I U R E
X
Imaginemos que la dirección web del documento a.html es http://ejemplo/a.html. En
ese caso, podemos incluir en a.html un enlace a b.html con la línea:
<a HREF=”http://ejemplo/b.html”> Documento b.html </a>
Sin embargo, al estar localizados ambos documentos en la misma carpeta del mismo
servidor, resulta más cómodo escribir simplemente
<a HREF=”b.html”> Documento b.html </a>
Si quisiéramos enlazar (desde a.html) el documento c.html, que se encuentra en la
carpeta aux, deberíamos escribir:
<a HREF=”aux/c.html”> Documento c.html </a>
Por último, si queremos enlazar desde la página web c.html el documento a.html
tendríamos que tener en cuenta que el fichero a enlazar se encuentra en un directorio
superior, al que se puede acceder con ../ como se muestra en el siguiente ejemplo:
<a HREF=”../a.html”> Documento a.html </a>
Es conveniente utilizar enlaces relativos para vincular páginas web de un mismo sitio,
pero debemos tener en cuenta que en ese caso no debemos cambiar la situación
relativa de los archivos enlazados.
1.3 ENLACES INTERNOS
Si el documento HTML que se está diseñando es muy largo, suele ser conveniente que
haya enlaces que lleven al lector a sus distintas secciones. Estos enlaces internos (o
anclas) no abren necesariamente una nueva página, sino que llevan a un punto
concreto de la página web.
Para incluir un ancla en algún punto de la página web basta con insertar una etiqueta
<a> con el atributo NAME acompañado del nombre del ancla. Esta etiqueta no necesita
incluir ningún texto. Por ejemplo, para incluir un ancla en la sección Características
de nuestro documento ejemplo, escribiríamos el siguiente código:
<a NAME=”Seccion_Car”> </a> <h3> Características </h3>
Para situar ahora un enlace en el principio de la página a esta sección, escribiríamos
en el atributo HREF el nombre de la sección antecedido del carácter #.
<a HREF=”#Seccion_Car”> Características </a>
I
N T R O D U C C I Ó N
A L
L
E N G U A J E
HTML - 15
D E
32
De esta forma, podría empezarse el documento con un índice a sus secciones. A
continuación se incluye el documento ejemplo10.html, en el que se añade dicho índice
utilizando anclas y una lista no numerada, y se muestra en la figura siguiente su
aspecto final. Fijémonos en que, al hacer clic sobre uno de los enlaces, en el navegador
se muestra la dirección web con el ancla correspondiente.
<html>
<head><title> Introducción a LliureX </title></head>
<body>
<h1 ALIGN=center>¿Qué es LliureX? </h1>
<ul>
<li> <a HREF="#Sec_Pro"> Proyecto</a>
<li> <a HREF="#Sec_Dis"> Distribución</a>
<li> <a HREF="#Sec_Car"> Características</a>
<li> <a HREF="#Sec_Info"> Información</a>
</ul>
<hr>
<a NAME="Sec_Pro"></a><h3> Proyecto </h3>
<p> LliureX es ...</p>
<a NAME="Sec_Dis"></a><h3> Distribución </h3>
<p>Para ello ....</p>
<a NAME="Sec_Car"></a><h3> Características </h3>
<p>LliureX está ...</p>
<a NAME="Sec_Info"></a><h3> Información </h3>
<p> <a HREF="http://lliurex.net"> Página web de LliureX </a>
</body></html>
16
D E
32 - G
E N E R A C I Ó N
D E
P Á G I N A S
W E B
C O N
L
L I U R E
X
Figura 11: Documento con anclas.
1.4 OTROS ENLACES
Hasta ahora únicamente se han definido enlaces a otras páginas web (o a elementos
internos de una página web), pero pueden utilizarse los hiperenlaces para otro tipo de
elementos. Por ejemplo, podemos vincular cualquier tipo de documento para que pueda
descargarse desde otra ubicación. Así, con la siguiente instrucción
<a HREF=”apuntes.odt”> Apuntes de la asignatura </a>
podemos enlazar un documento de texto escrito con el procesador OpenOffice.org
Writer. Al hacer clic sobre este tipo de enlaces pueden ocurrir dos cosas: si el
navegador conoce la extensión del documento enlazado, puede abrir el documento con
el programa correspondiente; o puede guardar el documento en su ordenador para
abrirlo posteriormente. Habitualmente, nuestro navegador nos preguntará cuál de
estas opciones deseamos seguir.
I
N T R O D U C C I Ó N
A L
L
E N G U A J E
HTML - 17
D E
32
2 MEJORANDO NUESTRA PRIMERA PÁGINA
En esta sección se van a estudiar otros elementos del lenguaje HTML más avanzados.
Algunos de ellos, como el uso de imágenes, resultan esenciales para hacer nuestra
página web más atractiva para los usuarios de Internet.
2.1 IMÁGENES
Las imágenes ayudan a mejorar el aspecto visual de nuestra página web y pueden
introducir información útil que complementa el contenido textual del documento. En
los documentos HTML estas imágenes deben estar en formato JPEG o GIF; en LliureX
puede utilizarse, por ejemplo, The Gimp para diseñar este tipo de imágenes.
La etiqueta HTML que sirve para indicar la aparición de imágenes es <img>, y no
necesita etiqueta de cierre. Su atributo más importante es SRC, que indica la dirección
de la imagen. Así, para insertar en una página web una imagen que se encuentra en el
mismo directorio que el documento HTML basta con incluir la etiqueta siguiente:
<img SRC=”imagen.jpg”>
En caso de que la imagen se encuentre en otro directorio, deben seguirse las mismas
normas que ya se indicaron en el caso de hipervínculos. Así, el siguiente código
(ejemplo11.html)1
<html>
<head>
<title> Introducción a LliureX </title>
</head>
<body>
<h1 ALIGN=center>¿Qué es LliureX? </h1>
<img SRC=”ratoli.jpg”>
</body></html>
se visualizaría tal y como se muestra en la Figura 12.
1 La imagen del ratón de LliureX puede encontrarse en http://lliurex.net/home/files/ratoli.jpg.
18
D E
32 - G
E N E R A C I Ó N
D E
P Á G I N A S
W E B
C O N
L
L I U R E
X
Figura 12: Inserción simple de una imagen.
Quizás esta imagen es demasiado grande, por lo que querríamos reducir su tamaño.
Para controlar las dimensiones de una imagen la etiqueta <img> cuenta con los
atributos HEIGHT (altura) y WIDTH (anchura). Estos atributos reciben las dimensiones
correspondientes en pixels (podemos conocer las dimensiones de una imagen con
cualquier programa de diseño gráfico, como The Gimp). Así, la siguiente orden reduce
la imagen de nuestro ratoncito:
<img SRC=”ratoli.jpg” width=70 height=100>
Figura 13: Imagen reducida.
Si únicamente definimos uno de los dos atributos ( HEIGHT o WIDTH) el otro se cambia
automáticamente para mantener las dimensiones de la imagen original.
¿Y si quisiéramos incluir la imagen justo al lado del título de la página? En ese caso,
bastaría con introducir la etiqueta de imagen en el interior del par de etiquetas
<h1> ...</h1>, pero también definir la alineación del texto respecto a la imagen. El
atributo que define esta característica es ALIGN: este atributo puede aceptar (entre
otros) los valores top (alinea el texto con la parte superior de la imagen), middle (con la
parte central de la imagen) y bottom (con la parte inferior de la imagen) 2. Por ejemplo,
2 El uso de estas opciones está en desuso en HTML 4.01, donde se prefiere el uso de hojas de estilo.
I
N T R O D U C C I Ó N
A L
L
E N G U A J E
HTML - 19
D E
32
para alinear nuestro ratoncito con el centro del texto, el código HTML sería el
siguiente:
<html>
<head><title> Introducción a LliureX </title></head>
<body>
<h1 ALIGN=center>¿Qué es LliureX?
<img SRC=”ratoli.jpg” WIDTH=70 HEIGHT=100 ALIGN=middle></h1>
</body></html>
Figura 14: Alineación de texto e imágenes.
2.2 TABLAS
En esta sección se va a tratar la inserción de tablas en páginas web. El diseño de
tablas puede ser realmente complejo, incluyendo fusión de celdas, definición de colores,
bordes, etc. No obstante, aquí únicamente se tratará la creación de tablas simples,
dejando las tablas más complejas a los editores gráficos de páginas web.
La estructura básica de una tabla es muy simple: la tabla completa se define con las
etiquetas <table>...</table>, para iniciar cada fila hay que incluir una etiqueta <tr>,
y una etiqueta <td> por cada una de las columnas (o celda) de cada fila. Antes de
mostrar el primer código HTML de una tabla, indicaremos dos atributos de la etiqueta
<table> que darán un mejor aspecto a nuestra tabla: el atributo BORDER delimita las
celdas con una línea (con border=1,2,...se cambia la anchura del borde) y el atributo
ALIGN=center centra la tabla en la página web.
<html>
<head><title> Equivalencias LliureX/Windows </title></head>
<body>
<h1 ALIGN=center> Equivalencias LliureX/Windows </h1>
<hr>
<table BORDER=1 align=center>
<tr> <td> Tipo de aplicación <td> Windows <td> LliureX
<tr> <td> Suite Ofimática <td> Microsoft Office <td>
OpenOffice.org
<tr> <td> Navegador web<td> Windows Explorer <td> Mozilla Firefox
<tr> <td> Imágenes <td> Adobe Photoshop <td> The Gimp
</table>
</body></html>
20
D E
32 - G
E N E R A C I Ó N
D E
P Á G I N A S
W E B
C O N
L
L I U R E
X
Figura 15: Tabla sencilla.
Sería interesante poder destacar la primera fila, ya que constituye la cabecera de la
tabla. Para ello podemos definir celdas de cabecera, utilizando la etiqueta <th> en
lugar de <td>.
Una opción habitual en la construcción de tablas es la combinación de celdas. Para
ello, las etiquetas de celda (<td> o <th>) disponen de los atributos ROWSPAN (número de
filas que ocupa la celda) y COLSPAN (número de columnas que ocupa la celda). Hay que
tener en cuenta que al combinar celdas, el número de celdas en filas o columnas
subsiguientes puede disminuir.
A continuación se muestra el código de una página más compleja (ejemplo15.html) y su
visualización con el navegador.
<html>
<head> <title> Equivalencias LliureX/Windows </title> </head>
<body>
<h1 ALIGN=center> Equivalencias LliureX/Windows </h1>
<hr>
<table BORDER=1 ALIGN=center>
<tr> <th COLSPAN=3> Tabla de equivalencias
<tr> <th> Tipo de aplicación <th> Windows <th> LliureX
<tr> <th COLSPAN=3> Ofimática
<tr> <td> Suite Ofimática
<td> Microsoft Office <td>
OpenOffice.org
<tr> <td> Gestor de proyectos<td> Microsoft Project <td> Planner
<tr> <th COLSPAN=3> Internet
<tr> <td ROWSPAN=2> Navegador web<td ROWSPAN=2> Windows Explorer
<td> Mozilla Firefox
<tr> <td> Epiphany
<tr> <td> Correo <td> Outlook <td> Mozilla Thunderbird
<tr> <th COLSPAN=3> Diseño gráfico
<tr> <td> Imágenes <td> Adobe Photoshop <td> The Gimp
</table>
</body> </html>
I
N T R O D U C C I Ó N
A L
L
E N G U A J E
HTML - 21
D E
32
Figura 16: Tabla compleja.
2.3 MARCOS
El uso de marcos o frames es habitual en el diseño de páginas web para poder fijar
algunos elementos de la ventana, como por ejemplo índices o logos del sitio web.
Básicamente, los marcos permiten subdividir la ventana del navegador de forma que
se muestren distintas páginas web.
La estructura básica de una página con marcos no sigue el estándar habitual, ya que
se sustituye la etiqueta <body> por <frameset>, tal y como se muestra en el siguiente
esquema:
<html>
<head>
......
</head>
<frameset>
......
</frameset>
</html>
La etiqueta <frameset> presenta como atributos más importantes COLS y ROWS. Estos
atributos, excluyentes entre sí, definen si la ventana se va a dividir vertical u
horizontalmente, respectivamente, y el número y tamaño de estas divisiones.
Tomemos como ejemplo el atributo COLS (el uso de ROWS es totalmente equivalente).
Podemos definir las dimensiones de cada columna con un valor absoluto (en píxels),
relativo (en %) o tomar todo el espacio disponible. Por ejemplo, en el siguiente código
22
D E
32 - G
E N E R A C I Ó N
D E
P Á G I N A S
W E B
C O N
L
L I U R E
X
<frameset COLS=”80, 40%, *”>
......
</frameset>
se indica que la ventana del navegador se va a dividir en tres columnas, la primera de
las cuales presentará una anchura de 80 píxels, la segunda ocupará el 40% de la
ventana del navegador, y la tercera ocupará el resto (se indica con *). Si quisiéramos
subdivisiones iguales bastaría con escribir un carácter * por cada columna.
Para especificar la página web que se va a mostrar en cada marco se utiliza la etiqueta
<frame>. En su atributo SRC se indica de forma explícita la dirección web, como se
muestra en el siguiente ejemplo (fichero ejemplo16.html):
<html>
<head>
<title> Página web de LliureX </title>
</head>
<frameset COLS=”80, 40%, *”>
<frame SRC=”blanco.html”>
<frame SRC=”blanco.html”>
<frame SRC=”blanco.html”>
</frameset>
</html>
Si blanco.html es una página vacía (sólo con la etiqueta <html>, por ejemplo), el fichero
ejemplo16.html se mostraría así en el navegador:
Figura 17: Página web con tres marcos verticales.
También pueden anidarse marcos, es decir, subdividir un marco en nuevas
subventanas. Por ejemplo, el siguiente código (ejemplo17.html) subdivide la ventana
en dos marcos horizontales, y el segundo de estos marcos en dos columnas:
I
N T R O D U C C I Ó N
A L
L
E N G U A J E
HTML - 23
D E
32
<html>
<head> <title> Página web de LliureX </title></head>
<frameset ROWS="80,*">
<frame SRC="blanco.html">
<frameset COLS="80,*">
<frame SRC="blanco.html">
<frame SRC="blanco.html">
</frameset>
</frameset>
</html>
Figura 18: Página web con marcos complejos.
Ahora bastaría con cambiar nuestro código incluyendo una página web distinta en
cada marco. Vamos a hacerlo: para ello utilizaremos los ficheros ejemplo10.html y
ejemplo15.html (ya creados anteriormente) y prepararemos las páginas que se indican
a continuación:
✔
ejemplo18.html:
<html>
<head><title> Cabecera</title> </head>
<body> <h1 ALIGN=center> LLIUREX
<img SRC="ratoli.jpg" WIDTH=70 HEIGHT=100 ALIGN=middle> </h1>
</body>
</html>
24
D E
✔
32 - G
E N E R A C I Ó N
D E
P Á G I N A S
W E B
C O N
L
L I U R E
X
ejemplo19.html:
<html>
<head> <title> Indice </title> </head>
<body>
<h3> Indice </h3>
<ul>
<li> <a HREF="ejemplo10.html"> ¿Qué es LliureX? </a>
<li> <a HREF="ejemplo15.html"> Equivalencias
LliureX/Windows </a>
</ul>
</body>
</html>
✔
ejemplo20.html:
<html>
<head> <title> Página web de LliureX </title></head>
<frameset ROWS="130,*">
<frame SRC="ejemplo18.html">
<frameset COLS="200,*">
<frame SRC="ejemplo19.html">
<frame SRC="ejemplo10.html">
</frameset>
</frameset>
</html>
Si abrimos este último fichero con nuestro navegador, la página web tendría un
aspecto similar al siguiente. De esta forma, se ha logrado que el marco superior
contenga el logo de la página y el marco izquierdo un índice.
I
N T R O D U C C I Ó N
A L
L
E N G U A J E
HTML - 25
D E
32
Figura 19: Página web con varios marcos.
Haciendo clic en los enlaces del marco izquierdo, podríamos ver las webs enlazadas en
el marco derecho. ¿o no? Realmente, tal y como se ha escrito el código de estas páginas,
al hacer clic sobre uno de los enlaces del índice, la página se mostraría en el mismo
marco izquierdo. Este comportamiento no debería extrañarnos: es precisamente lo que
ocurriría en una página sin marcos.
Para indicar en qué marco deseamos que se abra un enlace, debemos introducir dos
nuevos atributos. En primer lugar, debemos dar un nombre a cada marco con el
atributo NAME de la etiqueta <frame> Así, podría modificarse el documento
ejemplo20.html como sigue:
<html>
<head> <title> Página web de LliureX </title></head>
<frameset ROWS="130,*">
<frame SRC="ejemplo18.html" NAME=”arriba”>
<frameset COLS="200,*">
<frame SRC="ejemplo19.html" NAME=”izquierda”>
<frame SRC="ejemplo10.html" NAME=”derecha”>
</frameset>
</frameset>
</html>
A continuación, en los enlaces del documento ejemplo19.html debería introducirse el
atributo TARGET en la etiqueta <a>, indicando el nombre del marco en el que se debe
mostrar la página enlazada.
26
D E
32 - G
E N E R A C I Ó N
D E
P Á G I N A S
W E B
C O N
L
L I U R E
X
<html>
<head> <title> Indice </title> </head>
<body>
<h3> Indice </h3>
<ul>
<li> <a HREF="ejemplo10.html" TARGET=”derecha”>
¿Qué es LliureX? </a>
<li> <a HREF="ejemplo15.html" TARGET=”derecha”>
Equivalencias LliureX/Windows </a>
</ul>
</body>
</html>
1 CARACTERÍSTICAS AVANZADAS
El lenguaje HTML comprende una gran cantidad de opciones para incluir texto con
características especiales, imágenes, audio, etc, por lo que el describir cada una de
ellas sería más propio de un manual que de un curso básico. Además, muchas de estas
opciones pueden incluirse mediante un editor de lenguaje HTML. Aún así, vamos a
introducir brevemente algunas características avanzadas de HTML, como son la
gestión de los estilos de fuente y el color, aunque estas opciones han quedado obsoletas
por el uso de hojas de estilo CSS.
1.1 USO DEL COLOR
Antes de hablar de cómo cambiar el color de distintas partes de la página web,
debemos comentar cómo hacer referencia a los distintos colores. Para ello, el lenguaje
HTML dispone de dos posibilidades:
✔
Nombres predefinidos: Existen una serie de colores que disponen de un
nombre predefinido al que podemos hacer referencia (óbviamente, en inglés).
A continuación, se muestra una pequeña tabla con algunos de estos nombres 3.
3 Existen más nombres predefinidos, pero en muchos casos sólo son soportados por algún navegador en
particular.
I
N T R O D U C C I Ó N
Color
A L
L
E N G U A J E
HTML - 27
D E
32
Nombre
Negro
Black
Blanco
White
Verde
Green
Violeta
Purple
Gris claro
Silver
Gris oscuro
Gray
Rojo
Red
Amarillo
Yellow
Azul
Blue
Azul claro
Aqua
Azul marino
Navy
Tabla 1: Nombres de colores HTML.
✔
Número hexadecimal: Este es el método más flexible para la definición de
colores, ya que permite definir cualquier color sin limitarse a un reducido
conjunto de nombres. Para ello se define el código RGB (de Red-Green-Blue),
que asocia un código hexadecimal a cada uno de los tres colores básicos. Dicho
código varía entre 00 y FF, es decir, entre 0 y 255 4. Así, el negro estaría
representado por el número 000000, el blanco por FFFFFF y el amarillo por
FFFF00. Para utilizar estos códigos en HTML hay que antecederlos con el signo
de número #. Así, podríamos cambiar el texto a rojo (como veremos a
continuación) incluyendo en la etiqueta body el atributo TEXT=”#FF0000”.
Para cambiar las características de color globales de un documento HTML debemos
especificar los cambios como atributos de la etiqueta body. El atributo BGCOLOR permite
cambiar el color de fondo de la página y el atributo TEXT el color de la fuente base. Por
ejemplo, si quisiéramos diseñar una página con el fondo rojo y fuente blanca,
escribiríamos la siguiente instrucción para el cuerpo del documento:
<body BGCOLOR=red TEXT=white>
También podemos incluir una imagen como fondo del documento, de forma que si es
más pequeña que la página se repite en forma de mosaico. A partir de la siguiente
imagen, de nombre fondo.gif
4 La definición de código hexadecimal excede los propósitos de este curso, por lo que en general se
utilizarán nombres de colores o el selector de color de un programa de edición.
28
D E
32 - G
E N E R A C I Ó N
D E
P Á G I N A S
W E B
C O N
L
L I U R E
X
Figura 20: Imagen para fondo de página.
se puede diseñar una página añadiendo el atributo BACKGROUND en su cuerpo:
<body BACKGROUND=”fondo.gif”>
Figura 21: Página web con imagen de fondo.
I
N T R O D U C C I Ó N
A L
L
E N G U A J E
HTML - 29
D E
32
1.1 ESTILOS DE FUENTE
En esta sección se pretende introducir distintas etiquetas y características del
lenguaje HTML que afectan a la presentación del texto en la página web. En
particular, se comentará el uso de distintos formatos de fuente y el uso de caracteres
especiales, como símbolos o letras acentuadas.
1.1.1 Formato de fuente
Para cambiar el formato con que se presentan los caracteres tenemos distintas
posibilidades, entre las que vamos a comentar el uso de estilos lógicos y físicos, y la
etiqueta <font>.
✔
Estilos lógicos: Con las estilos lógicos no se pretende decirle al navegador
cómo mostrar un texto determinado (si es negrita, cursiva, etc) sino las
características del contenido del texto presentado. Por ejemplo, con estas
etiquetas indicaremos que queremos resaltar un texto, indicar código de un
programa o la definición de una palabra. Así, si queremos resaltar un texto
(etiqueta <em>) será el propio navegador el que decida con qué características
físicas (negrita, cursiva, color, etc) va a mostrar dicho texto.
A continuación se muestra un listado de etiquetas de estilos lógicos y una
figura en la que se muestra su visualización con Mozilla Firefox.
Etiqueta
Acción
<em>...</em>
Resaltado
<strong>...</strong>
Resaltado mayor
<code>...</code>
Muestra de código de programa
<samp>...</samp>
Texto de muestra (similar a code)
<kbd>...</kbd>
Texto que debe escribir el usuario
<var>...</var>
Texto variable
<dfn>...</dfn>
Definición
<cite>...</cite>
Cita.
Tabla 2: Estilos lógicos de fuente.
30
D E
32 - G
E N E R A C I Ó N
D E
P Á G I N A S
W E B
C O N
L
L I U R E
X
Figura 15: Estilos lógicos en Mozilla Firefox.
✔
Estilos físicos: Al contrario que con los estilos lógicos, con los estilos físicos
queremos indicar al navegador exactamente cómo queremos que muestre la
información textual. Así, podemos especificar que queremos negrita, cursiva,
subrayado, etc. A continuación se muestra una lista con los estilos físicos más
importantes.
Etiqueta
Acción
<b>...</b>
Negrita
<em>...</em>
Cursiva
<u>...</u>
Subrayado
<big>...</big>
Aumenta tamaño de letra
<small>...</small>
Disminuye tamaño de letra
<sub>...</sub>
Subíndice
<sup>...</sup>
Superíndice
Tabla 3: Estilos físicos de fuente.
✔
Etiqueta <font> : El uso de esta etiqueta permite tener un mayor control
sobre las características de la fuente, en particular sobre el tipo de fuente y su
tamaño. Veamos sus atributos más importantes: SIZE, FACE y COLOR.
•
SIZE:
Este atributo de <font> permite cambiar el tamaño de la fuente, ys u
valor varía entre 1 y 7, siendo 3 el valor predeterminado. Por ejemplo,
podríamos utilizar un tamaño menor de letra con:
<font SIZE=1> Texto de menor tamaño </font>
También puede indicarse un cambio relativo de tamaño con los signos + y -.
Así, la siguiente instrucción aumenta el tamaño predeterminado en dos
puntos:
<font SIZE=+2> Texto de mayor tamaño </font>
I
N T R O D U C C I Ó N
A L
L
E N G U A J E
HTML - 31
D E
32
Como ya se ha comentado, el tamaño predeterminado es <font SIZE=3>.
No obstante, podemos cambiar este tamaño predeterminado con la etiqueta
<basefont>. Por ejemplo, si incluimos en una línea del documento la orden
<basefont SIZE=4>
a partir de ese punto, todo el texto que se introduzca se presentará con
tamaño 4 puntos, y los cambios relativos que se indiquen con <font> se
aplicarán a este nuevo tamaño.
Por último, cabe indicar que no es aconsejable utilizar este cambio de
tamaño para crear secciones del documento, ya que puede que haya
navegadores que no interpreten correctamente la etiqueta. Siempre es
mejor utilizar, para estos casos, los encabezados <h#>.
•
FACE:
Este atributo permite especificar una lista de tipos de fuente que el
navegador deberá intentar en el orden indicado. Así, la orden
<font FACE=”Arial,Times”> Texto </font>
le indica al navegador que utilice para el texto la letra Arial o, si no
dispone de ella, del tipo Times. En caso de no encontrar ninguna de estas
dos fuentes, utilizará la fuente predeterminada. Hay que tener en cuenta
que distintos navegadores y sistemas operativos utilizan distintos tipos de
letra (o iguales, pero con distinto nombre) por lo que el uso de esta opción
no es aconsejable.
•
COLOR:
Este atributo permite cambiar el color del texto incluido entre las
etiquetas <font> y </font>, siguiendo los formatos de color estudiados en la
sección anterior. Por ejemplo, para escribir un texto en color rojo,
escribiríamos_
<font COLOR=”red” Texto </font>
1.1.1 Caracteres especiales
Existe un conjunto de caracteres, denominados caracteres especiales, que pueden dar
problemas al ser visualizados en distintos navegadores en función de la codificación de
texto que se utilice. Estos caracteres incluyen las letras acentuadas y la letra ñ, entre
otros. Además, HTML no permite la inclusión de caracteres reservados de su código,
como <,>, & y “.
Para solucionar este problema, HTML permite el uso de entidades de carácter que
permiten introducir códigos asociados a los caracteres deseados y que son
comprensibles para todos los navegadores independientemente de la codificación que
utilicen. Estas entidades se introducen mediante una secuencia que empieza por “ &” y
termina por “;”. Entre estos dos caracteres se incluye el nombre abreviado del carácter
especial. Por ejemplo, la letra “á” se especificaría mediante la secuencia á .
También es posible incluir entre los caracteres “ &” y “;” el número asignado a dicho
carácter en la codificación ISO-Latin-1 precedido del carácter “ #”; por ejemplo, la letra
a con acento agudo se expresaría como á .Como se ve en la tabla de códigos
32
32 - G
D E
E N E R A C I Ó N
D E
P Á G I N A S
W E B
C O N
L
L I U R E
X
siguiente, es más sencillo recordar los nombres de los caracteres especiales que sus
números, por lo que únicamente se especifican sus nombres abreviados.
Carácter
Secuencia
Carácter
Secuencia
Carácter
Secuencia
á
á
à
à
ñ
ñ
é
é
è
è
Ñ
&Ntilda;
í
í
ì
ì
<
<
ó
ó
ò
ò
>
>
ú
ú
ù
ù
&
&
Á
Á
À
À
“
&quote;
É
É
È
È
[Espacio]
 
Í
Í
Ì
Ì
#
#
Ó
Ó
Ò
Ò
~
~
Ú
Ú
Ù
Ù
@
@
Tabla 4: Caracteres especiales HTML.