So, having installed your text editor, create a text file called ‘index.html’ with the following code in it:
and save it.
As you can see, the above HTML document is pretty bare and, to be frank, pretty useless. If you load it into your browser (eg. open Internet Explorer and, using Windows Explorer, drag your index.html file onto IE) you’ll see a blank page that does nothing.
With this useless page open, press the F12 function key in IE (Ctrl+Shift+I, if you’re using Chrome). Now you’ll see the browser’s development tool (typically at the bottom of the screen in IE and on the right of the screen in Chrome). These tools are very, very useful. It is worth your while spending some time exploring them. Amongst other things, they allow you to:
- make changes to the loaded document and see the effect immediately (also very, very handy).
document.body.style.backgroundColor = 'red';
Please note that the whitespace after the word ‘script’ in the closing script tag (ie. </script >) should not be there. I had to put it there for this blog as WordPress doesn’t like people running scripts from their blog posts on other peoples’ web browsers. So, in your .html file don’t include this trailing whitespace (ie. have …script> not …script >).
Now reload this file – you can either ‘drag and drop’ as you did before or, you can simply click the ‘reload’ icon in your browser. Provided you didn’t change the file name or its location, the latter will work just as well as the former.
ThisWorkbook.Sheets(1).Range("A1").Value = "red"
Now go back into the dev tool and take a look at your code. On the ‘Elements’ page in the frame at the bottom half of the screen you’ll see a ‘Style’ tab. If you activate it (if it isn’t already) you’ll see the ‘background-color’ is ‘red’. Go ahead and double click on this ‘red’ value. It’ll change to a text box expecting you to input something. Go ahead and choose another color, eg. orange. You’ll see your web page changes colour instantly. This ability to change a documents style ‘on the fly’ makes the dev tool a useful companion when developing a web page. Note that this change only applies to the document in memory. The code in your index.html file is not updated.
document.body.style,backgroundColor = 'green';
Note how I’ve used a comma instead of a full-stop in between ‘style’ and ‘backgroundColor’. Go ahead and reload this modified file. You’ll see that you get a blank page, not a green one. Now open the dev tool and instead of ‘Elements’, click on the ‘Console’ tab. You’ll see an error message in red and you’ll also see (to the right) a reference to the file and line number (index.html:6 in my file). If you examine the error message in full you may also get the column number of where the error occurred on the line. I find the Console is the first place I go to if my page is not working as I expect it to. Unsurprisingly, 100% of the time the computer is NOT wrong.