## 🏁 Objetivo
Construir la página web correcta mediante la creación de una estructura básica del documento HTML. Esta estructura es la columna vertebral de cada página HTML y se compone de elementos esenciales navegadores necesitan para renderizar su contenido correctamente.

> Nota
>
> No se deje engañar por la aparente sencillez del diseño de la página web. Aunque pueda parecer sencillo, sigue siendo primordial **mantener la estructura correcta del documento**. Esto garantiza que el sitio web conserve su legibilidad y funcionalidad en todos los navegadores.

## 📋 Tarea
Cree una estructura básica de documento HTML. Si ya confías en tus habilidades, siéntete libre de proceder sin la guía paso a paso. Sin embargo, si desea un poco más de orientación, una guía paso a paso está disponible para ayudarle en el camino. <a
href="#guía"
style="color: #ff8a00; font-weight: 600; text-decoration: none;"
onmouseover="this.style.color='#ff0000'"
onmouseout="this.style.color='#d27204'">Guía</a> / <a
href="#desafío"
style="color: #ff8a00; font-weight: 600; text-decoration: none;"
onmouseover="this.style.color='#ff0000'"
onmouseout="this.style.color='#d27204'">Desafío</a>

## 📝 Step-by-Step Guide

### Step 1: Start the HTML Document
Begin by typing the HTML doctype declaration, which tells the browser that the document is written in HTML. The declaration should be the first line of your HTML document:
```html
<!DOCTYPE html>
```

### Paso 1: Iniciar el Documento HTML
Comience escribiendo la declaración doctype HTML, que indica al navegador que el documento está escrito en HTML. La declaración debe ser la primera línea de su documento HTML:
```html
<!DOCTYPE html>
```

### Paso 3: Crear la Sección Head (Encabezado)
Añada las tags de apertura y cierre `<head>` dentro de las tags HTML. La sección head contiene meta-información sobre el documento HTML, como el título y enlaces a hojas de estilo externas:
```html
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
</html>
```

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj48L2h0bWw+

### Paso 5: Crear la Sección Body
Después de la sección `<head>`, añada las tags de apertura y cierre `<body>`. La sección body contiene el contenido visible de la página web:
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Webpage</title>
  </head>
  <body></body>
</html>
```

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD48L2hlYWQ+CjwvaHRtbD4=

PCEtLSBDcmVhdGUgdGhlIGJhc2ljIGRvY3VtZW50IHN0cnVjdHVyZSAtLT4K

### Step 5: Create the Body Section
After the `<head>` section, add the opening and closing `<body>` tags. The body section contains the visible content of the webpage:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDx0aXRsZT5NeSBXZWJwYWdlPC90aXRsZT4KICA8L2hlYWQ+CiAgPGJvZHk+PC9ib2R5Pgo8L2h0bWw+

### Step 6: Add Content to the Body
 We can add elements within the `<body>` tags, such as headings, paragraphs, images, links, etc. Here's an example of adding a heading and a paragraph:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDx0aXRsZT5NeSBXZWJwYWdlPC90aXRsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8aDE+VGhlIHdlYnBhZ2UgbWFpbiBoZWFkaW5nPC9oMT4KICAgIDxwPlNvbWUgY29udGVudC48L3A+CiAgPC9ib2R5Pgo8L2h0bWw+

Aprenda lo esencial de HTML (HyperText Markup Language), la base del desarrollo web. Este curso para principiantes abarca etiquetas, atributos, elementos y estructuración de páginas webs. Adquiera habilidades prácticas en la creación de encabezados, párrafos, listas, imágenes, enlaces, formularios y tablas. Explore las mejores prácticas, la optimización y la accesibilidad web. Comience su viaje por el desarrollo web con HTML.

Explore el funcionamiento interno de la web. Aprenda cómo viajan los datos a través de las redes, descubra el papel de los protocolos y desentrañe los misterios de las direcciones IP y los nombres de dominio. Adquirir una comprensión de alto nivel de cómo los navegadores web y servidores se comunican para entregar contenido web.

Descubra el poder de las tags para estructurar contenidos, desde títulos y párrafos hasta listas y tablas. Aprende a mejorar los elementos con atributos.

El núcleo de la estructura de los documentos HTML. Conozca los componentes de un documento HTML, incluyendo la declaración doctype, head y body. Entender el propósito de cada elemento y cómo contribuyen a la estructura general de una página web.

Hacer más atractiva una página web con la ayuda de medios como imágenes, audio y vídeo. Trabajar con datos tabulares estructurados en forma de tablas.

Explore la versatilidad de los formularios HTML. Aprenda a diseñar formularios intuitivos y fáciles de usar aprovechando conceptos y técnicas clave. Descubra cómo los formularios permiten la interacción del usuario y el envío de datos en los sitios web.

HTML Definitivo

Desafío: Estructura del Documento

🏁 Objetivo

📋 Tarea

📝 Step-by-Step Guide

Step 1: Start the HTML Document

Paso 1: Iniciar el Documento HTML

Paso 3: Crear la Sección Head (Encabezado)

Paso 5: Crear la Sección Body

🔍 ¡Inténtalo tú mismo!

Step 5: Create the Body Section

Step 6: Add Content to the Body

Try It Yourself