HTML5 Body Elements #6 Links
This is the anchor tag: <a>
Retrospectively speaking, the <a> tag may be the most significant of all HTML elements. Why so remarkable? Because that little lower case a created the hyperlink, and established the inherent distinctive value of the web. Why else would Fonzie make it his catchphrase?
In the nineties, when you had the prefix “hyper” tacked on to something, chances were that no matter what it was, it was bound to be pretty darn cool. Color-changing t-shirt? Hyper! Small-city-sized-discount-store? Hyper! Noncompliant medicated pre-teens? Hyper!
Unfortunately, most of these didn’t make an effective transition into the 21st century. But the link, having wisely dropped the “hyper” forsaking its Day-Glo tinged past, remained an integral part of the World Wide Web, and established the framework for how people interacted and moved about web pages. Today, this is mostly taken for granted, but at the time of conception, it was a truly groundbreaking idea. Without it, the Internet would have likely looked like one giant disengaged BBS system, and you and Charlie wouldn’t surf.
But the term anchor sure seems a little counterintuitive, no?
My you’re attentive! In the early days of the web, a page was more likely to be in the form of an ancient parchment scroll than a modern magazine or newspaper. Content was often just tacked on the to the original HTML page, resulting in a rather long and unwieldy document. New information was likely to appear at the bottom of a web page rather than the top, and the <a> tags were an attempt to re-direct the user to a certain point in the page, rather than a different page entirely. You’d click on a link, and it would (Hyper!) transport you to a different area of the document. The anchor was a predefined point in your document where you could be transported. And that (somewhat misguided) legacy remains to this day.
The <a> element today is rarely used in such as fashion, although it’s still fully capable of such utility, if you’re so (masochistically) inclined. Here, we’ll be focusing on its more acceptable usage as a link to another page, or more specifically, another local page within a web site.
Traditionally, the <a> tag was limited to what was called an inline element, but with HTML5, you’re allowed to wrap a link around an entire block on content, if you wish. Whatever content is placed within the tags becomes actively linked to the address specified within the href attribute.
A relative path references the link relative to the location of the page you are currently on, and the directory that you are in. If all of the pages for your website are in the same folder, you can reference the location by just using the name of the html file.
As long as the page you are linking from and the page you are linking to are in the same directory, a relative path will be sufficient to create a proper link. You may also treat other folders as relative to your linking page’s location. For instance, let’s assume that all of the files for The Web Made Easy are located in a folder named “WWW”. Our index.html page, or the page that is loaded when a user types in www.thewebmadeeasy.com is located within that directory, and all other pages are placed in category folders, such as “web design” or “programming”. We can therefore treat the “WWW” folder as a root location, and refer to other pages relative to that location.
It’s out of the scope of this tutorial to go more in-depth about absolute vs. relative paths (and frankly, it’s a very dry discussion), so if you’re still unsure, I recommend finding one of the numerous explanations out there written by people far more patient than myself. Now that’s we’ve got that (kind of) cleared up, let’s create an HTML page with the following sample content:
Then, make the following modifications to the content within our <nav> element:
If you save your page, and open in your web browser, you’ll now see that you <nav> element now has active links:
This will open the page within a new browser window, or within a new tab, with most modern browsers.
This will open the page within the same document as where it was clicked. This value is set by default, and is suitable for website navigation links, as used above.
And there you have it. The little <tag> that could.
Retrospectively speaking, the <a> tag may be the most significant of all HTML elements. Why so remarkable? Because that little lower case a created the hyperlink, and established the inherent distinctive value of the web. Why else would Fonzie make it his catchphrase?
In the nineties, when you had the prefix “hyper” tacked on to something, chances were that no matter what it was, it was bound to be pretty darn cool. Color-changing t-shirt? Hyper! Small-city-sized-discount-store? Hyper! Noncompliant medicated pre-teens? Hyper!
Unfortunately, most of these didn’t make an effective transition into the 21st century. But the link, having wisely dropped the “hyper” forsaking its Day-Glo tinged past, remained an integral part of the World Wide Web, and established the framework for how people interacted and moved about web pages. Today, this is mostly taken for granted, but at the time of conception, it was a truly groundbreaking idea. Without it, the Internet would have likely looked like one giant disengaged BBS system, and you and Charlie wouldn’t surf.
But the term anchor sure seems a little counterintuitive, no?
My you’re attentive! In the early days of the web, a page was more likely to be in the form of an ancient parchment scroll than a modern magazine or newspaper. Content was often just tacked on the to the original HTML page, resulting in a rather long and unwieldy document. New information was likely to appear at the bottom of a web page rather than the top, and the <a> tags were an attempt to re-direct the user to a certain point in the page, rather than a different page entirely. You’d click on a link, and it would (Hyper!) transport you to a different area of the document. The anchor was a predefined point in your document where you could be transported. And that (somewhat misguided) legacy remains to this day.
The <a> element today is rarely used in such as fashion, although it’s still fully capable of such utility, if you’re so (masochistically) inclined. Here, we’ll be focusing on its more acceptable usage as a link to another page, or more specifically, another local page within a web site.
If you’re ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.
<a> Formatting Syntax
Code Block
Index.html
Anchor sample.<a href=”page location”>
linked content
</a>
<a> Attribute Examples
While a number of attributes originally existed alongside the anchor tag, the vast majority of these have been deprecated in HTML5 (or before), and the element has effectively been limited to just creating links, which is really want it did best in the first place. We’ll be taking a look at two attributes: The href, which specifies the page that should be linked too; and the target, which specifies the manner in which the new page should be opened.#href
The href stipulates where the active link should re-direct to once clicked. This may be stated as an absolute path or a relative path. Looks like we’re going to need a quick primer… An absolute path includes all related location information, and assumes nothing. Every time you manually enter an address into your web browser, you are referencing the page as an absolute.A relative path references the link relative to the location of the page you are currently on, and the directory that you are in. If all of the pages for your website are in the same folder, you can reference the location by just using the name of the html file.
As long as the page you are linking from and the page you are linking to are in the same directory, a relative path will be sufficient to create a proper link. You may also treat other folders as relative to your linking page’s location. For instance, let’s assume that all of the files for The Web Made Easy are located in a folder named “WWW”. Our index.html page, or the page that is loaded when a user types in www.thewebmadeeasy.com is located within that directory, and all other pages are placed in category folders, such as “web design” or “programming”. We can therefore treat the “WWW” folder as a root location, and refer to other pages relative to that location.
It’s out of the scope of this tutorial to go more in-depth about absolute vs. relative paths (and frankly, it’s a very dry discussion), so if you’re still unsure, I recommend finding one of the numerous explanations out there written by people far more patient than myself. Now that’s we’ve got that (kind of) cleared up, let’s create an HTML page with the following sample content:
Code Block
Index.html
Sample HTML.<style text="text/css">
#title {
background-color:#333;
color:#CCC;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
text-align:center;
position:static;
width:450px;
height:165px;
}
#story {
background-color:#FFF;
color:#000;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
position:static;
width:450px;
height:530px;
}
#copyright {
background-color:#333;
color:#CCC;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:9px;
text-align:center;
width:450px;
heigh:30px;
}
#trivia {
background-color:#09F;
color:#CCC;
font-family:"Arial Black", Gadget, sans-serif;
position:fixed;
top:30px;
left:470px;
width:180px;
height:230px;
border-radius:15px;
padding:7px;
}
#menu {
background-color:#6C0;
color:#333;
font-family:"Arial Black", Gadget, sans-serif;
position:fixed;
top:300px;
left:470px;
width:180px;
height:220px;
border-radius:15px;
padding:7px;
text-align:center;
}
</style>
<title>H.G. Wells' "The Time Machine"</title>
</head>
<body>
<header id="title">
<hgroup>
<h1>The Time Machine</h1>
<h2>By H.G. Wells</h2>
<h3>Chapter One</h3>
</hgroup>
</header>
<section id="story">
<p>
The Time Traveller (for so it will be convenient to speak of him)
was expounding a recondite matter to us. His grey eyes shone and
twinkled, and his usually pale face was flushed and animated. The
fire burned brightly, and the soft radiance of the incandescent
lights in the lilies of silver caught the bubbles that flashed and
passed in our glasses. Our chairs, being his patents, embraced and
caressed us rather than submitted to be sat upon, and there was that
luxurious after-dinner atmosphere when thought roams gracefully
free of the trammels of precision. And he put it to us in this
way--marking the points with a lean forefinger--as we sat and lazily
admired his earnestness over this new paradox (as we thought it)
and his fecundity.
<p>
'You must follow me carefully. I shall have to controvert one or two
ideas that are almost universally accepted. The geometry, for
instance, they taught you at school is founded on a misconception.'
<p>
'Is not that rather a large thing to expect us to begin upon?' said
Filby, an argumentative person with red hair.
<p>
'I do not mean to ask you to accept anything without reasonable
ground for it. You will soon admit as much as I need from you. You
know of course that a mathematical line, a line of thickness _nil_,
has no real existence. They taught you that? Neither has a
mathematical plane. These things are mere abstractions.'
<p>
'That is all right,' said the Psychologist.
</section>
<footer id=copyright>
Copyright 1895 William Heinermann Publishing
</footer>
<aside id=trivia>
GOOD TO KNOW:<br>
Three films based on the "The Time Machine" have been made; the
latest in 2002 being directed by H.G. Well's great-grandson, Simon
Wells.
</aside>
<nav id=menu>
<p>
PREVIOUS PAGE
<p>
NEXT PAGE
<p>
Chapter One<br>
Chapter Two<br>
Chapter Three<br>
Chapter Four<br>
Chapter Five<br>
<p>
</nav>
Code Block
Index.html
Menu nav.<nav id=menu>
<p>
<a href="introduction.html"> PREVIOUS PAGE </a>
<p>
<a href="page2.html"> NEXT PAGE </a>
<p>
<a href="page4.html"> Chapter One </a>
<br>
<a href="page7.html"> Chapter Two </a>
<br>
<a href="page11.html">Chapter Three </a>
<br>
<a href="page14.html">Chapter Four </a>
<br>
<a href="page18.html">Chapter Five</a>
<p>
</nav>
If you save your page, and open in your web browser, you’ll now see that you <nav> element now has active links:
Now, those links aren’t exactly going to do anything, explicitly because we have yet to great any additional pages for them to direct to, but you have created a rudimentary navigation area, which was our intent all along.
#target
The other relevant attribute for the <a> tag is the target, which determines how a new link will be displayed. There are four manners in which a target URL will be opened, but only two are still used on a regular basis:#target=”_blank”
Code Block
Index.html
Target blank.<a href=”pagename.html” target=”_blank”> </a>
#target=”_self”
Code Block
Index.html
Target self.<a href=”pagename.html” target=”_self”> </a>
And there you have it. The little <tag> that could.
Yes, it is possible to find a good web host. Sometimes it takes a while to find one you are comfortable with. After trying several, we went with Server Intellect and have been very happy thus far. They are by far the most professional, customer service friendly and technically knowledgeable host we’ve found so far.
HTML5 Body Elements [6] Links.zip| Print article | This entry was posted by The Web Made Easy on March 30, 2011 at 7:29 pm, and is filed under HTML, Web Sites. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
