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.