Implementing The Website

Choosing the software you intend to use to build your website.
Learning to use the software of your choice.
Some HTML is a must
Navigation
Optimizing your website for speed and other things
Getting website services like forms, counters, guestbook, polls, message boards, and other stuff

The software you are going to use for your website.

This is a very important issue you should resolve at this time, the software you are going to use to build your website, Long time ago i used notepad (comes with windows) but those days are now over, it is a total waste of time with all the new software that does nearly everything for you, The things you should keep in mind when choosing should be, how much do i know and how much do i have to learn, how long will it take me and do i have the time ? another thing to consider is your hosting service, does it support all the options in this application (most applications require nothing)

Front page for example may be your best choice if you are already a Microsoft Office user, While Macromedia Dream Weaver maybe a better choice for the expert, Adobe Go Live has many things that integrate more things but it has a steep learning curve, so if you are up to it and have the time it would probably be the best tool. If you are doing something more basic and want cheaper software or even free software Coffee Cup (New Window) provides allot of software and they are one of the oldest in the industry, i even used there software in 1996 ! Not to mention that they give away free software and trials.

Learning to use the software.

Learning to use your software is important, i will be telling you a bit about everything that is in common in a while, but learning the software itself is done either by using it (you should have a starter kit knowledge first) or by reading about it, use kazaa to download a free E-book or study it from the internet, the choice is as usual yours

There are many things you should understand about implementing a website, over here i will tell you more about them and the way to implement them on FrontPage 2002. they are basic and change only slightly from version to version, I will also show you what happens under the hood in HTML but that is optional (in optional boxes)

The non optional HTML: For new comers to the word of computers (as creators) you might think this part is hard, well it is not, it may seem a bit strange to you, but in 15 minutes, once you get the essentials you will be looking for another website (since i will only help you with what you need from HTML).

HTML is short for Hypertext Markup Language, it is really just the text under the page you see in the browser, Now click this page if you are using internet explorer and select View Source (View page source for Netscape users)! you will see a text file, have a good look at that file, you will find the ordinary text you see here with a few more guidelines for the browser to format and set the layout of the page, those are called TAGS and always look like this <TAG>

Open Notepad (Start => Run => Type the word "notepad" and hit OK, or go and find it in the programs group.

Copy the code in the yellow box and paste it into notepad.

Now save it to the desktop but not as a text  .TXT file but as an HTML file .htm or .html, how do you do that, Go to File menu and then Save As, Change the destination folder to your desktop, Now change save as type to All Files, and finally Change the name to myfirst.htm. Now go to your desktop and double click the file.

As you can see it is very simple, You may write the tags in capital or small letters, Most of the tags have a starting tag and an ending tag, the ending tag is usually the same as the starting tag but with a / before the word Example: </BODY>

The <TITLE> tag sets the title of your page, this not only appears on the top of the browser window when the page is open, it is also the name of the page that search engines usually save and the name of the bookmark when someone adds the page to his favorites.

The body tag as you may have already noticed flags the beginning of the content to be inserted into a page, if you write your text in that area it will appear in the browser window, Yet if you start a new line (Enter key) carriage return you will not see it on the browser window, even though it is there in the text file, to start a new line in a web page you need a Line BReak tag <BR>. so if you modify the file you made to and change body text into Here is the text that will <BR>show up on your page the text will appear on two lines like this

Tables are the next important thing, but rather than learning all those <TR>'s and <TD>'s you can start by a function in the software package that inserts a table, any software will give you the options to chose how many rows and columns you want in your tables, Tables are very important, they can be nested inside each other as well, this page has many tables, you just don't see them since the border of the table is set to zero, that means the borders are invisible!

Hyperlinks, Hyperlinks are the method you navigate the internet, clicking a hyperlink will take you to a new page or to a new location within the same page. There are two methods of linking to another page, the first is Absolute path that states the entire path of the file you are linking to (http://www.something.com/filename.htm) for example, or relative to the location of this page (index.htm) or to a file in a directory contained within another directory that contains this file  (fun/index.htm), you will get a hold of this once you start, it is not a hard matter anyway and you don't need to know the details if you are using good software to do it for you. (to go back to the parent directory and specify a file there you would write something like (../index.htm) etc...

in front page all you have to do to make a hyperlink is to highlight the text that should link (or the image) then right click it and select hyperlink, if the file is part of your website, just navigate around and chose it, if it is some other website or a file on some other website, just write the URL in the box provided (EX: http://gti.8k.com/index.htm), You should note that the text that appears could be the word (HERE) and you link it to the URL of your choice.

Navigation: Now that you have understood (and supposedly done it while you learn) how to make hyperlinks, it is time to put it to good use and make the navigation of your website, the guidelines are as follows (while you are learning).

Choosing one page as the start page of your website (usually it is index.htm) every page should be accessible through hyperlinks from the index page.

Note: index.htm is the most common start page name, some hosting services give you choices of other names like index.html or default.htm, whatever that is, index.htm usually works.

Tuning

This is something you will be doing for a long time, Every time you learn something new concerning making websites, you will probably have to fix something in your website, This something might be information you learned about how search engines index your website, a tip on changing something that looks bad on your website, Once you learn CSS (cascading style sheets) for example you would probably want to make them control the look of your website so this is really an ongoing process

The hosting (server side software if special is needed)

This is a very vast topic, Server side software could range between anything from a preinstalled script (counter for example) to a program support (like microsoft front page extensions) to things like a scripting engine allowing you to make a dynamic website

Optimizing

Optimizing your website is usually a very important step, but optimizing what ? The answer to that is you need to optimize your website for Speed search engines and navigation.

Graphic files optimization.

The graphics file formats for the internet are usually compressed for faster loading time, the most common formats are GIF and JPG, While a gif might be best for your logo, JPG's are usually best for pictures. Optimizing such files is usually an easy task with most graphics software.

Lets start with JPG, JPG files can be compressed to many compression levels where you will get best image quality at a very low compression level (larger file size) and best load time at a very high compression. The key to get both an acceptable image quality and small file size for faster load times is in saving it at many compression level then looking at tem all, you should see the smallest acceptable image, Another issue in JPG's is weather it should be progressively encoded or not, progressive encoding is a method where the picture is not loaded from top to bottom once, but loaded in part in the first scan from top to bottom and consecutive scans refine the image. This will make the image appear way before it is fully downloaded. This method is great for large file size, but is not important for smaller files and makes your image a bit larger.

Optimizing GIF's is a bit harder, You should look at the number of colors you need up to a maximum of 256, starting at a minimum of 2 colors, the best way to do this is to store your image with many color depths and see which ones still look good.

Speed also depends on many things, If you have HTML from another server like a banner from another website you should always check and make sure it loads fast, even more if you use a traffic program like trafficzap for example the HTML code on your website runs an application at there server, which on peak hours is pretty slow (sometimes) and your page will not load before that code is executed.

Even more if you have dynamic content on your website, you should make sure your code is optimized, to make sure your server runs it fast to deliver it fast, a dynamic content page is not delivered until the code has finished execution.

As for optimizing your website for search engines and navigation, you will see this later on in the guide.

Getting website services like Counters, Statistics Guestbook, forms, etc...

When you are working on a free hosting website, many services are not available, others are, depending on your hosting. sometimes they are but not the ones you need or they have allot of advertising on them etc... Other times they are available but you don't know any related programming, there is a very easy answer to that, Many websites on the internet are willing to give you those services either for free (with a link to there website or an ad) or not for free, anyway the choice remains yours, the idea is simple, you click some buttons on there website to customize the service and then get a small HTML code to paste where you want that service on one of your pages, on this website i used pages from  Brave Net (open in new window)
You can see more services like this in the COMPARE section of the guide