PDF de programación - Prólogo al manual de HTML

Introducción al HTML

• HTML es el lenguaje con el que se escriben las páginas web. Las páginas

web pueden ser vistas por el usuario mediante un tipo de aplicación llamada
navegador. Podemos decir por lo tanto que el HTML es el lenguaje usado por los
navegadores para mostrar las páginas webs al usuario, siendo hoy en día la
interface más extendida en la red.

Este lenguaje nos permite aglutinar textos, sonidos e imágenes y combinarlos a
nuestro gusto. Además, y es aquí donde reside su ventaja con respecto a libros
o revistas, el HTML nos permite la introducción de referencias a otras páginas
por medio de los enlaces hipertexto.

El HTML se creó en un principio con objetivos divulgativos. No se pensó que la
web llegara a ser un área de ocio con carácter multimedia, de modo que, el
HTML se creó sin dar respuesta a todos los posibles usos que se le iba a dar y a
todos los colectivos de gente que lo utilizarían en un futuro. Sin embargo, pese
a esta deficiente planificación, si que se han ido incorporando modificaciones
con el tiempo, estos son los estándares del HTML. Numerosos estándares se
han presentado ya. El HTML 4.01 es el último estándar a septiembre de 2001.

Esta evolución tan anárquica del HTML ha supuesto toda una seria de
inconvenientes y deficiencias que han debido ser superados con la introducción
de otras tecnologías accesorias capaces de organizar, optimizar y automatizar
el funcionamiento de las webs. Ejemplos que pueden sonar son las CSS,
JavaScript u otros. Veremos más adelante en qué consisten algunas de ellas.

Otros de los problemás que han acompañado al HTML es la diversidad de
navegadores presentes en el mercado los cuales no son capaces de interpretar
un mismo código de una manera unificada. Esto obliga al webmáster a, una vez
creada su página, comprobar que esta puede ser leída satisfactoriamente por
todos los navegadores, o al menos, los más utilizados.

Además del navegador necesario para ver los resultados de nuestro trabajo,
necesitamos evidentemente otra herramienta capaz de crear la página en si. Un
archivo HTML (una página) no es más que un texto. Es por ello que para
programar en HTML necesitamos un editor de textos.

Es recomendable usar el Bloc de notas que viene con windows, u otro editor de
textos sencillo. Hay que tener cuidado con algunos editores más complejos
como Wordpad o Microsoft Word, pues colocan su propio código especial al
guardar las páginas y HTML es únicamente texto plano, con lo que podremos
tener problemas.

Existen otro tipo de editores específicos para la creación de páginas web los
cuales ofrecen muchas facilidades que nos permiten aumentar nuestra
productividad. No obstante, es aconsejable en un principio utilizar una
herramienta lo más sencilla posible para poder prestar la máxima atención a
nuestro código y familiarizarnos lo antes posible con él. Siempre tendremos
tiempo más delante de pasarnos a editores más versátiles con la consiguiente
ganancia de tiempo como el DreamWeaver, GoLive, HomeSite, etc.



Es importante tener claro todo ello puesto que en función de sus objetivos puede que,
más que aprender HTML, resulte más interesante aprender el uso de una aplicación
para la creación de páginas.

Así pues, una página es un archivo donde está contenido el código HTML en forma de
texto. Estos archivos tienen extensión .html o .htm (es indiferente cuál utilizar). De
modo que cuando programemos en HTML lo haremos con un editor de textos y
guardaremos nuestros trabajos con extensión .html, por ejemplo mipágina.html

Consejo: Utiliza siempre la misma extensión en tus archivos HTML. Eso evitará
que te confundas al escribir los nombres de tus archivos unas veces con .htm y
otras con .html. Si trabajas con un equipo en un proyecto todavía más
importante que se pongan todos de acuerdo en la extensión.



Sintaxis del HTML

El HTML es un lenguaje que basa su sintaxis en un elemento de base al que llamamos
etiqueta. La etiqueta presenta frecuentemente dos partes:

Una apertura de forma general <etiqueta>
Un cierre de tipo </ etiqueta>

Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones que
caracterizan a esta etiqueta. Así por ejemplo:

Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro
documento HTML escribimos una frase con el siguiente código:

<b>Esto esta en negrita</b>

El resultado Será:

Esto esta en negrita

Las etiquetas <p> y </p> definen un párrafo. Si en nuestro documento HTML
escribiéramos:

<p>Hola, estamos en el párrafo 1</p>
<p>Ahora hemos cambiado de párrafo</p>

El resultado sería:

Hola, estamos en el párrafo 1

Ahora hemos cambiado de párrafo


Partes de un documento HTML

Además de todo esto, un documento HTML ha de estar delimitado por la
etiqueta <html> y </html>. Dentro de este documento, podemos asimismo
distinguir dos partes principales:

El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas
de índole informativo como por ejemplo el titulo de nuestra página.

El cuerpo, flanqueado por las etiquetas <body> y </body>, que será donde
colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas como
las que hemos visto.

El resultado es un documento con la siguiente estructura:

<html>

<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra página pero que son importantes para catalogarla:
Titulo, palabras clave,...
</head>

<body>
Etiquetas y contenidos del cuerpo
Parte del documento que será mostrada por el navegador: Texto e imágenes
</body>

</html>

Las mayúsculas o minúsculas son indiferentes al escribir etiquetas

A notar que las etiquetas pueden ser escritas con cualquier tipo de combinación de
mayúsculas y minúsculas. <html>, <HTML> o <HtMl> son la misma etiqueta. Resulta
sin embargo aconsejable acostumbrarse a escribirlas en minúscula ya que otras
tecnologías que pueden convivir con nuestro HTML (XML por ejemplo) no son tan
permisivas y nunca viene mal coger buenas costumbres desde el principio para evitar
fallos triviales en un futuro.



Tu primera página

Podemos ya con estos conocimientos, y alguno que otro más, crear nuestra primera
página. Para ello, abre tu editor de textos y copia y pega el siguiente texto en un
nuevo documento.

<html>

<head>
<title>Cocina Para Todos</title>

</head>

<body>
<p><b>Bienvenido,</b></p>
<p>Estás en la página <b>Comida para Todos</b>.</p>
<p>Aquí aprenderás recetas fáciles y deliciosas.</p>
</body>

</html>

Ahora guarda ese archivo con extensión .html o .htm en tu disco duro. Para ello
accedemos al menú Archivo y seleccionamos la opción Guardar como. En la ventana
elegimos el directorio donde deseamos guardarlo y colocaremos su nombre, por
ejemplo mi_pagina.html

Consejo: Utiliza nombres en tus archivos que tengan algunas normas básicas para ahorrarte
disgustos y lios.

Mi consejo es que no utilices acentos ni espacios ni otros caracteres raros. También te ayudará
escribir siempre las letras en minúsculas.

Esto no quiere decir que debes hacer nombres de archivos cortos, es mejor hacerlos descriptivos
para que te aclaren lo que hay dentro. Algún caracter como el guión "-" o el guión bajo "_" te
puede ayudar a separar las palabras. Por ejemplo quienes_somos.html


Con el documento HTML creado, podemos ver el resultado obtenido a partir de un
navegador. Es conveniente, llegado a este punto, hacer hincapié en el hecho de que no
todos los navegadores son idénticos. Desgraciadamente, los resultados de nuestro
código pueden cambiar de uno a otro por lo que resulta aconsejable visualizar la
página en varios. Generalmente se usan Internet Explorer y Netscape como referencias
ya que son los más extendidos.

A decir verdad, en el momento que estas líneas son escritas, Internet Explorer acapara
la inmensa mayoría de usuarios (90% más o menos) y Netscape esta relegado a un
segundo plano. Esto no quiere decir que lo debemos dejar totalmente de lado ya que el
10% de visitas que puede proporcionarnos puede resultar muy importante para
nosotros. Por otra parte, parece que se ha hecho publica la intención de Netscape de
desviar un poco su temática de negocios hacia otros derroteros y abandonar esta
llamada "lucha de navegadores" en la cual estaba recibiendo la peor parte.

Pues bien, volviendo al tema, una vez creado el archivo .html o .htm, podemos
visualizar el resultado de nuestra labor abriendo dicha página con un navegador. Para
hacerlo, la forma resulta diferente dependiendo del navegador:

Si estamos empleando el Explorer, hemos de ir al barra de menú, elegir Archivo y
seleccionar Abrir. Una ventana se abrirá. Pulsamos sobre el botón Examinar y
accederemos a una ventana a partir de la cual podremos movernos por el interior de
nuestro disco duro hasta dar con el archivo que deseamos abrir.

La cosa no resulta más difícil para Netscape. En este caso, nos dirigimos también a la
barra de menú principal y elegimos File y a continuación Open File. La misma ventana
de búsqueda nos permitirá escudriñar el contenido de nuestro PC hasta dar con el
archivo buscado.

Nota: También puedes abrir el archivo si accedes al directorio donde lo guardaste. En él podrás
encontrar tu archivo HTML y verás que tiene como icono el logotipo de Netscape o el de Internet
Explorer. Para abrirlo simplemente hacemos un doble click sobre él.


Una vez abierto el archivo podréis ver vuestra primera página web. Algo sencillita pero
por algo se empieza. Ya veras como en poco tiempo seremos capaces de mejorar
sensiblemente.

Fíjate en la parte superior izquierda de la ventana del navegador. Podrás comprobar la
presencia del texto delimitado por la etiqueta <title>. Esta es una de las funciones de
esta etiqueta, cuyo principal cometido es el de servir de referencia e