So far, we’ve covered what a tag is, how to modify your text layout and even format your text. Now, we will move on to creating links of various kinds. As I’ve mentioned numerous times already and will mention again rather often, this is just the basics. There are reams and reams of more advanced usages of what we’ve already gone over. I’ll show you how to make a proper text link, a proper image link, and even show you how to create a link to various portions of the same page; very useful in long, descriptive profiles. I know, I’ve used it myself to give people the choice of skipping right past the story to the information they probably are more interested in.
The first thing you’ll learn is the tag itself. It’s called the anchor tag. Why anchor? Well, ask yourself? What does an anchor do? It holds a ship in position, keeps it from floating away. In this case, it creates an anchor point for the link to be formed from and to point to. It works just like <font> did, meaning you have the opening portion, which contains all the important information the browser will need about the tag, then the text that will be affected by this tag, then the closing tag. NOTE: REMEMBER TO CLOSE YOUR ANCHOR TAGS!!! I cannot stress to you how important this is. If you do not, the browser will continue to search the document until it comes across it, totally screwing up the rest of the html coding. I have seen how badly this can mess up. The worst time I’ve seen was when a player attempted to put a link in but accidentally enclosed the end tag within the opening tag. When they went back to try to update their information again, they found the ‘save data’ button was no longer there. The coding for it was put in the text box used to input the character’s description. It took a sys op going in and removing the link coding to fix the whole problem. CLOSE YOUR TAGS PEOPLE!! IT WILL SAVE YOU FROM A WORLD TROUBLE!!
Making a normal text link
Alright, time for a new tag to be introduced. It’s pretty easy…
<a> and </a>
Looks pretty simple doesn’t it? It is. The attribute you’ll be using with it is HREF as in html reference (no it doesn’t have to be uppercase). You add an equal sign and a pair of quotes surrounding the URL for the page/image you want to link to, insert a little blurb for the link to anchor to, then close that tag! The URL will not show up on the page, instead, the text you put between the opening and closing tags will be the page’s default color and format for a link. It’s now clickable, taking you to the URL you assigned. ANOTHER NOTE: DOUBLE CHECK YOUR URL!!! There’s nothing more frustrating than setting up a link and not having it work. If you are SURE the URL is correct, then there is problem with linking to it, either because the file you’re looking for isn’t there, or the server that’s hosting it doesn’t allow for hotlinking. If you missed the lesson on tech speak in the intro…shame on you…you should close this window right now and go spank yourself! No…wait…too many people like that…instead just read over the re-explanation.
Hotlinking works like this. There are two separate servers on the net. One is where your profile is hosted, the other is where a picture you want shown in your profile is hosted. Hotlinking is putting in an image tag, linking the picture’s url to the profile. A successful hotlink will allow you to see the picture. If the server your avatar is on does not allow hotlinking, then it will show up as a little red X in a box where it should go. Yes yes, this isn’t exactly what we were going to go over in this page but it’s still very relevant. How you ask? Because the principle behind hotlinking is similar to creating an anchor. The following examples will show their similarities. And I’m going to go ahead and show you how to insert an image anyway, since part of this page will be showing you how to use and image as an anchor.
|
anchor to an image… <a href="http://dragonneo.com/~smokescale/Pics/Done_by_others/Smokescale-Aquatos-Lz.jpg">click here</a> will yield click here |
|
hotlinking an image (I shrank it way down so it wouldn’t take up the whole page) <img src="http://dragonneo.com/~smokescale/Pics/Done_by_others/Smokescale-Aquatos-Lz.jpg"> will yield (I didn’t show the resizing attributes in the example, that’ll come in the image page)
|
As you can see when you compare the coding to one another, it’s really not all that different. All you have to remember when working with hotlinked urls is to make sure you have the target address EXACTLY right, this includes case since some servers are sensitive to it. One lowercase letter in place of an uppercase or vice versa could throw a monkey wrench in the whole works. It’s recommended that you open the target page, copy the url using ctrl-c, then paste it into the tag. It’ll save you a lot of time and frustration. I used a picture’s url in the example but you can use any url.
Now then, you’ve seen how to make a simple text only link. Now we move on to image links. This is pretty easy, you just combine the two. You open an anchor tag, set the url, then insert an image tag, then close the anchor. Pretty straightforward stuff. When using an image as the clickable link, I suggest you use a SMALL picture so it will take very little time to load.
|
using an image as an anchor… <a href="http://www.yahoo.com"><img src="rainbow.gif"></a> will yield 
|
You can remove the border around the image in the <img> tag, but that will come in the appropriate page. Note the differences between the sources. The target of the link was an internet url, a page NOT hosted or stored on the same server as this page. This is where the http:// is crucial. It tells the browser to take the url given and look for it outside of the server the page it’s currently viewing is on. As for the image, it is on the same server, thus, the http:// and the rest of the url isn’t needed. There is however the issue of subdirectories. If you have a page or an image you want to link to but it’s not in the same directory as the page containing the link to it, you have two things you can do depending on the situation.
|
Option 1: linking to a file in a subdirectory
If your target picture or page is in a sub directory (meaning a folder which is under the same directory as the page containing the link), then you need to include the directory the target is in.
As you can see, I added directory/ to the image’s location. That’s because I wanted the browser to look in the folder named ‘directory’ for the next object in the location list. If you have numerous subdirectories it can get a little confusing. I suggest, navigating to the file and copy what you see in the address bar. Then paste it in as the src value. Don’t forget to add the name of the file you want opened. I decided to use an image anchor again so you could get a good idea for what I’m talking about by looking at the source code. You DO NOT HAVE to use an image as an anchor, in fact, use it sparingly. Text works just as well. Option 2: linking to a file in the same directory The image or file you want to link to is in the same directory. For that example, just look at the example of using an image as an anchor. DO NOT WORRY ABOUT USING THE <img> TAG. JUST REPLACE src WITH href WHEN USING THE <a> TAG. THE TARGET SHOULD BE TREATED THE SAME IN EITHER CASE. Option 3: linking to a file FROM a subdirectory Here is where you’ve gone to a page that’s in a directory all its own. To get back, well, that’s a little tricky. You can’t just specify the directory it’s in because it will look for that in the current folder and not find it. The only thing you really can do is to put in the url of the directory you’re trying to get to. It takes a bit more typing and it makes it tough when you don’t have it uploaded yet, but this is why you usually want one level of HTML files, then pictures and other files that are NOT HTML in their own directories. It’s not good coding to have to go up a directory in HTML. Try to avoid this as much as you can. The only time this CANNOT be avoided is if you have a file you’re trying to reach that’s in a completely different directory altogether. At that point, you just have to put in the url and pray you get it right (meh, you can go back and fix it later). |
When dealing with the url to your profile or someone elses, open up an arbitrary profile page (doesn’t matter who, just open one), go to the address bar and remove ONLY the name. Then enter the name you want as it appears in the profile (you may have to fiddle with it to show you the right one. Darn you YC profile name formatting!! Darn you to heck!) Then just copy and paste (you remember our friends ctrl-c and ctrl-v don’t you?) That should link you to whoever it is you want linked to.
And that’s pretty much all there is to making a link. There are some fancy things you can do to it to jazz up your profile, but well…that’s more advanced. If there’s an advanced tutorial made, that will be put in it. Otherwise, you’ll have to look elsewhere online. (This IS just the basics ya know!)