Objetivo del Módulo 1
Introducir al estudiante en la creación de páginas web utilizando HTML, comprendiendo su función como lenguaje de estructura y organización del contenido digital.
📘 Clase 1.1 – ¿Qué es HTML y por qué es esencial?
HTML es el lenguaje que permite dar forma al contenido que se muestra en un navegador. No es un lenguaje de programación tradicional, sino un lenguaje de marcado, diseñado para indicar qué tipo de información se está mostrando y cómo debe organizarse.
En la educación digital, HTML es considerado el primer paso obligatorio para comprender el desarrollo web, ya que todos los sitios, sin excepción, dependen de él.
Aprender HTML no es aprender a “decorar”, es aprender a estructurar información de manera lógica y comprensible.
Google Developers. (2023). Web fundamentals: HTML basics. Google.
📘 Clase 1.2 – Cómo interpreta HTML un navegador
Cada etiqueta HTML cumple una función específica que le indica al navegador qué hacer con el contenido.
Por ejemplo:
- Identificar títulos
- Reconocer párrafos
- Mostrar imágenes
- Crear enlaces
Gracias a esta interpretación, el contenido se presenta de forma ordenada y coherente.
📘 Clase 1.3 – Estructura básica de un documento HTML
Todo archivo HTML sigue una estructura base que permite al navegador entender correctamente el documento.
Conceptos clave que se aprenden en esta clase:
- Documento raíz
- Sección informativa
- Cuerpo visible del sitio
- Organización jerárquica del contenido
Esta estructura es un estándar educativo reconocido en la formación digital básica.
🧱 ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML
<!DOCTYPE html>
Esta declaración indica al navegador que el tipo de documento que se está usando la versión moderna de HTML.
Su función es activar el modo estándar de interpretación, evitando que el navegador utilice reglas antiguas o incompatibles.No es una etiqueta visible ni contiene contenido, pero es esencial para el correcto funcionamiento del documento.
<head></head>
<head></head>Esta etiqueta almacena información técnica y descriptiva del documento.
Su contenido no se muestra directamente en la página, pero es fundamental para que el navegador conozca cómo debe procesar y presentar el sitio.Dentro de esta sección se definen configuraciones internas del documento.
<meta></meta>
La etiqueta
<meta>proporciona información adicional sobre el documento.
Se utiliza para definir aspectos como la codificación de caracteres, lo que permite mostrar correctamente textos, símbolos y caracteres especiales.Estas configuraciones influyen en la correcta visualización del contenido.
<title></title>
Define el nombre de la página web.
Este título aparece en la pestaña del navegador y es utilizado por los motores de búsqueda para identificar el contenido del sitio.Un título claro ayuda tanto a los usuarios como a los sistemas de indexación.
<body></body>
Es la sección donde se coloca todo el contenido visible de la página.
Aquí se incluyen textos, imágenes, enlaces y cualquier elemento con el que el usuario interactúa.El cuerpo del documento representa la parte funcional y visual del sitio web.
A continuación se muestra un documento HTML funcional, seguido de una explicación clara y original de cómo interactúan sus etiquetas.
Programa en VisualCode
📘 ETIQUETAS HTML — CLASIFICADAS POR GRUPOS
ETIQUETAS DE TEXTO Y CONTENIDO
Etiquetas:
<h1>a<h6><p><span><strong><em><br><hr>
ETIQUETAS DE AGRUPACIÓN Y CONTENEDORES
<div><section><article><aside><main><header><footer><nav>
ETIQUETAS DE LISTAS
<ul>(lista no ordenada)<ol>(lista ordenada)<li>(elemento de lista)
ETIQUETAS DE ENLACES Y MULTIMEDIA
<a><img><audio><video><source>
ETIQUETAS DE FORMULARIOS
<form><input><label><textarea><button><select><option>
ETIQUETAS DE TABLAS
<table><tr><td><th><thead><tbody>
ETIQUETAS DE SCRIPT Y ESTILO
<style><script><link>