¿Te estás iniciando en el mundo del desarrollo web y quieres empezar por algo práctico? Hoy te traigo un sencillo pero completo ejercicio en HTML que te ayudará a comprender la estructura básica de una página web. Lo trabajaremos paso a paso, ideal para quienes están aprendiendo desde cero.
¿Qué aprenderás con este ejercicio?
- Cómo estructurar un documento HTML correctamente.
- Qué son y cómo se usan las etiquetas básicas como
<html>,<head>,<title>,<body>,<h1>,<p>,<br>,<b>,<i>,<hr>, y más. - Buenas prácticas para crear páginas web bien organizadas.
Estructura del ejercicio
En este ejercicio crearás una página web simple que contenga:
- Un título de documento.
- Un encabezado principal visible.
- Varios párrafos de texto, algunos con formato (negrita, cursiva).
- Saltos de línea y una línea horizontal para separar contenido.
- Información adicional como el nombre del autor y una fecha.
Código HTML del ejercicio
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi primera página web</title>
</head>
<body>
<h1>Bienvenido a mi página web</h1>
<p>Este es un párrafo de ejemplo en <b>negrita</b>.</p>
<p>También puedes usar <i>cursiva</i> para resaltar información.</p>
<p>Aquí va otro párrafo. <br>Este texto aparece en una nueva línea.</p>
<hr>
<p>Autor: Juan Pérez</p>
<p>Fecha: 25 de marzo de 2025</p>
</body>
</html>
¿Cómo practicarlo?
- Abre un editor de texto como Notepad++, Visual Studio Code o el Bloc de notas.
- Copia el código anterior y guárdalo con la extensión
.html(por ejemplo:ejercicio1.html). - Abre el archivo con tu navegador para ver el resultado.
Consejos extra
- Asegúrate de guardar siempre tus archivos con codificación UTF-8 para evitar problemas con caracteres especiales.
- Puedes cambiar los textos y jugar con otras etiquetas como
<u>(subrayado),<em>o<strong>para ver cómo funcionan.
Conclusión
Este ejercicio es ideal para familiarizarte con la sintaxis de HTML y empezar a construir tus propias páginas. Desde aquí puedes seguir aprendiendo CSS para dar estilo, o incluso JavaScript para agregar interactividad.
