Crear estructura y etiquetas HTML básicas

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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/charset("Character Encoding") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/BasicStructureGroup -.-> html/viewport("Viewport Declaration") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-451029{{"Crear estructura y etiquetas HTML básicas"}} html/head_elems -.-> lab-451029{{"Crear estructura y etiquetas HTML básicas"}} html/charset -.-> lab-451029{{"Crear estructura y etiquetas HTML básicas"}} html/lang_decl -.-> lab-451029{{"Crear estructura y etiquetas HTML básicas"}} html/viewport -.-> lab-451029{{"Crear estructura y etiquetas HTML básicas"}} html/text_head -.-> lab-451029{{"Crear estructura y etiquetas HTML básicas"}} html/doc_flow -.-> lab-451029{{"Crear estructura y etiquetas HTML básicas"}} html/inter_elems -.-> lab-451029{{"Crear estructura y etiquetas HTML básicas"}} end

Configurar un documento HTML con declaración de 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 lang ayuda 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.

Configurar la sección de encabezado con etiquetas meta y título

En este paso, aprenderás sobre la sección <head> de un documento HTML y cómo utilizar las etiquetas meta y de título para proporcionar información importante sobre tu página web.

Abre tu archivo index.html en el WebIDE y actualiza la sección <head> con el siguiente ejemplo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="A simple HTML learning page" />
    <title>My HTML Learning Journey</title>
  </head>
  <body>
    <h1>Welcome to HTML Metadata</h1>
    <p>This page demonstrates head section configuration.</p>
  </body>
</html>

Desglosemos las principales etiquetas meta y sus propósitos:

<meta charset="UTF-8">: Especifica la codificación de caracteres para el documento.
<meta name="viewport">: Asegura una representación adecuada en diferentes dispositivos.
<meta name="description">: Proporciona una breve descripción de la página para los motores de búsqueda.
<title>: Establece el título de la página que se muestra en la pestaña del navegador.

Salida de ejemplo en una pestaña del navegador:

My HTML Learning Journey

Puntos clave a recordar:

La sección <head> contiene metadatos sobre el documento HTML.
Las etiquetas meta proporcionan información adicional a los navegadores y motores de búsqueda.
La etiqueta <title> es crucial para la identificación de la página y el SEO (optimización para motores de búsqueda).
Siempre incluye las etiquetas meta de codificación de caracteres y de viewport.

Comprender las etiquetas HTML simples y dobles

En este paso, aprenderás sobre los dos tipos de etiquetas HTML: las etiquetas simples (auto-cerradas) y las etiquetas dobles. Comprender la diferencia entre estas etiquetas es crucial para crear documentos HTML bien estructurados.

Abre tu archivo index.html en el WebIDE y actualiza la sección del cuerpo con el siguiente ejemplo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Tags Exploration</title>
  </head>
  <body>
    <!-- Double Tags (Opening and Closing) -->
    <h1>Welcome to HTML Tags</h1>
    <p>This is a paragraph with <strong>bold text</strong>.</p>

    <!-- Single (Self-Closing) Tags -->
    <img src="example.jpg" alt="Example Image" />
    <br />
    <input type="text" placeholder="Enter your name" />
  </body>
</html>

Desglosemos los diferentes tipos de etiquetas:

Etiquetas dobles (etiquetas pareadas):

Tienen una etiqueta de apertura <tag> y una etiqueta de cierre </tag>.
El contenido se coloca entre las etiquetas de apertura y cierre.
Ejemplos: <h1>, <p>, <strong>, <div>.

Etiquetas simples (etiquetas auto-cerradas):

No tienen una etiqueta de cierre separada.
Se cierran a sí mismas dentro de la etiqueta.
Ejemplos: <img>, <br>, <input>.

La salida de ejemplo en un navegador se mostraría así:

Welcome to HTML Tags
This is a paragraph with bold text.
[An image would be displayed here]
[A text input field would be shown]

Puntos clave a recordar:

Las etiquetas dobles envuelven el contenido y requieren tanto una etiqueta de apertura como una de cierre.
Las etiquetas simples son autónomas y no envuelven contenido.
Siempre cierra las etiquetas dobles para mantener una estructura HTML adecuada.
Algunas etiquetas simples pueden tener atributos para proporcionar información adicional.

Explorar la etiqueta y la colocación del contenido de la página

En este paso, aprenderás sobre la etiqueta <body> y cómo estructurar el contenido dentro de un documento HTML. La etiqueta de cuerpo es donde se coloca todo el contenido visible de una página web.

Abre tu archivo index.html en el WebIDE y actualiza la sección del cuerpo con el siguiente ejemplo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Content Placement Example</title>
  </head>
  <body>
    <!-- Headings -->
    <h1>Welcome to HTML Content Placement</h1>
    <h2>Subheading Level 2</h2>
    <h3>Subheading Level 3</h3>

    <!-- Paragraphs -->
    <p>This is a paragraph explaining the importance of content structure.</p>

    <!-- Lists -->
    <h4>Key HTML Elements:</h4>
    <ul>
      <li>Headings</li>
      <li>Paragraphs</li>
      <li>Lists</li>
    </ul>

    <!-- Div for grouping content -->
    <div>
      <p>This paragraph is inside a div container.</p>
    </div>

    <!-- Links and Images -->
    <a href="https://example.com">Visit Example Website</a>
    <img src="example.jpg" alt="Example Image" width="300" />
  </body>
</html>

La salida de ejemplo en un navegador se mostraría así:

Salida de ejemplo de colocación de contenido HTML

Puntos clave a recordar:

La etiqueta <body> contiene todo el contenido visible de la página.
Utiliza las etiquetas de encabezado (<h1> a <h6>) para crear una jerarquía de contenido.
Los párrafos, las listas y otros elementos ayudan a organizar la información.
Las etiquetas <div> pueden agrupar y estructurar el contenido.
Incluye enlaces y imágenes para mejorar la interactividad de la página.

Resumen

En este laboratorio (lab), los participantes aprendieron los pasos fundamentales para crear una estructura básica de documento HTML. El proceso comenzó con la configuración de la declaración DOCTYPE, que es crucial para garantizar una representación adecuada en el navegador y la compatibilidad con HTML5. Los aprendices exploraron las etiquetas HTML esenciales, incluyendo la etiqueta raíz <html>, las secciones <head> y <body>, y comprendieron sus roles específicos en la organización del documento.

El laboratorio guió a los estudiantes a través de la creación de un documento HTML completo, mostrando cómo agregar etiquetas meta, establecer la codificación de caracteres, definir un título de página y colocar contenido dentro de la etiqueta de cuerpo. Los participantes adquirieron experiencia práctica en la construcción de una página HTML bien estructurada, aprendiendo conceptos clave como las etiquetas HTML simples y dobles, la correcta anidación de etiquetas y la importancia del marcado semántico en el desarrollo web.