This site applies only to CMPT 165 (Distance Ed) in Summer 2016. See the CMPT 165 sections page for other sections.
In this assignment, you will create a web page containing a blog. Typically, blogs are created by software that arranges stories, moves stories into archives, keeps track of comments, and so on. Your page will just be a static XHTML file.
Of course, blog software has to produce HTML or XHTML out of whatever data it stores. This assignment is basically to do the blog software's job, without the interactive part: create the XHTML code for the front page of a blog. Your site will not be interactive and you'll only be creating the front page, not the story or comment pages.
For example, when you're done, the page might look like this:
Part 1: Markup
Create an XHTML page representing the front page of a blog. As usual, worry only about content at this point: we will create stylesheets later.
You can use the content from the screenshot above if you want. You can also make up your own blog content, but the general parts should be the same: title, link lists, stories/posts. If you want to use the content from the screenshot above, the text from the example page can be downloaded, just to save you some typing.
Your XHTML must be valid XHTML 1.0 Strict. As usual, you should use tags to match the meaning of the content.
Part 2: Stylesheets
You will create two different external stylesheets for your page. The point here is that the content in the XHTML file should be independent of its appearance. You must use the same XHTML (no changes) with both stylesheets.
You may have to go back and edit your XHTML while creating the stylesheets. In theory, you should only have to add some class and id attributes, or some <div> tags.
We will be looking for a reasonable level of difficulty in the stylesheets. In particular, you should do some positioning of elements on the page (typically starting with the float or position properties).
The two stylesheets must be reasonably different: you should do more than just change some colours or fonts between the two. Try for an overall different layout. This task is somewhat similar to the stylesheets that are available for the course website: each uses the same markup, but they have very different structures.
You do not have to make the page look like the screenshot above. It is provided only as a general example of what a blog looks like.
Use the CSS validator to make sure your CSS files are valid stylesheets.
Submitting
You can make two copies of the XHTML file, with the only difference being the linked stylesheet. Make sure you send the URLs of both pages. There is also a more “elegant” solution available…
It is possible to have two distinct stylesheets for a single XHTML file. The code for doing it is like this:
<link rel="stylesheet" href="style1.css" title="Style 1" type="text/css" media="all" />
<link rel="alternate stylesheet" href="style2.css" title="Style 2" type="text/css" media="all" />
In Firefox, you can choose which stylesheet to use by selecting View → Page Style. [You can try that on any page on the course website: there are several stylesheets available.]
When you're done, submit the URL of the XHTML page(s) to CourSys. If you only submit one URL, we'll look for the second stylesheet as an alternate stylesheet.