You said study Python. Moreover, I said that you don't have to study HTML5. That is *** lie ***.

Results of various trials

It's not a lie to be exact, but what I found by investigating the contents is realized by using a function of Python and a function called Flask (jinja2).

Code I actually tried

I made a description using only Flask as shown below and tried it with ʻelectron .`, but it is working properly.

$ cat index.py
#!/usr/bin/env python3
# -*- coding: utf-8 -*-

from __future__ import print_function
import time
from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return "<!DOCTYPE html>\
<html lang=\"en\">\
  <head>\
    <meta charset=\"utf-8\">\
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\
    <script src=\"http://code.jquery.com/jquery-1.11.1.min.js\"></script>\
    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7\" crossorigin=\"anonymous\">\
    <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js\" integrity=\"sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS\" crossorigin=\"anonymous\"></script>\
  </head>\
  <body>\
    <div class=\"container\">\
      <div class=\"header\">\
        <h3 class=\"text-muted\">Yesterday</h3>\
      </div>\
    </div>\
  </body>\
</html>"

if __name__ == "__main__":
    app.run(host="127.0.0.1", port=5000)

Cleaner coding

It's better to do the following than to write html in python.

Contents of index.py

$ cat index.py
#!/usr/bin/env python3
# -*- coding: utf-8 -*-

from __future__ import print_function
import time
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == "__main__":
    app.run(host="127.0.0.1", port=5000)

Contents of templates / index.html

$ cat templates/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h3 class="text-muted">Sample Page</h3>
      </div>
    </div>
  </body>
</html>

How to go back and forth between pages

If you create templates / sample / sample.html as below, use Jinja2, and paste the link, it seems to work. (If there are multiple files in the templates folder, it doesn't seem to work?)

$ cat index.py
#!/usr/bin/env python3
# -*- coding: utf-8 -*-

from __future__ import print_function
import time
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    next = u'I'll go to the next page'
    return render_template('/index.html', message=next)

@app.route('/sample/')
def sample():
    return render_template('/sample/sample.html')

if __name__ == "__main__":
    app.run(host="127.0.0.1", port=5000)

Contents of /templates/index.html

$ cat Downloads/work/templates/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container">
      <div class="header">
        {% if message %}
        <h3 class="text-muted"><a href="/sample">{{message}}</a></h3>
        {% endif %}
      </div>
    </div>
  </body>
</html>

Contents of /templates/sample/sample.html

$ cat Downloads/work/templates/sample/sample.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h3 class="text-muted"><a href="/">I'll be back</a></h3>
      </div>
    </div>
  </body>
</html>

About Jinja2

I haven't suppressed the details, so I'm going to get used to it, but it seems that variables and if statements can be used and they will be handled in html. And it seems that the inside of app.route written in python is strict. Jinja2 seems to be considered a folder if it ends with /, and a file if it ends like / sample. As a result, I thought I couldn't access it with / sample, but I had to browse the directory.

Of the html file, the contents of /templates/index.html are displayed as a message using the variables received from python. Furthermore, the link is different from python's app.route and can be accessed with / sample. This description is close to app.route, but loose. It doesn't matter if there is no / at the end. However, it does not directly refer to sample.html.

Conversely, if you want to go back from /templates/sample/sample.html to /templates/index.html, you can go back with just /.

Summary

After all, I'm going to do HTML5. I will do my best…

(˙-˙). oO (Looking like this, it looks like cordova used in iOS multi-platform development ...)

Reference URL

-Flask Honke -Try using the web application framework Flask -If you understand how to use Jinja2, development using Flask will become smarter

Continuation of multi-platform development with Electron and Python