Estructura de Documento HTML: Crea tu Primera Página Web

Introducción

¡Bienvenido al mundo de HTML! Cada página web que ves en Internet se construye sobre una estructura fundamental. Comprender esta estructura es el primer y más crucial paso en el desarrollo web.

En este laboratorio, aprenderás a crear el esqueleto básico de un documento HTML. Cubriremos los componentes esenciales que toda página HTML debe tener:

La declaración <!DOCTYPE html>
El elemento raíz <html>
El elemento <head> para metadatos
El elemento <body> para contenido visible

Al final de este laboratorio, habrás construido una página HTML completa, válida y simple desde cero.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel intermedio con una tasa de finalización del 70%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Crear la declaración DOCTYPE

En este paso, agregarás la declaración DOCTYPE, que es lo primero en tu documento HTML. Esta declaración le indica al navegador web que la página está escrita en HTML5. Es una práctica estándar y asegura que el navegador renderice la página correctamente.

Primero, localiza el archivo index.html en el explorador de archivos en el lado izquierdo de tu WebIDE. Haz clic en él para abrirlo en el editor.

El archivo está actualmente vacío. Agrega la siguiente línea de código en la parte superior del archivo index.html:

<!DOCTYPE html>

Tu archivo index.html ahora debería verse así:

<!DOCTYPE html>

Esta única línea es el punto de partida para cada página web moderna.

Añadir el elemento raíz html con el atributo lang

En este paso, agregarás el elemento <html>. Este elemento es el contenedor raíz para todos los demás elementos HTML en la página (excepto la declaración <!DOCTYPE>).

También es una buena práctica incluir el atributo lang dentro de la etiqueta de apertura <html>. Este atributo especifica el idioma del contenido del documento, lo que ayuda a los motores de búsqueda y a los lectores de pantalla. Para inglés, usamos lang="en".

En tu archivo index.html, agrega las etiquetas <html> y </html> justo después de la declaración <!DOCTYPE html>.

<!DOCTYPE html>
<html lang="en"></html>

Todos los demás elementos de tu página web irán entre estas dos etiquetas.

Insertar el elemento head con la etiqueta title

En este paso, agregarás el elemento <head>. La sección <head> contiene metadatos sobre el documento HTML, como su título, conjunto de caracteres, estilos y scripts. Esta información no se muestra en la página web en sí, sino que es utilizada por el navegador.

La pieza de metadatos más importante para un principiante es la etiqueta <title>. El texto dentro de la etiqueta <title> es lo que aparece en la pestaña del navegador o en la barra de título de la ventana.

Dentro de tu elemento <html>, agrega una sección <head>. Dentro de la sección <head>, agrega una etiqueta <title> con el texto "My First Web Page".

Actualiza tu archivo index.html para que se vea así:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First Web Page</title>
  </head>
</html>

Añadir el elemento body para el contenido

En este paso, agregarás el elemento <body>. Aquí es donde va todo el contenido visible de tu página web, como encabezados, párrafos, imágenes, enlaces y más. El elemento <body> debe colocarse después del elemento <head>, pero aún dentro del elemento <html>.

Agreguemos un encabezado principal a nuestra página para que sea visible en el navegador. Usaremos la etiqueta <h1>, que significa "Heading 1" (Encabezado 1).

En tu archivo index.html, agrega una sección <body>. Dentro del <body>, agrega un elemento <h1> con el texto "Hello, World!".

Tu archivo index.html completo debería verse ahora así:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Esta es una estructura de documento HTML completa y válida.

Guardar y abrir el archivo HTML en un navegador

En este paso, verás la página web que acabas de crear. El WebIDE guarda automáticamente tus cambios, por lo que no necesitas guardar el archivo manualmente.

Un servidor web simple ya está ejecutándose en segundo plano para ti. Para ver tu página, solo necesitas abrir la pestaña correcta en la interfaz de LabEx.

Haz clic en la pestaña Web 8080, que se encuentra en la parte superior izquierda de tu pantalla, junto a la pestaña "Terminal".

Al cambiar a la pestaña Web 8080, deberías ver tu página web. Mostrará:

El texto "Hello, World!" como un encabezado grande en el área de contenido principal.
La pestaña del navegador mostrará el título "My First Web Page".

Si no ves esto, por favor, regresa a los pasos anteriores y asegúrate de que tu código index.html coincida exactamente con el ejemplo.

Resumen

¡Felicidades! Has creado con éxito tu primer documento HTML válido. Has aprendido los bloques de construcción fundamentales que forman el esqueleto de cada página web.

En este laboratorio, has aprendido:

<!DOCTYPE html>: La declaración que define el documento como HTML5.
<html>: El elemento raíz que envuelve todo el contenido de la página.
<head>: El contenedor de metadatos, como el título de la página, que no es visible en la página en sí.
<title>: La etiqueta que establece el título de la pestaña del navegador.
<body>: El contenedor de todo el contenido visible, como encabezados y párrafos.

Esta estructura básica es la base sobre la cual construirás todos tus futuros proyectos web.

Estructura del Documento HTML