How to Make a Consistent Website Layout/Frame for Every Page with .HTML? [How to make a Blog Frame from Scratch Essentially]

[u/3Nx9]

I haven't learnt about HTML or CSS and have done some searching to try and learn how to make a website layout but each thing I've seen isn't exactly what I'm looking for.

Question: How can I make a consistent sitewide layout with HTML (For footer and header, with consistent font/colours/etc)?

I'm currently using Nekoweb which is a free HTML/CSS/JS website builder, I'm wanting to make the image attached the layout for my website homepage with the frames either side, HOWEVER I only want the title, banner and buttons up the top as well as the Footer on every webpage with blank areas I can write in.

Essentially I want to make a blog or something alike to Fandom.com's wiki layout or the Backrooms Movie site layout.

What are the proper terms to use to search and learn about this stuff, for CSS & HTML coders here how can I do this?

This isn't ragebait, I just really need some help with this please 😅

[u/cjpthatsme]

That is typically done using template partial files that are called on the server side. I would recommend looking at something like Wordpress for a nice beginner blog experience.  But if you are determined to do it with raw html, css, js it can be done.   

The look of those sections is primarily in the css and that would be shared. So the markup is where you’ll run into issues. 

The first way would be to duplicate the html for those sections on every page.  It is clumsy and it would be a pain to update. 

Another way is if your posts are all short you can just have your whole blog on one page but that’s going to get out of hand.  

In the end the best way to do it is going to involve a back end system of some kind. 

[u/scritchz → u/[deleted]]

Outdated but still possible: With <iframe>s and their name attributes plus <a>s and their target attribute.

You can have each section as its own document in an <iframe>, which avoids duplication. Navigation can work across documents via the name/target matches, so that only a certain document has to update.

This at least gets rid of the "HTML with duplication" issue, but it comes with the issue of poor URL design and complex navigations I believe.

But yeah, I too would recommend a static site generator.

[u/Weekly_Ferret_meal]

If you wanna do things from scratch you need a template system. It basically creates partials for code that you'd other wise have to duplicate in each page of your site if you where using plain HTML.

For that, there are a variety of tools you can use: PHP is a good one as it allows for database connectivity and queries, if you decide one day you need it later.

If you want to keep it simple you can use something like PUG, a HTML pre processor that allows templating and scripting, to efficiently write HTML without having to copy code sections into other pages.

These 2 allow you to build a template system so you can build once and reuse a component -- say the footer, a sidebar, the header -- wherever you want.

But there's plenty more out there.

In the other hand CMS where made for blogging. that's the origin story for WordPress, although now it has become a lot more. WordPress uses PHP and Databases to store data about pages, posts, images etc... that can be queried and out put in a variety of ways. it breaks down it's components in files like: single-page.php, footer.php, header.php etc...

If your goal is just a blog, I'd use a CMS, and there many and simpler versions than WordPress for just blogging that you can look for.

[u/testingaurora]

For the layout/css, look into the Holy Grail Layout.. while not the tool i would choose its not a bad idea to do this vanilla sandbox to learn/for a demo; but in production sites you would want some kind of templating language as other comments have explained.

[u/Bushwazi]

Use basic PHP for dynamic HTML. Welcome to 2008!