Links / Changing Link Colors
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com’s entire library of video tutorials.
Learn More
Subtitles of the Movie
Let me now review the links for controlling the color of your links. By default links will appear in the following colors in all browsers. An unvisited link will be underlined and blue. A visited link or a link that you've already clicked on and visited will be underlined and purple. An active link, notice that I'm activating this link right now by clicking on it, will be underlined and red. But these colors can be controlled by HTML so let me review these techniques here. You can also control colors for all the links on a page or colors for individual links on a page. The general color of text links are specified in the body tag like this right here; body link equals and then in quotation marks hexadecimal value V link equals another hexadecimal value in quotes and then a link also in quotes and as a hexadecimal value. Link represents the standard link color. This is the link to a page the visitor hasn't seen yet or hasn't clicked on yet. The standard color is blue, which will be 000FF. Let's go ahead and type that in there, pound sign 0000 and then two capital Fs like so. Let's go ahead and save this document and have a look at this document in the browser. Here is how this page would look like in the browser. If I click on the link and actually visit the link, in this case I'm going to my website, GeekManuals.com and then go back and revisit the page. Notice that the link color has changed. In this case it's going to be the v link value right here. That's a gray color and the a link is the active link. This is the color of the link when the mouse is on the link and pressing on it. In this case the active link here is going to be red and it's red when I'm pressing on that link. However, you might want one or more links to have different colors than the rest of the page. There are several ways to accomplish this. You can place font tags between the anchor HREF opening tag and the a closing tag here. This method will work on all browsers but the font element is not supported in XHTML 1.0 and HTML 5 so I'm not recommending its use. The second technique would look like this script here. You have an a HREF attribute with your link and then use the style equals color. Put the color in quotation marks and then you have a colon RGB and then the RGB value 0 -255 -0 and then the link text right here. Then close the a tag and then there is the rest of your content for your page. This in the browser in Firefox will look like this. Click here to go to Yahoo. The here is in green and here is a link based on this RGB value right there. Let's go ahead and change that to 255 comma 255 0. Save it and reload this page in Firefox. It goes to yellow and let's do 255 0 comma 0. Save this, reload it and it changes again back to red or changes to red I should say. Another method is to use CSS to define the colors. You define the link color using the a colon link property, accept the color. A colon visited will control the color of visited links. A colon active will control the color of active links and there is a fourth property here, a hover; it's a really nice one. This will actually give you a rollover color specified by this color here when the mouse is over the link. More on each of these techniques later in the CSS section of the course. Now, there are some differences between HTML 4 and HTML 5 in the way you'll implement the a tag. In HTML 4.01 the anchor tag could be either a hyperlink or an anchor. This was determined by the HREF attribute. In HTML 5, the a tag is always a hyperlink. If it has no HREF attribute, it will only be a placeholder for the hyperlink. HTML 5 has some new attributes for the anchor tag and some HTML 4 attributes are no longer supported in HTML 5. Here's a list of the more important attributes in HTML 5 for the anchor tag. The HREF, the HREFLANG is the language tag here or language attribute. This specifies the base language of the target URL. Media provides a media query value. This specifies the media type of the target URL. The ping attribute is a URL. This is a space-separated list of URLs that gets notified when the user follows the hyperlink. The relative attribute or REL provides alternative archives. The target attribute I've already defined; blank, parent, self or top. This tells the browser where to open the target URL. And the last attribute is the type attribute. This is a mime-type value. This specifies the mime type of the target URL. MIME stand for multipurpose Internet mail extension. This tells the browser what kind of file you're linking to; audio, video, text file and so on. That will complete then this section of the tutorial on HTML links. In this section you've learned about the anchor element or the a tag, absolute versus relative links, how to write relative links. You've learned about how to set up your file and folder structure as well as some linking tips to stay out of linking problems. You've learned about the HREF and the target attributes, learned how to write internal links using the name attribute and you've also learned how to change your link colors.
Tutorial Information
| Course: | HTML 4/5 with CSS |
| Author: | James Gonzalez |
| SKU: | 34077 |
| ISBN: | 1-935320-93-9 |
| Release Date: | 2009-12-31 |
| Duration: | 10.5 hrs / 142 lessons |
| Work Files: |
Yes |
| Captions: | Available on CD and Online University |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 98,729 Video Tutorials (23,265 free)
- Video Available as Flash or QuickTime
- Over 1026 Courses
- $30 for One Month Access
- Multi-User Discounts Available
United States 