intelon67
08-26-2009, 07:17 PM
Ok in this tut, I will be teaching you how to setup a website coded in HTML.
What you'll need:
Notepad.
Basic knowledge of HTML.
Patience.
A website host (Links to them will be provided)
Ok, Lets get started. First your going to need to download this simple Template:
http://www.freelayouts.com/download/Corporate-Sleek-Template
After you download it, Extract the files, open the folder called BusinessTemplate, then find index, right click it, and open it with notepad. It should look like this:
http://i279.photobucket.com/albums/kk137/intelon67/html.jpg
http://i279.photobucket.com/albums/kk137/intelon67/html2.jpg
If you need a more detailed explanation here you go:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>YOUR SITE NAME GOES HERE</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper"><div class="upperhead">
<div class="tel">Tel: 01875 340 573</div>
</div>
<div class="banner"><a href="#"><img src="images/logo_10.jpg" alt="free css template" width="279" height="73" border="0" /></a></div>
<div class="underbanner">
<label>
<input name="textfield" type="text" class="input" value="Search" />
</label>
<label>
<input type="submit" name="Submit" class="button" value="GO" ></input>
</label>
</div>
<div class="content">
<div class="leftcolumn"><div id="navvy">
<ul id="navvylist">
<li><a href="#">Homepage</a></li>
<li><a href="#">PUT WHAT YOU WANT HERE</a></li>
<li><a href="#">PUT WHAT YOU WANT HERE</a></li>
<li><a href="#">PUT WHAT YOU WANT HERE</a></li>
<li><a href="#">PUT WHAT YOU WANT HERE </a></li>
</ul>
</div>
<div class="box">CONTENT THAT WILL BE DISPLAYED IN THE BOX ON THE LEFT</div>
</div>
<div class="rightcolumn">
<h2><a href="#">HEADER 1</a></h2>
<div class="underbanner2">AREA AND TIME IT WAS POSTED IN.</div>
<div class="article">
<p>HEADER 1 CONTENT</p>
<p>MORE HEADER 1 CONTENT</p>
</div>
<h2><a href="#">HEADER 2</a></h2>
<div class="underbanner2">AREA AND TIME IT WAS POSTED IN.</div>
<div class="article">
<p>HEADER 2 CONTENT</p>
<p>MORE HEADER 2 CONTENT</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="footer">LAYOUT COPYRIGHT GOES HERE</div>
</div>
</body>
</html>
Ok, Now that you know how do edit that, It's time to set up a host.
Here are some links to good hosting sites,
www.bighosted.com
www.bravenet.com
www.free-webhosts.com
www.0catch.com
www.blackapplehost.com
www.007sites.com
www.topcities.com
When you setup a host, you have acess to your sites control panel. Depending on whcih host you use determines what kind of control panel you will have. Since I use bighosted I have a vistapanel. But if you use a site like bravenet, You use their version of a control panel.
Heres a picture of the Vistapanel:
http://i279.photobucket.com/albums/kk137/intelon67/html3.jpg
After that, Click on subdomains which is under domains.
http://i279.photobucket.com/albums/kk137/intelon67/html4.jpg
Choose your domain, and click create domain.
Ok, Continuing on, Go back to your cpanel and choose file manager under FTP Manager.
It should look like this:
http://i279.photobucket.com/albums/kk137/intelon67/html5-1.jpg
Click on what ever you named your site. It should be called Sitename.bighosted.com or what ever subdomain you chose.
After you get in there click on htdoc. htdoc is your root folder where ALL FILES ARE TO BE UPLOADED.
htdoc should look like this except with no files:
http://i279.photobucket.com/albums/kk137/intelon67/html6.jpg
When you click upload, go to your desktop or where ever you saved the extracted folder from the beginning of the tutorial, and upload index.html, style, and ALL the images in the images folder.
Once you have selected all the files, click the checkmark, then click the checkmark again, and then click the back arrow right next to it. Your htdoc should now have files uploaded in it. You may now proceed with editting the index.html. If you need help editting it, just check back to the code I posted for a more detailed explanation. Once you are happy with your changes click the button that looks like a floppy disk and proceed back to your htdoc folder. Now you can go visit your site! just go to the adress bar and put in www.sitename.thesubdomainyouchose.com (http://www.sitename.thesubdomainyouchose.com) If you left the sub domain as the default then it's just www.sitename.bighosted.com (http://www.sitename.bighosted.com).
I hope you enjoyed and hopefully learned something from this tutorial!
Also if you want another layout then go to http://www.freelayouts.com/websites/html-templates
Credits:
Me- For compiling this guide
Google- For giving e the links to the hosts
Freelayouts.com- For the layout.
Bighosted.com- For being an amazing host.
What you'll need:
Notepad.
Basic knowledge of HTML.
Patience.
A website host (Links to them will be provided)
Ok, Lets get started. First your going to need to download this simple Template:
http://www.freelayouts.com/download/Corporate-Sleek-Template
After you download it, Extract the files, open the folder called BusinessTemplate, then find index, right click it, and open it with notepad. It should look like this:
http://i279.photobucket.com/albums/kk137/intelon67/html.jpg
http://i279.photobucket.com/albums/kk137/intelon67/html2.jpg
If you need a more detailed explanation here you go:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>YOUR SITE NAME GOES HERE</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper"><div class="upperhead">
<div class="tel">Tel: 01875 340 573</div>
</div>
<div class="banner"><a href="#"><img src="images/logo_10.jpg" alt="free css template" width="279" height="73" border="0" /></a></div>
<div class="underbanner">
<label>
<input name="textfield" type="text" class="input" value="Search" />
</label>
<label>
<input type="submit" name="Submit" class="button" value="GO" ></input>
</label>
</div>
<div class="content">
<div class="leftcolumn"><div id="navvy">
<ul id="navvylist">
<li><a href="#">Homepage</a></li>
<li><a href="#">PUT WHAT YOU WANT HERE</a></li>
<li><a href="#">PUT WHAT YOU WANT HERE</a></li>
<li><a href="#">PUT WHAT YOU WANT HERE</a></li>
<li><a href="#">PUT WHAT YOU WANT HERE </a></li>
</ul>
</div>
<div class="box">CONTENT THAT WILL BE DISPLAYED IN THE BOX ON THE LEFT</div>
</div>
<div class="rightcolumn">
<h2><a href="#">HEADER 1</a></h2>
<div class="underbanner2">AREA AND TIME IT WAS POSTED IN.</div>
<div class="article">
<p>HEADER 1 CONTENT</p>
<p>MORE HEADER 1 CONTENT</p>
</div>
<h2><a href="#">HEADER 2</a></h2>
<div class="underbanner2">AREA AND TIME IT WAS POSTED IN.</div>
<div class="article">
<p>HEADER 2 CONTENT</p>
<p>MORE HEADER 2 CONTENT</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="footer">LAYOUT COPYRIGHT GOES HERE</div>
</div>
</body>
</html>
Ok, Now that you know how do edit that, It's time to set up a host.
Here are some links to good hosting sites,
www.bighosted.com
www.bravenet.com
www.free-webhosts.com
www.0catch.com
www.blackapplehost.com
www.007sites.com
www.topcities.com
When you setup a host, you have acess to your sites control panel. Depending on whcih host you use determines what kind of control panel you will have. Since I use bighosted I have a vistapanel. But if you use a site like bravenet, You use their version of a control panel.
Heres a picture of the Vistapanel:
http://i279.photobucket.com/albums/kk137/intelon67/html3.jpg
After that, Click on subdomains which is under domains.
http://i279.photobucket.com/albums/kk137/intelon67/html4.jpg
Choose your domain, and click create domain.
Ok, Continuing on, Go back to your cpanel and choose file manager under FTP Manager.
It should look like this:
http://i279.photobucket.com/albums/kk137/intelon67/html5-1.jpg
Click on what ever you named your site. It should be called Sitename.bighosted.com or what ever subdomain you chose.
After you get in there click on htdoc. htdoc is your root folder where ALL FILES ARE TO BE UPLOADED.
htdoc should look like this except with no files:
http://i279.photobucket.com/albums/kk137/intelon67/html6.jpg
When you click upload, go to your desktop or where ever you saved the extracted folder from the beginning of the tutorial, and upload index.html, style, and ALL the images in the images folder.
Once you have selected all the files, click the checkmark, then click the checkmark again, and then click the back arrow right next to it. Your htdoc should now have files uploaded in it. You may now proceed with editting the index.html. If you need help editting it, just check back to the code I posted for a more detailed explanation. Once you are happy with your changes click the button that looks like a floppy disk and proceed back to your htdoc folder. Now you can go visit your site! just go to the adress bar and put in www.sitename.thesubdomainyouchose.com (http://www.sitename.thesubdomainyouchose.com) If you left the sub domain as the default then it's just www.sitename.bighosted.com (http://www.sitename.bighosted.com).
I hope you enjoyed and hopefully learned something from this tutorial!
Also if you want another layout then go to http://www.freelayouts.com/websites/html-templates
Credits:
Me- For compiling this guide
Google- For giving e the links to the hosts
Freelayouts.com- For the layout.
Bighosted.com- For being an amazing host.