HTML5 syntax

As you already know, in HTML5 the rules have been relaxed. This was all about what the creators of HTML5 wanted, so that it could truly emulate how web browsers work. In other words, they wanted to shorten the gap between “web sites that operate” and “web sites that are compliant with the standard.” In the upcoming section, we will look at the changes in the rules in more detail.

Of course, there are still outdated methods supported by browsers, which are absolutely not supported by the HTML5 standard. These methods can be found in the HTML5 validator.

loosened rules

When we first became familiar with HTML5 markup, we learned that the elements , і It is not obligatory for this marking. It won't end there if the rules in HTML5 are weakened.

You are also allowed to use words in tags in both capitals and small letters, as in the case of the word:

U tags you can vicoristuvati both capital and small letters.

It is also possible not to vikoristically close the collar braid at risk in empty elements, or elements without instead, such as (Image),
(Rearing the row) or

butt
Rozrivu
rows

HTML5 also changed the rules for attributes. The meanings of the attributes no longer need to be taken into account, but only in the mind, so that they do not interfere with the hidden symbols (name the symbols>, = or space). Axle butt vikoristanny element in this manner:

Attributes without values ​​are also allowed. Thus, to set a proportion in XHTML you need to repeat the syntax:

then in HTML5 you can work in the traditions of HTML 4.01, indicating only one attribute name:

But those who are particularly concerned are not those who are not allowed in HTML5, but those who are not particularly strict developers can often violate both strict and relaxed rules, or in the same document. However, similar markup is possible in XHTML. In both standards of obligatory good style The notes are on the web browser, so the browser will capture everything that is sent to you.

Vikoristanny of elements , і . In element manually place the selected natural language pages and elements і Allows you to add information about the page separately instead of the page.

Mali letters in tags. The use of small letters in tags is not obligatory, but such tags are much wider and easier to enter (since there is no need to press a key ), And it’s also not like cutting an eye like tags with great writers.

Taking into your paws the meaning of attributes. The meanings of the attributes are taken into account for this reason - to help eliminate the damage that would otherwise be easy to allow. Without pads, one incorrect attribute value character can destroy the entire page.

Checking the HTML5 code

A new, relaxing approach to the rules in HTML5 may be absolutely to the liking of some web developers. For others, the very thought about those who, behind the façade of something that works without a hitch, without tinkering with the browser, can be inconsistent, full of mercy, intended to help you sleep.

Yakshcho vi, come in to another type, then know, the izhtrument for the transfer is correctly crossed, the name of the validator, you can do the code, not the HTML5 standards, I will have a yaksho browser ib in the eye of the icon code.

Deyaki z possible problems, How to catch a validator in the mind, include the following:

the number of obligatory elements (for example, the element

Damn the browser in HTML5 style!

In XHTML tags It is not possible to vikorize great literature.

To validate this code, you need an XHTML validator that checks whether it is passing the old XHTML rules. The W3C validator is not suitable for this, but then go to the validator on the site http://validator.nu, where you need to specify the standard (ie XHTML) in the Preset list. You also need to set the Be lax about HTTP Content-Type rule so that you do not insert the verification code directly into the text field.

By following these steps, you can create an XHTML document and save it. Other browsers will still parse this document as if it were the original HTML5 side, because it will simply look like an XML document. There will be no additional rules when viewing such a site.

If you want browsers to render your pages according to XHTML rules, you will need to configure your web server to serve pages with the application / xhtml + xml MIME type or application / xml, instead of the standard text / html type. Before speaking, browsers that support XHTML5 implement such markup differently, using the basic HTML5 code. They are forced to process the page as an XML document, and without going into it (through changes in the code), the browser takes over the processing of the document.

What kind of visnovok is this? For the vast majority of web developers, from amateurs to serious professionals, playing with the strict rules of XHTML is not necessary for anyone. The only drawback is the development of special solutions, such as pages, instead of those that need to be manipulated using XML tools, such as XQuery and XPath.

If you like, you can trick the browser and cause it to switch to XHTML mode. To do this, you just need to rename the file with extensions xhtml or xht, and then open it with hard drive your computer. Most browsers (including Firefox, Chrome and IE 9) will render this page as if it were imported from the web server with MIME XML settings. If the page contains any minor error, the browser will often display the page (IE 9), a notification about the XML error (Firefox) or otherwise (Chrome).

DOM yak partial movie

HTML5 has introduced the concept of DOM for the first time (I would like to know this, but not in part), Now the HTML document is viewed as a collection of objects, rather than tags. That's why HTML5 syntax I can't sleep. However, when writing the code, you can finish rules for tagging, Which were installed in HTML 4.01 or XHTML 1.0

HTML 4.01 syntax

IN HTML Before the fifth version, there were a number of rules for writing code:

1. The free mode is loose, which is corrected in HTML 4.01
   "Http://www.w3.org/TR/html4/loose.dtd">
2. Strict mode, which is vikorized in HTML 4.01
   "Http://www.w3.org/TR/html4/strict.dtd">
3. More about the syntax for linking with frames. Frames in HTML5 are considered outdated, but many developers still use them, and some frames are even more useful when developing various web add-ons.

XHTML 1.0 syntax

IN XHTML There were two rules for writing the code:

1. The transitional mode, which is introduced in XHTML 1.0
   "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. Suvory strict mode, which is vikorized in XHTML 1.0
   "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5 current syntax

When using HTML5, writing doctypes on the beginning of an HTML document, You can vikoristovat be-yak from the over-insurance of more syntaxes of the movie (Rules for writing code) Or you can use HTML 4.01 and XHTML 1.0 one after the other.

For example, do not frame attribute values ​​with pads attribute = value (Loose mode HTML 4.01 - loose), Ale at the same time put a slash in single tags
(Strict mode xHTML 1.0 - strict).

XHTML (strict), shortest

The proven HTML-layout designers require vikoryst when writing code in HTML5, the strict syntax of XHTML strict, which keeps the layout designer in good shape, does not allow him to relax and thereby protects his work possible pardons in code. Likewise, avoidance of strict syntax is beneficial in advanced programming, because strict syntax is extremely important.

HTML stands for HyperText Markup Language ( language markup for hypertext):

• language means that it can be read by both a human and a computer;
• layout means that the code you write is included in the additional keywords;
• hypertext means that HTTP is a part of the Internet.

Either way, HTML comes with the set rules. These rules are kept simple and taken to the extreme cordons, To know where things begin and where they end.

Below is an example of a paragraph in HTML:

Just like Tetris and having learned something less, the rewards accumulate and the achievements become known.

Those you see in heel temples < и >called tags HTML. The smells indicate where things begin and where they end.

Kozhen with tags unsung sense. To our vipadka<р>signifies paragraph text.

As a rule, stinks come in pairs:

• opens the tag<р>means the beginning of a paragraph;
• closes the tag
  means it's the end.

One difference between opening and closing tags is the slash /, which precedes the tag name.

When combined, opens, closes tags and everything in between, and cancels HTML element. A row is essentially an HTML element that represents HTML tags<р>і

.

If you look at this page in your browser, you will note that HTML tags are not displayed in the browser. They can only be read by a browser, so you know what type content you wrote.

De write HTML

You've probably encountered simple text files, such as those with the .txt extension. Let this text file become HTML document(Replacement of text), you need to use extension.html.

Open a text editor, copy and paste instead:

This is my first web site!

To save this file as my-first-webpage.html, just open it with your browser and you will see:

This is my first web site!

• vikorist the text editor, using Notepad++, for gateway HTML documents;
• vikorist browser, on the Firefox view, for vidkritya HTML documents.

attributes

Attributes are like this Dodatkova Information bound to the HTML element. The stinks are written in the middle of the HTML tag. Thus, they are also not displayed in the browser.

For example, the href attribute is used for the purpose of the message (which is created by the tag ):

enchant Firefox

Є 16 HTML attributes that can be added to any HTML element. All stench is not offensive.

You will basically have a class (which is used for CSS) and a title (the tooltip that appears when you hover the cursor over an object).

deyaki HTML elements take revenge obov'yazkovi attributes. For example, when inserting an image, you must indicate its expansion using the src attribute:



Take care of the meta element is in the display of the image, then there is a sense path until the image is created obov'yazkovim.

Comments

If you write this in your code without disrupting the browser's display of the page, then you can write comments. They will be ignored by the browser and may only be used by people who write code.

The comment starts with .

Hello world!

elements self-closing

These HTML elements only contain the following tag:




Since they do not have a closing tag and, therefore, they cannot place anything in the middle, self-closing elements must carry a number of attributes that provide additional information.

This indicates that your Web page is written according to the HTML standard.




DOCTYPE	describe
HTML5
	For all documents.
HTML 4.01
"Http://www.w3.org/TR/html4/strict.dtd">	Strict HTML syntax.
	Transitional HTML syntax.
	The HTML document will have frames.
XHTML 1.0
	Strict XHTML syntax.
	Transitional XHTML syntax.
	Document written in XHTML and frames.
	XHTML mobile profile, adds specific elements for mobile phones.
XHTML 1.1
"Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	There is no apparent meaning, the syntax is the same and follows clear rules.

Also, the doctypes are the same (strict and transitive, for HTML and XHTML). What standard of vibrati is the axis of nutrition.

HTML and XHTML standards

HTML is the standard language for marking up Web documents.

In HTML 4.01 and HTML5, the new look of the divisions page is different. Placement and structure (headings, paragraphs, paragraphs) are specified in HTML. Design (style, fonts, colors) is specified by CSS styles.

For example, tag The align attribute is deprecated.

XHTML - language layout of Web documents and XML-based creations has been expanded. The XHTML standard is a transfer of features between HTML 4.01 and XHTML.

vimogi XHTML	It's not possible	required
All guilty tags will be closed.
All tags, attributes and CSS controls must be typed in lower case.
All tag attribute values ​​are stored in the tabs.
The hierarchy must strictly adhere to: the first tag is covered by the remaining one.	...	...
A block tag cannot but contain investments in a row tag. (After the block element is removed from the side, it is created from a new row. The row element does not break the row shift.)	...	...
Boolean attributes are written in the expanded form.
The image of obov'yazkovo is guilty but indicated description

The advantages of XHTML language are NOT the strictness of the syntax, but the ability to come up with different tags.

However, on June 2, 2009, the World Wide Web Consortium (W3C) announced that it was working on XHTML 2.0, since the concept of XHTML is invalid. A group of programmers switched to working on the HTML5 standard. And although the HTML5 standard has not yet been approved, it is already written that there are no websites.

Who cares, if HTML5 is finished, can get acquainted with the percussion reels:

The official version of the HTML5 standard is available at: www.w3.org/TR/html5/

Significant with the choice. It's hard to get started: it's not easy to vikorize the XHTML standard because you don't want to expand the HTML language.

On the! DOCTYPE, intended for documents that use frames, we will not hesitate: the day before yesterday.

Now food: which syntax to choose - strict or transitive?

Strict and transitive syntax HTML 4.01

Transition syntaxes are created to ease the transition to the new standard. There is a lot to be missed because the strict syntax is important.

Understand what's going on here, in simpler terms. I'll start with strict syntax.

strict syntax

Validity check

chervonym color.

The conformity of the HTML code to the agreed standard is called validity, And the verification of the validity - validation.

In order to comply with layout corrections, install an add-on to FireFox Html Validator.

Let's open our page on in FireFox browsers, Let's point the bear at the validator sign:

Double clicking on the validator sign will open the list of rewards:




Let's change! DOCTYPE for transition syntax:

transitional syntax

Validity check

Part of the text needed to be seen chervonym color.

Launch FireFox. There are no favors:




Everything is wonderful. Maybe what should I complain about?

My pleasure: work on a valid layout, either strictly with the syntax of HTML 4.01, or in HTML5. HTML needs to be modified for direct reasons, and the design needs to be deprived of CSS. In addition, if the site has a valid layout, but it is not displayed correctly in any browser, then this is clearly a browser problem. New versions of the browser will be more compliant with the standard and will not compromise on the interpretation of valid code. If the folding layout is implemented in an incorrect way, there is no guarantee that new versions of the browser will not fall apart.

Do not be disturbed by the loyalty of the transitive syntax, only to comply with the standards!

Valid layout is now required

Would you like to suffer forever? Even small layout imperfections are often corrected automatically by browsers, and the site functions absolutely normally. All these friendly, practical, unforgettable benefits will respect the sound systems. Add one daily tag

- this is a minus on the rating of the site.

Same through zdatnіst sound systems Please note any shortcomings in the HTML code and it is recommended to ensure the validity of the layout. In addition, by checking the code for validity, it is possible to identify a number of other serious errors that were not previously noted.





In the first section, you learned that website design is created from I'll help you with CSS. For a better understanding of what and why it is necessary to study, let's take a look at one example. Understand that HTML is a black-and-white structuring framework without embellishment, and CSS is what helps us create a unique image.

As you know, the right-handed worker showed up in colors, materials and additional embellishments. On the web page, everything is the same: with the help of CSS rules, colors and indentations are added, font style and element sizes are changed, and a whole, final style is created.

Simple style sheet

Let's take a look at what the elementary style sheet itself looks like and what elements it is made up of. This is a CSS style for all tags

What is on the web page:

Now you will see the text

In the browser, what does skin row mean? Everything is quite simple: the font is a bold font and color # 1E824C (hexadecimal color code) and is displayed at a size of 1em (a common unit that is comparable to the font size required by the browser).




A descriptive style, like any other, includes a set of elements that have different names. Remember them so that when you read the upcoming chapters you understand what is going on.

Selector Instructively, we tell the browser how much you want to set the style. In our case, the selector is є p. The block is dumb This is the name of the entire area that is located between the curly arms () after the selector. Style power This is a command that requires the appropriate formatting option (for example, you want to change the font-weight, color, font-size, etc.). After the name of power, it is necessary to put a double check. Now you will become familiar with the many powers of CSS. The meaning of power After the double box, the very meaning of power is written down, as you mean independently, thus creating a power style. It is important for those in power to indicate their respective significance.

For example, the font position is set keywords bold, bolder, etc., color - sixteen values, RGB (A), HSL (A) or keywords red, orange, white, etc., font size - CSS units (hundreds) % , pixels px, points pt, font height) Or with the constants small, medium, large, etc. After the marking of the meaning of power, a dot is placed with it.



Since CSS is not sensitive to the transfer of rows, gaps, tabs and case, you can format your code so that it is easy to read and edit in the future. For example, we could write the guidance code in one row:

P (font-weight: bold; color: #1E824C; font-size: 1em;)

It works, but is it easy to get married to someone new? Especially if the CSS code is too long. Of course, it wouldn’t hurt to separate it with spaces. There are a number of rules of good manners, and if you immediately follow them, then in the future you will say “thank you” to yourself.

Very often, when describing a style, a compact form of entry is used, with all the power for one selector shown in one block:

P (font-weight: bold; color: #1E824C; font-size: 1em;)

And this form of entry is cumbersome, although I want to do it:

P (font-weight: bold;) p (color: #1E824C;) p (font-size: 1em;)

To make it easier to navigate the code, it is recommended to write down the skin power in a new row and change the tabulation or clearing when changing the power. Sometimes there is a gap between the two boxes and the meanings of power, but here you can decide whichever is best for you.

For added clarity, you can add comments directly in CSS. Here you can write explanations and icons that will help you navigate the style sheets.

Comments in CSS are written between the characters / * and * /. They are not displayed on the web page in the browser and can only be seen in the code. Developers also often use comments to help catch up on time-needed CSS code. The comments look like this:

/ * Style for body text * / p (font-weight: bold; color: #1E824C; font-size: 1em;)

Internal and external style sheets

Once you have created a style sheet, you can choose how to attach it to the web page. There are two table options - internal ones, which are added directly to the page, and external ones, which are located in an adjacent file with the .css extension and are connected to the page for additional sending.

Internal style sheets are written in the HTML document between tags. It is necessary to add a style sheet to the skin's web page. Since the site has a large number of pages, which require a new design, adding and editing styles becomes a tedious task - the process takes many hours. Therefore, internal style sheets are treated as non-manual.

External style sheets have been greatly expanded. You just need to connect the table to all the necessary web pages, vikoryst and tag c rel attribute(This means the relationship between the page and the included file) and the stylesheet values, which means that the style sheet is contained in the file that is included. The href attribute is the URL to your .css file:

By editing just one file, you can change the style for the entire site at once, regardless of how many pages you are on. This is very handy, especially for large resources.

Lesson: creating a style sheet

Some of the existing style sheets are the most manual and widely used when developing a design, we will learn to create them ourselves. You can download the archive of files for this lesson on this page.

In the folder you will find an HTML document with an example of a simple page and an image (you will see it in the lesson). Open the HTML document in your browser. You will notice that the side looks absolutely unique. To give it a more attractive look, let's write a style for it.

For now, you don't need to go into too much detail, which means a lot of code. Now you need to understand the very principle of work. Let's get started.

Connecting CSS to HTML

To get started, open a text editor on your computer (go to notepad) and create a new file named style, saving it with the extension.css (you must enter the file style.css). Save the file in the same folder as the desired HTML document.

Open the HTML document in a text editor, as well as in a browser (so that you can easily review the changes in the current page view). Add between tags Offensive code:

Briefly about what you have earned. After inserting this code into an HTML document, you will see:

• requested a font called Roboto Condensed, which will be taken from the Google server (we will publish a report on Google fonts later);
• We connected our external style sheet style.css (still empty).

Writing style CSS

Save the changes in the HTML document and go to the new .css file. Let's add a style for the side page:

Html (padding-top: 5px; background-image: url (background.jpg);)

Save your money. Well, you wrote the first rule - there is no tag . First power - padding-top - add access to the animal between the browser window and instead of the web page at a size of 5 pixels. With the help of another power, background-image, you have connected images for the background of the entire page, indicating the path to the graphic file (located in the same folder as the HTML document).

Updated opening of the web page in the browser. If everything is set up correctly, you will notice that the background will appear on the page, and there will be a little more space between the top of the window and the text.

Body (width: 75%; padding: 40px; margin: 15px auto; background-color: #EBEBEB; border-radius: 30px;)

Save changes to file. Zaraz vi:

• set the area for the tag instead , which is equivalent to 75% of the width of the browser window;
• provided 40 pixels of access on all sides of the area together;
• we moved the area in the center of the page, and also created an opening for the animal and the bottom of 15 pixels;
• set the background color #EBEBEB for the area together;
• rounded the rectangular area by specifying a rounding radius of 30 pixels.

I'll update the HTML document again. In this case, go to the connection cache or re-install the page with updates of all files associated with it, vikoryst and a special key combination (for example, for Chrome this Ctrl+F5).

You will notice that in the center of the side there is a rectangular area with rounded corners. This is the result of your actions in the CSS file. You can also try changing the browser window and find out that the width of the rectangular area adjusts to your size. This is due to the fact that the width is specified as a percentage.

Changing the font using additional CSS

It's time to embellish our text. Add this code to your stylesheet and save changes:

H1 (color: #E87E04; font-size: 2em; margin-left: 20px; font-family: "Roboto Condensed", sans-serif;) h2 (color: #E87E04; font-size: 1.7em; margin-left : 20px; font-family: "Roboto Condensed", sans-serif;) p (color: #22313F; line-height: 150%; margin-top: 20px; margin-left: 20px; font-family: "Roboto Condensed ", sans-serif;)

Having written this, you set the font color for the h1, h2, p tags, indicated their sizes, added a margin on the left edge of 20 pixels and additionally for

We set the animal's access to 20 pixels and set the interlining to line-height ( interrow interval text) 50% more than standard. Before that, you connected the Roboto Condensed font to all three tags (for which, right from the start, it was necessary to indicate the message in the HTML file).

Update the page in your browser and enjoy the results of the work. In this lesson we will try one more speech. Add this code to CSS:

Emphasis (font-weight: bold;)

Save yourself and refresh the page in your browser. You will notice that in the remaining paragraph the font in the last part of the text has become bold. To understand what happened, go to the window text editor, Right off the bat, you opened the HTML file. Look at the remaining paragraph: part of the proposition is enclosed in the tag with the emphasis class. In this way you wrote a style for the next row of text in a paragraph. More details about the classes will be found in the next section.

In the end pouch you have to enter the following side:





As part of the exercise, try changing the size of the text for

(Acceptable, 1.1em), and also increase the input between

And the left edge of the area by another 10 pixels.

visnovki

This section looked at CSS syntax, as well as how to create a basic style sheet. Did you know how to include CSS to HTML pages, And also learned to create simple styles. Apparently the main speeches that need to be remembered from this chapter:

Whatever CSS style consists of several elements: selector, style power and value of power.

All powers and their meanings are recorded in the voice block between the two curly arms () after inserting the selector.

It is necessary to follow the signs with respect: two figured arms(He opens the block at the beginning and closes it at the end). Without these handles, CSS will not work correctly.

It is necessary to always put a double mark after power and a double mark after meaning.

For clarity and quicker use of the CSS code, write the skin power in a new row, and also do not skimp on spaces and tabulation.