Hello friends how are you, today in this blog i will teach you how you can run a HTML file in Python using flask web framework. This tutorial will help you definitely if you wan to create a website in Python. I am using PyCharm IDE and now i am going to describe everything step by step so just go through this post to get complete knowledge.
Step 1: Create a project in PyCharm you can create this in any drive of your system.
- go to File and click on New Project
- After that a screen will open like below here you have to select your project folder and give your project name
- After click on Create button your project will be created in your system and you will get a screen like below
Step 2: Create a template and static folders in your project
- To create folder in your project right click on project name select new then click on directory.
- After clicking on Directory you will get a screen like below
- In the above screenshot you have a textbox here type folder name template and click ok .
- Do same process for creating static folder.
- After doing this you project screen look like below
Step 3: Create HTML page inside template folder
- To create HTML page right click on template folder then go to new and click on HTML
- After clicking on HTML file you will get a screen like below
- Here in textbox you can type any name for your HTML file in my case i am giving index, after typing name of file press enter ,it will create HTML file automatically.
Step 4: Create a HTML page
- I a am giving a simple code for your HTML page ,instead of using my code you can use your own HTML code ,if you have currently no HTML code then use my HTML code which i am giving below just copy this code and paste in your index.html page.
<html>
<head>
<title>HTML in Python</title>
<style>
a{
color:white;
background-color:#FF3399;
padding:5px 15px 5px 15px;
text-decoration:none;
border-radius:20px;
display: block;
width: 120px;
}
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
</head>
<body style="background-color:rgb(6,23,58)">
<table border="0" width="100%" height="10%" bgcolor="#000000" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;border-bottom:1px dotted white;">
<tr>
<td style="color:#ffffff;font-size:50px;text-shadow:2px 2px 2px red">Project Reporting</td>
<td width="10%" align="center"> <a href="index">Home</a></td>
<td width="10%" align="center"> <a href="about">About</a></td>
<td width="10%" align="center"> <a href="projectreg">Registration</a></td>
<td width="10%" align="center"> <a href="projectlist">Project List</a></td>
<td width="10%" align="center"> <a href="proupdate">Pro Update</a></td>
<td width="10%" align="center"> <a href="admin">Admin</a></td>
</tr>
</table><br><br><br><br><br><br><br>
<table border="0" style="box-shadow:1px 1px 10px white" width="70%" height="70%" align="center">
<tr>
<td align="center" valign="top">
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="static/image/slide1.jpg" style="width:1100px" height="350px">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="static/image/slide2.jpg" style="width:1100px" height="350px">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="static/image/slide3.jpg" style="width:1100px" height="350px">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="static/image/slide4.jpg" style="width:1100px" height="350px">
<div class="text">Caption Text</div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</td>
</tr>
<tr style="background-color:black;color:white;height:25px">
<td><marquee behavior="alternate">
Welcome of You in my Project.
</marquee></td>
</tr>
</table>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
Step 5:Store images in static folder
- if you use images in your HTML page then you have to store it inside static folder so just create a image folder inside static folder [Using previous steps] and store four images [slid1 ,slide2,slide3,slide4] after doing this your project screen will look like below
Step 6: Create python file to execute this HTML file
- To create a python file right click on project name go to new and click on python file
- After clicking on Python file you will get a screen like below
- Here you can type any name for your python file ,in my case it is "app" so just type app and press enter this will create a app.py file automatically [Remember: No need to type app.py you have to type only app and press enter].
- Now you project screen look like below
Step 7: Install Flask Library or Package
- To install go to File and click on Setting
- After clicking on Setting you will get a screen like below
- Here in above screen you have to click on Project Interpreter and after clicking you will get a screen like below
- Here in above screen you have to click on plus[+] icon as indicated by arrow, after clicking on it you will get a screen like below
- here in above screen first search "flask" in search box then make sure "Flask" is selected as indicated above and finally click on "Install Package" to add this library in your project, after that wait for some seconds [It depends upon your internet speed] it will display a message below.
- After this message close this window.
Step 8: Write Python Code
- There is a code below which you need to copy it and and paste it to your app.py file
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/')
@app.route('/index', methods=['GET', 'POST'])
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(port=5000,debug=True)
- After doing this Run your python code and look console screen below the code, it will look like below
- From the above screen you just copy the URL as indicated in above screen and paste it to any browser and you will final output like below.
I hope now you can Create and Run Static Website in Python using Flask Web Framework. If you have any doubt regarding this post or you want something more in this post then let me know by comment below i will work on it definitely.
If you want complete Web project in [Python,Flask] then comment your response i will make a complete post about project.
If you like my post then share it with your friends. Thanks😊
0 Comments