Who is ArcoJedi? A life-journeying Christian, ecstatic husband, proud father of four, web guru, all-around geek and Star Wars fanatic. Read these thoughts that he felt were worthwhile. Then wonder why he thought that way.

2007/01/20

How to Make a Link (Emphasis on Blogger)

In creating blog posts with Blogger, there are standardly three text boxes. The first is for your post Title, which needs no real explanation. The second is an optional field for a Link. The idea here is to put a URL, such as "http://www.google.com/". Usually this is a page or site that sparked your blog post idea in the first place. The large box below this is for your post content. You can simply type your content into this box, or if you are inclined, you can add HTML code for images and links and so forth.

In a comment on a previous post, I was asked how to create links in the middle of your posts, rather than just for the title. For anyone who hasn't noticed yet, I do this a lot.

The following is a good draft of what I would write as a simple explanation of how to create links in HTML code. This may get updated later. I will also go through the steps to add links using the built-in Blogger tools.


Introduction

One of the very first and most important pieces of HTML code that a novice web developer will learn would have to be the <a /> tag. This is also known as the 'link' tag, although there is a <link /> tag used most commonly for linking style sheets or other secondary documents to the main document. These should not be confused.

However, as common as this tag is, it is not unusual to see instances where the web developer does not make proper use of the many available options. There are many advantages to improving the implementation from Accessibility to SEO.

How to Properly Create a Link

Links are created using the <a /> tag. The most common way that you see the code for the <a /> is as follows:
Please visit <a href="http://arconati.us/">Arconati Family Home Page</a> as soon as possible.

Admittedly, this has all of the important functional parts. You have the 'href' attribute between the quotes - the target of the link - and then the content of the <a /> tag, which is what the browser displays. Here is what it would look like.

Please visit Arconati Family Home Page as soon as possible.

Most incomplete references will tell you that this is the minimum. In truth, you can actually strip it down even more - Please visit <a>Arconati Family Home Page</a> as soon as possible.

This is minimal indeed. If you try and load this in a browser, it should actually behave stylistically as if it were a link, though if you click on it, it doesn't do anything.

Please visit Arconati Family Home Page as soon as possible.

Note: You may have noticed that although this link does not have an 'href=' attribute, it does get rendered in some browsers as if it were a link. For instance, it might be underlined or a different color. Interestingly enough, the :hover cursor behavior is activated in FireFox, but not in Internet Explorer.

There are a lot of other attributes you can optionally use besides just 'href='. There is a 'title=' attribute that can be useful and should be used in all cases where activiely promoting the link. Here is an example:
Please visit <a href="http://arconati.us/" title="Arconati Family Home Page>Arconati.us</a> as soon as possible.
The advantage to this one is that you can be more descriptive in the title. Since search engines base the importance of a site on how many people link to it and what keywords the links use in addition to the page itself, this can be very helpful for sites that want to get found in the search engines. The above example would look like this:

Please visit Arconati.us as soon as possible.

If you hover over the link for a moment, your browser will most likely show a yellow box or tooltip type feature that shows you the 'title=' information. This content may be rarely noticed by the average capable user, but it is very helpful for users with vision or other impairments as well as search engines.

Creating a link in your blog posts in Blogger is very simple. First either open a previous post or create a new post. Then make sure you are in the "Edit HTML" tab. In the menu bar above your post box, you will see a small icon like the following - Blogger Link Button - Select the text you want to be the content of the link and then click this icon. A box should appear with a prompt to enter the URL of the link you want. Be sure to include the full link from - http://www.example.com/page.html - and click OK. You have just created a link. You can manually add a title if you would like and then publish your post.

Links are the whole point of the web and they are important, so be sure to link as often as possible.

1 comment:

Dave Snail said...

Thanks for the html tip. I think it went well! I'll stop bothering you now!!!

Labels

family (33) web development (29) Star Wars (28) technology (24) blogs (22) blogger (21) movies (21) Internet (20) funny (20) google (18) del.icio.us (16) music (16) video (15) baby (14) random (14) rant (13) reviews (13) friends (12) life story (12) Lucas (11) news (11) MonsterCommerce (10) Reese (9) books (9) Samuel (8) domains (8) politics (8) google/pagerank (7) local (7) television (7) Charter (6) Facebook (6) MO ECHO (6) birthday (6) church (6) coworkers (6) zyilimusic (6) #MOECHOLINEUP (5) Sudden Infant Death Syndrome (5) christian (5) comics (5) employment (5) photos (5) Internet\AOL (4) Lisa (4) Olivia (4) election (4) job (4) marketing (4) microsoft (4) music/artists (4) quotes (4) television\American Idol (4) trombone (4) Barack Obama (3) Holidays/Christmas (3) Network Solutions (3) history (3) karaoke (3) movies\Harry Potter (3) tattoo (3) xkcd (3) Happy Is The Bride (2) Holidays/New-Year (2) Integrity (2) International Date Format (2) Internet\AT+T (2) SoTel Systems (2) archive (2) customer service (2) google/maps (2) google/music (2) google/play (2) instant messenger (2) movies\300 (2) poetry (2) polls (2) projects (2) quiz (2) video games (2) weather (2) 1982 (1) 1986 (1) 2012 (1) 2013 (1) 2014 (1) Angelcare monitor (1) Boy Scouts (1) Career Day (1) Dirty Soap (1) Earthquake (1) Free Champagne (1) Holidays/Halloween (1) Jon (1) Mad Men (1) Mom (1) NASA (1) Netflix (1) New Orleans Brass Band (1) Quincy Illinois (1) Rod and the Satalites (1) SEO (1) Salesforce Marketing Cloud (1) Sleep Apnea monitor (1) Star Trek (1) TED (1) autobiography (1) billionaires (1) blues (1) css (1) d+d (1) design (1) dining (1) divorce (1) eat the rich (1) economics (1) entertainment (1) environment (1) evolution (1) flickr (1) google/plus (1) hoax (1) html (1) identity theft (1) imgur (1) immigration (1) library (1) linkedin (1) ministry (1) money (1) movies\Batman (1) npr (1) pinterest (1) preface (1) proud (1) rain (1) reddit (1) reggae (1) rob thomas (1) science (1) ska (1) snow (1) social media (1) spring (1) tax the rich (1) television\Mad Men (1) telvision (1) tornado (1) trillian (1) tumblr (1) twitter (1) wishlist (1) woot (1) yahoo (1) youtube (1)

Some Other Things to See

© 2003-2021 James A. Arconati

You've reached the end of this page.

[ This page is powered by Blogger. Isn't yours? ]