I've just updated my site to use the PHP "include" function to add a CSS menu to every page. When I look at the result of the include function online, it has added a second HTML and Head to each page. The web site and menu work perfectly but this looks like bad design to me.
My CSS code is in an HTML file called menu.html. I've tried to remove the HTML and Head code from the menu.html file hoping to avoid the second instance in the final result but it doesn't work. The menu doesn't display correctly.
Is this a problem or should I do something else to eliminate the second insertion of the HTML and Head?
Here is partial code from a file using the "include" function to call the menu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD>
<META NAME="Description" CONTENT="Gary and Nancy's travel photo gallery">
<META NAME="Keywords" CONTENT="Gary and Nancy's travel photo gallery">
<META http-equiv="title" CONTENT="Gary and Nancy's travel photo gallery">
<META NAME="revisit-after" CONTENT="30 days">
<META NAME="classification" CONTENT="travel">
<META NAME="robots" CONTENT="all">
<META NAME="distribution" CONTENT="global">
<META NAME="products" CONTENT="Travel Photos">
<TITLE>Gary and Nancy's Photo Gallery</TITLE>
<link Rel=Stylesheet href="style.css" type="text/css">
</HEAD>
<font class=a24b color="#937666">Gary and Nancy's Photo Gallery</font>
<br><br>
<div class="menu">
<?php include 'menu.html';?>
</div>
<br>
Here is partial code of the menu.html file:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="mbcsmbmcp.css" type="text/css" />
</head>
<body>
<div id="mbmcpebul_wrapper" style="max-width: 804px;">
<ul id="mbmcpebul_table" class="mbmcpebul_menulist css_menu">
<li class="first_button"><div class="buttonbg gradient_button gradient38" style="width: 62px;">Home</div></li>
<li><div class="buttonbg gradient_button gradient38" style="width: 94px;"><div class="arrow"><a>Australia</a></div></div>
<ul class="gradient_menu gradient116">
<li class="gradient_menuitem gradient29 first_item">Cairns</li>
<li class="gradient_menuitem gradient29">Heron Island</li>
<li class="gradient_menuitem gradient29">Port Douglas</li>
<li class="gradient_menuitem gradient29 last_item">Great Barrier Reef</li>
</ul></li>
Here is the resulting code that I see online i.e. including double HTML and HEAD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD>
<META NAME="Description" CONTENT="Gary and Nancy's travel photo gallery">
<META NAME="Keywords" CONTENT="Gary and Nancy's travel photo gallery">
<META http-equiv="title" CONTENT="Gary and Nancy's travel photo gallery">
<META NAME="revisit-after" CONTENT="30 days">
<META NAME="classification" CONTENT="travel">
<META NAME="robots" CONTENT="all">
<META NAME="distribution" CONTENT="global">
<META NAME="products" CONTENT="Travel Photos">
<TITLE>Gary and Nancy's Photo Gallery</TITLE>
<link Rel=Stylesheet href="style.css" type="text/css">
</HEAD>
<Body>
<center>
<font class=a24b color="#937666">Gary and Nancy's Photo Gallery</font>
<br><br>
<div class="menu">
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="mbcsmbmcp.css" type="text/css" />
</head>
<body>
<div id="mbmcpebul_wrapper" style="max-width: 804px;">
<ul id="mbmcpebul_table" class="mbmcpebul_menulist css_menu">
<li class="first_button"><div class="buttonbg gradient_button gradient38" style="width: 62px;">Home</div></li>
<li><div class="buttonbg gradient_button gradient38" style="width: 94px;"><div class="arrow"><a>Australia</a></div></div>
<ul class="gradient_menu gradient116">
<li class="gradient_menuitem gradient29 first_item">Cairns</li>
<li class="gradient_menuitem gradient29">Heron Island</li>
<li class="gradient_menuitem gradient29">Port Douglas</li>
<li class="gradient_menuitem gradient29 last_item">Great Barrier Reef</li>
</ul></li>
"this looks like bad design to me"
...yep. You should not have a HTML document inside another one. Get rid of the inner one.
Menu.html should contain the HTML specific to the menu, and nothing else. Then you can slot it into the body of your main document using include(). You probably need to keep the stylesheet link, too
Get rid of all the header information on menu.html, just keep this line below (put it in the header of the main file)
<link rel="stylesheet" href="mbcsmbmcp.css" type="text/css" />
Related
I want to apply color to a text using tailwindcss but it's not working.
Here is the code-
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-yellow-400 font-bold">
Hello, world!
</h1>
</body>
</html>
This is what that looks like in the browser. It seems like the class is not being applied.
Try to add Tailwind with the CDN because maybe output.css doesn't contain the feature you want to use.
```html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-yellow-400 font-bold">
Hello world!
</h1>
</body>
</html>
```
I have my index.php in which I am including the header. But the problem is that I want a different header title as I am including it in other pages well. I want it to change dynamically according to page like if its other page like shop then title should be Toys - Shop like this. I am new to PHP can anyone please help me with how to do it? Index.php:
<?php include'headernav.php';?>
<div class="header-outs" id="home">
<div class="header-bar">
<div class="info-top-grid">
<div class="info-contact-agile">
<ul>
<li>
<span class="fas fa-phone-volume"></span>
<p>+(000)123 4565 32</p>
</li>
<li>
<span class="fas fa-envelope"></span>
<p>info#example1.com</p>
</li>
<li>
</li>
</ul>
</div>
</div>
</div>
</div>
Headernav.php:
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>Toys-Home</title>
<!--meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="" />
<link href="css/style.css" rel='stylesheet' type='text/css' media="all">
<!--//stylesheets-->
<link href="//fonts.googleapis.com/css?family=Sunflower:500,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
</head>
<body>
You can do something like this:
index.php:
<?php
$pagename = 'Toys-Home';
include ('headernav.php');?>
<div class="header-outs" id="home">
<div class="header-bar">
<div class="info-top-grid">
<div class="info-contact-agile">
<ul>
<li>
<span class="fas fa-phone-volume"></span>
<p>+(000)123 4565 32</p>
</li>
<li>
<span class="fas fa-envelope"></span>
<p>info#example1.com</p>
</li>
<li>
</li>
</ul>
</div>
</div>
</div>
</div>
headernav.php
<!DOCTYPE html>
<html lang="zxx">
<head>
<title><?php print $pagename; ?></title>
<!--meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="" />
<link href="css/style.css" rel='stylesheet' type='text/css' media="all">
<!--//stylesheets-->
<link href="//fonts.googleapis.com/css?family=Sunflower:500,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
</head>
<body>
You'd have to set the $pagename variable on each page if that's something you're looking for. Each page would have the title you've set in that variable.
#Loupeznik's accepted answer provides a solution. An alternative is to use functions in include files and call them from the main PHP. You will have to write a bit more code, but you will get more flexibility. E.g. you will be able to add different css or js files on different pages letter or use a single include file for both header and footer or other common PHP code.
The way to do this is to add a function called writeHeaderNav() or something similar and then call it from index.php with $pagename as an argument.
headernav.php
<?php
function writeHeaderNav($pagetitle){
echo"<!DOCTYPE html>
<html lang='zxx'>
<head>
<title>$pagetitle</title>
<!--meta tags -->
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta name='keywords' content='' />
<link href='css/style.css' rel='stylesheet' type='text/css' media='all'>
<!--//stylesheets-->
<link href='//fonts.googleapis.com/css?family=Sunflower:500,700' rel='stylesheet'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet'>
</head>
<body>";
}
//you can have other PHP code here if needed
function writeFooter(){
//echo html for common footer
}
?>
index.php
<?php
$pagename = 'Toys-Home';
include ('headernav.php');
writeHeaderNav($pagename);
// or you can use writeHeaderNav('Toys-Home');
?>
<div class="header-outs" id="home">
<!--rest of code-->
You can put a variable like this in your Headernav.php file and have it defined before your include
< title> < ?php echo "$my_title"; ?>
This variable can be changed by the way you get it
from your url ($_GET)
from a sql query
from a session variable
...
I don't understand how this happen.
In my index.php, i require the page header.php :
<?php require("view/viewHeader.php");
Which contains this :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Mon systeme</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="manifest" href="manifest.json" />
<link rel="stylesheet" href="css/global.css" />
</head>
<body>
<div id="content">
So how i get this on the final page ?
link outside the head
The index.php has 165 lines, so i show you the beginning of the switch where the require call the viewHeader.php :
switch ($action) {
case 'ajout':
$menuTitre = "Ajout";
require("view/viewHeader.php");
require("view/viewMenuEnTete.php");
require("view/viewAjout.php");
require("view/viewFooter.php");
break;
Yes in the source it is alright
<div id="debug">ACTION: string(5) "ajout"
<br/>RECH: NULL
<br/><hr />POST<br/>array(1) {
["action"]=>
string(5) "ajout"
}
<hr /></div><!DOCTYPE html>
<html lang="fr">
<head>
<title>Mon systeme</title>
<link rel="manifest" href="manifest.json" />
<link rel="stylesheet" href="css/global.css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="content">
But the manifest is not detected. I thought there were a problem with the head mixed up.
I get rid of the small div in top, but it doesn't change anything :(
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Mon systeme</title>
<link rel="manifest" href="manifest.json" />
<link rel="stylesheet" href="css/global.css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="content">
I have a doubt that adding dynamically the meta tags using server script can minimize scope of SEO friendly can anyone tell it good or not to do that ?
//Header1.php
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php echo $title ;?></title>
<meta name="description" content="<?php echo $title ;?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</html>
//home.php
<?php
$title="Portfolio";
include ('../assets/includes/header1.php');
?>
<section id="portfolio" class="portfolio text-center">
<div class="portfolio-bottom">
<div class="section-padding">
</div>
</div>
</section>
<?php
include ('../assets/includes/footer.php');
?>
ok so I've created this website and want to convert it to php just for fun. The website structure looks like any 'normal' web structure. like this:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body class="fish">
</body>
</html>
ok so i included from the head to the beginning of the body tag in header.php file. so header.php looks like this:- `
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body class="fish">`
now here is the problem. Each page should have it's own title, body class! and each page will also obviously have it's own meta description and content. How will I accomplish this guys? I was think of creating a function that base the meta description and body class on the page title. But is there a smatter way to accomplish this? Thanks
Either use a template engine or a MVC framework (such as CakePHP or CodeIgniter) which have template engines already incorporated in them.
Inside your header.php do something like this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $_tpl['title'] ?></title>
<meta name="description" content="<?php echo $_tpl['meta_desc'] ?>">
</head>
<body class="<?php echo $_tpl['body_class'] ?>">
On your page, before you use include('header.php'), define the vars as follows:
$_tpl = array();
$_tpl['title'] = 'My Title';
$_tpl['meta_desc'] = 'My meta description.';
$_tpl['body_class'] = 'fish';
As others have said though, don't re-invent the wheel. You'd be better to investigate some of the already-established templating engines for PHP:
Smarty
RainTPL
You should be creating a template to do this if it will be dynamic. You have many options on how you with to pass the data, whether it be a database, an object, array, etc. It is really tough to generate the data based on the page title, unless you are using a very persistent format to title each page.
<head>
<meta property="og:title" content="<?= $values['title'] ?>" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<?= $values['url'] ?>" />
<meta property="og:image" content="<?= $values['image'] ?>/>
<meta property="og:site_name" content="<?= values['name'] ?>"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="ROBOTS" content="NOODP">
<link rel="icon" type="image/png" href="<?= $values['image'] ?>" />
<title><?= $values['title'] ?></title>
<? if(isset($values['css'])) : ?>
<? foreach($values['css'] as $css) : ?>
<link href="/css<?= $css['data'] ?>" rel="stylesheet" type="text/css" />
<? endforeach ?>
<? endif ?>
<? if(isset($values['js'])) : ?>
<? foreach($values['js'] as $js) : ?>
<script src="/js<?= $js['data'] ?>" type="text/javascript"></script>
<? endforeach ?>
<? endif ?>
</head>