HTML Document Structure Example

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Portfolio - Multi-Page Site Example</title>
  <!-- Bootstrap CSS CDN -->
  <link
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-MEC0iO4VgJwP/..."
    crossorigin="anonymous"
  >
  <!-- Custom CSS -->
  <link rel="stylesheet" href="custom.css">
</head>
<body>
  
  <!-- Include Navbar -->
  <div w3-include-html="navbar.html"></div>

  <!-- Page-Specific Content -->
  <div class="container mt-5">
    <h1>About Me</h1>
    <p>This is the About page content.</p>
    <!-- More content -->
  </div>

  <!-- Footer -->
  <footer class="bg-dark text-center text-white py-4">
    <p>&copy; 2025 MyPortfolio. All rights reserved.</p>
  </footer>

  <!-- Bootstrap JS and dependencies CDN -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" 
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-LtrjvnR4Twt/qOuYxD2Pz..."
    crossorigin="anonymous"></script>
  
  <!-- Include JavaScript for HTML Includes -->
  <script>
    // Simple JavaScript to include HTML files
    function includeHTML() {
      var z, i, elmnt, file, xhr;
      z = document.getElementsByTagName("*");
      for (i = 0; i < z.length; i++) {
        elmnt = z[i];
        file = elmnt.getAttribute("w3-include-html");
        if (file) {
          xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function() {
            if (this.readyState == 4) {
              if (this.status == 200) {elmnt.innerHTML = this.responseText;}
              if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
              elmnt.removeAttribute("w3-include-html");
              includeHTML();
            }
          }      
          xhr.open("GET", file, true);
          xhr.send();
          return;
        }
      }
    }
    includeHTML();
  </script>
</body>
</html>

Keywords:

Multi-Page Site: A website consisting of multiple interconnected HTML pages, each serving different content or functions.
Navbar: A responsive navigation header that includes branding, navigation links, and interactive elements like dropdowns.
Bootstrap Grid System: A 12-column responsive grid system that allows for flexible and organized layout designs.
Container: Bootstrap class (.container or .container-fluid) that centers content and provides responsive margins.
Row: Bootstrap class (.row) used within containers to create horizontal groups of columns.
Column: Bootstrap classes (.col-, .col-sm-, .col-md-, .col-lg-, .col-xl-) used to define responsive column widths.
Form Group: Bootstrap class (.form-group) for grouping form controls and labels with proper spacing.
Responsive Design: Designing web content to adapt seamlessly to various screen sizes and devices.
Consistency: Maintaining uniform styles and layouts across different components and pages to ensure a cohesive user experience.
ARIA Attributes: Accessibility Rich Internet Applications attributes that enhance the accessibility of web components.

Day 12: Building a Multi-Page Site with Bootstrap Components and Layout Best Practices