HTML Basics

Today we learn the basics of HTML. Anyone can create a webpage, but we are going to learn how to design an excellent site. There are only two tools required to design and view a webpage. First, you need a text editor. This can be as simple as Notepad, which comes with Windows, or any word processor (I suggest using Notepad). Second, you need a web browser so you can view your webpage. What is HTML anyways? HTML, or HyperText Markup Language is the programming language of webpages. HTML is a text language, meaning that it contains only characters you would find on a typical keyboard, not any weird programming characters. Also, it is Plain Text, meaning that it has no bold characters or fonts or colors. Every homepage is really just a bunch of HTML text. This HTML text or code gives your browser instuctions on how to display things in your browser window, such as what to display, where to put graphics, what color to make the text, and where links should take you.

This HTML code, which is just a bunch of text, is the basis for every homepage on the Internet. Don't believe me? Click on View in your browser's menu, then Source or Page Source to see the HTML that programs this webpage, but be sure to close the window and return here. Yikes, looks pretty scary doesn't it? The code may look very confusing, but the best thing about HTML is that it is VERY EASY TO LEARN. Repeat that with me, "HTML IS EASY TO LEARN!" Ok, let's learn it!!

Now, you might be wondering, "Why do I need to learn a programming language just to make a webpage?" Good question! Well, you don't!! There are several software programs that will create the underlying code for a webpage for you. However, if you want to design great webpages that you have absolute control over, then learning HTML is the only way to go. I guarantee, you will thank me later on!

The skeleton, or framework of any HTML page is below. Remember, your browser will read this HTML code, interpret it, then use it to display a webpage

Each of the words above is called an HTML tag. A tag is what defines something to your web browser and tags do not display in your browser window, but are really what make up the page. Just view the source of this page and find these tags (View...Page Source). All tags have a < and a >, called opening and closing brackets. The < tells the browser that a tag is starting and not to display it to the viewer. The > tells the browser that the tag is ending and it can display stuff again. There are two basic types of tags, opening and closing. Closing tags have a / after the first <, opening tags do not. Most HTML tags must must have a beginning <tag> and an ending </tag>, like each of the tags above do. See how there are three sets of opening tags (<HEAD>) and closing tags (</HEAD>). Any text located between matching opening and a closing tags will be affected by that tag. In the example above, anything between the <BODY> opening tag and the </BODY> closing tag will be affected by this set of tags. It is much like using different color highlighter pens to mark something you are reading. Each color will designate something with a different meaning. Tags do virtually the same thing. No wonder it is called a Markup language!

There are many HTML tags that we will learn, but the ones above are the most important. The <HTML> tag tells your browser that it will be viewing an HTML document or a webpage. The <HEAD> tag tells the browser that what follows is part of the head section of the document. More about this part of the document in a minute. The </HEAD> tag tells the browser that the head section is ending (remember the / means 'closing tag'). <BODY> indicates the beginning of the body section. This section contains what will actually be displayed in the browser window. The </BODY> indicates the end of the body section and the </HTML> indicates the end of the HTML document or webpage. Pretty easy, eh?

Your First Webpage

It is now time for you to create your first webpage. Scared? Don't be. See the six tags listed below? They would make a webpage. Yep! Well, they would make a very simple, and boring webpage, but they are still a webpage. Let's go ahead and make it for ourselves. To make a webpage, you need a text editor. I suggest using NotePad, which comes with Windows. Just click on Start...Programs...Accessories....NotePad. If you are using a Mac, use any text editor - the simpler, the better. Now, enter in the following tags, exactly as they appear here:

Before we go on, let's talk some terminology. When I mention HTML document or HTML source, I am talking about all of the tags and code that you write. When I mention web page, I am referring to what you see in the browser after it interprets that code. They are both really the same document, but the HTML is the code and the web page is the results of that code once the browser does something with it. Got it? OK, let's move on.

You have just created your first webpage - really just an HTML document right now. Now, let's take a look at it in a web browser. We must first save it. In NotePad, click on File...Save. Choose a destination to save your page and save it as 'first.html'. Remember the period before the html part. The .html part tells your computer that it is a webpage, rather than a normal text document. You may need to tell programs other than Notepad to save it as a Plain Text Document. Now, in the browser you are using to view this lesson, click on File...New...Window to open a new browser window. You can now go back and forth between your webpage and this lesson. These tutorials will focus on Internet Explorer and Netscape Navigator, but you can use any browser you want. In your new browser window, click on File...Open. Browse to where you saved your html document and select and open it. Tada!! If you followed these directions, you should now be viewing your first webpage - a blank, white browser window. Oh, I'm sooo proud!

Why is it so boring? Well, we haven't given it anything to display. But, if all went well, your browser recognized it as a webpage and opened it. You can even view your HTML source, by clicking on View...Page Source. It displays exactly what you entered into NotePad. Although the tags in our HTML document are UPPERCASE, they do not have to be, but I suggest making them upper case so they stand out.

Next, let's give your browser something to display other than a white screen. You can add a title to your page by using the <TITLE> tag. The title is what displays in the blue bar across the very top of your browser window. This one says, "Beginning Web Design - Week 1". The TITLE tag is placed between the <HEAD> tag and the </HEAD> tag of your HTML document. The head section is used for giving directions to the browser - things that won't show up in the main browser window. The title is entered like this:

<HTML>
<HEAD>
<TITLE>THIS IS WHERE YOU TYPE YOUR TITLE</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Go ahead and enter the new line to your existing HTML document in NotePad. Make sure it is in the correct place and that the tags (anything between < and >) are typed correctly. Enter anything between the title tags that you would like. Remember the / in the closing </TITLE> tag. To see the changes to your webpage when you make them do the following:
1. Save the HTML document in NotePad (File...Save).
2. Click on the Reload button in the browser window that is displaying your web page to reload the HTML document with the changes OR you can reopen it.
You will have to do this every time you make changes in your HTML - save and then reload.

Go ahead and do this now to see the title of your webpage.

Nesting tags

We are going to start learning a lot of HTML tags, but there is something that you must understand first - nesting. You can place tags within other tags, but they must be properly nested or placed. There should be no lone tags left within another tag. Most tags have an opening tag and a closing tag. The closing tags must appear in the reverse order that the opening tags were listed or a lone, single opening or closing tag will appear within another set of tags. Here's an better explanation:

Proper Nesting -
<TAG1> <TAG2> </TAG2> </TAG1> See how TAG2 is completely surrounded by TAG1.

Improper Nesting
<TAG1> <TAG2> </TAG1> </TAG2> Notice that there is a loner tag between both sets of tags.

Spacing

To add text to our webpage, we need to enter it into the body section of our HTML document (between the <BODY> and the </BODY> tags). To properly insert text in our webpage, use the <P> tag. The <P> tag stands for paragraph and inserts a blank line above and below the text that follows it. It does not indent. This paragraph that you are reading right now begins with a <P> tag in its HTML source. The text wraps according to the width of the browser window it is being read in. Resize this browser window and you will see that the text will adjust to whatever size you make it. The text will always go from one margin to the other, unless you tell it to jump down to the next line with the <BR> tag. The <BR> or break tag inserts a line break - like hitting return on a typewriter. When your browser sees a <BR> in your HTML document, it knows to move to the next line in the browser window and start displaying text again.

<HTML>
<HEAD>
<TITLE>THIS IS WHERE YOU TYPE YOUR TITLE</TITLE>
</HEAD>
<BODY>
<P>Here is what text using<BR>the break tag would<BR>look like.
</BODY>
</HTML>

would display:

Here is what text using
the break tag would
look like.

Go ahead and enter the new line to your NotePad document. Save it and click on Reload in the browser window displaying your page to see your new paragraph. Now, you might see something a little weird. Notice that there is no closing <P> tag. Well, there is one and it looks like </P>, but you don't have to use it. Also, there is no closing <BR> tag. Well, there just isn't! The <BR> tag just tells the browser to go to a new line and it doesn't need to be closed. The <P> tag and the <BR> tag are not required to be closed, but you can close the </P> tag if you wish. Your browser is smart enough to know when one paragraph ends and another begins. If you want to add another paragraph, just type in a <P> tag and go for it.

Headers

You can also change the size of your text with the header tag. Headers are used for titles or section names, not for paragraphs. The tag is <Hn> where n is a number 1 - 6. The header tag works much like the <P> tag, but it changes the size of the text. The header tag must be closed with the </Hn>, where n is the same number as was in the opening header tag.

<H1> is the largest header.

<H6> is the smallest.

Go ahead and add a header to your HTML document. Just insert a new line within the body section of your document. The line might look like this:

<H1>I am a header.</H1>

Your browser will leave a blank line above and below headers.

Most HTML tags can be spruced up a little with something called attributes. Attributes assign different functions to the tags they are a part of. All attributes will also have values that tell the browser what the attribute or function is. For ease in editing, values are usually surrounded by quotation marks and are lower case. A tag that also has an attribute would be formatted like this:

Attributes are usually capitalized and their values are left lower case. This isn't required, but it helps in editing later on. Attributes and their values add a new meaning or function to normal tags. For instance, headers can also be aligned by adding an ALIGN attribute to the header tag. This attribute can have one of three values - left, right, or center. This attribute and value are used like this:

<H1 ALIGN="center">I am a centered header</H1>

This code would produce this:

I am a centered header

Notice that the header tag has an attribute and its value, but it is still closed in the same way as a normal header tag. NEVER CLOSE ATTRIBUTES, JUST THE TAG THEY ARE A PART OF. Some tags can have more than one attribute. Closing a tag will also close all of that tags attributes. By default (what will normally happen), headers are aligned to the left, so there is no point in setting the ALIGN value equal to "left". The <P> paragraph tag can also be aligned left, right, or centered in the same way - <P ALIGN="right">

That pretty much covers everything for this week. Next week, we'll review, then add colors and do further formatting of text.

Return to the Class Homepage