Tuesday, June 29, 2010

Basic HTML for Artfire

Earlier I posted how to make up a widget for your Artfire studio.  I explained how to post the HTML into the Widget tool but I forgot to explain some of the basic code of HTML so you can put together your own widgets. My fault for being such a geek I forget to explain things.

HTML can look like a alien language if you aren't used to it at first. But you only need to know a few basic tags to make up most widgets or buttons.
Tags are the things inside the <> signs that tell the computer what to do. Most of the time you have an opening tag <tag> and a matching closing tag that tag has this format </tag> . Not all tags need a closing tag but many do.It tells the computer that to stop that command.

Now to go over the code that you actually need to make a clickable image, in other words a widget. The first is called an anchor tag, just <a> </a>. To let the computer know you want it to link to another site, you need to href so the code will look like this:

<a href="url">Site</a> 

This is the basic set up for adding a link and then building a link,  I'll take it apart piece by piece and show you how to make your own. This basic formula is used over and over.

The first part <a href="url"> just lets the computer know you are linking to that url- this can be any site, just be sure to include the whole address with http://yoursite.com and that address must be in quotes and you end the tag with the less than sign <a href="http://yoursite.com">. The </a> closes the link.

 So this tells the computer you want it to link to another site when some clicks on the link but you haven't put anything to click on. For a basic text link you just need to add it between the opening and closing tag.
<a href="http://yoursite.com">Click Here</a>
This will give you link that looks like this  Click Here .

You're probably saying but I want a button or widget, not text. For that you will use the same set up instead of text, you will use code to show an image. That image needs to be online somewhere. It is a good idea to host it yourself by uploading it to Photoshop or another image hosting site. Every image has a location you need to use, example http://i1011.photobucket.com/FantasyClay/html.jpg. This tells the computer where to find the image. You can get this location by right clicking on an image and clicking copy image location.

If you use Photobucket, they have different codes on the side to link to the img, use direct link. One thing to remember, don't link directly to someone else's site. It uses their bandwidth and if they remove the picture, you've lost your image.

Now that you have this location, you need to use <img> (image tags) to actually have them displayed. The image tag also needs your to tell the source of the image(the location you just found) so the tag will look like this <img src="http://i1011.photobucket.com/albums/FantasyClay/html.jpg"> . This code will make make the image show.

The next step is to put it all together to get an image that is a link. First you need the opening  anchor tag

Now you'll enter the image code after that tag:
Then you just need to close this with </a>  

Put it all together to look like this:


You need to substitute your image location and your site for your widget. 

To review though, to make a button or widget you can click on, you just need an anchor tag <a href> and an image with the image source <img src="xyz"> and then close the whole thing with </a>.
 There are some extra tags to refine your widget but I will go over them later and also the code to make an email link. To review how to then post on your Artfire studio, you can check here. Be sure to check your studio once you add the widget just to be sure you got the code right. Computers are fussy, they don't forgive spelling or forgotten symbols. Do take heart, it happens to everyone again and again. Usually I need to go over it at least twice to get it write oops I mean right. 

I hope I did a good job explain this- I'm open for questions or tips.


Rock Bug said...

Wow, that's a lot of information. I'll have to read it over a few more times to get it all. Thanks for taking the time to consolidate this for us!

Anonymous said...

I fear I might be too comfortable with HTML since I've been using it so long. Let me know if I need to break it up further or just re-edit the article to make it easier to read.

Victoria said...

Thanks so much, you have explained it very well, now I just need to see if I can do something with this information, and I will be back.

Erin - esjewelry said...

This is absolutely fantastic! I can't wait to sit down (when I've got a few spare minutes) to really try out doing that myself!! Thanks so much for posting!! =)

Sue Andrus said...

Thanks so much for the detailed info!! I have a couple of computer geek sons who think I should already know all of this just because they do.... NOT! :)

Anonymous said...

wow is right...thanks for that but i think way out of my league of understanding, u mean we can make our own widget?...im not sure i would be able to understand all this but thanks for posting it! :)

Bridget said...

Thank you so much for this lesson on html! Do you know if we can add clickable links in our product descriptions?

Bridget said...

just added the email option, to this message, forgot to do that for my previous question, so that I'll know when you reply. Thanks again,I found you through the forums, I voted on the Back to school challenge.

Anonymous said...

No such luck. AF doesn't make the links live on their own nor can you add html so no way to make links live in the description.

It would be nice to just have links with AF to matching items like Etsy does (one of the few things they have right)

Bridget said...

Thanks Susan, I wish that were possible too!