Hypertext Markup Language (HTML) is the standard language
used to write Web pages; however, you do not have to learn HTML in order to
create Web pages. Web-authoring programs do most of that work for you. You just
supply the text and graphics.
Whether you plan to write your own HTML or use a
Web-authoring program, one of the first things you do as part of creating your
Internet presence is to design your Web pages. Presenting a Web site that is
informative and easy to use is a challenge.
This appendix explains how you can get started and also
includes references to resources that can help in creating Web sites that
people want to visit.
HTML 101, or How Web Pages Work
Web content is defined by Hypertext Markup Language or
HTML. HTML uses instructions, or tags, embedded within a document, to define
how a document is displayed. For example, if you want a specific word or
sentence in a document in boldface, place tags around the word or sentence:
<bold>The quick brown fox jumped over the lazy
dog.</bold
When a browser parses your document, it looks for specific
markup tags by name. In the example above, the phrase "The quick brown fox
jumped over the lazy dog." is displayed in boldface. The browser does not
display the hypertext markup tags. The markup tags are viewed only if someone
"views the source" of the document. Viewing the source code of a
document is an option available in many browsers.
Note: Markup language
usage is not restricted in scope to Web content. Every electronic
text-processing tool uses some kind of markup language. One example is the
popular word processor WordPerfect TM. The Reveal Codes command in WordPerfect
enables you to see the actual markup commands (non-printable characters that
define the formatting of a document).
It is important to understand the limitations between the
codes you might encounter in a software package and the Hypertext Markup
Language tags. The codes you find in software packages are "What You See
Is What You Get" (WYSIWYG). HTML is not a WYSIWYG markup language.
Instead, you mark elements of a document as logical entities such as titles,
paragraphs, headings, lists, and quotations. Each browser then interprets these
entities and displays the content, in its own unique way.
For example, a graphical browser like Netscape Navigator
or Microsoft Internet Explorer interprets a page differently than a text-only
browser, such as lynx or a Braille browser. Even though each browser presents
the same information in a different way, the logical elements are still
conveyed and preserved. In this way, HTML is a tremendously flexible markup
language.
HTML is extendable, meaning that new features and tags are
continually being added to the language as it evolves.
The very first definition of HTML was called Version 1, or
HTML 1.0. This quickly evolved into the next version of HTML, known as Version
2 or HTML 2.0. All browsers, at a minimum, support HTML 2.0. After HTML 2.0,
proliferation of vendor-specific tags (such as those specific to Netscape or
Microsoft) somewhat encumbered and confused the progression of an HTML
standard. However, some of the vendor-specific tags as well as many other new
tags were combined to form a new HTML standard, known as HTML 3.2. As of this
writing, HTML 4.01 is the most recent version.
Web Site Construction
There is a LOT of help on the Web for those who prefer
using a web-authoring program to coding in HTML. This section is for those who
want to learn some basic Web site building and design skills.
Computers connect and download at different speeds over
the Internet; therefore, you should design your Web pages to download fairly
quickly for the slower connections that most users have.
The process of creating a Web site in a Web-authoring
program has four components:
-
Selecting a Web-authoring Program
-
Completing a tutorial in the selected Web-authoring program
-
Planning the layout and content of the Web Site
-
Publishing the completed Web Files
Selecting a Web authoring program
Web authoring software interprets text and graphics you
put on your page into the HTML markup language. Because any computer can
process HTML, it has become the standard markup language for Web page
development.
Some Web-authoring programs are free. Type web authoring
software in your search engine text box, choose a program, then download and
install it using its accompanying online instructions.
A Web-authoring program tutorial helps you to create a
sample Web site. Most Web-authoring programs are user-friendly and contain the
same basic features: headers, text, tables, frames, graphics, links, and
buttons.
Completing the Program Tutorial
This is very important! Go through the tutorial from
beginning to end. If it helps, do it twice. Practice makes perfect! As you go
through the tutorial, you will discover some basic presentation concepts:
A typical Web site consists of a Home page and other
pages, and sometimes has an Entry page before the Home page.
The Home page welcomes visitors and acts as the Table of
Contents for your site.
On exclusive Web sites, the Entry page acts as a gateway
to the Web site by requiring user identification. (iManager requires such
authentication before admittance.)
Links on the Home display other pages from this Web site
or other Web sites.
Planning the Layout of the Web Site
After reading this section, plan and create your own Web
site just as you did in the tutorial.
The following is a typical Web site layout.
Consider Layout and Design Elements.
When you are in the planning stage, you are working in
"layout and design" mode. The following tips are helpful for first
timers as well as those with some experience:
-
Define your target audience or market; staying focused on your
audience will help you decide what to include in and exclude from your Web site
content.
-
Whenever possible, build your entire directory (folder) and file
system for your Web site before you add any content. It is easier to test and
adjust design and navigation features before you fill the pages with
information. If your entire Web site contains 5 to 10 pages, you need only to
create a folder for your text files and a folder for graphics files. Large Web
sites containing many Web pages often have several folders to help keep the
information organized.
-
It is often helpful to actually draw pages on a whiteboard,
blackboard, or to write out ideas on pieces of paper and shuffle them around
until the flow makes sense.
-
Make file names as short as possible, and devise a naming system
you can easily remember. For example, a page containing seminar information
could have semtitle.png, semlogo.gif, and seminfo.htm in the seminar folder.
-
If you decide later to add another section to your Web site, just
create a new folder for additional files.
-
You cannot use existing files and graphics in a newly created
section. You will break links, and you really don't want to do that, especially
in a large Web site.
-
Nothing beats tables for organizing the information you have.
Your tutorial will explain how they are made and used.
-
White space is nice; it's easy on the eye and helps guide a
viewer through the information. Avoid cluttering your Web page with too much
information; it would be better to add another page.
-
Select a font that is easy to read like Arial or Verdana.
-
Avoid ALL CAPS text. IT SEEMS TO BE SHOUTING AT YOU.
-
While selecting colors, experiment until you find a combination
that is attractive. Trial and error is the most common method for getting the
look you want. For best results, select your colors from the “browser-safe
colors” palette. This will ensure that they look the same on different
operating systems and computers.
-
Graphics are saved as image files with one of four file
extensions.
-
.jpg - best for photographs and other images that contain lots of
shading
-
.gif - best for flat fields of color having no shading, such as
sketches and cartoon images
-
.png - designed to replace the gif format
-
.tif - best for gray-scale images
-
Balance your use of graphics against the time it takes to display
them. The larger the graphic, the longer it takes for the page to load.
-
Test the Web site by having someone proofread your text. Get
opinions from friends and family. They might raise questions you haven't
thought of.
-
Check your links. Do they work? Broken links frustrate visitors.
-
View your Web site from several browsers. Each browser displays a
Web site slightly differently.
-
Keep your Web site interesting and attractive by updating its
content periodically. Always recheck links after making changes.
Publishing Your Web Files
When you are ready to publish your Web pages to your VPS v2 Virtual Server:
-
Open the directory on your computer that your Web files are stored in.
-
Open iManager or your FTP program.
-
Select the destination directory on the VPS v2 Virtual Server for the Web files to be
stored in on the VPS v2 Virtual Server.
-
Using iManager or the FTP program, upload the
directory containing the Web files, from your local computer to the document
root on the VPS v2 Virtual Server.
-
Open a browser and type the URL for the Web site:
http://www.primary_domain.com, or http://www.subhosted_domain.com.
HTML Books
If you want to experiment with HTML, you should have at
least one good book about HTML on your bookshelf. Books are an immediately
available resource to consult when you encounter questions about, or problems
with, your HTML design. There are probably several hundred books that discuss
the Hypertext Markup Language, all of which present an overview of the HTML
tags. Two highly recommended books are listed below:The HTML Sourcebook, Fourth Edition: A Complete Guide to HTML 4.0 and HTML
Extensions
Author: Ian S. Graham Publisher: John Wiley & Sons,
Inc.
HTML: The Definitive Guide, 3rd Edition
Author: Chuck Musciano & Bill Kennedy Publisher:
O'Reilly and Associates, Inc.
As HTML has evolved, so too has the complexity of the
language and its accompanying extensions ( e.g. style sheets and scripting
languages). Excellent books on style sheets and scripting languages are included
below:
Dynamic HTML: The Definitive Reference
Author: Danny Goodman Publisher: O'Reilly and
Associates, Inc.
JavaScript: The Definitive Guide, 3rd Edition
Author: David Flanagan Publisher: O'Reilly and
Associates, Inc.
The HTML Stylesheet Sourcebook: A Complete Guide to Designing and Creating
HTML Stylesheets
Author: Ian S. Graham Publisher: John Wiley & Sons,
Inc.
HTML Online References and Style Guides
Online HTML references are superb resources for beginners
as well as a convenient reference for more experienced developers. The
following URLs comprise just a small sampling of HTML references available on
the Internet. However, many of these URLs then refer to other sites that
contain additional information. Also, some of the sites listed below have
corresponding books, and the book URLs are included where available.A Beginner's Guide to HTML
Author: National Center for Supercomputing Applications
(NCSA)
Overview of site (quoted from site):
"Many people use the NCSA Beginner's Guide to HTML as
a starting point to understanding the hypertext markup language (HTML) used on
the World Wide Web. It is an introduction and does not pretend to offer
instructions on every aspect of HTML. Links to additional Web-based resources
about HTML and other related aspects of preparing files are provided at the end
of the guide."
Introduction to HTML and URLs
Author: Ian S. Graham
Overview of site (quoted from site):
"This HTML document collection explains how to use
the different HTML document description elements, or tags and how to use these
elements to write good, well designed HTML documents."
Creating Killer Web sites
Author: David Siegel
Overview of site (quoted from amazon.com):
"More of a style guide than an HTML guide, Creating
Killer Web sites is concerned with the building of Third-Generation sites, Web
sites that are conceived by design and not by technological ability. Siegel and
his helpers at Studio Verso review a wide variety of topics, including a
history of browsers, how to use specific HTML tags, how to select software
tools, and advice on pure aesthetic design."
Web Pages That Suck
Author: Vincent Flanders & Michael Willis
Overview of site (quoted from amazon.com):
"Unless you're abnormally gifted, the best way to
learn a craft thoroughly is to learn not only its central tenets but also its
pitfalls. Web Pages That Suck teach you good Web design by pointing out ugly,
misguided, and confusing sites--any site that fails to deliver good graphics
and clear, well-focused content. As the authors show you all sorts of corporate
and personal pages, they help you determine your target audience, design your
site and its navigational elements and content, and solve problems concerning
graphics and text."
Yahoo! Directory
Viewing Source Code
One of the best ways to learn HTML is by viewing the
source of documents created by someone else. When you are browsing the Internet
and encounter some type of design element or layout format that catches your
fancy, view the page (or frame) source and see how it was done. Popular
browsers such as Netscape Navigator and Microsoft Internet Explorer include the
option to of view document source code as a menu item or a pop-up menu. Please
be considerate and honor any copyright notifications that you encounter.
HTML Editors and Tools
There are dozens of HTML authoring tools available to help
you construct your Web pages. Links to several HTML index sites and HTML editor
programs are provided below. This is only a small sampling of the Web authoring
programs available, but it’s a good start You can find additional programs by
typing "HTML editor" into any good search engine.Stroud's List – 32-Bit Windows HTML Editors
Browsers, Viewers, and HTML Preparation Resources
Yahoo! Directory
Allaire HomeSite
AOLPress
Galt Technology webMASTER PRO
GoLive CyberStudio
Microsoft FrontPage
NetObjects Fusion
Netscape Composer (Part of the Communicator Suite)
Sausage Software HotDog
[Handbook Main Table of Contents] [Proceed to Appendix C]
| 
