Baby Steps: A complete guide to building a basic website. Baby Steps: A complete guide to building a basic website. by Dour
This guide aims to help you build your first website with minimal sweat, confusion, frustration, and headaches. If you have any questions or additions, please PM either ws_jessica or Dour in the forums.
THE BASICS
HTML is the name for the programming language used to code webpages. It's not complex, but it does take some learning. The beginning of this tutorial covers some basic information that will be the causes of 90% of a beginning webmasters errors. After that we dive into the fun part of building the site :)
Firstly: Newton's 3rd law also applies to .html
For every action there is an equal and opposite reaction. In HTML this translates to "Ya gotta close all yer tags!"
Tags are all the fun little bits of code that are inside < > symbols: like <i> <body> <a> etc. (There is a list of most commonly used tags at the bottom of this article). For ever <tag> you write, you must close the tag with a </tag>. The / inside the < > tells the browser that it's finished with <whatever was inside here>.
Secondly: Every .html document has the following 3 tags (and their respective closers)
this collection of tags makes up the barest, most unintersting skeleton of a webpage. It will appear as a white page.
| <html> | This is always first. ALWAYS. In the beginning. |
| <head> | This is always second, ALWAYS. below this is all the fun stuff that the browser needs to know, but isn't directly visible (as type) on the site. |
| </head> | this signals that we're done with the <head> and ready to get to the part of the website that people can actually see. |
| <body> | This is the beginning of the code that will translate to parts people can see. |
| </body> | This means we're done with the page. It is closely followed by ... |
| </html> | ABSOLUTE END. |
So obviously you would fill up the gaps between <head> </head> and the gaps between <body> and </body> with meaningful stuff (that will be covered later) but for now this is the basic of a webpage.
Ok, so we have that bit of basic information out of the way. This step by step tutorial is going to teach you how to use a WYSIWYG (What you see is what you get) editor. Knowing about html, head, and body tags will help you find errors if you have them later. The most common error is having other tags (to be explained later) in the wrong sections, or not closing a tag.
PART 1: YOUR STEED, MY LEIGE
You're going to need a WYSIWYG editor. There are a few free ones floating around the internet. There are also quite a few that you're going to have to shell out a few bucks to get your grubby fingers on. The basic principle behind them all is identical, though. So we'll start with the built in WYSIWYG editor that comes with Mozilla Suite: Composer (FYI this editor is identical to the Composer in Netscape).
This program is going to build your website for you, flawlessly, with you only having to insert code in a few choice places (optional) to get your site working and looking just the way you want it. In short, a WYSIWYG editor is worth it's gigibytes in gold.
If you don't already have Mozilla Suite please download it here
To find the editor, open Mozilla Browser (not the same as firefox, mind you) go to "Window" and select "Composer"
Opening Composer should give you something that looks like this (nevermind the colors, I have set advanced settings so it automatically opens a new page with the colors I use for my site, Doursim)
PART 2: MAKING IT MINE
Before you get excited, lets lay a good foundation for our site. On your desktop (or anywhere on your computer) create a new folder and name it your site name (right click, go to NEW > FOLDER). Inside the folder (we'll call mine MSS) create another new folder and call it images
This will help you stay organized, it will also greatly reduce the pain and suffering you must endure once it's time to upload your site to your host!
ok on with the tutorial
Go to Format > Page Colors and Background and lets give it a nice color scheme. As an example we'll use the colors from MSS.
It gives you a little popup that looks a little like this:
You'll see that you have a few options here. Click on the box next to "Normal text" to pull up the color rainbow thingy visible in this picture. You have the option of choosing one of the colors in the boxes, or typing in your own hex number for a custom color. In MSS's case the color of normal text is black, so either click on the black box, or type #000000 which is the hex number for black.
Repeat the steps for the links, choosing various colors for visited links. For MSS we use
#246049 for links
#246049 for active links
#033a25 for visited links
For background, we use #f0f0d8
and on the main page, we have a background image, which looks like this 
repeated over and over again. Use background images sparingly, and NEVER put text on top of them. This is a major internet faux pas.
When you're done hit OK to apply the changes.
After you're done setting the visible stuff, lets move onto the (nearly) invisible stuff. Go back to the Format > Page title and properties
That will give you a window that looks like this:
For TITLE: put the name of your website
For Author: put your name or internet handle (I would either write Kathleen or Dour)
For Description: you can leave this blank, but you want to write a short sentence about your site.
here are some examples:
INBEATZ.com: Free high quality clothes for your sim ladies. // Free sims 2 downloads.
Calalily Sims is a site which has beautiful skins and clothing, beautiful lots, and themed content including Aztec themes, fairy themes, and gorgeous content.
etc. Basically just say what the site is about, since this is what will show up under your sites name in most search engines.
Save to the folder you made (not in "images") as index.html