[ See Schedule page for due date. ]

Guidelines

• Use (and know) the XHTML Basic Template found on the COIN 65 Resources page. Be sure to use the XHTML 1.0 Strict Doctype.
• Validate your work using an HTML validator (see Resources page), and also validate your CSS!
• Write your own code. This pertains to this assignment and any other you receive in this class. Do NOT use our (or anyone else's) code. If you do, you will fail the assignment. If you have any questions about this, see the Foothill Honor Code and/or contact me.
• Be sure to test your work. We will be testing and grading your work in Firefox, Netscape 7.X and/or Safari. We strongly suggest you upgrade to the most recent browser(s).

Specifics

This assignment asks you to create several documents which will give you practice with floats, positioning and a bit of layout.

• Create a folder named week_6 and save all of your documents in this folder. When the assignment is completed, you will upload this entire folder to your CTIS webspace.
• Put any images into a sub-folder named images.

Document #1 - Practice with Image and Float

Premise - In this practice, you will investigate how images position themselves normally and how you can change their positioning by using float.

1. View the images and text necessary for this exercise, and copy them. Use the Lorem text for content.
2. Create a new document in your editor, and name it float1_prac.html.
3. Style the body element:
    
   You may use embedded or linked styles, whichever you find easier. But do not use any in-line styles.
    
   
   • Set appropriate margins for all four sides of the body. I used 2% for the top/bottom and 2% for the left/right, but you can adjust these to suit your taste.
   • Set a color for the text and an appropriate background color.
   • Set the default font size and font family for the body. Specify a font family(s) you desire but be sure to include a generic font family at the end of the list.
4. Create a class to justify text.
5. Create a class to float an element left and another class to float an element right. Add some padding. I used .5em.
6. Create an ID to float left with padding of .25em and a similar ID that floats right with the same padding.
7. Create a class to clear both.
8. Set up 7 paragraphs of text using P tags. Make each paragraph different lengths - some long, some short. The last paragraph should be quite long.
    
   
   1. Paragraph 1: add an image (no styling) at the beginning of the P tag.
   2. Paragraph 2: add an image set to float left at the beginning of the P tag.
      Note the differences between a and b.
   3. Paragraph 3: add an image at the beginning of the the P tag set to float to right.
   4. Paragraph 4: bury an image (no styling) in the middle of the P tag.
   5. Paragraph 5: bury an image styled with the ID that floats left in the middle of the P tag.
      Note the differences between d and e.
   6. Paragraph 6: justify the text. Bury an image styled with the ID that floats right in the middle of the P tag.
   7. Paragraph 7: justify the text. Add an image set to float left at the beginning of the P tag. Add another image floated right buried inside the same P tag.
   8. Use clear where necessary to keep elements separate.

Here is an example of what you might create:

Document #2 - Pre-layout with Float

Premise - In this page, you will experiment with floated elements as they might pertain to page layout.

1. Create a new document in your editor and name it float2_prac.html.
2. Style the body element:
    
   You may use embedded or linked styles, whichever you find easier. But do not use any in-line styles.
    
   
   • Set appropriate margins for all four sides of the body. I used 2% for the top/bottom and 2% for the left/right, but you can adjust these to suit your taste.
   • Set a color for the text and an appropriate background color.
   • Set the default font size and font family for the body. Specify a font family(s) you desire but be sure to include a generic font family at the end of the list.
3. Create 4 paragraphs of text - some long and some shorter. Create one paragraph that contains 6-10 "links". The "links" should be the 4th paragraph. For now, use breaks to separate the links - later you will learn a better method.
4. Set a class to justify text.
5. Set a class to float an element left and another class to float an element right. Add some padding. I used .5em.
6. Set a class to clear both.
7. Float the image to the right in paragraph 1
8. Float the image to the left in paragraphs 2,3 and 5.
9. Float paragraph 2 to the right.
10. Float the "links" to the left.
11. Use what you have learned so far to set clears, justification, margins, widths, padding, borders, etc. for each element.
12. Resize the window. What happens to your layout?

Here is an example of what you might create.
Note: the numbers on the image below are there so you know the paragraph order - they are not included as text! However, if you want a challenge, you could add them as text and then use absolute positioning to place them.

Document #3 - Create a Photo Gallery

Premise - For this page, you will create a photo gallery using the supplied images (or your own). You will NOT use tables! Follow the directions in the links below to create your gallery. Feel free to adapt the styles and to be creative for your own situation.

1. Creating a Photo Gallery
2. Styling the DIV
3. Styling the Image and the Paragraph
4. Force a Line Break
5. Change Configuration

Here is an example of what you might create, but I hope yours is more exciting:

Submitting Your Assignment

• Upload your week_6 folder to the server.
• Create links to these three documents on your home page and test.
• Inside ETUDES, click on the "Assignments" link and submit your assignment by pasting in the URL to your home page.