Part one of this Web page development series in SBO’s January, 2000, issue focused on the fundamentals of Web page construction

Building Exciting Web Pages, Part 2

by John Kuzmich, Jr.

June, 2000 Issue SBO Magazine

Part one of this Web page development series in SBO’s January, 2000, issue focused on the fundamentals of Web page construction. Once you get your first Web page posted, you will be amazed how quickly you are motivated to incorporate enhancements to make your site more interesting. Graphic additions are usually the most popular. Some immediate things you can add to make your Web page more exciting and perhaps more readable are: Post fancy backgrounds, photographs, calendars, grades and a counter to the Web site to keep track of how many people visit your Web site.

Simple Enhancements

Once you have posted your first Web page, there is a natural itch to enhance the sound and graphics to make it more attractive. A fancy background is a quick first step. You can go to either of two URLs — www.arcadia-animations.com or www.backgrounds4free.com — which contain many colorful and artistic colored backgrounds, and instantly download one onto your computer. Once downloaded, you can add a simple line into your HTML file and post that file on your Web page for immediate gratification.

If you are not familiar with HTML (Hyper Text Markup Language) codes for creating Web pages, I suggest that you read the first Web page development article in SBO’s January, 2000, issue on pages 32-38, for some HTML fundamentals. HTML is a mark-up, or formatting, language that can be somewhat easy to learn. You mark up text files with HTML tags so that they can be read by browsing software over a network or locally on your computer. Tags are pieces of code surrounded by the symbols < >. The fancy background is engaged by loading the file onto the Web site and inserting the following line of code in that file: <body background=“sky_blue.jpg”>. The simplest way to understand the HTML code is to analyze it. All HTML codes must begin with “< >.” The words inside the brackets are the HTML commands. Everything inside of the quotation marks identifies the fancy background file that needs to be downloaded to the Web site.

Fancy Colored Backgrounds

An easy way to add color backgrounds – while not as fancy – is to use an HTML editor, such as “Netscape Editor” and Microsoft “FrontPage Express,” and pick the icon for color backgrounds. There will be a color palette from which you can click one of 49 basic colors and some custom colors. One click will let you immediately see the color background transformation; save the file and post it to your Web site for a more colorful Web page.

Banners. Looking for fancy banners with fancy fonts? Go to: www.cooltext.com, where you can create fancy banners in seconds. One of my seventh-grade students created a flashing banner with the above URL in about 30 seconds. You can see it at: http://204.989.1.2/middle/carmody/computers. It flashes at the very top left with two different announcements. Here is the HTML code used to display this banner:

<TD>

</TD>

</TABLE></LEFT>

Photographs. Posting photographs is very easy to do and adds important interest to a Web site. You can either scan in a photo onto your computer with a scanner or add a picture from a digital camera. The HTML line code for making the photo appear on your Web page is simple: <center><img SRC=“notes.gif.” The photograph is in the file: “notes.gif.” In this case, the HTML line code is easy to understand and do. Getting the digital photograph on your computer is an important prerequisite. Please be aware that the most common graphic files posted on the Internet are either GIF or JPEG files.

Calendars. Posting a calendar on your Web site is a very concise way to communicate upcoming concerts and rehearsals. The easiest way to accomplish this is to use a software program called: “Creative Calendar Creator” by Broderbund. It can automatically save calendars into HTML format. For an example, go to the following Web calendar URL for daily lesson plans:

http://204.98.1.2/middle/carmody/computers/calendar.html

New Trier High School in Winnetka, Ill., posts its upcoming concerts without a calendar in a marquee manner at: www.ntjazz.com.

Grades. Posting grades for parents and students to privately view 24 hours a day with the option of printing out a complete progress report is very impressive. “Making The Grade” by Jay Klein Products does this with the HTML files already in place. Some companies will post your grades on their Web site, but “Making The Grade” allows you to post them directly to your Web site. This software even features a four-digit pin number mechanism to be used with the student’s school ID number so that only those people with the correct ID and four-digit pin number can view their grades. In families where one of the parents lives out-of-state, this Web grade capability is very useful.

Outline. Information on a Web page needs to be professionally organized with items indented, numbered, etc. The following HTML coding sequence will give your Web pages an attractive outline format.

• Begin with <UL> for a non-number outline or <OL> for a numbered outline. Then indent several sub-heading items with squares, circles, etc. with <LI>.

• At the end of the master outline, type in </UL> or </OL> to match what you did in the previous step.

To better understand this sequence, please go to: http://home.earthlink.net/~jkuzmich/

The following HTML code produced the outline appearance on this Web page.

<OL>

<LI>

Looking for information on John Kuzmich, Jr. as a music educator, clinician and a published freelance author with expertise in:</LI>

<LI>

Computer Music</LI>

<LI>

Jazz Education</LI>

<LI>

Videoconferencing</LI>

</UL>

</OL>

The HTML code creates a hard carriage return in order to add a double-space between text or graphics. The <LI> creates a sub-indented line underneath the master outline. and create bold type.

“Hot” Links. Linking to other Web sites (URLs) on the Internet is a very important aspect of the World Wide Web. A single click will immediately take you to a Web site anywhere in the world. For example, check out Harmonic Vision’s Web page for many links relevant to music educators at: <http://www.harmonicvision.com/links.htm>. Click on any of the underlined text and you will go to a new Web page. The www.kuzmich.com line of HTML code that does this immediate transaction in going to the Music Educators National Conference Web page link is:

<LI><a href=“http://www.menc.org/” target= “_blank”> Music Educators National Conference (MENC) </A> MENC is an organization of more than 70,000 music educators dedicated to providing a complete education to every child in America. Search job postings, music news, classroom resources, publications, industry contacts and conference information.

The coding within the < > is the coded address or URL that moves you to any new Web site, and everything that follows the < > formula is what appears on the screen so you know where you will travel when you click on the underlined URL. By the way, </A> is the code that underlines the Web site name or URL.

Blinking Texts/Graphics. Want to create some blinking/flashing, go to my web site at: http://home.earthlink.net/ ~jkuzmich/

The flashing “Web Page Has Moved!” quickly gets your attention. The HTML code is very simple. Just precede the text to be flashed with <BLINK> </BLINK>. Here is an example from my Web site cited above. <BLINK> Web Page Has Moved! </BLINK>. Unfortunately, this HTML coding does not work in Microsoft’s Explorer Web browser.

More Powerful Enhancements

Slideshows. One powerful way to enhance a Web page is to post a slide show originating from Microsoft “PowerPoint” and “Corel Presentation” slide show presentations. A slideshow on your Web page makes an interesting and always available presentation and eliminates printed hand-outs. To post grades, a calendar or slideshow, save them as HTML files within the software that you created them with and post them to a designated directory on your Web site. There are four computer music software application slideshows posted at: www.kuzmich.com/handouts.html.

Audio Files. Try posting a .wav file for a short speech or audio segment. All you have to do is record your speech onto your computer. In Windows 95/98, you go to “Sound Recorder” under “Multimedia” under “Accessories.” The HTML command is very straightforward. On my Web page, www.kuzmich.com, I used <a href=“welcome. wav”>welcome message</a> (.wav 179k). Everything within the < > is the HTML command and everything after the > bracket is what appears on the screen. For posting any .wav music file, the HTML is in this same basic format. Want to have students jamming with a rhythm section on your Web page? Use PG Music’s “Band-in-a-Box.” Their version 9.0 allows you to create a rhythm section in any popular music style and record any analog instrument through a microphone, mix it together and then post it to the Web. The ability to mix a digitally created rhythm section with acoustical instruments gives a personal touch to your Web page. And for school sites, this is a great way to showcase your students! Relatives and alumni from all over the country will be “hitting” your Web site. I even jam on clarinet on the Internet at: www. kuzmich.com/ kuzdir/jamming.mp3.

At the next annual Brigham Young University Jazz Festival in March, 2001, I will record students soloing with a “Band-in-a-Box” rhythm and then immediately post it on BYU’s Web site.

Unfortunately, .wav files can be huge. My original .wav at 1:13 minutes was a whopping 12+ MB in stereo, but it got reduced to only 517 KB by using a shareware MP3 decoding program! The HTML code for playing music was a simple one-line code:

Video Streaming. A Web site with video and photographs is even more exciting. Once photos are scanned into the computer, you can improve the image and add special effects with a software application like Ulead’s “PhotoExpress.” You can correct bad and light photos and literally improve any photograph painlessly. Videos can be digitized and loaded on your computer for posting on your Web site by a software application, such as MGI’s “VideoWave III.” A similar hardware solution is Pinnacle’s “Studio 400.” In either case, you can connect your camcorder to the computer and convert your analog videos to digital and prepare them for posting on your Web site. Go to the following URL: www.tvontheweb.com/channels/jazz/ videoguide/concerts/iaje99/iaje99.html#kuz. For real excitement, you have a choice of 15 clinics, concerts, interviews and panels from the 1999 IAJE International Jazz Conference at the Disneyland Hotel via video streaming.

Handouts. Ever wish you didn’t have to print so many handouts? Convert your handouts to HTML files and post them on your Web site. At www.kuzmich.com/handouts.html, I have dozens of clinic handouts for jazz, computer music and videoconferencing clinics. The HTML codes for each handout are all one line each.

E-Mail. It is possible to have your e-mail account posted on your Web page so other educators and students can easily contact you. For example:

EDITOR Jennifer Horan <A href=“mailto: jhoran@larkinpublications.com”>jhoran@larkinpublications.com</A>

Everything inside the brackets < > is the HTML command to send e-mail to you. To see this in action, visit the School Band & Orchestra Web site and send them your comments on this issue at www.sbomagazine.com.

Animated GIFs. An animated GIF is a moving picture that alternates between several images to create animation and is very popular on Web pages. There are places on the Internet that let you download animated GIFs for free. My favorite URLs for downloading 12,000+ animated GIFs and slick-looking buttons are: www.animfactory.com, www.animationonline.com, www.buttonmaker. com, www.cooarchive.com, www.cooltext.com.

These Web sites even have the ability to create clever banners and buttons on-line and can be posted to your Web site. Three-dimensional graphics can be created and posted with Ulead’s “WebRazor Pro.” This program can also grab GIF animations and 3D animated text off the Web site for you. Ulead’s “PhotoImpact 5” is an incredible product for creating animated GIFs as well as editing, reversing, sizing, and saving photos in different graphic file formats.

Add a Counter. Adding a counter to your Web page will let you know how many people have visited or “hit” your Web site. A school Web site could easily get quite a few hits and give proof to your administration that your Web site has a good readership. There are Web sites that will let you download free counters that can be installed on your Web page. The following URL is a good site to start looking for free counters: www.digits.com . All instructions are provided on this Web site to download and install HTML code to your Web page. You will see the HTML code displayed if you select the page source in your Web browser if you examine the coding at: www. kuzmich.com.

Technology is constantly changing and consequently Web enhancement software keeps improving and becoming more powerful. Please feel free to e-mail me on my Web site and share with readers your experiences and successes with technology in your classroom or office.

Selected HTML Reference Books

Hope this information is helpful. I’m excited that I can develop an informative Web page development series. Below are some outstanding Web books that are user-friendly and easy to learn HTML techniques.

1. Carrillo, Gina. Easy Web Pages. Indianapolis, Indiana: Que Corporation, 2000. 171 pp. A refreshingly different visual guide using pictures rather than miles of text.

2. McFedries, Paul. The Complete Idiot’s Guide to Creating An HTML Web Page. Indianapolis, Indiana; Que Corporation, 1996. 312 pp. A light-hearted, entertaining book that provides everything you need to know to get your first page on the Web, including text, images, creating links, and more.