Main_template.php and html
Now when we got our major parts setup, we would like to display something on our web page. We start by adding some html to our main_template.php. To make the site more SEO friendly and HTML5 comliant we take a look at some of the new tags provided by HTML5 and how to use them. Check out The semantic elements in HTML5.
<!DOCTYPE html>
<html lang="sv">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>__head_title__</title>
<link rel="icon" href="graphics/favicon.ico" type="image/ico">
<meta name="description" content="__head_meta_description__">
<meta name="keywords" content="__head_meta_keywords__">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge" />
__head_extra__
<link rel="stylesheet" type="text/css" href="main.css?v=<?php //echo File::getFileVersion('main.css'); ?>">
</head>
<body>
<header id="top"><div>
<div id="name">Johan Broddfelt</div>
<div id="slogan">// Commenting code to learn</div>
</div></header>
<nav id="menu"><div>
<a href="">Posts</a>
<a href="">Tags</a>
<a href="">Links</a>
<a href="">About</a>
</div></nav>
<main id="content">
<?php printContent(); ?>
</main>
<footer id="footer"><div>
Created by: Johan Broddfelt, <a href="mailto:info@johanbroddfelt.se">info@johanbroddfelt.se</a>
</div></footer>
<script type="text/javascript" src="main.js?v=<?php //echo File::getFileVersion('main.js'); ?>"></script>
__footer_extra__
</body>
</html>
Now here is a lot to take in, even though I feel I stripped away a lot of good stuff. But I guess I will have to get back to that in later posts.
<!DOCTYPE html> tells the browse to expect html5. The lang-tag in the HTML tag is a recommendation from W3.org to aid search engines and browser to identify the language of the site.
In the head we set the site to use utf-8. There is no reason what so ever to use anything else today. It has
become the standard on the web. So make sure you use it.
Then we set a title for our page. This will show up in the browser window and if you save the page or create a
shortcut, this is the name it will get. I have added __head_title__ because I want to be able to replace
it later. As with all the content named __some_text__.
You really want to make a favicon.ico. It is the small image shown in the tab of the browser. You need this to make
your site visible in the bookmarks and tabs of the browser.
Description and keywords are used by search engines to display your site. So we want to be able to select what
should go there. And we want some uniq text on each page. So we are going to add that later.
The viewport is something we use to decide how the page should react to a mobile browser. In this case I want the
page to re size so that it fits the size of the browser.
At the end of our head we add the css-file. As you can see I have commented out a function called
Master::getFileVersion(); This is a function that checks the timestamp of the css-file to give it a
version number. So that the browser always will download the latest version. We have not implemented that yet so
lets keep it commented out for now. The same goes for the javascript file at the bottom of the page.
Now for our body section. Here we have a top, menu, content and footer. In the top we will keep the name of the
site. The menu is obvious with links. Then we have our content that calls the printContent-function. And at the end
we add our footer. If we want one.
You can use any template you like there is a ton of free templates online if you do not want to design
your own. Just replace the content in the main_template.php or create a new one, like
test_template.php, and try that with your index.php instead.
The reason why I have added an extra div inside all major elements is because if I change the padding on a major item, it will actually change the width of the item. So to make sure we do not ruin our layer we use this trick.
Now the site looks kind of dull so we want to style it with our css-file. And we also need to add a main.js. So let's style this thing in our next session.
- Framework, PHP