We will be upgrading this unit on 1/31/05.  The new HTML/XHTML assignment sheet can be found here

Creating Web Pages With HTML and XML

(Includes: HTML, Cascading Style Sheets, JavaScript, XML, & Multimedia)

Estimated Completion: 300 hours

Text:  Creating Web Pages with HTML and XML, 3rd  Edition, Patrick Carey, Course Technology Publishing Company
ISBN:  0-619-10115-6

Cost:  $60.00

Additional Web development resources http://pclab.cccoe.k12.ca.us/links.htm, http://www.tinkertech.nethttp://www.putertutor.net, message board:  http://pclab.cccoe.k12.ca.us/phpBB2/index.php.  Be sure to read the instructor's Web site at http://www.tinkertech.net.  The site contains class lecture notes and a variety of Web development resources.  

All software that you will need during class can be accessed from the Web Design folder in the Start menu.

XHTML is becoming the new standard and will replace HTML.  You should read the tutorial at http://www.w3schools.com/xhtml/ prior to starting the book.  Exercises in the book are not XHTML compliant.  You do not have to correct existing exercises, but any new code that you add should be XHTML compliant. I have written an article on making your documents XHTML compliant that you may find helpful when you're creating new documents or when you want to convert an existing document to XHTML.   I have some additional XHTML resources listed at http://www.putertutor.net/photo/html.htm#xhtml See Appendix E of your book for additional information on working with XHTML.

Bookmark this Glossary of graphic design and Web page design terms and this HTML Cheatsheet.

Peter Bigelow created a wonderful color chart for students in class to use.  View the color chart here

Homework is not required for this class. However, reading your lessons at home prior to completing them in class makes your classroom time more productive.  Students should attempt to complete 1-2 chapters per week in order to complete the HTML unit within nine weeks. 

Backing up Your Student Files

You should periodically back up your student files to CD.  Instructions for creating a data CD are here (Word document format).

Certificate:  In order to earn a certificate in HTML students must complete the HTML Final Project.  This project should be completed before starting another course module.

File management skills are absolutely necessary to create and maintain Web sites.  Please download and print this file management information for use in class.  If you need a brush up on file management, review the tutorials that I've listed here http://www.tinkertech.net/octWeb03.htm#file.    If you have not already completed the HTML tutorial, please ask your instructor for the CD.

Step 1: A folder named html will be copied into your user directory with all of the necessary files for the book.

Step 2: The CD that comes with the book will not be needed in class.  You can take it home and you can unzip the EXE files in the Data folder on the CD if you want to work at home.

Step 3: Save all files to the HTML folder in the appropriate sub-folder. ALL  filenames (HTML, JPEG, GIF, etc.) and folders should be eight characters or less and lowercase even if the book indicates otherwise.  Be sure to change the filename extension to .htm NOT .txt (which is the default filename extension for text files.)

You will be using TextPad to create your HTML documents. To access TextPad click Start > Programs > Web Design > TextPad. You may also use Xoology Coda (Start > Programs > Web Design > Xoology Coda > Coda.  Coda will color code mistakes in your HTML and JavaScript Syntax.  I recommend using TextPad for daily editing and Coda for troubleshooting problems with JavaScript code.

Complete and save ALL Session Work, Review Assignments, Project Work and Case Problems unless otherwise noted.  The Lab Assignments are interactive with files found on the CD and may be done at home.  Do not do the lab assignments in class.

It is important that you read the entire lesson/case problem before you attempt to complete it.  I recommend that you read ahead at home.

Some exercises ask you to print pages that you have created, please DO NOT.  Do not print your assignments. Upon completion of the book, your instructor will teach you how to upload your pages to the Web for review.

Quick Check answers for each session can be found at the end of each tutorial.  Case Problems are a test of what you have learned during the tutorial, be sure to review the tutorial prior to asking for assistance.

While we encourage you to try and problem solve any errors that you may have with your Web pages, ask for assistance if you cannot figure out the problem within a reasonable amount of time.  We do not want you to become frustrated.

Additional HTML resources can be found at http://www.putertutor.net or http://www.tinkertech.net use the Site Map to navigate the sites. 

Level I

Tutorial 1 – Creating a Web Page

Before you begin this book, be sure that you have completed the XHTML tutorial at http://www.w3schools.com/xhtml/. Print out this XHTML Cheatsheet and visit and review the Standards Compliant XHTML page at http://www.sizefactory.com/xhtml/index.php.  Read Appendix E of your book. 

While you're working in the book, make sure to use XHTML compliant tags (some examples in the book are not XHTML compliant).  Here are two examples of items in the books that are not XHTML compliant:

Page 1.22 - Be sure to make your lists XHTML compliant.  Use </li> at the end of each list item.

Page 1.30 - Always make an image tag XHTML compliant.  Use this format <img src="file.jpg" />

Corrections:

Page 1.11 - You can also align="right" and align="justify"

Page 1.38 #5: The tag should be <ol>, not <nl>

Page 1.38 #3: The tag should be <li>, not </i>

Page 1.38 #6:  For the Explore steps  you should search the Web using http://www.google.com, or your favorite search engine to find the solution.  These exercises are meant to challenge you.  If you cannot find the solution, ask your instructor to assist you to find it using the proper search terms.  See page V in the Preface.

ALL  filenames (HTML, JPEG, GIF, etc.) and folders should be eight characters or less and lowercase even if the book indicates otherwise.  Be sure to change the filename extension to .htm NOT .txt (which is the default filename extension for text files.)

Tutorial 2 – Adding Hypertext Links to a Web Page

Read Usability 101 and Reality Check for Web Design and familiarize yourself with the rest of the useit.com site.

Tunna Resources is a resource site for the new and disabled Webmaster. It's an awesome site to learn about Web site development in general. This site goes beyond the HTML lessons and really focuses on accessible Web site development. It's a must read for anyone learning to develop Web sites for EVERYONE!

Some of the links in this chapter may be broken. For Example, page 2.35 has a table of links, several of these no longer work. Unfortunately, over time Web sites come and go.   If a link to a Web site/page is broken, see if you can find the new location of the page or use http://www.google.com to find a new Web site with relevant information.

Tip: As you are working with code, pay particular attention to the color of your code.  TextPad uses color to differentiate between different types of tags. If you see a block of code that is all one color, all green for example, there is probably a typo in the code (many times this is caused by a missing quotation, slash, or parenthesis).  Look carefully at the area where the code first changes color (to all green) and you will hopefully find your mistake (be sure to check the line above the color change).  You can see the color coding scheme by clicking Edit > Preferences > Code Coloring from the Categories.  From there you can select the Document type you would like to view or modify and click the Edit Coloring Scheme button.  I would prefer that you didn't change the color schemes in the classroom, but if you must, please be sure to reset them at the end of the day. 

ALL  filenames (HTML, JPEG, GIF, etc.) and folders should be eight characters or less and lowercase even if the book indicates otherwise.  Be sure to change the filename extension to .htm NOT .txt (which is the default filename extension for text files.)

Level II

Tutorial 3 – Designing a Web Page

Read the Web Style Guide at http://www.Webstyleguide.com/, Fixing Your Web Site and First Impressions are Crucial.  Take a look at this tutorial on Basic Web Page Layout and Design.

Study these art and design resources.

Peter Bigelow created a wonderful color chart for students in class to use.  View the color chart here

Page 3.06 - Using Color Values:  Instead of converting color values mathematically, you can access Paint Shop Pro (a graphics application) to do the work for you.  Click  Start > Programs > Web Design > Jasc Software > Paint Shop Pro 7 to launch the program. 

To convert a color in Paint Shop, click the Foreground Color box Foreground Color Box in the upper right-hand corner of the application to display the color dialog box.

This dialog box can be used to find out the Hex value of an RGB color and visa versa.

Type the RGB values into the Red, Green, and Blue boxes, the HTML code box will display the correct HEX value. 

You can also covert a HEX value to RGB by typing the HEX code into the HTML code box. 

Most graphics applications have this capability.  Paint Shop Pro is a great alternative to Photoshop. It's powerful, has an easier learning curve, and it's inexpensive.  It is available for $69.95 at Academic Superstore and there is usually a $30.00 rebate.   If you can't afford Photoshop at home, I would recommend this program.  Paint Shop is available as an elective in the Web design program.

EyeDropper is a small software program that determines the  RGB and Hex color values of a Web page or any other object.  Eyedropper is installed on all the systems.  Start > Programs > Web Design > EyeDropper

Page 3.10: The font tag has been deprecated as of HTML 4 (this means is should be avoided). This means that in the future it may not be supported by newer browsers.  While you should learn about the font tag so you are familiar with the syntax, you should actually utilize CSS, which you will learn in tutorial seven, to set fonts.  

Page 3.35: Read the FAQ @ http://www.kasparius.com/nonflash/tutorial/tutfaq.htm for tips on creating image maps. There are many software programs that will create image maps easily. I have written a tutorial for creating image maps in Dreamweaver, you can find it here http://www.tinkertech.net/tutor/imagemap/. Feel free to use the tutorial to create image maps in the Review and Case problems.

Page 3.48 #10: An explanation of the clear property of the <br> tag is on page 3.38.  The code should be:  <br clear=right>

ALL  filenames (HTML, JPEG, GIF, etc.) and folders should be eight characters or less and lowercase even if the book indicates otherwise.  Be sure to change the filename extension to .htm NOT .txt (which is the default filename extension for text files.)

Tutorial 4 – Designing a Web Page with Tables

Familiarize yourself with the W3C World Wide Web Consortium at http://www.w3.org/.

Before you begin this chapter, review the tutorial The Basic, Basic Table a key thing to remember from the Web Monkey tutorial is that:

"The thing to remember here is that a <td> is always enclosed in a <tr>, which is always enclosed in a <table>." 

You also might find it helpful to print this HTML tag chart.  Study the Table Tags and Attributes.  This page focuses on only table tags and I found it particularly useful.

As you're working with tables, turn on your table borders by adding the code border="1" to the table tag like this <table border="1">.  This helps when laying out your table so that you can see the grid that you are creating.  You can turn the borders off when you’re done  creating your table like this <table border ="0">. 

If you are having a hard time with tables, ask your instructor to view the code for the case you are working on.

Page 4.45, Figure 4-59:  The body tag has an error, the link area has an extra " (quotation mark).  The tag should read link="#524020"   Be sure to also remove the extra quotation mark from the code. 

Page 4.58, step #4: The second cell should also include the following font tag:  <font face="Arial, Helvetica, sans-serif" color="white" size="2">.  Insert this tag before the uses.htm file.  Be sure to close the font tag at the end of the last paragraph.

Page 4.58, step #5: Use the back5.jpg file.

Page 4.58, step #13:  The footer.htm file has errors.  All # (pound symbols) should be enclosed in quotation marks, i.e. "#"

Page 4.58: Chamberlain Civic Center - The fourth bulleted item should read:  February 7-8, 7 p.m.: West Side Story ($24/#36/$64)

Page 4.59, step 3: For more information on Column Groups, visit
http://wolves.dreamhost.com/Web/xhtml/tbl12.html  http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.4
http://www.htmlcodetutorial.com/tables/_COL.html
http://www.netstrider.com/tutorials/HTMLRef/tables/colgroup.html
http://www.laramie1.k12.wy.us/instruction/technology/html/html30.htm

ALL  filenames (HTML, JPEG, GIF, etc.) and folders should be eight characters or less and lowercase even if the book indicates otherwise.  Be sure to change the filename extension to .htm NOT .txt (which is the default filename extension for text files.)

Tutorial 5 – Using Frames in a Web Site

Review the Web Content Accessibility Guidelines at http://www.w3.org/TR/WCAG20/. Review and bookmark Designing More Usable Web Sites. Read Why Frames Suck by Jakob Nielsen and Practical Web Design - Frames and Frame Usage Explained from SitePoint.  For an example of accessibility guidelines in plain English, read the University of Texas Web Design Styleguide.

Please note:  Frames are no longer widely used.  Please complete the tutorial section, pages 5.01-5.36, and the Review Assignment, pages 5.37-5.39, only.

Page 5.21 - the links.htm file is missing a closing > in the font size tag. 

Page 5.32 - When using the bordercolor property, use a border width of at least 5 pixels in order to see the color change.

ALL  filenames (HTML, JPEG, GIF, etc.) and folders should be eight characters or less and lowercase even if the book indicates otherwise.  Be sure to change the filename extension to .htm NOT .txt (which is the default filename extension for text files.)

Level III

Tutorial 6 – Creating Web Page Forms

Read Good Site Design Practices, Designing Attractive Web Pages, and the Design Basics articles at About.com.

ALL  filenames (HTML, JPEG, GIF, etc.) and folders should be eight characters or less and lowercase even if the book indicates otherwise.  Be sure to change the filename extension to .htm NOT .txt (which is the default filename extension for text files.)

Page 6.11 - The width of the table in the register file is set to 640 pixels, please change the width to 100%.

Page 6.41 - Additional information on the button tag:

http://Webdesign.about.com/library/tags/bltags-button.htm
http://www.javascriptkit.com/howto/button.shtml
http://www.w3schools.com/tags/tag_button.asp
http://www.devguru.com/Technologies/xhtml/quickref/xhtml_button.html

Page 6.46 - The form mailer service no longer works.  You will get an error message if you attempt to submit the form.

Page 6.51 #10-11 - Use the <fieldset> tag to create a group box around the radio buttons.

Page 6.53 #2 - The width for the main table is set to 620, change the width to 100%. Be sure to add the Ship to Billing Address checkbox as displayed in Figure 6-48, it was left off the instructions.

Page 6.54 #10 - The <tabindex> tag has limitations.  Radio buttons are navigated using the arrow keys, not the tab key.  Normally, the first radio button in a group of radio buttons can be indexed, but the remaining radio buttons will be ignored. 

In this exercise the radio button "American Express" will be selected when you press the tab key, but when you press the tab key again the rest of the radio buttons will be ignored and the cursor will move to the "Name on Card" field.  If you wanted to be able to tab through each radio button, each button would have to have a different field name.  i.e., ccard1, ccard2, ccard3, ccard4. 

Also, older versions of Netscape do not recognize the <tabindex>

Turn in receipt form for “The Non-Designer’s Web Book” and "The Web Design Workshop"

You may also purchase these books from another source or check them out at the library, but they are REQUIRED reading. 

(These are supplements to your HTML book.  They are to be done as homework)

Tutorial 7 – Working with Cascading Style Sheets

Ask your instructor for the HTML Advanced CD and review the CSS section of the CD.

Before beginning this tutorial, review the article article on making your documents XHTML compliant.   I would like you to attempt to make all of the exercises in this lesson XHTML compliant.  Once you have completed each tutorial, use the W3.org Markup Validation Service to validate your lesson. 

Review the tutorials, What You Always Wanted to Know About CSS and CSS an Interactive Tutorial. Check the W3C's Learning CSS section and bookmark the CSS Validator for later use. The Web Design Group also has a nice tutorial on CSS.  Here is a cheat sheet for CSS.

Check Web Monkey's Browser Chart to learn what features are supported by each browser.  Be sure to read the Design issues article linked on the page. You can check your Web pages in different browsers on the teacher workstation in the front of the room.  Netscape 4.7, Netscape 6, Opera, and the Web TV viewer are all installed.

Here is a page of supplemental CSS tutorials

When Should I Use a Class, When Should I Use an ID?

Information about CSS and Netscape can be found at http://www.tinkertech.net/aprilWeb2.htm in the 4/16 update section.

Review Save Coding Time with TextPad Macros by Dale Mead.

This is one of the most important chapters in the book.  CSS is now the preferred method for formatting Web pages.  I would recommend searching for tutorials on CSS and purchasing supplemental books on the subject.

Eric Meyer on CSS is available for purchase in the classroom if you would like to learn more about CSS after competing this unit.  I would also recommend the following books on CSS:  Core CSS, Keith Schengili-Roberts and Cascading Style Sheets 2.0 by Eric Meyer.  

I would recommend that when you write your CSS code you place each selector on it's own line followed by the bracket {.  Then place each property and value pair followed by a semi-colon ; on their own line. At the end of the block on its own line place the closing bracket }. Here is some sample code:

td {
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
width:50%;
padding: 3px;
}

Placing each property/value pair on its own line makes the code easier to read.  This will be helpful when proofreading your code for errors.

Page 7.39 - Formatting Hypertext Links - Read the Anchor Pseudo-classes information on this page http://www.w3schools.com/css/css_pseudo_classes.asp for the correct syntax order.

Page 7.62 - Case 1, #7 - Here is how the Span tag should be used on the first letter of each product category:  <SPAN STYLE="color:black">A</SPAN>

Page 7.67 - Case 4 - This exercise does not require the use of frames.  The bio, list, and image files can be combined into one file for each composer. 

Note:  Internet Explorer 6.0 has an issues with link colors.  When you change the link colors, they may not display correctly.  You can check to be sure that the code is working in Netscape Navigator 4.7 on the instructor workstation in the front of the room. 

ALL  filenames (HTML, JPEG, GIF, etc.) and folders should be eight characters or less and lowercase even if the book indicates otherwise.  Be sure to change the filename extension to .htm NOT .txt (which is the default filename extension for text files.)

Uploading Using FTP

It is time to start uploading your work (case problems) to the Internet/World Wide Web.  In class, we use a free Web host called f2o.org to host or store our Web pages. The process of uploading files to a Web host on the internet is called FTP or File Transfer Protocol.  To do this in class you will use a program called WS_FTP_LE, but there are many other free FTP programs available

Before you can upload your pages, you will need to  create a Web/index page, hand coded in TextPad, that contains links to all of your case problem assignments that you have created in class (including Tutorials 1-7).  Here is an example of an index page that I created http://robin.f2o.org/html/.  Be sure to test your page on the local hard drive to make sure that the links work before you attempt to upload it to the Internet. 

Once you have completed your index page and tested it, read the WS_FTP_LE tutorial here http://www.tinkertech.net/tutor/wsftp.htm to learn how to sign up for a free account with f2o.org and how to use WS_FTP_LE to upload your assignments.  

Upload your index page and all of the tutorial folders as directed in the tutorial to f2o.org.  Notify your instructor when you have uploaded your first seven projects via e-mail.  Be sure to use your personal e-mail account, not a classroom account.  Include the complete URL/URI of your site in your e-mail, i.e., http://robin.f2o.org.  Your instructor will link to your site on the student portfolio page.  Please keep in mind that you have not completed all of the Web design units, you should not try to create entire portfolio sites at this time.

HTML project index pages that are built with Dreamweaver, FrontPage or another HTML editor  will receive a "no credit".

You should ask your instructor for clarification on this project if needed.  Do not rely on information from other students. 

Tutorial 8 – Programming with JavaScript

This chapter is the hardest chapter to complete in the book.  The coding is complicated and the author assumes that you have some familiarity with JavaScript.  We have supplemental tutorials available on CD and other students recommend JavaScript A Beginner's Guide, ISBN 0-07-213140-3, by John Pollock (available in class) as a good supplemental book for JavaScript.

Read the JavaScript Primer at HTML Goodies. The W3Schools also has an introductory primer on JavaScript.  Web Teacher also has an introductory tutorial that you might find helpful.    If you are having a hard time writing your own script and you want a special effect, but you don't know how to write the code. Check out some of the FREE "cut and paste" scripts that you can use in your Web documents at javascripts.com, JavaScript Source, JavaScripts Made Easy, Java-Scripts.net, and Dynamic Drive.  If you want to find even more free scripts, use Google to search for +free +javascript

Some students have found the tutorials at the  Free JavaScript Learning Center helpful.

Many students have expressed that the JavaScript chapters in the book are very difficult.  Therefore, I am providing you with the links to the solutions for the exercises for chapters 8 and 9. Please review these solutions prior to beginning the case problems.  

Tutorial 8 - Review
Tutorial 8 - Case 1
Tutorial 8 - Case 2
Tutorial 8 - Case 3 & calendar.js
Tutorial 8 - Case 4

Tutorial 9 - Review
Tutorial 9 - Case 1
Tutorial 9 - Case 2
Tutorial 9 - Case 3
Tutorial 9 - Case 4

Debugging JavaScript

If your JavaScript does not appear correctly on the page, look at the status bar at the bottom of Internet Explorer

JavaScript Error

Notice the Error Icon icon in the lower left corner of the screen.  This icon indicates that there is an error in the JavaScript code.  Double click the icon to display the error message.  This dialog box will appear.

JavaScript Error Box

Check the box that says Always display this message when a page contains errors.  When you are writing JavaScript it is important that this error box always displays.   Click Show Details. A box will appear showing the line number that has the error.  Make a note of the line number.

Line Number

Click the previous and next buttons if they are available and make a note of any other line numbers that may have errors.

In TextPad click View > Line Numbers to display line numbers.  Scroll to the line number that you made a note of when you received the error message in Internet Explorer.  Proofread that line of code and the lines above and below.  If that line contains a call to a function somewhere in your HTML document (i.e., onLoad="StartForm()), proofread that function also.  Be sure that you have ; at the end of lines, { }, "", and  ' ', are used in pairs (there should be an even number of {'s in code), and that you are using the correct casing (JavaScript is case sensitive onLoad is different from onload. 

Some common error messages

Object expected: It can't find the function that has been called. For example:  You look at the line number that contains the error and this is the code on that line number:  <BODY BGCOLOR="#008080" TEXT=WHITE onLoad="StartForm();"> You also need to look at the StartForm() function in the HEAD section of the document.  Make sure that the casing is correct and that the names are exactly the same. 

Unterminated String Constant:  You have pressed the enter key (inserted a carriage return) in the middle of a line of code and it doesn't belong there or you are missing a semi-colon.

Expected ) or missing ):  You have left out a quote, single quote, or bracket }.  Also check to be sure that all your commas are in the right place.

Proofread, proofread, proofread!

For more information on JavaScript errors, visit the following sites:

http://www.tinkertech.net/tips2.htm
http://www.htmlgoodies.com/primers/jsp/hgjsp_2.html
http://www.jsworkshop.com/bb/viewtopic.php?t=143
http://www.javaworld.com/javaworld/jw-07-1996/jw-07-javascript.html
http://www.intranetjournal.com/faqs/jsfaq/trouble3.html

While we encourage you to try and troubleshoot/problem solve any errors that you may have with your Web pages, ask for assistance if you cannot figure out the problem within a reasonable amount of time.  We do not want you to become frustrated.

There is a list of Supplemental Tutorials on the Web.

If you have difficulties with this JavaScript chapter, briefly review lessons 1-10 of the PageTutor tutorial and then begin the JavaScript lesson in your book.  To access the tutorial, click Start > Programs > Web Design > JavaScript Tutorial. 

Pages 8.31-8.32 - There are several examples of If...Else statements that are incorrect. After the else in the code, there should be a curly brace {.  The example on the bottom of page 8.32 in the grey box is correct.  

Page 8.43 #8 - Use this code:

if(DaysLeft > 1) {
document.write("Only "+DaysLeft+" days until Christmas");
} else {
if(DaysLeft==1) {
document.write("Last day for Christmas shopping");
} else {
document.write("Happy Holidays from North Pole Novelties");
}
}

Page 8.46 #10 & #12 - For these directions, you can make a call to the DishName and DishDesc functions directly without creating a variable.  Use the following document.write statements:

document.write(DishName(WeekDay));
document.write(DishDesc(WeekDay));

Be sure that you have created a variable called WeekDay prior to using the above code.  Here is an example of the WeekDay variable:

WeekDay = Today.getDay();

If you want to use variables in the document.write statement, you do not need quotes ("") or plus symbols (++) as the example shows on page 8.18.  Quotes are used when writing strings (plain text/characters), the plus symbol is used to connect/combine  two strings or a string to a variable.  Because you are using a variable, not a string, in the document.write statement, neither symbol is needed (see an example of a document.write statement using a variable on the top of page 8.12). Here is the code you would use:

var WeekDay=Now.getDay()
var WeekDayDish=DishName(WeekDay);
document.write(WeekDayDish)

Notes: Page 8.32 Using Arrays - If necessary, review lessons 11-14 of the PageTutor tutorial.

Chapter 8 - Case 3 - Notes from Dale

On the assumption that the author would like constructive feedback on this newly added assignment, which was the most difficult for me so far and also confused other students, I offer the following for you to forward if
warranted:

The assignment departs from procedure in that it does not allow us to add a single function and then check its functionality in a browser window.
Instead, we are expected to complete the JavaScript file before opening the HTML file that calls it to check. I decided, and Lynn also complained, that it would help to see whether the Month-Year row, the days-of-the-week headings, etc. functioned as she went through the assignment. As it is, when we finish the entire .js file, turn on the HTML page, and find that the calendar does not appear at all, we have a lot of code to check.

In fact I did steps 15-17 ("save as" the HTML file and add code calling the .js file and function) soon after realizing I needed to see the results of my code as I progressed. The going still was difficult, but this made it easier.

I recommend that Carey make steps 15-17 steps 1-3, and then add steps to check progress writing the .js code by testing in the Web page after adding each function as he does in other assignments.

ALL  filenames (HTML, JPEG, GIF, etc.) and folders should be eight characters or less and lowercase even if the book indicates otherwise.  Be sure to change the filename extension to .htm NOT .txt (which is the default filename extension for text files.)

Tutorial 9 – Working with JavaScript Objects and Events

Having a hard time with JavaScript, read the Free JavaScript Learning Center

Page 9.53 - #2 - Use the following code to create the test_square() function:

function testsquare() {
magic=true;
if (document.square.diag1.value != "15") magic=false;
if (document.square.diag2.value != "15") magic=false;
if (document.square.row1.value != "15") magic=false;
if (document.square.row2.value != "15") magic=false;
if (document.square.row3.value != "15") magic=false;
if (document.square.col1.value != "15") magic=false;
if (document.square.col2.value != "15") magic=false;
if (document.square.col3.value != "15") magic=false;
if (valid_square()==false) magic=false;

if (magic) alert("Puzzle Completed!!");
}

Page 9.53 - #8 - Use the following code to select and set focus to the cell1 field when the page loads:

<body onload="document.square.cell1.focus();document.square.cell1.select()">

Page 9.53 - #9 - Use the following code to set focus on the cell1 field: 

<input class="number" name="cell9" size="5" maxlength="1" value="0" onchange="sum()" onblur="document.square.cell1.focus()">
</td>

Use the onblur event to set focus within the input box rather than writing a separate function.

If necessary, review lessons 15-25 of the PageTutor tutorial.

ALL  filenames (HTML, JPEG, GIF, etc.) and folders should be eight characters or less and lowercase even if the book indicates otherwise.  Be sure to change the filename extension to .htm NOT .txt (which is the default filename extension for text files.)

Tutorial 10 – Creating a Multimedia Web Page

Notes on multimedia in Web pages

Many students find multimedia on Web pages fascinating.  While this may be true for the new Web developer you should be aware that the majority of Web surfers do not enjoy a lot of multimedia objects loading automatically.  Background sounds that automatically play when the browser is loaded are the worst multimedia offenders.  While video and audio clips can be used to enhance the Web surfers learning experience, these multimedia files should be used with caution and care. 

I would recommend giving your visitors a choice about viewing your multimedia content by linking to the content/files as described on page 10.09 (be sure to include the file size).  Take a look at some of the major news organizations that provide a lot of video streaming and audio content like CNN, USA Today, Reuters, Fox News, and others. These organizations do not place video or audio files that automatically start on their Web pages nor do they include background music on their sites.   They all give their visitors a choice when it comes to viewing video or listening to audio files, by linking to the  files.   These organizations notify the viewer either via text or a graphical image that they are about to view a video file. 

Most visitors do not want sound and video files starting automatically in their browsers.  Here are a few reasons why:

  1. Video and sound files are usually huge.  On a dial-up these files can take a long time to download.  Even on a high speed connection they can be slow to load. Downloading these files will usually slow down everything else you are trying to do on the computer.  On older systems they can cause the computer to crash. Most people want their surfing  experience to be as fast as possible, with video and sound files it's not.
  2. Many computers have security settings that disable multimedia content.  This may affect the design of your site.
  3. Your visitor my not like the same music that you do.  Auto starting music can be disruptive to other processes.  Joe Burns has an interesting article at HTML Goodies about background sound that I would recommend that you read. 

If you're going to use multimedia on your pages consider the following practices:

  1. Link to sound and video files - let the viewer decide if they want to view or listen to your files. Include file size information with the link. 
  2. If you're going to embed video or sound on a page always provide controls to turn them off.  Don't auto start video or sound - leave this up to the viewer.
  3. Don't use tags like bgsound that automatically start playing when the page loads.
  4. Use the object tag to include multimedia files on your site.

Because so much of the code presented in Tutorial 10 of your HTML/XML books has changed or it is not standards compliant  I am not requiring that you complete this chapter. While much of the code can still be used on Web pages it is not standards compliant.  The object tag is now used to insert multimedia into your Web pages.  I would recommend that you read the W3.org's implementation recommendations. Because each object has its own set of parameters I would also recommend that you search for specific code information as needed. For example, if you want to insert an AVI file into your document, search for +object +avi +xhtml. 

If you're interested the University of Aberdeen has an article on How to put sound and video on Web pages.

Page 10.11-12 - The embed tag has been deprecated in XHTML.  This means that the code is considered obsolete by the W3.org.  The object tag should be used to insert multimedia object into your page.    The code for embedding these files can be found at http://www.Webreference.com/js/column51/install.html. Please use this method any time you need to invoke the Windows Media Player.  Visit the W3.org's page on handling objects, images, and applets.  It is not XHTML compliant so if you include it on your pages they won't validate. 

Page 10.13 - bgsound is an Internet Explorer tag only and considered annoying. It is not XHTML compliant so if you include it on your pages they won't validate. 

Page 10.29 - marquee is an Internet Explorer tag only and considered annoying. The latest version of Netscape has adopted this tag, but it is not XHTML compliant so if you include it on your pages they won't validate. 

Note:  Case Problems are not required for this lesson.

Page 10.28 - Inserting the CreditRoll applet - The C and the R in CreditRoll.class must be uppercased. 

Page 10.34 - .mov files (QuickTime movies) do not display on the computers in the classroom.  Internet Explorer 6.0 requires QuickTime 5.1 or later installed on systems.  To test your movie, use the instructor station at the front of the room.

Page 10.35 Figure 10-30 Some Mime Data Types - Type AVI Mime Name should be video/x-msvideo not m-msvideo

Page 10.41-#5 - The M in Mandel.class must be in uppercase in the code in order for the Java Applet to work.  Depending on when you started class, you may also need to rename the file from mandel.class to Mandel.class

Note:  Many applets will not work when you upload them to f2o.org. If you find an applet on the Web that you would like to use for your project, please ask your instructor first.

ALL  filenames (HTML, JPEG, GIF, etc.) and folders should be eight characters or less and lowercase even if the book indicates otherwise.  Be sure to change the filename extension to .htm NOT .txt (which is the default filename extension for text files.)

Additional Case 1 – Creating a Company Web Site

Pp. ADD 1.01 – 1.06

Additional Case 2 – Creating a Style for a Web Site

I have written a tutorial for creating image maps in Dreamweaver.  You can find it here http://www.tinkertech.net/tutor/imagemap/

Pp. ADD 2.01 – 2.07

Additional Case 3 – Creating an Online Newsletter

Page ADD 3.02 - You do not need to create the image map code by hand.  There are many software programs that will create image maps easily.  For this exercise, you can use Dreamweaver to create the image maps.  First, create each file in TextPad and insert the necessary images without the image maps. After the layout is complete and you are ready to add the image maps, close the files in TextPad. Follow the directions on this tutorial, http://www.tinkertech.net/tutor/imagemap/ to create the image maps in Dreamweaver .   When you have finished the image map tutorial save and close the file. 

Pp. ADD 3.01 – 3.04

XML - The XML unit is optional and is not required for a certificate. Students who want to complete this unit can self-check their work here
XML Section Notes by David Hucklesby.

Page 2.27 - In the sample code, there should be opening and closing <tr></tr> tags included inside the <thead></thead> tags.  It is also wrong in the actual code of the page.

Page 4.49 - #1 - Open PSchema2.xsd

Certificate:  In order to earn a certificate in HTML students must complete the HTML Final Project.  This project should be completed before starting another course module.

Project Preparation

Review these art and design resources before beginning your HTML project.

Review the article on making your documents XHTML Compliant.

Review these resources on copyright.

HTML/XHTML Project

This project should be completed before you begin other units. This is a three part project. 

Students will demonstrate their knowledge of HTML by taking an industry standard assessment.

Brainbench offers technology assessments.  Students can take the HTML 3.2 assessment for free.  Students should see this page for review information.  Students must sign up for a Brainbench account by visiting this link.    After creating your free account and logging in you will need to visit the Test Center.  Search for html and select the HTML 3.2 (Free!) test from the search results.   There is no pass or fail score on this assessment; this is simply a tool to help you prepare for testing situations you may encounter when you enter the Web development industry.  Feel free to take the assessment as many times as you like.  Submit your results to your instructor (be sure to include your name on the results page).

Students will demonstrate their knowledge of the Web planning process.

Students should complete the HTML Project Proposal (Word document format).

Students will demonstrate their knowledge of HTML/XHTML by developing an six page Web site. 

Using what you have learned in the HTML/XML book, the Non-Designer's Web Book, the Web Design Workshop, and other resources you have been provided create a Web site using the following guidelines:

This site should be a minimum of six created pages.  The content or site topic is up to you.  You may want to contact a local non-profit, a neighbor, or a small business to see if they need a Web site developed.

The page design should be visually pleasing, professional, and should support the page content.  The page design should be appropriate for its intended audience.  The page design should be controlled with CSS. 

The images should be well designed and complement the overall site design.  They should not be distorted and should not include negative graphic effects.  The images should be optimized and should download quickly.  All images should have ALT and height and width tags.  If necessary the images should be resized using an image editor and not via the image height and width tag.  Images from the Web can be used as long as you have obtained appropriate permission.

The pages should use effective and professional layout.  The layout should not be cluttered. The background and text colors should be readable.  Visitors who use a 800x600 monitor should not have to scroll to the right.  Font sizes should be appropriate for the audience.  The page layout should be controlled with CSS.

The content on the site should be well written.  The content should not contain grammatical, punctuation, or spelling errors.  The content should be easy to read and use appropriate fonts.  The content should be controlled with CSS.

The site should be well organized.  All pages should have meaningful titles.  Navigation should be obvious and easy to maneuver.  Navigation should be on every page and should be easy to find.   The navigation should be consistent throughout the site. Folders should be created to store necessary files.

Everything on the site should work.  There should not be any missing graphics or broken links.  The layout and design should work on both a PC (Internet Explorer/Firefox) and a Mac (Safari).

The site should download in a reasonable amount of time.  Multimedia objects should be used with care.  All images should be optimized and download quickly.

The site should include the author's name (copyright statement) and some form of contact information (a contact form).  There should be no copyright infringement on the site.  The author should obtain permission for all images and content that was obtained from another source.  Outside sources should be credited appropriately. 

The site should contain keywords and description meta tags.  The site should be registered with Google.  For additional information on Meta Tags and registering your site with search engines click here

The site should be XHTML compliant (transitional) and you should validate all pages prior to submitting it to your instructor. http://validator.w3.org/

Students should read the Web design rubric before they  begin their projects.  This rubric defines the grading criteria for the project. 

Self-evaluation and peer-evaluation

The site should be uploaded to  your account at f2o.org. 

Before you submit your project to your instructor, use the Web design rubric to evaluate your own site. You should also ask two of your fellow students to evaluate your site using the rubric. After self and peer-evaluation, revise your site as needed. Submit your self and peer-evaluations to your instructor along with the HTML Project Proposal.

Submitting the Site

Submit your self and peer-evaluations to your instructor along with the HTML Project Proposal.

Place a link from your homework page to your HTML project. 

Notify your instructor via email, rwood@cccoe.k12.ca.us, when the site is complete.  Be sure to use the complete URL/URI in your e-mail, i.e., http://robin.f2o.org (always include the http:// when you send your links out in e-mail or post them on message boards). 

Copyright information

Prior to creating your HTML final project, read R. Delago-Martinez' What is Copyright? site. Be sure that you do not include images, text or code without permission from the originator. For additional information on copyright visit the following sites:

10 Big Myths About Copyright
United States Copyright Office (Be sure to read the copyright basics)
Copyright Information from the University of Michigan
The Copyright Website
Copyright Resources Online from Yale University
Copyright Law from the Copyright Clearance Center
Copyright and Fair Use from Stanford University Libraries
Legal Information Institute - Copyrights & Copyright Infringement and Remedies

Submit the answers to the The Non-Designer's Web Book and Web Design Workshop quiz.

Additional resources http://pclab.cccoe.k12.ca.us/links.htm, http://www.tinkertech.nethttp://www.putertutor.net