Hello, dear readers of the blog site. In the next article from this section we will continue to look at tags. Earlier we learned), talked about formatting comments and ), and also touched on the topic of space characters in Html code and . Yes, we also discussed the possibilities.
Today I want to dwell in more detail on those elements of hypertext markup language that you will most often encounter when working on your web project. I'm talking about inserting images and hyperlinks into the code of web pages. Without knowing this, it will be very difficult to work productively on website design. These tags are actively used both when writing and designing articles, and in designing a template stretched over the engine framework.
How to insert a picture - html Img tags
Let's say that you use a visual editor to write articles, which allows you not to think about how exactly the tags of pictures and hyperlinks are written in the code. But the fact is that no editor is ideal, and often in order to fix the next bug in the design of the text of an article you will simply need to switch to the mode html editor and make changes directly to the tags of pictures and links themselves.
If you know how to insert pictures and links into an HTML document, this can greatly simplify your life and save time. Moreover, studying the ten most common elements is not difficult. In reality, there aren’t that many tags left, and, of course, today’s heroes are among the most common and frequently used.
On the other hand, the same elements are also actively used in the design of the template you are using - inserting links, pictures, containers, lists (we talk about them), various etc.
And, therefore, in order to understand the structure of the template (it talks about Joomla templates, and about WordPress themes) and, if necessary, make changes to it, again you need to know at least a small number of code elements. Believe me, the time spent on this will more than pay off in the future. Well, let’s assume that I have convinced you of the need to get acquainted with markup language and it’s time to move directly to the heroes of our today’s publication.
To insert pictures The HTML Img tag is used on the page. The image below was inserted using it:
The Src attribute allows you to specify the name and storage location of the image file (in other words, the path to it). In this case, it can be pointed to a file with an image. Paths are specified using the "/" character, which serves as a separator between the names of subdirectories in which picture files are stored.
The absolute path to Src will start from http://vash_sait.ru (for my blog -). Next, using “/” to separate the names of subfolders, the full path to the image file is written, ending at the end with the name and extension of the file itself. For example,
The relative path in Src is set by defining the relative path from the source folder, which contains the file of the HTML document itself and from which you are trying to open the image, to the graphic file. If this file is located on the server in the same folder as the document from which it is accessed, then you do not need to specify the path to it - you only need to specify the name of the graphic file (preserving the case of letters).
If this file is located on the same server, but in a different directory, you need to specify the path to it from the directory where the document from which it is accessed is located (in the example shown above, a relative path is used - image/finik.jpg) .
Set the width and height of the image using the Width and Height attributes
Html attributes Width and Height allow you to set the size of the area (width and height, respectively) that will be allocated on the page under this image. They are inserted inside the Img tag, for example like this:
If this area does not correspond to the actual size of the picture you want to insert, then the picture will be stretched or narrowed accordingly to the specified size. However, you should not use this method, say, to reduce the size of a picture inserted into a document. After all, its weight will still remain large, and this will slow down the loading of the web page.
It is better to first resize the image in graphic editor(you can even do it in ), and only then insert it into the document. Also, when saving a graphic file, you should pay attention to its final weight. It shouldn't be too big. Sometimes it’s better to sacrifice a little image quality (fortunately, with small sizes it will be practically unnoticeable) to reduce the final weight.
When saving drawings, use compact types GIF (for inserting schematic pictures) or JPG (for inserting photographs). Width and Height, unlike the Src attribute (the only mandatory one in the Img tag), are optional. Many simply do not indicate them, but they, nevertheless, allow slightly speed up document loading.
The fact is that if the browser does not find Width and Height inside the html Img tag, then it will take time to find out the size of the image, load it, and only then continue to download the rest of the contents of the document. In the case when you have specified Height and Width, the browser automatically reserves space for the image of the sizes specified in these attributes and continues to load the web page further.
If the graphic files displayed on a given page are very heavy and there are a lot of them, then inserting Height and Width will allow users to start reading the text of the site while the graphics are still loading.
Also, if you do not specify Width and Height inside the Img, then a situation may arise where, with a small image and very long alternative text (set by the Alt attribute in the Img tag, discussed below), a temporary shift will occur before the graphics are loaded website design, because long alt text will take up as much space as it needs.
If Width and Height are used, the space for displaying alternative text will be limited to the sizes specified in them. For the most part, this is why I try to write these attributes in the Img tag.
Alt and Title in the html Img tag
Very useful, from the point of view of internal search engine optimization of a website, are the Alt and Title attributes. Read and promote the site yourself or in the “” publication.
The first of them sets the so-called alternative text for the image. You can see this text if you disable graphics in your browser. Alt is designed for this - to tell search engines what kind of picture there should be. The title is intended to inform the user about the content of the picture.
The Title content from the Img tag is shown in a pop-up line if the user moves the mouse over the image. Both of these attributes (if you have specified them) allow you to include images of your web project in the . Therefore, you should not neglect this opportunity and be sure to register at least Alt. The layout of your images should be something like this:
In fact, there are quite a lot of attributes that can be and you can see them all at least using the link provided. But in practice you will most likely use only those listed by me in this article.
Let me remind you once again about the rules for writing tags. After the opening triangular bracket, always without a space, its name is written, then, separated by a space, the name of the attribute allowed for it is written. After the attribute name, without a space, an equal sign is placed and its parameter is written in quotes (for example, width in pixels for Width).
The next attribute inside an html tag is separated from the previous one by a space. At the end there is a closing triangular bracket. Please note that Img is not paired, i.e. it doesn't have a closing tag.
Ideally, this is how all the images used in your web project should be designed. This look can be achieved without manually editing the HTML code for each image. Visual editors of various CMS (Joomla, WordPress, etc.) allow you to set all this wealth in a user-friendly manner graphical interface, but after the trial setup, be sure to check the code (in any visual editor you can switch to showing the html code of the article).
Create hyperlinks using the html link tag “A”
A link is one of the main elements of document organization in HTML. Without them, a web page would just be a page. They are created using the "A" tag. The only required attribute is Href. It specifies the URL (path) where the user should go by clicking on this hyperlink.
The link can lead either to the internal page of your own resource (very important point internal optimization linked specifically to ), and to the page of another project. HTML tag A is paired and, accordingly, has a closing element. Hyperlink text (anchor - it is written about in detail in terms of promoting SEO promotion) is placed between the opening and closing "A" tags.
Search engines analyze not only the anchor itself, but also the words surrounding it. This should be taken into account when placing links to your site on other resources. To make it look more natural, you can move part of the text outside the anchor, for example:
Opens in a new window and link from the picture (image)
Well, okay, we got distracted again by search engine optimization. Let's go back to tags. For the html tag “A” there is one very necessary attribute that will allow you to open the page to which this link leads in a new window. This may be necessary if you link to many external documents from one page. In this case, it would be more convenient for the visitor to keep your page always open.
Target has an option for this purpose that allows you to open the page in a new window called _BLANK. If Target is not specified in tag A, then the link will open in the same window. Example of using the Target attribute:
Anchor (if the link is used for internal linking, then this text should contain the keywords by which you want to promote the article to which this hyperlink leads)
Please note that the order of attributes within tags is not regulated in any way. With the same success you can write:
There is an opinion that search engines value links from pictures more highly, but according to some data the opposite is true. But when using this type of links, there is no anchor into which you could insert the necessary keywords. In this case, you can use the Title attribute for the A tag.
Ru/image/finik.jpg" Width="200" Height="150">
Title can also be used in the case of a regular text anchor. In this case, the information written in it will be visible if you move the mouse cursor to the hyperlink. Actually, this attribute can be used in almost all tags of the Html language, but it will not be of much use.
Here you need to write down the keywords by which you want to promote the article to which this hyperlink leads
Creating anchors and hash links
Another interesting attribute is NAME, which used to be quite widely used to create so-called link anchors, which could be accessed using so-called hash links. It's a little confusing, but I'll try to clarify now. Let's say you need refer to a specific place in the text of the document(not at its beginning), where a certain issue is being discussed.
If you put a simple hyperlink to this article, then after clicking on it, the article will open at the very beginning and the user will have to find in it the place on which you wanted to concentrate attention. So, with the help of anchors and hash links, you can make sure that the article opens exactly where you intended and the user does not have to dig through unnecessary material.
To implement the described method of creating hyperlinks in an Html document, previously it was necessary to first insert an anchor into the article to which the hash link would lead. The anchor was a structure reminiscent of an ordinary link, but at the same time it remained invisible to the visitor. He looked like this:
Those. it turns out that the anchor consisted only of the opening and closing tag “A”, while it did not contain an anchor and had one single required NAME attribute. The parameter of this attribute was a label, the name of which you had to specify yourself. This label was later used to create a hash link.
Now this is the way to insert anchors considered obsolete and the Html code validator will be regarded as blunder. Please pay attention to this. Anchors are now placed by adding to the nearest tag.
Let's say that for a headline in an article it might look like this:
Heading
So, after we have placed all the necessary anchors in the text of the article, we can begin to create hash links that will refer to places in the text of the article that were previously marked in the manner described above (using the ID selector).
The hyperlink is created in a standard way, except that at the end of the URL, which is written in the Href, a hash sign (sharp sign or hash symbol) is placed, and after it comes the name of the label of the anchor that is in the required place in the text of the article.
Anchor
If the anchor is in the same Html document as the hash link, then only the anchor can be specified.
Anchor
Good luck to you! See you soon on the pages of the blog site
You might be interested
Lists in Html code - UL, OL, LI and DL tags 
How colors are set in Html and CSS code, selection of RGB shades in tables, Yandex output and other programs 
HTML forms for the site - tags Form, Input and Select, Option, Textarea, Label and others for creating web form elements 
Img - Html tag for inserting a picture (Src), aligning and wrapping text around it (align), as well as setting the background (background) 
How to create a hyperlink (A, Href, Target blank), how to open it in a new window on the site, and also make a picture a link in Html code 
Iframe and Frame - what are they and how best to use frames in Html 
MailTo - what is it and how to create a link in Html to send an Email Select, Option, Textarea, Label, Fieldset, Legend - Html tags for the form of drop-down lists and text fields 
Embed and object - Html tags for displaying media content (video, flash, audio) on web pages 
Comment directives and Doctype in Html code, as well as the concept of block and inline elements (tags)
The main feature of an HTML document is the presence in it hyperlinks(or simply 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 convenient 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.
Terms
§ 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.
To create an external link to a site, page or file, use the 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. Anchor links can be like in plain text(text link) and graphic image(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
For comfortable navigation through pages with big amount content uses internal links. 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 name of the “anchor” is set arbitrarily. It’s worth saying here that not all browsers understand the Russian names of “anchors”, so I recommend using the Latin alphabet. The text between tags to create an “anchor” is not required and, most often, is not specified.
“I am measles” is 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 in the page code 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 the option with an 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(source page) and from it you need to link to the page 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 lower).
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 in different folders one level down 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 such a link, an email program window will open 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 it’s like that.
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 the necessary information and not 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. This depends on the nesting structure of tags 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 large that a vertical scroll bar works, sometimes very long, as, for example, in dictionaries, then it is very convenient and advisable to use relative links to quickly jump 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 quick access location for convenience;
- 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 the relative path to this image will look like this:
Tip: When studying this topic, it is best to use a simple text editor because you need to gain skill in correctly writing jump addresses and to learn how to understand other people'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. The use of hyperlinks in HTML in a non-standard color scheme is small, but 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, 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 a 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
In addition to the technical side of the question of how to insert a hyperlink into HTML, the moral aspect should also be covered. 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 JavaScript OnMouseOver event triggers an action on a web page element. When a user hovers over an invisible link, they are taken to an advertising page on 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 end up on the “black list” of 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 in html language. for example, a page with a number of photographs.
- We save it as an html page in 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 the names of 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 in small Latin letters, then the risk of the human factor and the vagaries of programs 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 to the right place on the site this is no longer good.. Endless loading of pages that are unnecessary for a person can lead to nervous breakdown and premature closure of the site. Save people's time, money and nerves.
Let's talk about a rather simple, but at the same time popular question. How to make a picture a link? It happens that there is a need to add a link to the site structure, to some resource, not in the form of a text link, but in the form of an image. Which is quite logical, since a link in the form of a picture looks more attractive than a simple text link. And, besides, it is noticeable to the visitor much better.
The question is actually quite simple, but not everyone is able to solve it. As an example, I suggest taking any image on the Internet and converting it into a link to a resource. For example, I will add a link to the social network VKontakte in this article. And to design the appearance of the link, I will use the VKontakte logo.
So, to implement your plan, you need to find or draw a picture, which will later become a link. And figure out a little how to display an image, with using html. And also how to make the picture become a link, fully clickable and working.
HTML - image code.
To display an image in HTML code, you can use the img tag intended for this. Depending on the syntax of our code, the image output may look different. For example, when using HTML syntax, the code will look like this:
And when using XHTML syntax - like this:
More details about the syntax can be found in the article about DOCTYPE.
A little more about the code:
src=”URL” — Instead of a URL, you need to enter the path to the image that we will convert into a link.
alt = "alternative text" - intended to display text information about the image when displaying images is disabled in the browser.
Additionally, the img tag has other attributes. The main ones:
height — image height
width — image width
These are just some of the attributes applied to images. But at this stage we have enough. All of these attributes can be assigned as in html code, and in css styles.
HTML - link code.
Explanations for the code:
The a tag also has other attributes, but at this stage we may only be interested in a couple of them:
target - designed to determine in which browser window the document will be opened using the current link. For example, the document will open in the current window (default) or in a new window.
So, now we know that the picture is a link and consists of two parts of code. All that remains is to combine them together. As I said above, I will use the logo social network VKontakte, to display a picture and put a link to my group, in which, using the target attribute, I will set the link to open in a new window.
First, you need to upload the image to the server we use or copy the link to the image on the Internet. I prefer to use my own server to display pictures.
I would like to make a reservation right away that I uploaded the image to the wordpress library, that is, to media files. Since I'll just add a picture link to the article. But when designing a site and adding various elements to the site, it is more correct to upload images using an FTP client to the folder intended for this. In WordPress, the folder is most often located in the theme folder and is called images or img.
This is what it will look like:
As we can see, it turned out, to put it mildly, not very well. Improve appearance and the location will be helped by the attributes for img. I also added a paragraph to which I assigned the text alignment attribute to the middle. This means that the text and other elements that are located between the p tags will be aligned.
A little more about the p tag:
It is designed to define a text paragraph. Has opening and closing tags.
style - The attribute defines the styles of the element using CSS rules.
text-align: center; — CSS Rule. Defines the horizontal alignment of an element (the p tag and all elements within). IN in this case the element is aligned to the center.
So, we've sorted out the picture. But it has not yet become a link.
That's basically all. At first glance it may seem a little complicated. But in reality everything is simple, the main thing is to carefully read everything that is written. And of course, you should definitely try to make a link with a picture yourself. Practice best helps you understand everything that is not clear in theory, and also helps you remember much better what needs to be done.