In this tutorial you can learn
how to quickly create a simple website in PHP, with
different title, meta description, and content for each page.
We create a file:
index.php with PHP instructions to define page data, HTML code, and CSS style for template (
the whole code for this file is presented bellow).
- The page URL will have the form:
index.php?pg=page_name
- The content of each page (which can contains HTML code) is stored into a directory (here named "
pages"), in ".htm" files, with the name:
page_nme.htm
1. First we create the PHP code. To have different Title and Meta-tags in each page, we set an Array with Title, Description, and Keywords associated with the name of each page, "index" for Home page.
$pgdata['page_name'] = array(
'title'=>'Title of the page',
'description'=>'Here add the page description',
'keywords'=>'meta keywords, of the, page'
);
2. Then we set a variable with the name of the page. If there is
$_GET['pg'], we get the name of the page from URL, otherwise we set the default name "index"; and get its data from Array.
$pgname = isset($_GET['pg']) ? trim(strip_tags($_GET['pg'])) : 'index';
- We use
strip_tags() function to remove posible tags added by visitor in URL, and
trim() to delete whitespaces from beginning and end of the name.
3. With this variable we get data for the current /accessed web page, like this for Title.
$title = $pgdata[$pgname]['title'];
4. Then we create the HTML code with CSS styles, a menu and the content (see the whole code bellow). In the HTML code we add the Meta data selected from array, like this for Title:
<title><?php echo $title; ?></title>
And get its content saved in ".htm" file, using:
file_get_contents('directory/page_name.htm');:
<article id="article">
<?php echo file_get_contents('pages/'. $pgname. '.htm'); ?>
</article>
- To can use properly diacritics, or other less common characters, all the files must be saved with
UTF-8 encoding. In the PHP code we add this header:
header('Content-type: text/html; charset=utf-8');
And, the HTML code must have this meta:
<meta charset="utf-8" />
Here's the code to create a
simple website with PHP.
Code for index.php file
<?php
/* Create simple Website with PHP - https://coursesweb.net/php-mysql/ */
// create an array with data for title, and meta, for each page
$pgdata = array();
$pgdata['index'] = array(
'title'=>'Title for Home page',
'description'=>'Here add the description for Home page',
'keywords'=>'meta keywords, for, home page'
);
$pgdata['about_me'] = array(
'title'=>'Title for About Me page',
'description'=>'Description for About Me, https://coursesweb.net',
'keywords'=>'about me, https://coursesweb.net'
);
$pgdata['images'] = array(
'title'=>'Title for Images',
'description'=>'Here add the description for the page with images',
'keywords'=>'images, pictures, photo'
);
// set the page name
$pgname = isset($_GET['pg']) ? trim(strip_tags($_GET['pg'])) : 'index';
// get title, and meta data for current /accessed page
$title = $pgdata[$pgname]['title'];
$description = $pgdata[$pgname]['description'];
$keywords = $pgdata[$pgname]['keywords'];
// set header for utf-8 encode
header('Content-type: text/html; charset=utf-8');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title><?php echo $title; ?></title>
<meta name="description" content="<?php echo $description; ?>" />
<meta name="keywords" content="<?php echo $keywords; ?>" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style><!--
body {
margin:0;
text-align:center;
padding:0 1em;
}
header, footer, section, aside, nav, article { display: block; }
#posts{
position:relative;
width:99%;
margin:0.5em auto;
background:#fdfefe;
}
#menu {
float:left;
width:15em;
margin:0 auto;
background:#f8f9fe;
border:1px solid blue;
text-align:left;
}
#menu li a:hover {
text-decoration:none;
color:#01da02;
}
#article {
margin:0 1em 0 16em;
background:#efeffe;
border:1px solid #01da02;
padding:0.2em 0.4em;
}
#footer {
clear:both;
position:relative;
background:#edfeed;
border:1px solid #dada01;
width:99%;
margin:2em auto 0.5em auto;
}
--></style>
</head>
<body>
<header id="header">
<h1><?php echo $title; ?></h1>
</header>
<section id="posts">
<nav id="menu">
<ul>
<li><a href="index.php" title="Home page">Home</a></li>
<li><a href="index.php?pg=about_me" title="About Me">About Me</a></li>
<li><a href="index.php?pg=images" title="Images">Images</a></li>
</ul>
</nav>
<article id="article"><?php echo file_get_contents('pages/'. $pgname. '.htm'); ?></article>
</section>
<footer id="footer">
<p>From: <a href="https://coursesweb.net/php-mysql/" title="Free PHP-MySQL course">PHP-MySQL Course</a></p>
</footer>
</body>
</html>
- This is just an example for a website with three pages: Home, About Me, Images; and the CSS code only to arrange a little the Menu and content area. The files: "index.htm", "about_me.htm", and "images.htm", with the content you want for each one, must be saved into a directory named "pages".
You can create more pages in the web site by setting $pgdata['page_name'] array with their data, and create the content in "page_name.htm" file, in "pages" directory.
- To Download the files with this example, click:
Create simple Website with PHP.