Learning HTML by yourself


4A - Hyperlinks

30/10/2011 13:47

 

Okay, first things first. Without stuff to click on, a web page isn’t really a “Web” page at all. Links (or hyperlinks) are what make the world wide web a web, and interconnect every page and file and picture out there. Any html file without hyperlinks is the equivalent of a dead end

            Since we probably don’t want to have our web pages gain notoriety for being the worst in the entire world, putting links up is a very good idea. Anyways here’s the code for linking to another html file in the same folder as the one with the link that takes you there:

 

Click <a href=”page2.html”>here</a>.

Okay, you see where it says “here”? That word will be highlighted, and you will be able to click on it. However, the period will not be highlighted, because the  <a href> tag was ended before the period. So basically, anything after an <a href=””> tag, up to the </a> tag will be a link. When you click on the word “here” on the above code, you will be taken to a page called “page2”. Understand so far?

Basically, any amount of text can be a link, from a single character to an entire sentence or paragraph. However, if you don’t make sure that there’s an </a> tag somewhere in there, you will end up with a page made up of one big link, which is really no good.

 

Images as Links

            Making an image clickable is surprisingly easy, if you know the basic stuff. Look at this code:

<a href=”main.html”> <img src=”picture.jpg”> </a>

            Basically, the image tag was right between the link tags, so it will become a link. By default, Internet Explorer will give a linked picture a thin, blue border so that users will recognize it as a link.

            Feel free to experiment with image links. They’re very impressive if done right. For instance, you could change the border or have an “alt” thing in the <img src> tag.

 

Making Mail Links

Let’s say, hypothetically, that you are a very lonely person who doesn’t have any friends, and doesn’t get a lot of e-mail (no names). Now, every good site should have some contact information on it, and since you avoid most social activities to fiddle with your computer, you may as well make up for your lack of excitement by making your page a good one. Let’s say you type in this code:

Please <a href=”mailto:ihavenofriends@yahoo.com”>mail</a> me.

 

Well, you guessed it. It would say “Please mail me.” but the word mail would be highlighted. If another lonely person would come along and click it (prepare yourself), Outlook, or any default mail program, would load up onto the send message screen, and your e-mail address would be in the “to” field! WOW!

As if that weren’t mind-blowing enough, you can actually cheat and put words in their mouth:

Be my <a href=mailto:ihavenofriends@yahoo.com?subject=I would like to be your friend>friend</a>!!!

 

You’ve probably guessed it. It will load exactly the same thing as the above code, but you’ve saved them the trouble of entering asubject in the subject line

 

Linking to Other Places on a Page

Suppose you have a really big page. No, let’s say you have a REALLY HUGE web page. Not a web site, I mean. Just one big huge html file that takes forever to scroll down to the bottom in. The kind where you get lost. And let’s say that you have a really great, super-informative glob of information right smack in the middle of it all. Let’s say it starts as soon as the scroll bar is perfectly halfway down the screen.

 

Since a lot of people are going to the page just for the glob of information, why not have a link that doesn’t take you to a new page, but moves you down to another location on the same page? Well, first of all, you would put a piece of code right at the start of the big glob of information:

<a name=”glob”>My Massive Glob of Info</a>

Now the computer knows that that location on the page is called “glob”, and that it’s right at the start of the big glob.

 

Now you put a link to take the person there. When they click on the following, they will instantly be taken to the place on the page where the glob name code is; in this case, the start of all of that info:

Here’s the big <a href=”#glob”>glob!</a>

 

Conclusion

I’ve included everything you’ll need at this point in time to make a quality web page, and there’s still quite a bit of advanced stuff you can learn later on.

 

—————

Back