|
HTML Tips » • Background Sound • Using control characters as bullets • Creating a vertical line • Indenting text |
Background SoundYou give users access to sound files in exactly the same way as giving them a link to another page. It is common to provide a hot graphic to indicate the availability of a sound file. You can use this method to offer any kind of file. Feel free to steal the button I've created in the example below.
<A HREF="sounds/flesh.wav">
<IMG SRC="graphics/sound.gif" BORDER=0 WIDTH=36 HEIGHT=28 ALT="sound button">
"The flesh..." [41K]</A>
"The flesh..." [41]
It is also possible to trigger a sound file to automatically play when a page is loaded. This is done by use of the <META> element. Include the following line of code in the <HEAD> section of your document.
<META HTTP-EQUIV="refresh" CONTENT="0; url=sounds/flesh.wav">
Replace sounds/flesh.wav with the address of your own sound file. Click here for an
example.
MS Internet Explorer and NCSA Mosaic, simplify this procedure with use of the <BGSOUND> element. Mosaic only supports <BGSOUND> to a limited extent - the Mosaic-only element <SOUND> can be used for more control. Netscape Navigator 3 supports neither <BGSOUND> nor <SOUND> (although Navigator 4 now supports <BGSOUND>), instead you must use the <EMBED> element. The following lines of code will all play background sound on MS Internet Explorer 3 upwards, NCSA Mosaic and Netscape Navigator 3 upwards respectively.
<BGSOUND SRC="sounds/blakmeat.wav">
<SOUND SRC="sounds/blakmeat.wav">
<EMBED SRC="sounds/blakmeat.wav" AUTOSTART="true" HIDDEN="true"></EMBED>
Text in Columns
<TABLE WIDTH=100%>
<TR><TD WIDTH=50%>
Left hand column text in here.
<TD WIDTH=50%>
Right hand column text in here.
</TABLE>
Remember, the left hand column will not wrap into the right hand column as with normal word processors; you must specify the columns' text separately.
A new tag, <MULTICOL>, has been developed to make the above procedure easier. It is currently only supported by Netscape 3. The code to produce the above would be:
<MULTICOL COLS=2 WIDTH=100%>Left hand and right hand column text in here.</MULTICOL>
An alternative method is to use the command <PRE>. This uses a fixed-width
font to display the text, and also shows all space-characters typed in the HTML code; thus facilitating the alignment of text.
Using HTML control characters as bulletsUse a control character in HTML rather than a GIF for a bullet. Even though a bullet GIF might be quite small, browsers render control characters more quickly than they can download a graphic, and it would reduce the number of connections the user's computer has to make to the server.
Control characters (such as •) may render somewhat differently on different browsers, particularly between Macs and PCs, but they'll almost always show up as some sort of bullet. The advantage control characters have over the more conventional <LI> element is that they can be individually colored, as our example shows.
<FONT COLOR="orange">•</FONT>
I am Arthur, King of the Britons<BR>
<FONT COLOR="purple">•</FONT>
King of the who?<BR>• I am Arthur, King of the Britons
• King of the who?
For more information and a list of characters, see Jalfrezi's Tips n' Tricks section on special characters.
Creating a vertical lineMaking a horizontal division line is easy - just include an <HR> tag. Unfortunately there is no such tag to create a vertical line. One option is to create a graphic and ALIGN it next to your paragraph - the one disadvantage of that method is that you can never know how big to make your graphic, due to varying resolutions, etc.
The easiest method is to create a table and use a very narrow cell to act as the vertical line. This method is employed on Jalfrezi's front page. In order that the line shows up on Netscape browsers, you need to include content in the table cell. In this case we have a 1 pixel wide <SPACER> tag.
<TABLE WIDTH="75%" CELLPADDING=0>
<TR><TD WIDTH=1 BGCOLOR="black">
<SPACER TYPE="block" WIDTH=1></TD>
<TD><P>I was dressed for success, but success it never comes. And you're the only one who laughs at my jokes when they are so bad. And my jokes are always bad.</P></TD></TR>
</TABLE>
I was dressed for success, but success it never comes. And you're the only one who laughs at my jokes when they are so bad. And my jokes are always bad.
For more information, see Jalfrezi's section on tables.
Indenting TextIndenting the first line of a paragraph is easy. Simply use a non-breaking space ( ) or two in front of the first word. There is currently no HTML code for a tab.
Indenting a block of text can be a little more tricky. The only proper way to do it is to use a style sheet technique. Currently style sheets are supported by Microsoft Internet Explorer 3 and Netscape Navigator 4 upwards, and are likely to be supported by the next generation of all graphical browsers. For more information, see Jalfrezi's section on style sheets. The following example shows how to indent a paragraph by 50 pixels.
<P STYLE="margin-left:50px">
The day didn't go too well, too many chocolates and cigarettes. I kept thinking of you and almost walking into lampposts. Why is it so hot? The air coming to the boil, rubbing up against walls and lampposts trying to get rid of it. </P>
The day didn't go too well, too many chocolates and cigarettes. I kept thinking of you and almost walking into lampposts. Why is it so hot? The air coming to the boil, rubbing up against walls and lampposts trying to get rid of it.
Other methods of indenting include use of <BLOCKQUOTE>, which browsers often render by indenting from the left and the right. You could also enclose your text inside a pair of <UL></UL> tags. While this method often has the deseired effect, particularly with Netscape and Microsoft browsers, it is essentially incorrect unless the text in question is part of a list You must therefore bear in mind that some browsers may not indent text using this method.
   |  |     |
