PRÁCTICA 2. AMPLIAR LA WEB

Transcripción

1 PRÁCTICA 2. AMPLIAR LA WEB Ejercicio 1. Amplia la página Web que diseñaste en la práctica 1 con los siguientes elementos: fondos, marquesinas, tablas, hipervínculos y vídeos youtube. PASOS A SEGUIR 1. Abre con el editor Nvu la Web que realizaste en la práctica anterior. Archivo > Abrir archivo > selecciona la carpeta donde tienes guardada tu página Web. Para tener más ordenada la carpeta crea otra carpeta llamada IMÁGENES dentro de la carpeta Mi Web toma todos los archivos de imágenes y muévelos a la carpeta IMÁGENES. 2. Poner una imagen de fondo a la Web. Minimiza Nvu y accede a la dirección Web Ve al apartado donde se pueden capturar fondos. Para capturar un fondo que te guste pulsa con el botón derecho sobre el y selecciona Guardar imagen como, es conveniente dar un nombre al fondo y guardar el archivo en la carpeta C:\ Mi Web \ IMÁGENES. 3. Cambia el fondo de tu página por el que has cogido de Internet, para ello, haz clic en Formato > Colores y Fondo de la página, haz clic en Elegir archivo, busca tu imagen de fondo en tu carpeta de trabajo, haz clic en ella y finalmente haz clic en Aceptar. 4. Insertar marquesina. Una marquesina es un rótulo de letras móvil. Las marquesinas no se pueden insertar a través del editor gráfico de Nvu, es 1

2 DTO. TECNOLOGÍA necesario hacerlo a través del código ubicándonos en la pestaña de Código Fuente de la barra de vistas de edición. Para crear una marquesina hay que insertar las etiquetas <MARQUEE> y </MARQUEE>. Entre dichas etiquetas han de introducirse los elementos que se desea que aparezcan en la marquesina. Ejemplos (utiliza al menos uno de estos ejemplos en tu Web): <MARQUEE BEHAVIOR=ALTERNATE>Este texto se mueve a un lado y otro, sin desaparecer</marquee> <MARQUEE> Texto que se desplaza </MARQUEE> <MARQUEE BGCOLOR="#FF7070"> Esta marquesina tiene un fondo de color rosa </MARQUEE> <MARQUEE SCROLLAMOUNT=50> Doy saltos grandes </MARQUEE> Para ver el resultado de las marquesinas es necesario hacer clic en el botón Inserta el siguiente código HTML para obtener una línea horizontal: <hr> 5. Insertar una tabla. Las tablas nos permiten organizar la información con la garantía de que se visualizará correctamente en todos los navegadores Web, ya que la tabla actuará como una estructura rígida que impedirá que los objetos se descoloquen. Pasos a seguir: - Hacer clic sobre el botón Especificar el tamaño y la estructura de la tabla. Si la tabla va a servir como estructura para la página, conviene especificar el tamaño de la tabla como el 100% de la página, e indicar que no se quiere visualizar el borde. Hacer clic en aceptar. Para modificar el color de la tabla o celda ir al menú: tabla > color de fondo de la tabla o celda. Inserta una tabla como la de la figura en tu página Web: 2

3 6. Unir celdas de la tabla: Seleccionar las celdas que se quieran unir. Abrir el menú Tabla y seleccionar la opción Unir celdas seleccionadas. 7. Insertar o eliminar filas o columnas de una tabla ya creada: Abrir el menú Tabla y seleccionar la opción Insertar o Borrar según interese. Elegir alguna de las posibilidades que elige el programa: Fila, Columna, Celda 3

4 8. Cambiar el aspecto de la tabla. Una vez creada la tabla es posible modificar sus propiedades: color del fondo, grosor de su borde Para ello, hay que: Situar el cursor en la tabla para activarla. Abrir el menú Tabla y seleccionar las Propiedades de la tabla. Modificar las propiedades que se quiera. Hacer clic sobre el botón Aceptar. 9. Hipervínculos. Los hipervínculos (enlaces) son los elementos de las páginas Web que permiten acceder rápidamente a otras páginas, tanto de la misma Web como de Internet, a documentos guardados en archivos, a otras secciones de la misma página 9.1. Insertar un enlace como texto. Cualquier texto escrito en una página puede ser utilizado como enlace. Procedimiento: Seleccionar el texto que se quiera utilizar como enlace. Hacer clic en el botón. Escribir correctamente la dirección url de la Web a la que se quiere acceder. Hacer clic sobre el botón Aceptar. Los textos utilizados para enlaces se muestran en color azul y subrayado. Guardar la página, abrir el navegador, cargar la página y comprobar que funciona el enlace. - Inserta un enlace de texto para las distintas opciones del menú de la tabla del punto 8 a las siguientes direcciones Web respectivamente: Insertar un enlace como imagen. En este caso la imagen debe estar previamente insertada en la página Web. Procedimiento: Hacer clic sobre la imagen para seleccionarla. 4

5 Hacer clic sobre el botón. Escribir correctamente la dirección url de la Web a la que se quiere acceder. Activar la opción Mostrar el borde si se quiere resaltar la imagen como hipervínculo. Hacer clic sobre el botón Aceptar. Guardar la página, abrir el navegador, cargar la página y comprobar que funciona el enlace. - Inserta un enlace como imagen para la imagen de la tabla del punto 8 hacia la Web Insertar un vídeo yuotube en una página Web. Procedimiento: Ir a la página de youtube donde esta el vídeo. Recoger el código html: En la página de youtube del vídeo que deseéis incrustar aparecerá, como muestro en la imagen, una zona en la que se recoge el código html embebido (embed) para añadir el vídeo a cualquier página. Cópialo. Tenéis que clicar en compartir y seguidamente en "Insertar", os aparecerá un código similar al de la imagen de abajo: "...iframe width..." (ESO ES LO QUE HAY QUE COPIAR) Situarse en la pestaña de "Código fuente": Pegar el código fuente antes copiado en el lugar en el que deseemos que aparezca el vídeo youtube. Comprobar que el vídeo esta donde queremos: Una vez agregado este código, hay que comprobar que realmente se nos ha colocado donde deseamos, para ello hay que hacer clic en el botón 5