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>© 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.
Definition Section
- Multi-Page Site:
- A website architecture comprising multiple HTML pages, each dedicated to specific content or functions, interconnected through navigation links.
- Navbar (Navigation Bar):
- A Bootstrap component that serves as a responsive and consistent navigation header across all pages, typically containing branding, links, and interactive elements like dropdowns.
- Bootstrap Grid System:
- A responsive 12-column grid system in Bootstrap that allows developers to create flexible and organized layouts, adapting to various screen sizes.
- Container:
- A Bootstrap class (
.container
or.container-fluid
) that centers website content and provides responsive padding and margins, ensuring content is well-aligned across different devices.
- A Bootstrap class (
- Row and Column:
.row
: A Bootstrap class used to create horizontal groups of columns..col-
: Bootstrap classes defining the width of columns, responsive to different screen sizes (.col-sm-4
,.col-md-6
, etc.).
- Form Group:
- A Bootstrap class (
.form-group
) that wraps form controls and labels, providing proper spacing and alignment for form elements.
- A Bootstrap class (
- Responsive Design:
- An approach to web design that ensures websites render well on a variety of devices and window or screen sizes, providing an optimal user experience.
- ARIA Attributes:
- Accessibility features that define roles, states, and properties to improve the accessibility of web components for users with disabilities.
Brief History of Bootstrap Multi-Page Sites and Layouts
- Bootstrap 3 (2013):
- Introduced a robust grid system and responsive utilities, making it easier to build multi-page sites that adapt to different devices.
- Emphasized mobile-first design, ensuring layouts prioritized smaller screens.
- Bootstrap 4 (2018):
- Enhanced the grid system with more responsive breakpoints and utility classes.
- Improved component reusability and customization, facilitating consistent design across multiple pages.
- Introduced Flexbox-based grid system for more flexible and dynamic layouts.
- Bootstrap 5 (2021):
- Continued refinement of the grid system with additional utilities and improved responsiveness.
- Enhanced accessibility features, ensuring multi-page sites built with Bootstrap are more accessible.
- Removed jQuery dependencies, making Bootstrap components lighter and faster, which benefits multi-page site performance.
Fun Facts
- Flexibility with Grid System:
- Bootstrap’s grid system allows developers to create complex and responsive layouts without writing extensive custom CSS, streamlining the development process.
- Consistency Across Pages:
- Using Bootstrap components like navbars and footers consistently across all pages ensures a seamless user experience and reinforces brand identity.
- Responsive Utilities:
- Bootstrap’s utility classes provide granular control over layout and styling, enabling developers to adjust components for different screen sizes effortlessly.
Practice Problems
Problem 1: Creating a Multi-Page Navbar
- File Name:
problem11_day12.html
- Instructions:
- Create two HTML files:
index.html
andabout.html
. - Create a
navbar.html
file containing a Bootstrap navbar with links to both pages. - Use JavaScript or server-side includes to embed
navbar.html
into bothindex.html
andabout.html
. - Ensure the navbar is responsive and the active page is highlighted.
- Create two HTML files:
- Objective: Practice creating a consistent and responsive navbar across multiple pages using Bootstrap components.
Problem 2: Building a Responsive Three-Column Layout
- File Name:
problem12_day12.html
- Instructions:
- Create an HTML file with a Bootstrap grid system.
- Implement a three-column layout that stacks vertically on small screens and displays horizontally on medium to large screens.
- Populate each column with a Bootstrap card containing an image, title, and text.
- Objective: Learn to use Bootstrap’s grid system to create responsive and organized layouts.
Problem 3: Designing a Consistent Footer Across Pages
- File Name:
problem13_day12.html
- Instructions:
- Create a
footer.html
file with a Bootstrap-styled footer containing contact information and social media links. - Embed
footer.html
into multiple pages (index.html
,about.html
, etc.) using JavaScript or server-side includes. - Ensure the footer maintains consistent styling and positioning across all pages.
- Create a
- Objective: Practice creating and reusing a consistent footer component across a multi-page site.
Problem 4: Implementing a Contact Form with Responsive Layout
- File Name:
problem14_day12.html
- Instructions:
- Create a
contact.html
page with a Bootstrap contact form. - Use Bootstrap’s grid system to center the form and ensure it is responsive.
- Apply spacing and alignment utilities to enhance the form’s appearance.
- Create a
- Objective: Understand how to design responsive and well-aligned forms using Bootstrap’s grid and utility classes.
Assignment Submission
After completing these exercises, call Mike over for feedback on your multi-page Bootstrap site, ensuring consistency and responsiveness across all pages.