Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Web Design; Same Object on Multiple Pages?

I apologize of this question has been asked before. I tried searching around, but was unable to find a relevant answer (probably due to my relatively small "web-design vocabulary").

I've noticed that the majority of websites have at least one--if not more--standard "objects" (or whatever the actually name is for them) on almost all of their pages. For instance, Stack Overflow has the same logo and tabs (Questions, Tags, Users...) on every page. I'm assuming that there's a less painstaking way to set this up other than simply copying and pasting the same code over and over, especially when ease of modification becomes a factor. As far as I know, CSS can't do accomplish this level of style generalization, so I'm assuming a server-sided language like PHP is part of the equation.

I'm not really looking for a very specific answer. What language--or type or language--as well as a brief synopsis of at least one way to achieve some sort of "object pasting" will be sufficient.

like image 995
Jaclyn Brockschmidt Avatar asked Feb 10 '26 14:02

Jaclyn Brockschmidt


2 Answers

Like others said, this is a major reason why people go from HTML to something like PHP, at first just to split up parts of your page.

Yes, you can do exactly that. What I usually do (if I'm not using a framework) is create a folder in my directory like this:

inc/header.php
inc/footer.php
inc/menu.php
index.php

Then in index.php you'd need an include like:

<? include('inc/header.php'); ?>
<h2>Welcome to my site</h2>
<p>We're happy to have you</p>
<? include('inc/footer.php'); ?>

And in inc/header.php:

<!DOCTYPE html>
<html>
   <head>
       <title>My site</title>
   </head>
   <body>

And in inc/footer.php:

<div id="footer">
    <h2>Thanks for visiting</h2>
</div>
</body>
</html>

And so on for inc/menu.php

Then for other pages on your site, do the same includes for header, footer, and menu, and just write your page-specific content between the includes

like image 141
Keith Avatar answered Feb 13 '26 02:02

Keith


Just an alternative to PHP:

Use Javascript or jQuery.

$( "#footer" ).load( "includes/footer.html" );

Another alternative is to use SHTML, which is basically HTML with inserts.

like image 45
I wrestled a bear once. Avatar answered Feb 13 '26 02:02

I wrestled a bear once.



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!