Basics of html and css. HTML Language for Beginners

Hi all!!! I'm very glad that you decided to conquer the heights of HTML basics and this right choice. After all, before creating your first website, you need to know the basics of HTML. Moreover, you will have to deal with HTML coding on a website more than once. I highly recommend checking out the HTML tutorials for beginners on my blog, and I guarantee that after completing this course, you will be able to create a web page or even a website yourself with ease.

Let's get started! First, let's find out
HTML – (from English. H ypert ext M arkup L anguage) is a hypertext markup language. It was first developed by British scientist Tim Berners-Lee in 1991-1992. HTML was only intended to mark up text, pictures, and tables on web pages. Now programming languages ​​such as JavaScript and VBScript can also be inserted into an HTML document.

HTML is not a programming language; it is intended only for marking up text documents.

To learn HTML, you just need to have a Browser and Standard Notepad or .
To open Standard Notepad, do the following on your computer: “Start” => “Programs” => “Accessories” => “Notepad” .

If you've heard about programs that make your work easier writing HTML code ( Microsoft FrontPage, Adobe Dreamweaver), then I do not recommend using them on at this stage training. Write your hand in a standard notebook or in text editor Notepad++, and when you complete this course, you will be able to use programs for acceleration. Subscribe to my blog updates and read how to use Microsoft programs FrontPage, Adobe Dreamweaver.

For better understanding, I have prepared an example. Look carefully at the picture:

Explanation.

1). Any HTML document begins with this line:

With this line we tell the browser that our HTML document complies with the international specification version 4.01. Thanks to this line, your page will look the same.
It is not necessary to remember this line; the HTML document will work without it. This is just so you are aware of what it is.

2). and is the beginning and end of the document.

3). and - the head of the document. Additional service tags are often inserted here; one of these tags is . You will learn about other service tags in further lessons; at this stage of training, this information is enough.

4). and - document title.
This header will be displayed in the browser:

in search I am index or in Google.

5). and - the body of the document.
Here is the content of the document, for example, text, pictures, tables, music, movies, etc. You will learn more about how to insert music, text, pictures into the body of the document in the following lessons.

Note:

You will often read and hear the word “tag”.
A tag is everything that is between the brackets< >. For example: , , , ,
,

etc. - all these are tags.
Tags are not visible when viewing the page in a browser, but everything that is not in brackets will be displayed in the browser when viewing.

There are many tags and they have different purposes.

There are tags that need to be closed. For example,
open the tag


and be sure to close the tag

And there are single tags, for example, this one
.

A tag is a kind of container that can contain text, pictures and other tags...

○ Pay attention to the correct sequence of opening and closing tags:

...

The tag that we opened first is closed last, the second one is penultimate, etc.

○ Here is an example of an incorrect sequence of opening and closing tags. With this order, there may be errors on the web page:

...

The error was in and.
Be careful when writing code.

Ready code.
This is what the finished standard mandatory HTML code for a web page looks like.

Page title Page text, tables, pictures, music and video.

Do not be discouraged if you understand little or almost nothing from everything written above. In the second lesson there will be more practice, and you will be able to manually write everything yourself and see how HTML works.

Continue to the next lesson

HTML is the hypertext markup language that made the Internet what we know and love. It is thanks to this wonderful tool that sites look beautiful and modern, and also ensure ease of use. HTML simply arranges the elements of a web page into a user-friendly format. Its work is comparable to what people like MS Word or OpenOffice do. They turn a faceless mass of letters into a document containing paragraphs, bold text, italics, tables and even images. The HTML language does approximately the same thing, with the only difference being that its documents are displayed in the browser, and the capabilities of this tool are much wider than those of a text editor. Tags are used for markup - special teams, describing the structure of a web page. They are enclosed in angle brackets - so that the browser can distinguish them from the bulk of the text. Next, we'll cover the basics of HTML for beginners.

Visual editors

Beginners who have just set out on the path to learning HTML often start their work with programs that allow you to create websites without any knowledge. In them you can simply arrange elements on the screen the way they will be displayed in the browser. It would seem that this is the source of eternal grace that allows you to get rid of the majority of web developers. But not everything is so simple, since visual editors have a lot of shortcomings that make it impossible to use them in serious projects.

All of these programs create a lot of unnecessary tags that make the final page unwieldy and suboptimal. Of course, in our age high-speed Internet This matters less than it used to, but there are a number of reasons why a concise and well-written website is more practical than its counterpart created in a visual editor. A web page made in such a program will not be processed well search robots, since every kilobyte of code is important to them, and cumbersome and illogical code with a bunch is unlikely to suit their taste. In addition, editors often lag behind the times, becoming irrelevant, and spending resources on their development is impractical, since no professional uses these products. Therefore, anyone who wants to work in the website development industry must know the basics of HTML.

Tags

As mentioned above, tags describe the structure of a web page to the browser. Most of them have an opening and closing tag, but not all. For example, ..., where instead of dots there is content. The first one shows where the tag starts, and the second one closes it. There may be other page markup elements inside; they can be nested inside each other like a nesting doll. It is important to close tags in a timely manner so that the page is displayed correctly.

There are also single tags that do not need to be closed. In them, the content is located inside, just as it can be written for most HTML tags, and sets the properties of the element. It is indicated in the opening tag and looks something like this: attribute="...", where instead of dots there is the attribute value. Knowing tags is the first and most important step to master HTML. The basics of this art also involve understanding the structure of a web page.

Document structure

Every HTML document has a corresponding extension, for example Index.html. This way the browser can understand what it is dealing with and display the page correctly. It is advisable to store all files used to create a website in one directory, which will make your life much easier in the future. The basics of the hypertext markup language HTML require a clear understanding of document structure. It starts with a tag that tells the browser HTML version, which is used in this document. On at the moment The fifth version of the language is current, so there is no need to invent anything here; you can safely insert the above tag at the beginning of any page.

Then there are the main paired structures that make up the “skeleton” of the site. The first tag, in which all the others are nested, is .... Anything outside of it is not recognized by the browser as a web page, so it opens the document and closes it. This tag is required for any document. It also contains several more required tags, which will be discussed below.

Head

Inside the ... tag is technical information that will not appear on the page, but is nonetheless an important part of the HTML document. The foundations of the site are laid in this place; here the encoding is selected and the page name is entered. It is contained inside a required tag.... The title is displayed at the top of the browser, where you can also place a small icon that characterizes the contents of the page. It is advisable to immediately indicate the encoding of the document for its correct display. This can be done using the tag. Meta tags provide information about the structure of the page and are usually located inside the head.

Link

Knowing the basics of HTML also involves using cascading styling, or css. They set the properties of the elements that will be displayed on the page. A modern approach to this task involves placing characteristics such as color, height and location of the element into external file for greater convenience. To include a css file, use the tag. In its finished form, it looks something like this: where href indicates the location of the file, and type indicates its type.

Body

It is in this part of the HTML document that the visible part pages. Everything that is done inside the "body" will be shown by the browser. In used huge amount HTML tags. The basics are text formatting, working with links, and basic tools for structuring a web page. To get started working in HTML, you just need to know the basic tags and be able to use them. Below are the most popular ones: