So their filepaths to the stylesheet are preceded with. (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. To create a link navigating from index.html to the contact.html contact page, for example, we use the following code: Linking Between Pagesīut we need a manner for users to navigate between these pages! Thankfully, we can do this with a simple tag.
This is because the browser looks for an index.html in the main directory, so it knows what to load first.Įach of these new files will look similar to HTML files we've created previously, with, , and tags containing whatever page-specific content we want. Notice index.html remains in the top-level of the directory, but additional (non-homepage) HTML files are in an html subdirectory. We would add these pages by creating two corresponding HTML files: my-sample-project/ In addition to the index.html homepage, we want "About Us" and "Contact Us" pages. Let's say we want this site to contain multiple pages too. In fact, many traditional sites offer multiple areas users can navigate between. This example site has only one page: index.html. A css subdirectory with a custom styles.css stylesheet.A project directory called my-sample-project.Creating Multiple PagesĪ basic HTML site, as created in Intro, is structured something like this: my-sample-project/ 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. We'll learn alternative, more advanced ways to create multi-page sites later on.
#HEAD FIRST HTML AND CSS 2ND EDITION SOURCE FILES HOW TO#
So, before continuing, let's briefly address how to create multi-page HTML sites for use in this course. 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. Different areas you can navigate between (usually with links, or a navigation menu) to see and interact with different information. As you know, many websites feature multiple pages.