The Personal-Professional Website

How Susan's Sample Homepage was Created



Do you like to know how things work? On this page I've used a programming trick to display the Code (HTML Tags) and Sample Text used to create Susan's Sample Homepage. The HTML has been deliberately kept to a beginner's level, both for the benefit of people new to HTML, and to demonstrate that an effective website can be created without advanced HTML. If HTML is a complete mystery to you, you may skip this page or look for help on the Reference page.

The HTML below can be copied and pasted into your favorite word-processor or web-editor program for experimentation; however, when you upload the script to your own webspace or run it offline, some of the links will appear to be broken. That's due to source-files that exist on my server (such as graphics) that won't be available on yours.

Following is the entire script of HTML tags and text (shown in red) I used to create Susan's Homepage:


<HTML>

<HEAD><TITLE>A Music Educator's Sample Homepage</TITLE></HEAD>

<BODY bgcolor = "#FFFFFF" background="pap02.jpg">

<CENTER><IMG SRC="/ppwebsite/ppwimages/sgcsfinal.gif" ALT="Susan Green's Cyber Space" BORDER="3" ALIGN="MIDDLE" VSPACE="2"> </CENTER>

<H1 align=center><I>Welcome to Music Educator<BR> Susan Green's<BR>Homepage</I></H1>

<CENTER> <IMG SRC="/ppwebsite/ppwimages/susanNJ.jpg" ALT="Susan Green: headshot photo" WIDTH="216" HEIGHT="288" BORDER="0"></CENTER>

<BLOCKQUOTE> <B>Susan Hope Green</B> has a Master's Degree in Voice Performance from Dynamic University, and currently teaches Music Appreciation, MIDI Technology and Individualized Voice at the Imaginary School of Music. Welcome to her homepage.</BLOCKQUOTE>

<HR>

<H2 align=center><FONT COLOR="#B22222">This website features:</FONT></H2>

<H3 align=center>Ms. Green's <A HREF="#classes">Classes</A> at ISoM</H3>

<H3 align=center>Schedule of <A HREF="#performances"> Upcoming Performances</A> for Ms. Green and her Students </H3>

<H3 align=center><A HREF="#interests">Research Interests</A> </H3>

<H3 align=center><A HREF="http://scaredofthat.com/ppwebsite/sgresumeP.html"> Professional Resume</A></H3>

<H3 align=center><A HREF="#links">Recommended Websites</A> </H3>

<H3 align=center><A HREF="#credits">Site Credits</A></H3>

<H3 align=center><A HREF="#contact">Contact Information</A> </H3>

<HR>

<H2 align=center><FONT COLOR="#B22222"><A NAME="classes">Prof. Green's Classes</A>--Fall 2001 Semester</FONT></H2>

<H3>MUS 102A The Fall 2001 <B>Music Appreciation</B> Class provides an introduction to the elements, forms and styles of music. Instruments and basic music notation will be covered, as well as an overview of all the primary eras of Music History from the Baroque to the 20th Century.</H3>

<HR WIDTH="50%">

<H3 align=center>Learn to create files like this MIDI rendition of Queen's <A HREF="http://scaredofthat.com/ppwebsite/ppwimages/bohemian.mid"> Bohemian Rhapsody! </A> </H3>

<H3>MUS 399L The Fall 2001 <B> MIDI Technology</B> Course is designed for music majors who wish to notate or compose music using state-of-the-art electronic and computer technologies. Finale(tm) and related tools will be covered, and students will work both individually and in small groups to complete a series of projects in the Imaginary Music MIDI Lab.</H3>

<HR>

<H2 align=center><FONT COLOR="#B22222">Schedule of <A NAME="performances">Upcoming Performances</A></FONT></H2>

<H4 align=center>September 23, 2001 <B>Rebecca Walters</B> Voice Recital 7pm Recital Hall</H4>

<H4 align=center>October 6, 2001 <B>Jennifer Mirabaux</B> Voice Recital 7pm Recital Hall</H4>

<H4 align=center>*November 17, 2001 <B>Green Studio Recital</B> 7pm Recital Hall*</H4>

<H4 align=center>*December 1, 2001 <B>Ms. Green</B> will present a Lecture-Recital entitled <BR>"Passages and Ports of Call"<BR> at 7pm in the Imaginary School of Music Recital Hall*</H4>

<H6 align=center>(* required attendance for all Green Studio singers *)</H6>

<HR>

<H2 align=center><FONT COLOR="#B22222"><A NAME="interests">Research Interests</A></FONT></H2>

<BLOCKQUOTE>Ms. Green has published several articles on the future of electronic composition on the Internet, and is currently working on a joint project with Kimball College to create an interactive online compositional and performance class.</BLOCKQUOTE>

<HR>

<H2 align=center><FONT COLOR="#B22222"><A NAME="links">Recommended Websites</A></FONT></H2>

<H4> <A HREF="http://www.la.unm.edu/~magner/index.html">The Diction Domain</A> </H4>

<H4> <A HREF="http://www.egroups.com/subscribe/vocalist-temporary?referer=1">The Vocalist International Discussion List</A> </H4>

<H4> <A HREF="http://www.nats.org">The Homepage of The National Association of Teachers of Singing</A> </H4>

<HR>

<H2 align=center><FONT COLOR="#B22222"><A NAME="credits">Site Credits</A></FONT></H2>

<H3>Special Thanks to:</H3>

<H4>The <A HREF="http://www.zettweb.com/grab-a-picture/index.html">Zett-Web Collection</A> for Susan's Headshot.</H4>

<H4><A HREF="http://www.klotsnet.com/midi">Klotsnet.com</A> for the sample MIDI file.</H4>

<H4><A HREF="http://www.cooltext.com/">CoolText</A> for their wonderful text-to-graphics generators.</H4>

<H4><A HREF="http://www.free-graphics.com/">Free-graphics.com</A> for their free backgrounds and images.</H4>

<HR>

<H2 align=center><FONT COLOR="#B22222"><A NAME="contact">Contact</A> Information</FONT></H2>

<H3 align=center>To contact Ms. Green, please use <A HREF="MAILTO:aleatory@scaredofthat.com">email<IMG SRC="/ppwebsite/ppwimages/sgpict.gif" BORDER=0 ALT="for most prompt reply."></A></H3>

<H3 align=center><A NAME="ISoM"> For more information</A> about the Imaginary School of Music, please visit the ISoM Homepage at <A HREF="http://scaredofthat.com/ppwebsite/sgISoM.html">http://ISoM.edu/music</A></H3>

<HR>

<H2 align=center><A HREF="http://scaredofthat.com/ppwebsite/sgindexP.html"> [Top of Current Page]</A> <A HREF="http://scaredofthat.com/ppwebsite/sgresumeP.html"> [Resume Page]</A></H2>

<HR>

<H5>This page was originally created November 1, 1998 and is maintained by <A HREF="http://scaredofthat.com/yworld/">Yvonne Dechance.</A></H5>

<H5>Address comments to <A HREF="MAILTO:aleatory@scaredofthat.com">webmaster.</A></H5>

<H5>Copyright 1998-2001 Yvonne R. Dechance</H5>

<H5>Susan Green's Homepage is located at <A HREF="http://scaredofthat.com/ppwebsite/sgindexP.html"> http://scaredofthat.com/ppwebsite/sgindexP.html</A>.</H5>

</BODY>

</HTML>



(The above section ends the HTML for "Susan's" Homepage; below is some additional navigation information to guide you through the larger website that contains Susan's Homepage and Resume Page.)


The Personal-Professional Website

Welcome page

Site Credits

Resources

About the (real) author

Please Sign the Guestbook!
The Personal-Professional Website Copyright 1998-2001 Yvonne R. Dechance
Comments and email:
The Personal-Professional Website Welcome page is located at http://scaredofthat.com/ppwebsite/.
An Online Version of the article is available.
another Dechance Studios production