This is an old revision of the document!
Tasks
First, download the skeleton archive (.zip) and unzip it.
It has the following structure:
├── initial_design.html # initial HTML template ├── public/ │ ├── bootstrap/ # bootstrap sources │ ├── images/ │ └── style.css # main stylesheet ├── server.py # server-side application └── templates/ # Jinja templates
To test, open initial_design.html
in a browser. It should look similar (almost: minor text differences) to the following screenshot:
Also, there are other open-source CSS toolkits, google them before starting a website and choose something you like before starting a design project.
Also, it would be a good idea to test your Python / Flask setup now:
python3 server.py
# it should say that the server is running on http://127.0.0.1:5000/
Our customer wants to make some changes to the website's design:
public/images/
;<img>
tag;style.css
for existing definitions!<header>
to match the chosen image on its margins (maybe something blue?);15px
);border-radius
*wink*
./path/to/file.jpg
)?
HTML also uses them (those URLs will be relative to your current file – either the .html
or the .css
)!
In some cases (webpage has sub-paths, e.g., /account/details.html
), you may also use absolute URLs (path begins with a /
representing the server's root directory).
Time to add a second HTML page:
second.html
;.html
pages (in each HTML page, find the <a class=”…” href=”..”>
links inside the #navbarToggle
div
and edit the href
s to point to each-other);
pagename.html
or ./pagename.html
will do! DO NOT USE: absolute paths, e.g., C:\Users\…\pagename.html
for obvious portability reasons!
.active
) with your desired properties and append it to the appropiate menu link element: <a class=“nav-item nav-link” …>
(also note: different class attribute values are separated by space!).
First, let's understand how Flask serves files:
public/myimage.jpg
(or use whatever name you wish, but keep this directory!);python3 server.py
) and point your browser to http://localhost:5000/public/myimage.jpg
, it should display your image.server.py
; start the web server, point your browser to http://localhost:5000/myimage2.jpg
– it won't work… why?
Now, we want to move the html
page from earlier tasks to be served by the Flask web server:
initial_design.html
to the templates/
directory (we're using the default Flask convention);server.py
to call render_template
(see official quickstart guide) and actually serve your HTML file.
render_template
symbol from the Flask library!
/google
endpoint which automatically redirects to your favorite (or not) search engine!Finally, we shall see how dynamic content can be interpolated
{{mycontent}}
(this literal text!) as content somewhere inside the main content block: <div class="content-box main-content">
...
{{mycontent}}
...
server.py
code (the second_page
function) to take in the desired value as a request parameter and pass it to the mycontent
template variable, e.g.: def second_page(): render_template("second.html", mycontent=request.args.get("mycontent", "<not specified>"))
mycontent
value as a GET
URL parameter (e.g., ?parameter=value
) and see if the content changes dynamically after the request!