Computers, Programming
How do I insert a hyperlink into HTML? Creating and using hyperlinks in HTML
Hypertext is a text containing links to another text. An example is the author's notes on complex definitions or footnotes of translators at the bottom of the book page, if it encounters 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 unrelated unified topics resources. 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
This is an example of how to insert a hyperlink into an HTML document, which is done via the tag. The visitor of the site will see the underlined text, different from the color of the surrounding text (the color of the HTML-link can be any), the "Google homepage", clicking on which, it will go to the main page of the Google search engine. It should be noted that the hyperlink text should contain information about where the transition will take place. This principle should be followed and accepted as a rule!
The structure of the ... tag
You can notice that the tag is a pair: a closing tag is needed .
Href - Attribute of the tag, 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 consists of double or single quotes. It depends on the structure of the nesting of tags according to HTML rules.
This whole design is called an element of a web document.
According to HTML rules, some elements may contain other elements. The tag is no exception. If the programmer needs to highlight bold the word Google, then this is done using the tag for general text formatting rules, observing the sequence of nesting tags. The webmaster should know how to create a hyperlink in HTML without errors, otherwise they will not work. The broken links on the computer slang are called "broken".
Here: item
Contains a nested element
Now the visitor of the page will see a hyperlink with the bold text highlighted by the word "Google".
Absolute hyperlinks
Hyperlinks using absolute URLs of sites containing domain names (.ru, .com, .org, .gov) are called absolute and have the following syntax:
Protocol: // domain name / path to file
Example of the address of the popular search engine in America: https://aol.com - absolute, because it contains the domain name .com.
Absolute hyperlinks are used to navigate 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 subject of this article, but since they participate in the creation of hyperlinks, it is necessary at least briefly to mention them:
- Http and https are the most common; On them there is a transition between the Internet pages of different sites;
- Ftp - the protocol for uploading files to the server or downloading by the user from the site;
- Mailto is a mail protocol that sends e-mail directly from the site without accessing your private 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 for transitions within the resource and does not lead beyond it. If the page is so large that the vertical scroll bar works, sometimes very long, as in dictionaries, it is very convenient and appropriate to use relative links to quickly jump to the desired letter.
Creating an Internet dictionary, the programmer at the beginning of the page has an alphabet, and if not for the application of links, the user would have to turn the mouse wheel for a long time to get to the letter "I".
To create a relative reference, use the name attribute of the tag:
Where ya is called the anchor, and Go to the letter I - the anchor of the destination. For correct display of anchors, the use of Latin letters and numbers is recommended, so do not write "I", although it would be more understandable.
Now, to make the 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, in which the words begin with the letter "I":
Before the anchor is a sign of the grate, without which the transition to the letter will not work.
Relative addressing when creating a site
A convenient and most common algorithm for creating a website by a programmer:
- Create a folder in the computer and position it in a fast access location for convenience;
- Create in this folder the main page of the site index.html;
- Creation of secondary 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 download, for example);
- Filling the site with content;
- Placing the site files on the hosting.
It is necessary to use links for communication between site elements, and very opportunely will know how to insert a hyperlink into HTML on 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 the site files to the hosting, the connection between the objects will be preserved, because they will also be located in the same directory on the hosting.
Let's say that the programmer created the main page of the site index.html, on which there is a link to another page page2.html, decorated with a picture img.png. Then the relative path to this picture will look like this:
Tip: when studying this topic, it is best to use a simple text editor, because you need to acquire skill in correctly spelling the addresses and to learn how to deal with other people's code. At this stage, a well-written hyperlink in a notebook will be a good result without errors, HTML does not forgive them and produces errors.
Ways to navigate through hyperlinks
By default, a new page opens in the current browser window when the user clicks on the hyperlink. But the web programmer can change the default value and force the page to open, for example, in a new window. To do this, there is a target attribute with a specific value. This can be most clearly expressed in a table.
| _blank | Opens the page in a new browser window |
| _self | Opens the page in the current window (the default value) |
| _parent | Opens the page in the parent frame |
| _top | When using frames, it cancels them all and opens the page in the current browser window |
The syntax for applying the target attribute is :
target="_blank"> google homepage
Home page "Google" will open in a new window.
Note: to open pages in a new tab there are no values for this attribute, but are set by the user in the browser settings.
Color of hyperlinks
An experienced Internet user with time should have noticed that hyperlinks differ in color from the surrounding text, and usually they are blue. Links, by which he passed and then returned to the previous page, become lilac. Using hyperlinks in HTML in a non-standard color scheme is not much, but it highlights the site among the rest.
The colors of the links in the
tag are specified using attributes and their values, in which the HTML color in the rgb system (# 00FF00) or with the direct name of the color ("green") appears. There are three kinds of attributes for links:- Link - sets the color of the unvisited link;
- Vlink - sets the color of the link by which the user has already switched;
- Alink - sets the color of the link at the moment of switching to another page. This happens quickly, so you can not always catch this effect.
Example of markup:
If you apply these attributes in the
tag, the links of this web document will be dark blue, visited - lilac, and active - orange-red.Graphic hyperlinks
The progress and development of web design requires you to know how to insert a hyperlink into HTML as an image. It is clear that the picture must match 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, clicking on which, the user will go to the page, which describes the medicinal properties of the plant.
Widely used is the method of replacing static buttons () with beautiful graphics created by a web designer in graphics editors (GIMP, Photoshop).
To insert graphics as hyperlinks to the pages of the site, the same syntax is used, but instead of the text, the image-insertion tag according to HTML rules is used:
To the tag, the attributes of specifying alternative text, width, height, and others apply in the same way.
Calls from the site
Standard html5 has expanded the functionality of using the Internet, and now you can make calls not only from the phone, but directly from the site. For this purpose, you can also use hyperlinks in the HTML document, and they have this syntax:
Instead of the word "subscriber" a contact is clear to the caller, as in the phone book. You can also place a graphic file (a picture of the subscriber).
To make calls from the site, you need not only a link to the subscriber's phone number, but also a headset (microphone, headphones) installed on the computer VoIP program, the Internet speed should exceed 0.5 Mb / sec. Payment for calls is carried out by the expense of traffic. Therefore, if the Internet is unlimited, then calls are free.
The Ethics of Creating Hyperlinks
By placing the site on the Internet, the webmaster should know what kinds of hyperlinks exist in HTML, and not only correctly, professionally apply them, but also adhere to the following provisions:
- The hyperlink must be clearly visible, different from the surrounding text. The user should know that this is a hyperlink.
- The user should understand, where he will get by clicking on the link. To do this, it is advisable to use the title attribute , which concisely describes the transition page. The syntax for applying an attribute is:
title=privacy internet portal Yandex
- The user should receive true information about the file that will be downloaded when clicking on the link.
Having fallen not on the expected page or downloading the wrong file, the user in 99% of cases immediately leaves the site and in the future never on it will not come.
Anti-Seo when creating hyperlinks
In addition to the technical side of the question of how to insert a hyperlink into HTML, one should also highlight the moral aspect. There are many sites, access to which users are blocked by security programs (antivirus) or even the state. These are the sites that were created by the unclean web developers.
One of the tricks to which they resort is the insertion of "invisible" hyperlinks into a web page. Scammers know how to create a hyperlink in HTML, and use the attributes to remove the underscore 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 technologies tools (CSS, JavaScript, PHP), you can program their behavior. For example, the JavaScript OnMouseOver event activates the action of the Web page element. When a user moves the cursor over an invisible link, it hits the ad page of another site. Or even worse, when there is an invisible link to the file and on his computer starts to download and install unnecessary software. Usually these are viruses that change the browser home page, clutter a hard disk with a lot of programs and stuff.
Soon such sites fall into the "black list" of virus databases, security systems and among the Internet users themselves. Such sites do not live long, and they have to change their names, endlessly migrate over the Internet, changing host-providers. This does not promote the promotion of the site, which is always sought by its creator, 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.
Similar articles
Trending Now