Lesson 2: Getting started with HTML

This week we will look at HTML in more detail. HTML is the language that is used on the Web to structure all content, and give it meaning (by this we mean "is it a paragraph?", "is it an image?", etc.)

Note: You can find a useful reference to the most common HTML features you'll want to use: see the HTML Cheatsheet.

Entering a new template into JSBin

To start with, enter the following HTML template into your JSBin HTML pane, replacing everything you had there before:

<!DOCTYPE html>
<html>
  <head>
    <title>My page title</title>
  </head>
  <body>
    <h1>My main page heading</h1>
    
    <div>
      
      <p>My paragraph</p>
      
      <h2>My subheading</h2>
      <p>My second paragraph, containing a <a href="http://www.mozilla.org/">link to Mozilla</a>.</p>
    </div>
    <div>
      <img src="" alt="Description of the image">
    </div>
    
  </body>
</html>

What does HTML look like?

HTML is composed of tags, which wrap around bits of content that you want to do something to. This is the same principle used in programs you'll have already used, like Microsoft Word, or Apple Pages. When you select a bit of text and press the bold button to turn it bold, what you're actually doing is tagging that text with bold tags ... it is just that in those kinds of programs you don't see the code; it all happens in the background.

Note: The proper name for tagging in HTML is marking up. All of the content you're reading now is marked up in HTML.

Let's have a look at a simple HTML example from our template above:

<p>My paragraph</p>

The < followed by the tag name followed by the > is called the opening tag.
The < followed by the forward slash (/) and tag name followed by the > is called the closing tag.
The stuff in between the opening and closing tags is called the content.
The whole lot together is called an element.

Before we move on, let's also talk about attributes. Attributes are extra bits of information that you can add to an HTML element to do extra things to it. For example:

<p style="color: blue;">My paragraph</p>

Here we are adding a style attribute to our p element. Inside this, we can insert CSS to add styling just to this one element. In this case, we've just turned the text blue. There are lots of different attributes and CSS styles you could use, but we'll leave this there for now.

What does an HTML document look like?

Let's return to our HTML template and have a look at what's there.

The doctype is not an element (technically, it's called a processing instruction.) It basically points to a ruleset that defines rules how the HTML in the document should be written. You don't really need to know anything else about this, at least not for now. This always goes at the top of your HTML document.
The html element wraps around the entire HTML document, except for the doctype. You should always include this second in an HTML page. This is sometimes called the root element of the page.
The head of the document is wrapped by the head element. This contains all the information that describes your document, and does useful things to it, but which doesn't actually appear on the page. Here we've got a title element, which controls the text that appears in the web browser tab when this page is loaded up (and the text used when you bookmark the site.)
The body of the document is wrapped by the body element; this is where all your web page content goes — the stuff you want to show in the web browser. At the moment I've just put a single level 1 heading there, for example's sake.

Note: You'll notice that there are a couple of elements here that only have a single tag, rather than a opening and a closing tag. They are called empty elements, because they have no content inside them. You'll meet a few of these throughout the course.

Getting practical

Now we've looked at how HTML works, let's start getting practical and start writing some content of our own!

Adding a title to our page

Change the page title to whatever you want: Write any text you like between the <title> and </title> tags.

this title appears in the tab part of the tab your page is opened in; it is also used when you bookmark the page.

Headings and paragraphs

Headings and paragraphs make up a lot of web content. Just as you would in Microsoft Word or another word processor, you create a document by having a single top level heading, then subsections are created using second level headings, then sub-subsections are created with third level headings, etc. In HTML this is done using heading levels h1, h2 and h3 (You can go right the way down to h6, but you really shouldn't be using this many levels of heading). Any content can be placed in between the headings, but for now, lets stick to paragraphs.

In our template we have a top level heading that begins the entire content, then a paragraph, then a second level subsection, then another paragraph. Lets try adding some of our own headings and paragraphs to our projects. I'd like you to fill in the h1 and the existing h2, then write another h2 and a couple of paragraphs containing your own content. Just keep them inside the first set of <div></div> tags.

Further topics

This section contains some further topics that you can go on to if you finish the previous sections really quickly!

Lists

HTML allows us to create lists, which is very significant. Life is full of lists, from obvious lists such as recipes and shopping lists, to less obvious lists. When you play with a toy like lego or a video game, you are making lists - "what are the next five pieces I should put on my model", or "in what order do I need to press the XBox 360 buttons to do the ultra combo?" In this section I'll introduce you to two different types of list.

Unordered lists are lists where the order of the list items doesn't matter. For example, a shopping list:

Eggs
Milk
Cheese
Co-Co Pops
Orange Juice

We'd mark this up like so:

<ul>
  <li>Eggs</li>
  <li>Milk</li>
  <li>Cheese</li>
  <li>Co-Co Pops</li>
  <li>Orange Juice</li>
</ul>

The opening <ul> tag marks where the list starts, the closing </ul> tag marks where the list ends, and each list item is wrapped in a pair of <li> ... </li> tags.

Ordered lists are lists where the order of the items does matter. For example, in a recipe you would not successfully make the dish if you followed the instructions out of order. The ordered list is exactly the same as the unordered list, except that the container element is ol, not ul.

<ol>
  <li>Preheat the oven to 150 C / gas mark 2.</li>
  <li>Add butter and sugar in a bowl and mix well until 
    light and fluffy.</li>
  <li>Add the vanilla, mix, then add the flour and mix well.</li>
  <li>Roll out to about 5mm. Cut into shapes.</li>
  <li>Bake for 25 minutes or until golden brown.</li>
</ol>

Have a go at adding a list to your project.

Emphasis

HTML also has some elements that allow us to make some words stand out, or be more important than others. Here we'll look at two:

strong is for more important words
em is for emphasis, on words that you might say differently

Let's look at a couple of examples:

<p>I have been away from home for <em>far too long</em>...</p>

<p>When you phone up, be sure to <strong>quote your 
reference number</strong>.</p>

You can nest both if you like, so that you get emphasised and important:

<p>When you phone up, be sure to <strong>quote your 
reference number: <em>3387</em></strong>.</p>

When you nest elements, you need to do them correctly, so you must close elements in the opposite order that you opened them in. The following is wrong:

<p>When you phone up, be sure to <strong>quote your 
reference number: <em>3387</strong></em>.</p>

Let's have a go at using these now.

Getting started with HTML

Basic practical web design Lesson 2