Basics of html and css programming for beginners. Basics of the WEB programming language HTML

HTML Basics contains the basic rules of the HTML language, a description of the structure of an HTML page, and the relationships in the structure of an HTML document between HTML elements.

An HTML document is a regular text document that can be created either in a regular text editor (Notepad) or in a specialized one with code highlighting (Notepad++, Visual Studio Code, etc.). An HTML document has a .html extension.

An HTML document consists of a tree of HTML elements and text. Each element is identified in the source document by a start (opening) and an ending (closing) tag (with rare exceptions).

The start tag shows where the element begins, the end tag shows where it ends. The closing tag is formed by adding a slash / before the tag name: .... Between the start and closing tags is the content of the tag - the content.

Single tags cannot store content directly; it is written as an attribute value, for example, a tag will create a button with the text Button inside.

Tags can be nested inside each other, for example,

Text

. When investing, you should follow the order in which they are closed (the “matryoshka” principle), for example, the following entry will be incorrect:

Text

.

HTML elements can have attributes (global, applied to all HTML elements, and their own). Attributes are written in the opening tag of the element and contain a name and value, specified in the format attribute name="value" . Attributes allow you to change the properties and behavior of the element for which they are set.

Each element can be assigned multiple class values ​​and only one id value. Multiple class values ​​are written separated by a space, . The class and id values ​​must consist only of letters, numbers, hyphens, and underscores, and must begin with only letters or numbers.

The browser views (interprets) the HTML document, building its structure (DOM) and displaying it in accordance with the instructions included in this file (style sheets, scripts). If the markup is correct, the browser window will display an HTML page containing HTML elements - headers, tables, images, etc.

The interpretation process (parsing) begins before the web page is fully loaded into the browser. Browsers process HTML documents sequentially, from the beginning, while processing CSS and relating style sheets to page elements.

An HTML document consists of two sections - the header - between the tags ... and the content part - between the tags ....

Web page structure 1. HTML document structure

HTML follows the rules contained in the document type declaration file (Document Type Definition, or DTD). A DTD is an XML document that defines which tags, attributes, and their values ​​are valid for a particular HTML type. Each version of HTML has its own DTD.

DOCTYPE is responsible for the correct display of a web page by the browser. DOCTYPE specifies not only the HTML version (eg html) but also the corresponding DTD file on the Internet.

...

The elements inside the tag form a document tree, the so-called document object model, DOM (document object model). In this case, the element is the root element.

Rice. 1. The simplest structure of a web page

To understand the interaction of web page elements, it is necessary to consider the so-called “family relationships” between elements. Relationships between multiple nested elements are classified as parent, child, and sister.

An ancestor is an element that contains other elements. In Figure 1, the ancestor for all elements is . At the same time, the element is the ancestor of all the tags it contains: ,

, , etc.

A descendant is an element located within one or more element types. For example, is a descendant of , and the element

Is a descendant of both and .

A parent element is an element that is related to other elements at a lower level and is located above them in the tree. In Figure 1 and . Tag

Is parent only to .

A child element is an element that is directly subordinate to another element at a higher level. In Figure 1 there are only elements , ,

And are children of .

A sister element is an element that has a common parent element with the one in question, the so-called elements of the same level. In Figure 1 and are elements of the same level, as well as elements , and

They are sisters to each other.

1.1. Element 1.2. Element

Section ... contains technical information about the page: title, description, keywords for search engines, encoding, etc. The information you enter there is not displayed in the browser window, but it contains information that tells the browser how to process the page.

1.2.1. Element

The required section tag is . The text placed inside this tag appears in the title bar of the web browser. The title should be no more than 60 characters long to fit completely in the title. The title text should contain the most complete description of the content of the web page.

1.2.2. Element

An optional section tag is a single tag. With its help, you can set a description of the page content and keywords for search engines, the author of the HTML document, and other metadata properties. An element can contain multiple elements because they carry different information depending on the attributes used.

The description of the page content and keywords can be simultaneously specified in several languages, for example, in Russian and English:

Using a tag, you can block or allow indexing of a web page by search engines:

To automatically reload the page after a specified period of time, you need to use the refresh value:

The page will be reloaded after 30 seconds. To redirect the visitor to another page, you need to specify the URL in the url parameter:

Table 2. Tag attributes Attribute

charset	Specifies the character encoding for the current HTML document:
content	Contains arbitrary text that specifies the value associated with the http-equiv or name attribute, depending on their value.
http-equiv	Controls browser actions on a given web page (equivalent to HTTP headers). When rendering the page, the browser will follow the instructions specified in the attribute: default-style specifies the preferred style to use on the page. The content attribute must contain the ID of the element that references the CSS style sheet, or the ID of the element that contains the style sheet. refresh indicates the time in seconds before the page is reloaded or the time before redirecting to another page if the content attribute contains the line "url=page_address" after the time. Automatically reload the page after a specified period of time, in this example, after 30 seconds: If you need to immediately redirect the visitor to another page, you can specify the URL in the url parameter:
name	Associated with the value contained in the content attribute. Should not be used if the element already has the http-equiv , charset , or itemprop attributes set. application-name specifies the name of the web application used on the page. author specifies the name of the document's author in free format. description defines a short description of the page content, for example: generator specifies one of the software packages used to create the document, for example: . keywords contains a comma-separated list of keywords that match the content of the page, for example: . Also, the name attribute can take the following values ​​from the extended specification, such as creator, googlebot, publisher, robots, slurp, viewport, although none of these have been officially adopted yet.

1.2.3. Element

Inside this element, styles that are used on the page are set. CSS is used to set styles in an HTML document. There may be several such elements on a page.

Inside this element you can write formatting code for both the web page elements themselves and the entire web page.

.paper ( width: 200px; height: 300px; background-color: #ef4444; color: #666666; )

To connect a given style to an element, you need to assign the appropriate name to the element using the class (or id) attribute:

...

CSS code can be embedded directly into the markup element as the value of the style attribute, for example:

1.2.4. Element

You can also set styles for a document using another method - write them in a separate file with the .css extension, for example, style.css.

There are two ways to connect a file with styles to a web page:
via the @import url directive

@import url(style.css);

using the element. The element does not require a closing tag. This element defines the relationship between the current page and other documents. There may be several such elements on a page. The entry will look like this:

Table 4. Tag attributes Attribute Description, accepted value

crossorigin	Indicates whether CORS (a browser technology that allows a web page to access resources from another domain) should be used when retrieving an image from a site. anonymous — the browser automatically adds an Origin header to a cross-domain request, containing the name of the domain from which the request was made. If the server does not respond with the CORS header Access-Control-Allow-Origin: * (or the domain name instead of an asterisk), then loading the image will be blocked. use-credentials - If the server does not provide credentials using Access-Control-Allow-Credentials: true , then image loading will be blocked.
href	The main attribute of the tag, the value is the path to the file with styles.
hreflang	Determines the language of the text in the referenced document.
media	Specifies the type of device to which the link resource should be applied.
nonce	A randomly generated string variable on the server that sets rules for using inline styles to protect content. The attribute value is a text string.
rel	The attribute defines the relationship between the current document and the document being referenced. alternate - a link to the same document, but in a different format (for example, pages for printing, translation, mirror, feed in RSS or Atom format), . archives - indicates that the linked document is of historical interest. The link may point to a collection of records, documents, or other materials. author link to a page about the author of the document or to a page with the author’s contact information. bookmark is a reference to the article's closest ancestor that is the link, or to the section of the article most closely related to the element if there is no ancestor. external is used to indicate that the page being linked to is not part of this site. first specifies a link pointing to the first document in a sequence of documents. help link to a help document. icon specifies the path to the icon that will be used for the current document. last specifies a link pointing to the last document in a sequence of documents. license A link to the copyright information for a document. next indicates that this document is part of a series and that the link goes to the next document in that series. nofollow indicates that the link is not endorsed by the page's author or that the link is of a commercial nature. noreferrer indicates that the client request header containing the url of the request source should not be passed when following the link. pingback specifies the address of the pingback server, which allows the blog to automatically notify sites that link to it. prefetch specifies that the referenced file should be cached in advance. prev indicates that this document is part of a series and that the link is to a previous document in that series. search indicates that the referenced document contains an interface for search and related resources. sidebar indicates that the linked document will be shown in additional browser context, if possible, and some browsers, when you click a hyperlink, open a window to add the link to your bookmarks bar. stylesheet is a link to an external file that will be used as a style sheet for this document. tag indicates that the hyperlinked tag applies to this document. up indicates that the page is part of a hierarchical structure, and that the hyperlink points to a higher level of resource in the structure.
sizes	Specifies the size of icons for visual display. The sizes attribute is used only in conjunction with rel="icon" and can take the following values: widths-height - defines a list of sizes separated by spaces, each size must be in the format - widths-height (icon dimensions are specified in pixels), for example: ; any - the icon can be scaled to any size.
title	Defines the title of a link or the name of a set of alternative style sheets. The attribute value is text.
type	Specifies the MIME type of the document being referenced. In this case it takes the value "text/css" .

1.2.5. Element Table 5. Tag attributes Attribute Description, accepted value

async	The attribute indicates that the script will run asynchronously with the rest of the page (the script will start executing at the same time the page loads).
charset	Defines character encoding
crossorigin	Determines whether CORS will be used when loading external scripts (using the src attribute). anonymous — before loading the script into a cross-domain request, the browser automatically adds the Origin header, without passing access parameters (cookie, X.509 certificate, login/password for basic authentication via HTTP). If the server response does not contain the Access-Control-Allow-Origin: domain name header, the script will not be loaded. use-credentials — before loading the script into a cross-domain request, the browser automatically adds an Origin header indicating access parameters (cookie, SSL certificate or login/password pairs). If the server response does not contain the Access-Control-Allow-Credentials: true header, the script will not be loaded.
defer	Interpretation of scripts is delayed until the document is rendered on the user's device.
nonce	Provides security by protecting against cross-site scripting (XSS) attacks. Sets rules for using built-in scripts using nonce values ​​and hashes. During page rendering, the browser calculates hashes for each inline script and compares them with those listed in the CSP. Downloads from resources not included in the “white list” are blocked.
src	Indicates the location of the file with the script; the attribute value is the url of the file containing the JavaScript program.
type	Used to declare the script language used to compose the content of the tag.

1.3. Element

This section contains all the contents of the document. Available for the element.

Table 5. Tag attributes Attribute Description, accepted value

onafterprint	An event that fires after a page is sent for printing or after the print window is closed.
onbeforeprint	An event that fires before a page is sent for printing.
onbeforeunload	The event is triggered when the visitor initiates a transition to another page or clicks “close window”. Allows you to display a message in the confirmation dialog to let the user know if they want to stay or leave the current page.
onhashchange	The event is fired when the hash part of the URL changes, for example when the user goes from example.domain/test.aspx#page1 to example.domain/test.aspx#page2 .
onmessage	An event occurs when a message is received through an event source.
onoffline	The event is triggered by the browser when the browser determines that the Internet connection has been lost.
online	The event is triggered by the browser when the Internet connection has been restored.
onpagehide	The event occurs when the user leaves the page through navigation, such as clicking a link, refreshing the page, filling out a form, etc.
onpageshow	The event occurs when the user navigates to the web page, after the onload event.
onunload	The event is triggered if the page does not load for some reason, or when the browser window is closed.

This article is not intended to be a comprehensive guide to HTML document markup language. It describes the basics of HTML - the basic principles, concepts and definitions of this technology, having mastered which, you can easily move on in the study of HTML coding.

To study the lesson, download the archive with the necessary files.

HTML is a document markup language. The correct pronunciation is HTT.

Have you probably ever worked in the Word document editor or similar office applications? You probably know that this type of editor has rich capabilities for editing text, arranging elements, inserting pictures, etc.

Why, you might ask, write about word processors in an article on HTML? But why. If you figure it out, what is an office editor? This is an application for editing and displaying documents.

The key word here is document. That is, we create, edit and view a document in some program, in this case - in an office editor. If we open such a document in a simple text editor, for example, Notepad, we will see many strange symbols and signs. This mess of symbols is incomprehensible to humanity, but understandable to computers. Thanks to this internal language, the Word document takes on a certain structure and appearance in the editor itself, and the document appears before us in all its glory with formatted text and pictures in their place.

HTML is a document markup language for the browser. Word here is the browser, and the document is the HTML page. This is the very basis of HTML technology, the understanding of which is necessary in order not to confuse the markup language of web documents with programming languages. The name speaks for itself - using HTML we marking, where on the page the element, picture or text will be shown, and in what order they will appear next to each other.

Yes, simple typing and formatting of text in office applications has nothing to do with programming. But the observant reader will notice an important detail - in a word processor we type, edit and format text and pictures using visual buttons and menus, but why is HTML code written by hand? Why learn so many technical details of writing markup for a document?

In fact, there are a lot of editors with which you can create and edit HTML pages, similar to Word. That is, the source HTML code is hidden for us and we don’t get into it.

A sort of Word for HTML. These visual editors are called:

WYSIWYG editors - W hat Y ou S ee I s W hat Y ou G et. That is, if we translate it into Russian: what we see is what we get.

I call them "wuzivoogies". Although this is phonetically incorrect, it clearly demonstrates the meaninglessness of this invention. Beginners very often use such editors to create their first websites. Of course, this is convenient - you don’t need to delve into the study of tags, design styles and other, at first glance, unpleasant and complex things. The editor itself automatically converts our actions into HTML code.

But, as they say, nothing just happens. More specifically, this approach has very serious drawbacks. What prevents everyone from using visual editors to design HTML pages? The fact is that pages formed in this way usually have a lot of unnecessary code and a lot of errors from a semantic point of view. Now, of course, there are no problems with a high-speed Internet connection and the difference in page size of 400 kb and 100 kb is not significant for speed, however, optimized and correctly written HTML code eliminates many problems and provides many advantages, namely:

• Competent HTML code has a positive effect on search engine optimization and the speed at which a search robot crawls a site. The kilobytes of code generated by the vuzivuga are not acceptable and even harmful;
• The HTML code generated by the WYSIWYG editor has many semantic errors. That is, the tags generated by such an editor are used for other purposes, where they need to be used, for example, lists
  , the editor will generate another tag that we don’t need. Depends, of course, on the editor, but here we mean complex solutions for creating websites, and not simply editing text in a text area using WYSIWYG tools.
  • A lot of unnecessary tags are generated and the document structure becomes bloated. Let's say you move an element in such a program, first to the right, then to the left, then to the center - each action leaves a trace in the source HTML code. The editor is a program and it cannot know what exactly you want to get as a result; it generates tons of code, taking into account all possible options for the behavior of the document in the browser.
  • As a rule, editors for the visual design of HTML code quickly become outdated. And due to the lack of interest on the part of professionals, they are generally deprived of support and stop developing. And HTML is evolving. Everything develops except the wuzivoogi. Accordingly, they cannot generate correct and modern code that would use new features and solutions.
  • To support and develop such projects is heavenly punishment. There can be no talk at all about using patterns and reusing code.

  So, we will write HTML only with pens. Adequate tools for visual HTML editing have not yet been invented, and they are unlikely to appear. The HTML markup language is easy to learn and understand, and there are many tools for automating the writing of HTML code, but more on that in other lessons.

  After tinkering a little with the WYSIWYG editor, young HTML gurus leave this futile task and move on.

  HTML Document Structure

  For classes, I recommend downloading and installing the Sublime Text editor. I highly recommend not using the built-in Windows Notepad for HTML layout if you don’t want to break your psyche in the early stages of learning HTML.

  We decided that we would write the HTML document code manually, that is, type it up. HTML Layout is the process of creating an HTML document. In the common people and in informed circles, it’s just layout. Any document has a structure and certain rules of construction. What elements does the code consist of, what is the structure of HTML?

  Let's create an initial template on the computer - the index.html file, open it using an editor and paste the following code into it:

  Header Document Body Please note that HTML documents have a .html extension.

  So, in order from the example.

  - document type (doctype)

  This construction is always indicated at the beginning of the document so that the browser correctly “understands” which version of HTML is used when constructing the document.

  Due to the fact that HTML is constantly evolving, it has several versions, like any software product. The current version of HTML is the fifth and the doctype given in the example is current.

  In principle, there is no point in going deeper into the study of document types, because with the release of HTML5 this design has become a standard. Just insert it at the beginning of the document every time you start creating a website layout.

  - beginning of the document

  The first tag we see after the doctype is .

  An HTML tag is a structural unit of HTML document markup. HTML code is made up of building blocks called tags. Each tag has its own function, and learning the HTML markup language is ultimately about learning the tags and their properties in a document.

  I would like to note that learning HTML is not as difficult as it might seem at first glance. Learning the tags used in document markup is not such a big burden on the brain.

  So, document markup starts with a tag and ends with a closing tag. Every tag that contains other tags or elements must be closed with a closing tag. For example, , , , etc.

  The tag is mandatory because it contains the entire structure of the document and is a wrapper for other elements.

  Tag

  Next, we see the tag, which contains other elements that are not yet clear to us. Contains other elements - this means that the elements or tags are between the opening and closing tags of the construct:

  content or other tags

  The purpose of the tag is to store the meta information of an HTML document, that is, information that is not displayed in the document itself, but is important and largely determines how the document will look and behave.
  This tag is required in the document.

  Tag - document title Title

  Title is a required tag that contains textual meta information that appears in the browser or tab title. The tag must be in the . Also, the contents of this tag are used by search engines to display the document in search results.

  Meta tag

  Meta tag is a specialized tag designed to provide structured data about a page. Meta tags are most often used in the . Meta tags are not required in the structure of an HTML document.

  Favicon

  Attaches a file with a favicon image to the document. Favicon is a miniature icon displayed next to the document title in a browser tab. A favicon is a graphic file measuring 16 x 16 (or 32 x 32) pixels, which can have various formats, such as png, jpg, ico, gif. The ico format is traditionally used. Animated favicons are gif files containing animation. You can see an animated favicon, for example, on VKontakte, when a new message arrives.

  CSS document styles

  Includes a CSS file with HTML styling to the document.

  CSS- cascading HTML document styles. Each tag that is located in the tag has a set of properties, such as color, width, height, position relative to other elements. All these properties are CSS styles that can be exported to an external file. The design connects external files to the HTML document, including CSS styles.

  Note: The href property of a construct specifies the location of the external file. In our example, the file style.css And favicon.ico, are in the same folder as the file index.html.

  Tag

  does not have a closing tag.

  The tag contains code or a link to a javaScript file and is most often used inside a tag, although Google's Page Speed ​​Optimization tool recommends using this tag at the end of a document, before the closing tag. In our example, an external file is connected, which is located in the same folder as the main index.html file.

  So, friends, we have looked at the main elements that are used most often in the tag. In addition to these elements, there are a number of others that are more specific and optional.

  Body aka body

  This is where all the fun and visually tangible things begin in the HTML layout of a document.

  Let's move on directly to the layout of the visible part of the page. Everything that we write and layout inside the tag will be displayed in the browser. Let's open our file index.html in the browser in order to clearly see what we are doing in the editor.

  The tag can contain any HTML tags necessary to design the document and provide its functionality (form). I will provide a table of the most used tags and briefly describe each one. You can immediately run the examples given in the editor.

  Tag	Description
  	A tag for creating links in a document. Example: link text The href attribute specifies the document to which the link will lead.
  ,	Makes text italics or bold (emphasized). Example: italic text bold (emphasized) text
  , , , , ,	Document headings. There are 6 levels of headings in total, but in practice only h1 to h4 are used. There should be only one heading in the document, highlighted with the h1 tag, as the main heading of the document. Examples: First level heading Second level heading Third level heading... etc.
  ,	Document lists. They are a numbered or bulleted list. The element of such a list is the tag Examples: Bullet list item 1 Bullet Item 2 Numbered list item 1 Numbered list item 2
  	Paragraph. This tag defines a paragraph of text separated from other paragraphs. It is highly recommended to close this tag. Example: The appearance of HTML markup is largely determined by CSS styles. However, some webmasters choose not to use styles in the early stages of a project.
  	Picture. Using this tag, you can insert a picture into the HTML markup. Be sure to include alternative text for all images - the "alt" attribute. This tag is self-closing. Example:
  + +	Forms and input elements. Forms are designed to enter information into the system on the server. A kind of feedback between the user and the site. For example, forms are used when you need to send some message to the server. In addition, forms can perform other functions, but the main task is to send data to the server. An example is a simple form for sending a message, in which the site user indicates his name, E-mail and some text: Message text
  	Defines a substring within a string. Used to style part of a line using CSS. One of the most frequently used tags. Without design, it does not manifest itself in any way in the browser. Example: Learning HTML, in most cases, does not cause any difficulties for beginners.
  ,	Tags are designed to insert video and audio into a document. The closing tag is required. Examples: The controls parameter tells us that the page should display media content controls, just like a regular audio/video player.
  	Truly a royal tag. The most used and popular tag in HTML page markup. This is a block element designed to manage blocks on the site. The concept of “wonderful” layout is often used - this means that all blocks on the site are laid out using these tags. May contain other tags. Example: Text in a nested block All elements, in most cases, are styled with CSS style properties. The closing tag is required.
  	This tag loads an external page into the document. Example:

  We have not considered all the tags, and this is not necessary at this stage. The main thing is to understand the basic idea of ​​HTML, learn how to use the tags presented above, and then move on.

  Please note that all names in the included files must be written in Latin characters, without spaces.

  For example, don't:

  This is necessary for greater compatibility of page content. In addition, standards for writing HTML code dictate.

  So, now we know some basics of HTML: what structure a typical HTML document should have, we know some of the most popular tags, it’s time to get down to the most delicious part - namely, cookies.

  Practical assignment on HTML layout

  If you haven't downloaded the archive with examples yet, do so. For example, you can look at the example.html file, which was also in the archive.

• Unpack the archive and create an index.html file in the folder with the unpacked files. Open the created file using the Sublime Text text editor;
• Create an initial document structure with a doctype, a tag containing and and proceed to edit the contents of the tag;
• Open the readme.txt file and complete the appropriate tasks in the index.html file you created. To check the result, open index.html in your favorite browser.

This concludes the lesson on the basics of HTML, in the next lesson “CSS Basics” we will learn how to manage the styles of document elements, get to know cascading style sheets, learn how to use style classes and make our layout beautiful and colorful.

See you again, friends!

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 featureless mass of letters into a document that contains 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 commands that describe 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 of high-speed Internet, this is less important than before, but there are a number of reasons why a concise and well-written website turns out to be more practical than its counterpart created in a visual editor. A web page made in such a program will be poorly processed by search robots, since every kilobyte of code is important for them, and bulky 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 mastering 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 the version of HTML that is being used in this document. At the moment, the fifth version of the language is relevant, so there is no need to invent anything, 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 in an 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 of the page is created. Everything that is done inside the "body" will be shown by the browser. It uses a huge number of 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:

• - used to highlight a substring that will be subject to a special style described in css;
• - creates a link on a web page; the transition address is specified by the href attribute;
• - one of the most popular tags of our time; anyone who decides to learn the basics of the HTMLl language should pay special attention to it, since this is a block element, on the basis of which the lion's share of modern sites are made (parameters for blocks are set in css, and other blocks can be located inside this tag);

• Selects a paragraph from the text; the content of the paragraph is between the opening and closing tags;

• - a numbered list whose elements are enclosed in a paired tag
• - a bulleted list, in which, just like in a numbered list, elements are designated by a tag
  • - - document headings (the number indicates the heading level, that is, the main heading, and subsequent options are its subheadings; by the way, level headings are almost impossible to find on the Internet), it is also important to remember that there can only be one heading on a page;
  • - thumbnail;
  • - italics;
  • - inserting a picture onto a website (this is a single tag, it does not require a closing tag, but it must include the alt attribute, which specifies the text for the image);
  • - inserting video into a web page;
  • - a tag that inserts an audio file into the document.

  These are not all the tags you need to create your own web page, but they are enough to lay the basics of HTML for beginners.

  CSS

  The development of the HTML language has led to the fact that each tag has acquired a lot of attributes, and the requirements for the appearance of web pages have increased significantly. The code became cumbersome and inconvenient, it was difficult to read it, let alone adapt or change it. In addition, if your site has ten pages with a lot of headings marked in green, and you suddenly want to make them red, you will have to work hard, changing each one manually. With the advent of Cascading Style Sheets, this process has become simple and logical, and the HTML code has become much more readable.

  

  Applying CSS

  To create web pages, you need to know the basics of HTML and CSS, since now there is nothing to do in this area without knowledge of cascading style sheets. They set attributes for any element that apply to the entire document. This way you can set the color for all elements at once

  Or by writing only one rule. Given modern requirements for the appearance of web pages, the use of cascading style sheets is mandatory.

  In order to connect a css file to a document, there is a link tag. The principle of its use was described a little higher, but it is not the only option for combining all styles in one place. There is also a tag, which is located in the “head” of the document and allows you to write styles without using CSS files. It is not necessary to use one method or the other. They can be successfully combined to obtain the best result. To create a file with style sheets, you need to create a file with a .css extension, for example, Styles.css.

  JavaScript

  Often, a person who decides to start realizing that the tools that HTML offers are not enough for his tasks. The basics will allow you to create a beautiful page, but what if you suddenly need to make it interactive? For these purposes, there is a unique programming that interacts perfectly with HTML. It is called JavaScript, as it was conceived as the younger brother of the popular Java language. Today, these languages ​​have acquired significant differences, and the gap between them is only growing.

  

  JavaScript can extend the capabilities of HTML by allowing you to create and edit tags. Also, using this wonderful tool, you can work with Cokie, download data from the server without reloading the page, and make the site more interactive than HTML capabilities allow. This language also has limitations related to security. If JavaScript is not used on the server side, it will be executed under conditions that limit its capabilities, so that attackers cannot use malicious code on any computer.

  Editors

  HTML basics for a beginner require knowledge of the most convenient and practical programs for creating web pages. As written above, visual editors such as Dreamweaver and the like are not suitable for these purposes. So, should you write tags in a regular notepad? This option is also questionable, since a standard notepad does not have any special layout tools. Notepad++ can handle this task well. The big advantage of this product is that it is open source and distributed absolutely free. It has convenient syntax highlighting and automatic closing of tags. Notepad++ also provides a wide selection of interface languages, and its capabilities are easily expanded with numerous add-ons.

  

  Sublime Text 3 is a program similar to Notepad++, but available for a fee. It was she who won the hearts of most developers. Sublime Text 3 is perfect for JavaScript, CSS and HTML. You'll have to learn the basics of working with it yourself, but it's worth it. It contains truly limitless possibilities for fine-tuning, which allows you to tailor the program to your needs as much as possible.

  HTML and CSS Basics for Beginners

  As you can see, learning the art of creating web pages is not as difficult as it seems at first glance. Just a few months of practice will transform you from a timid user to a novice developer. Learning layout is much easier than mastering a programming language or Linux. In fact, there are not so many HTML tags; it is important to understand the practical aspect of their use.

  

  Skill in working in Adobe Photoshop will not be superfluous in this matter. This program allows you to work with photographs, pictures and other graphic elements of a web page. At the moment, it is Photoshop that best copes with such tasks; it has few competitors. For those who do not like this Adobe product, there is Lightroom, GIMP, Illustrator and other programs with similar functions.

  What does knowledge of HTML give?

  The skills of creating web pages are very relevant today, as the Internet is expanding by leaps and bounds. Every enterprise, even the smallest store, workshops and sports clubs - everyone wants to have their own website. And of course, for this they will need a developer who knows CSS and HTML. The basics are easy to master, after which it's a matter of practice. Since layout technologies are constantly evolving, front-end developers will always be in demand. Anyone who decides to devote himself to this interesting industry will never be left without work.

  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 of the modern Internet.

  There are several versions of HTML. The language standard is continuously updated and supplemented, and as a result, a new version of HTML is released almost every year. 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 an extension of HTML 4.01, 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.

  Online examples in every lesson

  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.

  Example HTML: Try it yourself
  
  
  Page title
  
  This is the title
  

  This is a paragraph.

  
  
  Online HTML examples

  The HTML tutorial provides you with more than 100 online examples that will help you easily master the markup language. Better to see once than hear a hundred times! Theory plus practice is the key to your success in mastering HTML.

  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.

  HTML Basics

  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 on other social networks, the same YouTube channel, you need to tinker with the code on any of the site 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.

  An Html document is the simplest text document, a tagging language that you come across 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.

  Basics for Beginners

  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 is interpreted by browsers, and 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.

  Blog of Evgeny Nesmelov! website Basics of html and css for beginners

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

  < html > < body > < h2 >< / h2 > < p >Welcome to my blog, now take the HTML Basics tutorial. If you liked this article, you can subscribe to this blog to receive new articles in your email inbox.< / p > < h2 >Blog of Evgenia Nesmelov! Nesmelov. ru Basics of HTML and CSS for beginners< / h2 > < / body > < / html >

  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 now use this example to 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

  < strong > < i >Text< / strong > < / i >

  HTML document structure

  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 the technical information of the document. Like the previous tag, head must also be opened and closed at the end. This information includes the page title, description, search engine keywords, and encoding. About the encoding a little below.

  Content

  < head >Content< / head >

  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 header should contain the most complete information that 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 the mandatory title tag, 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, the 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. Set the page to automatically refresh after 20 seconds or after 5 seconds, followed by transition to another page.

  < meta name = "robots" content = "index, follow" > < meta http - equiv = "refresh" content = "20" > < meta http - equiv = "refresh" content = "5; url=http://сайт/" >

  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 many different css styles, then 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; )

  < style type = "text/css" > 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 attach a complete css style sheet, which consists of many properties, to an existing document. Thus, you reduce the size of the document, which will ultimately load and open faster on a computer or mobile device with low Internet speeds.

  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 a separate file will be loaded into your document. This tag can be added to the basics of html and not forget about its existence. The result is a picture like this:

  < link href = "css/style-lg.css" rel = "stylesheet" > < link href = "css/style-md.css" rel = "stylesheet" > < link href = "css/style-sm.css" rel = "stylesheet" >

  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.

  Page headings h1 h2 h3

  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 play an important role in promoting 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

  . Marking a paragraph in html is equivalent to creating a new paragraph in a MS Word document. I didn't add anything new to the document. But this is not all that should be present in an html document. Let's look at another example, the description will come a little later.

  HTML document This text will be bold,

  < ! DOCTYPE html > < html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / > < title >and this one is also in italics< / title > < / head > < body > < p > < b > < / b > < / p > < / body > < / html >

  HTML document

  

  Basic elements Head and Title

  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 indicate the correct name of the page by which the user will search for you through a search engine, a very important point. Both elements must be open and also closed. Each element is closed with a “/” sign. The result is a picture like this.

  < / html >

  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.

  Notepad++ editor

  

  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 is that the Notepad++ editor shows hints when writing code, which makes your work much faster and better quality.

  DOCTYPE element

  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 calmly. 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 a ready-made template. Next there will be a clear description of each line, there should be no problems with this.

  Briefly in clear language about the basics of html: This line tells the browser that this document is XHTML version 1.0, English is used and this whole 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.

  The title tag contains 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:

• Almost all tags open and close;
• The document begins with the tag ;
• Presence of tag;
• Presence of tag;
• Clear structure of the html document.

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 either 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, useful information will be written for beginners, a code example will be provided, and the opportunity to download the example itself along with the finished page will be provided.