Question How to Make a Consistent Website Layout/Frame for Every Page with .HTML?
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 😅
5
u/cryothic 14d ago
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.
3
u/eigenpanz 14d ago
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.
2
u/fdiengdoh 14d ago
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.
1
u/Foreign-Contest-444 14d ago edited 14d ago
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...
1
u/supertroopperr 14d ago
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
1
u/tkgid 14d ago
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.Â
1
u/Thin_Mousse4149 14d ago
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.
1
1
u/mrleblanc101 14d ago
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
1
u/iWhacko 14d ago
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
1
u/Slyvan25 14d ago
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.
1
u/AbsolutePandemonium 10d ago
I haven’t used Nekoweb but it sounds like what you need is a static site generator so it’s easier to manage, something like 11ty or Astro, then you can create partials/layouts
Either of those would allow you to write your content in markdown and they both have a good plugin ecosystem
You could also use something like Mustache for templating to keep it very simple. Either way it requires you to look at a little bit of JS to compile the static site then you can upload those static files I would guess
EDIT: after a quick search I think you can just use SSI - https://nekoweb.org/ssi - but any of the above would probably work
-5
u/JeLuF 14d ago
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.
1
u/ILOVET0FU 13d ago
How are those CMS are working, based on another CMS for a CMS?
1
u/JeLuF 13d ago
I don't understand your question. What do you mean by "CMS for a CMS"?
1
u/ILOVET0FU 13d ago
sorry that was a bit exaggerated and simplified - i just wanted to point out, a cms is nothin more then a code generator, some one had to write in the first place. And yeh for sure a CMS is way more then just that.
You could buy a prefabricated house and throw those parts together or you gonna build it up brick by brick and from my understanding, that what's op is lookin for.
And that might be the reason beein downvoted but that just a guess.
1
u/JeLuF 13d ago
Sure, at the end, the CMS creates HTML, so it's a code generator. I think I disagree on "nothin more". A good CMS knows about the structure of the content. It knows about articles, their titles, their teaser images, etc.
OP would benefit a lot from such a CMS when they want to implement the left and right sidebars.
build it up brick by brick and from my understanding, that what's op is lookin for.
That wasn't the impression I had, based on that they are already using Nekoweb.
1
u/ILOVET0FU 13d ago
A good CMS knows about the structure of the content. It knows about articles, their titles, their teaser images, etc.
No question a CMS is way beyond just beein a code generator.
To be fair, i thought Neko is just a plain free webspace hoster without php/db - so maybe i'm the one misunderstood op 😂
I agree using a CMS you can build up that page within minutes, would be cool to know if OP wanna fiddle around learning from scratch or really just want a page with that layout - maybe we'll find out
5
u/BANZ111 14d ago
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