Dark Scarab - HTML 003

PDF

Links are the most crucial part of websites. You need a way to get from page to page and links are the only way to get there. If you don't know how to make a link correctly your website will fail. For this tutorial we will go over the different types of links you can use. Open up your text editor, open your HTML page and we will begin.

The Anchor Tag

In order to create a link we must use what is called the anchor tag. This tag is simply defined as such: <a></a>. In most cases you will have the href="" attribute. href="" simply defines the URL that your link will send the user to. Let's change our coding to what I have shown below. If you are just starting in this tutorial series you can just copy what is there. I have changed the background color to black and added the anchor tags.


        <html>

		<head>

		<title>My Web Page</title>

		</head>

		<body bgcolor="black">

		<a href=""></a>

		</body>

		</html>

Now we have our anchor, let's go somewhere. I am going to put 'http://www.darkscarab.com' in the href attribute. Then between the tags I will type Dark Scarab. You can see the coding below.


        <a href="http://www.darkscarab.com">Dark Scarab</a>

The text that is between the two tags is what is going to appear on your webpage. The links will appear blue and be underlined by default in your web browser. If haven't already, open up your web browser and open your file. You should see the black background and a link to Dark Scarab. If you click on it you will arrive at the Dark Scarab homepage (Unless you chose a different URL). You can put any text between the two anchor tags and you can also put any URL within the href="" attribute.

Open a new tab/window

You can also make a link open up a new browser window or tab (as most browsers do now). All that needs to be done is add the target="" attribute. This attribute will tell the browser where to show the page that is being linked to. To open a new tab or window, just do this:


		<a href="http://www.darkscarab.com" target="_blank">Dark Scarab</a>

Once you have done that, save your file and refresh your browser. When you click on the link you should have a new window or tab opened up with the web page opened. There are other settings for the target="" attribute but the rest are for frames, which is for a later tutorial.

In-Page Linking

You can also jump to a certain part of a page with linking. In order to define a location on a page you must use the name="" attribute. This is one case where the anchor tags will not need the href attribute. If you have a long HTML page and want to link to a certain spot, you have to create an anchor tag and name it. For instance, I names the anchor below 't2'.


    <a name="t2"></a>

In order to link to it you only have to add #t2 to the end of the page URL. This is shown here:


    <a href="http://www.example.com#t2">Text Here</a>

E-mail Linking

Another common use of the anchor tag is to use it as a link to an email. What this does is creates a link that will open up the users default e-mail program (such as Thunderbird or Outlook/Live) with your email address and can even automatically fill out the subject line. To do this you must use mailto: within the href="" attribute. This is demonstrated below:


        <a href="mailto:example@webname.com">Send Mail!</a>

Put that link into your HTML file, save it and refresh your browser. If you have an email program on your computer and you click on the link it should automatically open up with the 'To:' section filled out with the email address. Now you are probably wondering how to automatically add the subject. All that needs to be done is put a question mark right after the email address, followed by 'subject=' and then the subject.


		<a href="mailto:example@webname.com?subject=SubjectHere">Send Mail!</a>

Before we continue I want to point out that you cannot use quotes when defining the subject in the email link. You cannot do this because if you use the quotes the web browser will thing you are done defining the href attribute and the subject will not be added to the email along with the fact that the subject may be shown in your page.

If you test our link out the subject field should be filled out. The mail link is typically used when someone wants to contact the person who runs the website. I use a more advanced version of this (which also uses CSS and PHP) in my contact form.

Other Uses

You can also link in other various ways. Besides text, images can be used to link to other pages. Instead of putting text between the anchor tags all that is needed to be done is put the image tag in instead. Since we do not know how to put images in our pages yet, we will not do this now. We will do this in the next tutorial.