Navigation
Put all your skills together to plan, design, and build a complete multi-page personal website.
Have you ever wondered how giant websites like Wikipedia or YouTube keep thousands of pages looking exactly the same without editing every single one by hand?
Before you touch a single line of code, you need a plan. A sitemap is a visual diagram that shows how the pages of your website are organized and connected. Think of it as the 'skeleton' of your site. In a typical multi-page project, you start with a root page called `index.html`. From there, you might branch out to `about.html`, `portfolio.html`, or `contact.html`.
Planning prevents 'spaghetti navigation'—where users get lost because they can't find their way back to the home page. A good rule of thumb for small sites is the Three-Click Rule: a user should be able to find any piece of information within three clicks. If your site has pages, ensure the navigation bar on every page contains links to the other pages.
1. Home (index.html): The main landing page. 2. About (about.html): Information about the creator. 3. Projects (projects.html): A gallery of work.
In this structure, each page will have a navigation bar with three links: `Home`, `About`, and `Projects`.
Quick Check
Why is it important to create a sitemap before you start coding your website?
Answer
It helps organize the structure, ensures all pages are connected, and prevents users from getting lost.
Consistency is what makes a website feel professional. If your Home page has a blue header and your About page has a red one, users will get confused. To solve this, we use an External Stylesheet.
Instead of putting CSS inside every HTML file, we create one file (usually named `style.css`). We then 'link' this file in the `<head>` section of every HTML page using the `<link>` tag. This means if you decide to change your site's font from Arial to Roboto, you only have to change one line of code in your CSS file, and it will update all pages across your entire site instantly. This is the power of DRY programming: Don't Repeat Yourself!
To link your CSS, place this code inside the `<head>` tag of `index.html`, `about.html`, and `projects.html`:
1. Create a file named `style.css`. 2. Add a rule: `body { background-color: lightblue; }`. 3. In your HTML files, add: `<link rel="stylesheet" href="style.css">`. 4. All pages now share the same blue background.
Quick Check
If you have 50 pages on a website and want to change the font size for all of them, how many files do you need to edit if you are using an external stylesheet?
Answer
Only one file (the CSS file).
The 'glue' that holds your site together is the Navigation Bar. This is usually a `<nav>` element containing a list of links. To move between pages in the same folder, we use relative paths. For example, `<a href="about.html">About Me</a>` tells the browser to look for a file named 'about.html' in the same folder as the current page.
Errors often happen here. A single typo like `aboot.html` will result in a 404 Error (Page Not Found). To find these mistakes, we use Validation. A validator is a tool that scans your code for missing closing tags, broken links, or syntax errors. It ensures your code follows the official rules of the web.
Imagine you moved your `about.html` file into a folder named `pages/`.
1. Your old link `<a href="about.html">` will now break. 2. You must update the path to `<a href="pages/about.html">`. 3. If you are inside the `pages/` folder and want to link back to `index.html` (which is outside), you use the 'jump up' syntax: `<a href="../index.html">Home</a>`.
Which HTML tag is used to connect an external CSS file to an HTML document?
What is the primary benefit of the 'Three-Click Rule' in web design?
If you use an external stylesheet, you must copy and paste all the CSS code into the <head> of every HTML page.
Review Tomorrow
In 24 hours, try to sketch a sitemap for a personal hobby website and write down the exact <link> tag used to connect a stylesheet.
Practice Activity
Create two HTML files (index.html and contact.html) and one style.css file. Try to make the background color of both pages change at the same time by editing only the CSS file.