Hypertext links

0
935

This is a key component that makes WEB attractive and interesting for users. With the help of hypertext links (hereinafter the word – links), the set of documents becomes linked, structured. This allows the user to quickly and conveniently obtain the information they need.

Links have a standard format. This allows the browser to interpret them and, based on the type of link, implement the necessary functions (call methods). Assignment of references is diverse. They do not point to the locations in this document, to any other document, just to a file or image. When organizing large, massive structured websites, a URL is often used, which can point to the document in absolute path or relative – in this access path.

URL structure

URL (Uniform Resource Locator) – universal descriptions of places where there are resources for not only hypertext, but also links to network services, and directly from the HTML document.

URL format:

method: // hostname: port / path # anchor

Before the colon, the first part of the URL . It describes the access method (method) or network service. The part of the URL that after the colon is interpreted based on the access method.

Component name

Method
The type of access protocol or operation that is executed when the URL is interpreted.

Hostname
Describes a specific host name (computer or host). In the case where the name of the server is not named, the link is considered local. And the full path, which is specified later in the URL , is calculated exactly on the machine from which the HTML document containing this link was received. The IP address can be used instead of the symbolic name of the machine.

However, this is undesirable, since it is possible to intersect with the local fixed addresses of the internal network.

Example:
webmastersun.com
www.webmastersun.com

port
The number of the TCP port on which the WEB-server operates (operates). “Default” applies port 80. This is the case if the port is not named. However, in most of the URLs this parameter is not used:

path
As a result of commenting, URL path causes both selective and detailed path to the document.

To interpret the way of access to the document, different WEB-servers are created differently. If the name of the document follows the network name of the machine, then on the remote machine it should be located in the root directory.

UNIX-like syntax is used to represent the path on which direct slashes are used instead of the reverse ones. This is the difference between UNIX and DOS and Windows.

#anchor
Inside the HTML document #anchor is a link to the point. If the browser meets this element in its path after the document name, then on the screen it disposes it so that the above line of the document is located in the top line of the browser’s working window. This applies to most browsers. The points that #anchor refers to in the document are specified using the name attribute of the <a> tag.

Structure of links in the HTML document

All that was said above concerns the appearance of the URL. A special <a> tag added to the body of an HTML document is needed to display a URL to the browser. He has this syntax:

<a href={“URL”|”#anchor_name”}> …link name… </a>

Tags <a> and </a> – respectively, open and close the description of the external link. Any text between these tags is a symbolic representative of the link and is specifically allocated by the browser. The URL itself sets the href attribute. It is used only for the transition when the link is activated and is not displayed by the browser. In this case, you need to click the left mouse button on the symbolic representation of the link.

There are two types of links:

The first kind – external : they are specified in the form href = “URL” and refer to an external document.

For example:

<a href=”https://www.webmastersun.com/index.php”>External link</a>

The second type – internal : they are given in the form href = “#anchor_name” and refer to the place inside the same document.

For example:

<a href=”#top”> This link is internal </a> To revive the internal link, you need a kind of “anchor” (a special hidden marker). The browser does not display it. However, you can refer to the “anchor” not only from this, but from any other external document. The syntax of the token corresponds to the syntax of the <a> tag. However, there is one “but”: instead of the attribute href used – name :

Example:

<a name=”anchor_name”>…other items…</a>

You can link to different sections or sections of the document. In this case, an easy transition from the section to the section takes place inside the document. This makes it possible to escape from the routine scrolling of the screen. After clicking the link, the browser navigates to the required section of the document. And the line in which the marker of this section is contained – most often the initial line or the title of the section – will be placed on the first line in the browser window, if, of course, this line is no longer on the browser screen

One should remember this fact. With the help of links you can “travel” not only on this document, but also from one – to another. If the move occurred directly within the document, HTML does not allow a return to the previous one. When you use a link within a document and when you click on the Back button, you can not go to the previous link. In this case, you return to the fragment of the document that was previously viewed.
Stages of forming an internal link:

1. Formation of the partition marker:

Example:

<a name=”anchor_name”> …Name of the link… </a>

2. Formation of a link to this marker:

Example:

<a href=”#anchor_name”>…The name of the link…</a>

#anchor_name notifies the browser that in this HTML document it is necessary to find a marker with this name – anchor_name and go to it.

Example:

<b> List of sections </b>
<ul>
<li> <a href=”#exmain”> Main section </a> </li>
<li> <a href=”#exsecond”> Additional section </a> </li>
</ul>
<p> <a name=”exmain”> </a> Main section </p>
<ul>
<p> The text of the main section </p> </ul>
<p> <a name=”exsecond”> </a> Additional section </p>
<ul> <p> Additional section text <br> <br> </p>
</ul>