¿Cómo funciona esto?
Básicamente, la cosa es simple: la pieza clave es el "browser", "navegador", "visualizador" o "cliente" o como quieras llamarle, HTML, es decir, el programa que ahora mismo estás utilizando para ver esto.
Todas las codificaciones de efectos en el texto que forman el lenguaje HTML no son más que instrucciones para el visualizador. Partiendo de esto, se entiende el porqué no se ve lo mismo con todos los visualizadores. Depende de cómo estén diseñados y para qué versión de lenguaje estén diseñados.
Actualmente existen multitud de ellos, aunque los más conocidos son el Internet Explorer de Microsoft (en lo sucesivo IE), el Netscape Navigator de Netscape (en lo sucesivo Netscape), o el Mozilla Firefox (que en realidad es el nuevo Netscape), y sin olvidar el navegador Opera, que tiene fama de ser el que más respeta los estándares, cosa muy de agradecer en estos tiempos.
Todo lo que se dice en esta guía funciona correctamente con Netscape, Opera o Firefox, casi todo con el IE. Algunas cosas puede que no se vean bien dependiendo del navegador utilizado, sobre todo si son versiones antiguas.
Si se está conectado a Internet, con un navegador, además de ver documentos HTML se puede recibir y enviar correo electrónico, recibir y enviar NEWS (noticias), visitar los servidores GOPHER (servidores de ficheros ya desaparecidos), y acceder a servidores FTP (más servidores de ficheros) tanto en entrada como en salida, todo ello con el mismo programa. También, como no, se pueden imprimir los documentos visualizados. Casi todos suelen ser "WYSWYG", es decir, que lo impreso es exactamente como lo ves en pantalla...Siempre que tu impresora esté de acuerdo, claro.
La idea es sencilla: sólo tienes que crear un documento con tu editor preferido (como documento entenderemos el conjunto de ficheros, tanto de texto como de imágenes, que forman las distintas páginas), guardarlo con la extensión .htm o .html, abrirlo con tu navegador preferido, y ya tienes un hipertexto en marcha. Las páginas o documentos creados pueden residir en el disco duro de tu ordenador personal, en un disquete, en un CD-ROM, o estar a varios miles de kilómetros en otro ordenador llamado servidor web o servidor http, que es el protocolo utilizado. Si es así, entonces te estarás moviendo por la WWW (World Wide Web) que es como se ha dado en llamar a este tipo de servicios de Internet.
Así pues, en esencia, una página escrita en HTML no es más que texto normal, escrito con cualquier editor, y al que, cuando se le quiere dar algun aspecto especial, como por ejemplo el tamaño de la letra, habrá que acompañar de ciertos códigos para indicar el efecto deseado. A estos códigos se les llama elementos del lenguaje.
Pero no hay que olvidar que al fin y al cabo no hablamos más que de texto. Simple y llano texto. Por lo tanto, para montajes sencillos, en los que no se requiera ningún efecto especial, nos podemos olvidar hasta del mismísimo HTML. El visualizador nos presentará perfectamente cualquier página ".txt" generada por cualquier editor, y los links entre documentos sólo requieren un simple y sencillo comando. Y aún así podremos conseguir el tipo y tamaño de letra y colores de texto y fondo que queramos, simplemente configurando el visualizador.
Como ya habrás deducido, lo primero es crear las páginas en tu máquina, es decir, en local, y eso ya te permite navegar por tu documento, simplemente abriendo las páginas creadas con tu navegador preferido. Si lo que quieres es ponerlas en Internet (algunos a eso le llaman "colgarlas" en Internet), lo siguiente es conseguir una cuenta y espacio en disco en algun proveedor de servicios internet (ISP -Internet Service Provider-), si no tienes tu propio servidor, claro. Una vez conseguido el espacio en servidor, hay que enviar los ficheros que contienen tus páginas a ese servidor. Para ello puedes utilizar la página que habitualmente proporcionan los ISP para "subir" tus ficheros desde tu máquina, o bien utilizar algun programa de FTP, configurándolo según las instrucciones del ISP. Suele ser más sencillo utilizar las páginas proporcionadas por los ISP.
Recuerda que dependiendo del sistema operativo que tenga el servidor, los nombres de los ficheros deben atenerse a ciertas convenciones. Si el servidor utiliza una plataforma UNIX o LINUX (la mayoría de ellos) los nombres no pueden tener espacios en blanco, y además se tienen en cuenta las mayúsculas. No es lo mismo Index.html que index.html. Otra cosa importante es que nunca utilices palabras con acentos o caracteres especiales, como eñes, cedillas, etc. para dar nombre a los ficheros. Si el servidor utiliza sistemas Windows esto carece de importancia, pero hay que tener en cuenta que tus páginas, antes de llegar al cliente, tendrán que pasar por muchos nodos enrutadores que generalmente son máquinas UNIX. Otra cosa que hay que tener en cuenta, es el nombre por defecto de la primera página de tu documento. Casi todos los servidores basados en UNIX o LINUX consideran como primera página cualquier fichero llamado index.html. Si no existe este archivo, o el que establezca el administrador del sistema, es necesario que el usuario escriba el nombre de la primera página del documento que desea visitar. Por ejemplo, si no utilizas el nombre incial que por defecto admita tu servidor, la dirección se tiene que escribir completa:
http://mi_servidor/mi_usuario/mi_pagina_inicial.htm
Si utilizas como nombre de la primera página el aceptado por el servidor, solamente habría que escribir hasta el directorio:
http://mi_servidor/mi_usuario/
Y si tienes la suerte de disponer de tu propio servidor, solamente se precisa el nombre del servidor:
http://mi_servidor/
Si estás diseñando tu documento y solamente quieres ver tu trabajo en local, los navegadores funcionan igual que cualquier otro programa de Windows, y con la opción "Archivo/Abrir" de tu navegador preferido puedes ver cualquier fichero escrito en HTML. En ese caso, la ruta será de este estilo:
file:///C:/mi_web_local/mi_pagina.htm
_________________________________________________________________________________________
_________________________________________________________________________________________
Introducción al HTML
Elementos en un documento HTML
En esta guía, a las instrucciones que forman el lenguaje HTML les llamaremos elementos. Otros autores también las denominan "TAGS", o "ETIQUETAS". La notación de los elementos consiste en los símbolos < y > que encierran dentro una instrucción.
Los elementos pueden ser llenos o vacíos.
Elementos llenos
Se forman escribiendo la instrucción correspondiente seguida del texto al que se quiere aplicar la instrucción y se termina repitiendo la instrucción pero con una barra inclinada inmediatamente antes de la misma.
Por ejemplo, el elemento H1 que sirve para dar el máximo tamaño al texto, se escribirá:
<H1> Texto de prueba </H1>.
y este sería el resultado:
Texto de prueba
Si olvidas poner </H1> todo el resto de la página tendrá el mismo tamaño grande.
Elementos vacíos
Los elementos vacíos se escriben como los llenos, pero no es necesario poner la instrucción repetida al final con una barra. Esto se debe a que estos elementos no producen un efecto sobre el texto. Generalmente se utilizan para separar bloques de texto, y por tanto no es necesario indicar su fin. Empiezan y terminan en el mismo punto.
Por ejemplo, el elemento <HR> que sirve para dibujar una linea horizontal en la pantalla, se escribirá:
<HR>
Y este sería el resultado:
Elementos con argumento
Algunos elementos se escriben con argumento. Es como pasarle parámetros a la instrucción, y se llaman atributos del elemento.
Por ejemplo, el elemento <A> que sirve para hacer un link (enlace) con otro documento o con otra página del actual, se escribirá:
<A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba </A>.
Este es un elemento lleno donde al atributo HREF se le asigna el valor que aparece entre comillas: "http://www.miservidor.es/mifichero.htm". El texto al que afecta este elemento es Link de prueba y realiza un link con el fichero mifichero.htm que está en el servidor www.miservidor.es.
Los elementos pueden escribirse tanto en mayúsculas como en minúsculas. Puede ser preferible la primera opción ya que aporta claridad al documento fuente, y eso se agradece a la hora de hacer correcciones, pero CUIDADO, el valor de algunos atributos hay que escribirlos EXACTAMENTE como deban ser. En el ejemplo anterior no funcionaría el link si escribiéramos www.miservidor.es en mayúsculas, eso es un nombre de máquina y sería interpretado como OTRA máquina.
Los elementos pueden anidarse unos con otros, teniendo cuidado de poner los cierres en el lugar adecuado. Por ejemplo, el elemento <H1> combinado con <I> que sirve para generar texto en itálica, se escribirá:
<H1><I>Texto de prueba </I></H1>.
y este sería el resultado:
Texto de prueba
Los elementos, en HTML, los puedes escribir tanto en mayúsculas como en minúsculas. Funciona igual <P> que <p>. A la hora de revisar el código escrito, resulta más claro si se escribieron en mayúsculas, pero si en el futuro hay que convertir la página a otro estándar, como el XHTML, no se admitirán las mayúsculas. Si no piensas migrar a otras tecnologías, hazlo como más cómodo te resulte.
Estructura de una página HTML
Las páginas HTML están estructuradas en dos partes diferenciadas: la
HEAD (cabecera) y el
BODY (cuerpo).
Ejemplo de página
Si escribes:
<!Tipo de documento>
<HTML>
<HEAD>
<TITLE> Documento de prueba </TITLE>
</HEAD>
<!-- Esto es un comentario-->
<BODY>
<H1> Esto es una "demo" de documento HTML </H1>
Esto es el más sencillo de los documentos HTML.
</BODY>
</HTML>
El
tipo de documento no es obligatorio a efectos prácticos, es decir que la página se verá igual tanto si lo escribes como si no. Sólo sirve como identificación del tipo de contenido del fichero a los efectos de cumplir las especificaciones de estándar recomendadas por el consorcio W3C, que es el organismo que regula el lenguaje. Por ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://w3.org/TR/REC-html40/loose.dtd">
Indica que cumple el estándar HTML 4.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://w3.org/TR/REC-html40/strict.dtd">
Significa que cumple el estándar HTML 4.0 y, además, no contiene elementos desaconsejables.
Y esta es una definición de marcos que cumple el estándar HTML 4.0:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://w3.org/TR/REC-html40/frameset.dtd">
En el HTML 4.0 se consideran desaconsejables aquellos elementos que, aún siendo soportados, han sido sustituidos por otros y, por ello, es posible que sean eliminados en el futuro. En cualquier caso, el que un elemento escrito en tus páginas se vea o no, dependerá siempre del navegador utilizado y/o de su versión, no de lo que diga el estándar.
Puedes ver el aspecto real del ejemplo de página pulsando aquí.
Para escribir comentarios en la página (que sólo se ven en el texto fuente, pero no en el visualizador) se utilizará el elemento
<!-- --> cuidado: el que no se vea de forma normal en el navegador, no significa que no pueda verse el código fuente. Nunca escribas comentarios con claves de acceso o datos confidenciales.
Esquema de tipos de un documento HTML
Cuando un visualizador recibe un fichero, antes de mostrarlo necesita saber el tipo de contenido que éste tiene, a fin de procesarlo adecuadamente. No es lo mismo recibir un documento de texto que una fotografía en formato GIF, o un vídeo en formato MPG, o si lo que estamos intentando es transferir un fichero.
En cada caso, el visualizador pondrá en juego distintas habilidades, de las muchas que posee.
Si el fichero procede de un servidor
http remoto, (es decir un servidor web;
http es el nombre del protocolo que utilizará el servicio invocado), éste se encargará de decirle al visualizador cuanto necesite saber, pero si lo que hay que procesar es un fichero local, la única forma de saberlo es por la
extensión del fichero.
La extensión de un fichero son las tres o cuatro letras (depende del sistema operativo con el que se trabaje) que hay después del nombre del fichero y que están separadas del mismo por un punto.
Por ejemplo, esta página se llama estruc.htm. Las tres letras que hay después del punto (htm) son la extensión del fichero. Las otras, las que están delante del punto, son el nombre del fichero.
Las extensiones de 4 o más letras son típicas de sistemas operativos como UNIX o LINUX y las de 3 o menos de Windows, que ha mantenido esta costumbre por herencia de los tiempos del DOS, ya que puede trabajar perfectamente con extensiones de más de 3 letras. Por ejemplo, la extensión .html funciona en Windows igual que la .htm
Estas son algunas de las extensiones stándard más comunes y sus contenidos. La primera de ellas suele utilizarse en sistemas UNIX-LINUX y la segunda en Windows:
.html o .htm - Documento HTML. Contine texto e instrucciones HTML que serán interpretadas.
.text o .txt - Contiene texto plano. El visualizador presentará todo el fichero como si fuera un único bloque de texto y no interpretará ninguna instrucción HTML que pudiera llevar. Esto lo hará con cualquier fichero que lleve una extensión desconocida o simplemente no lleve ninguna.
.gif - Contiene un fichero de imagen en formato GIF.
.npg - Contiene un fichero de imagen en formato NPG.
.xbm - Contiene un fichero de imagen en formato X-Bitmap (blanco y negro).
.xpm - Contiene un fichero de imagen en formato X-Pixmap (color).
.jpeg o .jpg - Contiene un fichero de imagen en formato codificado jpeg.
.mpeg o .mpg - Contiene un fichero de imagen de video o cine (en movimiento).
.au - Contiene un fichero de audio (sonido) codificado en aiff-encoded.
.mid - Contiene un fichero de audio (sonido) generado con secuenciadores midi típicos de Windows.
.avi - Contiene un fichero con video y sonido típico de Windows.
.mp3 - Contiene un fichero con sonido típico de Windows y otros sistemas.
.exe - Contiene un fichero binario ejecutable en DOS o Windows.
.hqx - Contiene un fichero binario ejecutable en Macintosh.
.Z o .zip - Contiene un (o varios) fichero/s comprimido/s de cualquier clase. Para poder utilizarlo hay que indicarle al visualizador una herramienta de compresión-descompresión.
.pdf - Contiene un fichero de imagen de cualquier documento generado con Acrobat Writer.
.doc - Contiene un fichero de documento generado por Microsoft Word
En el entorno web se utilizan los
MIME types (
Multipurpose
Internet
Mail
Extension) para definir el tipo de un fichero transferido. El visualizador determina desde el MIME type cómo hay que tratar cada fichero.
Los visualizadores tienen una configuración de los mapas de tipos aceptables, e instrucciones de cómo proceder en cada caso. Algunos tipos son tratados directamente por el propio visualizador (p.ej.: htm, gif, txt) mientras que para otros necesitan de una herramienta auxiliar adecuada, que hay que indicar al visualizador, para que sea llamada en el momento preciso (p.ej.: zip, mpg, avi, pdf).
Ahora que ya sabes qué son las extensiones de fichero, es el momento de aclarar una cuestión importante:
Los documentos HTML los puedes escribir con lo que quieras... Siempre que los salves en modo Solo Texto. Es decir, que si utilizas, por ejemplo, Word de Windows o de MAC, por defecto estos programas salvan en formato Word. Y aunque luego los renombres como documentos .htm o .html, el formato interno sigue siendo Word.
Tampoco vale dejarlos con la extensión .txt que les dejan la mayoría de editores al salvarlos en modo Solo Texto. No serían interpretados correctamente. Por lo tanto si tienen extensión .txt (y por supuesto son .txt), entonces puedes renombrarlos a .htm, o bien en el momento de guardarlos en formato Solo Texto no dejar la extensión por defecto .txt y darle ya directamente la extensión .htm.
Algunos procesadores de texto ya incluyen entre sus tipos el .htm. Si es así, lo que hacen es eliminar la codificación propia, y convertirla a elementos de HTML. Por ejemplo, si tienes un texto en itálica, automáticamente es convertido al elemento <I>, etc.. El problema de los editores avanzados de texto y de la mayoría de programas asistentes para escribir HTML es que generan un código bastante "sucio", difícil de corregir o modificar después. No es que no funcione, pero como el programa no sabe cual es la finalidad del texto escrito, por defecto le pone todo lo que sabe por si acaso, aplicando el dicho de "mejor que sobre..."
__________________________________________________________________________________
__________________________________________________________________________________
Cabecera (HEAD) de un documento HTML
La HEAD es la primera de las dos partes en que se estructura un documento HTML.
En la HEAD reside información acerca del documento, y generalmente no se ve cuando se navega por él. En la HEAD se pone el elemento lleno <TITLE> que es una breve descripción que identifica la página. Es lo que el navegador se guarda en el "Bookmarks" (libro de marcas o libro de direcciones), con lo que crea la lista que aparece en la orden "Go" de la barra de órdenes, lo que aparece en la esquina superior izquierda cuando se imprime el documento, y lo que aparece en el marco de la ventana del navegador. También lo guarda en su caché, y servirá para mostrar la página, cuando sea llamada otra vez, sin necesidad de conectarse de nuevo al servidor de origen.
No hay que confundir el elemento <TITLE> con el nombre del fichero.
Por ejemplo, esta página está contenida en un fichero llamado head.htm y el texto de su <TITLE> es: Head de un documento. Se escibirá asi:
<HEAD>
<TITLE>Head de un documento </TITLE>
</HEAD>
Dentro de la HEAD puede utilizarse otro elemento: META. Por ejemplo, si se escribe:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="10">
</HEAD>
Esto hace que el visualizador vuelva a cargar la página activa al cabo de 10 segundos. También puede hacerse a un servidor. Así:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://miservidor/mipagina.htm">
</HEAD>
Utiliza esto con precaución. Si sabes que el contenido de la página no va a cambiar, es inútil hacer esto, y si lo haces contra un servidor, puedes sobrecargarlo. Este elemento, sólo tendrá utilidad en casos muy especiales.
Otra opción es forzar la expiración inmediata en la caché del navegador de la página recibida, lo que provoca que la página sea solicitada de nuevo al servidor cada vez, en lugar de cargar la copia que ya existe en la máquina del cliente. Se escribe así:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Expires" CONTENT="Tue, 20 Aug 1996 14:25:27 GMT">
</HEAD>
Si se pone una fecha ya pasada, como la que hay en el ejemplo, el navegador elimina inmediatamente de la caché la página recibida, y si no es pasada, lo hará en el momento indicado por la misma. También se le puede dar valor cero a la fecha de expiración:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Expires" CONTENT="0">
</HEAD>
Otra opción es impedir directamente que el navegador guarde en caché la página. Esto es especialmente útil cuando se trabaja con formularios que consultan datos dinámicos:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Expires" CONTENT="no-cache">
</HEAD>
Si tienes interés en que tus páginas aparezcan en los grandes buscadores de Internet, y puedan ser encontradas con facilidad, puedes poner las palabras clave que contiene la página separadas por comas. Por ejemplo:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META NAME="keywords" CONTENT="HTML, internet ">
</HEAD>
Este otro sirve para que los buscadores puedan ofrecer un breve resumen de los contenidos de tu página:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META NAME="description" CONTENT="Manual para escribir HTML.">
</HEAD>
Puedes poner todos los elementos <META> que creas necesarios, pero sin repetirlos.
Habrás notado que se ha utilizado la palabra "caché", y tal vez no sepas a qué se refiere. Todos los navegadores, por defecto, siempre que reciben una página de un servidor se hacen una copia de la misma en el disco de tu máquina. Con esto se pretende que si vuelves a solicitar la misma página, en lugar de pedirla de nuevo al servidor, te mostrará la que tiene guardada en el disco. A esta área del disco donde el navegador va poniendo las páginas visitadas, se le denomina caché. El tamaño de la caché lo puedes modificar desde las opciones de configuración del navegador, e incluso puedes darle tamaño cero, con lo que siempre que veas una página, ésta habrá sido solicitada al servidor independientemente de lo que digan las instrucciones META.
Hay otros elementos que pueden aparecer en la HEAD, como ISINDEX, NEXTID, LINK o BASE, pero son de uso muy especializado y poco corriente, algunos ya en desuso, y ninguno obligatorio (<TITLE> sí lo es).
