Taller de Adobe Dreamweaver: Pestaña Text y Favorites

¡Buenas y santas! Bienvenidos a otra clase de Dreamweaver/HTML. Esta vez nos toca (para variar) seguir con la barra de Insertar. Hoy aprenderemos de qué se tratan las pestañas Text y Favorites.

La pestaña que nos tocaría ver hoy sería la pestaña “Data” pero la vamos a dejar para más adelante, porque requiere para varios de sus elementos, conocimientos de bases de datos, e inclusive, tener creada una base de datos.

Como todavía estamos en la parte “principiante” de nuestro curso, la sección “Data” no la podemos explicar. Sería perder el tiempo ya que se entenderá mejor más adelante y para lo único que nos va a servir ahora es para “conocer los nombres” y la verdad que nos va a atrasar en cosas más importantes para esta etapa.

Vamos a pasar directamente a la pestaña Text y veremos también la pestaña Favorites, para dar por terminado (por el momento) el panel Insert.

Panel Insert (insertar), cuarta parte.

Pestaña Text:

Bold: Nos inserta un tag HTML ‘<strong>texto</strong>’ que nos muestra en nuestra página el contenido en negrita (en el ejemplo sería texto).

Italic: Inserta los tags <em> </em> en los cuales su contenido se verá en estilo itálica.

Strong: Es exactamente lo mismo que “Bold”.

Esta es una de las cosas inentendibles que tiene Dw.

La realidad es que el Bold debería tener el tag <b></b> (que existe y tiene el mismo efecto que el strong) y el strong, tener el <strong></strong>, valga la redundancia.

Emphasis: De nuevo.

Es exactamente lo mismo que el “Italic”.

Acá vamos a hacer un “parate”. ¿Por qué? Quiero explicar un par de cositas:

En realidad el lenguaje HTML tiene un tag <strong></strong> y un tag <b></b> en los cuales al ponerles texto dentro, este se verá en negrita.

Lo mismo sucede con el <i></i> y el <em></em>, y las itálicas.

Entonces porque existen diferentes?

La respuesta es que como son tags comúnmente usados dentro de los textos de una página web, es bueno poder definirles características especiales para poder usarlos en diferentes ocasiones.

A ver, un ejemplo para que quede más claro:

Yo quiero que las citas de mi página aparezcan en itálica y los nombres propios también. Además, quiero que los textos citados aparezcan más chicos.

Entonces, yo puedo predefinir a el tag <i></i> con un tamaño de letra menor (ya veremos cómo) y luego sólo necesitaría poner las citas entre <i></i> (itálica con tamaño menor) y los nombres entre <em></em> (solo itálica), y tendría a ambos con itálica, y las citas tendrían a su vez fuente mas chica.

Además, también existen por una “cuestión semántica”:

Por ejemplo, si trabajara en una revista y tengo que reforzar un encabezado que diría “Taller de Dreamweaver”, lo refuerzo en negrita con un <b></b>, ahora si tengo que reforzar un encabezado que dice “Meteorito se dirige a la tierra”, lo reforzaría con un <strong></strong>. Solo por el valor semántico de la palabra.

Los tags a nivel semántico prácticamente no se usan salvo por gente muy purista, pero estaría bueno acostumbrarse a trabajar así, ya que una vez que se nos haga costumbre, estaríamos haciendo un trabajo prolijo, sin necesidad de un esfuerzo mayor.

Bueno, terminada esta no-breve explicación, sigamos con las opciones de la pestaña.

Paragraph: Nos pone un texto seleccionado entre los tags <p></p> (o bien, si no tenemos ninguno seleccionado, nos crea los tags vacíos para que escribamos dentro).

Estos tags conforman básicamente, un párrafo.

Block-quote: Block-quote nos crea un bloque con margen izquierdo en el cual podemos meter texto. Este sería el resultado.

“Este texto sería un párrafo normal.”

“Aquí tendríamos el blockquote en acción.

Siempre que escribamos dentro del blockquote mantendríamos el margen para ordenar el texto.”

Preformatted Text: El texto que escribamos dentro de los tags de preformatted text (<pre></pre>) se va a mostrar en una letra con un buen espaciado y muy legible. Además, los espacios que pongamos entre palabras u oraciones serán respetados.

Acá vamos a hacer otro “parate”.

Cuando nosotros escribimos en HTML un párrafo, por ejemplo:

<p>El día esta nublado.

Pero a mi me gusta igual.</p>

En nuestro navegador se mostrará:

“El día esta nublado. Pero a mi me gusta igual.”

Nótese que la bajada de línea (el “enter”) no fue tomado por el navegador.

A tener en cuenta, el navegador no toma por ejemplo, los “enters” como “bajadas de línea” ni los espacios de la barra espaciadora, como espacios reales (sólo toma un espacio como real).

Para poder “hacer un enter” (bajar una línea) en nuestro texto y que se vea en el navegador tenemos que insertar el tag “<br />” y para hacer un espacio adicional en un entre dos palabras, tenemos que escribir ” “

Volviendo al ejemplo anterior, para que en nuestro navegador salga la oración tal cual la escribimos arriba, deberíamos poner en el HTML:

<p>El día esta nublado.<br /> Pero a mi me gusta igual.</p>

El resultado de esta oración si sería el siguiente.

El día esta nublado.

Pero a mi me gusta igual.

Volvamos con las pestañas.

h1, h2, h3, …: Sirven para marcar cabeceras, el h1 se utiliza generalmente para los títulos de mayor relevancia en una página, y los sucesores (h2,h3,…) para los subtítulos encadenados o textos de menor importancia con respecto a los anteriores.

Además, los “h” ponen el texto en mayor tamaño (de acuerdo con su numeración, el 1 es el más grande) y formateado en negrita.

El tag que utilizan es el <h1></h1>, <h2></h2>, ……

Unordered list: Nos crea una lista “desordenada”.
Esto quiere decir, sin numeración.

A modo de ejemplo:

· Item 1

· Item2

· …

Ordered list: Nos crea una lista ordenada.

A modo de ejemplo:

1. item 1

2. item 2

3. …

List item: es el tag que va a encerrar cada uno de los elementos de una lista. Cuando creamos una “ul” o una “ol” esta nos indica el tipo de lista, y cada uno de los “li” dentro de esos tipos, va a crear una línea de ese tipo.

En los ejemplos anteriores, cada “ítem” es un li, que difiere por su ordenamiento (puntos o números respectivamente, aunque pueden ser otros).

Definition List, definiton term, definition description: Sirven para crear una lista de definiciones.

La dl, definition list, crea el título de la lista.

La dt, definition term, crea el término a definir.

La dd, definition descripción, crea la descripción del término anterior.

Estas 3 funcionan en conjunto, a modo de diccionario.

Pongo un ejemplo para que lo puedan entender:

Diccionario (esta es la dl)

Dreamweaver: (esta es la dt)

Programa para maquetación de páginas web, creado por adobe. (esta es la dd)

HTML: (esta es otra dt)

Lenguaje de maquetación web. (esta es otra dd)

En general las Definiton list no son muy usadas por una cuestión de que la gente encuentra los mismos resultados usando otros tags, pero esta bueno conocerlas porque muchas veces nos pueden sacar de un apuro.

Abbreviation: esta opción nos permite poner el tag <abbr></abbr> con un título dentro del primero.

Quedaría <abbr title=””></abbr>

Entonces nosotros podemos poner una palabra abreviada entre los dos tags, y la palabra entera en el atributo title.

De esta manera, solo nos escribirá la abreviatura, pero si pasamos el Mouse por encima, nos mostrará la palabra completa en un recuadro amarillo.

Ejemplo: <abbr title=”Dreamweaver”>Dw</abbr>

Acronym: Funciona exactamente igual al tag anterior.

Su escritura en HTML es <acronym title=”"></acronym>.

Su diferencia real es que el abbr se utiliza para abreviar una palabra, y el acronym para un acrónimo.

Por ejemplo: <acronym title=”HyperText Markup Language“>HTML</acronym>

Other Characters: Este botón nos permite agregar en donde tengamos posicionado el cursor, uno de los caracteres que seleccionamos de su lista.

Estos caracteres tienen la particularidad de que no pueden ser escritos de la manera tradicional, y deben ser reemplazados para que los interprete el navegador. Caso contrario, no se verán en pantalla como corresponde.

Un ejemplo de estos es el espacio en blanco que se escribe “ ”(sin las comillas) o las vocales con acento, “&aacute;”, &iacute;” (para la letra “a” y la “i” con tilde, respectivamente).

Pestaña Favorites:

En esta pestaña, presionando clic derecho, se nos abrirá un menú, en el cual, yendo a “customize Favorites” obtendremos un panel para poder elegir todas las opciones que queramos del panel Insert y poner la que se nos ocurra.

De esta manera podremos hacer una pestaña con nuestras opciones más usadas y no depender del orden en que las puso Dw.

Prueben de hacerse una pestaña ustedes mismos con lo que prefieran, y si no les sale, recuerden que pueden dejar comentarios en la página, que los responderé lo mas rápido que pueda.

Conclusión

Bueno, estas pestañas, si bien son de fácil uso, nos llevaron unas cuantas líneas.

Estaría bueno que vayan usandolas (por lo menos la pestaña text), así además de repasar las cosas que vimos hoy, van incorporando mas rápido los tags HTML.

Nos volvemos a ver la semana que viene ¡¡ya con tema nuevo para alegría de todos!! (o por lo menos mía :p)

¡Saludos!

<< CLASE ANTERIOR

CLASE SIGUIENTE >>