Subtitles of the Movie

This next module is entitled links and references. I group these two together because they are intrinsically the same. A link is obviously a reference to another document, the only difference between a link and a regular reference is that you can actually click on a link and go to that document. A reference might be a reference to an embedded file such as an image, so both if you like are references to other files. This module pertains to some mistakes that people can make in relation to links and references. The first of these is typically made by novice web developers. They make references or links if you like to documents or files on the hard disk of the machine that they’re using to develop the website. Let me show you an example of that. Let’s say they want to put an image into their HTML document and they might do something like this. They might say the source of that image is on the hard drive under my documents under photos and we call it mydog.jpg and then they go and test it in their browser on their own computer and the document looks fine because of course the browser can find that particular photograph. So they think, excellent, my website is ready for publishing and they publish their HTML document up onto their server. and they may even take the mydog.jpg file and put that also up on the web server, what they’re obviously neglecting to do is to take into consideration on the web server, there is no file called my documents, sorry, there is no folder called my documents, in fact there is probably not even a c drive. These are typically Unix computers and Unix computers do not have something called c colon. They get mystified as to why when they open up their website, their live website from the Internet, they find instead of the photo of their dog, they find just a image place holder saying essentially this image cannot be found. So what's the solution to this problem? You either move or copy the particular image that you want in this case, mydog.jpg from its original location which is c:mydoucments photos into the same directory or a sub directory of the directory where you’re holding your HTML document. It's very important of course that you maintain the relationship between the HTML document and the image both on the development machine and on the final published machine. I’ll give you an example of that. If you created a subfolder underneath your HTML folder on your development machine called say, photos, so you've got if you like page called main.html in a directory and underneath that directory in one sub level down, you've got a folder called photos, you put the mydog picture in there, then when it comes to publish your site then you must create a sub folder on the web server also called photos and store the mydog photograph in it so that the mydog photograph has exactly the same relationship with the original HTML document as it does on your source machine. A related mistake very similar to this is to use what we call an absolute link instead of a relative link or an absolute reference instead of a relative reference. I’ll show you an example of that. You create a hyperlink in your HTML document, which refers to say, a page called dogs.htm and dogs.htm is a part of your website and your website can be found at say, www.xyz.com. What a lot of people do is that they make the hypertext reference, the href to be the full path http://www.xyz.com/dogs.htm I’m not quite sure of the rational behind their decision to do that but you see it quite a lot, they think to themselves well that's the address of the page so that's where I’m going to put it. This is called an absolute link because that is an absolute reference to that page called dogs.htm That should be amended of course to be a relative link which the correct version is just dogs.htm This is assuming of course that the page that contains this HTML is stored on the same server in the same folder as dogs.htm It's completely unnecessary to put that http:// all that stuff at the beginning. In fact not only is it unnecessary, it actually is a disadvantage to your website. Can you think why? I would like you to pause and think for a minute, obviously both links actually work but one is better than the other. The lower one is better than the upper one. Question is why. Well, the reason is, if your website ever moves from one server to another, From one .com to another then you’re going to have to go and edit every single link in your website if they all look like this. In other words, moving the website requires you to edit the website, which you should never really have to do. You should be able to pick up a website, drop it on another server and have it still work perfectly at least as far as links and references are concerned. It also means that you’re going to have a lot of difficulty testing new revisions to you website on your development machine. Because if you open up the page that contains this hypertext link, let’s call that main.htm which has a link obviously to dogs.htm and every time you try and reference the reference through the link, you’re going to get the version up on the website, you’re not going to get the version on your development machine. Anyway those are a couple of things that it's very useful to keep in mind.