How to insert a hyperlink in HTML? Creating and using hyperlinks in HTML. How to make a picture a link in HTML, Vkontakte, on the forum and using CSS Image as a hyperlink for

In this lesson we will talk about how to make a link in HTML. Links are very often used on websites; they allow you to move from one page of a website to another. The peculiarity of links is that they can lead not only to a web page, but also to files, images, etc.

Links can be internal and external. Internal links lead to pages and files within one site. External links lead to third-party sites, documents and files. At the same time, these types of links are set almost identically.

How to make a link in HTML, examples

1. HREF - is responsible for where the link should lead. A standard link is specified as follows: Link text.

2. TARGET - is responsible for which window the document will open in. Default new document opens in the current browser window. The “target” attribute allows you to open a link in a new browser window. This attribute has the following parameters:

• _blank - loads the page in a new window;
• _self - loads the page in the current window;
• _parent - loads the page into the parent frame;
• _top - cancels all frames and loads the page in a new window.

3. NAME - used to navigate to a specific area within the page. After the hash symbol, the keyword (bookmark or tag) is indicated in quotation marks. To go to this label, use the link in which this label is written.

External link example

Go to website

Go to the site Free WordPress lessons

Example 4: Images as links.

Example image as reference

Example of a link to a specific location on a page

Go to text

Page text...

In this example, the page is labeled “list” using the “name” attribute. Linking to this label will take you to a specific area of ​​the page.

Download file Write a letter

You can set the color of links using attributes that are specified in the “body” tag as parameters. Consider these attributes:

• link - unvisited link, by default it is displayed in blue;
• alink - active link, red by default;
• vlink - visited link, purple by default.

An example of setting colors for links...

Thus, we have figured out the principle by which links are created in HTML. Links can be given specific styles. You can see about it in the lesson by following the link.

I think you already understand what I mean we'll talk in this chapter.. and you know what a link is, if not, then click here.. There are several types of links, as well as “mechanisms” for clicking on them. In this chapter I will try to talk in detail about how to register links, as well as go into the intricacies of working with them.

Lyrical digression:
Once in the army the chief of staff came up to me and gave an order, I quote:
Bring me that document, though I don’t know where it is or what it is!! Why are you standing? Let's run!! I'm late!!!

So, what I mean by this, so that the browser does not fall into a stupor, as I did then, it needs to know: the exact name of the document, the path to the document, and the place where to bring it, or rather, where to open it.

On this moment using notepad, we created only one HTML document, I have it with the name index.html (why did you choose such a strange name index.html and why is it needed, see) I don’t know which one, you came up with the name yourself, but I think you used it remember and know where it is, unless of course you are my chief of staff :).. In this document we will try to create a link to another document that we do not have yet.. So before you link to it, you need to create it, since you You already know how to do this.

Open notepad.

We write code on html language. for example, a page with a series of photographs.

We save it as an html page in the same working folder where the first document we created already exists. Let's call it primer.html to avoid confusion, and perhaps rename the first one to index.html

Now I know that you have two html document and index.html and primer.html and that now you have a minimum set for further training.

Text links.

Let's meet tag (from anchor), you can enclose text or a picture in it, which will become a link to certain documents. Tag attribute href specifies the name and path to the document to which the link points.

All together it is written like this:

Here are my photos!!

As you probably understood, primer.html is the name of our second html document, and the inscription “Here are my photos!!” this is a piece of text from the index.html file.

By analogy with the pictures, the tag The link path to the document being opened is specified using the same methods:

Here are my photos!! - This entry implies that in the directory where our first html document is located there is a stranica folder in which the primer.html file is located
Here are my photos!! - This means that the primer.html file is located one level higher from the document
Here are my photos!! - the document is located on the website www.site.ru..

Well, let's try it? Below is an example of two documents containing links pointing to each other.

Index.html file:

Making a link to a piece of text





Tell me, dear child: in which ear is it buzzing?


On the right or left?



Primer.html file:

Followed the link here





But I didn’t guess right! I have a buzzing in both ears.


Well, I don't play like that...

From the example you can see that links are highlighted in color, by default blue is a link, and red is an already visited link, these colors can be changed using the opening tag that is already well known to us< body >and its attributes.

link - link color.
alink - color of the clicked, active link.
vlink - color of the visited link.

It is written like this:

Continuing to talk about the color of a text link, it is worth mentioning that, if necessary, you can force both the entire link and its individual parts (phrases, words, letters) to be highlighted in color using a familiar tag and its color attribute. However, this applies not only to color; you can also set the size, style and font of the text separately. But remember that color manipulation must be done inside the tag here and not overboard, otherwise the link color will be either by default or as specified in the tag

Index.html file:

Rainbow



Look at the phrase that will help you remember the places of colors in the rainbow


R
A
D
U
G
A




Primer.html file:

Rainbow




Every
hunter
wishes
know
Where
is sitting
pheasant



Go back to the main page

One of your pages on the site must be called index.html. It is the file with this name that the robot program will look for on your website when a person enters the name of your website. Since the index.html page will be opened first, make it the main page. You can call the rest of the pages whatever you want... there are no more nuances with names.

About the register... When writing the path and names of documents, remember that, for example: Page.html, page.html and PAGE.html are the names of different documents! The same applies to the names of bookmarks and pictures. Always consider case when writing code; there is a high probability that such names will not be recognized by one browser or another. Make it a rule to write and call everything small with Latin letters, then the risk of human factor and program vagaries will be reduced to zero.

Three click rule...

Try to form a “tree of links” in such a way that a site visitor can get from any page to any place on the site in a minimum number of clicks. More than three transitions to the desired place on the site is no longer good. Endless loading of unnecessary pages for a person can lead to nervous breakdown and premature closure of the site. Save people's time, money and nerves.

The main feature of an HTML document is the presence in it of hyperlinks (or simply links) to other documents, sites, files, pictures, etc. It is the ability to insert links to objects outside the page that has made the Internet so popular and convenient to use. Therefore, when creating your website, always remember the “magic” of links.

In this lesson we will talk about how to create a link to a website, to its individual page or file. You will learn how to change the text of a link, how to open it in a new window, how to make a link to an image, what external and internal links are, and much more. Plus, you already have information about working with links, which we touched on in previous lessons (for example, we talked about how you can change the color of a link in).

Overall, this tutorial will make your understanding of link creation complete and sufficient. You will understand how to create a hyperlink in HTML and why. And you will learn to control its properties.

Terms § 1. Link to file, link to site, link to page

Numerous questions about how a link to a file differs from a link to a site or its individual page forced me to put the answer to it at the very beginning of this lesson. The answer is: nothing. All links listed are external to the original page and are created in the same way.

So as not to let my thoughts run wild, I’ll show you everything with an example.

In the browser we will see this:

In the browser we will see this:

As you can see, all types of links are created exactly the same. The only difference is the address of the object to be referenced. Now let's move on to the main part of the lesson.

§ 2. Creating external links

Links differ from each other into external and internal, as well as text and graphic. External links lead outside the html page, internal links lead to different parts of the same page. Text links are text (by default, it is highlighted in blue and underlined), and graphic links contain a picture as an object that you need to click to go to. All these types of links are created in HTML using a tag (short for anchor). Let's take a closer look at it.

To create an external link to a site, page or file, use the href tag attribute. This attribute takes as its value the URL of a site, page, or file (we discussed this above). Between the tags is the visible part of the link (link anchor), i.e. what we see on the browser screen. The link anchor can be either plain text (text link) or graphic representation(link-picture). An image link is created by inserting a familiar tag between the and tags. In general, the syntax for creating a link looks like this:

For example, to create a text link to the home page of this site, you need to write the following HTML code:

http://www.seoded.ru/">Main page of the site website

In the browser it will look like this:

As I wrote at the very beginning of this lesson, the color of the link text (anchor) can be changed using . In general, you can apply the same rules to the text of links as to the main text of the page, i.e. highlight it in bold, italics, use headings, etc.

§ 2.1 Graphic links (picture links)

As I said above, in order to create an image link, you need to use . An example of such a link looks like this:

And the browser will show:

By default, the browser surrounds the image in a graphic link with a frame. If this is not desired, then the border attribute of the IMG tag should be set to 0:

border="0">

Home page

§ 3. Internal links

Internal links are used to comfortably navigate through pages with a lot of content. It was with their help that I made the “Lesson Contents” (see at the beginning of this page). Internal links are created using the same principle as external links. Only the value of the href attribute specifies the “anchor” of the link. The "anchor" is created by the name attribute:

name="anchor name">text

And the name of the “anchor” is set arbitrarily. It’s worth saying here that not all browsers understand the Russian names of “anchors”, so I recommend using the Latin alphabet. The text between tags to create an “anchor” is not required and, most often, is not specified.

“I am measles” is located in those places on the page where the user should go after clicking on the link.

As I said above, in the href attribute of an internal link, instead of the address, the name of the desired “anchor” is indicated with the obligatory hash symbol (#) in front of it. Let's look at it with an example.

I created an "anchor" called zagolovok and placed it in the page code next to the title of this lesson (Hyperlinks in HTML). The anchor code is as follows:

name="zagolovok">

href="#zagolovok">To title

And in the browser like this:

If you noticed, after clicking on the internal link to the title, the URL in the browser address bar changed:

To original address:

http://www..html

http://www..html#zagolovok

And using this feature, you can link to a specific location on the page from any resource on the Internet! That is, let’s say you created a page with a lengthy article about something (or posted a large number of photographs on the page) and marked it with internal links. While in , you needed to link not just to the page with the article (or photographs), but to a specific place on it (or a specific photograph). Using the option with an internal link in the address, you can easily achieve what you need.

§ 4. Absolute and relative references

Home page

But with relative links it’s a little more complicated. In such links, the address is indicated either relative to the root folder of the site (the one in which the main page is located) or relative to the source page. Such links are needed, for example, if the site is located on home computer. Or this is not a site, but a page that is a pointer to other documents.

Let's say we need to refer to the page klienty.html, which is in the same folder with home page site. Then the relative link code will look like:

/klienty.html">Clients

Now let’s assume that in the same folder with the main page there is a zakazy folder and the klienty.html page is already in it. Then the relative link code will become like this:

/zakazy/klienty.html">Clients

Now let's look at creating hyperlinks relative to the source page. Let's say we have a page price.html (source page) and from it we need to link to the page klienty.html. There are the following typical options:

1. The pages price.html and klienty.html are located in the same folder.

klienty.html">Clients




2. in the root folder of the site, the price.html page is located in the zakazy folder one level higher).

The code will look like this:

../klienty.html">Clients

Two dots indicate that you need to move out of the current folder to a higher level.




3. The klienty.html page and the zakazy folder are located in the root folder of the site, the mebel folder is in the zakazy folder, the price.html page is in the mebel folder (i.e., the klienty.html page relative to the original price.html page is two levels higher ).

../../klienty.html">Clients

That is, each level is indicated by two dots and a slash “/”.




4. in the root folder of the site, the klienty.html page lies in the zakazy folder (i.e. now the klienty.html page relative to the original price.html page lies one level lower).

zakazy/klienty.html">Clients

In this case, dots and slashes are not used.




5. The price.html page (original page) and the zakazy folder are located in the root folder of the site, the mebel folder is in the zakazy folder, the klienty.html page is in the mebel folder (i.e., now the klienty.html page is relative to the original price.html page lies two levels below).

zakazy/mebel/klienty.html">Clients




6. In the root folder of the site there are two folders: zakazy and oplata. The klienty.html page is in the zakazy folder, the original price.html page is in the oplata folder (that is, both pages are in different folders one level below the site’s root folder).

../zakazy/klienty.html">Clients

§ 5. Link to email

In order to create a link to email, you need to replace the URL in the href attribute value with an email address indicating the protocol (mailto:). And then when you click on this link, a window will open mail program with the email address entered in the “To” field. In HTML code it looks like this:

mailto: [email protected]">My mail

And in the browser it’s like that.

Hello, dear readers of the blog site! As you know, to successfully promote a website and increase its position in search results, it is necessary to carry out high-quality SEO optimization of the website. The concept of ““, which, in turn, is divided into internal and external, is inextricably linked with such concepts as “internal and external site links”. Therefore, it is very important for us to know how many links should be on the site, how to check their number, how to remove unnecessary links from the site and block them from indexing, how to increase the link mass, etc. To answer all these and other questions regarding internal and external links, let's first understand what a link (or hyperlink) is in HTML.

In this article I will tell you what a link is, how to make a hyperlink in HTML on a website, how to open a link in a new window, how to create a link to an email address (e-mail) and how to make a link to a picture. We will also touch on such concepts as html tags and hyperlink attributes, link anchor, html anchor and hash links. So, let's begin.

What is a link (hyperlink).

If a hyperlink leads to a web page or file that does not exist (deleted, moved) or its address is incorrect, then such a link is called a broken link. There should not be broken links on the site, as they mislead visitors and, having clicked on such a link, a person is unlikely to return to your site. We will talk more about why broken links appear, how to find and fix them, in a separate article. Now let's continue.

How to make a link (hyperlink) in HTML on a website.

It's very easy to link to another page on your or another site. To create a hyperlink, you need to tell the browser what the link is and indicate the address of the document to which it will lead. This is done using an HTML tag and the required href attribute:

Here, URL is the address of the document to go to. And the hyperlink text located between the tags And, is called a link anchor and is visible to the visitor of the web page. In addition to the fact that the link text (anchor) informs the reader where the transition will be made, it is also very important in search engine optimization (SEO), as it serves as one of the determining factors influencing the ranking of your site for the keywords contained in this anchor. Typically this type of ranking is called link ranking.

Absolute link

They are used to point to a document on another site (link is external).

It is also possible to make absolute links within one site, but it is more correct to use relative addresses, which look shorter, to create internal links. But, while analyzing various sites, I noticed that the vast majority of webmasters make internal links with absolute addresses. This has its advantage, because if your page is copied, then in this way you will receive working backlinks.

As you can see, with absolute links everything is simple. It’s more difficult with relative ones, because when creating them, you need to understand what value of the href attribute should be specified, since it depends on the original location of the documents. As I already said, no one really bothers with this and makes all the links on the site absolute. However, if you are interested in learning more about how to correctly create relative links for a website, I can recommend an article by Dmitry, author of the blog ktonanovenkogo.ru. I have never seen a more detailed and understandable explanation.

For example, I’ll show you what a link leading to a file relative to the site root will look like (we simply cut off everything to the left of the third slash in a similar absolute link):

Relative link

To main

Link text (anchor)

The colors and design of the pop-up text depend only on the settings operating system and browser.

How to open a link in a new window.

By default, when you click a link, a new document will be opened in the current window. However, when browsing websites, this is not convenient for me personally. When reading an article and following a link, it is convenient for me that the page opens in a new window and I can continue reading the previous article at any time. Another reason to open a link in a new window is that when you go to someone else's site, there is a high probability that the reader will not return back. Especially if he makes several transitions and simply does not remember where he was a few minutes ago.

The target attribute of the tag will help us open the link in a new window . By default it has the value _self , which is usually not specified. In order to open the document in a new window, change the value of the target attribute to _blank :

1	New window

New window

What should you do if, when visiting someone else's site, where links open in the current window, you want to open them in a new one? You just need to click on them not with a button, but with the mouse wheel. In this case new page opens in a new window.

How to make a link to an e-mail (email address).

Clicking on this link will open the program for working with by email, installed by default, where the “To” field will already be filled in. In order for the subject of the letter to be automatically filled in, you need to make a link to an e-mail of this type:

Dmitry KtoNaNovenkogo advises another way to set bookmarks in the text of a web page, without using html anchors. To do this, we make a bookmark from any HTML tag available on the page, assigning it the universal id attribute. For example, let's bookmark an h3 title tag:

Title text

It is important to include a Latin letter in the id attribute as the first character of the anchor name, then you can use any other allowed characters.

Let's, for example, go back to the heading “ “, and then continue.

You can use hash links to go to the desired location not only within one page, but also to go to another page on the site. To do this, we set the html anchor in the right place on the right page, and in the hash link itself we write the address of this page before the hash symbol. For example:

Link text to html anchor bookmark

Types and colors of hyperlinks in HTML.

• An unvisited link is blue and underlined.
• Active link - turns red during the time between the mouse click on the link and the start of loading a new page. It is clear that she is in this state for only a short time.
• Visited link – changes its color to purple after clicking on it.

You can change the color of hyperlinks in an HTML document using a tag and its following attributes:

• Link – color of unvisited links.
• Alink – color of the active link.
• Vlink – color of visited links.

All of the above attributes can be combined:

1

I hope it is now clear how to create a hyperlink on an HTML page and to an e-mail, how to make a picture a link, what text anchors, hash links and html anchors are, what html tags and link attributes are. I tried, as best I could, to tell in detail what links in HTML are and what they are. Let me remind you that inserting hyperlinks into text is done only in HTML mode.

I have never written such long articles before, more than 10,000 characters. But this is not the end of the topic of links, to be continued.

If this article was useful to you, please click on the social media buttons below. See you again on the pages!

Good day to everyone, my dear friends and readers. I hope that you have decided to take part in my competition and are already writing about your blogging journey. Well, I would like to continue our study of the html language and today I would like to tell you about one of the most important components, namely hyperlinks.

Yes, without such hyperlinks the Internet would not be so convenient. No, I'm lying. It wouldn't be easy to navigate at all. Can you imagine the Internet without them? I personally don't.

And today we will learn how to insert a hyperlink in html. But first I would like to ask you: Do you know what a hyperlink even is and how it differs from a regular link? Everything is actually simple here: a link is a simple piece of information that refers to a document. At the same time, you cannot click on this text (nothing will happen), but you know where to look for information.

Example: You can find out how to highlight hair in Photoshop at //site/adobe-photoshop/kak-vydelit-volosy/

A hyperlink is the same text, only its essence is that you can click on this text and get to the desired page, site or any other object. Moreover, the text itself can be anything, while the address is written separately inside and can be completely different. But be that as it may, in colloquial speech they are still called simply links. Here is an example of a hyperlink:

You can read about how to properly highlight hair in Photoshop in one of my tutorials.

Anyway. Good theory. Now let's move on to practice and see which ones are responsible for all these matters.

The paired tag is responsible for the hyperlink, but by itself it does not represent anything. It always goes in conjunction with an attribute. And in this case, we need to constantly write this same href. In the attribute value we put the link to the desired resource itself. And in the content itself we write the text itself, which should become clickable (work when clicked). Look at the example and I think you will understand everything.

Yandex search engine

As you understand, in this example I wrote that when you click on a piece of text “Yandex search engine”, a person will be directed to the address written in the value of the href attribute.

I think many of you know that there are internal and external links. Internal links are carried out within one directory, that is, the site, and external links lead to some third-party resource. And now I will show you how to do both.

Internal transitions File in the same folder

But such a transition will work provided that the file you are linking to is located in the same folder as the file in which you are placing the link. For other options, everything is a little different.

File in another folder

Open the pushkin.html file in Notepad++

Now find the word photo and wrap it in tags.

Now attention! In the attribute value we specify the path relative to the file being edited, that is, pushkin.html itself. You should end up with something like this:

Photo

What have we done now? And we did the following: since the path to the photo lies in a separate img folder, which is located in the same folder as the pushkin.html file, then in the attribute value we first have to write the name of the folder, and then through a slash (/) the full name of the document (in in our case photographs).

Now save and run the pushkin.html file in your browser. You will see that the word “Photo” has become highlighted in blue and has become clickable, which means that by clicking on this link we will be taken to the file fofo.jpg, which is located in the img folder.

So how? All clear? If anything happens, don’t hesitate to ask.

External transitions

And of course, we cannot fail to mention external links, after clicking on which we will be taken to a completely different site. But there is nothing complicated here. The whole point is that you put the full address of the site or web page into the href value. I showed an example with Yandex above. But here's another example:

I will study to become a master of social projects.

Here we get to a specific page of a specific site.

Opens in a new window

By default, when you click on a link, the document opens in the same window as your page, i.e. your page will slam shut. And this is not good. In particular, for promoted content projects or blogs, it is recommended that when you click on a link, the document opens in a new window or tab without closing your page.

The target attribute with the value “_blank” will help us with this. There is nothing complicated here. You will just need to insert this inside the opening tag after the href attribute value. Let's take that excerpt from the file lukomorye.html, where we made a link to the pushkin.html page, only now we will write this very attribute. It should look like this:

From the poem Ruslan and Lyudmila (Author - A.S. Pushkin)

Well, everything is clear here. Now, when you click on the content, the desired page will open in a new window. This thing is very necessary, because if you don’t register it, the user will simply leave your page. And so, in any case, he will remain on it, only if he does not specifically close it. Try to do everything yourself, just make everything beautiful with your own hands. No need to copy and paste.

Somehow like this. It seems like I told you all the most important things, but if you want to move in this direction and learn HTML and CSS to create professional websites, blogs and even online stores, then be sure to watch an excellent video course on this topic. The lessons are really excellent and are really told for people who are still little familiar with website building or are not familiar at all.

Well, this concludes our lesson for today. I hope you liked my article and will be glad if you become my regular reader. So don’t forget to subscribe to my blog updates so you don’t miss anything interesting. Well, I wish you success in all your endeavors. Bye bye!

Best regards, Dmitry Kostin.