1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>HTML5 Include Demonstration</title>
6
7 <!--
8 File: \\cssd.local\E\Student Resources\Website Development I\CodeSamples\Dave-Main.html
9 maintained by Jesse M. Heines, jesse@jesseheines.com
10 Copyright (c) 2022 by Jesse Heines. All rights reserved. May be freely
11 copied or excerpted for educational purposes with credit to the author.
12 updated by JMH on June 7, 2022 at 9:25 AM
13 updated by JMH on June 7, 2022 at 2:48 PM
14 -->
15
16 <script>
17 // source: https://www.w3schools.com/howto/howto_html_include.asp
18 function includeHTML() {
19 var z, i, elmnt, file, xhttp;
20 /* loop through a collection of all HTML elements: */
21 z = document.getElementsByTagName("*");
22 for (i = 0; i < z.length; i++) {
23 elmnt = z[i];
24 /* search for elements with a certain atrribute: */
25 file = elmnt.getAttribute("w3-include-html");
26 if (file) {
27 /* make an HTTP request using the attribute value as the file name: */
28 xhttp = new XMLHttpRequest();
29 xhttp.onreadystatechange = function() {
30 if (this.readyState == 4) {
31 if (this.status == 200) { elmnt.innerHTML = this.responseText; }
32 if (this.status == 404) { elmnt.innerHTML = "Page not found."; }
33 /* remove the attribute, and call this function once more: */
34 elmnt.removeAttribute("w3-include-html");
35 includeHTML();
36 }
37 }
38 xhttp.open("GET", file, true);
39 xhttp.send();
40 /* exit the function: */
41 return;
42 }
43 }
44 };
45 </script>
46
47 <style>
48 #Jesse {
49 color: green ;
50 }
51 </style>
52
53 </head>
54
55 <body>
56 <p>Before</p>
57 <div w3-include-html="Dave-Include.html"></div>
58 <div w3-include-html="Jesse-Include.html"></div>
59 <p>After</p>
60
61 <script>
62 includeHTML();
63 </script>
64 </body>
65
66 </html>
67
68 ==========================================================================================
69
70 <!--
71 File: \\cssd.local\E\Student Resources\Website Development I\CodeSamples\Dave-Include.html
72 Copyright (c) 2022 by Jesse Heines. All rights reserved. May be freely
73 copied or excerpted for educational purposes with credit to the author.
74 updated by JMH on June 7, 2022 at 2:52 PM
75 -->
76
77 <p>This line is included from file Dave-Include.html.</p>
78
79 <p>This line contains <span style="color: red ; font-weight: bold">HTML
80 formatting</span>.</p>
81
82 <style>
83 #Dave {
84 color: blue ;
85 }
86 </style>
87
88 <p id="Dave">This line is colored blue based on a stylesheet in the included file.</p>
89
90 <p id="Jesse">This line is colored green based on a stylesheet in the original (main)
91 file.</p>
92
93 ==========================================================================================
94
95 <!--
96 File: \\cssd.local\E\Student Resources\Website Development I\CodeSamples\Jesse-Include.html
97 Copyright (c) 2022 by Jesse Heines. All rights reserved. May be freely
98 copied or excerpted for educational purposes with credit to the author.
99 updated by JMH on June 7, 2022 at 2:57 PM
100 -->
101
102 <p style="font-style: italic">This text is coming from file Jesse-Include.html.</p>