This weekend, I've been making my Resource page, or links page if you like, on this site. Why, I hear some of you ask? Such pages are a way to share useful sites with your visitors, add value to your customers by providing links to providers you know can help them, acknowledge resources you use and, if you're like me, a bit on the forgetful side, provide a reminder for yourself.

A links page can be just a long list of web links. It can be sorted under headings and, if you have a quite a few, is the way to go. Mine is as I know I am going to build quite the list. The links are usually relevant to the main area of interest of the site. Mine has links to resources for making Digital Art and Photography. I like to tell folks why I am listing a web address and so I write a little paragraph about the link. All of this adds value to my site. My visitors will remember my site because I have a great list of helpful links.

There are a couple of ways a link can be told to open when it is clicked. The first is 'Open in the Same Window'. When you click the link, the new page opens in the same window. That's cool if you are flitting around my website. After all, who wants to have a hundred windows open just to look at one site. If you click on the extraordinary piece of abstract art above, you will be taken to the image's page in my galleries. You will leave this page you are reading and go to the big version of the image. In the same window. Where, by the way, you will find the favourite button to keep it for later buying if you simply must have it for your wall, and the social sharing buttons to let the world know what a nice image it is. Just saying.

Then, after you've favourited, and or shared the amazing work, you will click the back arrow and come back here to finish reading this amazingly brilliant post. Or use the menu. Won't you? And it's easy to get back to here because you've never left this website. No matter how many pages you might have visited in my awe inspiring galleries. If you keep pressing the back arrow, you will eventually get back here!

When I'm creating links on my site to someone else's website, I like the link to open in a new window when you click on it. That way, my website is still open and you will be able to come back to me, oh so easily. Can't say the number of times I've followed links of interest only to realise I can't find my way back to where I started.

But what if the Editor I use only uses this method? I could rely on you, the reader, knowing about right clicking and selecting Open In New Tab, because you don't really want to leave my site, but there is another way. I can add some HTML tags that tell the link to open in a new window! Yeah!

But, you say, I cannot code. I do not like code. Code is right up there with green eggs and ham. Yuck! I can't code!

Can I?

Here is how one can add a little code into one's life and achieve a sense of wonder and satisfaction at turning what looks like gobeldy gook into something real. You need to be in the part of your Editor that allows raw HTML code and then you need to learn a little html. It's actually not that hard. There are basic tags to use and once you know what they are, you'll be coding in no time at all.

To write code you need an Editor that allows you to write or add raw HTML. Most website editors allow this. You can write your code in Notepad on your computer because it acts like a code editor. I do this as it's quite quick and clear. I then just copy and paste into my website's editor.

You cannot use programs like Word for this as they want to clutter the whole thing up with their own code and well that's just a mess. It has to be a plain text editor like Notepad on a Windows computer. You can also find free code editors by searching the net.

Yes I absolutely do. I guess we really need to start with what the link on my image would look like. This is the actual address of the image's page: http://janiceo.com.au/portfolio/digital-art/abstract/ui/DXONSXAAH5-ARV-IWUTMN. You will see this in your browser's address bar when you follow the link to the large version. The code for this, what the editor has written in the background uses the HTML tag that refers to links. it begins with the letter a. How cool!

A basic link looks like this: <a href="url">link text</a>

That's not so bad, is it? All html tags are enclosed in the angle brackets - those little sideways v's on the bottom row of your keyboard. You generally require an opening and closing tag for every line of code. The closing or end tag is the opening tag with a slash in front of it.

For our example above, the a signifies the code is a link. The href specifies the address. The link text is the part the visitor sees on our published page. When the link is clicked you are taken to the address. The /a just says this piece of code is finished.

So the web speak address for my large image is:

<a href="http://janiceo.com.au/portfolio/digital-art/abstract/ui/DXONSXAAH5-ARV-IWUTMN">Endless</a>

And would look like this if I put it in this article:

When it is clicked, the image will open in the same window this post is in. However, I can add extra directions or attributes as they are called in the coding world, that will tell my browser to open my link in a new window. To do this I am going to add a target attribute and value. This will tell my link where to open. In this case I'm going to use the target value _blank. The _blank attribute tells the link to open in a new window or tab. So cool!

So now my link code will look like this:

<a href="http://janiceo.com.au/portfolio/digital-art/abstract/ui/DXONSXAAH5-ARV-IWUTMN" target="_blank" >Endless</a>

And it will look like this in my article:

Now my link opens in a new window. However, the link text is a little bit on the small side. It's going to be more visible if I bold it. I can do that. I need to add another tag inside my code that will tell my browser to bold the link text. I'm going to use the bold tag which is simply the letter b. I need an opening and closing tag for this new direction, and I need to place those tags just before and after the link text only. My code will now look like this:

<a href="http://janiceo.com.au/portfolio/digital-art/abstract/ui/DXONSXAAH5-ARV-IWUTMN" target="_blank" ><b>Endless</b></a>

The bold link text stands out better on my page:

You might want it even bigger and in this case, yes, you're so clever, there is a tag for that. Instead of the bold tag, I can use a header tag which is the letter h. I know, right, so simple. Except that there are different size header tags - as many as are written into your websites basic CSS coding (which is a whole nother thing for another time.) Header sizes are denoted by numbers. 1 is big, 2 is not so big, 3 is not as big as that and so on. The number tells your browser what size and weight the font should be.

I'm going to make my text link h3. It will look like this:

<a href="http://janiceo.com.au/portfolio/digital-art/abstract/ui/DXONSXAAH5-ARV-IWUTMN" target="_blank" ><h3>Endless</h3></a>

Notice I replaced the bold tags <b></b> with the <h3></h3> tags around the link text.

I want to add some comments after my link. That's simple. Start typing at the end of your line of code. Leave a charachter space between the last tag and you sentence. If you want a little story after your link then add the paragraph tag. I know you've already guessed this and you're correct. It's the letter p. This tag will insert a line break. You need an opening and closing tag for this one which you put around the words in your new paragraph.

I've changed my header tag back to the bold tag because I want my comments to start on the same line as the link text, in ordinary font. The header tag will tell my browser that it should have it's own line. Because it's a heading. Code is very pedantic.

<a href="http://janiceo.com.au/portfolio/digital-art/abstract/ui/DXONSXAAH5-ARV-IWUTMN" target="_blank" ><b>Endless</b></a> An abstract rendition of my studio on a late night marathon job.
<p>I just needed a little break...Okay that last glass of red was probably one too many.</p>

It's all pretty cool, this html stuff. But, you have to have all the bits where they are needed, or none of it will work. The equal sign needs to be there as does the " " either side of the values. The bold tag needs the closing bold tag or your font will not be bolded. Always test your links once you've published them to your site, to make sure they work. If they don't, you will have left something off. Just go through the code until you find the boo boo.

You don't have to start new lines when writing code but it is so much neater and easier to check your code if you do. Remember, though, if you want a new line to show on your live site, you have to use those paragraph tags.

A quick recap on the tags we've used:

Links: Same Window: <a href="yourlinkaddressl">Your Link Text</a>

Links: New Window: <a href="yourlinkaddressl" target= "_blank">Your Link Text</a>

Bold text: <b>Your text here.</b>

Header: <h1>Your Title</h1> or <h2>Your Title</h2>

Paragraph: <p>Your sentences.</p>

You can nest tags inside tags to affect specific parts of your line of code. Remember that for almost all opening tags you need a closing tag. If you forget a closing tag than the attributes of that tag won't work on your live site.

Remember you need to use a text editor like Windows Notepad to write your code on your computer. Happy practicing. By the way you do know I bolded all those code lines just for clarity in the story. Teehee.

Oh, here is my links page. Have a look at the Website stuff. W3Schools.com is a great resource to learn a little coding.