Reforma Curricular del Bachillerato Tecnológico
Estructura y Programas de Estudio de la
Carrera de Técnico en Informática
Profesores que elaboraron la guía didáctica del
módulo profesional de la carrera de técnico en:
Informática
NOMBRE ESTADO
Ilych Antonio Ramos Guardado Nayarit
Sergio Anonales Figueroa Morelos
Artemio Lemus Ruiz Michoacán
Víctor Puc Ibarra Yucatán
Maria Félix Roldan López Hidalgo
Javier Sánchez Pérez Chihuahua
Sonia Patricia Ramos Saucedo Coahuila
Coordinadores de Diseño:
NOMBRE ESTADO
Ismael Lee Cong Quintana Roo
Manuel Gilberto Méndez Monforte Yucatán
Julio César Flores Olivares Nayarit
Coordinador del Componente de Formación
Profesional:
NOMBRE
Espiridión Licea Pérez

Directorio
Lic. Josefina Vázquez Mota
Secretario de Educación Pública
Dr. Miguel Székely Pardo
Subsecretaria de Educación Media Superior
Lic. Luís F. Mejía Piña
Director General de Educación Tecnológica
Industrial
Antrop. Ana Belinda Ames Russek
Coordinadora Nacional de Organismos
Descentralizados Estatales de CECyTEs
Lic. Elena Karakowsky Kleyman
Responsable de Desarrollo Académico de los
CECyTEs
Profr. Espiridión Licea Pérez
Responsable de Normatividad Académica de
los CECyTEs

Objetivo General
Una vez concluido este submódulo tendrás las capacidades y competencias
necesarias para utilizar diferentes servicios de la red Internet así como sus
protocolos y lenguajes, diseñar páginas web tanto en hipertexto como en un
editor visual y que incluyan elementos multimedia como video, sonido y
animaciones; asimismo, podrás montar páginas en un servidor web. Para lo
anterior es necesario auxiliarte de las competencias desarrolladas en los
submódulos 1 y 2, de este mismo módulo y del idioma inglés. Actividades
como diseño y montaje de páginas web en un servidor requieren cierto
grado de responsabilidad y autonomía, en virtud de lo cual esta
competencia está considerada en el nivel 2.

Índice
Contiene los siguientes apartados:
I. Mapa curricular.
II. Introducción al curso.
III. Desarrollo de competencias.
IV. Conclusiones de la guía de aprendizaje.
V. Fuentes de información.
VI. Glosario.
VII. Anexos.

Mapa Curricular
CARRERA
Técnico en informática.
MÓDULO II
Software de diseño
SUBMÓDULO III
Elaborar páginas Web utilizando las
aplicaciones actuales
COMPETENCIA 1 COMPETENCIA 2 COMPETENCIA 3
Utilizar los servicios de Internet. Manejar protocolos y lenguajes de Programar en un lenguaje de
Internet. hipertexto.
HABILIDADES Y DESTREZAS
• Manipular correo electrónico. HABILIDADES Y DESTREZAS
• HABILIDADES Y DESTREZAS
• Manipular Microsoft Outlook Express. Diseñar formularios.
• • Insertar etiquetas principales.
• Manejar Eudora. Crear hipertexto.
• • Insertar vínculos e hipervínculos.
• Manejar FTP. Utilizar servidores Web.
• • Manejar etiquetas secundarias.
• Navegar por Internet. Manejar protocolos.
• • Agregar marquesinas.
• Manipular Netmeeting. Manejar el lenguaje http.
• • Diseñar tablas.
• Manejar la mensajería instantánea. Manejar el lenguaje HTML.
• Manejar el lenguaje DHTML. • Insertar Imágenes, sonido y video.
• Buscar información en Internet.
• Insertar caracteres especiales.
CONOCIMIENTOS
CONOCIMIENTOS • Teorías del diseño CONOCIMIENTOS
• Navegadores. (Minimalismo, • Editores de texto
• Internet Explorer. Conceptualismo). • Lenguaje de hipertexto
• Buscadores en Internet. • Funciones de diseño • Estructura de una página
(necesidades, impacto, Web
• Metabuscadores.
enfoque). • Vínculos e hipervínculos
• Tipos de buscadores.
• Diseño de formatos (zonas • Navegadores de Internet
• Riesgos y seguridad en Internet.
• Sistemas de comunicación personal. áureas, dirección y sentido,
• World Wide Web. equilibrio).
• Teoría del color (circulo ACTITUDES
• Protocolos de Internet (http, https, ftp, • Orden.
telnet, mailto). cromático, RGB (Red, Green,
Blue), CMY (Cyan, Magenta,
Yellow), contrastes).
ACTITUDES ACTITUDES
• Responsabilidad. • Responsabilidad.
Página 5 de 129

Mapa Curricular
CARRERA
Técnico en informática.
MÓDULO II
Software de diseño
SUBMÓDULO III
Elaborar páginas Web utilizando las
aplicaciones actuales
COMPETENCIA 4 COMPETENCIA 5 COMPETENCIA 6
Diseñar una página Web en un editor Crear hipervínculos. Crear vínculos Web.
visual.
HABILIDADES Y DESTREZAS HABILIDADES Y DESTREZAS HABILIDADES Y DESTREZAS
• Manipular el software de diseño. • Insertar marcadores. • Crear vínculos a otros documentos
• Ubicar los elementos de la pantalla. • Habilitar los efectos de en Web.
• Insertar componentes. conversión de hipervínculos. • Crear vínculos y anclas.
• Manipular la barra de Insertar (Común, • Manipular la conexión a las • Crear la estructura de una URL.
Diseño, Formularios, Texto, HTML, páginas Web. • Utilizar el protocolo http.
Aplicación, Elemento Flash y Favoritos.) • Vincular archivos.
• Administrar sitios Web. • Utilizar el protocolo mailto.
• Crear tablas. CONOCIMIENTOS • Realizar listas vinculadas.
• Insertar imágenes. • Direcciones absolutas y • Vincular tablas.
• Insertar comentarios. relativas • Vincular imágenes.
• Anexar contadores de visitas. • Hipervínculos • Vincular sonidos.
• Administrar titulares. • Vincular videos.
• Insertar fecha y hora.
• Adicionar marquesinas. ACTITUDES
• Manipular botones activables. • Orden.
CONOCIMIENTOS
• Insertar aplicaciones multimedia. • Creación de vínculos
• Crear formularios para manipular bases • Lenguaje html
de datos. • Protocolos de Internet
• Insertar marcos
CONOCIMIENTOS ACTITUDES
• Diseño de una página Web. • Responsabilidad.
• Etiquetas del lenguaje de hipertexto.
• Aplicaciones multimedia.
• Formularios.
• Estructura de una base de datos.
• Funciones de las barras de
herramientas.
ACTITUDES
• Orden.
Página 6 de 129

Mapa Curricular
CARRERA
Técnico en informática.
MÓDULO II
Software de diseño
SUBMÓDULO III
Elaborar páginas Web utilizando las
aplicaciones actuales
COMPETENCIA 7
Almacenar páginas en un servidor
Web.
HABILIDADES Y DESTREZAS
• Manipular un FTP anónimo.
• Manipular un FTP no anónimo.
• Almacenar las páginas Web en
un servidor dedicado o gratuito.
CONOCIMIENTOS
• Protocolo FTP
• Manejo de utilerías FTP
• Buscadores de Internet
• Servidores de Internet
ACTITUDES
• Responsabilidad.
Página 7 de 129

Un mensaje para ti
De nueva cuenta tenemos la oportunidad de encontrarnos. Ya llevas un buen
tramo recorrido de tu formación en la informática. A lo largo de todo este tiempo
seguramente has adquirido muchos conocimientos y has desarrollado
muchísimas habilidades y destrezas para desempeñarte fácilmente en esta área
tan complicada. Ahora mismo, te encuentras cursando el segundo módulo
llamado software de diseño
Sin embargo debes tener claro que en la informática nada, absolutamente nada
puede permanecer estático, al contrario todo esta en constante cambio. Por eso,
ahora tenemos la oportunidad de poner en tus manos una nueva guía de
aprendizaje, con la cual seguramente podrás realizar una serie de actividades
que te permitirán aumentar tus conocimientos y desarrollar tus destrezas en la
informática, pero más específicamente en la creación de páginas Web utilizando
las aplicaciones actuales.
Este tercer submódulo tiene por lo tanto la finalidad de que al término del mismo
seas capaz de crear páginas web en aplicaciones como editores visual y que se
vean enriquecidas con elementos multimedia como video, texto, sonido y
animación.
Obviamente el campo de trabajo para esta área es muy grande, pero
resumiendo te podemos mencionar que con lo visto aquí, podrás colocarte a
trabajar en áreas donde se
desarrollen páginas Web
utilizando diseños gráficos, como
son: empresas de publicidad, de
comunicación, imprentas, oficinas
de servicios públicos y privados e
instituciones educativas y
autoempleo.
Debemos recordar que este
submódulo está muy relacionado
con otros dos que en su conjunto
forman el módulo de software de
diseño; te invitamos a que
analices la figura siguiente para
que veas dicha relación.
Todas las competencias que se integran el submódulo serán desarrolladas en
un contexto práctico, ello en función de que los sitios de inserción laboral para
esta área exigen que demuestres las capacidades y habilidades de
competencia, bajo estas características; sin olvidar la aplicación de
Página 8 de 129

conocimientos de formación básica como el idioma Inglés, ortografía y
gramática, así como herramientas tecnológicas como el Internet.
En función de la disponibilidad tecnológica del plantel, así como de la iniciativa y
perseverancia en tu propia formación, se plantea que todas las actividades
incluidas en esta guía de aprendizaje las desarrolles en áreas de cómputo del
plantel, o en su caso, espacios públicos o privados que te permitan acceder a
esta tecnología.
Como parte de la evaluación necesaria para determinar si ya lograste ser
competente en esta área de formación, te planteamos observar las siguientes
evidencias:
1. Los servicios de Internet utilizados.
2. Los protocolos y lenguajes de Internet manejados.
3. El hipertexto programado en un lenguaje.
4. La página Web diseñada en un editor visual.
5. Los hipervínculos creados.
6. Los vínculos Web creados.
7. Las páginas almacenadas en un servidor Web.
Página 9 de 129

Simbología
PRÁCTICA
EJEMPLO
ERRORES TÍPICOS
EJERCICIO
CONCLUSIONES
INTRODUCCION
CONTINGENCIA
OBJETIVO
Página 10 de 129

Competencias, habilidades y destrezas
Módulo I Software de Diseño.
Submódulo III Elaborar páginas Web utilizando las aplicaciones actuales.
1. Utilizar los servicios de Internet.
2. Manejar protocolos y lenguajes de Internet.
3. Programar en un lenguaje de hipertexto.
Competencias
a Desarrollar
4. Diseñar una página Web en un editor visual.
5. Crear hipervínculos.
6. Crear vínculos Web.
7. Almacenar páginas en un servidor Web.
COMPETENCIA I Utilizar los servicios de Internet.
Introducción
B
envenido!!! Este Submódulo III, te
permitirá desarrollar las habilidades
y destrezas para que puedas
Elaborar páginas Web utilizando las
aplicaciones Actuales.
Vamos a desarrollar la primera
competencia con los ejercicios y prácticas
que te proponemos, además de tu empeño
y entusiasmo lograremos desarrollar las habilidades y destrezas para: Manipular
el correo electrónico, el Microsoft Outlook Express, el Eudora, el protocolo
FTP, navegar por Internet, manejar la mensajeria instantánea, así como buscar
información en Internet.
Es importante manejar estas habilidades y destrezas debido a que los servicios
de Internet se manejan en cualquier ámbito laboral.
Recuerda que todo esfuerzo de nuestra parte resultará infructuoso sin la
participación entusiasta y sin la iniciativa de tu parte, por lo que te invitamos a
que continúes trabajando con el mismo ánimo con que lo has hecho hasta ahora
en tu formación profesional.
Página 11 de 129

1. Manipular correo electrónico.
HABILIDAD 2. Manipular Microsoft Outlook Express.
3. Manejar Eudora.
Vamos a iniciar nuestro trabajado ayudándote a desarrollar
las primeras habilidades, para que tú puedas manipular el
RESULTADO DE
correo electrónico, que es uno de los principales medios de
APRENDIZAJE comunicación en Internet utilizado para enviar y recibir
información en algunos de los principales clientes de correo
Electrónico.
Desarrollo
El conocimiento previo que debes
tener para desarrollar esta habilidad
es el manejo del sistema operativo,
así como de los navegadores de
Internet.
EJEMPLO 1
Casi todos los proveedores de correo dan el servicio de
correo Web (webmail): Permiten enviar y recibir correos
mediante una página Web diseñada para ello, y por tanto
usando sólo un programa navegador Web.
El correo Web es cómodo para mucha gente, porque permite
ver y almacenar los mensajes desde cualquier sitio (en un
servidor remoto, accesible por la página web) en vez de en
un ordenador personal concreto.
Como desventaja, es difícil de ampliar con otras
funcionalidades, porque la página ofrece unos servicios
concretos y no podemos cambiarlos. Además, suele ser más
lento que un programa de correo, ya que hay que estar
continuamente conectado a páginas Web y leer los correos
de uno en uno.
En la siguiente figura se muestra la estructura de un
programa para enviar un correo electrónico, comenta con tus
compañeros y describe su funcionalidad:
Página 12 de 129

EJEMPLO 2
Observa las dos figuras siguientes y comenta con tus
compañeros cuales son las diferencias y semejanzas entre
dos de los proveedores de correo gratuitos.
Destinatario: una o varias direcciones de correo a las que
ha de llegar el mensaje.
Asunto: una descripción corta que verá la persona que lo
reciba antes de abrir el correo.
El propio mensaje. Puede ser sólo texto, o incluir formato, y
no hay límite de tamaño. Además, se suele dar la opción de
incluir archivos adjuntos al mensaje. Esto permite traspasar
datos informáticos de cualquier tipo mediante el correo
electrónico.
Para especificar el destinatario del mensaje, se escribe su
dirección de correo en el campo llamado Para dentro de la
interfaz (ver imagen de arriba). Si el destino son varias
personas, normalmente se puede usar una lista con todas las
direcciones, separadas por comas o punto y coma.
Además del campo Para existen los campos CC y CCO, que
son opcionales y sirven para hacer llegar copias del mensaje
a otras personas:
Campo CC (Copia de Carbón): Quienes estén en esta lista
recibirán también el mensaje, pero verán que no va dirigido a
ellos, sino a quien esté puesto en el campo Para. Como el
campo CC lo ven todos los que reciben el mensaje, tanto el
destinatario principal como los del campo CC pueden ver la
lista completa.
Campo CCO (Copia de Carbón Oculta): Una variante del
CC, que hace que los destinatarios reciban el mensaje sin
aparecer en ninguna lista. Por tanto, el campo CCO nunca lo
ve ningún destinatario.
Página 13 de 129

EJERCICIO 1
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda ejecutar
una demostración práctica en donde se de de alta una
cuenta de correo electrónico gratuito, asi como el enviar y
descargar correos anexando y descargando archivos, en por
lo menos dos de los principales proveedores de este servicio:
Yahoo y Hotmail. Indicando las ventajas y desventajas de
cada uno de ellos.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas. Genera una cuenta de correo en Hotmail, que sea
fácil de recordar para ti, en caso de que ya la tengas, revisa
que este activa. Ya que proporcionarás la dirección de correo
al profesor.
Página 14 de 129

EJERCICIO 2
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Solicita a los alumnos la
cuenta de correo realizada en hotmail y enviales un correo
solicitando investiguen esta información:
Es importante recordar al alumno que si por error escribe mal
la dirección de correo la información no llega al destino
solicitado.
Instrucciones para el alumno.- Revisa tu correo
electrónico, busca la información solicitada por el docente y
envíala como archivo anexo, editando dicha información en
cualquier editor de texto.
EJEMPLO 3
Los clientes de correo electrónico, son programas para
gestionar los mensajes recibidos y poder escribir nuevos
mensajes.
Suelen incorporar muchas más funcionalidades que el correo
Web, ya que todo el control del correo pasa a estar en el
ordenador del usuario. Por ejemplo, algunos incorporan
potentes filtros anti-spam.
El funcionamiento de un programa de correo es muy
diferente al de un correo Web, ya que un programa de correo
descarga de golpe todos los mensajes que tenemos
disponibles, y luego pueden ser leídos sin estar conectados a
Internet (además, se quedan grabados en el ordenador). En
cambio, en una página Web se leen de uno en uno, y hay
que estar conectado a la red todo el tiempo.
Algunos ejemplos de programas de correo son: Mozilla
Thunderbird, Outlook Express y Eudora.
Observa las figuras siguientes y comenta con tus
compañeros cuales son las diferencias y semejanzas entre
dos de los programas de correo gratuitos.
Página 15 de 129

Microsoft Outlook Mozilla Thunderbird
Eudora
EJERCICIO 3
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda ejecutar
una demostración práctica en donde se de de alta una
cuenta de correo electrónico gratuito, que permita ser
configurado en un programa cliente de correo, en por lo
menos uno de los clientes de este servicio: Microsoft Outlook
Express y Eudora.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas.
Página 16 de 129

PRÁCTICA 1
Competencia I.- Utilizar los servicios de Internet.
Habilidades.-
1. Manipular correo electrónico.
2. Manipular Microsoft Outlook Express.
3. Manejar Eudora.
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Proporcione un correo
electrónico al grupo.
Verificar que frente a los integrantes del grupo o del equipo,
el alumno desarrolle cada uno de los pasos indicados. Se
sugiere el uso de: GUÍA DE OBSERVACIÓN: TINF-
04/M2S3/ED1-3.
Instrucciones para el alumno.-
1. Realiza una cuenta gratuita de Correo electrónico que
permita ser configurada en un programa cliente.
2. Configura en un programa cliente de correo electrónico,
con la cuenta de correo antes creada.
3. Escribe tu nombre completo en algún procesador de
textos y envíalo como archivo anexo a tu profesor.
4. Llama al docente para que te revise la práctica.
HABILIDAD 4. Manipular FTP.
Vamos a iniciar nuestro trabajado ayudándote a desarrollar la
RESULTADO DE habilidad para que puedas cargar y descargar archivos por
APRENDIZAJE
medio del ftp (protocolo de transferencia de archivos), e
información en un servidor utilizando alguna aplicación
cliente.
Desarrollo
El ftp: (File Transfer Protocol), utilizará el protocolo FTP de
transferencia de ficheros. Se utilizará cuando la información que
se desee acceder se encuentre en un servidor de ftp. Por defecto
se accederá a un servidor anónimo (anonymous), si se desea
indicar el nombre de usuario se usará:
ftp://máquina.dominio@usuario, y luego le pedirá la clave de
acceso.
Página 17 de 129

EJEMPLO 4
Observa la siguiente pantalla, es un programa cliente FTP
llamado Ipswitch WS_FTP para la transferencia de archivos.
EJERCICIO 3
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda ejecutar
una demostración práctica para la utilización de algún
programa FTP donde se explique como enviar y bajar
información.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas.
PRÁCTICA II
Competencia I.- Utilizar los servicios de Internet.
Habilidades.-
4. Manejar Ftp.
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Proporcione una dirección
de Internet o la dirección de un servidor, donde el alumno
puede subir y bajar información. Utilizando cualquier
programa FTP.
Página 18 de 129

Verificar que frente a los integrantes del grupo o del equipo,
el alumno desarrolle cada uno de los pasos indicados. Se
sugiere el uso de: GUÍA DE OBSERVACIÓN: TINF-
04/M2S3/ED1-3.
Instrucciones para el alumno.-
1. Inicia el programa ftp indicado por el docente.
2. Genera un documento en un procesador de textos con tu
nombre.
3. Transfiere el archivo generado anteriormente vía ftp al
sitio o dirección indica por el docente.
4. Descarga el archivo indicado por el docente vía ftp.
5. Llama al docente para que te revise la práctica.
5. Navegar por Internet.
HABILIDAD 6. Manejar la mensajería instantánea.
7. Buscar información en Internet.
En esta habilidad lograremos que tú puedas navegar por
RESULTADO DE
Internet utilizando varios de sus servicios como: Foros de
APRENDIZAJE discusión, el chat y la mensajería instantánea, además de la
búsqueda de información.
Desarrollo
Web (World Wide Web) en ocasiones se utiliza la palabra Web como sinónimo de Internet.
El hipertexto es lo que permite que al hacer clic en una palabra o gráfico pasemos de la página en
la que estamos a otra página distinta.
¿Quién y cómo se crea la información en Internet?
Los servidores de Internet pertenecen a las universidades, las instituciones públicas y a las
empresas. Las empresas de hospedaje o Hosting venden espacio a otras empresas o a particulares.
Pero también hay servidores gratuitos que alojan páginas personales a cambio de publicidad.
Un Buscador, es una herramienta que permite buscar información en toda la Internet a partir de
unas palabras que se introducen describiendo lo que se busca.
Las URL se utilizarán para definir el documento de destino de los hiperenlaces, para referenciar los
gráficos y cualquier otro fichero que se desee incluir dentro de un documento HTML. El formato de
una URL será: servicio://máquina.dominio:puerto/camino/fichero.
Página 19 de 129

EJEMPLO 5
TIPOS DE BUSCADORES
Aunque algunos buscadores utilizan conjuntamente varios de
los métodos que vamos a describir a continuación resulta útil
conocer cada forma distinta de buscar.
Buscadores por palabras clave. Son los buscadores más
comunes, el usuario introduce una palabra clave y el motor
del buscador examina su base de datos para mostrar las
páginas encontradas.
Buscadores por categorías. Estos buscadores que están
organizados por tópicos de conocimiento de forma que al
elegir una opción nos envía a otra página con más
categorías, así sucesivamente podemos llegar a ver las
páginas que existen sobre un tema muy concreto; por
ejemplo, deportes – deportes extremos - parapente - vuelo
libre. Es decir en estos buscadores se puede buscar
eligiendo categorías en lugar de introducir palabras claves.
Metabuscadores. Se podrían llamar también buscadores
múltiples ya que realizan varias búsquedas simultáneas en
los demás buscadores y muestran los resultados ordenados
por buscador.
Buscadores específicos. Son buscadores que sólo
contienen información sobre un tema concreto, por ejemplo,
buscadores de legislación, buscadores de libros, etc.
También incluimos en este tipo las páginas recopilatorias de
páginas Web sobre temas concretos, por ejemplo de
recursos gratis.
En la siguiente figura se muestran algunos de los buscadores
mas comunes, observa y comenta con tus compañeros,
cuales son sus semejanzas y diferencias.
Página 20 de 129

http://www.google.com/ http://www.altavista.com/
http://www.yahoo.com/ http://www.lycos.es/
http://www.alltheweb.com/ http://es.msn.com/
Página 21 de 129

EJERCICIO 4
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda ejecutar
una demostración práctica para buscar información, en los
diferentes tipos de buscadores:
o Buscadores por palabra clave.
o Buscadores por categorias.
o Metabuscadores.
o Buscadores específicos.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas.
EJERCICIO 5
Material de Apoyo.- Computadora e Internet.
Instrucciones para el alumno.-
1. Investiga lo siguiente en Internet en por lo menos 3
buscadores: FACTORES PARA ELEGIR UN BUEN
BUSCADOR. SERVICIOS QUE PROPORCIONA EL
INTERNET.
2. En un documento del procesador de textos, copia y pega
la información generada por los tres buscadores.
3. Anota las direcciones o referencias de las páginas a las
que te envió el buscador.
4. Lee detalladamente la información encontrada en los tres
buscadores, compara y genera tu propia conclusión
apoyándote en ellas.
5. Coloca de encabezado tu nombre en el archivo, guarda e
imprime tu documento para entregárselo a tu profesor.
Instrucciones para el docente.- Revisa que la práctica del
alumno cumpla con lo requerido, cuidando ortografía y
gramática, además de tomar en cuenta la limpieza del
trabajo, realimentando las posibles contingencias.
Página 22 de 129

Recuerda que la información en Internet la generamos todos, y
no siempre esta correcta, por eso es importante compararla
con otra búsqueda.
Tampoco la información que encontramos primero es la mas
completa, ni tampoco entre mas encontremos es mejor y no
basta con solo copiar y pegar si no que tenemos que
seleccionar y depurar la información para que no lleve basura.
No olvides anotar siempre la dirección o referencia de la página
en donde encontraste esa información.
EJEMPLO 6
Los foros en Internet son también conocidos como foros de
mensajes, de opinión o foros de discusión y son una
aplicación Web que le da soporte a discusiones en línea.
Por lo general los foros en Internet existen como un
complemento a un sitio Web invitando a los usuarios a
discutir o compartir información relevante a la temática del
sitio, en discusión libre e informal, con lo cual se llega a
formar una comunidad en torno a un interés común.
Un foro en Internet, comúnmente, permite que el
administrador del sitio defina varios foros sobre una sola
plataforma. Éstos funcionarán como contenedores de las
discusiones que empezarán los usuarios; otros usuarios
pueden responder en las discusiones ya comenzadas o
empezar unas nuevas según lo crean conveniente.
Veamos algunos ejemplos de foros de discusión o consulta:
http://www.forosdelweb.com/ http://www.lawebdelprogramador.com/news/
Página 23 de 129

EJERCICIO 6
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda ejecutar
una demostración práctica en la realización de un foro, en
alguna página gratuita en donde se permita, para esta
asignatura. Una vez registrada la dirección de foro, dar de
alta el registro de todos los estudiantes del grupo y generar
la participación en los siguientes temas al menos: el servicio
de internet y la verdad de sus contenidos, los foros como
medio de aprendizaje.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas. Y una vez generado el grupo, date de alta en el
mismo para ser un participante.
EJEMPLO 7
MENSAJERÍA INSTANTÁNEA
Los mensajeros instantáneos son programas que utilizan el
protocolo TCP IP y sirven para enviar y recibir mensajes
instantáneos con otros usuarios conectados a Internet u
otras redes, además de saber cuando están disponibles para
hablar.
Página 24 de 129

La mensajería instantánea tiene la característica de que
cuando llega un correo nos avisa en el mismo instante,
también nos informa cuando se conecta algún miembro de
una lista de usuarios que nosotros habremos creado
previamente. En ese momento podemos decidir escribirle
un correo o establecer una conversación como en un
Chat, enviar un archivo, establecer un conversación de voz
así como activar una cámara Web.
El Chat en inglés significa charla. Usualmente se refiere a
una comunicación escrita a través de Internet entre dos o
más personas que se realiza instantáneamente. Es común
que estas personas escriban bajo pseudónimos llamados
nick o apodo.
Los mensajeros instantáneos más utilizados son ICQ,
Yahoo! Messenger, MSN Messenger, AIM (AOL Instant
Messenger) y Google Talk (que usa el protocolo abierto
Jabber).
ICQ
Yahoo!
Messenger
Página 25 de 129

Yahoo!
Messenger
AIM (AOL
Instant
Messenger)
Google Talk
EJERCICIO 7
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda ejecutar
una demostracion práctica para establecer una comunicación
via mensajeria instantanea, explicando todas sus funciones.
En por lo menos unos de los mensajeros instantaneos.
Establezca una clase en línea con todos sus alumnos.
Página 26 de 129

Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas. Entra al mensajero indicado por el profesor para
poder establecer una comunicación en línea.
EJERCICIO 8
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda ejecutar
una demostración práctica para acceder a algunos sitios
gubernamentales, asi como el acceso a noticieros.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas.
PRÁCTICA III
Competencia I.- Utilizar los servicios de Internet.
Habilidades.-
5. Navegar por Internet.
6. Manejar la mensajería instantánea.
7. Buscar información en Internet.
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.-
Proporciona una dirección de correo para que le envíen la
información.
Verificar que frente a los integrantes del grupo o del equipo,
el alumno desarrolle cada uno de los pasos indicados. Se
sugiere el uso de: GUÍA DE OBSERVACIÓN: TINF-
04/M2S3/ED1-3.
Instrucciones para el alumno.-
1. Investiga la siguiente información en por lo menos dos
buscadores Web:
o ¿Qué es la educación en Internet (en línea)?
o Ventajas de la educación en Internet.
o Desventajas de la educación en Internet.
2. En un documento del procesador de textos, copia y pega
la información generada por los dos buscadores.
Página 27 de 129

3. Anota las direcciones o referencias de las páginas a las
que te envió el buscador.
4. Lee detalladamente la información encontrada en los tres
buscadores, compara y genera tu propia conclusión
apoyándote en la información encontrada.
5. Genera un documento en un procesador de textos con tu
nombre completo.
6. Coloca de encabezado tu nombre en el archivo.
7. Busca en alguna página de gobierno tu CURP, copia y
pégala en el documento antes generado.
8. Entra al mensajero indicado por el profesor y envía el
archivo por este medio al correo del profesor.
9. Una vez recibido el archivo por el docente. Guarda tus
archivos y espera las instrucciones del profesor.
Conclusiones de la competencia
Para esta lograr esta competencia se hizo necesario ejecutar una serie de
ejercicios y prácticas realizadas oportunamente para desarrollar las habilidades
y destrezas al utilizar los servicios de Internet, manipular el correo electrónico,
configurar un cliente de correo, descargar y transferir archivos, manejar la
mensajería instantánea, así como navegar, buscar y depurar información.
La evaluación de las habilidades y destrezas, conocimientos y actitudes de esta
competencia se hará mediante el instrumento de evaluación guía de
observación TINF-04/M2S3/ED1-3.
Página 28 de 129

COMPETENCIA II Manejar protocolos y lenguajes de Internet.
Introducción
E
sta competencia te permitirá
desarrollar las habilidades y
destrezas para que puedas
manejar los protocolos y el
lenguaje de programación HTML
utilizado para generar las páginas
de Internet.
Una red es una configuración de computadora que intercambia información.
Pueden proceder de una variedad de fabricantes y es probable que tenga
diferencias tanto en hardware como en software, para posibilitar la comunicación
entre estas es necesario un conjunto de reglas formales para su interacción. A
estas reglas se les denominan protocolos.
Un protocolo es un conjunto de reglas establecidas entre dos dispositivos para
permitir la comunicación entre ambos.
1. Crear hipertexto.
2. Utilizar servidores Web.
HABILIDAD 3. Manejar protocolos.
4. Manejar el lenguaje HTML.
Vamos a comenzar nuestra segunda competencia para
RESULTADO DE
desarrollar los protocolos y lenguajes de Internet, la creación
APRENDIZAJE de hipertexto, la utilización de servidores Web, el manejo de
protocolos, así como el manejo del lenguaje HTML.
Desarrollo
El hipertexto es lo que permite que al hacer clic en una palabra o gráfico
pasemos de la página en la que estamos a otra página distinta.
Página 29 de 129

El HTML (Hyper Text Markup Language) es el lenguaje con el
que se escriben las páginas web. Es un lenguaje de hipertexto,
es decir, un lenguaje que permite escribir texto de forma
estructurada, y que está compuesto por etiquetas, que marcan el
inicio y el fin de cada elemento del documento.
Un documento hipertexto no sólo se compone de texto, puede
contener imágenes, sonido, vídeos, etc., por lo que el resultado
puede considerarse como un documento multimedia, tienen la
extensión .html o .htm.
EJEMPLO 1
Observa en el ejemplo el hipertexto que me permite conectar
una palabra o gráfico de la página en la que estamos a otra
página distinta.
Página 30 de 129

EJEMPLO 2
En el ejemplo 1, se muestra un hipertexto que nos conecta una página a
otra, veamos ahora el código de programación html escrito en un editor
de textos de los dos archivos.
Página 31 de 129

EJERCICIO 1
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda una
práctica demostrativa para generar una pequeña página
Web, utiizando un editor de textos.
Proporcionar la dirección de una página Web válida en
Internet para que los alumnos la consulten y puedan
observar su código.
Explique la estructura básica de una página html y genere un
ejemplo.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas.
Consulta la dirección de Internet proporcionada por tu
profesor y visualiza su código.
Busca y descarga en archivo un manual de HTML, no olvides
comparar entre varios y elegir el más completo. Realiza una
pequeña página Web apoyándote del manual antes
consultado.
EJEMPLO 3
Los navegadores de hoy en día pretenden ser compatibles con
la última versión de HTML. Existen varios navegadores, aquí
te mostramos dos de los más utilizados y que soportan
compatibilidad.
Página 32 de 129

Microsoft Internet Explorer
Mozilla FireFox
EJERCICIO 2
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda una
práctica demostrativa donde se identifiquen versiones de
navegadores Web gratuitos que se pueden descargar de
internet.
Revisar que el alumno descargue e instale el navegador
Indicado.
Instrucciones para el alumno.-
Presta atención al docente en la demostración práctica;
pregunta todas las dudas que tengas.
Busca y descarga una versión de algún navegador Web
gratuito indicado por el docente.
Instala el navegador Web en tu máquina.
Llama a tu profesor para que te revise.
Página 33 de 129

EJEMPLO 4
Un servidor web es un programa que implementa el
protocolo HTTP (hypertext transfer protocol). Este
protocolo está diseñado para transferir lo que llamamos
hipertextos, páginas Web o páginas HTML (hypertext
markup language): Textos complejos con enlaces, figuras,
formularios, botones y objetos incrustados como
animaciones o reproductores de sonidos.
Sin embargo, el hecho de que HTTP y HTML estén
íntimamente ligados no debe dar lugar a confundir ambos
términos. HTML es un formato de archivo y HTTP es un
protocolo.
Un servidor Web se encarga de mantenerse a la espera de
peticiones HTTP llevada a cabo por un cliente HTTP que
solemos conocer como navegador. El navegador realiza una
petición al servidor y éste le responde con el contenido que
el cliente solicita.
Un servidor Web muy importante es el denominado Apache:
EJEMPLO 5
Veamos el acceso a un buscador muy conocido:
http://www.google.com/
Página 34 de 129

El protocolo https: (HyperText Transport Protocol Secure), es el
protocolo para la conexión a servidores de la WWW seguros.
Estos servidores son normalmente de ámbito comercial y
utilizan encriptación para evitar la intercepción de los datos
enviados, usualmente números de tarjeta de crédito, datos
personales, etc..., realizará una conexión a un servidor de la
WWW seguro. Veamos el ejemplo la página de un banco:
https://www.bbva.es/TLBS/tlbs/jsp/esp/home/index.jsp
ftp: (File Transfer Protocol), utilizará el protocolo FTP de
transferencia de archivos. Se utilizará cuando la información que
se desee acceder se encuentre en un servidor de ftp. Por
defecto se accederá a un servidor anónimo (anonymous). Por
ejemplo:
ftp://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2.0.0.1-
candidates/rc1/
Página 35 de 129

El protocolo TCP/IP es un protocolo DARPA que proporciona
transmisión fiable de paquetes de datos sobre redes. El nombre
TCP / IP proviene de dos protocolos importantes de la familia, el
Transmission Control Protocol (TCP) y el Internet Protocol (IP).
Todos juntos llegan a ser más de 100 protocolos diferentes
definidos en este conjunto.
El TCP / IP es la base del Internet que sirve para enlazar
computadoras que utilizan diferentes sistemas operativos,
incluyendo PC, minicomputadoras y computadoras centrales
sobre redes de área local y área extensa.
Página 36 de 129

EJERCICIO 3
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda una
práctica demostrativa donde se explique el manejo de los
principales protocolos de internet, principalmente: http, https
y ftp.
Además de la configuración del protocolo TCP/IP, para
conectarse a internet.
Revisa la investigación de los diferentes tipos de servidores.
Explica a detalle los diferentes tipos de servidores.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas.
Investiga los tipos de servidores que existen, y entrega la
información impresa al profesor.
PRÁCTICA I
Competencia II.- Manejar protocolos y lenguajes de
Internet.
Habilidades.-
1. Crear hipertexto.
2. Utilizar servidores Web.
3. Manejar protocolos.
4. Manejar el lenguaje HTML.
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Proporciona la dirección de
una página para descargar un archivo vía ftp.
Verificar que frente a los integrantes del grupo o del equipo,
el alumno desarrolle cada uno de los pasos indicados. Se
sugiere el uso de: GUÍA DE OBSERVACIÓN: TINF-
04/M2S3/ED2-3
Instrucciones para el alumno.-
1. Investiga qué es un Editor.
2. Copia la información encontrada.
3. Crea una pequeña página Web utilizando la estructura
proporcionada por el profesor.
4. Pega la información que encontraste.
5. Genera tu página Web.
6. Guárdalo en una carpeta con tu nombre.
Página 37 de 129

7. Descarga el archivo de la página ftp que te indique el
profesor en la carpeta antes creada.
8. Entra a las propiedades del protocolo TCP/IP y verifica si
tu dirección IP es una dirección dinámica o una dirección
estática.
9. Llama a tu profesor para que te revise.
Conclusiones de la competencia
Para esta lograr esta competencia se hizo necesario ejecutar una serie de
ejercicios y prácticas secuenciales que permiten desarrollar las habilidades y
destrezas para crear un hipertexto básico, utilizar los servidores Web, manejar
los protocolos y lenguajes de Internet.
La evaluación de las habilidades y destrezas, conocimientos y actitudes de esta
competencia se hará mediante el instrumento de evaluación guía de
observación TINF-04/M2S3/ED2-3.
Página 38 de 129

COMPETENCIA III Programar en un lenguaje de hipertexto.
Introducción
E N la actualidad mucha gente
accede a Internet y busca
información, la cual
encuentra generada en un formato de
se
hipertexto por medio de una página
Web. Recuerda que un hipertexto no
sólo se compone de texto, puede
contener imágenes, sonido, vídeos,
etc., por lo que el resultado puede
considerarse como un documento
multimedia, tienen la extensión .html o
.htm.
Los navegadores se encargan de interpretar el código HTML de los
documentos, y de mostrar a los usuarios las páginas Web resultantes del
código interpretado.
En esta competencia realizaremos la programación de páginas Web,
codificándola en un editor de textos. Insertando etiquetas principales (Estructura
de una página Web), vínculos e hipervínculos, anexando marquesinas,
diseñando tablas, insertando Imágenes, sonido y video así como la inserción de
caracteres especiales.
Una vez que terminemos con esta competencia tu podrás programar y generar
las páginas Web que necesites, ya sea personal o comercial, además que
puedes apoyarte del software de diseño para realizar diseños, imágenes, y
logotipos para tu aplicación, así mismo podrás crear animaciones multimedia
que le pueden dar aun mas profesionalismo a tus páginas Web.
Página 39 de 129

1. Insertar etiquetas principales.
2. Manejar etiquetas secundarias.
HABILIDAD 3. Agregar marquesinas.
4. Insertar caracteres especiales.
Vamos a comenzar nuestra tercera competencia conociendo
el funcionamiento las etiquetas principales y secundarias de
RESULTADO DE
una página Web, agregando marquesinas para movimiento
APRENDIZAJE de nuestros objetos insertando estas etiquetas en un editor
de textos para generar una página Web.
Desarrollo
Un \"editor de texto\" es un programa que permite escribir y
modificar archivos digitales compuestos únicamente por
texto sin formato, conocidos comúnmente como archivos de
texto.
Hay una gran variedad de editores de texto. Algunos son de
uso general, mientras que otros están diseñados para
escribir o programar en un lenguaje. Algunos son muy
sencillos, mientras que otros tienen implementadas gran
cantidad de funciones.
EJEMPLO 1
Existen gran variedad de Editores de Texto donde puedes
utilizar el que más te agrade y generar tus páginas Web,
recuerda que se tiene que guardar con la extensión .htm o
html.
En la siguiente ilustración se muestran dos editores de texto
fáciles de utilizar.
Notepad o Bloc de notas es un editor de texto simple
incluido en los sistemas operativos de Microsoft desde 1985.
Su funcionalidad es muy sencilla, con capacidades de
formato (negrita, cursiva...) propias de procesadores de
textos, o facilidades de programación (edición hexadecimal,
reemplazado de texto...).
Página 40 de 129

WordPad es un sencillo programa de procesamiento de
texto que viene incluido en la lista de accesorios gratuitos en
Microsoft Windows.
EJEMPLO 2
Hoy en día existen un gran número de editores que permiten
crear páginas Web sin la necesidad de escribir ni una sola
línea de código HTML.
Estos editores disponen de un entorno visual, y generan
automáticamente el código de las páginas. Al poder ver en
todo momento cómo quedará la página en el navegador, se
facilita la creación de las páginas, y el uso de menús permite
ganar rapidez.
Los editores visuales pueden generar en ocasiones código
basura, es decir, código que no sirve para nada, en otras
ocasiones puede ser más efectivo corregir directamente el
código por lo que resulta necesario conocer HTML para
poder depurar el código de nuestra páginas.
Página 41 de 129

Algunos de los editores visuales con los que podrás crear tus
páginas Web son: Adobe Dreamweaver, Microsoft
Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage,
HotDog Proffesional, Netscape Composer y Arachnophilia,
de los cuales algunos tienen la ventaja de ser gratuitos.
Aquí te mostramos dos de los editores visuales de páginas
Web más utilizados.
Macromedia Dreamweaver
Microsoft FrontPage
Estos programas generadores de
código los manejaremos en la
siguiente competencia, por ahora
dediquémonos a aprender la
sintaxis del lenguaje HTML.
Página 42 de 129

EJEMPLO 3
¿Qué es una etiqueta?
Una etiqueta o marcas delimitan cada uno de los elementos que
componen un documento HTML. Existen dos tipos de etiquetas, la
de comienzo de elemento y la de fin o cierre de elemento.
La etiqueta de comienzo está delimitada por los caracteres < >.
Está compuesta por el identificador o nombre de la etiqueta, y
puede contener una serie de atributos opcionales que permiten
añadir ciertas propiedades. Su sintaxis es: <identificador
atributo1 atributo2 ...>.
La etiqueta de final está delimitada por los caracteres </ >. Está
compuesta por el identificador o nombre de la etiqueta, y no
contiene atributos. Su sintaxis es: </identificador>.
Realicemos un ejemplo con la estructura básica de una página
Web.
1. Iniciamos cualquier editor de textos…Para este ejemplo
utilizaremos el bloc de notas.
2. Escribamos la estructura básica de una página Web.
3. Te preguntarás para qué sirve cada etiqueta, bueno la
describiremos a continuación.
Página 43 de 129

<html> Declara el inicio del
programa
<head> Declara la cabecera
<title>Mi Primer Página...</title> y el título de la
</head> página Web
<body bgcolor=\"#FFCC99\"> Establece un color
de fondo para el
cuerpo del programa
Elaborar páginas Web utilizando las Texto que se
aplicaciones actuales muestra dentro de la
página Web
</body> Se cierra el cuerpo
del programa
</html> Cierra la etiqueta
para el programa
4. Una vez aclarada la estructura de una página Web,
guardemos nuestro código, con el nombre de Cecyt.htm o
Cecyt html. (Recuerda que se admite la extensión .htm o
html).
5. Una vez guardado el archivo, ciérralo y vayamos a la
carpeta donde fue guardado, ya debe aparecer con un
icono correspondiente al navegador que tengamos
instalado.
Página 44 de 129

6. Abramos este archivo para ver como quedó nuestra página
Web.
7. Este sería el resultado de nuestra página Web.
8. Con la opción de que si queremos ver o modificar el código
de nuestra página Web, presionamos el botón derecho
sobre la página para ver nuestro código.
9. Para mostrar nuevamente el código de nuestra página Web
donde podemos modificar los datos que nosotros queramos
por ejemplo que el color del body ahora que sea en color
azul: <body bgcolor=\"#3399CC \">
Página 45 de 129

10. Solo basta con guardar pasarnos a nuestro navegador y
presionar F5 para actualizar.
11. Donde nos mostrará nuestros nuevos resultados.
Las etiquetas pueden estar escritas en minúsculas o
mayúsculas y no marca error por eso, pero si sería un
error no escribir las etiquetas correctamente, lo que
ocasionaría que no se mostrara correctamente nuestra
página Web. Sin embargo es recomendable que
adoptemos un solo formato al escribirlas, es decir o todas
la etiquetas las escribimos solo con minúsculas o todas
las escribimos con mayúsculas, esto para evitar que al
momento de subir las página al servidor, los enlaces
generen error.
Página 46 de 129

EJERCICIO 1
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda una
demostración práctica sobre la paleta de colores y la
combinación de los mismos.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas.
Descarga de algún buscador la paleta de colores y guárdala
en algún medio de información como un disco de 3 ½ o tu
memoria para que la traigas siempre y la consultes cuando
necesites de algún color en especial.
EJEMPLO 4
Formatear el texto <font> ...
Las propiedades del texto pueden modificarse a través de la
etiqueta <font>. Para ello, podemos insertar el texto entre las
etiquetas <font> y </font>, especificando algunos de los atributos
de la etiqueta:
Atributo Significado Posibles valores
face fuente Nombre de la fuente, o fuentes
Número hexadecimal o texto
color color del texto
predefinido
Valores del 1 al 7, siendo por
defecto el 3,
size tamaño del texto o desplazamiento respecto al
tamaño por defecto, añadiendo + o
- delante del valor
Ejemplo:
<font color=\"#FFFFCC\" size=\"10\" face =\"Arial\">
VIVA MEXICO
</font>
A continuación se muestran algunas etiquetas asociadas al tipo de
letra:
Página 47 de 129

Etiqueta Significado Ejemplo
<b> negrita CECyTE
<i> cursiva CECyTE
<u> subrayado CECyTE
<s> tachado CECyTE
<tt> teletipo (máquina de escribir) CECyTE
<big> aumenta el tamaño de la fuente CECyTE
<small> disminuye el tamaño de la fuente CECyTE
EJEMPLO 5
Marquesina
Las marquesinas son texto, imágenes, o una mezcla entre
texto e imágenes, que pueden desplazarse de un lado a otro
de la ventana en forma de línea.
Para insertar una marquesina, es necesario insertar el texto
entre las etiquetas <marquee> y </marquee>.
<marquee bgcolor=\"#FFFFFF\"
behavior=\"alternate\" direction=\"down\">
VIVA MEXICO
</marquee>
<marquee bgcolor=\"#FFFFFF\" behavior=\"scroll\"
direction=\"up\">
VIVA MEXICO
</marquee>
<br><br>
Página 48 de 129

<marquee bgcolor=\"#FFFFFF\" behavior=\"scroll\"
direction=\"rigth\">
VIVA MEXICO
</marquee>
<br><br>
<marquee bgcolor=\"#FFFFFF\" behavior=\"slide\"
direction=\"right\">
VIVA MEXICO
</marquee>
<br><br>
<marquee bgcolor=\"#FFFFFF\" behavior=\"slide\"
direction=\"left\">
VIVA MEXICO
</marquee>
<br><br>
A través del atributo behavior puede modificarse el tipo de
movimiento. Puede tomar los valores:
o alternate (de lado a lado de la ventana, como si
rebotará en los extremos).
o scroll (de un lado a otro, continuamente).
o slide (de un lado a otro, pero una sola vez).
o A través del atributo direction puede modificarse la
dirección en la que se moverá el texto. Puede tomar
los valores:
o down (de arriba a abajo).
o up (de abajo a arriba).
Página 49 de 129

o left (de derecha a izquierda).
o right (de izquierda a derecha).
También es posible establecer un color de fondo, a través
del atributo bgcolor.
Existen otros atributos como:
La velocidad de desplazamiento varía con scrollamount, que
marca los saltos según el valor numérico, scrooldelay que
determina el retraso en el movimiento en milisegundos.
El atributo loop que define el número de veces que vamos a
ver moverse el texto.
Los atributos hspace y vspace los conocemos, definirían el
espacio horizontal y vertical del texto fuera de la marquesina.
EJERCICIO 2
Material de apoyo.- Computadora e Internet.
Instrucciones para el docente.- Revise y apoye al alumno
por si tuviera alguna duda.
Instrucciones para el alumno.- Realiza una página Web en
donde pruebes el código de las marquesinas del Ejemplo 5.
EJEMPLO 6
Caracteres especiales.
Una página Web se visualiza en países distintos, que usan
conjuntos de caracteres distintos. El lenguaje HTML nos ofrece
un mecanismo por el que podemos estar seguros que una serie
de caracteres raros se van a ver bien en todos los ordenadores
independientemente de su juego de caracteres.
Cuando queremos poner uno de estos caracteres especiales en
una página, debemos sustituirlo por su código.
Por ejemplo, la \"á\" (a minúscula acentuada) se escribe
\"&aacute;\" de modo que la palabra página se escribiría en una
página HTML de este modo: p&aacute;gina.
A continuación se muestra una lista con algunos caracteres y el
nombre con el que han de ser representados:
Página 50 de 129

Carácter Representación Carácter Representación
< &lt; € &euro;
> &gt; ç &ccedil;
á &aacute; Ç &Ccedil;
Á &Aacute; ü &uuml;
é &eacute; Ü &Uuml;
É &Eacute; & &amp;
í &iacute; ¿ &iquest;
Í &Iacute; ¡ &iexcl;
ó &oacute; \" &quot;
Ó &Oacute; · &middot;
ú &uacute; º &ordm;
Ú &Uacute; ª &ordf;
ñ &ntilde; ¬ &not;
Ñ &Ntilde; © &copy;
™ &#153; ® &reg;
EJERCICIO 3
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda una
demostración práctica guiada sobre la creación de páginas
Web, con colores de fondo e imágenes; reglas, tipos de
letras, formatos y color de las letras, utilizando marquesinas,
alineación de parrafos, inserción de listas, numeración y
viñetas, asi como la inserción de caracteres especiales.
Se sugiere que el alumno genere una página Web con las
herramientas que se vayan explicando durante la práctica
guiada.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas. Realiza la práctica indicada por el profesor.
Página 51 de 129

PRÁCTICA I
Competencia II.- Programar en un lenguaje de hipertexto.
Habilidades.-
1. Insertar etiquetas principales.
2. Manejar etiquetas secundarias.
3. Agregar marquesinas.
4. Insertar caracteres especiales.
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Revisa las respuestas de
cada uno de los alumnos.
Una vez revisada la práctica, realimenta con todo el grupo
las respuestas de la misma.
Instrucciones para el alumno.- Contesta brevemente cual
es la función que hace cada una de las etiquetas. Recuerda
escribir ordenadamente con letra legible, con limpieza y sin
faltas de ortografía.
CODIGO EXPLICA PARA QUE SIRVE
1. <html>
2. <head>
<title>
Mi Primer página Web...
</title>
</head>
3. <body bgcolor=\"#FFCC99\">
4. <body
background=\"fondo.jpg\">
5. <!—Saludos…//-->
6. <font color=\"#FFFFCC\"
size=\"10\" face =\"Arial\" >
VIVA MEXICO
</font>
7. <p align=\"center\"> HOLA
</p>
8. <p align=\"left\"> HOLA
</p>
Página 52 de 129

9. <p align=\"rigth\"> HOLA
</p>
10. <marquee
bgcolor=\"#FFFFFF\"
behavior=\"alternate\"
direction=\"down\">
VIVA MEXICO
</marquee>
<br><br>
11. <marquee
bgcolor=\"#FFFFFF\"
behavior=\"scroll\"
direction=\"up\">
VIVA MEXICO
</marquee>
<br><br>
12. <marquee
bgcolor=\"#FFFFFF\"
behavior=\"scroll\"
direction=\"rigth\">
VIVA MEXICO
</marquee>
<br><br>
13. <marquee
bgcolor=\"#FFFFFF\"
behavior=\"slide\"
direction=\"right\">
VIVA MEXICO
</marquee>
<br><br>
14. <marquee
bgcolor=\"#FFFFFF\"
behavior=\"slide\"
direction=\"left\">
VIVA MEXICO
</marquee>
<br><br>
15. scrollamount
16. scrooldelay
17. loop
18. hspace y vspace
19. <big>
Página 53 de 129

20. <small>
21. <h1>HOLA /h1>
.
.
.
<h6>HOLA </h6>
22. <br>
23. <b> CECyTE</b>
24. <s> CECyTE </s>
25. <tt> CECyTE</tt>
26. <u> CECyTE </u>
27. <i> CECyTE </i>
28. &nbsp
29. &aacute
30. </body>
31. </html>
Página 54 de 129

PRÁCTICA II
Competencia II.- Programar en un lenguaje de hipertexto.
Habilidades.-
1. Insertar etiquetas principales.
2. Manejar etiquetas secundarias.
3. Agregar marquesinas.
4. Insertar caracteres especiales.
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.-
Verificar que frente a los integrantes del grupo o del equipo,
el alumno desarrolle cada uno de los pasos indicados. Se
sugiere el uso de: LISTA DE COTEJO: TINF-04/M2S3/EP1-5
Instrucciones para el alumno.-
1. Inicializa el navegador instalado.
2. Utiliza los buscadores de Internet para bajar una
página Web que hable de los tipos de protocolos.
3. Envía la información que encontraste acerca de
protocolos y a la dirección de correo proporcionada
por tu profesor en un archivo adjunto.
4. Inicia el editor Bloc de notas.
5. Genera el código para crear una página Web
siguiendo la siguiente estructura.
a. Insertar como título de la página tu nombre
completo.
b. Coloca en color azul el cuerpo de la página.
c. Insertar como título dentro de la página
“ELABORACIÓN DE PÁGINAS WEB”.
d. Insertar el texto buscado y haz una síntesis en
el cuerpo de la página.
e. Coloca una marquesina de color blanco con
texto Arial número 12 en color rojo movimiento
alternativo y dirección izquierda que se repita
solamente 3 veces.
f. Inserta las siguientes palabras y caracteres
especiales en la Página Web.
Página (Con letra en negritas).
Canción (Con letra cursiva).
© (con letra subrayado).
® (con letra teletipo o máquina de escribir).
6. Guardar la página con el nombre Práctica2 y con
formato htm en algún medio de información.
7. Prueba que funcione adecuadamente tu página con lo
requerido y una vez que termines llama al profesor y
entrega tu disco.
Página 55 de 129

5. Diseñar tablas.
HABILIDAD 6. Insertar Imágenes, sonido y video.
7. Insertar vínculos e hipervínculos.
Continuemos con nuestra tercera competencia en donde
RESULTADO DE
lograremos diseñar tablas, insertar imágenes, sonido y video
APRENDIZAJE a las páginas, así como insertar vínculos e hipervínculos.
EJEMPLO 7
Tabla <table>
Las tablas están formadas por celdas, que son los recuadros
que se obtienen como resultado de la intersección entre una fila y
una columna.
Aplicar las herramientas de software de
diseño para el manejo de gráficos.
Generar animación con aplicaciones
multimedia.
Elaborar páginas Web utilizando las
aplicaciones actuales.
Para crear una tabla tenemos dos etiquetas <table> y </table>.
Entre dichas etiquetas habrá que especificar las filas y columnas
que formarán la tabla.
Fila <tr>
Es necesario insertar las etiquetas <tr> y </tr> por cada una de las
filas de la tabla. Estas etiquetas deberán insertarse entre las
etiquetas <table> y </table>.
Por ejemplo, para crear una tabla con cinco filas escribiríamos:
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
Columna o celda <td>
Para crear una tabla no basta con especificar el número de filas,
es necesario también especificar el número de columnas.
Página 56 de 129

Una celda es el resultado de la intersección entre una fila y una
columna, por lo que podremos especificar el número de celdas
por fila.
<table>
<tr>
<td>CECyTE EMILIANO ZAPATA </td>
<td>CECyTE TLAYECAC </td>
</tr>
<tr>
<td> CECyTE TENEXTEPANGO </td>
<td> CECyTE EMILIANO YECAPIXTLA </td>
</tr>
</table>
Formato de la tabla
Atributo Sirve para Valores
Un número,
acompañado de %
width Ancho de la tabla
cuando se desee que
sea en porcentaje
Un número,
acompañado de %
height Alto de la tabla
cuando se desee que
sea en porcentaje
Espacio entre el
cellpadding contenido de las Un número
celdas y el borde
cellspacing Espacio entre celdas Un número
border Grosor del borde Un número
Alineación de la left (izquierda)
align tabla dentro de la right (derecha)
página center (centro)
bgcolor Color de fondo Número hexadecimal
background Imagen de fondo Número hexadecimal
bordercolor Color del borde Número hexadecimal
Ya modificando los atributos de la tabla anterior nos quedaría:
<table width=\"50%\" border=\"2\" align=\"center\" cellspacing=\"0\"
bordercolor=\"#000000\" bgcolor=\"#FFFFFF\">
<tr>
<td>CECyTE EMILIANO ZAPATA </td>
Página 57 de 129

<td>CECyTE TLAYECAC </td>
</tr>
<tr>
<td> CECyTE TENEXTEPANGO </td>
<td> CECyTE YECAPIXTLA </td>
</tr>
</table>
También existen algunos atributos validos para las celdas:
Atributo Sirve para Valores
left (izquierda)
Alineación del
align right (derecha)
contenido de la celda
center (centro)
baseline (línea de
Alineación vertical base)
valign del contenido de la bottom (inferior)
celda middle (medio)
top (superior)
bgcolor Color de fondo número hexadecimal
background Imagen de fondo número hexadecimal
bordercolor Color del borde número hexadecimal
Si modificamos nuevamente los atributos de nuestra tabla:
<table width=\"50%\" border=\"2\" align=\"center\" cellspacing=\"0\"
bordercolor=\"#000000\" bgcolor=\"#FFFFFF\">
<tr align=\"center\" bgcolor=\"#0000CC\">
<td>CECyTE EMILIANO ZAPATA </td>
<td bgcolor=\"#00FF00\">CECyTE TLAYECAC </td>
</tr>
<tr>
<td> CECyTE TENEXTEPANGO </td>
<td> CECyTE YECAPIXTLA </td>
</tr>
</table>
Combinar celdas
Para las etiquetas <td> y <th> existen los atributos colspan y
rowspan, que se utilizan para combinar celdas.
A través del atributo colspan se especifica el número de
columnas por las que se extenderá la celda y a través del atributo
rowspan se especifica el número de filas por las que se
extenderá la celda.
Página 58 de 129

<table width=\"575\" border=\"2\" cellspacing=\"2\">
<tr align=\"center\" valign=\"middle\">
<th colspan=\"3\">SOFTWARE DE DISEÑO</th>
</tr>
<tr align=\"center\" valign=\"middle\">
<th rowspan=\"2\">SUBMODULOS</th>
<th colspan=\"2\">CUMPLE</th>
</tr>
<tr align=\"center\" valign=\"middle\">
<th>SI</th>
<th>NO</th>
</tr>
<tr align=\"center\" valign=\"middle\">
<td>Aplicar las herramientas de software de diseño para
el manejo de gráficos.</td>
<td> 1</td>
<td> 2</td>
</tr>
<tr align=\"center\" valign=\"middle\">
<td>Generar animación con aplicaciones multimedia.</td>
<td> 3</td>
<td> 4</td>
</tr>
<tr align=\"center\" valign=\"middle\">
<td>Elaborar páginas Web utilizando las aplicaciones
actuales.</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Página 59 de 129

EJERCICIO 4
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda una
demostración práctica sobre la creación de tablas en una
página Web.
Se sugiere que el alumno genere una página Web con la
herramienta de tablas que se vayan explicando durante la
práctica guiada.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas.
Realiza la práctica indicada por el profesor.
EJEMPLO 8
Existen también etiquetas para insertar imágenes sonidos y
videos.
Vamos a realizar un ejemplo de cómo insertar imágenes dentro
de nuestra página Web para hacerla mas agradable.
Para insertar una imagen es necesario insertar la etiqueta
<img>. Dicha etiqueta no necesita etiqueta de cierre.
El nombre de la imagen ha de especificarse a través del atributo
src.
Los formatos de imagen que se utilizan comúnmente son el .gif
(Imágenes con movimiento o con fondo transparente) o .jpeg
(.jpg) y deben de estar almacenados en la carpeta donde está el
archivo de la página Web para que pueda ser visualizado. Por
ejemplo:
<img src=\"logo.jpg\" alt=\"CECyTE MORELOS\" >
El texto alternativo se muestra también al situar el puntero sobre
la imagen. Aquí aparecerá CECyTE MORELOS.
El atributo border puede tomar valores numéricos, que indican
el grosor en píxeles del borde.
Página 60 de 129

<img src=\"logo.jpg\" alt=\"CECyTE MORELOS\" border =\"4\">
Para el tamaño de una imagen existen dos atributos width
(anchura) y height (altura) que pueden modificar el tamaño en
píxeles de la imagen.
<img src=\"logo.jpg\" alt=\"CECyTE MORELOS\" border =\"4\"
width=\"200\" height=\"80>
La alineación de las imágenes se establece a través del atributo
align.
Valor Sirve para
left izquierda
middle medio
right derecha
<img src=\"logo.jpg\" alt=\"CECyTE MORELOS\" border =\"4\"
width=\"200\" height=\"80\" align=\"right\">
Por último para insertar un imagen dentro de una tabla basta con:
<table width=\"50%\" border=\"2\" align=\"center\" cellspacing=\"0\"
bordercolor=\"#000000\" bgcolor=\"#FFFFFF\">
<tr align=\"center\" bgcolor=\"#0000CC\">
<td>CECyTE EMILIANO ZAPATA
<img src=\"logo.jpg\" alt=\"CECyTE MORELOS\" border =\"4\"
width=\"200\" height=\"80\">
Página 61 de 129

</td>
<td bgcolor=\"#00FF00\">CECyTE TLAYECAC </td>
</tr>
<tr>
<td> CECyTE TENEXTEPANGO </td>
<td> CECyTE YECAPIXTLA </td>
</tr>
</table>
EJEMPLO 9
En este ejemplo veamos como agregar sonidos a nuestras
páginas Web.
Los formatos de audio compatibles son: el WAV, el MP3 y en
algunas ocasiones el MIDI.
Primero vamos a insertar un sonido de fondo a nuestra página
Web. <bgsound src=\"sonido.mp3\" loop=\"-1\">
Donde src, nos indica la ruta del archivo de audio que se
escuchará y el atributo loop=\"-1\" nos indica que será un ciclo
infinito y se reproducirá de forma continua.
También se puede anexar a nuestra página Web un sonido con
controles.
<embed src=\"angel.mp3\" autostart=\"false\" loop=\"true\">
</embed>
Donde embed permite jalar el control, src nos indica el archivo
que vamos a abrir, autostart =”false”, establece que no se
reproduzca automáticamente y loop=”true” que se reproducirá
nuevamente una vez que termine.
Página 62 de 129

EJEMPLO 10
Ahora vamos a insertar un video como ejemplo dentro de una
página Web.
Los formatos de video compatibles son: AVI, el MPEG y el
MOV.
<embed src=\"vidacorta.mpeg\" width=\"400\" height=\"300\"
autostart=\"false\" loop=\"true\">
</embed>
Donde embed permite jalar el control, src nos indica el archivo
que vamos a abrir, width=\"400\" nos indica el alto del video y
height=\"300\", nos indica el alto autostart =”false”, establece
que no se reproduzca automáticamente y loop=”true” que se
reproducirá nuevamente una vez que termine.
EJERCICIO 5
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda una
demostración práctica sobre la inserción de imágenes, audio
y video.
No olvide dar una explicación sobre referencias relativas y
absolutas para almacenar los archivos de imagen, sonido y
video. Además de una explicación de los plugins y activeX.
Se sugiere que el alumno genere una página Web con la
herramienta de inserción de imágenes, audio y video.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas. Realiza la práctica indicada por el profesor.
Página 63 de 129

EJEMPLO 11
Un hiperenlace (también llamado enlace, vínculo, hipervínculo o liga) es
un elemento de un documento electrónico que hace referencia a otro
recurso, por ejemplo, otro documento o un punto específico del mismo o de
otro documento.
Los vínculos son enlaces dentro del mismo documento.
Los hipervínculos, son enlaces a otros elementos fuera del documento,
como archivos, imágenes, sonidos videos etc. Los archivos donde conectan
normalmente son a un a página Web o a un archivo.
Iniciemos con nuestro ejemplo de anclas.
Un ancla nos permitirá crear enlaces dentro del mismo documento
especificando a que lugar concreto de una página queremos saltar.
Lo primero de que debemos hacer es declarar nuestra ancla en cualquier
lugar de la página Web.
<a href=\"#ancla1\">ESTA ES UN ANCLA </a>
Donde utilizamos a href para colocar el nombre de nuestra ancla. En texto
ANCLA1 es opcional y puede ir o no y por último cerramos nuestra
etiqueta </a> de hipervínculo.
Conectémonos a una página que se encuentre dentro de nuestra misma
carpeta. <a href=\"zapata2.htm\"> CECyTE PLANTEL EMILIANO ZAPATA
</a><br>
Donde zapata2.html es la página a donde nos conectaremos, y CECyTE
PLANTEL EMILIANO ZAPATA, el hipervínculo.
Página 64 de 129

Vamos a realizar una conexión a una página Web existente
<a href=\"http://www.google.com\"> CONECTANDONOS AGOOGLE </a>
Para descargar o abrir un archivo, por ejemplo un documento de texto.
Debemos de tener el archivo en la misma carpeta.
<a href=\"Desarrollo.doc\" tarjet=_blank > DESCARGAR... </a>
Página 65 de 129

En nuestro último ejemplo vamos a conectar nuestro hipervínculo para que
envié un mensaje electrónico a una dirección ya establecida por medio del
cliente de correo que tengamos configurado en nuestra máquina.
<p align=\"center\">
<a href=\"mailto:e_zapata@cecytemor.com\">
ESCRIBENOS...
</a> </p>
Página 66 de 129

EJERCICIO 6
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda una
demostración práctica sobre anclas, vínculos e hipervínculos,
descarga de archivos, conexión a archivos de distinto
formato.
Se sugiere que el alumno genere una página Web con los
diferentes tipos de vínculos e hipervínculos.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas. Realiza la práctica indicada por tu profesor.
PRÁCTICA III
Competencia II.- Programar en un lenguaje de hipertexto.
Habilidades.-
5. Diseñar tablas.
6. Insertar Imágenes, sonido y video.
7. Insertar vínculos e hipervínculos.
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.-
Verificar que frente a los integrantes del grupo o del equipo,
el alumno desarrolle cada uno de los pasos indicados. Se
sugiere el uso de: LISTA DE COTEJO: TINF-04/M2S3/EP1-5
Instrucciones para el alumno.-
1. Crea una carpeta con tu nombre.
2. Inicia el editor Bloc de notas.
3. Genera el código para crear una página Web siguiendo la
siguiente estructura.
4. Insertar como título de la página tu nombre completo.
5. Coloca una imagen agradable de fondo.
6. Coloca un archivo de sonido de fondo.
7. Insertar como título dentro de la página “ELABORACIÓN
DE PÁGINAS WEB”.
8. Coloca una marquesina de color azul con texto Tahoma
del número 14 en color gris con movimiento alternativo y
dirección izquierda.
9. Inserta la siguiente tabla con el color que desees.
Página 67 de 129

Software de Diseño
Aplicar las herramientas de software de diseño para Corel Dra..
el manejo de gráficos.
Generar animación con aplicaciones multimedia. Flash
Elaborar páginas Web utilizando las aplicaciones Dreamweaver
actuales.
10. Coloca una imagen centrada dentro de la celda Software
de Diseño.
11. Inserta un archivo de sonido con controles.
12. Inserta un archivo de video.
13. Inserta un hipervínculo que te conecte un archivo que tú
elijas.
14. Inserta un ancla con tu nombre al principio de tu
documento.
15. Inserta un hipervínculo al ancla antes creada.
16. Inserta un hipervínculo que te conecte a alguna página
Web disponible en Internet.
17. Inserta un hipervínculo con tu nombre que te permita
enviar un mail a tu dirección de correo.
18. Guarda tu archivo con el nombre de práctica3 con
formato htm.
19. Crea una segunda página personalizada a tu gusto y
guárdala con tu nombre y con formato htm.
20. En la página práctica3 inserta una imagen y con ella crea
un hipervínculo que te conecte a la página que tiene tu
nombre.
21. Prueba y revise que tu página cumpla con todo lo que se
te pide.
22. Guarda tu carpeta completa en algún medio de
información.
23. Lama a tu profesor para que te revise la práctica.
Página 68 de 129

Conclusiones de la competencia
Para esta lograr esta competencia se hizo necesario ejecutar una serie de
ejercicios y prácticas secuenciales que nos permitieron desarrollar las
habilidades y destrezas para crear una página Web, insertar etiquetas
principales y secundarias, caracteres especiales, agregar marquesinas, diseñar
tablas, e insertar imágenes, sonido y video; así como vínculos e hipervínculos
para realizar diferentes conexiones a archivos.
La evaluación de las habilidades y destrezas, conocimientos y actitudes de esta
competencia se hará mediante el instrumento de evaluación lista de cotejo
TINF-04/M2S3/EP1-5.
Página 69 de 129

COMPETENCIA IV. Diseñar una página Web en un editor visual.
Introducción
Una vez que hemos desarrollado las competencias para la edición de páginas
web mediante el lenguaje HTML vamos a dar un salto a la edición visual de
páginas Web, utilizando el software de diseño que es un programa especializado
en el que se genera el código HTML automáticamente, fácil de utilizar y con
presentación profesional.
1. Manipular el software de diseño.
HABILIDADES 2. Ubicar los elementos de la pantalla.
3. Insertar componentes.
Con este primer conjunto de habilidades estarás en
RESULTADO DE
posibilidad de manipular y personalizar a tu gusto el software
APRENDIZAJE que elijas como editor de páginas de internet.
Desarrollo
El conocimiento previo que debes tener para desarrollar estas
habilidades es el manejo de:
• Barra de herramientas para el entorno de trabajo.
• Etiquetas del lenguaje de hipertexto.
• Aplicaciones multimedia.
EJEMPLO 1
Analiza las siguientes figuras con el docente y visualiza las
herramientas y elementos que las integran.
Página 70 de 129

EJEMPLO 2
Veamos las pantallas de dos de los principales programas para
editar páginas Web: Microsoft FrontPage y Adobe
Dreamweaver. Identifica los elementos que tiene la interfaz,
barras de herramientas, paneles, menús, etc.
Página 71 de 129

Microsoft Office FrontPage.
Adobe Dreamweaver.
EJEMPLO 3
La siguiente pantalla pertenece a la interfaz del software editor
de páginas de Web de la compañía Adobe, llamado
Dreamweaver. Identifica y localiza cada una de ellas.
Página 72 de 129

EJERCICIO 1
Instrucciones para el alumno.- Recuerda el nombre en
español e inglés de cada una de las barras de herramientas
y botones que visualizaste en el EJEMPLO 3 y escríbelas en
los recuadros, sin observar la ventana que tiene los
nombres, activa y desactiva los elementos de esta ventana
en el laboratorio.
Instrucciones para el docente.- Se recomienda realizar una
demostración práctica en donde se exponga de forma clara
la función que tiene cada uno de los elementos de la venta
del editor de páginas de Web.
Página 73 de 129

PRÁCTICA 1
Competencia.- Diseñar una página Web en un editor visual.
Habilidades.-
1. Manipular el software de diseño.
2. Ubicar los elementos de la pantalla.
3. Insertar componentes.
Recursos Materiales de Apoyo.- Computadora y software
editor de páginas de internet.
Instrucciones para el docente.- Verificar que los alumnos
desarrollen cada uno de los pasos indicados.
Instrucciones para el alumno.- Realiza de formar ordenada
y con responsabilidad los pasos siguientes:
1. En la ventana principal del software de edición de
páginas de internet anota cuántas y cuáles son las
barras de herramientas que se pueden ocultar y
visualizar.
Página 74 de 129

2. En la ventana principal activa los siguientes
paneles:
• Insertar.
• Líneas de tiempo.
• Resultados.
3. Cambia de posición de por lo menos 4 paneles e
imprime esa ventana.
4. La configuración o tamaño del área de trabajo
depende de:_________________________
Para activar algún panel de herramientas
selecciona la opción de Ventana en el
menú de herramientas.
1. Manipular la barra de Insertar (Común, Diseño,
Formularios, Texto, HTML, Aplicación, Elemento Flash
y Favoritos.)
4. Administrar sitios Web.
5. Crear tablas.
6. Insertar imágenes.
7. Insertar comentarios.
HABILIDADES 8. Anexar contadores de visitas.
9. Administrar titulares.
10. Insertar fecha y hora.
11. Adicionar marquesinas.
12. Manipular botones activables.
13. Insertar aplicaciones multimedia.
14. Crear formularios para manipular bases de datos.
15. Insertar marcos.
RESULTADO DE Con el desarrollo de estas habilidades estarás en posibilidad
de manipular y estructurar el diseño de las páginas Web.
APRENDIZAJE
Página 75 de 129

El conocimiento previo que debes tener para desarrollar
estas habilidades es el manejo de:
• Diseño de una página Web.
• Etiquetas del lenguaje de hipertexto.
• Aplicaciones multimedia.
• Estructura de una base de datos.
• Funciones de las barras de herramientas.
EJEMPLO 1
Esta pantalla muestra el área de trabajo en donde se diseña y se
colocan los elementos que formarán la página Web. En muchos
editores de páginas por defecto tienen el tamaño de esta área como
una página de un documento normal. Por lo que el tamaño depende
de la resolución de su monitor.
EJEMPLO 2
LA BARRA DE INSERCIÓN (Insert Toolbar):
Muestra varios iconos que representan los elementos que podemos
insertar en la página de Internet, por ejemplo: Un vínculo, una
dirección de correo electrónico, una imagen, tablas para acomodar
texto e imágenes, etc.
Esta herramienta es la base para iniciar a diseñar una página Web.
Página 76 de 129

Has uso de esta herramienta en el laboratorio de cómputo con el
apoyo del profesor.
Este menú desplegable contiene una lista con las diferentes
categorías dentro de la que se encuentran agrupados los iconos que
permiten insertar objetos comunes como hipervínculos y vínculos de
e-mail.
EJEMPLO 3
El panel propiedades permite ver las opciones para el texto, las
imágenes y los objetos multimedia ya creados; permitiendo modificar
el tamaño que ocupa en la página Web en píxeles y su posición, el
tamaño del marco, además permite elegir segmentos irregulares de su
área para colocar uno o más vínculos a diferentes páginas Web.
Página 77 de 129

EJERCICIO 3
Material de Apoyo.- Computadora y software de diseño.
Instrucciones para el docente.- Se recomienda una
demostración práctica sobre la manipulación de las barras de
Inserción (Común, Diseño, Formularios, Texto, HTML), así
como sus propiedades.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas. Realiza la práctica indicada por el profesor.
EJEMPLO 4
ADMINISTRAR SITIOS WEB
Un sitio Web (en inglés: website) es un conjunto de páginas Web,
típicamente comunes a un dominio de Internet o subdominio en la
World Wide Web en Internet.
No debemos confundir sitio Web con página Web, esta última es solo
un archivo html, y muchas veces las empresas o personas tienen
mas de 1 archivo colgados en Internet, lo que se constituye en sitio
Web.
Un sitio Web está alojado en un sistema de ordenador conocido
como servidor Web, también llamado servidor HTTP, y estos
términos también pueden referirse al software que se ejecuta en este
sistema y que recupera y entrega las páginas Web en respuesta a
peticiones desde el sitio Web del usuario. Apache es el programa
más comúnmente usado como servidor Web y el Internet Information
Services (IIS) de Microsoft también se usa comúnmente.
Un sitio Web estático es uno que tiene contenido que no se espera
que cambie frecuentemente y se mantiene manualmente por alguna
persona o personas que usan algún tipo de programa editor.
Un sitio web dinámico puede tener cambios frecuentes en la
información. Hay un amplio abanico de sistemas de software, como
Active Server Pages (ASP), Java Server Pages (JSP) y el lenguaje
de programación PHP que están disponibles para generar sistemas
de sitios Web dinámicos.
Veamos como se crea un sitio local len nuestra máquina llamado
CECyTE, el cual contendrá todos los archivos de nuestra página
Web.
Página 78 de 129

Al definir un sitio local:
o Se establece la estructura del sitio que se está creando.
o Se indica a Dreamweaver dónde se desea almacenar todos
los archivos del sitio.
Seleccionar Menú Sitio > Nuevo sitio.
En el campo Nombre
del sitio, se escribe
el nombre del sitio
(en este caso
CECyTE). Conviene
que sea corto. El
nombre del sitio sólo
permite identificarlo
internamente y
seleccionarlo
fácilmente en la lista
de sitios que se van
definiendo (si es que
hay más de uno).
Indicamos que no
utilizamos ninguna
tecnología Servidor.
Página 79 de 129

La carpeta raíz local,
accede a la carpeta
en que se situarán
las páginas del sitio
(previamente
creada).
El campo Carpeta raíz local se actualizará y
mostrará la ruta del sitio local en nuestro disco
duro.
Dentro de esa carpeta se podrán crear otras, pero
todos los archivos del sitio Web deben de estar
dentro de la carpeta principal.
Como trabajaremos
en una carpeta
dentro de nuestra
máquina local, no
utilizamos ningún
servidor remoto.
Por último nos
muestra el resumen
de nuestro sitio Web.
Cuando iniciemos la
aplicación, nos
muestra la
información del sitio
que tenemos
seleccionado.
Página 80 de 129

A partir de aquí ya tenemos el sitio Web creado en la PC, por lo tanto
todos los archivos, imágenes y documentos utilizados para las páginas
Web, quedarán almacenadas en esta carpeta.
Una página index (index.htm), es el archivo principal de nuestro sitio
Web, es decir va a ser la página principal, que se recomienda escribir
su nombre del archivo con minúsculas.
EJERCICIO 4
Material de Apoyo.- Computadora y software de diseño.
Instrucciones para el docente.- Se recomienda una
demostración práctica sobre la Administración de sitios Web.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas. Realiza la práctica indicada por el profesor.
EJEMPLO 5
Como lo veíamos en la competencia No 3, las tablas representan
relaciones entre datos, una tabla esta compuesta por filas y
columnas, donde a la intersección entre una fila y una columna se
le conoce como celda.
Este icono permite agregar una tabla a la página Web. Ésta
tabla permite acomodar en sus recuadros imágenes, y textos
permitiendo tener una mejor estructura en tus páginas.
Observa esta ventana e investiga cuál es su funcionamiento.
Página 81 de 129

EJERCICIO 5
Material de Apoyo.- Computadora y software de diseño.
Instrucciones para el docente.- Se recomienda una
demostración práctica sobre la creación y manipulación de
tablas.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas. Realiza la práctica indicada por el profesor.
EJEMPLO 6
Este icono contiene un submenú que permite insertar una
imagen, un apartador de imagen, una imagen cambiante una
imagen Web HTML de Fireworks o una barra de Navegación.
Se recomienda que las imágenes que se manejen estén
almacenadas en el mismo directorio de la página Web, al
momento en que se coloque en servidor de Internet. Observa y
analiza la siguiente ventana con tus compañeros y profesor.
Página 82 de 129

• Busca dos imágenes sobre tu deporte favorito y
almacénalas en una carpeta denominada “mi primera
página Web”.
EJEMPLO 7
Este icono abre un menú flotante que permite insertar
elementos como: Animaciones Flash, botones animados,
applets de Java, Controladores ActiveX y plugins.
En el laboratorio analiza y describe para qué sirve cada uno de
los siguientes comandos del icono media.
Página 83 de 129

EJERCICIO 6
Material de Apoyo.- Computadora y software de diseño.
Instrucciones para el docente.- Se recomienda una
demostración práctica sobre la inserción de imágenes, así
como la inserción de objetos media.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas. Realiza la práctica indicada por el profesor.
EJEMPLO 8
Panel de Marcos(Frames Panel): este comando abre el panel de
Frames, el cual muestra y permite editar los Frames o Marcos que
contiene la Página Web. Los Frames son páginas Web
independientes que se muestran sobre otra página Web ocupan
todo un margen; generalmente en la esquina o a un lado.
Página 84 de 129

EJERCICIO 7
Material de Apoyo.- Computadora y software de diseño.
Instrucciones para el docente.- Se recomienda una
demostración práctica sobre la manipulación de marcos o
Frames, así como los destinos de los mismos:
_blank
_parent
_self
_top
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas. Realiza la práctica indicada por el profesor.
EJEMPLO 9
COMENTARIOS
Un comentario es un texto informativo que se anexa en una página
Web, con el objetivo de identificar las líneas de código de la
aplicación.
Un comentario no se ve en la página Web, solo queda insertado en el
código de la misma.
Página 85 de 129

Aquí nos muestra el comentario insertado en el ejemplo.
La línea 10, nos muestra el comentario insertado.
EJEMPLO 10
Este icono abre el cuadro de diálogo de Insert Date el cual
permite agregar la fecha del día de hoy u otra a la página Web.
Página 86 de 129

Analiza con tu docente que otras utilidades tiene esta ventana.
CONTADORES DE VISITAS
Los contadores de visitas llevan el control del número de
visitantes que han consultado la página Web.
Página 87 de 129

EJEMPLO 11
ADICIONAR MARQUESINAS
Como veíamos en la competencia número 3, las marquesinas nos
permiten anexar textos, imágenes, entre otros objetos con
movimiento dentro de la página Web.
Aunque algunos editores no cuentan con esta herramienta, lo que
podemos hacer es activar la Vista Código y escribir el código de la
marquesina.
Este es el resultado del código insertado en la página Web.
EJERCICIO 8
Material de Apoyo.- Computadora y software de diseño.
Instrucciones para el docente.- Se recomienda una
demostración práctica sobre la inserción de comentarios,
contadores de visitas, marquesinas así como la fecha y hora.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas. Realiza la práctica indicada por el profesor.
Página 88 de 129

EJEMPLO 12
MANIPULAR BOTONES ACTIVABLES
Dentro del software de diseño, se pueden anexar botones
activables, que vienen incluidos en el software de diseño Web,
o que son generados en algún software de animación
multimedia, como por ejemplo Macromedia Flash.
Este es el resultado de un botón activable insertado en la
página Web.
EJERCICIO 9
Material de Apoyo.- Computadora y software de diseño.
Instrucciones para el docente.- Se recomienda una
demostración práctica sobre la manipulación de botones
activables, así como los destino de los hipervínculos.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas. Realiza la práctica indicada por el profesor.
Página 89 de 129

EJEMPLO 13
CREAR FORMULARIOS
Un formulario es una aplicación que se utiliza para recoger datos
de los usuarios, nos pueden servir para realizar un pedido en
una tienda virtual, crear una encuesta, conocer las opiniones de
los usuarios, recibir preguntas, hacer suscripciones a un boletín
o revista que editemos, etc.
Una vez el usuario rellena los datos y pulsa el botón para enviar
el formulario se arrancará un programa que recibirá los datos y
hará el tratamiento correspondiente (una base de datos por
ejemplo).
Un formulario está formado, entre otras cosas, por etiquetas,
campos de texto, menús desplegables, y botones.
Página 90 de 129

EJERCICIO 10
Material de Apoyo.- Computadora y software de diseño.
Instrucciones para el docente.- Se recomienda revisar la
investigación a los alumnos, sobre los elementos de un
formulario.
Instrucciones para el alumno.- Investiga cuales son los
elementos que se pueden insertar en un formulario e
investiga la función de cada uno de ellos.
EJERCICIO 11
Material de Apoyo.- Computadora y software de diseño.
Instrucciones para el docente.- Se recomienda una
demostración práctica sobre la creación de formularios y la
manipulación de datos a un correo electrónico y a una base
de datos.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas. Realiza la práctica indicada por el profesor.
PRÁCTICA 1
Competencia.- Diseñar una página Web en un editor visual.
Habilidades.-
a. Manipular la barra de Insertar (Común, Diseño,
Formularios, Texto, HTML, Aplicación,
Elemento Flash y Favoritos.)
b. Administrar sitios Web.
c. Crear tablas.
d. Insertar imágenes.
e. Insertar comentarios.
f. Anexar contadores de visitas.
g. Administrar titulares.
h. Insertar fecha y hora.
i. Adicionar marquesinas.
j. Manipular botones activables.
k. Insertar aplicaciones multimedia.
l. Crear formularios para manipular bases de
datos.
m. Insertar marcos.
Recursos Materiales de Apoyo.- Computadora y software
de diseño Web.
Página 91 de 129

Instrucciones para el docente.- Verificar que los alumnos
desarrollen cada uno de los pasos indicados.
Instrucciones para el alumno.- Realiza de formar ordenada
y con responsabilidad los pasos siguientes:
1. Inicia la aplicación de software de diseño.
2. Genera un sitio con tu nombre donde almacenarás tus
páginas Web.
3. Diseña por lo menos 4 páginas Web sobre tu familia y
los valores que se comentan dentro de ella.
4. Estructura tu página Web con tres Frames, en el
orden que te agrade.
5. Describe a cada uno de los intrigantes de tu familia,
apoyándote de los siguientes elementos:
o La creación tablas.
o Inserción de Imágenes, comentarios, la fecha y hora,
así como contadores de visitas.
o Adición de marquesinas.
o Manipulación de botones activables y aplicaciones
multimedia.
6. Realiza el diseño de un formulario sobre tu familia o
persona en cual permita enviar los datos a una
dirección de correo electrónico.
7. Una vez termines tú práctica, revisa que cumpla con
todos los requerimientos y llama al profesor para que
te revise.
Conclusiones de la competencia
Durante el desarrollo de esta competencia se analizaron varios ejemplos, y se
llevaron a cabo varios ejercicios y prácticas con la finalidad de lograr todas las
habilidades y destrezas correspondientes a: La manipulación de la barra de
Insertar (Común, Diseño, Formularios, Texto, HTML, Aplicación, Elemento Flash
y Favoritos.), la administración de sitios Web, la inserción de marcos, imágenes,
comentarios, contadores de visitas, la adicción de marquesinas, la manipulación
de botones activables y aplicaciones multimedia, así como la creación de
formularios para la manipulación de bases de datos. Para evaluar las habilidades
y destrezas, conocimientos y actitudes de esta competencia se hará uso del
instrumento de evaluación LISTA DE COTEJO: TINF-04/M2S3/EP2-5
Página 92 de 129

COMPETENCIA V Crear hipervínculos.
Introducción
N
uevamente hagamos énfasis en
los hipervínculos para conectar
diferentes tipos de archivos. En la
competencia número 3 “Programar en un
lenguaje de hipertexto”, vimos este tipo
de conexiones.
Con los ejercicios y prácticas que te
proponemos en un editor HTML visual,
lograremos desarrollar las habilidades y
destrezas para: insertar marcadores, habilitar los efectos de conversión de
hipervínculos y manipular la conexión a las páginas Web.
1. Insertar marcadores.
HABILIDAD 2. Habilitar los efectos de conversión de hipervínculos.
3. Manipular la conexión a las páginas Web.
En esta competencia vas a desarrollar las habilidades para
RESULTADO DE
crear e insertar marcadores, habilitar los efectos de
APRENDIZAJE conversión de hipervínculos y manipular la conexión a las
páginas Web, todo esto un software de diseño.
Desarrollo
Los libros al momento de que los leemos son secuenciales: una letra y otra y
una página y así hasta el final; en cambio los documentos multimedia son
hipertextos. Donde el visitante va a navegar por los apartados que sean de su
interés, se detiene en un punto lo consulta y vuelve nuevamente, es decir
navega por la información.
Direcciones absolutas y relativas
Una dirección absoluta de un fichero o una página es del estilo:
C:\\Documents and Settings\\SeRGio\\Mis documentos\\Sergio\\index.htm
(para un vínculo que desde otra página nos lleve a la inicial).
Página 93 de 129

Si escribes esto en la casilla de dirección URL, el vínculo funciona trabajando en
la PC.
Pero ¿qué sucede cuando envías un sitio Web al proveedor de Internet?
Probablemente lo has alojado en una carpeta del estilo Cecyte dentro de algún
servidor. La página index no está en la misma ruta que como estaba en la PC.
No está en C:\\Documents and Settings\\SeRGio\\Mis documentos\\Sergio\\ del
servidor.
El servidor tiene su propia estructura y organiza sus propias ubicaciones. La
dirección absoluta que era válida en la computadora en la cual se diseñó el sitio,
pero no lo es en el servidor.
Una ubicación relativa se refiere respecto de la página principal (index). Si
tienes todas las páginas de un sitio Web en la misma carpeta, la dirección
relativa es simplemente el nombre del fichero, sin nada por delante.
Al remitirlo a tu proveedor de Internet, las direcciones relativas funcionan
exactamente igual que en la computadora de diseño. Si alojas las distintas
páginas Web en carpetas que cuelgan de la principal, la dirección relativa es la
ruta desde la página principal hasta la carpeta y fichero en cuestión.
Entonces, volvemos a insistir, las direcciones relativas funcionarán en el
proveedor perfectamente.
Página 94 de 129

Cuando se maneja el cuadro de diálogo Crear
Hipervínculo, y la forma de crearlo es el doble
clic en el fichero de la página correspondiente,
se están utilizando siempre direcciones
relativas.
EJEMPLO 1
Cuando hacemos un hipervínculo, nos referimos a una
dirección relativa a una página Web, que se encuentra
dentro de la misma carpeta o sitio Web.
Un ejemplo de una dirección absoluta es cuando realizamos
un hipervínculo a una página Web que no se encuentra
dentro de nuestra carpeta o sitio Web.
C:/Documents and Settings/SeRGio/Escritorio/Web
Acapulco/
Página 95 de 129

Recuerda que cuando creas un sitio Web en una
aplicación por ejemplo Dreamweaver, todos los
archivos de imagen, sonido, de animación, etc. Que
se van insertando en la página Web, te pregunta si
quieres crear una copia en la carpeta del sitio, para
que no tengamos problema al momento de subir
todo nuestro sitio o trasladar la carpeta a otra
máquina.
EJERCICIO 1
Material de Apoyo.- Computadora y software de diseño.
Instrucciones para el docente.- Se recomienda ejecutar
una demostración práctica sobre el manejo de direcciones
absolutas y relativas.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas.
Página 96 de 129

EJEMPLO 2
Un marcador es muy similar a un ancla y nos sirve para
identificar el lugar a donde la página se va a conectar por
medio de un hipervínculo.
En el procesador de textos Microsoft Word y en Microsoft
Front Page funcionan exactamente igual.
Veamos el ejemplo en el software de diseño Microsoft Front
Page.
Nos genera: <a name=\"hola\"></a>
Donde “hola” es el nombre del marcador.
Ahora vamos a conectar el hipervínculo a la marca antes
establecida.
Listo aquí tendríamos el marcador e hipervínculo insertado.
<a href=\"#hola\">CONECTANDO A HOLA</a>
Página 97 de 129

EJEMPLO 3
Veamos el ejemplo en el software de diseño Macromedia
Dreamweaver.
Nos genera: <a name=\"hola\"></a>
Donde “hola” es el nombre del marcador.
Ahora vamos a conectar el hipervínculo a la marca antes
establecida.
Listo aquí tendríamos el marcador e hipervínculo insertado.
<a href=\"#hola\">CONECTANDO A LA ANCLA </a>
Página 98 de 129

EJERCICIO 2
Material de Apoyo.- Computadora y software de diseño.
Instrucciones para el docente.- Se recomienda ejecutar
una demostración práctica para la creación, modificación y
eliminación de marcadores o anclas en por lo menos dos
programas de diseño de páginas Web.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas.
EJEMPLO 3
Veamos algunos efectos de conversión de hipervínculos, es
decir configuremos la aplicación para cambiar el aspecto de
los hipervínculos, por ejemplo que cuando acerquemos el
cursor; cuando visitamos una liga que cambie de color.
Microsoft Front Page.
Una vez que guardemos el archivo abramos la página Web
donde vemos que el aspecto de los hipervínculos cambia.
Página 99 de 129

Macromedia Dreamweaver.
También se puede cambiar el aspecto de los hipervínculos
en una imagen para que al colocar el cursor sustituya una
imagen por otra.
Página 100 de 129

EJERCICIO 4
Material de Apoyo.- Computadora y software de diseño.
Instrucciones para el docente.- Se recomienda ejecutar
una demostración práctica para la manipular los efectos de
conversión de hipervínculos e imágenes de sustitución.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas.
EJEMPLO 4
Veamos un ejemplo de cómo podemos manipular la
conexión a las páginas Web en cualquier software de
aplicación.
Cuando insertamos un hipervínculo podemos modificar
ciertos parámetros como el texto, el vínculo que será la
conexión a la página Web o el archivo a conectar.
El destino nos indica la ubicación o destino donde aparece
nuestra página o nuestro archivo.
Recuerda que en la competencia anterior utilizamos Marcos
o Frames para poder organizar la información de las páginas
Web de una manera mas organizada.
Página 101 de 129

Lo más interesante de los Frames es la posibilidad que
tienen de interactuar entre si, es decir pulsar un enlace en el
Frame 1 y cargar el contenido en el Frame 2.
<html>
<head>
<title>EJEMPLO DE FRAMES</title>
</head>
<Frameset rows=\"80,*\" cols=\"*\" Framespacing=\"10\"
Frameborder=\"yes\" border=\"10\"
bordercolor=\"#00FF00\">
<Frame src=\"arriba.htm\" name=\"topFrame\"
scrolling=\"SI\" noresize>
<Frameset rows=\"*\" cols=\"127,*\" Framespacing=\"10\"
Frameborder=\"yes\" border=\"10\"
bordercolor=\"#00FF00\">
<Frame src=\"izquierdo.htm\" name=\"leftFrame\"
scrolling=\"SI\" noresize>
<Frame src=\"central.htm\"
name=\"mainFrame\"></Frameset>
</Frameset>
<noFrames><body>
</body></noFrames>
</html>
Recuerda que hay ciertos valores reservados para TARGET
cuando queremos realizar un hipervínculo.
TARGET=_top, hace que la página se cargue en la ventana
completa del navegador.
TARGET=_self, hace que la página se cargue en la misma
ventana del Frame actual.
TARGET=_parent, hace que la página se cargue en el
Frame \"padre\", del que desciende el actual.
TARGET=_blank, hace que la página se cargue en una
nueva ventana.
TARGET=nombre, hace que la página se cargue en el
Frame llamado nombre. Si no existe se carga en una
ventana nueva.
EJERCICIO 5
Material de Apoyo.- Computadora y software de diseño.
Instrucciones para el docente.- Se recomienda ejecutar
una demostración práctica para la manipular la conexión a
las páginas Web.
Instrucciones para el alumno.- Presta atención al docente
Página 102 de 129

en la demostración práctica; pregunta todas las dudas que
tengas.
PRÁCTICA I
Competencia V.- Crear hipervínculos.
Habilidades.-
1. Insertar marcadores.
2. Habilitar los efectos de conversión de hipervínculos.
3. Manipular la conexión a las páginas Web.
Material de Apoyo.- Computadora y software de diseño.
Instrucciones para el docente.- Verificar que frente a los
integrantes del grupo o del equipo, el alumno desarrolle cada
uno de los pasos indicados. Se sugiere el uso de: LISTA DE
COTEJO: TINF-04/M2S3/EP3-5.
Instrucciones para el alumno.-
1. Crea una carpeta con el nombre de hipervínculos.
2. Abre el software diseño de diseño de páginas Web.
3. Crea un nuevo Sitio Web llamado con tu nombre y
guárdalo en la carpeta antes creada.
4. Genera una página Web llamada index, sobre tus amigos
con 3 Frames (izquierdo, arriba y en el centro).
Arriba
Izquierdo Centro
5. Coloca tu nombre completo como título de la página.
6. En la parte superior (Arriba), coloca el siguiente texto:
MIS MEJORES AMIGOS.
7. En el lado izquierdo escribe con texto sencillo o texto
flash: El nombre de 3 de tus mejores amigos.
8. Genera una animación Web referente a ti y a tus amigos
e insértala en el Frame del centro.
9. Inserta una marca o un ancla que se llama “cecyt”
10. Debajo de la animación flash inserta tu nombre y crea un
hipervínculo que se conecte con la marca o ancla “cecyt”.
11. Inserta una imagen de sustitución debajo del hipervínculo
de tu nombre.
12. Realiza una página personal para cada uno de tus tres
amigos, donde describas su personalidad.
13. Vincula cada una de las páginas creadas con los
nombres que se encuentran en el Frame izquierdo, de
manera que aparezcan en el Frame destino centro.
Página 103 de 129

14. Realiza un hipervínculo de regreso a la página principal
para cada una de las páginas de tus amigos.
15. Modifica los efectos de conversión de hipervínculos en el
software de diseño.
16. Prueba y revise que tu página cumpla con todo lo que se
te pide. Guarda la carpeta completa donde se almacenó
tu sitio Web, en algún medio de información.
17. Llama al docente para que te revise la práctica.
Conclusiones de la competencia
Para lograr esta competencia se hizo necesario ejecutar una serie de ejercicios y
prácticas secuenciales para desarrollar las habilidades y destrezas en la
inserción de marcadores, la configuración de los efectos de conversión de
hipervínculos para mejorar el aspecto de las páginas, así como el manipular la
conexión a las páginas Web.
La evaluación de las habilidades y destrezas, conocimientos y actitudes de esta
competencia se hará mediante el instrumento de evaluación lista de cotejo
TINF-04/M2S3/EP3-5
Página 104 de 129

COMPETENCIA VI Crear Vínculos Web.
Introducción
A
ntes de subir nuestra
página Web a un
servidor, vamos a
crear vínculos para abrir
documentos y archivos,
tablas, imágenes, sonidos y
videos, así como la
utilización de algunos de los
protocolos de Internet. En la
competencia Numero 3
“Programar en un lenguaje de hipertexto”, vimos algunos de estos apartados”,
programando esta líneas de código, ahora vamos a utilizar el software de diseño
para generar páginas Web.
Desarrollo
1. Crear vínculos a otros documentos en Web.
2. Crear vínculos y anclas.
3. Crear la estructura de una URL.
4. Utilizar el protocolo http.
5. Vincular archivos.
HABILIDAD 6. Utilizar el protocolo mailto.
7. Realizar listas vinculadas.
8. Vincular tablas.
9. Vincular imágenes.
10. Vincular sonidos.
11. Vincular videos.
Dentro de las habilidades que vamos a desarrollar en esta
RESULTADO DE competencia, está la creación de vínculos a documentos y
APRENDIZAJE
marcas o anclas, la utilización de protocolos como el http y el
mailto, la vinculación de tablas, imágenes, sonidos y videos
en nuestras páginas Web todo esto un software de diseño.
Página 105 de 129

EJEMPLO 1
Recuerda que ya hemos realizado vínculos a otros documentos Web es
decir a otras páginas Web.
Página 106 de 129

EJEMPLO 2
En la competencia anterior manejamos marcas o anclas que
nos sirven para navegar dentro de nuestra misma página
Web a ciertos lugares establecidos.
EJEMPLO 3
Decíamos también que una URL (Uniform Resource
Locator): Es la dirección que se digita en el computador
para que éste muestre la página Web que se desea ver en
INTERNET.
Veamos entonces cual es su estructura.
Página 107 de 129

¿Por qué es importante conocer la estructura del URL?
Porque te permite decidir a primera vista si la página
encontrada puede o no ser de tu interés.
Además te permite encontrar páginas que desaparecen o
vínculos desactualizados para lo cual debes ir recortando el
URL comenzando desde la parte derecha del mismo hasta la
barra inclinada ( / ) y así sucesivamente hasta llegar al
servidor.
EJEMPLO 4
El protocolo mailto, nos permite enviar un mail a un dirección de
correo mediante el cliente correo. Recuerda que ya lo hicimos en
un editor de textos, y que también se pude hacer en un software de
diseño de páginas Web.
Página 108 de 129

EJEMPLO 5
Como último ejemplo de esta competencia vamos a ver ejemplos
de vinculación de listas de archivos, tablas, así como archivos de
imagen, sonido y video.
Si te das cuenta es la misma estructura de los hipervínculos, solo
tenemos que seleccionar el tipo de archivos al cual nos queremos
conectar.
Vínculo a una imagen.
Página 109 de 129

Vínculo a un archivo de audio.
Vínculo a un archivo de video.
Listas Vinculadas
Página 110 de 129

Vincular Tablas
Página 111 de 129

EJERCICIO 1
Material de Apoyo.- Computadora y software de diseño.
Instrucciones para el docente.- Se recomienda ejecutar
una demostración práctica para crear vínculos a otros
documentos, vínculos y anclas dentro del mismo documento,
utilizar los protocolos y vincular listas, tablas, imágenes,
sonidos y videos con formato compatible.
Divida el grupo en equipos de trabajo.
Gestione la autorización con una pequeña empresa pública o
privada para que el alumno diseñe su página Web, misma
que se le asignará al grupo de alumnos dividido.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas.
PRÁCTICA I
Competencia VI.- Crear hipervínculos.
Habilidades.-
1. Crear vínculos a otros documentos en Web.
2. Crear vínculos y anclas.
3. Crear la estructura de una URL.
4. Utilizar el protocolo http.
5. Vincular archivos.
6. Utilizar el protocolo mailto.
7. Realizar listas vinculadas.
8. Vincular tablas.
9. Vincular imágenes.
10. Vincular sonidos.
11. Vincular videos.
Material de Apoyo.- Computadora y software de diseño.
Instrucciones para el docente.- Verificar que frente a los
integrantes del grupo o del equipo, el alumno desarrolle cada
uno de los pasos indicados. Se sugiere el uso de: LISTA DE
COTEJO: TINF-04/M2S3/EP4-5.
Instrucciones para el alumno.-
1. Inicia la aplicación de software de diseño.
2. Genera el sitio donde almacenarás tus páginas Web.
3. Diseña 5 páginas de manera creativa, para la publicidad
de tu empresa que te asignó el profesor en el ejercicio
anterior.
Página 112 de 129

4. Utiliza Frames.
5. Una de las páginas tendrá como nombre index.html, y en
ellas se tendrán los hipervínculos a las otras páginas, las
4 restantes estarán diseñadas de acuerdo a lo que
ofreces, servicios, comentarios y ofertas que brinda tu
empresa.
6. Las páginas tendrán como características extras:
a. Una marquesina.
b. Una animación Flash.
c. Texto flash.
d. Botones Flash.
e. Una tabla donde organices información.
f. Una lista o numeración.
g. Inserción de imágenes.
h. Inserción de un sonido.
i. Inserción de un video
j. Imagen de sustitución.
k. Enlaces a anclas o hipervínculos.
l. Enlace a direcciones Web.
m. Enlace a un correo electrónico.
n. Descarga de archivos.
o. Enlace a un documento .pdf.
7. Prueba y revisa que tu página cumpla con todo lo que se
te pide. Guarda la carpeta donde se almacenó tu sitio
Web, en algún medio de información.
8. Llama al docente para que te revise la práctica.
Conclusiones de la competencia
Para esta lograr esta competencia se hizo necesario ejecutar una serie de
ejercicios y prácticas que permitieran desarrollar las habilidades y destrezas
responsablemente para utilizar los protocolos de Internet y las URL, crear
vínculos a documentos en la Web, así como archivos de imagen, sonido y video,
además de vincular listas y tablas de la página Web.
La evaluación de las habilidades y destrezas, conocimientos y actitudes de esta
competencia se hará mediante el instrumento de evaluación lista de cotejo
TINF-04/M2S3/EP4-5
Página 113 de 129

COMPETENCIA 7. Almacenar páginas en un servidor Web.
Introducción
P
ues finalmente ha llegado el momento de publicar nuestro trabajo.
Todas las competencias desarrolladas hasta este momento no
tendrían sentido si nuestras páginas no se publicarán. Para ello
entonces, los ejemplos, ejercicios y prácticas permitirán que al finalizar la
competencia tu estés en posibilidad de almacenar páginas en un servidor ya sea
gratuito o en su caso dedicado. Asimismo, durante esta parte del curso, dominarás
claramente las capacidades para el manejo de software de comunicación vía ftp.
¡¡¡Mostremos al mundo nuestras páginas!!!
Página 114 de 129

Desarrollo
1. Manipular un FTP anónimo.
HABILIDAD 2. Manipular un FTP no anónimo.
3. Almacenar las páginas Web en un servidor dedicado o
gratuito.
RESULTADO DE Al desarrollar este conjunto de habilidades podrás almacenar
APRENDIZAJE
páginas en un servidor de internet, a través de programas
FTP.
EJEMPLO 1
A través de las capturas de pantalla que a continuación se te
presentan ejemplificaremos el acceso a un servidor de
páginas web mediante una aplicación FTP denominada
Ipswitch WS_FTP. Observa con detalle que se trata de un
servidor dedicado y que vamos a aprovechar para subir una
página de ejemplo, en un directorio que previamente nos ha
asignado el administrador de este servidor.
(1) El programa FTP en ejecución (2) Creando una nueva cuenta en el programa. Esta
cuenta ya debe estar dada de alta en el servidor donde
se va a almacenar la página y regularmente la crea el
administrador del mismo.
(3) Nombre para la conexión (4) Dirección del servidor
Página 115 de 129

(2) Datos de la cuenta (6) Tipo de cuenta
(7) Finalizando la creación de la conexión (8) Conectándose al servidor mediante los datos de la
conexión
(9) La página antes de subir archivos (10) Los archivos que se van a subir.
(11) Seleccionado el directorio en la PC donde se (12) archivos seleccionados y listos para subirlos al
encuentran los archivo a subir de la página servidor. Nótese que incluye la estructura de directorios.
(13) Comenzando a subir los archivos. (14) Subiendo los archivos. Obsérvese el avance de
cada uno.
Página 116 de 129

(15) La página montada ya en el servidor.
Muchos servidores permiten
subir los archivos de las
páginas mediante un
programa FTP pero también
mediante un administrador de
archivos en una interfaz www.
EJEMPLO 2
La imagen siguiente muestra una interfaz www para subir
archivos al mismo servidor que en el ejemplo 1 de esta
competencia.
Página 117 de 129

EJERCICIO 1
Material de Apoyo.- Guía de aprendizaje, lápiz, borrador.
Instrucciones para el alumno.- en cada uno de los siguientes
casos completa la lista de características que se te solicitan.
Instrucciones para el docente.- Revisar que el ejercicio del
alumno cumpla con lo requerido, además de tomar en cuenta la
limpieza del trabajo, realimentando las posibles contingencias.
SERVIDOR GRATUITO SERVIDOR DEDICADO
3 ventajas
3 desventajas
Principal
característica
EJERCICIO 2
Material de Apoyo.- Equipo de cómputo, página web diseñada,
software FTP.
Instrucciones para el alumno.- Localiza alguna de las páginas
creadas durante este curso, crea una cuenta en un servidor
gratuito. Sube los elementos de tu página a la dirección web
asignada mediante un programa FTP. Muestra el trabajo al resto
del grupo.
Instrucciones para el docente.- Antes de realizar este ejercicio
es recomendable realizar una demostración práctica en donde se
muestre las técnicas necesarias para crear una cuenta en un
servidor web gratuito y subir las páginas ahí. Asímismo, se
recomienda revisar que el ejercicio del alumno cumpla con lo
requerido, además de tomar en cuenta la limpieza del trabajo,
realimentando las posibles contingencias.
Página 118 de 129

EJERCICIO 3
Material de Apoyo.- Equipo de cómputo, página web diseñada,
software FTP, servidor de páginas web.
Instrucciones para el alumno.- El docente te proporcionará los
datos de una cuenta en un servidor dedicado. Una vez realizado lo
anterior, localiza la página utilizada en el ejercicio 2 de esta
competencia y súbela al servidor mediante software FTP.
Instrucciones para el docente.- Se recomienda crear las
cuentas en el servidor antes de realizar este ejercicio. En caso de
no tener acceso a un servidor dedicado, una alternativa puede ser
montar un servidor local y acceder a él vía FTP – para montar el
servidor una buena opción es utilizar EASYPHP, que proporciona
elementos básicos para tal finalidad casi sin tener que configurar
nada. Asimismo, es recomendable realizar una demostración
práctica en donde se muestre las técnicas necesarias para crear
una cuenta en un servidor web dedicado y subir las páginas ahí. Se
recomienda, finalmente, revisar que el ejercicio del alumno cumpla
con lo requerido, además de tomar en cuenta la limpieza del
trabajo, realimentando las posibles contingencias.
PRÁCTICA 1
Competencia: 7. Almacenar páginas en un servidor Web.
Habilidad(es):
1. Manipular un FTP anónimo.
2. Manipular un FTP no anónimo.
3. Almacenar las páginas Web en un servidor dedicado o
gratuito.
Instrucciones para el alumno.- Localiza la página creada en la
práctica 1 de la competencia No. 6 de este submódulo. Crea una
cuenta en un servidor gratuito y sube la página ahí. Luego el
docente te proporcionará una cuenta en un servidor web en donde
podrás subir tu página por segunda ocasión. Esto es, tendrás tu
página en un servidor gratuito y un servidor dedicado.
Instrucciones para el docente.- Es recomendable crear una
cuenta en un servidor dedicado para que el alumno suba su página
ahí. Revisar que la práctica del alumno cumpla con lo requerido,
además de tomar en cuenta la limpieza del trabajo, realimentando
las posibles contingencias. Se sugiere el uso de la guía de
observación TINF-04/M2S3/ED3-3 y la lista de cotejo TINF-
04/M2S3/EP5-5
Página 119 de 129

Conclusiones de la competencia
Con los ejemplos, ejercicios y prácticas desarrollados en esta competencia sin
duda estarás en posibilidad de montar tus páginas en un servidor, ya sea
gratuito en su caso dedicado. Es importante mencionar que además tienes la
posibilidad de que tus páginas sean trasladadas al servidor a través de
programas que funcionan con el protocolo FTP.
Finalmente, te podemos señalar que para comprobar que efectivamente ya han
sido desarrolladas tus habilidades y destrezas, así como los conocimientos y
actitudes, se puede recurrir al instrumento de evaluación guía de observación
TINF-04/M2S3/ED3-3 para medir tus desempeños y a la lista de cotejo TINF-
04/M2S3/EP5-5 para medir los productos.
Página 120 de 129

CONCLUSIONES DE LA GUIA DE APRENDIZAJE
Los ejercicios y prácticas que se han propuesto en esta guía de aprendizaje te
permitirán desarrollar las habilidades, destrezas, conocimientos y actitudes
necesarias para utilizar los servicios de Internet, manejar los protocolos y
lenguajes de Internet, programar en un lenguaje de hipertexto, diseñar una
página Web en un editor visual, crear vínculos e hipervínculos y por último
almacenar nuestras páginas generadas en un servidor web comercial o gratuito.
Para comprobar que has desarrollado la competencia en todos los apartados
señalados con anterioridad se utilizarán dos tipos de instrumentos de
evaluación: las guías de observación para medir tus desempeños y las listas de
cotejo para los productos logrados.
Página 121 de 129

Fuentes de Información
• Castellanos Casas, Ricardo y Ferreira Cortés, Gonzalo. (2003),
Informática 2. La herramienta del nuevo Mileno. México, DF. Editorial
Alfaomega.
• Castellanos Casas, Ricardo y Ferreira Cortés, Gonzalo. (2003),
Informática 3. La herramienta del nuevo Mileno. México, DF. Editorial
Alfaomega.
• Castellanos Casas, Ricardo y Ferrerira Cortés, Gonzalo, (2003),
Informática 1. La herramienta del nuevo Mileno. México, DF.
• Gail, Linda C, (1995), Enciclopedia de Términos de Microcomputación,
México DF. Editorial Prentice-Hall Hispanoamericana.
• González Trejo, Margarita y otros. (2000), Introducción a Internet.
Colección Guías y textos de cómputo. Dirección General de Servicios de
Cómputo Académico, UNAM.
• González Trejo, Margarita y otros. (2000), Introducción a Internet. Guía
didáctica y cuaderno de prácticas. Colección Guías y textos de cómputo.
Dirección General de Servicios de Cómputo Académico, UNAM.
• Ibarra Delgado, Alma y otros. (2000), Páginas para Internet. Colección
Guías y textos de cómputo. Dirección General de Servicios de Cómputo
Académico, UNAM.
• Ibarra Delgado, Alma y otros. (2000), Páginas para Internet. Guía
didáctica y cuaderno de prácticas. Colección Guías y textos de cómputo.
Dirección General de Servicios de Cómputo Académico, UNAM.
• Macromedia. Manual oficial del usuario. Dreamweaver MX.
• Page, Khristine Annwn. (2004), Dreamweaver MX 2004: Trucos
esenciales versión dual. Anaya Multimedia-Anaya Interactiva.
• Peña de San Antonio, Óscar. (2001), Dreamweaver 4: administración de
sitios y páginas Web. Ra-Ma, Librería y Editorial Microinformática
• Pérez, César. (2003), Curso práctico multimedia de Dreamweaver MX.
Garben.
Página 122 de 129

• S.A. (2004), Diseño web con HTML y FrontPage XP. Grupo Eidos
• Talavera Rosales, Alejandro. (2002), Páginas interactivas para Internet.
Colección Guías y textos de cómputo. Dirección General de Servicios de
Cómputo Académico, UNAM.
• www.aulaclic.com
• www.lawebdelprogramador.com
• www.forosdelweb.com
• www.cristalab.com
• www.nomaster.com
• www.webestilo.com
• www.webexperto.com
Página 123 de 129

Glosario
ACTIVE X: Lenguaje desarrollado por Microsoft para la elaboración de
aplicaciones exportables a la red y capaces de operar sobre cualquier
plataforma a través, normalmente, de navegadores WWW.
ANIMACIÓN: Una animación es una secuencia de imágenes, o cuadros, que se
visualiza en el tiempo. Cada cuadro varía ligeramente del inmediatamente
anterior, creando la ilusión de movimiento cuando los cuadros se ven en
sucesión rápida.
APLICACIÓN: Es un programa que realiza una tarea específica en el ordenador
como el tratamiento de textos, el tratamiento de imágenes, descompresión de
archivos, etc.
APRENDIZAJE: Proceso mediante el cual la experiencia causa un cambio
permanente en el conocimiento o en la conducta.
ARCHIVO ADJUNTO: Archivos anexados a un correo electrónico, para ser
enviados.
ARCHIVO: Unidad de información almacenada en el disco con un nombre
específico. También se le llama fichero. Puede contener datos en código
máquina, necesarios para la ejecución de un programa, o información común y
corriente procesada por el usuario. Los nombres de los archivos no pasan de
ocho caracteres. Tienen una extensión consistente en tres caracteres que lo
identifican en su tipo o lo relación con un programa determinado.
ATRIBUTOS: Son valores que se asignan a objetos, imágenes, fuentes, etc.
AUTODIAGNÓSTICO: Instrumento para conocer el estado de competencia en
el que se encuentra el candidato para la evaluación de competencia laboral.
AVI: Formato de fichero multimedia tipo QuickTime, desarrollado por Microsoft.
BASE DE DATOS: Información agrupada en registros que a su vez contienen
varios campos.
BOCETO: Modelo que simula la realidad, construido de manera sencilla.
BROWSER: (Navegador): Programa usado para visualizar documentos WWW
en Internet. Los más utilizados en estos momentos son Netscape e Internet
Explorer.
CAMPO: Datos individuales, un conjunto de campos relacionados integra un
registro.
Página 124 de 129

CAMPOS DE COMBINACIÓN: Datos utilizados para realizar una combinación
de correspondencia, provienen de una base de datos.
CAPAS: Las capas compuestas por varios elementos generados pueden
simplificarse y convertirse en una imagen rasterizada plana que puedes editarse
con las herramientas de pintura, puedes convertir datos de capas de texto,
formas, capas de relleno, capas enlazadas, trazados de recorte de capa, la capa
actual o de todas las capas.
CELDA: Elemento de una tabla, se forma de la intersección entre una fila y una
columna.
CLIC: Se le nombra así a la utilización mediante una pulsación del botón
izquierdo del Mouse, que sirve para seleccionar un texto o activar un elemento
de la interfaz de usuario, o ubicar el cursor en una ubicación determinada.
COMANDO: En programación, es una instrucción o sentencia del lenguaje, que
está sujeto a su sintaxis. Realiza tareas predefinidas.
COMPRESIÓN/DESCOMPRESIÓN: Método para cifrar/descifrar señales que
permite transmitir (o almacenar) más información de la que, de otro modo,
podría aceptar el soporte.
COMPRESIÓN: Es la acción de hacer mas pequeño el tamaño de un archivo
con el fin de que ocupe menos espacio.
CONCATENACIÓN: Agrupamiento de varios criterios en una función varios
campos en uno.
CRITERIO DE DESEMPEÑO: Refiere resultados significativos para alcanzar los
previstos en el enunciado del elemento y la calidad de los resultados.
CRITERIO DE EVALUACIÓN: Pautas que permiten valorar el desempeño
competente de un participante a partir del criterio de desempeño.
DEGRADADOS: Las herramientas de degradado crean una fusión gradual entre
varios colores. Puedes seleccionar rellenos de degradado existentes o crear los
suyos propios.
DESCOMPRESIÓN: Es la acción de regresar un archivo comprimido a su
tamaño normal.
DESTINATARIOS: Direcciones de correo electrónico a las cuales será enviado
un archivo o correo electrónico.
Página 125 de 129

DIAPOSITIVAS: Elemento de Microsoft Power Point, corresponde al área de
trabajo del programa, que puede contener imágenes, sonido, animación, video,
etc. Al conjunto de diapositivas se le conoce como presentación.
DISCO FLEXIBLE: Nombre utilizado para el Disco de 3 ½ pulgadas, o Disquete.
DISPOSITIVOS DE ALMACENAMIENTO: Dispositivos electrónicos, magnéticos
u ópticos utilizados para almacenar datos.
DOCUMENTO MAESTRO: Es el documento Original que sirve como base para
realizar una combinación de correspondencia.
DRIVER: Significa «controlador». Es el software adicional necesario para
controlar la comunicación entre el sistema y un cierto dispositivo físico, tal como
un monitor o una impresora.
EDICIÓN DE UN ARCHIVO: Rectificar un texto es, por ejemplo, editarlo.
También se aplica en la corrección o modificación de fotografías mediante
programas especiales como Photoshop, Picture Publisher, Photopaint.
ESTELA: Rastro visible que deja el puntero al moverse por la pantalla.
EXPORTAR: Es el método por medio del cual se guarda un archivo en un
formato distinto al que le asigna un programa.
EXTENSIÓN: Es el sufijo que se utiliza para acompañar a los archivos de
manera tal que los clasifiquen por su contenido y tipo de aplicación.
FILE: Significa archivo o expediente en ingles. jemplo:
FORMATEO: Preparación física de un medio extraíble, para borrar la
información contenida anteriormente o utilizada con el fin de detectar errores en
el dispositivo.
FORMATO DE ARCHIVO: Patrón o forma que utiliza un programa para
almacenar los documentos que produce. Existen formatos de texto, de
imágenes, de sonido, etc. Se identifica por la extensión: un punto y una
abreviatura del formato. Por e .doc / .gif / .mp3.
FPS: Fotogramas por segundo, es la unidad de medida para la velocidad con la
que se reproducen los videos y animaciones.
GIF: Graphic Interchange Format. Formato de Intercambio Gráfico, un formato
de archivos gráficos popularizado inicialmente por Compuserve.
Página 126 de 129

GUIAS: Las guías aparecen como líneas flotantes sobre toda la imagen, pero no
se imprimen, puedes mover, eliminar o bloquear una guía para evitar desplazarla
de manera accidental.
HARDWARE: Todo lo que se puede tocar de un equipo de cómputo, es la
materia tangible (teclado, Mouse, disco duro, CPU, etc.)
HIPERVÍNCULO: Acceso directo mediante una palabra o imagen a una hoja de
un documento, o a otro archivo en otra ubicación, muy utilizado para navegar
por Internet, por varias páginas en diferentes partes del mundo unidas por
hipervínculos.
HOJAS ADYACENTES: Término utilizado para nombrar a las hojas de Excel
que se encuentran una al lado de otra.
HOJAS NO ADYACENTES: Término utilizado para nombrar a las hojas de
Excel que se encuentran separadas una de la otra.
IMAGEN: Se denomina así a toda presentación sin movimiento.
INSUMOS: Término utilizado para nombrar al material utilizado por un equipo de
cómputo, directa o indirectamente (papel, tinta, cintas magnéticas discos
flexibles, tóner, etc.).
INTERFAZ DE USUARIO: El modo en que un programa facilita el proceso de
comunicación entre el hombre y el ordenador. Windows, por ejemplo, presenta
una interfaz de usuario bastante práctica.
INTERFAZ DEL USUARIO: Es el ambiente de trabajo de un sistema operativo
de forma tal que resulte fácil y amigable su utilización (ventanas, iconos,
botones, etc.)
INTERFAZ: Conjunto de especificaciones permiten la conexión del ordenador
con los periféricos de entrada y salida.
JPEG (JOINT PHOTOGRAPHIC EXPERTS GROUP O GRUPO DE EXPERTOS
DE ENSAMBLE FOTOGRÁFICO): Tipo de formato de imagen o compresión de
imagen. Está pensado especialmente para imágenes fotográficas por la calidad
que da al comprimir éstas.
LETRA CAPITAL: Objeto insertado a manera de cuadro de texto, utilizada en el
inicio de un párrafo, comúnmente de mayor tamaño que el resto del texto y de
diferente tipo de fuente.
Página 127 de 129

LIBERADOR DE ESPACIO: Herramienta del sistema operativo encargada de
eliminar archivos temporales, archivos de Internet, archivos contenidos en la
papelera de reciclaje, que ocupan un espacio en el disco duro.
LIBRO: Se le asigna este nombre al archivo guardado de Excel.
MACRO: Pequeño programa elaborado en Visual Basic, para automatizar tareas
como insertar tablas, cambiar formato, etc.
MANO (Herramienta): Selecciona la herramienta Mano y arrastre para tener
una panorámica de la imagen. Para usar la herramienta Mano mientras está
seleccionada otra herramienta, mantenga pulsada la barra espaciadora mientras
arrastra en la imagen.
MANTENIMIENTO PREVENTIVO: Realizado al equipo de cómputo con el fin de
prevenir que este se dañe o se descomponga.
MASCARAS: Las máscaras permiten aislar y proteger áreas de una imagen
conforme se aplican cambios de color, filtros u otros efectos al resto de la
imagen.
MP3: Tipo de formato de archivos de música digital comprimida. Es la última
tecnología en música digital.
MPEG: Moving Pictures Expert Group. Se trata de un modo estándar de
comprimir vídeo e imágenes en movimiento.
Multimedia: Sistemas informáticos que integran audio, vídeo y datos.
OBJETO: Elemento insertado en una hoja de trabajo que tiene propiedades
particulares, puede ser una tabla, imagen, video, archivo de sonido, autoforma,
etc.
PALETAS: Las paletas le ayudan a supervisar y modificar imágenes. Las
paletas aparecen por defecto apiladas en grupos.
PIXEL: Contracción de \"Picture Element/s\". El elemento más pequeño de la
superficie de un monitor.
PLANTILLAS: Formatos previamente diseñados para la elaboración de
documentos.
PNG (PORTABLE NETWORK NETWORK): Gráficos portables de red. Formato
gráfico muy completo especialmente pensado para redes.
PUNTERO: Dirección URL incrustada en los datos que especifica su ubicación
en otro registro o archivo. El hipervínculo es un ejemplo de puntero.
Página 128 de 129

REGISTROS: Campos agrupados en una sola fila, conteniendo información
relacionada entre sí.
REGULADORES: Dispositivo electrónico que regula el voltaje eléctrico con el fin
de proporcionar una corriente regular a un equipo.
RGB (RED, GREEN AND BLUE): Son los tres colores usados para producir la
luz visual. Estos tres colores se intercalan dentro de los tubos del monitor
permitiendo formar distintas imágenes que luego se visualizan.
SCANDISK: Utilería utilizada para verificar un disco duro o disco flexible, con el
fin de verificar su integridad y encontrar errores.
SOFTWARE: Es la materia intangible, lo que no podemos ver y tocar pero que
sabemos que se encuentra ahí, como los programas de una computadora.
SOFTWARE-PROGRAMA: Conjunto de instrucciones que indican al hardware o
partes físicas lo que debe realizar, para obtener un resultado concreto. Según
sea el software o programa puede clasificase como de propósito específico
(sistemas operativos, lenguajes de programación, etc.) o propósito general
(procesadores de texto, de imágenes, hojas de cálculo, etc).
TABLA: Esta formada por un conjunto de filas y columnas que a su vez forman
Celdas, es utilizada para agrupar en sus celdas datos.
USB: Universal Serial Bus. Es un conector estándar para conectar dispositivos
externos. Permite una mayor velocidad que otros puertos y permite la conexión
\"en caliente\" (no es necesario apagar el equipo).
UTILERÍAS: Programas utilizados para mejorar el rendimiento de un equipo de
cómputo.
WAV: Extensión que corresponde al archivo de sonido de Windows Wave.
WORLD WIDE WEB (RED MUNDIAL, CONOCIDO TAMBIÉN COMO: WWW,
W3): Sistema de arquitectura cliente/servidor para distribución y obtención de
información en Internet basado en hipertexto o enlaces. Sistema de adquisición
de información a través de páginas web y visualizando estas en un navegador.
Página 129 de 129