Learning HTML Code

HTML is an acronym for HyperText Markup Language. The HTML code is used to tell the web browser what to do with text and how to assemble image, sound, and text by bringing together different files and telling the browser how to place everything on the "page".

Use the "Less Than" symbol < to begin an html code and the "Greater Than" symbol > to close the html code such as <HTML> .

The slash / is used to "turn off" commands such as </HTML>.

All WWW pages begin by turning on the HTML command which notifies the internet that HTML code will follow, and a BODY command which tells the browser that the main body of the page will follow. When the page is completed these commands are turned off (in reverse order) with the slash:

<HTML>
<BODY>

</BODY>
</HTML>

This turning on and using the slash on the same command to turn off the command is a basic principle of HTML code.

After announcing the HTML code, the "HEAD" usually follows which usually includes the TITLE. The TITLE appears in the Tool Bar Area at the top of the web-page. It is not a headline on the page. Thus a simple HTML page might read as follows:

<HTML>
<HEAD>
<TITLE> The Title Of This Page </TITLE>
</HEAD>
<BODY>

This is the text for this page. It could go on and on and be divided into paragraphs. Notice that the letter "P" enclosed in the less-than and greater-than symbols is the HTML code for paragraphs. It literally tells the browser to break the line by two vertical spaces.

This would be a new paragraph. By the way, Browsers are not case sensitive with regard to HTML Code. That means HTML commands can be upper case or lower case:

</HTML>
</BODY>

Below is the mark-up code (html) for the sample web page on the website. Notice that the BODY code can contain information about the background color and the color of texts. In addition, links can be made to other pages, or the browser can be asked to call image files in a particular place or to embed sound files which play automatically when the website is called up by the browser.

As you look at the what is text and what is code, you can see the principle of using the slash (/) to turn off a command. Not all commands need be paired (on and off). For example, <:hr> is the code to insert a "horizontal rule." It doesn't need to be turned off. The same is true of a line break: and the paragraph command .

Handling COLOR

We can have greater control of text and back ground by generating color with the RGB color code: "#000000". In our earlier use of color, we simply typed in the name of the color and a default color is used. Using the RGB color code gives us absolute control over all shades and hues of colors. For each column we can type a range of numbers from lowest to highest: 0 1 2 3 4 5 6 7 8 9 A B C D E F. The first two columns in the code control red, the second two columns control green and the third two columns control blue:

red green blue

"#00 00 00"

The mixing of colors follows the principle similar to stage lighting. With all the lights off (everything at 0) "#000000" the result is black. With all the lights up full at equal intensity (everything at F) "#FFFFFF" the result is white. Of course html code doesn't care whether the letters are caps or lowercase.
We can observe how this works with the BODY code. The code below adds background color and information about text color to the BODY code (VLINK is the color of the link after it has been clicked on):
<BODY BGCOLOR="#000000" TEXT="#ffffff" LINK="#ff8060" VLINK="#ff8060">
For the above, the background color is black, the text color is white, and both links are the same color.
A QUICK REFERENCE TO SOME USEFUL HTML CODE
Links to Web Pages
To make links from your page to other pages, you are "anchoring" the text or picture to an URL (web address). The context is to turn on the anchor <A> and to turn off the anchor </A>
If you are linking to a page, you need to include the page by using HREF in which "H" stands for hypertext and "REF" stands for reference. If you are linking to a page in the same directory, then you need only to refer to that page's file name. For example:
<A HREF = "filename.html"> This Text is Being Anchored to the URL </A>
If the link is to a page outside of the directory, you should include the full URL or WWW address:
<A HREF = "http://www. domain.name/directory/filename.html"> This Text is Being Anchored to the URL </A>
Note that the hypertext reference is always enclosed in quotes.
Putting Images on Your Webpages
The html context for images is as follows:
<IMG SRC = "image.gif">
Notice that the filename for the image is in quotes. "IMG" tells the browser to find an image and "SRC" (source) tells the browser where the file is located and the name of the image file. The above context indicates that the image file is in the same directory as the text file. In you create a directory where you store all of your images, you would indicate that by referring to the directory:
<IMG SRC = "images/image.gif">
If you want to wrap text around the image, use the align code and align the image to the right or left of the page:
<IMG ALIGN = LEFT SRC = "images/image.gif">

or <IMG ALIGN = RIGHT SRC = "images/image.gif">
To center images use the "center" code by turning centering on and off:

<CENTER>
<IMG SRC = "images/image.gif">
</CENTER>
Putting Sound on Your Webpages
You can embed a sound file with the following command. The purpose of embedding a file is make the the file start playing automatically when the page is loaded:

<EMBED SRC="audio/filename.aiff" WIDTH="0" HEIGHT="0" autostart="true" repeat="false">

Another technique is have a button, image or text that when selected by clicking will download the sound file to be played:
<A HREF = "audio/filename.html"> <IMG ALIGN = LEFT SRC = "images/mozart.gif"> Click This Button to play the theme from Mozart's first symphony </A>
Example:
Click This Button to play the theme from Mozart's first symphony. Mozart composed his first symphony when he was nine years old. Classicism was just emerging and Mozart had been exposed to many works of the Stürm und Drang. Here is the opening passage in which the triad of the tonic (E-flat Major) is outlined. Notice how the theme has two distinct textures. This contrast of textures within a theme became a characteristic of Mozart themes.

Music can also be in the form of a Quicktime Movie. Simply save the file as a Quicktime Movie from your Digital Audio Application. This has the advantage of already being downloaded on the page, and will play immediately when clicked. Please Note: The Quicktime Movie must be saved so it can play independently. If you are using SoundEdit 16, after you save the movie (selecting the file format as "Quicktime Movie"), save the movie a second-time and you will be given the option to save it as an independent movie.
<EMBED SRC = "audio/filename.mov">
Example:
Mozart composed his first symphony when he was nine years old. Classicism was just emerging and Mozart had been exposed to many works of the Stürm und Drang. Here is the opening passage in which the triad of the tonic (E-flat Major) is outlined. Notice how the theme has two distinct textures. This contrast of textures within a theme became a characteristic of Mozart themes.

Mozart Symphony No.1

Below is the html code for the sample index page used in the section in which you are asked to activate your website.
<HTML>
<HEAD>
<TITLE> John Gilbert's Website </TITLE>
</HEAD>

<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#ff8060" VLINK="#ff8060">

 <H1> Welcome to the Website of John Gilbert </H1> 


<EMBED SRC="audio/enter.aiff" WIDTH="0" HEIGHT="0" autostart="true" repeat="false">

<img align = left src= "images/gilbert.gif">

 
Welcome to my new website. As you know websites are always under construction, so I am not going to bother you with that "under construction" icon. Webpages by their nature get changed regularly. I am working on this page as part of an assignment. I have an assignment for a term project which I will document on this website. 
This course deals with MIDI recording and other music technologies which could be helpful to musicians and music educators. I am learning to do web publishing as a way of documenting my term project and ultimately displaying it in some way. 
As a beginning, I have done a mini-project in digital audio that I call
<a href = "analog/analog.html"> "Analog!" </a> 
My project involves making an orchestration of a folk song that might be suitable for a junior high school orchestra. Please visit my <a href = "project.html"> music education orchestration project</a>
<hr>
<ADDRESS ALIGN=RIGHT> Comments to <A HREF="mailto:jg12@is2.nyu.edu"> john.gilbert@nyu.edu </A> 
Go to <A HREF="http://www.nyu.edu/"> NYU Web </A> home page 
Last modified 11/18/98 </ADDRESS>
</BODY>
</HTML>

HTML Code for Accents and Special Characters
Note: These are known as "escape sequences". These escape sequences must be entered in lowercase.
Many times we find that there are special characters (such as accents and other entities that modify letters) we wish to use on a page. HTML provides support for these characters. Generally the principle is to begin the code for accents with an ampersand (&) and at the end of the entry use the semi-colon (;) to indicate the end of the code so that the context is: &n; (where "n" is the accent name or abbreviation)
Accented Characters
Æ for uppercase AE diphthong (ligature): Æ
Á for uppercase, acute accent: Á
Â for uppercase A, circ@ex accent: Â
À for uppercase A, grave accent: À
Å for uppercase A, ring: Å
Ã for uppercase A, tilde: Ã
Ä for uppercase A, dieresis or umlaut mark: Ä
Ç for uppercase C, cedilla: Ç
Ð for uppercase Eth, Icelandic:Ð
É for uppercase E, acute accent: É
Ê for uppercase E, circumflex accent: Ê
È for uppercase E, grave accent: È
Ë for uppercase E, dieresis or umlaut mark: Ë
Í for uppercase I, acute accent: Í
Î for uppercase I, circumflex accent: Î
Ì for uppercase I, grave accent: Ì
Ï for uppercase I, dieresis or umlaut mark: Ï
Ñ for uppercase N, tilde: Ñ
Ó for uppercase 0, acute accent:Ó
Ô for uppercase 0, circumflex accent: Ô
Ò for uppercase 0, grave accent: Ò
Ø for uppercase 0, slash: Ø
Õ for uppercase 0, tilde: Õ
Ö for uppercase 0, dieresis or umlaut mark: Ö
Þ for uppercase THORN, Icelandic: Þ
Ú for uppercase U, acute accent: Ú
Û for uppercase U, circun-ttlex accent: Û
Ù for uppercase U, grave accent: Ù
Ü for uppercase U, dieresis or umlaut mark: Ü
Ý for uppercase Y, acute accent: Ý
á for lowercase a, acute accent: á
â for lowercase a, circumflex accent: â
æ for lowercase ae diphthong (ligature): æ
à for lowercase a, grave accent: à
å for lowercase a, ring: å
ã for lowercase a, tilde: ã
ä for lowercase a, dieresis or umlaut mark: ä
ç for lowercase c, cedilla: ç
é for lowercase e, acute accent: é
ê for lowercase e, circumflex accent: ê
è for lowercase e, grave accent: è
ð for lowercase eth, Icelandic: ð
ë for lowercase e, dieresis or umlaut mark: ë
í for lowercase i, acute accent: í
î for lowercase i, circumflex accent: î
ì for lowercase i, grave accent: ì
ï for lowercase i, dieresis or umlaut mark: ï
ñ for lowercase n, tilde: ñ
ó for lowercase o, acute accent: ó
ô for lowercase o, circumflex accent: ô
ò for lowercase o, grave accent: ò
ø for lowercase o, slash: ø
õ for lowercase o, tilde: õ
ö for lowercase o, dieresis or umlaut mark: ö
ß for lowercase sharp s, German (sz ligature): ß
þ for lowercase thorn, Icelandic: þ
ú for lowercase u, acute accent: ú
û for lowercase u, circumflex accent: û
ù for lowercase u, grave accent: ù
ü for lowercase u, dieresis or umlaut mark: ü
ý for lowercase y, acute accent: ý
ÿ for lowercase y, dieresis or umlaut mark: ÿ
Reserved HTML Characters
< for < character
> for > character
& for & character
" for " character
® Netscape 1.0 extension, for registered trademark symbol ®
© Netscape 1.0 extension, for copyright symbol ©

Below are two excellent primers on HTML Code:
NCSA HTML PRIMER
Maddog HTML Primer for Real People