HTML / CSS. Ejercicios de Primeras páginas

Estos ejercicios tratan sobre los temas tratados en la Semana 2 del curso.

Para facilitar la realización de los ejercicios, se proporcionan unas plantillas de los ejercicios Primeras páginas. Una vez descargado el fichero zip:

  1. Descomprima las plantillas en la carpeta ejercicios. Se creará una carpeta primeras-paginas-plantillas.
  2. Renombre la carpeta primeras-paginas-plantillas como primeras-paginas.

Las capturas de pantalla están tomadas con un ancho de ventana de 1024px aproximadamente.

⚠️ En algunos aspectos, no es necesario que el resultado sea absolutamente exacto, sobre todo porque algunos detalles no tienen importancia. Por ejemplo, basta con que la ventana del navegador sea un poco más ancha o estrecha para que las palabras salten de una línea a la siguiente. Los valores de tamaños y distancias utilizados suelen ser valores "redondos", pero acertar el valor exacto puede necesitar varios intentos. Con que el parecido sea razonable, es suficiente.

Primeras páginas 1 A - Asociar hojas de estilo a páginas web (1)

  1. Abra en Visual Studio Code la página pp-1-a-1.html.
  2. Asocie la hoja de estilo pp-1-a-1.css a esta página web.
  3. Abra la página pp-1-a-1.html en un navegador y compruebe que el contenido se ve como en la captura siguiente:

    Ejercicio Primeras páginas 1 A 1

  4. Abra en Visual Studio Code la página pp-1-a-2.html.
  5. Asocie la hoja de estilo pp-1-a-2.css a esta página web.
  6. Abra la página pp-1-a-2.html en un navegador y compruebe que el contenido se ve como en la captura siguiente:

    Ejercicio Primeras páginas 1 A 2

Nota: Colores empleados:      pink,      red,      lightblue y      blue.

Primeras páginas 1 B - Asociar hojas de estilo a páginas web (2)

  1. Abra en Visual Studio Code la página pp-1-b-1.html.
  2. Asocie la hoja de estilo pp-1-b.css a esta página web.
  3. Abra la página pp-1-b-1.html en un navegador y compruebe que el contenido se ve como en la captura siguiente:

    Ejercicio Primeras páginas 1 B 1

  4. Abra en Visual Studio Code la página pp-1-b-2.html.
  5. Asocie la hoja de estilo pp-1-b.css a esta página web.
  6. Abra la página pp-1-b-2.html en un navegador y compruebe que el contenido se ve como en la captura siguiente:

    Ejercicio Primeras páginas 1 B 2

Nota: Colores empleados:      lightgreen y      green.

Primeras páginas 1 C - Asociar hojas de estilo a páginas web (3)

  1. Abra en Visual Studio Code la página pp-1-c-1.html.
  2. Asocie la hoja de estilo pp-1-c-1.css a esta página web.
  3. Abra la página pp-1-c-1.html en un navegador y compruebe que el contenido se ve como en la captura siguiente:

    Ejercicio Primeras páginas 1 C 1

  4. Abra en Visual Studio Code la página pp-1-c-2.html.
  5. Asocie la hoja de estilo pp-1-c-2.css a esta página web.
  6. Abra la página pp-1-c-2.html en un navegador y compruebe que el contenido se ve como en la captura siguiente:

    Ejercicio Primeras páginas 1 C 2

  7. Abra en Visual Studio Code la página pp-1-c-3.html.
  8. Asocie la hoja de estilo pp-1-c-1.css a esta página web.
  9. Abra la página pp-1-c-3.html en un navegador y compruebe que el contenido se ve como en la captura siguiente:

    Ejercicio Primeras páginas 1 C 3

Nota: Colores empleados:      plum,      purple,      silver y      dimgray.

Primeras páginas 2 - Corregir errores en página web y hoja de estilo

  1. Abra en Visual Studio Code la página pp-2.html.
  2. Corrija los errores sintácticos de la página web y los indicados por VSCode.
  3. Formatee la página web con el atajo Alt+Mayús+f (en Windows) o Ctrl+Mayús+i (en LLiureX).
  4. Abra en Visual Studio Code la hoja de estilo pp-2.css.
  5. Corrija los errores sintácticos de la hoja de estilo y los indicados por VSCode.
  6. Formatee la hoja de estilo con CSScomb con el atajo Alt+Mayús+c Alt+Mayús+f (en Windows) o Ctrl+Mayús+c Ctrl+Mayús+i (en LliureX).
  7. Abra la página pp-2.html en un navegador y compruebe que el contenido se ve como en la captura siguiente:

    Ejercicio Primeras páginas 2

Primeras páginas 3 A - Crear página web

  1. Abra en Visual Studio Code la página pp-3-a.html.
  2. Añada las etiquetas de bloque o secciones necesarias en cada párrafo de manera que al abrir la página web en un navegador el contenido se vea como en la captura siguiente:

    Ejercicio Primeras páginas 3 A

  3. Formatee la página web con el atajo Alt+Mayús+f (en Windows) o Ctrl+Mayús+i (en LLiureX).

Primeras páginas 3 B - Crear hoja de estilo

  1. Copie la página pp-3-a.html en la carpeta primeras-paginas-3-b cambiando su nombre a pp-3-b.html.
  2. Abra en Visual Studio Code la página pp-3-b.html.
  3. Abra en Visual Studio Code la hoja de estilo pp-3-b.css.
  4. Enlace la hoja de estilo pp-3-b.css añadiendo la etiqueta <link>.
  5. Añada las sentencias en la hoja de estilo de manera que al abrir la página web en un navegador el contenido se vea como en la captura siguiente:

    Ejercicio Primeras páginas 3 B

  6. Formatee la hoja de estilo con CSScomb con el atajo Alt+Mayús+c Alt+Mayús+f (en Windows) o Ctrl+Mayús+c Ctrl+Mayús+i (en LliureX).

Nota: Colores empleados:      red y      blue.