HTML: Adding another photo

Here’s what the listing looked like when we left off.

Just as a refresher, we added a photo here and formatted the text here.

What we’re going to do is add another photo to it, this one over on the right. Then we’ll add a photo that’s centered, and we’ll center the header text.

What we need to do is put the next photo in the second paragraph exactly the same way the first one went in. We take this piece of code

<img src=”http://help4flirts.com/images/portrait2.jpg“>

and insert it right after the header of the second paragraph, changing only the name of the image.

It looks like this, just like the last one did. There’s a photo inline with the beginning of the first sentence.

now we are going to align the photo to the right by adding ‘align=”right”‘ and put a little space between the text and the photo by adding a left margin of 5 pixels to it.
<img src=”http://help4flirts.com/images/portrait2.jpg” align=”right” style=”margin-left:5px”>

Now the photo is on the right side.

To center something, what we do is put <center>and</center> around it.
So if we put those around an image, the code will look like this:

<center><img src=”http://help4flirts.com/images/landscape.jpg”></center>
If we put these around the header text, the code will look like this:

<center><h1>Header</h1></center>

So what we do is put the center tags around both headers. We put center tags around an image we want to use as a header image. We get rid of all those line breaks (<br>), because we won’t be needing them anymore. And here’s what it looks like.

0 comments ↓

There are no comments yet...Kick things off by filling out the form below.

You must log in to post a comment.