Putting the "M" in HTML

So the "M" in HTML stands for "Markup", but what does Markup really mean? Essentially it means to annotate a document with extra information. Things like where different sections and paragraphs begin and end, which part is the title, which things should be emphasized and so on.

There are many ways to markup a document, but HTML borrows a technique from an ancestor language, SGML (Standard Generalized Markup Language), which uses angle brackets ("<" and ">") to separate the annotations from the regular text. In HTML these annotations are called "tags".

For example, consider the following chunk of HTML code:

   <body>
      <h1>A Tale of Two Cities</h1>
      <p>
         It was the best of times, it was the worst of times, . . . .
      </p>
      . . .
      <p>
         . . . it is a far, far better rest
         that I go to than I have ever known.
      </p>
   </body>

If you eliminated everything in between the angle brackets from the text, for most purposes it would still read the same:

A Tale of Two Cities
It was the best of times, it was the worst of times . . . .
  . . .
. . . it is a far, far better rest
    that I go to than I have ever known.

Once you know that everything in angle brackets is "meta-information", it leaves a lot of flexibility. You can put a lot of different things in between those brackets without any of it showing up (directly) in your finished document. And, though you don't usually see directly what's in those angle brackets, they can often have a big effect on what your Web page looks like as well as how it responds and interacts with you.

TRY IT OUT!

I expect at this point you may be itching to write some HTML code. As is the tradition in programming tutorials, we'll pause here to create a simple "Hello World" program. If you went through the preparation for this course, you should have Intel® XDK installed on your system, or you can choose any other editor of your liking. If you like instructions in text, feel free to read the rest of this section, but if you prefer, you can just follow along with the video below. In either case, feel free to ask questions in the Discussion section below.

PROGRAMMING "HELLO WORLD"!

Open Intel® XDK and create a new project, using the "Blank" template, being sure to choose the "Standard HTML5" version (not Cordova). Click on "Continue" and choose a name for your project (like "hello-world"). Next you should see a "Success" dialog. Click on "OK" and you'll find yourself in Intel XDKs develop tab. This is where code is created and modified. In our case, we want to modify it so that it say's "Hello World" instead of "Hello Intel XDK".

The first thing you'll probably notice is an abundance of angle brackets ('<' and '>') and a bunch of stuff that looks unintelligible at first glance. This is mostly instructions and a basic template of code that most people will want in their project. For now, though, we're not worried about that, so on the first line that says "<head>" (line 6), there is a little triangle just to the left of "<head>". Click on that triangle to hide or un-hide all that code. Go ahead and hide that for now, it doesn't concern us yet.

Now you should see a line like "<p>Hello, Intel XDK!</p>". Highlight the "Intel XDK" part and type "World" in its place. Of course, it doesn't look much like a web page yet. To see what it might look like on a laptop or other device, click on the "Emulate" tab. You should see a mockup of a screen with the words "Hello World" on it. This is to emulate what your finished web page would look like on one of various devices. If you're really interested, you can try out different devices in the panel on the left.

Another way to see your work is to open your html file in a browser. If you navigate the file system to go to the folder for your project (that you set up when you created the project) and under there you'll see a "www" folder. Inside that you should see a file called "index.html". If you open that file with your favorite browser, you should again see a simple page with the text "Hello World!".

Live coding video: "Hello World!"

Alright, well we're going to try this out now.
Hopefully, you've got Intel XDK installed already, otherwise go back
to the section on "Tools and Browsing" and follow the instructions there.
The first time you start it up you won't have any projects there,
but I've been using it for a while so I've got some projects.
But we're going to start a new one!
So I click on the plus sign down at the bottom there,
(this is the projects tab, you'll learn more about that later), and
under "Templates" go to the blank template,
do the one that says "Standard HTML5 ».
Don't do the Cordova one, that's something else.
Give it any name - you'll want to take note of
where you're storing it because that will be helpful later.
But just give it any name you want and click there.
Alright! Success!
The first thing you'll notice, this is the "Develop" tab now.
This is where the editor is, where you do all the creation and changing of your code.
A lot of this noise and boilerplate stuff you don't really need right now,
so we'll just close that by clicking on the little triangles there.
Now we're going to change where it says "Intel XDK" to "World »,
so now it should say "Hello World!" when you run it.
But, we're going to see how to do that in a moment.
But first we'll save our files.
Then go to the "Emulate" tab.
Here the Emulator shows what it would look like on a device.
In this case it's a laptop, you can change the device if you want.
You can make it a phone or a tablet or whatever.
I'm just going to keep it on a laptop screen for now.
And, you can also open it in the browser.
The way to do that is to go to the file in the www/ directory in your project,
find the index.html file and then open it with a browser;
choose whatever browser you want.
And that's what it looks like in a browser.
Again, it's not terribly exciting, but it will get
more interesting as we go through the course.
As always, feel free to play around with it and try stuff out.
Thanks!