It's always better to NOT waste paper. Try to learn to look at two windows at once on the screen. Exercises are subject to corrections & changes! Please do not rely on a printout of this assignment! Always check the online version for corrections and any links which will not be available in the printout.

There are LINKS on this page that you must click on. Do not email me to ask where the information is. Go back to the website and look at the page online!

POINTS: 48 points (Template -11 points & Webpages 37 points

SUMMARY: Start design the your web site and implement a prototype. Create a template for your website project and two pages. Be sure you have completed the storybook template exercise first!

General information about the project can be found on the Milestone 1 page


Files and folders and naming items


HTML Coding Reference

For this part of Milestone 2, a template will be created for your webpage. The template will have the basic HTML structures and elements which will be the same on all your pages.

Preliminary. Starting your template page.

  1. Go back to Milestone 1 and look at the sketch you created for your website. Draw boxes around elements that should be grouped together and name the boxes. Decide which boxes contain elements that will be on all your pages and which boxes contain content that changes on every page. Your should have at least 5 boxes.
  2. In Brackets, start a new file. Type in the doctype code at the top, then save the file with the name sitetemplate.html in the main folder of your ICS107Site (NOT in the exercises folder). See picture above.
  3. Enter the HTML codes with the language parameter, the head codes and body codes.

Add the following elements

  1. (1 pt) Incorporate an HTML title - recommended the name of your site.
  2. Include the following sections in layout structures.. The list below is NOT in the order they should be on the page. Use common sense for placing these elements. You may substitute another section for the ones listed, when submitting the assignment in Laulima specify which substitutions were made in the comments box. Each section MUST be in a layout element and each layout element must have a different ID. Be sure your ID names have NO SPACES! (Example: my content is not acceptable instead use mycontent) When naming your layout elements avoid using the name body or other HTML code to avoid confusion with those codes..
    1. (1 pt) Layout structure for the main content- appropriately named
    2. (1 pt) Page footer layout structure with the following information
      1. (1 pt) Copyright information (required) Use the copyright symbol followed by the year then your name or if creating for an orgnaization use the organization's name
      2. Contact information (optional)
      3. Other information which you consider appropriate.(optional)
    3. (1 pt) Header layout structure- appropriately named with the following elements
      1. (1 pt) Containing site identification. This should contain a heading with the name of your site. It may also include a logo or additonal text.
    4. (1 pt) Common navigation appropriately named
      • (3 pts) List all the pages in your site. Remember proper HTML requires that lists be made into a list, preferably an unordered list.
        • Create links to all 6 of your pages. Be sure to name the pages as specified in the navigation. This will make it easier as we go, so you don't have to manually update the navigation as you create new pages. The main page must be named index.html.
        • Use only 1-2 words for each page link.
        • Although your main page file name is index.html DO NOT use the word index as the link for this navigation item. Index usually has different connotations for readers use Home, Main Page or other appropriate description.
        • Link words should be and appropriate. Do NOT use " Page 1", "Second Page", etc. as link words. Let your audience know what is on the page the link.
    5. (1 pt) Include a whole page division appropriately named into which most of the above layout objects are placed or include one other layout object. (You can include as many other additional layout objects, but you are only required to have 5.)
  3. (5 pts) Template uses proper HTML and meets accessibility guidelines -See the Web Page Checklist at the bottom of this page.

Pages based on template

  1. (14 pts) Create a main page for your web site based on your template. Open your template file and immediately save the file with the name index.html replacing the existing index file file Be sure you are saving to the top level of the ICS107Site folder and not the exercises folder. DO NOT USE ANY OTHER NAME FOR THIS FILE! This filename must be in ALL lowercase letters. Do not save the file in any subfolder.
    • Grading criteria
      • Page has sufficient content (at least 3 paragraphs or approved other content). See the lesson on Usability & Accessibility for what your main page should contain.
        • DO NOT use regular paste to past in content particularly if pasting from a word processing document. Use Edit -Paste special selecting Text only from the dialog box, then go through an press enter at the end of paragraphs. A normal paste may place in styling which we do not want at this time.
        • If pasting from Notepad or TextEdit. Be sure there is a blank line between paragraph before copying. You may need to go in and press enter after paragraphs, then copy and paste.
      • Double check all content to make sure it is in a proper structure. Look at the code to be sure paragraphs are defined by separate paragraph codes<p>..</p> and not by line breaks <br />
      • The title for your main page can be just your site name as entered on the template.
      • Page meets checklist criteria. - Points are awarded based on the checklist criteria.
  2. (14 pts) Create one additional page. Save the page in the same folder as your index.html file. The page should be named appropriately. Do not use page2 as a name. The name should have something to do with the content. Use no spaces in your filenames.
    • Grading Criteria
      • Pages are created using the template for your site. Save the file with the file name used on the navigation links.
        All web page files must be saved to the top level of your ICS107site folder.
      • Page has sufficient content. Content (previously submitted) is pasted into page and appropriate codes are added to make paragraphs, lists, heading, and any other text structures.
      • Double check all content to make sure it is in a proper structure. Look at the code to be sure paragraphs are defined by separate paragraph codes<p>..</p> and not by line breaks <br>
      • ALL IMAGES, STYLE SHEETS, HTML PAGES MUST BE SAVED WITHIN YOUR MAIN FOLDER!. Images may be saved in a sub-folder of the main folder, but do not save your project files in your exercises folder.
      • A unique title for each page,(title is the HTML code title and not a heading, though the first heading and the title can contain the same words. The tile should also include your site name.
        • For instance the first chapter in Alice in Wonderland has the title Alice in Wonderland Chapter 1. Chapter 1 alone is insufficient. Someone bookmarking the site won't know what Chapter 1 belongs to.
      • Page meets checklist criteria. - Points are awarded based on the checklist criteria.
  3. Incorporate at least one foreground graphic on either page.
    1. Grading criteria:
      1. (2 pts) Properly sized - image should be the same size as displayed on web site.
      2. (2 pts) Appropriate and descriptive alternative text specified

Website Checklist

Proper Structure

Page title specified

Proper use of HTML

For this assignment

Submitting your assignment

When you are finished with this milestone: