Flask is a web development framework. With Python, there are two modules that can be used for web development: Django and Flask. However, Flask is lighter and easier to learn. In this tutorial, we will build a very simple website using the Python Flask module.
To get started, install flask:
Step #1: Minimal Web Application
Then, in the PyCharm terminal, type the following (where the name of my script file is Python is main.py, in this case replace main.py with the filename of your Python):
Once you run “flask”, the terminal will return a URL with a port. This URL:PORT is where the web page is loaded. You can always press Control + c to exit. In my case, it says “Running at http://127.0.0.1:5000/ (Press CTRL+C to exit)”. So, open your web browser and copy-paste the provided URL. In my case I copied and pasted “http://127.0.0.1:5000/”. Also note that the above lines need to be executed every time you restart PyCharm for it to work:
Step #2: Add HTML
The first thing to do is open the folder where the python script is located and create a folder called “templates”. When I first ran this, I tried putting the name “template” as the folder name, and the whole program crashed and didn’t work. Therefore, it is imperative that you name the folder “templates“. Inside this “templates” folder, create an index.html file with your HTML code. Then use render_template() and pass “index.html” as an argument. Now, if you run “flask run” in the terminal, your HTML code should display:
My html code (index.html) at the moment is as follows:
And, the code for my python file (main.py) is as follows:
The latter will display a simple HTML page.
Step #3: Add CSS
Now, I want to add CSS to my HTML. To do this, create a folder called “static” and create a file called “main.css”. Here, the actual CSS file name can be anything. I’ve decided to call mine “main.css”. However, the folder name must be “static”! In fact, in the “static” folder, one can put anything that is static, such as CSS, JavaScript, and images. So if you’re going to be putting images, JavaScript, and CSS, you might want to create subfolders.
First, let’s write the CSS (main.css) that I want:
Here, in the index.html, we need to write lt;link rel= ”sheet style” type=”text/css” href=”{{ url_for(‘static’, filename=’main.css’)}}”> in the header of the HTML file. Here, the filename is the name of the CSS file (mine is main.css). If, for example, “main.css” is in a subfolder called “css”, then you would write the following:
After that, you can use the CSS you created. For example, I created one called “style” and used it in the h1 class.
My index.html file would look like this:
The main Python file, main.py, stays the same.
Step #4: Add an Image
Now, let’s add an image to the HTML page we created! For this, we use the “static” folder that we created. Inside the “static” folder, I created another folder called “images”. Inside the images folder, I placed an image. Now, let’s add the image to the HTML code as follows: 
. In this case, I set the image height to 200, but you can change it to whatever you want and add CSS if you want.
The HTML code would look like this:
Alternatively, the following could also be used:
Step #5: Add JavaScript
There are two ways to add JavaScript. In this first demo, I’ll create a button. When the button is pressed, it would trigger a function called myFunction() which will be JavaScript (found in the tag). For this, set the button. Then, set up a script tag in the header of the HTML code, and within it, define a function. In my case, I have defined a function that will add the “full resume” to a p element on button click.
You can add it to the index.html file like this:
However, in most cases, JavaScript files tend to be documents themselves, and not a single line. In such cases, we would have a .js file that we need to link to. In my case, I would write: . So, just like the image file, we link the js file as follows:
Alternatively, you can also use this: . The latter would generate this HTML code:
Conclusion
Flask is a micro framework that is easy to use and great for beginners.In particular, the documentation itself is excellent and can be found at https://flask.palletsprojects.com/en/2.0.x/quickstart/#static-files. In this tutorial, we learned how to create a simple website, add CSS, add images, and add JavaScript to the website using the Python Flask module. We hope you found this article useful and check out the Linux Hint for more informative articles.
.