Favicons and Music Tour!

Today we are going to create a Favicon (the small picture that shows up on the browser tab to the left of your title) and add it to a webpage. We will also add the html code to embed music on a webpage!

Adding a Favicon

  1. Click on Start (Windows icon on bottom left of screen) and type Paint. Click on the paint program to open it.
  2. First, we need to adjust the paint window to be 16 by 16 pixels since favicons have to be tiny images. To do this, click on the first tab with the drop down arrow and choose Properties. Then choose Pixels and Color, if needed, and type 16 for both the width and height and then click OK.
  3. Then go to the View tab and click Zoom In about 5 times.
  4. Now click back on the home tab. Do your best to draw a simple picture. Pick the pencil or small brush size and just use a few colors.
  5. Click on the first tab and choose Save As and then click PNG Picture. Make sure the file is saving to Documents and then name the file something like coolFavicon (of course, choose your own filename, do not type in the file extension, it will add it for you).
  6. Close the Paint program and then open Komodo.
  7. Make a new file in Komodo named faviconAndMusic.html. Make sure that it is in the same directory as your .png file.
  8. Type in the following sample html file (be sure to use the filename for YOUR logo in the link tag): 
    <!DOCTYPE html>
<html>
  <head>
    <link rel="shortcut icon" href="coolFavicon.png" type="image/png" >
    <title>Favicon Example</title>
  </head>
  <body>
    <h1>Example Favicon Web Page</h1>
    Check out the cool favicon in the tab at the top of the broswer!
  </body>
</html>
  9. Save your .html file.
  10. Open your faviconAndMusic.html webpage with Chrome or Firefox and verify that your Favicon works!
  11. Upload your faviconAndMusic.html webpage and your .png file to the CS webserver.
  12. Verify your webpage is available online at: https://www.cs.mtsu.edu/~YourPipelineID/faviconAndMusic.html.

Adding Music

  1. Next try adding the following code to your faviconAndMusic.html webpage to embed music on your webpage. Unfortunately, you will not be able to hear it unless you have headphones with you, since the speakers are disable on the lab computers. 
    <embed src="myFavoriteTrack.mp3" autostart="true" loop="false" />
    The myFavoriteTrack.mp3 file in the code above would have to be an actual music file that you have rights to and that is in the same folder as your .html file. To test here in the lab room you could use one of the sample music files located under the Libraries/Music/Sample Music directory. You could save one of those files to the same directory as your .html file.
  2. Be sure to replace myFavoriteTrack.mp3 with the exact file name of the music file you just copied. Be sure to include the .mp3 extension and that you type in the uppercase and lowercase letters correctly.
  3. Open or refresh your webpage in a browser to make sure it works. Even if you don’t have headphones with you make sure that the play bar is moving!
  4. Upload your .mp3 file and your faviconAndMusic.html webpage to the CS webserver.
  5. Verify your webpage is available online at: https://www.cs.mtsu.edu/~YourPipelineID/faviconAndMusic.html.

Rubric:

Points       Item
----------   --------------------------------------------------------------
_____ /  2   Used exact filename, faviconAndMusic.html
_____ /  6   Favicon image
_____ /  6   Plays music

_____ / 14   Total