Good day to all, my dear friends and readers. I hope that you decided to take part in my contest and write about your blogging path. 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 would not be convenient in terms of navigation 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 is and how it differs from a regular link? Everything is really simple here: a link is a simple writing of information referring to some 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 learn how to select hair in Photoshop at //website/adobe-photoshop/kak-vydelit-volosy/
A hyperlink is the same text, only its essence lies in the fact that you can click on this text and get to the desired page, site or any other object. Moreover, the text itself can be any, while the address is already written inside separately and can be completely different. But be that as it may, all the same, in colloquial speech they are simply called links. Here is an example of a hyperlink:
You can read about how to properly select hair in Photoshop in one of my.
Anyway. Good theory. Now let's move on to practice and see which ones are responsible for all these things.
The pair 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 prescribe this very href. In the attribute value, we put the very link to the desired resource. And in the content itself, we write the text itself, which should become clickable (work on click). 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 are aware 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'll 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 put the link. For other options, everything is a little different.
File in another folder
- Open pushkin.html file in Notepad++
- Now find the word photo and wrap it in tags<href> .
- And now attention! In the attribute value, we write the path relative to the file being edited, that is, pushkin.html itself. You should have something like this:
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 have to first write the name of the folder, and then through the slash (/) the full name of the document (in in our case photos).
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 fofo.jpg file, which is located in the img folder.
Well, how? All clear? Feel free to ask if you need anything.
External transitions
And of course, we can’t help but mention external links, after clicking on which we will get to a completely different site. But there is nothing complicated here. The whole point is that you throw in the href value the full address of the site or web page. I showed an example with Yandex above. But here's another example for you:
I will study for the master of social projects.
Here we get to a specific page of a specific site.
Opening 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 crash. 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 just need to paste this inside the opening tag after the value of the href attribute. Let's take that excerpt from the lukomorye.html file, 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 do not register it, then 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 hands. No need to copy and paste.
Somehow like this. It seems that he told 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 check out great video course about this theme. The lessons are really excellent and are really told for people who are still little familiar with website building or are unfamiliar at all.
Well, that concludes our lesson for today. I hope that you liked my article and I will be glad if you become my regular reader. So do not forget to subscribe to my blog updates, so as not to miss something interesting. Well, I wish you success in all your endeavors. Bye bye!
Sincerely, Dmitry Kostin.
Instruction
Hypertext links are designed to link text, images, or other page elements to other hypertext documents. All elements of the site page, including links, are created by the browser, which receives detailed instructions from the page code sent to it by the server. This HTML (HyperText Markup Language) code is made up of "tags" that describe the type, appearance, and location of all elements on a web page. A standard hyperlink is created by the browser when it encounters, for example, the following tag in the page code: Text linkHere - the opening link tag, - the closing one. The opening tag may contain additional information - "attributes". In this simple link, the href attribute contains the address of the page or document that will be requested if the visitor clicks on the link. Sometimes it is not necessary to specify the full address - if the requested document is located on the server in the same folder (or a subfolder), then it is enough to specify only its name or the path to the subfolder. These are called "relative", they should, for example, like this: Text link When you click on this link, the moreText.html document will be loaded from the same folder. And absolute link addresses start with the protocol, for example: Text link Here "http" (HyperText Transfer Protocol - "hypertext transfer protocol") is the usual address of a document on the web. And if you specify the "mailto" protocol, then the hyperlink will launch your mail program, instead of going to: email-linkIn links to files located on the FTP server, respectively, indicate the FTP protocol (File Transfer Protocol - "file transfer protocol"): Link to archive
Another hyperlink attribute that specifies which window this new document should be loaded into is "target". If you can enter any correct address in the href attribute, then target can have only four values: _self - the page must be loaded into the same window or frame. "Frames" refers to one part of a window divided into several parts; _parent - if the current page itself was loaded from another window (or frame), then it has a "parent" window. And the _parent value requires that the page pointed to by the link be loaded into this parent window; _top - the new page must be loaded into the same window. If this window is divided into frames, then they will be destroyed upon loading, and the new page will be the only frame in this window; _blank - a separate window will be opened to follow the link; For example:
Link will open in a new window
It is possible to make a hyperlink to go not to another page, but to some given section of the same document. To indicate such a “destination” in the html code of the document, an anchor link is used: And the link that scrolls the document to this anchor looks like this: Link to the first anchor of the page pageOf course, in the html code of another document, there must be such an anchor link with the name="Anchor1" attribute.
A hyperlink can be not only text, but also other page elements - for example, pictures. The simplest tag that draws an image looks like this: 
And for the image to become a hyperlink, it should be enclosed between the opening and closing tags of the link:
Hyperlinks were invented in order to link documents on the network to each other, and if your site does not consist of one page, but of several, then you can link them together only by creating hyperlinks. Let's look directly at an example of how it looks.
Create a simple hyperlink
Go to another page
Opening a link in a new page
There is another interesting attribute that you may find useful:
Go to another page
The target attribute with a value of _blank opens the link in a new window, this is often used if you do not want the person to lose your page and at the same time get the information they need just in a new tab or window.
Image links
Result in browser:
Essentially, everything is simple here, I put the image tag between the opening and closing hyperlink tag , but again, I didn’t just insert two images, I assigned the img class to one in which I reset the frame around the image, since when it becomes a hyperlink it appears, but not in all browsers, for example IE you will see, but not in Google Chrome.
Underlining in links
Go to another page
Go to another page
For clarity, I gave two options for solving this problem, assigned it to a class selector, and by prescribing this class you will remove unnecessary underlining in specific places. The second solution to the problem is to remove the underline from all links in the tag<а>, which of course rarely causes a need, but still knowledge is not superfluous.
Links within a document
It is not uncommon for a document to be long enough and a small menu is made at the beginning of the page with links to subsections of this page. These links are called links within the document, and all this is implemented quite simply. To begin with, anchors are placed in the document, these are marks, they are placed in the document where it will be necessary to move when clicking on an internal link, as a rule, these are section headings, the label looks like this:
And the last thing we need to know about hyperlinks is links to electronic mailboxes, it is implemented very simply, just add a mailto: entry to the href attribute and the mailbox address:
This concludes the lesson “Creating hyperlinks in html”, as you might have noticed, we didn’t do without CSS here, in general, the material is quite simple, I think everything will be simple and clear for you, write questions.
Publication date: 2014-04-23
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 the home page of this site, you would 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 an 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, after clicking on the internal link to the title, the URL in the browser address bar has changed:
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 long article about something (or posted a large number of photos on the page) and marked it up 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 a 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
In order 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, the mail program window will open with the 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.
How to create links in an HTML document(You will find more examples at the bottom of this page)
HTML Hyperlinks (Links)
- To create a link to another document - using the href attribute
- To bookmark inside a document - using the name attribute
HTML Syntax Links
Example
| Visit site |
it will be displayed by the browser like this:
HTML Links - Target Attribute
The target attribute (destination) specifies where to open the linked (the one to which the link refers) document.
The example below will open a linked document in a new browser window or tab:
HTML Links - Name Attribute
The name attribute is used to create a bookmark ("anchor" / "anchor") within an HTML document.
Comment:
For the foreseeable future, the HTML5 standard suggests using the id attribute instead of the name attribute to specify the name of a link.
Using the id attribute actually works in HTML4 in all modern browsers as well.
Bookmarks are not displayed in any special way. They are not visible to the reader.
Comment: Always add a trailing slash to subdirectory links. If you create a link like this: href="http://site/html", then two requests to the server are generated, first the server adds a slash to the address, and then creates a new request: href="http://site/html/" .
Advice: Named links are often used to create a "table of contents" at the start of a large document. Each chapter within the document is assigned a named link, and links to each of these named anchors are inserted at the beginning of the document.
Advice: If the browser does not find the specified named link, it goes to the beginning of the document. No errors occur.
