<?xml version="1.0" encoding="UTF-8"?>
<!-- generator="FeedCreator 1.8" -->
<?xml-stylesheet href="http://synoinstall-2pkhywzfvulqafp3.direct.quickconnect.to/lib/exe/css.php?s=feed" type="text/css"?>
<rss version="2.0">
    <channel xmlns:g="http://base.google.com/ns/1.0">
        <title>worldwide open-source software - software:development:ps_pycharm:html5:lesson</title>
        <description></description>
        <link>http://synoinstall-2pkhywzfvulqafp3.direct.quickconnect.to/</link>
        <lastBuildDate>Tue, 07 Apr 2026 15:53:20 +0000</lastBuildDate>
        <generator>FeedCreator 1.8</generator>
        <image>
            <url>http://synoinstall-2pkhywzfvulqafp3.direct.quickconnect.to/lib/exe/fetch.php?media=wiki:logo.png</url>
            <title>worldwide open-source software</title>
            <link>http://synoinstall-2pkhywzfvulqafp3.direct.quickconnect.to/</link>
        </image>
        <item>
            <title>lesson.html_1</title>
            <link>http://synoinstall-2pkhywzfvulqafp3.direct.quickconnect.to/doku.php?id=software:development:ps_pycharm:html5:lesson:lesson.html_1&amp;rev=1692551100</link>
            <description>
&lt;h1 class=&quot;sectionedit1&quot; id=&quot;основы_html&quot;&gt;Основы HTML&lt;/h1&gt;
&lt;div class=&quot;level1&quot;&gt;

&lt;p&gt;
&lt;strong&gt;&lt;abbr title=&quot;HyperText Markup Language&quot;&gt;HTML&lt;/abbr&gt; (Hypertext Markup Language)&lt;/strong&gt; - это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание &lt;abbr title=&quot;HyperText Markup Language&quot;&gt;HTML&lt;/abbr&gt; и его функций.
&lt;/p&gt;

&lt;/div&gt;
&lt;!-- EDIT{&amp;quot;target&amp;quot;:&amp;quot;section&amp;quot;,&amp;quot;name&amp;quot;:&amp;quot;\u041e\u0441\u043d\u043e\u0432\u044b HTML&amp;quot;,&amp;quot;hid&amp;quot;:&amp;quot;\u043e\u0441\u043d\u043e\u0432\u044b_html&amp;quot;,&amp;quot;codeblockOffset&amp;quot;:0,&amp;quot;secid&amp;quot;:1,&amp;quot;range&amp;quot;:&amp;quot;1-654&amp;quot;} --&gt;
&lt;h2 class=&quot;sectionedit2&quot; id=&quot;что_такое_html_на_самом_деле&quot;&gt;Что такое HTML на самом деле?&lt;/h2&gt;
&lt;div class=&quot;level2&quot;&gt;

&lt;p&gt;
&lt;abbr title=&quot;HyperText Markup Language&quot;&gt;HTML&lt;/abbr&gt; не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. &lt;abbr title=&quot;HyperText Markup Language&quot;&gt;HTML&lt;/abbr&gt; состоит из ряда &lt;a href=&quot;http://synoinstall-2pkhywzfvulqafp3.direct.quickconnect.to/doku.php?id=software:development:ps_pycharm:html5:glossary:void_element&quot; class=&quot;wikilink1&quot; title=&quot;software:development:ps_pycharm:html5:glossary:void_element&quot; data-wiki-id=&quot;software:development:ps_pycharm:html5:glossary:void_element&quot;&gt;элементов&lt;/a&gt;, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:
&lt;/p&gt;
&lt;pre class=&quot;code&quot;&gt;Моя кошка очень раздражена&lt;/pre&gt;

&lt;p&gt;
Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:
&lt;/p&gt;
&lt;pre class=&quot;code html4strict&quot;&gt;&lt;span class=&quot;sc2&quot;&gt;&amp;lt;&lt;a href=&quot;http://december.com/html/4/element/p.html&quot;&gt;&lt;span class=&quot;kw2&quot;&gt;p&lt;/span&gt;&lt;/a&gt;&amp;gt;&lt;/span&gt;Моя кошка очень раздражена&lt;span class=&quot;sc2&quot;&gt;&amp;lt;&lt;span class=&quot;sy0&quot;&gt;/&lt;/span&gt;&lt;a href=&quot;http://december.com/html/4/element/p.html&quot;&gt;&lt;span class=&quot;kw2&quot;&gt;p&lt;/span&gt;&lt;/a&gt;&amp;gt;&lt;/span&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;!-- EDIT{&amp;quot;target&amp;quot;:&amp;quot;section&amp;quot;,&amp;quot;name&amp;quot;:&amp;quot;\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 HTML \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435?&amp;quot;,&amp;quot;hid&amp;quot;:&amp;quot;\u0447\u0442\u043e_\u0442\u0430\u043a\u043e\u0435_html_\u043d\u0430_\u0441\u0430\u043c\u043e\u043c_\u0434\u0435\u043b\u0435&amp;quot;,&amp;quot;codeblockOffset&amp;quot;:0,&amp;quot;secid&amp;quot;:2,&amp;quot;range&amp;quot;:&amp;quot;655-2272&amp;quot;} --&gt;
&lt;h2 class=&quot;sectionedit3&quot; id=&quot;анатомия_html_элемента&quot;&gt;Анатомия HTML элемента&lt;/h2&gt;
&lt;div class=&quot;level2&quot;&gt;

&lt;p&gt;
Давайте рассмотрим элемент абзаца более подробно.
&lt;a href=&quot;http://synoinstall-2pkhywzfvulqafp3.direct.quickconnect.to/lib/exe/detail.php?id=software%3Adevelopment%3Aps_pycharm%3Ahtml5%3Alesson%3Alesson.html_1&amp;amp;media=software:development:ps_pycharm:html5:lesson:grumpy-cat-small.png&quot; class=&quot;media&quot; title=&quot;software:development:ps_pycharm:html5:lesson:grumpy-cat-small.png&quot;&gt;&lt;img src=&quot;http://synoinstall-2pkhywzfvulqafp3.direct.quickconnect.to/lib/exe/fetch.php?media=software:development:ps_pycharm:html5:lesson:grumpy-cat-small.png&quot; class=&quot;media&quot; loading=&quot;lazy&quot; title=&quot;grumpy-cat-small&quot; alt=&quot;grumpy-cat-small&quot; /&gt;&lt;/a&gt;
&lt;/p&gt;
&lt;ol&gt;
&lt;li class=&quot;level1&quot;&gt;&lt;div class=&quot;li&quot;&gt; &lt;strong&gt;Открывающий тег (Opening tag)&lt;/strong&gt;: Состоит из имени элемента (в данном случае, &lt;strong&gt;&amp;lt;p&amp;gt;&lt;/strong&gt;), заключённого в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.&lt;/div&gt;
&lt;/li&gt;
&lt;li class=&quot;level1&quot;&gt;&lt;div class=&quot;li&quot;&gt; &lt;strong&gt;Закрывающий тег (Closing tag)&lt;/strong&gt;: Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.&lt;/div&gt;
&lt;/li&gt;
&lt;li class=&quot;level1&quot;&gt;&lt;div class=&quot;li&quot;&gt; &lt;strong&gt;Контент (Content)&lt;/strong&gt;: Это контент элемента, который в данном случае является просто текстом.&lt;/div&gt;
&lt;/li&gt;
&lt;li class=&quot;level1&quot;&gt;&lt;div class=&quot;li&quot;&gt; &lt;strong&gt;Элемент(Element)&lt;/strong&gt;: Открывающий тег, закрывающий тег и контент вместе составляют элемент.&lt;/div&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;
Элементы также могут иметь атрибуты, которые выглядят так:
&lt;/p&gt;

&lt;p&gt;
&lt;a href=&quot;http://synoinstall-2pkhywzfvulqafp3.direct.quickconnect.to/lib/exe/detail.php?id=software%3Adevelopment%3Aps_pycharm%3Ahtml5%3Alesson%3Alesson.html_1&amp;amp;media=software:development:ps_pycharm:html5:lesson:anatomy_of_an_html_element.png&quot; class=&quot;media&quot; title=&quot;software:development:ps_pycharm:html5:lesson:anatomy_of_an_html_element.png&quot;&gt;&lt;img src=&quot;http://synoinstall-2pkhywzfvulqafp3.direct.quickconnect.to/lib/exe/fetch.php?media=software:development:ps_pycharm:html5:lesson:anatomy_of_an_html_element.png&quot; class=&quot;media&quot; loading=&quot;lazy&quot; title=&quot;anatomy_of_an_html_element.png&quot; alt=&quot;anatomy_of_an_html_element.png&quot; /&gt;&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;
Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, &lt;strong&gt;class - имя атрибута&lt;/strong&gt;, а &lt;strong&gt;nase - значение атрибута&lt;/strong&gt;. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.
&lt;/p&gt;

&lt;p&gt;
Атрибут всегда должен иметь:
&lt;/p&gt;
&lt;ol&gt;
&lt;li class=&quot;level1&quot;&gt;&lt;div class=&quot;li&quot;&gt; Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).&lt;/div&gt;
&lt;/li&gt;
&lt;li class=&quot;level1&quot;&gt;&lt;div class=&quot;li&quot;&gt; Имя атрибута, за которым следует знак равенства.&lt;/div&gt;
&lt;/li&gt;
&lt;li class=&quot;level1&quot;&gt;&lt;div class=&quot;li&quot;&gt; Значение атрибута, заключённое с двух сторон в кавычки.&lt;/div&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;/div&gt;
&lt;!-- EDIT{&amp;quot;target&amp;quot;:&amp;quot;section&amp;quot;,&amp;quot;name&amp;quot;:&amp;quot;\u0410\u043d\u0430\u0442\u043e\u043c\u0438\u044f HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430&amp;quot;,&amp;quot;hid&amp;quot;:&amp;quot;\u0430\u043d\u0430\u0442\u043e\u043c\u0438\u044f_html_\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430&amp;quot;,&amp;quot;codeblockOffset&amp;quot;:2,&amp;quot;secid&amp;quot;:3,&amp;quot;range&amp;quot;:&amp;quot;2273-5302&amp;quot;} --&gt;
&lt;h2 class=&quot;sectionedit4&quot; id=&quot;вложенные_элементы&quot;&gt;Вложенные элементы&lt;/h2&gt;
&lt;div class=&quot;level2&quot;&gt;

&lt;p&gt;
Вы также можете располагать элементы внутри других элементов — это называется &lt;strong&gt;вложением&lt;/strong&gt;. Если мы хотим заявить, что наша &lt;strong&gt;кошка&lt;/strong&gt; очень раздражена, мы можем заключить слово «очень» в элемент &amp;lt;strong&amp;gt; , который указывает, что слово должно быть сильно акцентированно:
&lt;/p&gt;

&lt;/div&gt;
&lt;!-- EDIT{&amp;quot;target&amp;quot;:&amp;quot;section&amp;quot;,&amp;quot;name&amp;quot;:&amp;quot;\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b&amp;quot;,&amp;quot;hid&amp;quot;:&amp;quot;\u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435_\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b&amp;quot;,&amp;quot;codeblockOffset&amp;quot;:2,&amp;quot;secid&amp;quot;:4,&amp;quot;range&amp;quot;:&amp;quot;5303-&amp;quot;} --&gt;</description>
            <author>anonymous@undisclosed.example.com (Anonymous)</author>
            <pubDate>Sun, 20 Aug 2023 17:05:00 +0000</pubDate>
        </item>
    </channel>
</rss>
