As you know, many websites feature multiple pages. Different areas you can navigate between (usually with links, or a navigation menu) to see and interact with different information.
Some students may have experimented with creating multi-page site in Intro, especially during open-ended team project week, but other students may not have. So, before continuing, let's briefly address how to create multi-page HTML sites for use in this course.
We'll learn alternative, more advanced ways to create multi-page sites later on. But while our primary focus is solidifying our CSS skills in this first week, the simple approach depicted in this lesson will serve our purposes fine.
A basic HTML site, as created in Intro, is structured something like this:
my-sample-project/ ├── README.md ├── index.html └── css └── styles.css
Here we have:
This example site has only one page: index.html. But not all sites are single-page. In fact, many traditional sites offer multiple areas users can navigate between.
Let's say we want this site to contain multiple pages too. In addition to the index.html homepage, we want "About Us" and "Contact Us" pages. We would add these pages by creating two corresponding HTML files:
my-sample-project/ ├── README.md ├── index.html ├── html │ ├── contact.html │ └── about.html └── css └── styles.css
Notice index.html remains in the top-level of the directory, but additional (non-homepage) HTML files are in an html subdirectory. This is because the browser looks for an index.html in the main directory, so it knows what to load first.
Each of these new files will look similar to HTML files we've created previously, with <html>, <head>, and <body> tags containing whatever page-specific content we want.
But we need a manner for users to navigate between these pages! Thankfully, we can do this with a simple <a> tag.
To create a link navigating from index.html to the contact.html contact page, for example, we use the following code:
<!DOCTYPE html>
<html>
<head>
<title>Example Homepage</title>
</head>
<body>
...
<a href="html/contact.html">Contact Information</a>
...
</body>
</html>
This is similar to <a> links created in Intro, but with a filepath internal to our project instead of an external online URL. When clicked, this link will display the contents of our contact.html file.
To add navigational links to other pages in our project directory, we follow the same process:
<!DOCTYPE html>
<html>
<head>
<title>Example Homepage</title>
</head>
<body>
...
<a href="html/contact.html">Contact Information</a>
<a href="html/about.html">About</a>
...
</body>
</html>
To style multiple pages in a site, each HTML file needs a stylesheet linked. In a smaller project, we'd create one central stylesheet and link it in the <head> of each HTML document, like so:
<!DOCTYPE html>
<html>
<head>
<title>Example Homepage</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
...
<a href="html/contact.html">Contact Information</a>
<a href="html/about.html">About</a>
...
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<link href="../css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
...
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>About Us</title>
<link href="../css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
...
</body>
</html>
(Notice the filepath to the stylesheet is different in index.html than it is in the two other pages, because index.html resides on the top-level of the directory, and contact.html and about.html reside in an html subdirectory. So their filepaths to the stylesheet are preceded with .. to exit out of the html directory before entering into the css directory.)
As projects increase in size, and if/when pages have their own dedicated styles that apply only to them, we can also create dedicated stylesheets for specific pages, like this:
my-sample-project/ ├── README.md ├── index.html ├── html │ ├── contact.html │ └── about.html ├── css │ ├── contact.css │ ├── about.css │ └── styles.css └── js ├── jquery-1.11.2.js └── scripts.js
Here, styles.css would contain universal styles for all pages, whereas about.css and contact.css contain styles applicable only to contact.html and about.html pages, respectively. These dedicated stylesheets could then be linked in relevant HTML files, after the universal stylesheet:
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<link href="../css/styles.css" rel="stylesheet" type="text/css">
<link href="../css/contact.css" rel="stylesheet" type="text/css">
</head>
<body>
...
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>About Us</title>
<link href="../css/styles.css" rel="stylesheet" type="text/css">
<link href="../css/about.css" rel="stylesheet" type="text/css">
</head>
<body>
...
</body>
</html>
However, do keep in mind we'll learn even more about sustainably separating styles in to multiple, modular stylesheets later this week, when we discuss something called 7-1 Architecture and how it relates to a style tool called Sass.
How does this apply to our User Interfaces course? Well, as you both recreate common types of user interfaces in your own CSS this week, and develop custom UI designs next week, you may find instances in which you need to craft a multi-page site to display those interfaces in the browser.
Again, we'll learn more advanced manners of doing this later (like using something called a module bundler to manage our source code, and a router to navigate between different site areas). But until further notice we'll use concepts discussed here when we need to create multi-page sites.