Introduction to HTML

by

I recently wrote two posts regarding designing Web sites: Designing Web Pages: Tables or CSS and Introduction to Cascading Stylesheets (CSS). The information presented in both of those articles may be advanced for those just starting out with creating Web pages.

I decided to create this post to provide an introduction to HTML and create a Web page. This post will create a very simple Web page that you can then display in a Web browser.

What is HTML?

Everyone who is online has heard of HTML, but may not know exactly what it is or how it is used on the Internet. HTML is an acronym for HyperText Markup Language. It is the primary language of Web pages. It is not a programming language, such as C or Visual Basic, as it is not compiled into a program. It is simply a markup language.

A markup language is used to display text and other information about the text. The other information about the text can include anything from size, font to weight and position. For examples of the different ways the text can be changed simply look at this blog and you’ll notice how the text can be changed.

Other elements can also be included in a HTML document such as images, sounds, and videos. For the purpose of this post, we’ll keep it simple and focus on the text of a Web page.

How can you control the look of the text on a Web page? Through the use of what are known as tags.

HTML Tags

HTML uses tags to define areas of a Web page. Tags usually come in pairs: an opening and closing tag. The tags change anything that is placed between them. There are many standard tags that make up the HTML language, and as you make Web pages you will begin to known and understand each tag.

As mentioned, a tag pairing contains both an opening and closing tag. For example, to apply bold to text you will use the tag pair: <b> </b>. You will notice that the closing tag contains a / (slash) character. This is standard for all closing tags. Any text placed between those two bold tags will appear bold within a Web browser.

The bold tag is just one of many standard tags used to create a HTML Web page. It is beyond the scope of this post to list them all, but you will see other tags in the example below.

Create a Simple Web Page

Now that you have a basic understanding of what HTML is, it is time now for an example. For this example you will need a simple text editor, such as Windows Notepad. The editor doesn’t matter, so use whatever you are comfortable with.

  1. Create new directory somewhere on your hard drive called htmlex. We will save the HTML file in this directory.
  2. Open up your text editor.
  3. Copy (or type) the following into the editor:
    <html>
    <head>
    </head>
    <body>
    <p>Hello world!</p>
    </body>
    </html>
  4. Save the file to the directory created in step 1. Name the new file test1.htm.
  5. Open up Windows Explorer and navigate to the directory contain your HTML file.
  6. Double-click the test1.htm file to open it up in your preferred Web browser.

    7. You should now see the message Hello world! in your browser. Congratulations! You just created a Web page.

What exactly are the tags in your HTML document? Lets take a look at what comprises the Web page.

Elements of the Web Page

In the example above you will notice a series of tags. The first tag in the Web page is the html tag. This tells the browser that the markup language is HTML and your entire Web page will be located within this tag.

The next tag is the head tag. In our example, the head tag is empty (nothing between the opening and closing tag), but for most of Web pages such things as stylesheets, the title and meta tags are located here.

The body tag is next and contains the actual body of your Web page. What you see displayed in your Web browser is located within this tag.

The final tag in our example is the p tag, or paragraph tag. This identifies a paragraph of text. If you wish to bold the text in our example, then include the b tag pair between the p tag pair as such:

<p> <b>Hello world! </b></p>

If you do the above, save your file and refresh your Web browser window, you will now notice that the text is now bold. If you were to move the closing b tag between Hello and world you will now only see the word Hello in bold. Remember that the tags change anything that are between its opening and closing tags.

Summary

Creating Web pages using HTML is very easy too do and requires nothing more than a text editor. The HTML markup language may seem complex at first, but the more you create Web pages, the more your will learn. HTML is meant to be easy to learn and use and it can be used to apply any look to your Web site. There are many more tags you can use to create great looking Web pages than those shown in this post.

Follow Me