Answer these questions about images in your composition book:

1. Find a site on the web that you like and describe the pictures.
2. Can you use any picture you like in a website? Why or why not?
3. Did you bring pictures with you? What are the dimensions of those pictures in pixels? What does that mean?
4. If you did not bring your own pictures then define usage rights. Can you use any picture you want on your website?
5. Read pages 99 to 102.

Practice:

1. Create a subdirectory (folder) in your main website folder called images. Save your pictures there.
2. If you would like more pictures, use google advanced image search and set usage rights to “free to use or share.”
3. Convert your favorite picture to less than 600 px using Photoshop, Picasa or other software. Now save it as Imagename 600 . Now convert to 300 px and save as Imagename 300.
4. Place a picture in your website using the code on page 99.
5. How does it look? Move the img src code to various spots in your code and see how this affects the look of your page.

Use css to style your image:

1. Carefully read page 184 about css classes.
2. Look at the example of a floated element on page 364. Draw a sketch in your notebook showing the layout of your page with the picture floated left.
3. We will create 2 classes, one that floats pictures left and one right. Open you css stylesheet in notepad or text wrangler.
4. Copy the first 6 lines of code in the middle section of page 411.
5. Now open your index.html file and add the class attribute equal to “align-left” to your img tag.
6. Take a look. Try changing the class to “align-right”
7. What happens if you change the value for the margin in the stylesheet.
8. Look at your webpage locally and then use filezilla to upload and look at it live on the web.