INTRODUCCIÓN A HTML

Los documentos fundamentales de la www son los hipertextos. Los archivos correspondientes tienen la extensión HTML o HTM. La misma especificación HTML determina que estos archivos deben ser textos ASCII de 7 bits. Por eso no es posible esconder las informaciones que sirven para controlar el diseño del documento en caracteres no representables. Observando un documento HTML con un editor normal se puede ver tanto el contenido del documento como los comandos de formato. La sintaxis exacta de estos comandos de formato se define en las "Document Type Definitions" (DTD), basadas en el lenguaje de declaración SGML. No Obstante, hay que hacer hincapié en que todos los trabajos de la definición de este tipo de normas siguen, en general, el desarrollo de los programas de casas como Netscape y Microsoft, de modo que la autentica realidad de HTML no puede estar recogida totalmente en los documentos DTD existentes. 

Definición de HTML:

Hyper Text Markup Language, o simplemente HTML, es un lenguaje de programación muy sencillo que se utiliza para crear los textos y las páginas web. Si se hace la traducción de su nombre del inglés al castellano, sería “Lenguaje de Marca de Hipertextos”, ya que es justamente un lenguaje que se basa en las marcas para crear los hipertextos.

Esta definición se debe a que está compuesto por etiquetas que definen la estructura y el formato del documento que verá el usuario a través de la web. Esas etiquetas son leídas por el navegador o visualizador, es decir el programa que se utiliza para navegar, y que es el que ejecuta las funciones creadas en HTML permitiendo que puedan ser visibles en nuestra máquina.

Estas etiquetas o tags están tanto al principio como al final de la directiva, y entre una y otra se escribe la directiva y atributos.

Versiones de HTML:

HTML 2.0

Cuando se produjo la explosión de Internet el estándar de HTML que circulaba era el 2.0 (establecido en noviembre del 95), de modo que cualquier navegador que encontremos sera capaz de interpretarlo. 

HTML 3.0 y 3.2

Aunque la versión 2.0 cumplia bien el objetivo para el que se creo, carecía de los documentos para tener un control mínimamente complejo de los documentos. No se considero necesario que lo tuviera, ya que por aquel entonces Internet era un fenómeno mas bien circunscrito a la actividad académica y el contenido primaba sobre el diseño. Debido a ello, Netscape ( líder del mercado de navegadores por aquel entonces) empezó a incluir etiquetas nuevas no incluidas en ningún estándar.

Por estos problemas, el IETF ( el comité que suele decidir todos los estándares dentro de Internet) comenzó a elaborar el borrador del HTML 3.0, que resulto ser demasiado grande para la época, lo que dificulto su aceptación en el mercado.

esto llevo a una serie de compañías ( entre ellas Netscape, Microsoft, IBM, Sun, etc...) a crear un nuevo comité llamado W3C, que es el que actualmente elabora las nuevas versiones del HTML. Su primer trabajo consistió en crear el borrador del HTML 3.2, (Netscape y Explorer) habían introducido en Internet, como son las tablas , los applets, etc. 

Este borrador fue aprobado en enero de 1997 e inmediatamente el W3CV se puso a trabajar en la elaboración del siguiente estandar: el 4.0.

HTML 4.0

En julio de 1997 se presenta el borrador de este estándar. Por fin se estandarizan los marcos (frames), las hojas de estilo y los scripts (entre otras cosas). El 17 de diciembre de 1997 dicho borrador fue finalmente aprobado.

HTML 5

Es la quinta revisión importante del lenguaje básico del la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis para HTML: un HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML (XHTML) (application/xhtml + xml). Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.

Los Navegadores Compatibles:

Como hemos dicho, el navegador instalado en el ordenador del usuario es el que interpreta el código HTML de la página que visita por lo que a veces puede ocurrir que dos usuarios visualicen la misma página de forma distinta porque tienen instalados navegadores distintos o incluso versiones distintas del mismo navegador.

Los navegadores de hoy en día pretenden ser compatibles con la última versión de HTML. Es necesario realizar extensiones de los navegadores para que puedan ser compatibles con esta última versión.

Dos de los navegadores que continuamente están realizando extensiones son Internet Explorer y Netscape Navigator, que realizan extensiones incluso antes de que se establezcan los estándares, intentando incluir las nuevas funciones incluidas en los borradores.

Los navegadores tienen que ser compatibles con la última versión HTML para poder interpretar el mayor número posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretendía la etiqueta no queda reflejado en la página.

Para realizar las extensiones de estos navegadores se añaden nuevos atributos a las etiquetas ya existentes, o se añaden nuevas etiquetas.

Como resultado a estas extensiones, habrán páginas cuyo código podrá ser interpretado completamente por todos los navegadores, mientras que otras, al incluir nuevos atributos o etiquetas del borrador de la última versión de HTML, solo podrán ser interpretadas en su totalidad en los navegadores más actualizados.

En este último caso también puede ocurrir que alguna etiqueta de la página solamente pueda ser interpretada por un navegador concreto, y otra etiqueta por un navegador diferente al anterior, por lo que nunca sería visualizada en su totalidad por ningún navegador.

Uno de los retos de los diseñadores de páginas web es hacer las páginas más atractivas utilizando toda la potencia del lenguaje HTML pero teniendo en cuentas estos problemas de compatibilidades para que el mayor número de internautas vean sus páginas tal como las ha diseñado.

Editores de Codigo de HTML:

Los editores de HTML pueden ser de dos tipos, como veremos, unos permiten codificar las páginas utilizando el propio lenguaje HTML, a base de etiquetas y otros nos permiten diseñar una página web, como si estuviésemos escribiendo con un editor de texto avanzado, sin tener que escribir el código con las etiquetas. Esta última vertiente, que podemos llamar editores en modo diseño, presenta una facilidad adicional para las personas que no deseen complicarse la vida con el lenguaje HTML, porque no tengan tiempo de aprenderlo o porque se sientan incapaces de hacerlo. Los editores en modo diseño nos permiten crear la página como si estuviéramos escribiendo un documento con un editor del tipo de Word. El editor de HTML es el encargado de vérselas con el lenguaje y programar internamente la página con el código HTML, según lo que nosotros estamos diseñando.

Con el editor HTML en vista diseño podemos colocar imágenes, definir estilos, utilizar negritas o cursivas, etc. sin preocuparnos de las etiquetas correspondientes a cada estilo o elemento. Es el editor el que conoce estas etiquetas y las utiliza convenientemente. Este tipo de editores HTML en modo diseño se denominan, en lenguaje técnico WYSIWYG (What You See Is What You Get) porque cuando trabajas con ellos lo que ves que estás creando con el editor es lo que obtienes luego cuando grabas la página.

Cada uno debe escoger el camino que más le convenga o el que le parezca más atractivo. De todos modos siempre se puede empezar de un modo y luego pasar al otro modo sin ningún tipo de problema. Incluso, por adelantarnos a los acontecimientos, diríamos que cuando una persona profundiza en el diseño de páginas web llega un momento en el que le hace falta conocer las dos maneras de construir webs. A los programadores en HTML les hará falta aprender un editor porque eso aumentará su productividad y los que utilizan editores necesitarán aprender un poco de HTML para arreglar alguna cosa que el editor ha hecho mal o realizar alguna cosa que el editor no puede hacer.

Este manual está escrito por una persona que aprendió a realizar sus primeras webs con el Block de notas y algunas veces puede verse mi mayor inclinación a escribir el código HTML uno mismo. Aunque mi consejo es aprender HTML, estoy seguro que muchos preferirán que un editor en modo diseño haga las cosas más sencillas. Si el editor HTML WYSIWYG es bueno y lo dominamos perfectamente se pueden obtener perfectos resultados.

Editores HTML modo diseño WYSIWYGEn el mercado existen multitud de editores de HTML WYSIWYG, es importante elegir un editor bueno porque nuestros trabajos van a depender de sus resultados. Actualmente el rey de los editores y el que os aconsejaríamos sin duda es el Dreamweaver, fabricado por Adobe.

Otras posibilidades son editores como

• Kompozer, una opción gratuita
• Frontpage, aunque lo desaconsejamos.

Editores de texto preparados para escribir código HTML

Las personas que después de estas líneas han decidido aprender el lenguaje HTML también tienen herramientas muy interesantes para aumentar su productividad sin dejar de escribir ellos mismos el HTML que desean. Se trata de unos editores de texto, como cualquier otro, que están preparados para escribir HTML y por lo tanto ofrecen multitud de ayudas a los diseñadores:

• Pueden tener abiertos y editar varios ficheros a la vez
• Colorean los códigos de las páginas para hacerlos más comprensibles
• Suelen soportar otros lenguajes de programación con los que podemos llegar a trabajar en el desarrollo de páginas web.
• Ofrecen ayudas a la programación, que muchas veces son contextuales y se activan a medida que vamos realizando las páginas.
• Y además muchos de ellos tienen herramientas integradas para hacer cosas tan variadas como la generación de código, asistentes, módulos de conexión por FTP con el servidor, etc.

Dependiendo del programa escogido tendremos unas herramientas y ayudas u otras. Simplemente es elegir el que más se adapte a nuestras necesidades. Algunos ejemplos son:

• Notepad++, gratuito y código libre.
• Home Site, que estaba bien, aunque Adobe hace años que no lo actualiza.
• UltraEdit, que es un editor para programadores de los más populares.

Arachnophilia, que funciona en todos los sistemas operativos.

Si nos decidimos por escribir el código fuente en HTML será muy recomendable utilizar cualquiera de estos programas, para sentirnos más a gusto al programar las páginas y poder hacerlas más rápido. No obstante cabe recordar que cualquier editor de textos serviría para hacer páginas web, incluso el Block de notas, que es el editor más sencillo que existe para texto plano, pero utilizar un programa de estos será imprescindible con el tiempo.

En la sección de programas de desarrolloweb tenemos descripciones de algunos editores de HTML, tanto en modo diseño como escribiendo el código.

Estructura de una Pagina:

Identificador del tipo de documento <HTML>


La etiqueta <HTML> sirve de identificador , es decir da la referencia que el documento que se esta generando es del tipo HTML. Esta etiqueta se coloca al inicio y termino del documento es decir tiene una apertura <HTML> y un cierre </HTML>


Cabecera de una Pagina <HEAD>

La etiqueta <head> delimita la sección de la cabecera del documento HTML y contiene el título, la metainformación y, en la mayoría de los casos los scripts del documento están incluidos en esta sección.

Por ejemplo contiene etiquetas que pueden decir de qué va la página, el título que debe de mostrar en la barra del navegador, o código JavaScript y estilos CSS, que pueden estar en el propio encabezado o como llamadas a otros archivos.

Titulo de la Pagina <TITLE>

El título del documento es el que aparecerá en la parte superior de la ventana del navegador, cuando la página esté cargada en él.

Para asignar un título a una página es necesario escribir el texto deseado entre las etiquetas <title> y</title>.

Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <head> y </head>

La Etiqueta Meta <META>

La etiqueta <meta> no necesita etiqueta de cierre. Para cada etiqueta <meta> solo es posible indicar un tipo de información y su valor, pero es posible insertar varias etiquetas <meta> en un mismo documento.

La etiqueta <meta> ha de estar entre las etiquetas <head> y </head>
A continuación se muestra un video que les ayudara a comprender mejor la etiqueta meta.

Cuerpo del documento <BODY>

El cuerpo del documento contiene la información propia del documento, es decir lo que queremos que se visualice, el texto de la página, las imágenes, los formularios, etc.

Todos estos elementos tienen que encontrarse entre las etiquetas <body> y </body>, que van justo debajo de la cabecera.

Colores en Hexadecimal

Los colores en HTML se representan mediante un número hexadecimal.

Un número hexadecimal se diferencia de un número decimal en que no sólo puede tomar valores del 0 al 9, sino que puede tomar hasta dieciséis valores distintos, que van del 0 al 9, y de laA a la F.

Cada color estará representado por un grupo de seis dígitos en hexadecimal, precedidos por una almohadilla, como por ejemplo #FFFFFF.

Existen 216 colores seguros para web. Éstos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh.

También podemos personalizar nuestros propios colores, modificando los valores de cada uno de los dígitos que forman parte del número hexadecimal.

Ejemplos: