5. EL EDITOR DE TEXTO HTML.

Transcripción

1 5. EL EDITOR DE TEXTO HTML. El editor de texto HTML proporciona una interfaz muy parecida a la de un procesador de textos para generar de una forma cómoda el código HTML correspondiente a los elementos insertados junto al texto (imágenes, tablas, caracteres especiales ) 1. Este editor de texto debe habilitarlo el administrador del sitio Moodle. Cuando el editor de texto está activado se muestra una barra de herramientas (Figura 61) cuyos botones se describen brevemente en la Tabla 6. Figura 61: Barra de herramientas del editor HTML. Seleccionar el tipo de fuente. Seleccionar el tamaño de la fuente. Seleccionar el estilo. Elegir el idioma. Aplicar formatos al texto previamente seleccionado: negrita, cursiva, subrayado y tachado. Poner subíndices y superíndices. Limpiar el código HTML de Word. Sirve para cuando hemos copiado texto desde Word y queremos eliminar las etiquetas (tags) innecesarias. Deshacer y rehacer. Opciones de justificación del texto: izquierda, centrado, derecha y justificado. Dirección del texto, de izquierda a derecha y de derecha a izquierda. Se puede utilizar en aquellos idiomas donde se escribe de derecha a izquierda. Crear listas numeradas y listas con viñetas. Aplicar sangrías a la izquierda y a la derecha. 1 Hay que tener en cuenta que todo el texto que introducimos en cualquier lugar de Moodle es texto plano con marcas HTML. 70

2 Cambiar el color del texto y el color del fondo. Estos botones activan la paleta de colores en una nueva ventana. Basta con pulsar con el ratón el color deseado o escribir su código en el cuadro de texto mostrado. Trazar líneas separadoras. Crear anclaje. Sirve para establecer enlaces entre diferentes puntos de la misma página. Se utiliza en combinación con los hipervínculos. Insertar y romper un enlace Web. Más adelante se explica con más detalle. Anular un enlace al glosario. Se usa para evitar la repetición excesiva de enlaces con palabras enlazadas del glosario y los enlaces no deseados. Insertar una imagen. Se explica con detalle más adelante. Insertar una tabla. Se explica con detalle más adelante. Insertar emoticonos. Este botón abre una ventana con un surtido de emoticonos para seleccionar. Estos elementos son muy útiles para indicar el tono de una expresión y permiten expresar una gran variedad de matices para el texto. Podemos escribir las formas textuales de los emoticonos y el editor las convertirá automáticamente. Insertar caracteres especiales. Este botón abre una ventana con el juego de caracteres que estemos usando en ese momento en nuestro navegador. 71

3 Buscar y reemplazar texto. Añadir etiquetas o marcas HTML. Agrandar y disminuir el editor. Tabla 6: Botones de la barra de herramientas del editor HTML Insertar enlaces. Para insertar un enlace hay que seleccionar primero el texto y después pulsar el botón de la barra de herramientas del editor. Después, en la ventana que se abrirá (Figura 62), podemos teclear o pegar la URL de la página a la que deseamos apuntar, el Título o texto alternativo que aparecerá al poner el puntero del ratón sobre el enlace y el marco de destino (nueva ventana, mismo marco, misma ventana ). Figura 62: Insertar un hipervínculo. Además de enlazar a páginas Webs externas, también podemos vincular recursos HTML internos, es decir, localizados en el propio servidor Moodle. Para ello, utilizaremos el botón Buscar para abrir el gestor de archivos y buscar el fichero deseado. Otra posibilidad es enlazar a algún lugar de la misma página que estamos editando. En este caso, es necesario crear un anclaje previamente que hará de destino del hipervínculo y, a continuación, seleccionar dicho anclaje en la lista desplegable Anclas de la ventana Insertar enlace Insertar una imagen. Es importante tener en cuenta que cuando insertamos una imagen en un documento Web, ésta realmente no se inserta, sino que lo que realmente se inserta es un enlace al archivo de imagen. Este archivo debe subirse previamente al servidor Moodle. Por eso, cuando pulsamos sobre el botón se abre una ventana (Figura 63) que muestra el contenido de la carpeta del curso donde se encuentran todos los archivos subidos hasta el momento y permite subir nuevos archivos. 72

4 Archivos subidos al servidor Previsualización de la imagen Subir un archivo al servidor Figura 63: Inserción de una imagen. Si la imagen que queremos insertar se encuentra en el servidor tan solo tendremos que seleccionarla en la ventana de la izquierda, Navegador de archivos. Una vista previa aparecerá en la ventana de la derecha, Previsualizar, y se mostrará su tamaño en los cuadros Anchura y Altura 1. Si la imagen no está cargada en el servidor, pulsaremos el botón Examinar para localizar el archivo en nuestro equipo y posteriormente pulsaremos el botón Subir para subirle al servidor. Opcionalmente, podemos definir cómo interactuará la imagen con el texto seleccionado una opción en la lista desplegable Alinear, insertar un recuadro alrededor de la imagen indicando el grosor del borde en el cuadro de texto Borde y ajustar la separación entre el texto y la imagen, escribiendo la separación en los cuadros de texto Horizontal y Vertical. Una vez realizados todos los ajustes, pulsaremos en el botón OK para insertar la imagen en el documento Insertar una tabla. Al pulsar el botón de la barra de herramientas del editor HTML, se abre una ventana (Figura 64) donde podemos especificar los parámetros de la tabla: número de filas y de columnas, la anchura total de la tabla, medida en porcentaje de la ventana o en píxeles. Un poco más abajo, podemos establecer la alinea- 1 Estos valores pueden modificarse, pero corremos el riesgo de que se deforme la imagen o que se vea mal (pérdida de resolución). 73

5 ción de la tabla en el documento, el grosor para el borde y el espaciado interno o la separación entre filas y entre columnas. Figura 64: Insertar una tabla. No es fácil el trabajo con tablas en el editor HTML, especialmente si estamos habituados a diseñarlas con un procesador de textos. Es muy importante diseñarla bien desde el principio ya que es un poco complicado reestructurar una tabla ya insertada. En cualquier caso, cuando trabajemos con tablas es muy conveniente agrandar el espacio del editor pulsando el botón. De esta forma, se mostrarán nuevos botones que facilitan la edición de las tablas (). Figura 65: Barra de herramientas para tablas. La Tabla 7, describe brevemente las funciones de cada uno de los botones de la barra de herramientas para tablas. Propiedades de la tabla. Propiedades de la fila. Añadir una fila por encima o por debajo de la seleccionada. Borra la fila seleccionada. Dividir la fila. Añadir columna a la izquierda o a la derecha de la seleccionada. Eliminar la columna seleccionada. Dividir la columna. Propiedades de la celda seleccionada. Añadir una celda encima o debajo de la actual. 74

6 Eliminar celda. Combinar celdas. Dividir la celda. Tabla 7: Barra de herramientas para tablas. 75