HTML and CSS language for beginners. HTML: Basics for Beginners

With this series I want to open a series of lessons dedicated to HTML. I made this decision because I would like to try to teach users how to create websites from scratch. I already had this thought in my head for a long time. The only question that arose was where to start, with HTML or proceed directly to installing the engine and further configuring it.

But if you start by learning the engine, then some of the users who do not know HTML will be left out. So I decided to start with the basics and do it in such a way that even any beginner could figure out what and how.

So what is HTML?

The abbreviation itself stands for NuregT ext M arkip L apguage (language hypertext markup ).

To put it simply, HTML is special language markup that tells the browser how to display a particular web page. That is, what font should the text be shown in, what order should the elements be arranged in, which elements should be displayed underlined, etc. And depending on what element the browser encounters, in accordance with the rules laid down in the browser itself, this element will appear that way displayed. However, these rules can then be changed, but I will talk about this in my next lessons, which will be devoted to CSS.

I propose to start by looking at an example of the simplest web page that can be. Now you should not focus your attention on what certain tags mean. There is a time for everything, for starters, just pay attention to where everything is in the code and how it all relates to what is displayed in the browser. Consider an example HTML document:

Page title One day in my life Preparing for a concert

Today I woke up early because I had a hard day ahead. After all, today I have to perform at a concert in front of a hundred spectators. And to make sure everything goes well, I have to repeat the rehearsal program

Everything went without a hitch. No one from our team lost the rhythm, and as it turned out, everyone was worrying in vain.

Everyone performed well, although I think there was a moment when our drummer lost his tempo. But we cleverly got out of the situation.

First, you will need to type this text in some text editor(I find the most convenient is Notepad ++) and save the file under the name index .html somewhere on your disk. At double click On the saved file you will see a page that looks something like this.

Please note that the tags themselves are not displayed, but the content itself that is located between them is displayed. And from here you can conclude that tags act as a design element in HTML.

Look at source code. As you may have already noticed, there is a small indent before the word “One”. However, the browser did not take it into account; it simply swallowed it silently, as if it had never existed. Moreover, if you try to put many spaces between words, they will all be perceived by the browser as one space - HTML has this feature.

And here’s another piece of advice: when writing HTML code, train yourself to indent those tags that are nested within others. For example, the title and body tags are nested within the html tag. This means that when you write these tags, do not forget to indent them accordingly. Usually they are done using two spaces or tabs - this is a matter of taste. Why is this necessary? Now, in that small piece of the document that I gave as an example above, there is not much information, so it is quite problematic to get confused there. However, if there are many nested elements on the page, then nothing will be easier than getting lost in this huge code and having difficulty figuring out which part of the document you are in now. So it’s better to accustom yourself to a good style right away, then you will understand it yourself and it will serve you well in the future.

It is also worth pointing out the most minimum required tags that should be in an HTML document. I'm talking about this part:

But even if this part is missing, most browsers will turn a blind eye to all this and still display your page. However, such a frivolous style of writing code in which a person misses large number tags is bad writing, so it is advisable to have all these elements on your page in any case. Otherwise, this may pose a compatibility issue with other browsers, which could result in an impact on appearance your website, and as a result – traffic.

In addition, you can write comments in an HTML document - this is purely service information that is intended exclusively for you. Usually these are some important notes that serve as a reminder for you or just something worth paying attention to. Comments are not processed by the browser, which means that the user will not see them. They are usually written like this:

Now let’s try to figure out for ourselves which tag in our example above is responsible for what.

The html tag means that the output of html code begins.

head – service information section. Among other things, there is title , which is responsible for the text in the title of the browser window. This section can also be treated as information that we want to tell the browser about this page.

body – the main part of the document begins.

h 1 – heading.

h 2 – subtitle.

p – paragraph.

That's probably all! If this was your first HTML document, then congratulations! Yes, he doesn't look as great as we would like. But nevertheless, we have material that we can already work on. And in the next lessons, everything will be even more interesting, and we will slowly touch on working with cascading style sheets (CSS).

• < Назад

To comment, you need to register.

HTML basics for beginners, what every novice webmaster or blogger should know now. If you want to learn how to create basic websites, understand the code itself, know what goes behind what and what should go, it is simply impossible to do this without knowledge of the basics of the HTML language. On my blog I will have a whole chain of articles that I will devote to this topic from A to Z, I will describe each tag that is present in the document, what it means and how to use it correctly.

If you don’t know the most basic things, your path is closed. I believe that every person who decides to develop and create websites should know and understand the basics, what the site itself consists of, how it works and what happens in the code itself.

Of course, there are quite a few programming languages, they are all complex in their own way, but there are some that you absolutely need to know. If you want to beautifully design a letter to be sent by mail, you have your own VKontakte group, a group in other social networks, the same youtube channel, you need to tinker with the code on any of the site’s engines, you just need to know the basic concepts.

I gave only a few examples, in fact, now this knowledge is being used more and more often on the Internet. I am more of a practitioner than a theorist, so in my articles in this section I will show you my examples of how and what I did, step by step. I will post both example pages and entire sites.

HTML document is the simplest text document, the tagging language you encounter every day on the Internet. Tags describe the structure of a document. Tags are formatted as angular< >brackets, inside which the name of the tag is written. The browser looks at the structure of the document, builds it and displays it according to its instructions on your monitor, if, of course, you did everything correctly.

This whole process begins before you even see the finished picture. Browsers process a document sequentially, from beginning to end. Including everything that should be on the page. Tables, pictures, scripts and so on, except this includes CSS styles.

What is html - if you look at what Wikipedia writes - (HyperText Markup Language) hypertext markup language for documents. Most pages on the Internet contain page markup in this language. This language interpreted by browsers, the resulting formatted text is displayed on your computer monitor or mobile device.

This language is inherently very easy and accessible to learn. Anyone can learn and understand its basics. To use such a language, you need to know and use descriptors, which are also called tags. It is with the help of tags that a document is created.

What should the structure of the document consist of, what tags should be present. Let's look at everything with one small example. I wrote some text in MS Office and showed it in this screenshot.

To display this text in the browser in the same way as it was written in the document, you need to add page markup to it, which includes some tags. First, look at them, then I will describe each one who is responsible for what.

Welcome to my blog, you are now taking a lesson on HTML Basics. If you liked this article, you can subscribe to this blog to receive new articles in your email inbox.

What tags does any html document consist of, what does it include, and where should it all be written down?

Any code consists of characters that are placed in angle brackets. All these are called elements. All elements usually consist of two tags, opening and closing. I advise you to initially look carefully at the tags; if you miss one of them and do not close it, you will need to revise large parts of the code to find the error.

There were cases when it took more than one day, a person contacts and asks for help, he cannot find an error on his site, so always look very carefully at what and where you write. Let's go now in this example Let's look at each element of the code, what is written in it, what it means and what happens in the end.

Most tags are paired, which includes an opening tag and a closing tag. In addition to such tags, there are also single tags. Tags can go together with others, thus nesting within each other. For example, display text in bold and italics at once.

Text

Let me remind you once again, you need to follow the rules that are present in the document. This is how the browser understands what is on the page, its sequence, content, and so on.

A tag is a component that tells the web browser to perform a particular task. For example, the presence of a paragraph, table, form or image.

Attribute - modifies the tag. For example, you can align a paragraph centered or right-aligned, also set the location of the image on the page, and so on.

ALWAYS close tags, if you open it, be sure to close it. Otherwise, an error will occur and your document will not display correctly on the page. There are also exceptions, which should not be forgotten.

It is clearly necessary to understand that there is a document title and its body. The title is everything that is contained in the tag. Document body (), the body of the document contains all the contents of the page. If there is a need to leave a section of code for yourself, thereby enclosing these tags in comments, the tag is used for this. Everything that is inside such a tag serves as a comment and is not perceived by browsers.

Let's start with the very first one. At the beginning of the document I opened a tag and at the end I closed it. This code is present in absolutely every document; it tells the browser that everything placed between these tags is HTML code. It is the root of the document itself; everything that is subsequently present behind this tag is no longer included in the document and is not perceived by browsers. At the very beginning of the document, the tag is opened and at the very end it must be closed.

The entire section of this tag contains all technical information document. Like the previous tag, head must also be opened and closed at the end. This information includes the page title, its description, keywords for search engines and encoding. About the encoding a little below.

Content

This tag is included in the head and must be written inside the head tag. This title tag is mandatory and must be present in every HTML document. In addition to this, it appears as the title of the browser window. The length of such a header should not exceed 60 characters. The text of such a heading should contain the maximum full information, which characterizes the content of the page.

If you wrote "Hello World" in the header, this is the information that should be displayed on the page and no other. You shouldn’t deceive people and search engines, they don’t like it, and thereby you make things worse for yourself. The information contained in this tag should be relevant to the content of your page.

After required tag title, there is an optional, but equally important meta tag. This tag is single. Using this tag, you set a description for the page (description) and its keywords (keywords).

In addition, in meta tag may contain data about the author of the page and other metadata properties. You can prevent the entire page from being indexed by search engines. Put automatic update page after 20 seconds or after 5 seconds followed by transition to another page.

There can be several such meta elements, since they can carry completely different information. Other users, when they open the page in the browser, do not see all your descriptions; all this remains hidden from view.

The style tag can also be used to set styles on the page. If you use a lot different styles css, in this case it is advisable to set them in a separate file. If you need to specify several of them, all this can be specified directly in the html document.

.base ( width: 100px; background-color: #000; height: 150px; color: #fff; )

Or add styles specifically to one tag; to do this, you need to add a style element inside the tag itself. This tag must be used inside a container that sets styles for the page. You can use several such tags, this will not be an error.

A bit similar to the previous tag, the link tag allows you to set styles for a document that are in another file. In other words, you can connect to existing document full table css styles, which consists of many properties. Thus, you reduce the size of the document, which will ultimately load and open faster on a computer or mobile device with low internet speed.

You can connect more than one file, there are no restrictions. There is no need to close such a tag. If everything is done correctly, specific styles from separate file. This tag can be added to the basics of html and not forget about its existence. The result is a picture like this:

Using the script tag, you can connect different scenarios (scripts) to a document. The closing tag is required. The script itself can be located at the beginning of the document, inside or at the end.

Tells the browser that anything placed between these tags should appear in your browser window. Here are the main tags that can be present in absolutely every document. The body tag serves as the main body of the page, which includes all of its content. It is advisable to open this tag and remember to close it at the end of the document.

Let's go further, we see a tag that opens and closes in the same way. This tag denotes the main title of the text; in most cases, under the H1 heading is the page title. In fact, there are only six data headings. . They are also used in SEO, but this is a slightly different topic. I will definitely highlight one article for this and give a detailed description for them, subscribe to blog updates so you don’t miss anything.

The presence of such headings in the article will help important role when advancing the page. In addition, their use gives you a clear page structure, its title, subheadings, highlights, subparagraphs, and so on. Always use them and put them into practice. On many CMS, such as WordPress, when writing text, you can see “heading 1”, “heading 2”, “heading 3” and so on. They are the ones responsible for h1, h2 and h3.

If you write body text from a new paragraph, you write a tag

At the beginning and close it at the end

HTML document

This text will be bold, and this one is also in italics

Every document contains a head and title element. The first one, which comes immediately after the first tag. This tag contains all the information about the page, it also contains the element. Title – information about the title of the page, in other words the title of the page, its name. It is in the title that you point correct name page on which the user will search for you through search engine, Very important point. Both elements must be open and also closed. Each element is closed with a “/”. The result is a picture like this.

Heading&Page Contents

As you can see, there is nothing complicated. Here are the most basic tags that should be present in every html document. Do not forget to close each of them, otherwise the browser will not be able to perceive the full picture of the code. You need to know and remember this always. Then you start inserting text, pictures, videos, and so on. But this will already be in other articles.

To work with the code, use the Notepad++ program. It is free, and it is not difficult to find it on the Internet. Very convenient for understanding any code; it also conveniently displays the opening and closing tags. We support the syntax of more than 40 programming languages. Just what you need to learn the basics of html.

Notepad is superior in every way to a regular notepad. For maximum convenience, simplicity and learning, this editor must initially be installed on your computer. The most important advantage and convenience Notepad editor++ shows hints when writing code, which makes your work much faster and better.

Each document must also contain the following doctype element. Why is it needed and what should be in it. Usually people are not very keen on these lines, they copy them into their documents and work quietly. These elements tell the browser what version of html is being used in the document, what the page description is, what encoding is being used, what keywords are included, who the author is, and what the page is called.

They are usually placed at the very beginning. There are several options and they all differ from each other, I will write one example that is used most often. This blank can be used as ready-made template. Next there will be a clear description of each line, there should be no problems with this.

Briefly on clear language about the basics of html: This line tells the browser that this document is XHTML version 1.0, used English language and all this mess is located at this address. Next, in the meta tag we indicate the encoding that is used. The most commonly used is Windows 1251.

Description - the topic of SEO is touched upon, one of the three main tags that must be present in absolutely every document; this tag indicates the description of the page. What is written on this page, a short description, no more than two sentences. The keywords tag also covers the topic of SEO, this tag is required. It contains keywords that Internet users will use to find you through search engines.

IN title tag comes the name of the document itself, its title, which we see in the browser. Probably the most important tag in the entire document, which has the greatest impact on the promotion of the page. The article on adding and designing describes this tag in more detail.

What you need to remember from this lesson about the basics of html:

All main pages should always be named index. This is how it is accepted and everyone is used to it, no matter what the file extension is, it can be html or php. It is always called that way.

Watch a video about HTML basics from Webformyself.

Hypertext markup language, basic elements and structure. I will try to describe all this and much more on my blog. First of all, it will be written for beginners useful information, a code example is provided and the opportunity to download the example itself along with the finished page.

Welcome to the pages of my blog. HTML is a simple markup language that is used to create web pages. I said it was simple so you wouldn't be intimidated by learning it. Language html It’s just perfect for beginners - it’s much more difficult to immediately master a programming language from scratch, but html is actually much simpler.

In this article I want to tell you how to learn this language most quickly and effectively, so that within a month or two you know it perfectly. Do you think it's impossible? I started learning html at the end of March. At the end of May, I already knew 90% of the tags needed for work without any problems.

Of course, for the most quick learning you should find some useful sites. First, you will need the html reference. Even seasoned programmers use it, because it is simply impossible to keep dozens of tags and their attributes in your head.

From the reference books I can recommend to you - htmlbook. This is a really cool site that collects all the tags and shows the result of their work with detailed description. But the reference book is only an additional tool; the greatest effect can be achieved with real practice.

And here I’m talking about interactive courses. This is the ability to write code and immediately see how it is displayed. During the courses you will be given assignments. First, simple ones, for example, turning the text into a title or making a table. Then it’s more difficult. Eventually you will gain an understanding of what you can do with using HTML. If you think that you have to pay for this, you are mistaken.

is a wonderful site with courses on html and css. The first 16-18 courses are free! If you want to continue your studies and gain access to paid ones, you will have to pay 300 rubles per month or 1800 per year. Personally, I gave 300 rubles, I completed everything in a month paid courses and got a lot of benefit from it.

Another piece of advice from me – write it down! Write down all information that is new and important to you. Without writing it down, you risk not retaining the necessary knowledge in your memory. Personally, I have three general notebooks on my shelf, almost completely filled with writing, and from time to time I look at them when I forget this or that property.

HTML is just one web technology that helps create the structure and layout of a web page. CSS is entirely responsible for design in website development. These languages ​​need to be learned simultaneously because they interact with each other.

Once you have gained some knowledge, you can practice on your own. How to do this? Try laying out an article with pictures, a table, a nested list, a simple two-column page layout, or something else. You have to practice because that's the only way to quickly ingrain in your brain an understanding of how things work. The best thing, of course, is to find yourself a teacher in this matter, but most likely you will have to pay for this.

Webformyself is a wonderful Internet portal that provides a ton of information on website building. On their website you can find many free articles on HTML, CSS and website layout, but they have also released paid video tutorials, the purpose of which is to convey useful knowledge to you as quickly as possible.

At the end of the day, you should have a reason why you are learning these web technologies. This is usually done in order to learn how to create website layouts yourself. If you also have this goal, then an excellent option for you would be to purchase access to premium lessons on webformyself.com. As a result, you can get not only access to lessons on HTML and CSS, but also many others. For example, JavaScript and WordPress.

There is useful lessons, I would also like to note the opportunity to make up my first layout using lessons. This is very important because you will receive good practice, after which you will be able to get better at it yourself, trying to create other layouts for sites that you find on the Internet.

On average, HTML and CSS can be learned very quickly, with the right approach. For example, it took me several months. If you know where to get knowledge, the learning process can be speeded up several times.

Good sites with useful materials I gave it to you - then it’s up to you. In principle, the above resources are the best on the Internet. For example, more than one hundred thousand people have completed courses from Htmlacademy, and more than 87 thousand people have subscribed to Webformyself updates.

HTML stands for H yper T ext M arkup L anguage, i.e. Hypertext Markup Language is the basic building block of web pages, used to create and visually present web pages.

HTML adds markup to plain text. Hypertext contains various links through which web pages are connected to each other. With HTML, anyone can create both static and dynamic websites. HTML is a language that describes the structure and semantics of the content of a web document. The content of a web page is marked up using tags, which represent HTML elements. Examples of such elements are, , and so on. These elements form the building blocks for any website.

HTML was invented in 1991 by scientist Tim Berners-Lee, and was originally intended for the exchange of documents between scientists at different universities. With his invention, Tim Burns-Lee laid the foundations modern network Internet.

There are several versions of HTML. The language standard is continuously updated and supplemented, as a result of which it is published almost every year new version HTML. Version "HTML 2.0" was the first standard HTML specification, which was published in 1995. HTML 4.01 is the major version of HTML that was published in late 1999 and is widely used today. Today the most popular version is HTML-5, which is HTML extension 4.01, and published in 2012.

An HTML document or web page is a simple text document containing tags (which in turn are plain text enclosed in angle brackets). A web page can be typed either in a regular text editor (Notepad, WordPad, Word, etc.) or in a specialized one with code highlighting (Notepad++, Sublime Text, etc.). HTML Documents are stored as files with the extension .htm or .html.

As we present the material, each lesson will provide examples that will help you understand each code in detail and, through practice, enjoy learning. With our online HTML editor, you can edit an HTML document and then click the orange "Run" button in the editor, which is located above the left editor window to see the result. If you use a specialized HTML editor, then you can copy the example and view the results of your work in the browser installed on your computer.

This is a paragraph.

IN HTML tutorial More than 100 online examples have been prepared for you, thanks to which you can easily master the markup language. It's better to see once than to hear a hundred times! Theory plus practice is the key to your success in mastering HTML.

or study HTML lessons on your own and for free

Do you want to create your own website on the Internet? - Very good! HTML lessons will help you with this.

HyperText Markup Language, or HTML for short - the hypertext markup language of documents, a product of the W3C consortium - underlies almost all existing web pages, which puts it at the top of the hierarchy of tools for creating websites. You should pay special attention to studying the lessons in this section.

• HTML lessons are lessons on creating Internet pages.
• HTML lessons are the first step towards mastering the development of Internet sites.
• HTML lessons and web design lessons are completely different concepts.

New, modern HTML lessons designed specifically for beginners.

HTML syntax is quite simple and easy to understand, but this does not mean that the learning process will be smooth and error-free. There is no need to be afraid of them - they are inevitable. By making mistakes, you receive information about what you should not do in the future; this information costs some effort and time, and is therefore especially valuable. This is how knowledge and experience accumulate.

As you create your first pages, you'll enjoy the thought of discovering a world you didn't know before and maybe didn't even know existed - a world of other possibilities - the world of the Web.

Be careful! You may become addicted to a new activity.

Let's look at its elements:

Tags that define the beginning and end of a document.

Service section. Commands for browsers, instructions for search robots, links to remote files, and scripts are located here.

Tags that define the main heading of the document.

This section contains all visible part web pages.

In the browser we will see Hello World! :

To learn HTML you need Notepad. In it we will manually type the code. Perhaps that's all... Dealt with code interpretation software to view web pages, that is Internet Explorer, Firefox, Opera, Chrome and other browsers.

The lessons in this course will introduce HTML 5, XHTML and CSS inclusion. This combination is optimal for learning and allows you to significantly speed up your mastery of the material.

Currently, the HTML 5 specification is already available on the official website of the W3C consortium. The development of the fifth version began back in 2007; it is based on XML and is essentially XHTML, supplemented with new elements and attributes. The fifth version of HTML offers greater functionality and simplifies the process of creating interactive sites and web applications. In addition, HTML 5 contains additional elements that provide multimedia content within a web page.

New HTML has not yet received recommendation status, and its tags, on at this stage, are recognized only by some browsers. But despite this, HTML 5 lessons are available today.

Post Scriptum: The Internet consists of an infinite number of pages interconnected by hyperlinks using the HyperText Transfer Protocol, or HTTP for short - a protocol for transferring data in the form of hypertext documents. What is HTML? HTML - HyperText Markup Language or hypertext markup language for documents.