DTO. TECNOLOGÍA INFORMÁTICA

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 www.areas.net/colorvivo. 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

DTO. TECNOLOGÍA INFORMÁTICA

2

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):

Para ver el resultado de las marquesinas es necesario hacer clic en el botón

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:

<MARQUEE BGCOLOR="#FF7070"> Esta marquesina tiene un fondo de color rosa </MARQUEE>  

<MARQUEE BEHAVIOR=ALTERNATE>Este texto se mueve a un lado y otro, sin 

<MARQUEE> Texto que se desplaza </MARQUEE>   

desaparecer</MARQUEE> 

 

 

 

<MARQUEE SCROLLAMOUNT=50> Doy saltos grandes </MARQUEE>  

<hr> 

Inserta el siguiente código HTML para obtener una línea horizontal: 

DTO. TECNOLOGÍA INFORMÁTICA

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.

- Modifica la tabla del punto anterior para que tenga el aspecto de la figura:

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 …

- Modifica la tabla del punto anterior para que tenga el aspecto de la

figura:

DTO. TECNOLOGÍA INFORMÁTICA

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.

- Modifica la tabla del punto anterior para que tenga el aspecto de la

figura:

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:

9.2. 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.

www.google.es, www.iesalfaguar.es, www.softonic.es.

DTO. TECNOLOGÍA INFORMÁTICA

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 www.live.com.

10. 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.

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

Tenéis que clicar en compartir y seguidamente

en "Insertar", os aparecerá un código similar al

(ESO ES LO QUE HAY QUE COPIAR)

de la imagen de abajo: "...iframe width..."