HTML Starter Kit

	Flowers ^{@}>-`- ,--}----} for Beginners
		How to View and Copy HTML Edit HTML - Bold, Italic and Underline - Special Formatting Quirks Add Graphics or Copy them Add Links to - another Web Site - another Page on Your Site - further down the Same Page Link from a Graphic Icon Add Music Get a Free Template of a Web Page More Tags: The HTML Reference Library	Now which Browser and Which HTML (2, 3.2, 4 ...)? Browser Limitations The HTML Writers' Guild JavaScript and Java Three Mistakes and the Alternatives: Only One Browser or free CDs Slow Loading Graphics or Simple Editing Loading Graphics from Someone Else's Server, or from Your Own Now Where? More HTML, "STYLE", and Web Pages That Suk JavaScript and Java Midi Starter Kit More Help Resources

(In what follows, I abreviate Netscape to "NS", and Microsoft Internet Explorer to "IE")

How to View and Copy HTML
Have you examined other people's code before? If you never looked before, try viewing the HTML "on the back" of THIS page -
either select the menu items: View/ S ource in Internet Explorer, or
View/Document S ource in Netscape.
Or click on the Manager Views icon then the Source View icon, if you're using the latest version (3) of Mosaic.

Now you have the source in view, copy and save the HTML as a TEXT file, with the standard mouse, menu, and keyboard shortcut commands that you're already familiar with.

To edit HTML files or write your own, you only need the most basic text editor. Save As a text file, then change the suffix on the filename from "filename.txt" to "filename.html", or to "filename.htm" if you're using Windows 3. (Changing the filename to make it end with the ".HTML" suffix, just opens it when you double-click it's icon, in whatever browser you have installed, instead of opening the file in the word processor).

Tell yourself how easy HTML is (Bold, Italic and Underline)
For all the hype about HTML being invented at CERN, it's not a new language - it's just like a very, very old word processor before they became WYSIWYG. In fact, HTML isn't even programming, it's just a "Markup" Language. All you do is tell the browser how to display your text and graphics. You give it a format command before the text you want to change, then you turn that formatting off again after those words. Experiment with  (within the same < angled brackets >) to turn BOLD ON before some text, and  to turn it OFF again after the selected text. Now try repalcing b (for bold) with i (for italic), or u (for underline).

Special Formatting Quirks ("the HTML Page" and four tags)
You have to tell the browser to look for "an HTML Page", in the format that it expects.
So for a new page:
copy and paste the example below (straight off what you see here, not the source); then
type your own title over my text between the <TITLE> and </TITLE> tags; and
type your own text between the<BODY... > and </BODY> tags. [And don't forget to SAVE!]

<HTML>
<HEAD>

<TITLE>Replace this sentence with a title that will make a good bookmark.</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">

You type your normal text here.
(That is, between the <BODY...> and the </BODY> tags).

</BODY>
</HTML>

(The four tags: , ,  , UPPER CASE, <xmp> ... </xmp>)

For obvious reasons, you don't have to "turn off"   (for a new line), or  (for a new paragraph), or <HR>, (for a Horizontal Rule). But you must explicitly TELL THE BROWSER when you want a NEW LINE. For example, the browser ignores whatever carriage returns you type in the source: it will not give you a new paragraph unless you type either , or two new line tags ( ). The browser ignores more than one space in your source as well. To force more spaces add   for each non-breaking space. To force double paragraph spacing, you also need   to separate the two tags, or the browser will ignore the second marker.
It's conventional to print HTML in UPPER CASE, but it works just as well in lower case letters. In fact, the special characters < and > (to make angled brackets < >appear on the web page), and for non-breaking spaces ( ), and quotation marks ("), are all defined as mandatory lower case only. Although some browsers will let you get away with upper case, it's better practice to stick with what you know all browsers will read. Any instructions a browser doesn't understand, it ignores (and/or prints on your web page).

<xmp> ... </xmp> If you want to quote a large piece of HTML on your web page, it becomes impractical to go typing < and > every time you want angled brackets. Instead, you can paste the HTML in and then enclose the lot between <xmp> and </xmp>. (This is HTML 2, so it will work in any browser, not just one brand of browser and not only in browsers that recognise "non-standard" HTML 3.2 or 4 extensions). These tags also must be typed in lower case though many browsers will nowadays forgive upper case here.

Graphics
The HTML to load a graphic image in your page is: When you modify the above,

don't forget to change the ALT=" ... " section as well. (That's what shows in text only browsers, or for people who visit with the graphics turned off).
For graphics enabled browsers, ALT also opens a message box in the IE3 and NS4 pointers containing these words, when you leave the mouse over the graphic for a second or two.

If you don't set BORDER=0, NS will show active graphics with a blue border.

Whenever you add a graphic, type pixel dimensions over xx and yy for WIDTH and HEIGHT. (Some HTML editors do this for you). The graphic would load without them, but they make your page load faster (because the browser can fill text in once it knows what dimensions to leave blank for your picture).
With HTML 3.2 or later, you can also vary the width and height that your graphic displays at. This allows you to display a larger picture than you have, simply by telling the browser larger dimensions. You can also use one graphic several times, each time distorting it's dimensions, to make one image look like several.

[The animated CD icon on the Midi Info Pages is an example of this. This page also loads faster, because the horizontal rules above and below the Flowers heading at the top, are actually the same rule that already loaded into the cache on the original Welcome Page].

experiment with align=left and align=right, to make text flow down the side of your graphics. Then try align=center.

To add a background tile put BACKGROUND="filename.gif" inside the <BODY ... > tag, like this:
To copy a graphic from another web site:
RIGHT-mouse click on it (or click and hold the mouse down a few tics if you're using a Mac), then select "Save Picture as ..." from the menu that pops up.
This method wont work to copy the flowers below (because they're not graphic images), they're "drawn" from text characters. How to do them is explained in the JavaScript and Java Section.

Links
Hyperlinks are the most characteristic element of a web page, so it's really worth mastering them. It's not tough - if we leave image maps for another day (and it's own page), all you need can be reduced to three kinds of links, all built from the basic form:
<A HREF=" ">put any linking text here</A>
That is, to link to

another Web Site:
<A HREF="http://put full URL here">put any linking text here</A>

another page (usually, in the same directory) on Your Site:
<A HREF="put filename here">put any linking text here</A>

a specific Location on the Same Page:

Where you leave FROM, put:
<A HREF="#DestinationName">put any linking text here</A>
Where you go TO, put:
<A NAME="DestinationName">DestinationName "Anchors" to the word or graphic here</A>

The third kind of link needs two parts, because you have to tell the browser firstly, the name of the destination point within the page (which you called "DestinationName"); then you put the location label you've called "DestinationName" on the page for the browser to go to.
If this explanation is unclear, examine the source for the Table of Contents at the top of this page and the locations those links jump to.
If you look at the similarities and differences between the three kinds of links above, you can understand how they are commonly modified in two further ways:
you can have links that

use a graphic to jump to another site when clicked:
<A HREF="http://put full URL here"><IMG SRC="filename.gif" width="xx" height="yy" border="0" alt="put alternative text for text-only browsers here"></A>, and

jump to a specific location on another page (usually, in the same directory) on Your Site:

Where you leave FROM, put:
<A HREF="filename.html#DestinationName">put any linking text here</A>
Where you go TO, put:
<A NAME="DestinationName">DestinationName "Anchors" to the word or graphic here</A>

Finally, combining the last two link forms, gives one more modification you might want:

make a graphic clickable to jump to a specific point on another page (usually, in the same directory) on Your Site:

Where you leave FROM, put:
<A HREF="filename.html#DestinationName"><IMG SRC="filename.gif" width="xx" height="yy" border="0" alt="put alternative text for text-only browsers here"></A>, and
Where you go TO, put:
<A NAME="DestinationName">DestinationName "Anchors" to the word or graphic here</A>

JavaScript for Adding Music The following JavaScript works in both NS and IE. It will play a song per web page, using midi files and the Crescendo player. The code to do this has gone through a number of changes with different IE and NS releases, but the most current fix seems to be:
use JavaScript to test which browser is visiting your site, then
IF it's NS use EMBED,
ELSE assume it's IE and use OBJECT (in that order, otherwise NS gets cranky). That is:

<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>

To use this, just copy and paste. Only two things to watch: don't add or delete ANY spaces in the middle of what's above, and change "SongName.mid" to the name of your MIDI file. For more information check the Crescendo Pages or my Midi-Info pages. If you copy the HTML from the Crescendo site, you have to delete the spaces (as I've done above), where document.write lines are TABBED in, or it (sometimes) wont work (especially NS in tables or nested tables).
If you're new to JavaScript, you also need to notice that, compared to HTML (where UPPER and lower case almost never matter), JavaScript is case sensitive - it treats "filename", "FileName" and "fileName" as three different names for files.
To put this all together:

You can get a free template for a web page emailed to you and experiment with it. There's an email address you can just click on to do this in my 'Puter Help pages.

Now you want some more HTML tags, and some examples of how they're used: try Stephen Le Hunte's HTML Reference Library (only about 600k unpacked).

From here, experiment: you can't break anything: if a browser doesn't recognise a command, it just ignores it!
ENJOY!!!

F (Back to Table of Contents) È

HTML 3.2 and Some Browser Limitations
Feel free to Surf here with whatever browser you please! The three browsers above, and text only browsers, should all work, to varying degrees, on this site. But to get the most out of this site, it may be worth considering the limitations in non-NS or -IE browsers. Mosaic only uses HTML 2, which makes it a lot tougher to satisfy. In fact, it makes most of my pages really suk - I didn't deliberately set out to make them stink, that's just the trade-off all web authors now face:

Even to get text to flow like this, around a graphic image, requires HTML 3.2; animated icons are "non-standard" HTML as well; and CLIENT Side Image Maps are out of the question for the "purists" who want to keep us from using the latest "extensions".

HTML 2 and animation: Mosaic will display only the first frame in your animated GIF. So never start your animation with a transparent bagkground, unless you want to do all that work just to show a blank spot.
On the other hand, single transparent images are sometimes used deliberately. David Siegel uses a GIF image of one pixel, in the transparent background colour, for "the Single Pixel GIF Trick" (explained in the HTML source for my Help Page), to get more precise control over page layout. (Though it wont work on Mosaic either).

In fact, I chose ascii "flowers" for dividers in this page, because, without resorting to graphics, they're the only text ornaments that I can guarantee everyone will see, and they cost next to nothing (compared to graphics) in file size. Even then, Mosaic doesn't allow me to vary the font colours or type face.
Despite all the difficulties above, The HTML Writers' Guild have good reasons to encourage the rest of us to use "standard" HTML, but this means waiting for the standards committees to catch up. They will wait forever for this, because new, "non-standard" "extensions" (to both HTML and VRML), will continue to be developed at an increasing pace.
What does it matter?
When you spend long nights creating your masterpiece, you want people to be able to see the thing. This means you need to write HTML that will work on "most" browsers. For "What works" I plan to use all the extensions I can that run on both NS and IE. There are various estimates of how many users these two browsers should cover, but it's probably in the order of about 80 per cent of web surfers, and increasing. Elswhere, I've started collecting work-arounds to create the same effects in both NS and IE. If you know of more, tell me and I'll fix it here (eventually!)
JavaScript and Java
Sorry if you're a Mosaic fanatic, but aside from the HTML 2 restrictions above, why shouldn't the "average" surfer play with JavaScript and Java as well? They can - but all these requirements combined, just about knock out most browsers except NS, IE and Sun's own HotJava browser. (For more information about JavaScript and Java, there are download links to both the Sun and Gamelan sites on my 'Puter HelpPages).

Links to some of the pages elsewhere on this site, will only become visible to click on, when you have JavaScript in your browser and enabled. Obviously, the games are written in Java, so they wont even appear unless you have a Java capeable browser and set Java "enabled" in Options or Preferences.

F (Back to Table of Contents) È
Three Bricks you Don't want to Drop, and some Alternatives
1. Don't try to force only ONE browser on your visitors
Don't you just hate people trying to tell you that you can ONLY view their page with ONE browser? Every time I see this, I load the other, to see what blunders the author is trying to cover up. All too often, it means authors edited their HTML with only ONE browser open. This is too thick for words! Some of the major browser and HTML 2 limitations are outlined above, but the latest NS or IE versions should each work on almost any page. If a page will only work in either NS or IE, look for faults in the authoring, not the other browser.
An alternative (that gets you FREE CDs)
The only certainty about the current "Browser Wars" is that the lead will see-saw. In any case, why offend and alienate half your audience? (Besides, you can get FREE CDs posted to you, just for adding a 2k icon - read on!) If you want to put icons in your page for EITHER or BOTH browsers, and to make them active links to the download sites
here's the HTML:

If you're uncertain about any of the HTML commands here, you can check the explanations in the Graphics Section above. To put the two browser icons side by side in the middle of the page, like below, you can copy and paste the source for the table following. Set borders to equal something other than 0, to see what's happening, then experiment with the table dimensions.

Best experienced with

Click here to start.
Best experienced with

Click here to start.

Placing the IE icon, and/or an ActiveX Control in a page on your site, qualifies you as a "Level One Developer", rather than just a "Guest". This means you not only get access to the downloads at the Microsoft (MS) Home Page site, but that MS will post you FREE CDs of software when you apply as a "Developer - Level 1".

Even if you don't want to use the programs, you need to know what's comming out (and a lot of that's too big to FTP nowadays). Anyway, you will use some of these programs.

How to copy graphics
To copy the graphics above, just RIGHT-mouse click on each (or click and hold the mouse down a few tics if you're using a Mac), and select "Save Picture as ..." from the menu that pops up.

2. Avoid Slow Loading Graphics
Are you fed-up with slow responses on the web? Well don't just blame bandwidth - the majority of graphics on the web have file sizes that are usually twenty to fifty times, and sometimes seventy-something times what they need to be. This is dead boring to try and load, and completely unnecessary.
The Alternative: Edited Pictures with Smaller File Sizes
There are some extremely simple things you can do to make pages load much faster by decreasing the file sizes of graphics. In the Tricks & Tips pages, there's a section called "Load Grafx 77 Times Faster". If you know of more, I'd love to hear.

3. Don't load graphics out of someone else's server
The worst sin you can commit on the Web is to weigh a sight down with such poorly edited graphics, that they take forever to load. If a page loads fast, then people just might put up with people pushing their browser prejudices (though that's not recommended either). But a close third behind both of these, is to load your page graphics out of someone else's server.

This might not sound like much, but it can put some artists out of business! For example, there are some generous artists (such as Stormi) making free backgrounds and other graphics available to the rest of the Web community. What they mean you to do is save a copy of the graphics they offer, put them on your own server, then put a link in you page to acknowledge the author and to let people see further examples of their work on the author's site.

If we all loaded graphics from the artists' servers instead of our own, then nobody would ever see the artists sites, but their sites would still register heaps of hits (just to load graphics), every time someone visited OUR sites. And if the artists get enough hits, their ISPs want to raise the price of their web space.

This practice is also dumb for two more reasons:

first it makes your own page load slower; and

second, the artists know some people do this, so they shift their graphics around, and your page can end up loading nothing if the picture you wanted is no longer where you addressed it from on their site.

The alternatives are load from your own server and choose the right form of hyperlinks
Copy the graphics, put them on your own server and call them from your own server. For details on how to do this:

How to Copy Graphics from a Web Site is explained above; as is
the HTML to load a graphic image in your page; and
how to hyperlink a graphic, to jump to another Web site, another page, or a specific location within any particular page, are all explained in the Links Section.

More HTML Information
When you need more HTML information than the Table of Contents (and HTML source) provide, you can start by

downloading Stephen Le Hunte's HTML Reference Library (only about 600k unpacked); or by
exploring the links from the Microsoft Home Pages, the Netscape Page Starter Site, and the resources page at the HTML Writers' Guild.

STYLE
As you become comfortable writing HTML, it's also worth considering STYLE, and especially, examples of "Bad Style", such as,

Jakob Nielsen's Top Ten Mistakes in Web Design, or
Vincent Flanders' Web Pages that Suck.

Jakob and Vincent offer pretty sensible and thoughtful advice, but there's no shortage of others on the net who want to dictate what you should or shouldn't write, and how. And "style" is a minefield: lots of "authorities" push contradictory, and/or out of date advice, and take themselves far too seriously.

While being as informed as you can of their opinions, ask yourself what is fact, especially with something as subjective and dynamic as "style" on the web.

Another alternative, is to visit what others consider "Good Style" (such as a few Pick-of-the-Day sites at Yahoo), and look through the source on web pages that do appeal to you. (Mind you, this isn't foolproof either).

It might also help if you can identify who your target audience is. For example:

Are they receptive to change, like different font and background colours, and music? Or are they hopelessly confused if you even change the colours of visited and un-visited links?

pages

blue

purple

will

Tables
You can also get in trouble for "fiddling" with the tables and font styles. But if you DO want to throw a lot of text at people, then you could consider bounding it in a table. However, some people have to use browsers that destroy tables.

On the other hand, unmodified HTML pages of text, can be stretched to the full width of the screen. Authors with any publishing experience, will do almost anything they can to avoid this, because it destroys their work.

I don't mean it stops looking pretty, I mean what they're trying to say gets lost. The human eye simply cannot follow huge lines of text right across the screen. It's no accident that newspapers further reduce column widths to make the print easier and faster to read.

Is this an issue of the readers' freedom to set the window margin wherever they like, or of the writers' freedom to try to be effective? As web publishing technology approaches that of other published media, web authors will demand much more control over the layout of their pages.

Instead of bashing authors, we should be aiming the kicks at any shoddy companies that are still forcing their customers to use second or third rate browsers.

Fonts
There's also a loud body of argument against "fancy" fonts. But noone seems to have mentioned that the default font on almost all browsers is Times New Roman (or some variant with serifs).

Serif fonts look good when sent through a good printer. But even with the latest resolutions, serifs on-screen can be grainy and difficult to read. On older screen resolutions, serif fonts are murder. In the "bad old days" (only a year or two ago), nobody tried to read much text on the web, because nobody could.

It's also no accident that Arial and Lucinda Sans, are the default fonts on PCs and Macs, respectively. But don't take my word for that, do you think this is easier to read? You be the judge.

F (Back to Table of Contents) È

JavaScript and Java
This page has grown so much that JavaScripts and Java earned their own sections on the Spells.101 Pages and a piece of the 'Puter Help Pages. But for now, you could look in the source for this page, at the section labelled "Defining and using a function for ascii flowers". (This sets up JavaScript to print the ascii flowers used here as horizontal rules).

Ascii is the most basic character set (so it's in all computers). Ascii pictures are a way of adding "graphics" for almost no extra file size; and with HTML 3.2, you can colour them as well. The trouble is, each flower takes 352 characters - that's over 1400 characters for a horizontal rule of four "flowers". Who wants to type that, or even mess up their source by re-pasting the HTML for each flower?

You don't have to: with JavaScript, you can define the key sequence for one flower, label it as some function, then every time you want more flowers, just call the function. (There are sections in the source for this page labelled "Calling the function for ascii flowers", after defining and using it the first time).

Be careful of spaces and Capital Letters in JavaScript: except for some special characters which have to be typed in lower case, HTML doesn't care whether you type in lower or UPPER case, but JavaScript is case-sensitive. (So it thinks "filename", "Filename" and "FileName" are three different words). If you want to modify the examples in my source, don't change the spacing either.

Other pages on this site contain Java applets (and the source files), for things like

Haiping Zhao's cool applet that flips your button gifs onMouseOver on my Welcome Page;
Tzu-Tai Liu's fireworks applet on my Spells Pages;
the rippling effect from Daivd Griffiths' beautiful Lake applet on my first Graphics Page; and
Karl Hörnell's IceBlox game in the Spells Pages.

F (Back to Table of Contents) È

The Midi Starter Kit
If you came here through a URL from another site,

there's the HTML commands above to put a Midi Player in your page, and
you can use the Midi Info pages to
- download the Crescendo midi Player,
- turn the music on and off at this site, and
- get the HTML to put a multi-song player on your site,
  which wont crash when visitors click between pages.
  (Plus Midi download links, and some technical information about
  midi and other sound files, "streaming", and META tags).

More Help Resources
The Help Page has links to newsgroups dedicated to helping all levels of users in HTML, JavaScript, Java and Special Interest Groups; (as well as free downloads of an HTML page template, and links to get a free web site and a free email address if you don't already have them).

Welcome | Introduction | 'Puter Help | Flowers | Tools, Grafx, VR | Midi-Info | JavaScript and Java | BEWARE Net Perils!

F (Back to Table of Contents) È
Thanks for reading this far. Please make allowances if the explanations are brief:

there are more comments throughout the source
(especially here and on the 'Puter Help Pages for Tables), and
I have to plead the difficulty of fitting this entire site onto a floppy disk.
Mail me if you have questions, comments or suggestions.
Alternatively, you might like to check my Message Board,
to see if you have a Frequently Asked Question,
or maybe leave a question or comment of your own.

You are visitor number since [dd/mm/yyyy] 17/7/1997
Australian Eastern Standard Time.

This page loads (one gif already in cache), gif anim 4k and text 41k.

If you came to this page from another site, it's possible to load the midi
player more easily, and the graphics more gently by coming here
"through the Front Door" (because that way,
some graphics will already be in the cache,
for the following pages),
If you want to do this, the URL is:
http://www.oocities.org/ResearchTriangle/9982

This page hosted by Get your own Free Home Page