Tutorial 2 – Create Your First Webpage

While we primarily work in the WordPress CMS (Content Management System), I feel it would be beneficial to understand the steps that go into building a webpage or website. What better way to do that than to teach you how it’s done so lets get started!

What you will need:

  • A web browser
  • Notepad (or a similar text editor)
  • Dreamweaver (optional)

Let’s start with something simple. How about a page that says: “This is my first website”.

HTML is simple and logical. The browser reads HTML like you read English: from the top down and from left to right. Thus, a simple HTML document begins with what should come first and ends with what should come last.

The first thing you need to do is to tell the browser that you will “talk” to it in the language HTML. This is done with the tag
<html> (no surprises there). So before you do anything else type “<html>” in the first line of your document in Notepad.

As you may recall from the previous lessons, <html> is an opening tag and must be closed with a closing tag when you are finished typing HTML. So to make sure you don’t forget the HTML close tag now type “</html>” a couple of lines down and write the rest of the document between <html> and </html>.

The next thing your document needs is a “head”, which provides information about your document, and a “body”, which is the content of the document. Since HTML is nothing if not logical, the head (<head> and </head>) is on top of the body (<body> and </body>).

Your document should now look like this:


Note how we structured the tags with new lines (using the Enter key) as well as indents (using the Tab key). In principle, it does not matter how you structure your HTML document. But to help you, and others reading your coding, to keep an overview, it is strongly recommended that you structure your HTML in a neat way with line breaks and indents, like the above example.

If your document looks like the above example, you have made your first weppage/website – a particularly boring one and probably not what you imagined when you started this tutorial but still a website nonetheless. What you have made is the basic template for all of your future HTML documents.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *