We will finish this lesson up by learning about links. You connect the pages within your site and to other pages outside of your site with links. Without links, the World Wide Web wouldn't be a web at all! Linking to another page on your web site As mentioned earlier, a browser will look for and load up the index.html as the first page of your web site or directory. You should always have an index.html to allow visitors to access your site. However, you will want to create other pages and so you have to link or reference the other page through a hyperlink. To do this you use the <A> tag (called an anchor tag) with a HREF (hyperlink reference) attribute. The opening tag looks like this <A HREF="location"> and the closing anchor tag looks like this: </A>. The text that you put between these two tags will become the hyperlink. When the text is clicked, the browser will load up the html page specified in the HREF attribute. You can also put an image file instead of text as the hyperlink. The image will have a border and when it is clicked, it will also send the browser to the page that is in the HREF location. The location you put in is the page name and path or directory(URL). If you are linking to a second page on your site that is in the same directory, you can just put in the name of the html file. If you are unsure, you can put in the full URL. Say that you have named your second page "secondpage.html, the link would look like this: EXAMPLE 1 <A HREF="secondpage.html"> Click here to see my second page. </A> or <a HREF="http://www.geocities.com/mysite/secondpage.html"> Click here to see my second page.</A> By default, links are underlined so the above code would appear on your page like this: Click here to see my second page. EXAMPLE 2 Easy navigation is very important in a web page, so it is a good idea to add a link back to your main page from every other page. <A HREF="index.html"> Back to my main page!</A> This could would look like this on your page: Back to my main page! Note that the hypertext reference is enclosed in quotations marks. The HREF is instructing the browser to load up this file from the server. The file name must be exactly correct and it is case sensitive! The closing </A> tag is also very important. If you forget to add the closing tag on the "A" your whole page will be a link and will all appear underlined. Adding a link to another site To add a link to another web site is exactly the same as above except that the location you put in the is a FULL www page URL or address - including the http://www at the beginning. You simply use the <A> tag with a HREF (hyperlink reference) attribute and the closing tag is </A>. Again, the text that you put between these two tags will become underlined. If you click on the underlined text it will send the browser to the location within the quotes. EXAMPLE 3 <A HREF="http://www.geocities.com">Geocities main page <A> Geocities main page Link appearance and colours The default is for links to be underlined and appear in a different colour than the rest of the text. The default colour for a links is blue, but, like the text on your page, you can specify any colour you want for the link. Again, when you want to set something that affects your whole page, it is an attribute of the <BODY> tag. You specify the colour that your links by adding a LINK colour to your body tag using the hexidecimal colour codes. EXAMPLE 4 <BODY BGCOLOR="#colour" TEXT="#RGBcolour" LINK="#RGBcolour" > Remember to include the # inside the quotation marks too. Throughout the lessons I have changed the colour of the links to match my page design. Also note that you can add a visited link colour or VLINK and active link colour or ALINK. You might like to try out some different colour schemes as you develop your own pages. EXAMPLE 5 <BODY BGCOLOR="#colour" TEXT="#colour" LINK="#colour" VLINK="#colour"> Remember to close your <BODY tag at the end of adding your colour scheme with the > character. "Mailto" Links You also use links to send an email to a specific email address. You do this by replace the location of the file (URL) with the MAILTO attribute followed by your email address. EXAMPLE 6 <A HREF="mailto::[email protected]"> TeamTrek</A> You can put this coding into a sentence like this... Please send an email to <A HREF="mailto:[email protected]">TeamTrek</A> The above code will look this this on your page: Send send an email to TeamTrek Notice again the closing of the </A> tag. Say your email address was [email protected], you would write that the same way: <A HREF="mailto:[email protected]"> Email Me!</A> The text that you use for your link can be whatever you wish. I wrote both "Email me!" between the <A> and </A> and my name. Just remember that what is between the tags is what your visitors will click. You can also choose have your graphic images to be used as the link. We will show you that in the next lesson. ASSIGNMENT No.3 For this assignment, we would like to see that you can add a background image, and use the links. Create a new page with a background (or modify one you have created already) and add a link to the U of Area52 main page, and a link to your email address. You can start from scratch or you may like to refer to the one below and make your own changes. <HTML> <HEAD> <TITLE> This is my New Page </TITLE> <BODY BACKGROUND="bg20.jpg" BGCOLOR="000000" TEXT="#FFF0F5"> <H1 ALIGN="CENTER"> Area52 I Believe</H1> <P> <FONT SIZE="2" Face="Comic sans ms"> <U>This is my new page</U>, <BR> <B>I am learning a lot about HTML.</b> <BR> I am learning HTML at <A HREF="http://www.geocities.com/Area52u"> U of AREA52</a> </FONT> <FONT SIZE="2" FACE="Arial"> <P>Also I am adding a new paragraph, so my words are not all cluttered together! Please tell me about my page ,<BR> you can email me at <a href="mailto:[email protected]">U of AREA52</a> </FONT> </BODY> </HTML> Lessons created by "Odona". 2008/2009 |