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:

<html>
 <head></head>
 <body></body>
</html>

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.

Tutorial 1 – Using HTML Tags

web

First things first…

What are HTML tags?

Tags are labels that you use to mark up the begining and the end of an element.

All tags have the same format: they begin with a “<” and end with a “>”
(yes… same as math class greater than and less than)

Generally, there are two kinds of tags – opening tags: and closing tags: . The only difference between an opening tag and a closing tag is the forward slash “/”. You label content by putting it between an opening tag and a closing tag.

HTML Revolves around elements if you can learn to use these elements, tags in particular then you’re halfway to becoming a web designer. Not a good one but we’ll help get you there.

Examples of HTML Tags

(You’re actually looking at one right now)

It’s called the heading tag. I used the h5 tag in the above example. The code itself looks like this

<h5>Examples of HTML Tags</h5>

The elements h1, h2, h3, h4, h5 and h6 are used to make headings, h1 is the first level and normally the largest text, h2 is the second level and normally slightly smaller text, and h6 is the sixth and last in the list and normally the smallest text.

For more tags and their usage click here and click the “Common HTML Code” tab

More Examples

This is a heading

<h1>This is a heading</h1>

This is a subheading

<h2>This is a subheading</h2>