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
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.
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
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
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
