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>
Related
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.
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.
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
At the moment I have a single page site (html/php) I created for someone about 2 years ago. I'm about to add an admin panel and plan on starting with html5 for it. I'm curious what I will need to do to my single page besides switching the <!doctype> to just html.
Here's a bit of my single page index.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="descriptions" content="meta desc">
<meta name="keywords" content="meta, keywords">
<!--imports the main css file-->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.form.js"></script>
</head>
<body></body>
</html>
I know first I'll change my doctype to <!doctype html> but don't I also have to remove extra properties of my link and script tags? Namely the type property?
Currently this is a simple 1 page site, so I thought it would be a great place to start.
Thanks!
That should be it. Do that and then put the URL in http://validator.w3.org/ to see what html 5 errors you have.
Also since it will not be XML I think you'll want to remove the forward slashes from the end of the meta and link tags. See Useless Code's comment below regarding the type attributes.
The validator will tell you each problem until your html 5 is valid.
The HTML 5 code would look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="meta desc">
<meta name="keywords" content="meta, keywords">
<title>Title</title>
<!--imports the main css file-->
<link rel="stylesheet" href="css/style.css" media="screen">
<script src="js/jquery.form.js"></script>
</head>
<body></body>
</html>
Some explanations:
xmlns is no longer needed. Elements in HTML5 don't need to be explicitly delcared.
I'd go with charset meta before title. Otherwise, IE users might be left in the open in front of an XSS attack. (https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7)
on the second meta, the name attribute should be description, not descriptions.
there's no need for forward in html (at the end of meta, links). those were mandatory in xhtml.
when referencing link and scripts, you can choose not to mention the type attribute. It is considered redundant as the defaults will kick in (for link you would probably use css, and for script js)
If you want to find out more about HTML 5 - here are some good places to start (stuff that you can read and enjoy while at it, compared to the actual standard):
http://diveintohtml5.info/ - free e-book by Mark Pilgrim
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.