Title: Actividad 7: Estilizando un HTML con CSS
Course: 2025 - LI - Desarrollo Web del Lado del Servidor 2-2 > Section: Unidad 1 - Introducción al Desarrollo Web

Objetivo

Practicar el uso de clases en CSS y aplicar propiedades correctas para dar formato a un documento HTML ya definido.

Instrucciones

1. Identificación
Al inicio del documento escribe tu nombre completo y el nombre del profesor.
2. Archivos base
Copia el siguiente código HTML en tu editor. No lo modifiques, solo trabajarás en el archivo CSS:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Actividad 7 - Estilos en CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="encabezado">
    <h1 class="titulo">Bienvenido a mi Página</h1>
  </header>

  <nav class="menu">
    <ul>
      <li><a href="#">Inicio</a></li>
      <li><a href="#">Servicios</a></li>
      <li><a href="#">Contacto</a></li>
    </ul>
  </nav>

  <section class="contenido">
    <h2 class="subtitulo">Sección Principal</h2>
    <p class="texto">Este es un párrafo de ejemplo para aplicar estilos de fuente, color y espaciado.</p>
  </section>

  <footer class="pie">
    <p class="creditos">Página creada como práctica de CSS</p>
  </footer>
</body>
</html>


1. Tu tarea en el CSS (archivo styles.css)
Aplica propiedades a las clases para lograr lo siguiente:
  - .encabezado: fondo con color llamativo, altura de al menos 100px.
  - .titulo: fuente grande, centrada y con un color que contraste.
  - .menu: que los elementos de lista aparezcan en línea (no en columna), con algo de separación.
  - .contenido: debe tener un ancho máximo de 800px y estar centrado en la página.
  - .subtitulo: un color diferente al título principal, tamaño intermedio.
  - .texto: justificar el texto y cambiar el interlineado.
  - .pie: fondo gris claro y texto centrado.
2. Reflexión
Al final del documento en PDF escribe 5–6 líneas sobre:
  - ¿Qué tan importante fue separar HTML y CSS en esta actividad?
  - ¿Qué clase o selector te costó más aplicar y por qué?
3. Evidencia
  - Capturas del HTML en el navegador ya con los estilos aplicados.
  - Copia de tu archivo styles.css.
  - Todo en un archivo PDF.

Explicación de etiquetas HTML usadas en el documento

- <!DOCTYPE html>
  - Indica al navegador que el documento está escrito en HTML5.
  - No tiene atributos ni cierre, es una instrucción, no una etiqueta normal.
- <meta charset="UTF-8">
  - Define la codificación de caracteres del documento (UTF-8 permite usar acentos, ñ y símbolos).
  - Es muy importante para evitar errores de caracteres extraños.
- <link rel="stylesheet" href="styles.css">
  - Vincula el documento HTML con un archivo externo, en este caso la hoja de estilos CSS.
  - Atributos más usados:
    - rel: relación del documento (ej. stylesheet = hoja de estilos).
    - href: dirección del archivo que se está enlazando.
- <h1>
  - Es el título principal de la página.
  - Propiedades comunes en CSS: font-size, color, text-align.
  - Solo debe haber un <h1> por página (representa el encabezado más importante).
- <h2>
  - Representa un subtítulo o encabezado secundario.
  - Se usa para secciones internas.
  - Propiedades comunes en CSS: tamaño menor que el <h1>, color, estilo de fuente.

Método de entrega

Convierte tu evidencia en un archivo PDF y súbelo a la plataforma.

Objetivo

Practicar el uso de clases en CSS y aplicar propiedades correctas para dar formato a un documento HTML ya definido.

Instrucciones

1. Identificación
Al inicio del documento escribe tu nombre completo y el nombre del profesor.
2. Archivos base
Copia el siguiente código HTML en tu editor. No lo modifiques, solo trabajarás en el archivo CSS:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Actividad 7 - Estilos en CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="encabezado">
    <h1 class="titulo">Bienvenido a mi Página</h1>
  </header>

  <nav class="menu">
    <ul>
      <li><a href="#">Inicio</a></li>
      <li><a href="#">Servicios</a></li>
      <li><a href="#">Contacto</a></li>
    </ul>
  </nav>

  <section class="contenido">
    <h2 class="subtitulo">Sección Principal</h2>
    <p class="texto">Este es un párrafo de ejemplo para aplicar estilos de fuente, color y espaciado.</p>
  </section>

  <footer class="pie">
    <p class="creditos">Página creada como práctica de CSS</p>
  </footer>
</body>
</html>


1. Tu tarea en el CSS (archivo styles.css)
Aplica propiedades a las clases para lograr lo siguiente:
  - .encabezado: fondo con color llamativo, altura de al menos 100px.
  - .titulo: fuente grande, centrada y con un color que contraste.
  - .menu: que los elementos de lista aparezcan en línea (no en columna), con algo de separación.
  - .contenido: debe tener un ancho máximo de 800px y estar centrado en la página.
  - .subtitulo: un color diferente al título principal, tamaño intermedio.
  - .texto: justificar el texto y cambiar el interlineado.
  - .pie: fondo gris claro y texto centrado.
2. Reflexión
Al final del documento en PDF escribe 5–6 líneas sobre:
  - ¿Qué tan importante fue separar HTML y CSS en esta actividad?
  - ¿Qué clase o selector te costó más aplicar y por qué?
3. Evidencia
  - Capturas del HTML en el navegador ya con los estilos aplicados.
  - Copia de tu archivo styles.css.
  - Todo en un archivo PDF.

Explicación de etiquetas HTML usadas en el documento

- <!DOCTYPE html>
  - Indica al navegador que el documento está escrito en HTML5.
  - No tiene atributos ni cierre, es una instrucción, no una etiqueta normal.
- <meta charset="UTF-8">
  - Define la codificación de caracteres del documento (UTF-8 permite usar acentos, ñ y símbolos).
  - Es muy importante para evitar errores de caracteres extraños.
- <link rel="stylesheet" href="styles.css">
  - Vincula el documento HTML con un archivo externo, en este caso la hoja de estilos CSS.
  - Atributos más usados:
    - rel: relación del documento (ej. stylesheet = hoja de estilos).
    - href: dirección del archivo que se está enlazando.
- <h1>
  - Es el título principal de la página.
  - Propiedades comunes en CSS: font-size, color, text-align.
  - Solo debe haber un <h1> por página (representa el encabezado más importante).
- <h2>
  - Representa un subtítulo o encabezado secundario.
  - Se usa para secciones internas.
  - Propiedades comunes en CSS: tamaño menor que el <h1>, color, estilo de fuente.

Método de entrega

Convierte tu evidencia en un archivo PDF y súbelo a la plataforma.