How I create my web pages

In this section, I'll show you how I create my web page template for this site.

I can't design a website, this is my weakness. So I've always consider creating a template to be a more of a coding exercise rather than a designing project.

I also can't handle an image editor, so I experiment more with font sizes and colors instead of producing attractive images.

As you can see, most of my pages are image free.

From a one column template, I could easily expand it into a two-column or three-column page tempate. With CSS styling, I am also able to make it resize accordingly to the screen size of the device a reader is using.

1 column template ( Click to show / hide )

Now, look at my template for a one column web page:

<?php $title= "FILL IN YOUR TITLE HERE"; ?>

<?php $description= "FILL IN DESCRIPTION"; ?>

<!DOCTYPE html>

<html lang="en">

 

<head>

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

</head>

 

<body>

<?php include("incl/t1-nav.php"); ?>

<div id="wrapper">

 

<article id="content">

<?php include("art/art-root-about-websdiy.php"); ?>

</article><!--content-->

</div> <!-- Wrapper -->

 

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

</body<</html>

I do not use tabs so the blank line between the groups makes reading easier. Tabs or extra line does not affect the rendition of the HTML. It's made easier for the human eyes.


2 column template ( More / Less )

This is my template for a two-column web page:

  • To add a side bar, reduce the width of the content to compensate for the addition of a sidebar.
  • Find the addition of sidebar coded in bold here in this example .

<?php $title= "FILL IN YOUR TITLE HERE"; ?>

<?php $description= "FILL IN DESCRIPTION"; ?>

<!DOCTYPE html>

<html lang="en">

 

<head>

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

</head>

 

<body>

<?php include("incl/t1-nav.php"); ?>

<div id="wrapper">

 

<article id="content">

<?php include("art/art-root-about-websdiy.php"); ?>

</article><!--content-->

 

<div id="sidebar1">

<?php include("inclads/advert1.php"); ?>

</div>><!--center-->

</div> <!-- Wrapper -->

 

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

</body<</html>


3 column template ( More / Less )

And finally my template for a three-column page:

<?php $title= "FILL IN YOUR TITLE HERE"; ?>

<?php $description= "FILL IN DESCRIPTION"; ?>

<!DOCTYPE html>

<html lang="en">

 

<head>

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

</head>

 

<body>

<?php include("incl/t1-nav.php"); ?>

<div id="wrapper">

 

<article id="content">

<?php include("art/art-root-about-websdiy.php"); ?>

</article><!--content-->

 

<div id="sidebar1">

<?php include("inclads/advert1.php"); ?>

</div>><!--center-->

 

<div id="sidebar2">

<?php include("incl/t2-menu1.php"); ?>

</div><!--sidebar-->

 

</div> <!-- Wrapper -->

 

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

</body<</html>

Next, let's study each line and see what's behind each "php include".

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