Introducción
En este laboratorio, los estudiantes aprenderán las habilidades fundamentales para crear una estructura básica de documento HTML y comprender las etiquetas HTML esenciales. El laboratorio guía a los participantes a través de la configuración de un documento HTML con una declaración de DOCTYPE adecuada, la adición de la etiqueta raíz HTML, la configuración de la sección de encabezado y la exploración de diferentes tipos de etiquetas HTML.
Los participantes comenzarán creando un documento HTML5, aprendiendo cómo declarar el tipo de documento, estructurar el diseño básico de la página y comprender el propósito de elementos clave como <html>, <head> y <body>. Al final del laboratorio, los estudiantes tendrán una comprensión integral de cómo crear un documento HTML bien formado y utilizar diversas etiquetas HTML para estructurar el contenido de una página web.
Configurar un documento HTML con la declaración DOCTYPE
En este paso, aprenderás cómo configurar la base básica de un documento HTML agregando la declaración de DOCTYPE. La declaración de DOCTYPE es crucial ya que le dice a los navegadores web qué versión de HTML está utilizando tu documento, lo que garantiza una representación adecuada y compatibilidad.
Primero, abre el WebIDE y crea un nuevo archivo llamado index.html en el directorio ~/project.
La declaración de DOCTYPE para HTML5 es simple y directa. La agregarás como la primera línea de tu documento HTML:
<!doctype html>
Esta declaración le dice a los navegadores que estás utilizando HTML5, la última versión de HTML. No distingue entre mayúsculas y minúsculas, pero se recomienda la versión en minúsculas para mantener la coherencia y la legibilidad.
Creemos una estructura completa de documento HTML básico con la declaración de DOCTYPE:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML!</h1>
</body>
</html>
Notas: Aprende más sobre Cómo previsualizar archivos HTML en el WebIDE.
La salida de ejemplo en el navegador mostraría:
Welcome to HTML!
Puntos clave a recordar:
- La declaración de DOCTYPE debe ser la primera línea de tu documento HTML.
- Ayuda a los navegadores a entender qué versión de HTML estás utilizando.
- Para el desarrollo web moderno, utiliza
<!DOCTYPE html>para HTML5. - La declaración no es una etiqueta HTML; es una instrucción para el navegador.
Agregar la etiqueta raíz HTML y la estructura básica
En este paso, aprenderás sobre la estructura fundamental de un documento HTML, centrándote en la etiqueta raíz HTML y la estructura básica del documento. La etiqueta <html> es el contenedor de todos los demás elementos HTML y sirve como el elemento raíz de una página HTML.
Abre el archivo index.html que creaste en el paso anterior en el WebIDE. Ampliemos la estructura HTML anterior agregando la etiqueta raíz completa y sus componentes esenciales:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML Structure</h1>
<p>This is the basic structure of an HTML document.</p>
</body>
</html>
Desglosemos los componentes clave:
- Etiqueta
<html>: El elemento raíz que envuelve todo el contenido HTML restante. - Atributo
lang="en": Especifica el idioma del documento (inglés en este caso). - Dos elementos hijos principales:
<head>: Contiene metadatos sobre el documento.<body>: Contiene el contenido visible de la página web.
La salida de ejemplo en un navegador web se vería así:
Welcome to HTML Structure
This is the basic structure of an HTML document.
Puntos clave a recordar:
- Todo documento HTML debe tener una etiqueta raíz
<html>. - El atributo
langayuda con la accesibilidad y la optimización para motores de búsqueda. - El documento se divide en secciones
<head>y<body>. - La correcta anidación de etiquetas es crucial para un HTML válido.
