HTML code example: Detailed explanation of hyperlinks

Author：Eve Cole Update Time：2025-06-11 12:32:01

Hyperlinks are HTML elements that are frequently used in websites, because various pages of the website are composed of hyperlinks, and hyperlinks complete the jump between pages. Hyperlinks are the main means of interaction between viewers and servers, and learning will be gradually deepened in the subsequent technologies. Hyperlink

— Note: Images can also be used as links, and you will learn in detail the pictures in the next chapter web page.

4.5.1 Add links to text

The tag of a hyperlink is <a></a>, adding a hyperlink to the text is similar to other modified tags. The text after the link has its own special style to distinguish it from other texts. The default link style is blue text and underlined. The hyperlink is redirected to another page, and the <a></a> tag has a href attribute that is responsible for specifying the address of the new page. The address specified by href generally uses the relative address.

— Note: In website development, documents are more commonly used relative to addresses.

Create a web page file in the D:/web/ directory, named a.htm, and write the code as shown in code 4.18.

Code 4.18 Hyperlink settings: a.htm

<html>

<head>

<title>Settings of hyperlinks</title>

</head>

<body>

<a href=ul_ol.htm>Enter the settings page of the list</a>

</body>

</html>

Enter http://localhost/a.htm in the browser address bar, and the browsing effect is shown in Figure 4.19.

Figure 4.19 Hyperlink settings

Readers can see the default style of the hyperlink in Figure 4.19. When you click the link in the page, the page will jump to the ul_ol.htm page in the same directory, that is, the list settings page in the previous section. When you click the back button of the browser and return to the a.htm page, the color of the text link turns purple, which tells the viewer that this link has been visited.

4.5.2 Modify the link's window opening method

By default, the way hyperlinks open new pages is self-overlay. Depending on the different needs of the viewer, readers can specify other ways of opening new windows for the hyperlink. The hyperlink tag provides the target attribute for setting, with values such as _self (self overwrite, default), _blank (create a new window to open a new page), _top (open in the entire browser window, all frame structures will be ignored), and _parent (open in the previous window).

— Note: The _top and _parent methods are used for frame pages, and there are detailed explanations in the following chapters.

4.5.3 Add prompt text to the link

In many cases, the text of the hyperlink is not enough to describe the content to be linked. The hyperlink tag provides title attributes to facilitate prompts for viewers. The value of the title attribute is the prompt content. The prompt content will appear when the browser's cursor stays on the hyperlink, which will not affect the neatness of the page layout. Modify the a.htm web page file and write the code as shown in code 4.19.

Code 4.19 Hyperlink settings: a.htm

<html>

<head>

<title>Settings of hyperlinks</title>

</head>

<body>

<a href=ul_ol.htm target=_blank title=Hello reader, what you see now is the prompt text. Click this link to jump to the ul_ol.htm page. >Enter the settings page of the list</a>

</body>

</html>

Enter http://localhost/a.htm in the browser address bar, and the browsing effect is shown in Figure 4.20.

Figure 4.20 Hyperlink prompt text

4.5.4 What is an anchor

Many web articles have a lot of content, which leads to a long page. Viewers need to constantly drag the browser's scrollbar to find the content they need. The anchor function of the hyperlink can solve this problem. The anchor is an anchor that is drawn from the ship. After the anchor is thrown down, the ship will not easily float away or get lost. In fact, anchors are used to jump at different locations within a single page, and in some places they are called bookmarks.

The name attribute of the hyperlink tag is used to define the name of the anchor. One page can define multiple anchors. Through the href attribute of the hyperlink, you can jump to the corresponding anchor according to the name. Create a web page file in the D:/web/ directory, named a_anchor.htm, and write the code as shown in code 4.20.

Code 4.20 Hyperlink anchor: a_anchor.htm

<html>

<head>

<title>Settings of hyperlinks</title>

</head>

<body>

<a name=top>Here is the anchor at the top</a>

<a href=#4>The 4th person</a>

<h2>Successful Presidents of the United States</h2>

●The first person (1789-1797)<a name=1>This is the anchor of the first person</a>

Name: George Washington

George Washington

Born and Died: 1732-1799

Political Party:: Federation

●The second person (1797-1801)<a name=2>Here is the anchor of the second person</a>

Name: John Adams

John Adams

Born and Died: 1735-1826

Political Party:: Federation

●The third person (1801-1809)<a name=3>Here is the anchor of the third person</a>

Name: Thomas Jefferson

Thomas Jefferson

Born and Died: 1743-1826

Political Party::People's Communist Party

●The 4th post (1809-1817)<a name=4>Here is the anchor of the 4th post</a>

Name: James Madison

James Madison

Born and Died: 1751-1836

Political Party: The People's Republic of China

●The 5th post (1817-1825)<a name=5>This is the anchor of the 5th post</a>

Name: James Monroe

James Monroe

Born and Died: 1758-1831

Political Party: The People's Republic of China

</body>

</html>l>

Before the test, readers can see from code 4.20 that the <a></a> tag is used to define the anchor, and the name of the anchor is defined with the name attribute (the name has no restrictions, and can be customized). The link to search for anchors uses the href attribute to specify the corresponding name, and a # symbol should be added before the name. Enter http://localhost/a_anchor.htm in the browser address bar, and the browsing effect is shown in Figure 4.21.

Figure 4.21 Hyperlink anchor

When the viewer clicks on the hyperlink, the page will automatically scroll to the anchor position of the href attribute value name.

— Note: The label defining the anchor does not necessarily require specific content, it is just a positioning.

4.5.5 Email, FTP and Telnet links

Hyperlinks can further expand the functions of web pages, and the more commonly used ones are email, FTP and Telnet connections. To complete the above functions, you only need to modify the href value of the hyperlink. The format for sending an email is:

<a href = mailto:email address>send me email</a>

The email address must be complete, such as [email protected].

As mentioned earlier, the http protocol is used to browse web pages, while the FTP server is connected by FTP protocol. The link format is as follows:

<a href = ftp://server IP address or domain name>linked text</a>

The difference between FTP server links and web links is that the protocols used are different. FTP requires login permission from the server administrator. However, some FTP servers can be accessed anonymously, thus obtaining some public files. Similarly, the server connected to the Telnet protocol also adopts a similar method, the format is as follows:

<a href = telnet://server IP address or domain name>linked text</a>

The telnet protocol is very few, and most of it is used with the http protocol. Create a web page file in the D:/web/ directory, named mail.htm, and write the code as shown in code 4.21.

Code 4.21 Other settings for hyperlinks: mail.htm

<html>

<head>

<title>Other settings for hyperlinks</title>

</head>

<body>

<a href=mailto:[email protected] title=Hello readers, click here to send an email. >Send me an email</a>

<a href=ftp://101.22.25.11 title=Hello readers, welcome to the FTP server. >Connect the FTP server</a>

<a href=telnet://101.22.25.11 title=Hello readers, welcome to the Telnet server. >Connect Telnet Server</a>

</body>

</html>s

Enter http://localhost/mail.htm in the browser address bar, and the browsing effect is shown in Figure 4.22.

Figure 4.22 Other settings for hyperlinks