How to insert a hyperlink in HTML? Creating and Using Hyperlinks in HTML

Hypertext is text that contains links to other text. An example is the author’s notes on complex definitions or translator footnotes at the bottom of a book’s page if it contains a text in a foreign language. Internet sites are a complex system of hypertext transitions from one page to another, within the page itself, as well as between resources unrelated to a single theme. Such a structure is practical, saves a lot of time, allows the visitor to quickly find the necessary information and not get lost in a large number of transitions.

Hyperlink insertion

HTML uses a descriptor (tag) <a> to insert a hyperlink, which is inserted at the right place. Usually it is placed among the text, since the hyperlink itself is a text structure. But links are still graphic (icons, buttons, pictures); they will be described later. Their location on the web page is not limited to text, but depends on the design decision of the creator of the site.

<a href= preferredhttps://google.com/>> Google Home </a>

This is an example of how to insert a hyperlink into an HTML document, which is done using the <a> tag. A visitor to the site will see the underlined text, different from the color of the surrounding text (the color of the HTML link can be any), “Google home page”, clicking on which, he will be taken to the main page of the Google search engine. It should be noted that the text of the hyperlink must contain information about where the transition will be made. This principle should be followed and accepted as a rule!

<a> ... </a> tag structure

You may notice that the <a> tag is a pair: a closing tag is required </a>.

href - tag attribute , indicates the purpose of the link.

https://google.com/ - the value of the attribute , which contains the URL of the resource to which the transition will take place. It is enclosed in double or single quotation marks. It depends on the nesting structure of tags according to HTML rules.

<a href= preferredhttps://google.com/>> Google Home </a>

this whole construct is called a web document element .

According to HTML rules, some elements may contain other elements. The <a> tag is no exception. If the programmer needs to highlight the word Google in bold, this is done using the <b> </b> tag according to the general rules for formatting text, observing the sequence of nesting of tags. The webmaster should know how to create a hyperlink in HTML without errors, otherwise they will not work. Broken links on computer slang are called “broken”.

<a href= preferredhttps://google.com/"> <b> Google Home </b> </a>

Here: element

<a href= preferredhttps://google.com/"> <b> Google Home </b> </a>

contains a nested element

<b> Google </b>

Now the visitor to the page will see a hyperlink with the word "Google" in bold text.

Absolute Hyperlinks

Hyperlinks that use absolute website URLs containing domain names (.ru, .com, .org, .gov) are called absolute and have the following syntax:

protocol: // domain name / file path

An example of the address of a search engine common in America: https://aol.com - absolute, because it contains the .com domain name.

Absolute hyperlinks are used to go to pages of other sites or to access resources located on another server. The transition is carried out using Internet protocols. Protocols are not the topic of this article, but since they are involved in creating hyperlinks, you need to at least briefly mention them:

• http and https are the most common; on them the transition between the Internet pages of different sites;
• ftp - protocol for uploading files to a server or for downloading by a user from a site;
• mailto is the mail protocol by which e-mail is sent directly from the site without entering personal mail.

There are several other special-purpose protocols (gopher, telnet), which are quite rare, the use of which requires special knowledge in programming or system administration.

Relative hyperlinks

With relative addressing, the use of hyperlinks in HTML serves to navigate inside the resource and does not lead beyond it. If the page is so large that the vertical scrollbar works, sometimes very long, as, for example, in dictionaries, then it is very convenient and appropriate to use relative links to quickly jump to the desired letter.

Creating an Internet dictionary, the programmer arranges the alphabet at the top of the page, and if not for the use of links, the user would have to spin the mouse wheel for a very long time to get to the letter “I”.

To create a relative link, the name attribute of the <a> tag is used:

<a name= beatya>> Go to letter </a>

where ya is called the anchor, and Go to the letter I - the destination anchor. For the correct display of anchors, the use of Latin letters and numbers is recommended, so do not write "I", although it would be more clear.

Now, in order to switch from the alphabet at the beginning of the page to the letter “I”, you need to anchor the anchor in the place of the HTML document where the words with the letter “I” begin:

<a href= won#ya>> letter I </a>

in front of the anchor is a pound sign, without which the transition to the letter will not work.

Relative addressing when creating a site

The most convenient and most common algorithm for creating a website by a programmer:

• creation of a folder in the computer and its location in a place of quick access for convenience;
• creation of the main page of the site index.html in this folder;
• creation of minor web pages (index.html / page2);
• creating a folder and placing graphic files in it;
• creating a folder and placing other objects in it (files for downloading, for example);
• filling the site with content;
• placement of site files on hosting.

You will definitely have to use links to link between the elements of the site, and it will be very useful to know how to insert a hyperlink in HTML to another page of the same site. If the site files are in the same directory, on the same server, then there is no need to use absolute addressing. When transferring site files to hosting, the connection between the objects will remain, because they will also be located on the hosting in the same directory.

Suppose a programmer has created the main page of the site index.html, on which there is a link to another page page2.html, decorated with the image img.png. Then the relative path to this picture will look like this:

<a href= wonders/page2.html/img.png>> picture </a>

Tip: when studying this topic, it is best to use a simple text editor due to the fact that you need to get the knack for writing the transition addresses correctly and to learn to understand someone else's code. At this stage, the registered hyperlink in notepad will be a good result without errors; HTML does not forgive them and produces errors.

Hyperlink Navigation Methods

By default, a new page opens in the current browser window when a user clicks on a hyperlink. But a web programmer can change the default value and make the page open, for example, in a new window. To do this, there is a target attribute with a certain value. Most clearly, this can be expressed in a table.

The syntax for using the target attribute is :

<a href= preferredhttps://google.com/> target= determined_blank>> google home </a>

The Google homepage will open in a new window.

Note: to open pages in a new tab, there are no values ​​for this attribute, but is set by the user in the browser settings.

Hyperlink Color

An experienced Internet user should have noticed over time that the hyperlinks are different in color from the surrounding text, and usually they are blue. The links that he followed and then returned to the previous page become lilac. Using hyperlinks in HTML in a custom color scheme is not much, but it sets the site apart from the rest.

The link colors in the <body> tag are set using attributes and their values, in which the HTML color appears in the rgb system (# 00FF00) or with a direct color name ("green"). There are three kinds of attributes for links:

• link - sets the color of an unvisited link;
• vlink - sets the color of the link that the user has already clicked on;
• alink - sets the color of the link when it goes to another page. This happens quickly, so it’s not always possible to catch this effect.

Layout Example:

<body link = "# 330099" alink = "# FF0000" vlink = "# 990066">

If you apply these attributes in the <body> tag, the links of this web document will be dark blue, the visited ones will be lilac, and the active ones will be orange-red.

Graphic Hyperlinks

The progress and development of web design requires you to know how to embed a hyperlink in HTML as an image. It is clear that the picture should correspond to the contents of the destination page. For example, the main page of the site about medicinal plants can be presented in the form of photographs of plants, by clicking on which the user will be taken to a page on which the medicinal properties of the plant are described.

A method is widely used to replace static buttons (<input type = "button">) with beautiful graphic ones created by a web designer in graphic editors (GIMP, Photoshop).

To insert graphics as hyperlinks to pages on the site, the same syntax is used, but instead of text, the image insert tag is used according to the rules of HTML:

<a href= wonpage2.html>> <img src = "/ images / img1" alt = "coltsfoot" width = "50" height = "46"> </a>

The <img> tag also has the same attributes for setting alternative text, width, height, and others.

Calls from the site

The html5 standard has expanded the functionality of using the Internet, and now you can make calls not only from the phone, but directly from the site. You can also use hyperlinks in an HTML document for this purpose, and they have the following syntax:

<a href="tel:+79xxxxxxxxx"> ... subscriber ... </a>

Instead of the word “subscriber”, the contact is clear to the caller, as in the phone book. You can also place a graphic file (photo of the subscriber).

To make calls from the site, you must have not only a link to the subscriber's phone number, but also a headset (microphone, headphones) installed on the computer VoIP-program, Internet speed must exceed 0.5 Mb / s. Payment for calls is the expense of traffic. Therefore, if the Internet is unlimited, then calls are free.

Hyperlink Ethics

When placing a website on the Internet, the webmaster should know what types of hyperlinks exist in HTML, and not only correctly, professionally apply them, but also adhere to the following provisions:

• The hyperlink should be clearly visible, different from the text surrounding it. The user must know that this is a hyperlink.
• The user should be clear where he will go by clicking on the link. To do this, it is advisable to use the title attribute , which succinctly describes the transition page. The syntax for using the attribute is:

<a href= rankhttp://yandex.ru/> title= chosen=Russian internet portal>> Yandex </a>

• The user should receive true information about the file that will be downloaded when clicking on the link.

Having got to the wrong page or downloaded the wrong file, in 99% of cases the user will immediately leave the site and will never visit him in the future.

Anti-SEO when creating hyperlinks

In addition to the technical side of the question of how to insert a hyperlink in HTML, the moral aspect should also be highlighted. There are many sites whose access to users is blocked by security programs (antivirus) or even by the state. These are the sites that were created by dishonest web programmers.

One of the tricks they resort to is inserting “invisible” hyperlinks to a web page. Fraudsters know how to create a hyperlink in HTML, and using the attributes to remove the underline of the link and assign it the color of the surrounding text so that the average user does not see it. And with the help of other web technology tools (CSS, JavaScript, PHP), you can program their behavior. For example, the OnMouseOver event of the JavaScript language activates the action of a web page element. When the user moves the cursor over an invisible link, he gets to the advertising page of another site. Or even worse, when there is an invisible link to the file and unnecessary software starts to be downloaded and installed on his computer. Typically, these are viruses that change the browser home page, clutter up the hard drive with tons of programs, and more.

Soon, such sites fall into the “black list” of virus databases, security systems and among Internet users themselves. Such sites do not live for a long time, and they have to change their names, migrate endlessly on the Internet, changing host providers. This does not contribute to the promotion of the site, which its creator always strives for, will never make it a megaportal, such as, for example, social networks. Among other things, such tricks cause a lot of negative emotions in people affected by these actions.