How to insert a hyperlink in HTML? Creating and using hyperlinks in HTML. Link color
The main feature of an HTML document is the presence in it hyperlinks(or just links) to other documents, sites, files, pictures, etc. It was the ability to insert links into pages to objects outside of it that made the Internet so popular and easy to use. Therefore, when creating your website, always remember the “magic” of links.
In this lesson we will talk about how to create a link to the site, to its separate page or file. You will learn how to change the text of a link, how to open it in a new window, how to make a link to an image, what external and internal links are, and much more. Plus, you already have information about working with links, which we touched on in previous lessons (for example, we talked about how you can change the color of a link in).
Overall, this tutorial will make your understanding of link creation complete and sufficient. You will understand how to create a hyperlink in HTML and why. And you will learn to control its properties.
§ 1. Link to file, link to website, link to page
Numerous questions about how a link to a file differs from a link to a site or its individual page forced me to put the answer to it at the very beginning of this lesson. The answer is: nothing. All links listed are external to original page and are created in the same way.
So as not to let my thoughts run wild, I’ll show you everything with an example.
In the browser we will see this:
In the browser we will see this:
As you can see, all types of links are created exactly the same. The only difference is address the object to be referenced. Now let's move on to the main part of the lesson.
§ 2. Creating external links
The links differ from each other by external And internal, as well as on text And graphic. External links lead outside the html page, internal links lead to different parts the same pages. Text links are text (by default, it is highlighted in blue and underlined), and graphic links contain a picture as an object that you need to click to go to. All these types of links are created in HTML using a tag (short for anchor). Let's take a closer look at it.
For creating external link on a site, page or file there is a tag attribute - href. The value of this attribute is URL site, page or file (we talked about this above). Between the tags is the visible part of the link (link anchor), i.e. what we see on the browser screen. The link anchor can be either plain text (text link) or graphic representation(link-picture). An image link is created by inserting a familiar tag between the and tags. In general, the syntax for creating a link looks like this:
For example, to create a text link to the home page of this site, you need to write the following HTML code:
http://www.seoded.ru/"> Home page of the site website
In the browser it will look like this:
As I wrote at the very beginning of this lesson, the color of the link text (anchor) can be changed using . In general, you can apply the same rules to the text of links as to the main text of the page, i.e. highlight it in bold, italics, use headings, etc.
§ 2.1 Graphic links (picture links)
As I said above, in order to create an image link, you need to use . An example of such a link looks like this:
And the browser will show:
By default, the browser surrounds the image in a graphic link with a frame. If this is undesirable, then the attribute border tag IMG you need to assign the value 0:
border="0">
Home page
§ 3. Internal links
Internal links are used to comfortably navigate through pages with a lot of content. It was with their help that I made the “Lesson Contents” (see at the beginning of this page). Internal links are created using the same principle as external links. Only in attribute value href the anchor of the link is indicated. The anchor is created by the attribute name:
name="anchor name">text
And the anchor name is set arbitrarily. It’s worth saying here that not all browsers understand Russian anchor names, so I recommend using the Latin alphabet. The text between the tags to create an anchor is not required and is most often not specified.
I measles are located in those places on the page where the user should go after clicking on the link.
As I said above, in the attribute href of an internal link, instead of an address, the name of the desired anchor is indicated with the obligatory hash symbol ( # ) in front of him. Let's look at it with an example.
I created an anchor with the name zagolovok and placed it next to the title of this lesson (“Hyperlinks in HTML”). The anchor code is as follows:
name="zagolovok">
href="#zagolovok">To title
And in the browser like this:
If you noticed, after following the internal link to the title, the URL in address bar browser:
To original address:
http://www..html
http://www..html#zagolovok
And using this feature, you can link to a specific location on the page from any resource on the Internet! That is, let’s say you created a page with a lengthy article about something (or posted it on the page big number photos) and marked it with internal links. While in , you needed to link not just to the page with the article (or photographs), but to a specific place on it (or a specific photograph). Using option with internal link in the address, you can easily achieve what you need.
§ 4. Absolute and relative references
Home page
But with relative links it’s a little more complicated. In such links the address is indicated either relatively root folder of the site (the one in which the home page), or relative to the original page. Such links are needed, for example, if the site is located on home computer. Or this is not a site, but a page that is a pointer to other documents.
Let's leave it out, we need to link to the page clienty.html which lies in one folder with the main page of the site. Then the relative link code will look like:
/klienty.html">Clients
Now let’s assume that in the same folder as the main page there is zakazy folder and already in it lies the page klienty.html Then the code for the relative link will look like this:
/zakazy/klienty.html">Clients
Now let's look at creating hyperlinks relative to the original page. Let's say we have a page price.html (home page) and you need to link to the page from it clienty.html There are the following typical options:
1. The pages price.html and clienty.html are located in one folder.
klienty.html">Clients
2. in the root folder of the site, page price.html is in the zakazy folder one level higher).
The code will look like this:
../klienty.html">Clients
Two dots indicate that you need to move out of the current folder to a higher level.
3. The klienty.html page and the zakazy folder are located in the root folder of the site, mebel folder is in the zakazy folder, page price.html is in the mebel folder(i.e. the klienty.html page relative to the original price.html page lies two levels higher).
../../klienty.html">Clients
That is, each level is indicated by two dots and a slash “ / ».
4. in the root folder of the site, page clienty.html is in the zakazy folder(i.e. now the klienty.html page relative to the original price.html page lies one level down).
zakazy/klienty.html">Clients
In this case, dots and slashes are not used.
5. The price.html page (original page) and the zakazy folder are located in the root folder of the site, mebel folder is in the zakazy folder, page clienty.html is in the mebel folder(i.e. the klienty.html page is now relative to the original price.html page lies two levels below).
zakazy/mebel/klienty.html">Clients
6. In the root folder of the site there are two folders: zakazy and oplata. Page clienty.html is in the zakazy folder, original page price.html is in the oplata folder(i.e. both pages lie V different folders one level below from the root folder of the site).
../zakazy/klienty.html">Clients
§ 5. Link to email
In order to create a link to email, needed instead of the URL in the attribute value href write an email address indicating the protocol ( mailto:). And then when you click on this link, a window will open mail program with the email address entered in the “To” field. In HTML code it looks like this:
mailto: [email protected]">My mail
And in the browser like this:
You can also use the attribute in the tag title. With its help, a tooltip is created that appears when you hover the mouse over a link.title="Go to main page">!} Home page
§ 7. Conclusion
This is the basic information about creating links in HTML. This concludes this lesson. And this fact suggests that most HTML basics you've already mastered it.
I recommend that you now go through the previous sections again, and then create a full-fledged HTML page dedicated, for example, to your loved one. According to your design and according to your wishes. Then post it on some website (of course, if you have one, then on it) and fully admire your first website.
You can show it to your friends or anyone else. In general, feel like a website owner. And then, after a little revelry on the occasion of such an event, move on to the next section, in which I will tell you about creating tables in HTML.
And this will already be the first step towards turning your personal page into a serious resource.
Hello friends! Are you happy with the color of the links on your blog or website? If not, and you want to change the link color, no problem. Today I will teach you how to change link color in HTML and CSS code.
What I’m going to tell you will work on any engine, it doesn’t matter whether it’s WordPress or uCoz, because HTML and CSS are used by all engines.
Link color in CSS
To change the color of all links on a site in CSS, you need to open the style.css file and find in it the code responsible for displaying links. Just look for a mention of link or Link Styles.
This same CSS code is responsible for the color of all links on the site. And if we look at it in detail, this code may contain the following values:
Color CSS links in normal condition.
A:link ( color: #0169D3; /* Link color */ )
CSS color of links when clicked.
A:active( color: #0169D3; /* Color of the active link */ )
A:visited( color: #0169D3; /* Color of the visited link */ )
Accordingly, so that the color of the links is in a calm state, we change the value of color: #0169D3 to our color in the a:link pseudo-class.
To change the color of visited links, you need to change the value of color: #0169D3 in the a:visited pseudo-class.
A:link ( text-decoration:underline; color: #0169D3; )
And if, on the contrary, you want to remove the link underline, you need to enter the value text-decoration:none;
A:link ( text-decoration:none; color: #0169D3; )
I think it’s clear how to change the color of links in CSS. Now let's look at how to change the link color in HTML code.
HTML link color
Unlike CSS, where you can change all the links on the site at once, in HTML you can change the color of only one specific link.
In order to give it a color, you need to add a font color value for the link text so it looks like this:
As you can see, everything is quite simple. In the article, I only talked about the basics about the style of highlighting links in code. But thanks to CSS, you can create your own unique style for highlighting links, for example, make tooltips, insert a shadow, make a link blink. But I will try to talk about this in another article.
Subscribe to blog updates so you don't miss out!
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.
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.
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.
Here: element
contains a nested element
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”.
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 should not 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:
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:
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:
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 the HTML color appears 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, the main page of a site 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 in an HTML document for this purpose, and they have the following 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:
- 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.
I think you already understand what will be discussed in this chapter.. and you know what a link is, if not, then click here.. There are several types of links, as well as “mechanisms” for clicking on them. In this chapter I will try to talk in detail about how to register links, as well as go into the intricacies of working with them.
Lyrical digression:
Once in the army the chief of staff came up to me and gave an order, I quote:
Bring me that document, though I don’t know where it is or what it is!! Why are you standing? Let's run!! I'm late!!!
So, what I mean by this, so that the browser does not fall into a stupor, as I did then, it needs to know: the exact name of the document, the path to the document, and the place where to bring it, or rather, where to open it.
On this moment using notepad, we created only one HTML document, I have it with the name index.html (why did you choose such a strange name index.html and why is it needed, see) I don’t know which one, you came up with the name yourself, but I think you used it remember and know where it is, unless of course you are my chief of staff :).. In this document we will try to create a link to another document that we do not have yet.. So before you link to it, you need to create it, since you You already know how to do this.
- Open notepad.
- We write code on html language. for example, a page with a number of photographs.
- Save it as html page at the same working folder, where the first document we created already exists. Let's call it primer.html to avoid confusion, and perhaps rename the first one to index.html
Now I know that you have two html document and index.html and primer.html and that now you have a minimum set for further training.
Text links.
Let's meet tag (from anchor), you can enclose text or a picture in it, which will become a link to certain documents. Tag attribute href specifies the name and path to the document to which the link points.
All together it is written like this:
Here are my photos!!As you probably understood, primer.html is the name of our second html document, and the inscription “Here are my photos!!” this is a piece of text from the index.html file.
By analogy with the pictures, the tag
The link path to the document being opened is specified using the same methods:
Here are my photos!!- This means that the primer.html file is located one level higher from the document
Here are my photos!!- the document is located on the website www.site.ru..
Well, let's try it? Below is an example of two documents containing links pointing to each other.
Index.html file:
Tell me, dear child: in which ear is it buzzing?
IN right or left?
Primer.html file:
From the example you can see that links are highlighted in color, by default blue is a link, and red is an already visited link, these colors can be changed using the opening tag that is already well known to us < body > and its attributes.
link- link color.alink- color of the clicked, active link.
vlink- color of the visited link.
It is written like this:
>Continuing to talk about the color of a text link, it is worth mentioning that, if necessary, you can force both the entire link and its individual parts (phrases, words, letters) to be highlighted in color using a familiar tag and its attribute color. However, this applies not only to color; you can also set the size, style and font of the text separately. But remember that color manipulation must be done inside the tag here and not overboard, otherwise the link color will be either by default or as specified in the tag
Index.html file:
link="#008000" alink="#ff0000" vlink="#ffff00">
Look at the phrase that will help you remember the places of colors in the rainbow
R
A
D
U
G
A
Primer.html file:
link="#008000" alink="#ff0000" vlink="#ffff00">
Every
hunter
wishes
know
Where
is sitting
pheasant
Go back to the main page
One of your pages on the site Necessarily should be called index.html. It is the file with this name that the robot program will look for on your website when a person enters the name of your website. Since the page index.html will open first, make it the main one. You can call the rest of the pages whatever you want... there are no more nuances with names.
About the register... When writing the path and names of documents, remember that, for example: Page.html, page.html and PAGE.html are names different documents! The same applies to the names of bookmarks and pictures. Always consider case when writing code; there is a high probability that such names will not be recognized by one browser or another. Make it a rule to write and call everything small with Latin letters, then the risk of human factor and program vagaries will be reduced to zero.
Three click rule...
Try to form a “tree of links” in such a way that a site visitor can get from any page to any place on the site in a minimum number of clicks. More than three transitions to the desired place on the site is no longer good.. Endless downloads pages unnecessary for a person can lead to nervous breakdown and premature closure of the site. Save people's time, money and nerves.
WITH using HTML you can set the colors of all links on the page, and also change the colors for individual links.
Set the color of all links on the page
Link colors are set as tag attributes
. Attributes are optional and if they are not specified, default values are used.link - Defines the color of links on a web page (default color is blue, #0000FF).
vlink - color of already visited links. The default color is purple, #800080.
In HTML, colors are usually specified in hexadecimal numbers, in the form #rrggbb, where r, g and b represent the red, green and blue components, respectively. For each color it is specified hexadecimal value 00 to FF, which corresponds to the range 0 to 255 in decimal. These values are then combined into a single number, preceded by a # symbol (example 1).
Example 1: Setting link colors
Site content
The color does not have to be specified in hexadecimal format; you can also use keywords. IN in this example The background color of the web page is set to black and the link color is set to red.
It is more convenient to use CSS to change the color of links. To set the color for all links on a web page, the following pseudo-classes are applied and added to the A selector.
visited — Style for the visited link.
active — Style for the active link. The link becomes active when you click on it.
Example 2 shows how to change the color of links on a web page using styles. To do this, we will use the style property color , it sets the color of a specific text, in in this case, links.
Example 2. Color of links specified via styles
Site content
Setting the color of individual links on a page
The above method of setting colors works for all links on a web page. However, sometimes it becomes necessary to use different colors at the same time. Light colors, for example, for dark areas of a web page, and dark colors, respectively, for light areas. You can also use styles for this.
To change the link color, use the style="color: #rrggbb" attribute in the tag , where #rrggbb is the color in hexadecimal. You can also use color names or specify the color in the format: rgb (132, 33, 65) . The decimal values for red, green and blue are shown in parentheses (example 3).
Site content
Internet Marketing
Usability
This example shows three different ways setting colors using styles.