Presentation Intro - HTML

Speaker Notes

Slide1:

Position the speaker notes so they don't interfere with the screen.

They will discuss information about the slide being viewed.

Slide 2:

Write your code in Notepad.

All commands are enclosed in < >.

To start coding you enter <HTML> - when you are done you enter </HTML>. Notice that when we are ending something we use the/ with the command.

The parts of the code are the HEAD which includes the TITLE, and the BODY.

The TITLE is the title of the document and will appear in the top left corner of the screen on the blue line.

When you are ready to start entering commands you use the <BODY>.

Save your code with a .html extension.

Then using file open, you can open it in your browser and check the results!

Slide 3:

This is the way the first Web page would appear on the screen.

Slide 4:

This example shows more of the mark up language that can be inserted in your code.

In a markup language you are inserting code to change the size of your text, to make it bold, to center it and to display it in lists etc.

You need to check one of the many articles for an explanation of <H1> through <H6>, <B>, <I>, <CENTER>, <BR>, <P>, <UL> and <LI>.

Slide 5:

This is Web2.html as seen on the screen

Slide 6:

This page shows how to set colors. Colors for the background and the default text for the page should be set as parameters within the <BODY>. That means, after writing the word <BODY you insert the parameters before the >.

You should check the parameters in an article or tutorial.

For individual lines or sections, you can change the font color and the font size by using the <FONT> command and including parameters after the <FONT and before the >.

Slide 7:

This is Web3.html as seen on the screen.

I am using Navigator in these displays.

Slide 8:

This page illustrates branching within a page.

Note that after <BODY> I put in the command

<A NAME="top"></A>

The A is the anchor command. The NAME simply names this spot in the text as top.

As we will see later on, I can then jump to this NAME to facilitate movement within the page.

Notice that in the middle of the code I have inserted:

<A NAME="questions"></A> to designate another place that I can jump too!

Please note - this is not an assignment for this class - merely an illustration using an old assignment sheet.

Slide 9:

This is simply a continuation of Web4.html.

Note that there is one more name:

<A NAME="features"></A>

On the next slide, we will show how we can branch to these named points.

Slide 10:

The anchor with HREF causes the movement to the NAMEd entry point.

When I code this I use the A, anchor followed by the code HREF. This is then followed by one of the NAMEs that were defined in the page. Notice that you need to have the # in front of the name when you are indicating that you want to branch to the spot.

<A HREF="#questions">Go to the questions</A><BR>

HREF="#questions" is with the <A>. Go to the questions will appear on the screen underlined and colored as a link. When Go to the questions is pressed, it will move to the area that was designated with NAME and questions.

Note that after the Go to the questions the anchor is closed with </A> and the <BR> is coded so the next entry will appear on a new line.

Slide 11:

I am only showing the bottom of Web4.html because I want to show the links.

To see the whole page please bring it up from the examples.

Slide 12:

The new concept here is the <BLOCKQUOTE> which indents the text on both sides!

Slide 13:

This is illustrated two ordered lists. One uses the default of number 1, 2, 3. The other uses letters A, B. C. This is accomplished by putting TYPE as a parameter within <OL> and specifying the TYPE = A.

Note that you can also specify types for small letters and Roman Numerials.

The code used is:

<OL TYPE=A>

Slide 14:

In this case I am putting ordered lists within ordered lists to create an outline.

Note that if you do not close an ordered list, but instead issue another ordered list then the second will be indented under the first as a sublist. This allows us to create an outline structure.

Note also that I selected appropriate types to make the outline.

Slide 15:

In this portion of the page, I am changing the bullet on an unordered list to a square. You should note that different browsers will act differently with these changes.

Slide 16:

This is the first part of Web5.html.

Slide 17:

This is the second screen of Web5.html.