Skip to main content

Homework 3: Navigation and Image Practice

In this homework you'll practice structuring the navigation of a multipage website, practice structuring images, and learn how to avoid hotlinking.

info

The course material needed to complete this assignment was covered in classes 4 and 5.

Learning Objectives​

  • Employ external CSS styling to style multiple HTML files.
  • Structure a website's navigation in support of accessibility.
  • Selective style HTML elements using the descendant combinator selector.
  • Structure images as content using <picture>.
  • Explore hotlinking and how it relates to links.
  • Validate HTML and CSS.

Help & Support Resources​

We want you to get the help and support you need. Use the course's support resources for help with this assignment.

Git Repository & Codespace​

  1. Create your assignment repository.

    Visit https://landrace.infosci.cornell.edu/courses/info1300-2026fa/repos/hw3 in your browser to create your assignment repository.

  2. Open your assignment repository in GitHub.

    After creating your repository, visit https://landrace.infosci.cornell.edu/courses/info1300-2026fa/repos/hw3 in your browser and follow the link to open the repository on github.com

  3. Open your assignment repository as a codespace.

Submission Requirements​

Professionalism

Professionalism means meeting the client's requirements. Not doing less and not doing more.

Your submission should meet the requirements specified for this assignment and no more (or less). If you do more than the requirements, you will receive a 0 for the assignment. If you do less than the requirements, you will receive a 0 for the assignment.

Your assignment should meet the following requirements for credit:

  • Submit your own original work (design and code) for this assignment.

    No credit is provided for submitting design and/or code that is taken from the course-provided examples.

  • Your code should be original. However, the structure of the code will mirror the class examples.

    The structure of your code will align with the class examples. This is to be expected. We are learning web programming and there's only so many ways to structure code to solve its problems.

  • You are required to use the methods and techniques covered in class.

    No credit is provided for using methods that are not covered in this class.

    You may not use any methods that have not been covered in class prior to the release of this assignment.

  • Your assignment's website should be visible in the browser and functional upon launching the development web server using Go Live.

    If your assignment's website does not launch using this method or is not visible in the browser after launching the development web server, we are unable to provide any credit.

  • All files should be in the location specified in this document for credit.

    Professionalism is important. Incorrectly placed files will not be graded; no partial credit is provided either.

  • Follow the submission instructions below.

    Submit all materials to your GitHub repository's main branch for this assignment. When you're finished stage, commit, and push your submission to GitHub. Then fill-out the submission form to complete your submission.

    Failure to complete the submission form will result in 0 credit; no submission form = no submission. No leniency. No exceptions.

Instructions​

Part I: CSS Styling for Multiple Pages​

Credit: 5 points. Completion credit provided for properly styled CSS on all pages of the website.

Up until now, we have worked with one HTML page and that page is styled by one CSS file. However, websites are made up of multiple HTML pages. Even though you have multiple HTML pages, you will still use the same CSS file to style them all.

  1. View all 3 pages of the website in your browser:

    • index.html
    • rules.html
    • popular.html

    When you launch the development web server via Go Live, index.html will load.

    Append the HTML file name to the URL in your browsers address bar to see the other pages.

    For example, when launching with Go Live my development server URL might look like this: https://orange-trout-5gv4xp64pqh4g54-5500.app.github.dev/ (the default URL loads index.html)

    To view rules.html, I would append rules.html to the URL like this: https://orange-trout-5gv4xp64pqh4g54-5500.app.github.dev/rules.html

  2. Next style each page using the same CSS file.

    Once a page is styled it should have a lite-purple-ish color.

    Check that all pages now have the same lite-purple-ish color.

  3. Change the background color of all web pages to something a less purple using the color picker.

    Check that all pages have your updated background color.

  4. Modifying exactly one CSS rule to change the font family of an entire HTML document to sans-serif.

    You may use a named font so long as you provide a sans fallback in your CSS code.

  5. Change all headings to use small caps and add a solid 1 pixel border in black (or a gray) to bottom side of all headings.

    Use only the element selector.

Part II: URLs​

Credit: 5 points. Completion credit provided for proper use of internal and external links.

  1. Modify the TCAT text in the directions section of the homepage to be a link to TCAT (https://tcatbus.com/).

  2. Modify the downtown Ithaca text in the directions section of the homepage to be a link to downtown Ithaca's website: https://www.downtownithaca.com/

  3. Make the Ithaca Zoo logo on every page, a link back to the homepage.

Part III: Website Navigation Practice​

Credit: 5 points. Completion credit provided for valid and functional navigation added to all pages of the website and navigation list styling.

  1. Employing the best practices for creating multipage websites and structuring navigation we practiced in class, add navigation to this entire website.

  2. Using the descendant combinator selector, change the styling of the navigation list items (<li>) to render without the bullets on all pages.

    Don't change the styling of any other lists in the HTML. Only change styling of the navigation list.

    tip

    list-style controls the shape of the list item bullets. The list-style-type property controls the type of bullet.

Part IV: HTML Attributes​

Credit: 5 points. Completion credit provided for adding appropriate HTML attributes to elements.

HTML attributes add extra information to an HTML element that will not render as the content.

  1. Observe that the HTML boilerplate includes lang="en" at the top of your HTML file.

    This specifies that the page is in English. However, other HTML elements may also use the lang attribute to set the language of those specific elements.

  2. Update the French <blockquote> element on the homepage to set its lang attribute.

  3. The reference documentation includes all the attributes provided for each HTML element. Review the reference documentation for the <abbr> element.

  4. Use the <abbr> element to provide the abbreviation for the TCAT: Tompkins Consolidated Area Transit.

Part V: Images​

Credit: 5 points. Completion credit provided for properly cited, structured, and accessible image content.

Your Ithaca Zoo site has some text content, but images are important content too! In this part, you'll add some images to the website.

If you're having trouble or don't remember syntax for using <picture> or <img>, refer to the Mozilla reference documentation.

  1. During the in-class activity, we added the Ithaca Zoo's logo to the header. However, we forgot to cite it.

    Let's imagine you authored this logo yourself. Practice citing this image as an original creation. See the citation policy in the syllabus for details.

    Remember to cite it on every page that the logo appears!

  2. Now add the image of Jeff the Giraffe to popular.html with the caption "Our Friend Jeff." You can find a picture of Jeff in "images/jeff-giraffe.jpg".

    • You are required to cite this image. Assume this image was not created by you.

      Source: https://pixabay.com/en/giraffe-zoo-mammal-animal-head-2481840/, licensed under CC0 Creative Commons.

    • Set an appropriate alt attribute for the image to ensure it's accessible.

      Review the class notes on accessibility if you need a refresher.

Part VI: Hotlinking​

Credit: 0 points

What is hotlinking?: to load a resource (e.g. image) from another web server.

  1. Add new image to the home page and set the src attribute to https://infosci.cornell.edu/themes/custom/info_science/logo.svg

    It doesn't matter where. Simply add it.

  2. View the page in your browser. You should see the Information Science department logo.

  3. You are viewing an image that is stored on the information science department's web server. It's not in your repository (your web server). This is an example of hotlinking. Hotlinking is prohibited in this class.

    Delete the information science department logo image from your website.

  4. In the "Directions" section of the home page observe the link to TCAT: https://www.tcatbus.com/.

    Click on the link. Observe that it takes you to TCAT's website. This is not hotlinking. This is an example of linking.

    Linking is permitted and encouraged in this class!

    Important! You cannot hotlink with <a> tags. You can however, hotlink with <img> tags.

Part VII: Valid HTML & CSS​

Credit: 5 points. Completion credit provided for valid HTML and CSS.

Validate your HTML and CSS using the W3C validation tools to ensure there are no errors. (warnings/notices are okay)

Submission​

Stage, commit and push all changed files in your Git repository to the GitHub server. (All commits should reside on the main branch.)

Complete the submission form for hw3 to submit the assignment.

Note: The submission form asks you to check your submission. Checking your work will ensure you receive credit for this assignment. We ask you to check your submission because this is where some students lose points. It's easy to forget something and checking your work prevents the heartache of getting a 0 because your submission wasn't submitted in a way that we can access and grade it.

Contributors​

Copyright © 2017 - 2026:

  • Kyle Harms
  • Grant Storey
  • Sharon Jeong
  • Axel Bax
Last updated on