Links and Images Guide - This page is currently under construction
THIS PAGE IS CURRENTLY UNDER CONSTRUCTION. PLEASE PARDON THE MESS; THE ORIGINAL PAGE CONTENT IS INTACT BENEATH THE HORIZONTAL LINE.
Note: This is not really a guide for beginners. If you don't already know how to make links or images appear on a webpage, try checking out PUT LINKS HERE.
Links
There are a ton of fancy things that you can do with links on webpages.
The most basic way to decorate your links is to use the attribute text-decoration.
You'll notice that there are four different variations of links that you can customize. "link" is the appearance of the link on the page before you have clicked or hovered over it. "active" is. "visited" is. "hover" is. For my links, I tend to want a link that you've already clicked on look the same as a link that you haven't clicked on, and I like the active links to look the same as a link being hovered over. If you want any of these to be the same, you don't have to code them all separately; you can combine them, as shown below.
This way, you can save time and mistakes by having links that you want to look the same already combined. You can combine any of them; just add a:whichever into the tag with a comma and after a space. Note to self:revise this sentence
There are four different decorations that you can assign to your links. They are as follows:
Note: These attributes can be applied to a:link, a:visited, a:active, and a:hover. Any of the attributions can be applied to any of those links; I apply them arbitrarily in the examples.
text-decoration:none; is the default value and give it no decoration. It will look this.
You may have seen links on other websites (on this website, even) where the background of a link lights up or changes color as you hover over it. (The menu links in Firefly's Rainbow or Holiday Birds are an example of this.) This effect is created with a block attribute.
In order to change the background color of a link, it must be displayed in a style that can have a background. Display:inline is the default value for the display: attribute.
Now that you have your links set to display:block, you have to set the background color. You don't need to change anything else in a:link or a:visited (or a:active, if you choose), so now you have to change a:hover in order to get the effect when you hover over the link. Without defining a background color in a:link or a:visited, the background of the link will automatically be whatever color the background behind it is. So to change this for the hover-over, add this to a:hover:
.:Links
To include a text link on your page, write <a href="URL">TEXT</a> on your page where you would like the link to show up. Replace URL with the address of the page you're linking to, and replace TEXT with the text you would like the link to say.
If you want your link to open in a new window, add target="_blank" to your link. The link would then look like this: <a href="URL" target="_blank">TEXT</a> . This is useful for linking to sites other than yours, so the visitor can visit the new site without leaving yours.
To include an image on your page, type <img src="URL"> on your page where you want your image to show up. Replace URL with the address of your image. To do this, you'll need to have your image hosted somewhere, not just sitting on your computer. You can upload your image to places such as Photobucket or Imageshack.
What if you want your image to be a certain size? Include height="HEIGHT" width="WIDTH" in your image tag. Replace HEIGHT with the height in pixels that you want your image to be, and replace WIDTH with the width in pixels. Your image tag would then look like this: <img src="URL" height="HEIGHT" width="WIDTH"> .
If you use an image link, covered in the next section, the picture by default will have a border around it. If you want to remove the border, add border="0" to your image tag. The image tag would then look like this: <img src="URL" border="0"> . Alternatively, if you want your picture to have a border, you can add border="#" , with # replaced with the thickness of the border in pixels.
Now that you can code links and images, coding an image link, where instead of text you click on a picture, should be easy. Just write a link tag, and then instead of text, put an image tag. The link would look like this: <a href="URL"><img src="URL"></a> . You can add other parts to the link and image tags, like what was covered in the paragraphs before.
Have fun coding links and images! If there's something you don't understand, or you have questions, feel free to ask me for help. =)
