Websites, blogs, web pages - already familiar concepts in our time. With the development of the Internet, sites 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, we are usually talking about firms, corporations, private entrepreneurs, when they advertise any product or service in demand. The second is about bloggers.
Besides this, 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 main elements of the site, its frame, likehow words are made up of sentences.
HTML codes 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.
Paired means that they must be used in pairs without fail. For example, the opening tag indicates where it starts on a web page, and the closing tag indicates where it stops. The latter differs from the former by the presence of a slash character after the opening angle bracket. For example, is the opening tag,is the closing tag.
Unpaired tags don't need a partner.
Many tags can have attributes - additional elements that give it some more specific meaning. For example, the tag.
Where HTML is used
The classic understanding of where HTML is needed is website building.
In practice, this may be enough, since HTML allows you to create the main elements of the site, menus (including multi-level ones), 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 to a web page:
- CSS sets styles for the entire site without the need to constantly prescribe 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 frombanal aesthetic things (changing the color of the link when hovering over with the mouse) and ending with functional ones (collecting customer email addresses, phone numbers).
- With PHP you can develop your own guestbook or commenting system.
Also HTML is used in the creation of 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 move through the pages within the site.
- To go to google forms.
A link to the source in HTML is also often indicated, especially since when copying material from another site, you must specify the author. Otherwise, copying without attribution can fall under the definitions of copyright infringement, content theft and backfire. In addition, the use of borrowed, non-unique materials reduces SEO performance, and indicating a link to the 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.
Besides this, there are hyperlinks: text and images. In these cases, the HTML link is "hidden" under some sentence (word) or image, and in order to follow it, you need to click on the text or image.
Other types of links:
- Unvisited - a link that has not yet been clicked on during a particular session. For example, if you followed this link yesterday, then turned off your computer, and turned it back on again today, now the link is unvisited again, as a new session has started.
- 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 visited at least once during one session.
For normal text links, visited ones tend to change color unless otherwise specified.
A hyperlinked image does not change its appearance, 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 it with color. For example, if the address is sent in a messenger or by e-mail, 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: website address. Link text in HTML must be specified in full, with 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 a site address, which is often unnecessarily long, a word or phrase is indicated. For example, in the sentence "Look for information here", you can hide the link inthe word "here". It will be highlighted and clicking on it will take the user to the desired site.
How to make an HTML link has already been discussed earlier. 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: visible text.
How to insert an image hyperlink
It's a little more complicated here. 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 located on a file sharing service, then you need to specify all the folders along the path to the image through a slash. You can also include a link to an image if possible.
To tag
in addition to src, other attributes are also applicable, allowing you to adjust the height, width and location of the image and much more. Some of them:
- Src - specifies the path to the image.
- Lowsrc - identical to the previous attribute, but specified for low quality images.
- Height - picture height.
- Width - its width.
- Alt - image description. When you hover over a photo or picture, the text specified in this attribute will pop up.
- Border - determines the thickness of the border around the image.
Attributes are specified after the tag and are included inits composition. The attribute must be followed by its value. For example, for the attributes "height" or "width" (height, width) specifies the height of the image on the web page. The unit of measure is pixels unless otherwise specified.
It will look like this: <a href="web page address"
. These attributes will help set the appropriate size for the image. Border helps to create an invisible border around the image.
The above attributes apply separately to the image insertion tag. For example:.
What are anchor links
Creating anchor links is a very useful skill. Often there is a need to lay out a web page with a long text block or with several subsections on one page. In this case, you can immediately start with a list of links to subsections of the text or web page, and when you click on them, the user will go directly to the requested section.
Creating anchor links will require more use of attribute tags than other types of links.
First, you need to set the overall value for each block of information or subsection of text using the top attribute, and then associate it with the corresponding link.
Their features are more extensive, therefore it is advisable to first master the creation of simpler links, and then move on to the formation of anchor links.
Tips
Help from experiencedprogrammers:
- You can make it so that information about a link is displayed on hover in HTML. For this, the alt attribute, which we also use for graphic elements, can come in handy.
- 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 can be followed by a link directly from the current web page.
- With the help of CSS and JavaScript, as well as some HTML functions, you can create a different design of text links and hyperlinks than usual. For example, when hovering over a link, it can change its color and return to the previous one when the cursor is away from it. This can be done with a custom JavaScript script. In addition, the color of the link can be set to something other than blue for unvisited or purple for visited. This is the job of CSS.
- Do not abuse links. A web page that has a lot of inappropriate links looks sloppy and sloppy.
- Make sure the user understands that the image hyperlink is really an image and not just an image.
Conclusion
It's very easy to link to a page in HTML. It is important to follow all the main points of this language, since even a small mistake can lead to the fact that there will be no result, and the code will not work.
