Hyperlinks, including Navigation Bars

Intro to Links and Navigation Bars

Build a Blog Site: This is the eighth part of the Build a Blog Site tutorial series.
The focus of this tutorial is on Links and Navigation Bars.

Simulate Bootstrap: In this tutorial series we are mimicking Bootstrap classes, using the same Bootstrap class names, and applying the same or similar style but with less complex style rules.

Finished Code: The code is available on GitHub: github.com/LearnByCheating/learn-html-blog-site-example. There is a separate version with the finished code for each tutorial.

Live Server: If you are using VS Code as your text editor and have the Live Server extension installed, you can launch a local web server from the Editor.

Close any prior Live Server sessions by right-clicking in the editor, then select Stop Live Server.
If you are using the code from the GitHub link above, go to the .vscode/settings.json file and change the liveServer.settings.root value to the appropriate version: "liveServer.settings.root": "/v8-links-navbar"
Right click in the html page and select "Open with Live Server".

Written and Video tutorial: There are both a video and written version of each tutorial. For the HTML-CSS tutorial series the video and written versions have a different focus. The video tutorials are focused on the blog site project. The written tutorial is focused on the all the subtopics within the CheatSheet major topic.

CheatSheet: Part of the objective of this tutorial series is to become familiar with the CheatSheet so you can use it for quick reference going forward. As such, it is recommended that you review the CheatSheet category that aligns with this tutorial.

Mimic-bootstrap.css stylesheet

When we move on to the navigation bars, in some cases we will create some custom classes that are not part of Bootstrap.

To keep things clean, at this point we will:

Create a new stylesheet named mimic-bootstrap.css
Move all our current style rules from the styles.css stylesheet, to mimic-bootstrap.
Put the mimic-bootstrap stylesheet link in the index.html and article-template.html files, just above the style.css link. That way if there is a conflict, our custom stylesheet will take precedence.
We will put any new style rules in the mimic-bootstrap stylesheet if it is a Bootstrap class. If it is our own custom class we will put it in styles.css.
In the Blog Site v8 example code, there is now a full list of padding/margin utility classes.

Links

Hyperlinks use the anchor tag with the hyperlink reference attribute:
<a href="https://www.example.com">Example</a>

Target Attribute

When you click on a link, the URL will open in the current browser window. The user can open it in a separate tab by pressing the Command key on Mac, or Control key on Windows, when they click on the link.

To have the link automatically open in a new browser window, set the target attribute to _blank
<a href="https://www.example.com" target="_blank">Example</a>

Links can be:

Absolute links: put the full URL in the href attribute.

Example: <a href="https://www.example.com">Example</a>

Relative links: Link to another page on the same website. Set href to the path to other page without the domain. To make it relative to the site's root route, start the link with a slash.

Example: <a href="/articles/my-article.html">My Article</a>

URL Fragment: To link to a location on the a page:

Add an id attribute to an element you want to link to.
Append a # symbol followed by the element id to the end of the url or relative path.
If the fragment is on the same page as the link, just put the fragment.
Example: <a href="#topic-5">Topic 5</a>

Add hyperlinks to Blog Site

Open the Blog-Site-v8 project.

index.html file

On the index.html page, add links at the bottom of each article summary to the article.
Since we don't have real articles, put all the links to the article-template.html page:
<a href="/articles/article-template.html">Continue reading</a>

For the first article use this link, with classes to make the text white, and the font-weight bold:
<a href="/articles/article-template.html" class="text-white fw-bold">Continue reading</a>

articles-template.html file

Go to the articles/article-template.html file.
Add two links in the footer element:

articles/article-template.html

<footer class="bg-light mt-5 pt-3 pb-5 border-top text-center">
  <a href="#" class="me-4 text-decoration-none">Back to top</a> |
  <a href="/" class="ms-4 text-decoration-none">Home Page</a>
</footer>

Link to the top of the page: The first link is to href="#". A fragment with no id after the # symbol will just take us to the top of the page.
Link to the home page: Href="/" is a relative link to the root page of our site. Index.html is the default root page for a domain.
Text-decoration-none class will remove the underline from the link.

It is defined in our stylesheet: .text-decoration-none { text-decoration: none; }

Launch Live Server

Launch the site with Live Server.

From the home page, clicking on the "Continue reading" link should take you to the article-template.html page.
The article-template.html page's footer should have a link that takes you to the top of the page, and another link that takes you back to the home page.

Four States of a link by pseudo-class

The default styling of a link are listed below by pseudo-class.

Link State: Unvisited links are blue with an underline.

a:link {
  color: blue;
  text-decoration: underline;
}

Visited State: Visited links are purple. They continue having an underline.

a:visited {
  color: purple;
}

Hover State: On hover, changes the cursor to a pointer.

a:hover {
  cursor: pointer;
}

Active State: While the link is being clicked, the text turns red.

a:active {
  color: red;
}

Set anchor tag style

In the Blog-Site project, set the style for the a tag to the below:

stylesheets/mimic-bootstrap.css

a {
  text-decoration: underline;
  color: #0d6efd;
}

This changes the color of links to a lighter blue.
Since we did not include a pseudo class, it applies to all states.

links will no longer be purple if the link has been visited,
links will no longer turn red while the link is being clicked.

Bootstrap link classes

Bootstrap documentation on Link styling is at: getbootstrap.com/docs > click Utilities: Link
And: getbootstrap.com/docs > click Helpers: stretched link

You can optionally add the Bootstrap stretched-link class to the article summary "Continue reading" links.
<a href="/articles/article-template.html" class="stretched-link">Continue reading</a>

When you apply that class, the clickable area of the link will expand to the whole parent element, the article element.

We won't duplicate this functionality in our own code, so it will only work when you are using the Bootstrap CDN.

Navigation Bars

Now let's finish the navbar, footer, and Table of Contents sidebar by adding hyperlinks (see CheatSheet: Layout category > Navbar).

Bootstrap navbars are fully responsive, meaning they adjust to wider or narrower window sizes. You can add classes to collapse the link list when window width is below a specified width.
When the link list is collapsed, Bootstrap adds an icon that you can toggle to show and hide the link list.
This requires JavaScript which is out of scope for this tutorial series. And it uses flexbox which is not covered in this tutorial.

We will create two versions of the navbar and footer.

A simple version that is not responsive.
A Bootstrap version that is responsive when using the Bootstrap CDN. We'll mimic those classes but without the JavaScript functionality so it won't be as robust.

1. Non-responsive Navbar and Footer

Below we have a navbar with the Site brand to the left, and three navigation links.

index.html

<nav class="navbar navbar-dark bg-dark mb-4">
  <div class="container">
    <a class="navbar-brand" href="#">Site Name</a>
    <ul class="navbar-nav">
      <li>
        <a class="nav-link" href="/sample-form.html">Sample Form</a>
      </li>
      <li>
        <a class="nav-link" href="#">Link2</a>
      </li>
      <li>
        <a class="nav-link" href="#">Link3</a>
      </li>
    </ul>
  </div>
</nav>

And a footer with external links to social media accounts.

<footer class="navbar navbar-expand-sm navbar-light bg-light mt-5 pt-3 pb-5 border-top">
  <div class="container">
    <ul class="navbar-nav">
      <li><a class="nav-link">YourDomain.com © 202X</a></li>
    </ul>         
    <ul class="navbar-nav float-end">
      <li>
        <a class="nav-link" href="https://github.com/YOUR-USERNAME">Github</a>
      </li>
      <li>
        <a class="nav-link" href="https://twitter.com/YOUR-USERNAME">Twitter</a>
      </li>
      <li>
        <a class="nav-link" href="https://www.linkedin.com/YOUR-USERNAME">LinkedIn</a>
      </li>
      <li>
        <a class="nav-link" href="https://www.facebook.com/YOUR-USERNAME">Facebook</a>
      </li>
    </ul>
  </div>
</footer>

Below are the classes to style them. These differ somewhat from the Bootstrap style rules because they are not responsive. To see them in action you can put them in the styles.css file for now.

stylesheets/styles.css

/* nav */
.navbar {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem; 
}

.navbar-brand {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}
.navbar-dark .navbar-brand {
  color: white;
}

/* ul */
.navbar-nav {
  display: inline;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar li {
  display: inline;
}

/* a */
.nav-link {
  padding: 0.5rem 1rem;
  text-decoration: none;
}
.navbar-dark .nav-link { 
  color: rgba(255,255,255,.55);
}
.navbar-light .nav-link {
  color: rgba(0,0,0,.55);
}

.navbar: This class is on the nav and footer elements. It sets top and bottom padding to .5rem.
.nav-brand: This goes on the navbar to display your site name. It is a little bigger than the nav links, and clicking it just takes you to the top of the current page.
.navbar-dark .navbar-brand: If the .navbar-brand element has a parent with class navbar-dark, then the text color gets set to white.
.navbar-nav: This class is assigned to the ul element that holds our list of nav links.

It changes the display from block to inline so that it doesn't start a new line.
It removes the left padding and bottom margin that lists normally have.
And removes the bullet points from the list items by setting list-style to none.

.navbar li: This changes the display property from block to inline for all the list items so they can be on one line.
.nav-link: This goes on the anchor tags. It applies padding and removes the underline by setting text-decoration to none.
.navbar-dark .nav-link: If the nav link has an ancestor with class .navbar-dark, then the link color will be light gray.
.navbar-light .nav-link: If the nav link has an ancestor with class .navbar-light, then the link color will be a medium gray.

If you save the changes and look in the browser, the index.html should have a fully styled navbar and footer.

2. Responsive Navbar and Footer

The fully responsive code is in the Blog Site v8 finished code.

If you added the non-responsive style rules to the styles.css file, delete them now.

For reference, the Bootstrap documentation on Navbar styling is at: getbootstrap.com/docs > click Components: Navbar

The classes are mimicked in the mimic-bootstrap.css file. Except we are not using JavaScript to hide the links when the screen width is narrow, so it's not as slick as the actual Bootstrap.

To see the Bootstrap responsive behavior, uncomment the Bootstrap CDN link and comment out mimic-bootstrap.css.
Then reverse it again.

Table of Contents sidebar

The Table of Contents on the article-template.html page has links to the element ids on the page.
It displays the links vertically so we are not using the same responsive classes we used with the navbar and footer.

articles/article-template.html

<nav class="col-md-3">
  <div class="sidebar">
    <div class="bg-light p-4 mb-3 card">
      <h5 class="pb-2 border-bottom text-muted">Table of Contents</h4>
      <ul class="nav flex-column my-0">
        <li class="l1"><a class="nav-link" href="#topic-1">Article Topic 1</a></li>
        <li class="l2"><a class="nav-link" href="#subtopic-1a">Subtopic 1A</a></li>
        <li class="l3"><a class="nav-link" href="#sub-subtopic-1ai">Sub-subtopic 1a i</a></li>
        <li class="l1"><a class="nav-link" href="#examples">Examples</a></li>
        <li class="l2"><a class="nav-link" href="#ex-list">List Examples</a></li>
        <li class="l2"><a class="nav-link" href="#ex-table">Table Example</a></li>
        <li class="l2"><a class="nav-link" href="#ex-image">Image Examples</a></li>
      </ul>
    </div>
  </div>
</nav>

Nav is a semantic tag that indicates that element contains navigation links.
These links are URL fragments within the same page. When clicked, they will put the element with that id to the top of the screen.

Let's define the Bootstrap classes we are using above.

stylesheets/mimic-bootstrap.css

.card {
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: #0d6efd;
  text-decoration: none;
}

Card: The card class puts a grey border with rounded corners around our sidebar.
Nav: The nav class is placed in the ul tag that holds our links. It changes some of the default unordered list styling:

It removes the padded in front of list items.
It changes the list-style to none so we won't see the bullet points.
It removes the bottom margin.
It adds flexbox functionality which is not covered in this tutorial.

Nav-link: The nav-link class is applied to the anchor tags.

It changes the display from inline to block so it takes up the whole row within the sidebar.
Adds padding, and gives it a blue color (which will be overridden below).
Removes the text-decoration (i.e., the underline) from the link.

We also need some custom style rules for our sidebar. The styles.css file should be empty. Put these in the styles.css file.

stylesheets/styles.css

.sidebar {
  position: sticky;
  top: .5rem; 
  height: 100vh; 
  overflow-y: auto;
}
.sidebar .nav-link {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-left: 0;
  padding-right: 0;
  color: #6c757d;
} 
 .sidebar .nav-link:hover {
  text-decoration: underline;
} 
.l1 { padding-left: 0; }
.l2 { padding-left: 1rem; }
.l3 { padding-left: 2rem; }

Sidebar:

Position sticky means if you scroll down it will not scroll out of view. Rather it will stick to the top of the screen.
Height 100vh means the column will take up 100% of the vertical window.
Setting overflow-y to auto will put the sidebar in a scrollbar if it takes up more than the available screen height.

.sidebar .nav-link: This style rule only applies to nav-link classes that are descendants of the sidebar class. So this class will apply to our sidebar, but not to those in the navbar or footer.

It adds padding to the top and bottom and removes padding from the right and left.
It changes the color of the link text to grey.

.sidebar .nav-link:hover: Here we add a pseudo-class that adds an underline to the link when the user hovers over it.
l1, l2, and l3: Add indentation (padding) to the table of contents links.

l1: level one links have no indentation.
l2: level two links have 1rem (16px) indentation.
l3: level three links have 2rem (32px) indentation.

Save the changes and you can see the result in the browser.

Hyperlinks, including Navigation Bars (Video Tutorial)

Hyperlinks, including Navigation Bars

Intro to Links and Navigation Bars

Mimic-bootstrap.css stylesheet

Links

Target Attribute

Add hyperlinks to Blog Site

index.html file

articles-template.html file

articles/article-template.html

Launch Live Server

Four States of a link by pseudo-class

Set anchor tag style

stylesheets/mimic-bootstrap.css

Bootstrap link classes

Navigation Bars

1. Non-responsive Navbar and Footer

index.html

stylesheets/styles.css

2. Responsive Navbar and Footer

Table of Contents sidebar

articles/article-template.html

stylesheets/mimic-bootstrap.css

stylesheets/styles.css