HTML: The Basics for Beginners

HTML is the hypertext markup language that made the internet the way we know and love it. It is thanks to this wonderful tool that the sites look beautiful and modern, and the convenience of their use is also ensured. HTML simply arranges the elements of a web page into a user-friendly way. Its work is comparable to that of text editors such as MS Word or OpenOffice. They turn a featureless mass of letters into a document that has paragraphs, bold text, italics, tables, and even images. Approximately the same is done by the HTML language, with the only difference that its documents are displayed in the browser, and the possibilities of this tool are much wider than those of a text editor. For markup, tags are used - special commands that describe the structure of a web page. They are enclosed in angle brackets - so that the browser can distinguish them from the bulk of the text. Next, we'll cover the basics of HTML for beginners.

Visual editors

Beginners just starting out on the path of learning HTML often start with programs that allow you to create websites without any knowledge. In them, you can simply arrange the elements on the screen as they will bedisplayed in the browser. It would seem that here it is - the source of eternal grace, allowing you to get rid of most web developers. But not everything is so simple, since visual editors have a lot of shortcomings that make it impossible to use them in serious projects.

All these programs create a lot of unnecessary tags that make the final version of the page cumbersome and suboptimal. Of course, in this age of high-speed Internet, this matters less than before, but there are a number of reasons why a concise and well-written site turns out to be more practical than its counterpart created in a visual editor. A web page made in such a program will be poorly processed by search robots, since every kilobyte of code is important for them, and cumbersome and illogical code with a bunch of semantic errors will hardly be to their liking. In addition, editors are often behind the times, becoming irrelevant, and it is not worth spending resources on their development, since not a single professional uses these products. Therefore, anyone who wants to work in the field of creating websites should know the basics of HTML.

Tags

As mentioned above, tags describe the structure of a web page to the browser. Most of them have an opening and closing tag, but not all of them. For example, …, where instead of dots there is content. The first one shows where the tag starts and the second closes it. There may be other page markup elements inside, they can be nested inside each other like a nesting doll. It is important to close the tags in a timely manner so that the page is displayed.correct.

There are also single tags that do not need to be closed. In them, the content is inside, as well as the attributes. The attribute can be written on most HTML tags and sets the properties of the element. It is indicated in the opening tag and looks something like this: attribute="…", where instead of dots there is an attribute value. Knowing the tags is the first and most important step in mastering HTML. The basics of this art also involve understanding the structure of a web page.

Document structure

Each HTML document has a corresponding extension, eg Index.html. So the browser can understand what it is dealing with and display the page correctly. It is advisable to store all the files used to create the site in one directory, which will greatly facilitate your life in the future. The basics of the HTML hypertext markup language require a clear understanding of the structure of a document. It starts with a tag that tells the browser the version of HTML that is used in this document. At the moment, the fifth version of the language is relevant, so there is no need to invent anything here, you can safely insert the above tag at the beginning of any page.

Then come the main paired structures that make up the "skeleton" of the site. The first tag in which all others are nested is …. Anything outside of it is not recognized as a web page by the browser, so it opens the document and closes it. This tag is required for any document. It also contains several morerequired tags, which will be discussed below.

Head

Inside the … tag contains technical information that will not be displayed on the page, but is nevertheless an important part of the HTML document. The foundations of the site are laid in this place, here the encoding is selected and the page name is entered. It is contained within the required … tag. The name is displayed at the top of the browser, where you can also place a small icon that characterizes the content of the page. It is advisable to immediately specify the encoding of the document for its correct display. This can be done using the tag. Meta tags provide information about the structure of the page and are usually located inside the head.

Link

Knowing the basics of HTML also involves the use of cascading styles, or css. They set the properties of the elements that will be displayed on the page. The modern approach to this task involves the removal of such characteristics as the color, height and location of the element in an external file for greater convenience. The tag is used to include the css file. When finished, it looks something like this:, where href indicates the location of the file, and type indicates its type.

Body

It is in this part of the HTML document that the visible part of the page is created. Everything that is done inside the "body" will be shown by the browser. It uses a huge number of HTML tags. The basics are text formatting, working with links, and the simplest tools for structuring a web page. Toto get started in HTML, it is enough to know the basic tags and be able to use them. Below are the most popular ones:

• - used to highlight a substring that will be affected by a special style described in css;
• - creates a link on a web page; the jump address is set by the href attribute;
• - one of the most popular tags of our time; everyone who decides to learn the basics of the HTMLl language should pay special attention to it, since this is a block element, on the basis of which the lion's share of modern sites is made (parameters for blocks are set in css, and other blocks can be located inside this tag);

• - selects a paragraph from the text; paragraph content is between the opening and closing tags;

• - numbered list, the elements of which are enclosed in a pair tag

  • ;

  • - a bulleted list, in which, as in a numbered list, elements are indicated by the tag

    • ;

    document headings (the number indicates the heading level, i.e.

    is the main heading, and subsequent options are its subheadings, by the way, level headings

    ,

    almost impossible to find on the Internet), it is also important to remember that there can only be one heading per page

    ;

    - bold text;

    - italics;

    - inserting an image on a web page (this is a single tag, it does not need a closing tag, but it must contain the alt attribute, which specifies the text for the image);

    - embed video on web page;

    - tag that inserts an audio file into the document.

    These are not all the tags you need to create your own web page, but they are enough to get you started with the basics of HTML for beginners.

    CSS

    The development of the HTML language has led to the fact that each tag has acquired a mass of attributes, and the requirements for the appearance of web pages have increased significantly. The code became cumbersome and inconvenient, it was difficult to read it, let alone adapt or change it. In addition, if you have ten pages on your site that have a lot of headings marked in green, and you suddenly want to make them red, then you have to work hard changing each one manually. With the advent of Cascading Style Sheets, this process has become simple and logical, and HTML code has become much more readable.

    

    Using CSS

    To create web pages, you need to know the basics of HTML and CSS, because now there is nothing to do in this area without knowledge of cascading style sheets. They set attributes for any element that apply to the entire document. Thus, you can set the color for all elements at once

    or by writing only one rule. Considering the modern requirements for the appearance of web pages, the use of cascading style sheets is mandatory.

    In order to attach a css file to a document, there is a link tag. The principle of its use was described a little higher, but it is not the only option for combining all styles in one place. There is also a tag that is located in the "head"document and allows you to write styles without using CSS files. It is not necessary to use either one method or the other. They can be successfully combined to obtain the best result. To create a file with style sheets, you need to create a file with the.css extension, for example, Styles.css.

    JavaScript

    It is not uncommon for a person who decides to develop web pages to realize that the tools that HTML offers are not enough for his tasks. The basics will allow you to create a beautiful page, but what if you suddenly need to make it interactive? For these purposes, there is a unique scripting programming language that interacts beautifully with HTML. It is called JavaScript, as it was conceived as the younger brother of the popular Java language. Today, these languages have acquired significant differences, and the gap between them is only growing.

    

    JavaScript can extend the power of HTML, it allows you to create and edit tags. Also, with the help of this wonderful tool, you can work with Cokie, download data from the server without reloading the page, make the site more interactive than HTML allows. This language also has security-related limitations. If JavaScript is not used on the server side, then it will be executed in conditions that restrict its capabilities so that attackers cannot use malicious code on any computer.

    Editors

    HTML basics for beginners require knowledge of the most convenient and practical programs for creating webpages. As mentioned above, visual editors such as Dreamweaver and the like are not suitable for this purpose. So what, write tags in a regular notepad? This option is also doubtful, since the standard notepad does not have any special layout tools. Notepad++ can handle this task well. A big plus of this product is that it has an open source and is distributed absolutely free of charge. It has convenient syntax highlighting and automatic tag closing. Notepad++ also provides a wide choice of interface languages, and its capabilities are easily extended with numerous add-ons.

    

    Sublime Text 3 is a program similar to Notepad++, but distributed on a paid basis. It was she who won the hearts of most developers. Sublime Text 3 is ideal for JavaScript, CSS and HTML. You will have to learn the basics of working with it on your own, but it's worth it. It contains truly limitless possibilities for fine-tuning, which allows you to customize the program to your needs as much as possible.

    HTML and CSS Basics for Beginners

    As you can see, learning the art of creating web pages is not as difficult as it seems at first glance. Just a few months of practical training will turn you from a timid user into a novice developer. Learning layout is much easier than learning any programming language or Linux. In fact, there are not so many HTML tags, it is important to understand the practical aspect of their use.

    

    Not superfluous in this matter will be the skill of working in Adobe Photoshop. This program allows you to work with photos, pictures and other graphic elements of a web page. At the moment, it is Photoshop that best copes with such tasks; it has few competitors. For those who didn't like this Adobe product, there are Lightroom, GIMP, Illustrator and other programs with similar features.

    Knowing HTML gives you

    Web creation skills are very relevant today as the internet expands by leaps and bounds. Every enterprise, any, even the smallest shop, workshops and sports clubs - everyone wants to have their own website. And of course, for this they need a developer who owns CSS and HTML. The basics are easy to master, after which it's up to practice. Since layout technologies are constantly evolving, front-end developers will always be in demand. Those who decide to devote themselves to this interesting industry will never be left without a job.