There are six (6) homework exercises based on exercises done in-class or taken from the textbook. You will be asked to complete the homework and submit it to your account on bcitwebdev.com. Requirements for homework are:

• complete the homework as per the instructions provided in the lecture page where it is assigned
• upload the homework to your directory on bcitwebdev.com (recommend a separate folder for each homework)
• notify your instructor via an email in my.bcit that the homework is complete prior to the class in which it is due, sending the URL for the homeowork in the e-mail
• Use the name of the homework in the subject line of the email. (e.g. Homework 3)

Each homework is worth 4% but marked out of 5 points.

There is no re-submission of homework, and no late submissions.

Only the best five of the six homeworks will contribute to your homework grade. The lowest grade of the six will be dropped.

Create a small website with three (3) linked pages using the HTML5 standard.

Base your website on a theme of interest to you. Pick a topic based on:

• A hobby or special interest (e.g. fishing, a sport you take part in, your family pets, etc.)
• An area of study or expertise (e.g. financial investing for beginners, learning Chinese, etc.)

Your HTML5 pages should include the following elements:

1. Proper structure (e.g. head, body) and appropriate syntax (e.g. nesting, closing tags, etc.)
2. Tables used to organize layout of at least part of each page
3. A navigation menu consistent across all three pages
4. CSS for at least three selectors, defined using a <style> tag embedded in the head
5. At least three different block-level tags
6. At least three different inline tags
7. Does not rely on <br> or non-breaking space special character for managing routine spacing problems
8. A consistent footer including a link to your email address
9. Links to outside resources on at least one page.
10. An image on each page of an appropriate size and density for a web page, with the correct height and width configured
11. Coloured backgrounds and/or text with good contrast and readability
12. Underlying file structure based on a one of the following structures:
• EITHER homepage (in real life, index.html, but for our purposes something like assign01.html) in site root and one folder for 2nd and 3rd pages containing all elements of the 2nd and 3rd pages, respectively
• OR all html files in site root and all images in a sub-folder named images

Upload your pages to your account on bcitwebdev.com and send the URL to your instructor. In your e-mail, list the three block level tags and the three inline tags used in your work such that it is clear you understand which is which. (e.g. Block level tags used are: ; Inline tags are: )

For your second assignment, create a web site for an imaginary business, non-profit organization or government service.

Include the following site pages designed to be viewed by your audience.

Note: You may copy content from elsewhere on the web if you desire. But you are responsibe for organizing it meaningfully. If you use data from other sites, reference the sites used in your footer.

1. An introduction page introducing your imaginary business or service. Name the page something like assign2.html instead of index.html, etc. to make it possible to see a listing of your files in assign2 folder. Feature an image.
2. A catalog page listing repetitive items (e.g. an inventory, a list of songs, a list of real estate properties, past successes, news articles, etc.) The nature of the list will depend on the organization you pick. The list should be long enough to require scrolling to reach the bottom. It should provide for internal page navigation which does not require scrolling. You will decide on a navigation method to assit your users to work with the list. Note: The easiest option is to use fragment identifiers (p. 298) to jump from and back to a submenu across the top of the page.
3. A contact us page with a featured image and contact information for at least two staff members. Provide a picture of each and a title or role. Give at least two methods, each, for contacting the people. If you provide an e-mail address, make it a link (p. 55). You do not need to make links to other invented contact information, such as social media connections or phone numbers. Make reasonable choices about contact options given your target audience.

Include the following meta pages designed to be viewed by the instructor for marking purposes.

Note: Use the same layout, menu and other design elements for these pages as for the content pages.

1. An audience page where you describe your assumptions about the users of the site. Make a case, in at least two paragraphs, for why the nature of the audience justifies your choices about layout, menus, colors, fonts, etc.
2. A page called criteria that uses a table to explain how and where requirements are met. An example table is provided at the end of this description of Assignment 2, for you to adapt. Use special entity characters (p. 627) to make your code examples visible when rendered by the browser.
3. A page called project describing your plans for the final project.

Your assignment 2 site should meet the following criteria:

• Backgrounds (color or graphics) and text formatting (color and font choices) appropriate to your audience and creating a unified look for your website (See chapter 5). Defend your choices on the audience meta page.
• A fluid site design and navigation scheme that looks reasonable, and re-flows to fills the screen at full screen and half-screen widths. Images do not have to resize, and you do not have to use a full-fledged responsive design of any kind. Just make sure you use relative values for elements and float images.
• Correct syntax, page structure, and use of the HTML5 standard.
• One external style sheet for all shared CSS that is included in every file, with at least one example of a page that also uses embedded CSS to override the external style sheet, and at least one example of overriding both the external style sheet and the embedded CSS using inline CSS.
• Use of logical (i.e. phrase) elements (p. 39) formatted with CSS, rather than either a) using attributes for formatting, or b) using elements for their default display behavior rather than their semantic meaning. Note: An example of b) would be using the blockquote element to cause indending when the content concerned is not a quotation.
• Use of DIV and SPAN as target tags for CSS classes or IDs. (One example each, minimum.)
• Demonstrate mastery of the box model (p. 222 in text).
• NO use of non-breaking space characters or the br element for spacing. Control spacing through CSS, instead.
• NO use of deprecated tags or attributes (HTML5). See HTML Reference to identify deprecated tags and attributes.
• Use of two tags new to (HTML5). Test to be sure your choices work in at least the browser you are working with, personally. And be prepared to report the name and version of this browser. See HTML Reference to identify new tags.

Table for including on "criteria" page

Upload your new pages to your account on bcitwebdev.com and send the URL to your instructor via a my.bcit.ca e-mail. Put Assignment 2 in the subject.

Students will be asked to create an extensive web site incorporating concepts learned throughout the course. The content of the site should encompass an issue or topic that is relevant to the student, their friends, family or colleagues. If your company needs a web site, then this is a great opportunity!

The web site must include the following elements:

1. 12 to 20 pages interlinked
2. pages should conform to HTML5 standard
3. a navigation scheme consistent across the site and easy to navigate
4. an attractive layout, colors and general design
5. use of a wireframe layout with columns using float (see chapter 6 for examples)
6. a clear topic that is readily apparent on the home page;
7. a "clickable" site map or site index (i.e., supplemental navigation); Note: this should be a separate page - it is not your navigation menu;
8. at least 5 images (text header, buttons, photos, etc.);
9. text and presentation elements using CSS;
10. a working web form;
11. at least one JavaScript element (pop-up windows, image swapping, etc.).

Notes:

• Students may use an HTML editor to complete this assignment, but may not use prefabricated themes to define their site.
• Use tables for any tabular data. But not for page layout
• Avoid use of deprecated tags or attributes

Submission
Students must upload their web site to the account provided to them in class. Once they have tested their site in at least two popular browsers, students must send an email message to their instructor that includes the following information:

• the URL for the home page
• a checklist outlining how the above requirements have been met (Could be a WORD file, a text file, or included in the body of the email message

The instructors will not chase you down to hand in your assignment. If there is no email in our inbox on the specified due date, you will get zero marks for the assignment.

Marked using rubric based on:

• required elements (see above)
• navigation
• coding & markup
• content
• design

assigned: session 1
due: session 12
worth: 25%