HTML code example: explain hyperlinks in detail

Time:2022-1-26

Hyperlinks are frequently used HTML elements in websites, because various pages of websites are connected by hyperlinks, and hyperlinks complete the jump between pages. Hyperlinks are the main means of interaction between browsers and servers, and will gradually deepen learning in the later technologies.Hyperlinks

Hyperlinks are frequently used HTML elements in websites, because various pages of websites are connected by hyperlinks, and hyperlinks complete the jump between pages. Hyperlinks are the main means of interaction between browsers and servers, and will gradually deepen learning in the later technologies.
– note: pictures can also be used as links, which will be studied in detail in the next chapter “pictures in web pages”.
4.5.1 adding links to text

The label of hyperlink is < a > < / a >, adding hyperlink to text is similar to other decoration labels. The linked text has its special style to distinguish it from other text. The default link style is blue text with underline. Hyperlinks jump to another page. The < a > < / a > tag has a href attribute that specifies the address of the new page. The address specified by href usually uses a relative address.
– note: in website development, documents are more commonly used than addresses.
Create a web page file in 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 > hyperlink settings < / Title >
</head>

<body>

<font size=”5″>

< a href = “ul_ol. HTM” > enter the setting page of the list</a>
</font>

</body>

</html>

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


Figure 4.19 hyperlink settings
The reader can see the default style of hyperlink from figure 4.19. When clicking the link in the page, the page will jump to UL in the same directory_ ol. Htm page, the list setting page in the previous section. When you click the browser’s back button to return to the a.htm page, the color of the text link turns purple to tell the viewer that the link has been visited.
4.5.2 modify the window opening method of the link

By default, hyperlinks open new pages by overwriting themselves. According to the different needs of visitors, readers can specify other ways of opening new windows with hyperlinks. The hyperlink tag provides the target attribute for setting. The values are_ Self (self overwrite, default)_ Blank (create a new window and open a new page)_ Top (when the whole browser window is opened, all frame structures will be ignored)_ Parent (open in the previous window).
– note:_ Top and_ Parent mode is used for frame pages, which will be explained in detail 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 of the link. The hyperlink tag provides the title attribute, which can easily prompt the viewer. The value of the title attribute is the prompt content. The prompt content will appear only when the viewer’s cursor stays on the hyperlink, which will not affect the neatness of 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>

<font size=”5″>

< a href = “ul_ol. HTM” target = “_blank” title = “Hello Reader, now you see the prompt text. Click this link to open a new window and jump to ul_ol.htm page.” > Enter the setting page of the list</a>
</font>

</body>

</html>

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


Figure 4.20 prompt text of hyperlink
4.5.4 what is an anchor

Many web articles have more content, resulting in long pages. Visitors need to constantly drag the scroll bar of the browser to find the required content. The anchor function of hyperlink can solve this problem. Anchor is an anchor from the ship. After the anchor is dropped, the ship is not easy to drift away and get lost. In fact, anchors are used to jump to different positions in a single page. Some places are called bookmarks.
The name attribute of the hyperlink tag is used to define the name of the anchor. Multiple anchors can be defined on a page. You can jump to the corresponding anchor according to the name through the href attribute of the hyperlink. Create a web page file named a in the D: \ web \ directory_ anchor. Htm, write the code as shown in code 4.20.
Code 4.20 hyperlink anchor: a_ anchor. htm
<html>

<head>

< title > hyperlink settings < / Title >
</head>

<body>

<font size=”5″>

< a name = “top” > here is the top anchor < / a > < br / >
< a href = “#1” > the first < / a > < br / >
< a href = “#2” > 2nd term < / a > < br / >
< a href = “#3” > the 3rd < / a > < br / >
< a href = “#4” > 4th < / a > < br / >
< a href = “#5” > the 5th < / a > < br / >
< a href = “#6” > the 6th < / a > < br / >
<h2>Successive presidents of the United States</h2>
● the first term (1789-1797) < a name = “1” > here is the anchor of the first term < / a > < br / >
Name: George Washington < br / >
George Washington<br />

Birth and death: 1732-1799 < br / >
Political party: Federation < br / >
● the 2nd term (1797-1801) < a name = “2” > here is the anchor of the 2nd term < / a > < br / >
Name: John Adams < br / >
John Adams<br />

Birth and death: 1735-1826 < br / >
Political party: Federation < br / >
● the 3rd term (1801-1809) < a name = “3” > here is the anchor of the 3rd term < / a > < br / >
Name: Thomas Jefferson < br / >
Thomas Jefferson<br />

Birth and death: 1743-1826 < br / >
Political party: Democratic Communist Party of China < br / >
● the 4th term (1809-1817) < a name = “4” > here is the anchor of the 4th term < / a > < br / >
Name: James Madison < br / >
James Madison<br />

Birth and death: 1751-1836 < br / >
Political party: Democratic Party of China < br / >
● the 5th term (1817-1825) < a name = “5” > here is the anchor of the 5th term < / a > < br / >
Name: James Monroe < br / >
James Monroe<br />

Birth and death: 1758-1831 < br / >
Political party: Democratic Party of China < br / >
</font>

</body>

</html>l>

Before the test, the reader can see from code 4.20 that the < a > < / a > tag is also used to define the anchor, and the name of the anchor is defined with the name attribute (the name is unlimited and can be customized). The link looking for the anchor uses the href attribute to specify the corresponding name, preceded by a # symbol. Enter in the browser address bar http://localhost/a_anchor.htm , the browsing effect is shown in Figure 4.21.


Figure 4.21 anchor of hyperlink
When the viewer clicks the hyperlink, the page will automatically scroll to the anchor location of the href attribute value name.
– note: the label defining the anchor < a name = “” > < / a > does not necessarily need specific content, but just a positioning.
4.5.5 links to e-mail, FTP and telnet

Hyperlinks can also further expand the functions of web pages. The more commonly used ones are e-mail, FTP and telnet connection. To complete the above functions, you only need to modify the href value of the hyperlink. The format of sending e-mail is:
< a href = “mailto: email address” > email me</a>
The email address must be complete, such as [email protected]
As mentioned earlier, HTTP protocol is adopted for browsing web pages, and FTP protocol is adopted for FTP server connection. The link format is as follows:
< a href = “FTP: / / server IP address or domain name” > link text</a>
The difference between FTP server link and web page link is that the protocol used is different. FTP requires login permission from the server administrator. However, some FTP servers can be accessed anonymously to obtain some public files. Similarly, the server connected to telnet protocol adopts a similar method, and the format is as follows:
< a href = “telnet: / / server IP address or domain name” > link text</a>
Telnet protocol is rarely used, and HTTP protocol is mostly used. Create a web page file in the D: \ web \ directory and name it mail Htm, write the code as shown in code 4.21.
Code 4.21 additional settings for Hyperlinks: mail htm
<html>

<head>

< title > other settings for hyperlinks < / Title >
</head>

<body>

<font size=”5″>

<a href=”mailto: [email protected] “Title =” Hello Reader, click here to send email. “> send me e-mail < / a > < br / >
<a href=” ftp://101.22.25.11 “Title =” Hello Reader, welcome to FTP server. “> connect to FTP server < / a > < br / >
<a href=” telnet://101.22.25.11 “Title =” Hello Reader, welcome to telnet server. “> connect to telnet server</a>
</font>

</body>

</html>s

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


Figure 4.22 other settings of hyperlinks