1Autor: Jos é Luis Gil Gil
Anexo: Manejo del editor HTML
2Autor: Jos é Luis Gil Gil
� Advertencia: En aquellas pantallas en las que salga el editor de texto, no hay que usar el tabulador para desplazarse: puede llegar a bloquearlo.
� Por lo demás, es similar a cualquier editor tipo Word, sólo que produce texto web (HTML).
� El editor no es recomendable para crear un texto de gran tamaño: es mejor hacer un documento de Word u otro editor y dejarlo disponible como recurso.
� No obstante, si se va a crear un texto largo, es siempre recomendable usar la opción de editor agrandado.
Anexo: Manejo del editor HTML
3Autor: Jos é Luis Gil Gil
� Vamos a comenzar con un vistazo general a las opciones disponibles en el editor:
Anexo: Manejo del editor HTML
Tipo de letra
Tamaño de letraEstilos
predefinidos
Efectos de letra: negrita, cursiva, subrayado,
tachado, superíndice y subíndice
Limpiar formatos
Word
Deshacer/ rehacer
Alinear a izquierda/ derecha/ centro/
justificado
Lista numerada/
viñetasAumentar/ disminuir sangría
Color texto y fondo
Hipervínculo
Hacer/romperImagen
Tablas
Emoticonos y simbolos
Agrandar el editor
Idioma (no soportado)
Buscar/reemplazar
Insertar HTML
4Autor: Jos é Luis Gil Gil
� Existen unas opciones que son básicas a la hora de dar
formato a un texto:
Estas opciones no necesitan de gran explicación…
Opciones básicas de
formato de texto
Tipo de letra
Tamaño de letra
Efectos de letra: negrita, cursiva, subrayado,
tachado, superíndice y subíndice
Color del
texto
Color del
fondo
5Autor: Jos é Luis Gil Gil
� A la hora de aplicar cualquier opción del editor, hay siempre dos formas de hacerlo:
1. Una forma es, primero escribir el texto, y una vez terminado seleccionar las opciones de formato (p. ej subrayado y 14 ptos)
2. La otra forma es, antes de empezar a escribir, seleccionar las opciones de formato (p. ej. Subrayado y tamaño 14 ptos):
Opciones básicas de
formato de texto
6Autor: Jos é Luis Gil Gil
� Estilos. Son unos formatos predefinidos en cuanto a tipo de letra, tamaño, negrita, etc, que se aplican de un solo golpe.
� Los estilos más interesantes son del “Encabezado1” al “Encabezado 7”, que sirven para poner títulos destacados donde el 1 es el más grande y el 7 el más pequeño.
Opciones avanzadas de
formato de texto
7Autor: Jos é Luis Gil Gil
� Alineación. Permite ajustar el texto a uno de los márgenes (izquierdo o derecho) o bien al centro de la página:
� Adicionalmente, el cuarto botón es una alineación justificada que “estira” cada renglón hasta el final para evitar el uso de guiones de separación por sílabas.
Opciones avanzadas de
formato de texto
8Autor: Jos é Luis Gil Gil
� Numeración y viñetas. Permite hacer listas de elementos, numeradas o no numeradas. Un ejemplo:
� Hay un botón para activar cada tipo de lista:
Opciones avanzadas de
formato de texto
Lista numerada Lista no numerada (viñeta)
Lista no numerada: no importa el orden
Lista numerada: importa el orden
9Autor: Jos é Luis Gil Gil
� Sangría. Permite sangrar el texto desplazándolo hacia el interior, dejando una separación desde el comienzo.
� La sangría se controla con dos botones:
Opciones avanzadas de
formato de texto
Disminuir sangría Aumentar sangría
10Autor: Jos é Luis Gil Gil
� Deshacer / rehacer. Estas opciones típicas de Word permiten deshacer o rehacer todo lo que se haya tecleado o cambiado.
� ¡Ojo! A veces no es tan fiable como en el Word. Es posible que no deshaga ciertas acciones.
Opciones típicas de
procesador de texto
Deshacer Rehacer
11Autor: Jos é Luis Gil Gil
� Copiar / Cortar / Pegar. Estas opciones son típicas en cualquier editor de texto y permiten trasladar texto de cualquier fuente al editor, pasando por el portapapeles.
Opciones típicas de
procesador de texto
Texto fuente
Portapapeles
Pegado en el editor (en las versiones 1.7 y posteriores
no existen botones de copiar y pegar por
incompatibilidad de permisos en el navegador)
12Autor: Jos é Luis Gil Gil
� Las opciones de Copiar / Cortar / Pegar. Son muy interesantes porque permiten copiar y pegar texto desde Word o Excel, conservando el formato (casi siempre).
Opciones típicas de
procesador de texto
Texto fuente en Word
PortapapelesPegado en el editor
copiar pegar
13Autor: Jos é Luis Gil Gil
�Estos botones de copiar/cortar y pegar, sólo están disponibles en versiones anteriores a la 1.7, debido a incompatibilidades depermisos con el navegador:
Copiar: saca una copia del texto origen y la deja en el portapapeles, hasta el momento en el que se decida pegarlo.
Cortar: Extrae el texto origen, eliminándolo del origen, y lo traslada al portapapeles, hasta el momento del pegado.
Pegar: Toma el texto que haya en el portapapeles y lo pega en el destino (en este caso en nuestro editor)
En versiones modernas, como la 1.9, se deben usar las opciones de copiado y pegado del navegador (a veces pedirá permiso para ello)
Opciones típicas de
procesador de texto
14Autor: Jos é Luis Gil Gil
� Inserción de imágenes. Es muy normal querer insertar alguna imagen en nuestros escritos, y el editor permite hacerlo:
� Ahora bien, primero deberemos tener en el servidor las imágenes que queramos poner (al fin y al cabo esto es una página web):
Otros recursos
avanzados del editor
Insertar imagen
Servidor con la plataforma
Imagenes
15Autor: Jos é Luis Gil Gil
Otros recursos
avanzados del editor
Dirección web de la imagen (nos da igual)
Determina si la imagen rodeará al texto al estilo periodístico y si lo hará
por la izquierda o por la derecha
Grosor del borde en píxeles
Fuerza un tamaño en
píxeles
Breve texto explicativo (saldrá al pasar el rátón)
Espacio en blanco alrededor de la
imagen en píxeles
Imágenes disponibles para
colocar (ya se subieron antes
alguna vez) Visualización de la imagen antes de
colocarla
Permite subir alguna imagen más
para que estédisponible
16Autor: Jos é Luis Gil Gil
� ¿Cómo se suben imágenes nuevas? Es muy sencillo, se busca la imagen en el disco duro con el botón “Examinar” y se sube con el botón “Subir”.
� La alineación a la derecha o a la izquierda de las imágenes es recomendable para aprovechar espacio:
Otros recursos
avanzados del editor
1 2
17Autor: Jos é Luis Gil Gil
� Otro recurso importante es la creación de tablas:
� Las tablas tienen diversas opciones de colocación:
Otros recursos
avanzados del editor
Insertar tabla
Número de filas y columnas
Alineación de la tabla (izquierda, derecha, centro)
Grosor del borde en píxeles
Porcentaje de la página que deben ocupar o
tamaño fijo en píxeles
Separaciones internas de la
tabla
18Autor: Jos é Luis Gil Gil
� Un recurso muy interesante es la posibilidad de colocar hipervínculos dentro del texto.� Por ejemplo, si en un texto queremos referirnos a un sitio webque deben visitar para ampliar información:
� Estaría mucho mejor que las palabras “página web del ministerio de educación” fuesen un enlace a esa página. Para ello se selecciona el texto y se le da al botón de “Insertar enlace”
Otros recursos
avanzados del editor
19Autor: Jos é Luis Gil Gil
� Una vez pulsado el botón, sale una pantalla de opciones:
Otros recursos
avanzados del editor
Pagina web a la que queremos que salte
Breve título explicativo (saldrá
al pasar por encima el ratón)
Especifica si queremos que se abra en la misma ventana o en otra (mejor siempre en
otra nueva)
20Autor: Jos é Luis Gil Gil
� El aspecto final es el de un enlace web convencional:
� Si se desease eliminar el hiperenlace, bastaría con seleccionar el texto y darle a “Eliminar vínculo”:
Otros recursos
avanzados del editor
21Autor: Jos é Luis Gil Gil
� Otro recurso de menor importancia, son los emoticonos(caras que expresan sentimiento) al estilo de un chat:
Otros recursos
avanzados del editor
22Autor: Jos é Luis Gil Gil
� Finalmente, también es destacable que puede utilizarse el editor más cómodamente a pantalla completa, aconsejable cuando el texto es extenso:
Otros recursos
avanzados del editor