Simple website templates for beginners (with Examples)

Today, We want to share with you basic html template.In this post we will show you basic html template, hear for html starter template we will give you demo and example for implement.In this post, we will learn about PHP Send Beautiful HTML Email Templates with an example.

simple website templates for beginners

Basic HTML5 Template

Example 1:

<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset="UTF-8"/>
		<title>Free download Pakainfo.com</title>
		<link rel="stylesheet" href="./css/2-Creating a Basic Template.css"/>
		<script src="./js/script.js"></script>
	</head>
	<body>
		I love You My Sweet Hart.
	</body>
</html>

HTML Templates — View Source Code

Example 2: Source code:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>3 Column Layout</title>
	<style type="text/css">

		body {
			min-width: 630px;
		}

		#container {
			padding-left: 200px;
			padding-right: 190px;
		}
		
		#container .column {
			position: relative;
			float: left;
		}
		
		#center {
			padding: 10px 20px;
			width: 100%;
		}
		
		#left {
			width: 180px;
			padding: 0 10px;
			right: 240px;
			margin-left: -100%;
		}
		
		#right {
			width: 130px;
			padding: 0 10px;
			margin-right: -100%;
		}
		
		#block-ft {
			clear: both;
		}
		
		* html #left {
			left: 150px;
		}

		#container {
			overflow: hidden;
		}

		#container .column {
			padding-bottom: 1001em;
			margin-bottom: -1000em;
		}

		* html body {
			overflow: hidden;
		}
		
		* html #block-ft-wrapper {
			float: left;
			position: relative;
			width: 100%;
			padding-bottom: 10010px;
			margin-bottom: -10000px;
			background: #fff;
		}

		body {
			margin: 0;
			padding: 0;
			font-family:Sans-serif;
			line-height: 1.5em;
		}
		
		p {
			color: #555;
		}

		nav ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		
		nav ul a {
			color: darkgreen;
			text-decoration: none;
		}

		#header, #block-ft {
			font-size: large;
			padding: 0.3em;
			background: #BCCE98;
		}

		#left {
			background: #DAE9BC;
		}
		
		#right {
			background: #F7FDEB;
		}

		#center {
			background: #fff;
		}

		#container .column {
			padding-top: 1em;
		}
		
	</style>
	
	<script type="text/javascript">
		var bodyText=["Insurance", "Loans", "Mortgage", "Attorney", "Lawyer", "Donate", "<h3>Conference Call</h3><p>A conference call is a telephone call in which someone talks to several people at the same time.</p>"]
		function generateText(sentenceCount){
			for (var i=0; i<sentenceCount; i++)
			document.write(bodyText[Math.floor(Math.random()*7)]+" ")
		}
	</script>	
</head>

<body>

	<header id="header"><p>Welcome To...</p></header>

	<div id="container">

		<main id="center" class="column">
			<article>
			
				<h2>Heading</h2>
				<p><script>generateText(50)</script></p>
			
			</article>								
		</main>

		<nav id="left" class="column">
			<h3>Left heading</h3>
			<ul>
				<li><a href="#">Product 1</a></li>
				<li><a href="#">Product 2</a></li>
				<li><a href="#">Product 3</a></li>
				<li><a href="#">Product 4</a></li>
				<li><a href="#">Product 5</a></li>
			</ul>
			<h3>Left heading</h3>
			<ul>
				<li><a href="#">Category 1</a></li>
				<li><a href="#">Category 2</a></li>
				<li><a href="#">Category 3</a></li>
				<li><a href="#">Category 4</a></li>
				<li><a href="#">Category 5</a></li>
			</ul>

		</nav>

		<div id="right" class="column">
			<h3>Right heading</h3>
			<p><script>generateText(1)</script></p>
		</div>

	</div>

	<div id="block-ft-wrapper">
		<footer id="block-ft"><p>Footer...</p></footer>
	</div>

</body>

</html>

I hope you get an idea about html template free download.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.