previous next

How I create my one column web page template

In the previous page, I showed you my 3 web page templates for 1-column, 2-column and 3-column.

Over here, I'll explain each line or group in details. Let's look at the 1-column template again:

  1. <?php $title= "FILL IN YOUR TITLE HERE"; ?>
  2. <?php $description= "FILL IN DESCRIPTION"; ?>
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.  
  6. <head>
  7. <?php include("incl/headmeta.php"); ?>
  8. </head>
  9.  
  10. <body>
  11. <?php include("incl/t1-nav.php"); ?>
  12. <div id="wrapper">
  13.  
  14. <article id="content">
  15. <?php include("art/art-root-about-websdiy.php"); ?>
  16. </article><!--content-->
  17. </div> <!-- Wrapper -->
  18.  
  19. <?php include("incl/footer.php"); ?>
  20. </body></html>
  • The line numbers are added for reference only. Do not include them into your template.
  • I saved my webpage with extention php. You could saved yours as .htm, .html but I strongly recommend using .php as your web page extention.

Title, Description HTML5 and Language Line 1 - Line 5

These are the first 5 lines: ( click to read more / close )

  1. <?php $title= "FILL IN YOUR TITLE HERE"; ?>
  2. <?php $description= "FILL IN DESCRIPTION"; ?>
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.  
  1. Title - I fill in my page's title here inside the quotation marks.
  2. Description - I fill in my page's description here.
  3. DocType - This is to tell the browser that my page is coded in HTML5
  4. Language - language used is English. You'll want to edit this if you are writing in a different language.
  5. Blank line/s: 5, 9, 13, and 18
    • I do not use tabs and hence the blank lines to separate the grouping of codes.

You can copy these 4 lines directly into a notepad without making any changes. You only need to fill in text into the title and description columns.

The title and description will not be not shown on your web page. Instead, they will be echoed into the head area. What you need to do is to fill in the blank between the quotation marks.

keywords not in metadata

In the past, we used to include the keywords but I no longer use it. Nowadays, keywords are rarely entered in the metahead. One of the reasons was Google no longer pay any attention to this line. Another reason is, why show your competitors which keywords you are targeting at?

But should you want to include it, this is what you do - add this line to your template:

<?php $keywords= "FILL IN keywords here, each with a comma and ending with a period."; ?>

Add this line to your headmeta include:

<meta name="keywords" content="<?php echo $keywords; ?>" />


MetaData Line 6-8

The next group is the head area. Again, what goes into this area will not be be seen by a visitor, but they contain crucial information to the search engines.

  1. <head>
  2. <?php include("incl/headmeta.php"); ?>
  3. </head>
  1. Beginning the head
  2. You'll need to create a subfolder, named it incl, include or whichever name you choose, to store all "include" files into this folder. These files are mainly files that will appear in almost every of a web page, like the header, the sidebar and the footer.
  3. Ending the head

In hindsight, I should have named it as metadata. I named it as headmeta years ago as it contains everything from <head> till </head> . But this is really no error. Name it anything you like.

Originally, the <head> was inside the "include." I took it out later because there were times when I have to add a line of code before the </head>, like a javascript or a css styling, but it was just for that particular page. There's no point having the code in every page. As years go by, it will add add up and hence the changes.

From what I know, most web developers do not have include for metadata. Even if they did, the title and description line cannot be included. That is because they are different each page.

That's the reason why I need to have the first 2 lines in php to fill in the title and description into the metadata.

What's inside headmeta.php?

<<meta charset="utf-8" />

<meta name="viewport" content="width=device-width; initial-scale=1.0">

 

<title><?php echo "$title"; ?></title>

<meta name="description" content="<?php echo $description; ?>" />

 

<!--[if lt IE 9]>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<!--[if lt IE 9]>

<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<![endif]-->

 

<link rel="stylesheet" href="../css/webscom141.css" type="text/css" media="screen" />

<link rel="shortcut icon" href="favicon.ico" />

  • Choose charset="utf-8" as the default.
  • The next line is for viewing of your web page with other devices besides the normal desktop. I'll talk about it when I touch on the CSS coding. Even you have no plan for RWD at this stage, leave it as it is. You'll want to make your pages responsive soon.
  • Title -
  • Description
  • if lt IE 9 - for reader using Internet Explorer before IE9. I copied these few lines from a WordPress theme.
  • LInk stylesheet - this reads the CSS file. I am using an example for a page stored in a subfolder, if it's for a page in the root directory, remove the "../"
  • Favicon - again, this needs explanation. I am using a different favicon for each subfolder. Most of them are the same, only different colors. I suggest you use the full path to make things simplier:
  • Of course, change the domain to yours.

<link rel="shortcut icon" href="http://websdiy.com/favicon.ico" />


Header Branding and Horizontal Navigation

<header id="head">

<h1><a href="http://websdiy.com/websdiy.php" title="home"><span class="w">w</span>eb<span class="s">s</span>diy</a></h1>

<nav><div id="t1">

<ul>

<li><a href="../about-websdiy2.php"title="Click for the next menu">Menu 1</a></li>

<li><a href="../build/">Build</a></li>

<li><a href="../build/build-my-own-website.php">Steps</a></li>

<li><a href="../html/">HTML</a></li>

<li><a href="../pages/how-i-create-my-own-web-pages.php">Coding</a></li>

<!--<li><a href="../template/">Template</a></li>-->

</ul> </div> </nav>

</header>

This is the web page header. Typically it contains the head banner and 2 lines of text group under hgroup. A line for the domain name and the other a slogan or tag line to explain what your site is all about. I leave out the 2nd line as the domain is really self-explanatory.

I have it in the home page but not in any content pages.

Don't have to insert hgroup as it is no longer in used. If you are currently using it, no worries. That's no need to remove it immediately.

I use a few horizontal menus on this site, so I have t1-nav1, t1-nav2, etc.

T1 is short for Tier 1. I learned to build tier 1, tier2 and tier 3 pages from SiteBuildIt. If you find this coding tedious, I suggest you take a look at complete system of SBI and judge for yourself if that's a better alternative.

Without having to make changes in every pages. Saving under include has one advantage. Should you need to make any changes, they will appeared in all pages. Without with, you'll need to make the changes to every of your web pages.

Line 10 - 12 Horizontal Navigation

  1. <body>
  2. <?php include("incl/t1-nav.php"); ?>
  3. <div id="wrapper">

<header id="head">

<h1><a href="http://websdiy.com/websdiy.php" title="home"><span class="w">w</span>eb<span class="s">s</span>diy</a></h1>

<nav><div id="t1">

<ul>

<li><a href="../about-websdiy2.php"title="Click for the next menu">Menu 1</a></li>

<li><a href="../build/">Build</a></li>

<li><a href="../build/build-my-own-website.php">Steps</a></li>

<li><a href="../html/">HTML</a></li>

<li><a href="../pages/how-i-create-my-own-web-pages.php">Coding</a></li>

</ul> </div> </nav>

</header>


Article section line 14 - 16

This may be the only includes that I do it differently from other sites. I don't see it mentioned in any sites I've come across.

The content usually goes into the web page, but I place mine in a different folder - article. There's a danger though. There's always a possibility that I accidentally includes it into another file, there I had it - a duplicate web page.

Are there any advantages?

Yes, when I want to change template. What I need to do is to insert this line onto the new template.

  1. <article id="content">
  2. <?php include("art/art-root-about-websdiy.php"); ?>
  3. </article><!--content-->
  4. </div> <!-- Wrapper -->
  1. begin content
  2. include article
  3. close tag article
  4. close wrapper

Footer Include - Line 19

  1. <?php include("incl/footer.php"); ?>

It may be meaningless to paste everything that's in my footer include here. You could view everything in there by viewing page source

Instead I'll show you how my footer section is structured.

<footer id="footer">

<div id="footaccess">

<div class="myphoto"><img src="http://websdiy.com/img/nsk3-200.jpg" alt="eskay ng" width="50" /></div>

<div id="gplus">

<div class="gbutton"><!-- Place this tag where you want the +1 button to render. -->

<div class="g-plusone" data-size="medium" data-annotation="none"></div>

<!-- Place this tag after the last +1 button tag. -->

THE SCRIPT PROVIDED BY GOOGLE PLUS GOES IN HERE

</div>

<p class="byme"><a href="https://plus.google.com/104368718424622593356" rel="publisher"> by eskay ng</a></p>

</div>

<div id="join">

ADDTHIS SCRIPT http://www.addthis.com/

</div><!-- join-->

<div class="googlesearch">

THE GOOGLE SEARCH SCRIPT GOES IN HERE

</div><!-- gsearch search2 -->

</div>

</div><!-- FOOTACCESS -->

<div id="footnote">

<div class="clear"></div>

<p > |

<a href="http://websdiy.com/about-websdiy.php">About</a> |

<a href="http://websdiy.com/contact-websdiy.php">Contact</a> |

<a href="http://websdiy.com/privacy-policy.php">Privacy</a> |

<a href="http://websdiy.com/earnings-disclaimer.php">Disclaimer</a> |

<a href="http://websdiy.com/sitemap.php">Sitemap</a> |

<a href="#">GoTop</a> |

<br />

<a href="http://websdiy.com/" title="HOME - websdiy">websdiy.com</a> © <?php echo date("Y"); ?> </p>

</div><!-- footnote -->

</footer>

FILL IN YOUR GOOGLE ANALYTICS CODES HERE

Closing the BODY and HTML tags - Line 20

  1. </body></html>

That ends the 20 lines of code in each of my one-column page tempate. To expand it to a 2-column template, I'll add in a SideBar2 include, and another Sidebar1 include if it is for a 3-column template.

That ends the php include for this template

Next, we'll create the CSS file to style this template for 1-column, 2-column and 3-column layout.

Now that the template is done, we can apply the styling to the pages and start creating the web pages for this site.


Next

Once this template is done, we can start creating the php include files. Let's start with the HeadMeta

Pages
templates coding
coding my web pages
create my own page template
php include
creation
create web pages 101
building my own web pages
create first landing page
flow
show the right page
build money making website

eskay ng

by eskay ng