Become a Billionaire with HTML

Rationale: The purpose of this activity is to view and manipulate the code behind a web page.

Procedure:

1. Open Microsoft Word.
   
2. Open Mozilla Firefox.
   
3. Using Mozilla Firefox, go to the following website: The World's Billionaires
4. Click on one of the names on the left hand side of the page.
   
5. After the page loads, view the source code of the web site by clicking View on the menu bar and selecting Page Source.
6. Press Ctrl + A to select all of the text. Press Ctrl + C to copy the text.
7. Go back to the Word file and paste the text into the Word document.
8. Return to the web page. Select and copy some text on the web page that you would like to change. (You will start with the name of the person you chose.)
9. Return to your Microsoft Word code document. Run a Find command from the Edit menu. Paste the copied text from the web page in the “Find what:” box. Click “Find Next”.
10. The text from the web page that you want to change will be highlighted in the code. Type any changes (Replace their name with your name) and be careful not to change any of the tags that are in brackets that look like this <> .
11. Save the file as a text file (File/SaveAs and change the file type to Text Only) with an .html file extension (LastFirst.html). Make sure that you save the document into the My Documents folder!!!
12. Return to Mozilla Firefox. Open the saved .html file by clicking File, Open File. Browse to the file’s location and select it.
13. The file should display as a web page with a new name in the title bar (the bar at the top of the page). Notice it is not appearing as a www site.
14. Experiment with other changes to the code to see what happens. Examples include finding and replacing occurrences of certain words or names, replacing graphics, deleting code segments, moving code segments etc.
15. The rest of the assignment is only if you have gotten the first steps 1-14. This is not required but it really cool. The rest of the steps will tell you how to add your own picture to your newly created webpage.
16. You will have to open back up the original webpage from the internet using Mozilla Firefox. Right click on the picture and select "Copy Image Location".
17. Go back to Microsoft Word and paste this (Ctrl+V) into the "Find what:" box.
18. You will then need to go back to Firefox and and browse to your picture that was taken in class. There is a set of links at the bottom of this post for your pictures. Click on your picture so that it loads the large version. Once it loads, you will need to right click and select "Copy Image Location".
19. Go back to Microsoft Word and paste this (Ctrl+V) to replace the text that you just found in step 17.
20. Now your picture should appear after you save the file and open it again in Firefox.

Picture Links
1st Hour Billionaires
3rd Hour Billionaires
4thHour Billionaires
5th Hour Billionaires

Upload Instructions

1. Make sure that you have made all necessary changes to the webpage and save it.
2. Go to the UTIPS website to upload your file: UTIPS
3. In the top-left of the screen, click on your class period.
4. The new screen will appear and you should see a "File Upload" section in the middle of the screen. Click on it.
5. Click on "Browse".
6. Select your file from your My Documents folder and click on "Open"
7. Click on the "Upload" button and make sure that it works successfully. If it gives you an "Upload Success" screen, you should be done.
8. Once everyone has this file uploaded (probably on Thursday evening), I will create a new posting so that you can easily view your created webpages from home and show your family and friends how you make so much money!!! :)
   

What should you learn as a result of participation in this activity?
1) You will understand the importance of accurate code.
2) You will be able to manipulate the code from web pages.