Home Entrance Wiki Search Login Register

Welcome, Guest. Please login or register.
June 10, 2023, 12:36:13 am - @983.48
Forum activity rating: Three Star Posts: 44/24hrs Unread Topics | Unread Replies | Own Posts | Own Topics | Recent Posts
News: :ha: :pc: Hello Melonland! :pc: :happy:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ Help & Tutorials
| | | |-+  Is there a way to import a <div> element from one .html file into another?

« previous next »
Pages: [1] Print
Author Topic: Is there a way to import a <div> element from one .html file into another?  (Read 321 times)
Full Member ⚓︎

View Profile WWW

Pocket Icelogist!Coziest Café Award 2023Café ClubJoined 2022!
« on: January 05, 2023, 03:33:56 pm »

Sorry if this has been asked before, but I don't even know if or what the term for this would be! I did try searching in Google and the forum to no avail.

Basically, I've realized that it's a pain in the butt to edit a <div> element (like my scrolling menu) then having to copy and paste that element into every single webpage. Is there a standard method for separating that <div> element, or even the <header> and <footer>, into separate .html files, then linking them back into the layout, so that I can just the content of that element in one location and it will update all across the site?

Full Member ⚓︎

Itch.io: My Games

View Profile WWW

Pocket Icelogist!Joined 2022!
« Reply #1 on: January 05, 2023, 05:51:47 pm »

There are a few standard ways to do this that aren't built directly into HTML. The first way is to use iframes:

Basically you have an outer page, and then load the inner webpages in the inside frame, so that the outside stays the same. That way you can use the same code for the menu and load everything else separately. Cons: is not always completely accessible, and makes it difficult for people to link to inner pages on your site.

You can also use javascript to inject your menu via HTML at load time. The drawback here is that your site won't be navigable to anyone with JS turned off. Folks used to mitigate this by putting "breadcrumb" links at the bottom of the page, but then you're back to updating them on every page again every time your menu updates.
The example I have here shows how to do this using jQuery:

You can use server-side languages like ASP and PHP to dump smaller files into each page before it's rendered and sent to the browser, but your hosting service has to support this. Neocities currently doesn't, but if you have access to more hosting services this is my favorite way of doing it (and the one I use on my site). It involves a little more know-how, but is more accessible and compatible with all browsers (since the code is executed on the server before anything gets sent over the internet).

You can also use a type of software called a "Static Site Builder" that will let you edit your page in a different environment, and then builds the HTML pages for you to upload to your host later. The drawback here is that you usually have to learn the Markdown langauge used in the software, but once you do it's smooth sailing from there. There are many to choose from.

@Melooon, this might be a good thing to add to your Wiki. This sort of question comes up naturally once you start building out a website that is larger than one page, and because most free and small webhosts don't offer server-side scripting, it's something a lot of newer web developers end up looking into. What do you think?

Hero Member ⚓︎

Your friendly neighborhood directory

StatusCafe: sprinkles

View Profile WWW

spring 2023!Pocket Icelogist!666 Posts >:DJoined 2022!
« Reply #2 on: January 05, 2023, 05:52:12 pm »

In standard HTML, this is not possible.

However, if you want to venture into controversial territories, use iframes, which is exactly what you want:

However, on the original old web, this was very controversial, as frames took forever to load, only worked in a few browsers, weren't indexed by search engines, and generally were seen as a distortion and commercialization of the web:

Especially because navigating through frames doesn't change the URL, so knowing which specific site you are on just by looking at the address isn't possible, breaking the user view, bookmarking, and linking.

There were even blinkies/badges to put on your website:

Full Member ⚓︎

View Profile WWW

Pocket Icelogist!Coziest Café Award 2023Café ClubJoined 2022!
« Reply #3 on: January 05, 2023, 07:05:05 pm »

@frugalgamer @/home/user/

Thank you guys! I'll just stick with editing each page manually, then :smile:. This gives me another reason to start working on another project - Onio Town XD Instead of having to go through each page on the site to edit the menu manually, I'll break Onio Cafe down into smaller sites or "buildings" within Onio Town. Onio Cafe ~ the chat. Onio Times ~ the blog and articles. Onio Gallery ~ creative works.

Btw, that little bit of history about iframes is pretty fun. I feel like I almost remember that anti-iframe sentiment!

Casual Poster ⚓︎

🖕💩 👽👎💩🖕 👽💯➡️💩

iMood: worldwidewar

View Profile WWW

Joined 2022!
« Reply #4 on: January 14, 2023, 05:20:06 pm »

I don't know how late it is to reply here, but I would suggest using a static site generator if you commonly copy and paste elements from one html document to another. Static site generators basically just automate that process for you, but it might not be too necessary depending on how minimalist your site is. Another method I've seen a few others do that I haven't done myself is using Javascript as a substitute for PHP.

/ After your lover has gone you will \
\ still have PEANUT BUTTER!          /
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||--WWW |
                ||     ||
Pages: [1] Print 
« previous next »

Vaguely similar topics! (3)

Case Study - Design elements and hits, should we care?

Started by MelooonBoard ✁ ∙ Web Crafting

Replies: 3
Views: 1085
Last post April 22, 2022, 02:59:03 am
by Icelogist
I found an intresting X-Files Fansite

Started by easy_breezyBoard ☆ ∙ Showcase & Links

Replies: 5
Views: 957
Last post July 10, 2022, 11:30:57 am
by myry
HTML Journal and the Neon Kiosk

Started by m15oBoard ✑ ∙ Writers Corner

Replies: 12
Views: 2086
Last post April 24, 2023, 08:36:11 pm
by shevek

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP2

MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery!