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 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.

Somehow 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 about this theme. 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.

Hyperlinks are one of the most important components of HTML documents. It is thanks to this component, as well as regular links, that the Internet is so easy to use. We will look at the simplest options for inserting hyperlinks, which will help you, as novice programmers, master this lesson.

How to create a hyperlink in html?

This code will only work on your website; it will not work for external links.

< a href=" *** ">***** < /a>

Example:

< a href="https://сайт/">Magazine How to do everything< /a>

In the browser it will look like this:

< a href="https://сайт/prigotovlenie-edy/368-kak-sdelat-malosolnye-ogurcy.html">How to make lightly salted cucumbers?< /a>

In the browser we will be able to see the following:

How to create a hyperlink in html to an external site?

For external links, the code should be slightly modified. To link to another site, use the code:

< a href="*** ">***** < /a>

< a href="https://vk.com/kaksdelatvse">We are in contact “How to do everything”< /a>

In the previous lesson, we looked at logical markup tags: headings, paragraphs, and learned about creating lists and how to format them. Now we’ll see how to insert images onto a page and set the style of elements using attributes. And more importantly, we will learn how to create a website - we will link our educational html pages with links.

We already have one page, let’s create another one: index.html- this is the standard name of the main page of the site. If you are seriously going to make a website, then it is useful to type the code manually. And for the lazy and practical: open the previous training html page in Notepad and set the name: index.html (File - Save As).

Don't forget about the file type and encoding - UTF-8 (see the first lesson on creating an HTML page in Notepad). Then open the index.html file in Notepad and edit it so that it looks like this:

For those who lack computer literacy: double-click with the left mouse button on the file .html will open it in your main browser. To open it in another browser, you need to right-click on it, select “Open with” from the menu and select the name of the browser. There you can select Notepad or another editor to edit the file.

Now let's see what we got in the browser. The light green background color of the entire page is set by the bgcolor attribute of the Body tag:

Like many tags, Body has several attributes that specify a particular style of elements located in this tag. For example, the text color can be specified with the text attribute. Because Body is the entire visible part of the page, then the parameter will apply to the entire text of the page.

To set the color of individual elements, such as paragraph P or headings, you can use the universal style attribute, example:

...

How to insert images

Place any images in the same folder as the two tutorial html pages. The folder itself can be called, say, Site1. Change the names of the image files to img1, img2, img3, as in the screenshot. Or change these names in our code to the names of your images, and if necessary, change the extensions (file format). I have these pictures of 3D people, in .jpg format:

You've probably heard the expression “Site root directory” - this is the directory (folder) where all the site files are located. It may contain other folders: with images, with script files, with individual sections of the site. In order not to get confused later in a bunch of files with different extensions, it is appropriate to create, for example, a separate folder for images. And for large sites - several folders of images for its different sections.

If your images are placed in a separate folder, for example, with the name “papka”, then the path to it (the value of the required scr attribute) will look like this: . If your images are not displayed in the browser, then there are only two reasons: the wrong file path or typo was specified. You've already noticed that the Img element doesn't have a closing tag. Let's look at other applied attributes of the Img tag.

In the second image img2.jpg: alt attribute - the value is text that is visible if the browser, for some reason, could not display the image. It is recommended to use the alt attribute and include keywords in it. The third image is placed in the P tag, and its location to the right of the paragraph text is determined by the “right” value of the align attribute, which serves to align the image.

It is also worth noting that in addition to the jpg format, gif and png formats are used in web graphics. It is advisable to learn how to optimize images for the web and use Photoshop. Optimized, lighter-weight images slow down page loading in the browser less.

By the way, you see indentations (various numbers of spaces) at the beginning of each line of code - they are not necessary. This is done for visual convenience to make it easier for the webmaster to edit the document in the future. But if you don’t make a lot of omissions and don’t leave empty lines, the html page will be smaller in size.

From the link: how to link html pages into a website

Links (hyperlinks) - tag A with the href attribute, the value of which is the path to the file (URL), I placed in the elements of the Li list, which we see in the screenshot (2nd) of the page from the browser. There are three types of links: the first links to the site where you are currently located. If you click on it if you have an Internet connection, you will be taken to the main page of my site. If you add “/index.html” to the URL, the result will be the same.

The second link, as an example, leads to a non-existent page spravochnik.html, located in the “papka” folder of my site. These two links have full paths to the documents they link to. The third hyperlink has a relative path. In order for it to work, you must have an index.html page in the same folder as the page where this link is located. In this case, it links to the same page (to itself).

Those. Links leading to pages on other sites may only include the full URL. And links to internal pages of the same site can have both a full and relative address. About attributes: the value of the title attribute (not to be confused with the tag) is the text that pops up when you hover over an element, see the 2nd screenshot. Title is a universal attribute; it can be used for the same images. The target attribute with the value “blank” opens the page in a new browser tab.

Now let's connect our two educational pages into a single site. Let’s add to both pages, immediately after the Body tag, two such lines (here the 8th and 9th) - two hyperlinks:

The first link leads to today's index page, the other to the second educational page (for me it is formatirovanie_teksta.html, you can have any other name). Essentially, we created a site of two pages, and these links are the site menu. I added three non-breaking spaces between the links to create an indent to separate the links. Click on the links in your browser.

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:

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

It should be said that the TABINDEX attribute can be used to select other objects, for example, graphic images.

Hello, dear visitors!

In this article I will show you how to add a link to a website in the form of a simple hyperlink, an image, and also a button that you can set your own design using CSS styles. All 3 options are very often used and have a pretty good effect when used by visitors.

Let's start with the simplest and reach the complex.

Regular link and hyperlink

http://site/poleznoe/kak-sdelat-ssylku-na-sait.html

This option has its place, but there is a significant drawback if we are talking about the effectiveness of such a link. It is not clickable, that is, you cannot go to it with a simple click of the mouse. This option is quite difficult for visitors to perceive.

Another thing is a hyperlink, which, when clicked, redirects to another document on the Internet, both internal (within the same site) and external (another site). An example of such a link can be seen below. Try clicking on the link.

The main page of my resource should open in a new tab. To implement this option, you must either use the tools of your engine, or write the following line in the HTML code.

Click here

If you have a simple website made in HTML, then you should write exactly this code in the page editor, changing my address to yours and specifying your anchor. It will look like this.

This is also very important, it is advisable not to throw the visitor out of the resource, but to leave him. Using this attribute, you will ensure that a visitor, by clicking on many links on one page, will not leave the current one, but at the same time will open many other pages. This is important if you are promoting a website.

You can add a title attribute to the link, which is a title tag and lets search engines know where the link leads. Also, this tag is displayed (if registered) when we point at a link in the form of a tooltip.

When using an engine, such as WordPress, adding a link to a site is very simple without any edits in html mode. The post editor has a special icon with a connection icon.

In the image I showed the whole process of adding a connection between text and another page.

1. First, select the phrase that you want to make a link;
2. Click on the add connection icon;
3. We set the link parameters (the address of the page where you want to redirect the user, as well as the title of the link, that is, the anchor, if necessary).

You don’t have to enter the link title, as it will be the text that was selected at the first stage. In the image I showed adding links from existing site pages. You can do this, then by clicking on one of the entries from the list, the URL and title will be entered automatically.

The URL can also be entered on an external site. If this is necessary, then enter the full (absolute) address of the page. To open a page in a new tab, there is no need to manually enter the attribute. The engine provides this option using one checkbox (see image above).

A little higher I said about the absolute address. This means that the full address of the page to which you need to redirect is written inside the link, regardless of whether it is our resource or another.

There is also a relative address, when it is not necessary to enter the full address. It is enough just to enter the path to some directory or page of the site, without specifying the domain name. Such links only work for pages within one resource. You can't refer to an external project like that.

If you want to dive deeper into the process of creating relative addresses, I highly recommend read this article on another resource. Everything is very coolly laid out there.

Link picture

Links in the form of images are also widely used, although they should be used only for their intended purpose. If we are simple links to other pages within our site, then it is better not to make them with pictures, since it is not always clear that you need to click on the image to get to some page.

It is advisable to do this when you want to advertise someone, for example, someone’s video course. In this case, you provide a regular hyperlink, followed immediately by an image link. In this case, it will be more clear that the image leads to the course website where it can be purchased.

If we take the html mode, then the principle of building the link structure is exactly the same, including all attributes. The only difference is the link anchor, which looks like the code for the image itself. In the previous case there was simple text.

In practice it will look like this.

As you can see, inside the opening and closing link tags there is an image code, which also has its own characteristics. You need to include the same title tag in it, indicate the path to the image on the hosting or on another resource. It is also worth specifying the image dimensions (width - width, height - height). And you should definitely include the alt attribute, which serves as a description of the image. If you write everything down, then image optimization will be up to par.

Here's what it looks like in html mode. I divided the code into 3 parts to make the link structure more understandable (clickable image).

The only difficulty here is to correctly enter the code of the image, which is used as an anchor.

Link button using CSS styles

If you want to do something differently, then this option also has a place to be. Moreover, it allows you to change styles so that when you hover over a button, both the button itself and the color of the inscription that will be inside it will change. If you take a picture, then it is not always possible to realize this. With styles, anything is possible.

Another very good advantage is that we can place the button strictly in the center and it will be clickable only in the area of ​​the button. If we take an image, then when we place it in the center, the entire width of the content area around the image will be clickable. Sometimes such a defect results in an accidental click on the image and, frankly, is annoying.

For example, I created a simple button that leads to the main page of the site. You can check its functionality.

Here is the button structure itself.

The principle is clear, so I’m giving the styles that I added to this link button.

/* button styles in normal mode */ #button ( display: block; width: 550px; /* button width */ height: 60px; /* height */ background-color: #ff4343; /* background color */ text- shadow: 1px 1px #800909; /* text shadow */ color: #fff; /* text color */ border-style: solid; /* button border line type */ border-width: 1px /* thickness button border line */ border-color: #db3a3a; /* button border line color */ font-size: 18px; /* text size */ line-height: 60px /* linear text height * / font-weight: normal; /* text weight */ font-family: arial; /* font type */ text-align: center; /* text-decoration: none; : 40px auto; /* indent the button from other elements on the page */ text-transform: uppercase; /* so that all letters are in capitals. If not necessary, remove the line */ ) /* button styles when hovering the mouse */ # button:hover ( background-color: #f23333; font-size: 19px; )