Well, we are on the last lap now! We’ve done a lot of work in this chapter. We now have the main landing page, fredscars.html, where you can search for a vehicle by category, and a details page called car1-details.html for the first car in the CARS category results. Now we are going to learn how to link from a car result to its details page.
You can see a working version of fredscars.html linking to car1-details.html at the following link:
In the working version provided in the link above, you can see that if you click the Car 1 Result in the upper left corner of the Car Results, you will be taken to the car1-details.html page. Then, if you click on the text in the header, “Fred’s Cars, Trucks and Jeeps”, you will be taken back to the results landing page.
Preparing for the Module
I’ve have provided a download of the completed version of the HTML, JavaScript, CSS, images, and resources for each module. You can once again download the completed work for the end of this module, and the end of this chapter, at the following download button:
Link to the Details page from the main Results page
Modify the html in the first result-column <div> of the results in fredscars.html.
<!-- ... -->
<div class="row">
<div class="col result-column">
<ul class="list-unstyled" style="text-align:left;">
<li><strong>Status:</strong> New</li>
<li><strong>Year:</strong> 2021</li>
<li><strong>Make:</strong> Dodge</li>
<li><strong>Model:</strong> Challenger</li>
<li><strong>Color:</strong> Frostbite</li>
<li class="bg-info"><strong> Price: $64,164</strong><li>
<li class="result-li-vin"><strong>VIN:</strong> 2C3CDZFJ8MH631199</li>
</ul>
<hr />
<a href="car1-details.html">
<img src="images/cars/car1.webp"
class="result-image" /></a>
</div>
<!-- ... -->The new code above turns the car 1 image into an anchor link. Now when you reload fredscars.html and hover over the first car result the cursor will turn into a hand letting you know you have put your cursor over something that will take you to another web page when you click on it. Type www.fredscars.com/FredsCars.html into you’re browser and it should look like the following when you hover over the first car result.
And when you click the car image your browser will be taken to car1-details.html. Let’s look at the new html tag that creates the anchor link:
<a href="car1-details.html">text link or image link</a>In the above code snippet we have a new html tag; <a>. The <a> (anchor link tag) creates a link to another web page. It’s href attribute contains the pathway and filename to the webpage the browser should navigate to when you click the link. We just provided a filename, car1-details.html. We did not need to provide a full path because car1-details is in the same folder as fredscars.html.
Navigate back to the results from a Details page
Well that’s great that we can now get to the details page of a vehicle. But how do we get back to the main page? We should always provide the user a way to navigate the website without having to use his or her back button.
Modify the header.html file in the include folder with the following code, save the file, and refresh your browser.
<header>
<a href="fredscars.html">
Fred's Cars, Trucks & Jeeps</a>
</header>Remember all the time we spent making the header file reusable in modules 10a and 10b? Well now you’ll see it come in handy. The above code change will make the reusable header text, “Fred’s Cars, Trucks & Jeeps” a link back to the main page in every webpage file it is included in. So if you had hundreds of car details pages you would only need to make this change one time here in header.html.
At this point when you reload car1-details.html and fredscars.html, they will share the same header as shown below:
But wait! What’s going on? Why is the header text now blue and underlined instead of white with no underline like we styled it to begin with in our site.css file? This is the default styling of the browser for anchor link text.
If you don’t see blue underlined text in the header at this point you may need to “empty cache and hard reload”.
Hit the F12 key to open your web development tools.
Right click on the refresh button in the toolbar at the top of your browser and click, “Empty Cache and Hard Reload”.
Now we are going to fix the header styling and put it back to our original design; White text with no underline. Modify the site.css file in the css folder by adding the following css rule.
header > a {
color: #FFFFFF;
text-decoration: none;
}In the above CSS code, the selector says apply the following rule to any anchor element found within the header element. Then we set the color back to white using the hex value of #FFFFFF which is the hex value for white. You can use #FFFFFF as the value or the actual text “white” as we did originally in the header css rule. Finally, we set the text-decoration CSS property to “none” which will remove the underline. And now our headers should have white text with no underline again. (You may need to empty and reload the cache again as shown above to get the correct results.)
And the header text will navigate back to the results landing page. That wraps up this chapter. I hope you had as much fun as I did. If you think HTML and the basics are fun, just wait until we get into ASP.Net Core in the next part of the book!