HTML Basics -Tutorial 1-27-09

HTML Basics for Bloggers -
Inserting Links & Photos

Since I've had a great demand this week for inserting links and photos I decided to skip ahead and share this information with you now.

To link text or pictures is the same code. Only pictures use an extra piece of code.

<a href="">
is the piece of code you want to place where you want the link to go to.
then type what you want it to say and close the code like:
<a href=""> Click here </a>
Anything you put between the <a href=""> & </a> will show as the linked text.

So say your writing a review on Touch'd Bath & Body products,
it would look like this in your html tab:

I could not believe that my skin felt so soft and sexy after I used <a href="">Touch'd!</a> I never felt so smooth, sexy, and desirable. I can't explain it, but I just wanted to be <a href="">Touch'd</a> all over!

And will look like this in your post:
I could not believe that my skin felt so soft and sexy after I used Touch'd I never felt so smooth, sexy, and desirable. I can't explain it, but I just wanted to be Touch'd all over!

Now say you want to link an image instead of the text. Like posting someone's button.
Using the above as an example all we are going to do is replace the words we linked with the image's code.
So first let me explain image code. In any html image's are always
<img src="">
thats all you need. If you picture is too big then specify the size you want within the code, like this:
<img src="" width="125">
<img src="" height="125">

which makes it really easy to resize instead of having to edit the picture itself in photoshop or another program you can edit it right there.
Just to give you an example the width & height sizes are in pixels. And if you only do one it will automatically keep scale on the other. So you change a 300 width and 150 length picture to width="200" it will change the height to "75" so you dont have to worry about your images getting all bent out of shape.

ok back to the picture code. As long as the url inside the "" is to the exact photo location you should be fine.

so for linking the image just type your original code with where the photo should link to
<a href="">
then your picture code <img src="" >
then close it </a>

so like in my example
<a href=""><img src="" ></a>
links a photo of Touch'd Sugar Scrubs to Touch'd Bath & Body Products main page
and looks like this:

<a href=""><img src="" width="125"></a>
that was the same thing but made the image 125 pixels wide, the size of a normal button, small enough to fit in most sidebars with some room to spare.
That code looks like this:

Say you don't know the size you want, basically to give you a round about guide, look at an inch on your screen, that's essentially 100 pixels.

That's it! As long as you remember to always put the text in "s you will be fine.
Copy & Paste
<a href=""><img src=""></a>
Just fill in your htpp:// in the blanks in between the ""

Good Luck! Comment or Email with questions! Thanks!

PS~ Make sure to check out Touch'd! Feel Sexy, Feel Beautiful, Get Touch'd!Photobucket


Anonymous said...

I love Tuesday tutorials. Thanks for the great lessons!

kristin maynes said...

Thanks for the info...that's makes a lot of sense, NOW! haha!

BTW, I'm hoping to get a jar of TOUCH'd soon. I was chatting with Rachel, from Touch'd, Tuesday night and I can't wait to try it.