Introduction

In this tutorial we will build a simple homepage which is the very first page on your site.

 Materials

  • A text editor such as Notepad.
  • A browser such as Firefox, Internet Explorer or Safari.
  • An FTP client such as Filezilla:
    http://filezilla-project.org/download.php
    FTP Client: File Transfer Protocol Client
    This is a programme used to transfer files to and from a web server.

Basic Concept

The web is made up of simple text files called HTML documents.

What is HTML?

HTML stands for Hypertext Markup Language. It is the language of the World Wide Web. It is not so much a programming language, but a tag based markup language. That means that it holds the text you see on a page and uses tags to describe the usage of the text.

A basic page would look something like the following:

<html>
<body>
<p>Hello World</p>
</body>
</html>

Note how it uses pairs of tags to start the HTML page and end it. It also has a pair of body tags in which the content of the page goes. The actual content is wrapped in special tags too. In this case, <p> is used which tells the browser that the text is a paragraph.

HTML documents mostly end in .htm or .html.

Practical

Open up your text editor. The first thing we need to do is establish that this is an HTML document by starting with the <html> tag at the very top. This tells the browser that it needs to render (draw) this page as a web page.

After that we tell the browser that we are starting the body of content that is to be shown on the page. We use the <body> tag for this.

Now we can add content. In this case we just want to write your name on the page so write your name. Content needs to be embedded with a tag that defines its role. In this case, your name would be a very short paragraph so it needs to be preceded by the <p> for paragraph tag.

Most tags have a start tag and an end tag. The <p> tag tells us when the paragraph starts. A </p> would define the end of the tag. Note how the forward slash has been added to the tag to tell us that we have reached the end of the tag. In conclusion, we end up with a paragraph that looks like this: <p>Your Name</p>.

As with the paragraph tag we now need to close the </body> tag and then the </html> tag. Note how tags are nested within one another and do not overlap. Closing the

Save the file as index.htm and open it in your browser. Index.htm is a standard name for a homepage. You will see your name in the browser window.

For fun try adding new paragraphs. Also try what is called a header tag above your paragraphs which looks like this: <h1>Headline</h1>. This is used for headlines.

Leave a Reply