Objectives:

  • Apply a Style Sheet to a web page

  • Make text wrap around an image

  • Apply the alt feature for better accessibility

Making Text Wrap Around a Picture with CSS

Take a look at the source code for the example. You will notice a few things.
  1. I placed this css code in the stylesheet (the .css file in your folder):
    
    
    .image{  float:left;
             margin-left:0;
             padding-right=1em;
             padding-top=1em;
             padding-bottom=1em;
             }
    
    Then, when I placed the picture in the page, I used this code in the actual web page:
    <p class="image"><img src="luck.jpg" alt = "my tom cat..."></p>
    


    This accomplishes two things. First, it applys my style to the actual picture. This is what makes the text "wrap" around the picture itself. Second, the use of the alt tag creates a situation whereby if the user hovers the mouse over the picture, the "alternative" text appears. This is a feature that specifically helps visually impaired users (or people using text only browsers) make sense of your images.

    Assignment

    Take a previous web page you have made in class and redesign it using CSS. Make sure your text wraps around your images (where appropriate) and that all of your images have alt tags.

    << Back to Skyline