Wondering how to create an HTML page? To do this, you need to spend several hours and you will know the basics of HTML. 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 markup of a site.
All modern browsers can recognize it. Then they display information in a convenient form for the user, as previously planned by the author.
This language uses special tags. Each tag performs its function. There are a lot of them. Ideally, you need to learn everything. But for a beginner, basic knowledge is 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.
To indicate where this element begins and closes, an opening and closing tag are used. It looks like this.
<opening tag> contents </ / closing tag>
As you can see, the opening and closing tags differ only "/".
An entire HTML document is a collection of these elements. There are certain requirements for the structure of the document. The entire content of the page should be between the two <html> and </html> tags. When you write code, take it as your habit to immediately put down the opening and closing tags.
Also remember that the structure of the HTML language has its own hierarchy. Otherwise, it is called nesting. The HTML tag is the most important, since everyone else is inside it.
HTML has two children:
- <head> ... </head>;
- <body> .. </body>.
The HEAD block indicates various overhead information. This information is not displayed in the browser. For example, instructions for developers, for any programs, for robots, and much more.
Most importantly, there is no content.
The BODY section indicates the content of the document that will be displayed to the user.
Learn to make open and closed tags right away, as there can be 10 nested elements. In addition, for convenience, it is recommended to do nested tags with indentation. For example, like this.
<html>
<head>
</head>
<body>
</body>
</html>
They do this so that equally important tags are at the same level, and child tags are "inside". This is much more convenient for perceiving and finding the right piece of code. Otherwise, you can get confused. But to save space, the head and body tags can be done without indentation. This is done so that everyone else does not have an extra margin. Everything else is desirable to separate.
How to create a simple HTML page
To write the code you need some kind of editor. There are a lot of them. Notepad ++ and Adobe Dreamweaver are popular. You can also use 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 paid. The difference between editors for writing HTML code and notepad is that special tags are highlighted. If it didn’t light up, it means that you wrote 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, we will finish the technical part and then proceed directly to the study of tags.
How to create a web page in HTML notepad
To start, open the notepad.
Then type in it what is indicated in the following screenshot.
Get used to writing with your hands, not just copying. When you write with your hands, you better remember the entire tag database.
After that, click on the "Save File" menu and specify any file name, but with the extension .html.
After that, the file can be opened in a browser and enjoy the result. You should now understand how to create a web page in HTML notepad.
W3C World Consortium
There is such an organization as W3C, which develops and implements all standards for the Internet. All browsers obey these standards and process page markings (codes) according to these rules.
On the official website of HTML developers, you can find a table with all the tags and rules for their use. In this article, we consider the most basic.
You might think, what rules can be? All described tags have their recommendation. There are several of them:
- Optional tag.
- Forbidden.
- Empty tag.
- Outdated
- Lost.
HTML tags
Before you create an HTML page, you need to understand what should be in the service part of HEAD.
In the HEAD area, there are both required and optional tags. Mandatory tag includes heading. It is denoted by <title> Heading </title>. It is assigned to the entire document. And what you see in the results of the Google search engine is the title tag.
Let's move on to the BODY section. There are elements that are displayed in the browser, and there are non-displayable ones. For example, comments are not displayed to the user. They can be used for notes or as a hint to other employees if you work in a team.
They are designated as <! - Comment ->
Everything that is between <! - and -> is regarded by the program that way. Please note that you cannot embed a comment tag in another comment tag. Since as soon as you open <! -, everything that goes further will not be displayed. The information will not be visible until the handler sees the closing tag ->.
An example of such a nesting:
<! - first comment <! - second comment -> continuation of the first comment ->
The result in the browser will be the following
continuation of the first comment ->
But the piece <! - the first comment <! - the second comment -> will not be visible. The second opening tag <! - was ignored and was perceived as plain text.
Headings in the text
The title is not only indicated in the HEAD section using the title tag. In the context, the title must be specified. Because only the user will see it.
Headings come in various levels. This creates a hierarchy in the text. Equivalent to volumes, chapters, paragraphs in books.
There are only 6 levels. The most important heading is indicated by <h1> Heading </h1>. In terms of page promotion, the text in the h1 and title tags should match. Moreover, h1 from an aesthetic point of view should be only one. But this does not mean that the browser will not process subsequent h1. They can be made as many as you want, but this is undesirable.
For subheadings, tags from h2 to h6 are used. They are so - called the heading of the first, second, third, fourth, fifth and sixth levels. This creates information nesting and subdivision into categories.
It looks like this.
Paragraph
The main text in the code must be formatted in the <p> ... </p> tag. It came from the word "paragraph." Each paragraph should be formatted with a <p> tag, and not sculpted in one pile. Normal line breaks will not be processed. Everything will be displayed in one line. For hyphenation you need to use the tag <br>.
Note that the carry tag does not close. He is single.
Consider the example of verses.
Different tags, in addition to their "name", have their own attribute. For example, a paragraph tag has an alignment attribute, which is indicated by align. It can take the value left, right, center. That is, left or right alignment or center.
Using links
You probably already thought: how to create an HTML page with links? There is nothing complicated in this. Creating HTML page links is very simple. There is a special <a> tag for this. It has its own required attributes. The correct link looks like this:
<a href="page URL"> link text </a>
If you do not specify the address and text, then this link will be useless or invisible to the user.
Conclusion
There are so many tags, and each has its own set of attributes. After reading this information, you should have understood how to create an HTML web page.
In order to expand your knowledge in this area, you need to read additional literature and use the official HTML tag reference, which is located on the W3C website. If you do not use a periodically updated directory of language authors, it will be difficult for you to become a professional in this field.