Programación Para Tontos


Hace años la gente usaba tablas para maquetar páginas enteras. No hagas eso. Las tablas son para una cosa: mostrar datos tabulares (precios, horarios, calificaciones). Vamos a hacerlo bien.

## Paso 1: la estructura básica

```html
<table>
  <thead>
    <tr>
      <th>Lenguaje</th>
      <th>Para qué sirve</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Estructura</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Estilo</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>Interacción</td>
    </tr>
  </tbody>
</table>
```

`<thead>` es el encabezado, `<tbody>` el cuerpo, `<tr>` cada fila, `<th>` una celda de encabezado y `<td>` una celda normal. Sí, son muchas siglas, no, no hace falta memorizarlas todas hoy.

## Paso 2: dale estilo con CSS

```css
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #333;
  padding: 0.5rem 1rem;
  text-align: left;
}

th {
  background-color: #101e27;
  color: #00e5bf;
}
```

`border-collapse: collapse` evita que cada celda tenga su propio borde duplicado. Sin esto tu tabla se ve como una cuadrícula de Windows 95.

## Paso 3: agrega una fila con datos calculados (opcional)

```html
<tfoot>
  <tr>
    <td>Total</td>
    <td>3 lenguajes</td>
  </tr>
</tfoot>
```

`<tfoot>` es útil para totales o resúmenes al final de la tabla.

## ¿Qué acabas de aprender?

- La anatomía de una tabla: `table`, `thead`, `tbody`, `tfoot`, `tr`, `th`, `td`.
- Cómo darle estilo sin que se vea de los noventa.
- Que las tablas son para datos, no para maquetar páginas (eso es trabajo de CSS).


Construye una tabla HTML ordenada para mostrar datos en filas y columnas, sin usarla para maquetar.

Tutorial: tu primera tabla HTML para mostrar datos


Si tu página es puro `<div>` por todos lados, técnicamente funciona, pero es como etiquetar todas las cajas de una mudanza como "cosas". HTML semántico le pone nombre a cada caja.

## Paso 1: identifica las partes de tu página

Una página típica tiene: un encabezado, un menú de navegación, contenido principal y un pie de página. HTML tiene una etiqueta para cada uno:

```html
<header>
  <h1>Mi sitio</h1>
  <nav>
    <a href="/">Inicio</a>
    <a href="/sobre-mi">Sobre mí</a>
  </nav>
</header>

<main>
  <h2>Bienvenido</h2>
  <p>Este es el contenido principal de la página.</p>
</main>

<footer>
  <p>&copy; 2026 Mi sitio</p>
</footer>
```

## Paso 2: agrupa contenido relacionado con `<section>` y `<article>`

```html
<main>
  <section>
    <h2>Mis proyectos</h2>
    <article>
      <h3>Proyecto 1</h3>
      <p>Descripción del proyecto.</p>
    </article>
    <article>
      <h3>Proyecto 2</h3>
      <p>Descripción del proyecto.</p>
    </article>
  </section>
</main>
```

`<article>` es para contenido que tiene sentido por sí solo (un post, una tarjeta de producto). `<section>` agrupa contenido relacionado dentro de una página. No hay examen sorpresa, pero ahora tu HTML se explica solo.

## Paso 3: por qué importa (además de verse bonito)

- Los lectores de pantalla usan estas etiquetas para navegar la página más rápido.
- Google entiende mejor de qué trata tu contenido (mejor SEO, gratis).
- Tu futuro yo, leyendo este código en seis meses, no va a querer llorar.

## ¿Qué acabas de aprender?

- Las etiquetas `header`, `nav`, `main`, `footer`, `section` y `article`.
- Por qué el HTML semántico ayuda a la accesibilidad y al SEO.
- Que cambiar `<div>` por la etiqueta correcta no cuesta nada extra.


Reemplaza divs genéricos por header, nav, main y footer para un HTML más claro y accesible.

Tutorial: dale estructura semántica a tu página

Toda página que "hace algo" con lo que escribes (un login, un buscador, un formulario de contacto) empieza con la misma etiqueta: `<form>`. Hoy vas a construir uno, y no, no necesitas saber backend todavía.

## Paso 1: la estructura del formulario

```html
<form>
  <label for="nombre">Nombre</label>
  <input type="text" id="nombre" name="nombre" required />

  <label for="correo">Correo</label>
  <input type="email" id="correo" name="correo" required />

  <label for="mensaje">Mensaje</label>
  <textarea id="mensaje" name="mensaje"></textarea>

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

Cada `<input>` tiene un `id` que coincide con el `for` de su `<label>`. Esto no es decoración: así el navegador (y los lectores de pantalla) saben qué campo pertenece a qué etiqueta.

## Paso 2: usa el tipo de input correcto

```html
<input type="email" /> 
<input type="number" />
<input type="date" />
<input type="checkbox" />
```

Usar `type="email"` en vez de `type="text"` le da validación gratis al navegador. Cero líneas de JavaScript, cero esfuerzo, mucha elegancia.

## Paso 3: marca campos obligatorios

El atributo `required` evita que el formulario se envíe si el campo está vacío. Pruébalo: deja el nombre en blanco y haz clic en "Enviar". El navegador te va a regañar amablemente, así que tú no tienes que hacerlo.

## ¿Qué acabas de aprender?

- Cómo estructurar un formulario con `<form>`, `<label>` e `<input>`.
- Por qué el tipo de input correcto te ahorra trabajo.
- Cómo marcar campos obligatorios sin escribir JavaScript.

Por ahora este formulario no envía datos a ningún lado (para eso hace falta un servidor), pero más adelante lo vamos a validar y mejorar con JavaScript.

Aprende a crear formularios HTML funcionales para recolectar nombre, correo y mensajes.

Tutorial: formularios HTML para pedirle datos al usuario


En este tutorial vas a crear tu primera página web desde cero, sin frameworks ni herramientas complicadas: solo un editor de texto y un navegador. Sí, en serio, es así de fácil. No, no necesitas un doctorado.

## Paso 1: crea la carpeta del proyecto

Crea una carpeta llamada `mi-primera-pagina` y abre un archivo nuevo llamado `index.html`. Ponerle nombre a una carpeta: nivel de dificultad, cero.

## Paso 2: escribe la estructura básica

```html
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Mi primera página</title>
    <link rel="stylesheet" href="estilos.css" />
  </head>
  <body>
    <h1>¡Hola, mundo!</h1>
    <p>Esta es mi primera página web.</p>
  </body>
</html>
```

Guarda el archivo y ábrelo con doble clic: ya tienes una página web funcionando en tu navegador. Felicidades, técnicamente ya eres "desarrollador web" (no le digas esto a nadie en una entrevista de trabajo todavía).

## Paso 3: agrega estilos

Crea un archivo `estilos.css` en la misma carpeta:

```css
body {
  font-family: sans-serif;
  background-color: #0e1e25;
  color: #ffffff;
  text-align: center;
  padding: 4rem;
}

h1 {
  color: #00e5bf;
}
```

Recarga la página en el navegador: deberías ver el fondo oscuro y el título en color verde azulado. Si ves otra cosa, no entres en pánico: revisa que guardaste el archivo (a todos nos ha pasado, no juzgamos).

## Paso 4: agrega una imagen y un enlace

```html
<img src="https://placekitten.com/300/200" alt="Un gato" />
<p>
  Aprende más en
  <a href="https://developer.mozilla.org/es/">MDN Web Docs</a>.
</p>
```

## ¿Qué acabas de aprender?

- Cómo estructurar una página con HTML.
- Cómo conectar un archivo CSS para darle estilo.
- Cómo agregar imágenes y enlaces.

En el próximo tutorial vamos a darle vida a esta página con JavaScript, porque una página bonita pero muda es simplemente... un póster caro.


Sigue estos pasos y crea tu primera página web funcional en menos de 20 minutos.

HTML

Tutorial: tu primera tabla HTML para mostrar datos

Tutorial: dale estructura semántica a tu página

Tutorial: formularios HTML para pedirle datos al usuario

Tutorial: tu primera página web con HTML y CSS