Ejercicios - Cómo realizar los ejercicios

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. El material que se proporciona en cada ejercicio, al que se accede con tres enlaces, es el siguiente:

Material proporcionado


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

Se aconseja empezar añadiendo las etiquetas e imágenes en la página web y después dar las propiedades de estilo, pero se puede ir alternando entre las dos tareas, a elección del alumno.

En el apartado siguiente de esta lección se detallan los pasos a realizar para resolver un ejercicio.


Se aconseja al alumno que en un primer momento intente realizar el ejercicio sin consultar la página de comentarios ni consultar el código fuente de la página a reproducir.

Si no es capaz de resolverlo, consulte la página de comentarios que le dará pistas sobre las etiquetas y propiedades de estilo utilizadas.

Si aún así no es capaz de resolverlo, consulte el código fuente de la página formateada.

Se puede considerar que se ha completado completamente un ejercicio cuando las páginas de muestra y la del alumno tienen un aspecto idéntico en el navegador, pero se pueden admitir pequeñas diferencias, como por ejemplo que dos distancias o tamaños sean ligeramente diferentes.

En algunos ejercicios habrá que comparar las páginas para diferentes tamaños de ventana.

Como en muchos casos se pueden conseguir los mismos resultados de varias maneras, se aconseja consultar el código fuente de la página formateada y suhoja de estilo.

Nota:

Los ejercicios incluyen en la parte inferior un enlace a la página principal de los apuntes que no es necesario reproducir al hacer los ejercicios:

Enlace inferior en las páginas de ejercicios


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.

Pasos a realizar

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

Descargar la página sin formatear

Abrir las páginas en Brackets y en los navegadores

Crear y enlazar la hoja de estilo

Asignar las etiquetas HTML en la página web

El objetivo de los ejercicios es obtener una página web lo más parecida posible al original. Eso incluye tanto el aspecto visual como las etiquetas utilizadas.

Algunas etiquetas pueden deducirse del aspecto de la página cuando se desactiva la hoja de estilo. Esas etiquetas deben emplearse.

Otras etiquetas pueden deducirse del aspecto de la página cuando se aplica la hoja de estilo. Esas etiquetas deben emplearse.

En algunos casos pueden utilizarse diferentes etiquetas y no se puede deducir cuáles a partir de la página (con o sin hoja de estilo). En esos casos, se puede utilizar cualquiera de ellas, aunque a veces unas se utilizan más que otras.

Para añadir las etiquetas en Brackets, se recomienda instalar la extensión Brackets Surround.

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

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.