Two Simple Websites

Assignment 1 for CS 337

This assignment is composed of two parts. Everything for both parts should be zipped up and submitted as per the instructions at the end of the assignment.

Part 1 - A Basic Topical Wiki

In part 1, you are tasked with writing a simple set of Wikipedia-type pages on a related group of 4 subjects. Each of the 4 html pages should be similar in style to a typical Wikipedia page (though, in this case, the pages can be much shorter, and much less detailed). Each page should be on a particular topic, and the four topics together must be related. However, the specific topic/theme is up to you! Here’s a few examples of the themes and topics that you could choose for the four pages:

• The pages could be themed around the show Bosch on Amazon. The topics for each pages could be:
  • One for the show Bosch itself.
  • Another for the book series, by Michael Connelly, that the show is based on.
  • Another page for Titus Welliver, the actor for Bosch.
  • Another page for the actor Jamie Hector, who plays another key character, J Edgar.
• Perhaps you enjoy NFL football. The topics for each pages could be:
  • One page for the NFL in general.
  • A page for the NFL commissioner.
  • A page describing the rules of the game.
  • A page describing the NFL super bowl.

Note that you should not use one of these two examples. Think of your own! At least one of the four pages must be named index.html (presumably, whatever the most important page is), and the rest can be named whatever you like, as long as each ends with .html. Each page must contain at least the following:

• A title with large text
• At least one paragraph of text describing the topic
• At least one ordered or unordered list
• An image that corresponds to the topic
  • All images should be stored in the ./img subfolder
• A link to all three of the other pages. These links should not be big, separate buttons. Rather, the links should be a part of the paragraphs and/or the lists within each wiki page, akin to how when you navigate Wikipedia, you can click on some of the words to link you to another Wikipedia page.

Part 2 - Styled Topical Website

In part 2, you are tasked with writing a simple pair of web pages, again, with a theme of your choosing. In this assignment spec, I’ll be using the theme of countries (specifically, the USA and Germany), but you should choose a different theme.

You should create at least two (you are welcome to add more) HTML pages. The body of each page should be sub-divided into three sections: A title section, navigation button section, and page content section. The content section should contain at least an image, a paragraph of text, and a table, all of which should have relevance to the chosen topic.

This part of the assignment should give you a chance to get experience using various CSS properties and features, including margin, padding, colors, fonts, borders, etc. Below is shown an example of what a result of part 2 might look like:

Notice that:

• Each section of the page should have customized colors, fonts, and font sizes
• Each section should consume the entire canvas
• All images show should have rounded edges and a custom border
• The table should have customized border and formatting
• Each page should have at least 10 customized fonts/colors/borders/ etc that differ from each-other. Presumably, these customizations could go along with the theme of the page. Notice how on the “USA” page I used a different font, and many red/white/blue colors, while on the Germany page I used some different fonts and Black/Red/Orange colors.

All of the CSS should be in separate CSS file(s) and linked into the HTML.

You should follow standard file structure rules, along the lines of:

File Structure

The file structure should be like so:

/ pa1
  /part1
    /public_html
      index.html
      ?.html
      ?.html
      ?.html
      / img
        ?.jpg
        ?.jpg
        ?.jpg
        ?.jpg
  /part2
    /public_html
      index.html
      ?.html
      / img
        ?.jpg
        ?.jpg
      / css
        style.css
        ?.css

Other Rules

Make sure that you take a look at the style guide on the class site before turning in your project. Specifically, make sure that you validate the HTML, otherwise you might lose points! Do not use absolute paths. Use relative paths instead.

Due Date and Submission

To turn in the project, zip up the entire pa1 directory, and submit via Gradescope. Make sure that all of the html and image files are included in the zip. The project is due by 7pm on Friday, 9/1/2023.