HTML - Links and Anchors
The web got its spidery name from the plentiful connections between web sites. These connections are made using anchor tags to create links. Text, Images, and Forms may be used to create these links.HTML - Hypertext Reference (href)
The href attribute defines reference that the link refers to. Basically this is where the user will be taken if they wish to click this link.Hypertext references can be Internal, Local, or Global.
- Internal - Links to anchors on the current page
- Local - Links to other pages within your domain
- Global - Links to other domains outside of your site
HTML Code:
Internal - href="#anchorname" Local - href="../pics/picturefile.jpg" Global - href="http://www.tizag.com/"
HTML - Text Links
Use the <a></a> tags to define the start and ending of an anchor. Decide what type of href attribute you need and place this attribute into the opening tag. The text you place between the opening and closing tags will be shown as the link on a page. Use the demonstration below as a reference.HTML Code:
<a href="http://www.espn.com/" target="_blank" >ESPN Home
</a> <a href="http://www.yahoo.com/" target="_blank" >Yahoo Home</a>
Global Link:
HTML - Link Targets
The target attribute defines whether to open the page in a separate window, or to open the link in the current browser window.HTML Code:
| target=" | _blank" | Opens new page in a new browser window |
| _self" | Loads the new page in current window | |
| _parent" | Loads new page into a frame that is superior to where the link lies | |
| _top" | Loads new page into the current browser window, cancelling all frames |
HTML Code:
<a href="http://www.ESPN.com" target="_blank">ESPN.COM</a>
_blank Target:
HTML - Anchors
To link to sections of your existing page a name must be given to the anchor. In the example below, we've created a mini Table of Contents for this page. By placing blank anchors just after each heading, and naming them, we can then create reference links to those sections on this page as shown below.First, the headings of this page contain blank, named anchors. They look like this.
Tizag's Own Code:
<h2>HTML Links and Anchors<a name="top"></a></h2> <h2>HTML Text Links<a name="text"></a></h2> <h2>HTML Email<a name="email"></a></h2>
Anchor Code:
<a href="#top">Go to the Top</a> <a href="#text">Learn about Text Links</a> <a href="#email">Learn about Email Links</a>
HTML - Email Links
Creating an email link is simple. If you want somebody to mail you about your site a good way to do it is place an email link with a subject already in place for them.HTML Code:
<a href="mailto:email@tizag.com?subject=Feedback" >Email@tizag.com</a>
Email Links:
In some circumstances it may be necessary to fill in the body of the Email for the user as well.HTML Code:
<a href="mailto:email@tizag.com?subject=Feedback&body=Sweet site!"> Email@tizag.com</a>
Complete Email:
HTML - Download Links
Placing files available for download is done in exactly the same fashion as placing text links. Things become complicated if we want to place image links available for download. The best solution for images is to use a thumbnail link that we discuss in the next lesson.HTML Code:
<a href="http://www.espn.com/pics/htmlT/blanktext.zip">Text Document</a>
HTML - Default Links; Base
Use the <base> tag in the head element to set a default URL for all links on a page to go to. It's always a good idea to set a base tag just incase your links become bugged somewhere down the line. Usually set your base to your home page.HTML Code:
<head> <base href="http://www.espn.com/"> </head>
0 comments:
Post a Comment