Compass Learning Technologies

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

# My First Web Page: Getting Started Creating Your Own Mathematics and STEM Web Pages

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!

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). 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 - but NOT things 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!

My name:

Send to Email: