Si te interesa el desarrollo web pero no sabes por dónde empezar, ¡estás en el lugar correcto! En este artículo te enseñaré los pasos básicos para crear tu primera página web usando solo HTML y CSS. No necesitas instalar programas complicados ni conocimientos previos, solo seguir esta guía paso a paso.
¿Qué es HTML y CSS?
HTML (HyperText Markup Language): Es el lenguaje que se usa para estructurar el contenido de una página web. Piensa en él como el esqueleto de tu web.
CSS (Cascading Style Sheets): Es el lenguaje que se usa para darle estilo a la página: colores, tamaños, márgenes, fuentes, etc.
Paso 1: Preparar el entorno
Para crear tu web solo necesitas un editor de texto simple, como el Bloc de notas (Windows), TextEdit (Mac) o algún editor más avanzado como Visual Studio Code, que es gratis y muy popular.
Paso 2: Escribir tu primera página HTML
Abre tu editor de texto y escribe lo siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Primera Página Web</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Esta es mi primera página web creada desde cero.</p>
</body>
</html>
Guárdalo como index.html en una carpeta que puedas encontrar fácilmente.
Paso 3: Abrir la página en el navegador
Ve a la carpeta donde guardaste el archivo, haz doble clic en index.html y verás tu página en el navegador. ¡Felicidades, acabas de crear tu primera web!
Paso 4: Añadir estilo con CSS
Ahora vamos a darle un poco de color y estilo. En el mismo editor, crea un nuevo archivo y escribe esto:
body {
background-color: #f0f8ff;
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
h1 {
color: #007acc;
}
p {
color: #333333;
font-size: 18px;
}
Guárdalo como estilos.css en la misma carpeta donde está tu index.html.
Paso 5: Conectar el CSS a tu HTML
Abre el archivo index.html y dentro de la etiqueta <head>, justo antes de cerrar, añade esta línea:
<link rel="stylesheet" href="estilos.css">
El resultado del <head> quedará así:
<head>
<meta charset="UTF-8">
<title>Mi Primera Página Web</title>
<link rel="stylesheet" href="estilos.css">
</head>
Guarda y vuelve a abrir el archivo en el navegador (o recarga la página). Ahora tu web tendrá color y estilo.
Próximos pasos
- Aprende a agregar imágenes con la etiqueta
<img>. - Descubre cómo crear enlaces con
<a>. - Practica creando listas con
<ul>y<ol>.
Conclusión
Como hemos visto, es fundamental comprender qué son HTML y CSS, y cómo cada uno cumple un rol esencial en el desarrollo web: HTML estructura el contenido, mientras que CSS lo estiliza. Lo primero y más importante es preparar el entorno de trabajo, lo cual no requiere herramientas complicadas. Luego, es crucial escribir correctamente el código HTML para crear la base de la página, y posteriormente, aplicar el estilo con CSS para mejorar la apariencia visual. Siguiendo estos pasos, cualquier principiante puede crear su primera página web de manera sencilla y efectiva.