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 <br>, no tienen una etiqueta de cierre, ni admiten contenido.

El marcado estructural nos describe el cometido del texto. Por Ejemplo <h2>Golf</h2> 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, <b>negrita</b> , <i> itlica</i>, 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 <strong> fuerte </strong>, o<em>nfasis</em>. 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 <a> 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: <a href=http://www.google.com/>Google</a>. Ejemplo de Hipervinculo en Imagen: <a href=enlace><img src=imagen /></a>.

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.
<html>:

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: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">

<script>: 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.

<head>: 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 <head> podemos encontrar:

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

<link>: para vincular el sitio a hojas de estilo o iconos. Por ejemplo:<link rel="stylesheet"
href="/style.css" type="text/css">.

<style>: 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 <link>.

<meta>: 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.

<body>: 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 <body> podemos encontrar numerosas etiquetas. A continuacin se indican algunas a modo de ejemplo:

<h1> a <h6>: encabezados o ttulos del documento con diferente relevancia. <table>: define una tabla. <tr>: fila de una tabla. <td>: celda de una tabla (debe estar dentro de una fila). <a>: hipervnculo o enlace, dentro o fuera del sitio web. Debe definirse el parmetro de
pasada por medio del atributo href. Por ejemplo: <a href="http://www.wikipedia.org" title="Wikipedia" target="_blank" tabindex="1">Wikipedia</a> se representa como Wikipedia).

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

<img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la
imagen. Por ejemplo: <img src="./imgenes/mifoto.jpg" />. Es conveniente, por accesibilidad, poner un atributo alt="texto alternativo".

<li><ol><ul><dl>: etiquetas para listas. <b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la etiqueta <strong>). <i>: texto en cursiva (etiqueta desaprobada. Se recomienda usar la etiqueta <em>). <s>: texto tachado (etiqueta desaprobada. Se recomienda usar la etiqueta <del>). <u>: texto subrayado.
La mayora de etiquetas deben cerrarse como se abren, pero con una barra (/) tal como se muestra en los siguientes ejemplos:

<table><tr><td>Contenido de una celda</td></tr></table> <script>Cdigo de un [[script]] integrado en la pgina</script>