Rendering HTML#

Author: Mike Wood

Learning Objectives: By the end of this notebook, you should be able to:

  1. Render HTML templates using local pages

  2. Render HTML templates with external JavaScript resources.

In the previous example, we generated a page with some simple text. However, web pages have far more in their appearance that just text. The appearance of a webpage is controlled using HTML. Using flask, we can render HTML templates directly using the render_template function. HTML pages need to be stored in a directory called “templates”. Similarly, files to be used for the web page, such as images, need to be stored in a “static” directory

Rendering HTML Templates#

In this first example, we’ll see how to implement a simple page with text and an image as described in an HTML template. Let’s look at a simple example:

# import the Flask class from the flask module
from flask import Flask

# import the render_template function
from flask import render_template

# create a Flask object called app
app = Flask(__name__)

# define a route to the home page
# create a template_display function
@app.route("/")
@app.route("/home")
def template_display():
    # render the template_example.html script
    return render_template('template_example.html')

As we can see, the render_template function is called to show the page as described in the template_example.html file. It’s important to note that the this script is organized with subdirectories for static and template in a directory structure as follows:

template_display
|-static
    |-cool_python_image.png
|-template_display.py
|-templates
    |-template_example.html

To run this app, we be sure to update your environment variables and then run the application:

export FLASK_APP=hey_there.py
set FLASK_APP=hey_there.py
flask run

If successful, your page should show the cool_python_image.png image with a header according to the template_example.html as shown here:

<!doctype html>
<html>

<!--This is the header of the html script-->
<head>

<!--Add a title to this html script-->
<title>Template Example</title>

<!--Add a description to this html script-->
<meta name="description" content="A page to display an HTML template">

</head>


<!--This is the body of the html script-->
<body>

<!--Add text for a title on the image-->
Here is a cool Python logo:<br>

<!--Add an image-->
<img src="/static/cool_python_logo.png" alt="A Cool Python Logo">
</body>


</html>

An example output of this page is shown HERE

Using JavaScript in HTML#

As an example of implementing JavaScript into HTML pages, we’ll take a look at some external tools. Often, companies will provide tools so you can implement their features into your web pages. As an example, we’ll take a look at the Environmental Systems Research Institute (ESRI) Software Development Kit (SDK). ESRI is a big name in mapping and these tools provide a convenient way to add beautiful maps to your web pages.

As an example, we’ll make a page with a map of the world that has a marker on the United States with its population. Checkout the example HERE

This page is made with the following HTML template:

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ESRI Map Example</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.28/"></script>
  <script>

  require([
    "esri/config",
    "esri/Map",
    "esri/views/MapView",
    "esri/Graphic",
    "esri/layers/GraphicsLayer"
    ], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) {

  const map = new Map({
    basemap: "satellite" // basemap styles service
  });

  const view = new MapView({
    map: map,
    center: [0,0], //Longitude, latitude
    zoom: 2,
    container: "viewDiv"
 });

 const graphicsLayer = new GraphicsLayer();
 map.add(graphicsLayer);

 const point = { //Create a point
    type: "point",
    longitude: -95.712891,
    latitude: 37.09024
 };

 const simpleMarkerSymbol = {
    type: "simple-marker",
    color: [226, 119, 40],  // Orange
    outline: {
        color: [255, 255, 255], // White
        width: 1
    }
 };

 const pointGraphic = new Graphic({
    geometry: point,
    symbol: simpleMarkerSymbol
 });
 graphicsLayer.add(pointGraphic);

 view.openPopup({
            location: point,
            title: 'United States',
            content: '<b>Population:</b> 331,900,900'
          });

 });
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

As we can see in the above code, the ESRI tools for Map, MapView, Graphic, and GraphicsLayer are all used to add the features to the map. More information about this map can be found in the SDK documentation linked above.