Course In Christian Web Site Design
Saint Luke Evangelical School Of Biblical Studies
http://ficotw.org/school.html
by Rev.Dr. David M. Ford

Course Description: This course will provide the student with an understanding of the basic HTML needed for the features found on most web sites. The course will include instruction on features proven effective in creating and maintaining a Christian community on the web. Web site aesthetics will be discussed, as well as proven means of web site promotion. By following the instruction provided in this course, the student will be able to create and maintain an effective and attractive evangelical Christian web site.

This course will be broken up into the following sections:
Getting Started
HTML
A Word On Design
Community Interactive Features
Maintenance
Promotion

Getting Started
The first thing you'll need to build a web site is a "host" or "server". These are the services that actually host your web site. If you're on the internet, there's a good chance your ISP already provides you with some free server space. There are also many companies that provide this service for a fee. However, for the purpose of this course we will deal with the three best known providers of free web server space, as these are an excellent starting point for anyone first learning how to build a web site. These servers are Geocities/Yahoo, Angelfire, and Tripod. All of these services are quite good, but they each have their own pros and cons.

Geocities, the "granddaddy" of free web site servers, is perhaps the best known, is relatively easy to use, and is usually reliable. However, Geocities is divided into "communities" which, while allowing you to place your site within a cluster of other sites of similer interests, can make registering a bit difficult, and ends up in a rather convoluted URL (Uniform Resource Locater - your "web address"). For instance, the original URL of The First International Church Of The Web on Geocities was http://www.geocities.com/Heartland/Hills/1647, which frankly, is a rather lousy URL. Also, Geocities places certain restrictions on what you can have on your site, and even on what you can link to. With Geocities, you're not allowed to participate in any fundraising or commercial activities unless it's one of its few "approved" affiliate programs. For these reasons, I don't particularly recommend Geocities.

Angelfire, originally the "poor cousin" of the others mentioned here, has come a long way in the past few years, and now is truly comparable to the others. They don't place excessive restrictions on your content, and it's simple to use. Perhaps the best thing about Angelfire is that it is extremely novice-friendly. They offer a number of "templates" which will allow you to set up a basic web site with absolutely no knowledge of HTML. Unfortunately, you end up with a web site that looks just like what it is - a site set up using an Angelfire template. However, if you already know some HTML, the templates can still be useful for quickly setting up a site and you can make it more customized by using your own HTML. Angelfire is actually a pretty good starting point for any novice web site designer, but like Geocities, you end up with a rather lengthy URL

Tripod is currently perhaps the best of the free web space servers. They don't place many restrictions on your content, it offers basic templates for the novice as well as advanced options, and its reasonably reliable. Their file manager can be a bit awkward, but it is dependable. Tripod has also recently stopped putting "pop-up" ads on their users' sites, and replaced that with a permanent banner, which is less annoying. One of the nicest things about Tripod is that they automatically provide you with a customized URL that includes your "membership name". For instance, when The First International Church Of The Web Ordained Clergy Credentials Catalog was originally hosted on Tripod, the URL was http://members.tripod.com/~ficotwforms, but, with the new custom URL feature, the URL is http://ficotwforms.tripod.com, clearly an improvement. A URL from Tripod will be one of the shortest and easiest URLs you will find from any free web space provider. For the use of this course, Tripod is most highly recommended free server for your Christian web site.

Whichever server you decide to use, your first step to setting up your site is to register with the server of your choice and familiarize yourself with it's options and features.

HTML

This section is intended to teach you the basic HTML you will need to create your Christian web site, but it is in no way comprehensive of all HTML commands. You'll find a more complete list of HTML codes suitable for printing by clicking here. However, the commands you'll learn in this course will cover the great majority of things you'll ever want to do with HTML on your site. Okay, let's jump right in.

If you're using one of the free web hosting services mentioned above, you won't really need to worry about the HTML and BODY notations (called "tags"). However, so you'll know about them, I'll briefly cover them here. All HTML documents begin with the HTML tag, and this will be the first code you'll enter (if you're starting from scratch - ignore this is you're using one of the services mentioned above). So, the first code, or tag, you'll enter will look like this

<html>

Since all tags should also be closed, at the end of your document you need to "close tag". This is done using the / key. So, at the end of your document you need to enter

</html>

Now, everything between the html tags will understand the html code. By the way, uppercase and lowercase don't matter with html code. Some prefer using uppercase so it's more visible when they edit their code, but either one is fine.
Your next command will be the HEAD command, which will look like this:

<head> </head>

Everything between the HEAD tags will will be your browser's headline for this page. Between the HEAD tags you should include your TITLE tags, which look like this:

<title> </title>

Between the TITLE tags you should enter the title for your page. For instance, if you look at your browser's headline for this page, you'll see "Saint Luke Course In Christian Web Site Design". The complete code for this is:

<head><title>Saint Luke Course In Christian Web Site Design</title></head>

Of course, your title will be the title you choose for your web site. Next, you need to enter the BODY tag, which looks like this:

<body> </body>

Everything between the BODY tags will be the body of your web site, so you don't want to close the BODY tag until the end of your HTML code, right before you close your HTML tag. But wait, there are things you can add to your BODY tag which will affect the way your web page looks. Specifically, here's where you specify things like background color, text color, link text color, visited link text color, and active link text color. Basic colors can be specified using simply the word for the color, such as white, red, blue, black, gray. But first, the basic tags are as follows:

BGCOLOR = background color
TEXT = text color
LINK = link color
VLINK = visited link color (a link the viewer has already visited)
ALINK = active link color (the color a link will turn when a courser is over it)

Now, for simplicity's sake, lets say you wanted a white background, with blue text, red links, black visited links, and gray active links. Your entire BODY tag would be as follows:


<BODY BGCOLOR="white" TEXT="blue" LINK="red" VLINK="black" ALINK="gray">


This would give you the specified look of these elements of your web page. Note that the colors are enclosed in quotation marks. This is important, so don't leave them out. Any place you see quotation marks in the codes covered on this page, be sure and use them in your own code.
Of course, you're not limited to the colors mentioned above. You can use virtually any color displayable on the web, but you'll need to determine each color's hexidecimal code - a six-digit alphanumeric number which defines the qualities of each color. For this, you'll need a graphics program which will give you this information, or you can find a good web-based color coder Here. As an example of this type of code, here's the HTML for the specific colors used on this page:

<BODY BGCOLOR="#ffffff" TEXT="#2a2dae" LINK="#6699ff" VLINK="#9966cc" ALINK="#ff6347">

If you know the values for the colors you want to use on your web site, then the above code is how you should enter your HTML, substituting your specific color values for the ones I've used here.

Okay, you've entered everything you need to start displaying your web page - all that's left is to enter the information that will actually be displayed on your site. You'll need to format your text so that it doesn't show up as one big block of text. To insert an individual line break, you'll need the "break" command, which looks like this:

<BR>

To enter a complete blank line between chunks of text, you'll need to use the "paragraph" command at the beginning of a line of text, and it looks like this:

<P>

You can also vary the size of your text according to values ranging from 1 to 7, with 1 being the smallest, and 7 the largest. The text you're reading now is set to 4, and the code for this is:

<FONT SIZE=4>

When you switch font sizes, you should first close your last font tag, for instance:

</FONT>

You can also vary your text using the "bold" tag:

<B>

And the "italic" tag:

<I>

Be sure and close these tags when you want your text to stop being in bold or italicized.
Finally, you need to know how to align your text. If you don't specify otherwise, your test will automatically align to the left. However, you can specify how you want text and graphics to align using the "align=" tag and "center" tags. These look like this:

<align=left>
<align=right >
<center> </center>

Everything placed after an align tag will remain aligned that way until you either change it or close the tag.

Okay, you've got your site set up with the colors you want, a title, and text. But every web page needs links. Creating a link is really very simple, and uses the "A HREF=" tag. First, you need to know the URL for the page you are going to link to. Let's say you wanted to link to The First International Church Of The Web, whose URL is http://ficotw.org. Your link would look like this:

<A HREF="http://ficotw.org">Visit The First International Church Of The Web</a>

Such a link will appear on your site like this

Visit The First International Church Of The Web

That's really all there is to placing a link. A couple of things to note:
The URL of the site you are linking to must be enclosed within quotation marks, "like this". The text you choose to show as the link can be anything you like, even a graphic, which we'll cover in a moment. Finally, each link command must be closed with the </a>, as in the example above. Unless you close your link command, everything that follows, even the entire rest of your page, will be a link to the URL you specify. That's all there is to making a text link.

No web page would be complete without graphics, so you need to know how to place a graphic on your web site. There are two graphic formats recognized by all HTML browsers, and those are .gif and .jpg or .jpeg formats. The .gif format usually has a smaller file size and is best for "line art" type graphics. The .jpg format is best for scanned photographs. There are plenty of good Christian graphics available on the web, and usually you can "grab" and use these without violating any copyrights, as long as you don't claim them as your original works. Sometimes the people who create graphics specify that they aren't to be used by anyone else, and you should respect such a request. Almost all others are up for grabs. Now, there are two ways to display a graphic on your web page. The best way is to "grab" or create a graphic, save it to disk, and upload it to your site's file contents using a ftp program or the file manager program offered by the hosting services mentioned above. This is far and away the best way. You can also display a graphic on your page by linking to it from another page. This should NEVER, NEVER, NEVER be done without the permission of the person from whose site you are taking the graphic. The reason for this is that everytime the graphic is displayed on your site, it takes "bandwidth" from the other site. Most web hosts only allow a certain amount of bandwidth to be used by a site before charging additional fees, so displaying a graphic from another site without permission basically adds up to theft. If you have permission, however, it's fine, but keep in mind that if the other site goes down for any reason, even maintenance, the graphic also won't display on your site. Both ways of displaying graphics will be discussed. Okay, let's say you wanted to display the following graphic on your web site:


Now, since this graphic is saved as a file on this site, I only need to link to the name of the graphic file itself, which is "coursepic.gif". However, every graphic file saved to a domain or site actually receives a complete URL of its own, and the complete URL for the above graphic is "http://ficotw.org/coursepic.gif". For purposes of this course, you may either grab this graphic and save it to your own site, or you also have permission to link to this graphic if you need to do so. The code for both means of posting is:

<img src="coursepic.gif">

<img src="http://ficotw.org/coursepic.gif">

That's basically how you post a graphic on your site. However, there are a few more things you need to do to maximize the speed of your page and the alignment of your graphic, and these are the "width" and "height" tags, the "align" tag, and the "border tag". First, you need to determine the width and height qualities of the graphic you're displaying. You can do this with either a graphics program, or using the "view page source" or "view page info" commands of your browser. Either way, you'll find that the width of this graphic equals 169 pixels, and the height equals 281 pixels. Let's also assume you wish to add a border around your graphic. Your border can be any value ranging from 1 - 10, with 1 being the thinnest and 10 being the thickest (you can also specify a border value of 0, which will result in no border being displayed). Finally, let's assume you wish the grahic to be displayed along the right side of your web page. Okay, such an arrangement, with a border size of 5, would look like this:


Now, the codes for displaying this graphic with this sized border aligned to the right would be either of the following:

<img width=169 height=281 border=5 src="coursepic.gif" align=right>

<img width=169 height=281 border=5 src="http://ficotw.org/coursepic.gif" align=right>


One thing to note: While the "align=left" and "align=right" tags work while included in the "img src" tag, for some reason the "center" tag doesn't always work when added that way. To center a graphic, you should use the "center" and "/center" tags outside of the "img src" tags, that is to say, before and after. Okay, that's all there is to displaying a graphic on your web page.

But let's say you want to use a graphic within a link to form what's called a graphic link. For instance, say you wanted to show your appreciation and loyalty to Saint Luke Evangelical School Of Biblical Studies by posting a graphic link to the school web site. Gosh, that's nice, and I really appreciate it. You are obviously a person of the highest caliber with exceptional good taste. As luck would have it, I have created a graphic just for this purpose, which you have my permission to "grab" or link to for this purpose. Now, such a link would look like this:

Saint Luke Evangelical School Of Biblical Studies

Looks great, doesn't it? If you click on the graphic, you'll see it takes you to the main site of our school. Now, here's how you make such a link. Basically, you create a link just like you would a text link as described above. However, instead of putting "Visit Saint Luke Evangelical School Of Biblical Studies" in the text area (the area between the tags), you would simply include the code for displaying a graphic. The code for such a link would be one of the following, depending on whether you saved the graphic to your site or are linking to it from ours.

<a href="http://ficotw.org/school.html"><img width=225 height=183 src="stlukeban50.gif"></a>

<a href="http://ficotw.org/school.html"><img width=225 height=183 src="http://ficotw.org/stlukeban50.gif"></a>

As you can see, it's really quite simple to form a graphic link combining the code for creating a link and displaying a graphic as explained above. Of course, when doing this with other graphics you'll need to add the specific width and height tags relevent to whatever graphic you're using.

Finally, you need a way for people visiting your site to contact you directly This is best done with a link using the "MAILTO" tag. Using this tag will result in a link that will open up the visitor's e-mail composer so they can send you a quick e-mail. It will look like this:

webrev@bellsouth.net

The code for this looks like this:

<a href="mailto:webrev@bellsouth.net">webrev@bellsouth.net</a>

Of course, for the text or visible part of this code, you can use whatever you like, such as "E-Mail Me!" or "Contact The Webmaster", or even a graphic. However, I like to use the e-mail address itself, for those visitors whose browsers may not be able to use the "mailto" tag. I don't know who they are, but apparently there are some out there.

Okay, there you have it! Granted, there's much more HTML code than that which is covered in this lesson, but the codes listed here will get you started building your web site, and will cover the vast majority of things you'll do on your site. As you build your presence on the web you'll continually learn more HTML and will likely be redesigning your page with some regularity. Also, while you should never take original material from any web site without the author's permission, it is an accepted practice to copy HTML code. That is to say, if you see something done with HTML on a web page that you particularly like, you can feel free to use the "view source" feature of your browser to read the HTML of the site, and "cut and paste" the code for your own use. You'll need to substitute your own specific values, links, etc., to reflect your own site. And you should never take someone's entire web page design and just substitute your personal material. That's really going too far. But feel free to take what you need, and leave the rest. After all, your web site should be a reflection of your own creative work done out of a love for Our Lord, and as such a reflection of you. Taking someone else's entire web page design will rob you of the joy of the creative process, rob the person who created design of his or her work, and rob the world of a creative work from you, a unique child of God!

A Word On Design

The most basic rule for effective web site design is "Keep It Simple". Sometimes, that's more easily said than done, but I'll try and share some tips with you that will help keep your site friendly, attractive, and effective.

One of the worst mistakes a designer can make is to choose background and text colors that don't contrast sharply enough. As a result, the text tends to "bleed" or blend into the background, and can be very difficult to read. Remember, if someone can't read your text, they won't. Also, try and keep your site, especially your Christian site, a bright and happy place. Any site spreading the message of Christ and His salvation should not be dark and gloomy.

It's also a good idea to not have too many "bells and whistles" on your site. Remember, many of your visitors won't have the absolute latest computer equipment, and may be using rather old versions of various browsers. Things like "Flash", "Shockwave", and particularly "Java" won't run on many systems out there, and will actually cause your visitors' computers to crash. Have you ever been to a web site that caused your system to crash? Were you in a hurry to get right back to it? I'd bet not. Remember, by choosing to build a Christian web site you are making a conscious effort to spread the Word of God to as many people as possible using the World Wide Web. It stands to reason, then, that you want your message to be accessible to the greatest number of people who visit your site. Of course, you will never be able to build a site that is completely viewable by absolutely everyone, but you should make an effort to make it as viewable as possible. This doesn't mean you shouldn't have a few "bells and whistles" on your site, but don't overload your site with them, and don't make them too intrinsic to your web site's overall message. If at all possible, try viewing your page with a variety of different browsers. You'll be surprised at how your site looks different depending on the browser with which it is viewed.

Finally, there's FRAMES. Frames, while they can be useful, are pretty much hated by most people on the web. If you absolutely MUST use them in your site, go ahead, but if you can avoid it, I'd recommend leaving them out of your site.

Of course, these tips are basically my own opinion, and you are not required to follow them at all. They are, however, based on over three years of experience in designing and maintaining effective evangelical Christian web sites, so take them what they're worth. Still, designing a web page is all about doing your own thing, so don't be afraid to do just that.

Community Interactive Features

A good Christian web site should not only tell its visitors about Christ, but should also represent a fellowship of caring individuals willing and able to minister to one another as well as anyone seeking such help. For this reason, every Christian web site should have some community interactive features. These can be "bulletin boards" (also called message boards), prayer request pages, chat rooms, perhaps even opt-in mailing lists. These features will not only provide ministry and fellowship opportunities to your visitors, but will also insure a regular stream of repeat visitors to your site, and are the best way to build up a regular visitor base for your site. Most such features require special coding known as CGI, which is an entirely different code from HTML, and your site must allow for a cgi-bin in order to run them from your site. However, a quick search of the web will provide a number of "remotely-hosted cgi services" available for you to add to your site. Basically, these services will run on completely different sites from your own, and you will simply link to the pages from your own pages. Most of them allow you to customize the look of these services to match the look of your own site, and make them "seamlessly" integrated into your own site. For most HTML designers, this represents the simplest way to add these features to their sites without having to learn another complex computer code. Many of these services are available for either a monthly fee, or completely free if you allow them to run advertising (known as ad-driven). For your convenience, you can find many of these free services available through our own Free Virtual ISP Services Page. The services found there have been tried and tested by me personally, and it's a good starting point in your search for these features for your site.

Site Maintenance

Once you've built your site, you'll need to perform regular maintenance, especially of the community interactive features. Like anything else open to the public, you may occasionally get visitors whose intention is simply to cause trouble, and this is especially true when you have a Christian web site. For this reason you should make it a point to check these pages of your site in a disciplined manner, on an at least daily basis. It is up to you to decide how to handle trouble-makers and unwanted posts on your site, but you should do so with the Holy Spirit as your guide. While you should allow every opportunity for your visitors to conduct themselves in a proper manner, you shouldn't be afraid to maintain the integrity of the mission of your site, and to remove any unwelcome or troublesome posts from your web site. This will also insure that the visitors to your site know that you care about maintaining a wholesome and caring environment for their fellowship. In addition, you will also need to check any links on your site on a regular basis to insure they are still active, as it's just a simple fact that web sites occasionally disappear. Your visitors will help you with this by contacting you when they find broken links. Since effective maintenance of your site requires that you be able to access your site at any time, it is recommended that, in addition to your regular paid ISP service you should download and register with one or two free ISP services to serve as back-ups to your regular service. Again, you can find some of these listed on our Free Virtual ISP Services Page.

Web Site Promotion

Just because you create a web site, this is no guarantee that you will get visitors to your site. After all, thousands of new web sites are created every day. To insure a steady stream of new visitors to your site you will need to engage in regular web site promotion in a disciplined manner.

The first step you should take in promoting your site is to register it with the major search engines, such as Yahoo, Excite, etc. Usually the search engine pages themselves provide forms for you to submit your site. This can be a time-consuming process, but is worth it. Additionally, a quick search on the web will reveal a number of services that will submit your site to the major search engines relatively quickly and easily.

Another effective way to promote your site is to join a "link exchange" service. These require you to run a banner on your site which advertise its other members' sites, and in exchange your own banner will be shown on other sites. These banners serve as links which, when clicked on will take you to the advertised site. Perhaps the best known of these is the Link Exchange Network. They allow you to specify which types of sites are advertised on your own pages, as well as which pages your banners are shown on. You can specify such things as "show only G-rated sites" or "show only business sites", or many other options. You can target certain site categories for your own advertising as well. I've used the Link Exchange for over three years now, and have received thousands of visitors through its program, so I can recommend it. There are many other services of this type available on the internet as well. Find one you like that works for you, and it will help you with your web site promotion.

If you're a person who spends much time in Christian chat rooms, this can represent a significant source of traffic for your site. Don't hesitate to invite your chatting partners to your site. Frankly, you need to tell everybody you possibly can about your site and invite them to visit it. If your visitors enjoy your site they may even forward it to other people they know, and in so doing actually help you promote your site.

There's no shortage of other ways to promote your site at no cost to yourself. These include Free-For-All Link Pages (where visitors can post links to their sites), free classified sites, and other services. Some are more effective than others, and you'll need to find which ones work best for you. The main thing to keep in mind is that site promotion is a task you need to engage in in a regular and disciplined manner. This will insure regular traffic to your site, and make your web site designing experience a rewarding and satisfying one.

Finally, you may want your web site to earn a little income for your ministry. I recommend participating in the Family Moment Christian Bookstore Program.


As a Christian web site, they make it possible for you to host a Christian book store right on your site. They handle everything, including processing the orders and shipping, and you get a commission on every book you sell. It's a great program and I really recommend it. For full details, simply click on the banner above.

Another excellent affiliate program I recommend is the Hear And Play Gospel Piano and Keyboard Instruction Course. This ties in well with your Christian site because many Christians are interested in learning to play gospel music, and I can personally recommend the lessons themselves because I've used them to learn to play the keyboard. Like any quality affiliate program, they take care of shipping the product, etc., but what I really like is their dedicated marketing efforts. They offer a wide variety of products, and the program is free to join. I think you'll find it an especially profitable program. For full details, simply click the link above or the banner below.


Well, that's all there is to it. I pray you have found this course useful in building your Christian web site. God bless you and your evangelical efforts.