Now that you know how to create internal links, where should they go on your page? In reality, you can place links anywhere you like, and will often have them mixed in with the main content. In addition, it's often a good idea to group links together in a common location called a "navigation bar". A navigation bar is an area on your page that holds links to other pages and sub-pages on your web site.
Types of Navigation Bars
Navigation bars do not actually have to be shaped like a rectangular "bar", but listing your links horizontally or vertically in a line is simple and easy to read. Some websites will create vertical navigation bars that fit along the left or right side of the page.
The example below demonstrates the vertical navigation bar that you will eventually create on your Raptors website. Your navigation bar will start off very simply and will eventually gain the fancier styles and colors as you learn new skills.
Websites may also choose to use a horizontal navigation bar, normally placed near the top of the page, just below the banner. In the second semester, you will work on a new website that has a horizontal bar as pictured below.
It is usually best practice to have just one navigation bar per page, but you may find sites with two or more navigation areas that work together. It's also best practice to place the same navigation bar on each of the pages within your website. That way, no matter where your readers are within your site, they have a common way to navigate to other pages.
Creating Navigation Bars with Lists
Web designers will often use a simple, unordered list <ul> to hold links in a navigation bar. Each list item <li> contains one link to another page. The entire navigation bar is wrapped in a <div> or similar element to help style and position the block within the page.
Let's create a quick menu with links to the instructions for baking a cake. Each link in the menu will point to another page with detailed instructions on mixing, baking or frosting. We'll start with a <div> that contains the entire navigation area. Inside that <div>, we can place the list of menu items. Of course, be sure to carefully match opening and closing tags for your <div>, <ul> and <li> elements! This navigation <div> could later be moved around and formatted into a horizontal or vertical navigation bar.
Notice how each list item contains an internal link to a different HTML page? This is the heart of a navigation bar! With this menu, users can quickly access any of the other pages.
Now, we haven't actually created the target pages like "mix_ingredients.html", so if you click on those links in the output panel, you will get an error. When building a navigation bar before creating the sub-pages, you can just enter a number sign ("#") for the href value instead of the filename. That "#" sign placeholder will ensure the link appears just like a normal hyperlink, but clicking on it will not take you anywhere.
<li><a href="#">Mixing</a></li> <!-- come back and fix the href later! -->
Copy
Can you update the cake-mixing example and replace the invalid filenames with the "#" sign? Then verify in the output panel that clicking on each link remains on that page, without producing an error.
Raptors Navigation Bar
Let's turn our attention to your Raptors home page. You have already created a <div> section with a list containing some items that we'd like to make into a navigation bar:
<div id="sidebar">
<div id="navigation">
<ul>
<li>Home</li>
<li>Great Grey Owl</li>
<li>Great Horned Owl</li>
<li>Burrowing Owl</li>
<li>Golden Eagle</li>
<li>Comparing Raptors</li>
<li>Contact</li>
</ul>
</div><!-- end of navigation -->
</div><!-- end of sidebar -->
1. What is a navigation bar? Where are navigation bars typically found on a web page?
2. What elements are typically used to create a navigation bar on a web page?
3. Do you need to have all your sub-pages created before creating a navigation bar?
4. What symbol can you use as a placeholder for a missing page in an anchor element?
1. A navigation bar is an area on a web page that holds links to other pages and subpages on a website. They are typically found at either the top or sides of a web page, below the banner for horizontal bars or aligned left or right for vertical bars.
2. A navigation bar on a web page is typically created using a combination of <div>, <ul> and <li> elements. The <div> is used to contain the entire navigation area, the <ul> (Unordered List) is used to hold the links, and each <li> (List Item) contains one link to another page.
3. No, you don't need to have all your subpages created before creating a navigation bar. You can use placeholders for the links that you will update later once the subpages are created.
4. The "#" symbol can be used as a placeholder for a missing page in an anchor element. This ensures the link appears like a normal hyperlink, but clicking on it does not take you anywhere until the actual page link is added.
1. A navigation bar is an area on a web page that holds links to other pages and sub-pages on the website. Navigation bars are typically found at the top of the page, just below the banner, or along the left or right side of the page.
2. Typically, web designers use an unordered list (<ul>) to hold the links in a navigation bar. Each list item (<li>) contains a link (<a>) to another page. The entire navigation bar is wrapped in a container element, such as a <div>, to apply styling and positioning.
3. No, you do not need to have all your sub-pages created before creating a navigation bar. You can use a placeholder symbol, such as a "#" sign, for the href attribute of the anchor element. Clicking on the link with the placeholder will not take you to another page, but it will still appear as a normal hyperlink.
4. The symbol that can be used as a placeholder for a missing page in an anchor element is the "#" sign.
1. A navigation bar is an area on a web page that contains links to other pages and sub-pages of the website. Navigation bars are typically found either horizontally at the top of the page or vertically along the side of the page.
2. The elements typically used to create a navigation bar on a web page are:
- An outer container element such as a <div> to wrap the navigation bar.
- An unordered list <ul> to hold the individual navigation items.
- List items <li> to represent each individual navigation item.
- Anchor elements <a> within each list item to create the clickable links.
3. No, you don't need to have all your sub-pages created before creating a navigation bar. In fact, it's common to create the navigation bar before creating the sub-pages. In this case, you can use a placeholder symbol, such as "#" in the href attribute of the anchor elements, to indicate that the links are not yet functional. This allows you to design and implement the navigation bar early on, and then later update the links with the actual filenames when the sub-pages are created.
4. The symbol "#" can be used as a placeholder for a missing page in an anchor element. When you use "#" as the value of the href attribute, it represents a URL fragment identifier that doesn't correspond to a specific page. Clicking on this link will not navigate to a different page but will still provide the appearance of a normal hyperlink.