HTML and XHTML - Lesson 4
Back to Lesson 1, Lesson 2, Lesson 3
By now, you now already know how to make headers and paragraphs and text of all kind, but you're trying to make a web page, and web pages have links. So without anymore delay, I will teach you how to create links.
Links are created using a set of anchor tags <a> and </a>. As well, a href (hyper-text reference) variable is used to tell the link where to go.
It is written in this format:
Code:
<a href="http://www.yahoo.com/"> A Link to Yahoo's Site </a>
Displays as:
A Link to Yahoo's Site
The text between the <a> and </a> tags, A Link to Yahoo is what will display on your Web page when you view it in a Web browser. The href variable is the Web address that the link goes to when it is clicked on.
Make sure to include the equal sign = and then the set of quotations " " around the address. If you are linking to another Web site, do not forget the http:// at the beginning of the Web address, as forgetting this part is another common mistake.
If you are linking to another page you made, such as a page called index2.html, your code would look like this:
Code:
<a href="index2.html"> A Link to another page within the same site </a>
Displays as:
A Link to another page within the same site
If you are linking to a page inside a folder listed in the same directory as index.html, use this code:
Code:
<a href="myfolder/index2.html"> A Link to another page in a folder within the same site </a>
Displays as:
A Link to another page in a folder within the same site
You will want to use lowercase names for your folders and files. Also, avoid using spaces when naming files or folders.
There is an optional variable for anchor tags that you may be interested in. It is the title tag, and it is used to display the title you name for the anchor when you hover over it in most browsers.
Here's an example:
Code:
<a href="http://www.yahoo.com/" title="A Search Page"> A Link to Yahoo's Site </a>
Displays as:
A Link to Yahoo's Site
Many people are interested in using links for framesets. What they usually ask is, "How do I make a link open in a new Window?"
The variable, target="_blank" opens the link in a new window.
Code:
<a target="_blank" href="http://www.yahoo.com/"> Yahoo's Site </a>
Displays as:
Yahoo's Site
There are other variables, but these will be included in a Frames lesson.