<html> <head> <title>My First Web Page: Introduction</title> <link href="https://compasstech.com.au/master.css" rel="stylesheet" type="text/css" media="all" charset="utf-8" /> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-873325-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <script type="text/css"> blockquote { border-left:none; } </script> </head> <body onload='document.getElementById("textBox").value = headText + bodyText1 + endText;'> <a name="top"></a> <div id="HeaderBar"> <P><strong><a href="https://compasstech.com.au/index.html">Home</a> &larr;<a href="https://compasstech.com.au/live/index.html"> Live Mathematics and STEM on the Web </a>&larr; My First Web Page: Introduction</font></strong></P> </div> <blockquote> &nbsp;&nbsp; <H1><font color="red">My First Web Page: <BR>Create Your Own Live Mathematics and STEM Web Pages</font></H1> <blockquote> <P><font size=-1><a href="https://w3schools.com" target="top">W3Schools.com: Taking Your Web Page Skills to the Next Level</a></font></P> &nbsp;&nbsp; <blockquote><blockquote><blockquote><blockquote> <font color="green"> <UL> <P><LI>Introduction: A Sampler</LI></P> <P><LI><a href="index2.html" target="top">Lesson 2: Styles and Layout</a></LI></P> <P><LI><a href="index3.html" target="top">Lesson 3: Interacting with your web page</a></LI></P> <P><LI><a href="index4.html" target="top">Lesson 4: Adding a GeoGebra Applet</a></LI></P> <P><LI>Lesson 5: Adding Web Bluetooth Support: Talking to your SensorTag </LI></P> <P><LI>Lesson 6: Adding Web Bluetooth Support (2): Talking to your LaunchPad </LI></P> </UL> </font> </blockquote></blockquote> </blockquote></blockquote> &nbsp;&nbsp; <HR width=50%></HR> &nbsp;&nbsp; <font color="blue" size=+1> <P><i>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?</i></P> <P>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 <b>taster</b> 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!</P> <P>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.</P> <P>There are many great options for learning to create web pages available online. The main reference I tend to use is <a href="https://w3schools.com" target="top">W3Schools.com</a>, 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.</P> <P>The pages I offer here offer one significant difference from sites such as W3Schools - the key focus is on the creation of <b>live pages for mathematics and STEM</b>. So the introduction to general web page principles will be brief and by no means complete.</P> </blockquote> &nbsp;&nbsp; <H3><font color="red">Getting Started</font></H3> &nbsp;&nbsp; <blockquote> <P>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.</P> <P>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 "<b>tags</b>" turn text into a page layout.</P> <P>The main thing to notice at this point is that HTML is nearly all about <b>tags</b> - coded instructions between <b>&lt;</b> and <b>&gt;</b> symbols. </P> <P>You should now notice the overall structure of the page - the sections which lie between <b>&lt;HTML&gt;</b> and <b>&lt;/HTML&gt;</b> (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 <b>title</b> which appears in the header bar of many web browsers, and a cryptic <b>meta</b> 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.</P> <P>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 (<b>&lt;P&gt;</b> and <b>&lt;/P&gt;</b>).</P> <P><i>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!</i></P> &nbsp;&nbsp; <P><font size=-1><i><a href="#top">Back to Top</a></i></font></P> &nbsp;&nbsp; </blockquote> <script type="text/javascript"> var headText = '<HTML>\n' + '<HEAD>\n' + '<TITLE>My First Web Page: Lesson 1</TITLE>\n' + '<meta name="viewport" content="width=device-width, initial-scale=1">\n' + '</HEAD>\n'; var bodyText1 = '<BODY>\n' + '<BLOCKQUOTE>\n' + '\t<H2>This is a level 2 heading</H2>\n\n' + '\t\t<BLOCKQUOTE>\n' + '\t\t\t<P>This is a paragraph.</P> \n\n' + '</BLOCKQUOTE></BLOCKQUOTE>\n'; var endText = '</BODY>\n' + '</HTML>'; function setText1() { document.getElementById("textBox").value = headText + bodyText1 + endText; } var bodyText2 = '<BODY>\n' + '<BLOCKQUOTE>\n' + '\t<H1>This is a level 1 heading (why not try out 2 - 4?)</H1>\n\n' + '\t\t<BLOCKQUOTE>\n' + '\t\t\t<P>This is a paragraph.</P> \n\n' + '\t\t\t<P>Text can be <b>bold</b> or <i>italic</i>.</P> \n\n' + '\t\t\t<P><font color="red" size=+1>You can even add colour</font> and <font color="blue" size=+3>adjust size.</font></P> \n\n' + '</BLOCKQUOTE></BLOCKQUOTE>\n'; function setText2() { document.getElementById("textBox").value = headText + bodyText2 + endText; } var bodyTextGGB = '<BODY>\n' + '<BLOCKQUOTE>\n' + '<H2>My First GeoGebra Web Page</H2>\n\n' + '&nbsp;&nbsp;\n' + '<HR></HR>\n' + '&nbsp;&nbsp;\n' + '<script src="https://cdn.geogebra.org/apps/deployggb.js"><\/script>\n' + '<center><div id="ggb-element"></div></center> \n\n' + '<script> \n' + 'var ggbApp = new GGBApplet({"appName": "graphing", "width": 900, "height": 700, "showToolBar": true, "showAlgebraInput": true, "showMenuBar": true, "material_id":"rsen6vj7" }, true);\n\n' + 'window.addEventListener("load", function() { \n' + 'ggbApp.inject("ggb-element");\n' + '});\n\n' + 'function setFunction(objName) {\n' + '\tvar applet = document.ggbApplet;\n' + '\tvar myVar1 = document.getElementById("myVar").value;\n' + '\tapplet.evalCommand(myVar1);\n' + '}\n\n' + 'function reset() {\n' + '\tvar applet = document.ggbApplet;\n' + '\tdocument.getElementById("input").value = "n";\n' + '\tapplet.setValue("frequency",220);\n' + '}\n' + '<\/script>\n' + '&nbsp; \n' + '<blockquote>\n' + '<center>\n' + '<P> <button onclick="setFunction();" style="font-size : 24px; width: 20%; height: 48px;">Input</button> <input ID="myVar" style="font-size : 30px;" size="20" value = "?" type="text"> \n\n' + '<button onclick="reset();" style="font-size : 24px; width: 20%; height: 48px;">RESET</button>\n' + '</blockquote>\n' + '</BLOCKQUOTE>\n'; function setTextGGB() { document.getElementById("textBox").value = headText + bodyTextGGB + endText;; } var bodyTextBday = '<BODY>\n' + '<BLOCKQUOTE>\n' + '<H2>My First Interactive Web Page</H2>\n\n' + '&nbsp;&nbsp;\n\n' + '<blockquote>\n' + '<i>\n' + '<P><font color="green" size=+2>Monday\'s child is fair of face,</P>\n' + '<P>Tuesday\'s child is full of grace,</P>\n' + '<P>Wednesday\'s child is full of woe,</P>\n' + '<P>Thursday\'s child has far to go,</P>\n' + '<P>Friday\'s child is kind and giving,</P>\n' + '<P>Saturday\'s child works hard for a living,</P>\n' + '<P>And the child who is born on the Sabbath day,</P>\n' + '<P>Is fair, and wise, and good, and gay.</P>\n' + '<center>\n' + '<P><button onclick="birthday();" style="font-size : 24px; width: 100%; height: 48px;">Which are you?</button></P>\n' + '</center>\n' + '</blockquote>\n' + '<HR></HR>\n' + '&nbsp;&nbsp;\n' + '<script>\n\n' + 'function birthday() {\n' + '\tday = prompt("On what day of the month were you born?","");\n' + '\tmonth = prompt("In what month?","");\n' + '\tyear = prompt("and in what year?","");\n\n' + 'if(year<100){\n' + '\tyear = eval(parseInt(year) + 1900)}\n' + 'o = parseInt(month)\n' + 't = parseInt(year)\n\n' + 'if(month<3){\n' + '\tmonth = eval(parseInt(month) + 12)\n' + '\tyear = eval(parseInt(year) - 1)\n' + '}\n\n' + 'u = Math.floor((3*(parseInt(month) +1)/5))\n' + 'q = parseInt(2) + parseInt(day) + 2*parseInt(month)\n' + 'r = eval(parseInt(year) + parseInt(year/4))\n' + 's = eval(parseInt(year/100) - parseInt(year/400))\n' + 'var w = eval(parseInt(u) + parseInt(q) + parseInt(r) - parseInt(s))\n' + 'w %= 7\n' + 'var dayList = ["Saturday","Sunday","Monday","Tuesday","Wednesday","Thursday","Friday"];\n' + 'alert(day + "/" + o + "/" + t + " falls on a " + dayList[w]);' + '}\n\n' + '<\/script>'; function setTextBday() { document.getElementById("textBox").value = headText + bodyTextBday + endText;; } var headTextST = '<HTML>\n' + '<HEAD>\n' + '<title>TI SensorTag Controls</title>\n' + '<link href="https://compasstech.com.au/master.css" rel="stylesheet" type="text/css" media="all" charset="utf-8" />\n' + '<meta name="viewport" content="width=device-width, initial-scale=1">\n' + '<script src="https://code.jquery.com/jquery-2.2.4.min.js"><\/script>\n' + '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">\n' + '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">\n' + '<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"><\/script>\n' + '<script src="https://compasstech.com.au/webble/CC2650SensorTag.js"><\/script>\n' + '<link href="https://compasstech.com.au/webble/style.css" rel="stylesheet">\n' + '<script src="https://compasstech.com.au/webble/monitor.js"><\/script>\n' + '</HEAD>\n'; var bodyTextST = '<BODY>\n' + '<BLOCKQUOTE>\n' + '<nav class="navbar navbar-inverse navbar-fixed-top">\n' + '<div class="container">\n' + '<div class="navbar-header">\n' + '<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">\n' + '<span class="sr-only">Toggle navigation</span>\n' + '<span class="icon-bar"></span>\n' + '<span class="icon-bar"></span>\n' + '<span class="icon-bar"></span>\n' + '</button>\n' + '&nbsp;\n' + '<P> <font color="white" size=-1><a href="https://compasstech.com.au">Home</a> &larr;<a href="https://compasstech.com.au/live/index.html"> Live Mathematics and STEM on the Web </a>&larr;<a href="https://compasstech.com.au/stem/index.html"> TI-Nspire STEM HQ </a>&larr; <b>TI SensorTag Controls </b></font></P>\n' + '</div>\n' + '<div id="navbar" class="navbar-collapse collapse">\n' + '<form class="navbar-form navbar-right">\n' + '<P><button type="button" class="btn btn-default btn-sm connect">Connect<BR>SensorTag</button></P>\n' + '&nbsp;&nbsp;\n' + '</form>\n' + '</div>\n' + '</div>\n' + '</nav>\n' + '&nbsp;&nbsp;\n' + '<HR></HR>\n' + '&nbsp;&nbsp;\n' + '<script src="https://cdn.geogebra.org/apps/deployggb.js"><\/script>\n' + '<center><div id="ggb-element"></div></center> \n\n' + '<script> \n' + 'var ggbApp = new GGBApplet({"appName": "graphing", "width": 900, "height": 700, "showToolBar": true, "showAlgebraInput": true, "showMenuBar": true, "material_id":"qdee2thm" }, true);\n\n' + 'window.addEventListener("load", function() { \n' + 'ggbApp.inject("ggb-element");\n' + '});\n\n' + 'function setFunction(objName) {\n' + '\tvar applet = document.ggbApplet;\n' + '\tvar myVar1 = document.getElementById("myVar").value;\n' + '\tapplet.evalCommand(myVar1);\n' + '}\n\n' + 'function reset() {\n' + '\tvar applet = document.ggbApplet;\n' + '\tdocument.getElementById("input").value = "n";\n' + '\tapplet.setValue("frequency",220);\n' + '}\n' + '<\/script>\n' + '&nbsp; \n' + '<blockquote>\n' + '<center>\n' + '<P> <button onclick="setFunction();" style="font-size : 24px; width: 20%; height: 48px;">Input</button> <input ID="myVar" style="font-size : 30px;" size="20" value = "?" type="text"> \n\n' + '<button onclick="reset();" style="font-size : 24px; width: 20%; height: 48px;">RESET</button>\n' + '</blockquote>\n' + '</BLOCKQUOTE>\n'; var endTextST = '<HR></HR>\n' + '<p><font size=-1>Copyright &copy; 2016, <a href="https://github.com/futomi" target="top">Futomi Hatano</a>, All rights reserved. Code licensed MIT</font></p>\n' + '<div class="modal fade" tabindex="-1" role="dialog" id="message-modal">\n' + '<div class="modal-dialog" role="document">\n' + '<div class="modal-content">\n' + '<div class="modal-header">\n' + '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>\n' + '<h4 class="modal-title"></h4>\n' + '</div>\n' + '<div class="modal-body">\n' + '<p class="modal-message"></p>\n' + '</div>\n' + '<div class="modal-footer">\n' + '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>\n' + '</div>\n' + '</div>\n' + '</div>\n' + '</div>\n' + '<div class="modal fade" tabindex="-1" role="dialog" id="connecting-modal" data-backdrop="static">\n' + '<div class="modal-dialog" role="document">\n' + '<div class="modal-content">\n' + '<div class="modal-header">\n' + '<h4 class="modal-title">Connecting...</h4>\n' + '</div>\n' + '<div class="modal-body">\n' + '<p class="modal-message"></p>\n' + '</div>\n' + '</div>\n' + '</div>\n' + '</div>\n' + '</BODY>\n' + '</HTML>'; function setTextST() { document.getElementById("textBox").value = headTextST + bodyTextST + endTextST; } function MakePage(objName) { contents = document.getElementById("textBox").value + '\n<FONT COLOR="RED">' + '<A HREF="javascript:window.close()">' + 'Back to ' + '<I>' + 'My First Web Page: Introduction</i></FONT></A>' + '<P><HR width=50%></P>'; Opts = "toolbar=0,location=0,directories=0,status=1,menubar=1," + "scrollbars=1,resizable=1,width=1000,height=1000"; PopUp = window.open("", "", Opts); PopUp.document.write(contents) PopUp.document.close() } </script> <center> <P><button onclick="MakePage('T');" style="font-size : 24px; width: 100%; height: 80px;">Display My Web Page</button></P> <P><textarea ID="textBox" rows="20" cols="80" value="" style="font-size : 20px;"></textarea></P> <P> <button onclick="setText1();" style="font-size : 24px; width: 100%; height: 80px;">RESET Default Page</button></P> </center> &nbsp; <HR width=50%></HR> &nbsp; <P><font size=-1><i><a href="#top">Back to Top</a></i></font></P> <H2><font color="red" size=+1>Try some more interesting Text</font></H2> &nbsp;&nbsp; <TABLE> <TR><TD> <P> <button onclick="setText2();" style="font-size : 24px; width: 400px; height: 80px;">Set Code</button></P> <P><button onclick="MakePage('T');" style="font-size : 24px; width: 400px; height: 80px;">Create This Page</button></P> </TD><TD> <blockquote> <P><font color="blue" size=+1><i>See how is easy it is to add style and colour to your web page.</i></font></P> &nbsp;&nbsp; </blockquote> </TD></TR> </TABLE> &nbsp; <HR width=50%></HR> &nbsp; <H2><font color="red" size=+1>Try an Interactive Page</font></H2> &nbsp;&nbsp; <TABLE> <TR><TD> <P> <button onclick="setTextBday();" style="font-size : 24px; width: 400px; height: 80px;">Set Code</button></P> <P><button onclick="MakePage('T');" style="font-size : 24px; width: 400px; height: 80px;">Create This Page</button></P> </TD><TD> <blockquote> <P><font color="blue" size=+1><i>Time to add some mathematics to our web page!</i></font></P> &nbsp;&nbsp; </blockquote> </TD></TR> </TABLE> &nbsp; <HR width=50%></HR> &nbsp; <H2><font color="red" size=+1>Add Live Mathematics through GeoGebra</font></H2> &nbsp;&nbsp; <TABLE> <TR><TD> <P> <button onclick="setTextGGB();" style="font-size : 24px; width: 400px; height: 80px;">Set Code</button></P> <P><button onclick="MakePage('T');" style="font-size : 24px; width: 400px; height: 80px;">Create This Page</button></P> </TD><TD> <blockquote> <P><font color="blue" size=+1><i>Adding the powerful capabilities of GeoGebra is surprisingly easy.</i></font></P> &nbsp;&nbsp; </blockquote> </TD></TR> </TABLE> &nbsp; <HR width=50%></HR> &nbsp; <H2><font color="red" size=+1>Add BLE support (TI SensorTag)</font></H2> &nbsp;&nbsp; <TABLE> <TR><TD> <P> <button onclick="setTextST();" style="font-size : 24px; width: 400px; height: 80px;">Set Code</button></P> <P><button onclick="MakePage('T');" style="font-size : 24px; width: 400px; height: 80px;">Create This Page</button></P> </TD><TD> <blockquote> <P><font color="blue" size=+1><i>...And a glimpse of where we will go - Don't be put off by the complexity - it is really mostly cut and paste!</i></font></P> &nbsp;&nbsp; </blockquote> </TD></TR> </table> </font> &nbsp; <HR width=50%></HR> &nbsp; <H2><font color="red" size=+1>Web Hosting: Getting Your New Web Pages to the World</font></H2> &nbsp; <blockquote> <font color="blue" size=+1> <P>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.</P> <P>While you are learning, though, it makes sense to be able to test your web pages without cost, and <a href="https://www.makeuseof.com/tag/free-website-hosting-dropbox-google-drive-onedrive/" target="top">a couple of simple options involving Google drive and DropBox are outlined here</a>.</P> <P>Eventually, if you go as far as the Web BlueTooth lessons, you will need a secure web site (<b>https</b> instead of <b>http</b>) and may need to explore this further.</P> </font> &nbsp; <HR width=50%></HR> &nbsp; </blockquote> &nbsp;&nbsp; <P><font size=-1><i><a href="#top">Back to Top</a></i></font></P> &nbsp;&nbsp; </i> <P><strong><a href="https://compasstech.com.au/index.html">Home</a> &larr;<a href="https://compasstech.com.au/live/index.html"> Live Mathematics and STEM on the Web </a>&larr; <b>My First Web Page: Introduction</P> </body> </html>