How to Build a Website with HTML and Python

  • Home
  • Blog
  • How to Build a Website with HTML and Python

Sometimes, there is no Python on our computer, but you need to verify the operating effectiveness of Python code. And you want to make a web page, but you only use HTML and Python. So if you want to make a webpage with some complex logic, can you only learn JavaScript? This is not the case. If you don't consider the beauty of the webpage, you can use HTML and Python to implement a simple webpage.

What we want to introduce today is called pyscript. Using it, no software is required. As long as there is a notepad, you can write code in HTML and Python. After writing, double-click the HTML file with a browser, and you can directly see the running results of the Python code.

Suppose I want to write a piece of code now, and use the efficient algorithm to calculate the value of the top 10 items of Fibona. I have written the code and want to verify whether it is correct.

def fib(n):
    if n in [1, 2]:
        return 1
    a = 1
    b = 1
    for _ in range(2, n):
        a, b = b, a + b
    return b

There is no Python on my computer, and I don't know any online Python interpreter. How to do it? At this time, you only need to add some HTML code before and after this Python code and save it as a .html file.

<html>
   <head>
     <link rel="stylesheet" href="https://yourdomain.com/alpha/pyscript.css" />
     <script defer src="https://yourdomain.com/alpha/pyscript.js"></script>
   </head>
   <body>
     <py-script>
def fib(n):
     if n in [1, 2]:
         return 1
     a = 1
     b = 1
     for _ in range(2, n):
         a, b = b, a + b
     return b

for i in range(1, 11):
     print(f'The result of item {i} is: {fib(i)}')
     </py-script>
   </body>
</html>

After saving, double-click this HTML file to open it with a browser to see the results of the operation.

So far, it seems no different from those online Python operating environments. But Pyscript is even more potent than it has some common third-party libraries, such as Numpy or Matplot. It can even install a third-party library manually.

For the Numpy and Matplotlib, it comes with, you can directly use the <py-EnV> tag declaration.

<html>
    <head>
    <link rel="stylesheet" href="https://yourdomain.com/alpha/pyscript.css" />
    <script defer src="https://yourdomain.com/alpha/pyscript.js"></script>
      <py-env>
        - numpy
        - matplotlib
      </py-env>
    </head>

  <body>
    <h1>Let's plot random numbers</h1>
    <div id="plot"></div>
    <py-script output="plot">
import matplotlib.pyplot as plt
import numpy as np

x = np.random.randn(1000)
y = np.random.randn(1000)

fig, ax = plt.subplots()
ax.scatter(x, y)
fig
    </py-script>
  </body>
</html>

If you want to install a third-party library, you need to download the. WHL file corresponding to the library and put it together with the HTML file. Then, use relative path imports in the <py-EnV>. But after my test, the imported REQUESTS were a bit problematic. So I will not introduce much.

In fact, Pyscript is still far worse than Jupyter. But Pyscript can edit the HTML element. In this way, it can replace JavaScript to a certain extent and cooperate with HTML to achieve some complex web pages.


Leave a reply



Submit