Dorris Harrison.html
[ Homepage][ Class Index ][ Introduction ][ Lesson 1 ][ Lesson 2 ][Lesson 3 ][ Lesson 4 ][ Lesson 5 ][ Lesson 6 ]

HTML & Web Page Class

Lesson 1

Tutorial ..... How to set up WS_FTP

Lesson

HTML assignment
What we have learned
Discussion






Assignment
This week we will use notepad that comes with your computer. It can be found 
under start/programs/accessories. I want you to write a file using NOTEPAD with 
the opening and closing containers that were discussed in your Lesson folder. 
Write a paragraph or two in the BODY of your file. As this is the only print that will show on the webpage. When you finish your HTML assignment see if you can find the open tags and the tags that close them.

If you already have a webpage put your lesson up there and send me the URL. If you do not have a webpage yet you may email it to me and we will make arrangments to get you a webpage.

(Return to top of Page]

Tutorial
How to set up WS_FTPLE
UNTIL WE HAVE SOME FILES TO UPLOAD DO NOT  DO THE SETUP.

1. 
When you start the program, the "session properties" screen will either come up automatically 
or you can get it by clicking on "Connect".
2. 
- click "New"
- under Profile Name, enter Whatever you think bests describes your webpage, like "Harrison Webpage"
- under Host Name/Address, enter "users.freepages.rootsweb.com"
- under Host type, leave "automatic detect"
- under UserId, enter your username without a ~. This would be from your Email from Rootsweb. 
- under Password, type your password    (You could copy and paste this directly from your welcome email)
- click the "Save Password".       (Do you trust everyone who uses your computer?)

To simplify this every time you start up, you could then click the "Startup" tab at the top of the Session Properties window.  
Now click the *startup* tab at the top of the session properties box.  In the first line, for
 initial remote site folder, type the name of the folder where you want to put your website
 on line at Rootsweb.  If the arts directory, type */arts_html*.  If the genealogy directory,
 type */genealogy_html*.

The next box is the location where your *website* is stored on your hard drive (initial 
local folder).  Type in the *path* to the files you want to upload.  If you store your website
 files in a folder on your desk top as I do, the path would be *C:\windows\desktop\website*

Now click *apply*,  then make the connection thru your ISP.

When you are connected, the folder you selected for initial local folder will appear at 
the top of the left hand window, and the destination folder will appear at the top of the 
right hand window.  You can change the directory displayed in either window by double
 clicking the upward pointing green arrow.

Just below the two file windows are three radio buttons, ASCII, Binary, and Auto. 
 Check *Binary*

Highlight the files in the left hand window that you want to upload to Freepages, then 
click the little right pointing arrow in the bar in the center between the two boxes.

Sit back and watch your files transfer.  Do not exit the session until you get the *226
 transfer complete* notice in the progress window at the bottom, and all the new files
 are displayed in the right hand window.

(Return to top of Page]



Lesson

The internet, or "web", is made up of Computers linked together all over the world containing all kinds of information. It truely is a massive "web." Search engines, called "Spiders" run around on this web. Spiders are programs that were written for the purpose of searching out information. What kind of information do they want? Not personal information but information of the primary contents of your site so they can advertise the site to others. URL lists are made from the information gathered by these spiders. So how can we give them the information we want them to have? By our opening statements!

Basic HTML needs an opening statement that MUST have DOCTYPE and HTML. This information always appears on the FIRST line of a program. The sentence starts with !DOCTYPE HTML... which means to look for a document type program written in HTML.
PUBLIC --- the public identifier then assigns a name showing what type of programing is to follow which is always put in quotation marks. The identifier we will use is "-//W3C//DTD HTML 4.0 //EN". W3C we will take up later. DTD [Document Type Declaration] declares that we will be using HTML 4.0 version in ENglish.
So the first sentence will alway be written ---
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">

Now we must use "tags". A tag is a word that tells the computer what & how we want something done with the information. The tag says where to start and a / where to stop.

<HTML> The programing language that is to be used is HTML and requires a closing tag.

So far our program looks like this:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

</HTML>


All programming must be put between <HTML> </HTML>

<HEAD> Now we tell the computer picking up our site that we are starting the heading which has a closing tag.

So now our program looks like this:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

</HEAD>

</HTML>


The heading is made up of two tags, <TITLE> and Meta. <TITLE> is the title of you website. Give this a good deal of thought because this is the name a search engine picks up and gives to the entire world. Also when someone bookmarks your website this is the name that goes there. For class purposes let's use "My Class Page" as the title. Place your title between the opening and closing tags. <TITLE> MY Class Page</TITLE>. The / says to the computer, "I am finished with the TITLE tag."

Now we come to META tags--META tags provide information that describes the properties of a document and assigns values to those properties but do not need a closing tag. In other words, META informs the viewer that discriptive information is coming. NAME tell what to look for and CONTENT tells what it is.
Examples......

< META NAME="discription" CONTENT="Introduction to HTML 4.0 ">

< META NAME="keywords" CONTENT="lesson, HTML, programing, etc.">

<META NAME="Author" CONTENT="Dorris Harrison">

<META NAME="copyright" CONTENT="February 1, 2000">

Any information you want to put here to discribe your site is probably alright. When the spider comes by and reads this it knows what your page is all about. Now close the heading </head> and your heading is finished.

Now our program looks like this:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> MY Class Page</TITLE>
< META NAME="discription" CONTENT="Introduction to HTML 4.0 ">
< META NAME="keywords" CONTENT="lesson, HTML, programing, etc.">
<META NAME="Author" CONTENT="Dorris Harrison">
<META NAME="copyright" CONTENT="February 1, 2000">
</HEAD>

</HTML>


At this point we need to learn about another much used tag, <br> This tag signifies a break in the line and forces the sentence down to the next line.
None of the foregoing information is visible on the internet. We now begin to put in the information we want to be visible to people that visits our page. This is where the body of your programing starts. To do this open the body box with the body tag, < BODY> </ BODY>
In this tag we will set up how the page will look, the background color, color of the text in different situations. Notice the first word BODY is the tag and the rest is information put within the tag.

<BODY BACKGROUND="#ffffff" text="#000080" LINK="#0000ff" ALINK="#ff0000" VLINK="800080">


This line tells the computer to make the BACKGROUND is white, the TEXT is black, & link is blue, ALINK is the color you want the link to change to when clicked and VLINK is the color of the link that shows it has been used. This helps your viewer remember where he has been.
Let's put one sentence in our program and then close all open tags.
</BODY> closes the body tag.
</HTML> closes the whole program.


<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> MY Class Page</TITLE>
< META NAME="discription" CONTENT="Introduction to HTML 4.0 ">
< META NAME="keywords" CONTENT="lesson, HTML, programing, etc.">
<META NAME="Author" CONTENT="Dorris Harrison">
<META NAME="copyright" CONTENT="February 1, 2000">
</HEAD>

<BODY BACKGROUND="#ffffff" text="#000080" LINK="#0000ff" ALINK="#ff0000" VLINK="800080">

Jack and Jill went up the hill.

</BODY>

</HTML>




(Return to top of Page]





[ Homepage ][ Class Index ][ Introduction ][ Lesson 2 ][ Lesson 3 ][ Lesson 4 ][ Lesson 5 ][ Lesson 6 ]

All rights on this site belong to Dorris Harrison - copyright � February 1, 2000