HTML for Beginners 3
How to Wrap Text around Pictures on a Website
In the last couple tutorials, I went over how to structure anchor text on a web page and gave some basic HTML tips. In this tutorial, we are going to go over how to align a picture for your site.
If you brand new, then chances are great that you have had some frustration over making your pictures align up nicely with your text. I did too. For a couple years, rather than learn how to do it, I simply posted a picture either at the top of the text or at the bottom.
No need to do this though. It is really pretty simple to do.
To illustrate, here is an example ripped from my about page.
Now this is a bit convoluted, right?
Well it doesn’t have to be. This was just automatically formatted by the geniuses of wordpress.
To do the trick, all you need to do is this:
<a href=”http://Yoursite.com/picture.jpg” align=”left”><img src=”http://yoursite.com/picture.jpg”></img></a>
If you use the above code, then your picture will be placed to the left of the text.
Of course, you could use other code, if you want it aligned in the center or to the right.
- align=”center”
- align=”right”
Okay, let’s take a second look at the coding again and try to analyze it a bit….
Notice that there are two sections to this code which are basically the same.
- The first part of the code tells the browser how to place the picture. Things like alignment, and size play a part in this.
- The second part of the code tells the browser where to retrieve the picture. Yeah, I know, it is pretty much the same thing as the first. Don’t ask me why.
So, in order to align pictures using HTML, here are some basics….
- always use the align tag on the first part of the tag right after the URL structure (the parenthesis)
- how you want the alignment to be is always in quotes. ex. ….align=”right”>
Of course, there are other ways to do it and make it prettier using the <span> and <div> tags but that is not for now.
Check out my other HTML tutorials for beginners
How to Create bullet points using HTML
