TALLER 2 PARTE I COIS-408 Prof. Pedro M. Moreno – Enero 2010 Universidad Metropolitana – Recinto...
15
TALLER 2 TALLER 2 PARTE I PARTE I COIS-408 Prof. Pedro M. Moreno – Enero 2010 Universidad Metropolitana – Recinto de Cupey 1
-
Upload
maria-dolores-romero-olivera -
Category
Documents
-
view
224 -
download
0
Transcript of TALLER 2 PARTE I COIS-408 Prof. Pedro M. Moreno – Enero 2010 Universidad Metropolitana – Recinto...
TALLER 2TALLER 2PARTE IPARTE ICOIS-408
Prof. Pedro M. Moreno – Enero 2010
Universidad Metropolitana – Recinto de Cupey
1
CREAR Y EDITAR UNA PÁGINA WEBCREAR Y EDITAR UNA PÁGINA WEBOBJETIVOS 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
PÁGINA WEB (EJEMPLO DE LA CLASE) – ORIGINAL
3
ELEMENTOS DE UNA PÁGINA WEB Title Image Text link Heading Background Image links Paragraph Body http://thecervantesgroup.com/index.asp (ver detalles) 4
NOTEPAD
5
ETIQUETAS DE HTLM Y SUS FUNCIONES
6
<!DOCTYPE> <html></html> <head></head> <title></title> <body></body> <hn></hn> <p></p> <ul></ul>
<li></li> <hr /> <br /> Hacer ejercicio
página 38
CREAR LO SIGUIENTE (NOTEPAD)
7
Headings (1, 2, 3, 4, 5, 6)
Paragraph(s) Crear una lista
Ordenada No-ordenada Lista de definiciones
Guardar el archivo (html)
EJEMPLOS:
8
Ver en Notepad Ver en el navegador
EJE
RC
ICIO
DE N
OTEPA
D
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
IMÁ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
TIPOS 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
ATRIBUTOS DE LAS IMÁGENESAtributo Función
Align Controla el alineamiento de la imágenPuede seleccionar entre “bottom”, “middle”, “top”, “left”, “right” o “center”
Alt Indica un texto alterno para desplegarse cuando la imágen ha sido cargada
Border Define el ancho de un borde
Height Define el alto de la imágenIncrementa el tiempo para levantar la imágen
Hspace Define el espacio horizontal que separa la imágen del texto
Src Define la dirección de la imágen a ser cargada
Vspace Define el espacio vertical que separa la imágen del texto
Width Define el ancho de la imágenIncrementa el tiempo para levantar la imagen
12
PROYECTO 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
PROJECTO 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ágina3. Crear 2 subtemas: Términos claves, y Elementos
de una página de internet4. Incluir las definiciones en cada concepto e
imágenes para realzar la apariencia de la página5. Ver la página a través del navegador y mostrar al
profesor6. Entregar el código html y el “layout” de la página
con la fecha de la clase 14
PARTE IICREACION DE PAGINAS WEB CON ENLACES, IMÁGENES Y FORMATO DE TEXTO
Proyecto 3 – Plantas de Puerto Rico Ej: Plantas 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
