Welcome to the Wigwam Web Services free HTML Tutorial

How to write web site code

Lesson 1 - Getting Started

What is HTML?

HTML (Hyper Text Markup Language) is the language used to create web sites. It is read by all browsers and it is what dictates the positioning and appearance of text and graphics on a web page

Before you get started you need to have some server space and a domain name. If you do not already have one you can get cheap web site hosting here.

Next you need a text editor to write your code into. Most computers come with a built in editor called notepad. I have used a more sophisticated one called UltraEdit for more than ten years now because it is easy to use and saves me a lot of time, but there are many text editors available and they all do the job.

OK I know you are keen to get started, so open your text editor and type the following:

<html>
<head>
</head>
<body>
My First Web Page
</body>
</html>

Now save the document on your desktop as index.html

Click on the desktop link and your browser should automatically open and you will see your first web page displayed there.

Congratulations! - If you have typed everything correctly you will see the words "My First Web Page" in the top left hand corner of the page

OK let's look in more detail at what you have done. The elements between the < and > symbols are called tags

The fist tag (<html>) is the html opening tag, which tells the server that what follows is html code. The last tag is the html closing tag (</html>) which tells the server that there is no more html code

All tags have to be opened and closed. The tags you have used here all have separate opening and closing tags but some tags can be self closing. For example if you use the tag <br /> , which creates a line break, it opens and closes itself with only one command (the '/' at the end of the tag is the closing part.). Here is a lsit of all the html tags and what they do.

The next set of tags are the head tags. You have nothing between them at the moment, but anything that goes between the head tags is information for the server or search engine robots rather than actual page content. This will include guidance for search engine robots, location of css files, page title, description, etc. and you will learn about these later

After the head tags you have the body tags. Everything between the body tags is the content that you display on the page body (hence the name of the tag)

Now let's give your page a title. This will go between your head tags and cah be read by the visitor (at the top of the screen) and by search engines

Just add the folllowing line between your head tags:

Take another look at the page now and you will see the title is displayed right at the top of your screen.

Now we will add more content to your page. Change your code to look like this:

<html>
<head>
<title>My Web Site</title>
</head>
<body>
<h1>My First Web Page</h1>
<p>This is the first paragraph on my web site. I can insert any text here</p>
</body>
</html>

Save it and have a look at the result

You have introduced two new elements here. The <h1> tag which defines headings (You can have up to six different headings <h1> to <h6> ) and the <p> tag which defines paragraphs. Experiment by adding another heading with an <h3> tag and add more text in another paragraph tag and see what happens to your page - don't forget to close all of your tags.