Make a website from scratch.
By Fixxxer
Before you start - know this:
There are a few things you need to know when you make a website from scratch. I will write this hub on the assumption that you have none or very little html/css knowledge.
Html Editor:
There are quite a lot of editors out there. Some of the basic ones are free, and the rest, especially the high-end ones like Dreamweaver, you have to buy. (I personally use Dreamweaver myself) You can, however, use a simple text editor like Notepad in Windows.
Graphics Applications
Here, again, there are quite a few. Free ones include programs like Gimp. High end ones will be Photoshop, Imageready, and Fireworks.
In the beginning...:
Firstly, you have to specify your <!Doctype> for the page. The <!DOCTYPE> declaration is a top-level tag-like reference known as a Public Text Identifier. It is used to activate, or switch between browser modes. The <!DOCTYPE> declaration is the very first thing in your document, before the <html> tag. This tag tells the browser which HTML or XHTML specification the document uses. Without a doctype declaration in the beginning of a html document, the browser will run in Quirks mode, and not in Standards mode. It is also one of the few tags without a closing tag. You can read more on Doctypes here.
All html pages have the same basic layout: a head and body section, inside the html tags. So, using notepad, you'll start by putting in this:
<html>
<head>
</head>
<body>
</body>
</html>
The first tag will be the opening tag (ie <head> | </body>) and the second one is the closing tag (ie </head> | </body> etc.
<head>
This tag is used for non-visual content, like your meta tags, java script, and even CSS. Basicly, all the important stuff that your visitors won't see. Meta tags include you Title tag, Keyword tag, Description tag, and instructions to crawlers.
<body>
All the content of your website, the part which your visitors WILL see, goes into this section. If you are doing your site in Notepad, you will also do your layout in this tag, together with your content. If you use software like Dreamweaver, it will put all the content in this tag automatically.
Believe it or not - your basic html page is done.
Layout
To get some structure to your site, you would obviously like some sort of layout for it. Explaining how to do a layout in html is a topic for a whole series of hubs, so I will instead just paste the html code for it. You can then use it as is.
<body>
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">Banner goes here </td>
</tr>
<tr>
<td colspan="3"><div align="center">Menu goes here </div></td>
</tr>
<tr>
<td width="65%"><div align="center">Content goes here </div></td>
<td width="5%"> </td>
<td width="30%"><div align="center">Images, etc goes here </div></td>
</tr>
<tr>
<td colspan="3"><div align="center">Copyright / Footer goes here </div></td>
</tr>
</table>
</body>
This is a very basic layout, but should get you started. It is a fluid (ie, it will resize with your browser) layout, 960pixels wide. You have a cell at the top for the banner. Below that one for the menu. Below that, you have 3 cells: a 65% width one for the content, a 5% width one used as a spacer, and another 30% width cell that you can use for images, or other content. To make your layout more flexible, you can copy / paste this section of the code and change the % to change how it willl look.
Lastly, you have a cell used for your Copyright info / footer message.
Coding continued:
To recap - this is what you should have in front of you in terms of code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page Title</title>
</head>
<body>
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">Banner goes here </td>
</tr>
<tr>
<td colspan="3"><div align="center">Menu goes here </div></td>
</tr>
<tr>
<td width="65%"><div align="center">Content goes here </div></td>
<td width="5%"> </td>
<td width="30%"><div align="center">Images, etc goes here </div></td>
</tr>
<tr>
<td colspan="3"><div align="center">Copyright / Footer goes here </div></td>
</tr>
</table>
</body>
</html>
Hopefully this will get you started on designing your first web page. Feel free to ask if there is anything you need clarified.
Recommended Software to use.
Click thumbnail to view full-size
Comments
No comments yet.
