Tutorials: More HTML

Last time, we touched upon a few things I said were for another tutorial. Let's get those out of the way first.

Entities are unlike normal HTML code in that they consist of an ampersand (&) followed by either a number or code word. These are translated by the browser into special characters, such as the ampersand itself (&amp). Some newer browsers will convert actual symbols into entities by themselves, but this is not always the case, so you may be better off using entities in the first place. There are several hundred entities, but below is a table of some ones you might use:

A local link is something you can only use if you're planning your site out to any great degree. Normally, for a link such as a picture link, you'd type (or copy and paste) the entire image URL *, but this involves your browser connecting to the host of that file and downloading it, consuming extra bandwidth and making transfers slower. Oh sure, if you're on DSL, cable, or some other high-speed connection it doesn't matter, but think about those of us on 56k modems once in a while.

The Domain uses local URLs, or at least this current incarnation does, so I'll take the opportunity to explain local URLs using the Domain as an example. Firstly, the master directory is ftp://darkut.free.fr, from where the whole site extends through a network of folders. The master directory contains a file called "index.htm", which is the default page opened if you just type "http://darkut.free.fr" into the address bar at the top of the browser. Note that, if you build your own website, index.htm or index.html is always the default file, so make that your main page and have it link in some way to every other (unless you're hiding pages or files for whatever reason).

A simple local URL would be a file in the same directory. For example, both "index.htm" and the Domain's background, "dgrey013.gif", are in the master directory. To link to the background from index.htm would simply require "<IMG SRC = "dgrey013.gif">.

The master directory has several child directories; one such example is the "Comics" directory. Linking to a file in here would normally require a URL starting with "http://darkut.free.fr/Comics", but if you're writing the code for a HTML document already in the master directory, all you need to use in the HREF is "/Comics".

Confused?

Here's an example: The main page of the site is already in the directory "http://darkut.free.fr". Using the local reference tells the browser simply to add "/Comics" onto the end of the existing URL, resulting in "http://darkut.free.fr/Comics". Of course, this will either (a)Give you a 404 error, or (b)take you to a list of files in the /Comics directory, depending on the settings of the Domain's host. I haven't checked. To finish it off, you'll need to add a filename onto the end of that, so URL on the index to link to the Series Comics Index, for example, would be:

<A HREF = "/Comics/series_comics.htm">

However, this will only work on files or files within folders that are in the master directory. So why use local URLs? Well, they're quicker to type out, for one thing. Plus, you can go up to the parent directory from a child directory, but we'll move onto that in a second. Also, they load quicker as the host doesn't try to connect to itself additional times, good news for 56k users and anyone on a really strained DSL connection. Pictures and pages load much faster.

One thing, though is that this page (the one you're reading right now) is in the "Tutorials" directory. To link to the series comics index from this page would require going up a folder, to the parent directory, which is the master directory. Sounds complex, but it's simple to do; just add "../" for every folder you want to go up. To go up one folder needs ../, two folders needs ../../, and so on. So, linking to the series comics index from this page requires this local URL:

<A HREF = "../Comics/series_comics.htm">

Still confused? Let's take it step by step. We're here, in ftp://darkut.free.fr/Tutorials (or "http://...", it doesn't matter for the purpose of this example). The "../" first tells the browser to go up one folder. We're now in ftp://darkut.free.fr, which is the master directory. Then, the "/Comics" bit tells the browser to go into the Comics directory. You are now in ftp://darkut.free.fr/Comics. What do you do next? Finally, the "series_comics.htm" part tells the browser to load the file series_comics.htm, which is the Series Comics Index. We're there!

(Note: Text with a line through it, shown above, is done with the <s>...</s> tags, for "strikeout" text.)

We'll meet up with local URLs again later, but we'll leave them to one side for now. Next up are comments. These are placed by whoever is writing the page as a guide to help them, or a note to later coders. They are used with the stand-alone <!...> tag, where the whole tag makes up the comment. For example, <!This is a comment> gives:

Can't see it, can you? Comments are ignored by the browser and can only be seen with the View|Source command (you can try it and see if you think I've just used a couple of line break tags; I assure you I haven't). They aren't necessary, but may be used to break up text or explain what a block of code does for later reference.

One final thing for today is the anchor link. You're probably thinking, "Anchor? That sounds horrible, get it away from me!" (or something along those lines). However, guess what? You've already done anchors; that's what the A in A HREF stands for. Anchors can not only be used to jump from page to page or site to site, but can also be used to jump to a specific part of the page.

First, you need to set an anchor on the text you want linked to. This is done by switching HREF for NAME, and using either text or an image as an anchor point. For example, <A NAME = "Jump_Point"> sets an anchor named Jump_Point. You can't use spaces in an anchor name, use underscores instead. Don't forget the closing </A> tag after the anchored text, though. Observe:

Remember this line of text, for it has been anchored.

That's the anchor point set. To jump to it from the same page, just use the A HREF tag, but put a hash (#) before the name of the anchor. Confused? Okay, here's an example: <A HREF = "#Jump_Point"> jumps to the anchor named "Jump_Point". The hash tells the browser to look for an anchor, rather than an actual web page. Try it here:

This link will take you back to the anchor.

However, there's one final thing about these, and that's linking to a jump point on another page. We'll bring back local URLs (he said, hearing you all groan in dispair) and jump to an anchor on another page of the Domain, on the glossary page. Yep, you guessed it, this is how those asterisks work.

You need to use the local URL (or full one if you're linking to a completely different website) and end it with a hash followed by the anchor name. Put simply, you take the jump link and the local URL and combine them. The glossary page is in the "Miscelleneous" directory, and we'll link to the first entry: Flame. The anchor is named "Flame", quite conveniently. We end up with:

<A HREF = "../Miscellaneous/glossary.htm"> being combined with <A HREF = "#Flame">, which gives us <A HREF = "../Miscellaneous/glossary.htm#Flame">.

Try it now!

And there you go! It's not that simple. As a final suggestion, take a look at the submissions page or one similar; you'll see a system using jump links alternating between different points on the page and the top of the page, allowing a user to check which parts he/she wants to without scrolling through what he/she doesn't want to read. This makes large pages much easier to navigate (and also helps to not annoy your visitors).