Chapter 4
Links
Links are a core feature of html. They allow you to direct your visitors to other pages and even specific sections of other pages. They are what links the whole web together. There are several kinds of links , the main one being the link to another page. Links are created through the <A> tag. It has 3 main parts. The actual address or URL, (Uniform resource locator) of the new page to be displayed, where it will be displayed, and its description. Lets look at one now..
<A href="http://www.kali.net" target="b" >Kali</A>
The effect
Kali
The above example uses an 'absolute url' in href attribute. That means the full address was used. That means you could use this link from anywhere on the web and the link will be found. Just like when you send a letter from anywhere in the world, with the full address , its destination will be found. You could also use a 'relative url'. Let's say you are in http://www.mytown.com , to get to http://www.mytown.com/myplace/mypage.html you would use a link in your home page that looked like this..
<A href="/myplace/mypage.html" target="_blank" >My place</A>
..because you're already at http://www.mytown.com you only need to supply the rest of the url. Just like when your directing a friend to the shop , you would only tell him the street name and number as you are already in the same town. 'mypage.html' is the destination file in a directory called 'myplace' which is located in 'mytown.com' .
The target attribute is used if you have named frames or are using Javascript. We'll get to frames in Chapter 7. Lets say you have split your home page into two frames. On the left is the menu carrying all your links and is named 'frame a' . You would probably target your links to the right, in 'frame b'. Or you can use the targets built in values '_blank' to open link in a new window, '_self', '_top" or '_parent'. Between the opening and closing <A> tags you type the description of your link. Unless you 're using styles, it will be underlined. Or you can use an image instead of text. Easy. Just use the <IMG> tag between your <A> tags like this..
<A href="http://www.kali.net" target="b" ><IMG src="radown.gif" width="32" height="27" ></A>
The effect
clicking on the image will activate the link
Linking to specific sections of a page
This gets a little more complicated, but once you grasp the concept , easy!
First you create what is known as an 'anchor'. Go to the page you want to link to, in the documents source, go to precisely the point you want the user to be taken to and type <A name="mypic"> type the text or image you want displayed then close the 'A' tag with </A>. Now you are going to create a link to this anchor. Here is the tricky part. In your link, specify the url, then add a '#' sign then the anchor name. Look at the example below, it should clarify this a little.
<A href="/myplace/mypage.html#mypic" >My pic</A>
Do 'nt forget the '#'. When you click on this link, it will take you to the anchor, whether it's on the same page or another page, or half way down a page.
A links color
To change the color of your links you define them in your <BODY> tag.
Link="red" Alink="red" Vlink="red" . A for active and V for visited. With styles , Chapter 10 , you can also use the hover command to change the color of a link when the users mouse is hovering over it ( IE4+ NN6+ Opera5+).
Other kinds of links
As well as the link that opens another html page (http://www.wwwwwwww...) there are also a few more. To create a link to an e-mail address we use the same format as described above , except we change the url.
<A href="mailto:john@work.com" >
Notice in this url there are no forward slashes. It's simply "mailto" followed by a colon followed by the e-mail address. You can take this one step further by adding "?subject=Enter text here". This will automatically assign a subject for the users e-mail. The full string looks like this ..
<A href="mailto:john@work.com?subject=HTML Guide feedback" >
also use ?cc=friend@address.com and ?bcc=friend@address.com and ?body=hi, how are you?. To use multiple headers, separate each with an ampersand.
<A href="mailto:john@work.com?subject=HTML Guide feedback&body=hi, how are you" >
There is a documented bug in MSIE / Outlook that has not been corrected yet. There is a 452 character limit for the mailto: link. There is nothing you can do about it, beleive me, I tried for ages. We'll have to wait for Microsoft to correct it and release a patch.
The ftp url uses the slashes as in ftp://ftp.server.com/pub/program.exe
You can also add the log in username and password to the URL (if you know them)
ftp://username:password@ftp.server.com
