Основы сайтостроения на языках HTML

Содержание

Слайд 2

Содержание:

Приветствую Вас на третьем занятии курса: «Основы сайтостроения на языках HTML и

Содержание: Приветствую Вас на третьем занятии курса: «Основы сайтостроения на языках HTML
CSS». Сегодня мы продолжим знакомство с языком HTML и познакомимся с тегом отвечающим за создание абзацев и тегами отвечающими за создание заголовков .
На прошлом уроке мы подробно рассмотрели создание каркаса страницы – последовательность основных тегов, которые должны присутствовать в каждом html-документе. Если Вы пропустили это занятие пожалуйста вернитесь к нему и обязательно изучите.

Введение
Создание абзацев
Создание заголовков
Подведение итогов

Слайд 3

Введение

Для изучения темы сегодняшнего урока нам понадобится статья. Чтобы самим не набирать

Введение Для изучения темы сегодняшнего урока нам понадобится статья. Чтобы самим не
текст, я предлагаю скопировать из Интернета статью «Обзор бесплатных антивирусных программ». Ниже дана ссылка. Нажмите на неё и Вы перейдёте на сайт, с которого мы будем брать информацию.

http://fantivirus.ru/page/obzor-free-antivirus

Итак, статья у Вас открыта. Теперь нужно открыть документ, который мы создали на прошлом занятии index.html. Я просила Вас для нашего курса создать папку «Изучение HTML» и первый документ сохранить именно в этой папке.
1. Откройте папку «Изучение HTML»

Слайд 4

Создание абзацев

2. Для того чтобы открыть созданный нами документ index.html не в

Создание абзацев 2. Для того чтобы открыть созданный нами документ index.html не
окне браузера а в программе Notepad++ нужно правой кнопкой мыши щёлкнуть по документу и в появившемся меню выбрать пункт Edit with Notepad++ (редактировать с помощью Notepad++)

Результат – откроется созданный нами на прошлом занятии документ

Слайд 5

Создание абзацев

3. Давайте внесём некоторые изменения:
- поменяем название заголовка web-страницы, как

Создание абзацев 3. Давайте внесём некоторые изменения: - поменяем название заголовка web-страницы,
Вы помните за это отвечает тег . Удалите название Первый урок и напишите: Обзор бесплатных антивирусов.<br> - удалите текст, который находится между тегами <body></body>, теперь он нам не нужен и на его место встанет статья, которую мы скопируем из Интернета.<br>- сохраним документ.<br><p>Сохранение документа:<br><p>2 способ: нажать дискетку <br><p>1 способ: Файл ? Сохранить<br><p>3 способ: нажать по другой дискетке<br><p>4 способ: сочетание горячих клавиш<br><p>Изменить название<br><p>Удалить текст<br><p>Запомните!!!<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide6" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/384316/slide-5.jpg" target="_blank" rel="noopener">Слайд 6</a><h3 class="slides-content text-center font-bold"><div><p>Создание абзацев<br><p>После изменения у Вас должен получиться вот такой документ:<br></div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Создание абзацев После изменения у Вас должен получиться вот такой документ:" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/384316/slide-5.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/384316/slide-5.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/384316/slide-5.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-5.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-5.jpg" class="slides-image"><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide7" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/384316/slide-6.jpg" target="_blank" rel="noopener">Слайд 7</a><h3 class="slides-content text-center font-bold"><div><p>4. Откройте сайт где располагается статья и давайте скопируем первый блок текста.</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="4. Откройте сайт где располагается статья и давайте скопируем первый блок текста." loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/384316/slide-6.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/384316/slide-6.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/384316/slide-6.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-6.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-6.jpg" class="slides-image"><!----><div class="slides-content">Почему не весь текст, спросите Вы? Потому, что далее идёт блок с картинками, а он нам не нужен, поэтому мы выделяем: первый заголовок и первый абзац текста.<br><p>Копирование:<br><p>1 способ:<br>выделить текст ? правой кнопкой мыши по выделенному тексту ? копировать<br>2 способ: <br>выделить текст ? нажать на клавиатуре сочетание горячих клавиш: Ctrl + C<br><p>Создание абзацев<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide8" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/384316/slide-7.jpg" target="_blank" rel="noopener">Слайд 8</a><h3 class="slides-content text-center font-bold"><div><p>5. Перейдем в программу Notepad++ в наш документ index.html и между тегами</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="5. Перейдем в программу Notepad++ в наш документ index.html и между тегами" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/384316/slide-7.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/384316/slide-7.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/384316/slide-7.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-7.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-7.jpg" class="slides-image"><!----><div class="slides-content"><body></body> вставим текст, который мы только что скопировали.<br>6. Сохраните наш документ, используя сочетание горячих клавиш CTRL + S<br>7. Нажмите Запуск ?Launch in IE (просмотреть в Internet Explorer)<br><p>Вставка скопированного:<br><p>1 способ:<br>установить курсор в нужное место ? правой кнопкой мыши ? вставить<br>2 способ: <br>установить курсор в нужное место ? нажать на клавиатуре сочетание горячих клавиш: Ctrl + V<br><p>Создание абзацев<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide9" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/384316/slide-8.jpg" target="_blank" rel="noopener">Слайд 9</a><h3 class="slides-content text-center font-bold"><div><p>Создание абзацев<br><p>Браузер должен показать следующее:<br><p>Как Вы заметили, все настройки текста, которые были</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Создание абзацев Браузер должен показать следующее: Как Вы заметили, все настройки текста," loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/384316/slide-8.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/384316/slide-8.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/384316/slide-8.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-8.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-8.jpg" class="slides-image"><!----><div class="slides-content">в статье исчезли. А именно шрифт изменился, заголовок не выделился. Почему так произошло? Давайте это разберём. Перейдите сейчас в программу Notepad++ к нашему документу, как Вы видите заголовок у нас отделён (хотя браузер этого не показывает) от основного текста, а весь последующий абзац расположен на одной строке ниже. Так как мы сейчас уже практически подошли к изучению новых тегов, такое расположение текста нам будет крайне неудобно, так как для написания конечных тегов нам придётся постоянно перемещаться по документу в конец текстового абзаца. Для удобства предлагаю разделить текст, который вставился в одну строку, при помощи клавиши ENTER. Сделать так, чтоб его было видно весь без пролистывания.<br><p>посмотреть как это сделать<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide10" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/384316/slide-9.jpg" target="_blank" rel="noopener">Слайд 10</a><h3 class="slides-content text-center font-bold"><div><p>Результат:<br><p>была нажата клавиша ENTER<br><p>это мы сделали для того, чтобы текст не был</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Результат: была нажата клавиша ENTER это мы сделали для того, чтобы текст" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/384316/slide-9.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/384316/slide-9.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/384316/slide-9.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-9.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-9.jpg" class="slides-image"><!----><div class="slides-content">в одну строку и имел более компактный вид<br><p>Сохраните используя комбинацию горячих клавиш: Ctrl+S. Просмотрите что получилось.<br><p>Создание абзацев<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide11" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/384316/slide-10.jpg" target="_blank" rel="noopener">Слайд 11</a><h3 class="slides-content text-center font-bold"><div><p>Как видите ничего у нас не изменилось. Возвращаемся к нашему вопросу. Почему</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Как видите ничего у нас не изменилось. Возвращаемся к нашему вопросу. Почему" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/384316/slide-10.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/384316/slide-10.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/384316/slide-10.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-10.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-10.jpg" class="slides-image"><!----><div class="slides-content">настройки произведённые в программе Notepad++ - отступы, дополнительные пробелы, переносы не отображаются браузером? А дело вот в чём, браузер воспринимает только команды – теги. Команд на разделение текста и переносы ему не было, поэтому он вывел нам весь текст одни сплошным блоком. Как же отредактировать наш текст, чтобы у нас отделились заголовки и абзацы?<br>И вот здесь нам на помощь приходит новый тег. <br><p>Результат:<br><p>Описание<br>Тег <p> определяет текстовый абзац. Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.<br>Синтаксис<br><p>Текст</p> <br><p>Создание абзацев<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide12" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/384316/slide-11.jpg" target="_blank" rel="noopener">Слайд 12</a><h3 class="slides-content text-center font-bold"><div><p>Создание абзацев<br><p>8. Давайте попробуем вставить тег <p> в наш документ. И для</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Создание абзацев 8. Давайте попробуем вставить тег в наш документ. И для" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/384316/slide-11.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/384316/slide-11.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/384316/slide-11.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-11.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-11.jpg" class="slides-image"><!----><div class="slides-content">начала отделим заголовок от текста. Для этого откроем тег <p> перед началом заголовка и закроем его в конце заголовка </p>. На скриншоте расположенным ниже это хорошо видно. Сохраните используя горячие клавиши и просмотрите результат использования нашего тега.<br><p>результат использования тега абзаца</div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide13" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/384316/slide-12.jpg" target="_blank" rel="noopener">Слайд 13</a><h3 class="slides-content text-center font-bold"><div><p>Создание абзацев<br><p>9. Как Вы увидели тег <p> сработал и заголовок у нас</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Создание абзацев 9. Как Вы увидели тег сработал и заголовок у нас" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/384316/slide-12.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/384316/slide-12.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/384316/slide-12.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-12.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-12.jpg" class="slides-image"><!----><div class="slides-content">отделился от основного текста. Теперь давайте вернёмся с Вами на сайт, где расположена статья и скопируем весь оставшийся текст.<br>10. Произведите выделение как показана на скриншотах ниже от AVG Antivirus Free Edition до дополнительные программы их включать в выделение уже не надо.<br><p>11. Скопируйте выделение используя горячие клавиши (как копировать было описано выше).<br>12. Перейдите в программу Notepad++ . Установите курсор в конце последнего предложения уже имеющегося у нас текста и нажмите Enter - чтобы создать новую пустую строку. Вставьте скопированный текст в эту строку (как вставлять скопированные данные было описано выше).<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide14" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/384316/slide-13.jpg" target="_blank" rel="noopener">Слайд 14</a><h3 class="slides-content text-center font-bold"><div><p>Создание абзацев<br><p>Результат:<br><p>как вы видите текст у нас имеет отступы, давайте сохраним и</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Создание абзацев Результат: как вы видите текст у нас имеет отступы, давайте" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/384316/slide-13.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/384316/slide-13.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/384316/slide-13.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-13.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-13.jpg" class="slides-image"><!----><div class="slides-content">посмотрим,<br>что нам покажет браузер.<br><p>Браузер вывел весь текст одним сплошным блоком и я уже рассказывала Вам, почему так происходит.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide15" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/384316/slide-14.jpg" target="_blank" rel="noopener">Слайд 15</a><h3 class="slides-content text-center font-bold"><div><p>Создание абзацев<br><p>13. Давайте разделим текст на абзацы используя новый тег <p>. Отделите</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Создание абзацев 13. Давайте разделим текст на абзацы используя новый тег ." loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/384316/slide-14.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/384316/slide-14.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/384316/slide-14.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-14.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-14.jpg" class="slides-image"><!----><div class="slides-content">все заголовки, текстовые абзацы и тексты списков (в данном случае, если вы посмотрите на сайте есть маркированные списки) тегами абзацев. И все длинные абзацы, которые уходят за границу видимости перенесите, таким образом, чтоб весь текст помещался в зону видимости без прокрутки по горизонтали.<br><p>Заголовки отделить тегом <p>Текстовые абзацы заключить в тег <p> и перенести текст таким образом, чтоб он был в поле видимости, без прокрутки по горизонтали.<br><p>верно<br><p>не верно<br><p>посмотреть что получилось<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide16" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/384316/slide-15.jpg" target="_blank" rel="noopener">Слайд 16</a><h3 class="slides-content text-center font-bold"><div><p>Создание абзацев<br><p>Результат:<br><p>Для того, чтобы каждый раз в программе Notepad++ не нажимать ЗАПУСК.</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Создание абзацев Результат: Для того, чтобы каждый раз в программе Notepad++ не" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/384316/slide-15.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/384316/slide-15.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/384316/slide-15.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-15.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-15.jpg" class="slides-image"><!----><div class="slides-content">После сохранения документа перейдите в открытый браузер с последним вариантом вашей работы и нажмите на указанный стрелочкой значок – ОБНОВИТЬ. Браузер обновит и выдаст новую сохранённую страницу.<br><p>Задание: расставить абзацы для всего текста самостоятельно. Не забудьте, про списки, так как эту тему мы еще не изучали, то заключите все элементы списков (текст) тоже в тег абзаца.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide17" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/384316/slide-16.jpg" target="_blank" rel="noopener">Слайд 17</a><h3 class="slides-content text-center font-bold"><div><p>Итак, надеюсь Вы правильно проставили все абзацы. Перейдите на сайт, где находится</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Итак, надеюсь Вы правильно проставили все абзацы. Перейдите на сайт, где находится" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/384316/slide-16.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/384316/slide-16.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/384316/slide-16.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-16.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-16.jpg" class="slides-image"><!----><div class="slides-content">статья и посмотрите у статьи имеются заголовки, а в нашем документе заголовки выглядят как простой текст, единственное, что мы смогли сделать это отделить их от основного текста. Теперь пора нам научиться делать красивые и правильно расставленные (по значимости) заголовки. И здесь нам на помощь приходят новые теги.<br><p>Создание заголовков<br><p>Описание<br>HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность текста, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>,...,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.<br>Синтаксис (тег парный нужно закрывать)<br><h1>Заголовок первого уровня</h1> <br><h2>Заголовок второго уровня</h2> <br><h3>Заголовок третьего уровня</h3> <br><h4>Заголовок четвёртого уровня</h4> <br><h5>Заголовок пятого уровня</h5> <br><h6>Заголовок шестого уровня</h6> <br><p>14. Давайте сейчас наш самый первый заголовок, заключим в тег <h1></h1>, потому что это название всей статьи и он получается самый главный. Вот так это должно выглядеть у Вас: <h1>Обзор бесплатных антивирусов</h1> Тег <p> мы убираем, потому что теги от <h1> до <h6> являются блочными элементами и когда мы их устанавливаем до и после заголовка добавляется пустое пространство и автоматически заголовок отделяется от основного текста.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide18" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/384316/slide-17.jpg" target="_blank" rel="noopener">Слайд 18</a><h3 class="slides-content text-center font-bold"><div><p>15. Сохраните и посмотрите, что получилось. Наш заголовок стал жирного начертания и</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="15. Сохраните и посмотрите, что получилось. Наш заголовок стал жирного начертания и" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/384316/slide-17.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/384316/slide-17.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/384316/slide-17.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-17.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-17.jpg" class="slides-image"><!----><div class="slides-content">размер шрифта увеличился.<br>16. Давайте подзаголовки – названия антивирусных программ, выделим, но не забываем о том, что главный заголовок используется на странице один раз. Дальше мы должны использовать теги заголовков меньшего уровня. Для этого воспользуемся тегом <h2></h2><br><p>Создание заголовков<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide19" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/384316/slide-18.jpg" target="_blank" rel="noopener">Слайд 19</a><h3 class="slides-content text-center font-bold"><div><p>Создание заголовков<br><p>17. Как Вы видите подзаголовок изменился – стал жирного начертания и</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Создание заголовков 17. Как Вы видите подзаголовок изменился – стал жирного начертания" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/384316/slide-18.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/384316/slide-18.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/384316/slide-18.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-18.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384316/slide-18.jpg" class="slides-image"><!----><div class="slides-content">размер шрифта увеличился. Но заголовок 2-го уровня как Вы видите отличается от главного заголовка первого уровня, по размеру он меньше.<br><p>Задание: заключить все названия антивирусных программ (заголовки) в тег <h2></h2>. Подобрать для заголовков: (Возможности, недостатки антивирусных программ) свой тег заголовка. Например: <h4>Главные возможности программы:</h4><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> Количество просмотров: 190 <br> Количество скачиваний: 0</div><button class="download-btn" type="submit">Скачать</button><!----></form><div class="navigation"><div class="navigation-item"><div>- Предыдущая</div><a href="/prezentacii-na-razlichnye-temy/zakon-soxraneniya-energii-i-impulsa" class="navigation-link">Закон сохранения энергии и импульса</a></div><div class="navigation-item"><div>Следующая -</div><a href="/prezentacii-na-razlichnye-temy/zanyatie-reformaciya-absolyutizm" 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="/prezentacii-na-razlichnye-temy/novyy-god-assortiment-podarki-i-ukrasheniya" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1009720/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1009720/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1009720/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1009720/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1009720/slide-0.jpg" class="slides-image related-itemImage"> Новый год. Ассортимент. Подарки и украшения</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/vernisazh-voennoy-knigi-podvig-tvoy-bessmerten" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/889111/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/889111/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/889111/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/889111/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/889111/slide-0.jpg" class="slides-image related-itemImage"> Вернисаж военной книги - Подвиг твой бессмертен!</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/iogann-volfgang-fon-gyote" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/397974/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/397974/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/397974/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/397974/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/397974/slide-0.jpg" class="slides-image related-itemImage"> Иоганн Вольфганг фон Гёте</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/svobodnoe-padenie-tel-9-klass" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/361218/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/361218/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/361218/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/361218/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/361218/slide-0.jpg" class="slides-image related-itemImage"> Свободное падение тел (9 КЛАСС)</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/ekologicheskoe-pravo-72" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1113412/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1113412/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1113412/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1113412/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1113412/slide-0.jpg" class="slides-image related-itemImage"> Экологическое право</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/yazykovaya-shkola-night-over-korea-biznes" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1095908/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1095908/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1095908/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1095908/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1095908/slide-0.jpg" class="slides-image related-itemImage"> Языковая школа Night over Korea. Бизнес-план</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/klimat-saratovskoj-oblasti" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/342441/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/342441/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/342441/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/342441/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/342441/slide-0.jpg" class="slides-image related-itemImage"> Климат Саратовской области</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/hranilische-bescennyh-relikviy" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/408526/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/408526/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/408526/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/408526/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/408526/slide-0.jpg" class="slides-image related-itemImage"> ХРАНИЛИЩЕ БЕСЦЕННЫХ РЕЛИКВИЙ</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/russkij-yazyk-kak-uchebnyj-predmet-v-srednej-shkole" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/358248/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/358248/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/358248/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/358248/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/358248/slide-0.jpg" class="slides-image related-itemImage"> Русский язык как учебный предмет в средней школе</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/prezentaciya-na-temu-sharl-perro" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/273181/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/273181/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/273181/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/273181/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/273181/slide-0.jpg" class="slides-image related-itemImage"> Презентация на тему Шарль Перро</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/biologicheskoe-deystvie-radioaktivnyh-izlucheniy-zaschita-ot-radiacii-" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/438575/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/438575/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/438575/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/438575/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/438575/slide-0.jpg" class="slides-image related-itemImage"> Биологическое действие радиоактивных излучений.Защита от радиации.</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/lektsiya-43-gipotireoz-4k" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/905919/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/905919/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/905919/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/905919/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/905919/slide-0.jpg" class="slides-image related-itemImage"> Лекция 43 Гипотиреоз 4к</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/sovremennye-problemy-nauki-i-obrazovaniya-12" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1047716/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1047716/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1047716/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1047716/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1047716/slide-0.jpg" class="slides-image related-itemImage"> Современные проблемы науки и образования</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/ot-chastnyx-investicij-k-goszakazam" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/409840/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/409840/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/409840/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/409840/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/409840/slide-0.jpg" class="slides-image related-itemImage"> От частных инвестиций к госзаказам</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/shum-zashhita-ot-shuma" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/395893/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/395893/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/395893/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/395893/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/395893/slide-0.jpg" class="slides-image related-itemImage"> Шум. Защита от шума.</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/tema--tekst-priznaki-teksta" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/467950/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/467950/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/467950/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/467950/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/467950/slide-0.jpg" class="slides-image related-itemImage"> Тема: « Текст. Признаки текста»</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/obyazatelnye-usloviya-pri-skanirovanii" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1119338/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1119338/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1119338/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1119338/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1119338/slide-0.jpg" class="slides-image related-itemImage"> Обязательные условия при сканировании</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/normativnaya-denezhnaya-otsenka-zemel-prirodnozapovednogo-ozdorovitelnogo" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/858845/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/858845/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/858845/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/858845/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/858845/slide-0.jpg" class="slides-image related-itemImage"> Нормативная денежная оценка земель природнозаповедного, оздоровительного, рекреационного и историкокультурного назначения</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/sessiya-strategicheskogo-planirovaniya-23012023" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1149375/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1149375/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1149375/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1149375/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1149375/slide-0.jpg" class="slides-image related-itemImage"> Сессия стратегического планирования</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/sikstinskaya-kapella-1" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/857439/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/857439/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/857439/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/857439/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/857439/slide-0.jpg" class="slides-image related-itemImage"> Сикстинская капелла</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/mezhdunarodnye-konflikty-1" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/323773/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/323773/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/323773/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/323773/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/323773/slide-0.jpg" class="slides-image related-itemImage"> Международные конфликты</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/mexanizirovannyj-kompleks-kontrolya-kachestva-ugolnoj-produkcii" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/405942/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/405942/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/405942/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/405942/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/405942/slide-0.jpg" class="slides-image related-itemImage"> МЕХАНИЗИРОВАННЫЙ КОМПЛЕКС КОНТРОЛЯ КАЧЕСТВА УГОЛЬНОЙ ПРОДУКЦИИ</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/-4208" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/463081/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/463081/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/463081/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/463081/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/463081/slide-0.jpg" class="slides-image related-itemImage"> Below The Line (BTL). Представление компании В НАСТОЯЩЕЕ ВРЕМЯ СУЩЕСТВУЕТ БОЛЬШОЕ КОЛИЧЕСТВО ФОРМАТОВ КОММУНИКАЦИИ С ПОТРЕБИТЕЛЕМ, ВЫБРАТ</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/urok-1-znakomstvo-s-graficheskim-modulem-i-procedurami--ustanavlivayushhimi-tekushhij-cvet-risunka--tip-zakraski-i-ee-cvet--risuyushhimi-prya" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/469126/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/469126/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/469126/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/469126/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/469126/slide-0.jpg" class="slides-image related-itemImage"> Урок 1 Знакомство с графическим модулем и процедурами, устанавливающими текущий цвет рисунка, тип закраски и ее цвет, рисующими пря</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/nadezhnaya-zashhita-organizmakozha" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/356768/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/356768/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/356768/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/356768/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/356768/slide-0.jpg" class="slides-image related-itemImage"> Надежная защита организма-кожа</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/chto-izuchaet-geografiya--prezentaciya-po-geografii" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/267708/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/267708/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/267708/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/267708/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/267708/slide-0.jpg" class="slides-image related-itemImage"> Презентация на тему Что изучает география</a></div><div class="related-item"><a href="/prezentacii-na-razlichnye-temy/k-80-letiyu-hanty-mansiyskogo-avtonomnogo-okruga---yugry" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/397702/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/397702/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/397702/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/397702/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/397702/slide-0.jpg" class="slides-image related-itemImage"> К 80-летию Ханты-Мансийского автономного округа - Югры</a></div><!--]--></div></div></div></div><!--]--><!--]--><!--]--></div></div></main><footer class="footer"><div class="layout"><div class="footer-text"><!--LiveInternet counter--><a href="https://www.liveinternet.ru/click" target="_blank"><img id="licnt7D89" width="88" height="31" style="border:0" title="LiveInternet: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAIBTAA7" alt="LiveInternet"/></a><script>(function(d,s){d.getElementById("licnt7D89").src= "https://counter.yadro.ru/hit?t12.1;r"+escape(d.referrer)+ ((typeof(s)=="undefined")?"":";s"+s.width+"*"+s.height+"*"+ (s.colorDepth?s.colorDepth:s.pixelDepth))+";u"+escape(d.URL)+ ";h"+escape(d.title.substring(0,150))+";"+Math.random()}) (document,screen)</script><!--/LiveInternet--></div><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-text"><a href="/page/pravoobladateliam">Для правообладателей</a></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,R,S,T,U){return {data:{meta:{result:{meta:{h1:l,main_text:b,main_title:m,main_description:n,main_keywords:o,main_image:b},app:{logo_image:p,logo_image_width:i,logo_image_height:q,logo_text:r,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:e,banner_1:b,banner_2:b,banner_3:b,banner_4:b,banner_5:b,banner_6:b,banner_7:b,banner_8:b,banner_9:b,banner_10:b,email:w,footer_before:x,footer:y,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:z,item_images:A,item_images_tag:B,item_words_h3:c,item_words_tag:C,item_words_1:h,routing:D,item_slide_skipping:E,item_download_timeout:F,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:j,header_bg:k,accent:G}},social:H}},item:{result:{id:384316,name:"Основы сайтостроения на языках HTML",category:I,count:J,jpg:"jpg\u002F384316",hits:190,download:a,h1:K,meta:{h1:K,title:"Основы сайтостроения на языках HTML презентация",description:"Основы сайтостроения на языках HTML презентация, доклад, проект, Разное ",keywords:"Основы сайтостроения на языках HTML, презентация, доклад, проект, скачать презентацию на тему, PowerPoint, скачати презентацію, фон, шаблон, урок, конспект, класс, школа, класс, Разное",download_link:b},text:"\u003Cp style=\"text-align: justify;\" \u002F\u003EПрезентация на тему Основы сайтостроения на языках HTML, из раздела: Разное.  Презентацию в формате PowerPoint (pptx) можно скачать внизу страницы, поделившись ссылкой в социальных сетях! Презентации взяты из открытого доступа или загружены их авторами, администрация сайта не отвечает за достоверность информации в них. Все права принадлежат авторам материалов: \u003Ca href=\"politika-zashchity-avtorskih-prav\"\u003EПолитика защиты авторских прав\u003C\u002Fa\u003E",seo_text:"\u003Cp\u003EСодержание:\u003Cbr\u003E\u003Cp\u003EПриветствую Вас на третьем занятии курса: «Основы сайтостроения на языках HTML и CSS». Сегодня мы продолжим знакомство с языком HTML и познакомимся с тегом отвечающим за создание абзацев и тегами отвечающими за создание заголовков . \u003Cbr\u003EНа прошлом уроке мы подробно рассмотрели создание каркаса страницы – последовательность основных тегов, которые должны присутствовать в каждом html-документе. Если Вы пропустили это занятие пожалуйста вернитесь к нему и обязательно изучите.\u003Cbr\u003E\u003Cp\u003EВведение\u003Cbr\u003EСоздание абзацев\u003Cbr\u003EСоздание заголовков\u003Cbr\u003EПодведение итогов\u003Cbr\u003E\u003Cp\u003E\u003Cbr\u003E \u003Cp\u003EВведение\u003Cbr\u003E\u003Cp\u003E\u003Cbr\u003E\u003Cp\u003EДля изучения темы сегодняшнего урока нам понадобится статья. Чтобы самим не набирать текст, я предлагаю скопировать из Интернета статью «Обзор бесплатных антивирусных программ». Ниже дана ссылка. Нажмите на неё и Вы перейдёте на сайт, с которого мы будем брать информацию.\u003Cbr\u003E\u003Cp\u003Ehttp:\u002F\u002Ffantivirus.ru\u002Fpage\u002Fobzor-free-antivirus \u003Cbr\u003E\u003Cp\u003EИтак, статья у Вас открыта. Теперь нужно открыть документ, который мы создали на прошлом занятии index.html. Я просила Вас для нашего курса создать папку «Изучение HTML» и первый документ сохранить именно в этой папке. \u003Cbr\u003E1. Откройте папку «Изучение HTML»\u003Cbr\u003E",file:"Основы-сайтостроения-на-языках-HTML.pptx",texts:["\u003Cp\u003EОсновы сайтостроения на языках \r\nHTML и CSS\u003Cbr\u003E\u003Cp\u003EНачать обучение\u003Cbr\u003E\u003Cp\u003EКрасноярск - 2012\u003Cbr\u003E\u003Cp\u003EТема: Абзацы и заголовки\u003Cbr\u003E\u003Cp\u003EЗанятие №3\u003Cbr\u003E\u003Cp\u003E© Surgucheva Irina\u003Cbr\u003E\u003Cp\u003EКурс ведёт :\u003Cbr\u003E Сургучёва \u003Cbr\u003EИрина Николаевна\u003Cbr\u003E\u003Cp\u003EДля связи:\u003Cbr\u003EE-mail: lara1233@yandex.ru\u003Cbr\u003ESkype: lovez_snov_irena\u003Cbr\u003E","\u003Cp\u003EСодержание:\u003Cbr\u003E\u003Cp\u003EПриветствую Вас на третьем занятии курса: «Основы сайтостроения на языках HTML и CSS». Сегодня мы продолжим знакомство с языком HTML и познакомимся с тегом отвечающим за создание абзацев и тегами отвечающими за создание заголовков . \u003Cbr\u003EНа прошлом уроке мы подробно рассмотрели создание каркаса страницы – последовательность основных тегов, которые должны присутствовать в каждом html-документе. Если Вы пропустили это занятие пожалуйста вернитесь к нему и обязательно изучите.\u003Cbr\u003E\u003Cp\u003EВведение\u003Cbr\u003EСоздание абзацев\u003Cbr\u003EСоздание заголовков\u003Cbr\u003EПодведение итогов\u003Cbr\u003E","\u003Cp\u003EВведение\u003Cbr\u003E\u003Cp\u003EДля изучения темы сегодняшнего урока нам понадобится статья. Чтобы самим не набирать текст, я предлагаю скопировать из Интернета статью «Обзор бесплатных антивирусных программ». Ниже дана ссылка. Нажмите на неё и Вы перейдёте на сайт, с которого мы будем брать информацию.\u003Cbr\u003E\u003Cp\u003Ehttp:\u002F\u002Ffantivirus.ru\u002Fpage\u002Fobzor-free-antivirus \u003Cbr\u003E\u003Cp\u003EИтак, статья у Вас открыта. Теперь нужно открыть документ, который мы создали на прошлом занятии index.html. Я просила Вас для нашего курса создать папку «Изучение HTML» и первый документ сохранить именно в этой папке. \u003Cbr\u003E1. Откройте папку «Изучение HTML»\u003Cbr\u003E","\u003Cp\u003EСоздание абзацев\u003Cbr\u003E\u003Cp\u003E2. Для того чтобы открыть созданный нами документ index.html не в окне браузера а в программе Notepad++ нужно правой кнопкой мыши щёлкнуть по документу и в появившемся меню выбрать пункт Edit with Notepad++ (редактировать с помощью Notepad++)\u003Cbr\u003E\u003Cp\u003EРезультат – откроется созданный нами на прошлом занятии документ\u003Cbr\u003E","\u003Cp\u003EСоздание абзацев\u003Cbr\u003E\u003Cp\u003E3. Давайте внесём некоторые изменения: \u003Cbr\u003E- поменяем название заголовка web-страницы, как Вы помните за это отвечает тег \u003Ctitle\u003E. Удалите название Первый урок и напишите: Обзор бесплатных антивирусов.\u003Cbr\u003E - удалите текст, который находится между тегами \u003Cbody\u003E\u003C\u002Fbody\u003E, теперь он нам не нужен и на его место встанет статья, которую мы скопируем из Интернета.\u003Cbr\u003E- сохраним документ.\u003Cbr\u003E\u003Cp\u003EСохранение документа:\u003Cbr\u003E\u003Cp\u003E2 способ: нажать дискетку \u003Cbr\u003E\u003Cp\u003E1 способ: Файл ? Сохранить\u003Cbr\u003E\u003Cp\u003E3 способ: нажать по другой дискетке\u003Cbr\u003E\u003Cp\u003E4 способ: сочетание горячих клавиш\u003Cbr\u003E\u003Cp\u003EИзменить название\u003Cbr\u003E\u003Cp\u003EУдалить текст\u003Cbr\u003E\u003Cp\u003EЗапомните!!!\u003Cbr\u003E","\u003Cp\u003EСоздание абзацев\u003Cbr\u003E\u003Cp\u003EПосле изменения у Вас должен получиться вот такой документ:\u003Cbr\u003E","\u003Cp\u003E4. Откройте сайт где располагается статья и давайте скопируем первый блок текста. Почему не весь текст, спросите Вы? Потому, что далее идёт блок с картинками, а он нам не нужен, поэтому мы выделяем: первый заголовок и первый абзац текста.\u003Cbr\u003E\u003Cp\u003EКопирование:\u003Cbr\u003E\u003Cp\u003E1 способ:\u003Cbr\u003Eвыделить текст ? правой кнопкой мыши по выделенному тексту ? копировать\u003Cbr\u003E2 способ: \u003Cbr\u003Eвыделить текст ? нажать на клавиатуре сочетание горячих клавиш: Ctrl + C\u003Cbr\u003E\u003Cp\u003EСоздание абзацев\u003Cbr\u003E","\u003Cp\u003E5. Перейдем в программу Notepad++ в наш документ index.html и между тегами \u003Cbody\u003E\u003C\u002Fbody\u003E вставим текст, который мы только что скопировали.\u003Cbr\u003E6. Сохраните наш документ, используя сочетание горячих клавиш CTRL + S\u003Cbr\u003E7. Нажмите Запуск ?Launch in IE (просмотреть в Internet Explorer)\u003Cbr\u003E\u003Cp\u003EВставка скопированного:\u003Cbr\u003E\u003Cp\u003E1 способ:\u003Cbr\u003Eустановить курсор в нужное место ? правой кнопкой мыши ? вставить\u003Cbr\u003E2 способ: \u003Cbr\u003Eустановить курсор в нужное место ? нажать на клавиатуре сочетание горячих клавиш: Ctrl + V\u003Cbr\u003E\u003Cp\u003EСоздание абзацев\u003Cbr\u003E","\u003Cp\u003EСоздание абзацев\u003Cbr\u003E\u003Cp\u003EБраузер должен показать следующее:\u003Cbr\u003E\u003Cp\u003EКак Вы заметили, все настройки текста, которые были в статье исчезли. А именно шрифт изменился, заголовок не выделился. Почему так произошло? Давайте это разберём. Перейдите сейчас в программу Notepad++ к нашему документу, как Вы видите заголовок у нас отделён (хотя браузер этого не показывает) от основного текста, а весь последующий абзац расположен на одной строке ниже. Так как мы сейчас уже практически подошли к изучению новых тегов, такое расположение текста нам будет крайне неудобно, так как для написания конечных тегов нам придётся постоянно перемещаться по документу в конец текстового абзаца. Для удобства предлагаю разделить текст, который вставился в одну строку, при помощи клавиши ENTER. Сделать так, чтоб его было видно весь без пролистывания.\u003Cbr\u003E\u003Cp\u003Eпосмотреть как это сделать\u003Cbr\u003E","\u003Cp\u003EРезультат:\u003Cbr\u003E\u003Cp\u003Eбыла нажата клавиша ENTER\u003Cbr\u003E\u003Cp\u003Eэто мы сделали для того, чтобы текст не был в одну строку и имел более компактный вид\u003Cbr\u003E\u003Cp\u003EСохраните используя комбинацию горячих клавиш: Ctrl+S. Просмотрите что получилось.\u003Cbr\u003E\u003Cp\u003EСоздание абзацев\u003Cbr\u003E","\u003Cp\u003EКак видите ничего у нас не изменилось. Возвращаемся к нашему вопросу. Почему настройки произведённые в программе Notepad++ - отступы, дополнительные пробелы, переносы не отображаются браузером? А дело вот в чём, браузер воспринимает только команды – теги. Команд на разделение текста и переносы ему не было, поэтому он вывел нам весь текст одни сплошным блоком. Как же отредактировать наш текст, чтобы у нас отделились заголовки и абзацы?\u003Cbr\u003EИ вот здесь нам на помощь приходит новый тег. \u003Cbr\u003E\u003Cp\u003EРезультат:\u003Cbr\u003E\u003Cp\u003EОписание\u003Cbr\u003EТег \u003Cp\u003E определяет текстовый абзац. Тег \u003Cp\u003E является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.\u003Cbr\u003EСинтаксис\u003Cbr\u003E\u003Cp\u003EТекст\u003C\u002Fp\u003E \u003Cbr\u003E\u003Cp\u003EСоздание абзацев\u003Cbr\u003E","\u003Cp\u003EСоздание абзацев\u003Cbr\u003E\u003Cp\u003E8. Давайте попробуем вставить тег \u003Cp\u003E в наш документ. И для начала отделим заголовок от текста. Для этого откроем тег \u003Cp\u003E перед началом заголовка и закроем его в конце заголовка \u003C\u002Fp\u003E. На скриншоте расположенным ниже это хорошо видно. Сохраните используя горячие клавиши и просмотрите результат использования нашего тега.\u003Cbr\u003E\u003Cp\u003Eрезультат использования тега абзаца ","\u003Cp\u003EСоздание абзацев\u003Cbr\u003E\u003Cp\u003E9. Как Вы увидели тег \u003Cp\u003E сработал и заголовок у нас отделился от основного текста. Теперь давайте вернёмся с Вами на сайт, где расположена статья и скопируем весь оставшийся текст.\u003Cbr\u003E10. Произведите выделение как показана на скриншотах ниже от AVG Antivirus Free Edition до дополнительные программы их включать в выделение уже не надо.\u003Cbr\u003E\u003Cp\u003E11. Скопируйте выделение используя горячие клавиши (как копировать было описано выше).\u003Cbr\u003E12. Перейдите в программу Notepad++ . Установите курсор в конце последнего предложения уже имеющегося у нас текста и нажмите Enter - чтобы создать новую пустую строку. Вставьте скопированный текст в эту строку (как вставлять скопированные данные было описано выше).\u003Cbr\u003E","\u003Cp\u003EСоздание абзацев\u003Cbr\u003E\u003Cp\u003EРезультат:\u003Cbr\u003E\u003Cp\u003Eкак вы видите текст у нас имеет отступы, давайте сохраним и посмотрим,\u003Cbr\u003Eчто нам покажет браузер.\u003Cbr\u003E\u003Cp\u003EБраузер вывел весь текст одним сплошным блоком и я уже рассказывала Вам, почему так происходит.\u003Cbr\u003E","\u003Cp\u003EСоздание абзацев\u003Cbr\u003E\u003Cp\u003E13. Давайте разделим текст на абзацы используя новый тег \u003Cp\u003E. Отделите все заголовки, текстовые абзацы и тексты списков (в данном случае, если вы посмотрите на сайте есть маркированные списки) тегами абзацев. И все длинные абзацы, которые уходят за границу видимости перенесите, таким образом, чтоб весь текст помещался в зону видимости без прокрутки по горизонтали.\u003Cbr\u003E\u003Cp\u003EЗаголовки отделить тегом \u003Cp\u003EТекстовые абзацы заключить в тег \u003Cp\u003E и перенести текст таким образом, чтоб он был в поле видимости, без прокрутки по горизонтали.\u003Cbr\u003E\u003Cp\u003Eверно\u003Cbr\u003E\u003Cp\u003Eне верно\u003Cbr\u003E\u003Cp\u003Eпосмотреть что получилось\u003Cbr\u003E","\u003Cp\u003EСоздание абзацев\u003Cbr\u003E\u003Cp\u003EРезультат:\u003Cbr\u003E\u003Cp\u003EДля того, чтобы каждый раз в программе Notepad++ не нажимать ЗАПУСК. После сохранения документа перейдите в открытый браузер с последним вариантом вашей работы и нажмите на указанный стрелочкой значок – ОБНОВИТЬ. Браузер обновит и выдаст новую сохранённую страницу.\u003Cbr\u003E\u003Cp\u003EЗадание: расставить абзацы для всего текста самостоятельно. Не забудьте, про списки, так как эту тему мы еще не изучали, то заключите все элементы списков (текст) тоже в тег абзаца.\u003Cbr\u003E","\u003Cp\u003EИтак, надеюсь Вы правильно проставили все абзацы. Перейдите на сайт, где находится статья и посмотрите у статьи имеются заголовки, а в нашем документе заголовки выглядят как простой текст, единственное, что мы смогли сделать это отделить их от основного текста. Теперь пора нам научиться делать красивые и правильно расставленные (по значимости) заголовки. И здесь нам на помощь приходят новые теги.\u003Cbr\u003E\u003Cp\u003EСоздание заголовков\u003Cbr\u003E\u003Cp\u003EОписание\u003Cbr\u003EHTML предлагает шесть заголовков разного уровня, которые показывают относительную важность текста, расположенной после заголовка. Так, тег \u003Ch1\u003E представляет собой наиболее важный заголовок первого уровня, а тег \u003Ch6\u003E служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги \u003Ch1\u003E,...,\u003Ch6\u003E относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.\u003Cbr\u003EСинтаксис (тег парный нужно закрывать)\u003Cbr\u003E\u003Ch1\u003EЗаголовок первого уровня\u003C\u002Fh1\u003E \u003Cbr\u003E\u003Ch2\u003EЗаголовок второго уровня\u003C\u002Fh2\u003E \u003Cbr\u003E\u003Ch3\u003EЗаголовок третьего уровня\u003C\u002Fh3\u003E \u003Cbr\u003E\u003Ch4\u003EЗаголовок четвёртого уровня\u003C\u002Fh4\u003E \u003Cbr\u003E\u003Ch5\u003EЗаголовок пятого уровня\u003C\u002Fh5\u003E \u003Cbr\u003E\u003Ch6\u003EЗаголовок шестого уровня\u003C\u002Fh6\u003E \u003Cbr\u003E\u003Cp\u003E14. Давайте сейчас наш самый первый заголовок, заключим в тег \u003Ch1\u003E\u003C\u002Fh1\u003E, потому что это название всей статьи и он получается самый главный. Вот так это должно выглядеть у Вас: \u003Ch1\u003EОбзор бесплатных антивирусов\u003C\u002Fh1\u003E Тег \u003Cp\u003E мы убираем, потому что теги от \u003Ch1\u003E до \u003Ch6\u003E являются блочными элементами и когда мы их устанавливаем до и после заголовка добавляется пустое пространство и автоматически заголовок отделяется от основного текста.\u003Cbr\u003E","\u003Cp\u003E15. Сохраните и посмотрите, что получилось. Наш заголовок стал жирного начертания и размер шрифта увеличился.\u003Cbr\u003E16. Давайте подзаголовки – названия антивирусных программ, выделим, но не забываем о том, что главный заголовок используется на странице один раз. Дальше мы должны использовать теги заголовков меньшего уровня. Для этого воспользуемся тегом \u003Ch2\u003E\u003C\u002Fh2\u003E\u003Cbr\u003E\u003Cp\u003EСоздание заголовков\u003Cbr\u003E","\u003Cp\u003EСоздание заголовков\u003Cbr\u003E\u003Cp\u003E17. Как Вы видите подзаголовок изменился – стал жирного начертания и размер шрифта увеличился. Но заголовок 2-го уровня как Вы видите отличается от главного заголовка первого уровня, по размеру он меньше.\u003Cbr\u003E\u003Cp\u003EЗадание: заключить все названия антивирусных программ (заголовки) в тег \u003Ch2\u003E\u003C\u002Fh2\u003E. Подобрать для заголовков: (Возможности, недостатки антивирусных программ) свой тег заголовка. Например: \u003Ch4\u003EГлавные возможности программы:\u003C\u002Fh4\u003E\u003Cbr\u003E","\u003Cp\u003EИтак, сегодня Вы познакомились: с тегом отвечающим за создание абзаца и с тегами отвечающими за создание заголовков разного уровня. Научились использовать горячие клавиши для сохранения документа, а также для копирования и вставки.\u003Cbr\u003E\u003Cp\u003EПодведём итог:\u003Cbr\u003E\u003Cp\u003EЭто всё, жду Вас в следующем уроке, где мы продолжим изучение языка HTML – тема «Списки»\u003Cbr\u003E\u003Cp\u003EЛабораторная работа №1\u003Cbr\u003EОтредактируйте статью (расставьте все абзацы и сделайте заголовки) и пришлите её мне через сайт Виртуальной школы. Для этого Вам нужно будет сохранить отредактированный файл index.html, заархивировать его программой WinRar и через свой ученический аккаунт отправить мне эту работу на оценку.\u003Cbr\u003E"],href:"\u002Fprezentacii-na-razlichnye-temy\u002Fosnovy-sajtostroeniya-na-yazykax-html",href_category:"\u002Fprezentacii-na-razlichnye-temy",date:1613117824,related:[{id:1009720,name:"Новый год. Ассортимент. Подарки и украшения",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fnovyy-god-assortiment-podarki-i-ukrasheniya",jpg:"jpg\u002F1009720"},{id:889111,name:"Вернисаж военной книги - Подвиг твой бессмертен!",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fvernisazh-voennoy-knigi-podvig-tvoy-bessmerten",jpg:"jpg\u002F889111"},{id:397974,name:"Иоганн Вольфганг фон Гёте",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fiogann-volfgang-fon-gyote",jpg:"jpg\u002F397974"},{id:361218,name:"Свободное падение тел (9 КЛАСС)",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fsvobodnoe-padenie-tel-9-klass",jpg:"jpg\u002F361218"},{id:1113412,name:"Экологическое право",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fekologicheskoe-pravo-72",jpg:"jpg\u002F1113412"},{id:1095908,name:"Языковая школа Night over Korea. Бизнес-план",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fyazykovaya-shkola-night-over-korea-biznes",jpg:"jpg\u002F1095908"},{id:342441,name:"Климат Саратовской области",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fklimat-saratovskoj-oblasti",jpg:"jpg\u002F342441"},{id:408526,name:"ХРАНИЛИЩЕ БЕСЦЕННЫХ РЕЛИКВИЙ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fhranilische-bescennyh-relikviy",jpg:"jpg\u002F408526"},{id:358248,name:"Русский язык как учебный предмет в средней школе",href:"\u002Fprezentacii-na-razlichnye-temy\u002Frusskij-yazyk-kak-uchebnyj-predmet-v-srednej-shkole",jpg:"jpg\u002F358248"},{id:273181,name:"Презентация на тему Шарль Перро",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-sharl-perro",jpg:"jpg\u002F273181"},{id:438575,name:"Биологическое действие радиоактивных излучений.Защита от радиации.",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fbiologicheskoe-deystvie-radioaktivnyh-izlucheniy-zaschita-ot-radiacii-",jpg:"jpg\u002F438575"},{id:905919,name:"Лекция 43 Гипотиреоз 4к",href:"\u002Fprezentacii-na-razlichnye-temy\u002Flektsiya-43-gipotireoz-4k",jpg:"jpg\u002F905919"},{id:1047716,name:"Современные проблемы науки и образования",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fsovremennye-problemy-nauki-i-obrazovaniya-12",jpg:"jpg\u002F1047716"},{id:409840,name:"От частных инвестиций к госзаказам",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fot-chastnyx-investicij-k-goszakazam",jpg:"jpg\u002F409840"},{id:395893,name:"Шум. Защита от шума.",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fshum-zashhita-ot-shuma",jpg:"jpg\u002F395893"},{id:467950,name:"Тема: « Текст. Признаки текста»",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ftema--tekst-priznaki-teksta",jpg:"jpg\u002F467950"},{id:1119338,name:"Обязательные условия при сканировании",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fobyazatelnye-usloviya-pri-skanirovanii",jpg:"jpg\u002F1119338"},{id:858845,name:"Нормативная денежная оценка земель природнозаповедного, оздоровительного, рекреационного и историкокультурного назначения",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fnormativnaya-denezhnaya-otsenka-zemel-prirodnozapovednogo-ozdorovitelnogo",jpg:"jpg\u002F858845"},{id:1149375,name:"Сессия стратегического планирования",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fsessiya-strategicheskogo-planirovaniya-23012023",jpg:"jpg\u002F1149375"},{id:857439,name:"Сикстинская капелла",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fsikstinskaya-kapella-1",jpg:"jpg\u002F857439"},{id:323773,name:"Международные конфликты",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmezhdunarodnye-konflikty-1",jpg:"jpg\u002F323773"},{id:405942,name:"МЕХАНИЗИРОВАННЫЙ КОМПЛЕКС КОНТРОЛЯ КАЧЕСТВА УГОЛЬНОЙ ПРОДУКЦИИ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmexanizirovannyj-kompleks-kontrolya-kachestva-ugolnoj-produkcii",jpg:"jpg\u002F405942"},{id:463081,name:"Below The Line (BTL). Представление компании В НАСТОЯЩЕЕ ВРЕМЯ СУЩЕСТВУЕТ БОЛЬШОЕ КОЛИЧЕСТВО ФОРМАТОВ КОММУНИКАЦИИ С ПОТРЕБИТЕЛЕМ, ВЫБРАТ",href:"\u002Fprezentacii-na-razlichnye-temy\u002F-4208",jpg:"jpg\u002F463081"},{id:469126,name:"Урок 1 Знакомство с графическим модулем и процедурами, устанавливающими текущий цвет рисунка, тип закраски и ее цвет, рисующими пря",href:"\u002Fprezentacii-na-razlichnye-temy\u002Furok-1-znakomstvo-s-graficheskim-modulem-i-procedurami--ustanavlivayushhimi-tekushhij-cvet-risunka--tip-zakraski-i-ee-cvet--risuyushhimi-prya",jpg:"jpg\u002F469126"},{id:356768,name:"Надежная защита организма-кожа",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fnadezhnaya-zashhita-organizmakozha",jpg:"jpg\u002F356768"},{id:267708,name:"Презентация на тему Что изучает география",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fchto-izuchaet-geografiya--prezentaciya-po-geografii",jpg:"jpg\u002F267708"},{id:397702,name:"К 80-летию Ханты-Мансийского автономного округа - Югры",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fk-80-letiyu-hanty-mansiyskogo-avtonomnogo-okruga---yugry",jpg:"jpg\u002F397702"}],navigation:{next:"\u002Fprezentacii-na-razlichnye-temy\u002Fzanyatie-reformaciya-absolyutizm",next_name:"Занятие. Реформация. Абсолютизм",prev:"\u002Fprezentacii-na-razlichnye-temy\u002Fzakon-soxraneniya-energii-i-impulsa",prev_name:"Закон сохранения энергии и импульса"}}},categories:{result:[{id:L,ordering:a,name:"Алгебра",pseudoname:"prezentacii-po-algebre"},{id:2,ordering:a,name:"Английский язык",pseudoname:"prezentacii-po-angliyskomu-yaziku"},{id:3,ordering:a,name:"Астрономия",pseudoname:"prezentacii-po-astronomii"},{id:4,ordering:a,name:"Биология",pseudoname:"prezentacii-po-biologii"},{id:5,ordering:a,name:"География",pseudoname:"prezentacii-po-geografii"},{id:6,ordering:a,name:"Геометрия",pseudoname:"prezentacii-po-geometrii"},{id:7,ordering:a,name:"Информатика",pseudoname:"prezentacii-po-informatike"},{id:8,ordering:a,name:"История",pseudoname:"prezentacii-po-istorii"},{id:9,ordering:a,name:"Литература",pseudoname:"prezentacii-po-literature"},{id:10,ordering:a,name:"Математика",pseudoname:"prezentacii-po-matematike"},{id:11,ordering:a,name:"Медицина",pseudoname:"prezentacii-po-medicine"},{id:h,ordering:a,name:"Музыка",pseudoname:"prezentacii-po-musice"},{id:13,ordering:a,name:"МХК",pseudoname:"prezentacii-po-mkhk"},{id:14,ordering:a,name:"ОБЖ",pseudoname:"prezentacii-po-obzh"},{id:15,ordering:a,name:"Обществознание",pseudoname:"prezentacii-po-obshhestvoznaniju"},{id:17,ordering:a,name:"Педагогика",pseudoname:"prezentacii-po-pedagogike"},{id:18,ordering:a,name:"Немецкий язык",pseudoname:"prezentacii-po-nemezkomy-yaziku"},{id:J,ordering:a,name:"Русский язык",pseudoname:"prezentacii-po-russkomu-yazyku"},{id:21,ordering:a,name:"Технология",pseudoname:"prezentacii-po-tehnologii"},{id:22,ordering:a,name:"Физика",pseudoname:"prezentacii-po-fizike"},{id:23,ordering:a,name:"Философия",pseudoname:"prezentacii-po-filosofii"},{id:24,ordering:a,name:"Химия",pseudoname:"prezentacii-po-himii"},{id:25,ordering:a,name:"Экология",pseudoname:"prezentacii-po-ehkologii"},{id:26,ordering:a,name:"Экономика",pseudoname:"prezentacii-po-ekonomike"},{id:27,ordering:a,name:"Детские презентации",pseudoname:"detskie-prezentacii"},{id:i,ordering:a,name:"Шаблоны презентаций",pseudoname:"shablony-dlya-prezentacii"},{id:29,ordering:a,name:I,pseudoname:"prezentacii-na-razlichnye-temy"},{id:48,ordering:a,name:"Культурология",pseudoname:"kulturologiya"},{id:16,ordering:L,name:"Окружающий мир",pseudoname:"prezentacii-po-okruzhayushhemu-miru"}]}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:M,SITE_HOST:"slaidy.com",SITE_LANG:N,API_BASE_URL:"https:\u002F\u002Fslaidy.com\u002Fapi\u002F",pwaManifest:{name:M,short_name:b,description:b,lang:N,start_url:"\u002F?standalone=true",display:"standalone",background_color:k,theme_color:j,icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.d7f48e96.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.d7f48e96.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.d7f48e96.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.d7f48e96.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.d7f48e96.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.d7f48e96.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.d7f48e96.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.d7f48e96.png",type:d,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.d7f48e96.png",type:d,sizes:S,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.d7f48e96.png",type:d,sizes:S,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.d7f48e96.png",type:d,sizes:T,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.d7f48e96.png",type:d,sizes:T,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.d7f48e96.png",type:d,sizes:U,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.d7f48e96.png",type:d,sizes:U,purpose:g}]},yandexMetrika:{id:"79446466",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:a,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:b}},pinia:{app:{meta:{h1:l,main_text:b,main_title:m,main_description:n,main_keywords:o,main_image:b},app:{logo_image:p,logo_image_width:i,logo_image_height:q,logo_text:r,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:e,banner_1:b,banner_2:b,banner_3:b,banner_4:b,banner_5:b,banner_6:b,banner_7:b,banner_8:b,banner_9:b,banner_10:b,email:w,footer_before:x,footer:y,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:z,item_images:A,item_images_tag:B,item_words_h3:c,item_words_tag:C,item_words_1:h,routing:D,item_slide_skipping:E,item_download_timeout:F,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:j,header_bg:k,accent:G}},social:H,token:b}}}}(0,"",false,"image\u002Fpng",true,"any","maskable",12,28,"#000000","#ffffff","Презентации, проекты, доклады в PowerPoint на любую тему","Презентации и проекты в PowerPoint","Презентации на различные темы для детей, школьников, родителей, студентов, учителей и преподавателей.","Презентация, презентация на тему, скачать презентацию, урок презентация, 1 2 3 4 5 6 7 8 9 10 11 класс","images\u002Fdata\u002Flogo.jpg",32,"Slaidy.com",720,480,"6LdhFOUnAAAAAIaOUjFtosEpzs6Ny643k1QKXXvv","3190226","slaidy.com@ya.ru","\u003C!--LiveInternet counter--\u003E\u003Ca href=\"https:\u002F\u002Fwww.liveinternet.ru\u002Fclick\"\r\ntarget=\"_blank\"\u003E\u003Cimg id=\"licnt7D89\" width=\"88\" height=\"31\" style=\"border:0\" \r\ntitle=\"LiveInternet: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня\"\r\nsrc=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAEALAAAAAABAAEAAAIBTAA7\"\r\nalt=\"LiveInternet\"\u002F\u003E\u003C\u002Fa\u003E\u003Cscript\u003E(function(d,s){d.getElementById(\"licnt7D89\").src=\r\n\"https:\u002F\u002Fcounter.yadro.ru\u002Fhit?t12.1;r\"+escape(d.referrer)+\r\n((typeof(s)==\"undefined\")?\"\":\";s\"+s.width+\"*\"+s.height+\"*\"+\r\n(s.colorDepth?s.colorDepth:s.pixelDepth))+\";u\"+escape(d.URL)+\r\n\";h\"+escape(d.title.substring(0,150))+\";\"+Math.random()})\r\n(document,screen)\u003C\u002Fscript\u003E\u003C!--\u002FLiveInternet--\u003E","\u003Ca href=\"\u002Fpage\u002Fpravoobladateliam\"\u003EДля правообладателей\u003C\u002Fa\u003E","h3a","images_before","none","h3","category","both",77,"#ff0d00","\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","Разное",20,"Основы сайтостроения на языках HTML ",1,"Slaidy","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))</script><script type="module" src="/_nuxt/entry.e6b1bc94.js" crossorigin></script></body> </html>