Преподаватель который помогает студентам и школьникам в учёбе.

Основы программирования HTML

Содержание:

ВВЕДЕНИЕ

В век цифровых технологий и массовой компьютеризации, интернет стал неотъемлемой частью нашей жизни, а web-программирование и web-дизайн престижной и востребованной профессией. Ведь интернет не может существовать сам по себе, и кто-то должен создавать интернет страницы, каждый день и даже каждый час обновлять web-сайты, чтобы пользователю всегда была доступна актуальная и проверенная информация в понятной для него форме. Таким образом, вопрос web-программирования и дизайна является очень актуальным.

World Wide Web - глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы - Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW. Вся информация в Web-браузере отображается в виде Web-страниц.

Web-страницы, поддерживая технологию мультимедиа, объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web-страница, зависит во многом ее успех в Сети.

Также в данной работе рассмотрены основы языка программирования Web-страниц - HTML, который является общепринятым стандартом WWW.

Собственно, появление html и ознаменовало появление интернета в том виде, в котором мы его знаем сейчас, приведя к началу бурного роста сети и количества сайтов в ней. HTML - это сокращение от англ. "HyperText Markup Language", что в переводе на русский означает "язык гипертекстовой разметки". HTML - это стандартный язык, который и по сей день используется для создания веб-страниц, размещаемых в интернете.

Первоначально в основе HTML лежала одна простая идея. Эта идея состояла в том, чтобы внести в обычные текстовые документы, которые люди читали на экране монитора, просто прокручивая или перелистывая страницы, как в книжке, возможность добавления ссылок, переходя по которым, человек мог сразу перескочить на другую страницу или в другое место текста, если данная ссылка его заинтересовала. Возможность добавления в своём тексте ссылок на другие страницы, в сочетании с появившимся к тому времени механизмом задания адреса для любой страницы, выложенной в сети (который известен как URL) и привела к тому, что начала формироваться взаимосвязанная сеть сайтов, воплотившаяся в тот интернет, который мы имеем сейчас.

Это даст нам возможность ознакомиться со структурой Web-страницы и приемами ее правильного оформления.

Объектом исследования является - веб-сайт.

Предметом исследования - программирование сайта на языке HTML.

Цель работы - изучение языка программирования HTML.

Задачи:

Раскрыть основные сведения о языке;
Рассмотреть процесс создания сайта;
Создать веб-сайт на основе разработанного алгоритма.

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

Основные сведения о языке html

1.1. Понятие языка html

Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы.

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

HTML -это гиппертекст

Рис. 1. Структура HTML - это язык разметки гипертекста

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

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

По сути интернет - это одно целое гипертекстовое пространство. Но сам по себе гипертекст мало на что способен даже в плане передачи информации. Представьте себе Русский язык без знаков препинания. Без этого он станет намного менее богатым, не правда ли? Гипертекст также нуждается в своих знаках препинания, т.е. в разметке. Взять, к примеру, абзац выше. На самом деле выглядит всё так:

<p>Гипертекст представляется набором текстов,

содержащих узлы перехода между ними, которые

позволяют избирать читаемые сведения или

последовательность чтения. Общеизвестным и

ярко выраженным примером гипертекста служат

веб-страницы.<br>

<cite>Wikia, раздел <q>Наука</q>.

<a hreflang="ru" target="_blank" title="Определение

гипертекста"

href="http://ru.science.wikia.com/wiki/гипертекст"

rel="nofollow">Гипертекст</a>.

</cite>

</p>

</blockquote>

Просматриваем мы гипертекст при помощи специальных программ - обозревателей сети интернет. Самые популярные программы:

Mozilla Firefox
Internet Explorer
Opera
Google Chrome

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

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

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

Основным преимуществом HTML заключается в том, что документ может быть просмотрен на WEB-браузерах различных типов и на различных платформах.

1.2. Разработка Web-сайта

Создавать свой сайт можно разными способами. Самый простой - установить cms (систему управления контентом) и через неё редактировать сайт прямо на хостинге. В этом случае никаких программ не нужно. Однако у cms есть свои недостатки, и нередко возникает необходимость всё же создать сайт или страничку самостоятельно, чтобы потом закачать на хостинг. Какие программы для этого нужны?

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

Html-редакторы бывают двух видов - визуальные и невизуальные (текстовые). Невизуальные помогают редактировать текст, проверять теги и т. д., но всё равно код в них нужно печатать вручную. Удобнее визуальные редакторы, имеющие помимо режима редактирования html-кода визуальный режим. В визуальном режиме вы можете видеть страничку примерно так, как она должна выглядеть в браузере и можете редактировать её не путём вписывания кода, а вставлять картинки, таблицы, форматировать текст и т. п., удобным образом при помощи нажатия кнопок. Чтобы сделать страничку в визуальном редакторе, не обязательно знать язык html в совершенстве.

Визуальных редакторов html (т. е. программ для создания сайта) довольно много, как платных, так и бесплатных, как совсем простых, так и более сложных. К сожалению, не у всех разработчиков хватает сил и желания развивать и поддерживать свои творения, поэтому некоторые редакторы, например, NVU и Quanta Plus, претендовавшие на то, чтобы заменить известные платные редакторы, на настоящий момент фактически заморожены в своём развитии.

Известные бесплатные визуальные редакторы для создания сайтов на сегодняшний день:

Kompozer - редактор, который годится как для начинающих, так и для профессионалов. Существуют его версии для Windows и Linux.

Amaya - два в одном, редактор страниц и одновременно браузер, который одобрен W3C, он правильно поддерживает все стандарты для html.

SeaMonkey - набор программ для работы в интернете, включающий браузер, почтовую программу, IRC-чат и редактор страниц. Создан на основе продуктов Mozilla.

BlueGriffon - считается преемником более раннего редактора NVU, развитие которого заглохло несколько лет назад.

Бесплатно можно скачать также Microsoft SharePoint Designer 2007

Набор платных визуальных редакторов достаточно велик. Среди них можно выделить такие, как CoffeeCup HTML Editor, Namo WebEditor, RapidWeaver, Web Builder и др. Однако наиболее популярными уже долгое время являются редактор Dreamweaver и линейка редакторов от Microsoft.

Dreamweaver - визуальный редактор, многие годы удерживающий заслуженное лидерство среди программ для создания сайтов. Изначально был разработан и долгое время развивался компанией Macromedia, а затем купившей её компанией Adobe, которая ради Dreamweaver отказалась от дальнейшего развития собственного html-редактора Adobe GoLive. Сейчас Dreamweaver входит в набор продуктов Adobe Creative Suite, представляющий комплексное решение для создания веб-сайтов. Впрочем, его вполне можно использовать и отдельно.

Популярными программами для создания сайтов также являются визуальные редакторы от Microsoft. Долгое время многие вебмастера пользовались для создания сайтов редактором FrontPage, но затем Microsoft прекратила его поддержку, предложив взамен две новых программы - Microsoft Expression Web (считается основным html-редактором от Microsoft) и Microsoft SharePoint Designer, который в большей мере можно считать преемником FrontPage.

Microsoft Expression Web является частью Microsoft Expression Studio - комплекса программ для разработки сайтов.

Microsoft SharePoint Designer является частью Microsoft SharePoint - комплекса программ для организации совместной работы (в т. ч. через интернет, поэтому включает мощные средства для создания сайтов). Последней версией является SharePoint Designer 2016, на сайте Microsoft можно скачать пробную версию программы.

А SharePoint Designer 2007 Microsoft сделала полностью бесплатным, его можно скачать на сайте Microsoft.

1. Основные положения HTML и структура документа

Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа, регистр при вводе текста не важен:

<TITLE> Заголовок документа </TITLE> или <title> Заголовок документа </title>.

Завершающий тэг выглядит также, как стартовый, и отличается от него прямым слешем перед текстом внутри угловых скобок. В данном примере тэг <TITLE> говорит WEB-браузеру об использовании формата заголовка, а тэг </TITLE> - о завершении текста заголовка.

Некоторые тэги, такие, как <P> (тэг, определяющий абзац), не требуют завершающего тэга, но его использование придает исходному тексту документа улучшенную читаемость и структурируемость.

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

Web-страницы описываются на специальном языке, называемом HTML (HyperText Markup Language язык разметки гипертекстовой информации), который позволяет осуществлять простое форматирование текста, вставку графики, а также составление таблиц и цветовое оформление документов.

Будучи подмножеством языка SGML, HTML имеет теговую структуру. Это означает, что в тексте встречаются команды, изменяющие интерпретацию информации.

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.

DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.

<!DOCTYPE html>

<html>

</head>

</body>

</html>

Элементы, находящиеся внутри тега <html>, образуют дерево документа, так называемую объектную модель документа, DOM (document object model). При этом элемент <html> является корневым элементом (см. рисунок 2).

DOM

Рис 2. Простейшая структура веб-страницы

Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.

Предок - элемент, который заключает в себе другие элементы. На рисунке 2 предком для всех элементов является <html>. В то же время элемент <body> является предком для всех содержащихся в нем тегов: <h1>, <p>, <span>, <nav> и т.д.

Потомок - элемент, расположенный внутри одного или более типов элементов. Например, <body> является потомком <html>, а элемент <p> является потомком одновременно для <body> и <html>.

Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 2 <html> является родительским только для <head> и <body>. Тег <p> является родительским только для <span>.

Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 2 только элементы <h1>, <h2>, <p> и <nav> являются дочерними по отношению к <body>.

Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 2 <head> и <body> — элементы одного уровня, так же, как и элементы <h1>, <h2> и <p>являются между собой сестринскими.

Элемент <html>

Является корневым элементом документа (см. таблица 1). Все остальные элементы содержатся внутри тегов <html>...</html>. Все, что находится за пределами тегов, не воспринимается браузером как код HTML и никак им не обрабатывается. Для элемента доступны атрибуты manifest и xmlns, а также ‎глобальные атрибуты.

Таблица 1. Атрибуты тега <HTML>

Атрибут	Описание, принимаемое значение
manifest	С помощью значения атрибута указывается путь к документу кэша манифеста, например: <html manifest="about_company.appcache">

Элемент <head>

Раздел <head>...</head> содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.

Элемент <title>

Обязательным тегом раздела <head> является тег <title>. Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.

Элемент <meta>

Необязательным тегом раздела <head> является одинарный тег <meta>. С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент <head> может содержать несколько элементов <meta>, потому что в зависимости от используемых атрибутов они несут различную информацию.

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

С помощью тега <meta> можно запретить или разрешить индексацию веб-страницы поисковыми машинами:

Индексация и переход по ссылкам разрешены:

Индексация разрешена, переход по ссылкам запрещен:

Индексация и переход по ссылкам запрещены:

Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:

Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:

Для элемента <meta> доступны атрибуты charset, content, http-equiv, name, а также ‎глобальные атрибуты (см. таблица 2).

Таблица 2. Атрибуты тега <META>

Атрибут	Описание, принимаемое значение
charset	Указывает кодировку символов для текущего HTML-документа: <meta charset="UTF-8">
content	Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name, в зависимости от их значения.
http-equiv	Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте: default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей. refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы". Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд: <meta http-equiv="refresh" content="30"> Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url: <meta http-equiv="refresh" content="0; url=http://mail.ru/">

name

Ассоциируется со значением, содержащемся в атрибуте content. Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv, charset или itemprop.
application-name указывает название веб-приложения, используемого на странице.
author указывает имя автора документа в свободном формате.
description определяет краткое описание к содержимому страницы, например:
<meta name="description" content="Описание содержимого страницы">
generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:
<meta name="generator" content="WordPress 4.0"> .
keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:
<meta name="keywords" content="Ключевые слова через запятую">.
Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator, googlebot, publisher, robots, slurp, viewport, хотя ни одно из них еще не было официально принято.

Окончание Таблица 2.

Элемент <style>

Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько (см. таблица 3).

Для элемента доступны атрибуты media, scoped, type, а также ‎глобальные атрибуты.

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

.paper {

width: 200px;

height: 300px;

background-color: #ef4444;

color: #666666;

}

Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:

...

</div>

CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style, например:

Таблица 3. Атрибуты тега <STYLE>

Атрибут	Описание, принимаемое значение
media	Определяет, для какого типа устройства предназначены те или иные каскадные таблицы стилей. Внутри таблицы стилей CSS специфичные правила для определенных устройств прописываются с помощью media query.
nonce	Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста.
type	Определяет MIME-тип подключаемого файла со стилями, в данном случае <style type="text/css">.

Элемент <link>

Задать стили для документа можно также при помощи другого способа — записать их в отдельный файл с расширением .css, например, style.css (см. таблица 4).

Подключить файл со стилями к веб-странице можно двумя способами:
- через директиву @import url

<!DOCTYPE html>

<html>

<head>

<style>

@import url(style.css);

</style>

<meta>

</head>

- с использованием элемента <link>.

Элемент не требует закрывающего тега. Данный элемент определяет отношение между текущей страницей и другими документами.

. Таких элементов на странице может быть несколько. Запись будет иметь следующий вид:

Для элемента доступны атрибуты href, hreflang, media, rel, type, а также ‎глобальные атрибуты.

Таблица 4. Атрибуты тега <LINK>

Атрибут	Описание, принимаемое значение
crossorigin	Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта. anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: *(или имя домена вместо звёздочки), то загрузка изображения будет заблокирована. use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true, то загрузка изображения будет заблокирована.
href	Основной атрибут тега, в качестве значения выступает путь к файлу со стилями.
hreflang	Определяет язык текста в документе, на который идет ссылка.
media	Определяет тип устройства, к которым должен быть применен ресурс ссылки.
nonce	Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста.

Продолжение Таблица 4.

rel

Атрибут определяет отношения между текущим документом и документом, на который идет ссылка.
alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom),

author ссылка на страницу об авторе документа или на страницу с контактными данными автора.
bookmark ссылка на ближайшего предка статьи, являющегося связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка.
external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта.
first указывает ссылку, ведущую на первый документ из последовательности документов.
help ссылка на документ со справкой.
icon определяет путь к иконке, которая будет использована для текущего документа.
last указывает ссылку, ведущую на последний документ в последовательности документов.
license ссылка на сведения об авторских правах для документа.
next указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии.
<link rel="next" href="/next.html" type="text/html" title="Следующая страница">
nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер.
noreferrer указывает на то, что заголовок запроса клиента, содержащий url источника запроса, не должен передаваться при переходе по ссылке.
pingback указывает адрес пингбэк-сервера, что дает возможность для блога автоматически оповещать сайты, ссылающиеся на него.
prefetch указывает, что следует заранее кэшировать файл, на который ведет ссылка.
prev указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии.
<link rel="prev" href="/next.html" type="text/html" title="Предыдущая страница">
search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов.
sidebar указывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера, и некоторые браузеры при щелчке по гиперссылке открывают окно для добавления ссылки в панель закладок.
stylesheet ссылка на внешний файл, который будет использоваться в качестве таблицы стилей для данного документа.
tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу.
up указывает, что страница является частью иерархической структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре.

sizes

Указывает размер иконок для визуального отображения. Атрибут sizesиспользуется только совместно с rel="icon", и может принимать следующий значения:
ширинахвысота — определяет список размеров, разделенных пробелами, каждый размер должен быть в формате — ширинахвысота (размеры иконки задаются в пикселях), например:
<link rel="icon" href="favicon.png" sizes="16x16 32х32" type="image/png">;
any — иконка может масштабироваться до любого размера.

Окончание Таблица 4.

title	Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст.
type	Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css".

Элемент <script>

Элемент <script> позволяет присоединять к документу различные сценарии. Закрывающий тег обязателен, при этом текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента (см. таблица 5).

Для элемента доступны атрибуты async, charset, defer, src, type, а также ‎глобальные атрибуты.

Таблица 5. Атрибуты тега <SCRIPT>

Атрибут	Описание, принимаемое значение
async	Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы).
charset	Определяет кодировку символов
crossorigin	Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src). anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена, скрипт не будет загружен. use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true, скрипт не будет загружен.
defer	Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя.
nonce	Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется.
src	Указывает на месторасположение файла со сценарием, значение атрибута — это url файла, содержащего JavaScript-программу.
type	Используются для объявления языка сценария, использованного при составлении содержимого тега.

Элемент <body>

В этом разделе располагается все содержимое документа. Для элемента доступны ‎глобальные атрибуты (см. таблица 6).

Таблица 6. Атрибуты тега <BODY>

Атрибут	Описание, принимаемое значение
onafterprint	Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати.
onbeforeprint	Событие, срабатывающее перед отправкой страницы на печать.
onbeforeunload	Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу.
onhashchange	Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2.
onmessage	Событие происходит, когда сообщение получено через источник события.
onoffline	Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало.
ononline	Событие вызывается браузером в том случае, когда соединение с интернет возобновилось.

Окончание Таблица 4.

onpagehide	Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д.
onpageshow	Событие происходит, когда пользователь переходит на веб-страницу, после события onload.
onunload	Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера.

Основным элементом языка HTML являются теги. Тег - это, как правило, парная конструкция, предназначенная для задания свойств текста или другой информации, расположенной внутри него. Например, если в html-документе мы напишем:

"На территории Германии был найден неизвестный науке вид ракоскорпионов - <em> Jaekelopterus rhenaniae </em>",

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

На территории Германии был найден неизвестный науке вид ракоскорпионов - Jaekelopterus rhenaniae

Помимо тега <em>, отвечающего за отображение наклонного текста, в языке HTML существует ещё очень большое количество тегов, предназначенных для самых различных целей. Используя эти теги, мы можем вручную, с помощью простого текстового редактора, такого, как, например, встроенный в Windows "Блокнот", создать веб-страничку, пригодную для размещения в интернете и просмотра в браузере. Однако в настоящее время существуют специальные программы - визуальные редакторы веб-страниц, с помощью которых создавать отдельные страницы и целые сайты значительно быстрее и удобнее. Наиболее известной программой из спектра визуальных редакторов веб-страниц является Dreamweaver фирмы Adobe (см. также свежий обзор визуальных html-редакторов). Всё же, хотя с помощью визуального редактора редактировать веб-страницу значительно проще, для настоящего веб-мастера знание языка HTML является необходимым - даже лучшие визуальные реадкторы не всегда правильно или оптимально вставляют теги в html-код, и, в таких случаях, без ручного его исправления не обойтись.

2. Описание создания сайта

2.1. Гипертекстовые ссылки

Важным дополнением к языку HTML являются стандарты CSS (каскадных таблиц стилей), которые были разработаны в конце 90-х.

Например, если мы хотим использовать крупный жирный текст, выделенный красным цветом, вместо того, чтобы каждый раз писать в тексте веб-страницы нужный для этого набор html-тегов:

<font color="red" size="+1"><strong>Внимание!</strong></font>

мы можем сделать следующее - описать специальный стиль "redstyle":

.redstyle {
font-size: larger;
font-weight: bold;
color: red;
}

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

<span class="redstyle">Внимание!</span>

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

Создание сайта начинается не в визуальном редакторе веб-страниц (ну или с ручного написания html-кода), а с создания дизайна для этого сайта. В этом случае создание html-страницы и размещение на ней блоков текста и элементов графического оформления - рисунков, анимации и т. д. (подобный процесс называется вёрсткой) будет уже вторым этапом. Вёрстка сайта, имеющего сложный дизайн, может быть довольно непростым и утомительным процессом. Задач обеспечить правильное красивое расположение на странице блоков текста и графики осложняется необходимостью учитывать возможность того, что эта страница будет просматриваться пользователи на разных мониторах с разным разрешением экрана и в разных браузерах, которые имеют свои особенности отображения содержимого веб-страниц. В целом к построению (более-менее сложных) веб-страниц существуют два различных подхода - это вёрстка с помощью таблиц, в ячейки которых помещается содержимое, и вёрстка с помощью тегов <div>, который позволяет указывать в своих атрибутах произвольное расположение и размер блока, в котором будет помещаться его содержимое. Каждый из этих подходов имеет свои плюсы и минусы, и между сторонниками того или иного метода неизбежно возникают споры о том, какой из них более удобный и более правильный. В целом, вёрстка с помощью таблиц является исторически более ранним методом построения сайтов и более удобна в тех случаях, когда требуется обеспечить "резиновость" дизайна и сделать так, чтобы размеры блоков на странице автоматически подстраивались под их содержимое и размеры экрана, вёрстка с помощью тегов <div> получила распространение относительно позже и оптимально подходит тогда, когда сайт имеет фиксированный дизайн.

Гипертекстовые ссылки являются ключевым компонентом, делающим WEB привлекательным для пользователей. Добавляя гипертекстовые ссылки (далее - ссылки), вы делаете набор документов связанным и структурированием, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно.

Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки. Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например, запрашивать файл по FTP-протоколу для отображения его браузером. URL может указывать на специальное место по абсолютному пути доступа, или указывать на документ в текущем пути доступа, что часто используется при организации больших структурированных WEB-сайтов.

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

<A HREF="URL"> текст-который-будет-подсвечен-как-ссылка </A>

Тэг <A HREF="URL"> открывает описание ссылки, а тэг </A> - закрывает его. Любой текст, находящийся между данными двумя тэгами подсвечивается специальным образом Web-браузером. Обычно этот текст отображается подчеркнутым и выделен синим (или другим заданным пользователем) цветом. Текст, обозначающий URL, не отображается браузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте). Вот пример сегмента HTML-документа:

Ссылки на точки внутри документа. Вы можете делать ссылки на различные участки или разделы одного и того же документа, используя специальных скрытый маркер для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя прокрутку экрана. Как только вы щелкнете на ссылке, браузер переместит вас на указанный раздел документа, а строка, в которой стоит маркер данного раздела (обычно, первая строка раздела или заголовок раздела) будет размещена на первой строке окна браузера (если данная строка не присутствует уже на экране браузера).

Для создания такой ссылки необходимо выполнить следующие шаги:

- Создайте маркер раздела. Синтаксис данного маркера следующий:

<A NAME="named_anchor"> Текст-который-отобразится-в-первой-строке </A>

- Создайте ссылку на данный маркер:

<A HREF="#named_anchor"> Текст </A>

Например:

<p><b>Список разделов</b></p> <ul> <li><a href="#ex1">Раздел 1</a></li> <li><a href="#ex2">Раздел 2</a></li> </ul> <p><a name="ex1"></a>Раздел 1</p> <ul> <p>Текст раздела 1</p> </ul> <p><a name="ex2"></a>Раздел 2</p> <ul> <p>Текст раздела 2 <br></p>

Символы "#ex1" сообщает вашему браузеру, что необходимо найти в данном HTML-документе маркер с именем "ex1".

Когда пользователь щелкнет мышью на строке "Раздел 1", браузер перейдет сразу к разделу 1.

2.2. Графика внутри документа

Одна из наиболее привлекательных черт Web - возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тэга <IMG...ISMAP>. Использование данного тэга позволяет значительно улучшить внешний вид и функциональность документов.

Существует два способа использования графики в HTML-документах. Первый - это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее используемая техника при проектировании документов, называемая иногда "inline image". Синтаксис тэга:

Опишем элементы синтаксиса тэга::

Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает браузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством браузеров.="text":

Данный необязательный элемент задает текст, который будет отображен браузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство браузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. Тэг ALT рекомендуется, если ваши пользователи используют браузер, не поддерживающий графический режим, например Lynx.=n1:

Данный необязательный параметр используется для указания высоты рисунка в пикселях. Если данный параметр не указан, то используется оригинальная высота рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали, что позволяет более четко определять внешний вид документа. Однако, некоторые браузеры не поддерживают данный параметр. С другой стороны, экранное разрешение у вашего клиента может отличаться от вашего, поэтому будьте внимательны при задании абсолютной величины графического объекта.=n2:

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

Этот параметр сообщает браузеру, что данное изображение позволяет пользователю выполнять какие-либо действия, щелкая мышью на определенном месте изображения. Данная возможность является расширением HTML.

Приведем пример использования данного тэга:

С версии HTML 2.0 у тэга <IMG> появились дополнительные параметры:

Новые параметры::

Данный параметр позволяет автору определить ширину рамки вокруг рисунка.:

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

То же самое, что и VSPACE, но только по горизонтали.

Фоновые рисунки. Большинство браузеров позволяет включать в документ фоновый рисунок, который будет матрицироваться и отображаться на фоне всего документа. Некоторые пользователи любят фоновую графику, некоторые нет. Ненавязчивый полупрозрачный рисунок (обои) обычно хорошо выглядит в качестве фона для большинства документов.

Описание фонового рисунка включается в тэг BODY и выглядит следующим образом:

<BODY BACKGROUND="picture.gif">.

Задание стандартных цветов. Многие HTML-авторы любят использовать заранее предопределенные цвета фона документа, обычного текста и ссылок. Чтобы задать эти цвета, необходимо включить в тэг <BODY> дополнительные параметры:

<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX" LINK="#XXXXXX"> каждый из параметров определяет цвет того или иного элемента. Опишем эти параметры::

Цвет фона документа:

Цвет простого текста документа:

Цвет ссылки. Цвет задается шестизначным числом в шестнадцатеричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF - белому.

Например: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">

Данная строка определяет белый цвет фона документа, черный текст и серебристые ссылки.

Горизонтальная линия. Используя тэг <HR>, вы можете разделить текст горизонтальной чертой.

Формат тэга:

Параметры тэга::

Толщина линии в пикселях.:

Ширина линии в пикселях или процентах от ширины окна браузера.: Расположение на экране (слева | по центру | справа).: По умолчанию линия представлена в 3D виде с тенью. NOSHADE позволяет представить линию просто однотонной темной полоской.

2.3. Добавление стилей в документ

Позволяет использовать различные стили шрифтов для выделения текстовой информации в ваших документах. Вот короткий список стилей, поддерживаемых большинством браузеров: (жирный) (наклонный) spaced (type writer - с использованием фиксированных шрифтов)

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

Таблица 7. Основные стили текста

Стиль	Элемент или тэг	Результат
Bold	<B> Этот текст жирный </B>	Этот текст жирный
Italic	<I> Этот текст наклонный </I>	Этот текст наклонный
Mono spaced	<TT> Этот текст с непроп. шрифтом </TT>	Этот текст с непроп. шрифтом

Комбинирование стилей позволяет вам отображать в одной строке несколько элементов различными стилями, например:

<b>Жизнь</b> - <i>это <b>песня!</b></i>

Жизнь - это песня!

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

Дополнительные стили:

· big (большой)

· small (маленький)

· sub (подстрочник)

· sup (надстрочник)

Таблица 8. Дополнительные стили текста

Стиль	Элемент или тэг	Результат
Big	Этот текст <BIG> большой </BIG>	Этот текст большой
Small	Этот текст <SMALL> маленький </SMALL>	Этот текст маленький
Sub	Этот текст <SUB> подстрочник </SUB>	Этот текст подстрочник
Sup	Этот текст <SUP> надстрочник </SUP>	Этот текст адстрочник

Размер шрифта <FONT SIZE>. Вы можете изменять размер шрифта при помощи тэга: <FONT SIZE=+|- n>

Шрифт может иметь размер от 1 до 7. Вы можете прямо указать размер шрифта цифрой, или указать смещение относительно базового значения (по умолчанию - 3) в положительную или отрицательную сторону. Базовое значение можно изменить при помощи тэга: <BASEFONT SIZE=n>

Например: <p>и <font SIZE=+1>з</font><font SIZE=+2>м</font> <font SIZE=+3>е</font><font SIZE=+4>н</font> <font SIZE=+3>е</font><font SIZE=+2>н</font> <font SIZE=+1>и</font> е</p>

Изменение цвета шрифта <FONT SIZE>. Вы можете изменить цвет шрифта при помощи тэга: <FONT COLOR="#XXXXXX>

Цвет указывается в RGB-формате (Red-Green-Blue) посредством указания размерности каждой компоненты цвета в шестнадцатеричном формате. Например, белый цвет обозначается "000000", черный - "FFFFFF", синий - "0000FF" и т.п.

<FONT COLOR="#FF0000"> Красный </FONT> <FONT COLOR="#00FF00"> Зеленый </FONT> <FONT COLOR="#0000FF"> Синий.

2.4 Оптимизация графики для web

Оптимизацию графики обязательно надо автоматизировать. О ней легко забыть, рекомендации меняются, да и сам контент может легко проскользнуть мимо конвейера сборки. Для автоматизации при сборке используйте imagemin или libvips. Есть и много других.

Большинство CDN (например, Akamai) и сторонних решений вроде Cloudinary, imgix, Fastly Image Optimizer, Instart Logic SmartVision и ImageOptim API предлагают комплексные автоматизированные решения для оптимизации изображений.

Проекты Imageflow или Thumbor предлагают альтернативу на собственном хостинге.

Необходимо эффективно сжимать изображения.

Как минимум, используйте ImageOptim. Он значительно уменьшает размер при сохранении визуального качества. Есть версии под Windows и Linux.

Более тщательный подход: прогоняйте JPEG-файлы через MozJPEG (для веб-контента приемлемо качество q=80 или ниже) и рассмотрите поддержку Progressive JPEG. Файлы PNG пропускайте через pngquant, а SVG — через SVGO. Явно укажите очистку от метаданных (--strip для pngquant), чтобы избежать раздутия файлов. Вместо сумасшедших гигантских анимированных GIF отдавайте пользователям видео H.264 (или WebM для Chrome, Firefox и Opera)! Если не можете себе это позволить, то хотя бы используйте Giflossy. Когда есть возможность потратить пару циклов CPU, а вам нужно изображение лучшего качества, и вы готовы смириться с длительным временем кодирования, то попробуйте Guetzli.

Некоторые браузеры анонсируют поддержку графических форматов через заголовок Accept. Это можно использовать при выборе формата для выдачи: например, формат WebP для браузеров на основе Blink, таких как Chrome, и вариант JPEG/PNG для других браузеров.

Сжатие всегда можно улучшить. Есть инструменты для генерации и выдачи srcset. В браузерах на основе Blink выбор ресурсов автоматизируется с помощью client-hints — и вы сэкономите трафик на пользователях, которые указали в браузере опцию «экономия данных» через подсказку Save-Data.

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

Подбирайте минимальное количество цветов вручную (для качественной передачи антиалиасного одноцветного изображения на одноцветном фоне достаточно 5-8 цветов, двух-трехцветного изображения - 15-25 цветов) Если исходное изображение Grayscale, перед индексацией переведите его в RGB-гамму.

По возможности избегайте включения опции "dithering"- она увеличивает размер файла. Эта опция необходима, только если в изображении присутствует цветовой или тоновой раскат (напр. тень). Назначая прозрачный фон, после применения "dithering" убедитесь, что фон не стал "клетчатым".

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

3. Алгоритм практической разработки Web-сайта на языке HTML

3.1. Разработка структуры сайта

На первом этапе продумывают, как должен выглядеть сайт и делают его дизайн, т. е. создают его оформление и внешний вид. Часто дизайн сайта рисуют в специальной программе типа Adobe Photoshop, а затем этот рисунок станет основой для дальнейшей работы над сайтом. Отсюда следует, что научиться рисовать дизайн и пользоваться программами Adobe Photoshop, Corel Draw, которые часто используются для создания дизайна сайтов, есть один из первых шагов к тому, чтобы научиться создавать свои собственные сайты. Однако для того, чтобы создать простой сайт, это не обязательно. Дизайн сайта в Adobe Photoshop рисуют тогда, когда хотят сделать сложный и красиво оформленный сайт с большим количеством графики и т. п., сайт с простым дизайном и небольшим количеством графики можно сделать, начав сразу со второго этапа.

На втором этапе делают вёрстку сайта и создание html-страницы или html-шаблона. Что такое вёрстка? Вёрстка - это процесс размещения на странице различных элементов - текста, графики и т. п. таким образом, чтобы всё это выглядело так, как задумано дизайнером, создававшим дизайн сайта. Если у вас простой сайт, можно, не делая дизайна, сразу начать с создания html-страницы (но для сложных сайтов сделать сначала дизайн, а потом вёрстку удобнее). Этот второй этап является, возможно, наиболее важным. Страницы на языке html - это основа любого сайта, и для того, чтобы создать свой собственный сайт, вы должны создать страницы для этого сайта на языке html. Как создавать html-страницу? Можно это сделать двумя основными способами - либо самому написать html-код, и это можно сделать даже в "Блокноте", либо сделать сайт в визуальном редакторе для создания сайтов - например, редакторе Dreamweaver. Чтобы сделать сайт в "Блокноте", нужно очень хорошо изучить язык html. Для создания в визуальном редакторе детальное знание html не обязательно, но всё же некоторое знание его основ желательно. В принципе, можно создать html-страницу даже в "Ворде", которым пользоваться умеют практически все, выбрав при создании нового документа соответствующий тип, но код страницы, созданной в "Ворде", очень неоптимален, поэтому лучше всё-таки использовать специальные редакторы для создания сайтов.

3.2. Создание сайта «VR атракцион»

На третьем этапе делают программирование сайта. Это не обязательно, но нужно, если сайт требуется сделать интерактивным, добавить к нему разные интересные функции, вроде голосований, форумов, чатов и т. д. Для того, чтобы запрограммировать эти интересные функции, нужно изучить языки веб-программирования. Код программ практически всегда пишется строчка за строчкой, в виде текста в том же "Блокноте" или более продвинутом редакторе. В рамках написания данной курсовой работы мы создали интерфейс сайта «VR аттракцион» рисунок 3.

$C:\Users\User\Desktop\никита\Screenshot from 2018-11-10 10.45.41.png$

Рис. 3 Интерфейс web-страницы «VR аттракцион»

Написанные свои собственные скрипты (т. е. программы для сайта) смотрите в Приложении 1.

В принципе, после этих трёх этапов сайт уже готов. Однако сайт ещё нужно разместить в интернете, а для этого нужно придумать сайту имя и найти хостинг, т. е. место для размещения сайта в интернете.

Однако и выбрать хостинг для своего сайта и разместить его на хостинге всё ещё мало. Для того, чтобы на сайт стали заходить посетители, нужно заняться его продвижением или, как ещё говорят, раскруткой.

ЗАКЛЮЧЕНИЕ

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

Термин HTML (Hyper Text Markup Language) означает «язык маркировки гипертекстов». Это понятие более широкое, включает в себя Интернет и локальные сети, редакторы, броузеры, разнообразные програмные продукты, компакт-диски, обучающие курсы, дизайн и многое другое. HTML – своеобразная противоположность сложным языкам программирования, известным только специалистам.

HTML, как основа создания WEB-страниц, имеет прямое отношение и к новому направлению изобразительного искусства – WEB-дизайн. Художнику в Интернете недостаточно просто нарисовать красивые картинки, оригинальный логотип, создать новый фирменный стиль. Он должен еще поместить все это в Сети, продумать связь между WEB-страницами, чтобы все двигалось, откликалась на действие пользователя, поражало воображение, вызывало желание создать что-нибудь свое, оригинальное в этой области.

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

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

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

При этом были решены задачи, поставленные при написании данной работы.

В результате проведенных работ цель курсовой работы была достигнута.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

Andy, Harris HTML, XHTML and CSS All–In–One For Dummies® / Andy Harris. - Москва: Машиностроение, 2012. - 254 c.
Ben, Henick HTML & CSS – The Good Parts / Ben Henick. - Москва: СИНТЕГ, 2014. - 350 c.
Ed, Tittel HTML, XHTML & CSS For Dummies® / Ed Tittel. - Москва: Высшая школа, 2015. - 416 c.
Дакетт, Джон HTML и CSS. Разработка и дизайн веб-сайтов (+ CD-ROM) / Джон Дакетт. - М.: Эксмо, 2013. - 480 c.
Дакетт, Джон Основы веб-программирования с использованием HTML, XHTML и CSS / Джон Дакетт. - М.: Эксмо, 2015. - 768 c.
Дебольт HTML и CSS. Совместное использование / Дебольт, Вирджиния. - М.: НТ Пресс, 2016. - 512 c.
Дронов, В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / В. Дронов. - М.: БХВ-Петербург, 2014. - 351 c.
Дронов, Владимир HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / Владимир Дронов. - М.: БХВ-Петербург, 2016. - 416 c.
Квинт, Игорь Создаем сайты с помощью HTML, XHTML и CSS / Игорь Квинт. - М.: Питер, 2014. - 448 c.
Лазаро, Исси Коэн Полный справочник по HTML, CSS и JavaScript / Лазаро Исси Коэн, Джозеф Исси Коэн. - М.: ЭКОМ Паблишерз, 2016. - 943 c.
Мержевич, Влад HTML и CSS на примерах / Влад Мержевич. - М.: "БХВ-Петербург", 2016. - 448 c.
Никсон, Р. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 / Р. Никсон. - Москва: Мир, 2016. - 688 c.
Никсон, Робин Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript и CSS / Робин Никсон. - М.: "Издательство "Питер", 2013. - 560 c.
Пауэрс, Дэвид Adobe Dreamweaver, CSS, Ajax и PHP / Дэвид Пауэрс. - М.: БХВ-Петербург, 2014. - 982 c.
Прохоренок, Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н.А. Прохоренок, В.А. Дронов. - Москва: РГГУ, 2015. - 768 c.
Прохоренок, Николай HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера (+ CD-ROM) / Николай Прохоренок. - М.: БХВ-Петербург, 2013. - 912 c.
Пфаффенбергер HTML, XHTML и CSS. Библия пользователя / Пфаффенбергер и др. - М.: Вильямс; Издание 3-е, 2014. - 752 c.
Ташков, Петр Веб-мастеринг HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка / Петр Ташков. - М.: Книга по Требованию, 2012. - 512 c.
Титтел, Эд HTML, XHTML и CSS для чайников / Эд Титтел , Джефф Ноубл. - М.: Диалектика, 2016. - 400 c.
Фримен, Элизабет Изучаем HTML, XHTML и CSS / Элизабет Фримен , Эрик Фримен. - М.: Питер, 2016. - 720 c.
Хольцшлаг, Молли Э. Использование HTML 4. Специальное издание (+ CD - ROM) / Хольцшлаг Молли Э.. - М.: Вильямс, 2016. - 988 c.
Чебыкин, Ростислав Самоучитель HTML и CSS. Современные технологии / Ростислав Чебыкин. - Москва: Мир, 2013. - 624 c.
Чуковский, К. Coc-the-roach. Тараканище / К. Чуковский. - М.: Детская литература, 2016. - 818 c.
Шафер, Стивен HTML, XHTML и CSS. Библия пользователя / Стивен Шафер. - Москва: Высшая школа, 2012. - 656 c.
Эрик, Фримен Изучаем HTML, XHTML и CSS / Фримен Эрик. - М.: Питер, 2013. - 569 c.

Приложения

Приложение 1. Код интерфейса сайта «VR аттракцион»

!DOCTYPE html>

<head>

<title>Users info</title>

<body>

<nav id="w1" class="navbar-inverse navbar-fixed-top navbar"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w1-collapse"><span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span></button><a class="navbar-brand" href="/">VR-Attraction</a></div><div id="w1-collapse" class="collapse navbar-collapse"><ul id="w2" class="navbar-nav navbar-right nav"><li><a href="/attractions/index">Attractions</a></li>

<li><a href="/users/index">Settings</a></li>

<li class="active"><a href="/usersinfo/index">Users Info</a></li>

<li><a href="/catalog/index">Catalog</a></li>

<li><a href="/genres/index">Genres</a></li>

<li><a href="/localegenres/index">Locale Genres</a></li>

<li><a href="/locale/index">Locale Content</a></li>

<input type="hidden" name="_csrf" value="jHYWYV4auC8aDAYB-ilZSiz1XigK497phdIYEPdj8Zy4IXhWDWPhHUtLdmyUfgMNXZQ2azvbia7RjUojjw6C5A=="><button type="submit" class="btn btn-link logout">Logout (admin)</button></form></li></ul></div></div></nav>

<li class="active">Users info</li>

</ul> <div class="usersinfo-index">

<h1>Users info</h1>

<p>

<div id="w0" class="grid-view"><div class="summary">Showing <b>1-2</b> of <b>2</b> items.</div>

<tr><th><a href="/usersinfo/index?sort=u_id" data-sort="u_id">User</a></th><th><a href="/usersinfo/index?sort=full_name" data-sort="full_name">Full Name</a></th><th><a href="/usersinfo/index?sort=address" data-sort="address">Address</a></th><th><a href="/usersinfo/index?sort=phone" data-sort="phone">Phone</a></th><th><a href="/usersinfo/index?sort=bank_account" data-sort="bank_account">Bank Account info</a></th><th class="action-column"> </th></tr><tr id="w0-filters" class="filters"><td><input type="text" class="form-control" name="UsersinfoSearch[u_id]"></td><td><input type="text" class="form-control" name="UsersinfoSearch[full_name]"></td><td><input type="text" class="form-control" name="UsersinfoSearch[address]"></td><td><input type="text" class="form-control" name="UsersinfoSearch[phone]"></td><td><input type="text" class="form-control" name="UsersinfoSearch[bank_account]"></td><td> </td></tr>

</thead>

<tbody>

<tr data-key="1"><td>1</td><td>Ivan Ivanovich Ivanov</td><td>77 Lenina Tambox Russia 121354</td><td>89994445566</td><td>Test test<br />

werwerwer<br />

werwer<br />

INN<br />

BIK<br />

KPP</td><td><a href="/usersinfo/view?id=1" title="View" aria-label="View" data-pjax="0"><span class="glyphicon glyphicon-eye-open"></span></a> <a href="/usersinfo/update?id=1" title="Update" aria-label="Update" data-pjax="0"><span class="glyphicon glyphicon-pencil"></span></a> <a href="/usersinfo/delete?id=1" title="Delete" aria-label="Delete" data-pjax="0" data-confirm="Are you sure you want to delete this item?" data-method="post"><span class="glyphicon glyphicon-trash"></span></a></td></tr>

</tbody></table>

</div></div>

</div>

<p class="pull-left">© VR-Attraction 2018</p>

</div>

</footer>

#yii-debug-toolbar-logo {

position: fixed;

right: 31px;

bottom: 4px;

}

@media print {

.yii-debug-toolbar {

display: none !important;

}

.yii-debug-toolbar {

font: 11px Verdana, Arial, sans-serif;

text-align: left;

width: 96px;

transition: width .3s ease;

z-index: 1000000;

}

.yii-debug-toolbar_active {

width: 100%;

}

.yii-debug-toolbar_position_top {

margin: 0 0 20px 0;

width: 100%;

}

.yii-debug-toolbar_position_bottom {

position: fixed;

right: 0;

bottom: 0;

margin: 0;

}

.yii-debug-toolbar__bar {

position: relative;

padding: 0;

font: 11px Verdana, Arial, sans-serif;

text-align: left;

overflow: hidden;

box-sizing: content-box;

background: rgb(255, 255, 255);

background: -moz-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(247, 247, 247) 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(247, 247, 247) 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(247, 247, 247) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0); /* IE6-9 */

border: 1px solid rgba(0, 0, 0, 0.11);

/* ensure debug toolbar text is displayed ltr even on rtl pages */

direction: ltr;

}

.yii-debug-toolbar.yii-debug-toolbar_active:not(.yii-debug-toolbar_animating) .yii-debug-toolbar__bar {

overflow: visible;

}

.yii-debug-toolbar:not(.yii-debug-toolbar_active) .yii-debug-toolbar__bar,

.yii-debug-toolbar.yii-debug-toolbar_animating .yii-debug-toolbar__bar {

height:40px;

}

.yii-debug-toolbar__bar:after {

content: '';

display: table;

clear: both;

}

.yii-debug-toolbar__view {

height: 0;

overflow: hidden;

background: white;

}

.yii-debug-toolbar__view iframe {

margin: 0;

padding: 0;

padding-top: 10px;

height: 100%;

width: 100%;

border: 0;

}

.yii-debug-toolbar_iframe_active .yii-debug-toolbar__view {

height: 100%;

}

.yii-debug-toolbar_iframe_animating .yii-debug-toolbar__view {

transition: height .3s ease;

}

.yii-debug-toolbar__block {

float: left;

margin: 0;

border-right: 1px solid rgba(0, 0, 0, 0.11);

padding: 4px 8px;

line-height: 32px;

white-space: nowrap;

}

.yii-debug-toolbar__block_active,

.yii-debug-toolbar__ajax:hover {

background: rgb(247, 247, 247); /* Old browsers */

background: -moz-linear-gradient(top, rgb(247, 247, 247) 0%, rgb(224, 224, 224) 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, rgb(247, 247, 247) 0%, rgb(224, 224, 224) 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, rgb(247, 247, 247) 0%, rgb(224, 224, 224) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#e0e0e0', GradientType=0); /* IE6-9 */

}

.yii-debug-toolbar__block a {

display: inline-block;

text-decoration: none;

color: black;

}

.yii-debug-toolbar__block img {

vertical-align: middle;

}

.yii-debug-toolbar__label {

display: inline-block;

padding: 2px 4px;

font-size: 12px;

font-weight: normal;

line-height: 14px;

white-space: nowrap;

vertical-align: middle;

max-width: 100px;

overflow-x: hidden;

text-overflow: ellipsis;

color: #ffffff;

text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

background-color: #999999;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

}

.yii-debug-toolbar__label:empty {

display: none;

}

a.yii-debug-toolbar__label:hover,

a.yii-debug-toolbar__label:focus {

color: #ffffff;

text-decoration: none;

cursor: pointer;

}

.yii-debug-toolbar__label_important,

.yii-debug-toolbar__label_error {

background-color: #b94a48;

}

.yii-debug-toolbar__label_important[href] {

background-color: #953b39;

}

.yii-debug-toolbar__label_warning,

.yii-debug-toolbar__badge_warning {

background-color: #f89406;

}

.yii-debug-toolbar__label_warning[href] {

background-color: #c67605;

}

.yii-debug-toolbar__label_success {

background-color: #468847;

}

.yii-debug-toolbar__label_success[href] {

background-color: #356635;

}

.yii-debug-toolbar__label_info {

background-color: #3a87ad;

}

.yii-debug-toolbar__label_info[href] {

background-color: #2d6987;

}

.yii-debug-toolbar__label_inverse,

.yii-debug-toolbar__badge_inverse {

background-color: #333333;

}

.yii-debug-toolbar__label_inverse[href],

.yii-debug-toolbar__badge_inverse[href] {

background-color: #1a1a1a;

}

.yii-debug-toolbar__title {

background: rgb(247, 247, 247); /* Old browsers */

background: -moz-linear-gradient(top, rgb(247, 247, 247) 0%, rgb(224, 224, 224) 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, rgb(247, 247, 247) 0%, rgb(224, 224, 224) 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, rgb(247, 247, 247) 0%, rgb(224, 224, 224) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#e0e0e0', GradientType=0); /* IE6-9 */

}

.yii-debug-toolbar__block_last{ /* creates space for .yii-debug-toolbar__toggle, .yii-debug-toolbar__external */

width: 80px;

height: 40px;

float: left;

}

.yii-debug-toolbar__toggle,

.yii-debug-toolbar__external {

cursor: pointer;

position: absolute;

width: 30px;

height: 30px;

font-size: 25px;

font-weight: 100;

line-height: 28px;

color: #ffffff;

text-align: center;

opacity: 0.5;

filter: alpha(opacity=50);

transition: opacity .3s ease;

}

.yii-debug-toolbar__toggle:hover,

.yii-debug-toolbar__toggle:focus,

.yii-debug-toolbar__external:hover,

.yii-debug-toolbar__external:focus {

color: #ffffff;

text-decoration: none;

opacity: 0.9;

filter: alpha(opacity=90);

}

.yii-debug-toolbar__toggle-icon,

.yii-debug-toolbar__external-icon {

display: inline-block;

background-position: 50% 50%;

background-repeat: no-repeat;

}

.yii-debug-toolbar__toggle {

right: 10px;

bottom: 4px;

}

.yii-debug-toolbar__toggle-icon {

padding: 7px 0;

width: 10px;

height: 16px;

transition: -webkit-transform .3s ease-out;

transition: transform .3s ease-out;

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

.yii-debug-toolbar_active .yii-debug-toolbar__toggle-icon {

-webkit-transform: rotate(0);

transform: rotate(0);

}

.yii-debug-toolbar_iframe_active .yii-debug-toolbar__toggle-icon {

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

}

.yii-debug-toolbar__external {

display: none;

right: 50px;

bottom: 4px;

}

.yii-debug-toolbar_iframe_active .yii-debug-toolbar__external {

display: block;

}

.yii-debug-toolbar__external-icon {

padding: 8px 0;

width: 14px;

height: 14px;

background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDUwIDUwIj48cGF0aCBmaWxsPSIjNDQ0IiBkPSJNMzkuNjQyIDkuNzIyYTEuMDEgMS4wMSAwIDAgMC0uMzgyLS4wNzdIMjguMTAzYTEgMSAwIDAgMCAwIDJoOC43NDNMMjEuNyAyNi43OWExIDEgMCAwIDAgMS40MTQgMS40MTVMMzguMjYgMTMuMDZ2OC43NDNhMSAxIDAgMCAwIDIgMFYxMC42NDZhMS4wMDUgMS4wMDUgMCAwIDAtLjYxOC0uOTI0eiIvPjxwYXRoIGQ9Ik0zOS4yNiAyNy45ODVhMSAxIDAgMCAwLTEgMXYxMC42NmgtMjh2LTI4aDEwLjY4M2ExIDEgMCAwIDAgMC0ySDkuMjZhMSAxIDAgMCAwLTEgMXYzMGExIDEgMCAwIDAgMSAxaDMwYTEgMSAwIDAgMCAxLTF2LTExLjY2YTEgMSAwIDAgMC0xLTF6Ii8+PC9zdmc+');

}

.yii-debug-toolbar__switch-icon {

margin-left: 10px;

padding: 5px 10px;

width: 18px;

height: 18px;

background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDUwIDUwIiB2ZXJzaW9uPSIxLjEiPjxwYXRoIGQ9Im00MS4xIDIzYy0wLjYgMC0xIDAuNC0xIDF2MTAuN2wtMjUuNi0wLjFjMCAwIDAtMiAwLTIuOCAwLTAuOC0wLjctMS0xLTAuNmwtMy41IDMuNWMtMC42IDAuNi0wLjYgMS4zIDAgMmwzLjQgMy40YzAuNCAwLjQgMS4xIDAuMiAxLTAuNmwwLTIuOWMwIDAgMjAuOCAwLjEgMjYuNiAwIDAuNiAwIDEtMC40IDEtMXYtMTEuN2MwLTAuNi0wLjQtMS0xLTF6TTkgMjYuOSA5IDI2LjkgOSAyNi45IDkgMjYuOSIvPjxwYXRoIGQ9Im05IDI2LjljMC42IDAgMS0wLjQgMS0xdi0xMC43bDI1LjYgMC4xYzAgMCAwIDIgMCAyLjggMCAwLjggMC43IDEgMSAwLjZsMy41LTMuNWMwLjYtMC42IDAuNi0xLjMgMC0ybC0zLjQtMy40Yy0wLjQtMC40LTEuMS0wLjItMSAwLjZsMCAyLjljMCAwLTIwLjgtMC4xLTI2LjYgMC0wLjYgMC0xIDAuNC0xIDF2MTEuN2MwIDAuNiAwLjQgMSAxIDF6Ii8+PC9zdmc+');

}

.yii-debug-toolbar__ajax {

position: relative;

}

.yii-debug-toolbar__ajax:hover .yii-debug-toolbar__ajax_info,

.yii-debug-toolbar__ajax:focus .yii-debug-toolbar__ajax_info {

visibility: visible;

}

.yii-debug-toolbar__ajax_info {

visibility: hidden;

transition: visibility .2s linear;

background-color: white;

box-shadow: inset 0 -10px 10px -10px #e1e1e1;

position: absolute;

bottom: 40px;

left: -1px;

padding: 10px;

max-width: 480px;

max-height: 480px;

word-wrap: break-word;

overflow: hidden;

overflow-y: auto;

box-sizing: border-box;

border: 1px solid rgba(0, 0, 0, 0.11);

z-index: 1000001;

}

.yii-debug-toolbar__ajax a {

color: #337ab7;

}

.yii-debug-toolbar__ajax table {

width: 100%;

table-layout: auto;

border-spacing: 0;

border-collapse: collapse;

}

.yii-debug-toolbar__ajax table td {

padding: 4px;

font-size: 12px;

line-height: normal;

vertical-align: top;

border-top: 1px solid #ddd;

}

.yii-debug-toolbar__ajax table th {

padding: 4px;

font-size: 11px;

line-height: normal;

vertical-align: bottom;

border-bottom: 2px solid #ddd;

}

.yii-debug-toolbar__ajax_request_status {

color: white;

padding: 2px 5px;

}

.yii-debug-toolbar__ajax_request_url {

max-width: 170px;

overflow: hidden;

text-overflow: ellipsis;

}

</style><script>(function () {

'use strict';

var findToolbar = function () {

return document.querySelector('#yii-debug-toolbar');

ajax = function (url, settings) {

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

settings = settings || {};

xhr.open(settings.method || 'GET', url, true);

xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

xhr.setRequestHeader('Accept', 'text/html');

xhr.onreadystatechange = function (state) {

if (xhr.readyState === 4) {

if (xhr.status === 200 && settings.success) {

settings.success(xhr);

} else if (xhr.status != 200 && settings.error) {

settings.error(xhr);

}

};

xhr.send(settings.data || '');

url,

div,

toolbarEl = findToolbar(),

toolbarAnimatingClass = 'yii-debug-toolbar_animating',

barSelector = '.yii-debug-toolbar__bar',

viewSelector = '.yii-debug-toolbar__view',

blockSelector = '.yii-debug-toolbar__block',

toggleSelector = '.yii-debug-toolbar__toggle',

externalSelector = '.yii-debug-toolbar__external',

CACHE_KEY = 'yii-debug-toolbar',

ACTIVE_STATE = 'active',

animationTime = 300,

activeClass = 'yii-debug-toolbar_active',

iframeActiveClass = 'yii-debug-toolbar_iframe_active',

iframeAnimatingClass = 'yii-debug-toolbar_iframe_animating',

titleClass = 'yii-debug-toolbar__title',

blockClass = 'yii-debug-toolbar__block',

blockActiveClass = 'yii-debug-toolbar__block_active',

requestStack = [];

if (toolbarEl) {

url = toolbarEl.getAttribute('data-url');

ajax(url, {

success: function (xhr) {

div = document.createElement('div');

div.innerHTML = xhr.responseText;

toolbarEl.parentNode && toolbarEl.parentNode.replaceChild(div, toolbarEl);

showToolbar(findToolbar());

error: function (xhr) {

toolbarEl.innerText = xhr.responseText;

}

});

}

function showToolbar(toolbarEl) {

var barEl = toolbarEl.querySelector(barSelector),

viewEl = toolbarEl.querySelector(viewSelector),

toggleEl = toolbarEl.querySelector(toggleSelector),

externalEl = toolbarEl.querySelector(externalSelector),

blockEls = barEl.querySelectorAll(blockSelector),

iframeEl = viewEl.querySelector('iframe'),

iframeHeight = function () {

return (window.innerHeight * 0.7) + 'px';

isIframeActive = function () {

return toolbarEl.classList.contains(iframeActiveClass);

showIframe = function (href) {

toolbarEl.classList.add(iframeAnimatingClass);

toolbarEl.classList.add(iframeActiveClass);

iframeEl.src = externalEl.href = href;

viewEl.style.height = iframeHeight();

setTimeout(function() {

toolbarEl.classList.remove(iframeAnimatingClass);

}, animationTime);

hideIframe = function () {

toolbarEl.classList.add(iframeAnimatingClass);

toolbarEl.classList.remove(iframeActiveClass);

removeActiveBlocksCls();

externalEl.href = '#';

viewEl.style.height = '';

setTimeout(function() {

toolbarEl.classList.remove(iframeAnimatingClass);

}, animationTime);

removeActiveBlocksCls = function () {

[].forEach.call(blockEls, function (el) {

el.classList.remove(blockActiveClass);

});

toggleToolbarClass = function (className) {

toolbarEl.classList.add(toolbarAnimatingClass);

if (toolbarEl.classList.contains(className)) {

toolbarEl.classList.remove(className);

} else {

toolbarEl.classList.add(className);

}

setTimeout(function () {

toolbarEl.classList.remove(toolbarAnimatingClass);

}, animationTime);

toggleStorageState = function (key, value) {

if (window.localStorage) {

var item = localStorage.getItem(key);

if (item) {

localStorage.removeItem(key);

} else {

localStorage.setItem(key, value);

}

restoreStorageState = function (key) {

if (window.localStorage) {

return localStorage.getItem(key);

}

togglePosition = function () {

if (isIframeActive()) {

hideIframe();

} else {

toggleToolbarClass(activeClass);

toggleStorageState(CACHE_KEY, ACTIVE_STATE);

}

};

if (restoreStorageState(CACHE_KEY) === ACTIVE_STATE) {

toolbarEl.classList.add(activeClass);

}

toolbarEl.style.display = 'block';

window.onresize = function () {

if (toolbarEl.classList.contains(iframeActiveClass)) {

viewEl.style.height = iframeHeight();

}

};

barEl.onclick = function (e) {

var target = e.target,

block = findAncestor(target, blockClass);

if (block && !block.classList.contains(titleClass)

&& e.which !== 2 && !e.ctrlKey // not mouse wheel and not ctrl+click

) {

while (target !== this) {

if (target.href) {

removeActiveBlocksCls();

block.classList.add(blockActiveClass);

showIframe(target.href);

}

target = target.parentNode;

}

e.preventDefault();

}

};

toggleEl.onclick = togglePosition;

}

function findAncestor(el, cls) {

while ((el = el.parentElement) && !el.classList.contains(cls));

return el;

}

function renderAjaxRequests() {

var requestCounter = document.getElementsByClassName('yii-debug-toolbar__ajax_counter');

if (!requestCounter.length) {

return;

}

var ajaxToolbarPanel = document.querySelector('.yii-debug-toolbar__ajax');

var tbodies = document.getElementsByClassName('yii-debug-toolbar__ajax_requests');

var state = 'ok';

if (tbodies.length) {

var tbody = tbodies[0];

var rows = document.createDocumentFragment();

if (requestStack.length) {

var firstItem = requestStack.length > 20 ? requestStack.length - 20 : 0;

for (var i = firstItem; i < requestStack.length; i++) {

var request = requestStack[i];

var row = document.createElement('tr');

rows.appendChild(row);

var methodCell = document.createElement('td');

methodCell.innerHTML = request.method;

row.appendChild(methodCell);

var statusCodeCell = document.createElement('td');

var statusCode = document.createElement('span');

if (request.statusCode < 300) {

statusCode.setAttribute('class', 'yii-debug-toolbar__ajax_request_status yii-debug-toolbar__label_success');

} else if (request.statusCode < 400) {

statusCode.setAttribute('class', 'yii-debug-toolbar__ajax_request_status yii-debug-toolbar__label_warning');

} else {

statusCode.setAttribute('class', 'yii-debug-toolbar__ajax_request_status yii-debug-toolbar__label_error');

}

statusCode.textContent = request.statusCode || '-';

statusCodeCell.appendChild(statusCode);

row.appendChild(statusCodeCell);

var pathCell = document.createElement('td');

pathCell.className = 'yii-debug-toolbar__ajax_request_url';

pathCell.innerHTML = request.url;

pathCell.setAttribute('title', request.url);

row.appendChild(pathCell);

var durationCell = document.createElement('td');

durationCell.className = 'yii-debug-toolbar__ajax_request_duration';

if (request.duration) {

durationCell.innerText = request.duration + " ms";

} else {

durationCell.innerText = '-';

}

row.appendChild(durationCell);

row.appendChild(document.createTextNode(' '));

var profilerCell = document.createElement('td');

if (request.profilerUrl) {

var profilerLink = document.createElement('a');

profilerLink.setAttribute('href', request.profilerUrl);

profilerLink.innerText = request.profile;

profilerCell.appendChild(profilerLink);

} else {

profilerCell.innerText = 'n/a';

}

row.appendChild(profilerCell);

if (request.error) {

if (state !== "loading" && i > requestStack.length - 4) {

state = 'error';

}

} else if (request.loading) {

state = 'loading'

}

row.className = 'yii-debug-toolbar__ajax_request';

}

while (tbody.firstChild) {

tbody.removeChild(tbody.firstChild);

}

tbody.appendChild(rows);

}

ajaxToolbarPanel.style.display = 'block';

}

requestCounter[0].innerText = requestStack.length;

var className = 'yii-debug-toolbar__label yii-debug-toolbar__ajax_counter';

if (state === 'ok') {

className += ' yii-debug-toolbar__label_success';

} else if (state === 'error') {

className += ' yii-debug-toolbar__label_error';

}

requestCounter[0].className = className;

};

var proxied = XMLHttpRequest.prototype.open;

XMLHttpRequest.prototype.open = function (method, url, async, user, pass) {

var self = this;

/* prevent logging AJAX calls to static and inline files, like templates */

if (url.substr(0, 1) === '/' && !url.match(new RegExp("{{ excluded_ajax_paths }}"))) {

var stackElement = {

loading: true,

error: false,

url: url,

method: method,

start: new Date()

};

requestStack.push(stackElement);

this.addEventListener("readystatechange", function () {

if (self.readyState == 4) {

stackElement.duration = self.getResponseHeader("X-Debug-Duration") || new Date() - stackElement.start;

stackElement.loading = false;

stackElement.statusCode = self.status;

stackElement.error = self.status < 200 || self.status >= 400;

stackElement.profile = self.getResponseHeader("X-Debug-Tag");

stackElement.profilerUrl = self.getResponseHeader("X-Debug-Link");

renderAjaxRequests();

}

}, false);

renderAjaxRequests();

}

proxied.apply(this, Array.prototype.slice.call(arguments));

};

// catch fetch AJAX requests

if (window.fetch) {

var originalFetch = window.fetch;

window.fetch = function(input, init) {

var method;

var url;

if (typeof input === "string") {

method = (init && init.method) || 'GET';

url = input;

} else if (window.Request && input instanceof Request) {

method = input.method;

url = input.url;

}

var promise = originalFetch(input, init);

/* prevent logging AJAX calls to static and inline files, like templates */

if (url.substr(0, 1) === '/' && !url.match(new RegExp("{{ excluded_ajax_paths }}"))) {

var stackElement = {

loading: true,

error: false,

url: url,

method: method,

start: new Date()

};

requestStack.push(stackElement);

promise.then(function(response) {

stackElement.duration = response.headers.get("X-Debug-Duration") || new Date() - stackElement.start;

stackElement.loading = false;

stackElement.statusCode = response.status;

stackElement.error = response.status < 200 || response.status >= 400;

stackElement.profile = response.headers.get("X-Debug-Tag");

stackElement.profilerUrl = response.headers.get("X-Debug-Link");

renderAjaxRequests();

return response;

}).catch(function(error) {

stackElement.loading = false;

stackElement.error = true;

renderAjaxRequests();

throw error;

});

renderAjaxRequests();

}

return promise;

};

}

})();</script><script src="/assets/25cf514d/jquery.js"></script>

jQuery('#w0').yiiGridView({"filterUrl":"\/usersinfo\/index","filterSelector":"#w0-filters input, #w0-filters select"});

});</script></body>

</html>