1

¿Qué es un sitio Web? Es una colección de páginas Web con una dirección única (dichas páginas están enlazadas unas con otras).

Para empezar hay que crear el sitio Web, es decir, la estructura de carpetas donde se irán almacenando los archivos que componen la página Web (imágenes, archivos HTML, hojas de estilo, etc.). Este ejercicio iremos creando una página Web que contendrá información sobre empresas de aviones. Pasos a seguir

1. Debes crear dentro de la carpeta Documentos otra carpeta que llamarás Mis Webs y dentro de ella otra que llamarás web_aviacion (sin acento). En esta última carpeta se almacenarán todos los archivos de nuestro sitio web.

2. Dentro de la carpeta web_aviacion harás otra que llamarás imagenes (sin acento), donde irán todas las imágenes de las páginas Web.

Esta será la estructura del sitio Web “web_aviacion”

NORMAS: Las páginas Web van a ser archivos que finalmente vamos a subir a un servidor y van a estar administrados por él. Por esta razón, existen alguna RESTRICCIONES a la hora de dar nombre a los archivos de páginas Web.

1 - NO USAR ESPACIOS EN BLANCO

2 - NO USAR MAYÚSCULAS

3 - NO USAR SIGNOS DE PUNTUACIÓN EXTRAÑOS: ( , . ) ¿ ? ! ¡ ñ Ç&

4 – NO USAR ACENTOS

Así pues, nombres como logroño.htm, La Rioja.htm, mi página.htm y otros de las mismas características darían problemas una vez subidos al servidor.

Ejercicio 1. La primera página Web.

1. Abre Kompozer, vamos a realizar una configuración del programa. Despliega el menú

Herramientas/Preferencias. En el panel de opciones, sitúate en y marca la

La página principal de un sitio Web siempre tendrá el nombre de index.html.

En la carpeta imagenes estarán las imágenes que salgan en las páginas del sitio Web.

2

siguiente opción (son aspectos técnicos que tienen que ver con el tipo de lenguaje HTML que utilizará el programa para crear las páginas). Pulsa Aceptar.

2. En Kompozer aparecerá ya una página en blanco. Antes de escribir en ella vamos a guardarla:

pulsa el botón de Guardar: .

3. Aparecerá una ventana en la que se te pide el título de la página (el que aparecerá en la barra de título del navegador firefox).

4. A continuación aparecerá la ventana para guardar el archivo.

El nombre deberás ponerle es index (se guardará con extensión .html ya que se trata de una página web) y guardarla en la carpeta web_aviacion.

DIFERENCIA ENTRE EL TÍTULO DE UNA PÁGINA WEB Y SU N OMBRE DE ARCHIVO:

• El Título de una página web se pondrá en la barra de títulos del navegador, y en la pestaña de la página en el navegador:

• El nombre de la página es el nombre con que se guarda el archivo web (index.html).

Una vez guardada la página…

Escribe como título Aviación civil y pulsa Aceptar.

Barra de título

Pestaña de la página Web

3

En la ventana del administrador de sitios pulsa en el icono de

editar sitios y se abrirá la ventana que se muestra abajo:

1. Nombre del sitio. El nombre será Web de aviación.

2. Carpeta del sitio. En este apartado pulsa sobre el botón para seleccionar el directorio o carpeta donde se encuentran los archivos que irás creando (escogerás la carpeta web_aviacion).

3. El resto de datos se pueden dejar en blanco.

4. Pulsa en el botón de Aceptar.

Ejercicio 2. Añadir texto a la página Web. 1. Vamos a escribir el texto en la página web. Abre el archivo de texto que contiene la carpeta

ejercicio2_archivos. Selecciona el texto, cópialo y pégalo en la página de Kompozer:

(NOTA: si no funciona utiliza la opción Editar/Pegar sin formato).

4

2. Vamos a poner un fondo de página, despliega el menú Formato / Colores y fondo de la página. En la ventana que aparece se puede elegir un color de fondo o incluir una imagen como fondo. Escoge la imagen Ejer2_fondo.jpg:

3. Guarda los cambios y pulsa el botón para visualizar la página en el navegador Mozilla firefox.

Ejercicio 3. Modificar textos e imágenes.

Abre con Kompozer la página index.html (que has creado en el ejercicio 2) y realiza lo siguiente:

1. Selecciona el título “Aviones para uso civil” y escoge el tipo de letra “Domestic Manners” (si

no está instalada escoge el tipo de letra que quieras) y un tamaño de la letra grande , negrita y centrado en la página:

2. Con el título seleccionado, despliega el menú Formato / Color del texto… Escoge un color rojo

oscuro.

3. Vamos a insertar una imagen.

Sitúa el cursor al inicio del tercer párrafo y pulsa después el botón y aparecerá el siguiente cuadro de diálogo.

Marca esta opción para indicar que la ruta donde tiene que ir a buscar la imagen es a partir de donde se encuentra la página actual. Es decir: imágenes/Ejer2_fondo.jpg.

5

4. Ajustar la imagen: La imagen aparecerá como un carácter de texto. Hazla más pequeña estirando de los controladores de las esquinas:

5. Vamos a hacer que el texto fluya a un lado de la imagen: pulsa doble clic sobre la imagen y, en

la pestaña Apariencia, elige del desplegable Alinear el texto con la imagen la opción “Fluir por la izquierda”:

6. Seguidamente, selecciona todo el texto desplegando el menú Editar / Seleccionar todo… y

ponlo con alineación justificada . La imagen quedará de la siguiente manera:

Debes pulsar sobre el botón de abrir la carpeta y escoger Ejer3_imagen_entrada.jpg. Marca la opción No usar texto alternativo. Asegúrate que la opción La URL es relativa a la dirección de la página está activada siempre.

Pulsa Aceptar.

Pon además un espacio a izquierda y derecha de 20 píxeles. Añade un borde sólido de 1 píxel.

6

7. Utiliza el botón de insertar imagen para insertar las imágenes de los dos botones: Ejer3_botonEmpresas.gif y Ejer3_botonRegistro.gif.

Ponlas como se indica (las tendrás que centrar en la página).

8. Sitúa el cursor justo antes del botón Empresas y despliega el menú Insertar / Línea horizontal.

9. Sitúa el cursor justo después del botón Registro y despliega el menú Insertar / Línea horizontal.

10. En la parte superior insertaremos una imagen GIF animada. Usarás el botón y el archivo Ejer3_avionVolando.gif .

11. Guarda los cambios y pulsa el botón para visualizar la página en el navegador Mozilla firefox.

7

Ejercicio 4. Tablas. Las tablas permiten organizar y distribuir los espacios de una manera óptima. En este ejercicio se va a crear una página de fabricantes de aviones para listar los modelos con las fotografías se emplearán tablas.

1. Abre Kompozer y crea una página nueva guárdala en la carpeta web_aviacion con el nombre de boeing. Ponle como título el nombre de boeing.

2. Abre el archivo de texto Ejercicio4_textos.txt. Copia y pega la introducción de texto en la página de Kompozer:

3. Dos líneas más abajo insertaremos una tabla que tendrá dos columnas y 8 filas. Pulsa en el

botón para insertar la tabla.

4. Selecciona después las celdas de la 1ª fila y despliega el menú Tabla / Unir celdas seleccionadas.

5. Escribe en la celda que se ha unido el siguiente texto: Tipos más importantes de aviones Boeing:

6. Después copia el texto de cada uno de los tipos de aviones en las celdas de la primera columna.

7. Seguidamente, sitúate en las celdas de la segunda columna y, una a una, ve insertando las imágenes de los aviones (las imágenes las cogerás de la carpeta imagenes).

Pon las siguientes opciones:

En la pestaña “Preciso”, se pondrán 8 filas y 2 columnas y se marcará una anchura del 80% de la ventana y un borde de 12 píxeles.

8

8

8. Pulsa de nuevo el botón de Tabla para que aparezcan las propiedades de la tabla, en la pestaña de Tabla, indica los siguientes valores:

……….

9. Utiliza después el botón para centrar las imágenes en las celdas.

12. Guarda los cambios .

Ejercicio 5. Capas. Trabajar con capas representa gran libertad a la hora de crear páginas Web ya que se pueden colocar los elementos donde se desee.

1. Abre Kompozer y crea una página nueva y guárdala con el nombre empresas. Ponle el mismo texto como título .

Pon 10 píxeles de relleno entre el borde de la tabla y su contenido.

Indica la alineación centrada para que la tabla se centre en la página.

Y un color de fondo celeste

8

9

2. Inserta la imagen Ejer5_imagencentral.jpg.

3. Inserta la imagen Ejer5_Boeing_logo.gif .

4. Hazla más pequeña (aproximadamente a la mitad de su tamaño).

5. Con el logotipo seleccionado, pulsa sobre el icono de creación de capa :

6. Acabamos de poner el logo en una capa:

7. Para quitar la selección de la capa, utiliza las teclas de desplazamiento.

8. Sin nada seleccionado, inserta la imagen Ejer5_airbus_logo.png y luego ponlo en una

capa con el botón de crear capa .

9. Sin nada seleccionado, inserta la imagen Ejer5_cessna_logo.gif y luego ponlo en una

capa con el botón de crear capa .

10. Sin nada seleccionado, inserta la imagen Ejer5_Douglas_logo.gif y luego ponlo en una

capa con el botón de crear capa .

Arrastra este icono para mover la capa, pudiéndola situar donde queramos.

10

11. Sitúa las capas de los logos como se indica:

• Para seleccionar un objeto que está en una capa pulsa dos veces sobre el objeto.

13. Guarda los cambios .

Ejercicio 6. Enlaces. Los enlaces permiten ir navegando por los contenidos del sitio web. El enlace se activa haciendo una pulsación de ratón sobre un elemento, que puede ser un texto, una imagen o un botón (que es una imagen).

El destino del enlace puede ser de varios tipos:

1. Otra página web.

2. Dirección de correo electrónico.

3. Un documento o archivo para descargar.

4. Un enlace interno a la misma página.

Para practicar se van a crear los enlaces a los documentos del sitio web de aviones. Las páginas que aún no existan se crearán en blanco para que se puedan enlazar.

Usando los botones para enviar delante o detrás las capas , ordena los elementos para que se vean como en la imagen de muestra.

Formulario Empresas

11

Pasos a seguir:

1. Crea una página nueva y guárdala con el nombre airbus (en la carpeta que contiene los otros archivos .html del sitio web). Ponle el mismo texto como título .

2. Haz la misma operación para la página que llamarás mcdonnell

3. Crea otra página con el nombre de formulario . Que será para el formulario de registro.

4. Y una última que se llame cessna.

Crear los enlaces o links para páginas web: 5. Abre la página empresas.html.

6. Selecciona el icono de McDonnell Douglas y pulsa el botón (o insertar / enlace…). En la pestaña de Enlace pulsa sobre icono de la carpeta amarilla para buscar el archivo y escoge el archivo mcdonnell.html

7. Haz lo mismo en los logotipos de Cessna, AirBus y Boeing (en la pestaña enlace escoge el

archivo .html correspondiente).

8. Guarda los cambios.

9. Abre el archivo index.html.

10. Inserta un enlace sobre el botón de Empresas y asigna al enlace la página empresas.html.

11. En el botón de Regístrate inserta otro enlace a la página formulario.html.

12

Enlaces de retorno: 12. Abre el archivo empresas.html y sitúa en la página (haciendo una capa) la imagen

Ejer6_volver.gif (que será el vínculo con la página anterior que es index.htm).

Como se indica a continuación:

13. Pon sobre dicha imagen un enlace a la página index.html

14. Prueba en el navegador que funcionan los enlaces introducidos.

Enlaces dentro de una misma página: 15. Abre la página boeing.html.

16. Añade, en la parte superior-derecha de la página, la imagen del botón Ejer6_botonAbajo.gif:

17. Añade, en la parte inferior-derecha de la página, la imagen Ejer6_botonArriba.gif.

13

18. Selecciona el título de la página (Boeing) y pulsa el botón aparecerá un cuadro de diálogo como el que se muestra, escribe el nombre del enlace interno: ir_inicio.

19. Observa que se ha puesto una marca de un ancla (a la que podré “saltar” desde un enlace):

20. Vamos a poner un en el botón que “saltará” a la marca ir_inicio.

21. Selecciona con un simple clic el botón y pulsa después en el botón de

insertar enlace .

22. Escoge, de la lista desplegable de enlaces internos, el único que tenemos (ir_inicio):

y pulsa Aceptar.

23. Guarda los cambios y pulsa el botón para visualizar la página en el navegador Mozilla firefox.

24. Vuelve a la página boeing.html.

25. Sitúa el cursor en la parte inferior de la página, justo antes de la imagen del botón

ir_inicio

Un enlace interno es una marca a la que puedo saltar desde un enlace.

14

26. Pulsa el botón de insertar ancla aparecerá un cuadro de diálogo como el que se muestra, escribe el nombre del enlace interno: ir_final.

27. Observarás que se habrá puesto la marca del ancla o enlace interno:

28. Selecciona con un simple clic el botón “Abajo” y pulsa después en el

botón de insertar enlace .

29. Escoge, de la lista desplegable de enlaces internos, el enlace interno ir_final .

30. Guarda los cambios y pulsa el botón para visualizar la página en el navegador Mozilla firefox.

31. Vuelve a la página boeing.html.

32. Incluye un botón para volver a la página empresas.html (tendrás que insertar sobre él un enlace que vaya a la página empresas.html):

33. Prueba los enlaces en un navegador.

15

Ejercicio 7. Crear hojas de estilo con Kompozer ¿Qué ES UN ESTILO?

Un estilo es un conjunto de características de texto (fuente, color, tamaño, sangría...) a las que se les pone un nombre para identificarlas conjuntamente.

Una hoja de estilos o CSS ("Cascade Style Sheet"), es un conjunto de reglas y características que, aplicadas a una página Web o a un conjunto de ellas, pueden modificar su apariencia.

Una hoja de estilos puede estar contenida en la misma página Web donde se utiliza o puede estar definida en un archivo aparte. De la segunda forma, podemos definir estilos para todo el sitio Web.

Pasos a seguir: 1. Abre el archivo de texto Ejercicio7_textoAirBus.txt y copia el texto en la página de

airbus.html, en Kompozer.

2. Deja la hoja sin nada seleccionado.

3. Para crear la hoja de estilo pulsa el botón :

La hoja de estilo es un archivo con extensión .css que se almacenará en la misma carpeta o directorio donde se encuentren las páginas Web del sitio.

Las páginas Web se enlazarán al archivo de hoja de estilos, de esa manera se podrán aplicar a todas las páginas Web los estilos que

crearemos.

16

Por defecto si creamos una regla de estilo en esta pantalla, lo hará en una hoja de estilos interna. Si desplegamos el selector en forma de paleta, vemos que nos da varias opciones:

Vamos a crear una hoja de estilos externa para las páginas de nuestro sitio web.

Elegimos la opción Hoja de estilo enlazada.

Escribimos, en el campo URL el nombre de la hoja de estilos que se va a crear: estilos.css (si la tuviéramos ya creada la abriríamos a través del botón “Escoja archivo”). Pulsamos después el botón “Crear hoja de estilos”.

Veremos que nos aparece su nombre en el panel izquierdo.

Aparece la hoja de estilos interna. Podríamos crear reglas de estilo para esta página pero vamos a hacerlo en una hoja de estilos externa que utilizarán las demás páginas de nuestra Web.

Pulsa el botón Eliminar para suprimir la hoja de estilos interna.

17

4. Vamos a crear la primera regla de estilo en nuestra hoja estilos.css:

5. Lo que haremos será crear un identificador (o clase) al que le pondremos un nombre y después le asignaremos los formatos que tendrá:

6. Las características de la regla de estilo .avTitulo serán:

a. Texto. “Usar tipo de letra personalizado”: Domestic Manners, tamaño 26pt, color azul claro, peso de la letra negrita, alineación centrada:

Escoge la segunda opción “Estilo aplicado a todos los elementos de la clase”.

Situados en la hoja estilos.css. Despliega la paleta y escoge la opción Regla.

Escribe en este cuadro de texto el nombre de la clase o identificador, que será .avTitulo (que será el estilo para los titulares de la web de aviones). Los nombres de las clases o identificadores siempre van precedidos de un punto.

Pulsa después el botón “Crear regla de estilo”

18

b. Fondo. Color azul marino:

c. Caja: Mostrar como tabla, anchura 100%, márgenes internos superior e inferior de 10 px.

7. Acepta el cuadro de diálogo y volverás a la pantalla principal de Kompozer.

8. Visualiza el panel de Administrador de sitios (si no lo tienes a vista, despliega el menú Ver / Mostrar u ocultar / Administrador de sitios):

9. Selecciona el título (AirBus) y, en el desplegable de la ventana de estilos en Kompozer, selecciona la regla de estilo que se ha creado (avTitulo):

Observa como el título AirBus ha cambiado de aspecto.

Pulsa el botón de recargar y podrás visualizar el archivo de la hoja de estilos (estilos.css).

19

10. Vamos ahora a crear un Estilo para el cuerpo de texto. Se llamará avTexto y será del mismo

tipo que el anterior. Vuelve a pulsar sobre el icono del editor de CSS .

11. …y después en el icono de la paleta de la ventana del editor (menú desplegable) y elige la última opción, Regla:

12. Aparecerá una ventana como la que se muestra:

13. Las características de la regla .avTexto serán: a. Texto. Tipo de letra personalizado Balker, tamaño 12 pt, altura de línea 200%, color azul

oscuro, alineación justificada:

Elige la segunda opción (“Estilo aplicado a todos los elementos de la clase”) y teclea el nombre .avTexto en la parte de abajo. Por último pulsa en el botón Crear regla de estilo

20

b. Caja. Mostrar como tabla, margen derecho e izquierdo de 30 píxeles, márgenes internos inferior, superior, izquierdo y derecho de 15 píxeles:

c. Bordes. “Los cuatro lados usan el mismo estilo de borde”, estilo = resaltado:

Acepta.

NOTA: La altura de línea es la separación entre líneas.

21

14. Selecciona el texto indicado abajo y aplícale la regla de estilo avTexto.

15. De nuevo abre el editor CSS, indica nueva regla,

16. Elige la segunda opción (“Estilo aplicado a todos los elementos de la clase”) y teclea el nombre . avApartado en la parte de abajo. Por último pulsa en el botón Crear regla de estilo.

22

17. Las características son las mismas que para el texto, pero con algunas variaciones:

a. Texto. Tipo de letra personalizado Balker, tamaño 12 ptos, altura de línea 130%, color azul oscuro, alineación justificada.

b. Caja. Mostrar como elemento-lista. El margen derecho de 20 píxeles y el izquierdo será de 100 píxeles. Los márgenes internos quedan igual que antes (a 10 píxeles todos menos el superior).

c. Listas. Para la imagen del estilo de lista se debe elegir el archivo Ejer7_avioncitoPeq.jpg.

Acepta.

23

18. Tras crear la regla de estilo, selecciona el resto del texto de la página y aplica el estilo avApartados:

19. Finalmente se creará un estilo para las fotografías. Abre el editor CSS y crea una regla llamada avFotos del mismo tipo que las anteriores. Las características serán:

o Bordes. Estilo resaltado, anchura de 5 píxeles y de color azul clarito:

o Caja. Mostrar como bloque, flotar a la derecha y un margen a la izquierda de 20 píxeles.

20. Sitúa el cursor en cada párrafo y con el botón para insertar imagen añade el modelo del que se habla en cada párrafo (a300, a330...).

24

21. Una vez insertadas las imágenes correspondientes a cada párrafo, aplica sobre dichas imágenes

el estilo avFotos.

22. El ejercicio terminado debería tener el siguiente aspecto:

Ejercicio 8. Crear mapas de imagen. Un mapa de imagen es una imagen que se utiliza para poner enlaces a otras páginas o archivos. Dicha imagen se guardará como tipo “html”.

1. Sitúa la imagen Ejer8_mapaimagen.jpg en la misma carpeta donde están las páginas web, web_aviacion.

2. Abre con el programa Gimp la imagen Ejer8_mapaimagen.jpg.

3. Ves a Filtros / Web / Mapa de imagen. Aparecerá una ventana como la siguiente:

25

4. Coge la herramienta polígono y marca (con clics) el área alrededor de DC-9. Con doble pulsación se cierra la figura.

Vamos a poner un enlace a una imagen:

5. Al aceptar el cuadro de diálogo aparecerá en la parte derecha de la ventana el primer elemento del mapa de imagen que se puede editar para cambiarlo si es necesario.

6. Sigue el mismo procedimiento para poner los enlaces a las demás imágenes:

imagenes/ Ejer8_dc-10.jpg, imagenes/Ejer8_md-80.jpg, imagenes/Ejer8_md-82.jpg, imagenes/Ejer8_md-90.jpg

7. El enlace McDonnell Douglas en Wikipedia es de tipo sitio Web, hay que escribir la dirección (deberás encontrarla con un navegador).

Al hacer doble clic para cerrar la figura aparecerá la ventana en la que se le indica con qué se va enlazar. Elige “Tipo de enlace” a Archivo y escribe la siguiente ruta:

file:/ imagenes/dc-9.jpg

file:/imagenes/Ejer8_dc-9.jpg

26

8. También debes marcar el enlace para volver a la página empresas.html Para eso sigue el mismo procedimiento: marca el área en la imagen con el polígono y luego escoge la opción Otro y escoge la página empresas.html:

9. Vamos a guardar el mapa de imagen, despliega el menú Archivo / Guardar como… guarda

el mapa de imagen con el nombre que aparece por defecto (en la misma carpeta donde se halla la imagen, es decir, en web_aviacion).

10. Cierra el Gimp.

11. Abre el archivo Mapa Imagen que has generado. Verás un código (es HTML). Selecciona todo y lo copias.

12. Ahora debes abrir la página McDonnell.html en Kompozer y pulsa en la pestaña inferior de

código fuente

13. Sitúa el cursor justo después de la etiqueta <BODY>

27

14. Editar/pegar. Debe aparecer todo el texto del archivo del mapa de imagen.

15. Con las pestañas inferiores vuelve a la visualización normal y comprueba que funciona el mapa de imagen con un navegador.

Ejercicio 9. Formularios. Un formulario es un área en una página Web que permite la introducción de información por parte de los visitantes. Para ello se utilizan diferentes controles como:

cuadros de texto �

listas �

casillas de verificación �

botones �

28

En este ejercicio se añadirá al sitio Web una página de registro que contendrá algunos de estos controles.

1. Abre desde Kompozer la página de nuestro sitio web: formulario.html

2. Para estructurar la página se hará mediante una tabla de 2 columnas y 3 filas.

3. El titular ocupará las dos celdas de la parte superior, para ello las seleccionas con el ratón y en el

menú contextual elige unir celdas seleccionadas:

La anchura de la tabla será del 80% de la ventana. Inserta la tabla con espacio de borde = 0.

29

4. Escribe dentro el siguiente texto:

5. La inscripción de abajo también ocupa dos celdas, por lo que debes seleccionarlas y unirlas de la misma manera:

6. Escribe dentro el siguiente texto:

7. En la celda central de la izquierda situarás la imagen Ejer9_bordeLateral.jpg.

8. La imagen tendrá un tamaño fijo de 160 x 620 píxeles. Para introducirlo haz doble pulsación sobre la imagen y aparecerá la ventana de propiedades (en la pestaña dimensiones).

9. Guarda la página. Ahora hay que diseñar el formulario, sitúate en la celda que queda libre

(segunda fila, segunda columna).

Pasos para crear un formulario:

10. Despliega el menú Insertar/Formulario/Definir formulario... aparecerá una ventana en la que se pondrá:

� Nombre del formulario (datos_clientes).

� URL de la acción que es la dirección de correo a donde se enviará la información, pondremos una dirección de correo ficticia (mailto:usuari.inventat@yahoo.es).

� Método es lo que se va a hacer con los datos, que es enviarlos (post).

Pulsa Aceptar.

Tendrás que desmarcar esta opción sino no te dejará cambiar la anchura y la altura de manera independiente.

30

Aparece un área con borde azul. Dentro de esa zona se irán incluyendo los diferentes controles del formulario.

11. Escribe el texto Nombre:

y a continuación ve a Insertar/Formulario/Campo de formulario .

Aparecerá una ventana de propiedades: introduce el nombre (nombreCliente) y el tamaño del campo (que será de 15) indica el máximo de caracteres que podrá contener.

Pulsa Aceptar.

12. Escribe al lado el texto Apellidos:

13. Repite los mismos pasos para realizar el campo de apellidos, en este caso se llamará apellidosCliente y el tamaño del campo será 40.

31

14. Escribe debajo el texto Dirección de correo electrónico:

15. Inserta al lado el campo del correo electrónico se llamará email, se puede poner una @ como

carácter inicial y de longitud 30.

16. Escribe unas líneas debajo el texto Opinión general y debajo Escoge una opción de la lista.

17. El siguiente control a introducir es una lista de opciones:

32

18. Ve a Insertar/Formulario/ lista de opciones.

Escribe como nombre de la lista el texto: Opinion_pagina (sin acentos).

En esta posición para añadir el primer elemento de la lista.

Escribe el texto Excelente y el mismo valor.

Pulsa el botón Añadir opción. Escribe después la segunda opción Buena.

Pulsa Añadir opción

33

19. Añade tú mismo las opciones restantes:

20. Finalmente, sitúate en la opción Buena y marca “Seleccionada inicialmente”:

La lista resultante quedará así:

DEFINIR CONJUNTOS DE CAMPOS:

21. Selecciona los siguientes campos de texto:

despliega el menú Insertar/Formulario/Definir conjunto de campos... En la leyenda escribe Datos del visitante:

34

Como verás se han agrupado los datos formando un conjunto, al cual se le pone una etiqueta de texto (o leyenda):

22. Haz más grande el texto “Datos del visitante:”

23. Vamos a añadir la siguiente área de texto:

24. Escribe, unas líneas más abajo el texto Escribe un texto para tu perfil en aviones.com y añade debajo del mismo un área de texto (Insertar/Formulario/Área de texto...). El del ejemplo tiene como nombre texto, 10 filas y 60 columnas.

25. Finalmente, vamos a poner los botones de Enviar consulta (envía los datos a la dirección de correo especificada en la creación del formulario, en nuestro caso a usuari.fictici@yahoo.es) y de Restablecer el formulario (borrar los campos).

26. Sitúate unas líneas más abajo y pulsa el botón de alineación centrada . Seguidamente irás a Insertar /Formulario /Campo de formulario:

Escoge el tipo de campo: Botón de envío y pulsa Aceptar sin poner nada más.

Un área de texto es un campo donde el visitante de nuestra página podrá escribir varias líneas de texto.

35

27. Introduce al lado el segundo botón (Insertar /Formulario /Campo de formulario ):

Imaginemos que el visitante de la página ha rellenado el siguiente formulario y ha pulsado después el botón de enviar:

Como resultado se enviará el siguiente mensaje a la dirección de correo usuari.fictici@yahoo.es:

Destinatario usuari.fictici@yahoo.es

Los campos junto con los valores que ha introducido el visitante irán separados por el símbolo &.

Escoge el tipo de campo: Botón de restablecimiento y pulsa Aceptar sin poner nada más.

36

Ejercicio 10. Utilizar Hojas CSS en otras páginas.

Esta práctica se hará con la página de Cessna.

Pasos a seguir:

1. Abre el archivo de texto Ejercicio10_texto.txt. Copia el texto a la página de Cessna.html, en Kompozer.

2. Estando situados en la página de Cessna.html, pulsa en el botón de las hojas de estilo CSS

(botón ).

3. Despliega el botón en forma de paleta y escoge “Hoja de estilos enlazada”:

4. En la página de Kompozer selecciona el título “Cessna” y aplícale el estilo avTítulo (se aplica desde el menú desplegable de la barra de herramientas).

5. Selecciona el texto de la página y aplica el estilo avTexto de la misma forma.

6. Selecciona la lista de aviones y aplica el estilo avApartados.

Como ya tenemos creada la hoja de estilos, vamos a abrirla, pulsa el botón “Escoja archivo” y abre el archivo estilos.css, situado en nuestro sitio web.

Pulsa el botón Crear hoja de estilos.

37

Este debería ser el aspecto del ejercicio terminado:

1. Guarda los cambios.

Ejercicio 11. Vídeos. Este ejercicio indica cómo se debe incrustar un vídeo previamente publicado en un sitio de Internet para compartir vídeos del tipo YouTube.

Abre en Kompozer la página de Cessna, inserta una tabla de 2 columnas y 1 fila.

2. Introduce (copiar y pegar) en la 1ª celda la lista de aviones:

3. Pon a las celdas de la tabla la siguiente alineación: Vertical� superior y Horizontal� izquierda:

izquierda

38

4. Abre la página de YouTube y escoge un vídeo del despegue de un avión.

5. Sitúate en la 2ª celda de la tabla. Despliega el menú insertar / HTML ... y pega el código que has copiado de la página.

Pulsa Insertar .

El aspecto final en el navegador será:

Fin de las prácticas.

Para obtener el código pulsa el botón Compartir y botón Insertar . Copia el código que se muestra (lo pegaremos en Kompozer.)