Sponsored by Beachtech to raise funds for the Anguilla Computer Club.
All of the tools and material for this course were found as freeware or shareware on the Internet. This page contains links to live web pages that support the course, and alternate links to C-drive locations where you may have installed a private copy of the web pages (this makes access faster and does not require a live Internet connection every time you reference a page).This class was first taught at the Anguilla Library Computer Club, December 10-17, 1998. Here is a link to the club web site where there are pictures of the class and links to student web pages.
Now find the browser on your system, run it, and open "C:\webclass\getstarted.html". What browser are you running?
You can download a copy of webclass.exe from the Beachtech
web site at
http://beachtech.ai/downloads/webclass.exe
Preparation: Each student should first create a sub-folder in "C:\webclass" for their web page creations (this assumes you have already installed the Webclass files). Keep the folder name short, eight letters or less. For example, if your name is Charmaine, create "C:\webclass\char". You can use the Windows Explorer or the MS-DOS prompt for this task.
Make your first web page: Click the HTML Express shortcut on the desktop and answer the questions. That is all there is to do. It will create a web page for you. You may get stuck on the answers a few times, so here are some tips:
Type of page: select Netscape or Internet Explorer.
Title: My First Web Page
Headline: All About My Grandmother
Sub-heading: Lowenna Smith
Picture: browse to "C:\webclass\photos" and select any JPG file.
Custom Colors: This is tricky. If you create black text on a black background
you won't be able to read your page!
Background image: Browse to "C:\webclass\back~1" and select a background image at random.
Color text: Select a dark color.
Paragraph: Type in a sentence about your topic.
List of links: A "link" is a web page address, such as "http://news.ai" or
"http://cnn.com" (you don't type the quotes). Technically, these are known
as URLs (Universal Resource Locators). If you don't know any URLs, just put
in the two mentioned here. When creating web pages, it is best to extract
the URL from the web page itself into the clipboard, then past it into
your link. In that way you don't have to worry about mistyping it - more on this later.
Email address: [email protected]
Save your web page in "C:\webclass\char" (your folder) as "first.html".
Analyzing Your First Page: we will look at the web page you generated and analyze how it is put together. Follow these instructions.
Install:
HTML Express should be installed on the class PC already when you arrive and is
only used once. If you need to install HTML Express on a new PC, here are the
steps, starting from the MS-DOS Prompt and a diskette that contains
both the HTML16.ZIP file and the PKUNZIP program.
Of course if you use Winzip or some other method,
the idea is the same.
cd \
md wizard
cd wizard
a:\pkunzip a:\html16.zip
This should expand into two files: a readme file and the program, HTML16.EXE. Now create a shortcut to HTML16.EXE on your desktop (right click on desktop, New, Shortcut, Browse to "C:\wizard\html16.exe", Next, "HTML Express" as title, Finish).
Notetab Lite is
the freeware version of NoteTab Std, which is the simple version of NoteTab Pro.
It has a nice tabbed layout and macros for HTML tags.
The download for version 4.52 is a 1.22MB file, ntl452f.zip.
To install it, unzip the files into a temp folder. Then run Setup.exe and
take the defaults.
Anansi is only 810KB to download. To install it, unzip the files into a temp folder. Then run Setup.exe and take the default location: c:\Program Files\Anansi
Here is how you would do the install
at the MS-DOS Prompt, from a diskette that contains
both the ANANSI32.ZIP file and the PKUNZIP program.
Of course if you use Winzip or some other method,
the idea is the same.
cd \
md temp
cd temp
md anansi
cd anansi
a:\pkunzip a:\anansi32.zip
setup.exe
cd ..
deltree anansi
The first time you run Anansi you will be asked to define a "Project" and may be asked to selected a browser (Netscape, or IE or both). You will create a project called "MYNAME's Web Page" and you will put it in "c:\webclass\myname", which you will build. You can ignore the steps about FTP update for now.
Once you are in Anansi, you select a Project, then you Add Files to the Current Project. When you do that, they appear on the Open Project FIle dialog.
The manual is distributed as HTM files in the help folder, so clicking on help should bring up a browser page.If you have installed Anansi in the default location on the C drive, the manual should be available here. We are using version 1.0, but there are also beta versions of 2.0 available.
Multiple open files appear as Tabs along the bottom of the edit window. Then you configure your Browser(s) so you can use the Eyeball Test Icon (preview your page). When you insert an IMG, it inserts the height and width automatically and leaves your cursor in the ALT= string; this is very nice. You can put your favorite custom colors in a toolbar, making it easy to insert them into documents.
Anansi has an FTP upload feature that connects to your host site and uploads your files. To configure it put the name of the host system in the FTP Address and the relative directory from your logon directory in the FTP Directory. For the free hosting services, the FTP directory is usually "incoming". For Pair.com, the FTP address is "kappa.pair.com" and the FTP Directory is "public_html/web/beachtech/".
A few bugs: You need to save your files before you switch projects, if you have more than one project. Use the File-Save-All menu item.
|
Web Tutor:
The
Web Tutor
tutorials are distributed as an executable archive
file, webtutor.exe. The download is 1.38MB and
the material is very good.
Installation: To install Web Tutor, you execute webtutor.exe (Ctrl-ESC, R, B, then browse to where webtutor.exe was downloaded; try c:\downloads). Then to run it from your hard disk, which does not require a live Internet connection, you create a link/shortcut to file:///C|/WEBTUTOR/index2.htm and click it. |
|
Download webtutor.exe |
| Table of Contents | Hard disk | |
| Web Tutor Intro lesson: | Hard disk | On the web |
| Lesson 3. Line breaks, paragraphs, spaces. Inserting an image, pointing to the proper directory. Squeeze with Width= and Height=, then draw too. | Hard disk | On the web |
| Lessson 4. Links. Image links. Without the blue border. Reduce image size to make pages faster. GIF Wizard. Thumbnails. Internal links. | Hard disk | On the web |
| Lesson 5. Screen resolution. Indenting text. Making lists. Horizontal lines. Pre-formatted text. | Hard disk | On the web |
| Index and Quick Reference | Hard disk | On the web |
| The Color Picker installs with truncated file names so it doesn't work when installed on your hard disk. Our hard disk link is to a corrected Color Picker. | Hard disk | On the web |
| The Netscape Colors. 216 colors will not be replaced or dithered.Netscape Color Chart | Hard disk | On the web |
| Explaining the Netscape 216 colors | Hard disk | On the web |
| Aligning Images. Tutorial on <img Align=> | Hard disk | On the web |
| Fonts. You can change the size, shape, and face of a font, but the base font must be installed on the users system. Specify alternates. | Hard disk | On the web |
| Handy Dandy Font Viewer. A visitor only sees your font choices if they have the font installed. The font viewer shows a font in all different sizes with bold, italic and bold-italic. | Hard disk | On the web |
| Tables, an advanced tutorial. Tables allow you to allocate the space on your screen into rows and columns. Very useful. | Hard disk | On the web |
| Forms, an advanuced tutorial, but remember that you need to install your web page where you can do CGI/Forms. Most free places do not allow this or perhaps support a few standardized forms. | Hard disk | On the web |
| GIF files have from 2 to 256 colors per pixel. The fewer colors per pixel, the fewer bits per pixel and the smaller the file. PolyView graphics editor will not reduce this "color depth" below 256 in the free version, but Paint Shop Pro will and GIF Wizard on the Internet will do it, plus other efficiency changes. JPG files, on the other hand, always have millions of colors. You make them smaller by increasing the Compression Rate (50 is recommended). Both types can be made smaller by reducing the size of image and by ensuring that the resolution is 72 dots per inch and no more. | Hard disk | On the web |
| GIF Wizard is a web page that will analyze any GIF file and returned suggested smaller versions. The smaller GIF files will have reduced colors and other changes. You just select the one that is the smallest while still looking like your image! | Hard disk | On the web |
| A "thumbnail" is a small version of an image that links to the full image. | Hard disk | On the web |
| Next subject. | Hard disk | On the web |
A Free Web Hosting Service. Angelfire is a site where you can get a free web page of up to 5MB. You can upload your files using Netscape or a recent version of IE. They put a popup ad on each page, but they give you the option of deleting popup ads and we suggest you do so. Popup ad windows are irritating and distracting to the visitor. For tips on using Anglefire, go to the Beachtech "Free Page" section on Angelfire.
Sub-Folders. A large web site is easier to manage if you put groups of similar files into sub-directories (folders in Windows 95 terms). However, many free hosting services do not allow you to create sub-directories, so we suggest you keep all your files (HTML, GIF and JPG) in the same directory. Later, if your site grows unwieldy you can create some sub-directories.
Another Free Web Hosting Service. Ice Storm offers 3MB free, no banner ads. Use Netscape or a recent IE version to upload your files. For more information on using IceStorm, go to Beachtech's evaluation of Ice Storm.
More Free Web Hosting. For more information on how we evaluated the free hosting services and tips on how to use them, read the Beachtech "Evaluations" page.
A Reasonably-Priced Hosting Service. Pair.com offers very fast, professional virtual hosting at a bargain price. Starting at $5.95 per month. Pair.com is the home of many Anguilla web sites such as News.ai, Net.ai, and Webdesigns.ai, among others.
[email protected]
Yahoo Mail is
a free service that is fast and easy to use. You access your
mail through a web browser, so you must be connected to
the Internet at all times. With an Anguillanet account, you
download your mail to your PC, then disconnect and read it.
When you are ready to send your replies, you reconnect.
Your email address will be something like [email protected]
Iname is another
low-graphics system like Yahoo. Sometimes Yahoo is too
busy, so try Iname. Hotmail is the best known service,
but requires a browser with frames and is very busy.
Your email address will be something like [email protected]
Freemail is a
free email service for people in Anguilla. You dial a local
number, exchange your email, then hang up. The mail is passed
on to the Internet 3 times an hour. There are limits on the
size and volume of mail you can send, but this is a good service
for small volume email users. Your email address will be
something like [email protected]
Common tasks: To save your file in a different format, use Export to do a Save As. The default JPG compression of 50 is fine. To resize your image, use Operations-Change Pixel Resolution, which generates a new window with the resized image. To crop out the uninteresting portions of an image, use Tools-Area Selection Tool, then drag the mouse to select the area you want to retain, then do Edit-Crop. You may now want to Resize the height or width to your desired standard, say 300 or 200 pixels, then use the Area Selection Tool again to adjust the other dimension. I have also used the PolyView tool to make thumbnail web pages and it worked.
PolyView fits on a single diskette. Please note that this is a "crippled" version--you cannot Export a file with fewer than 8-bits of color (without buying PolyView), but you can convert from BMP (MS Paint) to GIF (web clipart), then use the GIF Wizard web site to optimize your image.
Sample Graphics Files. The web class comes with 4 folders of sample GIF and JPG files:
A Great Image Editor. Paint Shop Pro is what many people use, who can't afford Adobe Photoshop, but version 5.0 is somewhat overkill, with layer support. There are a number of good books on how to create web graphics with Paint Shop Pro. Check their web site.
For maintaining a larger size, you can use FTP (File Transfer Protocol). This program can create directories, move around them, transfer several files at once, etc. However, you must be careful to always transfer JPG/GIF files in Binary mode and HTML files in Ascii mode. This is very important.
The free hosting services sometimes support FTP as well, but they make you upload into a general holding area, then rename the files from the holding area to your own directory using the browser, one by one. Cumbersome.
The Anansi web page editor has built-in FTP capability so that you can upload your changes as soon as you make them.
A Well-Known FTP Client. A full-feature FTP client that you can download is WS_FTP Limited Edition. The download is about 0.6MB.
A Cute FTP Client. A very easy to use FTP program that uses an Explorer-like interface is CuteFPT. You can download it here and the download is 869K.
If you are taking the class at Beachtech, we
can create an Anguilla redirect name for you as web.ai/burgers
Here is what a redirect page looks like in HTML, using a Meta tag
to refresh the page to another web location after 1 second:
<html>
<head>
<title>Evaluate Free Hosting - Redirect</title>
<meta http-equiv="refresh" content="1;URL=http://beachtech.ai/evalfreepages.html">
</head>
<body bgcolor=#ffffff>
If this link does not jump automatically to the "Evaluate Free Hosting" site,
<a href="http://beachtech.ai/evalfreepages.html">click here!</a>
</body>
</html>
The Internet is like an unimaginably huge bulletin board where anyone can post anything, but no one is forced to read it. Here are some simple, practical steps you can take to ensure that people know about your web site:
http://news.ai,
or http://stars.com/Authoring/. The portion before
the first "/" is usually case-insenstive, but the portion after
the "/" must usually be spelled exactly right (i.e., the capital A is
critical).
[email protected]
[email protected]
[email protected]
<html>
<head>
<title>White Hill Gallery- Art of Anguilla and
the Caribbean</title>
<meta name="description" content="The White Hill Gallery
on the Caribbean island of Anguilla specializes in folk
art of Anguilla and the Caribbean. The home page links to
art pages by Caribbean island.">
<meta name="keywords" content="art,gallery,Anguilla,
Haiti,Jamaica,prints,oils,watercolors,prints">
</head>
<body>
<h1>White Hill Gallery</h1>
...
Things Not To Do:
Things That Probably Don't Work:
Information About AnguillaAnd here is the HTML code for this link:
<a href="http://news.ai/search.html">Information About Anguilla</a>
Once we post an article on our web site, we never move it or remove it. So you can link your web page to our news issues with the confidence that they will be there for years to come. And, most articles are cross-referenced by topic in our index pages, shown at the bottom of every web page, so you can link directly to a specific article if you wish.
How to link to the latest news?
Just insert this piece of HTML code at the bottom of your
web page:
Visit the <a href="http://news.ai/">Anguilla Local News</a>.
This always links to the main news page, which contains
the latest news. This page is also stored under another page
name based on the date, i.e., http://news.ai/news980115.html
... so if you want to link to a specific issue or article, you must
link to the named page, not the main page. You can find links to
all issue pages on the Back Issues
page.
A Link Graphic You Can Use.
If you want to link with a graphic image, here is one you can use:
And here is the HTML code to paste in your web page to display this logo as a link to our site:
<a href="http://www.news.ai"><img src="clipart/newslink.gif"
width=468 height=55 border=0 hspace=5 vspace=5
alt="Read the Anguilla Local News"></a>
How to find the link address for a specific article?
To find the link address for an article, search our cross reference pages. For example, to find an article on the Roti Hut restaurant, click on the Menus link at the bottom of any page. This brings up a list of restaurants. Now click on the Roti Hut link.
When the Roti Hut article appears, highlight the web page address
window and Copy it into the clipboard. Then Paste it from the
clipboard into your web page. For example,
<a href="http://news.ai/ref/rotihut.html">The
Roti Hut.</a>
When the Anguilla Local News started, all articles of an issue were combined into a single file. Therefore, addresses of individual articles looked like this:
http://news.ai/news9706.html#rotihut
where "http://news.ai/" is our web site,
"news9706.html" is the web page for June 1997,
and "#rotihut" is the "anchor" for an article on
Roti Hut restaurant. When you click on this link, it pulls up
the entire June issue but positions you at the Roti Hut article.
Unfortunately, retrieving the entire article can be very slow.
Therefore, articles are now also posted as separate files in
the "http://news.ai/ref/" directory of our web site.
For example, a link that only pulls up the article
on the Roti Hut (and not the rest of the articles for June, 1997)
is much faster and less confusing:
http://news.ai/ref/rotihut.html
We are in the process of breaking up the old news issues as well into separate article files for easier referencing.
Linking to pictures?
You are welcome to link to articles that contain the
picture you want. For example, if you want to give
your readers views of Shoal Bay, insert a link to
http://news.ai/ref/shoalbay.html in your page.
Please do not link to
individual pictures, especially not as in-line
images in your web pages, since this slows down our
server every time your web page is accessed.
If you wish to use
one our our images, please
email us first
for permission. You can then copy the image file
to your own web site.
Pictures come in three sizes: xxx-sm.jpg is small (200 by 133 pixels),
xxx-md.jpg is medium (500 by 333) and xxx.jpg is full size.
AnyBrowser.com promotes web pages that can be enjoyably viewed on any browser, instead of only on Netscape or IE 4.0.
Amazon.com has an amazing number of books on HTML and Web pages. An inexpensive book that I have found very useful both as a reference and for learning HTML is HTML 4 for the World Wide Web by Elizabeth Castro.
"Publishing a Book on the Web" is another class that Bob Green put together in 1996. There are versions in HTML, PowerPoint and a multimedia HTML version where you can hear Bob give the lecture as you read the pages. Although the references are a little dated (i.e., new books have been published since 1996), the basic material is still valid.
Alternative Download Sites: Each of the tools mentioned in this class is linked to the tool's home page, where you were able to download the version used in this class during December 1998. However, these sites could disappear or move or the new version might not be suitable for the class, so here are links to the Beachtech web site where I have archived all current versions:
Notes on how this class was put together.
The WindowHtml Program used to create the tabbed pages of this class.
Computerclub.ai: the Anguilla Computer Club.
The Personal Home Page of Bob Green, the author.
Freemail.ai: How to get free email in Anguilla.
Can Anguilla Become a Silicon Isle?