Ejercicios - Cómo realizar los ejercicios

Área de trabajo

Independientemente del editor que vaya a realizar, se recomienda dedicar un directorio específico para guardar en él los ejercicios de este curso y las pruebas que usted realice.


Como se comenta en la lección Configuración recomendada para el curso Páginas web HTML y hojas de estilo CSS, si va a utilizar Visual Studio Code, debe abrir la carpeta HTMLCSS.

Material proporcionado

La mayoría de ejercicios consisten en obtener una página completamente formateada a partir del texto de la página sin etiquetas y las imágenes.

En la página de ejercicios se proporciona para cada ejercicio tres enlaces:

Material proporcionado

A partir de la página web sin formatear, el alumno debe:

Pasos a realizar

Los pasos a realizar para realizar un ejercicio son los siguientes:

Descargar la página sin formatear

Disposición de ventanas

Las capturas siguientes corresponden al editor Visual Studio Code. En los apuntes de Informática general de mclibre.org puede encontrar las capturas correspondientes al editor Brackets.

El número de ventanas y su disposición es una elección personal que depende también de la resolución y tamaño de la pantalla (o si se dispone de una o dos pantallas). Se propone a continuación una posible disposición en tres ventanas: una ventana de Visual Studio Code y dos ventanas de navegador. Para alternar entre ventanas utilizaríamos el atajo de teclado Alt+Tab):

Las ventanas pueden ser las siguientes:

  1. Abra en Visual Studio Code la página web del ejercicio sin formatear haciendo clic en el fichero:

    Disposición de ventanas

  2. Abra una primera ventana del navegador. Abra en ella la página web del ejercicio sin formatear (en la lección Configuración recomendada para el curso HTML y CSS se explica cómo crear un atajo de teclado para hacerlo fácilmente desde Visual Studio Code):

    Disposición de ventanas

  3. Abra una segunda ventana del navegador con dos pestañas:

La disposición de las ventanas pueden ser las siguientes:

Crear y enlazar la hoja de estilo

Asignar las etiquetas HTML en la página web

El objetivo de los ejercicios es que el alumno aprenda a usar etiquetas y propiedades.

No se trata solamente de que la página creada por el alumno sea lo más parecida posible al original, sino que el alumno debe intentar utilizar las mismas etiquetas o propiedades. Es verdad que en muchos casos el resultado final se puede obtener combinando etiquetas y propiedades distintas a las utilizadas en la página de muestra, pero se pide al alumno que intente deducir el mayor número posible analizando la página (sin recurrir ni a las herramientas de desarrollador ni a mirar el código fuente).

Para deducir muchas de las etiquetas que se han utilizado en la página de muestra, desactive la hoja de estilo. Empiece el ejercicio añadiendo todas las etiquetas deducidas a partir de vista sin estilo.

A continuación, vuelva a activar la hoja de estilo. Cuando se activa la hoja de estilo podrá deducir la presencia de más etiquetas, que deberá añadir al ejercicio, y deberá deducir las propiedades de la hoja de estilo, que deberá añadir a su hoja de estilo.

Si en cualquiera de estas dos fases un resultado puede obtenerse con distintas etiquetas o propiedades, se puede utilizar cualquiera de ellas. Por ello, una vez terminado el ejercicio conviene revisar el código fuente original, para aprender en su caso otras formas de conseguir el resultado.

Para ayudar a la creación de etiquetas en Visual Studio Code, se recomienda instalar la extensión Close HTML/XML tag.

Escribir la hoja de estilo

Se aconseja escribir la hoja de estilo siguiendo las recomendaciones que se comentan en la lección Guía de estilo de las hojas de estilo.

Corregir errores en las páginas web y en las hojas de estilo

¡Atención!Este apartado está pendiente de actualizar para Visual Studio Code. Actualmente hace referencia a Brackets, el editor que utilicé durante el curso 2015/16.

Las páginas web y las hojas de estilo no deben contener errores.

Para facilitar la identificación de errores, se recomienda instalar las extensiones W3CValidation y CSSLint de Brackets. Pero no basta con tener instaladas las extensiones; es necesario fijarse a menudo en el icono de notificación de errores de estas extensiones mientras se están editando la página web o la hoja de estilo.

Soluciones de los ejercicios

La "solución" de cada ejercicio es el propio código fuente HTML y CSS de la página web y de su hoja de estilo.

Para ver el código fuente de una página, haga clic derecho sobre el texto de la página (no sobre las imágenes) y elija la opción "Ver código fuente de la página" o utilice el atajo de teclado Ctrl+U.

Material proporcionado

Se abrirá una pestaña mostrando el código fuente de la página formateada (es decir, la mitad de la "solución" del ejercicio). Para ver la hoja de estilo, haga clic en el enlace a la hoja de estilo.

Material proporcionado

En la misma pestaña se mostrará la hoja de estilo (es decir, la otra mitad de la "solución" del ejercicio).

Material proporcionado

Nota: En el examen, el alumno tan sólo dispondrá de capturas de pantalla, no dispondrá de página de comentarios ni podrá acceder al código fuente.

Consejos y comentarios generales