Title: Actividad 3: HTML5 + CSS (propiedades y etiquetas semánticas)
Course: 2025 - LI - Desarrollo Web del Lado del Servidor 2-2 > Section: Unidad 1 - Introducción al Desarrollo Web

Objetivo
Comprender y practicar:

1. las propiedades básicas de CSS aplicadas a etiquetas,
2. el uso de etiquetas HTML5 semánticas (<header>, <nav>, <main>, <section>, <article>, <footer>),
3. la integración de CSS dentro del documento.

Instrucciones

1. En la parte superior de tu trabajo (dentro del archivo HTML, como comentario), escribe tu nombre completo y el nombre del profesor.
  - Ejemplo:

<!-- Alumno: Juan Pérez | Profesor: Erick Iván Sánchez -->


2. Abre Visual Studio Code (o tu editor de preferencia).
3. Crea un archivo nuevo y guárdalo como actividad3.html.
  - Todo tu documento debe estar dentro de <html> ... </html>, dividido en <head> y <body>.
4. Dentro de <head> incluye:
  - <title> con el nombre de tu página (ejemplo: Mi sitio con HTML5 y CSS).
  - Un bloque de estilos internos usando <style> ... </style> donde escribirás tu CSS.
Ejemplo de cómo quedaría un bloque CSS dentro de <style>:

body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    color: #333333;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 15px;
    text-align: center;
}

nav a {
    margin: 0 10px;
    text-decoration: none;
    color: white;
}


(Este es solo un ejemplo. Puedes cambiar colores, tipografía o márgenes a tu gusto).
5. Dentro de <body> construye una estructura semántica mínima con estas secciones:
  - <header>: coloca un título principal con <h1>.
  - <nav>: agrega 2–3 enlaces (<a href="#">) como menú de navegación.
  - <main>: contendrá el contenido principal de tu página.
    - Dentro de <main>, crea una <section> que incluya un <article> con:
      - Un subtítulo (<h2>)
      - Dos párrafos (<p>)
      - Una lista (<ul> con al menos 3 <li>)
  - <footer>: agrega un texto corto (ejemplo: “Página de práctica – [tu nombre]”).
6. Evidencia obligatoria:
  - Una captura del código completo en VS Code (comentario con tu nombre, bloque <style> y estructura HTML5).
  - Una captura de la página funcionando en el navegador (que se note el estilo aplicado y la estructura pedida).

Descripción rápida (referencia para clase)

- HTML5 semántico
  - <header>: cabecera del sitio/sección.
  - <nav>: barra de navegación.
  - <main>: contenido principal de la página.
  - <section>: bloque temático de contenido.
  - <article>: contenido independiente dentro de una sección.
  - <footer>: pie de página.
- CSS (propiedades básicas)
  - font-family, font-size: fuente y tamaño.
  - color, background-color: color de texto y de fondo.
  - margin, padding: espacio externo e interno.
  - border, border-radius: borde y esquinas redondeadas.
  - text-decoration: decoración del texto (subrayado, etc.).
  - display, text-align: control de disposición y alineación.

Método de entrega
Convierte tus capturas en un archivo PDF y súbelo a la plataforma.

Objetivo
Comprender y practicar:

1. las propiedades básicas de CSS aplicadas a etiquetas,
2. el uso de etiquetas HTML5 semánticas (<header>, <nav>, <main>, <section>, <article>, <footer>),
3. la integración de CSS dentro del documento.

Instrucciones

1. En la parte superior de tu trabajo (dentro del archivo HTML, como comentario), escribe tu nombre completo y el nombre del profesor.
  - Ejemplo:

<!-- Alumno: Juan Pérez | Profesor: Erick Iván Sánchez -->


2. Abre Visual Studio Code (o tu editor de preferencia).
3. Crea un archivo nuevo y guárdalo como actividad3.html.
  - Todo tu documento debe estar dentro de <html> ... </html>, dividido en <head> y <body>.
4. Dentro de <head> incluye:
  - <title> con el nombre de tu página (ejemplo: Mi sitio con HTML5 y CSS).
  - Un bloque de estilos internos usando <style> ... </style> donde escribirás tu CSS.
Ejemplo de cómo quedaría un bloque CSS dentro de <style>:

body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    color: #333333;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 15px;
    text-align: center;
}

nav a {
    margin: 0 10px;
    text-decoration: none;
    color: white;
}


(Este es solo un ejemplo. Puedes cambiar colores, tipografía o márgenes a tu gusto).
5. Dentro de <body> construye una estructura semántica mínima con estas secciones:
  - <header>: coloca un título principal con <h1>.
  - <nav>: agrega 2–3 enlaces (<a href="#">) como menú de navegación.
  - <main>: contendrá el contenido principal de tu página.
    - Dentro de <main>, crea una <section> que incluya un <article> con:
      - Un subtítulo (<h2>)
      - Dos párrafos (<p>)
      - Una lista (<ul> con al menos 3 <li>)
  - <footer>: agrega un texto corto (ejemplo: “Página de práctica – [tu nombre]”).
6. Evidencia obligatoria:
  - Una captura del código completo en VS Code (comentario con tu nombre, bloque <style> y estructura HTML5).
  - Una captura de la página funcionando en el navegador (que se note el estilo aplicado y la estructura pedida).

Descripción rápida (referencia para clase)

- HTML5 semántico
  - <header>: cabecera del sitio/sección.
  - <nav>: barra de navegación.
  - <main>: contenido principal de la página.
  - <section>: bloque temático de contenido.
  - <article>: contenido independiente dentro de una sección.
  - <footer>: pie de página.
- CSS (propiedades básicas)
  - font-family, font-size: fuente y tamaño.
  - color, background-color: color de texto y de fondo.
  - margin, padding: espacio externo e interno.
  - border, border-radius: borde y esquinas redondeadas.
  - text-decoration: decoración del texto (subrayado, etc.).
  - display, text-align: control de disposición y alineación.

Método de entrega
Convierte tus capturas en un archivo PDF y súbelo a la plataforma.