Considering the two page designs are very similar, is there a way to reuse html snippets between the two pages, or some other method to avoid html code duplication?
You could look at php include for php pages or I like to use css.min.js for html pages - (I cant remember who developed it I will try and find out - but it is free to use)
I use the code like this to include a menu of html links:-
<html>
<head>
<script src="csi.min.js"></script>
</head>
<body>
Testing Javascript
<br>
<div data-include="checkout_01.html"></div>
</body>
</html>
checkout_01 is the html file i want to include - normally I would put the html to include in a 'include' folder and reference it with
<div data-include="include/checkout_01.html"></div>
Then if I want to amend the menu of links i just change the one file and it changes on all pages
... found the link - https://github.com/LexmarkWeb/csi.js - obviously you can use csi.min.js or csi.js provided you download the one you want to use
Related
This question already has answers here:
Multiple <head> and <body> tag
(3 answers)
Closed 7 years ago.
Now a days I am designing a website in php and I want to add more than 5 pages which should have same styles for ex- All the pages should have same header, footer, left side bar, right sidebar etc.
I know that I can do this using include() method but I am unable to use it effectively.
I have created some pages like below.
header.php-
<html><body><div><img src="logo.png"/></div></body></html>
leftsidebar.php
<html><body><div>Categories<ul><li>business</li><li>management</li><ul>div></body></html>
index.php- this is the main file where I wan to include files.
<html>
<body>
<div class="top">
<?php include("header.php"):
?>
</div>
<div class ="leftsidebar">
<?php include("leftsidebar.php"):
?>
</div>
</body>
</html>
the problem is that layout is not proper. I dont know where I have to use width and height style proprties for div whether I should use div width in index.php or header.php. And one problem is when I view the source code I can see some duplicate elements like html,head,body etc.
I would appreciate if somebody know how to use this effectively.
Looking forward to your answers.
First point:
you are including php files that contain html and body tags that are also present in the page where you are including them... keep them only in the initial page where you put the includables.
header.php should be:
<div><img src="logo.png"/></div>
leftsidebar.php should be:
<div>Categories<ul><li>business</li><li>management</li></ul></div>
Second point:
to have styles across the different pages you should use css external stylesheets and not inline styles. Have a look here
Your include files should not re-open the <html> and <body> tags! Wherever you use the <?php include 'something.php' ?>, imagine what's contained in that included file sitting directly in your code -- because that's all that's happening when you include via PHP.
Additionally, a PHP statement should end with a semi-colon (;), not a colon (:), like this:
<?php include("header.php"); ?>
As the title says, is there a way to edit a portion of an entire site with one code or page? For example, if the bottom of every page of a site said "2014", is there a way in html or css to change every page of the site to say "2015" without having to do so manually to each individual page?
I understand this can be done in php, and I understand that a server can be configured for html to read php code. Are there any flaws to this method (perhaps the html page will load slower if it's configured to read php)? Are there any other ways to do this besides using php code?
Performance Concern:
You will not see any performance difference between having PHP render basic HTML and typing the HTML yourself.
The performance impact is only noticeable on HUGE PHP applications. And even then, it's still very fast.
What you ask is common practice. This is an example of what you can do.
Make a file called index.php and put this inside:
<!doctype html>
<html>
<head>
<!--Your head stuff-->
</head>
<body>
<header><?php require_once 'header.html' ?></header>
<section class="main_content"><h2>My Page!</h2></section>
<footer><?php require_once 'footer.html' ?></footer>
</body>
</html>
Make a file called header.html and put this inside:
<h2>This is my header</h2>
Make a file called footer.html and put this inside:
<h2>This is my footer</h2>
As you can see, the practice is to use any of the built-in PHP functions to include other files in your PHP file:
include 'some_file.php';
require 'some_file.php';
require_once 'some_file.php';
I think Dreamweaver can do this, with its find and replace entire website property
Assuming all pages have a CSS file in common, you can use the content CSS property of a pseudo element like before or after to control content across all pages.
For example:
#footer:before {content:'2015';}
<div id="footer"></div>
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 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
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.
An easy way to do this is to create separate files for different sections of your page then instead of pasting the same code on each page use
include ('yourfilename.php');
to add the code in yourfilename.php at that point in the php file. This also makes it easy to modify that section and have your changes be reflected on all the pages that use yourfilename.php
For example, you can make one file called page_top.php and another called page_bottom.php. Then on each of your various php pages you can include('page_top.php'); near the top and include('page_bottom.php'); near the bottom. The code within these files will then be executed on each of your content pages.
There are of course other methods but this is a super easy way and you should look into this first.
An example of include 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>
To use would be 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");
HTML imports or Webcomponents is a new way to do this completely at client side using HTML, JS and CSS. Write a component and reuse it in every page. But it uses ShadowDom, means not search indexable yet.
<link rel="import" href="header-banner.html">
<!-- use this in body -->
<header-banner></header-banner>
You have two solutions
Use include('....php') or require('....php') or include_once('....php') or require_once('....php') php functions to add external sections/modules into your web page(php).
You can call this functions at the position where you want the extremal module/part to be appeared.
include("Header.php"); // call to external module
// your body goes here
<h1>.......</h1>
<p>........</p>
.....................
include("Footer.php"); // again to another module
Or its better if you can go for a MVC framework where you can combine multiple modules and views into one output page...(ex Codeignitor/Cakephp...)
I am making a CMS software, and I need php to generate some pages, I would like for most of the content on the pages to be the same, so I was wondering was it possible to link the body tag to a default html page. For example to have a html page with <body> <h1> Hello </h1> </body> and for all the pages that php generate to have that content. I did some searching and found only one question like this but it did not have a very detailed answer, and I tried creating a html page(for example called page.html) with something like <body> <h1> Hello </h1> </body> and make php generate a body using <body src="page.html"></body but with no luck.
Thanks in advanced
Remember you can include files in PHP, so you can include and push html files piece by piece.
For example,
header.html :
<html><body><h1>hello</h1>
footer.html
</body></html>
In your PHP, you can do something like this :
include header.html
include UNIQUE_PAGE_CONTENT_HERE
include footer.html
Many MVC frameworks allow you to do this very easily
Let's try to explain the title of my question to be the more concise I can: I'm basically designing a static HTML website from scratch. Nothing to worry about here.
The point is that I'm trying to include some links that will retrieve some items (a product inventory) from a database (and therefore the site won't be so 'static' anymore), as there're > 300 products and creating an html for each one is not feasible.
After googling and reading several sites for days, the "easiest" solution I came up with is to use PHP and MySQL. Again, nothing to worry about. Just took my time for reading documentation and move along.
My question is more related about the correct workflow for integrating both worlds. Let's see my idea in code:
This is one schematic example of the page where you can browse some products (e.g: product.html):
<html>
<head>
<title>My Site - These are our products</title>
</head>
<body>
<!--Site goes here-->
Search by name
Search by color
<!--rest of site goes here-->
</body>
</html>
Where the links
product_search_by_name.php
product_search_by_color.php
are actually a modified clone of the same page (product.html). This is, keeping same html code, plus the .php code embedded into it, as I want to have the DB results displayed into a div on that same page, keeping exactly same layout.
So, am I doing this right if I want to maintain the appearance of the whole website? I'm absolutely wrong from the base and should start again? Should I give up and work selling frappuchinos on a Star*ucks?
As a sample of the idea I want to achieve is the following: http://www.w3schools.com/tags/default.asp (when you click on the left menu bar, the center zone updates with the content). By the way, are they using AJAX on that website to update just the center zone, or I'm misunderstanding what is AJAX for?
I'm sure I'm missing something but I'm too confused to separate the sheep from the goats, so I'd thank a lot any tips you can give to me (and additional documentation on the internets to read as well).
There are two main ways to merge or migrate from static HTML to dynamic HTML (PHP, PERL, whatever).
(1) One is to have most of the contest as HTML, and the stuff like inventory as dynamic.
<html>
<head>
<title>My Site - These are our products</title>
</head>
<body>
<h1>My Site - These are our products</h1>
<?php
// php code to retrieve links
?>
</body>
</html>
(2) To have a full PHP site.
<?php
echo "<html>" . "\n";
echo "<head>";
echo "My Site - These are our products"
echo "</head>";
echo "<body>" . "\n";
// php code to retrieve links
echo "</body>" . "\n";
echo "</html>" . "\n";
?>
Many developers start by merging both HTML & PHP.
I suggest to learn how to do a very simple but full php site, connect to a database, retrieve some records with a S.Q.L. query, display them as read-only text or links, and later you may change to the other HTML plus PHP way of doing things.
There are several editors and tools to help develop in PHP, specially by looking for a PHP function, or just highlight HTML tags. Scintilla (Linux) or Notepad++ in windowze, its a very simple yet useful tool.
Cheers.
Well, if you want it to make it using Ajax ...
You might want to do the following.
Create the two files as you said, those are not to be included in the HTML file.
Create a JavaScript function to call the files, You can use jQuery api, to link to php. http://api.jquery.com/jQuery.post/ or http://api.jquery.com/jQuery.get/
Link the click of the button inquired to call the JavaScript function, and add html you get from php to the tag you want.
You can create a index.php page and put down your html code in it. It looks like this
<html>
<body>
<!--- links goes here -->
Search Products
</body>
</html>
If you are retrieving products from a database and if you want to create multiple links for the products create a function in your function.php which pulls all the product name from the database. Now add this function into your index.php
index.php
<?php include ('functions.php')?>
<html>
<body>
<h3>Product List</h3>
product name
</body>
</html>
Always embed html in php file. Do not embed php in html file. File should have .php extension.