Closing tag:

The content between the opening and closing tags is the content of the element.

Tags can be used in two ways:

Using tags in pairs

Paired tags contain an opening and closing tag. Here's what they look like:

Here is some text

There is an opening tag ( ) and closing tag () to indicate the end of a paragraph. This means that everything between these two tags is a paragraph.

Single tags

Single tags are used to define self-closing elements, and insert elements such as images. You don't need to define the start and end of these elements.

These elements are written like this:

The closing / (slash) is also optional. This is the same as recording . However, to avoid confusion with the opening tag, it's a good idea to add a / (slash) at the end.

Attributes

Attributes are elements that extend tags additional information. The attribute is placed in the opening tag, and includes a name and a value.

The attribute tag will look like this:

The 'HTML' tag above has a 'lang' attribute with a value of 'en-US'.

Document structureHTML

Every HTML document has a basic structure defined with the following items:

DOCTYPE orDTD: The document type declaration specifies the version of the HTML in use. This tag is placed at the beginning of the document.

HTML: Pair HTML tags defines the beginning and end of an HTML document.

ChapterHEADER< head>: this section defines general information for the page, and usually short. The content of this element is not displayed on the page. The title contains the TITLE tag, which defines the title of the document displayed in the browser's title bar. HEADER can also contain metadata, or links to external files.

ChapterBODY: This section contains the main body of the page. Its content is displayed in the browser. Most of the HTML page code is inside the body element.

Encoding: this tag specifies the encoding used in the HTML document. The encoding specifies how the file is saved and how it will be displayed. Special symbols. The generally accepted value for this tag is UTF-8, which allows almost all characters in the language to be displayed.

simple pageHTML

Now that we understand the basic HTML elements Let's try to create a basic HTML page. Let's start by creating a blank text document in a text editor.

Step 1: The first line of the HTML code to add specifies the DOCTYPE element as "html". This means that the latest version of HTML is being used.

Step 3: We then add a title tag with a Title tag and character set information.

Step 4: After that, the BODY tag is written.

Step 5: Now the empty HTML document is ready. Let's start adding text to display. We add a title tag

and tag

They define the first level heading and the paragraph below it.

hello world

Simple HTML Page

The main HTML page is ready and we can save it to a folder of our choice.

Page viewHTML

To view an HTML page, we need to open it in a browser. Navigate to the folder where the HTML document was saved and double click on it.

It will open in the browser and we see a very simple page. You can check what it shows:

Title like "Hello World"

First level heading as "Hello World"

Paragraph with text "Simple HTML page"

Now that we've created a simple HTML page, let's see how we can add more functionality. HTML provides many more features than what we have added to the main HTML page. You can add background color, fonts, font colors, images, links, lists, and more to create a beautiful HTML page. Let's take a look at some of these additional features.

Advanced text formatting

HTML provides special elements for special text formatting.

Heading levels can be set using tags

-

. There are 6 heading levels in total. And

- this is the largest of them in size,

- the smallest.

tags

are used to indicate the start of a new paragraph. The browser usually adds one blank line between two paragraphs.

Formatting elements are used to display special types of text. Text can be formatted with the following tags:

Bold -

Italic -

Underlined -

Font -

A complete list of these tags is available here.

Adding links

This is the link text

Adding images

Tag is a single tag, no closing tag. You can specify image attributes.

The src attribute specifies the location of the image.

The style attribute has many options, including the width and height of the image in pixels.

The alt attribute gives short description Images. Used if for some reason the image does not load.

Adding a title

Tag

is new to HTML5 and specifies the topmost element of a web page. Headlines usually contain the company logo, contact information, navigation links, etc. There can be multiple elements in one document<>.

Advanced Concepts in HTML

HTML is an easy technology to learn, so many designers just work with basic concepts. If you want to take full advantage of HTML, you will need to familiarize yourself with advanced concepts. This will help you create an attractive website with less effort.

We will mention a few concepts that will help you further. You can continue to learn more and use advanced HTML and its features.

HTML code validation

HTML validation is used to check errors in HTML code. If your web page is not loading, you can use a check to find the cause of the problem.

Validation also makes recommendations for code that doesn't conform to the latest HTML standard. Invalid HTML will render the site unusable. This may cause loading problems or output inconsistency with different browsers. Many validation services are free, such as validator.w3.org

Adding additional tags

There are many more HTML tags and attributes than we have discussed here. Two good learning resources are w3schools and HTML Dog which have more tutorials and full list tags.

You can also use the "View Source Page" in your browser to examine the code of well-designed websites and see new techniques.

With a web hosting service, you can add multiple HTML pages to your web domain. You may need software FTP uploads to transfer your HTML files to a web server. There are many web hosting services that provide an FTP feature.

AddendumCSS andJavaScript

CSS can be used to improve quickly appearance your site. You can use CSS to add colors, fonts, and change the placement of elements. With table binding css styles to an HTML page, you can change the style of the entire text.

JavaScript is a programming language and can be used to add extra functionality to HTML pages. JavaScript commands are inserted between tags. They can be used to add interactive buttons, perform mathematical calculations, and more.

The wonderful world of web development opens up before you. Dare! Conquering this peak is easy, you just need to start.

In general, I will estimate the time for basic study html like 2-8 hours, the rest is optional. And, of course, the study time depends on the interest. I recommend splitting it into several days of 20-30 minutes each.

You are ready? Then let's go!

We do NOT need an internet connection to create a page in html.

We'll need

1) Choose text editor . enough for the first time Notepad(in it we need only the command Save as)

If you immediately want to start programming in specialized text editors, then pay attention to: 1) for Windows NotePad++(download or ) intype(download) 2) for Mac and linux bluefish editor(download) Their difference from ordinary text editors is mainly that they do automatic indentation, ! make it possible to resave the file in a different encoding (note that you will encounter it in the future), paint tags in different colors, such as the code at the bottom of the lesson. In a regular editor, it will be one color.

2) Any internet browser such as Internet Explorer for Windows or safari for Mac OS X and iOS. Yes, you can also Mozilla, Google Chrome , Opera, Yandex and Mail browsers, etc.

Let's start creating an HTML page

1) create a folder on the desktop html. We will do this so that the lessons are structured and contained in one place.

2) Create our file in a text editor such as Notepad. Further Save as.

Encoding is better to choose UTF-8, then choose all types of files and choose a file name with .html at the end, for example index.html

We choose as a directory (folder) where to save our html
Click save. Ready!

The question is often asked about what file extension not visible. Let's take it in order

Being able to see file extensions can help pinpoint a file's type, and allows you to manually (with the command rename) change not only the extension, but also the file type (for example, from txt to html)

it should NOT look like this: photo, text document, game this is how it should look like: photo.jpg; text document.txt; game.exe But if your file names still look like in the first option (WITHOUT, for example, .txt ; jpg ; .exe at the end of the file name), do the following: We look at the settings of files and folders: For Windows XP Open any folder - Tools (top panel) - Folder Options - View - Hide extensions for registered files (uncheck) - Apply For Windows 7 Open any folder - Organize - File and search options - View - Hide extensions for registered file types (uncheck) - Apply For MacOS We click on the desktop - Finder - Preferences (Settings) - Advanced (Advanced) - check the box in Show all file extensions (Show extensions of all files) - Apply

3) paste in it the whole code (together with the comments) below:

My page title

4) open the file. You can choose another browser to open this file, for this we press the right mouse button on our file index.html - To open with and select a browser from the list, for example, Internet Explorer, Google Chrome, Mozilla, Yandex Browser, etc.

As a result, by opening the Internet Browser, the resulting index.html, You should see a page like this:

Picture 1.

On the Figure 1 we see how the browser displayed your page as a result. The text of the following elements is highlighted in red:

My page title

This is my first web page!

In the code below you can see the basic minimum of an html document. It must be learned and not confused in places by opening and closing tags.

Tag head selects the head of the document. It prescribes elements mainly related to using the Browser in processing the elements of your page (name, keywords, authorship, etc.) Specifically, we will talk about its content later.

Tag title stands for the title of the page. This is the only tag contained in head The that is displayed on the page. What you enter after the opening and before the closing tag will be the Title of your page on the Internet

Tag body stands for the body of the page. What to write after the opening and closing tags body and will be the content of your page

Any title

Just text

Text in a paragraph. It will be written with new line and end with a closing tag

Other text

Almost all tags in HTML opening and closing(an exception is, for example, the img tag, which means to insert an image).

Once again, I remind you that it is important not to forget to write closing tags for all other types of tags, otherwise the Browser will not understand exactly where you wanted to end this or that element. As below:

I want to highlight text bold, and this one in italics

We intentionally forgot the closing tag b after the word in bold. As a result, the browser displayed the following

I want to highlight text bold, and this one in italics

As you can see, the text until the end will be bold, and the one that was meant to be italic will be both bold and italic. So be careful!

5) If you want to edit something in your file index.html(and now it is opened by default only by the browser), then we press the right mouse button on our file index.html- choose To open with and from the list we select already a text editor, it will be either Notepad, or another text editor you have installed.

In principle, he explained the basics. So far, the html page looks quite simple, but in the next lessons I will tell you in detail about these and other elements and their purpose - we will insert images, make links and much more)

Congratulations!
Is it easy?)

Let's start our today's lesson by creating the simplest web page. To do this, we will first prepare a text document, then we will convert it into an htm document, then we will insert a few lines of code into it and after that we will open our created web page in the browser. After that, we will get acquainted with the concept of tags, the required elements and their varieties, which should be present on every web page. We will deal with their differences and features of their application. After that, we will learn the basic rules necessary when writing codes. They relate to required elements, rules for writing tags, and browser features in code perception.

Basic HTML structure
Let's create the ultimate simple html document. To do this, create a folder on the computer. Name her whatever you want. We go into it, click right click mice by empty field and select New > Text Document. Open the created text document and top menu select "File" > "Save As...". In the dialog box that opens, in the line "File name" we write index.htm. In the "Encoding" line, select UTF-8 and click "Save". We will have an index file in which we will enter all the HTML codes.

Now copy the code below and paste it into the file index. Important! You need to open this file with a special editor. I usually use Notepad. To do this, right-click on the file index and select "Open With..." > "Notepad". There are other special editors with markup highlighting. Who is more comfortable. After that, by pressing the Ctrl + S keys, we save our changes and after that we double-click on the index. Our first created web page will open in the browser.

My first web page

This is my first web page

So that the browser, when displaying the document, understands that it is not dealing with plain text, but with a formatting element and tags are applied. There are two types of tags - single and paired (containers). A single tag is used on its own, while a pair tag can include other tags or text inside. Paired tags consist of two parts - an opening and closing tag. The opening tag is designated as a single tag, and the slash tag> is used in the closing tag.

Every HTML document must begin with a tag and end with its counterpart, the tag. Besides them, in given file contains three more pairs of tags that must be present in any other HTML document. Pair of tags

And are used to refer to any information about the HTML document itself. The and tags are for adding a title that is displayed in the browser's title bar. The and tags are used to refer to any text displayed on an HTML page.

Required elements of an XHTML document
In the XHTML language, more new version HTML, there is one more element required for the created Web pages - the tag. It is intended to indicate the type of the current document - DTD (document type definition, document type description). This is necessary so that the browser knows how to interpret the current web page. This tag appears at the top of the file and identifies the current HTML document as conforming to the requirements of XHTML (or conforming to the XHTML specification). If you are creating an XHTML compliant document, it might look something like this:

My XHTML page This is my first XHTML page.

The tag has three flavors: Strict, Transitional, and Frameset. At the top of the HTML document, you declare which one you want to use.

Strict Use this variation of the tag only if you are sure that all visitors to your web page are using new web browsers that can correctly interpret style sheets. The Strict variant looks like this:

Transitional Use this variety if you do not know exactly which ones software will be used to view your web page.

Frameset Use this variety when working with frames.

Pay attention to another difference between XHTML codes and regular ones. HTML documents: The tag has three new attributes: xmlns, xml:lang and lang. When HTML applications you only had to include a tag to identify the file as an HTML document, but in this case you need to add an xmlns attribute that connects the document to the W3C definition of XHTML, which is still evolving. For now, remember to include the tag and the full tag in all of your web pages.

Correct coding
Tags alone are not enough to create a good web page. If you can still make some mistakes when writing HTML codes, then XHTML codes require strict adherence to the rules. Although current versions most modern browsers are able to correctly interpret your codes, even if they are typed from incorrect tags, subsequent versions of browsers will not differ in such acumen. You can now think about the future and learn to follow some basic principles writing web codes that conform to the XHTML standards.

Include all of the required XHTML elements covered in this tutorial in your web page codes. You can create an XHTML document template for yourself, which will initially contain all the necessary tags.

Use lowercase characters for all tags. For record browser

And they are equivalent (although they may not necessarily be). Use lowercase characters in all your commands so you don't have to code your web pages when XHTML standards change.

Never use spaces in filenames. old computer systems have difficulty reading filenames that contain spaces (like my first .htm page). Type an underscore instead of a space (for example, my_first_page.htm).

All tag attribute values ​​must be enclosed in double or single quotes. The absence of quotes will not lead to errors, browsers in many cases correctly process code without quotes, with the exception of text containing spaces. Then the browser will take only the first word as a value. Therefore, always get into the habit of quoting tag attribute values.

If any tag or its attribute was written incorrectly, then the browser will ignore such a tag and will display the text as if the tag did not exist. Again, unknown tags should be avoided as the HTML code won't pass validation.

There is a certain tag nesting hierarchy. For example, tag

Must be inside the container and nowhere else. To avoid errors, make sure that the tags are placed correctly in the code. If the tags are equivalent to each other in the link hierarchy, then their sequence does not matter. So, you can swap the tags and this will not affect the final result.

There are three states for the end tag: Required, Not Required, or Not Required. The required end tag must always be present, otherwise it will result in an error when the document is rendered. For some tags, there is no end tag at all. An optional closing tag indicates that the developer can either add or omit it, this will not lead to an error. However, it is recommended to close all similar tags, including optional ones, it disciplines, creates more harmonious and strict code that is easy to modify.

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

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

All modern browsers able to recognize it. They then display the information in a user-friendly way, as intended by the author.

This language uses special tags. Each tag has its own function. There are a lot of them. The ideal is 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.

The start and end tags are used to indicate where this element starts 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. Exist certain requirements to the structure of the document. All page content must be between two tags. and. When you write code, get in the habit of putting in an opening and closing tag at the same time.

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

HTML has two child element:

• ... ;
• .. .

The HEAD block contains various service 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 here.

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

Learn to immediately make open and closed tags, because there can be 10 nested elements. In addition, for convenience, nested tags are recommended to be indented. For example, like this.

This is done so that tags of equal importance are at the same level, and child tags are "inside". So it is much more convenient for perception and search of the necessary piece of code. Otherwise, you can get confused. But to save space, body can also be done without indents. This is done so that everyone else does not have an extra indent. Everything else should be separated.

How to create a simple HTML page

To write code, you need some kind of editor. There are a lot of them. Notepad++ and Adobe Dreamweaver are popular. Notepad can also be used.

This is what the Notepad++ editor looks like.

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

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

Let's see how to create 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

First, open 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, the file can be opened in the browser and admire the result. Now you should be able to understand how to create a web page in HTML Notepad.

World Consortium W3C

There is such an organization as W3C, which develops and implements all the standards for the Internet. All browsers obey these standards and process page markups (codes) 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 cover the most basic ones.

Can you think what the rules might be? All described tags have their own recommendation. There are several of them:

• Optional tag.
• Forbidden.
• Empty tag.
• Outdated
• Lost.

Tags in HTML

Before creating an HTML page, you need to figure out what should be in the HEAD service part.

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

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

They are designated as

Everything in between, is regarded by the program in this way. 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 first comment -->

The result in the browser will be the following

continuation of first comment -->

And here is a piece will not be visible. Second opening tag