HTML

María Jesús Lamarca Lapuente. Hipertexto: El nuevo concepto de documento en la cultura de la imagen.

Inicio     navega al azar mapa conceptual  buscar

 

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, HTMLhtml 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 :

  •  Un procesador de textos o un editor de documentos HTML

  •  Un navegador del WWW o lo que se denomina "programa cliente" que permite el acceso a páginas WWW de Internet.

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ídeojavascripts, 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.

vista Exploración editor web FrontPage

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:

    <HTML>
    <HEAD>
    <TITLE>
    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>
  1. Lentejas
  2. Garbanzos
  3. 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 HTML  

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 tagscolor 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), tagsordenados (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 caracteres HTMLmarcadas 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.

Formularios

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 "&aacute;" y "&ntilde;". 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

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

 
 

 
 

 Título: Hipertexto, el nuevo concepto de documento en la cultura de la imagen
 Autora: María Jesús Lamarca Lapuente (currículo personal)

 Contacta

 Tesis doctoral. Universidad Complutense de Madrid

 URL: http://www.hipertexto.info

 Fecha de Actualización: 29/07/2018   

 184 páginas web. 2.627 archivos. 2.208 imágenes. Tamaño: 52.406Kb.
 34.389 enlaces (10.436 externos y 23.953 internos)
  

 

Esta obra está licenciada bajo las siguientes condiciones: 
Creative Commons License
Creative Commons Reconocimiento-NoComercial-NoDerivados-Licencia España 2.5.

 


OTRAS PÁGINAS DE LA AUTORA
 

           Blog El Cultural a la PuertaBlog El Cultural a la Puerta:
                 http://puertadetoledo.blogspot.com/ 

                                                                                                                AGETECA. Base de Datos de Gestión Cultural
                                                                                                                 Ageteca. Base de Datos de Gestión Cultural:
      
                                                                                                    http://www.agetec.org/ageteca


Fundación Ricardo Lamarca, ajedrez y cultura

Fundación Ricardo Lamarca, Ajedrez y cultura http://www.fundacionlamarca.es

 

 

La artesa digital

Blog La artes@ digital
http://artesadigital.blogspot.com

 

 

Blog La artesa digital Flickr La artes@ digital:
Galería de fotos mundo digital y mundo analógico: http://www.flickr.com/photos/artesadigital/

 

Proyecto Museo del Ajedrez - Casa de Campo
https://museodelajedrez.es Museo del ajedrez

 

 

 

Mapa de navegación / Tabla de contenido / Mapa conceptual / Tabla de documentos / Buscador / Bibliografía utilizada / Glosario de Términos / Índice Temático / Índice de Autores