Web Design 1 - HTML Lesson 6 - Aligning Images within Text

You already know how to add an image to a page.

There may be times you would like to text wrap around an image.

Start by copying this image and saving it in your images folder.

Create a new lesson_6.html page - as always, be sure you are including all the basic required elements.

1. In the body of your page go ahead and add this image.

<p><img src="images/eight_ball_small.jpg"></p>

This should bring up a simple page with the image.

2. Now add another paragraph but this time we will include the picture and text - be sure to write enough to allow the text to flow down and underneath the image (so you can see exactly how this works) - I used a placeholder of 'Loren Ipsum" generated text (Here is just one of the sites that can generate these for you: Dummy Text)

<p><img src="images/eight_ball_small.jpg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non est ista, inquam, Piso, magna dissensio. Tum Triarius: Posthac quidem, inquit, audacius. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde? Quem Tiberina descensio festo illo die tanto gaudio affecit, quanto L. Quare, quoniam de primis naturae commodis satis dietum est nunc de maioribus consequentibusque videamus. Duo Reges: constructio interrete. Quid ad utilitatem tantae pecuniae?</p>

My resulting image looks like this:

It is ok but the image is floating up above the letters. This may be what you want but there is yet another way to display the text.

3. Enter a third parapraph and this time we will alter where the image is placed. In an image you can tell it to be on the left or right of text, and to have some 'white space" around it (so the image is not right up against the characters). I am entering the same code as my 2nd image but adding some style elements - float (to tell the browser where to place the image within the paragraph) and padding (to add white space)

float: left;
float: right;

* there is no float middle option

padding: 10px;
padding-right: 15px;

* you can use any amount of pixels for the padding
* you can also be specific and say padding-top, padding-bottom, padding-right, and padding-left

<p><img style="float: left; padding: 15px" src="images/eight_ball_small.jpg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non est ista, inquam, Piso, magna dissensio. Tum Triarius: Posthac quidem, inquit, audacius. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde? Quem Tiberina descensio festo illo die tanto gaudio affecit, quanto L. Quare, quoniam de primis naturae commodis satis dietum est nunc de maioribus consequentibusque videamus. Duo Reges: constructio interrete. Quid ad utilitatem tantae pecuniae? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non est ista, inquam, Piso, magna dissensio. Tum Triarius: Posthac quidem, inquit, audacius. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde? Quem Tiberina descensio festo illo die tanto gaudio affecit, quanto L. Quare, quoniam de primis naturae commodis satis dietum est nunc de maioribus consequentibusque videamus. Duo Reges: constructio interrete. Quid ad utilitatem tantae pecuniae?</p>

Notice that in the 3rd example the picture looks neater and the text next to it starts at a higher point



Assignment for html lesson 6

  • When this assignment is complete your lesson_6.html should include the following:

    • Using an image of your choice (do not use the eight_ball image - that is just for practice) - place it within a paragraph so that it floats either to the left or right, has some white space and the text flows around it (as in step three above)

      ***Important Tip: Use a very, very small image so that you can actually see how the text wraps around your image, if your image is too large you will need a LOT of text to demonstrate the coding attributes for this lesson

    • Include a link to this lesson on your index page, and include a link in this lesson back to your index

    • Upload all files to x10 and check to be sure they work
      - do not forget that you need to upload index, & lesson_6, and put any images you use in the images folder in x10 - right?

    • Go "live" and check your pages to be sure they are working correctly.