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

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
ARTÍCULO ANTERIOR

¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.