Ejercicio unidad 1.3

Ejercicios unidad 1.3.

Para superar esta unidad el alumno deberá elaborar los ficheros XHTML que se le indican en los ejercicios, e instalarlos en el espacio personal del servidor del curso. Os dejo los enunciados de las actividades:

Ejercicio 1

Vuestra primera página web. A continuación iremos haciendo diferentes prácticas con las que iréis añadiendo elementos a vuestros primeros documentos en XHTML. Para diseñar y practicar lo aprendido podéis hacerlo con el editor Kompozer, que es un editor gráfico que permite trabajar de forma sencilla con diferentes elementos, ver el código XHTML generado por nuestras acciones y previsualizar el resultado final.

Antes de comenzar debéis crear un directorio en la unidad C:, que lleve por nombre xhtml. Aquí se deberán grabar las páginas que vayamos elaborando, unas 2 ó 3. Una vez hecho esto, abriremos el editor y crearemos la página principal mediante estos pasos:

1. Podréis ver que por defecto el editor crea una nueva página en blanco que nos puede servir para comenzar a trabajar. Si queréis la podemos eliminar y crear una nueva aunque el efecto será el mismo. Para ello debéis ir al menú y seleccionad la siguiente secuencia Archivo > Nuevo> Seleccionar la opción por defecto "Un documento vacío" . También es posible realizar esta acción desde el botón         o con las teclas Ctrl + N

2. Podréis ver que aparecen en la parte inferior cuatro pestañas: "Normal", "Etiquetas HTML", "Código fuente" y "Vista preliminar".

La primera es la vista básica donde podemos incluir elementos como si de un editor de textos se tratara, en la segunda veréis cómo dentro de la página se marcan las diferentes etiquetas de cada sección o elemento, en la tercera podréis acceder al código fuente de lo que vayáis realizando y por último, la vista preliminar es el resultado tal y como se verá una vez hayáis traspasado la página al espacio del servidor web vía FTP.

Nota: es muy importante para estas prácticas que vayáis viendo el resultado de las diferentes acciones en la pestaña "Código fuente" donde se puede ver el código en formato HTML. Para ello haced clic sobre dicha pestaña, así podréis familiarizaros más con las etiquetas que estamos trabajando.

3. Id al menú y seleccionad la siguiente secuencia Formato > Título y propiedades de la página. Aparecerá un cuadro de diálogo con diferentes opciones básicas de la página. En la opción General rellenad los campos Título, Autor y Descripción.

4. Escoged también los diferentes colores que queréis aplicar por defecto al cuerpo de vuestra página. Esto lo podéis hacer desde la opción " Formato > Fondo y colores de la página " que viene por defecto con una serie de atributos.

5. Una vez hecho esto presionad el botón Aceptar, con esto tendréis la base de vuestro primer documento.

6. Visualizad el resultado de estas acciones en formato HTML desde la pestaña inferior "Etiquetas HTML".

7. Guardad la página en el directorio que habéis creado anteriormente con el nombre " inicio.html ". Archivo Guardar o bien desde el botón

8. Ya tenéis vuestra primera página definida. Si la llamáis desde vuestro navegador, veréis que no ha de tener contenido, solamente ha de aparecer el título en la barra de estado del navegador. También podréis visualizar el resultado si presionáis sobre la pestaña "Vista preliminar".

Ejercicio 2

Ahora empezaréis a llenar la página principal con diferentes contenidos. Estos pueden ser escogidos a vuestro gusto, pero en todos los casos han de tener consistencia y ser coherentes.

1. Abrid la página " inicio.html " desde el editor.

2. Poned un título destacado en el cuerpo de la página que defina lo que en ella vais a introducir. Para ello debéis tener activada la barra de iconos de formato. Si no está activa seguid estos pasos: desde el menú seleccionad Ver > Mostrar/Ocultar > Barra de formato

3. Ha de aparecer la siguiente barra: En la primera casilla desplegable escoged el tipo de encabezado (Header) que deseéis (se muestra bajo los epígrafes "Título 1,2,3...").

4. A continuación escribid un párrafo introductorio de unas tres o cuatro líneas donde se explique el contenido de vuestra página a modo de resumen. Dentro de este texto podéis incluir diferentes estilos físicos. Lo más importante es que este texto esté sangrado un nivel. Para ello seleccionad desde el menú Formato > Incrementar sangría o bien haced clic en el botón

5. Después de esto, insertad una línea a vuestro gusto. Nos servirá para separar diferentes bloques. Para ello, seleccionad desde el menú Insertar > Línea horizontal . Para ajustar las propiedades de la línea, seleccionadla y con un clic en el botón derecho aparecerá la opción Propiedades de línea horizontal que abre una caja de edición de opciones de línea.

6. Observad el código XHTML generado desde la pestaña inferior "Código fuente".

7. Guardad la página con los cambios efectuados.

Ejercicio 3

En este momento vamos a definir un sumario de contenidos. Lo haremos mediante una lista numerada.

1. Abrid la página " inicio.html " desde el editor.

2. Situad el cursor por debajo de lo último que habéis añadido.

3. La lista debe ser numerada con números o letras, según más os guste, cread por lo menos 5 elementos. Os podéis ayudar del menú Formato > Lista > Numerada . Una vez creada la lista podréis configurar todas las características de ésta, tanto en estilo como en formatos de viñeta o número según vuestras preferencias seleccionando los diferentes elementos de la lista y haciendo clic en el botón derecho se abrirá un menú donde escoger la opción "Propiedades de la lista...".

También se puede realizar haciendo clic en uno de los dos botones    que encontramos en la barra de herramientas.

4. Guardad la página con los cambios efectuados.

Ejercicio 4

Dentro del sumario que habéis creado anteriormente, incluid un enlace o hipervínculo real. Por ejemplo, si hacemos un sumario donde se han listado diferentes universidades españolas, crearemos un hipervínculo a alguna de estas universidades que después comprobaremos en el navegador. Aseguraos de poner la url correcta.

1. Abrid la página " inicio.html " desde el editor.

2. Situad el cursor por debajo de lo último que habéis añadido.

3. Incluid un hipervínculo mediante la etiqueta <A HREF>, no olvidéis que el valor del atributo ha de ir entrecomillado. Os podéis ayudar del menú Insertar > Enlace... para crear la etiqueta o bien haced clic en el botón.

Recordad que si marcáis previamente el texto que ha de ser afectado por el hipervínculo, las etiquetas se sitúan correctamente en el texto cuando lo seleccionáis como enlace.

NOTA: si queréis que el enlace se abra en una ventana nueva, haced clic en el botón "Más propiedades" dentro de la caja de edición del enlace. Veréis una casilla llamada "Destino" donde nos dice: "El enlace se abrirá", podemos marcarla y escoger del desplegable la opción "En una ventana nueva".

4. Guardad la página con los cambios efectuados, pero no la cerréis.

5. Para crear un enlace interno dentro de vuestro propio documento escribid un texto largo, inventado o citación, en el cual incluid varios saltos de línea y de párrafo. Ahora podríais escoger un tipo de letra más grande para poder ocupar mayor espacio en el documento. Como mínimo debe tener 15 líneas.

6. Dentro de este texto, debéis incluir letras de diferentes tipografías y colores, como mínimo tres diferentes (Ayudaros de los botones de la barra de botones Formato)

7. Guardad la página con los cambios efectuados, pero no la cerréis.

8. Colocad el referente en aquella parte del documento a la cual queréis que salte cuando se active el enlace interno desde el sumario. Os recomiendo que sea en alguna parte del texto último que habéis introducido para que podáis ver el efecto real. Os podéis ayudar del menú Insertar > Enlace interno... , para crear la etiqueta seleccionando la palabra o texto que sirve de referente antes de ejecutar la acción del menú.

9. Ahora situad el cursor en un epígrafe del sumario que habéis realizado anteriormente y seleccionad aquella palabra o frase que sirva de nexo y que defina un referente dentro del documento a donde saltar. Os podéis ayudar del menú Insertar > Enlace... , para crear el nexo de partida. Debéis rellenar únicamente el campo Ubicación del enlace : donde debéis escoger del desplegable uno de los nombres de los marcadores o anclas previamente definidos. Veréis que el campo URL tiene este formato " #nombre del marcador"

10. Guardad la página con los cambios efectuados.

Ejercicio 5

Ahora, desde este mismo documento haremos un enlace a otro documento nuevo que vamos a crear. Para activar este enlace lo haremos desde una imagen.

1. Cread una nueva página en blanco siguiendo los primeros pasos anteriores del ejercicio 1.

2. Guardad esta página con el nombre " curso.html ".

3. Abrid la página "inicio.html" y situad el puntero después de la última modificación añadida.

4. Insertad una imagen que habéis podido capturar previamente de cualquier web, escogerla de los recursos gráficos que de la galería de imágenes que tengáis en el ordenador o directamente de Internet.

Si aplicáis una imagen desde una ubicación diferente a donde estamos guardando los ejercicios, veréis que la ruta de acceso a la imagen no está dentro de vuestro directorio de ejercicios "HTML". Para que esto sea así, cread una carpeta llamada " iconos " dentro de este directorio. Aquí grabaréis las imágenes que vayáis a utilizar en las páginas. Recordad que este directorio también tendréis que traspasarlo al servidor para que desde el navegador pueda encontrar la ruta de las imágenes.

Esta imagen debe ir centrada en la página. Os podéis ayudar del menú Insertar > Imagen o bien haciendo clic en el botón

5. Cuando insertamos una imagen aseguraos de asignar un texto alternativo a la imagen (atributo ALT) en el campo correspondiente. Si no lo rellenáis, el editor mostrará una ventana de alerta donde nos indica que no lo hemos puesto. En caso de quererlo modificar una vez incluida la imagen, bastará hacer doble clic sobre la imagen y aparecerá el menú flotante con las características de definición de la imagen.

6. Seleccionad la imagen con un clic encima de ella, veréis que aparecen unos puntos de limitación, insertad un vínculo desde Insertar > Enlace , veréis que os lleva a la última pestaña de la caja de edición de imágenes donde podréis determinar el enlace. El valor de enlace o ruta ha de ser el nombre de la página que habéis creado anteriormente " curso.html ".

Ahora la imagen es a la vez un enlace.

7. Guardad la página con los cambios efectuados.

8. Visualizad la página desde el navegador y observad qué sucede con el cursor cuando lo pasáis por encima de la imagen. Comprobad que el enlace funciona correctamente.

Ejercicio 6

Desde la segunda página que habéis creado, vais a realizar una tabla y un formulario simples. Vamos allá.

1. Editad la página " curso.html ".

2. Cread una tabla que tenga 3 columnas y 4 filas.

3. Poned un título a la tabla con la etiqueta adecuada alineado en la parte superior de la tabla.

4. Dentro de las diferentes celdas que se han creado, insertad texto de manera que en alguna celda éste esté centrado, en otra alineado a la parte superior, en otra a la inferior y en otra a la derecha.

NOTA: para poder ver claramente cómo se alinea el texto dentro de una celda a nivel superior e inferior, cread celdas con diferente cantidad de contenido, una que tenga bastante para poder apreciar cómo la altura de la celda crece y otra con poco para ver correctamente el posicionamiento.

5. En la segunda fila, debéis hacer que se fusionen dos celdas para formar una sola sin comprometer el resto de la estructura de la tabla.

6. Haced que toda la fila superior y sólo esta, tenga un color de fondo diferente al resto de las filas que forman la columna. Os podéis ayudar del menú Tabla > Insertar > Tabla... o bien desde el botón activando la caja de creación de una tabla desde donde definimos las celdas que queremos que tenga la tabla.

Recordad que algunos cambios en la tabla los deberéis hacer vosotr@s mism@s desde el código fuente para personalizarla.

7. Guardad la página con los cambios efectuados.

Ejercicio 7

Ahora por último, vamos a realizar un pequeño formulario a vuestro gusto con unos campos mínimos.

1. Editad la página " curso.html ".

2. Cread un formulario simple que contenga 3 campos diferentes de tipo input, y dos menús, uno desplegable y otro de tipo ventana con barra de desplazamiento, así como un campo para comentarios o sugerencias. Para ello os podéis ayudar del menú Insertar > Formulario > Campo de formulario.

3. Recordad que para poder enviar los datos que se introduzcan en este formulario, utilizaremos la fórmula que se señala en la unidad para que llegue a una cuenta de correo electrónico.

4. Guardad la página con los cambios efectuados.

5. Abrid la página inicial desde vuestro navegador y ¡comprobad vuestros avances!

NOTA IMPORTANTE: recordad que para crear un único formulario solamente deberemos tener una etiqueta de apertura <form> y otra de cierre </form> , y que dentro de ellas tendremos todos los campos input, select o textarea que deseemos para nuestro formulario.

Ejercicio 8

Para finalizar todo el proceso de creación de documentos electrónicos, ahora debéis traspasar los dos ficheros al espacio de servidor asignado vía FTP. Comprobad que el resultado que veáis por pantalla es el óptimo (en mejor siempre comprobarlo desde el navegador indicando la dirección web de vuestros ejercicios).