06 - Interacting and Styling HTML

WARNING: MAKE SURE YOU'RE ON HTTP AND NOT HTTPS FOR THIS CHAPTER TO WORK

Windows 93 does not have full support for https yet, and this will not work if you're using https. Make sure any extensions (HTTPS Anywhere) or setting that forces https is disabled, and there is a "Not secure" indicator in your address bar. If there's a "Secure" indicator instead, try going to http://windows93.net/ manually and it should appear.

Not secure

In this chapter, we're going to take the HTML project we made earlier, and make the button show a message. We're also going to style it to look like it's an actual Windows 93 Button.

Styling

First, let's change our HTML to import several required styles. We're going to add a bunch of required styles and we're going to change the body to be a skin base by setting it's class attribute. Open /a/project/index.html with CodeMirror and change it to this:

<html>
<head>
    <!-- The head, this is where scripts and styles go -->
  <link rel="stylesheet" href="http://www.windows93.net/c/sys42.css?v=2.4.0">
  <link rel="stylesheet" href="http://www.windows93.net/c/sys/skins/w93.css">
  <link rel="stylesheet" href="http://www.windows93.net/sys/hotfix.css?v=2.4.0">
</head>
<body class="skin_base noscroll">
    <!-- The body, this is where the actual html goes -->
    HTML Test <br>
    <button>Click me!</button>
</body>
</html>

If you use the HTML loader script we made earlier now, you will see that the text and button are both properly themed.

HTML Example Window

Interacting

Now we're going to make the button do something. Add an onclick attribute to the button (that will run the function doThing) by changing it to <button onclick="doThing()">Click me!</button>.

To use Windows 93 functions like $alert inside of the HTML, you're going to have to use window.parent. For example, if you want to do an $alert("Hello!") you'd use window.parent.$alert("hello") inside of the HTML instead.

We're now going to add a script element to the head part of our HTML, which will contain all of the JS we will use. We're going to create a function named doThing that will show an alert message box.

<script>
   function doThing(){
            window.parent.$alert("Hello world!")
   }
</script>

Now, if you run the loader script again and press the button, the function should run and a message box should appear.

Message Box

The full HTML

After following all steps in this chapter, your HTML should now look like this:

<html>
<head>
    <!-- The head, this is where scripts and styles go -->
   <script>
   function doThing(){
            window.parent.$alert("Hello world!")
   }
   </script>
  <link rel="stylesheet" href="http://www.windows93.net/c/sys42.css?v=2.4.0">
  <link rel="stylesheet" href="http://www.windows93.net/c/sys/skins/w93.css">
  <link rel="stylesheet" href="http://www.windows93.net/sys/hotfix.css?v=2.4.0">
</head>
<body class="skin_base noscroll">
    <!-- The body, this is where the actual html goes -->
    HTML Test <br>
    <button onclick="doThing()">Click me!</button>
</body>
</html>

In the next chapter, we're going to start working on our text editor.

--> Next Chapter