Creating HTML links to Plotly graphs: Difference between revisions

From Sensors in Schools
Jump to navigation Jump to search
No edit summary
No edit summary
Line 48: Line 48:


[[File:Screen Shot 2021-12-30 at 8.59.36 pm.png]]
[[File:Screen Shot 2021-12-30 at 8.59.36 pm.png]]
* From the File drop down menu select File > '''Open'''.
* Navigate to the peter-hopper-t3 directory and select '''index.html'''
[[File:Screen Shot 2021-12-30 at 9.07.16 pm.png]]
* Enter the following HTML tags to create a simple HTML document
[[File:Screen Shot 2021-12-30 at 9.08.12 pm.png]]
* 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.
[[File:Screen Shot 2021-12-30 at 9.10.16 pm.png]]
* Add a '''h1''' tag within the '''body''' tags.
* Any text here will appear on your web page.
[[File:Screen Shot 2021-12-30 at 9.11.27 pm.png]]
* Save the file index.html
* Open the '''File Manager''' and navigate to the directory '''peter-hopper-t3'''.
[[File:Screen Shot 2021-12-30 at 9.12.35 pm.png]]

Revision as of 10:13, 30 December 2021

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.

Retrieved from "http://www.waterwaysinwhittlesea.org/index.php?title=Creating_HTML_links_to_Plotly_graphs&oldid=712"