How to Code a website – part 1

by Fire G on Jul. 23rd in Coding, HTML/Javascript, Screencasts, Tutorial with no comments.

This is the first video tutorial here at Fire Studios! This video will show you how I go through and do the skeletal coding for my website templates. This is part 1 in a 3 part series, so make sure you go to the CSS category to see part 2.

Watch the Video!

Video notes:

This tutorial shows you how to take a template from it's image form to it beginning HTML form.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
	<title>Geniva Requiem</title>

	<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>

<body>
	<div id="header">
		<div id="logo">
			<a href="#" title="Genieva Requiem"><h1>Genieva Requiem</h1></a>
		</div>

		<div id="slogan">
			<a href="#" title="Another free template form Fire Studios"><h4>Another free template from Fire Studios</h4></a>
		</div>

		<div id="nav">
			<ul>
				<li><a href="#" title="Templates">Templates</a></li>
				<li><a href="#" title="Graphics">Graphics</a></li>
				<li><a href="#" title="Tutorials">Tutorials</a></li>
				<li><a href="#" title="Members">Members</a></li>
			</ul>
		</div>
	</div>

	<div id="sidebar">
		<div class="box">
			<h2>Side-bar</h2>
			<p>This is some random content, since I can't be bothered to read and re-type the content from the preview image.</p>
		</div>

		<div class="box">
			<h2>Lists</h2>
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
			</ul>
			<ol>
				<li>Item 1</li>
				<li>Item 2</li>
			</ol>
		</div>
	</div>

	<div id="main">
		<div id="content">
			<h3>Heading 1</h3>
			<p>And we'lll some random content so that we can see how it looks.  And we'lll some random content so that we can see how it looks.  And we'lll some random content so that we can see how it looks.  And we'lll some random content so that we can see how it looks.  And we'lll some random content so that we can see how it looks.  And we'lll some random content so that we can see how it looks.</p>

			<h3>Heading 1</h3>
			<p>And we'lll some random content so that we can see how it looks.  And we'lll some random content so that we can see how it looks.  And we'lll some random content so that we can see how it looks.  And we'lll some random content so that we can see how it looks.  And we'lll some random content so that we can see how it looks.  And we'lll some random content so that we can see how it looks.</p>
		</div>
	</div>

	<div id="footer">
		<p>Genieva Requiem copyright © 2008 <a href="http://fire-studios.com" title="Fire Studios">Fire Studios</a> <br />
		Designed by: <a href="http://fire-studios.com" title="Fire Studios">Fire Studios</a></p>
	</div>
</body>

</html>

Documentation to Fire G. All rights © reserved. This may not be duplicated or reproduced without the consent of the owner.

About the author: Fire G

Hey, I'm the founder of Fire Studios, and thus, have my hands in everything that goes on here at FS. I manage the content, moderate the comments, design everything, code everything, provides a lot of articles, host the official podcast FS-Air, and run/manage most of the other sites in the FI family. Often times I'll come to be working on so many things that I hardly accomplish much, but that's what makes me who I am.