Comp25: Introducing HTML

What is HTML?

HTML stands for Hyper Text Markup Language. It is the language that web pages are created in and specifies how text and images appear in a web browser.

HTML files contain a number of special codes, called tags, that mark up text and images to style them appropriately. Review the following example:

Here is some text.

In the above example, the word "text" will appear bold because it is surrounded by the tags. You'll note that there is a before the word text and a after. Everything between the tags is affected by the formatting specified.

HTML has a wide variety of tags to mark paragraphs, tables of data, fonts and colors, margins and line spacing, images, borders, and more.

You might also hear the word element used in conjunction with HTML. An element is a matching pair of tags and everything between them. In the above example, text is an element. If a paragraph were defined using the tag at the front and at the end, the entire paragraph is an element.

Creating and Editing an HTML Page

Web page files end in the HTML (or HTM) file extension, much like Word documents end in DOC and Excel workbooks end in XLS.

Unlike Word and Excel files, HTML files can be edited in "plain text" using a program like Notepad or SimpleText.

If you using a Windows operating system, there is something important you must do before you can create an HTML file. Learn how to reveal file extensions before you continue.

Let's try it!

Open Notepad.

Copy and paste the following text into a blank text file:

<html>
  <body>
    <h1>
      Hello World!
    </h1>
    <p>
      This is my <b>first webpage</b>!  Isn't it great?
    </p>
  </body>
</html>

Now save the file somewhere on your computer. When you specify the filename, you must end it with the HTML extension. You might call it "test.html" for example. Take note of the folder that you saved your file in.
Using Windows Explorer, find the file you just created. Because you saved it as an HTML file, it should appear with a webpage icon. If it appears as a Notepad icon, you did not reveal file type extensions.
Double-click the icon, opening it in Internet Explorer. You should now see your creation. Congratulations!

Making Editing Easy

One way that you can save time editing your web pages is to utilize multiple windows on your desktop at the same time.

As you have noticed, you edit the page in Notepad and view it in Internet Explorer. By positioning both windows side-by-side you can make changes in one and view them in the other.

When you have made changes, simpy press Ctrl-S in Notepad to save the file. In Internet Explorer, press F5 to refresh the page and see your new page.

HTML Editor Software

As you might expect, programs exist to make editing web pages even easier. Many use a "What You See is What You Get" interface which can save time and reduce mistakes. However, for Comp25 we will be using a plain-text editor such as Notepad so that you learn HTML code.

Filename Notes

It is a common understanding that the "home" page for a website is always called "index.html". In the example above we created the page "test.html" instead. That's fine for now, but when you create your own website you will want to make sure the page is called "index.html".

On the internet, filenames are case sensitive. It is recommended that you always use lowercase when naming your files.

Spacing and Lines in HTML

When a web browser opens and displays an HTML document it completely ignores all spaces and lines. As a result, the following two HTML pages will appear identical in a browser:

<html>
  <body>
    <h1>
      Hello World!
    </h1>
    <p>
      This is my <b>first webpage</b>!  Isn't it great?
    </p>
  </body>
</html>

<html><body>
<h1>Hello World!</h1>
<p>This is my <b>first webpage</b>!  Isn't it great?</p>
</body></html>

We can take advantage of this to make our HTML code much easier to read. As you can see above, example number one is far easier to understand than example number two.

It's also important to remember that since lines and spaces are ignored, we cannot rely on them for formatting. Consider this example in HTML:

Here's my shopping list: - Milk (make sure to get Low Fat!) - Eggs - Bread

Here's how that HTML code will display in a web browser:

Here's my shopping list: - Milk (make sure to get Low Fat!) - Eggs - Bread

As you can see, not what was intended! You must use tags like to indicate where paragraphs begin and end.

Next... Basic HTML Tags

Additional Reading

For more in-dept reading on this content, try the following:

HTML and XHTML: Tutorial 1
WikiBooks: HTML Programming