HTML Hyperlinks with Examples
How to create an HTML hyperlink?
HTML hyperlinks can be created by writing the following code You can copy and paste it into your website and change the values of parameters yourself. In this example, the hyperlink being created will lead to Google's homepage.
Given that you have a website residing at www.mywebsite.com, the following hyperlink links to the imaginary "About Me" section. Of course, in order for this to work you actually need to create the About Me page, save it in a file called aboutme.html and upload it to your hosting server (or test directly from your computer).
But there is much more to hyperlinks than meets the eye...
Common mistakes when creating hyperlinks
When specifying a link to an external website inside the HREF parameter of the hyperlink code it is important to always include http:// part. For example, if we simply typed www.google.com instead of http://www.google.com/ in the code above, the browser would treat it as a web page on our own website and would not go to google.com.
Examples of changing color of hyperlink using class and style parameters
I suggest changing the color of your hyperlink using a CSS class as shown in the example below:
The code above will work. In addition to that I recommend putting the code inside the style brackets into an external CSS file, and add that external file with an include command directly into your HTML document above the body tag. This page does not go into the detail of how to include your stylesheet externally.
However, it is not entirely necessary to use stylsheets to apply some color to your hyperlink. If you are in a rush, don't want to use CSS stylesheets, don't have access to the stylesheet of the page you are trying to modify or simply looking for an alternative way to change color of your hyperlink: you can use the style parameter to change the color of your hyperlink as seen in the example below:
The colored hyperlink code example above will change the color of your hyperlink to red.
Turning an image into a link
We can make an image on our website clickable by wrapping it with a hyperlink tag. To make our picture clickable we can write the following code:
In this example above we are using an image located at http://www.mywebsite.com/picture.jpg on the internet. I'm sure this location doesn't actually exist. It is your responsibility to link to an image that actually exists on the Internet, otherwise you will see a box with a red x inside, or another "picture no found" graphic based on which browser you are using. In the example above, clicking on the image will open Google's homepage.
Removing the blue border around images with links
Also note that I added a style to make the border width 0 pixels. This means that the browser will not display a blue border around your picture by default. Not all browsers show the border around images with a hyperlink, but doing this will eliminate the border from the browsers that do.
How to make clicking on a link open email client to write a message?
Sometimes you want to wrap your email address with a hyperlink tag on your web page to enable the visitors send you an email without having to open their email client. An email link it a special type of hyperlink. Clicking on it the default email client will open "write new email" window automatically, allowing the visitor to start writing you a message right away. So how do we create one?
The code I use above is the same code I use in the footer of this website. Clicking on my email address opens the default email client, as long as it is already configured on your computer. This email client could be a program such as Microsoft Outlook, gmail or Yahoo Mail.
Creating clickable shapes on top of an image with hyperlinks
Create clickable shapes with custom-defined geometry is often used for things like clicking on a state in the United States map for example. Each geometric shape defined by the state's shape could be clicked and the visitor would appear on a page with information about that state. How is something like this created? By using an image and the shape and coords parameter.
Learn to make websites yourself. Receive unique HTML tutorials for beginners from Greg, the author of this HTML article and many others. This content is not publically available on the website.
Thanks for visiting websitehomework.com - an website containing html tutorials covering topics such as how to make websites from scratch, css, javascript and other website-related subjects.