The purpose of this assignment is:
First, write HTML. Then to discover that the frist design element of a WebPage is to separate content (HTML pages) from the display of content (CSS Style Sheets), textbook page HTML 7 (near Figure 1-1).
Second, help you appreciate using our TextBook. 100% of the HTML you need to write for this WebPage assignment is discussed in full and demonstrated in full. Tutorial 1 takes you through the process of making a WebPage titled "The J-Prop Shop". The WebPage you will write will be named "jprop.htm". Carefully read Tutorial 1, and at the same time write the HTML needed/illustrated for jprop.htm. At every step of this process, textbook graphics illustrate what your HTML will look like. And graphics illustrate how how your WebPage should look in a WebBrowser. Working through this, step by step, will make all future assignments that much easier to accomplish.
Third, to develop a Strategy for editing HTML. Your strategy should include:
- Make small changes.
- Save your work often.
- Use your WebBrowser to verify your WebPage looks like you expect. You can use the "Open" command of your WebBrowser to open the WebPage you are editing. Once open, you need to just reload (refresh) the page to see changes you make.
- Use W3C MarkUp Validator to find errors in your HTML.
- Upload your WebPage(s) to CPST WebServer will make using W3C Validator easier.
- Repeat steps 1 to 5 until done.
Please note that, in J-Prop Shop HTML, our Textbook uses a tag set <hgroup></hgroup> which has been dropped from the HTML5 standards. If you include these tags in your WebPage, it will result in W3C MarkUp Validator reporting an error. The easy solution is to not include <hgroup></hgroup> tags. As weeks pass, this problem will crop up over and over. Our textbook uses <hgroup></hgroup> tag. YOU WILL NOT USE <hgroup></hgroup> tags. This is an uncommon problem, but not a rare problem. <hgroup></hgroup> tags were in the HTML5 specification, but are not considered depreciated. So, W3C MarkUp validator will flag <hgroup></hgroup> tags.
-----------------------------------------------------Did you read this week's news yet? There are links at the top of this page. There is a new Assignment WebPage every week, and a new News page every week.
•• Read this regarding Self-grading your Canvas Discussions ••
There are several new Canvas discussions setup in the Discussions section of Canvas. Each discussion should be self-explanatory. The name of each discussion begins with "Week 1", indicating that it is to be used during Week 1 of class. See our SiteIndex WebPage for a complete list of Weeks and Dates for all Assignments.
The help discussion is "Week 1 - Help". Use this to ask any and all question you have.
You may add as many threads to these discussions as you like. Each time you substantially participate in one of these discussions you earn 3 points.
Remember, as a condition for taking this class, you already agreed to the following:
"I understand Canvas Discussions are a required (graded item) of weekly assignments. I agree that I will participate early in weekly discussions. I agree that I will read my fellow student's postings. I agree to visit weekly discussion forums multiple times every week. I agree to add threads that comment on other student's posts. I agree to use Canvas Discussions to help my fellow students whenever possible. In other words, I agree to use Canvas Discussions in place of conversations that would otherwise take place face-to-face in weekly classroom meetings -- which are otherwise impossible in an on-line class like this one."
Remember Canvas' Course Materials? Did you downloaded the Data Files for Students? If not, you want to do that now.
Once you have your copy of Data Files, inside the folder named "tutorial.01", inside another folder named "tutorial", you will find the two files you need to complete this assignment. One file named "jpslogo.png" is the J-Prop Shop logo, a picture file. The other file is named "jpsstyles.css". This is the CSS style sheet. You shall see that towards the end of writing the HTML for J-Prop, you will link your file to this style sheet (called an external style sheet). There is another file named "modernizr-1.5.js" that we will not need. You will realize that we need modernizr, but we will all use (link to) a version of "modernizr.js" on George's WebSite. Using this file is important, this is why all of us will link to the same version of modernizr.
If so far, this all sound like Greek ... no problem. We are just getting started Tutorial 1. I promise when you finish Tutorial 1, finish writing HTML for J-Prop Shop, you can return here, read this again, and it will not be Greek any more. All the time and effort you put into reading Tutorial 1, and writing the HTML for J-Prop Shop, will pay handsome dividends.
Guess what. That's it. Your turn. Start Tutorial 1 now. Write HTML for J-Prop Shop as you read.