CODEWITHSUNDEEP
htmlcss
user2490003
user2490003

Reputation: 11920

Creating static HTML pages without repeating HTML across files

I'm building a simple personal static webpage. It'll be 4-5 pages (maybe more later) that all share a nav bar and header design at the top of the page.

I don't want to repeat the HTML and CSS for the navbar/header at the top of every page - ideally I'd like it all in one place.

If I were creating this using a web framework like Django, Sinatra, Rails, etc... I could use templates and partials to build the page using shared components like the navbar/header.

But I'm trying to keep things as simple as possible since it's a small set of static pages.

  1. Is there a way to keep all the HTML in one file and reference it from the other files?

  2. If not, is there a simple tool that will let me leverage the functionality that partials and templates provide, and just "compile" the final product into a series of HTML pages?

Thanks!

Upvotes: 1

Views: 545

Answers (1)

denny
denny

Reputation: 197

  1. Use a one main Html file with all navigation bars, footer, menu and etc.
  2. Keep a blank place, for example a blank div in the main page.
  3. Keep other html pages in a separate place.
  4. Load the contents dynamically to the blank div in the main page using javascripts.

Upvotes: 3

Related Questions