👨‍🏭 ⏭️ ⛸️ HTML commands for creating sites 🙆🏽 🏛️ 🈹

The acronym HTML stands for HyperText Markup Language. HTML is not a programming language, it is a markup language for a site.

All browsers can convert this markup into a user-friendly view.

This language uses special commands called tags. Each tag has its own function. There are a huge number of tags. Ideally, you need to learn everything. But for a novice developer, basic knowledge is enough.

Basic HTML Commands

The list of HTML commands is very long. But the core is not so much. In order to start writing code, you need an editor. You can use Notepad. Using Notepad ++ is recommended. He looks like this.

The advantage is that in special editors tags are highlighted in a certain color, depending on the category. The commands for creating an HTML site in notepad or any other program are the same. The language used is the same everywhere. The development environment is just a tool.

HTML has closing and non-closing tags. Also in this language there is the concept of nesting. Each object in the code is an element. The element has an opening tag that closes the contents as well. Moreover, the tag has its own additional attributes with its own values.

The figure shows two <html> and </html> tags. Remember that the opening and closing are written the same, but only "/" differ. If the tag is not closed, then the handler will consider everything else a continuation of this particular element. It is very important. Especially in the links. We will consider them a little further.

The <html> tag is required. It always needs to be written. But closing is not necessary. By standards it is necessary, but if you do not close it, it will work anyway.

There are other main tags: head and body.

commands for creating an html site in notepad

These HTML commands are the framework for the page. They are required. They also close.

The name of the tags corresponds to the meaning. Head - head. This section indicates service and important information that is not visible. The body section is the body of the document. Here is the content that is displayed to the user. Try to close tags immediately so that there is no confusion.

The service section indicates:

document title
style files;
script files;
meta tags;
directions for search engines;
directions for robots;
any other information that may be used by programmers, but not users.

The stylesheet is connected like this:

<link rel = “stylesheet” href = “style.css” type = “text / css”>

The script file is as follows:

<script type = "text / javascript" src = 'main.js'> </script>

The text must have a heading. We indicate it like this:

<title> Page Title </title>

This text will appear in the name of the browser tab. Also, this title is displayed as a result of the search engine.

Tags for text design

The text needs to be placed in the paragraph tag. It is designated as <p> Text </p>. You can also use the <span> String </span> for text.

You can make out the text, as in "Word":

<i> italics </i>
<strong> bold text </strong>
<s> strikethrough text </s>
<u> underlined text </u>

Text can be styled. We will consider them at the end, after a review of other elements.

Using Headers

There are other important HTML commands. To create sites, be sure to use headers. They are indicated using the <h1> Level One Title </h1> tag. There are levels from 1 to 6. It is important to understand that there should be nesting in the headings.

An example in the figure.

Keep in mind that only one h1 header is recommended. At the same time, it must match the <title> tag. Of course, you can specify 200 h1 headers, but then sanctions by the search engines will be applied to you.

Using Images

Images are an integral part of web pages. The example shows how you can insert a photo.

As you can see, the example shows in detail what and what is called.

Using links

If you learn HTML commands, then you simply must know the link tags. This is one of the most important elements that make up the World Wide Web.

The link is indicated by the <a> tag. But it must be closed. In addition, this element has a mandatory href attribute, in which the link address is indicated.

In the example above, it is seen that instead of the link text, a picture is indicated. That is, you can put both text and a picture.

Links can also be formatted using style classes or regular tags (italic, bold, underline, and strikethrough).

Using tables

Tables are also used very often. Initially, they were intended to present information in a convenient form. But then layout designers used them to place various elements of the page.

The table is created as follows:

<table width = "100%" border = "1">

<tr>

<td> Cell Text </td>

</tr>

<tr>

<td> Cell Text </td>

</tr>

</table>

The width attribute indicates the width of the table. It can be in percent or pixels. Border indicates the thickness of the frame.

The structure is indicated as follows. The tr tag is a string. Td cell tag. And all together - this is a table.

The table can be aligned. For this, the align attribute is used, which can take three values: Left, Center, Right. An example of use is given below.

These HTML commands (width and alignment) are also suitable for other elements. Frame thickness is also indicated on images.

Using Lists

Using HTML commands, you can create various kinds of lists. Almost exactly the same as in the Word editor.

In the Html language, there are ordered and unordered lists (bulleted). An example of such a list.

<ul>

<li> First </li>

<li> Second </li>

<li> Third </li>

</ul>

The result will be like this:

First
Second
Third

List type	HTML code
In the form of a circle	<ul type = "disc"> <li> ... </li> </ul>
In the form of a circle	<ul type = "circle"> <li> ... </li> </ul>
With square markers	<ul type = "square"> <li> ... </li> </ul>

Ordered lists are created in exactly the same way, but only instead of <ul>, we use the <ol> tag.

Here you can also set the type of list output:

"1" - Arabic numbers 1, 2, 3 ...
"A" - capital letters A, B, C ...
"a" - lowercase letters a, b, c ...
"I" - large Roman numbers I, II, III ...
"i" - small roman numbers i, ii, iii ...

Arabic numerals are output as standard.

Since these are numbered lists, they have a start attribute, which indicates the initial value of the list. For example, you can list from the 10th or 20th day.

Using styles

HTML commands for the site are very diverse, but they all obey the styles. Styles can be specified as a file in the head section: <link rel = “stylesheet” href = “style.css” type = “text / css”> or register a ready-made style immediately.

Note that there is a difference between these style definitions. The stylesheet can be specified on all pages of the site. As soon as you make changes to it, this update will affect the entire site as a whole. If you specify styles on a specific page, then the changes and use of these classes will only be inside this file. Your settings will not go beyond it.

Imagine you have 20 pages of HTML and you decide to make the header 2 pixels larger. If you have everything in the stylesheet, then you need to make changes only there. If everywhere individually, then you will have to update all 20 pages.

Only one page can be specified as follows.

This method is not recommended.

HTML commands for creating sites