The presentations are scheduled for Monday afternoon. You must be present for all the presentations. Each should last about 20 minutes. There will be time afterwards for your clients to ask questions.

A question came up in class today about the audience. Most of the clients will not know much about Web pages, although one of them is bringing his Web guy. They will be able to understand many of the accessibility and usability issues that you describe. For example, they will understand the notion of color contrast. They can understand that images need alternate text, but they won't know what alternate text is. So explain it. You might have changed the pages to use a linked style sheet instead of an embedded style sheet, so explain why that is desirable. In some ways, you are explaining to your clients some of the things you learned about this semester. You should still address some key technical issues. For example, if tables are used for layout on the site, explain why that is undesirable and then explain how you used CSS to replace the table. I used Word to come up with a diagram in about 5 minutes for the layout design being used by teal.

It is likely the case that you couldn't get everything to work just the way you wanted by Monday. In that case, explain what you wanted to do and what you tried that didn't work. Of course, put this in your 'report' on your group's site.

I asked you this morning to include in your presentation

• Some positive comments about the site before you start talking about the problems you found.
• Some comments about how well a visitor to the site can find the information that he might be looking for—for example, a phone number, an address, the purpose of the organization, or the services it provides.
• Some comments about how well a visitor can track his location within the site. Is there a heading or some other indication, such as a special indication on the navigation menu, as to where the current page is located in the site?

One thing I didn't mention, but that I hope goes unsaid, is that all the group members should take part in the presentation. Only one person at a time should be standing. (There are chairs to sit in along the wall near the instructor's desk.)

It is okay to link to external sites from your group pages, such as to the client's site, W3C pages about accessibility, Nielsen's pages about usability, Bobby, color evaluators, and other Web-based tools that you used. However, all of the files for your own pages and the mirror should be within your group folder and all links to them should be relative.

Please be prompt on Monday. The client scheduled for the 2:00 presentation is on a tight schedule, so we need to start on time.

I have posted the requirements for the final essay. It is due by the end of exams week. I have also distributed the rubric I will use to assess presentations.

Today we took a look at JavaScript. I found my pocket reference and I walked you through that a bit. There's not enough time in a semester to cover HTML, CSS, and a lot of JavaScript, so our focus on the latter will be to incorporate existing scripts into a Web page.

Friday I showed you the left right click gallery. There are some other nice galleries linked from the menu on that page, too. We talked about how you would put such a gallery on one of your own Web pages. Then we looked at some simpler scripts. One is for gatekeeper.

We talked some more about JavaScript. (To learn more than we can cover in class this last week, check out the W3Schools JavaScript Tutorial and the examples.) I showed you an example of using JavaScript to automatically put a latest modification date on a page and to put a clock on a page. We looked briefly at the JavaScript that does it to see if we could turn the time into a 12-hour format.

I handed back old homework and quiz papers that for one reason or another I still had. I also handed out a report of the scores I have recorded for your work all semester.

On Wednesday I will hand out a rubric that I will use to evaluate Part 3—the presentations. I will also give you details about the final report that will be due by the end of exam week.

Check out the Fangs screen reader emulator extension for Firefox.

Each group gave a presentation showing the revised client site home page and what the report site will look like. I have full confidence in the work one group is doing, some confidence in the work two more groups are doing, and some concerns about the fourth.

I found a couple of interesting sites.

1. Left right click gallery
2. CSSPlay.

We'll take a look at the former next week as part of our JavaScript investigation.

This class is dedicated to doing what it takes to get ready for Friday's deadline. As you work on the site to improve it, don't change the layout unless you have a reason based on accessibility or usability. If the colors being used don't offer enough contrast, then try to keep the more dominant color if that seems to be part of the organization's identity.

Have you thought about looking for broken links?

Here are some tips for working with the files.

• When working with your client site's style sheets, format them using a CSS beautifier such as Format CSS Online or Clean CSS. It's hard to work with style rules that are not formatted for human understanding.
• You can format HTML using the Firefox validator plug-in in the lab. I think you can also use NoteTab Lite to format HTML. I found Tabifier online as well.
• When I'm trying to make CSS work, I sometimes build a prototype—a simpler version of the page I'm trying to style. Once I get that working, I can move the style rules to the real page.
• Validate the XHTML often.
• Validate the CSS often, especially if you are trying to style something. It's so easy to miss a semicolon or a unit, or to misspell a property name and not see it no matter how much you look at the code.

I returned the quizzes that you took before the break. The distribution of scores is 20(3), 19, 14, 12(2), 8, 6, 4, 0. Average: 12.3.

So far, I'm planning to be available Thursday evening between 7:00 and 9:00.

Procrastination on your part does not constitute an emergency on my part. Anonymous

We reviewed the requirements for Part 2 of the project. You have two weeks to complete your group's report. These reports are to be published on the CS server at http://cs.wofford.int/groupcolor/. You should be able to SFTP files by logging in using your account and then setting the folder on the server to /var/www/html/groupcolor. There is already an index.html file in that folder as well as a subfolder named mirror that contains all the files in your client site's mirror.

As far as I can tell, I received information by the Tuesday deadline about pages to audit only from the navy group (5 points). The assessment of your work and your group's work was due at the start of class today (10 points). I've been very disappointed, too, by the relative dearth of blog posts about meetings. There were at least two meetings that I alloted class time for. Groups should have gotten together to meet and work at other times, too. On the positive side, the posts I did get to read were quite good.

Last time we built a two-level navigation menu using CSS. I discovered over the break that the pop-up sub-menus don't work in IE6. The fix? Use JavaScript.

At least one blog entry questioned useit.com and usability. Let's consider How Users Read on the Web as a starting point. This article mentions Eyetracking Research, which also contains some significant ideas. Add these ideas to your audit. [Who is Jakob Nielsen anyway?]

We worked today on some dynamic menus. I have a start on a new Web site for me at Wofford. I'm abandoning myblog look for a simpler, more accessible design. I've adopted a two-column, liquid layout [Zip of files we started with]. I want to add a navigation menu similar to what I have now, but with pop-up sub-menus á la son of suckerfish. For spring, I'll need the following menu.

• Home
• About me
• COSC 235
  • Syllabus
  • Schedule
  • Blog
  • Resources
• COSC 330
  • Syllabus
  • Schedule
  • Blog
  • Resources
• COSC 351
  • Syllabus
  • Schedule
  • Blog
  • Resources

At some point, I might want to use an elastic layout. And have you checked out Zen Garden: The Beauty of CSS Design lately?

The resulting Web pages that we put together are [Zip of files] linked below. I'm happy with the menus, although I still want to style them to look better.

• Horizontal menu
• Vertical menu (Hey wait! This pop-up doesn't work in IE6! And the nested selections go off the edge of the window. That's not too good!!)

Think about it: Why did we end up linking the home page to two CSS files?

Have a safe, restful, and yet productive break!

We heard reports from each group about the home page audits. The presentations, though necessarily brief, were reassuring to me that work is progressing. I asked each group to submit something in writing, preferably a completed checklist.

Reminder: Part 1 of the project has two deliverables due as we complete that part: one due by Tuesday and one due the day we return from Thanksgiving break

.

After the presentations, we took a brief look at Son of Suckerfish Dropdowns. I want to convince you that you know enough to use tips available on the Web in your own pages. On Monday, you'll help me create a menu based on these tips.

I came across a useful extension for Firefox: Firefox Accessibility Extension. Check it out!

We took a look at the XHTML for tables and the CSS used to style them in Chapter 13.

Check out Bobby.

There will be a short quiz on Wednesday at the beginning of class.

Please e-mail me the audit checklist due today if you didn't have it for class today. Remember: it was due today. And don't forget to update your blog with meeting info. (Today's class counts as a meeting. If you missed class, you need to meet with at least one of your teammates to find out what you need to do.)

The four team presentations went well. There was som good cross-fertilization of ideas. For example, he Navy team found Dive Into Accessibility and that seems to be a good source of information.

I did a quick introduction to tables in HTML and showed you how using Nvu makes working with tables a lot easier than doing them by hand. I showed you an example of some ways to style the parts of a table. Chapter 13 of HFHTML covers tables in more detail (and better than I did). Please read it.

Wish the programming team much success as we head to Myrtle Beach today for the CCSC:SE contest.

Project Kick-off

Today we started the project. It will run for the rest of the semester. I will give you time for groupwork in some classes. We will use some class time for reporting findings and progress. Please note that the groups are not in competition with each other. If a group is doing something that you like, then your group can adopt the other group's good idea.

I'm going to check out the information at useit.com. Jakob Nielsen is a respected authority on user interface design. He's published a lot of tips about making Web sites and Web pages usable. (Usability is different from accessibility.) I encourage you to investigate the site, too. You'll be addressing usability of your client's site as part of the project.

I came across a color scheme generator. There are lots of them on the Web. The interesting thing about this one is it lets you see how people with various types of colorblindness will perceive a color scheme.

It was my intent to kick off the project today, designating groups and using class time to get groupwork started. However, I heard from only four of you about your availability/non-availability by Sunday afternoon at 5:18. So I need another day to assign students to groups. Consequently, we will kick the project off on Wednesday.

The homework assignment will help to prepare you for Wednesday's groupwork.

We worked some more on the lab we started on Friday. I want the navigation menu to look better. I googled css navigation, visited the first link returned and found Free Menu Designs. I downloaded the files for the set in the middle. You can use that set or pick another from that page to use. Icorporate the CSS into your style sheet and put the image(s) used by the rules in the appropriate folder on your site.

Note: There is a wealth of information about CSS techniques for doing all sorts of wonderful things. Congratulations! You know enough to be able to start applying them.

Homework

Read Conformance Evaluation of Web Sites for Accessibility and Involving Users in Web Accessibility Evaluation. Keep in mind that for our client sites, our target conformance level of WCAG 1.0 is AAA.

You should identify at least two Web accessibility evaluation tools that you think your group should use. You will report Friday on the ones your group has decided to use.

Be sure to read through the Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0.

Reminder: Groupwork accounts for 25% of your grade for this course.

I have a two-column layout if you'd like to check it out.

Today we worked a lab that I hope will help to tie a lot of things together.

Lab

Use the tools we have to refactor (change and improve) your personal Web site on cs.wofford.int and to give it a new presentation. Work through the steps below.

Setup: SFTP the root folder and its contents to your lab computer. Add the folder on your computer to Nvu's site manager.

1. Create a style sheet that all pages on your site will use for layout and other style features. The layout will be the one you prepared for today—that is, a two-column layout with a header and a footer. The style sheet should be in /styles.

   A lot of Web pages look better with a textured background. Google free web page backgrounds, select one that works with your presentation, and add it to your style sheet. You can use this background for the whole page, the header and footer, or one or both columns. Be sure to put a comment in the style sheet showing the source of the image (in case you want to go back to it later.)

2. Change your home page to use the two-column layout.
   1. In the header, put your logo and your name.
   2. In the footer, put your contact information: CPO box number, telephone, and e-mail address. Set up your e-mail address as a link to your Wofford e-mail—for example, sykesda@wofford.edu.
   3. In the fixed-width column, create a navigation menu as an unordered list and include the following links: Home, About me, Class blog, Reflections, Investigation, Client site, Client mirror.
   4. In the variable-width column, put the other things on your existing page.
3. Validate the XHTML and the CSS used for the home page. Under the navigation menu, put the icons for validated HTML and CSS

   

   Note: You'll need to validate via URI in order to get access to the images.

4. Create a new page to link to from Reflections on the navigation menu. This page should be in a folder named /reflections. As usual, name the page index.html. This new page should have the same layout as the home page. The link on the home page should reference this new page. The Home link on the new page should reference the home page. Fill up the content with fake Latin text. Make sure the page displays properly in a browser and that it validates.
5. Transfer the files up to cs.wofford.int. Verify that they can be viewed in a browser.

I collected the accessibility checklists that you put together. I talked a bit about our project that we'll work on after we finish Chapter 12. (We'll cover Chapters 13 and on after the project is underway.) I found somebody's list of most accessible Web sites. We looked a t a winner, but don't quite know why it won—at least not yet!

I returned Quiz 4. The scores were 20(2), 19, 18.5, 17, 16.5, 16, 14, 13, 11, and 8.5 with an average of 15.8. If you did not do well, make sure you understand what you missed.

We also took a look at layouts using CSS. HFHTML Chapter 12 presents some ways of doing layouts. We also took a look at CSS Layout Techniques: for Fun and Profit. What do you notice that these various techniques have in common? Each element that is associated with the layout is given an id and rules are written to position and style that element. Most often, the element is a <div>.

Homework

Construct a Web page with a two-column layout. The page should also have a header and a footer that spans the two columns. The left column should have a fixed width and contain a navigation menu. The right column should be "liquid" (or "fluid") and contain the main content of the page, which for now can be fake Latin text. The footer should contain contact information and have centered text. The header will contain text that serves as the main heading for the page content.

You may work with another student in the class on this. Put a sample HTML page and the external style sheet on the cs.wofford.int server, then send me the URL. If you work with a partner, be sure the e-mail message you send me states both names.

Due by the start of class on Friday.

You took another "quiz from hell." [Key to Quiz from Hell #4] Remember my motto: Quizzes should be learning experiences!

Homework

1. Finish reading Chapter 11. I encourage you to complete the work-along exercises, but you don't have to.
2. Browse the Web Accessibility Initiative (WAI) Web site to get familiar with what is there. Read Preliminary Review of Web Sites for Accessibility. For Wednesday (one week from today), make a checklist that you can use to evaluate a Web site for accessibility based on what is discussed in that article. Put your checklist on a Web page (XHTML strict, of course!). Number the items in your list. (Remember <ol>.) Send me the HTML file as an attachment to an e-mail message having the subject Accessibility Checklist. The e-mail message must have a timestamp before 12:00:01 AM on Wednesday, October 31, 2007. Open the HTML file in a browser, print the page, and bring a copy with you to class to turn in.

3. Note: I will be among those at the 2007 DOE Day of Science in Knoxville on Monday. Consequently, class will not meet on Monday.

   Read Chapter 12. Chapter 12 covers how to use CSS for page layouts—arranging things on a Web page. This chapter covers what is probably what you have most wanted to know all along (but what you didn't know you wanted to know). As you read, jot down at least three things that the chapter mentions that leave you either confused or wanting to know more about it. Be sure to write down specific pages. Bring your list with you to class on Wednesday.

For Fun

Log into your blogger account, click on the Template tab and then the Edit HTML link, and take a look at the HTML code for your blog. CSS style rules are embedded in the HTML. Change some of the style rules—colors, font families, margins, paddings, and the like. You can even define your own classes. (I defined one for homework. You are reading a <div class="homework">, in case you are wondering how I do it.

Enjoy the fall holiday and come back next Wednesday ready to get started on the project that will keep us all busy for the rest of the semester. I really would like to get through Chapter 12 next week (only two class meetings). I will be relying on you to dig into the chapter and learn what you can. Don't forget to do the work-along!

I introduced the <div> element, the idea of descendant selectors, and the width attribute. These will be covered in more detail in the reading assigned for Wednesday. The reading also covers shorthands for specifying related properties.

The zip file for the Chapter 10 exercises did not have the file print.css that the book mentions. Consider this print.css. Notice how various properties are set for printing compared to the settings for screen media.

Then we worked some more on the site for my mail-order business.

Quiz on Wednesday.

Homework

Read the first part of HFHTML Chapter 11—up through page 461. Stop at page 461 for this exercise. Do the work-along exercises [files to start with].

When you have finished the exercise, send the files lounge.html and lounge.css as attachments to an e-mail message having the subject Chapter 11 Part A.

We reviewed the CSS box model. I introduced the notion of the id attribute and how id's differ from classes. (Do you remember talking about the id attribute of an HTML element before today? Look back at pp. 152ff.) In a CSS rule selector, a class is identified by a period—e.g., .blueberry—while an id is identified by a pound sign—e.g., #navmenu.

I handed out an HTML cheat sheet and a CSS cheat sheet. Use these to trigger your memory about various things. Keep in mind that more details are available at DevGuru and other sites.

A couple of things to remember from last time:

• The unit em is the height of an M in the current font.
• If the levels of red, green, and blue in a color are the same, then the color is a shade of gray. #333333 (or #333) is a darker shade of gray and #aaaaaa (or #aaa) is a lighter shade.
• White is full intensity of all three colors (#ffffff) and black is the lack of all colors (#000000).

There will be a quiz next Wednesday. It will cover what we do through Monday's class.

Lab

I am starting a mail-order business called Dave's Daylilies. I know using a Web site to sell my products will be much cheaper than using printed catalogs. I sell daylilies, iris, and bird feeders.

Design a Web site for me. I know that eventually I will need to have the site use server-side scripting, but for now I think I can manage with static pages since my inventory is small: 12 kinds of daylilies, 15 kinds of iris, and 4 kinds of feeders.

Here is what I need users of my site to be able to do.

• Browse by type of product (daylily, iris, or birdfeeder). I should have a photo of each product eventually. I have a few already in a zip archive.
• Print an order sheet.
• Contact me via telephone, e-mail, or snail mail.
• Learn about the care of daylilies and iris. (Fortunately, they are pretty much care-free if they are planted correctly so there's not much to provide other than planting instructions, watering, and dividing.)
• Learn about the company.

What I'd like from you:

1. A design for the Web site—that is, the pages you recommend and how they are organized into folders.
2. A design for the home page, including what the navigation menu should be and what pages it links to.
3. A suggestion for the presentation. Since I'm just getting started, I could use a logo and a color theme.

For now, just use lorem ipsum to fill out the text parts of the pages that discuss products and product care.

Homework

Read the rest of Chapter 10 and complete the work-along exercise. Be sure your HTML file and your CSS file validate.

When you have finished the exercise, send the files lounge.html and lounge.css as attachments to an e-mail message having the subject Chapter 10 Part B.

We discussed accessibility. The general consensus was that we have a corporate social responsibility to make accessible the parts of the Web we develop. (I tried an accessibility check on my home page. One should and one may fix!)

We also worked a bit more with Nvu [download]. I walked you through some of its capabilities and some of its quirks (a need to refresh the site manager and the odd way you need to set up an external style sheet). We developed a skeletal Web site with a home page, an image, and a style sheet. I hope you'll start to use it and explore its capabilities. It makes you more productive than you can be coding tags by hand. However, you will often have to view the source and edit it to create the page you want. I encourage you to use it for the homework due Friday.

I introduced the CSS box model.

On your blog, please comment on (at least) three different Web sites each week. Be sure to check your grammar and spelling. Put a link to the page you are discussing.

Homework

Read pages 385–413. Work along with the book using the files provided. Be sure your HTML file and your CSS file validate.

When you have finished the exercise, send the files lounge.html and lounge.css as attachments to an e-mail message having the subject Chapter 10 Part A.

We talked briefly about answers to the homework assignment for today and then you worked through a lab in pairs.

We also welcomed Austin to our class. He was visiting Wofford today as a prospective student.

Lab

1. Find a partner to work with.
2. Download the file LoremIpsum.html to your computer.
3. Create an external style sheet that will make the page look like mine. (Why am I linking to an image instead of to an HTML file?)
4. Before the end of class, send me the CSS file via e-mail. Be sure to let me know the names of both partners.

The colors I used are among the standard 17 CSS colors.

Feel free to ask me questions or to as questions of other pairs around you.

Homework

For Wednesday, read the handout Introduction to Web Accessibility.

We investigated KompoZer after Quiz #3.

Homework

Read Chapter 9 of HFHTML.

Answer the questions below and bring the answers with you to hand in at the start of class on Monday.

1. For the font-family property, a list of font names can be specified. How does a browser use this list? And why isn't specifying one font sufficient?
2. What does the line-height property specify?
3. What is the meaning of the unit em? What is the em equivalent of 150%?
4. What does font-style: normal; mean?
5. What color is rgb(0,0,0)? What color is rgb(255,255,255)?
6. Suppose I want to set my page's background to the color listed as tomato among the X11 color names. Give two values I can list in a rule to get that color.
7. Determine the decimal values associated with the levels of red, green, and blue for the hex code #daa520.
8. What do all these colors have in common: #111111, #555555, #888888, #aaaaaa, and #dadada?

We reviewed CSS and many of the concepts discussed in Chapter 8. I posed a few questions and we discussed the answers [sheet from class].

I announced a quiz for Friday. I plan for it to be short. It will cover HFHTML chapters 6, 7, and 8. If you understood what we talked about this morning, then you should be in good shape.

We spent some time installing KompoZer on the lab computers because Nvu does not want to run correctly on some of the computers (including mine!). I'll show you how to use KompoZer next time.

I encourage you to start reading Chapter 10. I think you will find it interesting and useful. It focuses primarily on fonts and colors.

We continued to look at style sheets today. The latter part of Chapter 8 introduces some important concepts:

• external style sheets
• inheritance [pp. 311-315]
• fonts (sans-serif and serif) [p. 309]
• classes [pp. 316-323]
• CSS validation (jigsaw.w3.org/css-validator)
• various properties (p. 330)

Homework

Read Chapter 8. This is a key chapter to "get" for understanding how CSS works.

We started cascading style sheets (yay). They are covered in Chapter 8 of HFHTML.

Here is the style element we put into a Web page today. Recall that a selector designates the element type that the rule applies to and that the order rules are listed matters when two rules seem to contradict (as in the two color property settings for <h1> elements in the example.

<style type="text/css">
/*  style rule syntax: 

    selector {  property: value; ... }

*/

p {
    color: teal;
}

h1, h2, h3, h4, h5, h6 {
    color: teal;
}

h1 {
    border: thin black dashed;
    background-color: silver;
    color: black;
}

</style>

Homework

Read pages 285–310 of HFHTML. Add some style to your class home page on cs.wofford.int: sans-serif font of a color you choose (not black) and a background color of your choice (not white). See if you can figure out how to get a border around the whole body that is the same color as the text.

We started Chapter 7. Moving right along! We discussed XHTML and XML—how XHTML is the future. Benefits of using XHTML are given on pages 270–271 of HFHTML. On page 282, the authors note, "The choice is yours." I'll add, "No, it's not." At least in this course! You are required to use standards-conforming XHTML for your Web pages for the rest of the semester. The good news: You are almost there! at least in terms of what you have learned so far. Pages 274–275 of HFHTML explain how to get there.

To help you understand XML, check out this CD catalog. I admit that it's not very pretty, but check out the URI and the source (View Source in your browser.) Notice anything? There's no HTML, just XML. The cool thing about XML is that elements can be designed to get across all kinds of information, not just information about the components of a document that HTML does. And XML is expandable—that is, more kinds of elements can be added. XHTML is an XML version of HTML. HFHTML mentions (page 271) that people have already added some elements for math equations.

I also like the recipe example in the Wikipedia entry for XML.

Lab today: Download xml.html and revise it so that it validates as XHTML 1.0 Strict. Work with a partner. When you are done, send the file to me via e-mail. Please make the subject be XHTML Lab. Please copy (CC) your partner.

Homework

Read Chapter 7.

Revise the index.html file you submitted for the assignment due today to be XHTML. Send the validated file to me as an attachment to an e-mail message addressed to me. Please make the subject of the e-mail be Validated XHTML page. You may work with a partner from the class. If you do, make sure the e-mail message indicates so.

We started Chapter 6. My goal is to get through Chapters 6 and 7 this week. They are closely related. Then we will move on to cascading style sheets and accessibility.

A few links:

• W3C Markup Validation Service
• Character encodings
• Quirks mode

I returned the second quiz today. The score distribution was: 19.5, 16, 15, 14, 13, 12.5(2), 10, 9.5, 9 and 7. The average was 12.5. We spent a little time going over the most-missed items. Problem #2 gave the most trouble. Problem #3 gave the least. The rest were pretty much even, although 4, 7, and 9 had the largest standard deviations.

Homework

Download the archive of a small Web page. Edit the file index.html so it validates as HTML 4.01 Strict.

If you uncompress the archive to your W: drive, you can specify the URI of the file, just like I did in class for my home page. If you uncompress the archive to a local disk, then you'll need to use the Validate by File Upload method of input, or you can use the third tab, Validate by Direct Input.

Attach the validated HTML file to an e-mail message sent to me. Please make the subject of the e-mail be Validated 4.01 page.

You may work with another student in the class on this assignment if you like. If you do, please CC: the other student in your e-mail message and also put his/her name in the message.

Oh, I updated the key for Quiz #2 with a corrected diagram for the nesting hierarchy.

You took Quiz #2 [key] and created a blog on blogger.com.

Homework

Create an entry in your blog. Put a link to your blog on your home page on cs.wofford.int.

Today we reviewed the worksheet due today and I answered any questions still lingering about what we've covered so far. I We also talked about your blog today. I introduced Blogger.

Reminder: There is a quiz on Friday covering Chapters 1–5, with a particular emphasis on Chapters 3–5.

Create a blog

As you use the Web every day, think about the pages you visit from the perspective of what you are learning about in this course. For example, you might like (or dislike) a page's layout or the way the navigation is set up for the site the page is in. Record your thoughts in a Weblog. Be sure to include links!

Make at least 3 posts each week. I will read them at random intervals, but at least twice a week.

As shown on the syllabus, this blog contributes to 10% of your grade for the course. I will assess you primarily on the content of your blog: depth of thought and reasonable content. I will also look for correct spelling and grammar.

Later in the semester, you will use your blog in association with your work on the project.

Put a link to your blog on your home page on cs.wofford.int.

We finished up Chapter 4:

• The title attribute for <a> elements [see p. 149].
• Linking into a page [p. 151ff], even on the same page
• Linking to a new window [p. 157]

I also showed you NotTab Light, a freeware Windows application that I have used quite a bit. I like the way it makes editing HTML files less tedious.

Homework

Complete the worksheet that was originally due today. Since so many of you had trouble with Photoshop Elements, I'll extend the due date for your home page on cs.wofford.int until the start of class on Wednesday.

I expect those of you who are having trouble transferring files to the server to make an appointment with me. I'll be happy to help you with Photoshop Elements if I can.

I figure that it is time to abandon Notepad and TextEdit and move to something a little more useful for editing Web pages. On the PCs in the labs, I thought we had installed NoteTab Lite. This program runs only on Windows machines, but take heart, Mac users! We will only use NoteTab Light for a short while before we move on to something better that runs under MacOS X and Windows. We'll check it out soon in class.

I asked if there were any things from Chapter 3 that are still mysterious (à la last Friday's assignment that I forgot to talk about on Monday!). We reviewed the idea of nested elements. As I mentioned, this notion of nesting will play an important role in styling Web pages.

I showed you a picture—a picture of a window on my desktop— that I stored in five different image formats: BMP, TIFF, JPEG, GIF, and PNG. The image files were different sizes and some images looked better than others while others were downright pathetic. [images]

showed you a little about Photoshop Elements.

Homework

Read Chapter 4 if you have not done so already. Then read Chapter 5 and complete the worksheet I have put together.

Here are a couple of tutorials for using Photoshop Elements to create a logo. Use Photoshop Elements help to figure out how to do some of the steps. You can also check out Dr. Whisnant's lessons.

• CBT Cafe Photoshop: Text Swoosh Logo
• Photoshop Tricks & Tips (Photoshop Elements lacks a few capabilities that Photoshop has.)
• Making a company logo in Adobe Photoshop
• For what it's worth, Logo Design at About.com
• And Drew recommends PhotoshopCAFE

Today I returned two assignments: the sykesda Web site organization and the worksheet for chapter 3. I think the best organization for the sykesda Web site is to have a folder for each course and then put all the files for a course in that course's folder, including the images for the textbooks. Those images go in an images sub-folder for a course folder. I like the parallel organization. Notice that I have renamed many of the HTML files. Knowing what we now do, all the files named home.html will be renamed to index.html. [You should figure out why!] [Full solution.]

One more thing to keep in mind: path names in attributes should match the case of letters used on the Web server. Windows servers are not case-sensitive, but Mac and Linux servers sometimes are.

I showed you how to transfer files to a Web server using an FTP program. (We used welcome.html and hey.html.) Our server, cs.wofford.int, requires use of secure FTP (SFTP). Some Web servers do not require secure transfers and accept plain ol' FTP. The program we used, Secure Shell Client, runs on a Windows machine. The program Filezilla is a little easier to use [you want the client]. In runs on a PC and a Mac. On a Mac, I've also had good luck running Fugu. Your root folder should be accessible in the www folder that you see on the remote computer. If you have trouble with that, then use this path on the remote to get to your root folder: /var/www/html/yourusername/

Homework

For Friday by the start of class, put a Web page on cs.wofford.int that will serve as your home page for this course. I should be able to reach this page using the URL http://cs.wofford.int/yourusername/. On the page put the following information: Your name, your CPO number, a local phone number, your Wofford e-mail address, and a picture of you (or of something). The file for the picture should be in an images folder. A favicon would also be nice.

Keep in mind that this server is accessible only from the campus network so you must use a computer connected through the campus network as your SFTP client. Your username is the same one you use to read your e-mail and log into lab computers. But your password is your W number (with a capital "W").

Today I returned Quiz #1. I collected the homework due today and we went over questions 2 and 3 in class:

2. If you want the text in a quote to be italicized, should you put that text in an <em> element? Explain your answer.

Don't use <em> to italicize the text of a quote. That element is intended to reflect emphasized text. Use it only for that. A style sheet rule is a better choice for italicizing the text.

3. Why does HTML include a <q> element when quotation marks serve the purpose? In other words, why code <q>To be or not to be.</q> instead of “To be or not to be”?

Again, tags are intended to reflect the structure of the document. If something is a quote, tag it as such. Using quotation marks loses the context of the quotation from the browser's perspective and, as such, style rules cannot be applied to style that quotation.

We finished up Chapter 3. There are some interesting new tags, including <hr>, <address>, <code>, and <pre>. The chapter also introduced character entities, which are used to put special characters on a page, such as <, >, and &. There are lots of others, too.

I started talking about Chapter 4 and getting pages on the Web. Web pages have to be on a Web server in order to be available on the Internet and the World Wide Web. Wofford students, faculty, and staff have access to a Web server on the Wofford domain, wofford.edu. On the lab PCs, your root folder on the Web server is accessible as the W:\ drive after you log in. Just put a file foo.html on that drive and it's available on the Web at http://webs.wofford.edu/yourusername/foo.html. You can also access your root folder on that Web server from your own computer when it's attached to the campus network by following the instructions on pages linked from Wofford College Student Technology Information page. Connect to nas/webs/yourusername instead of nas/students/yourusername, e.g. for a Mac use smb://wofford;nas/webs/yourusername. In class today, you created a page on the W:\ drive and accessed it through a browser. We talked about the significance of naming a page index.html.

On Wednesday I'll show you how to use FTP to put files on a server.

Homework

Create a Web page named index.html on the Wofford Web server. Give the page a favicon. This is your home page as a Wofford student so make it meaningful. (Don't be concerned about the presentation. We'll work on that when we get to CSS.) Then e-mail me the URL of your page.

Suggestion: Use a browser on a different computer to check the URL and to verify that the favicon works. I'll be viewing your page with Firefox.

Due by the start of class on Wednesday.

Note: You can use Paint on Windows to crop a photo to use for your favicon—in case you'd like to use a mini-photo of yourself as your favicon. It's best to start with a square image (any length per side) for a favicon.

The first quiz was today [key].

I showed you how to add a favicon to a Web page. It requires a little HTML editing and saving the icon file on your site. One source of icons is Leo's Icon Archive. [Google free icons]

Homework

Read back over Chapter 3 and jot down (at least) three things that confuse you. Include page numbers.

Today we reviewed the homework for today and the notions of relative and absolute paths. Then we started talking about some of the key concepts covered in Chapter 3:

• Planning the structure of a page.
• Structuring files on a Web server.
• Inline versus block elements.
• Empty elements.

I announced that there will be quiz on Friday covering Chapters 1 and 2. You can look at some quizzes I've given before in this course by following the links on the right of this page. Parts of Quiz #1 and Quiz #2 from Spring 2007 contain relevant questions.

Homework

For Friday, modify the organization of the files in the sykesda folder that you downloaded for today's assignment to reflect the structure you recommended to me today. Then modify all the links in the HTML file so that they work—that is, they are not broken. Use only relative links. On Friday, turn in a printout of the HTML for the pages in the site. Also turn in the organization description that I initialed today.

For Monday, read Chapter 3. Then answer the questions on this worksheet. (The answers to questions 2 and 3 are pretty much stated in Chapter 3.)

We reviewed how to code hyperlinks in HTML and what attributes are. These topics were covered in the reading assigned for today. The first part of Chapter 2 also raises a question about how to learn about more HTML elements. One site I like to use as a quick reference is DevGuru. I like W3 Schools as a source for getting better explanations of the various elements, especially with the Try-it-yourself feature.

Then I talked about how to organize a Web site in the context of the example in Chapter 2 of HFHTML. Web site organization refers to the way the files that make up a Web site (HTML files, image files, and so on) are placed on the server—the folder (directory) structure used. I also reviewed the concepts of absolute and relative paths in hyperlinks. Always use relative paths when referring to files on the same Web site. Check out the Web Diner Tutorial or the CoffeeCup tutorial if you'd like another explanation.

Homework

Read the rest of Chapter 2 in HFHTML. Then organize the files for my Web site for me based on the following scenario.

I have a new Web site I'm putting together. Right now the structure is flat—everything is in one folder. I like the organization that the HFHTML authors describe in Chapter 2 for the lounge. (I especially like the idea of putting images in a directory named images.) Rework the files in my site so that it uses a better directory structure and every image file (.jpg or .gif) is in an images directory. Let me note that each semester I teach a different set of courses, so the groups of files for each course should be in separate folders—all the files for COSC 115 in one folder, etc. For Wednesday, sketch how these files are better organized. Use the notation from Chapter 2 of HFHTML.

Today I returned your first homework papers and we finished up Chapter 1. We looked at some of the points covered in the chapter that we didn't get to last time. I had you download some text and then mark it up to look like my page. I encouraged you to copy and paste tags as much as possible.) The picture is a nice addition to the bottom of the document.

Homework

For Monday, read pages 43–56 of HFHTML. This introduces the <a> element, which creates a hyperlink. Please download the files for the chapter and work along as you read. This will help you remember how to use the anchor element.

After you have finished reading, edit your about.html file to include [at least] 3 links. For example, you might make the words "Wofford College" link to the college's home page. Look for other references on your page and set up the hyperlinks—for example, some of you referred to your high school, a sports team, or an organization you are a member of. (Add some more text to make links if you can't find 3 links in what you already have.)

Be sure to make corrections to any spelling and grammar errors that I flagged on the papers I returned today.

Turn in a printout of the HTML file (from Notepad or TextEdit or a View Source window in a browser) on Monday. Before you print out the HTML source for the page, load the page in a browser and make sure the hyperlinks actually work.

We talked about a lot of the concepts discussed in Chapter 1 of HFHTML. I walked through some of the parts of the chapter that I think are important and that you should make sure you understand. We did the matching exercise in class to cover a lot of the terms we'll be using all semester.

Terms

1. attribute: provides a way to specify additional information about an element
2. metacognition: thinking about thinking
3. filename extension: for example, .html in index.html
4. <head> element: provides information about a Web page
5. opening tag: <h1>
6. cascading style sheets: used to describe how content should be presented
7. Web server: waits for requests for Web pages, images, sounds, movies, etc., and responds to such requests
8. HTML: provides the content and structure of a Web page
9. HTML comment: <!-- This needs some work! -->
10. closing tag: </h1>
11. element: opening tag + content + closing tag
12. Web browser: requests HTML pages, retrieves them, and displays them

Homework

For Friday's class, add an image to the page you did for today and set the background color of your page. You can use the dull tan color in the book, or you can use one of the standard CSS color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, or yellow. (You'll learn later how to choose from millions of colors!) Put the image file in the same folder that your about.html file is in. Open your file about.html in your favorite browser. Make sure the image displays. Print the Web page from the browser. [This printout does not have to show the background color.] Then select View | View Page Source (or similar selection) from the browser menu and then print the HTML source for the Web page. Turn in the two printouts at the start of class on Friday.

After introductions, we talked briefly about the syllabus and my expectations for you in the course. If you have any questions about how the course will work or what we will be doing, please ask them to me. If you are having problems with assignments or any other aspect of the course, please contact me.

We jumped right into creating a Web page. I had you work in pairs to log in and use Notepad to create a simple Web page. HTML is a mark-up language. Tags are inserted into the page to give some structure to the information in a page. Tags identify headings, paragraphs, and so on. Remember, a minimum Web page has three parts (elements):

<html>
  <head>
  </head>
  <body>
  <body>
</html>

Homework

Read Chapter 1 of HFHTML. Then create a Web page named about.html that contains the following (in order):

1. A level-1 heading containing your name and any nickname you prefer to use.
2. A level-2 heading Local contact information followed by a paragraph that lists your CPO box and any phone number(s) I can use to contact you.
3. A level-2 heading General information followed by a paragraph that lists your year at Wofford (freshman, sophomore, etc.) and your major(s) and/or minor(s). If you don't yet have a major, use "undecided." Also list any college athletic teams of which you are a member. You can include any other information that you think I'd like to know.
4. A level-2 heading Operating systems I have used followed by a paragraph that lists the operating systems (Windows, Mac OS X, Linux, etc.) that you are familiar with. If you have your own computer, indicate which operating system it runs.
5. A level-2 heading Level of comfort using Microsoft Windows followed by a paragraph that describes your familiarity with Windows. For example, are you comfortable with instructions such as, "Create a new folder on the C:\ drive," "Make sure the extension is .txt," "Right-click the icon and select Send to... from the pop-up menu," or "Navigate to the folder containing the file summer.html"? It is okay if only some (or even none) of these make sense to you.
6. A level-2 heading Familiarity with creating Web pages followed by a paragraph describing any experience you have creating Web pages. “None!” is a perfectly acceptable answer. If you have worked on Web pages before, please describe the Web site(s) you created them for and what tools you used to create the Web pages.
7. A level-2 heading Things I would like to learn in this course followed by a paragraph describing any topics you would like to see covered in this course.
8. A level-2 heading Agreement followed by a paragraph containing the following:

   I have read the course syllabus. I have noted the due date of the final project and the date and time for the presentation to clients. I understand that my work on the project will be given to my clients and that they have my permission to use my recommendations and results as they see fit. I understand how I will be graded in this course, and I understand how the Wofford College Honor Code applies to my work in this course. I understand that if I have any problems with my work for this course, I should consult with Dr. Sykes.

Set the page's title to About your name.

I have created a sample page for you to mimic (although I'm not a student).

After you have created the page, load the file into Firefox, print the Web page, and then sign it "pledged" and date it. Turn it in at the start of class on Wednesday.

I am busy getting ready for this course. I have made a syllabus and other documents available on the Web, but these are subject to change before the first day of class. The textbook information will not change.