Topics covered
Hosting web pages
Setting up a webserver
Creating your first web page
Run the webserver
Viewing the page in a browser
Hosting web pages
We are going to create some web pages using HTML. To display them we need to use a browser.
There are many available on most platforms, like Google Chrome, or Mozilla Firefox or Safari.
But before we can browse them we need a webserver to host the HTML files we are going to create.
You can eventually buy these services from various hosting companies but we can begin by hosting them ourselves using Python.
I am going to describe how to do this on Windows but it should work very similarly on a Mac or Linux platform.
Setting up a webserver
I suggest that you use the Python IDLE editor for this task. So begin by creating a new folder, called 'brython' then create an empty file in IDLE using File/New, then copy'n'pasting the code below, and save the file as pythonWebserver.py
# pythonWebserver.py import http.server import socketserver import subprocess def getWindowsIP(): responseBytes = subprocess.check_output(['ipconfig']) responseArray = responseBytes.decode().split('\n') ethernet = False for line in responseArray: line = line.strip() if len(line) > 0: print(line) if 'Ethernet adapter' in line: ethernet = True if 'VirtualBox' in line: ethernet = False if 'IPv4' in line and ethernet == True: parts = line.split(':') return parts[1].strip() print("******* Could not find your local IP Address") return 'Unknown' ipAddress = getWindowsIP() PORT = 8081 print('Browse: ' + ipAddress + ':' + str(PORT)) Handler = http.server.SimpleHTTPRequestHandler with socketserver.TCPServer(("", PORT), Handler) as httpd: httpd.serve_forever()
Although it is tempting to run this, it will not serve any purpose since we have no pages for the webserver to serve.
Creating your first web page
I suggest you open up an alternative editor, like sublime text for all the remaining files we are going to create, however, if you do not have an alternate editor, it is possible to use IDLE.
Create a new file, in your editor and copy'n'paste the following HTML code and save it as 'index.html' in the same folder as 'pythonWebserver.py'
<!DOCTYPE html> <html> <body> <h4>My Web Page - version 1</h4> </body> </html>
If you have not seen HTML syntax before, the things inside '<' and '>' are called tags.
Most web pages consist of sections, called header and body.
The body section contains tags which will contain the data and images we normally see in a browser.
The header section usually contains tags which may inform the webserver and/or control how the data is displayed.
This simple page only has a body section.
Run the webserver
To display the 'index.html' page we just created, we must first run the 'pythonWebserver.py' - use IDLE to open this file and press F5 to run it. It should display something like this:
===== RESTART: Y:\Source\HTML\Brython\GetTheCodingBug\pythonWebserver.py ===== Windows IP Configuration Ethernet adapter Ethernet: Connection-specific DNS Suffix . : Link-local IPv6 Address . . . . . : xxxx::xxxx:xxxx:xxxx:xxxxxx IPv4 Address. . . . . . . . . . . : 192.168.0.11 Browse: 192.168.0.11:8081
Viewing the page in a browser
Now open you browser, Chrome, Firefox or Edge and enter 192.168.0.11:8081 in your browser's address bar.
Your IP address will be something different, but the last part should always be :8081
You should see a something like this:
My Web Page - version 1
We need to keep the Python webserver running at all times, although we can stop and restart our browser at any time.
In the 'index.html' file, the H4 tag displays a heading of size 4.
There are other sizes ranging from 1 to 6, H1 being the largest and H6 being the smallest. Try changing both H4 tags - remember to change both the opening tag '<H4>' and the closing tag '</H4>' in 'index.html', saving it, then refresh your browser and see how it changes.
On the next lessons we will see how to do more with our HTML page and later how to use Python to control the actions on a page.