HTML webpage hyperlink markup _ HTML/Xhtml _ webpage Creation

Link tags of HTML Web pages are one of the most important elements in web pages and the soul of a website. A website consists of multiple pages, and pages depend on links to determine their navigation relationships. Each webpage has a unique address, which is called url (UniformResourceLocator: Generic resource identifier) in English. HTML webpage hyperlink tagging tutorial
Link tag attributes
Links are one of the most important elements on a webpage and the soul of a website. A website consists of multiple pages, and pages depend on links to determine their navigation relationships. Each web page has a unique address, which is called a url (Uniform Resource Locator: a common Resource identifier) in English ). Enter the http://www.jb51.net in the address bar and press enter to open the home page of the script home website. As you can see, there are multiple topics and news on the page. The different topics at the top are text links.
Although the link Mark plays an irreplaceable role in website design and production, it only has one mark, that is, Mark. The link applications introduced on this site are based on tags.
The link tag attributes are shown in the following table.
Property description href specifies the link address name give the Link name title give the link prompt text target specify the link's target window accesskey link hotkey
About 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 root of creating a link. Url-Uniform Resource Locator refers to the unique address of each website. Each webpage under the same website belongs to the same address. However, when creating a webpage, it is impossible to enter a complete address for each link. We only need to determine the relative path relationship between the current document and the root directory of the site. Therefore, links can be divided into three types: absolute paths
Such as http://www.jb51.net relative path
Such as news/default.htm root path
For example,/website/news/default.htm
Before learning about the three address formats, you must understand the other two concepts: internal links and external links.
Both the internal and external links are relative to the site folder. If the link points to a file in the site folder, it is an internal link. If the link points out of the site folder, it is called an external link. When adding external links, the absolute address mentioned below will be used. When adding an internal link, the relative address of the root directory and the relative address of the file described below will be used.
These three links are described as follows:

Absolute path

The absolute path provides the complete path for the file, including the applicable protocol, such as http, Ftp, and rtsp. Common examples include:

Http://www.sohu.com

Ftp: // 202.136.254.1

When linking to files in other websites, you must use an absolute link. Relative Path

Relative links are most suitable for internal links of websites. As long as it is under the same website, even if it is not under the same directory, the relative link is also very suitable. The file relative address is an ideal form of writing internal links. As long as it is in the site folder, the relative address can freely build links between files. This address form uses the relative relationship between the two files that build the link, and is not affected by the server location where the site folder is located. Therefore, the same part of the absolute address is omitted. The advantage of this is that when the server address of the site folder changes, all the internal links of the folder (if this address is used) will not go wrong.

The method of relative link usage is as follows: if the link is to the same directory, you only need to enter the name of the document to be linked. To link to a file in the next-level directory, you only need to enter the directory name, then add "/", and then enter the file name. For example, to link to a file in the upper-level directory, enter "... /", And then enter the directory name and file name. Root path

The relative address of the root directory is also used to create internal links. However, this address format is not recommended in most cases. It is used in the following scenarios: when the site is very large, anti-DDoS is deployed on several servers, when several sites are simultaneously placed on one server

The writing format of the root directory relative address is also very simple. First, it starts with a slash, representing the root directory, then writing the folder name, and finally writing the file name. The root path starts with "/" and then the directory name under the root directory.
# P #
Create internal link
Internal links refer to links between different html pages within the same website. When creating internal links of a website, you must take into account the clear navigation structure of the link so that you can easily find the html file of the required content.
Links to the renewal page. The directory relationships of the three pages are as follows:
8-1.htmand 8-1-1.htmare stored in the root directory of the website, while 8-1-2.htm is stored in the test directory. Basic syntax link text syntax explanation
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 with the mouse. Example: 8-1.htm
Create two links by marking them and link them to the other two html pages.
01
02
03
04
05
06
07Create internal link
08
09
10 mainstream Web Design Software
11

At present, the web page technology has entered a new stage, and the current web page is no longer the accumulation of pictures and boring text. People are pursuing the dynamic effects and interactivity of web pages. Macromedia's three muskeys software Dreamweaver, Flash, and Fireworks are outstanding representatives of interactive web design. The latest version of mx 2004 inherits the advantages of the previous version and further integrates functions, it is very suitable for Webpage Design and website construction.

12. Dreamweaver mx 2004
13

14 webpage animation software Flash mx 2004
15
16File description
The 12th line defines the link to the 8-1-1.htmhomophone page, and the 14th line defines the link to the 8-1-2.htm page under the testobject. Example: 8-1-1.htm
This file is the "webpage creation software Dreamweaver mx 2004" page. The link returned to the 8-1.htm page is created by marking.
01
02
03
04
05
06
07 One of the internal link files
08
09
10 Dreamweaver mx 2004.
11 Dreamweaver mx 2004, as a representative of web design software, has two core functions: site management and page creation. If you have the dream Dream, 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 provide a handy way for designers. The mx software further integrates dynamic websites with traditional static page functions, which undoubtedly provides more implementation methods for website creation.
12

13 return
14
15File description
The row 13 defines the link to the page at the same level of 8-1.htm. Example: 8-1-2.htm
This file is the page of "webpage animation software Flash mx 2004". You can click the tag to create a link to return to the 8-1.htm page.
01
02
03
04
05
06
07Internal link file 2
08
09
10 Flash mx 2004.
11 Flash mx 2004, as a representative of the web page vector Interactive Animation Software, provides three main functions: drawing, animation production and interaction. Having mastered the core of this software, it is capable of surfing the Internet while acting as a hacker. More and more individuals and commercial websites use Flash technology, advertising banner, cartoon head, mtv, and interactive games. The broad application provides a wide range of development platforms for Flash learners, learning Flash mx 2004 is a tempting process.
12

13 return
14
15File description
The 13th row defines the link to the top-level 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 the link, such as the new window. Basic syntax link text syntax explanation
Define the target window through target. The value of value is shown in the following table. The value description _ parent is opened in the upper-level window. Generally, frame sharding frameworks often use _ blank to open _ self in a new window or in the same frame, in general, you do not need to set _ top to open it in the entire window of the browser. Ignore any frame file example: 8-2.htm
Set the target window of the link through the target attribute.
01
02
03
04
05
06
07Target window of the link
08
09
10 mainstream Web Design Software
11 at present, the web page technology has entered a new stage, and the current web page is no longer an accumulation of pictures and boring text. What people are pursuing now is the dynamic effect and interaction of web pages. Macromweaver's three muskeys software Dreamweaver, Flash, and Fireworks are outstanding representatives of interactive web design. The latest version of mx 2004 inherits the advantages of the previous version and further integrates functions, it is very suitable for Webpage Design and website construction.

12. Dreamweaver mx 2004
13

14 webpage animation software Flash mx 2004
15
16File description
Row 12th defines the link page displayed in the original window, and row 14th defines the link page displayed in the new window.
# P #
Create a bookmarks
When browsing a page, if the page contains a large amount of content and the page is too long, you need to drag the scroll bar constantly during browsing, which is inconvenient. If you want to find specific content, it is more inconvenient. If a directory can be created on the webpage or another page, it is very convenient for the viewer to click the project in the directory to automatically jump to the corresponding position on the webpage for reading, you can also set links such as "back to homepage" on the page. This is called a bookmark link.
You can create a bookmark by following two steps: creating a bookmark and creating a link for the bookmark.
Next, we will create a software introduction page that contains the content of the three muskeys of web design, and create a bookmark for each of the software, which is the next place to jump. That is to say, the bookmarks determine the internal link guidance basis of a page. Example of basic syntax text file: 8-3.htm
Creates a bookmark link for the three-Section title text on the page.
01
02
03
04
05
06
07Create a bookmarks
08
09
10 mainstream Web Design Software
11 Dreamweaver mx 2004.
12 Dreamweaver mx 2004, as a representative of web design software, has two core functions: site management and page creation. If you have the dream Dream, 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 provide a handy way for designers. The mx software further integrates dynamic websites with traditional static page functions, which undoubtedly provides more implementation methods for website creation.
13

14. Flash mx 2004.
15 as a representative of the web page vector interaction animation software, Flash mx 2004 provides three functions: graphic rendering, animation production, and interaction. Having mastered the core of this software, it is capable of surfing the Internet while acting as a hacker. More and more individuals and commercial websites use Flash technology, advertising banner, cartoon head, mtv, and interactive games. The broad application provides a wide range of development platforms for Flash learners, learning Flash mx 2004 is a tempting process.
16

17 Fireworks mx 2004
18 Fireworks mx 2004, as a representative of the Web image design software, has greatly developed the processing functions of bitmap images while inheriting the features of drawing and page effects in earlier versions, this undoubtedly gives the software a greater capital to challenge Photoshop, and its many applications in web design are comparable to none. The integration with Dreamweaver mx 2004 makes it an indispensable role in professional website image design.
19

20
21File description
Lines 14, 14, and 17 define the names of the bookmarks dw, fl, and fw for each paragraph title text.
# P #
Link bookmarks on the same page
Next, we will create a link for the 8-3.htm production. We hope to create three links at the beginning of the page, respectively linking them to the location of each software introduction. Basic syntax text link syntax explanation
Bookmark_name is the name of the previously defined bookmarks. Example: 8-4.htm
Create three links and add them to the three-segment title text bookmarks on the page.
01
02
03
04
05
06
07Bookmarks linked to the same page
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 2004, as a representative of web design software, has two core functions: site management and page creation. If you have the dream Dream, 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 provide a handy way for designers. The software of mx 2004 further integrates dynamic websites with traditional static page functions, which undoubtedly provides more implementation methods for website creation.
16

17 Flash mx 2004
18 as a representative of the web page vector interaction animation software, Flash mx 2004 provides three functions: drawing, Animation Making, and interaction. Having mastered the core of this software, it is capable of surfing the Internet while acting as a hacker. More and more individuals and commercial websites use Flash technology, advertising banner, cartoon head, mtv, and interactive games. The broad application provides a wide range of development platforms for Flash learners, learning Flash mx 2004 is a tempting process.
19

20 Fireworks mx 2004
21 Fireworks mx 2004, as a representative of Web image design software, has greatly developed bitmap image processing functions while inheriting the features of drawing and page effects in earlier versions, this undoubtedly gives the software a greater capital to challenge Photoshop, and its many applications in web design are comparable to none. The integration with Dreamweaver mx 2004 makes it an indispensable role in professional website image design.
22

23
24File description
Lines 12, 12, and 13 define the bookmarks of the three paragraph headers.
# P #
Link to bookmarks on other pages
Between pages, you can also jump to a location on another page. In this case, you must specify the page of the link and the bookmarks of the link. Basic syntax text link syntax explanation
File_name is the page path to jump to, and bookmark_name is the defined bookmarkname. Example: 8-5.htm
Create a new page with 3 links in it and link it to the position of the Three-segment title text bookmarks on the 8-4.htm page.
01
02
03
04
05
06
07Bookmarks linked to other pages
08
09
10 mainstream Web Design Software
11 at present, the web page technology has entered a new stage, and the current web page is no longer an accumulation of pictures and boring text. What people are pursuing now is the dynamic effect and interaction of web pages. Macromedia's three muskeys software Dreamweaver, Flash, and Fireworks are outstanding representatives of interactive web design. The latest version of mx 2004 inherits the advantages of the previous version and further integrates functions, it is very suitable for Webpage Design and website construction.

12 Dreamweaver mx 2004.
13. Flash mx 2004.
14 Fireworks mx 2004
15
16File description
The 12、13.014th line defines the bookmarks for the three paragraph headers on the 8-4.htm page.
# P #
External link
An external link refers to the link between a jump to the outside of the current website and pages or other elements on other websites. This type of link generally requires an absolute link address.
When creating external links, you can use the url Uniform Resource Locator to locate the World Wide Web information. This method can describe the location of the information in a concise, clear, and accurate manner. The most common url format is "http: //". Other formats are shown in the table. Url format
Service url format description www http: // enter the world wide web site Ftp: // enter the file transmission server News: // start the news discussion group Telnet: // start the telnet mode Gopher gopher: // access a Gopher server Email mailto: // start the Email
Link to external website
Commonly used links on the page are often clicked to access others' websites to exchange information. The following describes how to create a link to an external website. Basic syntax text link syntax explanation
"Http: //" is followed by the website address. Example: 8-6.htm
Create a link to an external website.
01
02
03
04
05
06
07Link to external website
08
09
10 link to the script home website
11
12File description
Row 3 defines the link to the home of scripts.
# P #
Send email
You can create an e-mail link on the html page. When the viewer clicks the link, the system starts the default email to send the email. In windows, if you have set mail software, such as Outlook and Outlook Express, clicking the e-mail link in the browser will automatically open the new mail window, the email address in the email link is automatically added to the address bar. Basic syntax text link syntax explanation
The a@ B .c is the mail address, followed by the parameters for the mail as shown in the following table
Parameter description subject Email subject cc bcc recipient
If you want to write multiple parameters at the same time, use the "&" symbol to separate them, for example:
Text Link file example: 8-7.htm
Create an email link.
01
02
03
04
05
06
07Send email
08
09
10. Send a letter to the author
11

12 ytlinli@126.com "> suggestions
13
14File description
Row 10th defines the default email link, line 12th sets the mail subject "suggestion", and the mail address that is copied and hidden after the mail is sent.
# P #
Link FTP
Rich resources on the Internet. Through the file transfer protocol Ftp, you can get a variety of free software and other files without leaving home. Ftp is the file transfer protocol ". A protocol is a language that allows computers to communicate with each other. Ftp enables public transmission of files and folders over the Internet. In some cases, you must obtain a license from the Network Computer Administrator to log on to and access files on the computer. However, you usually find that you can use Ftp to access a network or server, without having to own an account on the computer or being an authorized password holder. These anonymous Ftp servers can contain a wide range of data that can be publicly obtained through Ftp. Basic syntax text link syntax explanation
"Ftp: //" is followed by the Ftp host address. Example: 8-8.htm
Create an email link.
01
02
03
04
05
06
07Link Ftp host
08
09
10 Peking University Ftp site
11
12File description
Row 3 defines the Ftp host address as the Ftp host of Peking University.
# P #
Link Telnet
Telnet is also one of the most important and extensive applications on the Internet. Remote logon to Telnet means that a computer is remotely linked to another computer and runs its own system program on the remote computer, to share the software and hardware resources of the computer network system. Basic syntax text link syntax explanation
"Telnet: //" is followed by an example of the address file of the Telnet site: 8-9.htm
Create a Telnet link.
01
02
03
04
05
06
07Link Telnet
08
09
10 Beijing University unnamed site
11
12File description
Row 10th defines the Telnet site address as a site not named by Peking University. 162.105.203.245 indicates the site address and 23 indicates the port number.
# P #
Link to Gopher
Before the emergence of www, the Gopher software was the most important retrieval tool on the Internet, and the Gopher site was also the most important site. After the emergence of www, Gopher lost its glory. Despite this, Gopher is still popular today, because the Gopher site can accommodate a large amount of information for users to query. Basic syntax text link syntax explanation
"Gopher: //" is followed by the address of the Gopher site. Example: 8-10.htm
Create a Gopher link.
01
02
03
04
05
06
07Link to Gopher
08
09
10 Gopher site
11
12File description
Row 3 defines the address of the Gopher site.
# P #
Link to News group
A New news group is composed of thousands of news servers distributed all over the world. It can change messages at any time. Any message sent to the newsgroup server can be spread around the world in a few minutes. A newsgroup is a collection of mails that an individual posts to a newsserver. Thousands of newsgroups can be created on one computer. Each viewer can find newsgroups of almost any topic. Although some newsgroups are monitored, most of them are not. For a monitored newsgroup, its owner can check the posted emails, ask questions, or delete inappropriate emails. Anyone can post an email to a newsgroup. News groups do not require membership or inbound fees. Basic syntax text link syntax explanation
"News: //" is followed by the address of the New server. Example: 8-11.htm
Create a New newsgroup link.
01
02
03
04
05
06
07Link to News group
08
09
10 News group
11
12File description
Row 10th defines the address of the New newsgroup server.
# P #
Download files
To create a download link, you only need to enter the file location at the link address. When a browser user clicks a link, the browser automatically determines the file type to handle different situations. Basic syntax text link syntax explanation
"File_url" indicates the path of the file. You can write down the relative path or absolute path. Example: 8-12.htm
Create a file download link.
01
02
03
04
05
06
07Download files
08
09
10 Download Software
11
12File description
Line 3 defines the Word Recovery software.
# P #
Script Link
In link statements, you can use scripts to implement functions that cannot be completed by the html language. The following uses a JavaScript script as an example to describe how to use the script link. Basic syntax text link syntax explanation
In JavaScript: The specific script is written later. Example: 8-13.htm
Close the browser window through the script link.
01
02
03
04
05
06
07
10 close the window
11
12File description
Line 3 defines a JavaScript script.
# P #
Empty Link
In the link, you can use the # symbol to implement an empty link. The so-called blank link refers to the link, the mouse turns into a hand line, but after clicking the link, still stay on the current page. Example of a basic syntax text link file: 8-14.htm
Implement empty links.
01
02
03
04
05
06
07Empty Link
08
09
10 blank links
11
12File description
Row 3 defines an empty link.