Web Design For Idiots

Someone asked me a non-question the other day. I really didn’t know how to answer it. The question was:

I understand where this question comes from, because I had the same question when I was new to web design. You see those websites that have a bunch of code for an image that you can copy and paste that code so the image shows on your OWN web site. The thing is, you are thinking that the image needs its OWN code, somehow embedded into it in order to use that function.

The reality is, the image is just that. AN IMAGE. When I create images for the internet, print, or anything else, there is no special coding or addons that I apply when doing web site images. An image is an image is an image.. and that’s that.

So where did that code come from? Well, it is simple HTML. If you do not know HTML, take this as your first course, and my first tutorial on it (there will be LOTS more to come)

This is what the image code will ALWAYS look like for those “grab the code and add to your site” things:
<a href="http://yourwebsite.com"><img src="http://yourwebsite.com/imgfolder/imgname.jpg"/></a>

Now I will explain exactly what that is.

All code HAS to start with a ‘<' and then the "a href"

The "a" means ANCHOR which is always used to create a link. ALWAYS.

href apparently means hypertext reference. I had to look this up because I did not know this. What you need to know is you will ALWAYS use this <a href= when you are linking text or an image to some other place.

Then you will ALWAYS put the web page that you will like to inbetween the quotes <a href="http://websitelinkedto.com" and you close this part of the code with '>'

When you close that linking part of the code, you need to open the code that puts the image there as a link. So again you start with a '<'

Then you add “img src” and you can probably guess what it means.. IMAGE SOURCE. The image source the always going to be the file path in which you uploaded your image to. You can NOT put a picture into your website without first uploading it to your web server. If you want to learn more about how to do this, CLICK HERE.

So now you got <a href="http://websiteyoulinkedto.com"><img src=

You will then put the path to your image inbetween quotes. It will ALWAYS be a complete url. So if you uploaded that image into a folder on your server called IMAGES, you will have something like this: "http://yourwebsite.com/images/imgname.jpg"

If your images folder is in a sub folder called “content” then you HAVE to give both because it has to be a complete path. So it would look like this:
"http://yourwebsite.com/content/images/imgname.jpg"

You can test if you have the correct url or path by opening your web browser and then typing in your image source url. If you are correct, you will see your image in your browser just there on a blank page. If its not correct, you need to make sure that you spelled everything correctly, and that you actually did upload the image to that place.

So now you simply close the image code with /> and then you have to COMPLETELY close the link with . The reason you do not close the linking code before you start the image code is because if you did that, then you will not encase the image in the link code and then the image will not be a link!! So if you open with an “a” you have to close with an “a”

When you add all of those steps together, you get this:
<a href="http://websitelinked.com"><img src="http://yourwebsite.com/images/imgname.jpg"/></a>
Alternately, if you wanted to link simple text, you would just replace the entire with the text you want to link.
It will look like this:
< a href="http://websitelinkedto.com">YOUR TEXT HERE</a>

So now you have not only learned what code to give to people if they want to post your picture on their website, but you also learned how to turn an image AND text into a link, and HOW it works.

So I hope all of this makes sense to you.. I was having a hard time coming up with a good graphic for this post..

PRINT THIS POST – put it next to your computer, write all over it.. let it help you
 Print This Post

---

Want to know who is offering this awesome content? Here it is! Someone who is relatively new to web design. I am new enough to still remember how absolutely frustrating it was to try and get anything done in this field, but have also been around long enough to be able to help those that are where I was a year ago. Aside from web design, I run the office of my dad's engineering business, and do book keeping by trade. I love my pets.. All 6 cats, 1 peg legged dogs, and 1 hedgehog. LOVE THEM!! Oh yea, and my husband. He lets me chase my dreams and I let him do the same. We are happy people because of it. Read more from this author

---

This entry was posted on Saturday, February 21st, 2009 at 11:28 am and is filed under Uncategorized, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.