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

JavaScript style object and CurrentStyle object case study

HTML hyperlinks explained in detail

JavaScript style object and CurrentStyle object case study

Teach you how to get the pointer position in javascript

Detailed explanation of the transition attribute of simple CSS animation

jQuery implements the bouncing ball game

Nginx merges request connections and speeds up website access examples

Solution to the problem that the server cannot remotely connect to the database when installing the Pagoda Panel

Native js to realize bouncing ball

Detailed graphic explanation of how to install and completely delete MySQL by decompression

HTML basic structure_Powernode Java Academy

Vue implements the method example of tab routing switching component

Recommend

Vue3.0 adaptive operation of computers with different resolutions

Getting Started Tutorial on GDB in Linux

Detailed explanation of the differences between px, em, rem, %, vw, vh units in CSS

Server concurrency estimation formula and calculation method

Some points on using standard HTML codes in web page creation

MySQL series: Basic concepts of MySQL relational database

Steps to build a file server using Apache under Linux

HTML table markup tutorial (16): title horizontal alignment attribute ALIGN

Why should you be careful with Nginx's add_header directive?

MySQL 5.7.23 decompression version installation tutorial with pictures and text

Detailed explanation of nginx front-end distribution method based on $remote_addr

How to set Tomcat as an automatically started service? The quickest way

Compilation process analysis of Remax framework for writing small programs using React (recommended)

v-for directive in vue completes list rendering

Detailed explanation on how to get the IP address of a docker container