GUÍA DE DISEÑO DE APLICACIONES DE PROGRAMAS INTEGRADOS II. Examen de Recuperación

Transcripción

1 1 GUÍA DE DISEÑO DE APLICACIONES DE PROGRAMAS INTEGRADOS II Examen de Recuperación En el presente trabajo encontrarás la base teóricapractica para resolver los ejercicios que se te solicitan. La teoría es un compendio de la página por lo que si consideras necesario ingresa a ella para ahondar en los temas. Los ejercicios que haz de resolver se encuentran las páginas 17 a la 21 y de las que tendrás que contestar al reverso de éste cuadernillo. Lic. María Cristina Martínez Ramos 18/01/2010

2 2 INTENCIÓN DE LA ASIGNATURA Que es estudiante diseñe presentaciones gráficas y páginas Web y las instale en un servidor, mediante la utilización de un programa gráfico de presentaciones y del lenguaje HTML; lo que le permitirá expresar ideas en forma gráfica, así como el intercambio de información con diversos usuarios en intranet e Internet. INDICE TEMÁTICO Unidad I. Programas de presentación gráfica Características. 2.5 Hipervínculos. Unidad III. Elaboración de páginas Web 3.1 Características del lenguaje HTML. 3.2 Tags más relevantes 3.3 Imágenes, sonido y video 3.4 Tablas y marcos 3.5 Hipervínculos y anclas Tipos de presentación. Diseño de presentaciones básicas. Diseño de presentaciones intermedias. Salidas de las diapositivas. Unidad II. Multimedia e hipervínculos Unidad IV. Montado de páginas Web 4.1 Servidor Web. 4.2 Intranet. 4.3 Programa FTP. 2.1 Animación. 2.2 Audio. 2.3 Video. 2.4 Importación de objetos.

3 3 PROGRAMAS DE PRESENTACIÓN GRÁFICA UNIDAD I Un programa de presentación es un paquete de software usado para mostrar información, normalmente mediante una serie de diapositivas. Típicamente incluye tres funciones principales: un editor que permite insertar un texto y darle formato, un método para insertar y manipular imágenes y gráficos y un sistema para mostrar el contenido en forma continua. Hay muchos tipos de presentaciones, para educación, o para comunicar noticias en general. Los programas de presentación pueden servir de ayuda o reemplazar a las formas tradicionales de dar una presentación, como por ejemplo panfletos, resúmenes en papel, pizarras, diapositivas o transparencias. Un programa de presentación permite colocar texto, gráficos, películas y otros objetos en páginas individuales o "diapositivas". El término "diapositiva" es una referencia al proyector de diapositivas, un dispositivo que se ha quedado obsoleto para estos fines desde la aparición de los programas de presentación. Las diapositivas se pueden imprimir en transparencias y ser mostradas mediante un proyector de transparencias, o ser visualizadas directamente en la pantalla del ordenador (o en una pantalla normal usando un proyector de vídeo) bajo el control de la persona que da la presentación. La transición de una diapositiva a otra puede ser animada de varias formas, y también se puede animar la aparición de los elementos individuales en cada diapositiva. Diez consejos para convencer a la audiencia 1. Se debe distinguir claramente el objetivo y la intención del mensaje que se va a dar: información, persuasión o ambas. 2. Distribuye el contenido de la presentación en tres partes bien diferenciadas: introducción, cuerpo y conclusión. 3. Limita el número de temas clave a siete o a menos por cada presentación. Una buena presentación exige organización, brevedad y un uso cuidado de la lengua. 4. Utiliza un lenguaje adecuado con el público y emplea sustantivos y verbos que doten de fuerza y dinamismo al texto. Evita la voz pasiva. 5. Expresa una idea en cada elemento utilizando frases cortas en lugar de oraciones compuestas. 6. Es recomendable ser creativo y sustituir palabras por ilustraciones. Una ilustración despierta el interés y transmite la información con mayor rapidez. 7. Utiliza gráficos, tablas y diagramas para que los datos puedan ser contrastados fácilmente. 8. En el momento de la presentación hay que dar la imagen de estar relajado y seguro, aunque se esté como un flan. Deberemos vocalizar con claridad y evitar hablar de forma entrecortada.

4 4 9. Es muy bueno tener un vaso de agua a mano para utilizarlo en caso de que se nos seque la boca, o simplemente para cuando necesitemos una excusa para pensar en la siguiente idea. 10. Nunca hay que admitir que se está nervioso y disculparse por ello. Si se nos olvida algo, lo mejor es seguir adelante y mencionarlo cuando lo recordemos. PRESENTACIONES BÁSICAS PowerPoint es la herramienta que nos ofrece Microsoft Office para crear presentaciones. Las presentaciones son imprescindibles hoy en día ya que permiten comunicar información e ideas de forma visual y atractiva. Se pueden utilizar presentaciones en la enseñanza como apoyo al profesor para desarrollar un determinado tema, para exponer resultados de una investigación, en la empresa para preparar reuniones, para presentar los resultados de un trabajo o los resultados de la empresa, para presentar un nuevo producto, etc. En definitiva siempre que se quiera exponer información de forma visual y agradable para captar la atención del interlocutor. Con PowerPoint podemos crear presentaciones de forma fácil y rápida pero con gran calidad ya que incorpora gran cantidad de herramientas que nos permiten personalizar hasta el último detalle, por ejemplo podemos controlar el estilo de los textos y de los parrafos, podemos insertar gráficos, dibujos, imágenes, e incluso texto WordArt. Podemos también insertar efectos animados, películas y sonidos. Podemos revisar la ortografía de los textos e incluso insertar notas para que el locutor pueda tener unas pequeñas aclaraciones para su exposición y muchas más cosas que veremos a lo largo del curso. Para empezar veremos la forma de arrancar el programa y cuáles son los elementos básicos de PowerPoint, la pantalla, las barras, etc, para familiarizarnos con el entorno. Aprenderás cómo se llaman, donde están y para qué sirven. Cuando conozcas todo esto estarás en disposición de empezar a crear presentaciones en el siguiente tema. Pantalla Inicial Al iniciar PowerPoint aparece una pantalla inicial como la que a continuación te mostramos. Ahora conoceremos los nombres de los diferentes elementos de esta pantalla y así será más fácil entender el resto del curso. La pantalla que se muestra a continuación puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento, como veremos más adelante.

5 La parte central de la ventana es donde visualizamos y creamos las diapositivas que formarán la presentación. Una diapositiva no es más que una de las muchas pantallas que forman parte de una presentación, es como una página de un libro. NOMBRE DEL APARTADO DESCRIPCIÓN 1. La barra de título Contiene el nombre del documento sobre el que se está trabajando en ese momento. Cuando creamos una Presentación se le asigna el nombre provisional Presentación1, hasta que lo guardemos y le demos el nombre que queramos. En el extremo de la derecha están los botones para minimizar, restaurar/maximizar y cerrar la ventana. 2. La barra de menús Contiene todas las operaciones que nos permite realizar PowerPoint con nuestras presentaciones, estas operaciones suelen ir agrupadas en menús desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en PowerPoint. Todas las operaciones se pueden realizar desde estos menús, pero las cosas más habituales se realizan más rápidamente a partir de los iconos de las otras barras que veremos después, para ayudarnos a recordar estos

6 6 iconos, en el menú desplegable aparece en el lateral izquierdo el icono correspondiente a la opción 3. Las barras de herramientas 4. La barra de estado 5. Las barras de desplazamiento 6.El área de esquema 7. Los Botones de vistas, 8. El Panel de Tareas Contienen iconos para ejecutar de forma inmediata algunas de las operaciones más habituales, como Guardar, Copiar, Pegar, Imprimir,etc. Las iremos detallando a lo largo del curso. Muestra el estado de la presentación, en este caso el número de la diapositiva en la cual nos encontramos y el número total de diapositivas, el tipo de diseño y el idioma. Permiten movernos a lo largo y ancho de la pantalla de forma rápida y sencilla, simplemente hay que desplazar la barra arrastrándola con el ratón, o hacer clic en los triángulos. Tenemos una barra horizontal (la que te enseña Muestra los títulos de las diapositivas que vamos creando con su número e incluso puede mostrar las diapositivas en miniatura si seleccionamos la pestaña. Al seleccionar una diapositiva en el área de esquema aparecerá inmediatamente la diapositiva en el área de trabajo para poder modificarla. Con ellos podemos elegir el tipo de Vista en la cual queremos encontrarnos según nos convenga, por ejemplo podemos tener una vista general de todas las diapositivas que tenemos, también podemos ejecutar la presentación para ver cómo queda, etc. El icono que queda resaltado nos indica la vista en la que nos encontramos. Muestra las tareas más utilizadas en PowerPoint y las clasifica en secciones. El contenido del panel de tareas va cambiando según lo que estemos haciendo Tipos de Vistas Vista Normal El saber manejar los tipos de vistas es muy importante ya que nos va a permitir tener tanto una visión particular de cada diapositiva como una visión global de todas las diapositivas, incluso nos permitirá reproducir la presentación para ver cómo queda al final. La vista normal es la que se utiliza para trabajar habitualmente, con ella podemos ver, diseñar y modificar la diapositiva que seleccionamos. Para ver la diapositiva en esta vista despliega el menú Ver y selecciona la opción normal.

7 7 También puedes pulsar en el botón izquierda. que aparece debajo del área de esquema en la parte En la parte izquierda de la pantalla aparece el área de esquema en el cual podemos seleccionar la diapositiva que queremos visualizar y en la parte derecha aparece la diapositiva en grande para poder modificarla. En la parte inferior se encuentra el área de notas en el cual se introducen aclaraciones para el orador sobre la diapositiva. Esta es la vista que más utilizarás ya que en ella podemos insertar el texto de las diapositivas, cambiarles el color y diseño y es además la que más se aproxima al tamaño real de la diapositiva. Vista clasificador de diapositivas Este tipo de vista muestra las diapositivas en miniatura y ordenadas por el orden de aparición, orden que como podrás ver aparece junto con cada diapositiva. Con este tipo de vista tenemos una visión más global de la presentación, nos permite localizar una diapositiva más rápidamente y es muy útil para mover, copiar o eliminar las diapositivas, para organizar las diapositivas. Vistas de presentación con diapositivas La vista Presentación con diapositivas reproduce la presentación a partir de la diapositiva seleccionada, con este tipo de vista podemos apreciar los efectos animados que hayamos podido insertar en las distintas diapositivas que forman la presentación. También puedes pulsar en el botón F5. que aparece debajo del área de esquema o pulsar la tecla Trabajando con PowerPoint Insertar una diapositiva Para insertar una nueva diapositiva te aconsejamos que si te encuentras en la vista normal selecciones la pestaña diapositiva del área de esquema ya que de esta forma es más fácil apreciar cómo se añade la nueva diapositiva a la presentación. Puedes añadir una diapositiva de varias formas: Pulsa en el botón que se encuentra en la barra de Formato. Puedes hacerlo también a través de la barra de menús seleccionando el menú Insertar y después seleccionando la opción Nueva diapositiva O bien puedes hacerlo a través de las teclas Ctrl + M. Para acabar la inserción de la diapositiva tendrás que

8 8 seleccionar qué diseño quieres que tenga la nueva diapositiva y para ello tendrás que hacer clic sobre el diseño que quieras del Panel de tareas. En el panel de tareas tenemos una sección Diseño de diapositiva que nos permite elegir un tipo de diapositiva que incluye ya los objetos preparados para que sólo nos quede completarla con contenido. Cuando hacemos clic sobre un diseño nuestra diapositiva toma el diseño seleccionado. Es bastante intuitivo ver en qué consiste cada diseño, para verlo detallaremos algunos de los que se ven a la derecha. una diapositiva con un título y un subtítulo. una diapositiva con un título un texto. una diapositiva con un título y un texto a dos columnas. una diapositiva en blanco. una diapositiva con un título y cuadro para añadir un objeto. Para darle mayor presentación visual a tu trabajo añade Estilo de la diapositiva: en ella se muestran opciones para plantillas que controlan el fondo, las fuentes, tamaños de las fuentes, viñetas.

9 9 O también puedes agregar color de fondo para cada diapositiva o texturas. Ahora que ya tiene un diseño y un estilo, es hora de agregar objetos. Los objetos son los elementos que podemos incorporar en una diapositiva, por ejemplo un gráfico, una imagen, textos, vídeos, sonidos, etc.

10 10 Barra de dibujos: Se utiliza para dibujar una línea recta Muy parecido al botón anterior pero la línea acabará en flecha Es la herramienta del rectángulo, con ella dibujaremos rectángulos, éstos por defecto aparecen con borde y relleno verde, pero podemos cambiarlo. Parecida a la anterior herramienta, pero sirve para dibujar elipses. Es quizás, es la herramienta más complicada y a la vez la más útil, siempre que queramos escribir texto en nuestra diapositiva tendremos que insertar estos cuadros de texto Con la herramienta del WordArt, podemos dibujos títulos muy llamativos Podremos insertar distintos tipos de diagramas u organigramas. Es fácil manejarlos, ya que una vez insertados se manejan igual que el resto de figuras ya vistas. Haciendo clic en este botón abrimos rápidamente la galería de imágenes prediseñadas en el panel de tareas. En este caso, podemos insertar imágenes, pero no prediseñadas, sino desde un archivo, es decir imágenes que tengamos guardadas en cualquier unidad, para ello tendremos que buscar la imagen en el cuadro de diálogo que aparece. Ingresando textos En las diapositivas podemos insertar textos y aplicarles casi las mismas operaciones que con un procesador de texto, es decir, podemos modificar el tamaño de la letra, color, forma, podemos organizar los textos en párrafos, podemos aplicarles sangrías, etc. Es posible que con los textos de esquema que incorporan las plantillas de PowerPoint no sea suficiente por lo que tendrás que insertar nuevos cuadros de texto para añadir más contenido a la diapositiva. Para añadir un nuevo cuadro de texto puedes elegir entre: - Hacer clic en el botón Cuadro de texto de la barra de dibujo, - o desde la barra de menús desplegando el menú Insertar y seleccionando la opción Cuadro de texto. Ingresando tablas En una diapositiva además de insertar texto, gráficos, etc también podemos insertar tablas que nos permitirán organizar mejor la información. Para insertar una tabla en una diapositiva sigue estos pasos: Despliega el menú Insertar y selecciona la opción Tabla o utiliza el botón herramientas. de la barra de

11 11 Si lo haces a través del menú Insertar te aparecerá una ventana en la que podrás indicar el número de columnas y filas. Insertando gráficos Los gráficos se utilizan muy a menudo en las presentaciones por su facilidad de esquematizar gran cantidad de información. Para insertar un gráfico en una diapositiva unicamente tienes que pulsar en el botón de la barra estándar. PowerPoint insertará un gráfico en la diapositiva y te mostrará la hoja de datos que contiene las cantidades que se representan en el gráfico. En la hoja de datos la primera columna que aparece es la que representa la leyenda, la primera fila (1er trim.,2do trim...) representa el eje X (horizontal) y las cantidades serán representadas en el eje Y. Este dibujo es la representación de la hoja de datos que te hemos mostrado anteriormente. Una vez insertado el gráfico es muy fácil de modificar los datos de la hoja de datos, únicamente sitúate sobre la celda que quieras modificar e inserta el nuevo valor que inmediatamente verás representado en la gráfica.

12 12 Una vez determinado el tamaño de la tabla pulsa Aceptar y aparecerá una tabla en la diapositiva junto con una nueva barra de herramientas que te permitirá personalizar la tabla. Insertar películas y sonidos UNIDAD II Otro elemento muy útil a la hora de diseñar presentaciones son elementos multimedia como sonido y películas. Para insertar un sonido en una presentación despliega el menú Insertar y elige Películas y sonidos. Después aparecerá una lista en la que podrás elegir un sonido de la galería de sonidos que incorpora PowerPoint. Podrás también insertar un sonido o películas que ya tengas almacenado en tu ordenador (con la opción Sonido de archivo), o grabar tú mismo el sonido e incluso insertar como sonido una pista de un Cd de audio. Botones de acción Los botones de acción son figuras que podemos insertar desde el menú Presentación. Funcionan como cualquier otra figura de la barra de dibujo, con la diferencia de que tienen configurada una acción por defecto. Por ejemplo, podemos insertar un botón para ir a la última diapositiva, a la primera

13 13 En el momento en que insertemos uno de estos botones, saltará un cuadro de diálogo Configuración de la acción para que aceptemos o cambiemos la acción de ese botón. Si quisiéramos elegir otra acción, tendríamos que desplegar la lista Hipervínculo a para elegirla. Hay que tener en cuenta, que estas acciones pueden aplicarse a todos los objetos, sin embargo en el caso de los botones, la acción ya está predeterminada. Si deseamos aplicar una acción a otra figura, tras seleccionarla, iremos al menú Presentación y elegiremos la opción Configuración de la acción. Aparece el cuadro de diálogo anterior. Crear Presentaciones rápidamente PowerPoint nos permite crear una presentación de formas distintas, bien a través del asistente que es muy útil cuando nuestros conocimientos sobre PowerPoint son escasos porque nos guiará en todo el proceso de creación de la presentación, también podemos crearlas a través de algunas de las plantillas que incorpora el propio PowerPoint o plantillas nuestras. También se puede crear la presentación desde cero, es decir, crearla a partir de una presentación en blanco. PowerPoint tiene muchas presentaciones estándares que se pueden utilizar para ahorrar tiempo. Estas presentaciones estándares están agrupadas en varios temas. Con los botones que aparecen en la parte central de la ventana seleccionamos el tema, a continuación aparecen en la parte derecha de la ventana las presentaciones asociadas al tema seleccionado. Por ejemplo hemos seleccionado el tema Organización y la presentación Reunión de la organización. Con esto PowerPoint me va a crear una presentación para una reunión con un esquema y unas diapositivas predefinidas, nosotros sólo tendremos que retocar la presentación para adaptarla a nuestras necesidades.

14 14 Animaciones En las presentaciones podemos dar movimiento a los objetos que forman parte de ellas e incluso al texto haciéndolas así más profesionales o más divertidas, además de conseguir llamar la atención de las personas que la están viendo. Para animar un texto u objeto lo primero que hay que hacer es seleccionarlo, a continuación desplegar el menú Presentación y seleccionar personalizar animación.

15 15 Después aparecerá en el Panel de tareas algo similar a lo que te mostramos a continuación. En este panel aparece la lista desplegable Agregar efecto en la cual seleccionaremos el tipo de efecto que queramos aplicar, incluso podremos elegir la trayectoria exacta del movimiento seleccionándola del menú Trayectorias de desplazamiento. Podemos utilizar el botón Quitar para eliminar alguna animación que hayamos aplicado a algún texto. En la lista desplegable Inicio podemos seleccionar cuándo queremos que se aplique la animación (al hacer clic sobre el ratón, después de la anterior diapositiva, etc). Las demás listas desplegables cambiarán en función del tipo de movimiento y el inicio del mismo. La velocidad suele ser una característica común por lo que podemos controlarla en casi todas las animaciones que apliquemos a un objeto. La lista que aparece debajo de velocidad nos muestra las distintas animaciones que hemos aplicado a los objetos de la diapositiva, como podrás comprobar aparecen en orden. El botón Reproducir te muestra la diapositiva tal y como quedará con las animaciones que hemos aplicado. Transición La transición de diapositiva nos permite determinar cómo va a producirse el paso de una diapositiva a la siguiente para producir efectos visuales más estéticos. Para aplicar la transición a una diapositiva despliega el menú Presentación y selecciona la opción Transición de diapositiva.

16 16 En el panel de tareas aparece algo similar a esto: La primera lista que aparece Aplicar a las diapositivas seleccionadas: te permite seleccionar el movimiento de transición entre una diapositiva y la siguiente. Hay una lista muy larga de movimientos. En la lista Velocidad: podemos indicarle la velocidad de la transición entre una y otra diapositiva. Incluso podemos insertar algún sonido de la lista Sonido:. En la sección Diapositiva avanzada podemos indicarle que si para pasar de una diapositiva a la siguiente hay de hacer clic con el ratón o bien le indicas un tiempo de transición (1 minuto, 00:50 segundos, etc..) Si quieres aplicar estas características a todas las diapositivas pulsa en el botón Aplicar a todas las diapositivas. El botón Reproducir te muestra el resultado. Intervalos de tiempos Ensayar intervalos te permite calcular el tiempo que necesitas para ver cada diapositiva sin prisas. Para calcular el tiempo que necesitas tienes que desplegar el menú Presentación y elegir la opción Ensayar Intervalos, después verás que la presentación empieza a reproducirse pero con una diferencia, en la parte superior izquierda aparece una especie de contador que cronometra el tiempo que tardas en pasar de una diapositiva a otra pulsando algún botón del ratón. En el recuadro blanco te mostrará el tiempo para la diapositiva actual y el recuadro del tiempo que aparece en la parte derecha muestra la suma total de intervalos, es decir, el tiempo que transcurrido desde la primera diapositiva. La flecha sirve para pasar a la siguiente diapositiva, el botón para pausar el ensayo de intervalos y para repetir la diapositiva (para poner a cero el cronómetro de la diapositiva. Una vez terminas el ensayo PowerPoint te pregunta si quieres conservar esos intervalos para aplicarlos a cada diapositiva de la presentación. Si contestas que sí verás que aparece una

17 17 pantalla en la que te muestra en miniatura las diapositivas y debajo de cada una aparece el tiempo utilizado para ver cada una de ellas. APARTADO I. 19% EJERCICIOS DE EVALUACIÓN DE POWER POINT INSTRUCCIONES: Subraya la respuesta correcta para dar solución a la oración 1. El Asistente para autocontenido crea. a. una nueva presentación en blanco, con fuentes y un fondo atractivo b. una nueva presentación con diapositivas de muestra y sugerencias sobre qué información debería ser incluida c. una nueva apariencia para una presentación existente d. una nueva plantilla para futuro uso 2. Usando las mismas fuentes y estilos de viñetas en todas sus textos en las diapositivas usted puede. a. fijarlas en el Patrón de las Diapositivas b. fijarlas en el Patrón de Títulos c. fijarlas en el Asistente para autocontenido d. seleccionar todas las miniaturas de diapositivas y usar la barra de herramientas Formato, para fijar las fuentes y las viñetas. 3. El primer objetivo de su diseño de diapositivas debería ser. a. atraer la vista de su audiencia b. coordinar con el logotipo de su compañía y el esquema de color c. hacer que la información sea fácil de leer d. hacer las diapositivas interesantes y hasta excitantes 4. El efecto en que parece como que la nueva diapositiva está empujando a la anterior fuera de la pantalla, es un ejemplo de una. a. transición de diapositivas b. animación de diapositivas c. personalizar animación d. ninguna de las anteriores 5. Para hacer que corra una presentación por si misma, de modo completamente automático usted haría que. a. fijar que las animaciones de diapositivas comiencen, Con Anterior. b. fijar todas las transiciones de diapositivas para que se ejecuten después de cierta cantidad de c. fijar las transiciones para que avancen automáticamente después de cierto tiempo, que puede ser d. fijar las transiciones para que avancen automáticamente después de cierto

18 18 segundos distinto para cada diapositiva. tiempo Y fijar todas las animaciones de diapositivas para que se ejecuten, Con Anterior. 6. Para guardar una presentación como plantilla debe guardarla con el tipo de archivo. a. Presentation (*.ppt) b. Presentación con diapositivas de PowerPoint (*.pps) c. Plantilla de diseño (*.ptt) d. Plantilla de presentación (*.pot) 7. La ubicación por defecto de PowerPoint para una plantilla personalizada, que permite que se vea en la lista de plantillas disponibles, es. a. la misma carpeta de plantillas que viene con PowerPoint b. la carpeta dentro de la cual usted instaló a PowerPoint c. C:\Documents and Settings\[nombre del usuario]\aplicación Datos\Microsoft\Plantillas d. diferente, dependiendo de que versión de PowerPoint o de Office sea, de qué sistema operativo usa y si ha establecido identidades 8. Una vez que ha modificado un esquema de color, usted guardarlo para usarlo más adelante en una presentación diferente a. puede b. no puede 9. Cuando Autovista previa está habilitada para la Animación Personalizada y usted modifica una animación, el Panel de Diapositivas ejecutará. a. solamente la animación cambiada b. solamente la transición de diapositiva existente c. cualquier transición y animaciones que hayan sido aplicadas a la diapositiva 10. Para modificar un efecto de animación, puede usar. a. el panel de tareas de Animación Personalizada b. el diálogo Efecto Opciones c. la barra de herramientas Formato

19 19 INSTRUCCIONES: Relaciona las columnas anotando en el paréntesis la letra que corresponda a la oración d. Panel de tareas ( ) Muestra el nombre del programa y el nombre de la presentación actual. ( ) Barra que contiene los menús con todas las acciones que podemos aplicar a una presentación. ( ) Se utiliza para poner aclaraciones que le pueden servir al orador de apoyo y no se muestran en la presentación sino únicamente cuando se imprimen las diapositivas. ( ) Para desplegar un menú con el teclado podemos pulsar Ctrl + la letra subrayada del menú. j. Tecla de función directa m. Barra de menús ñ. Barra de desplazamiento. l. PowerPoint ( ) Aparece en la zona izquierda de la pantalla. ( ) Barra que contiene iconos acerca de los comandos inmediatos se pueden ejecutar y se caracterizan por ser los más empleados. ( ) Aparecen sólo cuando la dispositiva no cabe toda la pantalla. ( ) En un menú desplegable tenemos a la izquierda de la opción el icono correspondiente, cuando este existe. ( ) Es una herramienta que incorpora Windows XP para generar diapositivas. ( ) Se puede cerrar PowerPoint con el botón que se encuentra en la barra de menús. s. Barra de título p. Areá de esquema f. Barra de herramientas g. Notas del Orador

20 20 APARTADO II. 25% INSTRUCCIONES: A partir de las siguientes pantallas menciona si corresponde a animación o transición, explica y escribe cada una de las partes de cada una de ellas. Pantalla 1 Pantalla 2 INSTRUCCIONES: Describa lo que se te pide a continuación a) Diferencia entre una transición y una animación b) Diferencia entre un hipervínculo y un botón de acción c) Diferencia entre un estilo y un diseño de diapositiva

21 21 INSTRUCCIONES: Emplea PowerPoint para que realices una animación de una autopista, aplica efectos de animación, transición e intervalos de tiempo, agrega sonidos para hacer más realista tu animación.

22 22 UNIDAD III HTML HTML, HyperText Markup Language, es un lenguaje simple utilizado para crear documentos de hipertexto para WWW. El HTML es un lenguaje de marcadores o tags, que se insertan en un documento de texto. Los tags son indicaciones que silenciosamente le dicen al navegador qué hacer. El navegador lee las instrucciones y despliega o ejecuta lo que se le indica. Al conjunto de instrucciones que definen una página Web se le llama código fuente Los tags son por lo general palabras en inglés (por ejemplo body), o abreviaturas (por ejemplo p que significa párrafo). Se distinguen del resto del texto porque están encerrados entre los símbolos < y >. La primera regla de HTML es muy simple: Los tags siempre van en parejas. Por ejemplo, si utilizo el tag <h1> para comenzar un encabezado, debo utilizar el tag </h1> para terminarlo. Habrás notado que se utiliza una diagonal/ en el segundo tag. La diagonal distingue al tag que cierra (con diagonal), del tag que abre (sin diagonal). Ejemplo: <b> Este texto se mostrará en negrita </b> El tag inicial <b> activa la orden de colocar el texto en negritas y el tag final </b> la desactiva. Como en toda regla, hay algunas excepciones: no todos las tags requieren la marca de cierre y se denominan marcas abiertas. Ejemplo: Para indicar un salto de línea en un texto, la etiqueta es la siguiente: Con este tag se insertará un salto <br> entre el texto pasado y éste. Estructura general de una página Y te preguntarás y dónde se codifica éste lenguaje?, se puede realizar en programas específicos tales como Dreamweaver o en un simple editor de texto como el Bloc de notas, y para que sea reconocido como una página Web es necesario guardar el archivo con la extensión.html

23 23 La estructura general de un código html es la siguiente: Todas las páginas HTML comienzan con el tag <html> y terminan con el tag </html>. Esta sección limita el documento e indica que todo lo que está dentro de los marcadores se encuentra escrito en este lenguaje. En medio de estos dos tags globales hay dos secciones generales: la cabeza <head> y el cuerpo <body> del documento. En la cabeza (que está limitada por los tags <head> y </head>) se pone información que no aparece directamente en el interior de la página, como el título de la ventana (delimitado por los tags <title> y </title>). Sólo puede haber un título por documento, corto y significativo. En el cuerpo del documento (limitado por lo tags <body> y </body>) se encierra todo lo que aparecerá en la página, es decir, todo el contenido.

24 24 Otra de las características del hmtl, es que cada uno de sus tags tienen propiedades o atributos que pueden ser compartidas con otras etiquetas, y estas definen las características propias de cada una de ellas. <BODY> Esta es la que define los atributos de la página. En estos se incluye: el color del fondo, la imagen de fondo (si hay alguna), el color del texto, el color de los enlaces, el color de los enlaces visitados y los enlaces activos, dentro de esta etiqueta esta la mayoría del contenido de tu página web. ATRIBUTOS: BGCOLOR: Color de fondo de la página. BACKGROUND: Imagen de fondo. TEXT: Color del texto. LINK: Color de los enlaces. VLINK: Color de los enlaces visitados. ALINK: Color de los enlaces activos. Ejemplo: <body bgcolor="red" background="imagen.jpg" text="white" link="green" vlink"green" alink="blue"> Este código indica que el fondo de la página estará en rojo, que tendrá de fondo una imagen jpg, el color de texto será blanco, el color de los enlaces se encontrará en color verde y cuando ya se hayan revisado los enlaces el color será azul y no morado como comúnmente se visualiza en cualquier página. ETIQUETAS COMUNES <BR> Un salto de linea que indica que la linea debe terminar aqui. <H1>Este es un encabezado</h1> Los encabezados pueden ser creados utilizando las etiquetas <H1> a la <H7>. <P> Esto comienza un nuevo párrafo. </P> Esto termina el párrafo. <B> El texto entre estas etiquetas será puesto en negritas. </B> <U> El texto entre estas etiquetas será subrayado </U> <I> El texto entre estas etiquetas será italizado. </I>

25 25 LISTA DESORDENADA Para que una lista sea desordenada, sus elementos deberán encontrarse entre las etiquetas <ul> y </ul>. A través del atributo type es posible elegir el tipo de viñeta, que puede ser circle (círculo), disc (disco) o square (cuadrado). Por ejemplo, para insertar la siquiente lista: o o o Perro Gato Periquito Habría que escribir: <ul type="circle"> <li>perro</li> <li>gato</li> <li>periquito</li> </ul> LISTA ORDENADA Para que una lista sea ordenada, sus elementos deberán encontrarse entre las etiquetas <ol> y </ol>. A través del atributo type es posible elegir el tipo de numeración, que puede ser 1 (números), a (letras minúsculas), A (letras mayúsculas), i (numeros romanos en minúsculas) o I (números romanos en mayúsculas). Por ejemplo, para insertar la siquiente lista: i. Perro ii. Gato iii. Periquito Habría que escribir: <ol type="i"> <li>perro</li> <li>gato</li> <li>periquito</li> </ol>

26 26 ANIDAMIENTO DE LISTAS Es posible anidar listas dentro de otras. Estas listas pueden ser tanto desordenadas como ordenadas. Por ejemplo, para insertar la siquiente lista: 1. Lunes Ingles Frances 2. Martes 1. Ingles A. Correccion de ejercicios B. Proponer ejercicios <ol> </ol> <li>lunes <ul type="square"> <li>ingles</li> <li>frances</li> </ul> </li> <li>martes <ol> <li>ingles</li> <ol type="a"> <li>correccion de ejercicios</li> <li>proponer ejercicios </li> </ol> </li> </ol> </li> FONT Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Para ello, podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta: Atributo Significado Posibles valores face fuente nombre de la fuente, o fuentes color color del texto número hexadecimal o texto predefinido size tamaño del texto valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamaño por defecto, añadiendo + o - delante del valor

27 27 Por ejemplo, para insertar el texto Comic San tamaño en 4 y color en verde: Bienvenidos Habría que escribir: <font color="green" size="4" face="comic Sans MS, Arial, MS Sanserif"> Bienvenidos </font> IMG Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual. Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen ha de especificarse a través del atributo src. Por ejemplo, para insertar la siguiente imagen: Habría que escribir: <img src="imagenes/logo_animales.gif"> Teniendo en cuentra que la imagen se llama logo_animales.gif y que está dentro de la carpeta imagenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento). Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los documentos html se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar imagenes, o una carpeta destinada a almacenar archivos de audio, etc.

28 28 Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores. Los formatos más utilizados son el GIF y el JPG, que a pesar de ser imágenes de menor calidad que las imágenes BMP, son más recomendables debido a que ocupan menos memoria. Vamos a ver un poco más sobre estos formatos: Formato GIF: Utilizan un máximo de 256 colores, y son recomendables para imágenes con grandes áreas de un mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten definir transparencias y animación. Formato JPG: Las imágenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el tamaño de la imagen es mayor y tarda más en descargarse se utilizan más para fotos. Puedes incluir imágenes en otros formatos, que podrán ser visualizadas en algunos navegadores. Este es el caso de las imágenes BMP y PNG. Puedes cambiar el formato de las imágenes mediante la utilización de algún programa de tratamiento de imágenes, como pueden ser Fireworks, Photoshop, Corel Draw, etc. Por ejemplo el Fireworks de Macromedia tiene una opción, exportar a tipo gif que reduce considerablemente la ocupación de la imagen sin perder en calidad (siempre que la imagen se adecue al formato). Dependiendo del programa utilizado existirá una mayor o menor cantidad de opciones a la hora de modificar las imágenes. Para realizar modificaciones sencillas, como la de recortar las imágenes y cambiar los colores, puedes utilizar incluso el programa Paint de Windows. La etiqueta IMG puede acompañarse de los siguientes atributos: 1. SRC=Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar. 2. ALIGN= Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea. Los tres valores posibles son los ya conocidos left, right, top, middle y bottom. 3. ALT= Es la alternativa que se estableció cuando todavía existían visualizadores de solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratón por encima. 4. WIDTH =Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar. 5. HEIGHT=Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el alto de la imagen. 6. BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen.

29 29 TABLE Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna. Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla. Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas deberán insertarse entre las etiqetas <table> y </table>. Por ejemplo, para crear una tabla con cinco filas escribiríamos: <table> <tr>...</tr> <tr>...</tr> <tr>...</tr> </table> Para crear una tabla no basta con especificar el número de filas, es necesario también especificar el número de columnas. Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos especificar el número de celdas por fila, que equivale a especificar el número de columnas por fila. Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas <tr> y </tr>. Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de las celdas. Por ejemplo para generar la siguiente tabla: Sábado Curso HTML <table border="1"> <tr> <td>sabado</td> <td>domingo</td> </tr> <tr> <td>curso HTML</td> <td>curso Dreamweaver</td> </tr> <tr> <td>curso Frontpage</td> <td>curso Flash</td> </tr> </table> Domingo Curso Dreamweaver Curso FrontPage Curso Flash

30 30 Es posible modificar los siguientes atributos de una tabla: Atributo Significado Posibles valores width height cellpadding ancho de la tabla altura de la tabla espacio entre el contenido de las celdas y el borde un número, acompañado de % cuando se desee que sea en porcentaje un número, acompañado de % cuando se desee que sea en porcentaje un número cellspacing espacio entre celdas un número border grosor del borde un número align alineación de la tabla dentro de la página left (izquierda) right (derecha) center (centro) bgcolor color de fondo número hexadecimal background imagen de fondo número hexadecimal bordercolor color del borde número hexadecimal Es posible modificar los siguientes atributos de una celda: Atributo Significado Posibles valores width height align valign ancho de la tabla altura de la tabla alineación horizontal del contenido de la celda alineación vertical del contenido de la celda un número, acompañado de % cuando se desee que sea en porcentaje un número, acompañado de % cuando se desee que sea en porcentaje left (izquierda) right (derecha) center (centro) baseline (línea de base) bottom (inferior) middle (medio) top (superior) bgcolor color de fondo número hexadecimal background imagen de fondo número hexadecimal bordercolor color del borde número hexadecimal También es posible modificar estos atributos de toda una fila, especificándolos en la etiqueta <tr>, en lugar de en la etiqueta <td>. Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen más prioridad los atributos establecidos para una fila que los establecidos para toda la tabla.

31 31 HIPERENLACES Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo. Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>. 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. Por ejemplo para realizar la siguiente vinculación a la página de Youtube.com, el código sería: <a href= > </a> Youtube,com Existen diferentes formas de expresar una referencia a una página a través del atributo href. Referencia absoluta: Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en Internet, en este caso hay que empezar la referencia por el nombre del dominio y algunas veces el nombre de la página. Si no se escribe el nombre de la página se cargará la página de inicio asociada al dominio. Por ejemplo, " tendrá el mismo efecto que " Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común, estando todos ellos dentro de una misma carpeta, conocida como carpeta raíz del sitio. Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra directamente dentro de la carpeta raíz del sitio, para insertar el enlace: Habría que escribir: <a href="/t_4_1.htm">enlace a Tema 4: Hiperenlaces</a> Observa como aparece el símbolo "/" delante del nombre del documento. Esta barra inclinada indica la carpeta raíz del sitio. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la carpeta raíz del sitio, habría que escribir: <a href="/tema4/t_4_1.htm">enlace a Tema 4: Hiperenlaces</a>

32 32 Punto de fijación o anclas: Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínculo debe ser "nombre_de_documento#nombre_de_punto". Habría que escribir: <a href="t_4_1.htm#tipos">punto de fijacion Tipos de enlaces</a> Teniendo en cuenta que el documento se llama t_4_1.htm y el punto de fijación se llama tipos. Los atributos relacionados a esta son: Href= Dirección del vínculo Name= Establece un ancla Target= establece el destino de un vínculo dentro de un Frameset o Marco 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. El navegador Internet Explorer puede reconocer la etiqueta <bgsound>, que se utiliza para incluir sonido de fondo. Esta nueva etiqueta no necesita etiqueta de cierre. 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>.

33 33 VIDEO Y AUDIO 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. 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. A la derecha tienes un ejemplo de un archivo de video, para el que se muestran los controles de video. Puedes reproducirlo pulsando sobre los controles. 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. 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 estrue, se ocultan los controles de reproducción. Por ejemplo, para insertar sonido de fondo se podría escribir:

34 34 <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" > MARCOS O FRAMESET Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia. Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una página con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento perros.htm. Para poder visualizar la página de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es el que en este caso contiene el grupo de marcos. El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que vemos solamente algunos conteptos básicos y ejemplos sencillos. Como hemos visto si queremos utilizar marcos debemos crear una página con la definición del conjunto de marcos (en el ejemplo anterior la página marcos.htm). Los conjuntos de marcos se definen a través de las etiquetas <frameset> y </frameset>, que van después de la etiqueta <head>. A través de estas etiquetas se indica el número de marcos en que se dividirá la ventana, cada uno de los cuales será una especie de subventana. Cuando se insertan las etiquetas <frameset> y </frameset> no hay que insertar las etiquetas <body> y </body>, ya que el cuerpo del documento será el cuerpo de las páginas que se carguen en cada uno de los marcos del conjunto de marcos.

35 35 Los atributos que pueden especificarse sobre la etiqueta <frameset> son los siguientes: Atributo Significado Posibles valores cols rows frameborder tamaño de cada una de las columnas en que se divide el documento tamaño de cada una de las columnas en que se divide el documento aparece o no el borde de los marcos un número (acompañado de % cuando se desee que sea en porcentaje) por cada columna, separados por comas. un número (acompañado de % cuando se desee que sea en porcentaje) por cada fila, separados por comas. yes no framespacing separación entre los marcos un número border grosor del borde un número, acompañado de % cuando se desee que sea en porcentaje bordercolor color del borde número hexadecimal También es posible incluir asteriscos como valores para los atributos cols y rows. Este valor indica que dicha fila o columna ocupará todo lo que quede de ventana o subventana. Cuando existan varias columnas o filas con este valor, se repartirán de forma equitativa lo que quede de ventana. Para indicar qué documento se cargará en cada uno de los marcos habrá que insertar la etiqueta <frame> por cada uno de los marcos de la ventana. Estas etiquetas estarán entre las etiquetas <frameset> y </frameset>, y no necesitan etiqueta de cierre. Es posible modificar los siguientes atributos de un marco: Atributo Significado Posibles valores frameborder aparece o no el borde del marco yes o 1 no o 0 name nombre del marco cualquier valor noresize marginwidth marginheight scrolling si aparece, el usuario no podrá redimensionar el tamaño de este marco anchura del margen con respecto a los bordes del marco altura del margen con respecto a los bordes del marco se mostrará o no la barra de desplazamiento cuando la página del marco no se pueda visualizar completamente en él no puede tomar valores un número, acompañado de % cuando se desee que sea en porcentaje un número, acompañado de % cuando se desee que sea en porcentaje yes no auto src documento que se cargará en el marco ruta y nombre del documento

36 36 EJERCICIOS DE EVALUACIÓN DE HTML INSTRUCCIONES: Relaciona ambas columnas colocando en el paréntesis la respuesta correcta. 1. Etiqueta que permite vincular imagenes ( ) bakcground 2. Etiqueta que permite manipular el color de la página ( ) <p></p> 3. Etiqueta que permite manipular atributos de la letra ( ) img 4. Etiqueta que permite poner viñetas ( ) embed 5. Etiqueta que permite poner números ( ) bgcolor 6. Etiqueta que permite incrustar imágenes ( ) bgsound 7. Etiqueta que permite vincular sonido ( ) font 8. Etiqueta que permite vincular video ( ) &ñtilde 9. Etiqueta que permite poner una imagen a toda la página ( ) ol 10 etiqueta que permite crear tablas ( ) color 11. Etiqueta que permite acentuar 12. Etiqueta que permite poner ñ ( ) face 13. Etiqueta que permite poner letras negritas ( ) a href 14. Instrucción que permite ingresar un párrafo ( ) size 15. Atributo de letra que permite cambiar el color ( ) ul 16. Atributo de letra que permite cambiar la fuente ( ) table 17. Atributo de letra que permite cambiar el tamaño ( ) &letraacute INSTRUCCIONES: Desarrolla los siguientes códigos HTML para desplegar lo que se pide a continuación, haz uso de la correcta escritura (identación). 1. Genera la siguiente tabla Nombre Dirección Mail Foto Juan Rubalcaba Av de las Conchas 325 juanito@yahoo.com Col.Nápoles Andrea Perales Calle Flores Muertas 1987 Col. Buenavista Andrea_p@hotmail.com

37 37 Consideraciones: A. La imagen de Juan se encuentra en una ruta absoluta en: B. La imagen de Andrea se encuentra en una carpeta de fotos relativa al sitio donde esta la página, el nombre de la imagen se llama rostros345.gif C. Los Mail s deberán estar enlazados directamente a los correos ahí mencionados. 2. Crear el siguiente marco y enlázalo a las siguientes páginas que se encuentran en la misma carpeta. Enca.html Pagina1.html Pie.html 3. Escribe el código para poner el sonido chismes.wav en un archivo html que se encuentra en mis documentos

38 38 4. Genera el código para el siguiente listado compleja: MATERIAS DE LA CAPACITACIÓN DE INFORMATICA a. CUARTO b. QUINTO c. SEXTO TAPS LÓGICA DAPI I BASE DE DATOS I PIAE DAPI II REDES BASE DE DATOS II 5. Genera el código para crear dos anclas para llegara a los apartados introducción y desarrollo. 6. Genera el código para incrustar el video clock.avi que se encuentra en la siguiente dirección y el archivo html que se creará se encontrara en mis documentos. Para mayor referencia revisar la página web