Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprende Desafío: Estructura Correctamente un Documento HTML | Estructura del Documento HTML
HTML Definitivo

bookDesafío: Estructura Correctamente un Documento HTML

Objetivo

Construir la página web correcta creando una estructura básica de documento HTML. Esta estructura es la columna vertebral de cada página HTML y consta de elementos esenciales que los navegadores necesitan para mostrar correctamente tu contenido.

Note
Nota

No te dejes engañar por la aparente simplicidad del diseño de la página web. Aunque pueda parecer sencillo, es fundamental mantener la estructura correcta del documento. Esto garantiza que el sitio web conserve su legibilidad y funcionalidad en todos los navegadores.

Tarea

Crear una estructura básica de documento HTML. Si ya tienes confianza en tus habilidades, siéntete libre de continuar sin la guía paso a paso. Sin embargo, si deseas un poco más de orientación, hay disponible una guía detallada para ayudarte en el proceso.

Guía paso a paso

Paso 1: Iniciar el documento HTML

Comenzar escribiendo la declaración de tipo de documento HTML, que indica al navegador que el documento está escrito en HTML. La declaración debe ser la primera línea de tu documento HTML:

index.html

index.html

copy

Paso 2: Añadir las etiquetas de apertura y cierre html

Después de la declaración doctype, agregar las etiquetas de apertura y cierre HTML. Toda la estructura del documento HTML estará contenida dentro de estas etiquetas. Además, incluir el atributo lang para especificar el idioma del documento:

index.html

index.html

copy

Paso 3: Crear la sección head

Agregar las etiquetas de apertura y cierre <head> dentro de las etiquetas HTML. La sección head contiene metainformación sobre el documento HTML, como el título y enlaces a hojas de estilo externas:

index.html

index.html

copy

Paso 4: Añadir el título

Dentro de las etiquetas <head>, agregar las etiquetas de apertura y cierre <title>. El texto que se coloque entre estas etiquetas se mostrará como el título de la página web en la barra de título o pestaña del navegador:

index.html

index.html

copy

Paso 5: Crear la sección body

Después de la sección <head>, agregar las etiquetas de apertura y cierre <body>. La sección body contiene el contenido visible de la página web:

index.html

index.html

copy

Paso 6: Agregar contenido al body

Se pueden agregar elementos dentro de las etiquetas <body>, como encabezados, párrafos, imágenes, enlaces, etc. A continuación, un ejemplo de cómo agregar un encabezado y un párrafo:

index.html

index.html

copy

Pruébalo tú mismo

index.html

index.html

copy
¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 5

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you show me an example of a complete basic HTML document?

What should I put as the title of the webpage?

Can you explain the purpose of each section in the HTML structure?

bookDesafío: Estructura Correctamente un Documento HTML

Desliza para mostrar el menú

Objetivo

Construir la página web correcta creando una estructura básica de documento HTML. Esta estructura es la columna vertebral de cada página HTML y consta de elementos esenciales que los navegadores necesitan para mostrar correctamente tu contenido.

Note
Nota

No te dejes engañar por la aparente simplicidad del diseño de la página web. Aunque pueda parecer sencillo, es fundamental mantener la estructura correcta del documento. Esto garantiza que el sitio web conserve su legibilidad y funcionalidad en todos los navegadores.

Tarea

Crear una estructura básica de documento HTML. Si ya tienes confianza en tus habilidades, siéntete libre de continuar sin la guía paso a paso. Sin embargo, si deseas un poco más de orientación, hay disponible una guía detallada para ayudarte en el proceso.

Guía paso a paso

Paso 1: Iniciar el documento HTML

Comenzar escribiendo la declaración de tipo de documento HTML, que indica al navegador que el documento está escrito en HTML. La declaración debe ser la primera línea de tu documento HTML:

index.html

index.html

copy

Paso 2: Añadir las etiquetas de apertura y cierre html

Después de la declaración doctype, agregar las etiquetas de apertura y cierre HTML. Toda la estructura del documento HTML estará contenida dentro de estas etiquetas. Además, incluir el atributo lang para especificar el idioma del documento:

index.html

index.html

copy

Paso 3: Crear la sección head

Agregar las etiquetas de apertura y cierre <head> dentro de las etiquetas HTML. La sección head contiene metainformación sobre el documento HTML, como el título y enlaces a hojas de estilo externas:

index.html

index.html

copy

Paso 4: Añadir el título

Dentro de las etiquetas <head>, agregar las etiquetas de apertura y cierre <title>. El texto que se coloque entre estas etiquetas se mostrará como el título de la página web en la barra de título o pestaña del navegador:

index.html

index.html

copy

Paso 5: Crear la sección body

Después de la sección <head>, agregar las etiquetas de apertura y cierre <body>. La sección body contiene el contenido visible de la página web:

index.html

index.html

copy

Paso 6: Agregar contenido al body

Se pueden agregar elementos dentro de las etiquetas <body>, como encabezados, párrafos, imágenes, enlaces, etc. A continuación, un ejemplo de cómo agregar un encabezado y un párrafo:

index.html

index.html

copy

Pruébalo tú mismo

index.html

index.html

copy
¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 5
some-alt