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.

    
        
        
        
        
        
        
        
        
        
    
    
        

            
Johan Broddfelt
            
// Commenting code to learn
        
        
        

            
        
        
        
        
    

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.

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 Main_template.php and html 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.

2015-09-16 23:46:00 - framework, php, software