CS200 AssignmentHelp With , HTML,CSS Programming Assignment,Help With css Course Assignment
R Programming| R Programming
CS200 Assignment 5 Page { PAGE } of { NUMPAGES }
CS200 Assignment 5 – HTML and CSS
Due Monday February 10th 2020, 11:59 pm
Readings and Resources
On the web: { HYPERLINK "http://validator.w3.org/" } : a site that will check a web page for
faulty HTML tags
{ HYPERLINK "http://jigsaw.w3.org/css-validator/" } : a site that will check a web
page or external
CSS file for faulty CSS
{ HYPERLINK "https://www.student.cs.uwaterloo.ca/~cs200/" \l "handouts" }:
commented HTML
Texts: The Non-Designer’s Design Book, by Robin Williams, chapters 1–6, pages 117–120
Learning Web Design 4th Ed., by Jennifer Niederst
CSS Pocket Reference, by Eric Meyer, chapters 2, 4–9, 11, 12
Other Resources: http://www.w3schools.com/html/default.asp
http://{ HYPERLINK "http://www.htmlcodetutorial.com" }
{ HYPERLINK "http://www.westciv.com/style_master/academy/css_tutorial/" }
http://codeacademy.com/learn/web
Check our Pinterest page for other resources: https://www.pinterest.com/cs2000143/
Assignment Objectives
• To create a webpage for yourself using HTML and gain an understanding of how a webpage
works.
• To use tables, hyperlinks and images correctly.
• To familiarize yourself with and use Cascading Style Sheets (CSS) to format your webpages.
• To gain a stronger understanding of clients and servers and how webpages are shared.
Assignment Strategy
• This assignment must be done individually.
CS200 Assignment 5 Page { PAGE } of { NUMPAGES }
Your Tasks
For this assignment, you will be creating a small website for yourself using a text editor
(TextWrangler is available in the lab, but you can use any text editor of your choosing). Each
question contributes to creating your website. While you won’t be able to do all the questions in
the first lab, you should read through the entire assignment before beginning, to get a sense of
what you’ll be doing. In particular, read through all of question 1 before beginning.
1. [55%] Your site must include at least 4 HTML pages and at least 1 external CSS file, as
described below (the instructions for the 4th html page is in question 2). In part C you will be
applying CSS to style these webpages. It will be helpful to read through all of question 1 before
beginning, and you might want to consider all parts simultaneously, though you won’t be able
to complete all of question 1 until we’ve covered CSS in lecture.
Part A:
⎕ A page named root.html. This will be your homepage, which must include:
⎕ Your name and username at the top of your web page;
⎕ Your name as the
⎕ An image (such as the photo you edited for A3, or something else). Note that you may
only use the gif, jpeg and png image file formats in web pages.
⎕ Two absolute hypertext links to other web pages (ie. sites you find particularly
interesting);
⎕ A list of something;
⎕ A table of something;
⎕ A mail-to link to your UW email account;
⎕ This page should be visually appealing, easy to read, well designed, and consistent with
the guidelines from The Non-Designers Design Book. Make sure you follow the four basic
principles of visual design described in the book. Part B asks you to define at least 2 of
these basic principles and explain how you’ve applied them in root.html. You will likely
find this easier after learning and applying CSS in part C.
⎕ A relative hypertext link to each of:
⎕ design.html (see part B),
⎕ username.html (see below),
⎕ form.html (see question 2)
⎕ This file must be named root.html.
CS200 Assignment 5 Page { PAGE } of { NUMPAGES }
⎕ A page named username.html, containing the following:
⎕ Text of your choosing (ex. this could be more detail about something from root.html, or
anything else you’d like).
⎕ There must be a relative hypertext link from root.html to this page, as listed above.
While you are not required to have a relative hypertext link in design.html to go back to
root.html, think about why this would be a good website design choice.
Part B: Appearance of root.html. You will be marked for the appearance of root.html as
displayed in Firefox or Chrome. This might be easier to do after learning about CSS and doing
part C. You are also required to have the following:
⎕ A page named design.html, containing the following:
⎕ A definition of 2 of the 4 basic principles from the Non Designer’s Design Book.
⎕ A brief explanation (few sentences each) of how you applied these 2 principles to your
root.html page. Note that you should not have violated any of the 4 principles, but you
only have to define and explain your use of 2 of them. There will be bonus marks for
defining and explaining your use of the other 2 principles.
⎕ There must be a relative hypertext link from root.html to this page, as listed in question
1. While you are not required to have a relative hypertext link in design.html to go back
to root.html, think about why this would be a good website design choice.
Part C: You will now apply CSS to the webpages you just created. You can be as creative as you
want, as long as you follow the principles in the Non-Designer’s Design Book and satisfy the
following. In either root.html or username.html, you must have:
⎕ At least 9 distinct user-defined CSS styles defined and applied, as follows:
⎕ At least 3 of these must be defined in the section of the page using a