March 3, 2011

Adding Images to your website!

Make sure you follow these steps in order, very carefully. Ms. Hill will be floating around to help!
  1. Make a new folder on the Desktop to keep your website in. (in Finder, File menu> New Folder  OR control+click on the desktop and select "New Folder")
  2. Name your folder the title of your site without spaces
  3. Drag your index.html (homepage) file into the new folder
  4. Open TextEdit (spotlight it)
  5. in the top menu, go to TextEdit > Preferences
  6. Check "plain text" under format
  7. Click on the "Open and Save" tab
  8. Check the top two boxes
  9. Close the preferences window
  10. In the top menu of TextEdit, File>Open
  11. Open your index.html file
  12. Find a photo on your computer or online you want to use for your website. 
  13. Save this photo into the new website folder you made.
  14. in TextEdit, in between the body tags of your index.html site, carefully type the following code: <img alt="short description of photo" src="imagename.jpg" />    where "imagename.jpg" will be replaced with the exact name of your photo (including extension). Alt is just a very short description of what the picture is.
  15. In the top menu, go to File> Save (not save as!)
  16. Open your website folder and control+click the index.html page. Chose Open with...> and then Safari so you can see your site in the Browser.
  17. Make sure the website shows your picture. If it does, celebrate! If it doesn't work, check carefully for typos, make sure everything is saved in the same folder, and if still broken, raise your hand for help.
  18. Use the rest of the time remaining to add additional photos. :)
  19. Happy Coding!

No comments:

Post a Comment