Разное

Html5 создание сайта: Как создать сайт HTML — верстка пошагово, курс основ HTML5 и CSS3 на itProger

Содержание

Создание макета страницы и верстка

Как правило, веб-страница состоит из множества различных элементов, которые могут иметь сложную структуру. Поэтому при создании веб-страницы возникает необходимость нужным образом позиционировать эти элементы, стилизовать их так, чтобы они располагались на странице нужным образом. То есть возникает вопрос создания макета страницы, ее верстки.

Существуют различные способы, стратегии и виды верстки. Изначально распространенной была верстка на основе таблиц. Так как таблицы позволяет при необходимости очень легко и просто разделить вcе пространство веб-страницы на строки и столбцы. Строками и столбцами довольно легко управлять, в них легко позиционировать любое содержимое. Именно это и определило популярность табличной верстки.

Однако табличная верстка создает не самые гибкие по дизайну страницы, что является особенно актуальным аспектом в мире, где нет одного единственного разрешения экрана, за то есть большие экраны на телевизорах, малые экраны на планшетах и фаблетах, очень маленькие экраны на смартфонах и т.

д. Все это многообразие экранов табличная верстка оказалась не в состоянии удовлетворить. Поэтому постепенно ей на смену пришла блочная верстка. Блочная верстка — это отосительно условное название способов и приемов верстки, когда в большинстве веб-страниц для разметки используется CSS-свойство float, а основным строительным элементов веб-страниц является элемент <div>, то есть по сути блок. Используя свойство float и элементы div или другие элементы, можно создать структуру страницы из нескольких столбцов, как при табличной верстке, которая будет значительно гибче.

Ранее в одной из прошлых тем рассматривалось действие свойства float. Теперь используем его для создания двухколоночной веб-страницы. Допустим, вверху и внизу у нас будут стандартно шапка и футер, а в центре — две колонки: колонка с меню или сайдбар и колонка с основным содержимым.

В начале определим все блоки. При работе с элементами, которые используют обтекание и свойство float, важен их порядок. Так, код плавающего элемента, у которого устанавливается свойство float, должен идти перед элементом, который обтекает плавающий элемент. То есть блок сайдбара будет идти до блока основного содержимого:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная верстка в HTML5</title>
        <style>
			div{
				margin: 10px;
				border: 1px solid black;
				font-size: 20px;
				height: 80px;
			}
            #header{ 
				background-color: #ccc;
			}
			#sidebar{
				background-color: #ddd;
			}
			#main{
				background-color: #eee;
				height: 200px;
			}
			#footer{ 
				background-color: #ccc;
			}
        </style>
    </head>
    <body>
		<div>Шапка сайта</div>
		<div>Сайбар</div>
		<div>Основное содержимое</div>
		<div>Футер</div>
    </body>
</html>

То есть пока получается примерно следующая страница:

Высота, граница и отступы блоков в данном случае добавлены только для красоты, чтобы идентифицировать пространство блока и отделять его от других.

Далее, чтобы переместить блок сайдбара влево по отношению к блоку основного содержимого и получить эффект обтекания, нам надо указать у блока сайдбара свойство float: left и предпочтительную ширину. Ширина может быть фиксированной, например, 150 px или 8 em. Либо также можно использовать проценты, например, 30% — 30% от ширины контейнера body. С одной стороны, блоками с фиксированной шириной легче управлять, но с другой процентные значения ширины позволяют создавать более гибкие, резиновые блоки, которые изменяют размеры при изменении размеров окна браузера.

Последним шагом является установка отступа блока с основным содержимым от блока сайдбара. Поскольку при обтекании обтекающий блок может обтекать плавающий элемент и справа и снизу, если плавающий элемент имеет меньшую высоту, то нам надо установить отступ, как минимум равный ширине плавающего элемента. Например, если ширина сайдбара равна 150px, то для блока основного содержимого можно задать отступ в 170px, что позволит создать пустое пространство между двумя блоками.

При этом не стоит у блока основного содержимого указывать явным образом ширину, так как браузеры расширяют его автоматически, чтобы он занимал все доступное место.

Итак, принимая во внимание все выше сказанное, изменим стили блоков сайдбара и основного содержимого следующим образом:


#sidebar{
	background-color: #ddd;
	float: left;
	width: 150px;
}
#main{
	background-color: #eee;
	height: 200px;
	margin-left: 170px; /* 150px (ширина сайдбара) + 10px + 10px (2 отступа) */
}

В итоге у нас получится сайдбар по левую сторону от основного блока:

Высота блоков в данном случае указана условно для большей наглядности, в реальности, как правило, высоту будет автоматически устанавливать браузер.

Создание правого сайдбара будет аналогично, только теперь нам надо установить у сайдбара значение float: right, а у блока основного содержимого — отступ справа:


#sidebar{
	background-color: #ddd;
	float: right;
	width: 150px;
}
#main{
	background-color: #eee;
	height: 200px;
	margin-right: 170px;
}

При этом разметка html остается такой же, блок сайдбара по прежнему должен предшествовать блоку основного содержимого.

НазадСодержаниеВперед

Сайты на HTML5

Сайты на HTML5 не работают на системах управления контентом, но их легко можно настроить и создать уникальный дизайн сайта для любого самого смелого бизнес проекта.

  1. Дизайн для бизнеса
  2. Раздел: Обзор HTML страниц
  3. Сайты HTML5

Разработка сайтов HTML5


Разработка сайтов на HTML5

Сайты на HTML5 благодаря таким современным технологиям как CSS3, JavaScript, Bootstrap, PHP, имеют красивый, живой веб дизайн и расширенный функционал.

Сайты HTML5 по категориям

Искусство и культура


  • Арт и фотография
  • Дизайн
  • Музыка

Спорт, природа, животные и путешествия

  • Спорт
  • Природа
  • Животные
  • Путешествия
  • Гостиницы

Мода, красота, праздник, подарки

  • Мода
  • Красота
  • Ювелирные изделия
  • Праздник, подарки, цветы

Дом и семья


  • Свадьба
  • Семья
  • Архитектура, антиквариат
  • Ландшафт, инструменты и оборудование
  • Интерьер и мебель

Игры и развлечения


  • Игры
  • Развлечения
  • Ночной клуб, табак

Еда и ресторан


  • Кафе и рестораны
  • Еда и напитки
  • Про пиво

Образование и книги


  • Книги
  • Образование
  • Наука

Общество, люди


  • Общество и культура
  • Медиа-сайт
  • Религия
  • Благотворительность
  • Знакомства
  • Персональные страницы

Бизнес


  • Бизнес
  • Безопасность
  • Юрист
  • Сельское хозяйство

Индустрия


  • Транспорт
  • Промышленность
  • Техническое обслуживание
  • Автомобили
  • Недвижимость

Электроника, компьютеры, интернет

  • Электроника, компьютеры
  • Хостинг
  • Интернет
  • Программное обеспечение
  • Коммуникации

Медицина и здоровье


  • Медицина и здоровье

Создание HTML5 сайта

Создание сайта-визитки, корпоративного сайта на HTML5, CSS3 с анимационными эффектами и Java скриптами.

Веб-дизайн HTML5 сайт

Как создать простую веб-страницу с помощью HTML5

Создание простой веб-страницы с помощью HTML 5

Чтобы начать работу с веб-дизайном и HTML5, лучше всего перейти к коду с простым дизайном и структурой веб-сайта. В этой статье будет представлен базовый код HTML5 и объяснено, как он работает. Мы также опишем каждый базовый тег и объясним, как вы можете загрузить новую HTML5-страницу на свой веб-сервер.

Откройте ваш любимый текстовый редактор

На рынке есть несколько текстовых редакторов. Например, Notepad++ — это текстовый редактор, который выделяет цветом синтаксис HTML. Dreamweaver также является популярным редактором, облегчающим работу с макетами. Notepad++ бесплатен, поэтому, вероятно, это лучший выбор для начала. Убедитесь, что у вас установлен синтаксис HTML, чтобы редактор знал, как работать с вашими тегами и правильно кодировать их цветом. Цветовое кодирование популярно в программировании, чтобы помочь вам быстрее прочитать содержимое. Например, зеленый текст во всем мире понимается как раздел комментариев. Для HTML-тегов используется коричневая цветовая кодировка, а имена свойств HTML — красные. Значения свойств выделены синим цветом.

Ваша первая веб-страница HTML5

Открыв редактор, вы можете скопировать и вставить следующий код HTML5 в новую HTML-страницу.



<голова>
<em> Название вашей веб-страницы </em>


Контент, который вы хотите показать пользователям.

Хотите узнать больше? Почему бы не пройти онлайн-курс «Изучение HTML — создание веб-страниц с помощью HTML5»?

Давайте разберем эту страницу построчно, чтобы вы могли понять, как работает HTML5. Приведенный выше код представляет собой базовую веб-страницу без излишеств, но ее структура важна, когда вы хотите создавать свои собственные страницы. Теги HTML, которые вы видите на странице выше, используются на каждой странице вашего сайта.

Первая строка кода — это DOCTYPE. Технически вы можете исключить этот тег, и браузер попытается расшифровать HTML-версию на странице. Однако лучше быть явным, чем полагаться на синтаксические анализаторы. Этот DOCTYPE специфичен для HTML5. Предыдущие версии HTML имеют другие теги DOCTYPE, поэтому вы можете использовать этот DOCTYPE, только если вы используете HTML5.

Следующий тег является открывающим тегом HTML. Вы заметите, что у каждого HTML-тега есть закрывающий тег. «/tagname» всегда является закрывающим тегом и должен иметь соответствующий открытый тег. Другими словами, «» является открывающим тегом HTML, и для соответствия ему должен быть закрывающий тег ««. Если у вас нет надлежащих открывающих и закрывающих тегов, ваши страницы могут неправильно отображаться в браузере вашего посетителя.

Перейдем к тегу . В теге head указываются несколько параметров. Вам не нужно ничего внутри тега head, и технически вы можете полностью исключить его из своих страниц. Однако тег head содержит заголовок, ссылки на стили и файлы CSS, а также любые внешние файлы JS, которые вы используете в своем коде. В этом примере тег head содержит только заголовок. Заголовок также является тегом, обозначаемым открывающим и закрывающим тегами и . Внутри открывающего и закрывающего тегов вы размещаете текст заголовка. Мы добавили «Заголовок вашей веб-страницы» в теги, и это контент, который отображается в браузере пользователя. У вас должен быть только один тег заголовка на ваших страницах. Наличие более одного тега является синтаксической ошибкой и может повлиять на то, как пользователь просматривает вашу страницу, а также сбить с толку поисковых роботов.

Последний тег в нашем примере — это тег . Открывающий и закрывающий теги body добавляют весь ваш контент. Изображения, текст, видео и аудио добавляются в теги body. В этом примере текст «Содержимое, которое вы хотите показать пользователям» отображается в браузере. В последующих главах вы узнаете, как стилизовать этот текст и добавить другие свойства на свои веб-страницы.

Основные текстовые элементы

Существует несколько текстовых тегов, которые можно использовать для стилизации содержимого. Вы можете выделить текст курсивом, полужирным шрифтом или подчеркнуть его. Вы также можете установить размеры текста, цвета и шрифт непосредственно в HTML или с помощью CSS. Правильный способ стилизовать текст — использовать CSS, но полезно знать, как редактировать стили текста с помощью HTML. Возможно, вам потребуется отредактировать чужой код, поэтому полезно понимать, как читать эти HTML-теги.

Одним из наиболее распространенных текстовых элементов является тег

или абзац. Тег абзаца позволяет вам разделять стили вашего контента. Например, вы можете выделить абзац жирным шрифтом, чтобы отделить его от другого контента на сайте. Вы можете сделать это с помощью тега (полужирный) или использовать тег абзаца с соответствующими стилями CSS, выделяющими содержимое жирным шрифтом. Используя тот же пример, что и выше, следующий код заключает текст в тег абзаца.



<голова>
<em> Название вашей веб-страницы </em>

<тело>

Контент, который вы хотите показать пользователям.



Еще одним преимуществом использования тега абзаца является то, что браузеры автоматически разделяют абзацы, как в обычном документе. Когда вы заключаете текст в абзацы, браузер устанавливает интервалы и возврат каретки в содержимом так же, как приложение для обработки Word. С помощью CSS вы можете изменить интервалы и форматирование.

Некоторые другие распространенные теги для текста — это теги , и . Вы также можете использовать тег вместо тега (жирный). Оба тега и указывают, что важный текст должен быть выделен жирным шрифтом. Тег выделяет текст курсивом. Вы можете вложить теги и для отображения полужирного текста курсивом. Следующий код дает вам пример вложенных тегов.



<голова>
</p> <h2><span class="ez-toc-section" id="_HTML_HTML_Website_Builder"> Конструктор HTML | HTML Website Builder </span></h2> <p> Создавайте HTML-сайты с лучшим бесплатным wysiwyg HTML конструктором сайтов и редактором страниц. Начните с одного из 7000+ бесплатных HTML-шаблонов. <br/> Подходит для мобильных устройств. Нет кодирования. Создать HTML-сайт. <br/> </p> <p data-readability-styled="true"> Загрузить сейчас </p> <h3><span class="ez-toc-section" id="_HTML"> Используйте конструктор HTML для создания веб-сайта без программирования </span></h3> <p> Простой HTML-редактор с функцией перетаскивания позволяет реализовать любые идеи для HTML-шаблонов. Используйте адаптивную галерею изображений, видеофоны, параллакс, меню-гамбургер, липкий заголовок и анимацию, чтобы оживить сайты. </p> <p data-readability-styled="true"> все функции </p> <p> Ваш браузер не поддерживает видео HTML5. </p> <h3><span class="ez-toc-section" id="i-13"> Что такое </span></h3> <br/> Веб-дизайн 3.0? </h3> <p> Узнайте, как создавать самые модные HTML-сайты в Интернете.<img loading='lazy' src='/800/600/http/cache3.youla.io/files/images/720_720_out/5c/81/5c8107e2f567953068382823.jpg' /> Нет необходимости нанимать профессиональных веб-дизайнеров с HTML-генератором Nicepage. </p> <p data-readability-styled="true"> Открой секрет </p> <h3><span class="ez-toc-section" id="_HTML-2"> Все, что вам нужно для создания сайтов с помощью генератора HTML </span></h3> <p> Наш конструктор HTML обеспечивает интеграцию с социальными сетями, Google Maps, Google Fonts, Icons, YouTube, контактными формами и многими другими встроенными мощными функциями. Используйте наш WYSIWYG-редактор и генератор кода, чтобы запускать веб-сайты и легко настраивать их с помощью визуального конструктора перетаскивания. </p> <h5><span class="ez-toc-section" id="1000"> 1000 из </span></h5> <br/> веб-шаблонов </h5> <p> Выберите из огромного разнообразия дизайнерских шаблонов. </p> <h5><span class="ez-toc-section" id="Easy_Drag-n-Drop"> Easy Drag-n-Drop </span></h5> <p> Настройте что угодно на своем веб-сайте простым перетаскиванием. </p> <h5><span class="ez-toc-section" id="i-14"> Без кода </span></h5> <p> Визуально добавляйте, редактируйте, перемещайте и изменяйте без кода! </p> <h5><span class="ez-toc-section" id="Mobile-Friendly"> Mobile-Friendly </span></h5> <p> Создавайте веб-сайты, которые отлично смотрятся на всех современных устройствах.<img loading='lazy' src='/800/600/http/siteler.ru/pics/521364.jpg' /> </p> <p data-readability-styled="true"> Посмотреть все характеристики </p> <p> Познакомьтесь с нашими лучшими многоцелевыми шаблонами, отобранными профессиональными дизайнерами. Все шаблоны страниц отлично смотрятся на всех современных устройствах. Выберите любой шаблон и настройте его с помощью мощного редактора веб-страниц. </p> <p data-readability-styled="true"> Получить шаблоны </p> <h3><span class="ez-toc-section" id="_HTML_Maker"> Идеальные результаты с помощью HTML Maker на любом устройстве </span></h3> <p> Веб-страницы абсолютно удобны для мобильных устройств, готовы к работе с сетчаткой и отлично выглядят на всех устройствах. Сгенерированные веб-сайты имеют версию, оптимизированную для мобильных устройств, которая прекрасно выглядит на небольших экранах. Вы можете легко настроить все представления рабочего стола, ноутбука и телефона по отдельности. </p> <p> Nicepage — обязательный инструмент для любого пользователя HTML. Он расширяет любой веб-сайт HTML, добавляя к нему дизайнерский штрих. Он прост в использовании и работает быстро.<img loading='lazy' src='/800/600/http/cdn.kwork.ru/pics/t3/27/5118581-1583587027.jpg' /> </p> <h5><span class="ez-toc-section" id="i-15"> Эрик Смит </span></h5> <p> Веб-разработчик и пользователь joomler </p> <h3><span class="ez-toc-section" id="i-16"> Больше довольных клиентов </span></h3> <p> Создавайте современные HTML-сайты и шаблоны, чтобы привлечь больше клиентов </p> <p> <h3><span class="ez-toc-section" id="_HTML-3"> Компании, которые используют наш конструктор HTML-сайтов: </span></h3> </p> <h3><span class="ez-toc-section" id="_HTML-4"> Бесплатный конструктор HTML </span></h3> <p> Загрузите лучший бесплатный конструктор HTML для Windows или Mac OS сегодня. Создавайте веб-сайты, удобные для мобильных устройств, которые отлично смотрятся на всех современных устройствах и во всех браузерах. Кроме того, настройте свои проекты с помощью мощного редактора перетаскивания без программирования. </p> <p data-readability-styled="true"> Загрузить сейчас </p> <h3><span class="ez-toc-section" id="_HTML-5"> Лучшие бесплатные HTML-шаблоны </span></h3> <p> Выберите из более чем 7000 HTML-шаблонов для бизнеса, медицины, портфолио, технологий, образования, путешествий и других популярных категорий. Все шаблоны, созданные с помощью HTML Designer, обновляются ежедневно и доступны бесплатно. </p> <p> Имя </p> <p> Спасибо! Ваше сообщение было отправлено.<img loading='lazy' src='/800/600/http/html6.com.ru/data/small/ro-1-low.jpg' /> </div><!-- .entry-content --> <div class="entry-tags"> </div> </article><!-- #post-## --> <nav class="navigation post-navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://toto-school.ru/raznoe-2/klassy-v-delfi-urok-59-klassy-delphi-chast-1-5.html" rel="prev">Классы в делфи: Урок 59 — Классы Delphi, (часть 1/5)</a></div><div class="nav-next"><a href="https://toto-school.ru/raznoe-2/novogodnyaya-semka-v-studii-studijnaya-fotografiya-urok-7-novogodnyaya-semka-v-studii.html" rel="next">Новогодняя съемка в студии: Студийная фотография • Урок №7. Новогодняя съемка в студии</a></div></div> </nav> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe-2/html5-sozdanie-sajta-kak-sozdat-sajt-html-verstka-poshagovo-kurs-osnov-html5-i-css3-na-itproger.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://toto-school.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p> <p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='32864' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- #comments --> </main><!-- #main --> <aside class="sidebar widget-area"> <aside id="secondary" class="widget-area" role="complementary"> <section id="search-2" class="widget widget_search"><form role="search" method="get" class="search-form" action="https://toto-school.ru/"> <label> <span class="screen-reader-text">Найти:</span> <input type="search" class="search-field" placeholder="Поиск…" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Поиск" /> </form></section><section id="custom_html-3" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- toto-school.ru Сайдбар --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1812626643144578" data-ad-slot="2146649320" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></section><section id="categories-2" class="widget widget_categories"><h2 class="widget-title">Рубрики</h2> <ul> <li class="cat-item cat-item-19"><a href="https://toto-school.ru/category/1s-2">1С</a> </li> <li class="cat-item cat-item-6"><a href="https://toto-school.ru/category/1s">1С Обучение</a> </li> <li class="cat-item cat-item-23"><a href="https://toto-school.ru/category/access-2">Access</a> </li> <li class="cat-item cat-item-18"><a href="https://toto-school.ru/category/adobe-2">Adobe</a> </li> <li class="cat-item cat-item-16"><a href="https://toto-school.ru/category/coreldraw-2">Coreldraw</a> </li> <li class="cat-item cat-item-17"><a href="https://toto-school.ru/category/delphi-2">Delphi</a> </li> <li class="cat-item cat-item-15"><a href="https://toto-school.ru/category/excel-2">Excel</a> </li> <li class="cat-item cat-item-21"><a href="https://toto-school.ru/category/mathcad-2">Mathcad</a> </li> <li class="cat-item cat-item-4"><a href="https://toto-school.ru/category/access">Microsoft Access</a> </li> <li class="cat-item cat-item-3"><a href="https://toto-school.ru/category/excel">Microsoft Excel</a> </li> <li class="cat-item cat-item-5"><a href="https://toto-school.ru/category/word">Microsoft Word</a> </li> <li class="cat-item cat-item-22"><a href="https://toto-school.ru/category/sql-2">Sql</a> </li> <li class="cat-item cat-item-20"><a href="https://toto-school.ru/category/word-2">Word</a> </li> <li class="cat-item cat-item-1"><a href="https://toto-school.ru/category/%d0%b1%d0%b5%d0%b7-%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b8">Без рубрики</a> </li> <li class="cat-item cat-item-11"><a href="https://toto-school.ru/category/delphi">Изучение Delphi</a> </li> <li class="cat-item cat-item-14"><a href="https://toto-school.ru/category/raznoe-2">Разное</a> </li> <li class="cat-item cat-item-2"><a href="https://toto-school.ru/category/raznoe">Советы и лайфхаки</a> </li> <li class="cat-item cat-item-9"><a href="https://toto-school.ru/category/adobe">Уроки по Adobe</a> </li> <li class="cat-item cat-item-7"><a href="https://toto-school.ru/category/coreldraw">Уроки по CorelDRAW</a> </li> <li class="cat-item cat-item-10"><a href="https://toto-school.ru/category/mathcad">Уроки по Mathcad</a> </li> <li class="cat-item cat-item-8"><a href="https://toto-school.ru/category/sql">Уроки по Sql</a> </li> <li class="cat-item cat-item-13"><a href="https://toto-school.ru/category/fotoshkola">Фотошкола</a> </li> </ul> </section><section id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script type="text/javascript">jQuery(document).ready(function($){$('.mylink').replaceWith(function(){return'<a href="'+$(this).attr('data-url')+'" title="'+$(this).attr('title')+'">'+$(this).html()+'</a>'})});new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script></div></section><section id="custom_html-4" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><!-- Yandex.RTB R-A-476727-5 --> <div id="yandex_rtb_R-A-476727-5"></div> <script type="text/javascript"> (function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-476727-5", renderTo: "yandex_rtb_R-A-476727-5", async: true }); }); t = d.getElementsByTagName("script")[0]; s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks"); </script></div></section></aside><!-- #secondary --> </aside><!-- #sidebar --> </div><!-- #primary --> </div><!-- #content --> <footer id="colophon" class="site-footer" role="contentinfo"> <div id="instagram-footer" class="instagram-footer"> </div> <div id="footer-social" class="container"> </div> <div class="site-info container">2019 © Все права защищены. <a href="/sitemap.xml">Карта сайта</a></div><!-- .site-info --> </footer><!-- #colophon --> </div><!-- #page --> <style type="text/css"> .pgntn-page-pagination { text-align: left !important; } .pgntn-page-pagination-block { width: 60% !important; padding: 0 0 0 0; } .pgntn-page-pagination a { color: #1e14ca !important; background-color: #ffffff !important; text-decoration: none !important; border: 1px solid #cccccc !important; } .pgntn-page-pagination a:hover { color: #000 !important; } .pgntn-page-pagination-intro, .pgntn-page-pagination .current { background-color: #efefef !important; color: #000 !important; border: 1px solid #cccccc !important; } .archive #nav-above, .archive #nav-below, .search #nav-above, .search #nav-below, .blog #nav-below, .blog #nav-above, .navigation.paging-navigation, .navigation.pagination, .pagination.paging-pagination, .pagination.pagination, .pagination.loop-pagination, .bicubic-nav-link, #page-nav, .camp-paging, #reposter_nav-pages, .unity-post-pagination, .wordpost_content .nav_post_link,.page-link, .page-links,#comments .navigation, #comment-nav-above, #comment-nav-below, #nav-single, .navigation.comment-navigation, comment-pagination { display: none !important; } .single-gallery .pagination.gllrpr_pagination { display: block !important; } </style> <link rel='stylesheet' id='pgntn_stylesheet-group-css' href='https://toto-school.ru/wp-content/plugins/bwp-minify/min/?f=wp-content/plugins/pagination/css/nav-style.css' type='text/css' media='all' /> <script type='text/javascript' id='q2w3_fixed_widget-js-extra'> /* <![CDATA[ */ var q2w3_sidebar_options = [{"sidebar":"sidebar-1","margin_top":10,"margin_bottom":0,"stop_id":"","screen_max_width":0,"screen_max_height":0,"width_inherit":false,"refresh_interval":1500,"window_load_hook":false,"disable_mo_api":false,"widgets":["custom_html-4"]}]; /* ]]> */ </script> <script type='text/javascript' id='ez-toc-js-js-extra'> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"}; /* ]]> */ </script> <script type='text/javascript' src='https://toto-school.ru/wp-content/plugins/bwp-minify/min/?f=wp-content/themes/saralite/js/navigation.js,wp-content/themes/saralite/js/skip-link-focus-fix.js,wp-content/themes/saralite/js/saralite.js,wp-includes/js/comment-reply.min.js,wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js,wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js,wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js,wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js,wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js,wp-content/plugins/easy-table-of-contents/assets/js/front.min.js'></script> </body> </html>