Manuscript for HTML Tutorial #18

Listed below is the manuscript of all textual instructions used in HTML Tutorial #18 - Using Links to Transport Visitors to Another Website. Most of this text is displayed inside the yellow balloons used to guide viewers as they watch the lessons.

Students and instructors may find it helpful to have a hard copy of these balloon instructions. You may print this web page to use as an aide in following, referencing, or demonstrating the web design series.

Manuscript Table of Contents

Entire HTML Tutorial Series

Tutorial #18 - Using Links to Transport Visitors to Another Website

Lesson #18: Text Links. Click the play button to begin the tutorial.
Let’s see how to make a hyperlink that will take visitors to another site.
We’ll transform some existing text into a link, by placing it inside of an a (anchor) tag set.
Of course we’ll need to tell our link where to go to, so we’ll include an attribute in the opening <a> tag.
Remember the href attribute?
When linking to a page on another website, the value of the href attribute has to be that page’s complete web address.
Notice that we included the http:// part. This is necessary when linking to other websites.
One way to make sure you get the address right is to surf to that website, and then copy it from the browser’s Address Bar.
As with all attribute/value pairs, be sure to enclose the value in quotes, and...
...place an equal sign between the attribute and its value.
OK, let’s see our link in action.
As you can see, the words we enclosed in the anchor tags have become a clickable link.
By clicking on that link, we have been taken to the location specified as the href value of that link.
OK, so we’ve seen how to link to another website, but what if we want to link to another page on our own website? Well, we could use the complete address, known as an absolute path, if our web pages were actually on the Web. However, if our pages are not yet on the Web, then there’s no web address for us to use. Instead, we can use what’s called a relative path, and the simplest way to do this is to place all our web pages inside the same directory. Click the play button to continue this lesson.
What we see here is the contents of our web folder, which includes our home page (index.html), our style sheet (style.css), and some additional web pages.
We made these other pages similar to the way we made our home page, except that we saved them with their own unique filenames.
If we want to put a link on our home page that goes to one of these other pages, all we have to use for the href value is the destination page’s filename.
Here are examples of how these links would be written.
Notice there is no http:// and no web address, just the filename for the value.
Relative links will work, while your web pages are still on your computer, and even after they’ve been put on the Web.
Now you could place your pages in different directories, but then linking to them becomes a little more complex.
If you’re interested in doing that, then check out our info on Directory Structure in the references section.
Otherwise, it’s gonna be a lot easier for you to just place all of your web files into one common directory.
OK, add your links, and then it’s time for Lesson #19.

<<<Tutorial #17

Tutorial #19>>>