HTML Tutorial

Follow the steps in this HTML Tutorial to learn how to write and design your own webpage. Use the playground below to practice your skills.

Previous

Adding Pictures

Next

Adding Pictures


Pictures + text

Now that you know how to include both text and pictures on a web page, let's put them together. There are a few ways in HTML to make the two flow together smoothly, one of which is to use the image tag's align attribute.

Say you want a picture of your cat to appear right next to a short description of her. Here's one way to do that:

<p><img src="images/whitekitten.jpg">Here's a picture of my cat Snowball. She loves sitting in the sun and stretching out first thing in the morning. She wakes me up every day at 7am.</p>
will show up in the browser as

Here's a picture of my cat Snowball. She loves sitting in the sun and stretching out first thing in the morning. She wakes me up every day at 7am.

Oops! That doesn't look quite right. This is why the align attribute is so useful. In the example below, the only thing I've changed is to add align="left" to the <img> tag. This tells the browser to put the picture on the left side of the page and then wrap the text around it.
will show up in the browser as

Here's a picture of my cat Snowball. She loves sitting in the sun and stretching out first thing in the morning. She wakes me up every day at 7am.



That's much better! Other options for align are "right", "top", "bottom", and "middle". Try adding this attribute in the HTML Playground to see how the different options affect the image's placement.

HTML Playground

Your Code

The Results