“Hyperlinks in HTML” is the fifth lesson of the HTML textbook. 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 using hypertext links.
Hyperlinks in HTML are necessary for connecting various documents, both within one site and across the entire Internet. To create hypertext links (hyperlinks), a descriptor is used :
The href attribute is used to convey the address of the document to which the link points.
A wide variety of objects, including images, can act as hyperlinks:
– 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 you need to place a 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 page being called, then the browser will simply jump to the beginning of the document without any errors.
Hypertext communications can be carried out using a variety of protocols. The most commonly used ones are presented below:
- HTTP– protocol – a standard hypertext communications protocol designed for 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.
target attribute of 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 that is 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 need to use the following code:
- Link – determines the appearance of links that have not yet been visited.
- Alink – determines the appearance of already visited links.
- Vlink – determines 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 and customize them appearance etc.
A hyperlink can link pages within one site or point to any page on the Internet. When building links to other people's pages, you should always use the absolute address of the page (http://www.site.com/page.html). If you are creating a link to a page within a site, it is preferable to use a relative URL (page.html, catalog/page.html). When creating a graphical hyperlink, remember that graphics may not be accessible to some users, so be sure to include appropriate text elements.
Example:
Hyperlink within an html page
Sometimes it is necessary to create a hyperlink within one page. For example, on this page there are hyperlinks at the beginning of the lesson, allowing you to go to view a specific question, and at the very bottom of the page, allowing you to go to the top of the page.
Example:
Postal hyperlink
Example:
|
HTML code: |
Browser display: |
Opening html pages in a new window
Using the TARGET attribute, you can load the page in a new browser window. This attribute is intended to specify the name of the window. The window name is used for official purposes. To open a page in a new window, you need to use the _blank constant.
Example:
Hyperlink text color
The attributes LINK, ALINK, VLINK specify the font color of hyperlinks.
The LINK attribute is used to highlight hyperlinks that have not yet been visited by the user.
Procedure for following hyperlinks
Some browsers may support the ability to navigate hyperlinks using the Tab key. In this case, the browser by default highlights hyperlinks in the order they appear in the page text. You can change the transition order using the TABINDEX tag attribute . To include a hyperlink in the list describing the new navigation order, you must assign the TABINDEX attribute some positive integer number in the range from 1 to 32767. To exclude a hyperlink from the list, you must assign any negative number to the attribute. When the user presses the TAB key, the cursor moves to the hyperlink with the smallest positive index value. If multiple hyperlinks are assigned the same index value, the first one selected is the one that appears higher in the page text.
It should be said that the TABINDEX attribute can be used to select other objects, for example, graphic images.
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 simply called links. Here is an example of a hyperlink:
You can read about how to properly highlight hair in Photoshop in one of my tutorials.
Oh well. 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 “ Search engine Yandex", the 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<a href> .
- 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:
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? Is everything 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 content desired page opens 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.
Well, something 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 check it out excellent video course on this topic. The lessons are really excellent and are really told for people who are still little or not familiar with website building.
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.
In this tutorial we will learn how to make hyperlinks. Without them, no full-fledged website is possible. A hyperlink is a link that, when clicked, takes the browser to another page on the Internet, or to another site, or to a specific place in a document, in general, wherever we designate it. For this tutorial, you need to do some prep work: create new page with the name third_page.html .
Create a list like this on the page:
- Home page
- First page
- Second page
The code looks like this:
- Home page
- Second page
- Third page
Now we will make a menu from this list, each line of which leads to another page. This can be done using hyperlinks. The hyperlink tag looks like this:
Here inside the list element tag (
The code will look like this:
Open the page in your browser, click on the links, see how the page navigation works. If your links do not open, then follow these steps:
- Check that all files (index.html, second_page.html) are in the same folder as third_page.html
- Delete cookies in your browser
- Restart your browser, then reload third_page.html
Thus, we learned how to make the simplest links, without which it is impossible to imagine a single page on the Internet. With Dreamweaver, you can make hyperlinks faster and easier.
Create a new page called: third_page.html. Create a list similar to that, which we described when working in notepad.
Dreamweaver uses a window to create hyperlinks Link(number 1). Select the text: Home page. In the tab Files(number 2) left click on the file index.html(number 3) and without releasing the button, drag it into the Link field. The selected text in your design field should change: the font color will turn blue and an underline will appear. So we created our first hyperlink.
Select the text "Third Page". In the Link field enter: http://www.mail.ru/
View the page in your browser.
In this chapter, we learned how to create basic hyperlinks. These skills will help us in the future to create beautiful and user-friendly websites. In the next chapter, we will learn how to create tables.
Hyperlink is an indication to the browser which object within or outside the HTML document it should access. Using hyperlinks, users can move from one page to another, download files, etc. A fragment of text or a picture (graphic file) can be designed as a hyperlink. When a web page is displayed in a browser window, the text link is usually highlighted in blue and underlined. However, this is not always the case. To go to the location pointed to by a link, the user just needs to click on its text.
To create a hyperlink you must use tags And, defining for the tag attribute HREF. Its value must be the URL that the link points to. Link text is placed between tags And.
If the web page to which the link points is located on another site, then the value of the attribute HREF must be a full URL including the protocol name; such links are called external links. If the hyperlink points to another page of the same site, then to search for a document it is enough to specify only a relative path; such a link is called an internal link.
A hyperlink can point to a specific location within a page if an anchor tag is first embedded there. Tags are also used to define an anchor And, but instead of an attribute HREF set the attribute NAME, whose value must be the name of the anchor. It can consist of letters and numbers, but must not contain space characters. If there are several labels on a page, then they should all have different names.
To create a link to the installed anchor you need in the tag put its name at the end of the URL after the document name, separated by # . Symbol # means that it is followed by the name of the tag, not the file name.
Link text
If in the attribute HREF set the address email with the word mailto: in front of it, then after selecting such a link you can send a message where in the field "To whom" this address will be recorded.
The example below discusses the use of various types of hyperlinks.
HTML document that uses hyperlinks and anchors:
New versions of standard programs for operating system Windows and drivers can be found on the company's website Microsoft.
And now you can go to the main page of the site.
You can find out how to contact me at the end of this page.
in this text document.
This is what the HTML document will look like after it is played by the browser:
New versions of standard programs for the operating room Windows systems Drivers can also be found on the Microsoft website.
You can use the materials that are posted in this text document.
In this example, the word "Microsoft" is contained in the external hyperlink tag, and the text "site home page"- in the internal link tag. Text "at the end of this page" placed in the anchor link tag, and "in this text document"- in a hyperlink tag with an attribute HREF, in which we specified a connection not with a web page, but with text document, which is saved in the same folder as the current HTML document. Text " [email protected] " are located in the tag describing the anchor label, and in the attribute HREF email address provided.
If a page visitor uses external link Microsoft, the page containing the following address will open: http://www.microsoft.com/. After clicking a hyperlink "site home page" will open home page site. Clicking on an internal link in a text document will open a window with the text document text.doc contained in the current folder. If you use the anchor link at the end of this page, the image of the current page will shift so that the label text " [email protected] ", with which the anchor is associated, will be placed in the visible part of the document on the screen.
Place the text " [email protected] " is a hyperlink, using which the user will be able to send a letter using the email configured on the computer to the one specified in the attribute HREF address - [email protected] .
Let's look at another example of creating text hyperlinks. Let's assume that two HTML documents are saved in a certain folder, describing two areas of the company's work - 1.html And 2.html.
Let’s create a list of hyperlinks, each of which illustrates one of the company’s areas of work:
Our products
Our customers
Result:
Our products
Our customers
In this example, hyperlink tags are contained within first-level heading tags. The hyperlink texts will be located on separate lines and designed as first-level headings.
By default, text hyperlinks are displayed in blue and underlined, and if they have already been used, then in dark red. To change these colors, add the corresponding attributes in the tag : . This means that after the page first loads, all hyperlinks will be purple, and if a visitor uses one of them, the color of their text will turn yellow. This is convenient when there are many links on the page, and the visitor wants to view them one by one: then substituting a different color for the visited hyperlinks allows such viewing to be systematized.
