Home Live Mathematics and STEM on the Web ← My First Web Page: Introduction


My First Web Page:
Create Your Own Live Mathematics and STEM Web Pages

W3Schools.com: Taking Your Web Page Skills to the Next Level


Would you like to be able to quickly and easily create interactive mathematics and STEM resources for your students? Live documents that can be freely accessed on any device or any platform with Internet access?

The tutorials in this series offer a quick and easy way to get started creating your own web-based resources, even if you are a complete beginner! Each lesson is designed to take only a few minutes, with the option to explore further if desired.

This first lesson offers a taster of what lies ahead - from the simplest of web pages to adding the power of GeoGebra - graphing, computer algebra, dynamic geometry and interactive statistics - to your own lessons and activities!

Later lessons will add BlueTooth capabilities to these Live web pages, supporting active engagement with key STEM principles and the ability to develop engaging activities for students.

There are many great options for learning to create web pages available online. The main reference I tend to use is W3Schools.com, an amazing learning resource with which you should become familiar. I include a link to this site at the start of each page and encourage you to use this to go beyond the brief introduction provided here.

The pages I offer here offer one significant difference from sites such as W3Schools - the key focus is on the creation of live pages for mathematics and STEM. So the introduction to general web page principles will be brief and by no means complete.


Getting Started


Use the text box that follows to try out your own HTML code and select the DISPLAY button to turn this into a new page - see the effect of your changes immediately, building on the samples provided. The examples provided here move quickly from simple to more complex, but don't worry - the tutorials which follow will guide you at a much more leisurely pace.

To begin, look at the code in the textBox below - this is the HTML (HyperText Markup Language) code for a very simple web page. Press the large DISPLAY button to see this code turned into a web page, then close that page to return to this one, and see how the HTML "tags" turn text into a page layout.

The main thing to notice at this point is that HTML is nearly all about tags - coded instructions between < and > symbols.

You should now notice the overall structure of the page - the sections which lie between <HTML> and </HTML> (note that generally these HTML tags are NOT case-sensitive and the initial DOCTYPE tells the browser how to interpret the page). You will see the page divided into HEAD and BODY - find where these begin and end. The head contains elements that relate to the page as a whole - in this case, just the title which appears in the header bar of many web browsers, and a cryptic meta instruction which helps to ensure that your page appears consistently whether you are on desktop or mobile devices). Generally, the HEAD does not involve those elements which are visible in the page itself.

The BODY is where the visual action of a page happens. In the default example here, this is a (level 2 - H2) heading, and a paragraph (<P> and </P>).

Starting to make sense? Feel free to get in and play around - make some changes... you can't break anything! At worst, you might just need to refresh your browser page to start over!

If you have any questions or would like to share your experience with this utility, please drop me an email!


Back to Top



Lesson 2: Try some more interesting Text

Back to Top


Lesson 3: Add Beautiful Mathematics to your Page

Back to Top


Lesson 4: Try an Interactive Page

Back to Top


Lesson 5: Add Live Mathematics with GeoGebra

Back to Top


Lesson 6: Add Live Assessment with GeoGebra

Back to Top


Lesson 7: Add a QR Code Maker, Heart Rate Monitor or Piano Keyboard (and more!)

Back to Top


Lesson 8: Add Live STEM Device Sensors

Back to Top


Lesson 9: Add Live STEM GPS

Back to Top


Lesson 10: Add BLE support (TI SensorTag)

Back to Top


Lesson 11: Add BLE support (TI BLE LaunchPad)

Back to Top


Lesson 12: Introduction to HTML Graphics: Canvas

Back to Top


Web Hosting: Getting Your New Web Pages to the World


Once you have learned to create new and exciting interactive web pages, you will need others to be able to view and use these. This involves some sort of web page hosting. Generally, this costs money and, if you get serious about this, it will probably be worth your while to do this.

While you are learning, though, it makes sense to be able to test your web pages without cost, and a couple of simple options involving Google drive and DropBox are outlined here.

Eventually, if you go as far as the Web BlueTooth lessons, you will need a secure web site (https instead of http) and may need to explore this further.


Back to Top


Home Live Mathematics and STEM on the Web My First Web Page: Introduction