Navigation: Home Tag, You're it. Basic Markup Navigation, Anchors & Links Graphical Elements What Next?
You can create an HTML file with any old text editor. Just make sure to save it with an .htm or .html extension. Your browser will try to open it. Just cut and paste the outline from the Tags section into Notepad and save it as mypage.htm and double click on it. Look at that! You're a web master.
Well, maybe not quite, and some of the tools mentioned below make the process go a little easier. If you're in a big hurry, try one of the WYSIWYG editors. You can even use MS Word, but you'll have less control and understanding. Most of the tools we recommend are free or at least have free or demo versions, so don't be afraid to experiment a little to find what you like.
Many Internet Service Providers give a limited site creation or hosting capability to their customers. This can be an excellent free way to get started and may be all you really need. Check with your ISP to see what you have available. Other hosting plans are available for prices ranging from free ad supported sites, $5 to $20 per month or so for a basic site on up to whatever you might need. Most sites offer a better deal if you pay a whole year at once. The variations in price are driven by the amount of space you have for your files and the amount of bandwidth or connection time your account is allowed. If you are interested in selling things on your site be sure to check out the business services that they offer, and you may want to check on setting up a Paypal account to make it easy for your customers to send you money.
You may also want to get your own domain or site name. Aplus domain name service or one of many other services can provide you with your own domain name such as http://www.candp-ent.com/ or http://gskearney.com for prices ranging from $5 to $10 per year. Some hosts will also provide this service as part of the hosting package or offer you a domain name on their own servers as Tripod does.
Blogger is quick way to get your feet wet but very limited. This can also be added to an existing site to allow reader feedback or quick additions. Gary has a simple blog on his site, and here's a quick tour. If all you want is a simple easy to maintain site to keep your readers aware of what you are up to, this might be the best answer; however, there's no provision for putting your stories or other material into a separate section where visitors can read or download them.
Tripod is one of many free providers who add their advertising to your site to pay expenses. Tripod offers:There are a number of these free hosting providers, but they do vary in quality and in the services offered, so you'll need to investigate. I did set up a quick site here, so you can see what they look like. It took about an hour all told. You might expect to take somewhat longer, since I've used such sites in the past and knew a bit about what I was doing. They provide you with the tools you need to set up your page as well. As you can see if you follow the Writer's Web or Writer's Web 2 links on that site or from here, I've copied part of the first page of this document to that site. You should use cut and paste to copy just the body of an HTML document to the Tripod site or the ad placement won't work properly. The picture below shows me using FTP Commander, a free FTP client to transfer files to my Tripod account. I need to put the graphics files in the same directory as the HTML to make things work properly here. I could also use the tools provided by Tripod, but I wanted to show how to use a separate FTP client, which you'll need with some of the other hosting options.
| Alternative Browsers & Editors | |
|---|---|
| Name | Comments |
 |
Mozilla is a completely free tabbed browser that also includes a mail and newsgroup client, a chat client, and HTML composition software. The Firefox browser is also available here. We strongly recommend that you install this browser since the Netscape/Mozilla/Firefox family of browsers are used by a significant percentage of Internet users. The Composer module of Mozilla can be used for HTML creation, but keep in mind that the WYSIWYG editor will use inline STYLE markup rather than the HTML 4.01 tags that we have explained here. You can use the code editor in the last tab to enter code directly. |
 |
This is another alternative browser, which is available in both paid and unpaid versions. The $39 paid version eliminates the ads used to support the free version. |
| Crimson Editor | **** Chris likes this one. It supports color coded HTML, and has a number of features that make code maintenance easier. |
| Note Tab Lite | **** Gary uses the pro version, which costs $19.95 and adds color coding for tags. The various templates that come with the program make entering tags much less challenging. |
| FTP Commander | You may need an FTP program to move your files onto your host computer. This one is free, relatively easy to use and quick. |
| Core FTP LE | Another free FTP program. |
| HTML Tidy | This is a program that can be used to tidy up and check your HTML code. |
| W3C Markup Validator | The World Wide Web Consortium's online code validator. |
| Coffee Cup HTML Editor | $49.95 Coffeecup offers a whole suite of inexpensive tools, some free. They also have an agreement with a hosting provider, so you can get all their software free if you sign up with them. |
| 1-Site | A free WYSIWIG Editor and site creator. |
| MS Frontpage | $199 Microsoft's entry into the site creation category. |
| Amaya | The World Wide Web Consortium's free browser and code editor. Somewhat difficult to use but free. |
| Dreamweaver | $399 Best of the best. Free demo available. |
| Image Editors: | |
| Name | Comments |
| Irfan View | **** A free graphics viewer with some limited image manipulation capability. |
| Paint Shop Pro | **** $120 Gary's preferred editor. includes Animation Shop for animated GIFs. |
| Adobe Photoshop Elements | **** $90 Consider the Photoshop Elements + Premier Elements package if you want to add video. |
| GIF Works | ** This online service requires that Java be enabled on your computer. Suitable for limited GIF image creation. |
O'Reilly O'Reilly prints the best computer science books, but their offerings tend to be too advanced for most beginners. They do have some very nice handbooks and reference titles.
Amazon.com has a lot of books on Web design and creation. These are some of my favorites. You might also find the O'Reilly books at Amazon.
We all get too much spam these days and one of the ways that spammers get Web addresses is by harvesting them from Web pages. So if you can't put your address on the Web page, how do you let your readers contact you? We recommend two solutions: 1) Use a throw away free address from MSN or Yahoo or any other site that provides free addresses, 2) Disguise your address. The site Disguise.html will replace the characters in your address by their ASCII character equivalents. To confuse the spambots, you cut and paste this string into any mailto: URL where you'd normally put your address.
Here's an example: This is a sample of an obscured mailto link, note that it looks and behaves just like a normal mailto link to the user. If you click on the link, it will open your mail program with the phony address name@domain.com filled in. Please, don't send any mail to the phony address.
The source looks like this:
<a href="mailto: name@domain.com"><b>This</b></a>
n represents the character n because ASCII 110 corresponds to n, etc...
The technique should be used for all mailto links as spam harvesters will find them; but it's not perfect; so if you'd like to be even more secure, do a Google search to find more sophisticated solutions. The problem is that sophisticated solutions are more difficult for you and your readers.
Once you think you are ready for more advanced techiniques and features, you can start looking into scripting. Before you groan and say "I don't want to learn to program.", remember that there are MANY sites out with "drop-in" code just waiting for you. Drop-in code is code ready for you to add to your site without you knowing the language (Usually Java or Java Script) it was written in.
Below you will find some examples.
This free script provided by JavaScript Kit
There are a number of scripting languages available to add motion and interactivity to your site. The site above offers many free examples. You can view the inline script source from the view menu of your browser. The items you can change in this script are shown in red in the code snippet below:
| Code | Comment |
|---|---|
|
<H1 align="center"> |
You can use any of the standard text tags and attributes here to control the appearance of the banner. |
|
. . . |
Code not shown. |
|
var message="Welcome to the Writer's Web!" |
The message to display |
|
var neonbasecolor="white" |
First color you can change to suit. |
|
var neontextcolor="red" |
Color for the first to change to. |
|
var flashspeed=100 //in milliseconds |
Speed. You probably don't need to change this. |
|
. . . |
More code you don't need to mess with. |
|
</H1> |
If you change the first tag, don't forget to change the closing tag, so they match. |
There are a number of scripting languages available to add motion and interactivity to your site. The site above offers many free examples. You can view the inline script source from the view menu of your browser.
There are many free scripts available and various sites for learning the tricks. They can add a lot to your site, but they can also be huge time wasters, so I recommend restraint. They also tend to distract from your message. One site that has free scripts available is JavaScript Kit
For several reasons the people who administer the Web decided that the kind of markup that we show here failed to meet the needs of many Internet designers. They decided to solve the problem by separating structural properties such as headings and paragraphs from display properties such as font, color and emphasis. The changes do allow a greater degree of creative freedom in the appearance of the final page, but they also introduces a degree of complexity. <b>This is Bold</b> might become: <span style="font-weight: bold;">This is Bold</span> Styles are generally collected into separate files known as style sheets. They are called Cascading Style Sheets because you can link in more than one or use inline style tags modify the existing styles to create whatever effect you want. This does have the advantage of keeping most of the appearance elements of a website in one file, so you can change the look of the whole site by modifying that one file. We think it's easiest to learn at least a little of the old fashioned way first.
Frames let you display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The most common use is for site navigation frames since you can control the content of one frame with code in another frame. This means that you need not duplicate the navigation elements on each page of your site. Frames are also typically used on commercial sites to display advertising banners.
The disadvantages of using frames are that you must keep track of more HTML documents, it makes things more complicated, and it's difficult to print the entire page. Also, some browsers may not be able to display frames, so you need to create a separate way for those users to view your site. Generally this means creating at least one new page.
The W3C and previously the IETF created the HTML Standard but standards need to be embodied in software. The "Browser Wars" between Netscape and Microsoft led to both parties competitively adding features without clearing them with the standards organizations first. This led to problems and for some time you almost needed to design separate webpages for each browser. Things have improved, but the conflicting demands for creative flexibility and simplicity, still present problems for the beginner.
Don't try to do everything at once. Learn how to create basic HTML files and get them to show up in your browser first. Experiment with adding linked files until you have something that looks like what you want on your own computer. When in doubt it's usually better to take the simplest approach, since it is most like to be compatible with other parts of the Internet.
When adding large amounts of text to a site, it's best to create a page structure similar to a book or magazine and size the pages to a comfortable screen size. You can add navigation bars at the bottom and top as we've done or use some other method.
After you have something that looks good on your computer, learn how to upload it to your host's servers. Again start small. This part may be frustrating as you learn to use new software, enter all the addresses and passwords correctly and deal with various inconsistencies in the way things all fit together. An experienced friend can be a big help. Humans understand computers, but getting computers to understand humans is an all day job. Drugs other than aspirin are rarely effective, nor is applying large blunt objects to the keyboard or monitor.
Good luck, we hope you avoid all the pitfalls that we managed to stumble over on our journey onto the Web.
Created on ... January 24, 2005