Document

Render HTML file in Flask

As a Python developer, you might find yourself lacking in building websites that other developers like JavaScript, PHP, etc. can easily do. Well, you can also build web applications using Python by implementing a super simple framework called Flask.

Flask is a lightweight web framework that can be used in Python to build web applications without the need for any additional programming languages.

One of the best features of Flask is the rendering of dynamic HTML templates, which can be a very quick way to build a website using just a few lines of code. In this article, we are going to find out how we can render HTML templates using Flask in a very beginner way. So let’s get started.

Step 1: Setting Up Environment for Creating Flask Application

• Installing a Code Editor for writing Python code.
• Installing the latest version of Python from the official Python website (https://www.python.org/downloads/)
• Verify Installation by typing the command python –version in the terminal.
• Install Flask by using the command pip install Flask.
• Verify Flask Installation using the command flask –version.
• Create a Project Directory and Open it inside the Code Editor.

Step 2: Create an HTML File for Rendering

We have to create a new folder in the project directory called templates. Create a new file called home.html in the templates folder for writing HTML code which will be rendered.

Below is the HTML Code:

       
Welcome to the HomePage!
   

Step 3: Writing Code for Render HTML

Now we have to create a Python file app.py where we will be writing code for our Flask app for rending the HTML page we just created.

from flask import Flask, render_template app = Flask(__name__) @app.route('/') def home(): return render_template('home.html') if __name__ == '__main__': app.run()

We are importing the render_template function provided by the Flask and then rendering our HTML template in the home route.

Run the app using the command:

Now, navigate your browser to localhost:5000 to see the output.

Awesome! You have just rendered an HTML template in the Flask.

Frequently Asked Questions (FAQs)

Can Flask render HTML?

Yes, we can use Flask to render HTML pages by importing the render_template function.

How to put HTML code in Python?

To put HTML code in Python, we can either directly include it as strings in our Python code or we can use templating libraries like Jinja for more complex applications. For simplicity, we can use web frameworks like Flask as well.

How do I add multiple HTML files to Flask?

In Flask, create a folder named “templates” and put all HTML files in that folder. Then you can use render_template to load and render these files accordingly.

What is render_template in Flask?

The render_template is a Flask function that we can import to load HTML templates from the “templates” folder and render them with the required data to create dynamic web pages.

How to connect HTML and CSS in Flask?

You must first put the HTML file in the “templates” folder and the CSS file in the “static” folder, then in the head section of the HTML file you have to insert the code >”>.

Summary

In their tutorial, we learned how to render a basic HTML page using Flask in Python. Flask is not limited to small projects. You can also use Flask web applications for projects with advanced functionality like taking user inputs, giving calculated outputs, and we can even build fully-fledged and complex web applications. To deep dive into Flalsk and learn more about it click here.

Reference

Shahid

Founder of Codeforgeek. Technologist. Published Author. Engineer. Content Creator. Teaching Everything I learn!

Источник

Шаблоны HTML во flask из веб-приложений

В этом руководстве мы рассмотрим способы, с помощью которых мы можем вернуть ответ в виде шаблонов HTML во flask из веб-приложений.

Пример

Следующий сценарий flask содержит функцию просмотра, то есть функцию message(), которая связана с URL-адресом ‘/’. Вместо того, чтобы возвращать простую строку в виде сообщения, он возвращает сообщение с прикрепленным к нему тегом

from flask import * app = Flask(__name__) @app.route('/') def message(): return "
Hi, welcome to the website
" if __name__ == '__main__': app.run(debug = True)

Рендеринг внешних файлов HTML

Flask позволяет нам отображать внешний HTML-файл вместо жесткого кодирования HTML в функции просмотра. Здесь мы можем воспользоваться механизмом шаблонов jinja2, на котором основан Flask.

Flask предоставляет функцию render_template(), которую можно использовать для рендеринга внешнего HTML-файла, который будет возвращен в качестве ответа от функции просмотра.

Чтобы отобразить файл HTML из функции представления, давайте сначала создадим файл HTML с именем message.html.

    
hi, welcome to the website
   

from flask import * app = Flask(__name__) @app.route('/') def message(): return render_template('message.html') if __name__ == '__main__': app.run(debug = True)

Здесь мы должны создать шаблоны папок внутри каталога приложения и сохранить шаблоны HTML, на которые есть ссылки в скрипте flask, в этом каталоге.

В нашем случае путь к файлу скрипта script.py — E:\flask, а путь к шаблону HTML — E:\flask\templates.

Разделители

Механизм шаблонов Jinga 2 предоставляет некоторые разделители, которые можно использовать в HTML, чтобы сделать его способным к динамическому представлению данных. Система шаблонов предоставляет некоторый синтаксис HTML, который является заполнителем для переменных и выражений, которые заменяются их фактическими значениями при отображении шаблона.

Механизм шаблонов jinga2 предоставляет следующие разделители для выхода из HTML:

• для инструкций;
• > для выражений для вывода в шаблон;
• для комментариев, которые не включены в вывод шаблона;
• # … ## для строковых операторов.

Рассмотрим следующий пример, в котором переменная часть URL-адреса отображается в сценарии HTML с использованием разделителя >.

from flask import * app = Flask(__name__) @app.route('/user/') def message(uname): return render_template('message.html',name=uname) if __name__ == '__main__': app.run(debug = True)

Переменная часть URL-адреса http://localhost:5000/user/admin отображается в сценарии HTML с помощью заполнителя >.

Встраивание операторов Python в HTML

Из-за того, что HTML является языком разметки и используется исключительно для целей проектирования, иногда в веб-приложениях нам может потребоваться использовать операторы для вычислений общего назначения. Для этой цели Flask предоставляет нам разделитель , который можно использовать для встраивания простых операторов Python в HTML.

В следующем примере мы напечатаем таблицу чисел, указанных в URL-адресе, т. е. URL-адрес http://localhost:5000/table/10 напечатает таблицу из 10 в окне браузера.

Здесь мы должны заметить, что оператор цикла for заключен внутри разделителя , тогда как переменная цикла и число заключены внутри заполнителей >.

from flask import * app = Flask(__name__) @app.route('/table/') def table(num): return render_template('print-table.html',n=num) if __name__ == '__main__': app.run(debug = True)

     
printing table of >
 
> X > = >
  

Ссылка на статические файлы в HTML

Статические файлы, такие как файл CSS или JavaScript, улучшают отображение веб-страницы HTML. Веб-сервер настроен на обслуживание таких файлов из статической папки в пакете или модуле. Статические файлы доступны по в /static приложения.

В следующем примере скрипт flask возвращает файл HTML, т. е. message.html, стиль которого оформлен с использованием таблицы стилей style.css. Система шаблонов flask находит статический файл CSS в каталоге static/css. Следовательно, style.css сохраняется по указанному пути.

from flask import * app = Flask(__name__) @app.route('/') def message(): return render_template('message.html') if __name__ == '__main__': app.run(debug = True)

   >"> 
hi, welcome to the website
   

Источник