<html> <head> <title>My First Web Page: Lesson 1</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> </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; <a href="index.html" target="top">My First Web Page: Introduction</a> &larr; Lesson 2</strong></P> </div> <blockquote> &nbsp;&nbsp; <H1><font color="red">My First Web Page: Lesson 2: Styles and Layout</font></H1> <blockquote> <H4><i>Create Your Own Live Mathematics and STEM Web Pages</i></H4> <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><a href="index.html" target="top">Introduction: A Sampler</a></LI></P> <P><LI>Lesson 2: Styles and Layout</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>Let's have another look at that sample lesson from the introductory page in which we added some "more interesting text" - it has been set as the default for this lesson.</P> <P>You should have noticed that paragraphs are defined between <b>&lt;P&gt;</b> and <b>&lt;/P&gt;</b>, and headings can be defined in sizes from 1 to 4.</P> The entire page lives between an opening <b>&lt;HTML&gt;</b> and a closing <b>&lt;/HTML&gt;</b>; the <b>head</b> and <b>body</b> of the page defined similarly.</P> <P>Did you work out the role of <b>&lt;BLOCKQUOTE&gt;</b>? Very useful since a page needs some whitespace around the edges in order to be easily readable, and (used tastefully) indenting can be a powerful tool to style both look and readability of your page message.</P> <P>And - even more exciting - see how to define an <b>image</b> - even one that exists remotely some where else on the web! (many images can be sourced by right clicking and copying the image address to paste into the HTML image tag.) Notice that an image can be placed within a heading or paragraph and aligned right to have the text wrap around it - you won t always get the desired layout result (for that, see tables below) but it is a quick and easy option.</P> <P>Which brings us to <b><font color="red">emphasis</font></b>!</P> <P>As with all good things, a little goes a long way, so moderation is desirable (and not always achieved, in my case!). My main tools of trade in this regard are generally <b>&lt;b&gt; (bold)</b>, <b>&lt;i&gt;</b> <i>(italic)</i> and <b>&lt;font&gt;</b> <font color="red" size=+2> adding touches of color</font> and <font size=-1>size adjustment as desired.</font></P> <P>There are many other useful tags - for mathematics, you may want to try <sup>superscript</sup> (<b>&lt;SUP&gt;</b>) and <sub>subscript</sub> (<b>&lt;SUB&gt;</b>).</P> &nbsp;&nbsp; <P><i><a href="https://www.w3schools.com/html/html_elements.asp" target="top">Like to know more about HTML elements?</a></i></P> &nbsp;&nbsp; <P><font size=-1><i><a href="#top">Back to Top</a></i></font></P> &nbsp;&nbsp; </font> </blockquote> <script type="text/javascript"> var headText = '<HTML>\n' + '<HEAD>\n' + '<TITLE>My First Web Page: Lesson 2</TITLE>\n' + '<meta name="viewport" content="width=device-width, initial-scale=1">\n' + '</HEAD>\n'; var bodyText1 = '<BODY>\n' + '<BLOCKQUOTE>\n' + '\t<H1><img src="https://compasstech.com.au/GXWeb/GXWeb_Pythagoras.gif" width=20% align=right> 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\n'; var endText = '</BODY>\n' + '</HTML>'; function setText1() { document.getElementById("textBox").value = headText + bodyText1 + endText; } var bodyText2 = '<BODY>\n' + '<BLOCKQUOTE>\n' + '\t<H1>Control the Layout of Your Page with Tables</H1>\n\n' + '\t\t<BLOCKQUOTE>\n' + '\t\t\t<TABLE border=1 cellpadding="10">\n' + '\t\t\t<TR><TD width=50%>\n' + '\t\t\t<P><font color="red" size=+1>HTML tables consist of ROWS (TR) and table DATA (TD).</font></P>\n' + '\t\t\t</TD>\n' + '\t\t\t<TD>\n' + '\t\t\t<P><font color="blue" size=+1>The data cells will expand according to the text you place inside (although you can easily specify the width).</font></P> \n\n' + '\t\t\t</TD></TR>\n' + '\t\t\t<TR><TD>\n' + '\t\t\t<font color="green" size=+1><P>Obviously, all sorts of things can be placed inside table cells:</P>\n\n' + '\t\t\t<UL>\n' + '\t\t\t<LI><P>Text, obviously;</P></LI>\n' + '\t\t\t<LI><P>Lists, like this one;</P></LI>\n' + '\t\t\t<LI><P>even cool images! &rarr;</P></LI>\n' + '\t\t\t</UL>\n' + '\t\t\t</font>\n' + '\t\t\t</TD>\n\n' + '\t\t\t<TD>\n' + '\t\t\t<P><img src="https://compasstech.com.au/GXWeb/GXWeb_Pythagoras.gif" width=100%></P> \n\n' + '\t\t\t</TD></TR>\n' + '\t\t\t</TABLE>\n' + '</BLOCKQUOTE></BLOCKQUOTE>\n'; function setText2() { document.getElementById("textBox").value = headText + bodyText2 + endText; } var headText3 = '<HTML>\n' + '<HEAD>\n' + '<TITLE>My First Web Page: Lesson 2</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' + '</HEAD>\n'; var bodyText3 = '<BODY>\n' + '<div id="HeaderBar">\n' + '&nbsp;<P><font color="white"><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; <a href="index.html" target="top">My First Web Page: Introduction</a> &larr; Lesson 1</font></P>&nbsp;\n' + '</div>\n\n' + '&nbsp;&nbsp;\n' + '<BLOCKQUOTE>\n' + '\t<H1>Control the Layout of Your Page with Tables</H1>\n\n' + '\t\t<BLOCKQUOTE>\n' + '\t\t\t<TABLE border=1 cellpadding="10">\n' + '\t\t\t<TR><TD width=50%>\n' + '\t\t\t<P><font color="red" size=+1>HTML tables consist of ROWS (TR) and table DATA (TD).</font></P>\n' + '\t\t\t</TD>\n' + '\t\t\t<TD>\n' + '\t\t\t<P><font color="blue" size=+1>The data cells will expand according to the text you place inside (although you can easily specify the width).</font></P> \n\n' + '\t\t\t</TD></TR>\n' + '\t\t\t<TR><TD>\n' + '\t\t\t<font color="green" size=+1><P>Obviously, all sorts of things can be placed inside table cells:</P>\n\n' + '\t\t\t<UL>\n' + '\t\t\t<LI><P>Text, obviously;</P></LI>\n' + '\t\t\t<LI><P>Lists, like this one;</P></LI>\n' + '\t\t\t<LI><P>even cool images! &rarr;</P></LI>\n' + '\t\t\t</UL>\n' + '\t\t\t</font>\n' + '\t\t\t</TD>\n\n' + '\t\t\t<TD>\n' + '\t\t\t<P><a href="http://geometryexpressions.com/gxweb" target="top"><img src="https://compasstech.com.au/GXWeb/GXWeb_Pythagoras.gif" width=100%></a></P> \n\n' + '\t\t\t</TD></TR>\n' + '\t\t\t</TABLE>\n' + '</BLOCKQUOTE></BLOCKQUOTE>\n\n'; var endText3 = '&nbsp;&nbsp;\n' + '<FONT COLOR="RED" size=-1>\n' + '<P><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; <a href="index.html" target="top">My First Web Page: Introduction</a> &larr; Lesson 1</font></P>\n' + '</BODY>\n' + '</HTML>'; function setText3() { document.getElementById("textBox").value = headText3 + bodyText3 + endText3; } function MakePage(objName) { contents = document.getElementById("textBox").value + '\n<FONT COLOR="RED" size=-1>' + '<A HREF="javascript:window.close()">' + '<P><HR width=50%></P>' + 'Back to ' + '<I>' + 'My First Web Page: Lesson 2</i></FONT></A>'; Opts = "toolbar=0,location=0,directories=0,status=1,menubar=1," + "scrollbars=1,resizable=1,width=900,height=900"; 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> </font> </center> &nbsp; <HR width=50%></HR> &nbsp; <blockquote> <P><font size=-1><i><a href="#top">Back to Top</a></i></font></P> &nbsp;&nbsp; <H2><font color="red">Let's Try Tables for Layout</font></H2> <TABLE cellpadding="10"> <TR><TD width=25%> <center> <P> <button onclick="setText2();" style="font-size : 24px; width: 100%; height: 80px;">Set Code</button></P> <P><button onclick="MakePage('T');" style="font-size : 24px; width: 100%; height: 80px;">Create This Page</button></P> </center> </TD><TD> </font><font color="blue" size=+1> <blockquote><blockquote><blockquote> <P><i>Look closely at the code for this sample and you should see how tables work.</i></P> <P>You will also notice a couple of neat new things as well...</P> <P>Did you see how the width of the table cells can be defined <b>inside</b> the <b>&lt;TD&gt;</b> tag?</P> <P>Notice, too, that <b>cellpadding</b> can be a very important part of improving the layout of your table elements. The <b>border</b> for a table is optional (and often looks better without).</P> <P><b>Lists</b> (both ordered <b>&lt;OL&gt;</b> and unordered <b>&lt;UL&gt;</b> are very useful tools - List items <b>&lt;LI&gt;</b> are indented and, with an added paragraph tag can be spaced for easier reading. In fact, you can even include multiple paragraphs within a single list item, if desired.</P> </blockquote></blockquote></blockquote> </TD></TR> </TABLE cellpadding="10"> &nbsp; <HR width=50%></HR> &nbsp; <P><font size=-1><i><a href="#top">Back to Top</a></i></font></P> &nbsp;&nbsp; <H2><font color="red">And Add Some Links and Navigation</font></H2> &nbsp;&nbsp; <TABLE> <TR><TD width=25%> <center> <P> <button onclick="setText3();" style="font-size : 24px; width: 100%; height: 80px;">Set Code</button></P> <P><button onclick="MakePage('T');" style="font-size : 24px; width: 100%; height: 80px;">Create This Page</button></P> </center> </TD><TD> </font><font color="blue" size=+1> <blockquote><blockquote><blockquote> <P><b>HyperLinks</b> are the bread and butter of the web and we see here how simple the concept is: using the <b>anchor (a)</b> tag, a standard link refers to a Hypertext reference (<b>href</b>) which can either be local or a web page. Include <b>target="top"</b> if you want a new page or tab to be opened, leaving the existing page intact. Links can be warpped around words, paragraphs,images - just about any HTML object.</P> <P>Finally, we should always provide the page user with a way OUT of your page - not just a way in! Adding navigation links at top and bottom of the page is good practise.</P> <P>Here, we also add a little more:</P> <UL> <LI><P>Look at the head section and you will see a link there - a link to a page of style commands that make my pages more uniform.</P></LI> <LI><P>Look at the start of the body section and you will see a new tag: <b>&lt;div&gt;</b>. The <b>division</b> tag is now probably used more frequently than tables to control page layout, and it certainly has some nice features. Here we see it call the stylesheet from the header to define a striking header bar for the top of the page.</P></LI> <LI><P>Finally, look closely and you may see a couple of strange looking elements: <b>special characters</b> like <b>nbsp</b>, <b>rarr &rarr;</b> and <b>larr &larr;</b>.</P> <P>Preceded by an ampersand (&) and completed by a semi-colon, there are a wealth of such special characters with which to enhance your web page. The <b>non-breaking space (nbsp)</b> is particularly important as it serves to increase spaces between paragraphs and other page elements, giving you much greater control over your page layout.</P></LI> </UL> </blockquote></blockquote></blockquote> </TD></TR> </TABLE> &nbsp;&nbsp; <HR width=50%></HR> &nbsp;&nbsp; <blockquote><blockquote> <font color="blue" size=+1> <P>As usual, try making changes to the HTML code provided and study the effect - you will learn best by <b>doing</b>.</P> &nbsp;&nbsp; </blockquote></blockquote></blockquote> &nbsp;&nbsp; <HR width=50%></HR> &nbsp;&nbsp; &nbsp; <P>Congratulations! You now know most of what I knew to create my own web pages for the past twenty years or so. Of course, there is so much more that you can learn - and many of my old-style methods are no longer the preferred way to perform these tasks - BUT, as mentioned previously, the emphasis here will be on mathematics and STEM - to learn <b>good</b> web design, please visit sites like <a href="http://w3schools.com" target="top">w3schools.com</a>.</P> <P>I am just giving you enough to get started and to allow us to move quickly to the <i>fun stuff</i>!</P> <HR width=50%></HR> </i> &nbsp;&nbsp; <P><font size=-1><i><a href="#top">Back to Top</a></i></font></P> &nbsp;&nbsp; <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; <a href="index.html" target="top">My First Web Page: Introduction</a> &larr; <b>Lesson 2</P> </body> </html>