Diseo Web Mis Primeros pasos: Comprendiendo el HTML

1. Introduccin El HTML es un lenguaje, un codigo, una forma de relacionar humanos con mquinas de

computar, y en especial, expresar en ellas informacin. Recuerden que un color es

informacin, lo mismo una foto.

El nombre HTML es un acrnimo, una sigla, referente a la frase Hyper Text Markup Language

(Lenguaje de Marcado de Hiper Texto). Con Texto, nos quiere decir exactamente eso, texto; un

conjunto de caracteres alfanumricos escritos que en determinado orden y cantidad forman

palabras, frases, prrafos, etc. Sin embargo, cuando leemos la palabra Hyper, surgen dudas. El

trmino Hyper (Hper, en espaol), nos quiere denotar un aumento de tamao, capacidad,

posibilidades, capacidades, etc. Hper Ofertas, en cualquier negocio del mundo, nos hace

entender al instante que se trata de muchsimas ofertas. Hper Mercado, nos habla de un

mercado muy grande, etc. etc.

Hiper Texto, nos habla de un texto con ms propiedades que la de solo ser ledo, - copiado,

cortado o pegado - , la palabra pretende hacernos entender que de hecho, el Hper Texto

ofrece algo ms tangible dentro de lo intangible que es un texto. Con el uso del Hper Texto

podremos enaltecer la capacidad del texto comn, haciendo que trabaje para nosotros,

especificndole la estructura, diseo, enlaces, etc, a una computadora, nicamente utilizando

texto.

Claro est que para que ste tipo de cdigo con texto llegue a su nivel Hiper, la

computadora que lo vaya a leer, deber contar con un Nevagador de Internet, cualquiera de

las ultimas versiones que hay gratuitamente en plaza sabrn leer el HTML.

Entonces, con un navegador de internet y un procesador de texto sin formato, como el block

de notas, tengo lo bsico para probar el cdigo HTML.

A medida que nos vayamos adentrando en la comprensin del cdigo HTML, veremos que

existen variaciones a sus siglas para expresar diferentes estados del cdigo. Al ser

desarrollado por una comunidad global de miles de programadores, el HTML fue mutando y

ramificndose. Una de esas ramas o extensiones a las que lleg, es el XHTML, donde la X es

parte de la palabra eXtended (eXtendido), y utiliza las etiquetas definidas en el metalenguaje

XML.

2. Breve Resea Historica La primera aparicin en pblico del HTML sucedi en 1991, bajo el nombre de HTML Tags

(Etiquetas HTML), publicado por Tim Berners-Lee. Contaba con 22 elementos para expresar el

diseo inicial y sensiblemente simple que tena el HTML. Era un lenguaje derivado del SGML .

Berners Lee, mientras trabajaba en el CERN de Ginebra, Suiza, adems de crear el HTML, crea

algo ms importante, el WWW o Red Informtica Mundial. Agregado a esto, tambin crea el

primer navegador de internet, el ViolaWWW, que trabajaba sobre una plataforma UNIX e

interpretaba el cdigo HTML.

En 1993, el HTML consigue ser comprendido como una ampliacin y no un simple derivado

del SGML, al incorporar la Definicin de Tipo de Documento en la publicacin de un boceto,

lo que permitira definir la gramtica a utilizar por el Hiper Texto, fue de notable xito al

incorporar la etiqueta propia del navegador Mosaic, usada para insertar imgenes sin cambio

de lnea, lo que ampliaba muchsimo ms las capacidades del HiperTexto.

Fue en 1995 cuando un HTML 3.0 estaba pronto para ser propuesto como estndar, se

present el borrador inicial, el cual ya incorporara definitivamente la creacin de tablas con

facilidad, pero la ambicin de los nuevos elementos, textos que fluyeran con los bordes de las

imgenes, o la representacin de elementos matemticos complejos, sumado al desinters de

los fabricantes de navegadores por seguir los estndares de la W3C, llev a que la

investigacin y el desarrollo del HTML no avanzaran.

La versin 3.1 jams lleg a ser propuesta, y la 3.2 para lograr entrar en la estandarizacin,

omiti ex profeso la utilizacin de muchas etiquetas propuestas en la versin 3.0. Por ejemplo,

las representaciones matemticas se terminaron mudando a otro derivado del SGML,

llamado MathML. Adems la versin HTML 3.2 agreg muchas funciones utilizadas en los

navegadores Mosaic y Netscape Navigator.

En 1997 el HTML 4.0 fue propuesto directamente por la W3C. El cual adems de incorporar

elementos nuevos, se encarg de limpiar elementos que ya no eran utilizados. Todas estas

etiquetas y elementos fueron llamados desaprobados o deprecated en Ingles. Otra de las

funciones que incorpora la versin 4.0, es el XForms 1.0, lo cual daba un vuelco importante,

ahora las paginas HTML podran recabar informacin de sus visitantes mediantes formularios.

No fue hasta el ao 2004 en que la W3C sienta las bases del futuro HTML5, el proyecto

presentado como boceto, no fue aprobado por los miembros de la W3C, que dejaron de lado

el HTML5 y que comenzaron a desarrollar el XML, el cual consideraban el futuro lenguaje a

seguir. Hasta que Apple, Mozilla y Opera Software demostraron inters en seguir con el

proyecto de desarrollo de HTML5, en un grupo de trabajo que llamaran WHATWG (Web

Hypertext Aplication Technology Working Group) o (Grupo de Trabajo Tecnolgico para

Aplicacines Web en Hypertexto). En el 2007, la W3C retom el inters en el HTML5 y se uni

al WHATWG.

3. Marcado HTML Los elementos HTML son la estructura de base en el lenguaje. Tienen dos propiedades

primarias, los atributos y el contenido. Si bien una etiqueta es adems un Elemento, se

considera Elemento al conjunto de Etiqueta con Atributos y Contenido. Los elementos en el

general de los casos tienen una etiqueta de apertura y una etiqueta de cierre. Los atributos

estn ubicados dentro de la etiqueta de apertura, y el contenido est ubicado entre las

etiquetas de apertura y cierre.

Algunos elementos, como el , no tienen una etiqueta de cierre, ni admiten contenido.

El marcado estructural nos describe el cometido del texto. Por Ejemplo Golf

establece Golf como un encabezado de segundo nivel. El marcado estructural no define

cmo se ver el elemento, pero los navegadores web han estandarizado el formato de los

elementos.

El marcado presentacional se encarga de la apariencia del texto, sin importar su cometido.

Por ejemplo, negrita , itlica, indican al navegador, tanto que el texto sea

expresado en negrita, o en cursiva. En la web semnticas, se pueden encontrar variantes a las

etiquetas, como fuerte , onfasis. La mayora del marcado

presentacional ha sido desechado con la aparicin del HTML4.0, a favor del CSS.

El marcado hipertextual es utilizado para vincular partes de un documento con otros, o con

otras partes del mismo documento. Para crear un vinculo se utiliza la etiqueta de ancla

junto con el atributo href, el cual indicar cual ser la direccin URL a la que apunta el enlace.

Un ejemplo de un Hipervinculo de texto: Google.

Ejemplo de Hipervinculo en Imagen: .

4. Atributos Los atributos en un elemento HTML son los encargados de darle, como bien lo indica la

palabra, atribuciones a cada etiqueta. En general estn compuestos por un par llamado

nombre-valor, separados por un signo de igual (=). El valor puede estar expresado dentro de

comillas, si pretendemos trabajar con XHTML, si bien no se considera seguro, al utilizar HTML

simple, las comillas no son necesarias.

5. Cdigos HTML Bsicos

: Define el inicio del documento HTML, le indica al navegador que lo que viene a continuacin debe ser interpretado como cdigo HTML. Esto es as de facto, ya que en teora

lo que define el tipo de documento es el DOCTYPE, significando la palabra justo tras DOCTYPE

el tag de raz, por ejemplo:

: incrusta un script en una web, o se llama a uno mediante src="url del script". Se recomienda incluir el tipo MIME en el atributo type, en el caso de JavaScript text/javascript.

: define la cabecera del documento HTML; esta cabecera suele contener informacin sobre el documento que no se muestra directamente al usuario. Como por ejemplo el ttulo de

la ventana del navegador. Dentro de la cabecera podemos encontrar:

: define el ttulo de la pgina. Por lo general, el ttulo aparece en la barra de ttulo encima de la ventana.

: para vincular el sitio a hojas de estilo o iconos. Por ejemplo:.

: para colocar el estilo interno de la pgina; ya sea usando CSS, u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta

.

: para metadatos como la autora o la licencia, incluso para indicar parmetros http (mediante http-equiv="") cuando no se pueden modificar por no estar disponible la

configuracin o por dificultades con server-side scripting.

: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse

propiedades comunes a toda la pgina, como color de fondo y mrgenes. Dentro del cuerpo

podemos encontrar numerosas etiquetas. A continuacin se indican algunas a modo

de ejemplo:

a : encabezados o ttulos del documento con diferente relevancia.

: define una tabla.

: fila de una tabla.

: celda de una tabla (debe estar dentro de una fila).

: hipervnculo o enlace, dentro o fuera del sitio web. Debe definirse el parmetro de pasada por medio del atributo href. Por ejemplo: Wikipedia se representa como

Wikipedia).

: divisin de la pgina. Se recomienda, junto con css, en vez de cuando se desea alinear contenido.

: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo: . Es conveniente, por accesibilidad,

poner un atributo alt="texto alternativo".

: etiquetas para listas.

: texto en negrita (etiqueta desaprobada. Se recomienda usar la etiqueta ).

: texto en cursiva (etiqueta desaprobada. Se recomienda usar la etiqueta ).

: texto tachado (etiqueta desaprobada. Se recomienda usar la etiqueta ).

: texto subrayado.

La mayora de etiquetas deben cerrarse como se abren, pero con una barra (/) tal como se

muestra en los siguientes ejemplos:

Contenido de una celda

Cdigo de un [[script]] integrado en la pgina