Unidad 15. HTML desde Dreamweaver (II)

Completar las etiquetas

Una de las posibilidades que ofrece Dreamweaver a la hora de trabajar directamente sobre el código HTML es la de completar las etiquetas mientras se van introduciendo. Esto se produce tanto en el Inspector de código como en las vistas de código.

Imaginemos que deseamos introducir en nuestra página un enlace a la página de aulaclic, que ha de abrirse en una ventana nueva. En este caso deberíamos introducir la etiqueta <a href="http://www.aulaclic.com">pulsa aquí para visitar aulaclic</a>, con lo que obtendríamos el siguiente enlace:

pulsa aquí para visitar aulaclic

Vamos a ver cómo funciona el mecanismo de completar etiquetas a través de este ejemplo.

Las etiquetas se completan siempre de izquierda a derecha, por lo que lo primero que debemos insertar es el símbolo < .

Después de escribir nosotros este símbolo, Dreamweaver mostrará una lista con todos los comandos que pueden aparecer después él. Para elegir uno de ellos hay que pulsar dos veces sobre él con el puntero del ratón, o bien, estando seleccionado, pulsar INTRO.

En este caso tenemos que elegir a, después de lo cual desaparecerá la lista. En el código tendremos .

Después de <a hay que introducir un espacio en blanco. Nada más teclear el espacio en blanco aparecerá otra lista de elementos, que son los que pueden escribirse después de la a, los atributos de la etiqueta.

Tenemos que elegir href.

Una vez seleccionado, el código quedará como .

Entonces el cursor aparecerá entre las comillas dobles, y se mostrará una nueva lista en la que es posible elegir el tipo de vínculo a insertar.

En este caso el vínculo ha de ser de tipo HTTP, aunque también sería posible insertar un vínculo a un archivo (FILE), un vínculo de correo electrónico (MAILTO), o un vínculo de cualquiera de los tipos que aparecen en la lista. Nosotros tenemos que seleccionar http://.

En lugar de cerrar ya la etiqueta con el símbolo >, queremos primero indicar que el vínculo ha de abrirse en una ventana nueva. Para ello tenemos que introducir un nuevo espacio, para que se nos muestre otra lista.

En ella hay que elegir target. El código quedará como .

Entonces el cursor aparecerá entre las nuevas comillas dobles, y se mostrará una lista en la que es posible elegir el destino del enlace.

Como queremos que el enlace se abra en una ventana nueva, hay que seleccionar _blank.

Después de introducir el símbolo > para cerrar la etiqueta, se insertará automáticamente la de final del enlace, es decir, se insertará </a>, y tendremos .

Ahora podemos completar la etiqueta con la dirección del enlace y el texto que servirá como enlace, para que quede del siguiente modo:

<a href="http://www.aulaclic.com">pulsa aquí para visitar aulaclic</a>

Errores en el código

A través del editor gráfico es posible ver si hay algunos errores en el código HTML, como puede ser una etiqueta incompleta.

En el caso de haber un error de este tipo, el fragmento de código que contiene el error se mostrará resaltado en amarillo en la ventana de diseño de la página.

Esto nos permite darnos cuenta de la línea concreta en la que se encuentra el error.

Si en el ejemplo de completar las etiquetas hubiéramos dejado sin terminar la línea de código, habiendo escrito únicamente <a href="", aparecería reflejado en el editor gráfico tal y como muestra la imagen de la derecha.

Otra forma de detectar errores en nuestra página es a través del menú Comprobar navegadores de destino en la barra de herramientas Documento.

Si nuestra página no contiene errores, el icono de este menú tiene esta apariencia , mientras que si tenemos errores adoptará esta apariencia .

Para ver los errores que tiene nuestra página, desplegamos el menú y elegimos la opción Mostrar todos los errores.

A continuación se abrirá el panel Resultados con las lista de los errores encontrados.

A continuación se abrirá el panel Resultados con las lista de los errores encontrados.

En esta lista aparece el grado de importancia del error representado mediante un icono, el globo de palabras indica un mensaje informativo (señala código que no es compatible con un navegador pero que no tiene ningún efecto visible), el icono de signo de exclamación con fondo rojo indica error (indica código que puede causar un problema visible grave en un navegador concreto, como hacer desaparecer partes de una página) y el icono de signo de exclamación con fondo amarillo indica advertencia (señala una parte de código que no se visualizará correctamente en un navegador concreto, pero eso no causará ningún problema grave de visualización).

A continuación tenemos la página y número de línea donde está el error y una descripción del mismo.

A veces la descripción es un texto largo que no se puede visualizar completamente para ello puedes utilizar el botón Más info .

Como ya sabrás los distintos navegadores y sus distintas versiones hacen que un error lo sea o no, debemos realizar la comprobación eligiendo las versiones de los navegadores que consideremos sean las más utilizadas entre nuestros navegantes.

Para seleccionar los navegadores para que Dreamweaver los compruebe debemos desplegar el menú Comprobar navegadores de destino y seleccionar la opción Configuración... Aparecerá el cuadro de diálogo Comprobar navegadores de destino donde seleccionamos los navegadores que queramos comprobar y la versión mínima de la lista desplegable a la derecha del nombre del navegador.

Pág. 15.2