HTML is a hypertext markup language that has made the Internet the way we know and love it. Thanks to this wonderful tool, sites look beautiful and modern, and their usability is also provided. HTML simply composes web page elements into a user-friendly option. His work is comparable to what text editors like MS Word or OpenOffice do. They turn a faceless mass of letters into a document that contains paragraphs, bold text, italics, tables, and even images. HTML does roughly the same thing, with the only difference being that its documents are displayed in a browser, and the capabilities of this tool are much wider than that of a text editor. Tags are used for markup - special commands that describe the structure of a web page. They are enclosed in angle brackets - <tag>, so that the browser can distinguish them from the total mass of text. Next, we’ll cover the basics of HTML for beginners.
Visual editors
Beginners who have just embarked on the path to learning HTML often start their work with programs that allow you to create sites without any knowledge. In them, you can simply arrange the elements on the screen as they will be displayed in the browser. It would seem that here it is - a source of eternal grace that allows you to get rid of most web developers. But not everything is so simple, as 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 our age of high-speed Internet, this is less important than before, but there are a number of reasons why a concise and well-written website is more practical than its brother, created in a visual editor. A web page made in such a program will be poorly processed by search robots, since each kilobyte of code is important to them, and bulky and illogical code with a bunch of semantic errors is hardly to their taste. In addition, editors often lag behind time, becoming irrelevant, and it is not advisable to spend resources on their development, since no professional uses these products. Therefore, anyone who wants to work in the field of website development should know the basics of HTML.
Tags
As mentioned above, tags describe the structure of a web page to a browser. Most of them have an opening and closing tag, but not all. For example, <title> ... </title>, where instead of dots there is content. The first of them shows where the tag begins, and the second closes it. Inside may be other elements of the page layout, they can be nested inside each other like a nested doll. Here it is important to close tags in a timely manner so that the page displays correctly.
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 registered for 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 points there is an attribute value. Knowing tags is the first and most important step for mastering HTML. The basics of this art also include understanding the structure of a web page.
Document structure
Each HTML document has a corresponding extension, for example, Index.html. This way the browser will be able to 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 make your life much easier. The basics of the HTML hypertext markup language require a clear understanding of the structure of the document. It starts with the <! Doctype html> tag, which tells the browser the version of HTML used in this document. At the moment, the fifth version of the language is relevant, so there is no need to invent anything, you can safely insert the above tag at the beginning of any page.
Then there are the main paired structures that make up the "skeleton" of the site. The first tag in which all the others are nested is <html> ... </html>. Everything outside of it is not recognized by the browser as a web page, so it opens a document and closes it. This tag is required for any document. It also contains a few more required tags, which will be discussed below.
Head
The <head> ... </head> tag contains technical information that will not appear 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 <title> ... </title> tag. The name is displayed at the top of the browser, where you can also place a small icon characterizing the contents of the page. It is advisable to immediately indicate the encoding of the document for its correct display. This can be done using the <meta charset = ”UTF-8” /> 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 using 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 transfer of such characteristics as color, height and location of the element to an external file for greater convenience. To connect a css file, use the <link /> tag. In finished form, it looks something like this: <link href = ”style.css” type = ”text / css” />, 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 displayed by the browser. <body> uses a huge amount of HTML tags. The basics are text formatting, working with links and the simplest tools for structuring a web page. To get started in HTML, just know the basic tags and be able to use them. Below are the most popular ones:
- <span> - is used to select the substring that the special style described in css will apply to;
- <a> - creates a link on a web page; the transition address is specified by the href attribute;
- <div> - one of the most popular tags of our time; Anyone 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 <div> blocks are set in css, and other blocks can be located inside this tag);
- <p> - selects a paragraph from the text; the contents of the paragraph are between the opening and closing tags;
- <ol> - a numbered list whose elements are enclosed in a paired <li> tag;
- <ul> - a bulleted list in which, as in a numbered list, elements are indicated by the <li> tag;
- <h1> - <h6> are the document headers (the number indicates the level of the heading, that is, <h1> is the main heading, and the subsequent options are its subheadings, by the way, the headings of the <h5>, <h6> levels are almost impossible to find on the Internet) , it’s also important to remember that there can only be one <h1> heading per page;
- <strong> - bold text;
- <em> - italics;
- <img /> - insert a picture on a web page (this is a single tag, it does not need a closing tag, but you must specify the alt attribute in it, which indicates the text for the image);
- <video> - embed a video on a web page;
- <audio> is a tag that inserts an audio file into a document.
These are not all the tags you need to create your own web page, but they are enough to lay the foundation for HTML for beginners.
CSS
The development of the HTML language has led to the fact that each tag has got a ton 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, not to adapt or change it. In addition, if your site has ten pages on which there are many headings marked in green, and you suddenly wanted to make them red, you will have to sweat, changing each manually. With the advent of cascading style sheets, this process has become simple and logical, and the HTML code has become much more readable.
CSS application
To create web pages, you need to know the basics of HTML and CSS, because now without knowing cascading style sheets, there’s nothing to do in this area. They set attributes for any element that apply to the entire document. Thus, you can set the color at once for all <p> or <a> elements by writing only one rule. Given the modern requirements for the appearance of web pages, the use of cascading style sheets is mandatory.
In order to connect the css file to the document, there is a link tag. The principle of its use was described just above, but it is not the only option for combining all styles in one place. There is also a <style> tag, which is located in the "head" of the document and allows you to register 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 extension .css, for example, Styles.css.
Javascript
Often a person who decides to start developing web pages understands 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 needed to make it interactive? For these purposes, there is a unique scripted programming language that interacts perfectly 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 expand the capabilities of HTML; it allows you to create and edit tags. Also, with this wonderful tool you can work with Cokie, download data from the server without reloading the page, make the site more interactive than the HTML capabilities allow. This language has security restrictions. If JavaScript is not used on the server side, then it will run in conditions that limit its capabilities so that attackers could not use malicious code on any computer.
Editors
The basics of HTML for beginners require knowledge of the most convenient and practical programs for creating web pages. As described above, visual editors such as Dreamweaver and the like are not suitable for this purpose. So, write tags in a regular notebook? This option is also doubtful, since the standard notebook does not have any special typesetting tools. Notepad ++ can do a good job of this. The big plus of this product is that it is open source and distributed absolutely free. It has a convenient syntax highlighting and automatic tag closing. Notepad ++ also provides a wide selection of interface languages, and its capabilities are easily expanded 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 perfect for JavaScript, CSS, and HTML. You will have to learn the basics of working with it yourself, but it's worth it. It has truly unlimited possibilities for fine-tuning, which allows you to tailor the program to your needs as much as possible.
HTML and CSS Basics for Beginners
As you can see, studying the art of creating web pages is not so 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 to layout is much easier than learning some programming language or Linux. In fact, there are not so many HTML tags, it is important to understand the practical aspect of their application.
Not be 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 is best able to cope with such tasks, it has few competitors. For those who do not like this Adobe product, there are Lightroom, GIMP, Illustrator and other programs with similar functions.
What gives knowledge of HTML
The skills of creating web pages are very relevant today, as the Internet is expanding by leaps and bounds. Every enterprise, any, even the smallest store, workshops and sports clubs - everyone wants to have their own website. And of course, for this they will need a developer who knows CSS and HTML. The basics are easy to learn, after which it's up to practice. Since layout technologies are constantly evolving, front-end developers will always be in demand. Anyone who decides to devote himself to this interesting industry will never be left without work.