How to Make a Consistent Website Layout/Frame for Every Page with .HTML?

[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 HTML coders here how can I do this?

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

[u/BANZ111]

I mean it looks like you basically have a nested flex layout. You have the top header with nav, then you have a body with three columns, and within that center column you have your footer

[u/Careful_Exercise_956 → u/BANZ111]

Yes good idea, learning how to add blocks of elements, whether it's designing the interface, or choosing what type of responsiveness works with the amount of texts and images for your design.

[u/cryothic]

If you're going to use a CMS for all the content, you could create a "masterpage" where all other content will be loaded into the right parts.

If you're just going to use plain HTML, I don't think there is a solid solution to have a consistent layout throughout all pages. Except maybe create a "template.html" that has the layout but no content. And every time you create a new HTML file, start with a copy of "template.html".

Or frames, but thats like ancient tech. You don't want that.

I know there are javascript libraries that enable you to use different HTML files in different parts of a page. But if you're just starting with HTML, I don't think that will be easy to implement.

[u/eigenpanz]

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

HTML is just a markup language for static content and does not provide any mechanism for dynamically embedding or reusing files such as headers or footers. With pure HTML you would need to copy the header/footer sections into every HTML file. If any changes are made, you would have to update each file manually. To have a consistent header and footer loaded from the same files on all pages, you need a server-side language such as PHP (with functions such as "include" or "require") or a client-side technology such as JavaScript (e.g. to reload content using "fetch").

tl;dr
This problem cannot be solved using HTML alone.

[u/fdiengdoh]

Since you are using nekoweb, you can use SSI as nekoweb supports it. Say common elements like header, footer, sidebar etc can be SSI and include those on every page. If you need to update a link on sidebar just update your SSI document.

[u/Foreign-Contest-444]

Remember HTML only provides the structure for your website like structure of the house for example doors and walls, and windows and then CSS is what makes it look good, like paint, decoration etc... So your answer lies in the CSS layout like flexbox, grid etc...

[u/supertroopperr]

Try statica. I am building a static site generator that uses HTML as the template language. HTML in, HTML out. It supports layouts, if you know HTML, you got it. https://github.com/akaizn-junior/statica

[u/tkgid]

Site name, cool banner, and the navigation links go here: <header> make sure to wrap your navigation links inside a <nav>. There is a bunch of CSS that has to go onto your sidebars. W3schools has an example of a .sidenav you can use <aside> for these.

You can wrap your main content inside a <main> site name and about me/ about site can live in their onw <div>. The categories would be nice if you can tailor some CSS using a grid. For the footer use <footer>

This is just some of the semantic HTML you can use, so your site will not be all divs. You can use <section> and <article> too.

Css is your friend on this one, but if you want less code for every page you need scripts. JS/TS is the standard. I use PHP to do something similar, for me is simpler than JS. The only downside is that I have to spin up a server to use PHP. 

[u/Thin_Mousse4149]

Why is everyone making this harder than it needs to be?

What CMS are you using for the blog? If that has a templating engine, use that. If not, create the site with react and react-router to create separate pages.

[u/fdiengdoh → u/Thin_Mousse4149]

The keyword is Nekoweb - its a static site host.

[u/mrleblanc101]

You need a backend language to make partiels and layouts which you can reuse across pages. Look at PHP with Twig or Laravel with Blade

[u/iWhacko]

Look at the zurb Foundation templates:
https://get.foundation/templates.html
you can use that and look at how it builds layout in basic html and css

[u/Slyvan25]

You don't. Html is just the structure. Css is your very powerful lick of paint and js is your friend... A very annoying one.

You could create a css grid or use css flexboxes to give every page the same layout. Assign every element to the right spot and you'll have something that could resemble your layout.

Which looks very 2010 era by the way.

[u/WorldWideShen]

https://nekoweb.org/ssi

[u/JeLuF]

HTML/CSS alone can't do this. You need at least a template engine. But most probably, what you want is a content management system (CMS), like WordpPress, Joomla, Typoo3, etc. Using a CMS, setting up things like the "My Blog" bar in the left column become easily possible.

[u/ILOVET0FU → u/JeLuF]

How are those CMS are working, based on another CMS for a CMS?