• Documentos HTML con texto
• Definiendo las propiedades de un documento
• Insertando elementos en la cabecera del documento
• Insertando Texto
• Insertando caracteres especiales

Documentos HTML con texto

 Definiendo las propiedades de un documento

En este segundo tema, veremos como crear documentos y editarlos. Empezaremos creando documentos con el elemento más simple y a la vez más importante que puede tener un documento HTML: texto.

Para crear un documento nuevo, primeramente hemos de asegurarnos que el sitio activo es el sitio en el que queremos trabajar, si no es así, vayamos a la ventana "site files" donde podremos escoger el sitio activo. Para ello, utiliza menú window > site files.

Una vez establecido el sitio activo, creemos nuestro primer documento HTML en Dreamweaver. Para hacer esto usamos menú File > New. Un documento en blanco aparecerá en el área de trabajo. Este documento aún no tiene nombre, ya que no lo hemos guardado a disco todavía, ni tiene título. Lo único que Dreamweaver ha hecho es definir el mínimo documento HTML que se puede generar, es decir, aunque nosotros no lo veamos Dreamweaver ha creado los tags HTML necesarios para definir un documento HTML: Cabecera (Head) y Cuerpo (Body), tal como vimos que se debía hacer en el anterior capítulo. Lógicamente, en el cuerpo del documento aún no hay nada.

El aspecto que tiene un documento nuevo, cuando aún no hemos modificado ni añadido nada, viene a ser como el que mostramos en la siguiente imagen:

En esta ventana del documento, hay 3 zonas importantes, que vamos a tratar de describir a continuación.

En primer lugar, en la parte superior de la ventana, tenemos una información interesante: El título HTML que tiene el documento y el nombre con el que el documento se ha guardado en el disco, que aparece entre paréntesis. La diferencia entre ambos es clara, pero vamos a explicarla convenientemente. Todo documento HTML puede tener un título, este título es mostrado normalmente por los navegadores en la parte superior de la ventana, cuando son visualizados. Este título además es un elemento que será utilizado por algunos buscadores para indexar nuestro documento, por tanto, es conveniente que el título HTML del documento sea descriptivo.

Por otro lado, el nombre del documento, es en sí el nombre físico con el que será almacenado el documento en el disco duro. Este nombre será el que se utilice para referirnos al documento desde cualquier enlace HTML. Todo nombre de documento o fichero que vaya a ser publicado en Internet, debe cumplir algunos requisitos, que veremos posteriormente.

En la esquina inferior derecha de la ventana del documento, nos encontramos varias cosas. Tenemos el Mini Launcher al que hacíamos mención en el anterior capítulo. Desde él podemos abrir distintas ventanas y paletas de Dreamweaver, usando los botones que aparecen. Los elementos que aparezcan en este Mini Launcher, pueden variar según se hayan ajustado las preferencias del programa. Como ya vimos, podemos elegir que elementos se mostrarán y cuales no. Después, se nos muestra una información sobre el tamaño en Ks actual del documento, y el tiempo que se tardaría en cargar en condiciones normales. Este cálculo se hace en función a la velocidad de la conexión que hayamos establecido por defecto en las preferencias del programa. Esta información puede ser de utilidad para optimizar los documentos y controlar el exceso de tamaño de nuestros documentos. Por último, encontramos el tamaño o resolución en pixels que tiene actualmente la ventana en la que estamos diseñando nuestro documento. Este elemento puede ser de gran ayuda, ya que simula con más o menos precisión el tamaño real que tendrá el documento al ser visualizado en un navegador. Podemos escoger cualquiera de las configuraciones definidas en las preferencias del programa, utilizando el menú desplegable que aparece cuando hacemos click sobre la pequeña flechita negra. De esta manera, podemos tener control visual sobre la resolución a la que estamos diseñando. Como norma, es bueno utilizar un tamaño de 800 x 600, que actualmente se puede considerar el mínimo común.

Bueno, ahora que nos hemos familiarizado con la ventana del documento, empecemos a definirlo. Lo primero que haremos será definir las propiedades de nuestro documento, tales como titular, color o imagen de fondo, etc.. Para ello, utilizamos menú Modify > Page Properties...

Encontraremos una ventana similar a la que vemos arriba, en la que podemos ajustar las propiedades de nuestro documento activo. Veamos todas las posibilidades que tenemos:

• Title: En este campo podemos añadir el titular HTML que queremos para el documento.
• Background Image: En caso de que tengamos una imagen de fondo para nuestro documento, en este campo insertarÌamos la URL del fichero en cuestión. Si no recordamos la URL exacta, podemos utilizar el botón Choose..., para navegar por nuestro disco duro hasta seleccionar el fichero de la imagen que queremos. Dreamweaver calculará entonces la URL.

  TRUCO: Una imagen de fondo en un documento HTML no tiene porque ser excesivamente grande, podemos utilizar una imagen pequeña, y después esa imagen se duplicará tantas veces como sea necesario para cubrir el tamaño de la ventana cuando se visualice en un navegador. De esta forma, podemos considerar una imagen de fondo como un patrón de relleno. Es importante que tengamos en cuenta esto a la hora de definir nuestra imagen de fondo, para que los bordes de dicha imagen no se noten excesivamente al unirse unas con otras. En ese sentido, un buen truco es definir una pequeña imagen que sea simétrica, de manera que el efecto visual de continuación se cumpla.

A continuación, encontramos una serie de controles que nos permiten ajustar los colores de distintos elementos del documento. Así podemos ajustar los colores para los siguientes:

• Background: Ajusta el color de fondo del documento.
• Text: Ajusta el color por defecto del texto en nuestro documento. Este color será el que tenga todo el texto de nuestro documento, excepto aquellos que se modifiquen particularmente, como veremos posteriormente.
• Links: Los enlaces de un documento HTML se muestran en un color distinto, para que destaquen sobre el resto del documento. Normalmente este color es azul, aunque podemos utilizar este control para establecer otro color para los enlaces de nuestro documento.
• Visited Links: Establece el color por defecto para los enlaces de nuestra página cuando han sido visitados.
• Active Links: establece el color por defecto para los enlaces de nuestra página cuando son pulsados por el usuario.
• Márgenes: En los siguientes cuatro controles, podemos establecer cuales serán los m·rgenes del documento cuando sea visualizado. Por defecto, estos márgenes son unos 5 pixels, tomando como referencia la esquina superior izquierda del navegador.

  TRUCO: En realidad, solo podemos ajustar el margen izquierdo y superior del documento, siempre con respecto a la esquina superior izquierda. ¿Entonces, porque tenemos 4 controles?. La respuesta es que 2 de esos controlen indican el margen para Netscape y los otros 2 para Explorer. Esto es así, porque estos dos navegadores no siempre funcionan igual. Explorer entenderá los valores para el margen como Left Margin, Top Margin, es decir, el valor en pixels del margen izquierdo y el superior. Por el contrario, para ajustar estos valores en Netscape hemos de usar Margin Width y Margin Height, que viene a ser el margen a lo ancho y el margen a lo alto. Asi que, si queremos mantener el mismo aspecto en los dos navegadores, los valores de Left Margin y Margin Width, y los de Top Margin y Margin Height deben ser idénticos. Dreamweaver creará los parámetros para los dos navegadores, aunque cada uno entenderá el suyo.

• Document Encoding: En esta lista desplegable, podemos elegir el juego de caracteres que usará nuestro documento. El juego normalmente usado en occidente es el Western (Latin 1).
• Tracing Image: Dreamweaver 3.0 ofrece una funcionalidad muy interesante para diseñar páginas web. Ofrece la posibilidad de utilizar una imagen como referencia para diseñar nuestro documento. Es algo parecido a calcar una imagen. Es decir, podemos diseñar la apariencia de nuestro documento en otro programa. Después, insertamos esa imagen en Dreamweaver y la utilizamos como referencia para crear nuestro documento HTML. Esta imagen no será visualizada posteriormente por ningún navegador, ni existirá en el código HTML de nuestra página. Es solamente una imagen de referencia que será visible en Dreamweaver. Pues bien, este campo nos permite escoger la imagen de referencia.

  Esta imagen, puede ser más o menos transparente. Este nivel de transparencia lo podemos ajustar en el control inmediatamente por debajo del anterior campo.

Finalmente, nos encontramos información sobre la carpeta donde tenemos nuestro documento, y sobre la carpeta raíz del sitio activo.

 Insertando elementos en la cabecera del documento

Como ya hemos dicho anteriormente, todo documento HTML se compone de dos partes fundamentales: Cabecera y Cuerpo. En este subcapítulo, veremos para que sirve la cabecera y que tipo de información podemos insertar en ella.

La cabecera de un documento HTML tiene como fin fundamental aportar al navegador información relativa al documento, asÌ como información que puede ser útil para el correcto funcionamiento para el resto de los elementos insertados en el cuerpo del documento, aunque esta no se visualiza. La marca HTML que delimita la cabecera de un documento es <HEAD> </HEAD>. Todos los elementos incluidos entre el comienzo de la marca y el final de la marca, se consideran elementos de la cabecera.

Uno de los elementos más habituales que se incluyen en la cabecera de un documento HTML es el título, que viene definido por la marca HTML <TITLE> </TITLE>. Realmente, al añadir un título a nuestro documento HTML utilizando la ventana de propiedades de la página, lo que Dreamweaver hace es modificar la marca HTML en la cabecera del documento.

Pero no solo el título del documento tiene cabida en la cabecera. Por ser una parte que permanece oculta pero que a su vez es leÌda en primer lugar por el navegador, esta es la zona ideal para añadir elementos como información sobre el propio documento (metainformación), o la definición de estilos de HTML dinámicos o la definición de funciones javascript que serán invocadas posteriormente desde el documento.

Lógicamente, existen otros elementos que se pueden añadir a la cabecera, aunque su uso no esta muy extendido, entre otras cosas porque o bien no están soportadas por los navegadores más habituales, o bien no se encuentran reflejadas en el estándar marcado por el W3C.

Ya hemos visto anteriormente como modificar o editar el titular de una página. Veamos ahora las posibilidades que ofrece Dreamweaver para insertar otros elementos de utilidad en la cabecera.

En primer lugar, lo que haremos será visualizar la cabecera del documento, que por defecto permanece oculta. Para ello utilizaremos menú View > Head Content. Al hacer esto, observaremos como la ventana del documento activo se transforma para mostrarnos el contenido de la cabecera en la parte superior de la ventana, como podemos apreciar en la imagen siguiente.

Como vemos, en esta cabecera ya hay alguna información, si pulsamos sobre cualquiera de los elementos que hay en la cabecera, en la paleta de propiedades aparecerán los ajustes del elemento en cuestión. Concretamente en este ejemplo tenemos el titular del documento, y a continuación información descriptiva del tipo de contenido del documento.

Ahora que tenemos la cabecera del documento visible, podemos añadir fácilmente elementos o modificar los existentes. Por ejemplo, para modificar el titular del documento actual, bastaría con seleccionarlo en la cabecera, y a continuación modificar los parámetros en la paleta de propiedades.

Según se muestra en la imagen superior, cambiar el título de un documento utilizando este método no es complicado. Bastaría con modificar el contenido del campo que se muestra para que Dreamweaver actualice automáticamente las marcas de HTML y el documento adopte el nuevo título. De forma parecida podríamos ir modificando los demás elementos.

Veamos como insertar elementos en la cabecera. Primero hemos de decir que no cualquier elemento puede ser insertado en la cabecera. Mas bien son unos pocos los elementos que pueden ser insertados en ella, como hemos explicado anteriormente. Los elementos más comunes que se pueden insertar en una cabecera se encuentran accesibles a través del menú Insert > Head, aunque por comodidad es mejor utilizar la paleta Object > Head.

En esta paleta encontramos los siguientes elementos que se pueden insertar en la cabecera de un documento:

• Meta: Insertaría metainformación del documento. Como ya hemos visto antes esta metainformación puede ser cualquier cosa que se considere relevante o de interés relativo al documento. La marca HTML encargada de esto es <META>, como ya hemos dicho. Esta directiva tiene dos parámetros: un primer parámetro en el que se indica el tipo de información que se quiere dar, y un segundo parámetro en el que se pasa la información en si. Para entenderlo mejor veamos un ejemplo:

  Si quisiéramos introducir información sobre el nombre del autor del documento, tendríamos un primer parámetro que indicaría que vamos a dar información sobre el autor y en un segundo parámetro tendríamos el nombre del mismo, tal como vemos a continuación:

  <META NAME="autor" CONTENT="Oscar Reales">

  Existen algunas metainformaciones que están definidas en el estándar de HTML marcado por el W3C, pero en realidad podemos pasar la información que queramos en esta directiva HTML. De tal forma, podemos incluir el teléfono del autor si quisiéramos Para hacerlo tendríamos un comando como el siguiente:

  <META NAME="teléfono del autor" CONTENT="999 9999 999">

  En fin, no existe limite para el uso de esta directiva, aunque tampoco parece que sea de gran utilidad suministrar determinado tipo de información. Basta con incluir en el parámetro NAME el tipo de información que vamos a dar y en el parámetro CONTENT el contenido de esa información.

  Existe una particularidad en esta acción. Como hemos dicho anteriormente, existen algunos tipos de metainformación que se han predefinido en el estándar de HTML. Cuando pasamos este tipo de información, el primer parámetro cambia por el parámetro HTTP-EQUIV. De tal forma, tenemos el siguiente ejemplo:

  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

  Realmente, todo esto es mucho más fácil cuando lo hacemos con Dreamweaver, ya que no tenemos que preocuparnos por la sintaxis adecuada, simplemente seleccionamos el objeto META y a continuación pasamos los parámetros en la ventana de dialogo que aparece.

  
• Keywords: Inserta una listas de palabras clave en la cabecera del documento. Esta lista de palabras clave será utilizada por algunos buscadores para indexar las páginas en sus bases de datos. En realidad, keywords o palabras claves, no deja de ser metainformación y en realidad esta lista de palabras claves es pasada a través de la marca HTML <META>. Lo que ocurre es que este tipo de metainformación, sin ser un estándar reconocido, es una metainformación comúnmente aceptada. En la ventana que aparece podemos incluir una lista de palabras claves, separadas por comas. Es conveniente no dejar espacios entre las palabras.

  TRUCO: Es importante para obtener un buen resultado en la indexación de los buscadores que las palabras claves definidas en esta metainformación, se corresponda lo más posible con el contenido de la página. En caso contrario esa página sufrirá una penalización que la hará perder posiciones en el índice del buscador.

• Description: Metainformación que describe brevemente el documento actual. Al igual que ocurre con keywords, esta información es utilizada por algunos buscadores para indexar nuestras páginas. En otras ocasiones, esta información es mostrada junto a la URL de nuestra página en esos buscadores, de manera que el usuario tenga una idea del contenido del enlace. Esta información, es por tanto muy importante para conseguir que un usuario que alcance nuestra URL se interese por venir a nuestro sitio.

  TRUCO: La descripción no debe ser muy larga. Unas 20 palabras son suficientes. Al igual que ocurre con las palabras clave, una descripción que no se corresponda con el contenido de la página penalizará.

• Refresh: Es una metainformación reconocida por el estándar de HTML. La mayoría de los navegadores actuales soportan esta opción. Con esta acción meta, tenemos la posibilidad de recargar la página actual, o cualquier otra, cuando haya transcurrido un tiempo determinado. Es una opción que puede tener algunos usos interesantes. Por ejemplo, podemos hacer que una página llame a otra cuando hayan transcurrido 10 segundos. Las utilidades de esta opción pueden ser varias.
  

  Como vemos en la ventana superior, ajustar los parámetros de esta acción, no es muy difícil. Primeramente insertamos el tiempo que deseamos que transcurra antes de realizar el refresco. A continuación, indicamos la URL que se cargará transcurrido ese tiempo, o si por el contrario queremos refrescar el documento actual.

  RECOMENDACIÓN: Esta función, que es en sí muy atractiva, tiene el inconveniente de que penaliza en la indexación de algunos buscadores. Por tanto, conviene usarla con moderación en caso de que queramos tener una buena posición en esos indices. Cuando no quede más remedio que utilizarla, siempre es mejor añadir tiempos largos para el refresco de la página, que excesivamente cortos.

• Base: Normalmente, en todo documento HTML, cuando usamos la nomenclatura relativa para describir los enlaces del documento (veremos esto en más profundidad en otro tema), se toma como base el documento actual. Sin embargo, HTML prevÈ una marca que permite modificar esta base relativa a partir de la cual se buscara el enlace referenciado. Esta es la marca <BASE>. De esta forma, podemos hacer que el documento que se tome como referencia para las URL relativas sea otro distinto al actual insertando este elemento en la cabecera del documento.
• Link: El elemento LINK es un elemento algo oscuro y que, a pesar de que esta definido claramente en el estándar de HTML, no esta soportado como debiera por los navegadores actuales. En realidad su misión es aportar cierto sentido lógico a algunos enlaces de la página actual. Cuando definimos un enlace en HTML, lo único que hacemos es referenciar el documento que será cargado cuando el usuario active ese enlace. Ahora bien, no se define ningún tipo de relación entre ese enlace y el documento actual. En teoría esta directiva en la cabecera del documento, serviría para describir la relación lógica que el documento actual tiene con ese documento referenciado en el enlace.

  Por ejemplo, se puede utilizar esta directiva para indicar que el documento referenciado es el documento previo en una serie de documentos secuenciales, o el siguiente. De esta manera, los navegadores que entiendan esta funcionalidad pueden realizar alguna acción consecuente. Como comentamos, esta directriz no se utiliza mucho, y no es soportada por los navegadores más comunes.

  Un caso en el que esta directriz es de cierta utilidad es el caso del WebTV. WebTV interpreta esta directriz para saber cual es el siguiente documento en una lista secuencial y precargarlo, de manera que cuando el usuario haga click en el enlace, la navegación sea más rápida.

 Insertando Texto

Ya hemos visto como modificar las propiedades del documento, y también como añadir elementos a la cabecera del mismo. Pero aún no tenemos nada en el cuerpo del documento, es decir, ahora mismo no visualizaríamos nada en un navegador si tratáramos de ver nuestro documento.

En este subcapítulo veremos como añadir texto a nuestro documento, de manera que por fin tengamos algo que mostrarle al mundo.

Nada más fácil de hacer en Dreamweaver (mucho más si tenemos algunos conocimientos de mecanografía). Primero debemos asegurarnos que la parte activa del documento es el cuerpo y no la cabecera. Si nos molesta la cabecera podemos ocultarla usando menú View > Head Content. De esta manera toda la ventana mostrará exclusivamente el contenido del cuerpo del documento.

Hagamos click sobre el documento y observemos como aparece parpadeante una barra invertida en la posición actual, es el cursor que indica la posición actual en que nos encontramos dentro del documento. En esa posición, podemos escribir o añadir cualquier elemento al cuerpo del documento.

Escribamos "Hola Mundo, esta es mi primera página creada con Dreamweaver" sobre el documento y previsualicemos los resultados en un navegador. Para ello, utilizamos menú File > Preview in Browser... y automáticamente Dreamweaver lanzará el navegador seleccionado y nos mostrará en el nuestro documento.

Ahora que ya hemos visto que esto funciona, veamos realmente lo que Dreamweaver ha hecho. Cuando hemos escrito el texto sobre el documento, Dreamweaver ha insertado los tags adecuados en el código HTML para que nuestro texto sea visualizado por un navegador. Concretamente ha introducido el tag <P> que es el que se encarga de crear un nuevo p·rrafo. Puedes comprobarlo abriendo la Ventana del código HTML, usando el Lanzador o el Mini Lanzador en la esquina derecha de la ventana.

Hagamos ahora otra prueba, en la Ventana de código, localiza el texto que introdujiste anteriormente y modifícalo. Elimina alguna de las palabras, o simplemente inserta algunas nuevas. Ten cuidado de no eliminar ninguna marca HTML en este proceso, solo modifica el texto que hay entre las marcas. Una vez hecho esto, cierra la Ventana de código y comprueba que los cambios realizados de manera directa en el código, se reflejan en el modo de edición visual del documento. Previsualiza tu documento en un navegador para ver que estos cambios se han realizado.

Bueno, pues como verás, añadir texto a un documento HTML en Dreamweaver no es muy distinto de escribir un documento normal en un procesador de textos. Esta es una de las razones por las que las herramientas de edición de páginas HTML son tan útiles.

Debes observar alguna peculiaridad. Cada vez que introduces un salto de linea, con el uso de la tecla return, Dreamweaver insertará un nuevo párrafo. en el código HTML. Así, puedes crear tantos párrafos como desees en un documento.

Si seleccionas uno de estos párrafos, observa que en la esquina inferior izquierda aparecen una serie de marcas HTML. Primeramente aparecerá <body> y a continuación tendrás una <p>. Esto indica que tienes el cursor situado en un párrafo., que esta a su vez situado dentro de la marca <body>. Selecciona todo el texto de un párrafo. Observa como la <p> aparece en negrita, indicando que todo el contenido de ese tag HTML está seleccionado. Deselecciona el texto de ese párrafo. y haz click sobre la <p> que aparece en la esquina inferior izquierda de la ventana. Observa como ahora, todo el texto del párrafo se ha seleccionado automáticamente.

Haz click ahora sobre <body> y observa como todo el contenido en el cuerpo del documento se ha seleccionado. Esta manera de trabajar y seleccionar elementos es muy útil en la edición de documentos. En esta zona contextual de la ventana, irán apareciendo los distintos tags que hay hasta llegar a la posición actual del documento en la que te encuentras. De tal manera, si tuviéramos una palabra en negrita, que forma parte de un párrafo. y que a su vez forma parte del cuerpo del documento, al seleccionarla o situar el cursor en su posición, tendríamos en la esquina inferior izquierda los siguientes tags HTML:

<body> <p> <b>

Como puedes ver, estos tags van siempre desde el genérico al particular, podríamos decir que van desde el "tag" padre al "tag" hijo. Como es lógico, todos los elementos incluidos en el cuerpo del documento, estarán a dentro de la marca <body>.

Pero esto no es todo, seleccionemos ahora parte del texto de un párrafo. Con el seleccionado, abramos la ventana del código HTML. Observamos como dentro de la ventana de código HTML aparece seleccionado el texto que seleccionamos en el modo de edición visual. En todo momento, la sincronización entre el código y el documento visual es total. Así, es muy fácil editar y modificar elementos de nuestros documentos, tanto de manera visual como de manera directa en el código HTML.

Ahora que estamos algo más familiarizado con la manera de editar documentos en Dreamweaver, y con su filosofía Roundtrip, podemos añadir algunos párrafos más a nuestro documento, de manera que tengamos más elementos con los que trabajar. Hágalo.

Habrá observado, como le indicamos anteriormente, que cada vez que inserta un salto de línea, se inserta un nuevo párrafo. Esto esta bien pero, ¿Qué ocurre si queremos pasar a otra línea sin insertar un nuevo párrafo? HTML tiene una marca que se encarga de realizar esta función. Esa marca es <BR>. Esta marca es una marca abierta, es decir, no necesita marca de cierre. Sabiendo lo que sabemos ahora, podríamos insertar esta marca de manera directa en el código HTML de nuestro documento, allí donde la necesitáramos, pero Dreamweaver puede hacer esto por nosotros.

Estando el cursor situado en el punto en el que queremos insertar este salto de línea especial, bastará con que usemos menú Insert > Line Break. También podemos localizar esta función en la paleta Objects > Common o tal vez nos resulte más cómodo utilizar el atajo de teclado Mayúsculas + Return (ambas plataformas). De esta manera, podemos provocar un salto de línea dentro del mismo párrafo.

Continuemos con algunas funcionalidades simples. Tal vez queramos separar el contenido de un párrafo. de los demás con algún elemento gráfico. En ese caso, podemos insertar una línea horizontal, a modo de separador. La marca HTML que realiza esta función es <HR>. Al igual que <BR>, esta es una marca HTML abierta.

En la paleta de propiedades, cuando insertas o seleccionas una linea horizontal en el documento, puedes ajustar los parámetros de esa línea. Se puede ajustar el ancho y el alto, bien en pixels, bien en términos porcentuales. También podemos ajustar la alineación de la línea. Por último, podemos escoger que la línea sea plana, o que por el contrario presente un aspecto más tridimensional, activando o desactivando el parámetro "shading".

Esta sería la línea horizontal que tendríamos usando los parámetros de la imagen superior:

También podemos utilizar las opciones cortar y pegar al portapapeles, para traer texto de otro documento o de otra aplicación, o para llevarnos texto del documento actual a otro sitio. Aquí hay algunas peculiaridades de Dreamweaver, que tenemos que tener en cuenta.

Si observamos las opciones disponibles para copiar y pegar en el menú Edit, veremos que hay algunas opciones más de las que hay normalmente

Junto a las opciones de Cut, Copy y Paste habituales, encontramos otras dos opciones: Copy Text Only y paste as Text.

Como hemos estado viendo, Dreamweaver mantiene un doble modo de edición, uno visual y otro directamente en el código HTML. Cuando seleccionamos algo en el modo visual, realmente estamos seleccionando el texto que vemos más los "tags" de HTML que están relacionados. Por tanto, si copiamos algo y nos lo llevamos a un editor de texto, nos estaremos llevando todo el código HTML.

Esto, que puede parecer absurdo, es totalmente lógico ya que, si copiamos y pegamos entre distintos documentos de Dreamweaver, estaremos copiando todo el código HTML, que es al fin y al cabo lo que necesitamos para que los documentos sean visualizados correctamente en los navegadores.

Ahora bien, puede que necesitemos copiar solo el texto, sin copiar el código HTML. Para esto tenemos esas dos acciones añadidas en Dreamweaver:

• Copy Text Only: La traducción literal es "Copiar solo texto". Con esta opción, copiaremos al portapapeles solo el texto seleccionado, sin copiar los "tags" HTML que lo generan.
• Paste as Text: La traducción literal es "Pegar como texto". En el caso de que hayamos copiado una parte del documento, y en consecuencia también su código, podemos utilizar esta opción para pegar solo el texto en otro documento de Dreamweaver.

Entendiendo esta manera de interactuar con el contenido del portapapeles, nos será mucho más fácil entender otra peculiaridad de Dreamweaver. Cuando tratamos de pegar texto que ha sido copiado de un documento de texto generado con otra aplicación, lease Microsoft Word o cualquier otro procesador o documento, veremos que al pegarlo en el documento HTML de Dreamweaver, este pierde todo el formato que pudiera tener el programa origen.

Esto es lógico, ya que los comandos que formatean el texto en otras aplicaciones, no son comandos HTML, por tanto, cuando pegamos ese texto en Dreamweaver, no estamos pegando ningún comando HTML que lo formateé. Una vez pegado ese texto, tendremos que formatearlo de nuevo, para que Dreamweaver vaya añadiendo las marcas HTML necesarias para su formateado.

En fin, con lo que hemos aprendido hasta ahora, tenemos suficientes conocimientos para crear nuestro primer documento. Experimente un poco con todas estas opciones, crea un documento en el que importes texto a través del portapapeles desde otras aplicaciones, introduce texto por ti mismo, crea y modifica varios párrafos o separarlos con líneas horizontales. Recuerda que la práctica es la mejor maestra.

 Insertando caracteres especiales

Uno de los mayores problemas que se encontraba un editor de páginas web hace unos años, era la introducción en el código de caracteres especiales, que por razones técnicas no estaban cubiertos en el juego de caracteres normales empleados y mostrados por el HTML en un navegador. Nos referimos a esos caracteres como las vocales acentuadas o la ñ (tan nuestras), o a las vocales y acentos franceses, o a los símbolos matemáticos, o a símbolos como el "copyright" incluso a los símbolos que forman parte del HTML.

Una prueba de fuego para un editor web de hace unos años, podía ser realizar una página web que mostrará código HTML. Como hacer para que los navegadores interpretarán determinados caracteres como texto, en lugar de como HTML o código del documento.

Para ello, existen una serie de entidades especiales que forzaban al navegador a mostrar un carácter especial. Así por ejemplo, las vocales acentuadas venían a indicarse dentro del HTML de la siguiente forma:

Como vemos, todas estas entidades comienzan por el símbolo "&" y terminan por ";". esto no es casualidad. HTML interpreta esos símbolos como símbolos de escape para el HTML. Lo que esta incluido entre esos dos símbolos no es HTML y por tanto no debe ser interpretado como tal.

De esta manera, con el conocimiento de todas las entidades especiales soportadas, podíamos incluir caracteres especiales, no soportados directamente por el HTML en el contenido de nuestros documentos. El problema, como es evidente, era la memorización de tantas entidades y lo tedioso de introducirlas manualmente.

Actualmente, esto es mucho más fácil, ya que Dreamweaver inserta cuando es preciso esas entidades especiales en el código HTML por nosotros. De tal forma, cuando tecleamos una "í", Dreamweaver añade al código la correspondiente entidad "&iacute;", como podemos comprobar visualizando el código de esta página.

Por tanto, la inclusión de caracteres especiales en Dreamweaver se simplifica mucho. Además de esto, Dreamweaver pone a nuestra disposición una serie de caracteres especiales para que puedan ser introducidos directamente en nuestros documentos.

Estos caracteres especiales están localizables en la paleta Objects > Characters. Así, desde esta paleta podemos incluir símbolos como el de Copyright, o marca registrada, el símbolo del Yen, incluso el del Euro. Por si todos estos símbolos no fueran suficientes, podemos encontrar más símbolos en el último objeto incluido en esa paleta. El objeto "Other", abre una ventana donde podemos escoger cualquiera de los símbolos que aparecen en ella, para insertarlo en nuestro documento.

Así, podemos añadir prácticamente cualquier símbolo que necesitemos al contenido de nuestro documento, sin la necesidad de teclear y recordar las entidades especiales equivalentes.