Embedded Files
Topics covered
Keep webserver running
Changing the style of a web page
Static and Dynamic web pages
Download an image
Creating a Brython script
Displaying the end result
Keep webserver running
In lesson 1 we created a Python webserver and ran it so that we could browse our web pages. If you don't have the webserver running now then please start it or refer back to lesson 1 to see how it is done.
Changing the style of a web page
At the end of lesson 1 you may have tried to change the size of the heading by altering the <H4> tag.
The simple 'index.html' page just had a body but no header.
We are going to add a header and add a sub-section using the <STYLE> tags.
Inside the <STYLE> tags we are going to use CSS (Cascading Style Sheet) tags to change the way our page looks.
If you are using the IDLE editor to run your Python webserver, use a different editor, say 'Sublime text', to edit your existing 'index.html' page and replace the contents with the following:
<!DOCTYPE html> <html> <head> <style> body { font-family: arial; color: white; background-color: green; } </style> </head> <body> <h4>My Web Page - version 2</h4> </body> </html>
Notice the header section is completely enclosed by <HEAD> and </HEAD> tags, and the style sub-section is also enclosed in <STYLE> and </STYLE> tags.
The CSS 'body' tag controls everything in the body section of our page. Its directives are contained inside the open and close curly-brackets '{}'.
The 'font-family' directive changes the font to 'Arial', the 'color' directive changes the foreground colour of the characters being displayed, in our case the characters in our <H4> heading tag, and finally the 'background-color' directive changes the backgound colour of the whole web page.
You can learn much more about CSS at this site: https://www.w3schools.com/css
If you have not already done so, you can browse your changed page by pointing your browser to the IP address given by running the Python webserver - refer back to lesson 1.
You should see a something like this:
My Web Page - version 2
Static and Dynamic web pages
Although we have changed the style of our web page, it will remain the same each time we browse it, until we make another change. This kind of web page is known as a Static web page.
Dynamic web pages can change automatically or under the control of the user.
These changes are usually made by code written in the Javascript language although there are several other languages available.
We are going to use Python, or more specifically Brython which is a special variant designed for web pages.
In the next example we are going to add a button to our page and use Brython to display an image below it.
Replace the code in 'index.html' file with the following and save it.
<!DOCTYPE html> <html> <head> <!-- publicly available Brython code --> <script type='text/javascript' src='https://www.brython.info/src/brython.js'> </script> <!-- our own python code --> <script type='text/python' src='cardGame.py'></script> <style> body { font-family: arial; color: white; background-color: green; } img { height: 120px; } </style> </head> <body onload='brython(1)'> <!-- this launches the code in cardGame,py --> <h4>My Web Page - version 3</h4> <button id='myButton'>Click Me</button> <div id='playingArea'></div> </body> </html>
In the header section we have added links to two scripts.
The first, 'brython.js', is the publicly available Brython library written in Javascript.
The second, 'cardGame.py', is a Brython script that we are going to write, next.
We have also added some more CSS in the style section to control the size of images to a height of 120 pixels.
In the body section, we have added a button, identified as 'myButton' and a <DIV> tag, identified as 'playingArea' which will be the area where an image will be displayed by our code.
Download an image
We need to download a sample image to be displayed when a user clicks the button marked 'Click Me'.
First create a sub-folder named 'deck' in your 'brython' folder where you have your 'index.html' file.
Then right-click the image of the image below, and select 'save image as' and save it as 'back.png' in the 'deck' sub-folder.
Creating a Brython script
In the same folder as 'index.html' create a new file in your editor and save it as 'cardGame.py'.
Then copy'n'paste the following code into it, and save it again.
# cardGame.py # Import the required Bython modules from browser import document, html # This function is executed when the user clicks the button def placeCard(event): card = 'back.png' document["playingArea"] <= html.IMG(src='deck\\' + card, ) # This code is executed first because of the # <body onload='brython(1)'> in 'index.html' document["myButton"].bind("click", placeCard)
This Brython code is basically Python, with a few extra items.
Notice that when your browser opens the page, the <body onload='brython(1)'> tag in 'index.html' causes execution of your 'cardGame.py' script.
The document["myButton"].bind("click", placeCard) statement binds the 'click' event of the button with the id of 'myButton' to a function called 'placeCard'.
Finally, when the button is clicked, the 'placeCard' function adds an image tag, <img src='deck\back.png'>
which points to the image we downloaded, into the area on the web page marked with the id of 'playingArea'.
Displaying the end result
Now, if you have followed everything so far, it is time to test it.
If your browser is still showing My Web Page - version 2 , refresh it (or press F5) and you should now see something like this:
Then, if you click the button marked 'Click Me', it should dynamically change the page to something like this:
This may seem like a lot of steps to produce this, but you now have a framework to build a more complex page, and in the next lesson we will begin to make a game.
Page updated
Google Sites
Report abuse