Minute One

Lesson Plan:

Part 1: Introduction to Hyper Text Mark-up Language

HTML lets us take very simple word processing documents and insert commands so that any web browser running on any kind of computer will know how to make the document look nice.

Inserting the commands is called "Marking Up" the document -- this is the same kind of thing that editors do to a manuscript to tell the printer how to set the type.


Part 2: The form of HTML commands

All HTML commands are enclosed in pointy brackets like this < >
For example: <BR>
marks where a to put a line break.
or
<HR> tells the browser to draw a horizontal line across the page like this:


And one important rule: Do not put spaces between the pointy brackets and the command.


Many HTML commands apply to a piece of text. These commands are used in pairs to turn the command on and then to turn it off.
For example:
<H1> Show This </H1> Turns on big print to write the heading "Show This" and then turns big print off.

Show This

<CENTER> Look Nice </CENTER> Tells the browser to center the enclosed text "Look Nice" on the next line.
Look Nice
Pop Quiz! -- What symbol do we use to show that we are turning off a command?
Hint: the answer is /


Part 3: How to "write" your first HTML page:

Note: Here I show you what a basic page looks like -- you will have to
wait until Lesson 4 (two minutes from now) to find out how to write it.

Here is your first page -- all pages will have the commands shown here. Important: the text that appears in italics like this line is commentary -- you would not type it as part of your page.

<HTML>
turn on html -- we turn it off at the bottom)

<TITLE> My First Page </TITLE> This will go in the title bar of the window
<BODY> This is where the page starts

Here you can write anything that you want. It will be displayed as simple text.

</BODY> end the body of the document
</HTML> turn html off

To see what this page looks like on your browser click here

REMEMBER -- use the Back button in the upper left corner of your browser to come back to this page!




Minute Two

Lesson Plan:

Part 1: Changing the size of text -- headings


The size of text is specified with the <H> command which stands for Heading.

<H1> Show This </H1> Heading size one is the biggest -- it looks like this:

Show This

<H2> Show This</H2> This is the next biggest leading and looks like this:

Show This

<H3> Show This </H3> A smaller heading that looks like this:

Show This

The browser automatically puts a heading on a new line and starts a new line after the heading -- you don't have to worry about this spacing. There are more heading sizes, but this is plenty for a start.

Important: Different web browsers will use different sizes and fonts. As HTML author you specify WHEN they are to use a size NOT WHAT size to use.


Part 2: Changing the shape of text

You don't need to know many commands -- but that is why this is an eight minute course.

<STRONG>Show This </STRONG> This will make the type bold like this:

Show This

<CITE> Show This </CITE > This will make the type italic like this:

Show This

<CODE>Show This </CODE> This switches to a different typeface -- generally one that looks like it came out of an old computer.

Show This


Part 3: Changing the layout of text

Strange But True: web browsers IGNORE carriage returns.

This means that you must insert a HTML command where you want a new paragraph or a line break.

<P> This marks the end of a paragraph. Some web browsers will insert a blank line before the next paragraph. You don't have to turn this off so </P> at the paragraph end is optional, but many people use it.

<BR> This causes a line break. Some web browsers ignore multiple paragraph beaks, so if you want blank lines you use <BR> <BR> . You don't turn this command off.


Are You Confused about the difference between <P> and <BR>?
Here's the answer:

<BR>
Always works the same. It moves you to the start of the next line.

<P>
Depends on the web browser. BUT, if you use <P> then your paragraphs will look like those on other pages.


<CENTER> Show This </CENTER> centers the enclosed text on a new line.

Show This

Whoops: Some very old browsers don't do centered so if yours doesn't this isn't.


One Final Note: You can nest commands to get more than one done at once. So

<CENTER> <H1> Show This </H1> </CENTER > will make the text big and center it like this:

Show This






Minute Three

Lesson Plan:

Part 1: Putting in those pictures and graphics


Wherever you want the picture to appear -- put in the Image command.
<IMG SRC="ThePic.GIF">
Inside the quote marks is the name of the file containing the picture. The image in the file named ThePic.GIF is placed with the text that is with it. So for example:
<IMG SRC="blueball.gif"> Puts the picture of the blue ball stored in blueball.gif at the start of the line like this:
Puts the picture of the blue ball stored in blueball.gif at the start of the line like this:
While giving the command <IMG SRC="BLA.GIF"> puts in an image of your beloved author on the screen.

Part 2: Where do I get pictures and graphics?

There are three answers to this question:

Both of the pictures (the ball and the author) that you see above are stored on the hard drive of the computer that is sending this lesson page. I drew the ball with a paint program and used a scanner on a photograph to get the picture. They are stored in the same directory (for Mac users this means folder) as all of the text files that make up this course.

So the first answer is: Make the pictures.

The yellow ball at the start of this line is stored in a computer at the Library of Congress. I didn't make a copy of it -- I just gave the address in the IMG command like this: < IMG SRC="http://lcweb.loc.gov/global/yellowball.gif" > How did I know the address? Your web browser will tell you (see below)--

So the second answer is: Use pictures that are somewhere else.

Finally, your web browser can copy any pictures that are displayed on a page. Here's how to do it:

  1. Move your mouse so that the cursor is over the picture or graphic that you want to copy.
  2. Get to the Save menu by doing one of the following:
  3. When the menu appears ( see below), select, Save This Image As...
  4. When the dialog box appears you can name the image and choose where to save it. Important: The name of the file (or the file type) will end in a special graphics code like .GIF or .JPG. Be sure your file name doesen't change this ending.

The menu that appears when you hold down the mouse button will look something like this:

So the third answer is: Copy pictures and graphics from other web pages

But

Everything on the web belongs to somebody

This means that before you copy something to use on your web page (even if you are going to modify it) you must get the owner's permission.

There are many sites where the creators of buttons, lines, backgrounds, and other graphic elements clearly intend to give them away. Take -- Enjoy -- and don't forget that you should be giving back something too. (You are welcome to my blue ball, the buttons, and the stunning picture of the author for that matter.)

For the rest, you will have to decide -- what are your standards, and how much trouble are you willing to get into if someone disagrees?




Minute Four

Lesson Plan:

Part 1: How to actually make a page.

This is going to be a lot easier than you might think because you make and view web pages on your own computer -- you don't need to be connected to the web or to anything else!

What you need:
Any simple editor (Notepad on PCs)
Any web browser
Why do you tell me to use Notepad -- can't I use Microsoft Word?
The problem is that modern versions of Word will write the HTML for you (so you can quit these lessons right now.) But that is a very different thing from learning how to write it for yourself. Using Word is just not going to work for these lessons.

Part 2: Using your editor

Start your editor

(To find Notepad in Windows go to the Start menu, choose Programs and then look under Accessories.)
Type a web page. What should you type? Well for starters you could just type the sample document from Minute One

Save what you typed as an html text document If you are using a word processor this is the hardest part of this entire lesson because normally your word processor saves documents in its own format. To save your page as a text document identified as html:

Go to the File menu and choose Save As ....
The Save As dialog box will appear. (The one shown below is from Notepad.)
In the Save As box, Find the drop down menu "Save as type".

Look for the oval in the picture above.

Select the option All Files from the drop down menu as shown above.
(If you are using some program other than Notepad, the choice may be called something like "text only")

Name your document.
Web browsers recognize html files by the last part of their names so it is very important that your file name end in .htm (that is, a period and the letters htm)
Note: With some word processors (like MS Word) you may be able to chose a file type of HTML. Do not do choose this. You will be asking the program to write the HTML for you and you will get very strange results. Do not try to use Word for these lessons.

Now finish the Save As ... pressing the Save button.

Part 3: Using your web browser

Start your web browser.

Find the Open File... command In Netscape and Microsoft browsers this command is under the File menu. On some versions you first select Open... to get at the Open File command. On other browsers you may have to hunt -- the command may even be called something like Open Local.

Select the Open File... command

A normal file opening box will appear. (Or, press the Browse button.) Find the file that you made in Part 1 above. Select your file and press the Open button Wow! There it is! Your web page is right there on your browser.

Part 4: Shifting between them

Shift back to your text editor.

Change your document. You might add: <H1> I'm Doing it </H1> on the line below the <BODY> command.



Save your document. This is very important because if you don't save it your browser won't know that you've changed it. (Note: Some word processors have a nasty habit of switching back to their normal saving rather than keeping the document as text. If you have trouble getting your browser to open the document check on this.)

Switch to your web browser

Click in the Reload button at the top of your browser screen. This tells the browser to read the file that you just changed and saved. Remember -- until you press Reload you will be looking at the old version of your page.

Switch back and forth. Experiment. Learn.




Minute Five

Lesson Plan:

Part 1: Adding hypertext links


A hypertext link is the underlined text on a web page that a reader can click on to be transferred to another web page. This ability to link to other pages, either your own or those of others, is one of the powerful features of the web.

To add a link you give two kinds of information:

  1. The address of the page to transfer to.
  2. The text that the user will click on to activate that link.

So for example:

<A HREF = "MinuteFour.html"> Press this to go back to Minute Four </A>

Where
  1. MinuteFour.html -- is the page to transfer to.
  2. Press this to go back to Minute Four -- is the text to click on.
Will produce a line that looks like this:

Press this to go back to Minute Four

And of course clicking on it will send you back to the Minute Four page.

Because the Minute Four page is stored in the same place as this page (and all the rest of the lesson pages) I only had to give the file name. To jump to a page at another site the command will look like this:

<A HREF = "http://www.netscape.com"> Netscape Home Page </A>

This tells the browser to jump to the Netscape home page. And on the browser it will look like:

Netscape Home Page


Part 2: Using Hypertext links (making buttons)


Here's the part that you've been waiting for! (Of course you have only been waiting for four and a half minutes.) -- how to make links that are push buttons rather than just underlined text. The fact is that you already know how!

Remember that back in Minute One you learned that you could nest html commands -- Well, that's just how we make buttons: You start off with the link command that we just learned and put the address of the page you're jumping to in the quotation marks:

<A HREF = "MinuteFour.html"> </A>

And then you put an image command that we learned in Minute Three right where the stuff to click on goes

<A HREF = "MinuteFour.html"> <IMG SRC="blueball.gif"> </A>

This looks messy at first, but look carefully so you can see the IMG command nested in the A command. (Highlighted below)

<A HREF = "MinuteFour.html"> <IMG SRC="blueball.gif"> </A >

The result will be a blue ball button that will take you back to Minute Four.



Of course you can draw or find button shapes that are much better that the blue ball. And remember, since pictures and drawings are all displayed with the IMG command, any picture can be a button.




Prev. Lesson Next Lesson



Minute Six

Lesson Plan:

Part 1: Lists, indentation and that sort of stuff

You may remember that in minute one I said that the browser ignores carriage returns. If you want to make a line break you use <P> or <BR> .

But the news is worse than that -- the browser ignores leading spaces too! How can you indent anything? Not to worry -- you'll use lists.

There are two kinds of commands used in building lists -- a command to mark the start and end of the list as a whole and a command to mark the start of each separate item on the list.

OK -- lets build lists!

Part 2: Bullet lists

When the browser displays it each item in a bullet list starts with a bullet (the technical term for this is a "big dot.") When we write the html, the entire list begins with <UL> and ends with </UL> and each item starts with <LI> .

Here's an example:

<UL>
<LI> This is one of the things on this list.
<LI> This is another one of the things on this list but I wanted you to see what it would look like if the item was more than one line long.
<LI> Here is the last thing on the list and again I'm going to make it a very long one. Not only will it be long, it will have a second paragraph.
<P> Such as this second paragraph which is also meant to be sort of on the long side. Which is to say it will go on and on, but you shouldn't be reading this nonsense when you should be learning html.
</UL>

When your browser formats this it will look like:



Part 3: Numbered lists

Numbered lists are almost the same as bullet lists except that they start with <OL> and end with </OL >. Remember -- the browser provides the numbers -- not you.

<OL>
<LI> The first item
<LI> The second item
<LI> The third item
</OL>

Which will look like:

  1. The first item
  2. The second item
  3. The third item


Part 4: Definition lists

Definition lists begin with <DL> and end with </DL> . There are two kinds of items on a definition list: <DT> marks the term being defined and <DD> marks the definition.

BUT -- don't think in terns of definitions. Think of this is a kind of main point, sub point formatting.
<DL>
<DT> If you think about this.
<DD> Then you will see possibilities in this kind of format.
<DT> If you look at web pages.
<DD> Then you will find uses for a definition list that have nothing to do with definitions.
<DT> If you think only of definitions.
<DD> Then you are going to lose html power.
</DL>


This will look like:

If you think about this.
Then you will see possibilities in this kind of format.
If you look at web pages.
Then you will find uses for a definition list that have nothing to do with definitions.
If you think only of definitions.
Then you are going to lose html power.





Minute Seven

Lesson Plan

Part 1:Part 1: Nesting Lists

You can get more formatting options by nesting lists.

To put one list inside of another list you simply give the command to start a list wherever you want the next level of indentation to start. For example: (I've put in an extra line break just to highlight where the inner list is)

Here are three ways of indenting lines in html:
<OL>
<LI> Start the line with a picture
<LI> Use a list

<UL>
<LI> Numbered list
<LI> Bullet list
<LI> Definition list
</UL>

<LI> Use a block quote
</OL>

This will look like:

Here are three ways of indenting lines in html:

  1. Start the line with a picture
  2. Use a list
  3. Use a block quote

By the way, some people don't nest bullet lists because they think that the bullets used at the second level (this is built into the web browser) look ugly.

Part 2: Another Way of Indenting -- Blockquote (maybe)

To make a block quote you simply take the paragraph that you want to indent and put <BLOCKQUOTE> before it and </BLOCKQUOTE> after it. I did exactly that to this paragraph so that you can see the results just below.

To make a block quote you simply take the paragraph that you want to indent and put <BLOCKQUOTE> before it and </BLOCKQUOTE> after it. I did exactly that to this paragraph so that you can see the results just below.
The blank lines just above and below the paragraph are part of the block quote format -- you don't need to put in breaks. Once again, if you think of this formatting option only in terms of quotations you will be missing opportunities.

Why maybe? When viewed with most browsers this looks just fine, but some browsers (often older ones) indent and also turn the text to italics. If you don't want some readers to see it this way, don't use blockquote.
DON'T PANIC: Lesson 8 gives you another way to get the Blockquote look.

Part 3: Moving to a Specific Part of a Page

You may have observed that the command <A HREF = ""></A> that lets us jump to a new page always sends to the top of the new page.

So how do you go somewhere else? The first thing to do is to mark a specific spot on a page. We do that with:
<A NAME = "HiddenName"> text to jump to </A>

For example in the Part 1 heading up above I have actually written:

<H3> <A NAME = "ToHere"> Part 1 </A> : Nesting Lists </H3>

Where the ToHere inside the quotes is the hidden name of the place to jump to. To make the jump we insert an A command:

<A HREF = "#ToHere"> Go to the first heading </A>

Which will look like:

Go to the first heading

And when you click, it moves you up to the first heading.
Note how we use the number sign # to tell the <A command that we are jumping to a particular place. If that place is on a different page we give the page name followed by the place name. For example:

<A HREF = "MinuteSix.html#ToThere"> To the fourth part of Minute Six </A >

Looks like:

To the fourth part of Minute Six

Well, you can guess what that does, or you can try it. Remember that for this to work I had to use NAME to hide the name ToThere in the heading that we are jumping to.




Minute Eight

Lesson Plan:

Part 1: Is Eight Minutes of html Enough?

You can judge this for yourself because the only commands that I used in writing these lessons are the ones that are taught here.

SO if as you read these lessons you were reasonably satisfied with them as web pages -- you know enough to do at least as well.

Don't forget that your browser can show you exactly how the html for any page looks. In Netscape use the Document Source command in the View the menu.

Part 2: Things I Didn't Tell You

There are things that I didn't tell you about exactly how to write the commands:

In most cases it doesn't matter if you use uppercase or lowercase in a command.
So <STRONG> could just as well be <strong> or even <StRoNg> I used upper case to make it easier for you to see the commands. In fact, the current best practice is to use all lower case.

Some of the commands have places where spaces are required or prohibited. If you follow my examples,
you will be OK. If you don't, you'll probably figure it out anyway.

I didn't try to build much vocabulary. So what I called commands should really
be called "tags." Further, all the tags have names, so I could have
told you that the <A command is "anchor" and that the <HR> that
draws a line across the page is called "horizontal rule."

And finally I told a little white lie in Part 1 above. I did fail to explain
one command that I used in making these pages.

Part 3: Blockquote Again

In Lesson Seven I introduced Blockquote but then told you that it might result in italics on some browsers. So how did I get text just above this to be indented? The answer: Definition Lists.
If you were to look at the html for this page you would see that juist before the indent I have inserted:
<DL>
<DL>
Each of the paragraphs begins with a <DD> and I inserted breaks to keep the lines from running to the right margin.
Finally, the indented section ends with:
</DL>
</DL>
So I got the indent by nesting two Definition Lists and not having any defined term, <DT> , entries at all!

Part 4: Html Style

The three most important things about a web page are:


content and writing
content and writing
content and writing


Part 5: One More Lie

There is a Minute Nine -- the Next Lesson button will take you there.




Minute Nine

Lesson Plan:

Part 1: Minute 9 ??

I didn't want to include changing colors in a set of beginning lessons but my students said that, if you don't know how to change colors, your pages will be boring. As you might guess from the lesson plan, I think this offers you a lot of ways to mess up the looks of your pages. But here goes:

Part 2: Changing the Background Color

Remember that back in Lesson Two we saw that you start a page with
<HTML>
<TITLE> a window title goes here < /TITLE >
<BODY>
Well, to change the background color you just add to the BODY line like this:

<BODY BGCOLOR="#FFFFFF">

This will turn the background of the whole page to white. Notice that the BGCOLOR command goes inside the pointy brackets of the BODY command.

Part 3: What Color Is It?

All colors on your computer screen are made from a mix of Red, Green, and Blue. When you describe a color the first two positions tell how much red, the second two how much green and the third pair how much blue. So #FF0000 is all red and no blue or green. (those 0s are zeros). Here is how you specify more and more of a color:
00 is none at all ------ 7F is about halfway ------- FF is as much as there is
You can use the digits 0 through 9 and letters A through F where A is just a little more than 9 and B is a bit more than A and so on..

So why is #FFFFFF white? Because white light is a mixture of all the colors.
(If you don't believe this, watch Saturday morning TV until you see Mr. Science do an experiment with prisms -- or at least until the urge to color your pages passes.)

At the other end #000000 is black -- the color you get when no lights are on.

Confused? Fire up your browser and word processor and experiment!

Part 4: Getting into Trouble

Ok, so you have changed your background.
But suppose that the new color makes the black text hard (or impossible) to read?
Now you have learn:

Part 5: Changing the Text Color

We change the text color inside the body statement just the same way we changed the background. So

<BODY BGCOLOR="#000000" TEXT="#FF0000">

gives us red letters on a black background. Remember: both the BGCOLOR and the TEXT commands change the colors of the entire page. If you want only some parts colored you have to use commands that aren't covered here.

Part 6: Getting into More Trouble

There are two more problems that color changing can cause.

The first problem is that lots of possible colors look really grainy and awful when a browser displays them. (My Next and Back buttons are a good example of a bad color.). And to add to your problems, some images develop "halos" on some backgrounds You need to experiment to find colors that work for your pages.

The second problem is that after you make the text a readable color, you still need to worry about the colors of the links. They have to be: a) Readable and b) Different from the text.

LINK=
sets the color of the unused links (which are normally blue) and
VLINK=
sets the color of the used links. (which are normally red or pink)
So the BODY line may end up looking something like this:

<BODY BGCOLOR="#FFCCEE" TEXT="#008888" LINK="#CC00FF" VLINK="#330099">

Well, who can resist at least trying some colored pages? Enjoy!