Welcome to Main Page Guide!

The main page of this website located at:

https://maloneuniversity.org/index.html

There are five main ways it can be reached:

  1. Entering https://maloneuniversity.org into a web browser.
  2. Clicking the Home link on the top navigation bar of MGU webpages.
  3. Clicking the the MGU Logo image link in the top left corner of MGU webpages.
  4. Clicking on the Site Home link in bottom navigation menus.
  5. Clicking on its link on external sites such as social media apps or Google search pages.

Purpose of Main Page

The Main Page serves as the main landing page for the entire site. Its job is to communicate basic nature, navigation, and function of the site. Typically it is the first page people see when visiting the site so it must clear in its branding and philosophy to establish its identity early on.

Features of the Main Page

The main page features include introductory text, explanation of the school's general philosophy, and guilding principles.

The main layout and design of the main page is stored using a template. This template serves as a model for all other pages on the website. Pages may vary from time to time but they all tend to follow the same construction. Pay attention to commented sections: 


<!DOCTYPE html>
<html lang="en">

 <!-- ========== HEAD ========== -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <title>Title | Name of Department | Malone Global University</title>
  <link rel="icon" href="/image/global/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="/component/dept.css">
</head>

<!-- ========== BODY ========== -->
<body id="top" data-uploaded="5-16-2026" data-updated="5-16-2026">

<!-- ========== HEADER ========== -->
<div id="header-placeholder"></div>
<script>
fetch('/component/header.html')
  .then(response => response.text())
  .then(data => {
    document.getElementById('header-placeholder').innerHTML = data;

    const script = document.createElement('script');
    script.src = '/component/main.js';
    document.body.appendChild(script);
  });
</script> 

<!-- ========== HERO ========== -->
<section>
<h1></h1>
</section>

<!--  ======== BREADCRUMB ======== -->
<nav class="breadcrumb" aria-label="Breadcrumb" id="breadcrumb"></nav>

<!--  ======== Main ======== -->
<main id="main-content" role="main">

<!-- ========== BOTTOM PAGE NAVIGATION ========== -->
<div id="bottom-nav-placeholder"></div>
</main>

<!-- ========== FOOTER ========== -->
<div id="footer-placeholder"></div>

<script>
fetch('/component/bottom-nav.html')
  .then(response => response.text())
  .then(data => {
    document.getElementById('bottom-nav-placeholder').innerHTML = data;
  });

<!-- ========== JS LOADER SCRIPT ========== -->

fetch('/component/footer.html')
  .then(response => response.text())
  .then(data => {
    document.getElementById('footer-placeholder').innerHTML = data;

    const uploaded = document.body.dataset.uploaded;
    const updated = document.body.dataset.updated;

    const pageDates = document.getElementById('page-dates');

    if (pageDates) {
      pageDates.textContent = `Uploaded: ${uploaded} | Updated: ${updated}`;
    }
  });
</script>
</body>
</html>

The Main MGU Template

The 8 main parts of the template are:

  1. <!-- ========== HEAD ========== -->
  2. <!-- ========== BODY ========== -->
  3. <!-- ========== HEADER ========== -->
  4. <!-- ========== HERO ========== -->
  5. <!-- ========== BREADCRUMB ========== -->
  6. <!-- ========== Main ========== -->
  7. <!-- ========== BOTTOM PAGE NAVIGATION ========== -->
  8. <!-- ========== FOOTER ========== -->

The Head

The head contains important metadata such as html title, favicon link, and CSS stylesheet link.The title can be read by hovering mouse pointer about tabs of webpages. The idea is that if you have many active tabs hovering the mouse to read the tab's title allows you to find a page quickly without viewing each page.

The favicion is a small icon image that when linked properly dispays a small picture in the tab. This picture is intended to be the logo of the website so that people can identify what pages are open just ny looking at the icon; looking at the icon is faster than hovering mouse to read title; both favicons and page title do the same job of telling you what page you are on but title sare more specific.

A favicon will tell you what website but titles can tell you what exact page of what website. When viewing a page directly all metadata items that are enclosing with <head></head> tags are in invisible to visistors of the page.

The Body

The Body contains everything that is visible on the page. This includes the header, hero, breadcrumbs, bottom-nav, and footer. The body is the primary part of a HTML document (webpage) and acts as a container by wrapping all visible HTML elements inside <body></body> tags.

The Header

This is the uppermost visible element on the page. MGU uses a combination header + navigation menu. A header acts as the top formatting block for the page. It contains information to communicate what website you are on. Think of it as the top section of a webpage that usually contains the site logo, navigation menu, and search bar. It helps users orient themselves and navigate the site.

The Hero

A hero is a wide banner that displays the title of a page and sometimes additional subtitle text. The different subdomians of MGU use color coded heroes to identify which subdomain a user is currently navigating.

The Breadcrumbs

Breadcrumbs are links that take you back to the home page by following either the hierarchy of folder indices, or by tracking the actual path taken.

Common breadcrumb navigation types are:

  1. Location-based breadcrumbs

    Shows where the current page sits in the site hierarchy. Example:

    Home > Library > Encyclopedia > Science > Physics

  2. Path-based breadcrumbs

    Shows the actual route the user took to reach the page. Example:

    Home > Search Results > Article

  3. Attribute-based breadcrumbs

    Common in stores or catalogs. Shows filters/categories applied. Example:

    Home > Shoes > Men > Black > Size 10

  4. Hierarchical breadcrumbs

    Almost the same as location-based, but the name emphasizes parent-child structure. Example:

    Home > Department > Course > Lesson

  5. History-based breadcrumbs

    A “back trail” based on browsing history. Less common today. Example:

    Previous Page > Previous Page > Current Page

  6. Dynamic breadcrumbs

    Generated automatically with JavaScript or server code from the URL/path.

    Example URL:

    /library/encyclopedia/science/physics/

    Breadcrumb:

    Home > Library > Encyclopedia > Science > Physics

  7. Static breadcrumbs

    Hard-coded directly into each HTML page.

  8. Responsive/mobile breadcrumbs

    A compact version for small screens, often showing only:

    ‹ Back to Physics or Home > … > Current Page

MGU originally used static breadcrumbs but has since transitioned to dynamic, location-based, hierarchical breadcrumbs, generated from the URL path.

More specifically:

It is dynamic because JavaScript builds it automatically from /component/breadcrumbs.js using window.location.pathname.

It is location-based because it reflects where the page lives in the site structure.

It is hierarchical because each URL folder becomes a parent-child breadcrumb level.

Example:

/library/encyclopedia/science/physics/index.html

becomes:

Home > Library > Encyclopedia > Science > Physics

The Main

The <main></main> tags wrap body sections. This site uses H2 headings to start new sections using the <section> tag. CSS is used to create side margins for anything inside <main> tags. The "Main" section of pages begins right after breadcrumbs and ends righ before the footer. Breadcrumbs on this site are controlled by separate CSS to center it so it does not rely on from "Main" CSS for formatting. The Hero and Footer must exist outside <main> tags or they would become boxed in the margins set by CSS. This would stop them form bing 100% full width of screens and not aesthetically pleasing.

The Footer

The footer is the bottom banner of all pages that does things like list social media contacts and page upload and last updated links. Pages that are updated more often are fresher and tend to be better written and structured. Early pages that have not been updated in a while are ewither very basic or in due for an overhaul. Periodically pages are reviewed for maintenance. If they need kater upcoding the dates are unmodified until changes occur. If the pages do not need updating then the dates are given current time to say they are current up to that moment in time. Basic permenent pages hardly need updating so may carry older dates but still be as current as possible. Deep pages, especially those for prototype lessons carry older dates because updoing is still in progress.

Sub Domain Group and URL Location

The "Main Page" is the main home page for the entire site. It exists as maloneuniversity.org/index.html. As a HTML file named "index.html" servers will locate any file names "index.html" by simply typing the url up to the last subdomain. Example: For nested folders If structure is website.com/folder-1/folder-2/folder-3/index.html and each subfolder contains an index.html, typing the folder path minus the filename index.html is the same as as typing the full url. You do not have to type "index.html" as the server will automatically assume that is the file you are requesting and automatically route yourt broswer to it. Modern servers automatically route to index.html by default if no other HTML file is specified in the url.

If these files exist:

The they can be reached by typing the full url by including, or omitting, the filename index.html:

This means that servers treat website.com as website.com/index.html by default.

By subdomain we mean any folder in the url path that follows the domain. By top subdomain we mean any folder that is exactly one level below the domain. Navigation is based on the domain as the root starting point and all pages branching from that initial location.

Conceptually these subdomains exist as folders in a website project. The website maloneuniversity.org was created as a website project. Website projects begin as a single folder called the root folder. In this folder all files for the website go. We can call this root folder "root" or "project" or even name it after the website as "mgu website project". The name is not important but the location of files in it is. Once we have a root folder we make a home page for the entire site. We call this page the Main Page. For a static website this page is a HTML document, for other types of dynamic sites that are Vercel or Next.js based it would be something more scrict like a TSK or JSK file. However, those are advanced JavaScript formats more related to web applications rather than mostly static webpages like MGU.

A HTML document is a text document with the .html file extension. All PC files are text based to some extent. The main difference is what file extension is used and what text language it contain is. For a HTML document a file uses HTML as its text language and is opened with a web browser to interpret and render the HTML into finished webpages.

On the Main Page we put navigation menus and or other links so that people can navigate to other pages on the site. Almost all travel to pages within a site is by means of hyperlinks. Rarely would someone type the page url by hand into the address bar of the browser. These are the two main methods of website travel.

After creating the Main Page we have a project folder with one file named index.html in it. We create new folders with their own index.html files in them. These subfolders are called subdomains. We now have our project as:

Root folder:

Subfolders:

Files:

This touches on how website file pathways reflect folder/file hierarchy.