Others
Others

Simple Web Page using Flask


First, we have to install Flask

pip install flask

File Structure:

Simple Web Page using Flask

Creating Project :

  1. Create a folder 'webapp'.
  2. Create 'app.py' file inside of 'webapp' folder.

app.py

Write the following code in 'app.py' file

from flask import Flask,render_template

app=Flask(__name__)

@app.route('/')
def index():
    return render_template("index.html")
	
if __name__=='__main__':
    app.run(debug=True)

Creating HTML Page :

  1. Create the 'templates' folder inside 'webapp' folder for creating HTML page.
  2. Create 'index.html' file inside 'template' folder.

Creating Style Sheet :

  1. Create 'static' folder inside of 'webapp' folder.
  2. Create 'style.css' file inside of 'static' folder.

index.html

Write the following html code in 'index.html' file

<!DOCTYPE html>
<html>
  <head>
    <title>Basic</title>
    <link rel="stylesheet" href="{{url_for('static',filename='style.css')}}"> 
  </head>
  <body>
    <div class='heading'>
      <h2>Welcome to Flask</h2>
      <p>Simple Webpage using Flask framework.</p>
    </div>
  </body>
</html>

style.css

Write the following style code in 'style.css' file

html,body{
  padding:0;
  margin:0 auto;
}
.heading{
  text-align:center;
  padding:25px 30px;
  background-color:rgba(245, 245, 245, 0.856);
  font-size: 25px;
}

Run the Project:

  1. Run 'app.py' file.
  2. Browse the URL 'localhost:5000'.

Output:

Simple Web Page using Flask