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

Основы программирования на языке. HTML

Содержание:

Введение

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

Цель работы – изучение языка гипертекста HTML

Задачи:

Рассказать о языке,
Показать процесс создания сайта,
Создать веб-сайт;

Основы языка разметки
1. Что такое html

Html – расшифровывается как Hyper Text Markup Language, по названию можно понять, что это язык гипертекста, html-документы читаются веб-браузерами. Готовый Html-файл интерпретируется веб-браузером для отображения различных элементов и их первичной обработки. С помощью html появляется возможность подбирать шрифты, создавать линии и прочие графические элементы в любом веб-браузере.

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

Как правило – с помощью html задаются строгие инструкции по отображению контента на странице, такие как шрифт или размер – в случае с текстом. Некоторые веб-браузеры позволяют модифицировать отображаемую страницу, так как веб-браузер может легко распознать для чего используется тег, например “h1”. Определив его веб-браузер может увеличить шрифт заголовка, так как настроен на укрупнённое отображение, то же самое может произойти и с шрифтом заголовка, в зависимости от настроек в веб-браузере. Важно подметить, что веб-браузер может повлиять только на стиль отображения документа, само содержание без ручного вмешательства веб-браузеру не подвластно. Конкретный пример приведён на рисунках 1-3 ниже:

Рисунок 1. Код html.

Рисунок 2. Отображение в веб-браузере “Google Chrome”.

Рисунок 3. Отображение в веб-браузере “Safari”.

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

1. Инструменты для разработки

Для написания html-документа подходит абсолютно любой текстовый редактор, вплоть до встроенного в операционную систему блокнота. Сейчас на выбор имеется ряд сред для разработки IDE (Integrated Development Environment). Позволяющие как ускорить разработку при помощи авто-заполнения всех тегов, так и минимизировать ошибки с помощью встроенной проверки. Так как html интерпретируемый язык – ошибки можно отследить либо найдя их зрительно, либо прибегнуть к помощи определения ошибки средой разработки, поскольку нет процесса компиляции, где отслеживаются ошибки в большинстве языков программирования.

1. Основы синтаксиса

Html-тег состоит из трёх частей:

“<” – левая угловая скобка,
Название тега,
“>” – правая угловая скобка;

Как правило теги делятся на открывающий и закрывающий теги, между которыми прописывается содержимое данного элемента, закрывающий тег отличается наличием символа “/” (слеш), перед правой угловой скобкой. Важно отменить что уровень регистра не влияет на тег, т.е. между фрагментами “<h1>Привет, мир<h1/>” и “<H1>Привет, мир</H1>” – веб-браузер разницы не увидит. В данном примере считывая тег “<h1>” веб-браузер понимает формат использования подзаголовка, а по тегу “</h1>” – завершение текста заголовка.

Некоторые теги не являются парными и не требуют завершающего тега, например “<img>”, так же стоит обратить внимание, на наличие обязательных атрибутов в некоторых тегах, например для вышеупомянутого “<img>”, требуется два атрибута “src” и “alt”, то есть заполненным тег должен выглядеть следующим образом:

Рисунок 4. Тег “img” с расписанными атрибутами.

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

1. Структура

Веб-браузер отправляет запрос на сервер, а в ответ получает документ, после чего определяет как полученный документ будет интерпретирован. Первым элементом должен быть тег – “<DOCTYPE>”, как раз для определения типа документа, в нашем случае этот тег даёт понять веб-браузеру, что документ написан с использованием HTML. Само содержимое документа всегда находится внутри тега “<html>”.

Тег “<head>” отвечает за заголовочную часть документа. Используется сразу после тега “<html>”, встречается в документе только один раз. Данный тег содержит в себе общее описание документа, подключение отдельных файлов, не используйте его для размещения текста, например:

Рисунок 5. Пример содержимого в теге “<head>”

В примере вышел, последним элементом в теге “<head>” является тег “<title>”, ответственный за отображение его содержимого в заголовке окна и в файле закладок. В самом документе заголовок отображаться не будет.

1. Содержимое тела документа

Тело документа определяется тегом “<body>”, ставится сразу после тега “<head>” и нигде больше. Все теги находящиеся между “<body>” и “</body>” будут отображаться в документе.

Текст в документе может делиться на простой текст и подзаголовки, подзаголовки могут отличаться, для этого в html предусмотрено 6 разных уровней подзаголовков, самый большой (первый уровень подзаголовков) обозначается цифрой 1, последующий – цифрой 2 и так далее. Почти все веб-браузеры поддерживают 6 уровней заголовков. Заголовки выше 6го уровня будут считаться простым текстом, синтаксис подзаголовков представлен ниже:

Рисунок 7. Пример общего синтаксиса подзаголовка.

Рисунок 8. Внешние отличия разных уровней заголовка.

Чтобы разделить текст на абзацы используется тег “<p>”, так как веб-браузер разделит абзацы только при наличии данного тега, то есть без его использования, несмотря на переносы строк в тексте html-документа - итоговый текст будет выглядеть как один большой абзац.

Для тега “<p>” уже более актуально применение стилей или встроенных атрибутов. Например, можно отцентрировать текст с помощью атрибута “align”:

Рисунок 8. Код с центрированием абзаца.

Рисунок 9. Внешний вид абзаца в веб-браузере.

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

Рисунок 10. Код центрированного текста с помощью языка стилей.

Рисунок 11. Внешний вид абзаца в веб-браузере.

Так же при работе с абзацами важно определять как именно браузеру работать с пробелами, в этом помогает атрибут “white-space”. Данный атрибут имеет ряд значений:

Normal, при использовании которого любые переносы строк устанавливаются автоматически, но избегают переноса слов,
Nowrap, при использовании которого пробелы учитываться не будут, текст отображается одной строкой, но можно регулировать все переносы строк вручную путём добавления в текст непарного тега “<br>”,
Pre, при использовании которого, веб-браузер будет отображать все пробелы и переносы в строгом соответствии с кодом разработчика, если строка не будет помещаться в окне браузера, то будет добавлена полоса прокрутки,
Pre-line, при использовании которого пробелы учитываться не будут и если текст не будет помещаться в заданную область, он переносится на следующую строку,
Pre-wrap, при использовании которого текст сохраняет все пробелы и переносы, если текст не будет помещаться в заданную область, он переносится на следующую строку,
Inherit, при использовании которого наследует значение родителя, а именно элемента внутри которого находится абзац;

Рисунок 12. Пример использования вышеописанных свойств атрибута “white-space”.

Рисунок 13. Внешний вид документа из примера кода, указанного выше.

Для работы с оформлением самого текста используются парные теги, чтобы сделать текст жирным или курсивом “<b>” и “<i>”, их можно использовать внутри тега “<p>” и любых других в пределах “<body>”.

Синтаксис:

Рисунок 14. Примеры использования изменённых параметров начертания.

Рисунок 15. Отображение текста с изменёнными параметрами начертания.

1. Списки

Для оформления списков используется тег “<li>”, для использования которого обязателен родительский (внешний) тег “<ul>” или “<ol>”, в зависимости от выбранного родителя будет зависеть тип списка, маркированный или нумерованный

Синтаксис списков:

Рисунок 16. Синтаксис списков.

Рисунок 17. Внешний вид списков документа.

1. Ссылки

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

Для создания ссылки используется тег “<a>”. У данного тег есть один обязательный атрибут – “href”, в который передаётся URL (Universal Resource Locator), по-другому путь к файлу, на который указывает ссылка. Текст расположенный между открывающим и закрывающим тегами – это сама ссылка, Такой текст по умолчанию становится синего цвета и подчёркивается, а после перехода по ссылке пользователем окрашивается в фиолетовый.

Синтаксис:

Рисунок 18. Синтаксис ссылки и атрибута “target”.

У ссылки есть необязательный атрибут – “target”. По умолчанию, при переходе по ссылке документ открывается в текущем окне. Атрибут “target” может изменить это условие и принимает следующие значения:

“_blank”, загружает страницу в новое окно веб-браузера,
“_self”, загружает страницу в текущее окно,
“_parent”, загружает страницу во фрейм родитель, если в документе не используются фреймы, то страница будет загружена в новом окне,
“_top”, загружает страницу в полном окне браузера.

Так же, если есть необходимость сделать так, чтобы все ссылки открываться в новом окне, можно избежать необходимость добавлять ко всем тегам “<a>” атрибут “target” со значением “_blank”. Код сокращается добавлением одного тега “<base>” в начале документа.

Синтаксис “<base>”:

Рисунок 19. Синтаксис и расположение тега “<base>”

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

Синтаксис:

Рисунок 19. Синтаксис шаблона взаимодействия с приложением в ссылке.

Рисунок 20. Окно веб-браузера Google Chrome при нажатии на ссылку с номером телефона.

С помощью ссылок можно перемещаться по документу с помощью “Якорей”, так называется закладка с уникальным именем на определённом месте страницы. Применение “Якоря” очень удобно при использовании в больших файлах, для упрощения навигации по веб-сайту.

Синтаксис использования “Якоря”:

Рисунок 20. Пример кода с использованием “Якоря”.

1. Структура видимой области документа

Самым универсальным тегов в html является “<div>”, он предназначен для выделения фрагмента документа с целью изменения вида содержимого. Представляет из себя блочный элемент и является парным тегом. Вид блока “<div>” регулируется с помощью стилей, как правило с помощью атрибутов “class” или “id”.

До HTML5 с помощью “<div>” разных классов документ структурно разделялся на разные части, такие как:

Заголовок,
Секция,
Основная панель навигации,
Боковая панель навигации,
Нижний колонтитул.

Такие классы использовались для облегчения работы с кодом для человека, где к каждому элементу “<div>”, добавлялся атрибут “class” с соответствующим значением, например:

Рисунок 20. Структурное разделение с помощью класса “<div>”

В HTML5 для структурирования кода ввели несколько новых тегов:

“<header>”. Определяющий заголовок сайта или статьи,
“<article>”. Содержит контентную часть сайта вроде новости, записи блога, статьи,
“<nav>”. Задающий навигацию по сайту, допустимо использовать несколько раз,
“<aside>”. Блок, не относящийся к основному контенту, для размещения рубрик, ссылок и прочей дополнительной информации, как правило называется “Сайдбар” или “Боковая панель”,
“<footer>”. “Подвал” веб-сайта или раздела, где обычно располагается информация об авторе и контакты.

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

1. Оформление документа

Для простоты управления стилями используется атрибут “class”, который задаёт стилевой класс, позволяющий связать определённый тег со стилевым оформлением. В значении допускается указывать сразу несколько классов, перечисляя их через пробел. Данный атрибут применим к большинству тегов.

Так же, для связки тега со стилевым оформлением можно использовать атрибут “id”, но у него есть обязательно условие иметь уникальное значение, а один класс, в свою очередь могут встречаться в документе несколько раз, что и позволяет сильно сокращать количество написанного кода.

Стили
1. Основы CSS

CSS (Cascading Style Sheets) – язык таблиц стилей, позволяющий применять стили (например, цвет или шрифт) к гипертекстовым документам. Как правило CSS-стили применяются для создания, настройки и изменения стиля элементов веб-страниц и интерфейсов, созданных на языке гипертекста HTML, но также могут быть применены к XHTML, XML, SVG и XUL. CSS упрощает создание и редактирование веб-сайта за счёт дробления (разделения) контентной части документа и описания инструкций визуализации.

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

Создание стиля состоит из двух частей:

“Селектор”. В качестве Селектора выступает название тега, причём, как и в синтаксисе HTML, так и в синтаксисе CSS регистр не играет роли, то есть “<div>” и “<DIV>”, интерпретатор читает одинаково. По мимо названия тега как селектор может выступать класс элемента, который обозначается атрибутом “class” или идентификатор элемента, обозначающийся атрибутом “id”, единственное отличие, что перед классом в качестве селектора ставится “точка”, а перед идентификатором “октоторп” (Знак решётки),
“Блок объявлений”. Блок объявлений состоит из двух частей: “имя свойства” (например “box-sizing”) и “значение свойства” (например, “border-box”);

Селектор передаёт браузеру, какой именно элемент форматируется, а в блоке объявлений перечисляются команды для форматирования – их свойства и значения свойств.

Синтаксис:

Рисунок 22. Синтаксис селектора и блока объявлений с использованием класса, идентификатора и названия тега.

Рисунок 23. Внешний вид файла с применением CSS.

1. Виды таблиц стилей
  1. Внешняя таблица стилей

Представляет из себя текстовый файл с расширением “.css”, который содержит в себе набор CSS-стилей элементов. Так же, как и HTML-страница, файл создаётся в редакторе кода. Важно подменить, что внутри файла могут находиться только стили, без разметки HTML. Внешняя таблица импортируется с использованием тега “<link>”, который располагается внутри тега “<head>”. Причём “<link>”, может встречаться несколько раз, при необходимости подавить несколько CSS-файлов. Тег “<link>” принимает два обязательных атрибута “rel” и “href”, “rel” принимает назначение данной таблице, в случае с CSS это “stylesheet”, “href” в качестве значения принимает путь к CSS-файлу. При использовании нескольких внешних таблиц стилей, к последующим тегам “<link>” добавляется атрибут “media” со значением “all”. Есть необязательный атрибут “type”, которому даётся значение “text/css”, но он не обязателен по стандарту HTML5, так как значение атрибута “type” по умолчанию “text/css”.

Синтаксис:

Рисунок 24. Синтаксис тега “<link>” с его атрибутами.

- 1. Внутренние стили

Внутренние стили определяются тегом “<style>”, встраиваются как внутрь тега “<head>”, так и внутрь тега “<body>”. Важно подметить, что внутренние стили имеют приоритет над внешними (импортированными через link).

- 1. Встроенные стили

CSS-код может располагаться внутри HTML-тега при помощи атрибута “style”, такие стили распространяются только на редактируемый элемент, единственное отличие в синтаксисе от обычного применения, это отсутствие селектора, пример:

Рисунок 25. Встроенный в тег атрибут “style”.

Рисунок 26. Изменение от атрибута “style”, на только один абзац.

- 1. Правило “@import”

Внешние таблицы можно загружать изнутри тега “<style>”, как внешней, так и внутренней, “@import” должен обязательно располагаться перед остальными правилами. Синтаксис:

Рисунок 27. Синтаксис правила “@import”.

1. Селекторы
  1. Универсальный селектор

Используется для добавления правил глобально, определяется символом “*”, может быть также использован в комбинации с псевдоклассом, синтаксис:

Рисунок 28. Удаление отступов у всех элементов HTML-документа.

- 1. Селектор элемента

Селектор по элементу изменяет все элементы данного типа. Пример с синтаксисом указан на рисунке 22.

- 1. Селектор класса

Селекторы класса задают стили для одного или нескольких элементов с одинаковыми классами, например, для создания блока с классом “wrapper”, необходимо добавить атрибут “class” со значением “wrapper” в открывающий тег “<div>” и задать стиль для указанного класса. Стили, созданные с помощью класса, применяются и к другим элементам, в том числе другого типа. Пример с синтаксисом указан на рисунке 22. Элемент может иметь несколько классов, для этого в атрибут “class”, добавляет несколько значений через пробел.

- 1. Селектор идентификатора

Селектор идентификатора задают стили на один конкретный элемент, важно подметить – значение атрибута “id” должно быть уникальным, и не встречаться на странице больше 1го раза. Единственное ограничение на значение атрибута “id” – это обязательное отсутствие пробелов, больше ограничений нет и значение может быть каким угодно. Чтобы создать абзац с идентификатором “0_text_0”, необходимо добавить атрибут “id” со значением “0_text_0” в открывающий тег “<p>”. Пример с синтаксисом представлен на рисунке 22.

- 1. Селектор потомка

Селекторы потомков задают стили элементам, расположенным внутри элемента-контейнера.

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

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

Чтобы выбрать все дочерние элементы класса только абзаца, перед классом необходимо поставить название тега, как на рисунке 30.

Рисунок 30. Выбор всех строчных элементов внутри параграфов класса “par”.

- 1. Сестринский селектор

Сестринские элементы определяются наличием общего родителя. Селекторы сестринских выбирают элементы из группы элементов одного уровня. В языке CSS обозначаются при помощи символа “~”.

Синтаксис:

Рисунок 31. Выбор всех абзацев, являющихся сестринскими ко всем заголовкам “h1” и идущим сразу после.

- 1. Селектор атрибута

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

Рисунок 32. Выбор всех тегов “<img>” с атрибутом “src”

Так же, указывая значение атрибута внутри квадратных скобок, при этом, можно выбрать элементы, у которых значение атрибута начинается c указанного значения:

Рисунок 33. Выбор тегов “<a>” с атрибутом “href”, значение которого начинается с “http://”.

- 1. Селектор псевдокласса

Псевдоклассы – не прикреплены к HTML-тегам. CSS-правила применяются к элементам при совершению события или если элемент подчиняются определённому правилу.

Свойства, характеризуемые псевдоклассами:

“:link” – не посещённая пользователем ссылка,
“:visited” – посещённая ссылка,
“:hover” – активируется после проведения курсором мыши,
“:active” – активированный пользователем элемент,
“:focus” – интерактивный элемент, на подобии “<input>”, которой может быть выбран с помощью мыши или клавиатуры,
“:valid” – поля формы, при условии что содержимое прошло валидацию (содержимое соответствует указанному типу данных),
“:invalid” – поля формы, при условии что содержимое не прошло валидацию,
“:enabled” – любое активное поле формы,
“:disabled” – заблокированное поле формы,
“:in-range” – поле формы, чьё значение входит в установленный диапазон,
“:out-of-range” – поле формы, чьё значение выходит из установленного диапазона,
“:lang()” – элемент содержащий текст на указанном в скобках языке,
“:not(селектор)” – элемент, который не содержит указанный в скобках селектор,
“:tagret” – элемент с символом “октоторп” (#), на который ссылаются в документе,
“:checked” – выбранные пользователем (выделенные) элементы формы ;
- 1. Селектор структурных псевдоклассов

Структурные псевдоклассы, отбирающие дочерние элементы в соответствии с заданным параметром, указываемым в круглых скобках:

“:nth-child(odd)” – нечётные дочерние элементы,
“:nth-child(even)” – чётные дочерние элементы,
“:nth-child(3n)” – позволяет форматировать каждый третий дочерний элемент,
“:nth-child(3n+2)” – начиная со второго элемента, отбирает каждый третий дочерний элемент,
“:nth-child(n+2)” – отбирает все дочерние элементы, начиная со второго,
“:nth-child()” – выбирает указанный дочерний элемент начиная с начала,
“:nth-last-child()” – выбирает указанный дочерний элемент начиная с конца,
“:first-child” – выбирает только самый первый дочерний элемент,
“:last-child”, – выбирает только самый последний дочерний элемент,
“only-child” – выбирает элемент, являющийся единственным дочерним элементом,
“:empty” – элементы без дочерних элементов,
“:root” – корневой в документе элемент;
- 1. Селектор структурных псевдоклассов типа

Указывает на конкретный тип дочернего элемента.

Свойства:

“:nth-of-type()” – выбирает дочерние элементы по типу,
“:first-of-type” – первый дочерний элемент соответствующего типа,
“:last-of-type” – последний дочерний элемент соответствующего типа,
“:nth-last-of-type()” – дочерний элемент соответствующего типа с выбранным местом начиная с конца,
“:only-of-type” – единственный дочерний элемент соответствующего типа,
- 1. Селектор псевдоэлемента

Используется для добавления содержимого, генерируемого с помощью свойства “content”:

“:first-letter” – Относится только к первым буквам каждого абзаца, применимо только к блочным элементам,
“:first-line” – Относится только к первым строкам текста элемента, применимо только к блочным элементам,
“:before” – создаёт генерируемое содержимое перед элементом, то есть поверх него,
“:after” – создаёт генерируемого содержимое после элемента, то есть под ним;
1. Комбинация селекторов.

Для максимально точного выбора элементов можно использовать комбинации селекторов, например:

“a[href][title]” – выбирает все ссылки с атрибутами “href” и “title”, “img[alt^=“css”]:nth-of-type(even)” – все чётные картинки, с атрибутом “alt”, содержащим слово “css”.

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

Синтаксис:

Рисунок 34. Применение стилей к нескольким селекторам.

1. Правило “!important”

Значимость правила можно задать с помощью ключевого слова “!important”, которое добавляется сразу после значения свойства. Такое объявление будет иметь приоритет над всеми остальными правилами, что позволяет отменить значение свойства и установить новое, актуально в случае отсутствия доступа к файлу со стилями, например использования дополнительной библиотеки со стилями. Синтаксис:

Рисунок 35. Синтаксис правила “!important”.

1. JavaScript

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

Практическая работа
1. Подготовка

Для создания веб-сайта в качестве среды разработки (IDE) – была выбрана программа “web storm”, за счёт невысокой стоимости, набора горячих клавиш для удобства работы, быстрыми командами, например ввод только одного символа “!” и нажатие клавиши “tab” создаёт html-шаблон, так же набор ряда аддонов для ускорения и удобства работы, например – “live server”, который с помощью “nodejs”, превращает ПК в имитацию сервера, благодаря чему можно в прямом эфире наблюдать изменения в отображении создаваемого файла.

Было принято решение не использовать дополнительные библиотеки CSS и JS файлов, для большего контроля по созданию веб-сайта.

1. Создание

В html-файле были прописаны все необходимые теги с прописанными атрибутами, так же были импортированы CSS и JS-файлы.

В CSS-файле были прописаны все необходимые стили по необходимым селекторам.

В js-файле были прописаны все необходимые скрипты, импортированы веб-компоненты. У JS-файлов были созданы отдельные директории, с папкой веб-компонентов и сервисов, используемых веб-компонентами.

Веб-компоненты содержать в себе сразу html, css, js-код, для дробления кода в разных страницах. Без библиотек, то есть нативно, JavaScript поддерживает только начиная с версии EcmaScript6, поэтому правильно сайт отображается только на новых браузерах, например в браузере Internet Explorer 11 – вторая страница сайта будет отображаться некорректно.

Заключение

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

Список использованной литературы:

Jennifer Robbins “Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript and Web Graphics”, 2018
David Sawyer McFarland “CSS: The Missing Manual”, 2015
Keith J. Grant “CSS in Depth”, 2018
Terry Felke-Morris “Web Development and Design Foundations with HTML5”, 2018
Jon Duckett “HTML & CSS and JavaScript & JQuery”, 2014
Eric A. Meyer “CSS Pocket Reference: Visual Presentation for the Web”, 2018
Marjin Haverbeke “Eloquent JavaScript, 3^rd edition”, 2018
Kyle Simpson “You Don’t Know JS”, 2015
Steve Krug “Don`t make me think”, 2014
Elizabeth Robson “Head First HTML and CSS: A Learner`s Guide to Creating Standarts-Based Web Pages”, 2012
Jon Duckett “HTML & CSS: Design and Build Websites”, 2014
Jullie C. Meloni “HTML, CSS, and JavaScript All in One”, 2015

Приложения

Приложение 1

Index.html

<!doctype html>

<head>

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<title>Storm</title>

</head>

<body>

</a>

</a>

</a>

</div>

<div class="scr">Услуги</div>

<div class="scr">Портфолио</div>

<div class="scr">Контакты</div>

</div>

<h1>создание сайтов</h1>

<h2>именно так, как вы этого хотите</h2>

<div class="get-started">Начать работу</div>

</div>

</section>

<h1>Услуги</h1>

</div>

<web-comp></web-comp>

</section>

<h1>Портфолио</h1>

</div>

</section>

</div>

</body></html>

Приложение 2

Style.css

@import url('https://fonts.googleapis.com/css?family=Montserrat+Alternates:400,700&display=swap');

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html {

font-size: 0.9vw;

}

body {

font-family: 'Montserrat Alternates', sans-serif;

color: #fff;

background-color: #000;

overflow: hidden;

}

.src-area {

width: 100%;

height: 100vh;

}

section {

width: 100%;

height: 100vh;

transition: transform 1.2s;

}

section:nth-child(1) {

background: url('first.png') no-repeat center / cover;

}

section:nth-child(2) {

background: url('sec.png') no-repeat center center / cover;

}

section:nth-child(3) {

background: url('third.png') no-repeat center center / cover;

}

.flex-side {

position: absolute;

right: 2vw;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

z-index: 1;

}

.side {

display: block;

}

.line {

width: 1vw;

height: 4vw;

margin: 2vw 0;

cursor: pointer;

display: flex;

justify-content: center;

align-items: center;

}

.stick {

background-color: #aeaeae;

height: 100%;

width: 25%;

}

.header {

display: flex;

justify-content: space-between;

width: 100%;

}

.logo {

margin: 6.5vh 0 0 6.7vw;

height: 100px;

}

.nav {

margin: 6.5vh 6.7vw 0 0;

height: 100px;

width: 30%;

display: flex;

align-items: center;

justify-content: space-between;

font-weight: 700;

font-size: 1.3rem;

}

.scr {

cursor: pointer;

transition: .2s all;

}

.scr:hover {

border-bottom: #fff solid 0.2rem;

padding: 0 0 .2rem;

}

.offer {

margin-top: 28vh;

text-align: right;

display: flex;

justify-content: center;

align-items: center;

}

.wrapper {

text-align: right;

font-weight: 700;

}

.offer h1 {

margin: auto;

font-size: 8rem;

text-transform: uppercase;

text-align: right;

}

h2 {

font-size: 3rem;

}

.get-started {

font-size: 1.6rem;

width: 20vw;

height: 6.5vh;

border: 7px solid #D21F3C;

box-shadow: 0 0 14px 0 rgba(0,0,0,0.50);

border-radius: 8px;

float: right;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

margin-top: 2vh;

}

section:nth-child(2) {

display: flex;

flex-direction: column;

}

.headline {

text-align: right;

}

.headline h1 {

position: relative;

top: 4vh;

right: 6.7vw;

font-size: 7rem;

}

Приложение 3

Main.js

import { SimpleComp } from './Components/web-comp.js';

customElements.define('web-comp', SimpleComp);

const init = () => {

const

sect = document.querySelectorAll('section'),

line = document.querySelectorAll('.line'),

stick = document.querySelectorAll('.stick'),

scr = document.querySelectorAll('.scr');

let pos_Scr = 1;

const

toFirst = () => {

for (let i = 0; i < sect.length; i++) {

sect[i].style.transform = 'translateY(0)';

console.log(sect[i].style.transform);

}

stick[0].style.backgroundColor = '#ffffff';

stick[1].style.backgroundColor = '#aeaeae';

stick[2].style.backgroundColor = '#aeaeae';

pos_Scr = 1;

toSecond = () => {

for (let i = 0; i < sect.length; i++) {

sect[i].style.transform = 'translateY(-100%)';

console.log(sect[i].style.transform);

}

stick[0].style.backgroundColor = '#aeaeae';

stick[1].style.backgroundColor = '#ffffff';

stick[2].style.backgroundColor = '#aeaeae';

pos_Scr = 2;

toThird = () => {

for (let i = 0; i < sect.length; i++) {

sect[i].style.transform = 'translateY(-200%)';

console.log(sect[i].style.transform);

}

stick[0].style.backgroundColor = '#aeaeae';

stick[1].style.backgroundColor = '#aeaeae';

stick[2].style.backgroundColor = '#ffffff';

pos_Scr = 3;

};

const

scrollDat = e => {

let direction = e.deltaY;

if (pos_Scr === 1) {

if (direction > 0) {

document.removeEventListener('wheel', scrollDat);

console.log('down');

toSecond();

setTimeout( () => {

document.addEventListener('wheel', scrollDat);

}, 1200 );

} else {

console.log('up');

}

} else if (pos_Scr === 2) {

if (direction > 0) {

document.removeEventListener('wheel', scrollDat);

console.log('down');

toThird();

setTimeout( () => {

document.addEventListener('wheel', scrollDat);

}, 1200 );

} else {

document.removeEventListener('wheel', scrollDat);

console.log('up');

toFirst();

setTimeout( () => {

document.addEventListener('wheel', scrollDat);

}, 1200 );

}

} else if (pos_Scr === 3) {

if (direction > 0) {

console.log('down');

} else {

document.removeEventListener('wheel', scrollDat);

console.log('up');

toSecond();

setTimeout( () => {

document.addEventListener('wheel', scrollDat);

}, 1200 );

}

butScroll = i => {

if ( i === 1 ) {

toFirst();

} else if ( i === 2 ) {

toSecond();

} else if ( i === 3 ) {

toThird();

}

};

for (let i = 0; i < line.length; i++) {

line[i].addEventListener('click', () => butScroll(i + 1));

}

for (let i = 0; i < scr.length - 1; i++) {

scr[i].addEventListener('click', () => butScroll(i + 2));

}

document.addEventListener('wheel', scrollDat);

stick[0].style.backgroundColor = '#fff';

}

document.addEventListener('DOMContentLoaded', init);

Приложение 4

Web-comp.js

import { connect } from '../Services/simple-service.js';

const template =

<style>

/*@import url('https://fonts.googleapis.com/css?family=Arimo:400,700&display=swap');*/

/*@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans+SC|Arimo:400,700|Montserrat+Alternates:700&display=swap');*/

@import url('https://fonts.googleapis.com/css?family=Montserrat+Alternates:400,700&display=swap');

:host {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.services {

display: flex;

align-items: center;

justify-content: space-between;

width: 85vw;

height: 65vh;

margin: auto;

/*font-family: 'Arimo', sans-serif;*/

font-family: 'Montserrat Alternates', sans-serif;

color: #fff;

}

.wrapper {

width: 45%;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

text-align: center;

}

#photo {

width: 100%;

}

#header {

font-size: 2.5rem;

font-weight: 700;

margin: 1.5vh;

}

.underline {

width: 9.5vw;

height: 3px;

background-color: #fff;

margin: auto;

}

#text {

font-size: 1.25rem;

letter-spacing: 0.2em;

line-height: 1.5;

padding: 0 1vw;

margin: 1.5vh;

}

.bot {

margin: 12vh 0 2vh;

width: 100%;

position: relative;

display: flex;

justify-content: space-between;

align-items: center;

color: #fff;

}

.change {

font-size: 2rem;

width: 33%;

display: flex;

justify-content: center;

}

#first, #sec, #third {

cursor: pointer;

}

#sec, #third {

opacity: 0.4;

}

</style>

</div>

<h2 id="header">Дизайн макет</h2>

<p id="text">Около половины пользователей

оценивают сайт по его внешним качествам,

правильный дизайн более вероятно

превратит визит сайта в лид</p>

</div>

<div id="first">Дизайн</div>

</div>

<div id="sec">Вёрстка</div>

</div>

<div id="third">Всё лучшее сразу</div>

</div>

export class SimpleComp extends HTMLElement

{

connectedCallback()

{

this.shadow_root = this.attachShadow({mode: 'open'});

this.shadow_root.innerHTML = template;

const

photo = this.shadow_root.getElementById('photo'),

header = this.shadow_root.getElementById('header'),

text = this.shadow_root.getElementById('text'),

but = {

first: this.shadow_root.getElementById('first'),

sec: this.shadow_root.getElementById('sec'),

third: this.shadow_root.getElementById('third'),

con = connect();

but.first.addEventListener('click', () => con.first(photo, header, text, but));

but.sec.addEventListener('click', () => con.sec(photo, header, text, but));

but.third.addEventListener('click', () => con.third(photo, header, text, but));

console.log('connected');

}

disconnectedCallback()

{

console.log('disconnected');

}

Приложение 5

Simple-service.js

const

heados = {

des: `Дизайн макет`,

build: `Вёрстка по вашему макету`,

both: `Пакет дизайн + вёрстка`,

textos = {

des: `Около половины пользователей

оценивают сайт по его внешним качествам,

правильный дизайн более вероятно

превратит визит сайта в лид`,

build: `От качества постройки зависит почти всё,

от стабильности работы до удобства

внесения изменений в будущем`,

both: `Создание сайта полностью с нуля,

разработка концепции сайта в зависимости от

направления компании и подстроимся

под целевую аудиторию`,

};

export const connect = () => {

return {

first: (photo, header, text, but) => {

photo.src = '../StormLandos/des.png';

photo.transform = 'translateX(0)';

header.innerHTML = heados.des;

text.innerHTML = textos.des;

but.first.style.opacity = `1`;

but.sec.style.opacity = but.third.style.opacity = `0.4`;

sec: (photo, header, text, but) => {

photo.src = '../StormLandos/hands.png';

photo.transform = 'translateX(0)';

header.innerHTML = heados.build;

text.innerHTML = textos.build;

but.sec.style.opacity = `1`;

but.first.style.opacity = but.third.style.opacity = `0.4`;

third: (photo, header, text, but) => {

photo.src = '../StormLandos/both.png';

photo.transform = 'translateX(0)';

header.innerHTML = heados.both;

text.innerHTML = textos.both;

but.third.style.opacity = `1`;

but.sec.style.opacity = but.first.style.opacity = `0.4`;

}