Curso completo de HTML para estudiantes

¿Qué es la web?

La web es un sistema de información global accesible a través de internet. Permite publicar documentos, aplicaciones, imágenes, videos y servicios. Para que una página sea visible, se necesita un navegador, un servidor y archivos bien estructurados.

HTML no es un lenguaje de programación, sino un lenguaje de marcado. Su función es describir el contenido y su significado.

¿Qué es un navegador?

Un navegador interpreta el código HTML, CSS y JavaScript y lo convierte en una interfaz visual. Ejemplos: Chrome, Firefox, Edge y Safari.

Cuando un usuario entra a una página, el navegador solicita archivos al servidor, los procesa y los renderiza en pantalla.

¿Qué es un editor de texto?

Herramienta de trabajo

Un editor de texto es la herramienta donde se escribe el código. Puede ser Visual Studio Code, Sublime Text, Atom o incluso un bloc de notas, aunque los profesionales prefieren editores con funciones como resaltado de sintaxis, autocompletado y herramientas de depuración.

Importancia para aprender

Aprender a escribir código en un editor ayuda a organizar mejor las ideas, mantener limpio el proyecto y trabajar con archivos separados para HTML, CSS y JavaScript.

Fundamentos de HTML

1. Etiquetas y sintaxis

Las etiquetas indican al navegador qué tipo de contenido se está creando. Se escriben con corchetes angulares y pueden abrirse y cerrarse.

<h1>Título principal</h1>
<p>Este es un párrafo.</p>

Las etiquetas pueden ser de apertura y cierre.
Algunas etiquetas son autónomas.
Los atributos agregan información o comportamiento.

2. Atributos

Los atributos permiten dar más información a las etiquetas. Son muy útiles para enlaces, imágenes, formularios y accesibilidad.

<a href="https://example.com" target="_blank">Ir al sitio</a>
<img src="foto.png" alt="Foto de ejemplo">

3. Anidación

Una etiqueta puede contener otras etiquetas. Eso se llama anidación y es esencial para construir estructuras limpias y correctas.

<article>
  <h2>Noticia</h2>
  <p>Texto de la noticia.</p>
</article>

Estructura básica de una página

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Mi primer sitio</title>
    <meta name="description" content="Página creada con HTML">
  </head>
  <body>
    <header>
      <h1>Bienvenidos</h1>
    </header>
    <main>
      <section>
        <p>Contenido principal.</p>
      </section>
    </main>
    <footer>
      <p>Pie de página.</p>
    </footer>
  </body>
</html>

La estructura correcta ayuda a que la página se vea ordenada, sea accesible y sea más fácil de mantener.

Etiquetas esenciales que todo estudiante debe dominar

Encabezados, párrafos y listas

<h1>Encabezado principal</h1>
<h2>Subtítulo</h2>
<p>Párrafo de texto.</p>
<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
</ul>

Enlaces, imágenes y medios

<a href="pagina.html">Leer más</a>
<img src="imagen.jpg" alt="Descripción de la imagen">
<video controls>...</video>

Div, span, secciones y artículos

<div>Contenedor general</div>
<span>Texto inline</span>
<section>Sección principal</section>
<article>Artículo independiente</article>

Elementos, atributos, etiquetas de código y enlaces externos

Entender las etiquetas HTML y sus atributos es clave. Además, hay etiquetas especiales para mostrar código y estructura, y formas estándar de cargar CSS y JavaScript.

Etiquetas de código y texto preformateado

<code> se usa para mostrar fragmentos de código dentro de un texto. <pre> mantiene el formato, los saltos de línea y los espacios tal como se escriben.

<pre><code>
const saludo = 'Hola';
console.log(saludo);
</code></pre>

Estas etiquetas son útiles para documentar ejemplos, crear consolas simuladas y mostrar código legible en una página.

Atributos comunes por etiqueta

Los atributos añaden información adicional a las etiquetas HTML.

id: identifica un único elemento en la página. Se usa para enlazar con CSS o JavaScript.
class: aplica estilos o comportamiento a uno o varios elementos.
name: etiqueta los campos de formularios y se usa en el envío de datos.
value: valor inicial de un input, opción o botón.
action: URL a la que se envía un formulario.
method: método HTTP de envío del formulario, usualmente GET o POST.
href: dirección del enlace en <a>.
src: origen de imágenes, scripts o videos.
alt: texto alternativo para imágenes, importante para accesibilidad y SEO.
target: controla dónde se abre un enlace, por ejemplo _blank.
rel: relación entre el documento actual y el recurso enlazado.
placeholder: texto guía en inputs.
required: obliga a completar un campo antes de enviar el formulario.

Meta tags y SEO básico

Las meta etiquetas en el <head> ayudan a definir información importante para el navegador y los motores de búsqueda.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Descripción breve de la página">
<meta name="keywords" content="HTML, CSS, JavaScript, desarrollo web">
<meta name="author" content="Nombre del autor">

El SEO (Search Engine Optimization) consiste en hacer que una página sea fácil de encontrar y entender por buscadores. Los elementos importantes son:

<title>: título visible en los resultados de búsqueda.
<meta description>: descripción corta que aparece en los resultados.
Uso correcto de encabezados <h1> a <h6>.
Texto alternativo alt en imágenes.
URLs limpias y enlaces internos claros.

Cómo se inyecta CSS y JavaScript

CSS se vincula en el <head> con <link>. JavaScript se puede insertar dentro del HTML con <script> o cargarse desde un archivo externo.

<!-- Enlazar CSS -->
<link rel="stylesheet" href="styles.css">

<!-- Inyectar JavaScript al final del body -->
<script src="script.js"></script>

También se puede cargar un script en el <head> usando defer o async para controlar el orden de carga y la ejecución.

<script src="script.js" defer></script>
<script src="script.js" async></script>

Si la página necesita que el JavaScript se ejecute después de cargar el HTML, usar defer es una buena práctica.

También es posible escribir JavaScript directamente en el HTML:

<script>
  console.log('Hola desde el HTML');
</script>

Para cargar librerías externas, se usan etiquetas <script src="..."> o gestores de paquetes en proyectos más complejos.

Qué es una librería y una dependencia

Una librería es código reutilizable que resuelve problemas comunes. Una dependencia es cualquier librería o paquete que tu proyecto necesita para funcionar.

Ejemplos de librerías útiles en JavaScript:

React: para construir interfaces de usuario.
Vue: otra librería para interfaces reactivas.
jQuery: simplifica la manipulación del DOM (menos usada hoy, pero útil como referencia histórica).
Chart.js: para crear gráficos y visualizaciones.
D3.js: para gráficos y visualizaciones avanzadas.

En proyectos modernos, las dependencias se administran con herramientas como npm o yarn.

Cómo se manejan las gráficas en JavaScript y cómo se renderizan en HTML

Las gráficas se suelen dibujar usando librerías que usan <canvas> o SVG. El HTML contiene el contenedor y JavaScript crea los datos y dibuja la gráfica.

<canvas id="grafica" width="400" height="200"></canvas>

<script>
  const ctx = document.getElementById('grafica').getContext('2d');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Enero', 'Febrero', 'Marzo'],
      datasets: [{ label: 'Ventas', data: [10, 20, 15], backgroundColor: '#2563eb' }]
    }
  });
</script>

El HTML ofrece el lienzo, el JavaScript define los datos y la librería los pinta con formas, colores y ejes.

Qué es una API

Una API (Application Programming Interface) es una forma estandarizada de pedir datos o servicios a otra aplicación o servidor.

En web, una API normalmente responde con JSON y puede ser consultada con fetch() o herramientas similares.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

Qué es SEO

SEO significa Search Engine Optimization. Es la práctica de hacer que una página sea fácil de entender y relevante para los motores de búsqueda.

Las páginas con buen SEO tienen:

estructura clara
títulos relevantes
texto descriptivo
enlaces útiles
imágenes con texto alternativo

Formularios y tipos de inputs

¿Por qué son importantes?

Los formularios permiten captar información del usuario: nombres, correos, contraseñas, opciones, archivos y mensajes. Son fundamentales para contacto, registro, encuestas y pedidos.

<form>
  <label for="nombre">Nombre</label>
  <input type="text" id="nombre" name="nombre">
</form>

Tipos de inputs que deben conocer

text
email
password
number
tel
date
time
color
checkbox
radio
file
submit
reset
button
hidden
search
url
range
month
week
datetime-local

Multimedia en HTML: imágenes y videos

Cómo se colocan imágenes en HTML

La etiqueta <img> se usa para mostrar imágenes en una página. Es una etiqueta vacía, lo que significa que no tiene contenido interno.

<img src="foto.jpg" alt="Descripción de la imagen" width="600" height="400">

El atributo src indica la ruta al archivo de imagen. alt describe la imagen para accesibilidad y SEO.

Formatos de imagen más comunes

JPG / JPEG: ideal para fotos y degradados. Buena compresión, pero con pérdida de calidad.
PNG: mejor para gráficos, iconos y transparencias. Soporta calidad sin pérdida.
WEBP: formato moderno con buena compresión y soporte de transparencia. Es cada vez más usado en la web.
SVG: imágenes vectoriales ideales para iconos y logotipos. Escalan sin perder calidad.
GIF: útil para animaciones simples, aunque suele ser más pesado que otros formatos.

Imágenes modernas con `<picture>` y `srcset`

El elemento <picture> permite ofrecer diferentes versiones de una imagen según el tamaño del dispositivo o el formato soportado.

<picture>
  <source srcset="imagen-800.webp" type="image/webp" media="(min-width: 800px)">
  <source srcset="imagen-400.webp" type="image/webp" media="(max-width: 799px)">
  <img src="imagen.jpg" alt="Ejemplo moderno" loading="lazy" decoding="async" width="800" height="450">
</picture>

El navegador elige la mejor fuente compatible y puede cargar la imagen de forma diferida con loading="lazy".

También puedes usar srcset con densidades de pantalla para escoger imágenes de mayor resolución en pantallas retina:

<img src="foto-1x.jpg" srcset="foto-1x.jpg 1x, foto-2x.jpg 2x" alt="Foto retina" loading="lazy">

Así se mejora la calidad en dispositivos de alta densidad sin cargar imágenes pesadas en pantallas normales.

Uso semántico con `<figure>` y `<figcaption>`

<figure> agrupa contenido multimedia y <figcaption> añade una leyenda semántica. Esto es ideal para imágenes, gráficos y videos que necesitan contexto.

<figure>
  <img src="paisaje.webp" alt="Paisaje montañoso" width="800" height="450" loading="lazy">
  <figcaption>Vista de un paisaje montañoso al amanecer.</figcaption>
</figure>

La leyenda ayuda a la accesibilidad y a que los motores de búsqueda entiendan mejor el contenido.

Cómo se colocan videos en HTML

La etiqueta <video> permite reproducir archivos de video directamente en el navegador. Se puede usar con controles y fuentes alternativas.

<video controls width="640" height="360" poster="miniatura.jpg" playsinline>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Tu navegador no soporta el elemento <video>.
</video>

Usar varias <source> con distintos formatos ayuda a garantizar compatibilidad entre navegadores.

Agregar playsinline es útil en móviles para reproducir video dentro de la página sin pasar a pantalla completa automáticamente.

Formatos de video recomendados

MP4: el más compatible con navegadores y dispositivos.
WEBM: formato moderno con buena calidad y compresión para web.
OGG: otro formato abierto que puede usarse como alternativa.

Consejos de uso

Siempre agrega alt en imágenes y un texto alternativo de video si es necesario. Para videos es buena idea usar poster y controles de reproducción.

Usa imágenes ligeras y formatos modernos para mejorar la velocidad de carga y la experiencia del usuario.

Semántica, SEO y accesibilidad

Semántica

La semántica ayuda a dar sentido real al contenido. Usar <header>, <nav>, <main>, <section>, <article>, <aside> y <footer> mejora mucho la organización del sitio.

SEO

El SEO busca que el contenido sea entendido mejor por los motores de búsqueda. Para ello conviene usar títulos claros, descripciones, encabezados jerárquicos, enlaces útiles y textos alternativos en imágenes.

Accesibilidad

Una web accesible es una web más inclusiva. Esto incluye etiquetas bien usadas, textos claros, contraste correcto, formularios con etiquetas y contenido que se pueda navegar con teclado.

¿Qué es el DOM y cómo se renderiza una página?

DOM

El DOM es la representación estructural del documento en memoria. Cada etiqueta se convierte en un nodo, y esos nodos forman un árbol que el navegador puede leer, modificar y mostrar.

<body>
  <h1>Hola</h1>
  <p>Mundo</p>
</body>

Renderización

Cuando el navegador recibe el código, lo interpreta, construye el DOM, aplica estilos y muestra el resultado en pantalla. HTML aporta estructura, CSS aporta diseño y JavaScript aporta interacción.

HTML + CSS + JavaScript trabajan de forma complementaria: HTML estructura, CSS estilos y JavaScript da comportamiento.

Plan modular del curso

Módulo 1. Introducción a la web

¿Qué es internet?
¿Qué es la web?
¿Qué es un navegador?
¿Qué es un editor de texto?

Módulo 2. Fundamentos de HTML

Etiquetas, atributos y sintaxis.
Jerarquía y anidación.
Encabezados, párrafos y listas.
Enlaces e imágenes.

Módulo 3. Estructura y semántica

Doctype, html, head y body.
Secciones semánticas.
Div, span y maquetación básica.
Accesibilidad y SEO básico.

Módulo 4. Formularios

Form, label, input, textarea y button.
Tipos de inputs.
Validación básica.
Mejores prácticas de usabilidad.

Módulo 5. DOM y navegador

¿Qué es el DOM?
Cómo renderiza el navegador.
Relación entre HTML, CSS y JavaScript.
Concepto de árbol de nodos.

Módulo 6. Transición a CSS y JavaScript

HTML como estructura.
CSS como estilo.
JavaScript como lógica e interacción.
Por qué HTML y CSS no se consideran lenguajes de programación.

Recursos útiles para crear páginas web

Estos recursos ayudan a aprender HTML, CSS, JavaScript, SEO, accesibilidad y buenas prácticas de desarrollo web.

MDN Web Docs - Documentación completa de HTML, CSS y JavaScript.
W3Schools - Tutoriales prácticos y ejemplos interactivos.
CSS-Tricks - Artículos y guías sobre diseño y CSS moderno.
web.dev - Buenas prácticas, rendimiento y accesibilidad.
Can I Use - Compatibilidad de navegadores para HTML, CSS y JavaScript.
Google Fonts - Tipografías libres para usar en proyectos web.
Bootstrap - Framework de CSS para interfaces rápidas y responsivas.
Chart.js - Librería sencilla para crear gráficos en JavaScript.
Documentación de Chart.js - Guías para gráficos y visualizaciones.
Guías de SEO de Google - Cómo optimizar páginas para buscadores.

Usar recursos confiables ayuda a escribir código más limpio, aprender mejores prácticas y descubrir nuevas herramientas para mejorar tus proyectos.

Actividades de clase y tareas

Actividades en clase

Crear una página con título, párrafos y listas.
Agregar enlaces e imágenes.
Construir un formulario con varios tipos de inputs.
Comparar una estructura semántica y una no semántica.
Identificar cómo se ve la estructura del DOM en una página simple.

Actividades para la casa

Diseñar una landing page sencilla con HTML.
Crear una página de contacto con formulario.
Desarrollar una galería de imágenes con enlaces.
Elaborar un mini portafolio personal.
Investigar y explicar la diferencia entre HTML, CSS y JavaScript.
Resolver el ejercicio JSON en Api/index.html y practicar la carga de datos desde un archivo core.json.

Proyecto final

Crear una página web completa y organizada.
Usar etiquetas correctas y semánticas.
Agregar formularios, imágenes y enlaces.
Aplicar buenas prácticas de accesibilidad y SEO básico.
Presentar la página como un proyecto de inicio del desarrollo web.

HTML, CSS y JavaScript: una base para el desarrollo web

HTML define la estructura del contenido. CSS define la presentación y el diseño. JavaScript agrega comportamiento e interacción. Por esa razón, estos tres trabajan juntos para construir experiencias web completas.

HTML y CSS no se consideran lenguajes de programación en el sentido tradicional porque no ejecutan lógica compleja ni decisiones con instrucciones condicionales. JavaScript sí es un lenguaje de programación porque permite crear lógica, funciones, eventos y comportamiento dinámico.

Plan de acompañamiento del curso

Objetivo general: Que los estudiantes comprendan la estructura de una página web y puedan construir una base sólida en HTML.
Objetivo específico: Que aprendan a usar etiquetas correctamente, estructurar contenido, crear formularios, entender el DOM y prepararse para CSS y JavaScript.
Enfoque metodológico: Explicación guiada, ejemplos, práctica constante, revisión en clase y proyectos progresivos.
Resultado esperado: Que cada estudiante pueda construir una página web sencilla, organizada, accesible y con una base sólida para seguir creciendo.

Próximos pasos del curso