INTRODUCCION AL HTML (páginas web)

 

1.- INTRODUCCION

HTML, acrónimo de "Hypertext Markup Language" o Lenguaje de Marca de Hipertexto se trata, como su nombre indica, de un lenguaje de marca utilizado actualmente como standard en Internet para describir el contenido de los documentos de la World Wide Web.

En el momento actual podríamos decir que el HTML se podría encuadrar entre los lenguajes de marca destinados a la presentación dado que sus marcas describen contenidos destinados a ser presentados a un ser humano a través de un navegador.

Pese a que inicialmente HTML surgió como necesidad de definir contenidos de un documento, esencia de todo lenguaje de marca, con el paso del tiempo el HTML se ha ido convirtiendo en un lenguaje de formato dado el interés de la mayor parte de los creadores de sitos web en editar páginas cada vez más vistosas y atrayentes.

Pese a lo que pudiéramos pensar, el HTML no es, ni mucho menos, un lenguaje original ni el único lenguaje de marca existente en la actualidad.

HTML tiene como predecesor a un lenguaje de marca creado en los años 60 por desarrolladores de IBM que se conoció como GML - "Generalized Markup Language" o Lenguaje de Marca Generalizado. IBM creo este lenguaje para resolver los múltiples problemas con los que se estaba encontrando cuando tenía que transportar documentos de una configuración, plataforma y sistema operativo específico a otro distinto. La gran ventaja que implicaba era que desde cualquier editor de texto se podía crear un documento de texto al que se le añadían un sistema de etiquetas que describieran el contenido del mismo. Este documento GML así concebido podía ser abierto por cualquier usuario independientemente, como decimos, del programa propietario que utilizase cada usuario o de la plataforma de su ordenador. Era simplemente texto y sólo texto, sin más.

La Organización Internacional para la Estandarización o ISO acabó entendiendo que este lenguaje de marca representaba un gran paso en la normalización y en los años 80 lo convirtió en estándar oficial (ISO 8879), conocido hoy como SGML. El espaldarazo final para este lenguaje de marca llegó cuando el Departamento de Defensa de los EE.UU. lo adoptó como formato de especificación técnica oficial, lo que obligó a todos sus contratistas a utilizarlo en todos los documentos destinados a la administración pública americana.

Podemos decir que SGML es un lenguaje de marca robusto, exhaustivo y potente, y a la vez complejo, engorroso, caro de implementar y de mantener.

La historia del HTML surge a finales de los años 80 cuando el físico Tim Berners-Lee disfrutaba de una estancia temporal en el Laboratorio Europeo de Partículas Físicas (CERN). Este investigador se enfrentó de nuevo con el problema de tener que acceder a distintos documentos de numerosos colegas que le habían precedido. Al darse cuenta que el trabajo de sus predecesores quedaba desaprovechado, dado que cada cuál había utilizado un sistema de almacenamiento diferente, se puso a trabajar en un sistema que fuera independiente de la plataforma, y sencillo de usar. Aplicando sus conocimientos previos de SGML concibió un lenguaje de marca menos complejo que aquél al que le añadió un método para vincular documentos entre sí y seguir estos vínculos haciendo clic sobre elementos de texto específicos. Así nació lo que se conoce hoy como HTML. Tim Berners-Lee lo describió como ¨un sistema de información vinculada¨ dispuesta en una ¨red múltiplemente conectada cuyas interconexiones evolucionaban con el tiempo¨.

HTML es, en consecuencia, un lenguaje de marca independiente de la plataforma y de la máquina, que utiliza marcas (etiquetas, tags) para describir los documentos, además de vínculos de hipertexto para conectar y desplazarse de un documento a otro.

Lo que nunca sospecharía Tim Berners-Lee fue que lo que él había creado se convertiría, pasado el tiempo, en una forma de intercambio de documentos a escala global. El hecho determinante que contribuyó a dar ese salto fue la creación de un interfaz gráfico que reemplazaría a las simples aplicaciones de texto que hasta el momento procesaban los documentos HTML. Este interfaz gráfico, conocido como Mosaic, fue programado en 1992 por Mark Andreesen, entonces estudiante de la University of Illinois at Urban-Campaign (UIIC). Con la ayuda de este interfaz gráfico el HTML se convirtió en parte fundamental de la Red y en un recurso más de Internet (además de los ya existentes como el correo electrónico, la transferencia de ficheros, los servicios de noticias etc).

Más tarde Mark Andreesen dejaría la UIIC para fundar Netscape una de las empresas líder mundial en el desarrollo de navegadores para Internet.

 

2.- DEFINICION DE LOS LENGUAJES DE MARCA, LAS ETIQUETAS Y HTML

Antes de empezar a definir lo que es un lenguaje de marca debemos de aclarar que HTML, o cualquiera que sea el lenguaje de marca de que se trate, no es un lenguaje de programación. Un lenguaje de programación crea una serie de instrucciones que se interpretan y compilan para originar un programa o aplicación informática. Los lenguajes de marca no generan programas, software, sino documentos cuyos contenidos están definidos por marcas que serán interpretadas por otro programa (p.e. un navegador).

Además, un lenguaje de marca tampoco es un lenguaje de formato. Para los lenguajes de formato el objetivo principal es describir el aspecto final que tendrán los documentos, sin reparar en describir el contenido de los mismos. Un ejemplo de lenguaje de formato sería RTF (Rich Test Format o Formato de Texto Enriquecido), creado específicamente para definir el formato final de un documento mediante códigos incrustados en el mismo.

Todo lenguaje de marca es, como decíamos en el apartado anterior, texto y nada más que texto ASCII. De aquí su sencillez.

El texto ASCII es el conjunto de caracteres a los que se puede acceder desde un teclado. No es ni más ni menos que el alfabeto en mayúsculas y minúsculas, los números del 0 al 9 y algunos signos de puntuación. El resto de caracteres, símbolos especiales como el de copyright o el del euro, o los acentos, no son parte de este conjunto de caracteres, si bien, los lenguajes de marca tienen un mecanismo para representar caracteres no ASCII mediante una secuencia de caracteres ASCII.

Para consultar la relación de caracteres especiales siga el siguiente vínculo Caracteres Especiales ASCII

Con cualquier editor de texto podemos crear un documento basado en un lenguaje de marca. Por ejemplo, HTML. Para ello lo único que precisamos es conocer las órdenes de éste lenguaje, o ETIQUETAS, que describen las distintas partes de ese documento.

La marca se añade a un documento en forma de etiquetas asignadas a sus distintas partes. La mayor parte de las etiquetas se escriben de dos en dos: una inicial y otra final, aunque existen algunas que pueden ir solas. En general, los pares de etiquetas están diseñadas para describir contenido, como niveles de párrafo o encabezado, mientras que las individuales insertan algo en el documento, como una imagen o un salto de línea.

<NOMBRE_ETIQUETA> Texto </NOMBRE_ETIQUETA>

Como puede ver más arriba las etiquetas siempre comienzan con un signo menor (<), seguida del texto que identifica a la etiqueta, y terminan con un signo mayor (>). Las etiquetas finales siguen la misma estructura, aunque para identificarlas incluyen una barra (/) justo detrás del signo menor.

El HTML se basa por tanto en las marcas para definir instrucciones estructurales, y estas marcas están constituidas por elementos o etiquetas. Cada etiqueta proporciona una información que el navegador utilizará para interpretar y mostrar el contenido del documento HTML.

 

3.- UTILIDADES NECESARIAS PARA CREAR UN DOCUMENTO HTML

Aunque de forma básica lo único que se necesita para crear un código HTML es un editor de texto (p.e. "edit" en MS-DOS, el "bloc de notas" en Windows, o "vi" en UNIX), existen algunas alternativas que facilitan la tarea de escribir una página web: Son los Editores HTML.

Los editores HTML actuales se pueden clasificar en tres grupos:

  1. ASISTENTES.- Los asistentes ayudan a crear el código HTML e incluyen plantillas predefinidas de código. Ejemplos de editores HTML serían HotDog, HomeSite, Web Media Publisher, o CuteHTML para Windows; HTML Editor y Claris Home Page para Mac; o tkHTML para Unix.
  2. CONVERSORES.- Son programas que tienen una función distinta de la de editar documentos HTML pero que permiten convertir sus documentos a HTML. Ejemplos de programas conversores son Microsoft Word, QuakXPress y PageMaker entro otros.
  3. EDITORES WYSIWYS.- ("What You See is What You Get", lo que ves es lo que obtienes). Estos editores permiten crear páginas web sin escribir código HTML como si se tratase de un programa de dibujo por ordenador. Un ejemplo de este tipo de editor es Microsoft Front-Page.

Además de editar sus documentos HTML precisará de una cuenta con un Proveedor de Servicios de Internet (ISP Internet Service Provider) que le permita colocar sus páginas Web en la Red (a menos que usted tenga su propio servidor Web, pero supondremos que no dispone de este recurso). Para este particular dispone tanto de ISP comerciales como gratuitos. Un buen ejemplo de los segundos serían: http://www.geocities.com, http://www.tripod.com/planet http://www.ciudadfutura.com

 

4.- LA MARCA SE GOBIERNA MEDIANTE UNA DTD

Internet y el World Wide Web están constituidos sobre estándares universalmente aceptados. El World Wide Web Consortium o W3C se creó para asegurar que los estándares que gobiernan Internet no favorecieran a ninguna empresa en particular. Además la W3C los mantiene al día para que respondan a las necesidades crecientes de los usuarios, al tiempo que se responsabiliza de organizar los equipos de especialistas encargados de desarrollar nuevos estándares.

Los estándares oficiales de HTML, gráficos, hojas de estilo, servidores Web y una gran variedad de tecnologías Web se han podido desarrollar gracias al W3C, que sólo tiene poder para recomendarlos y se limita a esperar que las compañías individuales creen productos que los respeten.

Existe un sito Web del W3C en la dirección http://www.w3.org que incluye documentación abundante de todos los estándares de los que la organización es responsable, así como información sobre las iniciativas y los proyectos que tiene en desarrollo.

Las distintas especificaciones HTML creadas por el W3C, así como los elementos y atribuciones adicionales agregados por los distintos fabricantes de navegadores son en realidad DTDs ("Definición de tipo de documento") que describen en detalle qué etiquetas pueden usarse para crear páginas Web.

Una DTD, bien para SGML, HTML o XML, es una especificación que determina los elementos estructurales y definiciones de marca que podrán ser usados para crear documentos que describan contenidos.

Cada vez que el W3C publica una nueva versión de HTML lo hace en forma de DTD y actualmente vamos por la versión HTML 4.0. La especificación completa HTML 4.0 puede encontrarse en http://www.w3.org/TR/REC-html40.html. Los errores que se han encontrado en las especificaciones se ha descrito en el documento http://www.w3.org/Markup/html40-updates/REC-html40-19980424-errata.html

Puede acceder también a ese documento desde el siguiente vínculo: HTML 4.0 Specification. Otras especificaciones anteriores las tiene en HTML 3.5 Reference Specification

 

5.- LA RED, INTERNET Y LA WORLD WIDE WEB COMO DOCUMENTOS HTML VINCULADOS ENTRE SÍ.

Como vamos viendo la World Wide Web resulta un recurso de Internet en el que podemos encontrarnos millones de documentos escritos en HTML unidos entre sí por hipervínculos. Gracias a que la Red se extiende a lo largo de millones de ordenadores por todo el mundo, cualquier ordenador con un navegador Web puede leer fácilmente las páginas que se encuentren en otro, independientemente de su localización, plataforma o sistema operativo. Explicado de otro modo, los hipervículos escritos en HTML pueden enlazar dos documentos HTML almacenados en cualquier ordenador conectado a Internet, en cualquier parte del mundo.

Todos los hipervículos se crean usando ésta sintaxis:

<A REF="URL"> </A>

El nombre oficial de la etiqueta es ANCHOR, que define la A de la etiqueta en cuestión, y el atributo HREF señala al URL o localización del otro recurso que el vínculo conecta. Por ejemplo, el vínculo usado más arriba que vincula la página del W3C es:

<A REF=http://www.w3.org>World Wide Consortium</A>

 

6.- DE LA TEORIA A LA PRACTICA: ¿CÓMO SE ESCRIBE UN DOCUMENTO HTML?

Pasando por alto la introducción previa y los conceptos teóricos esbozados en apartados anteriores veamos ahora cómo se escribe un documento HTML para que pueda ser publicado en Internet.

Todos los documentos HTML están formados por cuatro partes bien definidas:

  1. Una línea de texto en la que se declara qué versión de HTML se está usando para crear el documento.
  2. Un elemento HTML que describe el documento como un documento HTML
  3. Una sección que declara el encabezado con la etiqueta <HEAD>
  4. El cuerpo principal donde se encuadra el contenido del documento. Para ello se suelen utilizar las etiquetas <BODY> o <FRAMESET>

I) DECLARACION DEL TIPO DE DOCUMENTO

Un documento HTML para ser considerado como correcto debe de iniciarse declarando qué versión del lenguaje se está usando para crearlo. Esto hará referencia a la definición de tipo de documento o DTD de la versión HTML que se use. Veamos un ejemplo:

<!DOCTYPE HTML PUBLIC="-//W3C//DTD HTML 4.0 Transitional//EN" http://www.w3.org/TR/REC-html40/loose.DTD>

La declaración de tipo de documento comienza con un signo menor que, seguido de un signo de admiración. DOCTYPE (tipo de documento) y HTML se explican por sí solas. PUBLIC identifica la DTD como accesible al gran público. La siguiente cadena de caracteres encerrada entre comillas es conocida como el identificador público para esta DTD particular: //W3C, indica que W3C es el autor de la DTD. //EN nos indica que estamos utilizando la versión en inglés. El URL nos conduce hasta la copia pública de la DTD en la red.

II) EL ELEMENTO HTML

Todos los contenidos de un documento HTML, con la excepción de la declaración del tipo de documento, deben encerrarse entra las etiquetas <HTML> y </HTML>

III) EL ENCABEZADO DEL DOCUMENTO

Después de la etiqueta HTML viene el encabezado del documento. Esta sección se conoce también como contenedor y va delimitado por la etiqueta <HEAD> Metadatos </HEAD>. Entre esta etiqueta se suele incluir información relacionada con el documento como son por ejemplo el título y otros metadatos. Los metadatos incluyen información diversa como puede ser, por ejemplo: Palabras clave, descripciones cortas, nombre del autor del documento, etc. La mayor parte de los navegadores web no muestran esta información localizada en el contenedor pero si que es reconocida por los robots que buscadores de la Red que clasifican a diario la información que hay accesible en la Web.

 

Un ejemplo de encabezado, incluyendo los otros elementos descritos hasta ahora sería:

 

<!DOCTYPE HTML PUBLIC="-//W3C//DTD HTML 4.0 Transitional//EN" http://www.w3.org/TR/REC-html40/loose.DTD>

<HTML>

<HEAD>

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<META name="abstract" content>

<META name="keywords" content="prueba">

<META name="owner" content="jemoro@uninet.edu">

<META name="review" content="REVIEW_991202">

<META name="security" content="public">

<META name="updated" content="UPDATED_991202">

<META name="filename" content="index.html">

<META name="GENERATOR" content="Microsoft FrontPage 4.0">

<TITLE>Mi primera página Web</TITLE>

<base target="links">

</HEAD>

<BODY>

Contenido del documento

</BODY>

</HTML>

 

  1. EL CUERPO DEL DOCUMENTO

En el cuerpo del documento se sitúan los contenidos del documento. Es en consecuencia la parte principal del todo documento HTML. Los contenidos deben encerrarse entre el elemento <BODY> Contenido del documento </BODY>. Tal y como se ve en el ejemplo anterior.

Todo lo que se incluye entre el elemento <BODY></BODY> nos lo mostrará el navegador.

La versión HTML 4.0 que incluye actualmente elementos descriptivos o atributos de la etiqueta <BODY></BODY> es la versión de transición (HTML 4.0 Transitional). Sin embargo la tendencia es a eliminarlos desde que se introdujeron las hojas de estilo en cascada (CSS).

A continuación dispone de una GUIA DE ETIQUETAS PARA HTML 2.0 y una GUIA DE ETIQUETAS PARA HTML 3.2

Los contenidos de todos los documentos pueden dividirse en distintos bloques de texto y apoyarse con información adicional tal como ilustraciones o fotografías. Incluso los documentos HTML más sencillos presentan esta estructura.

Para ayudarnos a organizar la información de un documento se pueden utilizar ENCABEZADOS que dividan estos bloques. En HTML los encabezados constan de seis niveles <H1> a <H6>. La H deriva del ingles Header. El encabezado <H1> denota la información de mayor importancia, y el <H6> aquella menos relevante. Los navegadores traducen esta etiqueta mostrando el texto en distintos tamaños, siendo <H1> el mayor y <H6> el menor.

Si después de esta sucinta Introducción al HTML usted quiere aprender más sobre como crear páginas web, le recomiendo algunos recursos que puede encontrar en Internet:

7.- ADDENDUM.

Nuestro objetivo con esta Introducción al HTML se ha limitado a dar un encuadre adecuado para que usted mismo pueda iniciarse en la edición de documentos Web. No hemos pretendido realizar una presentación exhaustiva sobre lo que es el HTML, dadas las limitaciones de tiempo y el carácter fundamentalmente heterogéneo de los asistentes a ésta conferencia. Pero si pensamos que usted podrá estar ahora en mejores condiciones de entender cómo se crea una página web y si lo desea, podrá profundizar mejor en el estudio de las distintas etiquetas y elementos HTML.

Dos consejos resultan siempre útiles para aquellos que se inician en la creación de sitos Web:

  1. Aprenda de los demás. En Internet resulta muy fácil aprender de los demás. Los códigos de todas las páginas web son abiertos, no están compilados. Curiosee sin rubor cómo han escrito otros autores sus documentos HTML. Recuerde que tanto en el navegador Netscape Navigator como Internet Explorer existe la posibilidad de abrir la fuente del documento. Además, con cualquier editor como los que le hemos ya comentado, podrá siempre abrir cualquier página web y echarle un vistazo.
  2.  

  3. Aprenda usted mismo. La mejor forma de aprender a escribir una página Web es ponerse personalmente a hacerlo y experimentar que, a la postre, no es tan complicado. Basta con un poco de paciencia y disponer de las mejores fuentes de información. Algunas ya se las hemos adelantado en párrafos anteriores, otras puede incluso encontrarlas en los documentos de ayuda de sus editores HTML.

No obstante, para facilitarle su propia práctica hemos incluido con este documento algunos recursos y ejemplos que puedan servirle de orientación. La mayoría de ellos proceden del Curso Webmaster de programación en Internet de Tower Communication con la colaboración de Microsoft.

- Tabla de colores de Netscape: 256 colores a nuestra disposición.

- Ejemplos con alineamientos de imágenes: Todas las posibilidades de alineamiento de imágenes están reunidas en este archivo para que el lector pueda comprobar todos los resultados posibles con sus propios ojos.

- Tabla de colores en formato hexadecimal: En esta tabla podemos consultar el código de 228 colores para que no tengamos que pensarlo nosotros mismos. Si bien podemos crear hasta 16 millones de colores usando el formato hexadecimal estos 228 cubren gran parte de los colores que necesitaremos.

- Los Alpes. Agencia de Viajes: Página HTML de ejemplo. Le sugerimos explore el código para ver cómo está escrita esta página

- Frames: Resumen de las etiquetas y atributos existentes en el lenguaje HTML para crear marcos y marcos flotantes. Se distinguen entre los atributos aceptados por Netscape, los aceptados por Explorer y los aceptados por el estándar HTML 4.0.

- Práctica con Frames: Vea el resultado de la versión con marcos de la página de la agencia de viajes Los Alpes.

- Ejemplo de Frames: Ejemplo de una página compuesta por tres marcos.

- Ejemplo de Frames Flotantes.

- Marquesinas animadas.

- Texto parpadeante.

- Sonido con Internet Explorer.

- Sonido compatible.

- Resumen de la etiqueta APPLET.

- Listado de direcciones relacionadas con la tecnología ActiveX

- Hojas de Estilo en Cascada (Cascading Style Sheets, level 1)

- Web Fonts W3C Working Draft 21-July-1997.

- Ejemplos de Hojas de Estilo en Cascada.

 

- La cabeza alienígena.

Description
With Alienhead, users can position the various fruits and nuts to make their favorite alien face. Behind this light-hearted demo is some very serious technology.

1. CSS 2-D Positioning
All of the images on the page are arranged in 2-D space.

2. Event bubbling
The code that allows elements to be positioned is only 15 lines long. Each individual graphic does not require separate event handlers. The events are captured at the document level.

- La Página del Web Master. Página ejemplo con muchos de los recursos HTML que son posibles utilizar.