Web design; Same object across multiple pages?
I apologize to this question. I tried searching, but couldn't find a relevant answer (possibly due to my relatively small "web design vocabulary").
I've noticed that most websites have at least one, if not more, standard "object" (or whatever they actually do) on almost all of their pages. For example, Stack Overflow has the same logo and tabs (questions, tags, users ...) on every page. I guess there is a less painstaking way to set this up, rather than just copy and paste the same code over and over again, especially when ease of modification becomes a factor. As far as I know, CSS cannot accomplish this level of styling generalization, so my guess is server side like PHP is part of the equation.
I'm really not really looking for an answer. What language, or type, or language, as well as a brief description of at least one way to achieve any "object nesting" will suffice.
source to share
Like others have suggested, this is the main reason people go from HTML to something like PHP, at first they just split parts of your page.
Yes, you can do just that. What I usually do (if I'm not using a framework) is creating a folder in my directory like this:
inc/header.php inc/footer.php inc/menu.php index.php
Then index.php
you need to include include:
<? 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 the header, footer and menu, and just write your content for the page in between the included
source to share
An easy way to do this is to create separate files for different sections of your page, and instead of pasting the same code on each page, use
include ('yourfilename.php');
to add code to yourfilename.php file at this point in your php file. It also makes it easier to edit this section and reflect your changes across all pages that use yourfilename.php file
For example, you can create one file named page_top.php and another named page_bottom.php. Then on each of your different php pages, you can include ('page_top.php'); next to the top and include ('page_bottom.php'); next to the bottom. Then, the code in those files will be executed on each of your content pages.
There are, of course, other methods, but this is a very simple way and you should learn it first.
An example of inclusion would be:
header.php
<!DOCTYPE html>
<html>
<head>
<stuff><stuff>
</head>
<body>
<div id="mybanner">Design and logo that is common on all pages</div>
content /contact.php
<div id="bulk_of_the_html">
The rest of your stuff goes here
</div>
foot.php
<div id="footer_common_to_all">This is your footer content that is common to all pages</div>
</body>
</html>
It will use something like:
contact.php
// This is your common to all pages header
include("header.php");
// This can be changed up as content switches
include("content/contact.php");
// This is your common to all pages footer
include("foot.php");
source to share
Importing HTML or Webcomponents is a new way to do it entirely client-side using HTML, JS and CSS. Write a component and reuse it on every page. But it uses ShadowDom , which means the search is not indexed yet.
<link rel="import" href="header-banner.html">
<!-- use this in body -->
<header-banner></header-banner>
source to share
You have two solutions
-
Use include ('.... php') or require ('.... php') or include_once ('.... php') or require_once ('.... php'). php to add external sections / modules to your web page (php). You can call these functions wherever you want the extreme module / part to appear.
include("Header.php"); // call to external module // your body goes here <h1>.......</h1> <p>........</p> ..................... include("Footer.php"); // again to another module
-
Or better if you can go for an MVC framework where you can combine multiple modules and views into one output page ... (ex Codeignitor / Cakephp ...)
source to share