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 translators' footnotes at the bottom of the page of the book, if it contains 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 that are not related to a single topic. This 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.

Inserting a hyperlink

In HTML, a descriptor (tag) is used to insert a hyperlink. , which is inserted in the right place. Usually it is placed among the text, since the hyperlink itself is a text structure. But links are also graphic (icons, buttons, pictures); they will be discussed further. Their location on a web page is not limited to text, but depends on the design decision of the site creator.

google homepage

This is an example of how to insert a hyperlink into an HTML document, which is done using the tag . The site visitor will see 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 will take him 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!

Tag structure ...

You can see that the tag - double: end tag required.

href attribute tag, indicates the purpose of the link.

https://google.com/- attribute value A containing the URL of the resource to navigate to. It is enclosed in double or single quotes. It depends on the tag nesting structure according to the rules of HTML.

google homepage

this whole structure is called element web document.

According to the rules of HTML, some elements can contain other elements. Tag not an exception. If a programmer needs to highlight the word Google in bold, then this is done using a tag according to the general rules of text formatting, observing the sequence of tag nesting. The webmaster needs to know how to create a hyperlink in HTML without errors or they won't work. Broken links are called "broken" links in computer slang.

main page Google

Here: element

main page Google

contains a nested element

Google

Absolute hyperlinks

protocol://domain name/file path

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

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 the creation of hyperlinks, it is necessary to at least briefly mention them:

• http And https- the most common; they navigate between the Internet pages of different sites;
• ftp- protocol for uploading files to the server or downloading by the user from the site;
• mail-to a mail protocol that sends e-mail directly from the site, without going into personal mail.

There are several more protocols for special purposes (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 within the resource and does not lead beyond it. If the page is so large that a vertical scroll bar works, sometimes very long, as, for example, in dictionaries, then it is very convenient and advisable to use relative links to quickly jump to the desired letter.

When creating an Internet dictionary, the programmer places the alphabet at the beginning of the page, and if it were not for the use of links, the user would have to scroll the mouse wheel for a very long time to get to the letter “I”.

Go to the letter I

Where ya called anchor, A Go to the letter I- anchor destination. For the correct display of anchors, the use of Latin letters and numbers is recommended, so you should not write "I", although it would be clearer that way.

Now, in order to transition 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 words begin with the letter "I":

letter I

there is a pound sign before the anchor, without which the transition to the letter will not work.

Relative addressing when creating a site

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

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

You will definitely have to use links to link between elements of the site, and it will be very handy to know how to insert a hyperlink in HTML to another page on 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 the site files to the hosting, the connection between the objects will be preserved, because they will also be placed in the same directory on the hosting.

Let's say a programmer has created the index.html site's main page, which has a link to another page, page2.html, adorned with an img.png image. Then the relative path to this image will look like this:

picture

Tip: When learning this topic, it is best to use a simple text editor, because you need to get a knack for writing jump addresses correctly and to learn to understand other people's code. At this stage, a written hyperlink in a notepad will be a good result without errors,HTML does not forgive them and gives errors.

Ways to follow hyperlinks

By default, a new page opens in the current browser window when the user clicks on a hyperlink. But a web programmer can change the default value and force the page to open, for example, in a new window. There is an attribute for this. target with a specific meaning. This can best be expressed in a table.

Syntax for applying an attribute target:

google home page

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 hyperlinks differ in color from the surrounding text, and they are usually blue. Links that he followed and then returned to the previous page turn purple. The use of hyperlinks in HTML in non-standard colors is a little bit, but it makes the site stand out from the rest.

Set the colors of the links in the tag using attributes and their values, in which the HTML color appears in the rgb system (#00FF00) or with a direct indication of the color name ("green"). There are three types of attributes for links:

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

Markup example:

If you apply these attributes in a tag , links in that web document will be dark blue, visited links will be purple, and active links will be orange-red.

Graphic hyperlinks

The progress and development of web design oblige to know how to insert a hyperlink in HTML as an image. It is clear that the image must match the content of the destination page. For example, the main page of a site about medicinal plants can be presented in the form of photographs of plants, by clicking on which the user will be redirected to a page that describes the medicinal properties of the plant.

A widely used method is to replace static buttons ( ) to beautiful graphics created by a web designer in graphics editors (GIMP, Photoshop).

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

The attributes for specifying alternative text, width, height, and others are applied in the same way.

Calls from the site

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

...subscriber...

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

In order for calls to be made from the site, it is necessary to have not only a link to the subscriber's phone number, but also a headset (microphone, headphones) installed on the computer. The VoIP program, the Internet speed must exceed 0.5 Mb / s. Payment for calls is carried out by traffic consumption. Therefore, if the Internet is unlimited, then calls are free.

Ethics of hyperlinking

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

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

Yandex

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

Having got to the wrong page or downloaded the wrong file, the user in 99% of cases will immediately leave the site and will never visit it 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 that users are blocked from accessing 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 into the web page. Fraudsters know how to create a hyperlink in HTML, and use attributes to remove the underlining of the link and assign the color of the surrounding text to it 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 JavaScript OnMouseOver event fires an action on a web page element. When a user swipes over an invisible link, they are taken to an advertising page on another site. Or even worse, when there is an invisible link to the file and unnecessary software starts downloading and installing on his computer. Usually these are viruses that change the browser's home page, litter the hard drive with a mass of programs, and so on.

Soon such sites will be blacklisted by virus databases, security systems, and among Internet users themselves. Such sites do not last long, and they have to change their names, migrate endlessly over the Internet, changing host providers. This does not contribute to the promotion of the site, which its creator always strives for, it 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.