HTML Code Web Page Template

Basic HTML Code Template for a Web Page Which Includes Basic PHP, CSS and HTML Code.

Home Short:

To see what this html code skeleton looks like as is or to play with the code and see what the changes look like use this free online html editor

Although the basic html template code below ecompasses several different web languages ...

html
css
php
javascript

If you are new to the wonderful world of website design, your first goal should be to master html coding first. Here is a great html tutorial for free.

<?php

// security protocol detection
if (isset($_SERVER["HTTPS"]) && $_SERVER["HTTPS"] !== "off") 
{
  $protocol = "https://";
} 
else 
{
  $protocol = "http://";
}

$host = htmlspecialchars($_SERVER["HTTP_HOST"], ENT_QUOTES, "UTF-8");
$path = htmlspecialchars($_SERVER["REQUEST_URI"], ENT_QUOTES, "UTF-8");

$baseurl = $protocol . $host;
$urlpage = $baseurl . $path;

// web page title should be 40 - 60 characters long and contain main keyword phrase you want to rank on google for
$title = "Sample Web Page Title";
 // description should be between 20 - 30 words long and expand on the title providing greater detail
$description = "Sample Web Page Description";
 // several phrases that are 2 - 5 words long each, each separated by comma. The first keyword phrase here should also appear in the title and description
$keywords = "keyword phrase1, keyword phrase2, keyword phrase3";

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<title><?php echo $title;?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="<?=$keywords?>.">
<meta name="description" content="<?=$description?>.">
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="<?=$title?>." />
<meta name="twitter:description" content="<?=$description?>." />
<meta property="og:title" content="- <?=$title?>." />
<meta property="og:type" content="website" />
<meta property="og:url" content="<?=$urlpage?>." />
<meta property="og:description" content="<?=$description?>." />
<meta property="og:site_name" content="<?=$host?>." />
<meta name="Rating" content="General">
<meta name="robots" content="ALL">
<link rel="canonical" href="<?php echo $urlpage;?>"/>
<link rel="shortcut icon" href="<?php echo $baseurl;?>/favicon.ico" type="image/x-icon">
<link rel="icon" href="<?php echo $baseurl;?>/favicon.ico" type="image/x-icon">

html, body
{
 font-family:Arial, Helvetica, sans-serif;
 height:100%;
 margin:0 auto;
 padding:0;
 text-align:center;
 width:100%;
}

#main
{
  /* here we are styling the element on the web page that has  id="main" */
 border:1px solid #eee;
 box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
 margin:0 auto;
 padding:5px 15px;
 text-align:center;
 width:800px;
}

p
{
 text-align:left;
}

/* 
  @media all and  command tells the web browser to change the layout and/or appearance 
  when the width of the web browser drops to 800px or less. The purpose of this is to make 
  the web page layout appear nice even on smaller devices like cell phones and tablets 
*/
@media all and (max-width:800px)
{
  #main
  {
    width:90%;
  }
}
</style>

</head>
<body>
<div id="main">

<p id="pclick">This is sample text in a paragraph. For a simple example of javascript, click anywhere on this paragraph text.</p>

</div>
</body>

source code home