WWW Authoring and Design
Internet Training
Web Page Basics
TUG Program June 2000
Code ~ Titles / Meta Tags ~
Page / Screen
Size ~ Images ~ Web Hosting ~ File Transfer ~ Links A web page is a great medium for sharing information. Perhaps you have a new
child, grandchild, family news or a new business or product. Some are involved
with hobbies and that also is a great platform.
One of the ways people develop web pages is saving an existing page that is
pleasing from the web . From the browser do a File, Save as to your hard drive.
This then becomes a template for your content. The editing can be done in
Notepad on a PC. Do not eliminate any necessary code. What is necessary code? At
this point you do not know.
There are many web page development software products HTML Editors. One
that comes to mind is Front Page. If you know nothing about web design, and do
not wish to learn, this application may be for you. It is a do it automagically
with enough code to sink a battleship. One can sees pages created in Front Page
all the time ... many look the same. It is not inexpensive either. Truth - a
little knowledge is not good - I cannot figure out Front Page! Some also use the
MS Office Suite products to save as HTML. Again tons of redundant code ... and
fonts used that are MS specific. Many web pages developed with MS products
return a totally blank page in Netscape. Check your pages in several browsers
and versions.
I use HomeSite and have for several years. Most other HTML Editors seem
overkill to me. We should strive to be cross platform on the Internet, that
means operating system and browsers.
Many web sites offer tools to create web pages online. AOL has software that
can be used, and I hear that it is not bad. Free hosting and free software to
create pages; what more could one ask? How does anyone make money this way?
Advertising on your web page! Tradeoffs everywhere. Your ISP may offer hosting
at no or low cost for personal web pages. An example on ExisNet is Ed Holmes
page on Aviation Medicine .
Several members have web pages listed on The Umbrella Web Site under Member Pages . Let me know if other
members have web pages. Note that the pages are sponsored by ExisNet and have
been for many years.
Code
There is in every web page coding called Hypertext Markup Language (HTML.)
There are advances in the code, but for starter pages the basics will do. Each
piece of code starts with this symbol < (lesser
than), and ends with the opposing symbol > ,
greater than; capital comma and capital period on the keyboard. Each element
that is opened, must be closed....BODY opens and /BODY closes, etc. Remember
each has the opening and closing symbols also. Often errors are found when each
element is not closed ... or a symbol - < or
closure is missing. Do code the colors and fonts as one never knows what it will
look like on anothers screen settings. While browsing do a View, Page Source
from the menu bar to see examples of the coding behind a web page. Page Titles / Meta Tags
The title of a page is critical. This is what search engines report. If one
searches on Hampton Roads, those words in the title of a page will return the
page to the search query. Other important elements are META Tags ...this
goes in the code heading of a web page, and they are tools for search engines.
If a web page is designed with a graphic front page, no title and no meta
tags, there is nothing for a search engine to find. Perhaps you do not wish to
be found. That is OK, but search engines find the pages nonetheless, unless they
are coded not to be found!. Often a search engine returns a description that has
listed: No Title and in the description: Your browser does not support frames.
No help at all!! One should have a good descriptive title and meta tags to
include a description that enhances the title, really describes the content of
the site, and a good string of keywords. Keywords are what persons searching for
a subject type into a search engine query. If you are offering tooth paste, then
that plus tooth care, tooth cleaning, etc., would be good keywords.
Page / Screen Size
Design for the most common monitor screen size? Some do planning on a 15"
monitor full screen; some 800 x 600; others 1024 x 768. Consider the 20+ million
that use AOL. The default browser screen is tiny. Mac screens are smaller also.
This line is 620 pixels wide and generally the size screens I design.
On my 17" monitor there is still a scroll bar. One would need to scroll to
read sentences or to see entire images. I like to see all the main information
on the first screen . . . and no more than three page downs for an entire page.
Images
A picture is worth a thousand words? Definitely in the case of babies,
beautiful people, and beautiful scenery. A product image is also a good thing.
How do you add graphics? Photos may be scanned, placed on CD when developed, or a digital camera can
be used. Software is necessary.to adjust the image for the web page. Images
should be a large enought to do the job, but not heavy enough to make the page
take forever to load.This is a good icon size and is only 2k. The above image is larger than I would normally use on a web page but the
subject is longer than most! 887.9 ' . The dimensions of the image are 610 x 229
pixels or approx 8.5 x 3 " at 72 dpi ...for the web. This is the Battleship
Wisconsin passing through my front yard, the Elizabeth River. The image
has been optimized for the web in a photo editing software and is 12Kb . Helpful
for page weight! Page weight translates to time it takes to load a web page. My
limit on a page loading time is 15 seconds, others say 10 seconds. If I do not
know what the page is all about in that time frame I am gone. This same image not optimized for the web and is 55Kb. Total weight of a
web page, text and graphics should be no more than 30-50K.
If you are color blind and / or cannot spell, do get help with the web page!
A WWW page is first of all a visual experience. General design tips are no more
than three colors, three forms of text including font and formatting. Be sparing
in the use of busy backgrounds and moving elements. Not everyone has 25 year old
eyes! Backgrounds often make the text difficult to read. KIS . . . Many web
pages look like pin ball machines. If that suits your audience go for it.
Generally content is king, enhanced by relevant visual images. A visually
balanced page that is easy to read, has good continuity, and is easy to navigate
is a good goal.
Web Hosting - Where will your page reside?
You must select a host for your web pages to reside - a connection to the
Internet that is always online. Your dial up connection, or one of the web
hosting sites mentioned above can be used. Those with cable modems or DSL lines
might think they could host their own, but you must sign an agreement that you
will not use your connection as a server. And they check! Some cable providers
have limited downloads due the heavy use of bandwith on their sites. MP3 files
are often the culprits.
Nice web
site clean, good visuals, tells you what they are about quickly and without
page clutter. Examples of backgrounds and moving elements Irish Connections and a busy web site. It is difficult to focus on the
subject of the page when so much is going on. Photo Journal pages of a recent Hampton Roads Event! Web Page Transfer FTP
How do you get your web pages to the host or web server where they will
reside? That is the next part of the program . . .
Arden Skelton and Ralph Rogers of ExisNet joined the presentation. Arden (aka
Spook) showed File Transfer Protocol (FTP) examples using WS_FTP and Cute FTP.
See Exis WS_FTP instructions online at WS_FTP.
The software is available from download.com
Links
Use you favorite search engine and do a query on HTML Editors and Web
Hosting. Search alltheweb.com a
really fast search engine.
CNet
offers links to many HTML Editors, Graphic Programs, Reviews, and Tips for
Web building. reviews of free web hosting sites
. . . their builder.com has many
articles tips and tricks on site design. I developed a page for HTML and
Graphics on ExisNet Interesting Places: HTML and Graphics for Web Pages.
Have a look at Arden Skelton's web pages Wildlife Photography.
Web Hosting
Compliments of ExisNet
800 x 600 is becoming the average with a 17" monitor. The following line is
780 pixels wide.
6/3/2000