portfolio

1. 7 or more HTML pages interlinked
2. Clear topic that is readily apparent to the homepage
3. At least 5 images. All images must be displayed actual size
4. All text using CSS
5. All links pseudoclassed
6. At least 1 table, either for layout or as a part of the content
7. Clickable site map or site index (supplemental navigation)
8. An HTML form (no processing script is required)
9. At least 1 scripting element (client side or server side)

1. All files related to this oroject must be published on the COMP 1850 class server.
2. Navigation
   1. General Use
   2. Visual Effectiveness
   3. Shouldn't change its position or orientation throughout the site
   4. Links to pages within the website must not open in a new tab/browser.
3. Coding and Markup
   1. Use of only well formed and valid HTML, CSS, and scripting.
   2. Use of good indenting and appropriate file names.
   3. All HTML and CSS files must include a comment with your name near the top.
4. Content
   1. Both the design and content of the site must be entirely authored by the student.
5. Design
   1. Designed determined by either HTML tables or CSS
   2. Layout behaves well in IE and Firefox regardless of browser width and height
   3. Colour scheme and font choice(s) must be effective and attractive.

• Prepare a plan for the Final Project
• Analyze web usability
• Apply design principles

Describe your plan for the final project website. Include:

1. Description of the theme for the project (eg: promoting a friend of business, online resume site, travelog of vacation pictures)
2. Detailed analysis of the ideal audience for this website (eg: prospective employers, customers, fans of anime, etc)
3. Brief description of al least 5 of the pages the website will include)
4. Throughly describe the prime (and if applicable, secondary) objective(s) of the website

Analyze web usability and accessibility. Each of the following must be a unique website. Include:

1. A link to s website you use regulary. Describe why you find this site is useful. Explain what you think the main objective(s) of the site, and describe at least two ways the site deploys to achieve its goals.
2. A link to a website you think uses colour effectively. Determine some of the colour values the site uses and deploy them somewhere/somehow on your page as an example.
3. A link to a website that uses a layout you find appealing. Explain why you like this layout.
4. A list of at least 10 things you feel a web developer should avoid in order to increase the usability and accessibility of a site.

1. All files related to this oroject must be published on the COMP 1850 class server.
2. Navigation
   1. General Use
   2. Visual Effectiveness
   3. Shouldn't change its position or orientation throughout the site
   4. Links to pages within the website must not open in a new tab/browser.
3. Coding and Markup
4. Content
5. Design
   1. Designed determined by either HTML tables or CSS
   2. Layout behaves well in IE and Firefox regardless of browser width and height
   3. Colour scheme and font choice(s) must be effective and attractive.

• Implement Cascading Style Sheets
• Organize your webspace
• Collect online resources

This will be your new homepage of your COMP1850 webspace.

1. Include a navigation menu of links to each of the other three pages.
2. All three pages should be interlinked.
3. The navigation should have the same style and position on all pages.
4. Learn about two new HTML tags that are not covered in COMP 1850 curriculum (do not choose any form related elements such as the input tag).
5. Deploy the new tags on this page and include text that explains what you chose, and wht semantic value, if any, the tags possess.
6. Explain and demonstrate the use of some of these tags' attributes and/or CSS properties.

Include links to different online resources that you find useful to your needs as a web developer.

1. Choose resources that you can turn to when you need to learn more about HTML tags, CSS rules, or current events in web development. There must be a minimum of 10 resources linked to.
2. Resources must include 9but not limited to) the following topics:
   1. a page(s) with a list of HTML tags with associated attributes
   2. a page(s) with a list of CSS properties with descriptions and examples
   3. a website(s) dedicated to the latest news for web developers
   4. validating tools for HTML and CSS
   5. web developer related forum(s)

Find an online tutorial that shows how to perform a CSS technique not covered in COMP 1850 curriculum.

1. Learn, and implement this technique on tutorial.html page
2. Include text briefly describing in your own words what the tutorial taught you to do.
3. Include a link to the website where you found it.

For all three pages, demonstrate to the user that you care about their browsing experience by deploying appealing colours, fonts and possibly images. Each page should include some text that clearly explains the purpose/topic of the page.

1. All three pages must be valid HTML.
2. Use the same external stylesheet(s). No inline nor embeded style is permitted.
3. All textual content must be styled with CSS, and all links pseudoclassed (at minimum :link and :hover).
4. Deploy at least one example of each of the following tags:
   1. table
   2. Ordered or unordered list
   3. heading
   4. paragraph
   5. image
   Use tags semantically.

Organize your webspace on the class server so that:

1. the three pages described above are located in your root directory.
2. any images used by these pages are located in a folder in the root directory.
3. all files used for previous COMP 1850 homework (hw#1 & hw#2) are located in a folder in the root directory.
4. on index.html, but not as a part of the main navigation, display a list of links to each of the newly located homework pages (hw#1 & hw#2). You do not need to link these older homework pages back to index.html. Be prepared to add to this list of links in the future (eg: hw#3, etc...).

1. Use tags semantically
2. Spell check all textual content you have authored
3. Test all pages and links throughly in at least two different web browsers
4. Use good file and folder names
5. Apply appropriate tabbing in your code
6. Comment yout code
7. Validate your HTML and CSS code

• Write an HTML form

Write an HTML page that includes a form with the following characteristics:

1. Include inputs for a first name, a last name and a student number.
2. The form names for these three fields must be:
   1. firstname
   2. lastname
   3. studentnumber
3. Include an input for the user's name prefix.
   1. Use the form name prefix.
   2. The user must choose only one from this group of options:
      1. Ms.
      2. Mrs.
      3. Mr.
4. Give the user a way to specify which, if any, part time BCIT classes they are considering registering for.
   1. This field must be name courses.
   2. Options should include:
      1. COMP 1850
      2. COMP 1950
      3. COMP 1920
      4. COMP 1409
      5. COMP 1630
      6. COMP 1911
      7. COMP 2899
5. Include an area for the user to add a comment.
   1. Name this field comments.
6. The form method is post.
7. The form action is:
   http://bcitcomp.ca/1850/
   comp1850_homework05.php.
8. All form elements should include labels and have appropriate ids and names.
9. All form elements should be aligned nicely.
10. CSS style should be applied throughoout the form. You must demonstrate a clear effort towards making a visually applealing form.
11. Indlude a link to this page on your homepage from assignment #1.

Choose the best input type for the job.

Consider whether the user should be able to choose all, none or some from a group of options, or whether it should be an exclusive choice of one from a group.

• Prepare an image for deployment on the web
• Explore image manipulation techniques

Create a single HTML page that includes the following:

1. Obtain a copy of the file named source.bmp located on the course server
2. Open source.bmp in an image manipulation application
3. Create a new image that:
   1. is rotated right-side-up.
   2. is resized so that it is 400 pixels wide.
4. Ensure the height is scaled appropriately so that the image is not stretched or skewed.
5. Include the text 'COMP1850' somewhere.
6. Apply a layer effect(s) to the text.
7. Save the image as a file type appropriate for the world wide web.
8. Deploy this image within the HTML page.
9. The HTML page should display the image actual size (400px wide).

1. Find a Photoshop tutorial online that demonstrates how to create one of the following:
   1. A text effect
   2. A button
   3. Any technique you find useful and interesting
2. Demonstrate what you have learned from the tutorial by briefly describing what you have done, and showing an eample of an image(s) you created using the tutorial.
3. Be sure the example image you create is different somehow to the image in the tutorial (eg: if you chose a text effect tutorial, use your name as the text in the image you create.)
4. Include a link to the tutorial you chose.
5. All content on this page should be styled with CSS.
6. Add a link to this page on your homepage.

Choose a tutorial appropariate to your level of photoshop ability. If you have too much difficulty with a particular tutorial, choose another one.

Explore CSS Layout Techniques

Create 3 HTML pages that demonstrate a single CSS layout of your design (not a layout identical to one shown in class). Each of these pages must include a navigation that links to the others. Since the focus here in on the layout, you may populate these pages with placeholder content, eg http//:www.lipsum.com/.

1. Your layout should include some form of header, footer, navigation and an area for content. These various sections can be configured in any way you like, or combined, but ensure that different quantities of content can be added/removed from the content section without breaking your layout. Prove this is the case by ensuring each other of the 3 pages contain noticeably different quantities of content.
2. Your layout must include examples of at least three different CSS positioning techniques (eg: absolute, relative, fixed, float, margins, fixed or variable widths, etc).
3. Style box model properties (border, margin, padding) as well as fonts and colours to ensure an appealing user experience. Use a colour picker tool online to choose a nice colour palette.
4. Style your navigation links with the standard pseudoclasses. If you prefer, you may use a textbook example or online tutorial for building nicely styled navigation. Each page must display the navigation in the same position (the navigation should not 'relocate' when the user moves from one page to the other).

Ensure your homepage from Assignment #1 includes an easy to find link to one of these Homework #3 pages.

Choose a tutorial appropariate to your level of photoshop ability. If you have too much difficulty with a particular tutorial, choose another one.

Only external stylesheet(s) may be used to apply CSS.

Write, test, publish linked HTML pages.

1. Create a webpage about your favourite movie. Include:
   1. the name of the movie
   2. director, actors and actress
   3. a brief description of the movie
   4. at least one hyperlink to a website related to the movie (eg: the official movie site, a review of the movie or website where the movie can be purchased)
2. Create a webpage about your favourite musical group or artist. Include:
   1. the name of the group/artist(s)
   2. a brief description
   3. a list of at least three albums or songs. Include at least one hyperlink to a related website.
3. Use headings, paragraphs, ordered lists, unordered lists, definition lists, etc., semantically, to help explain the meaning and relationships of the data. All textual content must be marked up.
4. Rename your page from Homework #1 to index.html. on your bcitcomp.ca/students/ web space, place index.html either in the root directory, or in a folder named homework.
5. Link the movie and music pages together with the page written for Homework #1, so that a user can click to visit any of the three pages, regardless of which page they are currently on.
6. Upload the movie and music pages, add the updated page from Homework #1 to your webspace.
7. Choose the right kind of linking (relative or absolute) for the job. Test all your links thoroughly, both before and after publishing online.

If any of your pages contains enough content as to ensure the user will have to vertically scroll to view it all, consider including bookmarks to enhance the use experience.

If there are files on your webspace that are no longer relevant, consider deleting them to keep your site clean of 'garbage' files.

Write, test, publish an HTML page to the Internet.

1. Write an HTML page that includes:
   1. Well-formed HTML
   2. Text that describes your name and student number
   3. A paragraph or two explaining why you are taking COMP 1850. If you know of a good joke or poem, include that as well
   4. Use headings and paragrap tags as you see fit.
   5. All text content should be marked up
   6. <body> tag attributes determining the text colour and the background colour
   7. An HTML comment near the top with your full name
2. Use good file name conventions
3. Test your page on the latest versions of Internet Explorer and Firefox
4. Upload your page to the web space assigned to you
5. Test your page on bcitcomp.ca/students

Only files located on the COMP 1850 web server will be marked. All submissions must include:

1. Well-formed HTML
2. An HTML comment with your name and student number
3. Goo file naming conventions (don't use spaces or special characters, and ideally stick with lowercase)

When writing any HTML page, if you decide to include content not authored by yourself (eg: a poem you didn't write) be sure to give credit where credit is due.

When testing your HTML page, you should try as many browsers as possible. In addition to IE and Firefox, try Sfari, Chrome Opera, etc.