Description
Question 1 – html & css chapter 3 (20 points) Estimated time: 2 hours Save question 1 files in subfolder “lastname_firstname_assignment2\q1\”. In this question, you’ll code the HTML for the home page. The page should look like this: Save question 1 files in subfolder “lastname_firstname_assignment2\q1\”. Create your personal hobby using “’s hobby page” as the page title (-50 points if not). Save the page as index.htm. (2 points) Remember to document the html file with html comments. (-1 point if not) Add the HTML5 semantic elements to structure the page so it includes a header (
), a main section (
), and a footer (
). Remember to close the tags. (1 point each, total 3 points) Add an image and two levels of headings (e.g.
,
) to the header (
). Put the image in the /images subfolder. Create text () that is related to you. (1 point each, total 6 points) Add three levels of headings (e.g.
,
,
) and create the text (
) to the main section (
). (2 points) 5 CSCI 3300 Question 4 – html & css chapter 6 (10 points) Estimated time: 2 hours Copy what you have done in question 3 (index.htm & style.css) from the question 3 subfolder to the question 4 subfolder “lastname_firstname_assignment2\q4\”. Save question 4 files in subfolder “lastname_firstname_assignment2\q4\”. In this question, you’ll enhance the formatting of the home page so it uses a 2-column layout. You’ll also add some additional content to the page. The page should look similar to this: Move the unordered list to a sidebar (use
) that’s floated to the left of the main section (
) of the page. The width of the sidebar should be 175 pixels. (1 point each, 3 points) Be sure to clear the footer (
) so it’s not displayed below the list. Adjust the margins and padding for the sidebar (
) and main section (
). (1 point) Modify the HTML for the first heading in the main section (
) so it’s displayed on two lines. (2 points) Modify the second heading as shown. Then, add an image (of your choice, related to your site) and the link as shown. The link should link to an external website. (1 point each, total 3 points)
6 CSCI 3300 Question 5 – html & css chapter 7 (30 points) Estimated time: 3 hours Copy what you have done in question 4 (index.htm & style.css) from the question 4 subfolder to the question 5 subfolder “lastname_firstname_assignment2\q5\”. Save question 5 files in subfolder “lastname_firstname_assignment2\q5\”. In this question, you’ll enhance the home page you worked on in question 4 so it includes a 2-tier top navigation bar, and an image link. You will also need to add an additional “Why I Like It” page. Question 5a
7 CSCI 3300 Question 5a Add a 2-tier top navigation bar (use
) that includes the hobby links shown above. Format the links in the navigation bar as a navigation list as shown above. Format the navigation bar so the link for the page that’s currently displayed (in this case, home or index.htm) is of a different color. Each navigation box should be separated by a vertical border. (1 point each, total 5 points) Add four links related to the home page (index.htm) to the 2-tier top navigation bar (same as the example above: About Me, Personal, All Hobbies, Contact Me). (0.5 point each, total 2 points) The second tier navigation links (About Me, Personal, All Hobbies, Contact Me) should be left-aligned. (1 point) Remove the question 4 sidebar (
). (2 points) Modify the image in the main section so it’s an image link that displays the same page as the link below it. Format the image so no border is displayed around it. Put the image in the /images subfolder. (1 point each, total 4 points) 8 CSCI 3300 Question 5b Create another “Why I Like It” page related to your first hobby (related to soccer in the example above). It is a second tier navigation page, below the first hobby as shown. 9 CSCI 3300 Question 5b Use “’s Why I Like It page” as the page title. Save the page as why_i_like_it.htm. (1 point each, total 2 points) (another 2 points for the second tier link to link to this page) Format the 2-tier top navigation bar (
) so the link for the page that’s currently displayed (why_i_like_it.htm) is of a different color. Format the links in the navigation bar as a navigation list as shown above. (1 point each, total 2 points) Add four links related to the first hobby to the 2-tier top navigation bar (related to soccer in the example above). (0.5 point each, total 2 points) The first link in the navigation bar (nav) should link to home (index.htm). (1 point) The links should work for both pages (index.htm and why_i_like_it.htm), so that users can navigate between these two pages. (2 points) Modify the content in “Why I Like It” page (why_i_like_it.htm), to describe why you like your first hobby. Add two images in the main section (
) so they are links to external websites. Format the image so no border is displayed around it. Put the image(s) in the /images subfolder. (1 point each, total 7 points) 10 CSCI 3300 Question 5b Important: 1. If you do not put in the above mentioned fields, you will get 0 points for the question(s). If the content of the web pages are not related to you, you will get 0 points for the question(s). Please do NOT put any sensitive personal information on the web pages. 2. No two students should submit webpages with exactly the same code, or same content, or same layout, or same color combination. If found, both students will get 0 points. 3. When you view page source in a web browser, must be at the top of every page. In other words, all pages must be written in HTML5. (-20 points if not) 11 CSCI 3300 4. All html files must pass html validation at https://validator.w3.org/ without any error/warning (with only 2 warnings). Use the validator’s “File Upload” tab to check each file. (-2 points for each error/warning, 2 warnings allowed) 5. All css files must pass css validation at https://jigsaw.w3.org/css-validator/ without any error/warning. (-2 points for each error/warning) 6. If your html file contains any css component, your html file must pass both html validation (3 above), and css validation (4 above) without any error. 7. If your files do not pass the validations, 2 points will be deducted for each error / warning found. 8. Document (comment) your html files (), css files (/* */), and JavaScript files (/* */). (-1 point for each file with insufficient comments) Submission instructions: Use notepad++ to create the document(s). You need to test the above document(s) in your web browser. Do a screen capture(s) of the related browser output. Use any graphic editing software (e.g. Microsoft Paint, Adobe Fireworks, GIMP, or Microsoft Expression Design etc) to cut out the browser output (from the screen capture), paste them into a word document. Do screen capture(s) of html validation results and css validation results, cut and paste them into the word document. Save the word document as a pdf file. You need to submit the following: 1. A pdf file containing the screen capture(s) of the web browser output (all html pages) and the screen capture(s) of all html validation results (from https://validator.w3.org/) and css validation results (from https://jigsaw.w3.org/css-validator/), name the file lastname_firstname_assignment02.pdf. (missing: -50 points; other file format: -10 points) 2. All html file(s), css file(s), and other related files (e.g. image files). Zip your file folder (lastname_firstname_assignment2) into a single zip file (or rar file) lastname_firstname_assignment02.zip. In the above example, the zip file should contain the following files and subfolders. (no zip: -10 points) lastname_firstname_assignment2\q1\index.htm lastname_firstname_assignment2\q1\images\(and image file(s)) lastname_firstname_assignment2\q2\index.htm lastname_firstname_assignment2\q2\style.css // you may put style.css in a subfolder, up to you lastname_firstname_assignment2\q2\images\(and image file(s)) lastname_firstname_assignment2\q3\index.htm lastname_firstname_assignment2\q3\style.css // you may put style.css in a subfolder, up to you lastname_firstname_assignment2\q3\images\(and image file(s)) lastname_firstname_assignment2\q4\index.htm lastname_firstname_assignment2\q4\style.css // you may put style.css in a subfolder, up to you lastname_firstname_assignment2\q4\images\(and image file(s)) lastname_firstname_assignment2\q5\index.htm lastname_firstname_assignment2\q5\soccer.htm //filename should be related to your hobby lastname_firstname_assignment2\q5\style.css // you may put style.css in a subfolder, up to you lastname_firstname_assignment2\q5\images\(and image file(s)) Please submit an electronic copy (the above mentioned two files: .pdf and .zip) to D2L digital dropbox. (pdf in zip as one file: -3 points) 12 CSCI 3300 Grading guidelines (programming questions): Your programs will be judged on several criteria, which are shown below. Correctness (50%): Does the program compile (run) correctly? Does the program do what it’s supposed to do? Design (20%): Are operations broken down in a reasonable way (e.g. classes and methods)? Style (10%): Is the program indented properly? Do variables have meaningful names? Robustness (10%): Does the program handle erroneous or unexpected input gracefully? Documentation (10%): Do all program files begin with a comment that identifies the author, the course code, and the program date? Are all the classes, methods and data fields clearly documented (commented)? Are unclear parts of code documented (commented)? (Some items mentioned may not apply to some languages) A program that does not compile (run) will get at most 50% of the possible points.
