question archive In this week, you have studied additional Python language syntax for rendering HTML templates using the Python Flask module
Subject:Computer SciencePrice:3.87 Bought7
In this week, you have studied additional Python language syntax for rendering HTML templates using the Python Flask module. The Lab for this week demonstrates your knowledge of this additional Python functionality. Be sure to use the examples in the textbook and readings along with the associate libraries, functions and processes when completing the assignments for this week. ? Python Web Page Code (Python code, Templates, CSS and other associated files). This exercise uses your programming environment to generate a simple Web site using Python flask. The site should be unique, include at least 3 routes (e.g. number of pages one can navigate), each route should render the HTML pages by using the render_template() functionality. A style sheet should be included that is used by all Web pages. Proper organization should take place of the web site including the location of templates and static pages. Keep in the basic HTML form for a function web page includes the following components:
<!DOCTYPE html>
<html>
<head>
<title> Page Title</title>
</head>
<body>
...your page content...
</body>
</html>
In addition to the requirements list above the following functionality should be found within your web site on one or more web pages. ?
The content and topic of the Web site is up to you. Consider an information web site about a topic you are interested. It should be unique and something you want to create. Be sure to end tags that are started (e.g. <h1>/<h1>)
Answer:
app.py
from datetime import date from flask import Flask, render_template app = Flask(__name__) @app.route('/') @app.route('/index.html') def home(): return render_template('index.html', date = date.today() ) @app.route('/page2.html') def page2(): return render_template('page2.html', date = date.today() ) @app.route('/page3.html') def page3(): return render_template('page3.html', date = date.today() ) if __name__ == '__main__': app.run(debug = True)
index.html
<html> <head> <title>Index Page</title> <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/style.css') }}"> </head> <body> <h1>Page 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <div class="separate"> <ol> <li>One</li> <li>Two</li> </ol> </div> <div class="separate"> <ul> <li>One</li> <li>Two</li> </ul> </div> <!--Display the date passed from python--> <p>Today is {{date}}</p> <br> <a href="https://www.google.com">Visit Site1</a> <a href="https://www.google.com">Visit Site2</a> <a href="https://www.google.com">Visit Site3</a> <br> <a href="/page2.html">Page 2</a> <a href="/page3.html">Page 3</a> </body> </html>
page2.html
<html> <head> <title>Page 2</title> <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/style.css') }}"> </head> <body> <h1>Page 2</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <div class="separate"> <ol> <li>One</li> <li>Two</li> </ol> </div> <div class="separate"> <ul> <li>One</li> <li>Two</li> </ul> </div> <!--Display the date passed from python--> <p>Today is {{date}}</p> <br> <a href="https://www.google.com">Visit Site1</a> <a href="https://www.google.com">Visit Site2</a> <a href="https://www.google.com">Visit Site3</a> <br> <a href="/index.html">Home Page</a> <a href="/page3.html">Page 3</a> </body> </html>
page3.html
<html> <head> <title>Page 3</title> <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/style.css') }}"> </head> <body> <h1>Page 3</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <div class="separate"> <ol> <li>One</li> <li>Two</li> </ol> </div> <div class="separate"> <ul> <li>One</li> <li>Two</li> </ul> </div> <!--Display the date passed from python--> <p>Today is {{date}}</p> <br> <a href="https://www.google.com">Visit Site1</a> <a href="https://www.google.com">Visit Site2</a> <a href="https://www.google.com">Visit Site3</a> <br> <a href="/index.html">Home Page</a> <a href="/page2.html">Page 3</a> </body> </html>
style.css
.separate{ margin-top: 10px; }
pfa