Кодик
Начать бесплатно

Flask + HTML/CSS: создаём простейший веб-сайт на Python

Научись делать простейшие сайты с помощью Flask, HTML и CSS — это проще, чем кажется!

PythonРазработка

6 мин

В нашем сообществе в Telegram недавно поднимался вопрос: как связать Python с HTML и CSS, чтобы получить настоящий сайт?
Ответ прост — с помощью Flask, одного из самых популярных микрофреймворков. Эта статья — ваш первый шаг к созданию сайта с Python: от установки до запуска, со всеми объяснениями и примерами.

🐍 Почему Flask?

Flask — это минималистичный фреймворк для создания веб-приложений. Его плюсы:

  • ✅ Лёгкий старт

  • ✅ Простая архитектура

  • ✅ Поддержка HTML-шаблонов (Jinja2)

  • ✅ Гибкость — сам решаешь, как строить проект

⚙️ Что нужно установить?

Перед началом убедитесь, что установлен Python 3.7 или выше.

pip install flask

Проверка установки:

python -c "import flask; print(flask.__version__)"

📁 Структура проекта

my_website/
├── app.py
├── templates/
│   └── index.html
└── static/
    └── style.css

templates — для HTML, static — для CSS, JS и изображений.

🧠 Шаг 1: 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)

🖼 Шаг 2: 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>

🎨 Шаг 3: Стили 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;
}

🚀 Как запустить проект?

  1. Откройте терминал и перейдите в папку проекта:

  2. cd my_website

  3. Запустите сервер:

  4. python app.py

  5. Перейдите в браузере: http://127.0.0.1:5000

🔍 Как это всё связано?

Компонент

Что делает

Flask

Принимает запрос от пользователя

HTML-шаблон

Отдаёт браузеру страницу

CSS

Придаёт стилевое оформление

Python

Управляет логикой, маршрутами и данными

🧱 Что можно улучшить?

  • ➕ Добавить больше маршрутов

  • 🧾 Передавать данные в шаблоны

  • 📄 Подключить Bootstrap или Tailwind

  • 🗃 Добавить формы и работу с базой данных

👀 Мини-лайфхак

@app.route("/hello/<name>")
def hello(name):
    return f"<h2>Привет, {name}!</h2>"

Теперь при переходе на /hello/Кодик вы получите приветствие 🖐

Хочешь больше практики? В приложении Кодик есть курсы по Python, HTML и другим технологиям. Выполняй задания, проходи мини-проекты и общайся с другими разработчиками в нашем Telegram-сообществе.

💬 Напиши в комментариях, если хочешь продолжение — формы, база данных или деплой на хостинг!

Комментарии