Have class identify various parts:
text
graphics
animation
talk
The narrator also mentioned that creating web pages is a simple process.
In today's class, I will prove his point. In fact, I will show you several ways to make a web page.
First, let me review with you some basic terms and concepts.
In module 1, I talked about HTML or Hypertext Mark-up Language.
define
HTML refers to a language of Web Browsers and of web pages. HTML is not a programming language; rather it is merely a system to have regular text appear--and act--in different ways on the screen. Hypertext, as the name implies, is more than just text on a computer screen. The most important feature of hypertext is the concept of a hypertext link; i.e. the ability of jumping from one web page to another.
demonstrate
Got to http://webTeacher.org
Select the "page source" option from the "view" menu item, and show the class the HTML for webTeacher's home page.
Point out [TITLE], [BODY ], [IMG SRC="..."], etc.
talk These "tags" make the browser display the information in pre-defined ways.
define>
(Ask class for definitions.)
web page - is an HTML document
web site - is a location on the WWW (Internet) which has a web page(s)
HTML - HyperText Markup Language, provides a syntax for creating hypertext documents for the WWW (Internet)
links - a pointer in a web page that takes the user to another portion of the same page, or to a different web page
frames - divides the web page into parts allowing each part to be updated individually
gifs - Graphics Interchange Format, a commonly used graphics format used in web pages
tags - various formal names given to HTML markup encased in "< >" brackets (e.g. [TITLE], [BODY ], [LINK], etc.)
It is important to know how web pages are created, even if we don't want to learn HTML.
talk
I'm going to show you four different ways of creating web pages. Some of these ways will not rely on HTML, others will require you to learn some HTML. I list these ways in order of complexity. You can create web pages by:
1. using automatic web page generators,
2. using existing web page source codes--as templates,
3. by using WYSIWYG software programs, and
4. by using HTML editors.
section 1
Using Automatic Web Page Generators
Perhaps the easiest way of making a web page is by going to a site which will generate one automatically for you. You merely type your text into a text field, then click an "OK" (or "Submit") button, and the site will create a web page.
optional
For example, if you go to http://nschool.com and go to the "Settings" section, you will be able to have nschool generate a web page for you--automatically.
note
In order to access this portion of nschool, you must first type in your name and log-in password. (If you do not have access to this site, or if you do not want to spend time now showing this option, then merely have the class bookmark this site, so they can return to it later.)
go to
Menu Bar
select
Bookmarks
select
"Add a bookmark"
section 2
Using Existing Web Page Source Codes--as Templates
Next, you can create a web page, by using an existing one.
point out
I want to clarify what I mean by "using". I do not mean--or even suggest--that anyone should copy material which is copyright protected. Such material may include text, graphics, and video.
Rather, what I am saying, is that the idea of a web page may be used. (There is no copyright protection for ideas!) Web pages are excellent sources for ideas. All good web page designers have looked at the source codes for pages they like. Indeed, the web even encourages such examination, by providing you with a means to look; namely, the "Page Source" option--under the "View" menu item.
class
For example, have class go to "http://www.webTeacher.org"
select
From right frame select "Baby Homepage"
class
Have class select all of text in the first beige box. (Select the words following, "Use your mouse to copy the following text:".)
class
Open a text editor, i.e. word processor, like TeachText or SimpleText.
Paste the copied text into the editing window. (Don't use an editor like Microsoft Word that displays HTML as a web page rather than allowing you to edit the file; the simplest text editor on your machine is probably
the best choice.)
Point out that by substituting your own text, you can generate your own web page. Now edit this file, replacing the two instances of "Jane Doe" with your name. (Make sure they keep the HTML tags intact).
class
When class is finished, have everyone save document as "myWebPage".
class
Next, have class open a new browser window. (Note: it is assumed that you are using Netscape 4.5 or later on a Mac. Make necessary changes, if you are using a different browser or a different PC.)
select
From the "File" menu item, select "Open", and then select "Page in Navigator".
A dialog box will appear, asking you which file to open. Select "myWebPage".
talk
Here is the web page that you just created! (Point out that this web page is located--for now, at least--only on your computer. In order for you to share your web page with the world, you must put it on a server.)
point out
Remember, no one should copy material which is copyright protected. We will examine copyright issues in greater detail in "Module--#5 Managing the On-Line Student...Internet Safety"--of this series.
section 3
Using a WYSIWYG Software Program
Another way of creating a web page is by using a WYSIWYG program.
define WYSIWYG stands for "what you see is what you get".
talk
Such programs allow you to arrange your objects--i.e. text, graphics, etc.--on your page, and then the program writes the HTML for you. Working with these programs does not require any knowledge of HTML. All of the HTML coding is done by the software.
point out
(Certain page layout program, like Microsoft's Publisher and Adobe's PageMaker, have been upgraded with the ability to export a document you've created to HTML.)
class
Go to "http://www.webTeacher.org"
select
From right frame select "HTML Editors" under "#18 Easy HTML".
talk
Some advantages to these programs are:
1. It isn't necessary to remember complicated HTML tags; the computer supplies the format.
2. Since the computer supplies a significant part of the syntax for tags, this reduces the chance of a typing error in the tag.
3. In more sophisticated versions of such editors, the computer might even make some additional checks for consistency. For example, it might test to see that an address has a syntax that corresponds to one of the valid web address forms.
Bookmark this page, if you have not done so already:
go to
Menu Bar
select
Bookmarks
select
"Add a bookmark"
optional
From right frame select "Going Further" under "#18 Easy HTML". There are many software programs designed especially to create web pages and web sites. I will show you two of the most popular ones:
Have class go to "http://www.adobe.com/products/pagemill/main.html"
Have class go to "http://www.microsoft.com/frontpage/"
section 4
Using HTML
Finally, you can create web pages by using HTML.
define HTML or HyperText Mark-up Language refers to a language of Web Browsers and of web pages. HTML is not a programming language; rather it is merely a system to have regular text appear--and act--in different ways on the screen.
talk
Because HTML is not a programming language, you can create web pages by using an ASCII text editor; i.e. any word processor like AppleWorks or even SimpleText.
Of course if you are going to be doing a lot of HTML coding, then you may want to consider a non-WYSIWYG HTML editor. Such an editor is essentially an ASCII text editor, with buttons that insert HTML tags automatically. ("Tags" are the special terms, like [HEAD], or [TITLE], that need to be added to text, so that your page will be read as a web page by a browser.)
Perhaps the most popular is BBEdit. "BBEdit is designed for the editing, searching, transformation, and manipulation of text. It provides an array of general-purpose features which are useful for many tasks, and includes many features which have been specifically developed in response to the needs of HTML authors and software developers." (BBEdit's url is - http://www.barebones.com/products/bbedit/bbedit.html.)
talk
I want to spend the remainder of this class creating with you a web page using HTML. (Of course, I cannot teach you all of HTML coding; but I will point out some features.)
class
Go to webTeacher's home page.
select
In the right frame, select "Background Colors" under "#17 HTML".
class
Have class bookmark this page for future reference
go to
Menu Bar
select
Bookmarks
select
"Add a bookmark"
talk
Now let us open our file--created earlier in this class--that we named "myWebPage".
I want us to look closely at the following HTML tag; because in a moment, we will make changes to it.
define
[BODY BGCOLOR="#000030" TEXT="#ff0000"
LINK="#00ffff" VLINK="#00ffff" ALINK="#FF0000"]
This tag appears a bit complicated; but it is not.
The BODY portion of the tag indicates that the body of the HTML document is beginning.
The BGCOLOR="#000030" indicates the particular color that is being used for the background of the HTML document. You will notice that there are six digits after the # sign. These are hexadecimal numbers. (Hexadecimal means base-16 numbers 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f.) The first two are assigned to the red values of the color, the next two are assigned to the green values of the color, and the last two are assigned to blue values of the color. Think of these possibilities as BGCOLOR=#rrggbb.
The TEXT="#ff0000" indicates the particular color that is being used for the text of the HTML document.
The LINK="#00ffff" indicates the particular color of text in the HTML document which serves as the HyperText. HyperText is a feature of HTML that allows words or pictures to act in a certain pre-defined way. For example, in a hypertext document a word can be marked in ways that when the user selects the word --i.e. clicks on it--the user will be taken to another part of the current document (i.e. the current web page), or to another document (i.e. another web page).
The VLINK="#00ffff" indicates the particular color of text in the HTML document which serves as the HyperText, once the link has been visited. In other words, after you return from a linked page, the link will be of a different color. This is a convenient way of indicating that you have visited the link; especially when there are many links on a page!
The ALINK="#FF0000" indicates the particular color of text in the HTML document which serves as the HyperText, as the link is being clicked--i.e. as the link is active.
(The default values in an HTML document are blue for LINK, purple for VLINK, and red for ALINK. Notice that in this document, the author kept the LINK color = VLINK color.)
talk
Now that you understand the meaning of these tags, let's make some changes to our web page.
class
In our "myWebPage" file change the following:
old value: BGCOLOR="#000030"
new value: BGCOLOR="# ffffff "
old value: TEXT="#ff0000"
new value: TEXT="#000000"
Save the document using the "save-as" command so that you can compare the two web pages. (Give it the name "myWebPage2").
Open another browser window. (From the "File" menu, select "Open", then select "Page in Navigator" and open the file "myWebPage2".)
If you would like, you can also open a third browser window--from the "File" menu, select "Open", then select "Page in Navigator"--and open the file "myWebPage". Now you can compare the two.
class
Now, let's go back and make some more changes. Open your "myWebPage" file and change the following:
old value: LINK="#00ffff"
new value: LINK="#0033CC"
old value: VLINK="#00ffff"
new value: VLINK="#999999"
old value: ALINK="#FF0000"
new value: ALINK="#CC0033"
Save the document using the "Save-As" command so that you can compare different versions of your web page. (Give it the name "myWebPage3").
Open a browser window. (From the "File" menu, select "Open", then select "Page in Navigator" and open the file "myWebPage3".)
optional
You can follow the instructions on webTeacher's site, if you want to make this your home page.
talk
Before ending today's class, I want to mention some valuable tools for you to consider:
These are two very helpful books on design:
The Non-Designers Design Book, by Robin Williams
Creating Killer Websites, by David Siegel
These are good resources:
webTeacher (http://www.webTeacher.org)
Studio Verso (http://www.killersites.com)
webmonkey for kids (http://hotwired.lycos.com/webmonkey/kids/)
HTML Help (http://www.htmlhelp.com/links/tutorials.htm)
Here are some web page tutorials, in addition to webTeacher's:
Creating Home Pages Using PageMill
http://www.saintmarys.edu/~itrc/liu0005/tutorial2.html (Create a Web page using PageMill whether you have a PC or a MAC.)
Microsoft FrontPage Tutorial
http://www.students.dsu.edu/ilchuka/FrontPage/Default.htm (Everything you want to know from how to open the program to how to use frames.)
How to WebExpress yourself!
http://www.mvd.com/webtutor/ (Get your Web site up and running quickly with this on-line tutorial.)
point out
Remember that shareware, and even freeware, HTML editors abound. Do a search and try a few before you decide.
optional
Have the class visit some of the resources listed above. They can then bookmark these sites for later use.
talk
SESSION WRAP-UP: Leave time to answer questions. If someone has a very specific question that is not of general relevance, tell them you'll answer that "off-line" (one-to-one) after the session is over.
If disks have been provided, they can download the list of bookmarks they visited today. No disk? No Problem! Most of the sites they visited today can be easily retraced through webTeacher!
optional
Ask people what they think they have learned today. Review material.
optional
Leave some time (15 minutes, if possible) for people who want to stay and use the computer on-line to do so.
