MASTER GESTIÓN DE CONTENIDOS DIGITALES
Fonaments d'edició electrónica – Curs 2009‐2010
Mari Vállez
XHTML y CSS
Octubre 2009
Fuente: Tutorial basado en el material de la asignatura Documentació en els
Mitjans de Comunicació del Grau Comunicació Audiovisual, elaborado por los
profesores Lluís Codina, Rafael Pedraza y Mari Vállez.
XHTML es el acrónimo del inglés eXtensible HyperText Markup Language. Es
el lenguaje pensado para sustituir a HTML como lenguaje estàndard para las
páginas web. XHTML es la versión XML de HTML y por tanto tiene casi las
mismas funcionalidades pero cumple la especificaciones más estrictas de
XML.
Pretende avanzar en el objetivo del 3WC de tener un web semántico, donde
los contenidos y la forma de presentarse estén separados. Las hojas de
estilo serán las encargadas del aspecto y diseño en lo diferentes medios:
ordenadores, móviles, PDA, impresiones, ...
1. Características básicas del código XHTML
[Link] XHTML, las etiquetas, los atributos, los valores, etc., de cada
elemento, excepto la declaración DOCTYPE, se escriben siempre en
minúsculas.
[Link] documentos XHTML deben tener los 3 elementos estructurales:
<html>, <head> y <body>.
[Link] elemento <title> debe aparecer siempre en <head>.
[Link] los elementos deben tener una etiqueta de cierre. Las etiquetas
sin contenido afectado, como <hr> se cierran o bien de este modo:
<hr></hr> o bien con una sola etiqueta pero con una barra: <hr />.
[Link] valores de los atributos deben ir siempre entre comillas, aunque
sean valores simples.
[Link] etiquetas se deben anidar correctamente. Por ejemplo,
<strong><em>negritas y cursivas</em></strong> es correcto, pero
<strong><em>negritas y cursivas</strong></em> no lo es porque
están cruzadas entre ellas: en este caso, si la etiqueta <strong> es la
primera, su etiqueta de cierre </strong> debe ser la última.
La forma actual de crear páginas web consiste en utilizar XHTML en alguna
de sus variantes (a efectos de este taller nosotros recomendamos la que
hemos usado aquí, denominada Transitional) más un sistema para dar
formato a las páginas denominado CSS.
Qué es CSS
Cascading Style Sheets (CSS) es la forma de controlar el aspecto de un
documento XHTML, es decir, su presentación, cómo vamos a verlos en el
monitor (o una en forma impresa).
CSS permite controlar cómo debe interpretar el navegador cada elemento.
Por ejemplo, podemos cambiar la forma en la cual se interpretan los
elementos <h1>, <h2>, etc., o hacer que cambie la apariencia de los
enlaces, etc.
El método es muy sencillo: se puede añadir, dentro del elemento <head>
de un documento XHTML un par de etiquetas de estilo (<style>...
</style>), dentro de las cuales podemos especificar el aspecto de los
elementos de la página. Por ejemplo, sin hojas de estilo, la interpretación
del navegador de un encabezado tipo <h1> es la siguiente:
Ahora, veremos cómo es un ejemplo de codificación con CSS. Primero,
presentamos cómo podemos modificar el aspecto de las etiquetas con CSS
<h1>:
<head>
<style type="text/css">
h1 {color: blue; font-family: Verdana, Arial; font-weight: normal;
font-size: 22pt}
</style>
</head>
La declaración de estilo anterior provocará que todos los encabezados tipo
<h1> de una página web tengan las mismas características. El resultado
será éste:
-2-
Si la página o el sitio web tiene 10 de tales encabezados (o mil) de tipo
<h1> todos adoptarán de manera automática la misma apariencia sin
necesidad de añadir 10 veces (o mil veces) las mismas especificaciones a
cada encabezado por separado.
2. Prácticas con CSS
Ejercicio 1: Un documento XHTML básico
Para los siguientes ejercicios, utilice el Bloc de Notas o HTML-Kit.
Entre el siguiente código fuente. No olvide adaptar los datos de autoría y
fecha a su contexto real:
Primer documento XHTML con CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link] xml:lang="es" lang="es">
<head>
<title>El montaje en el cine</title>
</head>
<body>
<h1>El montaje en el cine</h1>
<hr />
<p>Un ejemplo de página xhtml con una cita de <cite>Pudovkin:</cite></p>
<blockquote>Repetiré una vez más que el montaje es la fuerza creadora de la realidad
fílmica, y que la naturaleza sólo aporta la materia con que formarla. Esa, precisamente, es
la relación entre montaje y cine.</blockquote>
<p><hr />
(V. I. Pudovkin, 1929)<br />Editor de esta página: A. Polonsky<br />
Marzo 2007</p>
</body>
</html>
Visto en el navegador, una vez guardado el documento (puede darle el
nombre [Link]) tendrá este aspecto:
-3-
Ejercicio 2: Modificaciones con CSS
Vuelva a abrir el documento [Link] en el Bloc de Notas. Ahora, añada
la siguiente codificación dentro de <head> (y después de <title>):
Código CSS que hay que añadir al documento [Link]
…
<head>
<title>El montaje en el cine</title>
<style type="text/css">
body{font-family: Verdana, Arial; font-size: 12pt;}
h1 {color: blue; font-weight: normal; font-size: 22pt;}
hr { border-color: blue; }
blockquote {font-style: italic;}
</style>
</head>
…
El resultado completo del nuevo código fuente del documento [Link]
debe ser ahora el siguiente (hemos resaltado el nuevo código añadido):
-4-
Ejemplo de XHTML con código CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link] xml:lang="es"
lang="es">
<head>
<title>El montaje en el cine</title>
<style type="text/css">
body{font-family: Verdana, Arial; font-size: 12pt;}
h1 {color: blue; font-weight: normal; font-size: 22pt;}
hr { border-color: blue; }
blockquote {font-style: italic;}
</style>
</head>
<body>
<h1>El montaje en el cine</h1>
<hr />
<p>Un ejemplo de página xhtml con una cita de
<cite>Pudovkin:</cite></p>
<blockquote>Repetiré una vez más que el montaje es la fuerza creadora
de la realidad fílmica, y que la naturaleza sólo aporta la materia con que
formarla. Esa, precisamente, es la relación entre montaje y
cine.</blockquote>
<p><hr />
(V. I. Pudovkin, 1929)<br />Editor de esta página: A. Polonsky<br />
Marzo 2007</p>
</body>
</html></body>
</html>
Guarde el documento, con el mismo nombre. Abra el documento con el
navegador, o haga clic en el botón Actualizar del navegador si ya lo tenía
cargado. El resultado debe ser ahora este:
-5-
Observe los cambios: toda la fuente del documento ha cambiado a Verdana,
el título tipo <h1> ahora ha cambiado a color azul y ya no está en negrita y
la cita ha pasado a cursiva. Las dos barras horizontales se muestran ahora
de color azul (en el navegador Opera; otros navegadores pueden ignorar
esta instrucción concreta). Si su documento tuviera cientos de encabezados,
la transformación hubiera sido igual de rápida y eficiente con la edición de
una pocas líneas de código fuente.
3. Propiedades CSS
Para los ejercicios de esta Unidad, podrá utilizar los siguientes elementos de
estilo (el alumno podrá añadir otros, si lo desea, más adelante se indicarán
algunas fuentes adicionales de información sobre el tema):
Elementos de hojas de estilo
Selector Codificación Explicación
body body {font-family: Verdana, Para proporcionar una
Arial; font-size: 12pt; margin- fuente homogénea y muy
right: 15px; margin-left: 15px} legible a todo el documento.
Por si el ordenador del
navegador cliente no tiene
Verdana, hemos previsto
que, en segunda opción use
Arial que está siempre
presente en todos los
ordenadores. Además, nos
aseguramos que queden
márgenes a ambos lados del
documento, para que sea
aún más legible
h1 h1, h2, h3 {color: blue} Podemos indicar de esta
h2 forma una propiedad que
h3 queremos que afecte a
diversos elementos. De este
modo, indicamos que
queremos que todos los
encabezados sean de color
azul
h1 h1 { font-weight: normal; font- Damos un tamaño de 22
size: 22pt} puntos a h1 y eliminamos la
negrita
h2 h2 { font-weight: normal; font- Idem, con 18 pt para este
size: 18pt} nivel
h3 h3 { font-weight: normal; font- Idem, 14 pt
size: 14pt}
a a:hover {color: red; font- Modifica el aspecto de un
weight: bold; text-decoration: enlace cuando el usuario
none} desplaza el cursor sobre el
mismo. Proporciona algo
-6-
más de interactividad a los
enlaces
hr hr {border-color: blue} Causa que las líneas
horizontales sean de color
azul y que tengan una
altura de un píxel
Observe que los distintos valores de cada selector se separan mediante: ;
No es necesario poner ; al final del último selector.
Ejemplo de codificación CSS en un documento XHTML
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link] xml:lang="es" lang="es">
<head>
<style type="text/css">
body {font-family: Verdana, Arial; font-size: 12pt; margin-right: 15px;
margin-left: 15px}
h1, h2, h3 {color: blue}
h1 { font-weight: normal; font-size: 22pt}
h2 { font-weight: normal; font-size: 18pt}
h3 { font-weight: normal; font-size: 14pt}
a:hover {color: red; font-weight: normal; text-decoration: none}
hr {border-color: blue}
</style>
<title>…</title>
</head>
<body>
…
</body>
</html>
4. Sintaxis CSS
Como habrá observado por los ejemplos de codificación anteriores, la
sintaxis de CSS es sumamente sencilla, pero muy sensible. Debe respetarse
escrupulosamente, o no funcionará. En general es así: se indica el nombre
de elemento cuyo aspecto deseamos especificar, por ejemplo, body. Este
elemento, en CSS se denomina selector. Después del selector hay un
espacio, y entre corchetes ({…}) se indica la propiedad, por ejemplo, font-
family, después, dos puntos (:), y el valor de la propiedad, por ejemplo,
verdana. Si hay más de una propiedad, se separan mediante punto y como
(;) y se cierra la declaración con corchetes como ya hemos visto ({…}).
Finalmente, todas las declaraciones de estilo se encierran entre las
etiquetas <style>…</style>. Es aconsejable indicar la propiedad
-7-
type="text/css" en la etiqueta de apertura, de modo que la pareja de
etiquetas recomendable es ésta:
<style type="text/css">…</style>.
5. Otras posibilidades
Con CSS se puede controlar otros aspectos de una página web que aquí no
hemos visto. Además, las hojas de estilo se pueden guardar en documentos
separados de la página web, de manera que una misma hoja de estilo
puede afectar a varios documentos escribiendo la hoja de estilo una vez.
Para ello, el documento que contiene la hoja de estilo debe consistir en un
archivo de texto simple con la extensión css, por ejemplo [Link]. Este
archivo puede contener la misma codificación del ejemplo anterior:
Contenido del archivo externo CSS
body {font-family: Verdana, Arial; font-size: 12pt; margin-right: 15px;
margin-left: 15px}
h1, h2, h3 {color: blue}
h1 { font-weight: normal; font-size: 22pt}
h2 { font-weight: normal; font-size: 18pt}
h3 { font-weight: normal; font-size: 14pt}
a:hover {color: red; font-weight: normal; text-decoration: none}
hr {color: blue; height: 1px}
Como puede verse, en este caso no se debe encerrar entre las etiquetas
<style> las especificaciones de estilo que se guardan en un archivo externo.
Es importante guardarlo como archivo solo texto y con extensión css.
Este archivo se vincula con el documento mediante un enlace en el código
fuente del documento original mediante la etiqueta link y las propiedades
type, rel, href. Ejemplo:
Ejemplo de vinculación con link
…
<head>
…
<link rel="stylesheet" type="text/css" href="[Link]" />
…
</head>
…
Naturalmente, para que el ejemplo anterior funcione bien, ambos archivos,
la página web y el archivo css, deben estar guardados en el mismo
directorio o carpeta.
-8-
SEGUNDA PARTE
Simularemos la creación de una sede Web sobre tramas y guiones de cine y
la montaremos usando XHTML y CSS.
1. Requerimientos
El sitio web debe tener algunas características muy importantes desde el
punto de vista de la arquitectura de la información:
1. Navegación constante. Significa que, en todas las secciones o páginas del
sitio web debe haber un mismo menú (navegación constante) que permita,
al menos, acceder desde cualquier lugar de la web a la página principal, a
las secciones principales y a la página de créditos. Esto, naturalmente, sin
perjuicio que algunas páginas puedan tener, además, un menú local si fuera
necesario (el menú local no es necesario para esta práctica).
2. Identificación. Todas las páginas o secciones del sitio deben tener: título,
fecha de creación o actualización, datos de autoría o acceso a datos de
autoría.
3. Metadatos-1. Todas las páginas, y especialmente, la página principal
([Link]) deben tener los siguientes metadatos en la sección <head>
(<title> debe ser siempre el primero):
- title
- author
- description
- keywords
4. Metadatos-2. Todos los enlaces, internos o externos deben tener el
atributo title.
5. Hoja de estilo. Todos los aspectos de apariencia de la página deben estar
controlados por una hoja de estilo. La hoja de estilo puede estar vinculada
desde un archivo externo (opción recomendada) o formar parte de la
sección <head>, aunque se recomienda la primera opción.
2. Objetivos
El objetivo es que, con el Bloc de Notas o con HTML-Kit proceda a crear,
paso a paso, tres documentos XHTML con el contenido y la presentación
que se indica a continuación1 (recuerde que lo vemos ahora es el objetivo final, los
pasos para llegar al mismo se indicarán más adelante en el punto 5.3):
1 Los textos de los tres documentos son transcripciones de la obra citada de Tobias.
-9-
[Link]
inicio | trama1 | trama2 | trama3 | créditos
El guión y la trama
__________________________________________________________________
Trama 1: Búsqueda
La trama de búsqueda, como su nombre indica, es la búsqueda que
efectúa el protagonista de una persona, un lugar o una cosa, sea tangible o
intangible. Puede ser el Santo Grial, el Valhalla, la inmortalidad, la Atlántida
o el Reino Medio. El personaje principal busca específicamente (y no
casualmente) algo que espera o desea cambiará su vida de una manera
significativa.
El objeto de la búsqueda del protagonista se refleja poderosamente en su
carácter y, habitualmente, lo transforma de algún modo, afectando así el
cambio del personaje, lo cual es importante al término del relato. En todos
los casos, el protagonista es muy diferente al final de la historia de como
era en un principio.
Observaciones: la página tiene un menú de navegación en la parte
superior, que permitirá acceder a la página principal, a las otras secciones y
a la página de créditos. Observe que, el elemento del menú correspondiente
a la página que se está viendo, está tratado de otra forma (no contiene un
enlace, ya que sería un enlace a sí mismo y tiene otro color).
Los contenidos de las otras páginas son los siguientes (obviamos a efectos
de estas ilustraciones la navegación y la autoría/fecha):
-10-
[Link]
inicio | trama1 | trama2 | trama3 | créditos
El guión y la trama
_______________________________________
Trama 2: Aventura
La trama de la aventura se parece en varios aspectos a la de búsqueda,
pero existen profundas diferencias entre ambas. La de búsqueda es una
trama de personajes. Es una trama mental. La de aventura, por otro lado,
es una trama de acción, es una trama de lo físico.
La diferencia radica principalmente en el enfoque. En la trama de búsqueda,
desde el principio hasta el final, el énfasis recae en la persona que efectúa
la búsqueda; en la de aventura, el enfoque recae en el viaje mismo.
[Link] (obviamos la navegación constante, pero la página del alumno
debe contenerla)
Trama 3: Persecución
Hay dos juegos que nunca parecen cansar la imaginación de los niños: el
juego del escondite y el corre, corre que te pillo. Intenta recordar la
sensación de excitación al estar a la caza y hallar dónde se escondían los
demás.
La trama de persecución es la versión literaria del juego del escondite.
La premisa básica de la trama es simple: una persona caza a otra. Sólo se
necesitan un par de personajes, el perseguido y el perseguidor. Y ya que es
una trama física, la caza es más importante que aquellos que toman parte
en ella.
El cuarto y el quinto documento serán un poco diferentes. En el caso de la
página de créditos será como se muestra a continuación y deberá contener
sus datos, por ejemplo:
[Link]
Créditos
Contenido: página realizada con extractos de la obra de Ronald B.
Tobias: 20 Master plots and how to build them (traducción al castellano; El
guión y la trama, 1999).
Editor: página realizada por Abraham Polonsky, Estudios de Comunicación Audiovisual, Barcelona
(UPF). Marzo 2007
-11-
Observaciones: el nombre debe contener un enlace al correo electrónico
del autor (enlace de tipo mailto). Estudios de Comunicación Audiovisual,
debe contener un enlace a la página web de los Estudios e igual con la
palabra UPF.
Los enlaces de tipo mailto generan la apertura automática de un cliente de
correo electrónico y copian la dirección del destinatario. La forma de un
enlace mailto es la siguiente:
…
<a href="[Link]
Polonsky</a>
Lo que en pantalla se verá así:
…
Abraham Polonsky
…
La página inicial ([Link]) debe tener este contenido:
[Link]
trama1 | trama2 | trama3 | créditos
El Guión y la Trama
Fundamentos de la escritura dramática audiovisual
__________________________________________________________
Principales tramas de la escritura dramática audiovisual:
1. Búsqueda
2. Aventura
3. Persecución
___________________________________________________________
Página editada por A. Polonsky, con extractos de la obra de R. B. Tobias
Marzo 2007
-12-
3. Presentación: CSS
Selectores de clase
La ilustración de la página principal de esta práctica nos sirve para ilustrar
un tipo de selector que no hemos comentado: los selectores de clase. Los
selectores de clase los crea libremente el autor de la página, es decir, no es
necesario que coincidan con el nombre de un elemento XHTML. En este
caso, se supone que hemos utilizado un selector de clase para lograr
centrar algunas partes de las páginas de este ejercicio. Un selector de clase
se identifica con un punto (.) seguido de un nombre, por ejemplo:
.centrado
Es lo que podemos hacer si deseamos centrar el título y la navegación
constante en la página de ejemplo. Después, podemos asignar la clase
“centrado” como un atributo mediante el código class=”centrado” al
elemento que queremos centrar. Veamos cómo sería el código
correspondiente:
…
<style type="text/css">
body{font-family: Verdana, Arial; font-size: 12pt;}
h1 {color: blue; font-weight: normal; font-size: 22pt;}
hr { border-color: blue; }
.centrado { text-align: center; }
</style>
</head>
<body>
<p class="centrado">enlace1 | enlace2 | enlace3 |</p>
<h1 class="centrado">El Guión y la Trama <br />
Fundamentos de la escritura dramática audiovisual </h1>
…
Si nos fijamos en el código anterior, primero hemos declarado la clase
.centrado en la hoja de estilo y después hemos asignado esa clase a los dos
elementos que queremos centrar. Las hojas de estilo CSS con este sistema
y otros que aquí no hemos considerado, proporcionan una total libertad al
creador de la página.
-13-
Ejercicio 3.
A) Procedimientos y preparación de los materiales
Necesitaremos preparar los materiales de nuestra Web. Tomaremos
extractos de la obra de Tobias2 sobre guiones y tramas para simular los contenidos de
la Web. Estos materiales están disponibles en la web de la asignatura.
Para esta práctica crearemos la maqueta de un sitio web que constará en
total de cinco páginas: tres de contenidos (trama1 a trama3), una página
principal (index) y una para los créditos:
1. [Link]
2. [Link]
3. [Link]
4. [Link]
5. [Link]
El contenido textual, sin marcado, navegación ni hoja de estilo, de cada una
de las cinco páginas está disponible en un documento de texto en la web de
la asignatura en el Aula que el alumno puede copiar y pegar en cada una de
las páginas correspondientes.
La estructura de este hipertexto corresponderá a una estructura jerárquica
de un solo nivel y con enlaces en red:
Estructura hipertextual del ejercicio (se ha obviado una parte de los enlaces para facilitar la
interpretación)
2 Ronald B. Tobias. El guión y la trama. Madrid: Ediciones Internacionales Universitarias, 1999 (título
original: 20 Master plots and how to build them, 1993)
-14-
B) Orden de trabajo
1. Crear las tres páginas de contenido
Los documentos [Link] y [Link] serán los últimos que haremos.
Comenzaremos por editar los documentos de contenido: [Link],
[Link], [Link]. Lo más práctico será crear un directorio nuevo
(puede llamarlo guiones) donde pondremos todos los materiales. La
recomendación es tenerlo todo en un solo directorio, de modo que los
enlaces puedan consistir únicamente en nombre de documentos (sin
necesidad de indicar nombres de directorio ni estructuras jerárquicas).
Se recomienda empezar por crear la estructura básica de las tres páginas:
Ello se debe realizar con la creación de cajas, con la etiqueta <div> y el
identificador asignado a cada una de ellas, que debe ser un nombre único.
Después pueden crearse las 3 páginas web de contenidos, cada una de las
cuales tendrá una estructura semejante y que corresponderá a las tres
tramas. El nombre del archivo de cada página será el siguiente:
[Link]
[Link]
[Link]
Estos contenidos se pueden obtener de la web de la asignatura.
2. Marcar el contenido con XHTML
Una vez creadas las tres páginas, abriremos una de ellas, por ejemplo
[Link] y la "marcaremos", es decir, indicaremos, por ejemplo, los
párrafos con <p>; el título principal con <h1>, lo que queremos que vaya
en negrita con <strong>, etc. Procederemos igual con las otras dos
páginas.
-15-
3. Crear la estructura y las páginas de inicio y de créditos
Crearemos las páginas de inicio ([Link]) y de créditos (cré[Link]) y
las marcaremos con XHTML.
4. Crear la barra de navegación
Cuando tengamos las tres páginas de contenido y las páginas de inicio y de
créditos marcadas, abriremos de nuevo la página [Link] y le
añadiremos la barra de navegación constante
Aspecto de la barra de navegación en el navegador:
inicio | trama1 | trama2 | trama3 | créditos
Por ejemplo, la siguiente porción de código muestra el elemento inicio del
menú enlazado al documento [Link] desde, por ejemplo, la página de la
trama1 (o de cualquier otra):
…
<a href="[Link]">inicio</a> | trama1 | trama2 | trama3 | créditos
…
Pondremos a prueba la barra de navegación, y si funciona bien, podemos
proceder a copiar y pegar el código fuente de esta barra de navegación en
cada una de las otras páginas (modificando lo que corresponda).
5. Presentación con CSS
Cuando tengamos el contenido de cada una de las páginas marcado y con la
barra de navegación, podemos crear la hoja de estilo (incrustada o
vinculada) que modifique la presentación de cada página y ya tendremos
nuestro sitio web completo.
6. Control de calidad
Deberá componer una página Web con los cinco documentos anteriores que
cumpla con los siguientes objetivos:
01. Cada una de las tramas debe ser una página independiente, así
como debe haber una página principal
02. la página debe estructurarse en capas, utilizando la etiqueta
<div>
03. La página principal contiene un enlace a todas las demás páginas
04. La página principal y todas las páginas contienen metadatos
05. Todas las páginas contienen, título, fecha y autor
06. Todas las páginas tienen navegación constante
07. Todos los enlaces son relativos (solo nombre archivo) y todas las
páginas están en la misma carpeta
-16-
08. Todos los enlaces tienen atributo título
09. Hay una página de créditos
10. Todos los elementos de presentación están controlados por una
hoja de estilo (interna o externa)
11. El nombre del autor debe contener un enlace a su correo
electrónico (enlace tipo mailto) y las palabras de los Estudios y de la
UPF deben tener a las webs correspondientes.
Una creado el sitio web con XHTML y CSS sobre guiones, y conseguidos los
diez objetivos anteriores, se ha finalizado esta Unidad Didáctica.
-17-
ANEXO
ENLACES ENTRE SECCIONES DEL MISMO DOCUMENTO
(bookmarks, named anchors)
A veces, podemos desear enlazar secciones del mismo documento entre sí.
Se trata de una opción sumamente útil que sirve para proporcionar algo de
navegación y de interactividad a documentos unitarios muy extensos.
Algunas editores de páginas Web en castellano denominan marcadores a
esta clase de enlaces; los programas en inglés los denominan bookmarks o
named anchors.
La cuestión es que, para poder enlazar entre sí distintas secciones de un
mismo documento, primero hay que nombrar explícitamente cada una de
estas secciones, mediante un atributo name, de aquí el nombre named
anchors. Pero, cada nombre es también una marca, de aquí el término
marcadores o bookmarks.
Primera parte: nombrar las secciones
Para poner nombrar (o marcar) una sección se dispone del atributo name.
Se utiliza así:
...
<a name="capitulo3">Capítulo 3: El cine fantástico en el Festival de Sitges
</a>
...
Analicemos esta instrucción. Vemos que contiene la etiqueta en sí misma,
en este caso: <a>...</a>; un atributo, en este caso: name. Por último,
hemos indicado un valor: "capitulo3". Las comillas son imprescindibles.
El significado en lenguaje natural de esta instrucción equivale a esto:
"capitulo3" es el nombre que servirá para enlazar al Capítulo 3. No es
necesario que la marca tenga el mismo nombre que la sección. Es
aconsejable usar nombre nemotécnicos para las marcas, pero nada más.
Observe que hemos obviado el acento en el nombre de la marca. Es
aconsejable no usar nombres con acentos. También podríamos haber
puesto un número en lugar de un nombre, etc. La cuestión es que, después,
nos acordemos de qué secciones corresponden a cada marca si tenemos un
documento muy largo con muchas marcas.
¿Por qué no podríamos enlazar directamente al Capítulo 3 sin ponerle una
marca? ¿Acaso no tiene ya un nombre? La razón es que los ordenadores no
pueden pensar ni realizar inferencias. Para el ordenador, y por tanto para el
-18-
navegador, "Capítulo 3" es solamente una cadena de caracteres más de las
muchas que hay en la página Web. Si no ponemos una marca no es capaz
de detectarla como una sección susceptible de ser enlazada.
Atención: otra cuestión muy importante, el atributo name no produce una
acción de enlace, sino que nombra/marca una sección de un documento
para que pueda ser objeto de una acción de enlace. La colocación de este
marcador no producirá ningún cambio en el aspecto del texto que queda
rodeado por las etiquetas.
Por último, se supone que si este documento tiene 5 secciones, hemos
asignado cinco nombres/marcas a cada sección como hemos mostrado con
el ejemplo de la hipotética sección 3.
Segunda parte: enlazar las secciones
Para acceder a una sección del documento identificada con un nombre o
marcador, necesitamos que, en alguna otra parte del documento, haya una
etiqueta <a> con el atributo href, según se muestra en esta porción de
código fuente:
...
<h2>Capítulo 2: El cine fantástico en Cataluña</h2>
<p>En relación al fantástico, en el <a href="#capitulo3">Capítulo 3</a>
de esta obra nos referiremos con detalle a la historia del Festival de
Sitges</p>
...
lo cual se verá así en el navegador:
...
Capítulo 2: El cine fantástico en Cataluña
En relación al fantástico, en el Capítulo 3 de esta obra nos referiremos con
detalle a la historia del Festival de Sitges
...
Observaciones:
1. El uso del atributo href para esta clase de enlaces a la sección de un
documento, siempre tiene esta sintaxis: href="#valor", por ejemplo,
href="#capitulo3", es decir, delante del nombre y todo rodeado por
comillas, se pone el símbolo #. (El símbolo # se activa con AltGr + tecla del
número 3).
2. Los enlaces con el atributo href, cualquiera que sea el destino, modifican
el aspecto del texto que sirve de punto de activación del enlace. Por
defecto, convierten el texto en texto subrayado de color azul, así como
cambian la forma del cursor cuando se desplaza sobre el texto.
-19-