Qu es un sitio Web?

Es una coleccin de pginas Web con una direccin nica (dichas pginas
estn enlazadas unas con otras).
Para empezar hay que crear el sitio Web, es decir, la estructura de carpetas donde se irn
almacenando los archivos que componen la pgina Web (imgenes, archivos HTML, hojas de estilo,
etc.).
Este ejercicio iremos creando una pgina Web que contendr informacin sobre empresas de aviones.
Pasos a seguir
1. Debes crear dentro de la carpeta Documentos otra carpeta que llamars Mis Webs y dentro de
ella otra que llamars web_aviacion (sin acento). En esta ltima carpeta se almacenarn todos
los archivos de nuestro sitio web.
2. Dentro de la carpeta web_aviacion hars otra que llamars imagenes (sin acento), donde irn
todas las imgenes de las pginas Web.
Esta ser la estructura del sitio Web web_aviacion

En la carpeta imagenes estarn las imgenes que

salgan en las pginas del sitio Web.
La pgina principal de un sitio Web
siempre tendr el nombre de index.html.

NORMAS: Las pginas Web van a ser archivos que finalmente vamos a subir a un servidor y van a
estar administrados por l. Por esta razn, existen alguna RESTRICCIONES a la hora de dar
nombre a los archivos de pginas Web.
1 - NO USAR ESPACIOS EN BLANCO
2 - NO USAR MAYSCULAS
3 - NO USAR SIGNOS DE PUNTUACIN EXTRAOS: ( , . ) ? ! &
4 NO USAR ACENTOS
As pues, nombres como logroo.htm, La Rioja.htm, mi pgina.htm y otros de las mismas caractersticas
daran problemas una vez subidos al servidor.

Ejercicio 1. La primera pgina Web.

1. Abre Kompozer, vamos a realizar una configuracin del programa. Despliega el men

Herramientas/Preferencias. En el panel de opciones, sitate en

y marca la
1

siguiente opcin
(son aspectos tcnicos que tienen que ver con el tipo
de lenguaje HTML que utilizar el programa para crear las pginas). Pulsa Aceptar.
2. En Kompozer aparecer ya una pgina en blanco. Antes de escribir en ella vamos a guardarla:
pulsa el botn de Guardar:

3. Aparecer una ventana en la que se te pide el ttulo de la pgina (el que aparecer en la barra de
ttulo del navegador firefox).

Escribe como ttulo

Aviacin civil y pulsa
Aceptar.

4. A continuacin aparecer la ventana para guardar el archivo.

El nombre debers ponerle es index (se guardar con extensin .html ya que se trata de una
pgina web) y guardarla en la carpeta web_aviacion.

DIFERENCIA ENTRE EL TTULO DE UNA PGINA WEB Y SU NOMBRE DE ARCHIVO:

El Ttulo de una pgina web se pondr en la barra de ttulos del navegador, y en la pestaa de la
pgina en el navegador:
Barra de ttulo
Pestaa de la pgina
Web

El nombre de la pgina es el nombre con que se guarda el archivo web (index.html).

Una vez guardada la pgina

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

2. Carpeta del sitio. En este apartado pulsa sobre el botn para seleccionar el directorio o
carpeta donde se encuentran los archivos que irs creando (escogers la carpeta
web_aviacion).
3. El resto de datos se pueden dejar en blanco.
4. Pulsa en el botn de Aceptar.

Ejercicio 2. Aadir texto a la pgina Web.

1. Vamos a escribir el texto en la pgina web. Abre el archivo de texto que contiene la carpeta
ejercicio2_archivos.
Selecciona el texto, cpialo y pgalo en la pgina de Kompozer:
(NOTA: si no funciona utiliza la opcin Editar/Pegar sin formato).

2. Vamos a poner un fondo de pgina, despliega el men Formato / Colores y fondo de la

pgina. En la ventana que aparece se puede elegir un color de fondo o incluir una imagen
como fondo. Escoge la imagen Ejer2_fondo.jpg:
Marca esta opcin para indicar
que la ruta donde tiene que ir
a buscar la imagen es a partir
de donde se encuentra la
pgina actual.
Es decir:
imgenes/Ejer2_fondo.jpg.

3. Guarda
los cambios y pulsa el botn
navegador Mozilla firefox.

para visualizar la pgina en el

Ejercicio 3. Modificar textos e imgenes.

Abre con Kompozer la pgina index.html (que has creado en el ejercicio 2) y realiza lo siguiente:
1. Selecciona el ttulo 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 tamao de la letra grande
negrita y centrado en la pgina:

2. Con el ttulo seleccionado, despliega el men Formato / Color del texto Escoge un color rojo
oscuro.
3. Vamos a insertar una imagen.
Sita el cursor al inicio del tercer prrafo y pulsa despus el botn
siguiente cuadro de dilogo.

y aparecer el

Debes pulsar sobre el botn de abrir

la carpeta y escoger
Ejer3_imagen_entrada.jpg.
Marca la opcin No usar texto
alternativo. Asegrate que la opcin
La URL es relativa a la direccin
de la pgina est activada siempre.
Pulsa Aceptar.

4. Ajustar la imagen: La imagen aparecer como un carcter de texto. Hazla ms pequea

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 pestaa Apariencia, elige del desplegable Alinear el texto con la imagen la opcin Fluir
por la izquierda:
Pon adems un espacio a
izquierda y derecha de
20 pxeles.
Aade un borde slido de
1 pxel.

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

ponlo con alineacin justificada

. La imagen quedar de la siguiente manera:

7. Utiliza el botn de insertar imagen

para insertar las imgenes de los dos botones:
Ejer3_botonEmpresas.gif y Ejer3_botonRegistro.gif.
Ponlas como se indica (las tendrs que centrar

en la pgina).

8. Sita el cursor justo antes del botn Empresas y despliega el men Insertar / Lnea horizontal.
9. Sita el cursor justo despus del botn Registro y despliega el men Insertar / Lnea
horizontal.

10. En la parte superior insertaremos una imagen GIF animada. Usars el botn
Ejer3_avionVolando.gif .

11. Guarda
los cambios y pulsa el botn
navegador Mozilla firefox.

y el archivo

para visualizar la pgina en el

Ejercicio 4. Tablas.
Las tablas permiten organizar y distribuir los espacios de una manera ptima. En este ejercicio se va a
crear una pgina de fabricantes de aviones para listar los modelos con las fotografas se emplearn
tablas.

1. Abre Kompozer y crea una pgina nueva

gurdala en la carpeta web_aviacion con el
nombre de boeing. Ponle como ttulo el nombre de boeing.
2. Abre el archivo de texto Ejercicio4_textos.txt.
Copia y pega la introduccin de texto en la pgina de Kompozer:

3. Dos lneas ms abajo insertaremos una tabla que tendr dos columnas y 8 filas. Pulsa en el
botn

para insertar la tabla.

Pon las siguientes opciones:

En la pestaa Preciso, se pondrn 8

filas y 2 columnas y se marcar una
anchura del 80% de la ventana y un
borde de 12 pxeles.

4. Selecciona despus 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 ms importantes de aviones
Boeing:
6. Despus copia el texto de cada uno de los tipos de aviones en las celdas de la primera columna.
7. Seguidamente, sitate en las celdas de la segunda columna y, una a una, ve insertando las
imgenes de los aviones (las imgenes las cogers de la carpeta imagenes).

8. Pulsa de nuevo el botn de Tabla

para que aparezcan las propiedades de la tabla, en la
pestaa de Tabla, indica los siguientes valores:
Pon 10 pxeles de relleno
entre el borde de la tabla y su
contenido.

Indica la alineacin
centrada para que la tabla se
centre en la pgina.
Y un color de
fondo celeste
.

9. Utiliza despus el botn

12. Guarda los cambios

para centrar las imgenes en las celdas.

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

1. Abre Kompozer y crea una pgina nueva

mismo texto como ttulo.

y gurdala con el nombre empresas. Ponle el

2. Inserta

la imagen Ejer5_imagencentral.jpg.

la imagen Ejer5_Boeing_logo.gif .
3. Inserta
4. Hazla ms pequea (aproximadamente a la mitad de su tamao).
5. Con el logotipo seleccionado, pulsa sobre el icono de creacin de capa

6. Acabamos de poner el logo en una capa:

Arrastra este icono para
mover la capa,
pudindola situar donde
queramos.

7. Para quitar la seleccin de la capa, utiliza las teclas de desplazamiento.

8. Sin nada seleccionado, inserta la imagen

capa con el botn de crear capa

9. Sin nada seleccionado, inserta la imagen

capa con el botn de crear capa

Ejer5_cessna_logo.gif y luego ponlo en una

10. Sin nada seleccionado, inserta la imagen

capa con el botn de crear capa

Ejer5_airbus_logo.png y luego ponlo en una

Ejer5_Douglas_logo.gif y luego ponlo en una

11. Sita las capas de los logos como se indica:

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

Usando los botones para enviar delante

o detrs las capas
elementos para que se vean como en la imagen de muestra.

13. Guarda los cambios

, ordena los

Ejercicio 6. Enlaces.
Los enlaces permiten ir navegando por los contenidos del sitio web. El enlace se activa haciendo una
pulsacin de ratn sobre un elemento, que puede ser un texto, una imagen o un botn (que es una
imagen).
El destino del enlace puede ser de varios tipos:
1. Otra pgina web.
2. Direccin de correo electrnico.
3. Un documento o archivo para descargar.
4. Un enlace interno a la misma pgina.
Para practicar se van a crear los enlaces a los documentos del sitio web de aviones.
Las pginas que an no existan se crearn en blanco para que se puedan enlazar.

Empresas

Formulario

10

Pasos a seguir:

1. Crea una pgina nueva

y gurdala con el nombre airbus (en la carpeta que contiene los
otros archivos .html del sitio web). Ponle el mismo texto como ttulo.
2. Haz la misma operacin para la pgina que llamars mcdonnell
3. Crea otra pgina 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 pginas web:

5. Abre la pgina empresas.html.
6. Selecciona el icono de McDonnell Douglas y pulsa el botn
(o insertar / enlace). En
la pestaa 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 pestaa enlace escoge el
archivo .html correspondiente).
8. Guarda los cambios.
9. Abre el archivo index.html.

10. Inserta un enlace

pgina empresas.html.

sobre el botn de Empresas

11. En el botn de Regstrate

pgina formulario.html.

y asigna al enlace la

inserta otro enlace

a la

11

Enlaces de retorno:
12. Abre el archivo empresas.html y sita en la pgina (haciendo una capa) la imagen
Ejer6_volver.gif (que ser el vnculo con la pgina anterior que es index.htm).
Como se indica a continuacin:

13. Pon sobre dicha imagen un enlace

14. Prueba en el navegador

a la pgina index.html

que funcionan los enlaces introducidos.

Enlaces dentro de una misma pgina:

15. Abre la pgina boeing.html.
16. Aade, en la parte superior-derecha de la pgina, la imagen del botn Ejer6_botonAbajo.gif:

17. Aade, en la parte inferior-derecha de la pgina, la imagen Ejer6_botonArriba.gif.

12

18. Selecciona el ttulo de la pgina (Boeing) y pulsa el botn

aparecer un cuadro de
dilogo como el que se muestra, escribe el nombre del enlace interno: ir_inicio.

ir_inicio

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

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 botn

21. Selecciona con un simple clic el botn

que saltar a la marca ir_inicio.

y pulsa despus en el botn 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 botn
navegador Mozilla firefox.

para visualizar la pgina en el

24. Vuelve a la pgina boeing.html.

25. Sita el cursor en la parte inferior de la pgina, justo antes de la imagen del botn

13

26. Pulsa el botn de insertar ancla

aparecer un cuadro de dilogo como el que se
muestra, escribe el nombre del enlace interno: ir_final.
27. Observars que se habr puesto la marca del ancla o enlace interno:

28. Selecciona con un simple clic el botn Abajo

y pulsa despus en el

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

30. Guarda
los cambios y pulsa el botn
navegador Mozilla firefox.

para visualizar la pgina en el

31. Vuelve a la pgina boeing.html.

32. Incluye un botn para volver a la pgina empresas.html (tendrs que insertar sobre l un enlace
que vaya a la pgina empresas.html):

33. Prueba los enlaces en un navegador.

14

Ejercicio 7. Crear hojas de estilo con Kompozer

Qu ES UN ESTILO?
Un estilo es un conjunto de caractersticas de texto (fuente, color, tamao, sangra...) 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 caractersticas
que, aplicadas a una pgina Web o a un conjunto de ellas, pueden modificar su apariencia.
Una hoja de estilos puede estar contenida en la misma pgina Web donde se utiliza o puede
estar definida en un archivo aparte. De la segunda forma, podemos definir estilos para todo
el sitio Web.

La hoja de estilo es un archivo con

extensin .css que se almacenar en la
misma carpeta o directorio donde se
encuentren las pginas Web del sitio.

Las pginas Web se enlazarn al archivo de hoja de estilos, de esa

manera se podrn aplicar a todas las pginas Web los estilos que
crearemos.

Pasos a seguir:
1. Abre el archivo de texto Ejercicio7_textoAirBus.txt y copia el texto en la pgina de
airbus.html, en Kompozer.
2. Deja la hoja sin nada seleccionado.

3. Para crear la hoja de estilo pulsa el botn

15

Aparece la hoja de estilos interna.

Podramos crear reglas de estilo para esta pgina pero
vamos a hacerlo en una hoja de estilos externa que
utilizarn las dems pginas de nuestra Web.
Pulsa el botn Eliminar
estilos interna.

para suprimir la hoja de

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 pginas de nuestro sitio web.
Elegimos la opcin 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 tuviramos ya
creada la abriramos a travs del botn
Escoja archivo).
Pulsamos despus el botn Crear
hoja de estilos.

Veremos que nos aparece su nombre

en el panel izquierdo.

16

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

Situados en la hoja estilos.css. Despliega

la paleta y escoge la opcin Regla.

5. Lo que haremos ser crear un identificador (o clase) al que le pondremos un nombre y despus
le asignaremos los formatos que tendr:
Escoge la segunda opcin Estilo
aplicado a todos los elementos de la
clase.

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 despus el botn Crear regla de estilo

6. Las caractersticas de la regla de estilo .avTitulo sern:

a. Texto. Usar tipo de letra personalizado: Domestic Manners, tamao 26pt, color azul
claro, peso de la letra negrita, alineacin centrada:

17

b. Fondo. Color azul marino:

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

7. Acepta el cuadro de dilogo y volvers 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):

Pulsa el botn de recargar

y
podrs visualizar el archivo de la
hoja de estilos (estilos.css).

9. Selecciona el ttulo (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 ttulo AirBus ha cambiado de aspecto.

18

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 despus en el icono de la paleta de la ventana del editor (men desplegable) y elige la
ltima opcin, Regla:

12. Aparecer una ventana como la que se muestra:

Elige la segunda opcin

(Estilo aplicado a todos
los elementos de la clase)
y teclea el nombre .avTexto
en la parte de abajo.
Por ltimo pulsa en el botn
Crear regla de estilo

13. Las caractersticas de la regla .avTexto sern:

a. Texto. Tipo de letra personalizado Balker, tamao 12 pt, altura de lnea 200%, color azul
oscuro, alineacin justificada:

19

NOTA: La altura de lnea es

la separacin entre lneas.

b. Caja. Mostrar como tabla, margen derecho e izquierdo de 30 pxeles, mrgenes internos
inferior, superior, izquierdo y derecho de 15 pxeles:

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

Acepta.

20

14. Selecciona el texto indicado abajo y aplcale la regla de estilo avTexto.

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

16. Elige la segunda opcin (Estilo aplicado a todos los elementos de la clase) y teclea el nombre
. avApartado en la parte de abajo.
Por ltimo pulsa en el botn Crear regla de estilo.

21

17. Las caractersticas son las mismas que para el texto, pero con algunas variaciones:
a. Texto. Tipo de letra personalizado Balker, tamao 12 ptos, altura de lnea 130%, color
azul oscuro, alineacin justificada.

b. Caja. Mostrar como elemento-lista. El margen derecho de 20 pxeles y el izquierdo ser

de 100 pxeles. Los mrgenes internos quedan igual que antes (a 10 pxeles todos menos
el superior).

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

Ejer7_avioncitoPeq.jpg.

Acepta.
22

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

19. Finalmente se crear un estilo para las fotografas. Abre el editor CSS y crea una regla llamada
avFotos del mismo tipo que las anteriores. Las caractersticas sern:
o

Bordes. Estilo resaltado, anchura de 5 pxeles y de color azul clarito:

Caja. Mostrar como bloque, flotar a la derecha y un margen a la izquierda de 20 pxeles.

20. Sita el cursor en cada prrafo y con el botn para insertar imagen
que se habla en cada prrafo (a300, a330...).

aade el modelo del

23

21. Una vez insertadas las imgenes correspondientes a cada prrafo, aplica sobre dichas imgenes

el estilo avFotos.
22. El ejercicio terminado debera 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 pginas o archivos. Dicha
imagen se guardar como tipo html.
1. Sita la imagen Ejer8_mapaimagen.jpg en la misma carpeta donde estn las pginas 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:

24

4. Coge la herramienta polgono

pulsacin se cierra la figura.
Vamos a poner un enlace a una imagen:

y marca (con clics) el rea alrededor de DC-9. Con doble

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

5. Al aceptar el cuadro de dilogo 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 dems imgenes:
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 direccin
(debers encontrarla con un navegador).

25

8. Tambin debes marcar el enlace para volver

a la pgina empresas.html Para
eso sigue el mismo procedimiento: marca el rea en la imagen con el polgono y luego escoge la
opcin Otro y escoge la pgina 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. Vers un cdigo (es HTML). Selecciona todo y
lo copias.

12. Ahora debes abrir la pgina McDonnell.html en Kompozer y pulsa en la pestaa inferior de
cdigo fuente

13. Sita el cursor justo despus de la etiqueta <BODY>

26

14. Editar/pegar. Debe aparecer todo el texto del archivo del mapa de imagen.
15. Con las pestaas inferiores vuelve a la visualizacin normal y comprueba que funciona el mapa
de imagen con un navegador.

Ejercicio 9. Formularios.
Un formulario es un rea en una pgina Web que permite la introduccin de informacin por parte de
los visitantes.
Para ello se utilizan diferentes controles como:
cuadros de texto

listas

casillas de verificacin
botones

27

En este ejercicio se aadir al sitio Web una pgina de registro que contendr algunos de estos controles.

1. Abre desde Kompozer la pgina de nuestro sitio web: formulario.html

2. Para estructurar la pgina se har mediante una tabla de 2 columnas y 3 filas.

La anchura de la tabla ser

del 80% de la ventana.
Inserta la tabla con espacio
de borde = 0.

3. El titular ocupar las dos celdas de la parte superior, para ello las seleccionas con el ratn y en el
men contextual elige unir celdas seleccionadas:

28

4. Escribe dentro el siguiente texto:

5. La inscripcin de abajo tambin 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 situars la imagen Ejer9_bordeLateral.jpg.

8. La imagen tendr un tamao fijo de 160 x 620 pxeles. Para introducirlo haz doble pulsacin
sobre la imagen y aparecer la ventana de propiedades (en la pestaa dimensiones).

Tendrs que desmarcar

esta opcin sino no te
dejar cambiar la anchura
y la altura de manera
independiente.

9. Guarda la pgina. Ahora hay que disear el formulario, sitate 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 accin que es la direccin de
correo a donde se enviar la informacin,
pondremos una direccin de correo ficticia
(mailto:usuari.inventat@yahoo.es).
Mtodo es lo que se va a hacer con los
datos, que es enviarlos (post).
Pulsa Aceptar.
29

Aparece un rea con borde azul. Dentro de esa zona se irn incluyendo los diferentes controles del
formulario.
11. Escribe el texto Nombre:
y a continuacin ve a Insertar/Formulario/Campo de formulario.
Aparecer una ventana de propiedades: introduce el nombre (nombreCliente) y el tamao del campo
(que ser de 15) indica el mximo 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 tamao del campo ser 40.

30

14. Escribe debajo el texto Direccin de correo electrnico:

15. Inserta al lado el campo del correo electrnico se llamar email, se puede poner una @ como
carcter inicial y de longitud 30.

16. Escribe unas lneas debajo el texto Opinin general y debajo Escoge una opcin de la lista.

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

31

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

Escribe como nombre de la lista

el texto: Opinion_pagina (sin
acentos).
Pulsa Aadir
opcin

En esta posicin para aadir el

primer elemento de la lista.

Escribe el texto Excelente y

el mismo valor.

Pulsa el botn Aadir opcin.

Escribe despus la segunda
opcin Buena.

32

19. Aade t mismo las opciones restantes:

20. Finalmente, sitate en la opcin 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:

33

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

22. Haz ms grande

el texto Datos del visitante:

23. Vamos a aadir la siguiente rea de texto:

Un rea de texto es un
campo donde el visitante
de nuestra pgina podr
escribir varias lneas de
texto.

24. Escribe, unas lneas ms abajo el texto Escribe un texto para tu perfil en aviones.com y aade
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 (enva los datos a la direccin de
correo especificada en la creacin del formulario, en nuestro caso a usuari.fictici@yahoo.es) y
de Restablecer el formulario (borrar los campos).

26. Sitate unas lneas ms abajo y pulsa el botn de alineacin centrada

Insertar /Formulario /Campo de formulario:

. Seguidamente irs a

Escoge el tipo de campo: Botn de envo

y pulsa Aceptar sin poner nada ms.

34

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

Escoge el tipo de campo: Botn de
restablecimiento y pulsa Aceptar sin
poner nada ms.
Imaginemos que el visitante de la pgina ha rellenado el siguiente formulario y ha pulsado despus el
botn de enviar:

Como resultado se enviar el siguiente mensaje a la direccin de correo usuari.fictici@yahoo.es:

Destinatario
usuari.fictici@yahoo.es

Los campos junto con los valores

que ha introducido el visitante irn
separados por el smbolo &.

35

Ejercicio 10. Utilizar Hojas CSS en otras pginas.

Esta prctica se har con la pgina de Cessna.

Pasos a seguir:
1. Abre el archivo de texto Ejercicio10_texto.txt. Copia el texto a la pgina de Cessna.html, en
Kompozer.
2. Estando situados en la pgina de Cessna.html, pulsa en el botn de las hojas de estilo CSS
(botn

).

3. Despliega el botn en forma de paleta y escoge Hoja de estilos enlazada:

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

Pulsa el botn Crear

hoja de estilos.
4. En la pgina de Kompozer selecciona el ttulo Cessna y aplcale el estilo avTtulo (se aplica
desde el men desplegable de la barra de herramientas).

5. Selecciona el texto de la pgina y aplica el estilo avTexto de la misma forma.

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

36

Este debera ser el aspecto del ejercicio terminado:

1. Guarda los cambios.

Ejercicio 11. Vdeos.

Este ejercicio indica cmo se debe incrustar un vdeo previamente publicado en un sitio de Internet para
compartir vdeos del tipo YouTube.
Abre en Kompozer la pgina 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 alineacin:

Vertical superior y Horizontal izquierda:

izquierda

37

4. Abre la pgina de YouTube y escoge un vdeo del despegue de un avin.

Para obtener el cdigo pulsa el

botn Compartir y botn
Insertar.
Copia el cdigo que se muestra
(lo pegaremos en Kompozer.)

5. Sitate en la 2 celda de la tabla. Despliega el men insertar / HTML... y pega el cdigo que
has copiado de la pgina.

Pulsa Insertar.
El aspecto final en el navegador ser:

Fin de las prcticas.

38