Unidad 1 · Semana 1 — Portafolio y Render

01

HTML5 semántico: header, nav, main, section, article, footer

⏱ 0:00–0:45práctica guiada

"Semántico" significa que cada etiqueta describe qué es el contenido, no solo cómo se ve. Un lector de pantalla, un buscador o tú mismo en seis meses entienden la página con solo mirar las etiquetas.

01

<header> — la cabecera de la página

Contiene tu nombre, título profesional y, opcionalmente, la navegación. Va una sola vez, arriba de todo.

02

<nav> — los enlaces de navegación

Envuelve la lista de enlaces internos (Sobre mí, Skills, Contacto). Va normalmente dentro de <header>.

03

<main> — el contenido único de la página

Una sola vez por página. Todo lo que no sea header/footer/nav repetido va aquí dentro.

04

<section> y <article> — bloques de contenido

<section> agrupa contenido relacionado bajo un título propio (ej. "Skills"). <article> es contenido que tendría sentido solo, fuera de la página (ej. cada proyecto de tu portafolio es un <article> dentro de la <section> "Proyectos").

05

<footer> — el pie de página

Datos de contacto, redes sociales, año y créditos. Va una sola vez, abajo de todo.

esqueleto-semantico.html

<!-- header: cabecera de la página, va una sola vez, arriba de todo -->
<header>
  <!-- h1: el único título principal de la página completa -->
  <h1>Tu Nombre</h1>
  <!-- p: subtítulo descriptivo, no cuenta como encabezado -->
  <p>Estudiante de Desarrollo Web</p>
  <!-- nav: agrupa los enlaces de navegación interna del sitio -->
  <nav>
    <!-- href="#sobre-mi" salta al elemento con id="sobre-mi" de más abajo -->
    <a href="#sobre-mi">Sobre mí</a>
    <!-- salta al id="skills" -->
    <a href="#skills">Skills</a>
    <!-- salta al id="contacto" -->
    <a href="#contacto">Contacto</a>
  <!-- cierre de nav -->
  </nav>
<!-- cierre de header -->
</header>

<!-- main: el contenido único de la página, una sola vez -->
<main>
  <!-- section con id="sobre-mi": aquí aterriza el primer enlace del nav -->
  <section id="sobre-mi">
    <!-- h2: título propio de esta sección -->
    <h2>Sobre mí</h2>
    <!-- p: aquí va el texto de esta sección -->
    <p>…</p>
  <!-- cierre de la sección "sobre-mi" -->
  </section>

  <!-- section con id="skills": aquí aterriza el segundo enlace del nav -->
  <section id="skills">
    <!-- h2: título propio de esta sección -->
    <h2>Skills</h2>
    <!-- article: cada skill tendría sentido leída sola, fuera de la página -->
    <article>HTML5</article>
    <!-- segundo article, mismo criterio -->
    <article>Tailwind CSS</article>
  <!-- cierre de la sección "skills" -->
  </section>
<!-- cierre de main -->
</main>

<!-- footer con id="contacto": aquí aterriza el tercer enlace; va una sola vez, al final -->
<footer id="contacto">
  <!-- &copy; genera el símbolo © -->
  <p>&copy; 2026 Tu Nombre</p>
<!-- cierre de footer -->
</footer>

TIP

Navegable por teclado quiere decir: apretando Tab repetidamente desde el navegador, el foco debe pasar visiblemente por cada enlace del <nav> en orden. Con HTML nativo (<a>, <button>) esto funciona gratis, sin JavaScript.

de dónde sale esto MDN: <header> MDN: <nav> MDN: <main> MDN: <section> MDN: <article> MDN: <footer>

02

Instalación de VS Code + Live Server + Git init

⏱ 0:45–1:15práctica guiada

Tu editor de código, tu vista previa en vivo, y el control de versiones que vas a usar durante las 8 semanas. Se instala una sola vez.

01

Instalar Visual Studio Code

Entra a code.visualstudio.com, descarga el instalador para tu sistema operativo (Windows/Mac/Linux) y ejecútalo con todas las opciones por defecto.

02

Instalar la extensión Live Server

Dentro de VS Code: Ctrl+Shift+X abre el panel de extensiones → escribe "Live Server" → instala la de autor Ritwick Dey (es la más usada, con millones de instalaciones). Sirve para ver tu HTML en el navegador y que se recargue solo cada vez que guardas.

03

Instalar Git

Entra a git-scm.com, descarga Git para tu sistema operativo e instálalo con las opciones por defecto. Es el programa que registra el historial de cambios de tu proyecto.

04

Crear tu carpeta de proyecto e inicializar Git

Crea una carpeta, por ejemplo portafolio, ábrela en VS Code (Archivo → Abrir Carpeta) y en la terminal integrada de VS Code (Ctrl+ñ o Terminal → Nueva Terminal) corre:

TERMINAL DE VS CODE — PowerShell · en tu carpeta portafolio

# Define qué nombre de autor va a figurar en tus commits (--global: se configura una sola vez por computadora)
git config --global user.name "Tu Nombre Completo"
# Define qué correo asociar a tus commits; usa el mismo de tu cuenta de GitHub
git config --global user.email "tu-correo@ejemplo.com"
# Crea la carpeta oculta .git: a partir de aquí Git lleva el historial de esta carpeta
git init

Esto crea una carpeta oculta .git que empieza a llevar el historial de versiones de tu proyecto.

OJO

Si al escribir git en la terminal aparece "comando no reconocido", cierra y vuelve a abrir VS Code por completo (no solo la terminal) para que reconozca la instalación nueva.

de dónde sale esto Docs oficiales VS Code Marketplace: Live Server git-scm.com/doc

03

Maquetado guiado del portafolio

⏱ 1:15–2:45práctica guiada

Vas a escribir el archivo completo. Copia esta base, guárdala como index.html dentro de tu carpeta portafolio, y reemplaza los textos entre [corchetes] por los tuyos.

index.html — archivo NUEVO

<!-- DOCTYPE: le dice al navegador que interprete esto como HTML5 -->
<!DOCTYPE html>
<!-- html: la raíz del documento; lang="es" ayuda a lectores de pantalla y buscadores -->
<html lang="es">
<!-- head: metadatos que el navegador necesita pero que NO se ven en la página -->
<head>
  <!-- UTF-8: permite escribir tildes y ñ sin que se rompan -->
  <meta charset="UTF-8">
  <!-- viewport: hace que la página se adapte al ancho de un celular -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- title: el texto que aparece en la pestaña del navegador -->
  <title>[Tu Nombre] · Portafolio</title>
<!-- cierre de head: termina la zona de metadatos -->
</head>
<!-- body: todo lo que SÍ se ve en pantalla va aquí dentro -->
<body>

  <!-- header: cabecera de la página, va una sola vez -->
  <header>
    <!-- h1: el único título principal de toda la página -->
    <h1>[Tu Nombre]</h1>
    <!-- p: subtítulo descriptivo, no cuenta como encabezado -->
    <p>[Estudiante de Desarrollo Web · UTH]</p>
    <!-- nav: agrupa los enlaces de navegación interna -->
    <nav>
      <!-- ul: lista no ordenada que contiene los enlaces -->
      <ul>
        <!-- li + a: cada ítem es un enlace; href="#sobre-mi" salta al id igual más abajo -->
        <li><a href="#sobre-mi">Sobre mí</a></li>
        <!-- salta a la sección con id="skills" -->
        <li><a href="#skills">Skills</a></li>
        <!-- salta al footer con id="contacto" -->
        <li><a href="#contacto">Contacto</a></li>
      <!-- cierre de la lista -->
      </ul>
    <!-- cierre de nav -->
    </nav>
  <!-- cierre de header -->
  </header>

  <!-- main: el contenido único de la página, una sola vez -->
  <main>
    <!-- section con id="sobre-mi": aquí aterriza el primer enlace del nav -->
    <section id="sobre-mi">
      <!-- h2: título propio de esta sección -->
      <h2>Sobre mí</h2>
      <!-- p: tu texto de presentación -->
      <p>[2-3 frases: quién eres, qué estás estudiando, qué te interesa del desarrollo web.]</p>
    <!-- cierre de la sección "sobre-mi" -->
    </section>

    <!-- section con id="skills": aquí aterriza el segundo enlace del nav -->
    <section id="skills">
      <!-- h2: título propio de esta sección -->
      <h2>Skills</h2>
      <!-- article: cada skill tiene sentido leída sola, por eso NO es un div -->
      <article>
        <!-- h3: un nivel debajo del h2 de la sección -->
        <h3>HTML5</h3>
        <!-- p: descripción breve de la skill -->
        <p>Estructura semántica de páginas web.</p>
      <!-- cierre de este article -->
      </article>
      <!-- segundo article: mismo patrón, otra skill -->
      <article>
        <!-- h3: nombre de la skill -->
        <h3>Tailwind CSS</h3>
        <!-- p: descripción breve de la skill -->
        <p>Estilos responsivos utility-first.</p>
      <!-- cierre del segundo article -->
      </article>
      <!-- tercer article: mismo patrón, otra skill -->
      <article>
        <!-- h3: nombre de la skill; &amp; se ve como el símbolo & -->
        <h3>Git &amp; GitHub</h3>
        <!-- p: descripción breve de la skill -->
        <p>Control de versiones y despliegue.</p>
      <!-- cierre del tercer article -->
      </article>
    <!-- cierre de la sección "skills" -->
    </section>
  <!-- cierre de main -->
  </main>

  <!-- footer con id="contacto": aquí aterriza el tercer enlace del nav; va una sola vez, al final -->
  <footer id="contacto">
    <!-- h2: título propio de esta sección -->
    <h2>Contacto</h2>
    <!-- p: reemplaza por tu correo real -->
    <p>[tu-correo@ejemplo.com]</p>
    <!-- &copy; genera el símbolo © -->
    <p>&copy; 2026 [Tu Nombre]</p>
  <!-- cierre del footer -->
  </footer>

<!-- cierre de body -->
</body>
<!-- cierre de html: fin del documento -->
</html>

→

Ver el resultado en vivo

Guarda el archivo, haz clic derecho sobre index.html en el explorador de VS Code y elige "Open with Live Server". Se abre el navegador en una dirección como 127.0.0.1:5500 y se refresca sola cada vez que guardas.

→

Verificar que sea navegable por teclado

Con el navegador enfocado, presiona Tab varias veces: el foco debe recorrer "Sobre mí" → "Skills" → "Contacto" en orden, mostrando un contorno visible sobre cada enlace.

de dónde sale esto MDN: Estructura de un documento HTML MDN: h1–h6

04

Crear repo en GitHub y primer git push

⏱ 2:45–3:15práctica guiada

GitHub guarda tu código en la nube y es lo que Render va a leer para publicar tu sitio. Necesitas una cuenta gratuita en github.com (si no tienes, créala con tu correo antes de seguir).

01

Crear el repositorio vacío en GitHub

Cada práctica del curso va en su propio repositorio, con el nombre u1s1-apellidopaterno-apellidomaterno-nombres (minúsculas, sin acentos, ñ → n, espacios → guion). Ej.: María José Hernández Núñez → u1s1-hernandez-nunez-maria-jose. En github.com, botón "New repository" (o el ícono + arriba a la derecha → "New repository"). En Repository name pega el nombre que copiaste del generador de abajo (u1s1-…). Déjalo Public. No marques "Add a README", ".gitignore" ni "license" (el repo debe nacer vacío para evitar conflictos). Clic en "Create repository".

La regla del nombre · siempre igual (repo de GitHub y servicio de Render)

prefijou1s1- apellido paternohernandez- apellido maternonunez- nombre(s)maria-jose

Prefijo de la práctica: u + número de unidad + s + número de semana. Esta práctica es u1s1.
Todo en minúsculas, sin acentos (á → a), la ñ se escribe n y los espacios se cambian por guion -.
Orden fijo: prefijo → apellido paterno → apellido materno → nombre(s). Si tienes dos nombres, van los dos.
El mismo nombre se usa en dos lugares: como Repository name en GitHub y como Name del servicio en Render (paso 05.4). Así tu URL queda https://u1s1-….onrender.com.
GitHub solo acepta letras sin acento, números, -, _ y . (máximo 100 caracteres). Por eso la regla quita acentos y espacios.

Alumno	Nombre del repositorio y del servicio de Render
María José Hernández Núñez	`u1s1-hernandez-nunez-maria-jose`
José Ángel De la Cruz Peña	`u1s1-de-la-cruz-pena-jose-angel`
Ana López (un solo apellido)	`u1s1-lopez-ana`

Prefijo	Práctica del curso
`u1s1`	Unidad 1 · Semana 1 — Sitio estático en Render (esta guía)
`u1s2`	Unidad 1 · Semana 2 — Tailwind CSS
`u2s3`	Unidad 2 · Semana 3 — Django + MySQL en Aiven
`u2s4`	Unidad 2 · Semana 4 — Modelos y deploy en Render
`u3s5`	Unidad 3 · Semana 5 — CRUD con ModelForms
`u3s6`	Unidad 3 · Semana 6 — Autenticación y sesiones
`u4s7`	Unidad 4 · Semana 7 — Pulido y defensa
`u4s8`	Unidad 4 · Semana 8 — Deploy final

Genera tu nombre sin errores

Práctica Apellido paterno Apellido materno Nombre(s)

Repositorio y servicio de Renderu1s1-hernandez-nunez-maria-jose

Tu repo quedará en https://github.com/TU_USUARIO/u1s1-hernandez-nunez-maria-jose y, con el mismo nombre en Render (paso 05.4), tu sitio en https://u1s1-hernandez-nunez-maria-jose.onrender.com. Los datos de ejemplo están precargados: escribe los tuyos y usa «Copiar nombre».

02

Conectar tu carpeta local con el repo remoto

GitHub te muestra una URL como https://github.com/TU_USUARIO/u1s1-hernandez-nunez-maria-jose.git: cópiala. En la terminal de VS Code, pega estos comandos uno por uno (en git remote add pega tu URL):

TERMINAL DE VS CODE — PowerShell · en tu carpeta portafolio

# Agrega TODOS los archivos de la carpeta al "stage" (la lista de cambios listos para guardar)
git add .
# Guarda esos archivos como una "fotografía" en el historial, con un mensaje que describe el cambio
git commit -m "Primer commit: estructura semántica del portafolio"
# Renombra la rama actual a "main", el nombre que GitHub y Render esperan
git branch -M main
# Conecta tu carpeta con el repo vacío de GitHub bajo el alias "origin"; pega TU URL
git remote add origin https://github.com/TU_USUARIO/u1s1-hernandez-nunez-maria-jose.git
# Sube tus commits a GitHub; -u deja "origin main" recordado para que después alcance con "git push"
git push -u origin main

03

Verificar

Recarga la página del repo en github.com: deberías ver tu index.html listado ahí. Si te pide iniciar sesión desde la terminal, sigue el flujo del navegador que abre automáticamente.

OJO

Si git push pide usuario y contraseña y la rechaza: GitHub ya no acepta tu contraseña normal por terminal. Elige "Sign in with your browser" si aparece, o genera un Personal Access Token desde Settings → Developer settings en github.com y úsalo como contraseña.

de dónde sale esto GitHub Docs: Create a repo GitHub Docs: git push

05

Cuenta en Render + Static Site conectado al repo

⏱ 3:15–4:00práctica guiada

Render publica sitios estáticos gratis, sin pedir tarjeta de crédito, y entrega HTTPS automático.

01

Crear la cuenta

Entra a render.com → botón "Get Started". Tienes dos caminos:

(A) Con GitHub — recomendado: clic en "GitHub" y autoriza el acceso. Es más rápido porque Render ya puede leer tus repos sin pasos extra.
(B) Con correo: clic en "Sign up with email" y completa nombre, correo y contraseña.
Ningún camino pide tarjeta de crédito para Static Sites.

02

Poner tus nombres y apellidos reales

Si entraste con GitHub, Render copia el nombre que tengas cargado ahí —muchas veces un apodo o directamente vacío. Para que tu nombre completo quede correcto (lo vas a necesitar para la entrega y la presentación):

1. Arriba a la derecha del dashboard, clic en tu avatar/ícono de perfil.
2. Elige "Account Settings".
3. En la pestaña "Profile", busca el campo de nombre.
4. Escribe tus Nombres y Apellidos completos, en el mismo formato que uses en GitHub y en la entrega de la tarea (ej. Bernardo Prado Díaz).
5. Guarda con "Save" / "Update".

TIP

Si te registraste con GitHub y tu perfil de GitHub tiene apodo, corrígelo también ahí: github.com → tu avatar → Settings → campo "Name" → guardar. Así el nombre queda igual en las dos plataformas que vas a mostrar al presentar.

03

Crear un nuevo Static Site

Dashboard → "New +" → "Static Site" → elige tu repo u1s1-… de la lista (si no aparece, "Configure account" para darle permiso a ese repo). En Name pega el mismo nombre del generador.

04

Configurar el build

Como es HTML puro, no hay que compilar nada:

RENDER — campos del formulario «New Static Site»

# Name: el mismo nombre de tu repo; con él se arma tu URL (https://u1s1-….onrender.com)
Name:              u1s1-hernandez-nunez-maria-jose
# Branch: la rama de tu repo que Render clona y despliega en cada push
Branch:            main
# Root Directory: vacío, porque index.html está en la raíz del repo
Root Directory:    (dejar vacío)
# Build Command: vacío porque es HTML plano; no hay nada que compilar antes de publicar
Build Command:     (dejar vacío)
# Publish Directory: la carpeta que Render sirve tal cual; "." significa "la raíz del repo"
Publish Directory: .

05

Deploy

Botón "Create Static Site". Render clona el repo, lo publica y te da una URL https://u1s1-hernandez-nunez-maria-jose.onrender.com con HTTPS activo. Cada vez que hagas git push a main, Render vuelve a desplegar solo.

TIP

Copia la URL final que te da Render — es tu entregable de la semana. Guárdala también en el README.md del repo para no perderla.

de dónde sale esto render.com/docs — sección "Static Sites"

06

Práctica autónoma — formulario de contacto sin backend

⏱ 1 hrpráctica autónoma

Todavía no hay servidor que reciba estos datos — el objetivo es practicar <form>, <label> y la validación nativa de HTML5, que el navegador aplica solo, sin una línea de JavaScript.

Abre index.html. Selecciona desde el comentario  dentro de una etiqueta, porque su > la cierra antes de tiempo y el resto aparece como texto en la página.

index.html — REEMPLAZA todo tu <footer id="contacto">

  <!-- footer con id="contacto": aquí aterriza el tercer enlace del nav; va una sola vez, al final -->
  <footer id="contacto">
    <!-- h2: título propio de esta sección -->
    <h2>Contacto</h2>
    <!-- form sin action ni method: todavía no hay servidor que reciba estos datos -->
    <form>
      <!-- div: agrupa la etiqueta y el campo de "Nombre" -->
      <div>
        <!-- for="nombre" debe ser IGUAL al id del input de abajo: así se vinculan -->
        <label for="nombre">Nombre</label>
        <!-- type="text": texto simple · id: el mismo del for · name: nombre del dato · required: no deja enviarlo vacío · minlength="2": mínimo 2 letras · placeholder: ejemplo gris que desaparece al escribir -->
        <input type="text" id="nombre" name="nombre" required minlength="2" placeholder="Tu nombre">
      <!-- cierre del div de "Nombre" -->
      </div>
      <!-- div: agrupa la etiqueta y el campo de "Correo" -->
      <div>
        <!-- for="correo": se vincula con el id="correo" de abajo -->
        <label for="correo">Correo</label>
        <!-- type="email": el navegador exige el formato usuario@dominio antes de dejar enviar · required: obligatorio -->
        <input type="email" id="correo" name="correo" required placeholder="tu@correo.com">
      <!-- cierre del div de "Correo" -->
      </div>
      <!-- div: agrupa la etiqueta y el campo de "Mensaje" -->
      <div>
        <!-- for="mensaje": se vincula con el id="mensaje" de abajo -->
        <label for="mensaje">Mensaje</label>
        <!-- textarea: texto de varias líneas (no lleva type) · minlength/maxlength: entre 10 y 500 caracteres · rows="4": 4 líneas visibles -->
        <textarea id="mensaje" name="mensaje" required minlength="10" maxlength="500" rows="4"></textarea>
      <!-- cierre del div de "Mensaje" -->
      </div>
      <!-- button type="submit": dispara el envío y activa la validación de todos los campos de arriba -->
      <button type="submit">Enviar</button>
    <!-- cierre del form -->
    </form>
    <!-- &copy; genera el símbolo © -->
    <p>&copy; 2026 [Tu Nombre]</p>
  <!-- cierre del footer -->
  </footer>

Así debe quedar tu index.html completo; si algo no se ve bien, compáralo o reemplaza todo tu archivo por este:

index.html — archivo COMPLETO con el formulario (para comparar)

<!-- DOCTYPE: le dice al navegador que interprete esto como HTML5 -->
<!DOCTYPE html>
<!-- html: la raíz del documento; lang="es" ayuda a lectores de pantalla y buscadores -->
<html lang="es">
<!-- head: metadatos que el navegador necesita pero que NO se ven en la página -->
<head>
  <!-- UTF-8: permite escribir tildes y ñ sin que se rompan -->
  <meta charset="UTF-8">
  <!-- viewport: hace que la página se adapte al ancho de un celular -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- title: el texto que aparece en la pestaña del navegador -->
  <title>[Tu Nombre] · Portafolio</title>
<!-- cierre de head: termina la zona de metadatos -->
</head>
<!-- body: todo lo que SÍ se ve en pantalla va aquí dentro -->
<body>

  <!-- header: cabecera de la página, va una sola vez -->
  <header>
    <!-- h1: el único título principal de toda la página -->
    <h1>[Tu Nombre]</h1>
    <!-- p: subtítulo descriptivo, no cuenta como encabezado -->
    <p>[Estudiante de Desarrollo Web · UTH]</p>
    <!-- nav: agrupa los enlaces de navegación interna -->
    <nav>
      <!-- ul: lista no ordenada que contiene los enlaces -->
      <ul>
        <!-- li + a: cada ítem es un enlace; href="#sobre-mi" salta al id igual más abajo -->
        <li><a href="#sobre-mi">Sobre mí</a></li>
        <!-- salta a la sección con id="skills" -->
        <li><a href="#skills">Skills</a></li>
        <!-- salta al footer con id="contacto" -->
        <li><a href="#contacto">Contacto</a></li>
      <!-- cierre de la lista -->
      </ul>
    <!-- cierre de nav -->
    </nav>
  <!-- cierre de header -->
  </header>

  <!-- main: el contenido único de la página, una sola vez -->
  <main>
    <!-- section con id="sobre-mi": aquí aterriza el primer enlace del nav -->
    <section id="sobre-mi">
      <!-- h2: título propio de esta sección -->
      <h2>Sobre mí</h2>
      <!-- p: tu texto de presentación -->
      <p>[2-3 frases: quién eres, qué estás estudiando, qué te interesa del desarrollo web.]</p>
    <!-- cierre de la sección "sobre-mi" -->
    </section>

    <!-- section con id="skills": aquí aterriza el segundo enlace del nav -->
    <section id="skills">
      <!-- h2: título propio de esta sección -->
      <h2>Skills</h2>
      <!-- article: cada skill tiene sentido leída sola, por eso NO es un div -->
      <article>
        <!-- h3: un nivel debajo del h2 de la sección -->
        <h3>HTML5</h3>
        <!-- p: descripción breve de la skill -->
        <p>Estructura semántica de páginas web.</p>
      <!-- cierre de este article -->
      </article>
      <!-- segundo article: mismo patrón, otra skill -->
      <article>
        <!-- h3: nombre de la skill -->
        <h3>Tailwind CSS</h3>
        <!-- p: descripción breve de la skill -->
        <p>Estilos responsivos utility-first.</p>
      <!-- cierre del segundo article -->
      </article>
      <!-- tercer article: mismo patrón, otra skill -->
      <article>
        <!-- h3: nombre de la skill; &amp; se ve como el símbolo & -->
        <h3>Git &amp; GitHub</h3>
        <!-- p: descripción breve de la skill -->
        <p>Control de versiones y despliegue.</p>
      <!-- cierre del tercer article -->
      </article>
    <!-- cierre de la sección "skills" -->
    </section>
  <!-- cierre de main -->
  </main>

  <!-- footer con id="contacto": aquí aterriza el tercer enlace del nav; va una sola vez, al final -->
  <footer id="contacto">
    <!-- h2: título propio de esta sección -->
    <h2>Contacto</h2>
    <!-- form sin action ni method: todavía no hay servidor que reciba estos datos -->
    <form>
      <!-- div: agrupa la etiqueta y el campo de "Nombre" -->
      <div>
        <!-- for="nombre" debe ser IGUAL al id del input de abajo: así se vinculan -->
        <label for="nombre">Nombre</label>
        <!-- type="text": texto simple · id: el mismo del for · name: nombre del dato · required: no deja enviarlo vacío · minlength="2": mínimo 2 letras · placeholder: ejemplo gris que desaparece al escribir -->
        <input type="text" id="nombre" name="nombre" required minlength="2" placeholder="Tu nombre">
      <!-- cierre del div de "Nombre" -->
      </div>
      <!-- div: agrupa la etiqueta y el campo de "Correo" -->
      <div>
        <!-- for="correo": se vincula con el id="correo" de abajo -->
        <label for="correo">Correo</label>
        <!-- type="email": el navegador exige el formato usuario@dominio antes de dejar enviar · required: obligatorio -->
        <input type="email" id="correo" name="correo" required placeholder="tu@correo.com">
      <!-- cierre del div de "Correo" -->
      </div>
      <!-- div: agrupa la etiqueta y el campo de "Mensaje" -->
      <div>
        <!-- for="mensaje": se vincula con el id="mensaje" de abajo -->
        <label for="mensaje">Mensaje</label>
        <!-- textarea: texto de varias líneas (no lleva type) · minlength/maxlength: entre 10 y 500 caracteres · rows="4": 4 líneas visibles -->
        <textarea id="mensaje" name="mensaje" required minlength="10" maxlength="500" rows="4"></textarea>
      <!-- cierre del div de "Mensaje" -->
      </div>
      <!-- button type="submit": dispara el envío y activa la validación de todos los campos de arriba -->
      <button type="submit">Enviar</button>
    <!-- cierre del form -->
    </form>
    <!-- &copy; genera el símbolo © -->
    <p>&copy; 2026 [Tu Nombre]</p>
  <!-- cierre del footer -->
  </footer>

<!-- cierre de body -->
</body>
<!-- cierre de html: fin del documento -->
</html>

01

Por qué cada <label for> importa

El atributo for debe coincidir exactamente con el id del campo. Así, un lector de pantalla anuncia "Nombre, editar texto" en vez de solo "editar texto", y al hacer clic en la etiqueta el foco salta al campo.

02

Qué hace cada atributo de validación

required impide enviar el campo vacío · type="email" exige el formato usuario@dominio · minlength/maxlength limitan caracteres. Pruébalo: deja "Correo" vacío y presiona "Enviar" — el navegador muestra un aviso nativo sin que escribas JavaScript.

TIP

Como todavía no hay backend, al enviar el formulario la página se recarga y no pasa nada más — es esperado. En una semana futura vas a conectar esto a un servicio o backend real.

de dónde sale esto MDN: Validación de formularios MDN: <input> MDN: <label>

07

Entregar y presentar

Marca cada punto a medida que lo completas — queda guardado en este navegador.

0/7

VS Code instalado, con la extensión Live Server activa Git instalado y git init corrido en la carpeta del proyecto index.html con header, nav, main (2 section), footer — visto en vivo con Live Server Navegación por teclado verificada con Tab Repo u1s1-… creado en GitHub (vacío, con el nombre de la convención) y git push exitoso Static Site creado en Render, deploy sin errores, URL con HTTPS funcionando Formulario de contacto agregado con validación HTML5 (práctica autónoma)

Cómo subir la práctica

01

Reunir los dos enlaces de entrega

Vas a entregar dos URLs, no una: (1) la de Render, https://u1s1-hernandez-nunez-maria-jose.onrender.com — el sitio funcionando; (2) la de GitHub, https://github.com/tu-usuario/u1s1-hernandez-nunez-maria-jose — el código y el historial de commits que prueba que tú lo hiciste. Sin el segundo enlace no se puede verificar el trabajo.

02

Dejar ambos enlaces documentados en el repo

Antes de entregar, crea o edita README.md en la raíz del proyecto:

README.md — archivo NUEVO en la raíz del proyecto

<!-- título del repo: cambia por tus nombres reales -->
# U1S1 — [Apellido Paterno] [Apellido Materno] [Nombre(s)]

<!-- sección con la URL pública de Render -->
## Demo en vivo
<!-- tu dirección real de Render -->
https://u1s1-hernandez-nunez-maria-jose.onrender.com

<!-- sección con el enlace al código -->
## Repositorio
<!-- tu dirección real de GitHub -->
https://github.com/tu-usuario/u1s1-hernandez-nunez-maria-jose

Guárdalo y súbelo:

TERMINAL DE VS CODE — PowerShell

# Agrega solo README.md al stage (no hace falta "." porque es el único archivo que cambió)
git add README.md
# Guarda el cambio en el historial con un mensaje que explica qué se agregó
git commit -m "Agregar README con enlaces de entrega"
# Sube el commit a GitHub; ya no hace falta "-u origin main", quedó recordado desde el primer push
git push

03

Pegar los enlaces en el aula virtual

Entra a la plataforma del curso, abre la tarea de la Semana 1 y pega los dos enlaces (Render y GitHub) como texto en el campo de entrega — no como imagen. Si el formulario pide adjuntar un archivo, sube una captura de pantalla del sitio funcionando; el código ya queda respaldado en GitHub. Revisa la fecha límite antes de enviar.

OJO

Los pasos exactos de "subir tarea" varían según la plataforma de tu campus (Moodle, Classroom, etc.). Lo que no cambia: los dos enlaces tienen que quedar como texto pegable, y tu nombre en Render/GitHub debe coincidir con el que usas para identificarte en la entrega — por eso el paso 02 de la sección anterior importa.

Cómo presentar en vivo — guion paso a paso

Un recorrido de ~5 minutos frente al profesor. Practícalo una vez antes de tu turno.