Primeros pasos con HTML: Crea tu primera página web en 10 minutos
Mike Codeur
¿Sueñas con crear tu propio sitio web pero no sabes por dónde empezar?
Buenas noticias: con HTML, la base de la web, puedes crear una primera página sencilla en poco tiempo. No necesitas ser un experto, ¡sigue esta guía y comienza ahora!
¿Qué es HTML?
HTML, o HyperText Markup Language, es la estructura básica de todas las páginas web. Piensa en HTML como el esqueleto que da forma a tus contenidos en línea. Usando etiquetas (o tags), puedes estructurar texto, agregar imágenes, insertar enlaces y mucho más.
Tu equipo inicial
Antes de empezar, esto es lo que necesitas:
- Un editor de texto: Visual Studio Code o incluso el Bloc de notas.
- Un navegador web: Chrome, Firefox o Edge.
- 10 minutos de tu tiempo.
Paso 1: Crea el archivo HTML
- Abre tu editor de texto.
- Guarda un archivo nuevo con la extensión
.html, por ejemplo:index.html.
Paso 2: Estructura básica de una página HTML
Copia y pega este código en tu archivo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primera Página Web</title>
</head>
<body>
<h1>¡Bienvenido a mi primera página web!</h1>
<p>Este es un párrafo de texto. Crear una página web es más sencillo de lo que piensas.</p>
</body>
</html>Explicación rápida:
<!DOCTYPE html>: Indica que estamos usando HTML5.<html>: La raíz de tu documento.<head>: Contiene información sobre la página (como el título mostrado en la pestaña del navegador).<body>: Contiene todo lo que los visitantes verán.
Paso 3: Visualiza tu página
- Abre el archivo
index.htmlen tu navegador (haz doble clic sobre él). - ¡Felicidades! Has creado tu primera página web.
Paso 4: Agrega más elementos
Experimenta agregando más contenido a tu página.
Agregar una imagen:
<img src="https://via.placeholder.com/150" alt="Imagen de ejemplo">Agregar un enlace:
<a href="https://www.google.com" target="_blank">Visita Google</a>Paso 5: Personaliza con algo de estilo
Para hacer que tu página sea más atractiva, agrega un archivo CSS básico.
- Crea un archivo llamado
style.cssen la misma carpeta. - Agrega este código:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
text-align: center;
}- Vincula el archivo CSS a tu HTML agregando esta línea en el
<head>:
<link rel="stylesheet" href="style.css">Actualiza tu página para ver el resultado.
Conclusión
En solo unos minutos, has creado una página web funcional y has comenzado a explorar las bases del desarrollo web. Este es el inicio de un emocionante viaje. Sigue experimentando y, lo más importante, ¡diviértete! 🚀