HTML 101 for Beginners – Part 1 – HTML Tags

Posted Oct 25 2009 by Ken in Web Design with 0 Comments

HTML for Beginners

HTML 101: HTML Tags

Hello everyone! So far I have only talked about search engine optimization so I thought I would take a moment and talk about web design. I could write the world’s longest blog post ever and cover all of the elements of Beginner’s HTML but who would read through all of that? More importantly, I don’t have a month of free time on my schedule to write that.

Conclusion: I will create a series of posts which we will call HTML 101 for Beginners. This will be geared towards those who have never written a line of code or even know what code is. In this series we will create a simple website from scratch utilizing HTML and CSS.

Here is the completed project we will be building. Click the image to see a larger view. Let’s get started.

large_screenshot

What is HTML?

HTML is an acronym for Hyper Text Markup Language. I don’t want to dive too deep into exactly what it is but you can learn more about this by visiting the W3C. The main thing to understand is exactly what HTML does. Think of them as markup tags that describe how the web page will look when displayed on the Internet

HTML Tags

There are lots of tags that help define the structure of web pages. We will focus on the basic fundamental tags for this lesson. Those tags are:

  • <html>
  • <body>
  • <h1>, <h2>, <h3>
  • <p>

Let’s take a look at those tags and explain what they mean.

  • <html> is the tag that is used to describe the page. We will get into page declarations in a later lesson
  • <body> is the tag where all visible content you see on the web page is contained
  • <h> tags are header tags. You can think of them as headlines in a newspaper
  • <p> tags are indicate paragraphs

Enough Messing Around, Let’s Design a Page!

The structure of a web page is as follows:

  • <html>
  • <body>
  • <h1></h1>
  • <p></p>
  • </body>
  • </html>

So you start a page with the <html> tag.

Then you create the <body> tag.

Provide the information you want to show with the <h> tags and the <p>tags.

Close the <body> tag.

Close the <html> tag.

Piece of cake! Right?

So now open up any text editor. An example would be Notepad on a PC or TextEdit on the Mac

Enter the following lines of code or copy and paste into your text editor.

<html>
<body>
<h1>Welcome to My Very First Web Design</h1>
<h2>What to Expect?</h2>
<p>Don’t expect a lot since this is my very first web design. But rest assured my friend that this is the beginning of something big. Rome wasn’t built in a day and this website won’t be either. Why bring that up? I’m not really sure but it sounds cool.</p>
</body>
</html>

html_example_small

Save the file as plain text and make sure the extension is .html. Just name it test.html or something similar and save it to your desktop.

Open the page in your favorite web browser and you should have something that looks like this. Click on the image to make it larger If not, repeat the above steps and make sure to follow directions this time. If you do, congratulations! You’ve just created your first web page.

Conclusions

HTML is simply a markup tool which is used to structure a web page and communicate it to the Internet in order to be displayed properly.

Next lesson we will cover how to insert links and images into your web page. Make sure to subscribe to our RSS feed so you can get all of the lessons.

Comments or Suggestions

To a lot of folks this is very basic information but I want to help those just getting started. Did you find this informational useful? If so, tell your friends, leave us a comment and let us know how we are doing. Did you think this was a complete waste of your web surfing time? If so, let us know as well. We leave comments.

Lesson 2 – HTML Links
Lesson 3 – HTML Navigation List
Lesson 4 – HTML Div Tags

Category: Web Design

Leave a Reply

Subscribe

Our Categories