Reuse for HTML: PART 1

In the last module, we prepared some CSS classes from the main landing page to be reused in the details page. In this part of the module we will reuse those classes while building a details page for car1 of the vehicle results.

You can download the finished code for this module with the link below:

Download
Table Of Contents
  1. Reusing the header and footer


Create a new text file in the fredscars/html/Chapter01Mod10a directory (or your current development directory) called “car1-details.html”. Right click in the files pane in Windows Explorer to create the file and select “New -> Text Document” as shown below and name it “car1-details.html”.

Note: If you are creating a new Module Folder for each Module and copying your source files over as you go, then the path for the new file in the image above will be,
“C:\Development\FredsCars\Chapt01Mod10a\car1-details.html”.

Open up car1-details.html in TextPad or your favorite text editor and add the html code below.

<!doctype html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Car 1 Details</title>

   <!-- 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">

   <!-- Removed <style> element since we have no internal styles yet -->

   <!-- Removed <script> element since we have no internal JavaScript yet -->
</head>
<body>
   <header>
      Fred's Cars, Trucks & Jeeps
   </header>

   <div class="container-fluid py-4" style="border:1px solid black;">
      <h3 class="text-center bg-primary py-2">Car 1 Details</h3>
      <h1>Content</h1>
   </div>

   <div class="spacer"></div>

   <footer style="background-color:black;
	   color: white;
	   text-align:center">
      Contact us: (555)555-5555<br />
      121 Fredway St.<br />
      Cartown USA
   </footer>
</body>
</html>

In the above code I basically copied the html code from fredscars.html to car1-details.html, removed the style and script elements, and replaced the main content div that held the main content, category buttons, and results, with a div that looks like this:

<div class="container-fluid py-4" style="border:1px solid black;">
   <h3 class="text-center bg-primary py-2">Car 1 Details</h3>
   <h1>Content</h1>
</div>

If you now open car1-details.html in a browser it should look similar to the screen shot below.

Let’s inspect the new main content <div> in the code snippet above.

We have replaced the welcome message, category buttons, and results content with a heading 3 ,<h3>, element which gives a visual title to the page of “Car 1 Details”, centered it’s text with Bootstrap, gave it a Bootstrap primary background color and a Bootstrap vertical padding of 2 pixels.

The <h3> heading along with an <h1> heading containing the page’s placeholder text content, “Content”, are contained within our main content <div> element. We have applied Bootstrap’s container-fluid class to the main content <div> which makes the div full-width and gave it a vertical padding of 4 pixels using Bootstraps padding class notation. We have also applied a border style of 1 pixel, solid, black so you can see visually that the main content <div> is actually full width on the screen.

Notice how easily we were able to reapply the css styles to the header and footer by importing the site.css file with the <link> element in car1-details.html as well as fredscars.html.

<link href="css/site.css" rel="stylesheet" />

Reusing the header and footer

Take another look at the new code in car1-details.html. Notice we are using the same exact html for the header and the footer as in fredscars.html:

<!-- ... -->
<header>
   Fred's Cars, Trucks & Jeeps
</header>

<!-- ... -->

<footer style="background-color:black;
        color: white;
        text-align:center">
   Contact us: (555)555-5555<br />
   121 Fredway St.<br />
   Cartown USA
</footer>
<!-- ... -->

Imagine if we copy this to dozens or potentially hundreds or thousands of detail pages and then need to make a change to the header or footer. We would have to go through every webpage and manually make the change.

We need a way to breakout and reuse the header and footer html across all the detail pages like we did for our css file.

Using the w3-include-html attribute

It’s very surprising that html does not provide away to do this. But, fortunately, w3Schools.com has an attribute called w3-include-html that can be used to accomplish our goal: to reuse the same header and footer on all detail pages that the main page uses.

For the first step, we need to break out the header and footer html to separate files similar to the way we did with site.css. Create a new folder called “include” next to your “css” and “images” folders:

In the new include folder we are going to create two new files; header.html and footer.html. Create header.html now in the include folder and copy the header code into it from fredscars.html and save the file.

<header>
   Fred's Cars, Trucks & Jeeps
</header>

Now create footer.html and copy the footer html from fredscars.html into it and save the file:

<footer style="background-color:black;
	color: white;
	text-align:center">
   Contact us: (555)555-5555<br />
   121 Fredway St.<br />
   Cartown USA
</footer>

Modify the contents of car1-details.html with the following code.

<!doctype html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Car 1 Details</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.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous">

   <link rel="stylesheet" href="css/site.css">
   <!-- Removed <style> element since we have no internal styles yet -->

   <!-- Removed <script> element since we have no internal JavaScript yet -->
</head>
<body>
   <div w3-include-html="include/header.html"></div>

   <div class="container-fluid py-4" style="border:1px solid black;">
      <h3 class="text-center bg-primary py-2">Car 1 Details</h3>
      <h1>Content</h1>
   </div>

   <div class="spacer"></div>

   <div w3-include-html="include/footer.html"></div>

   <script>
      w3.includeHTML();
   </script>

</body>
</html>

At the top of the code above we imported a JavaScript file called w3.js from w3schools.com in the src attribute of a script tag.

At the bottom of the code we call a function from w3.js called w3.includeHTML(). This will look through all of our html elements and find any with the w3-include-html attribute and include the html from the file we point to.

We then replaced our header and footer divs with two divs that point to “include/header.html” and include/footer.html respectively.

If you open car1-details.html from the path c:\development\fredscars\html\Chapter01Mod10a\car1-details.html in your browser, it should look similar to the screen shot below.

Well wait a minute! What happened to our header and footer?

What’s happening here is that the w3-include-html attribute and supporting JavaScript will not work running the webpage from our local file system.

It will only work if you run the webpage from a Webhost Server. Windows comes with a host server called IIS (Internet Information Services). In the next part of this module we’ll set up our environment so that fredscars.html and car1-details.html are running from IIS.

< Prev
Next >

Leave a Reply