Render HTML Template on Google Colab

Ankita Choudhury
Analytics Vidhya
Published in
3 min readMar 29, 2021

--

HTML (Hypertext Markup Language) is the code that defines how a web page and its content are organised. Content may be arranged using a sequence of paragraphs, a list of bulleted points, or photographs and data tables, for example.

Python’s Flask API helps us to create web applications. A Web-Application Framework is a collection of modules and libraries that allow programmers to build applications without having to write low-level code including protocols and thread management.

We’ll look at how to use flask to render a HTML template below.

  1. Open Google Colab and create a new notebook in it.

2. Then, install flask-ngrok. It is because google colab provides Virtual Machine hence we can’t access the local-host. So, we will use the flask web app in to a public URL using ngrok.

3. Install flask-bootstrap (Optional)

4. Import all required files from flask as shown below.

5. Create a folder named “static” in Google Colab’s Files directory. Upload all the necessary CSS, JS, fonts, and images folders to that folder.

6. Create another folder named “template” in the Files directory. Then, upload the required .html file in it for rendering.

7. Run the following codes to render html template.

8. Click on the secure URL of ngrok to see your web application in another tab.

Note :- Before running the codes, please make sure that all the CSS, js,fonts and images files source path is mentioned correct in the .html file.

--

--