Hyperlink in html language is drawn up. Embedding images and links in html. Underlining in links
"Hyperlinks in HTML" is the fifth lesson of the HTML tutorial. This lesson will focus on using hypertext links. Any web document is based on hypertext links, so every web master must be able to work with links.
Rules for the use of hypertext links.
Hyperlinks in HTML are necessary for the connection of various documents, both within the same site and within the entire Internet. To create hypertext links (hyperlinks), a descriptor is used :
The href attribute is used to pass the address of the document that the link points to.
A wide variety of objects can act as hyperlinks, including images:
– meta tags in HTML.
You can refer not only to different documents, but also to different parts of these documents. To do this, in some part of the document, it is necessary to place the so-called anchor - a construction of the form , and then refer to it by specifying the following code in the href attribute:
href="http://www.site.#anchor name"
If the browser cannot find the specified named anchor on the called page, then the transition will simply go to the beginning of the document, and no errors will occur.
Hypertext links can be implemented over a variety of protocols. The most commonly used are listed below:
- HTTP– protocol – a standard protocol for hypertext links, designed for a one-time transmission of blocks of information.
- FTP– protocol – universal file transfer protocol. Requires authorization.
- MAILTO– standard mail transfer protocol.
Setting up hyperlinks in HTML.
The target attribute of the tag determines how a new page will open and takes the following values:
- _self - the document will open in the current window
- _parent - in the frame - the parent of the current frame
- _top - in the main window of the entire frame structure
- _blank - the document will open in a new window
For example, to open a page with contacts in a new window, you must use the following code:
- Link - defines the appearance of unvisited links.
- Alink - determines the appearance of already visited links.
- Vlink - defines the appearance of selected links.
In the next lesson, we will talk about working with graphics in HTML: we will learn how to insert images, customize them appearance etc.
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 the 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:
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 questions and more 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 influencing the ranking of your site for the 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 references, 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 home
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, a 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!
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 simply 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
A hyperlink is the main element of hypertext, a distinctive feature of HTML documents that links web pages and other files to each other. For many people, the word "Link" is not unreasonably associated with the word "Internet".
Simple Links
HTML uses a tag to create links. and its attributes.
Let's go from simple to complex and first learn how to add elementary links to an HTML document. We need the following elements of the language:
href- tag attribute , whose value will be the address of the link. Whether you are linking to a site, web page, or file, it doesn't matter, only the value of this attribute will differ.
Now consider a line of HTML code:
Now consider each element of the string.
is the tag responsible for creating the link.
- closing tag.
Between characters > and < the text Link is located. The user who opened the page will see it, he will click on it to go to the address specified in it.
For example, at the bottom of an HTML document, you want to place a "Top" link that will point to its beginning, the "Top of Page" heading. To do this, you need to put an anchor at the beginning of the page, and a link to it at the bottom of the page.
Let the anchor be called begin. Then in the tag, to the content of which the link will lead, you need to add the attribute id with meaning begin.
Top of page
The anchor is set, and now it remains only to add a link leading to it. In our case, it will look like this:
Please note that there is a hash mark in front of the anchor name - this is a hallmark of internal links.
Graphic Links
With the advent of HTML 5 tag turned into a container capable of containing block elements, so now a link can be not only text or an image, but even a table, list or an entire page.
Links to e-mail and Skype
For the convenience of site visitors, you can not only indicate your contact details on the page, but also make them active so that when you click on the e-mail address, the user immediately opens the mail client, and when you click on the Skype login, the program immediately asks for permission to call.
Loading...