ABOUT US SAMPLE PAGE HOW TO

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. These dedicated stylesheets could then be linked in relevant HTML files, after the universal stylesheet: 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. to exit out of the html directory before entering into the css directory.)Īs 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/ 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.

ABOUT US SAMPLE PAGE 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.

About us sample page