Building Your First Webpage: A Guide to HTML

Introduction

Many people wonder how to get started building their first webpage. I decided to learn how to do this, and picked up a book on HTML, the basic programming language used in web design. I'm still far from mastery, but I was shocked to find how much easier HTML is compared to my original expectations. For those of you out there who are clueless like me, here's something to help get you started based on what I've learned so far.

Learning the Basics

Terms to know:

HTML (HyperText Markup Language)

Web Browser

Tags

Tools You Need:

Notepad

Basic Information

HTML, as you may already know, is the basic building block of a website. It is the structural code that tells a Web Browser like Internet Explorer, Firefox, or Google Chrome what to display, and how to display it. HTML is the nuts and bolts that allow the text, pictures, links, and videos on your website to be visible to everyone else on the web.

Tags

HTML works by using tags. A tag is a character with an assigned function in HTML code, enclosed within the angle brackets “<” and “>”. For now, the ones you need to know are-

<html> - This tells the browser that everything written after this tag is HTML code

<body> - Everything written after this tag is displayed by the browser

<h1> - Denotes a heading

<h2> - Denotes a sub-heading

<p> - Denotes a paragraph of text

Each tag is followed by a closing tag at the end it's contents, which tells the browser where each function ends. Closing tags are the same as regular tags, but contain a “/” before the tag to show the end of the structure. Like this-

</html>

</body>

</h1>

</h2>

</p>

And so on.

Instructions

1- Open Notepad (Start->Programs->Accessories->Notepad), and begin typing.

2- Start with the <html> tag at the top of the page, then hit the ENTER key to drop down to the next line.

3- Indent two spaces, then add the <body> tag. Hit ENTER and drop down another line.

4- Indent four spaces, and add the <h1> tag. This will be the header for your page, so choose a name you like. Follow the text with the </h1> closing tag, then move down another line.

5- Indent six spaces. Next, use the <p> and </p> tags to write a bit of text. It doesn't have to be long, just put something as a place holder for now. Move down another line.

6- Indent four spaces. Type <h2>, then add a sub-heading. Close with </h2>, and move down a line.

7- Indent six spaces, then add another bit of text like before, using the <p> tag. Close with </p>, and move down a line.

8- Indent two spaces, and type the </body> closing tag. This marks the end of what will be displayed on the web page by the browser. Move down one more line.

9- Type </html>. This marks the end of the program. Save your file with the file ending “.html”, and then open it in your browser.

If you've done it all correctly, it should look like this:

In Notepad:

It should be worth noting that it is not required to add spaces or indents to your HTML code. It is done here merely to keep everything neat and organized, and to make it easier to find mistakes. However, the string of HTML could be on long, unbroken chain, and would work just fine.


Now, try opening your Notepad file through a web browser. Right-click the file, choose "open with", and select the browser of your choice. It may look slightly different in some browsers, but yours should come out looking something like this:

In a Browser

Your First Webpage

Congratulations! You've created your first webpage!

Granted, this will not hold up when compared to most if not all of the other professional websites on the internet, but it is a start. Hopefully now you feel confident or at least curious enough to pursue learning more HTML, or other tools for web development like Java or CSS. There are plenty of guides out there, and learning this new and exciting skill can be a lot easier than you think if you are willing to put in the time.

More by this Author


Comments 1 comment

TheWinKing profile image

TheWinKing 4 years ago from South Africa

Short, sweet, and spot-on. Nicely hubbed :)

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working