My book, Digital Evangelism: You Can Do It, Too!, also covers this topic and many more. Read all about it and get your own copy from http://books.parsonplace.com/.
Following is a list of steps to use in creating a very basic web site. It contains instructions for including graphic images, colorful backgrounds, and web page formatting. To create a much more complex site, consult a manual for writing Hypertext Markup Language (HTML). You should be able to find one in a computer book store or one of the popular book store chains. You can also read it online or download the complete manual for free at the World Wide Web Consortium (W3C).
Obtaining a good HTML editor program can also reduce the time and trouble it takes to write/edit web pages. If you're cheap and impatient (like me), there are several freeware (or already paid for) editors right at your fingertips without having to sift through enormous web lists to find and download them. You can use Windows Notepad or Wordpad at no extra cost, since both usually come bundled with Windows anyway. In Wordpad or any other word processing program, however, be sure to select the "Text Document" option (or something like it) on the "Save as type" box in the Save dialog. Also, remember to add the .HTM or .HTML extension on the file name before you click the Save button, no matter which program you use. Web files MUST be in ASCII (plain text) format and have the .HTM or .HTML extension, or web browsers simply can't read them.
Some more complex word processing software, such as MS Word, also allow you to save files in HTML format. I've used this approach when I needed to convert a document file into HTML format and didn't want to spend a lot of time re-formatting all my text to certain font sizes, italics, bold, different colors, etc. The major drawback to this option, however, is that the word processor adds an enormous amount of coding at the beginning of your document which, though invisible to you in the web browser, will dampen your chances of rising very high in the search engines because their index spiders have to sift through all this extraneous text to get to your real content. Nevertheless, for the beginner, this is a very quick and easy way to get your information online in a hurry. Check the File menu on your word processor and/or read the Help files to learn whether your word processing software offers that option.
Netscape Communicator comes bundled with a handy HTML editor, too, called Composer. It's an excellent, user-friendly program, but I recommend a freeware version of HTML Kit or AceHTML. However, to use these does require a working knowledge of HTML, so you'll definitely need that manual to instruct you on the finer points of HTML encoding as well as to guide you through all the new innovations of HTML editing and web design. If you want to use either of those freeware programs I've recommended, you can download whatever you need in a zip file right here, right now. You'll need WinZip, or another decompression utility, to unzip the file. If you don't already have one, you can download an evaluation version of WinZip for FREE from their web site. It may take several minutes, depending on the speed of your modem and/or Internet connection. I also have some other freeware zipping/unzipping utilities available for download from my software collection page referenced above.
Once you've downloaded and installed your HTML editor, you're ready to get started. Now, here are the steps for creating a basic web site.
1. Using either an HTML editor or a common ASCII text word processor program, such as Windows Notepad, create a new document. Copy/type the following template directly into the document. Some HTML editors will create this template (or a similar one) for you when you choose to create a New file from the File menu.
The <TITLE> tag (any text inside the < > brackets is called a tag) is whatever you choose to call your web page. It's the text you read on the title bar of all your open windows, and it's usually the same line you use as the header/title of your web page.
2. Once you type in your HTML template as shown in #1 above, begin typing in the text of your document between the <BODY> and </BODY> tags. NOTE: All end tags must include the forward slash just inside the opening bracket and before the tag identifier. It doesn't matter whether you use upper or lower case letters in tags, but I find that upper case is easier to find/read for later editing. To change font sizes within your document, choose either of <H1> through <H6> headlines. <H1> is the largest, and <H6> is the smallest. It's a good idea to use <H1> or <H2> as your headline font size, leaving <H3> for lesser headings within your document. To center your headline/title, use the <CENTER> and </CENTER> tags. Just be sure to place all your text BETWEEN the appropriate beginning and ending tags to properly format it for web browsers. Since web browsers don't recognize carriage returns within a word processor document, you must use either the <BR> line break or <P> paragraph tag. The <BR> tag ends a line exactly where you place it. The <P> tag inserts both a line break and a blank line.
3. Once you've typed your document, you may want to include some graphics to enhance its appearance. To add graphics to your web page, you'll first need graphics converted into either the .GIF or .JPG formats. Otherwise, web browsers won't be able to display them. You can covert any graphical file format into one of these two formats easily with a graphics editor. Again, you can download one of these for free from my software collection page which I have already mentioned. Once you have your graphics, choose where you want to insert them in your document, then type in the following HTML code at precisely that point: <IMG SRC="graphicfilename.gif"> Of course, you use the actual graphic filename in place of the placeholder I used here. To add a background, which is really just a seemlessly tiled graphic, you'll need either a background image someone else created or one you created yourself. Next, type in the following HTML code next to your opening <BODY> tag: <BODY BACKGROUND="backgroundfilename.gif"> in which backgroundfilename.gif is the name of the background graphic. For example, <BODY BACKGROUND="clouds.gif"> NOTE: Make sure you identify the correct directory reference where you put your graphic files, or put them in the same directory with your web documents so you won't need a directory reference, else the browser can't access and display them. However, if you simply want a solid colored background just to add a splash of color, you can do that quickly and easily by typing in the following code as part of your opening BODY tag, much like the above code: <BODY BGCOLOR=#??????>, in which the question mark (?) is a placeholder for the particular alpha-numerical code for each variant color. You may do the same with your font colors by entering the following HTML code: <FONT COLOR=#??????>. For a list of all the available HTML colors for both fonts and backgrounds, go to the HTML Colors page. You may also use the hyperlink to it at the bottom of this page.
4. Now that you've written your web document and inserted into it the graphics where you wanted them, save your work. BE SURE to add the file extension .htm or .html, or else the web browser won't recognize it or open it as a web page.
5. The next step is to proof your web page BEFORE you upload it onto your web server. You can do this by opening your web browser without signing onto your server, then choosing File | Open File in Browser and selecting your web file from the directory where you saved it. Some HTML editors, like HTML Kit and AceHTML, have a special option for offline viewing and previewing of web pages. Check their menus and Help files for more information. If you find errors during your preview, or if you want to rearrange your graphics, switch back and forth between your browser and your web file, remembering to save your web file after each modification and then click on Reload in your browser to see your update(s).
6. When you're ready to upload your web file(s) onto your web server, contact your web server for instructions on how to upload files using File Transfer Protocol (FTP). Some web hosts, such as Angelfire, Tripod, and others, offer web-based uploading, which means you can upload your web files using a web site interface instead of an FTP program. However, once you configure your FTP program, such as WS_FTP, FTP Commander, AceFTP, etc., using an FTP program is by far the faster and better way to go. Once uploaded, you can access your web page by typing in its Uniform Resource Locator (URL). It will look something like this: http://domain.server.name/your_directory/webfilename.htm The domain.server.name is your web server; your_directory/ is the name of your personal directory created to store your web files; and the webfilename.htm is the web file you just created and uploaded.
7. For additional assistance, feel free to email me at firstname.lastname@example.org