It's time to press on with my foray through the W3Schools HTML tutorial. This post concerns the
W3School's tutorial on links pertaining to links to or within HTML pages. Part Two will discuss linking to images and other file types, and part Three will cover using images as links.
Background
HTML stands for "Hypertext Markup Language." "Hypertext" refers to the linking system (a.k.a. hyperlinks) used across the internet to facilitate the uncountabillion connections that make up the World Wide Web. For some history on the Web see the article info.cern.ch: The Origin of the World Wide Web. To see the website of the very first web server ever, click here (hey, that's not Al Gore's picture!?).
Links to External Sites
The basic HTML element for Hyperlinks (a.k.a. Links) is the Anchor element - <a>. The Anchor element is an inline element that can be used inside any block level element - paragraph, list, table, block quote, etc. It tells the browser to retrieve a page from another website or a page within the current site, or jump to another place on the current page.
To complete the link, you need an attribute in the Anchor element that gives the browser the location of the linked item. This is the “HREF” attribute, which stands for Hypertext REFerence. The HREF attribute contains two components: the Uniform Resource Locator (URL) address, which is the address of the linked item on the web; and the text you click to activate the link, called the "Anchor Text." Only the Anchor Text appears on your web page, usually underlined and/or a different color than the surrounding text. The URL address stays hidden along with the anchor tag.
Unless you specify otherwise, your browser determines how links will be rendered. When we get to Cascading Style Sheets (a.k.a. CSS) we'll learn all kinds of ways to format the look of your links.
So a typical link looks like this: HREF Definition ; but if you could see the entire element, it would look like this:
<a href=“http://www.pcmag.com/encyclopedia_term/0,2542,t=HREF&i=44472,00.asp”> HREF Definition</a>.
Same Site Links
If the item to which you're linking is part of your own website, you can (and often should) abbreviate the HREF URL address to just the name of the file located on your site (and sub-folder name if you‘re using sub-folders, more on this later). This is called a relative or implicit link, because it is implied that the file is located in the same main folder as the web page with the link, so you don't need the "http:// blah blah blah" stuff. Your link would look like:
<a href="index.html">My Home Page</a>Relative links are useful because as long as you keep your site (which is really just a series of files) organized within one main folder, you can change the name or location of your main folder without having to go back through and update all your links. (More on this later when we get to organizing numerous pages within a site).
Same Page Links
A link can also take you to another part of the same page. You create this type of link by using the “Name“ or “Id” (a.k.a. Identifier) attributes. Since the Id attribute is used in conjunction with CSS, I’ll save that one for later.
Jumping from place to place using the <a> element with a Name attribute is fairly simple. Say I’m writing a lengthy post so that when you get to the end of it , my header and menu sections at the top of my page are no longer visible in the browser window. I can create an Anchor element to jump the reader back to the top of the page, like this:
First, at the top of the page I have to name the spot I want my link to jump to, let’s say “top”. I insert the following just under the <body> element of my page, which would be the top: <a name="top”></a>. (Note, in Blogger I have to do things a little different and put it in the "Description" section of my blog template).And that’s it! Click "Back to Top" below and see if it works!
Then, at the bottom of my page I insert:
<a href="#top">Back to Top</a>.
Interesting Links
While researching the HTML component of Hyperlinking for this post, I ran across some interesting discussions of the law of linking and useability issues:
http://www.jura.uni-tuebingen.de/bechtold/lcp.html
http://www.bitlaw.com/internet/linking.html
http://www.useit.com/alertbox/within_page_links.html
Next Up
Part Two - Linking to Images and Other File Types
Back to Top
