1. To create a link to another document - using the href attribute
2. To make a bookmark inside a document - using the name attribute

HTML Syntax Links

Example

it will be displayed by the browser like this:

HTML Links - Target Attribute

The target attribute specifies where to open the linked (the one to which the link refers) document.

The example below will open the linked document in a new browser window or tab:

HTML Links - Name Attribute

The name attribute is used to create a bookmark (“anchor”) within an HTML document.

Comment:
The upcoming HTML5 standard suggests using the id attribute instead of the name attribute to specify the name of the link.
Using the id attribute actually works in HTML4 in all modern browsers.

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 are generated to the server, 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 beginning of a large document. Each chapter within a document is assigned a named anchor, and references 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.

Let's look at the use of hyperlinks using example No. 1.

View specification HTML 5 you can here.
The page will open in a new window.

You can download tables of elements and attributes here.

Example No. 1. Using hyperlinks

Using hyperlinks to create anchors on a page

The "a" element can also be used as a hyperlink to navigate within a page. To do this, in the right place in the document you need to create anchor(from English anchor), i.e. bookmark and specify it as the target of the hyperlink. An anchor is created using an empty "a" element whose opening tag specifies the attribute. You can also use the required markup element as an anchor, to which an internal hyperlink will later lead. To do this, you just need to specify the attribute in it. Next, in the href attribute of the hyperlink itself, the value is the hash symbol "#" and the value of the anchor attribute. To make it clearer, let's consider everything using example No. 2.

I am the first paragraph.

View attribute table HTML 5 Can
on the official website here.
The page will open in a new window and will
scrolled to the table with attributes.

You can go to the first paragraph here.

Example No. 2. Using internal hyperlinks

Notice the anchor in the absolute address specified as the value of the href attribute in the second paragraph of the example. When using such a hyperlink, the browser will first go to the specified address and then scroll the page to the location of the specified anchor. If there is no anchor on the page, the page will be shown from the beginning.

Relative hyperlinks and construction of relative addressing

In conclusion, let’s consider the principle of construction relative addresses. Let our hyperlink be located in a document located on a local server at http://localhost/site/doc_1/doc_2/ ... /doc_n/ web_page.html, where doc_n is the folder of the nth nesting level. In this case, the doc_n folder, in which our document with the hyperlink is located, is automatically taken as the basis against which all addressing is based. So:

• If you want the link to point to the target document new_page.html, located in the same doc_n folder as our source document with the hyperlink, then you simply need to set the name of the target document as the value of the href attribute of the link: href="new_page.html" .
• To navigate to the target document new_page.html located in the folder http://localhost/site/ doc_1/ doc_2/ ... /doc_n/ doc_n_1/ ... doc_n_k/, the value of the link's href attribute should only include folders nested under doc_n , and of course the name of the target document: href="doc_n_1/ ... doc_n_k/ new_page.html". Thus, we tell the browser that it should go to the doc_n_1 folder, located in the doc_n folder with the source document in which the hyperlink is written, then to the doc_n_2 folder, and so on, until it gets to the doc_n_k folder with the target document located there, which it and must open.
• To get to a folder at a level higher than the original one, use a special combination of characters "../" . To move up n levels, you need to write the combination "../" n times in a row. So in our case, to follow a link to the target document http://localhost/site/doc_1/doc_2/ ... /doc_n-3/ new_page.html The href attribute of the link should have the value "../../../new_page.html" . This tells the browser that it should go to the doc_n-1 folder, then doc_n-2 and doc_n-3, and then open the target document new_page.html located there.
• If it is necessary not only to go up several levels, but also to go into a folder (or several subfolders) there in order to gain access to the target document, then in the value of the href attribute of the link, you first need to specify the required number of levels to go up using the symbols ". ./" and then add the path from the resulting folder to the target document. For example, if the target document is located in the new_doc folder and the address path to it is like http://localhost/site/doc_1/doc_2/ ... /doc_n-3/new_doc/ new_page.html, then the href attribute of the link must have the value "../../../new_doc/new_page.html". Those. we tell the browser to go up three levels from the source doc_n folder that contains the hyperlinked document, and then go to the new_doc folder and open the target document new_page.html

As an example, you can download a training minisite built entirely on relative addressing. After viewing, experiment by changing and creating new links, folders, and pages.

Relative hyperlinks very convenient for developing browser-based off-line applications, such as help guides. However, you should remember that when you move a document from the current folder to another, all relative links in it will stop working. Therefore they will have to be rewritten. If relative links point to files that are also located inside the current folder or in subfolders, then after moving this folder to another location, all links in the document will remain working.

If you need to start counting the relative path from the site root, you should write a slash "/" at the beginning of the path. For example, link " Home" points to a document that is located in the site's root folder (not the current one!). Keep in mind that counting from the site's root only works under the control of a real web server. On a local server, for example, Xampp, counting should start from root folder name.

The link address can be absolute or relative. Absolute addresses work anywhere and everywhere, regardless of the name of the site or web page where the link is registered. They begin with an indication of the data transfer protocol. So, for web pages this is usually HTTP (HyperText Transfer Protocol), accordingly, absolute links begin with the http:// keyword (example 1).

Example 1: Using absolute references

Yandex search engine

Examples of relative addresses

/
/demo/ These two links are called partial links and tell the web server to load the index.html (or default.html) file that is located in the site root or demo folder. If the index.html file is missing, the browser will typically show a list of files located in the given directory.

/images/pic.gif A slash before the address indicates that addressing starts from the root of the site. The link leads to the picture pic.gif, which is located in the images folder. And that, in turn, is located at the root of the site.

../help/me.html Two dots before the name tell the browser to go one level higher in the list of site directories.

manual/info.html If there are no additional characters, such as dots, before the folder name, then it is located inside the current directory (example 2).

Example 2: Using relative links

Look at my photo!

How to take the same photo?

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 learn 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 called simply links. Here is an example of a hyperlink:

You can read about how to properly highlight hair in Photoshop in one of my tutorials.

Anyway. 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 “Yandex search engine”, a 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

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.

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.