En nuestro comunidad en Telegram recientemente surgió la pregunta: ¿Cómo conectar Python con HTML y CSS para obtener un sitio web real?
La respuesta es simple: con ayuda Flask, uno de los microframeworks más populares. Este artículo es tu primer paso para crear un sitio web con Python: desde la instalación hasta el lanzamiento, con todas las explicaciones y ejemplos.
🐍 ¿Por qué Flask?
Flask es un marco minimalista para crear aplicaciones web. Sus ventajas:
✅ Comienzo fácil
✅ Arquitectura sencilla
✅ Soporte de plantillas HTML (Jinja2)
✅ Flexibilidad: tú decides cómo construir el proyecto
⚙️ ¿Qué hay que instalar?
Antes de comenzar, asegúrate de tener Python 3.7 o superior instalado.
pip install flaskComprobación de la instalación:
python -c "import flask; print(flask.__version__)"📁 Estructura del proyecto
my_website/
├── app.py
├── templates/
│ └── index.html
└── static/
└── style.csstemplates — para HTML, static — para CSS, JS e imágenes.
🧠 Paso 1: Aplicación Flask (app.py)
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
return render_template("index.html")
if __name__ == "__main__":
app.run(debug=True)🖼 Paso 2: plantilla HTML (templates/index.html)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мой сайт на Flask</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<h1>Привет из Flask!</h1>
<p>Это наш первый сайт на Python с HTML и CSS 🐍</p>
</body>
</html>🎨 Paso 3: Estilos CSS (static/style.css)
body {
font-family: 'Segoe UI', sans-serif;
background-color: #f5f5f5;
color: #333;
text-align: center;
margin-top: 80px;
}
h1 {
color: #0077cc;
font-size: 36px;
}
p {
font-size: 20px;
color: #555;
}🚀 ¿Cómo poner en marcha un proyecto?
Abre la terminal y ve a la carpeta del proyecto:
cd my_websiteInicia el servidor:
python app.pyVe al navegador: http://127.0.0.1:5000
🔍 ¿Cómo se relaciona todo esto?
Componente | ¿Qué hace? |
|---|---|
Flask | Recibe una solicitud del usuario |
Plantilla HTML | Devuelve la página al navegador |
CSS | Da un diseño estilístico |
Python | Gestiona la lógica, las rutas y los datos |
🧱 ¿Qué se puede mejorar?
➕ Añadir más rutas
🧾 Transferir datos a plantillas
📄 Conectar Bootstrap o Tailwind
🗃 Añadir formularios y trabajo con la base de datos
👀 Mini truco
@app.route("/hello/<name>")
def hello(name):
return f"<h2>Hello, {name}!</h2>"Ahora, al cambiar a /hello/Кодик, recibirás un saludo 🖐
¿Quieres más práctica? aplicación Kodik hay cursos de Python, HTML y otras tecnologías. Completa tareas, realiza miniproyectos y comunícate con otros desarrolladores en nuestra comunidad de Telegram.
💬 ¡Escribe en los comentarios si quieres una continuación: formularios, base de datos o despliegue en el alojamiento!