 
El lenguaje de marcas de hipertexto,
HTML o (HyperText Markup Language)
se basa en el metalenguaje SGML
(Standard Generalized Markup Language) y
es el formato de los documentos de la
World Wide Web.
El World Wide Web Consortium
(W3C) es la organización que desarrolla los estándares para normalizar el
desarrollo y la expansión de la Web y la que publica las especificaciones
relativas al lenguaje HTML.
HTML fue concebido
como un lenguaje para el intercambio de documentos científicos y técnicos
adaptado para su uso por no especialistas en tratamiento de documentos. HTML
resolvió el problema de la complejidad de SGML
sirviéndose de un reducido conjunto de etiquetas estructurales y semánticas
apropiadas para la realización de documentos relativamente simples. Pero, además
de simplificar la estructura de los documentos, HTML
soportaba el hipertexto.
En un corto período
de tiempo, HTML se hizo muy popular y rápidamente superó los propósitos para los
que había sido creado. Desde sus albores, ha habido una constante
invención de nuevos elementos para usarse dentro de HTML como estándar y
para adaptar HTML a las nuevas posibilidades de la Web,
como la posibilidad de usar elementos multimedia o la utilización de elementos
dinámicos (animaciones Java, uso de Flash, controles ActiveX, etc. que hacen las páginas web mucho
más llamativas e
interactivas para
el
usuario. Sin embargo, esta ampliación de nuevos
elementos también ha traído problemas de compatibilidad de los documentos entre las
distintas plataformas y programas.
El lenguaje HTML nace en 1991 de manos de
Tim Bernes-Lee del
CERN como un sistema
hipertexto con el único objetivo de servir como medio de transmisión de
información entre los científicos que se ocupaban de la Física de alta energía ,como parte de la iniciativa
World Wide Web. Así
pues, HTML tuvo lugar a la par que el origen de la Web, ya
que se trata del lenguaje que sirve para crear páginas web. En 1993 Dan
Connelly escribe la primera DTD (Document Type
Definition)
de SGML describiendo el lenguaje y, desde entonces,
el lenguaje HTML ha
estado sometido a incesantes cambios. De hecho, han existido distintas
versiones: 1.0 (en 1993), 2.0 (en 1995), 3.0 (en 1995), 3.2 (en 1997), 4.0 (en
1997, revisada en 1998).
Ya en 1994 el sistema había tenido tal aceptación que la
especificación se había quedado obsoleta. Por aquel entonces
WWW y
Mosaic
eran casi sinónimos debido a que el
navegador Mosaic del
NCSA (National Center for
Supercomputing Applications) era el más extendido gracias a las
mejoras que incorporaba. Es entonces cuando nace el HTML 2.0 en una
especificación también realizada por Dan Connelly. El crecimiento exponencial
que comienza a sufrir el sistema lleva a organizar la "First International WWW
Conference" en mayo de 1994. El principal avance de 2.0 de HTML es la
incorporación de los llamados "forms" o formularios que permiten que el
usuario cliente envíe información al
servidor y ésta sea recogida y
procesada allí. Precisamente con este fin,
NCSA presenta la
especificación del
CGI,
Common Gateway Interface, versión 1.0 que define una
interfaz entre programas ejecutables y el sistema
WWW. Desde entonces, el lenguaje HTML ha seguido creciendo como algo
dinámico hasta llegar no sólo a la especificación HTML 4.01 en septiembre de
2001 (http://www.w3.org/TR/html401/)
-la última versión está disponible en el sitio web del
W3 Consortium en la
dirección (http://www.w3.org/TR/1998/REC-html40-19980424)-,
sino también a otros lenguajes de transición como XHTML
que es una reformulación de HTML como aplicación XML.
La norma ISO/IEC
15445:2000 recoge el lenguaje HTML estandarizado (http://purl.org/NET/ISO+IEC.15445/15445.html).
Roger Price y David Abrahamson han escrito una guía al respecto: la User's guide
to ISO/IEC 15445:2000 HyperText Markup Language (HTML) (http://purl.org/NET/ISO+IEC.15445/Users-Guide.html)
donde establecen de forma pormenorizada la descripción de documentos y el
procesamiento del lenguaje HTML.
Los documentos HTML son archivos de texto plano (también
conocidos como
ASCII) que pueden ser creados
mediante cualquier editor de texto, aunque también existen programas específicos
para editar HTML (los editores más conocidos son Microsoft FrontPage, Netscape
Composer, Macromedia Dreamweaver y Adobe PageMill), concebidos específicamente
para editar páginas web en HTML.
HTML no permite definir de forma estricta la apariencia de
una página, aunque en la práctica, se utiliza también como un lenguaje de
presentación. Los archivos de HTML se leen en un
navegador web tal como
Netscape
Navigator,
Microsoft
Explorer,
Mozilla, etc. La
presentación de la página es muy dependiente del
navegador o browser utilizado ya que el mismo documento no produce el
mismo resultado en la pantalla si se visualiza con
uno u otro, o sea, HTML se limita a describir la estructura y el contenido de un
documento, y no el formato de la página y su apariencia.
Una de las claves del éxito de la World
Wide Web, aparte de lo atractivo de su presentación es, sin duda, su
organización y coherencia. Todos los documentos
WWW comparten un mismo aspecto y una única
interfaz, lo que facilita enormemente su manejo por
parte de cualquier persona. Esto es posible porque el lenguaje HTML no sólo
permite establecer
enlaces entre diferentes documentos, sino que es un
lenguaje de descripción de página independiente de la plataforma en que se
utilice. Es decir un documento HTML contiene toda la información necesaria sobre
su aspecto y su interacción con el
usuario, y es luego el
navegador que utilicemos el responsable
de asegurar que el documento tenga un aspecto coherente, independientemente del
tipo de ordenador o de estación de trabajo desde
donde estemos efectuando la consulta.
Los archivos HTML tienen la
extensión .html ó htm y para ver la
estructura de una página web en lenguaje HTML, los
navegadores
suelen disponer de un menú con la opción "Ver" desde la que se puede
visualizar el código fuente de la página HTML. Dicho código fuente nos dará una
idea clara de en qué consiste este lenguaje que, como hemos dicho anteriormente,
es un simple lenguaje de marcas entre cuyas funciones destaca la posibilidad de
enlazar documentos y partes de documentos, esto es, la hipertextualidad.
Así pues, existen dos
herramientas fundamentales e imprescindibles asociadas al lenguaje HTML, por un
lado, los
editores HTML (para crear documentos HTML) y, por otro, los
navegadores (para visualizar dichos documentos).
Aunque también existen otras herramientas automatizadas para generar páginas web,
como son los conversores desde otros
formatos y otro tipo de herramientas como los revisores y
validadores que nos permiten analizar los documentos HTML ya creados para
ver si se ajustan a los parámetros de este lenguaje.
Creación de documentos HTML:
Para crear documentos HTML sólo es necesario :
Editores
Los documentos HTML están
en formato de texto sencillo (también conocido como
ASCII), por eso se puede utilizar un
simple procesador de
textos para escribir un documento en lenguaje HTML. Este archivo será
posteriormente interpretado por el programa
navegador correspondiente, siempre
que el documento esté guardado en formato: "sólo texto". Una vez
creado el documento HTML, lo guardaremos con la extensión .html ó htm.
Se puede usar el Bloc de notas de Windows o cualquier otro editor de textos sencillo.
Sin embargo, hay que tener cuidado con algunos editores más complejos puesto que
formatean el texto y colocan su
propio código especial al guardar las páginas y HTML debe ser únicamente texto
plano, con lo que podríamos tener problemas. Si creamos un documento HTML en un
editor de texto que formatee dicho texto, debemos guardar el documento como
documento de texto sin formato.
El texto escrito tiene dos partes bien diferenciadas, el
contenido de la información y el conjunto de etiquetas del lenguaje HTML, que
permiten determinar el estilo y el tipo de letra que tendrá la
presentación del documento final y que pueda ser leído por un programa cliente.
Para escribir un párrafo sin estilo específico (por defecto)
no es necesario poner etiqueta alguna. Lo único que hay que tener en cuenta es
que al presentar el documento se hace caso omiso de los espacios,
tabulaciones y retornos de carro que se encuentren en el texto fuente. Por
esta razón se utilizan una serie de etiquetas que sustituyen a estos elementos.
El texto escrito no sufrirá ninguna modificación, exceptuando los acentos, la
letra "ñ" y un conjunto de caracteres especiales.
En la actualidad no se precisa conocer ni el lenguaje
SGML ni HTML en sí mismo a la hora de crear un
hipertexto en la Web, pues los editores de HTML
actuales simplifican enormemente la labor y ya no hay que trabajar con texto
plano y etiquetas en código HTML, sino que los programas de edición ofrecen la
posibilidad de disponer y ver la página mientras se crea y de insertar los
comandos HTML y sus atributos de forma automática. Además, se ha generalizado la
interfaz CGI o Common Gateway Interface, que
posibilita que el navegador pueda
trabajar conjuntamente con el servidor.
Los editores permiten también la inserción
de elementos multimedia:
imágenes, audio, vídeo,
javascripts, etc; e incluso ofrecen
plantillas de páginas con modelos de páginas personales o corporativas, diseño
con marcos o bordes compartidos, índices, mapas del web, etc ) y estilos
predeterminados para dar homogeneidad a todo un sitio web. Los programas más
recientes se orientan no sólo al formato físico de la WWW,
sino también a su estructura y de esta forma es posible explorar y jerarquizar
los nodos, mostrar las relaciones entre ellos, indicar
la localización de los puntos de origen y destino de cada
enlace, crear de forma automática tablas de contenido del web, índices, etc.
En la actualidad se han desarrollado un gran número
de sistemas de gestión de hipertextos, ya sea para
hipertextos independientes o para
crear y gestionar hipertextos abiertos a la web
y muchos de ellos son
gratuitos. Sin embargo, los editores web que ofrecen mayor número de
funcionalidades, suelen ser de pago. Entre los más
conocidos destacan
Hot Dog
(http://www.sausage.com),
Microsoft
FrontPage (http://www.microsoft.com/frontpage/)
el editor de Microsoft y con el que se ha diseñado este hipertexto,
DreamWeaver
(http://www.macromedia.com/software/dreamweaver/),
Adobe GoLive
(http://adobe.es/products/golive/main.html),
pero existen un gran número y una gran variedad de editores web que emplean el
lenguaje HTML.
Representación
de la vista Exploración de este hipertexto en el proceso de su elaboración,
mediante el editor web Microsoft FrontPage
Sin embargo, el uso de un
editor de páginas Web presenta algunas desventajas en relación al uso de
editores de texto sin formato. Por un lado, se depende de un software
propietario que suele estar protegido por derechos de autor y que no presenta
una total compatibilidad entre navegadores
y, por otro, al utilizar este tipo de editores se produce una gran número de las
llamadas etiquetas meta o metaetiquetas que suelen ser redundantes. Estas
etiquetas meta que aparecen en la parte superior de la página y que
proporcionan información acerca de la página, pero que no afectan a su
apariencia, son las que incluyen los metadatos que
posteriormente facilitarán la búsqueda y recuperación
de los documentos por parte de los robots y
motores de búsqueda. Por ejemplo, la
metaetiqueta generator
indica el tipo de editor con el que se creó la página HTML.
Por otro lado, también es posible crear
documentos con editores de texto sin formato y después modificarlos con un
editor HTML, o bien realizar la operación contraria, con el fin combinar
lo mejor de estos dos sistemas. Y además tenemos la posibilidad de crear un
documento en un formato determinado y transformar dicho documento al formato HTML por medio de un conversor.
Los editores HTML se clasifican en 3 tipos:
-
Wysywyg (what you see is what you get -lo
que ves es lo que obtienes-): son editores que muestran en
pantalla de forma inmediata lo que se va creando.
Son muy útiles para apreciar los colores y la disposición de los elementos.
-
No Wywywyg: editores que necesitan una aplicación
externa (el navegador o browser)
para mostrar lo que se va creando. Son útiles para recordar los comandos
HTML y sus atributos.
-
Mixtos: presentan la
pantalla dividida en dos ventanas,
una con el código HTML y otra con el resultado final, o permiten la
visualización de ambos en ventanas
diferentes que se pueden visualizar de forma alternativa.
Conversores
Se
trata de herramientas que permiten transformar un documento escrito en otro
formato al formato de un documento HTML. La mayoría de los editores de HTML
cuentan con herramientas de este tipo. Su utilización es muy eficaz cuando se ha
realizado un gran trabajo previo en otro sistema diferente. Para usarlos, se
debe simplificar al máximo el formato documento (eliminar las sangrías,
uniformar los tamaños y tipos de letra, etc.) para luego pasar el conversor y
generar así un documento HTML. También es posible convertir muchos hipertextos
creados con herramientas independientes, para
abrirlos a la Web al ser transformados en documentos HTML.
Revisores y validadores:
Uno de los problemas que ha acompañado al lenguaje HTML es la
diversidad de
navegadores,
ya que no todos son capaces de interpretar un mismo
código de una manera unificada. Esto obliga al diseñador de documentos HTML a
que, una vez creada su página, compruebe que ésta puede ser leída
satisfactoriamente por todos los
navegadores, o al menos,
por los más utilizados.
Existen una serie de herramientas llamadas
revisores o validadores que permiten
verificar si una página web se ajusta a las recomendaciones o especificaciones
del W3C World Wide
Web Consortium. Así, podemos comprobar si dicha página se ajusta al estándar
HTML y a
otros estándares complementarios, y si cumplen o no con las normas
estandarizadas que hacen posible la accesibilidad.
Entre estos validadores podemos destacar los siguientes:
Las etiquetas del lenguaje HTML
Básicamente,
HTML utiliza los mismos elementos que SGML, esto es, marcas o etiquetas
compuestas de códigos enmarcados por los signos < >. Cualquier documento HTML
comienza con la etiqueta
<html> y termina con la etiqueta
</html>. Dentro existen
dos zonas bien identificadas: el encabezamiento, que se identifica con la
etiqueta <HEAD> y </HEAD>
y sirve para definir una serie de valores válidos en todo el
documento, y el cuerpo del documento, representado por etiqueta
<BODY> y </BODY>
que muestra la información del documento.
Dentro del encabezamiento, la etiqueta
principal es la del título, representado por la etiqueta
<TITLE>
En el cuerpo del documento se pueden establecer diferentes
categorías utilizando diversos tamaños de fuentes y estableciendo así la
estructura básica del documento. Dentro
del cuerpo se coloca el contenido de la página web: textos, imágenes, tablas, formularios, gráficos,
mapas sensibles, etc. La información se puede estructurar en párrafos y/ o
secciones con cabeceras de distinto nivel, enlaces a otras partes del mismo
documento, a documentos distintos, o a documentos que estén en distinto
servidor, etc.
También podemos determinar el estilo y tipo de
letra mediante los atributos, como son los de final de línea
<br> y
final de párrafo <p>, los de presentación de texto preformateado, es
decir, manteniendo los espacios y retornos de carro <pre> o los
de negrita <b>, cursiva
<i>,
centrado <center>, etc.
Además se pueden definir listas numeradas y no numeradas, glosarios, trazar líneas
horizontales para separar textos, insertar comentarios, etc.
Pero, sin duda, los elementos más
característicos del lenguaje HTML y que dotan a los documentos con él creados de
la característica hipertextual, son las anclas o anclajes
utilizados para establecer los enlaces, ya se trate de
texto o gráficos. Para
fijar un enlace, se debe enmarcar el texto que
aparecerá subrayado para que el usuario pueda pulsarlo y le redirija a la
dirección o URL marcada. La etiqueta ancla debe incluir el parámetro
href="URL"
y el texto para pulsar. Si se trata de imágenes, éstas se insertan mediante la
etiqueta src="URL" y también podemos conseguir que el gráfico se convierta en un
enlace mediante la etiqueta correspondiente.
Existen una gran cantidad de etiquetas, muchas de ellas pueden contener elementos
y atributos que realizarán una función u otra según la voluntad del autor.
La estructura de un documento HTML
Un documento HTML comienza con la etiqueta
<html>, y termina con
</html>.
Dentro del documento hay dos zonas principales: el
encabezamiento, delimitado por las marcas <HEAD> y
</HEAD>,
que sirve para definir algunos valores válidos para todo el documento, y el cuerpo, delimitado por
las etiquetas
<BODY> y </BODY>,
donde reside la información del documento.
El elemento <TITLE>
contenido dentro del encabezamiento
permite especificar el título de un documento HTML. Este título no forma parte
del documento en sí pues no se ve en la pantalla principal, sino
que sirve como título de la ventana del programa que la muestra.
Existen muchos otros elementos que se engloban dentro del
encabezamiento pero para la estructura básica del lenguaje HTML en su nivel
básico no son necesarios.
El cuerpo de un documento HTML contiene el
texto, imágenes, etc. que, con la
presentación y los efectos que se decidan, se presentarán ante el
usuario. Dentro
del cuerpo se pueden aplicar una serie de efectos a través de diferentes marcas
o etiquetas (también otros autores las denominan
"directivas").
Así pues, la estructura de un documento HTML es la siguiente:
Título de la página</TITLE>
</HEAD>
<BODY>
[Aquí se sitúan otras etiquetas que hacen posible
visualizar la página]
</BODY>
</HTML>
El texto puede tener unas cabeceras, comprendidas entre las
etiquetas <H1> y </H1>,
<H2> y </H2>, etc. (hasta el número 6), siendo el
número indicativo del tamaño. El tamaño mayor es el correspondiente al número
1.
Hay otras etiquetas como <P>, para separar los distintos
párrafos, la etiqueta de centrado <CENTER> y
</CENTER> que
sirve para centrar
todo lo que esté dentro de ella, ya sea texto, imágenes, etc. la
etiqueta <HR> para obtener una raya horizontal tan ancha como la
pantalla, y con la apariencia de estar embutida sobre el fondo, etc.
He aquí un ejemplo:
<HTML>
<HEAD>
<TITLE>Mi pagina Web</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Primera pagina</H1>
</CENTER>
<HR>
Esta es mi primera pagina, aunque todavia es
muy sencilla.
<P>Aqui va un segundo parrafo.
</BODY>
</HTML>
Pero existen también una serie de Atributos:
<body background="nombre_de_archivo">
- Especifica una imagen para el fondo del documento.
<body bgcolor="#rrggbb">
- Especifica un color para el fondo del documento.
<body text="#rrggbb">
- Especifica un color para el texto normal del documento.
<body link="#rrggbb" vlink="#rrggbb" alink="#rrggbb">
- Establece el color del texto de vínculo, del vínculo visitado y del
vínculo activo.
#rrggbb representa el valor hexadecimal del color expresado como
rojo-verde-azul.
Estilos y efectos básicos
Todas las etiquetas que siguen a continuación se introducen a
partir de la etiqueta <BODY>, es decir, dentro del cuerpo del documento.
Títulos
Mediante los títulos, en sus diferentes niveles de
importancia, se puede definir el esqueleto del documento o estructura básica. HTML tiene
6 niveles de cabeceras numeradas del uno al seis. He aquí algunos
ejemplos de cabeceras HTML y su representación en pantalla:
| Código HTML
|
Visualización
|
| <h1>Cabecera tipo 1</h1> |
Cabecera tipo 1
|
|
<h2>Cabecera tipo 2</h2> |
Cabecera tipo 2
|
|
<h3>Cabecera tipo 3</h3> |
Cabecera tipo 3
|
|
<h4>Cabecera tipo 4</h4> |
Cabecera tipo 4
|
|
<h5>Cabecera tipo 5</h5> |
Cabecera tipo 5
|
|
<h6>Cabecera tipo 6</h6>
|
Cabecera tipo 6
|
Elementos de texto
<p> - El fin de un párrafo que será formateado antes de que se muestre en la
pantalla
<pre>. . .
</pre>
-
Identifica texto que ha sido formateado previamente (preformateado) por
algún otro sistema y debe ser desplegado tal como es. Texto preformateado
puede incluir etiquetas embebidas, pero no todos los tipos de etiquetas están
permitidos. La etiqueta <tag> puede ser usada para incluir tablas
en documentos.
<listing>. . .
</listing>
-
Ejemplo de listado de ordenador; las etiquetas incluidas serán
ignoradas, pero los espacios de tabulación funcionarán. Esta es una etiqueta
ya arcaica.
<xmp>. . .
</xmp>
- Similar a
<pre> excepto que no se reconocerán etiquetas
incluidas.
<plaintext>
-
Similar a <pre>
excepto que no se reconocerán etiquetas
incluidas, como no hay etiqueta para finalizar, el resto del documento será
traducido como texto simple. Esta es una etiqueta arcaica. Algunos
navegadores reconocen una etiqueta </plaintext>, aún cuando no
está definido por el estándar.
<blockquote>. . .
</blockquote>
- Incluye una sección de texto citado de cualquier otra fuente.
Atributos del texto
Mediante estos atributos determinamos el estilo y el tipo de letra que tendrá
la presentación del documento final.
|
Estilos lógicos |
Estilos físicos |
<em> . . .
</em>
- Énfasis
<strong> . . .
</strong>
- Énfasis mayor
<code> . . .
</code>
- Despliega una directiva HTML
<samp> . . .
</samp>
- Incluye salida ejemplo
<kbd> . . .
</kbd>
- Despliega una tecla del teclado
<var> . . .
</var>
- Define una variable
<dfn> . . .
</dfn>
- Despliega una definición (en muchos navegadores no
funciona)
<cite> . . .
</cite>
- Despliega una cita
|
<b> . . .
</b> - Negritas
<i> . . .
</i>
- Itálicas
<u> . . .
</u>
- Subrayado
<tt> . . .
</tt>
- Tipo de letra de máquina de escribir
|
Fuentes HTML
Saltos de línea:
HTML no reconoce los finales de línea del editor de texto, pero la etiqueta <BR> desplaza el texto a la línea siguiente, y
la etiqueta <P>
también lo desplaza, dejando una línea de separación.
| Código HTML |
HTML no reconoce los finales de línea. Por esa razón, aunque
utilicemos distintas líneas en nuestro archivo, serán visualizadas
de forma continua. Hay dos comandos básicos para
saltar de línea. El primero produce un salto de línea, <BR>pasando
el texto a la línea siguiente. El segundo, define un final de párrafo
<P>dejando una línea en blanco de separación con el texto siguiente.
|
| Visualización |
HTML no reconoce los finales de línea. Por esa razón, aunque utilicemos
distintas líneas en nuestro archivo, serán visualizadas de forma continua.
Hay dos comandos básicos para saltar de línea. El primero
produce un salto de línea,
pasando el texto a la línea siguiente. El segundo, define un final de
párrafo
dejando una línea en blanco de separación con el texto siguiente. |
Párrafos:
A continuación se muestran las etiquetas HTML para fijar los párrafos y el
resultado correspondiente:
| Código HTML |
Visualización |
| <p> Este parrafo usa la
alineacion por defecto, izquierda. Cada linea se coloca a la izquierda del
margen. </p> |
Este párrafo está alineado a la izquierda.
Cada línea se sitúa en el margen izquierdo. |
| <p align=right> Este parrafo
esta alineado a la derecha. Cada linea esta alineada en el margen derecho.
</p> |
Este párrafo está alineado a la izquierda.
Cada línea se sitúa en el margen derecho. |
| p align=center> Este parrafo
esta alineado en el centro. Cada linea esta centrada entre ambos margenes.
</p> |
Este párrafo está alineado en el centro.
Cada línea se sitúa en el centro de ambos márgenes. |
Etiquetas HTML de párrafo
Tipos de letra:
Los tipos básicos son
negrita, cursiva y teletipo o máquina de escribir, que utilizan los códigos
B,
I,
TT, respectivamente, como demuestra el siguiente código:
| Código HTML |
Visualización |
| letra <B>negrita</B> |
letra negrita |
| letra <I>cursiva</I> |
letra cursiva |
| letra <TT>teletipo</TT> |
letra teletipo |
Para centrar texto (o, en general, para centrar cualquier otra cosa: un
gráfico, por ejemplo) se usa la etiqueta <center>:
<center>Verde que te quiero verde</center>
Verde que te quiero verde
Listas
Las listas se definen de forma muy sencilla: se dice dónde empieza la lista,
dónde empieza cada punto y dónde acaba la lista. Las etiquetas que se utilicen
en cada caso deben aparecer al principio de línea, o al menos sin texto por
delante (sólo espacios o tabulaciones).
Podemos recurrir a tres tipos distintos de listas, cada una con una
presentación diferente: no numeradas, numeradas y listas de definiciones
(glosarios).
Las listas se pueden anidar, es decir, en el lugar donde debería ir uno de
los términos de la lista se pone una nueva lista, que no tiene
porqué ser del mismo tipo.
|
Lista no numerada <ul>: |
Lista numerada <ol>: |
Lista de definiciones/glosario: <dl> |
<ul>
<li>Madrid
<li>Barcelona
<li>Zaragoza
</ul>
- Madrid
- Barcelona
- Zaragoza
|
<ol>
<li>Lentejas
<li>Garbanzos
<li>Judías
</ol>
- Lentejas
- Garbanzos
- Judías
|
<dl>
<dt>Primer término a definir
<dd>Definición del primer término
<dt>Siguiente término a definir
<dd>Siguiente definición
</dl>
-
(El atributo
compact de la
etiqueta <dl> puede usarse para generar una lista de
definiciones que requiere menos espacio.
|
Tablas
He aquí las principales etiquetas para mostrar tablas en código HTML:
| Etiqueta de inicio |
Etiqueta final |
Descripción de la etiqueta |
| <TABLE> |
</TABLE> |
Contenedor para los bordes de
la tabla |
| <TABLE BORDER> |
</TABLE> |
Etiqueta para tabla con bordes |
| <TR> |
</TR> |
Establece una fila dentro de
una tabla |
| <TD> |
</TD> |
Define una celda dentro de un
tabla |
| <TH> |
</TH> |
Centra una cabecera en la
parte superior de la tabla o en un lado |
| <CAPTION> |
</CAPTION> |
Fija un título en la parte
superior de la tabla. |
Además, las tablas pueden llevar una serie de Atributos:
border=numero
Establece si aparece o no un borde alrededor de las celdas de la tabla, y
cual es el grosor del borde.
align=top¦bottom
Dentro de la etiqueta caption, establece la ubicación del
título de la etiqueta, ya sea en la parte superior o inferior de la tabla
align=left¦center¦right
Establece la ubicación de los datos dentro de las celdas. Funciona dentro de
las etiquetas tr, th y
td.
valign=top¦middle¦bottom¦baseline
Especifica la alineación vertical de los datos
nowrap
Establece que las líneas contenidas en las celdas afectadas no se pueden
romper para ajustarse al ancho de las celdas.
colspan=numero
Indica cuántas columnas ocupa la celda.
rowspan=numero
Indica cuántas líneas ocupa la celda.
cellspacing=numero
Indica el espacio insertado entre las celdas individuales de una tabla
cellpadding=numero
Establece el espacio entre el borde de la celda y el contenido de la celda.
width=numero¦porcentaje
Establece el ancho de la tabla o de las celdas especificadas en un valor en
píxeles o en porcentaje con respecto al ancho del documento.
Ejemplos de código HTML para la creación de
Tablas:
Bordes para las Celdas y colores de las celdas.
Enlaces
Las etiquetas para establecer los vínculos o enlaces
hipertextuales son las siguientes:
<a name="nombre_vinculo">. . .
</a>
- Define un destino en un documento
<a href="#nombre_vinculo">. . .
</a>
- Vínculo a un destino en el mismo documento
<a href="URL">. . .
</a>
- Vínculo a otro archivo o recurso
<a href="URL#nombre_vinculo">. . .
</a>
- Vínculo a un destino en otro documento
<a href="URL?palabra_a_buscar+palabra_a_buscar">. . .
</a> -
Manda una cadena a buscar a un servidor. Diferentes servidores pueden
interpretar la cadena de manera diferente. En el caso de servicios de búsqueda
orientados a palabras, varias palabras a buscar pueden ser especificadas
separando palabras individuales por el signo de suma (+)
Un ancla debe incluir un atributo
name ó
href, y
puede incluir ambos.
La estructura de un localizador de recursos uniforme, o por su nombre en
inglés, Uniform Resource Locator (URL) puede ser expresado como:
- tipo_de_recurso://dominio.del.host:puerto/ruta
donde los posibles tipos de recursos incluyen:
file, http, news, gopher,
telnet, ftp, mailto y wais, entre otros, y cada tipo de
recurso interpreta la ruta a su manera. (Estrictamente hablando, la información
del nombre_vinculo y la
palabra_a_buscar incluidos en
los atributos name y
href en los ejemplos anteriores
son parte del URL. Se presentan como entidades separadas por simplicidad.) Hay
que hacer notar
que cada tipo de recurso se relaciona a un tipo específico de
servidor. Los dos
puntos seguidos por un puerto TCP entero son opcionales y se usan cuando un
servidor está en un puerto no estándar.
Por su parte, las direcciones de
correo electrónico se suelen marcar con esta
etiqueta:
<address>Dirección: socios@hipertexto.info</address> Dirección: socios@hipertexto.info
Enlaces cuyo
destino está fuera
de la página
Así pues, para definir un enlace es necesario marcar con la etiqueta
<A> el objeto del cual va a partir dicho enlace. Dicha etiqueta debe incluir el
parámetro HREF="URL" para especificar el destino del
enlace. Es decir, que antes
del objeto elegido se debe abrir con <A HREF="URL">,
y después cerrar con </A>. Por
ejemplo, si se quiere que el texto "pulse aquí para visitar una página sobre
hipertexto"
conduzca a la página de inicio sobre Hipertexto, se deberá escribir en el
texto HTML:
<A HREF="http://www.hipertexto.info/">Pulse aquí para visitar
la pagina principal de Hipertexto</A>
En la pantalla aparecerá un texto subrayado de color azul -que
es el
 color estándar- que indica la existencia de un vínculo o enlace de hipertexto que lleva a la
dirección que se indica.
Enlaces cuyo destino está dentro de la misma página
A veces, en el caso de documentos muy extensos puede
interesar dar un salto desde una posición a otra determinada. Para esto, lo que
antes se ha llamado el destino del enlace es el sitio dentro de la página al que
se quiere llegar.
Se sustituye por #marca (la palabra marca puede ser
cualquier palabra). Las palabras que vayan entre las etiquetas
<A HREF="#marca"> Palabras</A>
aparecerán en la pantalla en color (en forma de hipertexto). Su estructura
sería:
<A HREF="#marca"> Vea el ejemplo del enlace en una página
</A>
Y en el sitio exacto a donde se quiere saltar, se debe poner
la siguiente etiqueta:
<A NAME="marca">Enlace dentro de una página </A>
Por ejemplo, si se quiere saltar desde el principio del
documento al final del documento se coloca la siguiente etiqueta:
<A HREF="#final"> Pulsa para ir al final</A>
Que resulta como: Pulsa para ir al final (se puede comprobar
cómo salta a la pantalla final).
Y en el final del documento se pone esta otra etiqueta:
<A NAME="final"> </A>
Ese enlace en lugar de llevar a otro documento lleva a la
parte final del mismo documento.
El mismo efecto se consigue con la herramienta "Top".
Utilizando el tag: <A HREF="#top"> se
consigue que se vuelva al principio de la página.
Gráficos
Para incluir una imagen o gráfico en un documento HTML se utiliza la
etiqueta <IMG>. En dicha etiqueta debe
incluirse un parámetro SRC="URL", con el cual se indica dónde está el
archivo
con el gráfico concreto que se quiere para el documento. Esto permite una gran flexibilidad, ya que se puede complementar el contenido del documento
tanto con gráficos que se encuentren disponibles en el propio
servidor de WWW, como con
una imagen situada en un servidor externo, sin que el lector final tenga por qué apreciar ninguna diferencia.
Existen algunas limitaciones respecto a los
formatos gráficos que
los navegadores o lectores de HTML puede interpretar sin problemas.
Los formatos de archivo más
utilizados son GIF y JPEG, pero existen otros muchos.
Hay un parámetro optativo de la directiva
<IMG> que sirve para proponer un texto alternativo a un gráfico. Este texto aparecerá cuando se esté usando un programa
sin capacidades gráficas para leer
el lenguaje HTML. Se trata de
alt="texto". Conviene utilizarlo cuando los gráficos
sirven como origen a hiperenlaces, porque si no los programas sin capacidades
gráficas no podrán mostrar los enlaces establecidos.
Para colocar en este punto del documento una imagen que está
en el mismo subdirectorio que esta página y en el archivo grafico.gif, se
escribe:
<IMG SRC="URL/grafico.gif"><P>
Los documentos de información gráfica deben optimizarse para
la visualización, es decir, hay que minimizar la tabla de colores con el fin de
disminuir el tamaño que ocupan las imágenes, y para ello se utilizan formatos de
compresión de imágenes.
Así pues, las marcas y etiquetas de un documento HTML son muchas y variadas,
aunque podemos resumir los distintos elementos de un documento HTML de la
siguiente forma:
Elementos de estructuración del documento
Son aquellos que definen las partes básicas de todo documento HTML: la
declaración, el elemento HTML, la cabecera (HEAD) y el cuerpo (BODY), que
contiene el texto y demás información que mostrará el agente de usuario.
Elementos meta-informativos
Usualmente incluidos en la cabecera, este tipo de elementos proporcionan
información al agente de usuario sobre el documento como un todo. Entre ellos
destacaremos el título (TITLE), la dirección base para resolver los URLs
relativos (BASE), el indicador de la facilidad de búsqueda
(ISINDEX),
meta-información asociada (META), etc. Hasta la aparición del lenguaje
XML y otros lenguajes que
permiten una descripción semántica más rica, la inclusión de
metadatos embebidos en las cabeceras de HTML ha sido
la forma utilizada para la descripción de contenidos
en los documentos, con el fin de facilitar la posterior
búsqueda y recuperación de información.
Para que las páginas puedan ser encontradas por otros usuarios,
es preciso no sólo dar de alta la web en los principales
buscadores, sino también introducir metadatos
en HTML
que indiquen información sobre el contenido, materia, autor, etc; para que esta
información pueda ser extraída de forma automática por los principales
robots,
bases de datos e indizadores automáticos de páginas web que existen en
Internet. De esta forma, se pueden aplicar los
principales esquemas de metadatos, como Dublin Core
para definir la información contenida en los documentos, e Incluso se han
desarrollado lenguajes para definir ontologías
utilizando HTML, tales como SHOE (Simple HTML Ontology Extensions).
Elementos para la estructuración de bloques
Los elementos estructurantes de bloques incluyen párrafos (P), formatos de
texto (PRE, ADDRESS y
BLOCKQUOTE). Se utilizan para determinar la naturaleza y/o
apariencia de un bloque de texto.
Listas y menús
Diferentes tipos de listados (desordenados (UL,
LI),
 ordenados (OL,
LI),
directorios (DIR), menús (MENU), de definición (DL,
DT, DD) permiten organizar
el texto de modo que el agente realice automáticamente algunas tareas (por
ejemplo, insertar número de orden o guardar cierta disposición para determinadas líneas) y represente
adecuadamente una enumeración de ítems.
Elementos de usos idiomáticos
Las frases pueden ser
 marcadas de acuerdo con su uso idiomático (como en una
cita textual), su apariencia tipográfica (negrita) o para ser utilizadas como
vínculos hipertextuales. Cita (CITE), código
(CODE), énfasis (EM), teclado
(KBD),
muestra (SAMP), énfasis fuerte (STRONG) o una variable
(VAR) son ejemplos de uso
idiomático.
Elementos tipográficos
En este apartado incluiríamos los elementos negrita
(B), itálica (I) y
teletipo (TT). Constituyen instrucciones concretas sobre cómo debe representarse
el contenido de dichos elementos, por eso se denominan también estilos físicos,
frente a los anteriores, estilos lógicos.
Vínculos hipertextuales
El elemento A indica un vínculo hipertextual. Con el atributo
HREF (y el URL
asociado) se indica el destino de un salto hipertextual. Con el atributo
NAME se indica el punto de llegada de un salto hipertextual.
Separadores
Los elementos HR (horizontal rule) y
BR (break) permiten separar unidades
lógicas de un texto con una línea horizontal o bien indicar un retorno de carro.
Imágenes
El elemento IMG sirve para incluir una imagen en el documento
a través de un vínculo hipertextual. Con el URL asociado podemos incorporar
cualquier imagen accesible en Internet. El atributo ISMAP indica que es una
imagen "sensible" y que el usuario podrá señalar una región y recuperar el
objeto asociada a ésta.
Los formularios permiten que el
usuario introduzca información (seleccionando ítems o directamente
escribiendo en los lugares indicados) que será procesada por
scripts asociados al
servidor de acuerdo con
la especificación CGI ('Common Gateway Interface'). Elementos como
FORM, INPUT,
SELECT, TEXTAREA y sus atributos permiten diseñar formularios que rellenará el
usuario. Sin embargo, su funcionalidad no deviene del HTML sino de los scripts
ejecutables que residen en el servidor y que reciben la información introducida
por el usuario. El uso de
formularios está muy extendido en las páginas
web sobre todo por su utilización como interfaz de entrada para realizar las
búsquedas.
En el año 2003 el World Wide Web Consortium sacó la
Especificación XForms for HTML Authors (http://www.w3.org/MarkUp/Forms/2003/xforms-for-html-authors.html),
dando a luz un nuevo lenguaje llamado XForm.
(traducción al castellano: CHUTER, Alan. XForm para
Diseñadores HTML
http://www.infoescena.es/achuter/web/w3cdocs/xforms-for-html-authors_es.html)
Acentos, eñes y cedillas
En los primeros procesadores de texto y editores web, al
escribir en lenguaje HTML era preciso representar adecuadamente los acentos y
otros caracteres no-ASCII
escribiendo cosas
como "á" y "ñ". Sin embargo, el protocolo del WWW (http)
transmite 8 bits y el juego de caracteres oficial del WWW es el ISO Latin 1 (ISO
8859-1). Mediante ISO Latin-1 se pueden representar la mayoría de los idiomas
europeos occidentales (como castellano, catalán, francés, italiano, etc.). Si el ordenador
puede producir ISO Latin-1 (y hay utilidades para traducir automáticamente los
juegos de caracteres de cualquiera de ellos) no hace falta huir de los
caracteres acentuados o emplear esta grafía compleja, esta grafía había sido
pensada para los ordenadores que no utilizaban
ese juego de caracteres. Además, si se pretende indexar los documentos del
servidor WWW se complicará el tema de las búsquedas y los usuarios no podrán
utilizar los términos acentuados.
Caracteres especiales HTML
Las URL
Una URL (o Uniform Resource Locator) es "la sintaxis y
semántica de información formalizada para la
localización y el acceso a recursos
a través de Internet". Dicho así (RFC 1738) Esta es la clave de la
World Wide Web. Los URL se
utilizan en la WWW para "localizar" recursos y proporcionan, de forma compacta,
inteligible para los humanos e interpretable para aplicaciones informáticas, la
información básica que permite acceder a un recurso en Internet ya que incluyen el protocolo
de acceso (http, ftp, gopher, wais, nntp, etc.), el ordenador remoto en el que
se encuentra (y el puerto en el que se encuentra dicho protocolo si no es el
estándar) y una forma de identificar el recurso en cuestión (el camino o ruta a
seguir por la estructura jerárquica de archivos, un identificador único, etc.) o
de interactuar con él (las palabras clave a buscar, por ejemplo).
Una vez localizado el recurso, el sistema puede realizar las
operaciones pertinentes: transferir una copia y mostrarla al usuario o
almacenarla, interrogar una base de datos, iniciar una sesión remota, actualizar
el recurso, solicitar sus atributos, etc. Cada protocolo permite diferentes
operaciones y la sintaxis URL se ha diseñado de modo que pueda ampliarse a
futuros protocolos.
Los URL nos permiten realizar "saltos hipertextuales" por la
Web. Son lo que se esconde tras las palabras o frases marcadas como
vínculos y que ordenan al agente de usuario qué ha de hacer cuando el usuario las
señala haciendo clic con el
ratón sobre ellas.
Bibliografía
 A
dictionary of HTML Metatags.
http://vancouver-webpages.com/META
BERNERS-LEE, Tim. Style
Guide for Online Hypertext.http://www.w3.org/Provider/Style/Overview.html
Cover Pages. XML Schemas.
http://www.oasis-open.org/cover/schemas.html
Cover Pages. XML Schemas.
http://www.oasis-open.org/cover/schemas.html
Desarrolloweb.com Manual de HTML
http://www.desarrolloweb.com/manuales/21/
Desarrolloweb.com
HTML a fondo
http://www.desarrolloweb.com/html/
ENGELFRIET, Arnoud "Galactus". The other HTML FAQ.
http://www.stack.nl/~galactus/html/other-faq.html
ISO/IEC
15445:2000. Information technology -Document description and processing
languages- HyperText Markup Language (HTML).
http://purl.org/NET/ISO+IEC.15445/15445.html
MARCOS, Mari
Carmen. Diseño de interfaces web.
http://rayuela.uc3m.es/~mcmarcos/interfaz/indice.html
MARTÍNEZ ECHEVARRÍA, Álvaro. Manual Práctico de HTML. http://www.etsit.upm.es/~alvaro/manual/manual.html
MÉNDEZ RODRÍGUEZ, Eva.
Metadatos y recuperación de información: Estándares, problemas y
aplicabilidad en bibliotecas digitales. Gijón, Trea, 2002.
NCSA. Beginner's Guide to HTML.
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
PULIDO
ALONSO, Esther. DOMÍNGUEZ ARTEAGA, Octavio. JIMÉNEZ PEÑATE, Cristina.
Tutorial de HTML.
http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/indice.htm
UCC
Computer Centre. How to write HTML files.http://www.ucc.ie:8080/cocoon/cc/docs/htmldoc
Universidad de Cádiz. Manual de HTML.
http://www.uca.es/manual-html/
Universidad de Navarra. HTML.
http://www.unav.es/cti/manuales/HTML/indice.html
W3C. HyperText Markup Languaje (HTML) Home Page.
http://www.w3.org/MarkUp
W3C. HTML 4.01 Specification.
http://www.w3.org/TR/html401/
W3C. HTML Working Group Roadmap.
http://www.w3.org/MarkUp/xhtml-roadmap/
W3C. XForms for HTML Authors.
http://www.w3.org/MarkUp/Forms/2003/xforms-for-html-authors.html (traducción al castellano: CHUTER, Alan. XForm para Diseñadores HTML
http://www.infoescena.es/achuter/web/w3cdocs/xforms-for-html-authors_es.html)
W3Schools.
HTML Tutorial. http://www.w3schools.com/html/
Web
Design Group. The WDG Reference section.
http://www.htmlhelp.com/reference/
Web
Design Group. Validators and Checkers.
http://www.htmlhelp.com/links/validators.htm
Web Design Group. Web Authoring FAQ.
http://www.htmlhelp.com/faq/html/all.html
|
