Basic HTML Lesson 4

Sound and Graphics

 

SOUNDS

Generally I don't go in for "do as I say, not as I do", but in this case please don't copy me. I have the code for embeding sound at the top of this page. You may have noticed it takes longer for the page to load. If you want to do this a good place for the code is at the bottom of your pages. The code is:

<embed src="oldtime.mid" width="200" height="55" autostart="true">

another caveat is that if you are testing your page locally with netscape it won't do the embeded sound properly. MSIE will.

The best, or at least most considerate way of putting music on a page is to make a clickable link out of it. Like this:

Listen to&nbsp;<a href="oldtime.mid">old time rock and roll</A><P>&nbsp;</P>

Displays as: old time rock and roll

The most common types of sound files on the internet are midi, wav, and mp3. They all can be embedded or put in a link like our examples. Be aware though that the surfer will need a plugin to hear these files. Also be mindful of file sizes. Some MP3s can be rather large and time consuming to download. So USE SOND SPARINGLY

GRAPHICS

Embedding Graphics in webpages calls for the use of a few simple tags. This line for example is coded as:

<P ALIGN="CENTER"><IMG SRC="images/rightarrow.gif" WIDTH="88" HEIGHT="101" ALT="right arrow">your text</P>

IMG is a tag that specifices an image. It supports the following attributes

SCR is requred for every image tag. It specifies a URL for the image.
ALT is used to provide a text description of the image. This is important for speech based and text only users.
ALIGN specifies how the image is positioned relative to the current text line in which it occurs. Your options are align=top, align=middle, align=bottom, align=left, and align=right.
HEIGHT and WIDTH specify the size in pixels the image will display.

For example

<P ALIGN="CENTER"><IMG SRC="images/goldright.gif" ALIGN="TOP" WIDTH="60" HEIGHT="66" ALT="right arrow">ALIGN="TOP"<IMG SRC="images/goldleft.gif" ALIGN="TOP" WIDTH="60" HEIGHT="66" ALT="left arrow"><P>

Will display as:

right arrowALIGN="TOP"left arrow

<P ALIGN="CENTER"><IMG SRC="images/goldright.gif" ALIGN="BOTTOM" WIDTH="60" HEIGHT="66" ALT="right arrow">ALIGN="BOTTOM"<IMG SRC="images/goldleft.gif" ALIGN="BOTTOM" WIDTH="60" HEIGHT="66" ALT="left arrow"><P>

Will display as:

right arrowALIGN="BOTTOM"left arrow

If you want text to flow around your image you would use align=left or align=right and code thusly.

<P><IMG align="left" SRC="images/smjsc03.gif" WIDTH=116 HEIGHT=134><B>your text</b></P> Which would display like this example taken from  Shift of Means  by Mary Lou Mendum.

As the sleeves of Reverend Sinth's cassock snapped with the force of his gyrating arms, Den managed to catch the eye of Annie Lifton, one of the more enthusiastic members of OLD SOKS. When she saw the Donor's plight, Annie grinned at the prospect of some action, the gesture puckering the thin white scar on her left cheek. She tightened the tattered grey kneesock she wore as an armband, then bent to whisper in the ear of OLD SOKS' official Subversive Strategist, law student Silva Vornast. Silva assessed the situation at a glance, waved reassuringly to Den, and put down her box of buttons. She readjusted the black fishnet stocking tied around her waist as a belt, then reached over and playfully tugged at the faded pink piece of footwear securing the ponytail which dangled down the back of her fellow law student and fiancee, Tohm Seegrin.

 

ASSIGNMENT #4

Your assignment is to submit one page with at least one sound file and one graphic on it. You may use a page from a previous lesson, but PLEASE use the proper file name for it. Any questions just email me.