Linking to other pages

It's great, it's easy, it's fun, let's do it.

For buttons within navigation menus it's also important to know that you can enclose a div within a link as of HTML5 to make the entire div a clickable button. What do we mean by this?

For instance, move your mouse over the fake buttons (without addresses) below. Pay attention to the mouse cursor as you do this. For one button the mouse cursor will change over the entire button (indicating a clickable link) while for the other it will change over only the text of the button.

The actual HTML code for those two buttons is as follows. Notice how the html for button left puts the anchor elements around the button element while the html for the right button puts it around the element text alone.



<a href="">
    <div class="button_left"> 
    	Homepage 
    </div>
</a>

<div class="button_right"> 
    <a href="">
    	Gallery 
    </a>
</div>

Targets

Optionally, you can add the attribute “target=“ to signal how a browser should open a link. target=“_blank” typically opens the link in a new tab. The default is “_self” which simply follows the link within the same tab.

Attributes for links are implemented just like any other element.


<a target=“_blank”> link text </a>

The "title" attribute

The title attribute has two primary uses.

  1. It will be shown as the tool tip of a link (the pop up window you see when hovering over the link) which can help clarify or offer more information before the user clicks the link.
  2. It also helps greatly with electronic readers or vocalizers for the disabled. Letting them know what within the link without visual cues.

Otherwise it has little use.


<a href='http://www.cnn.com/' 
	title='A daily news site that I use
    	because it has a short address.'> 
</a>

As an actual link, that particular code appears like this...

link text

Hover over the above to see the effect of it.

Targeting elements

Links are not restricted to taking you to just pages, but can also take you to a particular point within that page. This is helpful when linking to long pages so that you aren't forcing the user to scroll through an entire page just to find the information you want to point at.

It's a simpoly matter of utilizing the "id" attributes of an element. For instance, if I want to send people to a div with an id of "exploreTray" on the BBC website, it would be written like so…


<a href="http://www.bbc.com/#exploreTray"> 
	link text 
</a>

You can even just target an element on the page the user is currently viewing by simply using using an element id by itself.


<a href="#making_links"> link text </a>

The header of this section has been given an id with a value of "making_links". So now you can click the link below to see the effects of the above line.

Go here

Note: At this time you can't point at class names as you can id names. Also, depending on the architecture of the site, targeting id names might not always work every single time.

Styling links

It's possible to change the colors associated with links withiny our browser. Linked text, text links that have already been clicked, and even links that the user simply has their mouse *over* can all have their color changed.

It makes use of CSS code however and so will come at a later time, specifically in the section "CSS, Text Adjustments".

Embedded objects

The phrse "Embedded objects" can refer to a few different things. Most popularly it involves the inclusion of an external plug-in or program that displays as an element within a web page.

The "<link>" tag.

Remember! If you ever see a "" tag, this is not the same thing as an href, semantically speaking it's a tag that denotes a link to an external resource. 99% of the time this is a link to a style sheet for the page. For instance;

All 3 of these attributes are required ("stylesheet" describes the linked object and is required for external css files).