Single HTML multiple pages

Question

Hey guys.
Please how do you contain multiple web pages in one html file.
I mean, like having a contact page, home page and other pages without having to have a separate .html file and referencing it for each link. Guys do it a lot on sololearn app.

How is that achieved. I hope someone understands my question.

Answer 1

A single page application (SPA) uses Javascript to manipulate the DOM to dynamically render the content based on client side route handlers.

A few popular SPA frameworks / libraries that help simplify this are (in no particular order):
- Angular
- VueJS
- ReactJS + React Router

The single index.html file is simply used to load / bootstrap all the Javascript and CSS files and to declare the root HTML tag to be managed by the SPA.

Dynamic data is loaded via AJAX / fetch calls and the JSON is used to be updated in the DOM.

Hopefully, this explanation makes sense.

Answer 2

One thing to consider about HTML and CSS is these are instructions that initialize the DOM which will render in the browser as-is by default.

Javascript is the imperative language that will manipulate the DOM after it's been initialized by HTML and CSS.

Again... the browser renders based on the loaded DOM.

The DOM is initialized based on HTML and CSS.

Javascript code can interface with the DOM API to manipulate the loaded DOM which is then rendered to the browser.

Keep these fundamental details in the back of your mind as you try to rationalize new concepts as you're learning them.

Answer 3

Gouse Basha Great question...

A very common approach is to use ASP.NET Core for the RESTful API and SPA via static files for the frontend web client.

I've not personally started a new greenfield project using ASP.NET MVC since 2013 when ReactJS was first released. This seems to be the direction trending in enterprise dev over the years among those in my professional network as well.

Answer 4

Victor Mokut I'm glad this was helpful.

Unfortunately, I'm not the best person to refer tutorials or sources. I typically learn by reviewing the online documentation and source code where possible. Even then, it's usually for quick reference as I attempt to rapidly prototype apps with new frameworks.

After doing this for as long as I have, the patterns, concepts, and deep understanding are intuitive as these are just next step refinements for me.

Answer 5

It is still a single page and not multiple pages.

Answer 6

JS frameworks can also be used to develop single page web apps.

Answer 7

David Carroll Sir, How can I integrate Asp.net Core with React
It has options for Single Page Application only, And it might be Large Scale Application, so How to Integrate large scale Applications without Using Single Page Application option?
Is it possible to Use Single page Applet for large scale Applications?

Answer 8

Rahul I think you misunderstood the question. The question is seeking to understand how to achieve rendering different content using different URLs from a single HTML page in the entire website.

iFrames essentially embeds a separate browsing context within the parent page.

These are very different concepts.

Answer 9

David Carroll thank you so much for your time. I am a beginner web developer and thought that could be achieved with only HTML, CSS & JS. But i'm better guided now. I'm yet to starting learning those libraries mention in your reply, but when I do i'll be on a lookout for this.

Please do you have any tutorial links that illustrates this concept? Kindly share.

Answer 10

Use iframes

Answer 11

You can simply do that with PHP include or require and $_GET[] function