~ How to add links ~
Hey there! I´ts good to see you again! Lets continue right away! We are still going to keep on working with the textfile we have been working with since the first class, we named it myletter.html and after the last class it looked like this: <html> <head> <title>My first letter to my website!</title> </head> <body> <font face="Comic Sans MS" size="4" color="#A2B044"> Dear website,</font> <font face="Times New Roman" size="2" color="#87A5C7">this is my first letter to you. I am sure there will be many more in the future... <b>Sincerly ~Me</b> </font> <img src="l4cpic.jpg" width="116" height="135" border="0" alt="Wow! You are doing so good! I´m impressed!" align="left"> </body> </html> Now, to add a link to text you need to use the tag <a></a>. add href="" to <a>. href is what tells your computer where to go when the link is clicked, between the "" you will write the whole URL to where you want to link to. Between the <a> and the </a> you write the text that will show up as a link. So for an example, we will link to http://www.love4colors.com and to do that the code will look like this <a href="http://www.love4colors.com">Go to Love4Colors</a> and the actual link appears like this Go to Love4Colors So lets add this to our letter like this: <html> <head> <title>My first letter to my website!</title> </head> <body> <font face="Comic Sans MS" size="4" color="#A2B044"> Dear website,</font> <font face="Times New Roman" size="2" color="#87A5C7">this is my first letter to you. I am sure there will be many more in the future... Here´s a surftip for you! <a href="http://www.love4colors.com">Go to Love4Colors</a> <b>Sincerly ~Me</b> </font> <img src="l4cpic.jpg" width="116" height="135" border="0" alt="Wow! You are doing so good! I´m impressed!" align="left"> </body> </html> Now notice that the link we made opens up in a the same window. This means that when you click the link you will move on from where you first were. This can be bad in some situations. For example. If you have built your site using frames, then the links will appear in your frame and for external links that is never a good idea. So there are different ways to target your links. Add one of these attributes to your <a> depending on how you want your links to open: target="_blank" : Makes link open in a new window. target="_top" : Makes link open in the topmost frame meaning the link will open up in the whole same window. target="_parent" : This target is used when you have built your site with nested framesets. If you target with parent you will make your links appear in the inside frame. If however you have no frames parent works exactly the same way as top. Using parent is not the best since it is not supported by all browsers. target="_self" : Makes the link appear in the same window, it works as if you have not added any target to your code at all. So wether this is a higly unnecessary target or not can be discussed! So now, how do we link an image? It´s rather easy actually. Soinc eyou have learned how to add images to your site earlier, and now you also learned how to link. Just put these two together. Instead of writing text between the <a> and the </a>, you need to place your image url there. So it will look like this <a href="http://www.love4colors.com" target="_blank"> <img src="yourimage.gif"></a> If we link an image and have not added any border atrribute to the img tag it will get a purple border around it, that means it is active. If you want to get rid of it add border="0" to your image code, like this: <a href="http://www.love4colors.com" target="_blank" > <img src="yourimage.gif" border="0"></a> And now if we want a text to appear when mouseovering the image we need to add a title="" to the <a>, like this: <a href="http://www.love4colors.com" target="_blank" title="surf on to Love4Colors!"> <img src="yourimage.gif" border="0"></a> Lets link the image in our letter.html, we need to remove the "alt" in the img tag and replace it with title="" in the a tag. Now the code looks like this: <html> <head> <title>My first letter to my website!</title> </head> <body> <font face="Comic Sans MS" size="4" color="#A2B044"> Dear website,</font> <font face="Times New Roman" size="2" color="#87A5C7">this is my first letter to you. I am sure there will be many more in the future... Here´s a surftip for you! <a href="http://www.love4colors.com">Go to Love4Colors</a> <b>Sincerly ~Me</b> </font> <a href="http://www.love4colors.com" target="_blank" title="surf on to Love4Colors!"><img src="l4cpic.jpg" width="116" height="135" border="0" align="left"></a> </body> </html> So now let´s have a look at myletter.html You´re doing so well! Im really proud of you! There are more ways of targeting links to learn, but you will learn them along with the more advanced html building. Curious? Keep on learning! I´m waiting for you at the next class!  |
|
|
|
|
 Take me back
|
|