Web Pages 101 – Part 1

*If any of the jargon confuses you, then please visit the Jargon Buster!

HTML or Hypertext Markup Language is the language that the World Wide Web is written in. It is made up of Tags that tell the page how to show itself to the visitor on their browser.

Tags sound difficult – but they’re not. There are only three rules:

  • They are surrounded with < and >
  • There is a start one and an end one – and the end one is signified with a forward slash /
  • If there is more than one at a time, then they are closed in the right order

Every web page starts with <HTML> and ends with </HTML> (the closing tag). Between these two tags, there are also two other tags that are required. These are <HEAD></HEAD> and <BODY></BODY>.

And that’s it!
goto top

Hello World!

It is often considered to be tradition among programmers for people attempting to learn a new programming language to write a “Hello World” program as one of the first steps of learning that particular language.

SaveAs Type

  1. Open Notepad, or a similar program and save it as HelloWorld.htm to your desktop (drop down the Save As Type to All Files *.* otherwise it will save it as a HelloWorld.htm.txt – and be read as a text file and not a web page)
  2. In the Notepad window, copy & paste, or type the following:
    <HTML>
      <HEAD>
        <TITLE>Hello World</TITLE>
      </HEAD>
      <BODY>
        <H1>Hello World</H1>
      </BODY>
    <HTML>
  3. Save the file, go to your desktop and click (or double-click) on the HelloWorld.htm file – it should open in your browser with the words “Hello World” as the main title

Click here to view the HelloWorld.htm file – including the source code.
Simple, isn’t it?

So let’s look at the document.
goto top

HEAD and TITLE Tags

First you’ll notice that there are 5 different tags: HTML, HEAD, TITLE, BODY and H1. As we already know, the HTML, HEAD and BODY are the only required elements.

TITLE is part of the HEAD element, so opens and closes within it:

<HEAD><TITLE>The title of your document</TITLE></HEAD>

Notice how the tags close in order. We opened HEAD, then opened TITLE, so we closed TITLE first, then closed HEAD. If you think you should have closed the TITLE and HEAD the other way around, then think of Tags as loose leaf folders stacked inside one another – you can’t close the outside folder before closing the ones inside first.

The TITLE is the name of the document and will show on the tab and/or window of your browser to help the visitor if he has many tabs or windows open.

Other things also go into the HEAD element, like META TAGS and links to scripting files, but that is for the more advanced user, and you don’t need to worry about it as it doesn’t affect a basic web page.
goto top

BODY Tag

Anything that is included in the BODY tag is shown on the web page – it’s the body of your document and where all your text and images or photos go. The BODY tag is usually the last thing to close before closing the HTML tag (the very last tag to close).
goto top

H1 Tag

You have written Hello World inside the H1 tag. This is an important tag because it’s Heading 1 – the title of the page and is one of the main thing that Google reads to find out what the page is about. So we have called our web page Hello World and put the text inside the H1 tag, which is within the BODY tag.
goto top

P Tag

So what if you want to add some text underneath the heading? You surround your paragraphs of text with the <P>This is a paragraph</P> tag. Add the following highlighted text to your HelloWorld.htm page (it won’t be in red when you type or see it). If you have closed Notepad, then right click the file and choose Open With… then choose Notepad.

<HTML>
  <HEAD>
    <TITLE>Hello World</TITLE>
  </HEAD>
  <BODY>
    <H1>Hello World</H1>
      <P>Welcome to my first web page - I hope you enjoy it!</P>
  </BODY>
<HTML>

Save the file and refresh your browser page (or open it again from your desktop). You should now see the text underneath the title heading.
Click here to view the updated HelloWorld.htm file – including the source code.

Add some more lines, surrounding them with the <P></P> tags and save and view the file. You can also add another <H1></H1> tag later or try to add an <H2></H2> or <H3></H3> tag with a paragraph below them. The only thing you have to remember is that all of it needs to be between the <BODY> and </BODY> tags.
goto top

A Word about Whitespace

I have formatted the HTML code above so it’s easy to read and easy to see which tag is open and where it closes – but none of the formatting is necessary. Unless you enter the HTML code for a line break <BR /> then it will ignore any new lines you add, so the above HTML could have been written as:

<HTML><HEAD><TITLE>Hello World</TITLE></HEAD><BODY><H1>Hello World</H1><P>Welcome
to my first web page - I hope you enjoy it!</P></BODY><HTML>

And it wouldn’t make any difference to your Internet browser.


In the next lesson, I will cover font styles, families and colours i.e. how to make your text italic, bold, change it to another font (Arial, Times New Roman, etc) or another colour – so come back soon!