A way to get a Website published on the Web.

The basic steps to getting a page up and on the web.

Find the Tools.	Finding a HTML editor, a HTML code checker and a FTP uploading program
Design the page.	Use the HTML editor to make a nice looking page.
Adding Images	Notes on adding images to the page.
Publishing	Finding a place to publish the webpage.
Uploading	How to upload the page to the website location.

The first thing that you need to do is to get a set of tools for producing a webpage. There are a whole bunch of programs out there in webland (and possibly even on your system already) that will make parts of this job easy for you. Probably the easiest will be to use FrontPage (which was on my machine already) for producing the HTML. This program isn't too hard to work but it has a few difficulties in that it adds in some header info that makes the page less user friendly to non-Internet Explorer viewers of the pages along with the inability to show both the code and the page image at the same time. The adding of extra header info to a page I consider a basic no-no to being universally acceptable to all browsers that access the web. Another program which many may have is Microsoft Word (in the Office package) which can generate HTML coded pages but it has the FrontPage excess code problem a lot worse.

1. A HTML editor - Hippie. This program I got a while ago and it's shareware. I haven't registered it but it's not time limited but rather feature limited. It's nice because it shows both a code window where I am typing this in and a page window where I can see the results of what I have typed in. The menu system is nice in that all of the basic commands of the HTML code system are listed in menus so that you can quickly insert them in the coding page as a framework from where you fill in the rest so that I can hit a menu item and that proper code is entered in the code window and I merely do my typing into the code window like I am doing now. Some items like inserting an image come up with their own window so you can do a fair number of things to the image code before you insert it into the page.

   I don't know if Hippie is still available on the web but there are several other programs that work in a similar way and a search on the web for HTML editors will find one that you will probably be happy with.

2. A HTML code verifier - CSE Validator. This program is also a shareware program. It's limited to having 5 files open at a time but otherwise works quite well. One note is that this program slows down when forced to validate huge files but you're not going to be doing anything larger than 32K anyway as Hippie won't make a file that big. I'll also note that 32K is really a lot of text!
3. A FTP interface - MS-FTP. This is probably the most common of the FTP transfer interfaces. Once you have this program or another like it and the necessary name and password from the websupplier, you can post things to the webspace and actually put your work to the web so others can see it like you are seeing this. Most webspace suppliers will handle the communications through the FTP access and this is really the best way as it allows for full control over what the page looks like. Suppliers that want you to use an on the web page generator generally limit what you can do with the page. I personally have found them to be frustrating when trying to do anything other than a vacation picture type webpage.

The thing you need to do when designing a page is to provide several sections to the page. The top generally quickly tells the viewer where he is. This may mean a logo and/or a title of what the page is about and by. After this is the body of the page where the info you wish to show the viewer is done and finally, the tail where info on how to access the author, etc. can be placed. View a number of pages and you will quickly see pages that you like and those that you don't. When you find pages you like, look at the source code and see how they do what they do. One of the ways to learn how to do things in HTML is to look at the code and you can even save it onto your disk (images need to be saved separately but you usually don't need to save them to see what is going on with a page) and view with your HTML editor.
As the code goes, the first thing is to define the document as a HTML document. This is done by the <HTML> tag and it's closing tag </HTML>. When you do characters other than plain characters and a few punctuation marks, it's wise to use the special character codes rather than using the character itself. This is because there are a lot of characters other than the alphabet and numbers that mean special things to the HTML code. Note that when I did the < char, I actually didn't use that key on the keyboard but rather looked it up in the special character code list and that list actually put the string "&lt;". Look at the source code for what was done in this area of the page so you can further understand what is happening.
Another little note is that most browsers consider the space character in the text as a single space, no matter how many you end up using in reality in the source code. I have the habit from many years of typing to put two spaces after a period to before starting the next sentence as you can see from looking at the source code of this, or any other of my pages, at what actually got typed in. You will find this in the source code but it usually doesn't show up in the actual paragraph formatting. If you wish to do a bunch of spaces (remember that many character sets that are used are variable spaced characters so you don't want to do this for column formatting of the page!) you again need to use a special character string to represent a space. Some of my pages have used the special string to indent the beginning of paragraphs so go look. Indenting at the beggining of a paragraph is nothing more than a number of these spaces at the start of the paragraph with 6 being the typical number of them.
As to the format of the page code, the next part is the header code. This is where the Title is put for the title on the top of the screen. Other things can go here, including who you are and so forth. Look on any page as to what can be there. You will see a lot of variation in what is there. Good HTML editors will allow you to do preformatted parts here. Bad HTML editors will force a lot of not really necessary stuff here.
After this is the body of the page which is between the BODY codewords where the browser actually uses the text in this area to produce the page you actually see. All kinds of things can be done here and the use of tables is a very powerful part of the body of the text. Proper use of tables can make the text and images stay apart from each other and otherwise format a page.
One of the powerful formatting codewords is the TABLE codeword where you can organize columns and rows to your heart's content. Another is the alignment properties of an image where you can put an image to the right or left of the top of a paragraph and have text running down the side of that image. You can also do lists where each item in the list is indented to the rest of the text.
Another thing to do is to do your work in a 640x480 window so that everybody gets to see your page as you wish it to be seen. This means that the max width of the page will be 630 pixels wide. If you want to do a wider page then there will be those that will have to scroll across the page to read it. Doing a page with a table where the text colomn is 630 pixels wide and another for images is also acceptable. You can align images with particular text isn't difficult as you just start another row row where you want to have the image positioned is the way to do it.
After you have gotten the page put together with your HTML editor, you should run it through a validation program so that when others load the pages into their browser, the page will properly display. This is done with the validation program and the first few times you will usually find all kinds of silly errors in the page.
As you build your webpage, you will probably want to have the ability to look at your pages on your own system. I've made a specific directory on my hard disk which is the webpage and all of the files that are needed on the website are in this directory. I use local references (the directory for the images starts with where the page is rather than having all of the http:// stuff in there) for all of the images that I have. This makes it easy to upload the full website to a new place or rebuild the pages if anything happens to them. If you need space on your hard disk (I'm still using old computers where there isn't that much space so I understand) you can always zip up the stuff that you don't need to have available at the moment and unzip it when you need to work on the website.
When the page becomes big enough to take a while to load, you may want to consider splitting the article into several different pages. There are several different ways of doing indexing and navigation to each of the pages. You can see some of the indexing abilities avqilable to you in the index section of this page. I advise against using a frame setup as some browsers may not be able to handle frames and thus that will be a problem. Also, frames setups tend to take space from the display for the indexing links and thus limit the amount of info in the display of the viewers computer. IF you do wish to use frames, make sure that all of the frames are scrolable. There is nothing worse than putting up an index side and not allowing it to scroll for those with small screens. I've seen too many sites where the index frame isn't scrollable and I am thus unable to get at the last few items on the list. Better to provide forward/index/back links at the top and/or bottom of a page. Another problem with large pages is that they are harder to follow as the text is often not broken up by images and other such things and thus finding a location on the page can become more difficult as there are no identifying marks in the page. This page at about 29K of text is already getting to be quite large and if I ended up expanding the page much more, I'd probably split it into several pages to keep the info more easily located. As it is, note the index at the top of the page that sends you to the various parts of the page. That index would change to external links to sperate pages very easily just by some simple editing of the link destination.

Images are an interesting part of any page and there is a lot of things to deal with when you add images. First off, any image is going to take up some space in a very demanding manner on the page. There are size control functions available in the image commands. You can size the image and also put a border around it. You can resize the image on the page but that's not really recommended as different browsers may handle that function differently. In addition, making the image smaller than it's natural size also means that the image will take longer to load than it should. I've seen pages where a 1k x 1k image was loaded and resized to a 100x100 sized image on the screen. That was an image that took 100 times longer to load than it should have taken! Sizing is best handled by making the image the size you want it to be and putting that into the size part of the command so that the browser immediately knows how big the image is going to be. This is nice as then the page doesn't try to rearrange itself as the page loads to the viewer's computer screen.
One of the nice features of the image command is that you can put a small image (not a reduced format of the image but less pixels in the image on the disk) to the main page and then provide a pointer to the full sized image when you click on the small image on the page (look at what happens when you click on either of the images on my main page). This makes it easy for a browser to quickly load up a page and then the viewer can see the full detail of the image if he so desires. Both of the images here are the same image but one is half the size of the other on the page. In this case, I just defined the size of one to be 1/2 of the other. Go to my front page and you will see the other way to do this by making two different images. Note that if they were different images, the right image would still take as long to load as the left image does. Since they are the same image, some browsers will show from one download while other browsers will take two equal length downloads. The righthand image, if properly resized at the design time should take 1/4 of the time to download. When you use GIF images, don't make the browser resize the image or you WILL lose detail that may be very important! Also note that as I went and aligned the images to the left and right, the text nicely runs down between the two images. If you want to have some whitespace between the image and the text, you can make a border around the image and the text won't go into that space. The browser automatically sets the text in there so you don't have to do any fussing with it yourself.
Most, if not all, of the image processing programs have the ability to resize images to almost any size. When resizing, it's best to try to do a binary number (2,4,8, etc.) divide of the size to allow for the best resolution of the smaller image. Doing strange numbers for reductions causes the image to sometimes do strange things, the biggest is that the program dealing with the reduction in size has to interpolate the colors, etc. of the pixel block to something that is strange to the size of the source. In other words, if you reduce an image from 640 pixels wide to 100 pixels wide, then it takes 6.4 pixels of the source to produce 1 pixel in the shrunk image. That .4 of a pixel width can make for a lot of problems in the result.
Now comes the next bit concerning images. What format should be used? The common formats are .GIF and .JPG formats. Microsoft is trying to get another format called PNG going but not all browsers understand that format and thus you really shouldn't use it. Each of these formats have strong points and weak points and you should choose the format based upon the strong points.
The JPG format is basically a lossy format (it loses detail when the image is compressed and that compression level determines how much loss is done - you will ALWAYS lose detail!) so it's best for the pretty pictures that you take with cameras, etc. that have all kinds of shading and other such busyness in the image. The format doesn't like high resolution sharp edges like what something like a picture of a book page would look like. Stuff like this tends to degrade quickly with the compression. Please note that things like wood grain and leaves on a bush don't have this problem because you're not trying to read them and thus the slight loss of contrast or positional accuracy in the edge of a line in a bush isn't noticed while that change is very noticeable with a photo of text. I have a program called ALICE in my software section that will nicely change the compression of an image and show you what it looks like. There is one bug in the program in that you can't load a JPG image and recompress it. This isn't hard to get around as you just put the image into another format and load that. One limit of interest is that it won't handle huge image sizes but those are beyond what should really be posted to the web anyway. The program is a strict JPG engine so it will produce correct files as it was a demo program when JPG first got started.
The GIF format is the one that is best for doing things like text and drawings. Computer generated things like this tend to have long runs of a particular byte or pixel number which designates a particular color and thus the compression scheme that GIF uses will use this to an advantage and provide a smaller file size than JPG will and still provide a lossless compression of the image. JPG is a lossy image format and trying to keep it from messing up text and lines will produce horrendously huge file sizes. GIF is available in both B&W and color formats and, needless to say, the B&W format will work better with B&W images that the color format will, producing a smaller image file size and thus making the loading of the image a bit faster.
When you put up images, remember that there are a number of people that are still viewing web pages with 640x480 screens. Going to the larger screen is nices like 1280x1000 and so forth is nice but don't forget to see what your page looks like with the smaller format before publishing or you may get some complaints on certain parts of it. Images wider than 630 pixels (the scroll bars on the right side of the screen are 10 pixels wide on the windoz machines) will make for scrolling of the page with the smaller screen size and large images.
For bandwith limited websites, compressing the images as much as possible, clipping out the unnecessary stuff (there is no need to show the trees in the distance with a picture of a telescope!( so crop the image as much as possible before compressing it. Then compress it and see what the image looks like - the Alice program allows you to see what is happening with the image as you compress it - and use the smallest file size that you are comfortable with. Also doing a browsing image that goes on the page which can be clicked to get the full sized image can reduce bandwith requirements by allowing those that really want to see the details up close to click on the image and show it. The IMG codeword allows this to happen.
For image modification, I use PAINT (part of windoz), IRFANVIEW (freeware on the web) and ALICE (available on my software section) to do all of my image manipulation.

The next thing to do is to find a place to publish.
There are quite a few places to publish webpages on the web. Some are better than others and there are several ways that the places restrict the websites. Many only allow for pages to be built within their own editors which usually won't allow for many of the functions available to you in generating the page. Others won't allow for certain file types to be used. My first web provider wouldn't allow for any program file types (.EXE, .COM and so forth) to be on the site. The reason for this reluctance for some providers to allow for such files is that many idiots want to do the nasty things on the web that really shouldn't be done in a nice society. Others would only allow for certain things to be there. Read the conditions of the provider and you will understand what I'm talking about.
I might also note that many suppliers tend to restrict how often a page is accessed a day/week/month and for popular websites this may be a problem. If you have ever gone to a webpage and had a message that the bandwidth has been exceeded then you hit this particular problem! There's nothing like posting your webpage on some forum to everybody and suddenly your website becomes unavailable because of bandwith limits. Images do tend to make this problem a lot worse. Shrinking your image file sizes to as small as you can will tend to allow more people to see hte website before it goes away for a few days or make you pay more for more access. The ideas listed above do help a lot.
Don't feel afraid to start up contacts with some of the providers and if they aren't what you want in a webspace, don't forget to be nice and let the webmaster of the site know that you have backed out of the registration process so that the webmaster can do the necessary stuff to get your entry out of their system. One of the things I have found since I started this article (looking for website providers) was this huge index of website providers, including many of the freeware ones. There are literally hundreds of providers out there that want your page on their computer!

Once you have all of the previous steps done, you can then put the page to the place that the webspace provider has given to you.
I've been using WS-FTP and when it opens, it asks for a place to open. Enter the web address, the name and the password that you've been given by the webspace provider has given you. Don't forget to check the save password box so you don't have to enter the password every time you go to the page. I also suggest that you delete all of the other "stock" web places so that you won't get lost in the program.
The FTP program will then do it's talking to the website computer and hopefully (if you got all of the information correct) give you a directory of what is on the page which for many startups is usually nothing. Some providers may have a default page on the site and you can safely delete or overwrite that file. That file should be named index.htm or index.html, depending upon the choice of the provider. Either file name is acceptable but you shouldn't have both on the page as this will confuse some browsers.
At this time, you can start uploading your files to the site by clicking on the file in the left pane and then clicking on the right arrow. You may also double click or select a bunch of files with the regular method of shift-click for a range of files or ctrl-click for each individual file.
After you have finished uploading the files, go to your browser and go to the website and view your wonderful work (making sure that it's what you really want!) and then let all of your friends know you actually got it all done!
Don't forget to close the FTP access before closing the FTP program as some webspace providers may get nasty to you because their computer will hold the contact open until some period of time has elapsed and then the computer will report the error.
Different website providers may want to have different methods of getting the page to the website storage area. Some do want a specific program to use and, if so, use that program and follow it's instructions.
If you did everything right then you will now be on the web with a page and know how to do enough to make yourself dangerous to others. Let everybody know that you're up on the webland!

Last, but not least, if you have any comments or requests for info to be included in this page, please feel very free to ask me at my email address here. Thanks for viewing!