HTML Website Project

CFS/CIS 130 Onondaga Community College

Final Website Project

Objectives: You are to create a Web site consisting of a minimum of 4 Web pages about a topic of interest to you, to show that you understand and can apply the topics and techniques learned in class:

• Understanding HTML and CSS styles

• Using good design practices

• Responsive web page technology

• Management of your files on the CS server

• Using communication protocols, including Telnet and FTP File Locations:

• All pages will be inside a new folder that you create, called cis130project which should be in your public_html folder.

o That folder will have two subfolders – “stylesheets” for your css file, and “images” for your pictures/graphics files.

• The “opening” page – the main page - must be called index.html. o The other pages should have descriptive names that you assign.

• All content must be hosted on the CS server.

Assignment Requirements:

1. HTML – You must: a. Include all the required tags – html, head, title, body, and correct DOCTYPE

• The head area on each page must include the page title – no “Untitled” documents! b. Have 4 meta tags in the head correctly formed and completely filled in, including SEO description

and keywords, and one dealing with the “viewport”. c. Connect all pages of your final project, including a hyperlink back to your home page and all other

pages from each page d. Throughout the final project you must include at least four (4) absolute hyperlinks to sites outside

your own. You can decide how you want to organize them - two on one and two on another, all four on the same page, or any other combination.

e. At least one page must contain either a table or a list (ordered, unordered, or description) f. Have an email link to yourself on (at least) the opening, home page of your final project. If you use

an “About Me/Us” page, an email link should be included there, also.

2. Files: a. The first page of your site must be called

index.html b. All HTML pages should be stored directly inside

your cis130project directory, which needs to be inside of public_html. • All page-to-page paths must reflect correct

relative locations c. Your css file must be stored in the stylesheets

subdirectory d. All images must be stored in the images

subdirectory. e. Pro tip: Create the folders in Netbeans first – they

should look like this (your filenames will be different, of course!):

f. After you’ve created your folders and files in Netbeans, and are ready to upload them, get into the public_html directory in both the local and server sides. Then, you can drag the cis130project folder from the local side to the server side, and it will include the subdirectories automatically.

3. Images: a. Use at least four (4) image/graphic files, of at least 2 different formats (GIF, JPG/JPEG, PNG).

Note: You can use images that you create, that you scan in, from your digital camera or phone, downloaded from the Web (check copyright), and so on. One image/graphic must be a link to another page or site - this can be one of your four; the others can just be block or inline images All image tags must use the relative path to the images directory and have alt (alternate text) attributes set for each image except when using a small, repeating background image or favicon.

b. If you obtained the image from another website, the website should be listed directly below the image, in small text.

4. Content a. It must have good, valuable content, not be just a shell. You decide what it should say. You

have chosen something that is of interest to you - a hobby, a sport, a cause, your business, your family, or something similar - for your Website topic/theme so you do have something to write about.

b. Think about your audience and who you want to come to your site. The overall tone should be professional. It must be well done and correctly written (grammar, syntax, punctuation, spelling, and so on). The information you present on your site should be interesting and useful to others (your viewers). Think about this: Does your site have meaningful, useful and accurate content and information? Would YOU use your own site as a resource/reference??

c. The style for the tags/elements used must be defined with CSS, be placed in a separate CSS file (as done in class and homework), and correctly referenced/linked in the head area of your HTML document. Use the CSS link example in Blackboard as a guide.

d. DO NOT copy text content from another site. That would be cheating and plagiarism!

5. Design a. Use one css file for the entire site. b. Your site must use Responsive Web Design, including fluid layout, media queries, and scalable

images, as taught in Murach chapter 8. c. On a full-size screen, your site should be designed to show some content elements side by side d. Build a Web-safe color scheme, use uniform/consistent fonts, and make pages visually appealing.

Can use the default white background and black text, but this must be specified in the CSS for the body.

e. Have consistent design and elements throughout your pages. A user should be able to tell if s/he is still at the same site when they go to the other pages of your Website.

f. In the footer section of your home page, display a "last updated" date. Include a “copyright” indicator with your name in it on this index.html page, as well. Also, include a clickable email link

Due Date and Limitations:

• The project must be complete, published and viewable on on the Web by: end-of-day on May 10.

• All code must have been created by you. Don’t copy and paste HTML code from somewhere else!

• Your pages must be functional in multiple browsers, minimally Firefox, Chrome, and Safari, as well as display correctly on both client platforms: PC/Windows and Mac. Test them out before submitting your final project.

After: Before:

• You can add extra features, with approval. If you add Javascript or php code, it must work correctly. If not, leave those pieces out. There’s really no need to add extra stuff, though – I’m not giving any extra credit for it.

• Reminder: The page must be syntactically and technically correct. That is: ▪ NO spelling or grammar errors, correct upper/lowercase use, make sure to have correct word and

sentence punctuation. If English isn’t your first language, you may ask me to proofread your site one time, after it’s complete, and before you submit it.

▪ All links and images must work. ▪ Everything else must be functional - you will be penalized for errors. For example, do not include

embedded audio or video if you cannot make it work correctly. ▪ If your site is not completely uploaded to the server, or the default folder/directory/file or path is

wrong, you will receive no credit. I will not “go looking” for your work. You must have a directory called cis130project. All files must be in their appropriate subdirectories, as noted above.

▪ Validate your pages at the html and css validation sites. Warnings are OK, but there should be no errors. i. http://validator.w3.org/ ii. http://jigsaw.w3.org/css-validator/

▪ Test your pages on the cs server, with at least 2 different browsers, before you submit your site.

▪ To submit your final Website, you will put only your cs URL/address in the Final Website drop box. This is the address you need (substitute your username):

http://cs.sunyocc.edu/~username/cis130project