Welcome to Lab #5. Today is for exploring CSS (and maybe a bit of JS).

Two excellent tutorials for CSS are at

1. w3school's CSS and

2. CSS 101 - A Beginner's Guide to CSS by Helen Meyer.

Of course, you can find materials on CSS many places. When there is a choice, look at CSS3, which is the latest standard.

Download the HTML file StairSteps.html. Create the file StairSteps.css so that the HTML page will produce the stairstep effect shown in the following picture.

1. The right sides of all the steps should line up in the middle of the document, regardless of the width of the browser window.

2. Each step must have the same height — about 3em — as all other steps, regardless of the number of lines of text in it.

3. Your CSS must generate the desired effect, even if the text contents of the various DIV tags were to change.

You may not make any changes to the content of the HTML file.

Download the HTML file WrappedSidebar.html. Create the file WrappedSidebar.css so that the HTML page will be rendered as follows.

1. The sidebar is on the left side of the page, while the content is wrapped around it. That is, the two <div>'s are displayed side by side at the top of the canvas, but when the bottom of the sidebar is reached, the content area should extend across the entire width of the browser client area.

2. The background colour of the sidebar is grey — decimal 221 for each of the three basic colours — while the background color of the content area is a light grey — decimal 236.

3. The sidebar has a solid border with a dark blue colour — #002060 — and its border is separated from the text of the content area by 1em from the right, and 1em from the bottom.

4. The list elements in the sidebar have no bullet, no indentation, and are 1em from the border.

5. The hyperlinks in the sidebar are displayed bold in dark blue, without the usual underline. When the mouse hovers on any of them, however, they appear in white on a dark blue background.

   Note, in particular, that the hover effect spans the entire width of the list item, not just the text of the link; that is, it is as if the <a> tag were a block rather than an inline tag.

6. Use the sans-serif font family for the content area, and the default for the sidebar.

Again, you may not make any changes to the content of the HTML file.

Download the HTML file tile.html. Modify the file just in the <style> section so that the HTML page will be rendered as follows.

1. Each coloured tile is 100px by 100px.

2. Borders are 1px and black.

3. The padding around tiles is 20px.

The tiles should flow to new rows as needed if the window is too small or is resized down. E.g.,

Again, you may not make any changes to the content of the HTML file outside of the <style> section!

Depending on your method, whitespace could throw off the padding a bit! It is not supposed to, but it often does with Firefox and other browsers. This superfluous whitespace is rendered, of course, in a font. In this case, we are not writing anything, though. Think what you might do with, say, font-size to make that problem go away.

Get a jump on learning JavaScript today, if you still have time. Take W3School's JavaScript Tutorial. This, and the textbook, will provide you with the information you need for the following task.

Download the HTML file PBclient.html. Create the file PBclient.js so that the HTML page will behave as follows.

1. Upon loading, the current time is displayed as shown in the “time” span. The format is hh:mm:ss — with a leading zero in any field if its value is fewer than two digits otherwise.

2. The time should continue updating itself every second. (Hint: use the setTimout method.)

3. If the form is submitted with a blank name, a message should appear in a third column of the table, saying, “Please enter a name.” (You may wish to create this column — and give it an ID in init() — in the base HTML file.)

4. If the user did enter a non-blank name and then pressed ENTER, TAB, or clicked elsewhere, the entry should be tranformed into all capitals. (For instance, “Godfrey” to “GODFREY”.)

   And if there is any error message appearing in the third column, it should be removed at this point.

5. The telephone value must also be validated, upon submission. If it is in one of the following three formats

   (123) 456-7890

   (123)456-7890

   123-456-7890

   then it is accepted and automatically converted to

   1234567890

   Otherwise, it is rejected, and an alert is used to show an error message. In this case, the entry must be highlighted and given the focus.

You may make small changes to the base HTML file, if this makes the job easier.

Submit your tile.html file for Exercise 3, “CSS: Tile Flow”.

submit 2041 lab5 tile.html

Remember, your tile.html should work having made no changes to tile.html outside of the <style> section!