Before you can make a link in HTML, you need to understand what it is and what their types are. Any link starts with the <a> tag and closes with the </a> tag. Only what is between these tags is displayed to the user. The browser itself does not show the link. It can be seen when you hover in the status bar.
All links can be divided according to different criteria and types. For example, you can share links by purpose:
- inside the document;
- to another web page;
- to various files;
- to mailing addresses.
In addition, the 2nd and 3rd points can be divided into absolute and relative addresses. More about this later. Now consider the simplest case.
How to make a link in HTML? To do this, you can open notepad or any other editor and rewrite the code above.
The result will be the following.
What does the link consist of?
Remember that any links are required:
- opening and closing tag;
- link text;
- href attribute, which indicates the address where the user will be directed.
Other attributes are optional. I use them at my discretion.
As you can see, the first picture shows the pages / about.html link. This is a relative link. In the image above, the link starts with http: //. In this case, an absolute link is used.
If you do not specify a closing tag, then everything subsequent will also be a continuation of this link. Be careful. When writing code, immediately put the opening and closing tags. It’s safer.
How to make a picture a link in HTML?
Instead of text in the tags <a> ... </a>, you can specify images. That is, if the user clicks on the picture, then follow your link.
This method is used very often. Especially on the menu on beautiful sites. Layout designers before creating a site’s wireframe design always think how to link to a page in HTML. More precisely, in what form do all this. All the methods that the webmaster owns are used. Design consider a little further.
How to make a link to a file in HTML?
You can specify file links in the href attribute. This usually happens when they indicate a link to download a file (archive, film, music, book, text file, and so on).
In other words, you can specify anything in the address. If this is not a web page, then the browser will try to download it.
Links within the page
Surely you visited Wikipedia at least once. There is the content of the article. And when you click on any item, you are transferred to the corresponding subtitle. Such links are called links within the document or bookmarks.
How to make a link inside the page in HTML?
Everything is very simple. We indicate links in the text with the attribute <a>, but do not specify href. You need to write the name attribute and set a unique name inside the document. And in the place where you provide links to these notes inside the document, in the href attribute we write first the grid, and then that unique name.
As soon as the browser sees the # symbol in the address, it understands that you need to refer to some element inside the same document.
Email Links
Sometimes you need to provide an email link. It can be done like this.
After clicking on this link, the user opens the mail management application. This is usually standard Outlook. But this program is usually not configured for anyone. Therefore, usually an email address is simply indicated as text.
Attributes
If you figured out how to make a link in HTML, it is recommended to examine the remaining attributes of the <a> tag. This is very important information. Consider the most basic:
- Title attribute - creates a tooltip when hovering over a link. It is very convenient. Thanks to this, you can provide additional information to the user.
- The target attribute is the place where the new document (web page) will be uploaded. Here can be the following values:
- _blank - a new browser window will open;
- _self - opening in the current window, this is the default value, it is not necessary to specify it;
- _parent - loading into the parent frame; if they are not there, then the attribute takes the value_self;
- _top - cancel all frames and load the page in full browser size. If there are no frames, then an analogy with _self occurs.
- Download attribute Thanks to it, you can force to download the file that is specified in the href attribute. This parameter has no value. We simply indicate <a download href="img/photo.jpg"> Link to the file </a>. If you do not specify download, then the browser will simply open the photo. In this case, it starts downloading to the computer.
Link Design
If you understand how to make a picture a link in HTML, then it is advisable to make sure that it looks normal. By default, a frame appears around the image that is the link. She looks rude and ugly. Since its thickness is 3 pixels.
To avoid this, you need to specify border = "0". That is, the border will be zero. Here is a link from the picture will look beautiful and acceptable. Otherwise, you will scare all visitors to the site.
Conclusion
Links, at first glance, are a very simple tag. But if you go deeper and consider all kinds of links and attributes, it turns out that not everything is so easy and cloudless.
Remember, links are the backbone of the World Wide Web. Without them, she would not exist.