I wonderring that how to load a html page in PHP with all the css and bootstrap. I have used the "include(file.html)" but it just show the plain html without any css. Is there any way to also load the css that is linked in the html file ? Thanks
Make sure you have a <link> tag as shown below in your HTML. The CSS will not be included until you send the your HTML to the browser, though. Otherwise, you will have to use the <style></style> tag in the header of your HTML (also, inline styles are a possibility). Note: The link tag assumes you have a directory named CSS in your webroot.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link type="text/css" rel="stylesheet" href="css/styles.css"> <!-- Right here.-->
</head>
<body>
The content of the document......
</body>
</html>
CSS in the header might look like ...
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style><!-- Right here.-->
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
The content of the document......
</body>
</html>
If you change the name of your file to file.php, you might be able to simple use include/require styles.css inside of file.php like so:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<?= include 'styles.css'; ?>
</head>
<body>
The content of the document......
</body>
</html>
However, be sure your include_path is set appropriately. Additionally, doing this would mean putting the various selectors and rules within a <style></style> tag like in the previous example.
Related
I have a website that I am building and I am planning to use php inlude for the header and footer.
Lets say the header is <html>.....</html
Footer is <html>......</html>
What happens with the beginning and ending of html tags on the same page?
Is there gonna be a problem?
Can there be two open and end tags on the same page?
header
footer
If you are going to use "include", "require" or "require_once" on your page... the included file should contain ONLY valid markup. Think of your include files as what you would normally write between the <body> and </body> tags.
EXAMPLE:
index.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<?php require'includes/header.php' ?>
my body content goes here
<?php require'includes/footer.php' ?>
</body>
</html>
header.php
<div id="header">
<div><img src="/where/my/image/is/filename.jpg" alt="my header image" title="my image title" /></div>
<div id="menu">this is where I will put my menu</div>
</div>
footer.php
<div id="footer">this is where I will put my footer content</div>
Notice that in the header.php and footer.php files the following lines have been removed...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Multiple <head>, <html>, <body> tags are generally ignored by modern "smart" browsers. They will just "rewrite your code for you" based on what the browser "thinks" you meant to write. BUT will it be correct!?
Do not rely on browsers to "fix" your mistakes. Write good, clean, valid code.
Your include header should start with
<!DOCTYPE html>
<html>
<head>
some meta tags, css and js
</head>
And you footer should end with
</html>
Here's an example of a small html page structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explanation:
The `DOCTYPE` declaration defines the document type to be HTML
The text between `<html>` and `</html>` describes an HTML document
The text between `<head>` and `</head>` provides information about the document
The text between `<title>` and `</title>` provides a title for the document
The text between `<body>` and `</body>` describes the visible page content
The text between `<h1>` and `</h1>` describes a heading
The text between `<p>` and `</p>` describes a paragraph
UPDATE
My questions is about having multiple opening and ending
tags on a page because of php include
An HTML document can only have ONE html tag. If you just put several HTML together, it will be an invalid document, and the browsers may have problems displaying it.
My crazy web teacher requires a doctype.php file to be in each of my webpages to avoid repetition, like this:
<?php include 'doctype.php'; ?>
However, I also need a different title for each page.
<head>
<title>Activities at Pacific Trails Resort</title>
</head>
This doesn't pass in http://validator.w3.org/. How do I include the doctype and the title?
In your doctype.php page add the following:
<!DOCTYPE html>
(The trailing empty line is intentional, you will need to ensure it exists in the doctype.php file.)
In each of the other pages, they should look something like:
<?php include 'doctype.php'; ?>
<html>
<head>
<title>Activities at Pacific Trails Resort</title>
</head>
<body>
<!-- content -->
</body>
</html>
Then when you visit each page, the output will be something like:
<!DOCTYPE html>
<html>
<head>
<title>Activities at Pacific Trails Resort</title>
</head>
<body>
<!-- content -->
</body>
</html>
you could always make yourself a little function for the start of your page and pass the title as a variable. You would put the function in your config.php and then all you have to do is require "config.php" and start your page with startPage("your title").
function startPage($title)
{
echo<<<END
<!doctype html>
<html>
<head>
<title>$title</title>
<link rel='stylesheet' href='css/admin.css' type='text/css'>
</head>
END;
}
ETA: I've gotten 2 down-votes for this but no explanation why. It might be breaking php's style guidelines because I'm echoing html? Not sure?
When I upload project files to ftp, Items moving to between body tags which are stored between head tags. When I test it in my localhost, it's fine and there is no problem about it.
header.php file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MEYDANOKU</title>
<link href="css/reset.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
//contents here
and there is footer.php file and it has end of the body and html tags.
footer.php file
<div id="footer1">
</div>
</body>
</html>
What is wrong with these files ? In localhost it seems perfect but when I upload to ftp, head contents moving between body tags.
site address :
http://www.meydanoku.org
You have a single space before your opening doctype tag:
<!DOCTYPE html>
delete this space:
<!DOCTYPE html>
This will fix it.
The content of head tag is not actually being placed into the body, it is just a browser (probably Google Chrome right?) bug when there is content before opening doctype tag.
Click 'view source' instead of 'inspect element' to see the actual source, rather than the browsers generated DOM
There is a space before <!DOCTYPE html> on the site. But I don't see that anything is inside body instead of head
I'm kind of learning all by myself, and I'm using the W3 validator to check my code.
Now I got this document which loads:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php
include("menu.php");
?>
<?php
if (is_file("$file.inc.php")) include ("$file.inc.php");
else include("homepage.inc.php");
?>
</body>
</html>
In the menu you chose for example 'Page A', which then loads as "pageA.inc.php" which contains:
<title>SUPERAWESOME TITLE of page A</title>
text text text
...
It works fine but I get this set of errors in the W3 validator which I don't know how to handle:
In the first set of code: end tag for "HEAD" which is not finished, doesn't contain "TITLE"
In the second set of code: document type does not allow element "TITLE" here
If I set a title in the first set of code, to solve the first problem, it always shows me that same title.
If I set the tags in te second set of code I get more errors in the W3 validator saying that it doesn't allow it there.
How could I solve this issue?
Or shouldn't I care? It's working right now the way it should, I'm just bothered by the errors when validating.
You are writing your title to the body of your html, and this is not valid. The title should be in the head, e.g:
<head>
<!-- other head tags -->
<title>Your Title</title>
</head>
You can do an include also in your head section:
if (is_file("$file.inc.php")) include ("$file.header.inc.php");
And in your inc file just output <title>...</title>. Then in the body section you can include another file with text output, then your html markup should be valid.
You may try like this
You missing end tag for meta and you need to add title inside head based on the current page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php
include("title.php");
?>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php
include("menu.php");
?>
<?php
if (is_file("$file.inc.php")) include ("$file.inc.php");
else include("homepage.inc.php");
?>
</body>
</html>
I have a php file that doesn't (for now) use any php code, that holds code for the header and main menu that will be used across all pages. The CSS file has no effect, even though I've created a style class for h1. The text "TEST" shows up, but the style is not applied. How do I properly include the CSS file?
mainMenu.php
<!--This code is included within the <head> of each page, and the stylesheet for the header and main menu are included here-->
<link href="styles/headerMenu.css" ref="stylesheet" type="text/css">
<!--Header and menu code-->
<div>
<h1>TEST</h1>
</div>
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>untitled</title>
<?php include ('./includes/mainMenu.php') ?>
</head>
<body>
</body>
</html>
The CSS file is not found. Double check the link and correct it:
<link href="menu.css" rel="stylesheet" type="text/css">
^- REL not REF
Also to prevent additional problems, remove the start and end tags of <head> and <body> from the code. The way you output the HTML elements, you would create wrong HTML if you keep those tags. Remove them and your page will be valid HTML again.
index.php:
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<title>untitled</title>
<?php include ('menu.php') ?>
</html>
Valid HTML has the benefit that you can run it through a validator to spot errors early.
I think it may be because you have got your menu appearing inside your <head> tag.
The CSS needs to go inbetween the <head> and </head> but the rest needs to be inside the <body> tag
<link href="styles/headerMenu.css" rel="stylesheet" type="text/css">
This must be at <HEAD></HEAD>
<div>
<h1>TEST</h1>
</div>
This must be at <BODY></BODY>
You have to separate this file into 2 files and include them in Head and in Body..
Don't include your HTML code in HEAD part. Only include CSS and JavaScript files in HEAD section. and you need to prefix the css or images path in some php file.
E.g.
create new php file with name "conn_path.php"
<?php
define('SITE_PATH',$_SERVER['DOCUMENT_ROOT'].'siteName/');
define('SITE_HTTP_PATH','http://localhost/'siteName/');
define('CSS_PATH','http://localhost/siteName/styles/');
define('IMAGE_PATH','http://localhost/siteName/images/');
?>
And then you path will be like below:-
mainMenu.php
<?php include "conn_path.php" ?>
<link href="<?php echo CSS_PATH ;?>headerMenu.css" rel="stylesheet" type="text/css">
It will help you in whole project…
Create a template file, with your essential (and re-used) html. Also with <html>, <head> and <body> tags and anything you must have in all pages – As your stylesheets and menu.
Then add a content section with a single variable.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>untitled</title>
<link href="styles/headerMenu.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Header and menu code-->
<div>
<h1>TEST</h1>
</div>
<?php echo $page_content; ?>
</body>
</html>
This way, any page content shoud be assigned to $page_content instead of echoed.