In an effort to foster my father’s growing interest in web publishing, I’ve written a rather verbose explanation on how to get a hyperlink to open in a new window. It includes a rudimentary explanation of the HTML tag and its attributes.
Web site texts often have links to other material, signified by the key word being underlined. Click on it, and see the referred to material.
That seems to work two ways: (1) your computer leaves the page it’s been on, and instead of that page, the clicked-on link page shows up, so you’ve apparently left where you were; and (2) the clicked-on material is superimposed over the page that referred to it, so you’ve not left the site you were on, and when you close the super’d material, you’re back where you started.
I prefer #2. How do I set up links that behave that way, and not the #1 way?
— Dad
What you’re talking about is a hyperlink. You can specify the “target” for the hyperlink. By default, this is the same window that contains the page with the hyperlink. If you’d like this to be another window, you must specify that. To do this, you need to add a little something to the HTML tag that defines the hyperlink.
Before you get overwhelmed by this, remember that HTML is not a programming language. It was designed to be used by people like you, who didn’t have a lot of familiarity with computer science, but who could use a word processor.
An HTML tag is basically a way of editing text. HTML stands for HyperText Markup Language. The word markup is simply a reference to the traditional editorial process in publishing, where modifications are made to copy – the text gets “marked up.”
Adhering to the elegant nature of computer mathematics, the text that is to be marked up is defined at its beginning and at its end, just like you were going to use a highlighter on a passage in a text book.
To define the boundaries of the text that is to be marked up, we use what are called “HTML tags,” which come in pairs. HTML tags have a starting part and an ending part. The starting part is where all the fun stuff is. The ending part is always very simple looking.
A simple example of this is the bold HTML tag. It looks like this:
To make a word appear in bold you need to include the <b>start and end</b> of the tags.
That will make the copy look like this:
To make a word appear in bold you need to include the start and end of the tag.
The starting HTML bold tag is the letter b enclosed by the less than and greater than signs. This tells Safari to start making all the letters bold until further notice.
A hyperlink is defined using something called an “anchor” tag. It looks like this:
HTML
Put the <A href=”#”>hyperlinked text</A> between the two anchor tags.
BROWSER
Put the hyperlinked text between the two anchor tags.
You probably noticed that this is different from the bold tag. There is something else inside the start tag. This is called an attribute. HTML tags can do simple little things like define text style (e.g. bold, italics, color, size), but can also give them more complex attributes and behaviors.
A hyperlink won’t do much good unless we tell the tag where we want it to go. We do this by using one of the anchor tag’s attributes. This attribute is called the “href,” or hyperlink reference. Think of it as directional signage for a freeway onramp, “This is the 405 North. If you get on here you will go to Sacramento.”
I’m guessing you figured out what the equals sign means. This is how you describe the value of the href attribute for the anchor tag. You need to tell it what the value is by enclosing it in quotes, specifically, double-quotes. Like all paired punctuation, this tells the attribute where its value starts and where it ends.
So what does the number sign mean?
The number sign is the simplest of all values you can put inside the double quote. All it does is point back at itself saying link right back here to me. By itself, it’s not really good for much other than explaining how an anchor tag works.
If you want a link to go to Google or Yahoo!, put the full address for that website inside the double quotes for the href attribute. That means the full “URL” which includes the http:// as well as the http://www.domainname.com.
HTML
<A href=”http://www.yahoo.com”>This is a link that will go to Yahoo!</A>.
BROWSER
This is a link that will go to Yahoo!.
So, how does one make a hyperlink that opens in a new browser window?
To make a hyperlink that opens in a new browser window (tabs are windows as far as HTML is concerned) you need to add an optional attribute to the anchor tag, the “target” attribute.
The target attribute is your way of saying to the browser, “Okay, you know where this link goes, but I want you to open the hyperlink in a special place. That special place is the target called ______.”
Once you specify the target, the browser is going to look to open your hyperlink in that target location. Without getting too deep into something called the DOM (Document Object Model), the browser will try to identify the window that you named. If it can’t find a window with that name, it is going to assume you want to open a new window. And it is going to take the name you specified and assign it to the new window.
That last part is not really practical until you start using Javascript, but it’s kind of important to round out the explanation.
So what does this all look like?
HTML
A hyperlinik for <a href=”http://www.google.com” target=”theNameOfTheTarget”>Google</a> that will open in a new window.
BROWSER
A hyperlinik for Google that will open in a new window.
A more concise explanation can be found here:
QuantumTom 