A hyperlink is a graphic or a piece of text in an Internet document that can connect readers to another webpage, or another portion of a document. Web users will usually find at least one hyperlink on every webpage. The most simple form of these is called embedded text or an embedded link.
In this instance, a hyperlink will show up as a single word or group of words that will usually be marked as underlined, and are frequently blue in color. Clicking on the hyperlink may take one to another part of the page, or it may open another Internet page
· Highlight the website within the internet browser like Internet Explorer.
· Copy it by right clicking on your mouse and choosing COPY.
· Paste it in the place you wish use it in like MS Word, an email or any of your website content it can be even a word, by right clicking again and choosing PASTE.
· Make sure www. is in the address
http://www.mywebsite.com
· Hit enter to activate it. It should turn blue then the link is ready.
· If that is not working try using just the www.mywebsite.com.
The hyperlink typically uses the following syntax:
Example 1A
...where valid web address equals any existing Uniform Resource Locator (URL).
The following example displays the source code used to create a hyperlink which, if clicked on, would load the web page you are currently viewing:
Example 1B
Creating Hyperlinks
The portion highlighted in red represents the URL which typically appears in the Address bar of your web browser. (If you're using Internet Explorer, hold down the Alt key and then press 'D' to highlight the URL. Press Ctrl + C to copy it.)
Link Colors
Clicking on hyperlinks with your mouse pointer will typically load the designated web page in your web browser. Hyperlinks can also be used to view images, download files, run various media such as Flash presentations, and activate Javascripts. All these and more represent the targets of the hyperlink. Hyperlink text is usually underlined and also carries a default color coding to indicate the current status of the hyperlink. The following illustrates the default color coding for the four basic states of a hyperlink:
Unvisited The user has not visited the target of the hyperlink.
Visited The user has visited the target of the hyperlink.
Hover The user's mouse pointer is currently hovering over the hyperlink.
Active The hyperlink is currently being activated (by clicking on it).
If you are using Internet Explorer, you can access a dialog to view and modify the default color coding for hyperlinks by clicking on Tools » Internet Options » Colors. These colors will be used for web pages that do not specify in the source code which colors to use for hyperlinks.
To specifically set the color of the hyperlinks on web page you are creating, you can apply certain attributes to the body element
ATTRIBUTE>EFFECT>VALUE
link>Sets the color for unvisited hyperlinks>Any legal color value*
vlink>Sets the color for visited hyperlink>Any legal color value*
alink>Sets the color for active hyperlinks>Any legal color value*
alink>Sets the color for active hyperlinks>Any legal color value*
The above attributes with their associated values (*same as font color values) are placed in the tag to define the link colors on a web page. Example:
Example 2 - SOURCE CODE
green" vlink="olive" alink="maroon">
Example 2 would produce the following result on your web page:
Example 2 - RESULT
Unvisited links would appear in green
Visited links would appear in olive
Activated links would appear in maroon
Anatomy of a URL
The URL, which stands for Uniform Resource Locator, is basically the address of your hyperlink's target. Using the URL of the web page you are currently viewing, let's dissect it and take a closer look. First, here's the full URL:
http://www.bloggerearningbook.blogspot.com/2010/06/get-code.html
Now let's break it down:
http://
Protocol ~ this defines how the information (in this case, a web page) travels over the internet. http = Hyper Text Transfer Protocol. Another common protocol is ftp (File Transfer Protocol)
www.
Host name ~ this is typically www. which stands for World Wide Web and refers to the gargantuan international collection of interlinked web pages.
bloggerearningbook
Second Level Domain (SLD) ~ this is the name that I selected to define this web site. This —combined with the Top Level Domain (see below)— is what is often referred to as the "domain name".
.blogspot.com
Top Level Domain (TLD) ~ this is the suffix I selected for my domain name to categorize this website. TLDs often employ a country-specific code (e.g., .ca = Canada) and other times are reserved or restricted for a specific use (e.g., .biz is restricted to businesses).
/format_text/
Subfolder ~ our web host assigns us a root directory to store our web pages in. /format_text/ is the subfolder in that root directory within which the current web page resides.
get-code.html
File name ~ this is the name of the electronic text file that contains the source code of the web page you are currently reading.
#url
Fragment identifier ~ this is a special in-page identifier. (Note: This may or may not appear depending on how you got to this part of the web page). This is used in hyperlinks leading to a specific location on a web page.
Altogether, this represents what is known as an absolute address. Likewise, the absolute address of any web page you visit on the World Wide Web will appear in the Address bar running across the top of your browser and this will represent a valid web address provided that the web page loaded successfully. You may use any valid web address as the value for the href attribute (as per above) to create a hyperlink.
If you wish to create hyperlinks (also known simply as links) in between pages on your own web site, you can alternatively use what is known as relative addressing. With relative addressing, it is only necessary to use the name of the web page file you are linking to as the value in the href attribute provided that the page containing the link resides in the same folder as the page acting as the link's target.
Linking to a Specific Location on a Web Page
So wondering how to create hyperlinks that —when activated— jump to a specific location on a web page? No problem. Let's start with the simplest example of this which is a hyperlink which leads to another part of the same page. For this you need only to use the standard hyperlink code and then use a fragment identifier as the value of the href attribute. The fragment identifier can be any name you like and must be preceded by the hash mark '#'. The following code will create a hyperlink that uses 'photos' as the fragment identifier:
Now all we have to do is create the code that will serve as the destination of our fragment identifier. This is inserted at the place in our web page that we want our hyperlink to jump to when it's activated (clicked). To do this, we need to use the name attribute in the A element. This will create what is known as a 'named anchor'. Here's the code you would use:
Note that the tags are typically empty (i.e., no content is required between the start and end tag).
You can also create a hyperlink on one page that leads to a specific location on another page by using the same setup. You only need to append the fragment identifier on to the end of the URL used as the value for the href attribute. For example, if the named anchor 'photos' (the link destination) existed on a page called "vacation.htm" then the hyperlink that leads to it from another page would be created as follows:
Clicking on this link from another page would first load the 'vacation.htm' page and then jump to the part of the page where the named anchor 'photos' is located.
Creating named anchors and using fragment identifiers is really useful when you have a tendency to cram a lot of information on one page (like I do) and you would like to help readers out by enabling them to quickly locate specific sections.
0 comments:
Post a Comment