• HTML or HyperText Markup Language is a set of tags added to text that give instructions regarding the display and structure of the text
  • HTML is just a text file
  • Web pages are HTML documents
  • HTML documents can be created and edited in any text editor such as notepad in windows
  • Tags start with an open angle bracket “<” and end with a closed angle bracket “>”
  • Generally there is a start tag and an end tag. One to start the change in text style and one to end it.
  • HTML files end with file extension .htm or .html. Which extension you use is up to you and makes no difference.
  • Generally browsers such as Internet Explorer or Firefox are used to view HTML files

Editing HTML files

To edit an HTML file you will need a text editor such as notepad. Don’t use Word or any other fancy word processor as you want the text to remain free of any hidden characters and tags such software packages often add to a text file.

Notepad is the simplest editor, but there are hundreds of editors out there including WYSIWYG (What You See Is What You Get) editors such as Dreamweaver (expensive) and Nvu (free). For now it is best to stick to a simple text editor.

First web page

Start a new file. Save this file as test.htm. Now we need to add some basic tags that tell the browser a little about the file. Add the following lines to the text file:

<html>

<head>

<title>

Test File

</title>

</head>

What are the tags telling the browser?

<html> – HTML starts here

<head> – Start header tags such as the page title. Header tags are not visible, but provide important information for the browser

<title> – The title of the page starts here 

Test File – This is the wording for the title. It can say anything you like but make it relevant to what ever the page is about. This will show up in the bar at the top of your browser window.

</title> – End the title wording

</head> – End the header tags

Now that we have told the browser a little about the page, we can begin to add the body text. Add the following to your HTML file:<body>

Hello World!

</body>

</html>

As you can see the body starts with the <body> tag. The body area is what is to be shown in the browser. What do they mean? 

<body> – Start the viewable page text. Tags will still be hidden but will effect the look and layout of the text

Hello World! – Sample body text. This will be shown by the browser.

</body> – End the body of this HTML page.

</html> – End the HTML document

Save it and view it in your browser. Hello World!

HTML Tags

There are many tags but below are a few of the most common.

<p></p>

Paragraph. This defines a paragraph. Anything inside this tag is part of the same paragraph. Ex: <p>Hello World!</p>

<br />

Line break. This tag does not have a closing tag. It creates a line break on the page.

<b></b>

Bold. This tags makes text bold.

<i></i>

Italic. This tag makes text italic.

<h1></h1>

Header 1. This is used to define the main header of a page.

<h2></h2>

Header 2, 3, 4, 5, 6. This tag as well as h3, h4, h5, h6 all define sub headers.

Putting it together

<html>

    <head>

        <title>Test File</title>

    </head>

    <body>

        <h1>Hello World!</h1>

        <p>This is a website. A simple one but it counts.</p>

        <p>Lets try <b>bold</b></p>

        <p>Lets try <i>italic</i></p>

    </body>

</html>

So what’s next?

Outlined above are the very basics of HTML. If you want to know more, the next thing to look into are CSS (Cascading Style Sheet) and probably tables.