Lesson Three: Creating Instructional Web
                          Pages

Finding the best tutorials and options for web authoring

                              WYSIWG web page editors (both online sites, and using software) (easiest)

                               HTML web authoring

                 Web Authoring Resources, image galleries, etc.

                 The Eight Levels of Multimedia Web Pages

 

Lesson Three Required Assignments:
  1. Search http://google.com for "free greeting cards" and design and send a musical animated greeting card to yourself via email. (Or use http://www.yahoo.americangreetings.com/  A one month free trial subscription is available, look for it. Free musical greeting cards are at http://egreetings.com  ) This demonstrates how easy multimedia self-publishing can be. Send one to your instructor. (Optional if you've done this before.)  

    Confirm in a private email to your instructor what web authoring software you have available, your level of previous web authoring experience, and that you know how to save animations (moving images) to your computer and insert them into your own web pages. 

  2. Create a simple web page at www.weebly.com and email the URL to your instructor.
    3. Limit yourself to 15 minutes.  (30 points)  Or use www.sites.google.com (perhaps adding pages to your google group from lesson two, or sites in the free web curriculum authoring listing at http://web2fork12classrooms.pbwiki.com

  3. Create a simple web page using the HTML activity
    4.  "Creating a Resources Page using HTML" in your handbook using any wordprocessor and any web browser http://lone-eagles.com/html.htm . Take a serious look at a few of the great, easy, "HTML Tutorials" listed in section two of your handbook. Cut and paste the HTML code from your HTML web page into an email message and send it to your instructor. Verify you were able to view your HTML code as a real web page. Limit yourself to 30 minutes for this six line HTML exercise. Note, Kompozer has an HTML editor as referenced immediately below. (30 points)

  4. Create a web page using any wordprocessor or web authoring program you may already have, OR using the free Kompozer web authoring program for Mac or PC. Download it from www.kompozer.net Include sample text, and one or more images and animations which you've either created yourself or saved from the web, and hyperlinks to at least six quality resources of your choice. Note that there is a tutorial in the Help menu for all software and Kompozer has excellent step-by-step instructions starting with "Create your first web page." Consult with your instructor if you have questions.
Email your software authored simple web page to your instructor as either an email attachment, a URL (preferred,) or as a block of HTML text using cut and paste to place it into an email message. Note that images need to be individually attached if they are to accompany a web page you're attached to an email message. There is no need to send all the images to your instructor.  Send your webpage to yourself first as a test.  (30 points)

For the remaining 10 points for this lesson engage in resource sharing with the other participants via the class listserv as described in the class welcome bulletin at   http://lone-eagles.com/spu1wel.htm .

Lesson Goals:

To create a greeting card web page as the easiest first web authoring experience and to learn to save images and animations for use in your own web pages.

To create a web page using 1. Easy free web tools, 2. web authoring software, and 3. to learn how to email web pages as attachments.

To create a web page using HTML, to understand a little about what HTML is, and how to learn more about HTML.

To determine what you need to be able to routinely post your own web pages on the Internet anytime, ideally to your own web site.


A. The Easiest Way to Create a Web Page

While an increasing number of free web sites offer easy authoring of web pages, you may find you'll have greater control over what you create using your own web-authoring software. But, the following free sites are fun to use and can be used with students without any real training required.

Try the Weebly site below for just 15 minutes just to see what's possible and sent the URL to your instructor.

Free Web Sites

Take a look at some of the many free web authoring resource sites http://lone-eagles.com/currtour.htm, http://lone-eagles.com/teacherstools.htm   and at http://lone-eagles.com/webdev.htm

B. An Easy Way to Create Web Pages
     with Your Own Free Software (Kompozer)

Let your instructor know via private email what web authoring software you have available and intend to use for this assignment. 
Kompozer for Mac and PC can be downloaded free from www.kompozer.net

Kompozer is the latest free version of the Mozilla open source web authoring program similar to the older Netscape Composer: (15 minutes)

The WYSIWG, (What You See Is What You Get,) method of web authoring is very much the same as using a word processor. What you create on the screen will be how the final web page will look. Most modern wordprocessors allow you to save any document as a web page (Select File/Save As HTML.)

Kompozer is strongly recommended as an easy, free, first web authoring program. Selecting the "New" and "Blank Page" option gives you a clean slate upon which you can create your own web page using common desktop publishing and wordprocessing features. Selecting "Insert Image" and "Insert Link" options allow you to insert images, animations, and hyperlinks with great ease. To view a web page with your browser which you've created on your computer select "File/Open."  Or use the Publish button, which can be set to automatically update your new web pages to your own web site, if you have one.

TIP: Hyperlinks and animations won't function in web authoring mode. You must be in Browser mode for links and animations to work properly. It can be confusing jumping between Kompozer to edit, and the Browser (using the Publish Button) to view, but with practice, this will become much easier.

Create a web page using Kompozer (or other web authoring software on your computer) with text, graphics and animations you've either created or saved from the web, and hyperlinks to at least six quality resources of your choice. Email your new web page to your instructor but don't bother attaching individual messages. Post it on the web and send the URL if you have a web site to post to.  Consider what next steps you need to take to get your own web site for future convenience posting web pages and curriculum in the future.

(One hour)

C. The Most Flexible Method of Creating Web Pages (HTML Coding Method)

HTML (Hyper Text Markup Language) is a method of creating web pages which requires only a wordprocessor. While the actual code of a web page can look scary, it is amazingly easy to learn. Most people do not use HTML because of its complexity and because easier options exist. But, even if you know just a little HTML you'll find it will come in handy when you run into the limitations of the easy methods.

Using your browser with a web page loaded select "View" and then "page source" or "document source" to see the HTML code which all browsers interpret to display web pages. Most people that learn the HTML method of creating web pages strongly prefer it because they have total control over the creative design process for web authoring. Those who use WYSIWG web authoring programs typically need to make changes in the HTML code when their program won’t allow them to make changes they desire. It can be very important to understand how to make minor HTML pages, but extensive HTML knowledge is generally not necessary. See Required Assignment #2, above, for details on your short HTML assignment for this lesson.

To view a web page with your browser which you've created using HTML,   select "File/Open" from your browser menu. Your browser can only view files with web page or image filename extensions such as .htm .html .jpg .gif etc.

Create a simple web page using the HTML activity "Creating a Resources Page using HTML" in your handbook using any wordprocessor and any web browser http://lone-eagles.com/html.htm . Take a serious look at a few of the great, easy, "HTML Tutorials" listed in section two of your handbook. Cut and paste the HTML code from your HTML web page into an email message and send it to your instructor. Verify you were able to view it as a real web page using your browser. (Did you save it as myfile.htm?)    Many tutorials on HTML are at http://lone-eagles.com/webdev.htm

(One hour)

D. Posting your web page(s) on the Internet:

Typically, when you pay an Internet provider for an Internet account you receive an email address and space on their web server (which is connected to the Internet around the clock) for posting your own web pages anytime you like. Typically, once you get set up, you can update existing web pages or post new web pages very, very easily! Once you get properly set up, that is!

You will need to call your Internet provider and tell them what web authoring program(s) you have and ask how to get your web pages posted. There is information they must give you, such as where to send your web pages and the basic URL for your web pages.. Have them talk you through the exact "set-up" steps or find someone who knows how to do this. With Kompozer, once you've  entered in this location, you can post any web page you want by simply naming your web page and then clicking on the "Publish" button.  Be persistent getting the help you're already paying for! Its easy, once you're set up!

E. Exploring Animation Libraries: Time for Fun!! You've seen moving animations on web pages, but did you know you can easily save animations for use in your own web pages from copyright-free archives of thousands of animations!! There are dozens of sites out there with thousands of web page images and clip art! Try www.animationfactory.com for 10,000+ copyright free animations.  Other graphics and animations resources at listed at http://lone-eagles.com/webdev.htm . You'll also find sites with web design suggestions, and here's a new curriculum on web design for teens! http://www.americaconnects.net/learn/learningdesign.pdf Your students will love saving and inserting images and animations, as will you! Its easy! (45 minutes)

Search for "animation AND directories" and explore the many animation directories!  Search for 'clip art' and experiment with other search phrases related to web page images.

Now, if you're not having enough fun, note there are many free animation authoring programs available through free software sites like http://www.tucows.com!  Get your students to help you explore how easy they are to use to create original animations.

Conclusion: It is very important that you feel as comfortable creating simple web pages with text, images and hyperlinks, as you do using a word processor, by the time you finish this lesson. These skills are fast becoming commonplace, even in elementary classrooms! Please feel free to call your instructor to talk over any concerns you may have; PH 406-683-6270. All problems can be easily resolved!

                  Checklist:

                   __I know how to use View/Page Source in my browser to view
                       the HTML code of any web page.

                   __I know how to edit the HTML by loading the text HTML into
                       any word processor, and saving it again with the .htm extension.
                       You may have to select View/HTML source to edit the HTML itself if your
                       wordprocessor automatically converts a text HTML page into a web page
                       display.

                   __ I know how to create a fast free website at one or more sites.

                   __I know how to use my own web authoring software to have more control
                       over the web pages I want to create.

                  __I know how to post my web page on my own web site easily and at any time.
                      Or at least I know who to ask on how to get set up so I can do this.


Lesson Feedback: Optional, but much appreciated.

You're invited to privately email your instructor:

       1. What areas, if any, did you have trouble with during this   
           lesson?

       2. What questions remain now that you've finished this lesson?

       3. Approximately how much time did you devote to this lesson?

       4. What improvements would you like to suggest?