Dans notre communauté Telegram la question a récemment été soulevée : comment lier Python avec HTML et CSS pour obtenir un vrai site Web ?
La réponse est simple : avec l'aide Flask, l'un des microframeworks les plus populaires. Cet article est votre première étape vers la création d'un site Web avec Python : de l'installation au lancement, avec toutes les explications et exemples.
🐍 Pourquoi Flask ?
Flask est un framework minimaliste pour la création d'applications Web. Ses avantages :
✅ Démarrage facile
✅ Architecture simple
✅ Prise en charge des modèles HTML (Jinja2)
✅ Flexibilité : vous décidez vous-même de la manière de construire le projet
⚙️ Que faut-il installer ?
Avant de commencer, assurez-vous que Python 3.7 ou une version ultérieure est installé.
pip install flaskVérification de l'installation :
python -c "import flask; print(flask.__version__)"📁 Structure du projet
my_website/
├── app.py
├── templates/
│ └── index.html
└── static/
└── style.csstemplates — pour HTML, static — pour CSS, JS et images.
🧠 Étape 1 : Application 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)🖼 Étape 2 : modèle 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>🎨 Étape 3 : Styles 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;
}🚀 Comment démarrer un projet ?
Ouvrez le terminal et accédez au dossier du projet :
cd my_websiteDémarrez le serveur :
python app.pyAccédez au navigateur : http://127.0.0.1:5000
🔍 Comment tout cela est-il lié ?
Composant | Ce qu'il fait |
|---|---|
Flask | Accepte la demande de l'utilisateur |
Modèle HTML | Donne la page au navigateur |
CSS | Donne un style |
Python | Gère la logique, les itinéraires et les données |
🧱 Que pouvons-nous améliorer ?
➕ Ajouter plus d'itinéraires
🧾 Transférer des données vers des modèles
📄 Connecter Bootstrap ou Tailwind
🗃 Ajouter des formulaires et travailler avec la base de données
👀 Mini astuce de vie
@app.route("/hello/<name>")
def hello(name):
return f"<h2>Hello, {name}!</h2>"Maintenant, lorsque vous passez à /hello/Кодик, vous recevrez un message de bienvenue 🖐
Vous voulez plus de pratique ? Dans application Kodik il y a des cours sur Python, HTML et d'autres technologies. Effectuez des tâches, réalisez des mini-projets et communiquez avec d'autres développeurs dans notre communauté Telegram.
💬 Écrivez dans les commentaires si vous voulez une suite : formulaires, base de données ou déploiement sur l'hébergement !