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 PagesW3Schools.com: Taking Your Web Page Skills to the Next Level
- Introduction: A Sampler
- Lesson 2: Styles and Layout
- Lesson 3: Adding Beautiful Mathematics to your web page
- Lesson 4: Interacting with your web page
- Lesson 5(a): Adding a GeoGebra Applet
- Lesson 5(b): Adding a GXWeb Applet
- Lesson 6(a): Creating a GeoGebra Assessment Task
- Lesson 6(b): Creating a GXWeb Assessment Task
- Lesson 7: Interacting with Third Party Apps
- Lesson 8: JavaScript, STEM and Internal Device Sensors
- Lesson 9: JavaScript, STEM and GPS
- Lesson 10: Adding Web Bluetooth Support (1): Talking to your SensorTag
- Lesson 11: Adding Web Bluetooth Support (2): Talking to your LaunchPad
- Lesson 12: Introduction to HTML Graphics: Canvas
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!
Lesson 2: Try some more interesting Text
Lesson 3: Add Beautiful Mathematics to your Page
Lesson 4: Try an Interactive Page
Lesson 5: Add Live Mathematics with GeoGebra
Lesson 6: Add Live Assessment with GeoGebra
Lesson 7: Add a QR Code Maker, Heart Rate Monitor or Piano Keyboard (and more!)
Lesson 8: Add Live STEM Device Sensors
Lesson 9: Add Live STEM GPS
Lesson 10: Add BLE support (TI SensorTag)
Lesson 11: Add BLE support (TI BLE LaunchPad)
Lesson 12: Introduction to HTML Graphics: Canvas
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.
Home ← Live Mathematics and STEM on the Web ← My First Web Page: Introduction