Primer 2: Links
Links Within a Site
The link tag is simply <a href=”file_location”>link</a>. For, example, to link to the introduction of this HTML primer, I would type <a href=”http://colombara.org/resources/html-primer/”>link to the introduction</a> into my HTML file. Please note a few things.
1. The entirety of the file location must be enclosed in quotes.
2. Subdirectories are separated from directories by the use of a forward slash (/). For example, in my sample code, the directory is resources, the subdirectory is html-primer. This is different from the Windows operating system convention where a back slash (\) is used to separate directories, subdirectories, and files.
3. The location reference began with a forward slash. This tells the web browser to refer to the root directory. On your personal computer, the root directory would typically be the C:\ drive but on a website, it is the base URL. For example, in this case, it is http://www.colombara.org/.
- This is one reason why it is difficult to fully test a website without posting it online. For example, using our sample code above would cause our personal computer to search for C:\resources\html-primer\. If I keep HTML files in a Colombara.org directory in My Documents, my computer would need to search for C:\Documents and Settings\Danny\My Documents\Colombara.org\resources\html-primer\. This will likely generate some kind of error or simply will not work.
- One way around this is to use a relative path rather than an absolute one based on the root directory. For example, this link to the introduction uses a relative path which is simply <a href=”html-primer/>. This works because this page that you are reading right now is already in the correct directory. You are simply asking the computer to search for the file or subdirectory within that directory.
- So, why not always use relative paths? Because you can’t. When you want to switch between directories or subdirectories, you will have to use an absolute path. I would recommend using relative paths when possible and absolute paths when necessary.
- Some software, such as Dreamweaver, will allow you to properly preview the page on your computer. It will generate the page with the links automatically adjusted so that they will work on your hard drive. I’ve found this to be a valuable tool in enabling me to not have to worry about relative and absolute paths.
- Finally, I’ve recently discovered XAMPP which pretty much allows you to set up your Windows, Mac, or Linux pc as a server to build and test your web site. I love it!
4. Note that when a specific file is not noted, the web browser will automatically search for a file named “index” within the directory. For example, colombara.org/resources/ will bring you to the same place as colombara.org/resources/index.php. (Assuming that my index has a .php extension.)
- Notice that I included a final back slash in the instances where I have not specified a file in that directory. Doing this supposedly makes things more efficient though I don’t really know why. Just do it because those in the know say to do it.
Links Between Sites
There is nothing new here. We still use the basic framework; <a href=”file_location”>link</a>. The only difference is that we now use the full URL for the webpage we want to reference. For example, if I want to refer to the Firefox website, I’ll need to use the full URL as in <a href=”http://www.mozilla.com/en-US/firefox/”>Firefox</a>. Doing this will let your browser know that you’ve switched sites entirely. The new root directory would now be www.mozilla.com and all future references will be relative to this site root.
New Window Types
When you click on a link, there are four options for where the web page will open. These definitions are taken from the help files of Dreamweaver MX.
- Blank, <a href=”/resources/html-primer/” target=”_blank”>Blank</a>.
Loads the linked file into a new, unnamed browser window. - Parent, <a href=”/resources/html-primer/” target=”_parent”>Parent</a>.
Loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window. - Self, <a href=”/resources/html-primer/” target=”_self”>Self<span style="color: green;"</a>.
Loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t need to specify it. - Top, <a href=”/resources/html-primer/” target=”_top”>Top</a>.
Loads the linked file into the full browser window, thereby removing all frames.
If you’re not using frames, the only two you will probably use are _blank to open the page in a new window or _top to open the page in the same browser window.
If you want to specify the size of a new window, can use the onclick attribute instead of _blank . For example this link was made by typing href=”/resources/html-primer/links/” onclick=”window.open(this.href, ‘popupwindow’, ‘width=500,height=320,’); return false;” target=”_blank”>this link</a>. Unfortunately, when viewing with Internet Explorer, you may get the following warning at the top of the browser, “To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options…” At which point the person viewing the website will have to click and select “Allow Blocked Content…” If the user doesn’t allow the blocked content, the opening of the window will follow the _blank attribute.
File types
The system of linking files is pretty much independent of the file types. It doesn’t matter if you are linking to other web pages or to Word (.doc), Excel (.xls), Adobe PDF documents (.pdf), or any other file type … the coding is the same. Just make sure you use the proper extension and there should be no problems.
Incidentally, if you post something on your website that you want visitors to print, it would be wise to use a format other than HTML since HTML cannot guarantee consistent formatting when printed from different browsers. I’d suggest using .pdf files because nearly everyone has a .pdf reader already installed on their computer. To assist your visitors that don’t have a .pdf viewer, you may want to provide a simple link to Foxit Reader (a tiny free program which is infinitely faster than Acrobat Reader). To create .pdf files, I suggest you download CutePDF Writer, another great free program. It enables you to create PDF files from any program which can print.
There are some specific things you may want to keep in mind when working with multimedia files though. That is why I created the next section lesson on working with multimedia.