Greetings: I've just finished making up the quiz for Tuesday. Since we have covered a a lot of material in a very short amount of time, This post should give you some idea of what to study. The quiz covers accessibility, JavaScript, and chapter 14 (forms).

You will have one question of accessibility worth 30 points. The question is: The site http://www.w3.org/TR/WCAG10/ list 14 guidelines for accessible web pages. List any ten of these. So there is no excuse for missing this question.

You will have a 40 point question where I give you a form as it appears in a browser and ask you to write the XHTML required to create the form. This is similar to the example in your text.

There will be a 20 point question where I ask you to write a JavaScript script. You may use the pocket guide when writing this. If you were comfortable writing the bmi calculator, you should have little trouble writing this.

There are three additional questions totaling 10 points.

Be sure to review the handout I passed out in class on Thursday. Be sure to review the tags used to create and embed forms and JavaScript.

Greetings,

Here are the demos from yesterday's class. Since blogger doesn't like xhtml tags,
I've omitted the leading "<" from each tag. You'll need to add that back in.


These Demos are based, in part, on material from Felke-Morris's Web Development &

Example 2
document.write("h2> 'document.write' Demo /h2>");
document.write("p> This example show we can include XHTML tags. /p>");
document.write("p> We can also call functions. /p>");
document.write(document.lastModified);



Example 3
p>
a href="#" onmouseover="alert('You moused over');">
Mouseover Demo /a> /p>
p>
a href="#" onmouseout="alert('You moused out');">
Mouseout Demo /a> /p>



Example 4
var userName1, userName2;
userName1 = "Joe";
userName2 = prompt("Please enter your name: ");
document.write("h2> Hello " + userName2 + ". Welcome to my class. --- "
+ userName1 + "h2>");



Example 5
ar userName, userColor;
userName = prompt("Please enter your name: ");
document.write("h2> Hello " + userName + ". h2>");
userColor = prompt("Hello " + userName + ". What is your favorite color? ");
document.bgColor = userColor;



Example 6
var userName, userColor;
userName = prompt("Please enter your name: ");
document.write("h2> Hello " + userName + ". h2>");
userColor = prompt("Hello " + userName + ". What is your favorite color? ");
if (userColor == "green")
{
document.write("Green is my favorite color too!");
} else
{
document.write(userColor +
" is a nice color, but it isn't my favorite.");
}


Example 7
function showAlerts()
{
alert("Click OK for a funny joke.");
alert("Click OK to continue.");
alert("Are you sure?");
alert("Are you really sure?");
alert("Okay. All your files have been deleted.");
}
showAlerts();


Example 8
var direction, inValue, outValue;

direction = prompt("Enter an 'F' or 'C' (without the quotes).");

if (direction == 'F' || direction == 'f')
{ inValue = prompt("Enter the temperature in Celsius: ");
outValue = 9.0/5.0 * inValue + 32
document.write("The equivalent Fahrenheit temperature is: ", outValue);
}
if (direction == 'C' || direction == 'c')
{ inValue = prompt("Enter the temperature in Fahrenheit: ");
outValue = 5.0/9.0 * (inValue - 32.0)
document.write("The equivalent Celsius temperature is: ", outValue);
}


Example 9
// This is a comment. It is ignored by the computer
// Comments are used to describe code to people that might be looking at it.

// First, we want to set aside some spots in memory to hold information.
// We'll call those storage areas "firstNumber", "secondNumber" and "sum"
var firstNumber, secondNumber, sum;

// Next we'll ask the user to supply us with two of those numbers.
// Notice that we are putting the values in the storage areas we created
// in the last step.
firstNumber = prompt("Enter a number: ");
secondNumber = prompt("Enter a second number: ");

// Now we will do some math. The "Number()" business makes sure
// the computer treats the entered values as numbers and not text.
sum = Number(firstNumber) + Number(secondNumber);

// Finally, we'll write out or display a label ("The sum is: ") and
// the answer (sum).
document.write("The sum is: " + sum);

Greetings: This entry is for today's (Nov 11) class. We will be talking about the quiz on Thursday and accessibility. The best place to go for accessibility information is http://www.w3.org/WAI.

Here is some review information for the quiz. Anything marked with a * will definitely be on the quiz.

Review Sheet for Quiz on Chapters 11. 12 and 13

Matching 10 questions/20 points. Possible terms for matching

div
span
absolute
border-collapse
caption
clear
colspan
float
frozen design
height
jello design
liquid design
list-style-image
list-style-type
normal
pseudo class
rowspan
screen
shortcuts
static
summary
tables
text-align
viewport
width
z-index

Other Questions:

Chapter 11:
Describing flows
Calculating Box Widths
Descendent rules
*Shortcut rules for margin, padding, border, background, and font
Pseudo-class for links
*Specificity

Chapter 12:
Using: float, width, clear, auto, absolute
The distinction among different layouts

Chapter 13:
*Table layout and formatting including summary, caption, headers, CSS rules, border-spacing, border-collapse, background-color, rowspan, and colspan
list-style-type and list-style-image

Class #19: On Thursday, we talked about the project. The directions are relatively complete at this point. (I may add some clarifications if I get questions, but I don't plan to add any more requirements.)

Next we quickly went over the last chapter on page layout. We then moved on to the chapter on tables.

Finally, we looked at stupid table tricks with Excel.

For Tuesday, you should demo the creation of a table. Don't forget the link.

Class #18: On Thursday we looked more at page layout. I went over an extended example showing work-flow approaches. One thing I stressed was drawing a border to make sure you understood what was happening with boxes, etc. You can easily deleted it when you have things worked out. Under the heading of Dumb Excel Tricks, we looked at an example of setting up repeated formatting using Excel and it auto-fill features.

For Tuesday you should have the first page of your project on line.

Class #16 & #17: Sorry, I've gotten a little behind with this. On Thursday, we talked a little about "span" and move on to the quiz. Specifically, we looked at how I'll use span to control the fonts for displaying English, Chinese and Pin Yin on my web page. We also looked at pseudo classes and shortcuts.

Tuesday we went over the quiz and then finished Chapter 11. We looked at some concrete examples of using media="print" and introduced "visibility: hidden;" and "display: none;". We looked at descent selectors and cascading with descent selectors.

We also began talking about flow and Chapter 12. In particular, we looked at "float".

For homework, you should create an example that reflects what the authors are doing in Chapter 12 and link to it from your web page. For next week, you should have the first page of your project online.

Class #15: Today we spend most of class talking about the test on Thursday. Here is the breakdown of what to expect:

15 points: Naming and converting between color representations. This implies you know how to convert to and from Hex and how colors mix.

16 points: Identifying font families, styles and decorations.

12 points: Doing font calculations. For example, how many pixels tall will a font be after some multiplier is applied? If you see a key word for size, assume “small” is 12 pixels and that they scale by 20% as described on page 353.

20 points: Layout with box model including content, padding, border, and margin specification.

12 points: Background and background images

12 points: Border design

8 points: Multiple style-sheets, cascading, media

5 points: id vs class rules

We also started chapter 11 talking about “div” and shortcuts in style specifications.

Good luck on the test. See you Thursday/