Navigation
Learn to make your own web site!
|
Table of Contents: |
Add images, music and more to your site
Images, Music and More -- oh my! This is the exciting one! The one you've all been waiting for! YAHOO!!! Now's the time to really spice up your site.
Let's start with images. First, you're going to need a picture to use. That
shouldn't be hard -- there are 880 million for you to search through over at
Google Image Search! Oh my, indeed!
Since our little example home page lists three of my favorite things, why not get a picture of one of them for use on the page? One of my favorite things is Star Wars, so let's use a picture of good old R2-D2.
(To download this picture, right-click the image at right and click "Save Picture As..." Save it in the same folder as your web site. You can save and use any picture you find.)
Once you have an image in your site's folder, insert the following code into your page wherever you want the image to appear (I recommend created a new paragraph just for it): <img src="filename">. For the R2-D2 picture, the file name is r2d2.jpg (unless you changed it when you saved it). Therefore, to put that R2-D2 picture on my page I would type <img src="r2d2.jpg">.
See how the R2-D2 picture is over on the right of the text? Normally it would just appear exactly where you inserted the code. So, instead of that it would look like this:
While that's certainly one way of doing it, the other way saves space. To make it pop over to the right like that I did two things. First, I made it part of the paragraph in front of it instead of having a paragraph all to itself. Next, I inserted a little bit of extra code into the <img> tag, so that it looked like this: <img src="r2d2.jpg" align=right>. Instead of typing "right" next to align, you could also type left, which would make the image appear to the left of the text.
Finally, you can add borders to pictures. Doing this also requires adding a little something inside the tag. Let's make your right-aligned picture have a size-2 border. Add border=2 to the image tag, so that it looks something like this: <img src="r2d2.jpg" align=right border=2>.
The code for your home page with your image should now look something like this:
<html>
<head>
<title>My Page</title>
</head>
<body bgcolor=yellow>
...
<p><img src="r2d2.jpg" align=right border=2>I like many things. Here is a numbered list of my favorite things:
<ol>
<li>Star Wars
<li>Computers
<li>Books
</ol>
...
</body>
</html>
Now let's add some music!
Now it's time for the final step: adding music to your site!
Since the home page lists a few of My Favorite Things, why not play the song by the same name? It's a MIDI file that you can download by right-clicking here and then click "Save Target As..." Save it as favorite.mid, and -- as always -- save it in the same folder as your site.
Now, right before the closing body tag, type the following into the code for your home page: <bgsound src="favorite.mid" loop=1>. That will make My Favorite Things play once as soon as you get to the page. If you want it to play two times, three times, and so on, just change the number after "loop."
Now, for a change of tune (so to speak), let's add a very different song to the second page: Superstition, by Stevie Wonder. (Again, you can save it by right-clicking that link and selecting "Save Target As...") To do so, insert the same code as last time anywhere on the second page (within the body tags, that is) with one difference -- instead of favorite.mid, type susperstition.mid (or whatever you saved it as).
To see what your site should look like so far, including the image and music, click here.
Unfortunately, I don't really have time to do any more, so you'll have to wait until I update this site again to learn about the "more"!
Since there's not anything more here to learn, I hereby proclaim that you have completed Lesson 3 of TophTucker.com Web Authoring 101! You're almost done -- the Conclusion is the only thing left!
Links |
About the Site | Site
Map | FAQ | Version History |
Top of Page |Created by Christopher Tucker. Last updated 6 June 2004. Questions? Comments? E-mail me.