Creating HTML links to Plotly graphs

Overview

• In this lesson series we will learn how to create an HTML page with links to data graphs produced using Plotly.
• This will create a simpel Dashboard for us to use so that we can monitor the water quality of a local lake – Peter Hopper lake in Mill Park.
• An example of a Dashboard is included below.
• It includes data on dissolved oxygen, pH and water temperature.

Learning Objectives

• Revision for how to create a HTML web page
• Revision on how to create and link Cascading Style Sheets (CSS) to your HTML document

Create a simple HTML page

• In a previous lesson we already created a simple HTML web page.
• We will repeat many of the steps as a simple revision exercise.

Create a directory named peter-hopper-t3

• Open the Terminal from the top left of the menu bar on the Raspberry Pi.
• Enter the command ls to list all directory contents.

• Enter the command mkdir peter-hopper-t3 to create a new directory named peter-hopper-t3

• Check that the new directory peter-hopper-t3 has been created by listing entering the command ls

• Finally, enter the directory with the command cd peter-hopper-t3

Create the HTML file index.html using the Terminal

• Create an empty file named index.html by entering the command touch index.html

• To verify that the file has been created enter ls
• To see how big the file is enter the command ls -l
• It shows that our file index.html contains zero bytes of data.

Add content to the HTML file index.html using Geany

• Open up Geany from the main Raspberry Pi > Programming menu

• From the File drop down menu select File > Open.
• Navigate to the peter-hopper-t3 directory and select index.html

• Enter the following HTML tags to create a simple HTML document

• Enter a title tag for the document within the head tags.
• The text within the title tags will appear on the web page tab when the HTML file is opened within the Browser.

• Add a h1 tag within the body tags.
• Any text here will appear on your web page.

• Save the file index.html
• Open the File Manager and navigate to the directory peter-hopper-t3.

• Double click on the file index.html.
• The file will then open in the default web browser.
• You should see the h1 text displayed as follows on your computer.

Adding p and a tags to index.html

• Add some additional text as a p paragraph with the body tags.

• Add an a anchor tag with a link to a file named temperature.html
• We will create the temperature.html file soon.

• Add some more <a> anchor tags for Dissolved Oxygen and pH.

• Once you have completed these changes save your file.
• Go to your Browser and click on the Reload this Page button.
• You should see the following changes.

• You can test the links by click on them, however you will see an error message.
• This is because the file does not exist.
• To fix the error we just need to create a simple HTML file.

Creating simple HTML files using the nano in the Terminal

• Open the Terminal window and navigate to the directory /home/pi/peter-hopper-t3
• The only file present should be index.html

• To create a file and immediately add content enter the command nano temperature.html
• This will create a file named temperture.html and open the nano Terminal editor.

• Enter the following HTML text in the nano editor.

• Once you have entered the code you can exit Nano.
• Enter CTRL-X to exit.

• Enter Y to save changes.

• Press the Enter key to accept the temperature.html file name.

• You can check to see if the temperature.html file has been created by entering the ls command.
• To view the file size enter ls -l
• The file size of temperaure.html is 52 bytes.
• A byte can hold the equivalent of one character.

• Using the example above as a guide, create equivalent files for oxygen.html and ph.html

• Now return to your Web Browser and Refresh your index.html page.
• It should look similar to the example below.

• Now if you click on one of the HTML links (Hyperlinks) some text should appear.

Adding a cascading style sheet (CSS)

• Now that we have create some simple HTML pages and Hyperlinks its a good idea to add some interesting styles to our web site.
• In this example we will create a style sheet in a separate file named mystyles.css

Creating a style sheet in a separate file

• Navigate back to Geany.
• From the top menu bar, click on the 'Create a new file button.
• Navigate to the peter-hopper-t3 directory and create a new file named mystyles.css

• Enter the following code in mystyles.css
• In this example we are adding styles for the background colour of the web page and text colour.
• Save your changes.
• To explore other interesting styles just Google W3Schools CSS styles

• Now add some extra lines of code to the index.html file.
• The additional code in the link tag tells the Browser where to find the style sheet mystyles.css
• The div id=”maindiv” tells the Browser where in the HTML document to apply specific styles.
• Don’t forget the closing div tag.
• Save your changes.

• Return to the index.html file in your Browser and Refresh your page.
• You should see all your new styles take effect. Congratulations!
• Don’t forget to explore W3Schools.