Actividades tema 9

Tema 9 – Creación de páginas web Informática 4ºESO
Colexio Nosa Señora de Lourdes
ACTIVIDADES TEMA 9: CREACIÓN DE PÁGINAS WEB
CREACIÓN DE UNA PLANTILLA A PARTIR DE UNA WEB CON NVU
1. Crea una plantilla para una web usando una como modelo una página ya
existente. Para ello los pasos a seguir son:
- Descarga el programa Nvu. En el menú principal selecciona File/Open Web
location y escribe en el cuadro de diálogo que se abre la dirección de la web que
quieres usar como plantilla (por ej. la del colegio o alguna que te guste) y pulsa
Create.
- Se cargará la página y la mostrará en una nueva pestaña pudiendo hacer los
cambios deseados sobre la misma: sustituir el texto y el formato del título,
modificar el índice y los contenidos…llevando a cabo todos estos cambios de
manera análoga a como se haría en un editor de texto convencional. Intenta hacer
tú mismo algún cambio.
- Accede a Format/Page Title and Properties. En el cuadro de diálogo que aparece
cambia el título (no pongas tildes) y la descripción y marca la casilla this page is a
template para indicar que esa página es una plantilla.
- Guarda la plantilla seleccionando File/Save as. La extensión del fichero generado
deberá ser .mzt (tipo HTML templates).
NOTA: Con el programa FrontPage también se podría llevar a cabo (archivo/nuevo/a
partir de una página existente) pero la diferencia es que con FrontPage la página debe
estar guardad en el disco del ordenador y no coge páginas directamente de Internet,
mientras que Nvu permite ambas opciones.
EDITAR CÓDIGO HTML
2. Edita y modifica el código HTML de una página del CD y observa cómo afectan los
cambios realizados. Los pasos a seguir son:
- Selecciona la opción open File y abre el archivo Página ejemplo.HTML del CD en
la unidad 9 y pulsa en abrir. Observa esta página (en el navegador de Internet)
para luego comparar cómo va a quedar después de los cambios.
- En la parte inferior de la ventana de Nvu selecciona source apareciendo el código
HTML de la página.
- En la línea 9, después de la etiqueta <body> inserta una nueva línea para insertar
un título en negrita subrayado y con color azul. Para ello, escribe lo siguiente:
ESTO ES UNA PRUEBA
- Añade otra línea a continuación para insertar un salto de línea y escribe .

- Inserta otra línea para añadir un hipervínculo a la web de SM y escribe el siguiente
texto: <a href=http://www.group-sm.com/inicio.asp>Acceso a la página web de
SM</a>
- Añade otra línea con un salto de línea .
- Incluye otra línea para poner un texto en movimiento con lo siguiente:
<marquee>¿se mueve el texto?</marquee>
- Añade otra línea con un salto de línea como en los casos anteriores.
- Guarda el documento con otro nombre en tu ordenador (File/Save as).
- Ahora observa los cambios que has producido en la página pulsando en la pestaña
Normal de la parte inferior de la ventana de Nvu. No verás ni la marquesina (texto
en movimiento) ni el calendario pues al ser elementos dinámicos no se muestran.
Para poder observarlo todo tal y como se verá en el navegador selecciona
File/Browse File o el icono correspondiente (lupa con la palabra Browse debajo).
Aparecerá un cuadro de diálogo en el que debes pulsar en el botón Launch
application. Se abrirá el navegador seleccionado por defecto en tu ordenador con
la página en la que podrás ver el resultado final.
- Podrás ver que el calendario se solapa con el texto CALENDARIO DEL MES. Para
evitarlo, hay que editar el código HTML de nuevo. Vuelve a la ficha source del
documento y sitúate en la línea 26: en lugar de <div style="position: absolute;
top: 200px; left: 200px;"> escribe <div style="position: relative;">
- Guarda todos los cambios y visualiza la página en tu navegador.
3. Ahora introduce tú mismo cambios modificando código HTML. Ahora, con ayuda
de las etiquetas que aparecen en la fotocopia, intenta introducir las siguientes
modificaciones en la página anterior (mejor que vuelvas a abrir el documento del
CD de nuevo). Anota en la líbreta la línea y el código HTML que has escrito.
- Introduce el título “CLASE DE INFORMÁTICA 4ºESO” que debe aparecer en negrita
subrayado con tamaño de letra 24 color rojo, times new roman y centrado.
- Debajo de este título debe aparecer una línea en movimiento con el nombre del
colegio y la dirección “Colexio Nosa Señora de Lourdes. Centro de Secundaria.
Santabaia, nº 42 – Matalobos” en itálica y tamaño 5 y en comic sans MS.
- En la línea siguiente debe aparecer el texto (arial, centrado y tamaño 2) “Visite el
sitio web del centro” apareciendo dicho texto vinculado a la web del centro.
- A continuación, y tras un salto de línea, debe figurar una lista que funcionará
como menú donde aparezcan los siguientes elementos de lista: apuntes,
actividades, recursos, fechas importantes. Estos elementos deben aparecer en
negrita e itálica usando el tipo de letra y tamaño que elijas.
- Introduce también usando etiquetas HTML un vídeo (por ej. alguno que
encuentres como vídeo de muestra en el ordenador) de manera que el vídeo

aparezca incrustado en la página web, alineado a la derecha y con un tamaño de
ventana de 200 de alto y 250 de ancho.
- Finalmente debe figurar, tanto el título como el calendario del mes centrado.
- Guarda todos los cambios y visualízalos.
-
INSERCIÓN DE ELEMENTOS MULTIMEDIA EN LA WEB
4. Inserción de una imagen con hipervínculo en la plantilla web. Por ejemplo la
imagen de un sobre del icono de Facebook y que al pinchar nos conduzca a la
página de entrada, o de un sobre que conduzca a la página de gmail o hotmail (o
cualquier otro tipo de imagen vinculada que prefieras)
- Ejecuta Nvu y pincha en File/New. Se mostrará un cuadro de diálogo para
seleccionar el tipo de archivo. Marca la opción a new document based on a
template y pulsa choose file para localizar el archivo multimedia. Selecciona el
archivo de plantilla que usaste en la actividad 1 y pulsa Create.
- Pulsa en el icono image y en la ventana que aparece selecciona la pestaña
Location. Escoge la imagen que desees añadir en la plantilla (que debes guardar
previamente en el ordenador) pulsando en Choose File. Especifica un título en
Tooltip y en alternate text que aclare a donde conduce la imagen.
- Selecciona la pestaña Link y especifica la ruta web que se va a visualizar al pulsar
en la imagen.
- Guarda los cambios y comprueba los efectos en el navegador.
5. Introduce imágenes en la página del ejercicio 3. Vuelve abrir la página del ejercicio
3 y haz los siguientes cambios:
- Sitúate al principio de la página e inserta la imagen de la cabecera del blog de
secundaria del colegio y vincúlala a la página del blog de secundaria (http://b-
s.colexionslourdes.es/) Indica en el tooltips y en el Alternate la vinculación.
- Inserta al final de la lista la regla horizontal que has creado con GIMP en el tema 7. Y
seguidamente la flecha.
- Prueba también a insertar un GIF animado o una cabecera animada de las creadas
en el tema 7.
ANÁLISIS DE LA ACCESIBILIDAD DE UNA WEB EN EL NIVEL A
6. Comprueba si la web del colegio cumple los requisitos mínimos de accesibilidad
que se fijan para el nivel más bajo (A).
- Accede a la web http://www.tawdis.net/

- Selecciona la pestaña WCAG 1.0 y en el cuadro de texto etiquetado como URL
escribe la dirección de la web http://www.colexionslourdes.es/web/
- Selecciona el nivel de análisis A y pulsa el botón analizar.
- Aparecerá el resultado en la pantalla. En la parte superior derecha de la página se
indican con interrogación todos aquellos elementos que no se cumplen las pautas
y se ofrecen sugerencias. En la parte central de la página se muestra la web
indicando con interrogantes todos los aspectos a mejorar. Pulse uno de los
interrogantes y aparecerá un texto explicativo. Y al final del todo aparece un
resumen de los problemas detectados.
- Escribe al menos 5 problemas detectados en la página.

Actividades tema 9

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Destacado

Destacado (20)

Similar a Actividades tema 9

Similar a Actividades tema 9 (20)

Más de mariavarey

Más de mariavarey (20)

Actividades tema 9