HTML hyperlinks explained in detail

Hyperlink

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.

— 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 Adding links to text

The tag for a hyperlink is <a></a>. Adding a hyperlink to text is similar to other decorative 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, hyperlinks that open new pages overwrite themselves. 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 Adding hint text to links

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 give viewers a hint. 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>

<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 Hyperlink anchor

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 Email, FTP and Telnet links

Hyperlinks can further expand the functions of web pages. Commonly used ones include 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:

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:

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="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

<<: How to distinguish MySQL's innodb_flush_log_at_trx_commit and sync_binlog

>>: Example code for implementing bottom alignment in multiple ways with CSS

21 MySQL standardization and optimization best practices!

HTML hyperlinks explained in detail

21 MySQL standardization and optimization best practices!

A brief discussion on read-only and disabled attributes in forms

Detailed explanation of three ways to cut catalina.out logs in tomcat

Detailed explanation of how Tomcat implements asynchronous Servlet

JS Object constructor Object.freeze

Perfect solution for theme switching based on Css Variable (recommended)

Detailed explanation of Angular component life cycle (I)

Analysis and solution of MySQL connection throwing Authentication Failed error

Detailed explanation of the concept of docker container layers

Use a few interview questions to look at the JavaScript execution mechanism

Recommend

Solve the problem that the Node.js mysql client does not support the authentication protocol

Analysis of the principles and usage of Linux hard links and soft links

Native JS to implement the aircraft war game

Some CSS questions you may be asked during an interview

Vue state management: using Pinia instead of Vuex

Detailed explanation of docker command to backup linux system

MySQL 5.7.17 installation and configuration method graphic tutorial under win7

The principle and application of ES6 deconstruction assignment

Add a floating prompt for the header icon in the ElementUI table

JavaScript setTimeout and setTimeinterval use cases explained

Example of implementing QR code scanning effects with CSS3

Sample code for the test script for indexes and locks at RR and RC isolation levels

Jenkins builds Docker images and pushes them to Harbor warehouse

Comparison of the use of form element attributes readonly and disabled

The difference and usage of Vue2 and Vue3 brother component communication bus