XHTML (retired)

Assignment Sheets

HTML and XHTML Course Syllabus & Assignment Sheet

Book: New Perspectives HTML and XHTML Comprehensive

Includes: HTML/XHTML, Cascading Style Sheets, JavaScript, & Multimedia

Estimated Completion: 270 hours

Text: HTML and XHTML ©2005, 1st Edition, Patrick Carey, Course Technology Publishing Company
ISBN: 0-619-26747-x

Cost: $51.00

General Notes - Before You Start the Book

Important Class Resources

Your instructor provides extensive additional resources for Web design. You should familiarize yourself with and bookmark the following sites:

Lecture notes are available at: http://www.robinsblog.com - This site is updated several times per week. Students should check this site daily for important class announcements and updates.
Class forum - A place to discuss Web development. Students should check this resource daily for new tutorials, tips, and resources.
Web design tutorials are available at: http://www.tinkertech.net. - Spend some time getting familiar with this site, it is a collection of topics discussed in class over the last several years.
Work samples can be found at http://robin.robinshosting.com. Ask your instructor for the username and password.
Free Web site hosting for current students is provided at http://www.robinshosting.com support forums can be found at http://robinshosting.com/forum/index.php.

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. 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.

Deprecated items - the book outlines some deprecated features. Deprecated features are HTML features that are being phased out. These features may not be supported by future browsers and should be used with caution. The book includes these features because while they are being phased out they are still widely used in Web development and you will probably come across them when you're working on Web projects.

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

Homework

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/XHTML unit within nine weeks.

Backing up Your Student Files

You should periodically back up your student files to CD. Stations along the windows have CD Burners. Instructions for writing files to a data CD can be found here.

Certificates

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

Files

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 htmlxhtml will be copied into your user directory with all of the necessary files for the book. This folder has 11 sub-folders that correspond to the chapters in the book. Each exercise should be saved in the appropriate folder (this will be explained later in the assignment sheet).

Step 2: The CD that is mentioned in the book is not be needed in class; it is an extra expense and not necessary for completing the lessons.

Step 3: Save all files to the htmlxhtml 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.)

What Software Do I Use To Create XHTML Files?

You will be using HomeSite+ to create your XHTML documents. To access HomeSite+ click Start > Programs > Web Design > Macromedia > Macromedia HomeSite+. Review this article, Getting to know HomeSite and the associated help files before you begin your lessons.

Getting Help

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; I do not want you to become frustrated.

Reviewing Your Work

There may be times that you want to check your Web pages for accuracy; the case problem solutions for each tutorial can be found on the instructor sample site.

Exercises - What to complete

Complete and save ALL Session Work, Review Assignments & Project Work. You will complete two Case Problems (indicated in tutorial notes below) per chapter. The Lab Assignments are not required.

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.

Printing

The book indicates that you should print the assignments, please DO NOT. Your instructor can review your files with you when you complete each exercise. During tutorial 7 your instructor will teach you how to upload your pages to the Web for review.

Assignments and Special Notes

Read pages 1-14; on page 15 you will begin to enter XHTML code into HomeSite. The notes below supplement the book; the provide classroom specific instructions, book errors, and supplemental resources.

Level I

Tutorial 1 – Developing a Basic Web Page

Page HTML 15 #1 - In order to create the document on page 15 you will need to open HomeSite. To access HomeSite+ click Start > Programs > Web Design > Macromedia > Macromedia HomeSite+. Review this article, Getting to know HomeSite and the associated help files before you begin your lessons.

Page HTML 15 #3 (sidebar) - While this book teaches valid XHTML compliant code, it does not cover creating what is called a DOCTYPE statement until tutorial 9 (pages 495-500). When you start creating "live" documents you should always include the DOCTYPE statement, the namespace, and the character set in your code. You can read pages 495-500 to learn more about the DOCTYPE statement. Here is an example of the DOCTYPE statement, the namespace, and the character set.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title Goes Here</title>
</head>

While I want you to be aware of the DOCTYPE statement, you should not use it in your documents at this time. Some of the book code will not appear properly with the XHTML DOCTYPE statement. In Tutorial 8 the DOCTYPE statement will be covered.

You may find this character set chart helpful for working with iso-8859-1.

Page HTML 15 #4 - Save the chem.htm file in O:\htmlxhtml\tutorial01\tutorial.

To save the chem.htm file click File > Save or click the Save icon. In the Save As dialog box, click the Save in drop down arrow to the right of My Documents .

Select drive PM## on 'Rop\Users\Pm' O:\ from the list (the ## will vary from student to student. This will be the same as the login number (pm## or tam##) you were assigned when you started class).

You will have one folder in your directory called htmlxhtml . Double click the htmlxhtml folder. Inside the folder there will be 11 sub-folders. These sub-folders correspond with the tutorial chapters in the book. Since you are currently working on Tutorial 1 double click the tutorial01 folder.

tutorial01 sample contents

Inside this folder you will see six sub-folders. The chem.htm lesson and any other lessons that are presented in the book with a yellow background (pages HTML 15-42) should be saved in the tutorial folder.

Double click the tutorial folder to open it.

In the File name box type chem.htm and click Save.

Page HTML 16 #1 - To preview your page in Internet Explorer, click the Preview in Browser icon in HomeSite. Your page will display in Internet Explorer. To preview your XHTML pages in Firefox review this article Getting to know HomeSite.

Page HTML 39 - In appendix B of your HTML/XHTML books there is an HTML Character Entities chart (Special Characters). The problem is that some of the codes on this chart will not validate as you progress through the book. Evolt has an excellent Simple Character Entity Chart that should be used instead of the appendix in your book. I would recommend that you print the Evolt chart for future reference.

Page HTML 44 - Review Assignment - The review assignment files are located in the review folder in the tutorial01 folder. Do not use the chem.htm file that you created during the tutorial; open the chemtxt.htm file from the review folder as indicated. The review assignment files should be saved in the review folder.

Page HTML 46 - Case Problem 1 - There are four case folders (labeled case1, case2, case3, case4) in the tutorial01 folder. Complete Case Problem 1 and Case Problem 4 for this tutorial. If time permits, I would strongly suggest that you complete ALL of the Case Problems for additional practice.

Case Problems should be saved to the following folders:

Case Problem 1 ChildLink, Inc. pg. 46	tutorial01\case1
Case Problem 2 Mathematics Department pg. 48	tutorial01\case2
Case Problem 3 Frostbite Freeze pg. 50	tutorial01\case3
Case Problem 4 Body Systems pg. 52	tutorial01\case4

Please use this file location example for the remainder of the book.

HTML 46 #6 - Please refer to chart on page 31 for additional information on the blockquote element. Please be aware that the blockquote element should only be used for quotations. Traditionally, blockquote has been used to "indent" paragraphs of text which is how the author is using the tag in this example. For this exercise, place a blockquote element before the text Homework... and a closing blockquote element after the text ...the year. Note: When creating your own XHTML documents, blockquote should not be used to indent text.

HTML 48 #13 - Please refer to page 38 for additional information on the address element. The address element should be used to enclose contact information. Your XHTML code for the address section should look like this:

<address style="text-align: right;">
<b>ChildLink</b><br />
1443 Cortnic Drive<br />
Las Cruces, NM 88001<br />
505-555-2371<br />
</address>

The <br /> element is discussed on page HTML 38.

Page HTML 49 #4 - Explore exercises are meant to challenge you. Use Google or your favorite search engine to search for explanations and coding examples. For this explore exercise you are asked to search for two meta elements; the author meta and the date meta. Here are examples of the search I would use:

author meta search

date meta search

Tutorial 2 – Developing a Basic Web Site

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 to external Web sites in this chapter may be broken. 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 for TextPad Users: As you are working with code, pay particular attention to the color of your code in TextPad. 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.

Remember to save your work in the appropriate folders. Lessons with yellow backgrounds should be saved to the tutorial folder inside the tutorial02 folder. Refer back to the Tutorial 1 instructions on saving files.

Page HTML 63 - One of the anchor examples is incorrect. To link to an anchor you must use the following syntax:

<a href="#classes">Classes</a>

This mistake occurs in the third anchor example on the page.

Page HTML 69 - The linkstxt.htm file in your folders may be incorrect. Right click this link (linkstxt.htm) and select Save Target As and save the corrected file into your user directory.

Page HTML 90 - Review Assignments and Case Problems should be saved in the appropriate review and case folders. Refer back to the Tutorial 1 instructions on saving files. Be sure to spell check the files. I found some typos in the Case 4 files. Complete Case Problem 1 and Case Problem 4 for this tutorial. If time permits, I would strongly suggest that you complete ALL of the Case Problems for additional practice.

Page HTML 95 #4 - This is an Explore exercise, use Google to search for +base +target +secondary +html. You will only need to use the target attribute for this tag, do not use the href attribute.

Page HTML 97 #2-5 - Case 2 - Semantic links do not display in Internet Explorer. You must preview your pages in Opera on the Instructor workstation in the front of the classroom in order to see the semantic links. Login to the instructor workstation with your PM#. After logging in, double click the Opera icon on the desktop. From the Opera menu, click File > Open and navigate to the page you want to display. Here is some sample code for creating semantic links in file b9m1.htm as indicated in instruction # 5:

<link href="b9home.htm" rel="chapter" />
<link href="b9gloss.htm" rel="glossary" />
<link href="b9m2.htm" rel="next" />
<link href="b9m4.htm" rel="last" />

To learn more about the <link> element review this article http://www.wats.ca/articles/missinglink/49 or search Google for +semantic +link +element.

Pages 97-98 - Be sure to set the image style to "border-width:0" for all linked images in this case problem.

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.

Over the course of the next week, study these art and design resources.

Chapter Notes

Working with Color in HTML

Page HTML 108 - The book tends to use color names to define colors in Web pages. This is very limiting because there are one 16 "legal" HTML and XHTML color names. This means if you use a color other than one of the "legal" colors it may not display in all browsers. I would recommend that you use the hexadecimal values instead of using color names. In your htmlxhtml folder I have put a sub folder called visbopop. If you open this folder in My Computer or Windows Explorer you will see a file called deskpop.html. Double click the deskpop.html file. When the file opens you will see three buttons, click the Hex Color Popup button and a new file will open with the 216 Web safe colors. There is also an HTML popup and an RGB color popup in the deskpop.html file. You can download this handy tool at home at Visibone's Web site. Students can also order in class the laminated Visibone color chart for $6.50. Finally, you can find a full list of Hex, RGB, and Color Names at the HTML Reference.

In the htmlxhtml folder you will find a subfolder called visbopop. This folder contains color charts and other helpful references. Using My Computer you can double click the file deskpop.htm to open a page that links to an HTML popup cheat sheet, a Hex Color cheat sheet, and an RGB cheat sheet.

Refer back to the Tutorial 1 instructions on saving files. Use the outlined steps for saving files for the remainder of the book.

Paint Shop Pro Color Dialog Box You do not have to convert 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 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 in Paint Shop.

Most graphic applications have this capability. The steps to access color codes in Photoshop is almost identical. 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 > All Programs > Web Design > EyeDropper. I would recommend that you try out Eyedropper, I think that you will find this free program very handy as you are developing Web pages.

HTML 120 - Every book that I read seems to use different units of measurement for fonts. I now tend to now use the seven descriptive keywords xx-small, x-small, small, medium, large, x-large, and xx-large. Using this method allows elements to scale proportionately. These keywords seem to maintain consistency over the various browsers and they make updating very easy. For many years I used pixels because this was the common unit of measurement, but this poses a problem to people with vision impairments; if they try to resize the text size (View > Text Size) they cannot.

While the books begins this section of the chapter using em for fonts it then digresses to using points which I think should be avoided. Points are for print. Using points as a unit of measurement does not work well across browsers and across platforms. If you would like to see an example of why points should not be used, view this screen capture of a Microsoft Web page on a Mac. When the book directs you to use points (pt) I would recommend that you use another unit of measurement. Stick with em, %, or keywords.

You may find this font-size comparison sheet helpful when converting from one unit of measurement to another. Unfortunately each of these units of measurement have their good points and bad. The Noodle Incident has an article on Sane CSS Sizes that I would recommend that you read. Here is a basic chart for converting points to percents.

6 pt	50%	12 pt	100%
7 pt	58%	14 pt	117%
8 pt	67%	16 pt	133%
9 pt	75%	18 pt	150 %
10 pt	83%	20 pt	167%
11 pt	92%	22 pt	183%

You may also find this Em calculator very useful when you want to convert pixels to ems.

Page HTML 125 Figure 3-21 - There is an error in the style for the H1 tag the second line of code has an incorrect quotation (") mark. The line should look like this:

font-family: Arial, Helvetica, sans-serif; font-size: 1.5em;

Page HTML 141 - Values of the align attribute - The top align attribute description is incorrect. Positions the top of the image with the top of the current text line.

Page HTML 151 - 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 HTML 160 - After completing tutorial 3, review this article Fixing Bad Habits with XHTML and CSS. Utilize CSS to modify the Arcadium Web site as indicated by the article.

Page HTML 161 - Review Assignment - Complete Case Problem 2 and Case Problem 4 for this tutorial. If time permits, I would strongly suggest that you complete ALL of the Case Problems for additional practice.

HTML 162 #7 - Please read this discussion on the forum regarding styling the HR tag.

HTML 167 #7 - An explanation of the clear property of the <br> tag is on page 141. The code should be: <br clear=right>

Tutorial 4 – Designing a Web Page with Tables

Try out the Firefox Web browser. It is installed on all of the workstations and it can be used to check your Web pages. You can access Firefox by double clicking the Firefox icon on the desktop. I have written a tutorial for installing and using Firefox if you would like to install this great, free browser at home. You can configure HomeSite to use Firefox as a secondary browser. Read Getting to Know HomeSite for instructions.

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>."

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 review exercise or case problem you are working on.

Refer back to the Tutorial 1 instructions on saving files. Use the steps outlined for the remainder of the book.

Page HTML 231 - Review Assignment - Skip the Review Assignment for this tutorial. Complete Case Problem 3 and Case Problem 4 for this tutorial. If time permits, I would strongly suggest that you complete ALL of the Case Problems for additional practice.

Page HTML 234 #4: If you find that the font size is too large, feel free to make it smaller.

Page HTML 235 #13 - Do not set a width for the footer row.

Page HTML 239 #6 - 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

Uploading Using FTP

It is time to start uploading your work (case problems) to the Internet/World Wide Web. In class I provide you with free Web hosting for the duration of the course. You need to visit http://www.robinshosting.com and sign up for the 'Student' hosting plan. Once your account is setup you will receive a welcome email with important account details. Save the welcome email message, you will need the account information in class.

After signing up for a hosting account familiarize yourself with the hosting FAQ page. Review the following cPanel movies: Navigating around cPanel, How to change your password, and Keeping your contact information up to date.

The process of uploading files to a Web host on the Internet is called FTP or File Transfer Protocol. In class we use a program called WS_FTP_LE, but there are many other free FTP programs available. Two I would recommend are FireFTP, a free Firefox FTP extension, and Filezilla, a free FTP program.

In addition to uploading all of the work you have created in class you will also create and upload an index page that links to all of your html homework.

You will find the directions for creating an index page and uploading your files in the WS_FTP LE Tutorial.Notify your instructor when you have uploaded your first four projects via e-mail. Include the complete URL/URI of your site in your e-mail, i.e., http://robin.robinshosting.com. Be sure to use your personal e-mail account, not Outlook in the classroom. Your instructor will link to your site on the student portfolio pagee. 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. Post a link to your site in the hosting forum.

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 as project objectives periodically change.

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: Because many developers discourage the use of frames, please complete the tutorial section only. You do not need to complete the Review or Case Problems.

Instead of completing the review and case problems for this lesson, review the Fantastico demonstrations.

Level IIII

Tutorial 6 – Creating Web Page Forms

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

HTML 306 - Mpbs should be Mbps on pages 306-307.

HTML 326 - 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 HTML 337 - Complete Case Problem 2 and Case Problem 4 for this tutorial. If time permits, I would strongly suggest that you complete ALL of the Case Problems for additional practice.

Turn in receipt form for “Design Fundamentals for New Media” book. This book is required reading. After completing the book, complete this final exam, print it, and submit it to your instructor. (This book is a supplement to your HTML book. This book is to be read as homework). We also have the book Graphic Design Basics for students who would like to pursue more of the artistic side of Web development.

We also have other design books available in class.

Tutorial 7 – Working with Cascading Style Sheets

Before you begin tutorial 7:

Checking Your Work in Multiple Browsers

Now would be a good time to get into the habit of checking (testing) your Web page in multiple Web browsers if you haven't been already. FireFox is installed on all of the classroom computers and there is a tutorial for using Firefox on my Web site. You should have already configured HomeSite to preview pages in Firefox already, if you haven't read Getting to Know HomeSite for instructions.

You must install the top five extensions noted in the article Firefox Extensions for Web Developers. These are essential tools for Web developers.

Opera, Netscape, Internet Explorer 7 and several other browsers are installed on the instructor demonstration station. Feel free to log into the instructor workstation to test your work. There is also a Macintosh available for testing. The Mac has IE 5, Safari, Camino, Opera, and Firefox installed. The login username is student and the password is password.

Extra Resources

Books

This is one of the most important chapters in the book. CSS is now the preferred method for formatting Web pages. It is important to separate content from style through the use of external style sheets. Currently my favorite book on this subject is called Web Standards Solutions by Dan Cederholm.

Eric Meyer on CSS and More Eric Meyer on CSS ($40) are both available for purchase in the classroom if you would like to learn more about CSS after competing this unit. The CSS Anthology 101 Essential Tips, Tricks & Hacks ($28) is also available in class.

There may be times that you have to use what is called a CSS hack in order to get your Web pages to look good across all browsers. To learn more about CSS Hacks, visit http://www.robinsblog.com/?p=41.

Web Sites

You should look at the CSS archive at http://www.robinsblog.com during this lesson. I would also recommend searching for tutorials on CSS and purchasing supplemental books on the subject.

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.

You may want to convert pixels to ems while you're working with CSS, you may also find this Em calculator very useful when you want to convert pixels to ems.

Review Save Coding Time with TextPad Macros by Dale Mead.

Errors/Notes

CSS Code Sample

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 }. For example, I would write the code you are directed to type on page HTML 353 #2 like this:

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. I also always end the last property value pair (in this case color) with a semi colon (as indicated in bold above).

I also tend to use a specific font style, i.e., Verdana, Arial, Helvetica, then finish the code with a generic font.

I also use hexadecimal color values instead of color names. This is because there are only 16 "legal" color names that are truly supported in HTML and XHTML. If you use hex values you have wider variety of colors. So for step #2 on page 353 the hex value would be #FF9900.

Shorthand values can be used for color. Instead of defining color with the six digit hexadecimal value (#FF9900) you can use a three digit shorthand. Shorthand values work with the 216 Web safe colors. This is because all of the Web safe colors use hexadecimal pairs, i.e. #FF 99 00.

For example, I want to use a Web safe shade of orange; the hex value for this shade is #FF9900. Notice that there are three pairs of numbers: FF, 99, 00 (these are the hexadecimal pairs). Because these pairs use the same value you can write this value as #F90 instead of #FF9900. Notice that we have just eliminated the second digit in the hexadecimal pair. This shorthand only works with Web safe colors. There is a nice CSS Color Shorthand Chart at SEO Consultants.

While we are on the subject of shorthand, CSS shorthand allows you to set several style rules in one declaration. An example of CSS shorthand that I use frequently is margin settings. Normally you would set the margin in CSS like this:

margin: margin-top | margin-right | margin-bottom | margin-left

.test {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 2em;
margin-left: 1em;
}

In CSS shorthand you can write the same style rule like this:

.test {
margin: 1em 2em 2em 1em;
}

.test is the selector
margin is the property you are changing
1em 2em 2em 1em are the values you are assigning to the property margin
Everything between the two {} braces (I call them squiggles, but this is not a technical term) is referred to as a declaration.

When you use CSS shorthand the property values are adjusted in the following order: top, right, bottom, left. An easy way to remember this order is using the acronym TRouBLe. Now if you hear me walking around the classroom saying trouble a lot you'll know why. Using CSS shorthand also reduces the number of characters in the css file thereby decreasing the file size and improving the load time. CSS shorthand can be used for backgrounds, fonts, margins, padding, borders, and lists. You can learn more about CSS shorthand in this Introduction to CSS Shorthand. You can also find a version of this document at SitePoint with some additional references. You may also find this CSS 2 Reference from W3Schools helpful (the description column notes which properties can be used with shorthand.

Page HTML 354 - CSS documents do not contain any HTML tags. Therefore you do not include the <html>, <head>, <title>, <body>, or <style> tags in the CSS file.

HTML 356 - Import - The @import statement is actually quite handy and very popular because it is not supported by older browsers like Netscape 4.7. By using the @import statement to access your CSS file, older browsers will ignore the command and they will not attempt to render the styles. When older browsers try to display styles that they do not understand the results can be very unpredictable and ugly. Therefore, you can use two style sheets. One that is linked that includes CSS that Netscape can understand and a second style sheet that includes styles that Netscape cannot understand that is accessed using the @import statement. Core CSS has a chart that displays the level of browser support for each CSS tag. This chart covers 20 different browsers. You can also 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.

HTML 361 - You may find this article on Pattern Matching and Inheritance helpful when you're learning about selector patterns.

HTML 366 - If you would like to learn more about IDs and classes, read When Should I Use a Class, When Should I Use an ID?

Page 371 #2 - It is up to you which color values you use in your Web documents. I did find a cool Web site that allows you to easily convert RGB values to Hex and visa versa. This site has other JavaScripts that you may be interested in using on your site. If you do not want to use the color names, use this chart to convert them to hex or rgb.

Page 371 #3 - The book uses points for font sizes. Remember that you should only use points for print. They can be used when you are creating style sheets for print. You may find this font-size comparison sheet helpful when converting from one unit of measurement to another. You may want to review my font notes from Tutorial 3.

HTML 387 - 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.

HTML 399 - Review the following articles:

Relatively Absolute
Float Layouts
Fixed vs Liquid vs Elastic
The Jello Mold Piefecta Layout

Page 404 - Figure 7-63 in the .notes code there is an error. You should omit the code margin-bottom: 5px;

HTML 410 - The book is rather sparse on its discussion of designing for handheld devices (PDAs, cell phones, etc.) It is very important for you to develop an understanding of designing for handhelds. Review the resources in the article Resources for designing for handheld devices. If you want to test your handheld stylesheet you will need to use the instructor workstation and open your html document in Opera. From the View menu in Opera select small screen.

HTML 420 - The @page rule is not widely supported. If you set your pages to print in landscape, you will have to test in Opera on my workstation. You can see a browser support chart of printing properties here. You may also find A Print CSS Primer helpful.

Page HTML 422 - Before you begin the review exercises and case problems I would recommend that you review the layout resources available on the blog. Complete all Case Problems for this tutorial.

Page 424 #9 - You should prohibit the display of list items in the #main selector, not the #gallery selector.

Page 430 - The longstxt.htm file has a mistake. The <div id="summary"> tag is positioned before the <body> tag. Move the <div> tag just after the <body> tag.

Page 431 - #4 bullet 5 - should be online_map, not outline_map. The summary ID should be set to position: absolute, not position: relative.

Additional Assignment

Update your HTML project page to use an external CSS file. Remove all inline styles from the index.htm page. Add additional links for Projects 5-7 and upload your edited files and the case problems.

Tutorial 8 – Using Multimedia on the Web

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 HTML 443 (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:

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.
Many computers have security settings that disable multimedia content. This may affect the design of your site.
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:

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.
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.
Don't use tags like bgsound that automatically start playing when the page loads.
Use the object tag to include multimedia files on your site.

If you need to use media objects on your site A List Apart has an article on using the object tag called Bye Bye Embed.

Coding for multimedia frequently changes. With each new version of the Windows Media Player new code must be used. I would recommend that you read the W3.org's implementation recommendations for multimedia. 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.

You should read this article Microsoft Delays IE's ActiveX D-Day as it impacts the use of multimedia on Web pages.

Page HTML 471 - The Review Exercise and Case Problems are not required for this lesson.

HTML 472 #4 - You can see a sample of the completed rainier3.htm file here.

HTML 473 #9 - Inserting the CreditRoll applet - The C and the R in CreditRoll.class must be uppercased.

Note: Many applets will not work when you upload them because they are demo files that do not work on the Web.

If you find an applet on the Web that you would like to use for your project, please ask your instructor first.

Tutorial 9 - Working with XHTML

I have some additional XHTML resources listed at http://www.tinkertech.net/tutor/xhtml/index.htm.

Pay careful attention to this chapter. Your final projects must be XHTML compliant.

Page HTML 513 - Complete all Review Exercises and Case Problems for this tutorial.

Additional Assignment

Update your HTML project page to be XHTML Transitional. This page must validate. Add additional links for Projects 8-9 and upload your edited files and the case problems.

Tutorial 10 – Working with JavaScript

This chapter is usually the hardest chapter for students to complete. The coding is complicated and the theories are abstract for most students. 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 learning JavaScript.

Extra Resources

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. Here is a list of Supplemental Tutorials on the Web and some students have found the tutorials at the Free JavaScript Learning Center helpful.

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.

Solution Files

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 chapter 10. Please review these solutions prior to beginning the case problems.

Tutorial 10 - Tutorial & library.js
Tutorial 10 - Review & library2.js
Tutorial 10 - Case 1 & spam.js
Tutorial 10 - Case 2 & random.js
Tutorial 10 - Case 3 & calendar.js
Tutorial 10 - 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

Notice the 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 is set to always display. 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 HomeSite click (located in the vertical center toolbar) to display line numbers. Scroll to the line number with the error. Proofread that line of code and the lines above and below. If that line contains a call to a function somewhere else 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

Page HTML 549 - First line should read: The single equals sign is an assignment operator and should NOT be used for making comparisons...

Page HTML 565 - The Review Assignment and Case Problems are not required for this tutorial.

Additional Case 1 – Creating a Company Web Site

Pages ADD 1 – 9

Additional Case 2 – Creating a Style for a Web Site

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 required 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. You can then re-open the file in TextPad.

Pages ADD 11 – 17

Additional Case 3 – Creating an Online Newsletter

Page ADD 21 - You cannot use the CreditRoll.class file with the <applet> tag and use a DOCTYPE of "Strict" XHTML. The <applet> tag has been deprecated. We attempted to use the <object> tag, but it would only work in Firefox with the following code. Instead you can validate this Additional Case as transitional or....

Lillian found the XHTML Object code in the article (Multiple Browser Supported) Java applet using XHTML 'object' tag. You can see Lillian's code in action on her TwinLife exercise file. Thank you Lillian! You can see the correct object code for this assignment in this text file.

Pages ADD 19 – 21

Certificate: In order to earn a certificate in XHTML students must complete the XHTML Final Project. This project should be completed before starting another course module. Note: I want to review your work as you progress through the course, do not wait to submit required projects. I will not accept all of your projects during the last week of course or after you have completed the course.

Project Preparation

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

Review the article on making your documents XHTML Compliant.

Review this article on Knowing Your Users from Autistic Cuckoo.

Review 10 Steps to Higher Search Engine Positioning and the Basics of Search Engine Optimisation.

Review Why Consistency is Critical.

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 and they should not take the assessment without reading the review packet. 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). Special note: This assessment is free and is written for HTML 3.2 instead of HTML/XHTML, the coding requirements will be different, so it's important that you review the packet from your instructor prior to taking the assessment.

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 design book, 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. Review the articles and resources posted in the search engine category @ robinsblog.com and the class forum.

The site should be XHTML compliant (transitional) and you should validate all pages prior to submitting it to your instructor. http://validator.w3.org/ - You do not need to include the W3C validation image.

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 robinshosting.com.

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 and your HTML Project Proposal to your instructor. After submitting this packet, please schedule a site review meeting with your instructor.

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.robinshosting.com (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 Web development resources can be found at http://www.robinsblog.com or http://www.tinkertech.net.