HTML and CSS tutorial-Chapter 7 hyperlink Creation

 

Chapter 7 create a hyperlink
Key points of this Chapter
Hyperlink Concept
Connection tag
Use the CSS style to set the bookmarks
Image connection
Image ing

Directory:
7.1 hyperlink Overview
7.2 hyperlink mark a and Its Attributes
7.3 use CSS styles to set the bookmarks
7.4 image Link
7.5 image ing Link
 

7.1 hyperlink Overview
Hyperlink is the soul of a website. A website is composed of multiple pages. Creating a hyperlink is conducive to the jump between pages and organically connecting the pages of the entire website. It is a vital element of the webpage. Generally, it is underlined when you move the cursor over a hyperlink. You can click the mouse to jump to the corresponding page of the hyperlink.
Each webpage has a unique URL.

7.2 hyperlink mark a and Its Attributes
Although hyperlink tags are irreplaceable in web design and production, they only have one tag, that is, the <A> tag. The hyperlink application described in this chapter is based on the <A> tag.
<A href = "file_url"> link text </a>

Href specified link address
Name: Name the link
Title prompt text for Link
Target target window of the specified Link
Accesskey link hotkey

Each file has its own storage location and path, understanding the root of creating a hyperlink between a file and the file to be linked.
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 the following three types:

Absolute path
Relative Path
Root path

1. absolute path

The absolute path provides a full path for the file, including applicable protocols such as HTTP, FTP, and RTSP. Common examples include:
Http://www.163.com
FTP: // 202.136.254.1
When linking to files in other websites, you must use an absolute link.

2. Relative Path
The relative path is the most suitable for internal links of the website. As long as it belongs to the same website, even if it is not in the same directory, the relative link is also very suitable.
The relative link is used as follows:
If the link is to the same directory, you only need to enter the name of the document to be linked.
For example, 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.

3. root path
The relative address of the root directory can also be used to create internal links. However, this address is not recommended in most cases. It is used in the following scenarios:
When the site is very large and placed on several servers
When several sites are simultaneously placed on a 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.

7.2.1 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.

7.2.2 bookmarks
You can create a bookmark by following two steps. One is to create a bookmark, and the other is to create a link for the bookmark.
Bookmarks: <a name = "name"> text </a>
Bookmark link: <a href = "# name"> text link </a>
7.2.3 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. In general, this link requires an absolute 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 and accurate manner.
Common URL formats are shown in the table.
WWW http: // enter the World Wide Web
FTP ftp: // enter the File Transfer Server
News news: // start a news discussion group
Email mailto: Start email

1. Link external websites
<A href = "http: //"> text link </a>

2. Link FTP
<A href = "ftp: //"> text link </a>

3. Link to the news group
<A href = "News: //"> text link </a>

4. Send email
<A href = "mailto: a@ B .c"> send mail </a>
<A href = "mailto: a@ B .c? Subject = content "> subject </a>
<A href = "mailto: a@ B .c? Cc = a@ B .c "> CC </a>
<A href = "mailto: a@ B .c? BCC = a@ B .c "> BCC </a>

7.2.4 file (non-HTML page) Link

In addition to links to HTML pages, you can also create links to 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.
<A href = "file_url"> text link </a>
File_url indicates the path of the file. You can write down the relative path or the absolute path.

7.3 Set the bookmarks using CSS styles
By default, a hyperlink is displayed as an underline, blue as it is not viewed, and purple as it has been accessed. We can use CSS to set styles in different links. Links are divided into five states, and their visual appearance changes according to the current state. These statuses are as follows:
The standard status of the link before any operation
Status after a visited link is clicked
The status of hover mouse pointer hovering over the connection
Status when the focus link obtains the focus
Status when the active link is being clicked
In the default appearance, link is blue, visited is purple, active is red, and all three are underlined.
CSS allows you to adjust the font, size, color, bold italic, and underline of links in different States.

7.4 image connection
Although the link is mainly text-based, you can use a link to wrap an image and turn it into a link. The link mark and text of the image are the same. All are <A> tags.
The difference is that text links Enter text between hyperlink tags <A> </a>.
<A href = "file_url"> link text </a>
The image code is entered between <A> </a>.
<A href = "file_url"> </a>
In addition, the image does not have a border by default. Once a link is added, a blue border is displayed. To remove the border, you can set the border attribute value to 0 in the flag, for example, , or set the image-marked IMG style to IMG {border: 0;} in the CSS style sheet ;}.

7.5 image ing Link
Image Map allows you to define multiple links in a single image. For example, if you have a weather map, you can use an image ing to link to weather forecasts in various regions. The clickable range in image ing can be a basic shape (rectangle or circle) or a complex polygon.