HTML code example: detailed explanation of hyperlinks

Hyperlinks are the most frequently used HTML elements on websites, because all the pages of a website are connected by hyperlinks, which enable the jump between pages. Hyperlinks are the main means of interaction between browsers and servers, and we will gradually deepen our study of them in the following technologies. Hyperlink Hyperlink is a frequently used HTML element in websites, because various pages of a website are connected by hyperlinks, which complete the jump between pages. Hyperlinks are the main means of interaction between browsers and servers, and we will gradually deepen our study of them in the following technologies.
— Note: Pictures can also be used as links, which will be studied in detail in the next chapter "Pictures on Web Pages".
4.5.1 Add a link to text The tag for a hyperlink is <a></a>. Adding a hyperlink to text is similar to other modification tags. The text after adding a link has its own special style to distinguish it from other text. The default link style is blue text with an underline. A hyperlink jumps to another page. The <a></a> tag has an href attribute that is responsible for specifying the address of the new page. The address specified by href generally uses a relative address.
— Note: In website development, document-relative addresses are more commonly used.
Create a web page file in the D:\web\ directory, name it a.htm, and write the code as shown in Code 4.18.
Code 4.18 Hyperlink settings: a.htm
<html>
<head>
<title>Hyperlink Settings</title>
</head>
<body>

<a href="ul_ol.htm">Enter the list settings page</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 hyperlinks from Figure 4.19. When you click a link in the page, the page will jump to the ul_ol.htm page in the same directory, which 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 to tell the viewer that this link has been visited.
4.5.2 Modify the window opening method of the link By default, the hyperlink opens a new page by overwriting itself. Depending on the different needs of the browser, readers can specify other ways of opening new windows for hyperlinks. The hyperlink tag provides a target attribute for setting, with values of _self (self-coverage, default), _blank (create a new window to open a new page), _top (open in the entire browser window, ignoring all frame structures), and _parent (open in the upper level window).
— Note: The _top and _parent methods are used for frame pages, which are explained in detail in the following chapters.
4.5.3 Add prompt text to the link In many cases, the text of a hyperlink is not enough to describe the content of the link. The hyperlink tag provides a title attribute that can easily provide prompts to viewers. The value of the title attribute is the prompt content. When the viewer's cursor stays on the hyperlink, the prompt content will appear, 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>Hyperlink Settings</title>
</head>
<body>

<a href="ul_ol.htm" target="_blank" title="Hello, readers, you are now seeing the prompt text. Click this link to open a new window to jump to the ul_ol.htm page.">Enter the list settings page</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 makes the page very long. Viewers need to constantly drag the browser's scroll bar to find the content they need. The anchor function of the hyperlink can solve this problem. The anchor is derived from the anchor on the ship. After the anchor is dropped, the ship will not easily drift away or get lost. In fact, anchors are used to jump to different locations within a single page, and some places are called bookmarks.
The name attribute of the hyperlink tag is used to define the name of the anchor. A page can define multiple anchors. The href attribute of the hyperlink can jump to the corresponding anchor according to the name. Create a web page file in the D:\web\ directory, name it a_anchor.htm, and write the code as shown in Code 4.20.
Listing 4.20 Hyperlink anchor: a_anchor.htm
<html>
<head>
<title>Hyperlink Settings</title>
</head>
<body>

<a name="top">This is the top anchor</a> 
<a href="#1">No. 1</a> 
<a href="#2">No. 2</a> 
<a href="#3">The 3rd</a> 
<a href="#4">The 4th</a> 
<a href="#5">The 5th</a> 
<a href="#6">The 6th</a> 
<h2>U.S. Presidents</h2>
●1st (1789-1797) <a name="1">Here is the 1st anchor</a> 
Name: George Washington 
George Washington 
Born: 1732-1799 
Political Party: Federal 
●The 2nd (1797-1801)<a name="2">Here is the 2nd anchor</a> 
Name: John Adams 
John Adams 
Born: 1735-1826 
Political Party: Federal 
●The 3rd (1801-1809) <a name="3">Here is the 3rd anchor</a> 
Name: Thomas Jefferson 
Thomas Jefferson 
Born: 1743-1826 
Political Party: Democratic Progressive Party 
●The 4th (1809-1817) <a name="4">Here is the 4th anchor</a> 
Name: James Madison 
James Madison 
Born: 1751-1836 
Political Party: Democratic Progressive Party 
●The 5th (1817-1825) <a name="5">Here is the 5th anchor</a> 
Name: James Monroe 
James Monroe 
Born: 1758-1831 
Political Party: Democratic Progressive Party 

</body>
</html>l>
Before testing, readers can see from Code 4.20 that the anchor is also defined using the <a></a> tag, and the anchor's name is defined using the name attribute (the name is not limited and can be customized). To find an anchor link, use the href attribute to specify the corresponding name, and add a # symbol in front of 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 Anchor of a hyperlink When the viewer clicks the hyperlink, the page will automatically scroll to the anchor position of the href attribute value name.
— Note: The tag <a name=""></a> that defines the anchor does not necessarily need specific content, it just serves as a positioning.
4.5.5 Links to email, FTP and Telnet Hyperlinks can further expand the functions of web pages. 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 an email</a>
The email address must be complete, such as [email protected].
As mentioned earlier, web browsing uses the http protocol, while the FTP server uses the FTP protocol to connect. The link format is as follows:
<a href = "ftp://server IP address or domain name">Link text</a>
The difference between FTP server links and web page links is the different protocols used. FTP requires login permission from the server administrator. However, some FTP servers can be accessed anonymously, so some public files can be obtained. Similarly, connecting to a server using the Telnet protocol uses a similar method, the format is as follows:
<a href = "telnet://server IP address or domain name">Link text</a>
The telnet protocol is rarely used, and the http protocol is mostly used. Create a web page file in the D:\web\ directory, name it mail.htm, and write the code as shown in Code 4.21.
Listing 4.21 Other settings for the hyperlink: 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 e-mail.">Send me an e-mail</a> 
<a href="ftp://101.22.25.11" title="Hello readers, welcome to the FTP server.">Connect to the FTP server</a> 
<a href="telnet://101.22.25.11" title="Hello, readers, welcome to the Telnet server.">Connect to the 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

<<: Learning Vue instructions

>>: Use scripts to package and upload Docker images with one click

Build a severe weather real-time warning system with Node.JS

A brief discussion on the differences and summary of the three floating point types of float, double and decimal in MySQL

Blog

HTML code example: detailed explanation of hyperlinks

Build a severe weather real-time warning system with Node.JS

Summary of important components of MySQL InnoDB

Solution to MySQL being unable to start due to excessive memory configuration

Explanation of CAST and CONVERT functions for type conversion in MySQL database

MySQL REVOKE to delete user permissions

HTML head tag detailed introduction

MySQL data analysis storage engine example explanation

A brief discussion on the maximum number of open files for MySQL system users

Do you know how to use the flash wmode attribute in web pages?

A brief discussion on the differences and summary of the three floating point types of float, double and decimal in MySQL

Recommend

Prometheus monitors MySQL using grafana display

Detailed explanation of basic syntax and data types of JavaScript

Problems installing TensorRT in docker container

Operations of communication between Docker containers and external network communication

How to install vncserver in Ubuntu 20.04

Detailed explanation of HTML onfocus gain focus and onblur lose focus events

Mysql SQL statement operation to add or modify primary key

How to install mysql on centos and set up remote access

Detailed explanation of MySQL execution principle, logical layering, and changing database processing engine

Detailed explanation of the difference between routing hooks in Vue2.x and Vue3.x

Gradient slide effect implemented by CSS3

Linux nohup command principle and example analysis

Windows platform configuration 5.7 version + MySQL database service

Pure CSS to achieve the text icon function by taking the first character of the string

How to download excel stream files and set download file name in vue