image has default style applied

Example_Output/Index.html

@@ -21,6 +21,6 @@
       </button>
       <div class="collapse navbar-collapse" id="navbarToggler">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-<li class="nav-link"><a href="/Index.html" class="nav-link">Home</a></li><li class="nav-link"><a href="/cat-topics/anatomy.html" class="nav-link">Cat Anatomy</a></li><li class="nav-link"><a href="/cat-topics/behaviour.html" class="nav-link">Behaviour and Intelligence</a></li><li class="nav-link"><a href="/cat-topics/cat-care.html" class="nav-link">Caring for cats</a></li><li class="nav-link"><a href="/cat-topics/history.html" class="nav-link">History</a></li></ul></div></div>
-</nav><h1>The Cat Site</h1><p>Depending on what you've opened, this is either an markdown file that will be built into a website, or a webpage that came from markdown files. The internet seems to love cats, so this site about cats.</p><p>Please note that links and images will appear to not work if you're viewing this in GitHub or on your file system as links assume these files are on a webserver, where '/' points to the site root. When uploaded to a webserver, the html files will all work!</p><p><img src="/images/cat.jpg" alt="Picture of a cat. You'll just see this alt text if you're on your filesystem or github. The cat will appear when files are hosted." /></p><p>You can use the menu bar to see pages in this website, or jump straight to the page about cat <a href="/cat-topics/history.html">history</a>.</p><p>You can also take a look at the <a href="/sitemap.html">site map</a>. </p></div></main>
+<li class="nav-link"><a href="/cat-topics/anatomy.html" class="nav-link">Cat Anatomy</a></li><li class="nav-link"><a href="/cat-topics/behaviour.html" class="nav-link">Behaviour and Intelligence</a></li><li class="nav-link"><a href="/cat-topics/cat-care.html" class="nav-link">Caring for cats</a></li><li class="nav-link"><a href="/cat-topics/history.html" class="nav-link">History</a></li><li class="nav-link"><a href="/Index.html" class="nav-link">Home</a></li></ul></div></div>
+</nav><h1>The Cat Site</h1><p>Depending on what you've opened, this is either an markdown file that will be built into a website, or a webpage that came from markdown files. The internet seems to love cats, so this site about cats.</p><p>Please note that links and images will appear to not work if you're viewing this in GitHub or on your file system as links assume these files are on a webserver, where '/' points to the site root. When uploaded to a webserver, the html files will all work!</p><p><img src="/images/cat.jpg" alt="Picture of a cat. You'll just see this alt text if you're on your filesystem or github. The cat will appear when files are hosted." class="img-fluid" /></p><p>You can use the menu bar to see pages in this website, or jump straight to the page about cat <a href="/cat-topics/history.html">history</a>.</p><p>You can also take a look at the <a href="/sitemap.html">site map</a>. </p></div></main>
 </body></html>

Example_Output/cat-topics/anatomy.html

@@ -19,6 +19,6 @@
       </button>
       <div class="collapse navbar-collapse" id="navbarToggler">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-<li class="nav-link"><a href="/Index.html" class="nav-link">Home</a></li><li class="nav-link"><a href="/cat-topics/anatomy.html" class="nav-link">Cat Anatomy</a></li><li class="nav-link"><a href="/cat-topics/behaviour.html" class="nav-link">Behaviour and Intelligence</a></li><li class="nav-link"><a href="/cat-topics/cat-care.html" class="nav-link">Caring for cats</a></li><li class="nav-link"><a href="/cat-topics/history.html" class="nav-link">History</a></li></ul></div></div>
+<li class="nav-link"><a href="/cat-topics/anatomy.html" class="nav-link">Cat Anatomy</a></li><li class="nav-link"><a href="/cat-topics/behaviour.html" class="nav-link">Behaviour and Intelligence</a></li><li class="nav-link"><a href="/cat-topics/cat-care.html" class="nav-link">Caring for cats</a></li><li class="nav-link"><a href="/cat-topics/history.html" class="nav-link">History</a></li><li class="nav-link"><a href="/Index.html" class="nav-link">Home</a></li></ul></div></div>
 </nav><h1>Cat Anatomy</h1><p>You'll notice this page doesn't have a title as metadata. The title will default to 'cat anatomy' and can be linked to using the name cat_anatomy. </p><p>Here are some basic facts about the physical characteristics and anatomy of cats:</p><ol><li>Cats have a flexible spine and powerful legs, which allows them to run and jump quickly</li><li>Their sharp claws and retractable paws enable them to climb trees and catch prey</li><li>Cats have excellent senses, including keen vision, hearing, and sense of smell</li></ol><p>1. They have a unique ability to rotate their outer ear (the pinna) in the direction of a sound</p></div></main>
 </body></html>

Example_Output/cat-topics/behaviour.html

@@ -20,6 +20,6 @@
       </button>
       <div class="collapse navbar-collapse" id="navbarToggler">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-<li class="nav-link"><a href="/Index.html" class="nav-link">Home</a></li><li class="nav-link"><a href="/cat-topics/anatomy.html" class="nav-link">Cat Anatomy</a></li><li class="nav-link"><a href="/cat-topics/behaviour.html" class="nav-link">Behaviour and Intelligence</a></li><li class="nav-link"><a href="/cat-topics/cat-care.html" class="nav-link">Caring for cats</a></li><li class="nav-link"><a href="/cat-topics/history.html" class="nav-link">History</a></li></ul></div></div>
+<li class="nav-link"><a href="/cat-topics/anatomy.html" class="nav-link">Cat Anatomy</a></li><li class="nav-link"><a href="/cat-topics/behaviour.html" class="nav-link">Behaviour and Intelligence</a></li><li class="nav-link"><a href="/cat-topics/cat-care.html" class="nav-link">Caring for cats</a></li><li class="nav-link"><a href="/cat-topics/history.html" class="nav-link">History</a></li><li class="nav-link"><a href="/Index.html" class="nav-link">Home</a></li></ul></div></div>
 </nav><h1>The behavior and intelligence of cats</h1><p>The markdown for this file has a space in it. You'll notice how the HTML file does not, and links also do not (check the menu).</p><p>Some opinions by an AI chatbot about cats</p><ol><li>Cats are known for their independent and aloof nature, but they can also be affectionate with their owners</li><li>They are solitary hunters and use a combination of stealth and agility to catch their prey</li><li>Cats are intelligent animals and can be trained to perform various tasks and tricks</li><li>They are also known for their playfulness and will often play with toys, string, and other objects</li></ol></div></main>
 </body></html>

Example_Output/cat-topics/cat-care.html

@@ -22,6 +22,6 @@
       </button>
       <div class="collapse navbar-collapse" id="navbarToggler">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-<li class="nav-link"><a href="/Index.html" class="nav-link">Home</a></li><li class="nav-link"><a href="/cat-topics/anatomy.html" class="nav-link">Cat Anatomy</a></li><li class="nav-link"><a href="/cat-topics/behaviour.html" class="nav-link">Behaviour and Intelligence</a></li><li class="nav-link"><a href="/cat-topics/cat-care.html" class="nav-link">Caring for cats</a></li><li class="nav-link"><a href="/cat-topics/history.html" class="nav-link">History</a></li></ul></div></div>
-</nav><h1>The health and care of domestic cats</h1><h2>Markdown</h2><p>The markdown for this file contains a subheading. No problem. I've also added some extra metadata. You can take a look at that in the html source.</p><h2>Ok back to cat facts</h2><ol><li>Cats require regular veterinary checkups to ensure they are healthy and up-to-date on vaccinations</li><li>They also need a balanced diet of high-quality cat food, and plenty of fresh water</li><li>Regular grooming, including brushing their fur and clipping their nails, is also important for their health and well-being</li><li>Cats should be kept indoors to protect them from dangers such as traffic, other animals, and diseases</li></ol><p><img src="/images/cat.jpg" alt="Oh, a cat again. Notice that we can just use the filename even though the file is not in this directory. That's because all images end up in a flattened directory. You'll just see this alt text if you're on your filesystem or github. The cat will appear when files are hosted." /></p></div></main>
+<li class="nav-link"><a href="/cat-topics/anatomy.html" class="nav-link">Cat Anatomy</a></li><li class="nav-link"><a href="/cat-topics/behaviour.html" class="nav-link">Behaviour and Intelligence</a></li><li class="nav-link"><a href="/cat-topics/cat-care.html" class="nav-link">Caring for cats</a></li><li class="nav-link"><a href="/cat-topics/history.html" class="nav-link">History</a></li><li class="nav-link"><a href="/Index.html" class="nav-link">Home</a></li></ul></div></div>
+</nav><h1>The health and care of domestic cats</h1><h2>Markdown</h2><p>The markdown for this file contains a subheading. No problem. I've also added some extra metadata. You can take a look at that in the html source.</p><h2>Ok back to cat facts</h2><ol><li>Cats require regular veterinary checkups to ensure they are healthy and up-to-date on vaccinations</li><li>They also need a balanced diet of high-quality cat food, and plenty of fresh water</li><li>Regular grooming, including brushing their fur and clipping their nails, is also important for their health and well-being</li><li>Cats should be kept indoors to protect them from dangers such as traffic, other animals, and diseases</li></ol><p><img src="/images/cat.jpg" alt="Oh, a cat again. Notice that we can just use the filename even though the file is not in this directory. That's because all images end up in a flattened directory. You'll just see this alt text if you're on your filesystem or github. The cat will appear when files are hosted." class="img-fluid" /></p></div></main>
 </body></html>

Example_Output/cat-topics/history.html

@@ -20,6 +20,6 @@
       </button>
       <div class="collapse navbar-collapse" id="navbarToggler">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-<li class="nav-link"><a href="/Index.html" class="nav-link">Home</a></li><li class="nav-link"><a href="/cat-topics/anatomy.html" class="nav-link">Cat Anatomy</a></li><li class="nav-link"><a href="/cat-topics/behaviour.html" class="nav-link">Behaviour and Intelligence</a></li><li class="nav-link"><a href="/cat-topics/cat-care.html" class="nav-link">Caring for cats</a></li><li class="nav-link"><a href="/cat-topics/history.html" class="nav-link">History</a></li></ul></div></div>
+<li class="nav-link"><a href="/cat-topics/anatomy.html" class="nav-link">Cat Anatomy</a></li><li class="nav-link"><a href="/cat-topics/behaviour.html" class="nav-link">Behaviour and Intelligence</a></li><li class="nav-link"><a href="/cat-topics/cat-care.html" class="nav-link">Caring for cats</a></li><li class="nav-link"><a href="/cat-topics/history.html" class="nav-link">History</a></li><li class="nav-link"><a href="/Index.html" class="nav-link">Home</a></li></ul></div></div>
 </nav><h1>The history and origins of domestic cats:</h1><p>Here are some facts about cats, according to an AI chat bot.</p><ol><li>Cats are thought to have been domesticated about 9,500 years ago in the Near East</li></ol><p>1. Domestic cats are descended from the African wildcat (Felis silvestris lybica)</p><ol><li>Cats were first kept as pets by the ancient Egyptians, who worshiped them as gods</li><li>The ancient Romans also kept cats as pets, and they were introduced to Europe through Roman conquests</li></ol><p>If you found that interesting, you can read about cats' <a href="/cat-topics/anatomy.html">anatomy</a>.</p></div></main>
 </body></html>

Example_Output/sitemap.html

@@ -6,5 +6,5 @@
 </head>
 <body>
 <main id="content" class="bd-content order-1 py-5"><div class="container-xxl bd-gutter">
-<ul><li><a href="/Index.html">Home</a></li><li>cat-topics<ul><li><a href="/cat-topics/anatomy.html">Cat Anatomy</a></li><li><a href="/cat-topics/behaviour.html">Behaviour and Intelligence</a></li><li><a href="/cat-topics/cat-care.html">Caring for cats</a></li><li><a href="/cat-topics/history.html">History</a></li></ul></li></ul></div></main>
+<ul><li>cat-topics<ul><li><a href="/cat-topics/anatomy.html">Cat Anatomy</a></li><li><a href="/cat-topics/behaviour.html">Behaviour and Intelligence</a></li><li><a href="/cat-topics/cat-care.html">Caring for cats</a></li><li><a href="/cat-topics/history.html">History</a></li></ul></li><li><a href="/Index.html">Home</a></li></ul></div></main>
 </body></html>

Example_Output/sitemap.xml

@@ -1 +1 @@
-<urlset><url><loc>https://example.com/Index.html</loc><lastmod>2022-12-12</lastmod><priority>1</priority><changefreq>monthly</changefreq></url><url><loc>https://example.com/cat-topics/anatomy.html</loc><lastmod>2022-12-12</lastmod><priority>1</priority><changefreq>monthly</changefreq></url><url><loc>https://example.com/cat-topics/behaviour.html</loc><lastmod>2022-12-12</lastmod><priority>1</priority><changefreq>monthly</changefreq></url><url><loc>https://example.com/cat-topics/cat-care.html</loc><lastmod>2022-12-12</lastmod><priority>1</priority><changefreq>monthly</changefreq></url><url><loc>https://example.com/cat-topics/history.html</loc><lastmod>2022-12-12</lastmod><priority>1</priority><changefreq>monthly</changefreq></url></urlset>
+<urlset><url><loc>https://example.com/cat-topics/anatomy.html</loc><lastmod>2022-12-12</lastmod><priority>1</priority><changefreq>monthly</changefreq></url><url><loc>https://example.com/cat-topics/behaviour.html</loc><lastmod>2022-12-12</lastmod><priority>1</priority><changefreq>monthly</changefreq></url><url><loc>https://example.com/cat-topics/cat-care.html</loc><lastmod>2022-12-12</lastmod><priority>1</priority><changefreq>monthly</changefreq></url><url><loc>https://example.com/cat-topics/history.html</loc><lastmod>2022-12-12</lastmod><priority>1</priority><changefreq>monthly</changefreq></url><url><loc>https://example.com/Index.html</loc><lastmod>2022-12-12</lastmod><priority>1</priority><changefreq>monthly</changefreq></url></urlset>

MarkdownToSiteGenerator/HTML/Image.cs

@@ -12,6 +12,7 @@ public Image(string href, string altText)
       {
          HRef= href;
          AltText = altText;
+         this.CSSClass = "img-fluid";
       }
    }
 }