HTML and CSS Basics


This tutorial is intended to provide you with an overview of HTML and CSS coding so that you can understand how to control the foundation of your application.

This is not a Web Design 101 tutorial, we will only cover the aspects that are relevant to iio Application development.

To follow this tutorial, you'll need a text editor and a web browser.

 

The Basic HTML Page Structure

HTML browser applications are the platform of all iio Applications. These browsers can operate on the web or offline, and the number of devices that have HTML5 compatible browsers is rapidly growing.

HTML pages are documents that define any number of elements, which can each contain more elements or content.

HTML5 defines a special type of element called a canvas Element.

The iio Engine takes control of one or more canvas Elements and allows you to work with high level design constructs that make coding interactive HTML applications much easier.

You can code your entire iio Application in JavaScript, but you always need an HTML page to hold the canvas(s).

You don't actually need to create a canvas yourself - iio can do that for you with its start functions - but for the sake of transparency in this tutorial, we will define a canvas ourselves on an HTML page.

Create a new file and name it html-tutorial.htm, then open it up in a text editor and input this code:

<!doctype html>
  <body>
    <canvas id="myCanvas" width="600px" height="600px"/>
  </body>
</html>

This is the simplest valid html page we can create. The first line declares that the page is an html document and the second marks the beginning of the body element, which is where all the content on our page goes.

The third line defines a 600x600 canvas element with the id myCanvas.

You can open this file in any web browser and it will run without error. It looks like a blank white page, but if you inspect it with your browsers page inspect tool, you can see that our canvas element does exist and is positioned in the top left corner.

It would be nice if we could see the canvas though, so let's put a border around it.

 

Using CSS to Specify Styles

HTML only contains information about page structure and element hierarchies - it doesn't control layout and doesn't define very much about what the page actually looks like.

All of a pages colors, fonts, text formatting, borders, underlines, etc. are defined in a language called CSS, which stands for Cascading Style Sheets.

We can use CSS in two different ways to define an elements style. Coming back to our HTML page and canvas border example, we could replace the canvas definition we used before with this:

  <canvas id="myCanvas" 
             style="border:1px solid black" 
             width="600px" 
             height="600px"/>

See the new 'style' property added on line 2? That's CSS code inside its quotations.

If you refresh your HTML page in your browser, you should now see that your canvas is outlined with a 1px solid black line.

It doesn't look very good sitting up in the top left corner though, so let's use another CSS rule to center the canvas and give it some padding on top.

We're going to do this with the second CSS option that I alluded to earlier: by creating an actual stylesheet.

Change your HTML page's code to this:

<!doctype html>
  <head>
    <style>
      canvas{ border: 1px solid black }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="600px" height="600px"/>
  </body>
</html>

This will give you the exact same result as before.

The head is an element where you can define meta information, JS and style scipts, and load external files.

We can define a stylesheet that effects the entire HTML page in the head element.

We could also save our stylesheet as an external .css file, and load it into our document like this:

<!doctype html>
  <head>
    <link rel="stylesheet" type="text/css" href="myCSSFileName.css">
  </head>
  <body>
    <canvas id="myCanvas" width="600px" height="600px"/>
  </body>
</html>

Since we're not working with a huge set of styles or multiple pages, we will keep our style sheet directly defined in the head.

Centering the canvas with styles is easy by using the auto margin rule. We also have to set the display mode to block in order for this to work:

<!doctype html>
  <head>
    <style>
      canvas{
           margin: 20px auto;
           border: 1px solid black;
           display: block;
        }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="600px" height="600px"/>
  </body>
</html>

This stylesheet gives our canvas 20 pixels of padding on the top and bottom, centers it on the screen, and adds our border like before.

If we want to invert the color scheme (as I always like to do), we can use this code:

<!doctype html>
  <head>
    <style>
      html{
         background-color: black;
      }
      canvas{
         margin: 20px auto;
         border: 1px solid white;
         display: block;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="600px" height="600px"/>
  </body>
</html>

That's all I'm going to show you when it comes to HTML and CSS. There are a lot of other tutorials out there if you need assistance, but I've always found that once you have the basics down, the best way to learn these languages is to just google whatever specific challenge you're currently facing.