Site Development
Downloads
Help!!
Home
The Basic LinkLinks are the clickable areas on a web page that take some action when clicked. Usually the link shows up as some colored text or an image. When it's clicked, the viewer might go to another page or begin a download. Links are made in the <body> of your page right along with regular text. Links are made with the <a> and </a> tags. The "a" refers to "anchors". All <a> opening tags must have an attribute called "HREF", or HyperText Reference. A link tag looks like this: <a href="http://www.google.com/">Click Here To Go To Google</a> The above link would take you to the popular Google search engine at http://www.google.com/ . Notice that the URL to Google is placed as the value of HREF. Also note that the URL is in quotes. You must put all URLs in quotes. Here's what the link would look like on my page: Click Here To Go To Google. That's pretty much all there is to making a basic link. The text between the <a> and </a> tags is what the viewer sees as colored, clickable text. In this case it's "Click Here To Go To Google". It's a good idea to check your your URL before making a link and always test your links. Dead links are a common annoyance on the Web. As previously stated, you can add links right along with your regular text: I like using <a href="http://www.google.com/">Google</a> This would show up as: I like using Google. Only the text between the <a> tags is colored and clickable. Linking To Internal PagesYou can use a shorthand method of linking to your own pages. If the page with the link and the page being linked to are in the same folder on your hard drive or server, you can just use the filenames in HREF. To practice this and the other exercises in the next couple of lessons, make an empty folder called "main" somewhere on your hard drive. Now make a simple, blank web page (HTML file) and call it "page1.html". Make another and call it "page2.html". Save both of these files in the "main" folder. Now lets make a link on "page1.html" that will load "page2.html". On page one make the link: <a href="page2.html"> Go To Page 2</a> Note: You may want to put some text or a header on "page2.html" so you'll recognize it when it loads. Open "page1.html" in a browser and look at your link. You'll see "Go To Page 2" on the page in the default color for links. This is generally blue and underlined. Click the link and watch "page2.html" automatically load. That's what links are all about and how most sites take you from one page to another. Now edit "page2.html" and make a link back to "page1.html": <a href="page1.html">Back To Page 1</a> You can spice these links up a little bit by using the special characters to make "arrows". <a href="page1.html"><<< Back To Page 1</a> The "<" is the special character for "<". Now the link looks like this: I've made the above link a "dead link" for this example. It doesn't go anywhere. I'll show you how to do this later. For now be more interested in the angle bracket being used as an "arrow". The ">" bracket is made with the special character code ">". Now you can move back and forth between the two pages. Practice this by making three pages and putting links to all of the other pages on each page. Remember to keep all of your pages (HTML files) in the same folder ("main"). When you get this working smoothly, move on to the next lesson. Keep your "main" folder and test pages handy for the upcoming exercises. |
To Next Beginning HTML Lesson
Back To Beginning HTML Index