Programación Web • ITI-07 • 21 ene 2026

Maquetación Web con HTML: construyendo la estructura de una página

¿Qué vamos a aprender hoy?

Hoy vamos a aprender a armar la estructura de una página web usando HTML.
Antes de que una página se vea bonita o tenga animaciones, primero debe estar bien construida, y eso es justo lo que hace la maquetación.

¿Qué es la maquetación web?

La maquetación es básicamente ordenar el contenido de una página web.

Piénsalo así:

HTML es la estructura (paredes)
CSS es el diseño (colores, tamaños)
JavaScript es la interacción (botones, efectos)

Hoy nos enfocamos solo en la estructura.

Estructura básica de un archivo HTML

Todo archivo HTML sigue esta forma:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi primer sitio web</title>
</head>
<body>
  <h1>Hola mundo</h1>
</body>
</html>

Lo importante aquí:

El archivo termina en .html
<!DOCTYPE html> le dice al navegador que es HTML5
El <head> tiene información del sitio
El <body> es lo que sí vemos en pantalla

Etiquetas básicas que vamos a usar mucho

Texto

<h1> a <h6> → títulos
<p> → párrafos
<strong> y <em> → destacar texto

Listas

<ul> → listas sin orden
<ol> → listas numeradas
<li> → elementos de la lista

Enlaces e imágenes

Enlaces

Sirven para movernos entre páginas: <a href="#">Ir a otra página</a>

Imágenes

<img src="imagen.jpg" alt="Descripción de la imagen">

El alt siempre va, ayuda a accesibilidad y SEO.

Formularios (muy usados)

Los formularios permiten que el usuario escriba información.

<form>
  <input type="text" placeholder="Tu nombre">
  <input type="email" placeholder="Tu correo">
  <button>Enviar</button>
</form>

Tablas

Se usan para información ordenada:

Nombre	Carrera	Matricula
Angel	ITI	2021030003

<table>
  <tr>
    <th>Nombre</th>
    <th>Carrera</th>
    <th>Matricula</th>
  </tr>
  <tr>
    <td>Angel</td>
    <td>ITI</td>
    <td>2021030003</td>
  </tr>
</table>

HTML semántico (esto sí es importante)

HTML5 tiene etiquetas que describen lo que contienen.

En lugar de solo usar <div>, usamos:

<header> → encabezado
<nav> → menú
<main> → contenido principal
<section> → secciones
<footer> → pie de página

Esto hace el código:

Más fácil de leer
Mejor para Google y Navegadores
Más accesible

Buenas prácticas (tips rápidos)

Indentar bien el código
Usar nombres claros
No mezclar todo en un solo archivo sin orden
Pensar en quién va a leer tu código (incluido tú en el futuro)

Práctica rápida: estructura básica de una página web

Vamos a crear una página web sencilla usando HTML semántico.
La idea es entender qué va en cada sección, no que se vea bonita todavía.

Paso 1: Estructura completa del archivo HTML

Crea un archivo llamado index.html y escribe lo siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Universidad UPMYS</title>
</head>
<body>

  <!-- Encabezado del sitio -->
  <header>
    <h1>Universidad UPMYS</h1>
  </header>

  <!-- Menú de navegación -->
  <nav>
    <a href="#">Inicio</a>
    <a href="#">Carreras</a>
    <a href="#">Contacto</a>
  </nav>

  <!-- Contenido principal -->
  <main>
    <section>
      <h2>Bienvenidos</h2>
      <p>Este es nuestro sitio web</p>
    </section>
  </main>

  <!-- Pie de página -->
  <footer>
    <p>© 2026 Universidad UPMYS</p>
  </footer>

</body>
</html>