Media Assignment - HTML & CSS

Media Assignment:

Note that there is no video for this assignment, only written instructions.

Instructions:
1. Create a new folder named yourlastname_E09.
2. Create a new html file and save it in that folder. Name the file yourlastname_E09.html
3. Insert any clock widget from widgipedia.
4. After the break tags, insert a Google Search. Set it up to search the library of congress web site; here is the url:
  http://www.loc.gov/index.html
  - Important!
    - About half the search engines that students create produce no results for them or for me when they send them.
      - In those instances, the code will create a search box with an entry field and a button, but once an entry is made of a term one would expect results for, the output displays the message:
        No Results
    - After doing several tests to ascertain the cause, I have no solution (as of May, 2014).
      - Whenever I try it, it works and the students that it works for tend to be the better coders.
    - If the search engine you create produces no results, create another for a different, well known site and place that new search box's code underneath the first (the unsuccessful) search box code.
    - Do this for at least three different sites or until you get a search engine that works.
    - Write what happened in a paragraph element at the top of the search box part of your assignment page if one or two search boxes fail. (No comments needed if your first box works for you).
      - For example, you could write this at the top of the three search boxes you may end up making if none work:
        
        "Following are three unique search boxes from different sites that I created but they do not produce results."
    - My apologies for any aggravation this assignment may result in! But don't waste too much time on it, just move on once you have done this part of the assignment as best as you can.
5. After the search engine(s), add two break tags, one horizontal rule and two more break tags.
6. Go to Google Maps, find an interesting location and save the iframe code in the html file you have made.
  1. Copy the iframe code and paste it into your html file.
  2. Modify the iframe dimensions to be 350 wide by 300 high.
  3. Remove the link code and the text that make the link "View Larger Map".
  4. After it, add two break tags, one horizontal rule and two more break tags.
7. Make a link to an mp3 audio file using this image for the link to the audio file, as follows:
  1. Download this image into the directory you made:
  2. Insert the ear image on your page underneath the prior items.
  3. Make the image into a link to the following mp3 file:
    1. http://www.gottheknack.com/a_htmlCss/weeks/week6/e/media/audio/youAreListening.mp3
    2. Use the proper attributes to:
      - Have the link open in a new browser window.
      - Remove the border that will appear around the image when you add the link. It is OK to use deprecated attributes, so use the border attribute of the image tag to do this. Note that in css, the border property would be used.
  4. Test to make sure that the audio will play.
  5. After it, add two break tags, one horizontal rule and two more break tags.
8. Embed a YouTube video on a web page:
  1. Find a short (under 1 minute) non-controversial, inoffensive YouTube video at the YouTube site.
  2. Click the Share button that is under the video.
  3. Then click on the Embed button that appears.
  4. Copy all of the code in the box for the iframe.
  5. Paste the iframe code into your html in the proper location.
  6. Test it. NOTE!!! If the video does not work, check to see if the url to the video provided by YouTube does not include http: ...If not, add it.
    - For example, here is code before, as provided by google:
      
      <iframe width="560" height="315" src="//www.youtube.com/embed/7myF5EmK6RI?list=PLcTBPve8QnVe1RQlZH7A68lFQYaJUYJ9I" frameborder="0" allowfullscreen></iframe>
    - See the bold for what may need to be added...
      NOTE: that there should be NO space after http:
      
      <iframe width="560" height="315" src="http://www.youtube.com/embed/7myF5EmK6RI?list=PLcTBPve8QnVe1RQlZH7A68lFQYaJUYJ9I" frameborder="0" allowfullscreen></iframe>
    - Note, too, that the "http:" will not be needed if you upload the file to the web. As far as I know, the problem is only when viewing your media page locally (that is, on your computer).
9. After it, add two break tags, one horizontal rule and two more break tags.
10. Insert a Flash swf file and related code:
  1. Click to download this zip file
  2. Unzip it and there will be a folder with three files in it.
  3. Put all the files into the folder you made: yourlastname_E09
  4. Open the html file: studentFlashFile.html
  5. Copy the code specified in the comment tags into yourlastname_E09.html, per the instructions in the comments:
    1. Put the script line of code inside the head tags of your document.
    2. Put the remainder of the code into the body section.
  6. Put four break tags at the end of the code you just pasted into the body.
11. Save and then open your file in your browser and test that everything works.
12. Zip the folder for this exercise and send it to me.