Wednesday, September 3, 2008

Keeping everyone on the same page
...an easy HTML tutorial

Have you noticed this? When you are visiting someone's blog or website and you click on a link, sometimes the link opens in a new window (or tab) and sometimes you leave the blog completely and jump over to the new link.

Staying or jumping has to do with how the html is written on the blog post or website.

Sometimes this is a good thing, jumping from blog to blog, and other times it's annoying because what you were initially reading was very interesting and now you have to hit the back button to figure out where you were before the link sent you shooting off to someone else's blog.

As for me, I like to keep my readers here, partly for their convenience, and (from a business standpoint,) partly so my brand is not forgotten too quickly. Would you like to do the same?

Without any foreign language instruction, here's how.
Denise, I'm going to use your blog URL as the example. I hope that's ok. Thanks!

1. Start a new blog post in a new window or tab on your browser so you can keep your eye on this tutorial.

2. Type in the name of the site you want to experiment with, then attach a link to it. Here's the example:
Denise Clenney's Changing Designs

3. Now flip over to your Edit Html tab on your blog post. Take a look at the code for what you just did. It should look like this: <a href="http://changingdesigns.blogspot.com/">Denise Clenney's Changing Designs>

4. If you are extremely unfamiliar with html, I'll explain the different parts here, and please pardon my lack of technical language. I may be geeky but I am not a geek.

a href= This tells the browser that this is a link.

"http://changingdesigns.blogspot.com/" Tells the browser where to go.

< > These brackets tell the browser that this is where the code is, and not to make it look like text.

Denise Clenney's Changing Designs This is the text link you see on the page. Sometimes it's underlined, sometimes it's a different color.

Since the first bracket started with an "a" this "/a" tells the browser that's the end and closes the code.

5. If you publish the blog post and click on the link, you will jump directly to Denise's blog. So let's go back to edit the blog post and modify the link you just put in.

6. Go to the Edit Html tab again and enter some extra code to tell the browser to open a new window or browser tab when this link is clicked. Here's the code again:
<a href="http://changingdesigns.blogspot.com/">Denise Clenney's Changing Designs>

7. In the spot between the end quote
" and the end bracket > you'll need to enter the following code: target="_blank"
(There is a space before the word target.)

8. The link now looks like this:
<a href="http://changingdesigns.blogspot.com/" target="_blank">Denise Clenney's Changing Designs>

Now for those of you who are anal retentive about this kind of stuff, there's more.
(You can't see me, but I'm sitting at the computer sheepishly raising my hand.)

If you feel the need to go back into any older posts, (and try to restrain yourself PAM HAWK,)
you can do a quick fix on all those pesky links that could potentially take your readers away forever.

1. Open any blog post you can't resist the urge to fix and go to the
Edit Html tab.

2. If you are using a PC, hold down the Ctrl key and tap the F key to open a Find dialog box. (If you have a Mac, sorry - I don't know how you initiate a search.)

3. In the search box, enter
a href="
Yes, you can copy and paste from this blog post.

4. Now highlight and copy this code
target="_blank"
Remember, there is a space in front of the word target.

5. Search the entire bit of blog post html, and every time you find a link, paste in the code. Just position your cursor between the "> and hold down Ctrl and V to paste.

6. Click search click search click search your way through the blog post until it's flawless. Or until you realize you really need to stop and do something more productive, *ahem* Pam.

2 comments:

  1. Excellent info! I plan to come back later and try these out. I have been wanting to learn some HTML but have been to lazy, so this may help me jumpstart my knowledge.

    Thanks!

    ReplyDelete
  2. Hey glad to help!
    I'm lazy and impatient, so if I actually learn some new tip that makes things easier and faster, I'm all over it.
    ...and I'll definitely share it here!

    ReplyDelete

Thank you - I appreciate all comments, questions, praise, criticism, suggestions, requests, reports ...