An Introduction to HTML

HTML ( HyperText Markup Language), is a mark-up languages used to encode Web pages.

 It provides the web browser with information for laying out and presenting the web page.

Although many sites selling point and click websites will tell you that you don't need to understand HTML, the truth is that you don't need to be an expert but you do need to have a grasp of the basics.

Before we begin here is a web page when viewed in a web browser

 and here is the same page when viewed in notepad.

The job of the web browser is to use the html code to format the page. So the web browser doesn't display <h1> but uses that to create a headline.

If you look at the page when displayed in notepad. Notepad doesn't understand html coding as so just displays it as it is.

HTML Tags

The main thing to notice about HTML is the tags. Tags come in pairs and opening tag and a closing one. So for a headline you will see the opening headline tag the headline and the closing headline tag.

So the Rule to remember is simple all tags have an opening and closing tag the closing tag is the same as the opening but with a forward slash (/). <h1> is the opening and </h1> the closing headline tag.

With that simple rule in mind spot the mistake in the following html code

Note correct code is at the bottom of the page. If you managed to spot those errors then you have 80% of the HTML knowledge that you will need.

So to get a bit more practise create a page in notepad and type in the above text and save it as test.htm not test.txt- Why the .htm extension ?-Answer at the bottom of the page text.

Open the page in Internet explorer and see how it displays then correct it using the answer and save it and then see how it displays.

White Space- A Special Note

If you hit the space bar you create a space. When you create an html page e.g. using notepad then hitting the spacebar several times will create several spaces. however when viewed in a web browser you will only see a single space.

Here is the page in notepad

here it is displayed in a browser

So what happens if you really want several spaces? Then you need to enter the html code  &nbsp;

However as you don't normally create/edit pages in html but instead you will normally use a WYSIWYG editor like Trellian you will not need to worry about adding this manually as the editor takes care of it. I only mention it because you may find it confusing

Web Page Editors

The reason you don't need a really deep knowledge of html is that web page editors take care of the coding for you 99% of the time. Many new website owners have heard of Dreamweaver or Microsoft FrontPage (now Expression Web) and may even have considered purchasing them or going on a course.

For 99% of you it is probably a complete waste of time and money. These are developer tools so are you going to produce sites for others? or are you going to be creating a small 5-10 page business/personal/hobby site.

If you intend becoming a professional developer then you will need eventually to purchase one of these tools otherwise don't bother.

My recommended web page editor is Trellian web page because it is free, powerful and relatively easy to use. You can download it here.

Video

Answers

The code below is correct you can experiment by putting the closing tags in different places and see the results.

File Extensions

File extensions are used on Microsoft operating systems i.e. Windows to associate a file with an application a .doc extensions associates the file with Microsoft Word, a .txt with Notepad a .htm with Internet Explorer.

The operating system will try to open a file with its associated program. Therefore by saving it as test.htm when you click it to open it it will be opened with Internet explorer (or Firefox).

How do you edit it? Just right click it and choose open with and the select Notepad.