Overview of links

- [Instructor] Let's face it, without links there wouldn't be an internet. In this chapter, we'll take an in depth look at creating links in Dreamweaver. But first, let's take a look at the basics of links and the different types. A link points the browser to a file at a different location on the web. HTML uses the A tag to create a link. Why A and not L or Link? Well there is another tag called Link, but it's used for different purposes, such as linking the style sheet to a web page.

The type of link that you click to go to another page is technically called a hypertext anchor, and the address of the other page is the hypertext reference. So the tag is A for anchor, and the address is stored in the HREF attribute. The content between the opening and closing A tags becomes the clickable link. In this example, click the text guestrooms would take you to rooms.html in the same website. As well as text, you can put an image between the A tags and use that as a link.

When linking to another site, the value of the HREF attribute must begin with HTTP, HTTPS, or whatever protocol the external file uses. So this links to linda.com over a secure connection. This type of link is also known as an absolute link. If you were to leave out the HTTPS:// at the beginning of this URL, browsers would think you're creating an internal link. And they would try to find www.linda.com in the same site.

So the link would fail. Leaving out the protocol of the beginning of the URL in an external link is a very common mistake, that often has beginners scratching their heads as to why it won't work. The most common type of internal link is what's known as a document-relative link. The browser needs to know where to look for the file in relation to the current document. When the file you're linking to is at the same level as the current document, the value of the HREF element is just a file name.

So this links to rooms.html from a file that's in the same level in the HTML hierarchy. In other words, it's in the same folder or directory. To go up one level, the file name is preceded by two dots and a forward slash. To go even further up the site hierarchy, you can chain two dots and the slash for each level. To go down a level, the HREF begins with the name of the folder, followed by a forward slash.

The good news is that you don't need to hand code these values. Dreamweaver takes care of all of it for you. But you do need to understand the meaning of document-relative links. If you accidentally move a file outside Dreamweaver, the link won't be updated. When you have a broken link, the first thing you should do is to check the code. Internal links can also be relative to the site root. Site root relative links always begin with a forward slash, which represents the site root.

In other words, the top level of the site. So in this example, the link tells the browser to find rooms.html in the root folder, regardless of where the current page is in the site hierarchy. This type of link tends to be used mainly in sites that use a server site technology, such as PHP or cold fusion, because the code might be injected dynamically into files at different levels of the site. So document relative roots wouldn't work. That's a quick overview of the basic types of links we'll be working with in the rest of this chapter.