Breadcrumb trail for Web Design:
Web Design -> Planning -> Best Practices -> Basic Skills -> Building -> Special Pages -> Publishing -> Testing -> More
Links - L. 05
When you want to add links to a different page or website you'll need to add the code to the HTML page itself (for us right now - index.html NOT style.css). You also get to choose the words that you want to be clickable. Here's the basic code:
<a href="URL TO PAGE">VIEW LINK</a>Replace the words - URL TO PAGE - with the direct link to the page you want folks to visit. Replace the words - VIEW LINK - with the words you want to be clickable.
If you are linking to a page on your own website, you can use relative links. Here's an example of code linking to the contact page:
Open a new pageIf you are creating links to other pages on your website, you'd probably want the new page view to simply replace the old view. But, sometimes you might want the new page to open in a new window. When you want the new page to open in a new window or tab, you can add: target="_blank"
<a href="URL TO PAGE" target="_blank">VIEW LINK</a>
Using an image as a link
You can use a image as a link by replacing the text with an image tag. Basic Code:
<a href="URL TO PAGE"><img src="IMAGE URL"></a>
The alt attribute is required if you want to conform to standards. If the picture doesn't load for one reason or another, the text you put in the alt attribute will show instead. It also helps folks who are viewing your page with assistive technology such as a screen reader.
<a href="URL TO PAGE"><img src="IMAGE URL" alt="REPLACEMENT TEXT"></a>
Also, you will want to specify the size of the image so that space where the image will show will be set as the page loads. This way, the page won't jump as the images load. If you use very many images, this could be a big problem.
If you are creating a gallery page which will have all the same size images, you might prefer to put the styling of the images in the external css file. However, it can also be added to the code within the page also. You could style the width and height of the image with CSS or with HTML
<a href="URL TO PAGE"><img src="IMAGE URL" alt="REPLACEMENT TEXT" style="width:XXpx; height:XXpx"></a>
<a href="URL TO PAGE"><img src="IMAGE URL" alt="REPLACEMENT TEXT" width="XX" height="XX"></a>Notice, in both examples XX is used for the actual number. In the CSS, the number is follow by px which stands for pixels
We won't be adding more code to our index.html or style.css files with this lesson, but you can visit these sites to learn more about adding links or go on to the next lesson, if you'd rather.
Next: Floats Lesson 06 -->Lesson 01
Basic Web Page - Common Containers Lesson 02
Basic Web Page - Add Color with CSS Lesson 03
Basic Web Page - Using "id" to specify Lesson 04
Basic Web Page - Links Lesson 05
Basic Web Page - Floats Lesson 06
Basic Web Page - Font Face (Typeface) Lesson 07
Basic Web Page - Menu - Lesson 08
Just for Fun
If you are in the mood to just play with graphics or text, you might want to check out some links on the Fun Sites Hotlist