Insert url. What are links, their types, how to make a link in html. The concept of a link, what is a link

If you have a simple website made in HTML, then you should write exactly this code in the page editor, changing my address to yours and specifying your anchor. It will look like this.

This is also very important, it is advisable not to throw the visitor out of the resource, but to leave him. Using this attribute, you will ensure that a visitor, by clicking on many links on one page, will not leave the current one, but at the same time will open many other pages. This is important if you are promoting a website.

You can add a title attribute to the link, which is a title tag and lets search engines know where the link leads. Also, this tag is displayed (if registered) when we point at a link in the form of a tooltip.

When using an engine, such as WordPress, adding a link to a site is very simple without any edits in html mode. The post editor has a special icon with a connection icon.

In the image I showed the whole process of adding a connection between text and another page.

1. First, select the phrase that you want to make a link;
2. Click on the add connection icon;
3. We set the link parameters (the address of the page where you want to redirect the user, as well as the title of the link, that is, the anchor, if necessary).

You don’t have to enter the link title, as it will be the text that was selected at the first stage. In the image I showed adding links from existing site pages. You can do this, then when you click on one of the entries from the list, the URL and title will be entered automatically.

The URL can also be entered on an external site. If this is necessary, then enter the full (absolute) address of the page. To open a page in a new tab, there is no need to manually enter the attribute. The engine provides this option using one checkbox (see image above).

A little higher I said about the absolute address. This means that the full address of the page to which you need to redirect is written inside the link, regardless of whether it is our resource or another.

There is also a relative address, when it is not necessary to enter the full address. It is enough just to enter the path to some directory or page of the site, without specifying the domain name. Such links only work for pages within one resource. You can't refer to an external project like that.

If you want to dive deeper into the process of creating relative addresses, I highly recommend read this article on another resource. Everything is very coolly laid out there.

Link picture

Links in the form of images are also widely used, although they should be used only for their intended purpose. If we are simple links to other pages within our site, then it is better not to make them with pictures, since it is not always clear that you need to click on the image to get to some page.

It is advisable to do this when you want to advertise someone, for example, someone’s video course. In this case, you provide a regular hyperlink, followed immediately by an image link. In this case, it will be more clear that the image leads to the course website where it can be purchased.

If we take the html mode, then the principle of building the link structure is exactly the same, including all attributes. The only difference is the link anchor, which looks like the code for the image itself. In the previous case there was simple text.

In practice it will look like this.

As you can see, inside the opening and closing link tags there is an image code, which also has its own characteristics. You need to include the same title tag in it, indicate the path to the image on the hosting or on another resource. It is also worth specifying the image dimensions (width - width, height - height). And you should definitely include the alt attribute, which serves as a description of the image. If you write everything down, then image optimization will be up to par.

Here's what it looks like in html mode. I divided the code into 3 parts to make the link structure more understandable (clickable image).

The only difficulty here is to correctly enter the code of the image, which is used as an anchor.

Link button using CSS styles

If you want to do something differently, then this option also has a place to be. Moreover, it allows you to change styles so that when you hover over a button, both the button itself and the color of the inscription that will be inside it will change. If you take a picture, then it is not always possible to realize this. With styles, anything is possible.

Another very good advantage is that we can place the button strictly in the center and it will be clickable only in the area of ​​the button. If we take an image, then when we place it in the center, the entire width of the content area around the image will be clickable. Sometimes such a defect results in an accidental click on the image and, frankly, is annoying.

For example, I created a simple button that leads to the main page of the site. You can check its functionality.

Here is the button structure itself.

The principle is clear, so I’m giving the styles that I added to this link button.

/* button styles in normal mode */ #button ( display: block; width: 550px; /* button width */ height: 60px; /* height */ background-color: #ff4343; /* background color */ text- shadow: 1px 1px #800909; /* text shadow */ color: #fff; /* text color */ border-style: solid; /* button border line type */ border-width: 1px /* thickness button border line */ border-color: #db3a3a; /* button border line color */ font-size: 18px; /* text size */ line-height: 60px /* linear text height * / font-weight: normal; /* text weight */ font-family: arial; /* font type */ text-align: center; /* text-decoration: none; : 40px auto; /* indent the button from other elements on the page */ text-transform: uppercase; /* so that all letters are in capitals. If not necessary, remove the line */ ) /* button styles when hovering the mouse */ # button:hover ( background-color: #f23333; font-size: 19px; )

Those who are encountering the Internet for the first time will definitely have a question about how to insert a link into a letter, to a forum, in contact, in html, in text, in a picture in Word.

To understand this, you need to understand that they can be active and inactive. If by clicking on it you go to another page (site), then this is the active one, all the others are inactive.

The fastest way is to copy and paste it. To do this, select it by holding down the left mouse button (without releasing it, it will turn blue).

After that, right-click, copy it (copy the shortcut in Explorer), go to the desired location, right-click on it, select paste and click.

How to insert a link in an email

By letter we mean by email, usually you just need to write the address, or copy and paste.

Much depends on the mail provider; sometimes there may be a filter on certain tags.

How to insert a link in a contact

How to insert a link into a picture

In simple words you can explain it like this: write the address of the picture here.

How to insert a link in Word

Click “insert” at the very top, then in the changed window find “hyperlink” and write the address at the very bottom, then click “OK”.

So in a text document, they will never be active (txt), but if you open the same document in html format, they can immediately turn into active ones (hyperlinks) without your help.

In the latest version of WordPress, links can be inserted even easier - copy the address with the link, type the text on the page or post that should become a link, select it with the mouse and press the key combination “Ctrl” + “V”, the link will automatically be attached to the selected text.

If you place the mouse cursor in the text to which a link is attached, a pop-up window will appear with a link and buttons for deleting the link or proceeding to edit the link.

Standard actions and additional options when placing links are described below.

How to insert a link in the text of a page or post

1. Place the cursor in the part of the text where you want to insert the link

3. On the toolbar, click the button Insert/edit link

4. In the dialog that appears in the field URL type or paste the link address

Note: If you want the link to open in a new browser tab, check the “Open in a new window/tab” box.

This code can be placed in the page/post edit mode on the “Text” tab.

This code can also be used to place a link in the sidebar using the “Text” widget.

Options:

http://site.ru - instead of this address, insert the desired link; the http:// protocol must be present in the link.

Link text - write your own text instead, it will be displayed on your site.

target="_blank" - with this parameter the link will open in a new browser window. The link code will look something like this:
Link text

Anchors

An anchor is a bookmark with a unique name at a specific place on a web page, designed to create a link to it. Anchors are convenient to use on large pages so that you can quickly jump to the desired place on the page.

You can see an example of how anchors work on this page; at the top of the page there is content in the form of links; when you click on a link, the page will automatically scroll to the desired location.

— anchor, you need to insert it in the place on the page where the link will be followed.

The word in quotation marks (here it is tekst) can be written in any way, only Latin letters and numbers can be used. The main thing is that it matches in the code of the link to the anchor and in the anchor itself.

Example anchor code:

Link text1 Link text2 Link text3 Link text4 a lot of text a lot of text a lot of text a lot of text

Viewed (92289) times

Well, I decided that I would slowly change it, there was nothing to do, I was only busy for a couple of weeks 🙂 and I started. At first it was quite difficult, I missed some details, came back again, changed, checked, only after 15 edited posts did I develop an algorithm with which everything fell into place and the speed of restoration of notes increased. Plus, I decided for myself, I’ll also do some linking and adding advertising blocks to the body of the article.

For all this, I had to learn the science of links - what they are, how they differ, what open or closed links are, how to select a link anchor, what links look like in html code, how to insert it into a note, and so on. I studied all this and began perestroika in my diary. Now let's talk about everything in order.

The concept of a link, what is a link

A link is a phrase, a piece of text, a picture that redirects you to another document, website or another page of your blog. All pages are connected to each other on the World Wide Web through hyperlinks; without links it is difficult to imagine the Internet. They are the connecting link of the entire network, with their help we can move from one site to another in a second with just one click.

Figure 1 Examples of links

Here is a fragment of my note and the links are highlighted in numbers, for example, when you click on the category (1) or the number of comments (2), you will be taken to the 'news' section or comments to the note, respectively. The links in the article itself are highlighted in brown (examples 3 and 4 in the figure above), where they lead you can see if you hover over the link and look at the bottom left of your screen, this is the URL address.

How to link to a site

In order to direct the reader to a specific page, you need to create a link. I’ll show you using this note as an example. First, you need to select a phrase or word by holding down the left mouse button, after the text is selected, find the “insert/edit link” icon in the editor (Alt+Shift+A) and the following dialog box will appear in front of you:

you will need to fill in the following fields:

• URL- this is the address of the Internet page to which you want to direct the reader when clicking on the link;
• Heading— link anchor that will be displayed when you hover over the link
• link to existing content you only need to click if you have not filled in the URL field and do not know the exact address, then select the desired note and its address will be inserted into the URL field
• Tick ​​in the checkbox " open in new window“It is advisable to put it, this will allow you to keep the reader on the page he is reading. If, on the contrary, you need to direct the reader to the capture page or via a referral link, then you don’t have to check the box.

Now, if you go to the "Text" or "html" tab, you can see how the link you created looks like in html format:

Everything is not as difficult as it seems :)

anchor

In this html code, the “address” is the url of the page to which this link leads (in my case in the figure above, this is, and the anchor is a phrase or word that denotes this link in the article (in my example above, this is the title “duplicates pages") This is what the link will look like in html:

duplicate pages

But this link in this format is not very convenient in that it opens in the same browser window when it is clicked and the reader leaves the note or even the site (if the link leads to another site) that he was reading. Thus, this is not convenient for the reader, since he jumps from one to another without reading the note to the end and for the blog author, since the reader quickly leaves you for another Internet resource.

For this case, use the attribute:

Target="_blank"

anchor

Rel=”nofollow”

so that they are hidden from indexing by search engines.

This is what they look like in html format:

anchor

But a link of this type must only be inserted manually by going to the “html” or “Text” tab in the WordPress editor and adding the link form in the right place and inserting the appropriate values ​​instead of “address” and “anchor”. Here's how I inserted a link with the anchor “Hosting is free for blog readers”:

Types of links

• Internal links, which lead to other pages on your site. Such links can be made by the WordPress editor, they can all be made open for indexing;
• External links, which lead to pages of another site. Here you already need to think about whether to open them for indexing or not. If the site is proven, thematic, authoritative, then you can safely link to it and put a link open for indexing. If you sell a link or exchange links with another webmaster by agreement, write a review of someone else’s site or publish an interview with a blogger, then you only need to put an open link, these are the rules of the game on the Internet. There are so-called dofollow blogs, where all the links in the template are open and webmasters do not close them at all. But, if you are not sure about the site you are linking to or there are many external links in one article, it is recommended to make them closed from indexing. Let me remind you that an open link transfers the weight of your page to another resource, so decide for yourself whether to open or close links.

Depending on the presence or absence of an anchor, links are divided into:

• anchor, which have an anchor or title, for example -
• non-anchor, which do not have an anchor and look like this -

• text- such links are indicated by numbers 3 and 4 in Fig. 1. They are visible, readable, located in the text of the note;
• in the form of pictures or banners, in Fig. 1 is the link under number 5, an advertisement for my crossword marathon. It’s very easy to create such a link, first insert a picture into the article, click on it in the WordPress editor and after selecting it, select the “insert/edit link” icon. Next, you proceed as with a regular text link, enter the url, title (which will then be displayed when you hover over the image) and check the “open in a new window” checkbox or not.

Here are the basic information about links, types of links that every webmaster and optimizer needs to know in order to properly develop and promote their website. I'll tell you in detail soon , their role in promoting the blog, so as not to miss it, I recommend subscribe for updates!

Crossword No. 2 of the crossword marathon “Erudite-4”

Now another crossword puzzle on the topic “ Decorations"from the crossword marathon "Erudite-4", (previous crossword No. 1) I promised you that the topics would be varied :)