I know a lot of you are waiting for the 'How to make pictures pop up in a new window' tutorial, but I'll have to post that when I've got some projects out of the way. It'll be pretty intensive!

But for today, we'll start with something related, posting pictures on your site.

First of all, to post your own pictures on your site, you need to have them uploaded somewhere on the internet. You can't post up pictures that are on your hard drive. Your hard drive isn't accessible to the web. There are a lot of sites out there that will let you upload your pics, but not many that will let you upload your pics and post them on a site other than theirs (like Geocities and Angelfire). If you know of any free sites to upload and use to post pics, please tell us, and I'll add them here.

But if you owned your own domain, then it's no problem. Just upload them to your server and point to them, and you should be A-OK.

So what's the html to post your picture?

Well, lets start off with a picture, my little South Park Yano.

Ain't she purty?

The code behind this picture is this:

<img src="http://www.yanowhatimean.com/blog/spyano.jpg">

As you can see, she's a picture that's taller than she is wide. Which is fine. But she takes a lot of space. Why not save some space and just push her over to the right, fitting in next to the rest of my text? That way, I don't get a lot of empty space around her, and if I'm incorporating her into my story, it doesn't destroy the flow. So that's what I've done to the right. You can see that the text stops right before the picture and flows to the next line.

Here's the code for that:

<img src="http://www.yanowhatimean.com/blog/spyano.jpg" align = "right">

But you can see that she then stays to the right of any section after that. There may be some instances where you want to start anew. So here's South Park Dominatrix Yano on the left, and there's some additional coding that I will add after this paragraph (you don't want to put it after the picture, because the tag for the picture is at the start of this paragraph) so that I can 'close' this paragraph and picture and start anew afterwards.

After manually putting in a break (shown below) this text is no longer to the right of the picture, it's in a whole new section.

So here's the code for the left alignment:

<img src="http://www.yanowhatimean.com/blog/spyano.jpg" align = "left">

And here's the code that I put after the paragraph:

<BR clear="all">

OK, that's all for now! I have a hellish day at work today so the Hawaii review is still on hold!

Posted by Yano at March 15, 2004 02:53 AM

---

---

---

---

---

---

---