Get updates

Scott Learn to Program with JavaScript Series: An HTML Beginner’s Interactive Tutorial

I’m a web developer by day and have been programming, in one language or another, most of my life since age 10. But for someone without consistent (or any) programming experience, how do you learn to program? This question was brought on by a friend of mine who had a programming class or two years ago and is now setting his sights on giving it another shot.

The good news is that you don’t have to be a life-long programmer to have some fun with it. Old, young, students, hobbyists, and non-programmer professionals can all learn to program, provided they have some interest and a little time (it doesn’t take much to get started).

There are tons of books and sites devoted to teaching all kinds of different languages, including one of my favorites, Ruby (you should really take a look at Chris Pine’s Learn to Program, whether you’re new to programming or just interested in Ruby). However, I think that what got me so excited when learning programming is probably the same thing that can get most new programmers excited, which is:

Rapid Feedback

JavaScript is, in my opinion, perhaps the best language to start learning programming for this reason. By its nature, JavaScript interacts with your web browser, and this means you get a lot of things for free like presentation (HTML/CSS), image handling that just requires dropping in a URL, and so on. If the fun part of programming is getting results you can see from only a few lines of code, JavaScript (along with its close associate HTML) is one of the best around.

Getting Started

To work with JavaScript you need the following materials:

  • A JavaScript interpreter, to run your programs
  • A text editor, in which to write them
  • …and that’s it!

The good news gets better: not only can you get started without buying a thing, but since you’re on this web page you have everything you need already! Your browser has the JavaScript interpreter built in (unless for some reason you’re here on an ancient and text-only app like Lynx, or perhaps your cell phone). The text editor is here on the page, to save time! You can of course use your own editor, more details on that later.

The Base: Simple HTML

The easiest way to work with JavaScript is in your browser (that built-in interpreter I mentioned will do its thing, you don’t even have to think about it really). This usually means placing the JavaScript code in a web page, and web pages pretty much all use HTML at their base. So we’ll start with simple HTML code, then see how to add JavaScript to the mix.

Below is the first interactive example. I’ll describe what the code in the box does, but first go ahead and click the “Create Page” button – see the results of the code instantly!

Example 1:

(If you see only an empty box above, JavaScript is probably turned off in your browser – check enabling JavaScript. If you didn’t see a page pop open in a new window when clicking the button, your browser might be blocking popups – check enabling popups).

What should happen is that a page pops up in a new window. It contains a headline and a regular line of text. The cool thing is that the code in the box is what it takes to create the page, and even better you can edit the code and click the button again to change what’s shown on the page.

Introducing HTML tags

Everything in HTML is contained within tags. An HTML tag starts with a less-than symbol: < then includes the tag name (such as “html”, “body”, or “p”), then a greater-than symbol: >.

At the top of our example’s text box there is a tag with the name “html”. If you look at the bottom of the box, you’ll see another tag that’s almost identical: </html>, where the forward-slash / indicates a closing tag.

What’s this about closing tags? Well, the very first tag, <html>, is an opening tag, indicating the start of the HTML block. Everything after the opening html tag but before the closing html tag is contained inside the HTML block. You’ll notice I indented the contents; this is to make it easier to read, but is not at all required when writing HTML code.

Inside the <html> tags, the next block of code is the header. This starts with the opening tag <head> and ends with the closing tag </head>.

Tags contained within other tags are said to be nested. Here the header’s tags are nested within the html tags because they are contained completely between <html> and </html>.

The header block contains information about the page, metadata, which is not shown in the page itself. Most of the metadata that can go in the header is not of interest right now, but we do have an opening and closing set of <title> tags (the closing tag is on the same line, purely a style choice) which has a special purpsose. Between those tags is some text: “Basic HTML page example”. If you click the “Create Page” button again, you won’t see that text on the page. However you should see it up top, in the new window’s title bar. It may not seem like much, but that’s the main function of the title tag text, to act as a sort of label for the page (there are also important SEO effects of title tag text, but that’s an entirely different topic).

So we’ve seen that a set of opening and closing tags can contain things. Other tags. Text too. What they are allowed to contain depends on the type of tag, but our example code demonstrates the basic arrangement that essentially all pages conform to at some level. Every page should have a set of <html> tags as the base. Those tags should contain a header (<head></head>) and a body (<body></body>).

Page Content is All About the <body>

While the header contains metadata, all content that gets displayed on the page should be contained within the body tags. Our example includes two types of tags to display content: <h1> and <p>.

The first creates large and bold headline text. “h” stands for Headline or Header, and is normally bold and much larger than standard text on the page. There are different levels of headline tags – see what happens if you change the tags from <h1> and </h1> to <h3> and </h3>, then click the “Create Page” button again (you didn’t forget that this is an interactive tutorial, did you?)

HTML actually includes headline levels one through seven, using smaller and smaller text as the numbers get higher, but they don’t usually have value beyond <h4>, when the text size starts getting to be as small as standard text.

The second piece of content is the paragraph tag: <p>. As the name suggests, it is designed to hold standard text, about a paragraph’s worth. There is no limit to how much text you are allowed to stuff inside a single set of paragraph tags, but usually “one paragraph” is a good guideline. Paragraph tags, by default, skip a line – so placing another content tag after this one should come out with a row of space between them on the page. Try adding another paragraph tag and some text to this example:

Example 2:

If you’ve made it through to this point, congratulations! You have a foundation in HTML, and you’re probably ready to move on to the next article, where you’ll get to try out some JavaScript embedded in an HTML page!

Update 20071125:

I made a few minor corrections in the text. I also wanted to add a note about editors as promised above.

First off, copy all of the code from one of the example boxes on this page. Then open Notepad, or your text editor of choice; don’t use Word or another full word processor, just a text editor. Okay, now paste the code into the editor. Save that as “example.html”, then double-click the file.

It should open in your browser and look exactly the same as the interactive example I built into this page (except this time in a full window instead of a pop-up). Congratulations, you’ve made an HTML page! That’s literally all it takes. No special programs or complicated compiling. Just text in a text file with .html as the extension.

(I suggested avoiding word processors because they pretend to handle HTML code but invariably do their own things with it which often muck it up).

2 Responses to “Learn to Program with JavaScript Series: An HTML Beginner’s Interactive Tutorial”

  1. Fantastic tutorial! It saved me a lot of grief. Seriously, thanks.

  2. Glad you found it helpful Wes!

Leave a Reply