Палитра элементов HTML презентация

Содержание
Категории контента
: Элемент разделения контента
Элемент секции навигации
Добавление векторной графики в веб-документ (встроенный контент)
Видео и аудио контент

Категории контента
Каждый элемент HTML принадлежит некоторому количеству категорий контента, которые объединяют элементы с общим набором характеристик.
Существует три типа категорий контента:
Основные категории контента, описывающие общие для многих элементов правила;
Категории контента для элементов форм, описывающие общие правила для элементов форм;
Особые категории контента, описывающие редкие категории, актуальные только для нескольких элементов, возможно, лишь в особом контексте.

Категории контента

Основные категории контента
Метаданные
Элементы, принадлежащие к категории метаданных, изменяют отображение или поведение HTML-документа, связывают его с другими документами и предоставляют другую дополнительную информацию о документе.
Элементами метаданных являются:
,
,
,
,
,
, <style> и <title>.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide6" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 6</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-5.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Основной поток flow Элементы основного потока обычно содержат текст и" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-5.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-5.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-5.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-5.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Основной поток
flow<br><p>Элементы основного потока обычно содержат текст и встроенный контент.<br><a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1> (en-US), <h2></div></h2><div class="slides-content">(en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h6> (en-US), <header>, <hgroup>, <hr>, <i> (en-US), <iframe> (en-US), <img>, <input>, <ins>, <kbd>, <keygen> (en-US), <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object> (en-US), <ol>, <output>, <p>, <pre>, <progress>, <q> (en-US), <ruby>, <s> (en-US), <samp> (en-US), <script>, <section>, <select>, <small> (en-US), <span>, <strong>, <sub> (en-US), <sup> (en-US), <svg>, <table> (en-US), <template>, <textarea> (en-US), <time>, <ul>, <var> (en-US), <video>, <wbr> и Текст.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide7" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 7</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-6.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Секционный контент Подобные элементы создают секции (блоки) в текущей структуре" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-6.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-6.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-6.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-6.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Секционный контент<br><p>Подобные элементы создают секции (блоки) в текущей структуре документа, определяющие область</div></h2><div class="slides-content">действия заголовочного контента и элементов <header> и <footer><br>К этой категории принадлежат элементы <article>, <aside>, <nav> и <section>. <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide8" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 8</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-7.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Заголовочный контент Заголовочный контент задаёт заголовок секции, явно отмеченной структурным" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-7.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-7.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-7.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-7.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Заголовочный контент<br><p>Заголовочный контент задаёт заголовок секции, явно отмеченной структурным элементом или</div></h2><div class="slides-content">неявно – самим заголовочным.<br>Данной категории принадлежат такие элементы, как <h1> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h6> (en-US) и <hgroup>.<br>Элемент <header> сам по себе не является заголовочным, хотя с большой вероятностью содержит контент такого типа.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide9" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 9</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-8.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Фразовый контент Фразовый контент определяет текст и его формат. Серии" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-8.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-8.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-8.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-8.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Фразовый контент<br><p>Фразовый контент определяет текст и его формат. Серии фразового контента</div></h2><div class="slides-content">образуют параграфы.<br>К данной категории принадлежат следующие элементы: <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i> (en-US), <iframe> (en-US), <img>, <input>, <kbd>, <keygen> (en-US), <label>, <mark>, <math>, <meter>, <noscript>, <object> (en-US), <output>, <progress>, <q> (en-US), <ruby>, <samp> (en-US), <script>, <select>, <small> (en-US), <span>, <strong>, <sub> (en-US), <sup> (en-US), <svg>, <textarea> (en-US), <time>, <var> (en-US), <video>, <wbr> и обычный текст (не только состоящий из символов пробелов).<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide10" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 10</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-9.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Фразовый контент Ещё несколько элементов входят в данную категорию при" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-9.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-9.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-9.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-9.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Фразовый контент<br><p>Ещё несколько элементов входят в данную категорию при соблюдении особых</div></h2><div class="slides-content">условий:<br><a>, если содержит в себе только фразовый контент<br><area>, только внутри элемента <map><br><del>, если содержит в себе только фразовый контент<br><ins>, если содержит в себе только фразовый контент<br><link>, при наличии атрибута itemprop (en-US)<br><map>, если содержит в себе только фразовый контент<br><meta>, при наличии атрибута itemprop (en-US)<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide11" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 11</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-10.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Встроенный контент Встроенный контент импортирует в документ другой ресурс или" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-10.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-10.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-10.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-10.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Встроенный контент<br><p>Встроенный контент импортирует в документ другой ресурс или вставляет содержимое</div></h2><div class="slides-content">на другом языке разметки или принадлежащее другому пространству имён. Элементами данной категории являются: <audio>, <canvas>,<br> <embed>, <iframe> (en-US), <img>, <math>,<br> <object> (en-US), <svg>, <video>.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide12" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 12</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-11.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Интерактивный контент К интерактивному контенту относятся элементы, который специально разработаны" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-11.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-11.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-11.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-11.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Интерактивный контент<br><p>К интерактивному контенту относятся элементы, который специально разработаны для взаимодействия</div></h2><div class="slides-content">с пользователем. В данную категорию входят <a>, <button>, <details>, <embed>, <iframe> (en-US), <keygen> (en-US), <label>, <select> и <textarea> (en-US).
Некоторые элементы считаются интерактивным контентом только при соблюдении определённых условий:<br><audio>, если указан атрибут controls<br><img>, если указан атрибут usemap<br><input>, если атрибут type не скрыт<br><menu>, если атрибут type имеет значение toolbar<br><object> (en-US), если указан атрибут usemap (en-US)<br><video>, если указан атрибут controls<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide13" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 13</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-12.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Контент форм Контент форм включает в себя элементы, у которых" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-12.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-12.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-12.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-12.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Контент форм<br><p>Контент форм включает в себя элементы, у которых есть владелец</div></h2><div class="slides-content">формы, обозначенный атрибутом form. Владельцем формы является либо элемент <form>, либо элемент, id которого указан в атрибуте form.<br><button><br><fieldset><br><input><br><keygen> (en-US)<br><label><br><meter><br><object> (en-US)<br><output><br><progress><br><select><br><textarea> (en-US)<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide14" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 14</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-13.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Данная категория включает несколько подкатегорий: Listed Элементы, перечисленные в IDL" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-13.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-13.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-13.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-13.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Данная категория включает несколько подкатегорий:
<br><p>Listed Элементы, перечисленные в IDL коллекциях form.elements (en-US) и</div></h2><div class="slides-content">fieldset.elements. Включают <button>, <fieldset>, <input>, <keygen> (en-US), <object> (en-US), <output>, <select>, и <textarea> (en-US).<br>Labelable Элементы, которые могут ассоциироваться с элементами <label>. Включают <button>, <input>, <keygen> (en-US), <meter>, <output>, <progress>, <select> и <textarea> (en-US).<br>Submittable Элементы, которые могут использоваться для построения набора данных формы при отправке на сервер. Включают <button>, <input>, <keygen> (en-US), <object> (en-US), <select> и <textarea> (en-US).<br>Resettable Элементы, которые могут быть затронуты при сбросе данных формы. Включают <input>, <keygen> (en-US), <output>,<select> и <textarea> (en-US).<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide15" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 15</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-14.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Вторичные категории Существуют некоторые вторичные классификации элементов, о которых тоже" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-14.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-14.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-14.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-14.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Вторичные категории
<br><p>Существуют некоторые вторичные классификации элементов, о которых тоже полезно знать.<br>Элементы</div></h2><div class="slides-content">поддержки скриптов<br>Элементы поддержки скриптов – это элементы, которые напрямую не влияют на отрисовку документа. <br>Вместо этого они служат для внедрения скриптов, путём либо содержания кода скрипта напрямую, либо указания данных, которые будут использованы скриптами.<br>Элементами поддержки скриптов являются:<br><script><br><template><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide16" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 16</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-15.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt=": Элемент разделения контента Элемент разделения контента HTML ( )" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-15.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-15.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-15.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-15.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p><div>: Элемент разделения контента<br><p>Элемент разделения контента HTML (<div>) является универсальным контейнером для потокового</div></h2><div class="slides-content">контента. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью CSS.<br>HTML<br><div class="warning"><br> <img src="/media/examples/leopard.jpg"<br> alt="An intimidating leopard."><br> <p>Beware of the leopard</p><br></div><br>CSS<br>.warning {<br> border: 10px ridge #f00;<br> background-color: #ff0;<br> padding: .5rem;<br> display: flex;<br> flex-direction: column;}<br>.warning img {<br> width: 100%;}<br>.warning p {<br> font: small-caps bold 1.2rem sans-serif;<br> text-align: center;}<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide17" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 17</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-16.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Элемент Являясь &quot;чистым&quot; контейнером, элемент , по существу, не представляет" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-16.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-16.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-16.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-16.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Элемент <div><br><p>Являясь "чистым" контейнером, элемент <div>, по существу, не представляет ничего. Между тем,</div></h2><div class="slides-content">он используется для группировки контента, что позволяет легко его стилизовать, используя атрибуты class или id, помечать раздел документа, написанный на разных языках (используя атрибут lang).<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide18" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 18</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-17.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Категории" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-17.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-17.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-17.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-17.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>
Категории <br></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide19" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 19</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-18.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt=": Элемент списка описаний HTML-элемент (от англ. Description List) представляет" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-18.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-18.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-18.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-18.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p><dl>: Элемент списка описаний
<br><p>HTML-элемент <dl> (от англ. Description List) представляет собой список описаний. Этот</div></h2><div class="slides-content">элемент служит контейнером для списка пар терминов (определяемых элементом <dt>) и их описаний (определяемых элементами <dd>). Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение).<br><dl><br> <dt>Beast of Bodmin</dt><br> <dd>A large feline inhabiting Bodmin Moor.</dd><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide20" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 20</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-19.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="ARIA Accessible Rich Internet Applications (ARIA) определяет способ сделать веб" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-19.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-19.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-19.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-19.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>ARIA<br><p>Accessible Rich Internet Applications (ARIA) определяет способ сделать веб контент и веб приложения (особенно</div></h2><div class="slides-content">те, которые разработаны с помощью Ajax и JavaScript) более доступными для людей с ограниченными возможностями.<br> Например, ARIA делает доступным навигационные маркеры, JavaScript виджеты, подсказки на форме, сообщения об ошибках, автоматические обновления и многое другое.<br>ARIA - это набор специальных атрибутов, которые могут быть добавлены в любую разметку, но особенно подходят для HTML. Атрибут role определяет тип объекта (такие как статья, оповещение или ползунок). Дополнительные ARIA атрибуты предоставляют другие полезные возможности, такие как описания для форм или текущее значение индикатора выполнения.<br>Поддержка ARIA реализована в большинстве современных браузеров и программах экранного доступа. Конечно, реализации различаются, и старые технологии не поддерживают их полностью (либо вообще не поддерживают). Используйте постепенно деградирующий "щадящий" ARIA, или просите пользователей использовать новые технологии.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide21" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 21</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-20.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Атрибуты К этому элементу применимы глобальные атрибуты. Примечание: Атрибут align" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-20.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-20.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-20.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-20.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Атрибуты<br>К этому элементу применимы глобальные атрибуты.<br>Примечание: Атрибут align устарел и вышел из употребления; не используйте</div></h2><div class="slides-content">его больше. Вместо этого, вам следует использовать свойства CSS или методы, такие как CSS Grid или CSS Flexbox для выравнивания и изменения положения элементов <div> на странице.<br>Примечание<br>Элемент <div> следует использовать только в том случае, если никакой другой семантический элемент (такой как <article> или <nav>) не подходит.<br>СМ. Пример audi a7<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide22" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 22</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-21.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="CSS Grid One Two Three Four Five Six .wrapper {" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-21.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-21.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-21.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-21.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>CSS Grid<br><p><div class="wrapper"> <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> <div class="four">Four</div></div></h2><div class="slides-content"><div class="five">Five</div> <div class="six">Six</div> </div><br><p>.wrapper { display: grid; grid-template-columns: repeat(3, 1fr);<br> grid-gap: 10px; grid-auto-rows: minmax(100px, auto); } <br>.one { grid-column: 1 / 3; <br>grid-row: 1; } <br>.two { grid-column: 2 / 4;<br> grid-row: 1 / 3; } <br>.three { grid-column: 1; grid-row: 2 / 5; } <br>.four { grid-column: 3; grid-row: 3; } <br>.five { grid-column: 2; grid-row: 4; } <br>.six { grid-column: 3; grid-row: 4; } <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide23" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 23</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-22.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-22.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-22.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-22.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-22.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide24" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 24</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-23.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Стилизованный пример Этот пример создаёт прямоугольник с тенью, применяя стили" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-23.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-23.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-23.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-23.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Стилизованный пример
<br><p>Этот пример создаёт прямоугольник с тенью, применяя стили к <div> с помощью</div></h2><div class="slides-content">CSS. Заметьте, что использование атрибута class на элементе <div> даёт применение стилей "shadowbox" (в дословном переводе означает "теневая коробка") к элементу.<br>HTML<br><div class="shadowbox"> <p>Вот очень интересная заметка в прекрасном прямоугольнике с тенью.</p> </div><br>CSS<br>.shadowbox { width: 15em; border: 1px solid #333; box-shadow: 8px 8px 5px #444; padding: 8px 12px; background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); }<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide25" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 25</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-24.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="HTML-элемент представляет собой автономный раздел — который не может быть" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-24.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-24.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-24.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-24.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p><section><br><p>HTML-элемент <section> представляет собой автономный раздел — который не может быть представлен более</div></h2><div class="slides-content">точным по семантике элементом — внутри HTML-документа. Как правило, но не всегда, разделы имеют заголовок.<br><h1>Choosing an Apple</h1><br><section><br> <h2>Introduction</h2><br> <p>This document provides a guide to help with the important task of choosing the correct Apple.</p><br></section><br><section><br> <h2>Criteria</h2><br> <p>There are many different criteria to be considered when choosing an Apple — size, color, firmness, sweetness, tartness...</p><br></section><br>Например, меню навигации должно быть помещено в элемент <nav>, но список результатов поиска и отображение карты с её элементами управления не имеют специфических элементов и могут быть помещены в <section>.<br>Примечание: Если содержимое элемента имеет смысл объединить как единое целое (в цельный и независимый блок), то элемент <article> может стать лучшим выбором.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide26" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 26</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-25.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="категории" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-25.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-25.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-25.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-25.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>категории<br></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide27" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 27</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-26.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Атрибуты К этому элементу применимы только глобальные атрибуты. Примечание Каждый" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-26.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-26.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-26.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-26.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Атрибуты<br><p>К этому элементу применимы только глобальные атрибуты.<br>Примечание<br>Каждый элемент <section> должен быть идентифицирован, обычно путём</div></h2><div class="slides-content">добавления заголовка (элементы <h1> (en-US)-<h6> (en-US)) в качестве дочернего элемента.<br>Если имеет смысл по-особому объединить содержимое элемента <section> (например, сделать цельным и независимым разделом HTML-документа), используйте вместо него элемент <article>.<br>Не используйте элемент <section> как общий контейнер; для этого есть <div>, особенно когда секционирование применяется только для стилизации. На практике раздел должен логически выделяться в структуре документа.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide28" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 28</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-27.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="HTML-элемент представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-27.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-27.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-27.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-27.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p><article>
<br><p>HTML-элемент <article> представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для независимого</div></h2><div class="slides-content">распространения или повторного использования. <br>Этот элемент может представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент содержимого.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide29" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 29</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-28.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Пример HTML Weather forecast for Seattle 03 March 2018 Rain." loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-28.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-28.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-28.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-28.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Пример HTML<br><p><article class="forecast"><br> <h1>Weather forecast for Seattle</h1><br> <article class="day-forecast"><br> <h2>03 March</div></h2><div class="slides-content">2018</h2><br> <p>Rain.</p><br> </article><br> <article class="day-forecast"><br> <h2>04 March 2018</h2><br> <p>Periods of rain.</p><br> </article><br> <article class="day-forecast"><br> <h2>05 March 2018</h2><br> <p>Heavy rain.</p><br> </article><br></article><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide30" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 30</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-29.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Пример CSS .forecast { margin: 0; padding: .3rem; background-color: #eee;" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-29.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-29.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-29.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-29.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Пример CSS<br><p>.forecast {<br> margin: 0;<br> padding: .3rem;<br> background-color: #eee;<br> font: 1rem</div></h2><div class="slides-content">'Fira Sans', sans-serif;<br>}<br>.forecast > h1,<br>.day-forecast {<br> margin: .5rem;<br> padding: .3rem;<br> font-size: 1.2rem;<br>}<br>.day-forecast {<br> background: right/contain content-box border-box no-repeat<br> url('/media/examples/rain.svg') white;<br>}<br>.day-forecast > h2,<br>.day-forecast > p {<br> margin: .2rem;<br> font-size: 1rem;<br>}<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide31" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 31</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-30.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="URL() Конструктор URL() возвращает вновь созданный URL объект, отражающий URL," loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-30.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-30.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-30.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-30.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>URL()<br><p>Конструктор URL() возвращает вновь созданный URL объект, отражающий URL, определяемый параметрами.<br>Если предоставленный базовый URL-адрес</div></h2><div class="slides-content">или итоговый URL-адрес не является валидным, то будет сгенерировано JavaScript исключение TypeError.<br>Синтаксис<br>const url = new URL(url [, base])<br>Параметры<br>urlСтрока типа USVString или любой объект, который может быть преобразован в строку, включая, например, элементы <a> и <area>, представляющие абсолютный и относительный URL-адрес соответственно. <br>Если url это относительный URL-адрес, то параметр base становится обязательным, так как он будет использован в качестве базового URL-адреса. <br>Если же url — абсолютный URL-адрес, то значение параметра base будет проигнорировано.<br>base <br>НеобязательныйСтрока типа USVString. Используется в качестве базового адреса, когда url это относительный URL-адрес. Значение по умолчанию: undefined.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide32" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 32</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-31.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Атрибуты К этому элементу применимы только глобальные атрибуты. Примечание Каждый" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-31.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-31.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-31.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-31.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Атрибуты<br><p>К этому элементу применимы только глобальные атрибуты.<br>Примечание<br>Каждый элемент <article> должен быть идентифицирован, обычно путём</div></h2><div class="slides-content">добавления заголовка (элементы <h1>-<h6>) в качестве дочернего элемента.<br>Когда элемент <article> является вложенным, внутренний элемент представляет собой контент связанный с внешним элементом. Например, комментарии к публикации в блоге могут быть элементами <article>, вложенными в другой <article>, являющийся публикацией в блоге.<br>Информация об авторе в элементе <article> может быть представлена через элемент <address>, но это не применимо к вложенным элементам <article>.<br>Дата и время публикации в элементе <article> могут быть описаны с помощью атрибута datetime элемента <time>. Обратите внимание, что атрибут pubdate элемента <time> больше не является частью стандарта W3C HTML5.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide33" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 33</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-32.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Пример Парк Юрского периода Динозавры были величественны! Слишком страшно для меня. Опубликовано 16 мая Лизой." loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-32.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-32.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-32.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-32.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Пример <br><p><article class="film_review"> <br><header> <h2>Парк Юрского периода</h2> </header><br> <section class="main_review"><br> <p>Динозавры</div></h2><div class="slides-content">были величественны!</p> </section><br> <section class="user_reviews"> <br><article class="user_review"><br> <p>Слишком страшно для меня.</p> <br><footer><br> <p> Опубликовано <time datetime="2015-05-16 19:00">16 мая</time> Лизой. </p> <br></footer> <br></article><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide34" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 34</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-33.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Элемент секции навигации HTML-элемент определяет отдельную секцию документа, назначение которой" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-33.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-33.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-33.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-33.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Элемент секции навигации <nav><br><p>HTML-элемент <nav> определяет отдельную секцию документа, назначение которой обозначение ссылок</div></h2><div class="slides-content">навигации (как внутри текущего документа, так и ведущих на другую страницу).<br> В качестве примера такой секции можно привести меню, якорные ссылки.<br>Атрибуты<br>Этот элемент поддерживает глобальные атрибуты.<br>Примечание<br>Не обязательно все ссылки должны быть обёрнуты в <nav>. <nav> следует использовать лишь для главных навигационных блоков. Например, <footer> часто содержит список ссылок, которые не стоит оборачивать в <nav> .<br>Документ может содержать несколько <nav> элементов. Например, один для навигации по сайту, второй для навигации по странице.<br>Пользовательские агенты, такие как устройства чтения с экрана, предназначенные для людей с плохим зрением, могут использовать этот элемент, чтобы определить следует ли пускать рендеринг содержимого навигации.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide35" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 35</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-34.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Пример nav Главная О нас Контакты" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-34.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-34.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-34.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-34.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Пример nav<br><p><nav class="menu"><br> <ul><br> <li><br><a href="#">Главная</a><br></li> <br><li><br><a href="#">О нас</a><br></li><br> <li><br><a href="#">Контакты</a><br></li></div></h2><div class="slides-content"><br></ul> <br></nav><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide36" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 36</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-35.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Пример Саламандры - это группа амфибий с внешностью ящерицы, включая" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-35.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-35.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-35.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-35.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Пример <aside>
<br><p><p> Саламандры - это группа амфибий с внешностью ящерицы, включая</div></h2><div class="slides-content">короткие ноги и хвост как в личиночной, так и во взрослой формах.<br><aside><br><p> Грубокожий тритон защищает себя смертельным нейротоксином.</p><br> </aside><br><p > Несколько видов саламандр обитают в умеренных тропических лесах Тихоокеанского северо-запада, включая Энсатину, Северо-западную саламандру и тритона с грубой кожей. Большинство саламандр ведут ночной образ жизни и охотятся на насекомых, червей и других мелких существ. </p><br><p>aside {<br> width: 40%;<br> padding-left: .5rem;<br> margin-left: .5rem;<br> float: right;<br> box-shadow: inset 5px 0 5px -5px #29627e;<br> font-style: italic;<br> color: #29627e;<br>}<br>aside > p {<br> margin: .5rem;<br>}<br><p>HTML-элемент <aside> представляет собой часть документа, чьё содержимое только косвенно связанно с основным содержимым документа. Чаще всего представлен в виде боковой панели, сносок или меток.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide37" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 37</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-36.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Добавление векторной графики в веб-документ (встроенный контент) Векторная графика очень" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-36.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-36.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-36.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-36.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Добавление векторной графики в веб-документ (встроенный контент)<br><p>Векторная графика очень полезна во</div></h2><div class="slides-content">многих случаях. Она имеет малые размеры файла и высокую масштабируемость – при увеличении масштаба пиксели не увеличиваются вместе с графикой. <br>Более того, файлы векторных изображений намного меньше растровых, т.к. в них содержится алгоритмы построения вместо информации о каждом пикселе.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide38" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 38</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-37.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Что такое SVG? SVG это язык на базе XML для" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-37.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-37.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-37.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-37.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Что такое SVG?
<br><p>SVG это язык на базе XML для описания векторных изображений.<br> По сути</div></h2><div class="slides-content">это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. <br>SVG предназначен для разметки графики, а не содержимого. <br>В простейшем случае, вы можете использовать элементы для создания простых фигур, таких как <circle>(круг) и <rect>(прямоугольник). <br>Более сложные SVG элементы включают<br> <feColorMatrix> (en-US) (разложение цвета с использованием матрицы), <br><animate> (анимация частей вашего векторного изображения) и<br> <mask> (en-US) (применение маски к изображению.)<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide39" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 39</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-38.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="В качестве простого примера, следующий код создаёт круг и прямоугольник:" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-38.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-38.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-38.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-38.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>В качестве простого примера, следующий код создаёт круг и прямоугольник:
<br><p><svg version="1.1"</div></h2><div class="slides-content">baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"><br> <rect width="100%" height="100%" fill="black" /> <br><circle cx="150" cy="100" r="90" fill="blue" /> <br></svg><br>Для создания SVG изображений используются редакторы векторной графики, такие как Inkscape или Illustrator. <br>Данные приложения позволяют создавать различные изображения, используя множество графических инструментов, и создавать приближения фотографий (например опция Trace Bitmap feature приложения Inkscape.)<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide40" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 40</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-39.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Дополнительные преимущества SVG: Текст в векторном изображении остаётся машинописным (то" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-39.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-39.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-39.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-39.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Дополнительные преимущества SVG:<br><p>Текст в векторном изображении остаётся машинописным (то есть доступным</div></h2><div class="slides-content">для поисковика, что улучшает SEO).<br>SVG легко поддаются стилизации/программированию (scripting), потому что каждый компонент изображения может быть стилизован с помощью CSS или запрограммирован с помощью JavaScript.<br>Так почему же тогда вообще используют растровые изображения, а не только SVG?<br> Дело в том, что SVG имеет ряд недостатков:<br>SVG может очень быстро стать сложным в том смысле, что размер файла увеличивается; сложные SVG-изображения также создают большую вычислительную нагрузку на браузер.<br>SVG может быть сложнее создать, нежели растровое изображение, в зависимости от того, какое изображение необходимо создать.<br>не поддерживается старыми версиями браузеров, то есть не подойдёт для сайтов, поддерживающих Internet Explorer 8 или старее.<br>В целом, растровая графика лучше подходит для сложных изображений, например, фотографий.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide41" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 41</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-40.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Добавление SVG на страницы Рассмотрим различные варианты, с помощью которых" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-40.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-40.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-40.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-40.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Добавление SVG на страницы<br><p>Рассмотрим различные варианты, с помощью которых можно добавить</div></h2><div class="slides-content">SVG векторную графику на веб-страницу.<br>Быстрый путь: <img><br>Чтобы встроить SVG используя элемент <img>, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут height или width (или оба, если ваш SVG не имеет собственного соотношения сторон). <br><img src="equilateral.svg" alt="triangle with all three sides equal" height="87px" width="100px" /><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide42" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 42</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-41.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Минусы Вы не можете изменять изображение с помощью JavaScript. Если" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-41.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-41.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-41.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-41.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Минусы <img>
<br><p>Вы не можете изменять изображение с помощью JavaScript.<br>Если вы</div></h2><div class="slides-content">хотите управлять содержимым SVG с помощью CSS, вы должны использовать встроенные CSS стили в своём SVG коде. (Внешние таблицы стилей, вызываемые из файла SVG, не действуют.)<br>Вы не можете изменить стиль изображения с помощью псевдоклассов CSS (например :focus).<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide43" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 43</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-42.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Как включить SVG в ваш HTML код Вы можете открыть" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-42.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-42.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-42.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-42.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Как включить SVG в ваш HTML код
<br><p>Вы можете открыть файл SVG</div></h2><div class="slides-content">в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой приём иногда называют встраиванием SVG (SVG inline или inlining SVG). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов <svg></svg> (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:<br><svg width="300" height="200"> <rect width="100%" height="100%" fill="green" /> </svg> <br>Плюсы<br>Вставка вашего SVG путём SVG inline позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки.<br>Вы можете присваивать class-ы и id элементам SVG и стилизовать их при помощи CSS, либо в пределах SVG, либо внутри SVG, либо там, где вы размещаете правила стиля CSS для вашего HTML документа. <br>По факту вы можете использовать любой атрибут представления SVG как свойство CSS.<br>SVG inline единственный метод, который позволяет вам использовать CSS-взаимодействия (как :focus) и CSS-анимацию на вашем SVG изображении (даже в вашей обычной таблице стилей).<br>Вы можете разметить SVG как гиперссылку, обернув в элемент <a>.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide44" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 44</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-43.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Минусы Этот метод подходит, только если вы используете SVG лишь" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-43.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-43.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-43.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-43.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Минусы
<br><p>Этот метод подходит, только если вы используете SVG лишь в одном</div></h2><div class="slides-content">месте. Дублирование делает обслуживание ресурсоёмким.<br>Дополнительный SVG код увеличивает размер вашего HTML файла.<br>Браузер не может кешировать встроенный SVG, так как он кеширует обычные изображения.<br>Вы можете добавить альтернативный вариант в элементе <foreignObject>, но браузеры поддерживающие SVG будут продолжать загружать все альтернативные изображения.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide45" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 45</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-44.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Как встраивать SVG при помощи Вы можете открывать ваши SVG" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-44.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-44.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-44.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-44.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Как встраивать SVG при помощи <iframe><br><p>Вы можете открывать ваши SVG изображения в</div></h2><div class="slides-content">браузере просто как веб-страницы. <br><iframe src="triangle.svg" width="500" height="500" sandbox><br> <img src="triangle.png" alt="Triangle with three unequal sides" /> <br></iframe><br>Это - определённо не самый лучший метод для выбора:<br>Минусы<br>У iframe-ов есть резервный механизм, но браузеры отображают резервный вариант только если они вообще не поддерживают iframe-ы.<br>Более того, до тех пор пока SVG и ваша текущая веб-страница имеют одинаковый origin(Браузер отправляет серверу первичные данные - протокол, хостинг, домен, порт соединения через URL. Два объекта одинаковые если протокол, хост, домен и порт одинаковые.), <br>вы не можете использовать JavaScript на вашей основной веб-странице, чтобы манипулировать SVG.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide46" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 46</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-45.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Видео и аудио контент В спецификации HTML5 были добавлены функции," loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-45.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-45.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-45.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-45.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Видео и аудио контент
<br><p>В спецификации HTML5 были добавлены функции, с элементами <video> и <audio>, и некоторые</div></h2><div class="slides-content">новые JavaScript API для их управления. <br> Прежде всего, вы также должны знать, что есть немало OVPs (провайдеров онлайн-видео) вроде YouTube, Dailymotion и Vimeo, а также онлайн аудио-провайдеров вроде Soundcloud. <br>Такие компании предлагают удобный и простой способ размещения и потребления видео, поэтому вам не нужно беспокоиться об огромном потреблении трафика. <br>OVP даже обычно предлагают готовый код для встраивания видео и аудио в ваши веб-страницы<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide47" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 47</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-46.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Элемент Элемент позволяет вам вставлять видео достаточно легко. Очень простой" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-46.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-46.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-46.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-46.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Элемент <video><br><p>Элемент <video> позволяет вам вставлять видео достаточно легко. Очень простой пример</div></h2><div class="slides-content">выглядит так:<br><video src="rabbit320.webm" controls><br> <p>Ваш браузер не поддерживает HTML5 видео.<br> Используйте <a href="rabbit320.webm">ссылку на видео</a><br> для доступа.</p><br> </video><br>Описание параметров:<br>srcТочно так же, как для элемента <img> , атрибут src (source — источник) содержит путь к видео, которое вы хотите внедрить. Он работает точно так же.<br>Controls<br>Пользователи должны иметь возможность контролировать воспроизведение видео и аудио. <br>Вы должны либо использовать атрибут controls, чтобы использовать встроенный в браузер интерфейс управления или создать собственный интерфейс, используя соответствующие JavaScript API. Как минимум, интерфейс должен включать способ запуска и остановки медиа-носителя и регулировки громкости.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide48" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 48</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-47.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Поддержка нескольких форматов Форматы, такие как MP3, MP4 и WebM," loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-47.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-47.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-47.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-47.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Поддержка нескольких форматов<br><p>Форматы, такие как MP3, MP4 и WebM, называются форматами контейнеров.</div></h2><div class="slides-content">Они содержат различные части, которые составляют всю песню или видео — например, звуковую дорожку, видеодорожку (в случае видео) и метаданные для описания представленного носителя.<br>Аудио и видео треки также находятся в разных форматах, например:<br>Контейнер WebM обычно загружает звук Ogg Vorbis с видео VP8 / VP9. Поддерживается в основном в Firefox и Chrome.<br>Контейнер MP4 часто включает аудио AAC или MP3 с видео H.264. Поддерживается в основном в Internet Explorer и Safari.<br>Более старый контейнер Ogg имеет тенденцию идти с аудио Ogg Vorbis и видео Ogg Theora. Поддерживалось главным образом в Firefox и Chrome, но было вытеснено более качественным форматом WebM.<br>Вышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные кодеки, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в бинарные данные и обратно.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide49" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 49</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-48.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Здесь мы изъяли атрибут src из нашего тега , и" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/177028/slide-48.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/177028/slide-48.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/177028/slide-48.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/177028/slide-48.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p><source><br><p>Здесь мы изъяли атрибут src из нашего тега <video>, и вместо этого включали</div></h2><div class="slides-content">отдельные элементы <source>, каждый из которых ссылается на собственный источник. В этом случае браузер пройдётся по элементам <source> и начнёт воспроизводить первый из них, который имеет поддерживаемый кодек.<br> Включение источников WebM и MP4 должно быть достаточно для воспроизведения вашего видео на большинстве платформ и браузеров в наши дни.<br><video controls> <br><source src="rabbit320.mp4" type="video/mp4"> <br><source src="rabbit320.webm" type="video/webm"><br> <p>Ваш браузер не поддерживает HTML5 видео. Вот<br> <a href="rabbit320.mp4">ссылка на видео</a> взамен.</p> <br></video<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><!----></div><!--]--></div><div class="section"><div></div></div><form id="download" action="/api/" method="post" class="download"><!----><div class="download-description"> Имя файла: Палитра-элементов-HTML.pptx <br> Количество просмотров: 65 <br> Количество скачиваний: 0</div><button class="download-btn" type="submit">Скачать</button><!----></form><div class="navigation"><div class="navigation-item"><div>- Предыдущая</div><a href="/medetsina/nktel-massazh" class="navigation-link">Нүктелі массаж</a></div><div class="navigation-item"><div>Следующая -</div><a href="/istoriya/rabstvo-v-drevnem-rime-patriarhalnoe-rabstvo" class="navigation-link">Рабство в Древнем Риме. Патриархальное рабство ранней республики</a></div></div></div></div><div class="item-layoutRelated"><div class="section"><div></div></div></div></div><div class="item-layout"><div class="related"><h2 class="related-header">Похожие презентации</h2><div class="related-wrapper"><!--[--><div class="related-item"><a href="/informatika/upravlenie-relyatsionnymi-bazami-dannyh-yazyki-opredeleniya" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/131683/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/131683/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/131683/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/131683/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/131683/slide-0.jpg 1440w" class="slides-image related-itemImage"> Управление реляционными базами данных. Языки определения данных и языки манипулирования данными</a></div><div class="related-item"><a href="/informatika/zashchita-informatsii-11" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/174823/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/174823/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/174823/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/174823/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/174823/slide-0.jpg 1440w" class="slides-image related-itemImage"> Защита информации</a></div><div class="related-item"><a href="/informatika/kodirovanie-i-obrabotka-zvukovoy-informatsii-sozdanie" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/553945/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/553945/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/553945/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/553945/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/553945/slide-0.jpg 1440w" class="slides-image related-itemImage"> Кодирование и обработка звуковой информации. Создание звукового клипа</a></div><div class="related-item"><a href="/informatika/dinamicheskie-struktury-dannyh-odnosvyaznye-i-dvusvyaznye" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/92025/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/92025/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/92025/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/92025/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/92025/slide-0.jpg 1440w" class="slides-image related-itemImage"> Динамические структуры данных. Односвязные и двусвязные списки</a></div><div class="related-item"><a href="/informatika/opasnosti-v-internete-5" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/179063/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/179063/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/179063/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/179063/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/179063/slide-0.jpg 1440w" class="slides-image related-itemImage"> Опасности в Интернете</a></div><div class="related-item"><a href="/informatika/pomoshchniki-cheloveka-pri-schyote" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/194115/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/194115/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/194115/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/194115/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/194115/slide-0.jpg 1440w" class="slides-image related-itemImage"> Помощники человека при счёте</a></div><div class="related-item"><a href="/informatika/slova-s-kompyuternoy-nachinkoy-blits-turnir" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/315995/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/315995/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/315995/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/315995/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/315995/slide-0.jpg 1440w" class="slides-image related-itemImage"> Слова с компьютерной начинкой. Блиц-турнир</a></div><div class="related-item"><a href="/informatika/harakteristika-i-tipy-liniy-svyazi" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/143725/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/143725/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/143725/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/143725/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/143725/slide-0.jpg 1440w" class="slides-image related-itemImage"> Характеристика и типы линий связи</a></div><div class="related-item"><a href="/informatika/uslovnyy-rendering" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/577962/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/577962/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/577962/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/577962/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/577962/slide-0.jpg 1440w" class="slides-image related-itemImage"> Условный рендеринг</a></div><div class="related-item"><a href="/informatika/administrirovanie-mezhsetevyh-ekranov-lektsiya-7" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/224335/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/224335/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/224335/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/224335/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/224335/slide-0.jpg 1440w" class="slides-image related-itemImage"> Администрирование межсетевых экранов. Лекция 7</a></div><div class="related-item"><a href="/informatika/kak-gc-osvobozhdaet-pamyat" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/199666/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/199666/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/199666/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/199666/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/199666/slide-0.jpg 1440w" class="slides-image related-itemImage"> Как GC освобождает память</a></div><div class="related-item"><a href="/informatika/resursy-dlya-organizatsii-distantsionnogo-obucheniya-1" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/289403/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/289403/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/289403/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/289403/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/289403/slide-0.jpg 1440w" class="slides-image related-itemImage"> Ресурсы для организации дистанционного обучения (1)</a></div><div class="related-item"><a href="/informatika/ustroystvo-i-funktsionirovanie-informatsionnoy-sistemy" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/437315/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/437315/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/437315/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/437315/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/437315/slide-0.jpg 1440w" class="slides-image related-itemImage"> Устройство и функционирование информационной системы</a></div><div class="related-item"><a href="/informatika/tehnologiya-jsf-java-server-faces" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/214864/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/214864/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/214864/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/214864/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/214864/slide-0.jpg 1440w" class="slides-image related-itemImage"> Технология JSF (Java Server Faces)</a></div><div class="related-item"><a href="/informatika/algoritm-raboty-s-fragmentami-risunka-povorot" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/276074/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/276074/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/276074/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/276074/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/276074/slide-0.jpg 1440w" class="slides-image related-itemImage"> Алгоритм работы с фрагментами рисунка: поворот, наклон</a></div><div class="related-item"><a href="/informatika/administrativno-pravovye-formy-i-metody-realizatsii" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/7762/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/7762/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/7762/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/7762/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/7762/slide-0.jpg 1440w" class="slides-image related-itemImage"> Административно-правовые формы и методы реализации исполнительной власти</a></div><div class="related-item"><a href="/informatika/osnovy-raboty-v-sisteme-upravleniya-bazami-1" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/91083/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/91083/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/91083/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/91083/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/91083/slide-0.jpg 1440w" class="slides-image related-itemImage"> Основы работы в системе управления базами данных (СУБД) MS Access</a></div><div class="related-item"><a href="/informatika/tablichnyy-protsessor-microsoft-excel-2007" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/350192/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/350192/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/350192/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/350192/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/350192/slide-0.jpg 1440w" class="slides-image related-itemImage"> Табличный процессор Microsoft Excel 2007</a></div><div class="related-item"><a href="/informatika/tehnologii-programmirovaniya-6" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/231359/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/231359/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/231359/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/231359/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/231359/slide-0.jpg 1440w" class="slides-image related-itemImage"> Технологии программирования</a></div><div class="related-item"><a href="/informatika/yazyk-s-algoritmicheskie-struktury" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/440317/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/440317/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/440317/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/440317/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/440317/slide-0.jpg 1440w" class="slides-image related-itemImage"> Язык С. Алгоритмические структуры</a></div><div class="related-item"><a href="/informatika/svg-syntax-sprites-animation" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/93701/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/93701/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/93701/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/93701/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/93701/slide-0.jpg 1440w" class="slides-image related-itemImage"> SVG: Syntax Sprites Animation</a></div><div class="related-item"><a href="/informatika/kak-prodvigat-svoy-biznes-bez-slozhnyh" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/395279/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/395279/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/395279/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/395279/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/395279/slide-0.jpg 1440w" class="slides-image related-itemImage"> Как продвигать свой бизнес без сложных настроек</a></div><div class="related-item"><a href="/informatika/vvedenie-v-javascript-lektsiya-16" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/580037/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/580037/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/580037/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/580037/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/580037/slide-0.jpg 1440w" class="slides-image related-itemImage"> Введение в JavaScript. Лекция 16</a></div><div class="related-item"><a href="/informatika/yazyk-python-viklyuchennya" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/16050/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/16050/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/16050/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/16050/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/16050/slide-0.jpg 1440w" class="slides-image related-itemImage"> Язык Python. Виключення</a></div><div class="related-item"><a href="/informatika/multemediyaly-tenologiyalardy--ou-dersnde-paydalanu" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/120245/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/120245/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/120245/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/120245/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/120245/slide-0.jpg 1440w" class="slides-image related-itemImage"> Мультемедиялық тенологияларды ң оқу үдеріснде пайдалану</a></div><div class="related-item"><a href="/informatika/razrabotka-web-saytovs-ispolzovaniem-yazyka-razmetki" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/549389/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/549389/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/549389/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/549389/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/549389/slide-0.jpg 1440w" class="slides-image related-itemImage"> Разработка Web-сайтовс использованием языка разметки гипертекста НТМL.</a></div><div class="related-item"><a href="/informatika/modelyuvannya-tehnologchnih-protsesv-ekspluatats-zasobv-elektrotransportu" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/282469/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/282469/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/282469/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/282469/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/282469/slide-0.jpg 1440w" class="slides-image related-itemImage"> Моделювання технологічних процесів експлуатації засобів електротранспорту</a></div><div class="related-item"><a href="/informatika/kratkaya-harakteristika-soderzhaniya-proizvedeniya-pechati-ili" class="related-itemLink"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/376869/slide-0.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/376869/slide-0.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/376869/slide-0.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/376869/slide-0.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/376869/slide-0.jpg 1440w" class="slides-image related-itemImage"> Краткая характеристика содержания произведения печати или рукописи - аннотация</a></div><!--]--></div></div></div></div><!--]--><!--]--><!--]--></div></div></main><footer class="footer"><div class="layout"><!----><div class="footer-contacts"><svg class="footer-contactsIcon" viewBox="0 0 27 26" xmlns="http://www.w3.org/2000/svg"><use xlink:href="/images/icons.svg#contacts"></use></svg> Обратная связь</div><!----><div class="footer-contactsEmail"> Email: <span class="footer-contactsShow">Нажмите что бы посмотреть</span></div></div></footer></div><!--]--></div><script>window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q){return {data:{meta:{result:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F}},categories:{result:[{id:G,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:G,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:H,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:j,name:"Литература",pseudoname:"literatura"},{id:119,ordering:k,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:13,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]},item:{result:{id:177028,name:m,category:H,count:50,jpg:"jpg\u002F177028",hits:65,download:b,h1:"Палитра элементов HTML презентация",meta:{h1:m,title:m,description:"Палитра элементов HTML презентация на тему, доклад, Информатика",keywords:"Палитра элементов HTML, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Палитра элементов HTML из раздела Информатика. Презентация на заданную тему содержит 50 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EСодержание\u003Cbr\u003E\u003Cp\u003EКатегории контента\u003Cbr\u003E\u003Cdiv\u003E: Элемент разделения контента\u003Cbr\u003E\u003Csection\u003E\u003Cbr\u003E\u003Carticle\u003E\u003Cbr\u003E\u003Cnav\u003EЭлемент секции навигации\u003Cbr\u003EДобавление векторной графики в веб-документ (встроенный контент)\u003Cbr\u003EВидео и аудио контент\u003Cbr\u003E \u003Cp\u003EКатегории контента\u003C",file:"Палитра-элементов-HTML.pptx",texts:["\u003Cp\u003EПалитра элементов HTML\u003Cbr\u003E","\u003Cp\u003EСодержание\u003Cbr\u003E\u003Cp\u003EКатегории контента\u003Cbr\u003E\u003Cdiv\u003E: Элемент разделения контента\u003Cbr\u003E\u003Csection\u003E\u003Cbr\u003E\u003Carticle\u003E\u003Cbr\u003E\u003Cnav\u003EЭлемент секции навигации\u003Cbr\u003EДобавление векторной графики в веб-документ (встроенный контент)\u003Cbr\u003EВидео и аудио контент\u003Cbr\u003E","\u003Cp\u003EКатегории контента\u003Cbr\u003E\u003Cp\u003EКаждый элемент HTML принадлежит некоторому количеству категорий контента, которые объединяют элементы с общим набором характеристик. \u003Cbr\u003EСуществует три типа категорий контента:\u003Cbr\u003EОсновные категории контента, описывающие общие для многих элементов правила;\u003Cbr\u003EКатегории контента для элементов форм, описывающие общие правила для элементов форм;\u003Cbr\u003EОсобые категории контента, описывающие редкие категории, актуальные только для нескольких элементов, возможно, лишь в особом контексте.\u003Cbr\u003E","\u003Cp\u003EКатегории контента\u003Cbr\u003E","\u003Cp\u003EОсновные категории контента\r\nМетаданные\u003Cbr\u003E\u003Cp\u003EЭлементы, принадлежащие к категории метаданных, изменяют отображение или поведение HTML-документа, связывают его с другими документами и предоставляют другую дополнительную информацию о документе.\u003Cbr\u003EЭлементами метаданных являются: \u003Cbase\u003E, \u003Ccommand\u003E, \u003Clink\u003E, \u003Cmeтa\u003E, \u003Cnoscript\u003E, \u003Cscript\u003E, \u003Cstyle\u003E и \u003Ctitle\u003E.\u003Cbr\u003E","\u003Cp\u003EОсновной поток\r\nflow\u003Cbr\u003E\u003Cp\u003EЭлементы основного потока обычно содержат текст и встроенный контент.\u003Cbr\u003E\u003Ca\u003E, \u003Cabbr\u003E, \u003Caddress\u003E, \u003Carticle\u003E, \u003Caside\u003E, \u003Caudio\u003E, \u003Cb\u003E,\u003Cbdo\u003E, \u003Cbdi\u003E, \u003Cblockquote\u003E, \u003Cbr\u003E, \u003Cbutton\u003E, \u003Ccanvas\u003E, \u003Ccite\u003E, \u003Ccode\u003E, \u003Ccommand\u003E, \u003Cdata\u003E, \u003Cdatalist\u003E, \u003Cdel\u003E, \u003Cdetails\u003E, \u003Cdfn\u003E, \u003Cdiv\u003E, \u003Cdl\u003E, \u003Cem\u003E, \u003Cembed\u003E, \u003Cfieldset\u003E, \u003Cfigure\u003E, \u003Cfooter\u003E, \u003Cform\u003E, \u003Ch1\u003E (en-US), \u003Ch2\u003E (en-US), \u003Ch3\u003E (en-US), \u003Ch4\u003E (en-US), \u003Ch5\u003E (en-US), \u003Ch6\u003E (en-US), \u003Cheader\u003E, \u003Chgroup\u003E, \u003Chr\u003E, \u003Ci\u003E (en-US), \u003Ciframe\u003E (en-US), \u003Cimg\u003E, \u003Cinput\u003E, \u003Cins\u003E, \u003Ckbd\u003E, \u003Ckeygen\u003E (en-US), \u003Clabel\u003E, \u003Cmain\u003E, \u003Cmap\u003E, \u003Cmark\u003E, \u003Cmath\u003E, \u003Cmenu\u003E, \u003Cmeter\u003E, \u003Cnav\u003E, \u003Cnoscript\u003E, \u003Cobject\u003E (en-US), \u003Col\u003E, \u003Coutput\u003E, \u003Cp\u003E, \u003Cpre\u003E, \u003Cprogress\u003E, \u003Cq\u003E (en-US), \u003Cruby\u003E, \u003Cs\u003E (en-US), \u003Csamp\u003E (en-US), \u003Cscript\u003E, \u003Csection\u003E, \u003Cselect\u003E, \u003Csmall\u003E (en-US), \u003Cspan\u003E, \u003Cstrong\u003E, \u003Csub\u003E (en-US), \u003Csup\u003E (en-US), \u003Csvg\u003E, \u003Ctable\u003E (en-US), \u003Ctemplate\u003E, \u003Ctextarea\u003E (en-US), \u003Ctime\u003E, \u003Cul\u003E, \u003Cvar\u003E (en-US), \u003Cvideo\u003E, \u003Cwbr\u003E и Текст.\u003Cbr\u003E","\u003Cp\u003EСекционный контент\u003Cbr\u003E\u003Cp\u003EПодобные элементы создают секции (блоки) в текущей структуре документа, определяющие область действия заголовочного контента и элементов \u003Cheader\u003E и \u003Cfooter\u003E\u003Cbr\u003EК этой категории принадлежат элементы \u003Carticle\u003E, \u003Caside\u003E, \u003Cnav\u003E и \u003Csection\u003E. \u003Cbr\u003E","\u003Cp\u003EЗаголовочный контент\u003Cbr\u003E\u003Cp\u003EЗаголовочный контент задаёт заголовок секции, явно отмеченной структурным элементом или неявно – самим заголовочным.\u003Cbr\u003EДанной категории принадлежат такие элементы, как \u003Ch1\u003E (en-US), \u003Ch2\u003E (en-US), \u003Ch3\u003E (en-US), \u003Ch4\u003E (en-US), \u003Ch5\u003E (en-US), \u003Ch6\u003E (en-US) и \u003Chgroup\u003E.\u003Cbr\u003EЭлемент \u003Cheader\u003E сам по себе не является заголовочным, хотя с большой вероятностью содержит контент такого типа.\u003Cbr\u003E","\u003Cp\u003EФразовый контент\u003Cbr\u003E\u003Cp\u003EФразовый контент определяет текст и его формат. Серии фразового контента образуют параграфы.\u003Cbr\u003EК данной категории принадлежат следующие элементы: \u003Cabbr\u003E, \u003Caudio\u003E, \u003Cb\u003E, \u003Cbdo\u003E, \u003Cbr\u003E, \u003Cbutton\u003E, \u003Ccanvas\u003E, \u003Ccite\u003E, \u003Ccode\u003E, \u003Ccommand\u003E, \u003Cdata\u003E, \u003Cdatalist\u003E, \u003Cdfn\u003E, \u003Cem\u003E, \u003Cembed\u003E, \u003Ci\u003E (en-US), \u003Ciframe\u003E (en-US), \u003Cimg\u003E, \u003Cinput\u003E, \u003Ckbd\u003E, \u003Ckeygen\u003E (en-US), \u003Clabel\u003E, \u003Cmark\u003E, \u003Cmath\u003E, \u003Cmeter\u003E, \u003Cnoscript\u003E, \u003Cobject\u003E (en-US), \u003Coutput\u003E, \u003Cprogress\u003E, \u003Cq\u003E (en-US), \u003Cruby\u003E, \u003Csamp\u003E (en-US), \u003Cscript\u003E, \u003Cselect\u003E, \u003Csmall\u003E (en-US), \u003Cspan\u003E, \u003Cstrong\u003E, \u003Csub\u003E (en-US), \u003Csup\u003E (en-US), \u003Csvg\u003E, \u003Ctextarea\u003E (en-US), \u003Ctime\u003E, \u003Cvar\u003E (en-US), \u003Cvideo\u003E, \u003Cwbr\u003E и обычный текст (не только состоящий из символов пробелов).\u003Cbr\u003E","\u003Cp\u003EФразовый контент\u003Cbr\u003E\u003Cp\u003EЕщё несколько элементов входят в данную категорию при соблюдении особых условий:\u003Cbr\u003E\u003Ca\u003E, если содержит в себе только фразовый контент\u003Cbr\u003E\u003Carea\u003E, только внутри элемента \u003Cmap\u003E\u003Cbr\u003E\u003Cdel\u003E, если содержит в себе только фразовый контент\u003Cbr\u003E\u003Cins\u003E, если содержит в себе только фразовый контент\u003Cbr\u003E\u003Clink\u003E, при наличии атрибута itemprop (en-US)\u003Cbr\u003E\u003Cmap\u003E, если содержит в себе только фразовый контент\u003Cbr\u003E\u003Cmeta\u003E, при наличии атрибута itemprop (en-US)\u003Cbr\u003E","\u003Cp\u003EВстроенный контент\u003Cbr\u003E\u003Cp\u003EВстроенный контент импортирует в документ другой ресурс или вставляет содержимое на другом языке разметки или принадлежащее другому пространству имён. Элементами данной категории являются: \u003Caudio\u003E, \u003Ccanvas\u003E,\u003Cbr\u003E \u003Cembed\u003E, \u003Ciframe\u003E (en-US), \u003Cimg\u003E, \u003Cmath\u003E,\u003Cbr\u003E \u003Cobject\u003E (en-US), \u003Csvg\u003E, \u003Cvideo\u003E.\u003Cbr\u003E","\u003Cp\u003EИнтерактивный контент\u003Cbr\u003E\u003Cp\u003EК интерактивному контенту относятся элементы, который специально разработаны для взаимодействия с пользователем. В данную категорию входят \u003Ca\u003E, \u003Cbutton\u003E, \u003Cdetails\u003E, \u003Cembed\u003E, \u003Ciframe\u003E (en-US), \u003Ckeygen\u003E (en-US), \u003Clabel\u003E, \u003Cselect\u003E и \u003Ctextarea\u003E (en-US).\r\nНекоторые элементы считаются интерактивным контентом только при соблюдении определённых условий:\u003Cbr\u003E\u003Caudio\u003E, если указан атрибут controls\u003Cbr\u003E\u003Cimg\u003E, если указан атрибут usemap\u003Cbr\u003E\u003Cinput\u003E, если атрибут type не скрыт\u003Cbr\u003E\u003Cmenu\u003E, если атрибут type имеет значение toolbar\u003Cbr\u003E\u003Cobject\u003E (en-US), если указан атрибут usemap (en-US)\u003Cbr\u003E\u003Cvideo\u003E, если указан атрибут controls\u003Cbr\u003E","\u003Cp\u003EКонтент форм\u003Cbr\u003E\u003Cp\u003EКонтент форм включает в себя элементы, у которых есть владелец формы, обозначенный атрибутом form. Владельцем формы является либо элемент \u003Cform\u003E, либо элемент, id которого указан в атрибуте form.\u003Cbr\u003E\u003Cbutton\u003E\u003Cbr\u003E\u003Cfieldset\u003E\u003Cbr\u003E\u003Cinput\u003E\u003Cbr\u003E\u003Ckeygen\u003E (en-US)\u003Cbr\u003E\u003Clabel\u003E\u003Cbr\u003E\u003Cmeter\u003E\u003Cbr\u003E\u003Cobject\u003E (en-US)\u003Cbr\u003E\u003Coutput\u003E\u003Cbr\u003E\u003Cprogress\u003E\u003Cbr\u003E\u003Cselect\u003E\u003Cbr\u003E\u003Ctextarea\u003E (en-US)\u003Cbr\u003E","\u003Cp\u003EДанная категория включает несколько подкатегорий:\r\n\u003Cbr\u003E\u003Cp\u003EListed Элементы, перечисленные в IDL коллекциях form.elements (en-US) и fieldset.elements. Включают \u003Cbutton\u003E, \u003Cfieldset\u003E, \u003Cinput\u003E, \u003Ckeygen\u003E (en-US), \u003Cobject\u003E (en-US), \u003Coutput\u003E, \u003Cselect\u003E, и \u003Ctextarea\u003E (en-US).\u003Cbr\u003ELabelable Элементы, которые могут ассоциироваться с элементами \u003Clabel\u003E. Включают \u003Cbutton\u003E, \u003Cinput\u003E, \u003Ckeygen\u003E (en-US), \u003Cmeter\u003E, \u003Coutput\u003E, \u003Cprogress\u003E, \u003Cselect\u003E и \u003Ctextarea\u003E (en-US).\u003Cbr\u003ESubmittable Элементы, которые могут использоваться для построения набора данных формы при отправке на сервер. Включают \u003Cbutton\u003E, \u003Cinput\u003E, \u003Ckeygen\u003E (en-US), \u003Cobject\u003E (en-US), \u003Cselect\u003E и \u003Ctextarea\u003E (en-US).\u003Cbr\u003EResettable Элементы, которые могут быть затронуты при сбросе данных формы. Включают \u003Cinput\u003E, \u003Ckeygen\u003E (en-US), \u003Coutput\u003E,\u003Cselect\u003E и \u003Ctextarea\u003E (en-US).\u003Cbr\u003E","\u003Cp\u003EВторичные категории\r\n\u003Cbr\u003E\u003Cp\u003EСуществуют некоторые вторичные классификации элементов, о которых тоже полезно знать.\u003Cbr\u003EЭлементы поддержки скриптов\u003Cbr\u003EЭлементы поддержки скриптов – это элементы, которые напрямую не влияют на отрисовку документа. \u003Cbr\u003EВместо этого они служат для внедрения скриптов, путём либо содержания кода скрипта напрямую, либо указания данных, которые будут использованы скриптами.\u003Cbr\u003EЭлементами поддержки скриптов являются:\u003Cbr\u003E\u003Cscript\u003E\u003Cbr\u003E\u003Ctemplate\u003E\u003Cbr\u003E","\u003Cp\u003E\u003Cdiv\u003E: Элемент разделения контента\u003Cbr\u003E\u003Cp\u003EЭлемент разделения контента HTML (\u003Cdiv\u003E) является универсальным контейнером для потокового контента. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью CSS.\u003Cbr\u003EHTML\u003Cbr\u003E\u003Cdiv class=\"warning\"\u003E\u003Cbr\u003E \u003Cimg src=\"\u002Fmedia\u002Fexamples\u002Fleopard.jpg\"\u003Cbr\u003E alt=\"An intimidating leopard.\"\u003E\u003Cbr\u003E \u003Cp\u003EBeware of the leopard\u003C\u002Fp\u003E\u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003ECSS\u003Cbr\u003E.warning {\u003Cbr\u003E border: 10px ridge #f00;\u003Cbr\u003E background-color: #ff0;\u003Cbr\u003E padding: .5rem;\u003Cbr\u003E display: flex;\u003Cbr\u003E flex-direction: column;}\u003Cbr\u003E.warning img {\u003Cbr\u003E width: 100%;}\u003Cbr\u003E.warning p {\u003Cbr\u003E font: small-caps bold 1.2rem sans-serif;\u003Cbr\u003E text-align: center;}\u003Cbr\u003E","\u003Cp\u003EЭлемент \u003Cdiv\u003E\u003Cbr\u003E\u003Cp\u003EЯвляясь \"чистым\" контейнером, элемент \u003Cdiv\u003E, по существу, не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя атрибуты class или id, помечать раздел документа, написанный на разных языках (используя атрибут lang).\u003Cbr\u003E","\u003Cp\u003E\r\n\r\nКатегории \u003Cbr\u003E","\u003Cp\u003E\u003Cdl\u003E: Элемент списка описаний\r\n\u003Cbr\u003E\u003Cp\u003EHTML-элемент \u003Cdl\u003E (от англ. Description List) представляет собой список описаний. Этот элемент служит контейнером для списка пар терминов (определяемых элементом \u003Cdt\u003E) и их описаний (определяемых элементами \u003Cdd\u003E). Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение).\u003Cbr\u003E\u003Cdl\u003E\u003Cbr\u003E \u003Cdt\u003EBeast of Bodmin\u003C\u002Fdt\u003E\u003Cbr\u003E \u003Cdd\u003EA large feline inhabiting Bodmin Moor.\u003C\u002Fdd\u003E\u003Cbr\u003E","\u003Cp\u003EARIA\u003Cbr\u003E\u003Cp\u003EAccessible Rich Internet Applications (ARIA) определяет способ сделать веб контент и веб приложения (особенно те, которые разработаны с помощью Ajax и JavaScript) более доступными для людей с ограниченными возможностями.\u003Cbr\u003E Например, ARIA делает доступным навигационные маркеры, JavaScript виджеты, подсказки на форме, сообщения об ошибках, автоматические обновления и многое другое.\u003Cbr\u003EARIA - это набор специальных атрибутов, которые могут быть добавлены в любую разметку, но особенно подходят для HTML. Атрибут role определяет тип объекта (такие как статья, оповещение или ползунок). Дополнительные ARIA атрибуты предоставляют другие полезные возможности, такие как описания для форм или текущее значение индикатора выполнения.\u003Cbr\u003EПоддержка ARIA реализована в большинстве современных браузеров и программах экранного доступа. Конечно, реализации различаются, и старые технологии не поддерживают их полностью (либо вообще не поддерживают). Используйте постепенно деградирующий \"щадящий\" ARIA, или просите пользователей использовать новые технологии.\u003Cbr\u003E","\u003Cp\u003EАтрибуты\u003Cbr\u003EК этому элементу применимы глобальные атрибуты.\u003Cbr\u003EПримечание: Атрибут align устарел и вышел из употребления; не используйте его больше. Вместо этого, вам следует использовать свойства CSS или методы, такие как CSS Grid или CSS Flexbox для выравнивания и изменения положения элементов \u003Cdiv\u003E на странице.\u003Cbr\u003EПримечание\u003Cbr\u003EЭлемент \u003Cdiv\u003E следует использовать только в том случае, если никакой другой семантический элемент (такой как \u003Carticle\u003E или \u003Cnav\u003E) не подходит.\u003Cbr\u003EСМ. Пример audi a7\u003Cbr\u003E","\u003Cp\u003ECSS Grid\u003Cbr\u003E\u003Cp\u003E\u003Cdiv class=\"wrapper\"\u003E \u003Cdiv class=\"one\"\u003EOne\u003C\u002Fdiv\u003E \u003Cdiv class=\"two\"\u003ETwo\u003C\u002Fdiv\u003E \u003Cdiv class=\"three\"\u003EThree\u003C\u002Fdiv\u003E \u003Cdiv class=\"four\"\u003EFour\u003C\u002Fdiv\u003E \u003Cdiv class=\"five\"\u003EFive\u003C\u002Fdiv\u003E \u003Cdiv class=\"six\"\u003ESix\u003C\u002Fdiv\u003E \u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cp\u003E.wrapper { display: grid; grid-template-columns: repeat(3, 1fr);\u003Cbr\u003E grid-gap: 10px; grid-auto-rows: minmax(100px, auto); } \u003Cbr\u003E.one { grid-column: 1 \u002F 3; \u003Cbr\u003Egrid-row: 1; } \u003Cbr\u003E.two { grid-column: 2 \u002F 4;\u003Cbr\u003E grid-row: 1 \u002F 3; } \u003Cbr\u003E.three { grid-column: 1; grid-row: 2 \u002F 5; } \u003Cbr\u003E.four { grid-column: 3; grid-row: 3; } \u003Cbr\u003E.five { grid-column: 2; grid-row: 4; } \u003Cbr\u003E.six { grid-column: 3; grid-row: 4; } \u003Cbr\u003E\r\n\u003Cbr\u003E",a,"\u003Cp\u003EСтилизованный пример\r\n\u003Cbr\u003E\u003Cp\u003EЭтот пример создаёт прямоугольник с тенью, применяя стили к \u003Cdiv\u003E с помощью CSS. Заметьте, что использование атрибута class на элементе \u003Cdiv\u003E даёт применение стилей \"shadowbox\" (в дословном переводе означает \"теневая коробка\") к элементу.\u003Cbr\u003EHTML\u003Cbr\u003E\u003Cdiv class=\"shadowbox\"\u003E \u003Cp\u003EВот очень интересная заметка в прекрасном прямоугольнике с тенью.\u003C\u002Fp\u003E \u003C\u002Fdiv\u003E\u003Cbr\u003ECSS\u003Cbr\u003E.shadowbox { width: 15em; border: 1px solid #333; box-shadow: 8px 8px 5px #444; padding: 8px 12px; background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); }\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003E\u003Csection\u003E\u003Cbr\u003E\u003Cp\u003EHTML-элемент \u003Csection\u003E представляет собой автономный раздел — который не может быть представлен более точным по семантике элементом — внутри HTML-документа. Как правило, но не всегда, разделы имеют заголовок.\u003Cbr\u003E\u003Ch1\u003EChoosing an Apple\u003C\u002Fh1\u003E\u003Cbr\u003E\u003Csection\u003E\u003Cbr\u003E \u003Ch2\u003EIntroduction\u003C\u002Fh2\u003E\u003Cbr\u003E \u003Cp\u003EThis document provides a guide to help with the important task of choosing the correct Apple.\u003C\u002Fp\u003E\u003Cbr\u003E\u003C\u002Fsection\u003E\u003Cbr\u003E\u003Csection\u003E\u003Cbr\u003E \u003Ch2\u003ECriteria\u003C\u002Fh2\u003E\u003Cbr\u003E \u003Cp\u003EThere are many different criteria to be considered when choosing an Apple — size, color, firmness, sweetness, tartness...\u003C\u002Fp\u003E\u003Cbr\u003E\u003C\u002Fsection\u003E\u003Cbr\u003EНапример, меню навигации должно быть помещено в элемент \u003Cnav\u003E, но список результатов поиска и отображение карты с её элементами управления не имеют специфических элементов и могут быть помещены в \u003Csection\u003E.\u003Cbr\u003EПримечание: Если содержимое элемента имеет смысл объединить как единое целое (в цельный и независимый блок), то элемент \u003Carticle\u003E может стать лучшим выбором.\u003Cbr\u003E","\u003Cp\u003Eкатегории\u003Cbr\u003E","\u003Cp\u003EАтрибуты\u003Cbr\u003E\u003Cp\u003EК этому элементу применимы только глобальные атрибуты.\u003Cbr\u003EПримечание\u003Cbr\u003EКаждый элемент \u003Csection\u003E должен быть идентифицирован, обычно путём добавления заголовка (элементы \u003Ch1\u003E (en-US)-\u003Ch6\u003E (en-US)) в качестве дочернего элемента.\u003Cbr\u003EЕсли имеет смысл по-особому объединить содержимое элемента \u003Csection\u003E (например, сделать цельным и независимым разделом HTML-документа), используйте вместо него элемент \u003Carticle\u003E.\u003Cbr\u003EНе используйте элемент \u003Csection\u003E как общий контейнер; для этого есть \u003Cdiv\u003E, особенно когда секционирование применяется только для стилизации. На практике раздел должен логически выделяться в структуре документа.\u003Cbr\u003E","\u003Cp\u003E\u003Carticle\u003E\r\n\u003Cbr\u003E\u003Cp\u003EHTML-элемент \u003Carticle\u003E представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для независимого распространения или повторного использования. \u003Cbr\u003EЭтот элемент может представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент содержимого.\u003Cbr\u003E","\u003Cp\u003EПример HTML\u003Cbr\u003E\u003Cp\u003E\u003Carticle class=\"forecast\"\u003E\u003Cbr\u003E \u003Ch1\u003EWeather forecast for Seattle\u003C\u002Fh1\u003E\u003Cbr\u003E \u003Carticle class=\"day-forecast\"\u003E\u003Cbr\u003E \u003Ch2\u003E03 March 2018\u003C\u002Fh2\u003E\u003Cbr\u003E \u003Cp\u003ERain.\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Farticle\u003E\u003Cbr\u003E \u003Carticle class=\"day-forecast\"\u003E\u003Cbr\u003E \u003Ch2\u003E04 March 2018\u003C\u002Fh2\u003E\u003Cbr\u003E \u003Cp\u003EPeriods of rain.\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Farticle\u003E\u003Cbr\u003E \u003Carticle class=\"day-forecast\"\u003E\u003Cbr\u003E \u003Ch2\u003E05 March 2018\u003C\u002Fh2\u003E\u003Cbr\u003E \u003Cp\u003EHeavy rain.\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Farticle\u003E\u003Cbr\u003E\u003C\u002Farticle\u003E\u003Cbr\u003E","\u003Cp\u003EПример CSS\u003Cbr\u003E\u003Cp\u003E.forecast {\u003Cbr\u003E margin: 0;\u003Cbr\u003E padding: .3rem;\u003Cbr\u003E background-color: #eee;\u003Cbr\u003E font: 1rem 'Fira Sans', sans-serif;\u003Cbr\u003E}\u003Cbr\u003E.forecast \u003E h1,\u003Cbr\u003E.day-forecast {\u003Cbr\u003E margin: .5rem;\u003Cbr\u003E padding: .3rem;\u003Cbr\u003E font-size: 1.2rem;\u003Cbr\u003E}\u003Cbr\u003E.day-forecast {\u003Cbr\u003E background: right\u002Fcontain content-box border-box no-repeat\u003Cbr\u003E url('\u002Fmedia\u002Fexamples\u002Frain.svg') white;\u003Cbr\u003E}\u003Cbr\u003E.day-forecast \u003E h2,\u003Cbr\u003E.day-forecast \u003E p {\u003Cbr\u003E margin: .2rem;\u003Cbr\u003E font-size: 1rem;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EURL()\u003Cbr\u003E\u003Cp\u003EКонструктор URL() возвращает вновь созданный URL объект, отражающий URL, определяемый параметрами.\u003Cbr\u003EЕсли предоставленный базовый URL-адрес или итоговый URL-адрес не является валидным, то будет сгенерировано JavaScript исключение TypeError.\u003Cbr\u003EСинтаксис\u003Cbr\u003Econst url = new URL(url [, base])\u003Cbr\u003EПараметры\u003Cbr\u003EurlСтрока типа USVString или любой объект, который может быть преобразован в строку, включая, например, элементы \u003Ca\u003E и \u003Carea\u003E, представляющие абсолютный и относительный URL-адрес соответственно. \u003Cbr\u003EЕсли url это относительный URL-адрес, то параметр base становится обязательным, так как он будет использован в качестве базового URL-адреса. \u003Cbr\u003EЕсли же url — абсолютный URL-адрес, то значение параметра base будет проигнорировано.\u003Cbr\u003Ebase \u003Cbr\u003EНеобязательныйСтрока типа USVString. Используется в качестве базового адреса, когда url это относительный URL-адрес. Значение по умолчанию: undefined.\u003Cbr\u003E","\u003Cp\u003EАтрибуты\u003Cbr\u003E\u003Cp\u003EК этому элементу применимы только глобальные атрибуты.\u003Cbr\u003EПримечание\u003Cbr\u003EКаждый элемент \u003Carticle\u003E должен быть идентифицирован, обычно путём добавления заголовка (элементы \u003Ch1\u003E-\u003Ch6\u003E) в качестве дочернего элемента.\u003Cbr\u003EКогда элемент \u003Carticle\u003E является вложенным, внутренний элемент представляет собой контент связанный с внешним элементом. Например, комментарии к публикации в блоге могут быть элементами \u003Carticle\u003E, вложенными в другой \u003Carticle\u003E, являющийся публикацией в блоге.\u003Cbr\u003EИнформация об авторе в элементе \u003Carticle\u003E может быть представлена через элемент \u003Caddress\u003E, но это не применимо к вложенным элементам \u003Carticle\u003E.\u003Cbr\u003EДата и время публикации в элементе \u003Carticle\u003E могут быть описаны с помощью атрибута datetime элемента \u003Ctime\u003E. Обратите внимание, что атрибут pubdate элемента \u003Ctime\u003E больше не является частью стандарта W3C HTML5.\u003Cbr\u003E","\u003Cp\u003EПример \u003Cbr\u003E\u003Cp\u003E\u003Carticle class=\"film_review\"\u003E \u003Cbr\u003E\u003Cheader\u003E \u003Ch2\u003EПарк Юрского периода\u003C\u002Fh2\u003E \u003C\u002Fheader\u003E\u003Cbr\u003E \u003Csection class=\"main_review\"\u003E\u003Cbr\u003E \u003Cp\u003EДинозавры были величественны!\u003C\u002Fp\u003E \u003C\u002Fsection\u003E\u003Cbr\u003E \u003Csection class=\"user_reviews\"\u003E \u003Cbr\u003E\u003Carticle class=\"user_review\"\u003E\u003Cbr\u003E \u003Cp\u003EСлишком страшно для меня.\u003C\u002Fp\u003E \u003Cbr\u003E\u003Cfooter\u003E\u003Cbr\u003E \u003Cp\u003E Опубликовано \u003Ctime datetime=\"2015-05-16 19:00\"\u003E16 мая\u003C\u002Ftime\u003E Лизой. \u003C\u002Fp\u003E \u003Cbr\u003E\u003C\u002Ffooter\u003E \u003Cbr\u003E\u003C\u002Farticle\u003E\u003Cbr\u003E","\u003Cp\u003EЭлемент секции навигации \u003Cnav\u003E\u003Cbr\u003E\u003Cp\u003EHTML-элемент \u003Cnav\u003E определяет отдельную секцию документа, назначение которой обозначение ссылок навигации (как внутри текущего документа, так и ведущих на другую страницу).\u003Cbr\u003E В качестве примера такой секции можно привести меню, якорные ссылки.\u003Cbr\u003EАтрибуты\u003Cbr\u003EЭтот элемент поддерживает глобальные атрибуты.\u003Cbr\u003EПримечание\u003Cbr\u003EНе обязательно все ссылки должны быть обёрнуты в \u003Cnav\u003E. \u003Cnav\u003E следует использовать лишь для главных навигационных блоков. Например, \u003Cfooter\u003E часто содержит список ссылок, которые не стоит оборачивать в \u003Cnav\u003E .\u003Cbr\u003EДокумент может содержать несколько \u003Cnav\u003E элементов. Например, один для навигации по сайту, второй для навигации по странице.\u003Cbr\u003EПользовательские агенты, такие как устройства чтения с экрана, предназначенные для людей с плохим зрением, могут использовать этот элемент, чтобы определить следует ли пускать рендеринг содержимого навигации.\u003Cbr\u003E","\u003Cp\u003EПример nav\u003Cbr\u003E\u003Cp\u003E\u003Cnav class=\"menu\"\u003E\u003Cbr\u003E \u003Cul\u003E\u003Cbr\u003E \u003Cli\u003E\u003Cbr\u003E\u003Ca href=\"#\"\u003EГлавная\u003C\u002Fa\u003E\u003Cbr\u003E\u003C\u002Fli\u003E \u003Cbr\u003E\u003Cli\u003E\u003Cbr\u003E\u003Ca href=\"#\"\u003EО нас\u003C\u002Fa\u003E\u003Cbr\u003E\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003E\u003Cbr\u003E\u003Ca href=\"#\"\u003EКонтакты\u003C\u002Fa\u003E\u003Cbr\u003E\u003C\u002Fli\u003E \u003Cbr\u003E\u003C\u002Ful\u003E \u003Cbr\u003E\u003C\u002Fnav\u003E\u003Cbr\u003E","\u003Cp\u003EПример \u003Caside\u003E\r\n\u003Cbr\u003E\u003Cp\u003E\u003Cp\u003E Саламандры - это группа амфибий с внешностью ящерицы, включая короткие ноги и хвост как в личиночной, так и во взрослой формах.\u003Cbr\u003E\u003Caside\u003E\u003Cbr\u003E\u003Cp\u003E Грубокожий тритон защищает себя смертельным нейротоксином.\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Faside\u003E\u003Cbr\u003E\u003Cp \u003E Несколько видов саламандр обитают в умеренных тропических лесах Тихоокеанского северо-запада, включая Энсатину, Северо-западную саламандру и тритона с грубой кожей. Большинство саламандр ведут ночной образ жизни и охотятся на насекомых, червей и других мелких существ. \u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003Easide {\u003Cbr\u003E width: 40%;\u003Cbr\u003E padding-left: .5rem;\u003Cbr\u003E margin-left: .5rem;\u003Cbr\u003E float: right;\u003Cbr\u003E box-shadow: inset 5px 0 5px -5px #29627e;\u003Cbr\u003E font-style: italic;\u003Cbr\u003E color: #29627e;\u003Cbr\u003E}\u003Cbr\u003Easide \u003E p {\u003Cbr\u003E margin: .5rem;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EHTML-элемент \u003Caside\u003E представляет собой часть документа, чьё содержимое только косвенно связанно с основным содержимым документа. Чаще всего представлен в виде боковой панели, сносок или меток.\u003Cbr\u003E","\u003Cp\u003EДобавление векторной графики в веб-документ (встроенный контент)\u003Cbr\u003E\u003Cp\u003EВекторная графика очень полезна во многих случаях. Она имеет малые размеры файла и высокую масштабируемость – при увеличении масштаба пиксели не увеличиваются вместе с графикой. \u003Cbr\u003EБолее того, файлы векторных изображений намного меньше растровых, т.к. в них содержится алгоритмы построения вместо информации о каждом пикселе.\u003Cbr\u003E","\u003Cp\u003EЧто такое SVG?\r\n\u003Cbr\u003E\u003Cp\u003ESVG это язык на базе XML для описания векторных изображений.\u003Cbr\u003E По сути это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. \u003Cbr\u003ESVG предназначен для разметки графики, а не содержимого. \u003Cbr\u003EВ простейшем случае, вы можете использовать элементы для создания простых фигур, таких как \u003Ccircle\u003E(круг) и \u003Crect\u003E(прямоугольник). \u003Cbr\u003EБолее сложные SVG элементы включают\u003Cbr\u003E \u003CfeColorMatrix\u003E (en-US) (разложение цвета с использованием матрицы), \u003Cbr\u003E\u003Canimate\u003E (анимация частей вашего векторного изображения) и\u003Cbr\u003E \u003Cmask\u003E (en-US) (применение маски к изображению.)\u003Cbr\u003E","\u003Cp\u003EВ качестве простого примера, следующий код создаёт круг и прямоугольник:\r\n\u003Cbr\u003E\u003Cp\u003E\u003Csvg version=\"1.1\" baseProfile=\"full\" width=\"300\" height=\"200\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\"\u003E\u003Cbr\u003E \u003Crect width=\"100%\" height=\"100%\" fill=\"black\" \u002F\u003E \u003Cbr\u003E\u003Ccircle cx=\"150\" cy=\"100\" r=\"90\" fill=\"blue\" \u002F\u003E \u003Cbr\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003EДля создания SVG изображений используются редакторы векторной графики, такие как Inkscape или Illustrator. \u003Cbr\u003EДанные приложения позволяют создавать различные изображения, используя множество графических инструментов, и создавать приближения фотографий (например опция Trace Bitmap feature приложения Inkscape.)\u003Cbr\u003E","\u003Cp\u003EДополнительные преимущества SVG:\u003Cbr\u003E\u003Cp\u003EТекст в векторном изображении остаётся машинописным (то есть доступным для поисковика, что улучшает SEO).\u003Cbr\u003ESVG легко поддаются стилизации\u002Fпрограммированию (scripting), потому что каждый компонент изображения может быть стилизован с помощью CSS или запрограммирован с помощью JavaScript.\u003Cbr\u003EТак почему же тогда вообще используют растровые изображения, а не только SVG?\u003Cbr\u003E Дело в том, что SVG имеет ряд недостатков:\u003Cbr\u003ESVG может очень быстро стать сложным в том смысле, что размер файла увеличивается; сложные SVG-изображения также создают большую вычислительную нагрузку на браузер.\u003Cbr\u003ESVG может быть сложнее создать, нежели растровое изображение, в зависимости от того, какое изображение необходимо создать.\u003Cbr\u003Eне поддерживается старыми версиями браузеров, то есть не подойдёт для сайтов, поддерживающих Internet Explorer 8 или старее.\u003Cbr\u003EВ целом, растровая графика лучше подходит для сложных изображений, например, фотографий.\u003Cbr\u003E","\u003Cp\u003EДобавление SVG на страницы\u003Cbr\u003E\u003Cp\u003EРассмотрим различные варианты, с помощью которых можно добавить SVG векторную графику на веб-страницу.\u003Cbr\u003EБыстрый путь: \u003Cimg\u003E\u003Cbr\u003EЧтобы встроить SVG используя элемент \u003Cimg\u003E, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут height или width (или оба, если ваш SVG не имеет собственного соотношения сторон). \u003Cbr\u003E\u003Cimg src=\"equilateral.svg\" alt=\"triangle with all three sides equal\" height=\"87px\" width=\"100px\" \u002F\u003E\u003Cbr\u003E","\u003Cp\u003EМинусы \u003Cimg\u003E \r\n\u003Cbr\u003E\u003Cp\u003EВы не можете изменять изображение с помощью JavaScript.\u003Cbr\u003EЕсли вы хотите управлять содержимым SVG с помощью CSS, вы должны использовать встроенные CSS стили в своём SVG коде. (Внешние таблицы стилей, вызываемые из файла SVG, не действуют.)\u003Cbr\u003EВы не можете изменить стиль изображения с помощью псевдоклассов CSS (например :focus).\u003Cbr\u003E","\u003Cp\u003EКак включить SVG в ваш HTML код\r\n\u003Cbr\u003E\u003Cp\u003EВы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой приём иногда называют встраиванием SVG (SVG inline или inlining SVG). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов \u003Csvg\u003E\u003C\u002Fsvg\u003E (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:\u003Cbr\u003E\u003Csvg width=\"300\" height=\"200\"\u003E \u003Crect width=\"100%\" height=\"100%\" fill=\"green\" \u002F\u003E \u003C\u002Fsvg\u003E \u003Cbr\u003EПлюсы\u003Cbr\u003EВставка вашего SVG путём SVG inline позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки.\u003Cbr\u003EВы можете присваивать class-ы и id элементам SVG и стилизовать их при помощи CSS, либо в пределах SVG, либо внутри SVG, либо там, где вы размещаете правила стиля CSS для вашего HTML документа. \u003Cbr\u003EПо факту вы можете использовать любой атрибут представления SVG как свойство CSS.\u003Cbr\u003ESVG inline единственный метод, который позволяет вам использовать CSS-взаимодействия (как :focus) и CSS-анимацию на вашем SVG изображении (даже в вашей обычной таблице стилей).\u003Cbr\u003EВы можете разметить SVG как гиперссылку, обернув в элемент \u003Ca\u003E.\u003Cbr\u003E","\u003Cp\u003EМинусы\r\n\u003Cbr\u003E\u003Cp\u003EЭтот метод подходит, только если вы используете SVG лишь в одном месте. Дублирование делает обслуживание ресурсоёмким.\u003Cbr\u003EДополнительный SVG код увеличивает размер вашего HTML файла.\u003Cbr\u003EБраузер не может кешировать встроенный SVG, так как он кеширует обычные изображения.\u003Cbr\u003EВы можете добавить альтернативный вариант в элементе \u003CforeignObject\u003E, но браузеры поддерживающие SVG будут продолжать загружать все альтернативные изображения.\u003Cbr\u003E","\u003Cp\u003EКак встраивать SVG при помощи \u003Ciframe\u003E\u003Cbr\u003E\u003Cp\u003EВы можете открывать ваши SVG изображения в браузере просто как веб-страницы. \u003Cbr\u003E\u003Ciframe src=\"triangle.svg\" width=\"500\" height=\"500\" sandbox\u003E\u003Cbr\u003E \u003Cimg src=\"triangle.png\" alt=\"Triangle with three unequal sides\" \u002F\u003E \u003Cbr\u003E\u003C\u002Fiframe\u003E\u003Cbr\u003EЭто - определённо не самый лучший метод для выбора:\u003Cbr\u003EМинусы\u003Cbr\u003EУ iframe-ов есть резервный механизм, но браузеры отображают резервный вариант только если они вообще не поддерживают iframe-ы.\u003Cbr\u003EБолее того, до тех пор пока SVG и ваша текущая веб-страница имеют одинаковый origin(Браузер отправляет серверу первичные данные - протокол, хостинг, домен, порт соединения через URL. Два объекта одинаковые если протокол, хост, домен и порт одинаковые.), \u003Cbr\u003Eвы не можете использовать JavaScript на вашей основной веб-странице, чтобы манипулировать SVG.\u003Cbr\u003E","\u003Cp\u003EВидео и аудио контент\r\n\u003Cbr\u003E\u003Cp\u003EВ спецификации HTML5 были добавлены функции, с элементами \u003Cvideo\u003E и \u003Caudio\u003E, и некоторые новые JavaScript API для их управления. \u003Cbr\u003E Прежде всего, вы также должны знать, что есть немало OVPs (провайдеров онлайн-видео) вроде YouTube, Dailymotion и Vimeo, а также онлайн аудио-провайдеров вроде Soundcloud. \u003Cbr\u003EТакие компании предлагают удобный и простой способ размещения и потребления видео, поэтому вам не нужно беспокоиться об огромном потреблении трафика. \u003Cbr\u003EOVP даже обычно предлагают готовый код для встраивания видео и аудио в ваши веб-страницы\u003Cbr\u003E","\u003Cp\u003EЭлемент \u003Cvideo\u003E\u003Cbr\u003E\u003Cp\u003EЭлемент \u003Cvideo\u003E позволяет вам вставлять видео достаточно легко. Очень простой пример выглядит так:\u003Cbr\u003E\u003Cvideo src=\"rabbit320.webm\" controls\u003E\u003Cbr\u003E \u003Cp\u003EВаш браузер не поддерживает HTML5 видео.\u003Cbr\u003E Используйте \u003Ca href=\"rabbit320.webm\"\u003Eссылку на видео\u003C\u002Fa\u003E\u003Cbr\u003E для доступа.\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fvideo\u003E\u003Cbr\u003EОписание параметров:\u003Cbr\u003EsrcТочно так же, как для элемента \u003Cimg\u003E , атрибут src (source — источник) содержит путь к видео, которое вы хотите внедрить. Он работает точно так же.\u003Cbr\u003EControls\u003Cbr\u003EПользователи должны иметь возможность контролировать воспроизведение видео и аудио. \u003Cbr\u003EВы должны либо использовать атрибут controls, чтобы использовать встроенный в браузер интерфейс управления или создать собственный интерфейс, используя соответствующие JavaScript API. Как минимум, интерфейс должен включать способ запуска и остановки медиа-носителя и регулировки громкости.\u003Cbr\u003E","\u003Cp\u003EПоддержка нескольких форматов\u003Cbr\u003E\u003Cp\u003EФорматы, такие как MP3, MP4 и WebM, называются форматами контейнеров. Они содержат различные части, которые составляют всю песню или видео — например, звуковую дорожку, видеодорожку (в случае видео) и метаданные для описания представленного носителя.\u003Cbr\u003EАудио и видео треки также находятся в разных форматах, например:\u003Cbr\u003EКонтейнер WebM обычно загружает звук Ogg Vorbis с видео VP8 \u002F VP9. Поддерживается в основном в Firefox и Chrome.\u003Cbr\u003EКонтейнер MP4 часто включает аудио AAC или MP3 с видео H.264. Поддерживается в основном в Internet Explorer и Safari.\u003Cbr\u003EБолее старый контейнер Ogg имеет тенденцию идти с аудио Ogg Vorbis и видео Ogg Theora. Поддерживалось главным образом в Firefox и Chrome, но было вытеснено более качественным форматом WebM.\u003Cbr\u003EВышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные кодеки, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в бинарные данные и обратно.\u003Cbr\u003E","\u003Cp\u003E\u003Csource\u003E\u003Cbr\u003E\u003Cp\u003EЗдесь мы изъяли атрибут src из нашего тега \u003Cvideo\u003E, и вместо этого включали отдельные элементы \u003Csource\u003E, каждый из которых ссылается на собственный источник. В этом случае браузер пройдётся по элементам \u003Csource\u003E и начнёт воспроизводить первый из них, который имеет поддерживаемый кодек.\u003Cbr\u003E Включение источников WebM и MP4 должно быть достаточно для воспроизведения вашего видео на большинстве платформ и браузеров в наши дни.\u003Cbr\u003E\u003Cvideo controls\u003E \u003Cbr\u003E\u003Csource src=\"rabbit320.mp4\" type=\"video\u002Fmp4\"\u003E \u003Cbr\u003E\u003Csource src=\"rabbit320.webm\" type=\"video\u002Fwebm\"\u003E\u003Cbr\u003E \u003Cp\u003EВаш браузер не поддерживает HTML5 видео. Вот\u003Cbr\u003E \u003Ca href=\"rabbit320.mp4\"\u003Eссылка на видео\u003C\u002Fa\u003E взамен.\u003C\u002Fp\u003E \u003Cbr\u003E\u003C\u002Fvideo\u003Cbr\u003E","\u003Cp\u003EЛитература\u003Cbr\u003E\u003Cp\u003EЭлемент - HTML | MDN (mozilla.org)\u003Cbr\u003E\u003Cvideo\u003E - HTML | MDN (mozilla.org)\u003Cbr\u003E"],href:"\u002Finformatika\u002Fpalitra-elementov-html",href_category:"\u002Finformatika",date:1636912102,related:[{id:131683,name:"Управление реляционными базами данных. Языки определения данных и языки манипулирования данными",href:"\u002Finformatika\u002Fupravlenie-relyatsionnymi-bazami-dannyh-yazyki-opredeleniya",jpg:"jpg\u002F131683"},{id:174823,name:"Защита информации",href:"\u002Finformatika\u002Fzashchita-informatsii-11",jpg:"jpg\u002F174823"},{id:553945,name:"Кодирование и обработка звуковой информации. Создание звукового клипа",href:"\u002Finformatika\u002Fkodirovanie-i-obrabotka-zvukovoy-informatsii-sozdanie",jpg:"jpg\u002F553945"},{id:92025,name:"Динамические структуры данных. Односвязные и двусвязные списки",href:"\u002Finformatika\u002Fdinamicheskie-struktury-dannyh-odnosvyaznye-i-dvusvyaznye",jpg:"jpg\u002F92025"},{id:179063,name:"Опасности в Интернете",href:"\u002Finformatika\u002Fopasnosti-v-internete-5",jpg:"jpg\u002F179063"},{id:194115,name:"Помощники человека при счёте",href:"\u002Finformatika\u002Fpomoshchniki-cheloveka-pri-schyote",jpg:"jpg\u002F194115"},{id:315995,name:"Слова с компьютерной начинкой. Блиц-турнир",href:"\u002Finformatika\u002Fslova-s-kompyuternoy-nachinkoy-blits-turnir",jpg:"jpg\u002F315995"},{id:143725,name:"Характеристика и типы линий связи",href:"\u002Finformatika\u002Fharakteristika-i-tipy-liniy-svyazi",jpg:"jpg\u002F143725"},{id:577962,name:"Условный рендеринг",href:"\u002Finformatika\u002Fuslovnyy-rendering",jpg:"jpg\u002F577962"},{id:224335,name:"Администрирование межсетевых экранов. Лекция 7",href:"\u002Finformatika\u002Fadministrirovanie-mezhsetevyh-ekranov-lektsiya-7",jpg:"jpg\u002F224335"},{id:199666,name:"Как GC освобождает память",href:"\u002Finformatika\u002Fkak-gc-osvobozhdaet-pamyat",jpg:"jpg\u002F199666"},{id:289403,name:"Ресурсы для организации дистанционного обучения (1)",href:"\u002Finformatika\u002Fresursy-dlya-organizatsii-distantsionnogo-obucheniya-1",jpg:"jpg\u002F289403"},{id:437315,name:"Устройство и функционирование информационной системы",href:"\u002Finformatika\u002Fustroystvo-i-funktsionirovanie-informatsionnoy-sistemy",jpg:"jpg\u002F437315"},{id:214864,name:"Технология JSF (Java Server Faces)",href:"\u002Finformatika\u002Ftehnologiya-jsf-java-server-faces",jpg:"jpg\u002F214864"},{id:276074,name:"Алгоритм работы с фрагментами рисунка: поворот, наклон",href:"\u002Finformatika\u002Falgoritm-raboty-s-fragmentami-risunka-povorot",jpg:"jpg\u002F276074"},{id:7762,name:"Административно-правовые формы и методы реализации исполнительной власти",href:"\u002Finformatika\u002Fadministrativno-pravovye-formy-i-metody-realizatsii",jpg:"jpg\u002F7762"},{id:91083,name:"Основы работы в системе управления базами данных (СУБД) MS Access",href:"\u002Finformatika\u002Fosnovy-raboty-v-sisteme-upravleniya-bazami-1",jpg:"jpg\u002F91083"},{id:350192,name:"Табличный процессор Microsoft Excel 2007",href:"\u002Finformatika\u002Ftablichnyy-protsessor-microsoft-excel-2007",jpg:"jpg\u002F350192"},{id:231359,name:"Технологии программирования",href:"\u002Finformatika\u002Ftehnologii-programmirovaniya-6",jpg:"jpg\u002F231359"},{id:440317,name:"Язык С. Алгоритмические структуры",href:"\u002Finformatika\u002Fyazyk-s-algoritmicheskie-struktury",jpg:"jpg\u002F440317"},{id:93701,name:"SVG: Syntax Sprites Animation",href:"\u002Finformatika\u002Fsvg-syntax-sprites-animation",jpg:"jpg\u002F93701"},{id:395279,name:"Как продвигать свой бизнес без сложных настроек",href:"\u002Finformatika\u002Fkak-prodvigat-svoy-biznes-bez-slozhnyh",jpg:"jpg\u002F395279"},{id:580037,name:"Введение в JavaScript. Лекция 16",href:"\u002Finformatika\u002Fvvedenie-v-javascript-lektsiya-16",jpg:"jpg\u002F580037"},{id:16050,name:"Язык Python. Виключення",href:"\u002Finformatika\u002Fyazyk-python-viklyuchennya",jpg:"jpg\u002F16050"},{id:120245,name:"Мультемедиялық тенологияларды ң оқу үдеріснде пайдалану",href:"\u002Finformatika\u002Fmultemediyaly-tenologiyalardy--ou-dersnde-paydalanu",jpg:"jpg\u002F120245"},{id:549389,name:"Разработка Web-сайтовс использованием языка разметки гипертекста НТМL.",href:"\u002Finformatika\u002Frazrabotka-web-saytovs-ispolzovaniem-yazyka-razmetki",jpg:"jpg\u002F549389"},{id:282469,name:"Моделювання технологічних процесів експлуатації засобів електротранспорту",href:"\u002Finformatika\u002Fmodelyuvannya-tehnologchnih-protsesv-ekspluatats-zasobv-elektrotransportu",jpg:"jpg\u002F282469"},{id:376869,name:"Краткая характеристика содержания произведения печати или рукописи - аннотация",href:"\u002Finformatika\u002Fkratkaya-harakteristika-soderzhaniya-proizvedeniya-pechati-ili",jpg:"jpg\u002F376869"}],navigation:{next:"\u002Fistoriya\u002Frabstvo-v-drevnem-rime-patriarhalnoe-rabstvo",next_name:"Рабство в Древнем Риме. Патриархальное рабство ранней республики",prev:"\u002Fmedetsina\u002Fnktel-massazh",prev_name:"Нүктелі массаж"}}}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:I,SITE_HOST:"mypreza.com",SITE_LANG:J,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:I,short_name:a,description:a,lang:J,start_url:"\u002F?standalone=true",display:"standalone",background_color:l,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:K,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:K,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:Q,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:b,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable","h2","#d53032",10,11,"#ffffff","Палитра элементов HTML","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","div","images_before","category","both",88,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E",1,"Информатика","Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))