TALLER 2 PARTE I COIS-408 Prof. Pedro M. Moreno – Enero 2010 Universidad Metropolitana – Recinto de Cupey 1.

Presentación del tema: "TALLER 2 PARTE I COIS-408 Prof. Pedro M. Moreno – Enero 2010 Universidad Metropolitana – Recinto de Cupey 1."— Transcripción de la presentación:

1 TALLER 2 PARTE I COIS-408 Prof. Pedro M. Moreno – Enero 2010 Universidad Metropolitana – Recinto de Cupey 1

2 C REAR Y E DITAR UNA PÁGINA WEB C REAR Y E DITAR UNA PÁGINA WEB O BJETIVOS DEL TALLER Editar - Adaptar un texto a las normas de estilo de una publicación (definición académica). En este taller vamos a trabajar con lo siguiente: Conocer los elementos que componen una página web Crear una página web utilizando un editor básico (Notepad) Conocer las etiquetas de HTML y sus funciones Definir el texto para la página web Guardar una página web como un archivo HTML Utilizar un navegador de páginas para ver el ‘website’ Mejorar la presentación de la página web Imprimir la página web y el código 2

3 P ÁGINA WEB ( EJEMPLO DE LA CLASE ) – ORIGINAL 3

4 E LEMENTOS DE UNA PÁGINA WEB Title Image Text link Heading Background Image links Paragraph Body http://thecervantesgroup.com/index.asp (ver detalles) 4

5 N OTEPAD 5

6 E TIQUETAS DE HTLM Y SUS FUNCIONES 6 Hacer ejercicio página 38

7 C REAR LO SIGUIENTE (N OTEPAD ) 7 Headings (1, 2, 3, 4, 5, 6) Paragraph(s) Crear una lista Ordenada No-ordenada Lista de definiciones Guardar el archivo (html)

8 E JEMPLOS : 8 Ver en NotepadVer en el navegador

9 EJERCICIO DE NOTEPAD 1. Completar la página web (ORIGINAL) 2. Determinar las etiquetas de HTML utilizadas en el ejercicio 3. Definir la función de cada una de las etiquetas 4. Entregar el ejercicio Taller 2 (ORIGINAL) con fecha de la clase 9

10 I MÁGENES PARA LAS PÁGINAS Tienen como propósito mejorar la apariencia de las páginas de web y hacerlas más interesantes y atractivas. Pueden ser utilizadas para agregarle un color de trasfondo a la página, para organizar la página, para clarificar algún detalle en el texto, servir de enlace entre páginas. También se pueden utilizar para seccionar la página web como una regla horizontal o pueden ser elementos direccionales que le permitan al visitante navegar a través del “website”. 10

11 T IPOS DE IMÁGENES GIF – “Graphics Interchange Format”; tienen una extensión de archivo de.gif; se graba utilizando una técnica de compresión para hacerla más pequeña y poder bajarla en la internet. JPEG – “Joint Photographic Experts Group”; utiliza como extensión de archivo.jpg,.jpe, o.jpeg; también utiliza una técnica de compresión para grabarse; se utiliza para imágenes complejas como fotografías y establecen un balance entre la calidad de la imágen y su tamaño ya que soporta más colores y mayor resolución que otras imágenes. PNG – “Portable Network Graphics”; la extensión es.png o.ping; también comprime las imágenes para permitir colores múltiples y resoluciones; es el tipo de imágen estandárizado por el consorcio de www como imágen alterna del formato GIF; los navegadores nuevos utilizan este nuevo formato de imágenes. 11

12 A TRIBUTOS DE LAS IMÁGENES AtributoFunción AlignControla el alineamiento de la imágen Puede seleccionar entre “bottom”, “middle”, “top”, “left”, “right” o “center” AltIndica un texto alterno para desplegarse cuando la imágen ha sido cargada BorderDefine el ancho de un borde HeightDefine el alto de la imágen Incrementa el tiempo para levantar la imágen HspaceDefine el espacio horizontal que separa la imágen del texto SrcDefine la dirección de la imágen a ser cargada VspaceDefine el espacio vertical que separa la imágen del texto WidthDefine el ancho de la imágen Incrementa el tiempo para levantar la imagen 12

13 P ROYECTO 2- A Editar una página web: 1. Utilizar el archivo del sample_2(apply2-1.htm) para editarlo. 2. Examinar el código del html y anotar sus comentarios para llevar a cabo los arreglos Añadir definiciones a los elementos de la lista Añadir imágenes para cada uno de los elementos de la lista Mejorar la apariencia de la página 3. En Notepad, corregir los errores para mejorar la apariencia de la página con la entrada del nuevo código de html. 4. Guardar los cambios realizados y revisar toda la página web 5. Ver los cambios a través de un navegador y mostrar al profesor 6. Entregar el código y el “layout” de la página web con la fecha de la clase. 13

14 P ROJECTO 2- B Crear una página de internet con lo siguiente: 1. Encabezado de página “Conceptos de Internet” 2. Crear una división entre el encabezado y el resto de la página 3. Crear 2 subtemas: Términos claves, y Elementos de una página de internet 4. Incluir las definiciones en cada concepto e imágenes para realzar la apariencia de la página 5. Ver la página a través del navegador y mostrar al profesor 6. Entregar el código html y el “layout” de la página con la fecha de la clase 14

15 PARTE II C REACION DE PAGINAS WEB CON ENLACES, IMÁGENES Y FORMATO DE TEXTO Proyecto 3 – Plantas de Puerto Rico Ej: Plantas del desiertoPlantas del desierto Tabla de referencia Proyecto 3 Discusión del contenido (ver copia) Imprimir la página o el web site y el código de la página 15