Page Markup template - HTML 4

Listing includes the markup for the category page.
Listing : Category Page Template

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Your Title Here</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” />
<!-- External stylesheet for the menu system -->
<link rel=”stylesheet” href=”menu.css” />
<!-- Stylesheet for this page -->
<style type=”text/css”>
body {color: #000; background-color: #FFF;}
body, p {font-family: tahoma, verdana, arial; font-size: 12px;}
hr {color: #369; height: 1px}
h1 {font: 24px “trebuchet ms”, verdana, arial, helvetica, geneva,
sans-serif;}
h2 {margin-bottom: 0px; margin-top: 0px; font-size: 18px; color:
#DBEAF5;}
.darkline {background: #4682B4;}
.cright {font-family: Tahoma, Verdana, sans-serif; font-size: 12px;
color: #FFF; background: #4682B4; text-align: right;}
body,p {font: 11px/14px verdana, geneva, arial, helvetica,
sans-serif;}
.style1 {font-size: 14px;}
</style>
</head>
<body bgcolor=”#ffffff”>
<!-- External script references for the menu system -->
<script language=”JavaScript” src=”menu.js” type=”text/javascript”></script>
<script language=”JavaScript” src=”menu_items.js”
type=”text/javascript”></script>
<script language=”JavaScript” src=”menu_tpl.js” type=”text/javascript”></script>
<script language=”JavaScript” type=”text/javascript”>
<!--//
new menu (MENU_ITEMS, MENU_POS, MENU_STYLES);
//-->
</script>
<div style=”height: 50px;”>&nbsp;</div>
<!-- Enter your logo image and category headline below. -->
<h1 align=”left”><img src=”yourlogo.gif” alt=”Alternative text” hspace=”10”
align=”middle” />Your Headline </h1>
<p align=”left” class=”style1”>
<!-- Replace this comment with a description of the category. -->
</p>
<p align=”left” class=”yourstyle”>&nbsp;</p>
<table width=”642” height=”352” border=”0” align=”left”>
<tr>
<!-- First item picture -->
<td width=”300” height=”204”><img src=”item1small.jpg”
alt=”Alternative text” align=”bottom” /></td>
<td width=”28”>&nbsp;</td>
<!-- Second item picture -->
<td width=”300”><img src=”item2small.jpg” alt=”Alternative text”
align=”bottom” /></td>
</tr>
<tr>
<td height=”35”><h1 align=”center”>Item 1 Name</h1>
<h1 align=”center”>Item 1 price</h1>
<p align=”left”>Item 1 short description.</p></td>
<td>&nbsp;</td>
<td height=”35”>
<h1 align=”center”>Item 2 Name</h1>
<h1 align=”center”>Item 2 price</h1>
<p align=”left”>Item 2 short description.</p></td>
</tr>
</table>
<p>&nbsp;</p>
</body>
</html>

Listing includes the markup for the detail page template.

Listing : Detail Page Template

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Your Page Title Here</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” />
<!-- External stylesheet for the menu system -->
<link rel=”stylesheet” href=”menu.css” />
<!-- Stylesheet for this page -->
<style type=”text/css”>
body {color: #000; background-color: #FFF;}
body, p {font-family: tahoma, verdana, arial; font-size: 12px;}
hr {color: #369; height: 1px;}
h1 {font: 24px “trebuchet ms”, verdana, arial, helvetica, geneva,
sans-serif;}
h2 { margin-bottom: 0px; margin-top: 0px; font-size: 18px; color:
#DBEAF5;}
.darkline { background: #4682B4;}
.cright {font-family: Tahoma, Verdana, sans-serif; font-size: 12px;
color: #FFF; background: #4682B4; text-align: right;}
body,p {font: 11px/14px verdana, geneva, arial, helvetica, sans-serif;}
.style1 {font-size: 14px;}
</style>
</head>
<body bgcolor=”#ffffff”>
<!-- External script references for the menu system -->
<script language=”JavaScript” src=”menu.js” type=”text/javascript”></script>
<script language=”JavaScript” src=”menu_items.js”
type=”text/javascript”></script>
<script language=”JavaScript” src=”menu_tpl.js”
type=”text/javascript”></script>
<script language=”JavaScript” type=”text/javascript”>
<!--//
new menu (MENU_ITEMS, MENU_POS, MENU_STYLES);
//-->
</script>
<div style=”height: 50px;”>&nbsp;</div>
<h1 align=”left”>
<!-- Add your logo and headline below. -->
<img src=”yourlogo.gif” alt=”Alternative text” hspace=”10”
align=”middle” />Your Headline Here</h1>
<!-- Begin detail table -->
<table width=”604” height=”352” border=”0” align=”left”>
<tr>
<!-- Add your item’s detail picture here. -->
<td width=”598” height=”204”><div align=”center”><img src=”item-pic.jpg”
alt=”Alternative text” align=”top” /></div></td>
</tr>
<tr>
<td height=”35”><p align=”left”>
<!-- Replace this comment with your item description. -->
</p>
<h1 align=”center”>Replace with your item’s price.</h1>
<h1 align=”center”>
<!-- Begin PayPal Add to Cart button code -->
<!-- Replace this comment with the pasted Add to Cart button code. -->
<!-- End PayPal Add to Cart button code -->
<!-- Begin PayPal View Cart button code -->
<!-- Replace this comment with the pasted View Cart button code. -->
<!-- End PayPal View Cart button code -->
</h1></td>
</tr>
</table>
<p>&nbsp;</p>
</body>
</html>

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 4 Topics