In the last module, Reuse for HTML: PART 1, we began to make our header and footer reusable. But we lost them in the process and they stopped showing up on the car1-details.html webpage. We are going to fix that here in this module.
You can download the finished code for this module with the button below:
Setting up IIS (Internet Information Services)
We are going to start by setting up a webhost server called IIS (Internet Information Services) on our local Windows environment and run our webpages through the host server instead of from our local file system so that the JavaScript to include the reusable html components will work.
Turn on IIS
Start by Pressing Ctrl-Esc to access the start menu and search for Control Panel. Click the Control Panel result on the right to open it.
In the control panel, set the “View By” selection to “Large icons” and click the “Programs and Features” icon.
Next select, “Turn Windows features on or off”.
The Windows Features dialogue will pop up. Make sure the checkbox next to Internet Information Services is at least partially checked.
In the above screen shot a blank checkbox means none of the sub-features of the main feature are turned on. A checked checkbox with a blue fill means they are all turned on. And a dash with a blue fill means some of the sub-features are activated.
In the following screenshot you can see what I have selected on my local development machine. These are all the default selections so I didn’t have to change anything. Also very few features are selected because when we get into ASP.Net Core development in the following chapters you will see that Visual Studio comes with it’s own development server. Also most of the selections here are for the older version of ASP.Net from the .Net Full Framework rather then the newer ASP.Net Core framework.
Click the OK button. Once your computer finishes installing IIS you may need to reboot your computer.
Configure the website in IIS
Now that we have installed IIS it should show up in the start menu. In the start menu search for IIS and select the result icon.
IIS Manager will pop up as shown in the following screenshot.
Create the FredsCars Website
Once you’ve opened the Internet Information Services Manager, right click on Sites and select Add Website.
The Add Website dialogue will pop up. Enter the information into the dialogue the same as you see it in the screen shot below.
Make sure the values match for each setting in the Add Website dialogue.
Site name: FredsCars
Application pool: FredsCars
Physical path: C:\Development\FredsCars\HTML\Chapter01Mod10b (or the path where you’re development files are).
Binding Type: http
Binding Address: 127.0.0.1 (This is called the loopback address. Every computer has an IP Address and the loopback address loops back to your own computer for development.)
Port: 80 (This is the default port for the web and your browser.)
Host name: www.fredscars.com (This is the URL you are specifying should be typed in the browser to find this website.)
Click OK and you will see the FredsCars website appear under Sites.
Expand the FredsCars site and you’ll see the current html files and the css, include, and resource folders we are currently working with.
Configure the Host file.
Right now if you type the www.fredscars.com URL into your browser it will not be able to find the website and you will get a 404 Page Not Found error. We have to tell your local development computer that the site at www.fredscars.com can be found on the same local computer at the loopback address of 127.0.0.1
In order to fix the 404 error we need to add an entry to the local computer’s host file.
Open up TextPad, NotePad, or your favorite text editor in Administrator mode.
In the screenshot below, I search for TextPad in the Start Menu, right click on the resulting TextPad app, and select Run as administrator.
Your system will ask you the following: “Do you want to allow this application to make changes to your device?” Click yes and TextPad will open in Administrator mode.
Click File -> Open and navigate to “C:\Windows\System32\drivers\etc” so you can open the host file.
Enter the following entry in the host file:
127.0.0.1 www.fredscars.com
The following screenshot is what my host file looks like after I make the fredscars entry.
There are a lot of comment lines in the host file starting with the ‘#’ character describing what the file does and how to add an entry. My file has some IP Mappings that were automatically inserted when I installed Docker. Docker is a tool to run applications in their own container and is used heavily in ASP.Net Core deployment but will probably be outside the scope of this book.
Don’t forget to save the file before closing it.
Run the new website from IIS
Type www.fredscars.com/car1-details.html into the address bar of your browser and the header and footer should now reappear in the browser and are being generated by the w3-include-html attribute we learned about in module 10a using the header.html and footer.html include files we created.
Update FredsCars.html with the header and footer components
Now we need to go back to FredsCars.html and make the same edits we did for car1-details.html in order to use the header and footer html components and ensure if we ever make a change to the header and footer we only need to make it in one place and that change will trickle through the entire site.
Modify the contents of fredscars.html with the following code, save your file, and type www.fredscars.com/fredscars.html in the address bar of your browser.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Freds Cars, Trucks & Jeeps</title>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<!-- Bootstrap CSS -->
<!-- CSS only: not combined with popper -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<link rel="stylesheet" href="css/site.css">
<!-- ... -->
<!-- Styles (Leave as is) -->
<!-- ... -->
<!-- ... -->
<!-- Scripts (Leave as is) -->
<!-- ... -->
</head>
<body>
<div w3-include-html="include/header.html"></div>
<div class="container-fluid my-4 text-center">
<h1>Welcome to Fred's Cars!</h1>
Where you'll always find the right car, truck, or jeep.
Thank you for visiting our site.
<div class="container-fluid mx-0 row"
style="margin-top: 20px;">
<!-- Categories Section (Leave as is) -->
<!-- Results Section (Leave as is -->
</div>
</div>
<div class="spacer"></div>
<div w3-include-html="include/footer.html"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>
Mapping Image Mime Types
At this point you may run into one more challenge. In the screenshot below, we are now running the landing page through IIS. And the header and footer are now being generated from the reusable html files. But some of the images are not showing up. IIS is not serving images with a .webp extension.
The images that are showing up have a .png file extension which IIS allows by default. The images that are not showing up have a .webp file extension which IIS does not serve by default. To fix this we can add a MIME Type in the FredsCars IIS site.
In IIS Manager, double click MimeTypes for the FredsCars site.
Click Add in the upper right corner of the MIME Types feature screen to add the .webp MIME Type and then click OK.
Refresh your browser and you should see a complete working version of the landing page using the reusable header and footer and all images should be rendering from IIS.
What’s Next
Now that we have figured out how to make the same header and footer reusable across the site, in the next part of the module let’s turn our attention back to the details page and finish it up.