Sites, blogs, web pages are already familiar concepts in our time. With the development of the Internet, platforms for hosting web pages have become incredibly popular, and this is not surprising: for some people having their own website is a necessity, for others it is a pleasant entertainment. In the first case, usually we are talking about firms, corporations, private entrepreneurs, when they advertise any product or service in demand. The second is about bloggers.
In addition, there are Internet users who simply search for information, read blogs, watch videos and so on.
To create a quality website, there are many options. We will focus on web programming through HTML.
What is HTML?
HTML stands for Hyper Text Mark-Up Language. Translated from English, this means "hypertext markup language."
In other words, HTML is a set of codes with which you can create the basic elements of a site, its framework, similar to how sentences are composed of words.
Codes in HTML are written exclusively in Latin letters and are called tags, and each code is enclosed in angle brackets. Some tags are paired, some are unpaired.
By pair is meant that they must be used in a pair without fail. For example, the opening tag indicates where in the web page it begins to act, and the closing tag indicates where it expires. The latter differs from the former by the presence of a slash after the opening angle bracket. For example, <b> is the opening tag, </b> is the closing tag.
Unpaired tags do not need a partner.
Many tags can have attributes - additional elements that give it some more specific meaning. For example, the <body> tag.
Where HTML is used
A classic understanding of where HTML is needed is website development.
In practice, this may be enough, since HTML allows you to create the basic elements of the site, menu (including multi-level), set the background, insert text, images, audio, video, edit fonts and much more.
However, there are other languages that allow you to add more interesting and often necessary elements of a web page:
- CSS sets styles for the entire site without the need to constantly write down the style features of individual elements using tags - the color and font of the text, for example.
- The script language allows you to develop and embed mini-programs (scripts) on the site, ranging from commonplace aesthetic things (changing the color of a link when you hover over the mouse) and ending with functional ones (collecting customer email addresses, phone numbers).
- Using PHP, you can develop your own guestbook or commenting system.
HTML is also used to create emails for distribution.
What is a link?
They allow you to navigate to another web page, both inside the site and external.
HTML links are commonly used:
- To go to an external web resource.
- To navigate through the pages within the site.
- To go to google forms.
The link to the source in HTML is also often indicated, especially when copying material from another site, you must specify the author. Otherwise, copying without attribution may fall under the definition of copyright infringement, theft of content and have unpleasant consequences. In addition, the use of borrowed, not unique materials reduces SEO performance, and linking to a source reduces risks.
Types of Links
In the classical sense, a link is the address of a web resource that you can go to by clicking on it.
In addition, there are hyperlinks: text and images. In these cases, the HTML link “hides” under any sentence (word) or image, and to go through it, you need to click on the text or image.
Other types of links:
- Unvisited - a link that has not yet been crossed during a particular session. For example, if you clicked on this link yesterday, then turned off the computer, and today you turned it on again, now the link is again unvisited since a new session has begun.
- Active - in this state, the link is saved for a very short time: the interval between clicking on the link and following it.
- Visited - a link that has already been clicked at least once during one session.
If we are talking about ordinary text links, then the visitors, as a rule, change their color, unless otherwise specified.
The image hyperlink does not change the appearance regardless of whether it is visited or not.
How to insert a regular link
Many web resources perceive the site address as a link, immediately make it clickable and highlight. For example, if the address is sent in the messenger or by email, clicking on it, you can go to the site.
In the case of creating a site yourself using HTML, you must insert a link using a special tag. It will look like this: <a href=termaddressaddress> website address </a>. The link text in HTML must be specified in full, with the protocol.
How to insert a text hyperlink
It was said earlier that a text hyperlink performs the same function as a regular link, but looks more aesthetically pleasing: instead of the address of the site, which is often too long, a word or phrase is indicated. For example, in the sentence “Look for information here” you can hide the link in the word “here”. It will be highlighted and when you click on it, the user will go to the desired site.
How to make an HTML link has already been discussed. You can insert a text hyperlink using the same tag. The only difference is that you need to specify between the tags the text under which the link will be hidden: <a href=gentaddress of the site> visible text </a>.
How to insert an image hyperlink
This is a bit trickier. We use the same tag, but instead of text you need to specify the path to the image.
The path is the location of the image. If the picture (photo) is on the file hosting, then you need to specify all the folders along the path to the image through a slash. You can also insert a link to the image, if possible.
<a href=gentaddress of the site>> <img src = “path to the image / link to the image”> </a>
In addition to src, other attributes are also applicable to the <img> tag , allowing you to adjust the height, width and location of the picture and much more. Some of them:
- Src - defines the path to the image.
- Lowsrc - identical to the previous attribute, but specified for low-quality images.
- Height - the height of the image.
- Width is its width.
- Alt - description of the image. When you hover over a photo or picture, the text specified in this attribute will pop up.
- Border - determines the thickness of the frame around the image.
Attributes are indicated after the tag and are part of it. After the attribute, you need to specify its value. For example, for the attributes “height” or “width” (height, width), the height of the image on the web page is indicated. The unit of measurement is pixels, unless otherwise specified.
It will look like this: <a href=menaddress of the webpage FE<img src=ame path to the image / link to the image FE heigh= high image height in pixels of the width width of the image width in pixels of the> </a>. These attributes will help you set the appropriate size for the image. Border helps create an invisible border around the image.
The above attributes are applicable separately for the image insert tag. For example: <img = “image path / image link” alt = “description”>.
What are anchor links
Creating anchor links is a very useful skill. Often there is a need to make up a web page with a long text block or with several sub-sections on one page. In this case, you can immediately make at the beginning a list of links to subsections of text or web pages, and when you click on them, the user will go directly to the requested section.
To create anchor links, you will need to use tags with attributes more actively than when creating other types of links.
First you need to set a common value for each block of information or a subsection of the text using the top attribute, and then associate it with the corresponding link.
Their features are more extensive, therefore it is advisable to first learn the creation of simpler links, and then proceed to the formation of anchor links.
Advice
Help from experienced programmers:
- You can make the information displayed on the link when hovering in HTML. For this, the alt attribute can be useful, which we use for graphic elements.
- It is possible to make a list of links using HTML. In particular, this can be useful for anchor links, as well as when you need to make a list of web resources that you can click on the link directly from the current web page.
- Using CSS and JavaScript, as well as some HTML functions, you can create a different text link and hyperlink design than the usual one. For example, when you hover over a link, it can change its color and return to the previous one when the cursor is away from it. This can be implemented using a special script in JavaScript. In addition, the color of the link can be set to other than blue for unvisited or purple for visited. This is a CSS task.
- Do not abuse links. A web page with many inappropriate links looks messy and messy.
- Make sure that the user understands that the hyperlink with the image is really it, and not just a picture.
Conclusion
In HTML, linking to a page is very easy. It is important to observe all the main points of this language, since even a small error can lead to the fact that there will be no result, and the code will not work.