Tags are required to create HTML. Basic HTML tags. Empty block and inline containers

Creating a website nowadays will not cause any particular difficulties, since there are enough portals on the Internet that offer their services for creating a website. But a website created for such a service is not its own creation, but a semblance of a clone grown in a test tube.

A website created independently will always be a beloved child, suffered through the joyful agony of creativity. You can create a website using the HTML programming language, the so-called static site.

An HTML editor is used to create a website. To independently create a website based on HTML, you need knowledge of the HTML programming language, certain concepts of Photoshop, some article writing skills, a little imagination and design art.

A website created using the PHP programming language is a dynamic website. Most existing websites on the Internet are created based on PHP, on CMS (content management system) engines. On this site you can learn how to create a website and get qualified help when creating a website yourself using CMS engines:
- website creation on Joomla;

Starting to do something is always difficult. The main thing here is to set a specific goal. To begin, choose the theme and sample of the website you want to make, and draw up a plan for its implementation. And move along the path of achieving the main goal.

Like HyperText Markup Language. HTML is not a programming language, it is a website markup language.

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

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 quite enough.

The list of HTML commands is very large. But there are not many main ones. To start writing code, you need an editor. You can use Notepad. It is recommended to use Notepad++. 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 website 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. An element has an opening tag, a closing tag, and content. Moreover, the tag has its own additional attributes with their own values.

In the figure you can see two tags and . Remember that opening and closing are written the same, but only the “/” differs. If the tag is not closed, then the handler will consider everything else to be a continuation of this particular element. This is very important. Especially in links. We'll look at them a little further.

The tag is required. It always needs to be written. But there is no need to close it. According to standards, it is necessary, but if you do not close it, it will still work.

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

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 to avoid confusion later.

The service section states:

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

The style file is connected like this:

The script file is as follows:

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

Page title

This text will appear in the title of the browser tab. This title is also displayed as a result of the search engine results.

The text must be placed in the paragraph tag. It is denoted as . You can also use String for text.

You can format the text as in Word:

• italics
• bold text
• crossed out text
• underlined text

Text can be styled. We will look at them at the end, after reviewing other elements.

There are other important HTML commands. To create websites, headers are required. They are indicated using the First Level Heading tag. There are levels from 1 to 6. It is important to understand that headings must be nested.

An example in the figure.

Keep in mind that it is recommended to use only one h1 heading. In this case, it must match the tag. Of course, you can specify 200 h1 headings, but then you will be penalized by search engines.

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 is called and how.

If you are learning HTML commands, then you simply must know the link tag. This is one of the most important elements that makes up

In the example above, you can see that instead of the link text there is an image. That is, you can put both text and a picture.

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

The table is created as follows:

The width attribute specifies the width of the table. It can be in percentage or pixels. Border specifies the thickness of the border.

The structure is specified as follows. The tr tag is a string. Tag td cell. And all together - this is a table.

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

These HTML commands (width and alignment) work for other elements as well. The frame thickness is also indicated for images.

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

In the HTML language there are ordered and unordered. An example of such a list.

• First
• Second
• Third

The result will be like this:

• First
• Second
• Third

Ordered lists are created in exactly the same way, but instead of

, use the tag.

Here you can also set the list display type:

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

Arabic numerals are displayed as standard.

Because these are numbered lists, they have a start attribute that specifies the starting value of the list. For example, you can display a list starting from the 10th or 20th.

Using Styles

HTML commands for a site are quite varied, but they all follow styles. Styles can be specified as a file in the head: section or you can write a ready-made style right away.

Note that there is a difference between these style definitions. The style file 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 changes and use of these classes will only be inside this file. Your settings will not go beyond it.

Imagine you have 20 HTML pages and you decide to make the header 2 pixels larger. If you have everything in the styles file, then you only need to make changes there. If everything is individual, then all 20 pages will have to be updated.

You can specify only for one page as follows.



Now a few words about the tags that we used to make this page.

Description of html tags from the example

1. - these tags must be present on every web page. They tell browsers and search engines that this is an HTML page.

Any html page has the following structure:

... Heading tags ... ... Page body ...

2. - between these tags lies all the visible content of the page.

4. - between these tags the page title is written, which is displayed at the very top of the browser. By the way, when you search for something in search engines, the first thing that is displayed is the name of the page. A tag is often abbreviated to "title". I advise you to read the article: how to create a tag

Now let's move on to the tags that are in the body of the html page (inside and ).

5. - these tags center everything inside them. In this case, the center will be the center of the screen. It is recommended that you stop using these tags in the future.

6. is one of the class of title tags..., usually enclosing the title of the page. For example, this page has the title tag “Example of creating an html page”.

Note

These tags have a lot of weight in website ranking, so they need to be used carefully and wisely.

When composing html code, you need to adhere to a simple rule: the title tag should come first, and then they can come, etc. The main thing is that there should not be first, then, then, etc. There must be a strict hierarchy. Headings, etc. maybe a lot.

7.
is a single tag that does not require a closing tag. It moves to the next line. In my example, I wrote two single tags in a row to jump to the next line twice.

8. is a single tag that displays an image.

• src is a required parameter that specifies the image address (instead of URL_IMAGE you must enter the address where your image is stored).
  Note:
  • If the image is in the same folder as your html page, then it is enough to write the name of the image, otherwise you need to enter either an absolute or relative URL;
  • Don't forget to specify the image extension. For example, .jpg, .gif, .jpeg.
• alt or title - in these parameters you can write a description of your image. When you hover your mouse over the image, this description will appear. These parameters are important for website promotion, especially in image search. If the image failed to load, this text will be displayed, which is also a plus.

9. - these tags are created to change the font, background, size, etc. In short, everything related to text formatting can be configured in one tag. This tag has quite a few attributes, which I will discuss in a separate lesson.

Note: - similar tag.

There is also a CSS font property where you can set all these parameters.

10. - highlight in bold. Everything between and will be highlighted in bold. For example, if you write it at the very beginning of the content and close it at the very end, then all the text on the page will be highlighted in bold. This is a fairly common tag, an analogue of which is .

Search engines pay attention to this tag in terms of increasing the influence of keywords. But you need to be careful, because highlighting keywords in bold each time will be perceived as spam.

Wondering how to create an HTML page? To do this, you need to spend several hours, and you will know And you can create your first page in 5 minutes.

HTML stands for HyperText Markup Language. Translated, this means "hypertext markup language". It is important to understand that HTML is not a programming language, but a site markup language.

All modern browsers can recognize it. They then display the information in a user-friendly manner, as intended by the author in advance.

This language uses special tags. Each tag performs its own function. There are a lot of them. Ideally, you need to learn everything. But for a beginner, basic knowledge is quite enough.

HTML Basics

Before you create an HTML page, you need to know what it consists of. There are two concepts in this language: element and tag.

An opening and closing tag are used to indicate where this element begins and ends. It looks like this.

content

As you can see, the only difference between the opening and closing tag is "/".

The entire HTML document is a collection of these elements. There are certain requirements for the structure of the document. All page content must be between the two and tags. When you write code, make it a habit to immediately include an opening and closing tag.

Also remember that the structure of the HTML language has its own hierarchy. Otherwise it is called nesting. is the most important, since all the others are within it.

HTML has two child elements:

• ... ;
• .. .

The HEAD block indicates various service information. This information is not displayed in the browser. For example, instructions for developers, for any programs, for robots and much more.

The most important thing is that there is no content here.

The BODY section specifies the document content that will be displayed to the user.

Learn to immediately create open and closed tags, since there can be 10 nested elements. In addition, for convenience, it is recommended to indent nested tags. For example, like this.

This is done so that tags of equal importance are on the same level, and child tags are “inside”. This makes it much easier to understand and find the right piece of code. Otherwise you might get confused. But to save space, the body itself can be done without indentations. This is done so that everyone else does not have extra indentation. It is advisable to separate everything else.

How to create a simple HTML page

To write code you need some kind of editor. There are a lot of them. Popular ones are Notepad++ and Adobe Dreamweaver. You can also use a notepad.

This is what the Notepad++ editor looks like.

This is a very convenient editor and at the same time free. The above Adobe Dreamweaver is a paid version. The difference between editors designed for writing and a notepad is that special tags are highlighted. If it is not highlighted, then you wrote it incorrectly.



In order for the backlight to match the language, it must be specified in the settings.



Let's look at how to create an HTML page in Notepad. That is, let’s finish the technical part and then move directly to studying tags.

How to Create a Web Page in HTML Notepad

To begin, open Notepad.



Then type in it what is indicated in the following screenshot.



Get used to writing with your hands instead of just copying. When you write with your hands, you better remember the entire tag base.



After this, you can open the file in a browser and admire the result. You should now understand how to create a web page in HTML Notepad.

Worldwide Consortium W3C

There is an organization called W3C, which develops and implements all standards for the Internet. All browsers adhere to these standards and process page markup (code) according to these rules.

On the official website of the developers of the HTML language you can find a table with all the tags and the rules for their use. In this article we consider the most basic ones.

You might be thinking, what could the rules be? All the described tags have their own recommendation. There are several of them:

• Optional tag.
• Forbidden.
• Empty tag.
• Outdated
• Lost.
Tags in HTML

Before you create an HTML page, you need to understand what should be in the HEAD service part.

The HEAD area contains both required and optional tags. The required tag is the title. It is designated Heading. It is assigned to the entire document. And what you see in Google search results is the title tag.

Let's move on to the BODY section. There are elements that are displayed in the browser, and there are also those that are not. For example, comments are not displayed to the user. They can be used for notes or to give hints to other employees if you are working in a team.

They are designated as

Everything that is between is regarded by the program as such. Please note that you cannot nest a comment tag within another comment tag. Because as soon as you open .

An example of such nesting:

continuation of the first comment -->

The result in the browser will be the following

continuation of the first comment -->

Here's a piece will not be visible. Second opening tag Some more text