HTML is a site markup language. Many consider it programming, but this is not so. There are no variables, calculations, arrays, or other elements in HTML that are present in any programming language.
Using HTML, the developer can only create the appearance of the site. It is important to understand that no site exists without markup. HTML is the basis for creating web pages. All other functionality is added by various programming languages.
Create html document
You can create a simple page in any editor. Even Notepad will do. For a novice developer, it is recommended that you use other editors that have auto-substitution features and other tips. Thanks to this, you can create ready-made tables, links, images and other elements. And in Notepad you have to write each letter manually.
As a rule, Notepad is used only when there are no other tools at hand. First, a text document is created, and then saved in html format. All site pages must be with the html extension.
The html language is hierarchical. That is, there is a special structure for the html document. What it is? Consider below for clarity.
The structure of the html document. Example
The structure is always the same. If you want to change something, the browser will not be able to handle it. As a result, you will not get what you have in mind.
The figure above shows the structure of any html file. The first item indicates the type of file. This tag is specified once. If you use special editors, then the entire structure will be created automatically. You will need to tweak the default values.
The structure of the html document - the main tags:
These three tags comprise the framework of the entire site. Pay attention to the picture. All these tags have a closing tag with the “/” sign. If you write by hand, get used to putting both tags at once - opening and closing.
It was said above that site pages have the extension .html. That is, if you create a text document, but write the correct code, the browser will still display you just the text. There will be no code conversion.
Head section
In the figure below paragraph 3, the head section is indicated. This section provides service information. For example, you can specify the encoding (paragraph 4) and the page title (paragraph 5).
The title should always be. Without it, no search engine can determine the name of the content (text) on the web page. And this is bad for website promotion. Moreover, in the browser above the page title will not be indicated. This is a nuisance for the user.
The structure of the html document is such that the <title> header is indicated only in the head section. If the <title> tag is specified in the body section or after it, the handler will not pay attention to it.
In addition, the head section contains information for connecting scripts, style files, instructions for search engines or any other data that the user should not see, but they are important for the browser or programmers.
Connect styles
The structure of the html document allows you to connect styles in various ways. Moreover, they can be written individually in each element. But this method is not recommended, because the code becomes too large and inconvenient.
Search engines recommend putting all styles in a separate file, and just use different classes in the elements.
The file is connected as follows.
<link rel = “stylesheet” href = “style.css” type = “text / css”>
The href attribute specifies the path to the file. If there is an error in the path, the styles will not load. The type attribute is also required, which indicates that it is a css file.
Another option is to define styles directly in the head section.
But this option is also not highly recommended. These methods are very different in that the css file can be one for the entire site, and all changes in it will be instantly applied to all pages. And if you use the method shown in the figure above, then you will have to make changes to all existing pages of the site.
If the class you are creating will only be used on one page, then this option is right for you.
Script Connection
Scripts are connected as follows.
<script type = “text / javascript” src = “main.js”> </script>
Two attributes are required here: type and src. In the first, we indicate that this is a Javascript file, and the second - where the file is located. If you make a typo, then nothing will work.
Body section
The structure of the html-document is such that you need to place the content that will be visible to the user only in the body section. The name of the tag speaks for itself.
All the main page code is indicated here, which can include an unlimited number of elements. But the longer the code, the longer it will take to process.
Consider the most basic tags that can be used in the body area. The main ones are not so many. You will learn all the others as your knowledge and practice grows.
Main tags
The structure of an html document requires a mandatory order of writing elements. Tags should always be framed at the edges with brackets <>. Without this, the browser will not understand that this is a tag. After the opening bracket, the name of the element (tag) always follows. If you make a space between <and the name, the browser will consider this text.
Consider the example of an image tag. Please note that this tag is not closing, unlike links, paragraph and many others.
The order of the attributes does not matter. But their writing (design) is very important. Always the attribute name comes first, then the equal sign, then the attribute value is written in quotation marks. The value can be different - digital or text.
The src attribute in all tags indicates the path of the file to be uploaded. The alt attribute in all elements indicates a short description. In this case, a bird.jpg photo is loaded with a description - a bird photo.
In addition, in the img tag, you could specify dimensions, only width or height, title, alignment, style class or frame.
Consider the other main tags that are specified in the body section.
Tag | Appointment |
<a> ... </a> | References |
<img> | Images |
<p> ... </p> | Paragraph |
<br> | Wrap text on a new line |
<strong> ... </strong> | Thumbnail |
<i> ... </i> | italics |
<s> ... </s> | Strikethrough Text |
<u> ... </u> | Underlined text |
<ol> </ol>, <ul> </ul> | Lists |
<table> </table> | Tables |
How all this can be imagined in my head
Novice developers can not always immediately imagine all this speculatively. Look at a few examples of the structure of web pages, and then you will definitely understand.
This is the case:
And such:
Using styles
As mentioned at the beginning, styles can be connected either as a file or indicated in the head section. In any case, the description of the classes is exactly the same.
For example, you can specify a style for the title. Then you need to write h1 (since the style will be for the heading of the second level), open the brackets and write what properties will be in this element. If you know basic English, then there should be no problems. All properties are called human language.
If you want to specify this style for several elements at once, write them separated by commas.
The result will be a red caption.
The above methods are suitable for the design of standard elements. But you can also create your own classes. Their name must begin with a period, then any arbitrary name is written.
You need to use them like this.
Please note: if you specified style settings for a standard element, you do not need to write the word class in the future. The style will be applied by default. In the class attribute, you can specify only those styles that you start with a period.