Skip to main content

INFO 1300: Multi-Page Websites (Content Organization, URLs, & Navigation)

Class 4: Multi-Page Websites
(Content Organization, URLs, & Navigation)​

  • Review: CSS Basics
  • Content Organization – Card Sorting
  • URLs
  • Links
  • Structuring Navigation

Copyright 2026, Kyle J. Harms

Review: The Browser's Styling Language​

CSS: Cascading Style Sheets

CSS, is a language to describe the presentation of (HTML) documents.

Review: CSS for Static Websites​

  1. Create styles/site.css
  2. Add <link rel="stylesheet" type="text/css" href="styles/site.css"> to <head> of each HTML file
  3. Add CSS property-value pairs to styles/site.css to style the HTML elements on your web pages
  4. Validate styles/site.css

Review: CSS Vocabulary​

Selector: Which HTML elements to style (p) Property: What aspect of the element to style (color) Value: How to style the property (#ff0000) Rule: A selector + property + value pair

p {
  color: #ff0000;
}

Review: CSS Selectors​

Element Selector – Selects all elements of a given type.

h2 { ... }

Descendant Combinator Selector – Selects all elements that are descendants of a given element.

article p { ... }

Review: Descendant Combinator Selector​

Selects all elements that are descendants of a given element.

ELEMENT_NAME DESCENDANT_NAME { ... }

figure img {
  border-radius: 10px;
}

Gotcha: Observe the space between the element names. It's required.

<picture>
  <img src="images/mcgraw-tower.jpg alt="">
</picture>

<figure>
  <img src="images/mcgraw-tower.jpg alt="">
</figure>

figure img will only style the <img> elements inside <figure> elements.

Organizing Content into Pages
–
Card Sorting​

Review: Designing a Website​

  1. Identify the website's audience by their goals. (Not your goals.)
  2. Assemble/create content to address the audience's goals.
  3. Organize content into web pages. (Websites have multiple pages.)
  4. Plan the website's design.
  5. Evaluate the site's design. Does the website address the audience's goals?

Designing a Website – Today!​

  1. Identify the website's audience by their goals. (Not your goals.)
  2. Assemble/create content to address the audience's goals.
  3. Organize content into web pages. (Websites have multiple pages.)
  4. Plan the website's design.
  5. Evaluate the site's design. Does the website address the audience's goals?

Organizing Content – Card Sorting​

Card Sorting is a method for designing the information architecture of a website. Pieces of related content are physically grouped into categories and labeled.

Card sorting helps us determine the pages for a website and each page's name.

two groups of cards

How To: Card Sorting​

  1. Identify content for the audience (not you!) Examples: "Clocktower Photo," "Cornell History", etc.

  2. For each piece of content, write a brief description of the content on a card or post-it.

Note: Post-its are not required. Small pieces of paper also work.

How To: Card Sorting​

  1. Group the cards/post-its into related categories.
    Each group is a page.
  2. Label each grouping using your primary audience's vocabulary.
    Each label is the page's name.

Activity: Card Sort Practice​

  1. Form groups of 3 or 4.

  2. Label each post-it note with an item of content from this list →

    Ignore the color of the post-it notes!

  3. As a group, spend some time discussing the different ways you could organize the cards.

  4. Now sort the cards into groups.

As a class we'll discuss how the different groups sorted their "content".

  • Banana
  • Grape
  • Zucchini
  • Peach
  • Carrot
  • Broccoli
  • Apple
  • Bell Pepper
  • Strawberry
  • Squash
  • Raspberry
  • Avocado
  • Green Bean
  • Tomato
  • Potato
  • Beet
  • Cherry
  • Cauliflower

Considering Your Audience​

Different audiences have different goals. One of the biggest mistakes new web designers make is not identifying the audience and organizing the site's content around that audience's goals.

Discussion: Page on Degree Requirements​

  • Students majoring in X
  • Faculty advisors

Activity: Card Sort for a Specific Audience​

Audiences:

  • Alayna is an artist who likes to paint pictures of different foods that are all the same color.
  • Bindi just found out they are allergic to nightshades (eggplant, tomatoes, potatoes, peppers) and wants to know what kinds of food to avoid.
  • Chyrsa is packing boxes of groceries for shipment and needs to pack similarly shaped produce together.

As a group:

  1. Pick an audience.
  2. Discuss the goals of this audience.
  3. Card sort based on the goals you identified.
  4. Name each group using vocabulary that your audience (not you) would understand.

Discussion: Content Organization + Audience Goals​

Different audiences have different goals. How did you change your content organization for Alayna, Bindi, or Chyrsa?

  • Alayna is an artist who likes to paint pictures of different foods that are all the same color.
  • Bindi just found out they are allergic to nightshades (eggplant, tomatoes, potatoes, peppers) and wants to know what kinds of food to avoid.
  • Chyrsa is packing boxes of groceries for shipment and needs to keep track of what shape the groceries are.

Example: Card Sorting – Bindi​

Nightshades group: tomato, bell pepper, potato; Safe Food: everything else

Gotcha: Post-it Note Color has No Meaning​

You are organizing content into groups. The color of the cards (post-it notes) has no meaning. Ignore the color of the cards.

Nightshades group: tomato, bell pepper, potato; Safe Food: everything else

What does sorting fruits and vegetables have
to do with organizing content for a website?​

  • Each fruit/vegetable card represents a piece of website content.
  • Each group of sorted cards represents a page on a website.
  • The name of each group is the page's name.

Home: A, D, E; About: B, C; News: F

Tip: The All Pages Group​

If there's content that feels like it should belong on every page, create a grouping for all pages.

All content in this group should then be included on every web page on the website.

Review: Website = Several Web Pages​



three HTML files: index.html, about.html, news.html

Website Navigation​

Support a familiar way for users to navigate between the pages if a website.

We typically call this a navigation bar and navigation menu.

URLs​

URL – Uniform Resource Locator​

URL – the address of a resource (file)

Examples:

  • http://www.cornell.edu/
  • http://www.cornell.edu/images/tower.jpg
  • index.html
  • images/avatar.jpg

"Anatomy" of a URL​

(Absolute) URL: scheme + domain + path​

$$ \underbrace{\text{https}}{\text{scheme}}\text{://}\underbrace{\text{www.cornell.edu}}{\text{domain}}\text{/}\underbrace{\text{index.html}}_{\text{path}} $$

Relative URL: path only (no scheme, no domain)​

$$ \underbrace{\text{index.html}}_{\text{path}} $$

Links on a Page & Links to Other Web Pages​

Home link to a page on your web server; GitHub link to a page on another web server

What type of URL (absolute or relative) should you use?​


index.html

https://www.example.com/index.html

Activity: Relative vs Absolute URLs​

Working with a peer, complete Part I on the handout.

index.html

https://www.example.com/index.html

Best Practices: URLs​

  • Design your URLs to be usable.

    URLs should be concise and user readable (for your audience)!

  • Avoid upper case letters in file names / URLs; use lowercase.

    INFO1300.html ➞ info1300.html

  • Never use spaces in file names / URLs. Use dashes/hyphens.

    info 1300.html (info%201300.html) ➞ info-1300.html

  • The "home" page is always named index.html.

    (not Index.html, not home.html, not HOME.HTML)

Linking to a Web Page​

The Link (Anchor) Element: <a>

<a href="URL">LINK CONTENT</a>

Where LINK_CONTENT is...

  • Text
  • An HTML Element (<p>, <h1>, etc.)
  • A Picture Element (<image>, <figure>, etc.)

Internal link (part of website) ➞ Relative URL​

<a href="index.html">Home</a>

External link (outside of website) ➞ Absolute URL​

<a href="https://www.cornell.edu/">Cornell University</a>

Working with a peer, complete Part II on the handout.

Reference:

<a href="URL">LINK CONTENT</a>

Example:

<a href="https://www.cornell.edu/">Cornell University</a>

<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="news.html">News</a>

Structuring Navigation for a Website​

Structuring the Site's Navigation​

<nav>
  <menu>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="news.html">News</a></li>
  </menu>
</nav>

<ul>​

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="news.html">News</a></li>
  </ul>
</nav>

Both structures are correct. The <menu> element is newer and is slightly more semantic. Pick one and be consistent!

Activity: Navigation Practice​

Working with your peer, complete Part III of the activity on your handout.

<nav>
  <menu>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="news.html">News</a></li>
  </menu>
</nav>

Gotcha: Navigation Styling​

This only structures the navigation. It does not style it! It will not look like a nav bar/menu yet. Please wait... it's coming soon!

<nav>
  <menu>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="news.html">News</a></li>
  </menu>
</nav>

What's Next​

Assigned Yesterday: Homework 2

Unofficial Deadline: Homework 2, Thursday, 9/3, 11:59pm

Friday Section: Practice Quiz 1 (Classes 1-3, Homeworks 1-2)

Deadline: Homework 2, due Friday, 9/4/2026, 11:59pm (no Monday deadline due to holiday)

No Class: No class on Monday, 9/7/2026 (Labor Day)

Last updated on