Creating HTML links to Plotly graphs - Revision history

EdmondLascaris: /* Creating simple HTML files using the nano in the Terminal */

2021-12-30T19:30:48Z

Creating simple HTML files using the nano in the Terminal

← Older revision		Revision as of 19:30, 30 December 2021
Line 146:		Line 146:
	* Now return to your Web Browser and Refresh your index.html page.		* Now return to your Web Browser and Refresh your index.html page.
	* It should look similar to the example below.		* It should look similar to the example below.

			[[File:Screen Shot 2021-12-31 at 6.20.11 am.png]]

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

			[[File:Screen Shot 2021-12-31 at 6.21.12 am.png]]

			== 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'''

			[[File:Screen Shot 2021-12-31 at 6.23.10 am.png]]

			* 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'''

			[[File:Screen Shot 2021-12-31 at 6.27.35 am.png]]

			* 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.

			[[File:Screen Shot 2021-12-31 at 6.29.10 am.png]]

			* 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.

			[[File:Screen Shot 2021-12-31 at 6.30.09 am.png]]

EdmondLascaris at 19:16, 30 December 2021

2021-12-30T19:16:56Z

← Older revision		Revision as of 19:16, 30 December 2021
Line 110:		Line 110:

	[[File:Screen Shot 2021-12-30 at 11.22.53 pm.png]]		[[File:Screen Shot 2021-12-30 at 11.22.53 pm.png]]

			* 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.

			[[File:Screen Shot 2021-12-31 at 6.05.45 am.png]]

			* Enter the following HTML text in the nano editor.

			[[File:Screen Shot 2021-12-31 at 6.06.34 am.png]]

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

			[[File:Screen Shot 2021-12-31 at 6.07.31 am.png]]

			* Enter '''Y''' to save changes.

			[[File:Screen Shot 2021-12-31 at 6.08.32 am.png]]

			* Press the '''Enter''' key to accept the temperature.html file name.

			[[File:Screen Shot 2021-12-31 at 6.13.59 am.png]]

			* 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.

			[[File:Screen Shot 2021-12-31 at 6.15.20 am.png]]

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

			[[File:Screen Shot 2021-12-31 at 6.16.28 am.png]]

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

EdmondLascaris at 12:25, 30 December 2021

2021-12-30T12:25:28Z

← Older revision		Revision as of 12:25, 30 December 2021
Line 72:		Line 72:

	[[File:Screen Shot 2021-12-30 at 9.12.35 pm.png]]		[[File:Screen Shot 2021-12-30 at 9.12.35 pm.png]]

			* 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.

			[[File:Screen Shot 2021-12-30 at 11.12.18 pm.png]]

			=== Adding p and a tags to index.html ===
			* Add some additional text as a '''p''' paragraph with the body tags.

			[[File:Screen Shot 2021-12-30 at 11.13.55 pm.png]]

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

			[[File:Screen Shot 2021-12-30 at 11.15.20 pm.png]]

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

			[[File:Screen Shot 2021-12-30 at 11.19.09 pm.png]]

			* 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.

			[[File:Screen Shot 2021-12-30 at 11.20.40 pm.png]]

			* 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.

			[[File:Screen Shot 2021-12-30 at 11.21.31 pm.png]]

			=== 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'''

			[[File:Screen Shot 2021-12-30 at 11.22.53 pm.png]]

EdmondLascaris at 10:13, 30 December 2021

2021-12-30T10:13:06Z

← Older revision		Revision as of 10:13, 30 December 2021
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]]

EdmondLascaris at 09:59, 30 December 2021

2021-12-30T09:59:47Z

← Older revision		Revision as of 09:59, 30 December 2021
Line 28:		Line 28:

	[[File:Screen Shot 2021-12-30 at 7.11.22 pm.png]]		[[File:Screen Shot 2021-12-30 at 7.11.22 pm.png]]

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

			[[File:Screen Shot 2021-12-30 at 8.55.29 pm.png]]

			=== Create the HTML file index.html using the Terminal ===
			* Create an empty file named index.html by entering the command '''touch index.html'''

			[[File:Screen Shot 2021-12-30 at 8.56.45 pm.png]]

			* 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.

			[[File:Screen Shot 2021-12-30 at 8.58.18 pm.png]]

			=== Add content to the HTML file index.html using Geany ===
			* Open up '''Geany''' from the main Raspberry Pi > Programming menu

			[[File:Screen Shot 2021-12-30 at 8.59.36 pm.png]]

EdmondLascaris at 08:11, 30 December 2021

2021-12-30T08:11:56Z

@@ Line 4: / Line 4: @@
 * 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

EdmondLascaris: /* Overview */

2021-12-30T08:02:50Z

Overview

← Older revision		Revision as of 08:02, 30 December 2021
Line 1:		Line 1:
	== Overview ==		== Overview ==
	* In this lesson series we will learn how to create a Dashboard so that we can monitor the water quality of a local lake – Peter Hopper lake in Mill Park.		* 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.		* An example of a Dashboard is included below.
	* It includes data on dissolved oxygen, pH and water temperature.		* It includes data on dissolved oxygen, pH and water temperature.

EdmondLascaris: /* Overview */

2021-12-30T08:01:23Z

Overview

← Older revision		Revision as of 08:01, 30 December 2021
Line 1:		Line 1:
	== Overview ==		== Overview ==
	In this lesson series we will learn how to create a Dashboard so that we can monitor the water quality of a local lake – Peter Hopper lake in Mill Park.		* In this lesson series we will learn how to create a Dashboard 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.		* An example of a Dashboard is included below.
	* It includes data on dissolved oxygen, pH and water temperature.		* It includes data on dissolved oxygen, pH and water temperature.

EdmondLascaris: Created page with "== Overview == In this lesson series we will learn how to create a Dashboard 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"

2021-12-30T08:01:12Z

Created page with "== Overview == In this lesson series we will learn how to create a Dashboard 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"

New page

== Overview ==
In this lesson series we will learn how to create a Dashboard 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