cursos online, formacion on-line, teleformación, Elearning, Cursos online de ofimática, diseño gráfico, web, gestión, idiomas, programacion - ADR Formación

Etiquetas HTML

El contenido es el rey de una página Web. La introducción, edición y aplicación de formatos de texto es una de las partes que mayor tiempo requieren en la creación de una página. Esta lección explica los fundamentos de la introducción de texto. Aunque Dreamweaver MX incorpora mejores herramientas de texto que sus anteriores versiones, no llega al nivel de posibilidades de un procesador de textos. Si conoces el manejo de algún procesador de textos, posiblemente algunos de estos procedimientos ya los sepas.

Referencias HTML.

Es importante familiarizarnos con las etiquetas que determinan el estilo del objeto de texto. Al ser la piedra angular del contenido se van a repetir, no solo en la vista de código sino también en el Selector de etiquetas, nada más que empecemos a escribir en la ventana de documento.

Etiquetas Importantes.

Estilo
Etiqueta HTML Descripción
Párrafo
<p> ... </p>
El texto incluido entre las dos etiquetas conforma un Párrafo, con una línea en blanco por encima y por debajo.
Salto de Línea
<br>
Cambia de línea sin introducir un Párrafo.
Tabulación
<blockquote> ... </blockquote>
Presenta párrafos tabulados.
Negrita
<b> ... </b>
Texto representado en negrita.
Destacado
<strong> ... </strong>
Texto resaltado, representado como negrita.
Cursiva
<i> ... </i>
Texto representado en cursiva.
Lista ordenada
<ol> ... </ol>
Numeración (ordered list) Cada elemento de la lista estará encabezado por la etiqueta <li> que puede o no llevar la etiqueta de cierre </li>.
Lista desordenada
<ul> ... </ul>
Viñetas (unordered list) Cada elemento de la lista, también estará encabezado por la etiqueta <li>.
Línea de separación
<hr>
Línea horizontal que separa párrafos.

Estilos de Párrafo.

Se utilizan para generar títulos con una determinada jerarquía, el de mayor nivel es H1, mientras que el de menor nivel es H6.

Estilo de Párrafo
Descripción
<h1>...</h1>
Tamaño del encabezado
<h2>...</h2>
Tamaño del encabezado
<h3>...</h3>
Tamaño del encabezado

Etiqueta <FONT>.

La etiqueta <font> determina el estilo de las letras del texto. Cada una de sus características la delimitan los atributos de esta etiqueta.

Atributo
Descripción
<font face="...">...</font>
Fuente de la letra
<font color="...">...</font>
Color de la letra
<font size="...">...</font>
Tamaño de la letra

Atributos de Alineación.

No sólo modifican etiquetas de texto, como veremos pueden encontrarse dentro de cualquier etiqueta (de texto, de imagen, de tablas, ...). Determinan la alineación de ese objeto con respecto a la página o a lo que le rodea.

Align=
"center"
"right"
"left"
"justify"

 

Explicación de la referencia HTML

Edición básica de Texto.

Introducción de texto.

En Dreamweaver el texto se introduce como en un procesador de texto normal, escribiendo directamente en la ventana de documento en la vista de diseño.

  • Introducir Párrafo: la entidad fundamental de texto, se consigue pulsando la tecla ENTER para finalizar el mismo.
  • Introducir Salto de Línea: romper una línea perteneciente a un párrafo, pulsamos MAY+ENTER en el punto de ruptura.
  • Introducir Caracteres raros: Caracteres que no se encuentran en el teclado o que requieren código HTML especial. Para todo esto Dreamweaver incluye la solapa Caracteres dentro del panel Insertar. Por ejemplo, HTML solo permite un espacio entre caracteres. Para introducir más tenemos que insertar espacios indivisibles pulsando el segundo icono de la izquierda de esta solapa.

Movimiento del cursor.

Dentro de una página Web nos será necesario situar el cursor en una posición determinada para introducir un carácter o hacer una corrección. Esta operación se puede realizar de múltiples formas, se describen a continuación las más importantes.

Con el ratón:

Basta con situar el puntero del ratón en la posición adecuada y hacer un clic, el cursor se situará en esa posición. Si se quieren realizar desplazamientos más largos primero se visualiza la zona empleando las barras de desplazamiento vertical u horizontal.

Con el teclado:

Movimiento
Tecla
Carácter Anterior
(Izquierda)
Carácter Siguiente
(Derecha)
Línea anterior
(Arriba)
Línea Siguiente
(Abajo)
Palabra Anterior
CONTROL +
Palabra Siguiente
CONTROL +
Inicio de Línea
INICIO
Movimiento
Tecla
Fin de Línea
FIN
Inicio de Párrafo
CONTROL +
Fin de Párrafo
CONTROL +
Pantalla anterior
RE PAG
Pantalla Siguiente
AV PAG
Inicio del documento
CONTROL + INICIO
Fin del documento
CONTROL + FIN

 

¡OJO! No se pueden emplear las teclas de desplazamiento en un documento en el cual no haya párrafos escritos, si al pulsar las teclas de desplazamiento arriba y abajo el cursor no se mueve, habrá que "abrir camino" introduciendo retornos manuales de párrafo (INTRO).

 

Movimiento en la ventana de Dreamweaver.

Selección de Texto.

Para actuar sobre un texto ya escrito, será necesario seleccionarlo previamente, al seleccionar una porción de texto ésta queda en vídeo inverso (negro). No se pueden hacer selecciones discontinuas de texto. Los procedimientos más usuales para seleccionar texto, son los siguiente:

Arrastre

Se sitúa el cursor al inicio del bloque de texto y realizamos un arrastre con el botón izquierdo del ratón, observamos como el bloque de texto queda resaltado el vídeo inverso. Para eliminar la selección basta con picar con el ratón en cualquier parte del texto.

¡ATENCIÓN! Si un bloque de texto está seleccionado y se pulsa cualquier tecla, ésta sustituye a toda la selección, si la tecla pulsada es el espacio, se sustituye el bloque de texto por un espacio, dando el aspecto de haber perdido todo lo seleccionado.

MAY + POSICIÓN

Para seleccionar un bloque de texto situamos el cursor en el inicio del bloque (hacemos clic con el ratón), pulsamos y mantenemos pulsada la tecla MAY, situamos el cursor con el ratón y pulsamos en el final del bloque de texto que se quiere seleccionar.

MAY + MOVIMIENTO

Situamos el cursor en el inicio del bloque a seleccionar, pulsamos y mantenemos la tecla MAY, movemos el cursor con cualquiera de los métodos descritos en el apartado de "Movimiento del del Cursor".

SELECCIÓN PICANDO

    • Una palabra: Doble clic sobre la palabra
    • Una línea: Clic en la parte izquierda de la línea, el cursor cambia a flecha.
    • Un párrafo: Triple clic en la parte izquierda del párrafo.
Selección de Texto

El Portapapeles.

El portapapeles es un espacio destinado a almacenar temporalmente bloques de texto o gráficos. El contenido del portapapeles es único, si se almacena en el portapapeles un bloque de texto, éste sustituye a lo que estuviese almacenado en el portapapeles hasta el momento. El uso del portapapeles permite copiar y mover selecciones en un documento de Dreamweaver, en documentos distintos de Dreamweaver o en documentos distintos de diferentes aplicaciones, esto se consigue gracias a que el contenido del portapapeles no desaparece cuando se cierra la aplicación actual. Las herramientas del Portapapeles se sitúan en la barra de herramientas Estándar.

Copiar. Edición/Copiar. Almacena en el portapapeles la selección actual. Si no hay nada seleccionado el botón está desactivado. Tecla rápida CONTROL + C

Cortar. Edición/Cortar. Almacena en el portapapeles la selección actual, borra del documento la selección. Al cortar se mueve la selección actual al portapapeles, desapareciendo del documento. Tecla rápida CONTROL + X

Pegar. Edición/Pegar. Pone en el documento actual, en donde esté situado el cursor, el contenido actual del portapapeles. Tecla rápida CONTROL + V

Nota: Curiosamente el portapapeles no funciona con imágenes copiadas de otras aplicaciones.

Mover y copiar sin el portapapeles.

El procedimiento para mover o copiar un bloque seleccionado sin tener que utilizar las opciones de COPIAR, CORTAR y PEGAR. es:

  • Seleccionamos el bloque de texto.
  • Hacemos clic sobre el texto seleccionado y lo arrastramos, sin soltar el botón del ratón, hasta la nueva posición.
  • Si se quiere mover el texto soltar el botón del ratón cuando el cursor se encuentre en la posición adecuada. Si se quiere copiar el texto mantener pulsada la tecla Ctrl mientras se realiza el arrastre.
Utilización del Portapapeles

Otras Operaciones útiles.

BUSCAR Y REEMPLAZAR

Este comando nos ayudará a ahorrar tiempo y trabajo: Edición>Buscar y reemplazar.

La ventana que nos aparece nos ofrece un menú bastante intuitivo, donde destacan los campos donde incluimos el texto a buscar y aquel por el que queremos sustituirlo. Pero esto es solo la punta del iceberg a la hora de hablar de las posibilidades de este comando y la precisión con que se puede utilizar.

Buscar en: Permite buscar en la página actual, en un conjunto de páginas seleccionadas desde la solapa de Sitio, en una carpeta o en todo el sitio Web. Los resultados de la búsqueda se presentarán en la solapa Búsqueda del panel de Resultados en el caso de que la opción elegida no sea Documento actual.

Buscar: Podemos buscar en el código fuente o en el texto (vista diseño). De una manera mas avanzada podemos buscar una determinada etiqueta o un modificador de una determinada etiqueta.

Remplazar con: si queremos reemplazar lo buscado por algo debemos indicar el texto en este cuadro de texto.

Podemos configurar las opciones de búsqueda:

  • Coincidir mayúsculas y minúsculas.
  • Omitir diferencias de espacios en blanco.
  • Emplear expresiones regulares, las expresiones regulares son comodines que permiten encontrar distintos patrones de texto.

Una vez configurado el cuadro de diálogo tenemos la posibilidad de buscar o remplazar, uno por uno o todos a la vez.

Utilización de Buscar y reemplazar

DESHACER Y REHACER

El comando Deshacer debe de ser uno de los mejores inventos del siglo veinte. Que nos equivocamos, ¡Deshacer! Que cambiamos de idea ¡Rehacer!. El comando Deshacer deshace la última acción realizada. El comando Rehacer lo contrario. Retrocede tantos pasos como le permita la memoria de su equipo.

  • Deshacer (Control + Z): seleccionamos Edición>Deshacer o botón de la barra de herramienta Estándar.
  • Rehacer (Control + Y): seleccionamos Edición/Rehacer botón de la barra de herramienta Estándar.

El historial permite retroceder hasta un punto en particular, esta herramienta se estudia en profundidad en la lección de Productividad.

COMPROBACIÓN ORTOGRÁFICA

Para poder poner en marcha esta utilidad debemos seleccionar Texto>Ortografía. Esto hará aparecer un cuadro de dialogo como este:

Una vez hayamos abierto el cuadro de dialogo, Dreamweaver comenzará a buscar fallos que pueda haber en el texto. Situamos por lo general el cursor al principio de la página Web antes de ejecutar el corrector, ya que sino puede que no compruebe todo el texto. Dreamweaver nos preguntará de todos modos, al llegar al final del texto si deseamos continuar la comprobación desde el principio. A continuación describimos cada una de las acciones que se pueden tomar desde este cuadro de diálogo.

  • Agregar a personal: Incluye la palabra seleccionada a nuestro diccionario personal e impide que Dreamweaver la etiquete como palabra errónea.
  • Omitir: Indica al programa que ignore la palabra seleccionada y continúe la búsqueda.
  • Omitir todas: Omitirá todas las repeticiones de la palabra seleccionada en el documento entero.
  • Cambiar: Si encontramos la palabra correcta en la lista de sugerencias y deseásemos cambiar la errónea por ésta, la seleccionamos y presionamos este botón. Si no encontrásemos ninguna podemos escribir la correcta en el cuadro de texto Cambiar por.
  • Cambiar todas: Todas las repeticiones de la palabra en cuestión encontradas en el documento serán reemplazadas por la palabra seleccionada en el cuadro Sugerencias.

El programa comprueba el texto usando dos diccionarios diferentes: uno Estándar. para el idioma seleccionado y otro personalizado. Para seleccionar el idioma seguimos estos pasos:

  • Seleccionamos la opción Edición>Preferencias de página.
  • En el cuadro de diálogo que se presenta hacemos clic sobre la categoría General.
  • Desplegamos la lista Diccionario Ortográfico y seleccionamos la opción adecuada.
Utilización de la Comprobación Ortográfica

Todos los derechos reservados © Copyright 2004 ADR Infor S.L.
Contacto: soporte@adrinfor.com