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>
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:
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. <P>
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: <p> <P>
</html>
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: <BR> and the paragraph command <P> .
Handling color
</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.
| red | green | blue |
| "#00 | 00 | 00" |
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.
Making your links open in new pages (TARGET ATTRIBUTE):
<a href = "http://www. domain.name/directory/filename.html" target="_blank"> Text Anchored to URL that will open as a new page </a>
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">
To center images use the "center" code by turning centering on and off:
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">
A full embed command would be:
<embed src="audio/filename.mp3" width="400" height="40" autostart="false" loop="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.
The Font Command
Web Browsers use a limited number of fonts, and most authoring programs group them in families of fonts so that most computers will have at least one of the fonts indicated in the "font face" command. Here is the list of font faces that appear in many web authoring programs:
Arial, Helvitica, sans-serif
Times New Roman, Times, serif
Courier New, Courier, mono
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica,
sans-serif
More and more computers are carrying more font faces, so that you can experiment with additional fonts, but list them in "families" so that the computer will use your alternatives rather than the Browser's defaults.
"Font" is the element and the element can have these attributes: "face, size, color."
For example:
<font face = "arial, helvitica, sans-serif" size= "4" color = "#990000"> Don't forget to turn off the font command at the end. </font> which looks like:
Don't forget to turn off the font command at the end.
<embed src="audio/enter.aiff" width="0" height="0" autostart="true" repeat="false">
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. <p>
As a beginning, I have done a mini-project in digital audio that I call
<a href = "analog/analog.html"> "Analog!" </a> <p>
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 <font color="#ffffff"> <a href="mailto:jg12@is2.nyu.edu"> john.gilbert@nyu.edu </a> </font>
Go to <a href="http://www.nyu.edu/"> NYU Web </a> home page <BR>
</body>
</html>
Last modified 11/18/2005</address>
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 < 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:
HTML
GOODIES