Hello and welcome to Lesson 2! No doubt you've attempted to write a small document on your word processor and save it as TEXT for MAC or ASCII TEXT DOS or TEXT for your PC. You also remembered to save the document with the .htm or .html suffix, I'm sure. Good!, now let's move on to our next lesson, this time we will write!

HTML Tags

HTML works in a very simple, very logical, format. It reads like you do, top to bottom, left to right. That's important to remember. HTML is written with TEXT. What you use to set certain sections apart as bigger text, smaller text, bold text, underlined text, is a series of tags.

Think of tags as commands. An HTML tag is a signal to a browser that it should do something other than just throw text up on the screen. Let's say you want a line of text to be bold. You will put a tag at the exact point you want the bold lettering to start and another tag where you want the bold lettering to stop. If you want just a word to be italic, you will place a start italic tag at the beginning of the word and an end italic tag at the end of the word. Is this making sense so far?

Tag Format

All tag (I sometimes call them command) formats are the same. They begin with a less-than sign: < and end with a greater-than sign: >. Always. No exceptions. What goes inside the < and > is the tag. Learning HTML is learning the tag to perform whatever command you want to do. Here's an example:

The tag for bold lettering is "B". That makes sense.

Here's what the tags look like to turn the word "Milo" bold:

<B>MILO</B>

Look At What's Happening:

1. <B> is the beginning bold tag.
2. "Milo" is the word being affected by the <B> tag.
3. </B> is the end bold tag. Notice it is exactly the same as the beginning tag except there is a slash in front of the tag command.
4. This is what the bold tags above produced: Milo Nice, huh?

Some Questions

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

Q. Will the tags show up on my page?
A. No. As long as your commands are inside the < and > marks, the tag is used to alter the text, but the actual code is hidden from the viewer.

Q. Your bold tag uses a capital "B". Do all HTML tags use a capital letter?
A. The browser doesn't care. In terms of tags, capitals and lowercase letters are equal. But I think it would be a very good idea for you to make a habit of writing your tags in capital letters as it sets them apart from the normal text. It also makes them easier to pick out later when you are revisiting the code.

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. That's trouble, but easy-to-fix trouble. It will be obvious if you've not placed an end tag when you look at the document in your browser. The entire document will be affected after the point where you forgot the end tag. Just go back into the document, add the slash, and reload the document into the browser.

Q. Do all HTML tags require both a begin and end tag, like above?
A. No. There are exceptions to the rule, but let's stay on the ones that do require both tags to work for now. Moving along...

Open and Close Tags

The majority of HTML tags do require both an open and a close tag (a begin and end tag). Most are very easy to understand because the tag is obvious. Here are a few and what they do to text:

Can I Use Two Tags at Once?

Yes. Just make sure to begin and end both. Like so:

<B><I>Bold and Italic</I></B> gives you Bold and Italic

<B><TT>Typewriter and Bold</TT></B> gives you Typewriter and Bold

     If you do use multiple tags to alter text, make a point of not getting the end tags out of order. Look at this:

     In terms of format, the example above is not correct. The end tags are out of order in relation to the start tags.

Follow this rule:
Always set the beginning and end tags at the same time, always placing them on the farthest end of the item being affected.

Here, again, is the example above in correct form:

     Notice the Bold tags are on the far ends. Next in line are the Italics and finally the Typewriter Text tags are closest to the affected text. Just keep setting commands at the farthest ends each time you add them and you'll stay in good form.

Single Tags

The open and close tag format dominates the majority of the available HTML tags, but there are tags that stand alone. Here are three I use extensively:

Writing Your First Page

So, here we go... you're going to write your first HTML page using what you have learned above plus the basic page formatting items. And these items are important to every page you will ever write. Why? Because they will be on every page you ever write.

BASIC PAGE FORMATTING

All HTML pages are formatted using specific tags that indicate the page's nature, its head section, body section, and title. The tags you must always use on a standard HTML pages are as follows:

You will start every page with this tag: <HTML>
     That makes sense. You are denoting that this is an HTML document.

You next tag will be this: <HEAD>
      Here you are going to include your header information such as titles, special commands, and script data.

Your next tags will always be these: <TITLE> and </TITLE>
     See the very top of this page? I mean way up top. Above the FILE -- EDIT -- VIEW menus. The colored bar up there. Right now it reads "Writing HTML - Lesson 2" That's the title of the page and that's what you are denoting here. Whatever you put between these two tags will show up in the title bar way at the top.

You next tag will be to close your header: </HEAD>

Your next tags will always be these: <BODY>..... </BODY>
      Whatever goes in between these tags is going to appear in the visible field of your web browser.

Finally, you'll end every page you write with this tag: </HTML>
     Get it? You started the page with HTML and you will end the page with /HTML. That makes sense again.

So, Here We Go!

I want you to play around with these commands. Just remember that HTML reads like you do, top to bottom, left to right. It will respond where you place the start tag and stop where you place the end tag. Just make sure your tags are within the < and > items.

Here's a sample page to show you what I mean for you to do tonight:

<HEAD>

<TITLE> My first HTML page </TITLE>

</HEAD>

<BODY>

<B>This is my first HTML page!</B><P>

I can write in <I>Italic</I> or <B>Bold</B><BR>

<HR>

<B><I>Or I can write in both</I></B><BR>

<HR>

<TT>...and that's all</TT>

</BODY>

</HTML>

Now, click here to see the page the code above produced.

EXERCISE 2 

Look at the program above and then what it produced. Look at the source code when you open the page. See how the HTML tags denoted where text was affected? Good! I knew you would. Now go! Go into the world -- or at least to your text editor -- open the file that you have created in the last exercise (exercise 1) and play with the tags that you have learned in this lesson. Follow the instructions in Lesson #1 to help you save and then view your first HTML page in your browser. Please save your work in a floppy disk (name it aboutme.html) and submit next meeting.