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

<a href="http://yoursite.com">

Now you'll enter the image code after that tag:

<img src="http://i1011.photobucket.com/albums/FantasyClay/html.jpg">

Then you just need to close this with </a>  

Put it all together to look like this:

<a href="http://yoursite.com">

<img src="http://i1011.photobucket.com/albums/FantasyClay/html.jpg">

</a>

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.