What is html?

All websites run on HTML code of some form or another - that's just a plain fact of life. So it helps to know a little bit about HTML when you're building web pages, even if you don't "do code".

However, the subject is so vast, that it's difficult to find the right place to start.

We've found that the easiest way of "learning" anything is by "doing".

So this is the plan...

We're going to 

• describe what HTML is and show you the person responsible for all of this
• explain why we write .html at the end of every HTML document, and what it does
• show you how to use Notepad to write the simplest HTML document ever, and then open it in your browser.

At the end, you'll feel really great about what you've achieved in such a short space of time!

What does HTML stand for?

HTML is short for Hyper Text Markup Language.  

It's a language, first invented in 1989, by Tim Berners-Lee, a bright-eyed young physicist, who worked at CERN, the World's largest particle physics laboratory in Switzerland.

But his job wasn't smashing atoms - it was to figure out a way for the CERN scientists to share their information with other scientists all over the World.

That's him at his desk, below.

HTML is specially designed to be read by a web browser ( such as Internet Explorer, Firefox or Google Chrome).  

It tells your computer how to draw the basic building blocks of a web page.

Things like

• where the page starts and stops
• where various sections of the page are 
• where the paragraphs start and stop 
• where the Headings are, and so on
  
  

Why do we write .html at the end of a file name?

At the end of a file name, you'll often see a group of 3 or 4 letters, following a full stop.  This grouping is called the "file extension", and those 3 or 4 letters tell your PC which program it should use to open the file. 

So, writing .doc at the end of a file name is letting the computer know that it should open that file with MS Word.

Writing .xls at the end of a file name, tells the computer it should open the file with MS Excel.

And writing .html at the end of a file name, tells the computer that it should open that file with the default web browser, set up for that PC. For some people this might be Firefox, for some Internet Explorer, and for others Google Chrome.

Go to your desktop and find the file called my-first-experiment.html. Double click it, and it will open in your default browser, with the words Hullo Sailor! at the top.

Congratulations! You've just made your first html document all by yourself! The language you used inside the document was English, but it was still an html document.

How do you write html?

At its simplest, you can write html in Notepad, the basic text program that comes with every PC.

People like to use HTML editors, though, like

• DreamWeaver
• NoteTab Light
• HTML-kit
• SeaMonkey
• Arachnophilia
• CoffeeCup HTML Editor

because they automate a number of features.

For example, nearly all HTML editors color the text, to make it easier to spot mistakes in the underlying code.  In addition, they often have automatic buttons that write chunks of code for you.  Many will underline spelling mistakes.

in the paragraph below, you'll see an example of the code for this page, displayed in a simple HTML editor.

What are HTML tags?

One of the first things you have to realize about computers is that they can only read in a straight line. As human beings, we can start at the beginning of a sentence, skip to the end to see what happened, and then jump back to the middle if we want.

Computers can't do this. Like a bloodhound with its nose down to the trail, computers start at the beginning of the sentence, and keep going, nose down, until they get to the end.

So, early HTML was developed using a system of tags.  They usually (but not always) come in pairs. First an opening tag and then later, a closing tag.

One of the tags you might be familiar with is the paragraph tag.  

The opening tag is <p> and the closing tag, at the end of the paragraph, is written as </p>.

<p> .....  </p>

When the browser comes across the opening <p> tag, everything after this point goes into a paragraph. When the browser sees </p>, it recognizes that the paragraph has ended.  

Similarly for <h1>   ...  </h1>. Everything in between the tags is laid out as the H1 heading.

Here are some examples of the underlying code used to write this page, displayed in a simple HTML editor.

Other common pairs of tags you may have seen are

<div>   ...   </div> for the start and end of a division, or section, of the page

<h2>   ...   </h2> for the start and end of the H2 heading on a page

<table>   ...   </table> for the start and end of a table

HTML does have some single tags. <br> and <img> are the ones you will see the most, but the majority of tags come in pairs.

A very simple HTML page

Next, we're going to write a very, very simple HTML page.  

It'll show you the basic structure that all HTML pages follow.  

Once you "get" this, it's like a light bulb has gone off in your head. You'll notice this structure in the code of every BB2 page you look at.

Open Notepad.

We're going to start with the <html>   ...   </html> tags. Type these tags into your Notepad document.

These tell the browser that everything inside these tags is written in HTML.

Next, we're going to use the <head> and <body> tags.

<head>   ...   </head> tells the browser that the code inside this tag is needed to build the page, but that it's not code that is drawn onto the screen.

<body>   ...   </body> tells the browser that this code is drawn directly to the screen.

Your Notepad page now looks like this.

We're going to put something inside the head and the body, so when the page is drawn onto the screen, we can see something instead of a blank white space.

So, inside the head section, we're going to add a title, like this.

<title>My second html document</title>

Whatever you put inside the title tag appears in the browser tab at the top of the page. Google also use it in their Search Engine Results Page.

In the body part, we're going to write

<h1>The first H1 heading</h1>

<p>this is a paragraph</p>

Your Notepad page now looks like this.

This is almost the finished HTML page, but we need to add one more line. As it stands, the browser does not know which version of HTML we are using to write the page.  

So, the first line of any HTML document always gives the browser this information.  

BB2 is written in HTML 4.01 Transitional. Add to the page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

It's a bit of a mouthful, so, for shorthand we talk about "adding the doctype", to describe this step.

Your page is now finished and looks like this.

Save it as my-second-experiment.html using the same process as you used for the first document.

Now find the file on your Desktop, double click the icon and the page will open in your browser.

Congratulations!

You've now written a valid fully-compliant HTML page!

That makes you a certified code ninja, just like the man with the hat!

And, if you want to go further ...

All BB2 pages follow this structure.  The depth and complexity of a web page comes from adding layer after layer onto this basic skeleton.  

In BB2, div tags with specific dimensions are added to divide the body up into first

• the PageWrapper

and then to further divide the PageWrapper itself into

• the Header
• ContentColumn
• NavColumn
• ExtraColumn
• and Footer

Here's the basic structure for the very BB2 page you're reading right now. 

Then, you put more code building blocks into each of the individual page elements.  And then you repeat it again...

And if this reminds you of those small Russian dolls that sit one inside the other, you're right!  

And, just as with the Russian dolls, each piece of code sits on a different layer to the rest to get the final effect you want.  Code that is written later on the page is on a higher level than code that is written earlier.  

But that's a whole other topic! And you can read about it on another page, called "the main areas on a BB2 page".

Coming up

Next, we're going to show you what CSS is and how and why it's used.