In unserem Telegram-Community kürzlich wurde die Frage gestellt: Wie verbindet man Python mit HTML und CSS, um eine echte Website zu erhalten?
Die Antwort ist einfach - mit Hilfe von Flask, eines der beliebtesten Microframeworks. Dieser Artikel ist Ihr erster Schritt zum Erstellen einer Website mit Python: von der Installation bis zum Start, mit allen Erklärungen und Beispielen.
🐍 Warum Flask?
Flask ist ein minimalistisches Framework zum Erstellen von Webanwendungen. Seine Vorteile:
✅ Einfacher Start
✅ Einfache Architektur
✅ Unterstützung von HTML-Vorlagen (Jinja2)
✅ Flexibilität — Sie entscheiden selbst, wie Sie das Projekt aufbauen
⚙️ Was muss installiert werden?
Stellen Sie vor dem Start sicher, dass Python 3.7 oder höher installiert ist.
pip install flaskInstallationsprüfung:
python -c "import flask; print(flask.__version__)"📁 Projektstruktur
my_website/
├── app.py
├── templates/
│ └── index.html
└── static/
└── style.csstemplates — für HTML, static - für CSS, JS und Bilder.
🧠 Schritt 1: Flask-Anwendung (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)🖼 Schritt 2: HTML-Vorlage (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>🎨 Schritt 3: CSS-Stile (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;
}🚀 Wie starte ich ein Projekt?
Öffnen Sie das Terminal und gehen Sie zum Projektordner:
cd my_websiteStarten Sie den Server:
python app.pyGehen Sie im Browser zu: http://127.0.0.1:5000
🔍 Wie hängt das alles zusammen?
Komponente | Was macht |
|---|---|
Flask | Nimmt eine Anfrage von einem Benutzer entgegen |
HTML-Vorlage | Gibt die Seite an den Browser zurück |
CSS | Verleiht Stil |
Python | Verwaltet Logik, Routen und Daten |
🧱 Was kann verbessert werden?
➕ Weitere Routen hinzufügen
🧾 Daten an Vorlagen übertragen
📄 Bootstrap oder Tailwind aktivieren
🗃 Formulare und Datenbankarbeit hinzufügen
👀 Mini-Lifehack
@app.route("/hello/<name>")
def hello(name):
return f"<h2>Hello, {name}!</h2>"Wenn Sie jetzt zu /hello/Кодик wechseln, erhalten Sie eine Begrüßung 🖐
Möchten Sie mehr üben? Kodik-App Es gibt Kurse in Python, HTML und anderen Technologien. Führe Aufgaben aus, absolviere Miniprojekte und kommuniziere mit anderen Entwicklern in unsere Telegram-Community.
💬 Schreiben Sie in den Kommentaren, wenn Sie eine Fortsetzung wünschen – Formulare, Datenbanken oder Deploy auf Hosting!