presented by linda hemenway
XHTML Assignment Explained
Listed below are the steps you need to follow to complete this week's assignment.
- Read Chapter 1 in your textbook. The author explains why XHTML and CSS are important, how pages were built in the "old days" and how they are built today. XHTML is reviewed and the differences between HTML and XHTML are explained. The author also discusses the 9 rules that are different in XHTML and HTML. Some of you may be able to read the chapter in 1 sitting while others need to take breaks after a few pages.
- Review the DVD > css-part1 > start-here.html > XHTML lesson. The videos and web pages focus on what a page built with old code looks like and what needs to be done to bring it up to today's standards. If you learned HTML several years ago a page like this will seem familiar, however if you have learned HTML recently you will be horrified by the code you find in the example shown on the DVD.
Unfortunately there are millions of pages built with code that had uppercase letters, no ending tag, no DOC TYPE.... the list goes on and on. We begin the class learning about these types of pages because someday you may be hired to work on a site built with the old technology. We want to expose you to the mistakes of the "old days" and give you a chance to fix this code. - Before you start watching the videos and working with code, you need to decide what "old" Web page you want to use. I have provided 2 examples, because I have found that if students just go out on the Web and look for "old days" sites, they may end up with pages that are such a mess they can never clean it up. Both my example lessons contain errors which illustrate all 9 of the rules discussed in the textbook. I have intentionally added these errors so you can deal with fixing them.
Please choose one of these examples:
Example 1 - Lesson 2 from "Business of Web Design. I will be using Lesson 1 from this site in the DVD lessons.
Here is a link to the "Business of Web Design" site in it's original form with tables, Javascript and code errors. If you are feeling brave you can view the code and see how long and complicated it is.
I have taken that original page and stripped out all the JavaScript and table code. I have left in errors which illustrate the differences between "old' and "new" code. Click on the link below, view the source code, and copy and paste it into a new .html file which you name "old-code.html"
"Business of Web Design" course Lesson 2
Example 2 - Lesson 1 from an old version of my "Creating Web Pages with HTML" site. If you want more of a challenge, then this may be a good option. Choose this site if you want to be able to figure things out on your own, without having a video demonstration that shows you exactly what to do.
Here is the "Creating Web Pages with HTML" site in it's original form with tables, Javascript and code errors. You may want to view the code and see how long and complicated it is. We will not be using this code but I wanted you to see it.
I have taken that original page and stripped out all the javascript and table code, while leaving in the errors which illustrate the differences between "old' and "new" code. Click on the link below, view the source code, and copy and paste it into a new .html file which you name "old-code.html"
"Creating Web Pages with HTML class" Lesson 1 - New let's create a file and folder structure for the class. On your computer create a CSS folder. Within that folder create 2 sub folders "live" and "samples". Save the "old-code.html" file in the "live" sub folder.
- Now watch lessons on the DVD > css-part1 > XHTML:
# old HTML vs new XHTML
# revise old code [pt1]
# revise old code [pt2]
# revise old code [pt3]
These lessons show you how I took lesson 1 from the "Business of Web Design" class and cleaned it up so that it passed validation. When you take lesson 2 and begin to clean it up, the validator errors will be similar but slightly different than those shown in lesson 1. - Before you watch the DVD videos and begin to clean up the code so it validates you need to save the "old-code.html" under a new name "clean-code.html". This file will be saved in the "live" folder.
- Now work through modifying the code so it has a DOCTYPE, correct html tag, and all the tags within the page are correctly formatted.
- To validate the page you may either load the files onto the Web or validate by using "Validate by File Upload".
If your pages are on the Web you can simply click on the validation icon at the bottom of the page or go to http://validator.w3.org/ and enter your URL.
If your pages are on your computer you can select the middle tab near the top of the screen named "Validate by File Upload". This will cause a window to appear with a "Browse" button. Use this button to locate the CSS folder > "live" sub folder > "clean-code.html" file. - After the page validates, take a well deserved break.
- Please watch these videos listed below, which discuss code issues that may not have show up on the validator, the 9 rules which distinguish old HTML from new XHTML, and discuss the concept how the relationship between HTML tags are like those in a family. The concept of inheritance and terms like child, parent, grandchild and sibling will be discussed in this DVD lesson and expanded on in the next lesson.
# validator oversights
# 9 XHTML rules [pt1]
# 9 XHTML rules [pt2]
# 9 XHTML rules [pt3]
# document hierarchy - Now open the "clean-code.htm" file and add <div> tags around all the content. Assign these tags based on the type of content you are displaying. All the text that is in the top of the page will be in a "header" div tag, the top navigation in a "main-nav" div, etc. You may need to add more div tags as the class progresses, but for now just take a stab at creating div tags. If you are using the "Business of Web Design" example you may use my div tag structure and naming conventions.
watch this DVD demonstration
# adding <div> tags - The next 3 lesson on the DVD are:
# block vs. inline tags - reviews the concepts of classes vs ids, and block vs inline elements. The lesson on
# class file structure - explains where you should store your files on your local computer and then on the web.
# files used in this lesson - contains links to every example page used in this lesson, instead of hunting through each lesson use this page to find an example quickly - Next create a homework page which you will use each week to point to your new assignments. Here is a copy of a sample homework page can use as a model for your page. save this file as "homework.html" and save it in the CSS folder (not the live folder). In the XHTML lesson you need to create 3 links:
If you chose to use the "Business of Web Design" lesson as your example do this:- link to the original table based site - "Business of Web Design"
- link to the "old-code.html" file which is in your "live" sub folder
- link to the "clean-code.html" file which is in your "live" sub folder
If you selected the "Creating Web Pages with HTML" lesson do this:
- link to the original table based site - "Creating Web Pages with HTML"
- link to the "old-code.html" file which is in your "live" sub folder
- link to the "clean-code.html" file which is in your "live" sub folder
- As you review my homework sample you will notice that the assignments for the entire class are listed on the page, but the only active links are for lesson 2 XHTML. That is exactly what I would expect at this stage of the class. Each week links will be activated as you complete additional assignments.
- Now it is time to upload to the web. Earlier you were asked to create a CSS folder and within that folder place a "homework.html" page, and 2 folders "live" and "samples". This week the following files will be placed within the "live" folder:
"old-code.html"
"clean-code.html"
The first time you upload to student you can drag the entire CSS folder over into the public_html folder. In the future you will need to open the CSS folder > live or samples folder and drag individual files over to the web.
If you are confused about how to use the "student" server or need an account please review the "Begin" lesson on the DVD. - After you have a CSS folder on the web, use a Web browser to view your homework page. The URL of this page should be
http://student.santarosa.edu/~username/CSS/hpmework.html
Click on the links to make sure the homework page links to the original site, the old code and the clean code. - Now it is time to fill register your homework page using the form found on the class assignment page. Select the link titled Register HW page form. When you submit the form you will be asked for a username and password, these are not the same values you use to upload to the student server. if you have forgotten these values please send your instructor a note.
- After submitting the form your name and the URL for your homework page will appear on this page, http://www.sonic.net/%7Ewebclass/work/css/xhtml.html. I will use this page to grade your work and to create a "student work" page that lists all students enrolled in CSS and links to their homework page.
- After the work has been graded I will send a note to the class mailing list.
- If you are confused about any of the steps in this lesson please send me an email with your full name, class name, section #, and a detailed description of the problem. If you have a code question you must load the page onto the Web and include the URL in your email.
