Website Links Basics
Links are the lifeblood of website pages. The ability to link from one page to another enables the World Wide Web to work:
Here is an example of a web page link: web designer.
What Are Web Links?
Links, or hyperlinks as they are known, are references to other pages, sign posts if you like to let the reader know there is more information available related to what is currently being read.
Links can either be text or images. Text links like the one above are usually created in a different colour and are often underlined too in order for web users to identify them as a link more easily. They often change colour when you move your mouse over them or after they have been pressed to identify protocol or produce a bubble with more information about what the link is.
By use of simple html code it’s easy to control what links look like and the format they take. It’s also simple by the use of CSS – Cascading Style Sheets – as already referred to in our previous blog post: tables tags and CSS, to create lots of interesting formats with links.
HTML provides three main ways of following hyperlinks:
Pointer – The normal method, mouse, trackball or similar to press your pointer over the link and load the new page.
Access Keys – Using a dedicated character to load the new document.
Tabs – Tab keys allow you to navigate across links on a page and then hit ‘Enter’ once you have selected your link.
For most people though you simple point and select your link with your mouse.
How Do Links Work?
Links are among the easiest html tags to create and use. Text or an image in a document can become a hyperlink anchor when contained in <a> </a> tags that specify a destination, designed to an attribute of <a> tag called href.
In the browser the hyperlink is displayed in a way to distinguish it from standard text, as above.
So the link above is detailed simply in your html code as:
<a href=”http://www.web-tag.co.uk/”>web designer<a/>
It’s easy to change the destination page or its label to give more detailed information:
<a href=”http://www.web-tag.co.uk/”>Web Designer In Slough<a/>
There are lots of fun things that you can do with links on your website to add value for your site and create a better user experience for the site visitor.
You can link out from your site to other interesting websites that you wish to share with your visitors; or identify key areas of your own website which you want to emphasise.
Fragment and Element Links
Other uses of links in websites include fragment anchors where you can link back to another hyperlink destination. This is commonly used to return to the top of the same page in a long page of content.
It is possible with html to use the id attribute to specify the destination too.
This name is sometimes call a fragment identifier and can be used to navigate around one page. Useful when you have a large page of content, perhaps under some different heading at the top of the page.
- What Are Web Links?
- Following Hyperlinks
- How Do Links Work
- Fragment and Element Links
All of which can easily link to the required paragraphs if required.
It becomes quite easy to link to these different sections using a hyperlink which links from one document and then links to another at the location of a fragment identifier, identified by the line location.
This is just an example as to how this kind of link could be developed:
<a href=”How Do Links Work?.html#line20”>How Do Links Work?<a/>
Which would take you to the location on the page of that section.
Developing an interest in linking structures for pages and developing some of the extra tricks that can be employed by web designers is one of the first areas that budding web designers can get the bug for web design; and launch themselves into a more detailed interest in web design.
We will return to web links and hyperlink basics in a later post; but for the time being, tara for now.
Best regards: the Web Tag team.