HTML web page hyperlink tag learning tutorial
Attributes of link tags
Links are one of the most important elements in a web page and the soul of a website. A website is composed of multiple pages, and the pages rely on links to determine the mutual navigation relationship. Each web page has a unique address, which is called url (Uniform Resource Locator: Universal Resource Identifier). Enter http://www.jb51.net in the address bar and press Enter. The main page of the Script House website will open. As you can see, there are multiple columns, multiple news items, etc. on the page. The different columns at the top are text links. Although the
link tag occupies an irreplaceable position in website design and production, there is only one tag, and that is the tag. The link applications introduced on this site are all based on the tag.
The attributes of the link tag are shown in the table below
Attribute Description href specifies the link address name names the link title gives the link prompt text target specifies the target window of the link accesskey link hotkey
About the path
Each file has its own storage location and path. Understanding the path relationship between a file and the file to be linked is the foundation for creating a link. url—Uniform Resource Locator, refers to the independent address that each website has. Every web page under the same website belongs to the same address, but when creating a web page, it is neither possible nor necessary to enter the complete address for each link. We only need to determine the relative path relationship between the current document and the site root directory. Therefore links can be divided into the following three types: Absolute path
such as http://www.jb51.net Relative path
such as news/default.htm root path
Such as /website/news/default.htm
Before understanding these three address forms, you must first understand two other concepts: internal links and external links
Internal and external are relative to the site folder. If the link points to a file within the site folder, it is an internal link. If the link points outside the site folder, it is called an external link. When adding external links, the absolute address mentioned below will be used; when adding internal links, the root directory relative address and file relative address mentioned below will be used.
These three types of links are introduced below:

Absolute path

Absolute path provides a complete path to the file, including adapted protocols, such as http ,Ftp,rtsp, etc. Common ones are:

http://www.sohu.com

ftp://202.136. 254.1

When linking to files on other websites, absolute links must be used. Relative paths

Relative links are best for internal links on a website. As long as they are under the same website, even if they are not in the same directory, relative links are very suitable. File relative addresses are an ideal form of writing internal links. Relative addresses are free to build links between files as long as they are within a site folder. This form of address takes advantage of the relative relationship between the two files that build the link and is not affected by the location of the server where the site folder is located. This form of writing therefore omits the same part of the absolute address. The advantage of this is that when the server address where the site folder is located changes, all internal links of the folder (if this address form is used) will not cause problems.

The method of using relative links is: If linking to the same directory, just enter the name of the document to be linked. To link to a file in a lower-level directory, just enter the directory name, then add "/" and then enter the file name. If you want to link to a file in the upper-level directory, enter ".../" first, then enter the directory name and file name. Root path

Root relative addresses are also suitable for creating internal links, but in most cases, this form of address is not recommended. It is used in the following situations: When the site is very large and is hosted on several servers When several sites are placed on one server at the same time

The writing form of the relative address of the root directory is also very simple. First, it starts with a slash, which represents the root directory, then the folder name is written, and finally the file name is written. The root path starts with "/ "Start, then the directory name under the root directory.
#p#
Make internal links
The so-called internal links refer to the link relationships between different html pages within the same website. When establishing internal links on a website, consideration should be given to making the links have a clear navigation structure so that users can easily find the HTML files of the required content.
Next we create three pages. In the first 8-1.htm page, create links to the two pages 8-1-1.htm and 8-1-2.htm, and add them to the two pages. Create a link back to the 8-1.htm page from each linked page. The directory relationship of the three pages is as follows:
8-1.htm and 8-1-1.htm are stored in the root directory of the website, and 8-1-2.htm is stored in the test directory. Basic syntax Link textExplanation of syntax
Specify the address through the href attribute, File_name is the path of the file to be linked, and "link text" is the text content clicked by the mouse. File example: 8-1.htm
Create two links through the tag, linking to two other html pages respectively.
01
02
03
04
05
06
07
08

09
10

Mainstream web design software

11

At present, web page technology has entered a new stage. Today's web pages are no longer a collection of pictures and boring text. What people are now pursuing is the dynamic effect and interactivity of web pages. Macromedia's three musketeers of web design software, Dreamweaver, Flash, and Fireworks, are outstanding representatives of interactive web design. Its latest version, mx 2004 inherits the advantages of the previous version and further integrates functions, which is very suitable for the needs of web design and website construction.

12 Web page production software Dreamweaver mx 2004
13

14 Web animation software Flash mx 2004
15
16 File description
Line 12 defines the link to the sibling page of 8-1-1.htm, and line 14 defines the link to the 8-1-2.htm page in the test directory. File example: 8-1-1.htm
This file is the "Webpage Production Software Dreamweaver mx 2004" page, and a link back to the 8-1.htm page is established through the tag.
01
02
03
04
05
06
07
08
09
10

Dreamweaver mx 2004

11 Dreamweaver mx As a representative of web design software, 2004 has two core functions: site management and page production. If you also have the ideal of dream weaving, then this software is undoubtedly the best way to help you realize your dream. Complete visual editing, excellent code control, complete site planning and management, and extraordinary dynamic effect design all provide designers with a convenient way. The mx version of the software further integrates dynamic website and traditional static page functions, which undoubtedly provides more implementation methods for making websites.
12

13 Return
14
15 File description
Line 13 defines the link to the same level page of 8-1.htm. File example: 8-1-2.htm
This file is the "Web animation software Flash mx 2004" page, and a link back to the 8-1.htm page is established through the tag.
01
02
03
04
05
06
07
08

09
10

Flash mx 2004

11 Flash mx As a representative of web vector interactive animation software, 2004 provides three major functions: graphic drawing, animation production and interaction. Once you master the core of this software, you will have the ability to act as a flash user while surfing the Internet. More and more personal and commercial websites use Flash technology, advertising banners, animated titles, MTV, and interactive games. The broad applications provide a broad development platform for Flash learners to learn Flash. mx 2004 software is an even more tempting process.
12

13 Return
14
15 File description
Line 13 defines the link to the previous page of 8-1.htm.
#p#
Set the target window of the link
After clicking the link, the default browser window is the original window. We can specify the target window opened by this link, such as a new window, etc. Basic syntax Link textSyntax explanation
Define the target window through target. The value of value is as shown in the following table. Attribute value Description _parent Opens in the previous window. Frames that generally use framing often use _blank to open in a new window and _self to open in the same frame or window. This generally does not need to be set _top Open in the entire window of the browser, ignoring any frames. File example: 8-2.htm
Set the target window of the link through the target attribute.
01
02
03
04
05
06
07
08

09
10

Mainstream web design software

11 At present, web page technology has entered a new stage. Today's web pages are no longer a collection of pictures and boring text. What people are now pursuing is the dynamic effect and interactivity of web pages. Macromweaver's three musketeers of web design software, Dreamweaver, Flash, and Fireworks, are outstanding representatives of interactive web design. Its latest version, mx 2004 inherits the advantages of the previous version and further integrates functions, which is very suitable for the needs of web design and website construction.

12 Web page production software Dreamweaver mx 2004
13

14 Web animation software Flash mx 2004
15
16 File Description
Line 12 defines the link page to be displayed in the original window, and line 14 defines the link page to be displayed in the new window.
#p#
Create bookmark link
When browsing a page, if the page has a lot of content and the page is too long, you need to keep dragging the scroll bar while browsing, which is very inconvenient. If you want to find specific content, it is even more inconvenient. At this time, if a table of contents can be created on this web page or another page, the viewer can automatically jump to the corresponding position of the web page for reading by clicking on an item in the catalog. It should be very convenient, and it can also be set in the page. Define a link such as "Return to Home Page". This is called a bookmark link.
There are two steps to establishing a bookmark link: one is to create a bookmark, and the other is to create a link for the bookmark.
Let’s create a software introduction page containing the content of the Three Musketeers of web design, and create a bookmark for each software. This bookmark is the location to be jumped to later. In other words, this bookmark determines the link guidance basis within a page. Basic syntax TextFile example: 8-3.htm
Create bookmark links for the three paragraphs of title text in the page

.
01
02
03
04
05
06
07
08

09
10

Mainstream web design software

11

Dreamweaver mx 2004

12 Dreamweaver mx As a representative of web design software, 2004 has two core functions: site management and page production. If you also have the ideal of dream weaving, then this software is undoubtedly the best way to help you realize your dream. Complete visual editing, excellent code control, complete site planning and management, and extraordinary dynamic effect design all provide designers with a convenient way. The mx version of the software further integrates dynamic website and traditional static page functions, which undoubtedly provides more implementation methods for making websites.
13

14

Flash mx 2004

15 Flash mx As a representative of web vector interactive animation software, 2004 provides three major functions: graphic drawing, animation production and interaction. Once you master the core of this software, you will have the ability to act as a flash user while surfing the Internet. More and more personal and commercial websites use Flash technology, advertising banners, animated titles, MTV, and interactive games. The broad applications provide a broad development platform for Flash learners to learn Flash. mx 2004 software is an even more tempting process.
16

17

Fireworks mx 2004

18 Fireworks mx As a representative of web image design software, 2004 has inherited the graphics drawing and page special effects functions of the previous version, while also greatly developing the bitmap image processing functions. This undoubtedly gives this software greater capital to challenge Photoshop. , and its many applications in web design are unmatched by any software. With Dreamweaver The integration of mx 2004 has already played and continues to play an indispensable role in the professional website image design process.
19

20
21 File Description
Lines 11, 14, and 17 respectively define the bookmark names dw, fl, and fw of the 3 paragraph title text.
#p#
Link bookmarks in the same page
Next we will create links for the 8-3.htm we created. We hope to create 3 links at the beginning of the page, linking to each software introduction position. Basic syntax Text linkGrammar explanation
bookmark_name is the bookmark name just defined. File example: 8-4.htm
Create 3 links to the bookmark positions of the three paragraphs of title text in

on the page.
01
02
03
04
05
06
07
08

09
10

Mainstream web design software

11 Dreamweaver mx 2004
12 Flash mx 2004
13 Fireworks mx 2004
14

Dreamweaver mx 2004

15 Dreamweaver mx As a representative of web design software, 2004 has two core functions: site management and page production. If you also have the ideal of dream weaving, then this software is undoubtedly the best way to help you realize your dream. Complete visual editing, excellent code control, complete site planning and management, and extraordinary dynamic effect design all provide designers with a convenient way. mx The 2004 version of the software further integrates dynamic website and traditional static page functions, which undoubtedly provides more implementation methods for making websites.
16

17

Flash mx 2004

18 Flash mx As a representative of web vector interactive animation software, 2004 provides three major functions: graphic drawing, animation production and interaction. Once you master the core of this software, you will have the ability to act as a flash user while surfing the Internet. More and more personal and commercial websites use Flash technology, advertising banners, animated titles, MTV, and interactive games. The broad applications provide a broad development platform for Flash learners to learn Flash. mx 2004 software is an even more tempting process.
19

20

Fireworks mx 2004

21 Fireworksmx As a representative of web image design software, 2004 has inherited the graphics drawing and page special effects functions of the previous version, while also greatly developing the bitmap image processing functions. This undoubtedly gives this software greater capital to challenge Photoshop. , and its many applications in web design are unmatched by any software. With Dreamweaver The integration of mx 2004 has already played and continues to play an indispensable role in the professional website image design process.
22

23
24 File Description
Lines 11, 12, and 13 define bookmark links to the text of three paragraph titles respectively.
#p#
Link to bookmarks in other pages
Between pages, you can also complete the process of jumping to a certain location on another page. This requires specifying the linked page and the linked bookmark location. Basic syntax Text linkGrammar explanation
File＿name is the page path to jump to, bookmark_name is the defined bookmark name. File example: 8-5.htm
Create a new page, which contains 3 links, respectively linking to the location of the bookmark of the three paragraphs of title text in the page 8-4.htm.
01
02
03
04
05
06
07
08

09
10

Mainstream web design software

11 At present, web page technology has entered a new stage. Today's web pages are no longer a collection of pictures and boring text. What people are now pursuing is the dynamic effect and interactivity of web pages. Macromedia's three musketeers of web design software, Dreamweaver, Flash, and Fireworks, are outstanding representatives of interactive web design. Its latest version, mx 2004 inherits the advantages of the previous version and further integrates functions, which is very suitable for the needs of web design and website construction.

12 Dreamweaver mx 2004
13 Flash mx 2004
14 Fireworks mx 2004
15
16 File description
Lines 12, 13, and 14 respectively define bookmark links to the three paragraph title text in the 8-4.htm page.
#p#
External link
The so-called external link refers to the link relationship between jumping to the outside of the current website and pages or other elements in other websites. This kind of link generally requires writing an absolute link address.
When making external links, use URL uniform resource locators to locate World Wide Web information. This method can describe the location of the information concisely, clearly, and accurately. The most common url format is "http://", and other formats are shown in the table. URL format
Service URL format Description www http:// Enter the World Wide Web site Ftp ftp:// Enter the file transfer server News news:// Start news discussion group Telnet telnet:// Start Telnet mode Gopher gopher:// Access a Gopher server Email mailto:// Start email
Link to external website
Commonly used friendly links on the page can often be clicked to visit other people's websites to achieve the purpose of exchanging information with each other. Here's how to create links to external websites. Basic syntax Text link Grammar explanation
What is written after "http://" is the address of the website. File example: 8-6.htm
Create links to external websites.
01
02
03
04
05
06
07
08

09
10 Link to Script House website
11
12 File description
Line 10 defines the link to the Script House website.
#p#
Send E-mail
In the html page, you can create an E-mail link. When the viewer clicks the link, the system will activate the default email for sending E-mail. In the Windows system, if the user has set up email software, such as Outlook, Outlook Express, etc., clicking the E-mail link in the browser will automatically open a new email window, and the address bar will automatically add the email address in the E-mail link. Basic syntax Text link text link Text link Text linkGrammar explanation
where a@b.c is the email address, and the following parameters are as shown in the table below. Email parameters
Parameter Description subject Email subject cc Cc recipient bcc Bcc recipient
If you want to write multiple parameters at the same time, use the "&" symbol to separate the parameters, such as:
text link File example: 8-7.htm
Create an email link.
01
02
03
04
05
06
07
08
09
10 Letter to the author
11

12 Comments and Suggestions
13
14 File description
Line 10 defines the default email link, and the link on line 12 sets the email subject "Comments and Suggestions", as well as the email addresses for CC and BCC after sending the email.
#p#
Link FTP
The Internet is rich in resources. Through the file transfer protocol Ftp, you can obtain various free software and other files without leaving home. Ftp stands for "File Transfer Protocol". A protocol is a language that enables computers to communicate with each other. Ftp enables files and folders to be transferred publicly over the Internet. In some cases, you will need permission from your network computer administrator to log in and access files on your computer. But often you'll find that you can use Ftp to access a network or server without having an account on that computer or being an authorized password holder. These anonymous Ftp servers can contain a wide range of data that is publicly available via Ftp. Basic syntax Text linkGrammar explanation
What is written after "ftp://" is the address of the Ftp host. File example: 8-8.htm
Create an email link.
01
02
03
04
05
06
07
08
09
10 Peking University Ftp Site
11
12 File description
Line 10 defines the Ftp host address as the Ftp host of Peking University.
#p#
Link Telnet
Telnet is also one of the most important and widespread applications on the Internet. Remote login Telnet refers to a computer remotely connecting to another computer and running its own system program on the remote computer, thereby sharing the computer network system. Software and hardware resources. Basic syntax Text linkGrammar explanation
What is written after "Telnet://" is the address of the Telnet site. File example: 8-9.htm
Create a Telnet link.
01
02
03
04
05
06
07
08
09
10 Peking University Weiming Station
11
12 File Description
Line 10 defines the Telnet site address as Peking University Weiming Station. Among them, 162.105.203.245 is the site address and 23 is the port number.
#p#
Link to Gopher
Before the advent of www, Gopher software was the most important search tool on the Internet, and the Gopher site was also the most important site. After the emergence of www, Gopher lost its former glory. Despite this, Gopher is still popular today because Gopher sites can accommodate large amounts of information for users to query. Basic syntax Text linkGrammar explanation
What is written after "Gopher://" is the address of the Gopher site. File example: 8-10.htm
Create Gopher link.
01
02
03
04
05
06
07
08
09
10 Gopher site
11
12 File description
Line 10 defines the address of the Gopher site.
#p#
Link to News group
The New news group is composed of thousands of news servers distributed around the world. It can change messages at any time. Any message sent to the news group server can be spread around the world in a few minutes. A newsgroup is a collection of emails posted by individuals to a news server. Thousands of newsgroups can be created on a single computer. Every visitor can find a newsgroup on almost any topic. While some newsgroups are monitored, most are not. For monitored newsgroups, their owners can check posted messages, ask questions, or delete inappropriate messages, etc. Anyone can post messages to newsgroups. Newsgroups require no membership or membership fees. Basic syntax Text linkGrammar explanation
"News://" What is written next is the address of the New server. File example: 8-11.htm
Create a New newsgroup link.
01
02
03
04
05
06
07
08
09
10 News News Group
11
12 File description
Line 10 defines the address of the New news group server.
#p#
Download file
If you want to create a link to download a file, just enter the location of the file in the link address. When the browser user clicks the link, the browser will automatically determine the type of file to handle different situations. Basic syntax Text linkGrammar explanation
"File_url" represents the path where the file is located. You can write a relative path or an absolute path. File example: 8-12.htm
Create a download link for the file.
01
02
03
04
05
06
07
08
09
10 Download software
11
12 File description
Line 10 defines the download address of the Word Recovery software.
#p#
Script link
In the link statement, you can use scripts to implement functions that cannot be accomplished by the HTML language. The following uses JavaScript script as an example to illustrate the use of script links. Basic syntax Text linkSyntax explanation
In JavaScript: what is written next is the specific script. File example: 8-13.htm
Achieve the effect of closing the browser window through script links.
01
02
03
04
05
06
07
10 Close window
11
12 File Description
Line 10 defines the JavaScript script.
#p#
Empty link
In the link, you can use the # symbol to achieve an empty link. The so-called empty link means that after pointing to the link, the mouse becomes a hand line, but after clicking the link, it still stays on the current page. Basic syntax Text linkFile example: 8-14.htm
Implement empty link.
01
02
03
04
05
06
07
08
09
10 Empty link
11
12 File Description
Line 10 defines an empty link.