Diseño Web y Herramientas de Internet Aplicados A La Docencia PDF

Formación del profesorado ANFAP
Asociación Nacional para la

Formación y Asesoramiento de
los Profesionales
DISEÑO WEB Y HERRAMIENTAS DE INTERNET

APLICADAS A LA DOCENCIA.
ANDALUCÍA - ARAGÓN - ASTURIAS - BALEARES - CANARIAS CANTABRIA - C. MANCHA

C. LEÓN - CATALUÑA - MADRID - GALICIA - LA RIOJA - EXTREMADURA - CEUTA/MELILLA
MURCIA - NAVARRA - PAÍS VASCO - C. VALENCIANA
PROHIBIDA TODA REPRODUCCIÓN
RESERVADOS TODOS LOS DERECHOS
Copyright MELC, S.A., 2019
Reservados todos los derechos. De conformidad con lo dispuesto en el art. 534-bis del Código
Penal vigente, podrán ser castigados con penas de multa y privación de libertad quienes
reprodujeren, en todo o en parte, una obra literaria, artística o científica fijada en cualquier
tipo de soporte sin la preceptiva autorización.
DATOS DEL CURSO
DESTINATARIOS
▪ Profesores de Educación Infantil y Primaria de todas las

especialidades.
▪ Profesores de Educación Secundaria de todas las especialidades.
▪ Profesores de la especialidad de Psicología y Pedagogía.
▪ Profesores técnicos de servicios a la Comunidad.
▪ Personas interesadas en la docencia.
DURACIÓN Y MODALIDAD
 100 % a distancia. Metodología online.
DIRECCIONES DE LOS CENTROS DE REFERENCIA

MAGISTER. Gta. Cuatro Caminos 6, 28020, Madrid. Teléfono: 912 98 64 18
CONTENIDOS.
INTRODUCCIÓN.
MÓDULO I: INTERNET.
 Breve orientación sobre Internet.
MÓDULO II: RECURSOS DIDÁCTICOS EN INTERNET.

 Recursos didácticos.
 Ejemplo de búsqueda de herramientas.
MÓDULO III: UTILIZACIÓN DE BLOGS.

 Concepto.
 Blogs en la educación.
 Creación de un Blog.
 Ejemplo guiado paso a paso.
MÓDULO IV: LOS FOROS.

 Introducción.
 Los foros en la educación.
 Participación de un foro.
 Creación de temas en un foro.
MÓDULO V: EL CHAT.
 Introducción.
 Los chats en la educación.
 Participación en un chat.
MÓDULO VI: CÓMO TRABAJAR CON ARCHIVOS FTP.
 Crear una carpeta en nuestro ordenador.
 Instalar el programa CORE FTP.
 Trabajar con el programa CORE FTP.
 Acceder a un espacio Web.
 Espacio Web en 000webhost.com
 Descargarnos la página ftp.htm.
MÓDULO VII: LENGUAJES UTILIZADOS PARA DISEÑO Y

PROGRAMACIÓN DE LAS PÁGINAS WEB.
 Extensiones de archivos creados.
 Otros programas utilizados.
MÓDULO VIII: DIRECCIÓN DE URL.

 Concepto.
 Caracteres que no deben utilizarse.
 Estructura de una dirección Web.
MÓDULO IX: INTRODUCCIÓN A LOS PROGRAMAS DE DISEÑO WEB.
MÓDULO X: INTRODUCCIÓN A LOS COMPONENTES DE UNA

PÁGINA WEB.
MÓDULO XI: EL PROGRAMA KOMPOZER.

 Pasos para descargarnos el programa de Kompozer.
MÓDULO XII: PÁGINAS EN KOMPOZER.

 Cómo trabajar en una página en Kompozer.
MÓDULO XIII: GUARDAR PÁGINAS EN KOMPOZER.
 Guardar una página nueva.
 Guardar una página existente.
MÓDULO XIV: VISTA PREVIA EN EL EXPLORADOR.

 Vista previa.
MÓDULO XV: DESCARGA DE ARCHIVOS.

 Cómo descargamos las imágenes necesarias para los ejemplos y
actividades.
MÓDULO XVI: ELEMENTOS DE TEXTO EN UNA PÁGINA WEB.

 Escribir texto.
 Modificar texto.
 Alineación del texto.
 Viñetas y numeración.
 Sangría.
MÓDULO XVII: IMÁGENES.

 Insertar imágenes.
 Insertar texto alternativo a una imagen.
 Cambiar texto alternativo.
 Modificar tamaño.
MÓDULO XVIII: HIPERVÍNCULOS Y ENLACES.

 Hipervínculo absoluto.
 Hipervínculo relativo.
 Hipervínculo anclado de texto.
 Hipervínculo anclado con imágenes o flechas UP.
 Hipervínculo anclado con correo electrónico.
MÓDULO XIX: ROLL-OVER.

 Roll-Over de texto.
MÓDULO XX: PROPIEDADES DE PÁGINA.

 Color de fondo.
 Color de texto.
MÓDULO XXI: LAS TABLAS.

 Insertar tablas.
 Modificar el tamaño de la tabla.
MÓDULO XXII: SUBIR LAS PÁGINAS WEB AL SERVIDOR.

 Subir las páginas Web al servidor.
INTRODUCCIÓN.
En los últimos tiempos el avance tecnológico ha sido muy grande y ha
afectado a la sociedad en todos sus aspectos. Este avance sigue siendo
imparable y cada día aparecen nuevos productos o mejoras de los ya
existentes, fruto del vertiginoso desarrollo tecnológico. Uno de los aspectos
que más se ha desarrollado ha sido el de las Tecnologías de la Información
y la Comunicación (TIC), que tienen un reflejo directo en el aspecto
docente.
Pero quizás el elemento más revolucionario en la educación ha sido

Internet. Internet permite al profesor o ponente la utilización de gran
cantidad de información y de recursos educativos que existen en la red y
que facilitan la labor docente con presentaciones, películas demostrativas,
datos actualizados, animaciones, informaciones de todo tipo, etc.
Internet fue creada en EEUU con fines militares en los años 60 y se

llamaba ARPANET. Posteriormente, comenzó a ser utilizado por el
gobierno, universidades y otras instituciones. A partir de entonces,
comenzaron a incorporarse cada vez más redes y, por lo tanto, cada vez
más usuarios, y hasta hoy en día, que en muchos casos se utiliza como
herramienta de trabajo, de estudio y de comunicación indispensable.
Internet permite la interconexión de un número elevadísimo de

ordenadores. Esta interconexión posibilitaba el acceso a una gran cantidad
de información y, además, en tiempo real. También se encontraron nuevas
posibilidades como el correo electrónico, lo que permitía el intercambio de
información de forma directa e instantánea entre dos o más usuarios. Se
utiliza de forma masiva para el entretenimiento y el ocio, comienzan a
aparecer gran cantidad de programas y nuevas utilidades que van
multiplicando su uso.
Hoy en día, además de todo lo anterior, se utilizan otras expectativas como

los foros, los chats, los blogs, etc.
Internet es muy utilizado por docentes en materia educativa. Hace muchos
años, la utilización de Internet en la educación era mínima, pero en los
últimos tiempos el avance que está teniendo es imparable. Se ha visto que
en la red podemos encontrar gran cantidad de recursos educativos que se
pueden aplicar en el aula. Estos recursos educativos facilitan la labor
docente, ya que nos permite acceder a gran cantidad de información,
demostraciones, simulaciones, animaciones, etc., lo que apoya y
complementa la manera de dar clase.
Por otro lado, la sociedad demanda cada día más la utilización de las
nuevas tecnologías y de Internet como parte de ellas. Es por eso que los
centros educativos cada día dedican más inversión en ordenadores,
cañones, software, etc., porque es una demanda cada día mayor por parte
de alumnos y profesores.
Por todo lo anterior, surge la necesidad de formar al profesorado en nuevas

tecnologías, en el manejo de ordenadores, uso de Internet, búsqueda de
información en la red, recursos educativos online y elaboración de páginas
web como recursos educativos propios. De esta manera, se ofrece al
profesorado un abanico de posibilidades mucho mayor para facilitar su
labor docente y, además, se capta la atención del alumno, ofreciéndole una
formación mucho más atrayente y práctica.
Sin embargo, en ocasiones, al profesor le es muy difícil encontrar webs que

se ajusten exactamente a sus necesidades. Por este motivo, el profesor
puede optar por crear una web personal que incluya todos aquellos
elementos que él utilice para el desarrollo de su actividad. No obstante, es
muy común que el profesor no conozca las herramientas que le permiten
desarrollar esta labor, de ahí que se haga necesaria una formación del
profesorado en el manejo de las TIC y en aspectos más específicos como
el conocimiento de herramientas de elaboración de páginas web.
En este curso se ofrecerán también unos conocimientos básicos de
navegación por Internet y el uso de herramientas de comunicación con
otros internautas como los foros, los chats y los blogs.
Además, se explicará el procedimiento que se debe seguir para elaborar

páginas webs personales y utilizarlas en clase con los alumnos,
conociendo los elementos fundamentales de una página web y las
herramientas necesarias para su desarrollo.
Por último, conviene conocer algunas aplicaciones didácticas que se

pueden encontrar y que pueden ser de gran utilidad con los alumnos y
otras aplicaciones de interés para el profesor como foros educativos,
bancos de imágenes, etc.
MÓDULO I. Internet
Breve orientación sobre Internet.
Internet es una gran “red de redes” interconectadas entre sí de tal manera

que se comparten todas las informaciones que se encuentran subidas a los
servidores.
Cuando queremos tener acceso a esa información, lo que tenemos que

hacer es conectar nuestro ordenador, a través de la red telefónica, a una
de esas redes e introducirnos en ella mediante programas como, por
ejemplo, Internet Explorer, Mozilla o Google Chrome. Estos programas, que
se les llama genéricamente navegadores, nos permiten la navegación por
Internet.
Para conectarnos a Internet con cualquiera de ellos, solo tendremos que

hacer doble clic sobre el icono, se nos abrirá una pantalla y se cargará la
página web que tengamos predeterminada. En la siguiente imagen
podemos ver una página del navegador Internet Explorer con la página de
Google cargada.
En una página se puede destacar las siguientes zonas de mayor interés:
 Menú de herramientas que nos permite acciones como guardar,

imprimir la página o añadirla a favoritos.
 Barra de navegación, que es la barra desde la que podemos

recargar una página, detener la carga, cargar la página anterior o ir a
la página de inicio.
 Barra de direcciones, que es el lugar donde debemos teclear la

dirección de la página de Internet a la que queramos ir. Esta acción
se nos facilita si tenemos la dirección de Internet guardada en
“Favoritos”.
 Barra de Google. Esta barra es opcional, es decir, puede aparecer

o no y es la que nos permite colocar directamente un término para
que el buscador Google nos encuentre todas las referencias que hay
en Internet relativas a ese término.
 Zona activa, es la zona donde nos va a aparecer la página que

queremos visualizar.
Para navegar por Internet solamente deberemos ir añadiendo en la barra
de direcciones la URL correspondiente a cada página. La URL es la
dirección de la página y normalmente empieza por http://www. seguido de
la dirección específica de cada una. Por ejemplo, la página del Ministerio de
Educación es http://www.mecd.gob.es/redirigeme/?ruta=/
Normalmente las URL vienen especificadas en minúsculas, sin símbolos

raros, acentos o espacios.
Es muy importante que tecleemos correctamente la URL, ya que cualquier

pequeño fallo o errata hará que no se encuentre la página que buscamos.
Por eso, es conveniente que aquellas páginas que utilicemos
frecuentemente las tengamos “añadidas” a favoritos.
En algunas ocasiones nos podemos encontrar que nuestro navegador, en

la zona activa, nos carga la siguiente información:
En este caso lo que puede ocurrir es que la página que hemos tecleado en
la barra de direcciones no exista o que el servidor que contiene la página
esté temporalmente caído (fuera de servicio).
Si nos ocurriera esto, debemos revisar la URL tecleada para asegurarnos
que no tiene ninguna errata y, si tenemos la seguridad de que la URL está
correctamente tecleada, el problema que tenemos será con el servidor. En
ese caso, intentaremos una nueva conexión un poco más tarde para darle
tiempo a que esté activo de nuevo.
En este curso te enseñaremos a crear páginas web sencillas y a manejar

otros recursos de Internet que también se usan en educación como blogs,
foros y chats.
El procedimiento general para crear páginas web es el siguiente:
1) Instalar el programa de edición de documentos HTML en

nuestro ordenador.
2) Crear un sitio web. Un sitio web es un lugar específico en nuestro

ordenador donde guardaremos los archivos que vayamos creando y,
además, crearemos una “conexión directa” de nuestro ordenador con
el servidor para poder subir y/o bajar archivos. Todo este
procedimiento se explicará detalladamente a lo largo del curso.
3) Elaborar un archivo HTML con todos los elementos que nosotros

queramos.
4) Subir el archivo al servidor mediante FTP. FTP es un protocolo de
transferencia de ficheros que permite conectar ordenador-

servidor y hacer de “autopista” entre ellos. Al igual que se
pueden transferir ficheros de ordenador a servidor (subir
archivos), se pueden enviar en la dirección contraria (bajar
archivos).
5) Publicar el archivo, es decir, una vez que el archivo se ha subido al

servidor en el espacio web que se tiene reservado, ya se puede ver en
Internet.
También te enseñaremos muchos recursos didácticos que tienes a tu
disposición para poder utilizarlos, de forma gratuita, con los alumnos en el
aula y para añadirlos a tu página web mediante enlaces externos.
MÓDULO II. Recursos didácticos en Internet
Recursos didácticos.
Podemos definir los recursos didácticos como un conjunto de elementos
en los que podemos apoyarnos para desarrollar la práctica docente. Entre
estos recursos podemos encontrar los tradicionales, como los libros de
texto, las diapositivas, la pizarra, fotocopias, prensa y revistas, etc. Con la
introducción de las nuevas tecnologías en la educación nos estamos
acostumbrando a utilizar unos nuevos recursos como el ordenador, el
cañón, las pizarras electrónicas, Internet, etc.
En Internet podemos encontrar gran cantidad de recursos ya elaborados

que pueden simplificar nuestra labor. Estos recursos nos permiten acceder
a ejercicios, simulaciones, ilustraciones, etc. que nos hace más fácil
nuestra labor y que ésta sea más atrayente para el alumno. De esta
manera, el alumno pasa de ser un mero receptor de un mensaje a un
protagonista en su propio aprendizaje.
Estos recursos podemos encontrarlos en webs personales o en portales

específicos. La mayoría de estas webs son de libre acceso, aunque existen
páginas que presentan un acceso restringido a usuarios registrados o
dados de alta. Un ejemplo de esto último lo tenemos en páginas como la
que podemos encontrar en la siguiente dirección de Internet:
https://www.tecno12-18.com/index.asp
Podemos suscribirnos en ellas, lo cual nos ofrecerá una gran cantidad de

recursos sobre tecnología.
No obstante, muchos de los recursos didácticos que podemos encontrar en

la red están incluidos en portales educativos como Educamadrid, Averroes,
ISFRRP, etc. Casi todas las comunidades autónomas tienen un portal
educativo donde colocan este tipo de recursos y podemos encontrarlo
fácilmente en Internet.
A continuación, podemos ver algún ejemplo de recursos educativos de los

diferentes portales de algunas comunidades autónomas:
Comunidad
Portal Educativo Enlace a los recursos educativos
Autónoma
Asturias https://www.educastur.es/
Cantabria http://www.educantabria.es/
Castilla-León http://www.educa.jcyl.es/es
Galicia
http://www.edu.xunta.gal/portal/
Vamos a detallar algunos de los portales educativos más completos que

podemos encontrarnos.
 Instituto Superior de Formación y Recursos en Red para el

Profesorado, dependiente del Ministerio de Educación, es una
plataforma donde se pueden encontrar muchos recursos didácticos
y muy interesantes, organizados por el público al que van dirigidos y
por asignaturas. Además, se encuentran otros elementos muy
interesantes como el banco de imágenes o el observatorio
tecnológico y actuaciones a nivel Internacional como Malted, Oasis o
e-Twinning.
Podemos encontrarlo en la dirección de Internet:
http://educalab.es/intef
 Educamadrid: plataforma de recursos educativos de la Comunidad

de Madrid que podemos encontrar en la siguiente URL:
https://www.educa2.madrid.org/web/educamadrid/
En ella se ofrece gran cantidad de recursos de Educación Infantil,

Primaria y Secundaria.
 Averroes: plataforma de recursos educativos de la Comunidad de

Andalucía que podemos encontrar en la siguiente dirección:
https://www.juntadeandalucia.es/educacion/portalaverroes/cont
enidosdigitales
Aquí podemos encontrar gran cantidad de recursos organizados por

temas y/o áreas y por niveles educativos (Infantil, Primaria,
Secundaria, Bachillerato y Formación Profesional). Si entramos en la
página por temas podremos encontrar, además, unidades
didácticas, enlaces de interés y publicaciones.
Todos estos servidores tienen convocatorias de premios a materiales

educativos en soporte electrónico que permiten presentar aplicaciones
didácticas relacionadas con la educación donde se busca la innovación, la
adecuación a la práctica docente y la utilidad de los materiales
presentados.
A continuación, se presentan algunos ejemplos de las aplicaciones

didácticas que se pueden encontrar en las plataformas indicadas con un
enlace a ellas.
 Instituto Superior de Formación y Recursos en Red para el

Profesorado (ISFRRP)
 Productores de cine.
http://www.ticatlantico.blogsek.es/creando-nuestra-propia-productora/
 Manual básico de economía.
http://educalab.es/recursos/historico/ficha?recurso=1403
 Entre libros.
 Animalandia.
 Ejercicio físico y salud.
 Educamadrid.
 Realtime Board.
https://www.educa2.madrid.org/web/recursostic/pdi/-
/visor/realtimeboard
 Animalandia.
http://animalandia.educa.madrid.org/
 Educa con SAAC.
http://educasaac.educa.madrid.org/
 Averroes.
 Agrupaciones instrumentales.
https://www.juntadeandalucia.es/educacion/portalaverroes/contenidosdigital
es/contenido/agrupaciones-instrumentales-creacion-de-biblioteca-de-
partituras-y-otros-recursos-didacticos
 Materiales para servicios en red.
es/contenido/materiales-para-servicios-en-red
 Navegando por la historia.
es/contenido/navegando-por-la-historia
 Una escuela con arte.
es/contenido/una-escuela-con-arte
 Viajeras en el tiempo.
es/contenido/viajeras-en-el-tiempo
Algunas de las aplicaciones mostradas son de elaboración propia de la

plataforma que las contiene, otras son provenientes de premios de
convocatorias de materiales curriculares y otras son enlaces externos,
elaborados por profesores, empresas...
Otros portales educativos que también pueden ser interesantes y en los

que podemos encontrar gran cantidad de recursos e información útil para el
profesorado son los siguientes:
http://www.profes.net/
http://educared.fundaciontelefonica.com.pe/recursos-
educativos/
http://www.portaleso.com/
http://www.educasites.net/
Ejemplo de búsqueda de herramientas.

A continuación, vamos a desarrollar un ejemplo guiado de cómo buscar
una página en Internet.
Para comenzar, lo primero que tenemos que hacer es abrir Internet; para
ello pulsamos en el icono de acceso.
Nos aparecerá la ventana del navegador diferente en cada caso, para que
no haya errores vamos a escribir en la barra de navegación la siguiente
dirección: http://www.google.es/
Nos aparecerá la siguiente ventana:
En la parte central nos permite buscar lo que queremos, en nuestro caso

vamos a escribir INSTITUTO SUPERIOR DE FORMACIÓN Y RECURSOS
EN RED PARA EL PROFESORADO, y posteriormente pulsamos en el
botón
Nos aparecerá una nueva ventana que nos proporciona varias páginas
para poder acceder y buscar la página que más nos conviene en el
momento. A nosotros nos interesa http://educalab.es/intef
Pulsar un clic con el botón izquierdo del ratón en esta dirección o en el

nombre de la página. Nos aparecerá la siguiente ventana.
Como lo que queremos buscar es un contenido en concreto, hay que pulsar
sobre las opciones para ver qué es lo que queremos ver. Abajo daremos a
la opción de RECURSOS:
Nos aparecerá la siguiente ventana en donde podremos elegir entre los

distintos recursos para buscar lo que queremos encontrar.
MÓDULO III. Utilización de blogs
Concepto.
Un blog o cuaderno de bitácora es un sitio web donde periódicamente el
autor inserta artículos, que se colocan por orden cronológico, y a los que el
lector puede añadir algún comentario. Incluso el autor puede contestar a
esos comentarios, además de tener la capacidad de mantener o eliminar
aquellos que no crea oportunos. Los blogs normalmente contienen texto,
aunque también pueden contener imágenes y archivos de audio o vídeo.
Existen muchos tipos de blogs como pueden ser los personales,

empresariales tecnológicos, relativos a educación (edublogs), de cine, etc.
Inicialmente, los blogs no eran más que sitios web que se actualizaban
frecuentemente, pero el desarrollo de las herramientas informáticas
permitió actualizaciones más frecuentes y sencillas, que las personas que
querían intervenir no necesitaran conocimientos informáticos muy
elevados. Tanto se ha desarrollado este tema que hoy en día existe
software específico para blogs.
Los primeros blogs comenzaron a aparecer en el año 1995 pero de una

forma muy poco significativa, aunque no ha sido hasta los años 2000 y
2001 cuando se ha producido el gran auge de participación y utilización de
los blogs.
Hoy en día existen herramientas que permiten a cualquier usuario la

creación y mantenimiento de los blogs sin necesitar grandes conocimientos
de informática. En muchos casos, el software está instalado directamente
en el servidor que aloja el sitio, por lo que la creación, mantenimiento y
edición del blog se hace online. Aquellas herramientas que proporcionan un
alojamiento gratuito presentan una funcionalidad más limitada que aquellas
que se presentan mediante un proveedor especializado.
Como curiosidad, podemos decir que los blogs han tenido tanto éxito, que
en 2005 se escogió al día 31 de agosto como Día Internacional del Blog.
Blogs en la Educación.
Los educablogs son el conjunto de blogs relativos a educación. En ellos se
exponen temas relativos al mundo educativo.
Aquí podemos utilizar el blog como un elemento de opinión, donde exponer

diferentes puntos de vista de los aspectos relativos a educación o como
elemento para utilizar por el docente, donde se permita participar al alumno
y crear un aprendizaje constructivo, además de fomentar el uso de las TIC.
Un ejemplo de blog en un proceso educativo podría ser un curso donde el

profesor, que actúa como administrador, fuera insertando comentarios
relativos a los aspectos que se van tratando en él. Posteriormente los
alumnos pueden ir añadiendo comentarios sobre el tema e incluso podrían
proponer futuros temas para opinión. Este tipo de uso se realiza
normalmente en cursos a distancia donde las relaciones ente alumnos y
profesores son más impersonales.
Como la utilización de los blogs es relativamente frecuente, el desarrollo de

estos se está concretando en estos momentos. Por lo tanto, en la
actualidad el uso de ellos en educación no está demasiado extendido.
A continuación, se indican algunos enlaces de interés sobre blogs relativos

a la educación en los cuales se exponen ideas, conocimientos, opiniones,
etc:
 Aulablog: http://www.aulablog.com/
 Tiscar: http://tiscar.com/blogs-para-educar/
 Bitácora de Aníbal de la Torre: http://www.adelat.org/
 Observatorio de la Educación: https://escuela.bitacoras.com/
 Pizarra con garabatos: http://pizarracongarabatos.blogspot.com.es/

 Tu profesor online: http://tuprofesoronline.wixsite.com/portafolio
 Matemáticas cercanas: https://matematicascercanas.com/
 La vuelta: http://fadultos.blogspot.com.es/
Creación de un blog.
En este apartado vamos a explicar brevemente cómo crear un blog
personal. Se expondrá un ejemplo guiado detallado de la creación de un
blog.
 Lo primero que tenemos que hacer es introducirnos en Internet y

escribir la siguiente dirección: https://www.blogger.com/start
 Nos aparecerá una ventana en donde tendremos que registrarnos

para poder crear el blog.
 Para poder registrarnos tendremos que pulsar en el botón de
 En esta nueva ventana tendremos que introducir los datos

correspondientes para poder crearnos como usuarios e introducirnos
en el blog.
Importante: No se debe utilizar ni el nombre de usuario del curso

ni su contraseña.
Los datos van a ser los siguientes:
 Dirección de correo electrónico: tendréis que escribir vuestro e-mail

siempre que sea en gmail o hotmail. En caso de no tener una de
estas cuentas se deberá crear con anterioridad.
 Introducir contraseña: escribiremos una contraseña.

 Mostrar Nombre: vamos a escribir el nombre por el cual van a
conocernos en el blog, en nuestro caso vamos a escribir
“diseñoweb_tu nombre”. El nombre puede ser ficticio o real a vuestro
gusto.
 Verificación de la palabra: tendremos que escribir los caracteres que

se ven de la imagen.
 Aceptación de las condiciones: pulsar en la casilla de verificación de

“acepto” una vez que se han leído las condiciones del servicio.
 Una vez cumplimentada toda la ficha pulsamos en “continuar”
 Nos aparecerá una nueva ventana en donde tendremos que rellenar

varias casillas de título del blog y una dirección de URL.
 Una vez cumplimentado pulsar en el botón de para

pasar de ventana.
 Nos aparecerá la siguiente ventana. En esta ventana nos permite

elegir una plantilla dentro de los modelos que nos muestra.
 Una vez elegida pulsar el botón de
 Nos aparecerá la siguiente ventana en donde ya tendremos creado

nuestro blog.
 Pulsar en el botón de para comenzar a

introducir el texto que queramos.
 Nos aparecerá una nueva ventana con varias fichas que veremos a
continuación:
 En la ficha CREACIÓN DE ENTRADAS nos aparecerán varias

fichas con diferentes opciones, las cuales veremos a continuación:
- La ficha entrada: tendremos que añadir el título que

queremos introducir en el blog, escribir el texto con formatos,
imágenes, vídeos, etc… que queremos que aparezcan en
nuestro blog, pudiendo utilizar la ficha redactar o bien el editor
de texto html.
- En la parte inferior de la pantalla te aparecerán dos botones:
con el botón publicarás lo que

tengas hasta el momento, mientras que el botón
te permite ir guardando los cambios

que vayas realizando.
- En la ficha EDITAR entradas es en donde nos irán

apareciendo todas las entradas que hemos realizado.
- En la ficha MODERAR comentarios nos aparecerá la

siguiente ventana.
Podremos elegir los comentarios pulsando en la opción
 Nos aparecerá una ventana donde podremos configurar quién

puede ver los comentarios, si se muestran u ocultan, formatos,
correo electrónico, etc.
 En la ficha CONFIGURACIÓN podremos configurar nuestro blog,

podremos introducir una breve explicación para saber de qué trata,
un título, si quieres suprimir el blog, qué contenido tiene, etc.
 En la ficha DISEÑO podremos acceder a varias fichas que nos

permitirán cambiar los colores, añadir nuevas imágenes, cambiar de
plantilla, etc.
 En la ficha VER BLOG podrás acceder al blog desde Internet y ver

cómo te va quedando.
Ejemplo guiado paso a paso.

En este apartado, vamos a realizar la creación de un blog detalladamente
de todos los pasos explicados en el apartado anterior.

escribir la siguiente dirección: https://www.blogger.com/start
 Nos aparecerá la siguiente ventana:

 En esta nueva ventana, le daremos a CREAR BLOG y nos pedirá
un email de GMAIL O HOTMAIL. En caso de no tener cuenta se
deberá crear con anterioridad.
 A continuación, escribiremos el nombre que queremos que aparezca

en el perfil de Blogger.
 Pincharemos sobre CREAR UN BLOG.

 Y nos saldrá la siguiente pantalla:
 Aquí tendremos que rellenar varias casillas que explico a

continuación.
- En Título del blog: tendremos que introducir el nombre que le

queremos dar a nuestro blog.
- En Dirección del blog (URL): tendremos que introducir una

dirección con el que lo vamos a identificar. Se recomienda no
utilizar letras mayúsculas ni signos de puntuación ya que
pueden traer problemas, lo mejor es letras minúsculas.
 Una vez relleno, pulsa el botón CREAR BLOG.

 Y ya podremos crear nuestro blog pulsando ENTRADA NUEVA.
 En el menú de la izquierda, encontrarás esta pestaña donde se

puede cambiar el diseño, el tema…
MÓDULO IV. Los foros
Introducción.
Un foro es una aplicación web que da soporte a discusiones en línea sobre
diferentes temas: política, educación, motor, cine, cultura, música, etc.
Los foros son unos complementos de espacios web más generales. A ellos
puede acceder cualquiera y exponer su opinión o incluso establecer
discusiones en un tono informal. Suele existir la figura del “moderador del
foro” que se encarga de abrir el tema de debate, animarlo, eliminar aquellas
intervenciones que pudieran ser ofensivas o insultantes y cerrar la
discusión.
En los foros se puede participar de dos formas: de manera anónima o

previo registro, donde se suele pedir un nick o alias y una dirección de
correo electrónico. Otra manera de participar en un foro es la de aquellos
que solamente leen las aportaciones realizadas pero que no añaden ningún
comentario.
En un foro podemos encontrar algunos aspectos indeseables que deben

eliminarse. Estos aspectos son:
 El spam, que añadirá aportaciones que nada tienen que ver con la
temática del foro, generalmente introduciendo publicidad.
 Los usuarios que interrumpen el foro con comentarios absurdos u

ofensivos y que solo tienen la intención de romper las reglas y el
buen funcionamiento del foro.
 El uso de un lenguaje similar al que se usa en los SMS. Es un

lenguaje que acorta de forma abusiva las palabras. Dificulta el
entendimiento del mensaje, además de no respetar las mínimas
normas de ortografía.
Los foros en la educación.
En el mundo de la educación existen gran cantidad de foros que permiten
relacionarse a gente que comparte este “mundillo”. Los foros en educación
podemos clasificarlos desde dos puntos de vista:
 Los que son específicos de la formación por Internet. En este caso

son foros específicos de un curso, en los que intervienen solamente
los participantes del curso y su tutor, y sirven para intercambiar
opiniones, plantear temas de debate y resolver dudas o cuestiones,
siempre relacionadas con el curso. En ellos, el tutor del curso suele
actuar también como moderador. En este curso hay un foro de este
tipo donde se pueden añadir temas de conversación o realizar
aportaciones a los temas ya planteados. Además, como ejercicio del
curso deberemos realizar una intervención en nuestro foro.
 Los que son genéricos de educación, es decir, son aquellos que

están relacionados con la práctica docente o con aspectos muy
cercanos a ella. Podemos encontrar foros de todo tipo en las
plataformas que nos ofrecen las distintas comunidades autónomas,
el Ministerio de Educación o en webs específicas de educación.
A continuación, se exponen algunos ejemplos de foros relacionados con la

educación:
Foros del Portal educativo de Educamadrid que podemos

encontrar en la dirección:
http://herramientas.educa.madrid.org/foros/index.php?c=1
Foros del ISFRRP, ofrece foros de los diferentes contenidos donde los
usuarios exponen dudas, problemas, inquietudes, etc. Los encontraremos
en la siguiente dirección:
http://educalab.es/buscador?p_p_id=3&p_p_lifecycle=0&p_p_state=maximized&p_p_mode
=view&_3_struts_action=%2Fsearch%2Fsearch&_3_redirect=%2Frecursos%3Bjsessionid
%3D749DA60A31B03A874707987FB57EA63A&_3_keywords=foro
Foros educativos para intercambiar experiencias, ideas e información
general: http://maestra.mforos.com/
Participación de un foro.
En este apartado, vamos a explicar brevemente los pasos de participación
en un foro. En el apartado siguiente se explicará detalladamente y paso a
paso en un ejemplo guiado.
Los pasos a seguir son los siguientes:

escribir la URL del foro donde queremos participar.
 Nos aparecerá una ventana donde tendremos que registrarnos para

poder acceder al foro y así poder publicar nuestro comentario. Para
ello tendremos que pulsar en la opción .
 Nos aparecerá una ventana donde tendremos que introducir los

datos de usuario, contraseña, e-mail…
 Una vez completa la ficha de registro, se tendrá que pulsar en el
botón de para confirmar los datos.
 Nos aparecerá un mensaje que nos indica que ya estamos

registrados y podemos acceder a la página principal para poder
entrar.
 Una vez que nos hemos registrado tendremos que ir a la página

principal para acceder al foro.
 Tendremos que pinchar sobre el debate del foro en el que queramos

participar.
 Para añadir nuevo tema hay que pinchar en:

 Tras pinchar en el tema elegido se puede añadir un mensaje
pinchando en:
 Nos aparecerá una nueva ventana donde tendremos que introducir

nuestra opinión.
 Una vez escrito el mensaje o comentario, pulsar en el botón
para que se añada el mensaje al foro.
Los pasos a seguir son los siguientes:

escribir la URL, que sería la siguiente:
http://cursoshomologados.magister.com.es/phpBB3/index.php
 Nos aparecerá la siguiente pantalla:

 Tendremos que registrarnos para poder acceder al foro y así poder
publicar nuestro comentario. Para ello tendremos que pulsar en la
opción:
 Nos aparecerá la ventana con la explicación de las condiciones de

registro, donde para seguir con la inscripción tendremos que aceptar
las reglas.
 Nos aparecerá la siguiente ventana, donde tendremos que introducir

nuestros datos.
 En “nombre de usuario” tendremos que introducir el nombre de
usuario que nos proporcionó el curso.
 En “dirección de correo electrónico” introducir nuestro correo

electrónico (se puede también introducir un email inventado).
 En “contraseña” tendremos que introducir la contraseña que nos

proporcionó el curso.
 En “confirmar contraseña” tendremos que volver a escribir la

contraseña para que no haya errores de escrituras.
 En la casilla debajo del código tendremos que introducir dicho

código.
 Damos a ENVIAR.
 Pulsar el botón de
 Nos aparecerá un mensaje donde nos indica que ya estamos

registrados y podemos acceder a la página principal para poder
entrar.
 Ahora, tendremos que ir a la página principal para poder acceder al

foro al que queramos entrar. Para ello vamos a pulsar en la palabra
„aquí‟ que nos permite acceder a la siguiente ventana.
 Pulsaremos en el foro denominado “diseño web y herramientas”,
dando un clic con el botón izquierdo del ratón.
 Tras pinchar en el tema „PARTICIPACIÓN EN EL FORO‟ y

presionar el botón se nos abrirá la ventana que nos
pregunte sobre el nombre y contraseña del usuario.
 Después de rellenar los datos necesarios y pinchar en „Login‟ se nos

abrirá la siguiente ventana donde podremos hacer nuestra
intervención en el foro.
 En “asunto” escribimos el tema de nuestro mensaje y en el “cuerpo
del mensaje” ponemos el texto de nuestra intervención.
 Cuando acabemos de escribir nuestro mensaje lo único que nos va
a quedar es pinchar en el botón: para que se añada el

mensaje al foro.
Creación de temas en un foro.
En este apartado vamos a aprender a crear temas en los foros

independientes a los creados con anterioridad. En el apartado siguiente se
expone un ejemplo guiado para que sea más fácil su realización.

escribir la URL del foro en el cual queremos participar.
 En esta pantalla tendremos que seleccionar el curso al que

queremos acceder y crear un nuevo tema de debate.
 Se abrirá una nueva pantalla con todos los temas que han ido
introduciendo los participantes.
 Si quieres introducir un nuevo tema de debate, tendrás que pulsar
en que se encuentra en la parte superior de la ventana.
 Se despliega una nueva ventana donde tendremos que exponer el

nuevo tema (escribiendo el título del tema como “asunto”) con una
breve descripción (en el cuerpo del mensaje), escribir brevemente
desarrollado el tema de debate que quieres exponer pudiendo
modificar los formatos en la barra de herramientas:
Una vez realizados estos pasos tendremos que pulsar para

que se quede publicado nuestro comentario en el foro.
Lo primero que tenemos que hacer es introducirnos en Internet y escribir la

URL que sería la siguiente:
http://cursoshomologados.magister.com.es/phpBB3/index.php
En esta pantalla tendremos que seleccionar el curso o el foro al que

queremos tener acceso para poder leer los comentarios de los demás
participantes o bien introducir mi comentario personal. Para ello,
seleccionar en nuestro caso “diseño web y herramientas”.
 Se abrirá una nueva pantalla con todos los temas que han ido
introduciendo los participantes.
 Si quieres introducir un nuevo tema de debate, tendrás que pulsar
en en la parte superior de la ventana.

 Si entramos en el foro con nuestro usuario se despliega una nueva
ventana con los siguientes datos (en el otro caso nos aparecerá una
ventana para que podamos registrarnos):
 En “asunto”, tendremos que introducir el título del tema que

vayamos a tratar.
 En el cuadro en blanco del centro de la pantalla tendremos

que escribir una breve descripción de nuestro debate y
desarrollarlo.
 También nos permite modificar el texto y ponerle distintos
estilos, (negrita, cursiva y subrayado).
 Una vez realizados estos pasos tendremos que pulsar
para que se quede publicado nuestro tema en el

foro.
Si por el contrario quieres participar en el foro contestando a un tema ya
expuesto por otro participante, tendrás que realizar estos pasos:
 El primer paso, estando ya introducidos dentro del foro, sería elegir

el tema al que tenéis que contestar. En nuestro caso debéis
encontrar al usuario “Tutor20” y el tema de debate sería
“PARTICIPACIÓN EN EL FORO”.
 Una vez encontrada, tendréis que pulsar encima de

“PARTICIPACIÓN EN EL FORO” para poder acceder al tema de
debate y contestar.
 Una vez que pulsamos se despliega otra ventana, con el tema

desarrollado del debate.
 Tras pinchar en , aparecerá la misma ventana explicada

anteriormente, donde vamos a escribir nuestra respuesta.
- La respuesta será la siguiente: “este es mi contestación de

prueba para saber cómo responder a un tema creado en el
foro de Magister”.
 Una vez contestado el tema, deberemos pulsar en…
…de esta manera quedará grabada en el tema elegido nuestra

contestación. Si queremos comprobar que se ha quedado grabado,
podemos volver a pulsar encima del tema, y veréis que aparecerá el tema
original y vuestra contestación.
MÓDULO V. El chat
Introducción.
El chat es una comunicación entre dos o más personas a través de Internet

que se realiza en tiempo real.
Para ello, se necesita un software específico que deben tener todos los
participantes en el chat. Con este sistema podrás entablar “conversaciones
instantáneas” con otras personas de la misma forma que si estuvieras cara
a cara, pero de forma escrita y a través del ordenador.
PHPMYCHAT es el software que vamos a utilizar en este caso. Es un

programa de utilización “online” que podrás encontrar en la siguiente
dirección de Internet:
http://cursoshomologados.magister.com.es/chat/
Una vez que introduzcas esa dirección en la barra de direcciones se te

abrirá una ventana como la siguiente:
En ella introduciremos un nombre de usuario (con el que se nos identificará
después) y una contraseña. No hace falta registrarse. Ahora ya entraremos
en la sala de chat y podremos establecer un diálogo con cualquier
compañero del curso e intercambiar opiniones, conocimientos,
experiencias, etc.
Los chats en la educación.
El principal uso del chat en la educación se produce en la educación a

distancia, donde el alumno se pone en contacto con el tutor para
consultarle alguna duda o para resolver cualquier problema que pudiera
surgir. También puede ser utilizado por los alumnos del curso para
intercambiar dudas, experiencias, inquietudes y, en general, para
establecer cualquier tipo de comunicación entre ellos de forma instantánea.
Se pueden organizar actividades como un debate, lluvia de ideas acerca de
un tema y trabajo en grupo para solucionar un caso o exponer opiniones
entre compañeros y con la actuación puntualizada del profesor en caso de
ser necesario.
A través de esta herramienta, el alumno puede desarrollar la capacidad de
la expresión escrita, el respeto al turno para ser entendido y comprender a
los demás y la comprensión entre otros aspectos.
En la educación presencial, el uso del chat no tiene mucho sentido ya que,

al ser una comunicación en tiempo real, en ese momento alumno y
profesor ya están juntos, por lo que no necesitan establecer contacto por
ningún otro método que no sea de forma oral.
Participación en un chat.
Es importante mencionar que para la realización de una conversación en el

chat tendréis que contactar con algún compañero previamente para poder
llevar a cabo esta actividad.
 Lo primero que tenemos que hacer es conectarnos a Internet e

introducir la dirección correspondiente, que en nuestro caso va a ser
la proporcionada por el curso.
 A continuación, deberemos registrarnos para poder acceder al chat.
Para ello tenemos que pulsar en la opción que

aparece en “administración de cuenta”.
 Nos aparecerá la siguiente pantalla, donde tendremos que rellenar

los datos para poder registrarnos, el nombre de usuario,
contraseña…
 Después de rellenar toda la ficha de “registro de usuario”,
tendremos que pulsar en el botón .
 Nos aparecerá esta ventana , que nos

informa de que hemos sido registrados correctamente.
 Pulsamos el botón para poder volver a la página principal y

entrar en el chat.
 Al volver a la página principal, se rellena automáticamente el nombre
de usuario y contraseña con los datos con los que nos hemos
registrado.
 En la parte inferior de la pantalla nos aparece los datos del chat, las
salas, si queremos crear alguna sala…
 Una vez seleccionada la sala a la que queremos tener acceso,
pulsaremos en el botón de .
 En esta nueva pantalla, veremos los usuarios que están conectados

en nuestra sala. Esto se puede ver en la parte central superior de la
pantalla.
 Si queremos contestar a un usuario o darnos a conocer tendremos

que escribir el texto en la zona inferior de la pantalla.
 Una vez escrito el texto, tendremos que pulsar en el botón

para verificar el contenido y que aparezca en pantalla para que
pueda ser visto por otros usuarios que estén conectados en el
momento.
 Si queremos salir del chat tendremos que pulsar en la opción
que está en la parte superior derecha de la pantalla.
 Lo primero que tenemos que hacer es conectarnos a Internet e

introducir la dirección correspondiente, que en nuestro caso va a ser
la proporcionada por el curso:
http://cursoshomologados.magister.com.es/chat/

 Lo primero que tenemos que hacer es registrarnos para poder
acceder al chat. Para ello tenemos que pulsar en la opción
que aparece en “administración de cuenta”.
 Nos aparecerá la siguiente pantalla, donde tendremos que rellenar

los datos para poder registrarnos.
- En nombre de usuario: tendremos que
escribir el nombre con el que nos
identificaremos en el chat. En este caso
vamos a inscribirnos con el nombre de
“diseño_tu nombre”.
- Su contraseña: será la que elijamos para
introducirnos y que otro usuario no pueda
utilizar nuestro nombre de usuario. La
contraseña que vamos a utilizar será
“tucursoweb”.
- Nombre: tendrás que añadir el nombre real o
ficticio que tengas.
- Apellido: tendrás que añadir el apellido real o
ficticio que tengas.
- Género: Elegir entre “Masculino” o
“Femenino”.
- Su email: Tendremos que introducir su email
para mera comprobación. Este tiene que ser
real, ya que, si no, no podrás conectarte al
chat.
Si queremos que se muestre en el chat nuestro e-mail privado, tendremos
que seleccionar la casilla de verificación de “mostrar públicamente su e-
mail”.
 Después de rellenar toda la ficha de “Registro de Usuario”,
tendremos que pulsar en el botón .
 Nos aparecerá esta ventana , que nos

informa de que hemos sido registrados correctamente.
 Pulsamos el botón para poder volver a la página principal y

entrar en el chat.
 Al volver a la página principal, se rellena automáticamente el nombre

de usuario y contraseña con los datos con los que nos hemos
registrado.
 En la parte inferior de la pantalla nos aparecerá los siguientes datos:
- “Salas por defecto”: si pulsamos en la fecha se despliega las

salas en las que podemos introducirnos. En nuestro caso vamos
a seleccionar “myRoom1”.
- “Salas públicas creadas por usuarios”: se despliega un submenú

donde podemos introducirnos en salas creadas por los propios
participantes del chat. Pero como este es un chat del curso no
aparecerá ninguna sala creada.
- “Crear su propia sala”: podremos crear nuestra propia sala que

puede ser “pública” o “privada”.
 Una vez seleccionada la sala a la que queremos tener acceso,
pulsaremos en el botón de .
 En esta nueva pantalla veremos los usuarios que están conectados

en nuestra sala. Esto se puede ver en la parte central superior de la
pantalla.
 Si queremos contestar a un usuario o darnos a conocer tendremos

que escribir el texto en la zona inferior de la pantalla.
 Una vez escrito el texto, tendremos que pulsar en el botón

para verificar el contenido y que aparezca en pantalla para que
pueda ser visto por otros usuarios que estén conectados en el
momento.
 Si queremos salir del chat tendremos que pulsar en la opción
que está en la parte superior derecha de la pantalla.

MÓDULO VI. Cómo trabajar con archivos FTP
Primero, es necesario explicar que para poder visualizar en Internet

cualquier información es necesario que la información esté accesible desde
Internet.
¿Cómo se hace accesible la información? ¿Cómo se sube la información a

Internet?
Para subir la información a Internet es necesario usar unos programas o

aplicaciones que se conectan a los servidores y permiten copiar la
información desde un sistema u ordenador a un servidor que se encuentre
permanentemente conectado a Internet.
En este curso vamos a usar un programa llamado FTP (de File Transfer
Protocol, protocolo de transferencia de ficheros) para “subir” los
documentos, como imágenes o páginas webs, desde nuestro ordenador a
un servidor (en nuestro caso cursos.anfap.com)
Crear una carpeta en nuestro ordenador.
Lo primero que hay que comprender es que debemos trabajar en nuestro

ordenador teniendo una carpeta en la que se irán guardando todos los
ficheros que posteriormente podremos subir a programas específicos para
ficheros FTP.
En el apartado siguiente, se expone un ejemplo paso a paso para su fácil

realización y que se tendrá que efectuar para poder guardar las actividades
en su lugar correcto.
Vamos a proceder a crear la carpeta y para ello seguiremos los siguientes

pasos:
 Pulsaremos el botón derecho del ratón sobre el escritorio para crear

una nueva carpeta.
 Pincharemos sobre NUEVO – CARPETA.
 La carpeta que creemos podemos moverla al lugar que queramos

dentro de nuestro ordenador. No olvidéis ponerle un nombre a la
carpeta que le identifique para que su búsqueda sea más fácil.
Instalar el programa CORE FTP.
Aunque podríamos hablar de una gran variedad de programas, en esta
ocasión trabajaremos con .
Para ello, debe existir una conexión bidireccional y directa para hacer la
transferencia de ficheros entre nuestro ordenador y el servidor.
FTP son las siglas inglesas de File Transfer Protocol, que significan
Protocolo de Transferencia de Ficheros, que nos permiten conectar nuestro
ordenador con el servidor y enviarle o recibir ficheros.
Para realizar la subida y bajada de ficheros (FTP) utilizaremos programas

específicos que nos permiten esta acción, por ejemplo, Cute FTP, WS FTP,
CORE FTP o programas de edición de archivos HTML que también
permiten la transferencia FTP como Frontpage, Dreamweaver,
Kompozer…
El proceso normal es el siguiente: nosotros elaboraremos un archivo con

código HTML en nuestro ordenador (trabajando en local) y, cuando esté
terminado, lo llevaremos al servidor para que pueda verse en Internet. A
este proceso le llamaremos “subida de ficheros”. Pero al igual que se
puede hacer esta operación, también podemos hacer la contraria, es decir,
podemos pasar un fichero del servidor a mi ordenador, lo que llamaremos
“bajada de ficheros”.
El programa FTP recomendado será el CORE FTP, por su gratuidad. Lo

podemos descargar desde la siguiente dirección de Internet:
http://www.coreftp.com/download.html
 Nos aparecerá una nueva ventana y tendremos que pulsar en
del apartado CORE FTP 2.0: free versión, ya

que es una versión gratuita.
 Nos aparecerá esta nueva ventana donde pulsaremos en el botón
para que nos guarde el programa en nuestro PC y poder

utilizarlo siempre que queramos.
 Aparecerá una ventana donde tendremos que seleccionar la ruta

donde quedará guardado. Recomendamos la unidad de disco duro o
local.
 Para ello, pulsar doble clic encima de la unidad de disco duro o local
(C:) de nuestro ordenador. Aparecerá otra ventana donde habrá más
ficheros. En “Nombre” dejar el predeterminado por el programa.
 Una vez guardado vamos a ejecutarlo. Nos aparecerá un icono en el

escritorio automáticamente o, si no es el caso, tendremos que abrir
Mi PC, doble clic encima del icono de mi disco local o duro (C:), y
pulsar doble clic encima del programa.
 Nos aparecerá una nueva ventana que nos indica que empieza la
instalación del programa.
 A continuación, nos aparecerá una pantalla donde nos informa que

se va a instalar CORE. Para ello tendremos que pulsar en el botón
para pasar a la ventana siguiente del asistente de

instalación.
 Nos aparecerá otra ventana informándonos de la ley de privacidad.
Pulsar el botón para pasar a la ventana siguiente del

asistente de instalación.
 Nos aparecerá una nueva ventana que nos propone una ruta para
guardar el programa ejecutado. Pulsar el botón para

pasar a la ventana siguiente del asistente de instalación.
 Si queremos cambiar la ruta propuesta por el programa, solo
tendremos que pulsar en el botón e introducir la ruta que

necesitemos o queramos.
 Nos aparecerá otra ventana que nos indica las condiciones de

instalación.
 En esta nueva ventana nos permite cambiar el nombre del

programa, aunque se recomienda dejar el propuesto por el
programa. Pulsar el botón para pasar a la ventana

siguiente del asistente de instalación.
 En esta última pantalla, nos indica que ya estamos de acuerdo con

todas las pantallas anteriores. Por lo que debemos pulsar el botón
para continuar con la instalación.
 Nos aparecerá automáticamente la instalación del programa y, si

ésta se ha realizado correctamente, nos aparecerá esta nueva
ventana.
 Pulsar el botón para terminar con la instalación.
En este apartado vamos a realizar detalladamente los pasos de la

instalación de CORE FTP.
 Lo primero que tenemos que asegurarnos antes de empezar es que

tenemos conexión a Internet y verificar su funcionamiento.
 Escribiremos la dirección del programa que vamos a descargar para

poder trabajar con estos ficheros específicos. En nuestro caso
vamos a trabajar con:
http://www.coreftp.com/download.html
 Nos aparecerá esta pantalla:
 Tendremos que pulsar en del apartado CORE

FTP 2.0: free version, ya que es una versión gratuita.
Nos aparecerá esta nueva ventana donde tendremos que pulsar en el
botón para que nos guarde el programa en nuestro PC y poder

utilizarlo siempre que queramos.
El siguiente paso es hacer doble clic sobre el icono y

aceptar las condiciones del programa, por lo que le daremos a I AGREE
(estoy de acuerdo).
Y nos saldrá la siguiente pantalla:
En este momento, estamos aceptando la instalación del programa en
nuestro ordenador y para ello pincharemos sobre .
Si queremos cambiar la ruta propuesta por el programa, solo tendremos
que pulsar en el botón e introducir la ruta que necesitemos o

queramos.
Una vez tengamos la ruta decidida, finalizaremos la descarga pinchando
sobre .
Trabajar con CORE FTP.
Vamos a ver el funcionamiento del programa CORE FTP brevemente, ya

que en el apartado siguiente se va a exponer detalladamente cada paso
que se deberá seguir para trabajar con el programa.
El programa presenta una pantalla dividida en dos partes. En la parte de la

izquierda se presentan los archivos que tenemos en local y en la parte de
la derecha aparecen los archivos que tenemos en el espacio web en
nuestro servidor.
También deberemos indicar cuál es la ruta de nuestro ordenador donde

tendremos guardados los archivos que queremos subir y/o bajar de nuestra
web y, para pasar archivos de nuestro ordenador al servidor, pincharemos
sobre el documento y lo trasladaremos a la otra parte de la pantalla.
En este apartado vamos a ver cada parte de la ventana para saber utilizar
a la perfección dicho programa.
 Lo primero que tenemos que hacer es abrir el programa. Para ello
iremos al botón o de nuestro
ordenador, y buscaremos la carpeta . Dentro de esta
carpeta, buscaremos el icono .
 En este momento, se abrirá una ventana nueva:
 En la parte de la izquierda nos aparecerán todos los archivos que

tenemos en local, es decir, en nuestro ordenador.
 En la parte de la derecha estarán todos los archivos que tenemos en

nuestro espacio web en el servidor.
Acceder a un espacio Web.
En este apartado vamos a explicar cómo poder acceder a un espacio web

desde el cual vamos a bajar y subir ficheros para poder trabajar en el
servidor. En el apartado siguiente, se explicará detalladamente un ejemplo
guiado para poder acceder a un sitio.
Para crear un sitio Web, pulsaremos sobre el botón que encontramos en la
esquina superior izquierda y se nos abrirá la siguiente pantalla (Site

Manager)
Nombre del sitio
Servidor
Usuario
Contraseña
Aquí, el usuario rellenará los campos señalados sobre la imagen, donde

incluirá el nombre que le quiera dar al sitio que está creando, el nombre del
servidor, el usuario y la contraseña.
También deberemos indicar cuál es la ruta de nuestro ordenador donde

tendremos guardados los archivos que queremos subir y/o bajar de nuestra
web.
Espacio Web en 000webhost.com.
Para poder utilizar COREFTP necesitamos tener un espacio que permite

conexiones FTP, por ejemplo, ofrecido por el servicio de HOSTING.
El procedimiento para crear una cuenta en el servicio 000webhost España

es el siguiente:
Primero entramos en la página
https://es.000webhost.com/mejorar?gclid=EAIaIQobChMI9Lfs9evR4QIV1p
TVCh2UsgZNEAAYASABEgLFSPD_BwE
Y aparecerá la siguiente pantalla:
Para crear una cuenta, haremos clic sobre el botón REGISTRO GRATIS y
nos solicitarán los siguientes datos: correo electrónico, contraseña y repite
la contraseña de nuevo, como veremos en la siguiente imagen.
El programa nos enviará un email a la dirección que hemos indicado
anteriormente y lo verificaremos pinchando sobre el enlace.
Si en el Website Name no especificamos un nombre, el programa nos lo

pondrá por nosotros.
Y haremos clic sobre CREATE.
Nos saldrá la siguiente ventana:

A continuación, haremos clic sobre BUILD A WEBSITE EASILY para
construir nuestro sitio Web.
En esta pantalla, elegiremos la plantilla que tendrá nuestro sitio Web, por lo
que elegiré una al azar.
ANOTACIÓN: si el programa nos sigue apareciendo en idioma inglés,

podemos cambiarlo a castellano en la pestaña que nos encontraremos en
la parte superior derecha de la pantalla.
Dentro del alojamiento Web nos incluye una gran variedad de herramientas
para la creación del mismo.
Descargamos la página ftp.htm.
A continuación, hablaremos sobre los pasos a seguir para poder bajar y

subir ficheros del servidor.
 Lo primero que tenemos que hacer es crear una carpeta donde

guardaremos la página. Por ejemplo „curso_web‟ en el disco C.
 Luego tenemos que entrar en la página, con uno de los

navegadores:
https://web.magister.com/oferta-academica/cursos-
homologados/
 Después de este paso, debemos guardar la página en nuestro

ordenador: elegimos la opción Guardar como... del menú archivo,
elegimos la carpeta en nuestro ordenador y presionamos el botón
Guardar.
 Para encontrar la carpeta de una forma fácil en la parte izquierda,
bastará con trasladar la carpeta que hemos guardado en el disco C
a la parte izquierda de la pantalla.
Ahora es necesario subir el fichero ftp.htm a un directorio que vamos a

crear con nuestro usuario.
 En la parte derecha tendremos que entrar en el directorio

public_html.
 Pulsamos en “Make Directory” para poder crear el directorio.
 Escribir el usuario que te proporcionó el curso para poder crear el

directorio (en el ejemplo vamos a suponer que el usuario es
web0000):
 Pulsar el botón para aceptar los cambios.
 Ya tendremos creado nuestro directorio y tenemos que buscarnos

dentro del listado de la parte derecha, dentro de los directorios del
servidor y pulsar doble clic encima para abrirlo.
 Aparecerá, ya que no tenemos nada introducido dentro vacío.
 Una vez que está abierto, vamos a proceder a subir el fichero

ftp.htm.
 Para ello seleccionar dentro de nuestra carpeta C:\ curso_web/ el
fichero ftp y el directorio con imágenes (tendremos

que seleccionar de nuestro equipo, por ello seleccionar el fichero en
el cuadro de la izquierda).
 Como ya tenemos seleccionado el directorio en el servidor donde
vamos a subir el fichero, pulsa la flecha “Upload” para subir al

servidor el fichero.
Ahora debemos comprobar que realmente se ha subido bien y que

podemos verlo desde Internet. Para ello tenemos que abrir una ventana de
Internet e introducir la URL o dirección en la que teóricamente se encuentra
el fichero que hemos subido.
Si el nombre de servidor (nuestro subdominio creado en el servicio de
hosting 000webhost.com) es el siguiente:
www.webdepedrogarcia.webege.com3
Nuestro usuario (para este ejemplo) es web0000;
y el fichero o página web que vamos a ver es ftp.htm, pero las imágenes
no se verán ya que no las hemos subido.
Entonces, deberíamos poner lo siguiente en el navegador o explorador de

Internet:
www.webdepedrogarcia.webege.com/web0000/ftp.htm
O también podríamos poner:
http://www.webdepedrogarcia.webege.com/web0000/ftp.htm
Recuerda que en lugar de web0000 debes poner el nombre del directorio

que hayas creado y en lugar de webdepedrogarcia.webege.com debes
poner el nombre de subdominio que hayas creado en el servicio de hosting
000webhost.com.
MÓDULO VII. Lenguajes utilizados para diseño y
programación de las páginas Web
Extensiones de archivos creados.
El lenguaje más común para la creación de páginas web es el HTML. Este

lenguaje se escribe con etiquetas en forma de código. La creación del
archivo puede hacerse de dos formas distintas:
 Escribiendo directamente el código, lo que permite hacer gran

cantidad de cosas, pero exige un conocimiento profundo del
lenguaje.
 Utilizando programas específicos que, mediante iconos permiten

hacer tareas como insertar texto, imágenes, hacer hipervínculos,
maquetar, etc. De estos programas, los más conocidos son:
- Frontpage, de Microsoft →
- Dreamweaver, de Macromedia →
En ambos casos se nos generará un archivo con extensión .HTM o .HTML.
Aunque ambos programas se pueden utilizar para la elaboración de

páginas web, Dreamweaver es mucho más completo y versátil que
Frontpage. Estos programas son de pago y exigen un ordenador potente
para poder usarse fácilmente.
Para la realización de este curso, se ha elegido un programa gratuito y muy

completo que permite realizar páginas de forma sencilla. Vamos a utilizar el
programa KompoZer y todas las explicaciones irán orientadas a este
programa.
Otros programas utilizados.
Existen muchos programas que nos permiten gestionar el código HTML

mediante WYSIWYG, es decir, que nos permiten realizar algo en código
HTML, sin necesidad de teclear el código, que será lo que realmente se
verá. Entre los programas más comunes está Frontpage y Dreamweaver.
 Frontpage es un editor de páginas web de la empresa Microsoft,

formando parte del paquete Office que ya ha quedado algo obsoleto.
 Dreamweaver es un editor de páginas web creado por Macromedia,

que actualmente ha sido absorbida por Adobe. Es el editor de web
más utilizado con diferencia. Se completa con programas como
Flash, Fireworks o Freehand. Sus versiones más conocidas han sido
la MX 2004, la versión 8 y actualmente la CS3.
 KompoZer es un editor gratuito muy usado y muy indicado para la

iniciación en la creación de páginas web por su sencillez de uso.
Otros programas de uso complementarios para páginas web son: Flash,

Photoshop, Hot Potatoes, etc. A continuación, mostramos algunas
características generales de cada uno de ellos.
Complementariamente a Dreamweaver se puede utilizar otro tipo de

software que permite mejorar el aspecto y las utilizaciones de una página
web. Entre ellos destacamos los siguientes:
a) Flash: es un programa de Macromedia que permite hacer botones,

animaciones, etc. Con Flash se crean archivos modificables con
extensión. FILA y archivos no modificables, que son los que
ofrecen la animación y que tienen extensión .SWF. Para poder ver
la acción que tienen estos archivos es necesario tener instalado, al
menos, el PLUG-IN de Flash. También se pueden crear archivos
.EXE que se ejecutan sin la necesidad del PLUG-IN. En cualquiera
de estos casos, el archivo .SWF o el archivo .EXE se insertan en
una página HTML.
b) Photoshop o cualquier otro programa de edición de imágenes que
nos permite editar imágenes para poder modificarlas, pasarlas a
formatos web según nuestras necesidades y obtener así archivos
para web, con extensiones GIF o JPG.
c) Hot Potatoes, que nos permite crear cuestionarios, sopas de

letras, crucigramas y otro tipo de actividades, en código HTML que
podemos rellenarlos e, incluso, corregirlos automáticamente.
MÓDULO VIII. Dirección de URL
Concepto.
La URL son las siglas de Uniform Resource Locutor, es decir,

Localizador Uniforme de Recursos, que son el conjunto de caracteres que
colocamos en la barra del navegador cuando queremos entrar en una
página web. Como ejemplos de URL podemos encontrar:
https://es.wikipedia.org/wiki/Portada
https://www.movistar.es/
https://www.bancosantander.es/es/particulares
https://www.bankia.es/es/particulares
Podemos optar por dos formas de colocar la URL en el navegador, son las
siguientes:
 Escribiendo con el teclado toda la dirección en la barra de

navegación. En este caso, debemos tener cuidado de introducir
correctamente todos los caracteres para que se pueda cargar la
página web.
 Utilizando “favoritos”, es decir, aquellas URL que utilicemos

frecuentemente, las “guardaremos” en favoritos para pinchar
directamente en ellas y no tener que teclearlas cada vez que
queramos visitar su página web.
Caracteres que no deben utilizarse.
Cuando guardamos nuestras carpetas, subcarpetas y archivos, debemos

tener mucho cuidado de no utilizar algunos caracteres ya que pueden dar
problemas a la hora de cargar la página web. Estos caracteres son los
siguientes:
 Símbolos raros como: ñ, @, /, %, el punto (.), la coma (,), etc.
 Letras mayúsculas.
 Espacios en blanco, en su caso podemos utilizar el guión bajo (_).
 Tildes.
En cambio, sí pueden utilizarse números.
El no uso de estos caracteres es muy importante ya que, si los usamos, se

nos pueden producir errores que serán muy difíciles de localizar a la hora
de que el navegador cargue la página
Estructura de una dirección Web.
La estructura de una URL es la siguiente: primero se nombra el servidor

que incluye a la página que estamos buscando, después viene la estructura
de carpetas y subcarpetas donde se encuentra la página que buscamos y,
por último, el nombre del archivo que buscamos, con la extensión .HTM o
.HTML.
A continuación, vemos un ejemplo de esto:
https://intef.es//index.html
Carpeta: Archivo:
Servidor Recursos index.html
Esta URL estará en el servidor del ISFRRP (Instituto Superior de
Formación y Recursos en Red para el Profesorado) y dentro de é,l en la
carpeta “recursos” y, dentro de ésta, en la subcarpeta “bachillerato”, y
dentro de ésta en la subcarpeta “tecnología”, y dentro de ésta en la
subcarpeta “manual” y dentro de ésta llamamos al archivo “index.htm”.
Esta es la forma de llamar a un archivo. Debemos tener esto en cuenta

cuando elijamos la estructura de carpetas, subcarpetas y archivos de
nuestra web.
Se aconseja nombrar “index.htm” al archivo que queremos que sea la

página principal o portada de nuestra web, ya que este es el nombre que
los navegadores cargarán por defecto.
MÓDULO IX. Introducción a los programas de
diseño web
Este curso ha sido diseñado para familiarizar al alumno con las bases
fundamentales del diseño web.
Antiguamente, las páginas Web se diseñaban mediante programación,

pero en la actualidad se han creado una serie de programas para diseñar
páginas de manera más fácil, apareciendo automáticamente la
programación de una página. Ésto ha evitado la dura tarea de los
programadores y se ha facilitado el trabajo en esta materia.
En este curso vamos a aprender a crear páginas Web utilizando el

programa Kompozer para su orientación, pero, como hemos indicado, hay
otros programas que se podrían usar.
Algunos de estos programas que podemos utilizar para diseñar páginas

Web son Dreamweaver, Frontpage, GoLive, Namo Web Editor, etc…
MÓDULO X. Introducción a los componentes de
una página Web
HTML es un lenguaje diseñado para estructurar textos y presentarlos en

forma de hipertexto, que es el formato estándar de las páginas web.
El HTML puede ser editado con cualquier procesador de texto, aunque

existen programas de edición de código HTML. Estos programas se los
conoce como WYSIWYG, es decir, las siglas del inglés, “lo que tú ves es lo
que tú obtienes”, esto es, que lo que tú vas viendo al hacer un archivo es lo
que realmente vas a obtener.
El código HTML está formado por etiquetas, que son instrucciones con una
señal de inicio y otra de finalización. Todas las etiquetas de inicio se
caracterizan porque van entre signos de menor que y mayor que (<>) y las
de finalización llevan además la barra del signo de división (</>).
Para ver el código fuente de una página web es tan fácil como pulsar las
teclas CONTROL + U sobre nuestro teclado. Nos aparecerá algo parecido
a esto:
Si queremos ver el código fuente de una página web que estemos
diseñando con KompoZer debemos pulsar en la parte inferior izquierda de
la pantalla en el apartado: “código fuente”. Tal y como se muestra en la
siguiente imagen:
Donde podemos ver las siguientes etiquetas:

 <HTML> como inicio de documento HTML y </html> como fin de ese
mismo archivo.
 <TITLE> marca el inicio del título y </title> su final.
 <HEAD> marca el encabezamiento de la página y su final viene
indicado por </head>.
 <BODY> el inicio del cuerpo del archivo y </body> como el fin.
Otras etiquetas que nos encontraremos:

 : párrafo nuevo.
 : salto de línea forzado.
 <TABLE>: comienzo de una tabla (las filas se identifican con <TR> y
las celdas dentro de las filas con <TD>)
 <A>: indica la existencia de un hipervínculo o enlace, dentro o fuera
de la página web.
Debe definirse el parámetro de pasada por medio del atributo href (ejemplo:
<a href="http://www.google.com">Google</a> se representa como Google).
 <IMG>: indica la existencia de una imagen para mostrarse en el
navegador.
 : Color del texto, representado por un código
hexadecimal.
 : Texto en negrita.
 : Texto en cursiva.
 : Texto subrayado.
Si en un momento dado nos interesa, podemos colocar el archivo en

formato código y realizar las modificaciones que deseemos en las
etiquetas, que se verán reflejadas en el formato diseño.
De esta forma podremos realizar algunas actualizaciones o modificaciones

que de otra manera se hacen muy difíciles de ejecutar.
No obstante, la manipulación del código o la incorporación de elementos

mediante código requieren un manejo muy fluido del lenguaje HTML.
MÓDULO XI. El programa Kompozer
Pasos para descargarnos el programa Kompozer.
El programa Kompozer es totalmente gratuito, por lo que explicaremos a

continuación cómo descargarlo.
Lo primero que tenemos que hacer es conectarnos a Internet e introducir

en la barra de navegación la siguiente dirección.
https://kompozer.uptodown.com/windows/descargar
Se nos abrirá una ventana nueva como la que aparece a continuación:
Y pulsaremos en el botón . A partir de este momento, empezará

la descarga del programa y una vez descargado comenzará la instalación
(también se puede elegir la opción guardar, descargarlo en el escritorio y
posteriormente ejecutarlo dándole doble clic).
Aceptaremos la licencia del programa…
Seleccionaremos la carpeta donde queremos que se guarde el documento.
Seleccionaremos el nombre que queremos que tenga la carpeta del

programa.
Seleccionaremos las tareas adicionales que queremos que se cree, como
crear un icono en el escritorio o crear un icono de inicio rápido.
A partir de este momento, el programa estará listo para instalarse. Una vez
queremos que empiece con su descarga, haremos clic sobre INSTALAR.
Una vez el programa esté descargado, haremos clic sobre FINALIZAR.

El programa se ha instalado correctamente en castellano.
MÓDULO XII. Páginas en Kompozer
Cómo trabajar en una página en Kompozer.
Una vez abrimos el programa Kompozer, nos aparece esta ventana:
El la página podemos introducir toda clases de objetos, texto... de forma

muy parecida a como lo haríamos en un documento de Word.
En las barras de herramientas podemos encontrar los iconos de las

funciones más habituales:
Y también disponemos de la “Barra de Menús”:
Si pulsamos encima de cada uno de ellos con el botón izquierdo del ratón,
nos aparecerán submenús con distintas opciones que podemos utilizar en
el programa, como por ejemplo:
Formato
Ver
En la parte inferior derecha de la ventana o haciendo clic sobre VER, nos
aparecerán unas etiquetas.
Esto nos permite tener distintas vistas de la página que estemos creando.
 En “Normal” nos aparecerá tal y como lo estemos creando.
 En “Etiquetas HTML” nos aparecerán todos los objetos como en la

“vista Normal” pero con etiquetas que identifican a los códigos.
 En “Código Fuente” no aparecerán los objetos, sino el código

necesario para crearlos.
 En “Vista preliminar” nos permitirá ver cómo queda antes de

publicarlo y verlo en el Internet Explorer u otro programa de
visualización.
Es recomendable guardar frecuentemente la página, ya que el programa

nos permite ver la página tal y como se vería en el explorador; si la página
no esta guardada previamente no nos permitirá verla.
Es imprescindible que cuando escribamos el nombre de la página o
creemos directorios se redacten sin acentos, sin ñ, ni espacios y sin
mayúsculas, ya que será más fácil trabajar con las páginas.
Bien MAL
pagina_ejemplo1.htm página_ejemplo1. htm

MÓDULO XIII. Guardar páginas en Kompozer
Guardar una página nueva.
Al crear una nueva página, habrá que indicarle dónde guardarla para que,
posteriormente, podamos abrirla o actualizarla y ver cómo quedaría en el
explorador.
 Pulsar en el “menú archivo”.
 Seleccionar la opción para indicarle dónde queremos

guardar la nueva página.
- Nos aparecerá una ventana donde tendremos que

seleccionar la ruta donde queremos guardarla y el nombre
por el que la identificaremos con la página.
 Pulsar el botón de y ya estaría guardada la nueva página

dentro de nuestra carpeta.
Guardar una página existente.
Cuando abrimos una página que ya existía con anterioridad y realizamos

modificaciones, a la hora de guardarla ya no tendremos que indicarle ni
dónde ni con qué nombre.
Vamos a realizar un ejemplo para comprobar estos pasos:
 Pulsar en el “Menú Archivo”.
 Pulsar en el “Menú Abrir” para abrir la página que tenemos

guardada.
 Selecciona dentro de tu carpeta que se encuentra en C: / curso_web

la página con el nombre de “pagina_prueba1”.
 Pulsar el botón de “Abrir” para abrir la página en pantalla.

 Escribe el siguiente texto en la página que acabamos de abrir:
“VAMOS A GUARDAR UN DOCUMENTO GUARDADO CON
ANTERIORIDAD”.
 Ahora vamos a guardar las modificaciones en este documento, para

ello tienes que pulsar en el “Menú Archivo”.
 Seleccionar la opción “Guardar”, se guardará automáticamente sin

tener que escribir nada, ya que hemos guardado las modificaciones
que hemos realizado sin cambiar ni el nombre ni el sitio en donde
está guardada la página.
MÓDULO XIV. Vista previa en el explorador
Kompozer nos permite ver, mediante la opción “visualizar vista en el

explorador”, cómo nos quedaría la página creada en Internet y cómo
funcionan sus comandos una vez insertados, antes de colgarlos en
Internet.
Para ello tendrás que seguir los siguientes pasos:
 Teniendo abierta una página, la que estemos diseñando, pulsar en

el “Menú Archivo” y seleccionar “Guardar” si la página ya está
guardada con anterioridad o “Guardar como” si no tiene nombre ni
ruta (estos puntos están explicados anteriormente).
 Una vez guarda la página, pulsamos en el “Menú archivo” y
seleccionamos la opción . También

podremos acceder a esta opción pulsando la tecla de función “F5”.
La página aparecerá tal y como quedará una vez colgada en Internet.
MÓDULO XV. Descarga de archivos
Cómo descargamos las imágenes necesarias para los

ejemplos y actividades.
En las actividades y en los ejemplos prácticos se requieren una serie de

imágenes para su realización. Se puede usar cualquier imagen, siempre
que su tamaño no exceda los 100kbytes (se pueden usar mayores, pero la
página tardaría mucho en cargar o abrir).
La recomendación es descargarlas en nuestro equipo de la siguiente

manera:
 Tendremos que entrar en un buscador por ejemplo, Google. Escribir
la siguiente URL:
https://www.google.es/
 Haga clic sobre
 Añadir un palabra o frase correspondiente a la imagen que

queremos buscar, por ejemplo, lobo.
 Pulsar en el botón para activar la

búsqueda.
 Nos aparecerá una ventana con todas las imágenes que aparezcan
con este nombre.
 Seleccionar la imagen que queramos escoger, por ejemplo:
 Clic sobre la imagen con el botón derecho del ratón y se despliega el

menú contextual.
 Seleccionar la opción , nos aparecerá la
siguiente ventana.
- En “Guardar en”: tendremos que seleccionar la ruta donde

queramos guardarla. En nuestro caso C:/curso_web/.
- En “Nombre” escribir el nombre por el que vamos a identificar

la imagen. En nuestro caso “lobo” o “lobo1” (recomendamos
nombres simples y cortos).
MUY IMPORTANTE: Los nombres de las imágenes deben cumplir las

siguientes normas:
Cuando guardemos nuestras imágenes, carpetas, subcarpetas y archivos
debemos tener mucho cuidado de no utilizar algunos caracteres ya que
pueden dar problemas a la hora de cargar la página web. Estos caracteres
son los siguientes:
 Símbolos raros como: ñ, @, /, %, el punto (.), la coma (,), etc.
 Letras mayúsculas.
 Espacios en blanco, en su caso podemos utilizar el guión bajo (_).
 Tildes.
 Pulsar el botón para que se quede guardada la imagen.
De esta manera podremos localizar todas las imágenes que necesitemos

en las actividades y los ejemplos prácticos.
MÓDULO XVI. Elementos de texto en una página
Web
Escribir texto.
KompoZer nos permite introducir texto y modificarlo a nuestro gusto. Para

ello tendremos que seguir los siguientes pasos:
Nos fijamos dónde está el cursor de texto y ahí escribiremos lo que

queramos. Hay que tener en cuenta dónde se escribe el texto, esto lo
explicaremos en el apartado siguiente.
Modificar texto.
En este apartado vamos a ver cómo podemos modificar los formatos del
texto para mejorar su presentación.
Tipos de fuente.
Para cambiar las fuentes vamos a explicar dos formas posibles que poder
realizar esos cambios.
Forma 1:
 Seleccionar el texto que queremos modificar.
 Pinchar sobre el icono .
 Seleccionar la opción .
 Se despliega un submenú con todos los estilos de fuentes donde

podremos elegir la que se quiera solo pulsando encima de la fuente
elegida.
Forma 2:
 Seleccionar el texto al que vamos a cambiar el tipo de fuente.
 Ir a la barra de herramientas
 Pulsar en la flecha que nos aparece en la parte de la derecha y

se despliega un submenú con todos los tipos de fuente disponibles.
Nota aclaratoria: Se puede cambiar el tipo de fuente antes o después

de escribir el texto, la única diferencia es que si tenemos el texto
escrito tendremos que proceder a seleccionar previamente antes de
cambiar el tipo de fuente.
Tamaño.
Para cambiar el tamaño del texto, tendremos que pulsar en el “Menú
Formato” y seleccionar la opción y se despliega un submenú con

los distintos tamaños que nos permite aplicar.
También podemos acceder mediante los iconos “disminuir texto

aumentar texto.
Color.
Para cambiar el color de la fuente, solo hay que seleccionar el texto y
pulsar la opción color . Se puede ver que hay dos colores: uno se
refiere al texto (el más a la izquierda y arriba) y otro al fondo (el más abajo
y a la derecha).
O desde el “Menú Formato” y seleccionar la opción “Color del texto”.

Cuando pulsas encima de la opción “color” se despliega un submenú con
gran variedad de colores. Solo tienes que hacer clic encima del que
necesites y se aplicará en el texto seleccionado.
Estilo.
Esta opción nos permite añadir estilos a la fuente que tengamos

seleccionada. Hay que tener en cuenta que algunos tipos de fuente son
incompatibles con estas opciones, por ejemplo, el tipo Monotype Cursiva,
no nos permite añadir cursiva porque esta fuente es cursiva.
 Para acceder a estos estilos podemos acceder desde el “Menú
Formato” y seleccionar la opción .
 Se despliega un submenú donde podremos seleccionar varias

opciones.
 A continuación, vamos a explicar estas opciones:
 : nos permite añadir un grosor mayor al texto

independientemente del color que tenga ésta. Negrita.
 : nos permite poner en cursiva el texto seleccionado.
 : nos permite añadir subrayado debajo del texto

seleccionado.
 : nos permite tachar algún texto, por ejemplo, en los

ejercicios de inglés o lenguaje, que se dice que la opción correcta
no sería esa.
 : nos permite poner el texto por encima de otro texto.
 : nos permite poner el texto por debajo de otro texto.
También podemos acceder a algunos de estos estilos desde la barra de

herramientas.
Negrita Subrayado
Cursiva
Alineación del texto.
Kompozer nos permite elegir la alineación del texto según nuestra

necesidad.
Para acceder a esta opción tenemos que seguir los siguientes pasos:
 Pulsar en el formato .
 Se despliega un submenú donde podremos elegir varias

alineaciones que detallo a continuación.
- Alineación izquierda o el icono de la barra de herramientas : nos
permite alinear el texto a la izquierda.
- Alineación a la derecha o el icono de la barra de herramientas :

nos permite alinear el texto a la derecha.
- Alineación centrada o el icono de la barra de herramientas : nos

permite alinear el texto desde el centro hacia los extremos.
- Alineación justificada o el icono de la barra de herramientas : nos

permite alinear el texto tanto a la derecha como a la izquierda.
Viñetas y numeración.
El programa nos permite añadir distintos tipos de viñetas, numeración…
 Si queremos añadir una viñeta o numeración para que el texto nos

aparezca en niveles distintos, tendremos que pulsar en las opciones:
Numeración Viñetas
 Cuando pulsamos en uno de estos dos iconos, nos aparecerá

directamente la opción de “números” o “símbolos”.
Si queremos seleccionar algún modelo distinto, tendremos que pulsar

sobre “Menú Formato” y seleccionar la opción “Lista”.
 Sitúa el cursor debajo de lo que tenemos escrito.

 Selecciona la opción “Viñetas” y nos aparecerá la viñeta por
defecto.
 Vamos a cambiar la viñeta. Pulsar en el “Menú Formato” y

seleccionar la opción “Lista”. Dentro del submenú que aparece
pulsar en .
 En esta ventana nos permite elegir entre un número limitado de

estilos. Seleccionar la opción “circunferencia”.
 Pulsar el botón
Sangría.
Si queremos aumentar la sangría del texto, podremos realizarlo desde las
opciones “sangrar texto” y “desangrar texto” . Estas opciones nos

permiten añadir espacios en blanco en las primeras líneas y en el resto del
párrafo no.
Con todas las modificaciones que hemos realizado con el texto escrito, nos
debería de quedar el resultado final de la siguiente manera.
Lo primero que vamos a hacer es crear una página nueva para poder ir
introduciendo texto y luego guardarla con el nombre de “pagina_ejemplo1”
(tenga en cuenta que en realidad la página se guardará como
“pagina_ejemplo1.html” donde .html es la extensión de la página).
Para ello, abriremos el programa KompoZer, vamos a “Menú archivo” (en la

parte superior izquierda) y en el desplegable seleccionar “nuevo”.
Se abrirá una ventana en la que seleccionaremos “un documento vacío” y

daremos al botón “crear”.
Generalmente, se abre una pantalla que te pregunta el título que quieres

que tenga la página. Introducirás el texto: es una página de ejemplo y
presionas “ENTER”.
Se despliega la ventana para guardar el archivo.

Escribir “pagina_prueba1” y seleccionar el directorio “curso_web” como
destino.
Ahora vamos a escribir el siguiente texto: “ENCABEZADO DE LA

PÁGINA”, pulsar la tecla Enter y escribir “RESTO DEL TEXTO EN
PÁRRAFO”
Selecciona el texto “ENCABEZADO DE LA PÁGINA”
Para modificar todos los formatos tendremos que acceder al menú

y tendremos que seleccionar las distintas opciones que aparecen.
Ahora vamos a cambiar los formatos del texto, que sirven para
predeterminar si queremos encabezados, párrafos, etc.
Selecciona el texto que será el “ENCABEZADO DE LA PÁGINA”; para ello
tenemos que pulsar en el “menú formato” y seleccionar la opción y

nos aparecerá un submenú donde podremos seleccionar el estilo que
tendrá nuestra letra, si es encabezado, párrafo, título 1…
En nuestro caso vamos a seleccionar TÍTULO 1.
Seleccionar ahora “RESTO DEL TEXTO EN PÁRRAFO” e introducirnos en

el “Menú Formato”, seleccionar la opción “Párrafo” y dentro del submenú
que nos aparece seleccionar la opción .
Ahora vamos a cambiar las fuentes del texto. Selecciona el texto

“ENCABEZADO DE LA PÁGINA” y pulsar sobre el “Menú Formato” y
seleccionar la opción . Se despliega un submenú donde

podremos seleccionar todas las fuentes de las que disponemos.
Seleccionar la letra Monotype Cursiva (en caso de no disponer de esta

letra, elegir otra cualquiera).
Ahora vamos a cambiar la fuente del resto del texto accediendo a través de
la barra de herramientas:
Selecciona el siguiente texto, “RESTO DEL TEXTO EN PÁRRAFO”.
Pulsa en la opción de la barra de herramientas FORMATO – TIPO DE

LETRA - ANCHURA VARIABLE.
Selecciona pulsando en la flecha para que nos aparezca todas las

fuentes de las que disponemos.
Seleccionar la fuente Verdana (en caso de no disponer de esta letra elegir

otra distinta).
Para cambiar el tamaño del texto tendremos que pulsar en el “Menú
Formato” y seleccionar la opción y se despliega un submenú con

los distintos tamaños que nos permite aplicar.
También podemos acceder mediante los iconos “disminuir texto”

“aumentar texto”.
- Selecciona el encabezado, y añádele el tamaño “extragrande”.
- Selecciona el texto que va en párrafo y añádele el tamaño “grande”.
Para cambiar el color de la fuente, solo hay que seleccionar el texto y
pulsar la opción color o desde el “Menú Formato” y seleccionar la

opción “Color del texto”. Cuando pulsas encima de la opción “color” se
despliega un submenú con gran variedad de colores. Solo tienes que hacer
clic encima del que necesites y se aplicará en el texto seleccionado.
- Seleccionar el texto de encabezado y aplicar un color “azul”.
- Seleccionar el texto que va en párrafo y aplicar un color “rojo”.
Existen dos opciones que nos permiten modificar el texto de manera

distinta a las explicadas anteriormente.
- La opción “Negrita” nos permite añadir un grosor mayor al texto

independientemente del color que tenga ésta.
- La opción “Cursiva” nos permite poner en cursiva el texto

seleccionado.
- La opción “Subrayar” nos permite añadir subrayado debajo del

texto seleccionado.
También podemos acceder a dichas opciones desde el “Menú Formato”,

y se despliega el siguiente submenú.
- Seleccionar el texto de encabezado y añadir negrita y cursiva sobre
él.
También nos permite modificar la alineación del texto en la página. Para

ello tendremos que seleccionar una de las opciones que aparece en
“propiedades”.
- “Alineación a la izquierda” nos permite alinear el texto a la

izquierda.
- “Alineación a la derecha” : nos permite alinear el texto a la

derecha.
- “Alineación centrada” : nos permite alinear el texto desde el

centro hacia los extremos.
- “Alineación justificada” : nos permite alinear el texto tanto a la

derecha como a la izquierda.
También podemos acceder a estas opciones desde el “menú formato”,
seleccionar y se despliega un submenú con las siguientes

opciones.
Selecciona el texto, todo, y añádele texto centrado.
El programa nos permite añadir también distintos tipos de viñetas,

numeración… Si queremos añadir una viñeta o numeración para que el
texto nos aparezca en niveles distintos, tendremos que pulsar en las
opciones:
Numeración Viñeta
Cuando pulsamos en uno de estos dos iconos, nos aparecerá directamente

la opción de “números” o “símbolos”.
Si queremos seleccionar algún modelo distinto, tendremos que pulsar

sobre “Menú Formato” y seleccionar la opción “Lista”.
- Sitúa el cursor debajo de lo que tenemos escrito.
- Selecciona la opción “Viñetas” y nos aparecerá la viñeta

predeterminada por defecto.
- Vamos a cambiar la viñeta. Pulsar en el “Menú Formato” y

seleccionar la opción “Lista”. Dentro del submenú que aparece
pulsar en .
- Nos aparecerá la siguiente ventana:
- En esta ventana nos permite elegir entre un número limitado de

estilos. Seleccionar la opción “circunferencia”.
- Pulsar el botón
- Escribir el siguiente texto:
Si queremos aumentar la sangría del texto, podremos realizarlo desde las
opciones “sangrar texto” y “desangrar texto” . Estas opciones nos

permiten añadir espacios en blanco en las primeras líneas y en el resto del
párrafo no.
Con todas las modificaciones que hemos realizado con el texto escrito, nos
debería de quedar el resultado final de la siguiente manera
(aproximadamente)
MÓDULO XVII. Imágenes
Insertar imágenes.
Para que las imágenes siempre aparezcan sin ningún problema en la

página, tienen que estar en la misma carpeta (directorio) que la página.
Si no has descargado todavía ninguna imagen, recomendamos seguir los

pasos indicados en el apartado “imágenes” para buscar imágenes en
google y descargarlas en el directorio creado para el curso: “curso_web”.
Es conveniente disponer de, al menos, 3 imágenes correctamente

guardadas, para hacer el siguiente apartado.
Para insertar imágenes tenemos que:
 Hacer clic sobre - .
 Se nos abrirá una nueva ventana con distintas fichas.
 Ficha ¨ubicación¨.
- En “ubicación de la imagen” tendremos que pulsar en la carpeta
para indicarle la ruta donde se encuentran las imágenes.
- En “la URL es relativa a la dirección de la página”, tenemos que

tener activada esta opción para que nos aparezca en pantalla la
imagen.
- En “texto emergente”, se tendrá que introducir un texto para que

cuando arrastremos el puntero del ratón sobre la imagen nos
aparezca este texto.
- En “texto alternativo” se podrá introducir un texto. En caso de no

haber puesto un “texto emergente” no aparecería ningún texto.
- Si no queremos que se vea el texto alternativo, activar la casilla

.
 Pulsar el botón para verificar que queremos realizar

los cambios.
Insertar texto alternativo a una imagen.
Dentro de la misma pantalla que hemos visto en el apartado anterior,

podemos encontrar el texto alternativo.
Si queremos insertar un texto alternativo a una imagen una vez que ya está
insertada la imagen, tendremos que seguir los siguientes pasos:
Seleccionamos la imagen en la que vamos a insertar el texto alternativo.
Pinchar en el “Menú Formato” y seleccionar la opción “propiedades de una

imagen”.
Nos aparecerá una nueva ventana igual que la explicada en el apartado

anterior.
Tendremos que poner el texto que queramos que aparezca cuando

pasemos el cursor por la imagen.
En caso de no querer que aparezca el texto alternativo pulsaremos en la

siguiente opción.
Una vez seleccionada una de las dos opciones pulsar el botón.
Cambiar texto alternativo.
En caso de querer cambiar el texto alternativo que tenemos, seguiremos

estos pasos:
Hacer doble clic sobre la imagen o pulsar en el “Menú Formato” y

seleccionar la opción “propiedades de la imagen”. Nos aparecerá el mismo
cuadro que hemos explicado anteriormente.
Realizar los cambios que queramos realizar y pulsar el botón
para verificar los cambios que hemos realizado.
Modificar tamaño.
Se puede modificar el tamaño de la imagen de dos maneras distintas:
Primera manera: La manera más fácil y rápida de modificarla es…
 Seleccionar la imagen.
 Situar el puntero del ratón en una esquina o arista y el cursor se

convierte en una flecha de doble punta.
 Mantener pulsado el ratón y arrastrar hasta que tenga el tamaño

deseado.
Segunda manera: Pulsar doble clic sobre la imagen o pulsar en el “Menú

Formato” y seleccionar la opción “propiedades de la imagen”.
 Pulsar sobre la ficha “Dimensiones”.
 Nos aparecerá una ventana con las dimensiones actuales de la

imagen, que podemos modificar a nuestro gusto.
Podemos añadir el
ancho y alto de la
imagen a nuestro
gusto. Cuando
modificamos la
altura se modificará
automáticamente la
anchura, y
viceversa.
 Si queremos modificar los cambios que hayamos realizado y que

nos quede como el tamaño real, solo tendremos que pulsar en la
opción
 Una vez modificado el tamaño de la imagen pulsar el botón
para verificar los cambios.

Para realizar este ejemplo se deben tener varias imágenes en el directorio

“curso_web”, el mismo donde debe estar guardada la página web.
En el ejemplo se va a usar C:\curso_web
Lo primero que vamos a hacer es abrir la página que tenemos guardada

con el nombre de “pagina_ejemplo1” para poder insertar imágenes y
trabajar con ellas.
Insertar Imágenes
 Hacer clic sobre - .
 Se nos abrirá una nueva ventana con distintas fichas.
 Ficha ¨Ubicación¨.
- En “ubicación de la imagen”, tendremos que pulsar en la carpeta
para indicarle la ruta donde se encuentran las imágenes. En nuestro
caso tendremos que seleccionar “C:\curso_web\
- En “la URL es relativa a la dirección de la página”: tenemos que

tener activada esta opción para que nos aparezca en pantalla la
imagen.
- En “texto emergente”, se tendrá que introducir “LOBO” para que

cuando arrastremos el puntero del ratón sobre la imagen nos
aparecezca este texto.
- En “texto alternativo” se podrá introducir “LOBO DE LA NOCHE”. En

caso de no haber puesto un “texto emergente” nos aparecería este
texto.
- Si no queremos que se vea el texto alternativo, activar la

casilla .
 Pulsar el botón para verificar que queremos realizar los

cambios. Nos quedará de la siguiente manera:
MÓDULO XVIII. Hipervínculos y enlaces
Hipervínculo absoluto.
Este hipervínculo nos permite crear un enlace desde nuestra página a

cualquiera que se encuentre en la red. Tendrá que empezar por
“http://www”.
Para ello, vamos a realizar los siguientes pasos:
 Escribimos el texto que será nuestro hipervínculo.
 Seleccionar el texto que acabamos de escribir.
 Pulsar en el “menú insertar” y seleccionar la opción o bien
pulsar el icono de la barra de herramientas .
 Nos aparecerá la siguiente ventana.

 En “ubicación de enlace” escribimos el enlace que al pulsar sobre él
nos abrirá la página correspondiente.
 Pulsar el botón para verificar los cambios realizados.
 Guardar la página y pulsar la tecla de función F5 para ver cómo

quedaría realmente nuestra página.
Vamos a realizar los siguientes pasos para practicar lo que acabamos de

aprender.
 Abrir una nueva página que vamos a guardar en nuestra carpeta

que se encuentra en esta ruta: “C:\curso_web”, y vamos a guardar la
página con el nombre de “pagina_ejemplo2”.
 Vamos a escribir el texto “Hipervínculo Absoluto”.
 Pulsar en el “Menú Insertar” y seleccionar la opción o bien

 En “ubicación de enlace” vamos a escribir http://www.google.es.

 Clic sobre el enlace que acabamos de escribir y se nos tendrá que

abrir el buscador de Google.
Hipervínculo relativo.
Nos permite enlazar nuestra página con otra que tenemos creada dentro de
nuestra carpeta o web.
 Escribimos el texto correspondiente a nuestro enlace.
 Selecciona el texto que acabamos de escribir.
 Nos aparecerá esta ventana:

 Pulsamos en la carpeta que aparece en la parte derecha , para
seleccionar la página con la que queremos enlazar.
 Se rellena con el nombre de la página que queremos que se abra

cuando pulsemos sobre él.

 Cuando pulsamos sobre el enlace que acabamos de crear, nos

debería aparecer la página que teníamos creada con anterioridad.
Vamos a realizar un ejemplo para practicar lo que hemos aprendido en el

apartado anterior.
 Debajo de lo que hemos escrito, escribir “Hipervínculo Relativo”.
 Selecciona el texto que acabamos de escribir.

 Nos aparecerá esta ventana:
 Pulsamos en la carpeta que aparece en la parte izquierda , para

seleccionar la página que tenemos guardada con el nombre de
“pagina_ejemplo1.html”, que está guardada en “C:\ curso_web”
 Se rellena con el nombre de la página que queremos que se abra

cuando pulsemos sobre él.

 Cuando pulsamos sobre el enlace que acabamos de crear, nos

debería aparecer la página que teníamos creada con anterioridad.
Hipervínculo anclado de texto.
Son los enlaces que nos permiten movernos por diferentes zonas de
nuestra página.
 Escribimos el texto que nos va a servir para movernos por la página.
 Hacemos clic sobre la opción de “enlace interno” que se

encuentra en la barra de herramientas.
Otra manera de acceder a esta opción es mediante la barra de
menús.
 Hacemos clic sobre el menú “insertar”.
 Y seleccionamos la pestaña .
 Nos aparecerá una nueva ventana para añadir el texto e identificar

el nombre del enlace.
 Pulsar el botón para verificar el nombre y el enlace.
 Nos aparecerá el ancla delante del texto.
 Situar el cursor hacia donde queremos que nos aparezca el texto.
 Escribir el texto identificando lo que va a hacer el enlace.
 Seleccionar el texto que acabamos de escribir y pulsar el botón

derecho sobre él.
 Nos aparecerá el “menú contextual”.
 Pulsar la opción “crear enlace” y nos aparecerá la siguiente ventana.

 Escribir el texto con el símbolo almohadilla delante de él: el símbolo
almohadilla (#) es para confirmar que es un enlace anclado y el
nombre que escribimos a continuación tiene que ser el mismo que
hemos puesto en el “texto alternativo” del anclaje, ya que lo que
queremos se identifica con este texto.
 Guarda la página con los cambios y pulsa la tecla de función F5.
 En la misma página en la que estamos sitúa el cursor delante del

texto “hipervínculo absoluto”.
 Clic sobre la opción de “enlace interno” que se encuentra en la

barra de herramientas.
Otra manera de acceder a esta opción es mediante la barra de

menús.
 Clic sobre el “menú insertar”.
 Y seleccionar la opción “enlace interno”.

el nombre del enlace, escribir: “SUBIR”
 Pulsar el botón para verificar el nombre y el enlace.
 Nos aparecerá el ancla delante del texto.
 Bajar con las barras de desplazamiento hasta que desaparezca el

texto de la pantalla (puede que sea necesario dar a ENTER para
crear más líneas) y hacer clic para situar el curso de texto en esta
zona.
 Escribir el texto “SUBIR”.

derecho sobre él.
 Nos aparecerá el “menú contextual”.
 Pulsar la opción “crear enlace” y nos aparecerá la siguiente ventana.
 Escribir el siguiente texto “#SUBIR”: el símbolo almohadilla (#) es

para confirmar que es un enlace anclado y el nombre que
escribimos a continuación tiene que ser el mismo que hemos puesto
en el “texto alternativo” del anclaje, ya que lo que queremos que nos
haga es que al pulsar en el enlace “subir”, nos suba directamente a
donde esté el ancla, al principio de la página.
 Guarda la página con los cambios y pulsar la tecla de función F5.
 Clic sobre el enlace “Subir” y nos tendrá que subir automáticamente

al inicio de la página, donde habíamos insertado el “enlace anclado”.
Hipervínculo anclado con imágenes o flechas UP.
Se utiliza de la misma manera que el concepto explicado anteriormente,

solo que utilizaremos una imagen para que nos permita movernos por las
páginas.
“FLECHAS UP” son imágenes de flechas que hacen más visual la
indicación de subir o bajar que si se hiciese con el texto.
Vamos a explicar los pasos que tendremos que seguir para su realización.
 Situar el cursor de texto donde queramos insertar el enlace.
 Vamos a insertar el anclaje; para ello, clic sobre la opción de “enlace
interno” que se encuentra en la barra de herramientas.

el nombre del enlace.
 Bajar con la flecha de desplazamiento hasta el final de la página,

que no se vea el contenido de la página.
 Ahora vamos a insertar la imagen. Para ello, haremos clic sobre el

menú “insertar”.
 Y seleccionar la opción “imagen” o bien pulsando en el icono de la
barra de herramientas .
 Nos aparecerá una ventana donde pincharemos en la carpeta

que aparece a la derecha de la “ficha ubicación” para seleccionar la
imagen que necesitamos.
 Seleccionamos la imagen que nos aparece y pulsando sobre ella
nos trasladará a la parte de la hoja que hemos seleccionado con
anterioridad.
 Pulsar en el botón y nos aparecerá una ventana para

introducir el “texto alternativo”. Escribir el texto en caso de querer
que aparezca.
 Pulsar en el botón y seleccionar la imagen que acabamos

de insertar y pulsa en el botón derecho del ratón sobre la imagen
para acceder al “menú contextual”.
 Nos aparecerá una nueva ventana donde tendremos que escribir el

texto para que cuando pulsemos sobre la flecha vaya
automáticamente a donde hemos insertado anteriormente el anclaje,
dentro de la “ficha enlace”.
 Guardar todos los cambios y pulsar la tecla de función F5.
Para realizarlo deberás descargarte una imagen con una flecha: puedes
usar el buscador de google tal y como se ha indicado en apartados
anteriores. Otra opción es usar cualquier imagen y que al pulsarla se vaya
hacia arriba.
Vamos a realizar un ejemplo donde aplicaremos este nuevo concepto.
 Abrir la página “pagina_ejemplo1”.
 Situar el cursor después del texto escrito en el encabezado.
 Vamos a insertar el anclaje; para ello, clic sobre la opción de “enlace
interno” que se encuentra en la barra de herramientas.

el nombre del enlace, escribir: “SUBIR”
 Bajar con la flecha de desplazamiento hasta el final de la página,

que no se vea el contenido de la página.
 Ahora vamos a insertar la imagen.
 Clic sobre el menú “insertar”.
 Y seleccionar la opción “imagen” o bien pulsando en el icono de la
barra de herramientas .
 Nos aparecerá una ventana donde tendremos que pulsar en la
carpeta que aparece a la derecha de la “ficha ubicación” para

seleccionar la imagen que necesitamos.
 En la ventana que nos aparece a continuación tendremos que abrir

la carpeta que tenemos descargada del servidor denominada
“imagenes_ejemplo”.
 Seleccionar de la imagen “flecha_subir” o la imagen que vayas a

usar (que se debería encontrar en “C:\ curso_web\”)
 Pulsar en el botón y nos aparecerá una ventana para

introducir el “Texto Alternativo”. Escribir “FLECHA SUBIR”.
 Pulsar en el botón y seleccionamos la imagen que
acabamos de insertar; pulsa en el botón derecho del ratón sobre la
imagen para acceder al “menú contextual”.
 Seleccionar la opción
 Nos aparecerá una nueva ventana donde tendremos que escribir:

“#SUBIR” para que cuando pulsemos sobre la flecha nos suba
automáticamente a donde hemos insertado anteriormente el anclaje,
dentro de la ficha enlace.
 Guardar todos los cambios y pulsar la tecla de función F5.
 Clic sobre la flecha y verás cómo se desplaza la página hasta donde

está visible el anclaje (el ancla no sale en esta vista, pero sí el lugar
donde está insertado).
Hipervínculo anclado con correo electrónico.
Se utiliza igual que los anteriores enlaces, con la diferencia de que

tendremos que seleccionar la opción para que identifique que es un correo
electrónico.
La manera de proceder con este enlace es exactamente igual que los

anteriores. Vamos a explicar los pasos:
 Situamos el cursor de texto donde queramos insertar el enlace.
 Pulsar en el icono “enlace” .
 Vamos a escribir en “texto de enlace”.
 En “ubicación del enlace” escribir el e-mail de la persona y activar la
casilla para que el

programa reconozca que es un correo electrónico.
 Pulsar en el botón . Guardar la página y pulsar la tecla de

función F5.
 Pulsar sobre el enlace que acabamos de crear. Se tendrá que abrir

el programa que tengamos instalado para enviar correos con el
correspondiente e-mail ya escrito automáticamente.
Vamos a realizar un ejemplo:
 Abrir la página con el nombre “pagina_ejemplo1” que se encuentra

en “C:\curso_web”.
 Debajo de lo que tenemos escrito pulsar en el icono “enlace” .
 Vamos a escribir en texto de enlace “e-mail”.
 En “ubicación del enlace” escribir: info@magister.es”.
 Activar la casilla para que

el programa reconozca que es un correo electrónico.
 Pulsar en el botón .
 Guardar la página y pulsar la tecla de función F5.
 Pulsar sobre el enlace que acabamos de crear, se tendrá que abrir

el programa que tengamos instalado para enviar correos con el
correspondiente e-mail ya escrito automáticamente.
MÓDULO XIX. Roll-Over
Roll-Over de texto.
El Roll–Over nos permite que, al pasar por encima de un texto, este cambie
de aspecto.
Vamos a explicar los pasos a seguir:
 Escribir un texto.
 Pulsar el botón derecho del ratón para acceder al “menú contextual”.
 Seleccionar la opción y nos aparecerá la siguiente

ventana nueva.
 En “texto del enlace” aparecerá automáticamente el texto, ya que lo

teníamos seleccionado con anterioridad.
 En “ubicación del enlace” tendremos que escribir la URL, la cual
queremos que se abra automáticamente cuando pulsemos sobre el
texto.
 Teniendo seleccionado el texto, clic en el “menú formato” y
seleccionar la opción .
 Se abrirá la siguiente pantalla:
 Vamos a modificar el vínculo con distintos colores y fuentes. Para

ello, tendremos que seleccionar el texto cuando está normal, cuando
es un enlace, cuando es un enlace activo y cuando ha sido visitado,
pinchando en los cuadrados con colores que tenemos al lado.
 Si queremos que nos aparezca una imagen de fondo, tendremos
que pulsar en la carpeta y especificar la ruta donde esté la

imagen que queremos insertar.
 Pulsar el botón para verificar que queremos los cambios,

guardar la página y pulsar la tecla F5.
Vamos a realizar un ejemplo guiado para que sea más fácil su creación y
explicación.
 Abrimos la página donde vamos a crear el Roll–Over. Esta va a ser

“pagina_ejemplo1”.
 Situarnos por debajo de la imagen del “Lobo”.
 Escribir el siguiente texto: “ROLL – OVER DE TEXTO”.

derecho del ratón para acceder al “menú contextual”.
 Nos aparecerá la siguiente ventana nueva.
 En “texto del enlace” aparecerá automáticamente “ROLL–OVER DE

TEXTO” ya que lo teníamos seleccionado con anterioridad.
 En “ubicación del enlace” tendremos que escribir la URL la cual
queremos que se abra automáticamente cuando pulsemos sobre el
texto. Escribir: www.bankia.es.
 Teniendo seleccionado el texto de “ROLL–OVER DE TEXTO”, clic

en el “menú formato” y seleccionar la opción
 Se abrirá la siguiente pantalla:
 Vamos a modificar el vínculo con distintos colores y fuentes:
- En “texto normal” vamos a seleccionar un color “azul”.
- En “color del vínculo” seleccionar un color “rojo”, tendréis que

pulsar en . Podemos elegir el color que queramos para
nuestro vínculo.
- En “color de sustitución” elegir el color “amarillo”, ya que cuando

pasemos el cursor por encima de él se pondrá amarillo.
- En “vínculos visitados” elegir un color “verde manzana”, para

que cuando hagamos clic sobre el enlace nos cambie de color.
- En “vínculo activo”, elegir un color “rosa”, ya que cuando
pulsemos este enlace, mientras se abre la ventana
correspondiente, nos cambiará de color.
- Si queremos que nos aparezca una imagen de fondo, tendremos
que pulsar en la carpeta y especificar la ruta donde esté la

imagen que queremos insertar.
 Pulsar el botón para verificar que queremos los cambios

y guardar la página y pulsar la tecla F5.
 Clic sobre el Roll–Over de texto para ver los cambios realizados.

MÓDULO XX. Propiedades de página
Color de fondo.
Kompozer nos permite introducir color en el fondo y hasta una imagen para
realizar una creación más creativa. Para ello vamos a seguir los siguientes
pasos:
 Abrir la página donde queremos modificar el fondo.
 Hacer clic sobre y seleccionar la opción
 En tenemos la opción de , si pulsamos en el
cuadro que aparece en su línea , se desplegará una paleta de

colores donde podremos elegir el color que queremos para nuestro
fondo.
 La opción “imagen de fondo” nos permite elegir una imagen para el
fondo de pantalla, tendremos que pulsar en la carpeta que nos
aparece en la parte de la derecha y se abrirá una nueva

ventana.
 Elegir la imagen que queremos utilizar como fondo y pulsar el botón
de .
Color del texto.
Nos permite cambiar el texto según el destino que tenga, es decir, si el

texto es normal llevará un color, si es un enlace otro, y en caso de este
último podrás elegir si es un enlace visitado, activo.
Para ellos seguimos los siguientes pasos:
 Abrir la página donde queremos modificar el fondo.

 En la opción nos aparecen dos opciones:
- , no nos permite
usar colores diferentes según la necesidad. Únicamente nos
saldrá aquellos que tenga el programa predeterminados.
- , nos permite elegir el color de la

fuente según nuestra necesidad. Podemos seleccionar en las
subcategorías que aparecen los distintos colores según la
utilización del texto, si es un enlace, etc… solo tendremos que
pulsar en (en la parte de la derecha nos aparecerá el color

que hemos elegido como muestra).
 Una vez que hemos elegido los colores que queremos, pulsar en el
botón de .
Vamos a realizar un ejemplo guiado para repasar estas nuevas opciones.
 Lo primero que vamos a hacer es abrir la página que tenemos

guarda en nuestra carpeta con el nombre de “pagina_ejemplo1”.
 Nos aparecerá la siguiente ventana
 Vamos a modificar los colores para que quede de la siguiente

manera. Para ello, tendrás que pulsar en los cuadros al lado de las
opciones para cambiar el color.
- Texto normal de color negro.
- Texto de enlace de color azul.
- Texto enlace activo de color rojo.

- Texto enlace visitado de color verde.
- Fondo blanco.
 Ahora vamos a insertar una imagen de fondo. Para ello tendrás que
pulsar en la carpeta que aparece al lado de
 Se nos abrirá una nueva ventana en donde tendremos que elegir la

imagen que quieras de la carpeta C:\curso_web (o donde hayas
guardado la página).
 Pulsar en el botón de y veremos en la parte superior de

la ventana la imagen aplicada como vista previa.
 Pulsar en el botón de para ver cómo queda en nuestra

página.
MÓDULO XXI. Las tablas
Insertar tablas.
Para insertar tablas tendremos que seguir los siguientes pasos:
 Elegir dónde queremos insertar la tabla.
 Hacer clic sobre y elegir la opción .
 Se nos abrirá la siguiente ventana con varias fichas.
 En la “ficha rápido”, se podrá elegir la cantidad de columnas y filas

que necesitemos, solo tendremos que pulsar en el primer cuadro
con el botón izquierdo del ratón y manteniéndolo pulsado arrastrar
hasta que tenga la cantidad de filas y columnas que queramos.
 En la “ficha preciso”, podremos realizar la misma operación que en

la anterior ficha, pero añadiendo de forma más precisa la cantidad
de filas y columnas, así como la anchura de la tabla y los bordes de
la misma.
 En la “ficha celda” podremos añadir la alineación de las filas y
columnas individualmente, así como si queremos ajustar el texto a
las celdas o no, y el espacio entre celdas, así como su relleno.
 Pulsar el botón para verificar los cambios.
 Nos quedará de la siguiente manera:
Para escribir dentro sólo tendremos que hacer clic encima y escribir.
Las tablas nos permiten tener una forma fácil de poder hacer una
maquetación, ya que nos permite crear tablas dentro de tablas, crear
enlaces, hipervínculos…
Modificar el tamaño de la tabla.
Si queremos modificar el tamaño de la tabla tendremos que situar el

puntero del ratón en una de las aristas y, cuando la flecha se convierta en
una flecha de doble punta, mantener pulsado el botón izquierdo del ratón,
arrastrar hasta que tenga el tamaño deseado.
 Hacer clic sobre y elegir la opción .
 Se nos abrirá la siguiente ventana con varias fichas.
 En la “ficha rápido”, se podrá elegir la cantidad de columnas y filas

que necesitemos, solo tendremos que pulsar en el primer cuadro
con el botón izquierdo del ratón y manteniéndolo pulsado arrastrar
hasta que tenga la cantidad de filas y columnas que queramos.
En nuestro caso seleccionaremos 2 filas y 2 columnas, como

aparece en el modelo anterior.
 En la “ficha preciso” podremos realizar la misma operación que en la

anterior ficha, pero añadiendo de forma más precisa la cantidad de
filas y columnas, así como la anchura de la tabla y los bordes de la
misma.
Vamos a escribir filas (2), columnas (2), anchura (100%) para que
se adjunte a la página, y bordes (2).
 En la “ficha celda” podremos añadir la alineación de las filas y

columnas individualmente, así como si queremos ajustar el texto a
las celdas o no, y el espacio entre celdas, así como su relleno.
Vamos a poner alineación centrada tanto horizontal como vertical,

pulsar “ajustar” en ajustar texto, el espacio entre celdas (2) y el relleno
de las celdas (2).
 Pulsar el botón para verificar los cambios y nos quedará

de la siguiente manera:
 Para escribir dentro solo tendremos que hacer clic encima y escribir.
Rellenar con los siguientes datos.
MÓDULO XXII. Subir las páginas web al servidor
Subir las páginas web al servidor
Una vez realizada una o varias páginas webs, para que éstas sean
accesibles desde Internet por cualquier persona es necesario subirlas al
servidor (subirlas a Internet).
Las páginas webs son ficheros iguales que los subidos en la práctica de
subida de ficheros vía FTP (core_ftp), por lo que se deberá seguir
nuevamente todos los pasos, pero en lugar de subir los ficheros del
ejemplo anterior, esta vez se deben subir la página o páginas creadas, así
como las imágenes que se usen en estas páginas.
Los pasos básicos serán:
- Abrir el programa FTP, en nuestro caso core_ftp.
- Conectarse al servidor siguiendo los pasos que anteriormente

hemos visto.
- Entrar en el directorio personal, por ejemplo, web0000; si no se

hubiese creado, habría que crearlo.
- Seleccionar los documentos (páginas webs, imágenes…) que se

vayan a subir a Internet/servidor y subirlos.
- Comprobar que se accede correctamente a ellos desde Internet.
Primero debemos conectarnos al espacio Web o servidor.
 Abrimos el programa CoreFTP.
 Hacemos clic sobre

 Seleccionar en el submenú que se despliega la opción
.
 Se abrirá la siguiente pantalla donde tendremos que introducir los

datos correspondientes, que recibimos en el email de activación de
la cuenta para poder acceder a nuestro sitio web.
Los datos correspondientes son:
 Site name: podemos introducir cualquier nombre.
 Host/IP/URL: FTP Hostname.
 Usuario: FTP Username.
 Contraseña: FTP Password.
FTP Hostname, FTP Username y FTP Password son los datos que
recibimos en el email de activación de la cuenta en el servicio de hosting
000webhost.com. Todos los pasos pueden revisarse en los apartados
anteriores.
 Pulsar el botón para conectarnos al servidor.
 Nos aparecerán en la parte de la derecha todos los archivos que

estén a nuestra disposición del servidor.
Una vez que estamos conectados con el servidor podemos trabajar para
subir y bajar ficheros.
SUBIR LAS WEBS E IMÁGENES AL DIRECTORIO PERSONAL.
 Lo primero que tenemos que hacer es seleccionar la carpeta en

nuestro ordenador donde tenemos los archivos que vamos a subir.
En nuestro caso sería la unidad de disco duro o local (C:), doble clic
sobre “curso_Web”.
 Después de este paso, en la parte izquierda te debe quedar algo

parecido a esto:
Ahora es necesario subir los ficheros de imágenes y páginas webs al

directorio personal en el servidor que se llama con nuestro nombre de
usuario y que habremos creado en la tarea de FTP. Si no existiese habría
que crear en la parte derecha el directorio con el nombre de usuario
correspondiente.
 Como ya tendremos creado nuestro directorio (en la carpeta

public_html), tenemos que buscarnos dentro del listado de la parte
derecha, dentro de los directorios del servidor y pulsar doble clic
encima para abrirlo.
 Una vez que está abierto, vamos a proceder a subir los ficheros y
las imágenes igual que se hizo con el fichero ftp.htm.
 Seleccionar dentro de nuestra carpeta C:\curso_web\ los ficheros

que se van a subir, en nuestro caso serán los siguientes:
- flechaarriba.jpg
- flechabajar.jpg
- lobo1.jpg
- lobo2.jpg
- lobo3.jpg
- tarea2.html
 Una vez tenemos seleccionados los documentos y estemos en la

parte derecha en nuestro directorio del servidor donde vamos a subir
el fichero, pulsar la flecha “Upload” para subir al servidor el
fichero.
 Nos quedará de la siguiente manera.
Ahora debemos comprobar que realmente se ha subido bien y que

podemos verlo desde Internet. Para ello tenemos que abrir una ventana de
internet e introducir la URL o dirección en la que teóricamente se encuentra
el fichero que hemos subido.
Para comprobarlo, vamos a poner un ejemplo de lo que habría que hacer si

disponemos de los siguientes ficheros:
EJEMPLO:
Supongamos que el nombre de subdominio (para este ejemplo) que hemos
creado es:
www.webdepedrogarcia.webege.com
Nuestro usuario (para este ejemplo) es web0000.
Los ficheros para subir son (para este ejemplo):
 tarea2.html
 lobo1.jpg
 lobo2.jpg
 lobo3.jpg
 flechaarriba.jpg
 flechabajar.jpg
Entonces deberíamos poner lo siguiente en el navegador o explorador de

Internet:
www.webdepedrogarcia.webege.com/web0000/tarea2.html
o también podríamos poner:
http://www.webdepedrogarcia.webege.com/web0000/tarea2.html

Diseño Web y Herramientas de Internet Aplicados A La Docencia PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diseño Web y Herramientas de Internet Aplicados A La Docencia PDF

Cargado por

Copyright:

Formatos disponibles

Formación del profesorado ANFAP

Asociación Nacional para la

DISEÑO WEB Y HERRAMIENTAS DE INTERNET

ANDALUCÍA - ARAGÓN - ASTURIAS - BALEARES - CANARIAS CANTABRIA - C. MANCHA

Copyright MELC, S.A., 2019

▪ Profesores de Educación Infantil y Primaria de todas las

 100 % a distancia. Metodología online.

DIRECCIONES DE LOS CENTROS DE REFERENCIA

MÓDULO II: RECURSOS DIDÁCTICOS EN INTERNET.

MÓDULO III: UTILIZACIÓN DE BLOGS.

MÓDULO IV: LOS FOROS.

MÓDULO VII: LENGUAJES UTILIZADOS PARA DISEÑO Y

MÓDULO VIII: DIRECCIÓN DE URL.

MÓDULO IX: INTRODUCCIÓN A LOS PROGRAMAS DE DISEÑO WEB.

MÓDULO X: INTRODUCCIÓN A LOS COMPONENTES DE UNA

MÓDULO XI: EL PROGRAMA KOMPOZER.

MÓDULO XII: PÁGINAS EN KOMPOZER.

MÓDULO XIV: VISTA PREVIA EN EL EXPLORADOR.

MÓDULO XV: DESCARGA DE ARCHIVOS.

MÓDULO XVI: ELEMENTOS DE TEXTO EN UNA PÁGINA WEB.

MÓDULO XVII: IMÁGENES.

MÓDULO XVIII: HIPERVÍNCULOS Y ENLACES.

MÓDULO XIX: ROLL-OVER.

MÓDULO XX: PROPIEDADES DE PÁGINA.

MÓDULO XXI: LAS TABLAS.

MÓDULO XXII: SUBIR LAS PÁGINAS WEB AL SERVIDOR.

Pero quizás el elemento más revolucionario en la educación ha sido

Internet fue creada en EEUU con fines militares en los años 60 y se

Internet permite la interconexión de un número elevadísimo de

Hoy en día, además de todo lo anterior, se utilizan otras expectativas como

Por todo lo anterior, surge la necesidad de formar al profesorado en nuevas

Sin embargo, en ocasiones, al profesor le es muy difícil encontrar webs que

Además, se explicará el procedimiento que se debe seguir para elaborar

Por último, conviene conocer algunas aplicaciones didácticas que se

Breve orientación sobre Internet.

Internet es una gran “red de redes” interconectadas entre sí de tal manera

Cuando queremos tener acceso a esa información, lo que tenemos que

Para conectarnos a Internet con cualquiera de ellos, solo tendremos que

 Menú de herramientas que nos permite acciones como guardar,

 Barra de navegación, que es la barra desde la que podemos

 Barra de direcciones, que es el lugar donde debemos teclear la

 Barra de Google. Esta barra es opcional, es decir, puede aparecer

 Zona activa, es la zona donde nos va a aparecer la página que

Normalmente las URL vienen especificadas en minúsculas, sin símbolos

Es muy importante que tecleemos correctamente la URL, ya que cualquier

En algunas ocasiones nos podemos encontrar que nuestro navegador, en

En este curso te enseñaremos a crear páginas web sencillas y a manejar

El procedimiento general para crear páginas web es el siguiente:

1) Instalar el programa de edición de documentos HTML en

2) Crear un sitio web. Un sitio web es un lugar específico en nuestro

3) Elaborar un archivo HTML con todos los elementos que nosotros

4) Subir el archivo al servidor mediante FTP. FTP es un protocolo de

transferencia de ficheros que permite conectar ordenador-

5) Publicar el archivo, es decir, una vez que el archivo se ha subido al

En Internet podemos encontrar gran cantidad de recursos ya elaborados

Estos recursos podemos encontrarlos en webs personales o en portales

Podemos suscribirnos en ellas, lo cual nos ofrecerá una gran cantidad de

No obstante, muchos de los recursos didácticos que podemos encontrar en

A continuación, podemos ver algún ejemplo de recursos educativos de los

Vamos a detallar algunos de los portales educativos más completos que

 Instituto Superior de Formación y Recursos en Red para el

 Educamadrid: plataforma de recursos educativos de la Comunidad

En ella se ofrece gran cantidad de recursos de Educación Infantil,