Links: Hyperlinks: HTML Web Development Tutorial Series Part 7

Links Hyperlinks

Links (Hyperlinks)

We’ll be working html links in this lesson, aka the “hyperlink“. We will create some text and image links that will take us either to another area on the same web page or to an external website. When you begin working on an complete website; you will use html hyperlinks to link from one page to another (one .html document to another).

HTML Hyperlink: Link To An External Website

Let’s start off with a simple text link to an external website. External meaning a completely different website from where the link is displayed. An html link is created with the a tag (anchor tag), and can have some attributes to make the link work in a few different ways. See example 1 below.

index.html Example 1: External Text Link With Attribute

html link

Displayed Page Example 1

html hyperlink display

Displayed Page Example 1-2: External Site

Link to a new tab external website

Starting with the index.html document, we have a P ELEMENT with an anchor element nested inside of it. The a tags surround the word “Google“, which will be our text link. Note: You can make a one work text link or multiple words. Any html element can be a link; even a paragraph. We have a few TAG ATTRIBUTES to go over. First, we have an href attribute. href is the name followed by an equals sign, a space, and the value inside of double quotes. The href attribute specifies a destination location (where the link will take the user); the value is the location. We have used a full URL for our location because we want our text hyperlink, Google, to take the user to Google’s main page. Our second attribute is the target attribute, and in the above example, we have used the value “_blank”. The target attribute is used to specify where to open the linked document. The value of _blank says that we want it to open in a new tab or window. A few other values that can be used on the target attribute are below with short explanations.

  • _blank: Opens in a new tab/window.
  • _self: Opens in the same window. (This is the default value if none are entered.)
  • _parent: Opens in the parent frame.
  • _top: Opens in the full body of the window.
  • framename: Opens in a named frame. framename is replaced with a frame that you named.
    We won’t go over this in this lesson because there is a lot more to learn before using this.

Besides _blank and _self, the other values will not be of much use to you right now. Back to our exercise. When we run the page, we can see that the word Google is underlined and blue. The browser adds this by default when it recognizes a hyperlink. A few things will normally happen when the web browser recognizes a link. First, when you hover over it the mouse pointer will turn into a hand and the link will change color. Second, links are underlined and blue. Third, when visited the link will be underlined and purple, and finally, an active link will be underlined and red. All of these colors, styles and hover effects can be changed with CSS. If you click on the text link in our example, the main page of the Google search engine will open in a new tab or window.

Linking With An Image

I have created a very simple image in a photo editor for our next example and saved it to my desktop. It’s just a blue rectangle with the text Google in it. See the images below for this example.

index.html Example 2: Image Link With Attributes

Image link

Displayed Page Example 2

Image hyperlink

Displayed Page Example 2-2: External Site

html link

We have quite a bit to go over in this example. Let’s start with the code. First, we create a p (paragraph) element with the text “Go To“. NOTE: We don’t have to add a space after the word To because the browser adds some margin space around the image by default. Next, we create our hyperlink by nesting an a (anchor) element inside of our p element. The attribute value for href is the Google URL. Finally, we nest an img (image) element inside of our anchor element. We’ll discuss the img attributes in order starting with the src. This is the source attribute and it specifies the location of our image. If you saved your image to the desktop; an easy way to find the file path (location) is by right-clicking on the image and selecting properties. The file path to the image will be labeled location. You add this to the source attribute in double quotes followed by a \ and the image name. In this example, the image name is googlebutton.png. Next in line is the alt attribute. The alt attribute is used to specify alternate text when the image can’t be found or displayed. In this case; if the image doesn’t load, the text Google Search will display. It is recommended that the alt attribute is added to all of your images. And finally, the style attribute specifies a width and height for our image. These are not required, but I wanted to include them in this lesson. This attribute is used for many styling options. In our example, we are just using it to resize our image. When we run the new code, we now have an image link that when clicked will take us to the main page of Google. It’s important to know that since we haven’t added a target attribute it will open in the same window or tab as our existing document. This is done by default. See Displayed Page Example 2-2.

We are going to use html links in one more way before we finish up, and that way is by linking to another area on the same web page. This is commonly used for very large web pages and is known as bookmarking.

index.html Example 3: Bookmark Links

hml bookmark link

Displayed Page Example 3

bookmark id display

Displayed Page Example 3-2: Jump To Bookmark

id link bookmark html css

In the final example, we use the id attribute to create a bookmark that will link to a specific part of our web page. To start, we have a few headings and p elements with a bunch of line breaks to simulate a long web page. I have also added some background colors to the p elements with the style attribute, style=”background-color: value; to make this example a little clearer. To create a bookmark on our web page, we add id=”bottom” to the opening h3 tag. Next, we create a text link to the bookmark by adding a href=”bottom”>Click to jump to Bottom of Page section</a> right after the opening body tag. When we run our new code, this text link displays at the very top of our web page. Clicking on it will jump to the h3 heading with the id attribute that has a name/value of bottom. NOTE: The id value must be EXACTLY the same as the href value. The href value needs to have a hatch tag ( # ) symbol in front of the name to be recognized as an id. The link will jump to wherever you put the bookmark, even if that bookmark is a single letter or an image, etc.

That’s it for this lesson on links. We have covered text and image links, linking to an external website, and bookmark links. We have also used some CSS code this lesson with the style and id attributes. To learn more CSS, click HERE. The source code is split up into three sections; one for each example. As always, thanks for reading, and I’ll see you next time.

index.html Source Code: Example 1


<!doctype html>
<html lang="en-US">
<head>
<title>HTML Links and Attributes</title>
</head>
<body>

<p>Click <a href="http://www.google.com" target="_blank">Google</a> to go to the search engine.</p>

</body>
</html>

index.html Source Code: Example 2


<!doctype html>
<html lang="en-US">
<head>
<title>HTML Links and Attributes</title>
</head>
<body>

<!-- ============================================================
THIS IS AN HTML COMMENT AND WILL BE IGNORED BY THE BROWSER. YOU WILL NEED TO ADD YOUR OWN
IMAGE LOCATION TO THE IMG SRC=" " ATTRIBUTE. IF YOU DON'T ADD A VALID LOCATION THE BROWSER
WILL DISPLAY THE ALT TEXT INSTEAD WHICH WILL STILL TAKE YOU TO GOOGLE WHEN CLICKED.
============================================================= -->

<p>Go To
<a href="http://www.google.com">
<img src="YOU NEED TO ADD YOUR IMAGE LOCATION HERE" alt="Google Search" style="width:75px; height:25px;">
</a>
</p></body>
</html>

index.html Source Code: Example 3


<!doctype html>
<html lang="en-US">
<head>
<title>HTML Links and Attributes</title>
</head>
<body>

<a href="#bottom">Click to jump to Bottom of Page section</a>
<h1>Top of Page</h1>
<p style="background-color: blue;">This paragraph is here to simulate a long web Page.
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p><h2>Middle of Page</h2>

<p style="background-color: red;">This paragraph is here to simulate a long web page.
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>

<h3 id="bottom">Bottom of Page</h3>
<p style="background-color: orange;">This paragraph is here to simulate a long web page.
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>

</body>
</html>

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: