Introduction to
Web Design
&
HTML - Hyper Text Mark-up Language
At a basic level the Internet is your computer connected to
another computer through a phone line or cable communicating with each other.
Add to this the ability to connect to any other computer and communicate with it
in fractions of a second and you have the Internet in a nutshell. The terms 'net'
or 'web' are a way of visualizing this interconnectedness.
Basic Concepts
When working on a website there are a couple of key concepts
that need to be understood. One is the concept of the ‘Local' computer and the
‘Remote' computer. The local computer is the one you are working on
and, unless you have access to the actual server that your website is stored on,
the computer (server) that contains website is called the remote computer (For
security reasons most servers are setup so that even if you have access to the
server you still have to log on and transfer files much like you would if you
were connected locally).
Always consider the
file on the server to be the original
copy as this is the one that visitors will see. If you need to make changes
to a existing web page retrieve a copy of the original from the website first.
That way if more than one person is updating the website you will avoid
overwriting someone else's changes.
HTML is the language that is at the
core of all document on the Internet. An HTML document is a
text document
with instructions for browsers on how to display the web page.
Hyperlinks
tie all the documents together integrating the website and connecting it to the
rest of the "Net" so be sure that all your links work. Also HTML
ignores spaces whether they are inserted with the space bar, tab key or enter
key. All formatting must be explicitly defined.
Protocols
Around the mid 90's with the introduction of
Hypertext
Markup Language or HTML and graphic capable browsers the Internet has taken
off as a major communication tool accessible to large numbers of people. As
there is no one organization that oversees the "Internet" there are a
number of "protocols" that have been established to make this
communication work. The protocol that connects the computers together and directs
the transfer of information has stabilized (at least temporarily) on
TCP/IP
(or Transmission Control Protocol/Internet Protocol). Currently HTML 3 has been
okayed by the World Wide Web Consortium (or WC3) and discussion is underway on
HTML 4.
The two main graphic formats are
GIF and JPEG.
The two main sound file formats are Sun's
.au and
Microsoft's .wav though there are many others. Musical Instrument Digital
Interface or .mid format is a way of storing complete songs in relatively small
files.
The jury is still out on video, animation and streaming which
has muddied the waters even more for people seeking standardization.
Streaming
technology, which allows content providers to send information such as audio and
video in a stream rather than as a complete file, currently has three main
formats; Real Audio's .ra (and others), Microsoft's
.asf or asx
and Apple's .mov (as well as others). There has been an attempt to
standardize audio and video with the MPEG format but as the technology is
expanding constantly it will be sometime before this area of providing content
through the Internet settles down.
Role of the Webmaster
The Webmaster's role is to oversee the entire website whether
they are maintaining the entire site themselves or the site is being maintained
by various other people. Their role is to keep the site consistent with company
or organizational policy, ensure that the site is working properly (i.e. links
work, graphics display etc...) and answer questions that are generated from the
website. In smaller organizations most often the Webmaster is also the Web
Designer. Even if the Webmaster isn't involved in the day to day site
maintenance the person taking on this role must have a good understanding of
HTML.Role of the Web Designer
The Web Designer's (web developer's) role is to layout and/or
create the web content. Their strengths are a sense of design and strong
understanding of HTML. Though a designer will often use a HTML editor or
publisher, the core language of the Internet is HTML and that design tool is
simply interpreting the hypertext markup language for the designer. If the
designer doesn't understand HTML they will, very quickly, find themselves in a
crisis when an image doesn't display or a link doesn't work.Another skill that is not always required but good to have is
an understanding of a scripting language.
With the introduction of HTML 3 designers can now use Stylesheets to create
complex site-wide formatting of documents. In the discussion of HTML 4 (and in
the capability of version 4 browsers) is the ability to add Dynamic HTML to
documents. JavaScriptis also becoming a common feature of websites. Many sites
also incorporate programs based on a variety of different languages.
Advertising Your Website
- This is where the work really comes in!
Search Engines
The first are search engines. This involves visiting or
hiring someone to visit the individual search engines and
listing your
website with each one. In theory the search engines will find your website
without registering it but it could take months or even years for them to find
you.Though there are hundreds of different search engines out
there are only 10 to 15 that the majority of people use. Many of the smaller or
specialty search engines will use these 10 to 15 search engines to submit their
own clients searches. One example is www.dogpile.com which allows you to perform
"meta searches" using a combination of search engines. Both Internet
Explorer and Netscape Communicator use the larger search engines such as Excite,
GoTo, HotBot, LookSmart, Lycos, Snap, About, Google, InfoSeek, AltaVista, Excite
and Yahoo.
Before submitting your site to a search engine it is
very
important to have some key components ready on your own website.
-
Have
your site ready. This may go without saying but I have come across many
websites which have broken links or pages that say "under
construction" which leaves a poor impression.
-
Have
your meta tags ready. Meta tags are used by the search engine to categorize
and file your site as well as describe it. There are two main meta tags;
description and keywords.
-
The
description tag is a short paragraph describing what the searcher
will find when they click on the link to your website. This is often
displayed below the link and if it is not explicitly defined the search
engine will take the first 25 or so words on the page regardless of what
they are. This can result in a misrepresentation of your organization.
-
The
second meta tag is the keywords tag. This is a collection of every
keyword that you can think of which describes any aspect of your
organization. Include geographic words, philosophical words, American,
English or other versions and even misspelled versions if you are using
commonly misspelled words.
Print Media
The second technique is printed media. Most organizations
produce printed media including flyers, advertisements, information leaflets,
posters, press releases and various other material. Don't forget to
add your
website address to any and all of these. The same way that you would add a
phone number which allows interested people to contact you for more information
your web address must be added to these. The website is not a replacement for
the traditional phone number and mailing address but an additional item that is
often initially forgotten by organizations new to the Internet. Remember that
your website is available 24 hours a day, 7 days a week so people can browse
your website to read the information at their leisure.Links Pages
The third and perhaps most interesting and certainly most
exciting is creating fraternal links with like minded organizations. The
Internet has created a new form of information gathering called browsing. People
will click on interesting links which they find on website in order to navigate
through the Internet. If your website is one of the links available people will
be able to find you easily.To begin this process you need to do two things. One is to
create a links page or link section on your site. This links area of your
website needs to be monitored as the Internet is constantly evolving and your
links will need to be updated periodically. There are a few website, such as
www.websitegarage.com, which will check the links on a single page for free
saving you the time of clicking on each one yourself. Even with this type of
service it is a good idea to visit your links periodically, perhaps once a year
or so, to make sure that the direction of the organization you have linked to
hasn't changed. I have found websites that have changed from information
providers to full blown commercial sites which no longer reflect the ideals that
caused me to add a link to their site originally.
This page or section can be as simple or elaborate as you
wish. One way is a simple list with the name of the organization, another is a
link with a description of the organization, a third could be categorizing your
links by topic or service. There are many different ways of arranging a links
area on your website.
If you are a member of a coalition you may want to highlight
other coalition members or even create a web-ring which is an Internet
program/protocol which automates coalition links.
You then need to ask other organizations to add your site to
their links page. A good way of approaching them is to send a note to their
webmaster or contact person telling them that you have added their site to your
links page, inviting them to visit your site and offer your site as an addition
to their links page.
The Planning Stage
A certain amount of discussion and planning needs to happen
before implementing a website project. Creating a rough draft, whether on paper
or a rough website, is a good first step. Most organizations already have
material that can be used to create a draft site. Though each organization and
business is unique the following are a selection of the many questions that need
to be addressed when planning or updating a website. This is just the authors
initial list. If you find some glaring omissions
please
let me know.HTML and/or Publishers
As mentioned it is important that the designer have a strong
basis in HTML. That being said much of the design work done today is created in
a web design software application. Web design software has improved over the
years to become a useful and even required tool of a designer.Both the major browsers have design tools or
"Publishers" as they are commonly referred to. Microsoft offers
FrontPage
Express and AOL offers Netscape Composer. Both can be found on the
company website.
As well most commercial products have a free download and
trial period allowing users to try before they by the products.
As well as commercial products there are many shareware software packages that range from HTML text editors to complete GUI applications.
Hyper Text Markup Language (HTML)
The World Wide Web (WWW) is made up of HTML documents
containing formatted text, images, and sounds stored on 100's of thousands of
computer worldwide.
When web pages or HTML documents are viewed by a visitor or
client the web browser will formatted the document using the codes or
markup
tags and display it on the screen. How the document is displayed varies
depending on a number of factors including the type of browser, the type of
computer (monitor, video settings, resolution, etc) and personal preference
settings.
Web pages can be created in a
text editor using the
ASCII
character set recognized by any modern computer. Markup tags are defined by
angle brackets < >. An HTML tag *must* have a beginning tag and an end
tag. An example would be <B> begins to bold text and </B> ends bold
text. Any text between the tags would be rendered as bold text by the readers
browser. Tags are case insensitive (upper or lower are acceptable).
HTML ignores white space, truncating any it finds to a
single space. This includes tabs, line breaks, multiple space, etc...
A web page must begin with <HTML> and end with
</HTML>. This tells the visitor's browser that it is reading a web page. A
web page is often broken up into a head and a
body.
The head of the document (<HEAD> and </HEAD>)
contains non-displaying text such as the document name and the body
contains the document's information. The head can also contain
META
tags, scripting and programming
code.
The body of the document (<BODY> and </BODY>)
contains the html tags which display the text, graphics and other information.
Because blank spaces are truncated into single spaces it is
necessary to define paragraph and line breaks. Use the <p> and </p>
to define a paragraph and use <br> to set a line break.
HTML Quick Reference
The following table is a quick reference of some of the most
common tags.|
<HTML> |
display and ends an HTML document |
</HTML> |
|
<HEAD> |
used to add non-displaying text |
</HEAD> |
|
<TITLE> |
adds the document name displayed on the title bar |
</TITLE> |
|
<BODY> |
contains the main or displayed part of a document (see
below) |
</BODY> |
|
<Hl .. H6> |
formats text for headings from 1 (the largest) to 6
(the smallest) |
</Hl .. /H6> |
|
<B> |
bold the text (<strong> also displays bolded
text but is listed as a depreciated tag </strong>) |
</B> |
|
<I> |
italicizes the text (<em> also displays
italicized text but is listed as a depreciated tag </em>) |
</I> |
|
<U> |
underlines the text (underlined text is often
reserved for a hyperlink) |
</U> |
|
<P> |
determines where a paragraph begins and ends (end
tag not currently required) |
</P> |
|
<A.... > |
creates a hypertext link to another spot on the
current page or another document (see below) |
</A> |
|
*Exceptions that don't use closing tags |
|
|
|
<IMG..... > |
displays an image defined by the information typed
into the tag (see below) |
|
|
<BR> |
adds a line break |
|
|
<HR> |
displays a horizontal rule or line across the page |
|
|
|
adds a non-breaking space (not really a tag but
handy to know) |
|
|
<BLOCKQUOTE> |
Indents the enclosed text on the left and right
margins |
</BLOCKQUOTE> |
|
<OL> |
Encloses a number (ordered) list |
</OL> |
|
<UL> |
Encloses a bulleted (unordered) list |
</UL> |
|
<LI> |
A list item within an ordered or unordered list |
</LI> |
|
<TABLE> |
Creates a table (see
below) |
</TABLE> |
|
<FONT> |
Modifies the font (see
below) |
</FONT> |
<html>
<head>
<meta name="Description" content="This is where you describe
your company or organization for search engines.">
<meta name="Keywords" content="add, keywords, separated, by,
commas">
<title>Document Title</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body bgcolor="#BBCAC5" background="background.jpg"
text="#000000" link="#990033" alink="#3333CC"
vlink="#999900">
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<br>
<p>Paragraph Text</p>
<p><blockquote>Indented Paragraph Text</blockquote><p>
<p> </p>
<p><a href="http://#anchor">Anchor</a></p>
<p><a href="http://www.pipcom.com/~bmc/"><img src="http://www.pipcom.com/~bmc/pics/logo99.gif"
width="59" height="30" alt="joansvoboda"
border="0"></a></p>
<table border="2" width="300" cellspacing="2"
cellpadding="2">
<tr>
<td>Cell One Row One</td>
<td>Cell Two Row One</td>
</tr>
<tr>
<td>Cell One Row Two</td>
<td>Cell Two Row Two</td>
</tr>
</table>
<ul>
<li>Bulleted Item One
<li>Bulleted Item Two
</ul>
<ol>
<li>Numbered List Item One
<li>Numbered List Item Two
</ol>
<hr>
<p><a name="anchor">Clicking the anchor above will jump to
this spot.</p>
<!--Comments can be added if they are enclosed by these tags -->
</body>
</html>.
Anchors
An anchor or link contains at least one attribute and the
most common is HREF or Hypertext Reference. The HREF contains the path or
address to a linked document. The address or URL (Uniform Resource Locator)
describes where the linked document is located and the method of retrieving that
document.An example of a complete URL or link would be...
<A
HREF="http://www.pipcom.com/~bmc/index.html">joansvoboda</A>Once you have retrieved a document from a website the links
on that document only need to point to other files in the same site and may
contain partial or relative links. An example would be...
<A
HREF="second.html">The next page</A>
The text between the open and close anchor is displayed on
the page as information about the link. By default the text is blue and
underlined.
Though a full path reference or URL is always more accurate
and must be used when moving to another site, a relative link works well if the
destination document is located on the same site. To create links within a
website...
-
Just
refer to the filename if it's in the same directory
-
Type
the directory name then a front slash if its in a sub or child directory (subdir/doc.html)
-
Precede
the filename with two dots and a front slash for a parent directory (../doc.html)
and repeat this for each parent (../../doc.html).
An anchor can also point to a specific spot on the same page
or a specific spot on a different document. The spot that the link points to
must have a named anchor (target) attached and the reference link must include
the number symbol (#) then the name of the anchor. Use the same naming rules as
above. An example of a link to an anchor would be...
<A
HREF="#sub">Refers to a target on the page</A>
<A
HREF="http://www.pipcom.com/bmc/main.html#sub">Refers to a specific
spot on a different document</A>
An example of an named anchor would be...
<A
NAME="sub">Sub Topic</A>
Images
Image tags work much the same as the anchor tag but don't
require an end tag. All images require a source (SCR) attribute. The two main
types are JPEG and GIF. Generally use JPEG (.jpg or .jpeg) for photographs and
use GIF (.gif) for Clip art or Logos. An example would be...
<IMG
SRC="logo.gif">
<IMG
SRC="http://www.joansvoboda.com/images/logo.gif">Images have a number of attributes that can be added as
needed.
ALIGN = CENTER|LEFT|RIGHT
VALIGN = TOP|MIDDLE|BOTTOM|BASELINE
ALT = Descriptive Alternative Text ("placed in quotes")
BORDER = 0 for no border or 1 and up for place a border around the image
HEIGHT = defines the height of the image
WIDTH = defines the width of the image
Images are treated like a text character to a browser. Unless
you use attributes to modify how they are displayed, images will be placed in a
document as if they are the next character in a string of text. This allows them
to be used as references for links.
Images Used as Links
To use an graphic or image as a link by placing the image
between the anchor tags. An example would be...
<A
HREF="index.html"><IMG SRC="logo.gif"
BORDER="0" ALT="Our Logo"></A>BORDER = "0" - removes the default 2 pixel border
that is placed around an image if it is used as a link
ALT = displays the alternative text if visitor is not using graphics or reads
alternative text. This text is also displayed when a cursor moves over the
picture
Body
The <BODY> tag determines how the document will
display. It has a number of attributes...BGCOLOR = "rrggbb" - can contain a red/green/blue
hexadecimal number (see below) or a named
color
LINK = "rrggbb" - the link color
ALINK = "rrggbb" - the active link color
VLINK = "rrggbb" - the visited link color
TEXT = "rrggbb" - the text color
* note that COLOR is the American spelling
Images can also be use in the <BODY> tag to display
backgrounds. Some care should be used to match the image with the text as this
is a common mistake made by designers. The background image goes in the BODY
tag. An example would be...
<BODY
BACKGROUND="background.gif">
Pages can use both a background image and a background color
for visitors who don't display graphics. An example could be...
<BODY
BGCOLOR=#88C5D1 BACKGROUND="background.gif">
Color
The color attribute is determined in 2 ways. The first is by
a hexadecimal value made up of 6 digits. Hexadecimal digits use 16 values
including 0 through 9, A, B, C, D, E, and F. The first two digits determine the
red value the next two determine the green and the last two determine the blue
commonly referred to as the rgb value.
The second method is to use a "name color" such as
red or green. Most common color names can be used and there are many resource on
the Internet to help with determining page colors.
Always be aware that visitors are using a variety monitors
and color preferences and the color you choose may not display the same on
everyone's screen.
Font
The <FONT> and </FONT> tag modifies text size,
color and face.SIZE = "n" - a number between 1 (smallest) and 7
(largest). Also + or - 1 through 7 compared to baseline font
COLOR = "rrggbb" - rgb value or named color
FACE = "n" - a named font (user must have font installed locally)
An example could be...
<FONT
SIZE="-2" COLOR="red" FACE="Arial">Small, red
text in Arial</font>
Note: Stylesheets should be used rather
than the <FONT> tag in most instances.
Table
Tables can be used to place information in columns &
rows. A table definition begins with <TABLE> and ends with </TABLE>.
Tables are made up of Rows <TR></TR>, Headings <TH></TH>
and Definitions (cells) <TD></TD>.<TR> and </TR> - begins and ends a row
<TH> and </TH> - begins and ends a heading
<TD> and </TD> - begins and ends a definition
Tables can be nested to create different effects. Table also
have various attributes...
ALIGN = LEFT|RIGHT|CENTER
BORDER = "n" - determines border width
BORDERCOLOR = hexadecimal value or color name
BORDERCOLORDARK = two edges of the border
BORDERCOLORLIGHT= the other two edges of the border
WIDTH = "n" - can be a percent (n%) or a number based on points (n pt)
CELLPADDING = "n" - space between content and cell walls
CELLSPACING = "n" - space between the cell and the exterior frame of
the table. Some of the table attributes can be applied to individuals row,
columns and cells. The table definition and heading have an extra attribute.
COLSPAN = "n" - extends the contents of a cell into the next column(s)
ROWSPAN = "n" - extends the contents of a cell into the next row(s)
Attributes
Most tags allow for attribute or parameters such as
alignment, color, width & height, borders, alternative text and various
others. Parameters follow the tag within the braces and are made up of a name
and a value pair. There can be multiple attributes with each one separated by a
space. Though some times it is not necessary, it is good policy to always place
quotes around the parameter values. Meta
The <META> tag is used to present information about an
HTML document to browsers, search engines, and other applications. A meta tag
can be used to describe a document, define the keywords that a search engine
will use, redirect visitors to the correct page and various over background
applications.It is quite important to include <META> tags in the
main documents of your website. If you don't include these tags the search
engines will define your site based on their own criteria using the first 25
words that they find, regardless of what they are. The two main tags for
defining your site are;
Description - containing a 25 (approximate) word description
of your organization
Keywords - containing words that interested people will type into a search
engine
Extended Character Sets
All alphanumeric characters (A to Z and 0 through 9) and many
symbols will display on a web page simply by typing them in. Several characters
including many European symbols require that their decimal equivalent be entered
to display properly on the page. As well some symbols are used by HTML for
special purposes. An example is the less than (<) and greater than (>)
symbol which is used to define tags. In order to use these symbols a developer
must add them using their decimal equivalent or HTML special
entity reference. To enter a symbol from the extended character set begin
with an AND symbol (&) and end with a Semicolon. An example would be
  or which would both place a single space in that spot that
you place this entry.Frames
The <frame> </frame> tags allow designers to
place two or more web pages on the same screen. Frames are setup in a
parent/child format allowing designers to control the flow of information from
one frame to another. The <frameset> </frameset> tag allow the
designer to determine the size and placement of the individual frames. The <noframes>
</noframes> tags allow designers to display information for browsers that
don't use frames.A few things to note when using frames are that the title on
the top of the page displays the parent's <title> information regardless
of the child frame contents. As well the URL in the address field also displays
the location of the parent document. When placing links in a frame be sure to
direct the page to the right frame using the target attribute.
Website Design Tools
Style Sheets (HTML 4)
Style sheet are attached to a document using a <LINK>
tag in the head of the document, embedded in a document with the <style
type="text/css"> </style> tag or defined for a specific area
of the document (this last options sort of defeats the purpose of stylesheets).
A stylesheet file name ends with a .css extension and is a
text document containing the styles that will be applied to the document.
Stylesheets can contain information on the size and color of headings and links
and can define various specialized tags to modify text throughout the site.
Stylesheets are still relatively new and only IE3 and up and NS4 and up use
them. Older browsers that encounter Stylesheets will ignore them (if the
designers uses <!-- and // --> around the style definitions) and display
the page using the browsers defaults.
Once a stylesheet has been linked to a document, styles can
be applied to tags with the class="" attribute and to text using the
<div></div> and <span></span> tags.
File Transfer Protocol (FTP)
Though all the design work can be done on your computer
off-line (with the exception of testing your scripts) you will need to place
your finished web documents on the website. File transfer protocol or FTP is the
method used to place your documents on the website server. There are a number of
FTP programs available from the most basic command line program that comes with
Windows to the freeware and shareware programs that most ISPs distribute with
their startup accounts to commercial based software.What FTP does is allow the website manager to connect their
computer (the Local computer ) to the server (the Remote computer). You will
need the address of your service's FTP server in order to connect to it and then
the username assigned to the directory and finally a password to connect to the
server. Once connected the FTP program will display the files with their name,
size and date information and allow the user to replace, modify or delete these
files as needed. The program will usually display the contents of the remote
computer's directory beside the local computer's directory. This allows the
maintainer to compare the files on the local computer with the ones on the
website.
Sending a file to the server or placing the file on the
website is called uploading and getting a file from the server is called
downloading.
The FTP program may refer to the computer you are connecting (the one the
website is on) as the remote computer and your computer as the local computer.
When more than one person is updating the website it is a
good policy to download the file (the remote copy) from the server before making
changes to it. This way you are making changes to the latest version of the file
rather than writing over changes someone just made. Consider the copy on the
website as the original.
HTML Editors
Though most word processors advertise a "publish to
HTML" option the actual output can often leaves something to be desired,
especially when graphics and tables are being displayed. Having said that it can
be a quick and easy way of creating an HTML document. It is extremely important
that the website maintainer has a working knowledge of HTML as many
"publish to HTML" options will add tags that need to be modified.
There are a few commercial HTML design programs that work
quite well though it is still necessary to modify the HTML form time to time.
Most design software integrate an HTML text editor into the program.
There are also number of free alternatives which can be very
useful tools. A free text based HTML editor can provide many tools that assist
web developers. Most of these programs also integrate a web browser to allow the
developer to view the page.
Another alternative is FrontPage Express or Netscape Composer
which are free HTML design programs and publishers. Like any other HTML graphics
based program the developer will need to occasionally open the file in a text
editor to "tweak" the file. These programs also have a bad habit of
modifying the document without telling you. To publish from one of these
programs the user, usually, will need to enter the complete pathname (not the
partial one used to connect to the ftp server).
One of a web designers main tools remains a good text editor.
The program Notepad is less than adequate as it often loses line breaks making
the document hard to read. Wordpad one of the most used programs for
non-commercial web designers, just make sure to save the document as text.
Designers can also use their favorite word processor but be sure to save the
document as a text or HTML document when saving it. You may also want to
consider purchasing a professional HTML text editor if you are working on a lot
of documents.
Graphics
A picture is worth a thousand words and a second visit to a
website. Some thought must go into the graphics used on your site. A poorly
designed graphic distracts from the sites content but the lack of graphics can
be worse.When adding graphics to a web page keep in mind the size of
the image file and how it will contribute to the speed that the page will
display on the visitors browser. Use a graphic program to "optimize"
your images before adding them to the page. Try to get your clipart image down
under 15 kilobytes if possible and keep photo's under 35 kilobytes if possible.
Generally use the .gif format for clipart with 256 colors or
less and use .jpeg for photos or images with a large range of colors.
The GIF format allows you to define one color as
transparent
which is usually used as the background color. The GIF format can also be used
to create animations.
The JPEG format allows you to set the level of compression.
Though highly compressed images produce smaller file sizes the image quality
also deteriorates. Though there is software applications that will assist you
with optimizing your images it still takes some trial and error to get that
image perfect.
It is possible to control the text flow around images by
adjusting the ‘align' attribute. If you can't get that image in the exact
place consider putting the text and image in separate cells in a table.
Always use the ‘alt' attribute to add a text definition for
your images. This will be the words that text browsers display and the words
that audio browsers read.
Sound & Animation
I have placed these two categories together as they often
come under the category of multimedia. They also involve more complex web
designs, often involving some programming or plugins. MPEG was an attempt to
create a common standard out of the dozens of sound and animation standards
available. MPEG 3 has upped the anti for multimedia content as most multimedia
players recognize it, it involves very little training to use and is simple to
incorporate into a site. Look for MPEG material to appear on the Introduction to
Computer site in the future.
There are many different formats though RealNetworks and
Macromedia stand out. RealNetworks content must be placed on a server that can
stream audio and video content. You may have to shop around to find a service
that provides this and the web page visitor must have a RealNetworks player (or
equivalent player) installed to view/hear the content. Macromedia produces
multimedia development software which can be placed on any server but the web
page visitor must have a Shockwave plugin installed to view the multimedia
content.
A simple and economical solution to placing multimedia
content on your website is to use .gif animations. GIF animations are a series
of images or frames setup to display one after the other. There are many
graphics programs that allow you to assemble and create images then save them as
.gif files. Treat them as you would any other plain (large) .gif image once it
has been saved.
MPEG is another economical way to place multimedia on your
site. You will probably have to purchase a development program but placing the
content on a website can be as simple as creating a link and most multimedia
players (including the one that comes with Windows) will play it.
Browser Comparison
Though there are many different browser the two main ones
used by the majority of people are Microsoft's Internet Explorer and
AOL's Netscape Navigator both originally based on the first web browser;
Mosaic.
Many universities and community based Internet services offer text accounts
which provide Lynx as the browser. Thought the majority of visitors use graphic
based browsers, a designer must be aware that a significant number of visitors
are using text based browsers to view the site.The companies that develop Internet browsers often place
support for non-standard tags in anticipation of the changing nature of the
Internet. This can cause the various browsers to display the same page
differently. The way that the various companies implement the HTML tags in their
program can also be different causing a confusing situation for the web
developer.
Many web design tools use shortcuts and none standard HTML
based on the browser that they are targeting. As you are building your site keep
checking it to make sure that it conforms as closely as possible to the W3C
guidelines. There a number of resources available on the Internet and through
software applications to check your HTML for browser compatibility. Also be
aware that each browser has various versions though it is not always possible to
support the older browsers.
The best rule it to stick to standard HTML or provide a
separate page for text browsers. This is especially true when using frames or
complex programming. One should also note that browsers designed for the
visually impaired use standard HTML tags to read the information to the users.
Test your website in more than one browser and ifpossiblel a
text browser as well. It is more difficult to have various versions of a browser
but if possible this also helps.
etting up security
As most people won't be setting up their own secure server
the scope of this section is limited to the topics of protecting
email
and small business or organizational transactions. Email can be protected using a
service or an
application
(program). There are others but the two that stand out currently are
S/MIME
and PGP. S/MIME requires the user to register with a 3 party service
which issues a digital id that you attach to your message. Though this is
usually a commercial service there is often a free introductory period (Editors
note: one service offer to renew my trail period recently). PGP is both a
freeware or a commercial application that you run from your own computer.
Both methods allow users to
sign or attach a
digital
identification to the email message which verifies, to the recipient, that
the message is from the original person or organization and that the information
wasn't tampered with in transit. These methods also allow the user to encrypt
their message so that anyone intercepting the message wouldn't be able to read
it. You can also decide the level of encryption from low; in which a nerd with
some good software and enough time on their hands could possibly decrypt to high
(128 bit) which would take a whole mountain of experts weeks to decrypt if even
then. Most of us will choose somewhere in between as this process involves
increased time and file size.
Both methods use
key pairs of
public and
private
keys. The sender signs their messages with a private key which is kept
secure. The recipient is sent a public key which, depending on their
email program, will automatically or manually verify to them that your message
is authentic. Public keys are sent to the recipient through various methods
including posting it to a service, sending it through email or sending it as a
file (you can also post that public key file on an Internet site). The recipient
can add your public key to a file (sometimes called a
key ring) and use
it to verify any other message from the sender.
Encryption also involves using the key pair but in reverse.
Once your message is completed you encrypt the file using the recipient's public
key ensuring that only the recipient can ever access that message with their
private key. (Editor's note: Don't lose your private key!).
Small businesses and organizations that wish to offer
transactions over the Internet or
Ecommerce
can take their chances and set up an unsecured system, set up their own
secure
server or purchase a service from a third party. There are various
types including service that take a percentage of the transaction and/or charge
a service fee and/or charge for each transaction. Some organizations are more
reliable and you should always shop around before committing to a service.
Because this type of service is so new the length of time a company has been
operating is not always a way to decide. Things to watch for is down-time. If
your companies website is operating properly yet the customer or user can't
access the transaction server because it is down, too busy or misconfigured they
will easily be put off perhaps entirely. Watch for contracts that lock you in,
as the market is still developing and prices tend to fluctuate. It is easy to
switch services by simply changing the address on your website's order forms.
Security and Websites
As was stated at the beginning of this document the nature of
the Internet is an open system. Having said that - there are many reasons and
many ways to set up a secure or closed system within this open framework.
Private or member based discussion groups, private files or folders, protected
databases, copyrighted material to name a few all need some way of allowing them
to be distributed to the intended recipient only. Also many businesses are
creating Intranets which are closed systems only accessible to registered
users. An Intranet can provide a way of making company information easily
accessible and allow branch offices to communicate with each other easier.
Account Security
Your website itself is protected by your Internet Service
Provider's software. When you attempt to access your web space to change
or modify a file using a shell or
ftp
you are challenged to send your username and password. This is the first line of
protection and adequate for many website administrators.
Server Security
The server that your website is installed on is the
second line of protection. Most servers have security features built in to them
allowing users to password protect folders or build scripts to send a
username/password challenge to a user trying to access a file or folder. This
allows website administrators the ability to create discussion groups within
their site or to place confidential documents or information that is made
available only to registered users on their own website. Unfortunately many ISP
either don't make this option available, charge a premium to use them or only
allow their own employees to set them up.
Third Party Security
Another option includes
contracting the protection of
private files to a separate service, pay a third party to hosting a private
discussion group or obtain web space on another server that allows access to
security options. The entire Internet is as close as your computer connection
and whether the file the user is viewing is stored in your own current web space
or on another server is usually immaterial. When your customer or member moves
from one page to another the consistency of the website is the maintained by the
design, not the address of the separate pages. It is also possible to control
the address that is displayed if required.
Software Security
Another option is to use
JavaScript or Java applets to
control how customers or members access secure features. This option is only
available to users who are using modern Java enabled browsers. Scripts and
applets can control access to documents and databases, create content on the fly
based on user input, detect the browser the visitor is using and direct them to
the proper page, retrieve cookies and use that information to determine whether
a user has access to a certain area or not, as well as many other uses.
Copyright
Copyright is protect using the same process as any original
material (books, artwork, film, etc...). Anything that a user gets off the
Internet should be treated as privately owned information unless otherwise
noted. Anyone posting private information to the Internet should be aware that
copyright law is not the same in every country and may be difficult to enforce.
It is possible to set up a page that won't be stored on the users computer once
they leave the site but that will only slow down not stop users who want to
obtain information posted on a website. Notices of copyright are often added to
the main page of a website sometimes with a link to a page describing the
details of how the content can be used. Is Security Necessary?
Though you may think that it is not necessary to setup
security systems there are many reason to consider it. I have come across a
number of examples of people forging documents and email. A digital signature
will be the only way to verify whether a document is genuine or not. Another reason you may need is that many organizations need
to discuss draft articles, changes to bylaws and other documents that could
cause problems if they were made public before they supposed to. A secure
directory within your website is an ideal spot to store sensitive material
making it available for members and people who have the password.
I would be remiss to not point out and as all articles on the
subject also point out mining the Internet with malicious intent is also
possible. One of the latest malicious acts is to search websites for email
addresses and then add them to spam distribution lists. Unfortunately there is
very little that can be done to counter this.
Whether you decide to add a security component to your
website project it is a good idea to have a discussion about the topic when
planning the site and review your security systems periodically.
Design Tools
There are thousands of reference materials and user's guides
available for web designers. There are also thousands of different pieces of
software available to assist a developer in designing websites. A good graphics
program and a HTML editor are the main tools that a designer uses though there
are many others that a designer will also need. The table below is a list of
applications that a designer will want to have available. There are many good
quality software products available and many new ones added each day. When
choosing a software package check the companies website first to look for trial
versions, support service, upgrades, etc...To Contact us by E-Mail: JOANS followed by @ joansvoboda.com (formatted to foil Spam Bots!)
