The pupose of this tutorial is to introduce you to the web medium of HTML pages. HTML pages are just text files that are marked up with special codes called HTML tags. HTML stands for Hyper Text Markup Language. These tags cause web browsers to show the page with certain text and graphic characteristics.
Each link in the tutorial that follows will launch a new browser window. When you are done looking at any particular page, just close that browser window. That makes it easier to keep your place in the text of the tutorial itself. And, most of the links don't go anywhere because most of the underlying web site has not been developed.
Point 0: Consider the speed of your users' internet connection.
Too many graphics or too large graphics make web sites load slowly. If your
users gets frustrated, they may not stay and they may not return.
Point 1: Consider the medium and your user.
As a general rule, the more of your home page that is visible without scrolling the better. Ideally, a home page with a menu of items is better if all of the menu is visible without scrolling. Consider the fact that many people will
visit your site with a standard VGA screen resolution of 640 X 480. If your
page is unusable or very difficult to use at that screen resolution, you've
lost your audience. The only way to tell for sure is to set your own
screen resolution to 640 X 480 and test your work. However, I find optimizing
web pages for 800 X 600 creates more artistic possibilities. So, I always
work at 800 X 600, and test new pages at 640 X 480 before publishing them.
Working at screen resolution higher than 800 X 600 is impractical because
most users do not use the higher resolutions because things get too small.
Lord's Chapel Church - style 1
This page is attractive enough, and uses the most simple format. At 800 X 600
some of the main menu is viewable. However, at 640 X 480 none of the menu
is viewable and the "headline" Lord's Chapel Church wraps to
a second line messing up the look. Furthermore, the underlined words Main
Menu appear to be a link. Since it is not a link, it would be better
bold instead. (Underlining tends to be overused.)
Other features to note on these page:
Use of an unordered list for the Main Menu automatically generates bullets and keeps it lined up nicely. An ordered list would generate numbers of letters instead of bullets. Also, the use of the bottom graphic on his home page is unusual, but a nice touch. This one just happens to fit the pastoral theme very well. At 640 X 480, the width of this graphic causes the horizontal scroll bar to appear, but no scrolling is actually necessary to see the entire page. You don't ever want to make your user scroll horizontally to use your web site.
Point 2: Use tables.
All modern and most ancient web browsers support the use of tables. Tables let you specify precise text and graphic placement, while providing extraordinary flexibility in design.
Lord's Chapel Church - style 2
uses tables to improve control of graphic and text placement in the title block declaring who "we" are, and significantly dressing up the menu. The menu (a separate table from the title block) uses the technique of placing a second table into a cell of the initial table and uses a large visible border in both the outer and inner table. Also, a softer color more compatible with the main graphic has been used. Even at 640 X 480, it is clear that the Main Menu is the action element on this home page and it is easy for the user to visualize the need to scroll to see more of the main menu. At 800 X 600, all important elements of the home page can be seen on one very attractive screen.
Lord's Chapel Church - style 3
further dresses up the table that makes up the main menu by using a graphic image to separate the two columns of the main menu. It is possible that this approach is overkill for this page, but the eye appeal is obvious and the graphic is small enough to not make the page load slowly.