Informatica IV - Cuaderno de Trabajo

ELABORACIÓN DE PÁGINAS WEB 1
UNIVERSIDAD AUTÓNOMA DEL CARMEN
CUADERNO DE TRABAJO
UNIDAD DE APRENDIZAJE AL QUE PERTENECE:
INFORMÁTICA IV
Título de la presentación:
ELABORACIÓN DE PÁGINAS WEB
Ciclo escolar: Febrero-Julio 2017
Recopilado y presentado por:
L.I. Jose Everardo Arcos Heredia
jarcos@pampano.unacar.mx
L.I. Adriana Alejandra Arcos Heredia
aarodriguez@pampano.unacar.mx
L.I. Josefina de la Cruz Cruz
jdelacruz@pampano.unacar.mx
L.I. Leidy del Carmen de la Cruz Méndez
lcruz@pampano.unacar.mx
ESCUELA PREPARATORIA DIURNA
ACADEMIA DE INFORMÁTICA
Nombre del Estudiante:
Cuarto Semestre: ___Grupo: ___
Cd. del Carmen, Campeche a 7 de Febrero de 2017.

Índice
INTRODUCCIÓN ................................................................................................................. 4
BLOQUE I ............................................................................................................................... 6
1.1 Introducción al lenguaje de HTML. ................................................................................. 14
¿Cuáles son las características del lenguaje HTML?..........................................................15
1.2 Estructura básica de un documento HTML: ..................................................................... 19
Cabecera y cuerpo del documento. ...................................................................................... 19
Actividad 1. ..................................................................................................................................22
Atributos de la etiqueta <BODY> ...........................................................................................26
Código de colores ....................................................................................................................27
Etiquetas <H1> <P> <Br> ........................................................................................................29
1.3 Formato de texto en un documento. .............................................................................. 31
Estilos de carácter <B> <U> <I> .............................................................................................31
Marquesinas <marquee> .........................................................................................................32
Líneas <HR>..............................................................................................................................33
Etiqueta <Font> ........................................................................................................................34
Actividad 2. ..................................................................................................................................36
Actividad 3. ..................................................................................................................................43
BLOQUE II ............................................................................................................................ 47
2.1 Hipervínculos o enlaces en HTML. Etiqueta <A>. ................................................. 54
Actividad 4 ...................................................................................................................................58
2.2 Imágenes, videos y música ............................................................................................. 64
Usando píxeles .............................................................................................................................65
En porcentaje ...............................................................................................................................66
Alineación ....................................................................................................................................66
Sonido de fondo <bgsound> .........................................................................................................67
Video y audio <embed> ................................................................................................................68
Actividad 5 ...................................................................................................................................70
2.3 Tablas ............................................................................................................................ 73
Actividad 6 ...................................................................................................................................77
BLOQUE III ........................................................................................................................... 81
............................................................................................................................................ 81
3.1 Conoce la terminología básica del software para diseñar la página WEB. ........................ 88
Informática IV
Actividad 7 ................................................................................................................................88
3.2 Elementos del entorno del software para diseñar la página WEB. ................................... 94
Abrir y Guardar documentos ..................................................................................................95
Introducción a los elementos del espacio de trabajo..........................................................98
3.3 Diseña una página WEB con el software de aplicación. ................................................. 108
Actividad 8 .............................................................................................................................. 108
Actividad 9 .............................................................................................................................. 112
Actividad 10 ............................................................................................................................ 117
Lista de cotejo ............................................................................................................................ 118
CONCLUSIÓN................................................................................................................. 120
Informática IV
INTRODUCCIÓN
Una página web es un documento de texto con marcas (también llamadas etiquetas). Las
etiquetas permiten modificar la presentación del documento, incluir elementos no contenidos en
el texto (por ejemplo, imágenes), crear hiperenlaces.
Tres son las etiquetas que describen la estructura general de un documento y dan una
información sencilla sobre él, como por ejemplo el título de nuestra página. Para poder llevar a
cabo el diseño de una página es necesario utilizar el editor de “Bloc de notas”.
Al utilizar el lenguaje HTML, la aplicación me permitirá dar formato al texto ya sea negrita, cursiva,
subrayado, crear párrafos, organizar la información por medio de numeración y viñetas, tablas,
crear vínculos dentro de la propia página o entre diferentes paginas tipo HTML, así como anexar
videos, música, todo esto con el fin de hacerla llamativa.
Al realizar una página web es necesario para dar a conocer diversos temas de interés a la
comunidad universitaria. En el momento de crear una página web es recomendable que tenga
información suficiente que le permita al alumno o visitante mantener la mistad, la información y
la unión entre todos.
No estar en Internet hoy en día es no existir relativamente. En nuestros días cuando todo se
mueve, avanza y evoluciona a velocidades cada vez más rápidas, el mundo cibernético exige la
presencia de crear y diseñar una página web.
Los navegadores no muestran las etiquetas, aunque se puede pedir que las enseñen (el código
aparece en diferentes colores para facilitar su lectura):
• En Firefox la opción de menú es Ver > opciones para desarrolladores > Código fuente de
la página (o el atajo de teclado Ctrl+u). Firefox muestra el código fuente en una ventana distinta.
• En Internet Explorer la opción de menú es Ver > Código fuente. Internet Explorer 8
muestra el código fuente en una ventana distinta. Internet Explorer 7 y anteriores mostraban el
código fuente en una ventana del bloc de notas.
Informática IV
• En Chrome la opción de menú es Herramientas > Ver código fuente (o el atajo

de teclado Ctrl+u). Chrome muestra el código fuente en una pestaña distinta.
Este cuaderno de trabajo, explica los usos, aplicaciones y resultados de varias etiquetas
(instrucciones) de HTML. Luego de avanzar un grupo de etiquetas relacionadas se procede
a aplicar lo aprendido en actividades para mostrar de forma práctica el uso de dichas etiquetas.
Se comienza con una página sin mucho brillo, y poco a poco se aplican colores, tamaños, formato
y atributos al texto y a la página en sí.
El objetivo es que el estudiante adquiera los conocimientos para construir sus web sites de una
manera básica a través un procesador de texto así como también con ayuda de un software
llamado Dreamweaver.
El cuaderno de trabajo de informática IV, está conformado por tres Unidades de Aprendizaje
Curricular (UAC).
Unidad de Aprendizaje Curricular No. 1 Conociendo el lenguaje HTML, en ella se plasma

la estructura básica, en el cuál se demuestra que una página web, está dividida en dos secciones:
cabecera y cuerpo del documento. Se da un formato más específico a las palabras y a los
párrafos. Se organiza la información a través de listas, toda las etiquetas que son vistas en esta
UAC nos permite darle un formato adecuado a la nuestra página web.
Unidad de Aprendizaje Curricular No. 2 Insertando objetos en mi página Web, consiste en

Integrar a la páginas WEB objetos, ya que le proporcionara un mejor aspecto a una
página de este tipo, entre ellos hiperenlaces, imágenes, videos, audio, así como tablas
que le permitirá organizar información de forma tabulada.
Unidad de Aprendizaje Curricular No. 3 Software para el diseño de Página WEB, en esta
UAC los estudiantes diseñarán páginas WEB utilizando un software de aplicación de una manera
eficiente.
Informática IV
BLOQUE I
Conociendo el lenguaje:
Informática IV
Universidad Autónoma del Carmen

Dirección General Académica
SECUENCIA DIDÁCTICA
IDENTIFICACIÓN
Departamento: Comunicación Academia: Informática
Unidad de Aprendizaje: Informática IV Semestre: Cuarto Área de formación: Formación Básica
Bloque(s) : I. Conociendo el lenguaje HTML Número de secuencia: 1/ 3
Inicio: Febrero Valor de la secuencia: Duración en horas

Período de aplicación:
Término: Marzo 30 % 10 horas
Propósito de la secuencia didáctica:
Utiliza los elementos fundamentales del diseño para la elaboración de una página WEB.
CONTENIDOS DE APRENDIZAJE
Declarativos Procedimental Actitudinal
1.1 Introducción al lenguaje de HTML. Diseña una página Web utilizando las etiquetas Muestra interés por conocer el ambiente de trabajo del
1.2 Estructura de una página. básicas de HTML. software de aplicación.
1.3 Formato de texto en un documento.
Aplica el formato de manera adecuada en la Con atención y disposición aplica formato a la página
página WEB. WEB.
Identifica los elementos que componen la Muestra iniciativa para procesar información.
ventana de trabajo del procesador de texto Es responsable al realizar la actividad.
sencillo y del navegador de internet.
Muestra interés en trabajar en el diseño de las páginas
Aplica colores e imágenes de fondo a sus WEB.
páginas.
Aplica el mismo color a todo el texto de la

página web.
Informática IV
Agrega líneas para separar los párrafos de texto.
Aplica las etiquetas de cabeceras, para resaltar

los títulos la información en la página web.
Aplica formato al texto.
Agrega diferentes tipos de letras, con la

intención de generar páginas web con una mejor
presentación.
Utiliza las listas en HTML, para desglosar

información en forma ordenada o a través de una
serie de pasos.
Competencias genéricas y atributos que se promueven:
4. Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante la utilización de medios, códigos y herramientas apropiadas.
4.3 Identifica las ideas clave en un texto o discurso oral e infiere conclusiones a partir de ellas.
4.5 Maneja las tecnologías de la información y la comunicación para obtener información y expresar ideas.
6. Sustenta una postura personal sobre temas de interés y relevancia general, considerando otros puntos de vista de manera crítica y reflexiva.
6.4 Estructura ideas y argumentos de manera clara, coherente y sintética.
7. Aprende por iniciativa e interés propio a lo largo de la vida.
7.3 Articula saberes de diversos campos y establece relaciones entre ellos y su vida cotidiana.
Competencias disciplinares básicas:
1. Identifica, ordena e interpreta las ideas, datos y conceptos explícitos e implícitos en un texto5, considerando el contexto en el que se generó y en el que
se recibe.
8. Valora el pensamiento lógico en el proceso comunicativo en su vida cotidiana y académica.
12. Utiliza las tecnologías de la información y comunicación para producir diversos materiales de estudio e incrementar sus posibilidades de formación.
Informática IV
Competencias disciplinares extendidas:
No aplica
Actividades de Enseñanza - Aprendizaje

Fases
Apertura Duración de la actividad: 1 hora
Evaluación
Instrumentos
Profesor Entre estudiantes Autodirigidas Evidencia Atributos Porcentaje
de Evaluación.
Presenta la unidad de
Aprendizaje (Los temas del
bloque, competencias.)
Explica la forma de
evaluación y de trabajo a
realizar durante la secuencia
de didáctica.
Se le entrega el Cuaderno de
Trabajo y la Antología de la
UAC de Informática IV,
mismo que será de apoyo
para las secuencias de
aprendizaje.
Aplica una evaluación Resuelve la evaluación
diagnóstica para conocer los diagnóstica para conocer
conocimientos previos los conocimientos previos Cuestionario
relacionados con el lenguaje relacionados con el
de HTML. lenguaje de HTML.
Desarrollo Duración de la actividad: 8 horas
Evaluación
Informática IV
Instrumentos
de Evaluación.
Explica la estructura básica
para desarrollar una página
web utilizando el procesador
de texto y un navegador de
internet.
Explica cómo crear una

Realiza una práctica Web Elabora la práctica que se
página Web utilizando las
sencilla, aplicando las encuentra en el cuaderno
etiquetas básicas de HTML.
etiquetas básicas de la de trabajo, donde debe
estructura de una página utilizar la sintaxis correcta Archivo Digital Lista de cotejo 4.3;4.5;6.4;7.3 5%
Explica la forma en cómo
web y emplea salto de línea y debe colocar los saltos
visualizar el documento en el
y de párrafo. de línea y de párrafo
navegador donde podrá
donde sea requerido.
apreciar la forma en que se
verá sin estar conectado en
internet.
Explica la función de la
etiqueta de salto de línea y de
párrafo.
Informática IV
Explica los atributos de la

etiqueta BODY para colocar
color o imagen de fondo a las
páginas web.
Explica los atributos de la

etiqueta BODY para colocar Desarrolla una página Web,
color de texto. utilizando el atributo
Elabora la práctica que se
bgcolor o background y
encuentra en el cuaderno
Explica el atributo de text, así como darle formato
de trabajo, donde debe
alineaciones dentro del salto de alineación al texto y
utiliza la sintaxis correcta
de párrafo. colocar una línea
y colocar fondo a la
horizontal, agrega también
página, darle formato al Archivo Digital Lista de Cotejo 4.3;4.5;6.4;7.3 10%
Explica la función de la las etiquetas de formato al
texto y alineación del
etiqueta para insertar Líneas texto tales como: negrita,
mismo e insertar una línea
entre los párrafos. cursiva, subrayado,
horizontal.
subíndice, superíndice,
Explica las etiquetas que tachado y utiliza también el
(Coevaluación)
ayudaran a darle diversos atributo para cambiar el
formatos al texto. color de fondo, tipos y
colores de fuentes
Explica la etiqueta FONT
con sus atributos,
permitiendo cambiar el
tamaño, tipo y color de
fuente de una página web.

Explica el uso de las listas de Diseña una página Web,
la etiqueta OL, UL y Listas utilizando las listas en
de trabajo, donde utiliza Archivo Digital Lista de cotejo 4.3;4.5;6.4;7.3 5%
de Definiciones en HTML. HTML, para desglosar
listas en HTML, para
información en forma
desglosar información en
Informática IV
ordenada, no ordenada o forma ordenada, no

por definición. ordenas o por definición.
Cierre Duración de la actividad: 1 hora
Evaluación
Instrumentos
de Evaluación.
Realiza la evaluación
Aplica los conocimientos
Aplica una evaluación del objetiva que se encuentra Evaluación
adquiridos hasta el Lista de cotejo 4.3;4.5;6.4;7.3 10%
cierre del bloque. en línea en la plataforma Objetiva
momento en el bloque I.
tecnológica educativa.
ACTIVIDADES TRANSVERSALES INTERDISCIPLINARIAS:
Descripción de la actividad: Unidades de aprendizaje con las que se vincula:
Material y equipo de apoyo:

 Sala de Cómputo.
 Equipo de Cómputo.
 Cañón.
 Pintarron.
 Pintagis.
 Cuaderno de Trabajo.
 Antología.
 Plumones.
Fuentes de información
Básicas:
Cuaderno de trabajo Diseño de página WEB. Elaborada por la academia de informática.

Antología Diseño de página WEB. Elaborada por la academia de informática.
Informática IV
Complementarias:
MEDIactive. (2011). Manual de Dreamweaver CS5. México: Alfaomega.

Herrera, M. (2011). Arrancar con HTML 5. México: Alfaomega.
Pascual, F. (2006). Macromedia Dreamweaver 8. Mexico: Alfaomega, Ra-Ma.
Gauchat, J.(2012). El Gran Libro de HTML5, CSS3 y JavaScrip. Barcelona: Marcombo.
López, J.(2011). Domine HTML 5 y CSS. Mexico: Alfaomega., Ra-ma.
Mesografía:
AulaClic. Curso de HTML. (s.f.). Recuperado de http://www.aulaclic.es/html/index.htm
Guía para escribir documentos HTML.(s.f.). Recuperado de http://www.uv.es/jac/guia/
AulaClic. Curso de Dreamweaver 8(s.f.). Recuperado de http://www.aulaclic.es/dreamweaver8/index.htm
Ravioli, P. Lenguaje de programación para páginas web.(s.f). Recuperado de http://www.monografias.com/trabajos7/html/html.shtml#con
Informática IV
1.1 Introducción al lenguaje de HTML.
¿Qué es HTML?
Para abreviar una larga historia, podemos

decir que un científico llamado Tim Berners-Lee
inventó HTML allá por 1990. El objetivo era
facilitar a científicos de diferentes universidades
el acceso a los documentos de investigación de
cada uno de ellos. El proyecto obtuvo un éxito
mucho mayor del que Tim Berners-Lee nunca
hubiese llegado a imaginar. Al inventar HTML,
este científico sentó las bases de la web tal y
como la conocemos en la actualidad.
HTML es un lenguaje que hace posible presentar información (por ejemplo,

investigaciones científicas) en Internet. Lo que ves al visualizar una página en Internet es la
interpretación que hace el navegador del código HTML. Para ver el código HTML de una
página solo tienes que dar clic en la opción "Ver" de la barra de menús y elegir "Código
fuente" (en Internet Explorer).
Si quieres crear sitios web, no hay otra solución que aprender HTML. Incluso si usas un
programa como Dreamweaver, por ejemplo, para la creación de sitios web, poseer unos
conocimientos básicos de HTML hace la vida mucho más fácil y tus sitios web mucho
mejores.
HTML es la abreviatura de "HyperText Mark-up Language", es decir, "Lenguaje de

marcado hipertextual", y esto ya es más de lo que necesitas saber a estas alturas. En todo
caso, para mantener un buen orden, necesitas conocer su significado con mayor detalle.
14
• Hiper (Hyper): Es lo contrario de lineal. Los programas de la computadora se

ejecutaban de forma lineal: cuando el programa había ejecutado una acción seguía
hasta la siguiente línea, y después de ésta a la siguiente, y a la siguiente, HTML, sin
embargo, ahora es diferente: se puede ir a donde uno quiera cuando uno quiera. .
• Texto (Text): Se refiere al texto de la página web.
• Marcado (Mark-up): Es lo que haces con el texto. Se marca el texto del mismo modo
que en un programa de edición de textos con encabezados, viñetas, negrita, etc.
• Lenguaje (lenguaje): Es lo que es HTML. Este lenguaje hace uso de muchos términos
en inglés.
•
¿Cuáles son las características del lenguaje HTML?
Este lenguaje será el encargado de convertir un inocente archivo de texto inicial en una página
web con diferentes tipos y tamaños de letra, con imágenes impactantes, animaciones
sorprendentes, formularios interactivos, etc.
Estas características son las que marcaron el diseño de todos los elementos del WWW incluida
la programación de páginas Web.
• La página Web tiene que ser distribuida: la información repartida en páginas no muy
grandes enlazadas entre sí. • Debe ser fácil navegar por la página.
• Tiene que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones
de trabajo, etc.) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX,
MACOS, etc.)
• Debe ser dinámico: el proceso de cambiar y actualizar la información debe ser ágil y
rápido.
Informática IV
Reglas básicas en el diseño:
1. Tener algo interesante que decir en tu PÁGINA web:

2. Todo el mundo ya conoce las herramientas de búsqueda. Haz que tus enlaces sean
pertinentes al tema que estas tratando.
3. Recuerda que no en todos los buscadores aparecen igual: No hagas que tu página
dependa demasiado de ciertos comandos HTML que pueden no aparecer en todos los
buscadores. Algunos buscadores pueden no aceptar tus gráficas, así que proporciona
textos alternativos.
4. Mantén tu página con un máximo de 15K en imágenes o fracciónala si ésta es muy
grande.
5. No usar gráficas de otros autores si no está autorizado: Hay muchas fuentes de gráficas
gratis. También existen graficadores sencillos con los que puedes crear Tus propias
gráficas.
6. Reconocer el trabajo de los demás: Si algún "Sitio" te ayudó de alguna manera a construir
tu página, entonces bríndale un enlace por su apoyo.
7. Colocar fecha de la última revisión: Indica cuándo se realizó la última revisión. Esto hará
que las personas se motiven a leer tu página.
8. Verifica sus enlaces periódicamente: No dejes que expiren sus enlaces durante largos
períodos de tiempo. Revisa su validez.
9. Se abierto a comentarios o sugerencias: Específica vínculos de correo electrónico o, si es
posible, formularios de realimentación.
10. Practica el HTML: Usa los editores solo cuando conozcas los principios básicos del
HTML.
Recordar…
Los elementos gráficos son una parte fundamental del diseño en todas sus modalidades,
introduciendo en las composiciones información visual que complementa en gran medida el
mensaje que se desea transmitir, y que a veces es tan importante en el diseño como los
contenidos textuales del mismo.
Informática IV
Después de haber realizado la lectura, responderemos a la

actividad diagnóstica con el siguiente cuestionario .
1. ¿Nombre del científico que fue el creador el lenguaje HTML?
2. ¿En qué año fue creado el lenguaje HTML?
3. ¿Cuál era el objetivo principal del científico al crear el lenguaje HTML?
4. ¿Qué entiendes por HTML?
5. Define cada una de las letras que conforman la palabra HTML:
Hiper:
Texto:
Informática IV
Marcado:
Lenguaje:
6. Menciona 4 características del lenguaje HTML:
7. Menciona 7 reglas básicas que debes seguir para el diseño de una página web:
I.
II.
III.
IV.
V.
VI.
VII.
Informática IV
1.2 Estructura básica de un documento HTML:

Cabecera y cuerpo del documento.
Lo primero que debemos considerar dentro de la organización básica de HTML es el uso de los
corchetes angulares<y>. En HTML estos corchetes contienen en su interior código especial
llamado ETIQUETA que indican la estructura y el formato del CONTENIDO de la página. HTML
está formado por muchas etiquetas que pueden realizar infinidad de tareas para dar formato a
nuestras páginas Web.
Tres son las etiquetas (tags) que describen la estructura general de un documento y dan una
información sencilla sobre él. Estas etiquetas no afectan a la apariencia del documento y solo
interpretan y filtran los archivos HTML.
 <HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.

 <HEAD>: Especifica el prólogo del resto del archivo esto es, el encabezado. Son
pocas las etiquetas que van dentro de ella, destacando la del título <TITLE> que será
utilizado por los marcadores del navegador e identificará el contenido de la página.
Solo puede haber un título por documento, preferiblemente corto aunque significativo,
y no caben otras etiquetas dentro de él. En <head> no hay que colocar nada del texto
del documento.
 <BODY>: Encierra el resto del documento, el contenido es el que se muestra en un
explorador Web.
Las etiquetas tienen propiedades, las cuales son descritas por medio de los Atributos. Un atributo
es una opción que permite proporcionar detalles acerca de cómo una etiqueta afectará el
contenido. Es importante mencionar que HTML no distingue entre mayúsculas o minúsculas, o
una combinación de ambas.
Informática IV
El primer paso para crear una página es crear un documento de texto mediante el editor de texto
que desee. Puede utilizar el editor Microsoft Windows que es el Block de notas o cualquier otro
editor. Un editor de texto es un programa que permite crear y modificar archivos digitales
compuestos únicamente por texto sin formato, conocidos comúnmente como archivos de texto ó
texto plano y son incluidos en el sistema operativo o en algún Paquete de software.
Lo primero que debemos considerar es la estructura general de la página por lo que debemos
escribir en ella su contenido.
ETIQUETA FUNCIÓN
<HTML> Empieza un documento
HTML
<HEAD> Zona de cabecera
<TITLE> Zona de título
</TITLE> Termina zona de título
</HEAD> Termina zona de
cabecera
<BODY> Zona de cuerpo del
documento
</BODY> Termina zona de cuerpo
del documento
</HTML> Termina documento
HTML
Para crear párrafos
Informática IV
Para realizar saltos de línea
Es importante que ninguna de nuestras páginas carezca de título ya que el explorador buscará
el título para identificar su página.
Realizaremos nuestro primer ejemplo, abriremos el editor del bloc de

notas, transcribiremos la información que a continuación se te
proporciona, el ejemplo nos permitirá reforzar las etiquetas antes
vistas.
¿Por qué estudiar?
Definición.
El estudio es el desarrollo de aptitudes y también habilidades mediante la incorporación de

conocimientos nuevos; este proceso se efectúa generalmente a través de la lectura.
El saber cómo estudiar es de una importancia vital para cualquiera.
Simplemente el estudio es la herramienta que nos fortalecerá tanto por dentro, como por fuera.
Es lo que nos permitirá defendernos, ganarnos nuestro espacio en la sociedad que vivimos.
Para el estudio estos métodos son variados, es posible destacar una serie de pautas
recurrentes.
Informática IV
Actividad 1.
Lleva a cabo lo que se te pide, evita tener errores en la sintaxis de las
etiquetas.
Objetivo: Desarrolla una página web sencilla, aplicando etiquetas para

crear la estructura básica, emplea saltos de línea y de párrafo.
Instrucciones:
En la parte del título <title> de la página, trataremos de escribir una palabra relacionada
al tema, para esta ocasión le escribiremos seguridad.
Utiliza la información que se te proporciona para llevar a cabo esta práctica.
Agrega la etiqueta correspondiente para los saltos de línea y de párrafo, sin olvidarte de
la estructura básica del documento de html.
Guarda el archivo con la siguiente estructura: número de la actividad, seguido de tu primer
nombre y primer apellido: act01_josefina_cruz.html, cuando la hayas finalizado
completamente, subirla a la plataforma de edmodo.
El peligro no solo acecha en las calles, ahora también ha migrado al ciberespacio.
Hace diez años hablar de seguridad informática era un punto casi inexistente en las agendas
de trabajo y en las reuniones propias de las organizaciones. En la actualidad se enmarca en un
contexto mundial, debido a los hechos noticiosos generados a raíz de infiltraciones de piratas
informáticos en entidades que, hasta ese momento, parecían impenetrables en materia de
seguridad física e informática. Por citar ejemplos, los casos de: el Banco estadounidense
JPMorgan, el agregador de noticias Feedly y el más reciente de todos, el de Sony Pictures.
El escándalo de las filtraciones de Wikileaks que dio paso a la divulgación de material sensible
y clasificado, luego las violaciones de acceso a las redes sociales de la Casa Blanca y una gran
cantidad de casos conocidos y desconocidos, han hecho que cuando se hable de Seguridad
Informática no se haga referencia a un valor agregado de cualquier organización sino a una
necesidad que tienen todas las compañías para protegerse, crecer y mantenerse firmes en el
mercado.
Informática IV
La seguridad informática es un área que se enfoca en la protección de los recursos

tecnológicos como los equipos de cómputo, servidores, router, cables, entre otros.
De manera más puntual, tiene en cuenta la información contenida o circulante. Para ello,
existen una serie de procesos y utilidades determinadas para reducir los posibles peligros al
área física de la organización o a la información. La seguridad informática comprende lo lógico
(bases de datos, información), hardware (computadores, servidores, impresoras, etc.) y todo lo
que la entidad considere de mucha importancia y signifique una alarma en el caso de que la
información pase a manos indebidas.
Informática IV

Unidad Académica del Campus II
Escuela Preparatoria Diurna
Instrumento de Tipo de evaluación:

Heteroevaluación
evaluación: Lista de cotejo
Unidad de Aprendizaje Semestre: 4 Grupo: Número de
Curricular: Informática I Porcentaje: 5 % secuencia: 1/3
Bloque: I. Conociendo el Evidencia:
lenguaje Archivo Digital
HTML
Competencias Genéricas 4.Escucha, interpreta y emite mensajes pertinentes en distintos
contextos mediante la utilización de medios, códigos y herramientas
apropiadas.
6. Sustenta una postura personal sobre temas de interés y relevancia
general, considerando otros puntos de vista de manera crítica y reflexiva.
Atributos 4.3 Identifica las ideas clave en un texto o discurso oral e infiere
conclusiones a partir de ellas.
4.5 Maneja las tecnologías de la información y la comunicación para
obtener información y expresar ideas.
7.3 Articula saberes de diversos campos y establece relaciones entre ellos
y su vida cotidiana.
Competencia Disciplinar 1. Identifica, ordena e interpreta las ideas, datos y conceptos explícitos e
implícitos en un texto, considerando el contexto en el que se generó y
en el que se recibe.
8. Valora el pensamiento lógico en el proceso comunicativo en su vida
cotidiana y académica.
12. Utiliza las tecnologías de la información y comunicación para
investigar, resolver problemas, producir materiales y transmitir
información.
Nombre del Estudiante
Informática IV
Fecha de Elaboración
Criterios Valor Si No
Utiliza el bloc de nota para elaborar la página web. 1
Tiene la estructura correcta. 1
Aplica adecuadamente la etiqueta de salto de línea. 1
Aplica adecuadamente la etiqueta de párrafo. 1
Guarda el archivo correctamente como se le pide 1
Total de puntos
Firma del docente
Calificación obtenida: Estatus: Observaciones:
5% Competente.
En proceso de adquirir la Enviar a que tome asesorías por lo

4a3%
competencia menos una vez a la semana.
2a1% No competente. Canalizar a asesorías
permanentemente.
Informática IV
Atributos de la etiqueta <BODY>
Bgcolor="número hexadecimal / nombre del color". Asignamos un color de fondo a la

página mediante un número hexadecimal, (#2233ff) o el nombre del color en inglés (red).
Ejemplo:
< BODY Bgcolor="#0000FF"> o <Body Bgcolor=yellow>
Text="número hexadecimal / nombre del color". Atributo usado para definir el color del
texto por defecto es negro mediante un número hexadecimal, (#2233ff) o el nombre del
color en inglés (red).
link="número hexadecimal / nombre del color". Parámetro usado para especificar el color
de los enlaces de texto. Color por defecto azul.
vlink="número hexadecimal / nombre del color". Parámetro usado para especificar el
color de los enlaces de texto ya visitados. Color por defecto morado.
alink="número hexadecimal / nombre del color". Parámetro usado para especificar el
color de los enlaces de texto activo. Color por defecto rojo.
Ejemplo:
< BODY text="#ff0000" link="#ffffff" vlink="#ff00ff" Bgcolor="#101010">
Background="ruta archivo / nombre_archivo.extension". Indicamos la ruta y el nombre
del archivo que será usado como fondo del documento. Esta se visualizará en mosaico
para cubrir toda la ventana si es pequeña.
Veamos su sintaxis:
<BODY Background="ruta/archivo.gif">
Informática IV
Código de colores
Nombre del color Código del color Nombre del color Código del color
White #FFFFFF Light Grey #A8A8A8
Red #FF0000 Light Steel Blue #8F8FBD
Green #00FF00 Light Wood #E9C2A6
Blue #0000FF Lime #32CD32
Magenta #FF00FF Mandarian Orange #E47833
Cyan #00FFFF Maroon #8E236B
Yellow #FFFF00 Medium Aquamarine #32CD99
Black #000000 Medium Blue #3232CD
Aqua #70DB93 Medium Forest Green #6B8E23
Baker's Chocolate #5C3317 Medium Goldenrod #EAEAAE
Blue Violet #9F5F9F Medium Orchid #9370DB
Brass #B5A642 Medium Sea Green #426F42
Bright Gold #D9D919 Medium Slate Blue #7F00FF
Brown #A62A2A Medium Spring Green #7FFF00
Bronze #8C7853 Medium Turquoise #70DBDB
Informática IV
Bronze II #A67D3D Medium Violet Red #DB7093
Cadet Blue #5F9F9F Medium Wood #A68064
Cool Copper #D98719 Midnight Blue #2F2F4F
Copper #B87333 Navy #23238E
Coral #FF7F00 Neon Blue #4D4DFF
Corn Flower Blue #42426F Neon Pink #FF6EC7
Nombre del color Código del color Nombre del color Código del color
Dark Brown #5C4033 New Midnight Blue #00009C
Dark Green #2F4F2F New Tan #EBC79E
Dark Green #4A766E Old Gold #CFB53B

Copper
Dark Olive Green #4F4F2F Orange #FF7F00
Dark Orchid #9932CD Orange Red #FF2400
Dark Purple #871F78 Orchid #DB70DB
Dark Slate Blue #6B238E Pale Green #8FBC8F
Dark Slate Grey #2F4F4F Pink #BC8F8F
Dark Tan #97694F Plum #EAADEA
Dark Turquoise #7093DB Quartz #D9D9F3
Dark Wood #855E42 Rich Blue #5959AB
Dim Grey #545454 Salmon #6F4242
Dusty Rose #856363 Scarlet #8C1717
Informática IV
Feldspar #D19275 Sea Green #238E68
Firebrick #8E2323 Semi-Sweet Chocolate #6B4226
Forest Green #238E23 Sienna #8E6B23
Gold #CD7F32 Silver #E6E8FA
Goldenrod #DBDB70 Sky Blue #3299CC
Gray #C0C0C0 Slate Blue #007FFF
Green Copper #527F76 Spicy Pink #FF1CAE
Green Yellow #93DB70 Spring Green #00FF7F
Hunter Green #215E21 Steel Blue #236B8E
Indian Red #4E2F2F Summer Sky #38B0DE
Khaki #9F9F5F Tan #DB9370
Light Blue #C0D9D9 Thistle #D8BFD8
Etiquetas <H1> <P> <Br>
Probablemente entre los elementos más importantes en HTML podemos destacar las
etiquetas que dan formato: <h1>, párrafos <p>, y saltos de línea <br>.
Informática IV
Gracias a estos elementos del HTML podremos dar una estructura general a nuestro documento
de HTML. Estas etiquetas nos ayudarán a configurar la apariencia del documento en el
navegador.
<H1>, <H2>, <H3>...: Titulares. Sirven para dividir el texto en secciones. Se pueden
definir seis niveles de titulares, el texto que deseamos que sea un titular se pone entre
las tags
<H1> Titular </H1>. Se definen mediante las tags <H1>.....</H1> hasta
<H6>.....</H6>
<P>: Párrafos. En principio, sin entrar en detalles de alineación u otras
características, digamos que se definen por las tags <P>.....<P>. Esta tag, en
un principio, se diseñó para saltar de párrafo por lo que puede ir sola "<P>" al final de
un texto indicando que a continuación se quiere una línea en blanco
aunque le recomendamos que se acostumbre a utilizarla abriéndola y cerrándola.
Un párrafo puede alinearse a la izquierda, centro, derecha o justificarlo. El párrafo en
cuestión debe estar contenido entre las etiquetas:
<p align="left/center/right/justify">...</p>.
Ejemplo de cómo utilizar la etiqueta p y sus atributos para alienar el texto:

<p align="left"> Este texto está alineado a la izquierda </p>
<p align="center"> Este texto está centrado </p>
<p align="right">Este texto está alineado a la derecha</p>
<p align="justify">Este texto está justificado</p>
<BR>: Saltos de línea. Esta tag sirve para realizar un salto de línea, puede poner
tantas como desee y realizará un salto de línea por cada una de ellas.
: Comentarios. Son directivas que nunca se mostrarán a través del navegador
y que le servirán para recordatorios en futuras revisiones del documento.
Informática IV
1.3 Formato de texto en un documento.

Estilos de carácter <B> <U> <I>
Para incluir texto en una página basta teclear éste entre las etiquetas<BODY> y </BODY>; sin
embargo, podemos hacer uso de etiquetas para mejorar la apariencia de la información. Las
etiquetas que se utilizan con mayor frecuencia para dar formato al texto, estos estilos son tags
que afectan a palabras o caracteres dentro de otras entidades de HTML modificando el aspecto
de ese texto para que sea diferente del texto que lo rodea.
ETIQUETA USO
<b>…</b> Poner texto en negrita
<strong>…</strong> Poner texto en negrita
<i>…</i> Poner texto en cursiva
<em>…</em> Poner texto en cursiva
<u>…</u> Poner texto subrayado
<small>…</small> Poner texto más pequeño
<big>…</big> Poner texto más grande
<sub>…</sub> Poner texto subíndice
<sup>…</sup> Poner texto superíndice
<strike>…</strike> Poner texto como tachado
<s>…</s> Poner texto como tachado
<del>…</del> Poner texto como tachado
Informática IV
Marquesinas <marquee>
Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana
en forma de línea y se utilizan las etiquetas <marquee>…..</marquee>. La marquesina, por
defecto, se desplaza de derecha a izquierda indefinidamente, pero se pueden modificar estas
propiedades.
La etiqueta marquee puede tener los siguientes atributos:
widht: anchura de la marquesina.

height: altura de la marquesina.
align: alineación del texto. Valores: top (arriba), middle (en medio) o bottom (abajo).
behavior: comportamiento. Valores: scroll, slide y alternate.
bgcolor: color del fondo de la marquesina.
direction: dirección en la que se mueve el texto. Valores: left (izquierda) y right
(derecha).
scrollamount: cantidad de desplazamiento del texto en cada movimiento de
avance, píxeles.
scrolldelay: tiempo que transcurre entre cada movimiento de avance, milisegundos.
loop: número de veces que aparecerá el texto, indefinido por defecto
Informática IV
Líneas <HR>
Líneas divisorias: Se crean con la tag <HR>que no tiene tag de cierre ni lleva texto asociado. Se
puede especificar el ancho de la línea con el siguiente atributo <HR width="80%">.
Si no se especifican atributos dibujará una línea que ocupe el ancho de la pantalla del navegador
e introduciendo una separación con el texto anterior y siguiente, equivalente a cambio de párrafo.
No es necesaria la etiqueta de fin </HR>. Con los atributos podemos especificar su forma
y tamaño, esto atributos son:
ALIGN=LEFT, RIGTH ó CENTER:

Indicará la forma en la que se alineará la regla en el caso de no ocupar todo el ancho de la
pantalla del navegador, a la izquierda, derecha o centrada.
NOSHADE:
No muestra la sombra de la barra, evitando el efecto en tres dimensiones.
SIZE=n:
Indicará la altura de la regla en puntos de la pantalla.
WIDTH=n ó n%:
Especificará el ancho de la regla, se puede especificar en tanto por ciento del ancho de la
ventana.
<HR WIDTH=50%> o en valor absoluto <HR WIDTH=75> en puntos de la pantalla.
Informática IV
Etiqueta <Font>
Existe una forma clásica y directa de definir color tamaño y tipo de letra de un texto
determinado.
Esto se hace a partir de la etiqueta <FONT> y su cierre correspondiente. Dentro de esta etiqueta
deberemos especificar los atributos correspondientes a cada uno de estos parámetros que
deseamos definir. A continuación os comentamos los atributos principales de esta etiqueta:
Atributo Face
Define el tipo de letra. Este atributo es interpretado por versiones de Netscape a partir de la 3 y
de MSIE 3 o superiores. Otros navegadores las ignoran completamente y muestran el texto con
la fuente que utilizan.
Ejemplo: <FONT Face=”Comic Sans Ms”>
Atributo Size
Define el tamaño de la letra. Este tamaño puede ser absoluto o relativo. Si hablamos en términos
absolutos, existen 7 niveles de tamaño distintos numerados de 1 a 7 por orden creciente.
Elegiremos por tanto un valor Size="1" para la letra más pequeña o size="7" para la más grande.
Se puede asimismo modificar el tamaño de nuestra letra con respecto al del texto mostrado
precedentemente definiendo el número de niveles que queremos subir o bajar en esta escala
de tamaños por medio de un signo + o -. De este modo, si definimos nuestro atributo
como size="+1" lo que queremos decir es que aumentamos de un nivel el tamaño de la letra. Si
estábamos escribiendo previamente en 3, pasaremos automáticamente a 4.
Ejemplo: <FONT Size=3>
Informática IV
Atributo Color
El atributo color puede ser cualquier número hexadecimal, precedido por el carácter "#". O el
color en inglés.
Ejemplo: <FONT Color=green>
Para reforzar la aplicación de las etiquetas vistas anteriormente, puedes realizar el

siguiente ejemplo:
Las TICS en los procesos de Enseñanza y Aprendizaje
Las TIC han llegado a ser uno de los pilares básicos de la sociedad y hoy es necesario
proporcionar al ciudadano una educación que tenga que cuenta esta realidad. Las
posibilidades educativas de las TICS han de ser consideradas en dos aspectos: su
conocimiento y su uso. El primer aspecto es consecuencia directa de la cultura de
la sociedad actual. No se puede entender el mundo de hoy sin un mínimo de cultura
informática.
Es preciso entender cómo se genera, cómo se almacena, cómo se transforma, cómo se

transmite y cómo se accede a la información en sus múltiples manifestaciones (textos,
imágenes,sonidos) si no se quiere estar al margen de las corrientes culturales. Hay que
intentar participar en la generación de esa cultura. Es ésa la gran oportunidad, que
presenta dos facetas:
Integrar esta nueva cultura en la Educación, contemplándola en todos los niveles de la

Enseñanza. Ese conocimiento se traduzca en un uso generalizado de las TIC para lograr,
libre, espontánea y permanentemente, una formación a lo largo de toda la vida.
Informática IV
Actividad 2.
etiquetas.
Objetivo: Aplica las etiquetas de formato tales como: negrita, cursiva,
subrayado, subíndice, tachado, así como la etiqueta font.
Instrucciones:
Transcribe la información en un bloc de notas.
Aplica el atributo que te permite darle color de fondo a la página o si prefieres una
imagen.
Agregar color de texto de manera general a la pagina web.
Aplica alineaciones
Inserta una lìnea horizontal
Agrega las etiquetas que han visto con anterioridad, y agregarle formato de texto como
lo observas en la información proporcionada, como negrita, cursiva, etc.
Hacer uso de la etiqueta font con los atributos de color, tamaño y tipo fuente.
Guarda el archivo con la siguiente estructura: número de la actividad, seguido de tu
primer nombre y primer apellido: act02_josefina_cruz.html, cuando la hayas finalizado
Virus informático
Un virus es un malware que tiene por objetivo alterar el normal funcionamiento de la

computadora, sin el permiso o el conocimiento del usuario. Los virus, habitualmente,
reemplazan archivos ejecutables por otros infectados con el código de este. Los virus pueden
destruir, de manera intencionada, los datos almacenados en una computadora, aunque también
existen otros más inofensivos, que solo solo producen molestias.
Informática IV
Los virus informáticos tienen, básicamente, la función de propagarse a través de un software,

son muy nocivos y algunos contienen además una carga dañina (payload) con distintos
objetivos, desde una simple broma hasta realizar daños importantes en los sistemas, o
bloquear las redes informáticas generando tráfico inútil.
El funcionamiento de un virus informático es conceptualmente simple. Se ejecuta un programa

que está infectado, en la mayoría de las ocasiones, por desconocimiento del usuario. El código
del virus queda residente (alojado) en la memoria RAM de la computadora, incluso cuando el
programa que lo contenía haya terminado de ejecutarse. El virus toma entonces el control de los
servicios básicos del sistema operativo, infectando, de manera posterior, archivos ejecutables
que sean llamados para su ejecución. Finalmente se añade el código del virus al programa
infectado y se graba en el disco, con lo cual el proceso de replicado se completa.
El primer virus atacó a una máquina IBM Serie 360 (y reconocido como tal). Fue llamado
Creeper, creado en 1972. Este programa emitía periódicamente en la pantalla el mensaje: «I'm
a creeper... catch me if you can!» («¡Soy una enredadera... agárrame si puedes!»). Para
eliminar este problema se creó el primer programa antivirus denominado Reaper (cortadora).
Sin embargo, el término virus no se adoptaría hasta 1984, pero éstos ya existían desde antes.
Victor Vyssotsky, Robert Morris Sr. y Doug McIlroy, investigadores de Bell Labs(se cita
erróneamente a Dennis Ritchie o Ken Thompson como cuarto coautor) desarrollaron un juego de
ordenador llamado Darwin (del que derivará Core Wars) que consiste en eliminar al programa
adversario ocupando toda la RAM de la zona de juego (arena).
Informática IV

Instrumento de evaluación: Tipo de evaluación:

Coevaluación
Lista de cotejo
Curricular: Informática I secuencia: 1/3
Porcentaje: 10 %
HTML
Competencias Genéricas 4. Escucha, interpreta y emite mensajes pertinentes en distintos
apropiadas.
implícitos en un texto, considerando el contexto en el que se generó y en
el que se recibe.
información.
Informática IV
Utiliza el bloc de nota para elaborar la página web y 1
tiene la estructura correcta
Aplica adecuadamente el atributo para darle color o 1
agregar una imagen como fondo y cambiar el color a
texto en forma general dentro de la etiqueta <body>.
Aplica adecuadamente el atributo para darle formato 1
al párrafo como justificación, centrado, izquierda o
derecha, cuando utiliza la etiqueta <p>.
Aplica adecuadamente la etiqueta con sus atributos 1
correspondientes para insertar una línea horizontal en
su página WEB.
Aplica adecuadamente la etiqueta para dar formato al 2
texto como es negrita, cursiva, subrayado, etc, en el
diseño de la página.
Aplica adecuadamente la etiqueta de <Font > y sus 2
atributos correspondientes para cambiar color, tamaño
y tipo fuente al texto, dentro de su página web.
Tienen un diseño general claro y atractivo. 1
Guardo el archivo correctamente como se le pide. 1
Total de puntos
Firma del docente

10 a 8 % Competente.
En proceso de rir la Enviar a que tome asesorías por lo

7a5% adqui menos una vez a la semana.
competencia
permanentemente.
Informática IV
Existen tres tipos de Listas, numeradas, sin numerar y de
definición.
Las listas numeradas representarán los elementos de la lista numerando cada uno de ellos
según el lugar que ocupan en la lista. Para este tipo de lista se utiliza la instrucción <OL></OL>.
Cada uno de los elementos de la lista irá precedido de la instrucción <LI>. La instrucción
<OL> puede llevar los siguientes parámetros :
start = num
Indica que número será el primero de la lista. Si no se indica se entiende que empezará por el
número 1.
type = tipo
Indica el tipo de numeración utilizada. Si no se indica se entiende que será una lista ordenada
numéricamente.
Los tipos posibles son :
1 = Numéricamente. (1,2,3,4,... etc.)
a = Letras minúsculas. (a,b,c,d,... etc.)
A = Letras mayúsculas. (A,B,C,D,... etc.)
i = Números romanos en minúsculas. (i.ii,iii,iv,v,... etc.)
I = Números romanos en mayúsculas. (I,II,III,IV,V,... etc.)
Informática IV
escribimos en html se verá como
<ol type=i>
i. Primer término de la lista
<li >Primer término de la lista
ii. Segundo término
<li >Segundo término
iii. Tercer término
<li>Tercer término
iv. Cuarto
<li>Cuarto
v. Quinto
<li>Quinto
</ol>
<OL type=A> A. Primera voz del menú

<LI> Primera voz del menú
B. Segunda voz del menú
<LI> Segunda voz del menú
C. Tercera voz del menú
<LI> Tercera voz del menú
</OL>
Las listas sin numerar representan los elementos de la lista con un "topo" o marca que antecede
a cada uno de ellos. Se utiliza la instrucción <UL></UL> para delimitar la lista, y <LI> para indicar
cada uno de los elementos. La instrucción <UL> puede contener el parámetro type que indica
la forma del "topo" o marca que antecede a cada elemento de la lista. Los valores de type
pueden ser disc, circle o square, con lo que el “topo” o marca puede ser un disco, un circulo o
un cuadrado.
<UL type=square>  Primera voz del menú

 Segunda voz del menú
 Tercera voz del menú
</UL>
Informática IV
<UL> • Primera voz del menú

• Segunda voz del menú
• Tercera voz del menú
</UL>
Listas de definiciones: <dl>, <dt> y <dd>.
Si lo que vamos a hacer es un listado de definiciones, podemos usar las etiquetas <dl>, <dt> y
<dd>. Vamos a explicarlas por partes:
La etiqueta <dl> viene de los términos ingleses “Definiton list” y nos indica que dentro de ella,
entre ella y su cierre, va a ir una definición.
La etiqueta <dt> viene de los términos “Definition term” y dentro de ella irá el término que vamos
a definir. Para entendernos mejor, dentro de <dt> iría el título de la definición.
La etiqueta <dd> viene de los términos “Definition description” y nos dice que dentro de ésta
irá la definición.
Si escribimos varios listados de definición, éstas se separarán automáticamente entre ellas
para facilitar su diferenciación.
Aquí podemos ver un ejemplo de código de dos listado de definición:
escribimos en html
<dl>
<dt>Aquí va el término que definiremos</dt>
<dd>Y aquí dentro irá la definición propiamente dicha.</dd>
</dl>
<dl>
<dt>Aquí va la segunda definición</dt>
<dd>Y aquí dentro irá la segunda definición, separada automáticamente de la
anterior.</dd>
</dl>
Informática IV
se verá como
Aquí va el término que definiremos

Y aquí dentro irá la definición propiamente dicha.
Aquí va la segunda definición

Y aquí dentro irá la segunda definición, separada automáticamente de la
anterior.
Actividad 3.
etiquetas.
Objetivo: Aplica listas ordenadas o no ordenadas y de definición, así
como la etiqueta visibles que le dan forma a la información..
Instrucciones:

Aplica alineaciones.
Agrega las etiquetas que han visto con anterioridad, y agregarle formato de texto como
lo observas en la información proporcionada, como negrita, cursiva, etc.
Aplicar listas numeradas, sin enumerar y de definición.
Guarda el archivo con la siguiente estructura: número de la actividad, seguido de tu
primer nombre y primer apellido: act03_josefina_cruz.html, cuando la hayas finalizado
Informática IV
Aprendiendo a ser una persona positiva
1. Evita suponer. Cuando estés en una situación difícil, por dura que te parezca, evita
imaginar que sucederá lo peor. Piensa que todo se resolverá de la mejor manera, y
dedícate a buscar los elementos positivos que ésta también tiene. Imagina y espera lo
mejor con optimismo.
2. Llénate de entusiasmo. Cada mañana comienza el día, agradeciendo el regalo de
estar vivo. Sonríe, y busca una razón para levantarte, un propósito, un proyecto o
simplemente el deseo de compartir el desayuno con tus seres queridos. Decide
comenzar con mucho entusiasmo y ganas el nuevo día.
3. Minimiza lo negativo. Resalta siempre cada elemento positivo que tenga cada una de
las situaciones que enfrentas. Evita exagerar o dramatizar los aspectos difíciles o
negativos, de manera que sea más sencillo solucionarlos.
 Los buenos hábitos de estudio empiezan en la clase

He aquí algo que probablemente te sorprenderá: ¿sabías que antes de que te pongas
a estudiar ya has empezado a hacerlo? ¿Cómo es posible? Cuando prestas atención
en clase y tomas buenos apuntes, estás empezando el proceso de aprendizaje y
estudio.
¿Te cuesta prestar atención en clase? ¿Te sientas cerca de una persona que habla
mucho o es muy ruidosa? ¿No ves bien la pizarra? Asegúrate de sentarte en un buen
sitio para poder prestar atención. Si hay algo que te impide prestar atención o tomar
buenos apuntes en clase, coméntaselo al profesor o a tus padres.
 Los buenos apuntes facilitan el estudio
¿No sabes tomar apuntes? Empieza anotando la información que explique o escriba en
la pizarra tu profesor durante la clase. Intenta hacer buena letra para que después
entiendas tus apuntes. También es una buena idea tener los apuntes, exámenes,
pruebas sorpresa y documentos de trabajo ordenados por asignaturas.
 Si planificas el estudio con antelación, luego te alegrarás de haberlo hecho
Esperar al jueves por la tarde para estudiar el examen del viernes te obligará a hincar
los codos durante toda la noche, ¡lo que no tiene nada de divertido! Además difícilmente
darás lo máximo de ti mismo si no pegas ojo en toda la noche. Todos posponemos cosas
de vez en cuando. Una de las mejores formas de asegurarte de que eso no te pasa a ti
es planificando el tiempo de estudio con antelación.
La inteligencia
Consejos para ser un buen estudiante

Hay personas bastante inteligentes que apenas necesitan estudiar, así como otras para
quienes parece que estudiar no es lo suyo. Pero lo normal es tener una inteligencia media y
los buenos resultados se obtienen con una motivación adecuada que facilite el esfuerzo que
supone estudiar. Piensa cuáles son las razones que tienes para estudiar. Cuanto más
valiosas, mejor. Sin voluntad de estudiar, no hay nada que hacer... y los motivos que tengas
para estudiar son decisivos.
Informática IV


Heteroevaluación
Lista de cotejo
HTML
apropiadas.
6.Sustenta una postura personal sobre temas de interés y relevancia
general, considerando otros puntos de vista de manera crítica y
reflexiva.
7.Aprende por iniciativa e interés propio a lo largo de la vida.

7.3 Articula saberes de diversos campos y establece relaciones entre

ellos y su vida cotidiana.
Competencia Disciplinar 1. Identifica, ordena e interpreta las ideas, datos y conceptos explícitos
e implícitos en un texto, considerando el contexto en el que se generó y
en el que se recibe.
información.
Informática IV
Utiliza el bloc de nota para elaborar la 1
página web y tiene la estructura correcta
sin cometer error.
Aplica adecuadamente el uso de las 1
etiquetas que nos permiten ordenar o
enumerar datos o elementos para facilitar
su lectura.
Aplica las otras etiquetas vistas 1
anteriormente. (Alineación, negritas, etc.)
Tienen un diseño atractivo y claro la 1
página diseñada.
Guardo el archivo correctamente como 1
se le pide.
5% Competente.
En proceso de adquirir la competencia Enviar a que tome asesorías
4a3% por lo menos una vez a la
semana.
permanentemente.
Informática IV
BLOQUE II
Insertando objetos en mi
página WEB
Informática IV

IDENTIFICACIÓN
Bloque(s) : II. Insertando objetos en mi página WEB. Número de secuencia: 2/ 3
Inicio: Marzo Valor de la secuencia: Duración en horas

Término: Abril 30 % 10 horas
Inserta objetos en el diseño de páginas WEB.
Utiliza la sintaxis para crear enlaces a otras Muestra iniciativa para procesar información.
2.1 Hiperenlaces. páginas web y con sus propias páginas.
2.2 Imágenes, videos y música. Muestra interés en trabajar en la elaboración de una
2.3 Tablas. Utiliza la sintaxis para hacer un enlace de envío página web.
de correo.
Muestra interés por investigar las sintaxis solicitadas.
Utiliza la sintaxis para enlazar las imágenes,
videos, música y sus ubicaciones. Es responsable al realizar la actividad.
Aplica la sintaxis para organizar información de

forma tabulada.
48
8. Participa y colabora de manera efectiva en equipos diversos.
8.3 Asume una actitud constructiva, congruente con los conocimientos y habilidades con los que cuenta dentro de distintos equipos de trabajo.
1. Identifica, ordena e interpreta las ideas, datos y conceptos explícitos e implícitos en un texto 5, considerando el contexto en el que se generó y en el que
se recibe.
No aplica

Fases
Apertura Duración de la actividad: 1 hora
Evaluación
Instrumentos de
Evaluación.
Informática IV
Explica la forma de
realizar durante la secuencia
de didáctica.
Se le entrega el Cuaderno de
Trabajo del bloque II y la
Antología del bloque II de la
UAC de Informática IV,
aprendizaje.
Aplica una evaluación
Resuelve la evaluación
diagnóstica para conocer los
diagnóstica para conocer
conocimientos previos
los conocimientos previos
relacionados con sobre los
relacionados con el Cuestionario
distintos objetos que pueden
lenguaje de HTML donde
ser utilizado en una página
utiliza objetos para colocar
WEB.
en su página.
Evaluación
Instrumentos de
Evaluación.
Informática IV
Explica las etiquetas y

atributos para crear enlaces
Realiza una página web encuentra en el cuaderno 4.5
de manera local. Así como la
aplicando las sintaxis para de trabajo, donde debe Archivo Digital Lista de Cotejo 6.4
sintaxis para hacer un enlace 4%
los hipertextos de forma utiliza la sintaxis correcta 7.3
de envío a correo
correcta. para realizar los enlaces de
electrónico o enlaces a otras
sus páginas.
páginas web.

Explica las etiquetas y Realiza una página WEB,
encuentra en el cuaderno 4.5
atributos para enlazar las
aplicando las sintaxis para
de trabajo, donde utiliza la Archivo Digital Lista de cotejo 6.4 4%
imágenes, música, videos, y
mostrar la inclusión de
sintaxis correcta colocar 7.3
sus ubicaciones. imágenes, videos y audio
imagen, música o video.
Explica las etiquetas y
Realiza una página WEB, de trabajo, donde utiliza la 4.5
atributos para organizar
aplicando las sintaxis para sintaxis correcta colocar Archivo Digital Lista de cotejo 6.4 4%
información de forma
crear tablas. tablas en su página 7.3
tabulada.
WEB.(Autoevaluación)
Cierre Duración de la actividad: 3 horas

Evaluación
Instrumentos de
Evaluación.
Realiza la evaluación Aplica los conocimientos
Aplica una evaluación del objetiva que se encuentra adquiridos hasta el Evaluación 4.5 8%
Lista de cotejo
cierre del bloque II. en línea en la plataforma momento en el bloque I y Objetiva 6.4
tecnológica educativa. bloque II. 7.3
Informática IV
Diseña páginas web usan

Proyecto final en 4.5
Integra equipo de trabajo las sintaxis correctas sin
Evalúa con un proyecto. un archivo Lista de cotejo 6.4 10%
para el proyecto final. cometer errores. Actividad
digital. 7.3
Transversal
8.3

Propósito: INFORMATICA IV Y
Creación de una página web de grupos funcionales. QUIMICA III (Orgánica)
En esta actividad en la UAC de Informática IV evaluará los elementos

del diseño de la página web en un editor de texto, actividad
interdisciplinaria con la UAC de Química III donde evaluará los reportes
de la práctica.

 Cañón.
 Pintaron.
 Pintagis.
 Antología.
 Plumones.
Informática IV
Básicas:

Complementarias:

Mesografía: (información de fuentes Informáticas)

Informática IV
2.1 Hipervínculos o enlaces en HTML. Etiqueta <A>.
Cuando un visitante hace clic en el hipervínculo, el destino se mostrará en su navegador web, se

abrirá o se ejecutará, en función del tipo de destino.
El destino es con frecuencia otra página web, pero también puede ser una imagen, un archivo
multimedia, un documento de Microsoft Office, un documento PDF, una dirección de
correo electrónico o un programa.
Por tanto, con los hipervínculos podemos establecer “saltos” desde una página a otra,
incluso a puntos concretos dentro de páginas con contenidos extensos. Los hipervínculos
pueden asociarse a imágenes o a textos de modo que haciendo clic sobre ellos con el botón
izquierdo del ratón se accede automáticamente al destino asociado a ellos.
Lo más habitual es que el cursor tome la forma de una pequeña mano cuando pasa sobre un
hipervínculo.
Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de
encontrarse entre las etiquetas<A>y</A>.
Enlaces a otras páginas
A través del atributo href se especifica la página a la que está asociado el enlace, la página que
se visualizará cuando el usuario haga clic en el enlace.
Para definir enlaces hipertexto se utiliza la etiqueta <A> de la manera siguiente:
<A href=”dirección”> Texto del enlace </A>
Por ejemplo, para insertar el enlace:
Visita la Universidad Autónoma del Carmen
Habría que escribir:
<A href="http://www.unacar.mx”>Visita la Universidad Autónoma del Carmen</A>
Informática IV
Enlaces a Correo electrónico:
Abre la aplicación Outlook Express para escribir un correo electrónico, cuyo destinatario será el
especificado en el enlace. Para ello la referencia del vínculo debe ser
"mailto:direcciondecorreo".
Por ejemplo, para insertar un enlace que permita enviar un correo electrónico al departamento
de desarrollo, sería de la siguiente forma:
e-mail para desarrollo
Habría que escribir:

<a href="mailto:intranet@delfin.unacar.mx">e-mail para desarrollo</a>
Después de hacer clic en el enlace se abrirá el Outlook Express (si el usuario lo tiene instalado)
con la pantalla para redactar un nuevo mensaje y con el campo destinatario rellenado con la
dirección de correo. Podemos hacer que esté rellenado algún campo más como es el asunto.
En este caso habría que escribir:
<a href=" "mailto:intranet@delfin.unacar.mx"?subject=el asunto del mensaje">e-mail para

desarrollo</a>
Enlaces a otras zonas de la misma página
A veces en el caso de documentos (o páginas) muy extensos, nos puede interesar dar un salto
de desde una posición a otra determinada.
Así es posible hacer enlaces que lleven al usuario de una parte del documento a otra dentro del
mismo documento con solo hacer un clic, a este tipo de enlaces los llamaremos locales.
Estos enlaces constan de dos objetos:
El enlace:
Corresponde a la zona en el cual el usuario hará clic, para viajar a otra parte del documento. Esta
zona aparece subrayada en el documento . Un enlace local se crea delimitando la zona del
comando <A href=”#nombre”> … </A>, en que nombre es la etiqueta que se está
referenciando.
Informática IV
El nombre enlazado o referenciado:
Corresponde a la zona del documento a la cual el usuario llegará al hacer clic en la referencia
correspondiente. Un nombre local se crea delimitando la zona con el comando <A
name=”nombre”> … </A>, en que nombre es la etiqueta que asignamos a esta zona.
Ejemplo para realizar enlaces locales.
<BODY>
<H2>Enlaces locales</H2>
<H3><A name=”índice”>Indice</A></H3>
<UL>
<LI><A HREF=”#uno”> Sección uno </A>
<LI><A HREF=”#dos”> Sección dos </A>
<LI><A HREF=”#tres”> Sección tres </A>
<LI><A HREF=”#cuarto”> Sección cuarto </A>
<LI><A HREF=”#cinco”> Sección cinco </A>
<LI><A HREF=”#seis”> Sección seis </A>
<LI><A HREF=”#siete”> Sección siete </A>
<LI><A HREF=”#ocho”> Sección ocho </A>
</UL>
<H3><A name=”uno”>Sección uno</A></H3>

<P> Esta es la sección 1 de la página de enlaces locales </P>
<P> Clic aquí para <A href=”#índice”>Indice</A>
<H3><A name=”dos”>Sección dos</A></H3>

<H3><A name=”tres”>Sección uno</A></H3>

<H3><A name=”cuarto”>Sección uno</A></H3>

<H3><A name=”cinco”>Sección uno</A></H3>

<H3><A name=”seis”>Sección uno</A></H3>

Informática IV
<H3><A name=”siete”>Sección uno</A></H3>

<H3><A name=”ocho”>Sección uno</A></H3>

</BODY>
Enlaces a otras páginas

Para enlazar a otro documento , es necesario conocer la ubicación exacta del documento que
se referencia . Una ubicación , puede ser referenciada en forma relativa o absoluta.
Ubicación relativa:
Se indica especificando la posición del documento en la estructura de subdirectorios a partir
de la ubicación del documento actual . Sólo se puede usar para documentos ubicados en el
mismo ordenador.
Una referencia relativa a otro documento se hace usando el comando:
<A HREF=”ubicación”> … </A>
Ubicación abosoluta:
Se indica especificando la URL (uniform resurce locator) de la página que se está referenciando.
Los URL son una manera universal de especificar una dirección. La forma más básica de
referenciar un hipertexto es usar el comando:
<A HREF=”http://ordenador/directorio/archivo”> … </A>
El ordenador indica la máquina donde se encuentra el documento . El directorio y archivo
indican su posición dentro de ese ordenador. Los URL tienen muchas formas distintas para
referenciar distintos objetos.
Informática IV
Actividad 4.
etiquetas.
Objetivo: Aprenderá a manejar los enlaces en sus páginas Web, lo que le
permitirá poder acceder a información que se encuentra en el mismo
documento o en otros documentos.
Instrucciones:

Inserta un color de fondo o una imagen.
Aplica alineaciones de centrado y justificado.
Agrega las etiquetas que has visto con anterioridad, incluyendo formato de texto, negrita,
cursiva, tipo de fuente y color, como lo observas en la información proporcionada.
Realiza hipervínculos internos de salida y regreso.
Informática IV
Índice.
1.- Introducción.
2.- Morfología.
3.- Comportamiento.
4.- Alimentación.
5.- Amenaza.
Introducción
Los delfines son mamíferos marinos estrechamente relacionados con las ballenas y las
marsopas. Hay cerca de cuarenta especies de delfines agrupadas en 17 géneros. Se
diferencian tanto en tamaño que variar entre los 120 centímetros y 40 kg del delfín de Maui
(Cephalorhynchus hectori maui) hasta los 9,5 metros y 10 toneladas de la orca (Orcinus orca).
Podemos encontrar delfines en todo el mundo, sobre todo en los mares poco profundos de las
plataformas continentales.
Morfología
Los delfines tienen un cuerpo fusiforme ágil y adaptado para nadar a gran velocidad gracias
también a los potentes músculos que mueven su aleta caudal. Por su parte las aletas pectorales,
junto con la sección de cola, proporcionar control direccional y la aleta dorsal, en aquellas
especies que tienen, proporciona estabilidad. A pesar de que varía según las especies, los
patrones básicos de coloración son los tonos grises, por lo general con la zona ventral
más clara, y a menudo cuentan con líneas y manchas que contrastan con el color
principal.
Calderón gris o delfín gris (Grampus griseus) en aguas del Mar Rojo.
La cabeza de los delfines contiene el melón, un órgano redondo usado para la
ecolocalización. En muchas especies las mandíbulas alargadas forman un pico distintivo, como
el delfín nariz de botella (Tursiops truncatus) cuya boca curvada simula una sonrisa, y otras
especies pueden llegar a tener hasta 250 dientes. El cerebro del delfín es grande y muy
complejo, diferente de la estructura de la de la mayoría de los mamíferos terrestres y es
considerado como uno de los animales más inteligentes de la Tierra.
La mayoría de los delfines tienen la vista muy desarrollada, tanto dentro como fuera del agua, y
pueden oír frecuencias diez veces o más por encima del límite superior del oído humano
adulto. El sentido del tacto del delfín también está muy desarrollado, con densas terminaciones
nerviosas en la piel, especialmente alrededor del hocico, las aletas pectorales y la zona genital.
Informática IV
Sin embargo los delfines carecen de un nervio olfativo se cree que no tienen sentido del olfato.
Eso sí, tienen sentido del gusto y muestran preferencias por ciertos tipos de alimentos.
Comportamiento
Los delfines son capaces de realizar una amplia gama de sonidos utilizando sacos aéreos
nasales situados justo debajo del espiráculo. Alrededor de tres categorías de sonidos pueden
realizar los delfines: silbidos, sonidos de frecuencia modulada y chasquidos. Los delfines
se comunican con sonidos producidos por la vibración del tejido conectivo, de forma similar que
los humanos utilizan las cuerdas vocales. Los chasquidos son direccionales y los utilizan para la
ecolocalización, aumentando la frecuencia de esos chasquidos al acercarse a un objeto de
interés.
Delfín giboso atlántico (Sousa teuszii)

Los delfines saltan de vez en cuando por encima de la superficie del agua y en ocasiones realizan
figuras acrobáticas. Aunque no se sabe a ciencia cierta la finalidad de estas acrobacias se cree
que sirven para una mejor localización de los bancos de peces ya que con estos saltos
pueden localizar grupos de aves lanzándose en picado a por esos bancos. Otros motivos
posibles de esos saltos pueden ser la comunicación con otros delfines, la limpieza de parásitos
o simplemente por diversión.
Delfines oscuros o de Fitzroy (Lagenorhynchus obscurus) en aguas de Nueva Zelanda.

Los delfines son animales sociables y viven en manadas de hasta una docena de ejemplares.
En lugares con una gran abundancia de alimento los grupos llegan a fusionarse temporalmente
creando agrupaciones pueden superar los 1.000 delfines. Los individuos de estos grupos se
comunican utilizando una variedad de sonidos como chasquidos, silbidos y otras vocalizaciones.
Los delfines tienen curiosos comportamientos sociales que dan muestra de su gran inteligencia.
Por ejemplo se han visto delfines cuidando de otros de su misma especie con heridas o enfermos
e incluso ayudándoles a subir a respirar. Este altruismo no parece estar limitado a su propia
especie ya que hay documentos que aseguran que el delfín Moko en Nueva Zelanda ha sido
capaz de guiar una hembra de cachalote pigmeo (Kogia breviceps) junto con su cría varada e
incluso se les ha visto protegiendo a nadadores de tiburones que nadaban en círculos
alrededor de los bañistas.
Alimentación
Los delfines son carnívoros, siendo su principal fuente de alimento los peces y calamares
aunque la orca y la falsa orca (Pseudorca crassidens) también se alimentan de mamíferos
marinos. Un método común de caza se realiza en grupo, reuniendo un banco de peces y
donde los delfines se turnan para capturar los ejemplares. En algunas partes del mundo, los
delfines comunes se alimentan de noche buscando las especies que suben a la superficie
durante ese momento del día. Los delfines comunes son auténticos especialistas
trabajando en equipo para conseguir alimento cierran los bancos entre ellos para poder
alimentarse más fácilmente.
Informática IV
Durante la migración anual de la sardina desde Ciudad el Cabo en Sudáfrica y recorriendo la

costa hacia el norte, millones de estos pequeños peces buscan alimentarse del plancton y es
entonces cuando los delfines se coordinan para saciar su hambre trabajando en equipo para
alimentarse de miles de sardinas. A este festín también se unen los tiburones, ballenas e
incluso aves.
Amenazas
Los delfines tienen pocos enemigos naturales. Para la mayoría de las especies de delfines
más pequeñas sólo unos pocos de los tiburones más grandes, como el tiburón toro, el tiburón
tigre o el tiburón blanco representan un riesgo potencial, especialmente para las crías. Algunas
de las especies más grandes como las orcas también se alimentan de pequeños delfines, pero
es poco común.
Las principales amenazas de los delfines provienen del ser humano, especialmente en algunas
especies de delfines de río como el delfín del río Amazonas (Inia geoffrensis) o el del Ganges
que se encuentran en peligro crítico de extinción. Los pesticidas, metales pesados, plásticos
y otros contaminantes industriales y agrícolas están envenenando a muchas especies de
delfines. Las lesiones y muertes por colisiones con embarcaciones, especialmente con las
hélices, también son comunes.
Delfín rosado del Amazonas. Imagen de Kevin Schafer.
Diversos métodos de pesca y las redes a la deriva matan directamente a muchos delfines y la
captura accidental supone un riesgo para muchas poblaciones de delfines. En algunas partes
del mundo, como Taiji en Japón y las Islas Feroe, los delfines se han considerado
tradicionalmente un alimento y son cazados para la comercialización de su carne.
Otras interferencias humanas en la vida de los delfines son los fuertes ruidos subacuáticos como
el sonar o proyectos de construcción en alta mar como parques eólicos son perjudiciales para
los delfines propiciando enfermedad descompresiva al obligarles a subir a la superficie
demasiado rápido para escapar de esos ruidos.
Informática IV


Heteroevaluación
Bloque: II. Insertando objetos en Evidencia:
Archivo Digital
mi página WEB.
apropiadas.
6. Sustenta una postura personal sobre temas de interés y
relevancia general, considerando otros puntos de vista de manera
crítica y reflexiva.
Atributos 4.5 Maneja las tecnologías de la información y la comunicación para
6.4 Estructura ideas y argumentos de manera clara, coherente y

sintética.

8.3 Asume una actitud constructiva, congruente con los

conocimientos y habilidades con los que cuenta dentro de distintos
equipos de trabajo
Competencia Disciplinar 1. Identifica, ordena e interpreta las ideas, datos y conceptos
explícitos e implícitos en un texto, considerando el contexto en el que
se generó y en el que se recibe.
información.
Informática IV
Utiliza el bloc de nota para elaborar la página web y tiene 0.5
la estructura correcta sin cometer error.
Tiene imagen de fondo o utilizo un color para su fondo de 1
la página.
Utilizo formato para cambiar el tipo de fuente y alineación 0.5
de texto.
Uso la sintaxis adecuado para los hipervínculos locales y 1
funcionan correctamente.
El diseño es atractivo, claro y guardo el archivo 1
correctamente como se le pide.
Total de puntos
Firma del docente

4% Competente.
En proceso de rir la Enviar a que tome asesorías

3a2% adqui por lo menos una vez a la
competencia semana.
1% No competente. Canalizar a
asesorías
permanentemente.
Informática IV
2.2 Imágenes, videos y música
Hasta el momento hemos visto cómo se puede escribir texto en una página Web, así
como sus posibles formatos. Para incluir una imagen en nuestra página Web utilizaremos la
instrucción <IMG>.
Hay dos formatos de imágenes que todos los navegadores modernos reconocen. Son las
imágenes GIF y JPG. Cualquier otro tipo de fichero gráfico o de imagen (BMP, PCX, CDR, etc...)
no será mostrado por el visor, a no ser que disponga de un programa externo que permita su
visualización.
La etiqueta img dispone de estos atributos, algunos obligatorios, otros opcionales y algunos que
ya no se recomienda usar (deprecated):
ATRIBUTO USO OBSERVACIONES
Este atributo es obligatorio e indica el nombre Obligatorio. Si no se incluye

src del archivo de imagen (entre comillas) o la no se mostrará imagen
URL desde la que se va a obtener la imagen. alguna.
Permite controlar la alineación de una imagen

con respecto a una línea de texto adyacente o Atributo obsoleto
align a otras imágenes en esa línea. Los valores (deprecated). Sustituir por
posibles son los ya conocidos left, right, CSS.
middle, top, bottom.
Informática IV
Entre comillas podremos escribir un texto que Atributo requerido, se

se mostrará si la imagen no llega a cargar, recomienda incluirlo aunque
alt
mientras se carga o, cuando visualizando ya si no se hace la imagen se
la imagen, pasamos el ratón por encima. mostrará.
Este atributo es opcional pero podemos

ponerlo para especificar al navegador que
Opcional. Indicar valor en
muestre la imagen con un tamaño específico.
width pixeles. También se puede
Significa “ancho de la imagen” que vamos a
indicar con CSS.
representar. Si no se escribe, se carga la
imagen con el tamaño original.
Opcional. Indicar valor en

Al igual que el atributo width, es opcional.
height pixeles. También se puede
Este atributo indica el alto de la imagen.
indicar con CSS.
Con border especificamos el ancho del borde Atributo obsoleto

border que rodea la imagen. Si se indica 0 equivale a (deprecated). Sustituir por
“sin borde”. CSS.
En resumidas cuentas, aquí tienes ejemplos de estos atributos usados de forma adecuada:
Usando píxeles:
<IMG SRC="maxilogo.gif" WIDTH="160" HEIGHT="32">
<IMG SRC="maxilogo.gif" WIDTH="100" HEIGHT="32">
Informática IV
En porcentaje
Es muy poco utilizado, y solo vale para casos muy concretos, por ejemplo, para hacer líneas
horizontales con imágenes. Aquí tienes un ejemplo con la imagen anterior, pero
distorsionada:
<IMG SRC="maxilogo.gif" WIDTH="80%" HEIGHT="32">
Alineación
Hay muchas maneras de alinear una imagen dentro de la página. Horizontalmente, está
predeterminada la alineación a la izquierda para una imagen y cualquier otro tipo de objeto
solitario. Puedes usar el valor de alineación left (útil en casos en el que el texto rodea a la imagen,
por ejemplo), o el valor right. Ejemplos:
<IMG SRC="conversa.gif" WIDTH="198" HEIGHT="95"

BORDER="0" ALIGN="LEFT">
<IMG SRC="conversa.gif" WIDTH="198" HEIGHT="95"

BORDER="0" ALIGN="RIGHT">
Informática IV
Sonido de fondo <bgsound>
Añadir una música de fondo a una página tiene pros y contras, si el sonido es apropiado al
contenido de la página, puede hacerla más atractiva en contrapartida la descarga del archivo de
sonido supone una carga que puede ralentizar la visualización de la página y además muchos
usuarios suelen estar escuchando otro tipo de música cuando navega en Internet, por lo que el
escuchar también sonido en cada página que visita puede resultar algo molesto.
Los formatos de sonido más habituales en Internet son el WAV, el MP3 y en algunas ocasiones
el MIDI, aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal
es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala
calidad.
A través del atributo src hay que especificar la ruta y el nombre del archivo de audio.
Con el atributo loop indicamos el número de veces que se tienen que reproducir el
sonido. Si se desea que el archivo de audio se reproduzca continuamente en un bucle,
habrá que asignarle el valor infinite o -1.
Por ejemplo, podríamos insertar un sonido de fondo escribiendo el siguiente código:
<bgsound src="varios/audio.mid" loop="-1">
La etiqueta <bgsound> puede situarse en cualquier parte del documento, pero es preferible que
la situemos siempre en un sitio fácil de encontrar, por si deseamos hacerle alguna modificación.
Podríamos, por ejemplo, incluirla justo debajo de la etiqueta <body>.
Informática IV
Video y audio <embed>
En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en
cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho
tiempo para descargarse.
Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.
La etiqueta <embed> es la que se utiliza para insertar archivos de vídeo. Puede incluirse la
etiqueta de cierre, pero en realidad no es necesaria, ya que entre las etiquetas <embed> y
</embed> no hay que insertar nada.
A través del atributo src hay que especificar la ruta y el nombre del archivo de vídeo.
Los videos insertados a través de esta etiqueta se reproducen automáticamente al

cargarse la página, y se reproducen solamente una vez. Esto puede cambiarse a través de los
atributos autostart y loop.
El atributo autostart indica si el archivo se reproducirá automáticamente al cargarse la

página, y puede tomar los valores true o false.
El atributo loop indica si el archivo se reproducirá continuamente en un bucle, y también puede

tomar los valores true o false.
Informática IV
Los atributos width (anchura) y height (altura) sirven para especificar el tamaño de la consola de
control de vídeo. Estos atributos pueden tomar como valor un número, que indica el tamaño en
píxeles. Si no se especifican estos atributos, la consola de control de vídeo se mostrará
con el tamaño más adecuado al tamaño del vídeo.
Para insertar el vídeo anterior, se podría escribir:

<embed src="varios/cotorra.avi" autostart="false" loop="true">
Existen algunos navegadores que no reconocen la etiqueta <bgsound>, por lo que no es posible
utilizar esta etiqueta para incluir un sonido de fondo. En su lugar, se utiliza la etiqueta <embed>,
que funciona del mismo modo para los archivos de audio y de vídeo.
No hay que olvidar que para los archivos de audio también se mostrarán los controles de
reproducción.
Para insertar el archivo de audio anterior, se podría escribir: <embed src="varios/audio.mid"
autostart="false" loop="true">
Si no se desea que se muestren los controles de un archivo de audio, porque va a ser utilizado
como sonido de fondo, puede hacerse que los atributos width (anchura) y height (altura) valgan
cero.
También puede utilizarse el atributo hidden, con los valores true o false. Cuando su valor es true,
se ocultan los controles de reproducción.
Por ejemplo, para insertar sonido de fondo se podría escribir:

<embed src="varios/audio.mid" autostart="true" loop="true" hidden="true" > O también:
<embed src="varios/audio.mid" autostart="true" loop="true" width="0" height="0" >
Informática IV
Actividad 5.
etiquetas.
Objetivo: Integrará en sus páginas imágenes animadas y videos, esto le
creará un ambiente multimedia, obteniendo una mejor presentación en la
comunicación de mensajes.
Instrucciones:

Inserta un color de fondo.
Aplica alineaciones de tipo justificado.
Agrega las etiquetas que has visto con anterioridad, incluyendo formato de texto, negrita,
cursiva, tipo de fuente y color, como lo observas en la información proporcionada.
Inserta audio, video e imagen.
Una imagen (del latín imago).
Es una representación visual, que manifiesta la apariencia visual de un objeto real o imaginario.
Aunque el término suele entenderse como sinónimo de representación visual, también se aplica
como extensión para otros tipos de percepción, como imágenes auditivas, olfativas, táctiles,
sinestesias, etc. Las imágenes que la persona no percibe sino que vive interiormente son
denominadas imágenes mentales, mientras que se designan dibujo malo como imágenes
creadas (o bien como imágenes reproducidas, según el caso) las que representan visualmente
un objeto mediante técnicas diferentes: dibujo, diseño, pintura, fotografía o vídeo, entre otras.
Existe gran cantidad de expresiones relacionadas con la imagen, pues se identifica que también
se hace referencias a: imagen gráfica, imagen visual, imagen material, imagen mental; y aún
más en el mundo empresarial, pues se usa el término "imagen" para referirse a ciertos
conceptos como: imagen de empresa, imagen de marca, imagen corporativa e imagen global;
de la misma manera, la imagen de empresa se subdivide en imagen depositada, la imagen
deseada y la imagen difundida, todas ellas de gran importancia pues es la visión que se tiene
de una empresa en el mercado.
Informática IV


Heteroevaluación
Bloque: II. Insertando objetos en mi Evidencia:
Archivo Digital
página WEB.
Competencias 4. Escucha, interpreta y emite mensajes pertinentes en distintos
Genéricas contextos mediante la utilización de medios, códigos y herramientas
apropiadas.
reflexiva. 7. Aprende por iniciativa e interés propio a lo largo de la vida.

8.3 Asume una actitud constructiva, congruente con los conocimientos y

habilidades con los que cuenta dentro de distintos equipos de trabajo
Competencia 1. Identifica, ordena e interpreta las ideas, datos y conceptos explícitos e
Disciplinar implícitos en un texto, considerando el contexto en el que se generó y en
el que se recibe.
información.
Nombre del
Estudiante
Informática IV
Utiliza el bloc de nota para elaborar la página web 0.5
y tiene la estructura correcta sin cometer error.
Tiene archivo de música en la página. 1
Tiene archivo de video en la página. 1
Inserta la imagen en la página. 1
El diseño es atractivo, claro y guardo el archivo 0.5
Total de puntos
Firma del docente

4% Competente.
En proceso de adquirir la Enviar a que tome

3a2% competencia asesorías por lo menos una
vez a la semana.
1% No competente. Canalizar a
asesorías
permanentemente.
Informática IV
2.3 Tablas
Las tablas nos permiten representar cualquier elemento de nuestra página (texto, listas,
imágenes, etc...) en diferentes filas y columnas separadas entre si. Es una herramienta
muy útil para "ordenar" contenidos de distintas partes de nuestra página. La tabla se define
mediante la instrucción <TABLE></TABLE>. Los parámetros opcionales de esta
instrucción son:
border = num.
Indica el ancho del borde de la tabla en puntos.
cellspacing = num
Indica el espacio en puntos que separa las celdas que están dentro de la tabla.
cellpadding = num
Indica el espacio en puntos que separa el borde de cada celda y el contenido de esta.
width = num ó %
Indica la anchura de la tabla en puntos o en porcentaje en función del ancho de la ventana del
visor. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos de las
celdas.
height = num ó %
Informática IV
Indica la altura de la tabla en puntos o en porcentaje en función del alto de la ventana del visor.
Si no se indica este parámetro, la altura se adecuará a la altura de los contenidos de las
celdas.
Para definir las celdas que componen la tabla se utilizan las etiquetas <TD> y <TH>. <TD> indica
una celda normal, y <TH> indica una celda de "cabecera", es decir, el contenido será resaltado
en negrita y en un tamaño ligeramente superior al normal. Los parámetros opcionales de ambas
etiquetas son:
align = LEFT / CENTER / RIGHT / JUSTIFY
Indica como se debe alinear el contenido de la celda, a la izquierda (LEFT), a la derecha

(RIGHT), centrado (CENTER) o justificado (JUSTIFY).
valign = TOP / MIDDLE / BOTTOM
Indica la alineación vertical del contenido de la celda, en la parte superior (TOP), en la

inferior (BOTTOM), o en el centro (MIDDLE).
rowspan = num
Indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila.
colspan = num
Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.
Para indicar que acaba una fila de celdas se utiliza la instrucción <TR>. A continuación
mostraremos un ejemplo de una tabla que contiene solo texto. Como se indicó anteriormente el
contenido de las celdas puede ser cualquier elemento de HTML, un texto, una imagen, un
Hyperenlace, una Lista, etc...
Informática IV
Ejemplo de la sintaxis de tablas.
<TABLE border = 4 cellspacing = 4 cellpadding = 4 width=80%>
<TH align = center>Buscadores

<TH align = center colspan = 2>Otros Links
<TR>
<TD align = LEFT>Yahoo
<TD align = LEFT>Microsoft
TD align = LEFT>IBM
<TR>
<TD align = LEFT>Infoseek
<TD align = LEFT>Apple
<TD align = LEFT>Digital
</TABLE>
Se vería como
Buscadores Otros Links
Yahoo Microsoft IBM
Infoseek Apple Digital
Las etiquetas <TD> y <TH> son cerradas según el estándar de HTML, es decir que un elemento
de tabla
<TD> debería cerrarse con un </TD> , sin embargo los navegadores asumen que un elemento
de la tabla, queda automáticamente "cerrado" cuando se "abre" el siguiente.
Otra definición:
Informática IV
En el siguiente nivel, dentro de la anterior, están las etiquetas para formar cada fila (row) de la
tabla, que son <TR> y </TR>. Hay que repetirlas tantas veces como filas queremos que tenga la
tabla. Es decir, para una tabla con dos filas, sería:
En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que son <TD> y
</TD>, que engloban el contenido de cada celda concreta (texto, imágenes, etc.).
Hay que repetirla tantas veces como celdas queremos que haya en esa fila.
Ejemplo de la sintaxis de tablas.
<TABLE BORDER=1>
<TR>
<TD>fila1-celda1</TD>
<TD>fila1- celda3</TD>
</TR>
<TR>
<TD>fila2- celda3</TD>
</TR>
</TABLE>
Las tablas se utilizan para organizar la información de una forma clara, ordenándola en filas y
columnas.
Informática IV
Actividad 6.
Lleva a cabo lo que se te pide, evita tener errores en la sintaxis de
las etiquetas.
Objetivo: Organizar información a través de una tabla
Instrucciones:
Al inicio del documento agrega los tìtulos de tu escuela

Agrega tu nombre y grupo
Realizaremos una tabla con el número de filas y de columnas correspondientes. en un
bloc de notas.
Aplica formato a la tabla
Inserta un color de fondo a la página
Agrega etiquetas anteriores para hacer atractiva la página.
HORARIO LUNES MARTES MIÉRCOLES JUEVES VIERNES

7:00-7:50
8:00-8:50
9:00-9:50
10:00-10:50
10:50-11:20
11:20:12:10
12:20-13:10
13:20-14:10
14:20-15:10
Informática IV

Instrumento de Tipo de
Autoevaluación.
evaluación: Lista de cotejo evaluación:
Semestre: 4 Grupo: Número de
Unidad de Aprendizaje secuencia:
Informática I 2/3
Curricular: Porcentaje 4 %
:
Bloque: II. Insertando objetos en mi Evidencia: Archivo
página WEB. Digital
Competencias 4. Escucha, interpreta y emite mensajes pertinentes en distintos
Genéricas contextos mediante la utilización de medios, códigos y
herramientas apropiadas.
reflexiva.
sintética.
8.3 Asume una actitud constructiva, congruente con los conocimientos
y habilidades con los que cuenta dentro de distintos equipos de trabajo
Competencia Disciplinar 1. Identifica, ordena e interpreta las ideas, datos y conceptos explícitos
e implícitos en un texto, considerando el contexto en el que se generó
y en el que se recibe.
información.
Informática IV
Inserta la tabla con el número de filas y de columnas. 1
Aplica formato a la tabla (borde, relleno de la celda, 2

etc.)
El diseño es atractivo, claro y guardo el archivo 1
Total de puntos
Firma del docente

4% Competente.
En proceso de adquirir la Enviar a que tome asesorías por lo
3a2% competencia menos una vez a la semana.
1% No competente. Canalizar a asesorías
permanentemente.
Informática IV
Informática IV
BLOQUE III
Software para el diseño de

Pagina WEB
Informática IV

IDENTIFICACIÓN
Bloque(s) : III. Software para el diseño de Pagina WEB Número de secuencia: 3/ 3
Inicio: abril Valor de la secuencia: Duración en horas

Término: mayo 40 % 10 horas
Diseña páginas WEB utilizando el software de aplicación.
3.1 Conoce la terminología básica del Describe el entorno del software de aplicación Muestra iniciativa para procesar información.
software para diseñar la página WEB. para el diseño de las páginas web.
3.2 Elementos del entorno del software para Muestra interés en trabajar en la elaboración de una
diseñar la página WEB. Aplica las herramientas básicas del software que página web.
3.3 Diseña una página WEB con el software se utiliza para el diseño de las páginas web.
de aplicación. Muestra interés por investigar las sintaxis solicitadas.
Elabora páginas WEB en un proyecto final
utilizando el software correctamente. Es responsable al realizar la actividad.
Informática IV
4.3 Identifica las ideas clave en un texto o discurso oral e infiere conclusiones a partir de ellas
6.1 Elige las fuentes de información más relevantes para un propósito específico y discrimina entre ellas de acuerdo a su relevancia y confiabilidad.
8.3 Asume una actitud constructiva, congruente con los conocimientos y habilidades con los que cuenta dentro de distintos equipos de trabajo.
1. Identifica, ordena e interpreta las ideas, datos y conceptos explícitos e implícitos en un texto5, considerando el contexto en el que se generó y en el que
se recibe.
No aplica.

Fases
Apertura Duración de la actividad: 1
Evaluación
Instrumentos
de Evaluación.
Informática IV
Explica la forma de
realizar durante la
secuencia de didáctica.
Se le entrega el Cuaderno
de Trabajo del bloque III y la
Antología del bloque III de
la UAC de Informática IV,
aprendizaje.
Aplica una evaluación Realiza la evaluación
diagnóstica para conocer diagnóstica para conocer
los conocimientos previos los conocimientos previos
relacionados en la relacionados en la Cuestionario
utilización del software de utilización del software de
aplicación para el diseño de aplicación para el diseño
páginas WEB. de páginas WEB.
Evaluación
Instrumentos
de Evaluación.
Comenta sobre los Realiza la lectura que se Elabora un resumen de la
conceptos básicos que encuentra en el cuaderno lectura utilizando
deben de conocer sobre el de trabajo sobre el Microsoft Word.
Archivo
software a utilizar para los software para el diseño Y además reconocerá el Lista de cotejo 4.3;4.5;6.1;6.4;7.3 5%
digital.
diseños de sus páginas web. páginas web, e interactúa entorno de trabajo de la
Y así mismo como se con la aplicación donde aplicación a utilizar para
encuentra conformado el diseñara dichas páginas. diseñar páginas Web.
Informática IV
entorno de la aplicación que Participa en un FORO

se utilizara para diseñar las sobre el tema en el aula
páginas web. virtual.
Explica con un ejemplo
como colocar imágenes ya Elabora una página usando Elabora la práctica que se
sea como fondo o insertarla el software, que incluya encuentra en el cuaderno
en su página, y trabajar con una imagen como fondo y de trabajo, usando el Archivo Digital Lista de cotejo 4.5;6.4;7.3 5%
inspector de propiedades estilos de fuentes en la software para el diseño de
(herramienta de fuentes), página Web. la misma.
utilizando el software.
Explica con un ejemplo encuentra en el cuaderno
Efectúa una página Web,
como llevar a cabo los de trabajo, usando el
donde debe insertar
hipervínculos, insertar software para el diseño de Archivo Digital Lista de cotejo 4.5;6.4;7.3 5%
hipervínculos y objetos
objetos multimedia, usando la misma donde debe de
multimedia.
el software. incluir los hipervínculo y
objetos de multimedia.
Explica con un ejemplo
como llevar acabo la
de trabajo, usando el
organización de la Realiza una página Web,
software para el diseño de Archivo Digital Lista de cotejo 4.5;6.4;7.3 5%
información usando tablas y aplicando tablas y listas.
la misma donde debe de
listas con el software de
incluir tablas y las
aplicación.
listas.(coevaluación)
Cierre Duración de la actividad: 4 horas
Evaluación
Instrumentos
de Evaluación.
Aplica una evaluación del Aplica los conocimientos Evaluación

Lista de cotejo
cierre del bloque III. adquiridos en la Objetiva 4.5;6.4;7.3 10%
Informática IV
elaboración de las páginas

web.
Diseña páginas web Proyecto final 10%
Integra equipo de trabajo
Evalúa con un proyecto. usando el software en un archivo Lista de cotejo 4.5;6.4;7.3;
para el proyecto final.
adecuadamente. digital. 8.3

Propósito: INFORMATICA IV Y
Creación de una página web de las funciones trigonométricas, MATEMÁTICAS IV (Introducción al Cálculo)
logarítmicas y exponenciales.
En esta actividad en la UAC de Informática IV evaluará los elementos

del diseño de la página web con el uso del software, actividad
interdisciplinaria con la UAC de Matemáticas IV donde evaluara la
aplicación de las funciones trigonométricas, logarítmicas y
exponenciales en su entorno.

 Cañón.
 Pintarrón.
 Antología.
 Plumones.
Informática IV
Básicas:
Complementarias:
Mesografía: (información de fuentes Informáticas)

Informática IV
3.1 Conoce la terminología básica del software para diseñar la página

WEB.
Software para el diseño de página web
Actividad 7
Para iniciar el trabajo con Dreamweaver, realiza una lectura sobre los conceptos básicos del
software que utilizaras para el diseño de páginas web.
Elabora un resumen de la lectura utilizando Microsoft Word, mìnimo 2 cuartillas.
Colocas tu nombre completo y el grupo al que perteneces en el pie de página.
Guarda su archivo con el nombre de act07_josefina_cruz.docx y lo subes a la
plataforma de edmodo.
¿Qué es Dreamweaver?
Dreamweaver, actualmente de la casa de Adobe, anteriormente perteneciente a Macromedia,

es la herramienta de diseño de páginas web más avanzada, tal como se ha afirmado en muchos
medios. Aunque sea un experto programador de HTML el usuario que lo maneje, siempre
encontrará en este programa razones para utilizarlo, sobre todo en lo que a productividad se
refiere.
Cumple perfectamente el objetivo de diseñar páginas con aspecto profesional, y soporta gran
cantidad de tecnologías, además muy fáciles de usar:
Hojas de estilo y capas

Javascript para crear efectos e interactividades
Inserción de archivos multimedia...
Informática IV
Además es un programa que se puede actualizar con componentes, que fabrica

tanto Macromedia como otras compañías, para realizar otras acciones más avanzadas.
Como editor WYSIWYG que es (What You See Is What You Get, “Lo que ves es lo que obtienes”,
ya que permite escribir un documento viendo directamente el resultado final), Dreamweaver
oculta el código HTML de cara al usuario, haciendo posible que alguien que no entiende el
lenguaje HTML pueda crear páginas y sitios web fácilmente.
Conceptos Básicos
Página Web
Cuando pensamos en una página web debemos pensar en una empresa que tiene una
jerarquía bien establecida, un departamento de ventas, división de personal, contabilidad, diseño,
etc. Cada una de estas estructuras cumple una función determinada e importante dentro de la
empresa. Pues una página web es una sección de una estructura más grande que ofrece al
navegante la posibilidad de informarse acerca de determinado producto, servicio o la empresa.
Sitio Web
En inglés website o web site, un sitio web es un sitio (localización) en la World Wide Web que
contiene documentos (páginas web) organizados jerárquicamente. Cada documento (página
web) contiene texto y o gráficos que aparecen como información digital en la pantalla de
un ordenador. Un sitio puede contener una combinación de gráficos, texto, audio, vídeo, y
otros materiales dinámicos o estáticos. Diseñar páginas web en lenguaje HTML 68 Un sitio
web es un gran espacio documental organizado que la mayoría de las veces está típicamente
dedicado a algún tema particular o propósito específico. Cualquier sitio web puede contener
hiperenlaces a cualquier otro sitio web, de manera que la distinción entre sitios individuales,
percibido por el usuario, puede ser a veces borrosa.
No debemos confundir sitio web con página web; esta última es sólo un archivo HTML, una
unidad HTML, que forma parte de algún sitio web. Al ingresar una dirección web, como por
ejemplo www.wikimedia.org, siempre se está haciendo referencia a un sitio web, el que tiene una
página HTML inicial, que es generalmente la primera que se visualiza. La búsqueda en Internet
Informática IV
se realiza asociando el DNS ingresado con la dirección IP del servidor que contiene el
sitio web en el cual está la página HTML buscada.
Los sitios web están escritos en código HTML (Hyper Text Markup Language), o dinámicamente
convertidos a éste, y se acceden aplicando un software conveniente llamado navegador web,
también conocido como un cliente HTTP. Los sitios web pueden ser visualizados o accedidos
desde un amplio abanico de dispositivos con conexión a Internet, como computadoras
personales, portátiles, PDAs, y teléfonos móviles.
Sitio Local
Una vez definido el trabajo a realizar, todo lo guardas en una carpeta, la cual, si eres ordenado,
pondrás el nombre del cliente y dentro de ella toda la información, paginas html, imágenes, etc.
Este es el sitio local, es decir, la copia en el disco duro del sitio web en internet.
Un sitio web está alojado en una computadora conocida como servidor web, también
llamada servidor HTTP, y estos términos también pueden referirse al software que se
ejecuta en esta computadora y que recupera y entrega las páginas de un sitio web en respuesta
a peticiones del usuario. Apache es el programa más comúnmente usado como servidor web
(según las estadísticas de Netcraft) y el Internet Information Services (IIS) de Microsoft también
se usa con mucha frecuencia.
Sitio estático
Se le llama sitio estático al sitio web que no interactúa con una Base de Datos, es decir solousa
tecnología HTML, CSS y JavaScript.
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. Hay dos amplias categorías de programas editores usados para este
propósito que son:
Editores de texto como Notepad, donde el HTML se manipula directamente en el

programa editor o
Informática IV
Editores WYSIWYG como por ejemplo Microsoft FrontPage

y Adobe Dreamweaver, donde el sitio se edita usando una interfaz GUI y el
HTML subyacente se genera automáticamente con el programa editor.
Sitio dinámico
Un sitio web dinámico es uno que puede tener cambios frecuentes en la información.
Cuando el servidor web recibe una petición para una determinada página de un sitio web, la
página se genera automáticamente por el software, como respuesta directa a la petición
de la página; Por lo tanto se puede dar así un amplio abanico de posibilidades, incluyendo por
ejemplo: (a) Mostrar el estado actual Utilizar Software de Aplicación para el Diseño de
Páginas Web 69 de un diálogo entre usuarios, (b) Monitorizar una situación cambiante, o
proporcionar información personalizada de alguna manera a los requisitos del usuario individual,
etc.
El sitio dinámico es aquel en el que la información que se le muestra al navegante

proviene de una Base de Datos, generalmente en MySql y las páginas están en formato PHP,
ASP, JSP.
Sitio Interactivo
Es aquel sitio que su funcionalidad depende de acciones del usuario, es decir, si presiona un
botón el sitio completo hace algo, lo más común es que estos sitios interactivos dependan de
otra tecnología para agregar interactividad, Adobe Flash.
CSS
Es un lenguaje de hojas de estilos creado para controlar el diseño de la estructura. CSS es la

mejor forma de separar los contenidos y su diseño siendo necesario para crear páginas web
complejas. Separar la estructura de los contenidos y la estructura del diseño presenta numerosas
ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos. Al crear una página
web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir,
Informática IV
para designar la función de cada elemento dentro de la página: párrafo, titular, texto estacado,
tabla, lista de elementos, etc.


Heteroevaluación
Lista de cotejo
Curricular: Informática I secuencia: 3/3
Porcentaje: 5 %
Bloque: III. Software para el Evidencia:
Archivo Digital
diseño de Pagina WEB
apropiadas.
6. Sustenta una postura personal sobre temas de interés y
relevancia general, considerando otros puntos de vista de manera
crítica y reflexiva.
sintética.
8.3 Asume una actitud constructiva, congruente con los conocimientos
y habilidades con los que cuenta dentro de distintos equipos de trabajo.
Informática IV
Competencia Disciplinar 1. Identifica, ordena e interpreta las ideas, datos y conceptos

explícitos e implícitos en un texto, considerando el contexto en el que
se generó y en el que se recibe.
información.
A continuación respeta el modelo dado:
(letra Arial 12 para título y subtítulos, 11 para el trabajo

1
escrito, interlineado 1.5 , texto justificado, hoja de
presentación, formato de Word, hoja tamaño carta,
margen predeterminado)
Aplica adecuadamente los signos de puntuación. (1) 1
Usa adecuadamente los acentos, tiene coherencia y 1

claridad en la redacción.
Presenta su trabajo ordenado y limpio. 1
Participa en el FORO de la plataforma edmodo sobre el tema el 1

aula virtual.
Total de puntos
Firma del docente

5% Competente.
En proceso de Enviar a que tome

4a3% adquirir la asesorías por lo menos una
competencia vez a la semana.
Informática IV
No competente. Canalizar a
2a 1% asesorías
permanentemente.
3.2 Elementos del entorno del software para diseñar la página WEB.
El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los
objetos. Además, coloca muchas de las operaciones más frecuentes en barras de
herramientas para que pueda realizar cambios en los documentos rápidamente.
En Windows, Dreamweaver proporciona un diseño integrado en una única ventana. En el espacio

de trabajo integrado, todas las ventanas y paneles están integrados en una única ventana de la
aplicación de mayor tamaño.
Opciones básicas de trabajo:
Arrancar y cerrar Dreamweaver
Veamos las dos formas básicas de arrancar Deamweaver.
Desde el icono de Dreamweaver en el Escritorio.

Para cerrar Dreamweaver, podemos utilizar cualquiera de las
siguientes operaciones:
Informática IV
Hacer clic en el botón cerrar , en la esquina superior derecha, como en cualquier

ventana de Windows.
Pulsar la combinación de teclas Alt + F4.
Pulsar la combinación de teclas Ctrl + Q. Hacer clic sobre el menú Archivo y elegir
la opción Salir.
Abrir y Guardar documentos
Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:

Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible).
Pulsar la combinación de teclas Ctrl + O.
Hacer clic sobre el menú Archivo y elegir la opción Abrir.
Hacer doble clic sobre el Archivo en la ventana del sitio.
Hacer clic derecho sobre el Archivo en el explorador de Windows, y elegir la opción
Abrir con → Adobe DreamweaverCS4.
Para abrir un documento Nuevo, puedes utilizar cualquiera de las siguientes
operaciones:
Informática IV
o Hacer clic en el botón Nuevo de la barra de herramientas estándar (si

está visible).
o Pulsar la combinación de teclas Ctrl + N.
o Hacer clic sobre el menú Archivo y elegir la opción Nuevo.
o Después de esto aparecerá una nueva ventana, en la que deberás elegir la
 Categoría
 Página en Blanco.
En la segunda columna seleccionamos HTML, observamos que hay muchos
diseños ya creados que podemos elegir, para nuestro primer ejemplo
elegimos en Diseño ninguno. A continuación pulsamos el botón Crear.
Para Guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
Informática IV
Hacer clic en el botón Guardar de la barra de

herramientas estándar.
Pulsar la combinación de teclas Ctrl + S.
Hacer clic sobre el menú Archivo y elegir la opción
Guardar.
Dreamweaver incluye la posibilidad de, en el
caso de estar trabajando simultáneamente con varios
documentos, poder guardar todos de golpe, sin la
necesidad de hacerlo uno por uno. Para guardar
todo puedes realizar cualquiera de las siguientes
operaciones.
Hacer clic en el botón Guardar Todo de la barra de herramientas estándar.

Hacer clic sobre el menú Archivo y elegir la opción Guardar Todo.
En Windows, Dreamweaver proporciona un diseño integrado en una única ventana. En el espacio

de trabajo integrado, todas las ventanas y paneles están integrados en una única ventana de
la aplicación de mayor tamaño.
Informática IV
A. Barra de aplicaciones
B. Barra de herramientas Documento
C. Ventana de documento
D. Grupos de paneles
E. Conmutador de espacios de trabajo F. Selector de etiquetas
G. Inspector de propiedades
H. Panel Archivos.
Introducción a los elementos del espacio de trabajo
El espacio de trabajo incluye los siguientes elementos.
La ventana de bienvenida. Permite abrir un documento reciente o crear un documento

nuevo.
Desde la pantalla de bienvenida, también puede profundizar sus conocimientos
sobre
Dreamweaver mediante una visita guiada o un tutorial del producto.
Informática IV
Barra de la aplicación. A lo largo de su parte superior, la ventana de la aplicación

contiene un conmutador de espacios de trabajo, menús (sólo Windows) y otros
controles de aplicación.
Barra de herramientas Documento. Contiene botones que proporcionan opciones
para diferentes vistas de la ventana de documento (como la vista Diseño y la
vista Código), diversas opciones de visualización y algunas operaciones comunes
como la obtención de una vista previa en un navegador.
Barra de herramientas Estándar. (No se muestra en el diseño de espacio de
trabajo predeterminado.) Contiene botones para las operaciones más habituales de
los menús Archivo y Edición: Nuevo, Abrir, Examinar en Brigde, Guardar, Guardar
todo, Imprimir código, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la barra
de herramientas Estándar, seleccione Ver > Barras de herramientas > Estándar.
Barra de herramientas Codificación. (Sólo se muestra en la vista Código.)
Contiene botones que le permiten realizar numerosas operaciones de codificación
estándar.
Barra de herramientas Representación de estilos. (Oculta de manera
predeterminada.) Contiene botones que le permiten ver cómo aparecería el diseño en
distintos tipos de medios si utilizase hojas de estilos. dependientes de los medios.
También contiene un botón que le permite activar o desactivar estilos de hojas de
estilos en cascada (CSS).
Ventana de documento. Muestra el documento actual mientras lo está creando y
editando.
Inspector de propiedades. Permite ver y cambiar diversas propiedades del objeto o texto
seleccionado.
Cada objeto tiene propiedades distintas. El inspector de propiedades no está
ampliado de forma predeterminada en el diseño del espacio de trabajo del codificador.
Selector de etiquetas. Situado en la barra de estado de la parte inferior de la ventana de
documento.
Muestra la jerarquía de etiquetas que rodea a la selección actual. Da clic en
cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido.
Paneles. Ayudan a supervisar y modificar el trabajo realizado. Ejemplos de paneles son
el panel
Informática IV
Insertar, el panel Estilos CSS y el panel Archivos. Para ampliar un panel, da doble clic
en su ficha.
Panel Insertar. Contiene botones para la inserción de diversos tipos de objeto,
como imágenes, tablas y elementos multimedia, en un documento. Cada objeto es un
fragmento de código HTML que te permite establecer diversos atributos al insertarlo.
Por ejemplo, puedes insertar una tabla haciendo clic en el botón Tabla del panel
Insertar.
o Si se prefiere, puede insertar objetos utilizando el menú Insertar en lugar del panel
Insertar.
Panel Archivos. Permite administrar los archivos y las carpetas, tanto si forman
parte de un sitio de Dreamweaver como si se encuentran en un servidor remoto. El
panel Archivos también proporciona acceso a todos los archivos del disco local,
como ocurre en el Explorador de Windows (Windows) o en el Finder
(Macintosh).
Ventana de documento.
La ventana de documento muestra el documento actual. Puede elegir entre una de las vistas
siguientes:
Vista Diseño. Un entorno para el diseño visual de la página, la edición visual y el

desarrollo rápido de aplicaciones. En esta vista, Dreamweaver muestra una
representación visual del documento completamente editable, similar a la que
aparecería en un navegador.
Vista Código. Un entorno de codificación manual para escribir y editar código HTML, Java
Script, código de lenguaje de servidor, como por ejemplo PHP o ColdFusion
Markup Language (CFML), y otros tipos de código.
Vista de código dividida. Versión dividida de la vista Código que le permite
desplazarse por el trabajo realizado en diferentes secciones del documento a la vez.
Vistas Código y Diseño. Le permite ver las dos vistas, Código y Diseño, para el mismo
documento en una sola ventana.
Vista en vivo. La Vista en vivo, que es similar a la vista Diseño, muestra una
representación más realista de la apariencia que tendrá el documento en un navegador y
le permite interactuar con el documento de la misma forma que lo haría en un
Informática IV
navegador. La Vista en vivo no es editable. No obstante, puede realizar modificaciones

en la vista Código y actualizar la Vista en vivo para ver los cambios.
Vista Código en vivo. Sólo está disponible al visualizar un documento en la Vista en vivo.
La vista Código en vivo muestra el código que un navegador utiliza para ejecutar la
página y cambia dinámicamente conforme se interactúa con la página en la Vista en vivo.
La vista Código en vivo no es editable.
Cuando una ventana de documento está maximizada (configuración predeterminada),
aparecen fichas en la parte superior de la misma con los nombres de archivo
de todos los documentos abiertos. Recuerda que Dreamweaver muestra un
asterisco después del nombre del archivo si ha realizado cambios que no has guardado
todavía.
Para cambiar a un documento, da clic en su ficha.
Dreamweaver también muestra la barra de herramientas Archivos relacionados debajo de la

ficha del documento (o debajo de la barra de título del documento si estás viendo documentos
en ventanas independientes). Los documentos relacionados son documentos asociados
al documento actual, como archivos CSS o archivos Java Script. Para abrir uno de los archivos
relacionados en la ventana de documento, haga clic en su nombre de archivo en la
barra de herramientas Archivos relacionados.
Herramientas de documento.
La barra de herramientas Documento contiene botones que le permiten cambiar rápidamente

entre diferentes vistas del documento. La barra de herramientas contiene también algunos
comandos y opciones relativos a la visualización del documento y a su transferencia entre los
sitios local y remoto. La siguiente ilustración muestra la barra de herramientas de documento
ampliada.
Informática IV
En la barra de herramientas Documento, aparecen las siguientes opciones:
A. Mostrar vista de código. Sólo muestra la vista Código en la ventana de documento.

B. Mostrar vistas de código y diseño. Divide la ventana de documento entre las vistas Código
y
C. Diseño. Cuando seleccione esta vista combinada, se encontrará
D. Mostrar vista de diseño. Sólo muestra la vista Diseño en la ventana de documento.
E. Vista en vivo. Muestra una vista del documento no editable, interactiva y basada en
navegador. E. Vista Código en vivo. Muestra el código en sí utilizado por el
navegador para ejecutar la página.
F. Título del documento. Permite introducir un título para el documento, que parecerá
en la barra de título del navegador. Si el documento ya tiene título, éste aparecerá en
dicho campo.
G. Administración de archivos. Muestra el menú emergente Administración de archivos.
H. Vista previa/Depurar en explorador. Le permite obtener una vista previa o depurar
el documento en un navegador. Seleccione un navegador en el menú emergente.
I. Actualizar vista de diseño. Actualiza la vista Diseño tras realizar cambios en la vista
Código. Los cambios realizados en la vista Código no aparecerán de forma automática
en la vista Diseño hasta que se efectúen determinadas acciones, como guardar el archivo
o hacer clic en este botón.
J. Ver opciones. Permite definir las opciones de las vistas Código y Diseño y
establecer qué vista desea que aparezca en la parte superior de la ventana. Las opciones
del menú corresponden a la vista actual: la vista Diseño, la vista Código o ambas.
K. Ayudas visuales. Permite utilizar distintas ayudas visuales para el diseño de las páginas.
L. Validar formato. Permite validar el documento actual o una etiqueta seleccionada.
M. Comprobar compatibilidad con navegadores. Le permite comprobar si el CSS es
compatible con diferentes navegadores.
Informática IV
Barra de herramientas Estándar.
La barra de herramientas Estándar contiene botones para las operaciones más

habituales de los menús Archivo y Edición: Nuevo, Abrir, Examinar en Brigde, Guardar,
Guardar todo, Imprimir código, Cortar, Copiar, Pegar, Deshacer y Rehacer. Estos botones se
utilizan del mismo modo que los comandos de menú equivalentes.
A. Nuevo
B. Abrir,
C. Examinar en Brigde,
D. Guardar,
E. Guardar todo
F. Imprimir código,
G. Cortar
H. Copiar,
I. Pegar,
J. Deshacer y
K. Rehacer.
Barra de estado.
La barra de estado, situada en la parte inferior de la ventana de documento, proporciona

información adicional sobre el documento que está creando.
Informática IV
A. Selector de etiquetas. Muestra la jerarquía de etiquetas que rodea a la selección

actual. Haga clic en cualquier etiqueta de la jerarquía para seleccionar la
etiqueta y todo su contenido. Haga clic en <body> para seleccionar todo el cuerpo
del documento. Para definir los atributos clase o ID para una etiqueta en el
selector de etiquetas, haga clic con el botón de derecho del ratón (Windows)
o mantenga presionada la tecla Control y haga clic (Macintosh) en la etiqueta y
elija una clase o una ID del menú contextual.
B. Herramienta Seleccionar. Activa y desactiva la herramienta Mano.
C. Herramienta Mano. Permite hacer clic en el documento y arrastrarlo por la ventana
de documento.
D. Herramienta Zoom y menú emergente Establecer nivel de aumento. Permiten
establecer un nivel de aumento para el documento.
E. Menú emergente Tamaño de ventana. (No disponible en la vista Código.)
Permite cambiar el tamaño de la ventana de documento a dimensiones
predeterminadas o personalizadas.
F. Tamaño del documento y tiempo de descarga. Muestra la estimación del tamaño
del documento y del tiempo de descarga de la página, incluidos todos los
archivos dependientes, como imágenes y otros archivos multimedia.
G. Indicador de codificación. Muestra la codificación del texto del documento actual.
Herramientas de Codificación.
Informática IV
La barra de herramientas Codificación contiene botones que le

permiten realizar numerosas operaciones de codificación estándar, como
ampliar y contraer las selecciones de código, resaltar código no válido,
insertar o eliminar comentarios, aplicar sangría al código e insertar
fragmentos de código utilizados recientemente.
La barra de herramientas Codificación aparece verticalmente en la parte

izquierda de la ventana de documento y sólo está visible cuando se muestra la
vista Código.
No puedes desacoplar ni mover la barra de herramientas codificación,

pero sí puedes ocultarla (Ver > Barras de herramientas > Codificación).
También puedes modificar la barra de herramientas Codificación para que muestre más botones
(como Ajustar texto, Caracteres ocultos y Sangría automática) u ocultar botones que no desea
utilizar.
Para ello, no obstante, deberá editar el archivo XML que genera la barra de herramientas.
Para más información, consulte Ampliación de Dreamweaver.
A. Abrir documentos, B. Mostrar navegador de código, C. Contraer etiqueta completa, D.

Contraer selección. E. Expandir Todo, F. Seleccionar etiqueta padre, G. Equilibrar llaves, H.
Números de líneas, I. Resaltar código no válido, J. Alerta de errores de sintaxis, K. Aplicar
comentario. L. Quitar comentario, M. Ajuste de etiqueta, N. Fragmentos recientes, O. Mover o
convertir CSS.
Herramientas que representan estilos
Informática IV
La barra de herramientas Representación de estilos (oculta de manera predeterminada)

contiene botones que le permiten ver cómo aparecería el diseño en distintos tipos de
medios si utilizase hojas de estilos dependientes de los medios.
También contiene un botón con el que es posible activar o desactivar los estilos CSS. Para
mostrar la barra de herramientas, seleccione Ver > Barras de herramientas >
Representación de estilos.
Esta barra de herramientas sólo funciona si los documentos utilizan hojas de estilos
dependientes de los medios. Por ejemplo, una hoja de estilos puede especificar una regla para
imprimir y otra regla distinta para los dispositivos de mano.
De manera predeterminada, Dreamweaver muestra el diseño para una pantalla (que muestra
cómo se representa una página en la pantalla del equipo).
Puedes ver las representaciones para los diferentes soportes haciendo clic en los
correspondientes botones de la barra de herramientas Representación de estilos.
A. Representar tipo de medio

Screen. Muestra cómo aparece la
página en la pantalla de un equipo.
B. Representar tipo de medio Print.
Muestra cómo aparece la página en
una hoja de papel impresa.
C. Representar tipo de medio Handheld. Muestra cómo aparece la página en
un dispositivo de mano, como un teléfono móvil o un dispositivo BlackBerry.
D. Representar tipo de medio Projection. Muestra cómo aparece la página en un

dispositivo de proyección.
E. Representar tipo de medio TTY. Muestra cómo aparece la página en un teletipo.

F. Representar tipo de medio TV. Muestra cómo aparece la página en la pantalla de
televisión.
G. Alternar visualización de estilos CSS. Le permite activar o desactivar estilos CSS.
Informática IV
Este botón funciona de manera independiente a los demás botones de medios.
H. Hojas de estilos de tiempo de diseño. Le permite especificar una hoja de estilos

de tiempo de diseño.
Descripción general del inspector de propiedades.
El inspector de propiedades permite examinar y editar las propiedades más comunes del
elemento de página seleccionado actualmente, como texto o un objeto insertado.
Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los
diferentes elementos de la página Web que estemos diseñando.
El contenido del inspector de propiedades es distinto en función del elemento seleccionado.

Por ejemplo, si selecciona una imagen de la página, el inspector de propiedades cambiará
para mostrar las propiedades de la imagen (por ejemplo, la ruta de archivo de la imagen, el
ancho y el alto de la imagen, el borde que rodea la imagen en caso de que lo haya, etc.).
Informática IV
El inspector de propiedades se encuentra, de manera predeterminada, en el borde inferior

del espacio de trabajo, aunque puede desacoplarlo y convertirlo en un panel flotante en el
espacio de trabajo.
Nota: Una vez conocido el entorno del software para el diseño de las páginas web, a partir
de ahora elabora las siguientes prácticas usando el software para diseñar tus páginas WEB.
3.3 Diseña una página WEB con el software de aplicación.
Actividad 8
Abrir la aplicación de Dreamweaver

Copia la información que se te presenta
Agregas una imagen de fondo y formatos de fuente.
Qué es Ciberbullying:
Informática IV
El ciberbullying o, en español, el ciberacoso es un tipo de acoso que se vale de medios

informáticos para el hostigamiento de una persona. La palabra se compone con el
vocablo inglés bullying, que refiere acoso e intimidación, y el prefijo “ciber-”, que indica
relación con redes informáticas. En inglés, la forma correcta de escribir la palabra es
cyberbullying.
Como tal, el ciberbullying o ciberacoso supone la situación de hostigamiento, abuso y

vejación sostenido y repetido a lo largo del tiempo, de una persona por parte de un
grupo de individuos.
Su característica fundamental es que para llevarse a cabo se vale de las redes

informáticas y de los recursos tecnológicos actuales, como computadoras, teléfonos
inteligentes, tablets, e, incluso, consolas de videojuegos.
Los medios a través de los cuales se efectúa el ciberbullying, por otra parte, se desplazan
del espacio físico al escenario virtual, y de este modo se manifiesta en sitios como redes
sociales, chats, foros, correo electrónico, páginas web, blogs, fotologs, videojuegos, entre
otros. El tipo de acciones que constituyen ciberbullying, en este sentido, se relacionan con
el envío de mensajes de texto, correos electrónicos, imágenes, ilustraciones y videos que
puedan atormentar, amenazar, hostigar o humillar a la persona.
El ámbito de internet, además, propicia el anonimato, o la adopción de perfiles inventados para

enmascarar en el ciberbullying, de modo que al estrés de la víctima puede sumarse la
sensación de no saber quién lo está atacando.
Las consecuencias del ciberbullying son devastadoras a nivel psicológico y emocional para
la víctima. Su bienestar psíquico y salud emocional son vulnerados, todo lo cual lo hace más
susceptible de sufrir, en el futuro, de depresión, ansiedad, fobia escolar o trastornos de
aprendizaje, entre otras cosas.
Informática IV

Instrumento de Tipo de
Heteroevaluación
evaluación: Lista de cotejo evaluación:
Informática I
Curricular: secuencia: 3/3
Porcentaje: 5 %
Archivo Digital
Competencias Genéricas 4. Escucha, interpreta y emite mensajes pertinentes en distintos contextos
mediante la utilización de medios, códigos y herramientas apropiadas.
habilidades con los que cuenta dentro de distintos equipos de trabajo.
el que se recibe.
investigar, resolver problemas, producir materiales y transmitir información.
Utiliza el software para elaborar la página web sin ningún 1
contratiempo.
Aplico a su página una imagen como fondo y formatos de 1
fuentes.
El diseño es atractivo y claro. 1
Guardo el archivo correctamente como se le pide. 1
110
Entrega en tiempo y en forma la práctica. 1
Total de puntos
Firma del docente

5% Competente.
En proceso de adquirir la Enviar a que tome asesorías por

4a3%
competencia lo menos una vez a la semana.
2a 1% No competente. Canalizar a asesorías
permanentemente.
Informática IV
Multimedia. Es la combinación de dos o más medios para transmitir información tales como
texto, imágenes, animaciones, sonido y video que llega al usuario a través del computador u otros
medios electrónicos.
La multimedia permite que el usuario aprenda rápidamente estimulando los sentidos como el
tacto, el oído, la vista y especialmente el cerebro.
Ventajas de la multimedia
1. Mejora las interfaces basadas solo en texto

2. Mantienen la atención y el interés
3. Mejora la retención de la información presentada
4. Es enormemente divertida
Usos de la multimedia
La multimedia puede ser usada en los negocios, la educación, el hogar, en lugares públicos y en
realidad virtuales.
Actividad 9

Copia la información que se te presenta
Agregas una imagen de fondo y formatos de fuente.
Aplicar hipervínculos para cada avance tecnológico, crear una página para cada avance
tecnológico con su respectiva información. Los hipervínculos deben ir y regresar a la
página principal. Anexar objetos multimedia
Avances alucinantes para los próximos 10 años
1. Biotecnología: manos biónicas
Permite que las personas sin dedos tengan manos completamente funcionales capaces de
recoger y manejar objetos delicados. Está completamente controlada por el cerebro y no requiere
cirugía. Touch Bionics, la empresa que produce la mano Pro Digits, es capaz de instalar la mano
completa con “piel viva”, un recubrimiento de plástico que parece piel humana, por menos de
50.000 dólares.
Informática IV
Recientemente, ha salido a la luz otra mano biónica que ofrece sentido del tacto. La nueva
prótesis, desarrollada por un equipo internacional de científicos y bautizada como Lifehand 2,
requiere cirugía para conectarla a los nervios del paciente. El dispositivo, que ha contado con
financiación de la Unión Europea, todavía se encuentra en fase experimental, pero ya ha sido
probado con éxito:
2. Arquitectura: edificios rotatorios
El rascacielos giratorio de Dubai
Este hermoso edificio constará de 59 plantas / módulos con rotación independiente, de manera
que sus habitantes tengan una visión en constante cambio del mundo exterior. Cada piso girará
a unos 6 metros por minuto para que los habitantes no noten el movimiento. Las rotaciones
independientes también darán al edificio un exterior en continuo cambio que puede adoptar
diseños muy complejos, pero la verdadera innovación está en los aerogeneradores construidos
entre cada planta, dado que la energía no contaminante que se obtiene a partir del movimiento
de rotación será suficiente para abastecer al rascacielos y a varios edificios en los alrededores.
3. Coches eléctricos y múltiples combustibles
Hay numerosos tipos diferentes de combustibles para los “coches del mañana”, pero el único
coche que parece tener alguna posibilidad realista de ser utilizado por las masas en los próximos
diez años es el coche eléctrico.
Como el sedán Model S de Tesla que salió al mercado en 2012 y se puede comprar en Europa
desde 55.000 € (un buen precio para un coche eléctrico de lujo). Además de unas curvas
sensuales, ofrece una autonomía de entre 370 y 510 km por carga, dependiendo del tamaño de
la batería. Y pasa de 0 a 97 km/h en 5,4 segundos, con 7 pasajeros a bordo
4. Cómo nos relacionamos con el mundo: Internet de la cosas
La forma en que nos relacionamos con el mundo exterior ha cambiado mucho desde la llegada
de Internet, los teléfonos inteligentes, etc.. En un futuro muy cercano, se producirá otro gran
salto: la integración de la información de Internet con nuestro entorno. Es decir, poder mirar a un
edificio, producto o lugar y ver de inmediato información sobre el tema en nuestros dispositivos
y, en última instancia, sólo con nuestros ojos.
Algo similar a la aplicación Goggles, de Google, que nos permite hacer una foto de cualquier
cosa y recibir, al instante, información al respecto en nuestro teléfono Android. Sin embargo,
Google sólo ha arañado la superficie de esta tecnología. Según Kurzweil, en 2020 veremos como
algo normal la aparición de ventanas emergentes en nuestro campo visual que nos
proporcionarán información sobre la gente y los lugares que miramos en cada momento. Nuestra
memoria y el gran banco de información de Internet serán uno en todo momento.
Informática IV
Hasta que podamos lograrlo con la implantación de un chip en el cerebro, podemos usar un
nuevo dispositivo llamado Vuzix Wrap 920AR, que superpone vídeos en nuestro campo de visión
normal utilizando unas gafas especiales.
Informática IV


Heteroevaluación
Lista de cotejo
Archivo Digital
habilidades con los que cuenta dentro de distintos equipos de trabajo
el que se recibe.
12. Utiliza las tecnologías de la información y comunicación para investigar,
resolver problemas, producir materiales y transmitir información.
Informática IV
Aplico hipervínculos para cada avance tecnológico 1
Los hipervínculos funcionan de salida y regreso 1
Aplico a su página objetos multimedia. 1
Aplico imagen de fondo y formato al texto. 1
Entrega en tiempo y en forma la práctica y guardo el 1

archivo correctamente como se le pide.
Total de puntos
Firma del docente

5% Competente.
En proceso de la Enviar a que tome asesorías por

4a3%
adquirir competencia lo menos una vez a la semana.
2 a 1 % No competente. Canalizar a asesorías
permanentemente.
Informática IV
Actividad 10

Organizaremos información a partir de listados dentro de una tabla
Formatos de fuente.
Aplicar formato a la tabla de bordes y sombreado.
En los negocios En la educación En el hogar

• Presentaciones • Cambios radicales en • Programas de
(slide shows) la formación Televisión
• Capacitaciones • Fomenta el • En reproductores DVD
• Mercadotecnia Autoaprendizaje TV cable interactivo
• Publicidad • Tutoriales interactivos • Computador con
• Exhibición de • Video tutoriales interfaces multimedia
productos Bases de • Enciclopedias • Videojuegos
datos • Webs educativas • Visitas virtuales
• Catálogos • Cursos en CD-ROM interactivas (3D)
• Comunicaciones en • Mapas interactivos • Celulares con
red capacidades multimedia
• Videoconferencia • Dispositivos electrónicos
multimedia
Informática IV


Lista de cotejo Heteroevaluación
evaluación:
Informática IV 3/3
Curricular: Porcentaje: 5 % secuencia:
Bloque: III. Software para el diseño Evidencia:
Archivo Digital
de Pagina WEB
6. Sustenta una postura personal sobre temas de interés y relevancia general,
considerando otros puntos de vista de manera crítica y reflexiva.
Atributos 4.5 Maneja las tecnologías de la información y la comunicación para obtener
información y expresar ideas.
7.3 Articula saberes de diversos campos y establece relaciones entre ellos y su vida
cotidiana.
Competencia Disciplinar 1. Identifica, ordena e interpreta las ideas, datos y conceptos explícitos e implícitos
en un texto, considerando el contexto en el que se generó y en el que se recibe.
8. Valora el pensamiento lógico en el proceso comunicativo en su vida cotidiana y
académica.
12. Utiliza las tecnologías de la información y comunicación para investigar,
resolver problemas, producir materiales y transmitir información.
Aplico tabla a su página WEB. 1
Aplico listas a su página WEB. 1
Aplico formato de texto. 1
Aplico formato de bordes y sombreado a la tabla. 1
Entrega en tiempo y en forma la práctica y guardo el 1

archivo correctamente como se le pide.
Total de puntos
Firma del docente
Informática IV

5% Competente.
En proceso de la Enviar a que tome asesorías por
4a3% adquirir competencia lo menos una vez a la semana.
2 a 1 % No competente. Canalizar a asesorías
permanentemente.
Informática IV
CONCLUSIÓN
Las páginas web son buenas para dar a conocer información de distintos ámbitos en Internet.
El perfil del egresado de preparatoria puede aplicar estas tecnologías en su ámbito escolar
desde crear su propia página para publicar sus intereses y compartirlo en la web.
También existen diferentes softwares que permiten el diseño de páginas, pero es bueno
aprender el lenguaje de HTML, sobre todo para aquellos que van a estudiar carreras que tienen
que ver con la publicidad o con la programación. Estás páginas son estáticas así que todavía
queda mucho que aprender en tu formación como estudiante.
Informática IV

Informatica IV - Cuaderno de Trabajo

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Informatica IV - Cuaderno de Trabajo

Cargado por

Copyright:

Formatos disponibles

ELABORACIÓN DE PÁGINAS WEB 1

UNIVERSIDAD AUTÓNOMA DEL CARMEN

UNIDAD DE APRENDIZAJE AL QUE PERTENECE:

Nombre del Estudiante:

Cuarto Semestre: ___Grupo: ___

Cd. del Carmen, Campeche a 7 de Febrero de 2017.

BLOQUE III ........................................................................................................................... 81

• En Chrome la opción de menú es Herramientas > Ver código fuente (o el atajo

Unidad de Aprendizaje Curricular No. 1 Conociendo el lenguaje HTML, en ella se plasma

Unidad de Aprendizaje Curricular No. 2 Insertando objetos en mi página Web, consiste en

Universidad Autónoma del Carmen

Inicio: Febrero Valor de la secuencia: Duración en horas

Aplica el mismo color a todo el texto de la

Agrega líneas para separar los párrafos de texto.

Aplica las etiquetas de cabeceras, para resaltar

Aplica formato al texto.

Agrega diferentes tipos de letras, con la

Utiliza las listas en HTML, para desglosar

Competencias disciplinares básicas:

Competencias disciplinares extendidas:

Actividades de Enseñanza - Aprendizaje

Explica cómo crear una

Explica los atributos de la

Explica los atributos de la

Elabora la práctica que se

ordenada, no ordenada o forma ordenada, no

Material y equipo de apoyo:

Cuaderno de trabajo Diseño de página WEB. Elaborada por la academia de informática.

MEDIactive. (2011). Manual de Dreamweaver CS5. México: Alfaomega.

1.1 Introducción al lenguaje de HTML.

Para abreviar una larga historia, podemos

HTML es un lenguaje que hace posible presentar información (por ejemplo,

HTML es la abreviatura de "HyperText Mark-up Language", es decir, "Lenguaje de

• Hiper (Hyper): Es lo contrario de lineal. Los programas de la computadora se

¿Cuáles son las características del lenguaje HTML?

Reglas básicas en el diseño:

1. Tener algo interesante que decir en tu PÁGINA web:

Después de haber realizado la lectura, responderemos a la

1. ¿Nombre del científico que fue el creador el lenguaje HTML?

2. ¿En qué año fue creado el lenguaje HTML?

3. ¿Cuál era el objetivo principal del científico al crear el lenguaje HTML?

4. ¿Qué entiendes por HTML?

5. Define cada una de las letras que conforman la palabra HTML:

6. Menciona 4 características del lenguaje HTML:

1.2 Estructura básica de un documento HTML:

 <HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.

Para realizar saltos de línea

Realizaremos nuestro primer ejemplo, abriremos el editor del bloc de

¿Por qué estudiar?

El estudio es el desarrollo de aptitudes y también habilidades mediante la incorporación de

El saber cómo estudiar es de una importancia vital para cualquiera.

Objetivo: Desarrolla una página web sencilla, aplicando etiquetas para

El peligro no solo acecha en las calles, ahora también ha migrado al ciberespacio.

La seguridad informática es un área que se enfoca en la protección de los recursos

Universidad Autónoma del Carmen

Instrumento de Tipo de evaluación:

Nombre del Estudiante

Firma del docente

Calificación obtenida: Estatus: Observaciones:

En proceso de adquirir la Enviar a que tome asesorías por lo

Atributos de la etiqueta <BODY>

Bgcolor="número hexadecimal / nombre del color". Asignamos un color de fondo a la

Cuarto Semestre: _Grupo: _