HTML | Profe. Gatica

📍 Sección 1

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje estándar para crear páginas web. No es un lenguaje de programación, sino un lenguaje de marcado: describe la estructura y el contenido de una página.

HTML usa etiquetas (tags) para envolver el contenido: <etiqueta>contenido</etiqueta>.

💡

La trinidad del frontend

HTML (estructura) + CSS (estilos) + JavaScript (comportamiento) forman el núcleo del desarrollo web frontend.

📍 Sección 2

Estructura Base de un Documento HTML

Todo documento HTML sigue esta estructura fundamental:

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Descripción breve de la página">
  <title>Título de la Página</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- Todo el contenido visible va aquí -->
  <h1>Mi Primera Página</h1>
  <p>¡Hola Mundo!</p>

  <script src="app.js"></script>
</body>
</html>

¿Qué significa cada parte?

<!DOCTYPE html> — Indica al navegador que es HTML5.
<html lang="es"> — Elemento raíz, define el idioma.
<head> — Metadatos, no se muestra en pantalla.
<meta charset="UTF-8"> — Permite tildes y ñ.
<body> — Todo el contenido visible.

📍 Sección 3

Etiquetas Esenciales

HTML — Texto y Encabezados

<!-- Encabezados: h1 es el más importante (solo uno por página) -->
<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Sección</h3>

<!-- Párrafo -->
<p>Este es un párrafo con <strong>texto en negrita</strong>
y <em>texto en cursiva</em>.</p>

<!-- Enlace -->
<a href="https://www.google.com" target="_blank">Ir a Google</a>

<!-- Imagen -->
<img src="foto.jpg" alt="Descripción de la imagen" width="300">

<!-- Listas -->
<ul>                          <!-- lista sin orden -->
  <li>Elemento uno</li>
  <li>Elemento dos</li>
</ul>

<ol>                          <!-- lista ordenada -->
  <li>Primer paso</li>
  <li>Segundo paso</li>
</ol>

<!-- Tabla básica -->
<table>
  <thead>
    <tr><th>Nombre</th><th>Nota</th></tr>
  </thead>
  <tbody>
    <tr><td>Ana</td><td>9</td></tr>
    <tr><td>Luis</td><td>7</td></tr>
  </tbody>
</table>

📍 Sección 4

HTML Semántico

Las etiquetas semánticas describen el significado del contenido, no solo su apariencia. Son fundamentales para la accesibilidad y el SEO.

HTML — Semántico

<body>

  <header>                    <!-- cabecera del sitio o sección -->
    <nav>                     <!-- barra de navegación -->
      <a href="/">Inicio</a>
      <a href="/cursos">Cursos</a>
    </nav>
  </header>

  <main>                      <!-- contenido principal (solo uno) -->
    <section>                 <!-- sección temática -->
      <h2>Nuestros Cursos</h2>

      <article>               <!-- contenido independiente -->
        <h3>Python Básico</h3>
        <p>Aprendé Python desde cero...</p>
      </article>

      <article>
        <h3>JavaScript</h3>
        <p>Programación para la web...</p>
      </article>
    </section>

    <aside>                   <!-- contenido lateral/complementario -->
      <p>¿Dudas? Escribinos.</p>
    </aside>
  </main>

  <footer>                    <!-- pie de página -->
    <p>&copy; 2025 Profe. Gatica</p>
  </footer>

</body>

📍 Sección 5

Formularios

Los formularios permiten recopilar información del usuario. Son fundamentales en cualquier sitio web.

HTML — Formulario completo

<form action="/enviar" method="post">

  <!-- Texto -->
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre" required placeholder="Tu nombre">

  <!-- Email -->
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <!-- Número -->
  <label for="edad">Edad:</label>
  <input type="number" id="edad" name="edad" min="1" max="120">

  <!-- Select -->
  <label for="curso">Curso:</label>
  <select id="curso" name="curso">
    <option value="">Seleccioná uno</option>
    <option value="python">Python</option>
    <option value="js">JavaScript</option>
  </select>

  <!-- Textarea -->
  <label for="mensaje">Mensaje:</label>
  <textarea id="mensaje" name="mensaje" rows="4"></textarea>

  <!-- Checkbox -->
  <input type="checkbox" id="terminos" name="terminos" required>
  <label for="terminos">Acepto los términos</label>

  <button type="submit">Enviar</button>

</form>

✅ Sección 6

Ejercicios Resueltos

EJERCICIO 1 Página de perfil personal

Creá una página HTML completa con tu información personal: foto, bio, lista de habilidades y tabla de cursos.

1Usamos la estructura base completa con todas las metas.
2Organizamos con header, main, footer semánticos.
3Agregamos img con alt descriptivo para accesibilidad.
4Creamos una tabla con thead / tbody correctamente.

HTML — Solución

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Perfil</title>
</head>
<body>
  <header>
    <h1>Ana García</h1>
    <nav>
      <a href="#sobre-mi">Sobre mí</a> |
      <a href="#cursos">Cursos</a>
    </nav>
  </header>

  <main>
    <section id="sobre-mi">
      <h2>Sobre mí</h2>
      <img src="foto.jpg" alt="Foto de Ana García" width="150">
      <p>Estudiante de programación en la ET N°7.</p>
      <h3>Habilidades</h3>
      <ul>
        <li>Python</li>
        <li>HTML & CSS</li>
        <li>JavaScript</li>
      </ul>
    </section>

    <section id="cursos">
      <h2>Cursos realizados</h2>
      <table>
        <thead>
          <tr><th>Curso</th><th>Año</th><th>Estado</th></tr>
        </thead>
        <tbody>
          <tr><td>Python Básico</td><td>2024</td><td>✅ Completado</td></tr>
          <tr><td>HTML & CSS</td><td>2025</td><td>🔄 En curso</td></tr>
        </tbody>
      </table>
    </section>
  </main>

  <footer><p>&copy; 2025 Ana García</p></footer>
</body>
</html>

🚀 Sección 7

Ejercicios Propuestos

PROPUESTO 1 Formulario de inscripción

Creá un formulario de inscripción completo para un curso de programación.

Campos: nombre, apellido, email, teléfono, curso (select), turno (radio), experiencia (textarea).
Usar atributos de validación: required, minlength, pattern.
Checkbox para acepar términos y condiciones.
Botones de enviar y resetear.

PROPUESTO 2 Blog con HTML semántico

Diseñá la estructura HTML de un blog con 3 artículos.

Cada artículo tiene: título, fecha, autor, imagen, resumen y link "Leer más".
Sidebar con categorías y artículos recientes.
Usar correctamente: header, nav, main, section, article, aside, footer.