Teoria HTML

1
INTRODUCCIÓN AL
LENGUAJE HTML
Teoría
CREACIÓN DE PÁGINAS WEB

1 D E 28 - TEOR Í A
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 5. 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. Un ejemplo sería
el programa de software libre BlueFish, o el block de notas de Windows.
✔ 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 Kompozer,.
✔ Conversores: Por último, la gran mayoría de procesadores de texto permiten
convertir los documentos a HTML. Por ejemplo, con LibreOffice Writer se
pueden diseñar páginas web de forma sencilla y rápida. No obstante, los
conversores tienen los mismos problemas que los editores gráficos: introducen
código basura en el fichero final y su resultado puede no ser el esperado.
I N T R O D U C C I Ó N A L L E N G U A J E HTML - 2DE28
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.2 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 o el block de notas en Windows) 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.
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>
2.2 Texto SENCILLO
Con los elementos aprendidos hasta ahora ya se puede crear una página web con algo
de texto:
<html>
<head>
</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>).
<html>
<head>
</head>
<body> ¿Qué es LliureX?<br>
LliureX es el proyecto de la Conselleria de Cultura, Educación y
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.
<html>
<head>
</head>
<body> <p ALIGN=center> ¿Qué es LliureX? </p>
<p>LliureX es el proyecto de la Conselleria de Cultura, Educación y
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...
Figura 5: Página con línea horizontal.
2.3 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.
2.3.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.
<html>
<head>
</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
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>
gratuito.</p>
</body>
</html>
Figura 6: Uso de encabezados.
2.3.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 cierre. Por ejemplo, el siguiente código en la página ejemplo07.html

especifica las cuatro libertades del software libre.
<h3> Características </h3>
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”>.
I N T R O D U C C I Ó N A L L E N G U A J E HTML - 10 D E 28
2.3.3 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. Código en la página ejemplo08.html
<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.
3 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.
3.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).
3.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:
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.
3.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>
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="#Pro"> Proyecto</a>
<li> <a HREF="#Dis"> Distribución</a>
<li> <a HREF="#Car"> Características</a>
<li> <a HREF="#Info"> Información</a>
</ul>
<hr>
<a NAME="Pro"></a><h3> Proyecto </h3>

<p> LliureX es ...</p>
<a NAME="Dis"></a><h3> Distribución </h3>

<p>Para ello ....</p>
<a NAME="Car"></a><h3> Características </h3>

<p>LliureX está ...</p>
<a NAME="Info"></a><h3> Información </h3>

<p> <a HREF="http://lliurex.net"> Página web de LliureX </a>
</body></html>
Figura 11: Documento con anclas.
3.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.
4 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.
4.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>
</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.
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 (ejemplo12.html):
<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
2 El uso de estas opciones está en desuso en HTML 4.01, donde se prefiere el uso de hojas de estilo.
ejemplo, para alinear nuestro ratoncito con el centro del texto, el código HTML sería el
siguiente:(ejemplo13.html)
<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.
4.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. (ejemplo14.html)
<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>
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>
Figura 16: Tabla compleja.
4.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
<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=”pag1.html”>
<frame SRC=”pag2 .html”>
<frame SRC=”pag3 .html”>
</frameset>
</html>
Si pag1.html es una página cuyo contenido es el texto página1, pag2.html tiene como
contenido página2 y pag3.html tiene el texto página3 , el fichero ejemplo16.html se
mostraría así en el navegador:
Pági
Página2 Página3
na1
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:
<html>
<head> <title> Página web de LliureX </title></head>
<frameset ROWS="80,*">
<frame SRC="pag1.html">
<frameset COLS="80,*">
</frameset>
</frameset>
</html>
Págna1
Pági
na2 Página3
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>
✔ 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>
<frame SRC="ejemplo18.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.
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>
<frame SRC="ejemplo18.html" NAME=”arriba”>
<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.
<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>
5 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.
5.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 nombres3.
3 Existen más nombres predefinidos, pero en muchos casos sólo son soportados por algún navegador en
particular.
Color 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 RedGreenBlue),
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.
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.
5.2 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.
5.2.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 físicos y la etiqueta
<font>.
✔ 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 1: 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, y su
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>
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>

Teoria HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Teoria HTML

Cargado por

Copyright:

Formatos disponibles

1

CREACIÓN DE PÁGINAS WEB

El lenguaje HTML (HyperText Markup Language) es el que se utiliza para el

El lenguaje HTML ha ido cambiando para incorporar nuevos elementos, como la

Después de la introducción anterior, vamos a empezar a diseñar nuestra primera

Aunque, como se verá en la sección siguiente, puede estructurarse mejor un

Para crear listas numeradas con HTML, hay que utilizar las etiquetas <ol> y <li>.

etiqueta de cierre. Por ejemplo, el siguiente código en la página ejemplo07.html

Así, si quisiéramos definir una lista con numeración romana en minúscula

Al igual que ocurre con las listas numeradas, en este caso el atributo TYPE permite

✔ TYPE=”disc”: La viñeta es un círculo negro. Es el valor utilizado si no

Imaginemos que la dirección web del documento a.html es http://ejemplo/a.html. En

<a NAME=”Seccion_Car”> </a> <h3> Características </h3>

<h1 ALIGN=center>¿Qué es LliureX? </h1>

<a NAME="Pro"></a><h3> Proyecto </h3>

<a NAME="Dis"></a><h3> Distribución </h3>

<a NAME="Car"></a><h3> Características </h3>

<a NAME="Info"></a><h3> Información </h3>

Si únicamente definimos uno de los dos atributos ( HEIGHT o WIDTH) el otro se cambia

El uso de marcos o frames es habitual en el diseño de páginas web para poder fijar

<frameset COLS=”80, 40%, *”>

También pueden anidarse marcos, es decir, subdividir un marco en nuevas

A continuación, en los enlaces del documento ejemplo19.html debería introducirse el

Antes de hablar de cómo cambiar el color de distintas partes de la página web,

✔ Nombres predefinidos: Existen una serie de colores que disponen de un

En esta sección se pretende introducir distintas etiquetas y características del

✔ Etiqueta <font> : El uso de esta etiqueta permite tener un mayor control

Por último, cabe indicar que no es aconsejable utilizar este cambio de

navegadores que no interpreten correctamente la etiqueta. Siempre es

También podría gustarte