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.

<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:

    • The three examples from above using the eight ball image

    • Three more examples but use an image of your choice
      Tip: Use a 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

    • Add a 7th paragraph that has a change of float to the right, and changes in individual padding sizes

    • Include links to lesson on index page, and a link back to your index

    • Upload all files to x10 and check to be sure they work