Beruflich Dokumente
Kultur Dokumente
INTRODUCCIÓN AL
LENGUAJE HTML
Teoría
1 Introducción
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
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>
I N T R O D U C C I Ó N A L L E N G U A J E HTML - 4DE28
2.2 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>).
5 D E 28 - TEOR Í A
<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.
I N T R O D U C C I Ó N A L L E N G U A J E HTML - 6DE28
<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.
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.
I N T R O D U C C I Ó N A L L E N G U A J E HTML - 8DE28
<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.
2.3.2 Listas numeradas
<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,...).
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.
✔ 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
11 D E 28 - TEOR Í A
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.
I N T R O D U C C I Ó N A L L E N G U A J E HTML - 12 D E 28
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:
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:
13 D E 28 - TEOR Í A
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.
15 D E 28 - TEOR Í A
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>
<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.
I N T R O D U C C I Ó N A L L E N G U A J E HTML - 16 D E 28
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.
¿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.
17 D E 28 - TEOR Í A
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>
I N T R O D U C C I Ó N A L L E N G U A J E HTML - 18 D E 28
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>
19 D E 28 - TEOR Í A
Figura 16: Tabla compleja.
4.3 MARCOS
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
I N T R O D U C C I Ó N A L L E N G U A J E HTML - 20 D E 28
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.
21 D E 28 - TEOR Í A
Págna1
Pági
na2 Página3
Figura 18: Página web con marcos complejos.
I N T R O D U C C I Ó N A L L E N G U A J E HTML - 22 D E 28
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>
<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.
23 D E 28 - TEOR Í A
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>
I N T R O D U C C I Ó N A L L E N G U A J E HTML - 24 D E 28
<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
3 Existen más nombres predefinidos, pero en muchos casos sólo son soportados por algún navegador en
particular.
25 D E 28 - TEOR Í A
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.
I N T R O D U C C I Ó N A L L E N G U A J E HTML - 26 D E 28
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.
27 D E 28 - TEOR Í A
5.2 Estilos de FUENTE
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.
• 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>
• 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>