HTML Desde Dreamweaver cs6

tiquetas

Ya sabes que el lenguaje HTML está basado en etiquetas que marcan el inicio y fin de cada elemento de la página Web.

En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el código HTML de una página para darle un título. Consistía simplemente en escribir el título deseado entre las etiquetas <title> y </title>.

Las etiquetas consisten en poner un mismo comando entre los símbolos < y >. La primera etiqueta indica inicio, y la segunda, que incluye el símbolo /, indica final y se suele denominar etiqueta de cierre.

Las etiquetas disponen de atributos que permiten definir características del elemento sobre el que actúan, incluyendo cierto código dentro de la etiqueta.

Por ejemplo, un párrafo se inserta entre las etiquetas y , pero es posible cambiar sus características predeterminadas, como puede ser asignarle una clase de estilo CSS. Para ello, a la etiqueta de apertura anterior habría que añadir el atributo y su valor, quedando y .

También hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo, un May + INTRO dentro del código HTML equivale a la etiqueta . Realmente estas etiquetas si tienen cierre, y se pone en la etiqueta de apertura para seguir el estándar XHTML que obliga a que todas las etiquetas se cierren. Por tanto el salto de línea anterior se escribiría . Otras etiquetas que se cierran sobre sí mismas son las imágenes <img />, reglas horizontales <hr /> o elementos de formulario <input />.

Dreamweaver inserta automáticamente las etiquetas necesarias para construir la página con la apariencia y contenido definidos en el editor gráfico, pero también ofrece otras posibilidades para trabajar directamente sobre el código.

Entidades HTML

HTML también dispone de códigos especiales para representar caracteres especiales como pueden ser letras con acentos o no pertenecientes al alfabeto latino internacional, signos de puntuación o tipográficos y símbolos especiales que presenten un problema en HTML como < ó >, que podrían malinterpretarse por el inicio de una etiqueta.

Estos códigos pueden mostrarse como un código numérico o con un nombre de entidad. Ambos métodos son igualmente aceptables, pero ambos deberán ir encerrados entre los símbolos & y ;.

De este modo, < se escribirá como < o <

Usar este método es muy aconsejable, de esta forma los navegadores que estén configurados para visualizar juegos de caracteres que no contengan letras como la ó o la ñ podrán ver el sitio correctamente. En caso contrario estos caracteres se mostrarían de forma extraña si no elegimos la codificación adecuada.

En el tema 4 vimos que podíamos escribir estos caracteres utilizando el menú Insertar. Ahora te mostraremos otra forma para escribir caracteres que no se incluían en el listado de Dreamweaver y que podrás insertar escribiendo sus entidades en la vista de Código.

Aquí tienes una tabla de los caracteres más utilizados con sus Entidades HTML numérica y de nombre de entidad:

Carácter	Entidad con nombre	Entidad numérica	Carácter	Entidad con nombre	Entidad numérica
á	á	á	Á	Á	Á
é	é	é	É	É	É
í	í	í	Í	Í	Í
ó	ó	ó	Ó	Ó	Ó
ú	ú	ú	Ú	Ú	Ú
ü	ü	ü	Ü	Ü	Ü
ñ	&ntide;	ñ	Ñ	Ñ	Ñ

¿	¿	¿	α	α	α
¡	&iexc;	¡	β	β	β
–	–	–	©	©	©
→	→	→	®	®	®
←	←	←	€	€	€

<	<	<	espacio
>	>	>
&	&	&

Si escribes más de un espacio en el código de Dreamweaver, cuando lo visualices en un Navegador sólo veras uno. Esto es debido a que en HTML las palabras separadas por más de un espacio se visualizan separadas de uno.

Para saltarte esta norma puedes escribir tantas veces como quieras   y se visualizarán tantos espacios como elementos de entidad hayas introducido.

Antes de abusar de este tipo de espacios, piensa si no convendría más añadirle margin o padding CSS.

Si quieres ver una tabla con el listado de todos los caracteres especiales visita el avanzado Listado de Entidades HTML

El inspector de código

Recordarás que Dreamweaver ofrece la posibilidad de trabajar con diversas vistas: vista Diseño, vista Código, vista En vivo y vista Dividir (Código y Diseño ó Código y En Vivo).

Todas estas vistas se aplican directamente sobre la ventana del documento.

Pero existe un panel que permite visualizar el código independientemente de la vista aplicada en el documento. Este panel es el llamado Inspector de código y puede abrirse a través del menú Ventana, opción Inspector de código. También podemos abrir el Inspector de código pulsando F10.

El Inspector de código muestra el código HTML de la misma forma que lo hacen la vista Código y la vista Dividir (Código y Diseño), pero puede resultar más cómodo trabajar con el panel, ya que puede situarse en cualquier parte de la pantalla, y no se limita sólo al espacio del documento. Por ejemplo, si disponemos de una pantalla panorámica, podemos tener a un lado el diseño y a otro el código.

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.es" target="_blank">Visitar aulaClic</a>, con lo que obtendríamos el siguiente enlace:

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

Podemos continuar escribiendo el nombre de la etiqueta, o seleccionarla de la lista cuando sea visible. Si se trata de la seleccionada en azul, basta con pulsar la tecla Intro. En este caso, como la etiqueta de enlace sólo tiene una letra, no necesitamos de esta opción.

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. Para hacerlo, podemos optar por seleccionarlo de la lista con doble clic, pulsar h (para que se seleccione) + Intro (para introducirlo) o escribirlo.

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

En el caso de atributos en los que hay que indicar la ubicación de un archivo, nos aparecerá la opción Examinar... que abre el cuadro de diálogo para elegir el archivo. También podemos continuar escribiendo la dirección.

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. Entonces el cursor aparecerá entre las nuevas comillas dobles, y se mostrará una lista en la que es posible elegir el destino del enlace. Cuando un atributo puede tomar unos valores concretos, estos nos aparecerán como opciones.

Como queremos que el enlace se abra en una página nueva, seleccionamos _blank.

Cuando hayamos completado los atributos, cerramos la etiqueta de apertura con el símbolo >

Ahora podemos introducir el contenido de la etiqueta. Pero es recomendable cerrarla ya y luego introducir el contenido, para que no se nos olvide. Para cerrar la etiqueta basta con escribir </ y automáticamente se completará la etiqueta de cierre (</a>).

También podemos configurar Dreamweaver para que introduzca la etiqueta de cierre al cerrar la de apertura. Esto lo hacemos desde el menú Edición → Preferencias → Sugerencias para el código → Cerrar etiquetas.

Ahora podemos completar la etiqueta con el texto que servirá de enlace.

Buscar este blog

Gerardo Coronel