HTML Code for Adding Links

HTML Code for Adding a Link:

<a href=”http://nameofwebsite.com”>This is what will be clickable</a>

Name of website

You will need the exact name of the website and the http:// that goes along with it.  It is usually best to open the website in another window or tab and just copy and paste the link.

Mind those Quotation Marks!

Like with most of the HTML code we will work with, the name of the website must be in quotation marks <a href=”http://nameofwebsite.com”></a>.

Opening the Website Link in a New Window

Your link will automatically open in the same window unless you insert target=”_blank” into the code.  It should look like this:

<a href=”http://nameofwebsite.com” target=”_blank”>This is what will be clickable</a>

It is best to have links to external websites (not your own) open in new windows so people are not directed away from your website when they click on a link.  However, when linking to other pages on your website, you should have those links open in the same window.

Opening Links in the Same Window

By default, links will open in the same window if you do not insert target=”_blank”.  However, you might also run across target=”_self” or target=”_parent”.  Both pieces of code will have the link open in the same window.

What Will be “Clickable”

You must insert the link code around the content you want to be linked, which is usually text but can also be an image, for example.

<a href=”http://nameofwebsite.com”>This is clickable</a>

The </a> closes the link.

For example, below, Click here is “clickable” and what is linked and to view the website is not.

<a href=”http://nameofwebsite.com”>Click here</a> to view the website.

Here it is in action- Click here to view the website.

Making a Picture a Link

<a href=”http://nameofwebsite.com”><img src=”picture.jpg” border=”0″ /></a>

Note how the code is nested.  The link code was opened first, so it is closed last.

Here it is in action- I’m linking the Medford High School Mustang to the Medford High School webpage:

mustanglogo

Advertisement

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.