Custom Search

HTML Lesson 5

by Caroline Seawright

 

Here's HTML Lesson 5! If you've missed out, here is HTML Lesson 1 and HTML Lesson 2 and HTML Lesson 3 and HTML Lesson 4 (don't worry - they will open in new windows, so you won't lose your place!)

Adding Music to Web Pages

By request, here is a little bit on how to add music to your web page (hope this helps you, Lois!). If at all possible, I strongly suggest only adding music in such a way as to allow the people who view your page to turn the music on themselves. I've gone to pages, many times, that might be wonderful ... but because they start playing music automatically (this is especially bad, when I'm at work and do not want the whole office hearing my PC blaring music!), I've had to leave the page!

So I advise discretion when using music on your web pages!

For Netscape and IE:

<embed src="pigsy.mid" loop="infinite" autostart="false" width=146 height=60></embed>

You can change the height and width, if you want. Different people will have different players, though, and height=60 seems to be the height usually specified on various web pages... loop="infinite" can be deleted if you want the song only to play once. You can make autostart="true" if you really want the song to play automatically.

For Other Browsers:

<a href="pigsy.mid">A Midi Melody!</a>
A Midi Melody!

This will play when people 'click' on the link, if they have the correct software at their end.

Want to put them together on a page?

<embed src="pigsy.mid" loop="infinite" autostart="false" width=146 height=60></embed>
<noscript>
<a href="pigsy.mid">A Midi Melody!</a>
</noscript>

I've tested this out with .ra (sound, not video!) and .mid and they both seem to work fine. Just note that not everyone has the right plug-in added, so people will be asked to add the plug-in that they don't have, when they load your page!

More Complex Tables

This section, I'll try to explain how to put text and images into the table (though you might have picked that one up already!).

Here's our simple table:

<table border=1 cellspacing=0 cellpadding=0 width=100 height=100>
<tr>
<td>1</td>
<td>2</td>
</tr><tr>
<td>3</td>
<td>4</td>
</tr>
</table>

See how my text (in this case, numbers) always is between <td></td>? That's where any text or image (or a secondary table, for that matter) should go! If text is outside the td tags, your table won't display properly.

Don't forget that you can give the font style, size and colour, bold and italic, etc, to the text! Be sure to put all of that inside the td tag, too!

See what happens when we don't put the text between the correct tags:

<table border=1 cellspacing=0 cellpadding=0 width=100 height=100>
0<tr>
<td></td>1
<td></td>
</tr>2<tr>
3<td></td>
<td>4</td>
</tr>
</table>
01 2 3
4

See how only the 4 is in the correct space? This is something that we have to be very careful coding, when working with tables!

The same thing goes for images - they, too, go between the td tags:

<table border=1 cellspacing=0 cellpadding=0 width=100 height=100>
<tr>
<td><img src="a.gif" border=0 alt="Image 1"></td>
<td><img src="is.gif" border=0 alt="Image 2"></td>
</tr><tr>
<td><img src="y.gif" border=0 alt="y"></td>
<td><img src="ah.gif" border=0 alt="Image 4"></td>
</tr>
</table>
Image 1 Image 2
Image 3 Image 4

Try moving the images outside the td tags, and see what happens!

By now, you're probably having fun putting in text and images... but see how the text and the images are all aligned to the left of the cell, and they are vertically aligned to the centre?

This is how we can move the pictures or images around... using align, from Lesson 2... and valign!

<table border=1 cellspacing=0 cellpadding=0 width=100 height=100>
<tr>
<td align="center"><img src="a.gif" border=0 alt="Image 1"></td>
<td align="right"><img src="is.gif" border=0 alt="Image 2"></td>
</tr><tr>
<td valign="top"><img src="y.gif" border=0 alt="y"></td>
<td valign="bottom"><img src="ah.gif" border=0 alt="Image 4"></td>
</tr>
</table>
Image 1 Image 2
Image 3 Image 4

Now we can mix and match the different alignments - a valign and an align attribute, for every td tag! Eg:

<td valign="top" align="center"><img src="ah.gif" border=0 alt="Image 1"></td> <td valign="bottom" align="right"><img src="ah.gif" border=0 alt="Image 2"></td>

Try it yourself, and see what happens!

Another place to use align and valign is in the tr tag (it doesn't just work for td!)

When using this for tr, it will apply the alignments to that particular row. (Using them in td, as you have seen, only works for that particular cell.)

<table border=1 cellspacing=0 cellpadding=0 width=100 height=100>
<tr align="center" valign="top">
<td><img src="a.gif" border=0 alt="Image 1"></td>
<td><img src="is.gif" border=0 alt="Image 2"></td>
</tr><tr align="right" valign="bottom">
<td><img src="y.gif" border=0 alt="y"></td>
<td><img src="ah.gif" border=0 alt="Image 4"></td>
</tr>
</table>
Image 1 Image 2
Image 3 Image 4

Just as you can align an image left or right, you can also align a table left or right!

<table border=1 cellspacing=0 cellpadding=0 width=100 height=100 align="left">
Image 1 Image 2
Image 3 Image 4
Text to go here. Text to go here. Text to go here. Text to go here. Text to go here. Text to go here. Text to go here. Text to go here. Text to go here. Text to go here. Text to go here. Text to go here.
<table border=1 cellspacing=0 cellpadding=0 width=100 height=100 align="right">
Image 1 Image 2
Image 3 Image 4
Text to go here. Text to go here. Text to go here. Text to go here. Text to go here. Text to go here. Text to go here. Text to go here. Text to go here. Text to go here. Text to go here. Text to go here.

Have fun with your alignments! ^_^

End of Lesson 5

Go on to HTML Lesson 6 for more!

That's it for this lesson! I hope this helps! ^_^


© Caroline 'Kunoichi' Seawright 2000 - present

If you enjoyed this page, please join my Egyptology & Archaeology Essays Mailing List.

Or contact me on Twitter:

comments powered by Disqus