I think you already understand what will be discussed 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 following them. In this chapter I will try to tell you in detail about how to register links, as well as dedicate 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 and what it is!! What are you standing? Let's run!! I'm late!!!
So, why am I so that the browser, like me then, does not fall into a stupor, 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 the this moment using notepad, we created only one HTML document, I have it with the name index.html (why did I choose such a strange name index.html and why do I need to look at) I don’t know with what, you yourself came up with the name, but I think you remember and know where it lies, 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 refer to it, you need to create it, thank you you already know it.
- Open notepad.
- We write code in html. For example, a page with a number of photos.
- We save it as an html page in the same working folder, where the first document we created is already there. Let's, so as not to be confused, let's call it primer.html, and perhaps also rename the first one to index.html
Now I know that you have two html document and index.html and primer.html and now you have a minimum set for further learning.
Text links.
Get acquainted tag (from anchor - 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 pictures!!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 tag
the link path to the document being opened is written in the same ways:
Here are my pictures!!- And this means that the primer.html file is placed one level higher from the document
Here are my pictures!!- the document is located on the website www.site.ru..
Well, let's try? Below is an example of two documents at once in which links pointing to each other are registered.
index.html file:
Tell me, dear child: in which ear is my buzzing?
AT law or left?
primer.html file:
The example shows 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 already well known to us < body > and its attributes.
link- link color.alink- the color of the clicked, active link.
vlink- the 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 color highlighting both the entire link and its individual parts (phrases, words, letters) with a familiar tag and its attribute color. However, this applies not only to color, but also separately you can set the size, style and font of the text. But remember that color manipulation must be done inside the tag here and not overboard, otherwise the color of the link will be either by default or as written in the tag
index.html file:
link="#008000" alink="#ff0000" vlink="#ffff00">
Look for a phrase that will help you remember the places of the colors in the rainbow.
R
BUT
D
At
G
BUT
primer.html file:
link="#008000" alink="#ff0000" vlink="#ffff00">
Each
hunter
wishes
know
where
sits
pheasant
Go back to the main page
One of your pages on the site necessarily should be called index.html It is the file with this name on your site that the robot program will look for when a person enters the name of your site. Since the page index.html will open first, make it the main one. You can call the rest of the pages whatever you like ... there are no more nuances with names.
About case .. When writing the path and names of documents, remember that, for example: Page.html, page.html and PAGE.html are names various documents! The same applies to bookmark names and drawings. Always be case sensitive when writing code, there is a good chance that such names will not be recognized by a particular browser. Make it a rule to write everything and call names in small Latin letters, then the risk of the human factor and the vagaries of programs 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 of its pages to any place on the site for the minimum number of clicks on the links. More than three transitions to right place this is no longer good on the site .. Endless loading of pages that a person does not need 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 that it contains hyperlinks(or simply links) to other documents, sites, files, pictures, etc. It was the ability to insert links into pages to objects outside of it that made the Internet so popular and convenient to use. Therefore, when creating your site, always remember the "magic" of links.
In this lesson, we'll talk about how to create a link to the site, to its separate 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 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 ).
In general, this lesson will make your idea of link building complete and sufficient. You will understand how to create a hyperlink in HTML and why. And learn to manage its properties.
Terms
§ 1. Link to a file, link to a site, link to a page
Numerous questions about the difference between a link to a file and 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 original page and are created in the same way.
In order not to spread the thought along the tree, I will show 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 in exactly the same way. The only difference is address the object to refer to. Now let's move on to the main part of the lesson.
§ 2. Creating external links
Links differ from each other by external and internal, as well as on text and graphic. External links lead outside the "limits" of the html page, internal links to different parts the same pages. Text links are text (by default, it is highlighted in blue and underlined), and graphic links, as an object that you need to click on to go, contain some kind of picture. All these types of links are created in HTML using a tag (an abbreviation for the English anchor - anchor). Let's consider it in more detail.
To create an external link to a site, page or file, the tag attribute is used - href. This attribute takes as its value URL site, page or file (we talked about this above). Between the and tags is the visible part of the link (link anchor), i.e. what we see on the browser screen. Link anchor can be either plain text (text link) or graphic image (image link). 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 home page this site, you need to write the following HTML code:
http://www.seoded.ru/"> Site home page
In the browser it will look like this:
As I wrote at the very beginning of this tutorial, the color of the link text (anchor) can be changed using . In general, you can apply all the same to the text of links as to the main text of the page, i.e. bold, italic, 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 the image link with a frame. If this is not desired, then the attribute border tag img should be set to 0:
border="0">
Main page
§ 3. Internal links
For comfortable navigation through pages with a lot of content, internal links are used. It was with their help that I made the Lesson Content (see at the beginning of this page). Internal links are created in the same way as external links. Only in attribute value href the "anchor" of the link is indicated. Anchor is created by the attribute name:
name="anchor name">text
And the name of the "anchor" is set arbitrarily. Here it is worth saying that not all browsers understand the Russian names of "anchors", so I recommend using the Latin alphabet. The text between the tags to create an "anchor" is optional and, most often, not specified.
"I'm a measles" is located in those places on the page that the user should go to after clicking on the link.
As I said above, in the attribute href internal link instead of the address, the name of the desired "anchor" is indicated with the obligatory hash symbol ( # ) in front of him. Let's take an example.
I created an "anchor" named header and placed it in the code of the page next to the title of this lesson ("Hyperlinks in HTML"). The "anchor" code is as follows:
name="title">
href="#zagolovok">Go to title
And in the browser like this:
If you notice that after clicking on the internal link to the title, the URL has changed in address bar browser:
To original address:
http://www.html
http://www..html#header
And using this feature, you can link to a specific place on the page from any resource on the Internet! That is, let's say you created a page with a voluminous article about something (or posted it on the page big number photos) and marked it with internal links. Being in , you needed to refer not just to a page with an article (or photos), but to a certain place on it (or a certain photo). Using the option with an internal link in the address, you can easily achieve what you need.
§ 4. Absolute and relative references
Main page
But with relative links, it's a little more complicated. In such links, the address is indicated either relatively the root folder of the site (the one in which the main page is located), or relative to the original page. Such links are needed, for example, if the site is located on home computer. Or it's not a website, but a page-pointer to other documents.
Let's say we need to link to a page client.html, which lies in one folder with the main page of the site. Then the relative link code will look like this:
/clienty.html">Clients
Now suppose that in the same folder with the main page is folder order and already in it lies the klienty.html page. Then the relative link code will become like this:
/zakazy/clienty.html">Clients
Now let's look at creating hyperlinks relative to the original page. Let's say we have a page price.html(source page) and from it you need to link to the page client.html Here are the following typical options:
1. The price.html and clienty.html pages are in one folder.
clientty.html">Clients
2. in the root folder of the site, page price.html is in the order folder one level up).
The code will become like this:
../clienty.html">Clients
Two dots indicate that you need to exit the current folder to a higher level.
3. The klienty.html page and the zakazy folder are in the root folder of the site, furniture folder is in the order folder, page price.html is in the mebel folder(i.e. the klienty.html page relative to the original price.html page lies two levels up).
../../clienty.html">Clients
That is, each level is indicated by two dots and a slash " / ».
4. in the root folder of the site, page clienty.html is in the order folder(i.e. now the klienty.html page is relative to the original price.html page one level down).
zakazy/clienty.html">Clients
In this case, dots and slashes are not put.
5. The price.html page (original page) and the zakazy folder are in the root folder of the site, furniture folder is in the order folder, page clienty.html 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/furniture/clienty.html">Clients
6. In the root folder of the site there are two folders: zakazy and oplata. clienty.html page is in the order folder, the original price.html page lies in the folder oplata(i.e. both pages lie in different folders one level down from the root folder of the site).
../zakazy/clienty.html">Clients
§ 5. Link to e-mail
To create email link, you need instead of the URL in the attribute value href write an email address with the protocol ( mailto:). And then when you click on such a link, a window will open mail program with an email address entered in the "To" field. In HTML code it looks like this:
mailto: [email protected]">My mail
And so it is in the browser.
Hello dear readers of the blog site. Today we'll talk about how to create hyperlinks in html, learn how to use the "A" tag and its href and target attributes, learn how to make an image a link.
Hyperlinks are the key elements of a web page. They link disparate html pages together into a complete website. Usually links are displayed as an underlined piece of text, when you hover over it, the mouse cursor becomes a pointing finger.
In addition, a hyperlink may look like graphic image or a fragment of it. When a link is clicked, the browser loads the web page specified in the link's attributes. Hyperlinks allow you to link to internal pages of your site, as well as to any other resources on the Internet.
Create text hyperlinks
Let's start simple and look at creating regular text links. To create a text hyperlink, it is enough to enclose any piece of text that should become a link in pair tag A. And in href attribute For this tag, you must specify the address of the target web page on the Internet:
This piece of html code creates a paragraph that contains a link. The link points to the page15.html web page, which is located in the catalog folder stored in the root folder of the www.site.ru site.
If the page does not use css styles and no additional attributes are applied, then hyperlinks on the page are displayed by default as follows:
- regular links are displayed in blue;
- visited links are highlighted in purple;
- the active hyperlink (which is currently clicked) is displayed in red, but since the time between clicking on the link and the start of loading a new document is quite short, this state of the link is very short-lived;
- Link text is underlined.
Internet addresses
The complete address contains contains the Internet address of the web server, and the path to the file to be retrieved. For example:
Here www.site.ru is the address of the web server, and /catalog/page15.html is the path to the file on this server. In general, full Internet addresses are usually used only if it is necessary to create a hyperlink pointing to some resources located on another website.
When creating hyperlinks pointing to files that are part of the same site as the current web page, it is best to use abbreviated Internet addresses. The abbreviated address contains only the path to the file on the server, because The address of the web server is already known to the browser.
Abbreviated Internet addresses are absolute and relative. The absolute address specifies the path to the target file relative to the site's root folder. Such an address begins with the character / (slash), which denotes the root folder. For example, the address "/page15.html" points to the file page15.html, which is stored in the root folder of the site. Or the address "/catalog/page.html" points to the page.html file, which is placed in the catalog folder, nested in the root folder of the site.
Relative address is a file path relative to the file of the current web page. Relative addresses do not contain a leading slash. Let's look at a few examples.
For example, the address "page.html" points to a file that is in the same folder as the file of the current web page. And the address "catalog/page.html" will open the page.html file stored in the catalog folder, nested in the folder where the current page is stored.
Using two dots at the beginning of the address, you can specify folders of the previous level of nesting. So, for example, the address ".../page.html" points to the page.html stored in the folder in which the folder with the current web page is nested.
Link to mail
By using html language you can create mail hyperlinks, clicking on which launches the program mail client. When specifying an address in an attribute href put before email "mailto:", i.e. something like this: href="mailto: [email protected]". Moreover, after the colon, there should not be spaces before the postal address.
How to make an image a link
Since it is an inline element of an html page, we simply insert this tag inside the “A” tag instead of text:
Besides simple option creating a hyperlink image, html allows you to turn a part of a graphic image into a hyperlink. Moreover, it is possible to split the image into parts, each of which will be a hyperlink pointing to its Internet address. This option is called image map.
Currently, the image map is rarely used, since it requires a very large number of tags and the html code becomes unwieldy and confusing.
The image-map is created in three stages:
The full html code that creates the image map looks like this:
Here we have created one rectangular area pointing to the main page of the webcodius site, one circular area pointing to the page with all the articles on the same site, and one polygonal area with no link.
Anchors
Anchor or label- this is a kind of hyperlink that marks a separate fragment of an html page and allows you to navigate through the contents of the document.
You may have already seen pages where, immediately after the heading, there was a list of article section titles, clicking on which would take you to the section of the entry of interest.
Anchors are created, like regular hyperlinks, using paired tag A, only instead of the href attribute, the name or id attribute is placed in it, the value of which sets the unique identifier of the label. In this case, the “A” tag itself usually does not have any content:
There is a second way to create an anchor that does not need to create empty "A" elements. Or you can use elements that are already on the web page, such as . To do this, add the universal id attribute to the required element:
Hello, dear readers of the blog site! As you know, for the successful promotion of the site and increase its position in the results search results, it is necessary to carry out high-quality SEO optimization of the site. 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 close 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 explain 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 e-mail address (e-mail) and how to make a link an image. We will also touch upon such concepts as html tags and hyperlink attributes, link anchor, html anchor (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 broken. There should not be broken links on the site, as they mislead visitors and, by clicking on such a link, a person is unlikely to return to your site. We will talk in more detail about why broken links appear, how to find and fix them, in a separate article. And now let's continue.
How to make a link (hyperlink) in HTML on a website.
Linking to another page on your site or another site is very easy. 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 the HTML tag. and the required href attribute:
Here URL is the address of the document to go to. And the text of the hyperlink located between the tags and, is called the link anchor and is visible to the web page visitor. 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 is one of the determining factors affecting the ranking of your site by keywords contained in this anchor. Typically, this type of ranking is called referential.
Absolute link
They are used to point to a document on another site (external link).
It is allowed to make absolute links within the same site, however, it is more correct to use relative addresses to create an internal link, which look shorter. But, while analyzing various sites, I noticed that the vast majority of webmasters make internal links with absolute addresses. There is a plus here, because if your page is copied, then in this way you will get working back external links.
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 you need to specify, since it depends on the original location of the documents. As I said, no one really bothers with this and makes all links on the site absolute. However, if you are interested in learning more about how to correctly create relative links for a site, I can recommend an article by Dmitry, the author of the ktonanovenkogo.ru blog. I have not yet seen a more detailed and understandable explanation.
For example, I will show how the link leading to the file relative to the site root will look like (just 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 appearance of the popup text depend only on the settings operating system and browser.
How to open a link in a new window.
By default, when you click on a link, a new document will be opened in the current window. However, when viewing sites personally, this is not convenient for me. 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 come back. Especially if he makes several transitions and simply does not remember where he was a few minutes ago.
The target tag attribute will help us open the link in a new window. . It defaults to _self , which is usually not written. To open the document in a new window, change the value of the target attribute to _blank :
| 1 | <a href = "http://site" target = "_blank" > New window</a> |
New window
What if when you visit 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 will open in a new window.
How to make a link to an e-mail (e-mail address).
Clicking on this link will open a program for working with email, installed by you by default, where the “To” field will already be filled. To automatically fill in the subject of the letter, you need to make a link to the e-mail of the following form:
Instead of the words “subject_of the letter”, you need to write the desired topic and, of course, in Latin letters. We do this because many browsers and email programs do not work well with Cyrillic and there is a chance to see all sorts of gibberish in the subject line. Using this not tricky advice, you will be able to create a link to an e-mail without fear of unnecessary surprises.
How to make an image a link.
Here, the title attribute is a tooltip, and the text written in the alt attribute (alternative source of information) will appear on the page if images are disabled in the browser. If the title attribute serves, first of all, for the convenience of readers, then search engines try to understand what is shown in the picture by the alt attribute. It is recommended to write keywords in these tags, which will be of great importance in search engine optimization. After all, no one canceled the search by pictures.
How to make a hyperlink (html anchor) on one html page.
Above, we have already considered how to create a link to a website page, no matter internal or external. But sometimes, you have to make hyperlinks within the same web page. What for? Well, for example, so that when reading a very long text, we have the ability to quickly jump to any part of it. Or it will come in handy when at the beginning of the article you publish its content point by point. Then, by clicking on the desired item, you will instantly go to the material you are interested in. Such transitions are made using bookmarks pre-installed in the body of the article, called html anchors (anchor, not to be confused with a text anchor) and special hash links.
To create an anchor, first make a bookmark with any name (only Latin letters, numbers, hyphens and underscores are used) specified using the name attribute of the tag :
Up
| 1 | <a href = "javascript:scroll(0,0);" > |
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, prescribing a universal id attribute to it. For example, we make a bookmark from the h3 header tag:
Title text
It is important to write 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, return to the heading “ “, and then continue.
You can use hash links to go to the right place not only within one page, but also to go to another page of the site. To do this, we set the html anchor in the right place on the right page, and in the hash link itself, before the hash symbol, we write the address of this page. For example:
Link text to html bookmark anchor
Types and colors of hyperlinks in HTML.
- An unvisited link is blue and underlined.
- Active Link - Turns red in the time between clicking on the link and starting to load the new page. Of course, she hasn't been in this state for long.
- Visited link - changes its color to purple after clicking on it.
You can change the color of hyperlinks in an html document using the tag
and the following attributes:- Link - the color of unvisited links.
- Alink - active link color.
- Vlink is the color of visited links.
All of the above attributes can be combined:
| 1 | <body link = "#1122cc" vlink = "#6611cc" alink = "#d14836" > |
I hope it is now clear how to create a hyperlink on an HTML page and on an e-mail, how to make a picture a link, what are text anchors, hash links and html anchors, what are html tags and link attributes. I have tried my best to describe in detail what links are in HTML and what they are. Let me remind you that inserting hyperlinks into text is done only in HTML mode.
Never had to write such long articles, more than 10,000 characters. But this topic of links is not exhausted, to be continued.
If this article was useful for you, please click on the buttons of social networks below. See you on the pages!
The main distinguishing feature of HTML documents is the creation of special active links to other documents, which are called hyperlinks.
When you hover the mouse over them, the cursor takes the form of a hand, and when you click in the browser window, another web page or a specific document opens. Hyperlinks can be either text or an image.
It will work if the target document is located in the same directory as the current one. Also, you can specify the path to the file relative to the root directory of the website using the "/" character.
For example:
For example:
Creating hyperlinks in HTML is a simple process. By default, they are underlined and highlighted in blue, while visited ones are purple.
- link - color of web page links;
- vlink - color of visited web page hyperlinks;
- alink is the color of active links on the web page.
For example:
The specified attributes determine the link colors of the entire HTML document. If you paste this code in a tag
, you don't have to set the font color every time.Basic attributes of hyperlinks
1. title - allows you to create a tooltip text that pops up when you hover the mouse cursor over a hyperlink.
For example:
2. target - tells the browser in which window to open the link.
It can take the following values:
- _blank - the link must be opened in a new tab;
- _self - The HTML hyperlink must be opened in the current tab. Default value;
- _parent - the browser should load the link in the parent window;
- _top - the hyperlink is loaded over the entire space of the browser window (framing disappears in this case).
For example:
Link Name
Thus, the answer to the question often asked by novice webmasters " how to insert hyperlink in html» received.
We wish you success in learning web programming!