DOCTYPE и раздел документа HEAD

В лекции рассматривается разметка внутри элемента head, рассказывается о различных частях этого раздела и их предназначении. Также описаны функции объекта DOCTYPE и порядок выбора DOCTYPE для HTML-документа.

Объявление DOCTYPE

Согласно Спецификации HTML 4.01, директива DOCTYPE предназначена для объявления типа документа - так называемого DTD (Document Type Definition, определение типа документа). DTD представляет собой формальную конструкцию, в которой выражена вся специфика HTML как одного из приложений языка SGML. Определение типа документа представляет собой перечень различных конструкций SGML, которые определяют, например, какие элементы в каком порядке могут встречаться внутри каждого из элементов; полный список допустимых элементов с указанием на обязательность для каждого из них начального и конечного тегов; полный список атрибутов для каждого элемента и значениями по умолчанию и другие правила синтаксиса.

Объявление DOCTYPE выглядит следующим образом:

"httpy/www. w3.org/TR/html4/strict.dtd">

Наиболее важной частью DOCTYPE являются две строки, взятые в кавычки. Первая строка "-//W3C//DTD HTML 4.01//EN" утверждает, что данный документ является документом DTD, использует английский язык текста для описания объекта, описывает HTML версии 4.01 и опубликован организацией W3C. Вторая строка 'http У/www. w3.org/TR/html4/strict.dtd" указывает на размещение самого документа DTD, используемого для этого DOCTYPE.

Режимы представления

Все современные браузеры ориентируются на DOCTYPE (или его отсутствие) в начале страницы, выбирая режим отображения для HTML-документов. В Internet Explorer версии 8 режим определяется также и другими факторами, например, HTTP-заголовком, периодически получаемыми от Microsoft данными, пользовательскими настройками и др. Но по умолчанию даже в Internet Explorer 8 режим зависит от DOCTYPE.

Основными режимами современных браузеров являются режим обратной совместимости, стандартный режим и почти стандартный режим. Приведем некоторые характеристики названных режимов.

При режиме обратной совместимости (Quirks Mode) в браузерах нарушаются рекомендации W3C для обеспечения нормального отображения страниц. Если в коде HTML-документа используется неполный или устаревший вид DOCTYPE или DOCTYPE вообще отсутствует, то браузер перейдет в данный режим и будет исходить из предположения, что код страницы написан с ошибками, не соответствует принятым стандартам или документ написан для "старых" браузеров. В этом режиме браузер пытается разобрать страницу по правилам обратной совместимости и выводит ее на экран так, как вывел бы ее браузер более ранней версии. Для разных браузеров существуют различные варианты совместимости с предыдущими версиями. Так, Internet Explorer версий 6, 7 и 8 в режиме обратной совместимости фактически воспроизводят установки, типичные для Internet Explorer 5. У других браузеров режим обратной совместимости представляет собой набор отклонений от почти стандартного режима. К сожалению, режим обратной совместимости лидирует с большим отрывом. Статистика использования типов DID от 10 апреля 2008 г., опубликованная на сайте Qindex.info (ссылка: www.qindex.info/Q_get.php? g_clss=forum&g_prcss=thrd&g_tmp]t=&g_brd=5&g_thrd= 128 http7/www.qindex.info/Q_get.php?

g_chs=forum&g_prcss=thrd&g_trnplt=&g_brd=5&g_thrd=128) показывает, что более 50% сайтов работают в режиме обратной совместимости.

В стандартном режиме (Standards Mode) браузеры пытаются обращаться с правильно составленными документами в полном соответствии со спецификацией CSS, настолько, насколько конкретный браузер поддерживает стандарты. Поскольку уровень поддержки стандартов

Л.В. Кузнецова Лекции по современным веб-технологиям

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

Некоторые браузеры, такие как Firefox, Safari, Opera (начиная с 7.5) и Internet Explorer 8 поддерживают и третий режим - почти стандартный (Almost Standards Mode), который не достаточно строго следует рекомендациям W3C. Internet Explorer 6 и 7 для Windows, Opera ниже версии 7.5 и некоторые другие браузеры не нуждаются в таком режиме, поскольку даже в своих стандартных режимах не соблюдают все спецификации CSS.

Internet Explorer 8 также поддерживает режим, в основном воспроизводящий стандартный режим Internet Explorer 7. У других браузеров подобных режимов нет.

Выбор DOCTYPE

Спецификация допускает использование трех различных версий DID, которые отличаются друг от друга поддержкой различных элементов и атрибутов. Опубликованный W3C список DID, рекомендованных для использования в веб-документах, представлен на официальном сайте Консорциума (ссылка: httpy/www.w3.org/QA/2002/04/valid-dtd-list.html -http У/www. w3. org/Q А/2002/04/valid- dtd-list.html).

Любое из перечисленных ниже объявлений DOCTYPE гарантированно включает браузеры в стандартный режим.

Объявление строгого DID:

"http У/www. w3. org/TR/htm!4/strict.dtd">

Строгое DTD (строгий синтаксис) не допускает использования в документе различных не рекомендуемых элементов и атрибутов, большинство из которых предназначаются не для логической разметки, а для визуального форматирования. Данный DOCTYPE гарантирует, что при работе с данным HTML документом браузер будет использовать

Л.В. Кузнецова Лекции по современным веб-технологиям

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

Объявление переходного DTD:

Переходное DTD (переходный синтаксис) включает в себя все элементы и атрибуты строгого DTD в совокупности с не рекомендуемыми элементами и атрибутами.

Объявление DTD 'Набор фреймов":

"httpy/www.w3.org/TR/htmJ4/frameset.dtd">

Объявление DTD 'Набор фреймов" аналогично переходному синтаксису, но содержит также элементы для создания фреймов.

Раздел документа HEAD

Раздел документа HEAD определяет его заголовок и не является обязательным элементом, однако правильно составленный заголовок может быть очень полезен. Элементы, находящиеся в разделе HEAD , определяют большую часть инструкций для браузера, а также дополнительную информацию о HTML-документе. Содержимое элемента HEAD не отображается напрямую на веб-странице, за исключением элемента TITLE, устанавливающего заголовок вебстраницы. Раздел HEAD может содержать в себе следующие элементы: TITLE, МЕТА, BASE, LINK, STYLE, SCRIPT и OBJECT. В лекции мы дадим лишь основные подходы к работе с перечисленными элементами. Более подробно ознакомиться с ними можно в Спецификации HTML.

Элемент TITLE

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

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

' http У/www. w3. org/TFUhtml4/strict. dtd">

<ТПЪЕ>Пример использования элемента TTLE

<Р>Обратите внимание на панель заголовков !

Результат выполнения данного кода представлен на рисунке 5.1. Текст из элемента TITLE выведен в панели заголовка выше средств навигации браузера.

Рис. 5.1. Пример использования элемента TITLE

Элемент МЕТА

Элемент МЕТА содержит метаописатели некоторых свойств документа, которые предназначены для браузеров и поисковых систем. Эти свойства могут идентифицировать авторство HTML-документа, его адрес, периодичность обновления и т.п. Поисковые системы используют данные свойства для индексации и формирования заголовков HTML-документов, они могут влиять на режим отображения HTML-документов, хотя сами на экран не выводятся. Этот элемент, вместе с элементом TITLE является наиболее используемым при задании заголовка.

Количество доступных свойств приближается к нескольким десяткам, но все они делятся на две группы: NAME и HTTP-EQUIV. Элементы группы NAME содержат текстовую информацию о документе, его авторе и некоторые рекомендации для поисковых машин (например, Robots, Description, Keywords, Author, Copyright и др.). Элементы группы HTTP-EQUIV влияют на формирование HTML-заголовка и определяют режим его обработки (Content-Language, Content-Type, Refresh и др.).

Л.В. Кузнецова Лекции по современным веб-технологиям

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

Каждый элемент МЕТА содержит в себе пару атрибутов: для указания названия свойства используются атрибуты name или http-equiv (в зависимости от используемого свойства), а значение этого свойства устанавливается атрибутом content. Например, следующий метаописатель задает имя автора документа:

<МЕТА name="Author" content="Bazil Snowman">

Дополнительно он может содержать атрибут lang, указывающий язык, на котором написано значение свойства:

Наибольший интерес из группы свойств NAME представляют свойства Description и Keywords. Эти свойства, наряду с элементом TITLE, широко используются для оптимизации и продвижения сайтов.

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

Свойство Keywords позволяет определить ключевые слова вебстраницы. При формировании списка ключевых слов необходимо использовать слова, содержащиеся в тексте документа. Не стоит включать в Keywords служебные слова, записывать слова во множественном числе или повторять их несколько раз. Очередность

Л.В. Кузнецова Лекции по современным веб-технологиям

ключевых слов составляется по степени важности в порядке убывания. Оптимальная длина последовательности ключевых слов не должна превышать 250 символов.

<МЕТА name="Description" соп1еп1="Интернет-магазин Всякая всячина -<МЕ1А name="Keywords" content= "Интернет-магазин, игрушки, книги, л

музыка, диски, видео, DVD, двд, кино, софт, программы, игры,

ПО, игрушки, books, video, music, software, toys">

Среди свойств группы HTTP-EQUIV наиболее важными являются свойства Content-Type, Content-Style-Type и Content-Script-Type.

Свойство Content-Type отвечает за указание типа документа и кодировки символов. Данный метаописатель устанавливает в качестве кодировки HTML-страницы Кириллицу (Windows):

<МЕТА http-equiv= "Content- Type" content-text/html;

charset-windows-1251">

Свойство Content-Style-Type служит для указания языка таблицы стилей. Если язык таблиц стилей не задан, по умолчанию используется язык text/css. Приведенная ниже запись явно задает в качестве языка таблицы стилей CSS:

<МЕТА http-equiv="Content-Style-Type" content="text/css ">

Свойство Content-Script-Type определяет язык программирования сценариев. Возможны несколько значений данного параметра, однако по умолчанию используется JavaScript. Язык программирования сценариев JavaScript можно задать с помощью следующего метаописателя:

<МЕТА http-equiv="Content-Script-Type"

content^' text/javascript">

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

Л.В. Кузнецова

Элемент BASE

Элемент BASE используется для явного задания полного URL-адреса документа. Это бывает полезно ввиду того, что общепринятым стилем задания гипертекстовых ссылок является их относительная адресация. То есть при задании ссылки на документ указывается не полный его URL-адрес, а его месторасположение относительно текущего адреса. Элемент BASE как раз и задает адрес, относительно которого и будут браться относительные ссылки.

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

Основным атрибутом элемента является href, который задает полный URL-адрес документа. Пример иллюстрирует применение элемента BASE и относительных ссылок:

"http У/www. w3. org/TR/html4/strict.dtd">

<ТИЕЕ>Пример использования элемента BASE

...текст документа...

OTHOCHTettbi-^i ссылка на изображение* ...текст документа...

В этом примере переход по относительной ссылке задается относительно URL-адреса http://www.somewhere.ru. Таким образом, заданная в этом документе ссылка в абсолютном варианте независимо от месторасположения документа будет записана как ссылка:

Л.В. Кузнецова Лекции по современным веб-технологиям

http У/www. somewhere, ru/images/someimage .jpg httpy/www.somewhere.ru/images/someimage.jpg. Если базовый адрес не задан, то все относительные ссылки интерпретируются относительно каталога, в котором находится данный HTML-документ.

Элемент BASE можно использовать и в заголовке, и в теле документа, причем несколько раз. Область действия элемента определяется от места его задания и до конца документа или до следующего объявления элемента BASE, если таковой имеется.

Элемент LINK

Элемент LINK задает вид взаимоотношений между содержащим его документом и другим ресурсом Сети и устанавливает между ними логическую связь. Один элемент LINK устанавливает связь только с одним внешним документом. Однако в HTML-документе может присутствовать несколько таких элементов.

Основными атрибутами элемента LINK являются href, указывающий URL-адрес документа, с которым задается взаимоотношение, и rel или rev, задающие прямую и обратную ссылку и определяющие тип ссылки, который показывает, чем документ, указанный в ссылке, является по отношению к текущему документу. Типы ссылок определены в Спецификации HTML.

Например, запись

означает, что документ copyright.html является документом, содержащим сведения об авторском праве для текущего документа (прямая ссылка), а запись

означает, что текущий документ является главой документа main.html (обратная ссылка).

Л.В. Кузнецова Лекции по современным веб-технологиям

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

Заглавные ссылки учитываются поисковыми машинами в своей работе, поэтому рекомендуется их задавать. Например, чтобы указать поисковому роботу на расположение иноязычных версий данного документа, достаточно использовать следующее задание элемента LINK:

<ТПЪЕ>Документ на русском языке<ЛТТЪЕ>

href="httpy/www.somewhere.ru/english.html"

hreflang="en">

...текст документа на русском языке...

Также важным применением элемента LINK является подключение к документу внешней таблицы стилей. В этом случае элемент LINK имеет вид:

Элемент STYLE

Элемент STYLE позволяет включать в документ внутренние таблицы стилей. Заголовок документа может содержать любое количество этих

Л.В. Кузнецова Лекции по современным веб-технологиям

элементов. Обязательный атрибут type указывает на тип таблицы стилей, т.е. на язык, на котором описываются стили. Для каскадных таблиц стилей этот атрибут всегда должен иметь значение text/css.

Ниже представлен пример включения каскадных таблиц стилей в HTML-документ:

' http У/www. w3. org/TR/html4/strict. dtd' ’>

<Т1ТЪЕ>Пример использования элемента STYLE

<Р>Информация к размышлению...

HTML позволяет авторам создавать документы, учитывающие особенности устройств, на которых буцет отображаться HTML-документ. К таким устройствам относятся принтеры, проекторы, устройства, предназначенные для людей с ограниченными физическими возможностями и др. Для того, чтобы использовать разные таблицы стилей для различных устройств, используется атрибут media. По умолчанию, значением данного атрибута является screen (т.е. предполагается, что документ будет отображаться на экране монитора).

В описанном выше примере можно переопределить используемые цвета и размер шрифта, чтобы страница лучше выглядела при печати. Для этого можно добавить другой блок STYLE с атрибутом media со значением print, как показано ниже:

Л.В. Кузнецова

Результат предыдущего примера представлен на рисунке 5.2, где применяется стиль с параметром media="screen". На рисунке 5.3 представлен результат предварительного просмотра той же страницы, однако при этом уже действует стиль для печати, заданный параметром media=”print’’ .

Рис. 5.2. Страница со стилем для просмотра на мониторе

Рис. 5.3. Страница со стилем для вывода на печать

Элемент SCRIPT

Элемент SCRIPT предназначен для добавления так называемых клиентских сценариев - сценариев, которые выполняются браузером и написаны на языке JavaScript. JavaScript добавляет динамическое поведение в статические документы HTML, например, эффекты анимации, или проверку данных формы, или другие функции, которые запускаются, когда пользователь выполняет определенные действия.

Элемент SCRIPT может располагаться в заголовке или теле HTML-документа в неограниченном количестве. Когда браузер встречает такой сценарий, он прекращает разбор оставшегося документа, пока не выполнит код сценария. Поэтому, чтобы гарантировать, что код JavaScript будет доступен до загрузки основного документа, его необходимо поместить в раздел HEAD .

Например, можно предупредить посетителя с помощью следующего сценария, что определенная ссылка отправит его на другой сервер:

Л.В. Кузнецова Лекции по современным веб-технологиям

"http У/www. w3 .org/TR/html4/strict.dtd">

<ТТГЕЕ>Пример использования элемента SCRIPT<</p> <p><SCRIPT></p> <p>function crossing(){</p> <p>return confirm("Bbi готовы перейти на другой сервер?")</p> <p>}</p> <p></SCRIPT></p> <p></HEAD></p> <p><BODY></p> <p><A href= "httpУ/www.somewhere.com" о ndick="return crossing()"> Ссылка i </BODY></p> <p></HTML></p> <p>Если открыть этот пример в браузере и щелкнуть на ссылке, то код попросит подтвердить действие пользователя, как представлено на <span>рисунке 5.4.</p> <img src="/htm/img/18/62/19.png" alt="" sizes="(max-width: 768px) calc(100vw - 20px),(max-width: 1200px) calc(100vw - 320px), min(calc(100vw - 620px), 1300px)" srcset="resize/750/htm/img/18/62/19.png 750w, /htm/img/18/62/19.png 772w" width="100%" height="100%" decoding="async" loading="lazy"/> <p>Рис. 5.4. <strong>Пример использования элемента SCRIPT</strong></p> <p>В лекции рассматриваются основные блочные и строковые элементы HTML, используемые для структурирования и форматирования текста.</p> <p><strong>Структурирование текста</strong></p> <p>Как было отмечено в <span>лекции 4, все элементы HTML делятся на блочные и строковые. Блочный элемент обычно информирует о структуре документа, начинается с новой строки и отделяется от предыдущего и последующего блока пустой строкой определенной ширины. Блочные элементы могут содержать строковые элементы. В данном разделе будут рассмотрены основные блочные элементы, предназначенные для структурирования текста.</p> <p><strong>Заголовки разделов страниц: элементы Н1...Н6</strong></p> <p>HTML предлагает шесть заголовков разного уровня, для задания которых используются элементы Hl, Н2, Нб. Заголовки различных уровней призваны показать относительную важность секции, расположенной после заголовка и, по умолчанию, отображаются браузером различным размером шрифта. Так, элемент Н1 представляет собой наиболее важный заголовок первого уровня, который, по умолчанию, отображается самым крупным шрифтом жирного начертания. А элемент Н6 служит для обозначения заголовка шестого уровня, является наименее значительным и отображается самым мелким шрифтом. Таким образом, использование заголовков разного уровня позволяет структурировать документ по разделам, главам, параграфам и т.п., облегчая чтение, делая документ более понятным для считывателей экрана, а также для некоторых автоматических процессов. Следующий пример показывает создание заголовков различных уровней:</p> <p><Н1>Заголовок 1-го уровня</Н1></p> <p><Н2>Заголовок 2-го уровня</Н2></p> <p><НЗ>Заголовок 3-го уровня</НЗ></p> <p><Н4>Заголовок 4-го уровня</Н4></p> <p>Л.В. Кузнецова</p> <p><Н5>Заголовок 5-го уровня</Н5></p> <p><Н6>Заголовок 6-го уровня</Н6></p> <p>А на <span>рисунке 6.1 представлен вид заголовков различного уровня в браузере.</p> <img src="/htm/img/18/62/20.png" alt="" width="682" height="445" decoding="async" loading="lazy"/> <p>Рис. 6.1. <strong>Вид различных заголовков в браузере</strong></p> <p><strong>Стандартные параграфы: элемент Р</strong></p> <p>Неприятной особенность браузеров является то, что они не обрабатывают символы перевода строки. Те. текст, который разработчик набрал на своем компьютере, одновременно форматируя его, разделяя на абзацы и придавая ему какое-то логическое деление, браузер сначала преобразует, уцалив все подряд идущие пробелы и переводы строк, а затем выведет на экран. При этом информация об абзацах будет утеряна. Чтобы этого не произошло, для логической организации абзацев используется специальный элемент Р. Если закрывающего тега нет, считается, что конец параграфа совпадает с началом следующего блочного элемента. Например, оформить анекдот,</p> <p>Л.В. Кузнецова Лекции по современным веб-технологиям</p> <p>приписываемый Даниилу Хармсу, в виде параграфа можно следующим образом:</p> <p><Р>Гоголь только под конец жизни о душе задумался, а смолоду у него вовсе совести не было.</p> <p>Однажды невесту в карты проиграл. И не отдал.</Р></p> <p><strong>Предварительно форматированный текст: элемент PRE</strong></p> <p>Элемент PRE определяет блок предварительно форматированного текста. По умолчанию, любое количество пробелов, идущих в коде подряд, на веб-странице показывается как один. Элемент PRE позволяет обойти эту особенность и отображать текст так, как требуется разработчику. В большинстве браузеров текст, помеченный как предварительно форматированный, будет выводиться с помощью моноширинного шрифта (т.е. шрифта фиксированной ширины), что придает тексту вид как бы отпечатанного на машинке. Это является наследием программистов, которые использовали ранее шрифты фиксированной ширины для представления предварительно форматированного текста. Например, представленный ниже фрагмент кода выводит отрывок из стихотворения Владимира Маяковского 'Блек энд Уайт" с помощью элементов Р и <i>SAMP.</i> Результат представлен на <span>рисунке 6.2.</p> <p>Если</p> <p>Гаванну</p> <p>окинуть мигом -рай-страна,</p> <p>страна что надо.</p> <p><PRE></p> <p>Если</p> <p>Гаванну</p> <p>окинуть мигом -рай-страна,</p> <p>страна что надо.</p> <p></PRE></p> <img src="/htm/img/18/62/21.png" alt="" width="686" height="432" decoding="async" loading="lazy"/> <p>Рис. 6.2. <strong>Пример использования элементов Р и SAMP</strong></p> <p>Внутри контейнера PRE допустимо применять любые теги, кроме тегов IMG, OBJECT, SMALL, SUB И SUP.</p> <p><strong>Цитирование других источников: элемент</strong></p> <p><strong>BLOCKQUOTE</strong></p> <p>Часто на веб-странице необходимо целиком или частично процитировать информацию из статей, публикаций блога, справочных документов и т.д. В HTML для выделения длинных цитат внутри документа предназначен элемент BLOCKQUOTE. Текст, обозначенный этим элементом, традиционно отображается как выровненный блок с отступами слева и справа. Единственный параметр данного элемента cite указывает полный или относительный адрес первоисточника, откуда была позаимствована приведенная цитата. Однако параметр cite не поддерживают как Internet Explorer, так и некоторые другие</p> <p><BLOCKQUOTE>Foiwib только под конец жизни о душе задумался, а смолоду у него вовсе совести не было.</p> <p>Однажды невесту в карты проиграл. И не отдал.</ВЬОСКриОТЕ></p> <p>Результат применения элементов Р и BLOCKQUOTE к оформлению текста представлен на <span>рисунке 6.3.</p> <img src="/htm/img/18/62/22.png" alt="" width="748" height="469" decoding="async" loading="lazy"/> <p>Рис. 6.3. <strong>Пример использования элементов Р и BLOCKQUOTE</strong></p> <p><strong>Горизонтальные линии: элемент HR</strong></p> <p>Горизонтальная линия создается в HTML с помощью элемента HR. Вид линии в основном зависит от браузера. Элемент HR имеет несколько параметров, управляющих выравниванием, цветом, длиной и шириной линии. Однако все эти параметры не рекомендуются Спецификацией HTML. Поэтому если обычного представления будет недостаточно, то вид линии должен оформляться с помощью CSS.</p> <p>В силу специфики определения разделителей в HTML невозможно управлять разрывом строк текста простым нажатием клавиши ENTER во время записи текста. Разрыв строки можно ввести в документ с помощью элемента BR. Однако он должен применяться только для принудительного разрыва строки, а не для увеличения вертикального интервала между элементами в документе. Для этих целей необходимо использовать свойства CSS.</p> <p><strong>Форматирование текста</strong></p> <p>Для форматирования текста HTML-документа предусмотрена целая группа элементов, которую условно можно разделить на элементы логического и физического форматирования.</p> <p>Элементы логического форматирования своими именами обозначают структурные типы своих текстовых фрагментов, такие, например, как цитата (элемент CITE ), аббревиатура (элемент <i>ABBR</i> ) и др. Логическая разметка не влияет на конкретное экранное представление фрагмента текста браузером. Фрагменты с логическим форматированием браузеры отображают на экране определенным образом, заданным по умолчанию. Вид отображения никак не связан со структурным типом фрагмента (т.е. именем элемента логического форматирования), но может быть легко переопределен.</p> <p>Элементы физического форматирования определяют формат отображения указанного в них фрагмента текста в окне браузера. Например, для отображения фрагмента курсивом можно использовать элемент I.</p> <p>Между разработчиками документов HTML долгое время шли споры о преимуществах и недостатках того или иного подхода. С выходом спецификации HTML 4.0 эти споры завершились в пользу применения логического форматирования, поскольку был провозглашен принцип отделения структуры документа от его представления (о котором рассказывалось в <span>лекции 4). Действительно, только на базе логического форматирования можно гибко управлять представлением документа,</p> <p>Л.В. Кузнецова Лекции по современным веб-технологиям</p> <p>используя современные методы, основанные, например, на таблицах стилей.</p> <p>Тем не менее, на настоящий момент может свободно использоваться и физическое форматирование. В спецификации HTML 4.01 некоторые элементы физического форматирования не рекомендуются для применения, однако пока они все еще поддерживаются всеми браузерами. Некоторые элементы логического форматирования, призванные заменить отдельные элементы физического форматирования, распознаются не всеми браузерами, что делает их применение неудобным. Примером может служить логический элемент DEL, который рекомендуется использовать вместо физического элемента STRIKE.</p> <p><strong>Элементы логического форматирования</strong></p> <p><strong>Аббревиатуры: элементы ABBR и ACRONYM</strong></p> <p>Элемент <i>ABBR</i> указывает, что последовательность символов, заключенная между его начальным и конечным тегом, является аббревиатурой. По умолчанию, такой текст подчеркивается пунктирной линией. Браузер Internet Explorer до 7 версии включительно не поддерживает элемент <i>ABBR,</i> рекомендуя использовать элемент <i>ACRONYM.</i></p> <p>Элемент <i>ACRONYM,</i> являясь разновидностью аббревиатуры, указывает на то, что текст является акронимом. В отличие от аббревиатуры, акроним - это устоявшееся сокращение, которое применяется как самостоятельное слово. К акронимам, например, можно отнести слова ликбез, соцстрах и т.д.</p> <p>Для указания полной формы записи аббревиатуры или акронима удобно использовать атрибут title. Тогда визуальные браузеры при наведении курсора на текст, размеченный элементом <i>ACRONYM</i> или <i>ABBR,</i> будут выдавать полное наименование в виде появляющейся подсказки. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга</p> <p>Л.В. Кузнецова Лекции по современным веб-технологиям</p> <p>документа. Ниже представлен пример использования элемента ACRONYM. Результат выполнения данного фрагмента представлен на рисунке 6.4.</p> <p><Р>Действующим президентом <ACRONYM Ше="Соединенные Штат</p> <img src="/htm/img/18/62/23.png" alt="" width="688" height="433" decoding="async" loading="lazy"/> <p>Рис. 6.4. <strong>Пример использования элемента ACRONYM</strong></p> <p><strong>Выделение контактной информации: элемент</strong></p> <p><strong>ADDRESS</strong></p> <p>Элемент ADDRESS предназначен для хранения информации об авторе и может включать в себя любые элементы HTML вроде ссылок, текста, выделений и т.д. Планируется, что поисковые системы будут анализировать содержимое этого тега для сбора информации об авторах сайтов. По умолчанию, текст внутри контейнера ADDRESS отображается курсивным начертанием. Информация об авторе может быть задана следующим образом:</p> <p><ADDRESS>Cделано в CCCP.</ADDRESS></p> <p>Элемент CITE используется для отметки цитат или названий книг и статей, ссылок на другие источники и т.д. Браузерами такой текст обычно выводится курсивом. Если необходимо отметить короткие цитаты в строке текста, то рекомендуется использовать элемент Q. В отличие от блочного элемента BLOCKQUOTE, при отображении не выполняется отделение размеченного текста пустыми строками. Например, цитата Оскара Уайльда может быть оформлена следующим образом:</p> <p><С1ТЕ>Нет греха, кроме глупости.</С1ТЕ></p> <p><strong>Изменения в документах: элементы DEL и INS</strong></p> <p>Изменения, возникшие в документе с момента, когда он стал доступен в первый раз, можно пометить, чтобы посетители могли сразу определить, что и когда изменилось.</p> <p>Для выделения текста, который был удален в новой версии документа, предназначен элемент DEL. Подобное форматирование позволяет отследить изменения, сделанные в тексте документа. Текст, помеченный элементом DEL, браузеры обычно отображают как перечеркнутый. В спецификации HTML 4.01 этому элементу отдается предпочтение перед элементами физического форматирования STRIKE или S, обозначающих перечеркнутый текст.</p> <p>Для выделения текста, который был добавлен в новую версию, используется элемент INS. Его полезно использовать для отметки изменений, вносимых в документ от версии к версии. Текст, помеченный элементом INS, обычно отображается подчеркнутым текстом.</p> <p>Элементы DEL и INS имеют два необязательных атрибута: cite и datetime. Значение атрибута cite должно представлять собой URL-адрес документа, поясняющего причины удаления данного фрагмента или подробности внесенных дополнений, а атрибут datetime</p> <p><strong>Программный код: элемент CODE</strong></p> <p>Элемент CODE предназначен для отображения одной или нескольких строк текста, который представляет собой программный код: имена переменных, ключевые слова, тексты функции и т.д. Браузеры обычно отображают содержимое контейнера CODE моноширинным текстом уменьшенного размера. Этот элемент не следует путать с элементом PRE, являющимся элементом блочного уровня, который следует использовать для отметки больших фрагментов кода. Кроме того, в отличие от элемента PRE, дополнительные пробелы внутри контейнера CODE не учитываются также, каки переносы текста.</p> <p><strong>Определения: элемент DFN</strong></p> <p>Как правило, новый термин, упоминающийся в документе, выделяется курсивом, также дается его определение. Тогда при использовании этого термина в дальнейшем, он считается уже известным читателю. Для выделения таких терминов при их первом появлении в тексте используется элемент DFN. Браузеры, по умолчанию, отображают содержимое контейнера DFN с помощью курсивного начертания.</p> <p><strong>Вывод взаимодействия с компьютером: элементы SAMP и KBD</strong></p> <p>Элемент <i>SAMP</i> используется для отображения текста, который является результатом вывода компьютерной программы или скрипта. Элемент <i>SAMP</i> используется также для выделения нескольких символов моноширинным шрифтом. Применение данного элемента предпочтительнее применения элемента физического форматирования ТТ.</p> <p>Элемент KBD используется для обозначения текста, который набирается</p> <p>Л.В. Кузнецова Лекции по современным веб-технологиям</p> <p>на клавиатуре, или для названия клавиш. Браузеры, по умолчанию, помечают текст в контейнере KBD и <i>SAMP</i> моноширинным шрифтом.</p> <p><strong>Выделение важных фрагментов текста: элементы STRONG и ЕМ</strong></p> <p>Для выделения важных фрагментов текста, как правило, используются элементы ЕМ и STRONG. Браузеры обычно отображают текст, отмеченный элементом ЕМ и STRONG, курсивом и полужирным шрифтом соответственно. Элементом STRONG обычно размечают более важные фрагменты текста, чем те, что размечены элементом ЕМ.</p> <p>Следует отметить, что элементы I и ЕМ, так же как В и STRONG, несмотря на сходство результата, являются не совсем эквивалентными и взаимозаменяемыми. Например, элемент I является элементом физической разметки и устанавливает курсивный текст, а элемент ЕМ -элементом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально должно было сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов I и ЕМ, будет отмечен по-разному Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.</p> <p><strong>Переменные: элемент VAR</strong></p> <p>Элемент VAR используется для указания переменных в текстовом контенте. Он может включать алгебраические математические выражения или находиться в программном коде. Браузеры обычно помечают такой текст курсивом. Например, элемент VAR можно использовать следующим образом:</p> <p><VAR>x+y=z</VAR></p> <p>В данном разделе приведено краткое описание некоторых элементов физического форматирования. Часть из них не рекомендуется к использованию спецификацией HTML 4.01 и заменена более новыми методами достижения аналогичного результата, однако они продолжают поддерживаться браузерами и поэтому представляют определенный интерес.</p> <p><strong>Элементы стиля шрифта: ТГ, I, В, BIG, SMALL, U, STRIKE и S</strong></p> <p>Элемент В отображает текст полужирным шрифтом. В большинстве случаев рекомендуется вместо него использовать элементы логического форматирования STRONG или ЕМ.</p> <p>Элемент I отображает текст курсивом. Для большинства случаев вместо данного элемента рекомендуется использовать элементы ЕМ, DFN или CITE, поскольку последние лучше отражают назначение выделяемого текста.</p> <p>Элемент ТТ отображает текст моноширинным шрифтом. Для большинства случаев вместо этого элемента лучше использовать элементы CODE, <i>SAMP или</i> KBD.</p> <p>Элемент U отображает текст подчеркнутым. Данный элемент отмечен как не рекомендуемый, вместо него предлагается использовать элементы STRONG или CITE.</p> <p>Элементы STRIKE и S отображают текст, перечеркнутый горизонтальной линией. Оба элемента отменены, и вместо них рекомендуется использовать элемент DEL.</p> <p>Элементы BIG и SMALL выводят текст шрифтом большего и меньшего (чем непомеченная часть текста) размера. Вместо элемента BIG предпочтительнее использовать элемент STRONG, а размер устанавливать с помощью соответствующих свойств CSS.</p> <p>Л.В. Кузнецова Лекции по современным веб-технологиям</p> <p><strong>Верхние и нижние индексы: элементы SUB и SUP</strong></p> <p>Чтобы пометить часть некоторого текста как верхний или нижний индекс, используют элементы SUB и SUP. Элемент SUB сдвигает текст ниже уровня строки и выводит его шрифтом меньшего размера. Элемент SUP сдвигает текст выше уровня строки и выводит его шрифтом меньшего размера. Эти элементы удобно применять для разметки несложных математических выражений, не обращаясь к использованию специального языка математической разметки MathML. Например, формула воды может быть записана следующим образом:</p> <p><P>H<SUB>2</SUB>O</P></p> <p><strong>Элементы модификатора шрифта: FONT и BASEFONT</strong></p> <p>Элемент FONT позволяет задать такие параметры шрифта, как тип (или семейство шрифтов), размер и цвет. Элемент BASE FONT применяется для задания базового шрифта сразу для всей страницы. Обычно он указывается сразу после элемента BODY. В Спецификации HTML 4.01 эти элементы отнесены к отмененным, и их дальнейшее применение не рекомендуется.</p> <p><strong>Базовые контейнеры: элементы DIV и SPAN</strong></p> <p>Большинство элементов в HTML существует для описания контента, такого, как изображения, списки, заголовки, или помогают в настройке документа ( HEAD, LINK и т.д.). Однако имеется два элемента, которые не имеют заданного значения. Спецификация HTML декларирует, что элементы DIV и SPAN совместно с атрибутами id и class образуют базовый механизм для добавления в документы структуры. Эти два элемента можно считать некоторой несущей опорой HTML.</p> <p>Элемент DIV является базовым контейнером блочного уровня. Он используется для объединения различных частей контента в логически цельную единицу или логический блок. Этот элемент, эффективно взаимодействуя с таблицами стилей, позволяет форматировать разделы отдельной страницы или даже целого сайта. Текстовый блок, отделенный логически, легко потом выделить при отображении любым способом, например, шрифтом, цветом, межстрочным интервалом, центрированием и т.п. Содержимое элемента DIV может быть расположено произвольным образом, выделено другим фоном и т.д. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора.</p> <p>Аналогом DIV на уровне текста является элемент SPAN. Элемент SPAN является базовым контейнером строкового уровня. Он также помогает представить структуру документа, но используется для объединения в группу или создания оболочки вокруг других строковых элементов или текста.</p> <p>Различие между двумя этими элементами состоит в типе контента, а также в его представлении при записи без какого-либо стилевого оформления. Элемент DIV помещается вокруг группы элементов блочного уровня (например, создать оболочку вокруг заголовка и списка ссылок, чтобы создать навигационное меню). Элемент SPAN создает оболочку вокруг группы строковых элементов или (чаще всего) обычного текста.</p> <p>Следующий фрагмент кода демонстрирует применение элементов DIV и SPAN:</p> <p><BODY></p> <p><DIV id=”Content"></p> <p><Н1>Заголовок страницы </Н1></p> <p><Р>Это первый параграф.</Р></p> <p><IMG src="image.gif' ак="Это какое-то изображение"></p> <p><Р>Это второй параграф, который содержит <SPAN id="Special"> эле </DIV></p> <p></BODY></p> <p>Теперь можно выделить содержимое элементов DIV и SPAN с помощью их атрибутов id и применить к ним специальное стилевое оформление и позиционирование с помощью свойств CSS.</p> <p>В лекции рассматриваются особенности работы со списками и изображениями в HTML.</p><div id="gads_btm" class="advconts advbot"><div id='div-336x280_btm'> <script> googletag.cmd.push(function() { googletag.display('div-336x280_btm'); }); </script> </div></div> </article> </td> </tr> </table> <span id="aftercont"> <span class="article_seperator"> </span> <center> <a class="ml-button-5" id="imgSrcLink" >Посмотреть оригинал</a> <script> document.getElementById("imgSrcLink").onclick=function(){var elem=document.getElementById('mydiv');elem.style.display='block';if(!document.getElementById('imgSrcFrame')){var ifrm=document.createElement("iframe");ifrm.setAttribute("id",'imgSrcFrame');ifrm.setAttribute("src",'https://vuzdoc.org/srcload/1822/57419e68a873678b5a0a9915593d3709');ifrm.setAttribute("onload",'document.getElementById(\'preloader\').style.display=\'none\'');ifrm.setAttribute("scrolling",'no');ifrm.setAttribute("style",'width:100%; border: none; height:'+(window.innerHeight-50)+'px;');elem.appendChild(ifrm)}window.scrollTo(0,document.getElementById('share').offsetTop)}; </script> </center> <center>  <div class="share42init" id="share"> <span id="share42"><a rel="nofollow" style="display:inline-block;vertical-align:bottom;width:32px;height:32px;margin:0 6px 6px 0;padding:0;outline:none;background:url(/share/icons.png) -0px 0 no-repeat" href="#" target="_blank"></a><a rel="nofollow" style="display:inline-block;vertical-align:bottom;width:32px;height:32px;margin:0 6px 6px 0;padding:0;outline:none;background:url(/share/icons.png) -32px 0 no-repeat" href="#" target="_blank"></a><a rel="nofollow" style="display:inline-block;vertical-align:bottom;width:32px;height:32px;margin:0 6px 6px 0;padding:0;outline:none;background:url(/share/icons.png) -64px 0 no-repeat" href="#" target="_blank"></a><a rel="nofollow" style="display:inline-block;vertical-align:bottom;width:32px;height:32px;margin:0 6px 6px 0;padding:0;outline:none;background:url(/share/icons.png) -96px 0 no-repeat" href="#" target="_blank"></a><a rel="nofollow" style="display:inline-block;vertical-align:bottom;width:32px;height:32px;margin:0 6px 6px 0;padding:0;outline:none;background:url(/share/icons.png) -128px 0 no-repeat" href="#" target="_blank"></a></span> </div> <script type="text/javascript" src="/share/share42.js"></script>  </center> <div id="mydiv" style="display:none;"> <div id="preloader" style="text-align: center;padding-top: 100px;"> <img src="/images/preload.gif" style="max-width:100%;"> </div> </div> <table align="center"> <tr> <th class="pagenav_prev"> <a href="https://vuzdoc.org/1821/tehnika/vvedenie_html"> < Пред</a> </th> <td width="20"> </td> <th class="pagenav_cont"> <a href="https://vuzdoc.org/1817/tehnika/sovremennye_veb-tehnologii"> СОДЕРЖАНИЕ</a> </th> <td width="20"> </td> <th class="pagenav_cont"> <a href="/1822/tehnika/doctype_razdel_dokumenta_head#aftercont" class="annot"> ОРИГИНАЛ</a> </th> <td width="20"> </td> <th class="pagenav_next"> <a href="https://vuzdoc.org/1823/tehnika/spiski_izobrazheniya_html"> След ></a> </th> </tr> </table> </span> <div id='div-970x90_btm'> <script>googletag.cmd.push(function(){googletag.display('div-970x90_btm');});</script> </div> <img id="print_adv" style="display: none; margin-top: 5px;" border="0" src="https://vuzdoc.org/images/print_adv.png" /> </main> <div class="bottom"> <table cellpadding="0" cellspacing="0" class="moduletablerelbot"> <tr> <td> <ul><li><a href="https://vuzdoc.org/60233/tehnika/pechatnye_polya#404086" class="mod_rel"><h5>Работа с разделами документа</h5><span><i>Раздел документа —</i> это непрерывная коллекция страниц, имеющих общие свойства. Если необходимо, чтобы разные страницы документа имели разное оформление, они должны принадлежать разным разделам. Кроме того, в каждом разделе можно применять свой принцип нумерации страниц. Среди свойств раздела есть...<br></span></a><span>(Информатика)</span></li><li><a href="https://vuzdoc.org/105809/tehnika/formirovanie_razdelov_dokumenta_sozdanie_dokumenta_slozhnoy_struktury#49616" class="mod_rel"><h5>Формирование разделов документа и создание документа сложной структуры</h5><span><i>Вопросы для самопроверки</i> 1. <i>Создание документов с использованием, автокоррекции. Что такое "автозамена"?</i> 2. <i>Использование в документе списков, как выполняется поиск и замена фрагментов текста, указанных букв и корней? Форматирование и использование различных шрифтов и спецэффектов.</i>...<br></span></a><span>(Microsoft Office 2007 в экономике и управлении. Часть 1)</span></li><li><a href="https://vuzdoc.org/214438/smi/zadanie_rabota_razdelami_dokumenta_word#259346" class="mod_rel"><h5>Задание 4. Работа с разделами документа Word</h5><span>Документ Word может состоять из нескольких разделов. Больше одного раздела создается в том случае, если разные части документа должны различаться <i><b>параметрами раздела,</b></i> к которым относятся: • размер и ориентация листа бумаги; • поля на листе бумаги; • нумерация страниц; • расположение и тип...<br></span></a><span>(Компьютерный практикум по курсу "Информатика")</span></li><li><a href="https://vuzdoc.org/61174/tehnika/razbivka_dokumenta_razdely#169895" class="mod_rel"><h5>Разбивка документа на разделы</h5><span><i>Раздел -</i> часть документа, в которой параметры форматирования страницы отличается от остального документа. К параметрам форматирования страницы относятся поля, ориентация бумаги, нумерация страниц, колонки и колонтитулы. В любом документе есть по крайней мере один раздел. Конечно, если документ...<br></span></a><span>(Компьютер в работе юриста)</span></li><li><a href="https://vuzdoc.org/218788/tehnika/razdel_otpravit_soavtoram#35680" class="mod_rel"><h5>Раздел «Информация о документе»</h5><span>В разделе отображается основная информация о таблице. Для открытия информации о документе нажмем «Файл —> Информация о документе», в результате появится окно, показанное на рис. 2.26. В окне отображается такая информация, как: местоположение документа, владелец, дата последнего изменения и пользователь,...<br></span></a><span>(Современные средства реализации автоматизированных систем. Работа с Google таблицами)</span></li><li><a href="https://vuzdoc.org/789/bzhd/trebovaniya_personalu#79679" class="mod_rel"><h5>Методика измерения параметров лазерного излучения. Нормативные документы</h5><span>Нормативные документы Измерения следует производить на рабочем месте на высоте 0,5-1,0 и 1,5 м от пола, размещая приемник перпендикулярно максимуму излучения источника. При наличии нескольких источников следует проводить аналогичные измерения от каждого из них или через каждые 45° по окружности в горизонтальной...<br></span></a><span>(Безопасность жизнедеятельности. Лазерные излучения)</span></li><li><a href="https://vuzdoc.org/887/estestvoznanie/raschetno_graficheskie_zadaniya_razdelu#89524" class="mod_rel"><h5>Расчетно-графические задания к разделу</h5><span><b>3.8.1. </b>Определить перепад давления, необходимый для подбора вентилятора, подающего нагретый воздух в сеть, схема которого представлена на рис. 3.1. Расходы и размеры участков после вентилятора заданы. Каналы на участках 1-2-3-4-5-6 прямоугольные из шлакогипсовых плит. Потери давления на всасывающей...<br></span></a><span>(Гидродинамика и тепломассообмен в оборудовании систем обеспечения микроклимата)</span></li><li><a href="https://vuzdoc.org/895/estestvoznanie/primery_resheniya_zadach#170298" class="mod_rel"><h5>Расчетно-графические задания к разделу</h5><span><b>5.6.1. </b>Плоскую поверхность с температурой необходимо изолировать так, чтобы потери теплоты не превышали значения теплового потока, равного <i>q,</i> при температуре на внешней поверхности изоляции ?2. Найти толщину слоя изоляции, если его коэффициент теплопроводности равен Л. <b>Пара-метр</b>...<br></span></a><span>(Гидродинамика и тепломассообмен в оборудовании систем обеспечения микроклимата)</span></li><li><a href="https://vuzdoc.org/899/estestvoznanie/primery_resheniya_zadach#226771" class="mod_rel"><h5>Расчетно-графические задания к разделу</h5><span><b>6.6.1. </b>Рассчитать рабочие характеристики оросительной камеры ОКС, если известны массовый расход, а также начальная и конечная температуры обрабатываемого воздуха при адиабатном режиме. Параметр Вариант <b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> <b>6</b> <b>7</b> <b>8</b> <b>9</b> <b>0</b> <i>G,</i>...<br></span></a><span>(Гидродинамика и тепломассообмен в оборудовании систем обеспечения микроклимата)</span></li></ul> </td> </tr> </table> </div> <aside class="sidebarR"> <table cellpadding="0" cellspacing="0" class="moduletable"> <tr> <td> </td> </tr> </table> <div> <div id='div-300x600'> <script>googletag.cmd.push(function(){googletag.display('div-300x600');});</script> </div> </div> <div class="sticky"> <div id='div-300x600_sticky'> <script>googletag.cmd.push(function(){googletag.display('div-300x600_sticky');});</script> </div> </div> </aside> <aside class="sidebarL"> <div> <div id='div-336x280-right'> <script>googletag.cmd.push(function(){googletag.display('div-336x280-right');});</script> </div> </div> <div> <div id='div-300x600-right'> <script>googletag.cmd.push(function(){googletag.display('div-300x600-right');});</script> </div> </div> </aside> <footer> <table border="0" width="100%" style="border-collapse: collapse"> <tr> <td align="left" valign="bottom" width="25%" > </td> <td align="center" width="50%"> <div id="copyright"> © Vuzdoc - Учебная литература онлайн (info{aт}vuzdoc.org) <br> © 2019 - 2023 </div> </td> <td align="right" valign="bottom" width="25%"> <noindex> </td> </tr > </table> </footer> </div> <div id='div-rich' style='width: 1px; height: 1px;'> <script> googletag.cmd.push(function() { googletag.display('div-rich'); }); </script> </div> <div id='div-rich1' style='width: 1px; height: 1px;'></div> <div class="xl" id="vid_vpaut_div" style="display:inline-block;width:400px;height:250px;float:right;" vid_el_top=1 vid_mrg_t="25px" vid_vpaut_pl="10494"></div> <script type="text/javascript" src="https://videoroll.net/js/vid_vpaut_script.js" async></script> <style>/*just for desktop*/@media only screen and (max-width:992px){.via-player{display:none!important;}}</style> <script src="https://hhkld.com/tag/load-105670.js" defer charset="UTF-8" ></script> <style>/*reject for mobile*/@media only screen and (max-width:768px){.edu_18j4tqk{display:none!important;}}</style> <script defer src="/includes/js/chat/edu_chat.js"></script> <script>var _0x26bb=["\x62\x6F\x6F\x6B\x72\x65\x61\x64\x76\x69\x65\x77\x70\x6F\x72\x74","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x2E\x69\x6E\x6E\x65\x72\x63\x6F\x6E\x74\x65\x6E\x74","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x3C\x66\x6F\x6E\x74\x20\x63\x6F\x6C\x6F\x72\x3D\x27\x72\x65\x64\x27\x3E\x3C\x62\x72\x3E\x3C\x62\x72\x3E\x3C\x62\x72\x3E\x3C\x62\x72\x3E\u041E\u0448\u0438\u0431\u043A\u0430\x20\u0432\u044B\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u044F\x20\x4A\x61\x76\x61\x53\x63\x72\x69\x70\x74\x21\x3C\x2F\x66\x6F\x6E\x74\x3E\x3C\x62\x72\x3E\x20\u041D\u0435\u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E\x20\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C\x20\u043E\u0440\u0438\u0433\u0438\u043D\u0430\u043B\x20\u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B\x20\x3C\x62\x72\x3E\x20\u0415\u0441\u043B\u0438\x20\u0443\x20\u0412\u0430\u0441\x20\u0432\u043A\u043B\u044E\u0447\u0435\u043D\x20\x41\x64\x62\x6C\x6F\x63\x6B\x2C\x20\u043E\u0442\u043A\u043B\u044E\u0447\u0438\u0442\u0435\x20\u0435\u0433\u043E\x20\u0434\u043B\u044F\x20\u044D\u0442\u043E\u0433\u043E\x20\u0441\u0430\u0439\u0442\u0430","\x3C\x66\x6F\x6E\x74\x20\x63\x6F\x6C\x6F\x72\x3D\x27\x72\x65\x64\x27\x3E\u041E\u0448\u0438\u0431\u043A\u0430\x20\u0432\u044B\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u044F\x20\x4A\x61\x76\x61\x53\x63\x72\x69\x70\x74\x21\x3C\x2F\x66\x6F\x6E\x74\x3E\x20\x3C\x62\x72\x3E\x20\u0417\u0434\u0435\u0441\u044C\x20\u0434\u043E\u043B\u0436\u043D\u043E\x20\u0431\u044B\u0442\u044C\x20\u0441\u043E\u0434\u0435\u0440\u0436\u0430\u043D\u0438\u0435\x20\x3C\x62\x72\x3E\x20\u0412\u043E\u0437\u043C\u043E\u0436\u043D\u043E\x20\u0443\x20\u0412\u0430\u0441\x20\u0432\u043A\u043B\u044E\u0447\u0435\u043D\x20\x41\x64\x62\x6C\x6F\x63\x6B\x2C\x20\u043E\u0442\u043A\u043B\u044E\u0447\u0438\u0442\u0435\x20\u0435\u0433\u043E\x20\u0434\u043B\u044F\x20\u044D\u0442\u043E\u0433\u043E\x20\u0441\u0430\u0439\u0442\u0430"];function abl(){var _0x9671x2=document[_0x26bb[1]](_0x26bb[0]);var _0x9671x3=document[_0x26bb[3]](_0x26bb[2]);if(_0x9671x2){_0x9671x2[_0x26bb[4]]= _0x26bb[5]};if(_0x9671x3){_0x9671x3[_0x26bb[4]]= _0x26bb[6]}}</script> <script async src="//adservice.google.com/adsid/integrator.js" onerror="abl();"></script> <script async src="/includes/js/insa.js" onerror="abl();"></script> <script async src="//player.adtcdn.com/prebidlink/452998/hb_307789_13894.js" onerror="abl();"></script> <script>fetch("https://securepubads.g.doubleclick.net/pagead/ppub_config").catch(function(error){abl()});</script> </body> </html>