MODULO
4 EDITORES WEB
LENGUAJES
ESTRUCTURA
DE LOS DOCUMENTOS
Cabecera
La cabecera es una colección de información acerca del documento.
Las marcas de principio y fin son <HEAD> y </HEAD>. La cabecera
puede contener los siguientes datos, sin importar el orden en que aparezcan:
* Título (TITLE). Indica el nombre del documento, los visores lo
emplean generalmente como etiqueta de la ventana. Este campo es el único
obligatorio en la cabecera.
* Dirección de base (BASE). Proporciona una dirección de
base para interpretar los enlaces relativos cuando el documento se lee
fuera de su contexto (por ejemplo cuando está guardado en un disco).
* El documento es un índice (ISINDEX). Si se pone la palabra clave
ISINDEX, el cliente interpretará que la página es un índice
y permitirá al usuario introducir palabras clave para buscarlas.
* Enlaces relacionados (LINK). En la cabecera podemos incluir varios enlaces
relacionados con el documento como versiones anteriores, dirección
del autor, etc.
* Metainformación (META). Este campo sirve para proporcionar información
sobre el documento que no pueda ser expresada en los campos anteriores.
La información se escribe usando pares nombre/valor que pueden
ser empleados para dos propósitos:
1. Proporcionar datos al servidor de HTTP para que genere campos de cabecera
(como por ejemplo la fecha de caducidad de un documento que se actualiza
periódicamente) o,
2. Para que un usuario incluya información adicional sobre el documento,
como palabras clave o el nombre del autor.
Para la primera función se emplean atributos del tipo HTTP-EQUIV
y para la segunda los del tipo NAME. En ambos casos, el valor se asigna
en el campo CONTENT. Un ejemplo del primer caso sería:
<META HTTP-EQUIV ="Expires" CONTENT="Dec 1996">
Y del segundo:
<META NAME="Autor" CONTENT="Plo+Serg">
El atributo NAME se refiere a nombres elegidos al azar por el usuario,
mientras que HTTP-EQUIV significa que el valor tiene una cabecera equivalente
real en el protocolo HTTP.
* Siguiente Identificador (NEXTID). En la actualidad este campo ya no
se usa, lo empleaban los editores de HTML para asignar nombres a documentos
de forma automática.
Cuerpo
Como ya hemos dicho, el cuerpo contiene el texto de la página que
se va a presentar al usuario. Las marcas de principio y fin del cuerpo
son <BODY> y </BODY> respectivamente. A continuación
describiremos los elementos que pueden aparecer en el cuerpo, clasificados
por categorías.
Encabezados
Los encabezados se emplean para dividir los documentos en secciones, o
más concretamente para marcar los títulos de esas secciones.
Las marcas son del tipo <H#>Título</H#>, donde # puede
ser un numero cualquiera entre 1 y 6. Aunque el estándar no lo
especifica, es recomendable usar los niveles en orden, es decir, después
de un encabezado de nivel uno deberemos usar encabezados de nivel dos
para las subsecciones y no saltar directamente al tres o al cuatro, por
ejemplo. La representación de los encabezados depende del visor,
generalmente se representan en negrita y van cambiando de tamaño
y espacios antes y después, de más a menos, en función
del nivel (el nivel uno es el mayor).
Ejemplo:
<H1>Don Quijote de la Mancha</H1>
<H2>Capítulo 1</H2>
<P>En un lugar de la Mancha de cuyo nombre no quiero acordarme ...
Listas
En realidad, también son marcas que permiten definir bloques, pero
con características especiales. Las listas se emplean para presentar
de forma ordenada una serie de líneas.
Definición
de Bloques
Para definir y separar bloques de texto se emplea una serie de marcas
que definen párrafos, texto preformateado o bloques con un significado
especial como direcciones o citas. También, y aunque no son propiamente
para definir bloques, hablamos en este punto de dos marcas especiales,
una para representar saltos de línea y otra que inserta una línea
horizontal. Ambas permiten dividir el texto, por lo que las hemos incluido
aquí. Las marcas de bloque son:
* <P> para separar párrafos. Dado que para el HTML todo el
texto es continuo, necesitamos algún mecanismo para indicar el
principio y fin de un párrafo. Las marcas inicial y final son <P>
y </P>, aunque generalmente sólo se emplea la inicial, terminando
el mismo cuando encontramos cualquier elemento que cause un salto de línea.
* <PRE> para texto preformateado. Esta marca se emplea para texto
escrito en tipo de letra de caja fija (mono-espaciada) y dentro del bloque
marcado los saltos de línea sí son respetados. Dentro de
estos elementos se pueden emplear anclajes y marcado tipográfico,
pero no elementos que definan formato de párrafo (como marcas de
párrafo, encabezados, etc.).
El elemento acepta el atributo opcional WIDTH, que indica el máximo
número de caracteres por línea para que el visor ajuste
el tamaño y tabulación del texto.
Además de la marca PRE existen dos elementos muy similares a él:
EXP (ejemplo) y LISTING (listado), que no permiten ningún tipo
de elemento anidado. Dado que con PRE podemos obtener el mismo resultado,
no es recomendable el uso de estas marcas.
* <ADDRESS>, empleada para indicar que un texto representa una dirección
o una firma. Generalmente se representa en cursiva y puede estar tabulado.
* <BLOCKQUOTE>, que indica que un texto es una cita de otra fuente.
Se suele representar con tabulaciones a izquierda y derecha y en cursiva.
En sistemas que no permiten representar cursivas se puede emplear algún
tipo de símbolo al principio de las líneas, de manera similar
a lo que se hace en las réplicas o citas (quote) del correo electrónico.
* <BR>. Este elemento sólo tiene marca inicial y se usa para
que el visor termine la línea en el punto en el que encuentre el
salto.
* <HR>. Al igual que la anterior, sólo consta de una marca
inicial. Se emplea para presentar una línea horizontal en el texto,
ya sea usando caracteres o un gráfico, dependiendo del visor.
En función de su carácter lógico se distinguen los
siguientes tipos de lista:
* Lista desordenada, <UL> (Unordered List).
* Lista ordenada, <OL> (Ordered List).
* Directorio, <DIR> (Directory).
* Menú, <MENU> (Menu).
* Lista de definición, <DL> (Definition List).
Exceptuando las listas de definición, el marcado de las líneas
es igual en todos los casos: poniendo <LI> para marcar el principio
de cada una, la línea termina cuando aparece un nuevo símbolo
<LI> o se cierra la lista.
Para las listas de definición se emplean las marcas <DT>
(Definition Term) y <DD> (Definition Data) para cada término
y su correspondiente definición. Se pueden poner varios términos
antes de una definición (marcas <DT>), pero no dos definiciones
para un solo término.
Un ejemplo sería:
Esto es una lista desordenada:
<UL>
<LI>Primer elemento
<LI>Segundo elemento
</UL>
Esto es una definición:
<DL>
<DT>Perro
<DD>Animal al que el hombre tiene la fea costumbre de morder
</DL>
Marcado
Lógico de Frases
Existen multitud de marcas para indicar que una palabra o frase tiene
una connotación especial.
Los elementos son:
* <CITE>, indica que el texto es una cita (por ejemplo de un título).
Generalmente se representa en cursiva.
* <CODE>, lo marcado es un ejemplo de código dentro del texto.
Se representa usando un tipo de letra de caja fija.
* <EM>, denota énfasis. Generalmente se representa con letra
cursiva.
* <KBD>, indica que el texto se introduce desde el teclado. Se representa
usando un tipo de letra de caja fija.
* <SAMP>, ejemplo, es decir, una secuencia de caracteres literales.
Se representa usando un tipo de letra de caja fija.
* <STRONG>, denota énfasis fuerte. Generalmente en negrita.
* <VAR>, lugar de una variable, por ejemplo la que se le pasa a
un programa. Se representa usando un tipo de letra de caja fija.
Marcado
Tipográfico de Frases
Se usan para indicar explícitamente el formato tipográfico
de una palabra o frase.
Los formatos y sus marcas correspondientes son:
* Negrita, <B></B>
* Cursiva, <I></I>
* Texto de teletipo (tipo de letra de caja fija) <TT></TT>
Aunque no están en el estándar, algunos visores pueden soportar
otras marcas de formato tipográfico como <STRIKE> (texto
tachado) o <U> (subrayado).
Marcado
de Anclaje de Hiperenlaces
Un caso especial de marcado es el representado por el elemento <A>,
que se emplea para indicar que un texto hace referencia a otro, es decir,
está anclado mediante un hiperenlace.
Para el marcado se emplean la marca inicial con atributos, el texto a
anclar y la marca final. Los atributos pueden ser:
* HREF. El valor es el URI (Uniform Resource Identifier) del anclaje principal
de un hiperenlace. El URI se puede referir a otro documento HTML, a un
anclaje del mismo documento o a cualquier otro tipo de recurso (FTP, Gopher,
etc.).
* NAME. Nombra un anclaje para poder ser usado como anclaje principal
de un hiperenlace, es decir, el punto nombrado puede ser referenciado
desde otro anclaje que emplee el atributo HREF. Por ejemplo, si en el
documento test.html incluimos un anclaje <A NAME="indice">Índice</A>,
dentro del mismo lo podremos referenciar mediante <A HREF="#indice">Volver
al índice</A>. Si queremos referirnos a ese punto dentro
del documento desde otro documento que se encuentra en el mismo directorio,
la referencia será <A HREF="test.html#indice">índice
del test</A>.
* TITLE. Sugiere un título para el recurso destino. Este atributo
es sólo informativo y puede ser usado para que se visualice al
colocarnos sobre el enlace o para nombrar recursos que no incluyen un
título, como gráficos.
* REL. relaciones descritas por el hiperenlace. El valor es una lista
de nombres de relaciones separadas por blancos.
* REV. Igual que REL pero en dirección contraria (si A se relaciona
con B por X, un enlace de A a B con REL="X" expresa lo mismo
que un enlace de B a A con REV="X").
* URN. Especifica un identificador para el primer anclaje del hiperenlace.
La sintaxis de los URN (Uniform Resource Namer) a_n no está especificada.
* METHODS. Especifica métodos a usar para acceder al destino. Se
escriben como una lista de palabras separadas por espacios y dependen
del tipo de URI. Al igual que el elemento TITLE, son sólo orientativos
para el visor.
Imágenes
Para incluir imágenes en documentos HTML se emplea la marca <IMG>.
Esta marca puede tener los siguientes atributos:
* SRC. Indica la fuente de la imagen, en realidad se trata de un enlace
con el documento que contiene la imagen. En la práctica se suelen
emplear solo imágenes en formatos de mapa de bits como gif o jpeg.
* ALT. Indica un nombre para referirnos a la imagen si ésta no
se representa. Generalmente lo emplean los visores de solo texto o los
visores gráficos cuando el usuario selecciona no cargar automáticamente
las imágenes. Es el nombre que aparece habitualmente cuando interrumpimos
la carga de una página o ésta se corta dejando imágenes
sin traer.
* ALIGN. Alineación de la imagen respecto al texto, puede tomar
los valores: TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo). En general,
si no se especifica, los visores asumen BOTTOM.
* ISMAP. Indica que la imagen es un mapa (lo veremos más adelante)
El único atributo imprescindible es el SRC (como es lógico,
sin la imagen poca utilidad tiene la marca).
Una página con varias referencias a imágenes podría
ser la siguiente:
<HTML>
<HEAD>
<TITLE>Página de prueba de imágenes</TITLE>
</HEAD>
<BODY>
<IMG SRC="foto.gif" ALT="Foto" ALIGIN=MIDDLE>
Este soy yo.
<P>Selecciona lo que quieras de este mapa:
<A HREF="/cgi-bin/imagemap/mapa"><IMG SRC="mapa.gif"
ISMAP></A>
</BODY>
</HTML>
|
|
 |