Introducción a Dreamweaver 3

HTML es un lenguaje para el marcado de textos e hipertextos. Puede que esta definici�n sea en principio algo confusa, pero veremos que no es as�. Realmente este tipo de lenguajes ha sido y sigue siendo de uso com�n en muchos entornos. �Alguna vez ha entregado un examen para su correcci�n por parte del profesor?, pues bien, el examen una vez corregido y devuelto est� lleno de "marcas" o correcciones que le indican donde se ha equivocado y cual deber�a ser la respuesta correcta. Pues HTML no es algo muy distinto de esto.

HTML permite "marcar" un documento para que el navegador que lo visualice sepa como tiene que mostrarlo. Para ello, hace uso de las "marcas" o "tags" que formatearan el documento. Por ejemplo, para que el navegador mostrar� un texto en negrita, habr�a que indicarle al navegador que ese texto ha de formatearse en negrita. Esto se conseguir�a en HTML encerrando el texto en cuesti�n entre las marcas correspondientes.

Ejemplo:

<B> Este texto se mostrar� en negrita </B>

Como vemos en el ejemplo anterior, una marca o "tag", no es m�s que una etiqueta especial que el navegador interpreta y no muestra en el documento final, que le indica como debe formatearse el texto inclu�do entre el inicio del tag y el final del tag.

Como el HTML va incluido en el mismo documento, junto con el texto a formatear, hay que seguir unas normas sint�cticas para que el navegador sepa que debe ser interpretado como "tag" y que debe ser texto formateado con los "tags". Toda marca de HTML ha de ir encerrada entre los s�mbolos "< >" (menor que, mayor que). La mayor�a de las marcas deben tener una marca de apertura y otra de cierre. La marca de cierre es igual a la de apertura con la excepci�n de que el "tag" ha de ir precedido por el s�mbolo "/". En nuestro ejemplo anterior, el "tag" de apertura es "" mientras que el "tag" de cierre es "". Entre el "tag" de apertura y el "tag" de cierre va inclu�do el texto que ser� formateado por el navegador para mostrarlo en negrita en este caso.

No todas los "tags" de HTML requieren la marca de cierre, aunque es bueno acostumbrarse a inclu�rlo en todos las marcas de HTML. Estas marcas de HTML que no requieren "tag" de cierre se denominan marcas abiertas.

Ahora que ya sabemos en que consiste el HTML, teniendo conocimiento de los diferentes "tags" de HTML podr�amos formatear cualquier documento de texto para que fuera formateado por un navegador. La lista de los tags de HTML es algo que no veremos en este curso, aunque cuando sea preciso incluiremos las explicaciones adecuadas que faciliten la comprensi�n de determinados comandos de Dreamweaver. Para una referencia sobre los "tags" de HTML inclu�dos en el est�ndar HTML 4.0, puede visitar cualquiera de los siguientes enlaces:

Para que el navegador interprete un documento como documento HTML, es necesario que este documento cumpla una serie de requisistos. En primer lugar, lo que le indica al navegador el tipo de documento que se va a recibir es la extensi�n del mismo. Todo documento HTML tiene que tener como extensi�n .html o .htm. Este primera condici�n es indispensable para que el navegador interprete el documento de la manera adecuada. En internet todos los ficheros han de tener una extensi�n indicativa de que tipo de fichero es el que se trata de mostrar. Esta extensi�n le indica al navegador que tipo de fichero es el que recibe (tipos MIME) y en consecuencia como debe tratarlo.

HTML es un lenguaje derivado del SGML. En resumen, SGML es un lenguaje que permite definir otros lenguajes especificando la estructura de un documento permitido. Esta especificaci�n de un documento permitido en ese nuevo lenguaje creado a partir de SGML es lo que se llama DTD o "definici�n del tipo de documento". En esta especificaci�n se indica la sintaxis que los distintos elementos de un documento podr�an utilizar. El World Wide Web Consortium (W3C) es una organizaci�n que intenta estandarizar distintas tecnolog�as relacionadas con la web, entre las que se encuentra el HTML. Para conseguir que HTML sea un est�ndar, todas los elementos del lenguaje HTML deben estar perfectamente definidos en la DTD de dicho lenguaje. Una vez dicho esto, todo documento HTML deber�a comenzar con la orden <!DOCTYPE> que es la orden que indicar�a al navegador cual es la DTD a la que se ajusta el documento. Por desgracia, esta orden no se suele utilizar ya que hay muchas personas que ignoran la relaci�n entre HTML y SGML. Por otro lado, para la mayor�a de los navegadores actuales no tiene mayor importancia que esta orden aparezca o no, ya que interpretaran el documento como HTML a pesar de la ausencia de esta.

A continuaci�n, todo documento HTML incluira el "tag" , que indica el comienzo del HTML y el tag de cierre . Dentro de estas dos marcas, se incluir� todo el c�d�go HTML necesario para la representaci�n del documento.

Finalmente, todo documento HTML tendr� 2 partes claramente diferenciadas:

La cabecera, en la que se incluir� informaci�n sobre el documento como puede ser el t�tulo. En esta cabecera del documento se a�ade la metainformaci�n correspondiente al documento. Esta metainformaci�n es informaci�n sobre el documento en s� y puede tener gran importancia. Por ejemplo, los buscadores como "altavista", "Yahoo" o "Lycos" indexan los documentos en sus bases de datos, en parte gracias a la metainformaci�n que hay en la cabecera de sus documentos. Por tanto, es frecuente que en la cabecera del documento junto al t�tulo del mismo haya tambi�n otra informaci�n como pueden ser las "palabras claves" del documento, una descripci�n del mismo, informaci�n sobre el autor, etc...

Debido a que la cabecera es lo primero que se carga en memoria cuando se lee un documento HTML, en ocasiones este es el sitio ideal para incluir funciones de lenguajes de "scripting", como Javascript, para su posterior ejecuci�n desde el documento. El "tag" que marca el comienzo de la cabezera es , y el final de la misma

El cuerpo, en el que se incluir�a toda la informaci�n que ser� mostrada por el navegador. El "tag" que marca el comienzo del cuerpo del documento es y el final del mismo .

A continuaci�n tenemos un fichero HTML bien definido:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML>

<HEAD>
<TITLE> Titulo del documento </TITLE>
</HEAD>

<BODY>
<P> Este es un parrafo que ser� mostrado en el navegador </P>
<B> Este texto ser� mostrado en negrita <I> y este en negrita e it�lica </I></B>
</BODY>

</HTML>

Como ver�, en principio el formateado de un documento HTML no es tan complicado. Ciertamente no lo es, aunque supone la observaci�n y conocimiento de ciertas normas y "tags" que hacen tediosa su labor, especialmente para un dise�ador preocupado por el aspecto est�tico de una p�gina. Para evitar esta manera tan improductiva de dise�ar p�ginas web, surgieron los editores de HTML, como es el caso de Dreamweaver. Es importante que tengamos en cuenta que detr�s de todo editor de p�ginas HTML se esconde un lenguaje de marcada de textos tan simple como HTML. Un conocimiento de este lenguaje facilitar� la comprensi�n de ciertas limitaciones a la hora de componer con Dreamweaver, que son propias al lenguaje HTML que es el que finalmente formatear� la p�gina.

.�Enlaces ("links") y tipos de enlaces

Ya hemos visto como el HTML se puede utilizar para la marcaci�n de documentos, ahora bien, si el HTML no tuviera m�s capacidad que esta no habr�a tenido el avance tan espectacular que ha tenido en estos a�os, ni ser�a la soluci�n ideal para presentar documentos navegables en l�nea. Lo que hace del HTML el lenguaje ideal para la presentaci�n de documentos en la web son dos cosas:

Primeramente, lo que hay en todo documento de texto es sencilla y puramente TEXTO. De esta manera cualquier ordenador con el software adecuado puede interpretar, abrir y modificar este tipo de documentos. Por tanto los documentos HTML son multiplataforma, aspecto important�simo para la distribuci�n de documentos en una red compuesta de multitud de ordenadores y plataformas distintas como es Internet.

En segundo lugar, y tal vez como aspecto m�s importante del HTML, esta la capacidad de este lenguaje para interrelacionar distintos documentos, de manera que desde cualquier punto de un documento podamos acceder a cualquier otro punto de otro documento. Esta funcionalidad es lo que se conoce como hipertexto. A trav�s de los hiperenlaces, "links" o simplemente enlaces que se definan en un documento, podemos saltar a otro documento en el que se amplie la informaci�n que estamos viendo. De esta manera, toda la informaci�n que se podr�a presentar de manera aislada en distintos documentos, se puede aunar para que esa informaci�n sea m�s facilmente accesible.

Para entender mejor lo que es un enlace pongamos un ejemplo real:

Suponga que tiene un documento que presenta la obra literaria de una autor. En ese documento se relacionarian todos los libros escritos por el autor, asi como los distintos a�os de edici�n de las obras y otra informaci�n que pudiera resultar de inter�s. En un momento determinado, puede que alguien quiera profundizar m�s en una determinada obra de dicho autor. Esa informaci�n detallada de esa obra concreta podr�a estar en un segundo documento. Bien, podr�amos enlazar el t�tulo de la obra en cuesti�n al documento que presenta informaci�n m�s detallada de la misma, de manera que la persona que tuviera inter�s en ampliar dicha informaci�n pudiera acceder, mediante el enlace creado, a esa segunda p�gina. Eso ser�a un hiperenlace y cada uno de los documentos ser�an documentos hipertextos.

Para enlazar a cualquier documento que haya en la red, bastar�a con describir correctamente su URL.

.��Que es una URL?

Las siglas URL significan "localizaci�n de recursos uniforme", o lo que vendr�a a ser lo mismo el "nombre propio" del documento al que nos queremos referir. Para entender esto algo mejor, tenemos que entender cuales son los pasos necesarios para encontrar un documento en la red. En primer lugar, habr�a que acceder a la maquina concreta dentro de la red, donde esta almacenado ese documento. A continuaci�n, habr�a que localizar el directorio exacto donde esta ubicado ese documento dentro de la maquina. Posteriormente habr�a que citar el nombre del documento en cuesti�n y como se puede recuperar. Con este orden de las cosas, una URL ser�a el camino completo hasta encontrar el documento m�s el protocolo que ser� utilizado para su recuperaci�n.

Una URL vendr�a a ser algo as�:

protocolo://maquina/directorio/fichero

Puede que esto resulte algo poco familiar, pero en realidad es bastante familiar para cualquier persona que haya navegado al menos una vez. Cuando introducimos la direcci�n de nuestra p�gina favorita en el navegador, en realidad estamos escribiendo su URL.

Por ejemplo:

http://www.ciberaula.com/curso_dreamweaver/index.html

En este ejemplo, el protocolo ser�a HTTP. Este es el protocolo est�ndar en la web, aunque existen otros como FTP, Gopher, Wais, etc. A continuaci�n vendr�a la descripci�n de la maquina en la que se encuentra el documento solicitado. En este caso ese documento esta en la maquina asociada al dominio "www.ciberaula.com". Ahora que estamos dentro de la maquina en cuesti�n, tenemos que especificar el directorio en el que se encuentra el recurso, en nuestro ejemplo en el directorio "curso_dreamweaver". Finalmente tenemos el nombre del recurso, en nuestro ejemplo "index.html". Y eso es todo. De esta manera, todo recurso en Internet tienen una URL �nica, de manera que no puede haber duplicaciones o localizaciones ambiguas.

El "tag" que permite enlazar documentos o recursos en HTML, es el "tag" <A>. A continuaci�n tenemos un ejemplo de lo que ser�a un enlace HTML:

<A HREF="http://www.altavista.com"> Haz click aqui para ir a altavista </A>.

Ahora que hemos visto como enlazar documentos como describir la localizaci�n de esos documentos, es el momento de entender que existen dos maneras de referirse a la URL de un documento:

Absoluta: Cuando se hace referencia a la URL absoluta de un documento o recurso, se describe el camino en su totalidad hasta ese recurso, incluyendo el protocolo, maquina, directorio y nombre del recurso. Esa URL ser� la misma desde cualquier posici�n de la red desde donde sea referida, o lo que es lo mismo, esa URL ir� siempre al mismo recurso, sea llamada desde donde sea llamada.

Relativa: Cuando se hace referencia a la URL relativa de un documento o recurso, se describe el camino parcial que hay que seguir hasta ese recurso, tomando como referencia el documento actual. Es decir, solo habr�a que describir el camino que va desde el documento actual hasta ese otro recurso. Las URL relativas pueden apuntar a un recurso distinto, dependiendo desde donde sean llamadas.

Para entenderlo mejor, pongamos un ejemplo:

Tenemos un documento que se llama "documento1.htm" en el directorio "curso_dreamweaver", dentro de la maquina asociada al dominio "www.ciberaula.com". Tenemos otro documento llamado "documento2.htm", en el directorio "curso_dreamweaver/directorio2" dentro de la misma maquina. La manera de referirnos al documento2.htm, desde el documento1.htm, ser�a:

http://www.ciberaula.com/curso_dreamweaver/documento2/documento2.htm (URL absoluta)
documento2/documento2.htm (URL relativa)

Como ver�, en la URL relativa se ha eliminado la primera parte de la URL, ya que coincide con la URL del documento actual, por tanto solo es necesario describir la parte de la URL que falta hasta llegar al segundo documento. Estas son las dos maneras de describir la URL de un documento. Es todo bastante l�gico. �no?

A la hora de describir una URL de manera relativa, solo es necesario utilizar la misma nomenclatura que se utiliza para navegar por distintos directorios en una maquina local. el s�mbolo "/" es un directorio. El s�mbolo "../" es el directorio superior al actual.

Los siguientes son ejemplos de URL relativas:

/directorio2/index.htm
(documento index.htm, en el directorio "directorio2.htm" por debajo del directorio actual)
../index.htm
(documento index.htm, en el directorio inmediatamente superior al directorio actual)
index.htm
(documento index.htm, en el mismo directorio que se encuentra el documento actual)
../../index.htm
(documento index.htm, 2 directorios por encima del directorio actual)
../directorio3/index.htm
(documento index.htm, en el directorio llamado "directorio" que es dependiente del directorio superior al actual)

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
ARTÍCULO ANTERIOR

SIGUIENTE ARTÍCULO