Crea tu Web: HTML desde Cero | Parte 1

¿Qué es una página web?

Pues eso de entrada podemos preguntarnos qué es una página web. Habrían dos respuestas: para el internauta y para el diseñador.

Para el internauta una página WEB es una pantalla en su monitor que le muestra la información que va buscando y enlaces a otros sitios relacionados.

Para el diseñador una página WEB es un documento construído para mostrar información en la pantalla de un monitor, que contiene además de la información una serie de instrucciones para indicar como se ha de mostrar esa información. Estas instrucciones se escriben siguiendo un lenguaje llamado HTML

Como ves el diseñador define la página web como algo más completo y técnico que el simple internauta. La página web se concreta en un documento con un nombre terminado con la extensión .htm o .html.

Una serie de páginas web interconectas e interrelacionadas de alguna forma (el mismo tema, el mismo objetivo...) forman un sitio web, que habitualmente está almacenado en un servidor.

Requisitos

Para seguir el curso los requisitos son mínimos: un ordenador, un navegador y un editor de texto simple es suficiente. Pero te recomendaría, además, instalar un servidor de internet en tu ordenador. No te asustes, no es nada del otro mundo. Tanto si usas Windows como si te mueves en el mundo Linux te recomiendo el servidor Apache (si piensas trabajar con PHP te recomiendo la versión 1.xx, la 2 sigue siendo desaconsejable), es muy simple de instalar y de configurar. Con este servidor corriendo en tu equipo tendrás un sitio llamado localhost al que podrás acceder como si se tratara de un servidor de internet: http://localhost/, pero solo es visible en tu ordenador.

En cuanto al editor de páginas web utiliza un editor tipo texto, o uno gráfico, pero trabajano en modo texto. Recuerda que la idea es conocer el lenguaje HTML, y los editores gráficos esconden el código. Míra estas herramientas que te pueden ser útiles, recuerda que de gratis también hay cosas buenas.

En cuanto al navegador lo mejor es tener uno de cada, de esa manera podrás comprobar que todo lo que hagas funciona en ambos modelos, aunque hoy por hoy el rey es el Explorer de Microsoft.

El HTML

Antes de entrar de lleno en materia un poquito de historia, nunca viene mal conocer el material de trabajo a fondo. El HTML o lenguaje de marcas de hipertexto es un derivado de un lenguaje usado para describir documentos, el SGML. ¿Y esto que significa? Pues muy sencillo: la estructura de las páginas web se describe en la propia página mediante una serie de etiquetas que le dicen al navegador como debe mostrar el documento, o sea, la página web: cuando debe cambiar de párrafo, cuando debe mostrar el texto en negrita o en color, cuando mostrar una imagen, cuando un enlace a otro documento, etc. Y esto se lo dice al navegador mediante unas marcas o etiquetas en el documento. El HTML es el lenguaje que explica qué etiquetas se pueden usar en una página y como se usan.

Como ves todo va mezclado: información y formato, algo que ha comenzado a cambiar con la aparición de los estilos CSS, un interesante intento de separar la información del formato de presentación.

Los inicios: HTML 2.0

Cuando internet salió del ámbito universitario y se convirtió en una herramienta de dominio público la versión de HTML existente era la 2.0, algo limitada pero que cualquier navegador va a ser capaz de interpretar.

HTML 3.0 y 3.2

A medida que la red se extendía, los documentos que circulaban por ella se hicieron más complejos y completos, la versión 2.0 pronto se mostró demasiado limitada para cumplir con su cometido: mostrar las páginas web en los terminales de los usuarios. Así que los exploradores comenzaron a incluir etiquetas extras no contempladas en el estándard. Por entonces el IETF (Intenert Enginierign Task Force) era el encargado de normalizar todo lo relativo a la recien nacida red de redes y elaboró la versión 3.0, versión que pretendía incorporar las nuevas etiquetas y las que estuvieran por llegar.

Este standard no terminó de cumplir lo esperado, además en esas fechas la sección de standarización de HTML de este comité cerraba sus puertas, por lo que un grupo de empresas, entre las que estaban Netscape, Microsoft, IBM y Sun, crearon un nuevo comité para estandarizar internet, era el W3C, organismo que aún hoy dicta los estándares no solo para HTML, sino también para las hojas de estilo CSS y otras herramientas de la red. Su primer trabajo consistió en mejorar la versión 3.0 de HTML, lo que llevó al HTML 3.2, que incluía muchas de las nuevas etiquetas que los principales navegadores de la época, osea, Netscape y Explorer, ya estaban utilizando.

HTML 4.0

El HTML 3.2 era una solución temporal que se aprobó en enero de 1997, momento en el que el W3C comenzaba a eloborar un nuevo estandard con reformas profundas, era la versión 4.0. En julio de 1997 se presenta el borrador de este nuevo estándar que unifica el manejo de los marcos (frames e iframes), las hojas de estilo y los scripts. El 17 de diciembre de 1997 dicho borrador corregido fue finalmente aprobado como HTML 4.01, y es el que aún hoy día viene usándose para la creación de las páginas web.

Mi primera página

El código

Lo mejor para aprender a hacer algo es ... ¡hacerlo!. Así que vamos a la primera página

mipagina.htm

<HTML>
<HEAD>
<TITLE>Mi primera pagina web </TITLE>
</HEAD>
<BODY>
<H1 align="center" >Mi Primera pagina web </H1>
<HR>
<P>Esto tan sencillo es una verdadera página web, aunque le falta el contenido, pero todo llegará.</P>
</BODY>
</HTML>

Si quieres ver como queda esto en el explorador solo tienes que pulsar aquí , y tranquilo que se abrirá en otra ventana

La explicación

Si te fijas en la página que ves con el explorador solo se ve parte de lo que has escrito, concretamente todo lo que no está encerrado entre los símbolos < y >. Eso es el contenido de la página, pero ¿y lo que está entre esos paréntesis angulares? pues esas son las etiquetas que le dicen al explorador como mostrar el contenido: en grande, con colores, centrado, el título de la página, etc. Si te fijas cada etiqueta tiene un comienzo y un fin:

<ETIQUETA parámetros> ... </ETIQUETA>

Como ves una apertura y un cierre. Algunaas etiquetas (como <BR> cambio de línea o <HR> linea horizontal) no llevan cierre. Fijaros que lo primero que tenemos es la etiqueta <HTML> cerrda al final del documento con </HTML>, eso quiere decir que estamos ante un HTML:

<HTML> ... </HTML>

Dentro de ese documento vemos una parte llamada cabecera, que la reconocerás porque está limitada con la etiqueta <HEAD> </HEAD>. Él contenido de esta parte no siempre es visible, y si lo es nunca se muestra en la página en si. Contiene por ejemplo el título que se ve en la ventana del explorador, arriba a la izquierda. La cabecera queda por tanto :

<HEAD>
<TITLE>Mi página web</TITLE>
</HEAD>

Puede contener muchas otras cosas, pero eso lo dejamos para más adelante.

El cuerpo del documento

La otra parte es el cuerpo o <BODY> </BODY>, es el contenido de la página web. Tiene una etiqueta con cierre:
<BODY> ... </BODY>
Y ahora el contenido:

<H1 align="center"> Mi primera página web</H1>

Con esto colocaremos el texto en formato <H1> (o cabecera 1) y centrado (align="center", o sea, en tamaño grande y centrado en la página, una forma de resaltar la frase. Ahora separamos esa frase por medio de una línea horizontal:

<HR>

Como ves este es un ejemplo de etiqueta sin cierre. Y por último colocamos un texto escplicativo en un párrafo (<P></P>, o sea, un bloque de texto con un espacio por delante y otro por detrás :

<P>Esto tan sencillo es una verdadera página web, aunque le falta el contenido, pero todo llegará.</P>

Para empezar no está mal, por supuesto existen muchas más etiquetas con misiones diferentes a la de mostrar texto, pero eso lo iremos viendo poquito a poco.

Estructura del documento

La estructura de un documento HTML se puede resumir así:

tipo de documento

<HTML>
<HEAD>
<TITLE>titulo de la página</TITLE>
cosas que afectan a la página pero no a su contenido
</HEAD>
<BODY parámetros>
contenido de la página
</BODY>
</HTML>

En el tipo de documento deberemos especificar a que estándar del HTML responde nuestra página entre una de las siguientes opciones:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
Cumple el estándar HTML 2.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Cumple el estándar HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://w3.org/TR/REC-html40/loose.dtd">
Cumple el estándar HTML 4.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://w3.org/TR/REC-html40/strict.dtd">
Cumple el estándar HTML 4.0 y no contiene además elementos desaconsejables
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://w3.org/TR/REC-html40/frameset.dtd">

Es una definición de marcos que cumple el estándar HTML 4.0
El HTML 4.0 considera desaconsejables aquellos elementos que, aún siendo soportados, han sido sustituidos por otros más potentes y, por ello, es posible que sean eliminados del estándar HTML en el futuro.

La cabecera

Suele ser el lugar más indicado para colocar aquellos elementos de la página que no alteren el contenido de la misma, aunque si la forma de presentarlo y su comportamiento. Es por eso que es el lugar más recomendable para colocar los scripts y las hojas de estilo, como veremos en los capítulos correspondientes.

Hay también otro elemento interesante que podremos incluir en nuestras cabeceras. Cuando especificamos una URL relativa en un enlace, en principio es para acceder a una página situada en nuestro mismo servidor. Sin embargo, si especificamos:

<BASE HREF="http://www.misitio.com/">

Ahora todas nuestras URLs relativas se encontrarán dentro del servidor http://www.misitio.com

Meta Name

Además del título de la página, uno de los elementos que se pueden incluir aquí son los META. Entre otras cosas, sirven para indicar propiedades de la página como pueda ser el nombre de su autor. Por ejemplo,

<META NAME="GENERATOR" CONTENT="Mozilla/4.03 [es] (Win95; I) [Netscape]">

nos indicaría la herramienta con que hemos creado la página (en este caso la versión 4.03 en español para Windows 95 del Composer de Netscape). Como veréis el uso es muy simple, en NAME colocamos el nombre de la etiqueta y en CONTENT colocamos su valor, ambos entre comillas y con el signo igual por delante.
Estas son las propiedades más comunes:


Name Content

AUTHOR Autor de la página.
CLASSIFICATION Palabras que permite clasificar la página dentro de un buscador jerárquico (como Yahoo).
KEYWORDS Palabras clave por las que encontrarán la página en los buscadores. Google no le hace mucho caso.
GENERATOR Herramienta utilizada para hacer la página.
DESCRIPTION Descripción del contenido de la página. Google le hace algún caso.

Meta http-equiv

Son etiquetas usadas también para dar información al navegador y complementan las etiquetas Meta vistas en el apartado anterior. En algunos casos existen etiquetas Meta Name y http-equiv similares. Su uso es similar a las etiquetas Meta Name, por ejemplo:

<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

La única diferencia está en que en lugar de NAME usamos HTTP-EUIV, el resto es igual. Cuando el contenido conste de más de varios valores, estos se separan con ; (punto y coma). Veamos algunos tipos:

HTTP-EQUIV CONTENT
expires Fecha desde la que la página debe ser recargada por los navegadores
pragma El contenido debe ser no-cache y sirve para que el navegador no guarde la página en el ordenador del internauta.
Content-Language Idioma en el que está escrita la página. Se usan las iniciales como: es_ES: español España, en_US: ingles americano...
Refresh Indica al navegador el tiempo (en segundos) que debe esperar para recargar la página automáticamente y la página a la que debe ir. Ambos datos se separan con un punto y coma.
Content-Type Tipo de documento y juego de caracteres usado. Lo habitual es colocar el valor:
text/html; charset=iso-8859-1
Si n o se usa los caracteres especiales (letras acentuadas, ñ) pueden quedar ilegibles .

El cuerpo

El cuerpo es el contenido de la página propiamente dicho, o sea, lo que se ve, en el es donde colocarán prácticamente todos los elementos que vamos a ir viendo por este manual. Los atributos que admite esta etiqueta <BODY>:

BACKGROUND Coloca una imagen como fondo de la página.
BGCOLOR Define el color de fondo de la página.
BGPROPERTIES Cuando es igual a FIXED el gráfico definido como fondo de la página permanecerá inmóvil aunque utilicemos las barras de desplazamiento.
TEXT Color del texto.
LINK Color de un enlace no visitado (por defecto azul).
VLINK Color de un enlace ya visitado (por defecto púrpura).
ALINK Color que toma un enlace mientras lo estamos pulsando (por defecto rojo).
LEFTMARGIN y TOPMARGIN Número de pixels que dejará de margen entre el borde de la ventana y el contenido de la página.
MARGINWIDTH y MARGINHEIGHT Equivalentes a los anteriores, pero éstos funcionan en Netscape.

No resulta recomendable cambiar los colores del texto y enlaces a no ser que exista alguna dificultad al leerlos por haber cambiado el fondo, ya que en muchas ocasiones el usuario ha podido cambiarlos en las opciones de su navegador y estarán ya a su gusto.

Cualquier comentario fuera de lugar sera borrado