how do i style the html contents inside a php include file, using css?
For example, I have a basic webpage like this (note, the code is fly-by one.. not the actual code..just wanted to illustrate the scenario) -
<html>
<head>
<title><title>
<link rel="stylesheet" href="mainstyle.css" />
</head>
<body>
<div id="header">
<?php include("header.php"); ?>
</div>
<div id="menu">
<?php include("menu.php"); ?>
</div>
<div id="body"> blah blah blah </div>
<div id="footer">
<?php include("footer.php"); ?>
</div>
</body>
</html>
Now the php include files for the above -
menu.php:
link1
link2
link3
link4
header.php:
<p><span id="hugesize">this text is in huge size </span></p>
Question is, how do i style the menulink and hugesize class/id present in the php include files - menu.php and header.php...? should these styling be included in the stylesheet of the page where these include codes will be 'embeded'.. as in the stylesheet referenced by
<link rel="stylesheet" href="mainstyle.css" />
Thanks.
The PHP include basically just appends the text to the file, so you will have a one big file once PHP processes the base page.
So there are two ways to style those classes, either include a block in the header, or just include it in the main link.
You answered your own question :). When those files are included, they will be sent as a single unit of output to the browser. Any CSS rules you have in stylesheets included on the same page will affect all html on that page.
Thats right. If you link to a css stylesheet in the main page then the styles apply to everything. Because css is only applied on the client side, that is, the browser. The browser is not aware of the includes etc, all that is handled on the server before anything is sent to the browser.
Any time I deal with combining PHP and HTML I always create myself a prototype HTML page with bogus values so I can be sure that the HTML/CSS works before I work on the backend. When the HMTL looks nice, I then take whatever sections I need for output in PHP and use those accordingly. This method also addresses fundamental concerns about your interface, and might actually help you when structuring your code. It might seem like a longer way to go about it at first, but it certainly saves me a lot of time and frustration to not have to deal with output styles when using PHP.
Related
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
I know how simple this probably seems to you gurus, but I have been searching for over an hour to no avail...
Goal: Use a single footer file and menu file for all my webpages. Taking into account blocking, speed, etc. The content of my menu is pure html/css and the content of my footer is pure html/css. Would the optimal solution change based on the content being injected? e.g. If videos, jscript, etc. were involved.
Two part question:
1) Which method is optimal? Some kind of php include, using the tag, using jscript, etc.
2) How precisely is this achieved keeping HTML 5 standards? i.e. For the php method to work, does my calling webpage need to be .php and then does that make the HTML5 standard a moot point? e.g. If I want to inject footer.php into index.html, does my index file also have to be .php? Similarly for the tag, can the external file be an .html file(I don't like the idea of reloading all the header information with .css calls) or should it be .php?
Within the index.html file I have tried the following:
<object id="footerArea" width="100%" height="20%"
type="text/html" data="footer.html">
</object>
and
<?php include 'footer.php' ?>
Neither of these seem to work for me.
In case you are wondering... Here is the code for my footer I am trying to inject with sample data to make it shorter and easier to read:
<div class="footer box">
<p class="f-right t-right">
www.mysite.com<br />
Address: Medford, OR<br />
Phone: (541) 555-5555
</p>
<p class="f-left">
Copyright © 2011 My Name<br />
</p>
<p class="f-left" style="margin-left:20px;">
<a href="http://sampleurl.com" target="_blank">
<img style="border:0;width:88px;height:31px"
src="http://sampleurl.com"
alt="Valid CSS3!" />
</a>
</p>
<p class="f-left" style="margin-left:20px;">
<a href="http://sampleurl" target="_blank">
<img src="http://sample.png" width="228" height="50" alt="sample alt" title="sample title">
</a>
</p>
</div>
Please excuse my formatting. I am still new to posting code in forums. I tried my best :)
The extension of a filename you seen in a url has absolutely NOTHING with how that file will be treated by a browser when it's downloaded. It all comes down to the Content-type header that accompanies the file. A webmaster can trivially configure their server to treat all .exe files as plain HTML pages. They can also tell the webserver to run .html pages through the PHP parser. In fact, with "modern" SEO-optimized urls, you rarely see a file extension at all. It'll all be things like example.com/some/wonky/path, not example.com/page.php?id=wonky.
The fact that PHP has built and output a page also has nothing to do with HTML compliance. It comes down to whether the page the browser receives conforms to the standards. Are all tags properly closed? Attributes properly defined? Tags properly nested? Blah blah blah.
If you've built your code properly, the html that's output will be properly structured and be valid html. If it's not valid html, that's not PHP's fault - that's your fault for putting together code that doesn't produce the proper output.
The only time a file extension in a URL MIGHT be relevant is if the webserver outputs a generic content-type, e.g. "application/octet-stream". The browser MAY use a detectable file extension to guess at the content's type and try to treat it as such. But this is not guaranteed nor reliable.
This is what a PHP include should look like:
<?php include 'footer.php'?>
As far as I can see the code you have in your question is assigning the string "footer.php" to the variable include. However, rather than rolling your own template system, have you considered using something like Smarty?
If the called code like for a footer that is canned, you might want to create the simple footer like you want then include:
<?php
readfile("yourfile.htm");
?>
Something like the following should do what you want:
index.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
<!-- other css, scripts etc -->
</head>
<body>
<!-- your main content here -->
<?php include 'footer.html' ?>
</body>
</html>
footer.html
<div class="footer box">
<!-- your footer content here -->
</div>
when you load index.php in the browser, and "view source", you should see the contents shown above, but the <?php include "footer.html" ?> should be replaced with the content from the file "footer.html".
You should not see the php code itself when you view source through the web-browser. If you do see php code in "view source", this indicates that your server isn't configured to run php properly.
For an alternate approach, which loads the content from the browser, and which doesn't use php, I'll point you to this related question and answer.
I'm looking for ways to have my pages search for the page layout from an external template page. Please see the below example.
<head>
<title></title>
</head>
<body>
<search for header, css, layout, etc from external page>
Page contents
<search for footer>
</body>
Is there any way to do this using PHP or HTML? I want to be able to edit the layout for all the pages without having to do it page by page. I welcome any other means to achieve the same effect as long as it works on all the browsers.
Thank you very much!
This is exactly the sort of thing that PHP is for. A PHP script can include the contents of another script using the include statement.
So each page in your application could have an associated PHP script that generates the contents, and includes footer.php for the footer layout. In this way, when you change footer.php all the pages that use it will automatically get the changes.
You can't do this with pure HTML, though you could with some javascript and Ajax.
Like Andrew said, use includes. I'll set up 2 basic examples.
The simplest, have multiple layout files that are called by your main file(s):
header.php:
<div id="header">
Menu can go here.
<?php echo 'I make all my files .php, so they can use PHP functions if needed.'; ?>
</div>
footer.php
<div id="footer">
Footer Link
</div>
index.php
<html>
<head></head>
<body>
<?php include('/path/to/header.php'); ?>
Specific index.php content here.
<?php include('/path/to/footer.php'); ?>
</body>
</html>
The other option is to have one PHP file which includes all your different layout elements in functions. The reason I like this, is because you can include one file and then call specific functions for different parts. This can also be used to pass variables like a title of a page.
layout.php
<?php
function makeHeader($title) {
return 'My title is: '.$title;
}
function makeFooter() {
$html = '
<div id="footer">
Footer Link
</div>
';
return $html;
}
?>
index.php
<?php include('/path/to/include.php'); ?>
<html>
<head></head>
<body>
<?php echo makeHeader('Page Title'); ?>
Specific index.php content here.
<?php echo makeFooter(); ?>
</body>
</html>
Just make sure you use relative paths (no http://www.) when including files. This will allow variables and functions to transfer over smoothly. The easiest way to do this is using the PHP variable $_SERVER['DOCUMENT_ROOT'] so if you have a file http://mysite.com/includes/layout.php, you could include it with include($_SERVER['DOCUMENT_ROOT'].'/includes/layout.php') no matter where your file you are including from is located.