Options for styling links in CSS. Including CSS in HTML (page 3)

Hypertext is text that contains links to other text. An example would be the author's notes on complex definitions or translators' footnotes at the bottom of the book page if it contains text in a foreign language. Internet sites are a complex system of hypertext transitions from one page to another, within the page itself, as well as between resources unrelated to a single topic. This structure is practical, saves a lot of time, allows the visitor to quickly find necessary information and don't get confused large quantities transitions.

Inserting a hyperlink

In HTML, a descriptor (tag) is used to insert a hyperlink. , which is inserted into the desired location. It is usually placed among the text, since the hyperlink itself is a text structure. But links can also be graphic (icons, buttons, pictures); they will be discussed further. Their location on a web page is not limited to text, but depends on the design decision of the site creator.

Google home page

This is an example of how to insert a hyperlink into an HTML document, which is done using the tag . A site visitor will see underlined text, different from the color of the surrounding text (the color of the HTML link can be any), “Google home page”, clicking on which will take him to the main page of the Google search engine. It should be noted that the text of the hyperlink must contain information about where the transition will be made. This principle should be adhered to and accepted as a rule!

Tag structure ...

You can notice that the tag - paired: closing tag required.

href—attribute tag, indicates the purpose of the link.

https://google.com/ - attribute value, which contains the URL of the resource to which the transition will take place. It is enclosed in double or single quotes. It depends on the tag nesting structure according to HTML rules.

Google home page

this whole structure is called element web document.

According to HTML rules, some elements can contain other elements. Tag not an exception. If a programmer needs to highlight the word Google in bold, then this is done using a tag according to the general rules of text formatting, observing the sequence of nesting of tags. A webmaster must know how to create a hyperlink in HTML without errors, otherwise they will not work. Broken links are called “broken” in computer slang.

home page Google

Here: element

home page Google

contains a nested element

Google

Absolute hyperlinks

protocol://domain name/path to file

An example of an address for a search engine common in America: https://aol.com - absolute, since it contains the domain name.com.

Absolute hyperlinks are used to navigate to pages on other sites or to access resources located on another server. The transition is carried out using Internet protocols. Protocols are not the topic of this article, but since they are involved in creating hyperlinks, it is necessary to at least briefly mention them:

• http And https - most common; they are used to navigate between Internet pages of different sites;
• ftp - protocol for uploading files to the server or downloading by the user from the site;
• mailto - postal protocol used to send Email directly from the site, without going into your personal email.

There are several other special-purpose protocols (gopher, telnet), which are quite rare, the use of which requires special knowledge in programming or system administration.

Relative hyperlinks

With relative addressing, the use of hyperlinks in HTML serves to navigate within the resource and does not lead beyond its boundaries. If the page is so big it works vertical stripe scrolling, sometimes very long, as, for example, in dictionaries, it is very convenient and advisable to use relative links for quick transition to the desired letter.

When creating an online dictionary, the programmer places the alphabet at the beginning of the page, and if it were not for the use of links, the user would have to turn the mouse wheel for a very long time to get to the letter “I”.

Go to letter I

Where ya called anchor, A Go to letter I- destination anchor. To display anchors correctly, it is recommended to use Latin letters and numbers, so you shouldn’t write “I”, although it would be clearer.

Now, in order to transition from the alphabet at the beginning of the page to the letter “I”, you need to anchor the anchor in the place in the HTML document where words starting with the letter “I” begin:

letter I

there is a hash sign in front of the anchor, without which the transition to the letter will not work.

Relative addressing when creating a site

A convenient and most generally accepted algorithm for creating a website by a programmer:

• creating a folder on your computer and placing it in a location quick access for comfort;
• creating the main folder in this folder;
• creation of secondary web pages (index.html/page2);
• and placement of graphic files in it;
• creating a folder and placing other objects in it (files for downloading, for example);
• filling the site with content;
• hosting site files.

You will definitely have to use links to connect between site elements, and it will be very useful to know how to insert a hyperlink in HTML to another page of the same site. If the site files are located in the same directory, on the same server, then there is no need to use absolute addressing. When transferring site files to the hosting, the connection between the objects will be preserved, because they will also be placed in the same directory on the hosting.

Let's say a programmer has created the main page of the site index.html, which has a link to another page page2.html, decorated with an img.png image. Then relative path this picture will look like this:

picture

Tip: When studying this topic, it is best to use a simple text editor due to the fact that you need to gain dexterity in correct spelling transition addresses and to learn to understand someone else's code. At this stage there will be good result a hyperlink written in notepad without errors,HTML does not forgive them and produces errors.

Methods for following hyperlinks

Default new page opens in the current browser window when the user clicks on a hyperlink. But a web programmer can change the default value and force the page to open, for example, in a new window. There is an attribute for this target with a certain meaning. This can be most clearly expressed in a table.

Attribute syntax target:

Google home page

The Google home page will open in a new window.

Note: to open pages in a new tab, there are no values ​​for this attribute, but is set by the user himself in the browser settings.

Hyperlink color

An experienced Internet user should have noticed over time that hyperlinks are a different color from the surrounding text, and they are usually blue. Links that he followed and then returned to the previous page turn purple. Using hyperlinks in HTML in non-standard color scheme not much, but it makes the site stand out from the rest.

Set the colors of links in the tag using attributes and their values, in which HTML color in the rgb system (#00FF00) or with a direct indication of the color name (“green”). There are three types of attributes for links:

• link — sets the color of an unvisited link;
• vlink - sets the color of the link that the user has already followed;
• alink - sets the color of the link at the time of transition to another page. This happens quickly, so it is not always possible to catch this effect.

Markup example:

If you apply these attributes in a tag , links to this web document will be dark blue, visited links will be purple, and active links will be orange-red.

Graphic hyperlinks

The progress and development of web design requires you to know how to insert a hyperlink in HTML as an image. It is clear that the image must correspond to the content of the destination page. For example, home page website about medicinal plants can be presented in the form of photographs of plants, by clicking on which the user will be redirected to a page that describes the medicinal properties of the plant.

A widely used method for replacing static buttons ( ) to beautiful graphics created by a web designer in graphics editors (GIMP, Photoshop).

To insert graphics as hyperlinks to site pages, the same syntax is used, but instead of text, an image insert tag is used according to HTML rules:

The same applies to the attributes for setting alternative text, width, height, and others.

Calls from the site

The html5 standard has been extended functionality use of the Internet, and now you can make calls not only from your phone, but directly from the website. You can also use hyperlinks for this purpose. HTML document, and they have this syntax:

...subscriber...

Instead of the word “subscriber”, a contact that is understandable to the caller is written, as in phone book. You can also place graphic file(photo of the subscriber).

In order for calls to be made from the site, it is necessary to have not only a link to the subscriber’s phone number, but also a headset (microphone, headphones), a VoIP program installed on the computer, and the Internet speed must exceed 0.5 Mb/sec. Payment for calls is carried out by traffic consumption. Therefore, if the Internet is unlimited, then calls are free.

The Ethics of Creating Hyperlinks

When placing a website on the Internet, a webmaster must know what types of hyperlinks exist in HTML, and not only apply them correctly and professionally, but also adhere to the following provisions:

• The hyperlink should be clearly visible and distinct from the surrounding text. The user must know that this is a hyperlink.
• It should be clear to the user where he will go when he clicks on the link. For this it is advisable to use another attribute title, which succinctly describes the transition page. The syntax for using the attribute is:

Yandex

• The user must receive true information about the file that will be downloaded when clicking on the link.

If the user lands on a page that is not the one he expected or downloads the wrong file, in 99% of cases the user will immediately leave the site and will never visit it in the future.

Anti-Seo when creating hyperlinks

Except technical side The question of how to insert a hyperlink in HTML should also cover the moral aspect. There are many sites that users are blocked from accessing by security programs (antivirus) or even by the government. These are the sites that were created by dishonest web programmers.

One of the tricks they resort to is inserting "invisible" hyperlinks into a web page. Fraudsters know how to create a hyperlink in HTML, and use attributes to remove the underline of the link and assign it the color of the surrounding text so that the average user does not see it. And with the help of other web technology tools (CSS, JavaScript, PHP) you can program their behavior. For example, the OnMouseOver event JavaScript language activates the action of a web page element. When a user hovers over an invisible link, they are taken to advertising page another site. Or even worse, when there is an invisible link to a file and unnecessary things begin to be downloaded and installed on his computer software. Usually these are viruses that change home page browsers are cluttered HDD a lot of programs and so on.

Soon such sites will be blacklisted virus databases, security systems and among Internet users themselves. Such sites do not last long, and they have to change their names, endlessly migrate across the Internet, changing host providers. This does not contribute to the promotion of the site, which is what its creator always strives for, and will never make it a mega-portal, such as, for example, social networks. Among other things, such tricks cause a lot of negative emotions in people affected by these actions.

(You will find more examples bottom of this page)

HTML Hyperlinks (Links)

Tag can be used in two ways:

Bookmarks are not showing up in any way in a 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 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 links 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.

Often this link is not very noticeable. Only those who realize that the article did not end at the second or third paragraph, and that there is something else there, will specifically look for it. To somehow highlight this link, you need to format it accordingly. But how to do this correctly? After all, if you look into the code of the majority WordPress templates, then you can find that the text of this link is, as it were, “hardwired” into the PHP code for displaying the article. For example, like this:

Designing the more tag in WordPress. Method 1

Firstly, at WordPress engine There is already a provision for this in the form of the more-link class. That is, no matter how you distort the template, the engine itself will in any case substitute class="more-link" for this link. And this is a very useful thing. It says that we can easily use this class by simply adding a certain set of rules for it to the sheet css styles our topic. In fact, all we have to do is add something like this to the style.css file of the template:

More-link (
background: #ffc;
}

But! There is a small ambush here. The fact is that we cannot be too free with this link for one simple reason: this link inherits all the rules that are already predefined for links in the post. The background can be changed, the font size can also be changed. But you can’t change the color of the links. In addition, replacing a text link with a picture is also not an easy task. Therefore, we read another way.

Designing the more tag in WordPress. Method 2

Secondly, you can put this link in a separate block, which can be given any display rules you like. How to do it? Lehhhko and at ease! First, in the index.php file, let’s slightly correct the place where it says about displaying the contents of the article. It's still the same part:

Here we will simply remove everything between the single quotes and leave something like this:

If any class of the entry type was responsible for displaying the text, then it’s time to close here this block(put