[Sections]

[Tags]

[Doc]

[Web Page]

[Editing]

[Headers]

[Comments]

[Review]

[Top]

[image]

Lesson 1
The HTML document

Sections in the HTML document

The HTML document has two sections, the Head and the Body. Three tags are used to define a HTML document:

<HTML> the HTML tag signifies the start of a HTML document.
<HEAD> the HEAD tag signifies the start of the HEAD section.
<BODY> the BODY tag signifies the start of the BODY section.

Yes, you have to learn some new lingo.

HTML code consists of "tags" that look like this;

<HTML>

All of the tags use the angle brackets "<" and ">" ("less than" and "greater than") and have some name or letter inside of the brackets.

BTW you can use either upper case or lower case in HTML. I'll use lower case from now on.

Here are the tags for lesson one. I'll explain their meaning in a minute.

most HTML tags also have a "closing tag"

the above list's closing tag are below.

</html>
</head>
</title>
</body>
</h2>
</ul>

<li> doesn't need a closing tag

Using HTML tags

here's an example using the title tags. I know it doesn't make sense yet, just notice how it looks.

<title>Here is my Title</title>

This designates the phrase "Here is my Title" as the title that will appear in the window bar.

It looks weird but its a matter of simply typing it out on the computer. Nothing more.

Let's continue...
OK, here what it all means. We'll put it all together right after this:

<html> this tag identifies this as a html document, all web pages (html documents are web pages) must have this tag first (or almost first).
<head> this signifies the start of a section of the html doc called the "head". This section doesn't show up in the browser but can contain info that the browser can use. In our example the head section will contain the title only.
<title> this is the name of the web page. It doesn't show up in the page itself but in the title bar of the window that holds the web page,
<body> this is the beginning of the section that shows up in the web page. Inside this section we will write the web page using the few remaining tags (there are a ton of additional tags)
<h2> this is a "header" tag. The number can be anything from 1-6. Each number will give you a different size font. The largest is number 1.
<ul> this is the "unordered list" tag that is used to create a list. It creates automatic indentation for the list items <li>.
<li> this is the "list item" tag that goes along with a list tag (there are additional list types beyond unordered lists). Each item in the list will be preceeded by the <li> tag.

There are many many more tags but these are more than enough to write a valid web page.

It's probably confusing still so here is the html document and you'll see how it is put together. This HTML document below can be viewed in your browser.

---------- HTML document ----------------------

<html>

<head>
<title>
web pages 'R us
</title>
</head>

<body>
<h2>
The Web is fabulous!!!
</h2>
Reasons I like the web
<ul>
<li>It is totally cool.
<li>It beats studying history
<li>What was the question?
</ul>
</body>

</html>

------------------------------------

First Web Page

You should copy and paste the HTML document (everything in between the dashed lines) above into a word processor (do you use Word, or WordPerfect?). I'll refer to the word processor as a "text editor" from now on. Did you know you can copy from a web page? Yes, simply click and drag down to highlight the section you need to copy, then copy using the file menu or the keyboard shortcut. (You need to start the mouse drag right after you click or else you may get a "back/forward" box.) You can then paste it into a new text document. Or you could simply type it in yourself. Either way, once you have it in the text editor save it as a text file (!!! this part about it being a "text file" is important!!!) giving it the name "Test.htm" (notice in the file extension there is no "l" just "htm", this is correct for Windows, however on Macintosh and UNIX computers it would be "Test.html") (actually any name before the "." will do, the important part of the file name is the "htm" extension.)

Once it is saved as a text file on the Hard drive you can view it using your browser. The only tricky part is getting your browser to find it. On my browser I select "open file" (as opposed to "load file" which will go to a web page on the internet.) Using the open command to find the file (wherever you saved it, in some directory probably). Open the file. If all goes well it should come up as a web page. I've tested on my computer and it works.

Editing - A Way of Life

Here are two new things you can try. Open the word processor and open the Test.htm file. then:

change the <h2> tag to <h1> or some other number between 1-6.
remember to change the number of the closing tag also
i.e. <h1>any words</h1>
NOT this: <h1>any words</h2>
type the <center> tag BEFORE the <h2> tag and type the </center> closing tag right AFTER the <h2>.

Save the file again (don't change the name)

Open it again with the browser (if you already have the document in the browser window, click the reload or refresh button) and notice the changes. Congratulations, you're an HMTL programmer, sort of.

You should become familiar with a standard working method of copy/paste from some source (i.e. this tutorial) into your web page (that is open in your text editor). One of the most fun aspects of HTML is the ease with which you can edit the web page then see your changes. Make a change, reload, look at the changes, get bright idea, make more changes, reload, look at the changes, get brighter idea, make more changes, look at the changes, wonder WHAT in the world were you thinking, scrap it then start over. You get the idea.

Headers

In order to get an idea of the different font sizes used for headers, copy and paste the header "The Web is Fabulous!!!" (including opening and closing tags) 5 times. Then change the numbers so that you have an example for numbers 1 - 6. Be sure to match the number for each pair of opening and closing tags.

SAVE the document again. Save often.

Now, reload the page into the browser, there they are, all of the different header choices. Here's an example both for illustration of the header size and it can be used to copy/paste into your page:

<h1>header 1</h1>
<h2>header 2</h2>
<h3>header 3</h3>
<h4>header 4</h4>
<h5>header 5</h5>
<h6>header 6</h6>

Of course the tags won't show up in your version. You can copy and paste the above six headers into your web page. It will probably have some funny spacing after you paste it but that's OK. It looks like the lines shown below this paragraph. Try it yourself, what a thrill. Well, what a smile. Really, it made me smile. How about you.

header 1

header 2

header 3

header 4

header 5

header 6

Using HTML comments

If you have made several edits to the page, take a close look again at the code. Do you understand all of the tags. Hey, I've got an idea! Let's try to screw it up an see what happens. Let's start deleting tags and then see how it looks in the browser. Sounds like fun, huh? Maybe not, but it gives me a chance to introduce the HTML "comment" tag. You can hide lines of text that are on an HTML document from the browser by typing this line:

I usually make the line really long so I can locate comments areas quickly.

<!--------------------- begin hiding ------------------------

in here is the stuff that I'm "commenting out", well not really because you can still see it. This is way it looks on the HTML page in your text editor, I had to use escape codes to get it look like this in the browser. More about that later. The point it that there are several reason you might want to hide something without deleting it. It might be code or it might be some text explaining something to the benefit of the other HTML programmer who might be looking at the code sometime and would like to know what the heck is going on without breaking it down line by line. You get the idea. It's hidden from the browser window. Well, not this example but...

---------------------- end hiding ---------------------------->

So, here's what we're gonna do. Open the HTML document in the text editor and comment out the HEAD tag by typing "<!--" in front of the opening HEAD tag. But first Open the HTML page in the browser and take note of the name in the Window bar. It should be "web pages 'R us" usless you've changed it.

Now back to the text editor, type "-->" after the opening HEAD tag. When you're done it should look like this:

It's most convenient to put the comment tags on separate lines so that you can delete the whole line without messing up any of the other code.

SAVE the HTML doc. Save often. Reload the page in the browser. See any difference. Sometimes a missing tag cause a big problem, sometimes not. Notice the title of the browser window.

Move the closing comment tag behind the closing /HEAD tag. SAVE, RELOAD. Notice the title of the browser window. Did it change?

You will find the comment tags useful in your HTML programming. If you look at the source code of this page you'll notice that in the HEAD section I have a bunch of color codes written inside comment tags. You can't see them but they're there. That way as a HTML programmer, I'll always have the codes handy if I want to change an background color or font color. I can never remember which page in my books they are (and I sure don't have them memorized!) so I now I put them in where I need them, in the HTML document.

Let's Review

The basic HTML document has two sections: The HEAD section and the BODY section.
The HTML code is made up of tags, many of which need both an opening and closing version of the tag. (i.e. <html> </html>)
The simplest HTML document is like this:
<html>
<head>
<title>
Page Title
</title>
</head>
<body>
Text in the body of the page
</body>
</html>
The title from the HEAD section shows up in title bar OF the window (not as a title IN the window). The text in the BODY section shows up IN the window.
Copy/Paste is good.
HTML Comments are good

Lesson 1 The HTML document

<h1>header 1</h1>

<h2>header 2</h2>

<h3>header 3</h3>

<h4>header 4</h4>

<h5>header 5</h5>