Programación Para Tontos


Years ago people used tables to lay out entire pages. Don't do that. Tables are for one thing: showing tabular data (prices, schedules, grades). Let's do it properly.

## Step 1: the basic structure

```html
<table>
  <thead>
    <tr>
      <th>Language</th>
      <th>What it's for</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Structure</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Style</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>Interaction</td>
    </tr>
  </tbody>
</table>
```

`<thead>` is the header, `<tbody>` the body, `<tr>` each row, `<th>` a header cell, and `<td>` a regular cell. Yes, a lot of acronyms, no, you don't need to memorize them all today.

## Step 2: style it with 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` stops every cell from having its own duplicated border. Without this your table looks like a Windows 95 spreadsheet.

## Step 3: add a row with computed data (optional)

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

`<tfoot>` is handy for totals or summaries at the bottom of the table.

## What did you just learn?

- The anatomy of a table: `table`, `thead`, `tbody`, `tfoot`, `tr`, `th`, `td`.
- How to style it so it doesn't look like it's from the nineties.
- That tables are for data, not for laying out pages (that's CSS's job).


Build a clean HTML table to show data in rows and columns, without using it for page layout.

Tutorial: your first HTML table to display data


If your page is pure `<div>` everywhere, it technically works, but it's like labeling every moving box as "stuff". Semantic HTML gives each box an actual name.

## Step 1: identify the parts of your page

A typical page has: a header, a navigation menu, main content, and a footer. HTML has a tag for each:

```html
<header>
  <h1>My site</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

<main>
  <h2>Welcome</h2>
  <p>This is the page's main content.</p>
</main>

<footer>
  <p>&copy; 2026 My site</p>
</footer>
```

## Step 2: group related content with `<section>` and `<article>`

```html
<main>
  <section>
    <h2>My projects</h2>
    <article>
      <h3>Project 1</h3>
      <p>Project description.</p>
    </article>
    <article>
      <h3>Project 2</h3>
      <p>Project description.</p>
    </article>
  </section>
</main>
```

`<article>` is for content that makes sense on its own (a post, a product card). `<section>` groups related content within a page. No pop quiz, but now your HTML explains itself.

## Step 3: why it matters (besides looking nice)

- Screen readers use these tags to navigate the page faster.
- Google understands your content better (better SEO, for free).
- Future-you, reading this code in six months, won't want to cry.

## What did you just learn?

- The `header`, `nav`, `main`, `footer`, `section`, and `article` tags.
- Why semantic HTML helps accessibility and SEO.
- That swapping `<div>` for the right tag costs nothing extra.


Replace generic divs with header, nav, main, and footer for clearer, more accessible HTML.

Tutorial: give your page semantic structure

Every page that "does something" with what you type (a login, a search box, a contact form) starts with the same tag: `<form>`. Today you'll build one, and no, you don't need to know backend yet.

## Step 1: the form structure

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

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

  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>

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

Each `<input>` has an `id` that matches its `<label>`'s `for`. That's not decoration: it's how the browser (and screen readers) know which field belongs to which label.

## Step 2: use the right input type

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

Using `type="email"` instead of `type="text"` gives you free validation from the browser. Zero lines of JavaScript, zero effort, maximum elegance.

## Step 3: mark required fields

The `required` attribute stops the form from submitting if the field is empty. Try it: leave the name blank and click "Send". The browser will politely scold you, so you don't have to.

## What did you just learn?

- How to structure a form with `<form>`, `<label>`, and `<input>`.
- Why the right input type saves you work.
- How to mark required fields without writing any JavaScript.

This form doesn't send data anywhere yet (that needs a server), but later we'll validate and improve it with JavaScript.

Learn to build functional HTML forms to collect name, email, and messages.

Tutorial: HTML forms to ask the user for data


In this tutorial you'll build your first web page from scratch, no frameworks or complicated tools: just a text editor and a browser. Yes, really, it's that easy. No, you don't need a PhD.

## Step 1: create the project folder

Create a folder called `my-first-page` and open a new file called `index.html`. Naming a folder: difficulty level, zero.

## Step 2: write the basic structure

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My first page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is my first web page.</p>
  </body>
</html>
```

Save the file and double-click to open it: you already have a working web page in your browser. Congratulations, you're technically a "web developer" now (maybe don't put that on your resume just yet).

## Step 3: add some styles

Create a `styles.css` file in the same folder:

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

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

Reload the page in the browser: you should see the dark background and the teal-colored title. If you see something else, don't panic: check that you actually saved the file (we've all been there, no judgment).

## Step 4: add an image and a link

```html
<img src="https://placekitten.com/300/200" alt="A cat" />
<p>
  Learn more at
  <a href="https://developer.mozilla.org/en-US/">MDN Web Docs</a>.
</p>
```

## What did you just learn?

- How to structure a page with HTML.
- How to link a CSS file to style it.
- How to add images and links.

In the next tutorial we'll bring this page to life with JavaScript, because a pretty page that can't do anything is just... an expensive poster.


Follow these steps and build your first working web page in under 20 minutes.

HTML

Tutorial: your first HTML table to display data

Tutorial: give your page semantic structure

Tutorial: HTML forms to ask the user for data

Tutorial: your first web page with HTML and CSS