Lesson 2

Web Design

Week 2: Your First Web Page

After this week’s lesson, you will be able to write your very first Web page! Part of this lesson actually gives you step-by-step directions to write your Web page. I would strongly recommend that you first read this page through from start to finish, taking good notes and making sure that you fully understand the information presented. Then, read it through a second time, creating your Web page as you go. Before we start creating the page, though, we need to introduce the core element of the HTML language, tags.

Tags

All tag formats are the same. They begin with a less-than sign: < and end with a greater-than sign: >. What goes inside the < and > is the tag. Learning HTML is really learning to use tags to get them to do whatever you would like to do to your Web page. Here's an example:

The tag for bold lettering is "B". Here's how you would use tags to turn the word "Hi" bold:

Hi

Look At What's Happening:

is the “beginning bold tag”.
"Hi" is the word being affected by the tag.
is the “end bold tag”. It tells your Web browser to stop making the text bold after the end of this word. Notice it is exactly the same as the beginning tag except there is a slash in front of the tag command.
This is what the bold tags above produced: Hi Nice, huh?

Some Commonly Asked Questions

Q. Is the end tag for other commands simply the begin tag with the added slash?
A. Yes, always.

Q. Will the tags show up on my page?
A. No. As long as your commands are inside the < and > marks, the tags are hidden from anyone who views your Web page.

Q. Your bold tag uses a capital "B". Do all HTML tags use a capital letter?
A. This is a good question. You can use either uppercase or lowercase letters for your tags. However, I think it’s a very good idea for you to make a habit of writing your tags in capital letters. It makes them much easier to pick out later when you need to revisit your code to change it (which happens often in Web design).

Q. Must everything have a tag to show up on the page?
A. No. If you just type in text, it'll show up. But it will not have any special look.

Q. What if I forget to add the end tag or forget to add the slash to the end tag command?
A. This is another good question. If you make a mistake creating your tags, your Web page will contain some errors, but they will be easy to fix. If your Web page doesn’t look right, simply go back into the HTML document, find the errors, correct them, and view the document in the browser. Mistakes will happen; even the best Web designers make them frequently. Part of being a good web designer is being able to go into HTML code, identify errors, and correct them.

Q. Do all HTML tags require both a begin and end tag, like above?
A. No. There are a few exceptions to the rule (which we will introduce later in this lesson), but let's stay on the ones that do require both tags to work for now.

Our First Tags

Most HTML tags do require both a begin and end tag. Most are very easy to understand. Here are the first ones that we will learn:

Effect	Code	Code Used	What It Does
Bold	B	<B>Bold</B>	Bold
Italic	I	<I>Italic</I>	Italic
Underline	U	<U>Underline</U>	Underline

So…

Hi there! gives you: Hi there!
Hi there! gives you: Hi there!
Hi there! gives you: Hi there!

You can use two or more tags at once, as long as you make sure to begin and end both. Like so:

Bold and Italic gives you Bold and Italic
Bold, Italic and Underline gives you Bold, Italic and Underline

If you do use multiple tags, make a point of placing the end tags in the proper order. If you look at the Bold, Italic and Underline example above, you’ll notice that the first end-tag is , since it was the last start-tag placed. Here is an example of tags that are out of order:

Out of Order

What would you do to fix this? Right, you could switch the and end tags. It would then look like this:

Out of Order

See the difference?

Single Tags

The open and close tag format dominates the majority of the available HTML tags, but there are a few tags that stand alone. Here are three that you will probably use a lot.

Tag	What It Does
<BR>	This BReaks the text and starts it again on the next line. It’s like hitting the “Enter” key on your computer when typing text.
<P>	This stands for Paragraph. It does the exact same thing as <BR> except this tag skips a line. BR just jumps to the next line, P skips a line before starting the text again.
<HR>	This command gives you a line across the page. (HR stands for Horizontal Rule.) The line right just below this chart was made using an <HR> tag.

I know that there is a lot of new information here, and maybe you aren’t perfectly clear on how these tags work. I think that things will start to make sense now as we create our first Web page.

Basic Web Page Structure

We are almost ready to write our first Web page. But first we need to talk a little bit about the structure of a Web page.

Here is the basic structure of an HTML Web page:

<HTML>

<HEAD>
<TITLE>Place your title here</TITLE>
</HEAD>

<BODY>
This is where you place your HTML code
</BODY>

</HTML>

Let’s talk about this structure a little bit:

We will start every page we write with the <HTML> tag and we'll end every page with the </HTML> tag. The <HTML> tag tells your browser that this is the start of an HTML document. Likewise, the </HTML> tag tells your browser that the HTML document is now ending.

HTML pages have two basic parts, the head and the body. Therefore, you will notice the <HEAD>…</HEAD> and <BODY>…</BODY> tags.

For now, the only thing that we will place within the <HEAD>…</HEAD> tags is the title of the page. Notice at the very top of this page in the title bar, it says Web Design: Week 2 Lesson. Whatever you place within the <TITLE>…</TITLE> tags will show up in this title bar.

Within the <BODY>…</BODY> tags, we will put the text that will be displayed in your browser.

Page 2

Lessons